@charset "utf-8";
/* CSS Document */

/*!----------------
共有スタイル
-----------------*/

/*!Style
-------------------------------------*/
*{box-sizing:border-box}
html{font-size: 16px;color:#000;}
body{margin:0;padding:0;font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";}
img{vertical-align:bottom;}
ul{list-style: none;}
a{text-decoration:none;color:#9D894A;}
a:hover{text-decoration:none;}
a:hover img{opacity:0.7;filter:alpha(opacity=70);-ms-filter:"alpha(opacity=70)"}
h1,h2{margin: 0;padding:0;}

.scroll-in,.zoom-in{opacity: 0;}
.slide_start{animation: slideinTop 0.8s forwards 0.1s;}
.zoom_start{animation: zoomIn 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;}

.kasen{text-decoration: underline;text-decoration-thickness: 0.5em; text-decoration-color: rgba(235, 212, 212, 1);text-underline-offset: -0.2em;text-decoration-skip-ink: none;}
.big12{font-size: 1.2em}
i{font-size: 1.5em;vertical-align:text-bottom;margin-left: 0.2em;}

.pc{display: block !important}
.sp{display: none !important}

@media screen and (max-width: 999px) {
.pc{display: none !important}
.sp{display: block !important}
}

/*!大枠
-------------------------------------*/
#stage{margin:0 auto;padding:0;width:100%;text-align:center;}

/*!ヘッダー
-------------------------------------*/
header {margin:0 auto;padding: 1em;display: flex;justify-content: space-between;align-items: center;}
header h1{color:#9D894A;font-size: 1.4em;letter-spacing: 0.1em;}

/*メニュー*/
#nav_check:checked ~ .nav_btn span {background-color: rgba(255, 255, 255, 0);}
#nav_check:checked ~ .nav_btn span::before {bottom: 0;transform: rotate(45deg);}
#nav_check:checked ~ .nav_btn span::after {top: 0;transform: rotate(-45deg);}
#nav_check {display: none;}
.nav_btn {position: fixed;top: 10px;right: 10px;display: flex;height: 50px;width: 50px;justify-content: center;align-items: center;z-index: 90;}
.nav_btn span,
.nav_btn span:before,
.nav_btn span:after {content: '';display: block;height: 3px;width: 25px;border-radius: 3px;background-color: #9d894a;position: absolute;}
.nav_btn span:before {bottom: 8px;}
.nav_btn span:after {top: 8px;}
nav {width: 20%;height: 100%;position: fixed;top: 0;right: -120%;z-index: 80;background-color: #E7E7E7;transition: all 0.5s;}
nav ul {padding: 5em 3em 0;}
nav ul li {list-style: none;}
nav ul li a {display: block;width: 100%;font-size: 15px;box-sizing: border-box;color:#9d894a;text-decoration: none;padding: 9px 15px 10px 0;position: relative;}
nav ul li a::before {content: "";width: 7px;height: 7px;border-top: solid 2px #9d894a;border-right: solid 2px #9d894a;transform: rotate(45deg);position: absolute;right: 11px;top: 16px;}
#nav_check:checked ~ nav {right: 0;}

@media only screen and (max-width: 999px) {
nav {width: 80%;}
}

/*!mv
-------------------------------------*/
#mv{margin:0 auto;padding:0;width:100%;position: relative;}
#mv img.full{width:100%;}
#mv div{position: absolute;margin: auto;padding: 2em 0;top:0;left:0;right:0;width: 1000px;height:100%;}
#mv h2{padding: 0.5em 1.4em;display: inline-block;background: #9d894a;color:#fff;border-radius: 100px;}
#mv p.btn{position: absolute;bottom:0;right:0;}
#mv ul{background: #fff;border-radius: 100px;display: flex;align-items: center;justify-content: space-between;padding: 0.5em 3em;width: fit-content;position: absolute;bottom: 0;}
#mv li.sen{margin-left: 2em;padding: 0.5em 2em;border: 1px solid;}

@media only screen and (max-width: 999px) {
#mv div{padding: 2em 1em;width:100%;}
#mv img.img70{width:70%;}
#mv h2{font-size: 1em;}
#mv p.btn{width:30%;right:1em;}
#mv p.btn img{width:100%;}
#mv ul{padding: 0.5em;width:50%;flex-flow: row wrap;border-radius: 10px;background: none;}
#mv li.sen{margin: 0.5em 0 0 0;font-size: 0.8em;width: 100%;background: #fff9f1;}
}

/*!main
-------------------------------------*/
h3:before {content: url("img/h3_img01.png");display: block; width: 78px;height: 40px;margin: auto;}
h3{font-weight: 400;display: inline-block;font-size: 1.6em;}
h3 span{margin-top: -0.2em;font-weight: 400;color:#9d894a;display: block;font-size: 0.6em;}


h3.two:before {content: url("img/h3_img02.png");display: block; width: 78px;height: 40px;margin: auto;}
h3{font-weight: 400;display: inline-block;font-size: 1.6em;}
h3 span{margin-top: -0.2em;font-weight: 400;color:#9d894a;display: block;font-size: 0.6em;}

@media only screen and (max-width: 999px) {
h3{font-size: 1.4em;}
}

/*!about
-------------------------------------*/
#about{margin:0 auto;padding:3em 0;width:100%;background: #fff9f1;}
#about p.big{margin-bottom: 2em;font-size: 1.8em;}

@media only screen and (max-width: 999px) {
#about{padding:1em 2em;}
#about p.big{text-align: center;font-size: 1.4em;margin-bottom: 1em;}
#about p{text-align: left;}
}

/*!まずは電話
-------------------------------------*/
#mazuhatel{margin:0 auto;padding:3em 2em 2em;width:100%;background: #ebd4d4;}
#mazuhatel p.btn{display: inline-block;}
#mazuhatel p.big{font-size: 1.8em;margin: 0;}
#mazuhatel p a{display: flex;background: #fff;border: 1px solid #9d894a;align-items: center; padding-right: 1em;}
#mazuhatel p a span.mb01{background: #e27e7e;color:#fff;line-height: 1em;padding: 0.5em;}
#mazuhatel p a span.mb02{margin: 0.5em 1em;padding: 0 1em;background: #9d894a;color:#fff;display: flex;align-items: center;}

@media only screen and (max-width: 999px) {
#mazuhatel p a{flex-flow: row wrap;justify-content: center;padding-right: 0;}
#mazuhatel p a span.mb01{width:50%;}
#mazuhatel p a span.mb02{margin: 0;padding: 0.5em;width:50%;display: block;line-height: 1em;}
#mazuhatel p a span{padding: 0.5em;}
}


/*!どんな目的で利用するの？
-------------------------------------*/
#what{margin:0 auto;padding:3em 0;width:100%;background: #f7f4ea url("img/what_bg.png");}
#what ul{margin:3em auto 0;padding:0;width:80%;display: flex;justify-content: center;flex-flow: row wrap;}
#what ul li{margin:0 2em 2em;padding:0;max-width: 400px;width:100%;text-align: left;}
#what ul li img{width:100%;}
#what ul li h4{margin: 1em 0 -0.5em;font-size: 1.2em;color:#9d894a;}

#what .box{margin: 4em auto 1em;padding:2em;background: #fff;border:1px dashed #9d894a;max-width: 1000px;width:100%;position: relative;font-size: 0.9em;}
#what .box:before {content:url("img/what_img06.png");display: block; width: 180px;height: 59px;margin: auto;top: -3.8em;left: 0;right: 0;position:absolute;}
#what .box h4{margin: 0.5em;font-size: 1.2em;color:#9d894a;}
#what .box p{text-align: center;}
#what .box p img{vertical-align: middle;}

#what p.btn{display: inline-block;}
#what p a{display: flex;background: #fff;border: 1px solid #9d894a;align-items: center; padding-right: 1em;}
#what p a span.mb01{background: #e27e7e;color:#fff;line-height: 1em;padding: 0.5em;text-align: center;}
#what p a span.mb02{margin: 0.5em 1em;padding: 0 1em;background: #9d894a;color:#fff;display: flex;align-items: center;text-align: center;}


@media only screen and (max-width: 999px) {
#what{padding:1em 2em;}
#what p{text-align: left;}
#what ul{margin:3em 0 0;width:100%;}
#what ul li{margin:0 0 2em;padding:0;}

#what p a{flex-flow: row wrap;justify-content: center;padding-right: 0;}
#what p a span.mb01{width:50%;}
#what p a span.mb02{margin: 0;padding: 0.5em;width:50%;display: block;line-height: 1em;}
#what p a span{padding: 0.5em;}
}

/*!ご利用方法
-------------------------------------*/
#howtouse{margin:0 auto;padding:2em 2em 4em;width:100%;background: #ebd4d4;}

#howtouse ul{margin: 0 auto;padding: 0;}
#howtouse ul li:nth-child(odd){margin: auto;padding: 1em;border: 1px dashed #9d894a;background: #f3e2e2;width: 300px;}
#howtouse ul li:nth-child(even){margin: 0.5em;font-size: 1.6em;color: #9d894a;}
#howtouse ul li div{margin: auto;padding: 0 0.5em;background: #9d894a;color: #fff;width: fit-content;}
#howtouse ul li.full{max-width:1000px;width:100%;}

#howtouse ul.number{margin: 0 auto;padding: 0;display: flex;justify-content: space-between;}
#howtouse ul.number li{margin: auto;padding: 1em;border: none;background: #fff9f1;width: 20%;font-size:1em;color:#000;box-shadow: 5px 5px #e9cbcb}


@media only screen and (max-width: 999px) {
#howtouse{padding:1em 2em 3em;}
#howtouse ul li:nth-child(odd){width: 100%;}
#howtouse ul.number{margin-top: -1em;flex-flow: row wrap;}
#howtouse ul.number li{width: 45%;margin-top: 1em}
}

/*!利用者様の声
-------------------------------------*/
#voice{margin:0 auto;padding:5em 2em;width:100%;background: #fff9f1 url("img/voice_bg.png")top center no-repeat;}
#voice div.text{margin:0 auto;padding:0;display: flex;justify-content: center;font-size: 1.6em;}
#voice div.text:before {content: url("img/voice_img01.png");display: block; width: 63px;height: 146px;}
#voice div.text:after {content: url("img/voice_img02.png");display: block; width: 63px;height: 146px;}
#voice div.text span{margin: 1em 0 0;font-size: 0.5em;display: block;}

#voice p.btn{display: inline-block;}
#voice p a{display: flex;background: #fff;border: 1px solid #9d894a;align-items: center; padding-right: 1em;}
#voice p a span.mb01{background: #e27e7e;color:#fff;line-height: 1em;padding: 0.5em;text-align: center;}
#voice p a span.mb02{margin: 0.5em 1em;padding: 0 1em;background: #9d894a;color:#fff;display: flex;align-items: center;text-align: center;}

#voice h3{margin: 3em 0 2em;display: block;}
#voice div.voice_text{margin:0 auto 2em;padding:2em 2em 1em;text-align: left;font-size: 0.9em;border: 1px dashed #9d894a;background: #fff;max-width: 1000px;width:100%;}
#voice div.voice_text ul{margin:0 auto;padding:0;text-align: left;display: flex;justify-content: flex-start;}
#voice div.voice_text ul li{padding-right:1em;}
#voice div.voice_text ul li h4{margin:0 auto;padding:0;color:#9d894a;letter-spacing: 1px;font-size: 1.2em;}
#voice div.voice_text ul li span{display: block;font-size: 0.8em;}

@media only screen and (max-width: 999px) {
#voice{padding:3em 2em;}
#voice div.text:before {display: none}
#voice div.text:after {display: none}
	
#voice p a{flex-flow: row wrap;justify-content: center;padding-right: 0;}
#voice p a span.mb01{width:50%;}
#voice p a span.mb02{margin: 0;padding: 0.5em;width:50%;display: block;line-height: 1em;}
#voice p a span{padding: 0.5em;}
	
#voice h3{margin-bottom:1em;}
#voice div.voice_text ul{display: block;}
#voice div.voice_text ul li{padding-right:0;}
}

/*!ご利用満足度三冠達成！
-------------------------------------*/
#kan3{margin: 5em auto 3em;padding:0;}
#kan3 img{max-width:669px;width:100%;}

@media only screen and (max-width: 999px) {
#kan3{margin: 3em auto 1em;}
}

/*!よくある質問
-------------------------------------*/
#qa{margin:0 auto;padding:3em 2em;width:100%;background: #f7f4ea;}
#qa ul{margin:0 auto;padding:0;max-width:1000px;width:100%;}
#qa ul li{padding:1em;border-bottom: 1px dashed #9d894a;text-align: left;}
#qa ul li h4{margin:1em 0 0;font-size: 1.2em;}
#qa ul li h4 span{color:#9d894a;}
#qa ul li p span{color:#e27e7e;}

@media only screen and (max-width: 999px) {
#qa{padding:2em 1em 3em;}
}

/*!footer
-------------------------------------*/
footer{margin: 0 auto;padding: 2em 0 0;text-align: center;color:#9d894a;}
footer p{color:#9D894A;font-size: 1.4em;letter-spacing: 1px;}
footer ul{margin: 0 auto;padding: 0;display: flex;justify-content: center;}
footer ul li{}
footer ul li a{display: block;padding: 0 1em;}
footer ul li a:before{font-family : "Font Awesome 5 Free";content : "\f04b";font-weight : 900;    font-size: 0.8em;}
footer #copy{margin: 3em 0 0;padding: 3px;color:#fff;background: #d4caaf;font-size: 0.8em;letter-spacing:1px;}

@media only screen and (max-width: 999px) {
footer ul{font-size: 0.8em;display: block;text-align: left;}
footer ul li a{padding: 0.3em 2em;}
}



/*!アニメーション
-------------------------------------*/

/*上から下*/
@keyframes slideinTop{
  0% {transform: translateY(-50px);}
  100% {transform: translateY(0);opacity: 1;}
}

/*ズームイン*/
@keyframes zoomIn {
  0% {transform: scale(0.8);opacity: 0;}
  100% {opacity: 1;transform: scale(1);}
}