@charset "UTF-8";

/*汎用設定*/
body
{
	font-family: dnp-shuei-mincho-pr6n, sans-serif; 
	line-break: strict;
	word-break: break-all;
	text-align: center;
	text-justify: distribute;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	;
	width: 100%;
	background-image: url(../img/bg_main.jpg);
	background-repeat: repeat-y;
	background-size: contain;
	color: #57413A;
}
a:link{
	color: #57413A;
	text-decoration: none;
}
a:visited{
	color: #57413A;
}
a:hover{
	color: #8B7872;
}
/*PCSP表示設定*/	
.pc{
	margin: 0px auto;
	display: block;
}
.sp{
	display: none;
}
/*float解除*/		
.clear{
	clear:both;
	}
/*背景色設定*/	
.gray{
	background-color:#d6d6d6;
	}
/*padding*/
.pt1{
	padding-top: 1rem;
}
.pt2{
	padding-top: 2rem;
}
.pt3{
	padding-top: 3rem;
}
/*マージン*/
.mt0{
	margin-top: -1rem;
}
.mb0{
	margin-bottom: 0px;
}

/*ヘッダー設定*/		
#header-wrap{
	width: 100%;
	background-image: url(../img/bg.jpg);
	height: 100vh;
	background-size: cover;
	padding-top: 0px;
	display: flex;
	flex-direction: column;
	align-content: space-between;
	justify-content: space-between;
}
#header-wrap .header {
	width: 100%;
	background-image: url(../img/key_pc.png);
	margin: 0px auto;
	background-repeat: no-repeat;
	background-position: center center;
	display: flex;
	flex-direction: row-reverse;
	padding-top: 0px;
	align-items: center;
}
#header-wrap .header h1{
	display: none;
}
#header-wrap .header .intro{
	width: 40%;
}
#header-wrap .header .intro a{
	display: block;
	width: 80%;
	background-image: url(../img/intro.png);
	background-repeat: no-repeat;
	background-size: contain;
	height: 0px;
	margin: 0px auto;
	padding-top: 80%;
}
#header-wrap .common-hd{
	width: 100%;
	height: 8%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: right;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	background-color: #57413a;
	max-height: 50px;
}
#header-wrap .common-hd .logo{
	width: 20%;
	max-width: 150px;
}
.common-hd .logo a{
	width: 100%;
}

.common-hd .logo img{
		width: 100%;
	min-width: 100px;
}
.sns{
	vertical-align: middle;
	width: 20%;

}
.sns img{
	max-width: 50px;
	width: 50%;
	min-width: 30px;
}
#header-wrap .underbar{
	width: 100%;
	height: 8%;
	background-color: #57413A;
	max-height: 50px;
}
/*ヘッダーメニュー設定*/
.menu{
	padding: 4rem 1rem 1rem;
	color: #FFFFFF;
	font-size: 2rem;
	line-height: 3rem;
	letter-spacing: normal;
	background-color: #FFFFFF;
	background-image: url(../img/boder_pc.png);
	background-repeat: no-repeat;
	background-position: 0% top;
	background-size: 100% auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
	}
.menu img{
	width: 100%;
	height: auto;
	max-width: 1100px;

}	
.menu a{
	margin-left: 1em;
	margin-right: 1em;
}
/*コンテンツ設定*/	
#wrap{
	margin: 0px;
	padding: 0px;
	width: 100%;
	background-image: url(../img/boder_pc.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: 0% bottom;
}
/*コンテンツ共有設定*/
#contents01,#contents02,#contents03{
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-top: 2em;
	padding-bottom: 5em;
}

.content-wrap{
	width: 100%;
	max-width: 1100px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-left: 20px;
	margin: 0px auto;
	padding-right: 20px;
}
#contents01 .item-name{
	font-size: 2rem;
	border-bottom: 1px solid #57413A;
	margin: 0px auto;
	width: 80%;
}
#contents01 .sub{}
#contents01 .performer{
	font-size: 2rem;
}
#contents01 .btn{
	width: 80%;
	max-width: 350px;
}
#contents02 .content-wrap{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 3rem;
	box-sizing: border-box;
	}
#contents03 .content-wrap{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 3rem;
	box-sizing: border-box;
	}	
/*タイトル設定*/
.ttl{
	padding-bottom: 1em;
}
/*タイトル－画像*/
.ttl img{
	width: 100%;
	max-width: 330px;
	}
/*タイトル－文字*/	
.ttl .title{
	padding-top: 0.2em;
	padding-right: 1em;
	padding-left: 1em;
	padding-bottom: 0.2em;
	font-size: 3em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}	
.line{
	width: 90%;
	margin: 0px auto;
}
.line img{
	width: 100%;
}
/*画像リスト枠*/
.list{
	width: 100%;
	display: flex;
	justify-content: space-around;
}
/*横3列*/
.col-03{
	width: 30%;
	float: left;
	margin-left: 1.5%;
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.col-03 p{
	color: #FFFFFF;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	}
.col-03 .item-pic img{
	width: 100%;
}
/*横2列*/
.col-02{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	float: left;
	margin-right: 2%;
	margin-bottom: 2%;
}
.col-02 p{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
.col-02 .item-pic img{
	width: 100%;
}

/*横1列*/
.col-01{
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-bottom: 4em;
}
.col-01 p{
	color: #FFFFFF;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
.col-01 .item-pic {
	width: 100%;
	height: 0px;
	padding-top: 57%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center 0%;
}

/*横並び-マイナスマージン*/
.minus-margin{
	margin-right: -4%;
}

/*商品詳細*/
.spec{
	width: 100%;
	margin-top: 0.5em;
	display: flex;
	justify-content: center;
	align-items: stretch;
	}
.spec .spec-img{
	width: 40%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.spec .spec-img img{
	width: 100%;
}
.spec .spec-tex{
	width: 60%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-left: -1px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	font-size: 1.2rem;
}
.spec .spec-tex img{
	width: 100%;
	margin-top: -12px;
}
.spec .spec-tex .item-name{
	margin: 0px auto;
	width: 90%;
	border-bottom: 1px solid #57413A;
	font-size: 2rem;
}
.spec .spec-tex .sub{
	font-size: 1rem;
}
.spec .spec-tex .title{
	line-height: 3rem;
	font-weight: 700;
	font-variant: normal;
	font-style: normal;
	font-size: 2.5rem;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	padding: 0.5rem;
	display: block;
}

.text{
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 2em;
	box-sizing: border-box;
	text-align: left;
	margin-top: 0px;
}
.text h4{
	font-weight: bold;
	margin-bottom: -1px;
	}
.cap{
	width: 60%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 2rem;
	margin: 0px auto 1rem;
	font-weight: 900;
	color: #FFFFFF;
	}
.cap_s{
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 1.4rem;
	margin-bottom: 3px;
	}	
/*注文*/
.order-btn {
	width: 100%;
	}
.order-btn a{
	display: block;
	margin: 0px auto;
	width: 60%;
	background-image: url(../img/order.png);
	background-repeat: no-repeat;
	background-size: contain;
	height: 0px;
	padding-top: 16.124%;
	}
 a:hover{
       opacity:0.7;
       filter:alpha(opacity=70);
	   }	
	
	
/*フッター*/

#copyright
{
	width: 100%;
	text-align: center;
	padding-top: 1em;
	padding-right: 0;
	padding-left: 0;
	padding-bottom: 1em;
	margin: 0px auto;
	background-color: #57413A;
	color: #FFFFFF;
	background-image: url(../img/hd_bg.png);
	background-size: cover;
}
.attention{
	padding: 1rem 1rem 3rem;
	font-size: 1rem;
	margin-bottom: 0px;
}

/*上に戻るボタン*/

#page-top
{
	position: fixed;
	bottom: 20px;
	right: 20px;
}
/*テキスト設定*/
.small{
	font-size: 0.8em
}
.medium{
	font-size:1em
	}
.large{
	font-size: 1.5em
	}
.xlarge{
	font-size: 1.8em;
	}	
.pnk{
	color:#E44A91;
	}
.red{
	color: #B52828;
	}	
.blank{
	display: inline-block;
		}	

@media (max-width: 800px){
#header-wrap .header .intro{
	width: 100%;
}	
#header-wrap .header .intro a{
	display: block;
	width: 80%;
	background-image: url(../img/intro.png);
	background-repeat: no-repeat;
	background-size: contain;
	height: 0px;
	margin: 0px auto;
	padding-top: 50%;
	background-position: center 0%;
}	
.sns{
	vertical-align: middle;
	width: 40%;

}	
}
@media (max-width: 680px){
	#header-wrap .header .intro a{
	padding-top: 70%;
}
.line{
	width: 100%;
}
.spec{
	display: block;
	}
.spec .spec-img{
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-bottom: 1.5rem;
}
.spec .spec-img img{
	width: 70%;
}
.spec .spec-tex{
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-left: -1px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	font-size: 1.2rem;
}	
#contents02 .content-wrap{
	padding: 1rem;
	}	
#contents03 .content-wrap{
	padding: 1rem;
	}		
.order-btn a{
	width: 80%;
	padding-top: 18.124%;
	max-width: 400px;
	}	
	}
@media (max-width: 480px){
.list{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}	
.col-02{
	width: 100%;
}	
}