@charset "utf-8";

/*-------------------------------------------------------
MARK: - title-lv2 sub
-------------------------------------------------------*/

.g-title-sub {
	display: block;
	font-size: 0.7em;
	letter-spacing: 0;
}

/*-------------------------------------------------------
MARK: - step
-------------------------------------------------------*/

.g-step {
	display: block;
	background-color: var(--c-myblue);
	font-size: var(--fs16);
	color: var(--c-white);
	letter-spacing: 0;
	width: fit-content;
	margin: 0 auto;
	padding: 1px 15px;
	border-radius: 20px;
}

@media (max-width: 991px) {
	.g-step {
		font-size: var(--fs14);
	}
}

/*-------------------------------------------------------
MARK: - flow list
-------------------------------------------------------*/

.g-flow {
	max-width: 600px;
	margin: 30px auto 0;
	counter-reset: flow;
}

.g-flow__itm {
	counter-increment: flow;
	position: relative;
	text-align: center;
}

.g-flow__itm:not(.--done) {
	margin-bottom: 45px;
}

.g-flow__itm.--done {
	margin-top: -5px;
}

.g-flow__itm:not(.--done)::after {
	content: '';
	width: 40px;
	height: 16px;
	position: absolute;
	background: url(/my/common/img/icon/ic_flow_arrow_myblue.svg) no-repeat center;
	background-size: 100% auto;
	display: block;
	left: 50%;
	bottom: -28px;
	transform: translateX(-50%);
}

.g-flow__itm a {
	display: block;
	background-color: var(--c-skyblue);
	border-radius: 12px;
	position: relative;
	padding: 9px 35px 10px;
	box-shadow: 0px 4px 10px rgba(40, 153, 255, 0.14), 0px 3px 0px #94CCFF;
	transition: box-shadow 0.08s, transform 0.08s;
	background-image: url(/my/common/img/icon/ic_arrow_down_myblue.svg);
	background-repeat: no-repeat;
	background-position: center right 15px;
}

.cmn2 .g-flow__itm a {
	color: var(--c-nttbrack);
	text-decoration: none;
}

.cmn2 .g-flow__itm a:hover {
	color: var(--c-nttbrack);
	box-shadow: none;
	transform: translateY(4px);
}

.g-flow__itm:not(.--done) a::before {
	content: 'STEP' counter(flow);
	display: block;
	background-color: var(--c-myblue);
	font-size: var(--fs13);
	color: var(--c-white);
	letter-spacing: 0;
	width: fit-content;
	margin: -17px auto 3px;
	padding: 0 12px;
	border-radius: 20px;
}

.g-flow__itm:not(.--done) a[data-step]::before {
	content: attr(data-step);
}

.c-main .g-flow__itm p { margin-top: 0; }

.g-flow__itm.--no_arrow {
	margin-bottom: 0;
}

.g-flow__itm.--no_arrow::after {
	display: none;
}

.g-flow__label {
	font-weight: 700;
}

.g-flow__dis {
	font-size: var(--fs14);
	font-weight: 400;
}

.g-flow__itm.--done div {
	padding: 15px 35px;
	border: solid 2px var(--c-myblue);
	color: var(--c-myblue);
	background-color: var(--c-white);
}

@media (max-width: 991px) {
	.g-flow {
		font-size: var(--fs15);
	}
}

/*-------------------------------------------------------
MARK: - branch
-------------------------------------------------------*/

.g-branch {
	display: grid;
	gap: 15px;
	grid-template-columns: repeat(2, 1fr);
	max-width: 600px;
	margin: 0 auto;
}

.g-branch__itm {
	font-weight: 700;
	text-align: center;
}

.g-branch__txt {
	margin-bottom: 20px;
}


/*-------------------------------------------------------
MARK: - comp
-------------------------------------------------------*/

.g-comp {
	margin-top: 40px;
	display: grid;
	grid-template-columns: 500px 1fr;
	gap: 40px;
}

.g-comp__fit {
	position: relative;
	display: block;
	width: fit-content;
	margin: 0 auto;
}

.g-comp__img img {
	display: block;
	margin: 0 auto;
	width: 100%;
	height: auto;
	max-width: 500px;
}

@media (max-width: 991px) {
	.g-comp {
		margin-top: 20px;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}
}

@media (max-width: 767px) {
	.g-comp {
		grid-template-columns: 1fr;
	}
}

/*-------------------------------------------------------
MARK: - comp no
-------------------------------------------------------*/

.g-comp__no {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.g-comp__no li {
	white-space: nowrap;
	transform: translate(-50%, -50%);
}

.g-comp__no li.--sup {
	width: auto;
	height: auto;
	line-height: 1;
	border-radius: 5px;
	font-size: var(--fs14);
	padding: 4px 5px;
}

/*-------------------------------------------------------
MARK: - comp num
-------------------------------------------------------*/

.g-comp__no li,
.g-comp__itm::before {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 30px;
	height: 30px;
	background: #F4AD16;
	box-shadow: 1px 2px 0px #B1821F;
	border-radius: 50%;
	font-weight: 700;
}

.g-comp__no li.--nest,
.g-comp__itm .g-comp__itm::before {
	background-color: var(--c-white);
	border: 2px solid #F4AD16;
}

@media (max-width: 767px) {
	.g-comp__no li,
	.g-comp__itm::before {
		width: 24px;
		height: 24px;
		line-height: 1;
		font-size: var(--fs14);
	}
}

/*-------------------------------------------------------
MARK: - comp list
-------------------------------------------------------*/

.g-comp__list {
	counter-reset: step;
}

.g-comp__itm {
	counter-increment: step;
	position: relative;
	padding: 3px 0 3px 40px;
}

.g-comp__itm:not(:first-child) {
	margin-top: 17px;
}

.g-comp__itm::before {
	content: counter(step);
	left: 0;
	top: 0;
}

.g-comp__itm.--set1 { counter-set: step 1; }
.g-comp__itm.--set2 { counter-set: step 2; }
.g-comp__itm.--set3 { counter-set: step 3; }
.g-comp__itm.--set4 { counter-set: step 4; }
.g-comp__itm.--set5 { counter-set: step 5; }
.g-comp__itm.--set6 { counter-set: step 6; }
.g-comp__itm.--set7 { counter-set: step 7; }
.g-comp__itm.--set8 { counter-set: step 8; }
.g-comp__itm.--set9 { counter-set: step 9; }
.g-comp__itm.--set10 { counter-set: step 10; }
.g-comp__itm.--set11 { counter-set: step 11; }
.g-comp__itm.--set12 { counter-set: step 12; }
.g-comp__itm.--set13 { counter-set: step 13; }
.g-comp__itm.--set14 { counter-set: step 14; }
.g-comp__itm.--set15 { counter-set: step 15; }
.g-comp__itm.--set16 { counter-set: step 16; }
.g-comp__itm.--set17 { counter-set: step 17; }
.g-comp__itm.--set18 { counter-set: step 18; }
.g-comp__itm.--set19 { counter-set: step 19; }
.g-comp__itm.--set20 { counter-set: step 20; }
.g-comp__itm.--set21 { counter-set: step 21; }
.g-comp__itm.--set22 { counter-set: step 22; }
.g-comp__itm.--set23 { counter-set: step 23; }
.g-comp__itm.--set24 { counter-set: step 24; }
.g-comp__itm.--set25 { counter-set: step 25; }
.g-comp__itm.--set26 { counter-set: step 26; }
.g-comp__itm.--set27 { counter-set: step 27; }
.g-comp__itm.--set28 { counter-set: step 28; }
.g-comp__itm.--set29 { counter-set: step 29; }
.g-comp__itm.--set30 { counter-set: step 30; }

/*done*/
.g-comp__itm.--done {
	padding: 8px;
	font-weight: 700;
	color: var(--c-myblue);
	border: solid 2px var(--c-myblue);
	text-align: center;
}

.g-comp__itm.--none::before,
.g-comp__itm.--done::before {
	display: none;
}

.g-comp__itm.--done img {
	width: auto;
	max-height: 191px;
}

.g-comp__itm > .g-comp__list {
	margin-top: 17px;
}

@media (max-width: 767px) {
	.g-comp__itm {
		font-size: var(--fs14);
		padding: 1px 0 3px 33px;
	}
}

/*-------------------------------------------------------
MARK: - note
-------------------------------------------------------*/

.g-note {
	position: relative;
	margin-top: 25px;
	padding: 22px 20px 17px;
	border-radius: 18px;
	background: var(--c-lightblue);
	border: 2px dashed #F4AD16;
}

.c-bgcolor__gray01 .g-note {
	background: var(--c-white);
}

.g-note__label {
	position: absolute;
	left: 25px;
	top: -18px;
	background-color: #F4AD16;
	font-weight: 700;
	line-height: 1;
	padding: 5px 10px 7px;
	box-shadow: 1px 2px 0px #B1821F;
	border-radius: 5px;
}

.g-note__title {
	font-weight: 700;
	margin-top: 0.8em;
}

.g-note__label + * {
	margin-top: 0;
}

/*-------------------------------------------------------
MARK: - nav
-------------------------------------------------------*/

.g-nav__title {
	margin-top: 10px;
	font-size: var(--fs18);
	font-weight: 700;
	border-bottom: solid 1px #CFCFCF;
	padding-bottom: 10px;
}

.g-nav__list {
	margin-top: 10px;
}

.g-nav__itm + .g-nav__itm {
	margin-top: 5px;
}

@media (max-width: 767px) {
	.g-nav .c-accordion__inn {
		padding: 20px 0;
	}

	.g-nav__title {
		font-size: var(--fs16);
		padding-bottom: 5px;
	}

	.g-nav__list {
		margin-top: 5px;
		display: flex;
		flex-wrap: wrap;
		gap: 0 20px;
	}

	.g-nav__itm {
		min-width: calc(50% - 10px);
		font-size: var(--fs15);
	}
}

/*-------------------------------------------------------
MARK: - img icon
-------------------------------------------------------*/

.g-icon {
	display: inline-block;
	height: 1.1em;
	width: auto;
	margin: 0 0.1em;
	vertical-align: -0.2em;
}

/*-------------------------------------------------------
MARK: - aside
-------------------------------------------------------*/

.g-aside {
	padding: 20px;
	background: var(--c-lightblue);
	text-align: center;
}

.c-bgcolor__gray01 .g-aside {
	background: var(--c-white);
}

.g-aside h3 {
	font-size: var(--fs18);
	font-weight: 700;
	margin-bottom: 10px;
	color: var(--c-myblue);
}