@charset "utf-8";

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

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/
#Header.fixed{
	position: fixed;	
}
.bg-header.scroll{
  opacity: 0;  
}
.bg-header.fixed{
	opacity: 1;
}
.bg-vid{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
}
.bg-vid::after{
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	content: "";
	background: rgba(255,255,255,.7);
}
.bg-vid video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.content{
  margin-top: 0;  
}
.thumb{
  position: relative;  
}
span.caption{
	position: absolute;
	right: 10px;
	bottom: 10px;
	color: var(--light);
  line-height: 1;
	font-size: 1.1rem;
}
#News,#Facility,#Lifestyle,#Medical,#Location,#Access{
 scroll-margin-top: 90px;
}
.ft-area{
  margin-bottom: 100vh;  
}
	
/*--------------------------------------------------------------------------
   mv
---------------------------------------------------------------------------*/
#Mv{
	position: relative;
	z-index: 100;
}
.mv-slider{
  line-height: 0;
}
.mv-slider .slider-item{
	position: relative;
	overflow: hidden;
}
.mv-slider .slider-item img{
	display: inline-block;
	width: 100%;
	height: 100vh;
	object-fit: cover;
	transition: 8s;
}
.mv-slider .slider-item.current img{
	transform: scale(1.2);
}
.mv-slider .slider-item .caption{
	position: absolute;
	right: 20px;
	bottom: 20px;
	color: var(--light);
	font-size: 1.2rem;
}
#Mv .ttl-area{
	position: absolute;
	left: 0;
	bottom: 45px;
	z-index: 100;
  width: 100%;
  text-align: center;
}
#Mv .ttl-area h1 img{
  max-width: 633px;
  width: 100%; 
}


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* ttl-top-sec */
.ttl-top-sec{
	line-height: 1.4;
  text-align: center;
}
.ttl-top-sec small{
  display: block;
  padding: 10px 20px;
  width: fit-content;
  margin: 0 auto 20px;
  border: 1px solid var(--gold); 
  color: var(--gold);
  font-size: 2.4rem;
	letter-spacing: .2em;
  line-height: 1; 
}
.ttl-top-sec .en{
	display: block;
	margin-bottom: 20px;
	font-size: 2.8rem;
	color: var(--gold);
	letter-spacing: .06em;
}
.ttl-top-sec .ja{
	display: block;
	font-size: 4rem;
	letter-spacing: .08em;
}

/* pic-main-area */
.pic-main-area{
  position: relative;
  margin-inline: 3.3vw;
  height: 34vw;
  border-radius: 4px;
  overflow: hidden;  
}
.pic-main-area .pic-main{
  position: absolute;
  left: 0;
  top: 0;
}
.pic-main-area .caption{
  position: absolute;
  right: 15px;
  bottom: 10px;
  z-index: 50;
  font-size: 1.4rem;
  color: var(--light);
  line-height: 1.5;  
}
.pic-main-static{
	position: relative;
	/*max-width: 1200px;*/
  margin-inline: 3.3vw;
	border-radius: 4px;
  overflow: hidden;  
}

/* sec-ttl-lead  */
.sec-ttl-lead small{
  display: block;
  font-size: 1.8rem;
  letter-spacing: .2em;
  color: var(--gold);   
}
.sec-ttl-lead span{
  display: block;
  font-size: 3rem;
  letter-spacing: .06em;  
}
.txt-area > .txt{
  margin-top: 20px;
  font-size: 1.8rem;
  line-height: 2;
}
.txt-area > .note{
  margin-top: 20px;
  padding-left:1em;
  text-indent: -1em;
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0;
}
@media screen and (min-width: 769px) {
	.pic-main-area .pic-main{
		width: 100%;
	}
}

/* merit
-----------------------------------------------------------------*/
.merit{
	position: relative;
	z-index: 10;
	padding: 70px 0 0;
	min-height: 350px;
	background: url(../img/top/mask_merit-area_pc.png) no-repeat center top;
}
.merit .inner{
	max-width: 1240px;
}
.merit .merit-box{
	display: flex;
	justify-content: space-between;
	max-width: 1180px;
	width: 100%;
	margin-inline: auto;
	letter-spacing: .1em;
}
.merit .merit-box li{
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 360px;
	height: 280px;
	text-align: center;
	width: 30.51%;
	font-size: 2rem;
	line-height: 1.5;
}
.merit .merit-box small{
	font-size: 1.8rem;
}
.merit .merit-box strong{
	font-size: 3rem;
	color: var(--gold);
}
.merit .merit-box strong.num{
	font-size: 4.5rem;
}

@media screen and (max-width: 1240px) {
	.merit{
		padding: 5.5vw 0 0;
		background-size: 160% auto;
	}
}


/* news
-----------------------------------------------------------------*/
.news{
	position: relative;
	z-index: 10;	
	padding: 100px 0;
	background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 1) 100%);
}
.news .inner{
	max-width: 1220px;
}
.news h2{
	max-width: 180px;
	margin-right: 20px;
	text-align: left;
}
.news dl{
	max-width: 800px;
	width: 100%;
}
.news dl > div{
	position: relative;
	display: flex;
	padding: 40px 10px;
	border-bottom: 1px solid #CCC;
	letter-spacing: .02em;
	line-height: 2;
}
.news dl > .has-arw:hover{
	background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100%);
}
.news dl dt{
	flex-shrink: 0;
	width: 110px;
	color: var(--gold);
}
.news dl dd{
	width: calc(100% -110px);
}
.news dl dd a{
	display: inline-block;
	padding-right: 75px;
}
.news dl .arw{
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
}


/* facility
-----------------------------------------------------------------*/
.facility{
  position: relative;
	z-index: 10;
  padding: 100px 0;
  background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .6) 60%, rgba(255, 255, 255, 0) 100%);
}
.facility h2{
  margin-bottom: 80px;  
}

/* facility01 */
.facility01,
.facility02{
  margin-bottom: 120px;  
}
.facility01 .layout-box{
  margin: 80px 0 40px;
  align-items: center;  
}
.facility01 .layout-box .txt-area{
  width: 67.7%;
}
.facility01 .layout-box .logo{
  width: 24,6%;
}
.facility01 .gourmet{
  display: flex;
  justify-content: space-between;
  padding: 60px 6%;
  background: rgba(145,123,0,.1);  
}
.facility01 .gourmet h4{
  flex-shrink: 0;
  margin-right: 6%;
  font-size: 2.8rem;
  line-height: 1.6;  
}
.facility01 .gourmet ul{
  display: grid;
  grid-gap: 40px;
}
.facility01 .gourmet ul li{
  display: flex;
	flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-start;  
}
.facility01 .gourmet ul .thumb{
  width: 27.28%;  
}
.facility01 .gourmet ul div{
  width: 65.5%;  
}
.facility01 .gourmet ul h5{
  margin-bottom: 10px;
  font-size: 2.2rem;
  line-height: 1.6;
  color: var(--gold);
  text-box: trim-both cap alphabetic;
}
.facility01 .gourmet ul .txt{
  font-size: 1.8rem;
  line-height: 2;
}

/* facility02 */
.facility02 .layout-box{
  margin: 80px 0 0;
}
.facility02 .txt-area{
  width: 48%;
}
.facility02 .pic-list{
  display: flex;
  flex-wrap: wrap;
  gap: 30px 0;
  justify-content: space-between;
  width: 46%; 
}
.facility02 .pic-list li{
  max-width: 210px;
  width: calc(50% - 5px);  
}
.facility02 .pic-list p.caption{
  margin-top: 3px;
  font-size: 1.6rem;
  text-align: center;  
}

/* facility03 */
.facility03 .txt-area{
  margin: 80px 0 60px;  
}
.facility03 .pic-list{
  display: flex;
  flex-wrap: wrap;
  gap: 30px 0;
  justify-content: space-between;
}
.facility03 .pic-list li{
  max-width: 314px;
  width: calc((100% - 20px)/3); 
}
.facility03 .pic-list p.caption{
  font-size: 1.6rem;
  text-align: center;  
}

/* lifestyle
-----------------------------------------------------------------*/
.lifestyle{
  position: relative;
	z-index: 10;
  padding: 100px 0;
  background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 40%, rgba(255, 255, 255, 1) 100%);
}
.lifestyle h2{
  margin-bottom: 80px;  
}
.lifestyle .txt-area{
  margin-top: 80px;  
}
.lifestyle .pic-list{
  display: flex;
  justify-content: space-between;
  margin: 60px  0;  
}
.lifestyle .pic-list li{
  max-width: 220px;
  width: calc((100% - 30px)/3);  
}
.lifestyle .pic-list .caption{
  font-size: 1.5rem;
  text-align: center;  
}
.lifestyle .tour{
  display: flex;
  justify-content: space-between;
	align-items: flex-start;
  padding: 60px 6%;
  background: rgba(145,123,0,.1);   
}
.lifestyle .tour .txt-area{
  margin-top: 0;
  width: 54.5%;  
}
.lifestyle .tour .txt-area h4{
  font-size: 2.4rem;
  line-height: 1.6;  
}
.lifestyle .tour .txt-area .txt{
  font-size: 1.8rem;
  line-height: 2;  
}
.lifestyle .tour .pic{
	position: relative;
  width: 36.6%; 
}

/* medical
-----------------------------------------------------------------*/
.medical{
  position: relative;
	z-index: 10;
  padding: 100px 0;
  background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, .6) 80%, rgba(255, 255, 255, 0) 100%);
}
.medical h2{
  margin-bottom: 80px; 
}

/* medical01 */
.medical01{
  margin-bottom: 80px;  
}
.medical01 .layout-box{
  margin-top: 80px;
}
.medical01 .txt-area{
  width: 58.8%; 
}
.medical01 .hospital{
  width: 33.2%;
  padding: 35px 20px 40px;
  border: 1px solid var(--gold);
  text-align: center;   
}
.medical01 .hospital h4{
	margin-bottom: 10px;
  color: var(--gold);
  font-size: 1.8rem;
  line-height: 1.4;
}
.medical01 .hospital ul{
  display: grid;
  grid-gap: 15px;  
}
.medical01 .hospital ul small{
  display: block;
  font-size: 1.4rem;  
}
.medical01 .hospital ul span{
  display: block;
  font-size: 2rem; 
}

/* medical02 */
.medical02 .txt-area{
  margin-top: 80px;
}
.medical02 .figure{
	margin-top: 40px;
}
.medical02 .smile-life{
  margin-top: 60px;
  padding:60px 10% 80px;
  background: var(--light);  
}
.medical02 .smile-life h4{
  margin-bottom: 30px;
  text-align: center;
}
.medical02 .smile-life .txt-lead{
  margin-bottom: 20px;
  font-size: 3rem;
  line-height: 1.6;
  text-align: center;
}
.medical02 .smile-life .txt{
  font-size: 1.8rem;
  line-height: 2;
}
.medical02 .smile-life .service{
  margin-top: 40px;
  color: var(--gold);  
}
.medical02 .smile-life .service h5{
  margin-bottom: 20px;
  text-align: center;
  font-size: 2.4rem;
  line-height: 1.6;
  letter-spacing: .08em;
}
.medical02 .smile-life .service .txt{
	font-size: 1.8rem;
	line-height: 2;
}
.medical02 .smile-life .service ul{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px; 
}
.medical02 .smile-life .service ul li{
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(50% - 5px); 
  padding: 30px 15px;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--light);
  font-size: 1.8rem;
  line-height: 1.6;
  letter-spacing: .08em;
}


/* location
-----------------------------------------------------------------*/
.location{
	position: relative;
	z-index: 10;
	margin-top: -1px;	
	padding: 100px 0;	
	background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%,  rgba(255, 255, 255, 1) 100%);
}
.location h2{
	margin-bottom: 80px;
	text-align: center;
}
.location .map-area{
  height: 500px;
	margin-bottom: 100px;
	padding: 0 40px;
}
.location .map-area iframe{
	width: 100%;
	height:100%;
}
.location .map-area .address{
	display: flex;
	align-items: center;
	margin-top: 10px;
	line-height: 1.5;
}
.location .map-area .address .en{
	margin-right: 15px;
	color: var(--gold);
	font-size: 2rem;
	letter-spacing: .06em;
}
.location .map-area .address .ja{
	letter-spacing: .04em;
}
.location .lifeinfo-list{
	max-width: 1000px;
	margin: 0 auto 120px;
}
.location .lifeinfo-list li{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.location .lifeinfo-list li:nth-child(n+2){
	margin-top: 100px;
}
.location .lifeinfo-list .pic{
	width: 44%;
}
.location .lifeinfo-list .txt-area{
	width: 51%;	
}
.location .lifeinfo-list h3{
	margin-bottom: 15px;
	font-size: 2.8rem;
	line-height: 1.4;
	letter-spacing: .06em;
	color: var(--gold);
}
.location .lifeinfo-list .txt{
	font-size: 1.8rem;
}


/* access
-----------------------------------------------------------------*/
.access{
	position: relative;
	z-index: 10;	
	padding: 100px 0 150px;	
	background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%,rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, .6) 70%,  rgba(255, 255, 255, 0) 100%);
}
.access::after{
	position: absolute;
	left: 0;
	bottom: -2px;
	display: none;
	width: 100%;
	height: 28.6vw;
	content: "";
	background: url(../img/top/bg_gradient_pc.jpg) no-repeat center bottom;
	background-size: 100% auto;
}
.access h2{
	margin-bottom: 80px;
	text-align: center;
}
.access .pic-map-area{
	margin-bottom: 120px;
}
.access .pic-map-area .pic-map{
	text-align: center;
}
.access .pic-map-area .swipe{
  display: none;  
}
.access .station-access-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 60px 0;
	margin-bottom: 120px;
}
.access .station-access-list li:nth-child(1),
.access .station-access-list li:nth-child(2){
	width: 48.5%;	
}
.access .station-access-list li._flex{
	display: flex;
	justify-content: space-between;
}
.access .station-access-list li._rev{
	flex-direction: row-reverse;
}
.access .station-access-list .pic{
	position: relative;	
}
.access .station-access-list li._flex .pic{
	width: 47.2%;
}
.access .station-access-list li._flex .txt-box{
	width: 48.5%;
}
.access .station-access-list h3{
	margin-bottom: 10px;
	font-size: 2.4rem;
	line-height: 1.5;
	color: var(--gold);
}
.access .station-access-list h3 small{
	font-size: 2rem;
}
.access .station-access-list .txt-box div{
	border-left: 1px solid var(--gold);
	padding: 10px 0 10px 20px;
	font-size: 1.8rem;
	line-height: 1.6;
}
.access .station-access-list li:last-child .txt-box + .txt-box{
	padding-top: 40px;
}
.access .station-access-list li:last-child .txt-box + .txt-box div{
	border-left: none;
}
.access .station-access-list .metro{
	display: block;
	margin: 5px 0 -5px;
	font-size: 2rem;
}
.access .station-access-list .distance{
	text-indent: -.5em;
	font-size: 3rem;
	line-height: 1;	
}
.access .station-access-list .distance .station-name{
	font-size: 3.6rem;
}
.access .station-access-list .distance strong{
	padding-left: .1em;
	font-size: 5.8rem;
	letter-spacing: .06em;
	font-weight: normal;
}
.access .station-access-list .distance small{
	padding-left: 5px;
	font-size: 1.4rem;
}
.access .station-access-list .note{
	margin-top: 15px;
	font-size: 1.4rem;
	line-height: 1.5;
}
.access .access-info-list{
	max-width: 800px;
	margin-inline: auto;
}
.access .access-info-list li{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.access .access-info-list li:nth-child(n+2){
	margin-top: 100px;
}
.access .access-info-list .pic{
	position: relative;
	max-width: 320px;
	width: 40%;	
}
.access .access-info-list .pic .caption{
	position: absolute;
	right: 10px;
	bottom: 5px;
	font-size: 1.2rem;
	letter-spacing: .1em;
	color: var(--light);
}
.access .access-info-list .txt{
	width: 53%;
	font-size: 1.8rem;	
}


/* ft-btm
-----------------------------------------------------------------*/
.ft-btm{
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: -1;
	width: 100%;
	height: 100vh;
	padding-top: 90px;
	opacity: 0;
}
.ft-btm.fixed{
	z-index: 5;
	opacity: 1;
}
.ft-btm .pic{
	position: relative;
}
.ft-btm .pic img{
	width: 100%;
	height: calc(100vh - 90px);
	object-fit: cover;	
}
.ft-btm .pic::before{
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	content: "";
	background: rgba(0,0,0,.3);
}
.ft-btm .ttl-area{
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	margin-top: 45px;
	text-align: center;
}
.ft-btm div{
	position: relative;	
}
.ft-btm .gotop{
	margin-top: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 52px;
	height: 52px;
	margin-inline: auto; 
	border-radius: 100vmax;
	border: 1px solid var(--light);	
}
.ft-btm .gotop span{
	display: block;
	width: fit-content;
	line-height: 0;
	overflow: hidden;
}
.ft-btm .gotop span img{
	display: inline-block;
}
.ft-btm a:hover .gotop span img{
	animation: arwup 2.5s ease 0s infinite none running;
}






















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

#News,#Facility,#Lifestyle,#Medical,#Location,#Access{
 scroll-margin-top: 60px;
}
span.caption{
	font-size: 1rem;
}

	
/*--------------------------------------------------------------------------
   mv
---------------------------------------------------------------------------*/
	.mv-slider .slider-item .caption{
		right: 10px;
		bottom: 10px;
		font-size: 1.1rem;
	}
	#Mv .ttl-area{
		position: absolute;
		left: 0;
		bottom: 15px;
		z-index: 100;
		width: 100%;
		text-align: center;
	}
	#Mv .ttl-area h1 img{
		max-width: none;
		width: 90%; 
	}


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
/* ttl-top-sec */
	.ttl-top-sec small{
		padding: 14px 20px;
		font-size: 2rem;
	}
	.ttl-top-sec .en{
		font-size: 1.8rem;
	}
	.ttl-top-sec .ja{
		font-size: 3rem;
	}

/* pic-main-area */
	.pic-main-area{
		height: 108vw;
	}
	.pic-main-area .pic-main img{
		max-width: none;
		width: auto;
		height: 108vw;
	}
	.pic-main-area .caption{
		right: 10px;
		font-size: 1.1rem;
	}
	
	/* sec-ttl-lead  */
	.sec-ttl-lead small{
		font-size: 1.6rem; 
	}
	.sec-ttl-lead span{
		font-size: 2.6rem; 
	}
	.txt-area > .txt{
		font-size: 1.6rem;
		text-align: justify;
	}


/* merit
-----------------------------------------------------------------*/
	.merit{
		padding: 5.5vw 0 0;
		min-height: initial;
		background: url(../img/top/mask_merit-area_sp.png) no-repeat center top;
		background-size: 100% auto;
	}
	.merit .inner{
		padding: 0;
	}
	.merit .merit-box{
		display: block;
		max-width: none;
		width: 92vw;
		min-height: 96vw;
		padding-top: 10vw;
	}
	.merit .merit-box li{
		display: block;
		max-width: none;
		height: auto;
		width: auto;
		padding: 5vw 0;
		text-align: center;
		line-height: 1.4;
	}
	.merit .merit-box li:nth-child(n+2){
		border-top: 1px solid var(--light);
	}
	.merit .merit-box strong{
		font-size: 2.4rem;
	}
	.merit .merit-box strong.num{
		font-size: 3.6rem;
	}
	.merit .merit-box .distance{
		display: block;
		font-size: 1.4rem;
	}


/* news
-----------------------------------------------------------------*/
	.news{
		padding: 50px 0 80px;
	}
	.news .layout-box{
		display: block;
	}
	.news h2{
		max-width: none;
		margin: 0;
		text-align: center;
	}
	.news dl{
		max-width: none;
	}
	.news dl > div{
		display: block;
		padding: 40px 0;
	}
	.news dl > .has-arw:hover{
		background: transparent;
	}
	.news dl dt{
		width: auto;
	}
	.news dl dd{
		position: relative;
		width: auto;
	}
	.news dl dd a{
		padding-right: 50px;
	}
	.news dl .arw{
		right: 0;
	}


/* facility
-----------------------------------------------------------------*/
	.facility{
		padding: 80px 0;
		background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .6) 60%, rgba(255, 255, 255, 0) 100%);
	}
	.facility h2{
		margin-bottom: 60px;  
	}

/* facility01 */
	.facility01,
	.facility02{
		margin-bottom: 80px;  
	}
	.facility01 .layout-box{
		display: block;
		margin: 60px 0 40px;
	}
	.facility01 .layout-box .txt-area{
		width: 100%;
	}
	.facility01 .layout-box .logo{
		width: 280px;
		margin: 40px auto 0;
	}
	.facility01 .gourmet{
		display: block;
		padding: 40px 30px;
	}
	.facility01 .gourmet h4{
		margin: 0 0 20px;
		font-size: 2.2rem;
	}
	.facility01 .gourmet ul li{
		display: block;
	}
	.facility01 .gourmet ul .thumb{
		width: 100%;
		margin-top: 20px;  
	}
	.facility01 .gourmet ul div{
		width: 100%;  
	}
	.facility01 .gourmet ul h5{
		font-size: 1.8rem;
	}
	.facility01 .gourmet ul .txt{
		font-size: 1.6rem;
	}

/* facility02 */
	.facility02 .layout-box{
		display: block;
		margin: 60px 0 0;
	}
	.facility02 .txt-area{
		width: 100%;
	}
	.facility02 .pic-list{
		gap: 20px 0;
		width: 100%;
		margin-top: 20px; 
	}
	.facility02 .pic-list li{
		max-width: none;
		width: calc(50% - 10px);  
	}
	.facility02 .pic-list p.caption{
		font-size: 1.4rem;  
	}

/* facility03 */
	.facility03 .txt-area{
		margin: 60px 0 40px;  
	}
	.facility03 .pic-list{
		gap: 20px 0;
	}
	.facility03 .pic-list li{
		max-width: none;
		width: calc(50% - 10px); 
	}
	.facility03 .pic-list p.caption{
		font-size: 1.4rem;  
	}


/* lifestyle
-----------------------------------------------------------------*/
	.lifestyle{
		padding: 80px 0;
		background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 40%, rgba(255, 255, 255, 1) 100%);
	}
	.lifestyle h2{
		margin-bottom: 60px;  
	}
	.lifestyle .txt-area{
		margin-top: 60px;  
	}
	.lifestyle .pic-list{
		flex-wrap: wrap;
		gap: 20px 0;
		margin: 40px  0;  
	}
	.lifestyle .pic-list li{
		max-width: none;
		width: calc(50% - 10px); 
	}
  .lifestyle .pic-list .caption{
    font-size: 1.4rem; 
  }
	.lifestyle .tour{
		display: block;
		padding: 40px 30px;
	}
	.lifestyle .tour .txt-area{
		margin: 0 0 30px;
		width: 100%;  
	}
	.lifestyle .tour .txt-area h4{
		font-size: 2rem;
	}
	.lifestyle .tour .txt-area .txt{
		font-size: 1.6rem;  
	}
	.lifestyle .tour .pic{
		width: 100%; 
	}


/* medical
-----------------------------------------------------------------*/
	.medical{
		padding: 80px 0;
		background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, .6) 80%, rgba(255, 255, 255, 0) 100%);
	}
	.medical h2{
		margin-bottom: 60px; 
	}

/* medical01 */
	.medical01{
		margin-bottom: 80px;  
	}
	.medical01 .layout-box{
		display: block;
		margin-top: 60px;
	}
	.medical01 .txt-area{
		width: 100%;
		margin-bottom: 40px; 
	}
	.medical01 .hospital{
		width: 100%;
	}
	.medical01 .hospital h4{
		font-size: 1.6rem;
	}
	.medical01 .hospital ul{
		grid-gap: 14px;  
	}

/* medical02 */
	.medical02 .txt-area{
		margin-top: 60px;
	}
	.medical02 .smile-life{
		margin-top: 60px;
		padding:60px 10% 80px;
		background: var(--light);  
	}
	.medical02 .smile-life h4{
		margin-bottom: 20px;
	}
	.medical02 .smile-life h4 img{
		width: 274px;
	}
	.medical02 .smile-life .txt-lead{
		font-size: 2.2rem;
	}
	.medical02 .smile-life .txt{
		font-size: 1.6rem;
	}
	.medical02 .smile-life .service{
		margin-top: 30px;
	}
	.medical02 .smile-life .service h5{
		margin-bottom: 10px;
		font-size: 1.7rem;
		letter-spacing: .04em;
	}
	.medical02 .smile-life .service .txt{
		font-size: 1.6rem;
		text-align: justify;
	}
	.medical02 .smile-life .service ul{
		display: block;
		text-align: center;
	}
	.medical02 .smile-life .service ul li{
		width: 100%; 
		padding: 20px 10px;
		font-size: 1.6rem;
		letter-spacing: .02em;
	}
	.medical02 .smile-life .service ul li:nth-child(n+2){
		margin-top: 10px;
	}


/* location
-----------------------------------------------------------------*/
	.location{
		padding: 50px 0;
	}
	.location h2{
		margin-bottom: 60px;
	}
	.location .map-area{
    height: 400px;
		margin-bottom: 60px;
		padding: 0 10px;
	}
	.location .map-area iframe{
		width: 100%;
	}
	.location .map-area .address{
		justify-content: center;
		width: 100%;
		margin-top: 10px;
	}
	.location .map-area .address .en{
		margin-right: 10px;
	}
	.location .lifeinfo-list{
		max-width: none;
		margin: 0 auto 60px;
	}
	.location .lifeinfo-list li{
		display: block;
	}
	.location .lifeinfo-list li:nth-child(n+2){
		margin-top: 60px;
	}
	.location .lifeinfo-list .pic{
		width: auto;
		margin-bottom: 20px;
	}
	.location .lifeinfo-list .txt-area{
		width: auto;	
	}
	.location .lifeinfo-list h3{
		margin-bottom: 10px;
		font-size: 2.4rem;
	}
	.location .lifeinfo-list .txt{
		font-size: 1.6rem;
	}


/* access
-----------------------------------------------------------------*/
	.access{
		padding: 50px 0 160px;	
	}
	.access::after{
		height: 80vw;
		background: url(../img/top/bg_gradient_sp.jpg) no-repeat center bottom;
		background-size: 100% auto;
	}
	.access h2{
		margin-bottom: 60px;
	}
	.access .pic-map-area{
		width: calc(100% + 20px);
		margin: 0 0 60px -10px;
		padding-bottom: 10px;
		overflow: auto;
	}
	.access .pic-map-area .pic-map{
    position: relative;
		width: 200%;
	}
  .access .pic-map-area .swipe{
    position: absolute;
    right: 25%;
    top: 50%;
    transform: translate(50%,-50%);
    display: block;  
  }
	.access .station-access-list{
		display: block;
		margin-bottom: 70px;
	}
	.access .station-access-list li:nth-child(1),
	.access .station-access-list li:nth-child(2){
		width: 100%;	
	}
	.access .station-access-list li:nth-child(n+2){
		margin-top: 60px;
	}
	.access .station-access-list li .pic{
		margin-bottom: 20px;
	}
	.access .station-access-list li._flex{
		display: block;
	}
	.access .station-access-list li._flex .pic{
		width: 100%;
	}
	.access .station-access-list li._flex .txt-box{
		width: 100%;
	}
	.access .station-access-list h3{
		font-size: 1.8rem;
	}
	.access .station-access-list h3 small{
		font-size: 1.6rem;
	}
	.access .station-access-list .txt-box div{
		padding: 10px 0 10px 15px;
		font-size: 1.6rem;
	}
	.access .station-access-list li:last-child .txt-box + .txt-box{
		padding-top: 0;
	}
	.access .station-access-list li:last-child .txt-box + .txt-box div{
		padding-top: 30px;
		border-left: 1px solid var(--gold);
	}
	.access .station-access-list .metro{
		margin: 5px 0 -5px;
		font-size: 1.6rem;
	}
	.access .station-access-list .distance{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		flex-wrap: wrap;
		font-size: 2.2rem;	
	}
	.access .station-access-list .distance .station-name{
		font-size: 3rem;
	}
	.access .station-access-list .distance > span:nth-child(2){
		font-size: 3rem;
	}
	.access .station-access-list .distance strong{
		font-size: 5.8rem;
		line-height: .8;
	}
	.access .station-access-list .distance small{
		width: 100%;
		padding: 10px 0 0;
		text-align: right;
	}
	.access .access-info-list{
		max-width: none;
	}
	.access .access-info-list li{
		display: block;
	}
	.access .access-info-list li:nth-child(n+2){
		margin-top: 60px;
	}
	.access .access-info-list .pic{
		max-width: none;
		width: 100%;
		margin-bottom: 20px;	
	}
	.access .access-info-list .txt{
		width: 100%;
		font-size: 1.6rem;	
	}


/* ft-btm
-----------------------------------------------------------------*/
	.ft-btm{
		padding-top: 60px;
	}
	.ft-btm .logo img{
		width: 320px;
	}
	.ft-btm .pic img{
		height: calc(100vh - 60px);
	}
	.ft-btm .gotop span img {
    width: 12px;
	}


}