@charset "UTF-8";




/* 1. Module -------------------------------------------------------------------------------------*/

body {
  font-size: 1.0rem;
  max-width:100%;
  min-width:0;
}

.pc{
	display:none !important;
}
.sp{
	display:block;
}

/* 1-1 Form Elements */

main select,
main textarea,
main input[type="text"],
main input[type="password"],
main label input[type="radio"]:before{
	border:1px solid #bbdded;
}

main select.error,
main textarea.error,
main input[type="text"].error,
main input[type="password"].error,
main section.form > div label.error:has(input[type="radio"]),
main em.text_md.error{
	border:1px solid #f89ebd;
}

main label input[type="radio"]:checked:before{
	border:1px solid #0f76c6;
}

main label input[type="radio"].checkbox,
main label input[type="checkbox"]{
	height:16px;
	width:16px;
	margin-right:0.25em;
}


main label input[type="radio"].checkbox:before,
main label input[type="checkbox"]:before{
	border:1px solid #bbdded;
	height:16px;
	width:16px;
	border-radius:3px;
	top:0;
}

main label input[type="radio"].checkbox:checked:after,
main label input[type="checkbox"]:checked:after{
	height:11px;
	width:5px;
	left:6px;
	top:2px;
}

main em.text_md{
	border:1px solid #bbdded;
}

main input[type="text"].tel{
	max-width:7em;
	width:25%;
}

main input[type="text"].tel:placeholder{
	opacity:0;
}



/* 2. Text ---------------------------------------------------------------------------------------*/

main > p{
	font-size:130%;
	margin:1em auto 0;
}

main h1 + div.lead{
	margin:1.3em auto 0;
	flex-direction:column;
}

main h1 + div.lead img{
	max-width:100%;
	width:390px;
	height:100%;
	margin:10px auto 0;
}

main h1 + div.lead p{
	font-size:130%;
	padding-right:20px;
}



/* 3. Blocks -------------------------------------------------------------------------------------*/

/* 3-1. Header */

header{
	width:auto;
	padding:12px 12px 6px;
}

header h1#logo a{
	width:120px;
	height:20px;
	background-size:contain;
	bottom:-4px;
}

header address.tel{
	font-size:70%;
}

header address.tel a{
	width:108px;
	height:12px;
	background-size:contain;
}

header div.tel{
	text-align:center;
}

header div.tel address{
	font-size:200%;
	padding-left:36px;
	background-size:31px 18px;
	margin-bottom:2px;
}

header div.tel address > *{
	display:inline;
	padding:0;
	margin:0;
}

ol.flow_count{
	width:100%;
	max-width:100%;
	margin:15px auto;
}

ol.flow_count li{
	width:12%;
	padding:0.5em 1em 0.5em 1.5em;
	margin-right:calc(10px + 0.5em);
	font-size:105%;
	border-radius:4px;
}

ol.flow_count li:last-child{
	width:13.5%;
	margin-right:0;
	padding-right:1em;
	border-radius:5px;
}

ol.flow_count li:before{
	width:1.55em;
	height:1.55em;
	background:#83c8e9;
	border-radius:3px;
	right:-0.50em;
	top:0.21em;
}


/* 3-2. Footer */

footer{
	display:block;
	padding:12px 0 1px;
	min-width:0;
}

footer small{
	font-size:90%;
	margin-bottom:12px;
}

aside a.pagetop{
	display:block;
	position:fixed;
	width:32px;
	height:32px;
	border-radius:16px;
	right:8px;
	bottom:57px;
	background:#0f76c6;
	text-indent:-9999px;
	box-shadow:0px 2px 3px rgba(0,0,0,0.2);
}

aside a.pagetop:after{
	display:block;
	content:"";
	width:12px;
	height:12px;
	left:10px;
	top:calc(50% - 4px);
	position:absolute;
}

footer section.buttons{
	width:auto;
	padding:20px 30px;
	display:flex;
	justify-content:center;
}

footer section.buttons:has(a.skip){
	display:block;
	padding-bottom:6em;
	padding-top:0;
}

footer section.buttons a{
}

footer section.buttons a.next{
	width:10em;
	height:3em;
	padding:calc(1em - 2px) 0;
	line-height:1;
	font-size:160%;
	margin:0 8px;
	position:relative;
	border:2px solid #fff;
}

footer section.buttons a.next:has(br.sp){
	font-size:150%;
	padding:calc(0.4em - 2px) 0;
	line-height:1.2;
}

footer section.buttons:has(a.skip) a.next{
	width:9em;
	display:block;
	margin:0 auto;
}

footer section.buttons a.next i.triangle{
	width:8px;
	height:10px;
	right:12px;
	top:calc(50% - 4px);
	background-size:10px 10px;
}

footer section.buttons a.back{
	font-size:120%;
	position:relative;
	margin:0 8px;
	width:10em;
	height:3em;
	left:0;
	top:5px;
	padding:1em 0;
	line-height:1;
}

footer section.buttons a.skip{
	border:2px solid #fff;
	font-size:120%;
	position:relative;
	margin:0 8px;
	width:10em;
	height:3em;
	right:0;
	top:5px;
	padding:calc(1em - 1px) 0;
	line-height:1;
}

footer section.buttons:has(a.skip) a.back,
footer section.buttons:has(a.skip) a.skip{
	width:10.5em;
	display:block;
	margin:0;
	position:absolute;
	bottom:1em;
	top:auto;
}

footer section.buttons:has(a.skip) a.back{
	right:calc(50% + 8px);
	left:auto;
}

footer section.buttons:has(a.skip) a.skip{
	left:calc(50% + 8px);
	right:auto;
}

footer section.buttons a i.triangle{
	width:8px;
	height:10px;
	top:calc(50% - 5px);
	right:12px;
	background-size:10px 10px;
}

footer section.buttons a.back i.triangle{
	left:12px;
	transform:rotate(180deg);
}

footer section.buttons a.skip i.triangle{
	right:12px;
}

footer > div{
	padding-bottom:20px;
	padding-top:1px;
}

footer > div a.logo{
	display:block;
	margin:16px auto 14px;
	width:52.5px;
	height:33px;
}

footer > div small{
	font-size:11px;
	margin:0;
}


/* 3-3. Article */

main{
	padding:0 15px;
	min-width:0;
	min-height:calc(100vh - 2.5em - 72px);
}

main h1{
	font-size:210%;
	padding-top:15px;
}

main > section{
	margin:20px auto 0;
	padding:20px;
	text-align:left;
	border-radius:10px;
}

main > section + section,
main > section.form.confirm + section.form.confirm{
	margin:20px auto 0;
}

main > h1 + section{
	margin-top:15px;
}

main > section.form:not(.hidden) + section.form{
	margin-top:40px;
}

main > section.form:not(.hidden) + section.form:before{
	width:40px;
	height:22px;
	left:calc(50% - 20px);
	top:-30px;
}

main > section h2,
main > section.prior h2{
	font-size:160%;
}

main > section p{
	font-size:130%;
}


/* -- Block01 -- */

main section.plan{
	display:block;
}

main section.plan p.plan_name{
	width:113px;
	height:40px;
	margin:15px auto 20px;
}

main section.plan div.detail{
	padding:0;
}

main section.plan div.detail p{
	font-size:110%;
	line-height:1.5em;
	margin-top:1em;
}

main section.plan div.detail span{
	font-size:86.36%;
}

main section.plan div.detail p.premium strong{
	font-size:150%;
}


/* -- Block02 -- */

main section ol.flow{
	width:100%;
	margin:15px auto;
}

main section ol.flow:before{
	width:34px;
	left:calc(50% - 17px);
}

main section ol.flow li + li{
	margin-top:15px;
}

main section ol.flow li + li:after{
	width:34px;
	height:15px;
	top:-15px;
	left:calc(50% - 17px);
}

main section ol.flow li strong{
	font-size:300%;
	width:48px;
	height:48px;
	line-height:48px;
	border-radius:5px 0 0 5px;
}

main section ol.flow li em{
	width:calc(100% - 113px);
	padding-left:15px;
	padding-right:10px;
	font-size:130%;
}


/* -- Block03 -- */

main section details.notice{
	margin-top:15px;
}

main section details.notice summary{
	font-size:130%;
	border-radius:3px;
	padding:16px 52px 16px 10px;
}

main section details.notice summary:before{
	font-size:61.5%;
	top:36px;
	right:0;
	text-align:center;
	width:44px;
}

main section details.notice summary:after{
	width:24px;
	height:24px;
	border-radius:12px;
	right:10px;
	top:10px;
	line-height:24px;
}

main section details.notice p{
	padding:0 10px 0 calc(10px + 1.33em);
}

main section details.notice p:last-child{
	padding-bottom:16px;
}

main section details.notice img{
	zoom:0.5;
}

main section label.agn{
	border-radius:3px;
	margin-top:25px;
	padding:10px;
	font-size:120%;
	display:flex;
	align-items:center;
}

main section label.agn strong{
	color:#f60;
	margin-left:1em;
	font-size:91.75%;
	padding-left:2em;
	background:url(../images/icon_caution.png) left no-repeat;
	background-size:13px 11px;
}

main section label.agn span{
	min-width:4.5em;
	display:block;
}

main section label.agn + p.check_notice{
	color:#f60;
	font-size:110%;
	padding-left:2em;
	background:url(../images/icon_caution.png) left no-repeat;
	background-size:13px 11px;
}


/* -- Block04 -- */

main section.identification details{
	padding:1.25em;
}

main section.identification details[open] summary:after{
	left:5px;
	border-right:2px solid #fff;
	border-bottom:2px solid #fff;
}

main section.identification details div.required{
	padding:1em 1.5em;
	margin-top:20px;
	border-radius:4px;
}

main section.identification details label.image input[type="file"]::file-selector-button,
main section.identification details label.image input[type="file"]::-webkit-file-upload-button{
	width:auto;
}


/* -- Block05 -- */

main section.notice{
}

main section.notice div.notice_list{
	border:1px solid #bbdded;
	border-radius:2px;
	padding:15px 0;
	margin:15px 0 0;
	flex-wrap:wrap;
}

main section.notice div.notice_list:has(+ h2){
	margin-bottom:30px;
}

main section.notice div.notice_list > label{
	padding-right:1.5em;
	flex-basis:7em;
	order:3;
}

main section.notice div.notice_list > label:first-child{
	margin-left:15px;
	order:2;
}

main section.notice div.notice_list p.exp{
	padding-left:15px;
	margin:0 0 0.75em;
	flex-basis:100%;
	order:1;
}


main section.notice div.notice_list:has(input.yes:checked){
	padding:15px 0 0;
}
main section.notice div.notice_list:has(input.yes:checked) div.detail{
	margin-top:15px;
	padding:15px 15px 5px;
	width:100%;
	order:4;
}

main section.notice div.notice_list table,
main section.notice div.notice_list tbody,
main section.notice div.notice_list tr,
main section.notice div.notice_list th,
main section.notice div.notice_list td{
	display:block;
}

main section.notice div.notice_list div.detail table th{
	padding:0 0 10px;
	text-align:left;
	font-size:140%;
}
main section.notice div.notice_list div.detail table td{
	padding:0 0 15px;
	font-size:140%;
}

main section.notice div.notice_list div.detail table tr:last-child th{
	padding-bottom:10px;
}

main section.notice div.notice_list div.detail table tr:last-child td{
	padding-bottom:15px;
}

main section.notice div.notice_list div.detail table td p.caution{
	margin-top:15px;
}

main section.notice div.notice_list div.detail label{
	margin-top:20px;
}
main section.notice div.notice_list td input,
main section.notice div.notice_list td select{
	font-size:114.85%;
}

main section.notice div.notice_list div.detail table td input.bp{
	width:5.5em;
}



/* -- Block06 -- */

main section.payment{
}

main section.payment details p.caution{
	padding-left:2.5em;
	background-size:1.5em 1.5em;
}

main section.payment details div.form,
main section.payment details div.text{
	padding-bottom:18px;
}


/* 3-4. Modal Content */

section.modal > div.box{
	width:calc(100% - 60px);
	padding:25px;
	top:5vh;
}

section.modal > div.box div p:first-child{
	font-size:120%;
}

section.modal > div.box:has(div.large){
	width:calc(100% - 40px);
	max-height:80vh;
}

section.modal > div.box a.close{
	display:inline-block;
	padding:12px 25px;
	width:auto;
	margin-top:15px;
}

section.modal > div.box ul.date_selector{
	margin-left:-12px;
	width:calc(100% + 12px)	;
}

section.modal > div.box ul.date_selector li,
section.modal > div.box ul.date_selector li:nth-child(6n+1){
	font-size:180%;
	width:calc((100% - 48px)/4);
	max-width:3em;
	margin:0 0 12px 12px;
}

section.modal > div.box ul.date_selector li label{
	padding:10px 0;
}

section.modal > div.box img{
	max-width:100%;
	zoom:0.5;
}


/* -- Block07 -- */

main section a.edit{
	right:20px;
	margin-top:40px;
	top:55px;
	width:8em;
	font-size:100%;
}

main section a.edit + h2{
	margin-top:-65px;
}

main section.payment details{
	border:1px solid #bbdded;
	border-radius:2px 2px 0 0;
	margin-top:20px;
}
main section.payment details:last-child{
	border-radius:0 0 2px 2px;
}

main section.payment details summary{
	padding:12px;
}

main section.payment details summary:before{
	width:15px;
	height:15px;
}

main section.payment details[open] summary:after{
	height:12px;
	width:4px;
	border-right:2px solid #fff;
	border-bottom:2px solid #fff;
	left:18px;
	top:16px;
}

main section.payment details.credit summary,
main section.payment details[open].credit summary{
	background-position:left 10px top 45px;
	background-size:155px 18.5px;
}

main section.payment details[open].credit summary{
	padding-bottom:35px;
}

main section.payment details div.form table td,
main section.payment details div.form table th{
	padding-top:10px;
	display:block;
	text-align:left;
	font-size:140%;
}

main section.payment details div.form table td{
	padding-top:5px;
}

main section.payment details div.form table td input{
	font-size:114.9%
	max-width:100%;
}

main section.payment details div.recommended{
	padding-top:20px;
}

main section.payment details div.form table td p.note{
	font-size:85.72%;
}


/* -- Block08 -- */

section.system{
}

section.system h2{
	font-size:220%;
	margin:-20px 0 0 -20px;
	height:auto;
	padding:40px 70px 40px 20px;
	width:calc(100% + 40px);
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}

section.system h2.error{
	background-position:bottom 0 right 15px;
}

section.system h2.complete{
	background-position:bottom 0 right 15px;
}

section.system p.caution{
	font-size:120%;
	background-size:1.7em 1.5em;
}


/* 3-5. Form Content */

main section.confirm.form a.edit + h2{
	width:100%;
}

main section.form h3{
	font-size:160%;
	position:static;
	margin-top:1em;
}

main section.confirm.form h3{
	max-width:100%;
}

main section.form h4{
	position:static;
	left:0;
	width:auto;
	text-align:left;
	font-size:160%;
	height:auto;
	margin-top:15px;
}

main section.form > div,
main section.form h2 + div{
	padding:0 0 20px;
}

main section.confirm.form > div{
	padding:0 0 15px;
}

main section.confirm.form a.edit + div{
	padding:0 0 15px;
}

main section.form > div:last-child,
main section.confirm.form > div:last-child{
	padding-bottom:5px;
}

main section.form > div.nocat{
	margin-top:15px;
}

main section.form > div div.col2{
	padding-right:0;
	margin-top:15px;
}

main section.form > div div.col2 + div.col2{
	margin-top:20px;
}

main section.form > div div.sp_col2{
	display:flex;
	margin-top:20px;
	align-items:center;
	flex-wrap:wrap;
}

main section.form > div div.sp_col2 > em,
main section.form > div div.sp_col2 > span{
	width:25%;
}

main section.form > div h3 + select,
main section.form > div h3 + input,
main section.form > div h3 + div.tel{
	margin-top:15px;
}
main section.form > div em.text_md{
	margin-left:0;
	height:calc(1.5em + 14px);
}

main section.form > div label:has(input[type="radio"]){
	width:50%;
	margin-top:15px;
	border:1px solid #bbdded;
	padding:5px 10px;
}

main section.form > div label:has(input[type="radio"]):first-child,
main section.form > div h3 + label:has(input[type="radio"]){
	border-radius:3px 0 0 3px;
	border-right:none;
}

main section.form > div label:has(input[type="radio"]):last-child{
	border-radius:0 3px 3px 0;
}

main section.form > div label,
main section.form > div em.text_md,
main section.form > div > input,
main section.form > div > select{
	font-size:160%;
}

main section.form > div.birth span{
	font-size:160%;
	padding-left:1em;
}

main section.form > div p.sub{
	font-size:120%;
}

main section.form > div p{
	margin-top:0.8em;
}

main section.form > div p.error_msg{
	font-size:120%;
	margin-top:1em;
}

main section.form > div label p.error_msg{
	font-size:68.75%;
}

main section.form div.form td p.error_msg,
main section.notice td p.error_msg{
	font-size:85.71%;
}

main section.form > div.birth.error p.error_msg,
main section.form > div:has(input.error) div.tel p.error_msg,
main section.form > div input.error + p.error_msg,
main section.form > div label.error + p.error_msg,
main section.form > div label:has(input.post.error) + p.error_msg{
	display:block;
	width:100%;
}

main section.form > div h3 + p{
	margin-top:0.75em;
}

main section.form > div a.zipsearch{
	max-width:50%;
	font-size:75%;
	box-shadow:0 1px 2px rgba(0,0,0,0.2);
	padding:0.75em 1.25em;
	border-radius:2.5em;
	margin-left:0.5em;
}

main section.form label.sameas{
	font-size:130%;
}

main section.form div label.sameas{
	position:relative;
	width:100%;
	top:0;
}

main section.form label.sameas:first-child{
	margin-top:0;
}

main section.form > div label.view_pass,
main section.form > div label.same_address,
main section.form > div label.add_insured{
	font-size:130%;
}

main section.form > div label.sameas{
	font-size:130%;
	width:95%;
}

main section.form > div label.view_pass + p{
	margin-top:0.6em;
}

main section.form > div h3 + label,
main section.form > div h4 + label{
	position:static;
	margin-top:12px;
	display:block;
}

main section.form > div h4 + label{
	margin-top:7px;
}

main section.form > div p.definition{
	font-size:160%;
	margin-top:15px;
	max-width:100%;
	border:1px solid #bbdded;
}

main section.form:has(label.agent input:checked) div{
	padding-top:0;
	padding-bottom:20px;
	height:auto;
}

main section.confirm.form p.f_lead{
	font-size:120%;
}
main section.form div.add_ip h4 + div.col2{
	margin-top:7px;
}
main section.form div.add_ip + div.add_ip{
	margin-top:30px;
}