/*========================================================
ファイル名    ：price.css
管理番号　　：No.022
内容　　　　：Priceセクション共通CSS
バージョン　：Ver2.0
作成日　　　：2026-07-17
更新日　　　：2026-07-17

【変更履歴】
Ver1.0 Price専用CSS
Ver2.0 共通レイアウトのみへ整理
========================================================*/

/*********************************************************************
 Price Common
*********************************************************************/

.price-section{
    background:#f8f9fa;
    padding:56px 0;
    overflow-x:hidden;
}

.price-heading{
    margin-bottom:4px;
}

.price-title{
    font-size:2.2rem;
    font-weight:700;
    color:#0d6efd;
    margin-bottom:15px;
    text-align:center;
}

.price-subtitle{
    font-size:1.1rem;
    color:#666;
    text-align:center;
    margin-bottom:0;
}

@media (min-width:769px){
    .price-section .price-basic,
    .price-section .price-custom{
        padding-top:25px;
        padding-bottom:25px;
    }
}

@media (max-width:991px){
    .price-section{
        padding:48px 0;
    }

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

@media (max-width:576px){
    .price-section{
        padding:28px 0 24px;
    }

    .price-heading{
        margin-bottom:16px;
    }

    .price-title{
        font-size:1.8rem;
    }

    .price-subtitle{
        color:#294c72;
        font-size:16px;
        font-weight:600;
        text-align:left;
    }

    .price-subtitle span{
        display:block;
        white-space:nowrap;
    }
}

@media (max-width:768px){
    .price-section .price-basic,
    .price-section .price-custom{
        padding-top:0;
        padding-bottom:0;
    }

    .price-basic-sp,
    .price-custom-sp{
        padding:12px;
        background:#fff;
        border:2px solid;
        border-radius:18px;
    }

    .price-basic-sp{
        border-color:#0d47a1;
    }

    .price-custom-sp{
        border-color:#08752b;
    }

    .price-plan-mobile-header{
        margin-bottom:14px;
        overflow:hidden;
        border-radius:14px;
    }

    .price-plan-mobile-banner{
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        align-items:center;
        gap:10px;
        padding:18px 14px;
        color:#fff;
    }

    .price-plan-mobile-header--basic .price-plan-mobile-banner{
        background:linear-gradient(135deg,#0645a5,#002f83);
    }

    .price-plan-mobile-header--custom .price-plan-mobile-banner{
        background:linear-gradient(135deg,#087b20,#005b17);
    }

    .price-plan-mobile-banner h3{
        margin:0 0 8px;
        color:#fff;
        font-size:0;
        font-weight:800;
        line-height:1.25;
    }

    .price-plan-mobile-banner h3::before,
    .price-plan-mobile-banner h3::after{
        display:block;
        font-size:clamp(1.35rem,5.5vw,1.7rem);
        line-height:1.2;
    }

    .price-plan-mobile-header--basic .price-plan-mobile-banner h3::before{
        content:"\30D9\30FC\30B7\30C3\30AF";
    }

    .price-plan-mobile-header--custom .price-plan-mobile-banner h3::before{
        content:"\30AB\30B9\30BF\30E0";
    }

    .price-plan-mobile-banner h3::after{
        content:"\30D7\30E9\30F3";
        padding-right:4px;
        text-align:right;
    }

    .price-plan-mobile-badge{
        display:inline-block;
        padding:5px 13px;
        color:inherit;
        background:#fff;
        border-radius:999px;
        font-size:.9rem;
        font-weight:800;
    }

    .price-plan-mobile-header--basic .price-plan-mobile-badge{
        color:#083f94;
    }

    .price-plan-mobile-header--custom .price-plan-mobile-badge{
        color:#08752b;
    }

    .price-plan-mobile-price{
        min-width:132px;
        margin:0;
        padding:9px 10px;
        text-align:center;
        border:2px solid rgba(255,255,255,.9);
        border-radius:12px;
        font-size:1.15rem;
        font-weight:800;
        line-height:1.1;
        white-space:nowrap;
    }

    .price-plan-mobile-price strong{
        font-size:2.25rem;
    }

    .price-plan-mobile-price small{
        display:block;
        margin-top:5px;
        font-size:.72rem;
    }

    .price-plan-mobile-description{
        margin:0;
        padding:15px 13px;
        color:#111827;
        background:#fff;
        font-size:1.05rem;
        font-weight:800;
        line-height:1.55;
    }

    .price-plan-note{
        display:grid;
        grid-template-columns:58px 1fr;
        align-items:center;
        gap:14px;
        margin-top:16px;
        padding:16px;
        background:#fff;
        border:2px solid;
        border-radius:16px;
        box-shadow:0 7px 20px rgba(15,49,98,.09);
    }

    .price-plan-note__icon{
        display:grid;
        place-items:center;
        width:54px;
        height:54px;
        color:#fff;
        border-radius:50%;
        font-size:1.85rem;
        font-weight:800;
    }

    .price-plan-note p{
        margin:0;
        color:#18243a;
        font-size:.9rem;
        font-weight:600;
        line-height:1.65;
    }

    .price-plan-note p + p{
        margin-top:5px;
    }

    .price-plan-note--basic{
        border-color:#1555b6;
        background:#f5f9ff;
    }

    .price-plan-note--basic .price-plan-note__icon{
        background:#0d6efd;
    }

    .price-plan-note--custom{
        border-color:#19823a;
        background:#f5fbf6;
    }

    .price-plan-note--custom .price-plan-note__icon{
        background:#08752b;
    }
}

@media (max-width:380px){
    .price-plan-mobile-banner{
        padding:15px 10px;
    }

    .price-plan-mobile-price{
        min-width:112px;
        padding:8px 7px;
        font-size:.95rem;
    }

    .price-plan-mobile-price strong{
        font-size:1.85rem;
    }
}