@charset "utf-8";

body{
	font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}

html{
  font-size: 10px;
  overflow-x: hidden;
}

.clearfix::after{
	content: "";
	display: block;
	clear: both;
}

.fadein {
	opacity: 0;
	transform: translate(0, 50px);
	transition: all 1500ms;
}
.fadein.scrollin {
	opacity: 1;
	transform: translate(0, 0);
}

#js-loader {
	background: #ffffff;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
}

#js-loader img {
	width: 70px;
	position: absolute;
	top: 250px;
	left: 50%;
	margin-left: -35px;
}

#js-loader p{
	font-size: 1.4rem;
	color: #475425;
	position: absolute;
	top: 350px;
	left: 50%;
	margin-left: -30px;
}

.loader-animation, .loader-animation:before, .loader-animation:after {
	border-radius: 50%;
	width: 1.5em;
	height: 1.5em;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation: load7 1.8s infinite ease-in-out;
	animation: load7 1.8s infinite ease-in-out;
}
.loader-animation {
	color: #475425;
	font-size: 10px;
	margin: 360px auto;
	position: relative;
	text-indent: -9999em;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}
.loader-animation:before, .loader-animation:after {
	content: '';
	position: absolute;
	top: 0;
}
.loader-animation:before {
	left: -2.5em;
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}
.loader-animation:after {
	left: 2.5em;
}
@-webkit-keyframes load7 {
	0%, 80%, 100% {
		box-shadow: 0 2.5em 0 -1.3em;
	}
	40% {
		box-shadow: 0 2.5em 0 0;
	}
}
@keyframes load7 {
	0%, 80%, 100% {
		box-shadow: 0 2.5em 0 -1.3em;
	}
	40% {
		box-shadow: 0 2.5em 0 0;
	}
}

.eng{
	font-family: futura-pt, sans-serif;
	font-weight: 400;
	font-style: normal;
}

.jap{
	font-family: ryo-display-plusn, serif;
	font-weight: 500;
	font-style: normal;
}

#wrap{
	position: relative;
}

@media screen and (min-width: 1001px){

#header{
	display: none;
	position: fixed;
	top: 0px;
	left:0px;
	z-index: 100;
	background-color: #ffffff;
	width: 100%;
	height: 60px;
	text-align: center;
}

#header ul{
	display: flex;
	width: 880px;
	margin: 0px auto;
	margin-top: 25px;
}

#header ul li img{
	height: 25px;
	margin-top: -6px;
}

#header ul li{
	margin-right: 30px;
	font-size: 1.4rem;
	letter-spacing: 2px;
}

#header ul li:last-child{
	margin: 0px;
}

#header ul li a{
	color: #475425;
	text-decoration: none;
}

#header ul li a:hover{
	color: #000000;
	text-decoration: underline;
}

#main{
	width: 100%;
	height: ;
	display: flex;
}

#main-left{
	width: calc(100% - 1000px);
	height: auto;
	text-align: center;
}

#main-left img{
	width: 60px;
	margin-top: 30px;
}

#main-left h1{
	font-size: 2.8rem;
	text-align: left;
	display: block;
	width: 330px;
	margin: 0px auto;
	color: #475425;
	line-height: 1.8;
	letter-spacing: 2px;
	margin-top: 180px;
}

#main-right{
	width: 1000px;
}

#main-right ul{
	display: flex;
	margin-top: 35px;
	margin-bottom: 35px;
	margin-left: 150px;
}

#main-right ul li{
	margin-right: 25px;
	font-size: 1.4rem;
	letter-spacing: 2px;
}

#main-right ul li a{
	color: #475425;
	text-decoration: none;
}

#main-right ul li a:hover{
	color: #000000;
	text-decoration: underline;
}

#img-1{
	width: 1000px;
}

.img-2{
	width: 323px;
	margin-right: 12px;
	margin-top: 12px;
	margin-bottom: 60px;
}

#img-4{
	margin-right: 0px;
	margin-bottom: 60px;
}

.tab-1{
	background-image: url("../img/img-7.jpg");
	background-size: 740px;
}

.tab-2{
	background-image: url("../img/img-5.jpg");
	background-size: 740px;
	background-position: right;
}

.tab-3{
	background-image: url("../img/img-6.jpg");
	background-size: 740px;
}

.tab{
	width: 1100px;
	margin: 0px auto;
	margin-bottom: 15px;
}

.button-1{
	float: right;
}

.button{
	width: 360px;
	height: 360px;
	background-color: #475425;
	box-sizing: border-box;
	padding: 40px 40px 40px 40px;
}

.button h2{
	color: #ffffff;
	font-size: 2.0rem;
	letter-spacing: 2px;
	text-align: center;
	margin-bottom: 20px;
}

.button p{
	color: #ffffff;
	font-size: 1.3rem;
	line-height: 1.8;
	display: block;
	width: 240px;
	margin: 0px auto;
	letter-spacing: 1px;
}

.button a{
	display: block;
	width: 240px;
	height: 44px;
	background-color: #ffffff;
	font-size: 1.6rem;
	color: #475425;
	box-sizing: border-box;
	text-align: center;
	padding-top: 13px;
	text-decoration: none;
	margin: 0px auto;
	margin-top: 30px;
	-webkit-transition-property: background-color; 
	-webkit-transition-duration: 0.1s;  
    	-webkit-transition-timing-function: linear;
}

.button a:hover{
	background-color: #6b957e;
}

.arrow{
	position: relative;
	display: inline-block;
	padding: 0 0 0 15px;
	color: #000;
	vertical-align: middle;
	text-decoration: none;
	font-size: 15px;
}

.arrow::before,
.arrow::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}

.arrow-1::before{
	left: 40px;
	width: 31px;
	height: 1px;
	background: #475425;
}
.arrow-1::after{
	left: 65px;
	width: 5px;
	height: 5px;
	border-top: 1px solid #475425;
	border-right: 1px solid #475425;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

#tab-4{
	display: flex;
	width: 1100px;
	margin: 0px auto;
	margin-top: 15px;
}

.frame{
	width: 542px;
	height: 542px;
	background-image: url("../img/pattern.jpg");
	background-size: 50%;
	box-sizing: border-box;
	padding: 40px 30px;
}

.frame h2{
	color: #475425;
	font-size: 2.0rem;
	letter-spacing: 2px;
	text-align: center;
	margin-bottom: 30px;
}

.frame ul{
	display: block;
	height: 380px;
	overflow-y: auto;
	padding: 0px 30px;
}

.frame ul li{
	font-size: 1.4rem;
	letter-spacing: 1px;
	padding-bottom: 15px;
	border-bottom: 1px solid #ffffff;
	margin-bottom: 15px;
	line-height: 1.8;
}

.frame ul li a{
	color: #000000;
	text-decoration: none;
}

.frame ul li a:hover{
	color: #475425;
	text-decoration: underline;
}

#news{
	margin-right: 15px;
}

#contact{
	width: 100%;
	padding-top: 60px;
	padding-bottom: 60px;
	background-color: #475425;
	margin-top: 60px;
}

#contact h2{
	color: #ffffff;
	text-align: center;
	font-size: 2.0rem;
}

#contact h3{
	color: #ffffff;
}

#contact dl{
	width: 720px;
	overflow: hidden;
	font-size: 1.3rem;
	letter-spacing: 1px;
	line-height: 1.8;
	color: #ffffff;
	margin: 0px auto;
	margin-top: 20px;
}

#contact dt{
	width: 200px;
	float: left;
	text-align: right;
	vertical-align: middle;
	box-sizing: border-box;
	padding: 10px 0px 0px 0px;
}

#contact dd{
	width: 500px;
	float: left;
	margin: 0;
	text-align: left;
	box-sizing: border-box;
	padding: 10px 0px 20px 10px;
}

#contact dd:after{
	clear: both;
}


.required{
	display: inline-block;
	width: 30px;
	height: 18px;
	background-color: #ba5425;
	color: #ffffff;
	box-sizing: border-box;
	text-align: center;
	font-size: 1.0rem;
	line-height: 2.0;
	margin-left: 10px;
}

button, textarea, select {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 3px;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

input[type="text"]{
	width: 99.5%;
	padding: 5px;
	background-color: #e6e6e6;
	outline: none;
	appearance: none;
	border: none;
	font-size: 1.4rem;
	border-radius: 5px;
}

input:focus{
	background-color:#e6e6e6;
	outline:1px solid #a67f00;
}

textarea{
	width: 100%;
	height: 200px;
	font-size:1.4rem;
	background-color: #e6e6e6;
	resize: none;
	padding: 5px;
	font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}

textarea:focus{
	background-color:#e6e6e6;
	outline:1px solid #a67f00;
}

input[type="submit"]{
	text-align: center;
	font-size: 1.3rem;
	letter-spacing: 15px;
	display: block;
	width: 200px;
	height: 50px;
	color :#000000;
	background-color: #ffffff;
	border: none;
	margin: 0px auto;
	margin-top: 40px;
}

#privacy{
	width: 720px;
	height: 150px;
	border: 1px solid #ffffff;
	margin: 0px auto;
	padding: 0px 20px 0px 0px;
	margin-top: 30px;
}

#privacy-wrap{
	width: 680px;
	height: 110px;
	overflow-y: scroll;
	margin: 20px 20px;
	padding: 0px 20px 0px 0px;
}

#privacy h3{
	color: #ffffff;
	font-size: 1.4rem;
	line-height: 1.8;
	letter-spacing: 1px;
	font-weight: normal;
}

#privacy h4{
	color: #ffffff;
	font-size: 1.3rem;
	line-height: 1.8;
	letter-spacing: 1px;
	font-weight: normal;
	margin-top: 15px;
}

#privacy p{
	color: #ffffff;
	font-size: 1.3rem;
	line-height: 1.8;
	letter-spacing: 1px;
}

#agency{
	width: 100%;
	padding-top: 60px;
	padding-bottom: 60px;
	background-image: url("../img/pattern.jpg");
	background-size: 25%;
}

#agency h2{
	color: #475425;
	font-size: 2.0rem;
	line-height: 1.8;
	text-align: center;
	letter-spacing: 2px;
}

#agency h3{
	color: #475425;
	font-size: 2.0rem;
	text-align: center;
	letter-spacing: 1px;
}

#agency h4{
	width: 780px;
	margin: 0px auto;
	font-size: 1.4rem;
	color: #475425;
	padding-bottom: 15px;
	border-bottom: 1px solid #475425;
	margin-top: 20px;
	letter-spacing: 1px;
}

#agency a{
	color: #475425;
	text-decoration: none;
}

#agency p{
	display: none;
}

#agency table{
	width: 780px;
	margin: 0px auto;
	margin-top: 20px;
	color: #475425;
	font-size: 1.3rem;
	line-height: 1.8;
	letter-spacing: 1px;
}

#agency table td{
	width: 390px;
	padding: 0px 0px 10px 0px;
}

#footer{
	text-align: center;
	width: 1100px;
	margin: 0px auto;
	padding-bottom: 30px;
}

#footer img{
	width: 60px;
	margin-top: 60px;
	margin-bottom: 40px;
}

#footer ul{
	display: flex;
	justify-content: center;
	margin-top: 60px;
	margin-bottom: 40px;
}

#footer ul li{
	margin-right: 30px;
}

#footer ul li:last-child{
	margin-right: 0px;
}

#footer ul li a{
	color: #475425;
	letter-spacing: 1px;
	font-size: 1.3rem;
	text-decoration: none;
}

#footer ul li a:hover{
	color: #000000;
	text-decoration: underline;
}

#footer p{
	font-size: 1.3rem;
	letter-spacing: 2px;
	color: #475425;
}

#sub-main{
	width: 100%;
	height: ;
	display: flex;
}

#sub-main-left{
	width: calc(100% - 1000px);
	height: auto;
	text-align: center;
}

#sub-main-left img{
	width: 60px;
	margin-top: 30px;
}

#sub-main-right{
	width: 1000px;
}

#sub-main-right ul{
	display: flex;
	margin-top: 35px;
	margin-bottom: 35px;
	margin-left: 150px;
}

#sub-main-right ul li{
	margin-right: 25px;
	font-size: 1.4rem;
	letter-spacing: 2px;
}

#sub-main-right ul li a{
	color: #475425;
	text-decoration: none;
}

#sub-main-right ul li a:hover{
	color: #000000;
	text-decoration: underline;
}

#title h1{
	color: #475425;
	font-size: 2.4rem;
	letter-spacing: 2px;
	text-align: center;
	line-height: 1.6;
	margin-top: 60px;
}

#title h2{
	color: #475425;
	font-size: 2.0rem;
	letter-spacing: 2px;
	text-align: center;
	line-height: 1.6;
}

#sub-visual{
	width: 1100px;
	height: 328px;
	margin: 0px auto;
	display: block;
}

#sub-visual img{
	width: 1100px;
	height: 208px;
	margin-top: 60px;
}

.main-texts{
	width: 1100px;
	margin: 0px auto;
	text-align: center;
	padding-bottom: 30px;	
}

.main-texts p{
	color: #424242;
	font-size: 1.4rem;
	letter-spacing: 1px;
	line-height: 1.8;
	margin-bottom: 30px;
}

.three{
	width: 1100px;
	height:;
	display: flex;
	justify-content: center;
	margin: 0px auto;
}

.three li{
	width: 356px;
	margin-right: 15px;
}

.three li:last-child{
	margin-right: 0px;
}

.three li img{
	width: 356px;
}

.separate{
	margin-top: 60px;
}

.main-texts h3{
	font-size: 2.2rem;
	line-height: 1.8;
	margin-bottom: 60px;
	font-weight: normal;
	color: #475425;
	letter-spacing: 2px;
}

.three-links{
	width: 1100px;
	margin: 0px auto;
	display: flex;
	justify-content: center;
	margin-bottom: 60px;
}

.three-links img{
	width: 356px;
}

.three-links li{
	width: 356px;
	margin-right: 15px;
	text-align: center;
}

.three-links li:last-child{
	margin-right: 0px;
	background-color: #475425;
}

.three-links li:first-child{
	background-image: url("../img/pc-lmd-img2.jpg");
	background-size: 100%;
}

.three-links p{
	font-size: 1.2rem;
	color: #ffffff;
	letter-spacing: 1px;
	margin-top: 30px;
}

.three-links a{
	display: block;
	width: 240px;
	height: 44px;
	background-color: #ffffff;
	font-size: 1.6rem;
	color: #475425;
	box-sizing: border-box;
	text-align: center;
	padding-top: 13px;
	text-decoration: none;
	margin: 0px auto;
	margin-top: 30px;
	-webkit-transition-property: background-color; 
	-webkit-transition-duration: 0.1s;  
    	-webkit-transition-timing-function: linear;
}

.three-links a:hover{
	background-color: #6b957e;
}

#commandments{
	width: 1100px;
	background-image:url("../img/pattern.jpg");
	background-size: 25%;
	margin: 0px auto;
	box-sizing: border-box;
	padding: 50px 50px;
}

#commandments h3{
	font-size: 2.2rem;
	line-height: 1.8;
	letter-spacing: 2px;
	color: #475425;
	text-align: center;
}

#commandments h4{
	font-size: 1.6rem;
	text-align: center;
	line-height: 1.8;
	color: #424242;
	padding-bottom: 10px;
}

#commandments p{
	font-size: 1.2rem;
	letter-spacing: 1px;
	line-height: 1.8;
	color: #424242;
}

#commandments ul{
	margin-top: 50px;
}

#commandments ul li{
	width: 188px;
	height: 420px;
	background-color: #ffffff;
	margin-right: 15px;
	float: left;
	box-sizing: border-box;
	margin-bottom: 30px;
	padding: 15px;
}

#commandments ul li:nth-child(5){
	margin-right: 0px;
}

#commandments ul li:nth-child(10){
	margin-right: 0px;
	margin-bottom: 50px;
}

.main-lineup{
	width: 1100px;
	margin: 0px auto;
}

.main-lineup h3{
	font-size: 2.2rem;
	color: #475425;
	font-weight: normal;
	text-align: center;
	border-bottom: 1px solid #e6e6e6;
	padding-bottom: 15px;
	letter-spacing: 2px;
}

.line-two{
	margin-bottom: 60px;
}

.line-two li{
	margin-top: 30px;
	width: 530px;
	float: left;
}

.line-two li:nth-child(odd){
	margin-right: 40px;
}

.line-two li h4{
	font-size: 1.8rem;
	letter-spacing: 2px;
	font-weight: normal;
}

.line-two li p{
	font-size: 1.3rem;
	letter-spacing: 1px;
	line-height: 1.8;
}

.specs{
	width: 320px;
	height: auto;
	box-sizing: border-box;
	padding: 15px 15px 15px 15px;
	background-color: #f2f2f2;
	margin-top: 15px;
	margin-bottom: 15px;
}

.specs p{
	width: 290px;
}

p.exp{
	display: block;
	width: 320px;
}

#espadin h4{
	color: #c93cab
}

#tobala h4{
	color: #054f88;
}

#arroqueno h4{
	color: #1b9639;
}

#bicuishe h4{
	color: #d14715;
}

#quiatoni h4{
	color: #b71f93;
}

#tepeztate h4{
	color: #cc9d00;
}

#madrecuishe h4{
	color: #009fe8;
}

#mexicanito h4{
	color: #006f71;
}

#tobasiche h4{
	color: #2e2732;
}

#espadin{
	background-image: url("../img/Espadin.png");
	background-position: right;
	background-size: 37%;
	background-repeat: no-repeat;
}

#tobala{
	background-image: url("../img/Tobala.png");
	background-position: right;
	background-size: 37%;
	background-repeat: no-repeat;
}

#arroqueno{
	background-image: url("../img/Arroqueno.png");
	background-position: right;
	background-size: 37%;
	background-repeat: no-repeat;
}

#bicuishe{
	background-image: url("../img/Bicuishe.png");
	background-position: right;
	background-size: 37%;
	background-repeat: no-repeat;
}

#quiatoni{
	background-image: url("../img/Espadin-Quiatoni.png");
	background-position: right;
	background-size: 37%;
	background-repeat: no-repeat;
}

#tepeztate{
	background-image: url("../img/Tepeztate.png");
	background-position: right;
	background-size: 37%;
	background-repeat: no-repeat;
}

#madrecuishe{
	background-image: url("../img/Madrecuishe.png");
	background-position: right;
	background-size: 37%;
	background-repeat: no-repeat;
}

#mexicanito{
	background-image: url("../img/Mexicanito.png");
	background-position: right;
	background-size: 37%;
	background-repeat: no-repeat;
}

#tobasiche{
	background-image: url("../img/Tobasiche.png");
	background-position: right;
	background-size: 37%;
	background-repeat: no-repeat;
}

.lineup-section{
	width: 1100px;
	margin: 0px auto;
	text-align: center;
	border-top: 1px solid #e6e6e6;
	padding-top: 60px;

}

.lineup-section p{
	font-size: 1.3rem;
	line-height: 1.8;
	margin-bottom: 30px;
	letter-spacing: 1px;
}

.lineup-section h3{
	color: #475425;
	font-size: 2.2rem;
	letter-spacing: 2px;
	font-weight: normal;
	margin-bottom: 60px;
}

#award{
	width: 700px;
	height: auto;
	box-sizing: border-box;
	text-align: left;
	padding: 30px 20px 30px 20px;
	margin: 0px auto;
	border: 1px solid #e6e6e6;
	background-image: url("../img/medal.png");
	background-position: right 20px center;
	background-size: 180px;
	background-repeat: no-repeat;
	margin-bottom: 60px;
}

#award p{
	margin-bottom: 0px;
}

#certification{
	width: 700px;
	height: auto;
	box-sizing: border-box;
	text-align: left;
	padding: 30px 20px 30px 20px;
	margin: 0px auto;
	border: 1px solid #e6e6e6;
	background-image: url("../img/brand.png");
	background-position: right 20px center;
	background-size: 144px;
	background-repeat: no-repeat;
}

#sp-header{
	display: none;
}

#sp-menu{
	display: none;
}

.menu-tirigger{
	display: none;
}

}


































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

#header{
	display: none;
}

#sp-header{
	width: 100vw;
	height: 60px;
	background-color: #ffffff;
	border-bottom: 1px solid #e6e6e6;
	text-align: center;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 90;
}

#sp-header img{
	height: 42px;
	margin-top: 12px;
}

.menu-trigger, .menu-trigger span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}

.menu-trigger {
	position: fixed;
	top: 20px;
	right: 15px;
	width: 25px;
	height: 22px;
	z-index: 100;
}

.menu-trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #475425;
	border-radius: 4px;
}

.menu-trigger span:nth-of-type(1) {
	top: 0;
}

.menu-trigger span:nth-of-type(2) {
	top: 10px;
}

.menu-trigger span:nth-of-type(3) {
	bottom: 0;
}

.menu-trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(11px) rotate(-315deg);
	-moz-transform: translateY(-11px) rotate(315deg);
	transform: translateY(11px) rotate(-315deg);
	background-color: #475425;
}

.menu-trigger.active span:nth-of-type(2) {
	opacity: 0;
}

.menu-trigger.active span:nth-of-type(3) {
	-webkit-transform: translateY(-9px) rotate(315deg);
	-moz-transform: translateY(-9px) rotate(315deg);
	transform: translateY(-9px) rotate(315deg);
	background-color: #475425;
}

#sp-menu {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	right: -100%;
	background-color: #e7e9e3;
	z-index: 90;
	opacity: 0;
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	box-sizing: border-box;
	text-align: center;
}

#sp-menu.open {
	width: 100%;
	height: 100%;
	background-color: #e7e9e3;
	z-index: 90;
	opacity: 1.0;
	-moz-transform: translateX(-90%);
	-webkit-transform: translateX(-90%);
	transform: translateX(-90%);
}

#sp-menu ul{
	width: 60%;
	margin: 0px auto;
	margin-top: 60px;
	margin-left: 15%;
}

#sp-menu ul li img{
	width: 40px;
}

#sp-menu ul li{
	font-size: 1.4rem;
	margin-bottom: 15px;
	padding-bottom: 10px;
	letter-spacing: 1px;
}

#sp-menu ul li a{
	color: #475425;
	text-decoration: none;
}

#main{
	width: 100%;
	height: ;
}

#main-left{
	width: 100vw;
	height: auto;
	text-align: left;
}

#main-left img{
	display: none;
}

#main-left h1{
	font-size: 2.0rem;
	text-align: left;
	display: block;
	width: 330px;
	color: #475425;
	line-height: 1.8;
	letter-spacing: 2px;
	margin-left: 30px;
	margin-top: 100px;
	margin-bottom: 40px;
}

#main-right{
	width: 100vw;
}

#main-right ul{
	display: none;
}

#img-1{
	width: 100vw;
}

.img-2{
	width: 31.8vw;
	margin-right: 1.5vw;
	margin-top: 1.5vw;
	margin-bottom: 20px;
}

#img-4{
	margin-right: 0px;
	margin-bottom: 20px;
}

.tab-1{
	background-image: url("../img/sp-img-1.jpg");
	background-size: 320px;
	background-position: bottom  30px center;
	background-color: #e7e9e3;
}

.tab-2{
	background-image: url("../img/sp-img-2.jpg");
	background-size: 320px;
	background-position: bottom 30px center;
}

.tab-3{
	background-image: url("../img/sp-img-3.jpg");
	background-size: 320px;
	background-position: bottom 30px center;
	background-color: #e7e9e3;
}

.tab{
	width: 100vw;
	margin: 0px auto;
	box-sizing: border-box;
	padding: 30px 15px;
	background-repeat: no-repeat;
}

.button-1{

}

.button{
	width: calc(100vw - 30px);
	height: 350px;
	background-color: #;
	box-sizing: border-box;
}

.button h2{
	color: #475425;
	font-size: 2.0rem;
	letter-spacing: 2px;
	text-align: center;
	margin-bottom: 20px;
}

.button p{
	color: #000000;
	font-size: 1.3rem;
	line-height: 1.8;
	margin: 0px auto;
	letter-spacing: 1px;
}

.button a{
	display: block;
	width: 240px;
	height: 44px;
	background-color: #475425;
	font-size: 1.6rem;
	font-weight: normal;
	color: #ffffff;
	box-sizing: border-box;
	text-align: center;
	padding-top: 13px;
	text-decoration: none;
	margin: 0px auto;
	margin-top: 20px;
	-webkit-transition-property: background-color; 
	-webkit-transition-duration: 0.1s;  
    	-webkit-transition-timing-function: linear;
}

.button a:hover{
	background-color: #6b957e;
}

.arrow{
	position: relative;
	display: inline-block;
	padding: 0 0 0 15px;
	color: #fff;
	vertical-align: middle;
	text-decoration: none;
	font-size: 15px;
}

.arrow::before,
.arrow::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}

.arrow-1::before{
	left: 40px;
	width: 31px;
	height: 1px;
	background: #ffffff;
}
.arrow-1::after{
	left: 65px;
	width: 5px;
	height: 5px;
	border-top: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

#tab-4{
	width: 100vw;
	margin: 0px auto;
}

.frame{
	width: 100vw;
	height: 400px;
	box-sizing: border-box;
	padding: 40px 20px;
}

.frame h2{
	color: #475425;
	font-size: 2.0rem;
	letter-spacing: 2px;
	text-align: center;
	margin-bottom: 20px;
}

.frame ul{
	display: block;
	height: 290px;
	overflow-y: auto;
	padding: 0px 0px;
}

.frame ul li{
	font-size: 1.4rem;
	letter-spacing: 1px;
	padding-bottom: 15px;
	border-bottom: 1px solid #ffffff;
	margin-bottom: 15px;
	line-height: 1.8;
}

.frame ul li a{
	color: #000000;
	text-decoration: none;
}

.frame ul li a:hover{
	color: #475425;
	text-decoration: underline;
}

#shop{
	background-image: url("../img/pattern.jpg");
	background-size: 50%;
}

#contact{
	width: 100vw;
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: #475425;
	margin-top: 0px;
}

#contact h2{
	color: #ffffff;
	text-align: center;
	font-size: 2.0rem;
}

#contact h3{
	color: #ffffff;
}

#contact dl{
	width: 90vw;
	overflow: hidden;
	font-size: 1.3rem;
	letter-spacing: 1px;
	line-height: 1.8;
	color: #ffffff;
	margin: 0px auto;
	margin-top: 20px;
}

#contact dt{
	width: 100%;
	text-align: left;
	vertical-align: middle;
	box-sizing: border-box;
	padding: 10px 0px 0px 0px;
}

#contact dd{
	width: 100%;
	margin: 0;
	text-align: left;
	box-sizing: border-box;
	padding: 10px 0px 10px 0px;
}

#contact dd:after{
	clear: both;
}


.required{
	display: inline-block;
	width: 30px;
	height: 18px;
	background-color: #ba5425;
	color: #ffffff;
	box-sizing: border-box;
	text-align: center;
	font-size: 1.0rem;
	line-height: 2.0;
	margin-left: 10px;
}

button, textarea, select {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

input[type="text"]{
	width: 100%;
	padding: 5px;
	background-color: #e6e6e6;
	outline: none;
	appearance: none;
	border: none;
	font-size: 1.4rem;
}

input:focus{
	background-color:#e6e6e6;
	outline:1px solid #a67f00;
}

textarea{
	width: 100%;
	height: 200px;
	font-size:1.4rem;
	background-color: #e6e6e6;
	resize: none;
	padding: 5px;
	font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}

textarea:focus{
	background-color:#e6e6e6;
	outline:1px solid #a67f00;
}

input[type="submit"]{
	text-align: center;
	font-size: 1.3rem;
	letter-spacing: 15px;
	display: block;
	width: 200px;
	height: 40px;
	color :#000000;
	background-color: #ffffff;
	border: none;
	margin: 0px auto;
	margin-top: 30px;
}

#privacy{
	width: 90vw;
	height: 200px;
	border: 1px solid #ffffff;
	margin: 0px auto;
	padding: 0px 0px 0px 0px;
	margin-top: 20px;
}

#privacy-wrap{
	width: 90%;
	height: 160px;
	overflow-y: scroll;
	margin: 20px 5%;
	padding: 0px 5px 0px 0px;
}

#privacy h3{
	color: #ffffff;
	font-size: 1.4rem;
	line-height: 1.8;
	letter-spacing: 1px;
	font-weight: normal;
}

#privacy h4{
	color: #ffffff;
	font-size: 1.3rem;
	line-height: 1.8;
	letter-spacing: 1px;
	font-weight: normal;
	margin-top: 15px;
}

#privacy p{
	color: #ffffff;
	font-size: 1.3rem;
	line-height: 1.8;
	letter-spacing: 1px;
}

#agency{
	width: 100vw%;
	padding-top: 40px;
	padding-bottom: 40px;
	background-image: url("../img/pattern.jpg");
	background-size: 25%;
}

#agency h2{
	color: #475425;
	font-size: 2.0rem;
	line-height: 1.8;
	text-align: center;
	letter-spacing: 2px;
}

#agency h3{
	color: #475425;
	font-size: 2.0rem;
	text-align: center;
	letter-spacing: 1px;
}

#agency h4{
	width: 90vw;
	margin: 0px auto;
	font-size: 1.4rem;
	color: #475425;
	padding-bottom: 15px;
	margin-top: 20px;
	letter-spacing: 1px;
}

#agency a{
	color: #475425;
	text-decoration: none;
}

#agency p{
	font-size: 1.3rem;
	letter-spacing: 1px;
	color: #000000;
	line-height: 1.8;
	display: block;
	width: 90vw;
	margin: 0px auto;
}

#agency table{
	display: none;
}

hr.separate{
	display: none;
}

#footer{
	text-align: center;
	width: 100vw;
	margin: 0px auto;
	padding-top: 15px;
	padding-bottom: 20px;
}

#footer img{
	display: none;
}

#footer ul{
	display: none;
}

#footer p{
	font-size: 1.2rem;
	letter-spacing: 1px;
	color: #475425;
}

#sub-main{
	display: none;
}

#title h1{
	color: #475425;
	font-size: 2.0rem;
	letter-spacing: 2px;
	text-align: center;
	line-height: 1.6;
	padding-top: 100px;
}

#title h2{
	color: #475425;
	font-size: 1.8rem;
	letter-spacing: 2px;
	text-align: center;
	line-height: 1.6;
}

#sub-visual{
	width: 90vw;
	height: 26.5vw;
	margin: 0px auto;
	display: block;
	margin-top: 40px;
}

.cl-mezcal{
	background-image: url("../img/sp-mc-img4.jpg");
	background-size: cover;
}

.cl-about{
	background-image: url("../img/sp-lmd-img1.jpg");
	background-size: cover;
}

.cl-linup{
	background-image: url("../img/sp-lu.jpg");
	background-size: cover;
}

#sub-visual img{
	display: none;
}

.main-texts{
	width: 90vw;
	margin: 0px auto;
	text-align: left;
	padding-top: 40px;
	padding-bottom: 20px;	
}

.main-texts p{
	color: #424242;
	font-size: 1.3rem;
	letter-spacing: 1px;
	line-height: 1.8;
	margin-bottom: 20px;
}

.three{
	width: 90vw;
	height: 29vw;
	display: flex;
	justify-content: center;
	margin: 0px auto;
	margin-bottom: 30px;
}

.three li{
	width: 29vw;
	margin-right: 1.5vw;
	background-image: url("../img/sp-mc-img2.jpg");
	background-size: cover;
}

.three li:first-child{
	background-image: url("../img/sp-mc-img3.jpg");
	background-size: cover;
}

.three li:last-child{
	margin-right: 0px;
	background-image: url("../img/sp-mc-img1.jpg");
	background-size: cover;
}

.three li img{
	display: none;
}

#footer hr{
	display: none;
}

.main-texts h3{
	font-size: 1.6rem;
	line-height: 1.8;
	margin-bottom: 30px;
	font-weight: normal;
	color: #475425;
	letter-spacing: 2px;
	text-align: center;
}

.three-links{
	width: 90vw;
	height: auto;
	margin: 0px auto;
	margin-bottom: 0px;
}

.three-links img{
	display: none;
}

.three-links li{
	width: 100%;
	height: 39vw;
	margin-bottom: 10px;
	text-align: center;
}

.three-links li:last-child{
	margin-right: 0px;
	background-color: #475425;
}

.three-links li:first-child{
	background-image: url("../img/sp-lmd-img2.jpg");
	background-size: cover;
}

.three-links li:nth-child(2){
	background-image: url("../img/sp-lmd-img3.jpg");
	background-size: cover;
}

.three-links p{
	font-size: 1.2rem;
	color: #ffffff;
	letter-spacing: 1px;
	padding-top: 8vw;
}

.three-links a{
	display: block;
	width: 240px;
	height: 44px;
	background-color: #ffffff;
	font-size: 1.6rem;
	color: #475425;
	box-sizing: border-box;
	text-align: center;
	padding-top: 13px;
	text-decoration: none;
	margin: 0px auto;
	margin-top: 8vw;
	-webkit-transition-property: background-color; 
	-webkit-transition-duration: 0.1s;  
    	-webkit-transition-timing-function: linear;
}

.three-links a:hover{
	background-color: #6b957e;
}

#commandments{
	width: 90vw;
	background-image:url("../img/pattern.jpg");
	background-size: 25%;
	margin: 0px auto;
	box-sizing: border-box;
	padding: 30px 15px;
	margin-bottom: 30px;
}

#commandments h3{
	font-size: 1.6rem;
	line-height: 1.8;
	letter-spacing: 2px;
	color: #475425;
	text-align: center;
}

#commandments h4{
	font-size: 1.4rem;
	text-align: center;
	line-height: 1.8;
	color: #424242;
	padding-bottom: 10px;
}

#commandments p{
	font-size: 1.2rem;
	letter-spacing: 1px;
	line-height: 1.8;
	color: #424242;
}

#commandments ul{
	margin-top: 20px;
}

#commandments ul li{
	width: 100%;
	height: auto;
	background-color: #ffffff;
	margin-right: 15px;
	box-sizing: border-box;
	margin-bottom: 15px;
	padding: 15px;
}

.main-lineup{
	width: 90vw;
	margin: 0px auto;
}

.main-lineup h3{
	font-size: 1.6rem;
	color: #475425;
	font-weight: normal;
	text-align: center;
	border-bottom: 1px solid #e6e6e6;
	padding-bottom: 15px;
	letter-spacing: 2px;
	margin-top: 40px;
}

.line-two li:nth-child(3){
	margin-bottom: 40px;
}

.line-two li{
	margin-top: 30px;
	width: 100%;
	box-sizing: border-box;
	padding-top: 200px;
}

.line-two li h4{
	font-size: 1.6rem;
	letter-spacing: 2px;
	font-weight: normal;
}

.line-two li p{
	font-size: 1.3rem;
	letter-spacing: 1px;
	line-height: 1.8;
	display: block;
	width: 100%;
}

.specs{
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 15px;
	background-color: #f2f2f2;
	margin-top: 15px;
	margin-bottom: 15px;
}

#espadin h4{
	color: #c93cab
}

#tobala h4{
	color: #054f88;
}

#arroqueno h4{
	color: #1b9639;
}

#bicuishe h4{
	color: #d14715;
}

#quiatoni h4{
	color: #b71f93;
}

#tepeztate h4{
	color: #cc9d00;
}

#madrecuishe h4{
	color: #009fe8;
}

#mexicanito h4{
	color: #006f71;
}

#tobasiche h4{
	color: #2e2732;
}

#espadin{
	background-image: url("../img/Espadin.png");
	background-position: top center;
	background-size: 37%;
	background-repeat: no-repeat;
}

#tobala{
	background-image: url("../img/Tobala.png");
	background-position: top center;
	background-size: 37%;
	background-repeat: no-repeat;
}

#arroqueno{
	background-image: url("../img/Arroqueno.png");
	background-position: top center;
	background-size: 37%;
	background-repeat: no-repeat;
}

#bicuishe{
	background-image: url("../img/Bicuishe.png");
	background-position: top center;
	background-size: 37%;
	background-repeat: no-repeat;
}

#quiatoni{
	background-image: url("../img/Espadin-Quiatoni.png");
	background-position: top center;
	background-size: 37%;
	background-repeat: no-repeat;
}

#tepeztate{
	background-image: url("../img/Tepeztate.png");
	background-position: top center;
	background-size: 37%;
	background-repeat: no-repeat;
}

#madrecuishe{
	background-image: url("../img/Madrecuishe.png");
	background-position: top center;
	background-size: 37%;
	background-repeat: no-repeat;
}

#mexicanito{
	background-image: url("../img/Mexicanito.png");
	background-position: top center;
	background-size: 37%;
	background-repeat: no-repeat;
}

#tobasiche{
	background-image: url("../img/Tobasiche.png");
	background-position: top center;
	background-size: 37%;
	background-repeat: no-repeat;
}

.lineup-section{
	width: 100vw;
	margin: 0px auto;
	text-align: left;
	border-top: 1px solid #e6e6e6;
	box-sizing: border-box;
	padding-top: 40px;
	padding-left: 5vw;
	padding-right: 5vw;
}

.lineup-section p{
	font-size: 1.3rem;
	line-height: 1.8;
	margin-bottom: 20px;
	letter-spacing: 1px;
}

.lineup-section h3{
	color: #475425;
	font-size: 1.6rem;
	letter-spacing: 2px;
	font-weight: normal;
	margin-bottom: 40px;
	text-align: center;
	line-height: 1.8;
}

#award{
	width: 100%;
	height: auto;
	box-sizing: border-box;
	text-align: left;
	padding: 20px 20px 100px 20px;
	margin: 0px auto;
	border: 1px solid #e6e6e6;
	background-image: url("../img/medal.png");
	background-position: bottom 20px center;
	background-size: 200px;
	background-repeat: no-repeat;
	margin-bottom: 40px;
}

#award p{
	margin-bottom: 0px;
}

#certification{
	width: 100%;
	height: auto;
	box-sizing: border-box;
	text-align: left;
	padding: 20px 20px 70px 20px;
	margin: 0px auto;
	border: 1px solid #e6e6e6;
	background-image: url("../img/sp-brand.png");
	background-position: bottom 20px center;
	background-size: 85%;
	background-repeat: no-repeat;
	margin-bottom: 30px;
}

}