@charset "UTF-8";
/* CSS Document */
html {-webkit-text-size-adjust:100%}
body {
	overflow-x:hidden;
	background:#111;
	/*古い構文（old Safari用）*/
	font-weight: 200;
}

/*anchor, img*/
/*a{
	-webkit-transition:all 0.5s ease-out;
	-moz-transition:all 0.5s ease-out;
	-o-transition:all 0.5s ease-out;
	transition:all 0.5s ease-out;
	overflow:hidden;}*/
img, a img {border:none;}
a img:hover {opacity:.8; filter:alpha(opacity=80)}
/*clear*/
.clearfix:after {content:''; display:table; clear:both}




/*———————————–———————————–
　　Slider
———————————–———————————–*/
.container {
	width:100%;
	display:table;
    padding-top: 90px;
}
.container .message:after{
	height:20vh;
	text-align:center; 
	box-sizing:border-box;
	padding:10px 2%;
	background:#111;
	color:#B2B2B2;
	font-size:14px;
	display:block;
	padding-top: 20px;
	/*content:"熊本地震による被災者の方々には、謹んでお見舞い申し上げますとともに、被災地の一日も早い復旧を心より祈念いたします。";*/
	border-top: 3px solid #FF7CB5;
}

#theTarget{
	height:80vh;
	position:relative;
	background:#111;
	}
#slider01 img{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: auto;
}

#theTarget #slide_box{
	top: 120px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: auto;
    max-width: 700px;
    color: #fff;
    line-height: 28px;
    text-align: left;
    position: relative;
	    padding-left: 30px;
    padding-right: 30px;
}

.target_text{
}
.target_textp{
	margin:0 auto;
}

/*———————————–———————————–
　　Slider Inner Style
———————————–———————————–*/
h2#slider_header_title{font-size:68px;padding:0 0 50px 0;    font-weight: 100;font-family:"din-condensed-web";}
h3#slider_header_txt{
	padding:0px 0 50px 0;
	font-size:28px;
	font-weight:200;}
#slider03 h2#slider_header_title,#slider03 h3#slider_header_txt{color:#fff;}
#slider04 h3#slider_header_txt{font-size:24px;padding-bottom:20px;}
#slider01,#slider02,#slider03,#slider04{width: 100%;
max-width: 768px;
height: 100%;
margin: 0 auto;
display: table;
vertical-align: middle;}

#slider01{}
#slider02{}
#slider03{}
#slider04{}
.slide_inner {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}

/*———————————–———————————–
　　Hover UndeLined
———————————–———————————–*/
.underlined{
  position: relative;
  display: inline;
  text-decoration: none;
}
.underlined::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  background-color: #fff;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
.underlined:hover::after {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}

/*———————————–———————————–
　　Subtitle (Underlined)
———————————–———————————–*/

.slide {  position: relative;  padding: 0;  width: 100%;  transform-style: inherit;}
ul#link_banner li{float:left;}


/*———————————–———————————–
　　カラム縦横中央（親子で使用）
———————————–———————————–*/
/* table 親 */
.clm{width: 100%;margin: 0 auto;overflow: hidden;display: table;}
/* table-cell 子　横並び */
.clm_cell_cntr_mddl{ text-align:center;    display: table-cell;    vertical-align: middle;}

.clm_header{    text-align: center;
    display: table-cell;
    vertical-align: middle;
    height: 300px;
    position: relative;
	}




.title{font-size:72px;font-family:"din-condensed-web"; text-align:center;    font-weight: 100;}
.subtitle_ja{
    text-align: center;
    bottom: 90px;
    font-weight: 600;
}
.title+p.subtitle_ja{
}


.clm_subheader_font{font-size:40px;font-family:"din-condensed-web",'Noto Sans Japanese',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", serif; font-weight:100; text-align:center;}
.clm_cell_txt{width:100%;max-width:1120px;    margin: 0 auto;    padding: 2% 0% 2% 0%;}

/*———————————–———————————–
　　Subtitle (Underlined)
———————————–———————————–*/
.subtitle{    text-align: center;  }

.subtitle h4{
    display: inline-block;
    position: relative;
    font-weight: bold;
    font-size: 20px;
}


/*#csr_section_3 .subtitle h4::after,*/
.boldline:after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -15px;
    border-bottom: 5px solid #333;
  }
#cst .subtitle h4::after {    border-bottom-color:#111;}
#recruit .subtitle h4::after {    border-bottom-color:#fff;}

/*———————————–———————————–
　　Scrolled Fade In
———————————–———————————–*/

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(40px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(40px); -ms-transform: translateY(40px); transform: translateY(40px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}


/*———————————–———————————–
　　Background Hover Scale Zoom
———————————–———————————–*/
.bg_scale {
    position: relative;
    overflow: hidden;
}
.bg_scale:after {
    position: absolute;
    content: "";
    display:block;
    width: 100%;
    height: 100%;
    top: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
	background-position:center center;
    -webkit-transition: all .4s ease-out;
    -moz-transition: all .4s ease-out;
    -ms-transition: all .4s ease-out;
    transition: all .4s ease-out;
}

.bg_scale:hover:after {
	opacity:.4;
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.);
}
.bg_scale .service_clm_inner,.bg_scale .csr_clm_inner{
    z-index: 1;
    position: relative;
}


/*———————————–———————————–
　　More Button
———————————–———————————–*/

.more_btn{
	    box-sizing: border-box;
    width: 200px;
    padding: 10px 70px;
    border: 1px solid;
    margin: 40px auto 50px auto;
    text-align: center;
    display: inline-block;
    background-position: 0 0;
    background-size: auto 200%;
    transition: .2s;
    position: absolute;
    bottom: 0;
    margin-left: -100px;
    left: 50%;}

#service_clm1 span.more_btn,
#service_clm2 span.more_btn,
#recruit_clm2 .more_btn{
    border-color:#fff;
    background-image: linear-gradient(rgba(255,255,255,0) 50%, rgba(255,255,255,1) 50%);
}
#news span.more_btn,
#csr span.more_btn{
	border-color:#000;
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,1) 50%);
	position: inherit;
	margin-left: 0;
	text-align: center;
}

#news span.more_btn:hover,
#csr span.more_btn:hover{
	background-position: 0 100%;
	color: #fff;
}

#service span.more_btn:hover,
#recruit_clm2 .more_btn:hover{
	background-position: 0 100%;
	color: #111;
}

/*———————————–———————————–
　　To Top Button Style
———————————–———————————–*/




#pageTop_pc{
	    position: fixed;
        bottom: 0;
	right: 40px;
	 background: #111;
	 width:100px;
	text-align:center;
	cursor:pointer;
	z-index: 1;
}

.arrow{
position: relative;
    display: inline-block;
    padding: 50px 0px 0 0;
    color: #fff;
    margin: auto;
    text-align: center;
    text-decoration: none;
    font-size: 15px;
}
.arrow::before,
.arrow::after{
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}
.arrow_style::before{
	left: 0px;
    width: 30px;
    height: 30px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
}
.arrow_style_down::before{
	left: -15px;
    width: 30px;
    height: 30px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(-225deg);
    transform: rotate(-225deg);
}


/*———————————–———————————–
　　Font Color / BG Color
———————————–———————————–*/
.bgb_txtw{background:#111;color:#fff;}
.bgb_txtw a{color:#fff;}
.bgw_txtb{background:#fff;color:#111;}
.bgw_txtb a{color:#111;}


#service{}
#recruit{}
#csr{} 
#link {
    padding-bottom: 50px;
}
#contact{
		height: 325px;
		width: 100vw;}





/*———————————–———————————–
　　OUR SERVICE 
———————————–———————————–*/
#service_clm1,#service_clm2{height:520px;width:50%;}
#service .service_clm_inner{    height: 85%;    position: relative;    width: 100%;    max-width: 320px;    margin: auto;}
.service_clm_txt{    font-size: 14px;    position: absolute;    bottom: 130px;    text-align: left; opacity:0; transition:.3s ease-in-out;}
#service_clm1:hover .service_clm_txt,#service_clm2:hover .service_clm_txt{ opacity:1;}
#service_clm1:after {background-image:url("../images/top_service_01.jpg");}
#service_clm2:after {background-image:url("../images/top_service_02.jpg");}


/*———————————–———————————–
　　NEWS
———————————–———————————–*/
#news{ }
#news .clm_header{    height: auto;    padding: 50px 0 40px 0;}
dl#news_list{margin:0 auto;max-width:768px;    text-align: left;    padding-bottom: 20px;}
dl#news_list dt{clear:left;float:left;padding: 10px 0 10px 1em; width: 7em;}
dl#news_list dd{padding: 10px 4% 10px 8.5em; box-sizing:border-box;}
#news_list{   padding-top: 0px;}

/*———————————–———————————–
　　NEWS(  index.html )
———————————–———————————–*/

/* news_release.html呼び出し */
.top_news_list{
	width:100%;
	max-width:700px;
	margin:0 auto;
	font-size:0;
}
.top_news_list li{
	height:50px;
}
.top_news_list li time{
	width:30%;
	max-width:50px;
	font-weight:bold;
	padding-right:50px;
	vertical-align:top;
}
.top_news_list li p{
	line-height:20px;
	display:inline-block;
	width:70%;
	text-align:left;
}
.top_news_list li p a{
	font-weight:bold;
}
.top_news_list li p a:hover{
	opacity:.7;
}
				

/*———————————–———————————–
　　RECRUIT
———————————–———————————–*/
#bg_recruit{background-image:url("../images/bg_sora_4.jpg"); background-repeat:no-repeat;  height: 540px;background-attachment: fixed; background-position:center bottom; background-size:cover;}
#recruit .clm + .clm>.clm_cell_txt.clm_cell_cntr_mddl{background-image:url("../images/bg_dot.png"); background-attachment: fixed;}
#recruit_clm1{ height: 400px;    width:100%;max-width:1120px;    margin: auto;    position: relative;}

#recruit_clm1 .clm_cell_txt {
    width: 100%;
    max-width: 678px;
    text-align: center;
    position: relative;
    height: 90%;
	display:table;
    padding-top: 5%;
}


#recruit_clm1 .clm_cell_txt p {
	position: absolute;
	top: 140px;
	text-align: left;
	padding:10px;
}




#recruit_page_clm3 table.tb_base{    margin: auto; text-align:left;}

/* 募集要項 */
#recruit_page h4.service_clm_head {
    font-size: 18px;
    letter-spacing: 2px;
    font-weight: 600;
    display: inline-block;
    text-align: center;
    position: relative;
}

#se_recruit h4.service_clm_head:after{ border-bottom-color:#fff;}
#web_recruit h4.service_clm_head:after{ border-bottom-color:#fff;}

#se_recruit .tb_caption,#web_recruit .tb_caption {
    display: table-cell;
    width: 100%;
    height: 300px;
    vertical-align: middle;
    text-align: center;}
#se_recruit .tb_caption{
    background: rgba(100,100,100,1.00);
}
#web_recruit .tb_caption {
    background: rgba(255,208,0,1.00);

}


ul.recruit_list{
display: block;
    text-align: left;
    margin: 0 auto;
    width: 100%;
    max-width: 800px;
	margin-bottom:80px;
	    padding: 0px 20px 0px 20px;
		font-size:0;
}

ul.recruit_list li.recruit_list_clm{	box-sizing:border-box; border-bottom:1px solid #999;}

li.list_head {
	display:inline-block;
	 padding:20px 0; 
	 width:300px;
	 vertical-align:top;
}

li.list_txt {
/*	width:100%;
	 max-width:500px;*/
	display:inline-block;
	 padding:20px 0;
}
.recruit_list li.list_head{width: 30%;}
.recruit_list li.list_txt {width: 70%;
display: inline-block;
padding: 20px 0;}

.entry_btn{ margin:32px auto 60px auto;text-align:center;display:block; border:1px solid #333; width:90%;max-width:400px; height:40px; line-height:40px; font-weight:600;}


/*———————————–———————————–
　　CSR
———————————–———————————–*/



#csr_clm1,#csr_clm2{	 padding: 2%;    width: 50%; display:table-cell;    height: 500px; vertical-align:middle;}
#csr_clm3{width:100%;}
#csr_clm1{background:url("../images/bar_festa.jpg"); background-size:cover;display: inherit;width: 100%;}
#csr_clm2{background:#fff;position:relative;}
#csr_clm3{     display: table-cell;    height: 200px;}
#csr_clm3:after {background-image:url("../images/bar_link.jpg");}
.csr_clm_inner{height:100%;}
.csr_clm_inner::before{    background-color: rgba(0,0,0,0.3);     position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;    content: ' ';z-index:-1;}
p.clm_cell_txt.fade_in.fadeInDown {    padding: 0 10% 0 10%; text-align:left; padding-top:40px;}
p.clm_cell_txt.fade_in.fadeInDown br{ display:none;}
#link .clm_header{ height:220px;}
#csr_clm3 strong a em{
    font-weight: 900;
    font-size: 25px;
    letter-spacing: 1px;}
#csr_clm3 strong {
    position: absolute;
    bottom: 20px;
    width: 100%;
}
#csr_clm3 strong a {
    display: inline-block;
    max-width: 840px;
    width: 100%;
    left: -50%;
    text-align: left;
    padding-bottom: 10px;
}
	
#csr_clm3 strong a em:after {
    content: 'オフィシャルサイトはこちら';
    font-size: 16px;
    position: absolute;
    bottom: 0px;
    right: 0;
	    text-align: right;
    width: 300px;
}
/*———————————–———————————–
　　CONTACT
———————————–———————————–*/
#contact {
    position: relative;
}
#contact > .clm {
    height: 100%;
}
#link ul#bnr_tb{    width: 100%;
    max-width: 1120px;
    display: table;
    text-align: center;
    margin: auto;
}
#link ul li.bnr_cell{
    text-align: center;
    display: table-cell;
    box-sizing: border-box;
}
#link ul li.bnr_cell a{
	display:table;
}
#link ul li.bnr_cell a img{
	box-sizing:border-box;
	padding:0 3% 0 3%;
	    width: 100%;
		max-width:300px;
}
#contact{background-image:url("../images/contact_1400.jpg");
    background-size: cover;
    background-attachment: fixed;
	background-position:center top;
	background-repeat:no-repeat;
	height:300px;}

/*———————————–———————————–
　　Footer
———————————–———————————–*/
footer{}
#footer{height: 400px;
padding: 0 2% 0 2%;
padding-bottom: 50px;}

/* footer navi */
.footer_list_title>a{    font-family: "din-condensed-web"; font-size:24px; color:#808080;}
ul#footer_list{      width: 100%;
    display: table-cell;}
ul#footer_list li{float:left; width:25%;border:none;    height: auto;}
#footer_list a:hover{ opacity:.7;}
ul#footer_list>li>ul>li{clear: both;    width: 100%;height:30px;border:none;}
#footer .clm_cell_txt{height:100%; position:relative;}

#footer ul.footer_list_inner{     margin-top: 5px;}
#footer ul.footer_list_inner li a{ font-size:12px; }
/* footer contact btn */
#footer #footer_contact_box{    display: table-cell;
    vertical-align: middle;}
span#footer_contact_btn{
    display: block;
    width: 200px;
    height: 50px;
    text-align: center;
    background:#ffba00;
    line-height: 50px;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
}
span#footer_contact_btn:hover{
	background:#ffcc4d !important;
	opacity:1 !important;
	}

/* footer logo (bottom) */
#footer_bottom {
    position: absolute;
    bottom: 40px;
}
#footer_bottom img{max-width:340px; width:100%;}
#footer_bottom ul{ display:block; font-size:0;}
#footer_bottom ul li:nth-child(1){ text-align:left;}
#footer_bottom ul li:nth-child(2) {font-size:17px;}
#footer_bottom ul li:nth-child(3) a{ font-size:12px;} 
#footer_bottom ul li{display:inline-block; width:33.3%;text-align: right;}

#copy {
    position: absolute;
    bottom: 15px;
}