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


#content:has(#toppage) {  padding: 0;}



/*=============================================
  TOPPAGE
=============================================*/

#toppage h3 { text-align: center; }
#toppage h3.fs60 b { font-size: 281.2%; font-weight:700;}
#toppage h3.fs50 b { font-size: 237.5%; font-weight:700;}
#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.fs60 b { font-size: 180%;}
    #toppage h3.fs50 b { font-size: 150%;}
    #toppage h4 { font-size: 112.5%; margin-bottom:50px; }
}



#toppage .cont1 { padding:100px 0;}
#toppage .cont2 { padding:100px 0; background:#F5F5F5;}
#toppage .cont3 { padding:100px 0 150px;}
#toppage .cont4 { padding: 200px 0; background:#019572;}
#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:50px 0;}
    #toppage .cont3 { padding:50px 0;}
    #toppage .cont4 { padding:50px 0; gap:40px;}
}



#toppage .btn_box {
    display: flex; gap:20px;
    justify-content: center; align-items: center;
}
#toppage .btn_box .b_search,
#toppage .btn_box .b_entry {
    width:100%; max-width: 300px;
    border: 2px solid #fff;
    border-radius: 70px;
}
#toppage .btn_box .b_search a,
#toppage .btn_box .b_entry a {
    display: block;
    padding:20px 30px;
    font-size: 125%;
    font-weight: 500;
    letter-spacing: 1px;
    color: #fff;
    text-decoration: none;
    box-sizing: border-box;
}
#toppage .btn_box .b_search {
    text-align: center;
    background: linear-gradient(180deg, #76DFFF, #1D793D);
}
#toppage .btn_box .b_entry {
    text-align: center;
    background: linear-gradient(180deg, #A5E7FF, #0014AC);
}
#toppage .btn_box .b_entry a {
    background: url("../img/arrow.png") no-repeat 90% center;
    background-size: 32px auto;
}
@media only screen and (max-width:800px){
    #toppage .btn_box { margin: auto; width:96%; gap:5px;}
    #toppage .btn_box .b_search a,
    #toppage .btn_box .b_entry a { padding:10px 15px; font-size: 87.5%; text-align: left;}
    #toppage .btn_box .b_entry a { background-size: 20px auto;}
}



#toppage .sp_fix { display: none;}
@media only screen and (max-width:800px){
    #toppage .sp_fix {
        position:fixed; right:0; bottom:10px; z-index: 99;
        display: block; width: 100%;
    }
}



/*--------------------------------------------
  MAINIMG
---------------------------------------------*/
#toppage .mainimg { 
    padding-top:160px; text-align: center;
    background: url("http://kochi-iju.jp/lp/kochi-job/olfair/wp-content/uploads/2026/07/bg_pc2.jpg") no-repeat;
    background-size: cover;
}
#toppage .mainimg img { margin: auto; width: 100%; height: auto; max-width: 1220px;}
@media only screen and (max-width:800px){
    #toppage .mainimg { padding-top:80px; background: none;}
}



/*--------------------------------------------
  SCHEDULE
---------------------------------------------*/
#toppage .schedule { 
    display: flex; flex-direction: column; gap:40px;
    padding: 60px 0 40px;
    text-align: center;
    background: #019572;
}
#toppage .schedule img { margin: auto; width: 90%; height: auto; max-width:1120px;}
@media only screen and (max-width:800px){
    #toppage .schedule { gap:30px; padding: 40px 0;}
    #toppage .schedule .btn_box { display: none;}
}


/*--------------------------------------------
  TOKUTEN
---------------------------------------------*/
#toppage .tokuten { 
    display: flex; flex-direction: column; gap:50px;
    margin: 0 auto 100px; max-width: 840px;
}
#toppage .tokuten h3 { color: #019572;}
#toppage .tokuten img { width: 100%; height: auto;}
@media only screen and (max-width:800px){
    #toppage .tokuten { margin: 0 auto 50px; gap:25px;}
    #toppage .tokuten h3 { padding: 15px 0;}
}



/*--------------------------------------------
ABOUT
---------------------------------------------*/
#toppage .about {
    display: flex; flex-direction: column; gap:50px;
    margin: 0 auto 100px; max-width: 840px;
}
#toppage .about h3 { color: #019572;}
#toppage .about .comment {
    font-size: 112.5%;
    font-weight: 700;
    line-height:200%;
    color: #848484;
    text-align: center;
}
#toppage .about .sanka img { width: 100%; max-width: 640px; height: auto; margin: auto; }
@media only screen and (max-width:800px){
    #toppage .about { margin-bottom: 50px; gap:25px;}
    #toppage .about h3 b {line-height: 150%;}
    #toppage .about .comment { font-size: 100%;}
}



/*--------------------------------------------
  POINT
---------------------------------------------*/
#toppage .point {
    display: flex; flex-direction: column; gap:80px;
    margin: 0 auto; max-width: 1140px;
}
#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 50px;
    width: 33.3%;
    color: #019572;
    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 #019572;
}
#toppage .point .point_list dl:nth-child(1) dt { background:url("http://kochi-iju.jp/lp/kochi-job/olfair/wp-content/uploads/2026/07/point01.png") no-repeat top center; background-size: 45% auto;}
#toppage .point .point_list dl:nth-child(2) dt { background:url("http://kochi-iju.jp/lp/kochi-job/olfair/wp-content/uploads/2026/07/point02.png") no-repeat top center; background-size: 45% auto;}
#toppage .point .point_list dl:nth-child(3) dt { background:url("http://kochi-iju.jp/lp/kochi-job/olfair/wp-content/uploads/2026/07/point03.png") no-repeat top center; background-size: 45% auto;}
#toppage .point .point_list dl::before {
    position: absolute; top: -25px; left: 0; right: 0;
    display: block; clear: both;
    margin: auto;
    width: 70px; height: 70px;
    font-family: "M PLUS 1", sans-serif;
    text-align: center;
    font-size: 150%; line-height: 62px;
    color: #019572;
    background: #fff;
    border: 4px solid #019572;
    border-radius: 50px;
}
#toppage .point .point_list dl:nth-child(1)::before { content:"01";}
#toppage .point .point_list dl:nth-child(2)::before { content:"02";}
#toppage .point .point_list dl:nth-child(3)::before { content:"03";}
#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:200px; 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: 112.5%; margin-bottom: 20px;}
    #toppage .point .point_list dl dd { font-size: 87.5%;}
    #toppage .point .btn2 a {
        padding: 25px 30px !important;
        font-size: 150% !important;
        text-align: left;
        background-position: 92% center !important;
    }
    #toppage .point .btn_box { display: none !important;}
}



/*--------------------------------------------
  STEP
---------------------------------------------*/
#toppage .step {
    margin: auto; width:90%; 
    display: flex; flex-wrap: wrap; flex-direction: column; gap: 60px;
}
#toppage .step .step_box {
    position: relative;
    margin: auto; width:90%; max-width: 1140px;
    padding: 100px 0;
    background: #fff;
    border-radius:30px;
}
#toppage .step .inner { max-width:840px;}
#toppage .step .step_box .inner { display: flex; flex-direction: column; gap:60px;}
#toppage .step .step_box h3 { margin-bottom:30px; text-align: left;}
#toppage .step .step_box h3 small { font-size: 112.5%; margin-top: 10px;}
#toppage .step .step_box h4 { margin-bottom: 20px; color:#848484;}
#toppage .step .step_box h4.mid_line { padding-bottom: 30px; border-bottom: 1px solid rgba(0,0,0,0.20);}
#toppage .step .step_box .comment { line-height: 250%;}
#toppage .step .step1 h3 { color:#0094A2;}
#toppage .step .step2 h3 { color:#3EA772;}
#toppage .step .step3 h3 { color:#3EC9A8;}
#toppage .step .step1 { box-shadow: 10px 10px 0px 0px #0094A2;}
#toppage .step .step2 { box-shadow: 10px 10px 0px 0px #3EA772;}
#toppage .step .step3 { box-shadow: 10px 10px 0px 0px #3EC9A8;}
#toppage .step .step1::before,
#toppage .step .step2::before,
#toppage .step .step3::before {
    position: absolute; top:-5px; left: -5px;
    display: block; clear: both;
    font-family: "M PLUS 1", sans-serif;
    font-size: 150px;
    font-weight: bold;
    line-height: 150px;
}
#toppage .step .step1::before { color:rgba( 0,148,162,0.20); content:"01";}
#toppage .step .step2::before { color:rgba(62,167,114,0.20); content:"02";}
#toppage .step .step3::before { color:rgba(62,201,168,0.20); 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: #848484;
    font-weight: bold;
    background: #fff;
    border:4px solid #848484;
    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/2026/07/arrow3.png") no-repeat;
    background-size: 100% auto;
}
#toppage .step .flow_list dt,
#toppage .step .flow_list dd { margin: 0 auto; max-width: 440px; }
#toppage .step .flow_list dt {
    margin-bottom: 15px;
    padding: 0 0 15px;
    font-size: 150%;
    color: #848484;
    border-bottom: 2px solid #ddd;
}
#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; background-size: 40px auto;}
#toppage .step .step1 .flow_list {
    background: url("http://kochi-iju.jp/lp/kochi-job/olfair/wp-content/uploads/2026/07/step1_illust.png") no-repeat right bottom;
    background-size: 200px auto;
}
#toppage .step .step2 .flow_list {
    background: url("http://kochi-iju.jp/lp/kochi-job/olfair/wp-content/uploads/2026/07/step2_illust.png") no-repeat right bottom;
    background-size: 200px 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:0 10px 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 #848484; 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: 2px solid #ddd;}
    #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 and Pickup
---------------------------------------------*/
#toppage .pickup h3 {margin-bottom: 100px;}
#toppage .pickup .inner { max-width: 1140px;}
#toppage .pickup_list { margin-bottom: 80px;}
#toppage .pickup_list .box {
    margin: 0 20px;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
}
#toppage .pickup_list .box a { color: #10877F; text-align: center; text-decoration: none;}
#toppage .pickup_list .box .pic { width: 100%; height: auto; aspect-ratio: 370 / 250; text-align: center;}
#toppage .pickup_list .box .pic img { margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%;}
#toppage .pickup_list .box .txt { display: flex; flex-direction: column; gap:20px; margin-top: 20px;}
#toppage .pickup_list .box .txt .txt1 {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 112.5%;
    font-weight: 700;
    min-height: 85.6px;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
}
#toppage .pickup_list .box .txt .txt2 {
    font-size: 100%;
    min-height: 85.6px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
}
#toppage .mini_search {
    position: relative;
    display: flex; justify-content: space-between; gap:20px;
    padding: 30px;
    background: #fff;
}
#toppage .mini_search form { display: block; width: 100%;}
#toppage .mini_search .search_box {
    position: relative;
    display: flex; flex-wrap: wrap; gap:20px;
    width: 100%;
    background: #fff;
}
#toppage .mini_search .box {
    position: relative;
    width: 100%; max-width: 200px;
}
#toppage .mini_search .box select {
    cursor: pointer;
    display: block;
    padding: 0 10px;
    width: 100%;
    height: 60px; line-height: 60px;
    color: #006934;
    background: #fff;
    border: 4px solid #006934;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-sizing: border-box;
}
#toppage .mini_search .box::after {
    display: block; clear: both; content:"";
    content: "";
    position: absolute;
    top: 40%;
    right: 15px;
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 12px solid #006934;
    border-bottom: 0;
    pointer-events: none;
}
#toppage .mini_search .b_btn {
    cursor: pointer;
    display: block;
    padding: 0 10px;
    width: 100%; max-width: 250px;
    height: 60px; line-height: 60px;
    color: #fff;
    font-size:125%;
    font-weight: 700;
    background: #006934;
    border: none;
    box-sizing: border-box;
}
#toppage .mini_search .txt_link { width: 100%; max-width: 130px;}
#toppage .mini_search .txt_link a {
    color: #707070;
    font-size:87.5%;
    text-decoration: none;
}
@media only screen and (max-width:800px){
    #toppage .pickup h3 {margin-bottom: 50px;}
    #toppage .pickup .inner { width: 100%;}
    #toppage .pickup_list { margin-bottom: 40px;}
    #toppage .mini_search { margin: auto; padding: 20px; width: 90%;}
    #toppage .mini_search .search_box { flex-direction: column; max-width: 100%;}
    #toppage .mini_search .box,
    #toppage .mini_search .b_btn,
    #toppage .mini_search .txt_link { max-width: 100%;}
    #toppage .mini_search .txt_link { text-align: center;}
    #toppage .mini_search .txt_link br { display: none !important;}
}



/*--------------------------------------------
  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;
    margin: auto; max-width: 840px;
}
#toppage .voice .box { position: relative; color: #fff;}
#toppage .voice .box .mid {
    position: absolute; top: 0; right: 0;
    width:187px; 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;
    margin-left: 300px;
    width: calc(100% - 300px);
}
#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/2026/07/voice_illust1.png") no-repeat 30px 30px; background-size:180px auto;}
#toppage .voice .box.voice2 { background: url("http://kochi-iju.jp/lp/kochi-job/olfair/wp-content/uploads/2026/07/voice_illust2.png") no-repeat 30px 30px; background-size:180px auto;}
@media only screen and (max-width:800px){
    #toppage .voice { margin-bottom:50px;}
    #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 { position: static; margin-bottom: 40px; padding: 0 20px; width:100%; text-align: left;}
    #toppage .voice .box .mid img { width:180px;}
    #toppage .voice .box .comment { margin: auto; width: 90%; }
    #toppage .voice .box .comment::before { display: none; }
    #toppage .voice .box dl { margin: auto; width:100%;}
    #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-position: right top; background-size: 30% auto;}
    #toppage .voice .box.voice2 { background-position: right top; background-size: 30% auto;}
}



/*--------------------------------------------
  FAQ
---------------------------------------------*/
#toppage .faq { margin-bottom: 50px;}
#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:#848484; background: #fff; font-weight: 600;}
#toppage .faq dt,
#toppage .faq dd { margin: auto; width: 100%; max-width: 840px;}
#toppage .faq dt { cursor: pointer; font-size: 137%; min-height: 35px; padding-right: 35px;}
#toppage .faq dd {  display: none; font-size:87.5%; padding-top: 50px; line-height: 180%;}
#toppage .faq dd a {color:#848484;}
#toppage .faq dt { background:url("../img/accordion_off.png") no-repeat right top; background-size: 35px auto;}
#toppage .faq dt.active {  background: url("../img/accordion_on.png") no-repeat right top; background-size: 35px auto;}
@media only screen and (max-width:800px){
    #toppage .faq h3 { margin-bottom: 25px}
    #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:1140px;
    border: 8px solid #fff;
    border-radius: 30px;
}
#toppage .entry .inner { 
    width:90%; max-width: 840px;
}
#toppage .entry h3 { 
    margin: 0 0 30px;
    padding: 35px 0;
    color: #848484;
    background:#fff;
}
#toppage .entry .come {
    display: flex; flex-wrap: wrap;  gap:60px; justify-content: center; align-items: center;
    margin: 0 auto 30px; max-width: 900px;
}
#toppage .entry .come p img { width: 280px; height: auto;}
#toppage .entry .btn { width:100%; max-width: 340px;}
#toppage .entry .btn a { font-weight: bold;}
#toppage .entry .bana img {width: 100%; height: auto;}
@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 .btn1 a { font-size: 110% !important;}
}