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

form{
	margin: auto;
	width: min(90%, 800px);
}
form > picture{
	margin: 30px auto;
}

/* form > section ------------------------------------------------------------ */
form > section{
    align-items: baseline;
    border-bottom: 1px solid #f1f1f1;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 25% 1fr;
    padding: 30px 0;
}
form > section:last-of-type{
	border-bottom: none;
}
@media screen and (max-width: 768px){
form > section{
	border: none;
	grid-gap: 0;
	grid-template-columns: 1fr;
	padding: 0 0 30px;
}
}

/* .col -------------------------------------------------- */
.col{
    display: flex;
    font-weight: bold;
    align-items: center;
    justify-content: space-between;
}
.col > h1{
    font-size: 16px;
}
.col > h2{
    font-size: 12px;
    padding: 5px 10px;
}
.col > h2.red{
    background: #b92000;
    color: #fff;
}
.col > h2.gray{
	background: #f2f2f2;
	color: #000;
}
@media screen and (max-width: 768px){
.col{
	background: #333333;
	color: #fff;
	/* padding: 2px 10px; */
	/* padding: 10px; */
	padding: 10px;
}
.col > h1{
	/* font-size: 14px; */
	font-size: 16px;
}
}

/* .val -------------------------------------------------- */
.val > div{
	margin-bottom: 30px;
}
.val > div > h3{
    font-size: 16px;
	margin-bottom: 10px;
	line-height: 1.2;
}
.val > div > p{
    font-size: 14px;
	margin-bottom: 10px!important;
}
.val > label{
    display: grid;
    grid-gap: 15px;
    grid-template-columns: 1fr;
	text-align: start;
	margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
.val > label.day {
	margin-bottom: 20px;
}
}
.val > label > input[type="text"],
.val > div > div.li-check > label > input[type="text"]{
    background: #f1f1f1;
	border: none;
    border-radius: 5px;
	box-sizing: border-box;
    font-size: 16px;
    padding: 0 5px;
	width: 100%;
	height: 45px;
}

.val > label > h3{
    font-size: 18px;
}

.val > label > p{
    font-size: 14px;
}

.val > div > .li-radio{
	/* padding-bottom: 30px; */
	border-bottom: 1px solid #f1f1f1;
	/* margin-bottom: 20px; */
}

@media screen and (max-width: 768px){
.val{
	padding: 25px 0 0;
}
}


/* .val > .name -------------------------------------------------- */
.val > .name{
    grid-gap: 10 5px;
/*  grid-template-columns: 1fr 1fr; */
	width: 80%;
}
.val > .name > p{
	grid-column: 1/3;
}
@media screen and (max-width: 768px){
.val > .name{
	grid-gap: 15px 10px;
	width: 100%;
}
}
.val > .zip > input[type="text"] {
	width: 50%;
}

/* .birthday -------------------------------------------------- */
.birthday {
	display: grid;
	grid-gap: 0 15px;
	align-items: center;
    grid-template-columns: 25% 25% 25%;
}
.birthday > label {
	align-items: center;
	grid-gap: 5px;
	grid-template-columns: 1fr max-content;
}
.birthday > label > select,
.birthday > label > input[type="text"] {
	background: #f1f1f1;
	border: none;
	border-radius: 5px;
	font-size: 16px;
	text-indent: 10px;
	width: 100%;
	height: 45px;
}
/* .reserve > p {
	font-size: 14px;
	margin-top: 10px!important;
	grid-column: 1/4;
} */
/* @media screen and (min-width: 769px) {
	.reserve > p > br{
		display: none;
	}
} */
@media screen and (max-width: 768px) {
.birthday {
	grid-gap: 0 20px;
	grid-template-columns: 40% 40%;
	max-width: 300px;
}
.birthday > .year{
	grid-column: 1/3;
}
}

/* .val > div > select -------------------------------------------------- */
.val > div > select {
	background: #f1f1f1;
	border: none;
	border-radius: 5px;
	font-size: 16px;
	text-indent: 10px;
	width: 200px;
	height: 45px;
}

/* textarea -------------------------------------------------- */
textarea {
	background: #f1f1f1;
	border: none;
	border-radius: 5px;
	display: block;
	font-size: 18px;
    width: -webkit-fill-available;
	width: -moz-available;
	width: available;
	height: 250px;
}


/* .submit -------------------------------------------------- */
.submit{
	background: #fffbe5;
	padding: 60px 0;
	text-align: center;
}
.submit > input[type="submit"]{
	background: linear-gradient(to bottom, #00c48e 0%,#008e67 100%);
	border: 0;
	border-radius: 30px;
	color: #fff;
	font-size: 16px;
	font-weight: 900;
    padding: 15px 0;
	text-indent: 7px;
	width: 40%;
}
.submit > input[type="submit"]:hover{
	background: linear-gradient(to bottom, #008e67 0%,#00c48e 100%);
}
@media screen and (max-width: 768px){
.submit > input[type="submit"]{
	width: 80%;
}
}

/* .risk -------------------------------------------------- */
.risk > h3:first-of-type{
	margin: 0 auto 20px;
}
.risk > .scroll{
	background: #f9f9f9;
	border: 1px solid #ccc;
	box-sizing: border-box;
	margin: 20px auto;
	overflow: scroll;
	padding: 0 20px;
	width: 100%;
	height: 250px;
}
@media screen and (max-width: 768px){
.risk > .scroll{
	padding: 0 10px;
}
}	

.risk > .scroll > h4{
	background: #f0f0f0;
	font-size: 16px;
	font-weight: 600;
	margin: 40px auto 0;
	padding: 5px 10px;
}
.risk > .scroll > p{
	font-size: 14px;
	font-weight: 300;
	line-height: 175%;
	margin: 20px auto;
	padding: 0;
}
.risk > .check{
	align-items: center;
	background: #fff000;
	grid-gap: 10px;
	grid-template-columns: min-content 1fr;
	line-height: 1;
	padding: 10px;
}

@media screen and (max-width: 450px){
.risk > .check > h5{
	font-size: 14px!important;
}
}	

.risk > .check > input[type="checkbox"]{
	transform: scale(1.5);
}

/* .li-check > .check -------------------------------------------------- */
.li-check > .check {
	align-items: center;
	/* grid-gap: 10px; */
	grid-template-columns: min-content 1fr;
	line-height: 1;
	padding: 10px;
	display: grid;
	font-size: 15px;
}
.li-check > .check > input[type="checkbox"]{
	transform: scale(1.5);
	margin-right: 10px;
}
.li-check > .check > span {
	line-height: 1.2;
}

/* .li-radio > .radio -------------------------------------------------- */
.li-radio > .radio {
	align-items: center;
	grid-gap: 10px;
	grid-template-columns: min-content 1fr;
	line-height: 1;
	padding: 10px;
	display: block;
	margin: 0;
}
.li-radio > .radio:last-of-type {
	padding: 10px 10px 0;
}
.li-radio > .radio > input[type="radio"]{
	transform: scale(1.5);
	margin-right: 10px;
}


@media screen and (max-width: 768px){
.risk > .scroll{
	height: 250px;
}	
}


/* form > small -------------------------------------------------- */
form > small{
	display: block;
	font-size: 12px;
	letter-spacing: 1px;
	padding: 180px 0 20px;
	text-align: center;
}
@media screen and (max-width: 768px){
form > small{
	font-size: 10px;
	letter-spacing: normal;
	padding: 120px 0 0;
}
}


/* スクロール内 -------------------------------------------------- */

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

.ppContents h2{ font-size: 16px;font-weight: 900; background: #f2f2f2; padding: 10px 20px; margin: 0 0 10px 0;}
.ppContents p{ font-size: 14px; line-height: 170%; }
.ppContents a{ margin: 20px 0 0 0!important;}		

.attnContents{ margin: 0 0 40px 0;}
.attnContents ul,.attnContents ol{ margin: 0 0 0 30px;}
.attnContents ul li,.attnContents ol li{ padding: 5px 0; font-size: 14px; line-height: 170%; }
.link{ margin: 10px 0 40px 0;}

.nameArea{ width: 480px; float:right; margin: 20px 0; text-align: left;}
.name{ font-size: 15px;}
.address{ font-size: 12px;line-height: 200%}

}


@media screen and (max-width: 767px){
	
br{ display: none;}
.ppContents h2{ font-size: 16px; font-weight: 900; background: #f2f2f2; padding: 10px 20px; margin: 0 0 10px 0; line-height: 155%; }
.ppContents p{ font-size: 14px; line-height: 170%; }
.ppContents a{ margin: 20px 0 0 0!important;}		

.attnContents{ margin: 0 0 40px 0;}
.attnContents ul,.attnContents ol{ margin: 0 0 0 15px;}
.attnContents ul li,.attnContents ol li{ padding: 5px 0; font-size: 14px; line-height: 170%; }	
.link{ margin: 10px 0 40px 0;}

.nameArea{ width: 100%; margin: 60px 0 20px 0; text-align: left;}
.name{ font-size: 15px; margin-bottom: 7px;}
.address{ font-size: 12px;line-height: 200%}

footer{ font-size: 12px;line-height: 200%}

}



/* ラジオボタン関連 ---------------------------------------------------------------------------*/
input[type=radio] {
	display: none;	/* 標準スタイル */
}
.radio-label {
	position: relative;	/* ボックスの位置を指定する */
	padding: 0 0 0 35px;	/* ボックス内側の余白を指定する */
}
.radio-label:after, .radio-label:before {
	position: absolute;	/* ボックスの位置を指定する */
	content: "";	/* ボックスのコンテンツ */ 
	display: block;	/* ブロックレベル要素化する */ 
	top: 50%;	/* 上部から配置の基準位置を決める */ 
}
.radio-label:after {
	left: 5px;	/* 左から配置の基準位置を決める */ 
	margin-top: -10px;	/* チェック枠の位置 */
	width: 16px;	/* ボックスの横幅を指定する */
	height: 16px;	/* ボックスの高さを指定する */
	border: 2px solid #ccc;	/* ボックスの境界線を実線で指定する */
	border-radius: 50%;	/* ボックスの角丸を指定する */
}
.radio-label:before {
	left: 10px;	/* 左から配置の基準位置を決める */ 
	margin-top: -5px;	/* チェックマークの位置 */
	width: 10px;	/* ボックスの横幅を指定する */
	height: 10px;	/* ボックスの高さを指定する */
	background: #0171bd;/* ボックスの背景色を指定する */
	border-radius: 50%;	/* ボックスの角丸を指定する */
	opacity: 0;	/* 要素を透過指定する */
}
input[type=radio]:checked + .radio-label:before {
	opacity: 1;	/* 要素を表示する */
}
.radio-label:hover:after {
	border-color: #0171bd;	/* ボックスの境界線を実線で指定する */
}

/* カスタム ---------------------------------------------------------------------------*/
.val > div > .li-radio:last-of-type {
	border-bottom: none;
}
.li-radio > .grid {
	display: grid;
	grid-gap: 10px 0;
	grid-template-columns: min-content 1fr;
	margin: 0 auto 10px;
}
.li-radio > .grid:last-of-type {
	margin: auto;
}
.li-radio > .grid > span {
	grid-column: 2/3;
	line-height: 1.2;
}
.li-radio > .grid > span:nth-of-type(2) {
	font-size: 14px;
	line-height: normal;
}

/* ---------------------------------------------------------------------------- */

.val .flex{ display: flex; justify-content: space-between; align-items: center; }
.flex__input{ height: fit-content; }
.flex__input p{ font-size: 14px; padding: 20px 0;}
.flex__image{ width: 20%; }
.flex__image img { width: 100%; }

.spHidden{ display: block; }

@media screen and ( max-width: 768px ){
.spHidden{ display: none; }
.flex__input > input[type="file"] {
	width: 100%;
}
.flex__image{ width: 40%; margin-left: 20px; }
}


@media screen and ( max-width: 415px ){
.val .flex{ display: block; }
.flex__image{ width: 40%; margin: auto; }
.flex__image img { display: inline; }
}