.fadeIn { opacity: 0; transform: translate(0, 50%); transition: 1s;}
.fadeIn.is-show { transform: translate(0, 0); opacity: 1; }



/*=============================================
  TOPPAGE
=============================================*/
#toppage {}
#toppage h3 { text-align: center; }
#toppage h3.fs64 b { font-size: 287.5%; }
#toppage h3.fs50 b { font-size: 237.5%; }
#toppage h4 {
    font-size: 187.5%;
    letter-spacing: 2px;
    line-height: 100%;
}
#toppage .notes { font-size: 75%; line-height: 150%;}
@media only screen and (max-width:800px){
    #toppage { padding-top:0;}
    #toppage h3.fs64 b { font-size: 150%;}
    #toppage h3.fs50 b { font-size: 150%;}
    #toppage h4 { font-size: 112.5%; margin-bottom:50px; }
}


#toppage .cont1 { padding:100px 0; background:#224069;}
#toppage .cont2 { padding:100px 0;}
#toppage .cont3 { padding:100px 0; background: #fff;}
#toppage .cont4 { padding: 200px 0; background:#224069;}
#toppage .cont1,
#toppage .cont2,
#toppage .cont3,
#toppage .cont4 { display: flex; flex-direction: column; gap:80px;}
@media only screen and (max-width:800px){
    #toppage .cont1 { padding: 50px 0;}
    #toppage .cont2 { padding: 0;}
    #toppage .cont3 { margin: 50px 0 0; padding:50px 0;}
    #toppage .cont4 { padding: 50px 0; gap:40px;}
}


#toppage .sp_fix { display: none;}
@media only screen and (max-width:800px){
    #toppage .sp_fix {
        position:fixed; right:0; bottom:0;
        display: flex; width: 100%;
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.30);
        z-index: 999;
    }
    #toppage .sp_fix .btn { width:50%;}
    #toppage .sp_fix .btn a {
        display: block;
        padding: 15px;
        color: #fff;
        font-size:100%;
        text-align: center;
        text-decoration: none;
        border-radius:0;
    }
    #toppage .sp_fix .btn:nth-child(2) { font-weight: bold;}
    #toppage .sp_fix .b_green a { background:linear-gradient(180deg, #BBD672, #28CBA5);}
    #toppage .sp_fix .b_blue a { background:linear-gradient(180deg, #7BC7FF, #09007B);}
    #toppage .sp_fix .fukidasi {
        position: absolute; top:-30px; right:0; z-index: 9;
        width:50%; text-align: center;
    }
    #toppage .sp_fix .fukidasi img { margin: auto; width:200px; height:auto;}
}



/*-----------------------------------------------------------------------------------
  MAINIMG
-----------------------------------------------------------------------------------*/
#toppage .mainimg { padding:200px 0 50px;}
#toppage .mainimg img { width: 100%; height: auto;}
#toppage .mainimg .inner { display: flex; flex-wrap: wrap; gap:40px; max-width: 1200px;}
#toppage .mainimg h2 {
    margin: 0 auto;
    width: 40%;
}
#toppage .mainimg ul {
    align-items:center; justify-content: center;
    width: calc(60% - 40px);
    color: #fff;
    font-weight: bold;
    text-align: center;
}
#toppage .mainimg ul li:nth-child(2) {
    margin: 30px 0;
    padding:20px 10px 25px;
    font-size: 200%;
    line-height: 120%;
    border-top:3px solid #fff;
    border-bottom:3px solid #fff;
}
#toppage .mainimg ul li:nth-child(2) span { display: inline-block;}
#toppage .mainimg ul li:nth-child(3) {
    font-size:150%;
    letter-spacing: 2px;
    line-height: 180%;
}
#toppage .mainimg .main_come { 
    margin: auto;
    width: 100%; max-width: 1000px;
    text-align: center;
    color: #fff;
    font-weight: bold;
}
#toppage .mainimg .main_btn {
    display: flex; gap:40px; align-items:flex-end;
    margin: auto; 
    width: 100%; max-width: 1000px;
}
#toppage .mainimg .main_btn .btn { width: calc(50% - 20px);}
#toppage .mainimg .main_btn .btn a {
    display: block;
    padding: 30px;
    color: #fff;
    font-size: 250%;
    text-align: center;
    text-decoration: none;
    border-radius:100px;
    border: 3px solid #fff;
    box-shadow: 0px 5px 6px 0px rgba(0, 0, 0, 0.15);
}
#toppage .mainimg .main_btn .btn:nth-child(2) { font-weight: bold;}
#toppage .mainimg .main_btn .b_green a { background:linear-gradient(180deg, #BBD672, #28CBA5);}
#toppage .mainimg .main_btn .b_blue a { background:linear-gradient(180deg, #7BC7FF, #46A9CD, #09007B);}
@media only screen and (min-width:800px){
}
@media only screen and (max-width:1000px){
    #toppage .mainimg ul li:nth-child(2) { font-size:150%; }
    #toppage .mainimg ul li:nth-child(3) { font-size:120%; letter-spacing: 0;}
}
@media only screen and (max-width:800px){
    #toppage .mainimg .main_btn { display: none;}
}
@media only screen and (max-width:768px){
    #toppage .mainimg { padding:100px 0 50px;}
    #toppage .mainimg .inner { flex-direction: column;}
    #toppage .mainimg h2 { width:80%;}
    #toppage .mainimg ul {
        align-items:center; justify-content: center;
        width: 100%;
        color: #fff;
        font-weight: bold;
        text-align: center;
    }
}



/*-----------------------------------------------------------------------------------
ABOUT
-----------------------------------------------------------------------------------*/
#toppage .about { display: flex; flex-direction: column; gap:50px; margin-bottom: 100px;}
#toppage .about h3 { margin: 0; padding: 30px 0; color: #fff; border-top: 4px solid #fff; border-bottom: 4px solid #fff;}
#toppage .about h3 img { width: 100%; max-width: 370px; height: auto;}
#toppage .about .comment {  text-align: center; color: #fff; line-height:250%;}
@media only screen and (max-width:800px){
    #toppage .about { margin-bottom: 50px;}
    #toppage .about h3 { border-top: 3px solid #fff; border-bottom: 3px solid #fff;}
    #toppage .about h3 b { font-size: 125%; line-height: 150%;}
    #toppage .about .comment { font-size: 100%;}
}



/*-----------------------------------------------------------------------------------
  POINT
-----------------------------------------------------------------------------------*/
#toppage .point { display: flex; flex-direction: column; gap:100px;}
#toppage .point h3 img { width: 100%; max-width: 370px; height: auto;}
#toppage .point .point_list { display: flex; gap:20px; color:#224069; font-weight: bold;}
#toppage .point .point_list dl {
    position: relative;
    padding:50px 20px;
    width: 33.3%;
    text-align: center;
    background: #fff;
    border-radius: 30px;
}
#toppage .point .point_list dl dt {
    margin-bottom: 30px;
    padding:150px 0 20px;
    font-size: 125%;
    border-bottom: 2px solid #224069;
}
#toppage .point .point_list dl:nth-child(1) dt { background:url("http://kochi-iju.jp/lp/kochi-job/olfair/wp-content/uploads/2025/06/point01.png") no-repeat top center; background-size: 55% auto;}
#toppage .point .point_list dl:nth-child(2) dt { background:url("http://kochi-iju.jp/lp/kochi-job/olfair/wp-content/uploads/2025/06/point02.png") no-repeat top center; background-size: 55% auto;}
#toppage .point .point_list dl:nth-child(3) dt { background:url("http://kochi-iju.jp/lp/kochi-job/olfair/wp-content/uploads/2025/06/point03.png") no-repeat top center; background-size: 55% auto;}
#toppage .point .point_list dl::before {
    position: absolute; top: -25px; left: 0; right: 0;
    display: block; clear: both;
    margin: auto;
    width: 55px; height: 55px;
    font-family: "M PLUS 1", sans-serif;
    text-align: center;
    font-size: 150%; line-height: 45px;
    background: #fff;
    border: 4px solid #224069;
    border-radius: 50px;
}
#toppage .point .point_list dl:nth-child(1)::before { content:"1";}
#toppage .point .point_list dl:nth-child(2)::before { content:"2";}
#toppage .point .point_list dl:nth-child(3)::before { content:"3";}
#toppage .point .btn2 a {
    padding: 30px;
    text-align: center;
    font-size: 237.5%;
    background-position: 97% center !important;
}
@media only screen and (max-width:800px){
    #toppage .point { gap:60px;}
    #toppage .point h3 img { max-width:170px; height: auto;}
    #toppage .point .point_list { flex-direction: column; gap:60px;}
    #toppage .point .point_list dl { padding:50px 30px; width: 100%; border-radius: 20px;}
    #toppage .point .point_list dl:nth-child(1) dt,
    #toppage .point .point_list dl:nth-child(2) dt { background-size: 130px auto;}
    #toppage .point .point_list dl:nth-child(3) dt { background-size: auto 130px;}
    #toppage .point .point_list dl dt { font-size: 125%;}
    #toppage .point .btn2 a {
        padding: 25px 30px !important;
        font-size: 150% !important;
        text-align: left;
        background-position: 92% center !important;
    }
}



/*-----------------------------------------------------------------------------------
  TOKUTEN
-----------------------------------------------------------------------------------*/
#toppage .tokuten {
    display: flex; flex-direction: column; gap:50px;
    margin: auto; padding:70px 30px;
    width:90%;
    background: #B6FF00;
}
#toppage .tokuten h3 {color:#224069; font-weight: 500;}
#toppage .tokuten p { margin: auto; width: 90%; max-width: 920px; text-align: center;}
#toppage .tokuten img { width: 100%; height: auto;}
@media only screen and (max-width:800px){
    #toppage .tokuten h3 { padding: 15px 0;}
    #toppage .tokuten { display: flex; flex-direction: column; gap:50px;}
}



/*-----------------------------------------------------------------------------------
  STEP
-----------------------------------------------------------------------------------*/
#toppage .step {
    margin: auto; width:90%; max-width: 1220px;
    display: flex; flex-wrap: wrap; flex-direction: column; gap: 60px;
}
#toppage .step .step_box { position: relative; padding: 100px 0; border-radius:30px;}
#toppage .step .step_box .inner { display: flex; flex-direction: column; gap:60px;}
#toppage .step .step_box h3 { margin-bottom:30px; text-align: left; color:#224069;}
#toppage .step .step_box h3 small { font-size: 112.5%; color:#224069; margin-top: 20px;}
#toppage .step .step_box h4 { margin-bottom: 40px; color:#224069;}
#toppage .step .step_box h4.mid_line { padding-bottom: 20px; border-bottom: 1px solid #707070;}
#toppage .step .step_box .comment { line-height: 250%;}
#toppage .step .step1 { background:#F0FCFF;}
#toppage .step .step2 { background:#FFFCDB;}
#toppage .step .step3 { background:#EEFFEA;}
#toppage .step .step1::before,
#toppage .step .step2::before,
#toppage .step .step3::before {
    position: absolute; top:-30px; left: -5px;
    display: block; clear: both;
    font-family: "M PLUS 1", sans-serif;
    font-size: 150px;
    font-weight: bold;
    line-height: 150px;
    opacity: 0.2;
}
#toppage .step .step1::before { color: #5296E1; content:"01";}
#toppage .step .step2::before { color: #CEB587; content:"02";}
#toppage .step .step3::before { color: #224069; content:"03";}
#toppage .step ul {  display: flex; flex-wrap: wrap; flex-direction: column;  }
#toppage .step ul li { padding: 20px 0;  border-bottom: 1px dotted #555; }
#toppage .step .flow_list { display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; gap: 40px;}
#toppage .step .flow_list dl {
    position: relative;
    width: calc(100% - 270px);
    max-width: 600px;
    padding: 20px 40px;
    text-align: center;
    color: #224069;
    font-weight: bold;
    background: #fff;
    border:4px solid #224069;
    border-radius: 20px;
}
#toppage .step .flow_list dl + dl::before {
    position: absolute; top: -30px; left: 0; right: 0;
    margin: auto;
    display: block; clear: both; content:"";
    width: 40px; height: 20px;
    background: url("http://kochi-iju.jp/lp/kochi-job/olfair/wp-content/uploads/2025/06/arrow3.png") no-repeat;
    background-size: 100% auto;
}
#toppage .step .flow_list dt,
#toppage .step .flow_list dd { margin: 0 auto; max-width: 400px; }
#toppage .step .flow_list dt {
    margin-bottom: 15px;
    padding: 0 0 15px;
    font-size: 150%;
    color: #224069;
    border-bottom: 4px solid #FFF003;
}
#toppage .step .flow_list dl:nth-child(1) dt { margin: 0 auto; border-bottom: none;}
#toppage .step .flow_list dl:nth-child(1) .btn1 a { padding: 15px 30px 15px 30px; font-size: 150%; background-size: 40px auto;}
#toppage .step .step1 .flow_list {
    background: url("http://kochi-iju.jp/lp/kochi-job/olfair/wp-content/uploads/2025/06/step1_illust.png") no-repeat right bottom;
    background-size: 270px auto;
}
#toppage .step .step2 .flow_list {
    background: url("http://kochi-iju.jp/lp/kochi-job/olfair/wp-content/uploads/2025/06/step2_illust.png") no-repeat right bottom;
    background-size: 270px auto;
}
#toppage .step .entry_btn { display: flex; align-content: center; justify-content: center; gap: 60px;}
#toppage .step .step3 .entry_btn { margin-top: 60px; }
@media only screen and (max-width:800px){
    #toppage .step .step_box { padding:30px 0 50px; border-radius: 10px;}
    #toppage .step .step_box .inner { gap:30px;}
    #toppage .step .step_box h3 { margin-bottom:0; padding-left: 10px;}
    #toppage .step .step_box h3 small { margin-top: 10px; letter-spacing: 2px;}
    #toppage .step .step_box h4 { margin-bottom:30px; font-size: 150%; line-height: 150%;}
    #toppage .step .step_box h4.mid_line2 { margin-bottom:20px; padding-bottom: 20px; font-size: 150%; line-height: 150%; border-bottom: 1px solid #707070;}
    #toppage .step .step_box .comment { padding: 20px 10px; line-height: 180%;}
    #toppage .step .step1::before,
    #toppage .step .step2::before,
    #toppage .step .step3::before { top:-60px; font-size: 60px; line-height: 150px;}
    #toppage .step ul li { padding: 20px 10px; }
    #toppage .step .flow_list { background: none !important;}
    #toppage .step .flow_list dl { width: 100%; padding: 20px 10px; border:3px solid #00A0E9; border-radius: 5px;}
    #toppage .step .flow_list dt { font-size: 112.5%; }
    #toppage .step .flow_list dl:nth-child(1) dt { margin: 0 auto 20px; border-bottom: 4px solid #FFF003;}
    #toppage .step .flow_list dl:nth-child(1) .btn a { font-size: 150%;}
    #toppage .step .step1 .flow_list,
    #toppage .step .step2 .flow_list {
        background-position: center bottom;
        background-size: 200px auto;
    }
    #toppage .step .entry_btn { flex-direction: column; gap:40px;}
    #toppage .step .step3 .entry_btn { margin-top: 20px; }
    #toppage .step .step3 .entry_btn a { letter-spacing: -2px;}
}



/*-----------------------------------------------------------------------------------
  SEARCH
-----------------------------------------------------------------------------------*/
#toppage .search { position: relative;}
#toppage .search h3 { margin-bottom: 40px; color:#224069; text-align:left;}
@media only screen and (max-width:800px){
}



/*-----------------------------------------------------------------------------------
  VOICE
-----------------------------------------------------------------------------------*/
#toppage .voice { margin-bottom: 100px;}
#toppage .voice h3 { margin-bottom: 100px;}
#toppage .voice h3 b { color:#fff; font-size:212.5%; }
#toppage .voice .voice_list {  display: flex; flex-direction: column; gap:200px;}
#toppage .voice .box {
    position: relative;
    display: flex; flex-wrap: wrap; justify-content: space-between; gap:50px;
    color: #fff;
}
#toppage .voice .box .mid { width:270px; text-align: center;}
#toppage .voice .box .mid img { width:100%; height: auto;}
#toppage .voice .box .comment { 
    position: relative;
    display: flex; flex-direction: column; gap:50px;
    width: calc(100% - 320px);
}
#toppage .voice .box .prof { display: flex; flex-direction: column; gap:40px;}
#toppage .voice .box .prof span { display: block; font-weight: bold;}
#toppage .voice .box .prof p:nth-child(1) { font-size: 237.5%; line-height: 130%;}
#toppage .voice .box .prof p:nth-child(2) { font-size: 87.5%; line-height: 180%;}
#toppage .voice .box dl dt { position: relative; margin-bottom: 10px; padding-left: 45px; font-weight: bold;}
#toppage .voice .box dl dt:before { 
    position: absolute; top: 15px; left:0;
    display: block; clear: both; content:"";
    width: 40px; height: 2px;
    background: #fff;
}
#toppage .voice .box dl dd { font-size:87.5%; line-height: 180%;}
#toppage .voice .box.voice1 { background: url("http://kochi-iju.jp/lp/kochi-job/olfair/wp-content/uploads/2025/06/voice_illust1.png") no-repeat 30px bottom; background-size:180px auto;}
#toppage .voice .box.voice2 { background: url("http://kochi-iju.jp/lp/kochi-job/olfair/wp-content/uploads/2025/06/voice_illust2.png") no-repeat 30px bottom; background-size:180px auto;}
@media only screen and (max-width:800px){
    #toppage .voice { margin-bottom:0;}
    #toppage .voice h3 { margin-bottom: 50px;}
    #toppage .voice h3 b { font-size:150%; }
    #toppage .voice .voice_list { gap:100px;}
    #toppage .voice .box .prof p:nth-child(1) { font-size: 150%;}
    #toppage .voice .box .prof p:nth-child(2) { font-size: 100%;}
    #toppage .voice .box .mid { padding: 0 20px; width:100%; text-align:right;}
    #toppage .voice .box .mid img { width:160px;}
    #toppage .voice .box .comment { margin: auto; width: 90%; }
    #toppage .voice .box .comment::before { display: none; }
    #toppage .voice .box dl { margin: auto; width: 90%;}
    #toppage .voice .box dl dt { padding-left: 25px;}
    #toppage .voice .box dl dt:before { width: 20px;}
    #toppage .voice .box dl dd { font-size:100%; line-height: 180%;}
    #toppage .voice .box.voice1 { background: url("http://kochi-iju.jp/lp/kochi-job/olfair/wp-content/uploads/2025/06/voice_illust1.png") no-repeat left top; background-size: 30% auto;}
    #toppage .voice .box.voice2 { background: url("http://kochi-iju.jp/lp/kochi-job/olfair/wp-content/uploads/2025/06/voice_illust2.png") no-repeat left top; background-size: 30% auto;}
}



/*-----------------------------------------------------------------------------------
  FAQ
-----------------------------------------------------------------------------------*/
#toppage .faq {}
#toppage .faq h3 { margin-bottom: 80px; color: #fff; text-align: center;}
#toppage .faq .faq_list { display: flex; flex-wrap: wrap; flex-direction: column; gap:20px;}
#toppage .faq dl { padding:40px; color:#224069; background: #fff; font-weight: 600;}
#toppage .faq dt {  cursor: pointer; font-size: 137%; min-height: 35px; padding-right: 35px;}
#toppage .faq dd { font-size:87.5%; padding-top: 50px; line-height: 180%;}
#toppage .faq dd a {color:#224069;}
#toppage .faq dt { background:url("../img/accordion_on.png") no-repeat right top; background-size: 35px auto;}
#toppage .faq dt.active {  background: url("../img/accordion_off.png") no-repeat right top; background-size: 35px auto;}
@media only screen and (max-width:800px){
    #toppage .faq h3 { margin-bottom: 50px}
    #toppage .faq .faq_list { gap:20px; }
    #toppage .faq dl { padding:30px 30px;}
    #toppage .faq dt { font-size: 112.5%;}
    #toppage .faq dd { font-size: 87.5%;}
}



/*-----------------------------------------------------------------------------------
  ENTRY
-----------------------------------------------------------------------------------*/
#toppage .entry { 
    margin: auto; padding: 50px 0;
    width: 90%; max-width: 1600px; 
    border: 8px solid #fff;
    border-radius: 30px;
}
#toppage .entry h3 { 
    margin: 0 0 30px;
    padding: 35px 0;
    color: #fff;
    background:rgba(255,255,255,0.18);
}
#toppage .entry .come {
    display: flex; flex-wrap: wrap;  gap:60px; justify-content: center; align-items: center;
    margin: auto; max-width: 900px;
}
#toppage .entry .come p img { width: 280px; height: auto;}
#toppage .entry .btn a { font-weight: bold;}
@media only screen and (max-width:800px){
    #toppage .entry {  padding:5% 0;border-radius: 10px; border: 4px solid #fff;}
    #toppage .entry h3 { padding: 10px 0;}
    #toppage .entry h3 b {}
    #toppage .entry .come { gap:30px; text-align: center;}
    #toppage .entry .come p img { width: 90%; max-width: 300px; height: auto;}
    #toppage .entry .btn2 a { font-size: 110% !important;}
}