@charset "utf-8";

/*--------------------------------------------------------------------------
   settings
---------------------------------------------------------------------------*/
:root {
  --dark: #222;
  --darker: #111;
  --light: #fff;
  --gold: #917B00;
  --enge: #913500;
}



/*--------------------------------------------------------------------------
   html
---------------------------------------------------------------------------*/

html{
	overflow-y: scroll;
  scroll-behavior: smooth;
	font-size: 62.5%;
}


/*--------------------------------------------------------------------------
   body
---------------------------------------------------------------------------*/

body{
	color: var(--dark);
	background: var(--light);
	font-family: "Shippori Mincho","YuMincho","Yu Mincho","HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 1.6rem;
	line-height: 1.8;
	letter-spacing: .04em;
	-webkit-text-size-adjust: 100%;	
}

/* fonts */
.serif{
	font-family: "Shippori Mincho","YuMincho","Yu Mincho","HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;	
}
.sans-serif{
  font-family:"Zen Kaku Gothic New","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","游ゴシック体", "Yu Gothic", YuGothic,"メイリオ",Meiryo ,"ＭＳ Ｐゴシック" ,"MS P Gothic" ,sans-serif;
}
.en{
	font-family: "Cormorant Infant", serif;
}


/*--------------------------------------------------------------------------
   base link
---------------------------------------------------------------------------*/

a{
	outline: none;
}
a:link,
a:visited{
	text-decoration: none;
	color: var(--dark);
}

.ophover{
	transition: opacity ease .3s;	
}
.ophover:hover{
	opacity: .7;
}

.phone-link{
  pointer-events: none;  
}


/*--------------------------------------------------------------------------
   img
---------------------------------------------------------------------------*/
img{
	max-width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;	
}
.b-radius{
	border-radius: 4px;
}


/*--------------------------------------------------------------------------
   Animation
---------------------------------------------------------------------------*/

.fade,.fade01,.fade02,.fade03,.fade04,.zoom,
.delay01,.delay02,.delay03,.delay04,.delay05 {
	transition: 1.3s;
}
.blur{
	transition: .3s;
}
.fade {
	opacity: 0;
	transform: translate(0,0); 
}
.fade01{
	opacity: 0;
	transform: translate(0,30px); 
}
 .fade02 {
	opacity: 0;
	transform: translate(0,-30px); 
}
.fade03 {
	opacity: 0;
	transform: translate(-30px,0); 
}
.fade04 {
	opacity: 0;
	transform: translate(30px,0); 
}
.blur {
  /*-webkit-filter: blur(14px);
	filter: blur(14px);
	transform: translateZ(0);
	backface-visibility: hidden;
	will-change: filter;*/	  
}
.zoom{
  transform: scale(1.1,1.1); 
}
.delay01{
	transition-delay: 0.3s;		
}
.delay02{
	transition-delay: 0.6s;		
}
.delay03{
	transition-delay: 0.9s;		
}
.delay04{
	transition-delay: 1.2s;		
}
.delay05{
	transition-delay: 1.5s;		
}

.mv {
	opacity: 1;
	transform: translate(0,0) scale(1,1); 
}
.blur.mv{
  /*-webkit-filter: blur(0);
	filter: blur(0);
	transform: translateZ(0);*/	
}


@keyframes fadein{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes arwmove {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0);
  }
	100% {
    transform: translateX(100%);
  }
}
@keyframes arwup{
  0% {
    transform: translateY(100%);
  }

  50% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(-100%);
  }
}


/*--------------------------------------------------------------------------
   PC
---------------------------------------------------------------------------*/
.sp{
	display: none;	
}
/* box-sizing ---*/	
header, footer, nav, main, section, article, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, th, td, a, span, small, strong, em, input, select, textarea, button {
	box-sizing: border-box;
}


/*--------------------------------------------------------------------------
   Container
---------------------------------------------------------------------------*/
.inner{
	max-width: 1040px;
	padding: 0 20px;
	margin: 0 auto;
}
.layout-box{
  display: flex;
  justify-content: space-between;  
}


/*--------------------------------------------------------------------------
   header
---------------------------------------------------------------------------*/
#Header{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10000;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 16px 10px 16px 20px;
	background: var(--light);
}
.bg-header{
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
	width: 100%;
	height: 70px;
	background: rgba(255,255,255,.5);
	backdrop-filter: blur(20px);
	opacity: 0;
	transition: .5s;
	pointer-events: none;
}
/*.bg-header.scroll{
  opacity: 1;  
}*/
#Header h1{
	line-height: 0;
}
#Header h1 a{
	display: block;
}
.btn-trigger{
	display: none;	
}


/* ---------------------------------------------------------------------------
	 #Gnav	
	 グローバルナビゲーション
--------------------------------------------------------------------------- */
.gnav-area{
	display: flex;
	align-items: center;	
}
.gnav{
	display: flex;
	margin-right: 20px;
}
.gnav li{
	margin-right: 10px;
}
.gnav li a{
	display: inline-block;
	padding:  10px;
	font-size: 1.7rem;
}
.hd-tel{
	margin-right: 25px;
}
.hd-tel a{
	display: flex;
	align-items: center;
	line-height: 1;
}
.hd-tel .ico{
	transform: translateY(3px);
	margin-right: 6px;
	line-height: 0;
}
.hd-tel .num{
	font-size: 3rem;
	width: 500;
}
.hd-tel .ttl{
	display: none;
}
.btn-hd-cv a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: fit-content;
	padding: 0 25px;
	height: 50px;
	border-radius: 100vmax;
	background: var(--gold);
	font-size: 1.7rem;
	letter-spacing: .1em;
	color: var(--light);
	line-height: 1;
}
.btn-hd-cv._phone a{
	background: var(--dark);
}
.btn-hd-cv._request a:hover{
		background: var(--dark);
}
.btn-hd-cv a .ico{
	transform: translateY(2px);
	line-height: 0;
}
.btn-hd-cv a .ttl{
	overflow:hidden;
	padding-left: 12px;
	width: fit-content;
	white-space: nowrap;
	transform-origin: left center;
	transition: .3s;
}
.btn-hd-cv._phone .ttl{
	max-width: 108px;
	font-size: 1.4rem;
}
.btn-hd-cv._request{
	margin-left: 8px;
}
.btn-hd-cv._request .ttl{
	max-width: 87px;
}
.btn-hd-cv._notxt .ttl{
	max-width: 0;
	padding-left: 0;
}


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
.content{
  margin-top: 90px;  
}
.txt{
	line-height: 2;
}


/* 見出し
-----------------------------------------------------------------*/


/* ボタン
-----------------------------------------------------------------*/
/* arw ----*/
span.arw{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 52px;
	height: 52px;
	border-radius: 100vmax;
	border: 1px solid #444;
}
span.arw._w{
	border-color: var(--light);
}
span.arw > span{
	display: block;
	width: fit-content;
	line-height: 0;
	overflow: hidden;
}
span.arw > span img{
	display: inline-block;
}
.has-arw:hover span.arw > span img,
a:hover span.arw > span img{
	animation: arwmove 1.8s ease 0s infinite none running;
}

/* btn-square ----*/
.btn-square a{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 420px;
	height: 103px;
	margin-inline: auto;
	background: #222;
	border-radius: 4px;
	color: var(--light);
	font-size: 2rem;
	letter-spacing: .1em;
	transition: .3s;
}
.btn-square a:hover{
	background: var(--gold);	
}
.btn-square a .arw{
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
}

/* gold */
.btn-square._gold a{
	background: var(--gold);
}
.btn-square._gold a:hover{
	background: #222;
}


/* clearfix
-----------------------------------------------------------------*/
.cf:after{
	clear :both;
	content: "";
	display: block;
	height: 0;
}


/*--------------------------------------------------------------------------
   Cv
---------------------------------------------------------------------------*/
.ft-area{
	position: relative;
	z-index: 15;	
	background: var(--light);
}
#Cv{
	padding: 200px 0 50px;	
}
#Cv .inner{
	display: flex;
	justify-content: space-between;
  flex-wrap: wrap;
	max-width: 1160px;	
}
#Cv h2{
  width: 100%;  
}
#Cv .map{
  max-width: 594px;
}
#Cv .txt-area{
	max-width: 450px;
	width: calc(100% - 620px);
}
#Cv .inq-info{
	margin-bottom: 55px;
}
#Cv h2{
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	font-size: 2rem;
	line-height: 1;
}
#Cv h2 .ico{
	transform: translateY(2px);
	margin-right: 10px;
	line-height: 0;
}
#Cv .phone{
	margin-bottom: 20px;
	font-size: 6rem;
	letter-spacing: .08em;
	line-height: 1;
}
#Cv .inq-info h3{
	margin-bottom: 5px;
	font-size: 1.5rem;
}
#Cv .inq-info dl{
	display: flex;
	font-size: 1.4rem;
	line-height: 1.5;
}
#Cv .inq-info dl > div{
	display: flex;
}
#Cv .inq-info dl > div:nth-child(n+2){
	margin-left: 20px;
}
#Cv .inq-info dl dt{
	color: var(--gold);
	margin-right: 1em;
}
#Cv .btn-ft-cv a{
	max-width: 450px;
}
.page-notes{
	padding: 50px 0;
}
.page-notes .inner{
	max-width: 1160px;	
}
.page-notes ul li,
.page-notes p{
	text-indent: -1em;
	padding-left: 1em;
	font-size: 1.4rem;
}
.btn-gotop{
	position: absolute;
	right: 0;
	top: 1px;
	z-index: 1000;
	transform: translateY(-100%);
}
.btn-gotop.fixed{
	position: fixed;
	top: auto;
	bottom: 0;
	transform: none;
	box-shadow: 0 0 10px rgba(184,213,181,.4);
}
.btn-gotop a{
	display: flex;
	align-items: center;
	padding: 15px 20px;
	background: var(--light);
	border-radius: 9px 0 0;
}
.btn-gotop a span{
	overflow: hidden;
	line-height: 0;
	margin-left: 5px;	
}
.btn-gotop span img{
	display: inline-block;
	width: 10px;
}
.btn-gotop a:hover span img{
	animation: arwup 2.5s ease 0s infinite none running;
}


/*--------------------------------------------------------------------------
   Footer
---------------------------------------------------------------------------*/
#Footer{
	padding: 50px 0 100px;
}
#Footer .logo{
	margin-bottom: 40px;
	text-align: center;
}
#Footer .copyright{
	text-align: center;
	font-size: 1.2rem;
	letter-spacing: .05em;
}

























/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  
	#Page {
		min-width: 320px;	
	}
	
	img{
		width: 100%;
		height: auto;
	}
	
	.pc{
		display: none;	
	}
	.sp{
		display: block;	
	}
	img.sp,
	br.sp{
		display: inline;
	}
	
	.phone-link{
		pointer-events: auto;  
	}


/*--------------------------------------------------------------------------
   Container
---------------------------------------------------------------------------*/
  .content{
    margin-top: 60px;  
  }
	.inner{
		max-width: none;	
	}


/*--------------------------------------------------------------------------
   header
---------------------------------------------------------------------------*/
	#Header{
		padding: 10px;
		height: 60px;
	}
	#Header h1 img{
		width: 158px;
	}
	.bg-header{
		height: 60px;
	}
	.btn-trigger{
		position: relative;
		z-index: 12000;
		display: block;
		width: 82px;
		height: 40px;
		border-radius: 100vmax;
		background: var(--gold);
		cursor: pointer;	
	}
	.btn-trigger.on{
		position: fixed;
		right: 10px;
		top: 10px;
		background: var(--dark);
	}
	.btn-trigger > span{
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		display: block;
		width: 100%;
		text-align: center;
		line-height: 1;
		color: var(--light);
		font-size: 1.6rem;
		letter-spacing: .08em;
		font-weight: 500;
		transition: .3s;
	}
	.btn-trigger .close{
		opacity: 0;
	}
	.btn-trigger.on .menu{
		opacity: 0;
	}
	.btn-trigger.on .close{
		opacity: 1;
	}


/* ---------------------------------------------------------------------------
	 #Gnav	
	 グローバルナビゲーション
--------------------------------------------------------------------------- */
	#Gnav{
		position: fixed;
		left: 0;
		top: 0;
		z-index: 11000;
		width: 100%;
		height: 100vh;
		transition: .5s;
		transform: translateX(110%);
	}
	#Gnav.on{
		transform: translateX(0);
	}
	#Gnav::before{
		position: fixed;
		left: 0;
		top: 0;
		display: block;
		content: "";
		width: 100%;
		height: 100%;
		background: rgba(255,255,255,.5);
		backdrop-filter: blur(20px);
		opacity: 1;
		transition: .5s;
	}
	.gnav-area{
		position: relative;
		display: block;
		width: 200px;
		height: 100vh;
		overflow: auto;
		margin-left: auto;
		padding: 60px 20px;
		background: var(--light);
		transform: translateX(100%);
		transition: .5s;
		transition-delay: .3s;
	}
	.on .gnav-area{
		transform: translateX(0);
	}
	.gnav{
		display: block;
		margin: 0 0 30px 0;
		font-size: 1.5rem;
	}
	.gnav li{
		margin-right: 0;
	}
	.gnav li a{
		display: block;
		padding: 10px;
	}
	.hd-tel{
		margin: 0 0 20px 0;
	}
	.hd-tel a{
		display: flex;
		justify-content: center;
		width: 100%;
		height: 60px;
		border-radius: 100vmax;
		background: var(--dark);
		color: var(--light);
	}
	.hd-tel .ico{
		transform: translateY(0);
		margin-right: 6px;
		line-height: 0;
	}
	.hd-tel .num{
		display: none;
	}
	.hd-tel .ttl{
		display: block;
	}
	.btn-hd-cv a{
		width: 100%;
		height: 60px;
		padding: 0 12px;
	}
	.btn-hd-cv._phone a{
		background: var(--dark);
	}
	.btn-hd-cv._request a:hover{
		background: var(--dark);
	}
	.btn-hd-cv a .ico{
		transform: translateY(2px);
		line-height: 0;
	}
	.btn-hd-cv._phone .ttl{
		max-width: none;
		padding-left: 5px;
		font-size: 1.4rem;
	}
	.btn-hd-cv._request{
		margin: 20px 0 0;
	}
	.btn-hd-cv._request .ttl{
		max-width: none;
		padding-left: 0;
	}
	.btn-hd-cv._reques a:hover{
		background: var(--gold);
	}
	.btn-hd-cv._phone a .ico,
	.btn-hd-cv._request a .ico{
		display: none;
	}


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
	.txt{
		line-height: 2;
	}


/* 見出し
-----------------------------------------------------------------*/



/* ボタン
-----------------------------------------------------------------*/
/* arw ----*/
	span.arw{
		width: 40px;
		height: 40px;
	}
	span.arw > span img{
		width: 10px;
	}
.has-arw:hover span.arw > span img,
a:hover span.arw > span img{
	animation: none;
}

/* btn-square ----*/
	.btn-square a{
		max-width: 400px;
		height: 92px;
		font-size: 1.7rem;
	}
	.btn-square a:hover{
		background: var(--dark);	
	}
	.btn-square a .arw{
		right: 10px;
	}

/* gold */
	.btn-square._gold a:hover{
		background: var(--gold);
	}


/*--------------------------------------------------------------------------
   Cv
---------------------------------------------------------------------------*/
	#Cv{
		padding: 100px 0 30px;
	}
	#Cv .inner{
		display: block;
	}
	#Cv .map{
		margin-bottom: 60px;
	}
	#Cv .txt-area{
		max-width: none;
		width: 100%;
	}
	#Cv .inq-info{
		margin-bottom: 80px;
	}
	#Cv h2{
		margin-bottom: 20px;
	}
	#Cv h2 .ico{
		transform: translateY(2px);
		margin-right: 5px;
		line-height: 0;
	}
	#Cv .phone{
		margin-bottom: 20px;
		font-size: 4.5rem;
	}
	#Cv .inq-info dl{
		display: block;
	}
	#Cv .inq-info dl > div{
		display: flex;
	}
	#Cv .inq-info dl > div:nth-child(n+2){
		margin: 5px 0 0;
	}
	#Cv .btn-ft-cv a{
		max-width: none;
		width: 100%;
	}
	.page-notes{
		padding: 30px 0;
	}
	.btn-gotop{
		display: none;		
	}
	
	
/*--------------------------------------------------------------------------
   Footer
---------------------------------------------------------------------------*/	
	#Footer{
		padding: 30px 0 60px;
	}
	#Footer .logo{
		width: 222px;
		margin: 0 auto 25px;
	}
	#Footer .copyright{
		font-size: 1.1rem;
		letter-spacing: .02em;
	}
  
}