@charset "UTF-8";

body {font-size:16px;font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";color:#111;line-height: 1.5em;font-weight: 500;position: relative;}
img{width:100%;height:auto;}
a{text-decoration: none;color:#111;transition: 0.3s ease-in-out;}
a:hover{opacity: 0.5;}

#wrapper{padding-top:20px;background-color:#fff;}

header{display: flex;justify-content: space-between;position: fixed;z-index: 10;background-color: #fff;width:100%;}
header img{max-width:300px;}

.btn{font-size:1em;color:#fff;display:block;background-color: #111;margin:4em auto 2em;max-width: 230px;padding:.8em 1.2em;;font-weight: bold;border-radius: 2em;text-align: center;}

.number{font-family: 'Oswald', sans-serif;font-size:4em;color:#fff;}


#logo{padding:1em;}
.gNavTrigger{margin:-2px;}
#menu ul{display: flex;flex-wrap: wrap;padding:0 1em;background-color: #fff;}
#menu ul li{font-size:1.5em;margin:1.1em 0 0 1em;font-family: 'Oswald', sans-serif;}
#menu ul li:last-child a{border:3px solid #758969;font-size:0.7em;padding:0.1em 1em;border-radius: 1em;font-weight: bold;position: relative;top:-0.2em;}

#top-image{padding-top:42%;background-color: #586751;position:relative;color:#fff;margin-top:60px;}
#top-image > div{position: absolute;top:48%;left:50%;transform: translate(-50%,-50%);text-align: center;width: 100%;}
#top-image img{width:30vw;}
#top-image h2,#top-image span{display: block;margin-top:1em;}
#top-image h2{font-size:4vw;line-height: 0.8em;}#top-image span{font-size:0.5em;margin-top:0.8em;font-weight: bold;}


.content{padding:4.5em 0 0;}
.content h2{font-size:2em;display: block;text-align: center;margin-bottom:1.5em;font-family: 'Oswald', sans-serif}.content h2 span{font-size:0.5em;display: block;margin-top:1em;}
.content h3{font-size:1.55em;margin-bottom:1em;}

.green-text-box{background-color: #586751;color:#fff;padding:2.5em 3em;}


#about > div{max-width: 1180px;margin:0 auto;display: flex;flex-wrap: wrap;}
#about > div > div{width:50%;}
.img-box{background-position: center;background-size: cover;background-repeat: no-repeat;}

.wide{position:relative;height:500px;width:100%;z-index: 1;}
.wide > div:first-child {width:1180px;position:absolute;padding-right:540px;top:50%;left:50%;transform: translate(-50%,-50%);}
.wide > div:first-child > div {padding-left:8em;position: relative;}
.wide > div:first-child > div span{position: absolute;left:0.5em;top:0.7em;}
.wide > div:last-child{width:70vw;position: absolute;right:0;z-index: -1;height:100%;background-position: left;}
.wide > div:last-child{width:70vw;position: absolute;right:0;z-index: -1;height:100%;background-position: left;}
.wide .green-text-box{position: relative;min-height: 320px;}

.reverse > div:first-child {padding-left:540px;padding-right: 0px;}
.reverse > div:last-child{left:0;}

.column3 {display: flex;flex-wrap: wrap;justify-content: space-between;max-width: 1180px;margin:2em auto;}
.column3 > div {width:32.5%;position: relative;background-color: #586751;}
.column3 span{position: absolute;top:0.8em;left:0.5em;z-index: 2;}
.column3 .green-text-box{padding:2.5em 2.3em;}

#profile {max-width: 1100px;margin:0 auto;position: relative;}
#profile > div{display: flex;flex-wrap: wrap;position: relative;}
#profile > div > div:first-child{width:30%;}
#profile > div > div:last-child{width:70%;}
.sns{display: flex;flex-wrap: wrap;margin-top:1em;}
.sns li {width:2.5em;height:2.5em;margin-right: 1em;}

.mordal-btn{ background-color: #111;color:#fff;display: block;position: absolute;right:0;bottom:0;padding:1em 1.5em;}

#plan{max-width: 1100px;margin: 0 auto;}


#step{max-width: 1100px;margin:0 auto;}
#step ul {display: flex;flex-wrap: wrap;justify-content: space-between;}
#step ul li {width: 24%;text-align: center;position: relative;}
#step ul li span{display: block;position: relative;width:60%;padding-top:60%;background-color: #586751;margin: 0 auto 2em;border-radius: 50%;}
#step ul li i{display: block;position: absolute;top:45%;left:50%;transform: translate(-50%,-50%);color:#fff;font-size:4em;}
#step ul h3{font-size:1.2em;margin-bottom: 0.2em;}
#step ul p{text-align: center;font-size: 0.8em;}
#step box{color:#ddd;font-size: 1.5em; position: absolute;width:100%;top:4.8em;left:0;text-align: center;z-index: 1;}

@media screen and (max-width:1200px){
	
body{font-size:1.5vw;}
section{width:98%;margin:0 auto;}
#top-image{width:100%;}
#top-image img {width:38%;}
#about > div,.wide > div:first-child{width:100%;}
.wide > div:first-child{ padding-right:50%;}
.wide > div:last-child{width:75%;}
.reverse > div:first-child{padding-right: 0;padding-left:50%;}
.wide {height:38vw;}
.wide .green-text-box{min-height: 0px;}
	
	}









/*アコーディオンメニュー*/

/*ボックス全体*/
.accbox {
    margin: 2em 0;
    padding: 0;
    width: 100%;/*最大幅*/
	border:1px solid #868686;
	font-size:0.8em;
}

/*ラベル*/
.accbox label {
    display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
    padding : 2em;
    font-weight: bold;
    cursor :pointer;
    transition: all 0.5s;
	width: 100%;
}

.accbox label h3{margin:0;width:62%;}
.accbox label h3 small{font-size:0.6em;font-weight: bold;}
.accbox label p{font-size:1.8em;font-weight: bold;width:30%;}
.accbox label p small{font-size:0.6em;font-weight: bold;}

.accbox > div{border-bottom:1px solid #868686;}
.accbox > div:last-child{border-bottom:0px solid #868686;}
.accbox .accshow{padding:2em;}

/*アイコンを表示*/
.accbox label:after {
    content: '\f055';
    font-family: 'FontAwesome';
	font-size: 2em;
	color:#586751;
}

/*ラベルホバー時*/
.accbox > div:hover {
    background :#f8f8f8;
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0 2em;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 0em 2em 2em;
    opacity: 1;
}


.accbox .accshow p {font-size:1.2em;margin-bottom:0.5em;}

/*アイコンを入れ替える*/
.cssacc:checked + label:after {
    content: '\f056';
}

#qanda {max-width: 1100px;margin:0 auto;}
#qanda .accbox {border: none;border-top:1px solid #868686;border-bottom:1px solid #868686;}
#qanda .accbox label{padding:1.5em 2em;}
#qanda .accbox h3{font-size:1.3em;width:90%;}
#qanda .accbox h3:before{
    content: '\f2c4';
    font-family: 'FontAwesome'; color:#586751;padding-right:1em;font-size:1.5em;}

#access > div{max-width: 1180px;margin:0 auto;display: flex;flex-wrap: wrap;}
#access > div > div{width:50%;}
#access .green-text-box{background-color:#f8f8f8;color:#111;}

footer{display: block;padding-top:6em;text-align: center;background-color:#fff;}
footer img{max-width:200px;}
footer ul{display:flex; flex-warp:warp; justify-content:center;margin:2em 1em 3em;}
footer ul li{padding:0 1em;font-size:0.8em;}

#access table{width: 100%;}
#access th{font-weight: bold;text-align: left;min-width: 100px;}
#access td{padding:.2em 1em .2em 0;}
#access iframe{max-height: 400px;width:100%;}

.copyright{background-color:#54684F;color:#ffff;padding:.6em 1em;}





a.hNavToggle{display:block;width:50px;height:50px;position:absolute;top:10px;right:4%;z-index:3;}
a.hNavToggle span{display:block;background:#111;border-radius: 10px;width:40px;height:3px;position:absolute;left:50%;margin-left:-12px;transition:all 0.4s;-webkit-transition:all 0.4s;-moz-transition:all 0.4s}
a.hNavToggle span:first-child{margin-top:-12px;top:50%}
a.hNavToggle span:nth-child(2){margin-top:-1px;top:50%}
a.hNavToggle span:last-child{margin-top:10px;top:50%}
a.hNavToggle.active span:first-child{-webkit-transform:translateY(12px) rotate(45deg);-moz-transform:translateY(12px) rotate(45deg);-ms-transform:translateY(12px) rotate(45deg);transform:translateY(12px) rotate(45deg)}
a.hNavToggle.active span:nth-child(2){opacity:0}
a.hNavToggle.active span:last-child{-webkit-transform:translateY(-10px) rotate(-45deg);-moz-transform:translateY(-10px) rotate(-45deg);-ms-transform:translateY(-10px) rotate(-45deg);transform:translateY(-10px) rotate(-45deg)}
a.hNavToggle:hover{opacity: 1;}

.active{display:block;}

@media screen and (min-width:1221px){
	a.hNavToggle{display:none;}}

@media screen and (max-width:1220px){
	#menu{display:none;}
	#menu ul{display: block;font-size:2em;background-color: #fff;height: 100vh;}
	header {display: block;}
	#logo{margin:0 auto;width:300px;}
	
	

	
	#menu ul{padding-top:0.5em;}
	#menu ul li{text-align: center;font-size:1.1em;margin:0px;padding:0.9em 0;border-top:1px dotted #ccc;}
	#menu ul li:last-child a{display: block; border-radius: 0; width:90%;margin:0 auto;padding: 0.5em 0;}
	
}

	section:not(#top-image){position:relative;margin-top:-4em;padding-top:7em;}


@media screen and (max-width:768px){
	a.hNavToggle{top:6px;}
}


@media screen and (max-width:650px){
	#wrapper{padding-top:0px;}
	body{font-size:3vw;}
	section{width:94%;}
	#logo{max-width:230px;}
	.content{padding-top:2.8em;}
	.content h2{margin-bottom:1em;font-size:2.5em;margin-top:0.3em;}
	#top-image{padding-top:50%;margin-top:60px;}
	#top-image h2{font-size:2em;line-height: 0.6em}
	#top-image > div{width:100%;}
	.img-box{padding-top:55%;}
	.img-box,.green-text-box{width:100% !important;}
	.wide > div:first-child{top:0;left:0;transform: translate(0)}
	.wide > div:last-child{height:auto;padding-top:60vw !important;}
	.wide > div:first-child > div span{top:-4.1em;}
	.wide > div:first-child > div{padding-left: 2.3em;}
	.wide{height:auto;display:flex;flex-wrap: wrap-reverse;}
	.wide > div{padding:0 !important;position: relative !important;}
	.column3{margin:0;}
	.column3 > div{width:100%;margin-bottom: 1em;}
	.column3 > div img{object-fit: cover;height:60vw;}
	#service .green-text-box{margin-bottom:1em;}
	
	h3{font-size:1.8em !important;text-align: center;margin-bottom: 1.2em !important;}
	p,th,td{font-size:1.1em;line-height: 1.6em;}
	.btn{font-size:1.5em;margin-top:3em;max-width:60%;}
	
	#profile > div > div:first-child{width: 100%;}
	.accbox label{display: block;position: relative;}
	.accbox > div h3,.accbox > div h3 small,.accbox label p{width:90%;display: block;}
	.accbox h3{text-align: left;margin-bottom: 0.5em !important;}
	.accbox label:after{position: absolute;right:1em;top:50%;transform: translateY(-50%);}
	#step ul li{width:49%;margin-bottom:2em;}
	#step ul li h3{font-size:1.4em !important;margin-bottom:0.2em !important;}
	#qanda .accbox h3{font-size:1.4em !important;text-indent: -2.8em;padding-left: 2.8em;line-height: 1.5em;}
	footer ul{font-size: 1.2em;flex-wrap: wrap;}
	footer ul li{width:50%;padding:1em 0;border:1px solid #fff;background-color: #eee;}
	a.hNavToggle{top:12px;width:35px;height:25px;right:5%;}
	a.hNavToggle span{width:35px;}
	#access iframe{max-height: 250px;width:100%;}
	
	header{height:60px;}
	a.hNavToggle{top:18px;}
	
}




.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
	z-index:999;
	font-size:1.2em;
}
.modal__bg{
    background: rgba(0,0,0,0.8) !important;
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal__content{
    background: #fff;
    left: 50%;
    padding:3em 3em;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 90%;
	max-width:500px;
}

.modal__content h2{font-size:1.8em;text-align:center;margin-bottom:1em;color:#111;line-height: 1.5em;}
.modal__content p{margin-bottom:2em;font-size:13px;line-height:1.8em;}
.modal__content li{font-size:13px;margin-bottom:1em;line-height: 1.8em;}
.modal__content ul{padding-bottom:1em;}
.modal__content a{border-radius:2em;padding:1em;background-color:#ccc;color:#fff;width:100%;display: block;box-sizing: border-box;text-align: center;margin:0.5em 0;}
#footer-sns .twitter,.modal__content .twitter{background-color:#55acee;}
#footer-sns .line,.modal__content .line{background-color:#1dcd00;}
#footer-sns .insta,.modal__content .insta{ background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
}
.modal__content .mail{background-color:#555;}

.modal_scroll .modal__content {padding:2em 1em;}
.modal_scroll .modal__content > div h2{margin-top:0;}
.modal_scroll .modal__content > div{height:400px;overflow-y: scroll;padding:2em;}
.modal_scroll h3,#modal_tokusyo h2{font-size:18px !important;margin:2em 0;text-align: center;border-bottom:2px solid #111;padding-bottom:0.5em;line-height: 1.5em;}
.modal_scroll h4,#modal_tokusyo h3{font-size:14px !important;margin-bottom:1em;line-height: 1.5em;border-bottom:none;text-align: left;}

#modal_tokusyo h2{margin-top:0 !important;}

.modal-close-btn{font-size:1.8em;position: absolute;background-color: inherit !important;width:2em !important;height:1em !important;color:#ccc !important;right:0;top:0;padding:0 !important;margin:0em;}

#footer-sns{display: none;}

@media screen and (max-width:650px){
#footer-sns{display: flex;flex-wrap: wrap;width:100%;height:90px;position: fixed;bottom:0;left:0;justify-content: space-around;padding-top:12px;
	background: rgba(255,255,255,0.9);z-index:10;}
#footer-sns div{width:100%;text-align: center;font-weight: bold;font-size:11px;}
#footer-sns a{width:33%;text-align: center;font-size:20px;background-color:#000;height:42px;display: block;position: relative;}
#footer-sns a i{display: block;height:30px;width:30px;border-radius: 50%;color:#fff;padding-top:5px;position: absolute;left:50%;top:50%;transform: translate(-50%,-50%);}
}