@charset "UTF-8";

       :root {
           /* 富山ステーションシティ（TSC）カラーパレット */
           --tsc-accent: #409aa2;
           /* メインアクセントカラー（青緑） */
           --text: #333333;
           /* 基本文字（視認性の高い濃いグレー） */
           --bg-light: #f2f8f9;
           /* 薄い青緑系の背景（タブやセクションの切り替え用） */
           --white: #ffffff;
           --border: #e0e0e0;
           /* 境界線 */
       }

       html {
           scroll-behavior: smooth;
       }

       body {
           margin: 0;
           background: var(--white);
           color: var(--text);
           /* 清潔感のあるモダンなゴシック体系 */
           font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
           line-height: 1.6;
           overflow-x: hidden;
       }

       /* フェードイン */
       .fade-in {
           opacity: 0;
           transform: translateY(20px);
           transition: 1.5s ease;
       }

       .fade-in.active {
           opacity: 1;
           transform: translateY(0);
       }

       /* ヘッダー */
       header {
           background: var(--white);
           border-bottom: 3px solid var(--tsc-accent);
           padding: 1rem 2rem;
       }

       .logo {
           font-size: 1.8rem;
           letter-spacing: 0.2em;
           font-family: 'Cinzel', serif;
           text-align: center;
       }

       .logo img {
           height: 4.5rem;
           width: auto;
       }

       /* ヒーロー（スライダー） */
       .hero {
           width: 100%;
           height: auto;
           position: relative;
           overflow: hidden;
           background: #fff;
       }

       .hero-img {
           width: 100%;
           height: auto;
           display: block;
           object-fit: contain;
           /* フワッと表示させるアニメーション */
           opacity: 0;
           animation: mainImageFade 2s ease-in-out forwards;
       }

       /*
        .slide {
            position: absolute; inset: 0; background-size: cover; background-position: center;
            opacity: 0; transform: scale(1.1); transition: transform 6s linear, opacity 2s ease;
        }
        .slide.active { opacity: 1; transform: scale(1); }*/

       /* ▼ 変更後：ふわっとフェードインするシネマティックアニメーション */
       .slide {
           position: absolute;
           inset: 0;
           background-size: cover;
           background-position: center;
           opacity: 0;

           /* 3秒かけてアニメーションを実行（ forwards で終わった状態をキープ ） */
           animation: mainImageFade 3s ease-in-out forwards;
       }

       /* アニメーションの具体的な動き（既存のものを少し調整） */
       @keyframes mainImageFade {
           0% {
               opacity: 0;
               transform: scale(1.02);
               filter: blur(5px);
           }

           100% {
               opacity: 1;
               transform: scale(1);
               filter: blur(0);
           }
       }

       .hero-txt {
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           text-align: center;
           color: #fff;
           z-index: 10;
           width: 100%;
       }

       .h-title,
       .h-sub {
           text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
           font-family: "Helvetica Neue", sans-serif;
           font-weight: bold;
       }

       /* コンテンツ */
       .content {
           max-width: 1000px;
           margin: 0 auto;
           padding: 5rem 2rem 3rem;
           text-align: center;
       }

       .lead-p {
           font-size: 1.5rem;
           line-height: 2.5;
           margin-bottom: 3rem;
           color: #555;
       }

       .c-label {
           font-size: 0.9rem;
           letter-spacing: 0.2em;
           color: #bfa37e;
           display: block;
           margin-bottom: -3.5rem;
           font-family: sans-serif;
       }

       /* 大きい文字（伝統と土地の...） */
       .c-title {
           font-size: 2.5rem;
           color: #2c2c2c;
           /* 明朝体からゴシック体へ変更 */
           font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
           line-height: 1.4;
           display: block;
           font-weight: 700;
       }

       /* スマホ用の調整（画面が狭いとき用） */
       @media (max-width: 768px) {
           .c-title {
               font-size: 1.8rem;
           }

           /* スマホでは少し控えめに */
       }

       /* 部屋紹介（縦並び） */
       .room-sec {
           padding: 5rem 0;
       }

       .room-item {
           margin-bottom: 8rem;
           position: relative;
           width: 100%;
       }

       /* パララックス用コンテナ */
       .r-img-wrap {
           width: 100%;
           height: 70vh;
           overflow: hidden;
           position: relative;
       }

       /* 画像（パララックス適用） */
       .r-img {
           width: 100%;
           height: 120%;
           /* パララックス用に少し高さを確保 */
           object-fit: cover;
           display: block;
           position: absolute;
           top: -10%;
           left: 0;
           transition: transform 0.1s linear;
           /* スクロール追従 */
           will-change: transform;
       }

       .r-info {
           background: #fff;
           padding: 3rem;
           max-width: 500px;
           margin: 0 auto;
           position: relative;
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
           text-align: center;
           margin-top: -5rem;
           z-index: 2;
           /* 画像に被せる */
       }

       .r-name {
           font-family: 'Cinzel', serif;
           font-size: 2rem;
           margin-bottom: 0.5rem;
           color: #111;
       }

       .btn {
           display: inline-block;
           border-bottom: 1px solid var(--text);
           padding-bottom: 5px;
           margin-top: 1.5rem;
           text-decoration: none;
           color: var(--text);
           letter-spacing: 0.1em;
           cursor: pointer;
           transition: 0.3s;
       }

       .btn:hover {
           opacity: 0.6;
       }

       /* モーダルウィンドウ */
       .modal-overlay {
           position: fixed;
           inset: 0;
           background: rgba(0, 0, 0, 0.8);
           z-index: 2000;
           display: flex;
           justify-content: center;
           align-items: center;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.4s ease;
       }

       .modal-overlay.active {
           opacity: 1;
           pointer-events: auto;
       }

       .modal-content {
           background: #fff;
           width: 90%;
           max-width: 800px;
           max-height: 90vh;
           display: flex;
           flex-direction: column;
           overflow: hidden;
           position: relative;
           transform: translateY(20px);
           transition: transform 0.4s ease;
       }

       .modal-overlay.active .modal-content {
           transform: translateY(0);
       }

       .modal-img {
           width: 100%;
           height: 50vh;
           object-fit: cover;
           display: block;
       }

       .modal-body {
           padding: 3rem;
           overflow-y: auto;
           text-align: center;
       }

       .modal-title {
           font-family: 'Cinzel', serif;
           font-size: 2rem;
           margin: 0 0 1.5rem;
       }

       .modal-desc {
           line-height: 2;
           color: #555;
           font-size: 1rem;
           text-align: left;
       }

       .modal-close {
           position: absolute;
           top: 1rem;
           right: 1rem;
           color: #fff;
           background: rgba(0, 0, 0, 0.5);
           width: 40px;
           height: 40px;
           border-radius: 50%;
           display: flex;
           justify-content: center;
           align-items: center;
           cursor: pointer;
           font-family: sans-serif;
           font-size: 1.2rem;
           transition: 0.3s;
           z-index: 10;
       }

       .modal-close:hover {
           background: #000;
       }

       /* 事業概要 */
       .business-overview {
           background: #1a1a1a;
           color: #fff;
           padding: 5rem 2rem;
           text-align: center;
           letter-spacing: 0.1em;
       }

       .bo-title {
           font-family: 'Cinzel', serif;
           font-size: 1.5rem;
           color: var(--gold);
           margin-bottom: 2rem;
       }

       .bo-info p {
           margin: 0.8rem 0;
           font-size: 0.9rem;
           color: #ccc;
       }

       .bo-mail {
           color: #fff;
           text-decoration: none;
           border-bottom: 1px solid #555;
           padding-bottom: 2px;
       }

       /* 予約バー */
       .book-bar {
           position: fixed;
           bottom: 0;
           width: 100%;
           background: #fff;
           border-top: 1px solid #eee;
           padding: 1.5rem;
           text-align: center;
           z-index: 50;
           display: flex;
           justify-content: center;
           gap: 2rem;
           align-items: center;
           font-family: sans-serif;
           font-size: 0.8rem;
           letter-spacing: 0.1em;
           box-sizing: border-box;
       }

       .book-btn {
           background: #111;
           color: #fff;
           padding: 1rem 3rem;
           text-decoration: none;
       }

       @media (max-width: 768px) {
           header {
               padding: 1.5rem;
           }

           .logo {
               font-size: 1.4rem;
           }

           .h-title {
               font-size: 2.5rem;
           }

           .h-sub {
               font-size: 0.7rem;
           }

           .r-img-wrap {
               height: 50vh;
           }

           .r-info {
               width: 85%;
               padding: 2rem;
               margin-top: -3rem;
           }

           .book-bar {
               flex-direction: column;
               gap: 1rem;
               padding: 1rem;
           }

           .modal-body {
               padding: 2rem;
           }

           .modal-img {
               height: 40vh;
           }
       }

       /* === 新設: デザインハイライト（石垣のセクション） === */
       .highlight-sec {
           position: relative;
           width: 100%;
           height: 60vh;
           /* 高さはお好みで調整（画面の60%） */
           min-height: 400px;
           display: flex;
           justify-content: center;
           align-items: center;
           text-align: center;
           color: #fff;
           overflow: hidden;
       }

       /* 背景画像 */
       .hl-bg {
           position: absolute;
           inset: 0;
           background-size: cover;
           background-position: center;
           z-index: 1;
           transition: transform 0.5s ease-out;
           /* ちょっとした動き用 */
       }

       /* 黒いフィルター（文字を読みやすくする） */
       .hl-overlay {
           position: absolute;
           inset: 0;
           background: rgba(0, 0, 0, 0.4);
           /* 0.4の濃さで暗くする */
           z-index: 2;
       }

       /* 文字エリア */
       .hl-content {
           position: relative;
           z-index: 3;
           padding: 2rem;
           max-width: 800px;
       }

       .hl-title {
           font-family: 'Shippori Mincho', serif;
           font-size: 2.2rem;
           margin-bottom: 1.5rem;
           font-weight: 500;
           text-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
           border-bottom: 1px solid rgba(255, 255, 255, 0.5);
           /* 下線 */
           display: inline-block;
           padding-bottom: 10px;
       }

       .hl-desc {
           font-size: 1.4rem;
           line-height: 2.2;
           font-weight: 400;
           text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
       }

       /* スマホ対応 */
       @media (max-width: 768px) {
           .highlight-sec {
               height: auto;
               padding: 4rem 0;
           }

           .hl-title {
               font-size: 1.5rem;
           }

           .hl-desc {
               font-size: 0.9rem;
               text-align: left;
               padding: 0 1rem;
           }
       }

       /* === リニューアル情報セクション === */
       .renewal-wrap {
           width: 100%;
           margin-bottom: 5rem;
           margin-top: 3vw;
       }

       /* === ナビゲーションボタンのスタイル調整 === */

       .tab-nav {
           display: flex;
           justify-content: center;
           gap: 25px;
           /* ボタン同士の間隔をゆったり確保 */
           margin-bottom: 5rem;
           position: sticky;
           top: 0;
           z-index: 100;
           background: rgba(255, 255, 255, 0.95);
           padding: 20px 0;
       }

       .tab-btn {
           flex: 1;
           max-width: 220px;
           padding: 1.2rem 1rem;
           background: var(--white);
           border: 2px solid var(--tsc-accent);
           /* 富山SCの青緑色 */
           color: var(--tsc-accent);
           font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
           font-weight: 800;
           /* 文字を太くして力強く */
           font-size: 1.1rem;
           letter-spacing: 0.15em;
           /* 文字の間隔を広げて高級感を出す */
           cursor: pointer;
           border-radius: 4px;
           /* 角を少しだけ丸くしてモダンな印象に */
           transition: all 0.3s ease;

           /* ▼ メリハリを出すための影（立体感） ▼ */
           box-shadow: 0 4px 0 var(--tsc-accent);
           /* ボタンの下側に厚みを持たせる */
           position: relative;
           top: 0;
       }

       /* ホバー時の動き：ボタンを押し込むような感覚 */
       .tab-btn:hover {
           background: var(--tsc-accent);
           color: var(--white);
           top: 2px;
           /* 少し沈ませる */
           box-shadow: 0 2px 0 var(--tsc-accent);
           /* 影を薄くして押し込んだ表現に */
       }

       /* さらに強調したい場合のアクティブ状態（クリックした瞬間） */
       .tab-btn:active {
           top: 4px;
           box-shadow: none;
       }

       /* スマホ対応 */
       @media (max-width: 768px) {
           .tab-nav {
               gap: 12px;
               padding: 15px 10px;
           }

           .tab-btn {
               padding: 0.8rem 0.5rem;
               font-size: 0.9rem;
               box-shadow: 0 3px 0 var(--tsc-accent);
           }
       }

       /* 各セクションをすべて表示し、縦に並べる */
       .tab-content {
           display: block !important;
           /* 既存の none を打ち消してすべて表示 */
           padding: 5rem 2rem;
           /* スクロールした際に見やすいように上下に余白を大きめにとる */
           text-align: center;
           border-bottom: 1px dashed var(--border);
           /* セクションの区切り線 */
       }

       /* 最後の区切り線は消す */
       .tab-content:last-of-type {
           border-bottom: none;
       }

       @keyframes fadeInTab {
           from {
               opacity: 0;
               transform: translateY(10px);
           }

           to {
               opacity: 1;
               transform: translateY(0);
           }
       }

       .tab-inner {
           max-width: 1200px;
           margin: 0 auto;
       }

       /* 情報ヘッダー */
       /* === 大見出し（第1弾など）のスタイル === */
       .info-header {
           text-align: center;
           margin-bottom: 2rem;
       }

       .info-header h2 {
           display: inline-block;
           font-size: 2.2rem;
           /* サイズを大きくして存在感を出す */
           font-weight: 800;
           color: var(--tsc-accent);
           /* アクセントカラー（青緑）を適用 */
           letter-spacing: 0.1em;
           position: relative;
           padding-bottom: 15px;
           margin: 0;
       }

       /* 見出しの下に短いアクセントラインを引く装飾 */
       .info-header h2::after {
           content: '';
           position: absolute;
           bottom: 0;
           left: 50%;
           transform: translateX(-50%);
           width: 50px;
           /* ラインの長さ */
           height: 4px;
           /* ラインの太さ */
           background-color: var(--tsc-accent);
           border-radius: 2px;
       }

       .info-header p {
           font-size: 1.2rem;
           color: #555;
       }

       /* マップエリア */
       /*.map-box {
    background: #ddd;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem 0;
    font-size: 1.5rem;
    color: #666;
}*/

       .map-box {
           margin: 3rem 0;
           text-align: center;
       }

       .map-box img {
           width: 100%;
           /* スマホ等で画面幅に合わせて縮小させる */
           max-width: 900px;
           /* パソコンで見たときに大きくなりすぎないように制限 */
           height: auto;
           /* 縦横比をキープ */
           display: block;
           margin: 0 auto;
           /* 画像を真ん中に配置 */
           /* boxShadow: 0 5px 15px rgba(0,0,0,0.05);  ←もし画像に薄い影をつけたい場合はこのコメントを外してください */
       }

       /* 店舗一覧 */
       .shop-title {
           font-size: 1.5rem;
           /* 大見出しとの差をつけるために少し控えめに */
           color: #666;
           /* 色も少し落として落ち着かせる */
           font-weight: 700;
           margin-bottom: 2.5rem;
           letter-spacing: 0.1em;
           text-align: center;
       }

       .shop-grid {
           display: grid;
           grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
           /* 自動で列数を調整 */
           gap: 30px;
       }

       /* 店舗カード */
       .shop-card {
           background: var(--white);
           border: 1px solid var(--border);
           /* ... 既存のスタイル ... */
           max-width: 100%;
           /* グリッドの枠を超えないようにする */
       }

       .shop-card:hover {
           transform: none;
           box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
       }

       .sc-benefit-item,
       .sc-benefit-title {
           color: var(--tsc-accent);
           /* 特典情報もアクセントカラーで統一 */
       }


       .sc-head {
           display: flex;
           align-items: center;
           margin-bottom: 1rem;
           background: #ffffff;
           padding: 0.5rem;
       }

       .sc-logo {
           font-weight: bold;
           margin-right: 1rem;
           color: #555;
       }

       .sc-name {
           font-weight: bold;
           font-size: 1.1rem;
       }

       .sc-img {
           width: 100%;
           height: 180px;
           background: #ccc;
           /* 画像プレースホルダー */
           margin-bottom: 1rem;
       }

       /* テナント紹介テキストを左寄せにする */
       .sc-desc {
           font-size: 0.9rem;
           line-height: 1.8;
           color: #444;
           text-align: left;
           /* 中央揃えを解除して左寄せに */
           margin-bottom: 1.5rem;
       }

       /* テナント詳細ページへのリンクボタン */
       .sc-link-wrap {
           text-align: center;
           /* ボタン自体も左に寄せる */
           margin-top: 1rem;
           width: 100%;
       }

       .sc-link {
           display: inline-block;
           color: var(--tsc-accent);
           text-decoration: none;
           font-weight: 700;
           font-size: 0.9rem;
           border: 1px solid var(--tsc-accent);
           padding: 10px 30px;
           border-radius: 4px;
           transition: all 0.3s ease;
           background-color: transparent;
       }

       .sc-link:hover {
           background-color: var(--tsc-accent);
           color: var(--white);
       }

       /* 矢印アイコンなどの装飾を追加する場合 */
       .sc-link::after {
           content: " ＞";
           font-size: 0.7rem;
           margin-left: 5px;
       }

       /* オープン日ラベル（カード最上部） */
       .sc-date-label {
           display: block;
           width: fit-content;
           margin: 0 auto 15px 0;
           text-align: left;
           background: linear-gradient(135deg, var(--tsc-accent) 0%, #35828a 100%);
           color: var(--white);
           font-size: 0.9rem;
           font-weight: 900;
           padding: 6px 15px;
           border-radius: 4px;
           letter-spacing: 0.05em;
           box-shadow: 0 4px 10px rgba(64, 154, 162, 0.2);
       }

       /* ヘッダー部分を左寄せにする設定 */
       .sc-head {
           display: flex;
           align-items: center;
           justify-content: flex-start;
           /* 追加：ロゴとテキストのまとまりを左に寄せる */
           gap: 15px;
           margin-bottom: 1.2rem;
           width: 100%;
           text-align: left;
           /* 追加：ブロック内のテキストを左揃えにする */
       }

       /* テキストエリア内の要素を左に揃える */
       .sc-title-area {
           display: flex;
           flex-direction: column;
           align-items: flex-start;
           /* 追加：店名とフロア名を垂直方向で左に揃える */
           gap: 2px;
       }

       .sc-name {
           font-size: 1.2rem;
           font-weight: 700;
           color: var(--text);
           line-height: 1.2;
       }

       .sc-floor {
           font-size: 0.8rem;
           color: #888;
           font-weight: 500;
       }

       /* カード自体の調整（上部ラインをラベルに任せる場合） */
       .shop-card {
           border-top: 1px solid var(--border);
           /* ラインを細くしてラベルを際立たせる */
           padding: 1.5rem;
           /* ...既存のスタイル... */
       }

       /* スマホ用 */
       @media (max-width: 768px) {
           .sc-date-label {
               font-size: 0.85rem;
               padding: 5px 12px;
           }
       }

       /* スマホ用の微調整 */
       @media (max-width: 768px) {
           .sc-head {
               gap: 10px;
           }

           .sc-name {
               font-size: 1.1rem;
           }

           .sc-date {
               font-size: 0.8rem;
               padding: 1px 8px;
           }

           .info-header h2 {
               font-size: 1.8rem;
           }

           .shop-title {
               font-size: 1rem;
               margin-bottom: 1.5rem;
           }
       }

       /* スマホ対応 */
       @media (max-width: 768px) {
           .tab-btn {
               padding: 1rem;
               font-size: 1rem;
           }

           .sc-img {
               height: 150px;
           }

           .shop-grid {
               grid-template-columns: 1fr;
               gap: 20px;
               /* スマホでは1列にする */
           }
       }

       /* === 新フッターデザイン === */
       .footer-sec {
           background-color: #fff;
           text-align: center;
           padding: 0;
           /* エリアごとに背景を分けるため、全体の余白はリセット */
           width: 100%;
       }

       /* 上部：ロゴエリア（白背景） */
       .footer-top {
           padding: 40px 20px;
       }

       .footer-main-logo img {
           height: 40px;
           /* メインロゴの高さ */
           margin-bottom: 25px;
       }

       .footer-facility-logos {
           display: flex;
           justify-content: center;
           align-items: center;
           flex-wrap: wrap;
           gap: 20px;
           /* 施設ロゴ同士の隙間 */
       }

       .footer-facility-logos a {
           display: flex;
           align-items: center;
           justify-content: center;
           height: 40px;
           /* 枠の高さを固定して基準を作る */
           transition: opacity 0.3s ease;
       }

       .footer-facility-logos a:hover {
           opacity: 0.7;
       }

       .footer-facility-logos img {
           height: auto;
           width: auto;
           max-height: 35px;
           /* 高くなりすぎるのを防ぐ */
           max-width: 120px;
           /* 横に広がりすぎるのを防ぐ（MAROOTなどを抑える） */
           object-fit: contain;
       }

       /* 下部：グレー背景エリア */
       .footer-bottom {
           background-color: #f2f2f2;
           /* 公式に合わせた明るいグレー */
           padding: 30px 20px;
           color: #333;
           font-size: 0.8rem;
       }

       /* リンク一覧（PCでは横並び＋区切り線） */
       .footer-links {
           list-style: none;
           padding: 0;
           margin: 0 0 15px 0;
           display: flex;
           justify-content: center;
           flex-wrap: wrap;
       }

       .footer-links li {
           display: flex;
           align-items: center;
       }

       .footer-links li a {
           color: #333;
           text-decoration: none;
           padding: 0 15px;
       }

       .footer-links li a:hover {
           text-decoration: underline;
       }

       /* リンク間の区切り線（|）を自動で追加 */
       .footer-links li:not(:last-child)::after {
           content: "|";
           color: #999;
           font-size: 0.8rem;
       }

       /* 住所・電話番号 */
       .footer-info {
           margin-bottom: 15px;
       }

       .footer-info span {
           display: inline-block;
           margin: 0 10px;
       }

       /* コピーライト */
       .copyright {
           font-size: 0.75rem;
           color: #666;
       }


       .sc-logo-box {
           width: 90px;
           height: 90px;
           background: #fff;
           margin-right: 1rem;
           display: flex;
           align-items: center;
           justify-content: center;
           border: 1px solid #eee;
           flex-shrink: 0;
       }


       .sc-logo-box img {
           width: 100%;
           height: 100%;
           object-fit: contain;
           display: block;
       }


       .sc-img {
           width: 100%;
           height: 200px;
           object-fit: cover;
           display: block;
           margin-bottom: 1rem;
           background: none;
       }


       .sc-benefit {
           margin-top: 1.5rem;
           padding-top: 1rem;
           border-top: 1px dashed #eee;
           text-align: center;
       }


       .sc-benefit-title {
           font-size: 1.2rem;
           color: #a65e5e;
           font-weight: bold;
           margin: 0 0 0.8rem 0;
           display: flex;
           align-items: center;
           justify-content: center;
           gap: 10px;
       }


       .sc-benefit-title::before,
       .sc-benefit-title::after {
           content: "";
           height: 1px;
           background: #a65e5e;
           flex-grow: 1;
           max-width: 30px;
       }


       .sc-benefit-cond {
           font-size: 1.3rem;
           font-weight: bold;
           color: #444;
           margin: 0 0 0.5rem 0;
       }


       .sc-benefit-item {
           font-size: 1rem;
           font-weight: bold;
           color: #bf404c;
           margin: 0 0 0.8rem 0;
       }

       .sc-benefit-note {
           font-size: 0.75rem;
           color: #666;
           line-height: 1.6;
           margin: 0;
           text-align: center;
       }

       /* === メインビジュアルテキストアニメーション === */

       .char {
           display: inline-block;
           opacity: 0;
           animation: cinematicFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
       }

       @keyframes cinematicFadeUp {
           0% {
               opacity: 0;
               transform: translateY(15px) scale(0.98);
               filter: blur(4px);
           }

           100% {
               opacity: 1;
               transform: translateY(0) scale(1);
               filter: blur(0);
           }
       }

       /* === 店舗カードのフェードイン遅延設定（左から順に） === */

       /* 1番目のカードは遅れなし（すぐに表示） */
       .shop-grid .shop-card:nth-child(1) {
           transition-delay: 0s;
       }

       /* 2番目のカードは0.15秒遅れて表示 */
       .shop-grid .shop-card:nth-child(2) {
           transition-delay: 0.15s;
       }

       /* 3番目のカードは0.3秒遅れて表示 */
       .shop-grid .shop-card:nth-child(3) {
           transition-delay: 0.3s;
       }

       /* 4番目のカードは0.45秒遅れて表示 */
       .shop-grid .shop-card:nth-child(4) {
           transition-delay: 0.45s;
       }

       /* 5番目のカードは0.6秒遅れて表示 */
       .shop-grid .shop-card:nth-child(5) {
           transition-delay: 0.6s;
       }

       /* 6番目のカードは0.75秒遅れて表示 */
       .shop-grid .shop-card:nth-child(6) {
           transition-delay: 0.75s;
       }

       /* ※店舗が7個以上になる場合は、(7)以降を0.15sずつ増やして追加してください */

       /* === 新デザイン：ハイライト（2カラム） === */
       #design-highlights {
           max-width: 1200px;
           margin: 0 auto 5rem;
           padding: 0 2rem;
       }

       /* 2カラムの基本設定 */
       .highlight-2col {
           display: flex;
           align-items: center;
           gap: 4rem;
           /* 画像とテキストの隙間 */
           margin-bottom: 6rem;
           /* 下のコンテンツとの隙間 */
       }

       /* 偶数番目のコンテンツは、左右を逆（右に画像）にする */
       .highlight-2col:nth-child(even) {
           flex-direction: row-reverse;
       }

       /* 画像エリア */
       .hl-img-box {
           flex: 1;
           /* 半分の幅を持たせる */
           position: relative;
           overflow: hidden;
           aspect-ratio: 4 / 3;
           border-radius: 4px;
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
       }

       .hl-img-box img {
           position: absolute;
           top: -10%;
           left: 0;
           width: 100%;
           height: 120%;
           object-fit: cover;
           display: block;
           transition: transform 0.1s linear;
           will-change: transform;
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
           /* 画像に薄い影をつけて上品に */
           border-radius: 4px;
           /* 角をほんの少し丸くする（不要なら削除） */
       }

       /* テキストエリア */
       .hl-text-box {
           flex: 1;
           /* 半分の幅を持たせる */
           text-align: left;
       }

       .hl-title-2col {
           font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
           font-size: 1.8rem;
           color: #333;
           margin-bottom: 1.5rem;
           line-height: 1.4;
           border-bottom: 1px solid #ddd;
           padding-bottom: 10px;
           font-weight: 700;
       }

       .hl-desc-2col {
           font-size: 1rem;
           line-height: 2.2;
           color: #555;
       }

       /* スマホ対応（画面が狭いときは縦並びにする） */
       @media (max-width: 768px) {

           .highlight-2col,
           .highlight-2col:nth-child(even) {
               flex-direction: column;
               /* 縦並びにする */
               gap: 2rem;
               margin-bottom: 4rem;
           }

           .hl-img-box,
           .hl-text-box {
               width: 100%;
               /* 横幅いっぱいに広げる */
           }

           .hl-title-2col {
               font-size: 1.5rem;
           }

           .footer-facility-logos {
               gap: 20px;
           }

           .footer-facility-logos a {
               height: 30px;
           }

           .footer-facility-logos img {
               max-height: 25px;
               max-width: 90px;
           }

           .footer-links {
               flex-direction: column;
               /* スマホではリンクを縦並びに */
               gap: 10px;
           }

           .footer-links li:not(:last-child)::after {
               display: none;
               /* 縦並びの時は区切り線を消す */
           }

           .footer-info span {
               display: block;
               margin: 5px 0;
           }
       }

       .highlight-2col:nth-child(2) .hl-title-2col {
           color: #348a90;
           border-bottom-color: #348a90;
           /* 下線（ボーダー）も同じ色に合わせると統一感が出ます */
       }

       /* 3番目のブロック（MAROOT）の見出しをブルーに */
       .highlight-2col:nth-child(3) .hl-title-2col {
           color: #005ce7;
           border-bottom-color: #005ce7;
           /* 下線（ボーダー）も同じ色に合わせると統一感が出ます */
       }

       /* === 富山初出店バッジの配置調整（店名の上） === */

       .sc-name {
           display: flex;
           flex-direction: column;
           /* 縦並びに変更 */
           align-items: flex-start;
           gap: 6px;
           /* バッジと店名の間の余白 */
           font-size: 1.2rem;
           font-weight: 700;
           color: var(--text);
           line-height: 1.2;
       }

       .sc-badge {
           display: inline-block;
           background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
           color: #ffffff;
           font-size: 0.7rem;
           /* 上に配置するので、少しだけ小ぶりに調整 */
           font-weight: bold;
           padding: 2px 10px;
           border-radius: 4px;
           /* 丸みよりも少し角を残したタグ風のデザインに変更 */
           letter-spacing: 0.05em;
           line-height: 1.4;
           box-shadow: 0 2px 4px rgba(255, 75, 43, 0.2);
       }

       /* スマホ用の微調整 */
       @media (max-width: 768px) {
           .sc-badge {
               font-size: 0.7rem;
               padding: 3px 8px;
           }
       }