@charset "utf-8";

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



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


/* areaNav （ロケーションページに同様のナビ有）
------------------------------------------------------------------------ */
	.areaNav  ul {
		display: flex;
		justify-content:center;
		border-bottom: 2px solid rgba(var(--site-themeColor-corpColor_gold), 1);
	}
	.areaNav  ul li {
		display: table;
		width: 30%;
		
		--M-fluidFontSize-max-fontsize: 25.5;
		--M-fluidFontSize-min-fontsize: 13.5;
		--M-fluidFontSize-max-viewport: 980;
		--M-fluidFontSize-min-viewport: 320;
		--M-fluidFontSize-fontSize: clamp( var(--M-fluidFontSize-min-fontsize) * 1px, (var(--M-fluidFontSize-min-fontsize) * 1px) + (1vw - (var(--M-fluidFontSize-min-viewport) / 100 * 1px)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport))), var(--M-fluidFontSize-max-fontsize) * 1px );
		font-size: var(--M-fluidFontSize-fontSize);
		margin: 0 4%;
	}
	.areaNav  ul li a {
		display: table-cell;
		height: 3.529411em;
		vertical-align: middle;
		text-align: center;
		line-height: 1.2;
		background: #F3F3F3;
		padding: 0.5em 0.3em;
		transition: 0.3s all ease;
		color: #999;
	}
	.areaNav  ul li.active a{
		background: rgba(var(--site-themeColor-corpColor_gold), .8);
		color: #fff;
		pointer-events: none;
	}

	@media (hover: hover) and (pointer: fine) {
		.areaNav  ul li a:hover {
			opacity: 1;
			color: #FFF;
			background: rgba(var(--site-themeColor-corpColor_gold), .75);
		}
	}
	.areaNav  ul li a:focus-visible {
		opacity: 1;
		color: #FFF;
		background: rgba(var(--site-themeColor-corpColor_gold), .75);
	}

@media screen and (max-width: 850px) {
	.areaNav  ul li {
		width: 40%;
		margin: 0 1.5%;
	}
}

/* -----------------------------------------------------------------------------
	共通
----------------------------------------------------------------------------- */

/* gallerySlide_0X-main
------------------------------------------------------------------------ */
	 [class*="gallerySlide_0"] .slidePic {
		width: 100%;
		aspect-ratio: 1280 / 760;
		background: rgba(238, 243, 246, 1);
	}
	 [class*="gallerySlide_0"] .slidePic img {
		display: block;
		width: auto;
		max-width: none;
		height: 100%;
	}
	 [class*="gallerySlide_0"] .txtUnit {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        position: absolute;
        inset:auto 0 0 auto ;
        z-index: 1;
        min-height: 0.001vw;
        line-height: 1.2;
        color: #fff;
        font-size: clamp(1rem, (16 / 600 * 100vw), 2rem);
        text-shadow: 0px 0px 5px rgba(0, 0, 0, .45), 0px 0px 20px rgba(0, 0, 0, .4);
        padding:.5em;
        font-weight: normal;
        letter-spacing: -.02em;
	}
	 [class*="gallerySlide_0"] .txtUnit.bk {
        color: #000;
        text-shadow: 0px 0px 5px rgba(255, 255, 255, .85), 0px 0px 20px rgba(255, 255, 255, .8);
	}

	/* button reset */
	[class*="-thumbnail"] button {-webkit-appearance: none;-moz-appearance: none;appearance: none;color: inherit;font: inherit;text-align: inherit;background: transparent;border: none;border-radius: 0;}
	[class*="-thumbnail"] button:not([disabled]) {cursor: pointer;}

	[class*="-thumbnail"] .thumb-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 6px;
		margin-top: 6px;
	}
	[class*="-thumbnail"] .thumb-button {
		position: absolute;
		inset: 0;
		z-index: 0;
		opacity: .4;
		transition: opacity .13s ease-out;
	}
	[class*="-thumbnail"] .thumb-button img {
		display: block;
		width: 100%;
		max-width: none;
		height: 100%;
		object-fit: cover;
		object-position: 50% 50%;
	}

	[class*="-thumbnail"] .thumb-item {
		position: relative;
		background: #000;
	}
	/* active */
	[class*="-thumbnail"] .thumb-item-active {
		position: relative;
	}
	[class*="-thumbnail"] :where(.thumb-item-active) .thumb-button {
		opacity: 1;
	}

	/* hover, focus */
	@media (hover: hover) and (pointer: fine) {
		[class*="-thumbnail"] .thumb-button:hover {
			opacity: 1;
		}
	}

	[class*="-thumbnail"] .thumb-button:focus-visible {
		opacity: 1;
	}

@media screen and (max-width: 768px) {
	.gallerySlideBox {
		width: 100%;
	}
	
	/* gallerySlide_01-main
	---------------------------------------------------- */
	[class*="gallerySlide_0"]  .slidePic {
		width: 100%;
		aspect-ratio: 1280 / 760;
		background: rgba(238, 243, 246, 1);
	}

	/* gallerySlide_01-thumbnail
	---------------------------------------------------- */
	[class*="-thumbnail"] {
		width: var(--site-sizeContentWide-M);
		margin-left: auto;
		margin-right: auto;
	}
	[class*="-thumbnail"] .thumb-list {
		gap: 2px;
		margin-top: 10px;
	}

	/* active */
	.gallerySlide_01-thumbnail :where(.thumb-item-active) .thumb-button {
		opacity: 1;
	}
}


/* 矢印カスタマイズ
------------------------------------------------------------------------ */
	 [class*="gallerySlide_0"] .swiper-button-prev,
	 [class*="gallerySlide_0"] .swiper-button-next {
        width: 34px;
        height: 80px;
		background: rgba(0,0,0,.5);
		z-index:1;
		transition: all 0.2s ease;
        margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
	}
	  [class*="gallerySlide_0"] .swiper-button-prev {left: 0px;}
	  [class*="gallerySlide_0"] .swiper-button-next {right:0px;}

	  [class*="gallerySlide_0"] .swiper-button-prev::after,
	  [class*="gallerySlide_0"] .swiper-button-next::after {
         color: #fff;
         font-size: 25px;
	}
	  [class*="gallerySlide_0"] .swiper-slide img {
	  height: auto;
	  width: 100%;
	}

	/*hover*/
	  [class*="gallerySlide_0"] .swiper-button-prev:hover,
	  [class*="gallerySlide_0"] .swiper-button-next:hover {
		opacity: 0.8;
	}
@media screen and (max-width: 768px) {
	/* 矢印カスタマイズ */
	  [class*="gallerySlide_0"] .swiper-button-prev,
	  [class*="gallerySlide_0"] .swiper-button-next {
        width: 30px;
        height: 60px;
	}
	  [class*="gallerySlide_0"] .swiper-button-prev::after,
	  [class*="gallerySlide_0"] .swiper-button-next::after {
          font-size: 20px;
	}
}
@media screen and (max-width: 450px) { 
	  [class*="gallerySlide_0"] .swiper-button-prev,
	  [class*="gallerySlide_0"] .swiper-button-next {
		width: 26px;
		height: 50px;
	}
	  [class*="gallerySlide_0"] .swiper-button-prev::after,
	  [class*="gallerySlide_0"] .swiper-button-next::after {
        font-size: 16px;
	}
}	





/* -----------------------------------------------------------------------------
	cont-gallery01
----------------------------------------------------------------------------- */
	.cont-gallery01 {
		background: #e5edef;
		padding: 120px 0;
	}

	/* gallerySlide_01-main
	---------------------------------------------------- */
	.gallerySlide_01-main {
	}

	/* gallerySlide_01-thumbnail
	---------------------------------------------------- */
	.gallerySlide_01-thumbnail .thumb-item {
        flex: 0 0 calc((100% - (6px * 4)) / 5.001); /* = ((100% - (gap * 間隔数)) / 要素数) */
		aspect-ratio: 1280 / 600;
	}

@media screen and (max-width: 768px) {
	.cont-gallery01 {
		padding: 60px 0;
	}
	/* gallerySlide_01-thumbnail
	---------------------------------------------------- */
	.gallerySlide_01-thumbnail .thumb-item {
		/*flex: 0 0 calc((100% - (2px * 3)) / 4.001); *//* = ((100% - (gap * 間隔数)) / 要素数) */
		 aspect-ratio: 600 / 400;
	}
}



/* -----------------------------------------------------------------------------
	cont-gallery01
----------------------------------------------------------------------------- */
	.cont-gallery02 {
		padding: 120px 0 0;
	}

	/* gallerySlide_02-main
	---------------------------------------------------- */
	.gallerySlide_02-main {
	}

	/* gallerySlide_02-thumbnail
	---------------------------------------------------- */
	.gallerySlide_02-thumbnail .thumb-item {
		flex: 0 0 calc((100% - (6px * 3)) / 4.001); /* = ((100% - (gap * 間隔数)) / 要素数) */
		aspect-ratio: 1280 / 550;
	}

@media screen and (max-width: 768px) {
	.cont-gallery02 {
		padding: 60px 0 0;
	}
	/* modelSlide_01-thumbnail
	---------------------------------------------------- */
	.gallerySlide_02-thumbnail .thumb-item {
		/*flex: 0 0 calc((100% - (2px * 5)) / 6.001);*/ /* = ((100% - (gap * 間隔数)) / 要素数) */
		 aspect-ratio: 600 / 300;
	}
}