@charset "utf-8";
html{
	width:100%;
	font-family: "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "游明朝" , "Yu Mincho" , YuMincho , "MS P明朝", "MS PMincho", serif;
}
body{
	width:100%;
	color:#222;
}
.sp{display:block;}
.pc{display:none;}
a{
	color:#222;
	text-decoration:underline;
}
img {
	border:0;
	vertical-align:top;
	max-width: 100%;
	height: auto;
}
em{
	font-style:normal;
	font-weight:bold;
}
.bold{
	font-weight:bold;
}
.img100{
	width:100%;
}
.w1200{
	max-width:1200px;
	margin-left:auto;
	margin-right:auto;
}
.w1000{
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
}
.w900{
	max-width:900px;
	margin-left:auto;
	margin-right:auto;
}
.w80{
	width:80%;
	margin-left:auto;
	margin-right:auto;
}
.w90{
	width:90%;
	margin-left:auto;
	margin-right:auto;
}
.w96{
	width:96%;
	margin-left:auto;
	margin-right:auto;
}
.fGo{
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
}
.fEn01{
  font-family: "Cinzel", serif;
  font-weight: 400;
}
@media (min-width:768px) {
	.sp{display:none;}
	.pc{display:block;}
	a{
		transition:0.3s;
	}
	a:hover{
		opacity: 0.7;
	}
	a[href^="tel:"] {
	    pointer-events: none;
	}
}
/* base */


/*ヘッダー*/
.anchor{
	display:block;
	margin-top:-60px;
	padding-top:60px;
}
header{
	position:fixed;
	z-index:101;
	width:100%;
	height:60px;
	margin:0 auto;
	top:0;
	transition-duration:0.2s;
}
header.isScroll{
	background-color:rgba(255,255,255,0.9);
}
main{
/*	margin-top: 60px;*/
	overflow: hidden;
}
@media (min-width:768px) {
	.anchor{
		display:block;
		margin-top:-120px;
		padding-top:120px;
	}
	header{
		height:120px;
	}
	main{
/*		margin-top: 120px;*/
	}
}
header #hLogoToyota{
	position: fixed;
	top: 10px;
	left: 10px;
	height: 40px;
}
header #hLogoToyota img{
	height: 100%;
}
header #hLogoSite{
	position: fixed;
	top: 12px;
	left: 12px;
	width: 240px;
}
/*問い合わせボタン*/
header .hBtnWrap{
	display:none;
}
@media (min-width:768px) {
	header #hLogoToyota{
		top: 20px;
		left: 30px;
		height: 83px;
	}
	header #hLogoSite{
		top: 20px;
		left:20px;
		width: 463px;
	}
	header .hBtnWrap{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: fixed;
		gap: 20px;
		right: 120px;
		top: 35px;
		z-index:100;
		height:50px;
	}
	header .hBtnWrap .btn01{
		font-size:min(2vw,16px);
		text-decoration: none;
		position: relative;
		padding-right:0.8em;
	}
	header .hBtnWrap .btn01::after{
		content: "";
		position: absolute;
		display: block;
		width:0.5em;
		height:0.5em;
		border-top:1px solid #000;
		border-right:1px solid #000;
		transform: rotate(45deg);
		right:0;
		top:calc(50% - 0.25em);
	}
	header .hBtnWrap .btn02{
		width:10vw;
		max-width:160px;
		font-size:min(2vw,15px) !important;
	}
}


/*ハンバーガーボタン*/	
#hBtnMenu{
	position:fixed;
	top:0;
	right:0;
	width:60px;
	height:60px;
	padding-top:0;
	text-align:center;
	z-index:10;
}
#hBtnMenu span {
	position: absolute;
	top: 0;
	left: 15px;
	display: block;
	width: 30px; /* 横幅 */
	height: 2px; /* 1本辺りの高さ */
	background: #222; /* 線の色 */
	transition: all 0.3s ease-out;
}

#hBtnMenu .hbBar01 { top: 20px; }
#hBtnMenu .hbBar02 { top: 30px; }
#hBtnMenu .hbBar03 { top: 40px; }

#hBtnMenu.open span{
	background: #222; /* 線の色 */
	}

/* 最上部の線のスタイル ---------------------- */
#hBtnMenu.open .hbBar01 {
  top: 30px; /* 上から2番目の線の位置に変更 */

  /* 線を45度回転 */
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* 上から2番目の線のスタイル ---------------------- */
#hBtnMenu.open .hbBar02 {
  opacity: 0; /* 不透明度を下げて線を消す */
}

/* 最下部の線のスタイル ---------------------- */
#hBtnMenu.open .hbBar03 {
  top: 30px; /* 上から2番目の線の位置に変更 */
  /* 線を135度回転 */
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
@media (min-width:768px) {
	#hBtnMenu{
		width:120px;
		height:120px;
	}
	#hBtnMenu span {
		left: 45px;
	}
	#hBtnMenu .hbBar01 { top: 50px; }
	#hBtnMenu .hbBar02 { top: 60px; }
	#hBtnMenu .hbBar03 { top: 70px; }
	#hBtnMenu.open .hbBar01,
	#hBtnMenu.open .hbBar03 {
	  top: 60px; /* 上から2番目の線の位置に変更 */
	}
}

/*ナビゲーション*/
#gNav{
	display:none;
	width:100%;
	height:calc(100vh - 70px);
	position:absolute;
	top:0;
	left:0;
	background-color:#fff;
	background-image: url(../images/common/gnav_bg.jpg);
	background-size: cover;
	background-position: center center;
}
@media (min-width:768px) {
	#gNav{
		top:0;
		height:100vh;
	}
}
#gNav #gNavWrap{
	width:100%;
	height:95%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
#gNav h2{
	color: #886d3d;
	font-size:max(1.5rem, min(3vw, 3rem) );
	letter-spacing: 0.1em;
	margin-bottom: 1em;
  font-family: "Cinzel", serif;
  font-weight: 400;
  border-bottom:1px solid #886d3d;
  width:auto;
  display:inline-block;
  margin:0 auto 40px;
}
#gNav01{
	width: 90%;
	max-width: 980px;
	text-align: center;
	margin: 0 auto;
}
#gNav01 li{
	display: block;
	width: 100%;
}
#gNav01 a{
	font-size:max(2rem, min(3vw, 3rem) );
	padding:10px 0;
	text-decoration: none;
	display: block;
	color: #222;
	letter-spacing: 0.05em;
  font-family: "Cinzel", serif;
  font-weight: 400;
}



/*========= スクロール途中でヘッダーが表示＆非表示するためのCSS ===============*/
/*　上に上がる動き　*/

#header.UpMove{
	animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime{
  from {
    opacity: 1;
	transform: translateY(0);
  }
  to {
    opacity: 0;
	transform: translateY(-100px);
  }
}

/*　下に下がる動き　*/

#header.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 0;
	transform: translateY(-100px);
  }
  to {
  	opacity: 1;
	transform: translateY(0);
  }
}







/*footer*/
footer{
	width: 100%;
	padding: 80px 0 0;
}
.fConUnit01{
	width:90%;
	max-width:1200px;
	margin:0 auto 40px;
	border-top:1px solid rgba(0,0,0,0.5);
	border-bottom:1px solid rgba(0,0,0,0.5);
	padding:60px 0;
}
.fConLogo01{
	width:60%;
	max-width:315px;
	margin:0 auto 20px;
}
.fConUnit01 .tel01{
	font-size: clamp(3rem,6vw,6rem);
}
.fConUnit01 .tel01 a{
	text-decoration: none;
}
.fConUnit01 .tel01 small{
	font-size:50%;
}
.fConLogo04{
	width:50%;
	margin:0 auto 40px;
	max-width: 257px;
}

.fConUnit02{
	width: 60%;
	min-width: 300px;
	max-width: 450px;
	margin: 0 auto 60px;
	text-align: left;
}
#copyright{
	font-size:max(1rem, min(1.4vw, 1.4rem) );
	line-height: 40px;
	background-color:#000;
	color:#fff;
	margin-bottom: 70px;
}
@media screen and (min-width:768px) {
	footer{
		padding: 80px 0 0;
	}
	.fConUnit02{
		max-width: 257px;
	}
	#copyright{
		line-height: 60px;
		margin-bottom: 0;
	}
}




/*title*/
.pageTtl01{
	width: 100%;
	min-height: 200px;
	height: 44.4vw;
	background-size: cover;
	background-position: center center;
	display: flex;
	justify-content: center;
	align-items: center;
}
.pageTtl01 h2{
	font-size:clamp(2rem, 3vw, 4rem);
	text-align: center;
	letter-spacing: 0.3em;
  font-family: "Cinzel", serif;
  font-weight: 400;
}
.pageTtl02{
	width: 100%;
	min-height: 200px;
	height: 30vw;
	display: flex;
	justify-content: center;
	align-items: center;
}
.pageTtl02 h2{
	font-size:clamp(2rem, 3vw, 4rem);
	margin-top:2em;
	text-align: center;
	letter-spacing: 0.3em;
  font-family: "Cinzel", serif;
  font-weight: 400;
}
.cTtl01{
	font-size:clamp(1.4rem, 2.1vw, 2.8rem);
  font-family: "Cinzel", serif;
  font-weight: 400;
  letter-spacing: 0.2em;
}
.cTtl02{
	display:inline-block;
	padding:0.1em 2em;
	color:#fff;
  font-family: "Cinzel", serif;
	font-size:clamp(1.5rem, 2.2vw, 3rem);
  letter-spacing: 0.2em;
  background-color: #867642;
  background: linear-gradient(180deg, rgba(134,118,66,1) 0%, rgba(117,102,56,1) 100%);
}
.cTtl03{
	font-weight: normal;
	color: #756638;
	padding-bottom: 10px;
	margin-bottom: 40px;
	border-bottom: 4px solid;
	border-bolor:#756638;
}
.cTtl03 .en{
	font-size:clamp(2.7rem, 5.5vw, 5.5rem);
	line-height: 1.2;
  font-family: "Cinzel", serif;
	letter-spacing: 0.1em;
}
.cTtl03 .jp{
	font-size:clamp(1.5rem, 2.2vw, 2.2rem);
	letter-spacing: 0.1em;
}
.cTtl04{
	font-size:clamp(3rem, 3vw, 4.5rem);
  font-family: "Cinzel", serif;
  font-weight: 400;
  letter-spacing: 0.2em;
  color:#756638;
}

/*text*/
.fs75{font-size: 75%;}
.fs110{font-size: 110%;}
.fs120{font-size: 120%;}
.fs130{font-size: 130%;}
.fs140{font-size: 140%;}
.fs150{font-size: 150%;}
.fs160{font-size: 160%;}
.lh1{line-height:1;}
.lh15{line-height:1.5;}
.lh2{line-height:2;}
.ls01{letter-spacing: 0.1em}
.ls02{letter-spacing: 0.2em}
.cCopy01{font-size:clamp(2.2rem, 4.5vw, 4.5rem);}
.cCopy02{font-size:clamp(1.6rem, 2.8vw, 2.8rem);}
.txt16r{font-size:clamp(1.3rem, 1.6vw, 1.6rem);}
.txt25r{font-size:clamp(1.5rem, 2vw, 2.5rem);}
.txt40r{font-size:clamp(2rem, 3vw, 4rem);}


/*section responsive*/
.sec10r{
	padding-top: clamp(50px,10vw,100px);
	padding-bottom: clamp(50px,10vw,100px);
}
.sec10rt{
	padding-top: clamp(50px,10vw,100px);
}
.sec10rb{
	padding-bottom: clamp(50px,10vw,100px);
}
.sec8r{
	padding-top: clamp(50px,8vw,80px);
	padding-bottom: clamp(50px,8vw,80px);
}
.sec8rt{
	padding-top: clamp(50px,8vw,80px);
}
.sec8rb{
	padding-bottom: clamp(50px,8vw,80px);
}
.sec6r{
	padding-top: clamp(40px,6vw,60px);
	padding-bottom: clamp(40px,6vw,60px);
}
.sec6rt{
	padding-top: clamp(40px,6vw,60px);
}
.sec6rb{
	padding-bottom: clamp(40px,6vw,60px);
}
.sec4r{
	padding-top: clamp(30px,4vw,40px);
	padding-bottom: clamp(30px,4vw,40px);
}

/*background*/
.cBg01{
	background-color: #ebe6db;
}

/*btn*/
.cBtn01{
	background-color:#222;
	color:#fff;
	font-size: clamp(16px,2.1vw,27px);
	padding:0.25em;
	width:100%;
	max-width:600px;
	margin-left:auto;
	margin-right:auto;
	text-decoration: none;
	display:block;
	position:relative;
}
.cBtn01::before{
	content:"";
	position: absolute;
	display: block;
	width:5px;
	height:5px;
	border-top:1px solid #fff;
	border-right:1px solid #fff;
	right:3%;
	top:calc(50% - 3px);
	transform: rotate(45deg);
}
.cBtnReq,
.cBtnRsv{
	display: flex;
	justify-content: center;
	align-items: center;
	width:100%;
	height:3em;
	max-width: 200px;
	max-height:60px;
	background-size:100% 100%;
	color:#fff;
	text-decoration: none;
	font-size:min(4vw,20px);
	letter-spacing: 0.1em;
	position:relative;
}
.cBtnReq::before,
.cBtnRsv::before{
	content:"";
	position: absolute;
	display: block;
	width:0.5em;
	height:0.5em;
	border-top:.1em solid #fff;
	border-right:.1em solid #fff;
	right:.5em;
	top:calc(50% - .25em);
	transform: rotate(45deg);
}
.cBtnReq{background-color:#b77846;}
.cBtnRsv{background-color:#555555;}
/*
.cBtnReq,
.cBtnRsv{
	display: flex;
	justify-content: center;
	align-items: center;
	width:100%;
	height:3em;
	max-width: 200px;
	max-height:60px;
	background-size:100% 100%;
	border-radius:4px;
	color:#fff;
	text-decoration: none;
	font-size:min(4vw,20px);
	letter-spacing: 0.1em;
	box-shadow: 1px 1px 0px 0px rgba(255,255,255,0.5) inset,-1px -1px 0px 0px rgba(0,0,0,0.5) inset;
	position:relative;
}
.cBtnReq::before,
.cBtnRsv::before{
	content:"";
	position: absolute;
	display: block;
	width:0.5em;
	height:0.5em;
	border-top:.1em solid #fff;
	border-right:.1em solid #fff;
	right:.5em;
	top:calc(50% - .25em);
	transform: rotate(45deg);
}
.cBtnReq{background-image: url(../images/common/btn_bg_request.png);}
.cBtnRsv{background-image: url(../images/common/btn_bg_reserve.png);}
*/


/*スマホフッター*/
.snav{
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 70px;
	background-color: #fff;
	z-index:1000;
	gap:3%;
}
.snav a{
	width:160px;
	height: 50px;
}
@media(min-width: 768px){
	.snav{
		display: none;
	}
}

/*来場予約ポップアップ*/
.popupWrap01{
	background-color:#fff;
	width:90%;
	margin:0 auto;
	max-width:1000px;
	padding:30px;
}
.popupWrap01 .btn01{
	display:block;
	max-width:300px;
	width:100%;
	margin:20px auto;
	padding:20px;
	color:#fff;
	text-align:center;
	text-decoration: none;
	font-size:14px;
	font-size:clamp(1.4rem,1.6vw,1.6rem);
}
.popupWrap01 a:nth-of-type(1){background-color: #d35e70;}
.popupWrap01 a:nth-of-type(2){background-color: #0a758a;}
.popupWrap01 a:nth-of-type(3){background-color: #ea5504;}

@media(min-width: 768px){
	.popupWrap01{
		display:flex;
		justify-content: space-between;
		align-items: stretch;
		padding:30px 40px;
	}
	.popupWrap01 .btn01{
		width:30%;
	}
}

/*お問い合わせポップアップ*/
.popupContact{
	background-color:#fff;
	width:80%;
	max-width:300px;
	margin:0 auto;
	max-height:80vh;
	padding:0;
	overflow-y:auto;
}
.popupContact .btnwrap{
	display:flex;
	justify-content: space-between;
	align-items: stretch;
	padding:0;
}
.popupContact .btnwrap .btn01{
	display:block;
	max-width:300px;
	width:calc(100% / 3);
	margin:0;
	padding:10px 0;
	color:#fff;
	text-align:center;
	text-decoration: none;
	font-size:10px;
	font-size:clamp(1rem,1.6vw,1.6rem);
	font-feature-settings: "palt";
}
.popupContact .hanrei{
	display: none;
	width:96%;
	margin:10px auto;
	text-align:center;
	font-size:1.2rem; 
}
.popupContact .btnwrap  a:nth-of-type(1){background-color: #d35e70;}
.popupContact a:nth-of-type(2){background-color: #0a758a;}
.popupContact a:nth-of-type(3){background-color: #ea5504;}

@media(min-width: 768px){
	.popupContact{;
	width:90%;
	max-width:900px;
	padding:0 0 30px;
	}
	.popupContact .landplan{
		text-align:center;
	}
	.popupContact .landplan img{
		max-height:calc(79vh - 160px);
	}
	.popupContact .btnwrap{
		width:90%;
		margin:0 auto;
	}
	.popupContact .btnwrap .btn01{
		width:30%;
	}
	.popupContact .hanrei{
		margin:0 auto 30px;
		font-size:1.4rem; 
	}
}