@charset "utf-8";

:root{
--full-width:calc(100vw - 10px);
}

#global{
margin-bottom: 0;
}

/*/--------------------------------------------------------------------------/*/
/* ===== CLEARFIX ===== */
/*/--------------------------------------------------------------------------/*/

section .slides:after,
#pickup2 .merit ol:after,
#pickup2 .merit:after{
content:"";
display:block;
clear:both;
}


/*/--------------------------------------------------------------------------/*/
/* ===== SECTION ===== */
/*/--------------------------------------------------------------------------/*/

section{
position: relative;
}

section #mv{
height: 300px;
font-family:"游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic ProN","メイリオ", Meiryo,  Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
margin-bottom: 30px;
}

section #mv > div{
display: flex;
align-items: center;
background-image: url("../images/home/mv-bg-01.webp");
background-repeat: no-repeat;
background-position: right;
background-color: #fff;
max-width: 1000px;
height: 100%;
margin: auto;
}

section #mv h1{
max-width: 980px;
margin: 0;
padding:0;
line-height: 1.4;
font-weight: bold;
font-size: 206.25%;
text-align: justify;
letter-spacing: 0.05em;
}

section #mv > div > div{
display: flex;
flex-direction: row-reverse;
align-items: center;
background-color: #fffc;
width: 55%;
padding:1em;
margin:1em 0 0 1em;
box-shadow: 6px 6px 3px #0002;
}

section #mv > div > div > div:not(.soukiwari) h2{
position: relative;
color: #e00;
border: none;
margin: 0 0 0.5rem 1.5rem;
line-height: 1.1;
padding: 0;
font-family:"游ゴシック体 Bold", "YuGothic Bold", "游ゴシック Bold", "Yu Gothic Bold", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic ProN","メイリオ", Meiryo,  Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 1.675em;
font-weight: 900;
text-align:left;
filter: drop-shadow(3px 2px 0 #fff);
}

section #mv p{
color: #000;
margin: 0 0 0 1.5rem;
padding: 0;
line-height: 1.6;
font-size: 1em;
font-family:"游ゴシック体 Bold", "YuGothic Bold", "游ゴシック Bold", "Yu Gothic Bold", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic ProN","メイリオ", Meiryo,  Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-weight: 900;
text-align: justify;
filter: drop-shadow(3px 2px 0 #fff);
}

section #mv > div > div > div{
font-weight: bold;
text-align:center;
line-height: 1;
font-size: 1.125em;
}

section #mv > div > div > div:not(.soukiwari) span:first-child{
display: inline-block;
overflow: hidden;
border-radius: 50%;
width: 115px;
height: 115px;
margin-bottom: 0.4em;
vertical-align: top;
}

section #mv > div > div > .soukiwari{
width: 100%;
text-align: left;
}

section #mv .soukiwari h2{
border: none;
margin: 0 0 2% 0;
padding: 0;
font-size: 111.25%;
}

section #mv .soukiwari h2 span{
display: inline-block;
box-sizing: border-box;
border: none;
width: 48%;
padding:0.5em 1em 0.3em 1em;
text-align: center
}

section #mv .soukiwari h2 span:first-child{
background-color: #000;
color: #fff;
border: 3px solid #000;
border-radius: 7px;
margin-right: 4%;
font-weight: bold;
}

section #mv .soukiwari h2 span:last-child{
background-color: #ff0;
color: #f00;
border: 3px solid #f00;
border-radius: 7px;
font-weight: bold;
}

section #mv .soukiwari p{
margin-left: 0;
font-weight: normal;
}

section #mv .soukiwari p span{
font-size: 1.2em;
font-weight: bold;
}

section #mv .soukiwari p small{
font-size:70%;
}

section #mv .soukiwari > div{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top: 0.3em;
}

section #mv .soukiwari > div p{
line-height: 1.5;
filter: drop-shadow(0 0 0 #fff);
white-space: nowrap;
}

section #mv .soukiwari > div p:first-child{
display: flex;
justify-content: center;
align-items: center;
background-color: #ff0;
color: #000;
border: 3px solid #f00;
border-radius: 7px;
padding: 0 0.5em;
line-height: 1.2;
font-weight: bold;
text-align: center;
}

section #mv .soukiwari > div p:last-child{
display: flex;
justify-content: center;
align-items: center;
padding:0.8em 0 0 0; 
line-height: 1.6;
font-weight: bold;
font-size: 75%;
}

section .jobnet{
display: flex;
flex-wrap: wrap;
align-items: center;
border: 1px solid #ddd;
margin-bottom: 30px;
padding: 20px;
}

section .jobnet div{
width: 50%;
}

section .jobnet div img{
border-radius: 4px;
width: 100%;
}

section .jobnet div:last-child{
box-sizing: border-box;
padding-left: 20px;
}

section .jobnet div p{
margin: 0;
font-size: 112.5%;
font-weight: bold;
text-align: justify;
}

section .jobnet div p:first-child{
background-color: #f00;
color: #fff;
border-radius: 4px;
padding: 0.3em 0;
margin-bottom: 0.8em;
font-size: 125%;
text-align: center;
}

section .jobnet div p:last-child{
margin-top: 0.9em;
text-align: center;
}

section .jobnet div p:last-child a{
position: relative;
display: inline-block;
border-radius: 4px;
padding: 0.3em 0.6em;
}

section .jobnet div p:last-child a:link,
section .jobnet div p:last-child a:visited{
background-color: #015;
color: #fff;
}

@media screen and (max-width: 1030px) {

section #mv{
width:100%;
margin: 0;
}

}


@media screen and (max-width: 600px) {

section #mv{
height: 110vw;
}

section #mv > div{
display: flex;
flex-direction: column;
justify-content: flex-end;
background-position: right 10% bottom;
background-size: auto 120vw;
}

section #mv h1{
padding: 3vw;
}

section #mv img{
max-width: 100%;
}

section #mv > div > div{
width: auto;
margin: 0 3vw 3vw 3vw;
padding: 3vw;
}

section #mv h2{
margin-left: 3vw;
font-size: 4.2vw;
}

section #mv p{
margin-left: 3vw;
font-size: 3vw;
}

section #mv > div > div > div{
font-size: 3vw;
}

section #mv > div > div > div span:first-child{
width:23vw;
height: 23vw;
}

section #mv .soukiwari h2{
display: flex;
justify-content: space-between;
font-size: 3.8vw;
}

section #mv .soukiwari h2 span{
display: inline-block;
box-sizing: border-box;
border: none;
padding:0.5em 1em 0.3em 1em;
text-align: center
}

section #mv .soukiwari h2 span:first-child{
margin-right: 0;
width: 49%;
height: auto;
}

section #mv .soukiwari h2 span:last-child{
width: 49%;
height: auto;
}

section #mv .soukiwari h2 + p{
font-size: 4.2vw;
text-align: center;
}

section #mv .soukiwari p{
margin-left: 0;
font-weight: normal;
}

section #mv .soukiwari p span{
font-size: 1em;
font-weight: bold;
}

section #mv .soukiwari p small{
font-size:70%;
}

section #mv .soukiwari > div{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top: 0.3em;
}

section #mv .soukiwari > div p{
font-size: 3.5vw;
}
section #mv .soukiwari > div p:last-child{
display: block;
width: 100%;
padding-top: 0.3em;
text-align: center;
font-size: 4.2vw;
letter-spacing: 0.1em;
}

section #mv .soukiwari > div p:last-child br{
display: none;
}

section .jobnet{
margin: 30px 0;
padding: 20px;
}

section .jobnet div{
width: 100%;
}

section .jobnet div:last-child{
padding-left: 0;
}

section .jobnet div p{
font-size: 4vw;
}

section .jobnet div p:first-child{
font-size: 5vw;
}



}


section .left_col{
width:49%;
}

section .topics{
border-top:3px solid #3498DB;
width:100%;
}

section .topics h2{
color:#3498DB;
border:none;
width:auto;
padding:0 0 0 10px;
margin:0;
line-height:2.8461;
font-size:81.25%;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
}

section .topics dl{
border:5px solid #BDC3C7;
overflow:auto;
height: 388px;
padding:10px;
margin:0;
line-height:1.4;
font-size:15px;
}

section .topics dl.sample{
}

section .topics dt{
font-weight:bold;
}

section .topics dd{
border-bottom:1px dotted #BDC3C7;
padding:0 0 8px 1em;
margin:0 0 10px 0;
}

section .topics dd:last-child{
border:none;
margin:0;
}

@media screen and (max-width: 500px) {

section .left_col{
width:100%;
}

section .topics{
border-top:3px solid #3498DB;
width:100%;
}

section .topics h2{
width: 100%;
font-size:18px;
box-sizing: border-box;
}

section .topics dl{
width: 100%;
box-sizing: border-box;
}

}

/*/--------------------------------------------------------------------------/*/
/* ===== TOKUBETSU ===== */
/*/--------------------------------------------------------------------------/*/


#pickup2{
width:1000px;
margin:0 auto;
}

#pickup2 .merit{
background:#50AF15;
width:978px;
padding:6px 11px 11px 11px;
margin:0 0 20px 0;
}

#pickup2 .merit h2{
float:left;
width:193px;
height:58px;
padding:0 7px 0 0;
margin:0;
}

#pickup2 .merit ol{
float:left;
width:778px;
list-style:none;
}

#pickup2 .merit li{
float:left;
overflow:hidden;
background:#EDF7E7 url(../images/common/merit-li-bg.gif);
width:254px;
line-height:1.3;
font-size:75%;
font-weight:bold;
}

#pickup2 .merit li.li1 span{
}

#pickup2 .merit li.li2 span{
}
#pickup2 .merit li.li3 span{
}

#pickup2 .merit li.li2{
margin:0 8px;
}

#pickup2 .merit li span{
display:inline-block;
background:#FFF;
border:1px solid #DDD;
margin:7px 7px 7px 14px;
padding:6px 10px;
}

@media screen and (max-width: 500px) {

#pickup2{
width:100%;
}

#pickup2 .merit{
background:#50AF15;
width:100%;
padding:10px;
margin:0;
box-sizing: border-box;
}

#pickup2 .merit h2{
float:none;
width:50%;
height:auto;
padding:20px 0;
margin: 0 auto;
}
	
#pickup2 .merit h2 img{
	width: 100%;
}

#pickup2 .merit li{
float:none;
background:#EDF7E7 none;
width: calc(100% - 16px);
height: auto !important;
padding: 10px;
margin-bottom: 20px;
margin-left: 10px;
overflow: inherit;
box-sizing: border-box;
}

#pickup2 .merit li.li2{
margin:0 0 20px 10px;
}

#pickup2 .merit li.li3{
margin-bottom: 10px;
}

#pickup2 .merit li img{
width: 50%;
transform: translate(-14px, -14px)
}

#pickup2 .merit li span{
font-size: 14px;
line-height: 1.5;
font-weight: 400;
width: 100%;
height: auto !important;
padding: 10px;
margin: 0;
box-sizing: border-box;
}

#pickup2 .merit ol{
float:none;
width:100%;
}

}

/* ===== TOKUBETSU ===== */

#pickup .tokubetsu{
background:#50AF15;
}

#pickup .tokubetsu p{
background:#E8F5D9;
color:#409F08;
}

#pickup .tokubetsu a{
width:156px;
}

#pickup .tokubetsu h3 a:link,
#pickup .tokubetsu h3 a:visited{
color:#F83F34;
width:auto;
text-decoration:none;
}

section #pickup .tokubetsu h3 a:hover{
text-decoration:none;
}

#pickup .tokubetsu .kenchiku a:link,
#pickup .tokubetsu .kenchiku a:visited{
background-color:#E74C3C;
}
#pickup .tokubetsu .kenchiku a:hover{
background-color:#B71C0C;
}

#pickup .tokubetsu .denki a:link,
#pickup .tokubetsu .denki a:visited{
background-color:#2055A8;
}
#pickup .tokubetsu .denki a:hover{
background-color:#103588;
}

#pickup .tokubetsu .doboku a:link,
#pickup .tokubetsu .doboku a:visited{
background-color:#815E2C;
}
#pickup .tokubetsu .doboku a:hover{
background-color:#613E0C;
}

/***/
#pickup .right_col{
width:978px;
}


#pickup .tokubetsu a{
width:326px;
}

#pickup .right_col ul{
font-size:100%;
}

/***/

#pickup .tokubetsu{
background:#F90;
}

#pickup .tokubetsu h2{
padding:7px 0 3px 0;
}

#pickup .tokubetsu p{
background:#FDF8ED;
color:#409F08;
}


#pickup .tokubetsu div{
float:left;
background:#FDF8ED;
width:376px;
padding:10px 0 10px 10px;
}

#pickup .tokubetsu h3{
color:#F83F34;
padding:0 5px 3px 10px;
margin:-5px 0 0 0;
font-size:212.75%;
line-height:1.2;
text-align:center;
}

#pickup .tokubetsu h3 img{
vertical-align:bottom;
}

#pickup .tokubetsu h3 span{
font-size:87.5%;
}

#pickup .tokubetsu h3 span,
#pickup .tokubetsu h3 small{
color:#434343;
}

#pickup .tokubetsu div p{
margin:0;
padding:0 7px 0 8px;
line-height:1.7;
font-size:106.25%;
text-align:center;
}
#pickup .tokubetsu div p.txt2{
color:#434343;
margin:0;
font-size:93.75%;
}

#pickup .tokubetsu div p a img{
padding-top:5px;
}

#pickup .tokubetsu ul{
clear:both;
padding-top:11px;
}

#pickup .tokubetsu p.pht1,
#pickup .tokubetsu p.pht2{
float:left;
height:160px;
margin:0;
}

#pickup .tokubetsu p.text{
float:left;
padding:10px 10px 10px 0;
margin:0;
}

#pickup .tokubetsu p.pht1{
padding:10px 10px 10px 0;
}

#pickup .tokubetsu p.pht2{
padding:10px 10px 10px 0;
}

/*-- 2022.11.22 top_slide --*/

#pickup .tokubetsu .top_slide{
float: inherit;
width: 100%;
padding: 0 10px;
box-sizing: border-box;
position: relative;
overflow: hidden;
}

#pickup .tokubetsu .top_slide ul{
padding-top: 0;
}

#pickup .tokubetsu .top_slide li{
}

#pickup .tokubetsu .top_slide li img{
width: 100%;
filter: brightness(50%);
image-rendering: -webkit-optimize-contrast;
-webkit-backface-visibility: hidden;
}

#pickup .tokubetsu .top_slide li.swiper-slide-active img{
filter: brightness(100%);
}

#pickup .tokubetsu .top_slide .swiper-button-prev,
#pickup .tokubetsu .top_slide .swiper-button-next{
	color: #FFF;
	background-color: #333;
	width: auto;
	padding: 10px;
	margin-top: 0;
	transform: translateY(-50%);
}

#pickup .tokubetsu .top_slide .swiper-button-prev::after,
#pickup .tokubetsu .top_slide .swiper-button-next::after{
	font-size: 25px;
}

#pickup .tokubetsu .top_slide .swiper-button-prev{
	left: 17.8%;
}

#pickup .tokubetsu .top_slide .swiper-button-next{
	right: 17.8%;
}

@media screen and (max-width: 500px) {

#pickup {
padding:0 10px;
box-sizing: border-box;
}

#pickup .right_col{
width:100%;
padding: 10px;
box-sizing: border-box;
}

#pickup .tokubetsu h2{
width: 90%;
margin: 0 auto;
}

#pickup .tokubetsu h2 img{
width: 100%;
}

#pickup .tokubetsu a{
width:100%;
}

#pickup .tokubetsu div{
float:none;
width:100%;
height:auto !important;
padding:10px;
box-sizing: border-box;
}

#pickup .tokubetsu h3{
width:70%;
padding: 0;
margin:0 auto;
}

#pickup .tokubetsu h3 a:link,
#pickup .tokubetsu h3 a:visited{
width:100%;
margin:0;
}

#pickup .tokubetsu h3 img{
display: block;
width:100%;
}

#pickup .tokubetsu div p{
font-size:14px;
}

#pickup .tokubetsu p.pht1,
#pickup .tokubetsu p.pht2{
float:none;
margin:0;
}

#pickup .tokubetsu p.pht1{
transform: translateY(-1px);
}

#pickup .tokubetsu p.pht1 img{
width: 100%;
max-width: 300px;
margin: 0 auto;
}

#pickup .tokubetsu p.pht1 img:last-child{
margin: 10px auto 0;
}

#pickup .tokubetsu .top_slide .swiper-button-prev,
#pickup .tokubetsu .top_slide .swiper-button-next{
	opacity: 0.5;
}

#pickup .tokubetsu .top_slide .swiper-button-prev{
	left: 0;
}

#pickup .tokubetsu .top_slide .swiper-button-next{
	right: 0;
}

}


/*/--------------------------------------------------------------------------/*/
/* ===== RECRUIT ===== */
/*/--------------------------------------------------------------------------/*/

.recruit{
display: flex;
justify-content: center;
margin-bottom: 30px;
}

.recruit > div{
background: url(../images/home/recruit.jpg) no-repeat right bottom;
background-size: auto 70%;
border: 5px solid #ff0;
width: 100%;
}

.recruit div div:first-child{
position: relative;
background: #ff0;
padding: 0.4em 0.5em 0.2em 0.5em;
line-height: 1;
font-size: 1.9rem;
font-weight: bold;
text-align: center;
}

.recruit div div:first-child span{
position: absolute;
top: -1em;
right: -5px;
display: flex;
justify-content: center;
align-items: center;
background-color: #f00;
color: #fff;
border-radius: 50%;
width: 3em;
height: 3em;
line-height: 1;
}

.recruit p{
padding: 1em 1em 0.4em 1em;
margin: 0;
font-size: 1.4rem;
font-weight: bold;
}

.recruit div div:last-child{
padding: 0 1em 0.4em 1em;
font-size: 1.6rem;
font-weight: bold;
}

.recruit div div:last-child span{
display: inline-block;
background-color: #111;
color: #fff;
padding: 0.1em 0.6em 0 0.6em;
}

.recruit div div:last-child strong{
font-size: 1.7em;
}

@media screen and (max-width: 600px) {

.recruit > div{
background-size: auto 57%;
}


.recruit div div:first-child{
padding: 0.6em 3em 0.4em 2em;
font-size: 5vw;
}

.recruit p{
font-size: 4vw;
text-align: justify;
}

.recruit p br{
display: none;
}

.recruit div div:last-child{
text-shadow: 2px 2px 1px #fff,
-2px 2px 1px #fff,
-2px -2px 1px #fff,
2px -2px 1px #fff,
2px 2px 1px #fff;
font-size: 7vw;
}

.recruit div div:last-child span{
text-shadow: none;
}

.recruit div div:last-child strong{
font-size: 1.1em;
}

}

/*/--------------------------------------------------------------------------/*/
/* ===== TOPIC PATH ===== */
/*/--------------------------------------------------------------------------/*/

#topicpath{
clear:both;
width:auto;
padding:0;
margin:0;
}

#topicpath p{
background:transparent;
width:auto;
padding:0;
}




/*/--------------------------------------------------------------------------/*/
/* ===== SLIDER ===== */
/*/--------------------------------------------------------------------------/*/

section .slider{
position:relative;
overflow:hidden;
width:49%;
}

section .slides{
overflow:hidden;
width:100%;
margin:0;
list-style:none;
}

section .slide{
width:100%;
clear:none;
}

section .slide:first-child{
margin-bottom: 20px;
}

section .slide:last-child{
margin-top: 20px;
}

section .slide img{
width:100%;
transition: .5s;
}

section .slide:hover img{
opacity: 0.5;
}

section .slider-nav{
position:absolute;
bottom:4px;
}

.slider-nav__item {
width:10px;
height:10px;
float:left;
clear:none;
display:block;
margin:0 4px;
border:1px solid #FFF;
border-radius:6px;
}
.slider-nav__item:hover {
background: #FFF;
}
.slider-nav__item--current {
background: #FFF;
}

@media screen and (max-width: 500px) {

section .slider{
width:100%;
height:auto;
margin-top: 20px;
box-sizing: border-box;
}

section .slides{
width:100%;
height:auto;
box-sizing: border-box;
}

section .slide{
width:100%;
height:auto;
float:none;
}

section .slide img{
width:100%;
}

}


/*/--------------------------------------------------------------------------/*/
/* ===== TOP_MERIT ===== */
/*/--------------------------------------------------------------------------/*/

section .top_merit{
width:100%;
margin-bottom: 20px;
}

section .top_merit img{
width:100%;
}

section .top_merit .top_merit_link{
background-color: #EEEEEE;
width:100%;
padding: 8px 20px 20px;
box-sizing: border-box;
}

section .top_merit .top_merit_link a img{
transition: .5s;
}

section .top_merit .top_merit_link a:hover img{
opacity: 0.5;
}

@media screen and (max-width: 500px) {

section .top_merit .top_merit_link{
padding: 0 12px 30px;
}

}


/*/--------------------------------------------------------------------------/*/
/* ===== SUBSIDY ===== */
/*/--------------------------------------------------------------------------/*/

section .subsidy{
width:100%;
}

section .subsidy img{
width:100%;
transition: .5s;
}

section .left_col a img{
transition: .5s;
}

section .left_col a:hover img{
opacity: 0.5;
}

/*/--------------------------------------------------------------------------/*/
/* ===== GUIDANCE ===== */
/*/--------------------------------------------------------------------------/*/

section .guidance{
width:100%;
margin-bottom: 20px;
margin-top: 20px;
}

section .guidance.sample{
}

section .guidance img{
width:100%;
}

section .right_col a img{
transition: .5s;
}

section .right_col a:hover img{
opacity: 0.5;
}