@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{
		width: 100%;
		padding: 1.6rem 4rem;
		font-size: 24px;
		font-size: 2.4rem;
	}
	.button span.arrow-after{
		top: 20%;
		width: 48px;
	}
	.button span.arrow-after:after{
		width: 14px;
	}
	.inner {
		max-width: 100%;
		width: 100%;
		margin: 0 auto;
		padding:0 20px;
	}
	h2{
		font-size: 36px;
	}
	h2.heading > span:nth-child(2){
		margin: 0.5rem auto 0;
		width: 25px;
	}
	#header .inner {
		padding: 0;
	}
	#menubtn{
		position: fixed;
		height: 24px;
		width: 30px;
		display: inline-block;
		box-sizing: border-box;
		z-index: 20;
		right: 20px;
		top: 20px;
	}
	#menubtn div{
		position: absolute;
		left: 0;
		height: 2px;
		width: 30px;
		background-color: #000;
		display: inline-block;
		box-sizing: border-box;
	}
	#menubtn div:nth-of-type(1){
		top: 0;
	}
	#menubtn div:nth-of-type(2){
		top: 10px;
	}
	#menubtn div:nth-of-type(3){
		bottom: 0;
	}
	#menubtn.is-active div:nth-of-type(1){
		top: 0;
		transform: translateY(10px) rotate(-45deg);
		background-color: #fff;
	}
	#menubtn.is-active div:nth-of-type(2){
		opacity: 0;
		background-color: #fff;
	}
	#menubtn.is-active div:nth-of-type(3){
		bottom: 0;
		transform: translateY(-12px) rotate(45deg);
		background-color: #fff;
	}
	.nav-sp-block{
		position: fixed;
		background: #000;
		top: 0px;
		z-index: 11;
		height: 100%;
		width: 100%;
	}
	.nav-sp-block ul{
		margin-top: 120px;
	}
	.nav-sp-block ul li{
		border-bottom: 1px solid #fff;
		width: 100%;
		text-align: center;
	}
	.nav-sp-block ul li a{
		display: block;
		padding: 20px 30px;
		color: #fff;
	}


/*******************************
/* main
*******************************/
	.video-wrapper{
		height: 60vh;
	}
	.video-wrapper video{
		height: 100%;
		object-fit: cover;
	}
	#message-block {
		padding: 6rem 2rem 8rem;
	}
	#message-block > .body > .text-box > .title{
		font-size: 24px;
		font-size: 2.4rem;
	}
	#message-block > .body > .text-box > .lead > p{
		font-size: 16px;
		font-size: 1.6rem;
	}
	#info-block > .block > div {
		width: auto;
	}
	#info-block > .block > div.text-box{
		padding: 4rem 2rem;
	}
	#info-block > .block > div.text-box > ul{
		width: 100%;
	}
	#info-block > .block > div.text-box > ul li > a{
		padding: 1rem 0rem;
		flex-direction: column;
	}
	#info-block > .block > div.text-box > ul li > a .data{
		font-size: 14px;
		font-size: 1.4rem;
	}
	#info-block > .block > div.text-box > ul li > a .title{
		margin-left: 0;
		font-size: 18px;
		font-size: 1.8rem;
	}
	#info-block > .block > div.text-box > .arrow{
		max-width: 100%;
		font-size: 20px;
	}
	.arrow span.arrow-after{
		width: 26px;
		height: 26px;
	}
	.arrow span.arrow-after::before, .arrow span.arrow-after::after{
		width: 10px;
		height: 2px;
	}
	#info-block > .block > div.text-box > .arrow > span{
		padding-right: 4rem;
	}
	#staff-block > .block.flex-box{
		flex-direction: column-reverse;
	}
	#staff-block > .block.flex-box div.text-box{
		padding: 4rem 2rem;
	}
	#staff-block > .block > .text-box > .lead{
		text-align: left;
		font-size: 16px;
		font-size: 1.6rem;
	}
	#menu-block{
		padding: 6rem 0 0;
	}
	#menu-block > .body{
		padding: 0 2rem 8rem;
	}
	#menu-block > .body > .text-box{
		max-width: 100%;
		margin: 2rem auto 0;
	}
	#menu-block > .body > .text-box > .lead > p{
		text-align: left;
		font-size: 16px;
		font-size: 1.6rem;
	}
	#menu-block > .block > .box{
		width: 100%;
	}
	#menu-block > .block > .box > a{
		margin: 3rem;
	}
	#menu-block > .block > .box > a > p{
		font-size: 36px;
		font-size: 3.6rem;
	}
	#menu-block > .body > .button{
		width: auto;
	}
	#staff-block > .block > div{
		width: auto;
	}
	#acsses-block{
		padding: 6rem 2rem 6rem;
	}
	#acsses-block > .body.flex-box{
		max-width: 100%;
		margin: 4rem auto 0;
	}
	#acsses-block > .body.flex-box > div {
		width: auto;
	}
	#acsses-block > .body.flex-box > div > .calendar-box{
		width: auto;
	}
	#acsses-block > .body.flex-box .map-box{
		margin-top: 2rem;
	}
	#acsses-block > .body.flex-box .map-box iframe{
		width: 100%;
	}
	#acsses-block > .body.flex-box > div:nth-child(2) {
		margin-left: 0;
	}
	#acsses-block > .body.flex-box > div .qr-box{
		max-width: 100%;
		width: auto;
		padding: 2rem 2rem 4rem;
	}
	#acsses-block > .body.flex-box > div .qr-box dl{
		margin-top: 2rem;
	}
		#acsses-block > .body.flex-box > div .qr-box dl dt{
		font-size: 18px;
		font-size: 1.8rem;
	}
	#acsses-block > .body.flex-box > div .qr-box dl dd{
		font-size: 16px;
		font-size: 1.6rem;
	}
	#acsses-block > .body.flex-box > div > .block dl{
		flex-direction: column;
		padding: 1rem 0;
	}
	#acsses-block > .body.flex-box > div > .block dl dt{
		width: auto;
		font-size: 18px;
		font-size: 1.8rem;
	}
	#acsses-block > .body.flex-box > div > .block dl dd{
		margin-left: 0;
		font-size: 16px;
		font-size: 1.6rem;
	}
	#acsses-block > .body.flex-box > div > .calendar-box{
		padding: 3rem 3rem;
	}
	footer{
		padding: 2rem 2rem 2rem;
	}
	.fotter-bottom{
		height: 180px;
	}
	.fotter-bottom img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	footer #footer .copyright {
		margin-top: 0;
	}
	footer #footer .copyright > p{
		font-size: 12px;
		font-size: 1.2rem;
	}

	body.page .main-image, body.category .main-image, body.archive .main-image, body.single .main-image{
		height: 26vh;
	}
	body.page .main-image h2, body.category .main-image h2, body.archive .main-image h2, body.single .main-image h2{
		font-size: 58px;
		font-size: 5.8rem;
	}
	body.menu #menu-page {
		padding: 6rem 2rem 8rem;
	}
	body.menu #menu-page > .body {
		margin-top: 6rem;
	}
	body.menu #menu-page > .body .block+.block {
		margin-top: 6rem;
	}
	body.menu #menu-page > .body .block > .text-box{
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
	body.menu #menu-page > .body .block > .img-box{
		width: auto;
		text-align: center;
	}
	body.menu #menu-page > .body .block.flex-box{
		flex-direction: column-reverse;
	}
	body.menu #menu-page > .body .block.flex-box > .text-box{
		margin-top: 3rem;
	}
	body.menu #menu-page > .body .block.flex-box:nth-child(2){
		flex-direction: column-reverse;
	}
	body.menu #menu-page > .body .block.flex-box:nth-child(2) > .text-box{
		margin-left: 0;
	}
	body.menu #menu-page > .body .block > .text-box > .title{
		font-size: 30px;
	}
	body.menu #menu-page > .body .block > .text-box .menu-box{
		margin-top: 3rem;
	}
	body.menu #menu-page > .body .block > .text-box .menu-box li dl{
		flex-direction: column;
		align-items: baseline;
		padding: 1rem 2rem;
		line-height: 1.5;
	}
	body.menu #menu-page > .body .block > .text-box .menu-box li dl dt{
		font-size: 16px;
		font-size: 1.6rem;
	}
	body.menu #menu-page > .body .block > .text-box .menu-box li dl dd{
		font-size: 16px;
		font-size: 1.6rem;
	}
	body.menu #menu-page > .body .block > .text-box .care-box{
		flex-direction: column;
	}
	body.menu #menu-page > .body .block > .text-box .care-box dt {
		width: auto;
		font-size: 16px;
		font-size: 1.6rem;
	}
	body.menu #menu-page > .body .block > .text-box .care-box dd {
		margin-left: 0;
		margin-top: 1rem;
	}
	body.menu #menu-page > .body .block > .text-box .care-box dd .title{
		font-size: 18px;
		font-size: 1.8rem;
		text-align: center;
	}
	body.menu #menu-page > .body .block > .text-box .care-box dd .text{
		font-size: 16px;
		font-size: 1.6rem;
	}
	body.category .category-page .inner ul li{
		width: auto;
		margin: 6rem auto 0;
	}
	body.category .category-page .inner ul li a {
		padding: 3rem;
	}
	body.category .category-page .inner ul li a .title, body.single .single-page .inner .single-article-box .title{
		font-size: 18px;
		font-size: 1.8rem;
	}
	body.category .category-page .inner ul li a .text-contents > p, body.single .single-page .inner .single-article-box .text-contents > p {
		margin-top: 10px;
	}
	body.single .single-page .inner .single-article-box{
		width: auto;
		margin: 6rem auto 0;
	}
	body.single .single-page .inner .single-article-box{
		padding: 3rem;
	}
	body.staff #staff-page{
		padding: 6rem 2rem 8rem;
	}
	body.staff #staff-page > .body > div.block{
		flex-direction: column-reverse;
	}
	body.staff #staff-page > .body > div.block > div {
		width: auto;
	}
	body.staff #staff-page > .body > div.block .text-box {
		margin-right: 0;
		margin-top: 3rem;
	}
	body.staff #staff-page > .body > div.block .text-box .lead > p{
		font-size: 16px;
		font-size: 1.6rem;
	}
	body.staff #staff-page > .body > div.block .text-box .plofile > ul{
		font-size: 14px;
	}
	body.staff #staff-page > .body > div.block .text-box .plofile {
		margin-top: 2rem;
	}
	body.staff #staff-page > .body > div.block .text-box h2.heading-name span:nth-child(2){
		width: 25px;
		margin: 0 auto;
	}
	body.staff #staff-page > .body > div.block .text-box h2.heading-name span:nth-child(3){
		margin-top: 3px;
	}
	body.staff #staff-page > .body > div.block .text-box h2.heading-name span:nth-child(4){
		padding-bottom: 1rem;
	}
	body.staff #staff-page > .body > div.block .text-box .lead {
		margin-top: 3rem;
	}
	body.shop #shop-page{
		padding: 6rem 2rem 8rem;
	}
	body.shop #shop-page > .body > div.block dl{
		flex-direction: column;
		padding: 2rem 0;
	}
	body.shop #shop-page > .body > div.block dl dt{
		width: auto;
		font-size: 18px;
		font-size: 1.8rem;
	}
	body.shop #shop-page > .body > div.block dl dd{
		margin-left: 0;
		margin-top: 1rem;
		font-size: 16px;
		font-size: 1.6rem;
	}
	body.shop #shop-page > .body > div.block dl:nth-child(1) dd{
		width: 40%;
	}
	body.shop #shop-page > .body > div.map-box {
		margin-top: 8rem;
	}
	body.shop #shop-page > .body > div.map-box .title{
		line-height: 1;
		font-size: 28px;
		font-size: 2.8rem;
	}
	body.shop #shop-page > .body > div.map-box iframe {
		margin-top: 2rem;
		height: 380px;
	}
	body.shop #shop-page > .body > div.map-box .train {
		margin-top: 1rem;
	}


}




@media screen and (max-width:380px){


}