/* アガペ HP - カスタムスタイル */

/* Google Fonts */
/* ベーススタイル */
/* html を1つ足して指定を強めています。Tailwind の初期化が body { line-height: inherit }
   を後から当てるため、body だけだと行間 1.8 が効きません（2026-09-09 実測で判明）。 */
html body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  line-height: 1.8;
  font-feature-settings: 'palt' 1;
  text-spacing-trim: trim-start;
  color: #3A3530;
  background-color: #FAF8F4;
}

h1, h2, h3, h4 {
  font-family: 'Noto Serif JP', serif;
  font-feature-settings: 'palt' 1;
  text-wrap: balance;
  line-break: strict;
}

p, li, dd, td {
  text-wrap: pretty;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* 余白スケール：台帳・一覧・語り・CTA */
.sec-tight { padding-block: 2.5rem; }
.sec-base { padding-block: 3rem; }
.sec-read { padding-block: 4rem; }
.sec-air { padding-block: 4.5rem; }
@media (min-width: 768px) {
  .sec-tight { padding-block: 4rem; }
  .sec-base { padding-block: 5rem; }
  .sec-read { padding-block: 7rem; }
  .sec-air { padding-block: 8.5rem; }
}

/* 紙の地と罫線の階調 */
:root {
  --paper-1: #FAF8F4;
  --paper-2: #F5F1E9;
  --paper-3: #F0EBE3;
  --rule-hair: #E6DFD4;
  --rule-base: #D2C7B6;
  --rule-strong: #BEAF98;
}

/* 周期と位置をずらした2層の紙の目 */
.paper {
  background-image:
    radial-gradient(rgba(58,53,48,.022) .5px, transparent .6px),
    radial-gradient(rgba(58,53,48,.016) .5px, transparent .6px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 3px 4px;
}
.paper-dark {
  background-image:
    radial-gradient(rgba(250,248,244,.03) .5px, transparent .6px),
    radial-gradient(rgba(250,248,244,.03) .5px, transparent .6px);
  background-size: 9px 9px, 13px 13px;
  background-position: 0 0, 3px 4px;
}

/* 面の切れ目・見出しの縦罫・一覧の下罫・章の上罫 */
.rule-hair { border-bottom: 1px solid var(--rule-hair); }
.rule-lead { position: relative; padding-left: 1.125rem; }
.rule-lead::before {
  content: '';
  position: absolute;
  left: 0;
  top: .3em;
  bottom: .3em;
  width: 3px;
  border-radius: 1.5px;
  background: #A34A2E;
}
.rule-under { border-bottom: 1px solid var(--rule-base); padding-bottom: 1.25rem; }
.rule-over { border-top: 2px solid var(--rule-strong); padding-top: 1.25rem; }

/* 写真の内枠 */
.framed { position: relative; }
.framed::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(58,53,48,.10);
  pointer-events: none;
}

/* 箇条書きの装飾 */
.list-mark > li { position: relative; padding-left: 1.25rem; }
.list-mark > li::before {
  content: ''; position: absolute; left: .25rem; top: .72em;
  width: 5px; height: 5px; border-radius: 50%; background: #BEAF98;
}
.list-mark--accent > li::before { background: #A34A2E; }

/* 代表メッセージの引用記号 */
.quote-mark { position: relative; }
.quote-mark::before {
  content: '「'; position: absolute; left: -.55em; top: -.4em;
  font-family: 'Noto Serif JP', serif; font-size: 3.25rem; line-height: 1;
  color: #D4B896; opacity: .5; pointer-events: none;
}

/* 鉤括弧で始まる見出しの左アキを詰める */
.h-kagi { text-indent: -.5em; }

/* ヒーロー背景オーバーレイ */
.hero-overlay {
  background: linear-gradient(135deg, rgba(58, 53, 48, 0.55) 0%, rgba(58, 53, 48, 0.3) 100%);
}

/* ヒーロー案B-1: 主役画像に重ねる暗いヴェール（左下=濃 → 右上=透明・チャコールベース） */
.hero-veil {
  background: linear-gradient(
    to top right,
    rgba(58, 53, 48, 0.78) 0%,
    rgba(58, 53, 48, 0.55) 32%,
    rgba(58, 53, 48, 0.18) 62%,
    rgba(58, 53, 48, 0) 88%
  );
}

/* ヒーロー案B-1: 写真上テキストの可読性保険（テキストシャドウ） */
.hero-text-shadow {
  text-shadow: 0 2px 12px rgba(58, 53, 48, 0.65), 0 1px 3px rgba(58, 53, 48, 0.5);
}

/* カードホバー */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(58, 53, 48, 0.12);
}

/* タイムライン */
.timeline-item::before {
  content: '';
  position: absolute;
  left: -1.5rem;
  top: 0.375rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #D4846A;
  border: 2px solid #FAF8F4;
  box-shadow: 0 0 0 2px #D4846A;
}

/* フォームスタイル */
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #D4846A;
  box-shadow: 0 0 0 3px rgba(212, 132, 106, 0.2);
}

/* 電話番号リンク（タップ対応） */
a[href^="tel"] {
  white-space: nowrap;
}

/* プリント対応 */
@media print {
  header, footer, nav { display: none !important; }
  body { font-size: 12pt; }
}