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

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

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

.font_com{
	font-family: 'Comfortaa', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
}

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{
	width: 50px;
	height: 50px;
	background-color: rgba(255,255,255,0.9);
	right: 0;
	bottom: 0;
	cursor: pointer;
	z-index: 1
}
#page_top span{
	width: 15px;
	height: 15px;
	transform: rotate(45deg);
	left: 0;
	right: 0;
	top: 20px;
	margin: auto
}
#loader{
	top: 0;
	left: 0;
	z-index: 10
}
#loader .loader_top, #loader .loader_bottom{
	left: 0;
	height: 51%;
}
#loader .loader_top{top: 0}
#loader .loader_bottom{bottom: 0}
#loader.active .loader_top, #loader.active .loader_bottom{height: 0}

textarea{overflow: auto}
.fadein{
	opacity: 0;
	transition: 1s;
	transform: scale(0.98,0.98) rotate(0.01deg);
}
.fadein.trans{
	opacity: 1;
	transform: none;
}

#main_img .scroll_bar span::before, #top_contents::before{
	position: absolute;
	content: "";
	display: block;
	pointer-events: none
}

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

#pc_nav{
	height: 80px;
	line-height: 80px
}
#pc_nav a:hover .en, #pc_nav_fix a:hover .en{opacity: 0}
#pc_nav a:hover .jp, #pc_nav_fix a:hover .jp{opacity: 1}
#pc_nav_fix{
	top: 0;
	left: 0;
	z-index: 5;
	background-color: rgba(255,255,255,0.9)
}
#header.top #pc_nav_fix{
    padding: 10px 0;
    transition: auto;
}

#header .menu_stick{
	width: 50px;
	height: 50px;
	z-index: 10;
	box-sizing: border-box
}
#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;
	background-color: #fff
}
#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{
	top: 0;
	left: 0;
	z-index: 8
}

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

footer .footer_img{height: 300px}
#footer_map iframe{
	width: 100%;
	height: 100%
}

/***　index　***/

#main_img{z-index: 0}
#main_img .scroll_bar{
	transform: rotate(-90deg);
	transform-origin: bottom left;
	left: 100px;
	bottom: 0;
	z-index: 1;
	cursor: pointer
}
#main_img .scroll_bar span{
	width: 80px;
	height: 1px;
	top: 0;
	bottom: 3px;
	left: 0;
	margin: auto;
	background-color: rgba(255,255,255,0.4)
}
#main_img .scroll_bar span::before{
	height: 1px;
	top: 0;
	background-color: #fff;
	animation: bartrans 3s cubic-bezier(.68,.01,.2,1) infinite;
}
@keyframes bartrans{
    0%	{
		right: 0;
		left: 100%;
		width: 0
    }
    25%	{
		right: 0;
		left: 0;
		width: 100%
    }
    50%{
		right: 100%;
		left: 0;
		width: 0
    }
    100%{
		right: 100%;
		left: 0;
		width: 0
    }
}

.contents_no span{
	width: 40px;
	height: 2px;
	transform: rotate(-45deg);
	left: 0;
	top: 0;
	bottom: 10px;
	margin: auto
}
#top_contents::before{
	width: calc(100% - 300px);
	height: calc(100% - 200px);
	right: 0;
	bottom: 0;
	background-color: #F2F2F2
}
#top_contents .con_box .contents_no{
	top: 0;
	left: 20px;
	z-index: 1
}
#top_contents .con_open .contents_no span{background-color: #fff}
#intro .intro_txt_wrap{z-index: 1}
#intro .intro_img{
	top: 0;
	left: 0
}
#top_contents .con_box{cursor: pointer}
#top_contents .con_box:hover .box_img{
	transform: scale(0.98,0.98) rotate(0.01deg);
}
#top_contents .con_box:hover .box_img img{
	transform: translate(-50%, -50%) scale(1.1,1.1) rotate(0.01deg);
	opacity: 0.6
}
#top_contents .con_box:hover .box_img span{opacity: 1}
#top_contents .con_open{
	top: 0;
	left: 0;
	z-index: 7
}
#top_contents .open_scroll{overflow-y: auto}
#top_contents .con_open .close_bt{
	top: 20px;
	right: 20px;
	cursor: pointer
}

#top_contact .contact_box{
	background-color: rgba(255,255,255,0.9)
}

#top_info .info_txt_wrap span, #top_cms .cms_title span{height: 1px}

#top_cms{
    position: relative;
    z-index: 1;
}

.more a:hover{transform: scale(0.96,0.96) rotate(0.01deg);}
.more a:hover span{transform: scale(1.14,1.14) rotate(0.01deg);}

/***　under　***/

section.under_page{
	opacity: 0;
	transform: translateY(20px);
	transition: 1s
}
section.under_page.active{
	opacity: 1;
	transform: none
}

/***　pager　***/

.pager li a{
	height: 60px;
	line-height: 60px;
}
.pager li.prev a, .pager li.next a{padding: 0 20px}
.pager li:not(.prev) a,.pager li:not(.next) a{width: 60px;}

/***　page8　***/

#page8 #form_box input[type="text"],#page8 #form_box textarea{background-color: #f7f7f7}

/***　page7　***/

#info_map{height: 300px}
#info_map iframe{
	width: 100%;
	height: 100%
}

/***　IE対処　***/

@media all and (-ms-high-contrast:none) {
	#page9 a{padding-top: 4px}
	#page8 #submit input{padding-top: 25px}
}

/* 文字間隔 */
/* 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){
	
#pc_nav_fix{display: block!important;opacity: 1!important}
#main_img{height: 60vw!important}
#top_contents .con_box:hover .box_img, .more a:hover, .more a:hover span{transform: none;}
#top_contents .con_box:hover .box_img img{transform: translate(-50%, -50%);}
#top_contents::before{
	width: calc(100% - 50px);
	height: calc(100% - 100px);
	right: auto;
	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){
#intro{padding-bottom: calc(60vw - 20px)}
#intro .intro_img{
	height: 60vw;
	top: auto;
	bottom: 0;
}
#footer_map{height: 300px;}

/* 文字間隔 */
/* 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;
}
}

/* =====================
  トップページ設定　タイトルテキスト
===================== */
.pc_txt {display: block;}
.sp_txt {display: none;}

/* --- スマートフォン --- */
@media screen and (max-width: 667px){
  .pc_txt {display: none;}
  .sp_txt {display: block;}
}