/* reset -------------------------------------------------- */

    .ec-layoutRole__contents{
        max-width: none !important;
    }

/* 変数 -------------------------------------------------- */

    :root{
        --primary-color:#398EE2;
        --primary-color-grad:linear-gradient(90deg, rgba(47,107,206,1) 0%, rgba(57,142,226,1) 100%);
        --secondary-color:#FAB139;
        --boxShadow-primary: 0px 4px 30px rgba(9, 65, 131, 0.05);
        --btn-cta-prymary-text-color:white;
        --primary-gray-color:#F6F8FA;
        --line-color:#EBEEF2;
        --font-color:#2C3A4B;
        --border-line-color:#EBEEF2;
        --text-color-black:#2C3A4B;

        --border-radius: 8px;

        --btn-cta-padding: 12px 24px;

        --logo-img-size: 200px;

        --max-width: 1200px;
    }


/* 共通 EC-CUBE ---------------------------------------- */

    button,
    .ec-blockBtn--cancel,
    .ec-blockBtn--action,
    .ec-blockBtn {
        border-radius: 80px !important;
    }

    .ec-blockBtn--action{
        background-color: var(--primary-color);
        border:0px;
    }

    .ec-blockBtn--action:hover{
        opacity: .8;
        background-color: var(--primary-color);
        border:0px;
    }

    .ec-blockBtn--action:active{
        opacity: .8;
        background-color: var(--secondary-color);
        border:0px;
    }


    #page_homepage .ec-footerRole{
        margin-top: 0 !important;
    }

    .slideThumb img,
    .slide-item img{
        /* border-radius: var(--border-radius); */
    }

    .is-complete .ec-progress__number{

        background-color: var(--secondary-color) !important;
    }
    .is-complete .ec-progress__label{
        color: var(--secondary-color) !important;
    }


/* 共通 -------------------------------------------------- */

    html {
        font-size: 16px;
        color:#2C3A4B;
    }

    .top-wrap img{
        width:100%;
    }

    section{
        padding: 120px 24px;
    }

    .section-title{
        margin:auto;
    }

    .section-title hr{
        border: 0;
        background:var(--primary-color-grad);
        width:120px;
        height:4px;
        opacity: 1;
        margin:auto;
        margin-top:40px;
    }

    .sub-title{
        margin-bottom:24px;
        background:var(--primary-color-grad);
        border-radius:var(--border-radius);
        color:white;
    }

    .max-width{
        max-width: var(--max-width);
    }

    .bg-color-second{
        background: var(--primary-gray-color);
    }

    .prymary-grad-text-color{
        color:var(--primary-color-grad);
    }

    .prymary-text-color{
        color:var(--primary-color);
    }

    .yen-text{
        color: var(--text-color-black);
    }

    .white-box{
        background:white;
        border-radius:var(--border-radius);
    }


/* ヘッダー -------------------------------------------------- */

    

/* btn -------------------------------------------------- */

    .cta-btn-prymary{
        padding: var(--btn-cta-padding);
        min-height:24px;
        color:var(--btn-cta-prymary-text-color) !important;
        font-size: 16px;
        border-radius:80px;
        box-shadow:var(--boxShadow-primary);
        background:var(--primary-color-grad);
    }

    .btn-ghost{
        color:inherit !important;
        background:none;
        box-shadow:none;
    }

/* logo -------------------------------------------------- */

    .logo{
        width: var(--logo-img-size);
    }

/* 1. FV -------------------------------------------------- */

    .fv{
        background: no-repeat center url("/store/html/user_data/assets/img/material/fv-bg.png");
        background-size: cover;
        color:white;
    }

    .bg-marker{
        display: inline-block;
        padding: 2px 6px;
        color: var(--primary-color);
        font-weight: bold;
        background-color: white;
        text-shadow: 0px 4px 8px rgb(14 99 179 / 30%);
    }

    .fv-text-shadow{
        text-shadow: 0px 4px 8px #0E63B3;
    }

    .fv .cta{
        width:100%;
        min-height:64px;
        color:var(--btn-cta-prymary-text-color);
        border: 2px solid rgba(255, 255, 255, 1);
        border-radius:80px;
        box-shadow:var(--boxShadow-primary);
        background:var(--primary-color-grad);
    }

    .text-accent{
        filter: drop-shadow(0px 4px 8px #0E63B3);
    }

    .text-accent hr{
        width: 40%;
        opacity: 1;
        background-color: var(--secondary-color);
    }

    .text-accent span{
        color: var(--secondary-color);
    }

    .text-block span{
        font-weight: bold;
    }

    .fv-image-wrap{
        padding: 8px 8px;
        background-color: white;
        border-radius: 12px;
        box-shadow: 0px 35px 90px rgba(0, 0, 0, 0.135);
    }

    .fv-image-wrap img{
        
    }


/* 2. 3つのメリット -------------------------------------------------- */

    .merit-item{
        box-shadow: var(--boxShadow-primary);
        background: #FFFFFF;
        border-radius: var(--border-radius);
    }

    .merit-image img{
        max-width: 400px;
        width: 100%;
        padding: 8px 40px;
    }

    .merit-text hr{
        border: 0;
        background-color: var(--secondary-color);
        width:80px;
        height:4px;
        opacity: 1;
    }

/* 3. CTA -------------------------------------------------- */

    :root{
        --cta-btn-py: 12px;
        --cta-btn-px: 40px;
        --cta-tel-icon-size: 64px;
    }

    .cta{
        background:var(--primary-color-grad);
    }

    .tel-wrap{
        border-radius: 16px;
        background-color: white;
        padding: 12px 0;
    }

    .tel-title{
        text-align: center;
        border-bottom: 1px solid var(--border-line-color);
        padding: var(--cta-btn-py) var(--cta-btn-px);
    }

    .tel-title span{
        font-weight: bold;
    }

    .tel-num-wrap{
        padding: var(--cta-btn-py) var(--cta-btn-px);
    }

    .tel-icon i{
        transform:rotate(-45deg);
        font-size: var(--cta-tel-icon-size);
    }

    .tel-num .number{
        color: var(--primary-color);
        font-weight: bold;
    }

    .tel-num .date{
        font-weight: bold;
        font-size: 14px;
        margin: 0;
    }

    .button-wrap{
        padding: 0;
    }

    .cta-button{
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        color: var(--primary-color);
        background-color: white;
        border-radius: 64px;
        box-shadow: 0px 6px 24px #1153BE;
        padding: var(--cta-btn-py) var(--cta-btn-px);
    }

    .button-wrap a{
        text-decoration: none !important;
    }

    .cta-button span{
        margin-bottom: 0;
        font-weight: bold;
        width: 100%;
    }

    .cta-button i{
        font-size: 40px;
        color: var(--secondary-color);
        margin-right: 12px;
    }

/* 4. 料金 -------------------------------------------------- */

    .price .white-box{
        background:white;
        border-radius:var(--border-radius);
    }

    .price-record{
        border-bottom: 1px solid var(--line-color);
    }

    .price-record p{
        display:inline-block;
        margin: 0;
    }

    .price-record .range-of-price{
        color:var(--primary-color);
    }

    .price-add .title-group{
        /* margin-right: auto; */
    }

    .price-add .tag-title{
        width: 200px;
        text-align: center;
        border-radius: 40px;
        background-color: var(--secondary-color);
        color:white;
        padding: 8px 24px;
    }

    .price-add .discription{
        color:var(--font-color);
        margin: 0;
    }

    .price-add .title{
        margin: 0;
        padding: 0 16px;
    }

    .price-add-item:not(:last-child){
        margin-bottom:8px;
        border-bottom: 1px solid var(--border-line-color);
    }

    .how-to-pay-item i{
        color:var(--secondary-color);
        font-size: 24px;
        margin-right:16px;

    }

/* 5. 日程エリア -------------------------------------------------- */

    .time-item{
        background-color: var(--primary-gray-color);
        border-radius: var(--border-radius);
    }

    .time-item-title{
        color:#6D7580;
        font-size: 16px;
        font-weight: bold;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border-line-color);
        margin-bottom: 8px;
    }


/* 6. 事前梱包のお願い -------------------------------------------------- */

    .step-item-wrap{
        background-color: white;
        border-radius: var(--border-radius);
    }

    .step-group{
    }

    .step-tag{
        /* display: flex; */
        /* flex-direction: row; */
        justify-content: center;
        align-items: center;
        padding: 8px 24px;
        background-color: var(--secondary-color);
        color:white;
        border-radius: var(--border-radius);
    }

    .texts p{
        color: #545D69;
    }

/* 7. 事前梱包のお願い -------------------------------------------------- */

    .faq-item-wrap{
        background-color: white;
        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.10);
        border-radius: var(--border-radius);
    }

    .faq-item-wrap p{
        margin: 0 !important;
    }

    .question{
        color:var(--primary-color);
        font-weight: bold;
        font-size: 24px;
    }

    .ans-icon{
        color:var(--secondary-color);
        font-weight: bold;
        font-size: 24px;
    }



/* 詳細｜注意事項 -------------------------------------------------- */

    #page_product_detail .item_nav{
        /* padding-top: 16px; */
        /* Body直前にJS入れると、崩れる */
    }

    #page_product_detail .ec-productRole__btn{
        width: 100%;
    }

    .detail-page{
        border-radius: var(--border-radius);
    }
    .detail-section-title{
        display: flex;
        /* flex-direction: row; */
        align-items: center;
        padding: 4px 8px;
        border-left: 3px solid #A5ABB3;
        border-radius: 2px;
        background: #F4F6F9;
    }
    .alert-info-text span{
        font-size: 13px;
    }

/*  */
/* レスポンス -------------------------------------------------- */
/*  */

@media screen and (max-width: 959px) {
	/* px以下に適用されるCSS（タブレット用） */
}

@media screen and (max-width: 576px) {
	/* px以下に適用されるCSS（スマホ用） */

    :root{
        --cta-btn-py: 8px;
        --cta-btn-px: 8px;
        --cta-tel-icon-size: 40px;
    }

    /* ヘッダー */
    .ec-cartNavi{ 
        /* カート */
        padding-right: 40px;
    }

    .ec-headerNavSP{
        /* メニューアイコン */
        left: unset;
        right: 10px;
        z-index: 0;
    }

    section{
        padding: 60px 16px;
    }

    .logo{
        width: calc(var(--logo-img-size) * .5);
    }
    .logo img{
        width: 100%;
    }

    .section-title hr{
        /* border: 0;
        background:var(--primary-color-grad);
        width:120px;
        height:4px;
        opacity: 1;
        margin:auto; */
        margin-top:24px;
    }

    .text-accent hr{
        width: 10%;
        /* opacity: 1;
        background-color: var(--secondary-color); */
    }

    .tel-num{
        padding: 0;
    }

    .tel-num .number{
        margin-bottom: 8px;
    }

    .tel-num .date{
        font-size: 12px;
    }

    .tel-icon{
        padding: 4px;
        padding-right: 8px;
    }

    .cta-button{
        min-height: 48px;
    }

    .cta-button span{
        font-size:16px;
    }

}


/*2023/01/16追記*/


.prymary-text-color {
color: #3070D1;
font-size: 3rem;
}


.bg-marker {
display: inline-block;
padding: 5px 15px;
color: #3070D1;
font-weight: bold;
background-color: white;
}

.fv-text-shadow {
font-size: 1.5rem;
}

@media (min-width: 1200px){
    .display-4 {
        font-size: 4.5rem;}}