@charset "utf-8";
/* ============================================================
   丹後北都グループ  トップページ
   ------------------------------------------------------------
   白ベース。面はすべて白で、区切りは罫線と写真の大きさで付ける。
   色が出るのは「2つの入り口」の英字だけ ― 建設＝紺青 / 不動産＝ティール。
   墨はフッターのみ、ページの底として。
   ============================================================ */

:root{
  /* base */
  --ink:#16202A;          /* 墨（濃面・本文） */
  --ink-2:#3B4854;
  --dim:#78848D;
  --paper:#FFFFFF;
  --tint:#F7F6F3;         /* ごく淡い面（茶天苑のカードだけ） */
  --line:#E4E2DD;
  --line-2:#EFEDE9;
  --line-d:rgba(255,255,255,.16);
  --ft-bg:#3A3F44;        /* フッターの濃いグレー */

  /* brand（入り口だけで使う） */
  --navy:#0B4A82;         /* 丹後北都建設 */
  --teal:#3F8288;         /* 丹後北都不動産（現行サイトのティールを踏襲） */

  /* 8pxグリッド */
  --s1:8px;  --s2:16px; --s3:24px; --s4:32px;
  --s6:48px; --s8:64px; --s12:96px; --s16:128px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
  font-size:16px;
  line-height:2;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3{margin:0;font-weight:400;line-height:1.5}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
b,strong{font-weight:700}

.en{font-family:"Outfit",sans-serif;font-weight:400;letter-spacing:.1em}
.mincho{font-family:"Zen Old Mincho","Noto Serif JP",serif}

.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:clamp(20px,5vw,48px)}
.wrap--nr{max-width:840px}
.about .wrap--nr{max-width:900px}

/* 見出し上の英字ラベル */
.eyeb{
  font-family:"Outfit",sans-serif;font-weight:600;
  font-size:11px;letter-spacing:.24em;color:var(--dim);line-height:1;
}

/* ------------------------------------------------------------
   ボタン
   ------------------------------------------------------------ */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  column-gap:12px;overflow:hidden;isolation:isolate;
  min-width:232px;padding:16px 38px;
  border:1px solid var(--ink);border-radius:999px;
  background:transparent;
  transition:border-color .4s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--ink);
  transform:scaleX(0);transform-origin:right center;
  transition:transform .45s var(--ease);
}
.btn__t{font-size:14.5px;font-weight:500;letter-spacing:.08em;line-height:1;transition:color .35s var(--ease)}
.btn__i{
  position:relative;width:20px;height:20px;flex:none;border-radius:50%;
  background:var(--ink);display:grid;place-items:center;
  transition:background-color .35s var(--ease);
}
.btn__i svg{width:9px;height:8px;fill:var(--paper);transition:fill .35s var(--ease)}
.btn--sm{min-width:0;padding:11px 20px}
.btn--sm .btn__t{font-size:12.5px}
.btn--sm .btn__i{width:16px;height:16px}
.btn--sm .btn__i svg{width:7px;height:6px}
.btn__mail{display:none}

@media (hover:hover) and (pointer:fine){
  a:hover .btn::before,.btn:hover::before{transform:scaleX(1);transform-origin:left center}
  a:hover .btn .btn__t,.btn:hover .btn__t{color:var(--paper)}
  a:hover .btn .btn__i,.btn:hover .btn__i{background:var(--paper)}
  a:hover .btn .btn__i svg,.btn:hover .btn__i svg{fill:var(--ink)}
}

/* 濃面に置くボタン */
.btn--onDark{border-color:rgba(255,255,255,.4)}
.btn--onDark .btn__t{color:var(--paper)}
.btn--onDark::before{background:var(--paper)}
.btn--onDark .btn__i{background:var(--paper)}
.btn--onDark .btn__i svg{fill:var(--ink)}
@media (hover:hover) and (pointer:fine){
  a:hover .btn--onDark{border-color:var(--paper)}
  a:hover .btn--onDark .btn__t{color:var(--ink)}
  a:hover .btn--onDark .btn__i{background:var(--ink)}
  a:hover .btn--onDark .btn__i svg{fill:var(--paper)}
}

/* ------------------------------------------------------------
   ヘッダー
   ------------------------------------------------------------ */
.hd{
  position:fixed;top:0;left:0;right:0;z-index:100;
  color:var(--paper);
  transition:background-color .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease);
}
/* ヒーローの上では白文字が写真に負けるので、ヘッダーの裏にだけ黒を敷く。
   下へ抜ける長めのグラデーションにして、帯に見えないようにする */
.hd::before{
  content:"";position:absolute;left:0;right:0;top:0;height:200px;z-index:-1;
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(8,15,22,.64) 0%,rgba(8,15,22,.44) 34%,
    rgba(8,15,22,.18) 68%,rgba(8,15,22,0) 100%);
  transition:opacity .4s var(--ease);
}
.hd.is-solid::before{opacity:0}

.hd::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--paper);opacity:0;
  transition:opacity .4s var(--ease);
}
.hd.is-solid{color:var(--ink);box-shadow:0 1px 0 rgba(22,32,42,.08)}
.hd.is-solid::after{opacity:1}

.hd__in{
  display:flex;align-items:center;gap:var(--s4);
  padding:var(--s3) clamp(20px,5vw,48px);
  transition:padding .4s var(--ease);
}
.hd.is-solid .hd__in{padding-block:14px}

.logo{display:inline-flex;align-items:center;flex:none}
.logo__tx{display:block;line-height:1.3}
.logo__tx b{display:block;font-size:27px;font-weight:700;letter-spacing:.08em}
/* 和文を外したので英字がロゴ本体。添え字のときの opacity / margin は外す */
.logo__tx i{
  display:block;font-style:normal;font-family:"Outfit",sans-serif;font-weight:700;
  font-size:31px;letter-spacing:.08em;
}

/* フッターのロゴはヘッダーより一段小さく。
   .ft__brand が min-width:280px なので、字幅がそこを超えないところで止める。
   ※ メディアクエリの外に置くこと（中に入れると PC に効かない） */
.logo--ft .logo__tx i{font-size:clamp(14px,4vw,22px);letter-spacing:.06em}

.gnav{display:flex;align-items:center;gap:clamp(20px,2.6vw,40px);margin-left:auto}
.gnav a{position:relative;display:block;padding-block:6px}
.gnav b{font-size:16.5px;font-weight:500;letter-spacing:.06em;white-space:nowrap}
.gnav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease);
}
@media (hover:hover) and (pointer:fine){.gnav a:hover::after{transform:scaleX(1);transform-origin:left}}

.hd__act{display:flex;align-items:center;gap:var(--s3);flex:none}

/* ------------------------------------------------------------
   ハンバーガー ＋ ドロワー（1024px 未満）
   ------------------------------------------------------------ */
.burger{
  display:none;
  position:relative;z-index:3;
  width:44px;height:44px;flex:none;
  padding:0;border:0;background:transparent;cursor:pointer;
  color:inherit;
}
.burger span{
  position:absolute;left:11px;width:22px;height:1.5px;
  background:currentColor;border-radius:2px;
  transition:transform .45s var(--ease),opacity .3s var(--ease);
}
.burger span:nth-child(1){top:18px}
.burger span:nth-child(2){top:25px}
.is-menu .burger span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.is-menu .burger span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.menu{
  display:none;
  position:fixed;inset:0;z-index:1;
  /* すりガラス。背面が透けて、そのぶんをぼかす。
     clip-path と backdrop-filter の併用は効かない環境があるので、
     開閉は transform で行う */
  background:rgba(22,32,42,.35);color:var(--paper);
  -webkit-backdrop-filter:blur(28px) saturate(1.4);
  backdrop-filter:blur(28px) saturate(1.4);
  transform:translateY(-100%);
  transition:transform .6s var(--ease),visibility 0s .6s;
  visibility:hidden;
  overflow-y:auto;overscroll-behavior:contain;
}
/* backdrop-filter 非対応環境では、読めるように濃く敷く */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .menu{background:rgba(22,32,42,.94)}
}
.is-menu .menu{transform:none;visibility:visible;transition:transform .6s var(--ease),visibility 0s}

.menu__in{
  min-height:100%;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:128px clamp(24px,7vw,48px) 56px;
}
.menu__list li+li{margin-top:clamp(26px,5vw,36px)}
.menu__list a{display:block}
.menu__list b{
  display:block;
  font-family:"Zen Old Mincho",serif;font-weight:500;
  font-size:clamp(18px,4.6vw,22px);letter-spacing:.1em;line-height:1.4;
}
[data-type="gothic"] .menu__list b{
  font-family:"Noto Sans JP",sans-serif;font-weight:500;letter-spacing:.1em;
}

.menu__foot{margin-top:clamp(40px,8vw,64px);padding-top:var(--s4);border-top:1px solid var(--line-d)}
/* 濃面のドロワーでは、お問い合わせだけ白ベタで浮かせる。
   ドロワーは <header class="hd"> の中にあるので、後方の .hd .btn（墨ベタ）に
   同じ詳細度で後勝ちされる。.hd を1つ足して確実に上書きする */
.hd .menu__foot .btn{
  width:100%;min-width:0;padding:16px 38px;
  background:var(--paper);border-color:var(--paper);
}
.hd .menu__foot .btn::before{content:none}
.hd .menu__foot .btn__t{color:var(--ink);font-size:14.5px;letter-spacing:.08em}
.hd .menu__foot .btn__i{background:var(--ink);width:20px;height:20px}
.hd .menu__foot .btn__i svg{fill:var(--paper);width:9px;height:8px}
/* 共通のホバー（文字が白へ抜ける）が効くと白地に白になるので打ち消す */
@media (hover:hover) and (pointer:fine){
  .hd .menu__foot .btn:hover{background:var(--ink);border-color:var(--ink)}
  .hd .menu__foot .btn:hover .btn__t{color:var(--paper)}
  .hd .menu__foot .btn:hover .btn__i{background:var(--paper)}
  .hd .menu__foot .btn:hover .btn__i svg{fill:var(--ink)}
}

/* 中身は面が開いたあとに1つずつ */
.menu__list li,.menu__foot{
  opacity:0;transform:translateY(20px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.is-menu .menu__list li,.is-menu .menu__foot{opacity:1;transform:none}
.is-menu .menu__list li:nth-child(1){transition-delay:.30s}
.is-menu .menu__list li:nth-child(2){transition-delay:.38s}
.is-menu .menu__list li:nth-child(3){transition-delay:.46s}
.is-menu .menu__list li:nth-child(4){transition-delay:.54s}
.is-menu .menu__foot{transition-delay:.64s}

/* 開いている間はヘッダーを濃面用の色に固定し、背面のスクロールを止める */
.is-menu{overflow:hidden}
.is-menu .hd{color:var(--paper);box-shadow:none}
.is-menu .hd::before,.is-menu .hd::after{opacity:0}
.is-menu .hd__in{position:relative;z-index:2}
.is-menu .hd .btn--sm{opacity:0;pointer-events:none;transition:opacity .25s}

/* ヘッダーのCTAは墨で塗りつぶす。他のボタン（白地に枠線）と塗りで区別する */
.hd .btn{
  border-color:var(--ink);background:var(--ink);
  padding:13px 30px;
  transition:background-color .35s var(--ease),border-color .35s var(--ease);
}
.hd .btn__t{color:var(--paper);font-size:16.5px;letter-spacing:.06em}   /* gnav と揃える */
.hd .btn__i{background:var(--paper);width:18px;height:18px}
.hd .btn__i svg{fill:var(--ink)}
.hd .btn::before{background:var(--paper)}
@media (hover:hover) and (pointer:fine){
  .hd .btn:hover{background-color:var(--paper);border-color:var(--paper)}
  .hd .btn:hover .btn__t{color:var(--ink)}
  .hd .btn:hover .btn__i{background:var(--ink)}
  .hd .btn:hover .btn__i svg{fill:var(--paper)}
}

/* ------------------------------------------------------------
   ヒーロー
   ------------------------------------------------------------ */
.hero{
  position:relative;
  min-height:640px;height:100svh;
  display:flex;align-items:flex-end;
  overflow:hidden;background:var(--ink);
}
/* 視差で transform を毎フレーム書き換えるので、この層に transition は付けない
   （付けると戻ってきたときに画像がぬるっと動いてしまう） */
.hero__media{
  position:absolute;inset:-6% 0 0;
  opacity:0;transition:opacity 1.2s ease;
  will-change:transform;
}
.hero.is-ready .hero__media{opacity:1}
.hero__media picture{
  position:absolute;inset:0;display:block;
  transform:translateY(2%);transition:transform 1.6s var(--ease);
}
.hero.is-ready .hero__media picture{transform:none}
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  transform:scale(1.02);
}
/* ゆっくり寄る。40秒かけて 1.02 → 1.10、動いていると気づかない速さ */
.hero.is-ready .hero__media img{animation:kb 40s linear 1.2s forwards}
@keyframes kb{to{transform:scale(1.10) translateY(-1%)}}

.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(8,15,22,.52) 0%,rgba(8,15,22,.30) 30%,rgba(8,15,22,.06) 60%,rgba(8,15,22,.14) 100%),
    linear-gradient(to right,rgba(8,15,22,.34) 0%,rgba(8,15,22,.05) 55%,rgba(8,15,22,0) 100%);
}

.hero__in{
  position:relative;
  width:100%;
  padding:0 clamp(20px,5vw,48px) clamp(56px,8vh,96px);
  color:var(--paper);
}
.hero__ttl{margin:0}
.hero__en{
  display:block;
  font-family:"Outfit",sans-serif;font-weight:300;
  font-size:clamp(46px,9.4vw,136px);
  line-height:.98;letter-spacing:0;
  text-shadow:0 2px 40px rgba(6,12,18,.32);
}
.hero__en span{display:block}
.hero__ja{
  display:block;
  font-family:"Zen Old Mincho",serif;font-weight:400;
  font-size:clamp(15px,1.9vw,23px);
  line-height:1.7;letter-spacing:.14em;
  margin-top:clamp(20px,2.2vw,30px);
  padding-left:.14em;
}

/* 入場 */
.hero__en span,.hero__ja{
  opacity:0;transform:translateY(20px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.hero.is-ready .hero__en span:nth-child(1){opacity:1;transform:none;transition-delay:.32s}
.hero.is-ready .hero__en span:nth-child(2){opacity:1;transform:none;transition-delay:.44s}
.hero.is-ready .hero__ja{opacity:1;transform:none;transition-delay:.64s}

.hero__scroll{
  position:absolute;right:clamp(20px,5vw,48px);bottom:0;z-index:2;
  color:var(--paper);
  font-size:11px;font-weight:500;letter-spacing:.3em;line-height:1;
  writing-mode:vertical-rl;
  padding-bottom:104px;
  text-shadow:0 1px 12px rgba(6,12,18,.5);
  opacity:0;transition:opacity .8s var(--ease) 1.1s;
}
.hero.is-ready .hero__scroll{opacity:1}
/* SP でサイト内から戻ってきたときは登場演出なし（header-group.php の .hero-skip） */
.hero-skip .hero__media,.hero-skip .hero__media picture,
.hero-skip .hero__en span,.hero-skip .hero__ja,.hero-skip .hero__scroll{transition:none!important}
/* main.js（本文末尾）が動く前の最初の描画から出ている必要があるので、is-ready を待たずに表示状態にする */
.hero-skip .hero__media{opacity:1}
.hero-skip .hero__media picture{transform:none}
.hero-skip .hero__en span,.hero-skip .hero__ja{opacity:1;transform:none}
.hero-skip .hero__scroll{opacity:1}
@media (hover:hover) and (pointer:fine){
  .hero__scroll:hover{opacity:.7}
}

/* 縦のレールを、短い線が繰り返し滑り落ちる */
.hero__scroll i{
  position:absolute;bottom:0;left:50%;margin-left:-.5px;
  width:1px;height:88px;
  background:rgba(255,255,255,.3);overflow:hidden;
}
.hero__scroll i::after{
  content:"";position:absolute;left:0;top:0;width:100%;height:38%;
  background:var(--paper);
  animation:scr 2.2s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes scr{
  0%{transform:translateY(-130%)}
  62%,100%{transform:translateY(300%)}
}

/* ------------------------------------------------------------
   ABOUT
   ------------------------------------------------------------ */
.about{
  position:relative;overflow:hidden;
  background:var(--paper);
  padding-block:clamp(88px,13vw,176px);
  text-align:center;
}

/* 左右の余白に、サイズも縦位置も揃えないサブ写真を4枚。
   スクロールで1枚ずつ、ふわっと持ち上がりながら出る */
.about__ph{
  position:absolute;margin:0;
  overflow:hidden;
  pointer-events:none;
}
/* 視差で上下に動かすぶん、画像は枠より 20% 大きく持たせて余白が覗かないようにする
   （移動量は JS 側で枠の高さの ±9% までに抑えている） */
.about__ph img{
  position:absolute;left:0;top:-10%;
  width:100%;height:120%;object-fit:cover;
  will-change:transform;
}

/* 端からの距離・縦位置・大きさを4枚ともバラバラにする。
   左右で「端の1枚＋内側の1枚」が対にならないよう、高さ方向もずらす */
.about__ph--1{left: clamp(8px,1.2vw,20px);    top:13%; width:clamp(132px,14vw,200px);  aspect-ratio:4/5}
.about__ph--2{left: clamp(112px,14vw,220px);  top:52%; width:clamp(76px,7.5vw,108px);  aspect-ratio:1/1}
.about__ph--3{right:clamp(40px,5vw,72px);     top:26%; width:clamp(132px,13vw,196px);  aspect-ratio:16/10}
.about__ph--4{right:clamp(8px,1vw,16px);      top:62%; width:clamp(126px,14vw,198px); aspect-ratio:3/4}
.about__ph--5{left: 0;                        top:74%; width:clamp(104px,10.5vw,152px);aspect-ratio:5/4}

/* 本文より前に出さない。奥に置いた添えものとして扱う */
.about .wrap{position:relative;z-index:1}

/* 本文とは別に、セクションに入ったら1枚ずつ順に浮かび上がる。
   出る順は 左上 → 右上 → 左中 → 右下 → 左下 のジグザグ */
.about__ph--1{--d:0}
.about__ph--3{--d:1}
.about__ph--2{--d:2}
.about__ph--4{--d:3}
.about__ph--5{--d:4}

.js .about__ph.r{opacity:0;transform:translateY(44px) scale(1.05)}
.js .about__ph.r.is-in{
  opacity:1;transform:none;
  transition:opacity 1.5s var(--ease),transform 1.7s var(--ease);
  transition-delay:calc(var(--d,0) * 300ms);
}

@media (max-width:1279px){.about__ph{display:none}}


.about__ttl{
  font-family:"Zen Old Mincho",serif;font-weight:500;
  font-size:clamp(26px,3.6vw,44px);
  line-height:1.66;letter-spacing:.05em;
}
.about__body{margin-top:var(--s6)}
.about__body+.about__body{margin-top:0}
.about__body p{
  font-size:15px;line-height:2.28;letter-spacing:.05em;color:var(--ink-2);
  text-align:justify;text-justify:inter-character;
}
.about__body b{color:var(--ink);font-weight:500}
.about__steps{
  margin-top:var(--s6);
  display:grid;gap:10px;
  font-family:"Zen Old Mincho",serif;font-weight:400;
  font-size:clamp(19px,2.2vw,27px);line-height:1.75;letter-spacing:.12em;
}
.about__steps li{position:relative}
.about__steps+.about__body{margin-top:var(--s6)}

.br-pc{display:none}
.br-sp{display:inline}
@media (min-width:860px){.br-pc{display:inline}
  .br-sp{display:none}}

@media (min-width:721px){
  .about__body p{text-align:center;text-justify:auto}
}
/* 改行位置を指定してある段落は、両端揃えにすると行が間延びするので常に中央 */
.about__body p.brk{text-align:center;text-justify:auto}

/* ------------------------------------------------------------
   2つの入り口 ― このページの主役
   写真を敷き、フィルターを掛け、その上に文字を載せたカード。
   01は面いっぱいに、02は白の中に浮かせて下げ、左右対称にしない。
   ------------------------------------------------------------ */
.gates{
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--paper);
}

/* article はグリッド行の高さまで伸びるので、中のリンクも一緒に伸ばす。
   でないと背の低い側のカードの下に白が残る */
.gate{display:flex}
.gate__link{
  position:relative;display:block;overflow:hidden;
  flex:1 1 auto;width:100%;
  background:var(--ink);color:var(--paper);
  isolation:isolate;
}
.gate__bg{position:absolute;inset:0}
.gate__bg img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.gate__bg::after{
  content:"";position:absolute;inset:0;opacity:0;
  transition:opacity .6s var(--ease);mix-blend-mode:multiply;
}
.gate__scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(8,15,22,.86) 0%,rgba(8,15,22,.62) 34%,
    rgba(8,15,22,.24) 68%,rgba(8,15,22,.10) 100%);
  transition:opacity .6s var(--ease);
}

.gate__body{
  position:relative;
  padding:clamp(160px,22vw,300px) clamp(24px,3.2vw,56px) clamp(32px,3.6vw,56px);
  padding-left:clamp(84px,8.4vw,132px);
}
/* 英字はカードの左上隅に密着させて立てる。読みは上から下、白の透かし */
.gate__en{
  position:absolute;z-index:1;
  /* 縦組みの行ボックスは em 幅ぶん取られ、字面の左に余りが出る。
     font-size 基準の em で引き戻して、カードの端に字面を合わせる */
  left:-.12em;top:0;
  writing-mode:vertical-rl;
  color:var(--paper);
  font-size:clamp(32px,4vw,58px);letter-spacing:.02em;font-weight:400;line-height:1;
  opacity:.5;margin:0;
  pointer-events:none;
}
/* 左右で高さが違うと、下のリード文の開始位置がずれる。
   ロゴ画像の高さ（幅 ÷ アスペクト 5.747）を共通の器にして、文字組み側もそこへ収める */
.gate__name{
  --logo-w:clamp(240px,29vw,392px);
  height:calc(var(--logo-w) / 5.747);
  display:flex;align-items:center;
  font-family:"Zen Old Mincho",serif;font-weight:600;
  font-size:clamp(24px,2.5vw,34px);letter-spacing:.08em;
  margin-top:18px;
}
/* どちらも実ロゴ（元データの濃色版をマスクで白に起こしたもの） */
.gate__name--logo img{
  width:var(--logo-w);height:auto;display:block;
}
/* 建設のロゴは1段組（不動産は英文＋和文の2段）で、同じ幅だと和文だけ小さく見える。
   和文の高さが揃う 1.07 倍で置く。箱の高さ(.gate__name)は不動産基準のまま揃える */
/* 1段組で視覚的な重心が上にくるぶん、少し下げて不動産と見た目の位置を揃える
   （%はロゴ自身の高さ基準なので、幅が変わっても同じ比率で追従する） */
.gate--cnst .gate__name--logo img{ width:calc(var(--logo-w) * 1.07); transform:translateY(14%); }
.gate__lead{
  margin-top:var(--s3);
  font-size:14.5px;line-height:2.14;letter-spacing:.04em;color:rgba(255,255,255,.8);
  text-align:justify;text-justify:inter-character;
}
.gate .btn{margin-top:var(--s6)}

/* 2枚は同じ寸法で隙間なく並べる。差はブランド色だけ */
.gate__link{min-height:clamp(440px,46vw,640px)}

/* 縦長のカードでは左右が切られる。人物が入る右寄りを残す */
.gate--cnst .gate__bg img{object-position:60% 50%}
.gate--cnst .gate__bg::after{background:var(--navy)}

.gate--est .gate__bg::after{background:var(--teal)}

@media (hover:hover) and (pointer:fine){
  .gate__link:hover .gate__bg img{transform:scale(1.06)}
  .gate__link:hover .gate__bg::after{opacity:.3}
  .gate__link:hover .gate__scrim{opacity:.82}
}

/* ------------------------------------------------------------
   サブの入り口（茶天苑）― 重みを落とす
   ------------------------------------------------------------ */
.sub{background:var(--paper);border-top:1px solid var(--line);padding-block:clamp(48px,6vw,88px) clamp(96px,12vw,176px)}
.sub__card{
  display:flex;align-items:center;gap:clamp(28px,4vw,56px);
  background:var(--tint);
  padding:28px clamp(32px,3.6vw,56px) 28px 28px;
  transition:background-color .4s var(--ease),box-shadow .4s var(--ease);
}
.sub__media{position:relative;width:clamp(120px,18vw,232px);flex:none;overflow:hidden;background:#EDEAE3}
.sub__media img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 1s var(--ease)}
.sub__body{flex:1;min-width:0}
.sub__name{
  font-family:"Zen Old Mincho",serif;font-weight:600;
  font-size:clamp(17px,1.6vw,21px);letter-spacing:.1em;margin-top:10px;
}
.sub__lead{margin-top:8px;font-size:13.5px;line-height:1.95;letter-spacing:.04em;color:var(--ink-2)}
.sub__card .btn{flex:none}
@media (hover:hover) and (pointer:fine){
  .sub__card:hover{background:var(--paper);box-shadow:0 14px 44px -20px rgba(22,32,42,.28)}
  .sub__card:hover .sub__media img{transform:scale(1.05)}
}

/* ------------------------------------------------------------
   フッター
   ------------------------------------------------------------ */
.ft{background:var(--ft-bg);color:var(--paper);padding-block:clamp(56px,7vw,88px) 0}
.ft .wrap{max-width:none}
.ft__top{display:flex;gap:clamp(32px,6vw,88px);flex-wrap:wrap}
.ft__brand{flex:1 1 320px;min-width:280px}
.ft__addr{margin-top:var(--s3);font-size:13px;letter-spacing:.05em;color:rgba(255,255,255,.7);line-height:1.95}
.ft__tel{
  display:inline-flex;align-items:center;gap:.42em;margin-top:12px;
  font-family:"Outfit",sans-serif;font-weight:400;font-size:23px;letter-spacing:.04em;
}
/* TEL の文字は受話器アイコンに置き換え */
.ft__tel span{display:block;width:.84em;height:.84em;flex:none;color:var(--paper)}
.ft__tel svg{width:100%;height:100%;display:block;fill:currentColor}
.ft__note{font-size:11.5px;letter-spacing:.06em;color:rgba(255,255,255,.55);margin-top:4px}

.ft__col{flex:0 0 auto;min-width:132px}
.ft__col .eyeb{color:rgba(255,255,255,.45)}
.ft__col ul{margin-top:var(--s2)}
.ft__col li+li{margin-top:2px}
.ft__col a{position:relative;font-size:13.5px;letter-spacing:.06em;color:rgba(255,255,255,.82)}
.ft__col a::after{
  content:"";position:absolute;left:0;bottom:2px;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);
}
@media (hover:hover) and (pointer:fine){.ft__col a:hover::after{transform:scaleX(1);transform-origin:left}}

.ft__btm{
  margin-top:clamp(40px,5vw,72px);padding-block:var(--s3) var(--s4);
  border-top:1px solid var(--line-d);
  display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;
  font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.6);
}
.ft__btm small{font-size:10.5px;letter-spacing:.14em}

/* ============================================================
   書体バリエーション：ゴシック
   ------------------------------------------------------------
   nishinokensetsukogyo.co.jp を参考に、和文を Noto Sans JP へ。
   本文 weight 500 ／ 字間を広く取り、明朝の品を字間とウェイトで置き換える。
   欧文は Outfit のまま、Light(300)→Regular(400) に締めて硬さを出す。
   ============================================================ */
[data-type="gothic"] body{font-weight:500;letter-spacing:.02em}

[data-type="gothic"] .hero__en{font-weight:400;letter-spacing:-.005em}
[data-type="gothic"] .hero__ja{
  font-family:"Noto Sans JP",sans-serif;font-weight:500;
  font-size:clamp(14px,1.75vw,21px);letter-spacing:.2em;line-height:1.8;
}

[data-type="gothic"] .about__ttl{
  font-family:"Noto Sans JP",sans-serif;font-weight:500;
  font-size:clamp(24px,3.3vw,40px);letter-spacing:.1em;line-height:1.72;
}
[data-type="gothic"] .about__body p{font-weight:400;letter-spacing:.08em}
[data-type="gothic"] .about__steps{
  font-family:"Noto Sans JP",sans-serif;font-weight:500;
  font-size:clamp(18px,2vw,25px);letter-spacing:.16em;line-height:1.85;
}

[data-type="gothic"] .gate__name{
  font-family:"Noto Sans JP",sans-serif;font-weight:700;letter-spacing:.1em;
}
[data-type="gothic"] .gate__lead{font-weight:400}
[data-type="gothic"] .sub__name{
  font-family:"Noto Sans JP",sans-serif;font-weight:700;letter-spacing:.14em;
}
[data-type="gothic"] .sub__lead{font-weight:400}

/* ------------------------------------------------------------
   スクロールリビール
   ------------------------------------------------------------ */
.js .r{opacity:0;transform:translateY(24px)}

/* 入り口カードは1枚ずつ。写真は少し引いた状態から定位置へ落ち着かせる */
.js .gate.r{opacity:0;transform:translateY(52px)}
.js .gate.r .gate__bg{transform:scale(1.09)}
.js .gate.r.is-in{
  opacity:1;transform:none;
  transition:opacity 1.1s var(--ease),transform 1.25s var(--ease);
  transition-delay:calc(var(--d,0) * 240ms);
}
.js .gate.r.is-in .gate__bg{
  transform:none;
  transition:transform 1.9s var(--ease);
  transition-delay:calc(var(--d,0) * 240ms);
}
/* 左端の縦組み英字は、上からマスクが外れるように現れる */
.js .gate.r .gate__en{clip-path:inset(0 0 100% 0)}
.js .gate.r.is-in .gate__en{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.5s var(--ease);
  transition-delay:calc(var(--d,0) * 240ms + 280ms);
}
.js .r.is-in{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:calc(var(--d,0) * 110ms);
}
/* 茶天苑カードは .r の出現アニメの transition で hover 用の transition が上書きされ、
   ベージュ→白が一瞬で切り替わっていた。両方をまとめて指定し直す */
.js .sub__card.r.is-in{
  transition:opacity .8s var(--ease),transform .8s var(--ease),
             background-color .5s var(--ease),box-shadow .5s var(--ease);
}
.js .r[data-d="1"]{--d:1}
.js .r[data-d="2"]{--d:2}
.js .r[data-d="3"]{--d:3}
.js .r[data-d="4"]{--d:4}
.js .r[data-d="5"]{--d:5}

@media (prefers-reduced-motion:reduce){
  .js .r,.js .about__ph.r,.js .gate.r{opacity:1;transform:none}
  .js .gate.r .gate__bg{transform:none}
  .js .gate.r .gate__en{clip-path:none}
  .about__ph img{transform:none!important}
  .hero__media,.hero__en span,.hero__ja,.hero__scroll{
    opacity:1!important;transform:none!important;animation:none!important;
  }
  .hero__media img,.hero__media picture{transform:none!important;animation:none!important}
  .hero__scroll i::after{animation:none}
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width:1180px){
  .gnav{gap:var(--s3)}
  .btn{min-width:200px}
}

@media (max-width:1024px){
  .gnav{display:none}
  .hd__act{margin-left:auto}
  .burger{display:block}
  .menu{display:block}
}

@media (max-width:860px){
  .gates{grid-template-columns:1fr}
  .gate__link{min-height:clamp(400px,66vw,500px)}
  .gate__body{padding-top:clamp(180px,38vw,240px)}
}

@media (max-width:640px){
  body{font-size:15px}

  .hd__in{padding:14px clamp(16px,4vw,24px);gap:12px}
  .hd.is-solid .hd__in{padding-block:10px}
  .logo__tx i{font-size:clamp(13px,4.5vw,31px);letter-spacing:.06em}
  .hd__act{gap:8px;align-self:flex-start}
  /* お問い合わせは丸いメールアイコン1つに。ヘッダー右上へ寄せる */
  .hd .btn--sm{
    width:44px;height:44px;min-width:0;padding:0;
    border-radius:50%;
  }
  .hd .btn--sm .btn__t,.hd .btn--sm .btn__i{display:none}
  .hd .btn--sm .btn__mail{display:grid;place-items:center;width:19px;height:19px}
  .hd .btn--sm .btn__mail svg{width:100%;height:auto;fill:var(--paper);transition:fill .35s var(--ease)}
  .hd .btn--sm:hover .btn__mail svg{fill:var(--ink)}

  .hero{min-height:560px;height:100vh;height:100svh}
  .hero__in{padding-bottom:clamp(48px,7vh,76px)}
      .hero__ja{letter-spacing:.1em;line-height:1.85}
    .hero__scroll{
    right:16px;font-size:9.5px;letter-spacing:.24em;padding-bottom:76px;
  }
  .hero__scroll i{height:64px}

  .about{padding-block:clamp(64px,16vw,96px)}
  .about__ttl{line-height:1.75}
  .about__body{margin-top:var(--s4)}
  .about__body p{font-size:14px;line-height:2.14}
  /* 改行位置を指定した段落は、指定外で折り返さないよう vw で字を詰める。
     最長行は24文字（丹後北都グループは、〜拠点に、）＝ 24 × fs × 1.05 が内寸に収まる値 */
  .about__body p.brk{font-size:clamp(11px,3.3vw,16px)}
  .about__steps{margin-top:var(--s4);gap:6px;font-size:18px;letter-spacing:.08em}
  .about__steps+.about__body{margin-top:var(--s4)}

  .gate__body{padding:clamp(160px,44vw,220px) clamp(20px,5vw,28px) var(--s4);padding-left:76px}
  .gate__en{left:-.12em;top:0;font-size:42px;letter-spacing:.02em}
  .gate .btn{margin-top:var(--s4);width:100%;min-width:0}

  .sub__card{flex-wrap:wrap;padding:20px 20px 28px}
  .sub__media{width:100%;flex:1 1 100%}
  .sub__media img{aspect-ratio:2/1}
  .sub__body{flex:1 1 100%;margin-top:var(--s2)}
  .sub__card .btn{width:100%;min-width:0;margin-top:var(--s3)}

  /* SP は縦積みなので、全部センター揃えにして重心を真ん中に置く */
  .ft{text-align:center}
  .ft__top{gap:var(--s6);flex-direction:column;align-items:center}
  .ft__brand,.ft__col{min-width:0;flex:none;width:100%}
  .ft__tel{justify-content:center}
  .ft__col ul{margin-top:12px}
  .ft__btm{
    font-size:11px;
    flex-direction:column;justify-content:center;align-items:center;gap:12px;
  }
}

/* フォーカス可視 */
a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.hd:not(.is-solid) a:focus-visible{outline-color:#fff}