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

/* --- [01] 基礎設定 --- */
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; }

/* --- [02] 質感ノイズ --- */
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; }

/* --- [03] パンくずリスト --- */
.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; }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin: 0 10px; color: #ccc; }
.breadcrumbs a { text-decoration: none; color: #2d2d2d; opacity: 0.5; }

/* --- [04] ページタイトルセクション --- */
.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: 10px; font-family: 'Inter', sans-serif; letter-spacing: 0.3em; margin-top: 10px; opacity: 0.6; }

/* --- [05] 目次ナビゲーション --- */
.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: 30px; 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; }

/* --- [06] レイアウト共通設定 --- */
main { position: relative; z-index: 1; }
section { position: relative; width: 100%; box-sizing: border-box; }
.content-inner-wrapper { max-width: 800px; margin: 0 auto; padding: 0 25px 100px; }
.info-block { margin-bottom: 100px; 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; }

/* 「4. お荷物を受け取れなかった場合」見出しのみ、幅狭い端末で段階的に縮小 */
@media (max-width: 414px) {
    #absence .info-subtitle {
        font-size: 19px;
    }
}
@media (max-width: 390px) {
    #absence .info-subtitle {
        font-size: 18px;
    }
}
@media (max-width: 375px) {
    #absence .info-subtitle {
        font-size: 17px;
    }
}

/* --- [07] データボックス共通設定 --- */
.data-box { background-color: #ffffff; border: 1px solid #e0e0d8; padding: 25px; border-radius: 2px; margin-bottom: 20px; }
.data-row { display: flex; align-items: center; border-bottom: 1px solid #f0f0f0; padding: 15px 0; font-size: 14px; }
.data-row:last-child { border-bottom: none; }
.data-label { font-weight: 500; color: #1a2a40; line-height: 1.5; }
.data-value { font-weight: 600; font-size: 0.95rem; line-height: 1.6; padding-left: 10px; }
.delivery-note-text { font-size: 12px; color: #888; font-weight: 400; }
.size-up { display: block; font-size: 1.1rem; font-weight: 500; margin-bottom: 2px; }
.condition-text { font-size: 1.1rem; font-weight: 700; }
.highlight-red { color: #c33 !important; font-weight: 700; }

/* --- [08] 各BOXの個別設定 --- */
#shipping-fee .data-label { width: 65%; }
#shipping-fee .data-value { width: 35%; text-align: right; }

#delivery-date .data-label { width: 40%; }
#delivery-date .data-value { width: 60%; text-align: left; }
.nowrap-text { white-space: nowrap; }

#delivery-method .data-label { width: 55%; }
#delivery-method .data-value { width: 45%; text-align: right; }

/* --- [09] 重要案内BOX --- */
.important-notice-box { position: relative; background-color: #ffffff; border: 1px solid #e0e0d8; border-left: 4px solid #bda16b; padding: 30px 20px 65px; margin-top: 25px; border-radius: 2px; }
.important-notice-box.simple { border-left: 3px solid #1a2a40; padding: 20px; margin-top: 30px; min-height: auto; }
.important-notice-box .main-text { font-size: 0.95rem; margin: 0 0 15px 0; color: #2d2d2d; line-height: 1.7; }
.important-notice-box .highlight { color: #c4391d; font-weight: bold; border-bottom: 2px solid #f8d7da; }
.important-notice-box .sub-text { font-size: 0.75rem; color: #1a2a40; margin: 0; padding-top: 15px; border-top: 1px dashed #eee; line-height: 1.6; }
.note-text { font-size: 12px; color: #777; margin-top: 15px; line-height: 1.6; }

/* --- [10] きんちゃんひょこっと演出 --- */
.kinchan-hyoko-wrapper { position: absolute; bottom: 0; right: 15px; width: 150px; height: 120px; overflow: hidden; pointer-events: none; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; }
.kinchan-apology-container { display: flex; align-items: flex-end; animation: hyoko-action 4s ease-in-out infinite; transform: translateY(100%); }
@keyframes hyoko-action {
    0%, 10% { transform: translateY(100%); opacity: 0; }
    20%, 80% { transform: translateY(20px); opacity: 1; }
    90%, 100% { transform: translateY(100%); opacity: 0; }
}
.kinchan-balloon { position: relative; background: #ffffff; border-radius: 12px; padding: 5px 12px; margin-right: 5px; margin-bottom: 35px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }
.kinchan-balloon-text { font-family: 'Noto Sans JP', sans-serif; font-size: 12px; font-weight: 700; color: #1a2a40; white-space: nowrap; }
.kinchan-image { width: 55px; height: auto; }

/* --- [11] 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; font-weight: 200; z-index: 9999; box-shadow: 0 2px 10px rgba(0,0,0,0.2); transition: opacity 0.3s, transform 0.3s; cursor: pointer; opacity: 0; visibility: hidden; text-align: center; line-height: 1.3; letter-spacing: 0.1em; }
.totop-button:hover { opacity: 0.8; transform: translateY(-3px); }
.totop-button.is-show { opacity: 1; visibility: visible; }


/* ============================================================
   タブレット（768px〜）
   ============================================================ */
@media (min-width: 768px) {
    .sp-only-br {
        display: none;
    }

    .size-up {
        display: inline;
        margin-bottom: 0;
    }

    .breadcrumb-container {
        max-width: 900px;
        margin: 0 auto;
        padding: 100px 40px 20px;
        box-sizing: border-box;
    }

    .breadcrumbs,
    .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;
    }

    .info-subtitle span {
        font-size: 11px;
    }

    .delivery-note-text {
        font-size: 13px;
    }

    .data-box {
        padding: 25px 30px 10px;
    }

    .data-row {
        font-size: 15px;
        padding: 18px 0;
    }

    .important-notice-box {
        padding: 30px 25px 75px;
    }

    .important-notice-box .sub-text {
        font-size: 13px;
    }

    .note-text {
        font-size: 13px;
    }

    .kinchan-hyoko-wrapper {
        width: 170px;
        height: 130px;
    }

    .kinchan-image {
        width: 62px;
    }

    .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;
    }

    .info-subtitle span {
        font-size: 12px;
    }

    .delivery-note-text {
        font-size: 14px;
    }

    .important-notice-box .sub-text {
        font-size: 14px;
    }

    .data-box {
        padding: 10px 30px 5px;
    }

    #delivery-method .data-box {
        padding: 25px 30px 10px;
    }

    .data-row {
        font-size: 16px;
        padding: 20px 0;
    }

    .important-notice-box {
        padding: 30px 30px 80px;
    }

    .important-notice-box .main-text {
        font-size: 1rem;
    }

    .note-text {
        font-size: 14px;
    }

    .kinchan-hyoko-wrapper {
        width: 190px;
        height: 140px;
        right: 20px;
    }

    .kinchan-image {
        width: 68px;
    }

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