/*
 *  インディゴ（theme 9）
 *
 *  白い紙に、紺1色の細い線画の花。招待状のような落ち着いた雰囲気を、
 *  顔合わせしおりの組みに直したもの。PC では中央に紙面の幅（--page）で置く。
 *  Bootstrap などの既成の CSS は読まない。
 *
 *  見出しは英字のセリフ体（Cormorant Garamond）に日本語を小さく添え、その下にユーカリの細い枝。
 *  文言はボタニカルと同じ。花の絵（form/static/indigo/images/）は画像AIで作り、
 *  白地を透過にして色を --navy（#2F4A7A）の1色に揃えた WebP。
 *  四隅の花は左上の角の絵1枚を、CSS で左右・上下に反転して使う。
 */

:root {
  --paper: #FDFDFB;
  --ink: #2B3445;
  --ink-soft: #6C7586;
  --navy: #2F4A7A;
  --navy-soft: #8B9BB8;
  --line: #DCE2EC;
  --page: 480px;
  --serif: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --latin: 'Cormorant Garamond', 'Shippori Mincho', serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --brush: cubic-bezier(.45, .05, .35, 1);
}

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

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

body.in {
  margin: 0;
  background: #EEF0F4;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 2;
  letter-spacing: .12em;
  -webkit-font-smoothing: antialiased;
}

/* 初期化は :where() で優先度を 0 にする。個別の指定に負けるように */
:where(.in) img { max-width: 100%; height: auto; display: block; }
:where(.in) a { color: var(--navy); }
:where(.in) :is(h1, h2, h3, p, ol, ul, dl, figure) { margin: 0; padding: 0; }
:where(.in) :is(ol, ul) { list-style: none; }

.in-page {
  position: relative;
  max-width: var(--page);
  margin: 0 auto;
  background: var(--paper);
  overflow: hidden;
  box-shadow: 0 0 40px rgba(43, 52, 69, .08);
}

.in-muted { color: var(--ink-soft); }

/* ───── 表紙 ─────
 *
 *  四隅に紺の花、真ん中に楕円の紋章（頭文字と、枠に沿って回る英文）、その下に題・両家・日付。
 */

.in-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 120px 28px 110px;
  overflow: hidden;
  text-align: center;
}

/* 四隅の花。左上の角の絵を反転して4つの角に置く */
.in-corner { position: absolute; width: 46%; max-width: 220px; pointer-events: none; }
.in-corner--tl { top: 0; left: 0; }
.in-corner--tr { top: 0; right: 0; transform: scaleX(-1); }
.in-corner--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.in-corner--br { bottom: 0; right: 0; transform: scale(-1, -1); }

/* 紋章。楕円の二重線の間に英文を回し、内側に頭文字 */
.in-crest { position: relative; width: min(176px, 46vw); aspect-ratio: 2 / 3; margin-bottom: 30px; }
.in-crest__frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.in-crest__frame ellipse { fill: none; stroke: var(--navy); stroke-width: 1; }
.in-crest__frame text {
  font-family: var(--latin);
  font-size: 12.2px;
  font-style: italic;
  letter-spacing: .12em;
  fill: var(--navy);
}
.in-crest__initials {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: var(--latin);
  font-size: min(54px, 14vw);
  font-weight: 500;
  line-height: .95;
  letter-spacing: 0;
  color: var(--navy);
}
.in-crest__amp { font-size: .5em; font-style: italic; line-height: 1.1; }
/* 頭文字が無いしおりは、& だけを大きく */
.in-crest__initials .in-crest__amp:only-child { font-size: 1em; }

.in-cover__title { font-size: 21px; font-weight: 500; line-height: 1.6; letter-spacing: .24em; padding-left: .24em; }
.in-cover__families { margin-top: 6px; font-size: 16px; letter-spacing: .2em; }
.in-cover__date { margin-top: 8px; font-family: var(--latin); font-size: 17px; letter-spacing: .14em; color: var(--ink-soft); }
/* 曜日は英語の略（Tue）。日付と同じ書体で、少し間を空ける */
.in-cover__date span { margin-left: .7em; }

.in-scroll {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 1px;
  height: 40px;
  margin-left: -.5px;
  background: var(--line);
  overflow: hidden;
}
.in-scroll span {
  position: absolute;
  left: 0;
  top: -40px;
  width: 1px;
  height: 40px;
  background: var(--navy);
  animation: in-scroll 2.4s var(--ease) infinite;
}
@keyframes in-scroll { to { transform: translateY(80px); } }

/* ───── セクション ───── */

.in-section {
  position: relative;
  padding: 64px 28px;
  text-align: center;
}
.in-section--tint { background: #F3F5F9; }

/* 見出し。英字のセリフ体と、その下に小さな日本語。さらにその下にユーカリの細い枝 */
.in-heading { margin-bottom: 30px; font-weight: 400; }
.in-heading__en {
  display: block;
  font-family: var(--latin);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .02em;
  color: var(--navy);
}
.in-heading__ja {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .3em;
  padding-left: .3em;   /* 字間の分だけ右へずれるのを戻す */
}
.in-heading::after {
  content: '';
  display: block;
  width: 132px;
  height: 14px;
  margin: 12px auto 0;
  background: url("../images/sprig.77d3a877039d.webp") center / contain no-repeat;
  opacity: .85;
}

/* ごあいさつの花束 */
.in-bouquet { width: 128px; margin: -8px auto 22px; }

.in-text { font-size: 14px; line-height: 2.4; }

/* 本日の流れ */
.in-venue { margin-bottom: 36px; }
.in-venue__date { font-size: 20px; letter-spacing: .08em; line-height: 1.5; }
.in-venue__date small { font-size: 13px; }
.in-venue__time { display: block; font-size: 16px; color: var(--ink-soft); }
.in-venue__name { margin-top: 14px; font-size: 17px; font-weight: 600; }
.in-venue__address { font-size: 12px; color: var(--ink-soft); line-height: 1.8; }

/* 地図。Google の埋め込みは配色を指定できないので、filter で彩度を落とす */
.in-map {
  margin: -8px auto 40px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.in-map iframe {
  display: block;
  width: 100%;
  height: 240px;
  border: 0;
  filter: grayscale(.75) brightness(1.03);
}

/* 当日の予定と今後の予定。ボタニカルと同じく、時刻・日付の列を揃えて左寄せにし、点線で区切る */
.in-list { max-width: 300px; margin: 0 auto; }
.in-list > div {
  display: flex;
  gap: 16px;
  padding: 12px 4px;
  border-bottom: 1px dashed var(--line);
  text-align: left;
}
.in-list dt { flex: 0 0 7.5em; color: var(--navy); letter-spacing: .08em; white-space: nowrap; }
.in-list dd { margin: 0; flex: 1; text-align: left; }
/* 時刻・日付が未入力の行は列を詰める（空の列の分だけ予定が右へずれるため） */
.in-list dt:empty { display: none; }

.in-button {
  display: inline-block;
  margin-top: 16px;
  padding: 8px 26px;
  border: 1px solid var(--navy);
  font-size: 13px;
  text-decoration: none;
  color: var(--navy);
  letter-spacing: .14em;
  transition: background .3s, color .3s;
}
.in-button:hover, .in-button:focus-visible { background: var(--navy); color: #fff; }

/* 広告。中央に寄せ、前後に余白を取る */
.in-ad { margin: 48px auto 0; text-align: center; }
.in-ad .google_ads_rec { display: flex; justify-content: center; }

/* 協賛 */
#sponsor .in-heading__ja { letter-spacing: .12em; padding-left: .12em; }
.in-affiliates { display: grid; gap: 40px; }
.in-affiliate img { margin: 0 auto 12px; height: auto; }
.in-affiliate p { font-size: 13px; line-height: 1.9; }
.in-affiliate__name { font-weight: 600; font-size: 15px !important; margin-bottom: 6px !important; }
.in-affiliate__pick { color: var(--navy); margin-top: 8px !important; }

/* ふたりのプロフィール */
.in-couple { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 18px; align-items: start; }
/* 見本と同じく丸く切り抜き、紺の細い輪で縁取る */
.in-portrait { width: 82%; margin: 0 auto; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: #EEF1F6; box-shadow: 0 0 0 1px var(--paper), 0 0 0 2px var(--navy-soft); }
.in-portrait img { width: 100%; height: 100%; object-fit: cover; }
.in-person__name {
  margin-top: 12px;
  padding-bottom: 6px;
  border-bottom: 1px dotted var(--navy);
  font-size: 16px;
  letter-spacing: .14em;
}
.in-person__en { margin-top: 4px; font-size: 11px; letter-spacing: .16em; color: var(--ink-soft); line-height: 1.6; }
.in-person__prof { margin-top: 10px; font-size: 12px; line-height: 2; text-align: left; overflow-wrap: anywhere; }

/* 家族。家の名前の左右に紺の細い線を引いて区切る */
.in-family { margin: 0 auto 44px; }
.in-family + .in-ad { margin: 0 auto 44px; }
.in-family__title {
  display: flex;
  align-items: center;
  gap: 1.4em;
  margin-bottom: 26px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .24em;
  color: var(--navy);
}
.in-family__title::before,
.in-family__title::after { content: ''; flex: 1; height: 1px; background: var(--navy); }
.in-family__title span { padding-left: .24em; }   /* 字間の分だけ右へずれるのを戻す */
.in-members { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 14px; }
.in-photo {
  width: 96px;
  aspect-ratio: 1;
  margin: 0 auto 10px;
  border-radius: 50%;
  overflow: hidden;
  background: #EEF1F6;
}
.in-photo img { width: 100%; height: 100%; object-fit: cover; }
.in-members__name { font-size: 13px; letter-spacing: .14em; line-height: 1.7; }
.in-members__rel { color: var(--navy); }
.in-members__rel:not(:empty)::after { content: '：'; }
.in-members__rel:empty { display: none; }
.in-members__prof { margin-top: 4px; font-size: 12px; line-height: 1.85; color: var(--ink-soft); overflow-wrap: anywhere; }

/* 出会いから今まで。写真と文を左右交互に */
.in-story { display: grid; gap: 30px; text-align: left; }
.in-story__item { display: grid; grid-template-columns: 55% 1fr; gap: 14px; align-items: center; }
.in-story__item:nth-child(even) { grid-template-columns: 1fr 55%; }
.in-story__item:nth-child(even) .in-story__photo { order: 2; }
.in-story__item:nth-child(even) .in-story__body { text-align: right; }
/* 長い文を右寄せにすると読みにくいので、日付と題だけ右に寄せる */
.in-story__item:nth-child(even) .in-story__text { text-align: left; }
.in-story__item--text { grid-template-columns: 1fr !important; text-align: center; }
.in-story__item--text .in-story__body { text-align: center !important; }
.in-story__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.in-story__date { font-size: 12px; color: var(--navy); letter-spacing: .1em; line-height: 1.7; }
.in-story__title { font-size: 14px; font-weight: 600; line-height: 1.7; }
.in-story__text { margin-top: 4px; font-size: 12px; line-height: 1.85; overflow-wrap: anywhere; }

/* 思い出。見本のように大小を組み合わせる。
 * 3枚で1組（大1・小2）にし、大きい写真を左・右と交互に置く。
 * 枚数が3の倍数でないときは、最後の写真を広げて隙間を埋める。
 * 広告の li を数えないよう、:nth-child(... of .in-gallery__photo) で数える */
.in-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  gap: 5px;
}
.in-gallery__photo:nth-child(6n + 1 of .in-gallery__photo) { grid-column: 1 / span 2; grid-row: span 2; }
.in-gallery__photo:nth-child(6n + 4 of .in-gallery__photo) { grid-column: 2 / span 2; grid-row: span 2; }
/* 1組の最初の1枚だけが残ったら、横いっぱいに */
.in-gallery__photo:nth-child(3n + 1 of .in-gallery__photo):nth-last-child(1 of .in-gallery__photo) { grid-column: 1 / -1; grid-row: auto; }
.in-gallery__photo:nth-child(3n + 1 of .in-gallery__photo):nth-last-child(1 of .in-gallery__photo) img { aspect-ratio: 3 / 2; }
/* 大1・小1で終わったら、小を縦に2段ぶん伸ばす */
.in-gallery__photo:nth-child(3n + 2 of .in-gallery__photo):nth-last-child(1 of .in-gallery__photo) { grid-row: span 2; }
.in-gallery figure { position: relative; height: 100%; overflow: hidden; cursor: zoom-in; }
.in-gallery img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .8s var(--ease); }
.in-gallery figure:hover img { transform: scale(1.04); }
.in-gallery figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 8px 6px;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .04em;
  color: #fff;
  text-align: left;
  background: linear-gradient(transparent, rgba(40, 30, 30, .55));
}
.in-gallery__ad { grid-column: 1 / -1; grid-row: auto !important; display: flex; justify-content: center; padding: 16px 0; }

/* 拡大表示 */
.in-lightbox {
  max-width: min(92vw, 640px);
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
}
.in-lightbox::backdrop { background: rgba(40, 30, 30, .78); }
.in-lightbox img { width: 100%; max-height: 78vh; object-fit: contain; background: #222; }
.in-lightbox p { padding: 10px 16px 14px; font-size: 14px; text-align: center; }
.in-lightbox p:empty { display: none; }
.in-lightbox__close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  color: var(--ink);
  font-size: 24px;
  line-height: 36px;
  cursor: pointer;
}

/* 結び。結びのひと言、ロゴと案内、いちばん下に紺の花 */
.in-footer { position: relative; padding: 48px 0 0; text-align: center; }
.in-closing__text { margin-bottom: 48px; font-size: 13px; letter-spacing: .14em; }
/* 花は紙の下端に置く。表紙の下の角と同じ形で、しおりの始まりと終わりを揃える */
.in-closing { position: relative; height: 200px; margin-top: 8px; overflow: hidden; }
.in-closing .in-corner { width: 40%; }
/* 他のテーマと同じロゴ。書体は bloom と同じ M+ 1c Thin のサブセット（4KB・この名前の字だけ入っている） */
@font-face {
  font-family: 'in-mplus';
  src: url("../fonts/mplus-1c-thin.5223838dc4ed.ttf") format('truetype');
}
.in-footer__brand { display: inline-flex; align-items: center; gap: 0; text-decoration: none; color: #000 !important; }
.in-footer__brand img { width: 18px; height: auto; }
.in-footer__brand span { font-family: 'in-mplus', Arial, serif; font-size: 16px; letter-spacing: 0; }

/* ───── プレビュー（編集中の確認画面）─────
 *
 *  上の「マイページへ」は form/css/common_style.css が作る。
 *  下の「編集」「共有用ページ」は、このテーマが Bootstrap を読まないので、ここで形を付ける。
 */
.in--preview { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
.in .header {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--line);
}
.in .header .btn {
  flex: 1;
  max-width: 240px;
  padding: 10px 12px;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: .1em;
  text-align: center;
  text-decoration: none;
}
.in .header .preview-btn { background: #fff; color: var(--navy); }

/* プレビューのときのヘッダー（common_style.css）と重ならないように */
/* 下の「編集」の帯（約64px）に帯の日付が隠れないよう、表紙の高さからその分を引く */
.header-top + .header + .in-page .in-cover {
  padding-top: 98px;
  min-height: calc(100vh - 64px);
  min-height: calc(100svh - 64px - env(safe-area-inset-bottom));
}

/* ───── 動き ─────
 *
 *  html.js のときだけ「出現前」にする。JS が読めない環境では最初から全部見える。
 *  動きを減らす設定の端末では一切動かさない（末尾）。
 */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* 見出し。英字、日本語、枝の順に現れる */
.js .in-heading.reveal { transform: none; }
.js .in-heading__en { opacity: 0; transform: translateY(8px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.js .in-heading__ja { opacity: 0; transition: opacity 1s var(--ease) .5s; }
.js .in-heading::after { clip-path: inset(0 50% 0 50%); transition: clip-path 1.4s var(--brush) .7s; }
.js .in-heading.is-in .in-heading__en { opacity: 1; transform: none; }
.js .in-heading.is-in .in-heading__ja { opacity: 1; }
.js .in-heading.is-in::after { clip-path: inset(0 0 0 0); }

/* 表紙。四隅の花がその場で現れ、紋章の線が描かれ、頭文字・題の順に */
.js .in-cover .in-corner { opacity: 0; }
.js .in-crest__frame ellipse { stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.js .in-crest__frame text, .js .in-crest__initials,
.js .in-cover__title, .js .in-cover__families, .js .in-cover__date { opacity: 0; }

.in-cover .in-corner { transition: opacity 1.8s var(--ease) .2s; }
.in-crest__frame ellipse { transition: stroke-dashoffset 2.6s var(--brush) .6s; }
.in-crest__frame text { transition: opacity 1.4s var(--ease) 1.8s; }
.in-crest__initials { transition: opacity 1.4s var(--ease) 1.4s; }
.in-cover__title { transition: opacity 1.2s var(--ease) 2.4s; }
.in-cover__families, .in-cover__date { transition: opacity 1.2s var(--ease) 2.8s; }

.js.is-ready .in-cover .in-corner,
.js.is-ready .in-crest__frame text, .js.is-ready .in-crest__initials,
.js.is-ready .in-cover__title, .js.is-ready .in-cover__families, .js.is-ready .in-cover__date { opacity: 1; }
.js.is-ready .in-crest__frame ellipse { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .in *, .in *::before, .in *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .in-heading__en, .js .in-heading__ja, .js .in-cover .in-corner,
  .js .in-crest__frame text, .js .in-crest__initials,
  .js .in-cover__title, .js .in-cover__families, .js .in-cover__date { opacity: 1 !important; }
  .js .reveal, .js .in-heading__en { transform: none !important; }
  .js .in-heading::after { clip-path: none !important; }
  .js .in-crest__frame ellipse { stroke-dashoffset: 0 !important; }
}