@charset "utf-8";

/*----------------------------------------------------------------
 /price/ under
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/
/* flow
----------------------------------------------------------------*/
/*-----------------------------------------------------
 flow-list
-----------------------------------------------------*/
#flow .flow-list{
	--flow-width: 80vw;
	--arrow-size: 20px;
}
#flow .flow-list>li{
	margin				: 0 0 calc(var(--arrow-size) * 2) 0;
	text-align			: center;
}
#flow .flow-list>li>dl{
	position			: relative;
	display				: inline-block;
	width				: var(--flow-width);
	padding				: 20px;
	background			: var(--invert-text-color);
}
#flow .flow-list>li:not(:last-child)>dl::after{
	content				: "";
	position			: absolute;
	width				: 0;
	height				: 0;
	bottom				: calc(var(--arrow-size) * -1);
	left				: 0;
	border-style		: solid;
	border-color		: var(--invert-text-color) transparent transparent transparent;
	border-width		: var(--arrow-size) calc(var(--flow-width)/2) 0 calc(var(--flow-width)/2);
	z-index				: 1;
}
#flow .flow-list>li dt{
	margin				: 0 0 10px 0;
	font-weight			: 700;
	font-size			: 2rem;
}
#flow .flow-list>li dt i{ margin: 0 0.2em 0 0; }

#flow .flow-list>li dd ul{ text-align: left; }
#flow .flow-list>li dd>ul>li{
	padding				: 0 0 0 1em;
	text-indent			: -1em;
}
#flow .flow-list>li dd>ul>li:not(:last-child){ margin: 0 0 calc(var(--line-height) * 1em) 0; }
#flow .flow-list>li dd>ul>li::before{ content: "●"; }

@media screen and (min-width: 769px) {
#flow .flow-list{
	--flow-width: 590px;
	--arrow-size: 50px;
}
#flow .flow-list>li>dl{ padding: 25px 30px; }
#flow .flow-list>li dt{
	margin				: 0 0 15px 0;
	font-size			: 3rem;
}
}


/* price
----------------------------------------------------------------*/
#price{ background: var(--invert-text-color); }

/*-----------------------------------------------------
 row
-----------------------------------------------------*/
#price .row{ justify-content: space-between; }
#price .row>.col{
	flex				: 0 0 47.619%;
	margin				: 0 0 30px 0;
}

/*-----------------------------------------------------
 panel
-----------------------------------------------------*/
#price .panel{
	height				: 100%;
	border-radius		: 20px;
	padding				: 15px 20px 0px 20px;
	background			: var(--base-color);
	text-align			: center;
	font-size			: 2rem;
	font-weight			: 700;
	line-height			: 1.7;
}
#price .panel h3{
	padding				: 10px 0 0 0;
	font-weight			: 700;
	line-height			: 1.2;
}
#price .panel h3>small{
	display				: block;
	margin				: 13px 0 0 0;
	font-size			: var(--font-size);
}
#price .panel .price{ margin: 10px 0 0 0; }
#price .panel .image img{ transform: scale(0.66666); }

/*-----------------------------------------------------
 more
-----------------------------------------------------*/
#price .more{
	margin				: 20px 0;
	text-align			: center;
	font-weight			: 700;
}