@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;
	}
	h2{
		flex-direction: column;
		font-size:24px;
		font-size:2.4rem;
		align-items: center;
	}
	.inner {
		max-width: 100%;
		width: 100%;
		margin: 0 auto;
		padding:0 20px;
	}
	.button {
		width: auto;
		margin: 0 2rem;
	}
	#header .inner{
		padding: 10px 0;
	}
	#header .inner h1{
		width: 40%;
	}
	#header ul{
		margin-top: 10vh;
	}
	#header ul li+li{
		margin-left: 0;
	}
	#header ul li a{
		color: #fff;
		font-size: 18px;
	}
	#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: #00274f;
		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: #00274f;
		top: 0px;
		z-index: 11;
		height: 100%;
		width: 100%;
	}
	.nav-sp-block ul{
		margin-top: 100px;
	}
	.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-slider
********************/
	div.slider-01 div.slide{
		height: 65vh;
	}
	div.slider-01 div.slide.slick-slide img{
		height: 100%;
		object-fit: contain;
	}
/*div.slider-01 div.slide-01{background-image:url("../images/sp/slider_01.jpg");}
div.slider-01 div.slide-02{background-image:url("../images/sp/slider_02.jpg");}
div.slider-01 div.slide-03{background-image:url("../images/sp/slider_03.jpg");}*/

/*
	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");}
*/

/*******************************
/* TOP-PAGE
*******************************/

	body.home #container {
		padding: 6rem 0 0;
	}
	.home-list > .wrap > div.layout > div.body > div.top-erea > .text-box{
		margin: 0 2rem;
	}
	.home-list > .wrap > div.layout > div.body > div.top-erea > .text-box > .text{
		text-align: left;
	}
	.home-list > .wrap > div.layout > div.body > div.top-erea > .flex-box {
		margin-top: 4rem;
	}
	.home-list > .wrap > div.layout > div.body > div.top-erea > .flex-box > .box {
		width: auto;
	}
	.home-list > .wrap > div.layout > div.body > div.top-erea > .flex-box > .box+.box{
		margin-top: 2rem;
	}
	.home-list > .wrap > div.layout > div.body > div.top-erea > .flex-box > .box .image-box{
		text-align: center;
	}
	.home-list > .wrap > div.layout > div.body > div.top-erea > .text-box > .text span {
		display: inline;
	}
	.home-list > .wrap > div.layout > div.body > div.center-erea{
		margin-top: 8rem;
	}
	.home-list > .wrap > div.layout > div.body > div.center-erea:before{
		width: 100%;
		left: 0;
	}
	.home-list > .wrap > div.layout > div.body > div.center-erea > .flex-box > .text-box {
		max-width: 100%;
		padding: 4rem 0;
	}
	.home-list > .wrap > div.layout > div.body > div.center-erea > .flex-box > .image-box {
		min-width: 100%;
		width: auto;
	}
	.home-list > .wrap > div.layout > div.body > .center-erea .flex-box{
		flex-direction: column-reverse;
	}
	.home-list > .wrap > div.layout > div.body > .center-erea .flex-box .text-box{
		margin: 0 2rem;
	}
	.home-list > .wrap > div.layout{
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		padding-bottom: 6rem;
	}
	.home-list > .wrap > div.layout > div.body > div.bottom-erea {
		margin-top: 0;
	}
	.home-list > .wrap > div.layout > div.body > div.bottom-erea > div+div {
		margin-top: 6rem;
	}
	.home-list > .wrap > div.layout > div.body > .bottom-erea div:nth-child(2) .flex-box{
		flex-direction: column-reverse;
	}
	.home-list > .wrap > div.layout > div.body > div.bottom-erea > div > .flex-box > .text-box{
		max-width: 100%;
		margin: 4rem 2rem 2rem;
	}
	.home-list > .wrap > div.layout > div.body > div.bottom-erea > div > .flex-box > .text-box > .button{
		margin-top: 6rem;
	}
	.home-list-item > .wrap > div.layout {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		padding: 6rem 2rem 8rem;
	}
	.home-list-item > .wrap > div.layout > div.list-block > ul.list > li{
		width: auto;
		margin-left: 0;
	}
	.home-list-item > .wrap > div.layout > div.list-block > ul.list > li+li{
		margin-top: 3rem;
	}
	.home-list-item > .wrap > div.layout > div.list-block > ul.list > li:nth-child(n+4) {
		margin-top: 3rem;
	}
	.home-list-item > .wrap > div.layout > div.list-block > ul.list > li .item_text{
		margin-top: 2rem;
	}
	.home-list-item > .wrap > div.layout > div.list-block > ul.list > li .item_get .more > a{
		margin-top: 3rem;
	}
	.home-list-item > .wrap > div.layout > div.button-box {
		margin-top: 6rem;
	}
	.home-list-item > .wrap > div.layout > div.button-box a {
		width: auto;
		margin: 0;
	}
	#footer > .wrap > div.layout {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		padding: 6rem 0 2rem;
	}
	#footer > .wrap > div.layout .footer-bottom {
		margin-top: 0;
	}
	#footer > .wrap > div.layout .copyright {
		text-align: center;
		margin-top: 3rem;
	}
	.scrollTop{
		z-index: 10;
	}


	body.page .main-image, body.category .main-image, body.archive .main-image, body.single .main-image{
		height: 180px;
	}
	body.items .home-list-item > .wrap > .layout > .list-block {
		margin-top: 6rem;
	}
	body.item .welcart_wc_item_single > .wrap > .layout{
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		padding: 6rem 2rem 2rem;
	}
	body.item .welcart_wc_item_single > .wrap > .layout > .body > .item_photos{
		margin-top: 6rem;
	}
	body.item .welcart_wc_item_single > .wrap > .layout > .body > .item_detail .head h2.heading .sub-titile{
		margin-left: 0;
		margin-top: 1rem;
	}
	body.item .welcart_wc_item_single > .wrap > .layout > .body > .item_overview .skuform .cart{
		margin-top: 1rem;
	}
	body.item .welcart_wc_item_single > .wrap > .layout > .body > .item_overview .skuform .cart input[type=text]{
		width: 20%;
		margin-left: 1rem;
	}
	body.item .welcart_wc_item_single > .wrap > .layout > .body > .item_overview .skuform .cart .button{
		display: block;
		width: 100%;
		margin-left: 0;
	}
	body.item .welcart_wc_item_single > .wrap > .layout > .body > .item_overview .skuform .cart .button input[type=submit]{
		width: 100%;
		margin-top: 2rem;
	}

	body.hexagram .hexagram-box > .wrap > .layout{
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		padding: 6rem 2rem 2rem;
	}
	body.hexagram .hexagram-box > .wrap > .layout > .head > .text{
		margin: 4rem 2rem 0;
	}
	body.hexagram .hexagram-box > .wrap > .layout > .body {
		margin-top: 6rem;
	}
	body.hexagram .hexagram-box > .wrap > .layout > .body > .flex-box {
		margin-top: 8rem;
	}
	body.hexagram .hexagram-box > .wrap > .layout > .body > .flex-box .box {
		width: auto;
	}
	body.hexagram .hexagram-box > .wrap > .layout > .body > .flex-box .box+.box{
		margin-top: 3rem;
	}
	body.hexagram .hexagram-box > .wrap > .layout > .body > .flex-box .box .text-box > .title{
		font-size: 24px;
		font-size: 2.4rem;
	}
	body.hexagram .hexagram-box > .wrap > .layout > .body > .flex-box .box .text-box > .text{
		margin: 2rem 2rem 0;
	}
	body.hexagram .hexagram-box > .wrap > .layout .button-box {
		margin-top: 8rem;
	}


	body.flower .flower-box > .wrap > .layout{
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		padding: 6rem 2rem 2rem;
	}
	body.flower .flower-box > .wrap > .layout > .head > .text{
		margin: 4rem 2rem 0;
	}
	body.flower .flower-box > .wrap > .layout > .body {
		margin-top: 6rem;
	}
	body.flower .flower-box > .wrap > .layout > .body > .block {
		margin-top: 8rem;
	}
	body.flower .flower-box > .wrap > .layout > .body > .block .box .text-box .title{
		font-size: 24px;
		font-size: 2.4rem;
	}
	body.flower .flower-box > .wrap > .layout > .body > .block .box > .text-box ul {
		max-width: 100%;
		margin: 4rem auto 0;
	}
	body.flower .flower-box > .wrap > .layout > .body > .block .box > .text-box ul li+li {
		margin-top: 3rem;
	}
	body.flower .flower-box > .wrap > .layout > .body > .block .box > .text-box ul li dl dt{
		text-align: center;
	}
	body.flower .flower-box > .wrap > .layout > .body > .block .box > .text-box ul li dl dd{
		margin-top: 1rem;
	}
	body.flower .flower-box > .wrap > .layout .button-box {
		margin-top: 8rem;
	}
	body.flower .flower-box > .wrap > .layout .button-box a{
		margin: 0;
	}



	body.contact .contact-box > .wrap > .layout{
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		padding: 6rem 2rem 0;
	}
	body.contact .contact-box > .wrap > .layout > .body {
		margin-top: 4rem;
	}
	body.contact .contact-box > .wrap > .layout > .body .block{
		padding: 3rem 0 ;
	}
	body.contact .contact-box > .wrap > .layout > .body .block .tel{
		width: auto;
	}
	body.contact .contact-box .formblock {
		width: auto;
		margin: 40px auto 0;
	}
	body.contact .contact-box .formblock dl{
		flex-direction: column;
	}
	body.contact .contact-box .formblock dl:last-of-type {
		border-bottom: none;
	}
	body.contact .contact-box .formblock dl+dl {
		margin-top: 30px;
	}
	body.contact .contact-box .formblock dl dt{
		width: auto;
		padding: 10px;
	}
	body.contact .contact-box .formblock dl > dd{
		width: auto;
		margin-top: 10px;
		text-align: center;
		padding: 10px 0 0;
	}
	body.contact .contact-box .formblock input[type="submit"]{
		width: 100%;
	}
	body.contact .contact-box .formblock dl dd input[type="text"], body.contact .contact-box .formblock dl dd input[type="email"], body.contact .contact-box .formblock dl dd input[type="tel"]{
		width: 100%;
	}
	body.contact .contact-box .formblock dl dd textarea{
		width: 100%;
	}


	body.law .law-box > .wrap > .layout > .body > .block > div table tr th,body.law .law-box > .wrap > .layout > .body > .block > div table tr td{
		display: block;
		width: 100%;
	}
	body.law .law-box > .wrap > .layout > .body > .block > div table tr th{
		padding-bottom: 0;
	}

}