@charset "utf-8";
/* CSS Document */


/*----------------------
	■共通
----------------------*/

input.text, textarea, select {
	text-align: left;
	background: #E0E0E0;
	box-sizing: border-box;
}

input.text.long{
	width: 100%;
}

.contents form{
	padding-bottom: 50px;
}

.inputarea ul.flex{
	display: flex;
	justify-content: space-between;
}

.inputarea ul.flex li{
	width: 48%;
}

p.text-center{
	margin-bottom: 40px;
}

p.postcode,
p.automaticWrap{
	width: 50%;
	display: flex;
	align-items: center;  
}
p.automaticWrap{
	box-sizing: border-box;
}

span.examine{
	margin-left: 40px;
	text-decoration: underline;
}


div.section{
	position:relative;
}

.section.secretariat{
	border:3px solid #000;
	margin:30px 20px 20px;
	padding:10px 0;
}

table.tableStyle .pt40{
	padding-top: 40px;
}


table.tableStyle td, table.tableStyle .pb40{
	padding-bottom: 40px;
}

h3{
	clear:both;
	font-size:21px;
	padding:15px 0 10px;
	letter-spacing: 3px;
	text-align:center;
}

#formBox{
	width: 800px;
	margin: auto;
}

.section.secretariat ul.contacttel{
	text-align:center;
	margin:0 auto;
}
.section.secretariat ul.contacttel li{
	font-size:30px;
	display:inline-block;
	padding:0 40px;
		letter-spacing: 3px;
}
.section.secretariat p{
	text-align:center;
	line-height:2;
} 


div.chapter p.step{
	text-align:center;
}

div.division p.error{
	background:#DC666A;
	padding:2px 10px;
	color:#fff;
	font-size: 87%;
	margin:3px 0 0.7em 0;
}

div.chapter div.division p.text{
	margin:0 20px 40px 20px;
}

div.chapter div.division p.buttonStyle a{
	width: 40%;
}

/* □table
----------------------*/

table.tableStyle {
	border: none;
}

table.tableStyle tr.border{
	border-bottom: 1px solid #dcdcdc;
}


	table.tableStyle th,
	table.tableStyle td{
		display: block;
		border: none;
	}


table.tableStyle th span.em{
	background: #DC666A;
	color: #fff;
	font-size: 63%;
	padding: 5px 10px;
	border-radius: 5px;
	letter-spacing: 0.1em;
	margin-left: 10px;
}


table.tableStyle td ul.flex li.sex{
	margin-right: 15px;
}

.answer input#answer{
	width: 40%;
}

	div.chapter input.error,
	div.chapter select.error,
	div.chapter textarea.error{
		border-color:#DC666A;
	}

	/* 個別調整 */

	div.chapter div.division table td span.error{
		background:#DC666A;
		color:#fff;
		padding:5px;
	}

p.red{
	margin-top: 20px;
	font-size: 87%;
}

span.ele{
	display: inline-block;
	margin-right: 10px;
}

span.hyphen{
	display: inline-block;
	margin: 0 10px;
}
.checkbox{
	margin-top: 20px;
}

.hidden{
	display: none;
}

ul.type{
	margin-left: 20px;
}

div.chapter{
	padding: 80px 0;
}

.type li{
	margin-bottom: 20px;
	font-weight: 700;
}

.calendarBox{
    max-width: 100%;
    margin-bottom: 24px;
}
.calendarBox li{
    text-align: center;
}
.calendarBox li img{
    margin-bottom: 8px;
    border: 1px solid #ddd;
}

.attention{
    border: 1px solid #ddd;
    padding: 12px;
    font-size: 84%;
}

.attention dt{
    font-weight: 700;
    margin-bottom: 8px;
}
.attention dd ul li{
    padding-left: 1em;
    text-indent: -1em;
}
.attention dd ul li + li{
    margin-top: 4px;
}


.submitArea li{
	width: 50%;
	float: left;
}

.contents .submitArea li a,
.contents .submitArea li button{
	width: 80%;
	padding: 20px;
	border-radius: 10px;
	font-size: 87%;
}

.contents .submitArea li a{
	background: #fff;
	color: #333;
	border: 1px solid #333;
}

.contents .submitArea li a:hover{
	color: #fff;
	background: #333;
}

.privacy{
	padding: 30px;
	background: #F8F8F8;
	text-align: center;
	margin-bottom: 80px;
}

.privacy a{
	text-decoration: underline;
}

.popup{
	transition: all 300ms 0s ease;
}
#rule {
}

#rule h3{
	text-align: left;
}

#rule p.text{
	margin-bottom: 40px;
}

#rule ul.list > li{
	margin-bottom: 50px;
}

#rule ul.list > li dl{
	margin-bottom: 40px;
}

#rule ul.list > li dl dt{
	margin-bottom: 20px;
	font-weight: 700;
}

#rule ul.list > li dl dd{
	line-height: 2;
}

#rule ul.list > li dl dd p{
	line-height: 2;
}


#rule p.buttonStyle{
	text-align: center;
}

#rule p.buttonStyle a{
	box-sizing: border-box;
	display: inline-block;
	padding: 15px 40px;
	color: #fff;
	background: #333;
	text-decoration: none;
	transition: all 300ms 0s ease;
	border-radius: 30px;
	box-shadow: 2px 2px 3px 0px rgb(0 0 0 / 10%);
	font-size: 75%;
	border: none;
	width: 30%;
	text-align: center;
}

#rule p.buttonStyle a:hover{
	background: #666;
}

.mfp-bg {
	background: #666;
}

h4.text-center{
	font-size: 128%;
	text-align: center;
	margin-bottom: 25px;
}

button#submitButton.disabled{
	background: #dbdbdb;
}

p.note{
	font-size: 87%;
	line-height: 2;
}


/* □cart
----------------------*/

.cartTable{
	margin-bottom: 50px;
}

.cartTable ul.ttl{
	display: flex;
}

.cartTable ul.ttl li{
	box-sizing: border-box;
}

.cartTable ul.ttl li.product_name{
	flex-basis: 50%;
	padding-left: 210px;
}

.cartTable ul.ttl li.product_price{
	flex-basis: 20%;
	padding-left: 30px;
}

.cartTable ul.ttl li.product_quantity{
	flex-basis: 12%;
	text-align: center;
}

.cartTable ul.ttl li.product_subtotal{
	flex-basis: 15%;
	text-align: center;
}

.productsflex{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 0;
	border-bottom: 1px solid #d4d4d4;
	clear: both;
}

.productsflex:first-child,
.productsflex.first{
	border-top: 1px solid #d4d4d4;
}

.productsflex p{
	margin-bottom: 0;
}

.productsflex p.quantity input{
	width: 80px;
	text-align: center;
}


.cartTable .products{
	display: flex;
	align-items: center;
}

.cartTable .products .name{
	min-width: 300px;
	max-width: 430px;
}

.cartTable .products .name dl{
	display: flex;
	align-items: center;
}

.cartTable .products .name dl dt{
	width: 15%;
}

.cartTable .products .name dl dd{
	width: calc(85% - 25px);
	line-height: 2;
	margin-left: 25px;
	font-size: 87%;
}

.cartTable .products .name dl dd span{
}

.productsflex .box{
	display: flex;
	width: 30%;
	justify-content: space-between;
	align-items: center;
}
.productsflex .box >p.num{
	width: 50%;
	margin: 0;
	text-align: center;
}
.productsflex .box >.subtotal{
	width: 50%;
	margin: 0;
	text-align: center;
}

.cartView .calc{
	display: flex;
	justify-content: space-between;
}

.tablePointWrap{
	width: 40%;
}

table.tablePoint{
	width: 100%;
	border: 1px solid #d4d4d4;
} 

table.tablePoint th,
table.tablePoint td{
	border-bottom: 1px solid #d4d4d4;
	padding: 15px 20px;
	box-sizing: border-box;
	font-weight: 700;
}

.tableTotal{
	width: 50%;
}

.tableTotal ul.list li.border{
	border-bottom: 1px solid #d4d4d4;
}

.tableTotal ul.list li dl{
	display: table;
	width: 100%;
	font-size: 14px;
	padding: 10px 0;
}
.tableTotal ul.list li dl > *{
	display: table-cell;
}

.tableTotal ul.list li dl dt{
	text-align: right;
	width: 30%;
	padding: 5px 0 5px 5px;
	box-sizing: border-box;
	font-weight: 700;
}

.tableTotal ul.list li dl dd{
	text-align: right;
	width: 70%;
	padding: 5px 5px 5px 5px;
	box-sizing: border-box;
	font-weight: 700;
}

.tableTotal ul.list li dl dd.price{
	font-size: 171%;
}

.tableTotal ul.list li dl.total{
	display: table;
	width: 100%;
}

.tableTotal ul.list li dl.total dt,
.tableTotal ul.list li dl.total dd{
	display: table-cell;
	vertical-align: bottom;
	float: none;
}


.pay{
	width: 50%;
	margin: 0 auto 50px;
}

.pay p{
	text-align: center;
	line-height: 2;
}

.pay p span{
	display: block;
	color: #959595;
}


.stepFlow{
	text-align: center;
	margin: 50px 0;
}

.point .tableTotal ul.list li dl dt {
	width: 55%;
	font-weight: normal;
}


.point .cartTable ul.ttl li.product_price {
	padding-left: 0px;
}

/* delivery
-------------------------------------------- */

.delivery .chapter:last-child {
	padding-top: 0;
}
.delivery .accentarea {
	padding-bottom: 0;
}

.delivery h2.heading {
	text-align:center; 
}

.delivery p.flow{
	margin: 50px 0;
	text-align: center;
}

.delivery dl.center{
	text-align: center;
	margin-bottom: 55px;
}

.delivery dl.center dt{
	font-weight: 700;
	margin-bottom: 20px;
}

.delivery .mt40{
	margin-top: 40px;
}

.delivery .mt50{
	margin-top: 50px;
}

.point_form section{
	padding-top: 0;
}

.point_form .contents main > section:last-child {
	padding-top: 0;
}

.stepFlow{
	margin-bottom: 100px;
	text-align: center;
}

.submitArea .buttonStyle.square button{
	width: 40%;
}

.contents .buttonStyle.square.mypage a{
	background: #666;
	padding: 10px 40px;
	width: auto;
}

.contactArea{
	border: 1px solid #D4D4D4;
	padding: 45px;
	border-radius: 8px;
	margin-bottom: 40px;
}

.contactArea h5{
	text-align: center;
	margin-bottom: 20px;
}

.contactArea p.center{
	text-align: center;
	margin-bottom: 0;
}

.pointArea{
    background-color: #FAF5EF;
    margin: 0 calc(50% - 50vw) 40px;
    padding: 40px calc(50vw - 50%);
}
.pointArea .text{
    line-height: 2;
}
.pointArea .c_gray{
    color: #9FA0A0;
    font-size: 87.5%;
    font-weight: 700;
    text-align: center;
}
.pointArea .c_gray.indent{
    padding-left:1em;
    text-indent:-1em;
}
.pointArea .buttonStyle a {
    background: #414142;
    max-width: 384px;
    width: 100%;
}
.pointArea .frame_red{
    color: #DA7979;
    font-size: 87.5%;
    border: 2px solid #DA7979;
    border-radius: 10px;
    padding: 30px 5px;
    max-width: 400px;
    margin: 30px auto 0;
}


@media only screen and
(max-width : 767px) {

div.chapter {
	padding: 50px 0;
}

h2.heading {
	font-size: 200%;
}

.contents form {
	padding-bottom: 0;
}

#formBox {
	width: auto;
}

table.tableStyle td {
	padding-bottom: 15px;
	padding-top: 0;
}

table.tableStyle td ul.flex li.sex {
	margin-right: 0;
	margin-bottom: 15px;
}

p.postcode{
	display: block;
	width: auto;
}

p.automaticWrap {
	width: auto;
	padding-left: 0;
}

.inputarea ul.flex {
	display: block;
}

.inputarea ul.flex li{
	margin-bottom: 20px;
	width: auto;
}

input#zip1,
input#zip2,
input#delivery_zip1,
input#delivery_zip2{
	width: 8em;
}

	input#tel1,
	input#tel2,
	input#tel3,
	input#delivery_tel1,
	input#delivery_tel2,
	input#delivery_tel3{
		width: 5em;
	}


.flex {
	display: block;    
}

span.examine {
	margin-left: 0;
}

div.section{
	position:relative;

}
.chapter{
	padding-bottom:10%;
	margin: 0 20px;
}

h2 img{
	width:auto;
	max-width: 11%;
}

h2 span{
	font-size: 100%;
}

.section.secretariat{
	border:3px solid #000;
	margin:0 0 4% 0;
	padding:2% 4% 5% 4%;
}


h3{
	clear:both;
	font-size:21px;
	padding:15px 0 10px;
	letter-spacing: 3px;
	text-align:center;
}

.section.secretariat ul.contacttel{
	text-align:center;
	margin:0 auto;
}
.section.secretariat ul.contacttel li{
	font-size:133%;
	display:inline-block;
		letter-spacing: 3px;
}
.section.secretariat p{
	text-align:center;
	line-height:2;
} 

.main p.time{
	text-align:left;
	line-height:2;
	padding-bottom:5%;
	margin: 0 20px;
} 
div.chapter p.step{
	text-align:center;
}

div.chapter p.error{
	background:#DC666A;
	padding:2px 10px;
	color:#fff;
}


p span.automatic img{
	width:80%;
}	

#rule {
	width: auto;
	padding: 50px 30px;

}
#rule p.buttonStyle a {
	width: 100%;
}

h4.text-center {
	font-size: 117%;
}

.answer input#answer {
	width: 80%;
}



/* □cart
----------------------*/

.cartTable ul.ttl {
	display: none;
}

.tableTotal {
	width: 100%;
	float: none;
}

.cartTable .products {
	display: block;
	width: 100%;
	position: relative;
}

.productsflex {
	display: block;
}
.productsflex .sp p{
	font-size: 87%;
	margin-left: calc(25% + 25px);
}

.productsflex .box {
	display: none;
}


.productsflex .box .erase {
	line-height: 1;
	margin-left: 25px;
}

.cartTable .products .name {
	max-width: inherit;
	min-width: inherit;
}
.cartTable .products .name dl dt {
	width: 25%;
}

.cartTable .products .name dl dd {
	width: 65%;
}
.cartTable .products .name dl dd p.red{
	margin: 8px 0;
}

.cartView .calc {
	display: block;
	margin-bottom: 40px;
}

.tablePointWrap{
	width: auto;
}

.tableTotal ul.list li dl dt {
	padding: 5px 0 5px 5px;
}

.tableTotal ul.list li dl dd {
	padding: 5px 34px 5px 5px;
}

.caution {
	padding: 20px;
	width: auto;
}

.contents .buttonStyle.square a {
	padding: 15px;
	width: 100%;
}

.pay {
	width: auto;
}



.privacy {
	margin-bottom: 40px;
}    

.submitArea li {
	width: 100%;
	float: none;
	margin-bottom: 20px;
}

div.chapter div.division p.buttonStyle a {
	width: auto;
}

.point_form .flow {
	padding-bottom: 50px;
}    

.stepFlow{
	display: flex;
	border-bottom: 1px solid #afafaf;
	margin: 0;
}    

.stepFlow li{
	width: 25%;
	text-align: center;
	font-size: 75%;
}

.stepFlow li.current {
	padding-bottom: calc(28 * (100vw / 750));
	color: #545454;
	padding-bottom: 16px;
	border-bottom: solid 5px #545454;
}






}