@charset "utf-8";

.lock{overflow:hidden;}
.wrap{position:relative; min-height:100%;}

/* header */
.header{display:flex; justify-content:space-between; align-items:center; height:17.3333vw; padding:0 20px; border-bottom:0.2667vw solid #ddd;}
.header h1{width:25.0667vw; height:10.1333vw; overflow:hidden; text-indent:-9999px; background:url(../_images/logo.png) no-repeat 0 0; background-size:100% auto;}
.header .btn-nav{position:relative; width:8vw; height:6.1333vw; box-sizing:border-box; overflow:hidden; text-indent:-9999px; border-top:0.5333vw solid #222;}
.header .btn-nav:before{position:absolute; top:2.1333vw; left:0; width:5.3333vw; height:0.5333vw; content:''; background:#222;}
.header .btn-nav:after{position:absolute; bottom:0; left:0; width:100%; height:0.5333vw; content:''; background:#222;}

.nav{position:fixed; top:0; left:0; z-index:10; display:none; width:100%; height:100%; box-sizing:border-box; padding:24vw 16vw 0; border-left:0.5333vw solid #2fa5d6; background:#fff;}
.nav.open{display:block;}
.nav .btn-close{position:absolute; top:5.6vw; right:5.6vw; width:5.8667vw; height:5.8667vw; overflow:hidden; text-indent:-9999px;}
.nav .btn-close:before{position:absolute; top:-0.8vw; left:2.6667vw; width:0.5333vw; height:7.2vw; content:''; background:#222; transform:rotate(45deg);}
.nav .btn-close:after{position:absolute; top:-0.8vw; left:2.6667vw; width:0.5333vw; height:7.2vw; content:''; background:#222; transform:rotate(-45deg);}
.nav ul{font-size:5.8667vw; font-weight:700;}
.nav li{margin:0 0 5.3333vw;}
.nav .sub{margin:4vw 0 0; font-size:4.2667vw; font-weight:400;}
.nav .sub li{margin:4vw 0 0;}
.nav li.active > a{color:#2fa5d6;}
.nav li.active li.active{color:#2fa5d6; text-decoration:underline;}

/* footer */
.footer{padding:10.6667vw 5.3333vw 16vw; font-size:3.4667vw; background:#222730;}
.footer h2{margin:0 0 8vw; font-size:4.2667vw; color:#fff;}
.footer address{margin:5.3333vw 0; color:#fff; line-height:1.6; opacity:.7;}
.footer .copyright{color:#fff; opacity:.7;}

/* btn */
.btn-wrap{display:flex;}
.btn-wrap .btn{flex:1; height:13.3333vw; box-sizing:border-box; padding:0; font-size:4vw; text-align:center; line-height:13.3333vw; border-radius:1.0667vw;}
.btn-wrap .btn + .btn{margin:0 0 0 2.6667vw;}
.btn-wrap .btn-default{border:0.2667vw solid #ccc;}
.btn-wrap .btn-primary{color:#fff; background:#2fa5d6;}
.btn-area .btn{display:inline-block; box-sizing:border-box; padding:2.6667vw 4vw 2.1333vw; font-size:3.4667vw; border-radius:4.8vw;}
.btn-area .btn + .btn{margin-left:5px;}
.btn-area .btn-default{color:#fff; border:0.2667vw solid #fff;}
.btn-area .btn-primary{color:#3da5ea; border:0.2667vw solid #3da5ea;}

/* main visual */
.main-visual{position:relative; overflow:hidden;}
.main-visual img{width:100%;}
.main-visual .swiper-slide{position:relative;}
.main-visual .txt{position:absolute; bottom:21.3333vw; left:0; padding:0 10.6667vw; color:#fff;}
.main-visual .txt strong{font-size:9.6vw; font-weight:700;}
.main-visual .txt p{margin:1.3333vw 0 5.3333vw; line-height:1.6;}
.main-visual .btn-detail{display:inline-block; box-sizing:border-box; padding:2.6667vw 4vw 2.1333vw; font-size:3.4667vw; color:#fff; border:0.2667vw solid #fff; border-radius:4.8vw;}
.main-visual .paging{position:absolute; left:0; bottom:8vw; z-index:2; width:100%; text-align:center;}
.main-visual .paging .swiper-pagination-bullet{margin:0 1.0667vw; background:#fff; opacity:.2;}
.main-visual .paging .swiper-pagination-bullet-active{background:#227be8; opacity:1;}

/* main contents */
.main-contents .section-wrap{padding:9.6vw 5.3333vw 8vw; background:#f5f5f5;}
.section-wrap .section{padding:8vw 6.6667vw; border-radius:2.6667vw; background:#fff;}
.section-wrap .section + .section{margin:2.6667vw 0 0;}
.section-wrap .section h2{margin:0 0 2.6667vw; font-size:5.3333vw;}
.section-wrap .section p{line-height:1.5;}
.section-wrap .counsel{background:#fff url(../_images/bg_counsel.png) no-repeat right 5.0667vw center; background-size:18.4vw auto;}
.section-wrap .regi{background:#fff url(../_images/bg_regi.png) no-repeat right 2.6667vw center; background-size:26.6667vw auto;}
.section-wrap .greeting{padding:13.3333vw 0; text-align:center; color:#fff; background:url(../_images/bg_greeting.png) no-repeat center; background-size:100% auto;}
.section-wrap .greeting h2{margin:0 0 2.6667vw;}

/*
sub contents
*/
.sub-contents{padding:13.3333vw 5.3333vw 26.6667vw;}
.sub-contents .page-title{position:relative; display:inline-block; margin:0 0 16vw; font-size:8vw;}
.sub-contents .page-title:after{position:absolute; top:4vw; right:-2.6667vw; width:1.8667vw; height:2.1333vw; content:''; background:#2fa5d6;}
.sub-contents .page-title span{display:block; margin:0 0 1.3333vw; font-size:3.4667vw; font-weight:400; opacity:.5;}
.sub-contents .disc{margin:0 0 8vw; line-height:1.6;}
.sub-contents .disc.em{margin:0 0 4vw; font-size:5.3333vw;}
.sub-contents .disc a{text-decoration:underline;}
.sub-contents .disc .blue{color:#2fa5d6;}
.sub-contents .disc .red{color:#e96b5e;}

.breadcrumb{display:flex; align-items:stretch; height:15.4667vw; font-size:3.4667vw; background:#f5f5f5;}
.breadcrumb select{height:100%;}
.breadcrumb .home{position:relative; width:15.4667vw; overflow:hidden; margin:0 5.3333vw 0 0; padding:5.6vw 0; text-indent:-9999px; background:url(../_images/ico_home.png) no-repeat center; background-size:5.3333vw auto;}
.breadcrumb .home:after{position:absolute; top:50%; right:0; width:0.2667vw; height:5.0667vw; content:''; background:#d5d5d5; transform:translateY(-50%);}
.breadcrumb > div{flex:1;}
.breadcrumb .depth02{position:relative; margin:0 0 0 5.3333vw;}
.breadcrumb .depth02:before{position:absolute; top:50%; left:-5.3333vw; width:0.2667vw; height:5.0667vw; content:''; background:#d5d5d5; transform:translateY(-50%);}

.sub-title-area{display:flex; justify-content:space-between;}
.sub-title-area h3{font-size:5.3333vw;}
.sub-title-area .info{height:25px; padding:0 2.6667vw; font-size:3.4667vw; color:#fff; text-align:center; line-height:25px; background:#2fa5d6;}

/* modal */
.modal{position:fixed; top:0; left:0; display:none; width:100%; height:100%; overflow:auto; background:rgba(0, 0, 0, .4)}
.modal-inner{position:absolute; top:16vw; left:50%; width:90%; box-sizing:border-box; padding:10.6667vw 5.3333vw; border-radius:2.6667vw; background:#fff; transform:translateX(-50%);}
.modal .title-area{margin:0 0 10.6667vw;}
.modal h1{font-size:5.8667vw; text-align:center;}
.modal .btn-close{position:absolute; top:5.3333vw; right:5.3333vw; width:5.8667vw; height:5.8667vw; overflow:hidden; text-indent:-9999px;}
.modal .btn-close:before{position:absolute; top:-0.5333vw; left:2.4vw; width:0.5333vw; height:6.9333vw; content:''; background:#222; transform:rotate(45deg);}
.modal .btn-close:after{position:absolute; top:-0.5333vw; left:2.4vw; width:0.5333vw; height:6.9333vw; content:''; background:#222; transform:rotate(-45deg);}
.modal .sample{position:relative;}
.modal .sample + .sample{margin:12vw 0 0;}
.modal .sample h2{margin:0 0 1.3333vw; font-weight:400;}
.modal .sample .btn-etc{position:absolute; top:-11px; right:0; width:15px; height:30px; overflow:hidden; text-indent:-9999px; background:url(../_images/ico_etc.png) no-repeat right center; background-size:auto 18px;}
.modal .audio{padding:9.3333vw 4.8vw; border-radius:2.6667vw; background:rgba(47, 165, 214, .05);}

/* audioplayer */
.audioplayer{position:relative; height:auto; margin:0; padding:0; border:0; background:none;}
.audioplayer audio{position:absolute;}
.audioplayer .audioplayer-playpause{width:40px; height:40px; box-sizing:border-box;}
.audioplayer:not(.audioplayer-playing) .audioplayer-playpause,
.audioplayer:not(.audioplayer-playing) .audioplayer-playpause:hover,
.audioplayer-playing .audioplayer-playpause,
.audioplayer-playing .audioplayer-playpause:hover{border:4px solid #000; background:none;}
.audioplayer:not(.audioplayer-playing) .audioplayer-playpause a{border-left-color:#000;}
.audioplayer-playing .audioplayer-playpause a{border-color:#000;}
.audioplayer-playing .audioplayer-playpause a::before, 
.audioplayer-playing .audioplayer-playpause a::after{width:6px; background:#000;}
.audioplayer-time{position:absolute; bottom:-2px; right:0; width:auto; font-size:13px;}
.audioplayer-time-duration{right:37px; margin:0;}
.audioplayer-time-duration:after{margin:0 0 0 2px; content:'/'}
.audioplayer-bar{margin:0 0 0 20px;}
.audioplayer-bar::before{height:5px; border-radius:3px; background:rgba(0, 0, 0, .1);}
.audioplayer-bar-loaded{height:5px; border-radius:3px; background:rgba(0, 0, 0, .1);}
.audioplayer-bar-played{height:5px; border-radius:3px; background:#000;}
.audioplayer-bar-played::after,
.audioplayer-playing .audioplayer-bar-played::after,
.audioplayer:not(.audioplayer-playing) .audioplayer-bar-played::after{top:-7px; width:18px; height:18px; box-sizing:border-box; border:1px solid #000; border-radius:9px;}
.audioplayer-bar > div{top:4px;}
.audioplayer-volume{position:absolute; top:-70px; right:5px;}
.audioplayer-volume-button{width:30px; height:30px;}
.audioplayer-volume-button a{width:30px; height:30px; background:url(../_images/ico_volume.png) no-repeat center; background-size:31px auto;}
.audioplayer-volume-button a:before,
.audioplayer-volume-button a:after{display:none;}
.audioplayer-mute .audioplayer-volume-button a{background:url(../_images/ico_volume_muted.png) no-repeat center; background-size:31px auto;}

/* form */
.form-wrap{padding:8vw 0 0; border-top:0.5333vw solid #707070;}
.form-wrap .row + .row{margin:8vw 0 0;}
.form-wrap .row:nth-last-of-type(1){padding:0 0 8vw; border-bottom:0.2667vw solid #707070;}
.form-wrap .info{margin:4vw 0 0;}
.form-wrap .required-txt{margin:4vw 0 0;}
.form-wrap .label{margin:0 0 2.1333vw;}
.form-wrap input[type="text"],
.form-wrap input[type="number"]{width:100%; height:13.3333vw; box-sizing:border-box; padding:0 4vw; border:0.2667vw solid #ddd; border-radius:1.0667vw;}
.form-wrap select{width:100%; height:13.3333vw; box-sizing:border-box; padding-left:4vw; border:0.2667vw solid #ddd; border-radius:1.0667vw; background-position:right 5.6vw center;}
.form-wrap textarea{width:100%; height:227px; box-sizing:border-box; padding:10px; border:0.2667vw solid #ddd; border-radius:1.0667vw;}
.form-wrap input[type="text"].code,
.form-wrap input[type="number"].code{width:65%; margin-right:4vw;}
.form-wrap .btn-wrap{margin:8vw 0 0;}
.form-wrap input[type="text"].error,
.form-wrap input[type="number"].error{color:#e96b5e; border-color:#e96b5e;}
.form-wrap input[type="text"].num,
.form-wrap input[type="number"].num{width:50%; margin-right:10px;}
.form-wrap input[type="text"].url,
.form-wrap input[type="number"].url{flex:1; margin-left:10px;}
.form-wrap .error-txt{margin:2.6667vw 0 0; color:#e96b5e;}
.form-wrap .caution{margin:2.6667vw 0 0; font-size:3.4667vw; color:#e96b5e;}
.form-wrap input[type="text"]:disabled,
.form-wrap input[type="number"]:disabled{color:#ccc; border:0; background:#f9f9f9;}
.form-wrap select:disabled{color:#ccc; border:0; background:#f9f9f9 url(../_images/ico_select_disabled.png) no-repeat right 5.6vw center; background-size:3.2vw auto;}
.form-wrap .horizontal-align{margin:10px 0;}

.checkbox{position:relative;}
.checkbox input[type="checkbox"]{position:absolute; top:0; left:0;}
.checkbox label{display:inline-block; height:5.3333vw; margin:0; padding:0 0 0 8vw; line-height:5.3333vw;}
.checkbox label:before{position:absolute; top:0; left:0; width:5.3333vw; height:5.3333vw; box-sizing:border-box; content:''; border:0.2667vw solid #ccc; background:#fff;}
.checkbox input[type="checkbox"]:checked + label:before{border:0; background:#3f485a;}
.checkbox input[type="checkbox"]:checked + label:after{position:absolute; top:0.5333vw; left:1.8667vw; width:1.3333vw; height:2.6667vw; content:''; border-bottom:0.5333vw solid #fff; border-right:0.5333vw solid #fff; transform:rotate(45deg) skew(8deg);}
input[type="text"] + .checkbox{margin:4vw 0 0;}

.radio-wrap{display:flex; margin:0 0 5.3333vw;}
.radio-wrap.right{justify-content:flex-end;}
.radio-wrap .radio + .radio{margin-left:8vw;}
.radio{position:relative;}
.radio input[type="radio"]{position:absolute; top:0; left:0;}
.radio label{display:inline-block; height:5.3333vw; margin:0; padding:0 0 0 8vw; line-height:5.3333vw;}
.radio label:before{position:absolute; top:0; left:0; width:5.3333vw; height:5.3333vw; box-sizing:border-box; content:''; border:0.2667vw solid #ccc; border-radius:50%; background:#fff;}
.radio input[type="radio"]:checked + label:before{border:0; background:#3f485a;}
.radio input[type="radio"]:checked + label:after{position:absolute; top:1.6vw; left:1.6vw; width:2.1333vw; height:2.1333vw; content:''; border-radius:50%; background:#fff;}

.horizontal-align{display:flex; align-items:center;}
.required{font-weight:700; color:#e96b5e;}


/* feature */
.feature-list .section{padding:64vw 0 0; text-align:center;}
.feature-list .section + .section{margin:21.3333vw 0 0;}
.feature-list .section h3{margin:0 0 2.6667vw; font-size:5.8667vw;}
.feature-list .section .disc{line-height:1.5;}
.feature-list .section:nth-child(1){background:url(../_images/feature01.png) no-repeat center 0; background-size:58.6667vw auto;}
.feature-list .section:nth-child(2){background:url(../_images/feature02.png) no-repeat center 0; background-size:58.6667vw auto;}
.feature-list .section:nth-child(3){background:url(../_images/feature03.png) no-repeat center 0; background-size:58.6667vw auto;}
.feature-list .section:nth-child(4){background:url(../_images/feature04.png) no-repeat center 0; background-size:58.6667vw auto;}
.feature-list .section:nth-child(5){background:url(../_images/feature05.png) no-repeat center 0; background-size:58.6667vw auto;}

/* join */
.row-wrap + .agree-box,
.agree-box + .agree-box{padding:16vw 0 0;}
.agree-box h3{margin:0 0 2.6667vw; font-size:4.8vw;}
.clause{height:88vw; box-sizing:border-box; overflow:auto; padding:5.3333vw; font-size:3.4667vw; line-height:1.5; border:0.2667vw solid #ccc; border-radius:1.0667vw; background:#f9f9f9;}
.consulting{margin:16vw 0 0; padding:5.3333vw 0 0; border-top:0.5333vw solid #707070;}

/* intro */
.intro{margin:0 0 16vw;}
.intro dl{height:42.6667vw; box-sizing:border-box; overflow:hidden; padding:10.6667vw 0 0 9.3333vw; color:#fff; border-radius:10px;}
.intro dl:nth-child(1){background:url(../_images/bg_intro01.png) no-repeat center 0; background:100% auto;}
.intro dl:nth-child(2){background:url(../_images/bg_intro02.png) no-repeat center 0; background:100% auto;}
.intro dl + dl{margin:5.3333vw 0 0;}
.intro dt{margin:0 0 2.6667vw; font-size:20px; font-weight:700;}
.ai{margin:0 0 8vw;}
.ai h3{margin:0 0 3.2vw; font-size:5.3333vw;}
.ai li{margin:0 0 4vw 2.6667vw; text-indent:-2.6667vw;}
.ai img{width:100%;}

/* pricce */
.tbl-price{margin:0 0 5.3333vw; border-top:0.5333vw solid #707070;}
.tbl-price th{padding:4vw 0; font-weight:400; border-right:0.2667vw solid #ddd; border-bottom:0.2667vw solid #ddd; background:#f9f9f9;}
.tbl-price td{padding:4vw 0; text-align:center; border-right:0.2667vw solid #ddd; border-bottom:0.2667vw solid #ddd;}
.tbl-price th:last-child,
.tbl-price td:last-child{border-right:0;}
.tbl-price td .em{color:#e96b5e;}
.tbl-price thead tr:first-child th{padding:3.2vw 0; background:rgba(47, 165, 214, .1);}
.tbl-price tbody tr:last-child td{border-bottom-color:#222;}
.price-info{font-size:3.4667vw;}
.price-info li{position:relative; padding:0 0 0 2.6667vw; color:#666; line-height:1.6;}
.price-info li:not(:first-child){margin:2.1333vw 0 0;}
.price-info li:before{position:absolute; top:1.8667vw; left:0.2667vw; width:1.0667vw; height:1.0667vw; content:''; background:#222;}

/* produce */
.produce + .produce{margin-top:16vw;}
.produce .sub-title-area{padding:0 0 3.2vw; border-bottom:0.5333vw solid #707070;}
.produce .type{padding:8vw 5.3333vw; border-bottom:0.2667vw solid #ddd;}
.produce .type:nth-last-of-type(1){border-color:#707070;}
.produce .type h4{margin:0 0 12px;}
.produce .type li{margin:0 0 0 2.6667vw; line-height:1.8;text-indent:-2.6667vw;}
.produce .type .info{margin:4vw 0 0; font-size:3.4667vw; color:#227be8;}
.produce .type .info span{color:#e96b5e;}
.produce .btn-sample{display:block; width:100%; height:10.6667vw; margin:6.6667vw 0 0; color:#fff; border-radius:20vw; background:#3f485a;}

.bgm-list ul{display:flex; flex-wrap:wrap;}
.bgm-list li{display:flex; align-items:center; width:50%;}
.bgm-list li:nth-child(n+3){margin-top:5.3333vw;}
.bgm-list .btn-music{width:9.3333vw; height:8vw; overflow:hidden; margin-left:2.1333vw; text-indent:-9999px; border:0.2667vw solid #222; border-radius:4vw; background:url(../_images/ico_notes.png) no-repeat center; background-size:3.2vw auto; box-shadow:0 0.8vw 1.6vw rgba(0, 0, 0, .16);}
.ment-cate{display:flex; flex-wrap:nowrap; overflow-x:auto; margin:5.3333vw 0 0; padding:0 0 4vw; font-weight:700;}
.ment-cate li{flex: 0 0 auto;}
.ment-cate li:not(:first-child){margin:0 0 0 6.6667vw;}
.ment-cate li.active{color:#2fa5d6; text-decoration:underline;}
.etc-info{margin:4vw 0 16vw;}
.etc-info li{position:relative; padding:0 0 0 2.6667vw; color:#666; line-height:1.3;}
.etc-info li:not(:first-child){margin:3.2vw 0 0;}
.etc-info li:before{position:absolute; top:2.6667vw; left:0.2667vw; width:1.0667vw; height:1.0667vw; content:''; background:#222;}

/* news */
.news-list{border-top:0.5333vw solid #707070;}
.news-list li{border-bottom:0.2667vw solid #ddd;}
.news-list li:last-child{border-bottom:0.2667vw solid #707070;}
.news-list a{display:block; padding:4vw 2.6667vw;}
.news-list .sbj{display:block; margin:0 0 1.3333vw;}
.news-list .date{font-size:3.4667vw; color:#888;}