/* info_box内のリンクにスタイル適用 */
.info_box a {
    color: #ed8783;
    text-decoration: underline;
}

/* トライアル敷布団 画像付きitem */
.input_item.with-image {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.input_item.with-image .product_image {
    flex: 0 0 200px;
    border-radius: 8px;
    overflow: hidden;
}
.input_item.with-image .product_image img {
    width: 100%;
    height: auto;
    display: block;
}
.input_item.with-image .product_content {
    flex: 1 1 100%;
    max-width: 100%;
}
@media only screen and (max-width: 750px) {
    /* SPは1カラム（画像を上／選択肢を下）にして、
       選択肢のテキストが不自然に折り返さないよう横幅を確保する */
    .input_item.with-image {
        display: block;
    }
    .input_item.with-image .product_image {
        max-width: 260px;
        margin: 0 auto 12px;
    }
    .input_item.with-image .product_content {
        max-width: 100%;
    }
}

/* bg_grayセクション内の商品カテゴリタグを t-recommend と同じ見た目に */
.c-sub_section.bg_gray .p-products_goods_list .item a .textbody .category span {
    margin: 5px 5px 0 0;
    padding: 2px 8px 1px;
    font-size: 1.5rem;
    background-color: #fff;
}
@media only screen and (max-width: 750px) {
    .c-sub_section.bg_gray .p-products_goods_list .item a .textbody .category span {
        font-size: 1.3rem;
    }
}

/* テーブル横スクロール（PC・SP両対応） */
.c-table_scroll {
    margin: 25px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* スクロール可能を示すグラデーション */
    background-image:
        linear-gradient(to right, #fff, #fff),
        linear-gradient(to right, rgba(0,0,0,0.12), rgba(255,255,255,0));
    background-position: left center, right center;
    background-repeat: no-repeat;
    background-size: 20px 100%, 15px 100%;
    background-attachment: local, scroll;
}
.c-table_scroll > table {
    margin: 0;
    min-width: 1700px;
}
.c-table_scroll > table th,
.c-table_scroll > table td {
    padding: 10px 14px;
    text-align: center;
    vertical-align: middle;
    line-height: 1.4;
}
/* キルト名のヘッダは折り返さず幅をしっかり確保 */
.c-table_scroll > table thead th {
    white-space: nowrap;
}
/* 生地質（行ヘッダ）は左寄せ・折り返しありで広めに */
.c-table_scroll > table tbody th {
    text-align: left;
    white-space: normal;
    min-width: 220px;
}
.c-table_scroll > table .size_s {
    font-size: 1.2rem;
    font-weight: 400;
    color: #666;
}
@media only screen and (max-width: 750px) {
    .c-table_scroll {
        margin: 20px 0;
    }
    .c-table_scroll > table {
        min-width: 1300px;
    }
    .c-table_scroll > table th,
    .c-table_scroll > table td {
        padding: 8px 10px;
        font-size: 1.3rem;
    }
    .c-table_scroll > table tbody th {
        min-width: 180px;
    }
    .c-table_scroll > table .size_s {
        font-size: 1.1rem;
    }
}

/* 特徴セクション：左テキスト＋右画像の横並び（SPは縦積み） */
.feature_row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin: 40px 0;
}
.feature_row .feature_text {
    flex: 1 1 100%;
    max-width: 100%;
}
.feature_row .feature_text > *:first-child {
    margin-top: 0;
}
.feature_row .feature_image {
    flex: 0 0 340px;
}
.feature_row .feature_image img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}
.feature_row .feature_image figure {
    margin: 0;
}
.feature_row .feature_image figcaption {
    display: block;
    margin-top: 8px;
    font-size: 1.4rem;
    line-height: 1.5;
    color: #4d4d4d;
    text-align: center;
}
@media only screen and (max-width: 750px) {
    .feature_row {
        display: block;
        margin: 25px 0;
    }
    .feature_row .feature_image {
        margin-top: 15px;
    }
    .feature_row .feature_image img {
        border-radius: 10px;
    }
    .feature_row .feature_image figcaption {
        font-size: 1.2rem;
        margin-top: 5px;
    }
}

/* 3カラム画像（キャプション付き） */
.figure_three_column {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2%;
    margin: 30px 0;
}
.figure_three_column > figure {
    width: 32%;
    margin: 0;
}
.figure_three_column > figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}
.figure_three_column > figure figcaption {
    display: block;
    margin-top: 8px;
    font-size: 1.4rem;
    line-height: 1.5;
    color: #4d4d4d;
}
@media only screen and (max-width: 750px) {
    .figure_three_column {
        margin: 20px 0;
    }
    .figure_three_column > figure img {
        border-radius: 8px;
    }
    .figure_three_column > figure figcaption {
        font-size: 1.1rem;
        margin-top: 5px;
    }
}

/* 特定商取引法ページ スマホ時のテーブル調整 */
@media only screen and (max-width: 750px) {
    .c-editor table {
        table-layout: fixed;
        width: 100%;
    }
    .c-editor table th {
        width: 30%;
        white-space: normal;
        word-break: break-word;
    }
    .c-editor table td {
        width: 70%;
        word-break: break-word;
    }
}
/* LINEバナー（c-banner_line）スマホ時のアイコンとテキストの位置揃え */
@media only screen and (max-width: 750px) {
    .c-banner_line a {
        display: flex;
        align-items: center;
    }
    .c-banner_line .textbody {
        flex: 1;
        display: flex;
        align-items: center;
    }
}

/* LINE連携バナー type02（メリット訴求版／PCは右側に画像を全面表示・SPは画像なし） */
.c-banner_line.type02 a {
    align-items: stretch;
    flex-direction: row-reverse; /* 画像を右側へ */
    border-radius: 16px;
    overflow: hidden;
}
/* 画像（サムネイル）：右側に全面表示（角丸はバナー外周に合わせてクリップ） */
.c-banner_line.type02 .image.c-thum {
    flex: 0 0 30%;
    width: 30%;
    overflow: hidden;
    position: relative;
}
.c-banner_line.type02 .image.c-thum::after {
    content: none;
}
.c-banner_line.type02 .image.c-thum img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.c-banner_line.type02 .textbody {
    flex: 1 1 auto;
    width: auto;
    display: block;
    padding: 20px 24px 20px 32px;
}
.c-banner_line.type02 .textbody .heading {
    margin-bottom: 8px;
    font-family: "Zen Maru Gothic", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝体", "Yu Mincho", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
}
.c-banner_line.type02 .merit {
    margin: 0;
}
.c-banner_line.type02 .merit li {
    padding: 4px 0 4px 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4;
    position: relative;
}
.c-banner_line.type02 .merit li:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.c-banner_line.type02 .merit li::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -10px;
}
.c-banner_line.type02 .merit li::after {
    content: "";
    display: block;
    width: 8px;
    height: 5px;
    border-left: 2px solid #06c755;
    border-bottom: 2px solid #06c755;
    position: absolute;
    top: 50%;
    left: 6px;
    margin-top: -4px;
    transform: rotate(-45deg);
}
.c-banner_line.type02 .note {
    margin-top: 6px;
    font-size: 1.3rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}
.c-banner_line.type02 .btn {
    margin-top: 10px;
    padding: 9px 44px 9px 22px;
    border-radius: 50px;
    background-color: #fff;
    color: #06c755;
    font-weight: 700;
    display: -moz-inline-flex;
    display: -ms-inline-flex;
    display: -o-inline-flex;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.c-banner_line.type02 .btn::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-top: 2px solid #06c755;
    border-right: 2px solid #06c755;
    position: absolute;
    top: 50%;
    right: 22px;
    margin-top: -4px;
    transform: rotate(45deg);
}
@media only screen and (max-width: 750px) {
    .c-banner_line.type02 a {
        display: block;
        border-radius: 10px;
    }
    /* SPは画像なし */
    .c-banner_line.type02 .image.c-thum {
        display: none;
    }
    .c-banner_line.type02 .textbody {
        width: auto;
        display: block;
        padding: 16px 18px;
    }
    .c-banner_line.type02 .textbody .heading {
        margin-bottom: 8px;
        font-size: 1.7rem;
    }
    .c-banner_line.type02 .merit li {
        padding: 4px 0 4px 24px;
        font-size: 1.3rem;
    }
    .c-banner_line.type02 .merit li::before {
        width: 18px;
        height: 18px;
        margin-top: -9px;
    }
    .c-banner_line.type02 .merit li::after {
        width: 7px;
        height: 4px;
        left: 5px;
        margin-top: -3px;
    }
    .c-banner_line.type02 .note {
        font-size: 1.2rem;
    }
}

/* 完了画面：コンテンツ先頭にバナーを配置した場合の余白調整
   ・上は c-mt_section(50px) を打ち消し、元々先頭だった c-editor と同じ位置（セクション標準余白）に
   ・下は本文との間隔を確保
   ※:first-child でマイページ（末尾配置）には適用されない */
.c-content_textbody > .c-banner_line.type02:first-child {
    margin-top: 0;
    margin-bottom: 50px;
}
@media only screen and (max-width: 750px) {
    .c-content_textbody > .c-banner_line.type02:first-child {
        margin-bottom: 30px;
    }
}

/* マージンユーティリティクラス（10px刻み） */
.mt10 { margin-top: 10px !important; }
.mt20 { margin-top: 20px !important; }
.mt30 { margin-top: 30px !important; }
.mt40 { margin-top: 40px !important; }
.mt50 { margin-top: 50px !important; }
.mt60 { margin-top: 60px !important; }

.mb10 { margin-bottom: 10px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb50 { margin-bottom: 50px !important; }
.mb60 { margin-bottom: 60px !important; }

/* p-products_goods_list 3カラムレイアウト
   （無料プレゼント等、リンク <a> を介さないカード構造に対応） */
.p-products_goods_list.three-columns {
    margin-top: 25px;
}
@media only screen and (min-width: 751px) {
    .p-products_goods_list.three-columns .item {
        width: 30.9090909091%;
        margin: 40px 3.6363636364% 0 0;
    }
    /* 上書き：ベースCSSの 4n / -n+4 指定をリセット */
    .p-products_goods_list.three-columns .item:nth-child(-n+4) {
        margin-top: 40px;
    }
    .p-products_goods_list.three-columns .item:nth-child(4n) {
        margin-right: 3.6363636364%;
    }
    /* 3カラム用の指定 */
    .p-products_goods_list.three-columns .item:nth-child(-n+3) {
        margin-top: 0;
    }
    .p-products_goods_list.three-columns .item:nth-child(3n) {
        margin-right: 0;
    }
}
@media only screen and (max-width: 750px) {
    .p-products_goods_list.three-columns .item {
        width: 100%;
        margin: 20px 0 0;
    }
    .p-products_goods_list.three-columns .item:nth-child(-n+2) {
        margin-top: 20px;
    }
    .p-products_goods_list.three-columns .item:first-child {
        margin-top: 0;
    }
    .p-products_goods_list.three-columns .item:nth-child(2n) {
        margin-right: 0;
    }
}

/* リンクなしカード（item の直接の子に c-thum / textbody がある構造）の見た目 */
.p-products_goods_list.three-columns .item > .c-thum {
    margin-bottom: 15px;
    border-radius: 16px;
    overflow: hidden;
    background-color: #fff;
}
.p-products_goods_list.three-columns .item > .c-thum::after {
    content: " ";
    display: block;
    padding-bottom: 75%;
}
.p-products_goods_list.three-columns .item > .c-thum img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.p-products_goods_list.three-columns .item > .textbody .heading {
    margin-bottom: 10px;
    font-family: "Zen Maru Gothic", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝体", "Yu Mincho", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.4;
    color: #955234;
}
.p-products_goods_list.three-columns .item > .textbody .tx {
    font-size: 1.5rem;
    line-height: 1.6;
    margin: 0;
}
@media only screen and (max-width: 750px) {
    .p-products_goods_list.three-columns .item > .c-thum {
        margin-bottom: 10px;
        border-radius: 10px;
    }
    .p-products_goods_list.three-columns .item > .textbody .heading {
        margin-bottom: 8px;
        font-size: 1.6rem;
    }
    .p-products_goods_list.three-columns .item > .textbody .tx {
        font-size: 1.4rem;
    }
}

/* 2カラム画像：既存figure_two_columnに画角固定とキャプション中央揃えを追加 */
.c-editor .figure_two_column > figure {
    margin: 0;
}
.c-editor .figure_two_column > figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}
.c-editor .figure_two_column > figure figcaption {
    margin-top: 8px;
    font-size: 1.4rem;
    line-height: 1.5;
    color: #4d4d4d;
    text-align: center;
}
@media only screen and (max-width: 750px) {
    .c-editor .figure_two_column > figure img {
        border-radius: 8px;
    }
    .c-editor .figure_two_column > figure figcaption {
        font-size: 1.2rem;
        margin-top: 5px;
    }
}

/* YouTube等の動画埋め込み（16:9レスポンシブ） */
.video_wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    margin: 30px 0;
    border-radius: 12px;
    overflow: hidden;
}
.video_wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
@media only screen and (max-width: 750px) {
    .video_wrap {
        margin: 20px 0;
        border-radius: 8px;
    }
}

/* c-editor内の単独figure（カラムクラスなし）を中央配置 */
.c-editor > figure,
.c-editor figure:not([class]) {
    text-align: center;
}
.c-editor > figure > img,
.c-editor figure:not([class]) > img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* c-sub_navi のボタン間マージンを縮めて1行に収めやすく */
.c-sub_navi a {
    margin: 2px 2px;
}

/* 商品お問い合わせフォーム：商品情報ボックス */
.product_info_box {
    margin: 25px 0 30px;
    padding: 20px;
    background-color: #fff8f4;
    border: 1px solid #f0d6c8;
    border-radius: 12px;
}
.product_info_box .product_info_inner {
    display: flex;
    align-items: center;
    gap: 20px;
}
.product_info_box .product_info_image {
    flex: 0 0 180px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    position: relative;
}
.product_info_box .product_info_image::after {
    content: " ";
    display: block;
    padding-bottom: 69.387755102%;
}
.product_info_box .product_info_image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}
.product_info_box .product_info_textbody {
    flex: 1 1 auto;
    min-width: 0;
}
.product_info_box .product_info_label {
    display: inline-block;
    margin: 0 0 8px;
    padding: 2px 10px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    background-color: #ed8783;
    border-radius: 3px;
    line-height: 1.6;
}
.product_info_box .product_info_name {
    margin: 0 0 6px;
    font-family: "Zen Maru Gothic", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝体", "Yu Mincho", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.5;
    color: #955234;
    word-break: break-word;
}
.product_info_box .product_info_code {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.5;
    color: #777;
}
@media only screen and (max-width: 750px) {
    .product_info_box {
        margin: 20px 0 25px;
        padding: 15px;
        border-radius: 10px;
    }
    .product_info_box .product_info_inner {
        gap: 12px;
    }
    .product_info_box .product_info_image {
        flex: 0 0 120px;
    }
    .product_info_box .product_info_label {
        font-size: 1.1rem;
        padding: 1px 8px;
        margin-bottom: 6px;
    }
    .product_info_box .product_info_name {
        font-size: 1.5rem;
        margin-bottom: 4px;
    }
    .product_info_box .product_info_code {
        font-size: 1.2rem;
    }
}

/* お問い合わせフォーム：textareaの高さ拡張
   ベースCSSのtextareaは height:105px / SP:80px と狭いため、
   問い合わせ内容を十分に書ける高さに上書きする */
.c-form textarea {
    height: 220px;
}
@media only screen and (max-width: 750px) {
    .c-form textarea {
        height: 160px;
    }
}

/* 商品タグ検索結果ページ */
.p-products_tag_result {
    margin-bottom: 50px;
}
@media only screen and (max-width: 750px) {
    .p-products_tag_result {
        margin-bottom: 30px;
    }
}
.p-products_tag_result .result_count {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ccc;
    font-size: 1.6rem;
}
@media only screen and (max-width: 750px) {
    .p-products_tag_result .result_count {
        margin-bottom: 20px;
        padding-bottom: 12px;
        font-size: 1.4rem;
    }
}
.p-products_tag_result .result_count p {
    margin: 0;
}
.p-products_tag_result .result_count .num {
    margin: 0 4px;
    font-family: "Roboto", sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: #ed8783;
}
@media only screen and (max-width: 750px) {
    .p-products_tag_result .result_count .num {
        font-size: 2rem;
    }
}

.p-products_tag_result .related_tags {
    padding: 25px 35px;
    border-radius: 16px;
    background-color: #fae9e8;
}
@media only screen and (max-width: 750px) {
    .p-products_tag_result .related_tags {
        padding: 18px 20px;
        border-radius: 10px;
    }
}
.p-products_tag_result .related_tags .heading {
    margin: 0 0 12px;
    font-family: "Zen Maru Gothic", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝体", "Yu Mincho", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #955234;
}
@media only screen and (max-width: 750px) {
    .p-products_tag_result .related_tags .heading {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }
}
.p-products_tag_result .related_tags .tag_list {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 0 -5px -5px 0;
}
.p-products_tag_result .related_tags .tag_list li {
    margin: 5px 5px 0 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}
@media only screen and (max-width: 750px) {
    .p-products_tag_result .related_tags .tag_list li {
        font-size: 1.3rem;
    }
}
.p-products_tag_result .related_tags .tag_list li a {
    display: block;
    padding: 8px 16px;
    border: 1px solid #955234;
    border-radius: 50px;
    background-color: #fff;
    color: #955234;
    text-decoration: none;
    opacity: 1;
    transition: all .3s ease-out;
}
@media only screen and (max-width: 750px) {
    .p-products_tag_result .related_tags .tag_list li a {
        padding: 6px 12px;
    }
}
.p-products_tag_result .related_tags .tag_list li a:hover {
    background-color: #955234;
    color: #fff;
}
.p-products_tag_result .related_tags .tag_list li.current a {
    background-color: #ed8783;
    border-color: #ed8783;
    color: #fff;
    pointer-events: none;
}

/* タグ検索結果ページ：検索結果件数表示 */
.p-products_result_count {
    font-size: 1.6rem;
    font-weight: 700;
}
.p-products_result_count strong {
    margin: 0 4px;
    font-family: "Roboto", sans-serif;
    font-size: 2.4rem;
    color: #955234;
}
@media only screen and (max-width: 750px) {
    .p-products_result_count {
        font-size: 1.4rem;
        margin-bottom: 10px;
    }
    .p-products_result_count strong {
        font-size: 2rem;
    }
}

/* ===========================
   購入ステップ（矢印型）
=========================== */

.p-cart_step {
    margin: 30px 0 0;
    overflow: hidden;
}
.p-cart_step ul {
    display: flex;
    justify-content: center;
    align-items: stretch;
    list-style: none;
    padding: 0;
    margin: 0;
}
.p-cart_step ul li {
    flex: 1;
    text-align: center;
    position: relative;
    padding: 14px 5px 14px 25px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #999;
    background-color: #f0f0f0;
    z-index: 0;
}
.p-cart_step ul li::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    right: -16px;
    width: 0;
    height: 0;
    border-top: 26px solid transparent;
    border-bottom: 26px solid transparent;
    border-left: 16px solid #f0f0f0;
    z-index: 2;
}
.p-cart_step ul li::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    right: -19px;
    width: 0;
    height: 0;
    border-top: 26px solid transparent;
    border-bottom: 26px solid transparent;
    border-left: 16px solid #d0d0d0;
    z-index: 1;
}
.p-cart_step ul li:last-child::after,
.p-cart_step ul li:last-child::before {
    display: none;
}
.p-cart_step ul li.done {
    color: #955234;
    background-color: #fae9e8;
}
.p-cart_step ul li.done::after {
    border-left-color: #fae9e8;
}
.p-cart_step ul li.done::before {
    border-left-color: #e8c8c6;
}
.p-cart_step ul li.current {
    color: #fff;
    background-color: #ed8783;
}
.p-cart_step ul li.current::after {
    border-left-color: #ed8783;
}
.p-cart_step ul li.current::before {
    border-left-color: #d96f6b;
}
.p-cart_step ul li span {
    display: block;
    line-height: 1.3;
}
@media only screen and (max-width: 750px) {
    .p-cart_step ul li {
        font-size: 1.1rem;
        padding: 10px 3px 10px 16px;
    }
    .p-cart_step ul li::after {
        right: -12px;
        border-top-width: 20px;
        border-bottom-width: 20px;
        border-left-width: 12px;
    }
    .p-cart_step ul li::before {
        right: -15px;
        border-top-width: 20px;
        border-bottom-width: 20px;
        border-left-width: 12px;
    }
}

/* ===========================
   注文完了ページ ボタン調整
=========================== */

.p-cart_complete .c-btns_column {
    align-items: center;
}

/* c-btns_column内のボタン縦位置揃え */
.c-btns_column .c-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
}
.c-btns_column .c-btn a {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 注文完了ページ ボタン上余白 */
.p-cart_complete {
    margin-top: 40px;
}
@media only screen and (max-width: 750px) {
    .p-cart_complete {
        margin-top: 25px;
    }
}
/* ===========================
   カートページ
   /assets/css/cart.css
=========================== */

/* 全体レイアウト */
.p-cart_wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
}
@media only screen and (max-width: 750px) {
    .p-cart_wrap {
        display: block;
    }
}

/* 商品リスト */
.p-cart_items {
    flex: 1 1 100%;
}

/* 商品1件 */
.p-cart_item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 25px 0;
    border-bottom: 1px solid #ccc;
    position: relative;
}
.p-cart_item:first-child {
    border-top: 1px solid #ccc;
}
@media only screen and (max-width: 750px) {
    .p-cart_item {
        gap: 15px;
        padding: 20px 0;
    }
}

/* サムネイル */
.p-cart_item_thum {
    flex: 0 0 160px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}
.p-cart_item_thum::after {
    content: " ";
    display: block;
    padding-bottom: 60%;
}
.p-cart_item_thum img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media only screen and (max-width: 750px) {
    .p-cart_item_thum {
        flex: 0 0 100px;
    }
}

/* 商品情報 */
.p-cart_item_info {
    flex: 1 1 100%;
}

.p-cart_item_name {
    font-weight: 700;
    font-size: 1.7rem;
    margin-bottom: 5px;
}
.p-cart_item_name a {
    color: inherit;
}
.p-cart_item_name a:hover {
    color: #ed8783;
    opacity: 1;
}
@media only screen and (max-width: 750px) {
    .p-cart_item_name {
        font-size: 1.5rem;
    }
}

.p-cart_item_option {
    font-size: 1.4rem;
    color: #666;
    margin-bottom: 8px;
}
@media only screen and (max-width: 750px) {
    .p-cart_item_option {
        font-size: 1.3rem;
    }
}

.p-cart_item_price {
    font-family: "Roboto", sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #955234;
    margin-bottom: 12px;
}
.p-cart_item_price span {
    font-family: "游ゴシック", YuGothic, sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
    color: #000;
}
@media only screen and (max-width: 750px) {
    .p-cart_item_price {
        font-size: 1.6rem;
    }
}

/* 数量コントロール */
.p-cart_item_qty {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.p-cart_item_qty label {
    font-size: 1.5rem;
    font-weight: 700;
}

.p-cart_qty_ctrl {
    display: flex;
    align-items: center;
}

.p-cart_qty_btn {
    width: 36px;
    height: 36px;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    font-size: 1.6rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}
.p-cart_qty_btn:hover {
    background-color: #ed8783;
    color: #fff;
    border-color: #ed8783;
}
@media only screen and (max-width: 750px) {
    .p-cart_qty_btn {
        width: 30px;
        height: 30px;
    }
}

.p-cart_qty_ctrl input[type="number"] {
    width: 56px;
    height: 36px;
    border: 1px solid #ccc;
    border-left: 0;
    border-right: 0;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    -moz-appearance: textfield;
}
.p-cart_qty_ctrl input[type="number"]::-webkit-outer-spin-button,
.p-cart_qty_ctrl input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
@media only screen and (max-width: 750px) {
    .p-cart_qty_ctrl input[type="number"] {
        width: 44px;
        height: 30px;
        font-size: 1.4rem;
    }
}

/* 小計 */
.p-cart_item_subtotal {
    font-size: 1.5rem;
    color: #666;
}
.p-cart_item_subtotal span {
    font-weight: 700;
    color: #955234;
}

/* 削除ボタン */
.p-cart_item_remove {
    flex: 0 0 auto;
}
.p-cart_item_remove button {
    background: none;
    border: none;
    color: #999;
    font-size: 1.3rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    white-space: nowrap;
}
.p-cart_item_remove button:hover {
    color: #ed8783;
}

/* 数量更新ボタン */
.p-cart_update {
    margin-top: 15px;
    text-align: right;
}
.p-cart_update_btn {
    background: none;
    border: 1px solid #ccc;
    border-radius: 50px;
    padding: 8px 25px;
    font-size: 1.4rem;
    cursor: pointer;
    transition: all .2s;
}
.p-cart_update_btn:hover {
    border-color: #955234;
    color: #955234;
}

/* サイドパネル */
.p-cart_side {
    flex: 0 0 320px;
    width: 320px;
    position: sticky;
    top: 20px;
}
@media only screen and (max-width: 750px) {
    .p-cart_side {
        width: auto;
        position: static;
        margin-top: 30px;
    }
}

/* 金額サマリー */
.p-cart_summary {
    padding: 25px 30px;
    border: 1px solid #ccc;
    border-radius: 16px;
    margin-bottom: 20px;
}
@media only screen and (max-width: 750px) {
    .p-cart_summary {
        padding: 20px;
        border-radius: 10px;
    }
}

.p-cart_summary_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    font-size: 1.5rem;
}
.p-cart_summary_row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.p-cart_summary_row.total {
    margin-top: 5px;
    padding-top: 15px;
    border-top: 2px solid #ccc;
    border-bottom: 0;
}

.p-cart_summary_label {
    font-weight: 700;
}

.p-cart_total {
    font-family: "Roboto", sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: #955234;
}
.p-cart_total span {
    font-family: "游ゴシック", YuGothic, sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
    color: #000;
}

.p-cart_free {
    color: #ed8783;
    font-weight: 700;
}

/* 会員特典バッジ */
.p-cart_member_badge {
    padding: 12px 20px;
    border-radius: 10px;
    background-color: #fae9e8;
    font-size: 1.4rem;
    margin-bottom: 15px;
    text-align: center;
    line-height: 1.6;
}

/* 購入手続きボタン */
.p-cart_side .c-btn {
    margin-bottom: 10px;
}
.p-cart_side .c-btn:last-of-type {
    margin-bottom: 0;
}

/* 未ログイン：ガイドエリア */
.p-cart_login_guide {
    border: 1px solid #ccc;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 15px;
}
@media only screen and (max-width: 750px) {
    .p-cart_login_guide {
        border-radius: 10px;
    }
}

.p-cart_login_guide_inner {
    padding: 25px 20px;
    background-color: #fae9e8;
}

.p-cart_login_guide_lead {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 15px;
    line-height: 1.7;
}

.p-cart_login_guide_inner .c-btn {
    margin-bottom: 10px;
}
.p-cart_login_guide_inner .c-btn:last-child {
    margin-bottom: 0;
}

.p-cart_guest {
    padding: 15px 20px;
    text-align: center;
}
.p-cart_guest p {
    font-size: 1.4rem;
    color: #666;
    margin-bottom: 10px;
}
.p-cart_guest .c-btn {
    margin-bottom: 0;
}

/* 買い物を続けるリンク */
.p-cart_continue {
    margin-top: 15px;
    text-align: center;
    font-size: 1.4rem;
}
.p-cart_continue a {
    color: #666;
    text-decoration: underline;
}
.p-cart_continue a:hover {
    color: #955234;
    opacity: 1;
}

/* ===========================
   カートサマリー（補足）
=========================== */

.p-cart_summary_value {
    font-size: 1.5rem;
    font-weight: 700;
}

/* ===========================
   注文手続き フォーム
=========================== */

.p-checkout_form {
    flex: 1 1 100%;
}

.p-checkout_section {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #eee;
}
.p-checkout_section:last-of-type {
    border-bottom: 0;
}
@media only screen and (max-width: 750px) {
    .p-checkout_section {
        margin-bottom: 30px;
        padding-bottom: 30px;
    }
}

.p-checkout_heading {
    font-size: 2rem;
    font-weight: 700;
    color: #955234;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #ed8783;
}
@media only screen and (max-width: 750px) {
    .p-checkout_heading {
        font-size: 1.7rem;
    }
}

.p-checkout_field {
    margin-bottom: 20px;
}
.p-checkout_field:last-child {
    margin-bottom: 0;
}

.p-checkout_label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 1.5rem;
}

.p-checkout_name_wrap {
    display: flex;
    gap: 15px;
}
.p-checkout_name_wrap input {
    flex: 1;
}
@media only screen and (max-width: 750px) {
    .p-checkout_name_wrap {
        gap: 10px;
    }
}

.p-checkout_form input[type="text"],
.p-checkout_form input[type="email"],
.p-checkout_form input[type="tel"] {
    padding: 0 15px;
    height: 40px;
    width: 100%;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 0;
    font-size: 1.5rem;
}

.p-checkout_form textarea {
    padding: 12px 15px;
    width: 100%;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 0;
    font-size: 1.5rem;
    resize: vertical;
}

.p-checkout_radio_list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.p-checkout_radio_item {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1.5rem;
}
.p-checkout_radio_item input[type="radio"] + span {
    padding-left: 35px;
}

.p-checkout_summary_title {
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.p-checkout_summary_items {
    margin-bottom: 15px;
}

.p-checkout_summary_item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    font-size: 1.4rem;
    padding: 6px 0;
    border-bottom: 1px solid #f5f5f5;
}
.p-checkout_summary_item:last-child {
    border-bottom: 0;
}

.p-checkout_summary_item_name {
    flex: 1;
    line-height: 1.5;
}
.p-checkout_summary_item_name small {
    display: block;
    color: #999;
    font-size: 1.2rem;
}

/* ===========================
   注文完了 注文番号
=========================== */

.p-complete_order_no {
    font-family: "Roboto", sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
    color: #955234;
    margin-top: 5px;
}
@media only screen and (max-width: 750px) {
    .p-complete_order_no {
        font-size: 2.2rem;
    }
}

/* ===========================
   フォーム共通（membership.cssと共有）
=========================== */

.p-login_required {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background-color: #ed8783;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
}

.p-login_submit {
    margin-top: 30px;
}
@media only screen and (max-width: 750px) {
    .p-login_submit {
        margin-top: 20px;
    }
}
.p-login_submit input[type="submit"] {
    display: block;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    height: 64px;
    border-radius: 50px;
    background-color: #ed8783;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .3s ease-out;
}
@media only screen and (max-width: 750px) {
    .p-login_submit input[type="submit"] {
        max-width: 100%;
        height: 56px;
        font-size: 1.6rem;
    }
}
.p-login_submit input[type="submit"]:hover {
    opacity: .7;
}

/* ===========================
   注文履歴（membership.cssと共有）
=========================== */

.p-orders_list {
    margin-bottom: 40px;
}
@media only screen and (max-width: 750px) {
    .p-orders_list {
        margin-bottom: 25px;
    }
}

.p-orders_item {
    border: 1px solid #ccc;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 30px;
}
@media only screen and (max-width: 750px) {
    .p-orders_item {
        border-radius: 10px;
        margin-bottom: 20px;
    }
}
.p-orders_item:last-child {
    margin-bottom: 0;
}

.p-orders_item_products {
    padding: 20px 30px;
}
@media only screen and (max-width: 750px) {
    .p-orders_item_products {
        padding: 15px 20px;
    }
}

.p-orders_product {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}
.p-orders_product:first-child {
    padding-top: 0;
}
.p-orders_product:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
@media only screen and (max-width: 750px) {
    .p-orders_product {
        gap: 12px;
    }
}

.p-orders_product_thum {
    flex: 0 0 120px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}
.p-orders_product_thum::after {
    content: " ";
    display: block;
    padding-bottom: 60%;
}
.p-orders_product_thum img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media only screen and (max-width: 750px) {
    .p-orders_product_thum {
        flex: 0 0 80px;
    }
}

.p-orders_product_info {
    flex: 1 1 100%;
}

.p-orders_product_name {
    font-weight: 700;
    font-size: 1.6rem;
    margin-bottom: 4px;
}
@media only screen and (max-width: 750px) {
    .p-orders_product_name {
        font-size: 1.4rem;
    }
}

.p-orders_product_option {
    font-size: 1.4rem;
    color: #666;
    margin-bottom: 4px;
}
@media only screen and (max-width: 750px) {
    .p-orders_product_option {
        font-size: 1.3rem;
    }
}

.p-orders_product_price {
    font-family: "Roboto", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #955234;
}
.p-orders_product_price span {
    font-family: "游ゴシック", YuGothic, sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
    color: #000;
}
@media only screen and (max-width: 750px) {
    .p-orders_product_price {
        font-size: 1.4rem;
    }
}

.p-orders_price {
    font-family: "Roboto", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #955234;
}
.p-orders_price span {
    font-family: "游ゴシック", YuGothic, sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
    color: #000;
}

/* ===========================
   注文確認ページ セクション間余白
=========================== */

.c-content_textbody .c-heading_h3 {
    margin-top: 40px;
}
.c-content_textbody .c-heading_h3:first-child {
    margin-top: 0;
}
.c-content_textbody .p-products_outline {
    margin-bottom: 0;
}
@media only screen and (max-width: 750px) {
    .c-content_textbody .c-heading_h3 {
        margin-top: 30px;
    }
}

/* ==========================================================================
   商品詳細ページ（detail.php）追加スタイル
   元のclass構造を変更せず、CSV情報の表示に必要な追加分のみ
   ========================================================================== */

/* キャッチコピー（商品名直下のリード文） */
.p-products_detail .catchcopy {
    margin: 8px 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: #ed8783;
    line-height: 1.5;
}
@media only screen and (max-width: 750px) {
    .p-products_detail .catchcopy {
        font-size: 1.5rem;
    }
}

/* 商品番号 */
.p-products_detail .product_code {
    margin-bottom: 12px;
    font-family: "Roboto", sans-serif;
    font-size: 1.4rem;
    color: #666;
    letter-spacing: 0.04em;
}
@media only screen and (max-width: 750px) {
    .p-products_detail .product_code {
        margin-bottom: 8px;
        font-size: 1.2rem;
    }
}

/* 商品ステータスラベル */
.p-products_detail .product_status {
    margin-top: 12px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4;
}
@media only screen and (max-width: 750px) {
    .p-products_detail .product_status {
        margin-top: 10px;
        font-size: 1.2rem;
    }
}
.p-products_detail .product_status li {
    margin: 0 5px 5px 0;
    padding: 4px 10px;
    border-radius: 4px;
}
.p-products_detail .product_status li a {
    text-decoration: none;
    opacity: 1;
    color: inherit;
}
.p-products_detail .product_status li a:hover {
    opacity: 0.7;
}
.p-products_detail .product_status li .note {
    margin-left: 4px;
    font-size: 1rem;
    font-weight: 500;
}
.p-products_detail .product_status li.member_label {
    background-color: #e39c3c;
    color: #fff;
}
.p-products_detail .product_status li.sozai_label {
    background-color: #fae9e8;
    color: #955234;
}

/* 発送目安 */
.p-products_detail .column_right .cart .price_area .delivery {
    margin-top: 8px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #955234;
}
@media only screen and (max-width: 750px) {
    .p-products_detail .column_right .cart .price_area .delivery {
        font-size: 1.3rem;
    }
}

/* ==========================================================================
   フォーム確認画面（入力内容確認ページ）共通スタイル
   ※ 温泉綿体験キット／お問い合わせなど、各フォームの確認画面で使用
   ========================================================================== */

/* 確認画面の冒頭リード（送信前のご案内） */
.p-confirm_lead {
    margin: 0 0 30px;
    padding: 18px 24px;
    border-radius: 12px;
    background-color: #fae9e8;
    color: #955234;
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.7;
}
@media only screen and (max-width: 750px) {
    .p-confirm_lead {
        margin-bottom: 20px;
        padding: 14px 16px;
        font-size: 1.4rem;
        border-radius: 10px;
    }
}

/* 入力内容リスト（dl/dt/dd ベース） */
.p-confirm_list {
    margin: 0 0 30px;
    padding: 10px 39px;
    border: 1px solid #ccc;
    border-radius: 16px;
    background-color: #fff;
}
@media only screen and (max-width: 750px) {
    .p-confirm_list {
        margin-bottom: 20px;
        padding: 5px 19px;
        border-radius: 10px;
    }
}

/* リスト1行（項目名 + 内容） */
.p-confirm_item {
    display: flex;
    align-items: flex-start;
    padding: 22px 0;
    border-bottom: 1px solid #e6e6e6;
}
.p-confirm_item:last-child {
    border-bottom: 0;
}
@media only screen and (max-width: 750px) {
    .p-confirm_item {
        display: block;
        padding: 16px 0;
    }
}

.p-confirm_item dt {
    flex: 0 0 220px;
    padding-right: 20px;
    font-size: 1.5rem;
    font-weight: 700;
    color: #955234;
    line-height: 1.6;
}
@media only screen and (max-width: 750px) {
    .p-confirm_item dt {
        margin-bottom: 6px;
        padding-right: 0;
        font-size: 1.4rem;
    }
}

.p-confirm_item dd {
    flex: 1 1 auto;
    font-size: 1.6rem;
    line-height: 1.7;
    word-break: break-word;
}
@media only screen and (max-width: 750px) {
    .p-confirm_item dd {
        font-size: 1.5rem;
    }
}

/* 未入力時の表示 */
.p-confirm_item dd .empty {
    color: #999;
    font-size: 1.4rem;
}

/* 改行を保持して表示（ご要望など） */
.p-confirm_item dd .pre-line {
    display: block;
    white-space: pre-line;
}

/* 住所の複数行表示 */
.p-confirm_address span {
    display: block;
}


/* ============================================
   取り扱い店舗一覧ページ
   ============================================ */

/* 注意書き */
.p-shop_list_notice {
    margin-top: 35px;
    margin-bottom: 50px;
    padding: 14px 20px;
    background-color: #faf6f1;
    border-left: 3px solid #ed8783;
    border-radius: 4px;
    font-size: 1.4rem;
    line-height: 1.6;
    color: #6b4a3a;
}
@media only screen and (max-width: 750px) {
    .p-shop_list_notice {
        margin-top: 25px;
        margin-bottom: 35px;
        padding: 12px 14px;
        font-size: 1.3rem;
    }
}

/* エリア見出し */
.p-shop_list {
    margin-bottom: 80px;
    padding-top: 30px;
}
@media only screen and (max-width: 750px) {
    .p-shop_list {
        margin-bottom: 50px;
        padding-top: 20px;
    }
}
.p-shop_list:last-of-type {
    margin-bottom: 60px;
}
@media only screen and (max-width: 750px) {
    .p-shop_list:last-of-type {
        margin-bottom: 40px;
    }
}
.p-shop_list_area {
    margin-bottom: 30px;
    padding-left: 60px;
    font-family: "Zen Maru Gothic", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝体", "Yu Mincho", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 2.8rem;
    font-weight: 700;
    color: #955234;
    line-height: 1.3;
    position: relative;
}
@media only screen and (max-width: 750px) {
    .p-shop_list_area {
        margin-bottom: 20px;
        padding-left: 48px;
        font-size: 2rem;
    }
}
.p-shop_list_area::before {
    content: " ";
    display: block;
    width: 48px;
    height: 48px;
    background: url("../img/common/icon/sakura01.png") center/48px auto no-repeat;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -24px;
}
@media only screen and (max-width: 750px) {
    .p-shop_list_area::before {
        width: 36px;
        height: 36px;
        background-size: 36px auto;
        margin-top: -18px;
    }
}

/* 店舗カード */
.p-shop_list_item {
    margin-bottom: 25px;
    padding: 30px 40px;
    border: 1px solid #ccc;
    border-radius: 16px;
    background-color: #fff;
}
@media only screen and (max-width: 750px) {
    .p-shop_list_item {
        margin-bottom: 20px;
        padding: 20px;
        border-radius: 10px;
    }
}
.p-shop_list_item:last-child {
    margin-bottom: 0;
}

/* 見出しエリア */
.p-shop_list_item .heading_area {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e6e6e6;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
@media only screen and (max-width: 750px) {
    .p-shop_list_item .heading_area {
        margin-bottom: 18px;
        padding-bottom: 12px;
    }
}
.p-shop_list_item .heading_area .badge {
    display: inline-block;
    margin-right: 12px;
    padding: 4px 16px;
    background-color: #ed8783;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    border-radius: 50px;
    font-family: "Zen Maru Gothic", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝体", "Yu Mincho", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
@media only screen and (max-width: 750px) {
    .p-shop_list_item .heading_area .badge {
        margin-right: 10px;
        padding: 3px 12px;
        font-size: 1.2rem;
    }
}
.p-shop_list_item .heading_area .heading {
    font-family: "Zen Maru Gothic", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝体", "Yu Mincho", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.3;
    color: #955234;
}
@media only screen and (max-width: 750px) {
    .p-shop_list_item .heading_area .heading {
        font-size: 1.9rem;
    }
}

/* 2カラム本体（店舗情報 + Google Map） */
.p-shop_list_item .body_column {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 30px;
}
@media only screen and (max-width: 750px) {
    .p-shop_list_item .body_column {
        display: block;
    }
}

/* 店舗概要 */
.p-shop_list_item .outline {
    flex: 1 1 0%;
    min-width: 0;
}
@media only screen and (max-width: 750px) {
    .p-shop_list_item .outline {
        width: auto;
    }
}
.p-shop_list_item .outline .row {
    padding: 10px 0;
    border-bottom: 1px dashed #e6e6e6;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    line-height: 1.5;
    font-size: 1.5rem;
}
@media only screen and (max-width: 750px) {
    .p-shop_list_item .outline .row {
        padding: 8px 0;
        font-size: 1.4rem;
        display: block;
    }
}
.p-shop_list_item .outline .row:first-child {
    padding-top: 0;
}
.p-shop_list_item .outline .row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.p-shop_list_item .outline .row dt {
    flex: 0 0 110px;
    font-weight: 700;
    color: #955234;
    white-space: nowrap;
}
@media only screen and (max-width: 750px) {
    .p-shop_list_item .outline .row dt {
        flex: 0 0 auto;
        margin-bottom: 3px;
        font-size: 1.3rem;
    }
}
.p-shop_list_item .outline .row dd {
    flex: 1 1 100%;
    max-width: 100%;
}
.p-shop_list_item .outline .row dd .tel-btn {
    font-family: "Roboto", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ed8783;
    text-decoration: none;
    line-height: 1.2;
}
@media only screen and (max-width: 750px) {
    .p-shop_list_item .outline .row dd .tel-btn {
        font-size: 1.8rem;
    }
}
.p-shop_list_item .outline .row dd .hp-link {
    color: #955234;
    text-decoration: underline;
    word-break: break-all;
    transition: opacity 0.2s ease;
}
.p-shop_list_item .outline .row dd .hp-link:hover {
    opacity: 0.7;
    text-decoration: none;
}

/* Google Map（右カラム） */
.p-shop_list_item .map {
    flex: 0 0 48%;
    width: 48%;
    min-height: 300px;
    border-radius: 8px;
    overflow: hidden;
}
@media only screen and (max-width: 750px) {
    .p-shop_list_item .map {
        width: auto;
        min-height: inherit;
        height: 240px;
        margin-top: 18px;
    }
}
.p-shop_list_item .map iframe {
    width: 100%;
    height: 100%;
    min-height: 300px;
    border: 0;
    display: block;
}
@media only screen and (max-width: 750px) {
    .p-shop_list_item .map iframe {
        min-height: 240px;
    }
}

/* お問い合わせ案内 */
.p-shop_list_contact {
    margin-top: 60px;
    margin-bottom: 80px;
    padding: 50px 60px;
    border-radius: 16px;
    background-color: #fae9e8;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@media only screen and (max-width: 750px) {
    .p-shop_list_contact {
        margin-top: 40px;
        margin-bottom: 40px;
        padding: 25px 20px;
        border-radius: 10px;
        display: block;
    }
}
.p-shop_list_contact .textbody {
    flex: 1 1 100%;
    max-width: 100%;
    margin-right: 40px;
}
@media only screen and (max-width: 750px) {
    .p-shop_list_contact .textbody {
        margin: 0 0 20px;
        text-align: center;
    }
}
.p-shop_list_contact .textbody .heading {
    margin-bottom: 8px;
    font-family: "Zen Maru Gothic", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝体", "Yu Mincho", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: #955234;
    line-height: 1.3;
}
@media only screen and (max-width: 750px) {
    .p-shop_list_contact .textbody .heading {
        font-size: 1.8rem;
    }
}
.p-shop_list_contact .textbody .lead {
    font-size: 1.5rem;
    line-height: 1.6;
}
@media only screen and (max-width: 750px) {
    .p-shop_list_contact .textbody .lead {
        font-size: 1.3rem;
    }
}
.p-shop_list_contact .contact_area {
    flex: 0 0 auto;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
@media only screen and (max-width: 750px) {
    .p-shop_list_contact .contact_area {
        display: block;
        text-align: center;
    }
}
.p-shop_list_contact .contact_area .tel_box {
    margin-right: 20px;
    padding: 18px 30px;
    background-color: #fff;
    border-radius: 8px;
    text-align: center;
}
@media only screen and (max-width: 750px) {
    .p-shop_list_contact .contact_area .tel_box {
        margin: 0 0 15px;
        padding: 15px 20px;
    }
}
.p-shop_list_contact .contact_area .tel_box .heading {
    margin-bottom: 4px;
    font-family: "游ゴシック", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #4d4d4d;
}
@media only screen and (max-width: 750px) {
    .p-shop_list_contact .contact_area .tel_box .heading {
        font-size: 1.3rem;
    }
}
.p-shop_list_contact .contact_area .tel_box .tel {
    margin-bottom: 2px;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.1;
}
@media only screen and (max-width: 750px) {
    .p-shop_list_contact .contact_area .tel_box .tel {
        font-size: 2.4rem;
    }
}
.p-shop_list_contact .contact_area .tel_box .tel .tel-btn {
    color: #ed8783;
    text-decoration: none;
    padding-left: 28px;
    position: relative;
    display: inline-block;
}
.p-shop_list_contact .contact_area .tel_box .tel .tel-btn::before {
    content: " ";
    display: block;
    width: 22px;
    height: 22px;
    background: url("../img/common/header/icon_tel.svg") center/22px auto no-repeat;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -11px;
}
@media only screen and (max-width: 750px) {
    .p-shop_list_contact .contact_area .tel_box .tel .tel-btn::before {
        width: 18px;
        height: 18px;
        background-size: 18px auto;
        margin-top: -9px;
    }
}
.p-shop_list_contact .contact_area .tel_box .time {
    font-size: 1.3rem;
    color: #4d4d4d;
}
@media only screen and (max-width: 750px) {
    .p-shop_list_contact .contact_area .tel_box .time {
        font-size: 1.2rem;
    }
}

/* 確認画面のボタン群（送信／修正） */
.p-confirm_btns {
    margin-top: 50px;
}
@media only screen and (max-width: 750px) {
    .p-confirm_btns {
        margin-top: 30px;
    }
}
.p-confirm_btns .submit_btn + .c-btn.back {
    margin-top: 25px;
}
/* 修正シート-4 No.23: 確認画面の「この内容で登録する」「入力内容を修正する」は
   mode 送信のため <button> で実装しており、.submit_btn input / .c-btn a のリンクボタン装飾が効かず素のボタンになっていた。
   参照デザイン（丸型ピンクボタン）に合わせて <button> にも同装飾を付与する。 */
.p-confirm_btns .submit_btn button,
.p-confirm_btns .c-btn.back button {
    display: inline-block;
    width: 100%;
    max-width: 530px;
    padding: 15px 45px;
    border: none;
    border-radius: 100px;
    font-family: inherit;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.4;
    color: #fff;
    text-align: center;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: all 0.3s ease-out;
}
.p-confirm_btns .submit_btn button {
    background-color: #e39c3c;
}
.p-confirm_btns .c-btn.back button {
    background-color: #ed8783;
}
.p-confirm_btns .submit_btn button:hover,
.p-confirm_btns .c-btn.back button:hover {
    opacity: 0.7;
}

/* ==========================================================================
   カタログダウンロード完了ページ ダウンロードボタン
   ========================================================================== */
.p-catalog_download {
    margin: 30px 0 40px;
    text-align: center;
}
@media only screen and (max-width: 750px) {
    .p-catalog_download {
        margin: 20px 0 30px;
    }
}
.p-catalog_download .p-catalog_download_btn {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 530px;
    margin: 0 auto;
    padding: 22px 30px;
    border-radius: 50px;
    background-color: #ed8783;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease-out;
}
.p-catalog_download .p-catalog_download_btn:hover {
    opacity: 0.7;
    color: #fff;
}
@media only screen and (max-width: 750px) {
    .p-catalog_download .p-catalog_download_btn {
        padding: 16px 20px;
    }
}
.p-catalog_download .p-catalog_download_btn .icon {
    flex: 0 0 32px;
    margin-right: 16px;
    line-height: 1;
}
@media only screen and (max-width: 750px) {
    .p-catalog_download .p-catalog_download_btn .icon {
        flex: 0 0 24px;
        margin-right: 12px;
    }
}
.p-catalog_download .p-catalog_download_btn .icon img {
    width: 100%;
    height: auto;
    display: block;
}
.p-catalog_download .p-catalog_download_btn .textbody {
    text-align: left;
}
.p-catalog_download .p-catalog_download_btn .heading {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.3;
}
@media only screen and (max-width: 750px) {
    .p-catalog_download .p-catalog_download_btn .heading {
        font-size: 1.5rem;
    }
}
.p-catalog_download .p-catalog_download_btn .sub {
    display: block;
    margin-top: 4px;
    font-size: 1.3rem;
    font-weight: 500;
    opacity: 0.85;
}
@media only screen and (max-width: 750px) {
    .p-catalog_download .p-catalog_download_btn .sub {
        font-size: 1.1rem;
    }
}
.p-catalog_download .attention {
    margin-top: 14px;
    font-size: 1.4rem;
    color: #666;
}
@media only screen and (max-width: 750px) {
    .p-catalog_download .attention {
        margin-top: 10px;
        font-size: 1.2rem;
    }
}

/* ===========================
   サイズ早見表 タブ切替
=========================== */
.p-size_tabs {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: 8px;
    margin: 25px 0 0;
    border-bottom: 2px solid #955234;
}
@media only screen and (max-width: 750px) {
    .p-size_tabs {
        gap: 4px;
        margin-top: 20px;
    }
}

.p-size_tab {
    flex: 1 1 0;
    padding: 16px 12px;
    border: 1px solid #b89788;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background-color: #b89788;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    transition: all .3s ease-out;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
@media only screen and (max-width: 750px) {
    .p-size_tab {
        padding: 10px 4px;
        font-size: 1.3rem;
        flex-direction: column;
        gap: 4px;
    }
}
.p-size_tab:hover {
    background-color: #a07e6e;
    color: #fff;
    opacity: 1;
}
.p-size_tab.is-active {
    background-color: #955234;
    border-color: #955234;
    color: #fff;
    cursor: default;
}
.p-size_tab.is-active:hover {
    background-color: #955234;
    color: #fff;
}

.p-size_tab .icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media only screen and (max-width: 750px) {
    .p-size_tab .icon {
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
    }
}
.p-size_tab .icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.p-size_tab .label {
    display: inline-block;
}
.p-size_tab .label small {
    font-size: 1.2rem;
    font-weight: 500;
}
@media only screen and (max-width: 750px) {
    .p-size_tab .label small {
        display: block;
        font-size: 1rem;
    }
}

/* パネル */
.p-size_panel {
    display: none;
}
.p-size_panel.is-active {
    display: block;
    animation: sizePanelFade .3s ease-out;
}
@keyframes sizePanelFade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===========================
   サイズ早見表 アコーディオン
=========================== */
.p-size_accordion {
    margin: 25px 0;
}
@media only screen and (max-width: 750px) {
    .p-size_accordion {
        margin: 20px 0;
    }
}

.p-size_acc_item {
    margin-bottom: 12px;
    border-radius: 12px;
    overflow: hidden;
    background-color: #fff;
}
@media only screen and (max-width: 750px) {
    .p-size_acc_item {
        margin-bottom: 8px;
        border-radius: 10px;
    }
}
.p-size_acc_item:last-child {
    margin-bottom: 0;
}

/* 見出し（クリックで開閉） */
.p-size_acc_head {
    width: 100%;
    padding: 18px 60px 18px 22px;
    background-color: #955234;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: background-color .3s ease-out;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    position: relative;
}
@media only screen and (max-width: 750px) {
    .p-size_acc_head {
        padding: 14px 48px 14px 16px;
        font-size: 1.5rem;
        gap: 10px;
    }
}
.p-size_acc_head:hover {
    background-color: #7a4329;
    opacity: 1;
}
.p-size_acc_head .icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media only screen and (max-width: 750px) {
    .p-size_acc_head .icon {
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
    }
}
.p-size_acc_head .icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.p-size_acc_head .label {
    flex: 1 1 100%;
    max-width: 100%;
}
.p-size_acc_head .label small {
    margin-left: 4px;
    font-size: 1.3rem;
    font-weight: 500;
    color: #fff;
    opacity: .85;
}
@media only screen and (max-width: 750px) {
    .p-size_acc_head .label small {
        font-size: 1.2rem;
    }
}

/* 開閉アイコン（プラス／マイナス） */
.p-size_acc_head::before,
.p-size_acc_head::after {
    content: " ";
    display: block;
    background-color: #fff;
    border-radius: 2px;
    position: absolute;
    top: 50%;
    transition: transform .3s ease-out;
}
.p-size_acc_head::before {
    width: 16px;
    height: 2px;
    margin-top: -1px;
    right: 22px;
}
.p-size_acc_head::after {
    width: 2px;
    height: 16px;
    margin-top: -8px;
    right: 29px;
}
@media only screen and (max-width: 750px) {
    .p-size_acc_head::before {
        width: 14px;
        right: 16px;
    }
    .p-size_acc_head::after {
        height: 14px;
        margin-top: -7px;
        right: 22px;
    }
}
.p-size_acc_head.is-open::after {
    transform: rotate(90deg);
    opacity: 0;
}

/* ボディ（表が入る部分） */
.p-size_acc_body {
    display: none;
    padding: 0 22px 22px;
    border: 1px solid #ccc;
    border-top: 0;
    border-radius: 0 0 12px 12px;
}
@media only screen and (max-width: 750px) {
    .p-size_acc_body {
        padding: 0 16px 16px;
        border-radius: 0 0 10px 10px;
    }
}
.p-size_acc_body.is-open {
    display: block;
}

/* 表 */
.c-editor .p-size_table {
    margin-top: 16px;
    margin-bottom: 0;
    table-layout: fixed;
    border: 1px solid #ccc;
    border-bottom: 0;
}
.c-editor .p-size_table th:first-child,
.c-editor .p-size_table td:first-child {
    width: 35%;
}
@media only screen and (max-width: 750px) {
    .c-editor .p-size_table th:first-child,
    .c-editor .p-size_table td:first-child {
        width: 40%;
    }
}
.p-size_acc_body .size_s {
    margin-top: 10px;
}

/* ==========================================================================
   お客様の声一覧ページ (/voice/index.php)
   ========================================================================== */

/* ページヘッダー */
.p-voice_heading {
    margin-bottom: 50px;
}
@media only screen and (max-width: 750px) {
    .p-voice_heading {
        margin-bottom: 30px;
    }
}
.p-voice_heading .c-sec_heading {
    margin-bottom: 25px;
}
@media only screen and (max-width: 750px) {
    .p-voice_heading .c-sec_heading {
        margin-bottom: 15px;
    }
}
.p-voice_heading_intro {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.6rem;
    line-height: 1.8;
}
@media only screen and (max-width: 750px) {
    .p-voice_heading_intro {
        font-size: 1.4rem;
        text-align: left;
        line-height: 1.7;
    }
}

/* サマリー（件数・平均評価） */
.p-voice_summary {
    margin-bottom: 50px;
    padding: 35px 40px;
    border-radius: 16px;
    background-color: #fae9e8;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
@media only screen and (max-width: 750px) {
    .p-voice_summary {
        margin-bottom: 30px;
        padding: 20px 15px;
        border-radius: 10px;
        flex-wrap: wrap;
    }
}
.p-voice_summary .item {
    text-align: center;
    padding: 0 20px;
    position: relative;
}
@media only screen and (max-width: 750px) {
    .p-voice_summary .item {
        padding: 0 8px;
        flex: 1 1 0;
        min-width: 0;
    }
}
.p-voice_summary .item + .item::before {
    content: " ";
    display: block;
    width: 1px;
    height: 50px;
    background-color: #ccc;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
@media only screen and (max-width: 750px) {
    .p-voice_summary .item + .item::before {
        height: 40px;
    }
}
.p-voice_summary .item dt {
    margin-bottom: 8px;
    font-size: 1.5rem;
    font-weight: 700;
    color: #955234;
}
@media only screen and (max-width: 750px) {
    .p-voice_summary .item dt {
        margin-bottom: 5px;
        font-size: 1.2rem;
    }
}
.p-voice_summary .item dd {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    line-height: 1.1;
}
.p-voice_summary .item dd .num {
    font-size: 3.6rem;
    font-weight: 700;
    color: #955234;
    line-height: 1;
}
@media only screen and (max-width: 750px) {
    .p-voice_summary .item dd .num {
        font-size: 2.4rem;
    }
}
.p-voice_summary .item dd .unit {
    margin-left: 4px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #955234;
}
@media only screen and (max-width: 750px) {
    .p-voice_summary .item dd .unit {
        font-size: 1.2rem;
    }
}
.p-voice_summary .item dd .sub {
    width: 100%;
    margin-top: 5px;
    font-size: 1.2rem;
    color: #666;
    font-weight: 500;
}
@media only screen and (max-width: 750px) {
    .p-voice_summary .item dd .sub {
        font-size: 1rem;
    }
}
.p-voice_summary .item dd .star {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 8px;
    color: #e39c3c;
    font-size: 2rem;
    font-family: "Zen Maru Gothic", serif;
}
@media only screen and (max-width: 750px) {
    .p-voice_summary .item dd .star {
        display: none;
    }
}
.p-voice_summary .item dd .star li {
    line-height: 1;
}

/* アーカイブナビ（カテゴリ） */
.p-voice_archive {
    margin-bottom: 30px;
}
@media only screen and (max-width: 750px) {
    .p-voice_archive {
        margin-bottom: 20px;
    }
}

/* フィルター・並び替え */
.p-voice_control {
    margin-bottom: 40px;
    padding: 20px 25px;
    border-radius: 8px;
    background-color: #f8f8f8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}
@media only screen and (max-width: 750px) {
    .p-voice_control {
        margin-bottom: 25px;
        padding: 15px;
        border-radius: 6px;
        gap: 10px;
    }
}
.p-voice_filter,
.p-voice_sort {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}
@media only screen and (max-width: 750px) {
    .p-voice_filter,
    .p-voice_sort {
        gap: 10px;
    }
}
.p-voice_filter .item,
.p-voice_sort .item {
    display: flex;
    align-items: center;
}
.p-voice_filter .item dt,
.p-voice_sort .item dt {
    margin-right: 10px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #955234;
    white-space: nowrap;
}
@media only screen and (max-width: 750px) {
    .p-voice_filter .item dt,
    .p-voice_sort .item dt {
        margin-right: 6px;
        font-size: 1.3rem;
    }
}
.p-voice_filter .item dd .select_wrap,
.p-voice_sort .item dd .select_wrap {
    min-width: 160px;
}
@media only screen and (max-width: 750px) {
    .p-voice_filter .item dd .select_wrap,
    .p-voice_sort .item dd .select_wrap {
        min-width: 130px;
    }
    .p-voice_filter .item dd .select_wrap select,
    .p-voice_sort .item dd .select_wrap select {
        min-width: 130px;
        font-size: 1.3rem;
    }
}

/* レビュー一覧 */
.p-voice_list {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;
}
@media only screen and (min-width: 751px) {
    .p-voice_list .item {
        width: 48.1818181818%;
        margin: 30px 3.6363636364% 0 0;
    }
    .p-voice_list .item:nth-child(-n+2) {
        margin-top: 0;
    }
    .p-voice_list .item:nth-child(2n) {
        margin-right: 0;
    }
}
@media only screen and (max-width: 750px) {
    .p-voice_list {
        display: block;
    }
    .p-voice_list .item {
        margin-bottom: 20px;
    }
    .p-voice_list .item:last-child {
        margin-bottom: 0;
    }
}
.p-voice_list .item {
    padding: 30px;
    border: 1px solid #ccc;
    border-radius: 16px;
    background-color: #fff;
}
@media only screen and (max-width: 750px) {
    .p-voice_list .item {
        padding: 20px;
        border-radius: 10px;
    }
}

/* プロフィール部分 */
.p-voice_list .prof {
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
@media only screen and (max-width: 750px) {
    .p-voice_list .prof {
        margin-bottom: 15px;
        padding-bottom: 15px;
    }
}
.p-voice_list .prof .icon {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    margin-right: 15px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #f5f5f5;
}
@media only screen and (max-width: 750px) {
    .p-voice_list .prof .icon {
        flex: 0 0 52px;
        width: 52px;
        height: 52px;
        margin-right: 12px;
    }
}
.p-voice_list .prof .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.p-voice_list .prof .textbody {
    flex: 1 1 100%;
    max-width: 100%;
}
.p-voice_list .prof .textbody .name_area {
    margin-bottom: 4px;
    line-height: 1.3;
}
.p-voice_list .prof .textbody .name {
    margin-right: 10px;
    font-family: "Zen Maru Gothic", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝体", "Yu Mincho", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #ed8783;
}
@media only screen and (max-width: 750px) {
    .p-voice_list .prof .textbody .name {
        font-size: 1.6rem;
    }
}
.p-voice_list .prof .textbody .age {
    font-size: 1.4rem;
    color: #999;
}
@media only screen and (max-width: 750px) {
    .p-voice_list .prof .textbody .age {
        font-size: 1.3rem;
    }
}
.p-voice_list .prof .textbody .star {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    color: #e39c3c;
    font-family: "Zen Maru Gothic", serif;
    font-size: 1.8rem;
    line-height: 1;
    margin-right: 12px;
    vertical-align: middle;
}
@media only screen and (max-width: 750px) {
    .p-voice_list .prof .textbody .star {
        font-size: 1.6rem;
        margin-right: 8px;
    }
}
.p-voice_list .prof .textbody .star li.gray {
    color: #ddd;
}
.p-voice_list .prof .textbody .date {
    display: inline-block;
    font-size: 1.3rem;
    color: #999;
    vertical-align: middle;
}
@media only screen and (max-width: 750px) {
    .p-voice_list .prof .textbody .date {
        font-size: 1.2rem;
    }
}

/* 購入商品 */
.p-voice_list .goods {
    margin-bottom: 20px;
}
@media only screen and (max-width: 750px) {
    .p-voice_list .goods {
        margin-bottom: 15px;
    }
}
.p-voice_list .goods a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    background-color: #f8f8f8;
    text-decoration: none;
    opacity: 1;
    transition: all 0.3s ease-out;
}
@media only screen and (max-width: 750px) {
    .p-voice_list .goods a {
        padding: 10px;
    }
}
.p-voice_list .goods a:hover {
    background-color: #fae9e8;
}
.p-voice_list .goods a:hover .c-thum img {
    transform: scale(1.05);
}
.p-voice_list .goods .c-thum {
    flex: 0 0 80px;
    width: 80px;
    margin-right: 15px;
    border-radius: 6px;
    overflow: hidden;
}
@media only screen and (max-width: 750px) {
    .p-voice_list .goods .c-thum {
        flex: 0 0 64px;
        width: 64px;
        margin-right: 10px;
    }
}
.p-voice_list .goods .c-thum::after {
    padding-bottom: 70%;
}
.p-voice_list .goods .c-thum img {
    transition: all 0.3s ease-out;
}
.p-voice_list .goods .textbody {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
}
.p-voice_list .goods .textbody .category {
    margin-bottom: 3px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #955234;
}
@media only screen and (max-width: 750px) {
    .p-voice_list .goods .textbody .category {
        font-size: 1.1rem;
    }
}
.p-voice_list .goods .textbody .name {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: #000;
}
@media only screen and (max-width: 750px) {
    .p-voice_list .goods .textbody .name {
        font-size: 1.3rem;
    }
}

/* コメント */
.p-voice_list .comment_title {
    margin-bottom: 10px;
    font-family: "Zen Maru Gothic", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝体", "Yu Mincho", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.4;
    color: #955234;
}
@media only screen and (max-width: 750px) {
    .p-voice_list .comment_title {
        margin-bottom: 8px;
        font-size: 1.6rem;
    }
}
.p-voice_list .comment {
    font-size: 1.5rem;
    line-height: 1.7;
}
@media only screen and (max-width: 750px) {
    .p-voice_list .comment {
        font-size: 1.4rem;
        line-height: 1.65;
    }
}

/* ==========================================================================
   商品単位のレビュー一覧ページ (/voice.php?item=xxx)
   ========================================================================== */

/* 対象商品カード */
.p-voice_product {
    margin-bottom: 40px;
}
@media only screen and (max-width: 750px) {
    .p-voice_product {
        margin-bottom: 25px;
    }
}
.p-voice_product a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 20px 25px;
    border: 1px solid #ccc;
    border-radius: 16px;
    background-color: #fff;
    text-decoration: none;
    opacity: 1;
    transition: all 0.3s ease-out;
}
@media only screen and (max-width: 750px) {
    .p-voice_product a {
        padding: 15px;
        border-radius: 10px;
    }
}
.p-voice_product a:hover {
    background-color: #fae9e8;
    border-color: #ed8783;
}
.p-voice_product a:hover .c-thum img {
    transform: scale(1.05);
}
.p-voice_product .c-thum {
    flex: 0 0 200px;
    width: 200px;
    margin-right: 25px;
    border-radius: 8px;
    overflow: hidden;
}
@media only screen and (max-width: 750px) {
    .p-voice_product .c-thum {
        flex: 0 0 120px;
        width: 120px;
        margin-right: 15px;
    }
}
.p-voice_product .c-thum::after {
    padding-bottom: 69.4%;
}
.p-voice_product .c-thum img {
    transition: all 0.3s ease-out;
}
.p-voice_product .textbody {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
}
.p-voice_product .textbody .category {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 8px;
    margin-right: -5px;
}
@media only screen and (max-width: 750px) {
    .p-voice_product .textbody .category {
        margin-bottom: 5px;
    }
}
.p-voice_product .textbody .category span {
    margin: 0 5px 5px 0;
    padding: 2px 8px 1px;
    border: 1px solid #955234;
    border-radius: 4px;
    color: #955234;
    background-color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
}
@media only screen and (max-width: 750px) {
    .p-voice_product .textbody .category span {
        font-size: 1.1rem;
        margin: 0 3px 3px 0;
        padding: 1px 6px;
    }
}
.p-voice_product .textbody .name {
    margin-bottom: 5px;
    font-family: "Zen Maru Gothic", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝体", "Yu Mincho", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.4;
    color: #000;
}
@media only screen and (max-width: 750px) {
    .p-voice_product .textbody .name {
        font-size: 1.5rem;
        margin-bottom: 3px;
    }
}
.p-voice_product .textbody .code {
    margin-bottom: 10px;
    font-size: 1.3rem;
    color: #777;
}
@media only screen and (max-width: 750px) {
    .p-voice_product .textbody .code {
        margin-bottom: 8px;
        font-size: 1.1rem;
    }
}
.p-voice_product .textbody .back_link {
    display: inline-block;
    padding-right: 28px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #ed8783;
    position: relative;
}
@media only screen and (max-width: 750px) {
    .p-voice_product .textbody .back_link {
        font-size: 1.3rem;
        padding-right: 22px;
    }
}
.p-voice_product .textbody .back_link::after {
    content: " ";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: url("../img/common/icon/link_arrow01.svg") center no-repeat;
    background-color: #ed8783;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -10px;
}
@media only screen and (max-width: 750px) {
    .p-voice_product .textbody .back_link::after {
        width: 16px;
        height: 16px;
        margin-top: -8px;
        background-size: 3px auto;
    }
}

/* レビューサマリー＋評価分布 */
.p-voice_overview {
    margin-bottom: 40px;
    padding: 35px 40px;
    border-radius: 16px;
    background-color: #fae9e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}
@media only screen and (max-width: 750px) {
    .p-voice_overview {
        margin-bottom: 25px;
        padding: 20px;
        border-radius: 10px;
        flex-direction: column;
        gap: 20px;
    }
}
.p-voice_overview .summary {
    flex: 0 0 auto;
    text-align: center;
    padding-right: 40px;
    border-right: 1px solid #ddc1c0;
}
@media only screen and (max-width: 750px) {
    .p-voice_overview .summary {
        padding-right: 0;
        padding-bottom: 20px;
        border-right: 0;
        border-bottom: 1px solid #ddc1c0;
        width: 100%;
    }
}
.p-voice_overview .summary .num {
    font-size: 5.2rem;
    font-weight: 700;
    color: #955234;
    line-height: 1;
}
@media only screen and (max-width: 750px) {
    .p-voice_overview .summary .num {
        font-size: 4rem;
    }
}
.p-voice_overview .summary .star {
    margin: 8px 0 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #e39c3c;
    font-family: "Zen Maru Gothic", serif;
    font-size: 2.4rem;
    line-height: 1;
}
@media only screen and (max-width: 750px) {
    .p-voice_overview .summary .star {
        font-size: 2rem;
    }
}
.p-voice_overview .summary .star li {
    line-height: 1;
}
.p-voice_overview .summary .total {
    font-size: 1.4rem;
    font-weight: 700;
    color: #955234;
}
@media only screen and (max-width: 750px) {
    .p-voice_overview .summary .total {
        font-size: 1.3rem;
    }
}
.p-voice_overview .distribution {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
}
.p-voice_overview .distribution ul li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 8px;
    font-size: 1.4rem;
}
@media only screen and (max-width: 750px) {
    .p-voice_overview .distribution ul li {
        margin-bottom: 6px;
        font-size: 1.3rem;
    }
}
.p-voice_overview .distribution ul li:last-child {
    margin-bottom: 0;
}
.p-voice_overview .distribution ul li .label {
    flex: 0 0 36px;
    font-weight: 700;
    color: #e39c3c;
}
@media only screen and (max-width: 750px) {
    .p-voice_overview .distribution ul li .label {
        flex: 0 0 30px;
    }
}
.p-voice_overview .distribution ul li .bar {
    flex: 1 1 100%;
    max-width: 100%;
    height: 12px;
    margin-right: 12px;
    border-radius: 100px;
    background-color: #fff;
    overflow: hidden;
}
@media only screen and (max-width: 750px) {
    .p-voice_overview .distribution ul li .bar {
        height: 10px;
        margin-right: 8px;
    }
}
.p-voice_overview .distribution ul li .bar_inner {
    display: block;
    height: 100%;
    background-color: #e39c3c;
    border-radius: 100px;
    transition: width 0.6s ease-out;
}
.p-voice_overview .distribution ul li .percent {
    flex: 0 0 48px;
    text-align: right;
    font-weight: 700;
    color: #955234;
}
@media only screen and (max-width: 750px) {
    .p-voice_overview .distribution ul li .percent {
        flex: 0 0 40px;
    }
}
.p-voice_overview .distribution ul li .count {
    flex: 0 0 60px;
    margin-left: 10px;
    text-align: right;
    color: #777;
    font-size: 1.3rem;
}
@media only screen and (max-width: 750px) {
    .p-voice_overview .distribution ul li .count {
        flex: 0 0 50px;
        margin-left: 6px;
        font-size: 1.1rem;
    }
}


/* ===== 全商品一覧（カテゴリ別ラインナップ） ===== */
.p-allitems_block {
  margin-bottom: 80px;
}
.p-allitems_block:last-child {
  margin-bottom: 0;
}
@media only screen and (max-width: 750px) {
  .p-allitems_block {
    margin-bottom: 50px;
  }
}
.p-allitems_block .c-heading2_h3 {
  margin-bottom: 30px;
  padding-bottom: 12px;
  border-bottom: 1px solid #955234;
}
@media only screen and (max-width: 750px) {
  .p-allitems_block .c-heading2_h3 {
    margin-bottom: 20px;
  }
}
.p-allitems_block .c-heading2_h3 .lead {
  margin-left: 16px;
  font-size: 1.6rem;
  font-weight: 500;
  color: #4d4d4d;
}
@media only screen and (max-width: 750px) {
  .p-allitems_block .c-heading2_h3 .lead {
    display: block;
    margin: 6px 0 0;
    font-size: 1.3rem;
  }
}
.p-allitems_empty {
  padding: 30px 0;
  color: #999;
}

/* ===== 取り扱い店舗一覧：ページ内ナビ（エリアアンカー）のジャンプ位置調整 ===== */
/* 固定ヘッダー(PC150px / SP50px)分のオフセットを確保し、見出しがヘッダー裏に隠れないようにする */
.p-shop_list {
  scroll-margin-top: 170px;
}
@media only screen and (max-width: 750px) {
  .p-shop_list {
    scroll-margin-top: 70px;
  }
}

/* ==========================================================================
   フォーム確認画面 追加分（不足クラスのみ）
   ※ トライアル・修理フォーム等の確認画面で使用
   ========================================================================== */

/* セクション（複数ブロックに分かれる確認画面） */
.p-confirm_section {
    margin-bottom: 40px;
}
.p-confirm_section:last-of-type {
    margin-bottom: 0;
}
@media only screen and (max-width: 750px) {
    .p-confirm_section {
        margin-bottom: 25px;
    }
}
.p-confirm_section_heading {
    margin: 0 0 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #955234;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.3;
    color: #955234;
}
@media only screen and (max-width: 750px) {
    .p-confirm_section_heading {
        margin-bottom: 12px;
        font-size: 1.6rem;
    }
}

/* 商品カード（修理フォーム等） */
.p-confirm_product_card {
    margin-bottom: 20px;
    padding: 25px 30px;
    border: 1px solid #ccc;
    border-radius: 12px;
    background-color: #fff;
}
.p-confirm_product_card:last-child {
    margin-bottom: 0;
}
@media only screen and (max-width: 750px) {
    .p-confirm_product_card {
        padding: 18px;
        border-radius: 10px;
    }
}
.p-confirm_product_heading {
    margin: 0 0 12px;
    font-size: 1.7rem;
    font-weight: 700;
    color: #955234;
}
@media only screen and (max-width: 750px) {
    .p-confirm_product_heading {
        font-size: 1.5rem;
    }
}
/* カード内のリストは外枠と二重にならないよう枠線・背景をなくす */
.p-confirm_product_card .p-confirm_list {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
}

/* 概算見積り */
.p-confirm_estimation {
    margin-top: 15px;
    padding: 15px 20px;
    border-radius: 8px;
    background-color: #fff9f8;
    text-align: right;
}
.p-confirm_estimation .attention {
    margin-top: 5px;
    font-size: 1.4rem;
    color: #666;
}
@media only screen and (max-width: 750px) {
    .p-confirm_estimation .attention {
        font-size: 1.2rem;
    }
}

/* タグ写真のファイル名一覧
   確認画面では画像そのものは表示せず、ファイル名のみを出す
   （アップロード直後のファイルは公開領域に無く参照できないため） */
.p-confirm_file_list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.p-confirm_file_list li {
    padding-left: 24px;
    margin-bottom: 4px;
    word-break: break-all;
    position: relative;
}
.p-confirm_file_list li:last-child {
    margin-bottom: 0;
}
.p-confirm_file_list li::before {
    content: " ";
    display: block;
    width: 13px;
    height: 16px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20' fill='none' stroke='%23955234' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 1H2.5A1.5 1.5 0 0 0 1 2.5v15A1.5 1.5 0 0 0 2.5 19h11a1.5 1.5 0 0 0 1.5-1.5V6.5z'/%3E%3Cpolyline points='9.5 1 9.5 6.5 15 6.5'/%3E%3C/svg%3E") center / 13px auto no-repeat;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -8px;
}

/* 住所（HTMLは confirm_address / confirm_zip を使用） */
.confirm_address span {
    display: block;
}
.confirm_zip {
    color: #666;
}

/* ===================================================================
   【特許】温泉綿体験キット（onsenwata-kit）追加分
   ※ style-add.css の末尾に追記してください
=================================================================== */

/* --- 3カラムレイアウト（体験キットの中身／浸透イメージ画像）--- */
.c-three_column{
  display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;
  justify-content:space-between;align-items:stretch;flex-wrap:wrap;clear:both;
}
@media only screen and (min-width:751px){
  .c-three_column>*{width:31.0344827586%;margin:30px 3.4482758621% 0 0 !important}
  .c-three_column>*:nth-child(-n+3){margin-top:0 !important}
  .c-three_column>*:nth-child(3n){margin-right:0 !important}
}
@media only screen and (max-width:750px){
  .c-three_column{display:block}
  .c-three_column>*{margin:0 0 15px !important}
  .c-three_column>*:last-child{margin-bottom:0 !important}
}
/* カード内サムネイル（角丸）／画像は1200×900＝4:3に合わせ切れを防止 */
.c-three_column .c-thum{margin-bottom:12px;border-radius:10px;overflow:hidden}
.c-three_column .c-thum::after{padding-bottom:75%}
/* 浸透イメージの3カラムは figure 直下に c-thum を内包 */
.c-editor .c-three_column figure{margin:0}
.c-editor .c-three_column figure figcaption{margin-top:8px}

/* --- 無料プレゼント（体験キットの中身）縦並び・画像大きめ --- */
.onsenwata-gift .item{
  display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;
  justify-content:flex-start;align-items:center;
}
.onsenwata-gift .item+.item{margin-top:20px !important}
.onsenwata-gift .item .c-thum{
  flex:0 0 42%;margin:0 30px 0 0;border-radius:10px;overflow:hidden;
}
.onsenwata-gift .item .c-thum::after{padding-bottom:75%}
.onsenwata-gift .item .textbody{flex:1 1 100%;max-width:100%}
.onsenwata-gift .item .textbody p{margin:0 0 8px}
.onsenwata-gift .item .textbody p:last-child{margin-bottom:0}
@media only screen and (max-width:750px){
  .onsenwata-gift .item{display:block}
  .onsenwata-gift .item+.item{margin-top:15px !important}
  .onsenwata-gift .item .c-thum{margin:0 0 12px}
}

/* --- 本文上部のヘッドライン画像 --- */
.c-editor figure.onsenwata-headline{margin:0 0 30px}
.c-editor figure.onsenwata-headline img{width:100%}
@media only screen and (max-width:750px){
  .c-editor figure.onsenwata-headline{margin:0 0 20px}
}

/* --- 浸透イメージ画像の右回り込み（PCのみ）--- */
@media only screen and (min-width:751px){
  .c-editor figure.onsenwata-float{float:right;width:42%;margin:0 0 25px 40px}
}
@media only screen and (max-width:750px){
  .c-editor figure.onsenwata-float{float:none;width:auto;margin:20px 0}
}

/* --- ウレタン要約ブロックの画像 --- */
.onsenwata-urethane figure img{width:100%}

/* --- バナー周りの上下余白：セクションのpadding(PC80px/SP30px)に合わせる ---
   上（LINEバナーの上）は直前セクションのpadding-bottomがそのまま余白になる */
.onsenwata-kit .c-banner_line{margin-bottom:30px}     /* LINE↔電話バナーの間 */
.onsenwata-kit .c-banner_contact{margin-bottom:80px}  /* 電話バナーの下 */
@media only screen and (max-width:750px){
  .onsenwata-kit .c-banner_line{margin-bottom:20px}
  .onsenwata-kit .c-banner_contact{margin-bottom:30px}
}

/* ===== LINE連携バナー：単独設置時の上余白（会員登録完了・マイページ・注文完了） ===== */
.c-mt_section{margin-top:50px}
@media only screen and (max-width:750px){
  .c-mt_section{margin-top:30px}
}

/* ==========================================================================
   商品価格表示の色をピンク（#ed8783）に統一
   ※ 全商品一覧・カテゴリ・シリーズ・お悩みシーン・関連商品スワイパー等の
     「商品カードの価格」をピンクに揃える（サイズ表記は従来どおり）
   ※ index.php は <span class="tax"> が .price の内側、カテゴリ等は兄弟構造の
     両方に対応するため .tax も併せて指定
   ========================================================================== */

/* 全商品一覧・カテゴリ・お悩みシーン等のカード価格 */
.p-products_goods_list .item a .textbody .price,
.p-products_goods_list .item a .textbody .tax {
    color: #ed8783;
}

/* 関連商品・おすすめ商品スワイパーのカード価格 */
.p-goods_swiper .item .price,
.p-goods_swiper .item .tax {
    color: #ed8783;
}

/* TOPおすすめスワイパーのカード価格 */
.t-recommend .swiper-slide .price,
.t-recommend .swiper-slide .tax {
    color: #ed8783;
}

/* シリーズ一覧（price_area）のカード価格 */
.p-products_series_list .item a .textbody .price_area .price,
.p-products_series_list .item a .textbody .price_area .tax {
    color: #ed8783;
}

/* 富士山シリーズ ラインナップ表の価格 */
.p-products_lineup_table table tbody .price {
    color: #ed8783;
}

/* ==========================================================================
   お支払い・配送ページ 離島指定地域テーブル（.p-island_area）
   ・都道府県／市区郡が中途半端に折り返さないよう列幅を固定（住所のみ折返し）
   ・行数が多いため「もっと見る」開閉を実装（JS制御／scripts-add.js）
   ========================================================================== */

/* 列幅：都道府県・市区郡は折り返さず、住所のみ折り返す */
.c-editor .p-island_area {
    table-layout: fixed;
    width: 100%;
}
.c-editor .p-island_area th:nth-child(1),
.c-editor .p-island_area td:nth-child(1) {
    width: 7em;
    white-space: nowrap;
}
.c-editor .p-island_area th:nth-child(2),
.c-editor .p-island_area td:nth-child(2) {
    width: 8em;
    white-space: nowrap;
}
.c-editor .p-island_area th:nth-child(3),
.c-editor .p-island_area td:nth-child(3) {
    width: auto;
    white-space: normal;
    word-break: break-word;
}
@media only screen and (max-width: 750px) {
    .c-editor .p-island_area th:nth-child(1),
    .c-editor .p-island_area td:nth-child(1) {
        width: 6em;
    }
    .c-editor .p-island_area th:nth-child(2),
    .c-editor .p-island_area td:nth-child(2) {
        width: 6.5em;
    }
}

/* 開閉（JS制御）：JS無効時は全件表示のまま。JSが初期化時に折りたたむ。
   超過分tbodyはデフォルト表示、.is-collapsed が付くと非表示になる */
.p-island_area_more.is-collapsed {
    display: none;
}

/* もっと見るボタンの親：JS無効時は非表示（ボタンが機能しないため隠す）。
   JS初期化で .is-ready が付くと表示される */
.p-island_more {
    display: none;
}
.p-island_more.is-ready {
    display: block;
}

/* もっと見る／閉じるボタン */
.p-island_more_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 320px;
    margin: 16px auto 0;
    padding: 12px 20px;
    background: none;
    border: 1px solid #955234;
    border-radius: 999px;
    color: #955234;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: background-color .3s ease-out, color .3s ease-out;
}
.p-island_more_btn:hover {
    background-color: #955234;
    color: #fff;
}
/* 開閉アイコン（下向き矢印・開くと反転） */
.p-island_more_btn::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .3s ease-out;
}
.p-island_more_btn[aria-expanded="true"]::after {
    transform: translateY(2px) rotate(225deg);
}
@media only screen and (max-width: 750px) {
    .p-island_more_btn {
        font-size: 1.4rem;
        padding: 11px 18px;
    }
}

/* ============================================
   フォーム内 入力ガイド注意書きの文字色変更
   「全角文字でご入力ください」等の案内文が
   エラー文（赤字）と誤認されないよう黒字へ
   ※ style.css の .c-form .input_box .input_item .attention02 (color:#e6342e) を上書き
   ============================================ */
.c-form .input_box .input_item .attention02 {
    color: #000;
}

/* ==========================================================================
   商品詳細 #sec01「この商品の特徴」内のマージン統一
   旧「商品について」(sec02) を統合したため、特徴本文(.c-content_textbody)と
   商品について(.p-products_about)の間の余白を、aboutブロック内の項目間余白(40px/25px)に揃える
   ========================================================================== */
.c-content_textbody > .p-products_about {
    margin-top: 40px;
}
@media only screen and (max-width: 750px) {
    .c-content_textbody > .p-products_about {
        margin-top: 25px;
    }
}

/* ==========================================================================
   商品詳細 .category タグのリンク化
   タグ全体（余白含む）をクリック範囲にし、ホバーで反転。
   ※ span の余白は style.css のまま維持し、内側の a をネガティブマージンで
     余白ぶん広げてクリック範囲を確保する。
     （span 側の padding を 0 にすると、a を持たないテキストのみのタグで
      余白が消えて枠線に文字が張り付くため）
   ========================================================================== */
.p-products_detail .category span {
    padding: 2px 8px;
    overflow: hidden;
}
.p-products_detail .category span a {
    display: block;
    margin: -2px -8px;
    padding: 2px 8px;
    color: inherit;
    text-decoration: none;
    opacity: 1;
}
.p-products_detail .category span a:hover {
    background-color: #955234;
    color: #fff;
}
@media only screen and (max-width: 750px) {
    .p-products_detail .category span {
        padding: 2px 5px;
    }
    .p-products_detail .category span a {
        margin: -2px -5px;
        padding: 2px 5px;
    }
}

/* ==========================================================================
   キーワード検索結果ページ（/products/search.php）
   ========================================================================== */
/* 再検索フォーム */
.p-products_search_form {
    max-width: 720px;
    margin: 0 auto 20px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
}
.p-products_search_form form {
    width: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    border-radius: 50px;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #fff;
}
.p-products_search_form .input {
    flex: 1 1 100%;
    max-width: 100%;
}
.p-products_search_form .input input[type=text] {
    height: 56px;
    border: 0;
    padding: 0 24px;
}
@media only screen and (max-width: 750px) {
    .p-products_search_form .input input[type=text] {
        height: 48px;
        padding: 0 18px;
    }
}
.p-products_search_form .submit {
    flex: 0 0 auto;
}
.p-products_search_form .submit input[type=submit] {
    width: 130px;
    height: 56px;
    background: url("../img/common/icon/search.svg") 22px center no-repeat;
    background-color: #ed8783;
    color: #fff;
    font-weight: 700;
    padding-left: 26px;
    cursor: pointer;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.p-products_search_form .submit input[type=submit]:hover {
    opacity: .7;
}
@media only screen and (max-width: 750px) {
    .p-products_search_form .submit input[type=submit] {
        width: 80px;
        height: 48px;
        padding-left: 20px;
        background-position: 14px center;
    }
}

/* 検索結果なし */
.p-products_no_result {
    margin: 50px 0 20px;
    padding: 50px 40px;
    border: 1px solid #ccc;
    border-radius: 16px;
    background-color: #f8f8f8;
    text-align: center;
}
@media only screen and (max-width: 750px) {
    .p-products_no_result {
        margin: 30px 0 10px;
        padding: 30px 20px;
        border-radius: 10px;
    }
}
.p-products_no_result .lead {
    margin: 0 0 20px;
    font-family: "Zen Maru Gothic","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","游明朝体","Yu Mincho",YuMincho,"HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: #955234;
    line-height: 1.5;
}
@media only screen and (max-width: 750px) {
    .p-products_no_result .lead {
        margin-bottom: 15px;
        font-size: 1.7rem;
    }
}
.p-products_no_result .note {
    max-width: 520px;
    margin: 0 auto;
    text-align: left;
    font-size: 1.6rem;
}
@media only screen and (max-width: 750px) {
    .p-products_no_result .note {
        font-size: 1.4rem;
    }
}
.p-products_no_result .note > p {
    margin: 0 0 12px;
    font-weight: 700;
    text-align: center;
}
.p-products_no_result .note ul li {
    padding-left: 20px;
    margin-bottom: 8px;
    position: relative;
}
.p-products_no_result .note ul li:last-child {
    margin-bottom: 0;
}
.p-products_no_result .note ul li::before {
    content: " ";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ed8783;
    position: absolute;
    top: 9px;
    left: 0;
}

/* ==========================================================================
   商品詳細 メイン画像の見切れ対策
   固定比率（padding-bottom + object-fit:cover）で上下が切れていたため、
   画像本来の高さに合わせて表示する（detail.php / detail_full.php / detail_csv.php 共通）
   ========================================================================== */
.p-products_detail .column_left .product_image .main_image::after {
    display: none;
}
.p-products_detail .column_left .product_image .main_image img {
    position: static;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ==========================================================================
   完了・空状態画面：本文とボタンの間隔調整
   会員登録完了 / お気に入り（0件）/ 会員情報変更完了 など、
   .c-content_textbody 内で本文の直後にボタンが続くレイアウトで、
   文章とボタンが詰まっていたため余白を追加
   ========================================================================== */
.c-content_textbody > .c-btns_column {
    margin-top: 30px;
}
@media only screen and (max-width: 750px) {
    .c-content_textbody > .c-btns_column {
        margin-top: 20px;
    }
}
/* ==========================================================================
   マイページ：保有ポイント表示パネル
   メニュー上部に常設し、クリックせずその場でポイントを確認できる
   ========================================================================== */
.p-mypage_point {
    margin-bottom: 40px;
    padding: 25px 40px;
    border-radius: 16px;
    background-color: #fae9e8;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@media only screen and (max-width: 750px) {
    .p-mypage_point {
        margin-bottom: 30px;
        padding: 18px 20px;
        border-radius: 10px;
        display: block;
    }
}
.p-mypage_point_head .label {
    margin: 0 0 6px;
    font-family: "Zen Maru Gothic","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","游明朝体","Yu Mincho",YuMincho,"HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #955234;
}
@media only screen and (max-width: 750px) {
    .p-mypage_point_head .label {
        font-size: 1.6rem;
    }
}
.p-mypage_point_head .note {
    margin: 0;
    font-size: 1.4rem;
    color: #4d4d4d;
}
@media only screen and (max-width: 750px) {
    .p-mypage_point_head .note {
        font-size: 1.2rem;
    }
}
.p-mypage_point_value {
    flex: 0 0 auto;
    margin-left: 30px;
    color: #ed8783;
    line-height: 1;
    white-space: nowrap;
}
@media only screen and (max-width: 750px) {
    .p-mypage_point_value {
        margin: 12px 0 0;
        text-align: right;
    }
}
.p-mypage_point_value strong {
    font-family: "Roboto", sans-serif;
    font-size: 4.4rem;
    font-weight: 700;
}
@media only screen and (max-width: 750px) {
    .p-mypage_point_value strong {
        font-size: 3.4rem;
    }
}
.p-mypage_point_value .unit {
    margin-left: 5px;
    font-size: 1.8rem;
    font-weight: 700;
}
@media only screen and (max-width: 750px) {
    .p-mypage_point_value .unit {
        font-size: 1.6rem;
    }
}

/* ==========================================================================
   汎用比較表（商品を列＝横並び／項目を行）
   .p-products_lineup_table（富士山専用・複雑）の汎用版。
   ・商品を横に並べ、項目（価格・厚さ等）を縦に並べる
   ・左端の項目名列はスクロール時も固定（position:sticky）
   ・商品数に応じて自然に伸び、はみ出す時だけ横スクロール
   detail_full.php をはじめ任意の商品ページで使い回せる。
   ========================================================================== */
.p-compare_table {
    margin: 40px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media only screen and (max-width: 750px) {
    .p-compare_table {
        margin: 25px 0;
    }
}
.p-compare_table table {
    border: 0;
    border-spacing: 0;
    border-collapse: separate;
    /* 列幅を均等に固定。列数×固定幅がコンテナを超えると
       PC・SP問わず横スクロール（.p-compare_table の overflow-x:auto） */
    table-layout: fixed;
    width: auto;
    min-width: 100%;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    font-size: 1.5rem;
    line-height: 1.6;
}
/* 列幅（項目名列＋各商品列を均等に） */
.p-compare_table col.col_head {
    width: 150px;
}
.p-compare_table col.col_item {
    width: 220px;
}
@media only screen and (max-width: 750px) {
    .p-compare_table col.col_head {
        width: 100px;
    }
    .p-compare_table col.col_item {
        width: 150px;
    }
}
@media only screen and (max-width: 750px) {
    .p-compare_table table {
        font-size: 1.3rem;
    }
}
/* 全セル共通の枠線（右・下のみ／separateモデルで二重線を防ぐ） */
.p-compare_table th,
.p-compare_table td {
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 14px 15px;
    text-align: center;
    vertical-align: middle;
}
@media only screen and (max-width: 750px) {
    .p-compare_table th,
    .p-compare_table td {
        padding: 10px;
    }
}
/* 商品列ヘッダ（横並びの各商品） */
.p-compare_table thead th {
    min-width: 180px;
    vertical-align: top;
    background-color: #fff;
    color: #955234;
    font-weight: 700;
}
@media only screen and (max-width: 750px) {
    .p-compare_table thead th {
        min-width: 140px;
    }
}
.p-compare_table thead th .thumb {
    display: block;
    margin: 0 auto 8px;
    width: 100%;
    max-width: 140px;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}
.p-compare_table thead th .thumb::after {
    content: " ";
    display: block;
    padding-bottom: 66.6%;
}
.p-compare_table thead th .thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.p-compare_table thead th .name {
    display: block;
    font-size: 1.6rem;
    line-height: 1.35;
}
@media only screen and (max-width: 750px) {
    .p-compare_table thead th .name {
        font-size: 1.4rem;
    }
}
/* 左端＝項目名列（スクロール時も固定） */
.p-compare_table .row_head {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 130px;
    text-align: left;
    background-color: #f8f8f8;
    color: #955234;
    font-weight: 700;
    border-left: 1px solid #ccc;
}
@media only screen and (max-width: 750px) {
    .p-compare_table .row_head {
        min-width: 96px;
    }
}
/* 左上の角セル（項目名列×商品ヘッダ行）は最前面に */
.p-compare_table thead .row_head {
    z-index: 3;
    background-color: #f8f8f8;
}
/* 本文セル */
.p-compare_table tbody td {
    background-color: #fff;
}
.p-compare_table tbody .price {
    font-family: "Roboto", sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: #955234;
}
@media only screen and (max-width: 750px) {
    .p-compare_table tbody .price {
        font-size: 1.6rem;
    }
}
.p-compare_table tbody .price .tax {
    margin-left: 3px;
    font-size: 1.2rem;
    font-weight: 500;
}
/* ○△× などの記号 */
.p-compare_table tbody .mark {
    font-size: 2rem;
    font-weight: 700;
    color: #e39c3c;
}
/* 特徴など長文セルは左寄せ */
.p-compare_table tbody .feat {
    text-align: left;
    font-size: 1.4rem;
    line-height: 1.5;
}
@media only screen and (max-width: 750px) {
    .p-compare_table tbody .feat {
        font-size: 1.2rem;
    }
}
/* おすすめ列を強調したい場合に thead th / td へ付与 */
.p-compare_table .is_recommend {
    background-color: #fff3d6;
}
.p-compare_table thead th.is_recommend {
    background-color: #fff3d6;
}

/* 比較表：サムネイルリンク＆詳細ボタン（商品ヘッダー内・サムネイル下） */
.p-compare_table thead th a.thumb:hover img {
    opacity: .8;
}
.p-compare_table thead th .compare_btn {
    display: block;
    margin-top: 12px;
}
@media only screen and (max-width: 750px) {
    .p-compare_table thead th .compare_btn {
        margin-top: 8px;
    }
}
.p-compare_table thead th .compare_btn a {
    display: block;
    padding: 9px 26px 9px 12px;
    font-size: 1.3rem;
    font-weight: 700;
}
@media only screen and (max-width: 750px) {
    .p-compare_table thead th .compare_btn a {
        padding: 8px 22px 8px 8px;
        font-size: 1.2rem;
    }
}
.p-compare_table thead th .compare_btn a::after {
    right: 11px;
}

/* ============================================================
   ページ内ナビ（.c-archive_navi）：件数増加時の折り返し対応
   PCのみ。SP（750px以下）は既存の横スクロールを維持
   ============================================================ */
@media only screen and (min-width: 751px) {
    /* 折り返しを許可し、行間・項目間を gap で管理 */
    .c-archive_navi ul {
        flex-wrap: wrap;
        justify-content: flex-start;
        row-gap: 20px;
        column-gap: 45px;
    }
    /* 各項目は1行固定（日本語が1文字ずつ縦積みになるのを防止） */
    .c-archive_navi ul li {
        margin-right: 0;
        white-space: nowrap;
    }
    /* ホバー下線を各項目直下へ（複数行でも下の行に重ならないように） */
    .c-archive_navi ul li a::before,
    .c-archive_navi ul li span::before {
        bottom: -6px;
    }
}

/* ============================================================
   c-editor 本文内のボタン型リンク（<a><button>…</button></a>）
   ・<a> の中に <button> があるものだけをボタン見た目に変換
   ・文中の通常テキストリンク（<a>text</a>）は据え置き
   ============================================================ */
.c-editor a:has(> button) {
    display: block;
    margin: 35px 0;
    text-align: center;
    text-decoration: none;
    opacity: 1;
}
.c-editor a:has(> button):hover {
    opacity: 1;
}
@media only screen and (max-width: 750px) {
    .c-editor a:has(> button) {
        margin: 25px 0;
    }
}
.c-editor a > button {
    display: inline-block;
    max-width: 100%;
    padding: 15px 45px;
    background-color: #e39c3c;
    border-radius: 100px;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    white-space: normal;
    cursor: pointer;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
@media only screen and (max-width: 750px) {
    .c-editor a > button {
        padding: 13px 28px;
        font-size: 1.6rem;
    }
}
.c-editor a > button:hover {
    background-color: #ed8783;
    opacity: 1;
}

/* ============================================================
   ものづくりマイスター モーダル（羽毛布団カテゴリ等）
   ・p-products_pickup 内「ものづくりマイスター」をクリックで modaal 表示
   ・トリガーの丸ボタン(?)と、モーダル本文の装飾
   ============================================================ */
/* トリガー（?バッジ付きリンク） */
.p-products_pickup .qualification .row a.js-maister-modal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    opacity: 1;
    cursor: pointer;
}
.p-products_pickup .qualification .row a.js-maister-modal .c-maister_more {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-family: "Roboto", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}
.p-products_pickup .qualification .row a.js-maister-modal:hover {
    text-decoration: underline;
}

/* モーダル本文 */
.c-maister_modal .maister_label {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 14px;
    border-radius: 50px;
    background-color: #955234;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
}
@media only screen and (max-width: 750px) {
    .c-maister_modal .maister_label {
        margin-bottom: 8px;
        font-size: 1.2rem;
    }
}
.c-maister_modal .maister_heading {
    margin-bottom: 20px;
    font-family: "Zen Maru Gothic", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝体", "Yu Mincho", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 3.2rem;
    line-height: 1.3;
    font-weight: 700;
    color: #955234;
}
@media only screen and (max-width: 750px) {
    .c-maister_modal .maister_heading {
        margin-bottom: 15px;
        font-size: 2.2rem;
    }
}
.c-maister_modal .maister_lead {
    margin-bottom: 20px;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.7;
}
@media only screen and (max-width: 750px) {
    .c-maister_modal .maister_lead {
        font-size: 1.6rem;
    }
}
.c-maister_modal p {
    margin: 12px 0;
    line-height: 1.9;
}
.c-maister_modal strong {
    color: #955234;
    font-weight: 700;
}
.c-maister_modal .maister_subheading {
    margin: 35px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #955234;
    font-size: 2.2rem;
    font-weight: 700;
    color: #955234;
}
@media only screen and (max-width: 750px) {
    .c-maister_modal .maister_subheading {
        margin: 25px 0 10px;
        font-size: 1.8rem;
    }
}
.c-maister_modal .maister_list {
    margin: 12px 0;
}
.c-maister_modal .maister_list li {
    padding-left: 20px;
    margin-bottom: 10px;
    line-height: 1.7;
    position: relative;
}
.c-maister_modal .maister_list li::before {
    content: " ";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ed8783;
    position: absolute;
    top: 10px;
    left: 0;
}
.c-maister_modal .maister_list li:last-child {
    margin-bottom: 0;
}
.c-maister_modal .maister_note {
    margin-top: 20px;
    padding: 16px 20px;
    border-radius: 8px;
    background-color: #fae9e8;
    font-size: 1.5rem;
    line-height: 1.7;
}
@media only screen and (max-width: 750px) {
    .c-maister_modal .maister_note {
        padding: 12px 15px;
        font-size: 1.3rem;
    }
}


/* ===================================================================
   EC-CUBE 独自追加ブロック（参照 style-add.css に存在しないルール・温存）
   ※共通653セレクタは本文一致のため参照側で同期。以下は当方追加分のみ。
   =================================================================== */
/* 旧サイト由来の追加ラベル種別（新デザインに合わせて配色） */
.p-products_detail .product_status li.nayami_label {
    background-color: #f9e3ea;
    color: #b3445f;
}

.p-products_detail .product_status li.free-shipping {
    background-color: #e3f0e1;
    color: #3c7a3a;
}

.p-products_detail .product_status li.size_label {
    background-color: #e3edf7;
    color: #2f6191;
}

.p-products_detail .product_status li.long-available {
    background-color: #e6f1f0;
    color: #2f7d77;
}

.p-products_detail .product_status li.pickup-service {
    background-color: #f6ecdd;
    color: #8a5a1f;
}

.p-products_detail .product_status_notice {
    margin-top: 8px;
    font-size: 1.3rem;
    color: #c0392b;
    font-weight: 700;
}

/* お客様の声（商品レビュー sec04）。参照CSS(style.css)の p-products_voice_list を移植 */
.p-products_voice_list .item {
    padding: 29px;
    border: 1px solid #ccc;
    border-bottom: 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.p-products_voice_list .item:last-child { border-bottom: 1px solid #ccc; }

.p-products_voice_list .item .prof {
    flex: 0 0 auto;
    margin-right: 15px;
    width: 200px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.p-products_voice_list .item .prof .icon { flex: 0 0 48px; margin-right: 15px; }

.p-products_voice_list .item .prof .name {
    margin-right: 10px;
    font-family: "Zen Maru Gothic", serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #ed8783;
}

.p-products_voice_list .item .prof .age { font-size: 1.4rem; color: #999; }

.p-products_voice_list .item .prof .star {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    color: #e39c3c;
    font-family: "Zen Maru Gothic", serif;
    font-size: 1.8rem;
    line-height: 1.1;
}

.p-products_voice_list .item .textbody { flex: 1 1 100%; max-width: 100%; }

.p-products_voice_list .item .textbody .voice_title { margin-bottom: 4px; }

.p-products_voice_list + .c-btn { margin-top: 45px; }

.p-products_voice_list + .c-btn a { width: 100%; max-width: 530px; }

.p-products_voice_empty { padding: 20px 0; color: #666; }

@media only screen and (max-width: 750px) {
    .p-products_voice_list .item { padding: 19px; display: block; }
    .p-products_voice_list .item .prof { margin: 0 0 10px; width: auto; }
}

/* この商品の特徴: 左右レイアウトブロック（左テキスト＋右画像／左画像＋右テキスト） */
.c-content_textbody .c-editor .c-editor_cols {
    display: flex;
    gap: 24px;
    align-items: center;
    margin: 24px 0;
}

.c-content_textbody .c-editor .c-editor_cols .col_text { flex: 1; min-width: 0; }

.c-content_textbody .c-editor .c-editor_cols .col_image { flex: 1; min-width: 0; }

.c-content_textbody .c-editor .c-editor_cols .col_image img { width: 100%; height: auto; }

.c-content_textbody .c-editor .c-editor_cols .col_text > *:first-child { margin-top: 0; }

@media only screen and (max-width: 750px) {
    .c-content_textbody .c-editor .c-editor_cols {
        flex-direction: column;
        gap: 14px;
    }
}

/* 左右レイアウト（参照 demo_hongake .p-feature_row 準拠）
   ・画像は常にDOMの先頭 → SP(750px以下)では画像が先に表示される（左テキスト＋右画像でも）
   ・PC(751px〜)は50/50・上揃え(flex-start)。is-reverse=左テキスト＋右画像（見た目のみ反転）
   ・No.115 指摘対応。参照CSS 4794/4856-4886 をミラー */
.p-feature_row .image figure { margin: 0; }
.p-feature_row .image img { width: 100%; height: auto; display: block; }
.p-feature_row .textbody > *:first-child { margin-top: 0; }
@media only screen and (min-width: 751px) {
    .p-feature_row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 40px;
        margin: 40px 0;
    }
    .p-feature_row:first-child { margin-top: 0; }
    .p-feature_row .image { flex: 1 1 0; width: auto; margin-right: 0; }
    .p-feature_row .textbody { flex: 1 1 0; width: auto; max-width: none; }
    .p-feature_row.is-reverse { flex-direction: row-reverse; }
    .p-feature_row .textbody h3 { margin-top: 0; }
}
@media only screen and (max-width: 750px) {
    .p-feature_row .image { margin-bottom: 14px; }
}

/* === local custom preserved (re-appended after ref sync 2026-06-22) === */
/* ===========================
   カート 空状態・エラー・送料ヒント
=========================== */
.p-cart_empty {
    padding: 50px 20px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 16px;
    background-color: #fafafa;
}

.p-cart_empty_message {
    font-size: 1.6rem;
    margin-bottom: 25px;
    color: #555;
}

.p-cart_empty .c-btn {
    max-width: 320px;
    margin: 0 auto;
}

.p-cart_error {
    padding: 15px 20px;
    margin-bottom: 20px;
    border: 1px solid #e08784;
    border-radius: 8px;
    background-color: #fae9e8;
    color: #b94a48;
    font-size: 1.4rem;
}

.p-cart_error p {
    margin: 0;
}

.p-cart_free_hint {
    margin-top: 15px;
    padding: 10px 15px;
    background-color: #fff8f0;
    border-radius: 6px;
    font-size: 1.4rem;
    color: #955234;
}

@media only screen and (max-width: 750px) {
    .p-cart_empty {
        padding: 40px 15px;
        border-radius: 10px;
    }
}

/* === 参照(assets/css)から補完: シリーズLPヒーロー p-products_sub_heading === */
.p-products_sub_heading{margin-top:-50px;padding:60px 0;position:relative;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;justify-content:space-between;align-items:flex-start}

.p-products_sub_heading::before{content:" ";display:block;width:100svw;height:100%;background-color:#fde1b8;position:absolute;top:0;left:50%;transform:translate(-50%, 0);z-index:-1}

.p-products_sub_heading .textbody{width:48.1818181818%}

.p-products_sub_heading .textbody .series{display:inline-block;margin-bottom:20px;padding:3px 10px;border-radius:8px;background-color:#955234;color:#fff;font-weight:700}

.p-products_sub_heading .textbody .heading{margin-bottom:25px;font-family:"Zen Maru Gothic","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","游明朝体","Yu Mincho",YuMincho,"HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;font-size:3.2rem;font-weight:700;color:#955234;line-height:1.3}

.p-products_sub_heading .textbody .copy{margin-bottom:15px;font-size:2.4rem;font-weight:700;line-height:1.6}

.p-products_sub_heading .textbody .category{display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;font-size:1.6rem;font-weight:700;margin-top:25px;margin-right:-10px}

.p-products_sub_heading .textbody .category span{padding:8px 18px;margin:10px 10px 0 0;border:1px solid #955234;border-radius:8px;color:#955234;background-color:#fff}

.p-products_sub_heading .c-thum{width:47.9090909091%}

.p-products_sub_heading .c-thum::after{padding-bottom:69.44971537%}

.p-products_sub_heading .c-thum img{border-radius:16px}

@media only screen and (max-width: 750px){
.p-products_sub_heading{padding:30px 0 40px;margin-top:-30px;display:block}
}

@media only screen and (max-width: 750px){
.p-products_sub_heading .textbody{width:auto;margin-bottom:20px}
}

@media only screen and (max-width: 750px){
.p-products_sub_heading .textbody .series{margin-bottom:10px}
}

@media only screen and (max-width: 750px){
.p-products_sub_heading .textbody .heading{margin-bottom:15px;font-size:2.2rem;line-height:1.4}
}

@media only screen and (max-width: 750px){
.p-products_sub_heading .textbody .copy{margin-bottom:10px;font-size:1.8rem}
}

@media only screen and (max-width: 750px){
.p-products_sub_heading .textbody .category{font-size:1.3rem;margin-right:-5px;margin-top:15px}
}

@media only screen and (max-width: 750px){
.p-products_sub_heading .textbody .category span{margin:0 5px 5px 0;padding:2px 10px;border-radius:4px}
}

@media only screen and (max-width: 750px){
.p-products_sub_heading .c-thum{width:auto}
}

@media only screen and (max-width: 750px){
.p-products_sub_heading .c-thum img{border-radius:10px}
}

/* ===== 参照デザイン由来：商品詳細コンテンツ節component移植 2026-06-16 ===== */
.c-youtube{margin:40px 0;position:relative}

.c-youtube::after{content:" ";display:block;padding-bottom:56.25%}

.c-youtube iframe{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:16px}

@media only screen and (max-width: 750px){
.c-youtube{margin:20px 0}
}

@media only screen and (max-width: 750px){
.c-youtube iframe{border-radius:10px}
}

/* 商品お問い合わせCTA(.p-products_contact)は詳細ページ最下部に置くため、
   直後の t-cv バナーと密着しないよう下余白を確保する（参照はCTA後に別セクションがあり間隔ができる）。 */
.p-products_contact {
    margin-bottom: 60px;
}

@media only screen and (max-width: 750px) {
    .p-products_contact {
        margin-bottom: 40px;
    }
}

/* ============================================================
   フッター SNSアイコン（Facebook / Instagram / YouTube / X）
   ・素材画像に依存しないインラインSVG
   ・円の背景はロゴカラーのピンク #ed8783、アイコンは白 #fff
   ・初期実装は黒丸だったため、旧版のCSSが残っていると黒く表示される（修正シート116）
   ============================================================ */
.f-sns {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}
.f-sns li {
    line-height: 0;
}
.f-sns a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #ed8783;
    opacity: 1;
    -webkit-transition: opacity .3s ease-out;
    transition: opacity .3s ease-out;
}
.f-sns a:hover {
    opacity: .7;
}
.f-sns a svg {
    width: 18px;
    height: 18px;
    fill: #fff;
}

/* ===========================
   ゲスト決済フロー 追加パーツ（No.48）
=========================== */

/* セレクトはフォーム内で全幅 */
.p-checkout_form .select_wrap {
    display: block;
    width: 100%;
}
.p-checkout_form .select_wrap select {
    width: 100%;
}

/* 支払方法ラジオ: form_widget は input+label を出力するため、
   サイト標準の input[type=radio]+span カスタムラジオ描画を +label にも適用する */
.p-checkout_radio_list input[type="radio"] + label {
    display: inline-block;
    padding-left: 40px;
    position: relative;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 26px;
}
.p-checkout_radio_list input[type="radio"] + label::before,
.p-checkout_radio_list input[type="radio"] + label::after {
    content: " ";
    display: block;
}
.p-checkout_radio_list input[type="radio"] + label::before {
    border: 2px solid #c9c9c9;
    width: 26px;
    height: 26px;
    box-sizing: border-box;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
}
.p-checkout_radio_list input[type="radio"] + label::after {
    width: 12px;
    height: 12px;
    background-color: #e57c26;
    border-radius: 50%;
    position: absolute;
    top: 7px;
    left: 7px;
    display: none;
}
.p-checkout_radio_list input[type="radio"]:checked + label::after {
    display: block;
}

/* 郵便番号入力 */
.p-checkout_zip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.p-checkout_zip input[type="text"] {
    width: auto;
    max-width: 160px;
}
.p-checkout_zip_search {
    font-size: 1.3rem;
    color: #955234;
    text-decoration: underline;
}

/* 補足テキスト */
.p-checkout_note {
    font-size: 1.3rem;
    color: #777;
    margin-bottom: 12px;
}

/* お届け先ブロック */
.p-checkout_ship {
    margin-bottom: 25px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
}
.p-checkout_ship:last-of-type {
    margin-bottom: 15px;
}
.p-checkout_ship_head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.p-checkout_ship_title {
    font-weight: 700;
    font-size: 1.5rem;
}
.p-checkout_ship_change {
    display: inline-block;
    width: auto;
    flex: 0 0 auto;
}
.p-checkout_ship_address {
    font-size: 1.4rem;
    line-height: 1.7;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #ddd;
}
.p-checkout_ship_items {
    list-style: none;
    margin: 0 0 15px;
    padding: 0;
}
.p-checkout_ship_items li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 1.4rem;
}
.p-checkout_ship_items li:last-child {
    border-bottom: 0;
}
.p-checkout_ship_item_name {
    flex: 1;
    line-height: 1.5;
}
.p-checkout_ship_item_name small {
    display: block;
    color: #999;
    font-size: 1.2rem;
}
.p-checkout_ship_item_price {
    white-space: nowrap;
}
.p-checkout_ship_multiple {
    margin-top: 10px;
}

/* お届け先選択（会員） */
.p-checkout_address_list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}
.p-checkout_address_item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 18px;
    border: 1px solid #ccc;
    border-radius: 8px;
    cursor: pointer;
}
.p-checkout_address_item input[type="radio"] {
    margin-top: 3px;
}
.p-checkout_address_body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 1.4rem;
    line-height: 1.6;
}

/* お届け先を分ける（複数配送） */
.p-checkout_multiple_item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}
.p-checkout_multiple_thum {
    flex: 0 0 90px;
}
.p-checkout_multiple_thum img {
    width: 100%;
    border-radius: 6px;
}
@media only screen and (max-width: 750px) {
    .p-checkout_ship {
        padding: 15px;
    }
    .p-checkout_zip input[type="text"] {
        max-width: 140px;
    }
}

/* ============================================================
   本文ブロック series_group（見出し付き階層／参照「商品シリーズ」節）
   body_blocks 内に置くため、全幅グレー帯(::after)と過剰paddingを打ち消し、
   本文コンテンツの流れに馴染ませる。項目カードは参照 .p-products_series_list を流用。
   ============================================================ */
.c-editor_series_group.p-products_series {
    padding: 0 0 10px;
}
.c-editor_series_group.p-products_series::after {
    display: none;
}
.c-editor_series_group.p-products_series section {
    margin-bottom: 40px;
}
.c-editor_series_group.p-products_series section:last-child {
    margin-bottom: 0;
}
/* サムネイル無し項目はテキスト部を全幅にして余白の空きを防ぐ */
.p-products_series_list .item.no-thum a {
    display: block;
}
.p-products_series_list .item.no-thum a .textbody {
    width: 100%;
}

/* ===== 布団のお直しフォーム：お直しの製品（種類×サイズ×枚数・複数行） ===== */
.js-hide { display: none !important; }
#futon-rows .futon-row {
    position: relative;
    padding: 16px 0;
    border-bottom: 1px dashed #d9d2c7;
}
#futon-rows .futon-row:first-child { padding-top: 0; }
.futon-detail { margin-top: 14px; }
.futon-note {
    margin: 0 0 6px;
    font-size: 13px;
    color: #6b5f4d;
}
.futon-note:empty { display: none; }
.futon-note-caution { margin: 0 0 10px; font-size: 13px; }
/* お直しの製品：種類ごとの補足案内（羽毛布団の誘導・送料の目安） */
.futon-note-info {
    margin-top: 6px;
    margin-bottom: 10px;
    font-size: 1.4rem;
    line-height: 1.6;
}
.futon-note-info a {
    color: #ed8783;
    text-decoration: underline;
}
.futon-note-info a:hover {
    text-decoration: none;
}
/* お直しの製品 上限到達時の案内。
   .attention02 のフォントサイズ指定は別の階層に scoped されており、
   この位置（.input_box 直下）には効かないため個別に指定する */
#futon-row-limit {
    margin-top: 12px;
    font-size: 1.4rem;
    line-height: 1.6;
}
@media only screen and (max-width: 750px) {
    .futon-note-info { font-size: 1.3rem; }
    #futon-row-limit {
        margin-top: 10px;
        font-size: 1.3rem;
    }
}
.futon-sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 8px;
}
.futon-size-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.futon-size-item label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.futon-num {
    min-width: 56px;
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}
.futon-size-item .unit { font-size: 13px; }
.btn-add-row,
.btn-remove-row {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 14px;
    cursor: pointer;
    background: #fff;
}
.btn-add-row {
    margin-top: 14px;
    border: 1px solid #c8a06a;
    color: #a97b3c;
}
.btn-add-row:hover { background: #faf5ec; }
.btn-remove-row-wrap { margin-top: 10px; text-align: right; }
.btn-remove-row {
    padding: 5px 14px;
    border: 1px solid #d0805f;
    color: #c05a37;
    font-size: 13px;
}
.btn-remove-row:hover { background: #fbeee9; }
.futon-error {
    margin-top: 10px;
    color: #c0392b;
    font-size: 14px;
    font-weight: bold;
}

/* =========================================================================
   商品一覧 絞り込み機能 追加スタイル（additive / 既存ルールは変更しない）
   ※ このブロックを style-add.css の末尾に貼り付けてください
   ========================================================================= */

/* 絞り込みボックスの開閉（既存は search_btn 側のみ is-opened 指定のため box 側を追加） */
.p-products_goods_search_box.is-opened { display: block; }

/* 絞り込みで非表示にする商品カード */
.p-products_goods_list .item.is-hidden { display: none; }

/* 選択中の条件バー（件数 + チップ） */
.p-products_goods_selected {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.p-products_goods_selected .count {
  font-size: 1.6rem;
  font-weight: 700;
  color: #955234;
  margin-right: 0.5rem;
}
.p-products_goods_selected .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.3rem 0.2rem 1rem;
  border: 1px solid #955234;
  border-radius: 50px;
  background-color: #fff;
  color: #955234;
  font-size: 1.4rem;
}
.p-products_goods_selected .chip button {
  width: 1.8rem;
  height: 1.8rem;
  border: 0;
  border-radius: 50%;
  background-color: #955234;
  color: #fff;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.p-products_goods_selected .clear_all {
  border: 0;
  background: none;
  color: #ed8783;
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
@media only screen and (max-width: 767px) {
  .p-products_goods_selected .count { font-size: 1.4rem; }
  .p-products_goods_selected .chip { font-size: 1.3rem; }
}

/* 該当なしメッセージ */
.p-products_goods_empty {
  display: none;
  padding: 5rem 2rem;
  text-align: center;
  font-size: 1.6rem;
  color: #666;
}
.p-products_goods_empty.is-shown { display: block; }
@media only screen and (max-width: 767px) {
  .p-products_goods_empty { padding: 3rem 1rem; font-size: 1.4rem; }
}

/* ============================================================
   注文入力画面：郵便番号欄に検索ボタンを追加
   ・会員登録フォームの .input_zip / .zip-btn と同じ見た目に統一
   ・checkout.php は .c-form 系のスコープ外のため、同等スタイルをここに追記
   ============================================================ */
.p-checkout_field .input_zip {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
/* EC-CUBE の郵便番号フィールドは type="tel" で描画されるため text と両方を対象にする
   （参照デザインの checkout.php は type="text" 決め打ちだった） */
.p-checkout_field .input_zip input[type="text"],
.p-checkout_field .input_zip input[type="tel"] {
    max-width: 306px;
}
@media only screen and (max-width: 750px) {
    .p-checkout_field .input_zip input[type="text"],
    .p-checkout_field .input_zip input[type="tel"] {
        max-width: 160px;
    }
}
.p-checkout_field .input_zip input[type="button"] {
    margin-left: 10px;
    width: 128px;
    height: 50px;
    border-radius: 4px;
    background-color: #ed8783;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
@media only screen and (max-width: 750px) {
    .p-checkout_field .input_zip input[type="button"] {
        height: 40px;
        margin-left: 5px;
        font-size: 1.3rem;
        width: 100px;
    }
}
.p-checkout_field .input_zip input[type="button"]:hover {
    opacity: .7;
}

/* 修正シート No.135: 記事下部の公式SNSリンク。
   参照サイトの style.css には .instagram / .youtube の背景色指定が無く、
   白文字だけになって読めないため当方で追加する（.x/.facebook/.line は参照側にあり）。 */
.c-sns_share dd ul li a.instagram {
    background: linear-gradient(45deg, #f9ed32 0%, #ee2a7b 50%, #002aff 100%);
}
.c-sns_share dd ul li a.youtube {
    background-color: #ff0000;
}

/* 修正シート: お問い合わせ完了画面「ご返信までの目安」の強調ブロック。
   参照デモ(contact/complete.php)にマークアップだけあり CSS が無いため、こちらで見た目を付ける。 */
.p-complete_reply {
    margin: 24px 0;
    padding: 18px 20px;
    background: #fff6f6;
    border: 2px solid #d9534f;
    border-radius: 6px;
}
.p-complete_reply_label {
    display: inline-block;
    margin-bottom: 8px;
    padding: 2px 10px;
    background: #d9534f;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    border-radius: 3px;
}
.p-complete_reply_text {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.7;
}
.p-complete_reply_text strong {
    color: #d9534f;
    font-weight: 700;
    background: linear-gradient(transparent 60%, #ffe9a8 60%);
    padding: 0 2px;
}
@media only screen and (max-width: 750px) {
    .p-complete_reply { padding: 14px 15px; }
    .p-complete_reply_text { font-size: 1.4rem; }
}

/* ===========================
   SBPSクレジット決済画面
   （API型・3Dセキュア2.0）
   ※プラグイン標準テンプレートはBootstrap前提のため
     必要なレイアウトを補完する
=========================== */

body.other_page .ec-role {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

body.other_page .ec-pageHeader {
    margin: 60px 0 40px;
    text-align: center;
}
@media only screen and (max-width: 750px) {
    body.other_page .ec-pageHeader {
        margin: 30px 0 25px;
    }
}

body.other_page .ec-pageHeader h1 {
    font-family: "Zen Maru Gothic", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝体", "Yu Mincho", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.3;
    color: #955234;
}
@media only screen and (max-width: 750px) {
    body.other_page .ec-pageHeader h1 {
        font-size: 2rem;
    }
}

#credit-form {
    max-width: 1000px;
    margin: 0 auto 80px;
    padding: 0 20px;
}
@media only screen and (max-width: 750px) {
    #credit-form {
        margin-bottom: 40px;
    }
}

/* 入力ブロック */
#credit-form .ec-rectHeading {
    padding: 40px;
    border: 1px solid #ccc;
    border-radius: 16px;
    background-color: #fff;
}
@media only screen and (max-width: 750px) {
    #credit-form .ec-rectHeading {
        padding: 20px;
        border-radius: 10px;
    }
}

#credit-form .ec-rectHeading > h2 {
    margin-bottom: 25px;
    padding-bottom: 8px;
    border-bottom: 1px solid #955234;
    font-family: "Zen Maru Gothic", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝体", "Yu Mincho", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.3;
    color: #955234;
}
@media only screen and (max-width: 750px) {
    #credit-form .ec-rectHeading > h2 {
        margin-bottom: 20px;
        font-size: 1.8rem;
    }
}

/* ラベル */
#credit-form .ec-label {
    display: block;
    margin-bottom: 8px;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.4;
}
@media only screen and (max-width: 750px) {
    #credit-form .ec-label {
        margin-bottom: 5px;
        font-size: 1.4rem;
    }
}

#credit-form .ec-rectHeading > .row > .ec-label {
    flex: 0 0 100%;
    width: 100%;
    margin-bottom: 12px;
}

/* Bootstrapグリッドの代替 */
/* 「カード名義人(ローマ字)」は姓の下だけに (例: TARO YAMADA) の注記が入るため、
   flex-end だと注記の分だけ名の入力枠が上にずれる。上端で揃える。
   カード番号欄は #sbps_card_no 側で center を指定しているので影響しない。 */
#credit-form .row {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 25px;
}
@media only screen and (max-width: 750px) {
    #credit-form .row {
        margin-bottom: 20px;
    }
}

#credit-form .row:last-child {
    margin-bottom: 0;
}

#credit-form .col-auto {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 8px;
    font-size: 1.6rem;
    color: #999;
}

#credit-form .col-md-3 {
    flex: 0 0 auto;
    width: 240px;
    margin-right: 30px;
}
@media only screen and (max-width: 750px) {
    #credit-form .col-md-3 {
        width: 100%;
        margin: 0 0 15px;
    }
    #credit-form .col-md-3:last-child {
        margin-bottom: 0;
    }
}

/* カード番号（4分割） */
#credit-form #sbps_card_no {
    align-items: center;
    margin-bottom: 0;
}

#credit-form #sbps_card_no .col-auto {
    margin-right: 8px;
}

#credit-form #sbps_card_no input[type="text"] {
    width: 100px;
    padding: 0 10px;
    border-radius: 4px;
    text-align: center;
    font-family: "Roboto", sans-serif;
    font-size: 1.8rem;
    letter-spacing: .08em;
}
@media only screen and (max-width: 750px) {
    /* 固定幅では狭い端末で溢れるため可変幅に切り替える
       .col-auto は 入力欄→ハイフン→入力欄… の順で並ぶため
       奇数番目（入力欄）のみ伸縮させる */
    #credit-form #sbps_card_no {
        flex-wrap: nowrap;
    }
    #credit-form #sbps_card_no .col-auto {
        margin-right: 4px;
    }
    #credit-form #sbps_card_no .col-auto:last-child {
        margin-right: 0;
    }
    #credit-form #sbps_card_no .col-auto:nth-child(odd) {
        flex: 1 1 0%;
        min-width: 0;
    }
    #credit-form #sbps_card_no .col-auto:nth-child(even) {
        flex: 0 0 auto;
    }
    #credit-form #sbps_card_no input[type="text"] {
        width: 100%;
        min-width: 0;
        padding: 0 2px;
        font-size: 1.6rem;
        letter-spacing: 0;
    }
}

/* 入力欄共通 */
#credit-form input[type="text"] {
    height: 50px;
    padding: 0 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    font-size: 1.4rem;
}
@media only screen and (max-width: 750px) {
    #credit-form input[type="text"] {
        height: 44px;
        padding: 0 15px;
    }
}

/* セレクト（有効期限） */
#credit-form .input-group {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

#credit-form .input-group > span {
    margin: 0 4px;
    color: #999;
}

#credit-form select {
    min-width: 100px;
    height: 50px;
    padding: 0 35px 0 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    background-image: linear-gradient(45deg, transparent 50%, #000 50%), linear-gradient(135deg, #000 50%, transparent 50%);
    background-position: right 19px center, right 14px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    font-size: 1.4rem;
    cursor: pointer;
}
@media only screen and (max-width: 750px) {
    #credit-form select {
        min-width: 90px;
        height: 44px;
        padding: 0 30px 0 10px;
        background-position: right 15px center, right 10px center;
    }
}

#credit-form .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 補足テキスト（例: TARO YAMADA） */
#credit-form .col-md-3 > span {
    display: block;
    margin-top: 5px;
    font-size: 1.3rem;
    color: #666;
}
@media only screen and (max-width: 750px) {
    #credit-form .col-md-3 > span {
        font-size: 1.2rem;
    }
}

/* ボタン */
#credit-form .ec-totalBox__btn {
    margin-top: 40px;
    text-align: center;
}
@media only screen and (max-width: 750px) {
    #credit-form .ec-totalBox__btn {
        margin-top: 30px;
    }
}

#credit-form .ec-blockBtn--action {
    display: block;
    width: 100%;
    max-width: 400px;
    height: 72px;
    margin: 0 auto;
    border-radius: 50px;
    background-color: #e39c3c;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    cursor: pointer;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
@media only screen and (max-width: 750px) {
    #credit-form .ec-blockBtn--action {
        max-width: 100%;
        height: 60px;
        font-size: 1.6rem;
    }
}

#credit-form .ec-blockBtn--action:hover {
    opacity: .7;
}

#credit-form .ec-blockBtn--cancel {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 400px;
    height: 56px;
    margin: 15px auto 0;
    border: 1px solid #955234;
    border-radius: 50px;
    background-color: #fff;
    color: #955234;
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none;
    opacity: 1;
}
@media only screen and (max-width: 750px) {
    #credit-form .ec-blockBtn--cancel {
        max-width: 100%;
        height: 50px;
        margin-top: 10px;
        font-size: 1.5rem;
    }
}

#credit-form .ec-blockBtn--cancel:hover {
    background-color: #955234;
    color: #fff;
}

/* ==========================================================================
   商品一覧：リスト表示（3本線）のSP崩れ対応
   style.css の .layout_listing はサムネイルが flex:0 0 340px 固定のため、
   SPでは画像が画面幅を占有しテキストが1文字幅に潰れる。SP用に上書きする。
   ========================================================================== */
@media only screen and (max-width: 750px) {
    .p-products_goods_list.layout_listing .item {
        margin: 0 0 15px;
    }

    .p-products_goods_list.layout_listing .item:last-child {
        margin-bottom: 0;
    }

    .p-products_goods_list.layout_listing .item a {
        align-items: flex-start;
    }

    .p-products_goods_list.layout_listing .item a .c-thum {
        flex: 0 0 40%;
        width: 40%;
        margin: 0 15px 0 0;
        border-radius: 10px;
    }

    .p-products_goods_list.layout_listing .item a .textbody {
        flex: 1 1 auto;
        width: auto;
        max-width: 100%;
        min-width: 0;
    }

    .p-products_goods_list.layout_listing .item a .textbody .category {
        margin-bottom: 3px;
    }

    .p-products_goods_list.layout_listing .item a .textbody .aside {
        display: block;
    }

    .p-products_goods_list.layout_listing .item a .textbody .aside .star {
        margin-top: 3px;
    }

    .p-products_goods_list.layout_listing .item a .textbody .aside .more {
        margin-top: 5px;
    }
}

/* ==========================================================================
   商品詳細：3週間無料お試しトライアルCTAの配置変更
   カート内の要素をflex化し、.trial を order:-1 でサイズ選択UIより上に移動。
   ※ マークアップ（Twig）を触らずに順序だけを入れ替えるため、
     テンプレート側で .trial を先頭に移動した場合もそのまま先頭表示になる。
   ========================================================================== */
.p-products_detail .column_right .cart,
.p-products_detail .column_right .cart form {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.p-products_detail .column_right .cart .trial {
    -webkit-order: -1;
    -ms-flex-order: -1;
    order: -1;
    margin: 0 0 25px;
}

@media only screen and (max-width: 750px) {
    .p-products_detail .column_right .cart .trial {
        margin-bottom: 20px;
    }
}

/* ==========================================================================
   ご注文手続き: お届け日時（カレンダー）／ギフト包装・のしつけ
   参照サイト assets/css/style-add.css から該当ブロックのみ同期。
   .p-checkout_note は当方の既存定義（軽減税率などの補足文）と衝突するため取り込まない。
   ========================================================================== */

.p-checkout_info {
    margin-bottom: 20px;
    font-size: 1.5rem;
}
@media only screen and (max-width: 750px) {
    .p-checkout_info {
        margin-bottom: 15px;
        font-size: 1.4rem;
    }
}

.p-checkout_datetime {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 30px;
}
.p-checkout_datetime .p-checkout_field {
    margin-bottom: 0;
}
@media only screen and (max-width: 750px) {
    .p-checkout_datetime {
        display: block;
    }
    .p-checkout_datetime .p-checkout_field {
        margin-bottom: 15px;
    }
    .p-checkout_datetime .p-checkout_field:last-child {
        margin-bottom: 0;
    }
}
/* ===========================
   ご注文手続き ギフト包装・のしつけ
=========================== */

.p-gift {
    border: 1px solid #ccc;
    border-radius: 16px;
    overflow: hidden;
}
@media only screen and (max-width: 750px) {
    .p-gift {
        border-radius: 10px;
    }
}

.p-gift_head {
    display: block;
    width: 100%;
    padding: 22px 60px 22px 30px;
    background-color: #f8f8f8;
    color: #955234;
    font-size: 2rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    position: relative;
}
.p-gift_head:hover {
    background-color: #fae9e8;
    opacity: 1;
}
.p-gift_head::before,
.p-gift_head::after {
    content: " ";
    display: block;
    border-radius: 10px;
    background-color: #ed8783;
    position: absolute;
    top: 50%;
}
.p-gift_head::before {
    width: 18px;
    height: 2px;
    margin-top: -1px;
    right: 30px;
}
.p-gift_head::after {
    width: 2px;
    height: 18px;
    margin-top: -9px;
    right: 38px;
}
.p-gift_head.is-opened::after {
    display: none;
}
@media only screen and (max-width: 750px) {
    .p-gift_head {
        padding: 15px 45px 15px 19px;
        font-size: 1.7rem;
    }
    .p-gift_head::before {
        width: 16px;
        right: 18px;
    }
    .p-gift_head::after {
        height: 16px;
        margin-top: -8px;
        right: 25px;
    }
}

.p-gift_body {
    display: none;
    padding: 10px 30px 35px;
}
.p-gift_body.is-opened {
    display: block;
}
.p-gift_body p {
    margin-bottom: 10px;
    font-size: 1.6rem;
    line-height: 1.7;
}
.p-gift_body p:last-child {
    margin-bottom: 0;
}
@media only screen and (max-width: 750px) {
    .p-gift_body {
        padding: 5px 19px 25px;
    }
    .p-gift_body p {
        font-size: 1.4rem;
    }
}

.p-gift_heading {
    margin: 30px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #955234;
    color: #955234;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.4;
}
@media only screen and (max-width: 750px) {
    .p-gift_heading {
        margin: 25px 0 10px;
        font-size: 1.6rem;
    }
}

.p-gift_subbar {
    margin: 25px 0 12px !important;
    padding: 7px 20px;
    background-color: #f8f8f8;
    color: #955234;
    font-size: 1.6rem !important;
    font-weight: 700;
}
@media only screen and (max-width: 750px) {
    .p-gift_subbar {
        margin: 20px 0 10px !important;
        padding: 6px 15px;
        font-size: 1.4rem !important;
    }
}

.p-gift_attention {
    color: #e6342e;
    font-size: 1.5rem !important;
}
@media only screen and (max-width: 750px) {
    .p-gift_attention {
        font-size: 1.3rem !important;
    }
}

.p-gift_examples {
    padding: 15px 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fff;
    font-size: 1.5rem !important;
    line-height: 1.9 !important;
}
@media only screen and (max-width: 750px) {
    .p-gift_examples {
        padding: 12px 15px;
        font-size: 1.3rem !important;
    }
}

.p-gift_template {
    margin: 15px 0;
    padding: 20px 25px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f8f8f8;
}
.p-gift_template pre {
    margin: 0;
    font-family: inherit;
    font-size: 1.5rem;
    line-height: 1.9;
    white-space: pre-wrap;
}
@media only screen and (max-width: 750px) {
    .p-gift_template {
        margin: 12px 0;
        padding: 15px;
    }
    .p-gift_template pre {
        font-size: 1.4rem;
        line-height: 1.8;
    }
}

.p-gift_btn {
    margin: 20px 0 5px;
    text-align: center;
}
.p-gift_btn button {
    width: 100%;
    max-width: 360px;
    padding: 14px 20px;
    border-radius: 50px;
    background-color: #e39c3c;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    cursor: pointer;
}
.p-gift_btn button:hover {
    background-color: #ed8783;
    opacity: 1;
}
@media only screen and (max-width: 750px) {
    .p-gift_btn button {
        padding: 12px 20px;
        font-size: 1.4rem;
    }
}

.p-gift_figures {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    margin: 15px 0;
}
@media only screen and (max-width: 750px) {
    .p-gift_figures {
        gap: 10px;
        margin: 12px 0;
    }
}

.p-gift_figure {
    display: block;
    width: 240px;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    text-decoration: none;
    color: #000;
}
.p-gift_figure .image {
    display: block;
    position: relative;
}
.p-gift_figure .image::after {
    content: " ";
    display: block;
    padding-bottom: 71.4285714286%;
}
.p-gift_figure .image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.p-gift_figure .caption {
    display: block;
    padding: 8px 10px;
    border-top: 1px solid #ccc;
    background-color: #faf1e5;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}
@media only screen and (max-width: 750px) {
    .p-gift_figure {
        width: calc(50% - 5px);
    }
    .p-gift_figure .caption {
        padding: 6px 8px;
        font-size: 1.2rem;
    }
}

a.p-gift_figure {
    opacity: 1;
}
a.p-gift_figure:hover {
    border-color: #ed8783;
}
a.p-gift_figure:hover .caption {
    background-color: #fae9e8;
    color: #ed8783;
}

.p-gift_figures.col-1 .p-gift_figure {
    width: 300px;
}
.p-gift_figures.col-3 .p-gift_figure {
    width: 200px;
}
@media only screen and (max-width: 750px) {
    .p-gift_figures.col-1 .p-gift_figure {
        width: 100%;
        max-width: 260px;
    }
    .p-gift_figures.col-3 .p-gift_figure {
        width: calc(33.3333% - 7px);
    }
    .p-gift_figures.col-3 .p-gift_figure .caption {
        padding: 5px 3px;
        font-size: 1.1rem;
    }
}
/* お届け日（カレンダー入力）の補足テキスト */
.p-checkout_hint {
    margin-top: 8px;
    font-size: 1.3rem;
    line-height: 1.6;
    color: #666;
}
@media only screen and (max-width: 750px) {
    .p-checkout_hint {
        margin-top: 6px;
        font-size: 1.2rem;
    }
}
.p-checkout_datetime .p-checkout_field input[type="date"] {
    min-width: 240px;
}
@media only screen and (max-width: 750px) {
    .p-checkout_datetime .p-checkout_field input[type="date"] {
        min-width: 100%;
    }
}

/* お届け日：範囲外入力時のメッセージ */
.p-date_error {
    display: none;
    margin-top: 8px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #e6342e;
}
.p-date_error.is-shown {
    display: block;
}
@media only screen and (max-width: 750px) {
    .p-date_error {
        margin-top: 6px;
        font-size: 1.3rem;
    }
}


/* ===========================
   ご注文手続き（非会員）ご案内ブロック
=========================== */

.p-guest_info {
    margin: 40px 0 20px;
    padding: 30px 40px;
    border: 1px solid #e0d5c0;
    border-radius: 16px;
    background-color: #fcfbec;
    font-size: 1.6rem;
    line-height: 1.8;
}
.p-guest_info p {
    margin-bottom: 10px;
}
.p-guest_info p:last-child {
    margin-bottom: 0;
}
@media only screen and (max-width: 750px) {
    .p-guest_info {
        margin: 25px 0 15px;
        padding: 20px;
        border-radius: 10px;
        font-size: 1.4rem;
        line-height: 1.7;
    }
    .p-guest_info p {
        margin-bottom: 8px;
    }
}

.p-guest_info .sub_heading {
    margin-top: 25px;
    padding: 3px 10px;
    display: inline-block;
    background-color: #f5eeda;
    color: #955234;
    font-weight: 700;
}
@media only screen and (max-width: 750px) {
    .p-guest_info .sub_heading {
        margin-top: 18px;
    }
}

.p-guest_info .mark_line {
    padding-bottom: 1px;
    border-bottom: 1px solid #ed8783;
}

.p-guest_info .link {
    font-weight: 700;
}
.p-guest_info .link a {
    color: #ed8783;
    text-decoration: none;
    opacity: 1;
}
.p-guest_info .link a::after {
    content: "≫";
    margin-left: 2px;
    font-size: 1.2rem;
}
.p-guest_info .link a:hover {
    text-decoration: underline;
}

.p-guest_required {
    margin-bottom: 30px;
    font-size: 1.5rem;
    font-weight: 700;
}
.p-guest_required .p-login_required {
    margin-right: 5px;
}
@media only screen and (max-width: 750px) {
    .p-guest_required {
        margin-bottom: 20px;
        font-size: 1.3rem;
    }
}

/* 非会員向けご案内：ドメイン受信設定アコーディオン */
.p-guest_acc {
    margin-top: 25px;
    border: 1px solid #e0d5c0;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
}
@media only screen and (max-width: 750px) {
    .p-guest_acc {
        margin-top: 18px;
    }
}

.p-guest_acc_head {
    display: block;
    width: 100%;
    padding: 12px 50px 12px 20px;
    background-color: #f5eeda;
    color: #955234;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
    position: relative;
}
.p-guest_acc_head:hover {
    opacity: 1;
    background-color: #f0e5c9;
}
.p-guest_acc_head::before,
.p-guest_acc_head::after {
    content: " ";
    display: block;
    border-radius: 10px;
    background-color: #955234;
    position: absolute;
    top: 50%;
}
.p-guest_acc_head::before {
    width: 14px;
    height: 2px;
    margin-top: -1px;
    right: 20px;
}
.p-guest_acc_head::after {
    width: 2px;
    height: 14px;
    margin-top: -7px;
    right: 26px;
}
.p-guest_acc_head.is-opened::after {
    display: none;
}
@media only screen and (max-width: 750px) {
    .p-guest_acc_head {
        padding: 10px 40px 10px 15px;
        font-size: 1.4rem;
    }
    .p-guest_acc_head::before {
        right: 15px;
    }
    .p-guest_acc_head::after {
        right: 21px;
    }
}

.p-guest_acc_body {
    display: none;
    padding: 18px 20px;
}
.p-guest_acc_body.is-opened {
    display: block;
}
.p-guest_acc_body .note {
    font-size: 1.4rem;
    color: #666;
}
@media only screen and (max-width: 750px) {
    .p-guest_acc_body {
        padding: 15px;
    }
    .p-guest_acc_body .note {
        font-size: 1.3rem;
    }
}

.p-guest_acc_subheading {
    margin-top: 20px !important;
    padding-bottom: 5px;
    border-bottom: 1px solid #955234;
    color: #955234;
    font-weight: 700;
}
@media only screen and (max-width: 750px) {
    .p-guest_acc_subheading {
        margin-top: 15px !important;
    }
}

.p-guest_acc_links {
    margin: 5px 0 15px;
}
.p-guest_acc_links li {
    margin-bottom: 5px;
    padding-left: 18px;
    position: relative;
}
.p-guest_acc_links li:last-child {
    margin-bottom: 0;
}
.p-guest_acc_links li::before {
    content: "●";
    color: #ed8783;
    font-size: 1.2rem;
    position: absolute;
    top: 2px;
    left: 0;
}
.p-guest_acc_links li a {
    color: #ed8783;
    text-decoration: underline;
    opacity: 1;
}
.p-guest_acc_links li a:hover {
    text-decoration: none;
}

/* ==========================================================================
   ご注文手続き：利用ポイント（会員のみ / checkout.php）
   ========================================================================== */
.p-point_balance {
    margin-bottom: 12px;
    font-size: 1.6rem;
}
.p-point_balance .num {
    font-family: "Roboto", sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: #955234;
}
@media only screen and (max-width: 750px) {
    .p-point_balance {
        margin-bottom: 10px;
        font-size: 1.4rem;
    }
    .p-point_balance .num {
        font-size: 2rem;
    }
}

.p-point_use {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.p-point_input {
    margin-right: 12px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.p-point_input input[type="number"] {
    width: 140px;
    height: 50px;
    padding: 0 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    font-family: "Roboto", sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    text-align: right;
}
.p-point_input input[type="number"]:disabled {
    background-color: #f8f8f8;
    color: #999;
}
.p-point_input .unit {
    margin-left: 8px;
    font-size: 1.6rem;
    font-weight: 700;
}
@media only screen and (max-width: 750px) {
    .p-point_input input[type="number"] {
        width: 110px;
        height: 44px;
        font-size: 1.6rem;
    }
    .p-point_input .unit {
        font-size: 1.4rem;
    }
}

.p-point_btn {
    padding: 0 24px;
    height: 50px;
    border: 1px solid #ed8783;
    border-radius: 50px;
    background-color: #ed8783;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    cursor: pointer;
}
.p-point_btn:hover {
    opacity: .7;
}
.p-point_btn:disabled {
    border-color: #ccc;
    background-color: #ccc;
    cursor: not-allowed;
    opacity: 1;
}
@media only screen and (max-width: 750px) {
    .p-point_btn {
        padding: 0 18px;
        height: 44px;
        font-size: 1.4rem;
    }
}

.p-point_all {
    margin-top: 10px;
}
.p-point_all button {
    padding: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #955234;
    text-decoration: underline;
    cursor: pointer;
}
.p-point_all button:hover {
    text-decoration: none;
    opacity: 1;
}
@media only screen and (max-width: 750px) {
    .p-point_all button {
        font-size: 1.4rem;
    }
}

.p-point_error {
    display: none;
    margin-top: 10px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #e6342e;
}
.p-point_error.is-shown {
    display: block;
}
@media only screen and (max-width: 750px) {
    .p-point_error {
        font-size: 1.3rem;
    }
}

/* 注文サマリーのポイント値引き行 */
.p-cart_summary_row.point .p-cart_summary_value {
    color: #e6342e;
}

/* ==========================================================================
   ご注文手続き：登録済みお届け先の選択（会員のみ / checkout.php）
   ========================================================================== */
.p-address_book {
    margin-bottom: 30px;
}
@media only screen and (max-width: 750px) {
    .p-address_book {
        margin-bottom: 25px;
    }
}

.p-address_book_lead {
    margin-bottom: 15px;
    font-size: 1.5rem;
}
@media only screen and (max-width: 750px) {
    .p-address_book_lead {
        margin-bottom: 12px;
        font-size: 1.4rem;
    }
}

.p-address_list {
    margin-bottom: 15px;
}
.p-address_item {
    position: relative;
    margin-bottom: 10px;
}
.p-address_item:last-child {
    margin-bottom: 0;
}
.p-address_item label {
    display: block;
    cursor: pointer;
}

/* 登録済みお届け先の削除ボタン（修正シート66）。
   カードの右上に小さく置く。選ぶ操作の邪魔にならないよう控えめな見た目にする。 */
.p-address_delete {
    position: absolute;
    top: 12px;
    right: 14px;
    padding: 4px 12px;
    border: 1px solid #c9c9c9;
    border-radius: 4px;
    background-color: #fff;
    color: #777;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
}
.p-address_delete:hover {
    border-color: #b34a4a;
    color: #b34a4a;
}
@media screen and (max-width: 750px) {
    .p-address_delete {
        top: 10px;
        right: 10px;
        /* スマホは指で押すため、押せる大きさを確保する */
        min-height: 32px;
        padding: 6px 14px;
    }
}

.p-address_item input[type="radio"] + .p-address_card {
    display: block;
    padding: 18px 20px 18px 55px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fff;
    line-height: 1.6;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
@media only screen and (max-width: 750px) {
    .p-address_item input[type="radio"] + .p-address_card {
        padding: 14px 15px 14px 42px;
        font-size: 1.4rem;
    }
}
.p-address_item input[type="radio"] + .p-address_card::before {
    top: 50%;
    left: 18px;
    margin-top: -15px;
}
@media only screen and (max-width: 750px) {
    .p-address_item input[type="radio"] + .p-address_card::before {
        left: 13px;
        margin-top: -10px;
        top: 50%;
    }
}
.p-address_item input[type="radio"] + .p-address_card::after {
    top: 50%;
    left: 26px;
    margin-top: -7px;
}
@media only screen and (max-width: 750px) {
    .p-address_item input[type="radio"] + .p-address_card::after {
        left: 18px;
        margin-top: -5px;
    }
}
.p-address_item input[type="radio"]:checked + .p-address_card {
    border-color: #ed8783;
    background-color: #fff9f8;
}

.p-address_card .tag {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 10px;
    border-radius: 4px;
    background-color: #955234;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
}
@media only screen and (max-width: 750px) {
    .p-address_card .tag {
        font-size: 1.2rem;
    }
}
.p-address_card .name {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
}
@media only screen and (max-width: 750px) {
    .p-address_card .name {
        font-size: 1.6rem;
    }
}
.p-address_card .addr {
    display: block;
    margin-top: 4px;
}
.p-address_card .tel {
    display: block;
    margin-top: 4px;
    font-size: 1.5rem;
    color: #4d4d4d;
}
@media only screen and (max-width: 750px) {
    .p-address_card .tel {
        font-size: 1.3rem;
    }
}
.p-address_card.is-new {
    font-size: 1.6rem;
    font-weight: 700;
}
@media only screen and (max-width: 750px) {
    .p-address_card.is-new {
        font-size: 1.5rem;
    }
}

.p-address_manage {
    text-align: right;
    font-size: 1.5rem;
    font-weight: 700;
}
.p-address_manage a {
    color: #955234;
    text-decoration: underline;
    opacity: 1;
}
.p-address_manage a:hover {
    text-decoration: none;
    color: #ed8783;
}
@media only screen and (max-width: 750px) {
    .p-address_manage {
        font-size: 1.4rem;
    }
}

/* 注文手続き画面の会員特典表示 */
.p-cart_summary .p-cart_member_badge {
    margin-bottom: 20px;
}

/* [hidden] が display 指定で打ち消されないようにする */
.p-cart_summary_row[hidden],
.p-address_input[hidden] {
    display: none;
}

/* ===========================
   お支払い方法：カードブランド表記
=========================== */

.p-checkout_card_brand {
    margin: 8px 0 0 35px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
@media only screen and (max-width: 750px) {
    .p-checkout_card_brand {
        margin: 6px 0 0 30px;
    }
}

.p-checkout_card_brand li {
    flex: 0 0 auto;
    margin: 0 6px 6px 0;
    padding-left: 0;
}
.p-checkout_card_brand li::before {
    display: none;
}
@media only screen and (max-width: 750px) {
    .p-checkout_card_brand li {
        margin: 0 5px 5px 0;
    }
}

.p-checkout_card_brand li img {
    display: block;
    width: 46px;
    height: auto;
}
@media only screen and (max-width: 750px) {
    .p-checkout_card_brand li img {
        width: 40px;
    }
}

/* 支払方法の下に出す注記（代金引換の手数料・利用できない場合）。
   ラジオのラベル文字の位置に合わせて左を空ける（カードブランドと同じ 35px / SP 30px）。 */
.p-checkout_payment_note {
    margin: 4px 0 0 35px;
    font-size: 13px;
    line-height: 1.6;
    color: #666;
}
@media only screen and (max-width: 750px) {
    .p-checkout_payment_note {
        margin: 4px 0 0 30px;
        font-size: 12px;
    }
}

/* ===========================
   チェックボックス表示のフォールバック
   ※style.cssは input[type=checkbox] を display:none にし、
     隣接する span へ独自のボックスを描画する前提。
     span を持たないマークアップ（EC-CUBE標準テンプレート等）では
     チェックボックスが不可視になるため、標準表示に戻す
=========================== */

input[type="checkbox"]:not(:has(+ span)) {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: -3px;
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
    accent-color: #ed8783;
    cursor: pointer;
}
@media only screen and (max-width: 750px) {
    input[type="checkbox"]:not(:has(+ span)) {
        width: 16px;
        height: 16px;
        margin-right: 6px;
    }
}

.p-login_remember label {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
}

/* ============================================================
   注文手続き画面：導線の整理
   ・「カートへ戻る」…主動線（確認する）と競合しないようテキストリンク相当まで弱める
   ・「変更」…何を変更するのかがわかるラベル＋鉛筆アイコンのテキストリンクへ
   ・配送方法…選択肢が1件のときはセレクトを出さずテキストで表示
   （EC-CUBE側は scripts-add.js でマークアップを整えたうえで、以下のスタイルが当たる）
   ============================================================ */

/* --- 戻る導線 --------------------------------------------------- */
.p-checkout_form > .c-btn.back {
    margin-top: 25px;
    text-align: center;
}
@media only screen and (max-width: 750px) {
    .p-checkout_form > .c-btn.back {
        margin-top: 20px;
    }
}
.p-checkout_form > .c-btn.back a {
    display: inline-block;
    padding: 0 0 0 16px;
    border-radius: 0;
    background-color: transparent;
    color: #955234;
    font-size: 1.5rem;
    font-weight: 500;
    text-decoration: underline;
    position: relative;
}
@media only screen and (max-width: 750px) {
    .p-checkout_form > .c-btn.back a {
        font-size: 1.4rem;
    }
}
.p-checkout_form > .c-btn.back a::after {
    content: " ";
    display: block;
    width: 6px;
    height: 10px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M1 0 0 1l4 4-4 4 1 1 5-5z' fill='%23955234'/%3E%3C/svg%3E") center/6px auto no-repeat;
    position: absolute;
    top: 50%;
    left: 0;
    right: auto;
    margin-top: -5px;
    transform: scale(-1, 1);
}
.p-checkout_form > .c-btn.back a:hover {
    background-color: transparent;
    color: #ed8783;
    text-decoration: none;
}

/* --- 変更リンク（お客様情報／お届け先） ------------------------- */
.p-checkout_heading_row {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #ed8783;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.p-checkout_heading_row .p-checkout_heading {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.p-checkout_edit_link {
    flex: 0 0 auto;
    display: inline-block;
    width: auto;
    margin-left: 15px;
    padding: 0 0 0 20px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23955234'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") 0 center/14px auto no-repeat;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    color: #955234;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    text-decoration: underline;
    cursor: pointer;
}
@media only screen and (max-width: 750px) {
    .p-checkout_edit_link {
        margin-left: 10px;
        padding-left: 18px;
        background-size: 12px auto;
        font-size: 1.3rem;
    }
}
.p-checkout_edit_link:hover {
    color: #ed8783;
    text-decoration: none;
    opacity: 1;
}

/* --- 選択肢が1件の項目（配送方法など）のテキスト表示 ------------- */
.p-checkout_static {
    font-weight: 700;
}
.p-checkout_static + .p-checkout_hint {
    margin-top: 4px;
}
.p-checkout_choice_hidden {
    display: none;
}

/* 上の .p-checkout_choice_hidden は当サイトでは効かないため詳細度を上げて上書きする。
   当サイトの style-add.css には参照デザインに無い
   「.p-checkout_form .select_wrap { display: block }」（No.48 ゲスト決済フロー）があり、
   詳細度 (0,2,0) が .p-checkout_choice_hidden (0,1,0) に勝つため、
   配送方法が1件でもセレクトが表示されたままになっていた。 */
.p-checkout_form .select_wrap.p-checkout_choice_hidden {
    display: none;
}

/* ============================================================
   非会員：お客様情報の編集パネル（.non-customer-edit）
   EC-CUBE標準の ec-* クラスで出力されるが、このテーマは EC-CUBE の
   default.css を読み込まないため素のままでは崩れる。テーマ側の見た目を当てる。
   ・display は指定しない（JSの show() / hide() と競合させない）
   ============================================================ */
.ec-borderedDefs {
    margin-top: 5px;
    border-top: 1px solid #ccc;
}
.ec-borderedDefs dl {
    padding: 15px 0;
    border-bottom: 1px solid #ccc;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
@media only screen and (max-width: 750px) {
    .ec-borderedDefs dl {
        padding: 12px 0;
        display: block;
    }
}
.ec-borderedDefs dt {
    flex: 0 0 200px;
    padding: 10px 15px 0 0;
}
@media only screen and (max-width: 750px) {
    .ec-borderedDefs dt {
        padding: 0 0 8px;
    }
}
.ec-borderedDefs dd {
    flex: 1 1 100%;
    max-width: 100%;
}
.ec-borderedDefs dd > * + * {
    margin-top: 10px;
}

.ec-label {
    font-weight: 700;
}
.ec-required {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    background-color: #ed8783;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 500;
    vertical-align: 2px;
}

.customer-form {
    display: block;
}
.customer-form input[type="text"] {
    width: 100%;
    border-radius: 4px;
}

.ec-halfInput {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
.ec-halfInput .customer-form {
    flex: 1 1 50%;
    max-width: 50%;
}
.ec-halfInput .customer-form + .customer-form {
    margin-left: 10px;
}

.ec-zipInput {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.ec-zipInput > span:first-child {
    flex: 0 0 auto;
    margin-right: 8px;
}
.ec-zipInput .customer-form {
    flex: 0 1 240px;
}

.ec-telInput .customer-form {
    max-width: 300px;
}

.ec-select select {
    min-width: 211px;
    height: 40px;
    padding: 0 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    font-size: 1.4rem;
}
@media only screen and (max-width: 750px) {
    .ec-select select {
        height: 36px;
        padding: 0 10px;
    }
}

/* OK / キャンセル（button要素なので .c-btn a のスタイルが当たらない） */
#customer-ok,
#customer-cancel {
    display: inline-block;
}
#customer-ok {
    margin-right: 10px;
}
#customer-ok > button,
#customer-cancel > button {
    padding: 12px 34px;
    border-radius: 100px;
    color: #fff;
    font-weight: 700;
}
@media only screen and (max-width: 750px) {
    #customer-ok > button,
    #customer-cancel > button {
        padding: 10px 24px;
        font-size: 1.4rem;
    }
}
#customer-ok > button {
    background-color: #e39c3c;
}
#customer-cancel > button {
    background-color: #b5b5b5;
}

/* 未入力チェック（インラインJSが付与するクラス） */
.customer-form input.is-empty-error,
.customer-form select.is-empty-error {
    background-color: #fff5f9;
}
.customer-empty-error {
    line-height: 1.4;
}

/* ============================================================
   トライアルフォーム：硬さの目安体重表示＋「硬さの選び方」モーダル
   ・各硬さの選択肢に目安体重を併記（常時表示。全商品で共通のため隠さない）
   ・詳しい解説は見出し直下のリンクからモーダルで1箇所に集約
   ============================================================ */

/* 選択肢ラベル内の体重目安
   ・ラベルは flex アイテムのため、幅によって商品名の折り返し位置が変わり
     バッジが同一行に残るかどうかが選択肢ごとにバラつく。
     常に商品名の下（独立行）へ置いて挙動を統一する。
   ・そのためラベル自体も全幅にして、右マージンによる幅の揺れを取り除く */
.c-form .input_box .input_item .checkbox_list label:has(.katasa_guide) {
    width: 100%;
    margin-right: 0;
}
.c-form .checkbox_list label span .katasa_guide {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin: 4px 0 0;
    padding: 1px 8px;
    border-radius: 4px;
    background-color: #f5eeda;
    color: #955234;
    font-family: "Roboto", sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    font-style: normal;
    line-height: 1.6;
    white-space: nowrap;
}
@media only screen and (max-width: 750px) {
    .c-form .checkbox_list label span .katasa_guide {
        margin-top: 3px;
        font-size: 1.2rem;
    }
}

/* 商品見出しの補足（※画像は厚さ14.5cmのイメージです 等） */
.input_item.with-image .product_content .heading .heading_note {
    display: block;
    margin-top: 3px;
    font-size: 1.2rem;
    font-weight: 500;
    font-style: normal;
    line-height: 1.5;
    color: #777;
}
@media only screen and (max-width: 750px) {
    .input_item.with-image .product_content .heading .heading_note {
        font-size: 1.1rem;
    }
}

/* モーダル起動ボタン（中央配置・枠付きで気づかれやすくする） */
.p-katasa_link {
    margin: 0 0 25px;
    text-align: center;
}
@media only screen and (max-width: 750px) {
    .p-katasa_link {
        margin-bottom: 18px;
    }
}
.p-katasa_link button {
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    padding: 13px 26px;
    border: 1px solid #955234;
    border-radius: 50px;
    background-color: #faf1e5;
    color: #955234;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    opacity: 1;
    cursor: pointer;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
@media only screen and (max-width: 750px) {
    .p-katasa_link button {
        width: 100%;
        padding: 12px 18px;
        font-size: 1.4rem;
    }
}
.p-katasa_link button:hover {
    background-color: #955234;
    color: #fff;
    opacity: 1;
}
/* ?バッジ（ホバー時は色を反転） */
.p-katasa_link button .c-katasa_more {
    flex: 0 0 auto;
    display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    margin-left: 10px;
    border-radius: 50%;
    background-color: #955234;
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
@media only screen and (max-width: 750px) {
    .p-katasa_link button .c-katasa_more {
        width: 20px;
        height: 20px;
        margin-left: 8px;
        font-size: 1.2rem;
    }
}
.p-katasa_link button:hover .c-katasa_more {
    background-color: #fff;
    color: #955234;
}

/* モーダル本体（元要素の非表示は style.css の .c-modal_wrap が担当） */
.c-katasa_modal .katasa_label {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 14px;
    border-radius: 50px;
    background-color: #955234;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
}
@media only screen and (max-width: 750px) {
    .c-katasa_modal .katasa_label {
        margin-bottom: 8px;
        font-size: 1.2rem;
    }
}
.c-katasa_modal .katasa_heading {
    margin-bottom: 18px;
    font-family: "Zen Maru Gothic", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝体", "Yu Mincho", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.3;
    color: #955234;
}
@media only screen and (max-width: 750px) {
    .c-katasa_modal .katasa_heading {
        margin-bottom: 15px;
        font-size: 2rem;
    }
}
.c-katasa_modal .katasa_lead {
    margin-bottom: 25px;
    font-size: 1.6rem;
    line-height: 1.8;
}
.c-katasa_modal .katasa_lead strong {
    color: #955234;
    font-weight: 700;
}
@media only screen and (max-width: 750px) {
    .c-katasa_modal .katasa_lead {
        margin-bottom: 20px;
        font-size: 1.4rem;
    }
}

/* 硬さ早見表 */
.c-katasa_modal .katasa_table {
    width: 100%;
    margin-bottom: 25px;
    border-collapse: collapse;
    border: 1px solid #ccc;
    font-size: 1.5rem;
    line-height: 1.6;
}
@media only screen and (max-width: 750px) {
    .c-katasa_modal .katasa_table {
        margin-bottom: 20px;
        font-size: 1.3rem;
    }
}
.c-katasa_modal .katasa_table th,
.c-katasa_modal .katasa_table td {
    padding: 12px 15px;
    border: 1px solid #ccc;
    vertical-align: middle;
}
@media only screen and (max-width: 750px) {
    .c-katasa_modal .katasa_table th,
    .c-katasa_modal .katasa_table td {
        padding: 9px 8px;
    }
}
.c-katasa_modal .katasa_table thead th {
    background-color: #955234;
    color: #fff;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}
.c-katasa_modal .katasa_table tbody th {
    width: 50%;
    background-color: #faf1e5;
    color: #955234;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}
.c-katasa_modal .katasa_table tbody td {
    width: 50%;
    font-family: "Roboto", sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    color: #955234;
    text-align: center;
    white-space: nowrap;
}
@media only screen and (max-width: 750px) {
    .c-katasa_modal .katasa_table tbody td {
        font-size: 1.5rem;
    }
}

/* 本文段落・小見出し */
.c-katasa_modal p {
    margin: 0 0 12px;
    font-size: 1.5rem;
    line-height: 1.8;
}
@media only screen and (max-width: 750px) {
    .c-katasa_modal p {
        font-size: 1.4rem;
        line-height: 1.7;
    }
}
.c-katasa_modal .katasa_subheading {
    margin: 28px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #955234;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.4;
    color: #955234;
}
@media only screen and (max-width: 750px) {
    .c-katasa_modal .katasa_subheading {
        margin: 22px 0 10px;
        font-size: 1.6rem;
    }
}

.c-katasa_modal .katasa_note {
    margin: 20px 0;
    padding: 16px 20px;
    border-radius: 8px;
    background-color: #fae9e8;
    font-size: 1.5rem;
    line-height: 1.7;
}
@media only screen and (max-width: 750px) {
    .c-katasa_modal .katasa_note {
        padding: 12px 15px;
        font-size: 1.3rem;
    }
}
.c-katasa_modal .katasa_tel {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.7;
}
@media only screen and (max-width: 750px) {
    .c-katasa_modal .katasa_tel {
        font-size: 1.3rem;
    }
}
.c-katasa_modal .katasa_tel .tel {
    display: inline-block;
    margin-top: 6px;
    margin-right: 12px;
    font-family: "Roboto", sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: #ed8783;
    text-decoration: none;
    line-height: 1.2;
}
@media only screen and (max-width: 750px) {
    .c-katasa_modal .katasa_tel .tel {
        font-size: 2rem;
    }
}
.c-katasa_modal .katasa_tel .time {
    font-size: 1.3rem;
    color: #4d4d4d;
}
@media only screen and (max-width: 750px) {
    .c-katasa_modal .katasa_tel .time {
        display: block;
        font-size: 1.2rem;
    }
}

/* ------------------------------------------------------------
   「硬さの選び方」モーダルの閉じる（×）ボタン
   ・style.css の .modaal-wrapper .modaal-close は存在しない画像
     （../images/common/icon/modal_close.svg）を背景に指定し、
     さらに標準の×を描く ::before / ::after を display:none にしているため
     ボタンが不可視になっている
   ・他のモーダルへ影響させないよう、JS側で付与した
     custom_class（.modaal-katasa）でスコープして×を描き直す
   ------------------------------------------------------------ */
.modaal-wrapper.modaal-katasa .modaal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: none;
    background-color: #955234;
    cursor: pointer;
    z-index: 2;
    -webkit-transition: background-color .3s ease-out;
    transition: background-color .3s ease-out;
}
@media only screen and (max-width: 750px) {
    .modaal-wrapper.modaal-katasa .modaal-close {
        top: 8px;
        right: 8px;
        width: 36px;
        height: 36px;
    }
}
.modaal-wrapper.modaal-katasa .modaal-close:hover,
.modaal-wrapper.modaal-katasa .modaal-close:focus {
    background-color: #ed8783;
}
/* ×（2本の線）を描画。style.css 側の display:none を打ち消す */
.modaal-wrapper.modaal-katasa .modaal-close::before,
.modaal-wrapper.modaal-katasa .modaal-close::after {
    content: " ";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    margin: -1px 0 0 -10px;
    border-radius: 2px;
    background-color: #fff;
}
@media only screen and (max-width: 750px) {
    .modaal-wrapper.modaal-katasa .modaal-close::before,
    .modaal-wrapper.modaal-katasa .modaal-close::after {
        width: 16px;
        margin: -1px 0 0 -8px;
    }
}
.modaal-wrapper.modaal-katasa .modaal-close::before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.modaal-wrapper.modaal-katasa .modaal-close::after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
/* ×ボタンと本文が重ならないよう右上に余白を確保 */
.modaal-wrapper.modaal-katasa .modaal-content-container {
    padding-top: 75px;
}
@media only screen and (max-width: 750px) {
    .modaal-wrapper.modaal-katasa .modaal-content-container {
        padding-top: 55px;
    }
}


/* ==========================================================================
   羽毛布団お直し 見積もりフォーム（repair/form-umou.php）
   ========================================================================== */

/* 金額が出せないときの案内文言
   .c-price は Roboto / 3.2rem の金額用スタイルなので、
   日本語の文言を入れる場合はフォントとサイズを切り替える */
.c-form .futon_info .estimation .c-price.is-message,
.c-form .futon_info .estimation .c-price.is-ng {
    display: block;
    font-family: "游ゴシック", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
}
.c-form .futon_info .estimation .c-price.is-message {
    color: #955234;
}
.c-form .futon_info .estimation .c-price.is-ng {
    color: #e6342e;
}
@media only screen and (max-width: 750px) {
    .c-form .futon_info .estimation .c-price.is-message,
    .c-form .futon_info .estimation .c-price.is-ng {
        font-size: 1.4rem;
    }
}

/* 入力内容をリセット */
.c-form .futon_info .estimation .estimation_reset {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #f0d9d8;
    text-align: center;
}
@media only screen and (max-width: 750px) {
    .c-form .futon_info .estimation .estimation_reset {
        margin-top: 15px;
        padding-top: 12px;
    }
}
.c-form .futon_info .estimation .estimation_reset_btn {
    padding: 8px 20px 8px 38px;
    border: 1px solid #955234;
    border-radius: 50px;
    background-color: #fff;
    color: #955234;
    font-size: 1.4rem;
    font-weight: 700;
    position: relative;
}
/* リロードアイコン（矢印つき）。border で描いた円弧だと矢印がなく
   「C」に見えてしまうため、SVGを埋め込んで向きが分かるようにする */
.c-form .futon_info .estimation .estimation_reset_btn::before {
    content: " ";
    display: block;
    width: 15px;
    height: 15px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23955234' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36'/%3E%3Cpolyline points='21 3 21 9 15 9'/%3E%3C/svg%3E") center / 15px auto no-repeat;
    position: absolute;
    top: 50%;
    left: 17px;
    margin-top: -7px;
}
.c-form .futon_info .estimation .estimation_reset_btn:hover {
    background-color: #955234;
    color: #fff;
    opacity: 1;
}
.c-form .futon_info .estimation .estimation_reset_btn:hover::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36'/%3E%3Cpolyline points='21 3 21 9 15 9'/%3E%3C/svg%3E");
}
@media only screen and (max-width: 750px) {
    .c-form .futon_info .estimation .estimation_reset_btn {
        padding: 7px 16px 7px 34px;
        font-size: 1.3rem;
    }
    .c-form .futon_info .estimation .estimation_reset_btn::before {
        width: 14px;
        height: 14px;
        background-size: 14px auto;
        left: 14px;
        margin-top: -7px;
    }
}

/* おまかせ生地選択時に無効化される櫻道キルト */
.c-form .input_box .input_item label.is-disabled {
    cursor: not-allowed;
}
.c-form .input_box .input_item label.is-disabled .radio_text {
    border-color: #e0e0e0;
    background-color: #f2f2f2;
    color: #aaa;
}

/* ==========================================================================
   打ち直し基本料金表（repair/form-umou.php）

   ※ この表は 13 列 × 2 段ヘッダという特殊な構成のため、専用クラス
     `.p-repair_price_table` を付けて指定を閉じている。
     共通の `.c-table_scroll` を触ると repair/form.php の価格表
     （thead を持たず tbody 内に見出し行を置く構成）に影響してしまう。
   ========================================================================== */

/* `.c-editor table { table-layout: fixed; width: 100% }` という特定商取引法ページ向けの
   SP指定が `.c-editor` 配下の全テーブルに効いてしまい、列幅指定が無視されて
   価格列が潰れ、セルからテキストがはみ出していた。この表だけ打ち消す。 */
.c-editor .p-repair_price_table > table {
    table-layout: auto;
    width: auto;
    min-width: 100%;
}
.c-editor .p-repair_price_table > table th,
.c-editor .p-repair_price_table > table td {
    width: auto;
    word-break: normal;
}

/* 生地質（行ヘッダ）は左に固定して、価格列だけ横スクロールさせる。
   thead は2段構成のため、1行目の先頭セルだけを対象にする
   （thead th:first-child では2行目の「立体キルト」にも当たってしまう） */
.p-repair_price_table > table thead tr:first-child th:first-child,
.p-repair_price_table > table tbody th {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #f8f8f8;
    border-right: 1px solid #ccc;
}
.p-repair_price_table > table thead tr:first-child th:first-child {
    z-index: 3;
}
/* 行ヘッダは幅を固定して折り返す（画面を占有させない） */
.c-editor .p-repair_price_table > table thead tr:first-child th:first-child,
.c-editor .p-repair_price_table > table tbody th {
    width: 220px;
    min-width: 220px;
    max-width: 220px;
    white-space: normal;
}
/* キルト列（thead の2行目）は最低幅を確保してテキストのはみ出しを防ぐ */
.c-editor .p-repair_price_table > table thead tr:last-child th {
    min-width: 130px;
}
/* キルト名の下に添えた縫製の説明 */
.p-repair_price_table > table thead th {
    vertical-align: bottom;
}
.p-repair_price_table > table thead th .size_s {
    display: block;
    margin-top: 4px;
    line-height: 1.35;
}
/* サイズ見出し（シングル／セミダブル／ダブル）は4列ぶんの幅があるため、
   横スクロールすると中央のラベルが画面外へ出てしまう。
   行ヘッダのすぐ右に貼り付いて追従させる */
.p-repair_price_table > table thead tr:first-child th[colspan] {
    text-align: left;
    padding-left: 0;
    padding-right: 0;
}
.p-repair_price_table > table thead tr:first-child th[colspan] .size_label {
    position: -webkit-sticky;
    position: sticky;
    left: 234px;
    display: inline-block;
    padding: 0 14px;
}

@media only screen and (max-width: 750px) {
    .c-editor .p-repair_price_table > table thead tr:first-child th:first-child,
    .c-editor .p-repair_price_table > table tbody th {
        width: 140px;
        min-width: 140px;
        max-width: 140px;
    }
    .c-editor .p-repair_price_table > table thead tr:last-child th {
        min-width: 104px;
    }
    .c-editor .p-repair_price_table > table thead tr:first-child th[colspan] .size_label {
        left: 150px;
        padding: 0 10px;
    }
}

/* 足し羽毛の料金目安テーブル（料金表とは別構成のため個別に指定） */
.c-editor .p-repair_add_down_table > table,
.c-form .p-repair_add_down_table > table {
    table-layout: auto;
    width: 100%;
    min-width: 0;
}
.p-repair_add_down_table > table th {
    text-align: left;
    white-space: normal;
}
.p-repair_add_down_table > table td {
    text-align: right;
    white-space: nowrap;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    color: #955234;
}
.p-repair_add_down_table > table thead th {
    text-align: left;
}
.p-repair_add_down_table > table thead th + th {
    text-align: right;
}
.p-repair_add_down_table > table .size_s {
    display: block;
    margin-top: 2px;
    font-size: 1.3rem;
    font-weight: 400;
    color: #666;
}
@media only screen and (max-width: 750px) {
    .p-repair_add_down_table > table .size_s {
        font-size: 1.2rem;
    }
}

/* --------------------------------------------------------------------------
   足し羽毛の料金について（開閉式）
   -------------------------------------------------------------------------- */
.c-form .c-accordion {
    margin: 30px 0;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fff;
    overflow: hidden;
}
@media only screen and (max-width: 750px) {
    .c-form .c-accordion {
        margin: 20px 0;
    }
}
.c-form .c-accordion > summary {
    padding: 18px 50px 18px 24px;
    font-size: 1.6rem;
    font-weight: 700;
    color: #955234;
    cursor: pointer;
    list-style: none;
    position: relative;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.c-form .c-accordion > summary::-webkit-details-marker {
    display: none;
}
@media only screen and (max-width: 750px) {
    .c-form .c-accordion > summary {
        padding: 14px 40px 14px 16px;
        font-size: 1.5rem;
    }
}
.c-form .c-accordion > summary:hover {
    background-color: #fff9f8;
}
/* ＋／− のアイコン */
.c-form .c-accordion > summary::before,
.c-form .c-accordion > summary::after {
    content: " ";
    display: block;
    background-color: #ed8783;
    border-radius: 2px;
    position: absolute;
    top: 50%;
    right: 24px;
}
.c-form .c-accordion > summary::before {
    width: 14px;
    height: 2px;
    margin-top: -1px;
}
.c-form .c-accordion > summary::after {
    width: 2px;
    height: 14px;
    margin-top: -7px;
    right: 30px;
}
.c-form .c-accordion[open] > summary::after {
    display: none;
}
@media only screen and (max-width: 750px) {
    .c-form .c-accordion > summary::before {
        right: 16px;
    }
    .c-form .c-accordion > summary::after {
        right: 22px;
    }
}
.c-form .c-accordion .c-accordion_body {
    padding: 0 24px 24px;
    border-top: 1px solid #eee;
    padding-top: 20px;
    font-size: 1.5rem;
}
@media only screen and (max-width: 750px) {
    .c-form .c-accordion .c-accordion_body {
        padding: 15px 16px 16px;
        font-size: 1.4rem;
    }
}

/* 足し羽毛の単価表 */
.c-form .p-repair_add_down_table {
    width: 100%;
    margin-top: 15px;
    border-collapse: collapse;
    border-top: 1px solid #ccc;
}
.c-form .p-repair_add_down_table th,
.c-form .p-repair_add_down_table td {
    padding: 12px 4px;
    border-bottom: 1px solid #ccc;
    vertical-align: middle;
    line-height: 1.4;
}
@media only screen and (max-width: 750px) {
    .c-form .p-repair_add_down_table th,
    .c-form .p-repair_add_down_table td {
        padding: 10px 2px;
    }
}
.c-form .p-repair_add_down_table th {
    text-align: left;
    font-weight: 700;
}
.c-form .p-repair_add_down_table td {
    width: 30%;
    text-align: right;
    white-space: nowrap;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    color: #955234;
}
.c-form .p-repair_add_down_table thead th,
.c-form .p-repair_add_down_table thead td {
    font-size: 1.4rem;
    font-weight: 700;
    color: #666;
}
@media only screen and (max-width: 750px) {
    .c-form .p-repair_add_down_table thead th,
    .c-form .p-repair_add_down_table thead td {
        font-size: 1.2rem;
    }
}
.c-form .p-repair_add_down_table .size_s {
    display: block;
    margin-top: 2px;
    font-size: 1.3rem;
    font-weight: 400;
    color: #666;
}
@media only screen and (max-width: 750px) {
    .c-form .p-repair_add_down_table .size_s {
        font-size: 1.2rem;
    }
}

/* --------------------------------------------------------------------------
   合計お見積もり額
   -------------------------------------------------------------------------- */
.c-form .estimation_total {
    margin: 40px auto 0;
    max-width: 530px;
    padding: 25px 30px;
    border: 2px solid #ed8783;
    border-radius: 8px;
    background-color: #fff9f8;
}
@media only screen and (max-width: 750px) {
    .c-form .estimation_total {
        margin: 30px -10px 0;
        max-width: inherit;
        padding: 20px;
    }
}
.c-form .estimation_total .c-heading_h5 {
    margin-bottom: 5px;
}
.c-form .estimation_total .c-price {
    font-size: 3.2rem;
}
@media only screen and (max-width: 750px) {
    .c-form .estimation_total .c-price {
        font-size: 2.6rem;
    }
}
.c-form .estimation_total .c-price.is-message {
    display: block;
    font-family: "游ゴシック", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
    color: #955234;
}
@media only screen and (max-width: 750px) {
    .c-form .estimation_total .c-price.is-message {
        font-size: 1.4rem;
    }
}
.c-form .estimation_total .attention {
    margin-top: 8px;
    font-size: 1.4rem;
}
@media only screen and (max-width: 750px) {
    .c-form .estimation_total .attention {
        font-size: 1.3rem;
    }
}

/* 確認画面の合計お見積もり額 */
.p-confirm_estimation_total {
    margin-top: 20px;
    padding: 20px 25px;
    border: 2px solid #ed8783;
    border-radius: 8px;
    background-color: #fff9f8;
}
@media only screen and (max-width: 750px) {
    .p-confirm_estimation_total {
        margin-top: 15px;
        padding: 15px 20px;
    }
}
.p-confirm_estimation_total .heading {
    margin-bottom: 5px;
    font-size: 1.6rem;
    font-weight: 700;
}
@media only screen and (max-width: 750px) {
    .p-confirm_estimation_total .heading {
        font-size: 1.4rem;
    }
}
.p-confirm_estimation_total .c-price {
    font-size: 3.2rem;
}
@media only screen and (max-width: 750px) {
    .p-confirm_estimation_total .c-price {
        font-size: 2.6rem;
    }
}

/* ==========================================================================
   羽毛布団のお直し：お直し例／お客様の声／よくあるご質問
   ========================================================================== */

/* 共通の開閉式（フォーム外でも使えるようスコープを分けて再定義） */
.c-accordion {
    margin: 20px 0;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fff;
    overflow: hidden;
}
.c-accordion > summary {
    padding: 16px 50px 16px 20px;
    font-size: 1.6rem;
    font-weight: 700;
    color: #955234;
    cursor: pointer;
    list-style: none;
    position: relative;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.c-accordion > summary::-webkit-details-marker {
    display: none;
}
.c-accordion > summary:hover {
    background-color: #fff9f8;
}
.c-accordion > summary::before,
.c-accordion > summary::after {
    content: " ";
    display: block;
    background-color: #ed8783;
    border-radius: 2px;
    position: absolute;
    top: 50%;
    right: 24px;
}
.c-accordion > summary::before {
    width: 14px;
    height: 2px;
    margin-top: -1px;
}
.c-accordion > summary::after {
    width: 2px;
    height: 14px;
    margin-top: -7px;
    right: 30px;
}
.c-accordion[open] > summary::after {
    display: none;
}
.c-accordion .c-accordion_body {
    padding: 18px 20px 20px;
    border-top: 1px solid #eee;
    font-size: 1.5rem;
}
.c-accordion .c-accordion_body > *:first-child {
    margin-top: 0;
}
.c-accordion .c-accordion_body > *:last-child {
    margin-bottom: 0;
}
@media only screen and (max-width: 750px) {
    .c-accordion {
        margin: 15px 0;
    }
    .c-accordion > summary {
        padding: 13px 40px 13px 15px;
        font-size: 1.5rem;
        line-height: 1.4;
    }
    .c-accordion > summary::before {
        right: 16px;
    }
    .c-accordion > summary::after {
        right: 22px;
    }
    .c-accordion .c-accordion_body {
        padding: 15px;
        font-size: 1.4rem;
    }
}

/* ---------------- お直し例 ---------------- */
.p-repair_case_list {
    margin-top: 40px;
}
@media only screen and (max-width: 750px) {
    .p-repair_case_list {
        margin-top: 25px;
    }
}
.p-repair_case {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #ccc;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    /* 横長の比較画像なので、本文が長いときに下側が空かないよう中央で揃える */
    align-items: center;
}
.p-repair_case:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
@media only screen and (max-width: 750px) {
    .p-repair_case {
        margin-bottom: 25px;
        padding-bottom: 25px;
        display: block;
    }
}
/* Before/After の比較画像は横長のため、通常のサムネイルより広く取る */
.p-repair_case_image {
    flex: 0 0 46%;
    margin-right: 35px;
}
@media only screen and (max-width: 750px) {
    .p-repair_case_image {
        margin: 0 0 15px;
    }
}
.p-repair_case_image img {
    width: 100%;
    height: auto;
    border-radius: 16px;
}
@media only screen and (max-width: 750px) {
    .p-repair_case_image img {
        border-radius: 10px;
    }
}
.p-repair_case_body {
    flex: 1 1 100%;
    max-width: 100%;
}
.p-repair_case_area {
    margin-bottom: 8px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #955234;
}
@media only screen and (max-width: 750px) {
    .p-repair_case_area {
        font-size: 1.3rem;
    }
}
.p-repair_case_body .c-heading_h3 {
    font-size: 2rem;
    line-height: 1.5;
}
@media only screen and (max-width: 750px) {
    .p-repair_case_body .c-heading_h3 {
        font-size: 1.6rem;
    }
}

/* お直し内容・料金の内訳テーブル */
.p-repair_case_table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
    border-top: 1px solid #ccc;
    font-size: 1.5rem;
}
@media only screen and (max-width: 750px) {
    .p-repair_case_table {
        margin-top: 15px;
        font-size: 1.4rem;
    }
}
.p-repair_case_table th,
.p-repair_case_table td {
    padding: 10px 4px;
    border-bottom: 1px solid #ccc;
    vertical-align: top;
    line-height: 1.5;
}
.p-repair_case_table th {
    width: 42%;
    text-align: left;
    font-weight: 500;
    color: #666;
}
.p-repair_case_table td {
    text-align: right;
}
.p-repair_case_table .total th,
.p-repair_case_table .total td {
    border-bottom: 0;
    font-weight: 700;
    color: #955234;
}
.p-repair_case_table .total td {
    font-family: "Roboto", sans-serif;
    font-size: 2rem;
    white-space: nowrap;
}
@media only screen and (max-width: 750px) {
    .p-repair_case_table .total td {
        font-size: 1.8rem;
    }
}
.p-repair_case_table .size_s {
    margin-left: 3px;
    font-family: "游ゴシック", YuGothic, "Hiragino Sans", sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
}

/* ---------------- お客様の声 ---------------- */
.p-repair_voice_list {
    margin-top: 40px;
    display: -webkit-flex;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}
@media only screen and (max-width: 750px) {
    .p-repair_voice_list {
        margin-top: 25px;
        display: block;
    }
}
.p-repair_voice_item {
    padding: 25px 30px 30px;
    border-radius: 16px;
    background-color: #fff;
}
@media only screen and (min-width: 751px) {
    .p-repair_voice_item {
        width: 48.1818181818%;
        margin: 30px 3.6363636364% 0 0;
    }
    .p-repair_voice_item:nth-child(-n+2) {
        margin-top: 0;
    }
    .p-repair_voice_item:nth-child(2n) {
        margin-right: 0;
    }
}
@media only screen and (max-width: 750px) {
    .p-repair_voice_item {
        margin-bottom: 15px;
        padding: 20px;
        border-radius: 10px;
    }
    .p-repair_voice_item:last-child {
        margin-bottom: 0;
    }
}
.p-repair_voice_area {
    margin-bottom: 6px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #955234;
}
@media only screen and (max-width: 750px) {
    .p-repair_voice_area {
        font-size: 1.3rem;
    }
}
.p-repair_voice_item .c-heading_h3 {
    margin-bottom: 12px;
    font-size: 1.8rem;
    line-height: 1.5;
}
@media only screen and (max-width: 750px) {
    .p-repair_voice_item .c-heading_h3 {
        font-size: 1.6rem;
    }
}
.p-repair_voice_body {
    font-size: 1.5rem;
}
@media only screen and (max-width: 750px) {
    .p-repair_voice_body {
        font-size: 1.4rem;
    }
}
.p-repair_voice_body p {
    margin: 0 0 10px;
}
.p-repair_voice_item .c-accordion {
    margin-bottom: 0;
    background-color: #fafafa;
}
.p-repair_voice_item .c-accordion > summary {
    font-size: 1.4rem;
    padding: 12px 40px 12px 15px;
}
.p-repair_voice_item .c-accordion > summary::before {
    right: 16px;
}
.p-repair_voice_item .c-accordion > summary::after {
    right: 22px;
}
.p-repair_voice_item .c-accordion .c-accordion_body {
    padding: 5px 15px 15px;
}
.p-repair_voice_item .p-repair_case_table {
    margin-top: 0;
    border-top: 0;
}

/* ---------------- よくあるご質問 ---------------- */
.p-repair_faq {
    margin-top: 40px;
}
@media only screen and (max-width: 750px) {
    .p-repair_faq {
        margin-top: 25px;
    }
}
.p-repair_faq_item > summary {
    padding-left: 56px;
    font-size: 1.7rem;
    line-height: 1.5;
}
@media only screen and (max-width: 750px) {
    .p-repair_faq_item > summary {
        padding-left: 44px;
        font-size: 1.5rem;
    }
}
/* Q アイコン */
.p-repair_faq_item > summary .q,
.p-repair_faq_item > summary::first-letter {
    font-inherit: inherit;
}
.p-repair_faq_item {
    position: relative;
}
.p-repair_faq_item > summary {
    background-image: none;
}
.p-repair_faq_item > summary > span.q {
    display: none;
}
.p-repair_faq_item::before {
    content: "Q";
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #ed8783;
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    position: absolute;
    top: 14px;
    left: 18px;
    z-index: 1;
}
@media only screen and (max-width: 750px) {
    .p-repair_faq_item::before {
        width: 24px;
        height: 24px;
        font-size: 1.3rem;
        top: 12px;
        left: 13px;
    }
}
.p-repair_faq_item .c-accordion_body {
    padding-left: 56px;
    background-color: #f8f8f8;
    position: relative;
}
@media only screen and (max-width: 750px) {
    .p-repair_faq_item .c-accordion_body {
        padding-left: 44px;
    }
}
.p-repair_faq_item .c-accordion_body::before {
    content: "A";
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #955234;
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    position: absolute;
    top: 16px;
    left: 18px;
}
@media only screen and (max-width: 750px) {
    .p-repair_faq_item .c-accordion_body::before {
        width: 24px;
        height: 24px;
        font-size: 1.3rem;
        top: 14px;
        left: 13px;
    }
}
.p-repair_faq_item .c-accordion_body p {
    margin: 0 0 10px;
}
.p-repair_faq_item .c-accordion_body p:last-child {
    margin-bottom: 0;
}

/* 柄見本（生地と柄のラインナップ） */
.p-repair_lineup {
    margin: 30px 0 0;
    text-align: center;
}
@media only screen and (max-width: 750px) {
    .p-repair_lineup {
        margin-top: 20px;
    }
}
.p-repair_lineup img {
    width: 100%;
    max-width: 1100px;
    height: auto;
    border-radius: 16px;
}
@media only screen and (max-width: 750px) {
    .p-repair_lineup img {
        max-width: 500px;
        border-radius: 10px;
    }
}

/* --------------------------------------------------------------------------
   ページ内ナビ
   -------------------------------------------------------------------------- */
.p-repair_pagenav {
    /* 直後の .c-attention_bar は上に60px（SPは30px）はみ出す背景を持ち、
       さらに margin が相殺されるため、その分を上回る余白を取る */
    margin: 30px 0 110px;
}
@media only screen and (max-width: 750px) {
    .p-repair_pagenav {
        margin: 20px 0 70px;
    }
}
/* 通常項目は塗りつぶしを外し、CTAだけ目立たせる */
.p-repair_pagenav a {
    padding: 10px 34px 10px 20px;
    margin: 5px;
    background-color: #fff;
    color: #ed8783;
    font-size: 1.5rem;
    position: relative;
}
@media only screen and (max-width: 750px) {
    .p-repair_pagenav a {
        padding: 8px 28px 8px 14px;
        margin: 4px;
        font-size: 1.3rem;
    }
}
/* ページ下部へ移動することが伝わるよう下向きの矢印を添える */
.p-repair_pagenav a::after {
    content: " ";
    display: block;
    width: 9px;
    height: 6px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23ed8783' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1 6 6.5 11 1'/%3E%3C/svg%3E") center / 9px auto no-repeat;
    position: absolute;
    top: 50%;
    right: 16px;
    margin-top: -3px;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
@media only screen and (max-width: 750px) {
    .p-repair_pagenav a::after {
        right: 12px;
    }
}
.p-repair_pagenav a:hover {
    background-color: #ed8783;
    color: #fff;
}
.p-repair_pagenav a:hover::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1 6 6.5 11 1'/%3E%3C/svg%3E");
    -webkit-transform: translate(0, 2px);
    transform: translate(0, 2px);
}
.p-repair_pagenav a.is-cv {
    border-color: #e39c3c;
    background-color: #e39c3c;
    color: #fff;
    font-weight: 700;
}
.p-repair_pagenav a.is-cv::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1 6 6.5 11 1'/%3E%3C/svg%3E");
}
.p-repair_pagenav a.is-cv:hover {
    background-color: #fff;
    color: #e39c3c;
}
.p-repair_pagenav a.is-cv:hover::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23e39c3c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1 6 6.5 11 1'/%3E%3C/svg%3E");
}

/* 固定ヘッダーに隠れないよう、アンカー先に余白を確保する */
#feature,
#reason,
#lineup,
#price,
#anshin,
#case,
#voice,
#faq,
#items {
    scroll-margin-top: 160px;
}
@media only screen and (max-width: 750px) {
    #feature,
    #reason,
    #lineup,
    #price,
    #anshin,
    #case,
    #voice,
    #faq,
    #items {
        scroll-margin-top: 60px;
    }
}

/* 選べるキルト縫製について：構造図（PCは3列、SPは縦積み） */
.p-repair_kiruto_figs {
    margin-top: 18px;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}
.p-repair_kiruto_figs figure {
    width: 32%;
    margin: 0;
    padding: 0 8px;
    text-align: center;
    box-sizing: border-box;
}
/* 他の img 指定（max-width:100%）に負けるため詳細度を上げる。
   原寸354pxを超えて引き伸ばすとぼやけるので上限を設ける */
.c-form .p-repair_kiruto_figs figure img {
    width: 100%;
    max-width: 354px;
    height: auto;
}
/* スマホでは3列だと図中の文字が読めないため縦に並べる */
@media only screen and (max-width: 750px) {
    .p-repair_kiruto_figs {
        margin-top: 14px;
        display: block;
    }
    .p-repair_kiruto_figs figure {
        width: 100%;
        margin-bottom: 12px;
        padding: 0;
    }
    .p-repair_kiruto_figs figure:last-child {
        margin-bottom: 0;
    }
    .c-form .p-repair_kiruto_figs figure img {
        max-width: 300px;
    }
}

/* 布団のタグ写真：3つのファイル選択を1ブロックにまとめたため、
   .add_file に付いている区切り線（border-top）を打ち消す */
.c-form .input_item .textbody > .add_file {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
/* 1枚目のファイル選択も2枚目以降と同じ間隔にそろえる */
.c-form .input_item .textbody > .add_file > input[type="file"] {
    display: block;
    margin-bottom: 10px;
}
.c-form .input_item .textbody > .add_file .add_file_btn {
    margin-top: 5px;
}

/* 入力エラーで入力画面に戻ったときの「選択済みの写真」表示
   （<input type="file"> は値を復元できないため、名前だけ出して hidden で持ち回る） */
.add_file_kept {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -4px 0 10px;
    font-size: 1.4rem;
}
.add_file_kept_name {
    word-break: break-all;
}
.add_file_kept_name::before {
    content: " ";
    display: inline-block;
    vertical-align: -3px;
    width: 13px;
    height: 16px;
    margin-right: 6px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20' fill='none' stroke='%23955234' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 1H2.5A1.5 1.5 0 0 0 1 2.5v15A1.5 1.5 0 0 0 2.5 19h11a1.5 1.5 0 0 0 1.5-1.5V6.5z'/%3E%3Cpolyline points='9.5 1 9.5 6.5 15 6.5'/%3E%3C/svg%3E") center / 13px auto no-repeat;
}
.add_file_kept_remove {
    padding: 2px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #666;
    cursor: pointer;
}
.add_file_kept_remove:hover {
    background-color: #f5f5f5;
}

/* ▼ 2026-08-22 追記: 修正シート63・77（デモ side の style-add.css から差分マージ） ▼ */

/* ==========================================================================
   スマホでの入力欄の自動ズーム対策

   iOS（iPhone / iPad）は font-size が16px未満の入力欄をタップすると
   ページを自動的に拡大する。拡大後は元の倍率に戻らないため、フォームを
   上から入力していくと途中から画面が拡大されたままになる。
   Android・PCでは発生しない、iOS固有の挙動。

   しきい値は16pxちょうどで、font-size の値そのものが16px以上である
   必要がある（transform や zoom では回避できない）。
   html の font-size 変更の影響を受けないよう px で直接指定する。

   既存に `.c-form .input_box .input_item input[type=text]`（クラス3＋属性1）
   という詳細度の高い指定があるため、それを上回るセレクタで指定する。
   ========================================================================== */
@media only screen and (max-width: 750px) {
    html body .c-form .input_box .input_item input[type="text"],
    html body input[type="text"],
    html body .c-form .input_box .input_item input[type="tel"],
    html body input[type="tel"],
    html body .c-form .input_box .input_item input[type="email"],
    html body input[type="email"],
    html body .c-form .input_box .input_item input[type="url"],
    html body input[type="url"],
    html body .c-form .input_box .input_item input[type="number"],
    html body input[type="number"],
    html body .c-form .input_box .input_item input[type="password"],
    html body input[type="password"],
    html body .c-form .input_box .input_item input[type="search"],
    html body input[type="search"],
    html body .c-form .input_box .input_item input[type="date"],
    html body input[type="date"],
    html body .c-form .input_box .input_item input[type="month"],
    html body input[type="month"],
    html body .c-form .input_box .input_item input[type="time"],
    html body input[type="time"],
    html body .c-form .input_box .input_item input[type="datetime-local"],
    html body input[type="datetime-local"],
    html body .c-form .input_box .input_item select,
    html body .c-form .input_box .input_item textarea,
    html body select,
    html body textarea {
        font-size: 16px;
    }
    /* カートの数量欄は SP 専用指定（.p-cart_qty_ctrl input[type="number"]）が
       同じメディアクエリ内の後方にあるため、個別に上書きする */
    html body .p-cart_qty_ctrl input[type="number"] {
        font-size: 16px;
    }
}


/* ============================================================
   注文手続き（/cart/checkout/・/cart/checkout-guest/）
   SP時：ご注文内容（明細）を「注文内容を確認する」ボタンの上へ
   ------------------------------------------------------------
   .p-checkout_form と <form> の box をなくして、
   .p-checkout_section ／ .p-cart_side ／ .p-login_submit ／
   .c-btn.back を .p-cart_wrap 直下の flex アイテムとして並べ替える。
   ※ カートページ（.p-cart_items 側）には影響しない
   ============================================================ */
@media only screen and (max-width: 750px) {
    .p-cart_wrap {
        display: flex;
        flex-direction: column;
        /* PC指定（align-items: flex-start / gap: 60px）を打ち消す。
           打ち消さないと各アイテムがコンテンツ幅に縮んでしまう */
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
    }
    .p-cart_items,
    .p-cart_side {
        flex: 0 1 auto;
        min-width: 0;
    }
    .p-checkout_form,
    .p-checkout_form > form {
        display: contents;
    }
    .p-checkout_section {
        order: 1;
    }
    .p-checkout_form ~ .p-cart_side {
        order: 2;
        margin-top: 0;
    }
    .p-checkout_form ~ .p-cart_side .p-cart_summary {
        margin-bottom: 0;
    }
    .p-login_submit {
        order: 3;
    }
    .p-checkout_form > .c-btn.back {
        order: 4;
    }
}

/* ==========================================================================
   ご注文手続き画面の注記（申し送り 0823注文画面）
   ・配送についての注意（お届け先セクションの下）
   ・お支払い方法の注釈（※1／※2）
   ★既存の .p-checkout_note は <p> 用の定義なので、<ul> のときだけ箇条書きの体裁にする。
   ========================================================================== */

ul.p-checkout_note {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
ul.p-checkout_note > li {
    position: relative;
    padding-left: 1em;
    font-size: 1.3rem;
    line-height: 1.8;
    color: #777;
}
ul.p-checkout_note > li::before {
    content: "・";
    position: absolute;
    left: 0;
}

.p-checkout_payment_notes {
    margin: 16px 0 0;
    padding: 14px 16px;
    list-style: none;
    background-color: #f7f7f7;
    border-radius: 6px;
}
.p-checkout_payment_notes > li {
    display: flex;
    font-size: 1.3rem;
    line-height: 1.8;
    color: #666;
}
.p-checkout_payment_notes > li + li {
    margin-top: 4px;
}
.p-checkout_payment_notes .mark {
    flex: 0 0 auto;
    margin-right: 4px;
}
.p-checkout_payment_notes a {
    color: #c1272d;
    text-decoration: underline;
}

@media screen and (max-width: 750px) {
    ul.p-checkout_note > li {
        font-size: 1.2rem;
    }
    .p-checkout_payment_notes {
        padding: 12px 12px;
    }
    .p-checkout_payment_notes > li {
        font-size: 1.2rem;
    }
}




/* ============================================================
   購入ガイド配下：ページ回遊ナビ（p-guide_nav）

   購入ガイド配下の各ページ下部に置く、兄弟ページへの回遊ナビ。
   c-sub_navi（ピンクのピル型）はページ内アンカーで使用中のため、
   役割を分けて別デザインとする。
   ・見出しは両サイドに細線を引いたセンター配置
   ・リンクは白カードを3列（SPは1列）で並べ、右側に丸矢印
   ・直下に置かれるピンクのCVボックスと干渉しないよう、
     背景色は敷かず白カード＋細ボーダーで軽く見せる
============================================================ */

.p-guide_nav {
    margin: 60px 0 40px;
}
.p-guide_nav .p-guide_nav_heading {
    margin: 0 0 25px;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Zen Maru Gothic", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝体", "Yu Mincho", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.3;
    color: #955234;
    text-align: center;
}
.p-guide_nav .p-guide_nav_heading::before,
.p-guide_nav .p-guide_nav_heading::after {
    content: " ";
    display: block;
    flex: 1 1 auto;
    max-width: 80px;
    height: 1px;
    background-color: #d8bfa8;
}
.p-guide_nav .p-guide_nav_heading::before {
    margin-right: 20px;
}
.p-guide_nav .p-guide_nav_heading::after {
    margin-left: 20px;
}
.p-guide_nav .p-guide_nav_list {
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 12px;
}
.p-guide_nav .p-guide_nav_list a {
    width: calc((100% - 24px) / 3);
    min-height: 68px;
    padding: 14px 46px 14px 22px;
    border: 1px solid #e0d3c0;
    border-radius: 12px;
    background-color: #fff;
    display: -webkit-flex;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.4;
    color: #000;
    text-decoration: none;
    opacity: 1;
    position: relative;
}
.p-guide_nav .p-guide_nav_list a::after {
    content: " ";
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: url("../img/common/icon/link_arrow01.svg") center/4px auto no-repeat;
    background-color: #ed8783;
    position: absolute;
    top: 50%;
    right: 14px;
    margin-top: -11px;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.p-guide_nav .p-guide_nav_list a:hover {
    border-color: #ed8783;
    background-color: #fff9f8;
    color: #ed8783;
}
.p-guide_nav .p-guide_nav_list a:hover::after {
    background-color: #955234;
}

@media only screen and (max-width: 750px) {
    .p-guide_nav {
        margin: 35px 0 25px;
    }
    .p-guide_nav .p-guide_nav_heading {
        margin-bottom: 15px;
        font-size: 1.8rem;
    }
    .p-guide_nav .p-guide_nav_heading::before,
    .p-guide_nav .p-guide_nav_heading::after {
        max-width: 40px;
    }
    .p-guide_nav .p-guide_nav_heading::before {
        margin-right: 12px;
    }
    .p-guide_nav .p-guide_nav_heading::after {
        margin-left: 12px;
    }
    .p-guide_nav .p-guide_nav_list {
        gap: 8px;
    }
    .p-guide_nav .p-guide_nav_list a {
        width: 100%;
        min-height: 54px;
        padding: 12px 38px 12px 16px;
        border-radius: 8px;
        font-size: 1.5rem;
    }
    .p-guide_nav .p-guide_nav_list a::after {
        width: 18px;
        height: 18px;
        right: 10px;
        margin-top: -9px;
    }
}


/* ============================================================
   お気に入り一覧：EC-CUBE実装版の「お気に入りから削除」対応

   モック側は  <div class="p-favorites_remove"><form><button>
   EC-CUBE側は <a class="ec-closeBtn--circle p-favorite_delete">
   とマークアップが異なり、かつ .item の先頭に出力されるため、
   membership.css の .p-favorites_remove が一切当たらず、
   商品画像の上に素のテキストリンクとして表示されてしまう。

   EC-CUBE側は token / data-method="delete" が必要なため <a> のまま
   にしておき、CSSで見た目と位置をモックに合わせる。
   :has() で「削除リンクを持つ item」に限定しているので、
   商品一覧など他の p-products_goods_list には影響しない。
============================================================ */

.p-products_goods_list .item:has(.p-favorite_delete) {
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
}
.p-products_goods_list .item > a:not(.p-favorite_delete) {
    order: 1;
}
.p-products_goods_list .item .p-favorite_delete {
    order: 2;
    margin-top: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    width: auto;
    height: auto;
    display: block;
    text-align: right;
    font-size: 1.3rem;
    line-height: 1.4;
    color: #999;
    text-decoration: underline;
    opacity: 1;
    cursor: pointer;
}
.p-products_goods_list .item .p-favorite_delete span {
    text-decoration: underline;
}
.p-products_goods_list .item .p-favorite_delete:hover,
.p-products_goods_list .item .p-favorite_delete:hover span {
    color: #ed8783;
}
/* 画像ホバーのズームが削除リンクにも効かないようにする */
.p-products_goods_list .item .p-favorite_delete:hover .c-thum img {
    transform: none;
    opacity: 1;
}

@media only screen and (max-width: 750px) {
    .p-products_goods_list .item .p-favorite_delete {
        margin-top: 8px;
        font-size: 1.2rem;
    }
}


/* ============================================================
   商品詳細：お気に入りボタン（EC-CUBE実装版）の対応

   style.css のお気に入りボタンの指定は、すべて
   　.p-products_detail .column_right .other_link .like button
   と <button> 要素に限定されている。

   モック（products/detail.php）は
   　<button class="like-btn">…</button>
   EC-CUBE実装版は、削除にCSRFトークンと data-method="delete" が
   必要なため
   　<a class="like-btn current" href="…/delete_favorite/19">…</a>
   と <a> で出力される。このため既存の指定が一切当たらず、
   ピンク枠のボタンにならず、下線付きのテキストリンクとして表示される。

   対応：同じ指定を a.like-btn にも当てる。
   <a> 特有の下線・文字色・テキスト揃えも打ち消す。
   Twig（EC-CUBE側のマークアップ）は変更不要。
============================================================ */

.p-products_detail .column_right .other_link .like a.like-btn {
    display: block;
    width: 100%;
    padding: 14px 20px;
    padding-left: 45px;
    border: 1px solid #ed8783;
    border-radius: 50px;
    color: #ed8783;
    background-color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    opacity: 1;
    position: relative;
    box-sizing: border-box;
}
.p-products_detail .column_right .other_link .like a.like-btn .tx {
    text-decoration: none;
}
.p-products_detail .column_right .other_link .like a.like-btn:hover {
    background-color: #ed8783;
    color: #fff;
}
.p-products_detail .column_right .other_link .like a.like-btn .icon {
    position: absolute;
    top: 50%;
    left: 22px;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    line-height: 1;
}
.p-products_detail .column_right .other_link .like a.like-btn .icon .g1 path {
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

/* --- 登録済み（.current） --------------------------------- */
.p-products_detail .column_right .other_link .like a.like-btn.current {
    background-color: #fff9f8;
}
.p-products_detail .column_right .other_link .like a.like-btn.current .icon .g1 path {
    fill: #ed8783;
    stroke: #ed8783;
}
.p-products_detail .column_right .other_link .like a.like-btn.current:hover {
    background-color: #ed8783;
    color: #fff;
}
.p-products_detail .column_right .other_link .like a.like-btn.current:hover .icon .g1 path {
    fill: #fff;
    stroke: #fff;
}

@media only screen and (max-width: 750px) {
    .p-products_detail .column_right .other_link .like a.like-btn {
        padding: 11px 20px;
        padding-left: 45px;
        font-size: 1.4rem;
    }
}


}

/* ===========================
   EC-CUBE組み込み対応：submitがbutton要素で出力されるケース
   （モックは input[type="submit"] / EC-CUBEは <button type="submit">）
=========================== */

.p-login_submit button,
.c-form .submit_btn button {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    font-family: inherit;
}

.p-login_submit button {
    display: block;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    height: 64px;
    border-radius: 50px;
    background-color: #ed8783;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .3s ease-out;
}
@media only screen and (max-width: 750px) {
    .p-login_submit button {
        max-width: 100%;
        height: 56px;
        font-size: 1.6rem;
    }
}
.p-login_submit button:hover {
    opacity: .7;
}

.c-btns_column .p-login_submit button {
    width: auto;
    max-width: none;
    padding: 15px 45px;
    height: auto;
}

.p-withdraw_index .c-btns_column .p-login_submit button {
    width: 340px;
    max-width: 340px;
    height: 64px;
    padding: 0;
    border-radius: 50px;
    background-color: #ed8783;
    font-size: 1.8rem;
}
.p-withdraw_index .c-btns_column .p-login_submit button:hover {
    background-color: #ed8783;
    opacity: .7;
}

.c-form .submit_btn button {
    width: 100%;
    max-width: 530px;
    height: 72px;
    border-radius: 50px;
    background-color: #ed8783;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .3s ease-out;
}
.c-form .submit_btn button:hover {
    opacity: .7;
}
@media only screen and (max-width: 750px) {
    .c-form .submit_btn button {
        height: 60px;
        font-size: 1.6rem;
    }
}

/* ===========================
   パスワード入力欄の枠スタイル
   style.css の共通指定（input[type=text]/[tel]/[email]）に
   password が含まれておらず、ブラウザ標準の見た目になるため補う。
=========================== */

input[type="password"] {
    padding: 0 20px;
    height: 40px;
    width: 100%;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    font-family: "游ゴシック", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    color: #000;
    font-weight: 500;
}
@media only screen and (max-width: 750px) {
    input[type="password"] {
        padding: 0 15px;
        border-width: 1px;
    }
}

/* 会員登録・お問い合わせ等のフォーム内（input[type=text]と同一の指定に揃える） */
.c-form .input_box .input_item input[type="password"] {
    padding: 0 20px;
    height: 50px;
    width: 100%;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 4px;
    font-size: 1.4rem;
}
@media only screen and (max-width: 750px) {
    .c-form .input_box .input_item input[type="password"] {
        padding: 0 15px;
        height: 40px;
    }
}

/* yubinbango用の国名要素（EC-CUBE出力ではinline styleで非表示） */
.is-hidden_country {
    display: none;
}

/* ============================================================
   ページトップへ戻るボタン
   ・マークアップ：assets/inc/footer.php（</footer> の直後）
   ・挙動：assets/js/scripts-add.js
   ・ヘッダー（z-index:100）より下、モーダル（9999）より下に配置
   ============================================================ */

.c-pagetop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 90;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #955234;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    -webkit-transition: opacity .3s ease-out, visibility .3s ease-out, transform .3s ease-out, background-color .3s ease-out;
    transition: opacity .3s ease-out, visibility .3s ease-out, transform .3s ease-out, background-color .3s ease-out;
}
@media only screen and (max-width: 750px) {
    .c-pagetop {
        right: 15px;
        bottom: 15px;
        width: 44px;
        height: 44px;
    }
}

/* 表示状態 */
.c-pagetop.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.c-pagetop:hover {
    background-color: #ed8783;
    opacity: 1;
}

/* 矢印アイコン（既存の link_arrow01.svg を回転して流用） */
.c-pagetop_icon {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
.c-pagetop_icon::before {
    content: " ";
    display: block;
    width: 10px;
    height: 16px;
    background: url("../img/common/icon/link_arrow01.svg") center/100% auto no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -5px;
    transform: rotate(-90deg);
}
@media only screen and (max-width: 750px) {
    .c-pagetop_icon::before {
        width: 8px;
        height: 13px;
        margin: -6px 0 0 -4px;
    }
}

/* SPメニュー展開中は隠す（body.is-opened で #wrap が固定されるため） */
body.is-opened .c-pagetop {
    opacity: 0;
    visibility: hidden;
}

/* アニメーションを控える設定のとき */
@media (prefers-reduced-motion: reduce) {
    .c-pagetop {
        transform: none;
        -webkit-transition: none;
        transition: none;
    }
    .c-pagetop.is-visible {
        transform: none;
    }
}

/* ============================================================
   404（ページが見つかりません）
   既存コンポーネントの流用のみ。余白の調整だけを行う。
   ============================================================ */

.p-notfound .c-btn {
    margin-top: 50px;
}
@media only screen and (max-width: 750px) {
    .p-notfound .c-btn {
        margin-top: 30px;
    }
}

/* ============================================================
   修正シート112：「郵便番号検索」ボタンを日本郵便へのリンクに変更

   押しても何も起きないボタンだったため <a> に差し替えた。
   既存の装飾は style.css の
     .c-form .input_box .input_item .input_zip input[type="button"]
   と、上の
     .p-checkout_field .input_zip input[type="button"]
   にしか当たらないので、同じ見た目を a.zip-btn にも定義し直す。
   （<a> は inline なので、文字の中央寄せは flex で取る）
   ============================================================ */
.c-form .input_box .input_item .input_zip a.zip-btn,
.p-checkout_field .input_zip a.zip-btn {
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin-left: 10px;
    width: 128px;
    height: 50px;
    border-radius: 4px;
    background-color: #ed8783;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.c-form .input_box .input_item .input_zip a.zip-btn:hover,
.p-checkout_field .input_zip a.zip-btn:hover {
    opacity: .7;
    color: #fff;
}
@media only screen and (max-width: 750px) {
    .c-form .input_box .input_item .input_zip a.zip-btn,
    .p-checkout_field .input_zip a.zip-btn {
        height: 40px;
        margin-left: 5px;
        width: 100px;
        font-size: 1.3rem;
    }
}

/* ============================================================
   サイトマップページ
   ・/sitemap/index.php 用
   ・見出しは c-heading_h2 / c-heading_h3 を流用し、
     リンク一覧のスタイルのみここで定義する
   ============================================================ */
.p-sitemap_block {
    margin-bottom: 70px;
}

.p-sitemap_block:last-child {
    margin-bottom: 0;
}

@media only screen and (max-width: 750px) {
    .p-sitemap_block {
        margin-bottom: 40px;
    }
}

.p-sitemap_block .c-heading_h3 {
    margin-top: 40px;
}

@media only screen and (max-width: 750px) {
    .p-sitemap_block .c-heading_h3 {
        margin-top: 30px;
    }
}

.p-sitemap a {
    text-decoration: none;
    opacity: 1;
}

.p-sitemap a:hover {
    color: #ed8783;
    text-decoration: underline;
}

.p-sitemap_columns {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-right: -3.6363636364%;
}

@media only screen and (max-width: 750px) {
    .p-sitemap_columns {
        display: block;
        margin-right: 0;
    }
}

.p-sitemap_group {
    width: 30%;
    margin: 0 3.3333333333% 35px 0;
}

@media only screen and (max-width: 750px) {
    .p-sitemap_group {
        width: auto;
        margin: 0 0 25px;
    }
}

.p-sitemap_group dt {
    padding-bottom: 6px;
    margin-bottom: 10px;
    border-bottom: 1px solid #955234;
    font-size: 1.8rem;
    font-weight: 700;
}

@media only screen and (max-width: 750px) {
    .p-sitemap_group dt {
        font-size: 1.6rem;
    }
}

.p-sitemap_group dt a {
    color: #955234;
}

.p-sitemap_group ul li,
.p-sitemap_list li {
    margin-bottom: 8px;
    padding-left: 14px;
    font-size: 1.6rem;
    line-height: 1.5;
    position: relative;
}

@media only screen and (max-width: 750px) {
    .p-sitemap_group ul li,
    .p-sitemap_list li {
        margin-bottom: 10px;
        font-size: 1.5rem;
    }
}

.p-sitemap_group ul li::before,
.p-sitemap_list li::before {
    content: " ";
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ed8783;
    position: absolute;
    top: 9px;
    left: 0;
}

.p-sitemap_group ul li ul,
.p-sitemap_list li ul {
    margin-top: 8px;
    padding-left: 4px;
}

.p-sitemap_group ul li ul li::before,
.p-sitemap_list li ul li::before {
    width: 8px;
    height: 1px;
    border-radius: 0;
    background-color: #ccc;
    top: 12px;
}

.p-sitemap_list {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}

@media only screen and (max-width: 750px) {
    .p-sitemap_list {
        display: block;
    }
}

.p-sitemap_list > li {
    width: 30%;
    margin-right: 3.3333333333%;
    margin-bottom: 14px;
}

@media only screen and (max-width: 750px) {
    .p-sitemap_list > li {
        width: auto;
        margin-right: 0;
    }
}

/* ============================================================
   サイトマップ：カテゴリ枠をカード状にして塊を分かりやすくする
   ・商品カテゴリは第2階層までに絞り、孫階層は各カテゴリページに任せる
   ============================================================ */
.p-sitemap_note {
    margin-bottom: 25px;
    font-size: 1.5rem;
    color: #4d4d4d;
}

@media only screen and (max-width: 750px) {
    .p-sitemap_note {
        margin-bottom: 15px;
        font-size: 1.4rem;
    }
}

.p-sitemap_group {
    padding: 20px 25px;
    border: 1px solid #ccc;
    border-radius: 16px;
    background-color: #fff;
}

@media only screen and (max-width: 750px) {
    .p-sitemap_group {
        padding: 15px 20px;
        border-radius: 10px;
    }
}

.p-sitemap_group dd {
    margin: 0;
}

.p-sitemap_group:has(dd) dt {
    margin-bottom: 12px;
}

.p-sitemap_group:not(:has(dd)) dt {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

/* ============================================================
   ヘッダー Safari 表示崩れ対策
   Safari(WebKit) は shrink-to-fit な flex コンテナ（.box01）の
   max-content 幅を求めるとき、子アイテムの flex-basis を無視して
   中の画像の「実寸」を採用する（Chrome / Firefox は flex-basis を使う）。
   ロゴ・バナーはいずれも 2x 画像のため、
     logo.png        実寸 476px / 表示 238px
     bnr_trial02.png 実寸 748px / 表示 370px
     bnr_trial.png   実寸 364px / 表示 180px
   .box01 は flex:0 0 auto（縮まない）なので最大 +616px 膨張し、
   ヘッダー右側（お気に入り・カート）が画面外へ押し出され、
   絶対配置の検索窓（right:0）と重なって見える。
   flex-basis と同値の width を明示し、実寸を参照させないようにする。
   ============================================================ */

.h-header .h-info .h-info_inner .box01 .h-logo {
    width: 238px;
}
.h-header .h-info .h-info_inner .box01 .h-bnr_trial {
    width: 370px;
}
@media only screen and (max-width: 1170px) {
    .h-header .h-info .h-info_inner .box01 .h-bnr_trial {
        width: 180px;
    }
}
@media only screen and (max-width: 820px) {
    .h-header .h-info .h-info_inner .box01 .h-logo {
        width: 180px;
    }
}
@media only screen and (max-width: 750px) {
    .h-header .h-info .h-info_inner .box01 .h-logo {
        width: 119px;
    }
}

/* ============================================================
   サイトマップ：カテゴリ見出しをリンクと分かるようにする（修正シート118）
   dt は border-bottom が付いていて見出しに見えるため、
   テキスト右にピンクの矢印を置き、ホバーで下線を出す。
   ★カテゴリを動的出力に変えても dt の中に a を置く構造を維持すること。
   ============================================================ */
.p-sitemap_group dt a {
    display: inline-block;
    padding-right: 20px;
    position: relative;
}
.p-sitemap_group dt a::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-top: 2px solid #ed8783;
    border-right: 2px solid #ed8783;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 5px;
    margin-top: -4px;
}
.p-sitemap_group dt a:hover {
    text-decoration: underline;
}




/* ============================================================
   フォームのバリデーション表示（追従ヘッダー対策）
   ・ヘッダーが position:fixed のため、未入力項目へブラウザが
     スクロールするとヘッダーの下に隠れてしまう
   ・停止位置をヘッダー分だけ下げ、エラー文言も自前で表示する
   ・--header-offset は scripts-add.js が実測値で上書きする
     （JS が無効でも下記の初期値で機能する）
   ============================================================ */
:root {
    --header-offset: 170px;
}

@media only screen and (max-width: 750px) {
    :root {
        --header-offset: 70px;
    }
}

input,
select,
textarea,
.c-form .input_box .input_item,
.c-form .input_box .checkbox_privacy,
.p-products_detail .cart_select_item,
.invalid-feedback,
.ec-errorMessage {
    scroll-margin-top: var(--header-offset);
}

/* エラーになった項目 */
.is-input_error {
    border: 2px solid #e6342e;
    border-radius: 8px;
    background-color: #fff6f6;
}

.c-form .input_box .input_item.is-input_error {
    background-color: #fff6f6;
}

.is-input_error > .heading::after,
.is-input_error > .column > .heading::after {
    content: "要確認";
    display: block;
    width: fit-content;
    margin: 6px 0 0;
    padding: 2px 8px;
    border-radius: 4px;
    background-color: #e6342e;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.5;
}

/* エラー文言 */
.c-input_error {
    margin-top: 8px;
    padding-left: 22px;
    color: #e6342e;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.5;
    position: relative;
}

.c-input_error::before {
    content: "!";
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #e6342e;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    position: absolute;
    top: 3px;
    left: 0;
}

@media only screen and (max-width: 750px) {
    .c-input_error {
        font-size: 1.3rem;
    }
}


/* ============================================================
   バリデーション表示の調整（EC-CUBE 組み込み版）

   ・EC-CUBE が出力する .invalid-feedback にスタイルが当たらず
     素のテキストで表示されていたため、.c-input_error と揃える
   ・テンプレート側のスクリプトが .column に、scripts-add.js が
     .input_item にエラークラスを付けるため枠が入れ子になる。
     内側の枠を打ち消して二重表示を防ぐ
   ============================================================ */

/* サーバー側が返すエラー文言 */
.invalid-feedback,
.ec-errorMessage {
    margin-top: 8px;
    padding-left: 22px;
    color: #e6342e;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.5;
    position: relative;
}

.invalid-feedback::before,
.ec-errorMessage::before {
    content: "!";
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #e6342e;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    position: absolute;
    top: 3px;
    left: 0;
}

@media only screen and (max-width: 750px) {
    .invalid-feedback,
    .ec-errorMessage {
        font-size: 1.3rem;
    }
}

/* 入れ子になったときは内側の枠を消す（JS が無効でも二重にならない） */
.is-input_error .is-input_error {
    border: 0;
    border-radius: 0;
    padding: 0;
    background-color: transparent;
}

.is-input_error .is-input_error > .heading::after {
    display: none;
}

/* リンクの無い商品カード（トライアルページの「お試しいただける敷布団・マットレス」など .no-link）は
   ホバーで画像を拡大しない・カーソルも通常にする。拡大すると「クリックできる」と誤解させるため（修正シート180） */
.p-products_goods_list.no-link .item a {
    cursor: default;
}
.p-products_goods_list.no-link .item a:hover .c-thum img {
    transform: none;
    opacity: 1;
}

/* 上記 .no-link 指定の補完（モック側と挙動を揃える・近藤さん 2026-09-17 申し送り②）
   既存の指定だけでは画像の拡大は止まるが、a:hover の opacity:.7 が残り
   カード全体が薄くなるため「押せる」と見えてしまう。
   ポインタ操作ごと無効化して、ホバー反応を完全に解除する。 */
.p-products_goods_list.no-link .item a,
.p-products_goods_list.no-link .item a:hover {
    cursor: default;
    pointer-events: none;
    opacity: 1;
}

.p-products_goods_list.no-link .item a:hover .c-thum img {
    transform: none;
    opacity: 1;
}

/* ============================================================
   修正シート210・212・218: 確認画面の「入力内容を修正する」で #form（入力フォーム）へ戻す。
   固定ヘッダーの下に隠れないよう、ヘッダー実測値（--header-offset は scripts-add.js が入れる）ぶん下げる。
   ============================================================ */
#form {
  scroll-margin-top: var(--header-offset, 170px);
}

/* ============================================================
   修正シート209・214: PC では電話番号をリンクとして押せなくする。
   対象＝トライアルの「硬さの選び方について」ポップアップ／各フォームの申込完了画面の電話番号（.tel_area）。
   スマホ（767px以下）ではそのまま発信できる。
   ============================================================ */
@media (min-width: 768px) {
  #katasa-modal a[href^="tel:"],
  .c-katasa_modal a[href^="tel:"],
  .katasa_tel a[href^="tel:"],
  .tel_area a[href^="tel:"] {
    pointer-events: none;
    text-decoration: none;
    color: inherit;
    cursor: default;
  }
}