@charset "utf-8";

/* =========================================
   ゆめいろぱれっと：クリーンアップ・最終安定版
   - PC：1024pxストッパー / 支援カード見切れ許容
   - スマホ：1列・中央揃えレスポンシブ
   - デザイン：右下はみ出し画像 / 虹色ロゴ / 固定ボタン
========================================= */

:root {
  --font-hero: 'YAFdJuA0uX4_0', 'Zen Maru Gothic', 'M PLUS Rounded 1c', sans-serif;
  --col-brown: #683E38;
  --col-shadow: #FFCFC3;
  --col-green: #ABCF52;
  --col-dekita: #F64823;
  
  --c1: #FF6D94; --c2: #FF8200; --c3: #FFB803; --c4: #ABCF52;
  --c5: #71A4EC; --c6: #945DFF; --c7: #FF6BFE; --c8: #FF0000;

  --fs-47: clamp(26px, 5.5vw, 55px); 
  --fs-60: clamp(34px, 7vw, 75px); 
  --fs-bottom: clamp(26px, 6.5vw, 75px); 
}

/* -----------------------------------------
   1. 共通・ベース設定（改行対策含む）
----------------------------------------- */
html {
  scroll-padding-top: 120px !important; 
  scroll-behavior: smooth;
}

body {
  word-break: normal !important;      /* 強制的な単語分割を禁止 */
  overflow-wrap: break-word !important; /* 長すぎる単語は折り返す */
  text-align: left !important;        /* 自然な左揃え */
}

/* 改行禁止ユーティリティ */
.no-break {
  white-space: nowrap !important;
  display: inline-block !important;
}

/* -----------------------------------------
   2. メインビジュアルエリア（Hero）
----------------------------------------- */
#header.ultimate-hero {
  background-color: #FFFFF8 !important;
  padding: 80px 0 60px 0 !important;
  font-family: var(--font-hero) !important;
  position: relative !important;
}

.hero-canvas {
  width: 100% !important;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-text-top { margin-top: 10px !important; margin-bottom: 5px !important; text-align: center; }
.hero-sub-title { color: var(--col-brown) !important; font-size: calc(var(--fs-47) * 0.7) !important; font-weight: 700 !important; margin: 0 !important; }
.hero-main-logo { font-size: var(--fs-60) !important; font-weight: 700 !important; line-height: 1.0 !important; margin: 0 !important; }
.hero-main-logo span { display: inline-block; text-shadow: 2px 2px 0 var(--col-shadow) !important; }

.hero-vertical-group { position: absolute; top: 0px; right: 5%; display: flex; flex-direction: row; gap: 10px !important; align-items: flex-start; z-index: 50; }
.v-box { writing-mode: vertical-rl; background-color: var(--col-green) !important; color: #fff !important; font-size: var(--fs-47) !important; font-weight: 700 !important; padding: 20px 12px !important; white-space: nowrap; }
.v-box-dark { margin-top: 180px !important; } 

.hero-main-logo .c1 { color: var(--c1) !important; } .hero-main-logo .c2 { color: var(--c2) !important; }
.hero-main-logo .c3 { color: var(--c3) !important; } .hero-main-logo .c4 { color: var(--c4) !important; }
.hero-main-logo .c5 { color: var(--c5) !important; } .hero-main-logo .c6 { color: var(--c6) !important; }
.hero-main-logo .c7 { color: var(--c7) !important; } .hero-main-logo .c8 { color: var(--c8) !important; }

/*
.hero-photo-frame { width: 60% !important; max-width: 700px; aspect-ratio: 1 / 1 !important; border-radius: 0% !important; overflow: hidden; }
.hero-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
*/

.hero-text-bottom { margin-top: 20px !important; text-align: center; color: var(--col-brown) !important; position: relative; z-index: 5; }
.bottom-line { font-size: calc(var(--fs-bottom) * 0.7) !important; font-weight: 700 !important; line-height: 1.5 !important; position: relative; z-index: 10; }
.bottom-line span { color: var(--col-dekita) !important; font-weight: 900 !important; }

.hero-palette-illust {
  position: absolute; top: 40px !important; bottom: 20px !important;
  right: 2% !important; width: clamp(100px, 25vw, 200px);
  transform: none !important; z-index: -1; opacity: 0.9; margin-right: -20%;
}

/* -----------------------------------------
   3. 特徴リスト
----------------------------------------- */
.feature-list {
  list-style: none; padding: 0; margin: 0 0 80px 40% !important; 
}

.feature-list li {
  font-size: 20px; font-weight: 500; color: var(--col-brown); margin-bottom: 30px;
  display: flex; align-items: center;
}

.feature-list li span {
  width: 46px; height: 46px; position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; margin-right: 3px !important;
}

.feature-list li span::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1; opacity: 0.35;
  border-radius: 60% 40% 50% 50% / 50% 50% 40% 60%;
}

.feature-list li:nth-child(1) span::before { background-color: var(--c1); }
.feature-list li:nth-child(2) span::before { background-color: var(--c2); }
.feature-list li:nth-child(3) span::before { background-color: var(--c3); }
.feature-list li:nth-child(4) span::before { background-color: var(--c4); }
.feature-list li:nth-child(5) span::before { background-color: var(--c5); }

/* -----------------------------------------
   4. 支援内容（カード・画像・グリッド）
----------------------------------------- */
.support-grid {
  display: flex; flex-wrap: wrap; gap: 25px; max-width: 1000px; margin: 0 auto;
}

.support-card {
  position: relative !important; background-color: #FFF9E1;
  padding: 30px 20px !important; border-radius: 15px;
  text-align: center !important; overflow: visible !important;
}

.support-card .card-title {
  margin-bottom: 15px; font-weight: bold; padding: 0 50px !important;
}

.support-card .card-text {
  text-align: left; padding: 0 10px !important;
}

.support-card-img {
  position: absolute !important; right: -10px !important; bottom: -10px !important;
  width: 80px !important; z-index: 10 !important; top: auto !important; transform: none !important; margin: 0 !important;
}

.support-card-img img {
  width: 100%; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  background-color: #fff; padding: 3px;
}

/* --- 5領域ボタン：共通の中央揃え設定 --- */
.concept-btn {
    display: flex !important;       /* 中身（ボタン）を整列させる土俵を作る */
    justify-content: center !important; /* 横方向の真ん中に寄せる */
    align-items: center !important;
    width: 100% !important;         /* 親要素の幅いっぱいに広げてセンターの基準を作る */
    margin-top: 80px !important; 
    margin-bottom: 40px !important;
    position: relative !important;
}

.btn03 {
    padding: 20px 60px !important;
    display: inline-block !important; /* text-alignやflexの影響を受けるようにする */
    text-align: center !important;
}

/* -----------------------------------------
   5. プログラム・タイトル（虹アイコン）
----------------------------------------- */
.title-container {
  position: relative; display: inline-block;
}

.title-niji {
  position: absolute; top: 10%; transform: translateY(-50%);
  right: -15px; width: 45px; z-index: 1;
}

/* -----------------------------------------
   6. セクション余白・アンカー調整
----------------------------------------- */
/* 施設概要セクションへのジャンプ位置を個別に調整 */
#facility {
    /* scroll-padding-top ではなく scroll-margin-top を使います */
    scroll-margin-top: -90px !important; 
}
/* お問い合わせセクション */
#contact {
    /* scroll-padding-top ではなく scroll-margin-top を使います */
    scroll-margin-top: -40px !important; 
}
#facility.inner, #contact.apply-section {
  padding-top: 0 !important; margin-top: 0 !important;
}

#facility .page-wrap, #contact.apply-section {
  display: block !important; min-height: auto !important;
}

#facility .sec-header, #contact h3 {
  margin-top: 0 !important; padding-top: 40px !important;
}

.facility-card { position: relative; }
.facility-hand-img {
  position: absolute; top: -50px; right: -30px;
  width: 120px; z-index: 5; transform: rotate(15deg); pointer-events: none;
}

/* -----------------------------------------
   7. 共通パーツ（表・スタンプ・ボタン・スケジュール）
----------------------------------------- */
.usage-table { width: 100%; border-collapse: collapse; background-color: #fff; border: 1px solid #704d3d; }
.usage-table th, .usage-table td { border: 1px solid #704d3d; padding: 15px 5px; text-align: center; font-weight: bold; }

/* --- スケジュール表の微調整（index.htmlから移行） --- */
.schedule-card { position: relative; overflow: hidden; }

.schedule-body {
  padding-left: 2px !important;
  padding-right: 2px !important;
}

.timeline {
  margin-left: 0 !important; /* 左の隙間を削除 */
  position: relative;
}

.timeline::before {
  left: 3.8rem !important; /* 時間の幅に合わせて調整 */
}

.timeline-item { position: relative; }

.timeline-item::after {
  left: 3.8rem !important; /* 線と同じ位置に */
}

.time-pill, .time-pill-none {
  min-width: 3.0rem !important; /* 幅を縮小 */
  text-align: right !important;
  margin-right: 10px !important; /* 線との距離 */
  display: inline-block;
}

.schedule-stamp { position: absolute; bottom: 20px; right: 30px; width: 100px; pointer-events: none; opacity: 0.9; }



/* --- ハンバーガーメニュー：デザインと配置（共通） --- */
.openbtn {
  position: absolute;
  top: 50%;                 /* ヘッダーの縦中央 */
  transform: translateY(-50%);
  right: 15px;
  width: 50px;
  height: 50px;
  cursor: pointer;
  z-index: 9999;
}

/* ★ここが重要：三本線をCSSで描く設定 */
.openbtn span {
  display: inline-block;
  position: absolute;
  left: 10px;
  width: 30px;
  height: 4px;             /* 線の太さ（3〜4pxが推奨） */
  border-radius: 2px;
  background: #131313 !important; /* 線の色を「白」に指定 */
  transition: all .4s;
}

/* 1本目・2本目・3本目の縦位置固定 */
.openbtn span:nth-of-type(1) { top: 15px; }
.openbtn span:nth-of-type(2) { top: 25px; }
.openbtn span:nth-of-type(3) { top: 35px; }

/* -----------------------------------------
   A. PC版：1024pxストッパー（1024px以上）
----------------------------------------- */
@media screen and (min-width: 768px) {

    /* PCメニューを表示 */
    .sh-row-bottom { display: flex !important; }
    
    /* PCではハンバーガーを絶対に隠す */
    .openbtn { display: none !important; }




    /* 1. 【重要】1024pxの強制制限を解除（メニューが外に押し出されるのを防ぐ） */
    body, #container, #header, #footer { 
        min-width: auto !important; 
        width: 100% !important;
    }

    /* 2. PC用メニューを「どんな時も」表示し、ハンバーガーを隠す */
    .sh-row-bottom { 
        display: flex !important; 
        visibility: visible !important;
        opacity: 1 !important;
    }
    .openbtn { 
        display: none !important; 
    }

    /* 2. ヘッダー（メニュー）周り */
    .sticky-header { height: 80px !important; width: 100% !important; }
    .sh-inner { 
        flex-direction: column !important; 
        padding: 0 20px !important; 
        justify-content: flex-start !important; 
        gap: 0 !important; 
    }
    .sh-row-top, .sh-row-bottom { display: flex !important; width: 100%; height: 40px !important; align-items: flex-end; }
    .sh-row-top { justify-content: space-between; }
    
    .sh-brand { flex-shrink: 0 !important; }
    .sh-brand img { height: 40px !important; width: auto !important; max-width: none !important; object-fit: contain !important; }


    
    
    /* 3. メインビジュアル（Hero）エリア */
    #header.ultimate-hero {
        position: relative !important;
        min-height: 800px !important; 
        width: 100% !important;
        overflow: hidden !important;
    }

    /* 背景写真：画面全体に広げるが、中身は伸ばさない */
    .hero-visual-center {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
    }

    /* キャンバス：ロゴなどは中央、縦BOXは右端へ寄せる土台 */
    .hero-canvas {
        position: relative !important;
        width: 100% !important;
        max-width: none !important;    /* 制限を解除して画面いっぱいに */
        margin: 0 !important;
        padding: 0 !important;
        left: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* ロゴなどは中央 */
        z-index: 10 !important;
    }


    .hero-photo-frame {
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important; /* PCは角を丸くしない */
    }

    .hero-photo-frame img {
        width: 100% !important;
        height: 100% !important;
        
        /* 【重要】ここがポイント：比率を保ったまま、枠いっぱいに表示（はみ出しは自動カット） */
        object-fit: cover !important; 
        
        border-radius: 0 !important;
        clip-path: none !important;
    }

    /* 縦書きBOX：右端に配置 */
    .hero-vertical-group {
        position: absolute !important;
        top: 40px !important; 
        right: -250px !important; /* 画面右端からの距離 */
        z-index: 110 !important;
        display: flex !important;
        gap: 12px !important;
    }
    .v-box {
        font-size: 36px !important;
        letter-spacing: 0.2em !important;
        margin-top: -100px !important;

        /* --- 追加：左右の余白で幅感を出す --- */
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
    .v-box-dark { margin-top: 30px !important; } 

    /*一人ひとりの・・*/
    .bottom-line {
        font-size: calc(var(--fs-bottom) * 0.4) !important;
        font-weight: 700 !important;
        line-height: 1.5 !important;
        position: relative;
        z-index: 10;
        color: beige !important;

        /* --- 追加：マイナスの数値で上に移動 --- */
        top: -200px !important; /* もっと上にしたい場合は -40px などに調整してください */
    }



    /* タイトルとサブタイトル：前面に出して位置を調整 */
    .hero-text-top {
        position: relative !important;
        z-index: 20 !important;
        margin-top: 50px !important; /* ロゴとの間隔 */
    }

    .hero-text-bottom {
        position: relative !important;
        z-index: 20 !important;
        margin-top: 350px !important; /* 写真の中央付近まで押し下げる（ここが配置の鍵） */
        text-align: center;
    }


    /* パレットの位置をさらに下に沈める */
    .hero-palette-illust {
        position: absolute !important;
        
        /* 1. 上（top）のネジを外して「自動」にするのが最大のポイント */
        top: auto !important; 
        
        /* 2. 下（bottom）からの位置だけで制御する */
        /* マイナスの値にするほど、画面の下端からはみ出して沈んでいきます */
        bottom: -40px !important; 
        
        /* 3. margin-bottom は削除（絶対配置では不要です） */
        
        width: 150px !important;
        right: 0% !important;
        transform: none !important;
        z-index: -1 !important;
    }

    

    /* 4. その他パーツ調整 */
    .sh-tel-info .tel-number { font-size: 19px !important; color: #5BAE67 !important; text-decoration: none; }
    .sh-row-bottom { justify-content: center !important; position: relative !important; align-items: flex-start !important; }
    .sh-header-btn { position: absolute !important; right: 0; background-color: #f39800 !important; color: #fff !important; padding: 5px 18px !important; border-radius: 50px !important; font-size: 13px !important; }

    .support-grid { min-width: 1000px !important; justify-content: center; display: flex !important; gap: 25px; }
    .support-card { flex: 0 0 calc(50% - 15px) !important; min-width: 480px !important; }

    .usage-car-img { position: absolute; width: 160px !important; top: -100px; right: 12%; z-index: 10; }
    .concept-intro { width: 80% !important; margin: 0 auto 60px !important; line-height: 2.0; text-align: center; }

    .openbtn, #page-top.fixed-inquiry { display: none !important; }

    /* 5. その他支援セクションの広幅化 */
    .inner.bg-pale {
        max-width: 1200px !important; 
        width: 95% !important;
        margin: 0 auto !important;
        padding: 0 10px !important;
    }

    .flow-box {
        width: 100% !important;
        background: #fff; 
        border-radius: 16px; 
        padding: 2.5rem !important; 
        margin-bottom: 2rem;
        box-shadow: 0 5px 15px rgba(0,0,0,0.03);
        border-left: 5px solid var(--col-green);
    }

    .feature-list {
        margin-left: 36% !important; /* 中央(50%)から30%左にずらした位置 */
        margin-top: 0;
        margin-bottom: 80px;
    }
}


/* -----------------------------------------
   B. スマホ版：レスポンシブ（768px以下）
----------------------------------------- */
@media screen and (max-width: 768px) {


    /* PCメニューを隠す */
    .sh-row-bottom { display: none !important; }

    /* スマホでハンバーガーを表示 */
    .openbtn { display: block !important; }

    

    /* 1. PC用メニューを隠し、ハンバーガーを「どんな時も」表示する */
    .sh-row-bottom { 
        display: none !important; 
    }
    .openbtn { 
        display: block !important; 
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 9999 !important; /* 他の要素に隠されないように */
    }

    /* 固定問い合わせボタンを表示 */
    #page-top.fixed-inquiry {
        display: block !important;
    }

    /* タイトルロゴ */
    .sh-brand {
        flex-shrink: 0 !important; /* スマホの狭い画面でも潰させない */
    }

    .sh-brand img {
        height: 35px !important;   /* スマホに合わせて少し高さを調整（任意） */
        width: auto !important;     /* 比率を維持 */
        max-width: none !important;
        object-fit: contain !important;
    }

    .hero-photo-frame {
        border-radius: 80px !important; /* ここで角を丸くする */
        overflow: hidden !important;    /* はみ出た画像を切り取る */
    }

    .hero-photo-frame img {
        content: url("../imgsaya/girl-s.webp") !important; 
        width: 90% !important;
        height: 100% !important;
        object-fit: cover !important;
        
        /* --- 強制的に角を丸く切り抜く --- */
        clip-path: inset(0% round 100px) !important;
    }


    /* 1. 親要素：ここを基準点（座標の0地点）にする */
    .hero-canvas {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* 2. 画像：画面いっぱいに広げ、最背面へ */
    .hero-visual-center {
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        position: relative !important;
        z-index: 1 !important; /* 背面 */
    }

    .hero-photo-frame {
        width: 95% !important;
        margin: 0 auto !important;
    }

    /* 3. 縦BOX：画像の上に「浮かせて」配置 */
    .hero-vertical-group {
        position: absolute !important; /* 画像の上に浮かせる */
        top: 20px !important;        /* 画像の上端からの距離 */
        right: 5% !important;        /* 右端からの距離 */
        z-index: 50 !important;       /* 画像(z-index:1)より大きい数字で前面へ */
        
        display: flex !important;
        flex-direction: row;
        gap: 5px !important;
    }

    /* 4. 下の文章：画像の下に自然に続くように配置 */
    .hero-text-bottom {
        position: relative !important;
        z-index: 10 !important;
        /* 画像が absolute ではないので、margin-top は画像の下からの距離になります */
        margin-top: 20px !important; 
    }

    /*ゆめいろぱれっとの直腸*/
    /* 1. リスト全体の配置：左端から10%空けて、右側のスペースを確保 */
    .feature-list {
        margin-left: 10% !important;
        margin-right: 5% !important;
        margin-top: 30px !important;
        margin-bottom: 60px !important;
        padding-left: 0 !important;
        width: auto !important;
        max-width: 90% !important;
        list-style: none !important;
        display: block !important;
    }

    /* 2. 各行の設定：文章が2行になってもアイコンがズレないように調整 */
    .feature-list li {
        font-size: 17px !important; /* スマホで読みやすいサイズ */
        margin-bottom: 25px !important;
        line-height: 1.5 !important;
        display: flex !important;
        align-items: flex-start !important; /* アイコンを上揃えにする */
        text-align: left !important;
    }

    /* 3. 丸いアイコンの設定：潰れを防止 */
    .feature-list li span {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important; /* 画面が狭くなっても楕円にならないように固定 */
        font-size: 16px !important;
        margin-right: 12px !important;
        flex-shrink: 0 !important;   /* 圧縮を禁止して正円を保つ */
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }


    /* パレットの位置をさらに下に沈める */
    .hero-palette-illust {
        position: absolute !important;
        
        /* 1. 上（top）のネジを外して「自動」にするのが最大のポイント */
        top: auto !important; 
        
        /* 2. 下（bottom）からの位置だけで制御する */
        /* マイナスの値にするほど、画面の下端からはみ出して沈んでいきます */
        bottom: -40px !important; 
        
        /* 3. margin-bottom は削除（絶対配置では不要です） */
        
        width: 150px !important;
        right: 0% !important;
        transform: none !important;
        z-index: -1 !important;
    }

    /*縦書き*/
    .v-box { 
        font-size: 1.2rem !important; 
        padding: 4px 2px !important; 
        padding-top: 20px !important; 
        letter-spacing: 0.2em !important; /* 0.1em〜0.3emくらいで調整してみてください */
    }
    

    /**/
    .sticky-header { height: 60px !important; }
    .sh-inner { flex-direction: row !important; height: 60px !important; }
    .sh-row-bottom, .sh-pc-contact, .sh-header-btn { display: none !important; }
    
    /*ゆめいろぱれっとの直腸*/
    .concept-intro { width: 90% !important; margin: 0 auto 60px !important; }


    #page-top.fixed-inquiry {
        position: fixed !important; right: 15px !important; bottom: 85px !important; z-index: 9999 !important;
        display: block !important; width: auto !important; height: auto !important;
    }
    #page-top.fixed-inquiry a {
        background-color: #f39800 !important; color: #fff !important; padding: 12px 20px !important;
        border-radius: 50px !important; font-weight: 700; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        display: block !important; white-space: nowrap; text-decoration: none;
    }

    /**/
    .support-grid { flex-direction: column !important; }
    .support-card { flex: 1 1 100% !important; padding: 25px 15px !important; }
    .support-card .card-title, .support-card .card-text { padding: 0 40px !important; }
    .support-card-img { width: 65px !important; right: -5px !important; bottom: -5px !important; }

    /**/
    .usage-car-img { position: absolute !important; right: 5% !important; width: 100px !important; top: -55px !important; }
    .facility-hand-img { width: 80px; top: -40px; right: -10px; }
    .title-niji { width: 35px; right: -40px; }
    .concept-btn { margin-top: 110px !important; }

    /*その他支援*/
    /* .flow-box を囲っているクラス名に合わせて調整してください */
    .inner.bg-pale {
        width: 100% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    .flow-box {
        padding: 1rem !important; /* スマホでは内側の余白をスリムに */
    }
}



/*****************************************************************************************************************************************/
/* 5領域画面の専用設定            */
/*****************************************************************************************************************************************/
/* =========================================
   5領域画面専用（.page-5ryouiki）調整
   ========================================= */

/* --- 1. ヘッダー被り解消・背景設定 --- */
.page-5ryouiki #header {
    padding-top: 100px !important;
    padding-bottom: 60px !important;
    background-color: #FFFCF0 !important;
    width: 100% !important;
}

/* --- 2. キャッチコピーの配置安定化 --- */
.page-5ryouiki #header .main-catch {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    margin: 0 auto !important;
}

/* --- 3. タイトルエリア・デザイン統合 --- */
.page-5ryouiki .sub-hero-title-area {
    padding: 20px 40px !important;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50px;
    border: 3px dashed var(--col-shadow);
    display: inline-block;
    margin: 20px 0;
}

.page-5ryouiki .domain-page-title-style {
    color: var(--col-brown) !important;
    font-family: var(--font-hero) !important;
    font-weight: 900 !important;
    margin: 0 !important;
    text-shadow: 2px 2px 0 #fff !important;
}

/* --- 4. メインタイトル（5領域） --- */
.page-5ryouiki .subpage-main-title {
    text-align: center !important;
    font-family: 'Zen Maru Gothic', sans-serif !important;
    font-weight: 900 !important;
    color: #5a3f2e !important;
    font-size: 2rem !important;
    line-height: 1.3 !important;
    margin: 120px auto !important;
    text-shadow: 
        3px 3px 0 #fff, -3px -3px 0 #fff,
        3px -3px 0 #fff, -3px 3px 0 #fff,
        0 3px 0 #fff,  0 -3px 0 #fff,
        3px 0 0 #fff, -3px 0 0 #fff !important;
}

.page-5ryouiki .subpage-main-title .sub-line {
    font-size: 2.2rem !important;
    display: block;
    margin-top: 10px;
}

/* --- 5. 各パーツのサイズ・表示調整 --- */
.page-5ryouiki .hero-vertical-group {
    display: none !important; /* 5領域画面では縦書きBOXを隠す */
}

.page-5ryouiki .hero-visual-center {
    margin-bottom: 30% !important;
}

.page-5ryouiki .hero-sub-title {
    font-size: 0.8rem !important;
}

.page-5ryouiki .hero-main-logo {
    font-size: 1.5rem !important;
}

.page-5ryouiki .bottom-line {
    font-size: 1.2rem !important;
}

.page-5ryouiki .hero-text-bottom {
    font-size: 0.5rem !important;
}

.page-5ryouiki .inner {
    margin-bottom: 50px !important;
}

/* --- 6. スマホ版レスポンシブ（768px以下） --- */
@media screen and (max-width: 768px) {
    .page-5ryouiki #header {
        padding-top: 80px !important;
        /* padding-bottom は削除してもOKです */
        min-height: 100vh !important; /* 画面の高さ分、最低でも確保する */
        display: flex;
        flex-direction: column;
        justify-content: center; /* 中身を中央に寄せてバランスを取る */
    }

    .page-5ryouiki .sub-hero-title-area {
        padding: 15px 20px !important;
        width: 90% !important;
    }
    
    /* 縦書きグループはPC版でdisplay:noneですが、万一表示する場合の保険 */
    .page-5ryouiki .hero-vertical-group {
        display: none !important;
        top: -30px !important;
    }

    .page-5ryouiki .subpage-main-title {
        font-size: 1.8rem !important;
        margin: 30px auto !important;
    }

    .page-5ryouiki .subpage-main-title .sub-line {
        font-size: 1.5rem !important;
    }
}
/* END 5領域 **************************************************************************************************************/