/* ==================================================
   固定ページ「熨斗（のし）・ギフト対応について」専用CSS
   使用ページ：熨斗（のし）について
   前提：大元の追加CSSに .sanraku-page / .sr- 共通CSSあり
   ※この固定ページだけの追加CSSに丸ごと入れ替える
   ※FAQのQ/A装飾は大元CSSの .sr-faq-list / .sr-faq-item を使用
   ※不要なHTMLを隠すCSSは使わない
================================================== */


/* ------------------------------
   基本調整
------------------------------ */

.sanraku-noshi {
  --noshi-serif: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif;
  --noshi-sans: "Yu Gothic", "游ゴシック", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --noshi-ink: var(--sr-ink, #2c2a27);
  --noshi-text: var(--sr-text, #403b35);
  --noshi-muted: var(--sr-muted, #756d65);
  --noshi-red: var(--sr-red, #9d1714);
  --noshi-gold: var(--sr-gold, #9d773d);
  --noshi-border: rgba(86, 68, 42, 0.075);
  --noshi-soft: rgba(255, 250, 244, 0.82);
  color: var(--noshi-text);
}

.sanraku-noshi p,
.sanraku-noshi li {
  font-family: var(--noshi-sans);
  letter-spacing: 0.04em;
}

.sanraku-noshi .sr-title,
.sanraku-noshi .sr-hero-title,
.sanraku-noshi .sr-brand-name {
  font-family: var(--noshi-serif) !important;
}

.sanraku-noshi .sr-title {
  font-size: clamp(24px, 2vw, 32px) !important;
  letter-spacing: 0.06em;
}



/* ------------------------------
   ヒーロー
------------------------------ */

.sanraku-noshi .sr-hero {
  padding-top: 24px;
  padding-bottom: 66px;
}



.sanraku-noshi .sr-hero-title {
  line-height: 1.58 !important;
  letter-spacing: 0.055em;
}

.sanraku-noshi .sr-hero-title-line {
  font-weight: 500;
  line-height: 1.58;
}

.sanraku-noshi .sr-hero-title-line {
  font-size: clamp(24px, 2.1vw, 32px);
}


.sanraku-noshi .sr-hero-text {
  margin-top: 28px;
  color: #514a43;
}


.sanraku-noshi .sr-hero-image img {
  aspect-ratio: 1.32 / 1;
  object-position: center center;
}


/* ------------------------------
   包装について
------------------------------ */

.sanraku-noshi .noshi-wrap-card {
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}

.sanraku-noshi .noshi-wrap-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
  align-items: stretch;
}

.sanraku-noshi .noshi-wrap-photo {
  margin: 0;
  background: #ffffff;
}

.sanraku-noshi .noshi-wrap-photo img {
  width: 100%;
  height: 100%;
  min-height: 390px;
  object-fit: cover;
  object-position: center center;
}

.sanraku-noshi .noshi-wrap-body {
  padding: 44px 48px 46px;
}

.sanraku-noshi .noshi-wrap-body h3 {
  margin: 0 0 20px !important;
  color: var(--noshi-ink) !important;
  font-family: var(--noshi-serif) !important;
  font-size: 21px !important;
  font-weight: 500 !important;
  line-height: 1.72 !important;
  letter-spacing: 0.06em;
}

.sanraku-noshi .noshi-wrap-body p {
  margin: 0;
  color: #514a43;
  font-size: 16px;
  line-height: 2.04;
}

.sanraku-noshi .noshi-wrap-body p + p {
  margin-top: 18px;
}


/* ------------------------------
   金額同梱なし案内
------------------------------ */

.sanraku-noshi .noshi-price-note {
  max-width: 980px;
  margin: 30px auto 0;
  padding: 32px 38px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  background: rgba(255, 250, 244, 0.9);
  border-color: rgba(157, 23, 20, 0.12);
}

.sanraku-noshi .noshi-note-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(157, 23, 20, 0.08);
  color: var(--noshi-red);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.sanraku-noshi .noshi-price-note h3 {
  margin: 0 0 10px !important;
  color: var(--noshi-ink) !important;
  font-family: var(--noshi-serif) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
  letter-spacing: 0.06em;
}

.sanraku-noshi .noshi-price-note p {
  margin: 0;
  color: #514a43;
  font-size: 16px;
  line-height: 2;
}


/* ------------------------------
   熨斗の種類
------------------------------ */

.sanraku-noshi .noshi-type-grid {
  max-width: 980px;
  margin: 0 auto;
}

.sanraku-noshi .noshi-type-card img {
  width: 100%;
  aspect-ratio: 1.42 / 1;
  object-fit: cover;
  object-position: center center;
  background: #ffffff;
}

.sanraku-noshi .noshi-type-card .sr-brand-body {
  padding: 36px 38px 40px;
}

.sanraku-noshi .noshi-type-card .sr-brand-name {
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  letter-spacing: 0.06em;
}

.sanraku-noshi .noshi-type-card .sr-brand-text {
  margin-top: 18px;
  color: #554e47;
  font-size: 15.5px;
  line-height: 2.02;
}

.sanraku-noshi .noshi-small-text {
  margin-top: 16px;
  color: #756d65;
  font-size: 14px;
  line-height: 1.9;
}


/* ------------------------------
   表書きの一例
------------------------------ */

.sanraku-noshi .noshi-purpose-card {
  max-width: 980px;
  margin: 0 auto;
}

.sanraku-noshi .noshi-purpose-panel {
  margin-top: 30px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--noshi-border);
  border-radius: 2px;
}

.sanraku-noshi .noshi-purpose-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  border-bottom: 1px solid var(--noshi-border);
}

.sanraku-noshi .noshi-purpose-row:last-child {
  border-bottom: none;
}

.sanraku-noshi .purpose-title {
  display: flex;
  align-items: center;
  padding: 20px 22px;
  background: rgba(255, 248, 239, 0.82);
  color: #70451f;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.7;
}

.sanraku-noshi .purpose-words {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px 22px;
  align-items: center;
}

.sanraku-noshi .purpose-words span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  background: #ffffff;
  border: 1px solid rgba(86, 68, 42, 0.09);
  border-radius: 999px;
  color: #403b35;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.sanraku-noshi .noshi-note {
  margin: 20px 0 0;
  color: var(--noshi-muted);
  font-size: 14.5px;
  line-height: 1.95;
}


/* ------------------------------
   ご注文時の指定方法
------------------------------ */

.sanraku-noshi .noshi-step-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 980px;
  margin: 0 auto;
}

.sanraku-noshi .noshi-step-card {
  position: relative;
  padding: 30px 32px 32px;
}

.sanraku-noshi .noshi-step-number {
  display: block;
  margin-bottom: 14px;
  color: var(--noshi-gold);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
}

.sanraku-noshi .noshi-step-number::before {
  content: "STEP ";
}

.sanraku-noshi .noshi-step-card h3 {
  margin: 0 0 14px !important;
  color: var(--noshi-ink) !important;
  font-family: var(--noshi-serif) !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  line-height: 1.68 !important;
  letter-spacing: 0.06em;
}

.sanraku-noshi .noshi-step-card p {
  margin: 0;
  color: #554e47;
  font-size: 15.5px;
  line-height: 2;
}

.sanraku-noshi .noshi-step-card p + p {
  margin-top: 12px;
}


/* ------------------------------
   FAQ
   ※Q/Aの疑似要素は大元CSSを使用するため、ここでは作らない
------------------------------ */

.sanraku-noshi .noshi-faq-card {
  max-width: 980px;
  margin: 0 auto;
}

.sanraku-noshi .noshi-faq-card .sr-section-head {
  margin-bottom: 34px;
}


/* ------------------------------
   最後のCTA
------------------------------ */


/* ------------------------------
   1カラム時のヒーロー写真
   ※元画像上部の白い余白を抑え、箱と熨斗が早く見える構図にする
------------------------------ */

@media (max-width: 760px) {
  .sanraku-noshi .sr-hero-image img {
    aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: center 82%;
  }
}

/* ------------------------------
   タブレット
------------------------------ */

@media (max-width: 1024px) {
  .sanraku-noshi .sr-hero {
    padding-top: 18px;
    padding-bottom: 56px;
  }



  .sanraku-noshi .noshi-wrap-layout {
    grid-template-columns: 1fr;
  }

  .sanraku-noshi .noshi-wrap-photo img {
    min-height: 0;
    aspect-ratio: 1.42 / 1;
  }

  .sanraku-noshi .noshi-step-grid {
    grid-template-columns: 1fr;
  }
}


/* ------------------------------
   スマホ
------------------------------ */

@media (max-width: 560px) {
  .sanraku-noshi .sr-hero {
    padding-top: 0;
    padding-bottom: 44px;
  }

  .sanraku-noshi .sr-hero-grid {
    gap: 28px;
  }

  .sanraku-noshi .sr-hero-title-line {
    font-size: 22px;
    line-height: 1.58;
  }


  .sanraku-noshi .sr-hero-text {
    margin-top: 22px;
    font-size: 15px;
    line-height: 2;
  }


  .sanraku-noshi .sr-hero-image img {
    aspect-ratio: 1.72 / 1;
    object-position: center 82%;
  }

  .sanraku-noshi .noshi-wrap-body {
    padding: 32px 26px 34px;
  }

  .sanraku-noshi .noshi-wrap-body h3 {
    font-size: 19px !important;
    line-height: 1.7 !important;
  }

  .sanraku-noshi .noshi-wrap-body p {
    font-size: 15px;
    line-height: 2;
  }

  .sanraku-noshi .noshi-price-note {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 28px 24px 30px;
  }

  .sanraku-noshi .noshi-note-mark {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }

  .sanraku-noshi .noshi-price-note h3 {
    font-size: 18px !important;
  }

  .sanraku-noshi .noshi-price-note p {
    font-size: 15px;
    line-height: 2;
  }

  .sanraku-noshi .noshi-type-card .sr-brand-body {
    padding: 32px 28px 34px;
  }

  .sanraku-noshi .noshi-type-card .sr-brand-name {
    font-size: 22px !important;
  }

  .sanraku-noshi .noshi-purpose-row {
    grid-template-columns: 1fr;
  }

  .sanraku-noshi .purpose-title {
    padding: 16px 18px;
  }

  .sanraku-noshi .purpose-words {
    padding: 16px 18px 18px;
    gap: 8px;
  }

  .sanraku-noshi .purpose-words span {
    min-height: 30px;
    padding: 0 12px;
    font-size: 13.5px;
  }

  .sanraku-noshi .noshi-note {
    font-size: 14px;
    line-height: 1.9;
  }

  .sanraku-noshi .noshi-step-card {
    padding: 26px 24px 28px;
  }

  .sanraku-noshi .noshi-step-card h3 {
    font-size: 18px !important;
  }

  .sanraku-noshi .noshi-step-card p {
    font-size: 15px;
    line-height: 2;
  }

  .sanraku-noshi .noshi-faq-card .sr-section-head {
    margin-bottom: 30px;
  }
}