@charset "utf-8";
/*	◆ CSS Document ◆
ベースになるCSSコードや、:rootで変数にしたものはbase.cssにあります。
こちらはフロントページの項目用のCSSです。 */


/*--------------------------------------------------
	フロントページ 共通
--------------------------------------------------*/

@media (max-width: 767px) {
}



/*--------------------------------------------------
	MV
--------------------------------------------------*/
#mv.mv_front{
	background: url(../images/top/top_main_hero.webp) no-repeat;
	background-size: contain;
	background-position: center top;
	width: -webkit-fill-available;
	height: clamp(3.5rem, 39.06vw, 7.5rem);
}
	.mv_front .mv{
		position: relative;
	}
	.mv_front p{
		position: absolute;
		top: 1.5rem;
		left: 50%;
		transform: translateX(-50%);
	}
		.mv_front p img {
			height: clamp(3.5rem, 26.3vw, 5.05rem);
		}
		.mv_front p::after {
			content: '';
			display: inline-block;
			width: 3rem;
			height: 1.5rem;
			background-image: url(../images/common/_svg/text/in_roppongi.svg);
			background-repeat: no-repeat;
			position: absolute;
			bottom: -.5rem;
			right: -1rem;
		}

@media (max-width: 767px) {
	#mv.mv_front{
		background-image: url(../images/top/top_main_hero_sp.webp);
		background-size: cover;
	}
	.mv_front p{
		top: 2.3rem;
		left: 50%;
		transform: translateX(-50%);
		width: 80vw;
	}
	.mv_front p img{
		height: auto;
		width: 100%;
		object-fit: contain;
	}
	.mv_front p::after{
		bottom: -1rem;
		right: 0;
	}
}


/*--------------------------------------------------
	Main
--------------------------------------------------*/
#front-page h2{
	color: var(--gold);
	font-size: .32rem;
	margin-bottom: .15rem;
	font-family: var(--font-heading);
	font-weight: 900;
	font-optical-sizing: auto;
	line-height: 1.5;
}


@media screen and (min-width: 768px) and ( max-width:1023px){

}
@media (max-width: 767px) {
	#front-page{
		margin-top: 2rem;
	}
	#front-page h2 {
		font-size: .4rem;
		line-height: 1.3;
	}
	#front-page p{
		font-size: .2rem;
		text-align: center;
		line-height: 1.3;
	}
}



	/*----------------------------------------------
		Main - firstview
	----------------------------------------------*/
	#firstview{
		background-image: url("../images/common/bg_circle.webp"), url("../images/common/bg_circle.webp");
		background-position: calc(100% + 25%) 25%, -16% calc(100% + 5%);
		background-repeat: no-repeat, no-repeat;
		background-size: clamp(3rem, 40vw, 9rem), clamp(3rem, 40vw, 9rem);
	}
	#firstview h2{
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
		#firstview h2::before {
			content: "";
			background:url(../images/common/logo_symbol_gold.webp) no-repeat;
			display: block;
			width: 1.5rem;
			height: 1.5rem;
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
		}

	#firstview h3{
		font-weight: 900;
		margin-block: .25rem;
	}
	
	#firstview h2.hero-subtitle{
		font-weight: 900;
		margin-block: .25rem; /* 元のh3と同じ余白を設定 */
		color: #000;
		font-size: .24rem;
	}
	
	#firstview h2.hero-subtitle::before {
		display: none !important;
		content: none !important; /* 確実にロゴを非表示 */
	}
	#firstview .flex_center{
		gap: .15rem;
		margin-block: .25rem;
	}
		#firstview .flex_center a{
			width: 2.6rem;
			display: block;
			text-align: center;
			border: 1px solid var(--black);
			padding-block: .15rem;
			font-family: var(--font-button);
			font-weight: 400;
			font-style: normal;
		}
	#firstview .e-service{
		margin-top: 2rem;
		text-align: center;
	}
		#firstview .e-service .flex_between{
			margin-block: .8rem;
			align-items: flex-start;
			gap: .5rem;
		}
		#firstview .e-service li{
			flex: 1;
			/* width: 2.5rem; */
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
		}
		#firstview .e-service .item_text_box{
			width: 100%;
		}
			#firstview .e-service img{
				width: 100%;
				aspect-ratio: 1/1;
				object-fit: cover;
			}
			#firstview .e-service h3{
				color: var(--gold);
				font-size: .24rem;
				margin-block: .1rem;
			}
			#firstview .e-service p,
			#firstview .e-service a{
				font-size: .16rem;
				line-height: 1.5;
			}
			#firstview .e-service p{
				padding-bottom: .16rem;
				font-size: clamp(.1rem, 2.5vw, .2rem);
			}


	@media screen and (min-width: 768px) and ( max-width:1023px){

	}
	@media (max-width: 767px) {
		#firstview {
			background-position: calc(100% + 520%) 20%, -650% calc(100% + 7%);
			background-size: 90%, 90%;
		}
		#firstview h2::before{
			margin-bottom: .25rem;
		}

		#firstview h2.hero-subtitle{
			font-size: .25rem;
			text-align: center;
		}

		#firstview h3,
		#firstview .e-service li h3{
			font-size: .4rem;
			text-align: center;
		}
		#firstview p,
		#firstview .e-service p{
			font-size: .25rem;
			line-height: 1.2;
			text-align: center;
		}
		#firstview .flex_center{
			flex-direction: column;
		}
		#firstview .flex_center a{
			width: 100%;
			padding-inline: .25rem;
		}
		#firstview .e-service{
			margin-top: 1rem;
		}
		#firstview .e-service img{
			width: 100%;
			aspect-ratio: 2/1;
			object-fit: cover;
		}
		#firstview .e-service .flex_between{
			flex-direction: column;
		}
		#firstview .e-service li {
			width: 100vw;
		}
		#firstview .e-service li img{
			width: 100%;
		}
			#firstview .e-service li h3,
			#firstview .e-service li p{
				padding-inline: .25rem;
			}
			#firstview .e-service a{
				font-size: .2rem;
			}

	}
	

	

	/*----------------------------------------------
		Main - todays-attendance
	----------------------------------------------*/
	#todays-attendance{
		background-color: var(--whitegold);
		background-image: var(--bg-section-white-roses);
		background-repeat: var(--bg-rose-repeat);
		background-position: var(--bg-rose-position);
		background-size: var(--bg-rose-size);
		padding-block: 1rem;
	}
	#todays-attendance .flex_between{
		margin-block: .25rem;
		flex-wrap: wrap;
		align-items: stretch;
	}
		#todays-attendance .flex_between:after {
			content: "";
			display: block;
			width: calc((100% - 1rem) / 3);
			height: 0;
		}
		/* コンパニオンカードのスタイルはstyle_companion.cssに統一管理されています */
		/*
		#todays-attendance .flex_between li{
			background: var(--white);
			padding-block: .25rem;
			width: calc((100% - 1rem) / 3);
			justify-content: flex-start;
		}
		#todays-attendance .flex_between li:nth-child(n+4){
			margin-top: .5rem;
		}
		*/
		a.viewall_link{
			font-family: var(--font-button);
			font-weight: 400;
			font-style: normal;
			color: var(--white);
			background: var(--gold);
			padding: .25rem;
			margin-top: .5rem;
		}


	@media screen and (min-width: 768px) and ( max-width:1023px){

	}
	@media (max-width: 767px) {
		#todays-attendance {
			/* 背景サイズは統一変数で管理 */
		}
		#todays-attendance h2{
			text-align: center;
		}
		
		/* コンパニオンカードのモバイル版スタイルはstyle_companion.cssに統一管理されています */
		/*
		#todays-attendance .flex_between li{
			width: calc((100% - .3rem) / 2);
		}
		#todays-attendance .flex_between li:nth-child(n+3){
			margin-top: .25rem;
		}
		*/
	}
	
	
	/*----------------------------------------------
		Main - premium-service
	----------------------------------------------*/
	#premium-service{
		margin-top: 1rem;
		text-align: center;
	}
	#premium-service .service_summary{
		margin-top: .5rem;
	}
	#premium-service .service_summary li{
		border-left: 1px solid var(--black);
		padding: .25rem;
		height: 2.5rem;
		justify-content: flex-start;
	}
		#premium-service .service_summary li:last-of-type{
			border-right: 1px solid var(--black);
		}
		#premium-service .service_summary h3{
			color: var(--gold);
			font-size: .24rem;
			margin-block: .1rem;
			font-family: var(--font-heading);
			font-weight: 900;
			font-optical-sizing: auto;
		}
		#premium-service .service_summary p{
			font-family: var(--font-basic);
			font-weight: 400;
			font-size: .16rem;
		}

	#premium-service .included_service_list{
		background: var(--gold);
		color: var(--white);
		margin-top: 1rem;
		padding: .5rem .25rem;
		width: 100%;
		position: relative;
		display: none;
	}
		#premium-service .included_service_list::before{
			content: '';
			display: inline-block;
			width: 3.68rem;
			height: .61rem;
			background-image: url(../images/common/table_accent_top_01.webp);
			background-repeat: no-repeat;
			background-size: contain;
			vertical-align: middle;
			position: relative;
			top: -.8rem;
			margin-bottom: -.5rem;
		}

		#premium-service .included_service_list h2{
			color: #f6db00;
			font-size: .32rem;
			letter-spacing: .3em;
			font-family: var(--font-heading);
			font-weight: 900;
			font-optical-sizing: auto;
		}
			#premium-service .included_service_list h2::after{
				content: '';
				display: inline-block;
				width: 8rem;
				height: .4rem;
				background-image: url(../images/common/_svg/parts/hr_01.svg);
				background-repeat: no-repeat;
				background-size: contain;
				vertical-align: middle;
			}
		#premium-service .included_service_list .flex{
			justify-content: space-evenly;
		}
			#premium-service .included_service_list .flex h3{
				font-size: .32rem;
				margin-bottom: .15rem;
				text-align: left;
			}
			#premium-service .included_service_list .flex ul{
				font-family: var(--font-basic);
				font-weight: 400;
				font-size: .2rem;
				text-align: left;
			}
				#premium-service .included_service_list .flex ul li{
					margin-block: .1rem;
				}
					#premium-service .included_service_list .flex ul li::before{
						content: '';
						display: inline-block;
						width: .2rem;
						height: .15rem;
						background-image: url(../images/common/icon_check.webp);
						background-repeat: no-repeat;
						background-size: contain;
						vertical-align: top;
						margin-right: .05rem;
					}

	.top_guide_cta{
		background-image: url(../images/top/bg_hero.webp);
		background-size: cover;
		background-position: center top;
		background-repeat: no-repeat;
		margin-top: .8rem;
		width: 100%;
    	text-align: left;
	}
		.top_guide_cta h2{
			color: var(--black) !important;
		}
		.top_guide_cta a{
			background: var(--gold);
			color: var(--white);
			font-family: var(--font-button);
			font-weight: 400;
			font-style: normal;
			padding: .2rem;
			margin-top: .3rem;
			display: inline-block;
		}

	@media screen and (min-width: 768px){
		.top_guide_cta .container_small{
			background-image: url(../images/top/top_guide_cta_photo.webp);
			background-size: contain;
			background-position: 103% top;
			background-repeat: no-repeat;
			min-height: 3rem;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
		}
	}
	@media (max-width: 767px) {
		#premium-service .service_summary{
			flex-direction: column;
		}
			#premium-service p{
				font-size: .25rem !important;
				line-height: 1.5;
			}
		#premium-service .service_summary li{
			border-left: none;
			border-top: 1px solid var(--black);
			height: auto;
			padding-block: .25rem;
		}
		#premium-service .service_summary li:last-of-type {
			border-right: none;
			border-bottom: 1px solid var(--black);
		}
		#premium-service .service_summary h3{
			font-size: .35rem;
			text-align: center;
		}
		#premium-service .service_summary p{
			font-size: .2rem !important;
		}
		#premium-service .included_service_list{
			width: 100vw;
		}
		#premium-service .included_service_list h2::after{
			width: 100%;
			height: .2rem;
		}
		#premium-service .included_service_list .flex{
			flex-direction: column;
			align-items: flex-start;
			margin-inline: .5rem;
			gap: .25rem;
		}
	}
	/*----------------------------------------------
		Main - What is DeliveryHealth (SP)
	----------------------------------------------*/
	@media (max-width: 767px) {
		.top_guide_cta{
			background: url(../images/top/top_guide_cta_bg_sp.webp) no-repeat;
			background-size: 130%;
			background-position: center top;
			height: 6.5rem;
			padding-block: 2.7rem .3rem;
			text-align: center;
			border: none;
		}
	}
	/*----------------------------------------------
		Main - hotel-and-area
	----------------------------------------------*/
	#hotel-and-area{
		margin: .8rem 0;
		text-align: center;
	}
	#hotel-and-area .top_accent{
		margin-block: .5rem;
	}
		#hotel-and-area .top_accent img{
			width: 100vw;
			height: auto;
		}
	#hotel-and-area .hotel_list{
		margin-bottom: .75rem;
		flex-wrap: wrap;
	}
		#hotel-and-area .hotel_list li{
			border: 1px solid var(--gold);
			padding:.2rem;
			width: calc((100% - .5rem) / 3);
			min-height: 2.35rem;
			text-align: left;
			font-family: var(--font-basic);
			font-weight: 300;
		}
			#hotel-and-area .hotel_list li:nth-child(n+4) {
				margin-top: .25rem;
			}
		#hotel-and-area .hotel_list li h3 {
			font-size: .24rem;
		}
		#hotel-and-area .hotel_list li .txt{
			font-size: .14rem;
		}
		#hotel-and-area .hotel_list li .star{
			color: var(--gold);
			font-size: .2rem;
		}
		#hotel-and-area .hotel_list a.link,
		#hotel-and-area .service_areas a.link{
			color: #999;
			font-size: .16rem;
			font-family: var(--font-button);
			font-weight: 400;
			font-style: normal;
		}
			#hotel-and-area .hotel_list.flex_between .link::after,
			#hotel-and-area .service_areas a.link::after{
				content: ">";
				color: var(--gold);
				margin-left: .05rem;
			}
	#hotel-and-area .h2_deco::before{
		content: '';
		display: block;
		width: 2.33rem;
		height: .18rem;
		background-image: url(../images/common/table_accent_top_02.webp);
		background-repeat: no-repeat;
		background-size: contain;
	}
	#hotel-and-area .service_areas{
		margin-block: .25rem .5rem;
	}
		#hotel-and-area .service_areas li{
		border-left: 1px solid var(--gold);
		padding-inline: .25rem;
		width: calc(100% / 3);
		height: auto;
	}
		#hotel-and-area .service_areas li:last-of-type{
			border-right: 1px solid var(--gold);
		}
		#hotel-and-area .service_areas h3{
			width: 100%;
			color: var(--white);
			background: var(--gold);
			font-size: .24rem;
			padding-block: .05rem;
			margin-block: .1rem;
		}
		#hotel-and-area .service_areas p{
			font-family: var(--font-basic);
			font-weight: 100;
			font-size: .16rem;
		}
	#hotel-and-area .service_areas li .txt li{
		border: none;
		width: 100%;
		padding: .05rem;
		height: auto;
		text-align: left;
		font-family: var(--font-basic);
		font-weight: 200;
		line-height: 1.2;
	}
		#hotel-and-area .service_areas li .txt li::before{
			content: "●";
			margin-right: .05rem;
			color: var(--gold);
		}
	#hotel-and-area .service_areas li img{
		width: 100%;
		height: auto;
		margin-top: .1rem;
	}
	#hotel-and-area .service_areas .link_right:has(.link){
		text-align: right;
		margin-block: .1rem;
	}


	@media screen and (min-width: 768px) and ( max-width:1023px){

	}
	@media (max-width: 767px) {
    #hotel-and-area{
      margin: .8rem 0;
    }
    #hotel-and-area .top_accent img {
      width: auto;
      height: 2rem;
      object-fit: cover;
    }
		#hotel-and-area p{
			font-size: .25rem;
		}
		#hotel-and-area .hotel_list{
			flex-direction: column;
      margin-left: .2rem;
      margin-right: .2rem;
		}
		#hotel-and-area .hotel_list li{
			width: 100%;
		}
			#hotel-and-area .hotel_list li:nth-child(n+1){
				margin-top: .25rem;
			}
		#hotel-and-area .hotel_list li h3 {
			font-size: .32rem;
		}
		#hotel-and-area .hotel_list li .txt {
			font-size: .2rem;
			text-align: left;
		}
		#hotel-and-area .hotel_list a.link,
		#hotel-and-area .service_areas a.link {
			color: #999;
			font-size: .2rem;
			font-family: var(--font-button);
			font-weight: 400;
			font-style: normal;
		}
		#hotel-and-area .service_areas {
			flex-direction: column;
		}
		#hotel-and-area .service_areas li {
			width: 100%;
			border-left: none;
			border-top: 1px solid var(--gold);
			height: auto;
			padding-block: .25rem;
		}
		#hotel-and-area .service_areas li:last-of-type {
			border-right: none;
			border-bottom: 1px solid var(--gold);
		}
	}
	
	
	/*----------------------------------------------
		Main - roppongi-journal
	----------------------------------------------*/
	#roppongi-journal{
		background-color: var(--whitegold);
		background-image: url("../images/common/_svg/logo/logo_symbol_white.svg");
		background-repeat: no-repeat;
		background-position: calc(102% + -102%) -.2rem;
		background-size: 5rem;
		padding-block: 1rem;
	}
	#roppongi-journal .post_latest{
		margin-top: .5rem;
		border-top: 3px solid var(--gold);
		border-bottom: 3px solid var(--gold);
		width: var(--container_size_small);
	}
	#roppongi-journal .thmb_latest {
		width: 4.15rem;
	}
		#roppongi-journal .thmb_latest img{
			width: 100%;
			aspect-ratio: 415 / 275;
			object-fit: cover;
		}
	#roppongi-journal .content_latest{
		background: var(--white);
		padding-block: .35rem .2rem;
		padding-inline: .25rem;
		width: calc(100% - 4.15rem);
		max-height: 2.75rem;
		position: relative;
		box-sizing: border-box;
	}
		#roppongi-journal .content_latest span{
			background: var(--gold);
			color: var(--white);
			font-size: .16rem;
			font-family: var(--font-button);
			font-weight: 400;
			font-style: normal;
			padding: .05rem .1rem;
			position: absolute;
			top: 0;
			text-transform: uppercase;
		}
		#roppongi-journal .content_latest time,
		#roppongi-journal .content_hereafter time{
			color: var(--gold);
			font-size: .16rem;
			font-family: var(--font-basic);
			font-weight: 400;
		}
		#roppongi-journal .content_latest h3{
			font-size: .24rem;
			font-weight: 700;
			margin-block: .15rem;
		}
		#roppongi-journal .content_latest .content_txt,
		#roppongi-journal .content_hereafter .content_txt{
			font-size: .16rem;
			font-family: var(--font-basic);
			font-weight: 200;
			line-height: 1.3;
			text-align: left;
		}
		#roppongi-journal .content_latest .bottom{
			margin-top: .15rem;
		}
		#roppongi-journal .content_latest .auther,
		#roppongi-journal .content_latest .readmore{
			align-items: center;
			gap: .05rem;
			font-size: .16rem;
			font-family: var(--font-button);
			font-weight: 400;
			font-style: normal;
			color: #999;
		}
		#roppongi-journal .content_latest .readmore::after{
			content:">";
			color: var(--gold);
			margin-left: .1rem;
		}
		.post-filters {
			text-align: center;
			margin: 2em 0;
		}
			.post-filters a {
				display: inline-block;
				margin: 0 .5em;
				padding: .5em 1em;
				background: var(--gold);
				color: var(--white);
				text-decoration: none;
				font-family: var(--font-button);
				font-weight: 400;
				font-style: normal;
			}
				.post-filters a.active {
					background: var(--gold);
					color: var(--white);
				}
		#rest-posts-container{
			width: 100%;
		}
		#roppongi-journal .post_hereafter{
			flex-wrap: wrap;
      display: flex;
      justify-content: space-between;
		}
		#roppongi-journal .link_hereafter{
			width: calc((100% - .8rem) / 3);
		}
			#roppongi-journal .link_hereafter:nth-child(n+4) {
				margin-top: .5rem;
			}
		#roppongi-journal .post_hereafter li{
			border: 3px solid var(--gold);
			width: 100%;
			display: flex;
			flex-direction: column;
			height: 100%;
		}
		#roppongi-journal .thmb_hereafter img{
			width: 100%;
			height: 1.8rem;
			object-fit: cover;
		}
		#roppongi-journal .content_hereafter{
			background: var(--white);
			padding: .2rem;
      		flex-grow: 1;
		}
		#roppongi-journal .content_hereafter span{
			background: var(--gold);
			color: var(--white);
			font-size: .18rem;
			font-family: var(--font-button);
			font-weight: 400;
			font-style: normal;
			text-transform: uppercase;
			padding: .05rem .1rem;
			margin-right: .1rem;
		}
		#roppongi-journal .content_hereafter h3{
			font-size: .25rem;
			font-weight: 700;
			margin-block: .15rem;
			line-height: 1.1;
		}

	@media screen and (min-width: 768px) and ( max-width:1023px){

	}
	@media (max-width: 767px) {
		#roppongi-journal p{
			font-size: .25rem;
			text-align: center;
			line-height: 1.2;
		}
		#roppongi-journal .post_latest{
			width: 100%;
			flex-direction: column-reverse;
		}
			#roppongi-journal .content_latest,
			#roppongi-journal .link_hereafter{
				width: 100%;
				max-height: 100%;
			}
			#roppongi-journal .thmb_latest {
				width: 100%;
			}
		#roppongi-journal .content_latest span{
			font-size: .25rem;
		}
		#roppongi-journal .content_latest time,
		#roppongi-journal .content_hereafter time,
		#roppongi-journal .content_latest .content_txt,
		#roppongi-journal .content_hereafter .content_txt,
		#roppongi-journal .content_latest .auther,
		#roppongi-journal .content_latest .readmore {
			font-size: .2rem;
		}
		#roppongi-journal .content_latest h3 {
			font-size: .32rem;
		}
		.post-filters{
			gap: .1rem !important;
			margin: .25rem 0;
		}
		.post-filters a{
			width: calc((100% - .3rem) / 2);
			font-size: .2rem;
			margin: .05rem .15em;
			padding: .2rem;
		}
		#roppongi-journal .content_hereafter {
			height: 100%;
		}
		#roppongi-journal .link_hereafter:nth-child(n+2) {
			margin-top: .25rem;
		}
		#roppongi-journal .content_hereafter .content_txt{
			text-align: left;
		}
	}

	.no-posts-message {
		text-align: center;
		padding: 2rem 1rem;
	}
	
	.no-posts-message p {
		color: var(--gold);
		font-size: .32rem;
	}
	


	@media screen and (min-width: 768px) and (max-width:1023px) {}

	/*----------------------------------------------
			Main - TRUST & SECURITY
			共通コンポーネント化したためスタイルをstyle_component.cssに移行
	----------------------------------------------*/