/*
Theme Name: Molmeet
*/

body{
margin:0;
font-family:system-ui;
background:#fafafa;
}

/* HEADER */

header{
position:fixed;
top:0;
width:100%;
background:white;
z-index:999;
box-shadow:0 2px 10px rgba(0,0,0,0.1);
transition:.3s;
}

/* utility nav */

.utility-nav{
background:#f4f4f4;
padding:6px 20px;
display:flex;
justify-content:flex-end;
gap:25px;
font-size:14px;
}

.utility-nav a{
text-decoration:none;
color:#333;
position:relative;
}

.utility-nav a::after{
content:"";
position:absolute;
left:0;
bottom:-3px;
width:0;
height:2px;
background:#0077ff;
transition:.3s;
}

.utility-nav a:hover::after{
width:100%;
}

/* main nav */

.main-nav{
display:flex;
align-items:center;
justify-content:space-between;
padding:10px 40px;
}

/* logo */

.logo{
font-size:22px;
font-weight:700;
opacity:0;
transform:translateY(-10px);
animation:logoFade .8s ease forwards;
transition:.3s;
}

.logo:hover{
transform:scale(1.05);
}

header.shrink .logo{
transform:scale(.9);
}

/* nav buttons */

.top-nav{
display:flex;
gap:40px;
}

.menu-btn{
position:relative;
background:none;
border:none;
font-size:16px;
cursor:pointer;
padding:10px;
transition:.3s;
}

.menu-btn:hover{
transform:translateY(-3px);
}

.menu-btn::after{
content:"";
position:absolute;
bottom:-5px;
left:0;
width:0;
height:2px;
background:#0077ff;
transition:.3s;
}

.menu-btn:hover::after{
width:100%;
}

.menu-btn.active{
color:#0077ff;
transform:translateY(-3px);
}

.menu-btn.active::after{
width:100%;
}

/* sub nav */

.sub-nav{
display:flex;
justify-content:center;
gap:50px;
background:#f4f4f4;
overflow:hidden;
max-height:0;
opacity:0;
transition:.35s;
}

.sub-nav.show{
padding:20px;
max-height:200px;
opacity:1;
}

.sub-nav.hide{
max-height:0;
opacity:0;
padding:0;
}

.sub-nav a{
text-decoration:none;
color:#333;
text-align:center;
font-size:14px;
opacity:0;
transform:translateY(10px);
animation:submenuFade .4s ease forwards;
position:relative;
}

.sub-nav a::after{
content:"";
position:absolute;
bottom:-4px;
left:0;
width:0;
height:2px;
background:#0077ff;
transition:.3s;
}

.sub-nav a:hover::after{
width:100%;
}

.icon{
display:block;
font-size:24px;
margin-bottom:5px;
}

@keyframes submenuFade{
0%{opacity:0;transform:translateY(15px);}
100%{opacity:1;transform:translateY(0);}
}

@keyframes logoFade{
0%{opacity:0;transform:translateY(-10px);}
100%{opacity:1;transform:translateY(0);}
}

/* hero */

.hero{
margin-top:160px;
height:90vh;
background-image:url("https://images.unsplash.com/photo-1508609349937-5ec4ae374ebf");
background-size:cover;
background-position:center;
}

/* hero copy */

.hero-copy{
text-align:center;
font-size:20px;
margin:3mm 0;
}

/* INFO BAR */

.info-bar{
background:#e8f2ff;
padding:30px 20px;
}

.info-inner{
max-width:1100px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
}

.info-left{
display:flex;
gap:30px;
}

.info-title{
font-size:13px;
color:#555;
}

.info-status{
font-size:20px;
font-weight:600;
}

.info-btn{
padding:14px 28px;
border:none;
border-radius:8px;
background:#0077ff;
color:white;
font-size:16px;
cursor:pointer;
}

/* SITE MAP */

.sitemap{
background:#111;
color:white;
padding:80px 20px;
}

.sitemap-container{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:250px 1fr;
gap:80px;
}

.sitemap-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;
}

.sitemap-grid h3{
margin-bottom:10px;
text-align:left;
}

.sitemap-grid a{
display:block;
text-align:left;
margin:6px 0;
color:white;
text-decoration:none;
position:relative;
}

.sitemap-grid a::after{
content:"";
position:absolute;
left:0;
bottom:-3px;
width:0;
height:2px;
background:#0077ff;
transition:.3s;
}

.sitemap-grid a:hover::after{
width:100%;
}

/* footer */

.footer-legal{
background:#1a1a1a;
color:#ccc;
padding:30px 20px;
font-size:13px;
}

.footer-legal-container{
max-width:1200px;
margin:auto;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}

.footer-legal-left{
line-height:1.6;
}

.footer-legal-links{
display:flex;
gap:20px;
flex-wrap:wrap;
}

.footer-legal-links a{
color:#ccc;
text-decoration:none;
}

/* TOP BUTTON */

#topBtn{
position:fixed;
bottom:30px;
right:30px;
width:55px;
height:55px;
border-radius:50%;
border:none;
background:#0077ff;
color:white;
font-size:20px;
cursor:pointer;
display:none;
}
/* SNS hover animation */

.sns-icons a{

display:inline-block;
transition:0.3s;

}

.sns-icons a:hover{

transform:translateY(-5px) scale(1.15);

}
/* SNS circle button */

.sns-icons a{

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

width:42px;
height:42px;

border-radius:50%;

background:#1e88e5;

color:white;

font-size:18px;

transition:0.3s;

}

/* hover animation */

.sns-icons a:hover{

transform:translateY(-5px) scale(1.1);

box-shadow:0 8px 20px rgba(0,0,0,0.3);

}
/* SNS 横並び */

.sns-icons{

display:flex;

flex-direction:row;

gap:12px;

align-items:center;

}
/* HERO SLIDER */

.hero{

margin-top:160px;
height:90vh;
overflow:hidden;
position:relative;

}

.hero-slider{

height:100%;
width:100%;
position:relative;

}

.slide{

position:absolute;
width:100%;
height:100%;

background-size:cover;
background-position:center;

opacity:0;

transition:opacity 1s ease;

}

/* 画像 */

.slide:nth-child(1){

background-image:url("https://images.unsplash.com/photo-1508609349937-5ec4ae374ebf");

}

.slide:nth-child(2){

background-image:url("https://images.unsplash.com/photo-1492724441997-5dc865305da7");

}

.slide:nth-child(3){

background-image:url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee");

}

.slide.active{

opacity:1;

}

/* 矢印 */

.slider-btn{

position:absolute;
top:50%;
transform:translateY(-50%);

background:rgba(0,0,0,0.4);
color:white;

border:none;

font-size:28px;

width:50px;
height:50px;

cursor:pointer;

border-radius:50%;

transition:0.3s;

}

.slider-btn:hover{

background:rgba(0,0,0,0.7);

}

.prev{

left:20px;

}

.next{

right:20px;

}



.dot{

width:10px;
height:10px;

background:white;

opacity:0.5;

border-radius:50%;

cursor:pointer;

}

.dot.active{

opacity:1;

transform:scale(1.2);

}
/* HERO SLIDER */

.hero{
margin-top:160px;
height:90vh;
overflow:hidden;
position:relative;
}

.hero-slider{
height:100%;
width:100%;
position:relative;
}

.slide{
position:absolute;
width:100%;
height:100%;
background-size:cover;
background-position:center;
opacity:0;
transition:opacity 1s ease;
}

.slide:nth-child(1){
background-image:url("https://images.unsplash.com/photo-1508609349937-5ec4ae374ebf");
}

.slide:nth-child(2){
background-image:url("https://images.unsplash.com/photo-1492724441997-5dc865305da7");
}

.slide:nth-child(3){
background-image:url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee");
}

.slide.active{
opacity:1;
}

/* arrows */

.slider-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(0,0,0,0.4);
color:white;
border:none;
font-size:28px;
width:50px;
height:50px;
border-radius:50%;
cursor:pointer;
}

.prev{ left:20px; }
.next{ right:20px; }

/* dots */

.slider-dots{

position:absolute;

bottom:30px;

right:5cm;

display:flex;

gap:10px;

z-index:5;

}

.dot{
width:10px;
height:10px;
background:white;
opacity:0.5;
border-radius:50%;
cursor:pointer;
}

.dot.active{
opacity:1;
transform:scale(1.2);
}
/* scroll indicator */

.scroll-indicator{

position:absolute;

bottom:30px;

left:50%;

transform:translateX(-50%);

display:flex;

flex-direction:column;

align-items:center;

cursor:pointer;

}
/* scroll text */

.scroll-text{

margin-top:10px;

font-size:12px;

letter-spacing:2px;

color:white;

opacity:0.8;

animation:scrollText 2s infinite;

}

/* text animation */

@keyframes scrollText{

0%{
opacity:0;
transform:translateY(-3px);
}

50%{
opacity:1;
}

100%{
opacity:0;
transform:translateY(5px);
}

}
.scroll-indicator span{

width:4px;
height:8px;

background:white;

border-radius:2px;

margin-top:6px;

animation:scrollMove 1.5s infinite;

}

/* animation */

@keyframes scrollMove{

0%{
opacity:0;
transform:translateY(0);
}

50%{
opacity:1;
}

100%{
opacity:0;
transform:translateY(12px);
}

}
.mouse{

width:24px;
height:40px;

border:2px solid white;

border-radius:20px;

position:relative;

}

.mouse::before{

content:"";

position:absolute;

top:6px;

left:50%;

transform:translateX(-50%);

width:4px;
height:8px;

background:white;

border-radius:2px;

animation:scrollMove 1.5s infinite;

}
/* info cards */

.info-cards{

padding:60px 20px;

background:#f7f7f7;

}

.cards-container{

max-width:1100px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:40px;

}

.info-card{

display:flex;

background:white;

border-radius:10px;

overflow:hidden;

box-shadow:0 5px 15px rgba(0,0,0,0.08);

transition:0.3s;

}

.info-card:hover{

transform:translateY(-5px);

box-shadow:0 10px 25px rgba(0,0,0,0.15);

}

.info-card img{

width:220px;

height:160px;

object-fit:cover;

}

.card-text{

padding:20px;

}

.card-text h3{

margin-top:0;

color:#1e88e5;

}

.card-text p{

font-size:14px;

line-height:1.6;

color:#555;

}
/* events */

.events{

padding:80px 20px;

background:#fff;

}

.event-title{

text-align:center;

font-size:28px;

margin-bottom:40px;

}

.event-slider{

position:relative;

max-width:1200px;

margin:auto;

overflow:hidden;

}

.event-track{

display:flex;

gap:30px;

transition:0.4s;

}

.event-card{

min-width:280px;

background:white;

border-radius:12px;

overflow:hidden;

box-shadow:0 5px 15px rgba(0,0,0,0.1);

transition:0.3s;

}

.event-card:hover{

transform:translateY(-6px);

box-shadow:0 10px 25px rgba(0,0,0,0.15);

}

.event-card img{

width:100%;

height:180px;

object-fit:cover;

}

.event-info{

padding:18px;

}

.event-category{

font-size:12px;

color:#777;

margin-bottom:5px;

}

.event-info h3{

margin:5px 0;

}

.event-date{

font-size:13px;

color:#666;

margin-bottom:10px;

}

.event-info a{

color:#1e88e5;

font-size:14px;

text-decoration:none;

}

/* arrows */

/* event slider */

.event-arrow{

position:absolute;

top:40%;

transform:translateY(-50%);

background:#1e88e5;

color:white;

border:none;

width:45px;

height:45px;

border-radius:50%;

cursor:pointer;

font-size:20px;

z-index:20;

}

.event-arrow.left{
left:0;
}

.event-arrow.right{
right:0;
}
.event-slider{
overflow:hidden;
}
.scroll-indicator{

pointer-events:none;

}

/*薄くするやつ*/
.event-arrow.disabled{
opacity:0.3;
pointer-events:none;
}
/* section title */

.section-title{

text-align:center;

font-size:28px;

margin-bottom:40px;

}

/* next event */

.next-event{

padding:80px 20px;

background:#f7f7f7;

}

.next-event-container{

max-width:1100px;

margin:auto;

display:flex;

gap:40px;

align-items:center;

background:white;

border-radius:12px;

overflow:hidden;

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

}

.next-event-image img{

width:420px;

height:280px;

object-fit:cover;

}

.next-event-info{

padding:30px;

}

.next-label{

font-size:12px;

letter-spacing:2px;

color:#1e88e5;

margin-bottom:5px;

}

.event-place{

color:#666;

margin-bottom:5px;

}

.event-date{

font-weight:600;

margin-bottom:10px;

}

.event-status{

margin-bottom:20px;

color:#2e7d32;

font-weight:600;

}

.event-buttons{

display:flex;

gap:15px;

}

.detail-btn{

padding:10px 20px;

border:2px solid #1e88e5;

color:#1e88e5;

text-decoration:none;

border-radius:6px;

}

.reserve-btn{

padding:10px 20px;

background:#1e88e5;

color:white;

text-decoration:none;

border-radius:6px;

}
/* news */

.news{
padding:80px 20px;
background:#f7f7f7;
}

/* news tabs upgrade */

.news-tabs{

display:flex;

justify-content:center;

gap:0;

margin-bottom:40px;

background:#eee;

border-radius:12px;

overflow:hidden;

}

/* タブ */

.tab{

flex:1;

padding:14px 0;

border:none;

background:transparent;

cursor:pointer;

font-size:14px;

position:relative;

transition:0.3s;

}
.tab::before{

content:"";

position:absolute;

bottom:0;

left:50%;

width:0;

height:3px;

background:#1e88e5;

transition:0.3s;

transform:translateX(-50%);

}

.tab:hover::before{

width:60%;

}

.tab.active::before{

width:80%;

background:white;

}
/* 区切り線 */

.tab:not(:last-child)::after{

content:"";

position:absolute;

right:0;

top:20%;

height:60%;

width:1px;

background:#ccc;

}

/* hover */

.tab:hover{

background:white;

transform:translateY(-3px);

box-shadow:0 5px 15px rgba(0,0,0,0.1);

}

/* active */

.tab.active{

background:#1e88e5;

color:white;

transform:translateY(-3px);

box-shadow:0 5px 15px rgba(0,0,0,0.2);

}

.news-list{
max-width:900px;
margin:auto;
}

.news-item{
display:flex;
align-items:center;
justify-content:space-between;
padding:20px 10px;
border-bottom:1px solid #ddd;
gap:20px;
}

.news-tag{
background:#1e88e5;
color:white;
padding:4px 10px;
border-radius:12px;
font-size:12px;
}

.news-text{
flex:1;
margin:0;
}

.news-date{
font-size:13px;
color:#777;
}
/* news more button */

.news-more{

text-align:center;

margin-top:30px;

}

.news-more-btn{

display:inline-block;

padding:12px 30px;

border:2px solid #1e88e5;

color:#1e88e5;

text-decoration:none;

border-radius:30px;

font-size:14px;

transition:0.3s;

}

/* hover */

.news-more-btn:hover{

background:#1e88e5;

color:white;

transform:translateY(-3px);

box-shadow:0 5px 15px rgba(0,0,0,0.15);

}
/* SNS section */

.sns-section{

padding:80px 20px;

background:#f7f7f7;

text-align:center;

}

.sns-sub{

font-size:12px;

color:#777;

margin-bottom:30px;

}

.sns-grid{

max-width:1100px;

margin:auto;

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

}

.sns-card{

display:flex;

align-items:center;

gap:20px;

background:white;

padding:20px;

border-radius:10px;

text-decoration:none;

color:#333;

box-shadow:0 5px 15px rgba(0,0,0,0.08);

transition:0.3s;

}

.sns-card:hover{

transform:translateY(-5px);

box-shadow:0 10px 25px rgba(0,0,0,0.15);

}

/* アイコン */

.sns-icon{

width:60px;

height:60px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

color:white;

}

/* ブランド色 */

.instagram{ background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af); }
.x{ background:#000; }
.youtube{ background:#ff0000; }
.line{ background:#00c300; }

.sns-text h3{
margin:0;
}

.sns-text p{
margin:5px 0 0;
font-size:13px;
color:#666;
}
/* CTA */

.cta-section{

padding:80px 20px;

background:#fff;

}

.cta-title{

text-align:center;

font-size:26px;

margin-bottom:40px;

color:#1e88e5;

}

.cta-container{

max-width:1100px;

margin:auto;

display:flex;

gap:40px;

align-items:center;

}

/* 画像 */

.cta-image img{

width:100%;

max-width:500px;

border-radius:10px;

}

/* テキスト */

.cta-content{

flex:1;

}

.cta-content h3{

margin-bottom:10px;

}

.cta-content p{

color:#555;

line-height:1.6;

margin-bottom:20px;

}

/* アイコン */

.cta-icons{

display:flex;

gap:20px;

margin-bottom:25px;

font-size:14px;

}

/* ボタン */

.cta-btn{

display:inline-block;

padding:14px 30px;

border:2px solid #1e88e5;

color:#1e88e5;

text-decoration:none;

border-radius:8px;

font-weight:600;

transition:0.3s;

}

.cta-btn:hover{

background:#1e88e5;

color:white;

transform:translateY(-3px);

box-shadow:0 8px 20px rgba(0,0,0,0.15);

}
/* related */

.related{

padding:40px 20px;

background:#fff;

}

.related-container{

max-width:1100px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:30px;

border-top:1px dashed #ccc;

padding-top:30px;

}

.related-item{

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

padding:15px;

text-decoration:none;

color:#333;

border-bottom:1px dashed #ccc;

transition:0.3s;

}

.related-item img{

width:120px;

height:70px;

object-fit:cover;

border-radius:6px;

}

.related-item span{

flex:1;

font-size:16px;

}

/* arrow */

.arrow{

font-size:22px;

color:#1e88e5;

transition:0.3s;

}

/* hover */

.related-item:hover{

background:#f5faff;

}

.related-item:hover .arrow{

transform:translateX(5px);

}
/* =========================
   TABLET（1024px以下）
========================= */

@media (max-width:1024px){

/* ヘッダー */
.main-nav{
padding:10px 20px;
}

.top-nav{
gap:20px;
}

/* ヒーロー */
.hero{
height:70vh;
}

/* 情報バー */
.info-inner{
flex-direction:column;
gap:20px;
align-items:flex-start;
}

/* ガイドカード */
.cards-container{
grid-template-columns:1fr;
}

/* 次回イベント */
.next-event-container{
flex-direction:column;
}

.next-event-image img{
width:100%;
height:220px;
}

/* イベントスライダー */
.event-card{
min-width:240px;
}

/* SNS */
.sns-grid{
grid-template-columns:1fr 1fr;
}

/* CTA */
.cta-container{
flex-direction:column;
}

/* 関連リンク */
.related-container{
grid-template-columns:1fr;
}

}


/* =========================
   MOBILE（768px以下）
========================= */

@media (max-width:768px){

/* ヘッダー */
.utility-nav{
display:none;
}

.top-nav{
display:none;
}

/* ヒーロー */
.hero{
height:60vh;
}

/* キャッチコピー */
.hero-copy{
font-size:16px;
}

/* 情報バー */
.info-left{
flex-direction:column;
gap:10px;
}

/* ボタン */
.info-buttons{
flex-direction:column;
width:100%;
}

.info-btn{
width:100%;
}

/* イベントカード */
.event-card{
min-width:200px;
}

/* SNS */
.sns-grid{
grid-template-columns:1fr;
}

/* CTA */
.cta-icons{
flex-direction:column;
gap:10px;
}

/* フッター */
.footer-legal-container{
flex-direction:column;
gap:20px;
}

}


/* =========================
   SMALL MOBILE（480px以下）
========================= */

@media (max-width:480px){

/* タイトル */
.section-title{
font-size:20px;
}

/* 次回イベント */
.next-event-info{
padding:20px;
}

/* ボタン */
.cta-btn,
.reserve-btn,
.detail-btn{
width:100%;
text-align:center;
}

/* スライダー矢印小さく */
.slider-btn{
width:40px;
height:40px;
font-size:20px;
}

}
/* hamburger */

.hamburger{

display:none;

flex-direction:column;

gap:5px;

cursor:pointer;

}

.hamburger span{

width:25px;
height:3px;

background:#333;

border-radius:2px;

}

/* mobile menu */

.mobile-menu{

position:fixed;

top:0;

right:-100%;

width:70%;

height:100%;

background:white;

box-shadow:-5px 0 15px rgba(0,0,0,0.2);

padding:60px 20px;

display:flex;

flex-direction:column;

gap:20px;

transition:0.3s;

z-index:1000;

}

.mobile-menu a{

text-decoration:none;

color:#333;

font-size:16px;

}

/* open */

.mobile-menu.open{

right:0;

}

/* 表示切り替え */

@media (max-width:768px){

.hamburger{
display:flex;
}

.top-nav{
display:none;
}

}
/* overlay */

.overlay{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.4);

opacity:0;

pointer-events:none;

transition:0.3s;

z-index:999;

}

/* 表示 */

.overlay.show{

opacity:1;

pointer-events:auto;

}
/* ハンバーガーアニメーション */

.hamburger span{

transition:0.3s;

}

/* 開いた状態 */

.hamburger.open span:nth-child(1){

transform:translateY(8px) rotate(45deg);

}

.hamburger.open span:nth-child(2){

opacity:0;

}

.hamburger.open span:nth-child(3){

transform:translateY(-8px) rotate(-45deg);

}

.hamburger{
  position:relative;
  z-index:10000;
}

.overlay{
  z-index:998;
}

.main-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
}

/* ハンバーガー位置固定 */
.hamburger{
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  z-index:10000;
}

@media (max-width:768px){

  .top-nav{
    display:none;
  }

  .hamburger{
    display:flex;
  }

}

.hamburger{
  display:flex !important;
  background:red;
}