/* =============================================================
   M's Resort / Glass Concierge  参照ビルド 共通スタイル
   作成: 2026-08-29
   -------------------------------------------------------------
   ・この CSS は「STUDIO で同じ見た目を作るための見本」。
     STUDIO には取り込めない。値（色・余白・文字サイズ）を
     STUDIO の各パネルに手で写すための参照として使う。
   ・色はすべて :root のカスタムプロパティ＝14_デザインパレット確定 の9色。
     STUDIO では C2-1 でこの9色をプロジェクトカラーに登録する。
   ・セクション（＝ブロック）ごとにコメントで区切ってある。
     HTML 側の <section data-block="N"> と対応。
   ============================================================= */

/* ---- 1. カラー変数（14_ 確定パレット / STUDIO C2-1） ---- */
:root{
  --accent:      #45B7B2;   /* ボタン・リンク・罫線・アイコン         */
  --accent-dark: #286966;   /* ホバー、強調色の上に乗せる文字         */
  --accent-pale: #E9F6F6;   /* 淡い面、選択状態                       */
  --bg:          #F4EEE0;   /* ページ地色                             */
  --bg-sand:     #E8DCC0;   /* セクション区切り、カード地             */
  --text:        #2A2B31;   /* 明るい面の本文                         */
  --mute:        #6B6459;   /* 補足・キャプション                     */
  --dark:        #2E3136;   /* ダーク面・フッター                     */
  --on-dark:     #F1EEE7;   /* ダーク面の文字                         */

  --line: rgba(42,43,49,.18);          /* 明るい面の罫線 */
  --line-dark: rgba(241,238,231,.16);  /* 暗い面の罫線   */

  /* ---- 2. フォント（21_ 判断1 / STUDIO C2-2） ----
     見出し = 明朝 Shippori Mincho B1（代替 Noto Serif JP → OS明朝）
     本文   = ゴシック Noto Sans JP（代替 OSゴシック）              */
  --mincho: "Shippori Mincho B1","Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  --sans:   "Noto Sans JP","Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;

  --wrap: 1160px;   /* 内側コンテンツ最大幅 */
}

/* ---- 3. リセット & 基本 ---- */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:2.0;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}

/* 内側の中央寄せコンテナ（STUDIO: 各セクションの内側ボックス max-width 1160 / 左右 padding 48） */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 48px;}

/* セクション共通の上下余白（STUDIO: PC 104px / SP 64px） */
section{padding:104px 0;}

/* 面の色ユーティリティ（HTML の data-face 属性に対応させる） */
.face-bg      {background:var(--bg);      color:var(--text);}
.face-sand    {background:var(--bg-sand); color:var(--text);}
.face-dark    {background:var(--dark);    color:var(--on-dark);}
.face-dark h2,.face-dark h3{color:var(--on-dark);}
.face-dark .lead{color:rgba(241,238,231,.62);}

/* ---- 4. 見出し・パーツ ---- */
.eyebrow{font-size:10px;letter-spacing:.42em;color:var(--accent-dark);font-weight:700;margin-bottom:14px;}
.face-dark .eyebrow{color:var(--accent);}
h1{font-family:var(--mincho);font-weight:400;}
h2{font-family:var(--mincho);font-size:33px;line-height:1.7;font-weight:500;letter-spacing:.08em;}
h3{font-family:var(--mincho);font-size:19px;font-weight:500;letter-spacing:.08em;line-height:1.7;}
.lead{color:var(--mute);font-size:14px;margin-top:18px;line-height:2.1;}
.center{text-align:center;}
.rule{width:40px;height:2px;background:var(--accent);margin:0 auto 22px;}
.rule.left{margin-left:0;}
p + p{margin-top:1.2em;}

/* ボタン */
.btn{display:inline-block;font-size:12.5px;letter-spacing:.18em;font-weight:700;padding:16px 40px;text-align:center;}
.btn-primary{background:var(--accent);color:#08302C;}
.btn-primary:hover{background:var(--accent-dark);color:#fff;}
.btn-ghost{border:1px solid rgba(246,243,236,.7);color:#F6F3EC;}
.btn-line{display:inline-block;font-size:12px;letter-spacing:.14em;color:var(--accent-dark);border-bottom:1px solid var(--accent-dark);padding-bottom:4px;}
.face-dark .btn-line{color:var(--accent);border-color:var(--accent);}

/* ============================================================
   ブロック1 ｜ ヘッダー（STUDIO: 共通コンポーネント Header / C2-3）
   ============================================================ */
.site-header{background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;}
.site-header .hd{display:flex;align-items:center;height:76px;gap:34px;}
.site-header .logo{height:34px;}
.site-header .logo img{height:100%;width:auto;}
.gnav{display:flex;gap:24px;margin-left:auto;font-size:12.5px;letter-spacing:.08em;list-style:none;}
.gnav > li{position:relative;}
.drop{list-style:none;}
.gnav a{padding:8px 0;display:inline-block;}
.gnav a:hover{color:var(--accent-dark);}
/* Service ドロップダウン */
.has-drop > .drop{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  background:#fff;border:1px solid var(--line);padding:14px 0;min-width:340px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);display:none;
}
.has-drop:hover > .drop{display:block;}
.drop li a{display:block;padding:10px 22px;font-size:12px;line-height:1.7;letter-spacing:.06em;}
.drop li a small{display:block;color:var(--mute);font-size:11px;letter-spacing:.04em;}
.drop li a:hover{background:var(--accent-pale);}
.header-icons{display:flex;gap:16px;align-items:center;font-size:15px;color:var(--accent-dark);}
.header-icons a:hover{color:var(--accent);}

/* ハンバーガーボタン（PC では非表示） */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;padding:9px;margin-left:14px;background:none;border:0;cursor:pointer;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text);transition:transform .2s,opacity .2s;}

/* ============================================================
   ブロック2 ｜ ファーストビュー（STUDIO: C3-FV）
   ============================================================ */
.hero{position:relative;height:660px;overflow:hidden;background:#0A0B0D;}
.hero video,.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,11,13,.55) 0%,rgba(10,11,13,.28) 42%,rgba(10,11,13,.72) 100%);}
.hero-in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;color:#F6F3EC;padding:0 24px;}
.hero .en{font-size:10px;letter-spacing:.5em;color:var(--accent);margin-bottom:24px;}
.hero h1{font-size:44px;font-weight:400;letter-spacing:.14em;line-height:1.9;}
.hero .sub{margin-top:20px;font-size:14px;letter-spacing:.12em;color:rgba(246,243,236,.88);}
.hero .btn{margin-top:38px;}

/* ============================================================
   ブロック3 ｜ AUTO ALIVE 概要（STUDIO: 面 bg）
   ============================================================ */
.intro{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.intro .im{height:440px;border-radius:2px;overflow:hidden;}
.intro .im img{width:100%;height:100%;object-fit:cover;}
.badge{display:inline-block;border:1px solid var(--accent-dark);color:var(--accent-dark);
  font-size:10.5px;letter-spacing:.16em;padding:5px 12px;margin-bottom:20px;}

/* ============================================================
   ブロック4 ｜ 選ばれる理由（STUDIO: 面 dark ①）
   ============================================================ */
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:56px;}
.reason .no{font-family:var(--mincho);font-size:24px;color:var(--accent);}
.reason h3{margin:14px 0 14px;padding-bottom:14px;border-bottom:1px solid var(--line-dark);}
.reason p{font-size:13px;color:rgba(241,238,231,.72);line-height:2.05;}

/* ============================================================
   ブロック5 ｜ 施工実績 BEFORE/AFTER（STUDIO: 面 sand）
   ============================================================ */
.works{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:52px;}
.work .im{height:300px;overflow:hidden;}
.work .im img{width:100%;height:100%;object-fit:cover;}
.work .cap{font-size:11.5px;letter-spacing:.08em;color:var(--mute);margin-top:12px;}
.works-foot{margin-top:44px;}

/* ============================================================
   ブロック6 ｜ 施工の流れ 6ステップ（STUDIO: 面 bg）
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 28px;margin-top:52px;}
.step .im{height:180px;position:relative;overflow:hidden;}
.step .im img{width:100%;height:100%;object-fit:cover;}
.step .no{position:absolute;left:0;top:0;background:var(--accent);color:#08302C;
  font-size:12px;font-weight:700;letter-spacing:.1em;padding:6px 13px;}
.step h3{font-size:15px;margin-top:16px;}
.step p{font-size:12.5px;color:var(--mute);line-height:1.95;margin-top:6px;}
.steps-note{font-size:12px;color:var(--mute);margin-top:22px;}

/* ============================================================
   ブロック7 ｜ 料金（STUDIO: 面 bg）
   ============================================================ */
.price-block{margin-top:44px;}
.price-block h3{font-size:15px;letter-spacing:.14em;margin-bottom:16px;}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px;}
th,td{border-bottom:1px solid var(--line);padding:16px 14px;text-align:center;letter-spacing:.04em;vertical-align:top;}
th{font-size:11.5px;letter-spacing:.14em;color:var(--mute);font-weight:600;}
thead th{border-bottom:1px solid var(--accent-dark);}
td:first-child,th:first-child{text-align:left;font-family:var(--mincho);letter-spacing:.08em;white-space:nowrap;}
.price-note{font-size:11.5px;color:var(--mute);margin-top:18px;line-height:2;}
.price-note li{list-style:none;}
.price-ui-note{font-size:11px;color:var(--mute);margin-top:10px;}

/* ============================================================
   ブロック8 ｜ 対応エリア（STUDIO: 面 sand）
   ============================================================ */
.area{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.area .im{height:320px;overflow:hidden;}
.area .im img{width:100%;height:100%;object-fit:cover;}
.area-list{list-style:none;margin-bottom:22px;}
.area-list li{border-bottom:1px solid var(--line);padding:14px 0;font-size:15px;letter-spacing:.1em;font-family:var(--mincho);}

/* ============================================================
   ブロック9 ｜ その他のサービス カード2枚（STUDIO: 面 dark ②）
   ============================================================ */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:52px;}
.card{border:1px solid var(--line-dark);padding:38px 34px;}
.card h3{color:var(--on-dark);}
.card .soon{font-size:9.5px;letter-spacing:.14em;border:1px solid rgba(241,238,231,.4);
  padding:2px 8px;margin-left:10px;vertical-align:3px;color:rgba(241,238,231,.7);}
.card p{font-size:13px;color:rgba(241,238,231,.72);margin-top:16px;line-height:2.05;}
.card .more{display:inline-block;margin-top:18px;font-size:12px;letter-spacing:.14em;color:var(--accent);}

/* ============================================================
   ブロック10 ｜ Q&A（STUDIO: 面 bg / ボックスID = qa）
   ============================================================ */
.qa{margin-top:48px;}
.qa .item{border-top:1px solid var(--line);}
.qa .item:last-child{border-bottom:1px solid var(--line);}
.qa dt{padding:22px 40px 22px 0;font-size:14.5px;letter-spacing:.04em;font-weight:600;position:relative;}
.qa dt::before{content:"Q.";color:var(--accent-dark);margin-right:8px;font-family:var(--mincho);}
.qa dd{font-size:13px;color:var(--mute);line-height:2.15;padding:0 40px 26px 0;}

/* ============================================================
   ブロック11 ｜ About Us 抜粋（STUDIO: 面 sand）
   ============================================================ */
.about-teaser{text-align:center;}
.about-teaser blockquote{font-family:var(--mincho);font-size:20px;line-height:2.2;letter-spacing:.1em;}
.about-teaser .btn-line{margin-top:30px;}

/* ============================================================
   ブロック12 ｜ お問い合わせフォーム（STUDIO: 面 dark ③ / ボックスID = contact / C5）
   ============================================================ */
.form-wrap{max-width:840px;margin:52px auto 0;}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:22px 30px;}
.f{display:flex;flex-direction:column;gap:9px;}
.f.full{grid-column:1/-1;}
.f label{font-size:11.5px;letter-spacing:.1em;color:rgba(241,238,231,.78);}
.f label .req{color:var(--accent);margin-left:6px;font-size:10px;}
.f label .opt{color:rgba(241,238,231,.45);margin-left:6px;font-size:10px;}
.f input,.f select,.f textarea{
  height:48px;border:1px solid rgba(241,238,231,.28);background:rgba(255,255,255,.05);
  color:var(--on-dark);padding:0 14px;font-family:var(--sans);font-size:13px;
}
.f textarea{height:120px;padding:12px 14px;line-height:1.9;}
.f .hint{font-size:10.5px;color:rgba(241,238,231,.5);}
.form-submit{text-align:center;margin-top:38px;}
.form-submit .btn{padding:17px 64px;}
.form-foot{font-size:11.5px;color:rgba(241,238,231,.6);margin-top:20px;text-align:center;letter-spacing:.06em;}
.form-done{font-size:14px;line-height:2.15;text-align:center;color:var(--on-dark);padding:40px 0;letter-spacing:.05em;}
.form-error{font-size:12px;color:#ff9b9b;margin-top:14px;text-align:center;letter-spacing:.04em;}

/* ============================================================
   ブロック13 ｜ フッター（STUDIO: 共通コンポーネント Footer / C2-4）
   ============================================================ */
.site-footer{background:var(--dark);color:rgba(241,238,231,.72);padding:64px 0 40px;font-size:12px;letter-spacing:.06em;}
.site-footer .ft{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;}
.site-footer .logo{height:64px;margin-bottom:20px;}
.site-footer .logo img{height:100%;width:auto;}
.site-footer .corp{line-height:2;color:rgba(241,238,231,.55);font-size:11.5px;}
.site-footer nav ul{list-style:none;display:flex;gap:20px;flex-wrap:wrap;}
.site-footer .sub-links{margin-top:14px;display:flex;gap:18px;flex-wrap:wrap;}
.site-footer .sub-links a:hover,.site-footer nav a:hover{color:var(--accent);}
.copy{border-top:1px solid var(--line-dark);margin-top:44px;padding-top:22px;font-size:10.5px;color:rgba(241,238,231,.42);}

/* ============================================================
   下層ページ（About Us / プライバシー）共通
   ============================================================ */
.page-head{background:var(--bg-sand);padding:80px 0 72px;text-align:center;}
.page-head h1{font-size:32px;letter-spacing:.12em;}
.page-head .en{display:block;font-size:10px;letter-spacing:.4em;color:var(--accent-dark);margin-top:12px;font-family:var(--sans);}
.doc{max-width:860px;margin:0 auto;padding:0 48px;}
.doc section{padding:56px 0;border-bottom:1px solid var(--line);}
.doc section:last-child{border-bottom:none;}
.doc h2{font-size:24px;margin-bottom:20px;}
.doc h3{font-size:17px;margin:28px 0 12px;}
.doc p{font-size:14px;line-height:2.15;}
.doc ul{margin:12px 0 12px 1.4em;font-size:14px;line-height:2.1;}
.doc table{min-width:0;margin-top:8px;}
.doc td:first-child{white-space:nowrap;color:var(--mute);font-family:var(--sans);font-size:13px;}
.doc td{text-align:left;font-size:13.5px;}
.poetic{font-family:var(--mincho);font-size:16px;line-height:2.4;letter-spacing:.06em;}

/* 準備中ページ */
.coming{min-height:52vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;padding:80px 24px;}
.coming h1{font-size:26px;letter-spacing:.12em;}
.coming p{font-size:13px;color:var(--mute);}

/* ============================================================
   レスポンシブ（STUDIO: モバイル 390px で上書き）
   ============================================================ */
@media(max-width:768px){
  .wrap{padding:0 22px;}
  section{padding:64px 0;}
  h2{font-size:24px;}
  .site-header .hd{height:60px;gap:0;}
  .header-icons{margin-left:auto;}

  /* ハンバーガーメニュー */
  .nav-toggle{display:flex;}
  .site-header.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .site-header.open .nav-toggle span:nth-child(2){opacity:0;}
  .site-header.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .gnav{
    position:fixed;top:60px;left:0;right:0;bottom:0;flex-direction:column;gap:0;margin:0;
    background:var(--bg);padding:12px 22px 40px;overflow-y:auto;
    transform:translateX(100%);transition:transform .25s ease;z-index:60;
  }
  .site-header.open .gnav{transform:translateX(0);}
  .gnav > li{border-bottom:1px solid var(--line);}
  .gnav > li > a{display:block;padding:18px 2px;font-size:14px;}
  .has-drop > .drop{
    position:static;transform:none;display:block;min-width:0;
    background:none;border:0;box-shadow:none;padding:0 0 10px 14px;
  }
  .drop li a{padding:9px 0;}
  .drop li a small{font-size:10.5px;}
  .hero{height:560px;}
  .hero h1{font-size:27px;line-height:2.0;}
  .intro,.area,.works,.cards,.reasons{grid-template-columns:1fr;gap:28px;}
  .intro .im,.area .im{height:240px;}
  .steps{grid-template-columns:1fr 1fr;gap:22px 16px;}
  .step .im{height:120px;}
  .fields{grid-template-columns:1fr;}
  .doc,.about-teaser blockquote{padding-left:22px;padding-right:22px;}
  .about-teaser blockquote{font-size:17px;}
  .site-footer .ft{flex-direction:column;gap:32px;}
}