@charset "utf-8";
/*
Theme Name: L-style
Theme URI: http://www./
Description: L-style
Version: 1.0
Author: L-style
Author URI: http://www./
Tags: L-style

*/


@media screen and (max-width: 767px){
	.pc-block{
		display: none;
	}
	.sp-block{
		display: block;
	}
	.flex-box{
			flex-direction: column;
		}
	.button{
		font-size: 20px;
		font-size: 2.0rem;
	}
	.inner {
		max-width: 100%;
		width: 100%;
		margin: 0 auto;
		padding:0 20px;
	}
	.button {
		width: auto;
	}



/* #menu */

	#menu{
		position:fixed;
		z-index:20;
		right: 10px;
		top: 10px;
		z-index:20;
		width:72px;
		height:72px;
		background:#0060ad;
		border-radius:50%;
		transition:all 0.6s ease;
	}
	body.menu-open #menu{
		background:transparent;
	}
	#menu div.menu-icon{
		position:relative;
		z-index:500;
		width:72px;
		height:72px;
		cursor:pointer;
	}
	#menu div.menu-icon > span{
		position:absolute;
		left:22px;
		width:30px;
		height:1px;
		background:#fff;
		transition:all 0.4s;
	}
	#menu div.menu-icon > span:nth-child(1){top:22px;}
	#menu div.menu-icon > span:nth-child(2){top:32px;}
	body.menu-open #menu div.menu-icon > span:nth-child(1),
	body.menu-open #menu div.menu-icon > span:nth-child(2){
		top:30px;
		left:24px;
	}
	body.menu-open #menu div.menu-icon > span:nth-child(1){
		transform:rotate(45deg);
	}
	body.menu-open #menu div.menu-icon > span:nth-child(2){
		transform:rotate(-45deg);
	}
	body.menu-open #menu div.menu-icon > span{
		width:24px;
		background:#000;
	}
	#menu div.menu-icon > i{
		position:absolute;
		bottom:15px;
		left:50%;
		transform:translateX(-50%);
		color:#fff;
		font-size:11px;
		font-size:1.1rem;
		font-weight:400;
		line-height:1;
		opacity:1;
	}
	body.menu-open #menu div.menu-icon > i{
		opacity:0;
	}
	#menu div.menu-icon > i.open{}
	#menu div.menu-icon > i.close{
		opacity:0;
	}
	body.menu-open #menu div.menu-icon > i.close{
		opacity:1;
		color:#000;
	}
	#menu div.menu-background{
		visibility:hidden;
		opacity:0;
		position:fixed;
		left:0;
		top:0;
		width:100vw;
		height:100vh;
		z-index:100;
		transition:all 0.6s ease;
	}
	body.menu-open #menu div.menu-background{
		visibility:visible;
		opacity:1;
	}
	#menu div.menu-content{
		visibility:hidden;
		opacity:0;
		position:fixed;
		top:0;
		right:0;
		z-index:999;
		width:100%;
		height:100%;
		display:flex;
		align-items:center;
		overflow-y:scroll;
		transition:all 0.6s ease;
	}
	#menu div.menu-content{
		-ms-overflow-style:none;
		scrollbar-width:none;
	}
	#menu div.menu-content::-webkit-scrollbar{
		display:none;
	}
	body.menu-open #menu div.menu-content{
		visibility:visible;
		opacity:1;
		background:var(--color-bg-01);
	}
	#menu div.menu-content > div{
		max-width:1080px;
		color:#000;
		padding:1.8em 2.4em 4.2em 1.8em;
		margin:0 auto;
		background: #ede7dc;
		height: 100%;
		width: 100%;
	}
	#menu div.menu-content div.menu-content-body{
		position:relative;
	}
	#menu div.menu-content div.menu-content-body > div.menu-block > div{
		flex-shrink:0;
	}
	#menu div.menu-content div.menu-content-body > div.menu-block > div nav ul{
		margin-top: 13rem;
	}
	#menu div.menu-content div.menu-content-body > div.menu-block > div nav ul li{
		border-bottom: 1px solid #000;
		padding: 1rem;
	}
	#menu div.menu-content div.menu-content-body > div.menu-block > div nav ul li a{
		font-size:18px;
		font-size:1.8rem;
	}





	/*******************
 * main-slider
********************/
	#main-block .slider-img{
		min-height: 100%;
	}
	.slider-img:before{
		background-size: contain;
		width: 40%;
		max-width: 100%;
		height: 40%;
		left: 0em;
		top: 0;
		z-index: 10;
	}
	.slider-img:after{
		background-size: contain;
		width: 14em;
		height: 9em;
		right: auto;
		left: -1em;
		top: auto;
		bottom: -5rem;
		z-index: 2;
	}
	.slider-img p:before{
		left: 1em;
		z-index: 20;
		width: 8em;
		height: 8em;
		top: 1em;
	}
	.slider-img p:after{
		background-size: contain;
		width: 6em;
		height: 6em;
		right: 0em;
		bottom: 0em;
		z-index: 0;
	}
	div.slider-01 div.slide{
		height: 60vh;
		min-height: 100%;
	}
	div.slider-01 div.slide.slick-slide img{
		height: 100%;
		object-fit: contain;
	}
	div.slider-01 div.slide .slide-text{
		width: 80%;
		position: absolute;
		bottom: 33em;
		right: 2em;
	}
	div.slider-01 div.slide-01 .slide-text {
		justify-content: center;
	}
	div.slider-01 div.slide-03 .slide-text{
		bottom: auto;
		right: 1em;
		top: 25em;
		z-index: 30;
	}

	div.slider-01 div.slide-01{background-image:url("../images/sp/slider_bg_01.jpg");}
	div.slider-01 div.slide-02{background-image:url("../images/sp/slider_bg_02.jpg");}
	div.slider-01 div.slide-03{background-image:url("../images/sp/slider_bg_03.jpg");}


/*******************************
/* main
*******************************/
	#info-block:after {
		background: url(../images/leaves_deco_sr02.png) no-repeat left bottom;
		background-size: contain;
		width: 14em;
		height: 24em;
		right: 0;
		top: 10em;
	}
	#info-block section .flex-box > .img-box:before{
		background: url(../images/leaves_deco_bb.png) no-repeat left bottom;
		background-size: contain;
		width: 13em;
		height: 15em;
		left: -5em;
		top: -6em;
	}
	#info-block section .flex-box > .img-box{
		flex: 0 1 auto;
	}
	#info-block section .flex-box > .text-box {
		flex: 0 1 auto;
		max-width: 100%;
		margin-right: 5%;
		margin-left: 5%;
	}
	#info-block section .flex-box > .text-box .title{
		text-align: center;
		font-size: 20px;
		font-size: 2.0rem;
	}
	#info-block section .flex-box > .text-box .title > span .txt-bold{
		font-size: 24px;
		font-size: 2.4rem;
		margin-left: 0;
	}
	#info-block section .flex-box > .text-box .c-name{
		text-align: center;
		font-size: 26px;
		font-size: 2.6rem;
	}
	#service-block{
		background: url(../images/sp/service_bk.png) center top no-repeat;
		background-size: contain;
	}
	#service-block .inner{
		padding-top: 15rem;
	}
	#service-block:before{
		background-size: contain;
		width: 13em;
		height: 11em;
		left: -3em;
		top: 16em;
	}
	#service-block:after{
		background-size: contain;
		width: 11em;
		height: 13em;
		right: 0;
		top: 46em;
		z-index: -1;
	}
	#service-block section:before{
		background-size: contain;
		width: 10em;
		height: 14em;
		bottom: 11em;
	}
	#service-block section:after{
		background-size: contain;
		width: 12em;
		height: 28em;
		bottom: -31em;
	}
	#service-block section .inner:before,#service-block section .inner:after{
		content: none;
	}
	#service-block .inner > .head > .title{
		margin-top: 2rem;
		font-size: 28px;
		font-size: 2.8rem;
	}
	#service-block .inner > .head > .text{
		margin-top: 2rem;
	}
	#service-block .inner > .body .flex-box:nth-child(1){
		flex-direction: column-reverse;
	}
	#service-block .inner > .body .flex-box > div{
		margin-top: 2rem;
	}
	#service-block .inner > .body .flex-box > .text-box{
		margin-top: 4rem;
	}
	#service-block .inner > .body .flex-box > .text-box ul li dl{
		flex-direction: column;
	}
	#service-block .inner > .body .flex-box > .text-box ul li dl dt{
		width: 100%;
		margin-left: 0;
	}
	#service-block .inner > .body .flex-box > .text-box ul li dl dd {
		width: auto;
		margin-left: 0;
		margin-top: 1rem;
	}
	#service-block .inner > .body .flex-box > .block-box{
		max-width: 100%;
	}
	#service-block .inner > .body .flex-box > .block-box{
		margin-top: 4rem;
	}
	#service-block .inner > .body .flex-box > .block-box > ul{
		margin-bottom: 3rem;
	}
	#service-block .inner > .body .flex-box > .block-box > .button {
		width: 100%;
		margin-top: auto;
	}
	#service-block .inner > .body .flex-box:nth-child(2) {
		margin-top: 0;
	}
	#flow-block {
		margin-top: -10em;
	}
	#flow-block .inner > .body:before{
		background-size: contain;
		width: 12em;
		height: 9em;
		top: -10em;
		left: auto;
		right: 0em;
	}
	#flow-block .inner > .body ul.flex-box li {
		width: auto;
		max-width: 100%;
	}
	#flow-block .inner > .body ul.flex-box li+li{
		margin-top: 5rem;
	}
	#flow-block .inner > .body ul.flex-box li > .text {
		margin-top: 2rem;
		text-align: center;
	}
	#flow-block .inner > .body ul.flex-box li > .buloon{
		width: 180px;
		height: 180px;
		margin: 0 auto;
	}
	#flow-block .inner > .body ul.flex-box li > .buloon span{
		font-size: 18px;
		font-size: 1.8rem;
	}
	#flow-block .inner > .body ul.flex-box li > .buloon:after{
		width: 30px;
		height: 50px;
		right: 0;
		left: 0;
		bottom: -8.5em;
		margin: auto;
		transform: rotate(90deg);
	}
	#flow-block .inner > .body ul.flex-box li:nth-child(1) > .buloon:after{
		bottom: -7em;
	}
	#flow-block .inner > .body .button{
		width: auto;
	}

	.faq-head:after{
		background-size: contain;
		width: 7em;
		height: 6em;
		right: 18em;
		top: 10em;
	}
	#faq-block:before{
		background-size: contain;
		width: 16em;
		height: 16em;
		right: -1em;
		bottom: -4em;
	}
	#faq-block:after{
		background-size: contain;
		width: 10em;
		height: 36em;
		right: 0;
		top: -34em;
		z-index: -1;
	}
	#faq-block section:before{
		background-size: contain;
		width: 14em;
		height: 17em;
		right: -3em;
		bottom: 1em;
	}
	#faq-block section > .body ul li dl{
		font-size: 18px;
		font-size: 1.8rem;
	}
	#faq-block section > .body .button{
		width: auto;
		margin-top: 6rem;
		z-index: 10;
	}
	#faq-block section > .body ul li dl dt span:nth-child(1), #faq-block section > .body ul li dl dd span:nth-child(1){
		font-size: 36px;
		font-size: 3.6rem;
	}
	#sns-block section > .head:before{
		background-size: contain;
		width: 9em;
		height: 8em;
		left: 0;
		top: 13em;
	}
	#sns-block section > .head:after{
		width: 7em;
		height: 9em;
		background-size: contain;
		right: 2em;
		top: 12em;
	}
	#sns-block section > .body .inner div.flex-box {
		margin-top: 4rem;
	}
	#sns-block section > .body .inner div.flex-box .box+.box{
		margin-top: 4rem;
	}
	#news-block{
		background: url(../images/sp/news_bk.png) center top no-repeat;
		background-size: contain;
		margin-top: 10rem;
	}
	#news-block:before{
		background-size: contain;
		width: 13em;
		height: 15em;
		left: -6em;
		top: 8em;
		z-index: -1;
	}
	#news-block:after{
		background-size: contain;
		width: 8em;
		height: 13em;
		z-index: -1;
	}
	#news-block section .inner{
		padding-top: 6em;
	}
	#news-block section .inner > .body{
		margin-top: 0rem;
	}
	#news-block section .inner > .body ul.flex-box li+li{
		margin-top: 4rem;
	}
	#news-block section .inner > .body ul.flex-box li a .data {
		margin-top: 1rem;
	}
	#news-block section .inner > .body .button{
		width: auto;
		margin-top: 4rem;
	}
	#map-block{
		z-index: -2;
	}
	#map-block:before{
		background: none;
	}
	#map-block section:before{
		background-size: contain;
		width: 9em;
		height: 10em;
		left: -4em;
		bottom: 85em;
	}
	#map-block section:after{
		background-size: contain;
		width: 12em;
		height: 43em;
		right: 0;
		top: 23em;
	}
	#map-block .head:before,#map-block .head:after{
		content: none;
	}
	#map-block section > .body{
		padding-top: 2rem;
		padding-bottom: 16rem;
	}
	#map-block section > .body .inner{
		padding-top: 0;
	}
	#map-block section > .body .inner .flex-box > div {
		width: 100%;
		z-index: 1;
	}
	#map-block section > .body .inner .flex-box > div.text-box {
		margin-right: 0;
	}
	#map-block section > .body .inner .flex-box > div.text-box .flex-box{
		flex-direction: row;
	}
	#map-block section > .body .inner div.flex-box:nth-child(2){
		margin-top: 6rem;
	}
	#map-block section > .body .inner div.flex-box:nth-child(2):before{
		background: none;
	}
	#map-block section > .body .inner div.flex-box:nth-child(2):after{
		left: 0;
		width: 100%;
	}
	#map-block section > .body .inner .flex-box > div.text-box .title{
		font-size: 20px;
		font-size: 2.0rem;
	}
	#map-block section > .body .inner .flex-box > div.map-box{
		margin-top: 2rem;
	}
	#container:after{
		background: url(../images/sp/footer_top.png) no-repeat center bottom;
		background-size: contain;
		height: 13em;
	}
	#footer .inner {
		padding: 1rem 20px 5rem;
	}
	#footer .inner .footer-top{
		display: none;
	}
	#footer .footer-bottom > .logo{
		width: 50%;
	}
	#footer .footer-bottom {
		margin-top: 0;
	}
	#footer .footer-bottom .flex-box div:nth-child(2) {
		margin-left: 0;
	}
	#footer .inner > .copyright{
		margin-top: 1rem;
		font-size: 12px;
		font-size: 1.2rem;
	}
	body.page div.inner-container-page #erea-block section::before,body.category div.inner-container-page #erea-block section::before,body.single div.inner-container-page #erea-block::before{
		background-size: contain;
		width: 10em;
		height: 15em;
	}
	body.page div.inner-container-page #erea-block section:after,body.category div.inner-container-page #erea-block section:after,body.single div.inner-container-page #erea-block:after{
		background-size: contain;
		width: 10em;
		height: 12em;
	}
	body.page #erea-block .inner .head h2 span.round:before{
		background-size: contain;
		left: -80px;
		width: 70%;
		height: 5em;
		top: 4em;
	}
	body.page #erea-block .inner .head h2 span.round:after{
		background-size: contain;
		right: -2em;
		top: -60px;
		width: 50%;
		height: 4em;
	}
	body.page div.inner-container-page,body.category div.inner-container-page,body.single div.inner-container-page{
		padding-bottom: 24rem;
	}
	body.about #erea-block .inner .body {
		margin-top: 12rem;
	}
	body.about #erea-block .inner .body .title{
		font-size: 30px;
		font-size: 3.0rem;
	}
	body.about #erea-block .inner .body .text{
		margin-top: 4rem;
	}
	body.service #erea-block .inner .body {
		margin-top: 14rem;
	}
	body.service #erea-block .inner .body div > ul {
		margin-top: 4rem;
	}
	body.service #erea-block .inner .body div > ul li dl{
		align-items: baseline;
		flex-direction: column;
	}
	body.service #erea-block .inner .body div > ul li dl dt{
		width: 100%;
	}
	body.service #erea-block .inner .body div > ul li dl dd {
		width: auto;
		margin-left: 0;
		margin-top: 1em;
	}
	body.service #erea-block .inner .body > div.flex-box {
		margin-top: 6rem;
	}
	body.service #erea-block .inner .body div.flex-box > .block-box{
		max-width: 100%;
	}
	body.service #erea-block .inner .body div.flex-box > .block-box+.block-box{
		margin-top: 6rem;
	}
	body.service #erea-block .inner .body div.flex-box > .block-box > .button{
		width: 100%;
		margin-top: 2em;
	}
	body.service #erea-block .inner .body div.flex-box > .block-box:nth-child(2) > div.flex-box{
		flex-direction: row;
		margin: 4rem 0 0;
	}
	body.facility #erea-block .inner .body {
		margin-top: 14rem;
	}
	body.facility #erea-block .inner .body > ul.flex-box {
		margin-top: 6rem;
	}
	body.facility #erea-block .inner .body > ul.flex-box li {
		width: auto;
	}
	body.facility #erea-block .inner .body > ul.flex-box li+li {
		margin-top: 2em;
	}
	body.facility #erea-block .inner .body > .facility-area {
		margin-top: 8rem;
	}
	body.facility #erea-block .inner .body > .facility-area div .facility-name{
		font-size: 28px;
		font-size: 2.8rem;
	}
	body.facility #erea-block .inner .body > .facility-area div div.flex-box {
		margin-top: 4rem;
	}
	body.facility #erea-block .inner .body > .facility-area div div.flex-box .text-box{
		margin-top: 4rem;
	}
	body.facility #erea-block .inner .body > .facility-area div div.flex-box .text-box dl {
		margin-top: 1rem;
	}
	body.facility #erea-block .inner .body > .facility-area div > dl {
		margin-top: 1rem;
	}
	body.facility #erea-block .inner .body > .facility-area div div.flex-box .text-box dl dd p {
		line-height: 1.8;
	}
	body.facility #erea-block .inner .body > .facility-area div#mucho {
		margin-top: 10rem;
	}
	body.facility #erea-block .inner .body > .facility-area div#mucho > div.flex-box:nth-of-type(2) > div:nth-child(1){
		width: 60%;
		margin: 0 auto;
	}
	body.facility #erea-block .inner .body > .facility-area div#mucho > div.flex-box:nth-of-type(2) > div:nth-child(2) dl:nth-of-type(1) dt {
		width: auto;
	}
	body.facility #erea-block .inner .body > .facility-area div#mucho > div.flex-box:nth-of-type(2) > div:nth-child(2) {
		width: unset;
		margin-left: 0;
		margin-top: 1rem;
	}
	body.faq #erea-block .inner > .body ul li dl{
		font-size: 18px;
		font-size: 1.8rem;
	}
	body.faq #erea-block .inner > .body ul li dl dt span:nth-child(1), body.faq #erea-block .inner > .body ul li dl dd span:nth-child(1){
		font-size: 30px;
		font-size: 3.0rem;
	}
	body.faq #erea-block .inner .head h2 span.round:before{
		left: -100px;
		width: 90%;
		height: 4em;
		top: 4.5em;
	}
	body.faq #erea-block .inner .head h2 span.round:after{
		right: -3em;
		top: -50px;
		width: 90%;
		height: 3em;
	}
	body.map #erea-block .inner .body {
		margin-top: 6rem;
	}
	body.map #erea-block .inner .body .flex-box.flex-box-item-c{
		align-items: baseline;
	}
	body.map #erea-block .inner .body .flex-box .img-box{
		margin-top: 2rem;
	}
	body.map #erea-block .inner .body > div+div {
		margin-top: 6rem;
	}
	body.contact #erea-block .inner .body {
		margin-top: 16rem;
	}
	body.contact #erea-block .formblock {
		width: auto;
		margin: 40px auto 0;
	}
	body.contact #erea-block .formblock dl{
		flex-direction: column;
	}
	body.contact #erea-block .formblock dl+dl {
		margin-top: 20px;
	}
	body.contact #erea-block .formblock dl dt{
		width: auto;
		padding: 10px;
	}
	body.contact #erea-block .formblock dl dd{
		width: 100%;
		margin-left: 0;
	}
	body.contact #erea-block .formblock dl dd input[type="text"], body.contact #erea-block .formblock dl dd input[type="email"], body.contact #erea-block .formblock dl dd input[type="tel"], body.contact #contact-erea .formblock dl dd input[type="email"],body.contact #erea-block .formblock dl dd textarea{
		width: 100%;
		height: auto;
	}
	#erea-block .formblock dl dd textarea{
		width: 100%;
	}
	body.contact #erea-block .formblock .button {
		width: 100%;
	}
	body.contact #erea-block .button-erea input[type="submit"],body.contact #erea-block input[type="number"]{
		width: 100%;
	}
	body.category #erea-block .inner .body{
		margin-top: 12rem;
	}
	body.single #erea-block .inner .body {
		padding-top: 12rem;
	}


}




@media screen and (max-width:380px){
	div.slider-01 div.slide{
		height: 75vh;
	}

}