@charset "utf-8";

header{padding-top: 50px;}
header h1{text-align: center; margin: 0 auto; font-weight: 700; }
header h1 img{max-width: 100%;}
header small{margin: 10px auto 30px; display: block; text-align: center;}

.teikyu{
	margin: 30px auto; 
	border-top: 1px dashed #323232;
	border-bottom: 1px dashed #323232;
	max-width: 600px;
	padding:30px 0;
}
.teikyu p span{font-size: 2rem; font-weight: 700; line-height: 1; color: #e60012;}
.teikyu p{text-align: center; margin: 0 auto; font-size: 1.5rem;}



.map{width:100%; max-width:500px; margin: 0 auto;}
.map img{margin: 0 auto; display: block; max-width: 100%;}
ul.shop{display: flex; flex-wrap: wrap; justify-content:center; margin: 0 auto; width:100%; max-width:800px;}
ul.shop li{width: 30%; margin: 2px 0; }

@media only screen and (max-width:640px){
    header{padding-top: 30px;}
    header h1{width: 90%;}
    ul.shop li{width: 45%; margin: 4px 0; line-height:  1.2;}
	.teikyu{
		margin: 20px auto; 
		max-width: 300px;
		padding:20px 0;
	}
	.teikyu p span{font-size: 1.7rem; font-weight: 700; line-height: 1;}
	.teikyu p{text-align: center; margin: 0 auto; font-size: 1.3rem;}
}

/* form */

form {
    width:90%;
    max-width:800px;
    margin:30px auto 0;
}
form > dl {
    margin:0 auto 30px;
    display:flex; flex-flow:row wrap; justify-content:space-between; align-content:flex-start; align-items:flex-start;
}
form > dl > dt {
    width:23%;
    padding:0 0 20px 50px;
    font-size:1.2rem;
    font-weight:700;
    position: relative;
}
form > dl > dt:after {
    content:"任意";
    padding:0 8px;
    color:#fff;
    font-size:0.8rem;
    font-weight:normal;
    position:absolute; top:4px; left:0;
    border-radius:30px;
    background:#969696;
}
form > dl.hissu > dt:after {
    content:"必須";
    background:#e60012;
}
form > dl > dd {width:68%;}

button, [type="text"], [type="postal-code"], option, textarea {
    width:98%;
    margin: 0;
    padding:10px 1%;
    line-height:1.5;
    border-radius:2px;
    border:solid 1px #969696;
    background:#fff;
}
select{
    width:100%;
    margin: 0;
    padding:10px 1%;
    line-height:1.5;
    border-radius:2px;
    border:solid 1px #969696;
    background:#fff;
}

textarea {
    min-height:200px;
    border-radius: 3px 3px 0 3px;
}

form label {
    margin-right:20px;
    padding:5px 0 0 32px;
    display:inline-block;
    line-height:1.5;
    position:relative;
    cursor:pointer;
}
form [type="radio"] ,
form [type="checkbox"] {position:absolute; top:10px; left:0; cursor:pointer;}


/* radio */
.radio input {position:relative;}

form [type="radio"]:before {
	position: absolute;
	z-index: 1;
	top:-0.05rem;
	left:0.2rem;
	width: 18px;
	height:18px;
	content: '';
	-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
	        transition:         transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
	-webkit-transform: scale(0, 0);
	        transform: scale(0, 0);
	border-radius:50%;
	background:#e60012;
}
form [type="radio"]:checked:before {
	-webkit-transform: scale(1, 1);
	        transform: scale(1, 1);
}
form [type="radio"]:after {
	position: absolute;
	top: -0.3rem;
	left:0;
	width: 22px;
	height:22px;
	content: '';
	border:solid 2px #969696;
	border-radius: 50%;
	background:#ffffff;
}

/* checkbox */
form [type="checkbox"]:before {
    content: '';
    width:18px;
	height:8px;
	position:absolute; top:-3px; left:5px;
	z-index: 1;
	-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
	        transition:         transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
	-webkit-transform:rotate(-45deg) scale(0, 0);
	        transform:rotate(-45deg) scale(0, 0);
	border:4px solid #e60012;
	border-top-style:none;
	border-right-style:none;
}
form [type="checkbox"]:checked:before {
	-webkit-transform:rotate(-45deg) scale(1, 1);
	        transform:rotate(-45deg) scale(1, 1);
}
form [type="checkbox"]:after {
    content: '';
    width: 20px;
	height:20px;
	position:absolute; top: -3px; left:0;
	cursor:pointer;
	border:solid 2px #969696;
	background:#ffffff;
}

input[name="郵便番号"] {width:25%; margin-left:0.5em;}
input[name="都道府県"] {width:25%; margin-top:0; margin-left:0.2em;}
input[name="以降の住所"] {margin:0.6em 0;}

input[type="submit"] {
    width:300px;
    margin: 50px auto 0;
    padding: 15px 0;
    display:block;
    font-size: 1.15rem;
    color: #fff;
    text-align: center;
    border-radius:50px;
    background: #e60012;
    transition: .3s;
    cursor: pointer;
}
input[type="submit"]:hover {color:#fff; background:#676460;}

.back-advance {
    width:100%;
    margin:50px auto 0;
    display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
}
.back-advance a ,
.back-advance input {
    width:300px;
    margin: 0 5px;
    padding:15px 0;
    color: #fff;
    text-align: center;
    border-radius:50px;
    transition: .3s;
    cursor: pointer;
}
.back-advance a {background:#676460;}
.back-advance input {background:#e60012;}
.back-advance input:hover {opacity: .6;}

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

    form > dl {margin:0 auto 30px; padding:0 0 40px; border-bottom:dashed 1px #676460;}
    dl.hissu > dt {width:80%; padding:0 0 5px 50px;}
    dl.hissu > dd {width:100%;}
	form > dl > dt{width:80%; padding:0 0 5px 50px;}
	form > dl > dd{width:100%;}

    .back-advance {margin:30px auto 0;}
    .back-advance a ,
    .back-advance input {
        width:80%;
        margin: 10px 0;
        padding:15px 0;
    }
}


/* privacy */

p.privacy {
    width:90%;
    margin:50px auto 20px;
    padding:25px 5%;
    text-align:left;
    border-radius:3px;
    background:rgba(255,255,255,0.8);
}
p.privacy b {
    margin:0 auto 8px;
    display:block;
    font-size:1.25rem;
    font-weight:700;
    text-align:center;
}

@media only screen and (max-width:640px){
    
    p.privacy {padding:20px 5%; font-size:0.9rem;}
    p.privacy b {font-size:1.2rem;}
}



/* others */

.others {
    width:90%;
    margin:0 auto 50px;
    padding:25px 5%;
    text-align:left;
    border-radius:3px;
    background:rgba(245,245,245,0.8);
}
.others > p {margin:0 0 10px; padding:0; font-size:1.3rem; font-weight:bold; text-align:center; letter-spacing:0.2rem;}
.others div {
    height:400px;
    padding:0 20px 0 0;
    overflow-y:scroll;
    scrollbar-color:#231815 #fff;
    scrollbar-width:thin;
}
.others div dl dt {margin:0 0 10px; padding:5px 10px; color:#fff; font-size:1rem; font-weight:bold; line-height:1.2; border-radius:3px; background:#231815;}
.others div dl dd {margin:5px 0 10px;}
.others div dl dd ul li {padding:0 0 10px 30px; font-size:0.95rem; line-height:1.3; position:relative;}
.others div dl dd ul li::after {content:""; position:absolute; top:0; left:0;}
.others div dl dd ul li:nth-child(1)::after {content:"１.";}
.others div dl dd ul li:nth-child(2)::after {content:"２.";}
.others div dl dd ul li:nth-child(3)::after {content:"３.";}
.others div dl dd ul li:nth-child(4)::after {content:"４.";}
.others div dl dd ul li:nth-child(5)::after {content:"５.";}

.others div dl dd ul li > span {display:block; padding:10px 0 0 25px; position:relative;}
.others div dl dd ul li > span::before {content:""; position:absolute; top:10px; left:0;}
.others div dl dd ul li > span.in01::before {content:"(1)";}
.others div dl dd ul li > span.in02::before {content:"(2)";}
.others div dl dd ul li > span.in03::before {content:"(3)";}
.others div dl dd ul li > span.in04::before {content:"(4)";}
.others div dl dd ul li > span.in05::before {content:"(5)";}

.others div dl dd ul li a {border-bottom: dashed 1px #000;}

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

    .others {padding:20px 5%;}
    .others div {height:500px;}
}



.thankyou a {
    width:280px;
    margin: 30px auto 0;
    padding:10px 0;
    display: block;
    color: #fff;
    font-size:1.2rem;
    font-weight:900;
    text-align: center;
    letter-spacing:0;
    border-radius:50px;
    transition: .3s;
    background:#231815;
}



/* 送信ボタン */
.privacy-check {
    width:100%;
    max-width:320px;
    margin:0 auto;
    position:relative;
}

input#consent1 {margin:0 auto;}
input#consent1 + label {
    width:84%;
    margin: 0;
    padding:12px 0 12px 16%;
    font-size:1.1rem;
    font-weight:700;
    border-radius:10px;
    background:#fff;
    cursor:pointer;
    z-index:1;
}
input#consent1 + label:hover {color:#e60012;}

.privacy-check [type="checkbox"] {top:18px; left:15px; z-index:100;}

#interlock {
    width:100%;
    margin:20px auto 0;
    padding:10px 0;
    display:block;
    color:#bebebe;
    font-size:1.2rem;
    font-weight:700;
    border-radius:50px;
    border:solid 3px #bebebe;
    background:#fff;
    pointer-events:none; /*クリックをキャンセル*/
}
#consent1:checked ~ #interlock {
    color:#e60012;
    border-color:#e60012;
    cursor:pointer;
    pointer-events:auto; /*キャンセルを解除*/
}

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


dd.narabi{display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: space-between;}
dd.narabi select{width: 49%;}
dd.narabi input{width: 17%;}


.kakunin p{color: #fff; text-align: center; background: #e60012; padding:20px 0; margin: 20px auto 0;}
.kakunin form{background: rgba(255, 255, 255, 0.8); padding:50px; border-radius: 20px;}

.thankyou{padding:320px 0;}
.thankyou p{background: rgba(255, 255, 255, 0.8); padding:50px; border-radius: 20px; text-align: center; max-width: 700px; margin: 0 auto;  border: solid 2px #bae2f8;}

@media only screen and (max-width:640px){
	
	.kakunin form{background: rgba(255, 255, 255, 0.8); padding:30px 5%; border-radius: 20px;}
	.thankyou{padding:150px 0 50px;}
}
	


#wait {
	display: none;
	position: fixed;
	z-index: 999999;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	margin: 0;
	background-color: rgba(0, 0, 0, 0.6);
	padding-top: 0px;
	text-align: center;
}
 
#loading_icon {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	text-align: center;
}

#loading_icon img {
	width: 70px;
}

.loading_text {
	font-size: 14px;
	color: #ffffff !important;
	text-align: center !important;
	line-height: 1.5;
}

.shop li {
	cursor :pointer;
}