header { border: none; }

.hl { padding: 0.275rem 0.25rem; line-height: 100%; display: inline-block; }
.hl span,
.hl small { position: relative; z-index: 1; }
.hl::after { width: 100%; left: 0; bottom: 0; height: 10px; background-color: #99CC55; z-index: 0; }

.hl_inline {
    line-height: 180%;
    padding: 0.5rem 0 0.25rem;
    display: inline; /* inline so highlight wraps per line */
    background-image: linear-gradient(#a8df65 0 0);
    background-repeat: no-repeat;
    background-size: 0% 25%; /* hidden at start */
    background-position: 0 100%;
    opacity: 0;
    transition: opacity 0.6s linear, background-size 1s ease 0.3s; /* delay highlight after fade */
}

.hl_inline.show {
   background-size: 100% 25%; /* animate to full width */
   opacity: 1;
}
 
.hl_full span { display: inline-block; background-color: #99CC55; }

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

.fv { box-sizing: border-box; margin: auto; max-width: 1600px; padding-bottom: 4rem; }
.fv_wrap { width: 100%; box-sizing: border-box;  }
.fv_wrap img { width: 100%; }
.fv_txt { bottom: 0; left: 0; opacity: 0; transition: 1s linear; }
.fv_txt.show { opacity: 1; }
.fv_txt p { display: inline-block; width: 56vw; max-width: 938px; background-color: #fff; font-weight: 600; padding: 1rem 0; padding-right: 1rem; pointer-events: none; box-sizing: border-box; }
.fv_txt p img { width: 100%; }
.fv_txt .big { width: 48vw; padding: 0; padding: 0.75rem 0; padding-right: 2rem; max-width: 718px; }
.fv_txt .big::after { background-color: #99CC55; height: 20px; width: 0%; transition: width 1s ease 1s; left: 0; bottom: 0; z-index: 0; }
.fv_txt.show .big::after { width: 94%; }
.fv_txt .big span { z-index: 1; }

/* -------------------------------------------- about */

.about { border-top: 1px solid #000; }
.about h2 span { font-size: 3.5rem; font-size: clamp(2.5rem, 4.5vw, 3.5rem); display: block; line-height: 100%; }
.about h2 small { font-size: 1.5rem; font-weight: 600; display: inline-block; }
.about .right { padding: 0 !important; }
.about .right,
.about .right .txt { font-size: 18px; }
.about .results { max-width: 690px; padding-bottom: 2rem; }
.about .results h3 { font-size: 1.25rem; font-weight: 600; }
.about .results dl { margin: 0; padding: 1rem 0; }
.about .results dl dt { background-color: #000; color: #fff; padding: 0.5rem 1.5rem; }
.about .results dl dd { font-size: 2.5rem; font-weight: 700; margin: 0; margin-left: 1rem; }
.about .results dl dd p { display: flex; }
.about .results dl dd small { font-size: 1.5rem; }
.about .txt .big { font-size: 1.25rem; font-weight: 600; }
.about .right .choose { font-size: 1.75rem; font-weight: 600; }
.about .right .img_box1 { padding: 3rem 0; }
.about .right .img_box1 img { width: 49%; }
.about .point { padding: 0.5rem 0; }
.about .point_head p { font-size: 14px; padding: 0.5rem 1rem; font-weight: 600; margin-right: 1rem; }
.about .point_head p span { font-size: 1.25rem; }
.about .point_head h4 { width: calc(100% - 110px); font-size: 2.5rem; font-weight: 600; line-height: 120%; }
.about .compromise { padding-bottom: 6rem; border-bottom: 1px solid #000; }
.about .compromise p { font-size: 1.75rem; font-weight: 600; }

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

.reason .column { box-sizing: border-box; }
.reason .col_wrap { width: 100%; }
.reason .left { width: 38%; position: sticky; top: 3rem; 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-weight: 700;  text-align: center; }
.reason .left h3 span { display: block; font-size: 3.75rem; font-size: clamp(1.5rem, 3vw, 2.75rem); 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 { max-width: 360px; margin: auto; }
.reason .left .btn_wrap .btn { width: 48%; display: block; font-size: 1.25rem; }
.reason .right { width: 62%; border-left: 1px solid #000; padding-bottom: 4rem; }
.reason .right .col_wrap { width: 100%; }
.reason .right .head_num span { padding: 1.5rem 2rem 1.25rem; border-radius: 100px; font-size: 5rem; line-height: 80%; }
.reason .right .head_num span::before { content: '特徴'; font-size: 1.25rem; display: inline-block; vertical-align: middle; margin-right: 0.75rem; }
.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: 1060px; }
.reason .right .box .txt { padding: 1.5rem 0; line-height: 200%; }

.features .head_txt { padding: 3rem 0 0; } 
.features .head_txt h3 { font-size: 3.25rem; font-weight: 600; line-height: 130%; }

.features .green_boxes { padding: 0.5rem 0; }
.features .green_boxes.col2 .green_box { margin: 0 0.5rem; }
.features .green_box { display: inline-block; padding-bottom: 1rem; }
.features .green_box::after { background: url(../img/index/triangle.png) no-repeat center center; width: 20px; height: 20px; background-size: 100% auto; left: 0; right: 0; bottom: 0; }
.features .green_box p { font-size: 1.5rem; font-weight: 600; padding: 0.5rem 2rem; }

.feature1_inner { padding-top: 2rem; width: 94%; margin: auto; }
.heading2 { font-size: 2rem; font-weight: 600; padding: 2rem 0 0; }

.features .hl_full { padding: 2rem 0; }
.features .hl_full span { font-size: 1.5rem; font-weight: 600; padding: 0 0.75rem; margin: 0.375rem 0; }

#feature2 .list_style1 { max-width: none; }
#feature2 .list_style1 ul { margin-left: -13px; }
#feature2 .list_style1 ul li  { width: calc((100% - 52px) / 4); margin-left: 13px; }
#feature2 .list_style1 ul li img { max-width: 200px; }
#feature2 .list_style1 ul li .name { font-size: 1.15rem; padding-bottom: 0.5rem; }


#feature3 .list_style1 { max-width: 730px; }
#feature3 .list_style1 ul li { text-align: left; }
#feature3 .list_style1 ul li figure { text-align: center; }
#feature3 .list_style1 ul li figure img { width: 150px; }
#feature3 .list_style1 ul li .txt { font-size: 14px; line-height: 150%; padding: 0.75rem 0 0; }
#feature3 .list_style1 ul li .name span { padding: 0 0.25rem; border: 2px solid #22B573; font-size: 12px; display: inline-block; }

#feature4 .row .txt { width: 56%; max-width: 526px; }
#feature4 .row figure { width: 40%; max-width: 360px; }

#feature5 .heading2 { font-size: 1.5rem; }
#feature5 ul { width: 50%; text-align: left; border: 1px solid #999999; box-sizing: border-box; }
#feature5 ul:nth-child(2) { border-left: none; }
#feature5 ul li { padding: 2rem 6%; border-top: 1px solid #999999; }
#feature5 ul li:first-child { border: none; }
#feature5 ul li h4 { font-size: 1.5rem; font-weight: 600; }
#feature5 ul li h4 span { display: inline-block; font-size: 14px; font-weight: 600; padding: 0 0.5rem; margin-left: 1rem; }
#feature5 ul li .txt { padding-bottom: 0; }

.tabs { border-top: 1px solid #000; }
.tabs .tab_btn { width: 50%; padding: 3rem 0; box-sizing: border-box; border-bottom: 1px solid #000; background-color: #E6E6E6; cursor: pointer; }
.tabs .tab_btn:first-child { border-right: 1px solid #000; }
.tabs .tab_btn p { font-size: 2.5rem; font-weight: 600; color: #808080; }
.tabs .tab_btn img { width: 30px; margin-left: 1rem; }
.tabs .tab_btn.active { background-color: #fff; color: #000; border-bottom: none; }
.tabs .tab_btn.active p { color: #000; }

.tabs .tab_item.faq { max-width: 1300px; }
.tabs .tab_item.voice { max-width: 970px; }
.tabs .tab_item { width: 94%; margin: auto; padding: 3rem 0 4rem; }
.tabs .tab_item .num { padding: 0.25rem 1rem; margin-right: 1rem; font-size: 17px; border-radius: 6px; }

.tabs .tab_wrap { display: none; } 
.faq { display: none; }
.faq .col { width: 46%; }
.faq .col ul li { padding: 1rem 0; }
.faq .col ul li .q { padding: 2rem 0; font-weight: 600; font-size: 18px; }
.faq .col ul li .box { padding: 2rem; border: 2px solid #B3B3B3; border-radius: 4px; }
.faq .col ul li .box::before { content: 'A.'; font-size: 17px; font-weight: 600; position: relative; margin: 0; }
.faq .col ul li .box .content { width: calc(100% - 30px); }
.faq .col ul li .box .content p.txt { padding:  0 0 0.5rem; }
.faq .col ul li .box .content .linebreak { display: block; width: 100%; height: 2px; background-color: #B3B3B3; margin: 1rem 0; display: block; }

.voice { display: none; }
.voice ol li { margin: 1.5rem 0; padding: 2rem; border: 2px solid #B3B3B3; border-radius: 4px; }
.voice ol li img { width: 197px; }
.voice ol li .box { width: calc(100% - 240px); }
.voice ol li .box .txt { padding-top: 1.5rem; }

.faq.show,
.voice.show { display: block; }

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

.contact { padding: 0 0 4rem; overflow: hidden; }
.contact .contact_ttl { padding: 4rem 0; 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 .green_box .decor1 { width: 40%; max-width: 558px; top: -3%; left: -1%; z-index: 0; }
.contact .green_box .decor2 { width: 100%; top: 100%; z-index: 0; pointer-events: none; }
.contact .green_box_wrap { padding: 8rem 0 0; width: 94%; max-width: 1200px; margin: auto; position: relative; z-index: 2; }
.contact .green_box .col_l { width: 66%; }
.contact .green_box .col_l .ttl { font-size: 3rem; font-weight: 600; font-size: clamp(1.5rem, 3.5vw, 3rem); }
.contact .green_box .col_l .txt { font-size: 1.5rem; font-size: clamp(1rem, 2vw, 1.5rem); padding: 1rem 0 0; }
.contact .green_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) {

    .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; }

    .fv_txt p { width: 74%; }
    .fv_txt .big { width: 58%; }

    .about .right, 
    .about .right .txt { font-size: 1rem; }
    .about .right .img_box1 { padding: 2rem 0; }
    .about .point_head h4 { font-size: 1.75rem; }
    .about .point_head p { padding: 0.25rem 1rem; }
    .about .compromise { padding-bottom: 4rem; }

    .reason .right .box_wrap { padding: 3rem 3vw; }
    .reason .right .box .txt { padding: 1.25rem 0; }

    .reason .right .head_num span { font-size: 4rem; padding: 1.25rem 1.5rem 1rem; }
    
    .features .head_txt { padding-top: 2rem; }
    .features .head_txt h3 { font-size: 2.25rem; }
    .features .green_box p { font-size: 1.25rem; padding: 0.25rem 1rem; }
    
    .feature1_inner { width: 100%; padding-top: 1rem; }

    #feature2 .list_style1 ul li { width: calc((100% - 26px) / 2); }

    .heading2 { font-size: 1.5rem; }

    .tabs .tab_btn p { font-size: 2rem; }
    
}

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

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

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

    .fv { width: 100%; padding: 0; }
    .fv_wrap { padding: 2rem 1rem; }
    .fv_txt { position: relative; }
    .fv_txt p { width: 80%; padding: 0.5rem; }
    .fv_txt .big { padding: 0.5rem; padding-right: 0.75rem; width: 100%; }
    .fv_txt.show .big::after { width: 100%; }

    .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%; top: 0; }
    .reason .column.left { padding: 3rem 6%; }
    .reason .left .col_wrap { max-width: none; text-align: center; }
     .reason .reasons_nav { text-align: left; }
    .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: 2rem 6%; }

    .about.reason .left { padding-bottom: 0; }
    .about h2 span { font-size: 3rem; padding: 0.5rem 0; line-height: 110%; }
    .about h2 small { background-color: #000; color: #fff; padding: 0 1rem; }

    .about .results { padding-bottom: 1rem; }
    .about .results dl { padding: 0.5rem 0; }
    .about .results dl dt { padding: 0.25rem 1rem; }
    .about .results dl dd { font-size: 1.75rem; }

    .about .point_head p { padding: 0.25rem 0.5rem; font-size: 12px; }
    .about .point_head p span { font-size: 1rem; }
    .about .point_head h4 { width: calc(100% - 90px); font-size: 1.5rem; line-height: 150%; }
    .about .compromise { padding-bottom: 2rem; border: none; }
    .about .compromise p { font-size: 1.5rem; }

    .about.reason .left { background-color: #fff; }
    .about.reason .left h2 { text-align: left; }
    
    .reason .right .box .txt { padding: 1rem 0; }

    .reason .right .head_num span { font-size: 3rem; padding: 1rem 1.25rem 0.75rem; }
    .reason .right .head_num span::before { font-size: 1rem; }
    
    #feature2 .graphics1 { width: 100%; }

    .features .head_txt { padding-top: 1.5rem; }
    .features .head_txt h3 { font-size: 1.75rem; }
    .features .hl_full { padding: 1.5rem 0 0; }
    .features .hl_full span { font-size: 1.25rem; }

    #feature3 ul li { width: calc((100% - 40px) / 2); }
    
    #feature4 .row .txt { width: 100%; max-width: none; }
    #feature4 .row figure { width: 88%; margin: auto; }
    
    #feature5 ul { width: 100%;  }
    #feature5 ul:nth-child(2) { border-left: 1px solid #999999; border-top: none; }
    #feature5 .box_wrap { padding-bottom: 4rem; }

    .tabs .tab_btn { padding: 1.5rem 0; }
    .tabs .tab_btn p { font-size: 1.25rem; }
    .tabs .tab_btn img { width: 20px; }
    .tabs .tab_item { width: 88%; padding: 1.5rem 0; }
    .faq .col ul li .q { font-size: 16px; }
    .tabs .tab_item span { width: calc(100% - 60px); }
    .tabs .tab_item .num { width: auto; padding: 0.25rem 0.75rem; font-size: 15px; }

    .faq .col { width: 100%; }
    .faq .col ul li .q { padding: 0.5rem 0 0.75rem; }
    .faq .col ul li .box { padding: 1rem; }
    .faq .col ul li .box::before { font-size: 15px; }

    .voice ol li { display: block; margin: 1rem 0; padding: 1rem; }
    .voice ol li img { margin: auto; width: 150px; display: block; }
    .voice ol li .box { padding-top: 1rem; width: 100%; }
    .voice ol li .box .txt { padding-top: 1rem; }
    
    .heading2 { font-size: 1.15rem; }

    .contact h4 span { font-size: 1.5rem; font-size: clamp(1.5rem, 5vw, 4rem); }
    .contact .contact_ttl { padding: 3rem 4%; }
    .contact .txt_1 { padding: 1rem 0; }
    .contact .green_box .decor1 { width: 62%; top: -6%; left: -4.6%; }
    .contact .green_box_wrap { display: block; padding: 4rem 0 0; }
    .contact .green_box .col_l { width: 100%; }
    .contact .green_box figure { width: 50%; margin: 1rem auto 0; max-width: 320px; }
    .contact .green_box .col_l .ttl { font-size: clamp(1.5rem, 5vw, 10rem); }
    .contact .green_box .col_l .txt { font-size: clamp(1rem, 3vw, 10rem); }
    .contact .lower_box { display: block; padding: 12% 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; }
    
    .fix_banner { bottom: 2rem; right: 0; background-color:  #fff; z-index: 2; }
    .fix_banner .flex { flex-wrap: nowrap; }
    .fix_banner a { display: block; font-size: 1rem; padding: 0.85rem 1.5rem; }
}