@charset "utf-8";

/* ##### 1024px未満 ##### */
@media (max-width: 1024px) {

}

/* ##### 768px未満 ##### */
@media (max-width: 768px) {
	
}

/* ##### 480px未満 ##### */
@media (max-width: 480px) {
	
html{
}

body{
}

img{
	width:100%;
}

.pc-content{
	display:none;
}

.sp-content,
.sp-br{
	display:block;
}

#page-top a{
	background-color:#FFFFFF;
	border:0.1rem solid #000000;
	border-radius:2vw;
	padding:6vw 2vw;
	padding-bottom:4vw;
	background-position:top 3vw center;
}


nav,
main,
#wrap,
footer .footer-inner-frame{
	width:100%;
}


.top-img-frame h1{
	text-align:center;
	background-color:#E7E6E6;
	padding:2vw 0;
	font-size:5.8vw;
	font-weight:bold;
}

.top-img-frame img{
	padding:3vw;
	box-sizing:border-box;
}

header{
	border-bottom:0;
}

header h1{
	position:relative;
	text-align: center;
	background-color: #E7E6E6;
	padding: 2vw 0;
	font-size: 5.8vw;
	font-weight: bold;
}

header h1 a{
	position:absolute;
	left:2vw;
	line-height:9vw;
	background-image:url(../img/sp/icon-009.png);
	background-size:auto 60%;
	background-repeat:no-repeat;
	background-position:left center;
	padding-left:7vw;
}

nav{
	padding:0 3vw;
	box-sizing:border-box;
}

nav ul li{
	width:calc( 100% / 3 - 0.5rem );
	margin-right:0.5rem;
	margin-bottom:3vw;
}

nav ul li a{
	font-size: 3.8vw;
	background-image:url(../img/sp/yamasen-bg-001.jpg);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:bottom center;
}

nav ul li:nth-of-type(2) a,
nav ul li:nth-of-type(5) a{
	background-image:url(../img/sp/yamasen-bg-002.png);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:bottom center;
}

nav ul li a span{
	font-size:2.8vw;
}

nav ul li:nth-of-type(3n){
	margin-right:0;
}

main{
	margin-top:3vw;
	margin-bottom:0;
}

.content-frame,
#category{
	margin-bottom:6vw;
}

#about,
.tell-frame{
	background-color:#000000;
	color:#FFFFFF;
	padding:6vw 0;
	font-size:7vw;
}

#about h2,
.tell-frame h2{
	border-bottom-color:#FFFFFF;
}

.content-frame h2{
	font-size: 6.5vw;
	height:9vw;
	margin-bottom: 0.8vw;
}

.content-frame h3{
	font-size:4.5vw;
}

#about h3,
.tell-frame h3{
	margin-bottom:3vw;
	font-size:4.3vw;
}

.content-frame p{
	font-size: 3.5vw;
	line-height: 6vw;
}


.grad-wrap{
	position:relative;
	padding-top:15vw;
	margin-top:-20vw;
}

.grad-btn {
	position:absolute;
	top:0;
	right:3vw;
}
.grad-btn::before {
  content: "";
	display:block;
	background-image:url(../img/sp/icon-005.png);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:auto 100%;
	height:10vw;
	width:10vw;
}
.grad-item {
  position: relative;
  overflow: hidden;
  height: 80px; /*隠した状態の高さ*/
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px; /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  content: "";
}
.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked ~ .grad-btn::before {
  content: "";
	display:block;
	background-image:url(../img/sp/icon-004.png);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:auto 100%;
	height:10vw;
	width:10vw;
	 /*チェックされていたら、文言を変更する*/
}
.grad-trigger:checked ~ .grad-item {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ .grad-item::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}


.grad-item div{
	padding:0 15vw;
	margin-bottom:3vw;
}

.content-frame div ul li{
	float:none;
	width:100%;
	margin-right:0;
	margin-bottom:3vw;
}

.content-frame div h4{
	color:#FFFFFF;
	background-color:#000000;
	padding:2vw;
}

.content-frame div p{
	padding:2vw 0;
}

.content-frame div h4,
.content-frame div p{
	font-size:3.5vw;
}


.tell-frame{
	padding:6vw 15vw;
}

.tell-frame h4{
	font-size: 4.5vw;
	margin:2vw 0;
}

.tell-frame p{
	font-size: 5.5vw;
}

.tell-frame p span{
	font-size: 4.3vw;
}

.tell-frame ul{
	overflow:hidden;
	padding:0 10vw;
	margin-top:3vw;
}

.tell-frame ul li{
	float:left;
	width:calc( 100% / 2 - 0.1rem );
	border-right:0.1rem solid #FFFFFF;
}

.tell-frame ul li:last-of-type{
	border-right:0;
}

.tell-frame ul li a{
	display:block;
}


.product-frame h4{
	border-bottom:0;
	color: #FFFFFF;
	background-color: #000000;
	padding: 2vw;
	font-size:3.5vw;
}

.product-frame h4 span{
	float:right;
	font-size:3vw;
}

.product-frame h4 .shop-btn{
	display:none;
}

.product-frame .grad-wrap{
	margin-top:-12vw;
	padding:0 3vw;
	padding-top:10vw;
}

.product-frame .grad-wrap .grad-item{
	height:170px;
}

.grad-trigger:checked ~ .grad-item{
	height:auto;
}

.product-frame p{
	padding:0 3vw;
}

.product-frame div p{
	font-weight:bold;
	font-size:3vw;
}

.product-frame div ul li{
	float: left;
	width: calc( 100% / 2 - 1vw );
	margin-right: 2vw;
	margin-bottom: 3rem;
}

.product-frame ul li:nth-of-type(3n){
	margin-right:2vw;
}

.product-frame div ul li:nth-of-type(2n){
	margin-right:0;
}

.product-frame .btn-frame{
	padding:0;
	margin-bottom:10vw !important;
}

.product-frame .btn-frame a{
	text-align:center;
	display:block;
	border:0.1rem solid #000000;
	padding:4vw 0;
	background-image: url(../img/sp/icon-006.jpg),url(../img/sp/icon-007.jpg);
	background-repeat: no-repeat;
	background-position: left 6vw center,right 6vw center;
	background-size:auto 40%;
	font-size:4vw;
}

/*========================
	footer
========================*/

footer{
	border-top:0;
	background-color:#000000;
	color:#FFFFFF;
	text-align:center;
	padding:0 3vw;
}

footer .footer-inner-frame{
	padding-top:6vw;
	padding-bottom:3vw;
}

.corporate-frame{
	padding:0 12vw;
}

.corporate-frame h1{
	font-size: 5.5vw;
}

.corporate-frame h2{
	margin-top:2vw;
	margin-bottom:4vw;
}

.corporate-frame h2,
.corporate-frame p span{
	font-size: 4vw;
}

.corporate-frame p{
	font-size: 4.3vw;
}

.corporate-frame p a{
	font-size: 4.3vw;
	color:#FFFFFF;
}

/*@media screen and (-webkit-min-device-pixel-ratio:0) {
  ::i-block-chrome, .corporate-frame p a{
    color:#FFFFFF;
  }
}*/

.corporate-frame .tell-img{
	padding:0 10vw;
	margin-top:3vw;
	box-sizing:border-box;
}

.corporate-frame ul{
	overflow:hidden;
	padding: 0 15vw;
	margin:3vw 0;
}

.corporate-frame ul li{
	float: left;
	width: calc( 100% / 2 - 0.1rem );
	border-right: 0.1rem solid #FFFFFF;
}

.corporate-frame ul li:last-of-type{
	border-right:0;
}

.footer-menu{
	background-color:#D9D9D6;
	margin-top:6vw;
}

.footer-menu ul{
	padding:0 3vw;
}

.footer-menu ul li{
	border-bottom:0.1rem solid #000000;
}

.footer-menu ul li a{
	display:block;
	padding:4vw 0;
	font-size:3.5vw;
}

.footer-menu ul li:last-of-type{
	border-bottom:0;
}

small{
	box-sizing:border-box;
	padding:4vw;
	background-color:#000000;
	color:#FFFFFF;
}

.online-shop{
	background-image:url(../img/sp/icon-008.png);
	background-size:auto 35%;
	background-position:left 21vw center;
}


form#mailformpro{
	margin-bottom:3rem;
}

form#mailformpro label{
	font-size:3vw;
}

.thanks-frame{
	height:90vw;
	padding:0 3vw;
	box-sizing:border-box;
}

.thanks-frame h1{
	font-size:9vw;
	line-height:10vw;
	margin-bottom:5vw;
}

}