html {}
body {
	margin: 0;
	padding: 0;
	font-family: 'Zen Kaku Gothic New', "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font-size:100%;
	line-height:180%;
	color: #222;
    overflow-x: hidden;
    background: #006934;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
    list-style:none;
	vertical-align: baseline;
    -webkit-appearance: none;
}
iframe { border: none;}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    backface-visibility: hidden;
}
div, p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd { box-sizing:border-box;}
img { border: none; vertical-align:bottom;}

a:link {color:#06F; outline:none; }
a:visited {color:#06F;}
a:hover {color: #333;}

#wrapper { position: relative;}
i.material-icons { vertical-align: middle;}
.pc {display:block;}
.pctb {display:block;}
.tb {display:none;}
.tbsp {display:none;}
.sp {display:none;}
.inner { margin: auto; width: 90%; max-width:920px;}
@media only screen and (min-width:768px){
    a:hover img { opacity: 0.7; filter: alpha(opacity=70);}
}
@media only screen and (max-width:768px){
	body { min-width:100%; font-size:100%;}
	#header { width:100%;}
	#content{ width:100%;}
	#footer { width:100%;}
	#wrapper {}
	#base { width:100%;}
    .pc {display:none !important;}
    .pctb {display:block !important;}
    .tb {display:block !important;}
    .tbsp {display:block !important;}
    .sp {display:none !important;}
}
@media only screen and (max-width:468px){
    .pc {display:none !important;}
    .pctb {display:none !important;}
    .tb {display:none !important;}
    .tbsp {display:block !important;}
    .sp {display:block !important;}
    #sp_fix { z-index: 9;}
}


/*=============================================
  CONTACT
=============================================*/
#yokoku {font-family: "M PLUS 1p", sans-serif;}
#yokoku .inner { margin: auto; padding: 60px 0; width: 90%; max-width:1120px;}
#yokoku img { width: 100%; height: auto;}
@media only screen and (max-width:768px){
    #yokoku .inner { padding: 30px 0;}
}



#yokoku .mainimg {
    background:#fff url("http://kochi-iju.jp/lp/kochi-job/olfair/wp-content/uploads/2026/07/mainbg_pc.png") no-repeat top center;
    background-size: cover!important;
}
@media only screen and (max-width:768px){
    #yokoku .mainimg {
        padding: 30px 0;
        background:#fff url("http://kochi-iju.jp/lp/kochi-job/olfair/wp-content/uploads/2026/07/mainbg_sp.png") no-repeat top center;
    }
}


#yokoku .schedule {}


#yokoku .open {
    margin: auto;
    padding: 30px 0;
    max-width: 690px;
}
@media only screen and (max-width:768px){
    #yokoku .open {padding: 0;}
}



#yokoku .flow {
    display: flex; flex-wrap:wrap; justify-content: center; gap:40px;
    margin: 60px 0;
}
#yokoku .flow .box { width: calc(25% - 30px);}
#yokoku .flow .box .pic {
    position: relative;
    margin-bottom: 20px;
}
#yokoku .flow .box + .box .pic::before {
    display: block; clear: both; content:"";
    position: absolute; top: 0; bottom: 0; left: -27px;
    margin: auto;
    width: 100%; height:auto; max-width: 21px; aspect-ratio: 42 / 83;
    background: url("http://kochi-iju.jp/lp/kochi-job/olfair/wp-content/uploads/2026/07/flow_arrow.png") no-repeat;
    background-size: 100% auto;
}
#yokoku .flow .box .txt {
    font-size: 150%;
    font-weight: 700;
    color: #fff;
    text-align: center;
}
@media only screen and (max-width:768px){
    #yokoku .flow { flex-direction: column; align-items: center; gap:20px;}
    #yokoku .flow .box {
        display: flex; align-items: center; gap:20px;
        width:90%;
    }
    #yokoku .flow .box .pic {
        width: 100px;
        margin-bottom:0;
    }
    #yokoku .flow .box + .box .pic::before {
        top:-20px; left: 45px; bottom: inherit;
        transform: rotate(90deg);
        max-width:10px;
    }
    #yokoku .flow .box .txt {
        font-size: 125%;
        text-align:left;
    }
}



#yokoku .banner {
    padding: 60px;
    border: 3px solid #fff;
    border-radius: 20px;
}
#yokoku .banner .mid {
    font-size:206.2%;
    font-weight: 700;
    color: #fff;
    text-align: center;
}
#yokoku .banner ul {
    display: flex; justify-content: center; gap:40px;
    margin-top: 30px;
}
#yokoku .banner span {
    position: relative;
    display: block;
    margin-bottom: 10px;
}
#yokoku .banner span::before {
    display: block; clear: both; content:"";
    position: absolute; top: 0; bottom: 0;
    margin: auto;
    width: 100%; height: 1px;
    background: #fff;
}
#yokoku .banner span b {
    position: relative; z-index: 9;
    padding-right: 20px;
    font-size: 125%;
    color: #fff;
    background: #006934;
}
@media only screen and (max-width:768px){
    #yokoku .banner { padding: 30px;}
    #yokoku .banner .mid { font-size:125%;}
    #yokoku .banner ul { flex-direction: column; gap:20px;}
    #yokoku .banner span { text-align: center;}
    #yokoku .banner span::before { display: none;}
    #yokoku .banner span b { padding-right:0; font-size:100%;}
}



#yokoku .add {
    display: flex; justify-content: center; gap:20px;
    margin: 30px auto;
}
#yokoku .add dl { display: flex; align-items: center; gap:10px;}
#yokoku .add dl dt {
    padding: 5px 15px;
    font-size: 150%;
    font-weight: 700;
    color: #fff;
    border: 1px solid #fff;
}
#yokoku .add dl dd {
    font-size: 187.5%;
    font-weight: 700;
    color: #fff;
}
#yokoku .syusai { font-size: 112.5%; color: #fff; text-align: center;}
@media only screen and (max-width:768px){
    #yokoku .add { flex-direction: column;}
    #yokoku .add dl { flex-direction: column;}
    #yokoku .add dl dt { font-size: 87.5%; padding: 0 20px;}
    #yokoku .add dl dd { font-size: 100%;}
    #yokoku .syusai { font-size: 75%; line-height: 150%;}
}