@charset "UTF-8";

h1{
    font-size:1.8rem
}

#case_nav{
    padding:0.5rem;
}

#case_nav ul{
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 3rem;
}

#footer{
    margin-top:0;
}

.jirei_hd_desc{
    width:50%;
    max-width:540px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:5rem;
    text-align: center;
    font-size: 1.25rem;
}

.embedded_movie{
    margin-top:1rem;
    max-width:100%;
    margin-left:auto;
    margin-right: auto;
}

.embedded_movie > iframe{
    width:560px;
    height:315px;
    max-width: 100%;

}

@media screen and (max-width:768px) {
    .jirei_hd_desc{
        width:100%;
        max-width:800px;
    }

    .embedded_movie > iframe{
        width:320px;
        height:185px;
    }
}


.jirei_all_dl{
    margin-top:2rem;
    text-align: center;
    font-size:1.1rem;
    white-space: nowrap;
}

.jirei_all_dl > a{
    border: 1px var(--main-color) solid; 
    background-color: var(--light-bg-color);  
    border-radius: var(--border-radius);
    padding: 1rem 2rem;
    transition: .3s all;
}

.jirei_all_dl > a:hover{
    color: var(--light-text-color);
    background-color: var(--main-color);
}

.jirei_all_dl > a::before{
    content: '';
    display: inline-block;
    width:2em;
    height: 2em;
    background-image: url('../images/case/icon_btn.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    position: relative;
    left:0;
    top: 0.6em;
    margin-right:1em;
    filter: grayscale(100%);
}

@media screen and (max-width:768px) {
    .jirei_all_dl > a{
        padding: 1rem 0.5rem;
    }
}


/* 絞り込みフィルタ */
input.filter{
    display: none;
}

label.filter{
    padding:0.5rem;
    border-radius: var(--border-radius);
}

label.filter::before{
	content:'\02610';
	color: var(--main-color);
    margin-right:0.2rem;
}

label.filter:hover{
    outline:1px var(--main-color) dashed;
    border-radius: 0;
}

#k10:checked ~ * label.k10::before,
#k20:checked ~ * label.k20::before,
#k30:checked ~ * label.k30::before,
#k50:checked ~ * label.k50::before,
#k100:checked ~ * label.k100::before,
#k101:checked ~ * label.k101::before,
#g1d:checked ~ * label.g1d::before,
#g1o:checked ~ * label.g1o::before,
#dr1t:checked ~ * label.dr1t::before,
#geo:checked ~ * label.geo::before,
#dz:checked ~ * label.dz::before,
#roumu:checked ~ * label.roumu::before,
#safety:checked ~ * label.safety::before,
#eco:checked ~ * label.eco::before,
#eff:checked ~ * label.eff::before,
#service:checked ~ * label.service::before,
#cost:checked ~ * label.cost::before,
#kamotu:checked ~ * label.kamotu::before,
#bus:checked ~ * label.bus::before{
	content:'\02611';
	color: var(--main-color);
    margin-right:0.2rem;
}

#k10:checked ~ * label.k10,
#k20:checked ~ * label.k20,
#k30:checked ~ * label.k30,
#k50:checked ~ * label.k50,
#k100:checked ~ * label.k100,
#k101:checked ~ * label.k101,
#g1d:checked ~ * label.g1d,
#g1o:checked ~ * label.g1o,
#dr1t:checked ~ * label.dr1t,
#geo:checked ~ * label.geo,
#dz:checked ~ * label.dz,
#d2d:checked ~ * label.d2d,
#d2a:checked ~ * label.d2a,
#f1a:checked ~ * label.f1a,
#roumu:checked ~ * label.roumu,
#safety:checked ~ * label.safety,
#eco:checked ~ * label.eco,
#eff:checked ~ * label.eff,
#service:checked ~ * label.service,
#cost:checked ~ * label.cost,
#kamotu:checked ~ * label.kamotu,
#bus:checked ~ * label.bus{
	background-color: var(--light-bg-color);
}

#k10:checked ~ * .jirei_item:not(.k10),
#k20:checked ~ * .jirei_item:not(.k20),
#k30:checked ~ * .jirei_item:not(.k30),
#k50:checked ~ * .jirei_item:not(.k50),
#k100:checked ~ * .jirei_item:not(.k100),
#k101:checked ~ * .jirei_item:not(.k101),
#g1d:checked ~ * .jirei_item:not(.g1d),
#g1o:checked ~ * .jirei_item:not(.g1o),
#dr1t:checked ~ * .jirei_item:not(.dr1t),
#geo:checked ~ * .jirei_item:not(.geo),
#dz:checked ~ * .jirei_item:not(.dz),
#d2d:checked ~ * .jirei_item:not(.d2d),
#d2a:checked ~ * .jirei_item:not(.d2a),
#f1a:checked ~ * .jirei_item:not(.f1a),
#roumu:checked ~ * .jirei_item:not(.roumu),
#safety:checked ~ * .jirei_item:not(.safety),
#eco:checked ~ * .jirei_item:not(.eco),
#eff:checked ~ * .jirei_item:not(.eff),
#service:checked ~ * .jirei_item:not(.service),
#cost:checked ~ * .jirei_item:not(.cost),
#kamotu:checked ~ * .jirei_item.bus,
#bus:checked ~ * .jirei_item:not(.bus){
    display: none; 
}

.jirei h3{
    font-size: 108%;
    padding:0 0.3rem;

}
.jirei h3+div{
    font-size: 94%;
    padding:0 0.3rem;
}

.jirei_filter_hd{
    font-weight:bold;
    border-bottom:1px var(--border-color) solid;
    padding:0.25rem 0 0.25rem 0.4rem;
}

.jirei_filter{
    margin-top: 0.75rem;
    margin-bottom: 1rem;
}

.jirei_items{
    margin-top:5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap:2rem;
    row-gap: 4rem;

}

.jirei_item{
    position: relative;
    background-color: var(--base-bg-color);
}

ul.syasaiki{
    display: flex;
    margin-top: 0.5rem;
}

ul.kouka{
    display: flex;
    margin-top:0.5rem;
    margin-bottom: 0.25rem;
}

ul.syasaiki > li{
    padding:0.2rem 0.5rem;
    margin-right:0.5rem;
    border:1px var(--border-color) solid;
    color: var(--middle-text-color);
}

ul.kouka > li{
    padding:0.2rem 0.5rem;
    margin-right:0.5rem;
    background-color: var(--base-bg-color);
    border:1px var(--sub-color) solid;
    color:var(--sub-color);
}

.jirei_kiji a{
    position: relative;
    z-index:110;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    width: 90%;
    margin: 0.75rem auto;
    padding: 0.5rem 1rem;
    background-color: var(--base-bg-color);
    color: var(--main-color);
    border: 1px var(--main-color) solid;
    border-radius: var(--border-radius);

    box-shadow: 0px 2px 2px #ccc;

    transition: all 0.3s;
}

.jirei_kiji a:hover{
    background-color: var(--main-color);
    color: var(--light-text-color);
    border: 1px var(--main-color) solid;

    box-shadow: none;
    top:2px;
}

.jirei_kiji a::after{
    content: '';
    position: absolute;
    display: block;
    width:0.5rem;
    height:0.5rem;
    z-index: 102;
    right: 0.75rem;
    margin-left:0.5rem;
    border-right:2px var(--main-color) solid;
    border-bottom:2px var(--main-color) solid;
    transform: rotate(-45deg);
}

.jirei_kiji a:hover::after{
    right: 0.55rem;
    border-right-color:var(--light-text-color);
    border-bottom-color:var(--light-text-color);
}

.jirei_detail_info{
    font-size:83%;

    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap:0.75rem;
    padding:0 0.5rem;
    margin:0.5rem auto;
}

.jirei_detail_info > span{
    display: inline-block;
}

.jirei_detail_info > span::before{
    content: '';
    width:1.5rem;
    height:1.1rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    display:inline-block;
    position: relative;
    top:0.3em;
    filter: grayscale(100%);
}

.jirei_detail_info > span.icon1::before{
    background-image: url('../images/case/icon1.png');
}

.jirei_detail_info > span.icon2::before{
    background-image: url('../images/case/icon2.png');
    width:2.5rem;
}

.jirei_detail_info > span.icon3::before{
    background-image: url('../images/case/icon3.png');
}

.jirei_detail_info > span.icon4::before{
    background-image: url('../images/case/icon4.png');
}

.jirei_detail_info > span.icon5::before{
    background-image: url('../images/case/icon5.png');
}

.jirei_detail_info > span.icon6::before{
    background-image: url('../images/case/icon6.png');
    height: 1.5rem;
}


@media screen and (max-width:768px) {
    .jirei_items{
        grid-template-columns: repeat(1, 1fr);
        column-gap:1rem;
        padding-left:1rem;
        padding-right:1rem;
        margin-top:2rem;
    }

    .jirei_item{
        grid-template-rows: repeat(7, max-content);
    }

    .jirei_item h3{
        padding: 0.5rem;
        width:calc(100% - 1rem)
    }

    .jirei_item h3~div{
        padding:0.5rem ;
    }

    label.filter{
        padding-top:0.3rem;
        padding-bottom:0.3rem;
    }

    .jirei_filter{
        display: flex;
        flex-wrap: wrap;
        margin-top:0;
        margin-bottom:0;
    }

    .jirei_kiji a{
        white-space: nowrap;
    }
}



/* FAQ絞り込みフィルタ */
#faq_dounyu:checked ~ * label.faq_dounyu::before,
#faq_syasaiki:checked ~ * label.faq_syasaiki::before,
#faq_dr:checked ~ * label.faq_dr::before,
#faq_ext:checked ~ * label.faq_ext::before,
#faq_itp:checked ~ * label.faq_itp::before,
#faq_cost:checked ~ * label.faq_cost::before,
#faq_drenkei:checked ~ * label.faq_drenkei::before{
	content:'\02611';
	color: var(--main-color);
    margin-right:0.2rem;
}

#faq_dounyu:checked ~ * label.faq_dounyu,
#faq_syasaiki:checked ~ * label.faq_syasaiki,
#faq_dr:checked ~ * label.faq_dr,
#faq_ext:checked ~ * label.faq_ext,
#faq_itp:checked ~ * label.faq_itp,
#faq_cost:checked ~ * label.faq_cost,
#faq_drenkei:checked ~ * label.faq_drenkei{
	background-color: var(--light-bg-color);
}

#faq_dounyu:checked ~ * .faq_item:not(.faq_dounyu),
#faq_syasaiki:checked ~ * .faq_item:not(.faq_syasaiki),
#faq_dr:checked ~ * .faq_item:not(.faq_dr),
#faq_ext:checked ~ * .faq_item:not(.faq_ext),
#faq_itp:checked ~ * .faq_item:not(.faq_itp),
#faq_cost:checked ~ * .faq_item:not(.faq_cost),
#faq_drenkei:checked ~ * .faq_item:not(.faq_drenkei){
    display: none;
}


.faq_hd_desc{
    margin-left:auto;
    margin-right:auto;
    margin-bottom:5rem;
    text-align: center;
}

.faq_filter_hd{
    font-weight:bold;
    border-bottom:1px var(--border-color) solid;
    padding:1rem 0 0.25rem 0.4rem;
}

.faq_filter{

    background-color: var(--base-bg-color);
}

.faq_filter label.filter{
    display: inline-block;
    margin-top:0.25rem;
}

.faq_items{
    margin-top: 2rem;
}

.faq_item:nth-of-type(n + 2){
    margin-top:2rem;
}

.faq_items dl dt{
    border-bottom: 1px var(--border-color) solid;
    margin-bottom:0.5rem;
    font-weight:bold;
    font-size:var(--fs-large)
}

.faq_item dl dd{
    line-height:1.75rem;
}

.faq_item :is(a, a:visited, a:active, a:hover){
    color:var(--sub-color);
    text-decoration: underline;
}

/* movie */
.wl_mv{
    width:50%;
    max-width:540px;
    margin-left:auto;
    margin-right: auto;
    text-align: center;
}

.wl_mv .wbr span{
    font-size:1.25rem;
}

.case_movie_item{
    margin-top: 5rem;
}

.case_movie_item > div:first-of-type{
    align-self: center;
}

.case_movie_item .top_oto_button{
    margin-top:2rem;
}

.movie_desc{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media screen and (max-width:768px) {
    .grid.movie{
        width: 90%;
        display: block;
        column-gap: 1%;
        margin-left:auto;
        margin-right:auto;
    }
}



/* jirei_web*/
.jirei_bg{
    background-color: var(--light-bg-color);
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.jirei_web h2{
    text-align: left;
    border-left:3px var(--border-color) solid;
    text-indent: 0.5em;
    font-size: 1.25rem;
    padding-top:0.2rem;
    padding-bottom: 0.2rem;
}

.jirei_web p{
    line-height:1.75rem;
}

.jirei_web_hd{
    position: relative;
    margin-top:2rem;
}

.jirei_web_hd_text{
    position: absolute;
    width:100%;
    left:0;
    bottom:20%;
}

.jirei_web_hd_text > div:first-of-type > span{
    display: inline-block;
    font-size: 1.5rem;
    padding:0.5rem 2rem;
    margin-bottom: 1rem;
    
    background-color: rgba(0,0,0,0.75);
    color:#fff;
}

.jirei_web_hd_text > div:last-of-type{
    display: inline-block;

    font-size: 1.25rem;
    padding:0.5rem 2rem;

    background-color: rgba(0,0,0,0.75);
    color:#fff;
}

.jirei_web_hd_text.case009{
    bottom:10%;
}

.jirei_web_hd_text.case010{
    bottom:5%;
}

.jirei_cont{
    margin-top:2rem;
}

.jirei_cont p{
    line-height:2rem;
}

.jirei_cont p:not(.tti){
    text-indent: 1rem;
    margin-top:2rem;
}

.jirei_cont p.tti + p{
    margin-top:0rem;
}

.jirei_cont p > span:first-child{
    font-weight: bold;
    margin-right:1rem;
    margin-left: -1rem;
}

.jirei_cont h3{
    margin-top: 5rem;
}


.jirei_cont h3 + p.tti{
    margin-top: 1rem;
}


@media screen and (max-width:768px){
    .jirei_web_hd_text{
        position: relative;
        left:0px;
        top:0px;
    }

    .jirei_web_hd_text > div{
        position: relative;

        width:100%;
        padding: 0;
    }

    .jirei_web_hd_text > div:first-of-type > span{
        position: relative;

        width:100%;
        margin-bottom: 0;
        font-size: 1.1rem;
        padding:0.5rem 1rem;
    }

    .jirei_web_hd_text > div:last-of-type{
        width:100%;
        font-size: 1rem;
        padding: 0;
    }

    .jirei_web_hd_text > div:last-of-type > span{
        padding:0 1rem;
    }

    .jirei_cont{
        padding:0 1rem;
    }

    .content.jirei_web > div.wl_narrow > div:first-of-type{
        padding:0 1.1rem;
    }
}


p.tti{
    color: var(--sub-color);
    margin-top: 3rem;
    margin-bottom:0.5rem;
    font-weight: bold;
}

p.tti::before{
    content: '－';
}

.content.jirei_web_profile{
    padding-top:0;
}

.content.jirei_web_profile+.content.jirei_web{
    padding-top: 0;
}

.jirei_web_profile_desc{
    display: flex;
    justify-content: space-between;
}

.jirei_web_profile_desc > div:first-of-type{
    text-align: center;
    font-size:1.1rem;
    flex:0 0 30%;
}

.jirei_web_profile_desc > div:last-of-type{
    flex: 0 0 65%;
}

.jirei_web_profile_desc > div:last-of-type > div:first-child{
    font-weight: bold;
    font-size:1.1rem;
    margin-bottom:1rem;
}

.jirei_web_profile_desc .dotlist{
    margin-top:1rem;
}

.dounyu_effect{
    margin-top:1rem;
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 1.1rem;
}

.dounyu_effect ul{
    display: flex;
}

.dounyu_effect ul li{
    padding:0.25rem 1rem;
    margin-left: 1rem;
    border-radius: var(--border-radius);
    background-color: var(--dark-bg-color);
    color: var(--light-text-color);
    font-size:1rem;
    font-weight: normal;

}

.jirei_web_products{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, max-content);
    grid-auto-flow: column;
    column-gap: 3rem;
}

.jirei_web_products > div:nth-of-type(1),
.jirei_web_products > div:nth-of-type(5){
    font-weight: bold;
    color:var(--sub-color);
    padding-bottom:1rem;
}

.jirei_web_products > div:nth-of-type(2),
.jirei_web_products > div:nth-of-type(6){
    align-self: center;

}


@media screen and (max-width:768px){
    .wl_mv{
        width:90%;
        margin-left:auto;
        margin-right: auto;
    }
}

.to_details > a{
    position: relative;
    display: block;
    background-color: var(--sub-color);
    color: #fff;
    padding: 0.25rem 2rem 0.25rem 0.5rem;

}

.to_details > a::after{
    content: '';
    display: block;
    position: absolute;
    border-right:2px #fff solid;
    border-bottom:2px #fff solid;
    width:0.6rem;
    height:0.6rem;
    top:calc(50% - 0.6rem / 2 - 1px);
    right:1rem;
    transform: rotate(-45deg);

}

.to_details > a:hover::after{
    right:calc(1rem - 6px);
}