@charset "utf-8";
/*===============================================
 *	サービスの流れ
===============================================*/
#flow .layer-item{margin: 0 0 100px;}
#flow .layer-contents {width: 56%;}
#flow .flow-badge{background: var(--site-primary);color: #fff;}
#flow .flow-icon_box {max-width: 350px;}
.flow-list li{background: #fff;border-radius: 6px;margin: 0 0 30px;padding: 40px;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;}
.flow-list li:last-child{margin: 0;}
.flow-contents{width: 62%;}
.flow-hd_box{background: #fff;margin: 0 0 .5em;position: relative;}
.flow-ttl{font-size: 30px;font-weight: bold;position: relative;margin: 0 0 .75em 0;}
.flow-ttl:before {content: "";background: var(--site-primary);position: absolute;bottom: -10px;left: 0;width: 60px;height: 2px;}
.flow-sub_ttl{color: var(--site-secondary);font-size: clamp(17px, 1.8vw, 22px);font-weight: bold;}

@media screen and (max-width: 1024px) {
#flow .layer-contents {width: 50%;}
.flow-ttl {font-size: 28px;}
.flow-ttl:before{bottom: -5px;}
.flow-contents {width: 56%;}
}
@media screen and (max-width: 960px) {
#flow .flow-icon_box {max-width: initial;width: 40%;}
.flow-list li {padding: 30px;}
.flow-ttl {font-size: 21px;margin: 0 0 1em 0;}
.flow-ttl:before {bottom: -10px;width: 50px;height: 4px;}

}
@media screen and (max-width: 568px) {
#flow{margin: 0;}
#flow .layer-item {margin: 0 0 60px;}
#flow .layer-contents {width: 100%;}
#flow .flow-badge {font-size: 20px;}
#flow .flow-badge span {font-size: 17px;}
#flow .flow-icon_box {max-width: initial;margin: 0 0 10px;width: 100%;}
.flow-list li {padding: 20px;}
.flow-contents {width: 100%;}
}