/* ============================================================
   ご注文について CSS（SP/PC共通・レスポンシブ対応）
   ブレークポイント: 768px / 1024px（モバイルファースト）
   ============================================================ */

/* --- [02] 基礎設定 --- */
body { margin: 0; padding: 0; background-color: #f5f5f0; color: #2d2d2d; font-family: 'Inter', 'Noto Sans JP', sans-serif; position: relative; overflow-x: hidden; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }

/* --- [03] 質感ノイズ --- */
body::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); opacity: 0.04; pointer-events: none; z-index: 9998; }

/* --- [04] パンくずリスト --- */
.breadcrumb-container { position: relative; padding: 85px 25px 20px; z-index: 10; max-width: 800px; margin: 0 auto; box-sizing: border-box; }

.breadcrumbs { list-style: none; display: flex; align-items: center; padding: 0; margin: 0; font-size: 10px; letter-spacing: 0.05em; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }

.breadcrumbs li { font-size: 10px; letter-spacing: 0.05em; color: #2d2d2d; display: flex; align-items: center; }

.breadcrumbs li a { text-decoration: none; color: #666; }

.breadcrumbs li:not(:last-child)::after { content: ">"; margin: 0 8px; font-size: 8px; }

/* --- [05] ページタイトルセクション --- */
.page-header { padding: 20px 25px 40px; text-align: center; position: relative; }

.page-title { font-family: 'Noto Sans JP', sans-serif; font-weight: 550; font-size: 24px; letter-spacing: 0.1rem; margin: 0; color: #1a2a40; line-height: 1.6; }

.page-title span { display: block; font-size: 13px; font-family: 'Inter', sans-serif; letter-spacing: 0.3em; margin-top: 10px; opacity: 0.6; }

/* --- [06] 目次 --- */
.page-anchor-nav { max-width: 800px; margin: 0 auto 50px; padding: 0 30px; }

.anchor-list { list-style: none; padding: 25px; margin: 0; background-color: #fff; border: 1px solid #e0e0d8; border-radius: 4px; display: flex; flex-direction: column; gap: 12px; }

.anchor-list li { position: relative; padding-left: 20px; font-size: 15px; }

.anchor-list li::before { content: "→"; position: absolute; left: 0; color: #bda16b; font-weight: bold; }
.anchor-list a { text-decoration: none; color: #1a2a40; font-weight: 500; transition: opacity 0.2s; }
.anchor-list a:hover { opacity: 0.6; }

/* --- [07] 共通ボタン --- */
.btn-container { padding: 0 35px; margin-top: 40px; display: flex; flex-direction: column; gap: 15px; }
.form-btn { width: 100%; height: 60px; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 16px; font-weight: 600; border: none; cursor: pointer; transition: opacity 0.3s; border-radius: 30px; }
.form-btn:hover { opacity: 0.8; }
.btn-navy { background-color: #1a2a40; color: #ffffff; }
.btn-white { background-color: #ffffff; color: #1a2a40; border: 1px solid #1a2a40; }

/* --- [08] TOPへ戻るボタン --- */
.totop-button { position: fixed; right: 20px; bottom: 20px; width: 54px; height: 54px; background-color: #bda16b; color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 10px; line-height: 1.2; z-index: 9999; opacity: 0; visibility: hidden; transition: 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.2); text-align: center; }
.totop-button.is-show { opacity: 1; visibility: visible; }

/* --- [09] レイアウト共通設定 --- */
main { position: relative; z-index: 1; }
section { position: relative; width: 100%; box-sizing: border-box; }

/* --- [10] ご注文コンテンツ --- */
.content-inner-wrapper { max-width: 800px; margin: 0 auto; padding: 0 25px 100px; }

.info-block { margin-bottom: 80px; scroll-margin-top: 100px; }

.info-subtitle { font-family: 'Inter', 'Noto Sans JP', sans-serif; font-size: 20px; letter-spacing: 0.12em; color: #1a2a40; margin-bottom: 25px; border-bottom: 1px solid #dcdcdc; padding-bottom: 20px; text-align: center; }
.info-subtitle span { display: block; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 0.15em; opacity: 0.5; margin-top: 10px; text-transform: uppercase; }

.main-text { font-size: 14px; line-height: 1.8; color: #444; margin: 25px 0px; }
.tel-display-box { 
    background-color: #ffffff; 
    border: 1px solid #e0e0d8; 
    padding: 10px 20px; 
    text-align: center; 
    border-radius: 2px; 
    max-width: 360px;
    margin: 0 auto;
}
.tel-display-box .label { display: block; font-size: 12px; color: #888; margin-top: 8px; margin-bottom: 8px; letter-spacing: 0.1em; }
.tel-link { display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 600; color: #1a2a40; text-decoration: none; letter-spacing: 0.05em; }
.tel-link img { width: 20px; height: auto; margin-right: 8px; }
.tel-display-box .hours-info { font-size: 13px; color: #666; margin-top: 15px; line-height: 1.6; }
.reason-highlight { background-color: rgba(26, 42, 64, 0.04); padding: 25px; border-radius: 2px; margin: 30px 0; }
.reason-highlight h3 { font-size: 15px; margin: 0 0 15px 0; color: #1a2a40; }
.reason-highlight ul { margin: 0; padding-left: 1.3em; font-size: 13px; line-height: 1.8; }
.reason-highlight li { margin-bottom: 10px; }
.setting-box { margin-top: 30px; font-size: 13px; border-top: 1px dashed #ccc; padding-top: 20px; }
.setting-box strong { color: #1a2a40; }
.code-style { background: #eee; padding: 2px 6px; border-radius: 3px; font-family: monospace; color: #c33; font-weight: bold; }


/* ============================================================
   タブレット（768px〜）
   ============================================================ */
@media (min-width: 768px) {
    .breadcrumb-container {
        max-width: 900px;
        margin: 0 auto;
        padding: 100px 40px 20px;
        box-sizing: border-box;
    }

    .breadcrumbs {
        font-size: 12px;
    }

    .breadcrumbs li {
        font-size: 12px;
    }

    .page-header {
        padding: 20px 40px 50px;
    }

    .page-title {
        font-size: 1.75rem;
    }

    .page-title span {
        font-size: 12px;
    }


    .page-anchor-nav {
        max-width: 900px;
        padding: 0 40px;
        margin-bottom: 60px;
    }

    .anchor-list {
        padding: 25px 30px;
        gap: 14px;
    }

    .anchor-list li {
        font-size: 16px;
    }

    .content-inner-wrapper {
        max-width: 900px;
        padding: 0 40px 100px;
    }

    .info-subtitle {
        font-size: 22px;
    }

    .main-text {
        font-size: 15px;
        line-height: 1.9;
    }

    .tel-display-box {
        padding: 15px 25px;
    }

    .tel-link {
        font-size: 28px;
    }

    .tel-link img {
        width: 24px;
    }

    .tel-display-box .hours-info {
        font-size: 14px;
    }

    .reason-highlight {
        padding: 30px;
    }

    .reason-highlight h3 {
        font-size: 16px;
    }

    .reason-highlight ul {
        font-size: 14px;
    }

    .btn-container {
        padding: 0;
        align-items: center;
    }

    .form-btn {
        max-width: 320px;
        font-size: 17px;
    }

    .totop-button {
        width: 60px;
        height: 60px;
        font-size: 11px;
    }
}


/* ============================================================
   PC（1024px〜）
   ============================================================ */
@media (min-width: 1024px) {
    .breadcrumb-container {
        max-width: 1080px;
        margin: 0 auto;
        padding: 110px 60px 20px;
        box-sizing: border-box;
    }

    .breadcrumbs {
        font-size: 13px;
    }

    .page-header {
        padding: 20px 60px 60px;
    }

    .page-title {
        font-size: 2rem;
    }

    /* 目次を横並びに変換 */
    .page-anchor-nav {
        max-width: 1080px;
        padding: 0 60px;
        margin-bottom: 60px;
        box-sizing: border-box;
    }

    .anchor-list {
        gap: 0px;
    }

    .anchor-list li {
        flex: 1;
        padding: 10px 20px 10px 30px;
        font-size: 15px;
        border-bottom: none;
    }

    .anchor-list li:last-child {
        border-right: none;
    }

    .content-inner-wrapper {
        max-width: 1080px;
        padding: 0 60px 120px;
        box-sizing: border-box;
    }

    .info-block {
        margin-bottom: 100px;
        scroll-margin-top: 130px;
    }

    .info-subtitle {
        font-size: 24px;
        text-align: left;
        padding-bottom: 22px;
    }

    .main-text {
        font-size: 16px;
        line-height: 2.0;
    }

    .tel-display-box {
        padding: 20px 30px;
        border-radius: 4px;
    }

    .tel-link {
        font-size: 32px;
    }

    .tel-link img {
        width: 28px;
    }

    .tel-display-box .label {
        font-size: 13px;
    }

    .tel-display-box .hours-info {
        font-size: 14px;
    }

    .reason-highlight {
        padding: 30px 35px;
        border-radius: 4px;
    }

    .reason-highlight h3 {
        font-size: 17px;
    }

    .reason-highlight ul {
        font-size: 15px;
    }

    .setting-box {
        font-size: 15px;
    }

    .btn-container {
        padding: 0;
        align-items: center;
        gap: 20px;
    }

    .form-btn {
        max-width: 320px;
        font-size: 17px;
    }

    .totop-button {
        width: 64px;
        height: 64px;
        font-size: 11px;
        right: 30px;
        bottom: 30px;
    }
}