@charset "UTF-8";

@media screen and (min-width: 768px),print {

#products .onecol-contents{max-width: 872px;padding: 133px 3rem 0;}
#contentsmain h1{text-align: center;font-weight: bold;font-size: 3.2rem;color: #0057AA;letter-spacing: 0.16rem;margin-bottom: 4rem;}
#contentsmain .products-slider-area {max-width: 800px;margin: 0 auto 76px;overflow: hidden;}
#contentsmain .slider-for {width: 100%;max-width: 800px;max-height: 480px;overflow: hidden;margin-bottom: 27px;}
#contentsmain .slider-for img {width: auto;max-width: 100%;height: auto;object-fit: contain;display: block;max-height: 492px;margin: 0 auto;}
#contentsmain .slider-nav { display: inline-block; margin: 0 auto; position: relative; display: flex; justify-content: center; }
#contentsmain .slider-nav .slick-slide { float: none; display: inline-block; }
#contentsmain .slider-nav .slick-track { text-align: center; white-space: nowrap; display: flex !important; justify-content: center !important; }
#contentsmain .slider-nav .slick-slide { width: 100px !important; height: 75px !important; cursor: pointer; overflow: hidden; border: 2px solid transparent; transition: border-color 0.3s ease; opacity: 0.6; /* 非選択時に薄く */ float: none !important; display: inline-block !important; }
#contentsmain .slider-nav .slick-current { border-color: #0078d7; opacity: 1; /* 選択されたサムネは濃く */ }
#contentsmain .slider-nav img { width: 100%; height: 100%; object-fit: cover; display: block; }

#contentstoku{margin: 0 6px 93px;}
#contentstoku h2{border-bottom: #D2D2D2 1px solid;color: #0057AA;font-size: 2.8rem;font-weight: bold;padding-bottom: 13px;margin-bottom: 31px;}
#contentstoku ul{background: #F3F5FA;border-radius: 16px;padding: 31px 31px 20px 73px;}
#contentstoku ul li{position: relative;margin-bottom: 10px;}
#contentstoku ul li .ch{position: absolute;top: 2px;left: -33px;}
#contentstoku ul li .ltext{font-size: 1.8rem;letter-spacing: 0.09rem;font-weight: bold;}

#contentssetsu{margin: 0 6px 95px;}
#contentssetsu h2{border-bottom: #D2D2D2 1px solid;color: #0057AA;font-size: 2.8rem;font-weight: bold;padding-bottom: 13px;margin-bottom: 27px;}
#contentssetsu p.ptext{font-size: 1.6rem;letter-spacing: 0.08rem;line-height: 2;margin-bottom: 60px;}
#contentssetsu p.morebtn{ }
#contentssetsu p.morebtn a{width: 340px;margin: 0 auto;font-size: 1.6rem;padding-left: 43px;height: 57px;}
#contentssetsu p.morebtn a .arr{ top: 22px; }

#contentscase{margin: 0 6px 95px;}
#contentscase h2{border-bottom: #D2D2D2 1px solid;color: #0057AA;font-size: 2.8rem;font-weight: bold;padding-bottom: 13px;margin-bottom: 37px;}
#contentscase .inBox{margin-bottom: 40px;}
#contentscase .inBox figure {width: 37.5%;aspect-ratio: 300 / 205;overflow: hidden;text-align: center;position: relative;border-radius: 15px;float: left;margin-right: 5%;}
#contentscase .inBox figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
#contentscase .inBox .textbox{width: 56.7%;float: left;}
#contentscase .inBox .textbox h3{color: #0057AA;font-size: 2.4rem;letter-spacing: 0.12rem;font-weight: bold;}
#contentscase .inBox .textbox .wtext{font-size: 1.6rem;letter-spacing: 0.08rem;line-height: 2;font-weight: 400;}

#contentsqa p.morebtn{margin-top: 90px;}
#contentsqa p.morebtn a{width: 340px;margin: 0 auto;font-size: 1.6rem;padding-left: 43px;height: 57px;}
#contentsqa p.morebtn a .arr{ top: 22px; }

#contentsqa h2{border-bottom: #D2D2D2 1px solid;color: #0057AA;font-size: 2.8rem;font-weight: bold;padding-bottom: 13px;margin-bottom: 46px;}
#contentsqa .accordion {margin: 3em auto; max-width: 60vw; }
#contentsqa .toggle {display: none; }
#contentsqa .option {position: relative;margin-bottom: 24px;background: #F3F5FA;border-radius: 16px;padding-bottom: 8px;}
#contentsqa .title, .content {-webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); transition: all 0.3s; }
#contentsqa .title {padding: 20px 60px 12px 70px;display: block;color: #333;font-weight: bold;position: relative;font-size: 1.8rem;}
#contentsqa .title::before{content: "";display: block;width: 13px;height: 14px;position: absolute;right: 1.55em;top: 1.55em;transform: rotate(90deg) !important;background: url(../images/common/arr.svg)no-repeat top left;transition: all 0.3s;cursor: pointer;}
#contentsqa .content {max-height: 0; overflow: hidden; }
#contentsqa .content p {margin: 0;padding: 0.5em 4.8em 1em;font-size: 0.9em;line-height: 1.5;}
#contentsqa .toggle:checked + .title + .content {max-height: 500px; transition: all 1.5s; }
#contentsqa .toggle:checked + .title::before {transform: rotate(270deg) !important;}
#contentsqa .option .qicon{display: block;width: 30px;height: 30px;background: #0057AA;border-radius: 50%;color: #fff;font-size: 1.4rem;font-weight: 700;text-align: center;position: absolute;top: 17px;left: 23px;padding-top: 3px;}
#contentsqa .option .aicon{display: block;width: 30px;height: 30px;border: #0057AA 1px solid;background: #fff;border-radius: 50%;color: #0057AA;font-size: 1.4rem;font-weight: 700;text-align: center;position: absolute;top: 2px;left: 23px;padding-top: 3px;}

#contentsqa{margin-bottom: 1.6rem;}
#contentsqa .inner-Box{margin-bottom: 90px;}



}

@media screen and (min-width:768px) and ( max-width:1300px) {
}

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

    #products .onecol-contents{padding: 6.27vw 6vw 0;}
    #contentsmain{margin-bottom: 10vw;}
    #contentsmain h1{font-weight: bold;font-size: 5.87vw;color: #0057AA;letter-spacing: 0.29vw;margin-bottom: 4.27vw;line-height: 1.5;}
    #contentsmain .products-slider-area {margin: 0 auto 9.27vw;overflow: hidden;}
    #contentsmain .slider-for {width: 100%;overflow: hidden;margin-bottom: -2.4vw;}
    #contentsmain .slider-for .fff{width: 100%;/* aspect-ratio: 327 / 197; *//* overflow: hidden; *//* text-align: center; */margin-bottom: 15px;position: relative;}
    #contentsmain .slider-for .fff img {width: auto;max-width: 100%;height: 100%;object-fit: cover;display: block;max-height: 59vw;margin: 0 auto;}
    #contentsmain .slider-nav { display: inline-block; margin: 0 4vw; position: relative; display: flex; justify-content: center; }
    #contentsmain .slider-nav .slick-slide { float: none; display: inline-block; }
    #contentsmain .slider-nav .slick-track { text-align: center; white-space: nowrap; display: flex !important; justify-content: center !important; }
    #contentsmain .slider-nav .slick-slide { width: 15.73vw !important; height: 11.73vw !important; cursor: pointer; overflow: hidden; border: 0.53vw solid transparent; transition: border-color 0.3s ease; opacity: 0.6; /* 非選択時に薄く */ float: none !important; display: inline-block !important; }
    #contentsmain .slider-nav .slick-current { border-color: #0078d7; opacity: 1; /* 選択されたサムネは濃く */ }
    #contentsmain .slider-nav img { width: 100%; height: 100%; object-fit: cover; display: block; }
    
    #contentstoku{
    margin-bottom: 12vw;
}
    #contentstoku h2{border-bottom: #D2D2D2 0.27vw solid;color: #0057AA;font-size: 5.33vw;letter-spacing: 0.27vw;font-weight: bold;padding: 0 0.5vw 2.17vw;margin-bottom: 6.47vw;}
    #contentstoku ul{background: #F3F5FA;border-radius: 4.27vw;padding: 6.07vw 7.27vw 4.43vw 14.47vw;}
    #contentstoku ul li{position: relative;margin-bottom: 1.37vw;}
    #contentstoku ul li .ch{position: absolute;top: 0.13vw;left: -7.9vw;width: 5.5vw;}
    #contentstoku ul li .ltext{font-size: 4.00vw;letter-spacing: 0.20vw;font-weight: bold;}
    
    #contentssetsu{
    margin-bottom: 12.2vw;
}
    #contentssetsu h2{border-bottom: #D2D2D2 0.27vw solid;color: #0057AA;font-size: 5.33vw;letter-spacing: 0.27vw;font-weight: bold;padding: 0 0.5vw 2.17vw;margin-bottom: 5.57vw;}
    #contentssetsu p.ptext{font-size: 3.73vw;letter-spacing: 0.21vw;line-height: 1.7;margin-bottom: 8.4vw;}
    #contentssetsu p.morebtn{ }
    #contentssetsu p.morebtn a{margin: 0 0.3vw;font-size: 3.73vw;padding-left: 16.37vw;height: 15.2vw;padding-top: 4.1vw;}
    #contentssetsu p.morebtn a .arr{top: 5.87vw;right: 6.1vw;}
    
    #contentscase{}
    #contentscase h2{border-bottom: #D2D2D2 0.27vw solid;color: #0057AA;font-size: 5.33vw;letter-spacing: 0.27vw;font-weight: bold;padding: 0 0.5vw 2.17vw;margin-bottom: 6.47vw;}
    #contentscase .inBox{margin-bottom: 10.67vw;}
    #contentscase .inBox figure {width: 100%;aspect-ratio: 300 / 205;overflow: hidden;text-align: center;position: relative;border-radius: 4.0vw;margin-bottom: 3.7vw;}
    #contentscase .inBox figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
    #contentscase .inBox .textbox{width: 100%;}
    #contentscase .inBox .textbox h3{color: #0057AA;font-size: 4.80vw;letter-spacing: 0.32vw;font-weight: bold;margin-bottom: 3.1vw;}
    #contentscase .inBox .textbox .wtext{font-size: 3.73vw;letter-spacing: 0.19vw;line-height: 1.7;font-weight: 400;}
    
    #contentsqa p.morebtn{margin-top: 8.6vw;}
    #contentsqa p.morebtn a{margin: 0 0.3vw;font-size: 3.73vw;padding-left: 16.27vw;height: 15.2vw;padding-top: 4vw;}
    #contentsqa p.morebtn a .arr{top: 5.87vw;right: 6.3vw;}



#contentsqa{}
#contentsqa h2{border-bottom: #D2D2D2 0.27vw solid;color: #0057AA;font-size: 5.33vw;letter-spacing: 0.27vw;font-weight: bold;padding: 0 0.5vw 2.17vw;margin-bottom: 6.47vw;}
#contentsqa .accordion {margin: 3em auto; max-width: 60vw; }
#contentsqa .toggle {display: none; }
#contentsqa .option {position: relative;margin-bottom: 4.4vw;background: #F3F5FA;border-radius: 2.27vw;padding-bottom: 2.13vw;}
#contentsqa .title, .content {-webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); transition: all 0.3s; }
#contentsqa .title {padding: 4.13vw 11.67vw 3.2vw 14.17vw;display: block;color: #333;font-weight: bold;position: relative;font-size: 3.73vw;letter-spacing: 0.19vw;}
#contentsqa .title::before{content: "";display: block;width: 3.2vw;height: 3.2vw;position: absolute;right: 6.35vw;top: 6.35vw;transform: rotate(90deg) !important;background: url(../images/common/arr.svg)no-repeat top left;transition: all 0.3s;background-size: 180% auto;}
#contentsqa .content {max-height: 0; overflow: hidden; }
#contentsqa .content p {margin: 0;padding: 0.7vw 8vw 4.2vw 14.1vw;font-size: 3.73vw;line-height: 1.5;letter-spacing: 0.19vw;}
#contentsqa .toggle:checked + .title + .content { max-height: 500vw; transition: all 1.5s; }
#contentsqa .toggle:checked + .title::before {transform: rotate(270deg) !important;}
#contentsqa .option .qicon{display: block;height: 5.5vw;width: 5.5vw;background: #0057AA;border-radius: 50%;color: #fff;font-size: 2.67vw;font-weight: 700;text-align: center;position: absolute;top: 4.53vw;left: 6.53vw;padding-top: 0.4vw;}
#contentsqa .option .aicon{display: block;height: 5.5vw;width: 5.5vw;border: #0057AA 0.27vw solid;background: #fff;border-radius: 50%;color: #0057AA;font-size: 2.53vw;font-weight: 700;text-align: center;position: absolute;top: 0.53vw;left: 6.43vw;padding-top: 0.8vw;}

#contentsqa .inner-Box{margin-bottom: 14.8vw;}



}