@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;
		padding: 16px 10px 16px 0;
	}
	header .inner{
		padding: 10px 0
	}
	#header .inner ul{
		display: none;
	}
	#header .inner > a{
		width: 40%;
		margin-left: 2rem;
	}
	#header .inner > a img{
		margin-top: 0;
	}
	h2{
		font-size: 30px;
	}
	h3{
		font-size: 24px;
	}


/* #menu */

	#menu{
		position:fixed;
		z-index:20;
		right: 10px;
		top: 10px;
		z-index:20;
		width: 60px;
		height: 60px;
		background:#884407;
		border-radius:50%;
		transition:all 0.6s ease;
	}
	body.menu-open #menu{
		background:transparent;
	}
	#menu div.menu-icon{
		position:relative;
		z-index:500;
		width: 60px;
		height: 60px;
		cursor:pointer;
	}
	#menu div.menu-icon > span{
		position:absolute;
		left:0;
		right: 0;
		margin: auto;
		width:30px;
		height:1px;
		background:#fff;
		transition:all 0.4s;
	}
	#menu div.menu-icon > span:nth-child(1){top:20px;}
	#menu div.menu-icon > span:nth-child(2){top:28px;}
	body.menu-open #menu div.menu-icon > span:nth-child(1),
	body.menu-open #menu div.menu-icon > span:nth-child(2){
		top: 20px;
		left: 4px;
	}
	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{
		width: 100%;
		text-align: center;
		position:absolute;
		bottom:12px;
		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: #f5b00b;
		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;
	}

	#cont01 .inner {
		padding: 40px 2rem 60px;
	}
	#cont01 .inner .box-area{
		flex-direction: column;
	}
	#cont01 .inner .box-area .box{
		width: auto;
	}
	#cont01 .inner .box-area .box .image{
		margin: 0 auto;
	}
	#cont01 .inner .box-area .box+.box {
		margin-left: 0;
		margin-top: 4rem;
	}
	#cont01 .inner .box-area .box .post-textarea {
		margin-top: 10px;
	}
	#cont02 .inner{
		padding: 40px 2rem 60px;
	}
	#cont02 .inner .text{
		margin-top: 20px;
		text-align: left;
	}
	#cont03{
		background-position: center;
	}
	#cont03 .inner{
		padding: 40px 2rem 60px;
	}
	#cont03 .inner .border{
		padding: 40px 2rem;
	}
	#cont03 .inner .border h3 {
		margin-top: 20px;
	}
	#cont04 .inner {
		padding: 60px 2rem 80px;
	}
	#cont04 .colume2 .box:nth-child(2) {
		width: auto;
		margin-left: 0;
		margin-top: 4rem;
	}
	#cont04 .colume2 .box:nth-child(2) .block+.block {
		margin-top: 30px;
	}
	#cont06 .inner{
		padding: 0 0 80px 0;
	}
	#cont06 .inner .box-area{
		display: block;
		flex-wrap: nowrap;
		gap: 0;
	}
	#cont06 .inner .box-area .box{
		display: block;
	}
	#cont06 .inner .box-area .box+.box{
		margin-top: 4rem;
	}
	#cont06 .inner .box-area .box .button{
		width: 80%;
	}
	#footer .inner{
		padding: 20px 0 10px;
	}
	#footer .inner .footer-top{
		display: none;
	}
	#footer .inner .footer-bottom > .colume2 {
		justify-content: center;
		align-items: center;
	}
	#footer .inner .footer-bottom > .colume2 p{
		font-size: 36px;
		margin-top: 0;
	}
	#footer .inner .footer-bottom > .colume2 .tell{
		font-size: 36px;
	}
	#footer .inner .footer-bottom > .colume2 .tell > a{
		color: #fff;
	}
	#footer .inner .footer-bottom > .colume2 .fax {
		margin-left: 0;
	}
	#footer .inner .footer-bottom >  img{
		width: 60%;
	}
	#footer .inner > .copyright p{
		margin-top: 20px;
	}


	body.page #container.inner-page .inner{
		padding: 60px 0 80px;
	}
	body.category #container.inner-page .inner{
		padding: 60px 0 80px;
	}
	body.category #container.inner-page .inner .category-area{
		flex-direction: column;
		margin-bottom: 0;
	}
	body.category #container.inner-page .inner .category-area li{
		width: auto;
		margin-left: 0;
	}
	body.category #container.inner-page .inner .category-area li+li{
		margin-top: 40px;
	}
	body.category #container.inner-page .inner .category-area li .image img{
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	body.category #container.inner-page .inner .category-area li:nth-child(n+4){
		margin-top: 40px;
	}
	body.single #container.inner-page .inner {
		padding: 60px 0 80px;
	}
	#itempage div.itempage-area > div.block {
		flex-direction: column;
	}
	#itempage div.itempage-area > div.block > div.box {
		width: auto;
	}
	body.single .storycontent{
		margin: 4rem 2rem 0;
	}
	body.single .item-title{
		font-size: 24px;
	}
	body.single .itempage-area .suk-common .post-content > div >p {
		margin-top: 1rem;
	}
	dl.type-01.flex-box dt{
		-webkit-flex: 0 1 auto;
		flex: 0 1 auto;
		max-width: 100%;
	}
	dl.type-01.flex-box dd{
		-webkit-flex: 0 1 auto;
		flex: 0 1 auto;
		max-width: 100%;
	}
	dl.type-01.flex-box dt, dl.type-01.flex-box dd{
		padding: 1.2em 1.8em;
	}
	body.guide #erea02.cont {
		margin-top: 50px;
	}
	body.guide #erea03.cont{
		margin-top: 40px;
		padding: 0 1.8em;
	}
	body.contact .formblock {
		width: 90%;
		margin: 40px auto 0;
	}
	body.contact #container.inner-page #inner-cont01 .inner{
		padding-top: 4rem;
		padding-bottom: 0;
	}
	body.contact #inner-cont01 .formblock dl{
		flex-direction: column;
	}
	body.contact #inner-cont01 .formblock dl+dl {
		margin-top: 20px;
	}
	body.contact #inner-cont01 .formblock dl dt{
		width: auto;
		padding: 0 10px 4px;
	}
	body.contact #inner-cont01 .formblock dl dd{
		width: 100%;
		margin-left: 0;
	}
	body.contact #inner-cont01 .formblock dl dd input[type="text"], body.contact #inner-cont01 .formblock dl dd input[type="email"], body.contact #inner-cont01 .formblock dl dd input[type="tel"], body.contact #inner-cont01 .formblock dl dd input[type="email"],body.contact #inner-cont01 .formblock dl dd textarea{
		width: 100%;
		height: auto;
	}
	body.contact #inner-cont01 .formblock .button {
		width: 100%;
		margin: 50px auto 0;
	}
	body.contact #inner-cont01 .button-erea input[type="submit"],body.contact #inner-cont01 input[type="number"]{
		width: 100%;
	}

}




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

}