@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　index
 *
 */

/*--------------------------------------------------------------------------
   settings
---------------------------------------------------------------------------*/
:root {
  --dark: #221400;
  --light: #fff;
	--darkred: ;
	--lightred: #AF0106;



}

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

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

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

body{
	color: var(--dark);
	background: var(--light);
	font-family: "GFS Didot","Noto Serif JP","YuMincho","Yu Mincho","HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 1.6rem;
	line-height: 1.8;
	-webkit-text-size-adjust: 100%;	
}

/* fonts */
.en{
  font-family: "GFS Didot", 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;
	image-rendering: crisp-edges;		
}

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

.fade,.fade01,.fade02,.fade03,.fade04,.blur,.zoom,
.delay01,.delay02,.delay03,.delay04,.delay05 {
	transition: 1.3s;
}
.fade {
	opacity: 0;
	transform: translate(0,0); 
}
.fade01{
	opacity: 0;
	transform: translate(0,50px); 
}
 .fade02 {
	opacity: 0;
	transform: translate(0,-50px); 
}
.fade03 {
	opacity: 0;
	transform: translate(-50px,0); 
}
.fade04 {
	opacity: 0;
	transform: translate(50px,0); 
}
.blur {
  -webkit-filter: blur(14px);
	filter: blur(14px);  
}
.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;
  -webkit-filter: blur(0);
	filter: blur(0);
	transform: translate(0,0) scale(1,1); 
}


@keyframes fadein{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


/*--------------------------------------------------------------------------
   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
---------------------------------------------------------------------------*/
#Page{
	overflow: hidden;
	background: url(../img/bg_body_pc.jpg) repeat-y center center;
	background-size: 100% auto;	
}
.inner{
	max-width: 1240px;
	padding: 0 20px;
	margin: 0 auto;
}
.layout-box{
  display: flex;
  justify-content: space-between;  
}


/*--------------------------------------------------------------------------
   header
---------------------------------------------------------------------------*/
header{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	color: var(--light);
}
header h1{
	position: relative;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 1.39vw;	
}
header h1 .logo{
	margin-right: 22px;
}
header h1 .logo img{
	width: 9.38vw;
}
header h1 p{
	display: flex;
	justify-content: center;
	align-items: center;	
}
header h1 .txt{
	margin-right: 10px;
	font-size: 1.18vw;
}
header h1 .modelroom{
	padding:2px 5px;
	border: 1px solid var(--light);
	font-size: 1.04vw;
}


/*--------------------------------------------------------------------------
   Mv
---------------------------------------------------------------------------*/
#Mv{
	line-height: 0;
}


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
.nav-mansion{
	position: fixed;
	left: 0;
	top:0;
	z-index: 9999;
	width: 100%;
	background:  var(--light);
	opacity: 0;
	pointer-events: none;
	transition: .3s;
}
.nav-mansion.show{
	pointer-events: auto;
	opacity: 1;
}
.nav-mansion ul{
	display: flex;
}
.nav-mansion ul li{
	width: 50%;
}
.nav-mansion ul a{
	display: block;
	width: 100%;
	height: 80px;
	padding-top: 15px;
	color: var(--light);
	text-align: center;
	transition: .3s;
}
.nav-mansion ul a:hover{
	opacity: .7;
}
.nav-mansion ul .name{
	width: fit-content;
	margin-inline:auto;
	padding: 0 30px;
	box-sizing: content-box;
	background: url(../img/arw_pagenav.svg) no-repeat right bottom 7px;
	background-size: 20px 20px;
	font-size: 2.2rem;
	line-height: 1.5;
}
.nav-mansion ul .name span{
	display: block;
	font-size: 1.6rem;
}
.nav-mansion .btn-mansion01{
	background: url(../img/thumb_pagenav01.png) no-repeat right 25px bottom #8C0105;
	background-size: auto 80px;
}
.nav-mansion .btn-mansion02{
	background: url(../img/thumb_pagenav02.png) no-repeat left 25px bottom #470005;
	background-size: auto 80px;
}


/* mansion
-----------------------------------------------------------------*/
.mansion .ttl-main{
	padding:50px 20px;
	text-align: center;
	background: var(--light);	
}
.mansion h1{
	font-size: 6rem;
	line-height: 1.4;
	font-weight: 500;
	color: var(--lightred);
}
.mansion h1 span{
	font-size: 4.5rem;
}
.mansions{
	display: flex;
}
.mansion-container{
	width: 50%;
	padding: 0 3.47vw 100px;
	text-align: center;
}
.mansion-container h2{
	padding: 70px 20px;
	font-size: 4.2rem;
	color: var(--light);
	line-height: 1.3;
	font-weight: 500;
}
.mansion-container h2 span{
	display: block;
	font-size: 3rem;
}
.mansion-container .pic-main{
	width: calc(100% + 6.94vw);
	margin-left: -3.47vw;
}
.mansion-container .pic-main img{
	max-width: none;
	width: 100%;
}
.mansion-container .txt-lead{
	margin-bottom: 50px;
	line-height: 0;
}
.mansion01 .txt-lead{
	width: calc(100% + 6.94vw);
	margin-left: -3.47vw;
	margin-top: .9vw;
	line-height: 0;
}
.mansion01 .txt-lead img{
	max-width: none;
	width: 44.44vw;
}
.mansion02 .txt-lead{
	margin-top: 7.43vw;
}
.mansion02 .txt-lead img{
	max-width: none;
	width: 37.25vw;
}
.mansion-container .btn-list li:nth-child(n+2){
	margin-top: 30px;
}
.mansion-container .btn-list li a{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 400px;
	height: 76px;
	margin-inline: auto;
	border-radius: 100vmax;
	font-size: 1.8rem;
	line-height: 1;
	transition: .3s;
}
.mansion-container .btn-list .site a{
	color: var(--dark);
	background: linear-gradient(180deg, #FFF 0%, #E8C57E 100%);
}
.mansion-container .btn-list .map a{
	color: var(--lightred);
	background: var(--light);
}
.mansion-container .btn-list li a::after{
	position: absolute;
	right: 40px;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	width: 16px;
	height: 12px;
	content: "";
	background: no-repeat right center;
	transition: .3s;
}
.mansion-container .btn-list li a:hover::after{
	right: 35px;
}
.mansion-container .btn-list .site a::after{
	background-image: url(../img/arw_black.svg);
}
.mansion-container .btn-list .map a::after{
	background-image: url(../img/arw_red.svg);
}


/* movie
-----------------------------------------------------------------*/
.movie{
	padding-top: 80px;
}
.mansion-container h3{
	margin-bottom: 30px;
	line-height: 1;
	font-weight: normal;	
}
.mansion-container h3 .ja{
	display: block;
	width: fit-content;
	margin-inline: auto;
	margin-top: -25px;
	padding: 5px;
	background:  var(--light);
	font-size: 3.6rem;
	color: var(--lightred);
}
.mansion-container h3 .ttl-sub{
	display: block;
	width: fit-content;	
	margin: 10px auto 0;
	padding: 8px 10px 5px;
	font-size: 5rem;
	background: linear-gradient(180deg, #FFF 0%, #E8C57E 100%);
}
.mansion-container h3 .ttl-sub .logo{
	display: inline-block;
	transform: translateY(7px);
	margin-left: 5px;
}
.mansion01 h3{
	transform: translateX(24.5vw); 
}
.mansion02 h3{
	opacity: 0;
}
.instagram-media{
	margin-inline: auto !important;
}


/* location
-----------------------------------------------------------------*/
.location{
	padding-top: 80px;	
}
.location .banner{
	position: relative;
	padding: 50px;
}
.mansion01 .location .banner ul li:nth-child(2){
	margin-top: 1.1vw;
}
.mansion01 .location .banner{
	background: url(../img/bg_banner01.jpg) no-repeat center center;
	background-size: cover;
}
.mansion02 .location .banner{
	background: url(../img/bg_banner02.jpg) no-repeat center center;
	background-size: cover;
}
.location .banner a{
	position: relative;
	display: block;
	line-height: 0;
}
.location .banner .arw{
	position: absolute;
	right: 15px;
	bottom: 15px;
	z-index: 10;
	display: block;
	width: 76px;
	height: 76px;
	content: "";
}
.location .banner .arw img:nth-child(1){
	position: absolute;
	left: 0;
	top: 0;
	transition: .3s;
}
.location .banner .arw img:nth-child(2){
	opacity: 0;
	transition: .3s;
}
.location .banner a:hover .arw img:nth-child(1){
	opacity: 0;
}
.location .banner a:hover .arw img:nth-child(2){
	opacity: 1;
}

.mansion01 .location .banner .btn-list .site a,
.mansion02 .location .banner .btn-list .site a  {
	margin: 20px auto 0;
}
.mansion01 .location .banner .btn-list .site.btn2 a {
	margin-bottom: 20px;
}


/* brand
-----------------------------------------------------------------*/
.brand{
	padding: 10.28vw 50px;
	background: url(../img/bg_brand_pc.jpg) no-repeat center center;
	background-size: cover;	
}
.brand-box{
	max-width: 915px;
	margin-inline: auto;
}
.brand-box a{
	position: relative;
	display: block;
	padding: 34px 30px 40px;
	background: linear-gradient(90deg,rgba(172, 18, 18, 1) 0%, rgba(115, 24, 24, 1) 100%);
	color: var(--light);	
}
.brand-box a .arw{
	position: absolute;
	right: 20px;
	bottom: 20px;
	z-index: 10;
	display: block;
	width: 76px;
	height: 76px;
	content: "";
}
.brand-box a .arw img:nth-child(1){
	position: absolute;
	left: 0;
	top: 0;
	transition: .3s;
}
.brand-box a .arw img:nth-child(2){
	opacity: 0;
	transition: .3s;
}
.brand-box a:hover .arw img:nth-child(1){
	opacity: 0;
}
.brand-box a:hover .arw img:nth-child(2){
	opacity: 1;
}
.brand-box h2{
	margin-bottom: 70px;
	font-weight: normal;
}
.brand-box h2 .en{
	display: block;
}
.brand-box h2 .ja{
	font-size: 1.3rem;
	opacity: .7;
}
.brand-box .txt{
	font-size: 1.8rem;
	letter-spacing: .1em;
}


/*--------------------------------------------------------------------------
   Cv
---------------------------------------------------------------------------*/
.cv{
	padding: 40px;
}
.cv-box{
	padding: 6.94vw 20px 6.11vw;
	background: url(../img/bg_cv_pc.jpg) no-repeat center bottom #FFF;
	background-size: 100% auto;
	text-align: center;
}
.cv-box h2{
	margin-bottom: 35px;
	font-size: 3rem;
	font-weight: 500;
	letter-spacing: .1em;
}
.cv-box .btn-cv{
	margin-bottom: 50px;
}
.cv-box .btn-cv a{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 400px;
	height: 76px;
	margin-inline: auto;
	border-radius: 100vmax;
	background: linear-gradient(90deg,rgba(172, 18, 18, 1) 0%, rgba(115, 24, 24, 1) 100%);
	line-height: 1;
	color:var(--light);
	font-size: 2rem;
	transition: .3s;	
}
.cv-box .btn-cv a:hover{
	background: linear-gradient(270deg,rgba(172, 18, 18, 1) 0%, rgba(115, 24, 24, 1) 100%);
}
.cv-box .btn-cv a::after{
	position: absolute;
	right: 40px;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	width: 16px;
	height: 12px;
	content: "";
	background: url(../img/arw_w.svg) no-repeat right center;
	transition: .3s;
}
.cv-box .btn-cv a:hover::after{
	right: 35px;
}
.cv-box .phone{
	margin-bottom: 25px;
}
.cv-box .businesshour{
	margin-bottom: 15px;
	font-size: 1.8rem;
	letter-spacing: .1em;
	line-height: 1.4;
}
.cv-box .businesshour span{
	display: inline-block;
	margin-right: 5px;
	padding:5px 8px 3px;
	border: 1px solid var(--dark);
	font-size: 1.6rem;
	letter-spacing: .05em;
	line-height: 1;	
}
.cv-box .txt{
	font-size: 1.6rem;
	line-height: 1.4;
}
.page-notes{
	padding: 40px;
	color: var(--light);
}
.page-notes ul li{
	text-indent: -1em;
	padding-left: 1em;
	font-size: 1.4rem;
}
.page-notes ul li:nth-child(n+2){
	margin-top: 3px;
}


/*--------------------------------------------------------------------------
   Footer
---------------------------------------------------------------------------*/
footer{
	position: relative;
	padding: 60px 40px 20px;
	margin-bottom: 106px;
	text-align: center;
}
footer .bnr-fuji{
	width: fit-content;
	margin: 0 auto 40px;
	background: var(--light);
	line-height: 0;
}
footer .copyright{
	font-size: 1.4rem;
	letter-spacing: .1em;
	color: var(--light);
}
.ft-cv{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	position: fixed;
	left: 0;
	bottom: 0;
	transform: translateY(110%);
	z-index: 1000;
	width: 100%;
	padding: 15px 40px;
	background: var(--dark);
	transition: .5s;
}
.ft-cv.on{
	transform: translateY(0);
}
.ft-cv .tel img {
	max-width: 400px;
	padding-bottom: 2%;
}
.ft-cv-btn {
	width: 50%;
	max-width: 400px;
}
.ft-cv-btn a{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 400px;
	height: 76px;
	margin-inline: auto;
	border-radius: 100vmax;
	background: rgba(255,255,255,1);
	line-height: 1;
	font-size: 1.8rem;
	letter-spacing: .06em;
	color: var(--dark);
	transition: .3s;	
}
.ft-cv-btn a:hover{
	background: rgba(255,255,255,.7);
}
.ft-cv-btn a::after{
	position: absolute;
	right: 40px;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	width: 16px;
	height: 12px;
	content: "";
	background: url(../img/arw_black.svg) no-repeat right center;
	transition: .3s;
}
.ft-cv-btn a:hover::after{
	right: 35px;
}
.btn-pagetop{
	position: fixed;
	right: 20px;
	bottom: 126px;
	display: none;
}
.btn-pagetop a img{
	transition: .3s;
}
.btn-pagetop a img:nth-child(1){
	position: absolute;
	left: 0;
	top: 0;
}
.btn-pagetop a img:nth-child(2){
	opacity: 0;
}
.btn-pagetop a:hover img:nth-child(1){
	opacity: 0;
}
.btn-pagetop a:hover img:nth-child(2){
	opacity: 1;
}


/*--------------------------------------------------------------------------
   modal
---------------------------------------------------------------------------*/
.modal{
	display: none;
}
.modal-box{
	overflow: hidden;
}
.modal-cont{
	position: relative;
	transform: translateY(100%);
	padding: 60px 80px;
	background: #221400;
	text-align: center;
	color: var(--light);
	transition: .5s;
}
.modal-cont.open{
	transform: translateY(0);
}
.modal-cont h2{
	margin-bottom: 55px;
	font-size: 4rem;
	font-weight: 500;
	letter-spacing: .1em;
	line-height: 1.5;
}
.modal-cont .layout-box{
	justify-content: center;
}
.modal-cont .btn-reserve{
	position: relative;
	max-width: 435px;
	width: 50%;
}
.modal-cont .btn-reserve + .btn-reserve::before{
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	width: 1px;
	height: 70%;
	content: "";
	background: rgba(255,255,255,1);
}
.modal-cont .btn-reserve a{
	display: block;
	padding: 0 30px;
	color: var(--light);
}
.modal-cont .btn-reserve h3{
	min-height: 78px;
	margin-bottom: 17px;
	line-height: 1.5;
	letter-spacing: .1em;
}
.modal-cont .btn-reserve h3 small{
	display: block;
	font-size: 1.6rem;
}
.modal-cont .btn-reserve h3 span{
	display: block;
	font-size: 2.2rem;
	line-height: 1.2;
}
.modal-cont .btn-reserve .pic{
	position: relative;
	display: inline-block;
	padding: 0 60px;
}
.modal-cont .btn-reserve .pic .ico{
	position: absolute;
	right: 0;
	bottom: 0;
	width: 35px;
}
.modal-cont .btn-reserve .pic .ico img{
	transition: .3s;
}
.modal-cont .btn-reserve .pic .ico img:nth-child(1){
	position: absolute;
	right: 0;
	top: 0;	
}
.modal-cont .btn-reserve .pic .ico img:nth-child(2){
	opacity: 0;
}
.modal-cont .btn-reserve a:hover .pic .ico img:nth-child(1){
	opacity: 0;
}
.modal-cont .btn-reserve a:hover .pic .ico img:nth-child(2){
	opacity: 1;
}
.modal-cont .btn-reserve a:hover .pic > img{
	filter: brightness(1.2);
}
.modal-cont .btn-modal-close{
	position: absolute;
	right: 20px;
	top: 20px;
	cursor: pointer;
}
.modal-cont .btn-modal-close img{
	transition: .3s;
}
.modal-cont .btn-modal-close img:nth-child(1){
	position: absolute;
	right: 0;
	top: 0;	
}
.modal-cont .btn-modal-close img:nth-child(2){
	opacity: 0;
}
.modal-cont .btn-modal-close:hover img:nth-child(1){
	opacity: 0;
}
.modal-cont .btn-modal-close:hover img:nth-child(2){
	opacity: 1;
}

.modaal-content-container {
  padding: 0;
}
.modaal-container {
	max-width: none;
	background: transparent;
	box-shadow: none;
}
.modaal-wrapper {
  z-index: 12000;
	line-height: 0;
	
}
.modaal-inner-wrapper{
	padding: 0;
	vertical-align: bottom;
}
.modaal-overlay{
	z-index: 11000;
}
.modaal-close{
	opacity: 0;
	cursor: default;
}


















/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {

  #Page {
    min-width: 320px;
		background: url(../img/bg_body_sp.jpg) repeat-y center center;
		background-size: 100% auto;		
  }
  
  .pc{
    display: none;	
  }
  .sp{
    display: block;	
  }
  img.sp,
  br.sp{
    display: inline;
  }
  
  .phone-link{
    pointer-events: auto;  
  }


/*--------------------------------------------------------------------------
   Container
---------------------------------------------------------------------------*/
  .inner{
    max-width: none;	
  }


/*--------------------------------------------------------------------------
   header
---------------------------------------------------------------------------*/
	header h1{
		margin-top: 5.33vw;	
	}
	header h1 .logo{
		margin-right: 20px;
	}
	header h1 .logo img{
		width: 30.67vw;
	}
	header h1 p{
		display: block;
	}	
	header h1 .txt{
		display: block;
		margin: 0;
		font-size: 3.47vw;
	}
	header h1 .modelroom{
		display: block;
		width: 45vw;
		padding:2px 5px;
		font-size: 2.93vw;
		text-align: center;
	}

/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
	.nav-mansion{
		display: block;
	}
	.nav-mansion ul{
		display: block;
	}
	.nav-mansion ul li{
		width: 100%;
	}
	.nav-mansion ul li:nth-child(2){
		display: none;
	}
	.nav-mansion.switch ul li:nth-child(1){
		display: none;
	}
	.nav-mansion.switch ul li:nth-child(2){
		display: block;
	}
	.nav-mansion ul a{
		height: 68px;
		padding-top: 12px;
	}
	.nav-mansion ul a:hover{
		opacity: 1;
	}
	.nav-mansion ul .name{
		padding: 0 30px;
		background: url(../img/arw_pagenav.svg) no-repeat right bottom 5px;
		background-size: 20px 20px;
		font-size: 1.8rem;
	}
	.nav-mansion ul .name span{
		font-size: 1.3rem;
	}
	.nav-mansion .btn-mansion01{
		background: url(../img/thumb_pagenav01.png) no-repeat left bottom #8C0105;
		background-size: auto 60px;
	}
	.nav-mansion .btn-mansion02{
		background: url(../img/thumb_pagenav02.png) no-repeat left bottom #470005;
		background-size: auto 60px;
	}


/* mansion
-----------------------------------------------------------------*/
	.mansion .ttl-main{
		padding: 40px 20px;
	}
	.mansion h1{
		font-size: 3.6rem;
	}
	.mansion h1 span{
		font-size: 2.7rem;
	}
	.mansions{
		display: block;
	}
	.mansion-container{
		width: 100%;
		padding: 0 20px 50px;
	}
	.mansion01{
		background: linear-gradient(90deg,rgba(187, 1, 7, 1) 0%, rgba(175, 2, 7, 1) 100%);
	}
	.mansion02{
		background: linear-gradient(90deg,rgba(113, 0, 9, 1) 0%, rgba(133, 0, 8, 1) 100%);
	}
	.mansion-container h2{
		position: relative;
		z-index: 10;
		width: calc(100% + 40px);
		margin-left: -20px;		
		padding: 30px 20px;
		font-size: 2.2rem;
	}
	.mansion-container h2 span{
		font-size: 2rem;
	}
	/* .mansion01 h2{
		background: url(../img/ttl_bg01.svg) no-repeat center bottom;
		background-size: 100% auto;
	}
	.mansion02 h2{
		background: url(../img/ttl_bg02.svg) no-repeat center bottom;
		background-size: 100% auto;
	} */
	.mansion-container .pic-main{
		width: calc(100% + 40px);
		margin-left: -20px;
		/* margin-top: -15vw; */
	}
	.mansion-container .pic-main img{
		max-width: none;
		width: 100%;
	}
	.mansion01 .txt-lead{
		width: 100%;
		margin-left: 0;
		margin-top: 20px;
	}
	.mansion01 .txt-lead img{
		width: 100%;
	}
	.mansion02 .txt-lead{
		margin-top: 50px;
	}
	.mansion02 .txt-lead img{
		width: 100%;
	}
	.mansion-container .btn-list li:nth-child(n+2){
		margin-top: 25px;
	}
	.mansion-container .btn-list li a{
		height: 65px;
		font-size: 1.5rem;
	}
	.mansion-container .btn-list .site a{
		color: var(--dark);
		background: linear-gradient(180deg, #FFF 0%, #E8C57E 100%);
	}
	.mansion-container .btn-list .map a{
		color: var(--lightred);
		background: var(--light);
	}
	.mansion-container .btn-list li a:hover::after{
		right: 40px;
	}


/* movie
-----------------------------------------------------------------*/
	.movie{
		padding-top: 50px;
	}
	.mansion-container h3{
		margin-bottom: 30px;
		line-height: 1;
		font-weight: normal;	
	}
	.mansion-container h3 .en{
		display: block;
		width: calc(100% + 30px);
		margin-left: -15px;
	}
	.mansion-container h3 .ja{
		margin-top: -30px;
		margin-inline: 0;
		padding: 6px 10px;
		font-size: 2rem;
	}
	.mansion-container h3 .ttl-sub{
		margin: 5px 0 0;
		padding: 8px 15px 5px;
		font-size: 2.4rem;
	}
	.mansion-container h3 .ttl-sub .logo{
		transform: translateY(4px);
	}
	.mansion01 h3{
		transform: none;
	}
	.mansion02 h3{
		opacity: 1;
	}


/* location
-----------------------------------------------------------------*/
	.location{
		padding-top: 50px;	
	}
	.location h3{
		position: relative;
		z-index: 50;
		margin-bottom: 0;
	}
	.location .banner{
		padding: 27px;
		margin-top: -8px;
	}
	.mansion01 .location .banner ul li:nth-child(2){
		margin-top: 10px;
	}
	.location .banner a{
		position: relative;
		display: block;
		line-height: 0;
	}
	.location .banner a .arw{
		right: 10px;
		bottom: 10px;
		width: 42px;
		height: 42px;	
	}
	.location .banner a .arw img{
		width: 42px;
		height: 42px;	
	}
	.location .banner a:hover .arw img:nth-child(1){
		opacity: 1;
	}
	.location .banner a:hover .arw img:nth-child(2){
		opacity: 0;
	}


/* brand
-----------------------------------------------------------------*/
	.brand{
		padding: 34.13vw 0 33.87vw 11.6vw;
		background: url(../img/bg_brand_sp.jpg) no-repeat center center;
		background-size: cover;	
	}
	.brand-box{
		max-width: none;
		width: 100%;
		margin-inline: 0;
	}
	.brand-box a{
		padding: 32px 20px 30px;
	}
	.brand-box a .arw{
		width: 42px;
		height: 42px;	
	}
	.brand-box a .arw img{
		width: 42px;
		height: 42px;
	}
	.brand-box a:hover .arw img:nth-child(1){
		opacity: 1;
	}
	.brand-box a:hover .arw img:nth-child(2){
		opacity: 0;
	}
	.brand-box h2{
		margin-bottom: 38px;
	}
	.brand-box h2 .en{
		display: block;
		width: 245px;
	}
	.brand-box h2 .ja{
		font-size: 1.1rem;
	}
	.brand-box .txt{
		font-size: 1.4rem;
	}


/*--------------------------------------------------------------------------
   Cv
---------------------------------------------------------------------------*/
	.cv{
		padding: 20px;
	}
	.cv-box{
		padding: 50px 20px 55px;
		background: var(--light);
	}
	.cv-box h2{
		margin-bottom: 20px;
		font-size: 2.3rem;
	}
	.cv-box .btn-cv{
		margin-bottom: 35px;
	}
	.cv-box .btn-cv a{
		height: 65px;
		margin-inline: auto;
		font-size: 1.5rem;
	}
	.cv-box .btn-cv a:hover{
		background: linear-gradient(90deg,rgba(172, 18, 18, 1) 0%, rgba(115, 24, 24, 1) 100%);
	}
	.cv-box .btn-cv a:hover::after{
		right: 40px;
	}
	.cv-box .phone{
		margin-bottom: 20px;
	}
	.cv-box .phone img{
		width: 80%;
		margin-bottom: 2%;
	}
	.cv-box .phone.btn-cv a::after {
		background: none;
	}
	.cv-box .businesshour{
		margin-bottom: 12px;
		font-size: 1.5rem;
	}
	.cv-box .businesshour span{
		font-size: 1.3rem;
	}
	.cv-box .txt{
		font-size: 1.4rem;
	}
	.page-notes{
		padding: 40px 20px;
		color: var(--light);
	}
	.page-notes ul li{
		font-size: 1.1rem;
	}
	.page-notes ul li:nth-child(n+2){
		margin-top: 2px;
	}


/*--------------------------------------------------------------------------
   Footer
---------------------------------------------------------------------------*/
	footer{
		padding: 20px;
		margin-bottom: 72px;
	}
	footer .bnr-fuji{
		max-width: 286px;
		width: 100%;
		margin: 0 auto 25px;
	}
	footer .copyright{
		font-size: 1rem;
	}
	.ft-cv{
		padding: 0;
		gap: 0;
	}
	.ft-cv-sp-btn{
		width: calc(100% / 3);
	}
	.ft-cv-sp-btn + .ft-cv-sp-btn{
		border-left: 1px solid rgba(255,255,255,1);
	}
	.ft-cv-sp-btn a{
		display: block;
		height: 70px;
		padding: 12px 0 0;
		text-align: center;
		color: var(--light);
		font-size: 1.2rem;
		letter-spacing: .1em;
	}
	.ft-cv-sp-btn small{
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
		height: 28px;
		margin-bottom: 5px;
	}

	.ft-cv-btn a:hover{
		background: rgba(255,255,255,1);
	}
	.ft-cv-btn a::after{
		right: 20px;
	}
	.ft-cv-btn a:hover::after{
		right: 20px;
	}
	.btn-pagetop{
		right: 10px;
		bottom: 80px;
		width: 40px;
	}
	.btn-pagetop a:hover img:nth-child(1){
		opacity: 1;
	}
	.btn-pagetop a:hover img:nth-child(2){
		opacity: 0;
	}


/*--------------------------------------------------------------------------
   modal
---------------------------------------------------------------------------*/
	.modal-cont{
		width: 100vw;
		padding: 30px 0;
	}
	.modal-cont h2{
		margin-bottom: 30px;
		font-size: 2rem;
		letter-spacing: .05em;
	}
	.modal-cont .btn-reserve a{
		padding: 0;
	}
	.modal-cont .btn-reserve h3{
		min-height: inherit;
		margin-bottom: 10px;
	}
	.modal-cont .btn-reserve h3 small{
		font-size: 1.2rem;
	}
	.modal-cont .btn-reserve h3 span{
		font-size: 1.5rem;
	}
	.modal-cont .btn-reserve .pic{
		padding: 0 30px 0 20px;
	}
	.modal-cont .btn-reserve .pic .ico{
		width: 20px;
	}
	.modal-cont .btn-reserve a:hover .pic .ico img:nth-child(1){
		opacity: 1;
	}
	.modal-cont .btn-reserve a:hover .pic .ico img:nth-child(2){
		opacity: 0;
	}
	.modal-cont .btn-reserve a .pic > img{
		width: auto;
		height: 24vw;
	}
	.modal-cont .btn-reserve a:hover .pic > img{
		filter: brightness(1);
	}
	.modal-cont .btn-modal-close{
		position: absolute;
		right: auto;
		left: 10px;
		top: auto;
		bottom: 10px;
		width: 40px;
	}
	.modal-cont .btn-modal-close:hover img:nth-child(1){
		opacity: 1;
	}
	.modal-cont .btn-modal-close:hover img:nth-child(2){
		opacity: 0;
	}

}