@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;600&display=swap");

/* ==========================================================================
   変数
   ========================================================================== */
:root {
    /* 色 */
    --color-green: #3db374; /* 特徴サークル・濃い緑 */
    --color-green-deep: #44a268; /* ハイグレード帯 */
    --color-teal: #43ae96; /* サービス説明ブロック背景 */
    --color-teal-grid: #3fa78e; /* 緑ブロックの格子線 */
    --color-olive: #7a8e2e; /* 見出し・ボタンのオリーブ */
    --color-olive-band: #9eac4a; /* ノーマルグレード帯 */
    --color-ring: #c0bc06; /* サークルの外リング */
    --color-band: #ecf0b2; /* 特徴セクションの黄緑帯 */
    --color-beige: #efefdf; /* ベージュ背景 */
    --color-beige-grid: #e7e7d1; /* ベージュの格子線 */
    --color-yellow: #f5e63d; /* マーカー黄色 */
    --color-badge: #fac237; /* 無駄打ちバッジ */
    --color-label: #e1d724;
    --color-orange: #f5aa3c; /* ご注文はこちらボタン */
    --color-red: #c1272d; /* 強調の赤 */
    --color-bright-red: #e2292b; /* 強調の明るい赤 */
    --color-brown: #6d5136; /* ドット見出しの茶色 */
    --color-text: #333333;
    --color-dark-green: #455836; /* ピクトグラム濃緑 */
    --color-white: #ffffff;

    /* レイアウト */
    --content-max: 1200px;
    --pad-min: 20px;
    --narrow-container-width: 700px;
    --button-width: 640px;

    /* 文字 */
    --font-base: 18px;
    --font-maru: "Zen Maru Gothic", sans-serif;

    /* ブレークポイント目安: 1024px / 768px / 480px (メディアクエリで直接使用) */
}

/* ==========================================================================
   リセット・ベース
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: sans-serif;
    font-size: var(--font-base);
    line-height: 1.8;
    color: var(--color-text);
    background: var(--color-white);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

html {
    scroll-behavior: smooth;
}

img {
    max-width: 100%;
    height: auto;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

h1,
h2,
h3,
p,
figure {
    margin: 0;
}

a.plain-link,
.obf-mail a {
    color: inherit;
    text-decoration: none;
}

.inner {
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--pad-min);
}

/* セクション全体の背面に、縦方向中央に配置された帯を出す */
.bg-band {
    background-image: linear-gradient(to bottom, transparent 0%, transparent 40%, var(--color-band) 40%, var(--color-band) 60%, transparent 60%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* ==========================================================================
   共通部品
   ========================================================================== */

/* ボタン */
.btn {
    display: inline-block;
    padding: 0.2em 1em;
    border: none;
    border-radius: 999px;
    font-family: var(--font-base);
    font-size: 2.2rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.25s,
        color 0.25s;
    text-align: center;
    width: var(--button-width);
    max-width: 90%;
    line-height: 1;
}

.btn--olive {
    background: var(--color-olive);
    color: var(--color-white);
    border-radius: 6px;
}

.btn--olive:hover {
    background: #93a93c;
}

.btn--olive:active {
    background: #64751f;
}

.btn--beige {
    background: var(--color-beige-grid);
    color: var(--color-base);
}

.btn--beige:hover {
    background: #93a93c;
    color: var(--color-white);
}

.btn--beige:active {
    background: #64751f;
}

.btn--orange {
    background: var(--color-orange);
    color: #1a1a1a;
}

.btn--orange:hover {
    background: #f7b95e;
}

.btn--orange:active {
    background: #e0912a;
}

.btn--static {
    cursor: default;
}

.btn--large {
    font-size: 1.55rem;
    padding: 0.7em 5em;
}

/* ●見出し● */
.dot-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2em;
    font-family: var(--font-maru);
    font-weight: 500;
    font-size: clamp(1.25rem, 4.5vw, 1.8rem);
    letter-spacing: 0.2em;
    line-height: 1;
    color: var(--color-brown);
    white-space: nowrap;
}

.dot-heading::after,
.dot-heading::before {
    content: "";
    display: block;
    width: 0.9em;
    height: 0.9em;
    border-radius: 50%;
    background: var(--color-olive);
    flex: none;
}
.dot-heading::before {
    margin-right: 0.2em;
}

/* 方眼模様: 1rem四方・中央基準 */
.graph-paper {
    background-image: linear-gradient(to right, var(--grid-line-color) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line-color) 1px, transparent 1px);
    background-size: 1.3rem 1.3rem;
    background-position: center center;
}

.graph-paper--green {
    --grid-line-color: var(--color-teal-grid);
    background-color: var(--color-teal);
}

.graph-paper--beige {
    --grid-line-color: var(--color-beige-grid);
    background-color: var(--color-beige);
}

/* 強調 */
.slightly-larger {
    font-size: 1.2em;
}
.text--green {
    color: var(--color-teal);
}
.text--em {
    display: inline-block;
    position: relative;
}
.text--em:before {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    position: absolute;
    top: -0.5em;
    left: -0.5em;
    background-image: url("../images/emphasis.svg");
    background-size: contain;
    background-position: left top;
    background-repeat: no-repeat;
}

/* メールアドレス難読化(JSでリンク化)。長いアドレスは折り返し可にする */
.obf-mail {
    word-break: break-all;
}

/* ==========================================================================
   1. ヒーロー
   ========================================================================== */
.hero {
    text-align: center;
}

.hero::before {
    content: "";
    display: block;
    height: 80vh;
    background-image: url("../images/photos-collage.webp");
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

.hero__inner {
    position: relative;
    padding: 0 var(--pad-min) 2rem;
    margin: max(-220px, -30vw) auto 0;
}

.hero__logo {
    position: relative;
    display: inline-block;
    padding: 3rem 7rem 6rem;
    margin: 0 auto -6rem;
}

.hero__logo::before {
    content: "";
    position: absolute;
    inset: 72px 0 -72px;
    background: var(--color-white);
    border-radius: 50%;
}

.hero__logo img {
    position: relative;
    width: min(520px, 80vw);
    height: auto;
}

.hero__catch {
    position: relative;
    font-family: var(--font-maru);
    font-weight: 400;
    font-size: clamp(1.2rem, 4vw, 2rem);
    color: var(--color-brown);
    vertical-align: center;
    line-height: 1.5;
}

/* ==========================================================================
   2. 特徴サークル
   ========================================================================== */
.features {
    position: relative;
    padding: 1rem 0 4rem;
}

.features__list {
    position: relative;
    display: flex;
    justify-content: center;
    gap: clamp(1rem, 4vw, 4.5rem);
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--pad-min);
}

.feature-circle {
    position: relative;
    width: clamp(150px, 26vw, 260px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-green);
    box-shadow: 0 0 0 3px var(--color-ring);
    border: 6px solid var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    text-align: center;
}

.feature-circle__text {
    font-family: var(--font-maru);
    font-weight: 600;
    color: var(--color-white);
    font-size: 1.5rem;
    line-height: 1.5;
    padding: 0 0 2rem;
}

.feature-circle:before {
    display: block;
    position: absolute;
    content: "";
    width: 100%;
    height: 36%;
    bottom: -1rem;
    left: 0;
    background-image: url("../images/icon-family.svg");
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.feature--family:before {
    background-image: url("../images/icon-family.svg");
}
.feature--sheet:before {
    background-image: url("../images/icon-sheet.svg");
}
.feature--travel:before {
    background-image: url("../images/icon-plane.svg");
}

/* ==========================================================================
   3. サービス説明
   ========================================================================== */
.about {
    padding: 0 var(--pad-min);
    overflow: hidden;
}

.about__inner {
    position: relative;
    max-width: 900px;
    margin-inline: auto;
    padding: 3rem clamp(1.2rem, 5vw, 4rem) 3rem;
    text-align: center;
}

.about__heading {
    font-family: var(--font-maru);
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    margin-bottom: 0.5em;
    color: var(--color-brown);
    line-height: 1.5;
}

.about__text {
    font-size: clamp(1rem, 2vw, 1.3rem);
    margin-bottom: 2em;
}

.about__photo img {
    max-width: min(550px, 100%);
}

.about__deco {
    position: absolute;
    width: clamp(120px, 21vw, 240px);
}

.about__deco--album {
    right: -14%;
    top: 28%;
    width: clamp(120px, 25vw, 300px);
}

.about__deco--2up {
    left: -6%;
    top: 30%;
    width: clamp(120px, 16vw, 200px);
}

.about__deco--4up {
    left: -12%;
    top: 55%;
}

.about__deco--16up {
    right: -8%;
    top: 55%;
}

/* ==========================================================================
   4. 価格訴求
   ========================================================================== */
.appeal {
    padding: clamp(3rem, 6vw, 5rem) var(--pad-min) 1rem;
    text-align: center;
}

.appeal__sample {
    position: relative;
    display: inline-block;
    margin-bottom: 2.5rem;
}

.appeal__sample > img {
    width: min(360px, 40vw);
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.2);
}

.appeal__badge {
    position: absolute;
    z-index: -1;
    left: 95%;
    top: 18%;
    width: 6.5em;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-badge);
    color: var(--color-text);
    font-family: var(--font-base);
    font-weight: 700;
    font-size: clamp(1rem, 4vw, 3rem);
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-8deg);
}

.appeal__lead {
    font-family: var(--font-base);
    font-size: clamp(1.3rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--color-red);
    vertical-align: middle;
    line-height: 1.5;
}

.appeal__lead-note {
    font-size: 0.65em;
    vertical-align: middle;
}

.appeal__price {
    font-family: var(--font-base);
    font-weight: 700;
    color: var(--color-red);
    font-size: clamp(2.2rem, 6vw, 4rem);
    line-height: 1.5;
    position: relative;
    display: inline-block;
    padding-inline: 1.2em;
}

.appeal__price em {
    font-style: normal;
    font-size: 1.5em;
}

.appeal__heading {
    font-family: var(--font-maru);
    font-weight: 600;
    font-size: clamp(2rem, 6vw, 4rem);
    letter-spacing: 0.08em;
    line-height: 1.2;
    margin-block: 0.4em 0.8em;
}

.marker {
    display: inline-block;
    position: relative;
    padding-inline: 0.2em;
}

.marker::before {
    content: "";
    position: absolute;
    bottom: -0.1em;
    left: 0;
    width: 100%;
    height: 35%;
    background: var(--color-yellow);
    z-index: -1;
    transform: skewX(-20deg);
}

.appeal__text {
    font-size: clamp(0.9rem, 1.6vw, 1rem);
}

.appeal__quote {
    color: var(--color-bright-red);
    font-weight: 700;
    font-size: clamp(1.2rem, 2.6vw, 1.7rem);
}

.appeal__note {
    font-size: clamp(0.85rem, 1.5vw, 0.95rem);
    margin-bottom: 2.5em;
}

/* ==========================================================================
   5. 選べる品質
   ========================================================================== */
.quality {
    padding: 2rem var(--pad-min) 1rem;
    max-width: var(--content-max);
    margin-inline: auto;
    text-align: center;
}
.quality__grade {
    margin-bottom: 5rem;
}

.quality__heading {
    font-family: var(--font-maru);
    font-weight: 500;
    color: var(--color-olive);
    font-size: clamp(2.2rem, 6vw, 5rem);
    letter-spacing: 0.1em;
    margin-bottom: 0.2em;
}

.grade-band {
    font-family: var(--font-maru);
    font-weight: 500;
    color: var(--color-white);
    font-size: clamp(1.3rem, 4vw, 3rem);
    padding: 0.2em 0.5rem 0.3em;
    line-height: 1;
    margin: 0 auto 0.5em;
    width: var(--button-width);
    max-width: 100%;
}

.grade-band--normal {
    background: var(--color-olive-band);
}

.grade-band--high {
    background: var(--color-green-deep);
}

.quality__sample-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8em;
    font-family: var(--font-maru);
    font-weight: 500;
    color: var(--color-brown);
    font-size: clamp(1rem, 4vw, 2rem);
    margin-bottom: 0.7em;
}

.quality__sample-heading::after,
.quality__sample-heading::before {
    content: "";
    display: block;
    height: 2px;
    width: clamp(2em, 8vw, 6em);
    background: var(--color-olive-band);
}

.quality__camera {
    width: 2.2em;
    height: auto;
}

.quality__samples {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
    flex-wrap: nowrap;
}

.quality__samples li {
    flex: 1 1 240px;
    max-width: 360px;
}

.quality__samples img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   6. 共有訴求
   ========================================================================== */
.share {
    padding: 2rem var(--pad-min) 1rem;
    max-width: var(--content-max);
    margin-inline: auto;
    text-align: center;
}

.share__logo img {
    width: min(380px, 55vw);
}

.share__lead {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    font-weight: 500;
    font-family: var(--font-maru);
    font-size: clamp(1rem, 3vw, 2rem);
    line-height: 1.5;
    margin-block: 1em;
}

.share__lead::before,
.share__lead::after {
    content: "";
    width: 20%;
    height: 4px;
    display: block;
    flex-shrink: 4;
    background-image: radial-gradient(var(--color-olive-band) 40%, transparent 40%);
    background-size: 4px 4px;
    background-position: center center;
    background-repeat: repeat-x;
}

.share__photo {
    margin-bottom: 2.5rem;
}

.share__photo img {
    max-width: min(1200px, 100%);
}

.share__sub {
    font-weight: 500;
    font-family: var(--font-maru);
    font-size: clamp(1rem, 3vw, 2rem);
    line-height: 1.5;
    margin-block: 1em;
}

.share__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 3vw, 2.5rem);
    max-width: 1200px;
    margin-inline: auto;
}

.share-item {
    position: relative;
}

.share-item img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}

.share-item__label {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translate(15%, 6%);
    width: 6em;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-label);
    color: var(--color-brown);
    font-family: var(--font-maru);
    font-size: clamp(1rem, 2.2vw, 2rem);
    font-weight: 600;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.share-item__label::after {
    content: "";
    display: block;
    border-radius: 50%;
    border: 3px solid var(--color-olive);
    position: absolute;
    inset: -1px;
    transform: translate(-3%, -3%);
}

.share__closing {
    font-family: var(--font-maru);
    font-weight: 500;
    color: var(--color-brown);
    font-size: clamp(2rem, 6vw, 4rem);
    line-height: 1.2;
    margin: 1em auto;
    width: fit-content;
    padding-bottom: 0.1em;
    border-bottom: solid 0.2em var(--color-orange);
}

/* ==========================================================================
   7. 料金表
   ========================================================================== */
.price {
    padding: clamp(2rem, 5vw, 4rem) var(--pad-min);
    max-width: 900px;
    margin-inline: auto;
}

.price .dot-heading {
    margin-bottom: 2em;
}

.price-table-wrap {
    overflow-x: auto;
    margin-bottom: 3rem;
}

.price-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    border: 3px solid var(--color-text);
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
}

.price-table__caption {
    caption-side: top;
    font-family: var(--font-base);
    font-weight: 600;
    color: var(--color-white);
    font-size: clamp(1.2rem, 2.4vw, 2.2rem);
    padding: 0.1em;
    border: 3px solid var(--color-text);
    border-bottom: none;
}

.price-table__caption--normal {
    background: var(--color-olive-band);
}

.price-table__caption--high {
    background: var(--color-green-deep);
}

.price-table th,
.price-table td {
    border: 1px solid var(--color-text);
    padding: 0.55em 0.4em;
    text-align: center;
    font-weight: 400;
}

.price-table thead th {
    font-size: 0.85em;
}

.price-table tbody tr:nth-child(odd) {
    background: #f5f7e2;
}

.price-table tbody th {
    font-weight: 700;
}

.price__cta {
    text-align: center;
    margin-block: 1rem 2rem;
}

/* ==========================================================================
   8. オプション
   ========================================================================== */
.option {
    padding: 1.5rem;
}

.option__inner {
    width: var(--narrow-container-width);
    max-width: 100%;
    margin-inline: auto;
    background: var(--color-beige);
    text-align: center;
    padding: 2rem var(--pad-min);
    overflow: hidden;
}

.option__heading {
    font-family: var(--font-maru);
    font-weight: 600;
    font-size: clamp(1.5rem, 3.2vw, 3rem);
    color: var(--color-brown);
}

.option__lead {
    margin-block: 0.05em 2em;
    font-size: clamp(0.9rem, 1.8vw, 1.1rem);
}

/* ==========================================================================
   9. 選べるレイアウト
   ========================================================================== */
.layout {
    max-width: 1000px;
    margin-inline: auto;
    padding: clamp(2.5rem, 6vw, 5rem) var(--pad-min);
}

.layout__heading {
    font-family: var(--font-maru);
    font-weight: 500;
    color: var(--color-olive);
    font-size: clamp(2.2rem, 6vw, 5rem);
    text-align: center;
    letter-spacing: 0.1em;
    margin-bottom: 0.5em;
}

.layout__item {
    width: var(--narrow-container-width);
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    margin: 0 auto clamp(2rem, 5vw, 4rem);
}

.layout__figure {
    flex: 0 0 clamp(150px, 24vw, 240px);
}

.layout__figure img {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
}

.layout__desc {
    flex: 1;
}

.layout__name {
    font-family: var(--font-base);
    font-weight: 600;
    font-size: clamp(1.1rem, 2.4vw, 1.5rem);
    margin-bottom: 0.6em;
    vertical-align: middle;
}

.layout__name em {
    font-style: normal;
    font-size: 1.8em;
    letter-spacing: 0.2em;
    vertical-align: middle;
}

.layout__desc p {
    font-size: clamp(0.85rem, 1.6vw, 0.95rem);
}

/* ==========================================================================
   10. ご注文方法
   ========================================================================== */
.steps {
    background: var(--color-beige);
    padding: clamp(2.5rem, 6vw, 4.5rem) var(--pad-min);
}

.steps .dot-heading {
    margin-bottom: 2.5em;
}

.steps__list {
    width: var(--narrow-container-width);
    max-width: 100%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 5vw, 3.5rem);
}

.step {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 2.5rem);
}

.step__figure {
    flex: 0 0 clamp(130px, 20vw, 190px);
    text-align: center;
    font-family: var(--font-maru);
    font-weight: 500;
}

.step__figure img {
    background: var(--color-white);
    width: 100%;
    max-width: 200px;
    aspect-ratio: 1;
    object-fit: contain;
    padding: 8%;
}

.step__figure figcaption {
    font-size: clamp(0.75rem, 1.5vw, 0.9rem);
    margin-top: 0.6em;
}

.step__body {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: clamp(1rem, 3vw, 2rem);
}

.step__num {
    font-family: var(--font-maru);
    color: var(--color-olive-band);
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 500;
    line-height: 1;
    position: relative;
}

.step__num::before {
    content: "";
    display: block;
    margin: 0 auto;
    background-color: var(--color-olive-band);
    position: absolute;
    bottom: -20%;
    left: 20%;
    width: 60%;
    height: 2px;
}

.step__text h3 {
    font-family: var(--font-maru);
    font-weight: 500;
    color: var(--color-brown);
    font-size: clamp(1.2rem, 2.6vw, 1.7rem);
    letter-spacing: 0.1em;
    margin-bottom: 0.4em;
}

.step__text p {
    font-size: clamp(0.85rem, 1.6vw, 0.95rem);
}

/* ==========================================================================
   11. 送料・支払い・納期
   ========================================================================== */
.info {
    max-width: 900px;
    margin-inline: auto;
    padding: clamp(2.5rem, 6vw, 4.5rem) var(--pad-min);
    text-align: center;
}

.info__block {
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.info__block .dot-heading {
    margin-bottom: 1em;
}

.info__block p {
    font-size: clamp(0.9rem, 1.7vw, 1.05rem);
}

.info__photo img {
    max-width: min(640px, 100%);
}

/* ==========================================================================
   12. 注文フォーム
   ========================================================================== */
.order {
    max-width: 900px;
    margin-inline: auto;
    padding: 1rem var(--pad-min) clamp(2.5rem, 6vw, 4rem);
    scroll-margin-top: 1.5rem;
}

.order__heading {
    text-align: center;
    margin-bottom: 0.8em;
}

.order__required-note {
    text-align: center;
    color: var(--color-red);
    font-size: 0.85rem;
    margin-bottom: 2em;
}

.order-form__group {
    border: 1px solid #ccc;
    border-radius: 12px;
    padding: clamp(1.2rem, 4vw, 2.5rem);
    margin-bottom: 2rem;
    background: #fdfdfa;
    min-width: 0; /* fieldsetのmin-content既定を打ち消す */
}

.order-form__legend {
    font-family: var(--font-maru);
    font-size: 1.15rem;
    color: var(--color-olive);
    padding-inline: 0.6em;
}

.field {
    margin-bottom: 1.4rem;
}

.field__label {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 0.35em;
}

.req {
    color: var(--color-red);
}

.field input[type="text"],
.field input[type="number"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
    width: 100%;
    font-size: 1rem;
    font-family: inherit;
    padding: 0.65em 0.8em;
    border: 1px solid #c8c8c0;
    border-radius: 8px;
    background: var(--color-white);
    color: var(--color-text);
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

.field input[type="number"],
.field select {
    max-width: 320px;
}

#postalCode {
    max-width: 220px;
}

.field__hint {
    font-size: 0.8rem;
    color: rgba(51, 51, 51, 0.65);
    margin-top: 0.35em;
}

.field :is(input, select, textarea):focus {
    outline: none;
    border-color: var(--color-green);
    box-shadow: 0 0 0 3px rgba(61, 179, 116, 0.2);
}

.field :is(input, select, textarea).is-invalid {
    border-color: var(--color-red);
    box-shadow: 0 0 0 3px rgba(193, 39, 45, 0.15);
}

.field__error {
    color: var(--color-red);
    font-size: 0.8rem;
    margin-top: 0.3em;
}

.field--checkbox label,
.field--agree label {
    display: flex;
    align-items: center;
    gap: 0.6em;
    cursor: pointer;
    font-size: 0.95rem;
}

.field--checkbox input,
.field--agree input {
    width: 1.3em;
    height: 1.3em;
    accent-color: var(--color-green);
    flex: none;
}

.order-form__total {
    font-family: var(--font-base);
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;
    text-align: right;
    margin-top: 1.5rem;
}

.order-form__total output {
    color: var(--color-red);
    min-width: 4em;
    display: inline-block;
    text-align: right;
    vertical-align: bottom;
}

.order-form__total-note {
    text-align: right;
    font-size: 0.8rem;
    color: #777;
}

.order__notes {
    font-size: 0.82rem;
    line-height: 1.9;
    background: #fafaf5;
    border-radius: 12px;
    padding: clamp(1.2rem, 3vw, 2rem);
    margin-bottom: 1.5rem;
    max-height: 340px;
    overflow-y: auto;
}

.order__notes h3 {
    font-size: 0.95rem;
    color: var(--color-brown);
    margin-block: 1.2em 0.4em;
}

.order__notes h3:first-child {
    margin-top: 0;
}

.order__notes ul {
    list-style: none;
}

.order__notes li::before {
    content: "・";
}

.field--agree {
    justify-content: center;
    display: flex;
    font-family: var(--font-base);
}

.field--agree label {
    font-size: 1.25rem;
}

.order__submit {
    text-align: center;
    margin-block: 1.5rem 3rem;
}

.order__after {
    text-align: center;
    margin-bottom: 2.5rem;
}

.order__after-lead {
    font-family: var(--font-base);
    font-size: clamp(1.1rem, 2.6vw, 1.6rem);
    margin-bottom: 0.8em;
}

.order__after-mails {
    font-weight: 700;
    font-size: clamp(0.9rem, 2vw, 1.25rem);
    word-break: break-all;
}

.order__logo {
    text-align: center;
}

.order__logo img {
    width: min(320px, 50vw);
}

/* ==========================================================================
   13. フッター
   ========================================================================== */
.footer {
    background: var(--color-olive);
    color: var(--color-white);
    text-align: center;
    padding: 1.2rem var(--pad-min);
    font-size: 0.82rem;
}

.footer__company {
    margin-bottom: 0.3em;
}

/* ==========================================================================
   フローティング注文ボタン
   ========================================================================== */
.float-order {
    position: fixed;
    right: clamp(12px, 3vw, 28px);
    bottom: clamp(12px, 3vw, 28px);
    z-index: 90;
    width: clamp(84px, 12vw, 110px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-orange);
    color: #1a1a1a;
    font-family: var(--font-maru);
    font-weight: 700;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15em;
    text-align: center;
    line-height: 1.3;
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transition:
        background-color 0.25s,
        opacity 0.4s ease,
        visibility 0.4s ease;
}

.float-order.is-visible {
    opacity: 1;
    visibility: visible;
}

.float-order:hover {
    background: #f7b95e;
}

.float-order:active {
    background: #e0912a;
}

.float-order__arrow {
    display: block;
}

@keyframes float-arrow-bounce {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }
}

.float-order:hover .float-order__arrow {
    animation: float-arrow-bounce 0.8s ease-in-out infinite;
}

/* ==========================================================================
   モーダル
   ========================================================================== */
.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pad-min);
}

.modal[hidden] {
    display: none;
}

.modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.modal__dialog {
    position: relative;
    background: var(--color-white);
    border-radius: 16px;
    max-width: 640px;
    width: 100%;
    max-height: min(85vh, 900px);
    overflow-y: auto;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.modal__title {
    font-family: var(--font-maru);
    font-weight: 400;
    color: var(--color-olive);
    font-size: 1.4rem;
    text-align: center;
    margin-bottom: 1em;
}

.modal__body {
    font-size: 0.95rem;
}

.confirm-list {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.confirm-list th,
.confirm-list td {
    text-align: left;
    padding: 0.5em 0.6em;
    border-bottom: 1px solid #e5e5dc;
    vertical-align: top;
    font-weight: 400;
}

.confirm-list th {
    white-space: nowrap;
    color: var(--color-olive);
    width: 9em;
}

.confirm-list .confirm-total td {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-red);
}

.modal__note {
    background: var(--color-beige);
    border-radius: 8px;
    padding: 0.8em 1em;
    font-size: 0.85rem;
    margin-block: 1rem;
}

.modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
    margin-top: 1.2rem;
}

.modal__actions .btn {
    font-size: 1.05rem;
    padding: 0.6em 2em;
}

.btn--ghost {
    background: transparent;
    color: var(--color-olive);
    border: 2px solid var(--color-olive);
    border-radius: 6px;
}

.btn--ghost:hover {
    background: rgba(122, 142, 46, 0.1);
}

.btn--ghost:active {
    background: rgba(122, 142, 46, 0.22);
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width: 1024px) {
    .about__deco--album {
        right: -4%;
    }

    .about__deco--sheet {
        left: -4%;
    }
}

@media (max-width: 768px) {
    .bg-band {
        background-image: linear-gradient(to right, transparent 0%, transparent 45%, var(--color-band) 45%, var(--color-band) 55%, transparent 55%, transparent 100%);
    }

    .features__list {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .feature-circle {
        width: clamp(200px, 55vw, 260px);
    }

    .features__band {
        display: none;
    }

    .about__deco {
        display: none;
    }

    .layout__item {
        flex-direction: column;
        text-align: center;
    }

    .step {
        flex-direction: column-reverse;
        text-align: center;
    }

    .step__body {
        flex-direction: column;
        align-items: center;
    }

    .quality__samples {
        flex-direction: column;
        gap: 0.6rem;
        align-items: center;
    }

    .appeal__badge {
        right: -8%;
    }

    .share__lead::before,
    .share__lead::after {
        display: none;
    }
}

@media (max-width: 600px) {
    /* PCデザイン由来の強制改行を解除し、自然な折り返しにする */
    .about__text br,
    .appeal__text br,
    .step__text p br,
    .layout__desc p br,
    .info__block p br {
        display: none;
    }

    .hero__logo {
        padding: 3rem 1rem 6rem;
        margin: 0 auto -4rem;
    }
    .hero__logo::before {
        inset: 32px 0 -32px;
    }

    .hero__catch {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .share__grid {
        grid-template-columns: 1fr;
    }

    .share-item__label {
        transform: translate(5%, 5%);
    }

    .btn--orange,
    .btn--large {
        padding-inline: 2.5em;
        font-size: 1.25rem;
    }
}

@media (min-width: 800px) {
    .wrappable-br {
        display: none;
    }
}