﻿@charset "utf-8";
/* CSS Document */

/***　全ページ　***/

*:focus {outline:none;}
html{font-size: 14px;}
body{-webkit-text-size-adjust: 100%;font-size: 14px}

html.scrollheight{overflow-y: scroll}
a{color: #333}

#wrap{
    opacity:0.0;
}

#loader{
	top: 0;
	z-index: 1000;
	width: 100%;
}

#page-top{
	z-index: 5;
	right: 0
}
#page-top a{
	width: 50px;
	height: 50px;
}
#page-top a::before{
	content: "";
	position: absolute;
	width: 15px;
	height: 15px;
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;
	right: 0;
	left: 0;
	top: 10px;
	bottom: 0;
	margin: auto;
	transform: rotate(-45deg);
}
textarea{overflow: auto}
.main_filter,.filter{
	top: 0;
	right: 0;
	width: 100%
}
.main_filter{background-color: #f7f7f7;z-index: 1}
.fade_box{opacity: 0;transform: translateY(20px);transition: 1s;transition-property: opacity,transform}
.fade_box.fadetrans{opacity: 1;transform: none}

.hvr_trans:hover,#pager a:hover{transform: translateY(-5px)}

/***　ヘッダー　***/

#logo{z-index: 2;padding-left: 10%}
#logo span{
	width: 100px;
	height: 100%;
	top: 0;
	right: -99px;
}

#pc_nav{padding-left: 10%}
.under_page #logo,.under_page #pc_nav{padding-left: 0}

header .trans_header{
	top: -80px;
	left: 0;
	z-index: 10;
	height: 80px;
}
header .trans_header.scrollheader, .scrollheight .trans_header{top: 0}
header .trans_logo{box-sizing: border-box}
header .menu_stick{
	width: 80px;
	height: 80px;
	z-index: 12;
	top: 0;
	right: 0;
	cursor: pointer;
	box-sizing: border-box
}
header .menu_stick.stick_trans{right: 0;}
header .menu_stick span{
	height: 1px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	transition: 0.5s
}
header .menu_stick span:first-of-type{top: 10px}
header .menu_stick span:last-of-type{bottom: 10px}
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)}
header .menu_stick.stick_trans span:last-of-type{transform: rotate(-225deg)}
header #sp_nav{
	z-index: 11;
	left: 0;
	top: 0;
	box-sizing: border-box;
}
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;
	overflow-y: auto;
}
header #sp_nav.fade_bg_trans ul.bg_white{right: 0}

header .page_title_bg{top: 0;left: 0}

/***　フッター　***/

#footer .footer_bottom{background-color: #f7f7f7}
.under_page #footer{background-color: #f7f7f7}

/***　index　***/

.contents_wrap .contents_bg{
	width: 66.66667%;
	top: 100px;
	bottom: 0;
	right: 0
}
#contents2{margin-top: -100px}
#contents2 .con2_wrap{box-shadow: 0 0 50px rgba(0,0,0,0.05)}
.con2_title span,.con3_title span{
	width: 40px;
	height: 1px;
}

.more a{z-index: 1}
.more span.d_block{
	width: 20px;
	top: -1px;
	bottom: -1px;
	left: -40px;
	transform: skewX(-45deg);
	z-index: -1
}
#page10 .more span.d_block{left: -50px;}
.more:hover span.d_block{width: 140%}

#top_cms .top_cms_bg{
	width: 33.33333%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #f7f7f7
}
#top_cms .cms_box:last-child{margin-bottom: 0}

#top_info .info_title span{
	width: 1px;
	height: 40px;
}

/***　page_title / pager　***/

#page_title{
	width: calc(100% - 100px);
	margin-left: 100px
}
#page_title .page_title_bg{top: 0}
.logo_before{
	width: 1px;
	height: 60px;
}

.pager,.cate_list{
	text-align: center;
	display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
	flex-direction: row;
}
.pager{margin-top: 50px;}
.pager li{margin: 0 5px}
.pager li a{
	display: block;
	height: 60px;
	line-height: 60px;
	background-color: #f7f7f7;
	transition: 0.5s
}
.pager li.prev a, .pager li.next a{padding: 0 20px}
.pager li:not(.prev) a,.pager li:not(.next) a{
	width: 60px;
}

.cate_list{
	justify-content: flex-start;
	margin-bottom: 100px
}
.cate_list li a::before{
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-left: solid 5px transparent;
	border-top: solid 5px currentColor;
	border-right: solid 5px transparent;
	right: 0;
	left: 0;
	bottom: 0px;
	margin: auto;
}

/***　page07　***/

#page07 p{background-color: #f7f7f7}
#page07 .info_map{height: 400px}
#map iframe, #page07 .info_map iframe{width:100%;height:100%;box-sizing:border-box;border:none;}

/***　page08　***/

#page08 #form_box input[type="text"],#page08 #form_box textarea{background-color: #f7f7f7}
#page08 input[type="submit"]{cursor: pointer}

input[type="submit"] {
	border-radius: 0;
	-webkit-box-sizing: content-box;
	-webkit-appearance: button;
	appearance: button;
	box-sizing: border-box;
	cursor: pointer;
	font-size: 16px
}
input[type="submit"]::-webkit-search-decoration {
	display: none;
}
input[type="submit"]::focus{
	outline-offset: -2px;
}

/***　page09　***/

#page09 .privacy_top{background-color: #f7f7f7}

/***　IE対処　***/

@media all and (-ms-high-contrast:none) {
	.more a,#page08 input[type="submit"],#page07 h3,#page07 p,.end_message{padding-top: 25px!important}
	.footer_nav a,#page09 a{padding-top: 8px}
	.cate_list a{padding-top: 15px}
	.pager li a{line-height: 64px}
}

/* 文字間隔 */
/* 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;
}

.sns_links li:first-child{padding-left: 0}
.sns_links li:last-child{padding-right: 0}

/*ここからタブレット用（780px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 768px){
	
.hvr_trans:hover,#pager a:hover{transform: translateY(0)}
#contents1 .fade_box{opacity: 1;transform: none}
	
.more a{color: #fff!important;border: none!important}
.more span.d_block{width: 140%}
header .trans_header{top: 0}
#main_img{
	padding-top: 80px;
	height: 100vw!important
}
	#page_title{padding-top: 80px}
#contents2{margin-top: -50px}
.contents_wrap .contents_bg{top: 50px;}
#top_cms .top_cms_bg{display: none}
#top_info{background-color: #f7f7f7}
#footer .footer_bottom{background-color: transparent}
#page_title{
	width: 100%;
	margin-left: 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){
	
.under_page #footer{background-color: transparent}
	
.contents_wrap .contents_bg{width: 100%}
#contents1 .con1_left{height: 70vw}

/* 文字間隔 */
/* 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;
}
}