/*
 *
 * page-flow.scss
 *
 */
/* ------------------------------------------------------------
 pg-flow-lead
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.pg-flow-lead {
		padding: 8rem 0 12rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-flow-lead {
		padding: 7.2rem 0 12rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-flow-lead {
		padding: 6.5rem 0 12rem;
	}
}

/* ------------------------------------------------------------
 pg-flow-sample
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.pg-flow-sample {
		margin-bottom: 16.8rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-flow-sample {
		margin-bottom: 15rem;
	}
}

@media screen and (min-width: 1024px) {
	.pg-flow-sample__header {
		margin-bottom: 5.3rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-flow-sample__header {
		margin-bottom: 7.8rem;
	}
}

/* ------------------------------------------------------------
 pg-flow-phase
------------------------------------------------------------ */
.pg-flow-phases {
	border-bottom: solid 1px var(--color-hr);
}

.pg-flow-phase {
	position: relative;
	display: flex;
	border-top: solid 1px var(--color-hr);
}

/* ----------------------------------------
 pg-flow-phase__stage
---------------------------------------- */
.pg-flow-phase__stage {
	position: absolute;
	top: 0;
	left: 53.3%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border-radius: 100px;
	background-color: var(--color-black2);
	color: var(--color-white);
	text-align: center;
	font-weight: 700;
	letter-spacing: calc( 40 / 1000 * 1em);
	-webkit-font-feature-settings: 'palt' 1;
	font-feature-settings: 'palt' 1;
}

@media screen and (min-width: 1024px) {
	.pg-flow-phase__stage {
		font-size: 2.2rem;
		font-size: max( 2.2rem , 18px );
		padding: 3.9rem 12rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-flow-phase__stage {
		display: none;
	}
}

/* ----------------------------------------
 pg-flow-phase__header
---------------------------------------- */
.pg-flow-phase__header {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	border-right: solid 1px var(--color-hr);
	background-color: var(--color-gray3);
	padding: 4.2rem 0;
}

@media screen and (min-width: 1024px) {
	.pg-flow-phase__header {
		width: calc( ( 88 / var( --design-width-pc ) ) * 100%);
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-flow-phase__header {
		width: calc( ( 35 / var( --design-width-sp ) ) * 100%);
	}
}

@media screen and (max-width: 560px) {
	.pg-flow-phase__header {
		width: calc( ( 52 / var( --design-width-sp ) ) * 100%);
	}
}

.pg-flow-phase__header h2 {
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-orientation: upright;
	font-weight: 700;
	letter-spacing: calc( 100 / 1000 * 1em);
}

@media screen and (min-width: 1024px) {
	.pg-flow-phase__header h2 {
		font-size: 2.4rem;
		font-size: max( 2.4rem , 20px );
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-flow-phase__header h2 {
		font-size: 2.2rem;
		font-size: max( 2.2rem , 18px );
	}
}

@media screen and (max-width: 560px) {
	.pg-flow-phase__header h2 {
		font-size: 1.8rem;
		font-size: max( 1.8rem , 15px );
	}
}

/* ----------------------------------------
 pg-flow-phase__body
---------------------------------------- */
.pg-flow-phase__body {
	flex: 1;
}

/* ---------- pg-flow-phase__item ---------- */
.pg-flow-phase__item:not(:last-of-type) {
	border-bottom: solid 1px var(--color-hr);
}

@media screen and (max-width: 768px) {
	.pg-flow-phase__item {
		padding: 8.7rem 2rem 9.3rem;
	}
}

@media screen and (min-width: 769px) {
	.pg-flow-phase__item.-space-bottom {
		padding-bottom: 6.4rem;
	}
}

@media screen and (min-width: 769px) {
	.pg-flow-phase__item.-space-top {
		padding-top: 6.2rem;
	}
}

.pg-flow-phase__item__inner {
	margin: 0 auto;
}

@media screen and (min-width: 769px) {
	.pg-flow-phase__item__inner {
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		justify-content: space-between;
		width: 90%;
	}
}

@media screen and (min-width: 1024px) {
	.pg-flow-phase__item__inner {
		width: calc( ( 1072 / 1312 ) * 100%);
	}
}

/* ----- pg-flow-phase__item__contents ----- */
@media screen and (min-width: 769px) {
	.pg-flow-phase__item__contents {
		padding: 14.5rem 0 15rem;
		width: calc( ( 497 / 1072 ) * 100%);
	}
}

@media screen and (max-width: 768px) {
	.pg-flow-phase__item__contents {
		text-align: center;
		margin-bottom: 7rem;
	}
}

/* --- pg-flow-phase__item__num --- */
.pg-flow-phase__item__num {
	font-family: var(--font-Cantarell);
	font-weight: 700;
}

@media screen and (min-width: 1024px) {
	.pg-flow-phase__item__num {
		font-size: 6rem;
		font-size: max( 6rem , 40px );
		padding-bottom: 6.2rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-flow-phase__item__num {
		font-size: 5rem;
		font-size: max( 5rem , 40px );
		margin-bottom: 5.2rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-flow-phase__item__num {
		font-size: 4rem;
		font-size: max( 4rem , 30px );
		margin-bottom: 4.2rem;
	}
}

/* --- pg-flow-phase__item__title --- */
.pg-flow-phase__item__title {
	font-weight: 700;
	line-height: calc( var(--line-height) * 1em);
	letter-spacing: calc( 40 / 1000 * 1em);
	-webkit-font-feature-settings: 'palt' 1;
	font-feature-settings: 'palt' 1;
}

@media screen and (min-width: 1024px) {
	.pg-flow-phase__item__title {
		font-size: 2.6rem;
		font-size: max( 2.6rem , 20px );
		--line-height: calc( 51 / 26 );
		padding-bottom: 4rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-flow-phase__item__title {
		--line-height: calc( 29 / 18 );
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-flow-phase__item__title {
		font-size: 2.4rem;
		font-size: max( 2.4rem , 20px );
		padding-bottom: 3.5rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-flow-phase__item__title {
		font-size: 1.8rem;
		font-size: max( 1.8rem , 16px );
		padding-bottom: 2.6rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-flow-phase__item__title.-list h4:not(:last-of-type) {
		margin-bottom: 0.5rem;
	}
}

.pg-flow-phase__item__title h4 {
	display: flex;
	align-items: baseline;
	font-weight: 700;
}

@media screen and (max-width: 768px) {
	.pg-flow-phase__item__title h4 {
		justify-content: center;
	}
}

.pg-flow-phase__item__title h4::before {
	content: '';
	display: block;
	border: solid 1px var(--color-black2);
	background-color: var(--color-yellow2);
	border-radius: 50%;
	font-size: inherit;
	line-height: inherit;
	position: relative;
	top: -0.4em;
	-webkit-transform: translateY(50%);
	transform: translateY(50%);
}

@media screen and (min-width: 1024px) {
	.pg-flow-phase__item__title h4::before {
		width: 0.9rem;
		height: 0.9rem;
		margin-right: 1.5rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-flow-phase__item__title h4::before {
		width: 0.6rem;
		height: 0.6rem;
		margin-right: 0.9rem;
	}
}

.pg-flow-phase__item__title h4 > span {
	align-self: baseline;
}

@media screen and (min-width: 769px) {
	.pg-flow-phase__item__title h4 > span {
		flex: 1;
	}
}

@media screen and (min-width: 1024px) {
	.pg-flow-phase__item__title + .pg-flow-phase__item__list {
		margin-top: 0.3rem;
	}
}

/* --- pg-flow-phase__item__border --- */
.pg-flow-phase__item__border {
	display: inline-block;
	vertical-align: middle;
	border-radius: 100px;
	border: solid 1px var(--color-black2);
	font-weight: 700;
	line-height: 1;
	letter-spacing: calc( 40 / 1000 * 1em);
}

@media screen and (min-width: 561px) {
	.pg-flow-phase__item__border {
		font-size: 1.4rem;
		font-size: max( 1.4rem , 12px );
		padding: 0.8rem 1.4rem;
		margin-left: 0.8rem;
		margin-top: -0.4rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-flow-phase__item__border {
		font-size: 1rem;
		padding: 0.5rem 0.9rem;
		margin-left: 0.5rem;
		margin-top: -0.4rem;
	}
}

/* --- pg-flow-phase__item__tel --- */
@media screen and (min-width: 1024px) {
	.pg-flow-phase__item__tel {
		margin-top: 0.9rem;
		padding-bottom: 4.6rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-flow-phase__item__tel {
		margin-top: 0.8rem;
		padding-bottom: 3.2rem;
	}
}

/* --- pg-flow-phase__item__list --- */
.pg-flow-phase__item__list {
	display: flex;
	flex-wrap: wrap;
	margin-top: -0.5rem;
}

@media screen and (min-width: 1024px) {
	.pg-flow-phase__item__list {
		margin-left: -0.5rem;
		margin-bottom: 2.8rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-flow-phase__item__list {
		margin-left: -0.4rem;
		margin-bottom: 2rem;
	}
}

@media screen and (max-width: 768px) {
	.pg-flow-phase__item__list {
		justify-content: center;
	}
}

.pg-flow-phase__item__list li {
	border-radius: 100px;
	background-color: var(--color-gray3);
	font-weight: 700;
	letter-spacing: calc( 50 / 1000 * 1em);
	margin-top: 0.5rem;
}

@media screen and (min-width: 1024px) {
	.pg-flow-phase__item__list li {
		font-size: 1.6rem;
		font-size: max( 1.6rem , 13px );
		padding: 1.1rem 2.3rem;
		margin-left: 0.5rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-flow-phase__item__list li {
		font-size: 1.3rem;
		font-size: max( 1.3rem , 12px );
		padding: 0.9rem 1.9rem;
		margin-left: 0.4rem;
	}
}

/* --- pg-flow-phase__item__txt --- */
@media screen and (max-width: 560px) {
	.pg-flow-phase__item__txt {
		padding: 0 2rem;
	}
}

/* ---------- pg-flow-phase__item__figure ---------- */
@media screen and (min-width: 769px) {
	.pg-flow-phase__item__figure {
		width: calc( ( 570 / 1072 ) * 100%);
	}
}

.pg-flow-phase__item__figure > div {
	position: relative;
	max-width: calc( var( --base-width ) * 0.1rem);
	margin: 0 auto;
}

@media screen and (min-width: 1024px) {
	.pg-flow-phase__item__figure > div {
		width: calc( ( var( --base-width ) / 570 ) * 100%);
		width: calc( var( --base-width ) * 0.1rem);
	}
}

.pg-flow-phase__item__figure__illust {
	padding-top: calc( ( var(--padding-top, 0)/var(--base-width) ) * 100%);
	padding-left: calc( ( var(--padding-left, 0)/var(--base-width) ) * 100%);
	padding-right: calc( ( var(--padding-right, 0)/var(--base-width) ) * 100%);
	padding-bottom: calc( ( var(--padding-bottom, 0)/var(--base-width) ) * 100%);
}

/* ----- pg-flow-phase__item__figure-1 ----- */
.pg-flow-phase__item__figure-1 {
	--base-width: 348;
	--base-height: 274;
	--padding-top: 58;
	--padding-left: 42;
}

@media screen and (min-width: 1024px) {
	.pg-flow-phase__item__figure-1 {
		-webkit-transform: translate3d(calc( ( -64 / var( --base-width ) ) * 100%), calc( ( -12 / var( --base-height ) ) * 100%), 0);
		transform: translate3d(calc( ( -64 / var( --base-width ) ) * 100%), calc( ( -12 / var( --base-height ) ) * 100%), 0);
	}
}

@media screen and (max-width: 1023px) {
	.pg-flow-phase__item__figure-1 {
		width: 26rem;
	}
}

.pg-flow-phase__item__figure-1 .c-balloon:nth-of-type(1) {
	top: calc( ( 43 / var( --base-height ) ) * 100%);
	left: 0;
}

.pg-flow-phase__item__figure-1 .c-balloon:nth-of-type(2) {
	top: 0;
	right: calc( ( 60 / var( --base-width ) ) * 100%);
}

/* ----- pg-flow-phase__item__figure-2 ----- */
.pg-flow-phase__item__figure-2 {
	--base-width: 311;
	--base-height: 276;
	--padding-top: 65;
	--padding-left: 48;
	--padding-right: 52;
}

@media screen and (min-width: 1024px) {
	.pg-flow-phase__item__figure-2 {
		-webkit-transform: translate3d(calc( ( -46 / var( --base-width ) ) * 100%), calc( ( -7 / var( --base-height ) ) * 100%), 0);
		transform: translate3d(calc( ( -46 / var( --base-width ) ) * 100%), calc( ( -7 / var( --base-height ) ) * 100%), 0);
	}
}

@media screen and (max-width: 1023px) {
	.pg-flow-phase__item__figure-2 {
		width: 23.2rem;
	}
}

.pg-flow-phase__item__figure-2 .c-balloon:nth-of-type(1) {
	top: 0;
	left: 0;
}

.pg-flow-phase__item__figure-2 .c-balloon:nth-of-type(2) {
	top: 0;
	right: 0;
}

/* ----- pg-flow-phase__item__figure-3 ----- */
.pg-flow-phase__item__figure-3 {
	--base-width: 292;
	--base-height: 225;
	--padding-top: 92;
	--padding-right: 110;
}

@media screen and (min-width: 1024px) {
	.pg-flow-phase__item__figure-3 {
		-webkit-transform: translate3d(calc( ( -46 / var( --base-width ) ) * 100%), calc( ( -9 / var( --base-height ) ) * 100%), 0);
		transform: translate3d(calc( ( -46 / var( --base-width ) ) * 100%), calc( ( -9 / var( --base-height ) ) * 100%), 0);
	}
}

@media screen and (max-width: 1023px) {
	.pg-flow-phase__item__figure-3 {
		width: 21.6rem;
	}
}

.pg-flow-phase__item__figure-3 .c-balloon {
	top: 0;
	right: 0;
}

/* ----- pg-flow-phase__item__figure-4 ----- */
.pg-flow-phase__item__figure-4 {
	--base-width: 342;
	--base-height: 179;
	--padding-top: 10;
	--padding-left: 122;
}

@media screen and (min-width: 1024px) {
	.pg-flow-phase__item__figure-4 {
		-webkit-transform: translate3d(calc( ( -46 / var( --base-width ) ) * 100%), calc( ( 12 / var( --base-height ) ) * 100%), 0);
		transform: translate3d(calc( ( -46 / var( --base-width ) ) * 100%), calc( ( 12 / var( --base-height ) ) * 100%), 0);
	}
}

@media screen and (max-width: 1023px) {
	.pg-flow-phase__item__figure-4 {
		width: 25.3rem;
	}
}

.pg-flow-phase__item__figure-4 .c-balloon {
	top: 0;
	left: 0;
}

/* ----- pg-flow-phase__item__figure-5 ----- */
.pg-flow-phase__item__figure-5 {
	--base-width: 264;
	--base-height: 245;
	--padding-top: 22;
	--padding-left: 68;
}

@media screen and (min-width: 1024px) {
	.pg-flow-phase__item__figure-5 {
		-webkit-transform: translate3d(calc( ( -46 / var( --base-width ) ) * 100%), calc( ( -3 / var( --base-height ) ) * 100%), 0);
		transform: translate3d(calc( ( -46 / var( --base-width ) ) * 100%), calc( ( -3 / var( --base-height ) ) * 100%), 0);
	}
}

@media screen and (max-width: 1023px) {
	.pg-flow-phase__item__figure-5 {
		width: 19.7rem;
	}
}

.pg-flow-phase__item__figure-5 .c-balloon {
	top: 0;
	left: 0;
}

/* ----- pg-flow-phase__item__figure-7 ----- */
.pg-flow-phase__item__figure-7 {
	--base-width: 264;
	--base-height: 329;
	--padding-top: 85;
	--padding-left: 50;
}

@media screen and (min-width: 1024px) {
	.pg-flow-phase__item__figure-7 {
		-webkit-transform: translate3d(calc( ( -46 / var( --base-width ) ) * 100%), calc( ( -24 / var( --base-height ) ) * 100%), 0);
		transform: translate3d(calc( ( -46 / var( --base-width ) ) * 100%), calc( ( -24 / var( --base-height ) ) * 100%), 0);
	}
}

@media screen and (max-width: 1023px) {
	.pg-flow-phase__item__figure-7 {
		width: 19.5rem;
	}
}

.pg-flow-phase__item__figure-7 .c-balloon {
	top: 0;
	left: 0;
}

/* ----- pg-flow-phase__item__figure-8 ----- */
.pg-flow-phase__item__figure-8 {
	--base-width: 349;
	--base-height: 312;
	--padding-top: 100;
}

@media screen and (min-width: 1024px) {
	.pg-flow-phase__item__figure-8 {
		-webkit-transform: translate3d(calc( ( -46 / var( --base-width ) ) * 100%), calc( ( -13 / var( --base-height ) ) * 100%), 0);
		transform: translate3d(calc( ( -46 / var( --base-width ) ) * 100%), calc( ( -13 / var( --base-height ) ) * 100%), 0);
	}
}

@media screen and (max-width: 1023px) {
	.pg-flow-phase__item__figure-8 {
		width: 25.8rem;
	}
}

.pg-flow-phase__item__figure-8 .c-balloon {
	top: 0;
	left: calc( ( 3 / var( --base-width ) ) * 100%);
}

/* ----- pg-flow-phase__item__figure-9 ----- */
.pg-flow-phase__item__figure-9 {
	--base-width: 352;
	--base-height: 378;
	--padding-top: 83;
	--padding-right: 5;
}

@media screen and (min-width: 1024px) {
	.pg-flow-phase__item__figure-9 {
		-webkit-transform: translate3d(calc( ( -67 / var( --base-width ) ) * 100%), calc( ( 20 / var( --base-height ) ) * 100%), 0);
		transform: translate3d(calc( ( -67 / var( --base-width ) ) * 100%), calc( ( 20 / var( --base-height ) ) * 100%), 0);
	}
}

@media screen and (max-width: 1023px) {
	.pg-flow-phase__item__figure-9 {
		width: 26.6rem;
	}
}

.pg-flow-phase__item__figure-9 .c-balloon:nth-of-type(1) {
	top: calc( ( 11 / var( --base-height ) ) * 100%);
	left: calc( ( 29 / var( --base-width ) ) * 100%);
}

.pg-flow-phase__item__figure-9 .c-balloon:nth-of-type(2) {
	top: 0;
	right: 0;
}

/* ----- pg-flow-phase__item__figure-10 ----- */
.pg-flow-phase__item__figure-10 {
	--base-width: 340;
	--base-height: 278;
	--padding-top: 46;
	--padding-right: 48;
	--padding-left: 55;
}

@media screen and (min-width: 1024px) {
	.pg-flow-phase__item__figure-10 {
		-webkit-transform: translate3d(calc( ( -46 / var( --base-width ) ) * 100%), calc( ( -29 / var( --base-height ) ) * 100%), 0);
		transform: translate3d(calc( ( -46 / var( --base-width ) ) * 100%), calc( ( -29 / var( --base-height ) ) * 100%), 0);
	}
}

@media screen and (max-width: 1023px) {
	.pg-flow-phase__item__figure-10 {
		width: 25rem;
	}
}

.pg-flow-phase__item__figure-10 .c-balloon:nth-of-type(1) {
	top: 0;
	right: 0;
}

.pg-flow-phase__item__figure-10 .c-balloon:nth-of-type(2) {
	top: calc( ( 118 / var( --base-height ) ) * 100%);
	left: 0;
}