:root {
    color-scheme: light;

    --c-white: #fff;
    --c-black: #000;
    --c-text: #1e1e1e;
    --c-text-sub: #333;
    --c-text-muted: #666;
    --c-primary: #254a84;
    --c-eaprimary: #5a404c;
    --c-accent: #f2a900;
    --c-btn: #04837e;
    --c-bg-gray: #e9edf3;
    --c-bg-yellow: #fef6e5;
    --c-bg-light: #f9f9f9;
    --c-pale-blue: #f0f6ff;
    --c-light-blue: #d3dbe6;
    --c-border: #ccc;
    --c-border-light: #f0f0f0;
    --c-border-dark: #dbdcdc;
    --c-orange: #ec6922;
    --c-dark-orange: #b85018;
    --c-pale-orange: #fdf0e9;
    --c-red: #ef3434;
    --c-dull-red: #b60000;
    --c-border-yellow: #f8d480;
    --c-altpaper: #3f7435;
    --c-apBg: #eaeef4;
    --c-sclWeb: #4fade2;
    --c-sclPaper: #0dac67;
    --c-grayish-blue: #c8d2e0;
    --c-award-pale-color: #d7e6e6;
    --c-accent: #e63946;
    --c-accent-dark: #c1121f;
    --c-border: #d5dbe3;
    --c-bg-soft: #f7f8fa;
    --c-sel-bg: #eef3fb;
    --c-amazon: #ff9900;
    --c-amazon-dark: #e88a00;

    --fs-11: 11px;
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-15: 15px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-20: 20px;
    --fs-22: 22px;
    --fs-24: 24px;
    --fs-26: 26px;
    --fs-28: 28px;
    --fs-32: 32px;
    --fs-36: 36px;
    --fs-48: 48px;

    --fs-c-12-14: clamp(12px, 2vw, 14px);
    --fs-c-13-14: clamp(13px, 1vw + 10px, 14px);
    --fs-c-14-16: clamp(14px, 1vw + 10px, 16px);
    --fs-c-14-18: clamp(14px, 2vw, 18px);
    --fs-c-18-21: clamp(18px, 3vw, 21px);
    --fs-c-18-24: clamp(18px, 2vw, 24px);
    --fs-c-18-36: clamp(18px, 2vw, 36px);
    --fs-c-20-26: clamp(20px, 2.4vw, 26px);
    --fs-c-20-28: clamp(20px, 2vw + 6px, 28px);
    --fs-c-24-32: clamp(24px, 4vw, 32px);
    --fs-c-24-36: clamp(24px, 4vw + 12px, 36px);
    --fs-c-24-40: clamp(24px, 4vw + 12px, 40px);
    --fs-c-24-48: clamp(24px, 4vw, 48px);
    --fs-c-32-56: clamp(32px, 2vw, 56px);
}

img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

/* ==== from common.css ==== */
.fsSmall {
    font-size: 70%;
}
.block64 {
    margin: 64px auto;
}

/* ==== from service-common.css ==== */
.twoColumnArea {
    --two-col-gap: 2em;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--two-col-gap);
    width: 90%;
}
.twoColumnArea > * {
    width: 100%;
    min-width: 0;
}
.twoColumnArea > .twoColItem {
    width: calc(50% - var(--two-col-gap) / 2);
}
.twoColumnArea>li>a,
.threeColumnArea>li>a {
    display: block;
    padding: 16px 48px;
    text-align: center;
    border: solid 2px var(--c-btn);
    border-radius: 8px;
    text-decoration: none;
    color: var(--c-btn);
    font-size: clamp(14px, 2vw + 10px, 24px);
    font-weight: 700;
    position: relative;
    line-height: 1.4;
}
.twoColumnArea>li>a::after,
.threeColumnArea>li>a::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-color: var(--c-btn);
    -webkit-mask-image: url("/wp-content/themes/wk_altpaper/lp/img-2026/common_img/link-cursol-under.svg");
    mask-image: url("/wp-content/themes/wk_altpaper/lp/img-2026/common_img/link-cursol-under.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.amazonTit {
    margin-bottom: 1em;
    font-size: var(--fs-c-24-32);
    font-weight: 900;
    text-align: center;
}

.amazonBtn a {
    display: block;
    margin: 0 auto;
    padding: 1em 2em;
    background-color: #ffa41c;
    color: #000;
    text-decoration: none;
    border-radius: 5000px;
    text-align: center;
}

.amazonBtn a:hover {
    background-color: #ff8400;
}

@media (min-width: 768px) {
    .twoColumnArea {
        max-width: 1200px;
    }
    .twoColumnArea > * {
        width: calc(50% - var(--two-col-gap) / 2);
    }
}

/* ========================================================
   ここから：ラジオボタン・カートエリアのメインスタイル
   ======================================================== */

/* ===== ラジオ（カード型・タップしやすい） ===== */
.radioArea {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 64px;
}

.radioGroup {
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.radioGroup legend {
		box-sizing: border-box;
    font-weight: 700;
    font-size: var(--fs-c-18-24);
		text-align: center;
		color: var(--c-white);
    background-color: var(--c-primary);
    padding: 0.5em;
    margin-bottom: 10px;
		width: 100%;
		border-radius: 8px;
}

.options {
    display: grid;
    gap: 8px;
}

.options label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 10px 14px;
    border: 2px solid var(--c-border);
    border-radius: 10px;
    font-size: 15px;
		font-feature-settings: "palt";
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.options label:active {
    background: var(--c-sel-bg);
}

.options label:has(input:checked) {
    border-color: var(--c-primary);
    background: var(--c-sel-bg);
    box-shadow: 0 0 0 1px var(--c-primary) inset;
}

.options input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--c-primary);
    flex-shrink: 0;
    cursor: pointer;
}

@media (hover: hover) {
    .options label:hover {
        border-color: #9fb0c8;
    }
}

/* ===== カート表示エリア ===== */
#cartArea {
    box-sizing: border-box;
    border: 2px solid var(--c-primary);
    border-radius: 12px;
    padding: 0 16px;
    text-align: center;
    background: var(--c-bg-soft);
    transition: opacity 0.3s;
    
    /* 外部CSSの巨大なmargin(64px)を打ち消す */
    margin: 0 !important;

    /* 中身を上下中央に配置 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#cartArea.is-empty {
    border-color: var(--c-border);
    background: #fafafa;
}

#cartLabel {
    font-size: var(--fs-c-18-21);
    font-weight: 700;
    margin: 1em 0 2.5em;
    color: #ba0a0f;
		font-feature-settings: "palt";
}

#cartDefault {
    font-size: 16px;
		font-weight: 800;
    color: #888;
    margin: 1em 0;
}

/* ===== 購入ボタン（3種）===== */
#cartBtns {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

#cartBtns.is-hidden {
    display: none;
}

.cartBtn {
    position: relative;
    display: block;
    /* width: 100%; はみ出し防止のため削除済み */
    padding: 14px 18px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    line-height: 1.4;
    transition: background .2s, transform .1s, box-shadow .2s;
}

.cartBtn:active {
    transform: translateY(1px);
}

.cartBtn__main {
    display: block;
    font-size: 15px;
}

.cartBtn__price {
    display: block;
    font-size: var(--fs-c-18-21);
    font-weight: 800;
    margin-top: 2px;
}

.cartBtn__price:empty {
    display: none;
}

/* おすすめバッジ */
.cartBtn__badge {
    position: absolute;
    top: 0; /* ← 0にして上端を基準にする */
    left: 50%;
    transform: translate(-50%, -50%); /* ← X軸だけでなくY軸も半分上にズラす魔法 */
    background: #ffd500;
    color: #7a5c00;
    font-size: var(--fs-c-14-18); /* ← ご希望の大きなサイズ！ */
    line-height: 1; /* ← 文字が大きくなった分の無駄な縦幅を削る */
    font-weight: 800;
    padding: 6px 14px; /* ← 大きな文字に合わせて、少しだけ内側の余白をふっくらさせる */
    border-radius: 999px;
    white-space: nowrap;
}

/* ① 定期購入 */
.cartBtn--teiki {
    background: #ba0a0f;
    color: #fff;
    padding: 18px;
    box-shadow: 0 4px 12px rgba(230, 57, 70, .28);
}

.cartBtn--teiki .cartBtn__main {
    font-size: 16px;
}

.cartBtn--teiki .cartBtn__price {
    font-size: var(--fs-c-18-21);
}

/* ② 通常購入 */
.cartBtn--tsujo {
    background: #fff;
    color: var(--c-primary);
    border: 2px solid var(--c-primary);
}

/* ③ Amazon */
.cartBtn--amazon {
    /* background: var(--c-white); */
    color: #111;
		border-top: dotted 1px #999;
		border-radius: 0;
}

.cartBtn--amazon > .cartBtn__main{
	margin-bottom: 0.5em;
}

@media (hover: hover) {
    .cartBtn--teiki:hover {
        opacity: 0.5;
    }
    .cartBtn--tsujo:hover {
        background: var(--c-sel-bg);
    }
    .cartBtn--amazon:hover {
        opacity: 0.5;
    }
}

/* ===== タブレット〜PCサイズのレイアウト ===== */
@media (min-width: 720px) {
    .radioArea {
        /* 左に「従業員数(上)＋WEB/紙(下)」、右にカート */
        grid-template-columns: 1.4fr 1fr;
        grid-template-areas:
            "staff cart"
            "kit   cart";
        gap: 22px 24px;
        /* 左右の要素の高さを揃える */
        align-items: stretch;
    }

		#cartLabel {
				margin: 0 0 2.5em;
		}

		#cartDefault {
				font-size: 32px;
				margin: 0;
		}

    #grpStaff { grid-area: staff; }
    #grpKit   { grid-area: kit; }
    
    #cartArea { 
        grid-area: cart; 
    }

    /* 従業員数(5件)・WEB/紙(2件)を2カラム化して縦の余白を埋める */
    #grpStaff .options,
    #grpKit .options {
        grid-template-columns: 1fr 1fr;
    }
}