@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{
		font-size: 32px;
		font-size: 3.2rem;
	}
	h2 span{
		padding-bottom: 1rem;
	}
	#header .inner {
		max-width: 100%;
		padding: 0;
	}
	#header.fixed{
		display: none;
	}
	.button{
		width: auto;
		font-size: 18px;
		font-size: 1.8rem;
		padding: 2rem 0;
	}


/* #menu */

	#menu{
		position:fixed;
		z-index:20;
		right: 10px;
		top: 10px;
		z-index:20;
		width: 56px;
		height: 56px;
		background:#0510a1;
		border-radius:50%;
		transition:all 0.6s ease;
	}
	body.menu-open #menu{
		background:transparent;
	}
	#menu div.menu-icon{
		position:relative;
		z-index:500;
		width: 56px;
		height: 56px;
		cursor:pointer;
	}
	#menu div.menu-icon > span{
		position:absolute;
		left:14px;
		width:30px;
		height:1px;
		background:#fff;
		transition:all 0.4s;
	}
	#menu div.menu-icon > span:nth-child(1){top:16px;}
	#menu div.menu-icon > span:nth-child(2){top:24px;}
	body.menu-open #menu div.menu-icon > span:nth-child(1),
	body.menu-open #menu div.menu-icon > span:nth-child(2){
		top: 16px;
		left: 16px;
	}
	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:#fff;
	}
	#menu div.menu-icon > i{
		position:absolute;
		bottom:13px;
		left:50%;
		transform:translateX(-50%);
		color:#fff;
		font-size:11px;
		font-size:1.1rem;
		font-weight:400;
		line-height:1;
		opacity:1;
		width: 100%;
		text-align: center;
	}
	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:#fff;
	}
	#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:#fff;
		padding:1.8em 2.4em 4.2em 1.8em;
		margin:0 auto;
		background: #000;
		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 #fff;
		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;
		color: #fff;
	}



	/*******************
 * main-slider
********************/
	div.slider-01 div.slide{
		height: 75vh;
	}
	div.slider-01 div.slide.slick-slide img{
		height: 100%;
		object-fit: contain;
	}
	div.slider-01 div.slide-01{
		background-position: -54rem;
	}
	div.slider-01 div.slide-02{
		background-position: -53rem;
	}
	div.slider-01 div.slide-03{
		background-position: -53rem;
	}
	#main-box:after{
		width: 80%;
		height: 7em;
		left: 1rem;
		bottom: -2rem;
	}
	#main-box div.slider-text:after{
		width: 50%;
	}
	#main-box div.slider-text > div, #inner-main-box div.slider-text > div{
		padding: 0 2rem;
	}
	#main-box div.slider-text .title, #inner-main-box div.slider-text h2{
		line-height: 1.2;
		margin-top: 4rem;
		font-size: 48px;
		font-size: 4.8rem;
	}
	#main-box div.slider-text .sub_title, #inner-main-box div.slider-text .sub_title {
		font-size: 16px;
		font-size: 1.6rem;
	}



/*******************************
/* main
*******************************/
	#container.inner-page {
		padding-bottom: 8rem;
	}
	body.page #inner-main-box, body.category #inner-main-box, body.archive #inner-main-box, body.single #inner-main-box{
		height: 75vh;
	}
	#items-block {
		padding: 6rem 2rem 8rem;
	}
	#items-block div.flex-box{
		flex-direction: column-reverse;
	}
	#items-block div.flex-box > div {
		width: auto;
	}
	#items-block div.flex-box > div.img-box {
		margin-left: 0;
	}
	#items-block div.flex-box > div.text-box {
		margin-top: 4rem;
	}
	#items-block div.flex-box > div.text-box > p {
		line-height: 1.8;
		margin-top: 3rem;
	}
	#items-block div.flex-box > div.text-box > .button {
		margin-top: 4rem;
	}
	#info-block{
		padding: 0 2rem;
	}
	#info-block div.body > div.flex-box > .box {
		width: auto;
		margin-top: 2rem;
	}
	#info-block div.body > div.flex-box > .box > .text {
		margin-top: 1rem;
	}
	#info-block div.body > div.flex-box {
		margin-top: 0;
	}
	#info-block div.body > div.flex-box > .box {
		width: auto;
		margin-top: 3rem;
	}
	#info-block div.body > div.text-box{
		margin-top: 3rem;
	}
	#info-block div.body > div.button-box > .button {
		width: auto;
		margin-top: 4rem;
	}
	.roll-box {
		margin: 8rem 0;
	}
	.d-demo__item {
		width: calc(100vw / 2);
		margin: 0 1rem;
	}
	#promise-block {
		padding-bottom: 12rem;
		padding: 0 2rem 6rem;
	}
	#promise-block section .head > .title{
		font-size: 32px;
		font-size: 3.2rem;
	}
	#promise-block section .body div.flex-box {
		margin-top: 6rem;
		align-items: center;
	}
	#promise-block section .body div.flex-box div.icon-box {
		min-width: auto;
		width: 35%;
	}
	#promise-block section .body div.flex-box:nth-child(2) div.icon-box{
		width: 20%;
	}
	#promise-block section .body div.flex-box div.text-box{
		margin-top: 2rem;
	}
	#promise-block section .body div.flex-box div.text-box .number{
		font-size: 24px;
		font-size: 2.4rem;
		text-align: center;
	}
	#promise-block section .body div.flex-box div.text-box .round{
		padding: 0.5rem 1.2rem;
		vertical-align: middle;
		font-size: 16px;
		font-size: 1.6rem;
	}
	#promise-block section .body div.flex-box div.text-box .number span:nth-child(2){
		margin-left: 1rem;
		vertical-align: middle;
	}
	#bunner-block{
		padding: 0 2rem;
	}
	#bunner-block section .head{
		padding: 4rem 0 0;
	}
	#bunner-block section .head > .title{
		font-size: 24px;
		font-size: 2.4rem;
	}
	#bunner-block section .body{
		margin-top: 2rem;
		padding: 0 0 4rem;
	}
	#bunner-block section .body > .tell{
		font-size: 36px;
		font-size: 3.6rem;
	}
	#bunner-block section .head > .txt{
		font-size: 16px;
		font-size: 1.6rem;
	}
	#bunner-block section .body > p:nth-child(2){
		margin-top: 2rem;
		font-size: 16px;
		font-size: 1.6rem;
	}
	#bunner-block section .body > .tell span img{
		width: 10%;
	}
	#footer .inner {
		padding: 4rem 2rem 2rem;
	}
	#footer .inner > .footer-top{
		display: none;
	}
	#footer .inner > .footer-bottom {
		margin-top: 0;
	}
	#footer .inner > .footer-bottom .c-box{
		font-size: 16px;
		font-size: 1.6rem;
	}
	#footer .inner > .footer-bottom .c-box > p:nth-child(1){
		font-size: 24px;
		font-size: 2.4rem;
	}
	#footer .inner > .footer-bottom .c-box .tell{
		font-size: 24px;
		font-size: 2.4rem;
	}
	#footer .inner > .footer-bottom .detail-box{
		margin-top: 1rem;
		font-size: 14px;
		font-size: 1.4rem;
	}
	.copyright{
		margin-top: 3rem;
		font-size: 12px;
		font-size: 1.2rem;
	}



	body.clearing #inner-main-box div.slider-text:after{
		width: 100%;
		height: 4em;
		left: 1rem;
		bottom: -1rem;
	}
	body.clearing #clearing-block section:nth-child(1) div.flex-box{
		padding: 6rem 2rem 8rem;
	}
	body.clearing #clearing-block section:nth-child(1) div.flex-box > div {
		width: auto;
	}
	body.clearing #clearing-block div.flex-box > div.text-box {
		margin-top: 4rem;
	}
	body.clearing #clearing-block section:nth-child(1) div.flex-box > div.text-box > p{
		margin-top: 3rem;
	}
	body.clearing #clearing-block section:nth-child(1) div.flex-box > div.img-box{
		margin-left: 0;
	}
	body.clearing #clearing-block div.flex-box{
		flex-direction: column-reverse;
	}
	body.clearing #clearing-block div.flex-box > div {
		width: auto;
	}
	body.clearing #clearing-block section:nth-child(2) div.body{
		margin: 0 2rem 0;
	}
	body.clearing #clearing-block section:nth-child(2) div.body div.flex-box div.text-box{
		margin-top: 3rem;
		margin-left: 0;
	}
	body.clearing #clearing-block section:nth-child(2) div.body div.flex-box div.img-box > p{
		text-align: center;
	}
	body.clearing #clearing-block section:nth-child(2) div.body div.flex-box div.img-box > p img{
		width: 60%;
	}
	body.clearing #clearing-block section div.body .box .title{
		font-size: 24px;
		font-size: 2.4rem;
	}
	body.clearing #clearing-block section div.body .box .title .number{
		font-size: 36px;
		font-size: 3.6rem;
	}
	body.clearing #clearing-block section div.body .box{
		margin: 2rem 0;
	}
	body.clearing #clearing-block section div.body .box ul.flex-box{
		margin-top: 1rem;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	body.clearing #clearing-block section div.body .box ul.flex-box li{
		width: calc(100% / 2 - 10px);
	}
	body.clearing #clearing-block section div.body .box ul.flex-box li+li {
		margin-left: 0;
	}
	body.clearing #clearing-block section div.body .box ul.flex-box li .icon-img{
		width: 70%;
		margin: 0 auto;
	}
	body.clearing #clearing-block section div.body .box ul.flex-box li .txt{
		font-size: 14px;
		font-size: 1.4rem;
	}
	body.clearing #clearing-block section div.body .button-box > .button {
			width: auto;
	}
	body.clearing #clearing-block section div.body .box:nth-child(4) ul.flex-box li {
			width: calc(100% / 2 - 10px);
	}
	body.clearing #clearing-block section div.body .box:nth-child(4) ul.flex-box li .txt span{
		margin-top: 1rem;
		font-size: 12px;
		font-size: 1.2rem;
	}
	body.clearing #clearing-block section div.body .box:nth-child(4) ul.flex-box li:nth-child(n+3){
		margin-top: 1rem;
	}
	body.clearing #clearing-block section div.body .button-box {
		margin-top: 8rem;
		margin: 4rem 2rem 0rem;
	}


	body.company #inner-main-box div.slider-text:after{
		width: 100%;
		height: 4em;
		left: 1rem;
		bottom: -1rem;
	}
	body.company #company-block {
		padding-top: 10rem;
		padding: 6rem 2rem 0rem;
	}
	body.company #company-block section:nth-child(2){
		margin-top: 8rem;
	}
	body.company #company-block .body {
		margin-top: 6rem;
	}
	body.company #company-block section:nth-child(2) .body {
		margin-top: 2rem;
	}
		body.company #company-block section:nth-child(2) .body iframe{
				width: 100%;
	}
	body.company #company-block .body > .table-box table tr th{
		width: auto;
		display: block;
	}
	body.company #company-block .body > .table-box table tr td{
		display: block;
		padding: 1rem 1rem;
		border-left: 1px solid #0510a1;
	}



}




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

}