@charset "utf-8";
/* color */
body,.txt_color_nomal{color: #181818;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #363644} /* メインカラー */
.txt_color2{color: #f6f6f6} /* サブカラー */
.txt_color3{color: #57606d} /* アクセントカラー1 */
.txt_color4{color: #f2ede4} /* アクセントカラー2 */

/* background-color */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #363644} /* メインカラー */
.bg_color2{background-color: #f6f6f6} /* サブカラー */
.bg_color3{background-color: #57606d} /* アクセントカラー1 */
.bg_color4{background-color: #f2ede4} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important}

/* border-color ※!important */
.border_color1{border-color: #363644}
.border_color2{border-color: #f6f6f6}
.border_color3{border-color: #57606d}
.border_color4{border-color: #f2ede4}

/* hover ---------------------------------------------------------------------------------------------*/
/* color */
.hvr_txt_color_nomal:hover{color: #181818;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color1:hover{color: #363644} /* メインカラー */
.hvr_txt_color2:hover{color: #f6f6f6} /* サブカラー */
.hvr_txt_color3:hover{color: #57606d} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #f2ede4} /* アクセントカラー2 */

/* background-color */
.hvr_bg_white:hover{background-color: white} /* 白背景 */
.hvr_bg_black:hover{background-color: black} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #363644} /* メインカラー */
.hvr_bg_color2:hover{background-color: #f6f6f6} /* サブカラー */
.hvr_bg_color3:hover{background-color: #57606d} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #f2ede4} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important}

/* border-color ※!important */
.hvr_border_color1:hover{border-color: #363644}
.hvr_border_color2:hover{border-color: #f6f6f6}
.hvr_border_color3:hover{border-color: #57606d}
.hvr_border_color4:hover{border-color: #f2ede4}

.linkStyle { color:#181818;
}
.linkStyle:hover { opacity:0.7;transition: all 0.3s;
}
.l-mask, .l-mask--gr, .l-mask--top {
    background-color: #363644!important;
}
#logo {
    width: 110px!important;
}
#header {
    background-color: rgba(54,54,68,0.5);
}
.catch_pc {
top:55%;
	z-index: 2;
	width:60%;
	max-width: 450px;
}
#pc_nav li a span {
	color:#fff;
}
#top_contents1 {
	background-color: #57606d;
}
#top_contents1 div span.after {
    left: -25%!important;
}
#top_contents3{
	position: relative;
	overflow: hidden;
}
#top_contents3 div img{height: 100%;}

.top_contents3_box{
	position: relative;
	z-index: 3;
	max-width: 500px;
}
.top_contents3_box{
	margin: 5% auto 5% 10%;
}
.top_contents3_img{
	position: absolute; 
	top: 0;
	z-index: 1;
	height: 100%;
	background-size: cover;
	background-position: center center;
}
.top_contents3_img{
	right: 0;
}
#top_contents3 div span.after{
    width: 50%;
    height: 200%;
    position: absolute;
    z-index: 1;
    -webkit-transform: skewX(-26.35deg);
    transform: skewX(-26.35deg);
}
#top_contents3 div span.after{top: -50%;left: -30%;}

#top_contents3 h3{position: relative;}
#top_contents1 h3::before,#top_contents2 h3::before {
	color: #878c92!important;
}
#top_contents3 h3::before{
	font-family: "Russo One", "Noto Sans JP","Hiragino Kaku Gothic ProN", "游ゴシック体", YuGothic, "YuGothic M", meiryo, sans-serif;
	font-size: 97px;
	opacity: 0.4;
	color: #878c92;
	position: absolute;
}
#top_contents3 h3::before{
	content: "03";
	top: -85px;
	left: -70px;
}
#footer_contact {
    background-position: bottom;
}
@media (max-width:768px){
#logo {
    width: 120px!important;
}
#toggle span.bg_color3  {
    background-color:#fff!important;
}

.catch {
	width:200px;
	top:58%;
}

.top_contents3_box{
	max-width:none;
	padding: 30px;
	background-color: rgba(255, 255, 255, 0.85);
	margin: 10%;
}
.top_contents3_box h3,.top_contents3_box p{color: #333333;}
#top_contents3 h3::before {	
	position: absolute;
	top: -80%;
	left: 50%;
	transform: translate(-50%,-50%);	
	opacity: 1;
}
.footer_sitemap { display:none;
}
}

@media (max-width:667px){
#logo {
    width: 80px!important;
	margin: 0 auto 0 10px!important;
}

.catch {
	width:150px;
	top:60%;
}
#top_message p:first-of-type {
    font-size: 25px;
}	
#top_message h2 {
    font-size: 20px;
    margin-bottom: 20px;
}
#top_contents3 div span.after{display: none;}
#top_contents3 div:last-of-type{bottom: 0px;}
#top_contents3 h3::before{font-size: 48px;}
}
@media all and (-ms-high-contrast:none){}
@supports (-ms-ime-align:auto) {}