@charset "utf-8";

/*===============================================*/

/*  common.css */

/*===============================================*/


/*//////////////////////////////////

reset
///////////////////////////////////*/

/* Fonts
---------------------------------------------------------------------*/
/*localfont  -------------------------*/
@font-face {font-family: sMb; src: url('../fonts/AP-OTF-ShueiMGoStd-B.otf');}



/*iconfont  -------------------------*/
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?54c98u');
  src:  url('../fonts/icomoon.eot?54c98u#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?54c98u') format('truetype'),
    url('../fonts/icomoon.woff?54c98u') format('woff'),
    url('../fonts/icomoon.svg?54c98u#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' ,'bglogo'!important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-home:before {content: "\e903";}
.icon-mail:before {content: "\e900";}
.icon-mail2:before {content: "\e901";}
.icon-tel:before {content: "\e902";}
.icon-line:before {content: "\e009";}
.icon-instagram:before {content: "\ea92";}
.icon-twitter:before {content: "\ea96";}
.icon-facebook:before {content: "\ea90";}
.icon-bglogo:before {content: "\e100";color: #bcbcbc;}



/*site main rules
---------------------------------------------------------------------*/

/*color  ------------------*/
.fcBlk{color:#000;}
.fcWht{color:#fff;}
.fcGly{color:#555555;}
.fcBrn{color:#bf8f46;}
.bgcBlc{background-color:#000;}
.bgcWht{background-color:#fff;}
.bgcGly{background-color:#555555;}
.bgcBrn{background-color:#bf8f46;}
.bgcGld{background: linear-gradient(60deg, rgba(230, 255, 195, 1), rgba(239, 247, 230, 1));}

/*テキストのハイライトカラーを変える  ------------------*/
::selection{ /* Safari and Opera */background:#fff; color:#b2aa97;}
::-moz-selection{ /* Firefox */background:#fff ; color:#b2aa97 ;}

/*link  ------------------*/
a:link {color: #555555;text-decoration: none;}
a:visited {color: #555555;text-decoration: none;}
a:hover {color: #555555;text-decoration: none;}
a:active {text-decoration: none;}


/* reset
---------------------------------------------------------------------*/
html{height: 100%;}
body{
	position: relative;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 100%; /* IE */
	line-height: 26px;
	color: #000;
	font-family : "sMb" ,  "Noto Sans Japanese","Lucida Grande", "segoe UI", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Meiryo", "Verdana", "Arial", "sans-serif";
	font-weight: 600;
	-webkit-text-size-adjust: none;	/*border:solid 13px #00336a;*/ }

@media screen and (max-width: 768px){body {font-family : "sMb" , "ヒラギノ角ゴ ProN" , sans-serif; } }

html>/**/body {font-size: 16px; /* Except IE */}

h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd,
table, caption, th, td, img, form {
	margin: 0;
	padding: 0;
	border: none;
	font-style: normal;
	font-weight: normal;
	font-size: 16px;
	text-align: left;
	list-style-type: none; }

/* テキストエリア内文字サイズのブラウザ間での差異をなくす */
textarea { font-size: 100%; }

/* 画像の下にできる隙間をなくす */
img {border:0;vertical-align: bottom;}
img {max-width: 100%; height: auto; width /***/:auto;}

/* hr 要素は不可視で使う */
hr { display: none; }

/* br 要素のレスポンシブ化 */
@media screen and (max-width: 959px){.brNone { display: none; }}


/*margin
----------------------------------*/
/*上  ------------------*/
.mrt5{margin-top:5px;}
.mrt10{margin-top:10px;}
.mrt15{margin-top:15px;}
.mrt20{margin-top:20px;}
.mrt30{margin-top:30px;}
.mrt40{margin-top:40px;}
.mrt50{margin-top:50px;}

/*右  ------------------*/
.mrr1{margin-right:1px;}
.mrr2{margin-right:2px;}
.mrr3{margin-right:3px;}
.mrr4{margin-right:4px;}
.mrr5{margin-right:5px;}
.mrr6{margin-right:6px;}
.mrr7{margin-right:7px;}
.mrr8{margin-right:8px;}
.mrr9{margin-right:9px;}
.mrr10{margin-right:10px;}
.mrr15{margin-right:15px;}
.mrr20{margin-right:20px;}
.mrr25{margin-right:25px;}
.mrr30{margin-right:30px;}

/*下  ------------------*/
.mrb5{margin-bottom:5px;}
.mrb10{margin-bottom:10px;}
.mrb15{margin-bottom:15px;}
.mrb20{margin-bottom:20px;}
.mrb30{margin-bottom:30px;}
.mrb40{margin-bottom:40px;}
.mrb50{margin-bottom:50px;}


/*左  ------------------*/
.mrl1{margin-left:1px;}
.mrl2{margin-left:2px;}
.mrl3{margin-left:3px;}
.mrl4{margin-left:4px;}
.mrl5{margin-left:5px;}
.mrl6{margin-left:6px;}
.mrl7{margin-left:7px;}
.mrl8{margin-left:8px;}
.mrl9{margin-left:9px;}
.mrl10{margin-left:10px;}
.mrl15{margin-left:15px;}
.mrl20{margin-left:20px;}
.mrl25{margin-left:25px;}
.mrl30{margin-left:30px;}


/*font-size
----------------------------------*/
.f8{font-size:8px;}
.f9{font-size:9px;}
.f10{font-size:10px;}
.f12{font-size:12px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f18{font-size:18px;}
.f20{font-size:20px;}
.f22{font-size:22px;}
.f24{font-size:24px;}
.f26{font-size:26px;}
.f28{font-size:28px;}
.f30{font-size:30px;}


/*float
----------------------------------*/
.left{float:left;}
.right{float:right;}
#left{float:left;}
#right{float:right;}



/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

opening/loader
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.loading {
	width: 100%;
	height: 100%;
	background: #fff;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 10001; }

.loading div {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	margin: auto; 
	width: 250px;
	height: 250px; }

@media screen and (max-width: 768px){ 
.loading div {width: 200px;height: 200px; }}





/*//////////////////////////////////

module
///////////////////////////////////*/

/*column
---------------------------*/
.column1{
	margin:0 auto ;
	width:100%;
	height:auto;
	box-sizing: border-box;
	position: relative;}
@media screen and (max-width: 959px){ .column1{width:100%; } }


.column2{
	/*max-width:1400px;*/
	height:auto;
	box-sizing: border-box;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between; }

@media screen and (max-width: 959px){ .column2{width:100%; flex-wrap: wrap;} }
@media screen and (max-width: 768px){ 
	.column1{margin:50px auto ;}
	.column1:after {left:0px;} }


/*工事中
---------------------------*/
.construction {
	margin: 0px 0px 50px;
	padding:100px 0 0;
	width: 100%;
	box-sizing: border-box; }


.construction h2 {
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 0px 0px;
	font-size:20px;
	text-align:center; }

	
.construction p {
	text-align:center;
	font-size:14px; }

.construction p span {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	color:#ea608e;
	font-weight:bold; }




/*//////////////////////////////////

 animation
///////////////////////////////////*/


/*要素出現
---------------------------------*/
.mask-Wrap{
	margin:0;
	padding:0;
	box-sizing: border-box;
	width: 100%;
	position: relative;
	overflow: hidden; }

/*curtain motion---------------*/
.curtainIn{ position:relative ; /*opacity: 0;*/ z-index: 0; }

/*curtain
---------------------------------*/
.maskWH { width: 100%; height: 100%; position: absolute; top:0; z-index: 5; background-color: #fff; }
.maskWH-wh { width: 100%; height: 100%; position: absolute; top:0; z-index: 4; background-color: #b2aa97;}

/*animation ------------*/
.ef-animation .maskWH {animation: maskWH 0.3s ease-out 0.5s forwards; margin-left: 0; }
.ef-animation .maskWH-wh { animation: maskWH 0.4s ease-out 0.8s forwards; margin-left: 0; }
@keyframes maskWH { 0% { margin-left: 0;} 100% {margin-left: 100%;} }


/*line 
.lineWrap {width: 60px; height:2px;}
.lineBlk { width: 60px; height: 50%; position: absolute; top:-12px; left:125px; z-index: 4; background-color: #f39800;}
.lineRed { width: 60px; height: 50%; position: absolute; top:-12px; left:125px; z-index: 5; background-color: #595656;}

/*mask 
.maskBlk { width: 100%; height: 100%; position: absolute; top:0; z-index: 4; background-color: #161616;}
.maskRed { width: 100%; height: 100%; position: absolute; top:0; z-index: 5; background-color: #de0716;}


/*animation -------------
.ef-animation { animation: ef-animation 0.5s cubic-bezier(.68,0,.37,1) 0.5s forwards;}
@keyframes ef-animation{ 0%{ opacity: 1;} 100% { opacity: 1;} }

/*line 
.ef-animation .lineBlk {animation: lineAnm 0.8s cubic-bezier(.68,0,.37,1) 0.3s forwards; width: 0; }
.ef-animation .lineRed { animation: lineAnm 0.8s cubic-bezier(.68,0,.37,1) 0.7s forwards; width: 0; }
@keyframes lineAnm { 0% { width: 0;} 100% {width: 100%;} }

/*mask 
.ef-animation .maskBlk {animation: maskAnm 0.3s ease-out 0.5s forwards; margin-left: 0; }
.ef-animation .maskRed { animation: maskAnm 0.4s ease-out 0.8s forwards; margin-left: 0; }
@keyframes maskAnm { 0% { margin-left: 0;} 100% {margin-left: 100%;} }



/*- @media
@media screen and (max-width: 768px){
.lineBlk { width: 20px; top:-12px; left:110px; z-index: 4; background-color: #f39800;}
.lineRed { width: 20px; top:-12px; left:110px; z-index: 5; background-color: #595656;}
.lineWrap {height:;} } -*/


/*fade motion---------------------*/
.move,
.move:hover {transition:all 0.4s ease-in-out 1.0s;}

.fade_box {
	-webkit-transform: translateY(30px);
	-moz-transform: translateY(30px);
	transform: translateY(30px);
	opacity: 0; }






/*button
---------------------------------*/
.button{
	cursor: pointer;
	display: block;
	position: relative;
	z-index: 0;
	border: 2px solid #bf8f46; 
	transition: all 0.25s cubic-bezier(0.42, 0, 0.58, 1);0s;
	
	padding:15px;
	width:100%;
	height:auto;
	font-size: 18px;
	text-align: center;
	color: #bf8f46 !important;
	background: #fff;
	font-weight: bold;
	box-sizing: border-box;
	border-radius: 20px;}

.button:before {
 	display: block;
	position: absolute;
	top: 0px;
	right: 0px;
	height: 100%;
	width: 0px;
	z-index: -1;
	content: '';
	color: #fff !important;
	background:#bf8f46;
	transition: all 0.25s cubic-bezier(0.42, 0, 0.58, 1);0s; border-radius: 15px;}

.button:hover {color: #fff !important; border: 2px solid #bf8f46; }
.button:hover:before {left: 0%; right: auto; width: 100%; }




/*photo btn-------*/
.ovBtn{
	position: absolute;
	z-index:2;
	width:100%;
	height:100%;
	transition: 0.5s ease-out;
	background: linear-gradient(-45deg, rgba(230, 255, 195, 0.8), rgba(239, 247, 230, 0.8));
	/*animation: bg-color 3s infinite alternate;*/
	opacity:0; }
.ovBtn:hover{opacity:1;  box-shadow: 0px 0px 10px #4a4a4a;}




/**/
.mcurtain{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height:100%;
	-webkit-animation: mcurtain 1s;
	-webkit-animation-iteration-count: 1;
	z-index: 99; }

@-webkit-keyframes mcurtain {
	0% {width:100%; background-color: #fff;}
	100% {width:0%; background-color: #fff;}
}

/**/

.transform01 {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all .5s ease;
	transition: all .5s ease; }



/*//////////////////////////////////

Header
///////////////////////////////////*/

header{
	top: 0px;
	position: fixed;
	z-index: 1000;
	margin:0 auto;
	padding:0 0;
	box-sizing: border-box;
	width: 100%;
	height:130px;
	background-color: #fff; }


/*G_Nav
------------------------------------*/
nav{
	position:relative;
	margin:0 auto; 
	padding:0 ;
	max-width: 1300px;
	height:auto;
	box-sizing: border-box; }

nav h1{
	z-index: 100;
	position:absolute;
	top:0;
	right:0;
	bottom:-20px;
	left:0;
	
	margin:auto; 
	width : 200px;
	height:200px;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 100px;}

nav h1 figure{
	margin: auto;
	padding-top: 30px;
	width : 120px;
	height:auto;}

.gnavList{
	position:relative;
	z-index: 101;
	margin: 0 auto;
	padding-top: 100px;
	max-width:88%;
	height:auto;

	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between; }

.gnavList li{
	margin-bottom: 30px;
	width:25%%;
	font-size:18px;
	line-height:18px;
	text-align:center;
	font-weight:200;
	letter-spacing: 0.1em; 
	position: relative;/*lineAnimation*/ 
	font-family: sMb;
	transition: .2; }

.gnavList li a {
	display: block;
	position: relative;
	z-index: 0;
	top: ;
	right: ;
	width: ;
	height: ;
	transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);0s;}

.gnavList li a:before {
	position: absolute;
	bottom: -12px;
	left: 0%;
	height: 3px;
	width: 0px;
	z-index: -1;
	content: '';
	background-color:#bf8f46 ;
	transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);0s; }

.gnavList li a:link {color: #555555 !important;}
.gnavList li a:visited {color: #bf8f46 !important;}
.gnavList li a:hover,.gnavList li a.active{color: #bf8f46 !important;}
.gnavList li a:hover:before,.gnavList li a.active:hover:before { right: auto; width: 100%;}


/* #iconList-----------*/

.iconList {
	position:absolute;
	bottom:20px;
	width:100%;
	text-align: left; }

.iconList h3{
	margin-bottom: 10px;
	font-size:12px;
	line-height:12px;
	font-weight:400;
	letter-spacing: ; 
	font-family: latoB; }
	
.iconList i {width:0px;height:0px; margin:0 5px 0 0;}
.iconList { -webkit-transition: all .3s ease-out .2s; transition: all .3s ease-out .1s;}
.iconList span {font-size:20px; transition: .3s; color:#000;}
.iconList span:hover {color: #b2aa97 !important;} 


/*- @media 959px-*/
@media screen and (max-width: 959px){
header{width: 100%; height:auto; background:none;}
nav{padding:0 ; text-align: center;}
nav h1{position:relative;top:0;right:0;bottom:0;left:0;margin:auto; width : 70px;height:70px;background:none;}
nav h1 figure{margin: auto; padding-top: 20px;width :auto; height:auto;}
.gnavList,.iconList,nav h1 div{display:none; } }


/*heroHeader
---------------------------*/
.heroHeader {
	position:relative;
	margin:130px auto 0;
	max-width: 1300px;
	height:700px;
	border-radius:20px 20px 0 0; }

.heroHeader video {
	width: 100%;
	border-radius:20px 20px 0 0;
	max-height: 100%;
}

/**/
.top-ttlWrap {
	position: absolute;
	top:10%;
    left:5%;
	
	margin:0 0 0 0;
	width :100px;
	height: auto;
	z-index: 101; }

.top-ttlWrap ul{
	width : 100%;
	height: auto;
	box-sizing: border-box;
	
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between }

.top-ttlWrap ul li{
	width : 100%;
	height: auto;
	margin:0 5px;
	padding:0.6em 0em 0em;
	box-sizing: border-box;
	
	background-color:#fff;
	border-radius:10px;
	
	font-size:26px;
	line-height:56px;
	font-weight:200;
	letter-spacing: 0.1em;
	color:#bf8f46;
	text-align: left;
	font-family: sMb;
	font-feature-settings : 'pkna';
    writing-mode: vertical-rl; }

.top-ttlWrap2 {
	position: absolute;
	top:10%;
    right:5%;

/*- @media 959px -*/
@media screen and (max-width: 959px){
.heroHeader {margin:80px auto; padding: 0 0 50px; height:400px;}
.top-ttlWrap {position: absolute;top:15%;left:3%;width :100px; }
.top-ttlWrap2 {position: absolute;top:12%;right:3%; }
.top-ttlWrap ul li{width : 100%;height: auto;margin:0 5px;padding:0.5em 0em 0em;border-radius:5px;font-size:14px;line-height:38px; } }

/*- @media 768px -*/
@media screen and (max-width: 768px){
.heroHeader {margin:80px auto; padding: 0 0 50px; width: 100%; height: 100%; height: 100vh;  overflow: hidden; position: relative;  }
.heroHeader video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	z-index: 1; }
	
.top-ttlWrap2 {position: absolute;top:12%;right:3%;width :70px; }}


/*scrollanimation------------*/
.scrl {
	padding:0px 0 0 10px;
	width:8px;
	height:100px;
	position: absolute;
	bottom: 0px;
	right: 20px;
	z-index: 1000;}

.scrl a {
	padding-top: 40px;
	color:#00ff0c;
	letter-spacing: 0.1em;
	-ms-writing-mode: tb-rl;/* IE用　*/
	writing-mode: vertical-rl; }

.scrl a span {
	position: absolute;
	top: 0px;
	left: 60%;
	content: '';
	width: 1px;
	height: 100px;
	margin-left: -1px;
	background-color: #00ff0c;
	-webkit-animation: sdb 2s infinite;
	animation: sdb 2s infinite;
	box-sizing: border-box;}

.scrl a span:after {
	position: absolute;
	bottom: 0px;
	left: -6px;
	content: '';
	width: 10px;
	height: 10px;
	border: 1px solid;
	border-color: transparent #00ff0c transparent transparent;
	transform: rotate(45deg); }


@keyframes sdb {
	0% {transform: translate(0, 0); opacity: 1;}
	50% {transform: translate(0, 50px);opacity: 1;}
	100% { opacity: 1;}}
@-webkit-keyframes sdb {
	0% {transform: translate(0, 0); opacity: 1;}
	50% {transform: translate(0, 50px);opacity: 1;}
	100% { opacity: 1;}}


/*- @media 959px -*/
@media screen and (max-width: 959px){
.scrl {display: none;} }



/*main
------------------------------------*/
main {
	margin:0 auto ;
	padding:0;
	width : 100%;
	box-sizing: border-box;
	height:auto;
	position:relative;
	z-index: ;}

/*- @media 959px-*/
@media screen and (max-width: 959px){
main {padding:0% 0%; width : 100%; } }



/*h2ttl
---------------------------*/

.h2ttl{
	margin-bottom: 50px;
	font-size:18px;
	line-height:18px;
	color:#b2aa97;
	letter-spacing: 0.05em;
	font-family: latoB;
	font-feature-settings : "palt";
	position:relative; }

.h2ttl:after {
	position: absolute;
	top: -12px;
	left: -12px;
	content: '';
	width: 10px;
	height: 2px;
	background-color: #b2aa97;
	animation: spin 7s linear infinite;}

.h2ttl:before {
	position: absolute;
	top: -16px;
	left: -8px;
	content: '';
	width: 2px;
	height: 10px;
	background-color: #b2aa97;
	animation: spin 7s linear infinite;}

@keyframes spin {
	0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); } }




/*- @media 959px-*/
@media screen and (max-width: 959px){ }

/*- @media 768px-*/
@media screen and (max-width: 768px){
.h2ttl {margin-bottom: 20px;width:100%; }
.h2ttl p {font-size:18px;line-height:18px; }
.h2ttl p:before {top: 5px;left: -12px;width: 5px;height: 5px; }
.h2ttl p:after {top:-2px;left:180px; } }


/*page-top
---------------------------*/	
#page-top{
   width:70px;
   height:70px;
   display:none;
   position:fixed;
   right:10px;
   bottom:0px;
   z-index:100; }
 
#page-top p{
   margin:0;
   padding:0;
   text-align:center;
   -webkit-transition:all 0.3s;
   -moz-transition:all 0.3s;
   transition:all 0.3s; }

#move-page-top{
   color:#fff;
   line-height:50px;
   text-decoration:none;
   display:block;
   cursor:pointer; }

/*- @media 768px-*/
@media screen and (max-width: 768px){#page-top p{display:none;} }



/*google map
------------------------------------*/
.gmap1 {
	margin:30px auto 0;
	padding:0;
	width:100%;
	height:550px ; }

@media screen and (max-width: 959px){ .gmap1{margin:0px auto; width:100%; height:300px;} }


/*////////////////////////////////

footer
////////////////////////////////*/		

footer{ 
	margin: 30px 0 0 0;
	width:100%;
	height:auto;
	position:relative; }

/*fInner-----------------*/
.fInner{
	padding: 0 0 30px;
	position:relative; }

#copy{
	width:95%;
	margin:0 auto;
	text-align: center;
	font-size: 12px;
	line-height:12px;
	font-weight:100;
	font-family: latoB; }


	/*- @media 768-*/
	@media screen and (max-width: 768px){
		.fInner{
			padding: 0 0 80px;
		}
		#copy{
			text-align: center;font-size: 14px;line-height:14px;
		}
	}
}



/*SP時MVの高さを変更 2025_09_16 written by hanada*/

.inst_Area{
	margin: 40px auto 80px!important;
}


@media screen and (max-width: 768px){
	.heroHeader{
		height: 500px;
	}

	.inst_Area{
		margin: 0 auto 80px!important;
	}
}

@media screen and (max-width: 500px){
	.heroHeader{
		height: 300px;
	}

	.sec-Kdwr p{
		text-align: center!important;
	}
}