/* TAGUI shared site styles — used by index.html, about.html, service.html, works.html, contact.html */
:root{
  --ink:#1A1A1A;
  --paper:#FFFFFF;
  --paper-2:#FAF9F6;
  --paper-3:#F7F5F1;
  --line:rgba(26,26,26,.14);
  --accent:#9CAF88;
  --cursor-bg:rgba(66,65,85,.8); /* フッターの「CONTACT US」ボックス（.cta-button #424155）と同じ色を、少しだけ透過（不透明度80%） */
  --pad-x:clamp(20px,4.6vw,60px);
  --pad-y-lg:clamp(64px,10.5vw,130px);
  --pad-y-lg-b:clamp(72px,11vw,140px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  font-family:'Zen Kaku Gothic New',system-ui,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
html.fine-pointer body{cursor:none}
a{color:var(--ink)}
img{max-width:100%;display:block}
button{font:inherit;background:none;border:0;color:inherit}
section{position:relative}

/* ---------- custom cursor ---------- */
.cursor-dot{
  position:fixed;top:0;left:0;width:26px;height:26px;border-radius:50%;
  background:var(--cursor-bg);pointer-events:none;z-index:9999;
  opacity:0;transition:opacity .3s ease;transform:translate(-999px,-999px);
  will-change:transform;
}

/* ---------- subpage header (logo + BACK / page title / hamburger) ---------- */
.page-header{
  position:relative;z-index:12;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:clamp(28px,5vw,64px) var(--pad-x) 0;
}
.brand-group{display:flex;align-items:center;gap:clamp(24px,5.5vw,70px)}
.logo{
  font-family:'Jost',sans-serif;font-weight:400;font-size:clamp(17px,2.2vw,23px);
  letter-spacing:.42em;color:var(--ink);text-decoration:none;
  transition:opacity .4s ease,color .4s ease;
}
/* 背景が灰色のブロック（data-header-gray を持つ要素）がロゴの位置まで来たら、ロゴとメニューの二本線を白にする
   （2026-09-20追加。切り替えは site.js の updateHeaderGray）。ABOUT／SERVICEのヒーロー上の白文字化
   （.is-over-hero）とは別の仕組み */
.hero-header.is-on-gray .logo,.page-header.is-on-gray .logo{color:#fff}
/* メニューの二本線（.menu-bar）と、ホバーで出る「MENU」文字（.menu-label）も、ロゴと同じく灰色の上では白にする */
.hero-header.is-on-gray .menu-bar,.page-header.is-on-gray .menu-bar{background:#fff}
.hero-header.is-on-gray .menu-label,.page-header.is-on-gray .menu-label{color:#fff}
/* Same "hide the logo once the closing CTA section fills the screen" effect
   as the TOP page's .hero-header (see site.js) — toggled on #pageHeader. */
.page-header.footer-in-view .logo{opacity:0;pointer-events:none}
.page-title{font-family:'Jost',sans-serif;font-weight:500;font-size:clamp(13px,1.6vw,20px);letter-spacing:.28em;color:var(--ink);text-align:center;white-space:nowrap}

.menu-trigger{
  justify-self:end;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:66px;gap:6px;cursor:pointer;transition:gap .45s cubic-bezier(.6,0,.3,1);
}
.menu-trigger:hover,.menu-trigger:focus-visible{gap:9px}
.menu-bar{display:block;width:100%;height:1px;background:var(--ink);transition:background .4s ease}
.menu-label{
  font-family:'Jost',sans-serif;font-size:12px;line-height:1;letter-spacing:.26em;color:var(--ink);
  opacity:0;max-height:0;overflow:hidden;transform:translateY(3px);
  transition:opacity .3s ease,max-height .45s cubic-bezier(.6,0,.3,1),transform .45s cubic-bezier(.6,0,.3,1),color .4s ease;
}
.menu-trigger:hover .menu-label,.menu-trigger:focus-visible .menu-label{opacity:1;max-height:16px;transform:translateY(0)}

/* ---------- section label / heading ---------- */
.label-line{display:flex;align-items:center;gap:clamp(20px,4vw,38px)}
.label-rule{display:none}
.label{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:'Jost',sans-serif;font-weight:400;font-size:clamp(13px,1.3vw,17px);letter-spacing:.12em;color:var(--ink);
}
.label::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.label-row{display:flex;align-items:baseline;justify-content:space-between}
.section-heading{
  margin:28px 0 0;padding-bottom:22px;border-bottom:1px solid var(--line);
  font-family:'Jost',sans-serif;font-weight:400;font-size:clamp(22px,3vw,32px);letter-spacing:.06em;color:var(--ink);
}

/* ---------- arrow link (CREDO / VIEW SERVICES / VIEW WORKS ...) ---------- */
/* Modeled on nutrad.co.jp's "View more" pill: a small dark-navy capsule button
   with a white arrow, sitting under one full-width underline shared with the
   text. Both the text and the arrow use a duplicate-content slide: hovering
   (".is-hover", added by JS in site.js) transitions the visible copy up/out
   while an identical duplicate slides into its place, so the end state looks
   pixel-identical to the resting state. Because of that, un-hovering can just
   drop the class with no transition (see site.js) instead of playing the
   motion backwards — the swap is invisible either way, so the reveal never
   visibly "reverses" when the cursor leaves mid-animation.
   The text-only half of this pattern (.credo-text/.credo-text-line) is reused
   as-is by the plain footer nav links (.cta-links a / .footer-nav a), which
   have no arrow pill — see the ".is-hover .credo-text-line" rule below. */
.credo-link{
  display:flex;align-items:center;gap:18px;width:max-content;
  text-decoration:none;color:var(--ink);
  padding-bottom:7px;border-bottom:1px solid var(--ink);
}
.credo-text{
  display:block;overflow:hidden;position:relative;line-height:1.2;
}
.credo-text-line{
  display:block;font-family:'Jost',sans-serif;font-size:clamp(15px,1.6vw,19px);letter-spacing:.06em;
  transform:translateY(0);
}
.credo-text-line + .credo-text-line{position:absolute;left:0;top:100%;}
.credo-link.is-hover .credo-text-line,
.cta-links a.is-hover .credo-text-line,
.footer-nav a.is-hover .credo-text-line{
  transition:transform .45s cubic-bezier(.6,0,.3,1);
  transform:translateY(-100%);
}
.credo-arrow-wrap{
  display:flex;align-items:center;flex:none;overflow:hidden;position:relative;
  width:34px;height:20px;border-radius:999px;background:#090C22;
}
.credo-arrow-track{display:flex;flex:none;width:200%;transform:translateX(-50%);}
.credo-link.is-hover .credo-arrow-track{
  transition:transform .45s cubic-bezier(.6,0,.3,1);
  transform:translateX(0);
}
.credo-arrow-item{flex:0 0 50%;display:flex;align-items:center;justify-content:center}
.credo-arrow{display:block;width:14px;height:14px}

/* ---------- outlined number (service/history rows) ---------- */
.no-outline{
  font-family:'Poppins',sans-serif;font-weight:200;letter-spacing:.08em;
  line-height:1;color:transparent;-webkit-text-stroke:1px rgba(26,26,26,.38);
  transition:color .45s ease,-webkit-text-stroke-color .45s ease,letter-spacing .45s ease;
}
.hover-row:hover .no-outline,.hover-row:focus-visible .no-outline{
  font-family:'Jost',sans-serif;font-weight:300;letter-spacing:.02em;
  color:var(--ink);-webkit-text-stroke-color:var(--ink);
}
.service-row .no-outline{
  font-family:'Jost',sans-serif;font-weight:400;letter-spacing:.02em;
  -webkit-text-stroke-width:.75px;
}
.service-row:hover .no-outline,.service-row:focus-visible .no-outline{
  color:#090C22;-webkit-text-stroke-color:#090C22;font-weight:400;
}
.no-outline-svg-text{
  font-family:'Jost',sans-serif;font-weight:400;letter-spacing:.02em;
  fill:transparent;stroke:rgba(26,26,26,.38);stroke-width:.75px;
  stroke-linejoin:round;stroke-linecap:round;
  transition:fill .45s ease,stroke .45s ease,letter-spacing .45s ease;
}
.service-row:hover .no-outline-svg-text,.service-row:focus-visible .no-outline-svg-text{
  fill:#090C22;stroke:#090C22;
}

/* ---------- CTA (closing mark) ---------- */
.cta{background:var(--paper);padding:clamp(70px,12vw,140px) var(--pad-x) clamp(50px,8vw,90px)}
.cta-mark{margin:0;font-family:'Jost',sans-serif;font-weight:450;font-size:clamp(40px,9vw,140px);line-height:1;letter-spacing:.06em;color:var(--ink)}
.cta-info{margin-top:clamp(48px,8vw,96px);display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px 60px}
.cta-details{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;align-content:start}
.cta-detail-label{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.18em;color:var(--ink)}
.cta-detail-value{font-weight:400;font-size:13.5px;letter-spacing:.06em;color:var(--ink)}
.cta-detail-value a{color:inherit;text-decoration:none}
.cta-links{display:grid;grid-template-columns:repeat(2,auto);gap:16px 52px;align-content:start}
.cta-links a{text-decoration:none;color:var(--ink);display:block}
.cta-links a .credo-text-line{font-size:13px;letter-spacing:.22em;}
.cta-foot{margin-top:clamp(40px,7vw,80px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 40px}
.cta-tagline{font-weight:400;font-size:13px;letter-spacing:.12em;color:var(--ink)}
.cta-legal{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.cta-copyright{font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:.18em;color:var(--ink)}
.cta-legal a{text-decoration:none;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.2em;color:var(--ink);transition:opacity .3s ease}
.cta-legal a:hover,.cta-legal a:focus-visible{opacity:.55}
@media (max-width:640px){
  .cta-info{flex-direction:column;gap:40px}
}
.cta-button{
  margin-top:clamp(60px,9vw,110px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  background:#424155;padding:clamp(28px,5vw,52px) clamp(24px,5vw,56px);text-decoration:none;color:#fff;
  transition:background .3s ease;
}
.cta-button:hover,.cta-button:focus-visible{background:#52516A}
.cta-button span:nth-child(2){font-family:'Jost',sans-serif;font-size:clamp(18px,3vw,30px);letter-spacing:.18em;text-align:center}
.cta-button .cta-arrow{justify-self:end;display:block;width:64px;height:12px;overflow:hidden}
.cta-button .cta-arrow svg{display:block;width:64px;height:12px}
.cta-button:hover .cta-arrow-svg,.cta-button:focus-visible .cta-arrow-svg{animation:arrowsweep 1.1s cubic-bezier(.6,0,.3,1) infinite}
@keyframes arrowsweep{0%{transform:translateX(0)}45%{transform:translateX(112%)}46%{transform:translateX(-112%)}100%{transform:translateX(0)}}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);padding:clamp(48px,8vw,70px) var(--pad-x) clamp(40px,6vw,60px)}
.footer-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:30px 60px}
.footer-address{font-weight:300;font-size:13.5px;letter-spacing:.08em;color:#D6D6D6}
.footer-nav{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,52px)}
.footer-nav a{text-decoration:none;color:#D6D6D6;display:block}
.footer-nav a .credo-text-line{font-size:13px;letter-spacing:.24em;}
.footer-bottom{margin-top:clamp(70px,14vw,190px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:30px 60px}
.footer-legal{display:flex;flex-direction:column;gap:14px}
.footer-copyright{font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:.18em;color:#9A9A9A}
.footer-legal a{text-decoration:none;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.2em;color:#6E6E6E}
.footer-social{display:flex;gap:28px;align-items:center}
.footer-social a{text-decoration:none;font:400 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;color:#D6D6D6}

/* ---------- menu overlay ---------- */
/* 右側からスライドして出る濃紺のパネル（参考：NUTRADのメニュー）。ページ本体は
   暗くせず、パネルが上に重なるだけ。scrimは「パネルの外をクリックして閉じる」
   ための透明な当たり判定。閉じる時にスライドアウトを最後まで見せるため、
   visibilityは閉じたあとに遅らせて切り替える。 */
.menu-overlay{position:fixed;inset:0;z-index:50;visibility:hidden;transition:visibility 0s linear .7s}
.menu-overlay.is-open{visibility:visible;transition-delay:0s}
.menu-overlay__scrim{position:absolute;inset:0;background:transparent;cursor:none}
.menu-overlay__panel{
  position:absolute;top:0;right:0;bottom:0;width:clamp(300px,33vw,560px);
  display:flex;flex-direction:column;
  background:#090C22;color:#fff;
  padding:0 var(--pad-x) clamp(28px,4vw,48px) 12%;
  overflow-y:auto;
  transform:translateX(100%);transition:transform .7s cubic-bezier(.16,1,.3,1);
}
.menu-overlay.is-open .menu-overlay__panel{transform:translateX(0)}
.menu-overlay__head{flex:1;display:flex;flex-direction:column;justify-content:center}
.menu-overlay__nav{display:flex;flex-direction:column;gap:clamp(24px,2.8vw,40px)}
.menu-overlay__nav a{text-decoration:none;display:block}
/* ホバー時に他の項目を薄くする。表示アニメーション(aの opacity/transform)と干渉しないよう、内側の.enに掛ける */
.menu-overlay__nav .en{display:block;font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(20px,1.9vw,28px);letter-spacing:.14em;color:#fff;transition:opacity .3s ease}
.menu-overlay__nav:hover .en{opacity:.45}
.menu-overlay__nav a:hover .en,.menu-overlay__nav a:focus-visible .en{opacity:1}
.menu-close{position:absolute;top:39px;right:var(--pad-x);display:flex;align-items:center;gap:16px;cursor:pointer;color:#fff}
.menu-close-label{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.3em;color:rgba(255,255,255,.78)}
.menu-close-icon{position:relative;width:22px;height:22px;display:block}
.menu-close-icon span{position:absolute;top:10px;left:0;width:22px;height:1px;background:#fff}
.menu-close-icon span:first-child{transform:rotate(45deg)}
.menu-close-icon span:last-child{transform:rotate(-45deg)}
.menu-overlay__foot{padding-top:26px;border-top:1px solid rgba(255,255,255,.2)}
.menu-overlay__foot a{text-decoration:none;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.3em;color:rgba(255,255,255,.75)}
/* パネルが開ききる頃から、項目・閉じるボタン・下部リンクが順番にふわっと現れる
   （参考動画と同じ）。閉じる時は遅延なしで素早く消える。 */
.menu-overlay__nav a,.menu-overlay__foot,.menu-close{opacity:0;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease}
.menu-overlay.is-open .menu-overlay__nav a,
.menu-overlay.is-open .menu-overlay__foot,
.menu-overlay.is-open .menu-close{
  opacity:1;transform:none;
  transition:opacity .7s ease var(--d,.3s),transform .7s cubic-bezier(.16,1,.3,1) var(--d,.3s);
}
.menu-overlay.is-open .menu-close{--d:.3s}
.menu-overlay.is-open .menu-overlay__nav a:nth-child(1){--d:.4s}
.menu-overlay.is-open .menu-overlay__nav a:nth-child(2){--d:.48s}
.menu-overlay.is-open .menu-overlay__nav a:nth-child(3){--d:.56s}
.menu-overlay.is-open .menu-overlay__nav a:nth-child(4){--d:.64s}
.menu-overlay.is-open .menu-overlay__foot{--d:.75s}
.reduce-motion .menu-overlay,.reduce-motion .menu-overlay__panel,
.reduce-motion .menu-overlay__nav a,.reduce-motion .menu-overlay__foot,.reduce-motion .menu-close{transition:none}
.reduce-motion .menu-overlay__nav a,.reduce-motion .menu-overlay__foot,.reduce-motion .menu-close{opacity:1;transform:none}

@media (max-width:640px){
  .page-header{grid-template-columns:auto 1fr auto;column-gap:16px}
  .brand-group{gap:16px}
  .page-title{font-size:12px;letter-spacing:.2em}
}

/* ---------- subpage hero (ABOUT / SERVICE) ---------- */
.page-hero{
  position:relative;overflow:hidden;cursor:none;min-height:clamp(520px,78vh,820px);
  background:repeating-linear-gradient(135deg,#DCD8D0 0 14px,#D2CEC5 14px 28px);
}
.page-hero .page-header{padding-top:clamp(56px,10vw,112px)}
.page-hero-caption{
  position:absolute;left:var(--pad-x);bottom:24px;
  font:400 11px/1.6 ui-monospace,Menlo,monospace;letter-spacing:.14em;color:#4A4A4A;
}
/* Starts hidden/scaled down; TAGUI.zoomOutHeroPanel() in site.js reveals it
   sized to fit .page-hero-center's text, then zooms it out to full size
   shortly after page load (see site.js for the full behaviour). */
.page-hero-panel{position:absolute;inset:clamp(24px,5vw,70px);background:rgba(250,249,246,.86);transform-origin:50% 50%;opacity:0;will-change:transform}
.page-hero-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:12;
  display:flex;align-items:center;gap:clamp(20px,6vw,72px);flex-wrap:wrap;justify-content:center;
  text-align:center;padding:0 var(--pad-x);max-width:100%;
}
.page-hero-title{
  margin:0;font-family:'Jost',sans-serif;font-weight:500;font-size:clamp(42px,9vw,80px);
  line-height:1.06;letter-spacing:-.01em;color:var(--ink);text-align:right;
}
.page-hero-title .hl{background:linear-gradient(var(--accent),var(--accent)) 0 78% / 100% 34% no-repeat}
/* 帯の色が自動で変わる版（ABOUT／SERVICEのヒーロー用：class="hl hl--cycle"）。
   太さ・位置は上の .hl と同じ。色は参考写真（布見本）から抜き出した実際の色調で、
   2秒ごとに次の色へ切り替わり（なめらかに移り変わる）、10色・20秒で1周する。
   帯の色は登録済みのCSS変数(--hl-band)をkeyframesで動かしている。文字色は常に黒のまま
   （色が変わっても切り替えない）。
   非対応のブラウザや「動きを減らす」設定では最初の色（#E2B968）のまま止まる。 */
@property --hl-band{syntax:'<color>';inherits:false;initial-value:#E2B968}
@keyframes hl-band-cycle{
  0%,100%{--hl-band:#E2B968}  /* マスタード */
  10%{--hl-band:#C18B55}      /* オレンジ（からし） */
  20%{--hl-band:#C27352}      /* 赤橙（テラコッタ） */
  30%{--hl-band:#AA3C41}      /* 赤 */
  40%{--hl-band:#721E2C}      /* ワイン */
  50%{--hl-band:#D8B0AC}      /* ピンク */
  60%{--hl-band:#C2CDA1}      /* 若草 */
  70%{--hl-band:#476F54}      /* 深い緑 */
  80%{--hl-band:#70B1C4}      /* 青緑 */
  90%{--hl-band:#5996AC}      /* 青 */
}
.page-hero-title .hl.hl--cycle{
  --hl-band:#E2B968;
  background:linear-gradient(var(--hl-band),var(--hl-band)) 0 78% / 100% 34% no-repeat;
  animation:hl-band-cycle 20s ease-in-out infinite;
}
.reduce-motion .page-hero-title .hl.hl--cycle{animation:none}
@media (prefers-reduced-motion:reduce){.page-hero-title .hl.hl--cycle{animation:none}}
/* 帯が6秒ごとに「文字の下半分 ⇄ 上半分」へ、起き上がってめくれるように入れ替わる版
   （ABOUTのヒーロー用：class="hl hl--cycle hl--flip"。SERVICE等は従来の下半分固定のまま）。
   帯を文字の後ろの独立した層（::before）にし、帯の色サイクル（hl-band-cycle）はそのまま、
   その層を「文字の高さの中央を軸に」180°ずつ回す（rotateX）。下の帯（高さ34%・上から78%）を中央軸で
   180°回すと、ちょうど上の対称な位置（上から22%）に着地するので、位置を別に計算しなくてよい。
   反転の途中は帯が細い線のように立ち上がって見える（perspectiveで奥行きを付けている）。
   12秒で1周：5秒静止→1秒で反転（=6秒の時点で入れ替わり）→5秒静止→1秒で反転（=12秒）を繰り返す。 */
@keyframes hl-band-flip{
  0%,41.6667%{transform:perspective(520px) rotateX(0deg)}
  50%,91.6667%{transform:perspective(520px) rotateX(180deg)}
  100%{transform:perspective(520px) rotateX(360deg)}
}
.page-hero-title .hl.hl--flip{position:relative;isolation:isolate;background:none;animation:none}
.page-hero-title .hl.hl--flip::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  --hl-band:#E2B968;
  background:linear-gradient(var(--hl-band),var(--hl-band)) 0 78% / 100% 34% no-repeat;
  animation:hl-band-cycle 20s ease-in-out infinite,hl-band-flip 12s cubic-bezier(.65,0,.35,1) infinite;
}
.reduce-motion .page-hero-title .hl.hl--flip::before{animation:none}
@media (prefers-reduced-motion:reduce){.page-hero-title .hl.hl--flip::before{animation:none}}
.page-hero-sub{
  font-family:'Jost',sans-serif;font-weight:400;font-size:clamp(15px,2vw,22px);line-height:1.7;
  letter-spacing:.02em;color:var(--ink);text-align:left;
}