@charset "UTF-8";
.purchase { padding: 2vw 5vw 5vw;}
#kaitori .flow-con {width: calc(100% / 7 - 1%);}
#syuccyou .flow-con {width: calc(100% / 6 - 1%);}
#flow .flow-con { display: flex; flex-direction: column;	flex-grow: 1;	border: 1px solid #288CC4;	padding: 0;	margin: .5vw;}#flow .flow-con > div {flex-grow: 1;}
#flow h1 { font-size: 2.3rem; font-weight: 600;}#flow h2 { font-size: 2rem;	color: #288CC4;	position: relative; font-weight: 700;	padding: .5rem 1rem;	margin: 5rem 0 3rem 0;}
#flow h2:before {content: ''; position: absolute;	border-top: 2px solid #333;	top: -1rem;	left: 35%;	width: 30%;}#flow h2:after {content: ''; position: absolute;	border-bottom: 2px solid #333;	bottom: -1rem;	left: 35%;	width: 30%;}
.category-box {border: 1px solid #333;}.category-box dl{padding: .5rem;}.category-box dt{color: #fff;	background: rgba(40,140,196,.8);	padding: .25rem 1rem;	border-radius: 30px;	margin-bottom: .5rem;}#flow h3 { font-size: 1.8rem; font-weight: 600;	padding: .5rem 1rem;}#flow h4 { font-size: 1.5rem;	color: #fff; font-weight: 600;	padding: .5rem 1rem;}.flow-contents li dl {padding: 1rem;	flex-grow: 1;}.flow-contents dt {text-align: center;	font-size: 1.2rem;	color: #288CC4;	margin-bottom: .5rem;}.flow-contents dd {font-size: 1rem;}#flow li.tit {background-color: #288CC4;	text-align: center;	color: #fff;	padding: .25rem 0;	font-size: 1.3rem;	font-weight: 700;}
.contents h1 {font-size: 180%;	color: #288cc4;	font-weight: 700;	border-bottom: 1px solid #288cc4;}
#chart li {display: flex; flex-direction: column;	flex-grow: 1;}#chart li > div {border: 1px solid #333;	border-radius: 10px;	flex-grow: 1;}
#chart h2 {color: #fff;	background-color: #288cc4;	border-radius: 10px 10px 0 0;	text-align: center;	font-size: 1.3rem;	padding: .5rem 0;}
#chart dl {padding: 0 1rem;}#chart dt {font-size: 1.1rem;	font-weight: 700;	margin: .5rem 0;}
#chart span {font-size: 1.1rem;	width: 100%;	padding: .5rem 0;}
#chart dd {font-size: 1rem;	line-height: 1.3;	text-indent: -1.25em; padding-left: 2em;}#chart dd:before {content: '・';	padding-left: .25rem;}
#free dd {font-size: 1rem;}
#free {position: relative; padding: 1.5rem; background-image: linear-gradient(#f5fbff 0 100%), repeating-linear-gradient(135deg, #288CC4 0 10px, transparent 10px 15px); background-repeat: no-repeat; background-position: center; background-size: calc(100% - 10px) calc(100% - 10px), 100%;	border-radius: 10px;}#not-free {position: relative; padding: 1.5rem; background-image: linear-gradient(#fff5f5 0 100%), repeating-linear-gradient(135deg, #db4242 0 10px, transparent 10px 15px); background-repeat: no-repeat; background-position: center; background-size: calc(100% - 10px) calc(100% - 10px), 100%;	border-radius: 10px;}
#free dt {position: relative;	padding-bottom: .5rem; margin-bottom: 0.5rem; font-weight: bold; font-size: 1.5rem; color: black; background-image: repeating-linear-gradient(45deg, #288CC4 0, #288CC4 2px, transparent 2px, transparent 4px); background-repeat: no-repeat; background-size: 100% 0.5rem; background-position: bottom;}#not-free dt {position: relative;	padding-bottom: .5rem; margin-bottom: 0.5rem; font-weight: bold; font-size: 1.5rem; color: black; background-image: repeating-linear-gradient(45deg, #db4242 0, #db4242 2px, transparent 2px, transparent 4px); background-repeat: no-repeat; background-size: 100% 0.5rem; background-position: bottom;}
#free dl {border-bottom: 5px dotted #288CC4;}#not-free dl {border-bottom: 5px dotted #db4242;}
#free ul li,
#not-free ul li {font-size: 1rem !important;}
@media (max-width: 1179px){#kaitori .flow-con {width: calc(100% / 3 - 1%);}
#syuccyou .flow-con {width: calc(100% / 4 - 1%);}}
@media (max-width: 767px){}
@media (max-width: 575px){#kaitori .flow-con {width: calc(100% / 1 - 1%);}
#syuccyou .flow-con {width: calc(100% / 1 - 1%);}
#free h2 { font-size: 1.4rem; }}