@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');
/*
font-family: 'Lato', sans-serif;
*/
/*reset-----------------------------------------------------------------*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, 
fieldset, input, textarea, p, th, td, figure{margin: 0; padding: 0;}
html{font-size: 70%; overflow-y: scroll;}
h1, h2, h3, h4, h5, h6{font-size: 100%; font-weight: normal;}
ol, ul{list-style:none;}
fieldset, img{border:0;}
table{border-collapse: collapse; border-spacing:0;}
caption, th{text-align: left;}
address, caption, cite, code, dfn, th, var,em,i{font-style: normal; font-weight: normal;}
img{border:none;}
/*-------------------------------------------------------------------*/
body {
min-width:1040px;
overflow:hidden;
background:#fff;
font-size: 0.5rem;
line-height:1.8;
color:#000;
letter-spacing: 0.1em;
-webkit-text-size-adjust: 100%;
font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
-webkit-font-smoothing: antialiased;
}
body.fixed{width: 100%; height: 100%; position: fixed; overflow: visible;}

input, button, textarea, select {border-radius: 0; font-size: 1.4rem; font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-weight: bold;}

a,.btn{transition:all 0.3s ease-out 0s; color:#000; text-decoration: none;}
picture{display: block;}
img{vertical-align:bottom;}
em,i{font-style:normal;}
b,strong,em{font-weight: normal;}
body *{box-sizing: border-box;}

.mint{font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-feature-settings: "palt";}
.phr{display: inline-block;}
.dpc{display:block !important;}
.dsp{display:none !important;}
/*-------------------------------------------------------------------*/

#wrapper{text-align: center;}
.loading{background-color: #fff; position: fixed; top:0; bottom:0; left:0; right:0; z-index: 200;}

@media screen and (max-width: 480px) {
    input, button, textarea, select {font-size: 3vw;}
    input[type="checkbox"]{-webkit-appearance: auto !important; -moz-appearance: auto !important; appearance:auto !important; border-radius: 0;}
    body{min-width:unset; font-size: 3.7333vw;}
    .dpc{display:none !important;}
    .dsp{display:block !important;}
    #wrapper{}
}
    
/*--------------------*/
._header .nav_btn{display: none; width:55px; height: 55px; position: fixed; top:30px; left:30px; z-index: 101;}
._header .nav_btn:hover{cursor: pointer;}
._header .nav_btn i{display: block; width: 100%; height: 0; background: #000; border-radius: 0.2em; position: absolute; top:50%; left:0;}
._header .nav_btn i:before,
._header .nav_btn i:after{display: block; content: ""; width: 100%; height: 2px; background: #000; border-radius: 0.2em; position: absolute; left:0; transition-duration: 0.2s;}
._header .nav_btn i:before{top:-12px;}
._header .nav_btn i:after{bottom:-12px;}
._header .nav_btn.nav_close i{background: none;}
._header .nav_btn.nav_close i:before{transform: rotate(45deg); top:0; left:-6px; width: 110%;}
._header .nav_btn.nav_close i:after{transform: rotate(-45deg); top:0; left:-6px; width: 110%;}
._header .nav_body{width: 100%; height: 100px; background-color: rgba(255,255,255,0.9); position: fixed; top:0; left:0; z-index: 100; transform: translateY(-100%); transition-duration: 0.2s;}
._header .nav_body.show{display: block;}

._sub ._header{padding: 80px 0 0;}
._sub ._header h1{width: 100%; height: 0; padding-top: 33px; overflow: hidden; background: url(../images/logo.svg) center/contain no-repeat;}


@media screen and (max-width: 480px) {
    ._header .nav_btn{display: block; width:10vw; height: 10vw; position: fixed; top:2vw; left:4vw;}
    ._header .nav_btn i:before{top:-2vw;}
    ._header .nav_btn i:after{bottom:-2vw;}
    ._header .nav_btn.nav_close i:before{left: 0; width: 100%;}
    ._header .nav_btn.nav_close i:after{left: 0; width: 100%;}
    ._header .nav_body{width: 100vw; height: 7vh;}
    ._header .nav_body.show{transform: translateY(0);}
    ._header .nav_body ul{display: flex; margin: 4.5vw 4vw 0 20vw;}
    ._header .nav_body ul li{padding: 0 2vw;}
    ._header .nav_body ul li a{display: block; font-size: 3.5vw; font-weight: bold;}

    ._sub ._header{padding: 16vw 0 0;}
    ._sub ._header h1{padding-top: 8vw;}
}

/*--------------------*/
._body{width: 1000px; padding: 80px 0; margin: 0 auto 0;}
._body > section{text-align: left;}

.back_btn{margin-top: 80px;}
.back_btn a{display: flex; justify-content: center; font-size: 1.8rem; font-weight: bold; position: relative;}
.back_btn a::before{display: inline-block; content: ""; width: 34px; height: 34px; background: url(../images/back_btn.png) center/contain no-repeat; margin-right: 1em; position: relative; transition: all 0.5s cubic-bezier(0, 0, 0, 0.98) 0s;}
.back_btn a:hover::before{left:-2px;}

@media screen and (max-width: 480px) {
    ._body{width: unset; padding: 10vw 4vw;}

    .back_btn{margin-top: 10vw;}
    .back_btn a{font-size: 4vw;}
    .back_btn a::before{width: 34px; height: 34px;}
}
/*--------------------*/

/*--------------------*/
._footer{width: 100%; background-color: #231815; padding: 5px 0;}
._footer .inner{width: 820px; margin: 0 auto; position: relative;}
._footer small{font-size: 0.9rem; font-family: 'Lato', sans-serif; color: #fff;}
._footer .pagetop_btn{display: block; width: 30px; height: 30px; background: url(../images/pagetop_arrow.png) center/contain no-repeat; position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition-duration: 0.3s;}
._footer .pagetop_btn:hover{transform: translateY(-60%);}

@media screen and (max-width: 480px) {
    ._footer{padding: 1vw 0;}
    ._footer .inner{width: unset;}
    ._footer small{font-size: 2.3vw;}
    ._footer .pagetop_btn{width: 4vw; height: 4vw; right: 4vw;}
}


/*--------------------*/
._index ._header{height: 500px; position: relative;}
._index ._header .visual{width: 100%; height: 100%; background: url(../images/header_bg.jpg) center/cover no-repeat; clip-path: ellipse(36% 100% at 10% 50%);}
@keyframes mainvisual {
    0% {clip-path: ellipse(36% 100% at 10% 50%);}
    50% {clip-path: ellipse(34% 90% at 11% 55%);}
    100% {clip-path: ellipse(36% 100% at 10% 50%);}
}
._index ._header .title{width: 50%; text-align: left; position: absolute; top:50%; left: 50%; transform: translateY(-50%);}
._index ._header .title h1{width: 222px; height: 0; padding-top: 33px; overflow: hidden; background: url(../images/logo.svg) center/contain no-repeat;}
._index ._header .title h2{font-size: 2rem; font-weight: bold; letter-spacing: 0.2em; margin-top: 2em;}
._index ._header .title h3{font-size: 1.2rem; font-weight: bold; margin-top: 3em;}

@media screen and (max-width: 480px) {
    ._index ._header{height: 80vh; margin-bottom: -35vw;}
    ._index ._header .visual{width: 100%; height: 100%; background: url(../images/header_bg.jpg) center/cover no-repeat; clip-path: ellipse(100% 60% at 50% 20%);}
    ._index ._header .title{width: 100%; text-align: center; top: 20vw; transform: translate(-50%,0);}
    ._index ._header .title h1{width: 100%; padding-top: 10vw;}
    ._index ._header .title h2{font-size: 4vw;}
    ._index ._header .title h3{font-size: 3vw;}
}
/*--------------------*/

._index .business{}
._index .business .list{}
._index .business .list > li{display: flex; align-items: stretch; border: 1px #231815 solid; margin-bottom: 80px; position: relative;}
._index .business .list > li:last-child{margin-bottom: 0;}
._index .business .list > li > div{width: 50%; padding: 2em;}
._index .business .list > li > div h3{padding-bottom: 2.3em; font-size: 2.2rem; font-weight: bold; text-align: center; position: relative;}
._index .business .list > li > div h3::after{display: block; content: ""; width: 100%; height: 2em; background: url(../images/business_arrow.svg) no-repeat; position: absolute; top: 2.3em; left: 0;}
._index .business .list > li > div p{font-size: 1.2rem; font-weight: bold;}
._index .business .list > li > div figure{text-align: center; margin-top: 2em;}
._index .business .list > li > div .achievement{background-color: #EFEFEF; border-radius: 10px; padding: 1em; font-size: 1.2rem; font-weight: bold; margin-top: 2em;}
._index .business .list > li > div .achievement b{display: block; font-size: 1.2rem; font-weight: bold;}
._index .business .list > li > div .achievement ul{display: flex; flex-wrap: wrap;}
._index .business .list > li > div .achievement ul li{padding-right: 2em;}

._index .business .list > li > aside{display: flex; align-items: center; width: 50%; background: center/cover no-repeat; position: relative;}
._index .business .list > li > aside .list{width: 90%; background-color: rgba(255,255,255,0.8); padding: 1.8em 2em 1.8em 3em; border-radius: 10px; margin: 0 auto;}
._index .business .list > li > aside .list ul{font-size: 1.2rem; font-weight: bold; list-style: disc;}
._index .business .list > li > aside .example{font-size: 1.2rem; font-weight: bold; color:#fff; text-shadow: 1px 1px 2px #000; position: absolute; bottom: 1em; right: 2em;}

._index .business .list > li:nth-child(1) > aside{background-image: url(../images/business_pic_01.jpg);}
._index .business .list > li:nth-child(2) > aside{background-image: url(../images/business_pic_02.jpg);}
._index .business .list > li:nth-child(3) > aside{background-image: url(../images/business_pic_03.jpg);}
._index .business .list > li:nth-child(4) > aside{background-image: url(../images/business_pic_04.jpg);}
._index .business .list > li:nth-child(4) > aside .list{margin-top: -2em;}
._index .business .list > li:nth-child(5) > aside{background-image: url(../images/business_pic_05.jpg);}
._index .business .list > li:nth-child(6) > aside{background-image: url(../images/business_pic_06.jpg);}

@media screen and (max-width: 480px) {
    ._index .business{}
    ._index .business .list{}
    ._index .business .list > li{flex-direction: column; margin-bottom: 10vw;}
    ._index .business .list > li > div{width: 100%; padding: 4vw;}
    ._index .business .list > li > div h3{padding-bottom: 2.0em; font-size: 6vw;}
    ._index .business .list > li > div p{font-size: 3vw; font-weight: bold;}
    ._index .business .list > li > div figure{}
    ._index .business .list > li > div figure img{max-width: 100%; height: auto;}
    ._index .business .list > li > div .achievement{font-size: 2.8vw;}
    ._index .business .list > li > div .achievement b{font-size: 3vw;}
    ._index .business .list > li > aside{width: 100%; padding: 4vw 0;}
    ._index .business .list > li > aside .list{padding: 1.2em 2em 1.2em 2.5em;}
    ._index .business .list > li > aside .list ul{font-size: 3vw;}
    ._index .business .list > li > aside .example{font-size: 2.5vw;}

    ._index .business .list > li:nth-child(4) > aside{ padding: 4vw 0 16vw;}
    ._index .business .list > li:nth-child(4) > aside .list{margin-top: 0;}
}
/*--------------------*/

._index .greeting{border: 1px #231815 solid; padding: 2em 4em; margin-top: 80px;}
._index .greeting h2{font-size: 2.2rem; font-weight: bold; text-align: center; margin-bottom: 1em; position: relative;}
._index .greeting h2::before{display: block; content: ""; width: 100%; height: 1px; background-color: #231815; position: absolute; top: 50%; left: 0;}
._index .greeting h2 span{display: inline-block; background-color: #fff; padding: 0 1em; position: relative; z-index: 2;}
._index .greeting .box{background-color: #EBF4FC; border-radius: 10px; padding: 3em 3em 1em; font-size: 1.5rem; font-weight: bold;}
._index .greeting .box cite{display: block; font-size: 1.5rem; font-weight: bold; text-align: right; margin-top: 1em;}
._index .greeting .box figure{margin-left: 400px;}

@media screen and (max-width: 480px) {
    ._index .greeting{padding: 6vw 4vw 4vw; margin-top: 10vw;}
    ._index .greeting h2{font-size: 6vw; margin-bottom: 0.5em;}
    ._index .greeting .box{padding: 6vw 4vw; font-size: 3.5vw;}
    ._index .greeting .box cite{display: block; font-size: 1.5rem; font-weight: bold; text-align: right; margin-top: 1em;}
    ._index .greeting .box figure{margin-left: 0;}
    ._index .greeting .box figure img{max-width: 80%;}
}
/*--------------------*/

._index .overview{border-top: 1px #231815 solid; padding-top: 2em; margin-top: 80px;}
._index .overview h2{font-size: 2.2rem; font-weight: bold; text-align: center;}
._index .overview .data{width: 820px; margin: 2em auto 0;}
._index .overview .data h3{}
._index .overview .data h3 b{display: block; font-size: 2.3rem; font-weight: bold; line-height: 1;}
._index .overview .data h3 i{display: block; font-size: 1.5rem; font-weight: bold; margin-top: 1em;}
._index .overview .data dl{display: flex; flex-wrap: wrap; font-size: 1.5rem; font-weight: bold; margin-top: 1em;}
._index .overview .data dl dt{width: 10em; padding: 0.4em 0;}
._index .overview .data dl dd{width: calc(100% - 10em); padding: 0.4em 0;}
._index .overview .data .contact_btn{margin-top: 1em;}
._index .overview .data .contact_btn a{display: inline-block; background-color: #231815; padding: 0 2em 0 6em; font-size: 1.4rem; font-weight: bold; color: #fff; line-height: 2; position: relative;}
._index .overview .data .contact_btn a::after{display: block; content: ""; width: 64px; height: 64px; background: url(../images/contact_fig_10.png) center/contain no-repeat; position: absolute; top: 50%; left: 1em; transform: translateY(-50%); transition-duration: 0.3s;}
._index .overview .data .contact_btn a:hover::after{transform: translateY(-50%) scale(1.05);}
._index .overview .data .map{margin-top: 30px;}

@media screen and (max-width: 480px) {
    ._index .overview{margin-top: 10vw;}
    ._index .overview h2{font-size: 6vw;    }
    ._index .overview .data{width: unset;}
    ._index .overview .data h3{}
    ._index .overview .data h3 b{font-size: 6vw;}
    ._index .overview .data h3 i{font-size: 3.5vw;}
    ._index .overview .data dl{font-size: 3vw;}
    ._index .overview .data dl dt{width: 8em;}
    ._index .overview .data .contact_btn{margin-top: 1em;}
    ._index .overview .data .contact_btn a{ padding: 0 2em 0 7em; font-size: 3vw;}
    ._index .overview .data .contact_btn a::after{width: 12vw; height: 12vw;}
    ._index .overview .data .map{padding-top: 80vw; margin-top: 4vw; position: relative;}
    ._index .overview .data .map iframe{width: 100%; height: 100%; position: absolute; top:0; left: 0;}
}
/*--------------------*/


._policy{}
._policy .policy{width: 820px; margin: 0 auto;}
._policy .policy h2{font-size: 1.8rem; font-weight: bold; text-align: center; margin-bottom: 2em;}
._policy .policy h3{font-size: 1.5rem; font-weight: bold; margin-top: 4em;}
._policy .policy p{font-size: 1.3rem; font-weight: bold; margin-top: 1em;}

.back_btn{margin-top: 80px;}
.back_btn a{display: flex; justify-content: center; font-size: 1.8rem; font-weight: bold; position: relative;}
.back_btn a::before{display: inline-block; content: ""; width: 34px; height: 34px; background: url(../images/back_btn.png) center/contain no-repeat; margin-right: 1em; position: relative; transition: all 0.5s cubic-bezier(0, 0, 0, 0.98) 0s;}
.back_btn a:hover::before{left:-2px;}

@media screen and (max-width: 480px) {
    ._policy .policy{width: unset; padding: 0 2vw;}
    ._policy .policy h2{font-size: 5vw; margin-bottom: 1em;}
    ._policy .policy h3{font-size: 4vw; margin-top: 2em;}
    ._policy .policy p{font-size: 3vw;}
    ._policy .back_btn{margin-top: 10vw;}
    ._policy .back_btn a{font-size: 4vw;}
    ._policy .back_btn a::before{width: 34px; height: 34px;}
}
/*--------------------*/

._contact{}
._contact ._body{width: 820px;}
._contact .form{position: relative;}
._contact .form h2{background-color: #000; font-size: 1.8rem; font-weight: bold; color: #fff; text-align: center; line-height: 2; margin-bottom: 2.5em;}
._contact .form address{display: block; background-color: #fff; padding: 0 0 190px 50px; font-size: 1.0rem; font-weight: bold; position: absolute; top: 125px; right: 0; z-index: 2;}
._contact .form dl{display: flex; justify-content:flex-start; flex-wrap: wrap;}
._contact .form dl dt{width: 12em; border-bottom: 1px #000 solid; padding: 2em 0; position: relative;}
._contact .form dl dt span{display: inline-block; padding-top: 1em; font-size: 1.4rem; font-weight: bold; line-height: 1; white-space: nowrap;}
._contact .form dl dt i{display: inline-block; font-size: 2rem; font-weight: bold; line-height: 1; color:#ff0000; margin-left: 1em;}
._contact .form dl dt small{display: block; font-size: 1.2rem; font-weight: bold; line-height: 1;}

._contact .form dl dd{width: calc(100% - 13em); border-bottom: 1px #000 solid; padding: 2.6em 0 2em; font-size: 1.4rem; font-weight: bold;}
._contact .form dl dd.body{padding-bottom:0.3em;}

._contact .form input[type="text"]{width:50%; height:40px; border:none; padding:0.5em;}
._contact .form textarea{width:100%; border:none;}
._contact .form input[type="checkbox"]{-webkit-appearance:checkbox; width: 20px; height: 20px;}
._contact .form .submit{display: block; background-color: #fff; border: 1px #000 solid; border-radius: 14px; padding: 0 4em; font-size: 1.8rem; font-weight: bold; line-height: 2; color:#000; margin: 40px auto;}
._contact .form .submit:hover{cursor: pointer; opacity: 0.7;}

._contact .form .policy{display: flex; align-items: center; justify-content: center; text-align: center; margin-top: 20px;}
._contact .form .policy p{display: inline-block; font-size:1.4rem; font-weight: bold; margin-right: 1em;}
._contact .form .policy p a{text-decoration: underline;}
._contact .form p.thankyou{padding: 10em 0; font-size: 2.0rem; font-weight: bold; text-align: center; position: relative; z-index: 3;}
._contact .form .eMes{font-size: 1.5rem; font-weight: bold; color:#dcbebe; position: absolute; top:50px; left:0;}
._contact .form .lead{font-size: 1.5rem; font-weight: bold; position: absolute; top:50px; left:0;}


@media screen and (max-width: 480px) {
    ._contact ._body{width: unset;}
    ._contact .form h2{font-size: 4vw; margin-bottom: 1em;}
    ._contact .form address{padding: 0; font-size: 2.5vw;  position: static;}
    ._contact .form dl{margin-top: 14vw}
    ._contact .form dl dt{width: 100%; border-bottom: none; padding: 1em 0 0;}
    ._contact .form dl dt span{font-size: 3vw;}
    ._contact .form dl dt i{font-size: 4vw;}
    ._contact .form dl dt small{display: inline-block; font-size: 2vw;  margin-left: 1em;}
    
    ._contact .form dl dd{width: 100%; padding: 0 0;}
    
    ._contact .form input[type="text"]{width:100%; height:8vw; font-size: 16px;}
    ._contact .form input[type="checkbox"]{width: 4vw; height: 4vw;}
    ._contact .form textarea{font-size: 16px;}
    ._contact .form .submit{font-size: 4vw; margin: 6vw auto;}
    
    ._contact .form .policy{margin-top: 6vw;}
    ._contact .form .policy p{font-size:3vw;}
    ._contact .form p.thankyou{font-size: 4vw;}
    ._contact .form .eMes{font-size: 3vw; top:38vw;}
    ._contact .form .lead{font-size: 3vw; top:38vw;}
}
/*--------------------*/