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

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

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

.font_bar{
	font-family: 'Barlow', "游ゴシック 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;
}
textarea{overflow: auto}
#loader{z-index: 12;pointer-events: none}
#loader .loader_bar, #loader .loader_gauge{
	top: 0;
	left: 0;
	height: 5px
}

.under_page{top: 20px}
#page_top{
	width: 80px;
	height: 80px;
	bottom: 0;
	right: 20px;
	box-sizing: border-box;
	background-color: rgba(255,255,255,0.8);
	z-index: 6;
	cursor: pointer
}
#page_top .arrow{
	width: 10px;
	height: 10px;
	transform: rotate(45deg);
	left: 0;
	right: 0;
	top: 20px;
	margin: auto
}
@media screen and (min-width: 769px){
	#page_top.index_top{display: none!important}
}

#contents .con_box1::before, #menu_stick span.stick::before, #menu_stick span.stick::after, .more a::before, .more a::after, #page07 .info_title::before{
	position: absolute;
	content: "";
	display: block;
	pointer-events: none
}

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

#menu_stick{
	top: 20px;
	right: 20px;
	width: 80px;
	height: 80px;
	z-index: 10;
	cursor: pointer
}
#menu_stick span.stick{
	width: 30px;
	height: 1px;
}
#menu_stick span.stick::before, #menu_stick span.stick::after{
	background-color: #fff;
	left: 0;
	right: 0;
	margin: auto;
	width: 100%;
	height: 1px;
	transition: 0.5s;
	transition-timing-function: cubic-bezier(.1,.26,0,1)
}
#menu_stick span.stick::before{bottom: 6px}
#menu_stick span.stick::after{top: 6px}
#menu_stick.trans span.stick{background-color: transparent}
#menu_stick.trans span.stick::before{transform: rotate(225deg);top: 0;bottom: 0}
#menu_stick.trans span.stick::after{transform: rotate(-225deg);bottom: 0;top: 0}

header .nav_bg{
	top: 20px;
	right: 20px;
	width: 80px;
	height: 80px;
	transition-timing-function: cubic-bezier(.9,.01,.1,1);
	z-index: 8
}
header .nav_bg.trans{
	top: 0;
	right: 0;
	width: 100%;
	height: 100%
}
#pc_nav{
	z-index: 9;
	overflow-y: auto
}
#pc_nav ul{
	left: 0;
	right: 0;
	margin: auto
}

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

footer .footer_bg{
	top: 0;
	right: 0
}
footer #sns_links .sns_title{
	width: calc(100% - 30px);
	box-sizing: border-box
}

/***　index　***/

.pp-scrollable{
	overflow: hidden;
	overflow-y: auto
}
#pp-nav.right{
	right: 44px;
	z-index: 7
}
#pp-nav span{
	background-color: currentColor!important;
	border-color: currentColor!important;
	transition: 0.3s;
	width: 6px;
	height: 6px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-sizing: border-box
}
#pp-nav .active span{
	background-color: transparent!important;
	width: 12px;
	height: 12px
}

#custom .custom_wrap{transform: scale(1.05,1.05) rotate(0.1deg);transition: 1.5s}
#custom .custom_wrap.trans{transform: none}
#intro .intro_right div{height: 50%}
#intro .intro_left{left: -10px}
#intro.trans .intro_left{
	opacity: 1;
	left: 0;
}
#contents .con_wrap,#contents2 .con_wrap,#contents3 .con_wrap{right: -10px}
#contents.trans .con_wrap,#contents2.trans .con_wrap,#contents3.trans .con_wrap{
	opacity: 1;
	right: 0;
}

#contents .con_bg,#contents2 .con_bg,#contents3 .con_bg{
	top: 0;
	right: 0
}
#contents .con_img,#contents2 .con_img,#contents3 .con_img{
	top: 100px;
	bottom: 100px;
	left: 0
}
/*
#contents .con_box1::before{
	width: 40px;
	height: 1px;
	left: 0;
	bottom: 0;
	background-color: #fff
}
*/

#top_cms .cms_title span{
	width: 1px;
	height: 60px;
	top: -30px;
	left: 0;
	right: 0;
	margin: auto
}
.more a:hover{transform: scale(1.05,1.05)}
.more a::before, .more a::after{
	width: 40px;
	height: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	transition: 0.3s;
	border-top: solid 1px transparent;
	border-bottom: solid 1px #fff;
}
.more a::before{
	left: 0;
	border-left: solid 1px #fff;
}
.more a::after{
	right: 0;
	border-right: solid 1px #fff;
}
.more a:hover::before, .more a:hover::after{
	width: 10px;
	height: calc(100% - 20px);
}
.more a:hover::before{
	left: 10px;
	border-top: solid 1px #fff;
}
.more a:hover::after{
	right: 10px;
	border-top: solid 1px #fff;
}

/***　page_title / cate_list / pager　***/

#page_title{transition: 1.5s}
#page_title .title_bg{
	top: 0;
	left: 0
}
#page_title .title_wrap .title_bar{
	width: 1px;
	top: 100%;
	left: 0;
	bottom: 0
}
#page_title .title_wrap span{top: 1.5em;}
#page_title .title_wrap h2{height: 1.5em;}
#page_title .title_wrap p{font-size: 50px;height: 1.5em;}

.cate_list li{max-width: 100%}

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

/***　page07　***/

#page07 .info_title::before{
	width: 20px;
	height: 1px;
	top: 14px;
	right: 0;
	background-color: #333;
	opacity: 0.4
}
#page07 #map iframe{
	display: block;
	width: 100%;
	height: 400px
}

/***　page10　***/

#page10 li a{border-color: rgba(0,0,0,0.1)}
#page10 li a .bar{
	height: 1px;
	width: 20px;
	left: 0;
	bottom: -1px;
}
#page10 li a:hover .bar{width: 100%}

/***　IE対処　***/

@media all and (-ms-high-contrast:none) {
	.cate_list a{padding-top: 5px}
	#page07 .info_title::before{top: 11px;}
	#page08 #submit input{padding-top: 25px}
	#page09 a{padding-top: 5px}
	#sns_links p{padding-top: 5px}
}

.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){
#pagepiling{overflow: visible!important}
#page_top{
	width: 50px;
	height: 50px;
	right: 0;
}
#page_top .arrow{top: 25px}
.section{
	top: auto!important;
	overflow: visible!important;
	z-index: auto!important
}
.section:not(#custom){height: auto!important;}
#menu_stick, header .nav_bg{
	top: 0;
	right: 0;
	width: 50px;
	height: 50px;
}
#pp-nav{display: none}
.more a:hover{transform: none}
.more a:hover::before, .more a:hover::after{
	border-top: none;
	height: 0;
	width: 40px
}
.more a:hover::before{left: 0;}
.more a:hover::after{right: 0;}
	
#intro .intro_right{height: 100vw!important}
#intro .intro_left{left: 0;opacity: 1}
#contents .con_wrap,#contents2 .con_wrap,#contents3 .con_wrap{right: 0;opacity: 1}
#contents .con_img,#contents2 .con_img,#contents3 .con_img{
	height: 60vw;
	top: auto;
	bottom: auto
}
#page10 li a:hover .bar{width: 20px;}
	
#page_title .title_wrap p{font-size: 40px}
.pager li:not(.prev):not(.next){
	display: none;
}

.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_title .title_wrap p{font-size: 30px}
.cate_list li:last-child{border: none}
#page07 .info_title::before{
	right: auto;
	width: 15px;
	left: 0;
	opacity: 1
}

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