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

/* FONT */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=GFS+Didot&display=swap');
.pop300{font-family: 'Poppins', sans-serif;font-weight: 300;}
.pop400{font-family: 'Poppins', sans-serif;font-weight: 400;}
.pop600{font-family: 'Poppins', sans-serif;font-weight: 600;}
.didot{font-family: 'GFS Didot', serif;}
.hannari{font-family: "Hannari","游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";}
/*----------------------------
全体
----------------------------*/
.br:before{
	content: "\A";
	white-space: pre;
}

/* fakeloader */
#wrap{
    opacity: 0;
}
#fakeloader{
	z-index: 9999;
	background-size: 10%;
}
#fakeloader:before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.5);
	position: absolute;
	top: 0;
	left: 0;
}
#fakeloader .fl{
	position: absolute!important;
	top: 50%!important;
	left: 50%!important;
	transform: translate(-50%,-50%)!important;
	width: 50%!important;
	max-width: 250px;
}
#fakeloader .fl{
	animation-name: loader;
	animation-duration: 5s;
	animation-timing-function: ease;
}
@keyframes loader{
	0% {opacity: 0;}
	50% {opacity: 1;}
	100% {opacity: 0;}
}
/* header */
header{
	top: 0;
	z-index: 5;
}
#logo{max-width: 300px;box-sizing: border-box;}
header.scr_header #logo{max-width: 200px;}
header.scr_header #pc_nav{display: block;}

/* ナビゲーション ホバーアニメーション */
#pc_nav li,
#top_pc_nav li,
#footer_nav li{
	max-width: 140px;
	margin-right: 20px;
	word-break:break-all;
}
#footer_nav li{max-width: none;}
#pc_nav li:last-of-type,#top_pc_nav li:last-of-type,#footer_nav li:last-of-type{margin-right: 0;}
#pc_nav li a,#top_pc_nav li a,#footer_nav li a{
  position: relative;
  display: inline-block;
  text-decoration: none;
}
#pc_nav li a::after,#top_pc_nav li a::after,#footer_nav li a::after{
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,0.5);
  bottom: -10px;
  transform: scale(0, 1);
  transition: transform .3s;
  transform-origin: left top;
}
#footer_nav li a::after{background: rgba(0,0,0,0.3);bottom: -3px;}
#pc_nav li a:hover::after,#top_pc_nav li a:hover::after,#footer_nav li a:hover::after{
  transform: scale(1, 1);
}
#nav_menu .more_btn:hover:after{background: rgba(255,255,255,0.2);}
#nav_menu .more_btn:before {border-color: rgba(255,255,255,0.50);}
#overlay .left,#overlay .right{border-color: #fff;}
#overlay .right{margin-left: -2px;}
#overlay .left{counter-reset: number 0;}
#overlay .left li{max-width: 170px;}
#overlay .left li:before{
	counter-increment: number 1;
	content: counter(number,decimal-leading-zero) "";
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: #fff;
	opacity: 0.5;
	position: absolute;
	top: 3px;
	left: -35px;
}
.nav_menu_more a .icon:before{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	display: block;
	position: absolute;
}
.nav_menu_more:first-of-type a .icon:before{
	content: "\f0e0";
	top: -3px;
	left: -30px;
}
.nav_menu_more:last-of-type a .icon:before{
	content: "\f879";
	top: -3px;
	left: -65px;
}
/*背景*/
.back1,.back2{position: relative;}
.back1:before,.back2:before{
	content: "";
	display: block;
	width: 50%;
	height: 80%;
	position: absolute;
}
.back1:before{
	top: 0;
	left: 0;
}
.back2:before{
	height: 100%;
	top: 200px;/* #contents3_wrap:before,#contents3_wrap:afterのtop値と同じ値 */
	right: 0;
}

/* 画像トリミング */
.portrait_img{
	display: block;
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 800px!important;
}
.portrait_img img{
	width: 100%;
    height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
/* タイトル左横 横線 */
.line-l{position: relative;}
.line-l:before{
	content: "";
	display: block;
	width: 15px;
	height: 2px;
	position: absolute;
	top: 13px;
	left: -25px;
}
/* タイトル下　横線 */
.line{position: relative;}
.line:before{
	content: "";
	display: block;
	width: 0;
	height: 3px;
	position: absolute;
	bottom:-25px;
}
#intro .line:before,
#contents3 .line:before{
	left: 50%;
	-ms-transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);
}
#contents1 .line:before,
#contents2 .line:before{
	left: 0;
}
.line.scrollin:before{
	animation: page_line 2s ease forwards;
}
@keyframes page_line {
	0% {
		width: 0;
	}
	96%,100% {
		width: 70px;
	}
}
/* moreボタン */
.more_btn{		
	position: relative;	
	text-transform: uppercase;
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);	
	cursor: pointer;
	user-select: none;
	padding-bottom: 8px!important;
}
.more_btn:before, .more_btn:after {
	content: '';
	position: absolute;	
	transition: inherit;
	z-index: 0;
}
.more_btn:hover{
	transition-delay: .5s;
}
.more_btn:hover:before{
	transition-delay: 0s;
}
.more_btn:hover:after{
	transition-delay: .35s;
}
.more_btn:before, 
.more_btn:after {
	top: 0;
	width: 0;
	height: 100%;
}
.more_btn:before {
	left: 0;
	border: 1px solid;
	border-left: 0;
	border-right: 0;	
}
.more_btn:after{
	top: 1px;
	right: 0;
}
.more_btn:hover:before,
.more_btn:hover:after {
	width: 100%;
}
/*マウスホバーで、イメージ画像にゆっくりズームアップ*/
.zoomup img {
	vertical-align: top;
	-webkit-transition: all 3s ease-out;
	transition: all 3s ease-out;
}
.zoomup .square_img img,
.zoomup .rectangle_img img{
	position: absolute;
	top: 0;
	left: 0;
	-ms-transform: translate(0,0);
	-webkit-transform: translate(0,0);
	transform: translate(0,0);
}
.zoomup:hover img{
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}
/* footer */
#footer{background-color: rgba(255,255,255,0.5);}

/* SNS LINKS */
.sns_links{
	max-width: 200px;
	box-sizing: border-box;
}
.sns_links li{
	width: 16%;
	margin-right: 5%;
	box-sizing: border-box;
}
.sns_links li:last-of-type{
	margin-right: 0;
}

/*top_return*/
#return_top{
    position: fixed;
    right: 30px;
	z-index: 2;
}
.return{
	margin-left:auto;
}
.return::after{
    display: inline-block;
    content: "";
    width: 1px;
    height: 130px;
    position: absolute;
    bottom: 0;
    left: 0;
    margin: auto;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.return::before{
    display: inline-block;
    content: "";
    width: 20px;
    height: 1px;
    position: absolute;
    top: -120px;
    left: -14px;
    margin: auto;
	-webkit-transform: rotate(-65deg);
	transform: rotate(-65deg);
	transition: all .3s;
}
.return::before,.return::after{
	background-color: #1c1208;
}
.return:hover::after{
	height: 150px;
}
.return:hover::before{
    top: -141px;
}
.return a{
	transform: rotate(-90deg);
	width: 130px;
	bottom: 60px;
	left: -80px;
}
/*----------------------------
TOP
----------------------------*/
.top header{z-index: 0;}
.top header.scr_header{z-index: 5;}
/* main_img */
#main_img:before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgba(70,70,70,0.5);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
#main_img #left,
#main_img #right{z-index: 0!important;}
#main_img .menu{z-index: 2;}
/* intro */
#intro_wrap{padding-top: 7%;padding-bottom: 7%;}
#intro .num{
	top: -70px;
	left: 50%;
	-ms-transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);
	font-size: 70px;
}

/* contents1 */
#contents1 .num{
	top: 0px;
	left: 43.5%;
	-ms-transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);
	font-size: 70px;
	z-index: 1;
}
#contents1 .con_box{margin-top: 20%;}

/* contents2 */
#contents2 .num{
	top: 0px;
	left: 56.5%;
	-ms-transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);
	font-size: 70px;
	z-index: 1;
}
#contents2 .con_img{margin-bottom: 5%;}
#contents2 .con_box{margin-top: 15%;}

/* contents3 */
#contents3{margin-bottom: 200px;}/* .back2:beforeと#contents3_wrap:before,#contents3_wrap:afterのtop値＋10％ */
#contents3_wrap:before,#contents3_wrap:after{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 200px;/* .back2:beforeのtop値と同じ値 */
}
#contents3_wrap:before{
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

#contents3 .con_box{z-index: 1;padding-top: 6%;padding-bottom: 6%;}
#contents3 .num{
	top: -70px;
	left: 50%;
	-ms-transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);
	font-size: 70px;
}

/* top_cms */
#top_cms.back1:before{height: 100%;}
.top_cms_box:first-of-type{padding-top: 100px;}

/* info_contact */
#info_contact .con_box{	
	width: 47.5%;
	margin-right: 5%;
	box-sizing: border-box;
}
#info_contact .con_box:last-of-type{margin-right: 0;}
#info_contact .con_box a{
	width: 100%;
	height: 100%;
}
#info_contact .con_img{
	width: 100%;
	height: 100%!important;
	overflow: hidden;
}
#info_contact .con_img:before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgba(175,175,175,0.7);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
#info_contact .con_box .con_title{z-index: 1;}
/*----------------------------
下層
----------------------------*/

/* 背景 */
main.back1:before{
	height: 100%;
}
/*page_title*/
#page_title:before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgba(175,175,175,0.6);
	position: absolute;
	top: 0;
	left: 0;
}
#page_left,#page_right{height: 500px;}
#page_title .page_title_box{padding-bottom: 28px;}

/*cate_list*/
.cate_list li{
	width: 21.25%;
	margin-right: 5%;
	margin-bottom: 20px;
	box-sizing: border-box;
}
.cate_list li:nth-of-type(4n){margin-right: 0;}
.cate_list li a:before{
	font-family: "Font Awesome 5 Free";
	content: "\f138";
	font-weight: 900;
	display: block;
	position: absolute;
	top:50%;
	left: 15px;
	-ms-transform: translate(0,-50%);
	-webkit-transform: translate(0,-50%);
	transform: translate(0,-50%);
}
/* page7 */
#page7 .cate_box{border-color: #f2f2f2;}
#map iframe{
	width: 100%;
	height: 400px;
}
/* page8 */
#page8 #mail_contact li:before{
	content: "■";
	font-weight: 900;
	position: absolute;
	top: 0;
	left: 5px;
}
#page8 #form_box .box input::-webkit-input-placeholder,#page8 #form_box .box textarea::-webkit-input-placeholder{
	font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	opacity: 0.8;
	color: rgba(85,70,65,0.7);
}
#page8 #form_box .box input:-moz-placeholder,#page8 #form_box .box textarea:-moz-placeholder{
	font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	opacity: 0.8;
	color: rgba(85,70,65,0.7);
}
#page8 #form_box .box input:-ms-input-placeholder,#page8 #form_box .box textarea:-ms-input-placeholder{
	font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	opacity: 0.8;
	color: rgba(85,70,65,0.7);
}
#page8 #form_box .box input,#page8 #form_box .box textarea{
	outline: none;
	border-style: none;
	border-radius: 0;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
#page8 #form_box .box:last-of-type{
	border-bottom: none;
}
#page8 #form_box .box input{height: 35px;}
#page8 #form_box .box textarea{height: 150px;}
#page8 input[type="submit"].btn,
#page8 input[type="reset"].btn{
	-webkit-appearance: none;
	border-radius: 0;
	outline: none;
	cursor: pointer;
}
#page8 input[type="submit"].btn:disabled{
    cursor: default;
}
.g-recaptcha > div{
	margin: 0;
}
/* page10 */
#page10 .con_box > div{
	width: 30%;
	margin-right: 5%;
	margin-bottom: 5%;
	box-sizing: border-box;
}
#page10 .con_box > div:nth-of-type(3n){margin-right: 0;}
#page10 .con_box > div:nth-last-of-type(1),
#page10 .con_box > div:nth-last-of-type(2),
#page10 .con_box > div:nth-last-of-type(3){margin-bottom: 0;}

/* 1280px以下 */
@media screen and (max-width: 1280px){
	/*----------------------------
	全体
	----------------------------*/
	#pc_nav,#top_pc_nav{display: none;}
	header.scr_header #pc_nav{display: none;}
	#nav_menu{display: block;}
	
	/*----------------------------
	TOP
	----------------------------*/
	.top header{z-index: 5;opacity: 1;}
	/*----------------------------
	下層
	----------------------------*/
	/*cate_list*/
	.cate_list li{width: 30%;}
	.cate_list li:nth-of-type(4n){margin-right: 5%;}
	.cate_list li:nth-of-type(3n){margin-right: 0;}
}
/* タブレット */
@media screen and (max-width: 768px){
	/*----------------------------
	全体
	----------------------------*/
	/* header */
	#logo{max-width: 200px;}
	header.scr_header #logo{max-width: 150px;}
	
	.back1:before,.back2:before{
		height: 100%;
	}
	.back1:before{
		top: 0;
		left: 0;
	}
	.back2:before{
		height: calc(100% + 100px);
		top: 0;
		right: 0;
	}
	/*top_return*/
	#return_top {
		right: 15px;
	}
	.return::after{
		width: 1px;
		height: 100px;
	}
	.return::before{
		width: 20px;
		height: 1px;
		position: absolute;
		top: -90px;
		left: -14px;
	}
	.return:hover::after{
		height: 100px;
	}
	.return:hover::before{
		top: -90px;
	}
	.return a{
		width: 100px;
		bottom: 35px;
		left: -63px;
	}
	/*----------------------------
	TOP
	----------------------------*/
	/* intro */
	#intro_wrap{padding: 6% 5%;}
	#intro .num{
		font-size: 50px;
		top: -50px;
	}
	/* contents1 */
	#contents1 .num{
		font-size: 50px;
		left: 42.5%;
	}
	#contents1 .portrait_img{
		height: 600px!important;
	}
	#contents1 .con_box{margin-top: 0}
	/* contents2 */
	#contents2 .num{
		font-size: 50px;
		left: 42.5%;
	}
	/* contents3 */
	#contents3{margin-bottom: 100px;}/* .back2:beforeと#contents3_wrap:before,#contents3_wrap:afterのtop値＋10％ */
	#contents3_wrap:before,#contents3_wrap:after{top: 100px;}/* .back2:beforeのtop値と同じ値 */
	#contents3 .num{
		font-size: 50px;
		top: -50px;
	}
	/*----------------------------
	下層
	----------------------------*/
	/*page_title*/
	#page_left,#page_right{height: 400px;}
	/*cate_list*/
	.cate_list li{width: 47.5%;}
	.cate_list li:nth-of-type(3n){margin-right: 5%;}
	.cate_list li:nth-of-type(2n){margin-right: 0;}
	/* page7 */
	#map iframe{height: 350px;}
	/* page10 */
	#page10 .con_box > div{
		width: 47.5%;
	}
	#page10 .con_box > div:nth-of-type(3n){margin-right: 5%;}
	#page10 .con_box > div:nth-of-type(2n){margin-right: 0;}
	#page10 .con_box > div:nth-last-of-type(2),
	#page10 .con_box > div:nth-last-of-type(3){margin-bottom: 5%;}
	}
/* スマホ */
@media screen and (max-width: 667px){
	/*----------------------------
	全体
	----------------------------*/
	/* header */
	#logo{max-width: 150px;}
	header.scr_header #logo{max-width: 130px;}
	#overlay .left li{max-width: none;}
	#overlay .left li:before{
		font-size: 12px;
		top: 3px;
		left: -25px;
	}
	/* タイトル下　横線 */
	.line:before{bottom: -15px;}
	/*top_return*/
	#return_top {
		right: 5px;
	}
	.return::after{
		width: 1px;
		height: 80px;
	}
	.return::before{
		width: 20px;
		height: 1px;
		position: absolute;
		top: -70px;
		left: -14px;
	}
	.return:hover::after{
		height: 80px;
	}
	.return:hover::before{
		top: -70px;
	}
	.return a{
		bottom: 30px;
		left: -50px;
		width: 80px;
	}
	/*----------------------------
	TOP
	----------------------------*/
	/* intro */
	#intro_wrap{
		padding-top: 10%;
		padding-bottom: 5%;
	}
	#intro .num{
		font-size: 50px;
		top: -50px;
	}
	/* contents1 */
	#contents1 .con_img{margin-bottom: 20px;}
	#contents1 .num{
		top: -50px;
		left: 50%;
		-ms-transform: translate(-50%,0);
		-webkit-transform: translate(-50%,0);
		transform: translate(-50%,0);
	}
	/* contents2 */
	#contents2 .con_img{margin-bottom: 20px;}
	#contents2 .num{
		top: -50px;
		left: 50%;
		-ms-transform: translate(-50%,0);
		-webkit-transform: translate(-50%,0);
		transform: translate(-50%,0);
	}
	#contents2 .con_box{margin-top: 0;}
	/* contents3 */
	#contents3_wrap:before{background-size: auto 100%;}
	#contents3 .con_box{
		background-color: rgba(255,255,255,0.9);
		padding-top: 10%;
		padding-bottom: 5%;
	}
	
	/* info_contact */
	#info_contact .con_box{
		width: 100%;
		margin-right: 0;
		margin-bottom: 20px;
	}
	#info_contact .con_box:last-of-type{margin-bottom: 0;}
	/*----------------------------
	下層
	----------------------------*/	
	/*page_title*/
	#page_left,#page_right{height: 300px;}
	.page_title_box{width: 50%;}
	/*cate_list*/
	.cate_list li{width: 100%;margin-right: 0;}
	.cate_list li:nth-of-type(3n){margin-right: 0;}
	/* page7 */
	#map iframe{height: 300px;}
	/* page8 */
	#page8 input[type="submit"].btn,
	#page8 input[type="reset"].btn{width: 130px;}
	/* page10 */
	#page10 .con_box > div{
		width: 100%;
		margin-right: 0;
	}
	#page10 .con_box > div:nth-of-type(3n){margin-right: 0;}
}


/*IEのみ*/
@media all and (-ms-high-contrast: none) {
	/*----------------------------
	全体
	----------------------------*/
	.more_btn{padding-bottom: 6px!important;}
	/*----------------------------
	TOP
	----------------------------*/
	/* info_contact */
	#info_contact .linehight_1{line-height: 1.5;}
	
	/*----------------------------
	下層
	----------------------------*/
	/* page_titile */
	#page_title .page_title_box{padding-bottom: 16px;}
	#page_title .linehight_1{line-height: 1.3;}
	/* pager */
	.pager li a{padding-bottom: 6px;}
	.cate_list li a{padding-bottom: 6px;}
	/* page8 */
	#page8 input.btn{padding:9px 10px 11px;}
	/* page9 */
	#page9 .more{padding-bottom: 1px;}
	/* page10 */
	#page10 .more_btn{padding-top: 13px!important;}
}
/*タブレット以下　IEのみ*/
@media all and (-ms-high-contrast: none) and (max-width: 768px){
	/*----------------------------
	全体
	----------------------------*/

	/*----------------------------
	TOP
	----------------------------*/

	/*----------------------------
	下層
	----------------------------*/
	/* pager */
	.pager li a{padding-bottom: 1px;}
}
/*スマホ以下　IEのみ*/
@media all and (-ms-high-contrast: none) and (max-width: 667px){
	/*----------------------------
	全体
	----------------------------*/

	/*----------------------------
	TOP
	----------------------------*/

	/*----------------------------
	下層
	----------------------------*/
	
}