/* 基本設定 */



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



html { scroll-behavior: smooth; }



body { font-family: 'Noto Sans JP', sans-serif; color: #333; line-height: 1.6; overflow-x: hidden; background-color: #fff; }







/* ヘッダー */



header {



    position: fixed; top: 0; left: 0; width: 100%; z-index: 9999;



    padding-top: 10px; padding-bottom: 10px;



    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(0, 0, 0, 0) 100%);



    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);



}



nav { display: flex; justify-content: space-between; align-items: center; max-width: 1600px; margin: 0 auto; padding: 0 60px; }



.logo img { height: 55px; width: auto; display: block; transition: 0.3s; }



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



.nav-links { display: flex; list-style: none; }



.nav-links li { margin: 0 18px; }



.nav-links li a { text-decoration: none; color: #000; font-weight: 900; font-size: 16px; letter-spacing: 1.5px; position: relative; padding-bottom: 8px; transition: 0.3s; }



.nav-links li a:hover { color: #cf0b39; }



.sns-icons { display: flex; gap: 22px; }



.sns-icons a { color: #333; font-size: 26px; transition: 0.3s; }



.sns-icons a:hover { color: #cf0b39; transform: translateY(-5px); }







/* セクション */



.container { padding: 140px 50px; max-width: 1200px; margin: 0 auto; }



.full-width { max-width: none; background: #f9f9f9; }



.hero { width: 100%; height: 100vh; background-image: url('kv.jpg'); background-size: cover; background-position: center; background-color: #f0f0f0; }



.section-title { font-family: 'Montserrat', sans-serif; font-size: 42px; margin-bottom: 50px; text-align: center; letter-spacing: 8px; }







/* 中央揃え */



.center-text{text-align: center;}







/* NEWS (ポップアップ設定) */



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



.news-list li {



    padding: 25px 0;



    border-bottom: 1px solid #ddd;



    display: flex;



    align-items: center;



    transition: transform 0.3s ease, box-shadow 0.3s ease; /* アニメーション追加 */



}



.news-list li:hover {



    transform: translateY(-5px); /* 上に浮かせる */



    background-color: #fff; /* 背景を白くして浮いた感を作る */



    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* 影をつける */



    padding-left: 15px; /* 少し左に余白を開けて動いた感を作る */



    padding-right: 15px;



}



.news-list .date { font-weight: bold; margin-right: 30px; color: #888; min-width: 150px; }



.news-list a { text-decoration: none; color: #333; font-size: 18px; transition: 0.3s; flex: 1; }







/* MEMBER (切り替え・ポップアップ設定) */



.member-section { background-color: #fff; padding: 100px 0; position: relative; overflow: hidden; }



input[name="member-selector"] { display: none; }



.member-tab-nav { display: flex; justify-content: center; gap: 15px; margin-bottom: 40px; z-index: 50; position: relative; }



.member-tab-nav label {



    padding: 12px 25px;



    border: 1px solid #ddd;



    border-radius: 50px;



    cursor: pointer;



    font-family: 'Montserrat', sans-serif;



    font-weight: 900;



    color: #999;



    transition: 0.3s ease; /* アニメーション追加 */



}



/* セレクターホバー時にポップ */



.member-tab-nav label:hover {



    transform: translateY(-3px);



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



    color: #333;



}



/* --- 個別カラー設定（ボタン・キャッチ・ボーダー） --- */







/* MEMBER 1: Blue (#2a9eff) */



#member1:checked ~ .member-tab-nav label[for="member1"] { background: #2a9eff; color: #fff; border-color: #2a9eff; transform: scale(1.1); }



#member1:checked ~ .member-container .m1-content .m-catch { color: #2a9eff; }



#member1:checked ~ .member-container .m1-content .m-spec { border-left-color: #2a9eff; }







/* MEMBER 2: Purple (#7636ff) */



#member2:checked ~ .member-tab-nav label[for="member2"] { background: #7636ff; color: #fff; border-color: #7636ff; transform: scale(1.1); }



#member2:checked ~ .member-container .m2-content .m-catch { color: #7636ff; }



#member2:checked ~ .member-container .m2-content .m-spec { border-left-color: #7636ff; }







/* MEMBER 3: Pink (#f5c2ce) */



#member3:checked ~ .member-tab-nav label[for="member3"] { background: #f5c2ce; color: #fff; border-color: #f5c2ce; transform: scale(1.1); }



#member3:checked ~ .member-container .m3-content .m-catch { color: #f5c2ce; }



#member3:checked ~ .member-container .m3-content .m-spec { border-left-color: #f5c2ce; }







/* MEMBER 4: Orange (#e3802d) */



#member4:checked ~ .member-tab-nav label[for="member4"] { background: #e3802d; color: #fff; border-color: #e3802d; transform: scale(1.1); }



#member4:checked ~ .member-container .m4-content .m-catch { color: #e3802d; }



#member4:checked ~ .member-container .m4-content .m-spec { border-left-color: #e3802d; }











/* --- レイアウト構造（変更なし・念のため統合） --- */



.member-container { position: relative; width: 100%; min-height: 80vh; }



.member-card-full { display: none; width: 100%; min-height: 80vh; align-items: center; opacity: 0; }







#member1:checked ~ .member-container .m1-content,



#member2:checked ~ .member-container .m2-content,



#member3:checked ~ .member-container .m3-content,



#member4:checked ~ .member-container .m4-content {



    display: flex;



    animation: memberFade 0.7s ease forwards;



}







@keyframes memberFade { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }







.member-image-box { flex: 1; display: flex; justify-content: flex-end; align-items: flex-end; padding-right: 40px; }



.member-image-box img { max-height: 75vh; width: auto; }



.member-info-box { flex: 1; padding: 50px 100px 50px 40px; }



.m-name { font-size: 52px; font-weight: 900; color: #000; margin-bottom: 10px; }







/* デフォルトの色指定（!importantは不要ですが、確実に上書きするために個別指定を優先） */



.m-catch { font-size: 22px; font-weight: 700; margin-bottom: 35px; }



.m-spec { border-left: 4px solid #ccc; padding-left: 20px; margin-bottom: 30px; }







.m-spec dl { display: grid; grid-template-columns: 100px 1fr; gap: 10px; font-size: 18px; }



.m-text { font-size: 17px; line-height: 2; color: #555; white-space: pre-wrap; }







/* MEDIAスライダー */

.media-section { padding: 100px 0; overflow: hidden; background: #f9f9f9; }

.media-track { display: flex; width: max-content; animation: rotateSushi 120s linear infinite; }

.media-track:hover { animation-play-state: paused; }



.video-card {

    width: 500px;

    margin: 0 20px;

    background: #000;

    border-radius: 15px;

    overflow: hidden;

    aspect-ratio: 16 / 9;

    cursor: pointer;

    transition: transform 0.3s ease;

}



.video-card:hover {

    transform: scale(1.05); /* 指示通り軽くポップさせる */

}



.video-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



@keyframes rotateSushi { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-540px * 5)); } }



/* モーダル機能のスタイル */

.modal-overlay {

    display: none; /* 通常は非表示 */

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.9); /* 周囲を暗くする */

    z-index: 10000;

    justify-content: center;

    align-items: center;

    opacity: 0;

    transition: opacity 0.3s ease;

}



.modal-overlay.is-active {

    display: flex;

    opacity: 1;

}



.modal-content {

    position: relative;

    width: 90%;

    max-width: 1280px; /* 720p相当の最大幅 */

    background: #000;

}



.video-container {

    position: relative;

    width: 100%;

    padding-top: 56.25%; /* 16:9の比率を維持 */

}



.video-container iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}



.modal-close {

    position: absolute;

    top: -40px;

    right: 0;

    color: #fff;

    font-size: 20px;

    font-weight: bold;

    cursor: pointer;

    font-family: 'Montserrat', sans-serif;

}







/* サブページ共通 */



.sub-page { background-color: #fcfcfc; }



.news-detail-container, .text-page-container { max-width: 900px; margin: 0 auto; padding: 160px 20px 100px; min-height: 60vh; }



.news-article, .text-content, .faq-item { background: #fff; padding: 60px 40px; border: 1px solid #eee; }



.news-title, .page-title { font-size: 28px; font-weight: 900; margin-bottom: 40px; border-bottom: 2px solid #eee; padding-bottom: 20px; }



.back-btn { display: block; width: fit-content; margin: 60px auto 0; padding: 15px 50px; background: #333; color: #fff; text-decoration: none; border-radius: 50px; font-weight: bold; transition: 0.3s; }



.back-btn:hover { background: #cf0b39; transform: scale(1.05); }







/* グレー・小型フッターポップ */



.footer-alert-area { padding: 60px 20px 20px; display: flex; justify-content: center; background-color: #fff; }



.caution-popup {



    text-decoration: none; color: #ffffff; display: block; width: 100%; max-width: 500px;



    background-color: #ff003c; padding: 6px; border: 1px solid #ddd; transition: 0.2s;



}



.caution-popup:hover { transform: scale(1.02); }



.caution-inner { border: 2px solid #ffffff; padding: 15px 20px; text-align: center; }



.caution-inner i { font-size: 42px; margin-bottom: 5px; color: #ffffff; }



.caution-title { font-size: 24px; font-weight: 900; letter-spacing: 2px; }







footer { text-align: center; padding: 40px 0 80px; background-color: #fff; }



footer p { font-size: 14px; font-weight: 700; color: #333; }



.powered-by { margin-top: 5px; font-size: 12px; color: #666; }







@media (max-width: 1100px) {



    .member-card-full { flex-direction: column; text-align: center; }



    .member-image-box img { max-height: 40vh; }



    .caution-title { font-size: 18px; }



    @keyframes rotateSushi { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-360px * 5)); } }



}



/* --- 以前の基本設定などはそのまま --- */



/* MEDIAスライダー */

.media-section { padding: 100px 0; overflow: hidden; background: #f9f9f9; }

.media-track { display: flex; width: max-content; animation: rotateSushi 120s linear infinite; }

.media-track:hover { animation-play-state: paused; }



.video-card {

    width: 500px;

    margin: 0 20px;

    background: #000;

    border-radius: 15px;

    overflow: hidden;

    aspect-ratio: 16 / 9;

    display: flex; /* 追加：中央配置用 */

    justify-content: center;

    align-items: center;

    transition: transform 0.3s ease;

}



/* Coming Soon 表示用のスタイル */

.coming-soon-box {

    text-align: center;

    color: #fff;

    font-family: 'Montserrat', sans-serif;

    font-weight: 700;

    font-size: 24px;

    letter-spacing: 2px;

}



.video-card:hover {

    transform: scale(1.05);

}



@keyframes rotateSushi { 0% { transform: translateX(0); } 100% { transform: translateX(-2700px); } }



/* モーダル機能のスタイル（維持） */

.modal-overlay {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.9);

    z-index: 10000;

    justify-content: center;

    align-items: center;

    opacity: 0;

    transition: opacity 0.3s ease;

}



.modal-overlay.is-active {

    display: flex;

    opacity: 1;

}



.modal-content {

    position: relative;

    width: 90%;

    max-width: 1280px;

    background: #000;

}



.video-container {

    position: relative;

    width: 100%;

    padding-top: 56.25%;

}



.video-container iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}



.modal-close {

    position: absolute;

    top: -40px;

    right: 0;

    color: #fff;

    font-size: 20px;

    font-weight: bold;

    cursor: pointer;

    font-family: 'Montserrat', sans-serif;

}

/* 基本設定 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Noto Sans JP', sans-serif; color: #333; line-height: 1.6; overflow-x: hidden; background-color: #fff; }

/* ヘッダー */
header {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 9999;
    padding-top: 10px; padding-bottom: 10px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(0, 0, 0, 0) 100%);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
nav { display: flex; justify-content: space-between; align-items: center; max-width: 1600px; margin: 0 auto; padding: 0 60px; }
.logo img { height: 55px; width: auto; display: block; transition: 0.3s; }
.logo img:hover { transform: scale(1.05); }
.nav-links { display: flex; list-style: none; }
.nav-links li { margin: 0 18px; }
.nav-links li a { text-decoration: none; color: #000; font-weight: 900; font-size: 16px; letter-spacing: 1.5px; position: relative; padding-bottom: 8px; transition: 0.3s; }
.nav-links li a:hover { color: #cf0b39; }
.sns-icons { display: flex; gap: 22px; }
.sns-icons a { color: #333; font-size: 26px; transition: 0.3s; }
.sns-icons a:hover { color: #cf0b39; transform: translateY(-5px); }

/* セクション */
.container { padding: 140px 50px; max-width: 1200px; margin: 0 auto; }
.full-width { max-width: none; background: #f9f9f9; }

/* HERO (PCでは完璧な設定を維持) */
.hero { 
    width: 100%; 
    height: 100vh; 
    background-image: url('kv.jpg'); 
    background-size: cover; /* PCでは画面いっぱいにカバー */
    background-position: center; 
    background-color: #f0f0f0; 
    background-repeat: no-repeat;
}

.section-title { font-family: 'Montserrat', sans-serif; font-size: 42px; margin-bottom: 50px; text-align: center; letter-spacing: 8px; }
.center-text{text-align: center;}

/* NEWS */
.news-list { list-style: none; max-width: 900px; margin: 0 auto; }
.news-list li { padding: 25px 0; border-bottom: 1px solid #ddd; display: flex; align-items: center; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.news-list li:hover { transform: translateY(-5px); background-color: #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.1); padding-left: 15px; padding-right: 15px; }
.news-list .date { font-weight: bold; margin-right: 30px; color: #888; min-width: 150px; }
.news-list a { text-decoration: none; color: #333; font-size: 18px; transition: 0.3s; flex: 1; }

/* MEMBER */
.member-section { background-color: #fff; padding: 100px 0; position: relative; overflow: hidden; }
input[name="member-selector"] { display: none; }
.member-tab-nav { display: flex; justify-content: center; gap: 15px; margin-bottom: 40px; z-index: 50; position: relative; }
.member-tab-nav label { padding: 12px 25px; border: 1px solid #ddd; border-radius: 50px; cursor: pointer; font-family: 'Montserrat', sans-serif; font-weight: 900; color: #999; transition: 0.3s ease; }
.member-tab-nav label:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); color: #333; }

#member1:checked ~ .member-tab-nav label[for="member1"] { background: #2a9eff; color: #fff; border-color: #2a9eff; transform: scale(1.1); }
#member1:checked ~ .member-container .m1-content .m-catch { color: #2a9eff; }
#member1:checked ~ .member-container .m1-content .m-spec { border-left-color: #2a9eff; }
#member2:checked ~ .member-tab-nav label[for="member2"] { background: #7636ff; color: #fff; border-color: #7636ff; transform: scale(1.1); }
#member2:checked ~ .member-container .m2-content .m-catch { color: #7636ff; }
#member2:checked ~ .member-container .m2-content .m-spec { border-left-color: #7636ff; }
#member3:checked ~ .member-tab-nav label[for="member3"] { background: #f5c2ce; color: #fff; border-color: #f5c2ce; transform: scale(1.1); }
#member3:checked ~ .member-container .m3-content .m-catch { color: #f5c2ce; }
#member3:checked ~ .member-container .m3-content .m-spec { border-left-color: #f5c2ce; }
#member4:checked ~ .member-tab-nav label[for="member4"] { background: #e3802d; color: #fff; border-color: #e3802d; transform: scale(1.1); }
#member4:checked ~ .member-container .m4-content .m-catch { color: #e3802d; }
#member4:checked ~ .member-container .m4-content .m-spec { border-left-color: #e3802d; }

.member-container { position: relative; width: 100%; min-height: 80vh; }
.member-card-full { display: none; width: 100%; min-height: 80vh; align-items: center; opacity: 0; }
#member1:checked ~ .member-container .m1-content, #member2:checked ~ .member-container .m2-content, #member3:checked ~ .member-container .m3-content, #member4:checked ~ .member-container .m4-content { display: flex; animation: memberFade 0.7s ease forwards; }
@keyframes memberFade { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.member-image-box { flex: 1; display: flex; justify-content: flex-end; align-items: flex-end; padding-right: 40px; }
.member-image-box img { max-height: 75vh; width: auto; }
.member-info-box { flex: 1; padding: 50px 100px 50px 40px; }
.m-name { font-size: 52px; font-weight: 900; color: #000; margin-bottom: 10px; }
.m-catch { font-size: 22px; font-weight: 700; margin-bottom: 35px; }
.m-spec { border-left: 4px solid #ccc; padding-left: 20px; margin-bottom: 30px; }
.m-spec dl { display: grid; grid-template-columns: 100px 1fr; gap: 10px; font-size: 18px; }
.m-text { font-size: 17px; line-height: 2; color: #555; white-space: pre-wrap; }

/* MEDIA */
.media-section { padding: 100px 0; overflow: hidden; background: #f9f9f9; }
.media-track { display: flex; width: max-content; animation: rotateSushi 120s linear infinite; }
.media-track:hover { animation-play-state: paused; }
.video-card { width: 500px; margin: 0 20px; background: #000; border-radius: 15px; overflow: hidden; aspect-ratio: 16 / 9; display: flex; justify-content: center; align-items: center; transition: transform 0.3s ease; }
.coming-soon-box { text-align: center; color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 24px; letter-spacing: 2px; }
.video-card:hover { transform: scale(1.05); }
@keyframes rotateSushi { 0% { transform: translateX(0); } 100% { transform: translateX(-2700px); } }

/* モーダル */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); z-index: 10000; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; }
.modal-overlay.is-active { display: flex; opacity: 1; }
.modal-content { position: relative; width: 90%; max-width: 1280px; background: #000; }
.video-container { position: relative; width: 100%; padding-top: 56.25%; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.modal-close { position: absolute; top: -40px; right: 0; color: #fff; font-size: 20px; font-weight: bold; cursor: pointer; font-family: 'Montserrat', sans-serif; }

/* フッター */
.footer-alert-area { padding: 60px 20px 20px; display: flex; justify-content: center; background-color: #fff; }
.caution-popup { text-decoration: none; color: #ffffff; display: block; width: 100%; max-width: 500px; background-color: #ff003c; padding: 6px; border: 1px solid #ddd; transition: 0.2s; }
.caution-popup:hover { transform: scale(1.02); }
.caution-inner { border: 2px solid #ffffff; padding: 15px 20px; text-align: center; }
.caution-inner i { font-size: 42px; margin-bottom: 5px; color: #ffffff; }
.caution-title { font-size: 24px; font-weight: 900; letter-spacing: 2px; }
footer { text-align: center; padding: 40px 0 80px; background-color: #fff; }
footer p { font-size: 14px; font-weight: 700; color: #333; }
.powered-by { margin-top: 5px; font-size: 12px; color: #666; }

/* =================================================
   スマートフォン対応
   ================================================= */
@media (max-width: 768px) {
    /* HEROkvの画像調整 (ここを修正) */
    .hero { 
        height: auto; /* 高さを自動に */
        aspect-ratio: 3 / 2; /* 例：画像の比率が3:2の場合。実際のkv.jpgの比率に合わせると完璧です */
        background-size: contain; /* 横幅を画面に合わせ、全体を表示 */
        background-position: top center; /* 画像の上部を基準に配置 */
    }

    /* ナビゲーションを横並び維持しつつ調整 */
    nav { padding: 0 15px; }
    .nav-links { display: none; } 
    
    .container { padding: 80px 20px; }
    .section-title { font-size: 28px; margin-bottom: 30px; }

    /* NEWS */
    .news-list .date { min-width: 100px; font-size: 14px; margin-right: 15px; }
    .news-list a { font-size: 15px; }

    /* MEMBER */
    .member-tab-nav { flex-wrap: wrap; gap: 8px; }
    .member-tab-nav label { padding: 8px 15px; font-size: 12px; }
    .member-card-full { flex-direction: column; text-align: center; height: auto; padding-top: 20px; opacity: 1; display: none; }
    #member1:checked ~ .member-container .m1-content, #member2:checked ~ .member-container .m2-content, #member3:checked ~ .member-container .m3-content, #member4:checked ~ .member-container .m4-content { display: flex; animation: none; }

    .member-image-box { padding-right: 0; justify-content: center; margin-bottom: 20px; }
    .member-image-box img { max-height: 40vh; }
    .member-info-box { padding: 20px; flex: none; width: 100%; }
    .m-name { font-size: 32px; }
    .m-catch { font-size: 16px; margin-bottom: 20px; }
    .m-spec dl { grid-template-columns: 80px 1fr; font-size: 14px; text-align: left; }
    .m-text { font-size: 14px; text-align: left; }

    /* MEDIA */
    .video-card { width: 80vw; margin: 0 10px; }
    .coming-soon-box { font-size: 18px; }
    @keyframes rotateSushi { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-85vw * 7)); } } /* 7枚分 */

    /* フッター */
    .caution-title { font-size: 18px; }
}

/* --- 以降、サブページやフッターの設定などもそのまま --- */