@charset "UTF-8";
.function-in { max-width: 1000px; margin: 0 auto; }

.function-top { padding: 45px 0; background-color: #edeff4; }
.function-top .function-ttl { margin-bottom: 10px; font-size: 3.4rem; font-weight: 700; text-align: center; }
.function-top .function-subttl { font-size: 2.4rem; font-weight: 700; text-align: center; }

.function-nav { padding: 60px 0; }
@media screen and (max-width: 750px) { .function-nav { padding-bottom: 30px; } }
.function-nav ul { display: flex; justify-content: center; flex-wrap: wrap; }
.function-nav ul li { width: 20.5%; margin-right: 1%; }
@media screen and (max-width: 750px) { .function-nav ul li { width: 48%; margin-right: 4%; margin-bottom: 4%; }
  .function-nav ul li:nth-child(2n) { margin-right: 0; } }
.function-nav ul li:last-child { margin-right: 0; }
.function-nav ul li a { display: block; text-decoration: none; padding: 20px 10px; background-color: #edeff4; text-align: center; }
.function-nav ul li a:hover { background-color: #d80012; color: #fff; }

.function-point { position: relative; padding: 45px 0 90px; background-color: #edeff4; }
.function-point::before { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 0; margin-left: -64px; margin-bottom: -34px; border-style: solid; border-width: 34px 64px 0 64px; border-color: #edeff4 transparent transparent transparent; }
.function-point .point-in { max-width: 600px; margin: 0 auto; }
.function-point .point-heading { margin-bottom: 15px; padding: 10px; font-size: 2.4rem; font-weight: 700; background-color: #fff; color: #d80012; text-align: center; }
.function-point .point-list li { display: flex; flex-direction: row-reverse; justify-content: space-between; padding: 20px 0 15px; border-bottom: 1px solid #fff; justify-content: space-between; }
@media screen and (max-width: 750px) { .function-point .point-list li { display: block; } }
.function-point .point-list figure { width: 27%; }
@media screen and (max-width: 750px) { .function-point .point-list figure { width: 100%; margin-bottom: 1em; text-align: center; } }
.function-point .point-list .point-list-txt { width: 65%; padding-left: 35px; background: url("../img/common/ico_point.svg") no-repeat left top 0.3em; background-size: 20px auto; }
@media screen and (max-width: 750px) { .function-point .point-list .point-list-txt { width: 100%; } }

.function-heading { margin-bottom: 50px; font-size: 2.4rem; font-weight: 700; text-align: center; }

.function-subheading { margin-bottom: 20px; font-weight: 700; }

.function-copy { margin-bottom: 30px; font-size: 1.6rem; font-weight: 700; }

.function-lead { font-size: 1.6rem; font-weight: 300; }

.function-fig .function-subheading { margin-bottom: 10px; }
.function-fig .function-copy { margin-bottom: 20px; }

.function-fig-01 { max-width: 700px; margin: 0 auto; }
.function-fig-01 li { margin-bottom: 50px; }

.function-fig-02 { display: flex; flex-wrap: wrap; }
.function-fig-02 li { width: 47%; margin-right: 6%; margin-bottom: 50px; }
.function-fig-02 li:nth-child(2n) { margin-right: 0; }
.function-fig-02 li figure { margin-bottom: 20px; }

.function-fig-03 { display: flex; flex-wrap: wrap; }
.function-fig-03 li { width: 30.8%; margin-right: 3.8%; margin-bottom: 50px; }
.function-fig-03 li:nth-child(3n) { margin-right: 0; }
.function-fig-03 li figure { margin-bottom: 20px; }

.function-fig-04 { display: flex; flex-wrap: wrap; }
.function-fig-04 li { width: 23.2%; margin-right: 2.4%; margin-bottom: 50px; }
.function-fig-04 li:nth-child(4n) { margin-right: 0; }
.function-fig-04 li figure { margin-bottom: 20px; }

.function-movie { position: relative; width: 100%; max-width: 700px; margin: 0 auto; padding-bottom: 46.25%; height: 0; overflow: hidden; }
.function-movie iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.function-fig-txt { display: flex; justify-content: space-between; }
@media screen and (max-width: 750px) { .function-fig-txt { display: block; } }
.function-fig-txt.reverse { flex-direction: row-reverse; }
.function-fig-txt .function-fig-txt-img { width: 47%; }
@media screen and (max-width: 750px) { .function-fig-txt .function-fig-txt-img { width: 100%; margin-bottom: 20px; } }
.function-fig-txt .function-fig-txt-lead { width: 47%; }
@media screen and (max-width: 750px) { .function-fig-txt .function-fig-txt-lead { width: 100%; } }
.function-fig-txt .function-fig-txt-lead .function-subheading { margin-bottom: 10px; }
.function-fig-txt .function-fig-txt-lead .function-copy { margin-bottom: 20px; }

.function-tab { margin-bottom: 140px; }
.function-tab .function-tab-top { margin-bottom: 60px; padding-bottom: 15px; border-bottom: 1px solid #999db1; }
.function-tab .function-tab-top .tabmenu { display: flex; }
.function-tab .function-tab-top .tabmenu li { position: relative; margin-right: 60px; color: #999db1; cursor: pointer; }
.function-tab .function-tab-top .tabmenu li:last-child { margin-right: 0; }
.function-tab .function-tab-top .tabmenu li:hover, .function-tab .function-tab-top .tabmenu li.active { color: #535a60; }
.function-tab .function-tab-top .tabmenu li:hover::after, .function-tab .function-tab-top .tabmenu li.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; margin-bottom: -16px; background-color: #d80012; }

.function-fig-compare { position: relative; }
.function-fig-compare .function-fig-compare-box { position: relative; }
.function-fig-compare .function-fig-compare-area { position: absolute; top: 50%; left: 0; width: 100%; height: 38px; margin-top: -19px; }
.function-fig-compare .function-fig-compare-icon { position: absolute; top: 0; left: calc(50% - 19px); width: 38px; cursor: pointer; }
.function-fig-compare .function-fig-compare-txt { display: flex; justify-content: space-between; margin-top: 10px; }
.function-fig-compare .function-fig-compare-txt p { font-size: 1.6rem; color: #d80012; font-weight: 300; }

.function-fig-compare-02 figure { margin-bottom: 40px; }
.function-fig-compare-02 .function-fig-compare-box { position: relative; max-width: 336px; margin: 0 auto 60px; font-size: 1.6rem; font-weight: 300; text-align: center; }
.function-fig-compare-02 .function-fig-compare-box:last-child { margin-bottom: 0; }
.function-fig-compare-02 .function-fig-compare-box.function-fig-compare-rays::before { content: '少'; }
.function-fig-compare-02 .function-fig-compare-box.function-fig-compare-rays::after { content: '多'; }
.function-fig-compare-02 .function-fig-compare-box.function-fig-compare-temp::before { content: '高'; }
.function-fig-compare-02 .function-fig-compare-box.function-fig-compare-temp::after { content: '低'; }
.function-fig-compare-02 .function-fig-compare-box::after, .function-fig-compare-02 .function-fig-compare-box::before { position: absolute; bottom: 0; font-size: 1.6rem; font-weight: 300; }
.function-fig-compare-02 .function-fig-compare-box::before { left: 0; }
.function-fig-compare-02 .function-fig-compare-box::after { right: 0; }
.function-fig-compare-02 .function-fig-compare-box .function-fig-compare-area { position: relative; width: 100%; height: 38px; margin-bottom: 15px; }
.function-fig-compare-02 .function-fig-compare-box .function-fig-compare-area::before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background-color: #d80012; }
.function-fig-compare-02 .function-fig-compare-box .function-fig-compare-icon { position: absolute; top: 0; left: calc(50% - 19px); width: 38px; cursor: pointer; }

.function-gbox { padding: 60px 60px 90px; background-color: #edeff4; }
@media screen and (max-width: 750px) { .function-gbox { padding: 40px 20px; } }
.function-gbox .function-copy { margin-bottom: 200px; }
@media screen and (max-width: 750px) { .function-gbox .function-copy { margin-bottom: 100px; } }
.function-gbox .function-fig-txt .function-fig-txt-img { width: 46.5909090909%; }
@media screen and (max-width: 750px) { .function-gbox .function-fig-txt .function-fig-txt-img { width: 100%; } }
.function-gbox .function-fig-txt .function-fig-txt-lead { width: 46.5909090909%; }
@media screen and (max-width: 750px) { .function-gbox .function-fig-txt .function-fig-txt-lead { width: 100%; } }

.function-rootlink a { display: block; text-decoration: none; padding: 25px 50px; border: 1px solid #d80012; background: #fff url("../img/common/ico_arrow_red.svg") no-repeat right 30px center; background-size: 9px auto; color: #d80012; }

.function-movielink { max-width: 580px; margin: 0 auto; }
.function-movielink a { display: block; text-decoration: none; padding: 30px; border: 1px solid #999db1; background: #fff url("../img/common/ico_sns_y.png") no-repeat right 30px center; background-size: 28px auto; color: #535a60; }

.function-filelink { max-width: 580px; margin: 0 auto; }
.function-filelink a { display: block; text-decoration: none; padding: 30px; border: 1px solid #999db1; background: #fff url("../img/common/ico_pdf.svg") no-repeat right 15px center; background-size: 30px auto; color: #535a60; }

.function-sec { padding-top: 85px; padding-bottom: 90px; background-color: #fff; border-bottom: 1px solid #edeff4; }

.function-image { padding: 80px 0 100px; border-bottom: 1px solid #edeff4; }
.function-image .function-image-scene { margin-bottom: 40px; border-bottom: 1px solid #999db1; }
.function-image .function-image-scene .function-image-scene-in { position: relative; max-width: 217px; }
.function-image .function-image-scene .function-image-scene-in p { position: relative; width: 100%; padding-bottom: 10px; background: url("../img/common/ico_arrow_red_b.svg") no-repeat right center; background-size: 12px auto; cursor: pointer; }
.function-image .function-image-scene .function-image-scene-in p::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; background-color: #d80012; }
.function-image .function-image-scene .function-image-scene-in ul { display: none; position: absolute; z-index: 10; width: 100%; padding: 1em; background-color: #EDEFF4; font-size: 1.6rem; }
.function-image .function-image-scene .function-image-scene-in ul li { margin-bottom: 0.5em; cursor: pointer; }
.function-image .function-image-scene .function-image-scene-in ul li:hover span, .function-image .function-image-scene .function-image-scene-in ul li.active span { text-decoration: underline; }
.function-image .function-image-scene .function-image-scene-in.is-show ul { display: block; }
.function-image .function-image-lead { margin-bottom: 50px; font-weight: 300; }
.function-image .function-image-compare { position: relative; }
.function-image .function-image-compare .function-image-compare-box { position: relative; }
.function-image .function-image-compare .function-image-compare-area { position: absolute; top: 50%; left: 0; width: 100%; height: 38px; margin-top: -19px; }
.function-image .function-image-compare .function-image-compare-icon { position: absolute; top: 0; left: calc(50% - 19px); width: 38px; cursor: pointer; }
.function-image .function-image-compare .function-image-compare-txt-h { max-width: 170px; margin: 30px auto 45px; padding: 5px; border: 1px solid #999db1; background-color: #fff; text-align: center; }
.function-image .function-image-compare .function-image-compare-txt { display: flex; justify-content: center; margin: 60px auto 0; }
.function-image .function-image-compare .function-image-compare-txt p { position: relative; width: 100%; max-width: 95px; margin-right: 25px; font-size: 1.6rem; font-weight: 300; text-align: center; }
.function-image .function-image-compare .function-image-compare-txt p::before { content: ''; display: block; width: 100%; height: 7px; margin-bottom: 10px; background-color: #edeff4; }
.function-image .function-image-compare .function-image-compare-txt p:last-child { margin-right: 0; }
.function-image .function-image-compare .function-image-compare-txt p.active::before { background-color: #d80012; }
.function-image .function-image-compare .function-image-compare-slider { display: none; }
.function-image .function-image-compare .function-image-compare-slider.slick-initialized { display: block; }

.function-voice { padding: 80px 0 130px; border-bottom: 1px solid #edeff4; }
.function-voice .voice-con { position: relative; max-width: 1150px; margin: 0 auto; }
.function-voice .voice-con .voice-swiper { max-width: 1000px; margin: 0 auto; overflow: hidden; }
@media screen and (max-width: 750px) { .function-voice .voice-con .voice-swiper { width: 78.2608695652%; } }
.function-voice .voice-con .swiper-slide { padding-bottom: 20px; }
.function-voice .voice-con .voice-box { position: relative; padding: 40px 25px; background-color: #edeff4; border-radius: 0.5em; }
.function-voice .voice-con .voice-box::before { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 0; margin-bottom: -20px; border-style: solid; border-width: 30px 25px 0 0; border-color: #edeff4 transparent transparent transparent; }
.function-voice .voice-con .voice-box .voice-box-txt { margin-bottom: 1em; font-size: 1.5rem; }
.function-voice .voice-con .voice-box .voice-box-info { font-size: 1.4rem; }
.function-voice .voice-con .slide-btn { position: absolute; top: 0; width: 44px; margin-top: 115px; cursor: pointer; }
.function-voice .voice-con .slide-btn.slide-prev { left: 0; }
.function-voice .voice-con .slide-btn.slide-next { right: 0; }

.function-faq { padding: 90px 0 130px; border-bottom: 1px solid #edeff4; }
.function-faq .faq-box-item { border-bottom: 1px solid #edeff4; }
.function-faq .faq-box-item:first-child { border-top: 1px solid #edeff4; }
.function-faq .faq-box-item dt { padding: 10px 60px 20px 25px; background: url("../img/common/ico_toggle_o.svg") no-repeat right 50px center; background-size: 28px auto; font-size: 2.0rem; font-weight: 700; cursor: pointer; }
@media screen and (max-width: 750px) { .function-faq .faq-box-item dt { padding: 20px 40px 20px 10px; background-position: right 20px center; } }
.function-faq .faq-box-item dt.active { background-image: url("../img/common/ico_toggle_c.svg"); }
.function-faq .faq-box-item dt div { padding-left: 1.6em; text-indent: -1.6em; }
.function-faq .faq-box-item dt div::before { content: 'Q.'; margin-right: 35px; font-size: 4.0rem; font-weight: 700; color: #d80012; }
@media screen and (max-width: 750px) { .function-faq .faq-box-item dt div::before { margin-right: 0.5em; font-size: 2.0rem; } }
.function-faq .faq-box-item dd { display: none; padding: 0 100px 40px; font-size: 1.6rem; font-weight: 300; line-height: 2; }
@media screen and (max-width: 750px) { .function-faq .faq-box-item dd { padding: 0 40px 40px 40px; } }

.function-lineup { padding: 60px 0 100px; border-bottom: 1px solid #edeff4; }
.function-lineup .lineup-con { position: relative; }
.function-lineup .lineup-con .slick-slide { margin: 0 20px; }
.function-lineup .lineup-con .lineup-slider { margin: 0 auto 20px; }
.function-lineup .lineup-con .lineup-slider li a { display: block; text-decoration: none; }
.function-lineup .lineup-con .lineup-slider li .lineup-fig { margin-bottom: 10px; }
.function-lineup .lineup-con .lineup-slider li .lineup-heading { margin-bottom: 10px; }
.function-lineup .lineup-con .lineup-slider li .lineup-money { font-size: 1.4rem; color: #535a60; }
.function-lineup .lineup-con .slide-btn { position: absolute; top: 0; width: 44px; margin-top: 115px; cursor: pointer; }
.function-lineup .lineup-con .slide-btn.slide-prev { left: 0; margin-left: -44px; }
@media screen and (max-width: 1200px) { .function-lineup .lineup-con .slide-btn.slide-prev { margin-left: 0; } }
.function-lineup .lineup-con .slide-btn.slide-next { right: 0; margin-right: -44px; }
@media screen and (max-width: 1200px) { .function-lineup .lineup-con .slide-btn.slide-next { margin-right: 0; } }
.function-lineup .lineup-btn { width: 100%; max-width: 173px; margin: 0 auto; }
.function-lineup .lineup-btn a { display: block; text-decoration: none; padding: 5px; border: 1px solid #535a60; background: url("../img/common/ico_arrow.svg") no-repeat right 20px center; background-size: 9px auto; font-size: 1.7rem; color: #535a60; text-align: center; border-radius: 2rem; }

.function-genre { padding: 80px 0 100px; border-bottom: 1px solid #edeff4; }
.function-genre .function-genre-lead { margin-bottom: 50px; font-weight: 300; }
.function-genre .function-genre-list { display: flex; flex-wrap: wrap; }
.function-genre .function-genre-list li { width: 23.2%; margin-right: 2.4%; margin-bottom: 2.4%; }
@media screen and (max-width: 750px) { .function-genre .function-genre-list li { width: 48%; margin-right: 4%; margin-bottom: 4%; }
  .function-genre .function-genre-list li:nth-child(2n) { margin-right: 0; } }
.function-genre .function-genre-list li:nth-child(4n) { margin-right: 0; }
.function-genre .function-genre-list li:last-child { margin-right: 0; }
.function-genre .function-genre-list li a { display: block; text-decoration: none; color: #fff; }
.function-genre .function-genre-list li figure { position: relative; }
.function-genre .function-genre-list li figure figcaption { position: absolute; bottom: 0; left: 0; width: 100%; padding: 15px 30px 15px 15px; background: url("../img/common/ico_arrow_w.svg") no-repeat right 15px center; background-size: 7px auto; font-size: 1.6rem; font-weight: 700; }

.function-toggle { padding: 80px 0 60px; }
.function-toggle .function-toggle-con { margin-bottom: 45px; border-top: 1px solid #edeff4; border-bottom: 1px solid #edeff4; }
.function-toggle .function-heading { margin-bottom: 0; padding: 30px 30px 30px 30px; background: url("../img/common/ico_toggle_o02.svg") no-repeat right 20px center; background-size: 28px auto; text-align: left; }
.function-toggle .function-heading.active { background-image: url("../img/common/ico_toggle_c.svg"); }
.function-toggle .function-toggle-box { display: none; padding: 60px 60px 95px; background-color: #edeff4; }
@media screen and (max-width: 750px) { .function-toggle .function-toggle-box { padding: 40px 20px; } }
.function-toggle .function-rootlink { max-width: 410px; margin: 0 auto 40px; }
.function-toggle .toggle-closebtn { max-width: 178px; margin: 0 auto; padding: 10px; background-color: #535a60; color: #fff; text-align: center; cursor: pointer; }

.function-gallery { margin-bottom: 80px; }
.function-gallery .function-gallery-ttl { padding: 40px 0; background-color: #535A60; color: #fff; font-size: 2.4rem; font-weight: 700; text-align: center; }
.function-gallery .function-gallery-list { display: flex; flex-wrap: wrap; padding-left: 8px; }
.function-gallery .function-gallery-list li { width: 25%; padding: 8px 8px 0 0; }
@media screen and (max-width: 750px) { .function-gallery .function-gallery-list li { width: 50%; } }

/*# sourceMappingURL=function.css.map */