/* ============================================================
   AMOÉ TOKYO — components
   全ページで使い回すパーツ（ヘッダー／メニュー／コンタクト）
   ============================================================ */

/* ---------- 登場アニメーション ---------- */
.fade-up{opacity:0;transform:translateY(14px);animation:fadeUp 1s cubic-bezier(.22,.61,.36,1) forwards;}
@keyframes fadeUp{to{opacity:1;transform:none;}}

/* スマホのヘッダーだけは transform を使わない。
   transform が付くと position:fixed の子（メニューパネル）が
   ヘッダー基準に配置されてしまうため。PC は元のスライドアップのまま。 */
@keyframes fadeIn{to{opacity:1;}}
@media (max-width:899.98px){
  .site-header.fade-up{transform:none;animation-name:fadeIn;}
}

/* ---------- Header ---------- */
.site-header{
  margin-left:var(--nudge);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.logo{
  display:flex;
  align-items:center;
}
.logo-mark{
  /* viewBox に stroke 分の余白があるぶん少し大きめに指定している */
  height:clamp(20px,1.7vw,34px);
  width:auto;
}

.header-right{
  display:flex;
  align-items:flex-end;      /* バーガーとメニューを下揃え */
  gap:clamp(30px,4.6vw,92px);
}

/* グローバルメニュー（ハンバーガーで開閉） */
.global-nav{
  display:flex;
  align-items:flex-end;
  gap:clamp(26px,3.6vw,72px);
}
.global-nav a{
  position:relative;
  font-size:13px;
  font-weight:500;
  line-height:1;
  color:var(--ink);
  padding-bottom:var(--nav-pb);
  transition:color .3s ease;
}
.global-nav a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1.5px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .32s cubic-bezier(.22,.61,.36,1);
}
.global-nav a:hover::after,
.global-nav a:focus-visible::after,
.global-nav a.is-current::after{transform:scaleX(1);}
/* 他の項目にホバー中は、現在地（top）の下線を消す */
.global-nav:hover a.is-current:not(:hover)::after{transform:scaleX(0);}
.global-nav a:hover{color:var(--accent);}

/* 開閉アニメーション */
.global-nav{
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .38s ease, transform .38s cubic-bezier(.22,.61,.36,1);
}
.global-nav.is-open{opacity:1;transform:none;}

/* ハンバーガー：2本線のまま（開いても形は変えない） */
.menu-toggle{
  -webkit-appearance:none;appearance:none;
  background:none;border:0;padding:0;margin:0;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:7px;
  width:40px;
  flex:none;
  margin-bottom:var(--nav-pb);   /* contact の文字下端に揃える */
}
.menu-toggle span{
  display:block;
  height:2px;
  background:var(--ink);
  transition:background-color .3s ease, width .3s ease;
}
.menu-toggle span:first-child{width:40px;}
.menu-toggle span:last-child{width:30px;}
.menu-toggle:hover span{background:var(--accent);}

/* ============================================================
   右下のコンタクトボタン（全ページ共通）
   通常時はふちを鏡面ハイライトが走る（SpecularButton 相当）。
   ホバーで横に伸びてアイコンとラベルが出る。
   ============================================================ */
.contact-fab{
  --fab-thickness:1px;      /* thickness */
  --fab-base:#b2b2b2;       /* baseColor */
  --fab-line:#ffffff;       /* lineColor */
  --fab-half:5deg;          /* shineSize 10 の半分 */
  --fab-fade:40deg;         /* shineFade */
  --fab-intensity:1;        /* intensity */
  --fab-angle:0deg;         /* JS がカーソル方向に更新 */

  position:fixed;
  right:clamp(26px,3.2vw,64px);
  bottom:clamp(26px,3.2vw,64px);
  z-index:12;

  width:50px;
  height:50px;
  padding:0;
  border:none;
  border-radius:50%;
  background-color:var(--accent);      /* クリック前は赤 */
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 20px rgba(0,0,0,.164);
  cursor:pointer;
  overflow:hidden;
  transition:width .3s ease, border-radius .3s ease, background-color .3s ease;
}

/* 展開時に内側へ走る斜めの光沢 */
.contact-fab::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(158deg,
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.14) 36%,
    rgba(255,255,255,0) 54%,
    rgba(255,255,255,.10) 82%);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
.contact-fab:hover::before{opacity:1;}

/* ふちの鏡面ハイライト */
.contact-fab::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:var(--fab-thickness);
  background:conic-gradient(from var(--fab-angle),
    var(--fab-line) 0deg,
    var(--fab-line) var(--fab-half),
    var(--fab-base) var(--fab-fade),
    var(--fab-base) calc(360deg - var(--fab-fade)),
    var(--fab-line) calc(360deg - var(--fab-half)),
    var(--fab-line) 360deg);
  opacity:var(--fab-intensity);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
  transition:opacity .3s ease;
}

.contact-fab-icon{
  width:15.6px;          /* 12 × 1.3 */
  height:auto;
  transition:width .3s ease, transform .3s ease, filter .3s ease;
}
.contact-fab-label{
  position:absolute;
  left:0;
  right:0;
  top:-20px;
  text-align:center;
  color:#f5f5f5;           /* textColor */
  font-size:2px;
  font-weight:600;
  letter-spacing:.08em;
  transition:font-size .3s ease, transform .3s ease, opacity .3s ease, color .3s ease;
  pointer-events:none;
}

.contact-fab:hover{
  width:154px;                     /* 140 × 1.1 */
  border-radius:50px;
  /* 展開後は中身を限りなく透明にしたガラス。
     brightness を上げて背面を明るくすることで、暗いページでも黒文字が読める */
  background-color:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(16px) saturate(1.25) brightness(1.5);
  backdrop-filter:blur(16px) saturate(1.25) brightness(1.5);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.45);
}
/* ホバー時はふちを「光を受けたガラスの縁」に切り替える */
.contact-fab:hover::after{
  opacity:1;
  background:linear-gradient(150deg,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.35) 32%,
    rgba(255,255,255,.15) 55%,
    rgba(255,255,255,.85) 100%);
}
.contact-fab:hover .contact-fab-icon{
  width:65px;            /* 50 × 1.3 */
  transform:translateY(60%);
  filter:invert(1);      /* ガラスの上なので黒に */
}
.contact-fab:hover .contact-fab-label{
  font-size:13px;
  opacity:1;
  transform:translateY(30px);
  color:#111;
}

/* 暗いページのグローバルメニューは白文字。
   スマホでは白いパネルの上に出るので、この指定は PC 幅だけに限定する。 */
@media (min-width:900px){
  body.on-dark .global-nav a,
  .page-company .global-nav a{color:#fff;}
}

/* PC：ヘッダーの位置（トップは .hero 基準の absolute、
   下層ページは各ページの CSS で fixed に上書きしている） */
@media (min-width:900px){
  .site-header{
    position:absolute;
    top:6.5%;
    left:var(--pad-x);
    right:var(--pad-r);
  }
}

@media (max-width:899.98px){
  /* ロゴとバーガーは全ページ同じ位置に固定 */
  .site-header{
    position:fixed;
    top:38px;
    left:var(--pad-x);
    right:var(--pad-r);
    margin-left:0;
    z-index:6;
  }

  /* 開いたメニューは画面左半分の半透明パネルとして表示 */
  .header-right{position:relative;}
  .global-nav{
    position:fixed;
    left:12px;
    top:14px;
    right:auto;
    bottom:14px;
    z-index:15;
    width:56%;
    min-width:230px;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:30px;
    padding:25vh 22px 0 26px;        /* 上から約1/3の位置に */
    background:rgba(255,255,255,.88); /* 背面が透けすぎないよう不透明度を上げる */
    -webkit-backdrop-filter:blur(28px) saturate(1.2);
    backdrop-filter:blur(28px) saturate(1.2);
    border:0;
    border-radius:26px;               /* 四隅すべて角丸 */
    box-shadow:24px 0 60px -30px rgba(0,0,0,.4);
    transform:translateX(calc(-100% - 12px));
  }
  .global-nav.is-open{transform:none;}
  .global-nav a{
    font-size:19.5px;          /* 13px の 1.5倍 */
    color:var(--ink);
    padding-bottom:11px;       /* 下線を少し下げる */
  }
  .global-nav a::after{height:2px;}

  /* カテゴリーのドロップダウンはスマホだけ少し小さく */
  .select-field,
  .select-list li{font-size:12.5px;}

  .contact-fab{bottom:40px;}
}

@media (prefers-reduced-motion:reduce){
  .contact-fab,
  .contact-fab::after,
  .contact-fab-icon,
  .contact-fab-label{transition:none;}
}

/* ============================================================
   コンタクトフォーム（白いすりガラスのカード・全ページ共通）
   ============================================================ */
.contact-panel{
  position:fixed;
  inset:0;
  z-index:20;
}
.contact-panel[hidden]{display:none;}

.contact-panel-backdrop{
  position:absolute;
  inset:0;
  background:rgba(20,22,26,.3);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  opacity:0;
  transition:opacity .4s ease;
}
.contact-panel.is-open .contact-panel-backdrop{opacity:1;}

.contact-card{
  --form-accent:var(--accent);   /* フォーム内のアクセント */
  --form-ink:#6f7379;            /* 入力文字のグレー */
  --form-label:#9a9da3;          /* ラベルのグレー */

  position:absolute;
  right:clamp(20px,5.5vw,110px);
  top:50%;
  width:min(360px, 30vw);
  max-height:86vh;
  padding:clamp(26px,2.1vw,42px) clamp(24px,2vw,40px) clamp(28px,2.3vw,46px);
  border-radius:22px;

  /* すりガラス：上が明るく下がわずかに沈む面 ＋ 大きく柔らかい影 */
  background:linear-gradient(158deg,
    rgba(255,255,255,.74) 0%,
    rgba(255,255,255,.60) 46%,
    rgba(255,255,255,.52) 100%);
  -webkit-backdrop-filter:blur(30px) saturate(1.4) brightness(1.5);
  backdrop-filter:blur(30px) saturate(1.4) brightness(1.5);
  box-shadow:
    0 40px 80px -30px rgba(14,18,26,.6),
    0 8px 24px -12px rgba(14,18,26,.28);

  color:var(--form-ink);
  transform:translate(24px,-50%);
  opacity:0;
  transition:opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.contact-panel.is-open .contact-card{
  opacity:1;
  transform:translate(0,-50%);
}

/* 光を受けたガラスの縁 */
.contact-card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(150deg,
    rgba(255,255,255,.98) 0%,
    rgba(255,255,255,.45) 34%,
    rgba(190,196,206,.35) 62%,
    rgba(255,255,255,.9) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
}

.contact-close{
  position:absolute;
  top:14px;
  right:14px;
  width:28px;
  height:28px;
  padding:0;
  border:0;
  border-radius:50%;
  background:none;
  color:var(--form-label);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition:color .3s ease;
  z-index:1;
}
.contact-close:hover{color:var(--form-accent);}

.contact-eyebrow{
  margin:0 0 clamp(20px,1.7vw,34px);
  font-size:12px;
  font-weight:500;
  letter-spacing:.26em;
  color:var(--form-label);
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:clamp(14px,1.15vw,23px);
}

.contact-form .group{position:relative;}
.contact-form .group > label{
  display:block;
  margin:0 0 7px 2px;
  font-size:10px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--form-label);
  transition:color .25s ease;
}
.contact-form .group:focus-within > label,
.group-select.is-open > label{color:var(--form-accent);}

/* 入力欄はドロップダウンと同じ「白い角丸フィールド」 */
.contact-form .input,
.select-field{
  -webkit-appearance:none;appearance:none;
  position:relative;
  display:block;
  width:100%;
  padding:13px 16px;
  border:0;
  border-radius:14px;
  background:rgba(255,255,255,.72);
  box-shadow:
    0 6px 16px -10px rgba(20,26,38,.4),
    inset 0 0 0 1px rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(170,176,186,.28);
  font-family:inherit;
  font-size:14px;
  font-weight:400;
  letter-spacing:.08em;
  color:var(--form-ink);
  transition:box-shadow .25s ease, background-color .25s ease;
}
.contact-form textarea.input{
  resize:vertical;
  min-height:92px;
  line-height:1.9;
}
.contact-form .input::placeholder{color:#c2c5cb;}
.contact-form .input:focus{
  outline:none;
  background:#fff;
  box-shadow:
    0 10px 22px -12px rgba(20,26,38,.5),
    inset 0 0 0 1px var(--form-accent);
}

/* ---------- ドロップダウン ---------- */
.select-field{
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:left;
  cursor:pointer;
}
.select-field:hover{box-shadow:0 10px 22px -12px rgba(20,26,38,.5), inset 0 0 0 1px rgba(255,255,255,.9);}
.select-caret{
  width:12px;
  height:12px;
  flex:none;
  color:var(--form-accent);
  transition:transform .25s ease;
}
.group-select.is-open .select-caret{transform:rotate(180deg);}

.select-list{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 10px);
  z-index:2;
  margin:0;
  padding:8px 0;
  list-style:none;
  border-radius:14px;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(20px) saturate(1.3) brightness(1.4);
  backdrop-filter:blur(20px) saturate(1.3) brightness(1.4);
  box-shadow:0 20px 40px -18px rgba(20,26,38,.45), inset 0 0 0 1px rgba(255,255,255,.75);
  overflow:hidden;
  opacity:0;
  transform:translateY(-6px);
  visibility:hidden;
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
.group-select.is-open .select-list{
  opacity:1;
  transform:none;
  visibility:visible;
}
.select-list li{
  padding:11px 16px;
  font-size:14px;
  font-weight:400;
  letter-spacing:.08em;
  color:var(--form-ink);
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease;
}
.select-list li:hover,
.select-list li.is-focus{
  background:var(--form-accent);
  color:#fff;
}

/* ハニーポット（人間には見えない。ボットが埋めたら弾く） */
.hp-field{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.group-turnstile{min-height:66px;}

/* 送信中・エラー表示 */
.contact-error{
  margin:10px 0 0;
  font-size:11px;
  line-height:1.8;
  letter-spacing:.06em;
  color:var(--form-accent);
  min-height:1em;
}
.contact-submit[disabled]{opacity:.5;cursor:default;}

.contact-submit{
  display:block;
  width:100%;
  margin-top:clamp(6px,.5vw,10px);
  padding:13px 0;
  border:0;
  border-radius:50px;
  background:var(--form-accent);
  color:#fff;
  font-family:inherit;
  font-size:11px;
  font-weight:600;
  letter-spacing:.26em;
  cursor:pointer;
  transition:opacity .3s ease;
}
.contact-submit:hover{opacity:.85;}

/* 送信後の表示 */
.contact-thanks{
  display:none;
  padding:6px 2px 2px;
}
.contact-card.is-sent .contact-form{display:none;}
.contact-card.is-sent .contact-thanks{display:block;}
.contact-thanks h3{
  margin:0 0 12px;
  font-size:15px;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--form-ink);
}
.contact-thanks p{
  margin:0 0 8px;
  font-size:12px;
  line-height:2;
  letter-spacing:.06em;
  color:var(--form-ink);      /* 見出しと同じ文字色に */
}
/* 送信完了画面は中央揃え、CONTACT はアクセントカラー */
.contact-card.is-sent{text-align:center;}
.contact-card.is-sent .contact-eyebrow{color:var(--accent);}
.contact-thanks{text-align:center;}

@media (max-width:860px){
  .contact-card{
    right:auto;
    left:50%;
    width:min(360px, 88vw);
    transform:translate(-50%,-50%) translateY(18px);
  }
  .contact-panel.is-open .contact-card{transform:translate(-50%,-50%);}
}

@media (prefers-reduced-motion:reduce){
  .contact-card,.contact-panel-backdrop,.select-list,.select-caret{transition:none;}
}