@charset "utf-8";
/* =========================
   Top: Logo + PC Nav delayed reveal
   ========================= */

/* 初期状態（トップだけ） */
.home .logo,
.home .pc-nav li {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .7s ease, transform .7s ease;
  pointer-events: none;
}

/* 表示トリガー */
.home.is-header-ready .logo {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* メニューも表示 */
.home.is-header-ready .pc-nav li {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ロゴは少し先に出す */
.home.is-header-ready .logo {
  transition-delay: .2s;
  padding: 0 15px;
}

/* メニューを順番に出す */
.home.is-header-ready .pc-nav li:nth-child(1) { transition-delay: .4s; }
.home.is-header-ready .pc-nav li:nth-child(2) { transition-delay: .48s; }
.home.is-header-ready .pc-nav li:nth-child(3) { transition-delay: .56s; }
.home.is-header-ready .pc-nav li:nth-child(4) { transition-delay: .64s; }
.home.is-header-ready .pc-nav li:nth-child(5) { transition-delay: .72s; }
.home.is-header-ready .pc-nav li:nth-child(6) { transition-delay: .80s; }
.home.is-header-ready .pc-nav li:nth-child(7) { transition-delay: .88s; }
.home.is-header-ready .pc-nav li:nth-child(8) { transition-delay: .96s; }


/* ==========================================================================
   1. Text Styles
   ========================================================================== */
.concept-lead {
    font-size: 1.2rem;
    line-height: 2;
    font-weight: 700;
    margin-bottom: 41px;
    color: var(--text-color);
    background: linear-gradient(transparent 70%, #fff 70%); /* マーカー装飾 */
    display: inline;
}

/* ==========================================================================
   2. Main Visual (Hero)
   ========================================================================== */
.hero {
    height: 61vh;
}

.hero-text {}

/* ==========================================================================
   3. News Section
   ========================================================================== */
.news-list {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.2);
    border: 3px #000 solid;
}
.news-list li {padding: 6px 10px 19px;border-bottom: 2px dashed #eee;display: block;}
.news-list li:last-child { border-bottom: none; }
.news-list .date {
    background: var(--primary-color);
    color: var(--text-color);
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 800;
    min-width: 110px;
    text-align: center;
    margin-bottom: 8px;
    display: inline-block;
}
.news-list a { font-weight: 700; }

/* ==========================================================================
   4. Island Cards (3 ISLANDS)
   ========================================================================== */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; }
.island-card {
    background: #fff;
    padding: 16px;
    border-radius: 15px;
    border: 3px solid var(--primary-color);
    /* transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); */
    text-align: center;
    border: 3px solid #000;
}
.island-card img {border-radius: 10px;margin-bottom: 10px;}
.island-card h3 {font-size: 1.2rem;font-weight: 800;margin-bottom: 7px;color: var(--text-color);}
.island-card p { font-size: 0.95rem; line-height: 1.6; }
.island-card:hover { transform: translateY(-10px) rotate(2deg); background: var(--bg-light); }

/* ==========================================================================
   5. Tour & Room (反転レイアウト)
   ========================================================================== */
.flex-about {display: flex;align-items: center;gap: 60px;padding: 0;}
.flex-about.reverse { flex-direction: row-reverse; }
.about-img, .about-text { flex: 1; }
.about-img img {box-shadow: 15px 15px 0 var(--primary-color);border: 3px solid #000;border-radius: 10px;}

.simple-list { margin: 25px 0; padding: 0; }
.simple-list li {font-size: .9rem;margin-bottom: 0;font-weight: 700;color: #444;display: flex;align-items: center;}

.about-text p{
    font-size: 1em;
    text-align: left;
}
/* --- プロフィールセクション全体 --- */
#members .container {
    padding: 0 20px;
    max-width: 1240px; /* 4枚並びが綺麗に見える幅 */
    margin: 0 auto;
}


/* --- カード本体のデザイン --- */
.member-card {
    display: block;
    background: #fff;
    padding: 15px; /* 少し内側を絞ってスッキリ */
    border-radius: 30px;
    border: 4px solid #333; /* 黒線を少し細くして洗練させる */
    /* box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.05); */ /* 影を少し控えめに */
    text-align: center;
    transition: all 0.3s ease;
    text-decoration: none;
    color: #333;
    height: 100%;
}

.member-card:hover {
    transform: translateY(-8px);
    /* box-shadow: 15px 15px 0 rgb(255 255 255 / 20%); */ /* ホバー時の影にアクセントカラーを薄く */
}

/* --- 画像エリア --- */
.member-img-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    background: #eee;
    margin-bottom: 15px;
}

.member-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* --- 吹き出し（コメント） --- */
.member-comment {
    background: var(--primary-color);
    color: #000;
    padding: 10px 12px;
    border-radius: 12px;
    margin: -40px auto 15px; /* 写真への重なり */
    position: relative;
    z-index: 2;
    font-size: 0.8rem; /* 4枚並び用に少し小さく */
    font-weight: 800;
    line-height: 1.3;
    width: 95%;
    min-height: 3.8em; /* 高さを揃えてガタつきを防止 */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 吹き出しの三角 */
.member-comment::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-style: solid;
    border-width: 6px 6px 0 6px;
    border-color: var(--primary-color) transparent transparent transparent;
}

/* テキスト調整 */
.member-card h4 {
    font-size: 1.15rem;
    font-weight: 900;
    margin: 10px 0 5px;
}

.member-card .role {
    font-size: 0.7rem;
    color: #666;
    font-weight: 700;
    line-height: 1.4;
}



.event-card {
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    border: 4px solid #000;
    /* box-shadow: 10px 10px 0 var(--border-color); */
    position: relative;
}
.event-date { display: inline-block; background: var(--accent-color); color: #fff; padding: 5px 15px; border-radius: 10px; font-weight: 800; margin-bottom: 15px; }

/* ==========================================================================
   7. Movies (横並び対応)
   ========================================================================== */
.video-slider-container {overflow: hidden;padding: 0px 0;}
.video-grid { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; }
.video-box { flex: 1; /* 均等に広げる */ min-width: 400px; }
.video-box h4 { font-size: 1.1rem; font-weight: 800; margin-bottom: 15px; padding-left: 10px; border-left: 5px solid var(--primary-color); }
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    background: #000;
    overflow: hidden;
}
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* ==========================================================================
   8. Banners
   ========================================================================== */
.banner-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 30px;
    border-top: 2px dashed #Fff;
    padding-top: 40px;
    }
.banner {
    padding: 14px 45px;
    background: var(--primary-color);
    background: var(--accent-color);
    color: #fff;
    border-radius: 15px;
    font-weight: 900;
    min-width: 250px;
    text-align: center;
    box-shadow: 0 6px 0 #D35400;
    transition: 0.2s;
}
.banner:hover { transform: translateY(3px); box-shadow: 0 2px 0 #E6C200; }
/* SNSセクション（明るい背景用） */
.bg-light .sns-links {
    display: flex;
    justify-content: center;
    gap: 20px; /* 少し広げてゆとりを持たせる */
    margin-bottom: 40px;
    align-items: center;
}
.bunka-logo{
    max-width: 450px;
    margin: 0px auto 70px;
}
.bunka-logo img{
    border-radius: 0;
}

.bg-light .sns-icon {
    font-size: 1.5rem; /* サイズを少し大きく */
    color: #333 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SVG（Xアイコン）の初期色 */
.bg-light .sns-icon svg {
    fill: #333 !important;
    transition: fill 0.3s ease;
}

/* --- ホバー時の色変化 --- */

/* X: 黒 */
.bg-light .sns-icon.x:hover {
    transform: scale(1.2) rotate(-5deg);
    color: #000;
}
.bg-light  .sns-icon.x:hover svg { fill: #000; }

/* Instagram: グラデーションっぽく見せるピンク〜オレンジ */
.bg-light .sns-icon.insta:hover {
    transform: scale(1.2) rotate(5deg);
    color: #E1306C;
}

/* Facebook: ブルー */
.bg-light .sns-icon.fb:hover {
    transform: scale(1.2) rotate(-5deg);
    color: #1877F2;
}


/* ==========================================================================
   9. Responsive
   ========================================================================== */
   /* --- PCサイズ：4枚を等間隔に並べる --- */
@media (min-width: 1025px) {
    .member-grid-layout .swiper-wrapper {
        display: flex;
        justify-content: center;
        gap: 20px; /* カード間の隙間 */
        transform: none !important; /* Swiperの動きを無効化 */
    }
    .member-grid-layout .swiper-slide {
        width: calc(25% - 15px) !important; /* 4等分 */
        margin-right: 0 !important;
        padding: 30px 0;
    }
    .member-grid-layout .my-swiper-button-prev,
    .member-grid-layout .my-swiper-button-next,
    .member-grid-layout .swiper-pagination {
        display: none !important; /* 4枚固定なら矢印は不要 */
    }
}

/* --- スマホ・タブレット表示 --- */
@media (max-width: 1024px) {
    .member-slider {
        padding-bottom: 50px;
    }
    /* スライダーとして機能させる（Swiperのデフォルト） */
}
@media (max-width: 960px) {
    .flex-about, .flex-about.reverse {flex-direction: column-reverse;/* text-align: center; */gap: 40px;}
    .hero-text h2 { font-size: 2.2rem; }
    .video-box { flex: 0 0 100%; min-width: 100%; }
}
@media (max-width: 600px) {
    .grid-4 { grid-template-columns: 1fr 1fr; }
    .member-img { width: 160px; height: 160px; }
}


@media (min-width: 767px){
    /* ==========================================================================
   1. Text Styles
   ========================================================================== */
.concept-lead {
    font-size: 1.2rem;
    line-height: 2.2;
    color: var(--text-color);
     /* マーカー装飾 */
    height: auto;
}

/* ==========================================================================
   2. Main Visual (Hero)
   ========================================================================== */
.hero {
    height: 400px;
}

.hero-text {}
.hero-text h2 { font-size: 3.5rem; line-height: 1.4; margin-bottom: 20px; font-weight: 900; text-shadow: 2px 2px 0 rgba(0,0,0,0.3); }
.hero-text p { font-size: 1.3rem; letter-spacing: 0.1em; font-weight: 600; }

/* ==========================================================================
   3. News Section
   ========================================================================== */
.news-list {
    padding: 20px;
    border-radius: 30px;
}
.news-list li { padding: 20px; border-bottom: 2px dashed #eee; display: flex; gap: 20px; align-items: center; }
.news-list li:last-child { border-bottom: none; }
.news-list .date {
    padding: 4px 12px;
    font-size: 0.85rem;
}
.news-list a {}

/* ==========================================================================
   4. Island Cards (3 ISLANDS)
   ========================================================================== */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; }
.island-card {
    background: #fff;
    padding: 20px;
    border-radius: 30px;
    border: 3px solid var(--primary-color);
    /* transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); */
    text-align: center;
    border: 3px solid #000;
}
.island-card img { border-radius: 20px; margin-bottom: 20px; }
.island-card h3 { font-size: 1.4rem; font-weight: 800; margin-bottom: 10px; color: var(--text-color); }
.island-card p { font-size: 0.95rem; line-height: 1.6; }
.island-card:hover { transform: translateY(-10px) rotate(2deg); background: var(--bg-light); }

/* ==========================================================================
   5. Tour & Room (反転レイアウト)
   ========================================================================== */
.flex-about {gap: 60px;}
.flex-about.reverse { flex-direction: row-reverse; }
.about-img, .about-text {}
.about-img img {border-radius: 20px;}

.simple-list { margin: 25px 0; padding: 0; }
.simple-list li { font-size: 1rem; margin-bottom: 12px; font-weight: 700; color: #444; display: flex; align-items: center; }
.simple-list li::before {/* content: "★"; */color: var(--primary-color);margin-right: 10px;font-size: 1.2rem;}
.about-text p{
    font-size: 1.2em;
}
/* --- プロフィールセクション全体 --- */
#members .container {
    padding: 0 20px;
    max-width: 1240px; /* 4枚並びが綺麗に見える幅 */
    margin: 0 auto;
}


/* --- カード本体のデザイン --- */
.member-card {}

.member-card:hover {
    transform: translateY(-8px);
    /* box-shadow: 15px 15px 0 rgb(255 255 255 / 20%); */ /* ホバー時の影にアクセントカラーを薄く */
}

/* --- 画像エリア --- */
.member-img-wrapper {}

.member-img-wrapper img {}

/* --- 吹き出し（コメント） --- */
.member-comment {}

/* 吹き出しの三角 */
.member-comment::after {}

/* テキスト調整 */
.member-card h4 {}

.member-card .role {}



.event-card {

    padding: 40px;
    border-radius: 30px;

}
.event-date {}

/* ==========================================================================
   7. Movies (横並び対応)
   ========================================================================== */
.video-slider-container {padding: 40px 0;}
.video-grid {
    flex-wrap: initial;
}
.video-box { /* 均等に広げる */}
.video-box h4 {  }
.video-wrapper {
}
.video-wrapper iframe {}

/* ==========================================================================
   8. Banners
   ========================================================================== */
.banner-grid {}
.banner {
    padding: 20px 45px;
    border-radius: 50px;
}
.banner:hover { }
/* SNSセクション（明るい背景用） */
.bg-light .sns-links {
    gap: 50px; /* 少し広げてゆとりを持たせる */
}

.bg-light .sns-icon {
     /* サイズを少し大きく */
     font-size: 2.2rem;
}

/* SVG（Xアイコン）の初期色 */
.bg-light .sns-icon svg {
}

/* --- ホバー時の色変化 --- */

/* X: 黒 */
.bg-light .sns-icon.x:hover {
    transform: scale(1.2) rotate(-5deg);
    color: #000;
}
.bg-light  .sns-icon.x:hover svg { fill: #000; }

/* Instagram: グラデーションっぽく見せるピンク〜オレンジ */
.bg-light .sns-icon.insta:hover {
    transform: scale(1.2) rotate(5deg);
    color: #E1306C;
}

/* Facebook: ブルー */
.bg-light .sns-icon.fb:hover {
    transform: scale(1.2) rotate(-5deg);
    color: #1877F2;
}

}

@media (min-width: 991px){
    /* ==========================================================================
   1. Text Styles
   ========================================================================== */
.concept-lead {
    
     /* マーカー装飾 */
}

/* ==========================================================================
   2. Main Visual (Hero)
   ========================================================================== */
.hero {height: 470px;}


/* ==========================================================================
   3. News Section
   ========================================================================== */
.news-list {}
.news-list li {  }
.news-list li:last-child { border-bottom: none; }
.news-list .date {
}
.news-list a {}

/* ==========================================================================
   4. Island Cards (3 ISLANDS)
   ========================================================================== */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; }
.island-card {
    background: #fff;
    padding: 20px;
    border-radius: 30px;
    border: 3px solid var(--primary-color);
    /* transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); */
    text-align: center;
    border: 3px solid #000;
}
.island-card img { border-radius: 20px; margin-bottom: 20px; }
.island-card h3 { font-size: 1.4rem; font-weight: 800; margin-bottom: 10px; color: var(--text-color); }
.island-card p { font-size: 0.95rem; line-height: 1.6; }
.island-card:hover { transform: translateY(-10px) rotate(2deg); background: var(--bg-light); }

/* ==========================================================================
   5. Tour & Room (反転レイアウト)
   ========================================================================== */
.flex-about {padding: 0 4%;}
.flex-about.reverse { flex-direction: row-reverse; }
.about-img, .about-text {}
.about-img img {}

.simple-list { margin: 25px 0; padding: 0; }
.simple-list li { font-size: 1rem; margin-bottom: 12px; font-weight: 700; color: #444; display: flex; align-items: center; }
.simple-list li::before {/* content: "★"; */color: var(--primary-color);margin-right: 10px;font-size: 1.2rem;}
.about-text p{
}
/* --- プロフィールセクション全体 --- */
#members .container {
    padding: 0 20px;
    max-width: 1240px; /* 4枚並びが綺麗に見える幅 */
    margin: 0 auto;
}


/* --- カード本体のデザイン --- */
.member-card {}

.member-card:hover {
    transform: translateY(-8px);
    /* box-shadow: 15px 15px 0 rgb(255 255 255 / 20%); */ /* ホバー時の影にアクセントカラーを薄く */
}

/* --- 画像エリア --- */
.member-img-wrapper {}

.member-img-wrapper img {}

/* --- 吹き出し（コメント） --- */
.member-comment {}

/* 吹き出しの三角 */
.member-comment::after {}

/* テキスト調整 */
.member-card h4 {}

.member-card .role {}



.event-card {}
.event-date { }

/* ==========================================================================
   7. Movies (横並び対応)
   ========================================================================== */
.video-slider-container {}
.video-grid {}
.video-box { /* 均等に広げる */}
.video-box h4 {  }
.video-wrapper {
}
.video-wrapper iframe {}

/* ==========================================================================
   8. Banners
   ========================================================================== */
.banner-grid {    }
.banner {}
.banner:hover { }
/* SNSセクション（明るい背景用） */
.bg-light .sns-links {
    
    
     /* 少し広げてゆとりを持たせる */
}

.bg-light .sns-icon {
     /* サイズを少し大きく */
}

/* SVG（Xアイコン）の初期色 */
.bg-light .sns-icon svg {
}

/* --- ホバー時の色変化 --- */

/* X: 黒 */
.bg-light .sns-icon.x:hover {
    transform: scale(1.2) rotate(-5deg);
    color: #000;
}
.bg-light  .sns-icon.x:hover svg { fill: #000; }

/* Instagram: グラデーションっぽく見せるピンク〜オレンジ */
.bg-light .sns-icon.insta:hover {
    transform: scale(1.2) rotate(5deg);
    color: #E1306C;
}

/* Facebook: ブルー */
.bg-light .sns-icon.fb:hover {
    transform: scale(1.2) rotate(-5deg);
    color: #1877F2;
}

}

@media (min-width: 1200px){
    /* ==========================================================================
   1. Text Styles
   ========================================================================== */
.concept-lead {
     /* マーカー装飾 */
}

/* ==========================================================================
   2. Main Visual (Hero)
   ========================================================================== */
.hero {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}


/* ==========================================================================
   3. News Section
   ========================================================================== */
.news-list {}
.news-list li { }
.news-list li:last-child { border-bottom: none; }
.news-list .date {
}
.news-list a {}

/* ==========================================================================
   4. Island Cards (3 ISLANDS)
   ========================================================================== */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; }
.island-card {
    background: #fff;
    padding: 20px;
    border-radius: 30px;
    border: 3px solid var(--primary-color);
    /* transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); */
    text-align: center;
    border: 3px solid #000;
}
.island-card img { border-radius: 20px; margin-bottom: 20px; }
.island-card h3 { font-size: 1.4rem; font-weight: 800; margin-bottom: 10px; color: var(--text-color); }
.island-card p { font-size: 0.95rem; line-height: 1.6; }
.island-card:hover { transform: translateY(-10px) rotate(2deg); background: var(--bg-light); }

/* ==========================================================================
   5. Tour & Room (反転レイアウト)
   ========================================================================== */
.flex-about { }
.flex-about.reverse { flex-direction: row-reverse; }
.about-img, .about-text {}
.about-img img {}

.simple-list { margin: 25px 0; padding: 0; }
.simple-list li {font-size: 1rem;margin-bottom: 0px;font-weight: 700;color: #444;display: flex;align-items: center;}
.simple-list li::before {/* content: "★"; */color: var(--primary-color);margin-right: 10px;font-size: 1.2rem;}
.about-text p{
}
/* --- プロフィールセクション全体 --- */
#members .container {
    padding: 0 20px;
    max-width: 1240px; /* 4枚並びが綺麗に見える幅 */
    margin: 0 auto;
}


/* --- カード本体のデザイン --- */
.member-card {}

.member-card:hover {}

/* --- 画像エリア --- */
.member-img-wrapper {}

.member-img-wrapper img {}

/* --- 吹き出し（コメント） --- */
.member-comment {}

/* 吹き出しの三角 */
.member-comment::after {}

/* テキスト調整 */
.member-card h4 {}

.member-card .role {}



.event-card {}
.event-date {  }

/* ==========================================================================
   7. Movies (横並び対応)
   ========================================================================== */
.video-slider-container {}
.video-grid {}
.video-box { /* 均等に広げる */}
.video-box h4 {}
.video-wrapper {
}
.video-wrapper iframe { }

/* ==========================================================================
   8. Banners
   ========================================================================== */
.banner-grid { }
.banner {}
.banner:hover {}
/* SNSセクション（明るい背景用） */
.bg-light .sns-links {
    
    
     /* 少し広げてゆとりを持たせる */
}

.bg-light .sns-icon {
     /* サイズを少し大きく */
}

/* SVG（Xアイコン）の初期色 */
.bg-light .sns-icon svg {
}

/* --- ホバー時の色変化 --- */

/* X: 黒 */
.bg-light .sns-icon.x:hover {
    transform: scale(1.2) rotate(-5deg);
    color: #000;
}
.bg-light  .sns-icon.x:hover svg { fill: #000; }

/* Instagram: グラデーションっぽく見せるピンク〜オレンジ */
.bg-light .sns-icon.insta:hover {
    transform: scale(1.2) rotate(5deg);
    color: #E1306C;
}

/* Facebook: ブルー */
.bg-light .sns-icon.fb:hover {
    transform: scale(1.2) rotate(-5deg);
    color: #1877F2;
}

}