@charset "utf-8";

/* =======================================================================================
	COMMON
======================================================================================= */



@media screen and (max-width: 900px) {
	.PCTB {display: none;}
}


/* =======================================================================================
	HEADER
======================================================================================= */

/* siteHeaderWrap | 最初からuniqueエリアに被せる・スクロールで背景色を出す
------------------------------------------------------------------------ */
	.siteHeaderWrap {
		position: fixed;
		background: transparent;
		color: rgba(var(--site-variationColor-whitish), 1);
		transition: color .3s ease;
		background: linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .0) 100%);
	}
	.siteHeaderWrap::before {
		opacity: 0;
		transition: opacity .3s ease;
	}
	.siteHeaderWrap.is_headerSolid {
		color: rgba(var(--site-themeColor-base_text), 1);
		/*background: rgba(255, 255, 255, .8);
		backdrop-filter: blur(3px);*/
	}
	.siteHeaderWrap.is_headerSolid::before {
		opacity: 1;
	}

	/* siteHeaderLogo | ロゴの白黒クロスフェード（画像2枚重ね）
	---------------------------------------------------- */
	.siteHeaderLogo a {
		position: relative;
		display: block;
		line-height: 0;
	}
	.siteHeaderLogo img {
		transition: opacity .3s ease;
	}
	.siteHeaderLogo .logoBk {
		position: absolute;
		inset: 0;
		opacity: 0;
	}
	.siteHeaderWrap.is_headerSolid .siteHeaderLogo .logoWh {
		opacity: 0;
	}
	.siteHeaderWrap.is_headerSolid .siteHeaderLogo .logoBk {
		opacity: 1;
	}

	/* drawerBtn_gNav | ハンバーガーはcurrentColor継承のためtransitionのみ追加
	---------------------------------------------------- */
	.drawerBtn_gNavWrap button .line,
	.drawerBtn_gNavWrap button .line::before,
	.drawerBtn_gNavWrap button .line::after {
		transition: background-color .3s ease, transform .18s ease-in-out;
	}

@media screen and (min-width: 900.02px) {
	/* gNav | PC時のみ文字色をヘッダーに追従させる（SPドロワー内は既存の白文字のまま） */
	.gNav li a {
		color: inherit;
		transition: color .3s ease;
	}
	.gNav li.conNav a {
		--base-gNav-a-pad-lr : 2em;
		color: rgba(0, 0, 0, 1);
		background: rgba(255, 255, 255, 1);
		border-radius: 8px 0 8px 8px;;
		
	}
	.siteHeaderWrap.is_headerSolid .gNav li.conNav a {
		color: rgba(255, 255, 255, 1);
		background: rgba(var(--site-themeColor-accent_1), 1);
	}
}



/* =======================================================================================
	PAGE
======================================================================================= */

/* mainVisualWrap
------------------------------------------------------------------------ */
.mainVisualWrap {
	position: relative;
}
.mainVisualWrap .mainCopy {
	position: absolute;
	bottom: 30px;
	right: 0;
	width: 80%;
	max-width: 600px;
	text-align: right;
}
.mainVisualWrap .imgcapkeep {
	right: auto;
	left: 0;
}
@media screen and (max-width: 600px) {
}






/* ------------------------------------------------------------------------
	contentArticle| 共通設定
------------------------------------------------------------------------ */

	.txtIcon {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-top: var(--site-marpad-S);
	}
	.txtIcon li {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100px;
		aspect-ratio: 1 / 1;
		color: #FFF;
		line-height: 1.8;
		text-align: center !important;
		background: rgba(var(--site-themeColor-accent_1), 1);
		border-radius: 5px;
	}
	.txtIcon li em {
		line-height: 0.8;
		font-size: 1.6em;
	}

@media screen and (max-width: 600px) {
	.txtIcon li {
		font-size: 3.5vw;
	}
}



/* ========================================================================
	MV~merit
======================================================================== */

/* sucWrap
------------------------------------------------------------------------ */
	#sucWrap {
		background: url("../images/share/bg_pattern.png") 0 0 repeat;
		padding: var(--site-marpad-XS) 0;
	}
	#sucWrap .contbox {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20px 50px;
	}
	#sucWrap .contbox .sucTxt {
		font-size: 2.0em;
	}
	#sucWrap .contbox .sucTxt small {
		font-size: 0.6em;
		font-family: var(--site-font_family-serif);
	}
	#sucWrap .contbox .btn_req {
	}
	#sucWrap .contbox a {
		width: 100%;
	}

@media print, screen and (min-width: 900.02px){ 
}
@media screen and (max-width: 900px) {
	#sucWrap .contbox {
		flex-direction: column;
	}
	#sucWrap .contbox .btn_req {
		width: 90%;
		max-width: 600px;
	}
}
@media screen and (min-width: 600.02px) and (max-width: 900px) {
}
@media screen and (max-width: 600px) { 
	#sucWrap .contbox .sucTxt {
		font-size: 5.2vw;
	}
}


/* meritWrap
------------------------------------------------------------------------ */
	#meritWrap {
		color: #FFF;
		background: #151515;
		padding: var(--site-marpad-XS) 1.3em;
	}
	.meritCont {
		max-width: 1400px;
		display: grid;
		grid-template-columns: repeat(4, auto);
		font-size: 1.2em;
		line-height: 1.6;
		margin: 0 auto;
	}
	.meritCont li {
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: center;
	}
	.meritCont li:not(:nth-of-type(1)){
		position: relative;
		padding-left: 2em;
	}
	.meritCont li:not(:nth-of-type(1))::before {
		content: "";
		position: absolute;
		top: 0;
		left: 1em;
		display: block;
		width: 1px;
		height: 100%;
		background: rgba(255,255,255,.3);
	}
	.meritCont em {
		font-size: 1.8em;
		line-height: 1;
	}
	.meritCont em em {
		font-size: 1.2em;
	}
	.meritCont em.mdlTxt {
		font-size: 1.4em;
	}

@media print, screen and (min-width: 900.02px){ 
	.meritCont li .PC_bl {
		display: block;
	}
}
@media screen and (max-width: 900px) {
	.meritCont {
		grid-template-columns: repeat(2, 1fr);
	}
	.meritCont li:not(:nth-of-type(1)){
		position: relative;
		padding-left: 0em;
		margin-top: 2em;
	}
	.meritCont li:not(:nth-of-type(1))::after {
		content: "";
		position: absolute;
		top: -1em;
		left: 0;
		display: block;
		width: 100%;
		height: 1px;
		background: rgba(255,255,255,.3);
	}
	.meritCont li:not(:nth-of-type(4))::before {
		display: none;
	}
	.meritCont li:nth-of-type(4)::before {
		left:0;
	}
	.meritCont li:nth-of-type(1),
	.meritCont li:nth-of-type(2) {
		grid-column: 1 / 3;
	}
}
@media screen and (max-width: 600px) { 
}





/* ========================================================================
	location
======================================================================== */
	
	#loc .locLead > .generalColBox {
		align-self: stretch;
		text-align: left;
		background: url("../images/share/bg_deco_line.png") bottom left no-repeat;
		background-size: 70% auto;
	}
	#loc .locLead > .generalColBox .txtBox,
	#loc .locLead > .generalColBox .hWord,
	#loc .locLead > .generalColBox .hTxt {
		text-align: left;
	}
	#loc .locLead > .generalColBox .txtUnit .hWord::after {
		margin-left: 0;
	}
	#loc .locLead .picBox {
		position: relative;
		grid-column-gap: 30px;
	}
	#loc .locLead .picBox > * {
		--base-generalColBox-margin-column: 30px;
	}
	#loc .locLead .picBox::before {
		content: "";
		position: absolute;
		z-index: 0;
		top: 15%;
		right: 20px;
		display: block;
		width: 60%;
		height: 90%;
		background: #f2f2f2;
		
	}
	#loc .locLead .picBox > * {
		position: relative;
		z-index: 2;
	}
	#loc .locLead .picBox > *:nth-of-type(1) {
	}
	#loc .locLead .picBox > *:nth-of-type(2) {
		margin-top: var(--site-marpad-XL);
	}

	.googleMapWrap #map {
		width: 100%;
		height: 500px;
	}


@media print, screen and (min-width: 1400.02px){ 
	#loc .locLead {
		max-width: none;
		width: calc(100% - ((100% - 1400px) / 2));
		margin-right: 0;
	}
	#loc .locLead .txtUnit {
		width: calc(700px - var(--base-generalColBox-margin-column));
	}
	#loc .locLead .picBox {
		width: calc(100% - 700px - 10px);
	}
}
@media print, screen and (min-width: 900.02px){ 
	#loc .locLead .picBox {
		order: 10;
	}
	#loc .locLead {
		--base-generalColBox-margin-column: 30px;
	}
}
@media screen and (max-width: 900px) {
	#loc .locLead > .generalColBox {
		background-position: right bottom;
	}
	#loc .locLead .picBox > *:nth-of-type(1) {
	}
	#loc .locLead .picBox > *:nth-of-type(2) {
	}
	#loc .locLead .picBox::before {
	}
}
@media screen and (min-width: 600.02px) and (max-width: 900px) {
}
@media screen and (max-width: 600px) { 
	#loc .locLead > .generalColBox {
		background-size: 90% auto;
	}
}



/* ========================================================================
	access
======================================================================== */

	#acc .generalColBox {
		text-align: center;
		--base-generalColBox-margin-column: 30px;
	}
	#acc .stationPic {
		position: relative;
	}
	#acc .stationMin {
		font-size: 1.3em;
	}
	#acc .stationMin .stationName {
		font-size: 1.4em;
	}
	#acc .stationMin .minNum {
		display: inline-block;
		color: rgba(var(--site-themeColor-accent_1),1);
		font-style: italic;
		font-size: 1.8em;
		margin-right: 0.15em;
	}
	#acc .stationUnit > small {
		display: block;
		text-align: left;
		background: #ECECEC;
		padding: 10px;
	}


@media print, screen and (min-width: 900.02px){ 
	#acc .txtBox {
		text-align: center;
	}
}
@media screen and (max-width: 1200px) {
	#acc .stationMin {
		font-size: 1.8vw;
	}
}
@media screen and (max-width: 900px) {
	#acc .txtUnit {
		padding: 0 1.8em;
	}
	#acc .stationPic img {
		width: 100%;
		max-width: none;
	}
	#acc .stationMin {
		font-size: min(1.4em, 3.8vw);
	}
}
@media screen and (min-width: 600.02px) and (max-width: 900px) {
}
@media screen and (max-width: 600px) { 
}





/* ========================================================================
	plan
======================================================================== */
	
	#pla .planLead {
		background: url("../images/share/bg_deco_line.png") right bottom no-repeat;
		background-size: 70% auto;
	}
	#pla .planLead > .generalColBox {
		align-self: stretch;
		text-align: left;
	}
	#pla .planLead > .generalColBox .txtBox,
	#pla .planLead > .generalColBox .hWord,
	#pla .planLead > .generalColBox .hTxt {
		text-align: left !important;
	}
	#pla .planLead > .generalColBox .txtUnit .hWord::after {
		margin-left: 0;
	}
	#pla .planLead .picBox {
		position: relative;
		grid-column-gap: 30px;
	}
	#pla .planLead .picBox > * {
		--base-generalColBox-margin-column: 30px;
	}
	#pla .planLead .picBox::before {
		content: "";
		position: absolute;
		z-index: 0;
		top: 15%;
		right: 50px;
		display: block;
		width: 60%;
		height: 95%;
		background: #f2f2f2;
		
	}
	#pla .planLead .picBox > * {
		position: relative;
		z-index: 2;
	}
	#pla .planLead .picBox > *:nth-of-type(1) {
	}
	#pla .planLead .picBox > *:nth-of-type(2) {
		margin-top: var(--site-marpad-XL);
	}

	.googleMapWrap #map {
		width: 100%;
		height: 500px;
	}


@media print, screen and (min-width: 1400.02px){ 
	#pla .planLead {
		max-width: none;
		/*width: calc(100% - ((100% - 1400px) / 2));*/
		width: 100%;
		margin-left: 0;
		padding-right: calc((100% - 1400px) / 2);
		background-position: 90% bottom;
		background-size: 50% auto;
	}
	#pla .planLead  .txtUnit {
		width: calc(700px - var(--base-generalColBox-margin-column));
	}
	#pla .planLead .picBox {
		width: calc(100% - 700px - 10px);
		margin-left: auto;
	}
}
@media print, screen and (min-width: 900.02px){
	#pla .js_swiperPlan {
		width: 96%;
	}
	#pla .planLead {
		--base-generalColBox-margin-column: 30px;
	}
}
@media screen and (max-width: 900px) {
	#pla .planLead .picBox > *:nth-of-type(1) {
	}
	#pla .planLead .picBox > *:nth-of-type(2) {
	}
	#pla .planLead .picBox::before {
		top: 15%;
	}
}
@media screen and (min-width: 600.02px) and (max-width: 900px) {
}
@media screen and (max-width: 600px) { 
	#pla .planLead {
		background-size: 95% auto;
	}
}




	.planUnit {
		display: grid;
		grid-template-columns: 1fr max(300px, 30%);
		gap: 20px;
		background: #FFF;
		padding: 3em 2em;
		box-sizing: border-box;
	}
	.planUnit .spec-type {
		color: rgba(var(--site-themeColor-accent_1),1);
		font-size: 1.15em;
		line-height: 1.6;
	}
	.planUnit .spec-type::after {
		content: "";
		display: block;
		width: 30px;
		height: 1px;
		background: rgba(var(--site-themeColor-accent_1),.5);
		margin: 0.6em 0 1em;
	}
	.planUnit .spec-area > span {
		display: block;
		line-height: 1.6;
	}
	.planUnit .spec-area span + span {
		margin-top: 0.6em;
	}
	.planUnit .spec-area span em {
		font-size: 1.8em;
	}
	.planUnit .spec-area span .inbl {
		line-height: 0.8;
	}
	.planUnit .madoriPic {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	.planUnit .madoriPic img {
		width: auto;
	}

@media screen and (max-width: 600px), screen and (min-width: 900.02px) and (max-width: 1200px) {
	.planUnit {
		grid-template-rows: auto 1fr;
		grid-template-columns: 1fr;
		gap: 20px;
		text-align: center;
	}
	.planUnit .spec-type::after {
		margin: 0.6em auto 1em;
	}
	.planUnit .madoriPic img {
	}
}
@media screen and (max-width: 900px) { 
	.planUnit {
		font-size: 2.6vw;
	}
}
@media screen and (max-width: 480px) { 
	.planUnit {
		font-size: 3.8vw;
	}
}


/* ========================================================================
	facility
======================================================================== */
	
	#equ {
	}
	#equ .sizeContentWideS .txtUnit {
		background: url("../images/share/bg_deco_line.png") center 150% no-repeat;
	}

@media print, screen and (min-width: 900.02px){ 
	#equ .txtBox {
		text-align: center;
	}
	#equ .txtIcon {
		justify-content: center;
	}
}
@media screen and (max-width: 900px) {
	#equ .swiper-slide img {
		width: 100%;
	}
}
@media screen and (min-width: 600.02px) and (max-width: 900px) {
}
@media screen and (max-width: 600px) { 
}





/* ========================================================================
	quality
======================================================================== */
	#qua {
		width: 100%;
		overflow-x: hidden;
	}
	#qua .txtBox,
	#qua .hWord,
	#qua .hTxt {
		text-align: left !important;
	}
	#qua .hWord::after {
		margin-left: 0;
	}
	#qua .picBox {
		flex-shrink: 1;
		top: 0;
		width: 402px !important;
		position: relative;
		margin: var(--site-marpad-M) auto 0;
	}
	#qua .picBox::before {
		content: "";
		position: absolute;
		z-index: 0;
		top: -70px;
		right: -40px;
		display: block;
		width: 80%;
		height: 50%;
		background: url("../images/share/bg_pattern.png") 0 0 repeat;
		
	}
	#qua .picBox p {
		position: relative;
		z-index: 2;
	}

	#qua .qualityUnit {
		--base-generalColBox-margin-column: 30px;
		align-items: stretch;
	}
	#qua .qualityUnit div.swiper-slide {
		box-sizing: border-box;
		padding: 0 1em 1em;
		border: 1px solid rgba(var(--site-themeColor-accent_1),1);
		border-radius: 5px;
	}
	#qua .qualityUnit .swiper,
	#qua .qualityUnit .swiper-wrapper {
		padding: 0;
		border: none;
		border-radius: 0;
	}
	#qua .qualityUnit dt {
		display: grid;
		justify-content: center;
		align-items: center;
		grid-template-rows: auto 1fr;
		line-height: 1.8;
		text-align: center;
		margin-bottom: 0em;
	}
	#qua .qualityUnit dt span {
		display: block;
		align-items: center;
	}
	#qua .qualityUnit dt em {
		display: inline-block;
		color: #FFF;
		min-width: 10em;
		background: rgba(var(--site-themeColor-accent_1),1);
		padding: 0 0.3em;
		border-radius: 0 0 3px 3px;
	}
	#qua .qualityUnit dt > span:nth-of-type(2) {
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;
		color: rgba(var(--site-themeColor-accent_1),1);
		margin: 1.8em 0;
	}
	#qua .qualityUnit dd {
		line-height: 1.8;
	}


@media print, screen and (min-width: 1400.02px){ 
	#qua  {
	}
}
@media print, screen and (min-width: 900.02px){ 
	#qua > .generalColBox {
		flex-wrap: nowrap;
	}
	#qua .txtUnit {
		width: calc(100% - 402px - (var(--base-generalColBox-margin-column) * 1));
	}
}
@media screen and (min-width: 900.02px) and (max-width: 1200px) {
	#qua .qualityUnit dt span {
		display: inline !important;
	}
}
@media screen and (max-width: 900px) {
	#qua > .generalColBox {
		width: 100%;
	}
	#qua .txtBox,
	#qua .hWord,
	#qua .hTxt {
		text-align: center!important;
	}
	#qua .hWord::after {
		margin-left: auto;
	}
}
@media screen and (min-width: 600.02px) and (max-width: 900px) {
}
@media screen and (max-width: 600px) { 
	#qua .qualityUnit dt > span:nth-of-type(2) {
		font-size: 4vw;
	}
}



/* ========================================================================
	SWIPER（SP専用カルーセル：station/plan/facility/quality 共通）
======================================================================== */

/* 共通 | PCでは元のグリッド表示に戻す・矢印とビュレットはaccent_1を使用
------------------------------------------------------------------------ */
	[class*="js_swiper"] .swiper {
		--swiper-theme-color: rgba(var(--site-themeColor-accent_1), 1);
	}
	[class*="js_swiper"] .swiper-pagination,
	[class*="js_swiper"] .swiper-button-prev,
	[class*="js_swiper"] .swiper-button-next {
		display: none;
	}

@media print, screen and (min-width: 900.02px){
	[class*="js_swiper"] .swiper,
	[class*="js_swiper"] .swiper-wrapper {
		display: contents;
	}
	/* [data-colbox-size] > * は実DOM上の直接の子（.swiper）にしか効かないため、
	   display:contentsで実体化しない.swiper-slideには改めて幅を指定する */
	.js_swiperStation .swiper-slide {
		width: calc((100% - (var(--base-generalColBox-margin-column) * 3)) / 4);
	}
	.js_swiperPlan .swiper-slide {
		width: calc((100% - (var(--base-generalColBox-margin-column) * 1)) / 2);
	}
	.js_swiperFacility .swiper-slide {
		width: calc((100% - (var(--base-generalColBox-margin-column) * 1)) / 2);
	}
}
@media screen and (min-width: 1200.02px) {
	.js_swiperQuality .swiper-slide {
		width: calc((100% - (var(--base-generalColBox-margin-column) * 2)) / 3);
	}
}
@media screen and (min-width: 900.02px) and (max-width: 1200px) {
	.js_swiperQuality .swiper-slide {
		width: 100%;
	}
}
@media screen and (max-width: 900px) {
	.js_swiperStation .swiper,
	.js_swiperPlan .swiper,
	.js_swiperFacility .swiper,
	.js_swiperQuality .swiper {
		width: 100%;
		/*padding-bottom: 44px;*/	/* ページネーション分の余白 */
	}
	[class*="js_swiper"] .swiper-pagination {
		display: block;
		position: absolute;
		bottom: -8px;
		z-index: 10;
		margin-top: 16px;
	}
	[class*="js_swiper"] .swiper-pagination-bullet-active {
		background: rgba(var(--site-themeColor-accent_1), 1);
	}
	[class*="js_swiper"] .swiper-button-prev,
	[class*="js_swiper"] .swiper-button-next {
		display: flex;
		top: 40%;
		width: 32px;
		height: 32px;
		margin-top: 0;
		background: rgba(255,255,255,.85);
		border-radius: 50%;
		box-shadow: 0 0 6px rgba(0,0,0,.15);
	}
	[class*="js_swiper"] .swiper-button-prev::after,
	[class*="js_swiper"] .swiper-button-next::after {
		font-size: 1.2rem;
	}
	[class*="js_swiper"] .swiper-button-prev {
		left: 4px;
	}
	[class*="js_swiper"] .swiper-button-next {
		right: 4px;
	}
}



/* ========================================================================
	outline
======================================================================== */
	.outlineCont {
		width: 100%;
		font-size: 1.2em;
		border-collapse: separate;
		border-top: 1px solid rgba(var(--site-themeColor-accent_1),1);
	}
	.outlineCont tr {
		margin-top: 3px;
		padding: 0 0;
	}
	.outlineCont tr > * {
		line-height: 1.8;
		padding: 0.6em 0;
		border-bottom: 1px solid rgba(var(--site-themeColor-accent_1),1);
	}

	.outlineCont tr th {
		color: #FFF;
		min-width: 12em;
		text-align: left;
		font-weight: normal;
		background: rgba(var(--site-themeColor-accent_1),1);
		padding-right: 1em;
		padding-left: 1em;
	}
	.outlineCont tr td {
		padding-right: 1.2em;
		padding-left: 1.2em;
	}
@media screen and (max-width: 900px) {
	.outlineCont tr th {
		/*font-weight: bold;
		color: rgba(var(--site-themeColor-accent_1),1);
		background: none;*/
		padding: 0.4em 1em;
	}
}
@media screen and (max-width: 600px) {
	.outlineCont tr,
	.outlineCont tr > * {
		display: block;
	}
	.outlineCont tr th {
		color: rgba(var(--site-themeColor-accent_1),1);
		background: rgba(var(--site-themeColor-accent_1),.15);
	}
}


	.outlineCont .kashinushi dt {
		margin: 0.3em 0 0.3em;
	}
	.outlineCont .kashinushi dd {
		font-size: 0.8em;
		line-height: 1.4;
		margin-top: 0.5em;
	}
	.outlineCont .kashinushi dd ul li {
		display: inline-block;
	}
	.outlineCont .kashinushi dd ul li:not(:last-child)::after {
		content: "、"
	}


/* ========================================================================
	other
======================================================================== */

/* yokoku
------------------------------------------------------------------------ */
	.yokoku {
		text-align: center;
		line-height: 1.6;
		font-size: 0.9em;
		margin-top: var(--site-marpad-L);
		padding: 1.6em 1em;
		border: 1px solid #CCC;
		border-width: 1px 0;
	}
	#top + .yokoku {
		margin-top: 0;
	}

@media screen and (max-width: 900px) {
	.yokoku {
		text-align: left;
	}
}