@charset "UTF-8";
/* =============================================================
   鈴木太郎 画家ブランドサイト  —  2027 卓上カレンダー (calendar.css)
   制作: SWIRL CREATE
   base.css の変数・共通コンポーネントを前提に、
   カレンダー紹介ページ固有のスタイルのみを記述。
   構成: ① ヒーロー ② コンセプト ③ 12か月ギャラリー
         ④ 仕様 ⑤ 購入CTA
   ============================================================= */

/* -------------------------------------------------------------
   ① ヒーロー(表紙ビジュアル + 見出し + 購入導線)
   ------------------------------------------------------------- */
.cal-hero {
  position: relative;
  background: var(--grad-konjo);
  color: var(--paper);
  padding: clamp(128px, 20vh, 208px) var(--gutter) clamp(60px, 9vw, 112px);
  overflow: hidden;
  isolation: isolate;
}
.cal-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.4px);
  background-size: 6px 6px; opacity: 0.4; mix-blend-mode: overlay;
}

.cal-hero-inner {
  max-width: var(--measure);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 6vw, 76px);
  align-items: center;
}

.cal-hero .eyebrow {
  font-family: var(--font-en);
  font-size: clamp(0.82rem, 1.6vw, 1rem);
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gold-light); display: inline-block; margin-bottom: 1.1em;
}
.cal-hero .eyebrow::before {
  content: ""; display: inline-block; width: 34px; height: 1px;
  background: var(--gold); vertical-align: middle;
  margin-right: 0.9em; transform: translateY(-3px);
}
.cal-hero-title {
  font-family: var(--font-jp); font-weight: 500;
  font-size: clamp(1.9rem, 5vw, 2.9rem); letter-spacing: 0.1em;
  color: var(--paper); line-height: 1.4;
}
.cal-hero-title .en {
  display: block; font-family: var(--font-en); font-weight: 500;
  font-size: 0.42em; letter-spacing: 0.3em; color: var(--blue-pale);
  margin-top: 1em; text-transform: uppercase;
}
.cal-hero-lead {
  margin-top: clamp(20px, 3vw, 30px); max-width: 30em;
  color: var(--blue-mist); line-height: 2.1;
  font-size: clamp(0.92rem, 1.7vw, 1.04rem);
  /* 日本語を文節（意味の区切り）で改行する。非対応ブラウザは通常折返し */
  word-break: auto-phrase;
}
.cal-hero-actions {
  margin-top: clamp(28px, 4vw, 40px);
  display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: center;
}
.cal-hero-note {
  margin-top: 1.6em; font-size: 0.78rem; letter-spacing: 0.1em;
  color: var(--blue-pale);
}

/* 表紙の写真(ゴールドの細枠 + 影) */
.cal-hero-figure {
  position: relative;
  padding: clamp(8px, 1.2vw, 14px);
  border: 1px solid rgba(227, 200, 132, 0.4);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 30px 70px rgba(5, 12, 24, 0.5);
}
.cal-hero-figure img {
  width: 100%; border-radius: var(--radius); display: block;
}

/* -------------------------------------------------------------
   ② コンセプト(本人のことば + 風景写真)
   ------------------------------------------------------------- */
.cal-concept { background: var(--paper); }
.cal-concept-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
.cal-concept-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(10, 22, 38, 0.12);
}
.cal-concept-body .eyebrow {
  font-family: var(--font-en);
  font-size: clamp(0.82rem, 1.6vw, 1rem);
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gold-deep); display: inline-block; margin-bottom: 1em;
}
.cal-concept-body .eyebrow::before {
  content: ""; display: inline-block; width: 34px; height: 1px;
  background: var(--gold); vertical-align: middle;
  margin-right: 0.9em; transform: translateY(-2px);
}
.cal-concept-title {
  font-family: var(--font-jp); font-weight: 500;
  font-size: clamp(1.4rem, 3.4vw, 2rem); letter-spacing: 0.1em;
  color: var(--navy); line-height: 1.6; margin-bottom: 1.1em;
}
.cal-concept-text { color: var(--ink); line-height: 2.15; word-break: auto-phrase; }
.cal-concept-text p + p { margin-top: 1.2em; }
.cal-concept-sign {
  margin-top: 1.8em;
  font-size: 0.86rem; letter-spacing: 0.14em; color: var(--ink-soft);
}
.cal-concept-sign .nm { color: var(--navy); font-weight: 500; }

/* クレジットのリンク(SWIRL CREATE 内山健也 → 公式サイト) */
.cal-credit-link {
  color: var(--gold-deep);
  border-bottom: 1px solid rgba(198, 162, 83, 0.4);
  padding-bottom: 1px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.cal-credit-link:hover { color: var(--gold); border-color: var(--gold); }

/* -------------------------------------------------------------
   ③ 12か月ギャラリー
   ------------------------------------------------------------- */
.cal-gallery { background: var(--paper-dim); }
.cal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 34px);
}
.cal-month {
  display: block; width: 100%;
  text-align: left; cursor: pointer;
  background: var(--paper); border: none; padding: 0;
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(10, 22, 38, 0.08);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.cal-month:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(10, 22, 38, 0.16);
}
.cal-month img {
  width: 100%; aspect-ratio: 131 / 140; object-fit: cover; display: block;
}
.cal-month-cap {
  display: flex; align-items: baseline; gap: 0.7em;
  padding: 0.95em 1.1em 1.1em;
}
.cal-month-no {
  font-family: var(--font-en); font-weight: 600;
  font-size: 1.12rem; letter-spacing: 0.06em; color: var(--navy);
}
.cal-month-en {
  font-family: var(--font-en); font-size: 0.78rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep);
}
.cal-gallery-note {
  margin-top: clamp(28px, 4vw, 44px); text-align: center;
  font-size: 0.86rem; letter-spacing: 0.08em; color: var(--ink-soft);
}

/* -------------------------------------------------------------
   ④ 仕様(Details)
   ------------------------------------------------------------- */
.cal-spec { background: var(--paper); }
.cal-spec-inner { max-width: 760px; margin-inline: auto; }
.cal-spec-list { margin-top: clamp(20px, 3vw, 30px); border-top: 1px solid var(--line); }
.cal-spec-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1em;
  padding: 1.15em 0.2em;
  border-bottom: 1px solid var(--line);
}
.cal-spec-row dt {
  font-family: var(--font-en);
  font-size: 0.82rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-deep); padding-top: 0.15em;
}
.cal-spec-row dd {
  margin: 0; color: var(--ink); line-height: 1.9;
  font-size: 0.98rem;
}

/* -------------------------------------------------------------
   ⑤ 購入CTA
   ------------------------------------------------------------- */
.cal-cta {
  position: relative;
  background: var(--grad-konjo);
  color: var(--paper);
  text-align: center;
  padding-block: clamp(64px, 10vw, 120px);
  overflow: hidden; isolation: isolate;
}
.cal-cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.4px);
  background-size: 6px 6px; opacity: 0.4; mix-blend-mode: overlay;
}
.cal-cta .eyebrow {
  font-family: var(--font-en);
  font-size: clamp(0.82rem, 1.6vw, 1rem);
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gold-light); display: inline-block; margin-bottom: 1.2em;
}
.cal-cta-title {
  font-family: var(--font-jp); font-weight: 500;
  font-size: clamp(1.4rem, 3.6vw, 2.1rem); letter-spacing: 0.1em;
  color: var(--paper); line-height: 1.6;
}
.cal-cta-text {
  margin-top: 1.2em; color: var(--blue-mist); line-height: 2;
  font-size: clamp(0.9rem, 1.7vw, 1rem);
  word-break: auto-phrase;
}
.cal-cta-actions {
  margin-top: clamp(28px, 4vw, 40px);
  display: flex; flex-wrap: wrap; gap: 16px 22px; justify-content: center; align-items: center;
}

/* -------------------------------------------------------------
   レスポンシブ
   ------------------------------------------------------------- */
@media (max-width: 860px) {
  .cal-hero-inner { grid-template-columns: 1fr; gap: clamp(28px, 7vw, 40px); }
  .cal-hero-figure { max-width: 440px; margin-inline: auto; order: -1; }
  .cal-concept-inner { grid-template-columns: 1fr; gap: clamp(26px, 7vw, 38px); }
  .cal-concept-figure { max-width: 520px; margin-inline: auto; }
  .cal-grid { grid-template-columns: repeat(2, 1fr); }
  .cal-spec-row { grid-template-columns: 128px 1fr; }
}

@media (max-width: 420px) {
  .cal-hero-actions .btn, .cal-cta-actions .btn { width: 100%; justify-content: center; }
  .cal-spec-row { grid-template-columns: 1fr; gap: 0.3em; }
  .cal-spec-row dt { padding-top: 0; }
}