@charset "utf-8";

/* ***********************************************************
* エラー
* *********************************************************** */
#page.page #contents .error input,
#page.page #contents .error input[type="checkbox"] {
	background-color:#ffe8e3;
	border: 1px solid #cc3c1f;
}

#page.page #contents .error input::placeholder{
	color:#900039;

}
#page.page #contents .errorbox{
	color:#900039;
	padding:1vw 2vw 0 2vw;
	font-size:3.6vw;
	line-height: 1.4;
	font-weight: bold;
}

#page.page #contents .errorbox{
	padding:4vw 2vw 4vw 2vw;
	text-align: center;
}
#page.page.login #contents .errorbox,
#page.page.password.reset #contents .errorbox{
	padding:2vw 2vw 4vw 2vw;
	text-align: left;
}
#contents .error label {
  background-color:#ffe8e3;
	color:#900039;
}


/* ***********************************************************
* ログイン
* *********************************************************** */
#page.page.login #header h1{
	position: relative;
	margin:14vw auto 12vw;
	width:37vw;
	top:auto;
	left:auto;
}
#page.page.login #contents .loginbox .box{
	margin:0 0 6vw;
}
	#page.page.login #contents .loginbox input{
		border:none;
	}
	#page.page.login #contents .loginbox .button{
		width:100%;
	}

#page.page.login #contents .buttonbox{
	margin:19.33vw auto 10vw;
}
	#page.page.login #contents .buttonbox .button{
		width:100%;
		margin-bottom:3.3vw !important;
	}



/* ***********************************************************
* メニュー
* *********************************************************** */
#page.page #contents .menu-list ul{
	width:100%;
	-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 0 2.7vw;
}
	#page.page #contents .menu-list ul li {
		width: 42.64vw;
		height: 21.3vw;
		border-radius: 2vw;
		background-color: #fff;
		margin-bottom:3.3vw;
		float:right;
	}
	#page.page #contents .menu-list ul li:nth-child(2n) {
	  float: left;
	}
	#page.page #contents .menu-list ul li:nth-child(1) {
		width: 100%;
		height: 29.3vw;
		background-color: #900039;
		margin-bottom:7.2vw;
		float:none;
	}
		#page.page #contents .menu-list 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;
		}
		#page.page #contents .menu-list ul li:nth-child(1) a{
			background-image: url(../images/common/menu01.png);
		}
		#page.page #contents .menu-list ul li:nth-child(4) a{
			background-image: url(../images/common/menu06.png);
		}
		#page.page #contents .menu-list ul li:nth-child(5) a{
			background-image: url(../images/common/menu07.png);
		}
		#page.page #contents .menu-list ul li:nth-child(2) a{
			background-image: url(../images/common/menu02.png);
		}
		#page.page #contents .menu-list ul li:nth-child(3) a{
			background-image: url(../images/common/menu03.png);
		}
		#page.page #contents .menu-list ul li:nth-child(6) a{
			background-image: url(../images/common/menu04.png);
		}
		#page.page #contents .menu-list ul li:nth-child(7) a{
			background-image: url(../images/common/menu05.png);
		}

	#page.page #contents .menu-list ul li:hover {
		background-color: #900039;
	}
	#page.page #contents .menu-list ul li:nth-child(1):hover {
		background-color: #66002a;
	}
		#page.page #contents .menu-list ul li:nth-child(1):hover a{
			background-image: url(../images/common/menu01-on.png);
		}
		#page.page #contents .menu-list ul li:nth-child(4):hover a{
			background-image: url(../images/common/menu06-on.png);
		}
		#page.page #contents .menu-list ul li:nth-child(5):hover a{
			background-image: url(../images/common/menu07-on.png);
		}
		#page.page #contents .menu-list ul li:nth-child(2):hover a{
			background-image: url(../images/common/menu02-on.png);
		}
		#page.page #contents .menu-list ul li:nth-child(3):hover a{
			background-image: url(../images/common/menu03-on.png);
		}
		#page.page #contents .menu-list ul li:nth-child(6):hover a{
			background-image: url(../images/common/menu04-on.png);
		}
		#page.page #contents .menu-list ul li:nth-child(7):hover a{
			background-image: url(../images/common/menu05-on.png);
		}


/* ***********************************************************
* オーダー
* *********************************************************** */
	#page.order #contents .itembox th{
		width:calc(100% - 30vw);
		text-align: left;
		vertical-align: middle;
		padding:4.6vw;
		font-size:3.4vw;
	}
	#page.order #contents .itembox td{
		width:30vw;
		text-align: center;
		vertical-align: middle;
		padding:4.6vw 0;
	}
	#page.order #contents .itembox td .pieces{
		font-size:3.7vw;
		padding-right:2vw;
	}
		#page.order #contents .itembox td .unit{
			font-size:2.9vw;
		}

#page.order #contents .comment{
margin:5.3vw auto 0;
}
#page.order #contents .comment div{
	font-size:3.2vw;
	margin:0 auto 0.5vw;
}

#page.order #contents .form-comment{
color:#900039;
font-size:4vw;
text-align:center;
font-weight: bold;
margin:6vw auto 0;
}
#page.order #contents .order-date{
color:#808080;
font-size:3.6vw;
text-align:center;
font-weight: bold;
margin:2vw auto 5vw;
}
#page.order.completion #contents textarea{
min-height:17.3vw;
height:auto;
}



#page.order #contents .itembox .button{
margin:5.3vw auto 4.6vw ;
}

#page.order #contents .itembox .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;
}
#page.order #contents .itembox .buttonbox .button{
	margin: 0;
}



/* ***********************************************************
* マイページ
* *********************************************************** */
#page.mypage #contents table:last-child{
	margin-bottom: 4.6vw;
}


/* ***********************************************************
* 新規アカウント作成
* *********************************************************** */
#page.account #contents .stepbox{
	margin-bottom: 4.6vw;
}
	#page.account #contents .stepbox img{
		width:100%;
	}

#page.account #contents h2,
#page.mypage #contents h2{
	font-size:4vw;
	color:#900039;
	font-weight: bold;
	padding:0 0 3.3vw;
	margin:6vw auto 0;
	text-align: center;
}
#page.account #contents h2:nth-child(1),
#page.mypage #contents h2:nth-child(1){
	margin:0 auto;
}

#page.account #contents dl,
#page.contact #contents dl{
	width:100%;
	margin-bottom:4vw;
}
	#page.account #contents dt,
	#page.contact #contents dt{
		width:100%;
		display:flex;
		font-size:3.7vw;
		padding:0 0 0.5vw;
	  align-items: center;
	}
	#page.account #contents dt .required,
	#page.contact #contents dt .required{
		background-color:#900039;
		color:#fff;
		display:block;
		line-height: 1;
		padding:0.5vw 1vw;
		font-size:2.4vw;
		margin-left:3vw;
	}
#page.account #contents .c2 input,
#page.account #contents .c2 select{
	width:42.66vw;
	float:left;
}
#page.account #contents .c2 input:nth-child(2){
	float:right;
}
#page.account #contents .year{
	width:42.66vw;
	float:left;
}
#page.account #contents .month,
#page.account #contents .day{
	width:16vw;
	float:left;
	margin-left:7.67vw;
}

#page.account #contents .check dd div{
	display: table;
	margin-bottom: 1.5vw;
}

#page.account #contents .button,
#page.contact #contents .button{
	margin:9.3vw auto 10.6vw ;
}

#page.account #contents .tel1,
#page.account #contents .fax1{
	width:24vw;
	float:left;
}
#page.account #contents .tel2,
#page.account #contents .fax2{
	width:28vw;
	float:left;
}
#page.account #contents .tel3,
#page.account #contents .fax3{
	width:28vw;
	float:left;
}
#page.account #contents span.hyphen{
	width:5vw;
	line-height:10.6vw;
	float:left;
	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.account #contents .post1,
#page.account #contents .post2{
	width:24vw;
	float:left;
}


#page.account #contents .holiday dd div{
	width:12.857vw;
	float:left;
}

#page.account.check #contents table.tb01 {
  margin-top: 0;
}

#page.account.completion #contents .commentbox{
	display:table;
	margin:8vw auto 0;
	width:auto;
}
	#page.account.completion #contents .commentbox p{
		color:#900039;
		font-size:3.2vw;
		font-weight: bold;
		margin-bottom:3.2vw;
	}
#page.account.completion #contents .button{
	margin-top:30vw;
}


/* ***********************************************************
* カレンダー
* *********************************************************** */
#calendar {
  position: relative;
  margin: 5vw auto 10vw;
  width: 100%;
}

#calendar .calendar-navi {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    right: 0
}

#calendar .calendar-navi .prev,
#calendar .calendar-navi .next {
  display: table;
  float: left;
  position: relative;
  height:11.4vw;
}

#calendar .calendar-navi .next {
  float: right
}

#calendar .calendar-navi .prev a,
#calendar .calendar-navi .next a {
  display: table;
  padding: 0 0 0;
  color: #808080;
  width: 100%;
  height: 100%;
  position: relative;
  opacity: 1;
  font-size: 3.2vw;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-content: center;
  align-content: center;
}


#calendar .month {
  width: 30vw;
  margin: 0 auto;
	height:11.4vw;
	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;
}

#calendar .month h2 {
    text-align: center;
    height: 50px;
    font-size: 40px;
    font-weight: normal;
    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;
		color:#808080;
		font-size:4vw;
}

#calendar table {
    width: 100%;
    margin-top: 5vw;
}
#calendar table tr {
  border-bottom: 1px solid #e6e6e6;
}
#calendar table th {
  width: calc(100% / 7);
	font-size:2.8vw;
	height:6vw;
	text-align: center;
	vertical-align: middle;
  padding: 0;
}
#calendar table td {
  text-align: center;
	vertical-align: middle;
  padding: 0;
  height: 10.6vw;
}

#calendar table .holiday {
  background-color: #ffb7c8;
}
#calendar table .month-non {
  color: #d3bac1;
}



/* ***********************************************************
* 新着
* *********************************************************** */
#contents .news-box .news-header{
	margin-top:4vw;
	display:table;
	width:100%;
}
	#contents .news-box .news-header .box{
		width:100%;
	}
#contents .news-box .news-list{
	margin-bottom:5vw;
}
	#contents .news-box .news-list .box{
		width:100%;
		height:auto;
		overflow: hidden;
		padding:2vw 0;
		border-bottom: 1px solid #e6e6e6;
	}
		#contents .news-box .box a{
			width:100%;
			height:100%;
		}
			#contents .news-box .box .img{
				width:26.66vw;
				height:13.33vw;
				position: relative;
				overflow: hidden;
				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;
				float:left;
			}
			#contents .news-box .news-header .box .img{
				height:44.66vw;
				width:100%;
			}
				#contents .news-box .box .img img {
			    position: relative;
			    z-index: 5;
			    overflow: hidden;
			    width: 100%;
			    height: auto;
					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;
				}
				#contents .news-box .box:hover img{
					transform: scale(1.2, 1.2);
					opacity: 1;
				}
			#contents .news-box .box .comment{
				width:59.7vw;
				min-height:13.33vw;
				position: relative;
				overflow: hidden;
				display: flex;
				-webkit-align-items: center;
				align-items: center;
				-webkit-flex-wrap: wrap;
				flex-wrap: wrap;
				-webkit-align-content: center;
				align-content: center;
				margin:0 auto;
				float:right;
			}
			#page.detail #contents .news-box .box .comment{
				width:100%;
				min-height:auto;
				position: relative;
				overflow: hidden;
				display: table;
				margin:0 auto;
				float:none;
				padding:4vw 0 2vw;
			}
				#contents .news-box .box .comment .day{
					font-size: 2.4vw;
					color:#808080;
					width:100%;
				}
				#contents .news-box .box .comment h2{
					font-size: 3vw;
					color:#808080;
					width:100%;
				}
				#contents .news-box .box:hover .comment .day,
				#contents .news-box .box:hover .comment h2{
					color:#900039;
				}
			#contents .news-box .news-header .box .comment{
				width:100%;
				padding:2vw 0;
				float:none;
				border-bottom: 1px solid #e6e6e6;
			}
				#contents .news-box .news-header .box .comment h2{
					font-size: 3.46vw;
				}
			#page.detail #contents .news-box .commentbox{
				width:100%;
				padding:3vw 0 2vw;
				font-size: 2.9vw;
				line-height: 1.8;
			}
				#page.detail #contents .news-box .commentbox p{
					font-size: 2.9vw;
					line-height: 1.8;
					margin-bottom:3.6vw;
				}
				#page.detail #contents .news-box .commentbox img{
					max-width:100%;
				}
			#page.detail #contents .button{
				margin:8vw auto 16vw;
				width:46.6vw;
			}

/* ***********************************************************
* パスワード・IDリセット
* *********************************************************** */
#page.page.password #contents {
    padding: 0 0 7vw;
}
#page.page.password #contents .resetbox dl{
	margin:0 0 5vw;
}
#page.page.password #contents .resetbox dt{
  line-height: 1.6;
}
	#page.page.password #contents .resetbox input{
		border-radius: 5.3vw;
		border:1px solid #900039;
	}
	#page.page.password #contents .resetbox .button{
		width:100%;
		margin:8vw 0 0;
	}

#page.page.password #contents .resetbox{
	margin:0 auto 30vw;
}
	#page.page.password #contents .buttonbox .button{
		width:100%;
		margin-bottom:3.3vw !important;
	}


/* ***********************************************************
* お問い合わせ
* *********************************************************** */
#page.page.contact #contents .formbox{
	margin-top:8vw;
	margin-bottom:8vw;
}
#page.page.contact #contents .formbox dl{
	margin:0 0 5vw;
}
#page.page.contact #contents .formbox dt{
  line-height: 1.6;
}
	#page.page.contact #contents .formbox input,
	#page.page.contact #contents .formbox textarea{
		border-radius: 5.3vw;
		border:1px solid #900039;
	}
	#page.page.contact.top #contents .formbox .button{
		width:100%;
		margin:8vw 0 0;
	}

#page.page.contact.check #contents .formbox dd{
  line-height: 1.6;
	font-size: 3.7vw;
	padding:2vw 0 4vw;
}

#page.page.contact.thanks #contents .formbox p{
  line-height: 1.6;
	font-size: 3.7vw;
}


/* ***********************************************************
* 注文履歴
* *********************************************************** */

#page.order-history #contents .box{
	border-bottom:1px solid #cccccc;
	width:100%;
}
#page.order-history #contents .box a{
	width:100%;
	display:block;
	padding:5vw 6vw 5vw 2vw;
	background-image: url(../images/common/arrow-right.svg);
	background-repeat: no-repeat;
	background-size: 2.4vw 4.26vw;
	background-position: bottom 6vw right;
}
	#page.order-history #contents .box dl{
		display:table;
	}
		#page.order-history #contents .box dt{
			padding:0.5vw 0;
			text-align:left;
			display:table-cell;
			font-size:3.4vw;
			color:#4d4d4d;
			font-weight: bold;
		}
			#page.order-history #contents .box dt:after{
				content:" ：";
			}
		#page.order-history #contents .box dd{
			padding:0.5vw 0 0.5vw 0.5vw;
			text-align:left;
			display:table-cell;
			font-size:3.4vw;
			color:#808080;
		}

	#page.order-history #contents .button{
		margin:8vw auto 4vw;
	}



#page.order-history.detail #contents .box a{
	background-image: url();
}
#page.order-history.detail #contents .itembox th{
	width:calc(100% - 20vw);
	text-align: left;
	vertical-align: middle;
	padding:4.6vw 4.6vw 4.6vw 2.1vw;
	font-size:3.4vw;
}
#page.order-history.detail #contents .itembox td{
	width:20vw;
	text-align: right;
	vertical-align: middle;
	padding:4.6vw 2.1vw 4.6vw 0;
}
#page.order-history.detail #contents .itembox td .pieces{
	font-size:3.7vw;
	padding-right:2vw;
}
	#page.order-history.detail #contents .itembox td .unit{
		font-size:2.9vw;
	}

	#page.order-history.detail #contents .comment{
		margin:4vw 0 0;
	}
	#page.order-history.detail #contents .comment .name {
    padding:0 0 2vw;
	}
	#page.order-history.detail #contents .comment .commentin {
    width: 100%;
    height: auto;
    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;
	}
	#page.order-history.detail #contents .button {
	    margin: 6vw auto 4vw;
			width:46vw;
	}


/* ***********************************************************
* マイページ
* *********************************************************** */
	#page.mypage #contents .itembox {
	  margin-top: 6vw;
	}
	#page.mypage #contents table.tb01 {
	  margin-top: 0;
	}
	#page.mypage #contents .buttonbox {
    margin: 18vw auto 8vw;
	}


/* ***********************************************************
* オフライン
* *********************************************************** */
#page.off-line #contents .contents-box {
  margin: 18vw auto 10vw;
	text-align: center;
}
	#page.off-line #contents .contents-box h1{
	  font-size:5.2vw;
		color:#900039;
		font-weight:bold;
		line-height:1.4;
	}
		#page.off-line #contents .contents-box h1 div{
			width:20vw;
			margin:0 auto 5vw;
		}
	#page.off-line #contents .contents-box p{
	  margin-top:6vw;
	}