/* ----------------------
　　　　　基本設定
----------------------- */
:root {
    --streamer-color: #D5A710;
    --designer-color: #5f67af;
    --bg-light: #fcfaf5;
}

/* ----------------------
　　トップへ戻るボタン
----------------------- */
.back-to-top {
    position: fixed;
    right: 40px;
    bottom: 110px;
    width: 60px;
    height: 60px;
    background-color: #5e699b;; /* デザイナーカラー（赤系など）を使用 */
    color: #fff;
    border-radius: 50%; /* 円形にする */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 1000; /* 他の要素より上に表示 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease, opacity 0.3s, visibility 0.3s;
}

/* ホバー時の演出：少し上に浮いて色を濃く */
.back-to-top:hover {
    transform: translateY(-5px);
    opacity: 1;
    filter: brightness(0.85); /* 色を濃くする */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
}

/* 上矢印（CSSで描画） */
.back-to-top .arrow {
    display: block;
    width: 12px;
    height: 12px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(-45deg); /* 45度回転させて上に向けた「L字」にする */
    margin-top: 5px; /* 位置の微調整 */
}

/* ----------------------
　　　　　基本設定
----------------------- */
body {
    font-family: 'Shippori Mincho', serif; /* 和風フォントを適用 */
    margin: 0;
    line-height: 1.8;
    background-color: #404963; /* 少し和紙っぽい温かみのある白に */
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* フッターを常に下に配置するため */
}

/* 全ての画像に対して選択や長押しメニューを制限 */
img {
    user-select: none; /* テキスト選択を無効化 */
    -webkit-user-drag: none; /* ドラッグを禁止 */
    -webkit-touch-callout: none; /* iOSでの長押しメニュー禁止 */
}

.h1-streamer{
    font-weight: 700;
    letter-spacing: 0.1em;
    border-bottom: 1px solid #d4c4a8;
}

.h1-designer{
    font-weight: 700;
    letter-spacing: 0.1em;
    border-bottom: 1px solid #a8b4d4;
}
/* ----------------------
　　　　　ヘッダー
----------------------- */
.main-header {
    position: sticky;
    top: 0;
    width: 100%;
    height: 60px; /* 高さを60pxに固定してスリムに */
    background-color: #333;
    backdrop-filter: blur(5px);
    z-index: 2000;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center; /* 縦方向の中央揃え */
}

.header-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ヘッダーの中にある h1 だけ、下線を消す設定 */
.main-header .header-logo {
    border-bottom: none;   /* 下線を消す */
    letter-spacing: normal; /* 必要に応じて字間をリセット */
    margin: 0;             /* 余計な隙間があればリセット */
    padding: 0;
}

.header-logo a {
    text-decoration: none;
    color: #c9c9c9;
    white-space: nowrap;
    border: none;
}

/* ナビゲーションを横に並べる */
.header-nav-group {
    display: flex;
    align-items: center;
}

.nav-section {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* 縦並びを防ぐ最重要設定 */
.nav-links {
    display: flex; /* リストを横並びにする */
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 15px;
}

.nav-links li a {
    text-decoration: none;
    font-size: 0.9rem;
    color: #b6b6b6;
    white-space: nowrap; /* 改行させない */
    transition: color 0.2s;
}

/* カテゴリラベル（STREAMER/DESIGNER）の装飾 */
.category-link {
    font-size: 0.75rem;
    font-weight: 900;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    margin-right: 5px;
}

.category-link-current {
    font-size: 0.75rem;
    font-weight: 900;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    margin-right: 5px;
}

.category-link.streamer { color: #D5A710; border: 1px solid #D5A710; transition: all 0.3s ease; }
.category-link.designer { color: #5f67af; border: 1px solid #5f67af; transition: all 0.3s ease; }

.category-link-current.designer {
    color: #7f88db;
    border: 1px solid #7f88db;
    transition: all 0.3s ease;
    text-shadow: 
        0 0 5px var(--designer-color),
        0 0 10px var(--designer-color);
    border-color: var(--designer-color);
    box-shadow: 
        0 0 5px var(--designer-color),
        0 0 15px rgba(95, 103, 175, 0.5),
        inset 0 0 5px var(--designer-color);
    background-color: transparent; /* 背景は塗らない */
    font-weight: 900;
}

.category-link-current.streamer {
    color: #D5A710;
    border: 1px solid #D5A710;
    transition: all 0.3s ease;
    text-shadow: 
        0 0 5px var(--streamer-color),
        0 0 10px var(--streamer-color);
    border-color: var(--streamer-color);
    box-shadow: 
        0 0 5px var(--streamer-color),
        0 0 15px rgba(175, 170, 95, 0.5),
        inset 0 0 5px var(--streamer-color);
    background-color: transparent; /* 背景は塗らない */
    font-weight: 900;
}

/* 境界線 */
.nav-divider {
    width: 1px;
    height: 20px;
    background: #ddd;
    margin: 0 20px;
}

/* ロゴ画像のサイズ調整 */
.logo-img {
    height: 60px; /* ヘッダーの高さ(60px)に合わせて調整 */
    width: auto;
    display: block;
}

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

/* --- 現在のページ（current）の強調設定 --- */
.nav-links li a {
    position: relative; /* 下線を表示する基準にします */
    text-decoration: none;
    font-size: 0.9rem;
    color: #666;
    padding: 5px 0;
    transition: color 0.2s;
}

/* ホバー時と現在地の色を少し濃くする */
.nav-links li a:hover,
.nav-links li a.current {
    color: #d6d6d6;
    font-weight: bold;
}

/* 現在地のリンクの下に線を出す（にじさんじ風の目印） */
.nav-links li a.current::after {
    content: "";
    position: absolute;
    bottom: -2px; /* リンクの少し下に配置 */
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #D5A710; /* ストリーマーなら青、などページごとに色を変えることも可能です */
    border-radius: 2px;
}

/* デザイナー側のページなら下線の色を変える例（オプション） */
.designer-side .nav-links li a.current::after {
    background-color: #5f67af;
}


/* --- メインコンテンツ --- */
main {
    flex: 1; /* コンテンツが少なくてもフッターを下に押し下げる */
}

.container-streamer {
    max-width: 960px;
    margin: 40px auto;
    padding: 20px;
    background: #f3f1eb;
    overflow: hidden;
}

.container-designer {
    max-width: 960px;
    margin: 40px auto;
    padding: 20px;
    background: #e4eaf1;
}


/* ----------------------
　　　　　index
----------------------- */

.index-title{
    font-size: 32px;
    font-weight: bold;
    color: #c9c9c9;
    text-align: center;
}

/* --- ゲートウェイ（動画対応・色変更） --- */
.gateway-container {
    width: 100%;
    padding: 80px 0;
    background-color: #fff;
}

.gateway-wrapper {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    gap: 30px;
    padding: 0 20px;
}

/* カード全体の基本構造（aタグにする） */
.gateway-card {
    flex: 1;
    height: 450px;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    text-decoration: none; /* リンクの線を消す */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gateway-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* --- 背景動画の共通土台 --- */
.card-video {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    filter: blur(10px) grayscale(80%) brightness(0.7);  /* 通常時の状態：ぼかし ＆ モノクロ ＆ 少し暗め */
    transition: filter 0.5s ease, transform 0.5s ease;  /* 変化を滑らかにする（0.5秒かけてじわっと変わる） */
}

/* --- ストリーマー専用の調整（現在の数値を反映） --- */
.streamer-video {
    transform: translate(-36%, -49%);
    width: 142%;
    height: 142%;
    min-width: 100%;
    min-height: 100%;
    object-fit: contain;
}

/* --- デザイナー専用の調整（これから調整する用） --- */
.designer-video {
    /* デザイナー用動画に合わせて数値を自由に変えられます */
    transform: translate(-50%, -50%); 
    width: 100%;
    height: 100%;
    object-fit: cover; /* デザイナー側は全体を埋めたいなら cover がおすすめ */
}

/* --- カードにホバーした時の動画の状態 --- */
.gateway-card:hover .card-video {
    filter: blur(2px) grayscale(0%) brightness(1.0);    /* ホバー時：ぼかし解除 ＆ カラー ＆ 明るさ戻す */
}

/* 文字などのオーバーレイ（動画の上） */
.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 動画を少し暗くして文字を見やすく */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    z-index: 2; /* 動画の上に配置 */
    transition: background 0.3s ease;
}

/* ホバー時にオーバーレイを少し明るく */
.gateway-card:hover .card-overlay {
    background: rgba(0, 0, 0, 0.3);
}

.card-overlay h2 {
    font-size: 2.2rem;
    margin-bottom: 10px;
    letter-spacing: 0.1em;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.card-overlay p {
    font-size: 0.95rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

/* ボタンの基本デザイン */
.gateway-button {
    padding: 14px 50px;
    border: 2px solid #fff;
    color: #fff;
    font-weight: bold;
    border-radius: 30px;
    transition: all 0.3s ease;
    letter-spacing: 0.1em;
}

/* --- ストリーマー側の色設定（ゴールド系） --- */
.streamer-card:hover .gateway-button {
    background-color: hsl(46, 86%, 45%); /* ご指定の色 */
    border-color: hsl(46, 86%, 45%);
    color: #fff;
}

/* --- モデラー側の色設定（ブルー系） --- */
.modeler-card:hover .gateway-button {
    background-color: #5f67af; /* ご指定の色 */
    border-color: #5f67af;
    color: #fff;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .gateway-wrapper { flex-direction: column; gap: 20px; }
    .gateway-card { height: 300px; }
    .card-overlay h2 { font-size: 1.8rem; }
}


/* ----------------------
　　　　 vtuber
----------------------- */

/* 画像エリア */

.top-layout {
    position: relative;
    display: flex;
    justify-content: center; /* これで子要素を左右中央に寄せます */
    width: 100%;            /* 画面いっぱいの幅を確保 */
    padding: 20px 0;        /* 必要に応じて上下に余白 */
}

/* 親コンテナ：元の .profile-image の役割 */
.parallax-container {
    flex: 0 0 960px;
    height: 600px;
    position: relative;
    overflow: hidden;
    perspective: 1500px;
}

/* 各レイヤーの共通設定 */
.parallax-layer {
    position: absolute;
    /* 動く余裕（マージン）として、上下左右に少し拡大して配置 */
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    will-change: transform;
    pointer-events: none;
    /* 回転の軸を画像の中央に設定 */
    transform-style: preserve-3d;
}

.parallax-layer img {
    width: 100%;
    height: 100%;
    /* 画像の比率を保ったまま、枠いっぱいに表示（縦横比を崩さない） */
    object-fit: contain; 
}

/* キャラクター画像の位置調整 */
.layer-chara img {
    width: 100%;
    height: auto;      /* 縦に長いのを維持 */
    object-fit: cover; /* 枠に合わせて配置 */
    object-position: top; /* ★頭が切れないよう、上端を基準にする */
}

/* レイヤーの重なり順 */
.layer-bg {
    z-index: 1;
}

.layer-chara {
    z-index: 2;
}

@media (max-width: 840px) {
    .parallax-container {
        flex: 0 0 95%; /* 画面幅が狭い時は横幅の95%にする */
        height: auto;
        aspect-ratio: 800 / 600; /* 横長比率を維持 */
    }
}

/* バーを包むグループ（位置決め用） */
.info-bar-wrapper {
    position: absolute;
    bottom: -10px;      /* 画像の下端（目隠ししたい位置）に合わせて調整 */
    left: -10px;           /* 親のpadding:20pxを無視させるための設定 */
    width: calc(100% + 60px); 
    margin-left: -20px;
    z-index: 10;       /* 画像より確実に手前に出す */
    pointer-events: none; /* マウス操作を後ろの画像に通す */
}

/* バー自体のデザイン */
.info-bar {
    width: 100%;
    height: 60px;
    background: rgba(31, 31, 31, 0.9); /* 半透明の黒 */
    border-top: 2px solid #fff;     /* 上下のライン */
    border-bottom: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-3deg); /* 少し斜めにするとよりデザイン性が上がります */
}

.bar-text {
    color: #fff;
    font-weight: bold;
    letter-spacing: 0.2em;
    font-size: 1.3rem;
}


/* ーーーー
　　  共通
　　ーーーー */

/* --- セクション間隔の共通設定 --- */

/* すべてのトップセクションに共通の余白を設定 */
.top-live-section,
.top-news-section,
.top-profile-section,
.top-video-section,
.top-guideline-section {
    padding-top: 100px;
    padding-bottom: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 1000px;
    box-sizing: border-box;
}

/* 一番最後だけ下の余白も作る */
.top-guideline-section {
    padding-bottom: 100px;
}

.top-section-title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 900;
    color: #444;
    letter-spacing: 0.1em;
}

.top-live-section-title,
.news-section-title,
.top-section-title {
    margin-top: 0;
    margin-bottom: 40px;
}

/* ーーーー
　　　LIVE
　　ーーーー */

/* セクション全体の制御 */
.top-live-section {
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0;
    visibility: visible;
}

.top-live-section-title{
    text-align: center;
    font-size: 1.8rem;
    font-weight: 900;
    color: #444;
    letter-spacing: 0.1em;
}

/* どちらかがLiveの時にJSで付与 */
.top-live-section.is-any-live {
    height: auto;
    opacity: 1;
    padding-top: 100px;
}

.top-live-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.top-live-badge {
    background: #B94646; /* YouTubeカラー */
    color: #fff;
    padding: 4px 12px;
    font-weight: bold;
    font-size: 0.9rem;
    border-radius: 4px;
    animation: live-blink 2s infinite;
}

.top-live-badge.twitch {
    background: #784EAF; /* Twitchカラー */
}

@keyframes live-blink {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

.top-live-flex-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* 枠の設定（背景の黒を消し、文字のみ浮かせる） */
.top-live-card-wrapper {
    flex: 1;
    min-width: 300px;
    background: transparent; /* 枠の背景を透明に */
    border-radius: 12px;
    padding: 0;
    position: relative;
}

/* 映像側：配信中以外は隠す */
.live-on-content {
    height: 0;
    opacity: 0;
    overflow: hidden;
    background: #000; /* 動画の背景だけ黒にする */
    border-radius: 12px;
    padding: 20px;
}

/* 文字側：デフォルトで表示 */
.live-off-content {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 250px;
}

/* 配信中（.is-live）がついた時のスイッチ */
.top-live-card-wrapper.is-live .live-on-content {
    height: auto;
    opacity: 1;
    overflow: visible;
}

.top-live-card-wrapper.is-live .live-off-content {
    display: none;
}

/* ーーー 文字色とデザイン ーーー */

/* YouTube枠の非表示時（Twitch Onlyの文字） */
#js-live-youtube .only-text {
    color: #784EAF; /* Twitchの紫 */
}

/* Twitch枠の非表示時（YouTube Onlyの文字） */
#js-live-twitch .only-text {
    color: #B94646; /* YouTubeの赤 */
}

.only-text {
    font-size: 2.8rem; /* 2段になるので少し大きくしても映えます */
    font-weight: 1000;
    letter-spacing: 0.1em;
    text-align: center;
    line-height: 1.2; /* 行間を少し詰める */
    opacity: 0.8;
    animation: live-blink 2s infinite;
}

/* Onlyの部分を下の行に送る */
.only-text span {
    display: block;
    font-size: 2.2rem; /* Onlyの方を少し小さくするとバランスが良いです */
    margin-top: 5px;
}

/* 映像パーツ */
.top-live-video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.top-live-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
}


/* ーーーー
　　　NEWS
　　ーーーー */

.news-section {
    margin-bottom: 80px; /* 次のセクションとの間隔 */
}

.news-section-title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 900;
    color: #444;
    letter-spacing: 0.1em;
    margin-bottom: 0;
    
}

.news-list {
    list-style: none;
    padding: 0;
}

.news-item {
    border-bottom: 1px solid #eee;
}

.news-item a {
    display: flex;
    align-items: center;
    gap: 20px; /* 画像と文字の間の隙間 */
    padding: 15px;
    text-decoration: none; /* 下線を消す */
    color: inherit;        /* 親要素の色（通常は黒系）を引き継ぐ */
}

.news-item a:hover {
    background-color: #f9f9f9;
    border-left: 5px solid #D5A710; /* アクセントカラーの縦線 */
}

/* テキストエリアの調整 */
.news-body {
    flex-grow: 1;
    overflow: hidden;
}

.news-meta {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

/* サムネイルのサイズ固定 */
.news-thumb {
    width: 120px;
    height: 68px; /* 16:9に近い比率 */
    flex-shrink: 0;
    overflow: hidden;
    background-color: #eee;
}

.news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠いっぱいに収める */
    transition: transform 0.3s ease; /* ★アニメーションの速度と動き方 */
}

/* ホバー時の動き（aタグにマウスが乗った時、中のimgを大きくする） */
.news-item a:hover .news-thumb img {
    transform: scale(1.15); /* ★1.1倍に拡大（お好みで1.15倍などに調整） */
}

/* 日付 */
.news-date {
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    color: #888;
    width: 120px;
    flex-shrink: 0;
}

/* カテゴリタグ */
.news-category {
    font-size: 0.7rem;
    font-weight: bold;
    background: #888;
    color: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    margin-right: 20px;
    width: 70px;
    text-align: center;
    flex-shrink: 0;
}

/* 【Newsカテゴリのルール】
  - category: "VIDEO"  / class: "video" (赤)
  - category: "STREAM" / class: "stream" (青)
  - category: "INFO"   / class: "info" (グレー)
  - category: "GOODS"   / class: "goods" ()
*/

/* カテゴリごとの色分け */
.news-category.video { background: #b94646; } /* 動画 */
.news-category.stream { background: #5e699b; } /* 配信 */
.news-category.goods { background: #ce7ebc; } /* グッズ */


/* タイトル（長ければ三点リーダーにする設定） */
.news-title {
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* もっと見るボタン */
.news-more {
    text-align: center;
    margin-top: 10px;
}

.news-back {
    float: left;
    text-align: center;
    margin-bottom: 20px;
    margin-left: 43px;
}

.btn-more {
    display: inline-block;
    padding: 10px 40px;
    border: 1px solid #333;
    color: #333;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: bold;
    transition: 0.3s;
}

.btn-more:hover {
    background: #333;
    color: #fff;
}

/* スマホでは縦並びにする設定 */
@media (max-width: 600px) {
    .news-item a {
        flex-direction: column;
        align-items: flex-start;
    }
    .news-thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}


/* ーーーー
　　PROFILE
　　ーーーー */

/* 共通コンテナ */
.top-section-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}


/* PROFILE */
.top-profile-flex {
    display: flex;
    align-items: center;
    gap: 40px;
    border: 3px solid #D5A710;
    padding: 40px;
    border-radius: 20px;
}

.top-profile-image img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    background: #485375;
}

.top-profile-name {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.top-profile-description {
    line-height: 1.8;
    color: #555;
    margin-bottom: 25px;
}

.btn-outline {
    display: inline-block;
    border: 2px solid #333;
    color: #333;
    padding: 10px 25px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}

.btn-outline:hover {
    background: #333;
    color: #e6e6e6;
    transform: translateY(-2px);
}

/* ーーーー
　　　VIDEO
　　ーーーー */

/* VIDEO */
/* VIDEOグリッドレイアウト */
.top-video-grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap; /* スマホで縦に並ぶように */
}

.top-video-card {
    flex: 1;
    min-width: 280px; /* スマホで1枚が小さくなりすぎないための最小幅 */
}

.top-video-wrapper {
    width: 100%;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

/* 動画タイトルのデザイン（必要に応じて） */
.top-video-title {
    margin-top: 10px;
    font-size: 0.9rem;
    font-weight: bold;
    color: #444;
    text-align: center;
}

.video-more {
    text-align: center;
    margin-top: 10px;
}

/* レスポンシブ調整（スマホで1列にする） */
@media (max-width: 600px) {
    .top-video-card {
        flex: 1 1 100%;
    }
}


/* ーーーー
　   GOODS
　　ーーーー */

/* トップページ用グッズセクション */
.top-goods-section {
    margin-top: 60px;
    padding-top: 100px;
    padding-left: 20px;
    padding-right: 20px;
}

.top-goods-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* PCは4列 */
    gap: 60px;
    margin-top: 30px;
}

.top-goods-item {
    text-decoration: none;
    transition: transform 0.3s ease;
}

.top-goods-item:hover {
    transform: translateY(-5px);
}

.top-goods-image {
    position: relative;
    aspect-ratio: 1 / 1; /* 正方形に統一 */
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    margin-bottom: 10px;
}

.top-goods-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.top-goods-name {
    font-size: 0.85rem;
    color: #333;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 長い名前は「...」にする */
    padding: 0 5px;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .top-goods-grid {
        grid-template-columns: repeat(2, 1fr); /* スマホは2列 */
        gap: 15px;
    }
}

/* ーーーー
　 GUIDELINES
　　ーーーー */

/* GUIDELINES (カードスタイル) */
.top-guideline-card {
    text-align: center;
    padding: 50px;
    border-radius: 20px;
}

/* ボタン共通 */
.btn-guideline {
    display: inline-block;
    border: 2px solid #333;
    color: #333;
    padding: 10px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}

.btn-guideline:hover {
    background: #333;
    color: #e6e6e6;
    transform: translateY(-2px);
}

/* レスポンシブ */
@media (max-width: 768px) {
    .profile-flex {
        flex-direction: column;
        text-align: center;
    }
}


/* ----------------------

　　　　　news

----------------------- */

/* アーカイブページでのリスト全体の並び（横に3つ並べる例） */
.news-archive-section .news-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* 280px以上の幅で自動整列 */
    gap: 30px;
    border-top: none; /* リストの線を消す */
}

/* カード1つずつの設定 */
.archive-item {
    border-bottom: none; /* 下線を消してカードっぽく */
}

.archive-item a {
    display: block; /* 横並びから縦並びに変更 */
    padding: 0;
    background: transparent;
}

.archive-item a:hover{
    border-left: none;
}

/* サムネイルを大きく見せる */
.archive-item .news-thumb {
    width: 100%; /* 親の幅いっぱいに */
    height: auto;
    aspect-ratio: 16 / 9; /* 綺麗な比率を維持 */
    margin-bottom: 15px;
    border-radius: 8px; /* 角を少し丸くすると今風です */
}

/* テキスト部分の調整 */
.archive-item .news-body {
    padding: 0 5px;
}

.archive-item .news-title {
    white-space: normal; /* 2行以上になってもOKにする */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 最大2行まで表示 */
    -webkit-box-orient: vertical;
    line-height: 1.5;
    height: 3em;
    font-size: 1rem;
    font-weight: bold;
    overflow: hidden;
    color: #333;
    margin-top: 8px;
    white-space: normal;            /* 改行を許可する */
}


/* ----------------------

　　　 news-details

----------------------- */

/* ----------------------
    News Detail (詳細ページ)
----------------------- */

.news-detail-article {
    max-width: 800px; /* 読みやすい幅に制限 */
    margin: 60px auto;
    background: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

/* 記事ヘッダー */
.article-header {
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
    margin-bottom: 30px;
}

.article-header .news-meta {
    margin-bottom: 15px;
}

.article-title {
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1.4;
    color: #333;
}

/* メイン画像 */
.article-eye-catch {
    width: 100%;
    margin-bottom: 30px;
    border-radius: 10px;
    overflow: hidden;
}

.article-eye-catch img {
    width: 100%;
    height: auto;
    display: block;
}

/* 本文テキスト */
.article-content {
    line-height: 1.8;
    color: #444;
    font-size: 1.05rem;
}

.article-content p {
    margin-bottom: 1.5em;
}

.article-content h2 {
    font-size: 1.4rem;
    color: #333;
    border-left: 5px solid #D5A710; /* ストリーマー色のアクセント */
    padding-left: 15px;
    margin: 40px 0 20px;
}

/* 箇条書き */
.content-list {
    margin-top: 1px;
    margin-bottom: 1.5em;
    padding-left: 1.52rem;
}

.content-list li {
    margin-bottom: 0.5em;
    list-style: disc;
}

/* 記事内動画 */
.content-video {
    margin: 30px 0;
}

/* 戻るボタンの調整 */
.article-footer {
    margin-top: 60px;
    border-top: 1px solid #eee;
    padding-top: 30px;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .news-detail-article {
        padding: 20px;
        margin: 30px 10px;
    }
    .article-title {
        font-size: 1.4rem;
    }
}

/* ----------------------

　　　　 profile

----------------------- */

/* プロフィールレイアウト */
.profile-layout {
    display: flex;
    gap: 30px; /* 画像とテキストの間隔 */
    align-items: flex-start;
}

/* 画像とボタンをまとめる親 */
.profile-image-wrapper {
    flex: 0 0 500px; /* 元の幅 500px を維持 */
    height: 750px;   /* 高さを維持 */
    position: relative; /* ボタン配置の基準にする */
}

/* メイン画像自体の設定 */
.main-profile-kv {
    width: 100%;    /* 親(500px)いっぱいまで広げる */
    height: 100%;   /* 親(750px)いっぱいまで広げる */
    object-fit: cover; /* 画像が歪まないように調整（お好みで） */
}

/* ★＋viewボタンのデザインと配置 */
.btn-kv-gallery {
    position: absolute;
    bottom: 20px; /* メイン画像の少し下にはみ出させる */
    left: 20px;
    background: #D5A710; /* ボタンの色（活動者の雰囲気に合わせて変更してください） */
    color: #e5eaf1;
    letter-spacing: 0.1em;
    border: none;
    opacity: 0.7;
    padding: 10px 20px;
    border-radius: 25px;
    font-size:  1.1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: 0.3s;
    z-index: 10; /* 画像より前に出す */
    justify-content: center;
}


/* ーーー 浮かび上がるウィンドウ（モーダル）のCSS ーーー */

.gallery-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000;
    opacity: 0; visibility: hidden; transition: opacity 0.4s;
}
.gallery-modal.is-visible { opacity: 1; visibility: visible; }
.gallery-modal-overlay { position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.7); }
.btn-gallery-close { position: absolute; top: 10px; right: 15px; background: transparent; border: none; font-size: 2.5rem; color: #888; cursor: pointer; line-height: 1; z-index: 50; }

/* --- ★★ ここからスライダー用の新規設定 ★★ --- */

/* スライダー用モーダルウィンドウ（さらに巨大化） */
.gallery-modal-content.solo-style {
    position: relative;
    top: 75px; 
    left: 50%;
    transform: translate(-50%);
    width: 95%;
    max-width: 1200px;
    height: calc(100vh - 130px);
    background: #fff;
    border-radius: 15px;
    padding: 20px;   /* 上下の余白を最小限に（閉じるボタンの位置に注意） */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* 中身を上下中央に */
}

/* メイン画像表示エリアを最大化 */
.slider-main-area {
    position: relative;
    width: 100%;
    height: 100%;    /* 親の高さ(95vh)をフルに使う */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fdfdfd; /* ほぼ白に近い背景 */
    border-radius: 8px;
}

#js-slider-main-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* 左右ボタンの調整（画像にかぶるように配置） */
.slider-prev, .slider-next {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100px; /* クリックエリアを少し広めに */
    background: transparent;
    border: none;
    font-size: 4rem; /* 矢印を大きく */
    opacity: 0;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.slider-prev {
    left: 0;
    color: rgba(0,0,0,0.5);
    background: rgba(0,0,0,0.02);
}

.slider-next {
    right: 0;
    color: rgba(0,0,0,0.5);
    background: rgba(0,0,0,0.02);
}

/* カーソルを近づけた時の表示 */
.slider-prev:hover, .slider-next:hover {
    opacity: 1;
    color: rgba(0,0,0,0.6);
    background: rgba(0,0,0,0.03); /* ほんの少しだけ影をつける */
}

/* --- スマホ用の調整 --- */
/* --- スマホ用の調整（スマホはヘッダーが小さいことが多いので別途設定） --- */
@media (max-width: 768px) {
    .gallery-modal-content.solo-style {
        top: 60px; /* スマホ用ヘッダー高さ */
        height: calc(100vh - 70px); /* 下に10pxだけ隙間を開ける */
        width: 100%; /* 横もいっぱい */
        border-radius: 10px 10px 0 0;
        padding: 10px;
    }
}


/* テキストエリア */
.profile-text {
    flex: 1;
}

.catchphrase {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--streamer-color);
    margin-bottom: 20px;
}

/* --- プロフィールテーブル 基本設定 --- */
.profile-details {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0px;
    table-layout: fixed; /* 2列時のズレ防止のため追加 */
}

.vtuber-name {
    font-weight: 700;
    letter-spacing: 0.1em;
    border-bottom: 1px solid #d4c4a8;
}

.vtuber-nameEN {
    font-size: 1.2rem;
    margin-left: 10px;
}

/* thとtdの「1行の高さ」を 1.8rem で完全に統一します */
.profile-details th,
.profile-details td {
    padding: 8px 0;
    vertical-align: top; /* 「1行目」に合わせるため top に統一 */
    line-height: 1.8rem; /* ここを共通にすることで、フォントサイズが違っても1行目が揃います */
}

.profile-details th {
    width: 100px;
    text-align: left;
    color: #888;
    font-size: 0.9rem;
}

.profile-details td {
    font-weight: 500;
}

/* --- 特定の行だけ間隔を狭くする設定 --- */
.profile-details tr.row-tight th,
.profile-details tr.row-tight td {
    padding-top: 0px;
    padding-bottom: 0px;
}

/* --- 2列レイアウト用の設定 --- */
.profile-group-container {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    align-items: flex-start;
}

.group-box {
    flex: 1;
    border-radius: 4px;
    height: auto;
}

/* 2列ボックス内のth幅を調整 */
.group-box th {
    width: 90px; 
}

.group-box td {
    padding: 0 5px; 
}

/* スマホでは縦並びに戻す設定 */
@media (max-width: 600px) {
    .profile-group-container {
        flex-direction: column;
        gap: 10px;
    }
}

.description {
    line-height: 1.8;
    color: #555;
}

/* SNSセクション全体のコンテナ */
.sns-links-container {
    max-width: 800px;
    margin: 40px auto;
    text-align: center;
}

/* 1段目：YouTubeとTwitch（横並びを強制） */
.sns-primary-row {
    display: flex;
    justify-content: center;
    gap: 15px; /* アイコン同士の隙間 */
    margin-bottom: 30px;
    flex-wrap: nowrap; /* 画面が狭くても改行させない */
}

.sns-banner-item {
    width: 180px; /* 指定の表示サイズ */
    flex-shrink: 0; /* サイズが勝手に縮まないように固定 */
    transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px;
    cursor: pointer;
}

/* 2段目：その他のアイコン */
.sns-secondary-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.guideline-mashmallow {
    display: flex;
    justify-content: left;
    gap: 20px;
    flex-wrap: wrap;
}

.sns-icon-item {
    width: 60px; /* 120pxで作った画像の半分サイズ */
    position: relative;
    transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

/* 画像自体の設定 */
.sns-banner-item img,
.sns-icon-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: inherit;
}

/* --- ホバー時の演出：影を強くし、色を濃く（少し暗く）する --- */
.sns-banner-item:hover,
.sns-icon-item:hover {
    transform: translateY(-4px); /* 少し上に浮かす */
    /* brightness(0.85) = 色を濃く / drop-shadow(横 縦 ぼかし 色) */
    filter: brightness(1.30) drop-shadow(0 8px 6px rgba(0, 0, 0, 0.5));
}

/* 2段目用のツールチップ */
.sns-icon-item::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    font-size: 0.75rem;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}

.sns-icon-item:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}

/* 極端に画面が狭いスマホ（320px幅など）への対応 */
@media (max-width: 380px) {
    .sns-banner-item {
    width: 140px; /* 少しだけ小さくしてはみ出しを防ぐ */
    }
}

/* スマホ対応：画面が狭くなったら縦並びにする */
@media (max-width: 768px) {
    .profile-layout {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .profile-image {
        flex: 0 0 auto;
        width: 80%; /* スマホでは画像を少し小さく表示 */
    }
    .profile-text {
        text-align: center;
    }
    .profile-details th {
        width: 80px;
    }
}

/* --- スムーズスクロール（クリックした時にスルスル動く） --- */
html { scroll-behavior: smooth; }


/* ----------------------

　　　　 guidline

----------------------- */

/* --- 目次（TOC）のデザイン --- */
.toc-container { 
    background-color: #fcfaf5;
    border: 1px solid #d4c4a8;
    padding: 30px;
    margin-bottom: 60px;
    border-radius: 4px;
    position: relative;
}

/* 目次の装飾的な内枠（二重線風） */
.toc-container::before {
     content: "";
     position: absolute;
     top: 5px;
     left: 5px;
     right: 5px;
     bottom: 5px;
     border: 1px solid #eaddc7;
     pointer-events: none;
}

.toc-title {
    font-size: 1.2rem;
    margin-bottom: 20px;
    text-align: center;
    color: #5d5245;
    font-weight: bold;
    letter-spacing: 0.1em;
}

/* 目次リスト */
.toc-container {
background-color: #fcfaf5;
border: 1px solid #d4c4a8;
padding: 30px;
margin-bottom: 10px;
border-radius: 4px;
position: relative;
max-width: 500px; /* 縦長にするため、目次全体の最大幅を少し絞る（お好みで調整してください） */
margin-left: auto;
margin-right: auto;
}

.toc-title {
font-size: 1.2rem;
margin-bottom: 25px;
text-align: center;
color: #5d5245;
font-weight: bold;
letter-spacing: 0.2em;
border-bottom: 1px double #d4c4a8; /* タイトルの下に二重線を入れてお品書き感を出す */
padding-bottom: 15px;
}

.toc-list {
list-style: none;
padding: 0;
display: flex; /* gridからflexに変更 */
flex-direction: column; /* 縦に並べる */
gap: 10px;
}

.toc-list li {
border-bottom: 1px dashed #eaddc7; /* 各項目の間に薄い点線を入れる */
}

.toc-list li:last-child {
border-bottom: none; /* 最後の項目の下線は消す */
}

.toc-list li a {
text-decoration: none;
color: var(--designer-color);
font-size: 1rem;
display: block;
padding: 12px 15px;
transition: all 0.3s ease;
position: relative;
}

/* ホバー時に左側に小さな印（・）が出る演出 */
.toc-list li a:hover {
background-color: rgba(212, 196, 168, 0.1);
padding-left: 25px; /* 左に少し動かす */
color: #5d5245;
}　

.toc-list li a:hover::before {
position: absolute;
left: 8px;
}

/* --- ガイドライン日付 --- */
.date{
    font-size: 16px;
    text-align: right;
    margin: 0;
}

/* --- ガイドライン詳細ボックス --- */
.guideline-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.guideline-box {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 40px;
    border-radius: 2px;
    position: relative;
    scroll-margin-top: 100px;
}

/* ボックス上部のアクセントライン（デザイナーカラー） */
.guideline-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--designer-color);
}

.box-title {
    font-size: 1.4rem;
    margin-bottom: 20px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 15px;
}

/* タイトルの左側の漢数字丸バッジ */
.box-title span {
    background-color: var(--designer-color);
    color: #fff;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-family: serif;
    border-radius: 50%;
    flex-shrink: 0;
}

.box-inner {
    font-size: 1rem;
    line-height: 1.9;
    color: #444;
    text-align: left;
}

/* 文章中のリンクの基本設定 */
.text-link {
    color: #e2a64b; /* サイトのテーマカラー（赤系など）にする */
    text-decoration: none; /* 最初は下線を消しておく */
    border-bottom: 1px solid rgba(var(--designer-color-rgb), 0.3); /* 薄い下線を入れる */
    transition: all 0.3s ease;
    font-weight: bold;
}

/* ホバーした時 */
.text-link:hover {
    color: #5d5245; /* 少し濃い茶色などに変化 */
    border-bottom: 1px solid #5d5245; /* 下線をはっきりさせる */
    background-color: rgba(212, 196, 168, 0.1); /* ほんのり背景色をつける */
}

/* スマートフォン向けの調整 */
@media (max-width: 600px) {
    .guideline-box { padding: 25px;
    }
    .toc-list {
        grid-template-columns: 1fr;
    }
    .box-title {
        font-size: 1.2rem;
    }
}



/* ----------------------

　　　　   goods

----------------------- */

/* --- グッズセクションのデザイン --- */
.goods-container {
    max-width: 1100px;
    margin: 60px auto;
    padding: 0 20px;
}

/* グリッドレイアウト（3カラム） */
.goods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.goods-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 画像エリア */
.goods-image {
    width: 100%;
    aspect-ratio: 1 / 1; /* 正方形に固定 */
    position: relative;
    overflow: hidden;
    background: #f9f9f9;
}

.goods-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* NEWバッジ */
.goods-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #e63946; /* 目立つ赤 */
    color: #fff;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: bold;
    border-radius: 20px;
}

/* --- グッズグリッドのレイアウト調整 --- */
.goods-grid {
    display: grid;
    /* 基本は1列3〜4個を維持しつつ、画面幅に合わせて自動調整 */
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px; /* アイテム間の隙間 */
    margin-bottom: 50px;
}

/* 1200px以下の時は3個並びにする（少し余裕を持たせる） */
@media (max-width: 1200px) {
    .goods-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 900px以下の時は2個並びにする（タブレット・大型スマホ） */
@media (max-width: 900px) {
    .goods-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

/* --- グッズカード内の文字の高さ合わせ --- */
.goods-info {
    padding: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px; /* カード全体の高さを揃えるための最低値 */
}

.goods-info h3 {
    font-size: 0.95rem;
    line-height: 1.4;
    margin-bottom: 5px;
    /* 2行まで表示し、超えたら「...」にする（ブラウザ対応） */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.8em; 
}

.size-variation {
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 8px;
    min-height: 1.2em; /* サイズ表記がない商品があっても高さがズレないように */
}

.price {
    font-size: 1.1rem;
    font-weight: bold;
    color: #d63c3c;
    margin-bottom: 12px;
}

/* BOOTHボタン */
.booth-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #d85f5f; /* BOOTHのブランドカラーに近い赤 */
    color: #fff !important;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: bold;
    transition: opacity 0.3s;
}

.booth-button:hover {
    opacity: 1.0;
    background-color: rgb(204, 43, 43);
}

/* スマホ対応 */
@media (max-width: 600px) {
    .goods-grid {
        grid-template-columns: 1fr 1fr; /* 2列にする */
        gap: 15px;
    }
    .goods-info h3 { font-size: 0.9rem; }
    .booth-button { width: 100%; padding: 10px 5px; }
}


/* ----------------------

　　　 designer-top

----------------------- */

/* ポータルグリッド */
.designer-portal {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 40px;
}

/* カードをリンクとして機能させる設定 */
.portal-card {
    text-decoration: none; /* 下線を消す */
    background: rgba(255, 255, 255, 0.8);
    border-left: 5px solid var(--designer-color); /* 左側にアクセントカラーの線 */
    border-top: 1px solid #eee;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    border-radius: 8px;
    padding: 40px;
    transition: all 0.3s ease;
    display: block; /* 領域全体をクリック可能に */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* ホバー時の挙動 */
.portal-card:hover {
    transform: translateY(-5px);
    background: #fff;
    box-shadow: 0 10px 25px rgba(95, 103, 175, 0.15); /* 影にも少し色を混ぜる */
    border-color: var(--designer-color);
}

.portal-info h2 {
    font-size: 1.6rem;
    margin-bottom: 15px;
    color: var(--designer-color); /* タイトルにアクセントカラーを使用 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.portal-info h2 i {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
    opacity: 0.5;
}

/* ホバー時に矢印を少し右に動かす */
.portal-card:hover h2 i {
    transform: translateX(5px);
    opacity: 1;
}

.portal-info p {
    color: #666;
    line-height: 1.8;
    margin: 0;
    font-size: 0.95rem;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .designer-portal {
        grid-template-columns: 1fr;
    }
}


/* ----------------------

　　　　 portfolio

----------------------- */

/* ポートフォリオ全体の調整 */
.section-desc {
    text-align: center;
    margin-bottom: 40px;
    color: #666;
}

/* --- ポートフォリオ（YouTube動画一覧）のレイアウト --- */

.video-grid {
    display: grid;
    /* 基本は1列に4個並べる */
    grid-template-columns: repeat(3, 1fr); 
    gap: 25px; /* 動画同士の間隔 */
    margin-top: 40px;
}

/* 1200px以下の時は3個並びにする（タブレットや小さめのPC） */
@media (max-width: 1200px) {
    .video-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 900px以下の時は2個並びにする（スマホで見やすくするため） */
@media (max-width: 900px) {
    .video-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

/* 480px以下の時は1列にする（非常に小さいスマホ） */
@media (max-width: 480px) {
    .video-grid {
        grid-template-columns: 1fr;
    }
}

/* 動画アイテムのスタイル */
.video-item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.video-item:hover {
    transform: translateY(-5px);
}

/* YouTubeの比率を16:9に保つためのラッパー */
.video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9の比率 */
    background: #000;
    border-radius: 4px;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 動画タイトルの調整 */
.video-title {
    margin-top: 10px;
    padding-left: 10px;
    font-size: 0.85rem;
    color: #555;
    line-height: 1.5;
    text-align: left;
    /* タイトルの高さも揃えてガタつきを防ぐ */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 3em; 
}


/* ----------------------
　　　　 infomation
----------------------- */


/* --- レイアウト基本 --- */
.section-desc {
    text-align: center;
    margin-bottom: 40px;
    color: #666;
}

/* --- 制作の流れ（ステップ）のデザイン --- */
.flow-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
}

.flow-step {
    display: flex;
    gap: 25px;
    margin-bottom: 0; /* 線を繋げるため0に */
    position: relative;
}

/* 左側の数字部分 */
.step-number {
    font-size: 1.2rem;
    font-weight: bold;
    color: #d4c4a8; /* デザイナーカラー */
    width: 30px;
    height: 30px;
    border: 2px solid #d4c4a8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    z-index: 2;
    flex-shrink: 0;
}

/* ステップ間を繋ぐ縦線 */
.flow-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 20px; /* 数字の中央に合わせる */
    top: 40px;
    bottom: 0;
    width: 2px;
    background-color: #e2c6a2;
    z-index: 1;
}

/* 右側のテキスト部分 */
.step-content {
    padding-bottom: 20px; /* ステップ間の余白 */
    flex-grow: 1;
}

.step-content h3 {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    color: #444;
    display: flex;
    align-items: center;
}

.step-content p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #666;
}

/* 最後のステップの余白調整 */
.flow-step:last-child .step-content {
    padding-bottom: 0;
}

/* --- メインアコーディオン（個人/法人の大きな枠） --- */
.main-accordion {
    border: 1px solid #d4c4a8;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 20px;
    overflow: hidden;
}

/* クリックする部分（大きなボタンのように見せる） */
.main-summary {
    padding: 25px;
    cursor: pointer;
    list-style: none;
    outline: none;
    transition: 0.3s;
    background-color: #fcfaf5;
}

.main-summary::-webkit-details-marker { display: none; }

.summary-text {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--designer-color);
}

.main-summary:hover {
    background-color: #f4eee0;
}

/* 開いている時のタイトルの色（個人/法人で色を変えることも可能） */
.main-accordion[open] .main-summary {
    background-color: var(--designer-color);
    border-bottom: 1px solid #d4c4a8;
}

.main-accordion[open] .summary-text {
    color: white;
}

.red-letter {
    color: #b11e1e;
}

/* --- よくある質問（Q&A）のデザイン --- */
/* --- アコーディオンFAQのデザイン --- */
.faq-container {
    max-width: 800px;
    margin: 40px auto;
}

.faq-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 15px;
    transition: all 0.3s ease; /* 動きを滑らかに */
}

/* 質問部分（クリックできるエリア） */
.faq-question {
    padding: 18px 20px;
    background-color: rgba(212, 196, 168, 0.05);
    font-weight: bold;
    color: #444;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none; /* デフォルトの三角矢印を消す（ブラウザによる） */
    position: relative;
}

/* ブラウザ標準の矢印を消す（Safari/Chrome用） */
.faq-question::-webkit-details-marker {
    display: none;
}

/* 自作のプラス（＋）アイコン */
.faq-question::after {
    content: "＋";
    position: absolute;
    right: 20px;
    color: #d4c4a8;
    transition: transform 0.3s;
}

/* 開いている時のプラスアイコンを回転させる */
.faq-item[open] .faq-question::after {
    transform: rotate(45deg); /* ＋を×（または斜め）にして「閉じる」を表現 */
}

.faq-question span {
    color: #d4c4a8;
    font-size: 1.2rem;
}

/* 回答部分 */
.faq-answer {
    padding: 20px;
    border-top: 1px solid #eee;
    line-height: 1.8;
    color: #666;
    font-size: 0.95rem;
    background: #fff;
}

/* --- アコーディオン内部の整理 --- */
/* 1. 中身の全体余白（上下左右を均等に） */
.main-content {
    padding: 40px;
    background: #fff;
    animation: fadeIn 0.4s ease;
}

.info-video {
    display: flex;
    flex-direction: column;
    width: 50%;       /* 親要素の横幅いっぱいに広げる */
    height: auto;      /* 高さを自動計算 */
    aspect-ratio: 16 / 9; /* アスペクト比を16:9に維持 */
}

/* 各セクションの間隔 */
.info-group {
    margin-bottom: 40px;
}
.info-group:last-child {
    margin-bottom: 0;
}

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

/* 2. 見出しの装飾（アコーディオン内でも崩れないよう固定） */
.sub-title {
    font-size: 1.2rem;
    color: var(--designer-color);
    border-left: 4px solid var(--designer-color);
    padding-left: 15px;
    margin: 0 0 20px 0; /* 下にだけ余白 */
    line-height: 1.2;
}

/* 3. ボックスデザインの修正 */
.rules-box, .warning-box, .disclaimer-box {
    padding: 30px; /* ボックス内余白を上下左右均等に */
    border-radius: 6px;
    margin: 0;
    width: 100%;
    box-sizing: border-box; /* paddingを含めて100%幅に */
}

.rules-box {
    background: #ebebeb;
}
.warning-box {
    background: #fff2f2;
    border: 1px solid #eecaca;
}
.disclaimer-box {
    background: #d6d6d6;
}

/* 4. リストの整列（一番崩れやすい部分） */
.standard-list, .warning-list, .disclaimer-list, .small-text-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.standard-list li, .warning-list li, .disclaimer-list li, .small-text-list li {
    position: relative;
    padding-left: 1.5em; /* 記号の分だけ左を空ける */
    margin-bottom: 12px;
    line-height: 1.6;
}

.standard-list li:last-child, .warning-list li:last-child, .disclaimer-list li:last-child, .small-text-list li:last-child {
    margin-bottom: 0; /* 最後の項目の下余白を消してボックスを均等に */
}

/* 行頭記号の配置を絶対配置で固定 */
.standard-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    color: var(--designer-color);
    font-weight: bold;
}

.warning-list li::before {
    content: "×";
    position: absolute;
    left: 0;
    color: #b33e3e;
    font-weight: bold;
}

.disclaimer-list li::before {
        content: "・";
    position: absolute;
    left: 0;
    color: var(--designer-color);
    font-weight: bold;
}

.small-text-list li::before {
    content: "※";
    position: absolute;
    left: 0;
}

/* 5. クレジット表記などの個別調整 */
.sub-section {
    margin-bottom: 25px;
}
.sub-section:last-child {
    margin-bottom: 0;
}
.sub-section h3 {
    margin: 0 0 10px 0;
    font-size: 1rem;
    color: #8b4513;
}

.credit-box {
    padding: 20px;
    border: 1px dashed #d4c4a8;
    background: #fff;
    margin-top: 15px;
}

/* 禁止・免責のリード文 */
.warning-lead, .disclaimer-lead {
    font-weight: bold;
    margin-bottom: 15px;
    display: block;
}
.warning-lead { color: #b33e3e; font-size: 1.1rem; }
.disclaimer-lead { color: #585858; margin-top: 0px; }

/* スマホ対応 */
@media (max-width: 768px) {
    .main-content {
        padding: 20px; /* スマホではアコーディオン内余白を少し詰める */
    }
}

/* スマホ対応 */
@media (max-width: 600px) {
    .service-cards {
        grid-template-columns: 1fr;
    }
}


/* ----------------------
　　　　   price
----------------------- */

/* --- 料金表専用スタイル --- */
.price-group {
    margin-bottom: 40px;
}

/* テーブルをスマホでも横スクロールで見やすくする枠 */
.price-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #d4c4a8;
    border-radius: 4px;
    background: #fff;
}

.price-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px; /* スマホで崩れないための最小幅 */
    margin-bottom: 0px;    /* テーブルごとの間隔 */
    table-layout: fixed;    /* これが重要！中身に関わらず指定した幅を守らせる */
}

.price-table th, 
.price-table td {
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.price-table th {
    background-color: #fcfaf5;
    color: var(--designer-color);
    font-weight: bold;
    border-bottom: 2px solid #d4c4a8;
}

.price-table tr:last-child td {
    border-bottom: none;
}

/* 1列目：内容（少し広め） */
.price-table th:nth-child(1),
.price-table td:nth-child(1) {
    width: 20%;             /* 全体の40%を使用 */
    text-align: left;
}

/* 2列目：料金（数字が見やすい幅） */
.price-table th:nth-child(2) {
    width: 10%;             /* 全体の40%を使用 */
    text-align: left;
}

.price-table td:nth-child(2) {
    font-weight: bold;
    color: #8b4513;
    font-family: 'Noto Sans JP', sans-serif;
    width: 10%;             /* 全体の25%を使用 */
    text-align: left;      /* 料金は右寄せが綺麗 */
    padding-right: 15px;
}

/* 3列目：備考（残りのスペース） */
.price-table th:nth-child(3),
.price-table td:nth-child(3) {
    width: 55%;             /* 全体の35%を使用 */
    text-align: left;
    font-size: 0.85rem;     /* 備考は少し小さく */
}

/* 見出しのデザインを統一 */
.price-table th {
    background-color: rgba(212, 196, 168, 0.1);
    padding: 12px 10px;
    border-bottom: 2px solid #d4c4a8;
}

/* 共通の補足事項エリア */
.common-notes {
    margin-top: 40px;
}

/* スマホ対応の微調整 */
@media (max-width: 768px) {
    .price-table th, 
    .price-table td {
        padding: 12px 10px;
        font-size: 0.9rem;
    }
}

/* --- 料金表アコーディオン（個人・企業別） --- */

/* アコーディオン全体の枠組み */
.main-accordion {
    border: 1px solid #d4c4a8;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
    background: #fff;
}

/* クリックするヘッダー部分 */
.main-summary {
    padding: 20px;
    background-color: #fcfaf5; /* デザイナーカラーの薄い色 */
    cursor: pointer;
    list-style: none; /* デフォルトの矢印を消す */
}

.main-summary::-webkit-details-marker {
    display: none; /* Safari用 */
}

.summary-text {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--designer-color, #d4c4a8);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 「▶」アイコン部分の初期状態 */
.summary-text::before {
    content: "▶";
    display: inline-block;
    font-size: 1.5rem;
    transition: transform 0.3s ease; /* 回転スピード */
}

/* アコーディオンが開いている（open）時の「▶」の動き */
.main-accordion[open] .summary-text::before {
    transform: rotate(90deg); /* 90度回転して下向き(▼)に見せる */
}

/* 中身のコンテンツエリア */
.main-content {
    padding: 30px 20px;
    border-top: 1px solid #d4c4a8;
}

/* サブタイトル（モデリング料金など） */
.sub-title {
    font-size: 1.1rem;
    border-left: 4px solid #d4c4a8;
    padding-left: 10px;
    margin-bottom: 15px;
    color: #444;
}

/* 企業テーマ用（もし色分けする場合） */
.corporate-theme .summary-text {
    color: #555; /* 企業用は少し落ち着いた色にするなどの調整が可能 */
}



/* ----------------------
　　　　 contact
----------------------- */

/* --- お問い合わせページ専用デザイン --- */
.contact-wrapper {
    max-width: 700px;
    margin: 0 auto;
}

.contact-actions {
    margin: 50px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* ボタンの共通スタイル */
.contact-btn {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 450px;
    padding: 20px 30px;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.contact-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.btn-icon {
    font-size: 1.8rem;
    margin-right: 20px;
    width: 40px;
    text-align: center;
}

.btn-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.btn-text strong {
    font-size: 1.2rem;
    margin-bottom: 4px;
}

.btn-text small {
    font-size: 0.85rem;
    opacity: 0.8;
}

/* Googleフォーム用（デザイナーカラー） */
.google-form {
    background-color: var(--designer-color);
    color: #ffffff;
}

/* X (旧Twitter) 用 */
.x-dm {
    background-color: #000000;
    color: #ffffff;
    border: 1px solid #333;
}

/* 中間の「または」 */
.or-text {
    width: 100%;
    max-width: 450px;
    text-align: center;
    position: relative;
    margin: 10px 0;
    color: #999;
    font-size: 0.9rem;
}

.or-text::before,
.or-text::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(50% - 40px);
    height: 1px;
    background-color: #d4c4a8;
}

.or-text::before { left: 0; }
.or-text::after { right: 0; }

/* スマホ対応 */
@media (max-width: 600px) {
    .contact-btn {
        padding: 15px 20px;
    }
    .btn-icon {
        font-size: 1.5rem;
        margin-right: 15px;
        width: 30px;
    }
    .btn-text strong {
        font-size: 1.1rem;
    }
}



/* ----------------------
　　　　 footer
----------------------- */

/* --- フッター --- */
.site-footer {
    background: #333;
    text-align: center;
    padding: 20px 0px; /* 20pxから10pxに減らして細くしました */
    margin: 0px;
    font-size: 1rem; /* 文字も少し小さくするとよりスマートです */
    border-top: 1px solid #d4c4a8;
}

/* コピーライト */
.copyright {
    font-size: 1rem;
    color: #999;
    letter-spacing: 0.05em;
    margin:0px;
}

/* --- 固定SNSバーのスタイル --- */
.sns-bar {
    position: fixed;
    bottom: 190px;
    right: 34px; 
    display: flex;
    flex-direction: column; /* 縦に並べる */
    gap: 10px;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    transform: translateY(5px); /* 下からふわっと出すための予備動作 */
}

/* スクロール後に付与されるクラス */
.sns-bar.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sns-item {
    width: 70px;
    height: 70px;
    background: #fff;
    border: 1px solid #d4c4a8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.8rem;
    color: #888 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

/* ホバー時のブランドカラー */
.sns-item.x:hover { color: #000 !important; border-color: #000; }
.sns-item.bsky:hover { color: #699FC6 !important; border-color: #699FC6; }
.sns-item.yt:hover { color: #B94646 !important; border-color: #B94646; }
.sns-item.twitch:hover { color: #784EAF !important; border-color: #784EAF; }

/* スマホでは邪魔になる可能性があるので非表示にする場合 */
@media (max-width: 768px) {
    .sns-bar, .back-to-top {
        display: none;
    }
}