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

h2{
font-size:200%;
border-bottom:2px solid #CCC;
margin:2em 0;
	padding-bottom:0.3em;
}
h3 {
    margin-top: 2em;
    border-bottom: 1px solid #CCC;
    font-weight: bold;
    text-align: center;
		font-size:2rem;
}
dl.detail {
    display: flex;
    flex-wrap: wrap;
}
span.indispensable {
    background-color: red;
    color: #FFF;
    padding: 4px 2px;
    border-radius: 3px;
    font-size: 65%;
    display: inline-block;
    line-height: 1em;
    vertical-align: middle;
	margin-bottom:4px;
}
.elemobj input[type=text].half {
    width: 40%;
    margin-right: 1em;
}
.elemobj input[type=text].zipcode{
    width: 8em;
}
button.next{
    font-size: 1.8em;
    padding: 5px 1em;
    border-radius: 8px;
    background-color: blue;
    color: #FFF;
    border: none;
	margin-top:1em;
}
.formline::after {
    display: block;
    clear: both;
    content: "";
}
.formline {
    padding: 1em 0;
    line-height: 1.5em;
		font-size:1.6rem;
    border-top: 1px dotted #CCC;
}
.elemobjone {
    text-align: center;
}
.privacy {
    margin-top: 1em;
    border: 1px solid #CCC;
    background-color: #FAFAFF;
    border-radius: 8px;
    height: 12em;
    overflow: scroll;
    font-size: 80%;
    text-align: left;
    width: 90%;
    margin: 1em auto;
    padding: 1em;
    box-sizing: border-box;
}
.privacy h4 {
    font-size: 1.8rem;
    text-align: center;
}
.privacy h5 {
    font-size: 1.6rem;
    font-weight: bold;
}
.privacy h6 {
    font-size: 1em;
    font-weight: bold;
}
.qr img{
width:80px;
height:auto;
}


.btnarea button{
	display:block;
	font-size:200%;
	padding:0.5em 1em;
	border-radius:0.3em;
	color:#FFF;
	background-color:blue;
	border-none;
	margin:1em auto;
}
	.tred {
    color: red;
}
h1 span {
    font-size: 50%;
    display: block;
}

.leadtext {
    font-size: 1.8rem;
    text-align: left;
    color: #333;
    font-weight: normal;
	margin-top:2em;
}

.detail {
    margin-top: 2em;
}

.detail th, .detail td {
    vertical-align: top;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
    border-bottom: 1px dotted #CCC;
}

.detail table {
    width: 100%;
}

.detail:after {display: block;content: "";clear: both;}
.cautionlist{
	margin-top:1em;
	display:flex;
	flex-wrap: wrap;
}

.cautionlist dt {
    width: 7em;
    color: red;
	text-align: right;
}

.cautionlist dd {
    width: 80%;
}
.imgphoto {
    float: right;
    width: 30%;
    text-align: right;
}

.imgphoto img {
    width: 100%;
    height: auto;
}

.steps ol {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.steps li {
    width: 30%;
    font-size:75%;
}

.steps li img {
    width: 100%;
    height: auto;
}

.steps {
    margin-top: 3em;
}

.datebox {
    display: flex;
    flex-wrap: wrap;
}

.datebox div {
    width: 30%;
}
@media screen and (max-width:420px){
	.txtcontents h1 {
		font-size: 2.4rem;}
	.leadtext{
		padding:1em;
		font-size:1.6rem;
	}
	.contentsbox .imgphoto{
		float:none;
		text-align: center;
		padding:1em;
	}
	.formarea h2{
		font-size:28px;
		line-height:1.2em;
		padding-bottom:20px;
	}
	.formrow{
		padding:1em;
		border-bottom:1px dotted #CCC;
		font-size:18px;
	}
	.formrow input, .formrow select{
		font-size:18px;
	}
	.formrow::after{
		display:block;
		content:"";
		clear:both;
	}
	.elemlabel{
		box-sizing: border-box;
		width:40%;
		float:left;
		text-align:right;
		padding-right:1em;
	}
	.elemobj{
		box-sizing: border-box;
		width:60%;
		float:left;
	}
	.elemobj input[type=text]{
		border:1px solid #CCC;
		border-radius:8px;
		width:100%;
		box-sizing: border-box;
	}
	.elemobj input.birthy[type=text]{
		width:5em;
	}
	.elemobj input.zip1[type=text]{
		width:4em;
	}
	.elemobj input.zip2[type=text]{
		width:5em;
	}
	.elemobj input.tel[type=text]{
		width:100%;
	}
	.formarea input[type=submit]{
		display: block;
    font-size: 2.5rem;
    border: 1px solid #FFF;
    color: #FFF;
    text-decoration: none;
    padding: 0.3em;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
    min-width: 100px;
		max-width:90%;
    text-align: center;
    margin: 1rem auto;
		background-color:#0009F6;
	}
	.formaresa input[type="submit"]::after{
		content: "";
    display: inline-block;
    vertical-align: baseline;
    width: 0;
    height: 0;
    border-left: 0.6em solid #FFF;
    border-top: 0.4em solid #CCC;
    border-bottom: 0.4em solid #CCC;
    border-right: none;
    margin-left: 0.3em;
	}
	.buttonform{
		float:none;
		width:auto;
	}
	.buttonform a{
		display:block;
		font-size:1.4rem;
		padding:0.4em;
		width:90%;
		border-radius:8px;
		background-color:#E20407;
		margin:1em auto 0 auto;
		color:#FFF;
		text-align:center;
	}
	.imgphoto {
    width: 100%;
    text-align: center;
}

.imgphoto img {
    width: 30%;
}

.detail th {
    width: 6em;
}

.cautionlist dt {
    width: 20%;
}

.formarea h2 {
    font-size: 2rem;
}

.datebox div {
    width: 50%;
}
}