@charset "utf-8";

a,abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:0 0;
	list-style-type:none;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}
* html body{padding-left:1px}
* html .clearfix{height:1%}
table{border-collapse:collapse}
dl,ul{zoom:1;}

html{font-size: 62.5%;}
body{
	font-style: normal;
	background-color: #fff;
	color: #808080;
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}
body#page.login,
body#page.menu,
body#page.reset{
	background-color: #e5e6e8;
}

html,body {
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}
dd,dt,h1,h2,h3,h4,h5,h6,li,p,td,th,address,div,span{
	margin:0;
	padding:0;
	word-break: break-all;
	font-size:2.66vw;
	line-height:1.6;
}
@media (max-width: 750px) {
	body,
	dd,dt,h1,h2,h3,h4,h5,h6,li,p,td,th,address,div,span{
		font-size:3.2vw;
		line-height:1.6;
	}
}

.clearfix:before,
.clearfix:after,
.container:before,
.container:after,
.articleBox:before,
.articleBox:after{
  content: " ";
  display: table;
}
*:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.clearfix,.fleft,.fright{display:block}
.cb:after,
.clearfix:after,
.articleBox:after,
dl:after{content:".";display:block;height:0;clear:both;visibility:hidden}

.boxct{margin:0 auto;}
.fright{float:right;}
.fleft{float:left;}
.l{float:left;}
.r{float:right;text-align:left;}
.ct{text-align:center;}
.ct-pc{text-align:center;}
.mct{margin:0 auto;}
@media (max-width: 769px) {
.ct-pc{text-align:left;}
}
.fl-sh{/*縦横中央*/
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-content: center;
	align-content: center;
	-webkit-justify-content: center;
	justify-content: center;
}
.fl-h{/*縦中央*/
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}
a{
	overflow: hidden;
	color: #333;
	transition: 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
a:hover{
	/*opacity: 0.6;*/
}
a,a:hover{text-decoration:none}
a:hover img{opacity: 0.6;}
img{
	border:0;
	margin: 0;
	padding: 0;
	vertical-align: bottom;
	transition: 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

.fl05:first-letter{letter-spacing:0.5em}
.fl1:first-letter{letter-spacing:1em}
.fl2:first-letter{letter-spacing:2em}
.l05{letter-spacing:0.51em}
.ls10{letter-spacing:1em}
.ls20{letter-spacing:2em}


.brpc{display:block;}
.brsp{display:none;}
.pc{display:block;visibility: visible;}
.sp{display:none;visibility: hidden;}
@media (max-width: 769px) {
	.brpc{display:none;}
	.brsp{display:block;}
	.pc{display:none;visibility: hidden;}
	.sp{display:block;visibility: visible;}
}

.mt-p10 {margin-top: 10px !important;}
.mt-p20 {margin-top: 20px !important;}
.mt-p30 {margin-top: 30px !important;}
.mt-p40 {margin-top: 40px !important;}
.mt-p50 {margin-top: 50px !important;}
.mt-p60 {margin-top: 60px !important;}
.mb-p10 {margin-bottom: 10px !important;}
.mb-p20 {margin-bottom: 20px !important;}
.mb-p30 {margin-bottom: 30px !important;}
.mb-p40 {margin-bottom: 40px !important;}
.mb-p50 {margin-bottom: 50px !important;}
.mb-p60 {margin-bottom: 60px !important;}
.mrl-a {margin-left: auto !important;margin-right: auto !important;}
.pt-p10 {padding-top: 10px !important;}
.pt-p20 {padding-top: 20px !important;}
.pt-p30 {padding-top: 30px !important;}
.pt-p40 {padding-top: 40px !important;}
.pt-p50 {padding-top: 50px !important;}
.pt-p60 {padding-top: 60px !important;}
.pb-p10 {padding-bottom: 10px !important;}
.pb-p20 {padding-bottom: 20px !important;}
.pb-p30 {padding-bottom: 30px !important;}
.pb-p40 {padding-bottom: 40px !important;}
.pb-p50 {padding-bottom: 50px !important;}
.pb-p60 {padding-bottom: 60px !important;}

.ft-p1 {font-size: 2.8rem;}
.ft-p2 {font-size: 2.2rem;}
.ft-p3 {font-size: 2rem;}
.ft-p4 {font-size: 1.8rem;}
@media (max-width: 750px) {
	.ft-p1 {font-size: 5.23vw;}
	.ft-p2 {font-size: 4.99vw;}
	.ft-p3 {font-size: 4.48vw;}
	.ft-p4 {font-size: 4vw;}
/*
    .ft-p1 {font-size: 3.4rem;}1.416666666666667‬
    .ft-p2 {font-size: 3.2rem;}1.333333333333333‬
    .ft-p3 {font-size: 2.8rem;}1.166666666666667‬
    .ft-p4 {font-size: 2.4rem;}
    .ft-p5 {font-size: 2.2rem;}0.9166666666666667‬
*/
}
h1,h2,h3,h4,h5,.bold{font-weight:bold;}

.bk1{background-color:#f0f0f0;}


/* ***********************************************************
* サイズ関連
* *********************************************************** */
.w50{width:50% !important;max-width:50% !important;}
.w100{width:100% !important;max-width:100% !important;}
.w-auto{width:auto;}

#warper{width:100%;overflow: hidden;position: relative;}
.contents{width:90vw;margin:0 auto;display:table;}
.contents2{width:74.6vw;margin:0 auto;display:table;}

.table{display:table;}


/* ***********************************************************
* リスト
* *********************************************************** */
.column{
	-webkit-display: flex;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
.column .box{float:left;}


/* ---------- 2列 ---------- */
.col2::after {
	content: "";
	display: block;
	width:46%;
}
.col2 .box{
	width:46%;
}

@media (max-width: 750px) {
  .col2 .box{
		float:none;
		margin:0 auto;
		display:table;
		width:100%;
	}
}

/* ---------- 3列 ---------- */
.col3::after {
	content: "";
	display: block;
	width:32%;
}
.col3 .box{
	width:32%;
}
@media (max-width: 750px) {
	.col3::after {
		content: "";
		display: block;
		width:48%;
	}
	.col3 .box{width:48%;}
}


/* ---------- 4列 ---------- */
.col4::after {
	content: "";
	display: block;
	width:22%;
}
.col4 .box{
	width:22%;
}
@media (max-width: 750px) {
	.col4::after {
		content: "";
		display: block;
		width:48%;
	}
	.col4 .box{width:48%;}
}


/* ***********************************************************
* ヘッダー
* *********************************************************** */
#header{
	width:100%;
	height:auto;
	position:relative;
	margin:0 auto	;
	display: table;
	z-index: 100;
	background-color: #900039;
}
#page.login #header,
#page.menu #header{
	background-color:transparent;
}
#headerin{
	width:100%;
	height:auto;
}
	#header #title{
		z-index: 5;
		position: relative;
		width:45vw;
		margin:5.3vw auto 3.3vw;
	}
	#page.menu #header #title{
		width:22.66vw;
		margin:5.3vw auto;
	}
		#header #title img{
			width:100%;
		}

#header .navi-sns {
	position: absolute;
	right:4.2vw;
	top:4vw;
  width: 12.66vw;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
	#header .navi-sns li {
	  width: 7.5vw;
	  height: 7.5vw;
	}
		#header .navi-sns li a{
			width: 100%;
		  height: 100%;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-position: center center;
			display:  inline-block;
			text-indent: -99999px;
		}
		#header .navi-sns li:nth-child(1) a{
		  background-image: url(../images/common/icon-white-facebook.svg);
		}
		#header .navi-sns li:nth-child(2) a{
		  background-image: url(../images/common/icon-white-instagram.svg);
		}

		.menu #header .navi-sns li:nth-child(1) a{
		  background-image: url(../images/common/icon-gray-facebook.svg);
		}
		.menu #header .navi-sns li:nth-child(2) a{
		  background-image: url(../images/common/icon-gray-instagram.svg);
		}


		#page.login #header .navi-sns li:nth-child(1) a,
		#page.menu #header .navi-sns li:nth-child(1) a{
		  background-image: url(../images/common/icon-gray-facebook.svg);
		}
		#page.login #header .navi-sns li:nth-child(2) a,
		#page.menu #header .navi-sns li:nth-child(2) a{
		  background-image: url(../images/common/icon-gray-instagram.svg);
		}


#header #user-id{
	position: relative;
	margin:5vw 0 3.3vw;
	width:100vw;
	text-align:center;
	color:#fff;
}
#page.login #header #user-id,
#page.menu #header #user-id{
	margin:0 0 2vw;
	color:#808080;
}
	#header #user-id div{
		text-align:center;
		margin:0 auto;
		display:table;
	}


/* ***********************************************************
* フッター
* *********************************************************** */
#footer{
	width:100%;
	height:17.33vw;
	border-top: 2px solid #cccccc;
	position:fixed;
	bottom:0;
	background-color: #fff;
}
	#footer ul{
		width:92vw;
		height:100%;
		margin:0 auto;
		display: -webkit-flex;
	  display: flex;
	  -webkit-align-items: center;
	  align-items: center;
	  -webkit-justify-content: space-between;
	  justify-content: space-between;
	}
		#footer ul li {
			width: 18.4vw;
			height: 100%;
		}
			#footer ul li a{
				width: 100%;
				height: 100%;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-position: center center;
				display:  inline-block;
				text-indent: -99999px;
			}
			#footer ul li:nth-child(1) a{
				background-image: url(../images/common/ft-navi01.png);
			}
			#footer ul li:nth-child(2) a{
				background-image: url(../images/common/ft-navi02.png);
			}
			#footer ul li:nth-child(3) a{
				background-image: url(../images/common/ft-navi03.png);
			}
			#footer ul li:nth-child(4) a{
				background-image: url(../images/common/ft-navi04.png);
			}
			#footer ul li:nth-child(5) a{
				background-image: url(../images/common/ft-navi05.png);
			}

			#footer ul li:nth-child(1) a:hover{
				background-image: url(../images/common/ft-navi01-on.png);
			}
			#footer ul li:nth-child(2) a:hover{
				background-image: url(../images/common/ft-navi02-on.png);
			}
			#footer ul li:nth-child(3) a:hover{
				background-image: url(../images/common/ft-navi03-on.png);
			}
			#footer ul li:nth-child(4) a:hover{
				background-image: url(../images/common/ft-navi04-on.png);
			}
			#footer ul li:nth-child(5) a:hover{
				background-image: url(../images/common/ft-navi05-on.png);
			}


/* ***********************************************************
* ボタン
* *********************************************************** */
#contents{
	padding:0 0 17.33vw;
}
.account #contents {
    padding: 0;
}
#contents .button{
	display:table;
	margin:0 auto;
	width:36vw;
	height:13.3vw;
	border:2px solid #900039;
	border-radius: 2vw;
}
	#contents .button a{
		width:100%;
		height:100%;
		opacity: 1;
		font-size:4vw;
		font-weight:bold;
		display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
    -webkit-justify-content: center;
    justify-content: center;
    text-align: center;
		color:#900039;
	}
	#contents .button:hover{
		background-color: #900039;
	}
	#contents .button:hover a{
		color:#fff;
	}

#contents .button.red{
	display:table;
	margin:0 auto;
	width:36vw;
	height:13.3vw;
	background-color: #900039;
	border:2px solid #900039;
	border-radius: 2vw;
}
#contents .button.red:hover{
	background-color: #66002a;
	border:2px solid #66002a;
	color:#fff;
}
#contents .button.red a{
	color:#fff;
}

#contents .buttonbox{
	width:76vw;
	-webkit-display: flex;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 5.3vw auto 4.6vw;
}
#contents .buttonbox .button{
	margin: 0 !important;
}





/* ***********************************************************
* 基本設定
* *********************************************************** */
#page.page #contents .titlebox{
	width:100%;
	height:13.3vw;
	border-bottom:2px solid #cccccc;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-content: center;
	align-content: center;
	-webkit-justify-content: center;
	justify-content: center;
	text-align: center;
}
	#page.page #contents .titlebox h1{
		font-size:4.4vw;
		font-weight:bold;
		color:#808080;
	}
#page.page #contents .titlebox.pt2{
	height:auto;
	padding:8.6vw 0;
	border-bottom:none;
}
	#page.page #contents .titlebox.pt2 h1{
		font-size:5.3vw;
		color:#4d4d4d;
	}
	#page.page #contents .titlebox.pt2 p{
		margin-top:3vw;
		font-size: 3.2vw;
	}

/* ***********************************************************
* テーブル
* *********************************************************** */
#page #contents table{
	width:100%;
	margin-top: 2vw;
}
	#page #contents tr{
		border-bottom:1px solid #cccccc;
	}
	#page #contents tr:nth-child(2n){
		background-color: #fafafa;
	}

	#page #contents table.tb01{
		margin-top: 6vw;
	}
	#page #contents table.tb01 caption{
		font-size:3.2vw;
		color:#900039;
		font-weight: bold;
		padding:0 0 3.3vw;
	}
		#page #contents table.tb01 tr:first-child{
			border-top:1px solid #cccccc;
		}
		#page #contents table.tb01 th{
			width:28vw;
			text-align:center;
			padding:2vw 0;
		}
		#page #contents table.tb01 td{
			width:calc(100% - 28vw);
			text-align:left;
			padding:2vw 2vw 2vw 6.6vw;
		}



#contents input{
	width:100%;
	height:10.6vw;
	padding: 0 4vw;
	border-radius: 2vw;
	text-align:left;
	line-height: 1;
	font-size: 3.7vw;
	background-color: #fff;
	border:1px solid #b3b3b3;
	box-sizing: border-box;
	color:#808080;
}
#contents input.quantity{
	padding: 0 1vw;
	text-align:center;
}
#contents select{
	width:100%;
	height:10.6vw;
	padding: 0 4vw;
	border-radius: 2vw;
	text-align:left;
	line-height: 1;
	font-size: 3.7vw;
	background-color: #fff;
	border:1px solid #b3b3b3;
	box-sizing: border-box;
	color:#808080;
}
#contents ::placeholder {
  color: #999999;
  font-size: 3.7vw;
}
.account #contents ::placeholder {
  color: #999999;
  font-size: 2.66vw;
}

#contents label {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}
#contents input[type="checkbox"] {
  width: 3.46vw;
  height: 3.46vw;
  margin: -0.5vw 1.5vw 0 0;
  padding: 0;
	border-radius: 0;
	border: 1px solid #b3b3b3;
}


#contents .input-num{
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-content: center;
	align-content: center;
	-webkit-justify-content: center;
	justify-content: center;
	text-align: center;
}
#contents .input-numin{
	display:table;
}
#contents .input-numin .input-num-prepend,
#contents .input-numin .input-num-input,
#contents .input-numin .input-num-append{
	display:table-cell;
	vertical-align: middle;
	text-align: center;
}
	#contents .input-numin .input-num-prepend{
		padding-right:1.5vw;
	}
	#contents .input-numin .input-num-append{
		padding-left:1.5vw;
	}
#contents .input-num input{
	width:12vw;
	height:6.63vw;
	color:#808080;
}
#contents .input-num .btn{
	width:5.3vw;
	height:5.3vw;
	border-radius: 2.65vw;
	font-size:6vw;
	line-height:1;
	border:2px solid #b3b3b3;
	color:#b3b3b3;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-content: center;
	align-content: center;
	-webkit-justify-content: center;
	justify-content: center;
	text-align: center;
}

#contents textarea {
    width: 100%;
    height: 30.6vw;
    padding: 4vw;
    box-sizing: border-box;
		border-radius: 2vw;
		text-align:left;
		line-height: 1.6;
		font-size: 3.7vw;
		background-color: #fff;
		border:1px solid #b3b3b3;
}