@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{
		margin: 60px auto 0;
		font-size: 20px;
		font-size: 2.0rem;
	}
	.inner {
		max-width: 100%;
		width: 100%;
		margin: 0 auto;
		padding:0 20px;
	}
	.button {
		width: 100%;
		margin: 20px auto 0;
		padding: 2.5rem 0;
	}
	.column02, .column03, .column04, .column05{
		flex-direction: column;
	}
	.column02 > div {
		width: auto;
	}
	h2{
		font-size: 30px;
	}
	h2.long{
		background: url(images/sp/title-bk01.png) no-repeat center;
		background-size: contain;
		padding: 80px 0px;
	}
	h2.bk-blue{
		background: url(images/sp/title-bk03.png) no-repeat center;
		background-size: contain;
		padding: 80px 0px;
	}
	h3 {
		font-size: 26px;
		line-height: 1.5;
	}
	#menubtn{
		position: fixed;
		height: 24px;
		width: 30px;
		display: inline-block;
		box-sizing: border-box;
		z-index: 20;
		right: 16px;
		top: 16px;
	}
	#menubtn div{
		position: absolute;
		left: 0;
		height: 2px;
		width: 30px;
		background-color: #fff;
		display: inline-block;
		box-sizing: border-box;
	}
	#menubtn div:nth-of-type(1){
		top: 0;
	}
	#menubtn div:nth-of-type(2){
		top: 11px;
	}
	#menubtn div:nth-of-type(3){
		bottom: 0;
	}
	#menubtn.is-active div{
		background-color: #fff;
	}
	#menubtn.is-active div:nth-of-type(1){
		top: 0;
		transform: translateY(10px) rotate(-45deg);
	}
	#menubtn.is-active div:nth-of-type(2){
		opacity: 0;
	}
	#menubtn.is-active div:nth-of-type(3){
		bottom: 0;
		transform: translateY(-12px) rotate(45deg);
	}

	.nav-sp-block{
		position: fixed;
		background: #000;
		top: 0px;
		z-index: 9;
		height: 100%;
		width: 100%;
	}
	.nav-sp-block ul{
		margin-top: 100px;
	}
	.nav-sp-block ul li{
		border-bottom: 1px solid #fff;
	}
	.nav-sp-block ul li a{
		display: block;
		padding: 20px 30px;
		color: #fff;
	}

/*******************
 * main-slider
********************/
	.main-text{
		display: flex;
		justify-content: center;
		flex-direction: column;
		padding: 2rem 0;
		font-size: 30px;
	}
	.main-text .text01{
		background: url(images/text-bk02.png) no-repeat center;
		background-size: contain;
		display: flex;
		justify-content: center;
		padding: 0px 20px 0px 20px;
	}
	.main-text .text02{
		background: url(images/text-bk01.png) no-repeat center;
		background-size: contain;
		padding: 0px 38px 0px 30px;
		text-align: inherit;
		display: flex;
		justify-content: center;
	}

	div.slider-01 div.slide{
		max-height: 100%;
		height: 60vh;
	}
	div.slider-01 div.slide-01{
		background-position: -240px 0;
	}
	div.slider-01 div.slide-02{
		background-position: -170px 0;
	}
	div.slider-01 div.slide-03{
		background-position: -460px 0;
	}


/*******************************
/* main
*******************************/
	#erea01 .erea-top .inner {
		padding: 20px 2rem 100px;
	}
	#erea01 .erea-top .inner .text{
		text-align: left;
		margin-top: 30px;
	}
	#erea01 .erea-bottom{
		background: url(images/sp/erea-puton01.png) no-repeat left bottom;
		background-size: contain;
		margin-top: 18rem;
	}
	#erea01 .erea-bottom .inner{
		padding: 0px 0 120px;
	}
	#erea01 .erea-bottom .inner h2 span{
		font-size: 20px;
	}
	#erea01 .erea-bottom .inner .text{
		margin: 12rem 4rem 0 2rem;
		text-align: left;
	}
	#erea02{
		padding-top: 22rem;
	}
	#erea02 .inner {
		padding: 60px 2rem 100px;
	}
	#erea02 .inner section > .text{
		margin-top: 20px;
	}
	#erea02 .inner #works-erea{
		margin-top: 40px;
	}
	#erea03{
		margin-top: -2rem;
	}
	#erea03 .erea-top .inner {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	#erea03 .erea-top .inner section+section {
			margin-top: 60px;
	}
	#erea03 .erea-top .inner section:nth-child(1) .column02{
					flex-direction: column-reverse;
	}
	#erea03 .erea-top .inner .column02 > div {
			width: auto;
	}
	#erea03 .erea-top .inner .column02 .txt-box h3 {
		margin-top: 30px;
	}
	#erea03 .erea-top .inner .column02 .txt-box .sub-title{
		width: auto;
		margin-top: 4rem;
	}
	#erea03 .erea-bottom{
		background: url(images/sp/erea-puton04.png) no-repeat right top;
		background-size: contain;
		margin-top: 4rem;
	}
	#erea03 .erea-bottom .inner{
		padding: 0 2rem 20px;
	}
	#erea03 .erea-bottom .inner .text{
		margin-top: 100px;
		text-align: left;
	}
	#erea03 .erea-bottom .inner .button {
		margin-top: 20px;
	}
	#erea04 .inner{
		padding: 60px 2rem 100px;
	}
	#erea04 .inner .news-area{
		margin-top: 40px;
	}
	#erea04 .inner .news-area li {
		width: auto;
	}
	#footer .inner .footer-top{
		display: none;
	}
	#footer .inner .footer-bottom {
		margin-top: 30px;
	}
	#footer .inner .footer-bottom .tell{
		width: auto;
	}


	body.page .main-image, body.category .main-image, body.single .main-image{
		height: 480px;
	}
	body.page .main-image h2, body.category .main-image h2, body.single .main-image h2{
		height: 140px;
	}
	body.page .title-area > .text, body.category .title-area > .text, body.single .title-area > .text{
		margin-top: 20px;
	}
	body.page .title-area h3, body.category .title-area h3, body.single .title-area h3{
		font-size: 20px;
	}
	#inner-page-bottom .inner > h2{
		background-size: contain;
	}
	#inner-page-bottom .inner > .column02 > div {
		width: auto;
	}
	#inner-page-bottom .inner > .column02 .txt-box{
		margin-top: 30px;
	}
	#inner-page-bottom .inner > .column02 .txt-box .title{
		background-position: center 90%;
		font-size: 28px;
		text-align: center;
	}
	#inner-page-bottom .inner > .column02 .txt-box .button{
		width: auto;
	}
	#inner-page-bottom .inner > .column02 .txt-box:nth-child(2) .text{
		font-size: 24px;
	}
	#inner-page-bottom .inner > .column02 .txt-box:nth-child(2) .text a{
		display: inline-block;
		color: #fff;
	}


	body.caulking .main-image{
		background: url(images/caulking/main-spimage.png) no-repeat;
		background-size: contain;
	}
	body.caulking .inner-contents .column02{
		flex-direction: column-reverse;
	}
	body.caulking .inner-contents .column02 > div {
		width: auto;
	}
	body.caulking .inner-contents .column02 .sub-title{
		width: auto;
		margin-top: 30px;
	}
	body.caulking #inner-erea02 {
		margin-top: 60px;
	}
	body.caulking #inner-erea03{
		margin-top: 60px;
		padding-bottom: 80px;
	}


	body.works .main-image, body.category-works .main-image, body.contact .main-image, body.category .main-image, body.single .main-image{
		background: url(images/works/main-spimage.png) no-repeat;
		background-size: contain;
	}
	#category-works-erea .category-works-box {
		margin-top: 20px;
	}
	#category-works-erea .category-works-box > .title.bk-blue, #category-slide-erea .title-area > .title.bk-blue{
		background: url(images/sp/title-bk03.png) no-repeat center;
		background-size: contain;
		padding: 90px 0px;
	}
	#category-works-erea .category-works-box .column04 {
		margin-top: 40px;
	}
	#category-works-erea .category-works-box .column04 li {
		width: auto;
		margin-left: 0;
	}
	#category-works-erea .category-works-box .column04 li+li{
		margin-top: 4rem;
	}
	#category-works-erea .category-works-box .column04 li .image{
		width: auto;
	}
	#category-slide-erea {
		padding-bottom: 80px;
	}
	#category-slide-erea .inner .block {
		margin-top: 40px;
	}
	#single-works-erea{
		padding-bottom: 80px;
	}
	#single-works-erea .single-works-box > .column02 div{
		padding: 10px;
		width: auto;
	}
	#single-works-erea .single-works-box > .column02 div+div {
		border-left: none;
	}
	#single-works-erea .single-works-box > .column02 div .title{
		font-size: 24px;
	}
	#single-works-erea .single-works-box .sliderarea {
		width: 100%;
		margin: 60px auto 0;
	}

	#single-works-erea .single-works-box  .slick-next{
		right: 0px;
	}
	#single-works-erea .single-works-box  .slick-prev {
		left: 0;
		z-index: 10;
	}
	body.company .main-image{
		background: url(images/company/main-spimage.png) no-repeat;
		background-size: contain;
	}
	body.company #inner-erea01 {
		padding-bottom: 80px;
	}
	body.company #inner-erea01 .inner .text {
		text-align: left;
		font-weight: bold;
		margin-top: 0px;
		line-height: 2;
	}
	body.company #inner-erea01 table{
		width: auto;
		margin: 40px auto 0;
	}
	body.company #inner-erea01 table tr th{
		width: auto;
		display: block;
	}
	body.company #inner-erea01 table tr td{
		width: auto;
		display: block;
		padding: 20px 0 20px;
		text-align: center;
	}


	body.recruit .main-image{
		background: url(images/recruit/main-spimage.png) no-repeat;
		background-size: contain;
	}
	body.recruit #inner-erea01 {
		margin-top: 0;
	}
	body.recruit #inner-erea03 {
		margin-top: 80px;
		padding-bottom: 80px;
	}
	body.recruit .inner-contents .title.bk-blue{
		background: url(images/sp/title-bk03.png) no-repeat center;
		background-size: contain;
		padding: 80px 0px;
	}
	body.recruit .inner-contents table{
		width: auto;
	}
	body.recruit .inner-contents table tr th{
		width: auto;
		display: block;
	}
	body.recruit .inner-contents table tr td{
		width: auto;
		display: block;
		padding: 20px 0px 20px 0px;
		text-align: center;
	}

	body.contact #inner-erea01{
		padding-bottom: 80px;
	}
	body.contact #inner-erea01 .formblock {
		width: auto;
		margin: 40px auto 0;
	}
	body.contact #inner-erea01 .formblock dl{
		flex-direction: column;
	}
	body.contact #inner-erea01 .formblock dl+dl {
		margin-top: 20px;
	}
	body.contact #inner-erea01 .formblock dl dt{
		width: auto;
		padding: 10px;
	}
	body.contact #inner-erea01 .formblock dl dd{
		width: 100%;
		margin-left: 0;
	}
	body.contact #inner-erea01 .formblock dl dd input[type="text"], body.contact #inner-erea01 .formblock dl dd input[type="email"], body.contact #inner-erea01 .formblock dl dd input[type="tel"], body.contact #inner-erea01 .formblock dl dd input[type="email"],body.contact #inner-erea01 .formblock dl dd textarea{
		width: 100%;
		height: auto;
	}
	body.contact #inner-erea01 .formblock dl dd textarea{
		width: 100%;
	}
	body.contact #inner-erea01 .formblock .button {
		width: 100%;
	}
	body.contact .inner .button-erea{
		margin-top: 40px;
	}
	body.contact #inner-erea01 .button-erea input[type="submit"],body.contact #inner-erea01 input[type="number"]{
		width: 100%;
		padding: 2.5rem 0;
	}


	body.category #theme-archive .inner .news-area li {
		width: auto;
	}
	body.category #theme-archive .inner .news-area li a .image{
		text-align: center;
	}
	body.single .single-area .inner {
		padding: 80px 20px;
	}
	body.single .single-area .inner .post-date{
		width: auto;
	}


}




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

}