@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;
		}
	.inner {
		max-width: 100%;
		width: 100%;
		margin: 0 auto;
		padding:0 20px;
	}
	h2{
		font-size: 36px;
		font-size: 3.6rem;
	}
	h2.unagi-bk{
		padding: 5rem 0;
	}
	.button {
		width: auto;
	}


/*******************************
/* main
*******************************/

	#main-block{
		max-height: 650px;
	}
	#main-block section > h1 {
		z-index: 1;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: auto;
		bottom: 0;
	}


	#howto-block{
		background: url(../images/howto_spbk.png) no-repeat;
		padding-top: 6rem;
		padding-bottom: 20rem;
	}
	#howto-block section .inner .flex-box > div {
		width: auto;
	}
	#howto-block section .inner .flex-box > div.img-box {
		margin-left: 0;
		margin-top: 3em;
	}
	#howto-block section .inner .flex-box > div.img-box {
		margin-left: 0;
		margin-top: 1em;
	}
	#howto-block section .inner .flex-box > div.text-box{
		width: auto;
		max-width: 100%;
	}



	#commitment-block:before {
		width: 70%;
		height: 440px;
		margin: auto;
		background: url(../images/kodawari.png) no-repeat center;
		background-size: contain;
		top: -4em;
		right: 0;
		left: 0;
	}
	#commitment-block section .inner{
		padding-top: 30em;
	}
	#commitment-block section .inner .text-box div+div {
		margin-top: 6rem;
	}
	#commitment-block section .inner .text-box #video-box iframe {
		width: auto;
		height: 200px;
		margin: 0 auto;
	}
	#commitment-block section .inner .text-box dl dt {
		width: auto;
		min-width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: -30px;
	}
	#commitment-block section .inner .text-box dl dd {
		width: auto;
		margin-left: 0;
		max-width: 100%;
	}
	#commitment-block section .inner .text-box dl dd h4{
		text-align: center;
		margin-top: 1rem;
	}
	#commitment-block section .inner .text-box dl dd .text{
		font-size: 18px;
	}
	#commitment-block section .inner .text-box > div.flex-box .img-box {
		margin-left: 0;
		margin-top: 1em;
		text-align: center;
	}
	#commitment-block section .inner .text-box > div.box dl dt{
		width: auto;
	}
	#commitment-block section .inner > .bottom-box .flex-box > div {
		width: auto;
	}






	#character-block section:nth-child(1) {
		padding: 4rem 0 8rem;
	}
	#character-block section:nth-child(1) .inner .flex-box {
		margin-top: 2rem;
	}
	#character-block section:nth-child(1) .inner .flex-box > div {
		width: auto;
	}
	#character-block section:nth-child(1) .inner .flex-box > div+div{
		margin-top: 4rem;
	}
	#character-block section:nth-child(1) .inner .flex-box > div h4{
		margin-top: 2rem;
	}
	#character-block section:nth-child(1) .inner .flex-box > div .text{
		margin-top: 1rem;
		font-size: 18px;
	}
	#character-block section:nth-child(2){
		background: url(../images/character_bottom_spbk.jpg) repeat;
		height: auto;
		max-height: 100%;
		padding-bottom: 20rem;
	}
	#character-block section:nth-child(2) > .flex-box{
		position: relative;
		top: 0;
	}
	#character-block section:nth-child(2) > .flex-box > .box{
		padding-top: 6rem;
	}
	#character-block section:nth-child(2) > .flex-box > .box+.box{
		margin-top: 6rem;
		padding-top: 0;
	}
	#character-block section:nth-child(2) > .flex-box > .box .img{
		margin: 0 2em;
	}
	#character-block section:nth-child(2) > .flex-box > .box .name{
		margin: 3rem 20px 0;
	}
	#character-block section:nth-child(2) > .flex-box > .box .fee {
		margin-top: 2rem;
	}
	#character-block section:nth-child(2) > .button{
		margin: 0 20px;
	}


	#enjoy-block{
		padding: 4rem 0 8rem;
	}
	#enjoy-block section .inner h2.unagi-bk{
		padding: 2rem 0;
	}
	#enjoy-block section .inner .flex-box {
		margin-top: 2rem;
	}
	#enjoy-block section .inner .flex-box .img-box{
		width: auto;
	}
	#enjoy-block section .inner .flex-box .text-box{
		width: auto;
		padding: 4rem 3rem;
	}
	#enjoy-block section .inner .flex-box .text-box dl+dl {
		margin-top: 2rem;
	}
	#enjoy-block section .inner .flex-box .text-box dl:nth-child(1) dt{
		text-indent: -2em;
		padding-left: 2em;
	}
	#enjoy-block section .inner .flex-box .text-box dl dd {
		margin-top: 1rem;
	}


	#merchandise-block {
		padding: 4rem 0 8rem;
	}
	#merchandise-block section .inner .flex-box > .box {
		width: auto;
	}
	#merchandise-block section .inner .flex-box > .box+.box {
		margin-top: 4rem;
	}
	#merchandise-block section .inner .flex-box > .box .name{
		margin-top: 2rem;
	}
	#merchandise-block section .inner .flex-box > .box .name span {
		font-size: 20px;
		margin-top: 10px;
	}
	#merchandise-block section .inner > .button {
		margin-top: 6rem;
	}
	#merchandise-block section .inner .flex-box > .box .fee ul li span:nth-child(3){
		font-size: 14px;
	}

	#footer{
		background: url(../images/fotter_spbk.jpg) no-repeat center;
		background-size: cover;
	}
	#footer .inner {
		padding: 6rem 20px 5rem;
	}
	#footer .inner > p{
		line-height: 2.2;
		font-size: 18px;
	}
	#merchandise-block section .inner .flex-box {
		margin-top: 2rem;
	}
	#footer .inner > .button {
		margin-top: 6rem;
	}
	#footer .inner > div p.img {
		width: 30%;
		margin: 4rem auto 0;
	}
	.copyright{
		font-size: 12px;
	}
	.scrollTop a{
		background: #0b052e;
	}


}