*{font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ' , '游ゴシック Medium' , 'YuGothic' , 'YuGothicM' , arial, helvetica, sans-serif!important;}
.item_col.disabled {
    background-attachment: scroll;
    background-image: url(../images/bg/disabled_cover.png);
    background-position: left top;
    background-repeat: repeat;
    color: #c5c3c3;
}
.item_col.disabled p{
    color: #c5c3c3;
}
.number-style input[type='number'] {
    background-color: white;
}

.error_txt{
	display:none;
}
.error_txt_server{
    color: #df4525;
}
.note-email:before {
    content: url(../images/icons/prgbar_mail_red.svg);
    display: block;
    width: 23px;
    height: 20px;
    float: left;
    padding-top: 2px;
    margin: 0 6px 0 0;
}

select.error {
    border-color: #df4525;
    border-width: 2px;
}

/* coupon button plus, sub */

.sub-float button,
.my-float button  {
    background-color: Transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    /* color: white; */
    line-height: 25px; 
    margin: -4px 0 0 -3px;
    font-size: 2em;
}
.sub-float button  {margin-left: 0px;}
.float,
.subfloat {
    color: #FFF;
    border-radius: 14px;
    width: 28px;
    height: 28px;
    text-align: center;
    font-weight: bold;
    margin: 2px 5px;
    display: inline-block;
}
.float{
    background-color: #0C9;
}
.subfloat {
    background-color: #ff0000;
}

#area_coupon_code input{
    display: inline-block;
    max-width: 75%;
}

 /* ------menu left mypage ---------*/
 
.left{
    text-align: left;
}

/* temp for popular_word_list search */
#search_area .link_tag li:first-child::after {
    border-width: 8px 6px 8px 19px;
    border-color: #d44316 transparent #d44316 #d44316;
    border-style: solid;
    content: '';
    display: inline-block;
    margin-left: .5em;
    vertical-align: middle;
    width: 0;
}
#search_area .link_tag li:first-child {
    font-size: .875rem;
    font-weight: bold;
    margin-right: 1.5em;
    border:none;
    background-color:#f4f4f4;
    padding:0;
}
#search_area ul.link_tag {
    margin-top: .8rem;
    text-align: center;
}
#search_area ul.link_tag li{
    margin: 0 0.6% .8em 0;
}
.result-area ul.link_tag{
    margin-left: 0.6%;
}
.result-area ul.link_tag li{
    margin: 0 0.6% .8em 0;
}
#search_area select{
    padding: 0 2em 0 1em; 
    /* min-width: 100px;
    max-width: 159px; */
}

#search_area .select_wrap::before{
    right: 9px!important;
}

#web #mypage-sec .btnbox span.half{
    width: 67%;
}

@media screen and (max-width: 768px){
    #search_area .link_tag li:first-child {
        display: none;
    }
    #web .pcOnly {display: none;}
    #web .item_cat li {text-align: center;}
    #web #mypage-sec .btnbox span.half{
        width: 50%;
    }
    #search-page #main{
        margin-bottom: 2.5em;
    }

}
 
#web .link_tag li {font-size: .75rem;}

/* temp search button in header */
#search_area .search_text {
    background-image: url(); 
}
#search_area input:focus{
    outline: none;
}

@media screen and (max-width: 768px){
    /* #search_area .search_text {
        display: block;
        width: 100%;
    }  */
    #search_area .search_text {width: calc(100% - 10px) !important;}
    #search_area .field_wrap {
        display: block;
    } 
}


/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .number-style i.number-plus::after
    ,.number-style i.number-minus::after{
        top:auto;
    }
    /* mypage fix layout IE */
    /* #web .mypage-list .menu_list li p.txtlink{
        background-image:url(/themes/images/web/arrow_red.png);
    } */
    #web .mypage-list .menu_list li p.txtlink{
        /* padding-left: 2em;  */
        margin-bottom: -66%; 
        /* background-position-y: 5px; 
        background-position-x:-5px;
        background-size: 3em; */
    }
    #web .mypage-list a.exclamation_s::after{
        margin-bottom: -62.75%; 
        background-size: .75em;
    }
    #web #info h1 .icon{
        display:inline-block;
    }
    #localmenu a.exclamation_s::after{
        background-size: .75em;
    }
    /* #web .toggle_txt
    ,#web .btn-charge .btn.charge
    {
        background-position:110% center;
        background-size:10rem;
    } */
    h2.title::before{
        height: 1em;
    }
    #pBtnMore a{
        display: inline-flex;
        padding-top: 8px;
    }
    #pBtnMore .btn-more::before {
        margin-top: auto;
    }

}
@media screen and (max-width: 768px) {
    #web .mypage-list a.exclamation_s::after{
        margin-bottom: 0; 
    }
    #web .mypage-list .menu_list li p.txtlink{
        margin-bottom:0; 
    }
}

/* account add for IE */
#web .toggle-btn{
    display: block;
}
/* search list dont smooth when srcoll in safari */
@media screen and (max-width: 768px){
    #search-cat{
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    } 
}

/* profile name inline */
#web div.field input{
    display: inline-block;
}

/* fix wave water for wallet in IE */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #web div#mypage-sec .water_wave_back {
        right: 0;
        margin-right: -40%;
        width: 140%;
        display: block;
        fill: url("#Gradient1");
        animation: ie-wave-back 1.8s infinite linear; 
      }
    #web div#mypage-sec .water_wave_front {
        left: 0;
        margin-left: -40%;
        width: 140%;
        display: block;
        margin-bottom: -1px;
        fill: url("#Gradient1");
        animation: ie-wave-front .8s infinite linear; 
    }
    #web .btn.attention{ 
        background-image: url(/themes/images/icons/arrow_right.png);
        
    }
    #web ul.icon_list li{
        display: inline-block;
    }
    #web a.linktxt span.txt{
        display: inline-block;
        vertical-align: middle; 
        padding-bottom:13px;
        
    }

}
@keyframes ie-wave-front {
    100% {
      transform: translate(-50%, 0); 
      left: 100%;
    } 
}
@keyframes ie-wave-back {
    100% {
        transform: translate(50%, 0);
        right: 100%;
    }
}

 /* fix category img  */
#web .l-category i{
    height: 100%;
}
#web .l-category i img{
    max-height: 100%;
}

/* fix arrow show in IE */
#web .btn-charge .btn.charge{
    background-image: url(/themes/images/web/arrow.png);
}

/* fix button in line  */
#web .btn {
    display: inline-flex;
    flex-wrap: nowrap;

}
/* button in line  IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #web .btn {
        display: flex;
    } 
}
/* fix complete ul li text complete  */
#web li {
    line-height: normal;
}
/* fix text wallet_list inside before span */
.wallet_list li span.status{
    /* width: auto; */
    white-space: pre-wrap;
}
.wallet_list li span.price{
    /* width: 27%; */
    white-space: pre-wrap;
}


/* fix h5 web price  */
@media screen and (max-width: 768px){
    #web .item_calculate h5.price {
        padding-right:0;
    }
    #commitment_areaSP {
        display: block!important; 
    }
    #commitment_areaSP #parent_list h2{
        line-height: 3.125em;
        text-align: center;
        font-weight: bold;
    }
    #commitment_footer .button.total { 
        border-color: #ee6331
    }
}
/* fix ip 5SE so long title */
@media screen and (max-width: 300px){
    .title_content span {
        top: 2rem;
    }
}
 /* customer for account edit page */
#web ul.account-edit {
    border-top: none;
}
#web ul.account-edit li:first{
    border-top: none;
}
#web ul.account-edit li:last-child{
    /* border-bottom: none; */
}
#web ul.account-edit li span{
    display: inline-block;
    word-break: break-all;
    padding-right: 2em;
}
/* button in line  IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #web ul.account-edit li a{
        background-image: url(/themes/images/icons/arrow_right.png);
    }
    #web .s-category a.linktxt_blue::before{
        height: 0.65em;
        vertical-align: auto;
    }
    ul.left-category-list li{
        display: flex;
    }
}

/* #web .attention_link focus all div view */
#web div.attention_link a{
    display: block;
}
#web div.attention_link {
    border: none;
}
/* button in line  IE 10+ png ng.svg-> png  */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    ul.ng li:before
    ,ul.disc li::before  {
        height:0.8em;
        vertical-align:auto;
    }
    .category-linebox img{
        height: 55px;
    }
    /* arrow ringth appication index */
    .attention_link{
        background-image: url(/themes/images/icons/arrow_right.png);
    }
    #web .application .btn.attention { 
        background-image: url(../images/icons/arrow_right.png);
    }
    #web .btnbox span span.icon{
        top: 33%;
    }
}

/*  in trade/result color fix */
.txtout .switch__content:after {
    color: red;
}
/* link a for ">" can click */
#web .help-content-list a{
    width: 100%;
    display: block;
}

.category-box.mh9 .s-category {
    min-height: 10.7em;
}

/* color in download belt */
.download_belt
,.download_belt strong{
    color: white;
}

#web .pagetop{
    max-width: 10%;
    width: 50px;
}
/* fix arrow slider font */
#header_nav #nav_for_SP {
    z-index: 1001;
}
#web .application .has-box
,#web .application .no-box{
    background-color: #f36440;
    border-radius: 5px;padding: 1rem;
    margin-bottom: -5px;
}
#web .application .no-box{
    background-color: #3ec1d7; 
}
#web .application .hide_content{
    display: none; margin: 1em 0px;
}
#web .application .toggle_txt{
    background-position: 50% bottom;
    padding: 0.75em 0;
}
#web .application .toggle_txt .box-content{
    display:flex;
    text-shadow: 0 0 black;
}
#web .application .toggle_txt .box-content .text-content{
    padding: 0 1em;
    margin:auto
}
#web .application .text-content .header-text{
    font-size: 20px;
}
#web .application .text-content .footer-text{
    font-size: 14px;
}
#web .application .toggle_txt .box-content .md-img{
    width: 100px;
    height: 100px;
}
#web .application .hide_content .apply-link{
    white-space: normal;
    height: 55px;
    font-size:13px;
    padding: 1em 2em 1em 0.2em;
    justify-content: left;
    text-align: left;
    margin-top: 1em;
}
#web .application .hide_content .xs-img{
    margin: 0;
    width: 50px;
}
#web .application .hide_content .xs-img img{
    padding: 0 0.2rem; 
    max-width: 35px;
}
#web .application .icon-list{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}
#web .application .icon-list img{
    width: 40px;
    height: 40px;
    margin: 5px;
}
#web .application .no-box-item{
    height: auto;
    display: table;
}
#web .application .no-box-item .txt-descrpition{
    font-size:10px;
    color:gray;
    padding-left: 10px;
}
.d-flex{
    display: flex;
}
@media screen and (max-width: 700px) {
    #web .application{
        padding:0;
    }
    #web .application .toggle_txt .box-content .md-img{
        width: 70px;
        height: 70px;
    }
    #web .application  .text-content .header-text{
        font-size: 4vw;
    }
    #web .application .text-content .footer-text{
        font-size: 3.2vw;
    }
}

#web .price_col div.btn_right {
    padding: 0 1.8em;
    float: right;
}


#web h5.price em{
    width: 10em;
}


/* custom select */
.select-hidden {
    display: none;
    visibility: hidden;
    padding-right: 10px;
    height: 42px!important;
    width: 180px!important;
}

.select-styled {
    position: absolute; 
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; 
    padding: 8px 15px;
    background-color: white;
 
    border-color: #9e9e9e;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
 
    border-style: solid;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-width: 0; 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    height: 42px;
    min-width: auto;
    margin: 0; 
    width: 100%;


    word-break: keep-all;
    overflow: hidden;
    /* text-overflow: ellipsis; */
    display: inline-block;
} 
#search_area .select-styled p{
    font-size: 1em;
    word-break: keep-all;
    overflow: hidden;
    /* text-overflow: ellipsis; */
    display: inline-block;
    width: 100%;
    padding-right: 10px;   
    white-space: nowrap; 
}
  
.select-options {
    display: none; 
    position: absolute;
    top: 42px;
    right: 0;
    left: 0;
    z-index: 999;
    margin: 0;
    padding: 0;
    list-style: none; 
    border: 1px solid #9e9e9e;
    width: 400px;
    
}
.select-options li {
    margin: 0;
    padding: 3px 0;
    text-indent: 15px; 
    background-color: white;
    
}
.select-options li:hover{
    background-color:skyblue;
}

#search_area .select::after {
    visibility: hidden;
} 
#search_area .search_text{
    width: 37em;
}
@media screen and (min-width: 769px), print{
    .column { 
        width: 45%;
    }
    
}

#pointcard .input{
    vertical-align: initial;
    height: auto;
    line-height: initial; 
    
    border-radius: 3px;
    font-size: 1.125rem;
    padding: 0.2em;
    text-align: right;
    width: 7.5em;
}

#num.d6 {
    width: 5em!important;
    margin-right: 5px;
} 

@media screen and (max-width: 320px){ 
    /* iphoneSE */
    #card_wrap .front {
        margin-left: -131px!important;
    } 
    .content .product_list label::before { 
        width: 24%; 
    }
    #pointcard h2 > strong{
        font-size: 0.75em;
    }
    #web .snslink 
    ,#web .snsremove{
        font-size: 0.975em;
    }
}

.btn.disabled {
    background-color: #FFF!important;   
}
#web .btnbox span.half { 
    width: 50%; 
}

#web .btnbox span span.icon{
    margin: 0;
}
.select select:not([multiple]) {
    padding-right: 1.5em;
}
.birth_box select { 
    min-width: 80px;
}
.select:not(.is-multiple):not(.is-loading)::after { 
    right: 0.5em; 
}
#web .total-box-right,.total-box-right{
    padding-right: 2vw;
    text-align: right;
    font-size: 1.125rem;
}
#web.contents ul.list_alphabet li a{
    display: block;
    width: 100%;
    padding:14.5% 0;
}
#web ul.list_alphabet li{
    padding:0;
}
#web h5.price {
    padding-right: 2.2em;
    font-size: 1.55rem;
}
#category_list.product_list li label {
    padding: 1rem;
}

#web .set-notifi-note, .set-notifi-note{
    font-size:  0.75em;
}
@media screen and (max-width: 660px){
    #web p.lead {
        font-size: /*0.9rem*/ 3vw;
        text-align: left !important;
    }
    #header_nav #nav_for_SP nav { 
        height: 100vh;
        overflow-y: scroll;
    }
    /* #wallet .ic img {
        width: 9.5vw;
    }  */ 
    .second #left-menu h4.sttl::before{
        top:-1px!important;
    }
    ul.item-list-box li:last-child > a{
        border-bottom:0;
    }
    .paging_settings {
        padding-top:1em!important;
    } 
}

#commitment_searchbox .list_wrap span.range {
    display: block;
    position: relative;
    z-index: 200;
    padding: .25em 0;
    font-size: .75rem;
    margin-bottom: -25px;
}
#commitment_searchbox .list_wrap span.range input[type="number"] {
    width: 5em;
    border-color: #ccc;
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    font-size: 0.8125rem;
    line-height: 1.8;
    padding: 0 .35em;
    margin: 0 .25em;
    border-radius: 5px;
}
#commitment_searchbox .has_child input{
    border-color: #ccc;
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    font-size: 0.8125rem;
    line-height: 1.8;
    margin: 1rem 0;
    border-radius: 5px;
}
#commitment_formSP #commitment_header h2 { 
    text-overflow: ellipsis; 
    white-space: nowrap;
    overflow: hidden; 
    max-width: 80vw;
}
/*.price_img {
    height: 40px!important;
    vertical-align: text-bottom;
    max-height: fit-content!important;
    padding: 0;
    margin-bottom: -8px;
}
#search-page ul.item-list-box p.price img
,img.yen{
    margin-bottom: -1px;
}
#search-page ul.item-list-box li a img.list_price_img
{
    height: 26px!important;
    padding: 0;
    vertical-align: text-bottom; 
    width: auto!important;
    margin-bottom: -4px;
    max-width: fit-content!important;
}*/

/* 20200728 Futurebox 追加分 */
#search-page p.price {color: #d00; display: block; margin-top: -.5em;}
#search-page p.price em {position: relative; padding: 0 3.250em 0px 0.95em; line-height: 1 !important; display: inline-block;z-index: -1;}
#search-page p.price img.list_price_img {height: 26px;transform: translateY(7px);}
span.yen,span.tax {position: absolute; z-index: 1; }
span.yen {left: 0;bottom: -1px; font-weight: bold; font-size: 1.2em;}
span.tax {right: 0;bottom: 0;}

#main.item .infotable .price em img.price_img,
#purchase_area .price em img.price_img {height: 40px; max-height: 40px; transform: translateY(12px); padding: 0;}
#purchase_area .price em {font-style: normal;position: relative; padding: 0 3em 0 .75em; line-height: 1 !important; display: inline-block; font-size: 0.875rem;}
#main.item .infotable .price em {padding: 0 3.5em 0 1em; }
#main.item span.yen,
#purchase_area .price span.yen{ font-size: 1.4em; vertical-align: baseline;}

@media screen and (max-width: 660px){
#search-page p.price img.list_price_img {height: 8vw;width: auto !important;max-width: 100%;transform: translateY(1vw);}
span.tax {right: 6px;}
span.yen{left:5px;}
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#search-page p.price em {position: relative; padding: 0 3.3em 0 .85em; line-height: 1 !important; display: inline-block;}
#search-page p.price img.list_price_img {height: 26px;transform: translateY(8px);}
#main.item .infotable .price em,
#purchase_area .price em {padding: 0 3.3em 0 .85em; }
#search-page p.price span.yen { bottom: 0;}
#main.item p.price span.yen,
#purchase_area p.price span.yen { bottom: -2px;}
}
/* 20200728 Futurebox 追加分ここまで */

#main.item .infotable th{
    vertical-align : middle!important;
}
#main.item .infotable p.price{
    margin-bottom: 16px/*!important 4519 20220909*/;
}

ul.pager li a
,.pager-list li a{
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pager-list li a{ 
    width: 100%;
    height: 100%;
}

#tradein #sec2 .product_list{
    flex-wrap: wrap;
}
.btn-more::before { 
    margin-top: -2px;
} 
.btn .icon.right {
    position: absolute;
    right: 3.2vw;
}
.btn .icon.right  img {
    height: 12px;
}
.btn-gotop .btn.gotop  { 
    height: 48px; 
}
.pager-box .pager-list li a {
    display: inline-flex;
}
div.breadcrumb::before{
    content:none;
}
#commitment_searchbox input[type="text"].check + label
,#commitment_formSP input[type="text"].check + label
{ 
    margin-left: 0.5rem; 
}
#commitment_formSP input[type="text"].check
{  
    border-color: #ccc;
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    font-size: 3.2vw;
    line-height: 2.08;
    padding: 0 1em;
    width: 13em; 
    border-radius: 0; 
    box-shadow:none;
}
#commitment_searchbox input[type="text"].check{
    padding: 0 1em;
    width: 13em;
    border-radius: 0; 
    box-shadow:none;
}
#commitment_footer ul.buttonlist {
    padding-left: 0!important;
    margin-bottom:0!important;
}
#commitment_footer ul.buttonlist input.clear {
    border-color:transparent;
}
#tradein ol.breadcrumb {
    padding: .4em 3vw .4em 1em;
    min-width:auto;
}
#tradein section.wrp_brd{
    border-bottom:none;
}
@media screen and (max-width: 768px){
    div.breadcrumb ol {
        margin-left: 0 ; 
    }
}
#search-page #commitment_searchbox input[type="checkbox"] + label::before 
,#search-page #commitment_areaSP input[type="checkbox"] + label::before 
,#search-page .refine_list input[type="checkbox"] + label::before{
    height: 0.85rem;
    width: 0.85rem;
    vertical-align: middle;
}
#search-page #commitment_searchbox .list_wrap:first-child:after{
    content: none;
}

ul.delete_txt {
    display: flex;
    flex-wrap: wrap;
    padding: .5em 0;
    max-width: 940px;
    margin: 0 auto;
    border-bottom: 1px #ddd solid;
}

    ul.delete_txt li {
    font-size: .625rem;
    margin-bottom: .5em;
}

ul.delete_txt li a {
    display: block;
    border: 1px #ee6331 solid;
    border-radius: 1em;
    padding: .5em 1.75em .5em .65em;
    margin-right: .5em;
    color: #ee6331;
    background-attachment: scroll;
    background-position: right center;
    background-image: url(/themes/images/web/btn_close_s.svg);
    background-size: 1.65em auto;
    background-repeat: no-repeat;
    line-height: 1;
}
@media screen and (max-width: 660px){
    body.top #category-home ul.cat_link li:nth-child(3n) { margin-right: 0 !important;border-right: 0;}
    #search-page ul.item-list-box li a img.list_price_img {   margin-bottom: -5px;  }
    section#search-cat div#web #category-home ul.cat_link {  padding: 3px 3px 0 3px !important;  }

} 
#commitment_form div.area_wrap{
    height: 63vh;
} 
#search-page #commitment_areaSP input.freetxt {
    height: 2.08em;
}
/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #search-page ul.item-list-box p.price img, img.yen{
        margin-bottom:0;
    } 
    #search-page .list_price_img, .price_img{
        margin-bottom:-1px!important;
    }
    #search-page #purchase_area .price img{
        margin-bottom:-2px;
    }
    #search-page .item#main .infotable .price em img.price_img{
        max-height:none;
    }

}
/* .paging_settings div.pcOnly ul.pager{
    border: none;
    text-align: center;
    display: table;
}
.paging_settings div.pcOnly ul.pager li{
    max-width: 45px;
    display: inline-block;
}
.paging_settings div.pcOnly ul.pager li:last-child{ 
    border-right: 1px #c9c9c9 solid; 
} 
.paging_settings div.pcOnly ul.pager .disabled{
    display: none;
}
*/
#commitment_overlay #commitment_searchbox .button.search
,#search-page #aside .one-btn-box a.kodawari_btn
,#search-page #aside .one-btn-box a.ic_search{ 
    border:0;
}
#search-page #aside .one-btn-box a.kodawari_btn{
    background: linear-gradient(to left, #de6032 0%, #a72902 100%);
}
select::-ms-expand {
    display: none;
}
#tradein #sec1 .nav_list{
    display: block;
}
@media screen and (max-width: 980px){ 
    #tradein .content .product_list li{
        /*max-width: 200px!important;*/
    }
}
@media screen and (min-width: 980px){ 
    #category_list.product_list li label{
        padding: 15px 0rem !important;
    }
}
@media screen and (max-width:768px){
    #search-page p.price em {z-index: 1 !important;} 
}

/* css tradein */
.class_center{
    padding: 1rem 1rem 1rem 7% !important;
}
@media screen and (min-width: 980px) and (max-width: 1492px){
.center_note,.center_note1{
        padding-top: 2em !important;
 }
}
@media screen and (min-width: 1492px){
.center_note{
        padding-top: 15px !important;
 }
}
@media screen and (max-width: 490px){
.center_note{
        padding-top: 2.3em !important;
 }
 .center_note1{
     padding-top: 1.65rem !important;
 }
}
@media screen and (max-width: 397px){
.center_note,.center_note1{
        padding-top: 1.1rem !important;
 }
}
#product_list label{
text-align: left;
}

/* 4113 2022.3 無料査定のお申し込みページ */

/* layout */
.container.apply {max-width: 1000px;width: 1000px}
.container.apply .contents {margin: 1rem auto 0;}
.apply .outer_grid * {box-sizing: border-box;}
.apply .outer_grid {
display: grid;
grid-template-columns: 64% 33%;
grid-template-rows: auto auto;
column-gap: 3%;
row-gap: 30px;
margin: 2rem auto 0;
grid-template-areas: "delivery shop"
"delivery visit";}

.apply .outer_grid_item {
text-align: center;    
padding: 15px 24px 30px;
border-radius: 10px;}

.apply .outer_grid_item.delivery {
grid-area: delivery;
background: #f36440;}

.apply .outer_grid_item.shop {
grid-area: shop;
background: #30b5ef;}

.apply .outer_grid_item.visit {
grid-area: visit;
background: #7ec658;}

.apply .box_item {
position: relative;
height: 100%;  
background: #fff;
border-radius: 6px;
padding: 1rem 4% 60px;
box-shadow: 0 0 10px rgba(0, 0, 0, .3)
}

.apply .flexbox .box_item { /*　h3の高さ分を引く　*/
height: calc(100% - 50px - 14px);} 

.apply .outer_grid .box_bottom {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
font-size: .75rem;
color: #333;
text-align: right;
border-radius: 0 0 6px 6px;
padding: 1.13em 4em 1.12em 0;
background: rgba(0,0,0,.05) url(/themes/images/web/application/ic_rakuda_bottom.svg) no-repeat top 55% right 1.3em/1.9em;}

.apply .inner_grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto auto;
column-gap: 20px;
row-gap: 18px;
height: calc(100% - 65px);
grid-template-areas: "self kit"
"label kit";}

.apply .inner_grid_item.self {grid-area:self;}
.apply .inner_grid_item.kit {grid-area:kit;}
.apply .inner_grid_item.label {grid-area:label; position: relative;}
.apply .outer_grid_item.visit {position: relative;}

.apply .disabled {pointer-events: none;}
.apply .disabled .disabled_msg {
position: absolute;
top: 0;
left: 0;
border-radius: 6px;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
background: rgba(221,221,221,.6);}

@media screen and (max-width: 1050px) {
.apply .outer_grid {    
grid-template-columns: repeat(2, 1fr);
column-gap: 20px;
grid-template-areas: "delivery delivery"
"shop visit";}
}

@media screen and (max-width: 767px) {
.apply .outer_grid {display: block; width: 80%;}
.apply .inner_grid {display: block;}
}

@media screen and (max-width: 660px) {
.apply .outer_grid {width: 100%;}
}

/* parts */
.apply .outer_grid_item h3 {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
height: 50px;
font-size: 1.25rem;
font-weight: bold;
color: #fff;
margin: 0 auto 14px;
padding-left: 0.8em;}

.apply .outer_grid_item h3::before {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -2.2em;
content: "";
width: 50px;
height: 50px;
background-size: contain;
background-repeat: no-repeat;}

.application .toggle_txt {pointer-events: none;background-image: none;}
#web .application .hide_content {display: block; margin: 0;}

.btn.attention.apply-link {background-image: url(/themes/images/web/arrow_right_ccc.svg);background-size: auto;}
#web .application .hide_content .xs-img {min-width: 44px;width: 15%;}
#web .application .hide_content .xs-img img {padding: 0;}
#web .application .hide_content .xs-img img.w30 { width: 30px;}
#web .application .hide_content .xs-img img.w26 { width: 26px;}
#web .application .hide_content .xs-img img.w20 { width: 20px;}

.apply .outer_grid_item.shop h3,
.apply .outer_grid_item.visit h3 {margin-left: 1.5em;}
.apply .outer_grid .delivery h3::before {background-image: url(/themes/images/web/application/ic_delivery_head.svg);}
.apply .outer_grid .shop h3::before {background-image: url(/themes/images/web/application/ic_shop_head.svg);}
.apply .outer_grid .visit h3::before {background-image: url(/themes/images/web/application/ic_visit_head.svg);}

.apply .box_item h4 {position: relative; font-size: 1rem; font-weight: bold; margin-bottom: 0.6em;}
.apply .box_item h4::after {
position: absolute;
left: 50%;
bottom: -.4em;
transform: translateX(-50%);
content: "";
width: 7em;
height: 2px;}

.apply .box_item.self h4::after {background: #f36440;}
.apply .box_item.kit h4::after {background: #3ec1d7;}
.apply .box_item.label h4::after {background: #6ccd58;}
.apply .box_item img {width: 180px;}
.apply .shop .box_item img,
.apply .visit .box_item img {margin: .5rem 0 1rem;}

#web .application .toggle_txt {display: block; padding: 0;}
.apply #web .box_item p {text-align: left; font-size: .8125rem; font-weight: normal; letter-spacing: .04em; line-height: 1.4; margin-bottom: 0; padding: 0 2%;}
#web .application .hide_content .apply-link { letter-spacing: .04em; border: 1px solid #ddd;}
#web .application .hide_content .apply-link span.txt {display: inline-block;line-height: 1.4; font-weight: bold; padding-top: .1em;} 
.application a.help_link {position: relative; display: block; text-align: right; font-size: .75rem; color: #3273dc; padding-right: 1.5em;margin-top: 1.5em;}
.application a.help_link::after {
position: absolute;
right: 0;
content:"";
width: 15px;
height: 15px;
background: url(/themes/images/web/application/ic_help.png) no-repeat center right/contain;}

.apply .box_item.inner_grid_item,
.apply .flexbox .box_item {position: relative;}
.apply .box_item.inner_grid_item a,
.apply .flexbox .box_item a {transition: all .3s ease-out;}
.apply .box_item.inner_grid_item a::before,
.apply .flexbox .box_item a::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;}

#web .application .hide_content .apply-link:hover > *,
.apply .box_item.inner_grid_item.label:hover h4,
.apply .box_item.inner_grid_item.label:hover img,
.apply .box_item.inner_grid_item.label:hover p,
.apply .box_item.inner_grid_item.label:hover .box_bottom,
.apply .flexbox .box_item:hover img,
.apply .flexbox .box_item:hover p,
.apply .flexbox .box_item:hover .box_bottom,
.application a.help_link:hover {opacity: .6; transition: all .3s ease-out;}

.apply #web .box_item.disabled_msg p {display: none;} 
.apply #web .box_item.disabled .disabled_msg p {display: block; font-size: 1.125rem; font-weight: bold; text-align: center; margin-top: 4em;}    

/* テキスト改行関連 */
.nowrap {white-space: nowrap;}
.inline-block {display: inline-block;}
br.pcOnly {display: block;}
br.spOnly {display: none;}
br.miniPCless{display: none;}

@media screen and (max-width: 1050px) {
br.pcOnly {display: none;}    
br.miniPCless {display: block;}
}

@media screen and (max-width: 660px) {  
br.spOnly {display: block;}
}

/* レスポンシブ */
@media screen and (max-width: 1050px) {   
.container.apply {width: 100%;}    
#web .application p span.exceptPC {display: inline;}
}    
@media screen and (max-width: 767px) {
.apply .outer_grid_item {margin-bottom: 1.5rem;}
.apply .inner_grid_item {margin-bottom: 1.3rem;}
.apply .inner_grid_item:last-child {margin-bottom: 0;}

/*アコーディオン関連*/
.application .toggle_txt {background-image: url(/themes/images/web/arrow_down_ccc.svg);background-size: auto;}
.application .toggle_txt.open {background-image: url(/themes/images/web/arrow_up_ccc.svg);background-size: auto;}
#web .application .toggle_txt {display: block; padding: 0 0 1.3em;}
.application .toggle_txt {pointer-events: auto;}
#web .application .hide_content {display: none;}
}

@media screen and (max-width: 660px) {
.apply .outer_grid_item {margin-bottom: 6.4vw;} 
.apply .outer_grid_item.delivery h3 {margin-left: 1.5em;}
.apply .box_item {padding: 1rem 4% 16vw;}
.apply .flexbox .box_item {padding-bottom: 13vw;}
.apply #web .application .toggle_txt {padding: 0 0 .6em; background-size: 4.5vw;}
.apply .outer_grid_item {padding: 2vw 5vw 9vw;}
.apply .outer_grid_item h3::before { content: ""; width: 10vw; height: 10vw;}
.apply .box_item img {width: 48vw;}
.apply #web .box_item p {padding: 0 2% 1em;}
.btn.attention.apply-link {background-size: 2.1vw;}
#web .application .hide_content .apply-link {height: auto; min-height: 4.1em;padding: .5em 2em .5em 0.2em;}
.application a.help_link::after {width: 4vw; height: 4vw;}
#web .application .hide_content .xs-img {min-width: 11.7vw;width: 15%;}
#web .application .hide_content .xs-img img {max-width: none;}
#web .application .hide_content .xs-img img.w30 { width: 8vw;}
#web .application .hide_content .xs-img img.w26 { width: 6.9vw;}
#web .application .hide_content .xs-img img.w20 { width: 5.3vw;}

/* 18pt */
.apply #web .box_item.disabled .disabled_msg p {font-size: 4.8vw;}

/* 16pt */
.apply .outer_grid_item h3,
.apply .box_item h4 {font-size: 4.27vw;}

/* 13pt */
.apply #web .outer_grid .box_item p,
#web .application .hide_content .apply-link {font-size: 3.47vw;}

/* 12pt */
.application a.help_link,
.apply .outer_grid .box_bottom {font-size: 3.2vw;}
}

/* end 4113 2022.3 無料査定のお申し込みページ */
tr.disable{display: none;}