/* ==========================================================================
   Design tokens ── ここだけ差し替えれば全体のトーンが変わります
   ========================================================================== */
:root{
  /* Base palette */
  --paper:      #FBFAF8;   /* 基本背景 */
  --plaster:    #F0EDE6;   /* 面で使う下地色（左官のイメージ） */
  --plaster-d:  #E5E1D8;
  --ink:        #1E1D1A;   /* 本文・見出し */
  --slate:      #6D6A62;   /* 補助テキスト */
  --line:       #DEDAD1;   /* 罫線 */
  --accent:     #2F5147;   /* アクセント（深緑） */
  --accent-d:   #223E36;

  /* Typography */
  /* 書体：cowcamo.jp と同じく端末標準のゴシックを使う。
     Webフォントに切り替える場合は、この2行を差し替えて各HTMLに <link> を戻す。 */
  --sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP", sans-serif;
  --display: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP", sans-serif;

  /* Layout */
  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
  --head-h: 78px;
  --radius: 2px;

  /* Life Catalog ── 7デザインのスウォッチ（SIMPLE+・Cats・Hotel Days は仮色） */
  /* SIMPLE+ の4仕上げ（パースから採色） */
  --sp-na:#F2EFE9;  --sp-na2:#E6E2DA;  --sp-na3:#C9A87A;   /* natural */
  --sp-mo:#EFECE6;  --sp-mo2:#B3ABA1;  --sp-mo3:#C7A87E;   /* mortar  */
  --sp-wh:#F4F3F4;  --sp-wh2:#E1E0E2;  --sp-wh3:#B7B4B8;   /* white   */
  --sp-ch:#EDE9E4;  --sp-ch2:#3C4453;  --sp-ch3:#5A3B2A;   /* chic    */
  /* 一覧カード・タイル用（SIMPLE+ 全体） */
  --simple:#F2EFE9;  --simple-b:#C9A87A;  --simple-c:#3C4453;
  --nature:#F0EDE7;  --nature-b:#C9A97A;  --nature-c:#6E7F5C;
  --down:#EFEBE4;    --down-b:#A8794E;    --down-c:#2C2A27;
  --mahoro:#F0EDE7;  --mahoro-b:#D9C2A0;  --mahoro-c:#8C9084;
  --atelier:#EFE9E1; --atelier-b:#B9754F; --atelier-c:#5C3A28;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
[id]{scroll-margin-top:calc(var(--head-h) + 16px)}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:400; font-size:15px; line-height:1.9;
  letter-spacing:.04em; font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0; list-style:none}
table{border-collapse:collapse}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.wrap-wide{width:100%; max-width:1440px; margin-inline:auto; padding-inline:var(--gutter)}
.sect{padding-block:clamp(64px,9vw,120px)}
.sect--plaster{background:var(--plaster)}
.sect--ink{background:var(--ink); color:var(--paper)}
.stack > * + *{margin-top:1.1em}
.lede{max-width:44em; color:var(--slate); font-size:14px}

/* Section heading: 英語＋日本語（ゼロリノベ踏襲） */
.shead{display:flex; align-items:baseline; gap:.85em; flex-wrap:wrap; margin-bottom:2.2rem}
.shead--logo{align-items:center; gap:1.2em}
.shead__en{font-family:var(--display); font-size:clamp(26px,4.4vw,40px); line-height:1; letter-spacing:.06em}
.shead__ja{font-size:13px; color:var(--slate); letter-spacing:.14em}
.shead__more{margin-left:auto; font-size:13px; letter-spacing:.1em; border-bottom:1px solid var(--line); padding-bottom:3px}
.shead__more:hover{border-color:var(--ink)}
.sect--ink .shead__ja,.sect--ink .lede{color:#A9A69D}
.sect--ink .shead__more{border-color:#3B3A35}

.h-lg{font-family:var(--display); font-size:clamp(24px,3.6vw,34px); line-height:1.55; letter-spacing:.04em}
.h-md{font-size:clamp(17px,2.2vw,21px); font-weight:500; line-height:1.65; letter-spacing:.05em}

/* Placeholder image block ── 図面のグリッドを敷いたダミー枠 */
.ph{
  position:relative; background:var(--plaster-d); overflow:hidden;
  background-image:linear-gradient(var(--paper) 1px,transparent 1px),linear-gradient(90deg,var(--paper) 1px,transparent 1px);
  background-size:28px 28px; background-position:-1px -1px;
}
.ph::after{
  content:attr(data-label); position:absolute; inset:0; display:grid; place-content:center;
  font-size:11px; letter-spacing:.18em; color:#9C978C; text-align:center; padding:1em;
}
.ph--3x2{aspect-ratio:3/2}
.ph--4x3{aspect-ratio:4/3}
.ph--1x1{aspect-ratio:1/1}
.ph--wide{aspect-ratio:16/7}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  min-height:52px; padding:0 2.2em; border-radius:var(--radius);
  font-size:14px; letter-spacing:.1em; transition:background .2s,color .2s,border-color .2s;
}
.btn--solid{background:var(--accent); color:#fff}
.btn--solid:hover{background:var(--accent-d)}
.btn--line{border:1px solid var(--line); background:var(--paper)}
.btn--line:hover{border-color:var(--ink)}
.btn--sm{min-height:42px; font-size:13px; padding:0 1.5em}

/* ==========================================================================
   Header
   ========================================================================== */
.hd{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--head-h);
  display:flex; align-items:center; background:rgba(251,250,248,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent; transition:border-color .3s;
}
.hd.is-stuck{border-bottom-color:var(--line)}
.hd__inner{display:flex; align-items:center; gap:2rem; width:100%; max-width:1440px; margin-inline:auto; padding-inline:var(--gutter)}
.hd__logo{display:flex; align-items:center; flex:none}
.hd__logo img{display:block; height:40px; width:auto}
.hd__nav{margin-left:auto; display:flex; align-items:center; gap:1.75rem}
.hd__cta{margin-left:.5rem}
.navitem{position:relative}
.navitem__btn{display:flex; align-items:center; gap:.4em; font-size:13.5px; letter-spacing:.08em; padding:.5em 0; white-space:nowrap}
.navitem__btn::after{content:""; display:block; height:1px; background:var(--ink); width:0; transition:width .25s; position:absolute; bottom:.15em; left:0}
.navitem:hover .navitem__btn::after,.navitem__btn.is-on::after{width:100%}
.caret{width:7px; height:7px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); opacity:.55}

@media (max-width:1180px){
  .hd__nav{gap:1.15rem}
  .navitem__btn{font-size:12.5px; letter-spacing:.04em}
  .hd__logo img{height:34px}
}

/* Mega menu */
.mega{
  position:absolute; top:100%; left:50%; transform:translate(-50%,8px);
  min-width:230px; padding:1.1rem 0; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 18px 40px -24px rgba(30,29,26,.35);
  opacity:0; visibility:hidden; transition:opacity .2s, transform .2s, visibility .2s;
}
.navitem:hover .mega,.navitem:focus-within .mega{opacity:1; visibility:visible; transform:translate(-50%,0)}
.mega a{display:block; padding:.55em 1.6em; font-size:13.5px; letter-spacing:.06em; white-space:nowrap}
.mega a:hover{background:var(--plaster)}
.mega a span{display:block; font-size:11px; color:var(--slate); letter-spacing:.04em}
.mega hr{border:0; border-top:1px solid var(--line); margin:.7rem 1.6em}

/* Burger + drawer */
.burger{display:none; width:40px; height:40px; margin-left:auto; position:relative}
.burger span{position:absolute; left:9px; width:22px; height:1px; background:var(--ink); transition:transform .3s, opacity .2s}
.burger span:nth-child(1){top:15px} .burger span:nth-child(2){top:20px} .burger span:nth-child(3){top:25px}
.burger.is-open span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.drawer{
  position:fixed; inset:var(--head-h) 0 0 0; z-index:99; background:var(--paper);
  overflow-y:auto; padding:1rem var(--gutter) 4rem;
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
}
.drawer.is-open{opacity:1; visibility:visible}
.drawer details{border-bottom:1px solid var(--line)}
.drawer summary{list-style:none; padding:1.1em 0; font-size:15px; letter-spacing:.08em; cursor:pointer; display:flex; align-items:center}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary::after{content:"+"; margin-left:auto; color:var(--slate); font-size:16px}
.drawer details[open] summary::after{content:"–"}
.drawer details ul{padding:0 0 1em}
.drawer details a{display:block; padding:.6em 0 .6em 1em; font-size:13.5px; color:var(--slate)}
.drawer > a.drawer__flat{display:block; padding:1.1em 0; border-bottom:1px solid var(--line); font-size:15px; letter-spacing:.08em}
.drawer__cta{margin-top:2rem; display:grid; gap:.75rem}

/* ==========================================================================
   Router
   ========================================================================== */
.page{display:block}
main{padding-top:var(--head-h)}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative; background:var(--plaster)}
.hero__stage{
  position:relative; min-height:clamp(420px,64vh,620px); display:flex; align-items:flex-end;
  background-image:linear-gradient(var(--paper) 1px,transparent 1px),linear-gradient(90deg,var(--paper) 1px,transparent 1px);
  background-size:36px 36px; background-color:var(--plaster-d);
}
.hero__stage::before{
  content:"main visual ／ 施工事例のキービジュアル"; position:absolute; inset:0;
  display:grid; place-content:center; font-size:11px; letter-spacing:.2em; color:#A19C90;
}
.hero__copy{position:relative; width:100%; max-width:1440px; margin-inline:auto; padding:0 var(--gutter) clamp(36px,6vw,64px)}
.hero__title{font-family:var(--display); font-size:clamp(28px,5.6vw,54px); line-height:1.45; letter-spacing:.05em}
.hero__sub{margin-top:1.1rem; max-width:34em; font-size:14px; line-height:2}

/* Swatch strip: Life Catalog への入口 */
.strip{background:var(--ink); color:var(--paper)}
.strip__head{display:flex; align-items:center; gap:1.3em; padding:1.5rem 0 1rem; flex-wrap:wrap}
.strip__title{font-family:var(--display); font-size:19px; letter-spacing:.1em}
.strip__note{font-size:12px; color:#9E9A91; letter-spacing:.06em}
.strip__link{margin-left:auto; font-size:12.5px; letter-spacing:.1em; border-bottom:1px solid #3B3A35; padding-bottom:2px}
.strip__link:hover{border-color:var(--paper)}
.swatches{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:#3B3A35; border-top:1px solid #3B3A35}
.sw{
  position:relative; display:flex; align-items:flex-end; min-height:210px; aspect-ratio:4/3;
  padding:1.1rem 1.1rem 1.2rem; background:#26251F center/cover no-repeat;
  overflow:hidden; isolation:isolate;
}
.sw::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(14,13,11,.82) 0%, rgba(14,13,11,.42) 45%, rgba(14,13,11,.12) 100%);
  transition:background .25s;
}
.sw:hover::before{background:linear-gradient(to top, rgba(14,13,11,.72) 0%, rgba(14,13,11,.28) 45%, rgba(14,13,11,.04) 100%)}
.sw--empty{background-color:#26251F}
.sw__label{position:relative; z-index:1}
.sw__name{display:block; font-family:var(--display); font-size:14px; font-weight:600; letter-spacing:.02em; line-height:1.4; color:#fff}
.sw__no{display:block; margin-top:.25rem; font-size:10.5px; letter-spacing:.1em; color:#D5D1C8}
@media (max-width:1180px){ .swatches{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){ .swatches{grid-template-columns:repeat(2,1fr)} .sw{min-height:150px; padding:.9rem} }

/* ==========================================================================
   Grids & cards
   ========================================================================== */
.grid{display:grid; gap:clamp(20px,3vw,34px)}
.grid > *{min-width:0}   /* aspect-ratio や min-width 付きの子で横にはみ出すのを防ぐ */
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){ .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .grid--2,.grid--3,.grid--4{grid-template-columns:1fr} }

.work__meta{display:flex; flex-wrap:wrap; gap:.5em; margin-top:.7rem}
.tag{font-size:11px; letter-spacing:.06em; color:var(--slate); border:1px solid var(--line); padding:.15em .7em; border-radius:99px}
.work__title{margin-top:.55rem; font-size:15px; letter-spacing:.05em}
.work a:hover .work__title{color:var(--accent)}

/* Service list ── 罫線で区切る一覧 */
.srv{border-top:1px solid var(--line)}
.srv__row{display:grid; grid-template-columns:150px 1fr auto; gap:2rem; align-items:center; padding:1.9rem 0; border-bottom:1px solid var(--line)}
.srv__name{font-family:var(--display); font-size:19px; letter-spacing:.06em}
.srv__name em{display:block; font-style:normal; font-family:var(--sans); font-size:11px; letter-spacing:.16em; color:var(--slate); margin-top:.35em}
.srv__desc{font-size:13.5px; color:var(--slate); line-height:1.95}
@media (max-width:760px){
  .srv__row{grid-template-columns:1fr; gap:.9rem; align-items:start}
  .srv__row .btn{justify-self:start}
}

/* Flow ── シェブロン（矢羽根）型の工程表示
   番号は HTML に直接書く（自動採番だと分割時にずれるため）。
   PC：帯が右向きの矢羽根で連なる。行の変わり目に下向きの矢印。
   SP：1列になり、矢羽根は下向きに変わる。 */
.steps{
  --tip: 20px;
  display:grid; grid-template-columns:repeat(3,1fr);
  column-gap:10px; row-gap:clamp(24px,3vw,36px);
  list-style:none; margin:0; padding:0;
}
.step{min-width:0}
.step__head{
  display:flex; align-items:center; gap:.75em;
  padding:.9rem 1.1rem .9rem calc(var(--tip) + 1rem);
  background:var(--accent); color:#fff; min-height:58px;
  clip-path:polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%, var(--tip) 50%);
}
.step--rowstart .step__head{
  padding-left:1.2rem;
  clip-path:polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%);
}
.step--rowend .step__head{
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--tip) 50%);
}
.step__no{flex:none; font-size:11.5px; letter-spacing:.12em; color:rgba(255,255,255,.72)}
.step__ttl{font-size:14px; font-weight:600; letter-spacing:.03em; line-height:1.4}
.step p{margin-top:.95rem; padding-inline:.2rem; font-size:13px; color:var(--slate); line-height:1.95}

/* 矢羽根そのものが本文まで含む形（6ステップを1行に収める用） */
.steps--solid{--tip:16px; grid-template-columns:repeat(6,1fr); column-gap:8px}
.steps--solid .step{
  background:var(--accent); color:#fff;
  padding:1.05rem .9rem 1.25rem calc(var(--tip) + .8rem);
  clip-path:polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%, var(--tip) 50%);
}
.steps--solid .step--rowstart{
  padding-left:1rem;
  clip-path:polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%);
}
.steps--solid .step--rowend{
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--tip) 50%);
}
.steps--solid .step__head{display:block; background:none; padding:0; min-height:0; color:inherit; clip-path:none}
.steps--solid .step__no{display:block; margin-bottom:.4rem; font-size:11px; color:rgba(255,255,255,.7)}
.steps--solid .step__ttl{display:block; font-size:13.5px; line-height:1.5}
.steps--solid .step p{margin-top:.7rem; padding:0; font-size:12px; line-height:1.85; color:rgba(255,255,255,.85)}
.steps--solid .step p a{color:#fff; border-bottom:1px solid rgba(255,255,255,.5)}
.steps--solid .step p a:hover{border-color:#fff}

/* 中くらいの画面では3列×2行に折り返す */
@media (max-width:1040px) and (min-width:761px){
  .steps--solid{grid-template-columns:repeat(3,1fr); row-gap:14px}
  .steps--solid .step,
  .steps--solid .step--rowstart,
  .steps--solid .step--rowend{
    padding-left:calc(var(--tip) + .8rem);
    clip-path:polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%, var(--tip) 50%);
  }
  .steps--solid .step:nth-child(3n+1){
    padding-left:1rem;
    clip-path:polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%);
  }
  .steps--solid .step:nth-child(3n){
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--tip) 50%);
  }
}
@media (max-width:760px){
  .steps--solid{grid-template-columns:1fr; row-gap:12px}
  .steps--solid .step,
  .steps--solid .step--rowstart,
  .steps--solid .step--rowend,
  .steps--solid .step:nth-child(3n+1),
  .steps--solid .step:nth-child(3n){
    padding:1.05rem 1.2rem calc(var(--tip) + .8rem);
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--tip)), 50% 100%, 0 calc(100% - var(--tip)));
  }
  .steps--solid .step--last{padding-bottom:1.25rem; clip-path:none}
}

/* 行の変わり目（PCのみ） */
.steps__turn{grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:.8rem; height:10px}
.steps__turn::before,.steps__turn::after{content:""; height:1px; width:clamp(40px,10vw,120px); background:var(--line)}
.steps__turn i{
  display:block; width:9px; height:9px;
  border-right:1px solid var(--slate); border-bottom:1px solid var(--slate);
  transform:rotate(45deg) translate(-2px,-2px);
}

@media (max-width:900px){
  .steps{grid-template-columns:1fr; row-gap:16px}
  .steps__turn{display:none}
  .steps:not(.steps--solid) .step__head{
    padding:.9rem 1.2rem calc(var(--tip) + .55rem);
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--tip)), 50% 100%, 0 calc(100% - var(--tip)));
  }
  .steps:not(.steps--solid) .step--rowstart .step__head,
  .steps:not(.steps--solid) .step--rowend .step__head{
    padding-left:1.2rem;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--tip)), 50% 100%, 0 calc(100% - var(--tip)));
  }
  .steps:not(.steps--solid) .step--last .step__head{
    padding-bottom:.9rem;
    clip-path:none;
  }
}

/* ==========================================================================
   Life Catalog
   ========================================================================== */
.lcHero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--ink); color:var(--paper);
  padding-block:clamp(86px,12vw,150px);
}
.lcHero .hero__slides{z-index:-2}
.lcHero .hero__slide{background-position:center 55%}
.lcHero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to right, rgba(14,13,11,.88) 0%, rgba(14,13,11,.62) 52%, rgba(14,13,11,.34) 100%),
    linear-gradient(to top, rgba(14,13,11,.55) 0%, rgba(14,13,11,.15) 55%, rgba(14,13,11,.05) 100%);
}
@media (max-width:760px){
  .lcHero::after{background:linear-gradient(to top, rgba(14,13,11,.90) 0%, rgba(14,13,11,.66) 55%, rgba(14,13,11,.45) 100%)}
}
.lcHero > .wrap{position:relative; z-index:1}
.lcHero__label{font-size:11.5px; letter-spacing:.24em; color:#9E9A91}
.lcHero__title{margin-top:1rem; font-family:var(--display); font-size:clamp(34px,7vw,68px); line-height:1.25; letter-spacing:.06em}
.lcHero__lead{margin-top:1.6rem; max-width:38em; font-size:14.5px; line-height:2.1; color:#CFCBC2}

.lcCard{border:1px solid var(--line); background:var(--paper)}
.lcCard__chips{display:flex; height:12px}
.lcCard__chips i{flex:1}
.lcCard__body{padding:1.4rem 1.5rem 1.6rem}
.lcCard__no{font-size:10.5px; letter-spacing:.18em; color:var(--slate)}
.lcCard__name{margin-top:0; font-family:var(--display); font-size:22px; letter-spacing:.02em}
.lcCard__name small{display:block; font-size:11.5px; letter-spacing:.1em; color:var(--slate); margin-top:.45em; font-weight:400}
.lcCard__tag{margin-top:.8rem; font-size:13px; color:var(--accent); letter-spacing:.02em; line-height:1.7}
.lcCard__desc{margin-top:.7rem; font-size:13px; color:var(--slate); line-height:1.95}
.lcCard__spec{margin-top:1.1rem; padding-top:.9rem; border-top:1px solid var(--line); display:grid; gap:.35rem; font-size:12px; color:var(--slate)}
.lcCard__body .way__list{margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--line)}
.lcCard__desc + .lcCard__desc{margin-top:.9rem}
.lcCard__spec div{display:flex; gap:.8em}
.lcCard__spec dt{width:5.5em; flex:none; color:#918D84}

/* デザインの2構成（エントリー／スタンダード） */
.dgrp + .dgrp{margin-top:clamp(40px,5vw,64px)}
.dgrp__head{
  display:flex; align-items:baseline; gap:.9em 1.2em; flex-wrap:wrap;
  padding-bottom:.9rem; margin-bottom:1.6rem; border-bottom:1px solid var(--line);
}
.dgrp__label{
  flex:none; font-size:10.5px; letter-spacing:.2em; color:#fff;
  background:var(--accent); padding:.35em .9em; border-radius:99px;
}
.dgrp__title{font-size:clamp(17px,2.4vw,21px); font-weight:600; letter-spacing:.04em}
.dgrp__note{flex:1 1 20em; min-width:0; font-size:12.5px; color:var(--slate); line-height:1.9}

/* エントリー（SIMPLE+）の大きな枠 */
.dfeat{border:1px solid var(--line); background:var(--paper); border-radius:var(--radius); overflow:hidden}
.dfeat > a{display:block}
.dfeat__pics{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line)}
.dfeat__pic{position:relative; display:block; aspect-ratio:4/3; background:var(--plaster-d) center/cover no-repeat}
.dfeat__pic em{
  position:absolute; left:.6rem; bottom:1rem; z-index:1;
  font-style:normal; font-size:10.5px; letter-spacing:.1em; color:#fff;
  background:rgba(14,13,11,.62); padding:.25em .7em; border-radius:99px;
}
/* 仕上げごとの3色を、写真の下端に帯で示す */
.dfeat__sw{
  position:absolute; left:0; right:0; bottom:0; height:7px; z-index:1;
  background:linear-gradient(to right,
    var(--c1) 0 33.34%, var(--c2) 33.34% 66.67%, var(--c3) 66.67% 100%);
}
@media (max-width:640px){ .dfeat__pics{grid-template-columns:repeat(2,1fr)} }

.dfeat__body{display:grid; grid-template-columns:1fr 280px; gap:clamp(20px,3vw,40px); padding:clamp(22px,3vw,34px)}
@media (max-width:820px){ .dfeat__body{grid-template-columns:1fr} }
.dfeat__name{font-size:clamp(24px,3.6vw,32px); font-weight:600; letter-spacing:.02em; line-height:1.25}
.dfeat__name small{display:block; margin-top:.5em; font-size:.42em; font-weight:400; letter-spacing:.1em; color:var(--slate)}
.dfeat__tag{margin-top:.9rem; font-size:14px; color:var(--accent); letter-spacing:.02em; line-height:1.7}
.dfeat__desc{margin-top:.8rem; font-size:13px; color:var(--slate); line-height:1.95}
.dfeat__fin{margin-top:1.2rem; display:flex; gap:.5rem; flex-wrap:wrap}
.dfeat__fin span{
  font-size:11.5px; letter-spacing:.04em; color:var(--slate);
  border:1px solid var(--line); border-radius:99px; padding:.3em .9em;
}
.dfeat__price{
  align-self:start; padding:1.4rem 1.4rem 1.5rem; background:var(--plaster);
  border-radius:var(--radius); text-align:center;
}
.dfeat__price p:first-child{font-size:11.5px; letter-spacing:.12em; color:var(--slate)}
.dfeat__big{margin-top:.5rem; font-size:clamp(34px,5.4vw,44px); font-weight:600; line-height:1.1; letter-spacing:.01em}
.dfeat__big span{font-size:.38em; font-weight:500; margin-left:.1em}
.dfeat__big small{display:block; margin-top:.4rem; font-size:.26em; font-weight:400; letter-spacing:.1em; color:var(--slate)}
.dfeat__calc{margin-top:.9rem; padding-top:.8rem; border-top:1px solid var(--line); font-size:11.5px; color:var(--slate); line-height:1.8}
.dfeat__more{display:block; margin-top:1.1rem; font-size:12.5px; letter-spacing:.06em}
.dfeat > a:hover .dfeat__more{text-decoration:underline; text-underline-offset:4px}

/* 3つのつくり方 */
.ways{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.way{background:var(--paper); padding:2rem 1.7rem 2.2rem}
.grid > .way{border:1px solid var(--line); border-radius:var(--radius)}
.way--pick{background:var(--plaster)}
.way__name{font-family:var(--display); font-size:21px; letter-spacing:.08em}
.way__name small{display:block; font-family:var(--sans); font-size:11px; letter-spacing:.16em; color:var(--slate); margin-top:.5em}
.way__desc{margin-top:1rem; font-size:13px; color:var(--slate); line-height:2}
.way__list{margin-top:1.2rem; display:grid; gap:.5rem; font-size:12.5px}
.way__list li{padding-left:1.1em; position:relative; color:var(--slate)}
.way__list li::before{content:""; position:absolute; left:0; top:.85em; width:5px; height:1px; background:var(--accent)}
@media (max-width:820px){ .ways{grid-template-columns:1fr} }

/* Compare table */
.cmp{width:100%; border-collapse:collapse; font-size:13px}
.cmp th,.cmp td{border:1px solid var(--line); padding:.95rem 1.1rem; text-align:left; vertical-align:top}
.cmp thead th{background:var(--plaster); font-weight:500; letter-spacing:.06em}
.cmp tbody th{background:var(--paper); color:var(--slate); font-weight:400; width:11em}
.cmp td{color:var(--slate)}
.tblwrap{overflow-x:auto; max-width:100%}
.tblwrap .cmp{min-width:560px}
/* 幅の狭い段に置く表は、横スクロールさせず幅に収める */
.tblwrap--fit{overflow-x:visible}
.tblwrap--fit .cmp{min-width:0; width:100%; table-layout:auto}
.tblwrap--fit .cmp th,.tblwrap--fit .cmp td{padding:.8rem .85rem; font-size:12.5px; word-break:normal; overflow-wrap:anywhere}
@media (max-width:560px){
  .tblwrap--fit .cmp th,.tblwrap--fit .cmp td{padding:.7rem .6rem; font-size:12px}
}

/* ==========================================================================
   Misc blocks
   ========================================================================== */
.news{border-top:1px solid var(--line)}
.news li{border-bottom:1px solid var(--line)}
.news a{display:grid; grid-template-columns:8.5em 7.5em 1fr; gap:1rem; padding:1.15rem 0; font-size:13.5px; align-items:baseline}
.news time{color:var(--slate); font-size:12.5px; letter-spacing:.06em}
.news em{font-style:normal; font-size:11px; letter-spacing:.1em; color:var(--accent)}
.news a:hover span{text-decoration:underline; text-underline-offset:4px}
@media (max-width:640px){ .news a{grid-template-columns:8.5em 1fr} .news em{grid-column:2} .news span{grid-column:1/-1} }

.msg{background:var(--plaster)}
.msg__body{max-width:34em; font-family:var(--display); font-size:clamp(16px,2.3vw,20px); line-height:2.3; letter-spacing:.06em}
.msg__body p + p{margin-top:1.6em}

.cta{background:var(--accent); color:#fff; text-align:center}
.cta__title{font-family:var(--display); font-size:clamp(22px,3.4vw,32px); letter-spacing:.06em; line-height:1.6}
.cta__sub{margin-top:.9rem; font-size:13.5px; color:#C9D8D2}
.cta__btns{margin-top:2rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap}
.cta .btn--solid{background:var(--paper); color:var(--accent-d)}
.cta .btn--solid:hover{background:#fff}
.cta .btn--line{background:transparent; color:#fff; border-color:rgba(255,255,255,.45)}
.cta .btn--line:hover{border-color:#fff}

.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:1.3rem 0; font-size:14.5px; letter-spacing:.05em; display:flex; gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q"; font-family:var(--display); color:var(--accent); flex:none}
.faq summary::after{content:"+"; margin-left:auto; color:var(--slate)}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 0 1.5rem 2rem; font-size:13.5px; color:var(--slate)}

.form{display:grid; gap:1.4rem; max-width:640px}
.field{display:grid; gap:.5rem}
.field label{font-size:12.5px; letter-spacing:.08em}
.field label span{color:var(--accent); font-size:11px; margin-left:.5em}
.field input,.field select,.field textarea{
  font:inherit; font-size:14px; padding:.85em 1em; border:1px solid var(--line);
  background:var(--paper); border-radius:var(--radius); color:var(--ink); width:100%;
}
.field textarea{min-height:150px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent); outline:none}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}  /* スパム対策のおとり欄 */
.field select optgroup{font-size:12px; color:var(--slate)}
.field select option{font-size:14px; color:var(--ink)}

/* Page hero (下層共通) */
.phero{background:var(--plaster); padding-block:clamp(48px,7vw,80px)}
.phero__en{font-family:var(--display); font-size:clamp(28px,5vw,46px); letter-spacing:.06em; line-height:1.2}
.phero__ja{margin-top:.7rem; font-size:12.5px; letter-spacing:.16em; color:var(--slate)}
.crumb{font-size:11.5px; color:var(--slate); letter-spacing:.06em; margin-bottom:1.4rem}
.crumb a:hover{text-decoration:underline}

/* 地図の埋め込み */
.map{position:relative; aspect-ratio:3/2; overflow:hidden; border-radius:var(--radius); background:var(--plaster-d)}
.map iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}
@media (max-width:820px){ .map{aspect-ratio:4/3} }

/* 連携するグループサービスへのリンク
   ロゴは透過WebP。高さだけを指定し、幅は自動。ロゴごとに見た目の大きさが
   そろうよう --cowcamo / --box で高さを分けている */
.partner{margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--line)}
.partner__label{font-size:10.5px; letter-spacing:.16em; color:var(--slate)}
.partner__list{margin-top:.75rem; display:flex; gap:.6rem; flex-wrap:wrap}
.partner__link{
  display:inline-flex; align-items:center; gap:.55em;
  padding:.55em 1em; border:1px solid var(--line); border-radius:99px;
  background:var(--paper); transition:border-color .18s, background .18s;
}
.partner__link:hover{border-color:var(--ink)}
.partner__logo{display:block; width:auto}
.partner__logo--cowcamo{height:20px}
.partner__logo--box{height:12px}
.partner__ja{font-size:11px; color:var(--slate)}
.partner__link::after{content:"↗"; font-size:10px; color:var(--slate); margin-left:.1em}

/* 私たちの特徴 */
.feat{border-top:1px solid var(--line)}
.feat__item{
  display:grid; grid-template-columns:1fr 1.5fr; gap:clamp(20px,4vw,56px);
  padding:clamp(26px,3.6vw,44px) 0; border-bottom:1px solid var(--line);
}
@media (max-width:860px){ .feat__item{grid-template-columns:1fr; gap:1rem} }
.feat__no{font-size:11px; letter-spacing:.18em; color:var(--accent)}
.feat__title{margin-top:.7rem; font-size:clamp(18px,2.6vw,24px); font-weight:600; letter-spacing:.03em; line-height:1.55}
.feat__body p{font-size:14px; line-height:2.05; color:var(--slate)}
.feat__body p + p{margin-top:1.1rem}
.feat__body a{color:var(--ink); border-bottom:1px solid var(--line)}
.feat__body a:hover{border-color:var(--ink)}

/* メディア掲載 */
.media{border-top:1px solid var(--line)}
.media li{border-bottom:1px solid var(--line)}
.media a{display:grid; grid-template-columns:9em 1fr auto; gap:1rem 1.4rem; padding:1.3rem 0; align-items:baseline}
.media time{font-size:12.5px; color:var(--slate); letter-spacing:.06em}
.media__outlet{display:block; font-size:11.5px; color:var(--accent); letter-spacing:.06em; margin-bottom:.35rem}
.media__title{font-size:14.5px; line-height:1.75; letter-spacing:.02em}
.media a:hover .media__title{text-decoration:underline; text-underline-offset:4px}
.media__ext{font-size:11px; color:var(--slate); white-space:nowrap}
@media (max-width:640px){
  .media a{grid-template-columns:1fr; gap:.4rem}
  .media__ext{display:none}
}

/* お客さまの声 */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
@media (max-width:700px){ .stats{grid-template-columns:1fr} }
.stats div{background:var(--paper); padding:1.6rem 1.4rem; text-align:center}
.stats dt{font-size:11.5px; letter-spacing:.1em; color:var(--slate); line-height:1.7}
.stats dd{margin-top:.6rem; font-size:clamp(30px,5vw,42px); font-weight:600; line-height:1.1; letter-spacing:.01em}
.stats dd span{font-size:.4em; font-weight:500; margin-left:.08em}
.stats dd small{display:block; margin-top:.5rem; font-size:.28em; font-weight:400; letter-spacing:.06em; color:var(--slate)}

.voices{columns:2; column-gap:clamp(20px,3vw,32px)}
@media (max-width:820px){ .voices{columns:1} }
.voice{
  break-inside:avoid; -webkit-column-break-inside:avoid;
  margin:0 0 clamp(20px,3vw,32px);
  border:1px solid var(--line); background:var(--paper);
  border-radius:var(--radius); padding:1.6rem 1.6rem 1.5rem;
}
.voice__mark{font-size:22px; line-height:1; color:var(--accent)}
.voice p{margin-top:.8rem; font-size:14px; line-height:2.05}
.voice__meta{margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--line); display:flex; gap:.45rem; flex-wrap:wrap}
.voice__meta span{
  font-size:11px; letter-spacing:.04em; color:var(--slate);
  border:1px solid var(--line); border-radius:99px; padding:.25em .8em;
}
.voice__meta span.is-top{border-color:var(--accent); color:var(--accent)}

/* 人物カード */
.people{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(24px,3.2vw,44px)}
@media (max-width:820px){ .people{grid-template-columns:1fr} }
.person{border:1px solid var(--line); background:var(--paper); border-radius:var(--radius); padding:1.6rem}
.person__head{display:grid; grid-template-columns:104px 1fr; gap:1.3rem; align-items:start}
@media (max-width:420px){ .person__head{grid-template-columns:84px 1fr; gap:1rem} }
.person__pic{aspect-ratio:1/1; border-radius:50%; background-size:cover; background-position:center 32%; background-color:var(--plaster-d)}
.person__name{font-size:18px; font-weight:600; letter-spacing:.04em; line-height:1.4}
.person__role{margin-top:.35rem; font-size:11.5px; color:var(--slate); letter-spacing:.08em}
.person__comment{margin-top:.9rem; font-size:13px; color:var(--slate); line-height:1.95}
.people__group{margin:clamp(40px,5vw,64px) 0 1.4rem; display:flex; align-items:baseline; gap:.7em}
.people__count{font-size:12px; font-weight:400; color:var(--slate); letter-spacing:.08em}

/* ==========================================================================
   規約・ポリシーページ
   ========================================================================== */
.legal{max-width:780px}
.legal__date{font-size:12.5px; color:var(--slate); letter-spacing:.06em}
.legal__intro{margin-top:1.6rem; font-size:14px; line-height:2.05}
.legal h2{
  margin-top:clamp(38px,5vw,56px); padding-top:1.4rem; border-top:1px solid var(--line);
  font-size:16.5px; font-weight:500; letter-spacing:.06em; line-height:1.6;
}
.legal h3{margin-top:1.8rem; font-size:14px; font-weight:500; letter-spacing:.05em}
.legal p{margin-top:1rem; font-size:14px; line-height:2.05}
.legal ol.num{margin-top:1rem; counter-reset:li; display:grid; gap:.7rem}
.legal ol.num > li{counter-increment:li; position:relative; padding-left:2.4em; font-size:14px; line-height:2}
.legal ol.num > li::before{content:"(" counter(li) ")"; position:absolute; left:0; top:0; color:var(--slate); font-size:13px}
.legal ol.plain{margin-top:1rem; counter-reset:li2; display:grid; gap:.9rem}
.legal ol.plain > li{counter-increment:li2; position:relative; padding-left:2.1em; font-size:14px; line-height:2}
.legal ol.plain > li::before{content:counter(li2) "."; position:absolute; left:0; top:0; color:var(--slate)}
.legal .tblwrap{margin-top:1.4rem}
.legal .cmp{font-size:13px}
.legal .cmp td ul{display:grid; gap:.5rem}
.legal .cmp td li{padding-left:1em; position:relative}
.legal .cmp td li::before{content:""; position:absolute; left:0; top:.95em; width:5px; height:1px; background:var(--accent)}
.legal .box{margin-top:1.4rem; padding:1.5rem 1.7rem; background:var(--plaster); border-radius:var(--radius)}
.legal .box h3{margin-top:1.4rem}
.legal .box h3:first-child{margin-top:0}
.legal address{font-style:normal; margin-top:1rem; font-size:14px; line-height:2.05}

/* LifeCatalog ロゴ */
.lclogo{display:block; width:100%; height:auto}
.lclogo--strip{max-width:170px}
.lclogo--shead{max-width:210px}
.lclogo--hero{max-width:min(320px,62vw); margin-bottom:1.8rem}
.lclogo--phero{max-width:132px; margin-bottom:1.5rem}
@media (max-width:600px){ .lclogo--strip{max-width:140px} .lclogo--shead{max-width:180px} }

/* SIMPLE+ の価格バナー */
.pricebar{background:var(--ink); color:var(--paper); padding-block:clamp(34px,4.5vw,54px)}
.pricebar__inner{display:grid; grid-template-columns:1fr auto auto; gap:clamp(20px,3vw,48px); align-items:center}
@media (max-width:920px){ .pricebar__inner{grid-template-columns:1fr; gap:1.6rem} }
.pricebar__label{font-size:10.5px; letter-spacing:.2em; color:#908C83}
.pricebar__head{margin-top:.7rem; font-size:clamp(15px,2vw,19px); font-weight:500; letter-spacing:.04em; line-height:1.7}
.pricebar__head b{font-weight:600; border-bottom:2px solid var(--accent); padding-bottom:2px}
.pricebar__price{
  display:flex; align-items:baseline; gap:.12em; white-space:nowrap;
  font-size:clamp(46px,8vw,78px); font-weight:600; letter-spacing:-.01em; line-height:1;
}
.pricebar__price span{font-size:.34em; font-weight:500; letter-spacing:.04em}
.pricebar__price small{margin-left:.5em; font-size:.16em; font-weight:400; letter-spacing:.12em; color:#B6B1A7}
.pricebar__side{display:grid; gap:.9rem; justify-items:start; max-width:20em}
.pricebar__note{font-size:11px; color:#908C83; line-height:1.85}
.pricebar .btn--solid{background:var(--accent); color:#fff}
.pricebar .btn--solid:hover{background:#3B6558}

/* ==========================================================================
   価格シミュレーター
   ========================================================================== */
.sim{display:grid; grid-template-columns:1fr 380px; gap:clamp(28px,4vw,56px); align-items:start}
@media (max-width:940px){ .sim{grid-template-columns:1fr} }

.simstep{margin-bottom:clamp(32px,4vw,48px)}
.simstep__head{display:flex; align-items:baseline; gap:.8em; margin-bottom:1.2rem}
.simstep__no{
  font-size:11px; letter-spacing:.14em; color:var(--accent);
  border:1px solid var(--accent); border-radius:99px; padding:.2em .8em; flex:none;
}
.simstep__title{font-size:16px; font-weight:600; letter-spacing:.04em}
.simstep__note{font-size:12.5px; color:var(--slate); margin-top:-.4rem; margin-bottom:1.2rem; line-height:1.9}

/* デザイン選択タイル
   5枚とも同じ縦長の矩形。背景にCGパースを敷き、名前は下端にそろえる。
   名前が2行になっても位置がずれないよう、名前欄の高さを2行分で固定する。 */
.picks{display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
@media (max-width:900px){ .picks{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .picks{grid-template-columns:repeat(2,1fr)} }
.pick{position:relative}
.pick input{position:absolute; opacity:0; width:0; height:0}
.pick span.pick__box{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  aspect-ratio:3/4; padding:.9rem .85rem 1rem;
  background:#26251F center/cover no-repeat;
  border-radius:var(--radius); overflow:hidden; cursor:pointer; isolation:isolate;
  transition:box-shadow .18s;
}
.pick__box::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(14,13,11,.88) 0%, rgba(14,13,11,.45) 42%, rgba(14,13,11,.10) 100%);
  transition:background .25s;
}
.pick:hover .pick__box::before{background:linear-gradient(to top, rgba(14,13,11,.80) 0%, rgba(14,13,11,.30) 42%, rgba(14,13,11,.02) 100%)}
.pick input:checked + .pick__box{box-shadow:0 0 0 3px var(--accent)}
.pick input:focus-visible + .pick__box{outline:2px solid var(--accent); outline-offset:3px}

/* 選択中のチェック */
.pick__box::after{
  content:""; position:absolute; top:.7rem; right:.7rem; width:22px; height:22px; border-radius:50%;
  border:1px solid rgba(255,255,255,.7); background:rgba(20,19,17,.35);
  transition:background .18s, border-color .18s;
}
.pick input:checked + .pick__box::after{
  background:var(--accent) center/11px 9px no-repeat;
  border-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.6 4 7.6 10 1.2' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.pick__name{
  display:flex; align-items:flex-end; min-height:2.7em;
  font-size:12.5px; font-weight:600; letter-spacing:.02em; line-height:1.35; color:#fff;
}
.pick__band{display:block; margin-top:.3rem; font-size:10.5px; color:#D8D4CB; letter-spacing:.02em}

/* 面積入力 */
.areain{display:flex; align-items:center; gap:.8em; flex-wrap:wrap}
.areain input[type=number]{
  font:inherit; font-size:26px; font-weight:600; width:6em; text-align:right;
  padding:.35em .5em; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); color:var(--ink);
}
.areain input[type=number]:focus{border-color:var(--accent); outline:none}
.areain .unit{font-size:15px; color:var(--slate)}
.areain input[type=range]{flex:1 1 220px; min-width:180px; accent-color:var(--accent)}

/* キッチン形状 */
.kitchen{display:none; gap:10px; grid-template-columns:repeat(2,1fr); max-width:420px}
.kitchen.is-on{display:grid}
.kitchen label{position:relative}
.kitchen input{position:absolute; opacity:0; width:0; height:0}
.kitchen span{
  display:block; padding:.9rem 1rem; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--paper); cursor:pointer; font-size:13.5px; text-align:center; transition:border-color .18s, box-shadow .18s;
}
.kitchen input:checked + span{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.kitchen small{display:block; margin-top:.3rem; font-size:11px; color:var(--slate)}

/* 結果パネル */
.result{position:sticky; top:calc(var(--head-h) + 20px); border:1px solid var(--line); background:var(--plaster); border-radius:var(--radius)}
@media (max-width:940px){ .result{position:static} }
.result__body{padding:1.7rem 1.6rem}
.result__label{font-size:11.5px; letter-spacing:.14em; color:var(--slate)}
.result__design{margin-top:.7rem; font-size:15px; font-weight:600; letter-spacing:.02em; line-height:1.5}
.result__design small{display:block; font-size:12px; font-weight:400; color:var(--slate); margin-top:.25rem}
.result__price{margin-top:1.2rem; font-size:clamp(30px,5vw,40px); font-weight:600; letter-spacing:.01em; line-height:1.15}
.result__price span{font-size:.45em; font-weight:400; margin-left:.3em; letter-spacing:.06em}
.result__yen{margin-top:.4rem; font-size:13px; color:var(--slate)}
.result__break{margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid var(--line); display:grid; gap:.5rem; font-size:12.5px; color:var(--slate)}
.result__break div{display:flex; justify-content:space-between; gap:1em}
.result__cta{margin-top:1.6rem; display:grid; gap:.7rem}
.result__note{margin-top:1.2rem; font-size:11px; color:var(--slate); line-height:1.85}

/* 相談ページに引き継いだ内容 */
.carry{border:1px solid var(--accent); border-radius:var(--radius); padding:1.2rem 1.4rem; margin-bottom:1.6rem; background:var(--plaster)}
.carry__label{font-size:11px; letter-spacing:.14em; color:var(--accent)}
.carry__body{margin-top:.6rem; font-size:14px; line-height:1.9}
.carry__body b{font-weight:600}

/* ==========================================================================
   Footer
   ========================================================================== */
.ft{background:var(--ink); color:#C6C2B9; padding-block:clamp(52px,7vw,80px); font-size:12.5px}
.ft__top{display:grid; grid-template-columns:250px 1fr; gap:clamp(28px,5vw,64px); padding-bottom:3rem; border-bottom:1px solid #33322D}
.ft__logo img{display:block; height:48px; width:auto}
.ft__addr{margin-top:1.2rem; line-height:2; color:#8E8A81; font-size:12px}
.ft__nav{display:grid; grid-template-columns:repeat(4,1fr); gap:2rem}
.ft__nav h4{font-size:11px; letter-spacing:.16em; color:var(--paper); margin-bottom:1rem; font-weight:500}
.ft__nav li{margin-bottom:.6rem}
.ft__nav a:hover{color:var(--paper)}
.ft__btm{display:flex; gap:1.5rem; flex-wrap:wrap; align-items:center; padding-top:2rem; color:#8E8A81; font-size:11.5px}
.ft__btm .sp{margin-left:auto}
@media (max-width:860px){ .ft__top{grid-template-columns:1fr} .ft__nav{grid-template-columns:repeat(2,1fr)} }

/* ==========================================================================
   Display typography ── 書体は Noto Sans JP の1ファミリー。ウェイトと字間で階層をつくる
   ========================================================================== */
.strip__title,.sw__name,.lcCard__name,.way__name,
.shead__en,.h-lg,.hero__title,.lcHero__title,.phero__en,.cta__title{font-weight:600}
.hero__title,.lcHero__title,.phero__en,.shead__en,.cta__title,.h-lg{letter-spacing:.01em}
.msg__body{font-weight:400; letter-spacing:.05em}
.faq summary::before{font-weight:500}


/* 写真ブロック */
.pic{background-size:cover; background-position:center; background-color:var(--plaster-d)}
.r3x2{aspect-ratio:3/2} .r4x3{aspect-ratio:4/3} .r1x1{aspect-ratio:1/1}
.r2x3{aspect-ratio:2/3} .rwide{aspect-ratio:16/7} .r3x4{aspect-ratio:3/4}
@media (max-width:600px){ .rwide{aspect-ratio:4/3} }
.hero__stage--img::before{content:none}
.hero__stage--img .hero__copy{background:linear-gradient(to top, rgba(18,17,15,.74), rgba(18,17,15,.34) 55%, transparent); color:#fff; padding-top:7rem; z-index:2}

/* ヒーローのスライドショー（クロスフェード・CSSのみ） */
.hero__slides{position:absolute; inset:0; overflow:hidden}
.hero__slide{
  position:absolute; inset:0; background-size:cover; background-position:center 58%;
  opacity:0; animation:heroFade 28s linear infinite;
}
.hero__slide--base{opacity:1; animation:none}
@keyframes heroFade{
  0%{opacity:0} 4%{opacity:1} 25%{opacity:1} 29%{opacity:0} 100%{opacity:0}
}
/* 5枚まわす場合（1枚あたり7秒 × 5 ＝ 35秒） */
.hero__slides--5 .hero__slide{animation-name:heroFade5; animation-duration:35s}
@keyframes heroFade5{
  0%{opacity:0} 3%{opacity:1} 20%{opacity:1} 23%{opacity:0} 100%{opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .hero__slide{animation:none; opacity:0}
  .hero__slide--base{opacity:1}
}

/* 事例メタ情報 */
.spec{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.spec div{background:var(--paper); padding:1.1rem 1.2rem}
.spec dt{font-size:11px; letter-spacing:.12em; color:var(--slate)}
.spec dd{margin-top:.4rem; font-size:14px; letter-spacing:.03em}
@media (max-width:700px){ .spec{grid-template-columns:repeat(2,1fr)} }

/* ギャラリー（モザイク）
   縦横比を固定した長方形のキャンバスにグリッドを引き、各写真をセルいっぱいに
   敷き詰める（はみ出す分はトリミング）。隙間も余りも出ず、必ず横幅に収まる。
   写真の向きに応じて、横位置向き（--2/--3/--4）と縦位置向き（--2p/--3p/--4p）を使い分ける。 */
.mos{
  --mos-gap: clamp(8px,1.1vw,14px);
  display:grid; gap:var(--mos-gap);
}
.mos > *{min-width:0; min-height:0}
.mos .pic{width:100%; height:100%; aspect-ratio:auto}

/* ---- 横位置の写真が主体 ---- */
/* 2枚：3:2 ＋ 1:1 */
.mos--2{grid-template-columns:1.5fr 1fr; grid-template-rows:1fr; aspect-ratio:5/2}
/* 3枚：大きな4:3 ＋ 小さな4:3 を2枚 */
.mos--3{grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); aspect-ratio:2/1}
.mos--3 > :nth-child(1){grid-column:span 2; grid-row:span 2}
/* 4枚：横長2枚と正方形2枚を互い違いに */
.mos--4{grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); aspect-ratio:3/2}
.mos--4 > :nth-child(1){grid-column:span 2}
.mos--4 > :nth-child(4){grid-column:span 2}

/* ---- 縦位置の写真が主体 ---- */
/* 2枚：2:3 を2枚 */
.mos--2p{grid-template-columns:repeat(2,1fr); grid-template-rows:1fr; aspect-ratio:4/3}
/* 3枚：2:3 を3枚 */
.mos--3p{grid-template-columns:repeat(3,1fr); grid-template-rows:1fr; aspect-ratio:2/1}
/* 4枚：大きな2:3 ＋ 横長 ＋ 細い縦2枚 */
.mos--4p{grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(3,1fr); aspect-ratio:4/3}
.mos--4p > :nth-child(1){grid-column:span 2; grid-row:span 3}
.mos--4p > :nth-child(2){grid-column:span 2}
.mos--4p > :nth-child(3){grid-row:span 2}
.mos--4p > :nth-child(4){grid-row:span 2}

@media (max-width:760px){
  .mos--2,.mos--2p{grid-template-columns:1fr 1fr; aspect-ratio:2/1}
  .mos--2p{aspect-ratio:4/3}
  .mos--3,.mos--3p{grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); aspect-ratio:1/1}
  .mos--3 > :nth-child(1),.mos--3p > :nth-child(1){grid-column:span 2; grid-row:span 1}
  .mos--4,.mos--4p{grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); aspect-ratio:1/1}
  .mos--4 > :nth-child(1),.mos--4 > :nth-child(4),
  .mos--4p > :nth-child(1),.mos--4p > :nth-child(2),
  .mos--4p > :nth-child(3),.mos--4p > :nth-child(4){grid-column:span 1; grid-row:span 1}
}

/* 見出し付きの並び（写真の下にキャプションが入るもの）は等分グリッド */
.galg{display:grid; gap:clamp(12px,1.6vw,20px); grid-template-columns:repeat(4,1fr)}
.galg > *{min-width:0}
@media (max-width:860px){ .galg{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .galg{grid-template-columns:1fr} }
.galcap{margin-top:.6rem; font-size:12px; color:var(--slate)}
.gsub{font-size:12px; letter-spacing:.14em; color:var(--slate); margin:0 0 1rem}

/* Sticky mobile CTA */
.mcta{display:none}
@media (max-width:900px){
  .hd__nav{display:none}
  .hd__cta{display:none}
  .burger{display:block}
  .mcta{
    display:grid; grid-template-columns:1fr 1fr; gap:1px; position:fixed; inset:auto 0 0 0; z-index:90;
    background:var(--line); border-top:1px solid var(--line);
  }
  .mcta--single{grid-template-columns:1fr}
  .mcta a{background:var(--paper); text-align:center; padding:1em; font-size:12.5px; letter-spacing:.06em}
  .mcta a:last-child{background:var(--accent); color:#fff}
  body{padding-bottom:52px}
}