/* =========================================================
   KARI — contact.css（Contactページだけの見た目）
   共通の色・フォント・タイトル・横線・ナビ・hover・モーションは style.css にあります。
   ---------------------------------------------------------
   1. 設定値
   2. メールアドレスの部分（横線の上）
   3. 背景の画像
   4. media リンク（横線の下）
   5. スマートフォン・狭い画面
   6. ページ出現モーションの順番
   ========================================================= */


/* ---------------------------------------------------------
   1. 設定値
   --------------------------------------------------------- */
.page-contact {
  /* すべての中身は、横線の中央を軸にそろえます */
  --contact-center: calc((var(--line-left) + var(--line-right)) / 2);

  /* メールアドレスの部分 */
  --contact-message-top: 39.37vh;
  --font-size-contact-lead: clamp(12px, 0.84vw, 20px);   /* お問い合わせは… */
  --font-size-contact-mail: clamp(14px, 1.03vw, 25px);      /* メールアドレス */
  --contact-mail-gap: 1.45em;                            /* 2行の間 */

  /* 背景の画像（表示する枠の大きさ・位置。比率は 8:5） */
  --contact-image-width: 32.03vw;
  --contact-image-ratio: 8 / 5;
  /* 枠の上下の中心を、2段目（floreisen）の中心にそろえる
     （floreisen の中心 = 横線の高さ + 段の間隔 × 2。枠の高さの半分 = 幅 × 5/16） */
  --contact-image-top: calc(var(--line-top) + var(--media-row-pitch) * 2 - var(--contact-image-width) * 5 / 16);
  --contact-media-left: calc(var(--contact-center) - var(--contact-image-width) / 2);
  --contact-image-position: center center;  /* 画像のどこを見せるか（例：center top） */

  /* media リンク */
  --media-row-pitch: 9.89vh;                 /* 段と段の間隔（中心から中心） */
  --media-icon-size: 2vw;                    /* Instagram アイコンの大きさ */
  --media-icon-size-note: 2.22vw;            /* note アイコン（画像の余白が広いため少し大きく） */
  --media-text-gap: 0.97vw;                  /* アイコンと文字の間 */
  --font-size-media: clamp(14px, 1.03vw, 25px);

  min-height: 100vh;
}


/* ---------------------------------------------------------
   2. メールアドレスの部分
   --------------------------------------------------------- */
.contact-message {
  position: absolute;
  top: var(--contact-message-top);
  left: var(--contact-center);
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  color: var(--color-text);
}
.contact-lead {
  font-family: var(--font-japanese);
  font-size: var(--font-size-contact-lead);
  line-height: var(--line-height-ja);
}
.contact-mail {
  margin-top: var(--contact-mail-gap);
  font-family: var(--font-serif);
  font-size: var(--font-size-contact-mail);
  line-height: var(--line-height-tight);
  letter-spacing: 0.02em;
}


/* ---------------------------------------------------------
   3. media の枠（背景画像 ＋ アイコン）
   背景画像とアイコンは同じ枠（.contact-media）の中にあり、
   枠の大きさ・位置が変わると、一緒に動きます。
   枠の上下の中心は、2段目（floreisen）のアイコン・文字の中心にそろえています（PC・タブレット・スマートフォン）。
   画像を差し替えても、枠の大きさ・位置は変わりません
   --------------------------------------------------------- */
.contact-media {
  position: absolute;
  top: var(--contact-image-top);
  left: var(--contact-media-left);
  width: var(--contact-image-width);
  aspect-ratio: var(--contact-image-ratio);
  z-index: 1;
  container-type: inline-size;   /* 中のアイコンを、枠の幅に合わせて大きさを変えられるように */
}
.contact-media-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* <picture>（PC用・スマートフォン用の画像の切り替え）は配置に影響させない */
.contact-media-image picture { display: contents; }
.contact-media-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--contact-image-position);
}


/* ---------------------------------------------------------
   4. media リンク（枠の中）
   アイコンの中心を横線の中央にそろえ、文字は右側に並べます。
   位置は枠の左上からの距離です。hover は共通設定（opacity 50%）だけです
   --------------------------------------------------------- */
.media-list {
  position: absolute;
  top: var(--media-list-top, calc(var(--line-top) + var(--media-row-pitch) - var(--media-icon-size) / 2 - var(--contact-image-top)));
  left: var(--media-list-left, calc(var(--contact-center) - var(--media-icon-size) / 2 - var(--contact-media-left)));
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--media-row-pitch) - var(--media-icon-size));
}
.media-link {
  display: flex;
  align-items: center;
  gap: var(--media-text-gap);
  height: var(--media-icon-size);
  color: var(--color-text);
}
.media-icon {
  flex: none;
  width: var(--media-icon-size);
  height: var(--media-icon-size);
  object-fit: contain;
}
.media-icon--note {
  width: var(--media-icon-size-note);
  height: var(--media-icon-size-note);
  /* 大きくした分だけ左へずらし、アイコンの中心と文字の位置をそろえる */
  margin-left: calc((var(--media-icon-size) - var(--media-icon-size-note)) / 2);
  margin-right: calc((var(--media-icon-size) - var(--media-icon-size-note)) / 2);
}
.media-name {
  font-family: var(--font-serif);
  font-size: var(--font-size-media);
  line-height: 1;
  white-space: nowrap;
}


/* ---------------------------------------------------------
   5. スマートフォン（画面幅760px以下）
   ・お問い合わせの文章は省略し、メールアドレスだけを表示
   ・横線は使いません
   ・背景画像はスマートフォン用（contact-media-sp.webp、横1.4：縦1）。枠の上下の中心は floreisen の中心
   KARI・メニュー・タイトルの位置は style.css の共通設定です
   --------------------------------------------------------- */
@media (max-width: 760px) {
  .page-contact {
    --contact-center: 50.7vw;              /* メールアドレス・アイコンの中心 */
    --contact-message-top: 79.37vw;         /* メールアドレスの上位置 */
    --font-size-contact-mail: 3.25vw;
    --line-top: 90.2vw;                    /* media リンクの基準（線は表示しません） */
    --media-row-pitch: 14.7vw;             /* 段と段の間隔 */
    --media-icon-size: 5.78vw;             /* Instagram アイコン */
    --media-icon-size-note: 8.4vw;         /* note アイコン */
    --media-text-gap: 2.5vw;
    --font-size-media: 3.05vw;
    --contact-image-width: 70.2vw;         /* 背景画像の枠の幅 */
    --contact-image-ratio: 1.4 / 1;        /* 背景画像の枠の比率（横：縦） */
    /* 背景画像の枠の上位置：枠の上下の中心を floreisen の中心にそろえる（枠の高さの半分 = 幅 ÷ 2.8） */
    --contact-image-top: calc(var(--line-top) + var(--media-row-pitch) * 2 - var(--contact-image-width) / 2.8);
  }
  .contact-lead { display: none; }
  .contact-mail { margin-top: 0; }
  .page-contact .page-line { display: none; }
  .page-contact { --contact-media-left: calc(50vw - var(--contact-image-width) / 2); }
}


/* ---------------------------------------------------------
   5-2. タブレット（画面幅761〜1199px）
   枠の中のアイコン・文字・間隔を「枠の幅に対する割合（cqw）」にして、
   背景画像の枠と一緒に拡大・縮小します（比率はPCの見え方と同じ）
   --------------------------------------------------------- */
@media (min-width: 761px) and (max-width: 1199px) {
  .page-contact {
    --contact-image-width: min(52vw, 70vh);  /* 枠の幅（横向きの画面では高さに合わせて控えめに） */
    --media-icon-size: 6.24cqw;              /* Instagram アイコン */
    --media-icon-size-note: 6.93cqw;         /* note アイコン */
    --media-text-gap: 3.03cqw;
    --font-size-media: 3.22cqw;
    --media-row-pitch: 17.37cqw;             /* 段と段の間隔 */
    /* 枠の上下の中心を floreisen の中心にそろえるため、枠を幅の2.36%分だけ上へ。
       （floreisen の中心は枠の上から 8.4 + 17.37 + 6.24 ÷ 2 = 28.89%、枠の中心は 31.25%）
       アイコンは画面上の位置が変わらないよう、同じ分だけ枠の上からの距離を足します */
    --contact-image-top: calc(var(--line-top) + 3.33vh - var(--contact-image-width) * 0.0236);
    --media-list-top: calc(8.4cqw + 2.36cqw);   /* 1段目の位置（枠の上から） */
    --media-list-left: calc(50cqw - var(--media-icon-size) / 2);   /* アイコンの中心 = 枠の中心 */
  }
}


/* ---------------------------------------------------------
   6. ページ出現モーションの順番（動きは style.css の共通設定）
   contact → media・横線（左から伸びる）→ メールアドレス・media リンク・画像
   --------------------------------------------------------- */
.page-contact .page-title          { --enter-order: 0; }
.page-contact .page-subtitle       { --enter-order: 1; }
.page-contact .page-line           { --enter-order: 1; }
.page-contact .contact-message     { --enter-order: 2; }
.page-contact .contact-media       { --enter-order: 3; }