@charset "UTF-8";

:root {
	--ff-roboto: "Roboto", sans-serif;
	--c-navy: #688aaf;
	--c-red: #cc2e15;
}

  

/*************************************************************************************************************************
* reset
*************************************************************************************************************************/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
	display: block;
}
html{ height: 100%; overflow-y: scroll;}
body{ height: 100%; margin: 0; padding: 0; font-family: YakuHanJP_Noto, 'Noto Sans JP', sans-serif; text-align: justify; text-justify: inter-ideograph; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: 'palt' 1; font-feature-settings: 'palt' 1; }
img{ width: 100%; max-width: 100%; height: auto; border: 0; vertical-align: bottom;}
svg{ vertical-align: bottom;}
form{ margin: 0; padding: 0;}
p{ margin: 0; padding: 0;}
a, a:hover{ text-decoration: none; outline: none;}
h1, h2, h3, h4, h5, h6{ margin: 0; padding: 0; font-size: 0; line-height: 0;}
ul, ol, dl, dt, dd{ margin: 0; padding: 0;}
li{ margin: 0; padding: 0; list-style: none;}
table{ border: 0; border-collapse: collapse; border-spacing: 0;}
caption, th{ text-align: left;}
button{ background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none; }
.ruby { margin: 0; padding: 0; ruby-align: space-between; ruby-position: over; }
.rt { margin: 0; padding: 0; line-height: 1;  vertical-align: baseline; }
*{ box-sizing: border-box;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; }
input[type=number] { -moz-appearance: textfield; }
input[type=number] { appearance: textfield; }


/* show only  SP/PC
-------------------------------*/
.tb-only01,
.tb-only02,
.tbpc-only01,
.tbpc-only02,
.pc-only01, 
.pc-only02 { 
	display: none;
}

@media print, screen and (min-width: 681px) {
	.sp-only {
		display: none;
	}
	.tb-only01,
	.tbpc-only01 {
		display: block;
	}
	.tb-only02,
	.tbpc-only02 {
		display: inline;;
	}
}

@media print, screen and (min-width: 1200px) {
	.tb-only01,
	.tb-only02 {
		display: none;
	}
	.pc-only01 {
		display: block;;
	}
	.pc-only02 {
		display: inline;;
	}
}

/*************************************************************************************************************************
* common
*************************************************************************************************************************/
html{ font-weight: 500; font-size: 62.5%; color: #000; line-height: 1.75;}
.is-disabled { opacity: 0.5; pointer-events: none; }

body { font-size: 1.4rem; }
.entire-wrap { display: flex; flex-direction: column; justify-content: space-between; height: calc(100svh - 80px); }

.contents-outer-wrap { flex: 1; display: flex; align-items: center; padding: 25px 20px 60px; }
.contents-outer-wrap--sub { padding: 0; }
.contents-inner-wrap { padding: 28px 20px 30px; }
.main-ttl-wrap { display: block; width: 100%; background: #dde9f2; padding: 17px 0 12px; text-align: center; }
.main-ttl { font-size: 2.0rem; font-weight: 700; line-height: 2.0; }
.sub-ttl { font-size: 2.2rem; font-weight: 700; line-height: 2.0; }

.no-ruby .main-ttl,
.no-ruby .sub-ttl { line-height: 1.45; }
.no-ruby .main-ttl-wrap { padding-top: 9px; }

.btn-submit { display: flex; justify-content: center; align-items: center; width: 180px; height: 60px; background: var(--c-navy); margin: 40px auto 0; font-size: 1.6rem; font-weight: 700; line-height: 2; text-align: center; color: #fff; }
.no-ruby .bun-submit { line-height: 1.45; }

.login-error { background-color: #fff4f4; margin-top: 20px; padding: 5px; text-align: center; color: #c00; }
@media print, screen and (max-width: 680px){
	.entire-wrap--sub { height: auto; }
	.contents-outer-wrap--sub { flex-direction: column; }
}
@media print, screen and (min-width: 681px){
	.entire-wrap--longPc { height: auto; }
	.contents-outer-wrap { padding-bottom: 80px; }
	.contents-inner-wrap { width: 680px; margin-left: auto; margin-right: auto; }
	
	.main-ttl-wrap { padding: 33px 0 21px; }
	.no-ruby .main-ttl-wrap { padding-top: 18px }
.main-ttl { font-size: 2.8rem; }
	.sub-ttl { font-size: 3.0rem; }
}



/******************
	header
******************/
.header{ display: flex; justify-content: space-between; align-items: center; background: var(--c-navy); height: 80px; padding: 0 14px; }

.header__logo a { display: block; }
.header__logo img { width: 150px; }

@media print, screen and (min-width: 681px){
	.header{ padding: 0 30px; }
	.header__logo img { width: 350px; }
}

@media print, screen and (min-width: 880px){
	
}


/*******************
	Ruby Ctrl
******************/
body { line-height: 2; }
body.ruby-hidden { line-height: 1.5; }
body.ruby-hidden rt { display: none; }




.rubyctrl { display: flex; align-items: center; gap: 4px; font-family: sans-serif; }
.rubyctrl__txt { font-size: 1.2rem; font-weight: 700; line-height: 1; text-align: center; color: #fff; }
.switch { position: relative; display: inline-block; width: 74px; height: 30px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch__slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 15px; }
.switch__slider:before { position: absolute; content: ""; width: 24px; aspect-ratio: 1/1; left: 3px; bottom: 3px; background-color: #fff; transition: .4s; border-radius: 50%; z-index: 2; }
.switch__slider .on,
.switch__slider .off { position: absolute; top: 50%; transform: translateY(-56%); font-size: 1.6rem; font-weight: 700; line-height: 1; color: #fff; transition: .4s; }
.switch__slider .on { left: 12px; display: none; }
.switch__slider .off { right: 9px; display: block; }
input:checked + .switch__slider { background-color: #20ce45; }
input:checked + .switch__slider:before { transform: translateX(43px); }
input:checked + .switch__slider .on { display: block; }
input:checked + .switch__slider .off { display: none; }

.ruby { position: relative; display: inline-block; line-height: inherit; }

.ruby .rt { position: absolute; top: -0.3em; left: 50%; transform: translateX(-50%); font-size: 0.5em; line-height: 1; white-space: nowrap; }

@media print, screen and (max-width: 680px){
	.rubyctrl { flex-direction: column; }
}
@media print, screen and (min-width: 681px){
	.rubyctrl { column-gap: 8px; }
	.rubyctrl__txt { font-size: 1.6rem; }
}

/******************
	Enter
******************/
.enter { width: 100%; max-width: 600px; border: 5px solid #e5eef5; margin-left: auto; margin-right: auto; padding: 38px 30px 50px; }
.enter__ttl { font-size: 2.2rem; font-weight: 700; line-height: 2.0; text-align: center; }
.enter__attention { margin-top: 40px; }
.no-ruby .enter__ttl { line-height: 1.3; }
.login { margin-top: 37px; }
.login dl { display: flex; justify-content: flex-end; align-items: baseline; font-size: 1.4rem; }
.login dl:not(:first-of-type) { margin-top: 20px; }
.login dt { min-width: 70px; margin-right: 5px; }
.login dd { flex: 1; }
.login .text { margin-top: 0; }


.login__btn {  }
@media print, screen and (max-width: 680px){
	
}
@media print, screen and (min-width: 681px){
	.enter { padding: 44px 90px 50px; }
	.enter__ttl { font-size: 2.8rem; }
	.enter__attention { text-align: center;}
	.login { margin-top: 47px; }
	.login dl { font-size: 1.6rem; }
	.login dt { min-width: 96px; margin-top: 0; }
	.login__btn { margin-top: 50px; }
}


/******************
	Gate
******************/
.gate {  }
.gate__ttl { text-align: center; }
.gate__txt-wrap { margin-top: 26px; }
.gate__memo-wrap { background: #f3f3f3; margin: 20px 0 0; padding: 15px; }
.gate__txt,
.gate__memo { font-size: 1.4rem; font-weight: 500; line-height: 1.75; }
.gate__memo:first-child{ margin-bottom: 10px;}
@media print, screen and (max-width: 393px){
	.gate__ttl { font-size: 2.1rem; }
}
@media print, screen and (min-width: 681px){
	.gate__txt-wrap { margin-top: 40px; }
	.gate__memo-wrap { margin-top: 40px; padding: 25px; }
	.gate__txt,
	.gate__memo { font-size: 1.6rem; line-height: 2; }
}



/*-----------
		step-1
-----------*/
.form { width: 100%; }
.stuinfo-wrap:first-of-type { margin-top: 23px; }
.stuinfo { }
.stuinfo dt { width: 85px; }
.stuinfo dt::before { content: "［"; }
.stuinfo dt::after { content: "］"; }
.stuinfo dd { width: calc(100% - 85px); }
.fee-sum-wrap { margin-top: 23px; text-align: center; }
.no-ruby .fee-sum-wrap { margin-top: 7px; }
.fee-sum {  }
.fee-sum__ttl { font-size: 2.4rem; font-weight: 700; letter-spacing: 0.2em; text-indent: 0.2em; }
.fee-sum__num { margin-top: -5px; font: 500 4.0rem var(--ff-roboto); line-height: 1; }
.fee-sum__num::before { content: "¥"; }
.prtinfo-wrap { margin-top: 24px; }
.prtinfo { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 20px 0; line-height: 1.75; }
.prtinfo--step2 { align-items: flex-start;}
.prtinfo dt { width: 110px; }
.prtinfo--step2 dt { width: 95px;}
.prtinfo dt::before { content: "［" }
.prtinfo dt::after { content: "］" }


.prtinfo dd input { margin-top: 0; }
input { color: #333; }
.installment-outer-wrap {  }
.installment-ttl {  }
.installment-wrap { margin-top: 20px; }
.installment { font-size: 1.4rem; }
.installment-inner { padding: 15px 10px 0; }
.installment__item--number dd { position: relative; }
.installment__item--number dd::before { position: absolute; top: 50%; transform: translateY(-50%); left: 10px; content: "¥"; }
.installment__item--number .text { padding-left: 25px; }
.installment__item--limit dt.is-disabled { color: #bfbfbf; }

.installment__label { background: #dde9f2; }
.installment .text { margin-top: 0; }
.installment input[type="number"] { text-align: right; }

.installment-sum-wrap { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin-top: 15px; padding: 15px 0 14px; }
.installment-sum { display: flex; justify-content: flex-start; align-items: baseline; }
.installment-sum__label { margin-right: 10px; }
.installment-sum__num { position: relative; text-align: right; }
.installment-sum__num._ok::before { position: absolute; top: 50%; transform: translateY(-50%); right: -25px; display: block; width: 20px; aspect-ratio: 1/1; background: #20ce45 url("../img/icon_ok.svg") no-repeat center/contain; border-radius: 50%; content: ""; }

#installment-sum__num { font: 500 2.4rem var(--ff-roboto); }
#installment-sum__num::before { content: "¥"; }
.installment-diff { margin-left: 7px; }
#installment-diff__num { font: 500 1.8rem var(--ff-roboto); }
#installment-diff__num::before { content: "- ¥"; }
.installment-error { margin-top: 8px; color: var(--c-red); }
.no-ruby .installment-error { margin-top: 0; }
.installment-diff._hide,
.installment-error._hide { display: none; }

.scholarship{ background: #f3f3f3; margin: 20px 0 0; padding: 15px; }

.reason { padding-top: 19px; }
.reason dt { margin-bottom: 8px; }
.reason .sub-exp { font-size: 90%; font-weight: 400; }
.reason__input { min-height: 120px; padding: 12px !important; }

#installment-diff__num.is-remain {
  color: var(--c-red);
}

#installment-diff__num.is-over {
  color: #00a;
}
#installment-diff__num.is-over::before { content: "+ ¥"; }
.btn-step-1 { width: 260px; }

/* 日付入力欄が空の時にplaceholderの内容を表示する */
.paymentdate { position: relative; }
.paymentdate:not(:focus):invalid::before { content: attr(placeholder); position: absolute; color: #aaa; pointer-events: none; }
/* 入力済みの時やフォーカス時は擬似要素を消す */
.paymentdate:focus::before,
.paymentdate:valid::before { display: none; }

.paymentdate._required { background-color: #fff4f4; border: 1px solid #c00 !important; }

@media print, screen and (max-width: 680px){
	.stuinfo { display: flex; justify-content: flex-start; margin-top: 5px; line-height: 1.75; text-align: left;}
	.prtinfo dd { flex: 1; }
	.installment__label { display: block; width: 100%; padding: 11px 10px; }
	.no-ruby .installment__label { padding: 6px 10px; }
/*	.installment__label { width: 55px; }*/
	.installment:not(:first-of-type) { margin-top: 15px; }
	.installment dl { display: flex; align-items: center; }/* width: calc(((100% - 55px) / 2) - 5px);*/
	.installment dl dt { min-width: 30px; margin-right: 5px; }
	
	
/*
	.installment { display: grid; grid-template-columns: 55px minmax(0, 1fr); grid-template-rows: repeat(3, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; }
*/
/*	.installment__item { width: calc(100% - 55px); }*/
/*
	.installment__label { grid-area: 1 / 1 / 4 / 2; margin-top: 5px; }
	*/
	.installment__label--trg { position: relative; }
	.installment__label--trg__icon { position: absolute; top: 50%; transform: translateY(-50%); right: 10px; width: 20px; height: 20px; background: #fff; }
	.installment__label--trg__icon::before,
	.installment__label--trg__icon::after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; background: #999; content: ""; transition: .4s; }
	.installment__label--trg__icon::before { width: 10px; height: 1px; }
	.installment__label--trg__icon::after { width: 1px; height: 10px; }
	.installment__label--trg._active .installment__label--trg__icon::after { height: 0; }
	.installment__item { min-width: 0; }
/*
	.installment dl:nth-of-type(1) { grid-area: 1 / 2 / 2 / 3; }
	.installment dl:nth-of-type(2) { grid-area: 2 / 2 / 3 / 3; }
	.installment dl:nth-of-type(3) { grid-area: 3 / 2 / 4 / 3; }
*/
	.installment dd { flex: 1; }
	.installment-inner { display: grid; grid-template-columns: repeat(2, auto); grid-template-rows: repeat(2, auto); grid-column-gap: 30px; grid-row-gap: 12px; }
	
	.installment__item--number { grid-area: 1 / 1 / 2 / 2; }
.installment__item--paid { grid-area: 1 / 2 / 2 / 3; }
.installment__item--limit { grid-area: 2 / 1 / 3 / 2; }
	
	.installment-inner-wrap._off { display: none; }
	.installment-inner--widthVcEle { display: block; }
}
@media print, screen and (min-width: 681px){
	.step-1-outer-wrap { padding-top: 60px; }
	.no-ruby .step-1-outer-wrap { padding-top: 50px; }
	.form { width: 800px; margin-left: auto; margin-right: auto; }
	
	.stuinfo-wrap { display: flex; justify-content: center; align-items: center; margin-top: 20px; }
	.stuinfo-wrap:first-of-type {  margin-top: 45px; }
	.stuinfo { display: flex; justify-content: center; align-items: center; font-size: 1.6rem; }
	.stuinfo:not(:first-of-type) { margin-left: 50px; }
	.stuinfo dt,
	.stuinfo dd,
	.prtinfo--step2 dt { width: auto; }
	.prtinfo { justify-content: center; padding: 30px 0; font-size: 1.6rem; }
	.prtinfo .text { width: 260px; }
	.prtinfo dd {  }
	.fee-sum-wrap { margin-top: 33px; }
	.no-ruby .fee-sum-wrap { margin-top: 14px; }
	.fee-sum__ttl { font-size: 3.0rem; }
	.fee-sum__num { margin-top: 10px; font-size: 5.0rem; }
	.installment { display: flex; align-items: stretch; border-top: 1px solid #ccc; font-size: 1.6rem; }
	.installment__label { display: flex; justify-content: center; align-items: center; width: 100px; padding: 26px 0 26px; }
	.installment-inner-wrap { flex: 1; align-self: center; }
	.installment-inner { display: flex; justify-content: space-between; padding: 0 30px; }
	.installment__item { display: flex; align-items: center; }
	.installment__item--number { width: 230px; }
	.installment__item--limit { width: 230px; }
	.installment__item--paid { position: relative; flex: 1; padding-left: 34px; }
	.installment__item--paid::before { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); display: block; width: 1px; height: calc(100% - 12px); background: #ccc; content: ""; }
	.installment-inner--widthVcEle::after { content: ""; width: 230px; }
	.installment dl dt { margin-right: 18px; }
	.installment dl dd { flex: 1; }
	.installment-sum__label { margin-right: 16px; }
	.installment-sum-wrap { display: flex; justify-content: space-between; align-items: center; margin-top: 0; padding: 25px 15px 25px; font-size: 1.6rem; }
	#installment-sum__num { font-size: 3.0rem; }
	#installment-diff__num { font-size: 2.0rem; }
	.installment-sum__num._ok::before { right: -35px; width: 26px; }
	.scholarship{ margin: 40px 0 0; padding: 20px; }
	.reason { padding: 41px 0 0; font-size: 1.6rem; }
	.reason dt { margin-bottom: 13px; }
	.reason__input { min-height: 200px; }
}



.checkbox { position: relative; padding-left: 22px; cursor: pointer; }
.checkbox__input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox__input:checked + .checkbox__text:before { background: #2c6b8f; border-color: #2c6b8f; }
.checkbox__input:checked + .checkbox__text:after { opacity: 1; }
.checkbox__text { display: inline-block; padding: 10px 0; }

.checkbox__text:before,
.checkbox__text:after { content: ""; display: block; position: absolute; top: 2px; left: -3px; -webkit-box-sizing: border-box; box-sizing: border-box; }
.checkbox__text:before { width: 20px; aspect-ratio: 1/1; border: 2px solid #ccc; }
.checkbox__text:after { width: 8px; height: 12px; border-right: 2px solid #FFF; border-bottom: 2px solid #FFF; margin: 2px 0 0 6px; opacity: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

@media print, screen and (min-width: 681px){
	.checkbox__text { position: relative; }
	.checkbox__text::before,
	.checkbox__text::after { top: 50%; transform: translateY(-50%); left: -26px; }
	.checkbox__text::after { transform: translateY(-80%) rotate(45deg); }
}


/*-----------
		step-2
-----------*/
.confirm-notice { display: block; background: #eee; margin-top: 21px; padding: 18px 0 10px; font-size: 1.4rem; line-height: 2.0; text-align: center; }
.no-ruby .confirm-notice { padding-top: 10px; line-height: 1.5; }
.installment__result {  }
.installment__result__num {  }
.installment__result__label {  }
.installment__result__label::before { content: "［"; }
.installment__result__label::after { content: "］"; }
.installment__result__num__detail {  }
.installment__result__num__detail__paid { margin-left: 2px; }
.reason--result dd { line-height: 1.5; }
.btn-wrap { display: flex; justify-content: center; align-items: center; margin-top: 40px; }
.btn-wrap .btn-submit-wrap { width: calc(50% - 15px); margin-top: 0; }
.btn-wrap .btn-submit-wrap:not(:first-of-type) { margin-left: 15px; }
.btn-wrap .btn-submit-wrap .btn-submit { width: 100%; margin-top: 0; }


@media print, screen and (max-width: 680px){
	
}
@media print, screen and (min-width: 681px){
	.confirm-notice { margin-top: 34px; font-size: 1.6rem; }
	.installment-wrap--result { border-bottom: 1px solid #ccc; }
	.installment__result { display: flex; align-items: center; }
	.installment__result__num {  }
	.installment__result__limit { margin-left: 60px; }
	.reason--result { padding-top: 51px; }
	.reason--result dt { margin-bottom: 9px; }
	.btn-wrap { margin-top: 77px; }
	.btn-wrap .btn-submit-wrap { max-width: 300px; margin: 0; }
	.btn-wrap .btn-submit-wrap:not(:first-of-type) { margin-left: 40px; }
}



/*************************************************************************************************************************
* step
*************************************************************************************************************************/
.step__ttl{ display: flex; align-items: center; background: #04637c; height: 58px; padding: 0 18px; font-weight: 700; font-size: 15px; line-height: 1; color: #fff;}
.step-list{ display: flex; overflow: hidden;}
.step-list__item{ display: flex; justify-content: center; align-items: center; background: #e6e6e6; width: 20%; height: 58px; padding: 0 0 0 15px; position: relative; font-weight: 900; font-size: 12px; line-height: 1.5; color: #008aaa;}
.step-list__item:nth-child(1){ z-index: 5; padding-left: 0;}
.step-list__item:nth-child(2){ z-index: 4;}
.step-list__item:nth-child(3){ z-index: 3;}
.step-list__item:nth-child(4){ z-index: 2;}
.step-list__item::before,
.step-list__item::after{ content: ""; width: 0; height: 0; position: absolute; top: 50%; border-width: 39px 0 39px 11px; border-style: solid; transform: translateY(-50%);}
.step-list__item::before{ right: -13px; border-color: transparent transparent transparent #fff;}
.step-list__item::after{ right: -11px; border-color: transparent transparent transparent #e6e6e6;}
.step-list__item--on{ background: #78B8C7; color: #fff;}
.step-list__item--on::after{ border-color: transparent transparent transparent #78B8C7;}
.step-list__pc-txt{ display: none;}

@media print, screen and (min-width: 681px){
  .step__ttl{ height: 85px; padding: 0 50px; font-size: 20px;}
  .step-list__item{ height: 75px; padding-left: 30px; font-size: 13px;}
  .step-list__item::before,
  .step-list__item::after{ border-width: 48px 0 48px 18px;}
  .step-list__item::before{ right: -20px;}
  .step-list__item::after{ right: -18px;}
  .step-list__num{ font-size: 12px;}
}

@media print, screen and (min-width: 880px){
  .step-list__item{ justify-content: flex-start; height: 75px; padding-left: 30px; font-size: 13px;}
  .step-list__item:nth-child(1){ padding-left: 10px;}
  .step-list__pc-txt{ display: inline;}
}

@media print, screen and (min-width: 960px){
  .step-list__item{ padding-left: 40px;}
  .step-list__item:nth-child(1){ padding-left: 20px;}
}



/*************************************************************************************************************************
* contents
*************************************************************************************************************************/


/*
.lead{ font-size: 14px;}
.attention{ margin: 15px 0 0; font-size: 14px; color: #ed1c24;}
.attention02{ margin: 20px 0 0; font-weight: 700; font-size: 14px; color: #ed1c24;}
.category{ background: #a4a4a4; margin: 40px 0 0; padding: 12px 15px; font-weight: 700; font-size: 14px; line-height: 1.5; color: #fff;}
.block{ background-image: linear-gradient(to right, #A4A4A4, #A4A4A4 2px, transparent 2px, transparent 4px); background-repeat: repeat-x; background-size: 4px 1px; margin: 20px 0 0; padding: 1px 0 0;}
.block:first-of-type{ background: none; margin-top: 0; padding-top: 0;}
.note{ margin: 7px 0 0; font-size: 11px; line-height: 1.5; color: #999;}
.mail-confirm{ margin: 10px 0 -5px; font-size: 11px; line-height: 1.5;}
.subttl{ margin: 20px 0 0; font-weight: 700; font-size: 14px; line-height: 1.5;}
*/




/* form
*************************************************************************************************************************/
input,
textarea,
select{ border: none; border-radius: 0; -webkit-appearance: none; font: 500 14px/1.75 YakuHanJP_Noto, 'Noto Sans JP', sans-serif; text-align: left;}
input[type=radio],
input[type=checkbox]{ display: none;}

@media print, screen and (min-width: 681px){
  input,
  textarea,
  select{ font-size: 1.6rem; }
}


/* textbox */
.text{ width: 100%; height: 42px; margin: 0; padding: 0 10px; border: 1px solid #bfbfbf; vertical-align: top; }

@media print, screen and (min-width: 681px){
  .text{ padding: 0 14px;}
  .text:first-of-type{ margin-top: 0;}
  .text--320{ width: calc(50% - 10px); margin: 0 0 0 20px;}
  .text--320:first-child{ margin-left: 0;}
  .text--500{ width: 100%; max-width: 500px;}
  .text--580{ width: 100%; max-width: 580px;}
}


/* textarea */
.textarea{ display: block; background: #f8f8f8; width: 100%; height: 250px; margin: 20px 0 0; padding: 12px; border: 2px solid #bfbfbf; border-radius: 3px;}
.text__count{ margin: 5px 0 0; font-size: 13px; line-height: 1.5; color: #ff0000; text-align: right;}

@media print, screen and (min-width: 540px){
  .textarea__cap{ display: flex; justify-content: space-between;}
  .textarea__cap .err__txt{ width: calc(100% - 200px);}
  .text__count{ width: 180px;}
}

@media print, screen and (min-width: 681px){
  .textarea{ height: 420px; margin-top: 30px 0 0; padding: 18px;}
}


/* selectbox */
.select__wrap{ background: #f8f8f8; width: 100%; margin: 10px 0 0; position: relative; border: 2px solid #bfbfbf; border-radius: 3px; overflow: hidden; z-index: 2;}
.select__wrap::after{ content: ""; width: 0; height: 0; position: absolute; top: 50%; right: 14px; border-style: solid; border-width: 6px 4px 0 4px; border-color: #008aaa transparent transparent transparent; transform: translateY(-50%);}
.select__wrap select{ background: transparent; width: 110%; height: 38px; padding: 0 0 0 12px;}

@media print, screen and (min-width: 681px){
  .select__wrap:first-of-type{ margin-top: 0;}
  .select__wrap select{ padding-left: 18px;}
  .select__wrap--200{ width: 200px;}
  .select__wrap--300{ width: 300px;}
  
}


/* checkbox - date */
.dates{ display: flex; flex-wrap: wrap; width: 100%; margin: 0 0 20px 0;}
.dates__item{ width: calc((100% / 3) - 6px); margin: 9px 9px 0 0;}
.dates__item:nth-child(-n+3){ margin-top: 0;}
.dates__item:nth-child(3n){ margin-right: 0;}
.dates__item label{ display: flex; justify-content: center; align-items: center; height: 50px; border: 2px solid #bfbfbf; border-radius: 3px; cursor: pointer;}
.dates__item input[type=radio]:checked + label{ background-color: #008aaa; border-color: #008aaa; color: #fff;}
.dates__item input[type=radio]:checked + label span{ color: #fff;}
.date--sat{ color: #008aaa;}
.date--sun{ color: #e7007d;}

@media print, screen and (min-width: 681px){
  .dates{ margin: 0 0 10px 0;}
  .dates__item{ width: calc((100% - 30px) / 4); margin: 0 10px 10px 0;}
  .dates__item:nth-child(3n){ margin-right: 10px;}
  .dates__item:nth-child(4n){ margin-right: 0;}
}




/* radio */
.radio + label{ display: inline-block; padding: 0 0 0 20px; position:relative; line-height: 1.5; cursor: pointer;}
.radio + label::before{ display: block; content: ""; width: 15px; height: 15px; position: absolute; top: 4px; left: 0; border: 2px solid #b3b3b3; border-radius: 50%; box-sizing: border-box;}
.radio:checked + label:before{ border-color: #008aaa;}
.radio:checked + label::after{ content: ""; display: block; background: #008aaa; width: 5px; height: 5px; position: absolute; top: 9px; left: 5px; border-radius: 50%; box-sizing: border-box;}


@media print, screen and (min-width: 681px){
  .radio + label::before{ left: 0!important;}
  .radio:checked + label::after{ left: 5px!important;}
}


/* submit */
.submit{ margin: 30px 0 0; padding: 35px 0 0; border-top: 1px solid #a4a4a4; text-align: center;}
.submit__btn{ display: flex; justify-content: center; align-items: center; background: #04637c; width: 100%; max-width: 350px; height: 60px; margin: 0 auto; border-radius: 30px; font-weight: 700; font-size: 15px; color: #fff; cursor: pointer; transition: .3s;}
.submit__btn:hover{ background: #008aaa;}
.submit__btn::before{ display: inline-block; content: ""; background: url("../img/ico_arrow.svg") no-repeat 0 0/contain; width: 15px; height: 15px; margin: 0 8px 0 0; vertical-align: middle;}
.submit__back{ display: inline-block; margin: 20px 0 0; font-weight: 700; color: #808080; text-decoration: underline; transition: .3s}
.submit__back:hover{ color: #008aaa; text-decoration: underline;}

@media print, screen and (min-width: 681px){
  .submit{ margin-top: 50px; padding-top: 50px;}
}


/* placeholder */
::-webkit-input-placeholder{ line-height: 1.75; color: #b3b3b3;}
:-ms-input-placeholder{ line-height: 1.75; color: #b3b3b3;}
::-ms-input-placeholder{ line-height: 1.75; color: #b3b3b3;}
::-moz-placeholder{ line-height: 1.75!important; color: #b3b3b3;}
::placeholder{ line-height: 1.75; color: #b3b3b3;}

:focus::-webkit-input-placeholder{ color: transparent;}
:focus:-ms-input-placeholder{ color: transparent;}
:focus::-ms-input-placeholder{ color: transparent;}
:focus::-moz-placeholder{ color: transparent;}
:focus::placeholder{ color: transparent;}



/* error */
.err__head{ background: #ed1c24; margin: 30px 0 0; padding: 15px; color: #fff; text-align: center;}
.err__txt{ margin: 5px 0 0; line-height: 1.3; color: #ed1c24;}
.err__style{ border-color: #ed1c24;}

@media print, screen and (min-width: 681px){
  .err__head{ margin-top: 50px;}
  .err__txt{ margin-top: 10px; width: 100%;}
}


/* form items */
.item{ margin: 20px 0 0;}
.item__ttl{ display: flex; align-items: center; font-weight: 700; line-height: 1;}
.item__required{ display: flex; justify-content: center; align-items: center; background: #cc2d52; width: 28px; height: 16px; margin: 0 10px 0 0; border-radius: 4px; font-size: 10px; line-height: 1; color: #fff;}

@media print, screen and (min-width: 681px){
  .item{ display: flex; flex-wrap: wrap; align-items: flex-start;}
  .item:first-of-type{ margin-top: 30px;}
  .item__ttl{ width: 180px; margin: 14px 0 0; padding: 0 0 0 38px; position: relative;}
  .item__required{ margin: 0; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
  .item__info{ display: flex; flex-wrap: wrap; width: calc(100% - 180px);}
}


/* gender */
.gender__item{ margin: 10px 0 0;}
.gender__item .radio + label{ display: flex; align-items: center; width: 100%; height: 42px; padding: 0 15px 0 36px; border: 2px solid #bfbfbf; border-radius: 3px;}
.gender__item .radio + label::before{ top: 50%; left: 15px; transform: translateY(-50%);}
.gender__item .radio:checked + label::after{ top: 50%; left: 20px; transform: translateY(-50%);}

@media print, screen and (min-width: 681px){
  .gender{ display: flex;}
  .gender__item{ margin: 7px 0 0;}
  .gender__item .radio + label{ width: auto; height: auto; margin: 0 40px 0 0; padding: 0 0 0 20px; border: none;}
}


/* date of birh */
.dob{ display: flex; margin: 10px 0 0;}
.dob__item{ display: flex; align-items: center; margin: 0 15px 0 0;}
.dob__item:nth-child(1){ max-width: 127px;}
.dob__item:nth-child(2),
.dob__item:nth-child(3){ max-width: 104px;}
.dob__item:nth-child(3){ margin-right: 0;}
.dob__item input{ margin: 0 5px 0 0;}

@media print, screen and (max-width: 340px){
  .dob__item{ margin-right: 8px;}
}

@media print, screen and (min-width: 681px){
  .dob{ margin-top: 0;}
  .dob__item{ margin-right: 30px;}
  .dob__item:nth-child(1){ max-width: 195px;}
  .dob__item:nth-child(2),
  .dob__item:nth-child(3){ max-width: 150px;}
}

/* postcode */
.postcode{ display: flex; flex-wrap: wrap; margin: 10px 0 0;}
.postcode__item:nth-child(1){ max-width: 108px; margin: 0 35px 0 0; position: relative;}
.postcode__item:nth-child(1)::after{ content: ""; background: #000; width: 10px; height: 1px; position: absolute; top: 50%; right: -22px; transform: translateY(-50%);}
.postcode__item:nth-child(2){ max-width: 108px; margin: 0 15px 0 0;}
.postcode__item input{ margin-top: 0;}
.postcode__item:nth-child(3){ width: 140px; margin: 10px 0 0;}
.postcode__item:nth-child(3) a{ display: flex; justify-content: center; align-items: center; background: #04637c; height: 42px; border-radius: 21px; font-size: 13px; color: #fff; transition: .3s;}
.postcode__item:nth-child(3) a:hover{ background: #008aaa;}


@media print, screen and (min-width: 446px){
  .postcode__item:nth-child(3){ margin-top: 0;}
}

@media print, screen and (min-width: 681px){
  .postcode{ margin-top: 0;}
  .postcode__item:nth-child(2){ margin-right: 25px;}
}


/* detail*/
.detail{ display: flex; width: 100%;}
.detail__item{ margin: 0 10px 0 0;}
.detail__item:nth-child(1){ width: 36%;}
.detail__item:nth-child(2){ width: 28%;}
.detail__item:nth-child(3){ width: 36%; margin-right: 0;}

@media print, screen and (min-width: 681px){
  .detail{ max-width: 580px;}
  .detail__item{ max-width: 180px;}
  .detail__item:nth-child(1),
  .detail__item:nth-child(2){ margin-right: 30px;}
}


/* approval */
.approval{ margin: 15px 0 0;}
.approval__item{ margin: 10px 0 0;}
.approval__box{ height: 0; overflow: hidden; transition: .3s ease-out;}
.approval__inner{ background: #f2f2f2; margin: 15px 0 10px; padding: 1px 20px 20px; overflow: hidden;}

@media print, screen and (min-width: 681px){
  .approval{ margin-top: 20px;}
  .approval__inner{ padding: 1px 30px 30px;}
}



/*************************************************************************************************************************
* .preview
*************************************************************************************************************************/
.preview__text{ margin: 20px 0 0;}
.preview-list__item{ background-image: linear-gradient(to right, #A4A4A4, #A4A4A4 2px, transparent 2px, transparent 4px); background-repeat: repeat-x; background-size: 4px 1px; margin: 20px 0 0; padding: 20px 0 0;}
.preview-list__item:first-of-type{ background: none; padding-top: 0;}
.preview-list__item span{ display: block; margin:  0 0 5px; color: #999;}

@media print, screen and (min-width: 681px){
  .preview__text{ margin-top: 30px;}
  .preview-list__item{ display: flex;}
  .preview-list__item:first-child{ margin-top: 30px;}
  .preview-list__item span{ width: 160px; color: #000;}
}



/*************************************************************************************************************************
* step 5
*************************************************************************************************************************/
.applied{ margin: 0 0 30px; padding: 20px; border: 6px solid #8AC4D3; text-align: center;}
.applied__ttl{ font-weight: 900; font-size: 20px; line-height: 1; color: #008aaa; letter-spacing: .5px;}
.applied__txt{ background: #f2f2f2; margin: 15px 0 0; padding: 14px; font-weight: 900; font-size: 17px; line-height: 1; color: #008aaa; letter-spacing: 1px;}

.howto{ margin: 15px 0 0; padding: 25px; border: 1px solid #ccc; font-size: 13px;}
.howto__sec:not(:first-of-type){ margin: 25px 0 0;}
.howto__ttl{ margin: 0 0 10px; padding: 0 0 12px; border-bottom: 1px solid #ccc; font-weight: 500; font-size: 14px; line-height: 1; color: #008aaa;}
.howto__ttl::before{ content: "■";}
.howto-list__item{ padding: 0 0 0 1em; position: relative;}
.howto-list__item::before{ content: "※"; position: absolute; top: 0; left: 0;}
.howto-app{ margin: 15px 0;}
.howto-app__item{ margin: 10px 0 0;}
.howto-app__item a{ display: flex; justify-content: center; align-items: center; height: 46px; border: 1px solid #ccc; border-radius: 23px; font-size: 13px; line-height: 1; color: #008aaa; transition: .3s;}
.howto-app__item a:hover{ background: #008aaa; border-color: #008aaa; color: #fff;}
.howto-app__item a::before{ display: inline-block; content: ""; width: 0; height: 0; margin: 0 6px 0 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #008aaa; transition: .3s;}
.howto-app__item a:hover::before{ border-color: transparent transparent transparent #fff;}

.caution{ margin: 35px 0 0;}
.caution__item{ padding: 0 0 0 1em; position: relative;}
.caution__item::before{ content: "※"; position: absolute; top: 0; left: 0;}

.contact{ margin: 35px 0 0; padding: 25px; border: 1px solid #ccc;}
.contact__ttl{ margin: 0 0 10px; padding: 0 0 12px; border-bottom: 1px solid #ccc; font-weight: 500; font-size: 14px; line-height: 1;}
.contact__txt{ font-size: 13px;}
.contact-list{ margin: 20px 0 0;}
.contact-list__item{ margin: 10px 0 0;}
.contact-list__item a{ display: flex; justify-content: center; align-items: center; height: 88px; border: 1px solid #ccc; transition: .3s;}
.contact-list__item a:hover{ border: 3px solid #008aaa;}
.contact__icon{ width: 44px; margin: 0 12px 0 0;}
.contact-info{ width: 180px;}
.contact-info__dt{ font-size: 14px; line-height: 1; color: #333; letter-spacing: 1px;}
.contact-info__dd{ margin: 5px 0 0; font-size: 0; line-height: 0;}
.contact-info__dd img{ width: auto; height: 23px;}

@media print, screen and (max-width: 355px){
  .applied__txt{ font-size: 17px;}
  .contact-info{ width: 150px;}
  .contact-info__dt{ font-size: 12px;  letter-spacing: 0;}
}

@media print, screen and (min-width: 681px){
  .applied{ margin-bottom: 30px; padding: 35px;}
  .applied__ttl{ font-size: 23px;}
  .applied__txt{ margin-top: 30px; padding: 24px; font-size: 23px;}
  
  .howto{ padding: 40px 40px 50px; font-size: 14px;}
  .howto__sec:not(:first-of-type){ margin-top: 35px;}
  .howto__ttl{ font-size: 15px;}
  .howto-app{ margin: 20px 0;}
  .howto-app__item a{ display: flex; justify-content: center; align-items: center; height: 46px; border: 1px solid #ccc; border-radius: 23px; font-size: 13px; line-height: 1; color: #008aaa; transition: .3s;}
  .howto-app__item a:hover{ background: #008aaa; border-color: #008aaa; color: #fff;}
  .howto-app__item a::before{ display: inline-block; content: ""; width: 0; height: 0; margin: 0 6px 0 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #008aaa; transition: .3s;}
  .howto-app__item a:hover::before{ border-color: transparent transparent transparent #fff;}
  
  .caution{ margin-top: 50px;}
  
  .contact{ margin-top: 50px; padding: 40px 40px 50px;}
  .contact__ttl{ font-size: 15px;}
  .contact__txt{ font-size: 14px;}
  .contact-list{ display: flex; justify-content: space-between;}
  .contact-list__item{ width: calc(50% - 10px); margin-top: 0;}
}

@media print, screen and (min-width: 768px){
  .howto-app{ display: flex; justify-content: space-between;}
  .howto-app__item{ width: calc((100% - 30px) / 3); margin-top: 0;}
  
  .contact-list__item a{ height: 110px;}
  .contact__icon{ width: 57px; margin-right: 12px;}
  .contact-info{ width: auto;}
  .contact-info__dt{ font-size: 15px;}
  .contact-info__dd{ margin: 5px 0 0;}
  .contact-info__dd img{ height: 28px;}
}



/*************************************************************************************************************************
* footer
*************************************************************************************************************************/
.footer{ display: flex; justify-content: center; align-items: center; height: 48px; border-top: 1px solid #ccc; font-size: 1.4rem; font-weight: 400; line-height: 1; text-align: center; }
@media print, screen and (min-width: 681px){
	.footer{ height: 75px;}
}