@charset "utf-8";
/* CSS Document */

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

*:focus {outline:none;}
html, body{font-size: 14px;}
body{-webkit-text-size-adjust: 100%;}

.font_din, #cate_list li a::before, .linkStyle, #page03 .box_title1::before{font-family: din-2014, fot-cezanne-pron, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;font-weight: bold}

input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

#page-top{right: 20px;bottom: 150px;z-index: 5}
#page-top a{
	width: 60px;
	height: 60px;
	color: #ccc;
	padding-top: 30px;
	box-sizing: border-box
}
#page-top a::before{
	width: 15px;
	height: 15px;
	top: 10px;
	right: 0;
	left: 0;
	margin: auto;
	border-left: solid 2px #ccc;
	border-top: solid 2px #ccc;
	transform: rotate(45deg)
}

.linkStyle{transition: 0.3s;color: #999999}
.linkStyle:hover{opacity: 0.7}
textarea{overflow: auto}

.hvr_linktrans, .hvr_trans, .topic_more, .more a{transition: 0.3s;transition-property: transform}
.hvr_linktrans:hover{transform: scale(1.2,1.2)}
.hvr_trans:hover{transform: translateY(-5px)}
.topic_more:hover, .more a:hover{transform: scale(1.05,1.05)}
.fadetopic{opacity: 0;top: 20px;position: relative}
.fadein .cate_box{opacity: 0;left: 20px;position: relative}

main, footer{background-color: #fbfbfb}
#loader, #loader_index{z-index: 10;top: 0;left: 0}

.top_map{
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
}
.top_map iframe{
	margin-top: -57px;
}

#sp_nav .sp_nav_box .txt_color3::before, #page-top a::before, #top_recruit::before, #page10 a::before, .cate_title::before, .rei_list::before, #pager li.prev a::before, #pager li.next a::before, .com_cate_title::before, #page02 .box_item.grid_9 .box_title1::before, #page03 .box_title1::before,#page03 .box_title1::after, .open_close::before, .open_close::after, .checkbox-parts::before, .checkbox-parts::after{
	position: absolute;
	content: "";
	display: block;
	pointer-events: none
}

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

header .scroll_down{
	width: 20px;
	height: 20px;
	border-right: solid 2px #fbfbfb;
	border-bottom: solid 2px #fbfbfb;
	transform: rotate(45deg);
	right: 0;
	left: 0;
	bottom: 40px;
	margin: auto;
	animation: scrolldown 1.5s infinite;
}
@keyframes scrolldown{
	0%	{transform: rotate(45deg)}
	60%	{transform: rotate(45deg)}
	80%	{transform: translateY(-5px) rotate(45deg)}
	100%	{transform: rotate(45deg)}
}

#logo{width: 60px}
#logo img{
	display: block;
}
#header{
	top: 0;
	left: 0;
	z-index: 6;
	background-color: rgba(251,251,251,0.9)
}
#header.scr_header .header_bg{background-color: rgba(255,255,255,0.9);box-shadow: 0 0 20px rgba(0,0,0,0.05)}
#header .menu_stick{
	width: 45px;
	height: 45px;
	z-index: 7;
	box-sizing: border-box;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 20px;
}
#header .menu_stick span{
	height: 2px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	transition: 0.5s;
}
#header .menu_stick span:first-of-type{top: 14px}
#header .menu_stick span:last-of-type{bottom: 14px}
#header .menu_stick.stick_trans span:first-of-type,#header .menu_stick.stick_trans span:last-of-type{
	top: 0;
	bottom: 0;
	margin: auto;
}
#header .menu_stick.stick_trans span:not(:first-of-type):not(:last-of-type){background-color: transparent}
#header .menu_stick.stick_trans span:first-of-type{transform: rotate(225deg);background-color: #222}
#header .menu_stick.stick_trans span:last-of-type{transform: rotate(-225deg);background-color: #222}
#header #sp_nav{
	z-index: 6;
	left: 0;
	top: 0;
	box-sizing: border-box;
}
#sp_nav .sp_nav_box .txt_color3{position: relative}
#sp_nav .sp_nav_box .txt_color3::before{
	width: 30px;
	height: 1px;
	background-color: #999999;
	left: -50px;
	top: 10px;
	margin: auto;
}
#header #sp_nav .nav_bg{
	top: 0;
	right: 0;
	left: 0;
	cursor: pointer
}
#header #sp_nav.fade_bg_trans .nav_bg{
	right: -300px
}
#header #sp_nav sp_nav_box{
	overflow-y: auto;
}
#header #sp_nav ul.bg_white{
	top: 0;
	right: -300px;
	box-sizing: border-box;
}
#header #sp_nav.fade_bg_trans ul.bg_white{right: 0}

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

.bottom_banner{
	left:0;
	z-index: 2
}
.bottom_banner a.posi_rel{bottom: 0}
.bottom_banner a.posi_rel:hover{bottom: 10px}
.bottom_banner .contact_bt{background-color: #ff0032}
.bottom_banner .tel_bt{background-color: #00be40}
.bottom_banner .sns_bt{background-color: #464D41}
.bottom_banner .sns_bt a:hover{background-color: rgba(255,255,255,0.1)}
.bottom_banner .contact_bt img, .bottom_banner .tel_bt img{bottom: 3px}

/***　index　***/

.index_title{font-size: 60px}
.index_banner, #page_title h2{font-size: 68px}
.index_banner span, .index_sub_title span, #page_title h2 span, #page_title p span{
	position: relative;
	opacity: 0;
	left: 20px;
	display: inline-block
}
#top_topic .topic_wrap{overflow-y: scroll}
#top_topic .topic_wrap::-webkit-scrollbar{width: 8px;}
#top_topic .topic_wrap::-webkit-scrollbar-track{
	background: #fff;
	border: none;
}
#top_topic .topic_wrap::-webkit-scrollbar-thumb{
	background: #d6d23c;
	border: solid 2px #fff;
}
#top_topic .topic_box:last-child{border-bottom: none}
#top_topic .topic_more{cursor: pointer}

.index_link{height: 30vw}
.index_link .index_link_bg{
	top: 30px;
	z-index: 1
}
.index_link .index_link_bg.trans{
	top: 0;
	opacity: 1
}
.index_link .posi_center{z-index: 2}
.index_link:hover .index_link_bg.trans2{
	transform: scale(1.05,1.05);
	opacity: 0.6
}

#top_works .works_bg{top: 0;left: 0}
#top_works a:hover .works_bg{
	transform: scale(1.05,1.05);
	opacity: 0.4
}
#top_works a:hover .works_title{opacity: 1}

/***　cate_list / cate_title / pager　***/

#cate_list{counter-reset: list;}
#cate_list li{counter-increment: list;}
#cate_list li a{color: #aaa}
#cate_list li a::before{
	color: #aaa;
	content: counter(list);
	font-size: 20px;
	display: inline-block;
	margin-right: 10px;
	transition: 0.3s
}
#cate_list li a:hover, #cate_list li a:hover::before, #cate_list li.cate_select a, #cate_list li.cate_select a::before{color: #222;}

.cate_title::before{
	height: 2px;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto
}
.cate_title::before{
	background-color: #ccc;
	width: 80px
}
.com_cate_title::before{
	height: 2px;
	width: 40px;
	left: 0;
	bottom: -2px;
	background-color: #222
}

.rei_list::before{
	width: 8px;
	height: 8px;
	border-right: solid 2px #222;
	border-bottom: solid 2px #222;
	transform: rotate(45deg);
	top: 0;
	bottom: 3px;
	right: 20px;
	margin: auto
}
.rei_list select:focus{outline:none}
.rei_list select{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer
}
.rei_list select::-ms-expand{display: none;}

#pager li{
	margin: 0 5px
}
#pager a{
	width: 50px;
	height: 50px;
	line-height: 50px;
	background-color: #f2f2f2;
	color: #222;
	transition: 0.5s;
	display: block;
	position: relative;
}
#pager li.prev a,#pager li.next a{
	background-color: transparent;
}
#pager a:hover{
	background-color: #222;
	color: #fff
}
#pager li.prev a:hover,#pager li.next a:hover{background-color: #222;color: #fff}
#pager li.page-selection a{
	background-color: #222;
	color: #fff
}
#pager li.prev a::before,#pager li.next a::before{
	width: 10px;
	height: 10px;
	border-top: solid 1px;
	border-right: solid 1px;
	top: 0;
	left: 0;
	bottom: 0;
	right: 5px;
	margin: auto;
	transform: rotate(45deg);
}
#pager li.prev a::before{
	right: 0;
	left: 5px;
	transform: rotate(-135deg);
}

#page_title{
	padding-top: 83px;
	overflow: hidden;
}

/***　page02　***/

#page02 .box_item.grid_9 .box_title1::before{
	width: 40px;
	height: 1px;
	left: -40px;
	bottom: -1px;
	background-color: #e6e6e6;
}

/***　page03　***/

#page03 .cate{counter-reset: box;}
#page03 .cate_box{counter-increment: box;}
#page03 .box_title1{z-index: 0}
#page03 .box_title1::before{
	content: "0"counter(box);
	font-size: 80px;
	color: #e0e0e0;
	left: 0;
	top: -70px;
	z-index: -1
}
#page03 .box_title1::after{
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: #222
}

/***　page04　***/

#page04 .sub_cate_item{cursor: pointer}
#page04 .box_img{transition-property: opacity}
#page04 .sub_cate_box{top: 20px}
#page04 .cate_box:last-child{margin-bottom: 0;padding-bottom: 0;border: none}
.open_close{
	width: 60px;
	height: 60px;
	right: 0;
	top: 0;
	cursor: pointer;
	z-index: 1
}
.open_close::before, .open_close::after{
	width: 30px;
	height: 2px;
	background-color: #222;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto
}
.open_close::before{transform: rotate(45deg)}
.open_close::after{transform: rotate(-45deg)}

/***　page05　***/


/***　page08　***/

#page08 #form_box input[type="text"]:focus,#page08 #form_box textarea:focus{
	background-color: #fff;
	border-color: #222
}
.checkbox-parts{cursor: pointer}
.checkbox-parts::before{
	top: 0;
	bottom: 0;
	margin: auto;
	left: 0;
	width: 20px;
	height: 20px;
	background-color: #ececec;
	transition: 0.3s
}
.checkbox-parts::after{
	top: 0;
	bottom: 10px;
	margin: auto;
	left: 5px;
	width: 7px;
	height: 16px;
	transform: rotate(40deg);
	border-bottom: 3px solid transparent;
	border-right: 3px solid transparent;
	transition: 0.3s
}
.checkbox-input:checked + .checkbox-parts{
	color: #e8a842;
}
.checkbox-input:checked + .checkbox-parts::before{
	background-color: transparent
}
.checkbox-input:checked + .checkbox-parts::after{
	border-color: #e8a842
}

/***　page10　***/

#page10 a::before{
	width: 5px;
	height: 5px;
	border-top: solid 1px #222;
	border-right: solid 1px #222;
	top: 0;
	bottom: 0;
	right: 20px;
	margin: auto;
	transform: rotate(45deg);
	transition: 0.3s
}
#page10 a:hover span{color: #fff}
#page10 a:hover::before{border-color: #fff}



/***　IE対処　***/

@media all and (-ms-high-contrast:none) {
	.rei_list #cate_list{padding-top: 25px}
	#page07 .box_title1, #page07 .box_txt1{padding-top: 15px}
	#page08 input[type="text"], #page08 textarea{padding-top: 15px}
	#page08 input[type="submit"]{padding-top: 25px}
	#page09 a, #top_topic .topic_title{padding-top: 5px;}
	.checkbox-parts::before{bottom: 5px}
	.checkbox-parts::after{bottom: 10px}
}

/* 文字間隔 */
/* default 1px */
.letter_0{letter-spacing: 0;}
.letter_1{letter-spacing: 0.1em;}
.letter_2{letter-spacing: 0.2em;}
.letter_3{letter-spacing: 0.3em;}
.letter_4{letter-spacing: 0.4em;}
.letter_5{letter-spacing: 0.5em;}
.letter_6{letter-spacing: 0.6em;}
.letter_7{letter-spacing: 0.7em;}
.letter_8{letter-spacing: 0.8em;}
.letter_9{letter-spacing: 0.9em;}
.letter_10{letter-spacing: 1em;}

.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{padding-top: 7px;padding-bottom: 7px}
#logo{width: 30px}
.hvr_linktrans:hover, .hvr_trans:hover, .topic_more:hover, .more a:hover{transform: none}
.index_title{font-size: 40px}
.index_banner, #page_title h2{font-size: 48px}
.index_link{height: 50vw}
.index_link:hover .index_link_bg{transform: none;opacity: 0.6}
.fadetopic{opacity: 1;top: 0;}
.bottom_banner a:hover{bottom: 0}
#top_blog .cate_box a:hover{background-color: transparent}
#page_title{padding-top: 38px}
#page_title .page_box{height: 50vw;padding: 0}
.open_close{top: -5px;right: 0;}
	
#pager li:not(.prev):not(.next){
	display: none;
}

/* 文字間隔 */
/* default 1px */
.letter_0_tb{letter-spacing: 0;}
.letter_1_tb{letter-spacing: 0.1em;}
.letter_2_tb{letter-spacing: 0.2em;}
.letter_3_tb{letter-spacing: 0.3em;}
.letter_4_tb{letter-spacing: 0.4em;}
.letter_5_tb{letter-spacing: 0.5em;}
.letter_6_tb{letter-spacing: 0.6em;}
.letter_7_tb{letter-spacing: 0.7em;}
.letter_8_tb{letter-spacing: 0.8em;}
.letter_9_tb{letter-spacing: 0.9em;}
.letter_10_tb{letter-spacing: 1em;}

.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{bottom: 120px}
.bottom_banner .contact_bt img, .bottom_banner .tel_bt img{bottom: 2px}
#top_recruit::before{width: 250px;top: -30px}
header .scroll_down{
	width: 10px;
	height: 10px;
	bottom: 20px;
}
	
#page02 .box_item.grid_9 .box_title1::before{display: none}
#page03 .box_title1::before{
	left: auto;
	right: 0;
	top: -50px
}
.bottom_banner .contact_wrap{padding-left: 5px;padding-right: 2.5px;margin-bottom: 5px}
.bottom_banner .tel_wrap{padding-right: 5px;padding-left: 2.5px;margin-bottom: 5px}
.bottom_banner .sns_bt img{bottom: 0px}

/* 文字間隔 */
/* default 1px */
.letter_0_sp{letter-spacing: 0;}
.letter_1_sp{letter-spacing: 0.1em;}
.letter_2_sp{letter-spacing: 0.2em;}
.letter_3_sp{letter-spacing: 0.3em;}
.letter_4_sp{letter-spacing: 0.4em;}
.letter_5_sp{letter-spacing: 0.5em;}
.letter_6_sp{letter-spacing: 0.6em;}
.letter_7_sp{letter-spacing: 0.7em;}
.letter_8_sp{letter-spacing: 0.8em;}
.letter_9_sp{letter-spacing: 0.9em;}
.letter_10_sp{letter-spacing: 1em;}

.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;
}
}