/* =========================================================
   index.css
   ベース：ユーザー指定の index.html（2026-05-08アップロード）

   重要：このCSSは「見た目を変えるために作り直したもの」ではありません。
   元の index.html 内にあった <style> の中身を外部ファイル化したものです。

   変更した点：
   ・画像パスだけ、CSSフォルダから見えるように ../assets/images/... に調整
   ・VSCで分かりやすいように説明コメントを追加

   よく触る場所：
   ・サイト全体の色       → :root の --bg / --text / --accent
   ・書体                 → body の font-family
   ・トップ画像           → .hero の url("../assets/images/...")
   ・ヒーロー文字サイズ   → .hero h1 / .hero-label-ja
   ・お問い合わせ部分     → .contact-card / .contact-btn
   ・スマホ表示           → @media (max-width:640px)
========================================================= */

    /* ===== サイト全体の基本設定：色・横幅・影など ===== */
:root{
      --bg:#f4f4f1;
      --bg-soft:#ecece7;
      --card:#ffffff;
      --text:#222222;
      --muted:#666666;
      --line:#ddddd7;
      --accent:#314847;
      --shadow:0 12px 30px rgba(0,0,0,0.08);
      --max:1180px;
    }

    *{box-sizing:border-box;}
    html{scroll-behavior:smooth;}
    /* ===== 基本文字・背景：書体変更は font-family を編集 ===== */
body{
      margin:0;
      font-family:"Yu Gothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
      color:var(--text);
      background:var(--bg);
      line-height:1.75;
    }

    /* ===== リンク共通設定：下線なし・文字色は親要素に合わせる ===== */
a{
      color:inherit;
      text-decoration:none;
    }

    /* ===== 横幅の共通設定：ページ全体の最大幅を管理 ===== */
.container{
      width:min(100% - 32px, var(--max));
      margin:0 auto;
    }

    /* ===== セクション共通余白：上下の余白を調整する場所 ===== */
.section{
      padding:48px 0;
    }

    /* ===== セクション見出し：h2タイトルの文字サイズなど ===== */
.section-title{
      margin:0 0 12px;
      font-size:32px;
      line-height:1.35;
    }

    .section-lead{
      margin:0 0 28px;
      color:var(--muted);
    }

    /* =========================================================
   ヘッダー
   画面上部に固定されるナビゲーション部分です。
   高さや背景色を変える場合はこの周辺を編集します。
========================================================= */
.topbar{
      position:sticky;
      top:0;
      z-index:1000;
      background:rgba(244,244,241,0.96);
      backdrop-filter:blur(12px);
      border-bottom:1px solid var(--line);
    }

    .topbar-inner{
      min-height:44px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }

    .brand{
      flex-shrink:0;
    }

    .brand-link{
      display:flex;
      align-items:center;
      gap:10px;
    }

    /* ロゴ画像サイズ：大きくしたい場合は height を変更 */
.brand-logo{
      height:34px;
      width:auto;
      display:block;
      object-fit:contain;
      border-radius:6px;
    }

    .brand span{
      font-size:13px;
      font-weight:700;
      line-height:1.2;
    }

    /* ナビゲーション：PCでは横並び、スマホでは非表示 */
.nav{
      display:none;
      gap:12px;
      align-items:center;
      flex-wrap:wrap;
    }

    .nav a{
      color:var(--muted);
      font-size:10px;
    }

    .nav a:hover{
      color:var(--text);
    }

    /* =========================================================
   ボタン共通設定
   角丸・高さ・余白などを管理します。
   全体のボタンの雰囲気を変える場合はここです。
========================================================= */
.btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:52px;
      padding:0 26px;
      border-radius:20px;
      border:1px solid transparent;
      font-weight:700;
      transition:0.2s ease;
    }

    .btn:hover{
      transform:translateY(-1px);
    }

    /* メインボタン：緑色の重要ボタン */
.btn-primary{
      background:linear-gradient(135deg, var(--accent) 0%, #1e3a32 100%);
      color:#fff;
      box-shadow:0 10px 28px rgba(49,71,71,0.4);
    }

    /* サブボタン：ヒーロー上の白枠ボタン */
.btn-secondary{
      background:rgba(255,255,255,0.15);
      color:#fff;
      border-color:rgba(255,255,255,0.4);
      backdrop-filter:blur(10px);
    }

    .btn-muted{
      background:#f0f0eb;
      color:var(--muted);
      border-color:var(--line);
      cursor:default;
    }

    /* ===== トップのメイン画像エリア：写真パスは url(...) を編集 ===== */
/* =========================================================
   ヒーローエリア
   トップページ最上部の大きい写真部分です。

   背景画像を変更する場合：
   url("../assets/images/assets_images_hero-sauna.png") の画像名を変更します。

   画像は assets/images/ フォルダに入れてください。
========================================================= */
.hero{
      position:relative;
      min-height:80vh;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      color:#fff;
      background:
        linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.1)),
        url("../assets/images/assets_images_hero-sauna.png") center center/cover no-repeat;
    }

    /* ヒーロー画像の上にかける暗いグラデーション。文字を読みやすくするためのものです。 */
.hero::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%);
      pointer-events:none;
    }

    /* ヒーロー内の文字ブロック位置・横幅・余白 */
.hero-inner{
      position:relative;
      z-index:1;
      width:min(100% - 32px, var(--max));
      margin:0;
      padding:100px 16px 60px;
      max-width:100%;
      text-align:center;
    }


/* 会社名の表示：ヒーロー最上部の小さめ文字 */
.hero-company-name{
  margin:0 0 10px;
  font-size:clamp(15px, 1.6vw, 20px);
  font-weight:700;
  line-height:1.35;
  letter-spacing:0.08em;
  color:rgba(255,255,255,0.92);
  text-shadow:0 14px 34px rgba(0,0,0,0.35);
  white-space:nowrap;
}

    /* 「北欧系サウナ機器の修理・点検・保守」の文字 */
.hero-label-ja{
      margin:0 0 18px;
      font-size:clamp(22px, 2.2vw, 30px);
      font-weight:800;
      line-height:1.3;
      color:#fff;
      letter-spacing:0.03em;
    }

    .hero-kicker{
      margin:0 0 24px;
      font-size:clamp(13px, 1.2vw, 17px);
      letter-spacing:0.18em;
      text-transform:none;
      color:rgba(255,255,255,0.82);
    }

    /* ===== ヒーローの一番大きい見出し：文字サイズは font-size を編集 ===== */
/* メインキャッチコピー。文字サイズを変えるなら font-size を調整 */
.hero h1{
      margin:0 0 14px;
      max-width:100%;
      font-size:clamp(20px, 5vw, 40px);
      line-height:1.15;
      letter-spacing:0.02em;
      text-shadow:0 24px 56px rgba(0,0,0,0.4);
      text-align:center;
      white-space:nowrap;
    }

    /* ヒーロー内の補足タイトル */
.hero-subtitle{
      margin:0 0 22px;
      font-size:clamp(15px, 2.5vw, 21px);
      font-weight:700;
      letter-spacing:0.06em;
      color:rgba(255,255,255,0.96);
    }

    /* 「故障で止めない運営を支える。」の文字 */
.hero-copy{
      margin:0 0 18px;
      max-width:100%;
      font-size:clamp(18px, 1.8vw, 24px);
      line-height:1.6;
      color:rgba(255,255,255,0.92);
      text-align:center;
    }

    /* ヒーロー説明文 */
.hero-description{
      margin:0 0 32px;
      max-width:560px;
      font-size:clamp(15px, 1.4vw, 18px);
      line-height:1.8;
      color:rgba(255,255,255,0.92);
      text-align:center;
    }

    /* ヒーロー内のボタン配置 */
.hero-actions{
      display:flex;
      gap:12px;
      flex-direction:column;
      align-items:center;
      margin-bottom:32px;
    }

    .hero-note{
      font-size:14px;
      color:rgba(255,255,255,0.84);
      margin-top:20px;
    }

    /* =========================================================
   グリッド・カード共通
   サービスカード、実績カード、保守カードなどの並びを管理します。
========================================================= */
.grid-3,
    .grid-2,
    .service-list,
    .result-list,
    .faq,
    .check-list,
    .flow{
      display:grid;
      grid-template-columns:1fr;
      gap:22px;
    }

    /* 白いカード共通設定：背景・角丸・影 */
.card,
    .service-item,
    .result-item,
    details,
    .mini-company,
    .flow-item,
    .check-item{
      background:#fff;
      border:1px solid var(--line);
      border-radius:24px;
      box-shadow:var(--shadow);
    }

    .card,
    .service-item,
    .mini-company{
      padding:28px;
    }

    /* =================================================
      サービスカードのクリック設定
      index.html のサービス内容カードを <a> にしたため、
      カード全体をクリック／タップできるようにしています。

      hover の数字を変えると、マウスを乗せた時の浮き上がり具合を変更できます。
    ================================================= */
    .service-link-card{
      display:block;
      cursor:pointer;
      transition:0.2s ease;
    }

    .service-link-card:hover{
      transform:translateY(-2px);
      box-shadow:0 18px 40px rgba(0,0,0,0.12);
    }

    .service-link-card:focus-visible{
      outline:3px solid rgba(49,72,71,0.25);
      outline-offset:4px;
    }

    /* =================================================
      対応実績カードのクリック設定
      トップページの対応実績カードを <a> にしたため、
      カード全体をクリック／タップすると works.html に移動します。

      見た目は既存の .result-item をそのまま使い、
      hover時だけ少し浮くようにしています。
    ================================================= */
    .result-link-card{
      display:block;
      cursor:pointer;
      transition:0.2s ease;
    }

    .result-link-card:hover{
      transform:translateY(-2px);
      box-shadow:0 18px 40px rgba(0,0,0,0.12);
    }

    .result-link-card:focus-visible{
      outline:3px solid rgba(49,72,71,0.25);
      outline-offset:4px;
    }

    .result-item{
      padding:22px 24px;
    }

    .card h3,
    .service-item h3{
      margin:0 0 10px;
      font-size:22px;
      line-height:1.4;
    }

    .card p,
    .service-item p,
    .result-item p{
      margin:0;
      color:var(--muted);
    }

    .result-item strong{
      display:block;
      margin-bottom:8px;
      font-size:18px;
    }

    .result-meta{
      margin-top:12px;
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }

    /* 実績カード内の小さいタグ */
.tag{
      display:inline-block;
      padding:8px 14px;
      border-radius:999px;
      background:#fff;
      border:1px solid var(--line);
      color:var(--accent);
      font-size:13px;
      font-weight:700;
    }

    .check-item{
      padding:16px 18px;
      font-weight:700;
      border-radius:18px;
    }

    /* =========================================================
   ご相談の流れ
   数字付きステップ表示の設定です。
========================================================= */
.flow{
      counter-reset:step;
      gap:16px;
    }

    .flow-item{
      position:relative;
      padding:20px 22px 20px 74px;
      border-radius:22px;
    }

    .flow-item::before{
      counter-increment:step;
      content:counter(step);
      position:absolute;
      left:22px;
      top:18px;
      width:36px;
      height:36px;
      border-radius:50%;
      background:var(--accent);
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
    }

    .flow-item strong{
      display:block;
      margin-bottom:4px;
      font-size:18px;
    }

    /* よくある症状の開閉ボックス */
details{
      padding:18px 20px;
      border-radius:18px;
    }

    summary{
      cursor:pointer;
      font-weight:700;
    }

    details p{
      margin:12px 0 0;
      color:var(--muted);
    }

    .section-actions{
      margin-top:28px;
    }

    .cta{
      background:var(--accent);
      color:#fff;
      border-radius:32px;
      padding:42px 36px;
      box-shadow:var(--shadow);
    }

    .cta h2{
      margin:0 0 12px;
      font-size:34px;
      line-height:1.3;
    }

    .cta p{
      margin:0 0 24px;
      color:rgba(255,255,255,0.9);
    }

    .cta-actions{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
    }

    .cta-note{
      margin:18px 0 0;
      font-size:14px;
      line-height:1.7;
      color:rgba(255,255,255,0.76);
    }

    .cta .btn-primary{
      background:#fff;
      color:var(--accent);
    }

    .cta .btn-muted{
      background:transparent;
      color:rgba(255,255,255,0.78);
      border-color:rgba(255,255,255,0.3);
    }

    /* =========================================================
   フッター
   最下部の会社名・リンク・コピーライト部分です。
========================================================= */
.footer{
      padding:28px 0 40px;
      color:var(--muted);
      font-size:14px;
    }

    .footer-inner{
      display:flex;
      justify-content:space-between;
      align-items:center;
      flex-wrap:wrap;
      gap:16px;
    }

    .footer-brand-link{
      display:flex;
      align-items:center;
      gap:10px;
      text-decoration:none;
      color:inherit;
    }

    .footer-brand-link:hover{
      text-decoration:underline;
    }

    .footer-logo{
      height:34px;
      width:auto;
      object-fit:contain;
    }

    .footer-company{
      font-size:14px;
      font-weight:600;
    }

    .footer-nav{
      display:flex;
      gap:16px;
    }

    .footer-nav a{
      text-decoration:none;
      color:inherit;
      font-size:14px;
    }

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

    .footer-copy{
      margin-top:16px;
      font-size:12px;
      color:#888;
      width:100%;
    }

    /* =========================================================
   PC表示：901px以上
   PC画面でのレイアウト・横並び・ヒーロー位置を管理します。
========================================================= */
@media (min-width: 901px){
      .section{
        padding:76px 0;
      }

      .nav{
        display:flex;
      }

      .grid-3{
        grid-template-columns:repeat(3, 1fr);
      }

      .grid-2,
      .service-list,
      .result-list{
        grid-template-columns:repeat(2, 1fr);
      }

      .hero{
        min-height:90vh;
        align-items:flex-start;
        justify-content:flex-start;
        background-position:left center;
      }

      .hero-inner{
        padding:140px 32px 80px 40px;
        max-width:560px;
        text-align:left;
      }

      .hero h1,
      .hero-company-name,
      .hero-label-ja,
      .hero-kicker,
      .hero-subtitle,
      .hero-copy,
      .hero-description{
        text-align:left;
      }

      .hero h1{
        max-width:480px;
        font-size:clamp(24px, 3.5vw, 48px);
      }

      .hero-copy,
      .hero-description{
        max-width:460px;
      }

      .hero-actions{
        flex-direction:row;
        align-items:flex-start;
      }

      .footer-inner{
        align-items:center;
      }
    }
  
/* ===== トップページ下部のお問い合わせブロック ===== */
/* =========================================================
   お問い合わせセクション
   トップページ下部の濃い緑色の問い合わせカードです。
   文字サイズ・余白・ボタン見た目はこの周辺で変更します。
========================================================= */
/* Contact section - simplified */
.contact-card{
  background:#314847;
  color:#fff;
  border-radius:32px;
  padding:56px 56px;
  box-shadow:0 24px 60px rgba(0,0,0,0.14);
}

.contact-card h2{
  margin:0 0 22px;
  font-size:clamp(32px, 4vw, 48px);
  line-height:1.2;
  letter-spacing:0.02em;
}

.contact-lead{
  margin:0 0 30px;
  color:rgba(255,255,255,0.92);
  max-width:none;
  font-size:clamp(15px, 1.45vw, 20px);
  line-height:1.75;
  white-space:nowrap;
}

.contact-actions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:18px;
}

.contact-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:58px;
  padding:0 36px;
  border-radius:999px;
  background:#fff;
  color:#1f3331;
  font-size:18px;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 14px 30px rgba(0,0,0,0.12);
  transition:0.2s ease;
}

.contact-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(0,0,0,0.18);
}

.contact-note{
  margin:0;
  color:rgba(255,255,255,0.82);
  font-size:15px;
  line-height:1.8;
}

/* =========================================================
   スマホ表示：640px以下
   スマホでの余白・文字サイズ・ボタン幅を管理します。
========================================================= */
@media (max-width:640px){
  .contact-card{
    border-radius:26px;
    padding:34px 24px;
  }

  .contact-actions{
    display:block;
  }

  .contact-btn{
    width:100%;
    min-height:54px;
    font-size:16px;
  }

  .contact-lead{
    white-space:normal;
  }

  .contact-note{
    font-size:14px;
  }
}

  
    /* =========================================================
   ヒーロー文字の折り返し最終調整
   以前、キャッチコピーが途中で改行されたため追加した調整です。
   基本的には触らなくてOKです。
   どうしても文字がはみ出す場合は font-size を少し小さくします。
========================================================= */
/* ===== hero文字折り返し最終修正 ===== */
    .hero-inner{
      max-width:900px !important;
      width:min(100% - 32px, 900px) !important;
    }

    .hero-company-name{
      margin:0 0 8px !important;
      font-size:clamp(14px, 1.5vw, 19px) !important;
      font-weight:700 !important;
      line-height:1.35 !important;
      letter-spacing:0.06em !important;
      color:rgba(255,255,255,0.92) !important;
      text-shadow:0 14px 34px rgba(0,0,0,0.35) !important;
      white-space:nowrap !important;
      word-break:keep-all !important;
      overflow-wrap:normal !important;
    }

    .hero-label-ja{
      font-size:clamp(17px, 2.2vw, 26px) !important;
      line-height:1.35 !important;
      white-space:nowrap !important;
      word-break:keep-all !important;
      overflow-wrap:normal !important;
      letter-spacing:0.02em !important;
    }

    .hero h1{
      /* v25: PC/スマホともに1行表示を優先して、ヒーロー見出しをさらに縮小 */
      font-size:clamp(22px, 3.35vw, 44px) !important;
      line-height:1.14 !important;
      white-space:nowrap !important;
      word-break:keep-all !important;
      overflow-wrap:normal !important;
    }

    @media (min-width:901px){
      .hero-inner{
        max-width:920px !important;
        width:min(100% - 64px, 920px) !important;
      }

      .hero h1,
      .hero-company-name,
      .hero-label-ja,
      .hero-kicker,
      .hero-subtitle,
      .hero-copy,
      .hero-description{
        text-align:left !important;
      }
    }

    @media (max-width:640px){
      .hero-inner{
        max-width:100% !important;
        width:min(100% - 24px, 100%) !important;
      }

      .hero-company-name{
        font-size:13px !important;
        white-space:nowrap !important;
      }

      .hero-label-ja{
        font-size:clamp(15px, 4.3vw, 19px) !important;
        white-space:nowrap !important;
        letter-spacing:0 !important;
      }

      .hero h1{
        /* v25: スマホでも1行表示を優先してさらに縮小 */
        font-size:clamp(14px, 3.95vw, 18px) !important;
        line-height:1.14 !important;
        white-space:nowrap !important;
        word-break:keep-all !important;
        overflow-wrap:normal !important;
        letter-spacing:-0.03em !important;
      }
    }

  
/* ===== 定期点検・保守契約内の「稼働時間に応じた目安」カード ===== */
/* =========================================================
   稼働時間に応じた点検・部品交換の目安カード
   トップページの保守契約セクション内にある白い説明カードです。
========================================================= */
/* Element life note */
.element-life-note{
  margin-top:28px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:28px;
  box-shadow:var(--shadow);
}

.element-life-note h3{
  margin:0 0 14px;
  font-size:22px;
  line-height:1.4;
  color:var(--accent);
}

.element-life-note p{
  margin:0 0 12px;
  color:var(--muted);
  line-height:1.85;
}

.element-life-note p:last-child{
  margin-bottom:0;
}

@media (max-width:640px){
  .element-life-note{
    padding:22px;
    border-radius:20px;
  }

  .element-life-note h3{
    font-size:19px;
  }
}

  

/* =========================================================
   右側固定ボタン（トップページ用）
   目的：ページの途中でも、すぐ「トップページ」「問い合わせフォーム」へ移動できるようにする。

   HTML側：index.html の <div class="index-fixed-actions"> を編集。
   ボタン追加：index.html 側で <a> を追加。
   リンク先変更：index.html 側の href="..." を変更。
   文言変更：index.html 側の文字を変更。

   色変更：.index-fixed-contact / .index-fixed-home の background を変更。
   文字色変更：color を変更。
   角丸変更：border-radius を変更。
   表示位置変更：right / bottom の数字を変更。

   PC表示：右下に縦並びの固定ボタン。
   スマホ表示：画面下に横並びの固定ボタン。
========================================================= */
body{
  /* 固定ボタンが本文やフッターに重なりすぎないよう、下に余白を追加 */
  padding-bottom:88px;
}

.index-fixed-actions{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:2000;
  display:flex;
  flex-direction:row;
  gap:10px;
  align-items:center;
}

.index-fixed-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 22px;
  border-radius:999px;
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 14px 34px rgba(0,0,0,0.22);
  transition:0.2s ease;
}

.index-fixed-home{
  background:#ffffff;
  color:#314847;
  border:1px solid #ddddd7;
}

.index-fixed-contact{
  background:#314847;
  color:#fff;
  border:1px solid #314847;
}

.index-fixed-actions a:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 42px rgba(0,0,0,0.28);
}

@media (max-width:640px){
  body{
    padding-bottom:82px;
  }

  .index-fixed-actions{
    left:12px;
    right:12px;
    bottom:12px;
    flex-direction:row;
    gap:8px;
    align-items:center;
  }

  .index-fixed-actions a{
    flex:1;
    min-height:52px;
    padding:0 8px;
    font-size:13px;
  }
}

/* =========================================================
   将来の拡張メモ：ヒーロー画像スライド・YouTube・Instagram

   今回は見た目を勝手に変えないため、ここでは実装していません。
   将来やる場合の方針：
   1. ヒーロー画像スライド：.hero の背景画像を複数切り替えるJSを追加
   2. YouTube埋め込み：HTMLに <iframe> を追加し、CSSでスマホ対応
   3. Instagram連動：公式埋め込み、または外部ウィジェットを利用

   いきなり全部入れると表示崩れや読み込み速度低下が起きやすいので、
   まずはスマホ導線、次に画像スライド、その後YouTube/Instagramの順がおすすめ。
========================================================= */

/* =========================================================
   v26 スマホ版ヒーロー最終調整
   目的：背景写真に文字・ボタンが重なりすぎないようにする
   変更対象：スマホ表示のみ。PC表示は基本変更なし。
========================================================= */
@media (max-width:640px){
  /* ヒーロー写真部分は文字だけを載せ、ボタンは写真の下に逃がす */
  .hero{
    min-height:640px !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    overflow:visible !important;
    margin-bottom:238px !important;
    background-position:center top !important;
  }

  .hero::after{
    background:linear-gradient(
      180deg,
      rgba(0,0,0,0.62) 0%,
      rgba(0,0,0,0.42) 48%,
      rgba(0,0,0,0.24) 100%
    ) !important;
  }

  .hero-inner{
    width:100% !important;
    max-width:100% !important;
    padding:82px 28px 38px !important;
    text-align:left !important;
  }

  .hero h1,
  .hero-company-name,
  .hero-label-ja,
  .hero-kicker,
  .hero-copy,
  .hero-description{
    text-align:left !important;
  }

  .hero-company-name{
    font-size:14px !important;
    line-height:1.35 !important;
    margin-bottom:10px !important;
    white-space:nowrap !important;
  }

  .hero-label-ja{
    font-size:clamp(21px, 6.2vw, 30px) !important;
    line-height:1.32 !important;
    letter-spacing:0 !important;
    white-space:normal !important;
    max-width:100% !important;
  }

  .hero-kicker{
    font-size:13px !important;
    line-height:1.5 !important;
    letter-spacing:0.13em !important;
    margin-bottom:28px !important;
    white-space:normal !important;
  }

  .hero h1{
    font-size:clamp(30px, 8.6vw, 40px) !important;
    line-height:1.38 !important;
    letter-spacing:0 !important;
    white-space:normal !important;
    word-break:keep-all !important;
    overflow-wrap:normal !important;
    max-width:96% !important;
    margin:0 0 22px !important;
  }

  /* v26ではヒーロー内の重複文言を非表示。HTML側でも削除済み */
  .hero-subtitle{
    display:none !important;
  }

  .hero-copy{
    font-size:clamp(22px, 6vw, 28px) !important;
    line-height:1.55 !important;
    margin:0 0 24px !important;
    max-width:96% !important;
  }

  .hero-description{
    font-size:clamp(16px, 4.4vw, 19px) !important;
    line-height:1.8 !important;
    margin:0 !important;
    max-width:96% !important;
  }

  /* ヒーローの3ボタンは、写真の下の白背景エリアに表示 */
  .hero-actions{
    position:absolute !important;
    left:22px !important;
    right:22px !important;
    bottom:-218px !important;
    z-index:5 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    margin:0 !important;
    padding:0 !important;
    align-items:stretch !important;
  }

  .hero-actions .btn{
    width:100% !important;
    min-height:62px !important;
    padding:0 18px !important;
    border-radius:999px !important;
    font-size:18px !important;
    font-weight:800 !important;
  }

  .hero-actions .btn-secondary{
    background:#fff !important;
    color:#314847 !important;
    border-color:#dddddd !important;
    box-shadow:0 14px 34px rgba(0,0,0,0.14) !important;
    backdrop-filter:none !important;
  }

  /* 下部固定ボタンは少しだけ小さくして、本文へのかぶりを軽減 */
  body{
    padding-bottom:74px !important;
  }

  .index-fixed-actions{
    left:14px !important;
    right:14px !important;
    bottom:10px !important;
    gap:8px !important;
  }

  .index-fixed-actions a{
    min-height:48px !important;
    padding:0 8px !important;
    font-size:12.5px !important;
  }
}


/* =========================================================
   v27 スマホ実機テスト修正
   変更内容：
   ・スマホではヒーロー画像上の導線ボタンを非表示
   ・導線ボタンは画像下の白背景エリアに表示
   ・トップの文字サイズをスマホ向けに調整
   ・横はみ出しを防止
   ・PC表示は変更しない
========================================================= */
.sp-only{
  display:none;
}

.mobile-hero-actions{
  display:none;
}

@media (max-width:640px){
  html,
  body{
    max-width:100%;
    overflow-x:hidden;
  }

  .sp-only{
    display:block;
  }

  .hero{
    min-height:auto !important;
    margin-bottom:0 !important;
    padding:0 !important;
    display:block !important;
    overflow:hidden !important;
    background-position:center top !important;
    background-size:cover !important;
  }

  .hero::after{
    background:linear-gradient(
      180deg,
      rgba(0,0,0,0.64) 0%,
      rgba(0,0,0,0.42) 48%,
      rgba(0,0,0,0.26) 100%
    ) !important;
  }

  .hero-inner{
    width:100% !important;
    max-width:100% !important;
    min-height:520px !important;
    padding:34px 24px 44px !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
  }

  .hero h1,
  .hero-company-name,
  .hero-label-ja,
  .hero-kicker,
  .hero-subtitle,
  .hero-copy,
  .hero-description{
    text-align:center !important;
    max-width:100% !important;
  }

  .hero-company-name{
    font-size:14px !important;
    line-height:1.35 !important;
    letter-spacing:0.03em !important;
    margin:0 0 10px !important;
    white-space:normal !important;
  }

  .hero-label-ja{
    font-size:20px !important;
    line-height:1.38 !important;
    letter-spacing:0.01em !important;
    margin:0 0 18px !important;
    white-space:normal !important;
  }

  .hero-kicker{
    font-size:13px !important;
    line-height:1.45 !important;
    letter-spacing:0.16em !important;
    margin:0 0 24px !important;
    white-space:normal !important;
  }

  .hero h1{
    width:100% !important;
    font-size:25px !important;
    line-height:1.45 !important;
    letter-spacing:0 !important;
    margin:0 0 20px !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
  }

  .hero-subtitle{
    display:none !important;
  }

  .hero-copy{
    font-size:22px !important;
    line-height:1.55 !important;
    margin:0 0 18px !important;
    white-space:normal !important;
  }

  .hero-description{
    font-size:16px !important;
    line-height:1.85 !important;
    margin:0 !important;
    white-space:normal !important;
  }

  /* スマホでは写真内のボタンを消す */
  .hero > .hero-inner > .hero-actions{
    display:none !important;
  }

  /* スマホ専用：写真下の白背景エリアに導線ボタンを表示 */
  .mobile-hero-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    padding:22px 22px 30px !important;
    background:#f7f8f5 !important;
  }

  .mobile-hero-actions .btn{
    width:100% !important;
    min-height:58px !important;
    padding:0 18px !important;
    border-radius:999px !important;
    font-size:18px !important;
    font-weight:800 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    text-decoration:none !important;
  }

  .mobile-hero-actions .btn-secondary{
    background:#ffffff !important;
    color:#314847 !important;
    border:1px solid #dddddd !important;
    box-shadow:0 14px 34px rgba(0,0,0,0.12) !important;
    backdrop-filter:none !important;
  }

  body{
    padding-bottom:84px !important;
  }

  .index-fixed-actions{
    left:14px !important;
    right:14px !important;
    bottom:10px !important;
    gap:8px !important;
  }

  .index-fixed-actions a{
    min-height:48px !important;
    padding:0 8px !important;
    font-size:12.5px !important;
  }
}


/* =========================================================
   v28 スマホ実機テスト最終調整
   目的：
   ・スマホ版でヒーロー写真にボタンを重ねない
   ・スマホ版のヒーロー文字を中央配置に戻し、サイズをページ全体に合わせる
   ・トップページ、対応実績、会社概要のヒーロー導線ボタンの被りを解消
   ・下部固定ボタンは残すが、本文にかぶりにくいよう余白を確保
   注意：
   ・PC表示は変更しない
========================================================= */

@media (max-width:640px){

  html,
  body{
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  body{
    padding-bottom:110px !important;
  }

  /* トップページ：ヒーローは文字だけに整理 */
  .hero{
    min-height:auto !important;
    padding:0 !important;
    margin:0 !important;
    background-position:center center !important;
    background-size:cover !important;
    overflow:hidden !important;
  }

  .hero-inner{
    min-height:520px !important;
    padding:34px 24px 42px !important;
    margin:0 auto !important;
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
  }

  .hero-company-name{
    font-size:14px !important;
    line-height:1.4 !important;
    letter-spacing:0.03em !important;
    margin:0 0 10px !important;
    text-align:center !important;
  }

  .hero-label-ja{
    font-size:20px !important;
    line-height:1.45 !important;
    letter-spacing:0.01em !important;
    margin:0 0 18px !important;
    text-align:center !important;
  }

  .hero-kicker{
    font-size:13px !important;
    line-height:1.5 !important;
    letter-spacing:0.16em !important;
    margin:0 0 24px !important;
    text-align:center !important;
  }

  .hero h1{
    width:100% !important;
    max-width:100% !important;
    font-size:27px !important;
    line-height:1.45 !important;
    letter-spacing:0.01em !important;
    margin:0 0 20px !important;
    text-align:center !important;
    white-space:normal !important;
    word-break:keep-all !important;
    overflow-wrap:normal !important;
  }

  .hero h1 .sp-only,
  .sp-only{
    display:block !important;
  }

  .hero-copy{
    font-size:21px !important;
    line-height:1.55 !important;
    letter-spacing:0.02em !important;
    margin:0 0 18px !important;
    text-align:center !important;
  }

  .hero-description{
    max-width:92% !important;
    font-size:16px !important;
    line-height:1.85 !important;
    letter-spacing:0.02em !important;
    margin:0 !important;
    text-align:center !important;
  }

  /* スマホではヒーロー写真上・写真直下の追加ボタンは出さない。
     下部固定ボタンがCTAとして残るため、写真まわりをすっきり見せる。 */
  .hero-actions,
  .mobile-hero-actions{
    display:none !important;
  }

  /* サービス内容の開始位置を自然にする */
  #services,
  .section:first-of-type{
    padding-top:46px !important;
  }

  /* 下部固定ボタン：小さめ・安定表示 */
  .index-fixed-actions{
    left:14px !important;
    right:14px !important;
    bottom:12px !important;
    gap:10px !important;
    z-index:1200 !important;
  }

  .index-fixed-actions a{
    min-height:50px !important;
    padding:0 10px !important;
    border-radius:999px !important;
    font-size:13px !important;
    line-height:1.25 !important;
    font-weight:800 !important;
    white-space:nowrap !important;
  }
}

@media (max-width:390px){
  .hero-inner{
    min-height:500px !important;
    padding-left:20px !important;
    padding-right:20px !important;
  }

  .hero-label-ja{
    font-size:19px !important;
  }

  .hero h1{
    font-size:25px !important;
  }

  .hero-copy{
    font-size:20px !important;
  }

  .hero-description{
    font-size:15.5px !important;
  }
}


/* =========================================================
   v29 スマホ版トップページ ヒーロー文言スリム化
   目的：
   ・スマホ版ではヒーロー内の大きな説明文を省略
   ・背景写真と主要コピーの重なりを減らす
   ・上部は「会社名 / 業務内容 / 英字」のみにして、すっきり見せる
   ・PC表示は変更しない
========================================================= */

@media (max-width:640px){

  /* スマホ版では以下のヒーロー本文を非表示
     - サウナストーブを、安心して使える状態へ。
     - 故障で止めない運営を支える。
     - 修理・点検・安全管理を通じて...
  */
  .hero h1,
  .hero-copy,
  .hero-description{
    display:none !important;
  }

  .hero-inner{
    min-height:420px !important;
    padding:34px 24px 38px !important;
    justify-content:center !important;
  }

  .hero-company-name{
    font-size:15px !important;
    line-height:1.45 !important;
    margin-bottom:12px !important;
  }

  .hero-label-ja{
    font-size:22px !important;
    line-height:1.5 !important;
    margin-bottom:20px !important;
  }

  .hero-kicker{
    font-size:14px !important;
    line-height:1.6 !important;
    letter-spacing:0.18em !important;
    margin-bottom:0 !important;
  }

  #services,
  .section:first-of-type{
    padding-top:42px !important;
  }
}

@media (max-width:390px){
  .hero-inner{
    min-height:400px !important;
    padding-left:20px !important;
    padding-right:20px !important;
  }

  .hero-label-ja{
    font-size:20px !important;
  }

  .hero-kicker{
    font-size:13px !important;
    letter-spacing:0.15em !important;
  }
}


/* =========================================================
   v30 スマホ版トップページ ヒーロー位置・文字サイズ微調整
   目的：
   ・スマホ版で残した3行を少し上に配置
   ・「北欧系サウナ機器の修理・点検・保守」だけ一段小さくする
   ・PC表示は変更しない
========================================================= */

@media (max-width:640px){

  .hero-inner{
    min-height:400px !important;
    padding:26px 24px 46px !important;
    justify-content:flex-start !important;
    padding-top:58px !important;
  }

  .hero-company-name{
    font-size:15px !important;
    line-height:1.45 !important;
    margin-bottom:10px !important;
  }

  .hero-label-ja{
    font-size:18px !important;
    line-height:1.45 !important;
    letter-spacing:0.01em !important;
    margin-bottom:18px !important;
  }

  .hero-kicker{
    font-size:14px !important;
    line-height:1.55 !important;
    letter-spacing:0.18em !important;
    margin-bottom:0 !important;
  }
}

@media (max-width:390px){

  .hero-inner{
    min-height:390px !important;
    padding-top:52px !important;
  }

  .hero-company-name{
    font-size:14px !important;
  }

  .hero-label-ja{
    font-size:17px !important;
  }

  .hero-kicker{
    font-size:13px !important;
    letter-spacing:0.15em !important;
  }
}


/* =========================================================
   v31 スマホ版：ヒーロー下ボタン復活
   目的：
   ・スマホ版で消えていた「お問い合わせ」「対応実績を見る」「会社概要」を復活
   ・ただし背景写真の上には重ねず、ヒーロー写真の下の白背景エリアに表示
   ・ヒーロー写真内のボタンは非表示のまま
   ・PC表示は変更しない
========================================================= */

@media (max-width:640px){

  /* 写真の上にある元ボタンは出さない */
  .hero .hero-actions{
    display:none !important;
  }

  /* 写真の下に置くスマホ専用ボタンを復活 */
  .mobile-hero-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    padding:20px 22px 26px !important;
    margin:0 !important;
    background:#f7f8f5 !important;
    position:relative !important;
    z-index:20 !important;
  }

  .mobile-hero-actions a{
    width:100% !important;
    min-height:56px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:13px 18px !important;
    border-radius:999px !important;
    font-size:17px !important;
    line-height:1.3 !important;
    font-weight:800 !important;
    text-align:center !important;
    text-decoration:none !important;
  }

  /* ボタン復活に合わせて、サービス内容との余白を自然に調整 */
  #services,
  .section:first-of-type{
    padding-top:34px !important;
  }
}

@media (max-width:390px){
  .mobile-hero-actions{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .mobile-hero-actions a{
    min-height:54px !important;
    font-size:16px !important;
  }
}


/* =========================================================
   v36 サービス内容カード修正
   ・部品交換カードを削除
   ・3カード構成に変更
   ・カード下部に「この内容で相談する →」を表示
========================================================= */

.service-link-card{
  position:relative;
  display:flex;
  flex-direction:column;
}

.service-card-lead{
  margin:8px 0 10px;
  color:#1f4e47;
  font-size:16px;
  font-weight:800;
  line-height:1.5;
}

.service-card-cta{
  display:inline-flex;
  align-items:center;
  margin-top:18px;
  color:#1f4e47;
  font-weight:800;
  font-size:15px;
  line-height:1.4;
  letter-spacing:0.02em;
}

.service-link-card:hover .service-card-cta{
  text-decoration:underline;
  text-underline-offset:4px;
}

@media (max-width:640px){
  .service-card-lead{
    font-size:16px;
    margin-top:10px;
  }

  .service-card-cta{
    margin-top:16px;
    font-size:16px;
  }
}


/* =========================================================
   v40 お知らせバー
   目的：
   ・ヘッダー下に短いお知らせ／対応状況を表示
   ・クリック／タップで問い合わせフォームへ移動
   ・NEWS欄のように古く見えにくい常設文言にする
========================================================= */

.info-bar{
  width:100%;
  background:#d8f1ea;
  border-top:1px solid rgba(31,78,71,.08);
  border-bottom:1px solid rgba(31,78,71,.08);
}

.info-bar-link{
  min-height:40px;
  padding:8px 28px;
  display:grid;
  grid-template-columns:32px 1fr 32px;
  align-items:center;
  gap:10px;
  color:#314744;
  font-size:14px;
  line-height:1.5;
  text-decoration:none;
  text-align:center;
}

.info-bar-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.info-bar-arrow{
  font-size:24px;
  line-height:1;
  color:#55706b;
}

.info-bar-link:hover .info-bar-text{
  text-decoration:underline;
  text-underline-offset:4px;
}

@media (max-width:640px){
  .info-bar-link{
    min-height:38px;
    padding:8px 10px;
    grid-template-columns:22px 1fr 22px;
    gap:6px;
    font-size:12.5px;
  }

  .info-bar-text{
    white-space:nowrap;
  }

  .info-bar-arrow{
    font-size:20px;
  }
}