/* common */
.mat{ position: relative; margin: 0 calc(50% - 50vw); padding: 0; width: 100vw; background: #d8dde0; color: #485157;}
.mat a{ color: #485157;}
.mat a:hover,
.mat a:active,
.mat button:hover,
.mat button:active{ color: #485157;}
.mat h2{ position: absolute; top: 0; left: 0; z-index: 100; display: flex; width: 100%; height: 100px; background : #505f6c; align-items: center; justify-content: center;}
.mat h2 img{ width: auto; height: 46px;}

@media screen and (max-width: 1024px){
    .mat h2{ height: 60px;}
    .mat h2 img{ height: 30px;}
}

/* index */
.sec1{ background: rgba(72, 81, 87, 1);}
.sec1 .slick-slide{ position: relative; overflow: hidden; width: 100vw !important; height: 51.77vw; transition: none !important;}
/*.sec1 .slick-slide:before{ position: absolute; top: 0; left: -30px; width: calc(100% + 60px); height: 100%; background: no-repeat 0 0 / cover; content: "";}
.sec1 .slick-current:before{ animation: slide 6s;}
@keyframes slide{
    0%{ transform: translate3d(0, 0, 0);}
    100%{ transform: translate3d(-30px, 0, 0);}
}*/
.sec1 .slick-slide:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat 0 0 / cover; content: "";}
.sec1 .slick-slide.slide1:before{ background-image: url("/img/pickup/mattress-chart/hero1.jpg");}
.sec1 .slick-slide.slide2:before{ background-image: url("/img/pickup/mattress-chart/hero2.jpg");}
.sec1 .slick-slide.slide3:before{ background-image: url("/img/pickup/mattress-chart/hero3.jpg");}
.sec1 .slick-slide.slide4:before{ background-image: url("/img/pickup/mattress-chart/hero4.jpg");}
.sec1 .slick-slide p{ position: absolute; color: #fff; letter-spacing: .415em; font-size: 3.1rem;}
.sec1 .slick-slide.slide1 p{ top: 12.5vw; right: 8.8541vw;}
.sec1 .slick-slide.slide2 p{ top: 10.9375vw; right: 15.3645vw; color: #485157;}
.sec1 .slick-slide.slide3 p{ top: 16.6666vw; right: 40.625vw;}
.sec1 .slick-slide.slide4 p{ right: 25.5208vw; bottom: 14.5833vw;}

@media screen and (max-width: 1024px){
    .sec1 .slick-slide{ height: 139.733vw;}
    .sec1 .slick-slide.slide1:before{ background-image: url("/img/pickup/mattress-chart/hero1sp.jpg");}
    .sec1 .slick-slide.slide2:before{ background-image: url("/img/pickup/mattress-chart/hero2sp.jpg");}
    .sec1 .slick-slide.slide3:before{ background-image: url("/img/pickup/mattress-chart/hero3sp.jpg");}
    .sec1 .slick-slide.slide4:before{ background-image: url("/img/pickup/mattress-chart/hero4sp.jpg");}
    .sec1 .slick-slide p{ letter-spacing: .44em; font-size: 1.6rem;}
    .sec1 .slick-slide.slide1 p{ top: 35.6vw; right: auto; left: 5.866vw; color: #485157;}
    .sec1 .slick-slide.slide2 p{ top: 51.333vw; right: 17.333vw;}
    .sec1 .slick-slide.slide3 p{ top: 32vw; right: auto; left: 16vw; color: #485157;}
    .sec1 .slick-slide.slide4 p{ right: 9.333vw; bottom: 32vw;}
}

.sec2{ padding: 100px 0 110px; text-align: center;}
.sec2 h3{ letter-spacing: .4em; font-size: 3.2rem;}
.sec2 p{ padding: 25px 0 0; letter-spacing: .365em; font-size: 1.8rem; line-height: 3;}
.fixedbtn{ position: fixed; right: 1.822vw; bottom: 1.822vw; z-index: 10;}
.fixedbtn a{ display: inline-block; width: 27.604vw;}

@media screen and (max-width: 1024px){
    .sec2{ padding: 45px 0;}
    .sec2 h3{ letter-spacing: .35em; font-size: 2.2rem; line-height: 1.7;}
    .sec2 p{ padding: 20px 0 0; letter-spacing: .1em; font-size: 1.3rem; line-height: 2.7;}
    .fixedbtn{ right: 0; bottom: 0;}
    .fixedbtn a{ display: block; margin: 0 auto; width: 85%;}
}

.sec3{ padding: 100px 0 90px; background: #fff; text-align: center;}
.sec3 h3{ letter-spacing: .285em; font-size: 2.4rem;}
.sec3 .list-btn{ display: flex; padding: 50px 0 0; justify-content: center;}
.sec3 .list-btn > li{ padding: 0 30px;}
.sec3 .list-btn a{ display: block; width: 320px; color: #485157; text-decoration: none;}
.sec3 .list-btn p{ padding: 25px 0 0; font-size: 1.7rem; line-height: 1.75;}
.sec3 .list-btn p strong{ display: block; color: #485157; font-weight: 600; font-size: 1.9rem;}

@media screen and (max-width: 1024px){
    .sec3{ padding: 40px 25px;}
    .sec3 h3{ letter-spacing: .2em; font-size: 1.7rem; line-height: 1.79;}
    .sec3 .list-btn{ padding: 30px 0 0; justify-content: space-between;}
    .sec3 .list-btn > li{ padding: 0; width: calc(50% - 7px);}
    .sec3 .list-btn a{ width: 100%;}
    .sec3 .list-btn p{ padding: 15px 0 0; font-size: 1.1rem;}
    .sec3 .list-btn p strong{ font-size: 1.4rem;}
}

.foot{ display: flex; width: 100%; height: 90px; background: #485157; align-items: center; justify-content: center;}
.foot img{ width: 400px;}

@media screen and (max-width: 1024px){
    .foot{ height: 45px;}
    .foot img{ width: 53.733vw;}
}

/* chart */
.sec4{ padding: 200px 0 100px; text-align: center;}
.sec4 > h3{ letter-spacing: .225em; font-weight: 700; font-size: 1.7rem;}
.sec4 > h3 em{ display: block; letter-spacing: .23em; font-weight: normal; font-style: normal; font-size: 1.4rem; font-family: 'Times New Roman';}
.sec4 > h4{ padding: 10px 0 0; letter-spacing: .3em; font-size: 3.4rem; line-height: 1.2;}
.sec4 .block2{ display: none;}
.sec4 .block1{ display: block;}
.sec4 .block .que{ padding: 10px 0 0; font-style: normal; font-size: 5.9rem; font-family: 'Times New Roman'; line-height: 1;}
.sec4 .block > h5{ padding: 40px 0 15px; letter-spacing: .3em; font-weight: 400; font-size: 2rem;}
.sec4 .block.result > h5{ padding: 20px 0 0; letter-spacing: .3em; font-weight: 400; font-size: 2rem;}
.sec4 .block .set{ display: flex; padding: 50px 0 0; justify-content: center;}
.sec4 .block .set > *{ padding: 0 10px;}
.sec4 .block .set > div{ letter-spacing: .3em; font-size: 2rem;}
.sec4 .block .set select{ border: none; font-size: 2rem;}
.sec4 .block .set2 input[type="radio"]{ position: absolute; overflow: hidden; clip: rect(0 0 0 0); margin: -1px; padding: 0; width: 1px; height: 1px; border: 0; white-space: nowrap; clip-path: inset(50%);}
.sec4 .block .set2 label{ position: relative; display: flex; margin: 30px auto 0; width: 145px; height: 45px; background: #fff; letter-spacing: .425em; font-size: 2rem; line-height: 45px; cursor: pointer; justify-content: center;}
.sec4 .block .set2-q4 label{ width: 310px; letter-spacing: .2em; font-size: 1.8rem;}
.sec4 .block .set2 label:after{ position: absolute; top: 5px; left: -10px; width: 10px; height: 30px; border-right: 3px solid #d50079; border-bottom: 3px solid #d50079; content: ""; opacity: 0; transform: rotate(45deg);}
.sec4 .block .set2 input:checked + label:after{ opacity: 1;}
.sec4 .block .btn2{ display: block; margin: 20px 0 0; text-decoration: none;}
.sec4 .block .list-btn{ display: flex; justify-content: center;}
.sec4 .block .set + .list-btn{ margin: 100px 0 0;}
.sec4 .block .set2 + .list-btn{ margin: 50px 0 0;}
.sec4 .block .btn2 + .list-btn{ margin: 40px 0 0;}
.sec4 .block .list-btn > li{ padding: 0 15px;}
.sec4 .block .btn{ display: flex; margin: 0; width: 250px; height: 60px; border-radius: 3px; background: #fff; text-decoration: none; font-weight: 700; font-size: 1.5rem; justify-content: center; align-items: center;}
.sec4 .block .btn.disabled{ opacity: .5; pointer-events: none;}
.sec4 .block button{ display: flex; width: 250px; height: 60px; border: none; border-radius: 3px; background: #fff; color: #485157; text-decoration: none; font-weight: 700; font-size: 1.5rem; cursor: pointer; justify-content: center; align-items: center;}

@media screen and (max-width: 1024px){
    .sec4{ padding: 100px 0 75px;}
    .sec4 > h3{ letter-spacing: .2em; font-size: 1.4rem;}
    .sec4 > h3 em{ letter-spacing: .2em; font-size: 1.2rem;}
    .sec4 > h4{ padding: 10px 0 0; font-size: 2.1rem;}
    .sec4 .block .que{ padding: 5px 0 0; font-size: 4.2rem;}
    .sec4 .block > h5{ padding: 20px 0 10px; letter-spacing: .2em; font-size: 1.8rem;}
    .sec4 .block.result > h5{ padding: 20px 0 0; letter-spacing: .2em; font-size: 1.8rem;}
    .sec4 .block .set{ padding: 30px 0 0;}
    .sec4 .block .set > *{ padding: 0 15px;}
    .sec4 .block .set2 label{ margin: 20px auto 0; width: 53.333vw; height: 40px; line-height: 40px;}
    .sec4 .block .set2-q4 label{ width: 72.666vw; font-size: 1.5rem;}
    .sec4 .block .set2 label:after{ top: 5px; left: -10px; width: 10px; height: 30px;}
    .sec4 .block .btn2{ margin: 10px 0 0; font-size: 1rem;}
    .sec4 .block .btn2.pc{ display: none;}
    .sec4 .block .set + .list-btn{ margin: 75px 0 0;}
    .sec4 .block .set2 + .list-btn{ margin: 45px 0 0;}
    .sec4 .block .btn2 + .list-btn{ margin: 30px 0 0;}
    .sec4 .block .list-btn{ overflow: hidden; margin: 0 -10px;}
    .sec4 .block .list-btn > li{ padding: 0 10px; width: calc(50% - 10px);}
    .sec4 .block .btn{ width: 100%; white-space: nowrap; font-size: 1.4rem;}
    .sec4 .block button{ width: 100%; color: #485157;}
}

.list-cn{ display: flex; margin: 100px auto 0; max-width: 1500px;}
.list-cn > li{ padding: 0 0 90px; width: 50%;}
.list-cn .cn1{ background: #fff;}
.list-cn .cn2{ background: #efe9e1;}
.list-cn .ico{ margin: -20px 0 0;}
.list-cn .ico img{ width: 74px;}
.list-cn h4{ padding: 45px 0 0; letter-spacing: .275em; font-size: 2rem; line-height: 1.5;}
.list-cn .tl{ padding: 15px 0 0; letter-spacing: .275em; font-size: 3.1rem;}
.list-cn .tl em{ display: block; letter-spacing: .23em; font-weight: normal; font-style: normal; font-size: 1.1rem; font-family: 'Times New Roman';}
.list-cn figure{ padding: 70px 0 0;}
.list-cn figure img{ max-width: 587px;}
.list-cn dt{ display: flex; flex-direction: column; padding: 60px 0 0; letter-spacing: .2em; font-size: 2.4rem; align-items: center;}
.list-cn dt span{ margin: 0 0 25px; padding: 8px 16px; border-radius: 3px; letter-spacing: .165em; font-weight: 600; font-size: 2rem; line-height: 1;}
.list-cn .cn1 dt span{ background: #da9157; color: #fff;}
.list-cn .cn2 dt span{ background: #486a4f; color: #efe9e1;}
.list-cn dd{ padding: 15px 0 0; letter-spacing: .2em; font-size: 1.7rem; line-height: 2;}
.list-cn dd small{ display: block; font-size: 1.4rem;}
.list-cn .atn{ display: inline-block; margin: 70px auto 0; padding: 15px 40px; border-radius: 3px; background: #486a4f; color: #eae8dc; letter-spacing: .225em; font-size: 1.4rem; line-height: 1;}
.list-cn .app{ padding: 60px 0 0;}
.list-cn .app a{ display: inline-block; width: 256px;}

@media screen and (max-width: 1024px){
    .list-cn{ flex-direction: column; margin: 45px 0 0; width: 100%;}
    .sec4 .list-cn{ margin: 45px 0 -75px;}
    .list-cn > li{ padding: 0 0 15px; width: 100%;}
    .list-cn > li.anchor{ padding: 0;}
    .list-cn .tl{ font-size: 2.1rem; line-height: 1.4;}
    .list-cn .tl em{ padding: 0 0 10px; font-size: 1.1rem;}
    .list-cn figure{ padding: 40px 0 0;}
    .list-cn figure img{ width: 100%;}
    .list-cn dt{ padding: 35px 0 0; letter-spacing: .1em; font-size: 1.9rem; line-height: 1.5;}
    .list-cn dt span{ margin: 0 0 15px; padding: 5px 15px; font-size: 1.7rem;}
    .list-cn .cn2 dt span{ margin: 0;}
    .list-cn dd{ padding: 10px 0 0; letter-spacing: .1em; font-size: 1.3rem;}
    .list-cn dd small{ font-size: 1.1rem;}
    .list-cn .atn{ margin: 45px auto 0; padding: 10px 15px; letter-spacing: .1em; font-size: 1.1rem;}
    .list-cn .app{ padding: 50px 30px 0;}
    .list-cn .app a{ display: block; width: 100%;}
}

.sec4 .list-cn h5{ margin: -20px 0 0;}
.sec4 .list-cn h5 img{ width: 190px;}

@media screen and (max-width: 1024px){
    .sec4 .list-cn .cn1{ padding: 0 0 60px;}
    .sec4 .list-cn .cn2{ padding: 0 0 45px;}
    .sec4 .list-cn h5{ margin: -4vw 0 0;}
    .sec4 .list-cn h5 img{ width: 41.333vw;}
    .sec4 .list-cn figure{ padding: 40px 30px 0;}
}

/* detail */
.sec5{ position: relative; padding: 10.416vw 0 0 12.76vw; width: 100vw; height: 48.958vw; background: url("/img/pickup/mattress-chart/detail/hero.jpg") no-repeat 0 0 / cover; color: #fff;}
.sec5 h3{letter-spacing: .235em; font-size: 1.77vw;}
.sec5 p{ padding: 2.083vw 0 0; letter-spacing: .34em; font-size: .9375vw; line-height: 2.5;}

@media screen and (max-width: 1024px){
    .sec5{ padding: 0; height: auto; background: none;}
    .sec5 .detail{ padding: 40px 0; background: #d7dcdf; color: #485157; text-align: center;}
    .sec5 h3{ letter-spacing: .225em; font-size: 1.9rem;}
    .sec5 p{ padding: 10px 0 0; letter-spacing: .1em; font-size: 1.3rem; line-height: 2.3;}
}

.sec6 .list-cn h5{ padding: 15px 0 0;}
.sec6 .list-cn h5 em{ display: inline-block; border-bottom: 1px solid; letter-spacing: .275em; font-weight: 400; font-style: normal; font-size: 2.5rem;}
.sec6 .list-cn h5 span{ display: block; padding: 20px 0 0;}
.sec6 .list-cn h5 span img{ width: auto; height: 33px;}
.sec6 .list-cn dl{ margin: 0 auto; max-width: 580px;}
.sec6 .list-cn dt{ padding: 80px 0 0;}
.sec6 .list-cn p + dl dt{ padding: 50px 0 0;}
.sec6 .list-cn dl + dl dt{ padding: 100px 0 0;}
.sec6 .list-cn .cn2 p + dl dt{ padding: 90px 0 0;}
.sec6 .list-cn .cn2 dl + dl dt{ padding: 90px 0 0;}
.sec6 .list-cn dd{ text-align: left;}
.sec6 .list-cn dd figure{ padding: 30px 0 0;}
.sec6 .list-cn figure.none-pd{ padding: 0;}
.sec6 .list-cn figure.half-pd{ padding: 35px 0 0;}
.sec6 .list-cn .cn2 dd figure{ padding: 0;}
.sec6 .list-cn li > p{ margin: 30px auto 0; max-width: 580px; text-align: justify; letter-spacing: .265em; font-size: 1.7rem; line-height: 2;}
.sec6 .list-cn li > p:first-child{ margin: 0 auto; padding: 90px 0 0;}
.sec6 .list-cn li > p small{ display: block;}
.sec6 .list-cn dd p + p{ margin: 45px auto 0;}
.sec6 .list-cn dd p + figure{ margin: 45px auto 0;}
.sec6 .list-cn dd figure + p{ margin: 45px auto 0;}
.sec6 .list-cn dd figure + figure{ padding: 45px 0 0;}
.sec6 .list-cn .tl-center{ margin: 100px auto 0; text-align: center; letter-spacing: .25em; font-size: 2.8rem;}
.sec6 .list-cn .tl-center span{ display: inline; border-bottom: 1px solid;}
.sec6 .list-cn .list-img{ margin: 0 auto; max-width: 580px;}
.sec6 .list-cn .list-img > li{ padding: 25px 0 0;}
.sec6 .list-cn .box{ margin: 70px auto 0; padding: 30px 25px 45px; max-width: 587px; border: none; border-radius: 3px;}
.sec6 .list-cn .box h5{ display: inline-block; border-bottom: 1px solid; letter-spacing: .215em; font-weight: 400; font-size: 2rem;}
.sec6 .list-cn .box p{ margin: 20px 0 0; text-align: justify;letter-spacing: .2em; font-size: 1.7rem; line-height: 2;}
.sec6 .list-cn .box p small{ display: block; padding: 0; text-align: left; font-size: 1.4rem;}
.sec6 .list-cn .cn1 .box{ background: #efe9e1;}
.sec6 .list-cn .cn2 .box{ background: #fff;}
.sec6 .list-cn .cn2 p em{ display: block; margin: -20px 0 0; color: #486a4f; text-align: center; font-style: normal;}

@media screen and (max-width: 1024px){
    .sec6 .list-cn{ margin: 0;}
    .sec6 .list-cn li{ padding: 0;}
    .sec6 .list-cn .cn2{ margin: 0 calc(50% - 50vw); padding: 0 25px; width: 100vw;}
    .sec6 .list-cn h4{ padding: 40px 0 0; font-size: 1.6rem;}
    .sec6 .list-cn h5{ padding: 10px 0 0;}
    .sec6 .list-cn h5 em{ letter-spacing: .275em; font-size: 2rem;}
    .sec6 .list-cn h5 span{ padding: 20px 0 0;}
    .sec6 .list-cn h5 span img{ width: 72vw; height: auto;}
    .sec6 .list-cn h5 + i{display: block; padding: 20px 0 0;}
    .sec6 .list-cn h5 + i img{ width: 16vw;}
    .tgl-b{ position: relative; display: flex; margin: 0 -25px; height: 70px; border-top: 1px solid #fff; background: #d7dcdf; letter-spacing: .275em; font-size: 2.5rem; line-height: 1; justify-content: center; align-items: center;}
    .tgl-b span{ display: flex; margin: 0 20px 0 0; padding: 0 0 0 35px; width: 130px; align-items: center;}
    .tgl-b span:before{ position: absolute; top: 50%; left: 75px; width: 14px; height: 14px; border-radius: 100%; background: #94a8af; content: ""; transform: translate(0,-50%);}
    .tgl-b.active span:after{ position: absolute; top: 50%; left: 73px; width: 18px; height: 18px; border: 1px solid; border-radius: 100%; content: ""; transform: translate(0,-50%);}
    .cn1 .tgl-b.active span:before{ background: #d99057;}
    .cn1 .tgl-b.active span:after{ color: #d99057;}
    .cn2 .tgl-b.active span:before{ background: #486a4f;}
    .cn2 .tgl-b.active span:after{ color: #486a4f;}
    .tgl-b2.active span:before{ background: #b56d71;}
    .tgl-b2.active span:after{ color: #b56d71;}
    .tgl-b span.cn3{ margin: 0; padding: 0 0 0 35px; width: auto;}
    .tgl-b span img{ vertical-align: middle;}
    .tgl-c{ display: none; padding: 35px 0;}
    .tgl-c2{ margin: 0 calc(50% - 50vw); padding: 0 0 35px; width: 100vw; background: #d7dcdf;}
    .tgl-c2 p{ font-size: 1.3rem;}
    .sec6 .list-cn p{ text-align: left; font-size: 1.3rem; line-height: 2;}
    .sec6 .list-cn .tl-center + p{ padding: 25px 0 0;}
    .sec6 .list-cn dl{ max-width: 100%;}
    .sec6 .list-cn dt{ padding: 40px 0 0; letter-spacing: .2em; font-size: 1.7rem;}
    .sec6 .list-cn p + dl dt{ padding: 25px 0 0;}
    .sec6 .list-cn dl + dl dt{ padding: 50px 0 0;}
    .tgl-c > dl:first-child > dt:first-child{ padding: 0;}
    .sec6 .list-cn .cn2 p + dl dt{ padding: 25px 0 0;}
    .sec6 .list-cn .cn2 dl + dl dt{ padding: 50px 0 0;}
    .sec6 .list-cn dd{ text-align: left;}
    .sec6 .list-cn .cn2 dd{ padding: 25px 0 0;}
    .sec6 .list-cn dd figure{ padding: 20px 0 0;}
    .sec6 .list-cn figure.half-pd{ padding: 20px 0 0;}
    .sec6 .list-cn figure.none-pd{ margin: 20px 0 0; padding: 0;}
    .sec6 .list-cn .cn2 dd figure{ padding: 0;}
    .sec6 .list-cn li > p{ margin: 30px 0 0; max-width: none; letter-spacing: .165em; font-size: 1.3rem;}
    .sec6 .list-cn dd p + p{ margin: 20px 0 0;}
    .sec6 .list-cn dd p + figure{ margin: 45px auto 0;}
    .sec6 .list-cn dd figure + p{ margin: 20px 0 0;}
    .sec6 .list-cn .tl-center{ margin: 40px 0 0; letter-spacing: .2em; font-size: 2rem;}
    .sec6 .list-cn .list-img{ flex-direction: column; max-width: 100%;}
    .sec6 .list-cn .list-img > li{ padding: 0; width: 100%}
    .sec6 .list-cn .list-img p{ margin: 25px 0 0; text-align: center; font-size: 1.5rem;}
    .sec6 .list-cn .box{ margin: 30px 0 0; padding: 25px; max-width: 100%;}
    .sec6 .list-cn .box h5{ padding: 0;}
    .sec6 .list-cn .box p{ margin: 15px 0 0; letter-spacing: .165em; font-size: 1.3rem;}
    .sec6 .list-cn .box p small{ font-size: 1.1rem;}
    .sec6 .list-cn .cn2 p em{ margin: 0;}
}

.slide-wrap{ margin: 60px 0 0;}
.cn1 .slide-wrap{ margin: 128px auto 0;}
.slide-wrap p{ text-align: center; letter-spacing: .275em; font-size: 1.8rem; line-height: 1.2;}
.slide-wrap p em{ display: block; letter-spacing: .23em; font-style: normal; font-size: 2.7rem; font-family: 'Times New Roman';}
.slide-wrap small{ display: block; padding: 20px 0 0; letter-spacing: .165em; font-size: 1.5rem;}
.slide-wrap .slick-prev,
.slide-wrap .slick-next { width: 15px; height: 23px;}
.slide-wrap .slick-prev:before,
.slide-wrap .slick-next:before { width: 15px; height: 23px; background: url("/img/pickup/mattress-chart/detail/arrow.png") no-repeat 0 0 / contain;}
.slide-wrap .slick-prev{ left: 40px;}
.slide-wrap .slick-next{ right: 40px;}

@media screen and (max-width: 1024px){
    .slide-wrap{ margin: 30px 0 0; padding: 0 0 35px;}
    .cn1 .slide-wrap{ margin: 30px 0 0;;}
    .slide-wrap p{ text-align: center !important; font-size: 1.5rem;}
    .slide-wrap p em{ font-size: 2.2rem;}
    .slide-wrap small{ display: block; padding: 20px 0 0; letter-spacing: .165em; font-size: 1.5rem;}
    .slide-wrap .slick-prev,
    .slide-wrap .slick-next { top: 50%; bottom: auto; width: 11px; height: 17px; transform: translate(0,-50%);}
    .slide-wrap .slick-prev:before,
    .slide-wrap .slick-next:before { width: 11px; height: 17px;}
    .slide-wrap .slick-prev{ left: 11px;}
    .slide-wrap .slick-next{ right: 11px;}
}

.sec6{ padding: 65px 0 170px; text-align: center;}
.sec6 .snav{ display: flex; justify-content: center;}
.sec6 .snav > li{ padding: 0 45px; border-right: 1px solid;}
.sec6 .snav > li:first-child{ border-left: 1px solid;}
.sec6 .snav a{ color: #485157; text-decoration: none; letter-spacing: .275em; font-size: 2.3rem;}
.sec6 .tl-wrap{ display: flex; padding: 27px 0; line-height: 1; justify-content: center; align-items: center;}
.sec6 .tl-wrap div img{ width: auto; height: 14px;}
.sec6 .tl-wrap h4{ padding: 0 270px; letter-spacing: .275em; font-size: 2.8rem;}
.sec6 .tl-wrap + .list-cn{ margin: auto;}
.sec6 .tl-wrap2{ padding: 75px 0;}
.sec6 .tl-wrap2 + p{ letter-spacing: .165em; font-size: 2.1rem;}
.list-shp{ display: flex; justify-content: center;}
.list-shp > li{ padding: 75px 65px 0;}
.list-shp a{ display: block; width: 365px;}
.list-shp p{ padding: 10px 0 0; width: 365px; text-align: left;}
.list-shp figure{ position: relative;}
.list-shp figure:after{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; background: rgba(0,0,0,.2); content: "";}
.list-shp a:hover figure:after{ background: rgba(0,0,0,0);}
.list-shp a:hover img{ opacity: 1;}
.list-shp figcaption{ position: absolute; top: 50%; left: 50%; z-index: 10; color: #fff; white-space: nowrap; font-weight: 600; font-size: 3.2rem; transform: translate(-50%,-50%);}

.list-shp2{ display: flex; padding: 20px 50px 160px; flex-wrap: wrap;}
.list-shp2 > li{ padding: 20px 30px 0; width: calc(100% / 3);}
.list-shp2 a{ position: relative; display: flex; padding: 0 0 0 75px; height: 70px; border-radius: 10px; background: #e6e9eb; text-align: left; text-decoration: none; letter-spacing: normal; font-weight: 600; font-size: 1.8rem; align-items: center;}
.list-shp2 a:before{ position: absolute; top: 50%; left: 45px; content: "▶︎"; font-size: 1.2rem; transform: translate(0,-50%);}

.result .list-shp2{ overflow: hidden; margin: 0 -10px; padding: 20px 0 0;}
.result .list-shp2 > li{ padding: 20px 10px 0; width: calc(100% / 3);}
.result .list-shp2 a{ padding: 0 15px 0 30px; border: 1px solid; border-radius: 5px; background: none; color: #485157; font-size: 1.5rem; line-height: 1.5;}
.result .list-shp2 a:before{ left: 15px; font-size: 1rem;}

.list-shp3{ padding: 20px 0 0; display: flex; flex-wrap: wrap; justify-content: center;}
.list-shp3 > li{ line-height: 2;}
.list-shp3 > li:before{ padding: 0 .5em; content: "／";}
.list-shp3 > li:first-child:before,
.list-shp3 > li:nth-child(6):before,
.list-shp3 > li:nth-child(11):before,
.list-shp3 > li:nth-child(16):before{ content: none;}

.mat .sec6 .btn a{display: block;  margin: 0 auto; width: 29.791vw;}

@media screen and (max-width: 1024px){
    .sec6{ padding: 25px 25px 0; background: #fff; text-align: center;}
    .sec6 .list-btn{ display: flex; justify-content: space-between;}
    .sec6 .list-btn > li{ padding: 0; width: calc(50% - 7px);}
    .list-shp{ flex-direction: column;}
    .sec6 .list-shp > li{ padding: 30px 80px 0;}
    .list-shp a{ width: 100%;}
    .list-shp p{ width: 100%;}
    .list-shp figcaption{ font-size: 1.9rem;}
    .mat .sec6 .btn{ margin: 0 calc(50% - 50vw); padding: 35px 20px; border-top: 1px solid #fff; background: #d7dcdf;}
    .mat .sec6 .btn a{ display: block; width: 100%;}
    
    .list-shp2{ flex-direction: column; padding: 10px 25px 0;}
    .list-shp2 > li{ padding: 10px 0 0; width: 100%;}
    .list-shp2 a{ padding: 0 0 0 50px; height: 55px; border-radius: 5px; font-size: 1.5rem;}
    .list-shp2 a:before{ left: 30px; font-size: 1rem;}
    
    .result .list-shp2{ margin: 0; padding: 10px 0 0;}
    .result .list-shp2 > li{ padding: 10px 0 0; width: 100%;}
    .result .list-shp2 a{ padding: 0 15px 0 30px; font-size: 1.5rem;}
    .result .list-shp2 a:before{ left: 15px; font-size: 1rem;}
}

.block3{ position: relative; margin: 60px auto 0; padding: 90px 100px 0; width: 1100px; background: #fff;}
.block3.bg{ background: #efe9e1;}
.block3 i{ position: absolute; top: -20px; left: 50%; display: block; width: 74px; transform: translate(-50%,0);}
.block3 .tl span{ display: block; letter-spacing: .275em; font-size: 1.8rem;}
.block3 .tl em{ display: inline-block; border-bottom: 1px solid; letter-spacing: .275em; font-style: normal; font-size: 2.4rem;}
.block3 .tl div{ padding: 45px 0 0;}
.block3 .tl div img{ width: auto; height: 36px;}
.block3 .list-result{ display: flex; justify-content: center;}
.block3 .list-result > li{ padding: 25px 5px 0; font-size: 1.5rem;}
.block3 .list-result span{ display: flex; margin: 0 0 5px; width: 100px; height: 32px; border-radius: 3px; background: #0b3a8a; color: #fff; letter-spacing: .12em; font-size: 1.6rem; font-family: 'Times New Roman'; line-height: 1; align-items: center; justify-content: center;}
.block3 .list-result span.m{ background: #873a62;}
.block3 .list-result span.h{ background: #52b1b6;}
.block3 .list-result span.gs{ background: #486a4f;}
.block3 .list-result span.gh{ background: #004738;}
.block3 .detail{ display: flex; flex-direction: row-reverse; padding: 50px 0 0; justify-content: space-between;}
.block3 .detail figure{ padding: 40px 0 0; width: 465px;}
.block3 .detail .exp{ width: 380px;}
.block3 .detail .exp p{ text-align: left; letter-spacing: .12; font-size: 1.6rem; line-height: 2.375;}
.block3 .detail .exp p + p{ margin: 30px 0 0; padding: 30px 0; border-top: 1px solid; border-bottom: 1px solid;}
.block3 .detail + p{ padding: 50px 0 0; letter-spacing: .165em; font-size: 1.6rem;}
.block3 .list-shp > li{ padding: 40px 35px 0;}
.block3 .list-shp a{ width: 240px;}
.block3 .list-shp p{ width: 240px;}
.block3 .list-shp figcaption{ font-size: 2.1rem;}
.block3 .app{ padding: 70px 0 0; text-align: center;}
.block3 .app a{ display: inline-block; width: 280px;}
.block3 .bn2{ margin: 65px -100px 0; padding: 75px; background: #d8dde0;}
.block3 .bn2 figcaption{ padding: 0 0 30px; letter-spacing: .285em; font-size: 2rem;}
.block3 .bn2 a{ display: block;}

@media screen and (max-width: 1024px){
    .block3{ margin: 25px auto 0; padding: 35px 20px 0; width: calc(100% - 40px);}
    .block3 i{ top: -20px; right: -10px; left: auto; width: 62px; transform: translate(0,0);}
    .block3 .tl span{ font-size: 1.6rem;}
    .block3 .tl em{ font-size: 2rem;}
    .block3 .tl div{ padding: 20px 0 0;}
    .block3 .tl div img{ height: 26px;}
    .block3 .list-result{ display: flex; overflow: hidden; margin: 0 -3px; justify-content: center;}
    .block3 .list-result > li{ padding: 25px 3px 0; font-size: 1.1rem;}
    .block3 .list-result span{ width: 19.6vw; height: 6.266vw; font-size: 1.2rem;}
    .block3 .detail{ flex-direction: column; padding: 0;}
    .block3 .detail figure{ padding: 0; width: 100%;}
    .block3 .detail .exp{ padding: 30px 0 0; width: 100%;}
    .block3 .detail .exp p{ letter-spacing: .1; font-size: 1.3rem; line-height: 2;}
    .block3 .detail + p{ padding: 30px 0 0; font-size: 1.3rem;}
    .block3 .list-shp > li{ padding: 25px 35px 0;}
    .block3 .list-shp a{ width: 100%;}
    .block3 .list-shp p{ width: 100%;}
    .block3 .list-shp figcaption{ font-size: 1.9rem;}
    .block3 .app{ padding: 40px 15px 0;}
    .block3 .app a{ display: block; width: 100%;}
    .block3 .bn2{ margin: 35px -20px 0; padding: 35px 0 25px;}
    .block3 .bn2 figcaption{ padding: 0 0 20px; letter-spacing: .2em; font-size: 1.7rem;}
}