/* =========================================================
   top_contact.css — CONTACT（フォーム無し / 右寄せワンカラム）

   ポリシー：
     1) JSなし=可視（フェールセーフ）。JS有効時のみ .has-io で入場演出を有効化
     2) 飾り画像のアンカー transform を壊さないため、アニメは <img> に付ける
     3) 方向付きスライドイン（左/右/中央）は data-anchor から自動推定
        かつ --cd-enter-dx / --cd-enter-dy / --cd-enter-scale で個別上書き可

   ★今回の主目的：
     - CONTACT の CTA 矢印アニメを BLOG と同一ロジックへ合わせる。
       （::after と ::before の二重矢印をクロスフェード＋スライド）
       通常時も矢印を表示し、ホバー時のみ入れ替え演出。

   ★今回の改修（ボタン配置）：
     - テキストが空欄で <p class="contact-panel__text"> 自体が出力されない等、
       “DOM が欠落するケース” でも CONTACT ボタン（.contact-actions）が
       常にパネル内の「右下」に固定されるようにする。
     - 方式：grid の auto-placement に任せず、各要素を明示的に grid-row 固定する。

   ビューポート安定化：
     - フルスクリーンは 100svh（安定） > --vh-stable > 1vh の順で決定
     - dvh は使用しない（URLバー出入りによる高さゆれ対策）
   ========================================================= */

:root{
  /* 画面背景色（CONTACTセクション全体） */
  --tcBg: #e6e5df;

  /* 見出しのスケールと色（About/Galleryと統一の設計） */
  --tcTitleSize: 5.5rem;
  --tcTitleColor: #333;
  --tcLeadSize: 1rem;
  --tcLeadColor: #666;

  /* レイアウト基礎値：内側パディング / 角丸 / パネル最大幅 / 右寄せオフセット */
  --tcInnerPad: 16px;
  --tcCardRadius: 0;
  --tcMaxPanelW: 720px;
  --tcPanelOffset: clamp(32px, 8vw, 120px);

  /* パネルの色味（背景・本文・サブテキスト） */
  --tcPanelBg: #f2f1ec;
  --tcPanelText: #222;
  --tcPanelSub: #555;

  /* 連絡先ラベル（TEL/Mail等）の配色 */
  --tcInfoLabelBg: #333;
  --tcInfoLabelColor: #fff;

  /* 飾り画像（装飾レイヤー）用の既定値 */
  --cdShadow: 0 10px 30px rgba(0,0,0,.08);
  --cdBorder: none;
  --cdMaxW_sp: 48vw;
  --cdMaxW_pc: 28vw;

  /* ★CTA（CONTACT ボタン）— BLOG と同じ変数セットをCONTACT用に用意 */
  --tcCtaBorder:#333;
  --tcCtaFill:#333;
  --tcCtaText:#333;
  --tcCtaTextHover:#fff;
  --tcCtaArrowDist: 14px;  /* 矢印がホバーで水平移動する距離（BLOG と同値） */
  --tcCtaArrowMs: .32s;    /* 矢印・塗りのアニメ時間（BLOG と同値） */
}

/* セクションの土台 */
.top-contact{ position: relative; background: var(--tcBg); }

/* 見出しブロック（絶対配置でセクション内に重ねる） */
.top-contact__header{
  position: absolute;
  top: var(--aboutPadTop, 50px);
  left: var(--aboutPadX, 40px);
  z-index: 2;              /* 背景より前・パネルより後ろ（装飾はz=1） */
  pointer-events: none;    /* 背後の要素操作を邪魔しない */
}
.top-contact__title{
  font-size: var(--tcTitleSize);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.2;
  margin: -10px 0 5px;
  color: var(--tcTitleColor);
}
.top-contact__lead{
  font-size: var(--tcLeadSize);
  color: var(--tcLeadColor);
  letter-spacing: .03em;
}

/* 画面高いっぱいの器＋見出しのフロー回帰（is-offset時）
   ※ dvhは使わず、svh→--vh-stable→1vh の順で安定適用 */
.top-contact.is-fullscreen{
  min-height: calc(var(--vh-stable, 1vh) * 100);
  display: flex; flex-direction: column;
}
@supports (height: 100svh){
  .top-contact.is-fullscreen{ min-height: 100svh; }
}
.top-contact.is-fullscreen.is-offset{ row-gap: 18px; }
.top-contact.is-fullscreen.is-offset .top-contact__header{
  position: relative; top: auto; left: auto; z-index: 2;
  padding: var(--aboutPadTop, 50px) var(--aboutPadX, 40px) 0 var(--aboutPadX, 40px);
  pointer-events: auto;
}

/* コンテンツ本体（装飾レイヤーのposition基準もここ） */
.top-contact .contact-body{
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  align-items: center; /* パネルを縦中央寄せ */
  padding: 0 var(--aboutPadX, 40px) var(--aboutPadTop, 50px);
  position: relative;  /* .cd-layer をこの内側でabsolute配置する基準 */
}

/* ======================= 飾り画像レイヤー ======================= */
.cd-layer{
  position: absolute;
  inset: 0;
  z-index: 1;             /* 見出し(2)やパネル(3)より後ろ＝背景寄り */
  pointer-events: none;   /* 装飾なので操作対象外 */
}
.cd-layer .cd-item{
  position: absolute;
  width: var(--cd-width, clamp(220px, var(--cdMaxW_pc), 520px));
  aspect-ratio: var(--cd-ratio, 3/4);
  border-radius: var(--cd-radius, 18px);
  overflow: hidden;                 /* 角丸に画像を切る */
  box-shadow: var(--cdShadow);
  border: var(--cdBorder);
  opacity: var(--cd-opacity, .95);
  z-index: var(--cd-z, 1);
  transform: translateZ(0);         /* 合成レイヤー化で描画を安定化 */
}

/* 画像本体
   ※重要：アンカー位置の transform（translateX/Y）を .cd-item 側で使うため、
            アニメーションは <img> 側に付与して干渉しない設計。 */
.cd-layer .cd-item > img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--cd-focus-x, 50%) var(--cd-focus-y, 50%);
  display: block;
  transform: translateZ(0);
  /* 入場アニメ用の既定トランジション（JS無しでも最終状態＝可視） */
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.8,.31,1);
}

/* === アンカー（配置）— 既存の仕様を尊重 ========================= */
.cd-layer .cd-item[data-anchor="right-center"],
.cd-layer .cd-item[style*="--cd-anchor:right-center"],
.cd-layer .cd-item[style*="--cd-anchor: right-center"]{
  top: calc(50% + var(--cd-offset-y, 0));
  right: var(--cd-offset-x, -4rem);
  transform: translateY(-50%); /* 枠の縦中心合わせ */
}
.cd-layer .cd-item[data-anchor="right-top"],
.cd-layer .cd-item[style*="--cd-anchor:right-top"],
.cd-layer .cd-item[style*="--cd-anchor: right-top"]{
  top: var(--cd-offset-y, 0);
  right: var(--cd-offset-x, -4rem);
}
.cd-layer .cd-item[data-anchor="right-bottom"],
.cd-layer .cd-item[style*="--cd-anchor:right-bottom"],
.cd-layer .cd-item[style*="--cd-anchor: right-bottom"]{
  bottom: var(--cd-offset-y, 0);
  right: var(--cd-offset-x, -4rem);
}
.cd-layer .cd-item[data-anchor="left-center"],
.cd-layer .cd-item[style*="--cd-anchor:left-center"],
.cd-layer .cd-item[style*="--cd-anchor: left-center"]{
  top: calc(50% + var(--cd-offset-y, 0));
  left: var(--cd-offset-x, 0);
  transform: translateY(-50%);
}
.cd-layer .cd-item[data-anchor="left-top"],
.cd-layer .cd-item[style*="--cd-anchor:left-top"],
.cd-layer .cd-item[style*="--cd-anchor: left-top"]{
  top: var(--cd-offset-y, 0);
  left: var(--cd-offset-x, 0);
}
.cd-layer .cd-item[data-anchor="left-bottom"],
.cd-layer .cd-item[style*="--cd-anchor:left-bottom"],
.cd-layer .cd-item[style*="--cd-anchor: left-bottom"]{
  bottom: var(--cd-offset-y, 0);
  left: var(--cd-offset-x, 0);
}
.cd-layer .cd-item[data-anchor="center-top"],
.cd-layer .cd-item[style*="--cd-anchor:center-top"],
.cd-layer .cd-item[style*="--cd-anchor: center-top"]{
  left: 50%;
  top: var(--cd-offset-y, 0);
  transform: translateX(-50%); /* 枠の横中心合わせ */
}
.cd-layer .cd-item[data-anchor="center"],
.cd-layer .cd-item[style*="--cd-anchor:center"],
.cd-layer .cd-item[style*="--cd-anchor: center"]{
  left: 50%;
  top: calc(50% + var(--cd-offset-y, 0));
  transform: translate(-50%, -50%); /* 完全中央合わせ */
}
.cd-layer .cd-item[data-anchor="center-bottom"],
.cd-layer .cd-item[style*="--cd-anchor:center-bottom"],
.cd-layer .cd-item[style*="--cd-anchor: center-bottom"]{
  left: 50%;
  bottom: var(--cd-offset-y, 0);
  transform: translateX(-50%);
}

/* === 端末別の候補・上限制御（従来通り） ======================== */
.cd-layer .cd-item{ display: none; }
@media (min-width: 1024px){
  .cd-layer .cd-item[data-show-pc="1"]{ display: block; }
  .cd-layer .cd-item[data-show-pc="1"]:nth-of-type(n+3){ display: none; }        /* 上限2枚 */
  .cd-layer .cd-item[data-show-pc="1"][data-rank-pc]{ display: none; }           /* rank指定があれば rank優先 */
  .cd-layer .cd-item[data-show-pc="1"][data-rank-pc="1"],
  .cd-layer .cd-item[data-show-pc="1"][data-rank-pc="2"]{ display: block; }
}
@media (min-width: 768px) and (max-width: 1023.98px){
  .cd-layer .cd-item[data-show-tb="1"]{ display: block; }
  .cd-layer .cd-item[data-show-tb="1"]:nth-of-type(n+2){ display: none; }        /* タブは1枚 */
  .cd-layer .cd-item[data-show-tb="1"][data-rank-tb]{ display: none; }
  .cd-layer .cd-item[data-show-tb="1"][data-rank-tb="1"]{ display: block; }
}
@media (max-width: 767.98px){
  .cd-layer .cd-item{
    width: min(var(--cd-width, var(--cdMaxW_sp)), 92vw); /* はみ出し抑止 */
  }
  .cd-layer .cd-item[data-show-sp="1"]{ display: block; }
  .cd-layer .cd-item[data-show-sp="1"]:nth-of-type(n+2){ display: none; }        /* SPは1枚 */
  .cd-layer .cd-item[data-show-sp="1"][data-rank-sp]{ display: none; }
  .cd-layer .cd-item[data-show-sp="1"][data-rank-sp="1"]{ display: block; }
}

/* ==================== 入場アニメの“方向”既定 ==================== */
.cd-layer .cd-item[data-anchor^="left-"]  { --cd-enter-dx: -12px; --cd-enter-dy: 0; }
.cd-layer .cd-item[data-anchor^="right-"] { --cd-enter-dx:  12px; --cd-enter-dy: 0; }
.cd-layer .cd-item[data-anchor^="center"] { --cd-enter-dx:   0px; --cd-enter-dy: 12px; }

/* ====================== 右寄せワンカラム（パネル） ====================== */
.contact-rightwrap{
  width: min(100%, var(--tcMaxPanelW));
  margin-left: auto;                  /* 右寄せ */
  margin-right: var(--tcPanelOffset); /* 右に余白を残す */
  position: relative;
  z-index: 3; /* 飾り画像より前面へ */
}

/* ★JSなし=可視。JS有効(.has-io)だけ初期を隠し、.is-inview で出す */
.contact-panel{
  background: var(--tcPanelBg);
  color: var(--tcPanelText);
  padding: calc(var(--tcInnerPad) * 2);
  border-radius: var(--tcCardRadius);
  min-height: 420px;

  display: grid;

  /* タイトル → テキスト → 情報 → CTA（最後の 1fr が“余白”を吸う想定） */
  grid-template-rows: auto auto auto 1fr;
  gap: 10px;

  /* JSなし状態（.has-io無し）では最初から可視 */
  opacity: 1; transform: none;
  transition: opacity .45s ease, transform .45s ease;
}
.top-contact.has-io .contact-panel{
  opacity: 0; transform: translateY(8px); /* JS有効時の初期：少し下／透明 */
}
.top-contact.has-io.is-inview .contact-panel{
  opacity: 1; transform: none;            /* 可視域に入ったら最終状態へ */
}

/* =========================================================
   ★今回追加（ボタン右下固定のための行固定）
   ---------------------------------------------------------
   背景：
     - PHP側で、テキスト等が空欄だと要素自体が出力されない場合がある。
     - grid の auto-placement だと、欠落した行が詰められて
       CTA（.contact-actions）が上に繰り上がることがある。

   対応：
     - 各要素を明示的に grid-row に固定し、
       欠落しても「空行が残るだけ」にする。
   ========================================================= */
.contact-panel__title{ grid-row: 1; }
.contact-panel__text { grid-row: 2; }
.contact-info        { grid-row: 3; }
.contact-actions     { grid-row: 4; }

.contact-panel__title{
  margin: 0 0 6px;
  font-weight: 800;
  font-size: clamp(1.1rem, 1.1vw + .9rem, 1.35rem);
  letter-spacing: .02em;
}
.contact-panel__text{
  margin: 0 0 8px;
  color: var(--tcPanelSub);
  line-height: 1.7;
}
.contact-info{
  list-style: none; margin: 0 0 10px; padding: 0;
  display: grid; gap: 8px;
}
.contact-info li{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
}
.contact-info .label{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; height: 22px; padding: 0 8px;
  background: var(--tcInfoLabelBg); color: var(--tcInfoLabelColor);
  border-radius: 999px;
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
}
.contact-info .value{
  color: #222; text-decoration: none; border-bottom: 1px dotted rgba(0,0,0,.25);
}
.contact-info .value:hover{ opacity: .9; }
.contact-info .note{ color: #666; font-size: .9rem; }

/* ===================== CONTACT の CTA（BLOG と同じ動きへ） =====================
   - BLOG/GALLERY と同じ「塗りスライド＋二重矢印の交差」アニメに統一
   - 背景描画は border-box にして縫い目防止、Hover は +2px で過塗り
   - 通常時：::after の矢印が常時表示
   - ホバー時：::after が右へ抜けつつ透明化／::before が左から入って不透明化
   -------------------------------------------------------------------------- */
.contact-actions{
  /* ★パネルの最下段（grid-row:4 / 1fr）内で右下へ固定 */
  align-self: end;     /* 1fr 行の下端へ */
  justify-self: end;   /* グリッドセル内で右寄せ（= “右下固定” を完成させる） */

  display: flex; gap: 12px; flex-wrap: wrap;
}

.top-contact .gm-viewall{
  position: relative;
  isolation: isolate;
  z-index: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 14px 42px;
  padding-right: 50px; /* 右端の矢印スペース */
  border: 1px solid var(--tcCtaBorder);
  border-radius: 30px;

  font-size: 1rem;
  font-weight: 500;
  color: var(--tcCtaText);
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;

  /* 下から塗りがせり上がる（BLOGと同様） */
  background-image: linear-gradient(var(--tcCtaFill), var(--tcCtaFill));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 0%;

  /* ★ 縫い目対策：背景の描画領域を枠線まで広げる */
  background-origin: border-box;
  background-clip: border-box;

  transition:
    color var(--tcCtaArrowMs) ease,
    border-color var(--tcCtaArrowMs) ease,
    background-size var(--tcCtaArrowMs) ease;
}

/* 通常時に見えている矢印（BLOGの ::after と同じ役割） */
.top-contact .gm-viewall::after{
  content: "➡";
  position: absolute;
  right: 25px; top: 50%;
  transform: translate(0, -50%); /* その場に表示 */
  color: currentColor;
  opacity: 1;
  transition:
    transform var(--tcCtaArrowMs) ease,
    opacity var(--tcCtaArrowMs) ease;
  z-index: 1;
  will-change: transform, opacity;
}

/* ホバー時に入ってくる矢印（BLOGの ::before と同じ役割） */
.top-contact .gm-viewall::before{
  content: "➡";
  position: absolute;
  right: 25px; top: 50%;
  transform: translate(calc(-1 * var(--tcCtaArrowDist)), -50%); /* 左から待機 */
  color: currentColor;
  opacity: 0;
  transition:
    transform var(--tcCtaArrowMs) ease,
    opacity var(--tcCtaArrowMs) ease;
  z-index: 1;
  will-change: transform, opacity;
}

/* ホバー：テキスト色を反転・塗りを全開（+2px過塗り）・矢印を交差（BLOG/GALLERYと統一） */
.top-contact .gm-viewall:hover,
.top-contact .gm-viewall:focus-visible{
  color: var(--tcCtaTextHover);
  border-color: var(--tcCtaFill);
  background-size: 100% calc(100% + 2px); /* ← 1pxの縫い目が出る環境対策 */
  background-position: left bottom;
}
.top-contact .gm-viewall:hover::after,
.top-contact .gm-viewall:focus-visible::after{
  transform: translate(var(--tcCtaArrowDist), -50%); /* 右へ抜ける */
  opacity: 0;
}
.top-contact .gm-viewall:hover::before,
.top-contact .gm-viewall:focus-visible::before{
  transform: translate(0, -50%); /* 右端へ入ってくる */
  opacity: 1;
}
/* 保険：負の bottom オフセット対応環境でさらに 1px 下へ */
@supports (background-position: bottom -1px) {
  .top-contact .gm-viewall:hover,
  .top-contact .gm-viewall:focus-visible{
    background-position: left bottom -1px;
  }
}
/* アクセシビリティ：フォーカス枠（BLOG 相当） */
.top-contact .gm-viewall:focus-visible{
  outline: 2px dashed rgba(51,51,51,.7);
  outline-offset: 4px;
}

/* ====================== 飾り画像の「入場アニメ」 ====================== */
.top-contact.has-io .cd-item > img{
  opacity: 0;
  transform: translate(var(--cd-enter-dx, 0), var(--cd-enter-dy, 12px))
             scale(var(--cd-enter-scale, .985));
}
.top-contact.has-io.is-inview .cd-item > img{
  opacity: 1;
  transform: none;
}

/* 低モーション配慮：アニメを抑止して即時表示（アクセシビリティ） */
@media (prefers-reduced-motion: reduce){
  .top-contact.has-io .contact-panel{ transition: none; }
  .top-contact.has-io .cd-item > img{ transition: none; }

  /* CTAもアニメを止め、両矢印を同位置・同不透明度で見せる */
  .top-contact .gm-viewall{
    transition: none;
    background-image: none;
    background-color: transparent;
  }
  .top-contact .gm-viewall:hover,
  .top-contact .gm-viewall:focus-visible{
    background-color: var(--tcCtaFill); color: var(--tcCtaTextHover);
  }
  .top-contact .gm-viewall::before,
  .top-contact .gm-viewall::after{
    transition: none;
    transform: translate(0, -50%);
    opacity: 1;
  }

  .top-contact.has-io .contact-panel,
  .top-contact.has-io .cd-item > img{
    opacity: 1; transform: none;
  }
}

/* レスポンシブ微調整：モバイルでパネルの右余白を撤去し、タイトル縮小 */
@media (max-width: 900px){
  .contact-rightwrap{
    width: 100%;
    margin-right: 0; /* モバイルははみ出し抑止 */
  }
}
@media (max-width: 768px){
  :root{ --tcTitleSize: 3.6rem; }
}