@charset "utf-8";
:root{
    --px15: 15px;
    --px20: 20px;
    --px30: 30px;
    --px40: 40px;
    --px50: 50px;
    --px60: 60px;
    --px80: 80px;
    --px120: 120px;

    --f60: 60px;
    --f48: 48px;
    --f36: 36px;
    --f28: 28px;
    --f20: 20px;
    --f16: 16px;
    --f12: 12px;

    --red: #E83428;
    --orange: #F3950A;
    --blue: #7092b7;
}
*{
    box-sizing: border-box;
}
a,header,.btn >*{
    transition: all .3s;
}
.clearfix {
    display: block;
}
.pc {
    display: block;
}
.sp {
    display: none;
}
img {
    display: block;
}
section{
    position: relative;
}
h1,h2{margin-bottom: var(--px50);position: relative;line-height: 1.3;}
h3{margin-bottom: var(--px40);position: relative;}
h2{
    font-size: var(--f60);
    text-align: center;
}
h2 p img{margin: 0 auto;}
h3{
    font-size: var(--f48);
    text-align: center;
    line-height: 1.3;
}
h4{
    font-size: var(--f36);
    line-height: 1.3;
}
.ttl01{position: relative;}
.ttl01::after{
    content: "";
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translate(-50%,0);
    width: 90px;
    height: 5px;
    background-color: #111;
}
html{height: 100%;}
main{
    width: 100%;
}
body{
    font-size: var(--f20);
    font-weight: 500;
}
.inner{
    max-width: 1260px;
    margin: 0 auto;
    padding: var(--px80) var(--px20) var(--px60);
}
.inner.sub{
    padding-top: var(--px120);
}
.top_ma{
    padding-top: var(--px80);
}
.flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.a_i_st{align-items: stretch;}
.a_i_fs{align-items:flex-start;}
.j_c_c{justify-content: center;}
.f_d_rr{flex-direction: row-reverse;}
.bold{
    font-weight: 700;
}
.small{
    font-size: 75%;
}
.big_s{
    font-size: 130%;
}
.center{
    text-align: center;
    margin: 0 auto;
}
.note{
    font-size: var(--f12);
    text-align: right;
}
.red{color: var(--red);}
.blue{color: var(--blue);}
.btn >*{
    border-radius: 9999px;
    align-items: center;
    white-space: nowrap;
}
.btn >*:hover{
    cursor: pointer;
}
.y_btn a{
    background-color: #f0ff48;
    border-radius: 9999px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.y_btn a:hover{
    background-color: #000;
    color: #fff;
}
.y_btn a:hover i,.o_btn a:hover i{
    filter: invert(100%);
}
.o_btn a{
    background-color: var(--orange);
    border-radius: 9999px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.o_btn a:hover{
    background-color: var(--red);
    color: #fff;
}
.bg_w{
    background-color: #fff;
    padding: 0 1%;
}
.catch{
    text-align: center;
    margin: 0 auto var(--px40);
}

/*header*/
header{
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
}
header.bg{
    background-color: rgba(255,255,255,0.9);
    box-shadow: 0 3px 5px rgba(0,0,0,0.3);
}
header .inner,footer .inner{
    padding: 10px var(--px20);
}
header .logo{
    width: 20%;
    max-width: 190px;
}
header .h_btn >*{
    margin-left: var(--px15);
}
header .y_btn a,header .o_btn a{
    font-size: var(--f20);
    padding: var(--px15) var(--px30);
}
header .y_btn a i.ico_b,header .o_btn a i.ico_b{
    width: 20%;
    margin-right: 5%;
}
/*fv*/
#fv{
    position: relative;
}
.fv_active{
    --opacity: 1;
}
.fv_catch_txt{
    display: inline-block;
    opacity: var(--opacity,0);
    transition: opacity 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    transition-delay: calc(0.05s * var(--char-index));
}
.fv_img{
    padding: 0 0 0 calc(10% + 240px);
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
#fv .fv_left{
    position: absolute;
    top: 24%;
    padding-left: var(--px60);
}
#fv h1{
    font-size: var(--f60);
    margin-bottom: var(--px60);
    color: var(--orange);
    white-space: nowrap;
    line-height: 1.8;
}
.fv_bottom{
    position: absolute;
    bottom: 0;
    left: 5%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}
.fv_bottom p{
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 2;
    width: 13px;
    padding: 10px 10px 110px;
    font-size: var(--f12);
    line-height: 1;
    writing-mode: vertical-lr;
    transition: .2s;
    overflow: hidden;
    margin: auto;
}
.fv_bottom p::before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 2%;
    height: 100px;
    background-color: #ccc;
}
.fv_bottom p::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 2%;
    height: 100px;
    background-color: #000;
    animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/*cta*/
.cta_sub{
    font-size: var(--f28);
    display: inline-block;
    position: relative;
}
.cta_sub::before,.cta_sub::after{
    display: block;
    position: absolute;
    bottom: 0;
}
.cta_sub::before{
    content: "＼";
    left: -30px;
}
.cta_sub::after{
    content: "／";
    right: -30px;
}
.cta_btn >*{
    padding: 0 var(--px15);
    width: 37%;
}
.cta a{
    font-size: var(--f28);
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: var(--px20) 0;
}
.y_btn a i.ico_b,.o_btn a i.ico_b{
    width: 7%;
    margin-right: 3%;
}
.y_btn a i.ico_a,.o_btn a i.ico_a{
    width: 7%;
    margin-left: 3%;
}
.cta02{
    background: no-repeat center;
    background-image: url(../images/bg_cta02.jpg);
    background-size: cover;
}
.cta02 h3,.cta02 p{
    color: #fff;
}

/*nega posi*/
#nega01{
    background-color: #cfd8e1;
    z-index: 3;
}
#nega01::after{
    content: "";
    position: absolute;
    top: 100%;
    height: 80px;
    width: 100%;
    clip-path: ellipse(60% 80px at 50% 0);
    background-color: #cfd8e1;
}
#nega01 .inner{
    padding-bottom: 0;
}
.nega01_list li{
    width: 24%;
    font-size: var(--f20);
    text-align: center;
}
.nega01_list li img{
    margin: 0 auto var(--px20);
}
#nega02{
    background-color: #efefef;
    z-index: 2;
}
.nega02_top h2 .nega02_ttl{
    position: relative;
    display: inline-block;
}
.nega02_top h2 .nega02_ttl::before{
    content: "";
    display: block;
    background: url(../images/nega02_ttl.png) no-repeat;
    background-size: contain;
    width: 20%;
    padding-top: 18%;
    position: absolute;
    top: 0;
    right: 100%;
}
.nega02_top .nega02_ttl_bk{
    background-color: var(--blue);
    color: #fff;
    padding: 0 0.5%;
}
.nega02_list li{
    width: 30%;
    margin-bottom: var(--px20);
}
.nega02_top_hyou{
    width: 100%;
    max-width: 865px;
    margin: var(--px30) auto var(--px60);
}
.nega02_top_hyou h4{
    text-align: center;
    border: 1px solid #111;
    padding: 0.5% 3%;
    margin-bottom: var(--px20);
}
.nega02_top_col{
    margin-top: var(--px40);
}
.nega02_top_col_l{
    width: 46.2%;
}
.nega02_top_col figure{
    width: 5%;
}
.nega02_top_col_r{
    width: 45%;
    background-color: var(--blue);
    color: #fff;
    font-size: var(--f28);
    text-align: center;
    padding: 1%;
}
.nega02_bottom{
    background-color: #b2b2b2;
    color: #fff;
    border-radius: var(--px20);
    padding: var(--px40);
}
.nega02_bottom h3{
    line-height: 1.3;
}
.nega02_bottom .ttl01::after{
    background-color: #fff;
}
.nega02_bottom_list li{
    width: 30.5%;
    margin: 0 var(--px15) var(--px15);
}
.nega02_bottom_list figure{
    margin-bottom: var(--px20);
    position: relative;
}
.nega02_bottom_list figure .nega02_bottom_num{
    position: absolute;
    right: 0;
    top: -20px;
    line-height: 1;
    color: var(--blue);
    font-size: var(--f48);
    font-weight: 700;
}
#posi{
    background-color: #fff;
    z-index: 1;
}
#nega02::after,#posi::after{
    content: "";
    position: absolute;
    top:  calc(100% - 1px);
    height: 80px;
    width: 100%;
    clip-path: polygon(0 0,50% 100%,100% 0);
    background-color: #efefef;
}
#posi::after{
    background-color: #fff;
}
#posi h2{
    line-height: 1.6;
}
#posi h2 .ttl_sub{
    color: #111;
    font-size: var(--f28);
}
.posi_ttl_bg{
    background-color: var(--red);
    color: #fff;
    padding: 0 0.5%;
}
#posi h4{
    margin: var(--px30) auto var(--px20);
}
#posi .catch{
    margin-bottom: 0;
}

/*point*/
#point{
    background-color: #fff4e0;
}
.point_box{
    margin-top: var(--px50);
}
.point_box:nth-child(even){
    flex-direction: row-reverse;
}
.point_box >*{
    width: 50%;
}
.point_box_txt{
    padding-left: var(--px30);
    position: relative;
    z-index: 2;
}
.point_box:nth-child(even) .point_box_txt{
    padding: 0 var(--px30) 0 0;
}
.point_box_txt::before{
    content: "";
    display: block;
    background: url(../images/point01_bg.png) no-repeat;
    background-size: contain;
    width: 60%;
    padding-top: 40%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}
.point_box_num{
    font-size: var(--f28);
    font-weight: 700;
    color: #a08e77;
}
.point_box h4{
    color: var(--orange);
    padding-bottom: var(--px15);
    margin-bottom: var(--px30);
    border-bottom: 4px dotted var(--orange);
}

/*exsample*/
#exsample{
    background-color: #ffeeed;
}
.exsample_col{
    margin-bottom: var(--px50);
}
.exsample_col >*{
    width: 50%;
}
.swiper_box{
    margin-bottom: var(--px20);
}
.exsample_col_txt{
    padding-left: var(--px30);
}
.exsample_col_txt h4{
    margin-bottom: var(--px50);
}
.exsample_col_txt figure{
    margin: var(--px20) 0;
}
.exsample_list{
    border-radius: var(--px20);
    background-color: #d7d7d7;
    padding: var(--px40) var(--px30) var(--px30);
    position: relative;
}
.exsample_list.list02{
    background-color: #fff;
    color: var(--orange);
}
.exsample_list h5{
    color: #fff;
    background-color: #111;
    padding: 0.5% 5%;
    display: inline-block;
    position: absolute;
    top: -5%;
    left: var(--px30);
}
.exsample_list.list02 h5{
    background-color: var(--orange);
}
.exsample_list li{
    border-bottom: 4px dotted #6b6b6b;
    padding: 0 0 2% 5%;
    margin-bottom: 2%;
}
.exsample_list li .exsample_list_ttl{
    position: relative;
}
.exsample_list li .exsample_list_ttl::before{
    content: "";
    display: block;
    width: 4%;
    padding-top: 4%;
    background: url(../images/ico_list.png) no-repeat;
    background-size: contain;
    position: absolute;
    left: -5%;
    top: 25%;
}
.exsample_effect_box{
    width: 48%;
    background-color: #fff;
    border-radius: var(--px20);
    margin-bottom: var(--px30);
}
.exsample_effect_box:last-child{
    margin-bottom: 0;
}
.exsample_effect_box.col1{
    width: 100%;
}
.exsample_effect_box h4{
    background-color: var(--red);
    color: #fff;
    border-radius: var(--px20) var(--px20) 0 0;
    text-align: center;
    font-size: var(--f28);
    padding: var(--px15);
}
.exsample_effect_box img{
    padding: var(--px20) var(--px50) var(--px30);
}
.exsample_effect_box p{
    text-align: center;
    background-color: #ffeeed;
    border-radius: 99px;
    padding: 2%;
    margin: 0  var(--px50) var(--px30);
}
.exsample_effect_value{
    padding: 2% 4%;
}
.exsample_effect_value_box{
    width: 32%;
}
.exsample_effect_value_box figure{
    margin-bottom: var(--px20);
    position: relative;
}
.exsample_effect_value_box figure figcaption{
    position: absolute;
    top: -4%;
    left: -4%;
    width: 31.5%;
}
.exsample_effect_value_box img{
    padding:0;
}
.exsample_effect_value_list{
    padding-left: var(--px30);
}
.exsample_effect_value_list li{
    list-style-type: disc;
}
.exsample_effect_value_note{
    color: #111;
    font-size: var(--f16);
}

/*about*/
#about{
    background: no-repeat center;
    background-image: url(../images/bg_about.jpg);
    background-size: cover;
}
.about_box .about_img{
    width: 40%;
}
.about_txt{
    width: 48.5%;
    padding-left: var(--px30);
}
.about_txt p{
    margin-bottom: var(--px20);
}

/*contact*/
#contact{
    background-color: #efefef;
}
#contact form{
    max-width: 800px;
    margin: 0 auto;
}
#contact dl{
    margin-bottom: var(--px20);
    display: flex;
}
#contact dd{
    flex: 1;
    padding-left: var(--px20);
}
#contact input:not([type="button"]),select,textarea{
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 1.5%;
    font-size: 16px;
}
#contact input[type="tel"],#contact input[type="email"],#contact input[name="addr01"],#contact input[name="addr02"],textarea{
    width: 100%;
}
#contact .postal_search_button{
    background-color: #808080;
    color: #fff;
    border-radius: 5px;
    padding: 1.5%;
}
#contact .postal_search_button:hover{
    opacity: 0.8;
}
#contact #form_submit{
    text-align: center;
}
#contact #form_submit_button{
    color: #fff;
    background-color: var(--orange);
    border: none;
    font-size: var(--f20);
    padding: var(--px20) var(--px50);
}
#contact #form_submit_button:hover{
    background-color: var(--red);
}
#contact dt{
    display: flex;
    flex: 0 0 220px;
}
#contact dt i{
    width: 50px;
    white-space: nowrap;
}
#contact dt i span{
    font-style: normal;
    font-size: 0.8em;
    color: #fff;
    background-color: #808080;
    padding: 0.5% 5%;
    border-radius: 3px;
}
#contact dt i span.required{
    background-color: var(--red);
}
.error_blank{
    color:#E83428;
    display: inline-block;
    font-size: 0.8em;
}

/*footer*/
footer{
    text-align: center;
    color: #fff;
    background-color: var(--red);
    width: 100%;
    position: sticky;
    top: 100vh;
}

/*fade*/
.fade {
/* 最初は非表示 */
transform: translateY(30px);
opacity: 0;
visibility: hidden;
transition: transform 1s, opacity 1s, visibility 1s;
}
/* フェードイン時に入るクラス */
.fadeIn {
transform: translateX(0);
opacity: 1;
visibility: visible;
}

/*thanks*/
#thanks{
    background-color: var(--orange);
}
.thanks_box{
    max-width: 850px;
    width: 90%;
    margin: 5% auto;
    background-color: #fff;
    border-radius: var(--px20);
    padding: var(--px40);
}
.thanks_box p{
    margin-bottom: var(--px40);
    font-size: var(--f16);
}
.thanks_box .y_btn a{
    background-color: #ccc;
}
.thanks_box .y_btn a:hover{
    background-color: #404040;
}

    /*タブレット
------------------------------*/
@media screen and (max-width: 1260px) {
    :root{
        --px15: 1.19vw;
        --px20: 1.587vw;
        --px30: 2.381vw;
        --px40: 3.175vw;
        --px50: 3.968vw;
        --px60: 4.762vw;
        --px80: 6.349vw;
        --px120: 9vw;

        --f60: 4.762vw;
        --f48: 3.81vw;
        --f36: 2.857vw;
        --f28: 2.222vw;
        --f20: 1.587vw;
        --f16: 1.27vw;
        --f12: 0.952vw;
    }
    .fv_bottom p{
        padding-bottom: 65px;
    }
    .ttl01::after{
        bottom: -7%;
        height: 3px;
    }
    .fv_bottom p::before,.fv_bottom p::after{
        height: 60px;
    }
    .nega02_bottom_list li{
        width: 30%;
    }
    .exsample_effect_box p{
        margin: 0  var(--px30) var(--px30);
    }
}

    /*スマホ
------------------------------*/
@media screen and (max-width: 750px) {
    :root{
        --px15: 2.308vw;
        --px20: 3.077vw;
        --px30: 4.615vw;
        --px40: 6.154vw;
        --px50: 7.692vw;
        --px60: 9.231vw;
        --px80: 12.308vw;
        --px120: 17vw;

        --f60: 8.5vw;
        --f48: 7.385vw;
        --f36: 6.5vw;
        --f28: 4.5vw;
        --f20: 3.6vw;
        --f16: 2.8vw;
        --f12: 2vw;
    }
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
    body{
        padding-bottom: 0;
    }
    .ttl02{
        width: 70%;
        margin: 0 auto;
    }
    .nega02_top_col_l,.nega02_top_col_r,.nega02_bottom_list li,.point_box figure,.point_box .point_box_txt,.exsample_col_txt,.swiper-container,.exsample_effect_value_box,.about_txt{
        width: 100%;
    }
    header .y_btn a, header .o_btn a{
        font-size: var(--f16);
    }
    header .y_btn a i.ico_b, header .o_btn a i.ico_b{
        width: 16%;
    }
    /*fv*/
    .fv_img{
        padding: 0 0 0 calc(10% + 40px);
        max-height: 100vh;
        overflow: hidden;
    }
    #fv .fv_left{
        padding-left: 0;
    }
    .fv_bottom p{
        line-height: 0.5;
    }

    /*cta*/
    .cta a{font-size: var(--f28);}
.cta_btn >*{width: 80%;margin-bottom: var(--px20);}

    /*nega*/
    .nega01_list li{
        width: 48%;
        margin-bottom: var(--px30);
    }
    #nega01::after{
        height: 20px;
        clip-path: ellipse(55% 20px at 50% 0);
    }
    #nega02::after, #posi::after{
        height: 40px;
    }
    .nega02_top h2 .nega02_ttl::before{
        right: 0;
        left: 0;
        width: 16%;
        top: -50%;
        transform: rotate(10deg);
    }
    .nega02_top_col figure{
        margin: var(--px20) auto;
        transform: rotate(90deg);
    }
    .nega02_bottom_list li{
        display: flex;
        margin: 0 0 var(--px30);
    }
    .nega02_bottom_list li figure{
        width: 40%;
    }
    .nega02_bottom_list li p{
        width: 60%;
        padding-left: var(--px20);
    }

    /*point*/
    .point_box_txt{
        padding: 0;
    }

    /*exsample*/
    .swiper-container{
        display: flex;
        justify-content: space-between;
        margin-bottom: var(--px30);
    }
    .swiper_box{
        width: 48%;
    }
    .exsample_col_txt{
        padding: 0;
    }
    .exsample_effect_box img{
    padding: var(--px20) var(--px20) var(--px30);
    }
    .exsample_effect_box p{
        margin: 0  var(--px20) var(--px30);
        font-size: var(--f16);
    }
    .exsample_effect_value{
        padding-top: 5%;
    }
    .exsample_effect_value_box img{
        padding: 0;
    }
    .exsample_effect_value_box{
        display: flex;
    }
    .exsample_effect_value_box figure{
        width: 45%;
        padding-right: 2%;
    }
    .exsample_effect_value_list{
        width: 65%;
    }
    /*about*/
    .about_box .about_img{
        width: 80%;
        margin: 0 auto;
    }
    .about_txt{
        padding: var(--px30) 0 0;
        text-align: center;
    }
    /*contact*/
    #contact dl{
        display: block;
    }
    #contact dd{
        padding-left: 0;
    }

    /*thanks*/
    .thanks_box{
        margin: 18% auto 5%;
    }
    .thanks_box h3{
        font-size: var(--f36);
    }
}
@media screen and (max-width: 400px) {
    .cta_sub::before{
        left: -20px;
    }
    .cta_sub::after{
        right: -20px;
    }

    .top_ma:not(#nega02){
        padding-top: var(--px40);
    }
    #contact input[name="name_1"],#contact input[name="name_2"],#contact input[name="read_1"],#contact input[name="read_2"]{
        width: 48%;
    }
    #contact #form_submit_button{
        font-size: var(--f36);
    }
}