/* =========================
   IMAGE
========================= */

.image-kyoukaisen{
    object-position:50% 4%;
}

.image-nazouo{
    object-position:50% 14%;
}

.image-noroi{
    object-position:50% 16%;
}

.image-burakkusanta{
    object-position:50% 92%;
}

.image-poisute{
    object-position:50% 8%;
}

.image-ibutu{
    object-position:50% 86%;
}

.image-tenkyo{
    object-position:50% 10%;
}

.image-mikansei{
    object-position:50% 77.5%;
}

.image-kotaekakoe{
    object-position:50% 40%;
}

/* =========================
   RESET
========================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:
    "Hiragino Sans",
    "Noto Sans JP",
    sans-serif;

  background:#f7fbfd;
  color:#18354a;
  overflow-x:hidden;
  line-height:1.8;
}

/* =========================
   背景
========================= */

.background{
  position:fixed;
  inset:0;
  z-index:-10;
  overflow:hidden;
}

.background::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at center,
      rgba(255,255,255,0.92),
      transparent 70%
    );
}

.bg-logo{
  position:absolute;

  width:1100px;

  right:-260px;
  top:-120px;

  opacity:0.14;

  animation:
    logoFloat1 14s ease-in-out infinite;

  pointer-events:none;
}

@keyframes logoFloat1{

  0%{
    transform:
      translateY(0px)
      rotate(0deg);
  }

  50%{
    transform:
      translateY(-26px)
      rotate(3deg);
  }

  100%{
    transform:
      translateY(0px)
      rotate(0deg);
  }
}

/* =========================
   ナビ
========================= */

.navbar{

  position:fixed;

  top:0;
  left:0;

  width:100%;
  height:82px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 8%;

  background:
    rgba(255,255,255,0.85);

  backdrop-filter:
    blur(18px);

  border-bottom:
    1px solid rgba(255,255,255,0.7);

  z-index:1000;
}

.logo{
  display:flex;
  align-items:center;
  gap:14px;
}

.logo-icon{
  width:44px;
}

.logo-text{
  width:150px;
}

.menu{
  display:flex;
  align-items:center;
  gap:34px;
}

.menu a{

  position:relative;

  text-decoration:none;

  color:#506678;

  font-size:14px;
  font-weight:700;

  letter-spacing:0.08em;

  transition:0.25s;
}

.menu a::after{

  content:"";

  position:absolute;

  left:0;
  bottom:-8px;

  width:0%;
  height:2px;

  background:#2daec6;

  transition:0.25s;
}

.menu a:hover{
  color:#2daec6;
}

.menu a:hover::after{
  width:100%;
}

/* =========================
   HERO
========================= */

header{

  min-height:100vh;

  display:flex;
  align-items:center;

  padding:
    150px 8%
    100px;
}

.hero{
  max-width:760px;
}

.hero h1{

  font-size:
    clamp(36px,5vw,72px);

  line-height:1.1;

  margin-bottom:34px;

  font-weight:900;

  color:#18354a;
}

.hero p{

  font-size:20px;

  color:#5f7485;

  margin-bottom:46px;
}

/* =========================
   BUTTON
========================= */

.buttons{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.btn{

  border:none;
  cursor:pointer;

  padding:
    17px 34px;

  border-radius:22px;

  font-size:15px;
  font-weight:700;

  transition:0.3s;

  text-decoration:none;

  display:inline-block;
}

.btn-main{

  background:
    linear-gradient(
      135deg,
      #eba12b,
      #ffc86e
    );

  color:white;

  box-shadow:
    0 14px 34px
    rgba(255,181,66,0.28);
}

.btn-main:hover{

  transform:
    translateY(-5px)
    scale(1.03);
}

.btn-sub{

  background:
    linear-gradient(
      135deg,
      #47c9df,
      #77e4ff
    );

  color:white;

  box-shadow:
    0 14px 34px
    rgba(71,201,223,0.28);
}

.btn-sub:hover{

  transform:
    translateY(-5px)
    scale(1.03);
}

.contact-buttons{

  display:flex;

  justify-content:center;

  gap:20px;

  flex-wrap:wrap;
}

/* =========================
   SECTION
========================= */

section{
  padding:140px 8% 120px;
  min-height:100vh;
}

.section-title{
  margin-bottom:60px;
}

.section-title h2{

  font-size:54px;
  line-height:1.1;

  color:#18354a;
}

/* =========================
   ガラスカード
========================= */

.news-item,
.member-card,
.content-card,
.contact-box,
.about-box,
.pickup-card{

  background:
    rgba(255,255,255,0.62);

  backdrop-filter:
    blur(24px);

  border:
    1px solid rgba(255,255,255,0.7);

  box-shadow:
    0 10px 40px rgba(0,0,0,0.05);
}

/* =========================
   PICKUP
========================= */

.pickup-grid{

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

  gap:28px;

  margin-top:60px;
}

.pickup-card{

  border-radius:34px;

  overflow:hidden;

  transition:0.35s;
}

.pickup-card:hover{

  transform:
    translateY(-10px)
    scale(1.015);
}

.pickup-image{

  height:240px;

  background:
    linear-gradient(
      135deg,
      rgba(84,214,230,0.25),
      rgba(240,163,58,0.2)
    );
}

.pickup-body{
  padding:32px;
}

.pickup-body h3{

  font-size:32px;

  margin-bottom:16px;
}

.pickup-body p{
  color:#607688;
}

/* =========================
   ABOUT
========================= */

.about-box{

  padding:50px;

  border-radius:40px;
}

.about-box p{

  font-size:18px;

  color:#607688;

  margin-bottom:24px;
}

/* =========================
   NEWS
========================= */

.news-list{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.news-item{

  padding:34px;

  border-radius:30px;

  transition:0.3s;
}

.news-item:hover{

  transform:
    translateY(-8px);

  box-shadow:
    0 20px 50px rgba(0,0,0,0.08);
}

.news-date{

  color:#2daec6;

  font-size:14px;
  font-weight:700;

  margin-bottom:12px;
}

.news-item h3{

  font-size:28px;

  margin-bottom:12px;
}

.news-item p{
  color:#607688;
}

/* =========================
   CONTENTS
========================= */

.content-grid{

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(290px,1fr));

  gap:28px;
}

.content-card{

  position:relative;

  overflow:hidden;

  border-radius:34px;

  transition:0.35s;
}

.content-card::after{
    content:"";
    position:absolute;
    inset:0;

    border:3.7px solid rgba(120, 225, 243, 0.901);

    border-radius:32px;

    opacity:0;
    transition:.25s;

    pointer-events:none;
}

.content-card.touching::before{
    opacity:1;
}

.content-card.touching::after{
    opacity:1;
}

.content-card:hover::after{
    opacity:1;
}

.content-card:hover{

  transform:
    translateY(-10px)
    scale(1.015);
}

.content-card::before{
    content:"タップで詳細";
    position:absolute;

    right:16px;
    bottom:16px;

    color:#2daec6;

    padding:6px 12px;
    border-radius:999px;

    font-size:13px;
    font-weight:700;

    opacity:0;
    transition:.2s;

    pointer-events:none;
}

.content-card:hover::before{
    opacity:1;
}

.content-card.active::before{
    opacity:0;
}

.content-image{

  width:100%;

  height:240px;

  object-fit:cover;

  display:block;
}

.content-body{
  padding:32px;
}

.content-card h3{

  font-size:32px;

  margin-bottom:14px;
}

.content-card p{
  color:#607688;
}

.filter-buttons{

    display:flex;
    justify-content:center;
    gap:16px;

    margin-bottom:50px;

    flex-wrap:wrap;
}

.filter-buttons button{

    padding:10px 26px;

    border:none;

    border-radius:999px;

    background:#edf4f7;

    color:#607688;

    font-weight:700;

    cursor:pointer;

    transition:.25s;
}

.filter-buttons button.active{

    background:#2daec6;

    color:white;
}

.filter-buttons button:hover{

    background:#5fd6ea;
    color:white;
}

/* =========================
   CREATOR
========================= */

.member-grid{

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

  gap:26px;
}

.member-card{

  padding:38px;

  border-radius:34px;

  text-align:center;

  transition:0.35s;
}

.member-card:hover{

  transform:
    translateY(-10px)
    scale(1.02);
}

.member-icon{

  width:120px;
  height:120px;

  margin:
    0 auto 26px;

  border-radius:50%;

  object-fit:cover;

  border:
    4px solid rgba(255,255,255,0.8);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.08);
}

.member-card h3{

  font-size:30px;

  margin-bottom:8px;
}

.member-role a{

  color:#ea9920;

  font-weight:700;

  text-decoration:none;

  transition:0.2s;
}

.member-role a:hover{
  opacity:0.7;
}

.member-sub{
  font-size:13px;
  color:#8094a3;
  margin-top:4px;
  margin-bottom:18px;
}

.member-card p{
  color:#607688;
}

.member-more{
    grid-column:1 / -1;

    text-align:center;

    margin-top:20px;

    font-size:28px;
    font-style:italic;
    font-weight:600;

    color:#e5c497;

    letter-spacing:0.08em;

    opacity:0.8;
}

/* =========================
   CONTACT
========================= */

.contact-box{

  border-radius:40px;

  padding:70px;

  text-align:center;
}

.contact-box p{

  max-width:700px;

  margin:
    0 auto 40px;

  font-size:18px;

  color:#607688;
}

/* =========================
   FOOTER
========================= */

footer{

  padding:50px;

  text-align:center;

  color:#8094a3;

  font-size:14px;
}

/* =========================
   FADE
========================= */

.fade-up{

  opacity:0;

  transform:
    translateY(40px);

  animation:
    fadeUp 1s forwards;
}

.delay1{
  animation-delay:0.15s;
}

.delay2{
  animation-delay:0.3s;
}

.delay3{
  animation-delay:0.45s;
}

@keyframes fadeUp{

  to{

    opacity:1;

    transform:
      translateY(0px);
  }
}

.about-heading{
  font-size:clamp(20px,3vw,32px);
  color:#18354a;
  margin-bottom:8px;
}


/* =========================
   RESPONSIVE
========================= */

.hero-logo{

  width:min(700px,90%);

  display:block;

  margin-bottom:40px;
}


/* =========================
   SMART PHONE  スマホ
========================= */

.hamburger{
    display:none;
}

@media (max-width:900px){

.hamburger{

    transition:.3s;
}


.bg-logo{

    width:480px;

    right:-120px;

    top:60px;

    opacity:0.14;
}



.hamburger.open{

    transform:rotate(90deg);
}

/* ナビ */

.navbar{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;

    height:70px;

    padding:0 20px;
}

.logo-text{
    width:120px;
}

.logo-icon{
    width:36px;
}

.hamburger{
        display:block;
        font-size:34px;
        cursor:pointer;
        transition:.3s;

        color:#18354a;     
        z-index:1001;       
        position:relative;
    }

/* メニュー */

.menu{

    display:flex;

    position:fixed; 

    top:70px;
    left:0;

    width:100%;

    flex-direction:column;

    background:rgba(255,255,255,.93);
backdrop-filter:blur(40px);
border-top:2px solid #ecf1f4;
box-shadow:0 8px 20px rgba(0,0,0,.08);

    overflow:hidden;

    max-height:0;
    opacity:0;

    transition:
        max-height .35s ease,
        opacity .25s ease;
}

#menuOverlay{
    position:fixed;
    top:70px;
    left:0;

    width:100%;
    height:calc(100vh - 70px);

    display:none;

    z-index:999;
}


.menu.show{

    max-height:calc(100vh - 70px);

    overflow-y:auto;

    opacity:1;
}

.menu a{

    width:100%;

    padding:20px 16px;

    text-align:center;

    font-size:18px;
}

/* HERO */

header{

    padding:100px 6% 40px;

    min-height:auto;
}

.hero{

    max-width:100%;
}

.hero-logo{

    width:90%;

    margin:0 auto 25px;
}

.hero p{

    font-size:15px;

    margin-bottom:28px;
}

/* ボタン */

.buttons{
    flex-direction:column;
    align-items:center;
    gap:20px;
}

.btn{

    width:85%;

    text-align:center;

    padding:12px;
}

/* PICKUP */

.pickup-grid{

    margin-top:40px;

    gap:20px;
}

.pickup-image{

    height:170px;
}

.pickup-body{

    padding:20px;
}

.pickup-body h3{

    font-size:22px;
}

/* and more... */

.member-more{

    font-size:20px;

    margin-top:10px;

    letter-spacing:0.05em;
}

/* SECTION */

section{

    padding:90px 6% 70px;

    min-height:auto;
}

.section-title{

    margin-bottom:35px;
}

.section-title h2{

    font-size:30px;
}

/* ABOUT */

.about-box{

    padding:25px;
}

.about-heading{

    font-size:22px;
}

.about-box p{

    font-size:15px;
}

/* NEWS */

.news-item{

    padding:22px;
}

.news-item h3{

    font-size:22px;
}

/* CONTENT */

.content-body{

    padding:22px;
}

.content-card h3{

    font-size:22px;
}

.content-card.active::after{
    opacity:1;
}

/* CREATOR */

.member-card{

    padding:24px;
}

.member-icon{

    width:90px;
    height:90px;
}

.member-card h3{

    font-size:22px;
}

.member-card p{

    font-size:15px;
}

/* CONTACT */

.contact-box{

    padding:35px 20px;
}

.contact-box p{

    font-size:15px;
}

}

/* ===== モーダル ===== */

.modal{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.45);

    display:flex;
    justify-content:center;
    align-items:center;

    opacity:0;
    visibility:hidden;

    transition:.3s;

    z-index:5000;

}

.modal.show{

    opacity:1;
    visibility:visible;

}

.modal-box{

    width:min(520px,85%);

    max-height:80vh;

    overflow-y:auto;

    background:rgba(255,255,255,.85);

    backdrop-filter:blur(25px);

    border-radius:30px;

    padding:28px;

    position:relative;
}

.modal-box img{

    width:100%;

    border-radius:20px;

    margin-bottom:25px;

}

.modal-box h2{

    font-size:34px;

    margin-bottom:10px;

}

.modal-box h4{

    color:#2daec6;

    margin-bottom:20px;

}

.modal-box p{

    color:#607688;

    line-height:1.9;

}

.close{
    position:absolute;
    top:18px;
    right:18px;

    width:48px;
    height:48px;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:34px;
    font-weight:700;

    color:#18354a;

    background:rgba(255,255,255,.92);
    border-radius:50%;

    box-shadow:0 4px 15px rgba(0,0,0,.15);

    cursor:pointer;

    transition:.2s;
}

.close:hover{
    transform:scale(1.08);
    background:white;
}

.modal-history{

    white-space:pre-line;

    line-height:2;

}

.modal-table{
    width:100%;
    border-collapse:collapse;
    margin:25px 0;
}

.modal-table th{
    width:120px;
    text-align:left;
    vertical-align:top;
    padding:8px 0;
    color:#dfa92a;
}

.modal-table td{
    padding:8px 0;
    color:#222222;
}

.modal-hashtag{
    display:inline-block;
    margin:10px 0 18px;

    color:#2daec6;
    font-weight:700;
    font-size:20px;

    text-decoration:none;
}

.modal-hashtag:hover{
    text-decoration:underline;
}

.logo{
  display:flex;
  align-items:center;
  gap:14px;

  text-decoration:none;
  color:inherit;
}

.logo{
  transition:.2s;
}

.logo:hover{
  opacity:.85;
}

.logo:active{
  transform:scale(.97);
}

body.menu-open{
    overflow:hidden;
}