/* マドアーズ!全国版 リニューアル案「上質」（2026-09-27 高木さんの指示：ガラパゴス!と違う、リフォームの専門店の高級感）
   common.css（共通部品の形・クラス名）の上に重ねて、色・書体・余白・動きだけを変える。
   参考：21st.dev Editorial（Editorial Collage Hero・Scroll Gallery・Elegant Carousel・Editorial Testimonial）の考え方、
         ミサワホームのリフォームのトップ（部屋の写真を大きく、細い文字を重ねる）。コードは写していない */
@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;600;700;800&family=Noto+Sans+JP:wght@300;400;500&family=Cormorant+Garamond:wght@500&display=swap");
:root{
  --navy:#1b2a4a;      /* 紺 */
  --sumi:#1f1f1f;      /* 墨 */
  --ink:#2b2b2b;
  --sub:#6b6860;
  --paper:#f6f3ec;     /* 生成り */
  --paper-2:#efeae0;
  --line:#dcd5c7;
  --brass:#a8875a;     /* 真鍮 */
  --sky:#ece7dc;
  --beige:#f3eee4;
  --orange:#b3643a;    /* 電話のボタン（共通の決まりの「オレンジ」を落ち着いた色に） */
  --line-green:#2e9a5f;/* LINE のボタン（緑のまま少し落ち着かせる） */
  --radius:2px;
  --shadow:0 20px 50px rgba(20,20,20,.08);
}
body{background:var(--paper);color:var(--ink);font-family:"Noto Sans JP",sans-serif;font-weight:300;line-height:2.05;letter-spacing:.04em}
h1,h2,h3,.maru,.brand b{font-family:"Shippori Mincho","Noto Serif JP",serif;font-weight:500;letter-spacing:.08em;line-height:1.6}
b,strong{font-weight:500}
a{color:var(--navy)}
.wrap{max-width:1180px;padding:0 28px}

/* 確認用の帯 */
.preview-band{background:#7a1f1f;font-size:13px;letter-spacing:.06em}

/* ヘッダー：白、細い線、ロゴは画像 */
.site-head{background:rgba(246,243,236,.96);border-bottom:1px solid var(--line);position:sticky;top:34px;z-index:80;backdrop-filter:blur(6px)}
.site-head .wrap{min-height:78px}
.brand-logo{height:40px;width:auto}
.gnav{gap:30px;font-size:13px;letter-spacing:.12em}
.gnav a{color:var(--sumi);position:relative}
.gnav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--brass);transform:scaleX(0);transition:transform .4s}
.gnav a:hover::after{transform:scaleX(1)}
.head-tel{font-family:"Cormorant Garamond",serif;font-size:20px;color:var(--sumi);letter-spacing:.06em}

/* 共通の部品を上質に */
.eyebrow{background:none;color:var(--brass);font-size:12px;letter-spacing:.3em;padding:0;border-radius:0;display:inline-flex;align-items:center;gap:12px;margin-bottom:18px}
.eyebrow::before{content:"";width:36px;height:1px;background:var(--brass)}
.sec{padding:120px 0}
.sec h2{font-size:clamp(24px,3vw,34px);color:var(--sumi);margin-bottom:14px}
.sec .lead{color:var(--sub);margin-bottom:48px;max-width:40em}
.btn{border-radius:0;padding:15px 30px;font-weight:400;letter-spacing:.14em;font-size:14px}
.btn:hover{transform:none;box-shadow:none;opacity:.85}
.btn-navy{background:var(--sumi)}
.btn-ghost{background:transparent;border:1px solid var(--sumi);color:var(--sumi)}
.btn-line{background:var(--line-green)}
.card{border-radius:var(--radius);border-color:var(--line);background:#fff}
.card:hover{transform:none;box-shadow:var(--shadow)}
.tag{border-radius:0;border-color:var(--line);color:var(--brass);letter-spacing:.14em}
.note{color:var(--sub)}
.wr-box{background:#fff;border:1px solid var(--line);border-left:2px solid var(--brass);border-radius:0;padding:24px 28px}
.wr-box__label{background:none;color:var(--brass);padding:0;letter-spacing:.24em;font-size:12px}
.gb__who::before{content:"";}
.gb{letter-spacing:.1em}
.yt__btn{border-radius:0}
.yt__play{border-radius:50%;width:64px;height:64px;background:rgba(255,255,255,.9)}
.yt__play::after{left:26px;top:21px;border-left-color:var(--sumi)}
.yt__cap{font-family:"Shippori Mincho",serif}
.gcase__card a{border-radius:0}
.gcase__card a:hover{transform:none}
.gcase__type{color:var(--brass);letter-spacing:.16em}
.gcase__name{font-family:"Shippori Mincho",serif}
.gcan__can,.gcan__cannot{border-radius:0;background:#fff;border:1px solid var(--line)}
.gcan__can{border-top:2px solid var(--navy)}.gcan__cannot{border-top:2px solid var(--brass)}
.gc{border-radius:0;border:none;background:var(--sumi);color:#e9e4d8;padding:56px}
.gc__photo{border-radius:0;width:200px;height:240px;background:#2b2b2b}
.gc__name{color:#cdbb97;font-family:"Shippori Mincho",serif}
.gc__title{color:#fff}
.gc__lead{color:#cfc8b8}
.gc__points li{background:transparent;border:1px solid #5c5548;color:#e9e4d8;border-radius:0;letter-spacing:.1em}
.gc__btn{border-radius:0;font-family:"Shippori Mincho",serif;font-size:16px;letter-spacing:.08em}
.gc__btn--form{background:#fff;color:var(--sumi)}
.gc__cannot{color:#a9a18f}
.stat{border-radius:0;background:transparent;border:none;border-top:1px solid var(--sumi);padding:22px 0 0}
.stat .num{font-family:"Cormorant Garamond","Shippori Mincho",serif;font-size:46px;color:var(--sumi);font-weight:500}
.stat .num small{font-family:"Shippori Mincho",serif;font-size:14px;margin-left:4px}
.promise span{border-radius:0;background:transparent;border:none;border-left:1px solid var(--brass);padding:2px 14px}
.promise span::before{content:""}
.trust{background:transparent;border-color:var(--line)}
.trust .lbl{font-family:"Shippori Mincho",serif;color:var(--sumi)}
.trust span.item{background:transparent;border-radius:0;padding:0 10px;border-right:1px solid var(--line)}
.calc-rows{border-radius:0}
.calc-sum{border-radius:0;background:var(--sumi)}
.calc-sum .total{font-family:"Cormorant Garamond","Shippori Mincho",serif;font-size:44px}
.qty button{border-radius:0;border-color:var(--sumi);color:var(--sumi)}
.calc-bar{border-top:1px solid var(--sumi)}
.mid-cta{background:#fff;border:1px solid var(--line);border-radius:0}
.site-foot{background:var(--sumi);color:#bdb6a6;letter-spacing:.06em}
.sticky-cta a{border-radius:0}
.chips a{border-radius:0;background:transparent;border:none;border-bottom:1px solid var(--line);padding:14px 4px;min-width:220px;font-family:"Shippori Mincho",serif}
.chips a small{font-family:"Noto Sans JP",sans-serif}
.chips a:hover{border-color:var(--brass)}

/* トップ：画面いっぱいの写真のヒーロー（雑誌風） */
.p-hero{position:relative;height:min(88vh,760px);min-height:520px;overflow:hidden;background:#222}
.p-hero img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);animation:heroZoom 18s ease-out forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.p-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,18,15,.72) 0%,rgba(20,18,15,.35) 45%,rgba(20,18,15,0) 70%)}
.p-hero .copy{position:absolute;inset:0;z-index:2;display:flex;align-items:center}
.p-hero .copy .wrap{width:100%}
.p-hero h1{color:#fff;font-size:clamp(30px,4.4vw,54px);font-weight:500;margin:0 0 22px;letter-spacing:.14em;line-height:1.7}
.p-hero .sub{color:#e8e1d2;max-width:30em;margin:0 0 34px}
.p-hero .en{font-family:"Cormorant Garamond",serif;color:#d8c29a;letter-spacing:.3em;font-size:14px;margin-bottom:22px;display:block}
.p-hero .ctas{display:flex;gap:14px;flex-wrap:wrap}
.p-hero .btn-ghost{border-color:#fff;color:#fff}
.p-hero .img-note{position:absolute;right:16px;bottom:12px;z-index:3;font-size:11px;color:#ddd;letter-spacing:.1em}
.p-hero .photo-first{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:0;margin-bottom:26px;font-size:14px}
.p-hero .photo-first b{font-family:"Shippori Mincho",serif;font-weight:500}

/* 実際の工事（大きな写真を3枚。雑誌のコラージュ） */
.p-real{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:18px;align-items:end}
.p-real figure{margin:0}
.p-real img{width:100%;aspect-ratio:3/4;object-fit:cover}
.p-real figure:first-child img{aspect-ratio:4/5}
.p-real figcaption{font-size:12px;color:var(--sub);margin-top:10px;letter-spacing:.1em}
.p-real figcaption b{font-family:"Shippori Mincho",serif;color:var(--sumi);display:block;font-size:15px;letter-spacing:.08em}

/* ビフォーアフター（細い線で囲むだけ） */
.compare{border-radius:0;box-shadow:none;outline:1px solid var(--line);outline-offset:10px}
.compare .lbl{border-radius:0;background:rgba(20,20,20,.6);letter-spacing:.2em}
.compare .bar::after{border-radius:0;color:var(--sumi)}

/* お悩みから探す（ボタンではなく、罫線の一覧） */
.p-nayami{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--sumi)}
.p-nayami a{display:block;padding:28px 24px 30px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);transition:padding .35s}
.p-nayami a:hover{padding-left:12px}
.p-nayami .no{font-family:"Cormorant Garamond",serif;color:var(--brass);font-size:15px;letter-spacing:.2em}
.p-nayami b{display:block;font-family:"Shippori Mincho",serif;font-size:21px;color:var(--sumi);margin:6px 0 4px}
.p-nayami span{font-size:14px;color:var(--sub)}

/* 代表の顔（大きく、縦書きの肩書き） */
.p-face{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.p-face .pic{position:relative;background:var(--paper-2);padding:40px 20px 0}
.p-face .pic img{max-height:460px;margin:auto}
.p-face .tate{position:absolute;right:18px;top:26px;writing-mode:vertical-rl;font-family:"Shippori Mincho",serif;color:var(--sumi);letter-spacing:.3em;font-size:15px}
.p-face .tate small{display:block;color:var(--brass);font-size:11px}
.p-face ul{list-style:none;padding:0;margin:24px 0 0}
.p-face li{padding:14px 0;border-bottom:1px solid var(--line)}

/* テーマから探す（写真と細い文字） */
.p-themes{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.p-themes a{text-decoration:none;color:var(--ink)}
.p-themes img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.9);transition:filter .4s}
.p-themes a:hover img{filter:saturate(1.05)}
.p-themes b{display:block;font-family:"Shippori Mincho",serif;font-size:19px;color:var(--sumi);margin:16px 0 2px}
.p-themes span{font-size:13px;color:var(--sub)}

/* 読み物の一覧（番号つきの罫線） */
.p-posts{border-top:1px solid var(--sumi)}
.p-posts a{display:grid;grid-template-columns:90px 1fr 140px;gap:24px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.p-posts .n{font-family:"Cormorant Garamond",serif;font-size:28px;color:var(--brass)}
.p-posts b{font-family:"Shippori Mincho",serif;font-size:19px;color:var(--sumi);display:block}
.p-posts img{width:140px;aspect-ratio:4/3;object-fit:cover}

@media (max-width:900px){
  .site-head{top:48px}
  .p-real,.p-face,.p-themes{grid-template-columns:1fr}
  .p-nayami{grid-template-columns:1fr}
  .p-posts a{grid-template-columns:50px 1fr;}
  .p-posts img{display:none}
  .sec{padding:80px 0}
  .gc{padding:32px 22px}
  .p-hero::after{background:linear-gradient(180deg,rgba(20,18,15,.25) 0%,rgba(20,18,15,.75) 100%)}
  .p-hero .copy{align-items:flex-end;padding-bottom:40px}
}

/* common.css の丸ゴシックを、すべて明朝か細いゴシックに置き換える */
.contact-band .way b,.gcan__label,.ans b,.miwake b,.qty output,.calc-bar b,.photo-first b{font-family:"Shippori Mincho",serif;font-weight:500;color:var(--sumi)}
.gc__btn{font-weight:500}
.calc-sum .note{color:#bdb6a6}
.calc-bar{border-top-width:1px}
.calc-row{border-bottom:1px solid var(--line)}
.head-tel{text-decoration:none}

/* 記事の画面 */
.crumb{letter-spacing:.08em;padding:22px 0}
.article-head{gap:64px;padding:40px 0 80px}
.article-head h1{color:var(--sumi);font-size:clamp(26px,3.2vw,38px);line-height:1.7}
.head-photo{border-radius:0;box-shadow:none}
.head-photo span{border-radius:0;background:rgba(20,20,20,.6);letter-spacing:.1em}
.layout{gap:72px}
.summary{border-radius:0;border:none;border-top:1px solid var(--sumi);border-bottom:1px solid var(--line);background:transparent;padding:26px 0}
.summary b,.toc b,.case b,.can b{font-family:"Shippori Mincho",serif;font-weight:500;color:var(--sumi)}
.prose{border-radius:0;border:none;background:transparent;padding:0}
.prose h2{color:var(--sumi);font-size:25px;border-bottom:1px solid var(--line);padding-bottom:16px;margin:80px 0 22px;position:relative}
.prose h2::before{content:"";position:absolute;left:0;bottom:-1px;width:48px;height:1px;background:var(--brass)}
.prose h3{font-size:19px;color:var(--sumi)}
.prose figure img{border-radius:0}
.prose th{background:var(--paper-2);color:var(--sumi);font-weight:500}
.inline-video{border-radius:0;background:#fff;border:1px solid var(--line)}
.toc{border-radius:0;background:transparent;border:none;border-top:1px solid var(--sumi);padding:18px 0}
.toc ol{line-height:2}
.side .mini-cta{border-radius:0;background:var(--sumi)}
.gcase__title{color:var(--sumi)}
.related a{border-top:1px solid var(--line)}

/* 用語辞典の画面 */
.jiten-hero{height:340px}
.jiten-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,18,15,.6),rgba(20,18,15,.05))}
.jiten-hero .inner{z-index:2}
.jiten-hero .label{font-family:"Shippori Mincho",serif;font-weight:500;background:none;color:#fff;border-radius:0;padding:0;letter-spacing:.2em}
.jiten-hero .img-note{z-index:3;border-radius:0}
.entry{max-width:760px}
.entry h1{color:var(--sumi);font-size:clamp(30px,4vw,44px);letter-spacing:.16em}
.reading{letter-spacing:.2em;color:var(--brass)}
.hitokoto{border-radius:0;box-shadow:none;background:transparent;border:none;border-top:1px solid var(--sumi);border-bottom:1px solid var(--sumi);padding:26px 0;margin-bottom:56px}
.hitokoto small{color:var(--brass);letter-spacing:.3em}
.hitokoto p{font-family:"Shippori Mincho",serif;font-size:21px;line-height:1.9}
.block{border-radius:0;border:none;background:transparent;padding:0 0 40px;margin-bottom:40px;border-bottom:1px solid var(--line)}
.block h2{color:var(--sumi);font-size:22px}
.block figure img{border-radius:0}
.can div{border-radius:0;background:#fff!important;border:1px solid var(--line)}
.can .yes{border-top:2px solid var(--navy)}.can .no{border-top:2px solid var(--brass)}
.rel a{border-top:1px solid var(--line)}
@media (max-width:900px){.article-head{padding:20px 0 48px;gap:28px}.prose h2{margin-top:56px}}
@media (max-width:600px){.p-hero h1{font-size:25px;letter-spacing:.08em}.p-hero .en{font-size:11px;letter-spacing:.2em}.sec h2{font-size:22px}}