@charset "UTF-8";*{-webkit-box-sizing:border-box;box-sizing:border-box;background-repeat:no-repeat;background-position:center;background-size:cover}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1;overflow-x:hidden}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-spacing:0;border-collapse:collapse}body,html{margin:0px;width:100%;padding:0px;height:100%;font-size:16px;font-weight:300;position:relative;font-family:游ゴシック,Yu Gothic,游ゴシック体,YuGothic,YuGothic,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,ＭＳ Ｐゴシック,sans-serif}.clearFix{clear:both;float:none!important}.hide{display:none}.noScroll{overflow:hidden}.cage{margin:0 auto;padding:0 20px}.flex{display:flex;position:relative;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex}.flexC{display:flex;position:relative;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.animate{transition:0.5s ease-in-out;-o-transition:0.5s ease-in-out;-moz-transition:0.5s ease-in-out;-webkit-transition:0.5s ease-in-out}input:not([type=checkbox]):not([type=radio]),select,textarea{border:0;width:100%;display:block;border-radius:0;font-size:0.85rem;padding:15px 15px;letter-spacing:1px;border-style:solid;background:transparent;-webkit-appearance:none;-webkit-border-radius:0px;border-bottom:1px solid #cccccc}input:not([type=checkbox]):not([type=radio]) :focus,select :focus,textarea :focus{outline:none;outline-style:none;outline-color:transparent}a{text-decoration:none}.checkbox{margin:0 15px 25px 0;display:inline-block;position:relative;width:auto}.checkbox input[type=checkbox]{position:absolute;left:-9999px;opacity:0;pointer-events:none;width:auto;height:auto;padding:0;margin:0;border:none;background:transparent}.checkbox label{color:#333;cursor:pointer;position:relative;padding-left:23px;font-size:12px;display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:1.5;margin:0;width:auto}.checkbox label:hover{color:#2196F3}.checkbox label:before{content:"";position:absolute;left:0;top:1px;width:16px;height:16px;border:1px solid #CED4DA;border-radius:4px;background:#fff;-webkit-transition:all 0.2s ease;transition:all 0.2s ease;pointer-events:none}.checkbox label:after{content:"✓";position:absolute;left:2px;top:1px;width:16px;height:16px;font-size:12px;color:#fff;line-height:16px;text-align:center;opacity:0;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transition:all 0.2s ease;transition:all 0.2s ease;pointer-events:none}.checkbox input[type=checkbox]:checked+label{color:#333}.checkbox input[type=checkbox]:checked+label:before{background:#237FDB;border-color:#237FDB}.checkbox input[type=checkbox]:checked+label:after{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}@font-face{font-family:"Mincho";src:url("../fonts/A-OTF-A1MinchoStd-Bold.otf");font-weight:normal;font-style:normal}body{font-family:"Noto Sans JP",sans-serif;font-weight:400;font-size:13px;line-height:1.8;letter-spacing:1px;color:#5A5F67;background:-webkit-gradient(linear,left top,right top,from(rgb(68,133,195)),to(rgb(104,157,207)));background:linear-gradient(90deg,rgb(68,133,195) 0%,rgb(104,157,207) 100%)}img{width:100%}a{display:inline-block;-webkit-transition:0.5s;transition:0.5s}a:hover{cursor:pointer;opacity:0.6;-webkit-transition:0.5s;transition:0.5s}.pc{display:block}.tablet{display:none}.sp{display:none}#wrapper{width:100%;height:100dvh;margin:0 auto;max-width:500px;overflow:hidden;position:relative;overflow-y:scroll;background-color:#F3F6F9;padding-top:31px;padding-bottom:54px}header{top:0;left:50%;z-index:10;width:100%;color:#FFFFFF;max-width:500px;padding:4px 10px;position:fixed;background:#237FDB;text-align:center;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}header span{font-weight:700;padding-left:4px;display:inline-block}footer{left:50%;bottom:0;z-index:10;width:100%;color:#FFFFFF;max-width:500px;padding:4px 10px;position:fixed;background:#FFFFFF;text-align:center;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);color:#5A5F67;font-size:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:9px 10px}footer a{color:#5A5F67;text-decoration:none;margin-right:10px;border-right:1px solid #5A5F67;padding-right:10px;line-height:10px}footer a:last-child{margin-right:0;border-right:0;padding-right:0}#introScreen{width:100%;height:100%;overflow-y:scroll;background-size:cover;background-image:url("../img/KV 1.jpg")}#introScreen .intro-content{z-index:2;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-line-pack:start;align-content:flex-start;padding:20px 20px 5px 20px}#introScreen .intro-content .titleHolder{-webkit-box-flex:1;-ms-flex:1;flex:1;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#introScreen .intro-content .titleHolder img{width:57%}#introScreen .intro-content .contentHolder{gap:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-bottom:12px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}#introScreen .intro-content .contentHolder .contentblock{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;background-color:#FFFFFF;padding:25px 20px 20px 20px;border-radius:8px;position:relative;width:100%}#introScreen .intro-content .contentHolder .contentblock .subTitle{font-size:14px;color:#237FDB;padding:2px 10px;border-radius:99px;font-weight:700;background:#E8F0FF;max-width:210px;width:100%;text-align:center;position:absolute;top:-15px;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}#introScreen .intro-content .contentHolder .contentblock .subTitle:before{content:"";position:absolute;top:100%;left:50%;width:8px;height:10px;background:url("../img/SpeachTail.svg");background-size:100% 100%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}#introScreen .intro-content .contentHolder .contentblock h1.title{font-size:15px;font-weight:700;margin-bottom:12px}#introScreen .intro-content .contentHolder .contentblock button.btn.btn--primary{max-width:267px;width:100%;display:block;height:40px;border-radius:8px;position:relative;background:#094A8A;margin-bottom:15px}#introScreen .intro-content .contentHolder .contentblock button.btn.btn--primary:last-child{margin-bottom:0}#introScreen .intro-content .contentHolder .contentblock button.btn.btn--primary .frame{position:absolute;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background:#237FDB;border-radius:8px;-webkit-transform:translateY(-4px);-ms-transform:translateY(-4px);transform:translateY(-4px);-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease,-webkit-transform 0.3s ease;background:-webkit-gradient(linear,left top,left bottom,color-stop(10%,rgb(105,163,221)),color-stop(68%,rgb(35,127,219)),to(rgb(0,88,176)));background:linear-gradient(180deg,rgb(105,163,221) 10%,rgb(35,127,219) 68%,rgb(0,88,176) 100%)}#introScreen .intro-content .contentHolder .contentblock button.btn.btn--primary .frame span{font-weight:700;font-size:14px;color:white}#introScreen .intro-content .contentHolder .contentblock button.btn.btn--primary:hover .frame{-webkit-transform:translateY(0px);-ms-transform:translateY(0px);transform:translateY(0px)}#introScreen .intro-content .contentHolder .subList{font-size:10px;color:white;display:-webkit-box;display:-ms-flexbox;display:flex;gap:5px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}#introScreen .intro-content .contentHolder .subList span{display:inline-block;border:1px solid white;padding:1px 8px;border-radius:99px;margin-right:5px;background:rgba(255,255,255,0.2)}#introScreen .intro-content .contentHolder .fp{color:white;font-size:10px;text-align:center;line-height:10px}#introScreen .overlay{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;opacity:0.6;background:-webkit-gradient(linear,left top,left bottom,color-stop(37%,rgba(33,36,39,0)),color-stop(53%,rgba(33,36,39,0.7)),color-stop(73%,rgb(33,36,39)));background:linear-gradient(180deg,rgba(33,36,39,0) 37%,rgba(33,36,39,0.7) 53%,rgb(33,36,39) 73%)}.progress-bar{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;gap:4px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:12px 20px;background:#FFFFFF;top:0;position:sticky;z-index:5}.progress-bar .progress-bar__container{display:-webkit-box;display:-ms-flexbox;display:flex;gap:4px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.progress-bar .progress-bar__container .progress-bar__step{height:6px;width:100%;cursor:pointer;background:#BDC2C8;-webkit-transition:background,opacity 0.3s ease;transition:background,opacity 0.3s ease}.progress-bar .progress-bar__container .progress-bar__step:hover{opacity:0.6}.progress-bar .progress-bar__container .progress-bar__step--active,.progress-bar .progress-bar__container .progress-bar__step--completed{background:#237FDB;height:6px;width:100%}.progress-bar .subText{font-size:12px;text-align:center}.progress-bar .subText.gold{color:#A69B3C}.multi-step-form__steps{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;overflow-y:scroll;height:calc(100dvh - 31px - 54px - 56px)}.step{padding:7% 7% 12% 7%;width:100%;height:auto;-ms-flex-item-align:start;align-self:flex-start;display:none;-webkit-animation:fadeIn 0.3s ease;animation:fadeIn 0.3s ease}.step.step-9 .step__actions{margin-top:0px}.step img{width:50%;margin:0 auto;min-width:155px;display:block;margin-bottom:20px}.step .step__question h2.step__title{font-size:18px;margin-bottom:14px;font-weight:700}.step .form-label{display:block;font-size:12px;margin-bottom:4px;font-weight:400}.step .step__options{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:8px}.step .step__options .form-group .float{display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px}.step .radio-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:8px}.step .radio-group .float{display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px}.step .radio-group.selfWidth{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.step .radio-group.selfWidth .radio-option{width:auto;height:40px;padding:10px 20px}.step .radio-group .radio-option{font-size:14px;border:1px solid #CED4DA;width:100%;height:56px;border-radius:8px;padding:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;background:#FFFFFF;text-align:center;-webkit-transition:background 0.3s ease;transition:background 0.3s ease;font-weight:400}.step .radio-group .radio-option input[type=radio]{position:absolute;opacity:0;width:0;height:0}.step .radio-group .radio-option:hover{border-color:#2196F3;background:white;-webkit-box-shadow:0px 2px 2px 0px rgba(35,127,219,0.2);box-shadow:0px 2px 2px 0px rgba(35,127,219,0.2)}.step .select-Holder{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:8px;position:relative}.step .select-Holder:after{content:"";position:absolute;right:20px;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:16px;height:16px;z-index:2;background:url("../img/Next.svg") no-repeat center center}.step .select-Holder select{font-size:14px;border:1px solid #CED4DA;width:100%;height:56px;color:#5A5F67;cursor:pointer;background:#FFFFFF;text-align:left;padding:10px 20px;border-radius:8px;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-size:16px;background:white}.step .select-Holder select:active,.step .select-Holder select:focus,.step .select-Holder select:hover{border:1px solid #2196F3;background:white;-webkit-box-shadow:0px 2px 2px 0px rgba(35,127,219,0.2);box-shadow:0px 2px 2px 0px rgba(35,127,219,0.2)}.step .form-field{width:100%}.step .form-field input{font-size:14px;border:1px solid #CED4DA;width:100%;height:56px;color:#5A5F67;cursor:pointer;background:#FFFFFF;text-align:left;padding:10px 20px;border-radius:8px;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-size:16px;background:white}.step .form-field input:active,.step .form-field input:focus,.step .form-field input:hover{border:1px solid #2196F3;background:white;-webkit-box-shadow:0px 2px 2px 0px rgba(35,127,219,0.2);box-shadow:0px 2px 2px 0px rgba(35,127,219,0.2)}.step .checkbox a{color:#237FDB;text-decoration:underline}.step .step__actions button.btn.btn--primary{width:100%;height:60px;font-size:16px;font-weight:700;border-radius:8px;background:#237FDB}.step .step__actions button.btn.btn--primary.btn--submit{position:relative;background:#776715;padding:0}.step .step__actions button.btn.btn--primary.btn--submit span{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;width:100%;height:100%;font-size:16px;font-weight:700;color:#FFFFFF;border-radius:8px;text-align:center;background:-webkit-gradient(linear,left top,left bottom,from(rgb(224,200,105)),to(rgb(167,141,24)));background:linear-gradient(180deg,rgb(224,200,105) 0%,rgb(167,141,24) 100%);-webkit-transform:translateY(-4px);-ms-transform:translateY(-4px);transform:translateY(-4px);-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease,-webkit-transform 0.3s ease}.step .step__actions button.btn.btn--primary.btn--submit span:before{content:"";position:absolute;top:50%;right:20px;width:16px;height:16px;background:url("../img/Next-white.svg") no-repeat center center;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.step .step__actions button.btn.btn--primary.btn--submit:hover{-webkit-transform:translateY(0px);-ms-transform:translateY(0px);transform:translateY(0px)}.step--active{display:block}@-webkit-keyframes fadeIn{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.thank-you-wrapper{max-width:500px;margin:0 auto;background:#F3F6F9}.thank-you-wrapper .confirmation{padding:40px 20px 20px 20px}.thank-you-wrapper h2.confirmation__title{font-size:20px;color:#5A5F67;text-align:center;font-weight:700;margin-bottom:20px}.thank-you-wrapper .contentFlex{display:-webkit-box;display:-ms-flexbox;display:flex;gap:14px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;margin-bottom:25px}.thank-you-wrapper .contentFlex p{font-size:13px;letter-spacing:0px}.thank-you-wrapper .contentFlex img{width:30%;display:block;height:auto}.thank-you-wrapper .block{border-radius:8px;background:#FFFFFF;padding:20px}.thank-you-wrapper .block p{font-size:13px;margin-bottom:12px}.thank-you-wrapper a.line{border-radius:8px;width:100%;height:60px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background:#06C755}.thank-you-wrapper a.line img{height:36px;display:block}.step__actions{margin-top:30px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.btn{padding:15px 40px;font-size:16px;font-weight:500;border:none;border-radius:4px;cursor:pointer;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;text-transform:uppercase;letter-spacing:1px}.btn--primary{background:#2196F3;color:#FFFFFF}.btn--primary:hover{background:#1976D2;-webkit-transform:translateY(-2px);-ms-transform:translateY(-2px);transform:translateY(-2px);-webkit-box-shadow:0 4px 8px rgba(0,0,0,0.2);box-shadow:0 4px 8px rgba(0,0,0,0.2)}.btn--primary:active{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.btn--submit{background:#4CAF50}.btn--submit:hover{background:#45a049}
/* --- Custom Styles for Modal & Background --- */

/* Body Background - White for outside areas */
body {
    background: #ffffff !important;
    background-image: none !important;
}

/* Fixed Background - Constrained to max-width */
.bg-job-listing {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 500px; /* Constrain to mobile width */
    height: 100%;
    z-index: 0;
    background-color: #e0e0e0; /* Gray background */
    overflow: hidden;
}

.bg-job-listing__stack {
    position: absolute;
    top: 80px;
    left: 50%;
    width: 98%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bg-job-listing__img {
    width: 100%;
    height: auto;
    display: block;
}

.bg-job-listing::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Dim overlay */
}

/* Override Wrapper Background */
#wrapper {
    background: transparent !important;
}

/* Modal Container */
.modal-container {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    margin: 20px;
    overflow: hidden;
    position: relative;
    z-index: 5;
    width: 90%; /* Set width to 90% */
    max-width: 500px; /* Keep max width constraint */
    margin-left: auto;
    margin-right: auto;
}

/* Step 1 (Employment Status) Grid Layout */
.step-1 .radio-group {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.step-1 .radio-group .radio-option {
    height: 60px !important;
    padding: 5px 10px !important;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    font-weight: bold;
}
/* Hide the float divs since we are using grid */
.step-1 .radio-group .float {
    display: contents;
}

/* Step 5 (Location) Slideshow */
.job-slider-container {

    border-top: none;
}
.slider-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}
.job-slider {
    width: 100%;
    padding-bottom: 20px;
    overflow: hidden;
}
.job-slider .swiper-slide {
    background: #f9f9f9;
    height: 120px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #666;
    border: 1px solid #ddd;
}
.job-card {
    text-align: center;
    font-weight: bold;
}

/* --- Intro Screen Modal Refinements --- */

/* Reset Intro Screen to be a transparent flex container */
#introScreen {
    background-image: none !important; /* Remove old BG */
    background: transparent !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* The Modal Card */
.intro-modal {
    width: 90%; /* 90% width */
    max-width: 450px; /* Adjusted max-width */
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    margin-bottom: 15vh !important; /* Adjusted down further */
    position: relative;
    z-index: 10;
}

/* Header Section (Blue Gradient) */
.intro-header {
    background: linear-gradient(135deg, #69A3DD 0%, #237FDB 100%);
    padding: 10px 16px;
    text-align: center;
    color: white;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.intro-header .titleHolder {
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
}
.intro-header .titleHolder img {
    width: 60%;
    height: auto;
    max-width: 280px;
}

/* Tags in Header */
.intro-header .subList {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}
.intro-header .subList span {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    margin: 0; /* Reset margins */
}

/* Body Section (White) */
.intro-body {
    padding: 10px 20px;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.intro-body .subTitle {
    display: inline-block;
    background: #E8F0FF;
    color: #237FDB;
    font-weight: bold;
    font-size: 13px;
    padding: 4px 15px;
    border-radius: 20px;
    margin-bottom: 15px;
    position: relative;
    top: auto; left: auto; transform: none; /* Reset absolute positioning */
    width: auto; max-width: none;
}
/* Speech bubble tail for subTitle */
.intro-body .subTitle::before {
    display: none; /* Remove old tail */
}
.intro-body .subTitle::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: #E8F0FF transparent transparent transparent;
}

/* トップ設問エリア（gesture を右下に配置） */
.intro-body__question {
    position: relative;
    margin-bottom: 25px;
}
.intro-body__question .title {
    margin-bottom: 0;
}
.intro-body__question .step__gesture {
    top: auto;
    bottom: -6px;
    right: -8px;
}

.intro-body .title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.3;
    color: #333;
}

/* Buttons */
.intro-body .btn {
    width: 100%;
    margin-bottom: 10px;
    height: 70px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    max-width: none; /* Remove max-width restriction */
}
.intro-body .btn:last-child {
    margin-bottom: 0;
}
.intro-body .btn .frame {
    position: relative;
    width: 100%;
    height: 100%;
    transform: none; /* Reset transform */
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Footer Text */
#introScreen .fp {
    color: #fff;
    font-size: 10px;
    opacity: 0.8;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    margin-top: 10px;
}

/* Hide the old overlay inside introScreen if it exists */
#introScreen .overlay {
    display: none;
}

/* Fix for Intro Modal Buttons */
.intro-body .btn {
    background: #237FDB;
    background: linear-gradient(180deg, #69A3DD 10%, #237FDB 68%, #0058B0 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 0 #0058B0;
    margin-bottom: 20px;
    transition: all 0.1s;
}
.intro-body .btn:last-child {
    margin-bottom: 0;
}
.intro-body .btn:active {
    transform: translateY(4px);
    box-shadow: none;
    margin-bottom: 20px; /* Keep layout stable */
}
.intro-body .btn .frame {
    background: transparent !important;
    transform: none !important;
    position: static !important;
    width: auto;
    height: auto;
    display: inline-block;
}
.intro-body .btn .frame span {
    color: white;
    font-weight: bold;
}

/* Body Update */
.intro-body .title {
    font-size: 18px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.intro-body .title .finger {
    font-size: 24px;
    animation: bounceRight 1s infinite alternate;
}
@keyframes bounceRight {
    from { transform: translateX(0); }
    to { transform: translateX(5px); }
}

/* Button Group */
.intro-body .btn-group {
    display: flex;
    gap: 15px;
    justify-content: center;
}

/* New Button Styles */
.intro-body .btn {
    background: white !important;
    height: 70px !important;
    border-radius: 8px !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    transition: all 0.2s;
    box-shadow: none !important;
}
.intro-body .btn .frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}
.intro-body .btn .frame span {
    font-size: 18px;
    font-weight: bold;
}

/* No Button (Blue) */
.intro-body .btn--no {
    border: 2px solid #237FDB !important;
}
.intro-body .btn--no .frame span {
    color: #237FDB;
}
.intro-body .btn--no:hover, .intro-body .btn--no:active {
    background: #e8f0fe !important;
}

/* Yes Button (light blue - softer than No) */
.intro-body .btn--yes {
    border: 2px solid #90b8e8 !important;
}
.intro-body .btn--yes .frame span {
    color: #90b8e8;
}
.intro-body .btn--yes:hover, .intro-body .btn--yes:active {
    background: #e8f0fe !important;
}
.intro-body .btn--yes:hover .frame span {
    color: #90b8e8;
}

/* Hide old elements if any remain */
.intro-body .subTitle { display: none; }

/* Clicked state for Yes button - no highlight */
.intro-body .btn--yes.clicked {
    border-color: #90b8e8 !important;
    background: transparent !important;
}
.intro-body .btn--yes.clicked .frame span {
    color: #90b8e8 !important;
}

/* Clicked state for No button (Blue) */
.intro-body .btn--no.clicked {
    background: #e8f0fe !important;
    transform: scale(0.98);
}

/* --- Step 2+ Layout Adjustments --- */

/* Reduce vertical padding for all steps */
.step {
    padding: 20px 20px 40px 20px !important;
}

/* Step images (question/illustration) */
.step img {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    max-width: 100px !important;
}

/* Gesture icon near input area - show and style */
.step .step__gesture img {
    display: block !important;
    margin: 0 !important;
    width: 40px !important;
}
.step__gesture {
    position: absolute !important;
    top: 20px;
    right: 0;
    width: 40px;
    height: 40px;
    z-index: 2;
    pointer-events: none;
}
.step__gesture img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    animation: gesture-swing 1.2s ease-in-out infinite;
}
@keyframes gesture-swing {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6px); }
}

/* step__title の横に gesture を絶対配置 */
.step__question {
    position: relative;
}
.step__question > .step__gesture {
    position: absolute !important;
    top: calc(50% + 30px);
    right: 0;
    transform: translateY(-50%);
}

.step .step__options {
    position: relative;
    padding-top: 20px;
}

/* Step 5 & 6: gesture at right edge of focused form-group/form-field */
.step-5 .form-group,
.step-6 .form-field {
    position: relative;
}
.step-5 .form-group--name {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.step-5 .form-group .form-field {
    position: relative;
}
.step-5 .form-group--name .form-field {
    flex: 1;
    min-width: 120px;
}
/* Step 5 / Step 6: ラベル内の gesture は非表示がデフォルト */
.step-5 .form-group .step__gesture,
.step-5 .form-group .form-field .step__gesture,
.step-6 .form-field .step__gesture {
    display: none;
}
/* ラベルテキストのすぐ横に表示（絶対配置で高さを持たせず、入力欄がずれないようにする） */
.step-5 .form-label:has(.step__gesture),
.step-6 .form-label:has(.step__gesture) {
    position: relative;
    display: inline-block !important;
}
.step-5 .form-label .step__gesture,
.step-6 .form-label .step__gesture {
    position: absolute !important;
    left: 100%;
    top: 72%;
    transform: translateY(-50%);
    margin-left: 4px;
    width: 28px;
    height: 28px;
}
.step-5 .form-label .step__gesture img,
.step-6 .form-label .step__gesture img {
    width: 28px;
    height: 28px;
    display: block;
}
/* Step 5: 初期（どこにもフォーカスなし）は姓のラベル横 */
.step-5 .step__options:not(:focus-within) .form-group--name .form-field--last-name .step__gesture {
    display: block !important;
}
.step-5 .form-group--name .form-field--last-name:focus-within .step__gesture,
.step-5 .form-group--name .form-field--first-name:focus-within .step__gesture {
    display: block !important;
}
/* Step 5: 生まれ年フォーカス時 */
.step-5 .form-group:not(.form-group--name):focus-within .step__gesture {
    display: block !important;
}
/* Step 6: 初期は1つ目のform-field、フォーカス時はそのform-fieldのgesture */
.step-6 .step__options:not(:focus-within) .form-field:first-of-type .step__gesture {
    display: block !important;
}
.step-6 .form-field:focus-within .step__gesture {
    display: block !important;
}

/* Make buttons larger and easier to click */
.step .radio-group .radio-option {
    height: 60px !important;
    font-size: 16px !important;
    font-weight: bold;
}

/* Adjust input fields and selects to match */
.step .form-field input,
.step .select-Holder select {
    height: 60px !important;
    font-size: 16px !important;
}

/* Adjust spacing for titles */
.step .step__question h2.step__title {
    font-size: 18px !important;
    margin-bottom: 20px !important;
    text-align: center;
}

/* Ensure Step 1 grid buttons height */
.step-1 .radio-group .radio-option {
    height: 60px !important;
}

/* --- Fixes for Button Colors and Modal Height --- */

/* No button - keep blue, visible */
.intro-body .btn--no {
    border: 2px solid #237FDB !important;
}
.intro-body .btn--no .frame span {
    color: #237FDB !important;
}

/* Active state for No button (Blue) */
.intro-body .btn--no.clicked {
    border-color: #237FDB !important;
    background: #e8f0fe !important;
}
.intro-body .btn--no.clicked .frame span {
    color: #237FDB !important;
}

/* Adjust Modal Height to show background */
.multi-step-form__steps {
    height: auto !important; /* Don't force full height */
    max-height: 65vh; /* Increased from 50vh */
    overflow-y: auto; /* Scroll if needed */
}

/* Ensure the modal container shrinks */
.modal-container {
    height: auto !important;
    margin-top: 10vh; /* Push down slightly */
    margin-bottom: 10vh;
}

/* Adjust wrapper to allow centering */
#wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Reduce Step padding further */
.step {
    padding: 20px 15px 20px 15px !important;
}

/* --- Fixes for Modal Positioning and Sizing --- */

/* 1. Center the Intro Screen Modal perfectly */
#introScreen {
    position: fixed !important; /* Take out of flow */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100; /* Ensure it's on top */
    padding: 0 !important; /* Reset padding */
    background: transparent !important; /* Make transparent to see background */
    display: flex; /* Ensure flex centering works */
    align-items: center;
    justify-content: center;
}

/* 2. Fix height for Step 2+ Modals to be uniform */
.multi-step-form__steps {
    height: 55vh !important; /* Increased to be taller than intro modal but not too empty */
    max-height: none !important; /* Remove max-height limit */
    overflow-y: auto;
}

/* Ensure the modal container respects the fixed height content */
.modal-container {
    height: auto !important;
    /* Apply same margin-bottom to align with intro modal */
    margin-top: 0 !important; 
    margin-bottom: 15vh !important;
}

/* Center the modal container in the wrapper */
#wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100dvh;
    padding: 0 !important; /* Remove padding that might offset center */
}

/* --- Updated Form Styles for New Steps --- */

/* Step 2 (Job Type) Grid Layout */
.step-2 .radio-group {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.step-2 .radio-group .radio-option {
    height: 60px !important;
    padding: 5px 10px !important;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    font-weight: bold;
}
/* Ensure Step 2 float divs are hidden/ignored since we use grid directly */
.step-2 .radio-group .float {
    display: contents;
}

/* Remove old Step 1 specific styles if they conflict, or just ensure new Step 1 uses standard list */
.step-1 .radio-group {
    display: flex !important; /* Reset to flex column */
    flex-direction: column !important;
}
.step-1 .radio-group .radio-option {
    aspect-ratio: auto !important;
    height: 60px !important;
    flex-direction: row !important;
}

/* --- Adjust Step 1 (When) to fit in modal --- */
.step-1 .radio-group .radio-option {
    height: 60px !important;
    font-size: 15px !important;
    margin-bottom: 0;
}
.step-1 .step__question h2.step__title {
    margin-bottom: 15px !important; /* Reduce title margin */
}
.step-1 .radio-group {
    gap: 8px !important; /* Reduce gap slightly */
}

/* --- Further Compact Step 1 --- */
.step-1 {
    padding: 10px 15px !important; /* Reduce padding */
}
.step-1 .step__question h2.step__title {
    margin-bottom: 10px !important;
}
.step-1 .radio-group {
    gap: 6px !important;
}
.step-1 .radio-group .radio-option {
    height: 60px !important;
    font-size: 14px !important;
    padding: 5px !important;
}

/* Adjust Modal Height slightly to ensure fit */
.multi-step-form__steps {
    height: 58vh !important; /* Slightly increased from 55vh to fit content */
}
.intro-modal {
    height: 58vh !important;
}

/* Adjust Position */
.modal-container, .intro-modal {
    margin-bottom: 10vh !important; /* Lowered slightly from 15vh */
}

/* --- Navigation Buttons & Validation --- */

/* Navigation Container */
.step__actions.nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    width: 100%;
}

/* Previous/Next Buttons */
.btn-prev, .btn-next {
    background: none;
    border: none;
    font-size: 16px;
    font-weight: bold;
    color: #5A5F67;
    cursor: pointer;
    padding: 10px 0;
    transition: opacity 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.btn-prev .material-icons, .btn-next .material-icons {
    font-size: 24px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.btn-prev:hover, .btn-next:hover {
    opacity: 0.7;
}

.btn-next {
    color: #237FDB; /* Primary Blue */
}

/* Step 6 (Final) Layout Adjustment */
.step-6 .step__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}
.step-6 .btn-prev {
    flex: 0 0 auto;
    width: auto;
    order: 1; /* Left */
}
.step-6 .btn--submit {
    flex: 1;
    order: 2; /* Right */
    margin: 0; /* Reset margin */
}

/* Step 6 Backdrop - .progress-bar と .step-6 の両方に設置 */
.progress-bar {
    position: relative;
}
.progress-bar .step6-backdrop {
    position: absolute;
    inset: 0;
    border-radius: 0;
}
.step-6 {
    position: relative;
}
.step-6 .step__content {
    position: relative;
    z-index: 0;
}
.step-6 .step6-backdrop {
    position: absolute;
    inset: 0;
    border-radius: 0;
    z-index: 1;
}
.step6-backdrop {
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.step6-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Step 6 求人をもらいに行くボタン - バックドロップの上に浮かせる */
.step-6 .step__actions {
    position: relative;
    z-index: 1000;
}

/* Step 6 求人をもらいに行くボタン - キラッと光る＋ほんのりズーム（バックドロップ表示時） */
.btn--submit.sparkle span {
    position: relative;
    display: block;
    overflow: hidden;
    animation: btn-zoom 1.2s ease-in-out infinite;
}
.btn--submit.sparkle span::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 25%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 75%);
    transform: skewX(-15deg);
    animation: shine 1.2s 0s linear infinite;
    pointer-events: none;
}
@keyframes shine {
    20% { left: 100%; }
    100% { left: 100%; }
}
@keyframes btn-zoom {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

/* Error Message */
.error-message {
    background: #FFEBEE;
    color: #D32F2F;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
    display: none; /* Hidden by default */
    width: 100%;
    border: 1px solid #FFCDD2;
}
.error-message--before-actions {
    margin-top: 20px;
}

/* --- Selected State for Radio Options --- */
/* Using :has() for modern browsers */
.step .radio-group .radio-option:has(input:checked) {
    border: 2px solid #237FDB !important;
    background-color: #E3F2FD !important;
    color: #237FDB !important;
    font-weight: bold !important;
    box-shadow: 0 4px 6px rgba(35, 127, 219, 0.15) !important;
}

/* Fallback class if :has() is not supported or for JS toggle */
.step .radio-group .radio-option.is-selected {
    border: 2px solid #237FDB !important;
    background-color: #E3F2FD !important;
    color: #237FDB !important;
    font-weight: bold !important;
    box-shadow: 0 4px 6px rgba(35, 127, 219, 0.15) !important;
}

/* --- Optimize Spacing: Progress Bar to Question --- */
.progress-bar {
    padding-bottom: 8px !important; /* Reduce bottom padding */
    margin-bottom: 0 !important;
}

.step {
    padding-top: 10px !important; /* Bring content closer to top */
}

.step img {
    margin-bottom: 8px !important; /* Reduce gap below image */
    max-width: 130px !important; /* Constrain image size */
    width: 35% !important;
    min-width: auto !important;
}

/* Ensure title doesn't have too much top margin */
.step .step__question h2.step__title {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

/* --- Force Reduce Spacing --- */
.progress-bar {
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

.multi-step-form__steps {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.step img {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    width: 30% !important; /* Make image even smaller */
    max-width: 100px !important;
}

.step .step__question h2.step__title {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* --- Fix Step 1 Scrolling & Modal Height --- */

/* Increase Modal Height */
.multi-step-form__steps {
    height: 65vh !important; /* Increased from 58vh */
}

/* Reset Intro Modal Height */
.intro-modal {
    height: auto !important;
}

/* Compact Step 1 Buttons */
.step-1 .radio-group .radio-option {
    height: 60px !important;
    font-size: 14px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* --- Step 5: step__actions と agent-message の位置・余白 --- */
.step-5 .step__actions {
    margin: 0;
}
.step-5 .form-group, .step-6 .form-field {
    margin-bottom: 20px !important;
}
.step-5 .agent-message {
    margin: 20px 0;
}

/* --- Agent Message Styling (Step 5) --- */
.agent-message {
    display: flex;
    align-items: center;
    padding: 0 10px;
}

.agent-icon {
    width: 50px;
    height: 50px;
    margin-right: 15px;
    flex-shrink: 0;
}

.agent-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    display: block !important; /* Force show this specific image */
    margin: 0 !important;
    max-width: none !important;
}

.message-bubble {
    background: #F3F6F9;
    border-radius: 12px;
    padding: 12px 15px;
    font-size: 13px;
    color: #333;
    position: relative;
    font-weight: bold;
}

/* Speech bubble tail */
.message-bubble::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 8px 8px 8px 0;
    border-style: solid;
    border-color: transparent #F3F6F9 transparent transparent;
}

/* --- Increase Button Sizes for Step 3 & 4 --- */

/* Step 3 (Location) - Popular Areas */
.step-3 .radio-group.selfWidth {
    gap: 12px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* 2 columns uniform grid */
}
.step-3 .radio-group.selfWidth .radio-option {
    height: 60px !important;
    font-size: 16px !important;
    padding: 0 10px !important;
    width: 100% !important; /* Full width of grid cell */
    min-width: auto !important;
    flex: none !important; /* Disable flex growing */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Step 4 (Education) */
.step-4 .radio-group .radio-option {
    height: 60px !important;
    font-size: 16px !important;
}

/* --- Infinite Scroll Animation for Job Slider --- */
.job-slider-container {
    overflow: hidden; /* Hide overflow */
    width: 100%;
}

.job-slider {
    overflow: hidden;
    width: 100%;
    padding-bottom: 20px;
}

.job-slider .swiper-wrapper {
    display: flex;
    /* Animation will be handled by Swiper's autoplay with specific settings or CSS animation if Swiper is removed */
    /* Since user provided CSS animation, let's try to apply a CSS-based marquee if Swiper isn't strictly required or to override it */
    /* However, Swiper is already initialized. Let's adjust Swiper config in JS first for smooth linear scroll. */
    /* If user insists on CSS animation: */
}

/* CSS Marquee Animation Style (Alternative to Swiper) */
.marquee-wrapper {
    display: flex;
    width: fit-content;
    animation: marquee-scroll 20s linear infinite;
}

.marquee-wrapper .job-card {
    flex: 0 0 auto;
    width: 140px; /* Fixed width for cards */
    margin-right: 10px;
    background: #f9f9f9;
    height: 100px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #666;
    border: 1px solid #ddd;
    text-align: center;
    font-weight: bold;
}

@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Assuming duplicated content for seamless loop */
}

/* --- Improve Visibility for Step 5 (Name/Birth) & Step 6 (Contact) --- */

/* Titles */
.step-5 .step__title,
.step-6 .step__title {
    margin-bottom: 25px !important;
    line-height: 1.4;
}

/* Labels */
.step-5 .form-label,
.step-6 .form-label {
    font-size: 15px !important; /* Increased label size */
    font-weight: bold !important;
    margin-bottom: 10px !important;
    color: #333;
    display: block;
}

/* Inputs & Selects */
.step-5 input[type="text"],
.step-5 select,
.step-6 input[type="email"],
.step-6 input[type="tel"] {
    height: 60px !important;
    font-size: 16px !important;
    padding: 10px 20px !important;
    background-color: #fcfcfc !important;
    border: 1px solid #ccc !important;
    border-radius: 8px !important;
}

.step-5 input:focus,
.step-5 select:focus,
.step-6 input:focus {
    background-color: #fff !important;
    border-color: #237FDB !important;
    box-shadow: 0 0 0 3px rgba(35, 127, 219, 0.1) !important;
}

/* Adjust spacing between fields */
.step-5 .form-group,
.step-6 .form-field {
    margin-bottom: 25px !important;
}
.step-6 .form-field:has(.checkbox) {
    margin-bottom: 0 !important;
}

/* Placeholder color for better visibility */
.step-5 input::placeholder,
.step-6 input::placeholder {
    color: #aaa;
    font-size: 16px;
}

/* --- Intro modal fine tuning (requested) --- */
/* .bg-job-listing {
    background-position: center 95px !important;
} */

.intro-modal {
    width: 84% !important;
    /* max-width: 420px !important; */
    aspect-ratio: auto !important;
    height: auto !important;
    max-height: none !important;
    transform: translateY(-14px) !important;
    transform-origin: center center;
}

.intro-header .titleHolder {
    width: 98%;
    margin-bottom: 0 !important;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.intro-header .titleHolder img {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: 100% !important;
    object-fit: contain;
    aspect-ratio: auto;
    display: block;
    margin: 0 auto;
}

.intro-body .title {
    font-size: 20px !important;
    line-height: 1.35 !important;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    color: #545454 !important;
}

.intro-body .btn {
    height: 66px !important;
}

.intro-body .btn .frame span {
    font-size: 18px !important;
}

.intro-body {
    justify-content: flex-start !important;
    gap: 8px;
    padding-top: 8px;
    padding-bottom: 0 !important;
}

.intro-body__question {
    margin-bottom: 0 !important;
}

.intro-header,
.intro-body {
    min-height: 0;
}

.intro-header {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    flex: 6 !important;
}

.intro-body {
    flex: 0 0 auto !important;
    height: auto !important;
}

.intro-body .btn-group {
    margin-bottom: 16px !important;
}

/* Compatibility: standard counterpart for prefixed appearance */
input:not([type=checkbox]):not([type=radio]),
select,
textarea {
    appearance: none;
}

/* ===== Windowsスクロールバー対策 =====
   Windowsでは overflow-y: scroll により約17pxのスクロールバーが
   要素内側に表示され、右側に余白が生じる問題を解消する */
html {
    overflow: hidden;
}
#wrapper,
#introScreen,
.multi-step-form__steps {
    scrollbar-width: none; /* Firefox */
}
#wrapper::-webkit-scrollbar,
#introScreen::-webkit-scrollbar,
.multi-step-form__steps::-webkit-scrollbar {
    display: none; /* Chrome / Edge / Safari */
}
/* ===================================== */

/* Step2 job slider images */
.marquee-wrapper .job-card {
    overflow: hidden;
    padding: 0;
    position: relative;
}

.marquee-wrapper .job-card img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    max-width: none !important;
    min-width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: cover;
    margin: 0 !important;
}