@charset "UTF-8";
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {margin-bottom: 0; font-weight: normal;}
h1,h2,h3,h4 {font-weight: bold;}
p {margin-bottom: 0; line-height: 1.6;}

a:link { text-decoration: none; color: #452F0D;}
a:visited { text-decoration: none; color: #452F0D;}
a:hover { text-decoration: none;}
a:active { text-decoration: none; color: #452F0D;}
a:link,a:visited,a:hover,a:active {transition: all .6s; }
a:hover { opacity: .4;}

img { width: 100%; height: auto;vertical-align: bottom}

* {word-break: break-all;}
.requiredText {color:red; padding-left:.3vw;}

/*
font-family: "ten-mincho-text", serif;

*/




@media screen and (min-width: 1000px) {
iframe { display:block; width:100%; height:30vw; border: none; margin: 3vw auto 0;}
html { background: #F4F4F4;}
body {font-size:1.2vw; background: #F4F4F4; font-family: "fot-tsukuardgothic-std", sans-serif; font-weight: 400; font-style: normal; color: #1F1F1F; overflow-x: hidden;}
h1,h2,h3,h4  {}


.loading { opacity: 1; z-index: 100; position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; background: #F9F7F1; transition: all 1s; }
.loading.ready {opacity: 0; z-index: -100;}
.loading img { width: 15vw; height: auto; animation: animationZoom2 10s ease-in-out infinite; }
@keyframes animationZoom2{ 0% {transform: scale(1); opacity: .4;} 100% {transform: scale(1.6); opacity: .9;}}

.sidebar {position: fixed; left: 0; top: 0; z-index: 11; width: 12.9vw; height: 100vh; padding: 2vw 0; background: #fff; display: flex; flex-direction: column; justify-content: space-between; align-items: center;}
.sidebar .logo {margin-top: -2vw; transition: all 1s;}
.sidebar.active .logo {margin-top: 0;}
.sidebar .logo img { display: block; margin: 0 auto; width: auto; height: 13vh;}
.sidebar h1 { font-family: "fot-tsukuardgothic-std", sans-serif; font-weight: normal; font-size: 1.7vh; letter-spacing: 0.3em; text-indent: 2.5em; writing-mode: vertical-rl; margin: 0 auto 3.5em; min-height: 55vh; margin-top: 2vw; opacity: 0; transition: all .6s;}
.sidebar.active h1 { margin-top: 0; opacity: 1;}
.sidebar .sidebar_icon { display: block; opacity: 0; transition: all .6s;}
.sidebar .sidebar_icon img { display: block; margin: 0 auto 3vh; width: auto; height: 3.6vh;}
#spMenu { position: fixed; top: 0; right: 0; z-index: 10; display: flex; justify-content: center; align-items: center; width: 5vw; height: 5vw; padding: 0; transition: all 1s; align-items: center; margin: 0 0 0 0; background: #505050;}
#spMenu .menu-trigger { width: 3.5vw; height: 3.5vw; display: block; position: relative; }
.menu-trigger,.menu-trigger p { display: block; transition: all .4s; box-sizing: border-box; }
.menu-trigger.down p { position: absolute; left: 0; width: 100%; height: 1px; background: #000; font-size: 0.1em; }
.menu-trigger p { position: absolute; left: 0; width: 100%; height: 1px; background: #fff; font-size: 0.1em; box-shadow: 0px 0px 8px rgba(0,0,0,0.2); }
.menu-trigger p:nth-of-type(1) { top: .4vw; }
.menu-trigger p:nth-of-type(2) { top: 1.6vw; }
.menu-trigger p:nth-of-type(3) { top: 3vw; }
.menu-trigger.active p:nth-of-type(1) { transform: translateY(1.2vw) rotate(-45deg); background: #fff; }
.menu-trigger.active p:nth-of-type(2) { opacity: 0; }
.menu-trigger.active p:nth-of-type(3) { transform: translateY(-1.4vw) rotate(45deg); background: #fff; }
.spnavi { display: block; position: fixed; top: 0; right: -45vw; z-index: 9; background: rgba(0,0,0,.8); width: 45vw; height: 100%; padding: 3vw 2vw 0; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; -webkit-transition: all 1s; transition: all 1s; }
.spnavi.active { right: 0;}
.spnavi a { color: #fff; display: block; padding: 1.4vh 0; border-bottom: dotted 1px rgba(255,255,255,.2);}
.spnavi a  p{ color: #fff;}

.footer { width: 86.0vw; margin-left: 12.9vw; background: url(https://kuroyan.co.jp/system_panel/uploads/images/bg.jpg) no-repeat center; background-size: cover;}
.footer .f_cell { display: flex; justify-content: space-between; width: 80%; margin: 0 auto; padding: 5vh 0;}
.footer .f_cell .fleft { display: flex; align-items: center; width: 70%;}
.footer .f_cell .fleft .f_logo { width: 5vw; margin-right: 3vw;}
.footer .f_cell .fleft .f_info { color: #fff;}
.footer .f_cell .fleft .f_info .f_name { display: flex; align-items: center; font-size: 120%;}
.footer .f_cell .fleft .f_info .f_name .txt_s { font-size: 70%; margin-left: 1vw;}
.footer .f_cell .fleft .f_info .f_tel { display: flex; align-items: center; font-size: 200%;}
.footer .f_cell .fleft .f_info .f_tel img { width: 2vw; margin-right: 1vw;}
.footer .f_cell .fleft .f_info .f_address { font-size: 120%;}
.footer .f_cell .fleft .f_info a { color: #fff;}
.footer .f_cell .fright { display: flex; justify-content: flex-end; align-items: center; width: 30%;}
.footer .f_cell .fright a img { width: 2.5vw; margin-left: 3vw;}

a.footer_link { display: flex; justify-content: center; align-items: center; width: 86.0vw; margin-left: 12.9vw; padding: 2.5vh 0; text-align: center; background: #82B046; color: #fff;}
a.footer_link p { color: #fff; font-size: 140%;}
a.footer_link .footer_link_line { width: 3vw; margin-right: 2vw;}
a.footer_link .footer_link_arrow { width: 0.8vw; margin-left: 2vw;}
.cp { display: block; overflow: hidden; background: #000; color: #fff; text-align: center; display: block; width: 100%; height: 2vw; padding: .3vw 0; margin-bottom: 9.74vw;}

.maincont { margin: 4vw auto 0; display: block; overflow: hidden; min-height: 80vh;}
.mainwrap { position: relative; z-index: 1; width: 86.0vw; margin-left: 12.9vw; margin-bottom: 7vw; overflow: hidden;}


a.btn { display: flex; justify-content: center; align-items: center; width: max-content; margin-right: auto; margin-left: auto; background: #E67451; color: #fff; padding: .8vw 4vw .8vw 2vw; text-align: center; letter-spacing: .1vw; text-indent: .5vw; position: relative; border-radius: 40px;}
a.btn::after { position: absolute; display: block; content: ""; width: 9px; height: 17px; background: url(https://kuroyan.co.jp/system_panel/uploads/images/20230529101642579192.png) no-repeat center; background-size: 9px 17px; top: 50%; right: 25px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);}
a.btn p { color: #fff; font-size: 140%;}
a.btn p.txt_s { font-size: 90%; margin-left: 1vw;}
a.btn.type2 { margin-right: auto; margin-left: auto; display: block; width: max-content; background: #D8259B; color: #fff; padding: .3vw 1vw; text-align: center; letter-spacing: .5vw; text-indent: .5vw;}

a.btn2 { display: flex; justify-content: center; align-items: center; width: max-content; margin: 0 auto; background: #89C935; color: #fff; padding: .8vw 2.5vw .8vw 2vw; text-align: center; position: relative; border-radius: 40px;}
a.btn2::after { position: absolute; display: block; content: ""; width: 4px; height: 8px; background: url(https://kuroyan.co.jp/system_panel/uploads/images/20230529101642579192.png) no-repeat center; background-size: 4px 8px; top: 50%; right: 15px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);}
a.btn2 p { color: #fff;}

.hbox { text-align: center; margin-bottom: 5vw;}
.hbox h2, .hbox h3 {font-size: 200%; letter-spacing: .5vw; text-indent: .5vw; margin-bottom: .3vw;}
.hbox p { width: max-content; text-align: center; margin: 0 auto; letter-spacing: .5vw; text-indent: .5vw; font-size: 90%;}

.section {position: relative; display: block; margin: 8vw auto; text-align: left; width: 70%; }
.section02 {position: relative; display: block; margin: 8vw auto; text-align: left; width: 80%; }
.cell { width: 80%; background: #fff; padding: 3vw 5vw; margin: 0 auto 5vw;}
.img_rec01 { position: absolute; width: 10vw; top: 22vw; right: -5vw; z-index: 2;}
.img_rec02 { position: absolute; width: 11vw; bottom: -9vw; left: -6vw; z-index: 2;}
.img_rec03 { position: absolute; width: 14vw; top: -2vw; right: -5vw; z-index: 2;}
.img_rec04 { position: absolute; width: 12vw; top: -9vw; left: -5vw; z-index: 2;}

.pagettl + .section {margin: 8vw auto 8vw;}
.pagettl + .section02 {margin: 8vw auto 8vw;}
.stripeBg {background: url(https://kyokasho230225.smooooth.jp/system_panel/uploads/images/bg_btmcell.png); background-size: 4px auto; padding: 2vw 0 1vw; overflow: hidden;}
.stripeBg .section { margin: 0 auto;}
.mb0 {margin-bottom: 0vw!important;}
.mb1 {margin-bottom: 1vw!important;}
.mb3 {margin-bottom: 3vw!important;}
.mb5 {margin-bottom: 5vw!important;}
.w90 { width: 90% !important;}

.section h3 { text-align: center; font-size: 140%; }
.section p { margin-bottom: 3vw;}
.section p:last-of-type { margin-bottom: 0vw;}
.section p.ttl { color: #6EA744; font-weight: bold; margin-bottom: 0;}

.h3_ttl01 { text-align: center; margin: 0 auto 4vw;}
.h3_ttl01 h3 { font-size: 200%; font-weight: bold;}
.h3_ttl01 p { font-size: 100%; color: #E27626; font-weight: bold;}
.h3_recruit { margin: 0 auto 3vw; text-align: center;}
.h3_recruit h3 {background:linear-gradient(transparent 60%, #EEFF6A 60%); text-align: center; font-weight: bold; font-size: 200%; display: inline;}

.h4_ttl {text-align: left !important; border-left: 7px solid #89C935; border-bottom: 1px dotted #707070; margin: 0 0 3vw; padding: 0.3vw 1vw 0.6vw 1vw;}
.h4_flow { margin: 0 auto 5vw; padding: 1vw 3vw; text-align: center; color: #fff;font-size: 200%; font-weight: bold; background: #89C935; border-radius: 50px;}

.bgwht { background: #fff; padding: 3vw 3vw 5vw; border-radius: 54px; margin: 0 auto 5vw;}

.newslist.newslistindex { padding: 0 2vw; background: #fff;}
.newslist .webgene-blog { height: auto; display: flex; justify-content: flex-start; flex-wrap: wrap;}
.newslist .webgene-blog .flcell { display: block; width: 100%; height: auto; width: 30%; margin: 0 5% 2vw 0; border: none; padding: 0.5vw; background: #fff;}
.newslist .webgene-blog .flcell:nth-of-type(3n) {margin-right: 0;}
.newslist .webgene-blog .flcell .fleft { width: 100%;}
.newslist .webgene-blog .flcell .fleft a {display: block; width: 100%; height: 13vw; overflow: hidden;}
.newslist .webgene-blog .flcell .fleft a img { width: 100%; height: 100%; object-fit: cover;}
.newslist .webgene-blog .flcell .fright { width: 100%; padding: 2vw 1vw; box-sizing: border-box; text-align: center;}
.newslist .webgene-blog .flcell .fright a p { font-size: 100%; color: #6EA744; font-weight: bold; margin-bottom: 1.5vw;}
.newslist .webgene-blog .flcell .fright h2 {font-size: 100%; color: #000; font-weight: normal; letter-spacing: 0; text-indent: 0;}
.newslist.newslistindex .webgene-blog .webgene-item { display: flex; align-items: center; width: 100%; padding: 1vw 0; border-bottom: 1px solid rgba(112,112,112,0.15);}
.newslist.newslistindex .webgene-blog .webgene-item:last-of-type { border-bottom: none;}
.newslist.newslistindex .webgene-blog .webgene-item .date { width: 15%; font-size: 110%; color: #AD4F09;}
.newslist.newslistindex .webgene-blog .webgene-item a { width: 70%;}
.newslist.newslistindex .webgene-blog .webgene-item a h2 { font-size: 110%; font-weight: normal; color: #1F1F1F;}
.newslist.newslistindex .webgene-blog .webgene-item a.btn2 { width: 15%; font-size: 100%; color: #fff;}

.newsdetail .webgene-blog { display: block; width: 100%; text-align: left; margin: 0 auto 7vw; }
.newsdetail .webgene-blog header { display: block; text-align: center; margin: 0 auto 1vw;}
.newsdetail .webgene-blog header h2 {font-size: 150%; margin-bottom: 1vw;}
.newsdetail .webgene-blog header p {font-size: 120%; color: #6EA744; font-weight: bold;}
.newsdetail .webgene-blog .artmain { width: 60%; margin: auto;}
.newsdetail .webgene-blog article img {padding-bottom: 3vw;}
.newsdetail .webgene-blog article p {padding-bottom: 3vw;}

.pagettl { opacity: 0; transition: all 1s; display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 20vw; margin: 0 auto 15vh;}
.pagettl.active {opacity: 1;}
.pagettl .txt { position: absolute; z-index: 2; width: max-content; height: auto; padding: 1.7vh 4em; text-align: center; color: #6EA744; background: #fff; box-shadow: 0 3px 6px rgba(0,0,0,0.16); bottom: -2vw;}
.pagettl .txt h2 { font-size: 200%; letter-spacing: .1vw; text-indent: .1vw; opacity: 0;}
.pagettl .txt h2.appeartext {opacity: 1;}
.pagettl .txt h2 span{opacity: 0;}
.pagettl .txt h2.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:1;}
}


.pagettl .txt h2 strong {color: #6EA744;}
.pagettl .bg { position: absolute; z-index: 1; width: 100%; height: 100%;}
.pagettl .bg img { width: 100%; height: 100%; object-fit: cover;}

.pagettl.recruitttl { height: 45vw; margin: 0 auto 15vh;}
.pagettl.recruitttl .r_ttl { position: absolute; text-align: left; color: #fff; background: none; top: 30%; left: 5%; z-index: 2; transform: rotate(-3deg);}
.pagettl.recruitttl .r_ttl h2 { font-size: 360%; font-weight: normal; letter-spacing: .1vw; text-indent: .1vw; font-family: "ta-koigokoro", sans-serif; text-shadow: 0px 3px 6px rgba(0,0,0,0.16);}
.pagettl.recruitttl .r_ttl h2 strong {background:linear-gradient(transparent 70%, #D8C016 70%); font-weight: normal;}
.pagettl.recruitttl .txt { width: 70%; height: auto; padding: 0 0; text-align: left; color: #fff; background: none; box-shadow: none; top: inherit; bottom: 10%; left: 5%; display: flex; flex-direction: column;}
.pagettl.recruitttl .txt div { margin: 2vw 0 0 0;}
.pagettl.recruitttl .txt p { font-size: 190%; letter-spacing: .1vw; text-indent: .1vw; display: inline; background: #59C664; padding: 1vw;font-family: "ta-koigokoro", sans-serif;}



.form {width: 100%; margin: 0 auto;}
.form .formRow { margin: 0 0 2vw; padding: 0; text-align: left;}
.form .formRow input[type="text"],.form .formRow input[type="email"],.form .formRow textarea {width: 100%; border: none; height: 4vw;}
.form .formRow textarea {height: 10em;}
.form .pp { display: block;width: 100%;height: 20vw; margin: 2vw auto;overflow: scroll;border: solid 1px #fafafa;padding: 1vw; box-sizing: border-box; text-align: left;}
.form .submit { text-align: center; margin: auto;}

.form #submit { opacity: .2; border: none; display: flex; justify-content: center; align-items: center; width: max-content; margin: 0 auto; background: #89C935; color: #fff; padding: .8vw 2.5vw .8vw 2vw; text-align: center; position: relative; border-radius: 40px;}
.form #submit::after { position: absolute; display: block; content: ""; width: 4px; height: 8px; background: url(https://kuroyan.co.jp/system_panel/uploads/images/20230529101642579192.png) no-repeat center; background-size: 4px 8px; top: 50%; right: 15px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);}
.form #submit.active {opacity: 1;}
.form label.privacyLabel { padding-left: .7em;}

.txtlist .flcell { display: flex; justify-content: flex-start; width: 100%; height: auto; margin: 0 auto;}
.txtlist .flcell .fleft { width: 30%; text-align: left; color: #fff; background: #89C935; padding: 1vw;}
.txtlist .flcell:nth-last-of-type(2n) .fleft { background: #81BF2F;}
.txtlist .flcell .fright { width: 70%; padding: 1vw; box-sizing: border-box; display: block; border-left: solid 1px #CECECE; border-bottom: solid 1px #CECECE; border-right: solid 1px #CECECE; background: #fff;}
.txtlist .flcell:nth-of-type(1) .fright { border-top: solid 1px #CECECE;}
.txtlist .flcell .fright p {text-align: left;}

.tbl { width: 80%; margin: 0 auto; border-top: 1px solid #CECECE;}
.tblcell { width: 100%; margin: 0 auto; display: flex; border-right: 1px solid #CECECE;}
.tblcell .tcell_th { width: 33.33333%; border-bottom: 1px solid #CECECE; border-left: 1px solid #CECECE; padding: 0.7vw; background: #89C935; color: #fff;}
.tblcell .tcell_td { width: 33.33333%; border-bottom: 1px solid #CECECE; border-left: 1px solid #CECECE; padding: 0.7vw; background: #fff;}

.kv { position: relative; width: 100%; height: 45vw; overflow: hidden;}
.kv .s_cell { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; overflow: hidden;}
.kv .txt { position: absolute; z-index: 2; left: 0; bottom: 0; width: 100%; height: 40vw;}
.kv .txt h2 { position: absolute; background: #6EA744; padding: .4vw; color: #fff; font-size: 220%; font-family: "ta-koigokoro", sans-serif;}
.kv .txt h2 + p { position: absolute; color: #fff; font-size: 140%; text-shadow: rgba(0,0,0,.8) 1px 1px 5px;}
.kv .txt .en { position: absolute; width: 40vw; height: auto; }
.kv .txt .btn { position: absolute; bottom: 2vw; left: 0; right: 0; margin: auto; border: solid 2px #fff; }
.kv .bg { position: absolute; z-index: 1; width: 100%; height: 100%; left: 0; top: 0;}
.kv .bg img {width: 100%; height: 100%;object-fit: cover;}

.kv .slide1 .txt h2:nth-of-type(1) { top: 22vw; left: 10vw; opacity: 0; transition: all 1s;}
.kv .slide1 .txt h2:nth-of-type(2) { top: 27vw; left: 22vw; opacity: 0; transition: all 1s;}
.kv .slide1 .txt .en { top: 12vw; left: 11vw; opacity: 0; transition: all 1s;}
.kv .slide1 .txt .btn { bottom: 0; opacity: 0; transition: all 1s;}

.kv.active .slide1 .txt h2:nth-of-type(1) { top: 22vw; left: 15vw; opacity: 1;}
.kv.active .slide1 .txt h2:nth-of-type(2) { top: 27vw; left: 17vw; opacity: 1;}
.kv.active .slide1 .txt .en { top: 8vw; left: 11vw; opacity: 1;}
.kv.active .slide1 .txt .btn { bottom: 2vw; opacity: 1; transition: all 1s;}

.kv .slide2 .txt h2:nth-of-type(1) { top: 18vw; left: 12vw;}
.kv .slide2 .txt h2:nth-of-type(2) { top: 23vw; left: 14vw;}
.kv .slide2 .txt h2 + p { top: 28vw; left: 14vw;}
.kv .slide2 .txt .en { top: 2vw; left: 11vw;}

.kv .slide3 .txt h2:nth-of-type(1) { top: 18vw; left: 31vw;}
.kv .slide3 .txt h2:nth-of-type(2) { top: 23vw; left: 34vw;}
.kv .slide3 .txt h2 + p { top: 28vw; left: 36vw;}
.kv .slide3 .txt .en { top: 2vw; left: 37vw;}

.kv .slide4 .txt h2:nth-of-type(1) { top: 18vw; left: 10vw;}
.kv .slide4 .txt h2:nth-of-type(2) { top: 23vw; left: 12vw;}
.kv .slide4 .txt h2 + p { top: 28vw; left: 12vw;}
.kv .slide4 .txt .en { top: 2vw; left: 11vw;}

.kv .slide5 .txt h2:nth-of-type(1) { top: 18vw; left: 32vw;}
.kv .slide5 .txt h2:nth-of-type(2) { top: 23vw; left: 37vw;}
.kv .slide5 .txt h2 + p { top: 28vw; left: 37vw;}
.kv .slide5 .txt .en { top: 2vw; left: 35vw;}

.greeting { position: relative; width: 100%; height: 37vw; background: url(https://kuroyan.co.jp/system_panel/uploads/images/greeting.jpg) no-repeat center; background-size: cover; padding: 4vw; margin: 0 auto 10vw;}
.greeting .box { background: rgba(0,0,0,0.5); padding: 3vw; color: #fff;}
.greeting .box h2 { text-align: center; font-size: 180%; font-weight: bold; margin: 0 auto 3vw;}
.greeting .box .txt { text-align: center; font-size: 110%; font-weight: bold; margin: 0 auto 3vw;}
.greeting .img01 { position: absolute; top: 2vw; left: 2vw; width: 12vw;}
.greeting .img02 { position: absolute; top: 8vw; right: 1.3vw; width: 14vw;}
.greeting .img03 { position: absolute; bottom: -2vw; left: 4vw; width: 14vw;}

.under_ { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; width: 100%; height: 32vw; overflow: hidden;}
.under_ .slide { left: 0; top: 0; display: block; width: 100%; height: 100%; overflow: hidden; margin: 0 auto; position: relative; object-fit: cover;}

.intercell { position: relative; margin-bottom: 6vw;}
.intercell .icon { position: absolute; top: -4vw; right: -4vw; width: 8vw; z-index: 2;}
.intercell .icon img { width: 100%;}
.intercell .icon .txt { position: absolute; width: 100%; text-align: center; top: 55%; left: 43%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); color: #fff;}
.intercell .icon .txt .txt_num { font-size: 260%; font-weight: bold; line-height: 1;}
.intercell .icon .txt .txt_s { font-size: 55%; font-weight: bold;}
.intercell .txt_comment { text-align: center; width: 100%; background: #89C935; color: #fff; font-size: 150%; font-weight: bold; padding: 1vw 0;}
.interviewkv { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; width: 100%; height: 28vw; overflow: hidden; margin: 3vw auto 0;}
.interviewkv .slide { left: 0; top: 0; display: block; width: 100%; height: 100%; overflow: hidden; margin: 0 auto; position: relative; object-fit: cover;}

.bgsec { position: relative; overflow: hidden;}
.bgsec .bgimgcell { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 30vw; overflow: hidden;}
.bgsec .bgimgcell img {display: block; width: 100%; height: 100%; object-fit: cover;}
.bgsec .mainsec { position: relative; z-index: 2; left: 0; right: 0; top: 0; margin-left: auto; margin-right: auto; padding-bottom: 3vw; background: #fafafa;}
.bgsec .mainsec h2 { background: #000; width: 100%; height: auto; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 200%; padding: 2vw 0; margin-bottom: 2vw;}
.bgsec .mainsec .contentcell { width: 90%; margin: 0 auto; padding: 2vw 0; text-align: left;}
.bgsec .mainsec .list p { display: block; padding: 2vw 0; border-top:  solid 1px #DBDBDB;}
.bgsec .mainsec .list p:last-child { border-bottom:  solid 1px #DBDBDB;}
.bgsec .mainsec .contentcell .flcell { display: flex; justify-content: flex-start; align-items: center; width: 100%; height: auto; margin: 0 auto; border-top: solid 1px #E0E0E0;}
.bgsec .mainsec .contentcell .flcell:nth-last-of-type(1) { border-bottom:  solid 1px #DBDBDB;}
.bgsec .mainsec .contentcell .flcell .fleft { width: 70%; text-align: left;}
.bgsec .mainsec .contentcell .flcell .fright { width: 30%; padding: 1vw; box-sizing: border-box; display: block;}

.indexnews { display: flex; justify-content: flex-start;}
.indexnews .ttl { width: 10%; display: flex; justify-content: center; align-items: center; background: #000; color: #fff;}
.indexnews .indexnewsCell { width: 90%;}
.indexnewsCell {display: block; width: 100%; padding: 0 1vw; background: #fff; box-sizing: border-box; overflow: hidden;}
.indexnewsCell .webgene-blog {width: 96.2%;}
.indexnewsCell .webgene-blog article {width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1vw 0; border-bottom: solid 1px #EBEBEB; }
.indexnewsCell .webgene-blog article .date { width: 10%; font-size: 120%; padding-left: 1vw;}
.indexnewsCell .webgene-blog article .mainAnc { width: 74%;}
.indexnewsCell .webgene-blog article .mainAnc h2 { font-size: 120%; font-weight:normal;}
.indexnewsCell .webgene-blog article .btn{ margin: 0; width: 13vw; font-size: 80%;}

.indexcontcell .flcell { display: flex; justify-content: flex-start; width: 100%; height: auto; margin: 0 auto; background: #F5F5F5;}
.indexcontcell .flcell .fleft { order:1; width: 50%; padding: 3vw; box-sizing: border-box; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.indexcontcell .flcell .fleft p { text-align: left; margin: 2vw 0;}
.indexcontcell .flcell .fleft a p { margin-top: 0; margin-bottom: 0;}
.indexcontcell .flcell .fright { order:2; width: 50%;}
.indexcontcell .flcell:nth-of-type(even) .fleft {order: 2;}
.indexcontcell .flcell:nth-of-type(even) .fright {order: 1;}

.btnbox { display: flex; justify-content: space-around; align-items: center; width: max-content; margin-right: auto; margin-left: auto;}
.btnbox .btn { margin: 0 2vw!important; font-size: 130%;}
.btnbox .btn2 { margin: 0 2vw!important; font-size: 130%;}
.largep { font-size: 140%;}
.tal {text-align: left;}
.tac {text-align: center;}
.tar {text-align: right;}

.bgsection {background: #fafafa; padding: 5vw;}
.bgsection .section {margin: 0 auto!important;}

.service { margin: 0 0 7vw;}
.service p { margin-bottom: 3vw;}
.service p:last-of-type { margin-bottom: 0vw;}
.service p.ttl { color: #6EA744; font-weight: bold; margin-bottom: 0;}

.flow { margin: 0 auto 5vw; width: 90%;}
.flow.faq { margin: 0 0 5vw; width: 100%;}
.flow_cell { position: relative; padding: 0 0 5vw;}
.flow_cell::after { display: block; content: ""; position: absolute; background: url(https://kuroyan.co.jp/system_panel/uploads/images/flow_arrow.png) no-repeat; background-size: 47px 23px; width: 47px; height: 23px; bottom: 15px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);}
.flow.faq .flow_cell::after { display: none;}
.flow_cell:last-of-type { padding: 0 0 0vw;}
.flow_cell:last-of-type::after { display: none;}
.flow_cell .flow_ttl { display: flex; align-items: center; margin: 0 0 0vw;}
.flow_cell .flow_ttl .flow_icon { position: relative; width: 5vw; margin-right: 1vw;}
.flow_cell .flow_ttl .flow_icon img { width: 100%;}
.flow_cell .flow_ttl .flow_icon p { position: absolute; top: 53%; left: 43%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); font-size: 160%; font-weight: bold; color: #fff;}
.flow_cell .flow_ttl .flow_ttl_txt p { font-size: 140%; font-weight: bold; color: #6EA744;}
.flow_cell .flow_ttl.org .flow_icon p { font-size: 70%; color: #fff; top: 58%;}
.flow_cell .flow_ttl.org .flow_ttl_txt p { color: #1F1F1F;}
.flow_cell .flow_detail { font-size: 100%; margin: 2vw 0 0;}

.interview { background: #F8F8F8; padding: 1vw 2vw; margin: 0 auto 5vw; border-radius: 40px;}
.interview .fcell { display: flex; justify-content: space-between; align-items: center;}
.interview .fcell .fleft { width: 75%; display: flex; align-items: center;}
.interview .fcell .fleft .name { font-size: 140%; font-weight: bold; margin-right: 3vw;}
.interview .fcell .fleft .year { font-size: 100%;}
.interview .fcell .fright { width: 25%;}

.interviewcell { display: flex; flex-wrap: wrap;}
.interviewcell .box { width: 48.5%; height: 20vw; margin: 0 3% 2vw 0; position: relative; overflow: hidden;}
.interviewcell .box:nth-of-type(2n) { margin: 0 0% 2vw 0;}
.interviewcell .box a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; height: 100%; text-decoration: none; color: #fff; font-weight: bold; text-align: center; background: rgba(0,0,0,.5);}
.interviewcell .box a .ttl { width: 90%; font-size: 120%; color: #fff; margin-top: 7vw;}
.interviewcell .box a .ttl p { line-height: 1.3;}
.interviewcell .box a .sub { font-size: 100%; color: #fff; margin-top: 1vw;}
.interviewcell .box .bg { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%;}
.interviewcell .box .bg img { width: 100%; height: 100%; object-fit: cover;}


.recruitlist { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 5vw;}
.recruitlist p { background: #7FC948; color: #fff; font-size: 160%; padding: 0.5vw 2vw; margin: 0 2vw 2vw 0; border-radius: 40px; text-align: center; box-shadow: 0 3px 6px rgba(0,0,0,0.16); font-weight: bold;}
.recruitlist p.bgnone { background: none; color: #6EA744; margin: 0 2vw 2vw 2vw; box-shadow: none;}

.casecell { display: flex; flex-wrap: wrap; margin: 7vw 0 0;}
.casecell .box { position: relative; width: 48.5%; background: #fff; padding: 4vw 2vw 4vw; border-radius: 54px; margin: 0 3% 5vw 0;}
.casecell .box:nth-of-type(2n) { margin: 0 0% 5vw 0;}
.casecell .box .icon { position: absolute; z-index: 2; top: -30px; left: -15px; width: 6vw;}
.casecell .box .icon img { width: 100%;}
.casecell .box .icon p { position: absolute; top: 55%; left: 45%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); font-size: 95%; font-weight: bold; color: #fff;}
.casecell .box .ttl { font-size: 160%; font-weight: bold; color: #6EA744; margin-bottom: 2vw; text-align: center; display: block;}
.casecell .box .salarycell { background: #59C664; padding: 2vw 2vw 3vw; margin-bottom: 1.5vw; color: #fff; border-radius: 30px;}
.casecell .box:nth-of-type(2) .salarycell, .casecell .box:nth-of-type(3) .salarycell { background: #89C935;}
.casecell .box .salarycell .total { text-align: center; font-size: 160%; font-weight: bold; margin-bottom: 1vw;}
.casecell .box .salarycell .scell { display: flex; align-items: flex-end; justify-content: center; background: url(https://kuroyan.co.jp/system_panel/uploads/images/kira01.png) no-repeat top left, url(https://kuroyan.co.jp/system_panel/uploads/images/kira02.png) no-repeat bottom right; background-size: 45px 42px, 42px 46px; padding: 0 3vw;}
.casecell .box .salarycell .scell p { font-weight: bold; line-height: 1;}
.casecell .box .salarycell .scell p:nth-child(1) { font-size: 140%; margin-right: 1vw;}
.casecell .box .salarycell .scell p:nth-child(2) { font-size: 420%;}
.casecell .box .salarycell .scell p:nth-child(3) { font-size: 140%; margin-left: 1vw;}
.casecell .box .detail { font-size: 120%;}


.staff { display: flex; flex-wrap: wrap;}
.staff .staffcell { width: 32%; margin: 0 2% 3vw 0; background: #fff;}
.staff .staffcell:nth-of-type(3n) { margin-right: 0;}
.staff .staffcell img { width: 100%;}
.staff .staffcell .staffcell_txt { padding: 1vw;}
.staff .staffcell p.name { font-size: 100%; font-weight: bold; margin-bottom: 0.3vw; letter-spacing: -0.1rem;}
.staff .staffcell p.job { font-size: 90%; margin-bottom: 1.5vw;}
.staff .staffcell p.comment { font-size: 90%; padding: 1vw; background: #F5F4F4; margin-bottom: 1vw;}
.staff .staffcell p.message { font-size: 100%; margin-bottom: 2vw; min-height: 10em;}

.staff.index { display: block; margin: 0 auto 2vw; width: 95%; overflow: visible;}
.staff.index .staffcell { width: 20%; margin: 0 1vw 0 0; background: #fff;}
.staff.index .staffcell:nth-of-type(3n) { margin-right: 1vw;}
.staff.index .staffcell a { display: none;}

.txt_lead { text-align: center; font-size: 160%; margin: 0 auto 3vw;}
.txt_underline {background:linear-gradient(transparent 60%, #EEFF6A 60%); text-align: center; font-weight: bold; font-size: 160%; display: inline;}
.txt_bg_gry { background: #EBEBEB; padding: 2vw;}
.txt_bg_wht { background: #fff; padding: 2vw;}

.mg0 { margin: 0 auto; text-align: center;}
.mb10 { margin-bottom:10vw;}
}

.featureBoxfadeUp { animation-name:fadeUpAnime; animation-duration:1s; animation-fill-mode:forwards; }
@keyframes fadeUpAnime{
  from { opacity: 0; transform: translateY(1vw); }
  to { opacity: 1; transform: translateY(0); }
}

/* gjs-dashed */
.gjs-dashed .loading { display: none!important; opacity: 0!important; z-index: -100!important;  }
.gjs-dashed * {padding: 20px!important;}
.gjs-dashed .header { opacity: 1!important; top: 0!important;}
.gjs-dashed .header * {padding: 0px!important;}
.gjs-dashed .spnavi { top: 0; width: 50vw; right: 0; margin: 0; padding-top: 5vw; }
.gjs-dashed .spnavi a { width: auto; margin: 0!important; padding: 5px!important;}
.gjs-dashed .spnavi a p { margin: 0!important; padding: 0!important;}
.gjs-dashed .kv {width: 100%; height: max-content;}
.gjs-dashed .kv .s_cell {width: 100%; height: 60vw;}
.gjs-dashed .kv .txt {width: 100%; height: 50vw;}
.gjs-dashed .kv .txt .en {width: 10vw;}
.gjs-dashed .kv .txt .btn * { font-size: 1vw!important;}
.gjs-dashed .under_ {height: auto; display: block; overflow: visible;position: relative;}
.gjs-dashed .interviewkv {height: auto; display: block; overflow: visible;position: relative;}
.gjs-dashed .slide { position: relative; height: auto!important;}
.gjs-dashed .indexsec1 .txtbox {left: 0!important; width: max-content; height: max-content;}

.gjs-dashed .interviewcell { display: flex; flex-wrap: wrap;}
.gjs-dashed .interviewcell .box { width: 48.5%; height: 40vw; margin: 0 3% 2vw 0; position: relative; overflow: hidden;}