@charset "UTF-8";

.page-hero{margin-top: 100px;}

.flow-bg{position:absolute;inset:0;pointer-events:none;z-index:0;}
.bg-img{position:absolute;width:30vw;max-width:420px;min-width:180px;border-radius:20px;}
.img1{top:4%;left:-5vw;}
.img4{bottom:5%;right:-5vw;width: 40vw;}
.flow .wrapper,.flow-list{position:relative;z-index:2;}
.head-text .section-title,.flow .head-text{display: flex;flex-direction: column;align-items:center ;}
.head-text .section-title .section-title-ja,.head-text .section-title-ja{font-size:clamp(16px,3vw,24px);color:#e60012;letter-spacing:0.1em;}
.head-text .section-title .section-title-en, .head-text .section-title-en{font-size: 16px;font-weight: 500;}
.head-text{margin-bottom:40px;display:flex;justify-content:center;}
.head-text .description{text-align:left;margin-top:30px;font-size: 20px;letter-spacing: 0.1em;}
.flow-dot{width:120px;height:auto;flex-shrink:0;}
.flow-dot{width:8vw;max-width:120px;min-width:60px;height:auto;flex-shrink:0;}
.position{width: 80%;margin: 2% auto;max-width: 1000px;}
.position h2{margin-bottom:30px;}
.position h3{margin-bottom:12px;font-size: 24px;color: #e60012;text-align: center;}
.head-text .title{border-bottom:solid 1px #111;padding-bottom:12px;}
.position .description{font-size: 18px;text-align: left;}

.flow{position:relative;overflow:hidden;}
.page-hero{margin-top:100px;}
.flow-inner{width: 90%;margin: 0 auto;max-width: 1200px;margin-bottom: 4%;}
.flow-list{display:flex;justify-content:space-between;align-items:stretch;gap:1%;width:100%;list-style:none;padding:0;}
.flow-bg{position:absolute;inset:0;pointer-events:none;z-index:0;}
.bg-img{position:absolute;width:30vw;max-width:420px;min-width:180px;border-radius:20px;}
.img1{top:0;left:-5vw;}
.img4{top:2%;right:-5vw;width:40vw;}
.flow .wrapper,.flow-list{position:relative;z-index:2;}

.head-text{display:flex;flex-direction:column;align-items:center;}
.head-text .section-title-ja{font-size:150%;color:#e60012;letter-spacing:0.1em;}
.head-text .section-title-en{font-size:100%;font-weight:500;}

.flow-dot{width:8vw;max-width:120px;min-width:60px;height:auto;flex-shrink:0;}

.flow-item{position:relative;background:#f5f5f5;padding:2% ;box-shadow:0 0.5% 1% rgba(0,0,0,0.1);flex:1;}
.flow-item .num{position:absolute;top:0;left:0;transform:translate(-20%,-40%);font-size:clamp(40px,6vw,80px);font-weight:700;color:#e60012;opacity:0.3;}
.flow-item .text{padding-top:0;}
.flow-item h3{font-size:clamp(16px,2.5vw,24px);color:#e60012;margin-bottom:3%;text-align:center;}
.flow-item p{font-size:90%;line-height:1.6;}
.flow-item br.sp{display:none;}

@media screen and (max-width:768px){
.flow-list{flex-direction:column;gap:2%;}
.flow-item{width:100%;margin-bottom:0;}
.flow .head-text{margin-bottom: 0;}
}

@media screen and (max-width:484px){
.flow-list{flex-direction:column;gap:5%;}
.flow-item{width:100%;padding:3%;}
.flow-item .num{font-size:250%;top:-10%;}
.flow-item br.sp{display: block;}
}

.recruit-info-section{width:100%;margin:2% auto;padding:3% 1% 3% 8%;background:#f5f5f5;max-width: 1000px;}
.recruit-info-title{font-size:150%;font-weight:700;color:#d60000;margin-bottom:3%;}
.recruit-info-table{width:100%;}
.recruit-info-row{display:flex;align-items:flex-start;border-bottom:1px solid #ccc;padding:2% 0;}
.recruit-info-label{width:20%;font-weight:600;}
.recruit-info-value{width:80%;line-height:1.6;}
.recruit-info-value br .small{font-size: 10px;}


@media screen and (max-width: 480px){
.recruit-info-section{padding:7% 4%;}
.recruit-info-title{font-size:120%;}
.recruit-info-row{flex-direction:column;gap:2%;}
.recruit-info-label{width:100%;font-size:95%;margin-bottom:2%;}
.recruit-info-value{width:100%;font-size:90%;line-height:1.7;}
}

@media (max-width:768px){
.flow-bg{display:none;}
.description{display:block!important;white-space:normal!important;}
.position{margin:0 auto;}
.dot-img,.flow-dot{display:none;}
.flow-list{padding:0 20px;max-width:none;margin: 2% auto;}
.flow-item{row-gap:8px;margin:16px auto;}
.flow-item .num{font-size:56px;min-width:auto;}
.flow-item .text{padding-top:0;}
.section-title .section-title-ja,.section-title .section-title-en{margin:0 auto;}
.head-text .description{padding:0 20px;font-size:clamp(13px,2vw,20px);}
.head-text{margin-bottom:50px;}
.head-text .title{text-align:center;font-size:clamp(16px,3vw,24px);}
.breadcrumb{position:absolute;top:-10%;left:3%;font-size:14px}
.page-hero-img {margin-top: 0;}
.breadcrumb{top: 30px;}
.flow-item p{text-align: center;}
}