/* =========================================================
   StudioArte — Home v1
   Art direction (internal): Living Architecture x Luminous Grid
   ※この内部名称はサイト上に表示しない
   ========================================================= */

:root{
  /* palette */
  --base:      #F2F5F4;
  --mist:      #DCE7EA;
  --pale:      #AABDC7;
  --structure: #253D4B;
  --cyan:      #39BDEB;
  --ink:       #10191E;

  --text:      var(--structure);
  --text-soft: #5C7480;
  --hairline:  rgba(37, 61, 75, .14);

  /* type（シート指定: Avenir Next / Noto Sans JP / Noto Serif JP。LatinはAvenir Next近似のMulish） */
  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans:  "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --latin: "Mulish", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  /* metrics（ChatGPT側仕様: Desktop基準1440px・最大コンテンツ幅1280px・外側余白72〜80px） */
  --gutter: clamp(20px, 5.5vw, 80px);
  --measure: 1440px;   /* padding込み。実コンテンツ幅は最大1280px */

  /* HERO の仮背景（画像が無い/読めない場合もこの空気を保つ） */
  --hero-fallback:
    radial-gradient(120% 78% at 62% 26%, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(90% 46% at 34% 90%, rgba(57,189,235,.10) 0%, rgba(57,189,235,0) 70%),
    linear-gradient(178deg, #FAFCFC 0%, #EDF4F6 34%, #D6E4EA 62%, #B7CAD4 86%, #A2B7C4 100%);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--base);
  color:var(--text);
  font-family:var(--sans);
  font-weight:300;
  font-size:15px;
  line-height:2;
  letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,p{ margin:0; }
a{ color:inherit; text-decoration:none; }

:focus-visible{
  outline:1px solid var(--cyan);
  outline-offset:4px;
}

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  padding:10px 16px; background:#fff; font-size:13px;
}
.skip:focus{ left:12px; top:12px; }

.wrap{
  width:100%; max-width:var(--measure);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* セクションごとの空気の微差（GPT指示 2026-08-25） */
.contact{ background:#F4F7F7; }

/* section label ------------------------------------------------ */
.label{
  font-family:var(--latin);
  font-size:11px; font-weight:400;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--text-soft);
  padding-bottom:14px;
  border-bottom:1px solid var(--hairline);
}
.label--sub{ border-bottom:none; padding-bottom:0; color:var(--pale); }
.label--center{ border-bottom:none; text-align:center; padding-bottom:0; }

/* =========================================================
   HEADER
   ========================================================= */
.head{
  position:fixed; inset:0 0 auto 0; z-index:50;
  transition:background-color .5s ease, box-shadow .5s ease;
}
.head--solid{
  background:rgba(247,250,250,.92);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--hairline);
}

.head__bar{
  max-width:var(--measure); margin-inline:auto;
  padding:20px var(--gutter);           /* Hero上: 高さ約84px */
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  transition:padding .45s ease;
}
.head--solid .head__bar{ padding-block:11px; }  /* スクロール後: 高さ約66px */

/* シート準拠：ロゴは大きめ・広いトラッキング */
.head__logo{
  font-family:var(--latin);
  font-size:clamp(17px,1.7vw,22px);
  font-weight:500; letter-spacing:.26em;
  color:var(--structure);
}

.head__nav ul{ display:flex; gap:clamp(24px,3.4vw,52px); }
.head__nav a{
  font-family:var(--latin);
  font-size:12px; font-weight:400; letter-spacing:.2em;
  color:var(--structure);
  position:relative; padding-block:4px;
}
.head__nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--cyan);
  transition:right .45s cubic-bezier(.2,.7,.2,1);
}
.head__nav a:hover::after{ right:0; }

.head__toggle{
  display:none;
  width:40px; height:40px; margin-right:-8px;
  border:0; background:none; padding:0; cursor:pointer;
}
.head__toggleLines{ display:block; position:relative; height:8px; }
.head__toggleLines i{
  position:absolute; left:6px; right:6px; height:1px;
  background:var(--structure);
  transition:transform .35s ease, opacity .35s ease;
}
.head__toggleLines i:first-child{ top:0; }
.head__toggleLines i:last-child{ bottom:0; }
[aria-expanded="true"] .head__toggleLines i:first-child{ transform:translateY(3.5px) rotate(11deg); }
[aria-expanded="true"] .head__toggleLines i:last-child{ transform:translateY(-3.5px) rotate(-11deg); }

.menu{
  background:rgba(242,245,244,.96);
  backdrop-filter:blur(16px);
  border-top:1px solid var(--hairline);
  padding:8px var(--gutter) 28px;
}
.menu a{
  display:block;
  padding:14px 0;
  border-bottom:1px solid var(--hairline);
  font-family:var(--latin);
  font-size:14px; letter-spacing:.18em;
}

/* =========================================================
   HERO
   ========================================================= */
/* シート準拠：コピーは左・縦中央 */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
  isolation:isolate;
}

.hero__media{
  position:absolute; inset:-2% -2% -6%;
  z-index:-2;
  background-color:#EDF4F6;
  /* 1枚目 = 差し替え対象の本番画像（PC: 2560x1600 / 16:10）/ 2枚目以降 = 仮の空気 */
  background-image:url("../images/hero/hero-main-desktop.webp"), var(--hero-fallback);
  background-size:cover, cover;
  background-position:center 42%, center;
  background-repeat:no-repeat;
  will-change:transform;
}

/* 文字の可読性のための、ごく薄い明るいベール（コピーは左中央なので左からのベールを主にする） */
.hero__glow{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to right, rgba(250,252,252,.55) 0%, rgba(250,252,252,0) 56%),
    linear-gradient(to top, rgba(242,245,244,.34) 0%, rgba(242,245,244,0) 30%);
}

.hero__inner{
  position:relative;
  width:100%; max-width:var(--measure);
  margin-inline:auto;
  padding:0 var(--gutter);
  margin-top:-6vh;   /* シートの位置（中央よりわずかに上）。JSのparallax transformと干渉させない */
  will-change:transform;
}

.hero__copy{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(30px,3.3vw,58px);
  line-height:1.72;
  letter-spacing:.08em;
  color:var(--structure);
  max-width:19em;
}

/* Light Response — Hero上のカーソル追従光（GSAPがx/y/opacityを書く） */
.hero__pointerLight{
  position:absolute; left:0; top:0; z-index:0;
  width:min(46vw,620px); height:min(46vw,620px);
  translate:-50% -50%;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(circle, rgba(57,189,235,.10) 0%, rgba(57,189,235,0) 62%);
}
.hero__inner{ z-index:1; }

/* シート準拠：コピー下の小さな英語サブコピー */
.hero__sub{
  font-family:var(--latin);
  font-size:clamp(10.5px,0.9vw,12.5px);
  font-weight:400; letter-spacing:.24em;
  color:var(--text-soft);
  margin-top:clamp(22px,3.2vh,36px);
  padding-left:3px;
}

/* シート準拠：Scrollキューは左下・縦 */
.hero__cue{
  position:absolute; left:var(--gutter); bottom:clamp(36px,6vh,64px);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-family:var(--latin);
  font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--text-soft);
}
.hero__cueText{ writing-mode:vertical-rl; }
.hero__cueLine{
  display:block; width:1px; height:clamp(36px,6vh,64px);
  background:linear-gradient(to bottom, rgba(37,61,75,.1), var(--cyan));
}

/* =========================================================
   SELECTED WORKS
   ========================================================= */
.works{
  background:#F7F9F8;
  padding-block:clamp(88px,9.5vw,148px) clamp(84px,9vw,136px);
}

/* シート準拠：同サイズ2列・画像の上に白文字オーバーレイ */
.works__list{
  display:grid;
  gap:clamp(20px,2.2vw,30px);
  margin-top:clamp(48px,5.5vw,76px);
}
@media (min-width:768px){
  .works__list{ grid-template-columns:1fr 1fr; }
}

.work__link{ position:relative; display:block; overflow:hidden; }

.work__figure{
  margin:0;
  background:var(--mist);
  aspect-ratio:3/2;
}
.work__figure img{
  width:100%; height:100%; object-fit:cover;
  transition:filter .65s ease;
}
.work__link:hover .work__figure img{ filter:brightness(1.06) saturate(1.04); }

/* 内部視差（Soft Connect）用の余白：PC・マウス環境のみ画像を縦に少し大きく持つ。
   transform(yPercent±5)はGSAPが書く */
@media (hover:hover) and (pointer:fine){
  .work__figure img{ height:114%; }
  .studio__visual img{ height:110%; }
}

.work__body{
  position:absolute; inset:auto 0 0 0;
  padding:clamp(20px,2.6vw,34px);
  color:#fff;
  background:linear-gradient(to top, rgba(16,25,30,.58) 0%, rgba(16,25,30,.18) 62%, rgba(16,25,30,0) 100%);
}

.work__title{
  font-family:var(--latin);
  font-size:clamp(17px,1.7vw,25px);
  font-weight:500; letter-spacing:.12em;
}

.work__cat{
  font-family:var(--latin);
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
  margin-top:8px;
}

.work__more{
  margin-top:clamp(12px,1.6vw,20px);
  font-family:var(--latin);
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
}
.work__more span{
  display:inline-block; padding-bottom:5px;
  border-bottom:1px solid rgba(255,255,255,.35);
  transition:border-color .4s ease;
}
.work__link:hover .work__more span{ border-color:var(--cyan); }

/* =========================================================
   STUDIO
   ========================================================= */
.studio{ position:relative; overflow:hidden; }

.studio__air{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(78% 60% at 76% 8%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(60% 50% at 12% 96%, rgba(57,189,235,.07) 0%, rgba(57,189,235,0) 72%),
    linear-gradient(172deg, #E7EFF2 0%, #F4F7F7 52%, #FBFCFC 100%);
}

.studio__main{
  position:relative; z-index:1;
  padding-block:clamp(104px,10.5vw,148px) clamp(84px,8.4vw,122px);
}

/* テキストと補助ビジュアル（studio-vision 16:10）の2列。SPは縦積み */
.studio__grid{
  display:grid; gap:clamp(40px,5.8vw,84px);
  align-items:center;
}
@media (min-width:900px){
  .studio__grid{ grid-template-columns:minmax(0,41fr) minmax(0,59fr); }
}

.studio__visual{
  margin:0; overflow:hidden;
  background:var(--mist);
  aspect-ratio:16/10;
}
.studio__visual img{ width:100%; height:100%; object-fit:cover; }

.studio__lead{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(27px,3.2vw,48px);
  line-height:1.5; letter-spacing:.03em;
  color:var(--structure);
}
/* PCでは「願いを、現象にする。」を必ず1行に（「す/る。」等の途中改行禁止） */
@media (min-width:900px){
  .studio__lead{ white-space:nowrap; font-size:clamp(30px,3.1vw,48px); }
}
.studio__grid{ margin-top:clamp(40px,5.5vw,80px); }

.studio__text{
  margin-top:clamp(26px,3.4vw,46px);
  font-size:14px; line-height:2.35;
  color:var(--text-soft);
}

.studio__more{ margin-top:clamp(32px,4vw,58px); }
.studio__more a,
.contact__more a{
  display:inline-block;
  font-family:var(--latin);
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--structure);
  padding-bottom:8px;
  border-bottom:1px solid var(--hairline);
  transition:border-color .4s ease;
}
.studio__more a::after,
.contact__more a::after{ content:" →"; letter-spacing:0; }
.studio__more a:hover,
.contact__more a:hover{ border-color:var(--cyan); }

/* Tools / Tech — Studio内の小型ブロック（白背景・細い罫線・線画アイコン） */
.tools{
  margin-top:clamp(46px,5.8vw,86px);
  background:#F7F9F8;
  border-top:1px solid rgba(37,61,75,.10);
  border-bottom:1px solid rgba(37,61,75,.10);
  padding:clamp(17px,2vw,26px) clamp(4px,1vw,14px);
  display:flex; align-items:center; gap:clamp(20px,3vw,44px);
  flex-wrap:wrap;
}
.tools__label{
  font-family:var(--latin);
  font-size:9.5px; font-weight:400;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--pale);
  flex:none;
}
.tools__list{
  display:flex; flex-wrap:wrap;
  gap:clamp(18px,2.6vw,40px) clamp(22px,3vw,44px);
  flex:1;
}
.tools__item{
  display:flex; align-items:center; gap:9px;
  font-family:var(--latin);
  font-size:12.5px; letter-spacing:.12em;
  color:var(--text-soft);
  white-space:nowrap;
}
.tools__icon{
  width:22px; height:22px; flex:none;
  fill:none; stroke:var(--pale); stroke-width:1;
  stroke-linecap:round; stroke-linejoin:round;
}
.tools__item:hover .tools__icon{ stroke:var(--cyan); }  /* Signal Cyanはhoverの一点アクセント */
.tools__more{
  flex:none; margin-left:auto;
  font-family:var(--latin);
  font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
}
.tools__more a{
  color:var(--text-soft);
  padding-bottom:5px;
  border-bottom:1px solid var(--hairline);
  transition:border-color .4s ease;
}
.tools__more a:hover{ border-color:var(--cyan); }

/* Tools / Lab ---------------------------------------------------- */
.lab{
  position:relative; z-index:1;
  background:rgba(255,255,255,.72);
  border-top:1px solid var(--hairline);
  padding-block:clamp(34px,4.4vw,58px);
}
/* リスト＋補助ビジュアル（tools-lab-support 16:9）。SPは縦積み */
.lab__grid{ display:grid; gap:clamp(28px,4vw,56px); align-items:center; }
@media (min-width:900px){
  .lab__grid{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }
}
.lab__visual{
  margin:0; overflow:hidden;
  background:var(--mist);
  aspect-ratio:16/9;
}
.lab__visual img{ width:100%; height:100%; object-fit:cover; }

.lab__list{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  border-top:1px solid var(--hairline);
}
.lab__item{
  display:flex; align-items:center; gap:11px;
  padding:16px 4px;
  border-bottom:1px solid var(--hairline);
}
.lab__icon{
  width:17px; height:17px; flex:none;
  fill:none; stroke:var(--pale); stroke-width:1;
  stroke-linecap:round; stroke-linejoin:round;
}
.lab__name{
  font-family:var(--latin);
  font-size:11.5px; letter-spacing:.14em;
  color:var(--text-soft);
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{
  min-height:52vh;
  display:flex; align-items:center;
  padding-block:clamp(60px,7vw,108px);
  text-align:center;
}
.contact .wrap{ width:100%; }
.contact__lead{
  font-family:var(--serif);
  font-weight:200;
  font-size:clamp(20px,2.5vw,38px);
  line-height:1.85; letter-spacing:.12em;
  color:var(--structure);
  margin-top:clamp(30px,4vw,54px);
}
.contact__sub{
  font-family:var(--latin);
  font-size:11px; letter-spacing:.22em;
  color:var(--text-soft);
  margin-top:clamp(14px,1.8vw,22px);
}
.contact__more{ margin-top:clamp(34px,4.6vw,62px); }

/* 静かな枠線ボタン（GPT指示 2026-08-25。pill型は廃止） */
.btn{
  display:inline-block;
  padding:14px 34px;
  border:1px solid rgba(20,40,50,.35);
  border-radius:2px;
  background:transparent;
  color:var(--structure);
  font-family:var(--latin);
  font-size:11px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  transition:background-color .4s ease, color .4s ease, border-color .4s ease;
}
.btn:hover{ background:var(--structure); border-color:var(--structure); color:#fff; }

/* =========================================================
   FOOTER
   ========================================================= */
/* シート準拠：© StudioArte を中央に */
.foot{ border-top:1px solid var(--hairline); }
.foot__bar{
  display:flex; justify-content:center; align-items:center;
  padding-block:26px;
  font-family:var(--latin); font-size:10.5px;
  letter-spacing:.2em; color:var(--pale);
}

/* =========================================================
   REVEAL
   ========================================================= */
/* Reveal は GSAP(ScrollTrigger) が inline style で制御する。
   GSAPが読めない環境・reduced-motion では最初から表示（ここでは隠さない）。 */
.reveal{ opacity:1; }

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width:767px){
  body{ font-size:14.5px; }

  .head__nav{ display:none; }
  .head__toggle{ display:block; }

  /* スマホは Hero 画像を大きく縦に使う（mobile専用画像 1440x1920 / 3:4 に切り替え）。
     シート準拠：コピーは上寄り・Scrollキューは中央下 */
  .hero{ min-height:100svh; align-items:flex-start; }
  .hero__media{
    inset:-1% -1% -3%;
    background-image:url("../images/hero/hero-main-mobile.webp"), var(--hero-fallback);
    background-position:center 38%, center;
  }
  .hero__glow{
    background:linear-gradient(to bottom, rgba(250,252,252,.5) 0%, rgba(250,252,252,0) 46%);
  }
  .hero__inner{ margin-top:0; padding-top:calc(18svh + 40px); }
  .hero__copy{
    font-size:clamp(28px,7.6vw,34px);   /* GPT指示: SP 28〜34px */
    line-height:1.8; letter-spacing:.06em;
    max-width:none;
  }
  .hero__sub{ font-size:10px; letter-spacing:.2em; }
  .hero__cue{
    left:50%; transform:translateX(-50%);
    bottom:34px; gap:8px;
  }
  .hero__cueLine{ height:34px; }

  .contact{ text-align:center; min-height:50svh; }

  .tools{ display:block; padding-inline:0; }
  .tools__list{ margin-top:16px; gap:14px 22px; }
  .tools__more{ margin:18px 0 0; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}