@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

	L-style
	http://www./

*/


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

	.pc-block{
		display: none;
	}
	.sp-block{
		display: block;
	}
	.inner{
		padding: 0;
	}
	.head > h2.heading{
		font-size: 36px;
		font-size: 3.6rem;
	}
	.head > .sub-title > .border-b,.head > .sub-title > .border-w{
		padding-bottom: 4px;
	}
	.button{
		width: auto;
	}


/*******************
 * header
********************/
	#header.fixed{
		display: none;
	}
	div.slider-01 div.slide{
		min-height: 680px;
		height: 100%;
	}
	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");}
	div.slider-01 div.slide-04{background-image:url("../images/sp/slider_bg_04.jpg");}

	#main-box > .slider-text{
		right: 4rem;
		left: 1rem;
		top: 40rem;
	}
	#main-box > .slider-text > div .title{
		line-height: 1.3;
		font-size: 36px;
		font-size: 3.6rem;
	}
	#main-box > .slider-text > div .sub_title{
		line-height: 1.3;
		margin-top: 2rem;
		font-size: 24px;
		font-size: 2.4rem;
	}


/* #menu */

	#menu{
		position:fixed;
		z-index:20;
		right: 10px;
		top: 10px;
		z-index:20;
		width:72px;
		height:72px;
		background:#2262c3;
		border-radius:50%;
		transition:all 0.6s ease;
	}
	body.menu-open #menu{
		background:transparent;
	}
	#menu div.menu-icon{
		position:relative;
		z-index:500;
		width:72px;
		height:72px;
		cursor:pointer;
	}
	#menu div.menu-icon > span{
		position:absolute;
		left:22px;
		width:30px;
		height:1px;
		background:#fff;
		transition:all 0.4s;
	}
	#menu div.menu-icon > span:nth-child(1){top:22px;}
	#menu div.menu-icon > span:nth-child(2){top:32px;}
	body.menu-open #menu div.menu-icon > span:nth-child(1),
	body.menu-open #menu div.menu-icon > span:nth-child(2){
		top:30px;
		left:24px;
	}
	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:15px;
		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{
		display: block;
		width: 100%;
		text-align: center;
		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:#000;
		padding:1.8em 2.4em 4.2em 1.8em;
		margin:0 auto;
		background: #2262c3;
		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
*******************************/
	#about-block{
		padding: 6rem 2rem 20rem;
	}
	#about-block > section > .head > h2 {
		font-size: 24px;
		font-size: 2.4rem;
	}
	#about-block > section > .head > h2 .txt-s {
		font-size: 18px;
		font-size: 1.8rem; 
	}
	#about-block > section > .body {
		margin-top: 4rem;
	}
	#about-block > section > .body .text+.text {
		margin-top: 2rem;
	}


	#greeting-block{
		padding: 6rem 2rem 8rem;
	}
	#greeting-block > section > .body {
		width: auto;
		margin-top: 4rem;
	}
	#greeting-block > section > .body .text {
		text-align: left;
	}
	#greeting-block > section > .body .text span {
		display: inline;
	}
	#greeting-block > section > .body .text+.text {
		margin-top: 2rem;
	}


		#history-block > section > .body{
			margin: 4rem 2rem 0;
		}
		#history-block > section > .body ul.history-box::before{
			top: 10px;
			left: 2px;
			width: 6px;
		}
		#history-block > section > .body ul.history-box li {
			position: relative;
			margin-bottom: 2rem;
			padding-left: 3rem;
		}

	#map-block{
		padding: 6rem 2rem 8rem;
	}
	#map-block > section > .body{
		margin-top: 2rem;
	}
	#map-block section .body iframe{
		width: 100%;
	}

	#business-block > section > .body {
		margin-top: 4rem;
	}
	#business-block section .body div.flex-box{
		flex-direction: column;
	}
	#business-block > section > .body div.flex-box div.box{
		width: auto;
		height: auto;
		padding: 5rem 2rem;
	}
	#business-block > section > .body div.flex-box div.box .title{
		height: 280px;
	}

	#company-block{
		padding-bottom: 1rem;
	}
	#company-block > section > .body {
		max-width: 100%;
		margin: 4rem auto 0;
	}
	#company-block > section > .body table tr th{
		display: block;
		width: 100%;
	}
	#company-block > section > .body table tr td{
		display: block;
		width: 100%;
		padding-top: 0;
		text-align: center;
	}
	#company-block > section > .body > div+div{
		margin: 8rem 2rem 6rem;
	}
	#company-block > section > .body div:nth-child(2) table{
		margin-top: 3rem;
		border-right: none;
	}

	#company-block > section > .body div:nth-child(2) table tr th{
		padding: 1rem;
		font-size: 20px;
		font-size: 2.0rem;
	}
	#company-block > section > .body div:nth-child(2) table tr td{
		font-size: 16px;
		font-size: 1.6rem;
	}

	#job-block{
		padding-top: 2rem;
		padding-bottom: 6rem;
	}
	#job-block > section > .body{
		margin: 4rem 2rem 0;
	}
	#job-block > section > .body > div {
		margin-top: 6rem;
	}
	#job-block > section > .body table{
		max-width: 100%;
		width: 100%;
		margin: 4rem auto 0;
	}
	#job-block > section > .body table tr th{
		display: block;
		width: 100%;
		border-bottom: 1px solid #bbbbbb;
	}
	#job-block > section > .body table tr td{
		display: block;
		width: 100%;
		padding: 1rem 2rem;
		border-left: none;
		text-align: center;
	}

	#contact-block{
		padding-top: 2rem;
		padding-bottom: 6rem;
	}
	#contact-block > section > .body {
		width: 90%;
		margin: 4rem auto 0;
	}
	#contact-block > section > .body div.flex-box{
		flex-direction: column;
		align-items: baseline;
	}
	#contact-block > section > .body div.flex-box > a{
		width: 100%;
		margin: 0;
		font-size: 24px;
		font-size: 2.4rem;
	}
	#contact-block > section > .body div.flex-box > p{
		margin: 0;
		font-size: 24px;
		font-size: 2.4rem;
	}
	#contact-block > section > .body > .mail-box{
		margin-top: 0;
		text-align: left;
		font-size: 24px;
		font-size: 2.4rem;
	}
	#contact-block > section > .body > .mail-box span{
		vertical-align: text-top;
	}

	#footer .inner {
		padding: 3rem 2rem;
	}
	#footer .inner .footer-top{
		display: none;
	}
	#footer .link-erea {
		margin-top: 0;
	}
	#footer .link-erea div.flex-box{
		flex-direction: column;
		align-items: center;
	}
	#footer .link-erea div.flex-box > a{
		width: auto;
	}
	#footer .link-erea div.flex-box > a+a{
		margin-top: 1rem;
	}
	footer .footer-bottom {
		margin-top: 3rem;
	}
	#footer .inner > .copyright{
		margin-top: 6rem;
	}

	.scrollTop{
		right: 1em;
		bottom: 1em;
	}

	body.contact #main-image{
		height: 480px;
}
	body.contact #main-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	}
	body.contact #contact-block > section > .body .box > div {
		text-align: left;
	}
	#contact-block > section > .body .box > div+div {
		margin-top: 6rem;
	}
	body.contact #contact-block > section > .body .formblock {
		width: 100%;
		margin: 0;
	}
	body.contact #contact-block > section > .body .formblock dl{
		flex-direction:column;
		border-top: none;
	}
	body.contact #contact-block > section > .body .formblock dl+dl{
		margin-top: 10px;
	}
	body.contact #contact-block > section > .body .formblock dl dt{
		width: auto;
		padding: 5px;
	}
	body.contact #contact-block > section > .body .formblock dl dt p > span:nth-child(1) {
		width: auto;
	}
	body.contact #contact-block > section > .body .formblock dl dd{
		width: auto;
		padding: 10px 0;
}
	body.contact #contact-block > section > .body .formblock dl dd input[type="text"], body.contact #contact-block > section > .body .formblock dl dd input[type="email"], #contact-block > section > .body .formblock dl dd textarea{
		width: 100%;
		border-radius: 0;
	}
	body.contact #contact-block > section > .body .formblock .button {
		margin: 60px auto 0;
		padding: 0;
	}
	body.contact #contact-block > section > .body .formblock .button-erea{
		margin-top: 2rem;
	}
	body.contact #contact-block > section > .body .formblock .button-erea > p input[type="submit"]{
		width: 100%;
	}
	.wpcf7 form .wpcf7-response-output,.wpcf7 form.sent .wpcf7-response-output{
		width: auto;
	}

}