/* =========================================================
   「初めて当店をご利用の方へ」ページ　新デザイン用CSS
   ※配色・角丸(10px)・フォントウェイトは既存サイト
     （deliveryshipdelitime.html / style.css）の
     見出し(.fp h1/h2/h3)・ボタン(.btnStyle01〜04)に準拠
   ========================================================= */

:root {
    --navy: #263669; /* 既存 .fp h1 の背景色 */
    --blue: #003399; /* 既存 .btnStyle01 の背景色・リンク色 */
    --blue-bg: #e8ecf8; /* 既存 .fp h2 の背景色 */
    --gray-bg: #ececec; /* 既存 .fp h3 の背景色 */
    --red: #b73737; /* 既存 .btnStyle04 の背景色 */
    --text: #222;
}

* {
    box-sizing: border-box;
}
html,
body {
    margin: 0;
    padding: 0;
    background: #f4f5f8;
}
body {
    font-family:
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        "Yu Gothic",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;
    color: var(--text);
    line-height: 1.8;
    font-size: 18px; /* 中年男性ユーザー向けにベースをやや大きめに設定 */
}
.page {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    padding-bottom: 60px;
}

/* ===== ヘッダー・パンくず ===== */
.topbar {
    background: var(--navy);
    color: #fff;
    padding: 18px 30px;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0.05em;
}
.breadcrumb {
    max-width: 900px;
    margin: 0 auto;
    padding: 14px 30px 0;
    font-size: 14px;
    color: #666;
}
.breadcrumb a {
    color: var(--blue);
    text-decoration: none;
}

/* ===== 見出し（既存サイトの .fp h1/h2/h3 に準拠） ===== */
h1.pageTitle {
    width: 100%;
    margin: 20px 0 30px;
    text-align: center;
    font-size: 2em;
    font-weight: 900;
    color: #fff;
    background-color: var(--navy);
    padding: 34px 20px;
}
h2.blockTitle {
    width: 100%;
    margin: 56px 0 24px;
    font-size: 1.3em;
    font-weight: 900;
    color: var(--navy);
    background-color: var(--blue-bg);
    padding: 16px 22px;
    border-left: 6px solid var(--navy);
}
h3.subTitle {
    width: 100%;
    margin: 36px 0 18px;
    font-size: 1.1em;
    font-weight: 900;
    color: #3f424b;
    background-color: var(--gray-bg);
    padding: 14px 20px;
}

.inner {
    padding: 0 30px;
}

.lead {
    font-size: 1.15em;
    text-align: center;
    padding: 0 10px 10px;
    color: #333;
}
.lead strong {
    color: var(--navy);
    font-weight: 700;
} /* core.cssのstrong{font-weight:inherit}対策 */

/* ===== 安心バッジ ===== */
.badges {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 34px 0 10px;
}
.badge {
    background: #fff;
    border: 2px solid var(--blue-bg);
    border-radius: 10px !important;
    padding: 18px 12px !important;
    text-align: center;
}
.badge .icon {
    color: var(--blue);
    margin-bottom: 8px;
}
.badge .label {
    font-weight: 900;
    font-size: 1.3em !important;
    color: var(--navy);
    line-height: 130%;
}

/* ===== ご注文の流れ（ステップ） ===== */
.steps {
    display: flex;
    gap: 0;
    align-items: stretch;
    margin: 20px 0 10px;
}
.step {
    flex: 1;
    background: #fff;
    border: 2px solid var(--blue-bg);
    border-radius: 10px;
    padding: 24px 14px 20px;
    text-align: center;
    position: relative;
}
.step + .step {
    margin-left: 34px;
}
.step + .step::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
    border: 10px solid transparent;
    border-left-color: var(--navy);
}
.step .num {
    display: inline-block;
    background: var(--navy);
    color: #fff;
    font-weight: 900;
    font-size: 0.85em;
    border-radius: 999px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin-bottom: 10px;
}
.step .icon {
    color: var(--navy);
    margin-bottom: 8px;
}
.step .stitle {
    font-weight: 900;
    font-size: 1.02em;
    color: var(--navy);
    margin-bottom: 6px;
}
.step .sdesc {
    font-size: 0.85em;
    color: #555;
    line-height: 1.6;
}

/* レスポンシブ：スマホでは縦積みに */
@media screen and (max-width: 767px) {
    .steps {
        flex-direction: column;
    }
    .step + .step {
        margin-left: 0;
        margin-top: 34px;
    }
    .step + .step::before {
        left: 50%;
        top: -30px;
        transform: translateX(-50%) rotate(90deg);
    }
    .payGrid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .badges {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== 支払い方法カード ===== */
.payGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 10px 0 20px;
}
.payCard {
    background: #fff;
    border: 2px solid var(--gray-bg);
    border-radius: 10px;
    padding: 20px 10px;
    text-align: center;
    display: block;
    color: inherit;
    text-decoration: none;
    transition:
        border-color 0.15s,
        box-shadow 0.15s,
        transform 0.15s;
}
.payCard:hover {
    border-color: var(--blue);
    box-shadow: 0 4px 10px rgba(0, 51, 153, 0.12);
    transform: translateY(-2px);
}
.payCard .icon {
    color: var(--blue);
    margin-bottom: 8px;
}
.payCard .icon img {
    max-height: 32px;
    width: auto;
}
.payCard .label {
    font-weight: 700;
    font-size: 0.92em;
    color: var(--text);
}
.payCard .goIcon {
    display: inline-block;
    margin-top: 8px;
    color: var(--blue);
    font-weight: 900;
}

.linkMore {
    text-align: center;
    margin: 22px 0 10px;
}
.linkMore a {
    color: var(--blue);
    font-weight: 900;
    font-size: 1.0625rem;
    text-decoration: underline;
}

/* ===== 配送テーブル ===== */
table.infoTable {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0 10px;
    font-size: 0.95em;
}
table.infoTable th {
    background: var(--blue-bg);
    color: var(--navy);
    font-weight: 900;
    text-align: left;
    padding: 14px 16px;
    width: 32%;
    border: 1px solid #d7ddf0;
}
table.infoTable td {
    padding: 14px 16px;
    border: 1px solid #e2e2e2;
    background: #fff;
}
@media screen and (max-width: 767px) {
    table.infoTable,
    table.infoTable tr,
    table.infoTable th,
    table.infoTable td {
        display: block;
        width: 100%;
    }
    table.infoTable th {
        border-bottom: none;
    }
    table.infoTable td {
        border-top: none;
        margin-bottom: 10px;
    }
}

/* ===== FAQ ===== */
.faqItem {
    border-bottom: 1px solid #ddd;
    padding: 18px 4px;
}
.faqItem .q {
    font-weight: 900;
    color: var(--navy);
    font-size: 1.02em;
    display: flex;
    gap: 10px;
}
.faqItem .q .qmark {
    flex: none;
    background: var(--navy);
    color: #fff;
    border-radius: 999px;
    width: 26px;
    height: 26px;
    text-align: center;
    line-height: 26px;
    font-size: 0.85em;
}
.faqItem .a {
    margin-top: 8px;
    padding-left: 36px;
    color: #444;
    font-size: 0.95em;
}

/* =========================================================
   ボタン：既存サイト（deliveryshipdelitime.html）の
   .btnStyle01 / .btnStyle04 / .btnStyle04_ol と同一仕様
   ※すでに本体の style.css に定義がある場合はこのブロックは
     読み込み不要です（重複定義を避けてください）
   ========================================================= */
.btnArea {
    text-align: center;
    margin: 26px 0;
}
.btnStyle01 {
    padding: 14px 90px;
    margin: auto;
    background: var(--blue);
    border-radius: 10px;
    color: #fff;
    font-weight: 900;
    font-size: 1.3rem;
    display: inline-block;
    text-decoration: none;
}
.btnStyle04 {
    padding: 16px 60px;
    margin: auto;
    background: var(--red);
    border-radius: 10px;
    border: solid var(--red) 2px;
    color: #fff;
    font-weight: 900;
    font-size: 1.3rem;
    display: inline-block;
    text-decoration: none;
}
.btnStyle04_ol {
    padding: 12px 50px;
    margin: auto;
    border: solid var(--blue) 2px;
    border-radius: 10px;
    color: var(--blue);
    font-weight: 900;
    font-size: 1.05rem;
    display: inline-block;
    text-decoration: none;
    background: #fff;
}
.btnStyle01:hover,
.btnStyle04:hover,
.btnStyle04_ol:hover {
    opacity: 0.8;
}

/* ===== 問い合わせボックス ===== */
.contactBox {
    background: var(--gray-bg);
    border-radius: 10px;
    padding: 34px 30px;
    text-align: center;
    margin: 20px 0 10px;
}
.contactBox .ttl {
    font-weight: 900;
    font-size: 1.15em;
    color: var(--navy);
    margin-bottom: 6px;
}
.contactBox .sub {
    color: #555;
    font-size: 0.95em;
    margin-bottom: 20px;
}
.contactBox .tel {
    margin-top: 16px;
    font-size: 0.95em;
    color: #555;
}
.contactBox .tel b {
    color: var(--navy);
    font-size: 1.3em;
    font-weight: 700; /* core.cssのb{font-weight:inherit}対策 */
}

.footerCTA {
    background: var(--navy);
    padding: 40px 20px;
    text-align: center;
    margin-top: 50px;
}
.footerCTA .ftxt {
    color: #fff;
    font-weight: 700;
    font-size: 1.1em;
    margin-bottom: 18px;
}

/* =========================================================
   中央揃え崩れの対策
   core.css の reset が div / p / span 等の要素に対して
   直接 text-align:left を指定しているため、親要素に
   指定した text-align:center が子要素に継承されず
   左寄せに戻ってしまう。該当ブロック内の全要素に
   明示的に text-align:center を指定して上書きする。
   ========================================================= */
.badges,
.badges *,
.steps,
.steps *,
.payGrid,
.payGrid *,
.contactBox,
.contactBox *,
.footerCTA,
.footerCTA *,
.linkMore,
.linkMore *,
.btnArea,
.btnArea * {
    text-align: center;
}

@media screen and (max-width: 767px) {
    body {
        font-size: 16px;
    }
    h1.pageTitle {
        font-size: 1.5em;
        padding: 26px 16px;
    }
    .btnStyle01 {
        padding: 14px 40px;
        width: 100%;
    }
    .btnStyle04 {
        padding: 16px 20px;
        width: 100%;
    }
}