@charset "UTF-8";

/* =====================================================================
   父の日コラム ページ固有CSS
   ・母の日（column-mothers-day-pajamas.css）の汎用ルールを継承
   ・追加：おすすめパジャマの2枚並び（半袖／長袖）＋キャプション
   ・追加：口コミ見出しの視認性アップ
   ===================================================================== */

/* ---------- 母の日から継承（汎用レイアウト） ---------- */
.block-detail-list {
    margin-top: 5rem;
    gap: 3rem;
}
.faq-box .bg-none.block-detail-list-item .column-container {
    margin-top: 0;
    border-radius: 0;
    padding: 5rem 6em;
}
.bg-none.block-detail-list-item .column-container {
    margin-top: 0;
}
.faq-box .block-detail-list-item > dl {
    padding: 4rem 0;
}
.faq-box .block-detail-list-item > dl > dt h3 {
    margin-bottom: 3rem;
}

.info-table > dl > dt h4 {
    padding-left: 0;
    padding-right: 10px;
    line-height: 1.7;
}
#column .info-table p a {
    font-size: .9em;
    margin-bottom: 25px;
    margin-top: 5px;
    color: #333;
}
#column .section p.m-top20 {
    margin-top: 20px;
}
.info-table {
    border: .3rem solid #e60013;
}
.info-table dl {
    flex-wrap: wrap;
}
.info-table dt,
.info-table dd {
    padding-left: 0;
}
.info-table h4.long-box {
    width: 100%;
    font-size: 1.3em;
    text-align: center;
    padding: 40px 0;
    margin-right: 0;
    margin-bottom: 0;
    border-bottom: 3px solid #e60013;
}
#column .section p.etc-txt {
    margin: 10px auto 40px;
    text-align: center;
    font-size: 1.05em;
    color: #7d7d7d;
}
#column .column-common-btn01 {
    max-width: 60rem;
}

.osusume {
    padding: 10px 30px 13px;
    margin: 0 auto;          /* ベージュboxの上辺の直下に配置 */
    color: #fff;
    font-weight: 700;
    background: #e60013;
    letter-spacing: .2em;
    display: table;
    border-radius: 0 0 8px 8px;   /* 角丸は左下・右下のみ */
}
#column .column-common-btn01.second {
    margin-top: 20px;
}

/* おすすめパジャマ エリア（anchor10内）：商品名見出しを上下ボーダーで囲む（ボーダー・文字とも黒） */
#column #anchor10 > .block-detail-list .block-detail-list-item > dl > dt > h3 {
    padding: 2rem 0;
    color: #000;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}
/* おすすめパジャマ エリア（anchor10内）：dd を上と少し離す */
#column #anchor10 > .block-detail-list .block-detail-list-item > dl > dd {
    margin-top: 3rem;
}
/* 各ボックス内 dl の上下パディング（上を詰める） */
.block-detail-list-item > dl {
    padding: 3rem 0 6rem;
}

@media screen and (max-width: 830px) {
    .info-table {
        border: .3rem solid #e60013;
        border-left: none;
        border-right: none;
        border-radius: 0;
        padding: 0;
    }
    #column .info-table > dl > dd p {
        font-size: 1.35rem;
    }
    .pd-none {
        padding: 0rem;
    }
    #column #anchor10 {
        padding-bottom: 0;
    }
    #anchor11, #anchor12 {
        border-radius: 0;
    }
    #column .product-effect.pd-25 {
        width: calc(100% - 3rem);
        margin: 20px auto 0;
    }
    #column .section p.pd-25 {
        padding: 0 2.5rem;
    }
    .info-table.bg-white-table {
        border: 0.4rem solid #e60013;
        border-left: none;
        border-right: none;
        padding: 2rem;
    }
    .info-table h4.long-box {
        padding: 0 0 2rem;
        font-size: 1.1em;
        text-align: left;
        border-bottom: 2px solid #e60013;
    }
    .block-detail-list {
        margin-top: 2rem;
    }
    .osusume {
        font-size: .9em;
    }
    #column .section p.etc-txt {
        margin: 10px auto 2rem;
        line-height: 1.4;
        text-align: left;
        font-size: .9em;
    }
}

/* =====================================================================
   ▼ ここから父の日コラム用の追加スタイル
   ===================================================================== */

/* ---------- おすすめパジャマ：半袖／長袖の2枚並び ---------- */
/* dt 内の画像が大きくなりすぎないよう、商品エリアの最大幅を抑える */
#column .osusume-box > dl > dt {
    max-width: 72rem;
    margin: 0 auto;
}
#column .osusume-box .col2-img {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 2rem auto 0;
}
#column .osusume-box .col2-img figure {
    margin: 0;
}
#column .osusume-box .col2-img figure picture.radius {
    display: block;
    margin: 0;
    padding-bottom: 0;
    border-radius: 1rem;
    overflow: hidden;
}
#column .osusume-box .col2-img figure img {
    width: 100%;
    height: auto;
    display: block;
}
#column .osusume-box .col2-img figcaption {
    margin-top: 1rem;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: #333;
    letter-spacing: .04em;
}

@media screen and (max-width: 830px) {
    #column .osusume-box > dl > dt {
        max-width: 100%;
    }
    #column .osusume-box .col2-img {
        gap: 1.2rem;
        margin-top: 1.5rem;
    }
    #column .osusume-box .col2-img figcaption {
        margin-top: .6rem;
        font-size: 1.2rem;
        line-height: 1.4;
    }
}

/* ---------- 口コミ見出しを見やすく ---------- */
/* 赤帯＋白文字のラベル調にして、レビュー本文との区切りを明確化 */
#column .info-table.bg-white-table {
    padding-top: 0;
}
#column .info-table h4.long-box {
    display: table;            /* 文字分だけの背景幅 */
    width: fit-content;
    margin: 0 auto;            /* 横中央 */
    transform: translateY(-50%); /* 上ボーダーの上下センターに（＝ちょい上） */
    padding: 1.2rem 2.8rem;
    background: #e60013;
    color: #fff;
    border: none;
    border-radius: 1rem;       /* 四方角丸 */
    font-size: 1.7rem;
    line-height: 1.5;
    letter-spacing: .06em;
}
/* 文字左のアイコンは削除 */

/* レビュアー名（Aさん 等）を読みやすく */
#column .info-table.bg-white-table > dl {
    border-bottom: 1px solid #e3e3e3;
}
#column .info-table.bg-white-table > dl > dt {
    width: 100%;
    margin-bottom: .4rem;
    padding: 0;
}
#column .info-table.bg-white-table > dl > dt h4 {
    display: inline-block;
    margin: 0;
    padding: .3rem 1.4rem;
    background: #fde7e9;
    color: #e60013;
    border-radius: 999px;
    font-size: 1.4rem;
    font-weight: 700;
}
#column .info-table.bg-white-table > dl > dd {
    width: 100%;
}

@media screen and (max-width: 830px) {
    #column .info-table h4.long-box {
        margin-bottom: -2.5rem;   /* またぎ分の空きを詰めて「Aさん」と近づける */
        padding: 1.3rem 1.6rem;
        font-size: 1.4rem;
        text-align: center;
        border-radius: 0;
        line-height: 1.45;
    }
    /* SP：おすすめパジャマ内の口コミボックスの上下を広げる */
    #column #anchor10 > .block-detail-list .block-detail-list-item > dl > dd > .info-table.bg-white-table {
        margin-top: 5.5rem;
        margin-bottom: 4rem;
    }
    /* SP：ボックス内 dl の下パディングを詰める */
    .block-detail-list-item > dl {
        padding: 3rem 0 2.5rem;
    }
}