@charset "utf-8";





/* section */

section {
    width: 100%;
    padding:30px 0 50px;
}
section h3 {
    font-size:1.5rem;
    font-weight: 700;
    text-align:center;
}

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

    section {
        padding:20px 0 80px;
    }
}




/* form */

form {
    width:86%;
    max-width:750px;
    margin:50px auto 0;
}
form dl {
    margin:50px auto 0;
}
form dl:first-of-type {
    margin-top:0;
}
form dl dt {
    padding: 0 0 15px 0;
}
form dl dd > p {
    margin:10px 0 20px;
    line-height: 1.5;
}

.add dd {
    text-align:left;
}
.add [type="postal-code"] {
    width:115px;
    padding-left:5px;
    padding:1.5% 2%;
	font-size:1rem;
    line-height:1.5;
    letter-spacing:0.1em;
    background:#e1e1e1;
}
.add [type="text"].todoufuken {
    width:120px;
    margin-bottom:10px;
    padding-left:10px;
    letter-spacing: 0;
    cursor:pointer;
}

  .error dl.hissu dd ,
.kakunin dl.hissu dd {
    padding:0 0 50px;
    border-bottom:solid 1px #e6e6e6;
}
.error dl.hissu dd {
    color:#cd5e3b;
}
.thankyou p {
    margin:10px auto 0;
    text-align:center;
}

dl.hissu dt:after {
    content: "必須";
    margin-left:10px;
    padding: 0 6px 2px 10px;
    font-size: 0.9rem;
    font-weight:300;
    color: #fff;
    line-height:1.5;
    letter-spacing:0.4rem;
    border-radius:5px;
    background:#cd5e3b;
}

button, [type="text"], select, option, textarea {
    width:96%;
    margin: 0;
    padding:1.5% 2%;
	font-size:1rem;
    line-height:1.5;
    letter-spacing:0.1em;
    background:#e6e6e6;
}
select {
    width:100%;
    cursor: pointer;
}

textarea {
    min-height:150px;
}

form label {
    margin: 5px 20px 5px 0;
    padding: 3px 0 10px 36px;
    display:inline-block;
    line-height: 1.5;
    position: relative;
    cursor:pointer;
}
form label small {
    margin: 3px 0 0;
    display:block;
    font-size: 1rem;
    letter-spacing: 0;
}
form [type="radio"] ,
form [type="checkbox"] {
    position:absolute; top:20%; left:0;
	cursor: pointer;
}



/* radio */

.radio input {
    position:relative;
}
form [type="radio"]:before {
	position: absolute;
	z-index: 1;
	top:-0.05rem;
	left:4px;
	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: #cd5e3b;
}
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 #e8e4e1;
	border-radius: 50%;
	background:#e8e4e1;
}



/* checkbox */

form [type="checkbox"]:before {
	position: absolute;
	z-index: 1;
	top:-5px;
	left:5px;
	width:22px;
	height:8px;
	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: rotate(-45deg) scale(0, 0);
	        transform: rotate(-45deg) scale(0, 0);
	border: 4px solid #cd5e3b;
	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 {
	position: absolute;
	top: -3px;
	left: 0;
	width: 20px;
	height:20px;
	content: '';
	cursor: pointer;
	border:solid 1px #666666;
	background: #fff;
}

.chuui {
    margin: 50px auto 0;
    padding:30px 0;
    border-top:solid 1px #666666;
    border-bottom:solid 1px #666666;
}
.chuui p {}

.back-advance {
    width:100%;
    margin:60px 0;
    display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
}
.back-advance a ,
.back-advance input[type="submit"] {
    width:300px;
    height:60px;
    margin:0 5px;
    padding:0;
    display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
    font-size:1.3rem;
    font-weight:700;
    color:#fff;
    text-align:center;
    position:relative;
    transition: .3s;
    cursor: pointer;
}
.back-advance a {
    background:#666666;
}
.back-advance input[type="submit"] {
    background:#81a7b5;
}
.back-advance input[type="submit"]:hover {
    opacity: .6;
}

@media only screen and (min-width:641px){

    form dl {
        margin:80px auto 0;
    }
    form dl dt {
        font-size:1.25rem;
    }
}

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

    form dl {
        margin:50px auto 0;
    }
    button, [type="text"], select, textarea {
        font-size:25px !important;
        line-height:1.5;
        letter-spacing:0;
    }
    select.select {
        width:4em;
        font-size:18px !important;
    }
    select.select:nth-child(3) {
        width:9em;
    }
    
    /* radio */
    form [type="radio"]:before {
        position: absolute;
        top:-0.05rem;
        left:4px;
        width: 30px;
        height:30px;
    }
    form [type="radio"]:after {
        position: absolute;
        top: -0.3rem;
        left: 0;
        width: 36px;
        height:36px;
    }
    form label {
        padding: 3px 0 10px 55px;
    }
    
    /* checkbox */
    form [type="checkbox"]:before {
        position: absolute;
        z-index: 1;
        top:-5px;
        left:5px;
        width: 30px;
        height:10px;
        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: rotate(-45deg) scale(0, 0);
                transform: rotate(-45deg) scale(0, 0);
        border: 6px solid #cd5e3b;
        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 {
        position: absolute;
        top: -3px;
        left: 0;
        width: 30px;
        height:30px;
        content: '';
        cursor: pointer;
        border:solid 1px #666666;
        background: #fff;
    }
    
    .add [type="postal-code"] {
        width:180px;
        padding-left:5px;
        padding:2.5% 2%;
        font-size:1.1rem;
        line-height:1.5;
        letter-spacing:0;
        background:#e1e1e1;
    }
    .add [type="text"].todoufuken {
        width:150px;
        margin-bottom:10px;
        padding:2.5% 2%;
        cursor:pointer;
    }
    
    dl dt {
        font-size: 1.2rem;
        line-height: 1.6;
    }
    
    form label {
        display:block;
    }
    input[type="submit"] {
        width:100%;
        margin: 30px auto;
        padding: 20px 0;
        display:block;
        font-size: 1.2rem;
    }

    .back-advance a ,
    .back-advance input[type="submit"] {
        width:48%;
        height:80px;
        margin: 0 1%;
        padding:0;
        font-size:1.15rem;
        letter-spacing:0.1rem;
    }
}