header { border: none; }

/* -------------------------------------------- fv */

.fv { box-sizing: border-box; padding-left: 3%; margin: auto; max-width: 1600px; }
.fv_img { width: 63%; top: 0; right: 0; z-index: -1; }
.fv_text { width: 45%; max-width: 620px; box-sizing: border-box; padding-top: 2%; padding-right: 1rem; font-weight: 600; }
.fv_text .highlight { padding: 0 0.5rem; }
.fv_text .highlight p { font-weight: bold; font-size: 7.125rem; font-size: clamp(1rem, 7.2vw, 7.125rem); line-height: 100%; padding-bottom: 2px; }
.fv_text .highlight::after { width: 100%; height: 15px; background-color: #E62C17; bottom: 0; z-index: -1; left: 0; bottom: 0; }
.fv_text .highlight .big { font-size: 10rem; font-size: clamp(2rem, 12vw, 10rem); line-height: 85%; }
.fv_text .highlight .small { font-size: 3rem; font-size: clamp(1.5rem, 3.5vw, 3rem); }
.fv_head2 { width: 100%; font-size: 3.5rem; font-size: clamp(1.5rem, 3.75vw, 3.5rem); }
.fv_head3 { width: 100%; font-size: 5.625rem; font-size: clamp(2rem, 5.75vw, 5.625rem); line-height: 100%; }
.fv_head3 span { font-size: 3.5rem; font-size: clamp(1rem, 3.5vw, 3.5rem); }
.fv h2 { padding: 1rem 0 0; font-weight: 900; font-size: clamp(1rem, 1.5vw, 1.5rem); }
.fv h2 span { display: block; font-size: 2.5rem; font-size: clamp(1.5rem, 2.5vw, 2.5rem);  line-height: 120%; padding-top: 1rem; }
.fv_logo { padding: 1.5% 0 0; }
.fv_logo img { width: 57%; }
.fv_logo p { padding-left: 1rem; font-size: 1.25rem; font-weight: 500; line-height: 100%; }

/* -------------------------------------------- intro */

.intro { padding: 6rem 0 4rem; }
.intro img { width: 42%; height: auto; }
.intro_box { padding-left: 2rem; width: 57%; box-sizing: border-box; }
.intro_box h3 { font-size: 3rem; font-size: clamp(1rem, 4vw, 3rem); font-weight: 600; line-height: 130%; }
.intro_box .txt { padding: 1.5rem 0 0; font-size: 1.1rem; font-size: clamp(1rem, 1.25vw, 1.1rem); line-height: 220%; }

/* -------------------------------------------- reason */

.reason { border-top: 1px solid #000; }
.reason .column { box-sizing: border-box; }
.reason .col_wrap { width: 100%; }
.reason .left { width: 38%; position: sticky; top: 2rem; left: 0;  }
.reason .column.left { padding: 4rem 3%; }
.reason .left .col_wrap { max-width: 450px; }
.reason .left .ttl_wrap { max-width: 372px; margin: auto; }
.reason .left h3 { padding-bottom: 1rem; font-size: 3.75rem; font-size: clamp(1.5rem, 3vw, 3rem); font-weight: 700; line-height: 120%; }
.reason .left h4 { display: inline-block; font-size: 4.125rem; font-size: clamp(1.5rem, 4vw, 4rem); font-weight: 700; padding: 0 1rem; line-height: 100%; }
.reason .left h4 span { font-size: 10rem; font-size: clamp(1.5rem, 8vw, 8rem); line-height: 80%; }
.reason .left h4 small { top: 0; }
.reason .left h4 small:first-child { left: 0; }
.reason .left h4 small:last-child { right: 0; }
.reason .left .btn_wrap .btn { width: 48%; display: block; }
.reason .right { width: 62%; border-left: 1px solid #000; padding-bottom: 4rem; }
.reason .right .col_wrap { width: 100%; }
.reason .right .head_num { font-size: 7rem; line-height: 80%; }
.reason .right h3 { font-size: 1.1rem; font-weight: 500; padding: 1rem 0 0; }
.reason .right h3 span { font-size: 3.25rem; font-weight: 600; display: block; line-height: 120%; }
.reason .right .caption { font-size: 2rem; padding: 3rem 0 2rem; font-weight: 600; }
.reason .right .box { border-top: 1px solid #000; }
.reason .right .box:first-child { border: none; }
.reason .right .box_wrap { padding: 4rem 3vw;  box-sizing: border-box; max-width: 930px; }
.reason .right .box .txt { padding: 1.5rem 0; line-height: 200%; }

.reason .red_box { padding-bottom: 10px; }
.reason .red_box p { padding: 1rem; font-size: 1.625rem; font-weight: 600; }
.reason .red_box::after { width: 12px; height: 10px; bottom: 0; left: 0; right: 0; background: url(../img/index/triangle.png) no-repeat center center; background-size: 100% auto; }

.reason .red_border { padding: 2rem 6%; max-width: 664px; margin: 2rem auto; box-sizing: border-box; border: 1px solid #E62C17; border-radius: 0.75rem; }
.reason .red_border h4 {font-weight: 700; font-size: 1.25rem; }
.reason .control_method ul li { width: 240px; }
.reason .control_method ul li img { width: 80%; }
.reason .control_method ul li .big { font-weight: 600; padding: 1rem 0 0.5rem; }
.reason .control_method ul li .txt { padding: 0 !important; font-size: 12px; text-align: left; }

.reason .graphic1 .row { padding: 2rem 0; }
.reason .graphic1 .row::before { max-width: 650px; top: 0; left: 0; right: 0; height: 1px; background-color: #000; width: 88%; margin: auto; }
.reason .graphic1 .col { padding: 0 4%; box-sizing: border-box; }
.reason .graphic1 .col h3 { font-size: 1.25rem; font-weight: 600; padding: 0 0 2rem; }
.reason .graphic1 .col2 { width: 50%; }
.reason .graphic1 .col2:first-child { padding-left: 0; }
.reason .graphic1 .col2:last-child { padding-right: 0; }
.reason .graphic1 .txt { font-size: 14px; line-height: 180%; }
.reason .graphic1 ul { width: 100%; margin: auto; }
.reason .graphic1 ul li { padding: 0.5rem 0; }
.reason .graphic1 ul li figure { width: 118px; }
.reason .graphic1 ul li .info { width: calc(100% - 118px); box-sizing: border-box; padding-left: 1rem; }
.reason .graphic1 ul li .info h4 { font-weight: 600; }
.reason .graphic1 ul li .info .txt { padding: 0.5rem 0; line-height: 180%; }
.reason .graphic1_sys { border-right: 1px solid #000; box-sizing: border-box; }
.reason .graphic1_sys .txt { margin: auto; }
.reason .graphic1 .harmony_wall { max-width: 560px; margin: auto; }
.reason .graphic1 .harmony_wall figure { width: 234px; }
.reason .graphic1 .harmony_wall .txt { font-size: 14px; line-height: 170%; padding-left: 2rem !important; padding-top: 0 !important; width: calc(100% - 234px); box-sizing: border-box; }

#reason1 .figure { padding: 2rem 0 0; }
#reason1 .figure img { max-width: 612px; }

#reason2 .pad-bot { padding-bottom: 3rem; }
#reason2 .triangle img { max-width: 471px; }
#reason2 .row { border-top: 1px solid #000; padding: 3rem 0; }
#reason2 .row h3 { font-size: 1.5rem; font-weight: 600; padding: 0; }
#reason2 .resistance figure { margin-top: 2rem; padding: 1rem 0 0; }
#reason2 .resistance figure::before { background: url(../img/index/reason2-img3.png) no-repeat center center; background-size: 100% auto; width: 76px; height: 76px; right: -1rem; top: 0; }
#reason2 .control_method { padding-bottom: 0; }
#reason2 .control_method .col { width: 48%; }
#reason2 .control_method .col .txt { padding: 0; }
#reason2 .wrap { padding: 2rem 0 0; }

#reason4 ol  { padding: 2rem 0 0; }
#reason4 ol { margin-left: -13px; }
#reason4 ol li { min-height: 290px; margin-bottom: 13px; margin-left: 13px; padding: 3rem 0.5rem 0.75rem; text-align: center; border: 2px solid #E62C17; box-sizing: border-box; width: calc((100% - 39px) / 3); position: relative; }
#reason4 ol li .num { font-size: 2.25rem; width: 56px; height: 56px; line-height: 56px; position: absolute; top: 0; left: 0;  text-align: center; }
#reason4 ol li img { width: 171px; }
#reason4 ol li .ttl { padding: 0.25rem 3% 0.5rem; font-size: 1.15rem; font-weight: 600;text-align: left; line-height: 110%; }
#reason4 ol li .ttl span { line-height: 100%; display: inline-block; font-size: 12px; font-weight: 600; vertical-align: middle; }
#reason4 ol li .ttl span.box {  border: 1px solid #E62C17; padding: 6px 0.25rem; }
#reason4 ol li .txt { padding: 0 3%; font-size: 15px; line-height: 160%; font-weight: 500; text-align: left; }

#reason5 .txt { font-size: 1.25rem; }
#reason5 .txt .highlight { line-height: 30px; height: 30px; display: inline-block; padding: 0 8px; font-weight: 600; }
#reason5 .row { padding: 2rem 0 0; }
#reason5 .col { width: 46%; }

.box_style1 { background-color: #F6F6F6; width: 48%; box-sizing: border-box; padding: 1.5rem; }
.box_style1 .ttl { padding-left: 0.75rem;font-weight: 500; line-height: 100%; }
.box_style1 .ttl::before { width: 4px; height: 100%; left: 0; top: 0; bottom: 0; background-color: #000; }
.box_style1 .txt { font-size: 12px; padding: 1rem 0 0 !important; }

.box_style2 { background-color: #F6F6F6; }
.box_style2 .col_l { padding: 1.5rem; box-sizing: border-box; width: 55%; }
.box_style2 .col_l .ttl { font-weight: 600; }
.box_style2 .col_l .txt { font-size: 12px; padding: 0.75rem 0 0 !important; }
.box_style2 figure { width: 45%; }

/* -------------------------------------------- contact */

.contact { padding: 4rem 0; overflow: hidden; }
.contact::before { padding: 56% 0 0; z-index: 0; top: 0; left: 0; width: 100%; 
    background: url(../img/index/contact-bg1.jpg) no-repeat center center; background-size: cover;
}
.contact .inner { z-index: 1; }
.contact h4 { font-size: 2.25rem; }
.contact h4 span { font-weight: 600; padding: 2px 1rem; display: inline-block; margin: 5px; }
.contact .txt_1 { padding: 1rem 0 4rem; }
.contact .txt_1 img { width: 100%; max-width: 860px; }
.contact .inner_box { padding-bottom: 3rem; }
.contact .red_box { padding: 10% 0 0; }
.contact .red_box .decor1 { width: 43%; max-width: 558px; top: -10%; left: -3.1%; z-index: 0; }
.contact .red_box .decor2 { width: 100%; top: 100%; z-index: 0; pointer-events: none; }
.contact .red_box_wrap { width: 94%; max-width: 1200px; margin: auto; position: relative; z-index: 2; }
.contact .red_box .col_l { width: 66%; }
.contact .red_box .col_l .ttl { font-size: 3rem; font-weight: 600; font-size: clamp(1.5rem, 3.5vw, 3rem); }
.contact .red_box .col_l .txt { font-size: 1.5rem; font-size: clamp(1rem, 2vw, 1.5rem); padding: 1rem 0 0; }
.contact .red_box figure { width: 30%; }
.contact .lower_box  { padding: 20% 4% 0; color: #000; }
.contact .lower_box .col_l { width: 54%; }
.contact .lower_box .ttl { font-size: 2.75rem; font-size: clamp(1.5rem, 3.5vw, 2.75rem); font-weight: 600; padding-bottom: 0.5rem; }
.contact .lower_box .btn_wrap .btn { text-align: center; width: 100%;  }
.contact .lower_box .btn_wrap .btn span { display: inline-block; padding-left: 1rem; font-size: 3.5rem; font-size: clamp(1.5rem, 4vw, 3.5rem); vertical-align: middle;}
.contact .lower_box .btn_wrap .btn img { width: 15%; max-width: 97px; }
.contact .lower_box .btn_wrap .contact_btn { margin-top: 1rem; padding: 0; padding: 1.5rem 0; height: auto; line-height: auto; }
.contact .lower_box .btn_wrap .contact_btn span { font-size: 2.25rem; }
.contact .lower_box figure { width: 40%; }
.contact .lower_box .tel { padding-top: 2rem; }

/* -------------------------------------------- tablet */

@media screen and (max-width: 1100px) {
    .intro { padding: 3rem 0; }
    .intro_box h3 { font-size: 2rem; }
    .intro_box .txt { padding: 1rem 0 0; font-size: 1rem; }

    #reason4 ol li { width: calc((100% - 26px) / 2); }
    #reason4 ol li .num { font-size: 2rem; width: 45px; height: 45px; line-height: 45px; }

    #reason2 .row h3 { font-size: 1.25rem; }
    #reason2 .resistance figure::before { width: 45px; height: 45px; }
    #reason2 .control_method .col .txt { padding-bottom: 1.5rem; }
    #reason2 .control_method .col { width: 100%; max-width: 420px; margin: auto; }

    .reason .graphic1 .row { padding: 0; }
    .reason .graphic1 .col { padding: 2rem 0 0; }
    .reason .graphic1 .col2 { padding: 2rem 0; width: 100%; }
    .reason .graphic1_sys { border-right: none; border-bottom: 1px solid #000; }
    .reason .graphic1_sys figure { width: 88%; margin: auto; max-width: 420px; }
    .reason .graphic1_sys .txt { max-width: 420px; } 
    .reason .graphic1 .row::before { width: 100%; }

    .reason .graphic1 .harmony_wall figure { width: 100%; max-width: 320px; }
    .reason .graphic1 .harmony_wall .txt { width: 100%; padding: 1.5rem 0 0 !important; }


    .contact ul { padding: 2rem 0 5rem; margin-left: -10px; }
    .contact ul li { width: calc((100% / 4) - 10px); margin-left: 10px; }
    .contact ul li img { width: 100%; }
    .contact ul li .tll { font-size: 1.25rem; }

    .contact .lower_box .tel a { font-size: clamp(1.5rem, 5vw, 5rem); }
    .contact .lower_box .tel a img { width: 4vw; }
}

/* -------------------------------------------- sp */

@media screen and (max-width: 767px) {

    header {  border-bottom: 1px solid #000; }

    .fv { padding: 1rem 0; }
    .fv h2 { padding: 1rem 4% 0; font-size: clamp(1rem, 3.5vw, 10rem); }
    .fv h2 span { font-size: clamp(1.5rem, 5vw, 10rem); padding: 0.5rem 0 0; }
    .fv_text { width: 100%; padding: 0; max-width: none; }
    .fv_img { position: relative; width: 100%; margin-top: -6%; }
    .fv_text { padding: 0 4%; }
    .fv_text .highlight .small,
    .fv_text .highlight p { font-size: clamp(2rem, 10vw, 8rem); }
    .fv_text .highlight .big { font-size: clamp(6rem, 18vw, 10rem); }
    .fv_text .highlight .small { display: inline-block; }
    .fv_head2 { font-size: clamp(2rem, 7vw, 10rem); }
    .fv_head3 { font-size: clamp(2rem, 10.5vw, 8rem); }
    .fv_head3 span { font-size: clamp(2rem, 7vw, 15rem); }
    .fv_logo { padding: 1rem 4%; text-align: center; width: 100%; margin: auto; max-width: 420px; box-sizing: border-box; }
    .fv_logo img { width: 100%; margin: 0 auto 0.5rem; }
    .fv_logo p { padding: 0.25rem 0; width: 100%; background-color: #000; color: #fff; font-size: 12px; }

    .intro { padding: 0 0 1rem; }
    .intro_box { padding: 1rem 0; width: 100%; }
    .intro_box h3 { font-size: clamp(2rem, 6vw, 3rem); }
    .intro img { width: 100%; display: block; }

    .reason .left { position: relative; width: 100%; }
    .reason .column.left { padding: 2rem 4% 4rem; }
    .reason .left .col_wrap { max-width: none; text-align: center; }
    .reason .left h3 { padding-bottom: 1rem; font-size: 2rem; }
    .reason .left h4 { margin: auto; font-size: 2rem; }
    .reason .left h4 span { font-size: 5rem; }
    .reason_nav { padding-top: 2rem; text-align: left; max-width: 305px;  }
    .reason .left .btn_wrap .btn { font-size: 1.25rem; }
    .reason .right { width: 100%; padding-bottom: 0; }
    .reason .right .box_wrap { padding: 3rem 6%; }
    .reason .right .head_num { font-size: 5rem; }
    .reason .right h3 span { font-size: 2.5rem; }
    .reason .right .caption { font-size: 1.75rem; padding: 2rem 0 1rem; }
    .reason .red_box p { font-size: 1.25rem; line-height: 150%; }
    
    .reason .control_method ul li { width: 100%; max-width: 360px; margin: auto; padding: 2rem 0 1rem; }
    .reason .control_method ul li:first-child { padding-top: 0; } 
    .reason .control_method ul li .big { font-size: 1.5rem; }
    .reason .control_method ul li .txt { font-size: 1rem; }

    .box_style1 { padding: 1.5rem 1rem; width: 100%; margin-bottom: 1rem; }

    #reason1 .figure { padding-top: 1rem; }

    #reason2 .row { padding: 2rem 0; }
    #reason2 .figure { padding: 1rem 0 2rem; }
    #reason2 .resistance figure { margin-top: 0; }
    
    #reason4 ol { padding: 0; }
    #reason4 ol li { padding: 3rem 1rem 1rem; min-height: 250px; }
    #reason4 ol li img { width: 94%; max-width: 200px; }
    #reason4 ol li .ttl { font-size: 1rem; line-height: 130%; padding: 1rem 0 0.5rem; }
    #reason4 ol li .ttl span { font-size: 10px; }
    #reason4 ol li .ttl span.box { margin-top: 2px; }
    #reason4 ol li .txt { padding: 0.25rem 0 0; font-size: 12px; }
    #reason4 ol li .num { width: 40px; height: 40px; line-height: 40px; font-size: 1.75rem; }
   
    #reason5 .txt { font-size: 1rem; }

    .contact h4 span { font-size: 1.5rem; font-size: clamp(1.5rem, 5vw, 4rem); }
    .contact .red_box .decor1 { width: 62%; top: -6%; left: -4.6%; }
    .contact .red_box_wrap { display: block; }
    .contact .red_box .col_l { width: 100%; }
    .contact .red_box figure { width: 50%; margin: 1rem auto 0; max-width: 320px; }
    .contact .red_box .col_l .ttl { font-size: clamp(1.5rem, 5vw, 10rem); }
    .contact .red_box .col_l .txt { font-size: clamp(1rem, 3vw, 10rem); }
    .contact .lower_box { display: block; padding: 20% 6% 0; }
    .contact .lower_box .col_l { width: 100%; }
    .contact .lower_box .btn_wrap { text-align: center; }
    .contact .lower_box .btn_wrap .btn { max-width: 420px; }
    .contact .lower_box .btn_wrap .btn span { font-size: clamp(1.5rem, 5vw, 2.75rem); }
    .contact .lower_box .btn_wrap .contact_btn { height: 74px; line-height: 74px; padding: 0; }
    .contact .lower_box .tel { max-width: 420px; margin: auto; }
    .contact .lower_box .tel a { font-size: clamp(1.5rem, 9.75vw, 3.75rem); }
    .contact .lower_box .tel a img { width: 5.2vw; }
    .contact .lower_box .tel p { font-size: 1rem; }
    .contact .lower_box figure { width: 100%; padding-top: 2rem; max-width: 420px; margin: auto; }
    
    footer { padding-bottom: 4rem; }
    .fix_banner { box-shadow: 0px 0px 5px #00000078; bottom: 0; left: 0; width: 100%; background-color: #fff; z-index: 2; }
    .fix_banner .flex { flex-wrap: nowrap; }
    .fix_banner a { width: 100%; display: block; font-size: 1.25rem; padding: 0.85rem 0; }
}