@charset "utf-8";

/*@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/NotoSerifCJKjp/NotoSerifCJKjp-ExtraLight.otf') format('opentype');
}*/

html{
	font-size:10px;
}

a{
	outline:none;
	color:#000000;
}

body{
	letter-spacing: 0.1rem;
	font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 77%;
	z-index: 1;
}

#page-top a {
	color: #000000;
	/*background: #694920;*/
	text-decoration: none;
	padding: 2.5rem 2.0rem;
	text-align: center;
	display: block;
	/*border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;*/
	background-image:url(../img/icon-001.png);
	background-position:top 0.8rem center;
	background-repeat:no-repeat;
	background-size:15% auto;
}

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

/*========================
	コンテンツ
========================*/

.top-img{
	background-image:url(../img/yamasen-001.jpg);
	background-repeat:no-repeat;
	background-size:contain;
	padding-top:43vw;
}

img{
	width:100%;
}

nav,
main,
#wrap{
	width:92rem;
	margin:0 auto;
}

/*========================
	header
========================*/

header{
	border-bottom:0.2rem solid #000000;
}

nav ul{
	overflow:hidden;
}

nav ul li{
	float:left;
	width:calc( 100% / 6 );
}

@supports (-ms-ime-align: auto) {
	nav ul li{
		width:16%;
	}
  /* Edge のみ適用される */
}

/*nav ul li div{
	display:table-cell;
	vertical-align:middle;
}*/

nav ul li a,
nav ul li a span{
	display:block;
}

nav ul li a{
	font-size:2.0rem;
	font-weight:bold;
	text-align:center;
	padding:1.5rem 0;
	-webkit-transition-property: all;
	-webkit-transition: 0.3s linear;
	transition-property: all;
	transition: 0.3s linear;
}

nav ul li a:hover{
	color:#e50213;
	-webkit-transition-property: all;
	-webkit-transition: 0.3s linear;
	transition-property: all;
	transition: 0.3s linear;
}

nav ul li a span{
	font-size:1.2rem;
	font-weight:normal;
}

/*========================
	main
========================*/

main{
	margin-top:9rem;
	margin-bottom:15rem;
}

#wrap{
}

.content-frame{
	text-align:center;
	margin-bottom:10rem;
}

.content-frame h2{
	font-size:3.3rem;
	/*font-weight:bold;*/
	border-bottom:0.1rem solid #000000;
	display:inline-block;
	height:4.5rem;
	margin-bottom:1rem;
}

.content-frame h3{
	font-size:2.2rem;
	margin-bottom:4rem;
}

.content-frame p{
	font-size:1.5rem;
	line-height:2.8rem;
}

.content-frame div{
	text-align:left;
	margin-bottom:5rem;
}

.content-frame div:last-of-type{
	margin-bottom:0;
}

.content-frame div ul{
	overflow:hidden;
}

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

.content-frame div ul li:last-of-type{
	margin-right:0;
}

.content-frame div h4,
.content-frame div p{
	font-weight:bold;
	font-size:1.5rem;
}

.content-frame div p{
	font-weight:normal;
}

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


#category{
	margin-bottom:7rem;
}

.product-frame{
	text-align:left;
}

.product-frame h4{
	position:relative;
	border-bottom:0.1rem solid #000000;
	font-size:2.2rem;
	font-weight:bold;
	margin-bottom:1.5rem;
}

.product-frame h4 span{
	margin-left:1rem;
}

.product-frame h4 a{
	position:absolute;
	right:0;
	font-size:1.5rem;
	background-image:url(../img/icon-003.jpg),none;
	background-repeat:no-repeat;
	background-position:left center,right center;
	padding:0 3rem;
}

.product-frame h4 a:hover{
	background-image:url(../img/icon-003.jpg),url(../img/icon-004.png);
}

.product-frame ul{
	overflow:hidden;
	margin-top:5.5rem;
}

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

.product-frame div ul li{
  width:calc( 100% / 3 - 2.1rem )\9; /* IE10以下 */
}

@media all and (-ms-high-contrast: none){
  .product-frame div ul li{
    width:calc( 100% / 3 - 2.1rem );/* IE10以上 */
  }
}

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


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

footer{
	border-top:0.2rem solid #000000;
}

footer .footer-inner-frame{
	width:110rem;
	margin:0 auto;
	padding:6rem 0;
	overflow:hidden;
}

.footer-inner-frame div{
	float:left;
	width:calc( 100% / 3 - 6.1rem );
	padding:4rem 0;
	padding-right:4rem;
	margin-right:4rem;
	border-right:0.1rem solid #000000;
	display:table;
}

.footer-inner-frame div:first-of-type{
	text-align:center;
}

.footer-inner-frame div:last-of-type{
	border-right:0;
	padding-right:0;
	margin-right:0;
}

.footer-inner-frame div section{
	display:table-cell;
	vertical-align:middle;
}

.footer-inner-frame div h1{
	font-size:3.4rem;
}

.footer-inner-frame div h2{
	font-size:2.1rem;
}

.footer-inner-frame div h3{
	font-size:1.7rem;
}

.footer-inner-frame div h3 span{
	font-size:2.1rem;
}

.footer-inner-frame div h3 img{
	width:auto;
	float:right;
	display:block;
	margin-top:0.3rem;
	margin-right:2rem;
}

.footer-inner-frame div section li{
	font-size:1.6rem;
	margin-bottom:0.5rem;
}

.footer-inner-frame div section li:last-of-type{
	margin-bottom:0;
}

.footer-inner-frame div section li a{
	display:block;
	font-size:1.6rem;
}

.online-shop{
	background-image:url(../img/icon-003.jpg);
	background-repeat:no-repeat;
	background-size:auto 100%;
	background-position:left center;
	padding-left:2.5rem;
}

small{
	display:block;
	width:100%;
	text-align:center;
	padding:1.5rem;
	background-color:#D9D9D6;
	font-size:1.5rem;
	box-sizing:border-box;
}

/*========================
	thanks
========================*/

.thanks-frame{
	display:table;
	width:100%;
	height:30rem;
}

.thanks-frame .thanks-inner-frame{
	display:table-cell;
	vertical-align:middle;
}

.thanks-frame h1{
	font-size:3.4rem;
}

.thanks-frame p{
	font-size:1.6rem;
}

.thanks-frame .btn-frame{
	width:50%;
	margin:0 auto;
	margin-top:5rem;
}

.thanks-frame .btn-frame a{
	display:block;
	text-align:center;
	padding:1.5rem 0;
	background-color:#F9354D;
	color:#FFFFFF;
	font-size:1.6rem;
	font-weight:bold;
}