@charset "utf-8";

@font-face { /* IE用 */
    font-family: 'Sawarabi Gothic';
    src: url('../img/SawarabiGothic-Regular.woff');
}
body,.font_sans-serif{font-family: 'Sawarabi Gothic', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important;}
/* CSS Document */

/***　全ページ　***/

html{font-size:100%;}
body{-webkit-text-size-adjust: 100%;}

#page-top{
	width: 80px;
	height: 100px;
	right: 20px;
}
#page-top:hover{
	-webkit-transform: translateY(-5px);
	-ms-transform: translateY(-5px);
	transform: translateY(-5px);
}
.tags{top: 150px}
.tags a:hover{transform: translateX(-20px)}
.linkStyle{transition: 0.5s;color: #549917}
.linkStyle:hover{opacity: 0.7}

.shadow-h{text-shadow: 0 0 5px rgba(0,0,0,0.2)}

#contents1.bg_size-contain::before,#intro::after,#top_contact::after,#top_gallery::before,#contents2 .con2_box h3::before,.more a::before,.more a::after,#page_title::after,#cate_list li.cate_select::before,.cate_title span::before,#page2 .cate_txt1::before,#page2 .box_title1::before,#page4 .box_txt1::before,#page5 .box_txt1::after,#page3 .cate_txt1::before,#page3 .cate_box::before{
	position: absolute;
	content: "";
	display: block;
	pointer-events: none
}

#loadingBg{z-index: 102}
#loading .logo{width: 100px}

.hvr_trans{transition: 0.3s;}
.hvr_trans:hover{transform: translateY(-5px)}

/***　ヘッダー　***/

header{z-index: 10;}
header.scrollheader{
	background-color: rgba(255,161,49,0.9);
	padding: 0
}
header.scrollheader #header{
	top: 0;
	border: none;
}
#logo img{width: 240px}

#pc_nav a{box-sizing: border-box}
#pc_nav a:hover{background-color: rgba(255,255,255,0.2)}

header .menu_stick{
	z-index: 12;
	height: 60px;
	width: 40px
}
header .menu_stick span,header .menu_stick span::before,header .menu_stick span::after{
	height: 2px;
	background-color: #fff;
	transition: 0.3s
}
header .menu_stick span::before,header .menu_stick span::after{
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	left: 0;
	right: 0
}
header .menu_stick span::before{top: -10px}
header .menu_stick span::after{bottom: -10px}
header .menu_stick.stick_trans span::before,header .menu_stick.stick_trans span::after{
	top: 0;
	bottom: 0;
	margin: auto;
	background-color: #549917
}
header .menu_stick.stick_trans span{background-color: transparent}
header .menu_stick.stick_trans span::before{transform: rotate(225deg)}
header .menu_stick.stick_trans span::after{transform: rotate(-225deg)}
header #sp_nav{
	z-index: 11;
	left: 0;
	top: 0;
	box-sizing: border-box;
	overflow-y: scroll;
}
header #sp_nav ul{box-sizing: border-box}
header .tel_bt img{width: 250px}

/***　フッター　***/

footer{background-image: url(../img/bg_img.png)}
#copyright{background-color: rgba(255,255,255,0.1)}

/***　index　***/

.more a .hvr_more{
	top: 0;
	left: 0
}
.more a:hover .hvr_more{opacity: 1}
.more a::before{
	width: 60px;
	height: 2px;
	background-color: #549917;
	top: 0;
	bottom: 0;
	right: 10px;
	margin: auto;
	transition: 0.3s
}
.more a::after{
	width: 14px;
	height: 14px;
	border-top: solid 2px #549917;
	border-right: solid 2px #549917;
	top: 0;
	bottom: 0;
	right: 11px;
	margin: auto;
	transform: rotate(45deg);
	transition: 0.3s
}
.more a:hover::before{
	width: 70px;
	right: 0;
}
.more a:hover::after{
	right: 1px;
}

.fadein{
	opacity: 0;
	transform: translateY(20px);
	transition: 0.3s
}
.fadein.scrollin{
	opacity: 1;
	transform: translateY(0);
}

#video .recruit_img{
	top: 15%;
	right: 5%;
	z-index: 2
}
#video{position: relative;z-index: -1}
#video::after{
	display: block;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url("../img/dot.png");
	z-index: 1
}
#contents1.bg_size-contain a{top: -50px}
#contents1.bg_size-contain a:hover{transform: scale(1.05,1.05)}
#contents1.bg_size-contain .bg_circle{left: 0;right: 0;margin: auto}
#contents1.bg_size-contain{background-image: url(../img/con1_bg.png)}
#contents1.bg_size-contain::before{
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	background-image: url(../img/con1_bg.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top left;
	transform: rotate(180deg);
}

#intro .intro_bg{background-color: rgba(255,161,49,0.7);}
#intro::after{
	width: 100%;
	height: 100px;
	left: 0;
	bottom: -1px;
	background-image: url(../img/design1.png);
	background-repeat: no-repeat;
	background-size: 100% 100%
}
#intro .intro_title span{background: linear-gradient(transparent 50%, rgba(255,235,51,0.4) 50%);}

#contents2 .fadein{
	opacity: 1;
	transform: none;
}
#contents2 .width_1280-max{padding-left: 250px}
#contents2 .fadein .con2_box_item{
	opacity: 0;
	transform: translateY(20px);
	transition: 0.3s
}
#contents2 .fadein.scrollin .con2_box_item{
	opacity: 1;
	transform: translateY(0);
}
#contents2 .con2_icon{
	top: 0;
	bottom: 0;
	left: 20px;
	margin: auto;
	width: 126px;
	height: 126px;
}
#contents2 .con2_icon .posi_abs{
	top: 0;
	left: 0
}
#contents2 .fadein.scrollin .con2_icon img{
	opacity: 0;
}
#contents2 .fadein.scrollin .con2_icon .posi_abs{
	opacity: 1;
	transform: scale(1.08,1.08)
}
#contents2 .con2_box:nth-of-type(even) .con2_icon{
	transform: rotateY(180deg);
	left: 140px
}
#contents2 .con2_icon span{width: 6px;height: 6px;background-color: #eee;display: block;position: absolute;transition: 0.3s}
#contents2 .con2_icon span:nth-of-type(1){left: 60px;bottom: -15px}
#contents2 .con2_icon span:nth-of-type(2){left: 60px;bottom: -30px}
#contents2 .con2_icon span:nth-of-type(3){left: 60px;bottom: -45px}
#contents2 .con2_icon span:nth-of-type(4){left: 75px;bottom: -45px}
#contents2 .con2_icon span:nth-of-type(5){left: 90px;bottom: -45px}
#contents2 .con2_icon span:nth-of-type(6){left: 105px;bottom: -45px}
#contents2 .con2_icon span:nth-of-type(7){left: 120px;bottom: -45px}
#contents2 .con2_icon span:nth-of-type(8){left: 135px;bottom: -45px}
#contents2 .con2_icon span:nth-of-type(9){left: 150px;bottom: -45px}
#contents2 .con2_icon span:nth-of-type(10){left: 165px;bottom: -45px}
#contents2 .con2_icon span:nth-of-type(11){left: 180px;bottom: -45px}
#contents2 .con2_icon span:nth-of-type(12){left: 180px;bottom: -60px}
#contents2 .con2_icon span:nth-of-type(13){left: 180px;bottom: -75px}
#contents2 .con2_box{
	height: 200px
}
#contents2 .con2_box:nth-of-type(1){background-image: url(../img/con2_bg1.jpg)}
#contents2 .con2_box:nth-of-type(2){background-image: url(../img/con2_bg2.jpg)}
#contents2 .con2_box:nth-of-type(3){background-image: url(../img/con2_bg3.jpg)}
#contents2 .con2_box:nth-of-type(4){background-image: url(../img/con2_bg4.jpg)}
#contents2 .con2_box h3::before{
	width: 40px;
	height: 40px;
	left: 0;
	bottom: 8px;
	background-size: contain;
	background-repeat: no-repeat
}
#contents2 .con2_box:nth-of-type(1) h3::before{background-image: url(../img/con2_n1.png)}
#contents2 .con2_box:nth-of-type(2) h3::before{background-image: url(../img/con2_n2.png)}
#contents2 .con2_box:nth-of-type(3) h3::before{background-image: url(../img/con2_n3.png)}
#contents2 .con2_box:nth-of-type(4) h3::before{background-image: url(../img/con2_n4.png)}

#top_gallery::before{
	width: 100%;
	top: 80px;
	bottom: 50px;
	background-color: #f4f4f4;
	left: 0;
	z-index: -1
}

#top_contact::after{
	width: 100%;
	height: 100px;
	left: 0;
	top: -1px;
	background-image: url(../img/design2.png);
	background-repeat: no-repeat;
	background-size: 100% 100%
}
#top_contact{background-image: url(../img/bg_img.png)}
#top_contact .top_contact_bt:hover{background-color: rgba(255,255,255,0.1)}

#top_info .box_wrap{left: -20px}
.gmnoprint,.gm-control-active{display: none}

/***　page_title　***/

#page_title{background-image: url(../img/bg_img.png)}
#page_title::after{
	width: 100%;
	height: 100px;
	left: 0;
	bottom: -1px;
	background-image: url(../img/design3.png);
	background-repeat: no-repeat;
	background-size: 100% 100%
}

#cate_list li a:hover{transform: translateY(-5px)}
#cate_list li.cate_select a,#cate_list li.cate_select a:hover{
	background-color: #549917;
	color: #fff;
	transform: translateY(-5px)
}
#cate_list li.cate_select::before{
	width: 0;
	height: 0;
	border-left: solid 7px transparent;
	border-top: solid 7px #549917;
	border-right: solid 7px transparent;
	right: 0;
	left: 0;
	bottom: -7px;
	margin: auto;
	transform: translateY(-5px)
}

.cate_title span::before{
	width: 100%;
	height: 10px;
	background-image: url(../img/border.png);
	background-size: contain;
	background-position: left;
	bottom: 0;
}

/***　page2　***/

#page2 .cate_txt1::before{
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 5px;
	left: 5px;
	background-color: #f4f4f4;
	border: solid 2px #f4f4f4
}
#page2 .box_title1{left: -12px;}
#page2 .cate_box:nth-child(odd){float: left}
#page2 .cate_box:nth-child(even){float: right}
#page2 .box_title1::before{
	width: 100%;
	height: 100%;
	top: 5px;
	left: 5px;
	background-color: #f4f4f4;
	z-index: -1
}

/***　page3　***/

#page3 .cate_txt1::before{
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url(../img/bg_img2.png);
	z-index: -1
}
#page3 .cate_box::before{
	width: 100%;
	height: 100%;
	top: 5px;
	left: 5px;
	border: solid 2px #f4f4f4;
	background-color: #f4f4f4;
	z-index: -1
}

/***　page4 / page5　***/

#page4 .box_txt1::before,#page5 .box_txt1::after{
	width: calc(100% + 2px);
	height: calc(100% + 7px);
	top: 0;
	left: 5px;
	background-image: url(../img/bg_img2.png);
	z-index: -1
}

/***　page6　***/

#page6 .box_img1{transition-property: transform}

/***　page7　***/

#page7 #map{height: 400px}
.gmnoprint,.gm-control-active{display: none}

/***　page8　***/

#page8 #form_bt input{
	cursor: pointer;
	-webkit-appearance: none;
	padding-left: 25px;
}
#page8 #form_bt input:hover{
	transform: translateY(-5px)
}
#page8 input[type="text"]{border-bottom: solid 1px transparent;}
#page8 input[type="text"]:focus{
	background-color: transparent;
	border-bottom: solid 1px #ffa131;
	outline: none;
}
#page8 textarea{border: solid 1px transparent;}
#page8 textarea:focus{
	background-color: transparent;
	border: solid 1px #ffa131;
	outline: none
}

/***　page10　***/

#page10 a:hover{
	transform: translateY(-5px)
}


.transrotate{
	transform-origin: center;
	animation: transrotate 0.7s linear infinite;
}
@keyframes transrotate{
	0%	{transform: rotate(0deg)}
	100%{transform: rotate(22.5deg)}
}

/***　IE対処　***/

@media all and (-ms-high-contrast:none) {
}

/* 文字間隔 */
/* default 1px */
.letter_0{letter-spacing: 0;}
.letter_1{letter-spacing: 0.11em;}
.letter_2{letter-spacing: 0.12em;}
.letter_3{letter-spacing: 0.13em;}
.letter_4{letter-spacing: 0.14em;}
.letter_5{letter-spacing: 0.15em;}
.letter_6{letter-spacing: 0.16em;}
.letter_7{letter-spacing: 0.17em;}
.letter_8{letter-spacing: 0.18em;}
.letter_9{letter-spacing: 0.19em;}
.letter_10{letter-spacing: 0.20em;}

.float_right{
	float: right
}
.float_left{
	float: left
}
.float_clear{
	float: none
}
.clearfix::after{
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
	height:0;
}
/*ここからタブレット用（780px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 768px){
	
header{min-width: auto;}
header.scrollheader{padding: 0 20px}
	
#video{height: 100vw!important}

#contents1.bg_size-contain .fadein{
	opacity: 1;
	transform: translateY(0);
}
#contents1.bg_size-contain a:hover{transform: none}
#intro::after,#page_title::after{height: 50px;}
#contents2 .con2_icon{
	padding-bottom: 25px
}
#contents2 .width_1280-max{padding-left: 200px}
#contents2 .con2_box{height: 250px;}
#top_contact::after{height: 50px;}
#top_gallery::before{
	top: 60px;
	bottom: 25px;
}
#cate_list li.cate_select a,#cate_list li.cate_select a:hover,#cate_list li.cate_select::before{transform: translateY(0);}
#cate_list li a:hover{
	background-color: #F2F2F2;
	transform: translateY(0);
	color: #333
}

/* 文字間隔 */
/* default 1px */
.letter_0_tb{letter-spacing: 0;}
.letter_1_tb{letter-spacing: 0.11em;}
.letter_2_tb{letter-spacing: 0.12em;}
.letter_3_tb{letter-spacing: 0.13em;}
.letter_4_tb{letter-spacing: 0.14em;}
.letter_5_tb{letter-spacing: 0.15em;}
.letter_6_tb{letter-spacing: 0.16em;}
.letter_7_tb{letter-spacing: 0.17em;}
.letter_8_tb{letter-spacing: 0.18em;}
.letter_9_tb{letter-spacing: 0.19em;}
.letter_10_tb{letter-spacing: 0.20em;}

.float_right_tb{
	float: right
}
.float_left_tb{
	float: left
}
.float_clear_tb{
	float: none
}
.clearfix_tb::after{
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
	height:0;
}
}

/*ここからスマホ用（750px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 667px){
	
#page-top{
	width: 64px;
	height: 80px;
}
	
#map{height: 400px}
#logo img{width: 180px}
#video .recruit_img{
	top: auto;
	bottom: 0;
	right: 0
}
#contents1.bg_size-contain a{top: 0}
#contents2 .width_1280-max{padding-left: 20px}
#contents2 .con2_icon{display: none}
#contents2 .con2_box{height: auto}
#contents2 .con2_box{background: none!important}
	
#top_gallery .cate_box:last-child{display: none}
#top_info .clearfix{padding-top: 400px}

/* 文字間隔 */
/* default 1px */
.letter_0_sp{letter-spacing: 0;}
.letter_1_sp{letter-spacing: 0.11em;}
.letter_2_sp{letter-spacing: 0.12em;}
.letter_3_sp{letter-spacing: 0.13em;}
.letter_4_sp{letter-spacing: 0.14em;}
.letter_5_sp{letter-spacing: 0.15em;}
.letter_6_sp{letter-spacing: 0.16em;}
.letter_7_sp{letter-spacing: 0.17em;}
.letter_8_sp{letter-spacing: 0.18em;}
.letter_9_sp{letter-spacing: 0.19em;}
.letter_10_sp{letter-spacing: 0.20em;}

.float_right_sp{
	float: right
}
.float_left_sp{
	float: left
}
.float_clear_sp{
	float: none
}
.clearfix_sp::after{
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
	height:0;
}
}