@charset "UTF-8";

/* ==========================================================================
   Variables
   ========================================================================== */
:root {
  --color-primary: #d7344c;
  --color-bg: #f4efe7;
  --color-bg-white: #fff;
  --color-bg-gray: #e5e5e6;
  --color-text-dark: #231815;
  --color-border: #cdcdcd;

  --font-family-serif: 'Cormorant Garamond', serif;
  --font-family-display: 'Libre Caslon Display', serif;

  --letter-spacing-wide: 0.2em;
  --letter-spacing-medium: 0.15em;
  --letter-spacing-narrow: 0.08em;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.bg{ background: var(--color-bg);}
.bgWhite{ background: var(--color-bg-white);}
.bgGray{ background: var(--color-bg-gray);}
.red{ color: var(--color-primary);}
.exEn{ font-family: var(--font-family-serif);}
.exEn2{ font-family: var(--font-family-display);}
.exEn.red{ color: var(--color-primary); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); }
.txtUp{ text-transform: uppercase;}

.js-scrollable { position: relative; }
.scroll-hint-icon{ top: auto; bottom: 10px;}
.scroll-hint-icon-wrap { z-index: 10; }


.tit27{ font-size: clamp( 20px , 2.7vw ,  27px); letter-spacing: var(--letter-spacing-wide);}
.tit30{ font-size: clamp( 20px , 3.9vw , 30px); letter-spacing: var(--letter-spacing-wide);}
.tit33{ font-size: clamp( 25px , 4.2vw , 33px); letter-spacing: var(--letter-spacing-wide);}
.tit54{ font-size: clamp( 30px , 7vw , 54px); letter-spacing: var(--letter-spacing-wide);}

.txt18{ font-size: clamp( 15px , 2.3vw , 18px); letter-spacing: var(--letter-spacing-wide);}
.txt22{ font-size: clamp( 18px , 2.8vw , 22px); letter-spacing: var(--letter-spacing-wide);}
.txt25{ font-size: clamp( 18px , 3.2vw , 25px); letter-spacing: var(--letter-spacing-wide);}
.txt26{ font-size: clamp( 18px , 3.3vw , 26px); letter-spacing: var(--letter-spacing-medium);}
.txt27{ font-size: clamp( 18px , 2.7vw ,  27px); letter-spacing: var(--letter-spacing-wide);}
.txt28{ font-size: clamp( 20px , 3.6vw ,  28px); }
.txt30{ font-size: clamp( 22px , 3.9vw ,  30px); }

.titJpEn .exEn{ font-size: 37%;}
.vertical{ writing-mode: vertical-rl; text-align: left; display: inline-block;}
.vertical>h2{ text-align: left;}
.vertical-center{ text-align: center;}
.vertical-center span{ writing-mode: vertical-rl; display: inline-block;}
.f-border li, .f-border .slide{ flex-basis: 33.33%;}
.f-border li:not(:last-of-type), .f-border .slide:not(:last-of-type){ border-right: 1px solid var(--color-text-dark);}
.f-border .slide.slide03{ border-right: none;}

.main .container { max-width: 1180px; padding: 80px 0 60px; text-align: center;}
.main .container02{ max-width: 1080px;}
section .caption{ text-align: right;}


@media screen and (max-width: 768px) {
	.spLh25{ line-height: 2.5;}
	.txt22{ letter-spacing: 0.1em;}
	.txt25{ letter-spacing: 0.1em;}
	.tit26{ font-size: 6.2vw;}
	.titJpEn{ margin-bottom: 50px;}
	.sp-wide{ width: 67%; margin: 0 auto; text-align: left;}
	.f-border li:not(:last-of-type) , .f-border .slide:not(:last-of-type){ border: none;}
	.block-tit img{ width: 12.44vw;}

	.pointList{ row-gap: 20px;}
	.pointList li{ flex-basis: calc((100% - 20px) / 2);}
}

/* ==========================================================================
   Fade up Animation
   ========================================================================== */
/* スピード調整 */
[data-sai][data-sai][data-sai-duration='1.2'],
body[data-sai-duration='1.2'] [data-sai] {
  -webkit-transition-duration: 1.2s;
          transition-duration: 1.2s;
}


/* ==========================================================================
   Illust Animation
   ========================================================================== */
   
.crossfade-loop { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;}
.crossfade-loop .crossfade-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

/* 1枚目は常に表示 */
.crossfade-loop .crossfade-item:nth-of-type(1) { z-index: 1;}

/* 2枚目だけをふわふわと重ねる */
.crossfade-loop .crossfade-item:nth-of-type(2) { z-index: 2; animation: simple-fade 4s infinite ease-in-out;}

@keyframes simple-fade {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}


/* planのアニメーションタイミング */
.crossfade-loop.loop03 .crossfade-item,
.crossfade-loop.loop04 .crossfade-item{
  animation: 12s infinite ease-in-out;
}
.crossfade-loop.loop03{ width: 100%; aspect-ratio: 16 / 9;}
.crossfade-loop.loop03 .crossfade-item:nth-of-type(1){ animation-name: L3-show-1;}
.crossfade-loop.loop03 .crossfade-item:nth-of-type(2){ animation-name: L3-show-2;}
.crossfade-loop.loop03 .crossfade-item:nth-of-type(3){ animation-name: L3-show-3;}

/* 引戸イラスト 3枚 */
@keyframes L3-show-1 {
	0%, 15%   { opacity: 1; }
	25%, 85%  { opacity: 0; }
	95%, 100% { opacity: 1; }
}

@keyframes L3-show-2 {
	0%, 15%   { opacity: 0; }
	25%, 65%  { opacity: 1; }
	75%, 100% { opacity: 0; }
}

@keyframes L3-show-3 {
	0%, 65%   { opacity: 0; }
	75%, 85%  { opacity: 1; }
	95%, 100% { opacity: 0; }
}


/* 開閉図 4枚*/
.crossfade-loop.loop04 .crossfade-item:nth-of-type(1){ animation-name: R4-show-1; }
.crossfade-loop.loop04 .crossfade-item:nth-of-type(2){ animation-name: R4-show-2; }
.crossfade-loop.loop04 .crossfade-item:nth-of-type(3){ animation-name: R4-show-3; }
.crossfade-loop.loop04 .crossfade-item:nth-of-type(4){ animation-name: R4-show-4; }

@keyframes R4-show-1 {
	0%, 15%   { opacity: 1; }
	25%, 90%  { opacity: 0; }
	100%      { opacity: 1; }
}

@keyframes R4-show-2 {
	0%, 15%   { opacity: 0; }
	25%, 40%  { opacity: 1; }
	50%, 100% { opacity: 0; }
}

@keyframes R4-show-3 {
	0%, 40%   { opacity: 0; }
	50%, 65%  { opacity: 1; }
	75%, 100% { opacity: 0; }
}

@keyframes R4-show-4 {
	0%, 65%   { opacity: 0; }
	75%, 90%  { opacity: 1; }
	100%      { opacity: 0; }
}

/* ==========================================================================
   Slick Slider
   ========================================================================== */
.slick-arrow { position: absolute; display: block; top: 50%; transform: translateY(-50%); left: -15px; transition: 0.3s; z-index: 100;}
.slick-arrow:hover{ opacity: 0.7; transition: 0.3s; cursor: pointer;}
.slick-arrow.next-arrow{ left: auto; right: -15px;}
.slide-dots { text-align: center;}
.slide-dots li {margin: 0 10px; display: inline-block;}
.slide-dots li button{ text-indent: -9999px; background: var(--color-border); cursor: pointer; height: 18px; margin: auto; width: 18px; border: none; outline: none;}
.slide-dots li.slick-active button { background: var(--color-primary);}

.equipment { position: relative;}
.equipment .prev-arrow { width: 46px; height: 46px; transform: translateY(-50%) rotate(90deg) ;}
.equipment .next-arrow { width: 46px; height: 46px; transform: translateY(-50%) rotate(-90deg) ;}


@media screen and (max-width: 768px) {
    .slide-dots{margin-top: 15px;}
	.slide-dots li {margin: 0 5.25px;}
    .slide-dots li button{  -webkit-appearance: none; appearance: none; width: 13px !important; height: 13px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; font-size: 0 !important;  line-height: 0 !important;
	box-sizing: border-box;}
	.slick-arrow { width: 7.2%;}

	.equipment .next-arrow,.equipment .prev-arrow{ transform: translateY(-50%) rotate(0); width: 7.2%; height: auto;}
}

/* ==========================================================================
   Page Sections
   ========================================================================== */
/* #mainVisual */
#mv{position: relative; padding: 150px 0 135px;  }
#mv .cap{position: absolute; bottom: 10px; right: 20px; font-size: 10px;}
.mvInner{max-width: 1186px; margin: 0 auto; position: relative;}

@media screen and (max-width: 768px) {
    #mv{   padding: 100px 0 100px;}
	#mv .crossfade-loop { position: relative; width: 100%; height: 132vw; overflow: hidden; }
}

/* #intro */
.intro .bg{ padding: 150px 0 100px;}
.intro .block01{ position: relative; max-width: 1000px; padding-bottom: 313px;}
.intro .introTextBox{ text-align: center; width: 100%; }
.intro .introTextBox .titJpEn{ margin-bottom: 0; letter-spacing: 0.2em;}
.intro .introTextBox h2{ height: 10em;}
.intro .introTextBox .txt{ margin-right: 64px; letter-spacing: 0.2em; font-size: 16px; height: 20em;}
.intro .cap{ text-align: right;}
.intro .block01 .crossfade-loop .crossfade-item{ top: 0; left: 0; width: 100%;}
.intro figure:nth-of-type(1){ position: absolute; left: 0; top: 102px;}
.intro figure:nth-of-type(2){ position: absolute; width: 253px; height: 230px; right: -136px; top: 158px;}
.intro figure:nth-of-type(3){ position: absolute; width: 200px; height: 167px; left: 24px; bottom: 192px;}
.intro figure:nth-of-type(4){ position: absolute; left: 234px; bottom: 64px;}
.intro figure:nth-of-type(5){ position: absolute; width: 322px; height: 205px; right: 153px; bottom: 65px;}
.intro .block01 .caption{ position: absolute; right: 0; bottom: 0;}

@media screen and (max-width: 768px) {
	.intro .bg{ padding: 20vw 0 12vw;}
	.intro .block01{ padding-bottom: 46.5vw;}
	.intro .introTextBox{ display: flex; position: relative; z-index: 2;}
	.intro .introTextBox .vertical{  display: flex; justify-content: inherit; margin: 0 auto;}
	.intro .introTextBox h2{ align-self: center; margin-bottom: 14.5vw; }
	.intro .introTextBox .txt{ margin-right: 0; margin-top: 4.4vw; font-size: 3vw; line-height: 2.5; height: 20em; position: relative; z-index: 1;}
	.intro figure:nth-of-type(1){ width: 11vw; top:  auto; bottom: 5vw;}
	.intro figure:nth-of-type(2){ width: 32.9vw; height: 43vw; top: 80px; right: -20px; }
	.intro figure:nth-of-type(3){ width: 28vw; left: 11vw; top: auto; bottom: 8vw; aspect-ratio: 200/167;}
	.intro figure:nth-of-type(4){ width: 26vw; right: auto; bottom: auto; left: 0; top: 46vw; z-index: 0;}
	.intro figure:nth-of-type(5){ width: 47vw; height: 37.25vw; top: auto; bottom: 0; right: auto; left: 0; }
	.intro .block01 .caption{ position: absolute; right: 0; bottom: 0;}

}

/* subnav */
.subnav{ padding: 80px 0; width: calc(100% - 30px); max-width: 1110px; margin: 0 auto;}
.subnav .navItem { justify-content: center;}
.subnav .navItem h3{ position: relative; z-index: 2;}
.subnav .navItem .inner{ flex-direction: column; margin: 0 auto; margin-top: -10px; z-index: 1;}
.subnav .navItem .txt{ margin: 2em 0 0 3em; line-height: 2.5; letter-spacing: 0.08em; font-size: 15px;}
.subnav .navItem .caption{ text-align: right; margin-top: 10px;}
.subnav .navItem  figure{ width: 100%; text-align: center; margin-top: auto;}
.subnav .navItem .more{ display: block; text-align: right; margin-top: auto; transition: all 0.3s ease;}
.subnav .navItem .more:hover{ transform: translateY(10px);}
.subnav .navItem .more p{ width: 100%; text-align: center;}
.subnav .navItem .more::before{ content: ""; display: block; width: 35px; height: 36px; background: url(../imgs/arrow.svg) no-repeat; margin: 0 auto;}
.subnav .navItem .slide-dots { position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%);}
.subnav .navItem .crossfade-loop { width: 246px; height: 285px; margin: 0 auto;}

@media screen and (max-width: 768px) {
	.subnav .navItem .inner{ width: 100%; }
	.subnav .navItem img{ margin: 0 auto; }
	.subnav .navItem .txt{ margin-top: -4em; font-size: 3.8vw;}
	.subnav .navItem .more{ margin-top: 12vw;}
	.subnav .f-border .navItem{ width: 100%; justify-content: center; align-items: center;}
	.subnav .f-border .slide-dots{ position: absolute; bottom: 21vw; left: 50%; transform: translateX(-50%);}
	.subnav .navItem .slideItem{ justify-content: center;}
}

/* #time */
.time .block .txtBox{ text-align: left; }
.time .block .inner .txt{ margin-top: 50px; font-size: 15px;}
.time .block-tit{margin-bottom: 60px;}

.time .block01{ container-type: inline-size;  max-width: 1452px;}
.time .block01 .inner{ max-width: 1300px; width:calc(100% - 15px); margin: 0 0 0 auto; display: flex; justify-content: center; align-items: center;}
.time .block01 .txtBox{ flex-basis: 24.6%;}
.time .block01 .mapInner{ flex-basis: 74%;}
.time .block01 .mapInner .photo{ position: relative; aspect-ratio: 488 / 361;}
.time .block01 .mapInner .photo figcaption{ position: absolute; right: 14%; bottom: 22px; z-index: 2;}
.time .block02{ position: relative; margin-bottom: 120px;}
.time .block02 .deco-left, .time .block02 .deco-right { position: absolute; aspect-ratio: auto; pointer-events: none;}
.time .block02 .deco-left { width: 87px; height: 258px; bottom: 164px; left: -33px;}
.time .block02 .deco-right { width: 163px; height: 199px; right: -110px; bottom: 52px;}
.time .block02 .f-border .inner{ width: 81%;  margin: 20px auto ; }
.time .block02 .f-border .inner .titJpEn{ margin: 20px 30px;}
.time .block02 .f-border .inner .txt{ display: inline-block; text-align: left; margin: 0 auto;}
.time .block02 .caption{ position: absolute; text-align: right; right: -50px; bottom: 0;}
@container (min-width: 1301px) {
  .time .block01 { margin: 0 auto;}
}

.time .block03 .illustBox {text-align: center; max-width: 1078px;}
.time .block03 .commonSpModalImage::before { right: auto; left: 10px;}
.time .block03 .illustBox figure{ max-width: 854px; position: relative; display: inline-block; aspect-ratio: 61 / 44;}
.time .block03 .illustBox .caption{ position: absolute; bottom: 10%; left: 0;}
.time .block03 .txtBox{ margin-bottom: 80px;}
.time .block03 .txtBox .txt{ margin-top: 50px; font-size: 15px;}
.time .block03 .areaList{ margin: clamp( 50px , 11vw , 90px) 0 10px;}
.time .block03 .areaList p{ line-height: 1.3; margin-top: 0.5em;}
.time .block03 .areaList .min { display: block; font-size: 11px; line-height: 1.5;}

.time .block04{ padding: 30px 0 ;}
.time .block04 .inner{ position: relative;}
.time .block04 .inner::after{ position: absolute; content: "";  background: url(../imgs/time_illust_05.png) no-repeat; background-size: contain; display: block; width: 147px; height: 78px; right: 20px; top: -15px;}
.time .block04 .titJpEn{ margin-bottom: 0;}
.time .block04 > .flexBox{ justify-content: center; gap: 4.3%; align-content: center;}
.time .block04 > .inner > .caption{ position: absolute; bottom: 0; right: 30px; }
.time .block04 .left{ flex-basis: 40%; align-content: center; }
.time .block04 .left .txtBox{ align-self: center;}
.time .block04 .left .txt01{ font-size: 16px; margin-bottom: 1em; }
.time .block04 .right{ flex-basis: 34%; align-content: center; }
.time .block04 .right li{ flex-basis: calc((100% -  40px)/2);}

@media screen and (max-width: 768px) {
	.time .block .inner .txt{ margin-top: 30px; font-size: 13px;}

	.time .block01{ padding-bottom: 0;}
	.time .block01 .inner{ flex-direction: column-reverse; gap: 50px; max-width: 100%; width: 100%; margin-left: 0; }
	.time .block01 .inner .commonSpModalImage::before{ right: auto; left: 10px;}
	.time .block01 .txtBox{ display: inline-block; margin: 0 auto;text-align: left; flex-basis: 100%; order: 1;}
	.time .block01 .mapInner{ width: 100vw; margin: calc(50% - 50vw); overflow-x: scroll; overflow-y: visible; order: 3;  }
	.time .block01 .mapInner + .caption{ order: 2; width: 100%;}
	.time .block01 .mapInner .photo { flex-basis: 100%; max-width: unset; width: 700px; margin: calc(50% - 50vw); overflow: auto;}
	.time .block01 .photo figcaption{ bottom: 0;}


	.time .block02 { padding-bottom: 80px;}
	.time .block02 .deco-left{ left: auto; right: 0; width: 16.5vw; bottom: 18vw; height: 51vw;}
	.time .block02 .deco-right{ display: none;}
	.time .block02 .f-border .inner{ width: 74.5%; }
	.time .block02 .f-border .inner .titJpEn{ margin: 15px 25px; font-size: 6.7vw;}
	.time .block02 .slide-dots { margin-top: 0;}
	.time .block02 .slick-arrow{ transform: translateY( calc(-50% - 140px));}
	.time .block02 .caption{ right: 0; bottom: 30px;}

	.time .block03 .illustBox{ overflow: hidden; width: 100vw; margin: calc(50% - 50vw);}
	.time .block03 .illustBox figure{ width: 100vw; margin:calc(50% - 50vw);}
	.time .block03 .illustBox .caption{ position: absolute; bottom: 10%; left: 11%;}
	.time .block03 .container02{ padding-top: 0;}
	.time .block03 .txtBox{ margin: 0 auto 80px; display: inline-block;}
	.time .block03 .txtBox .txt{ font-size: 12px; margin-top: 20px;}
	.time .block03 .areaList{ row-gap: 15px;}
	.time .block03 .areaList li{ flex-basis: calc((100% - 30px) / 3); }
	.time .block03 .areaList li p{ line-height: 1.5; margin-top: 10px;}

	.time .block04{ padding: 50px 7.4vw 30px;}
	.time .block04 .inner::after{ width: 16.4vw; right: -20px;}
	.time .block04 > .inner > .caption{ position: absolute; bottom: -20px; right: 0;}
	.time .block04 .left{ flex-basis: 100%; flex-direction: row-reverse; align-items: flex-start; margin-bottom: 0;}
	.time .block04 .left .txtBox{ align-self: auto;}
	.time .block04 figure{ flex-basis: 29%; margin-top: 20px;}
	.time .block04 .titJpEn{ font-size: 16px;}
	.time .block04 .txtBox{ flex-basis: 67.2%; margin-bottom: 0; }
	.time .block04 .left .txt01{ font-size: 3.5vw ;line-height: 2.5; margin-bottom: -1em; letter-spacing: 0.05em;}
	.time .block04 .left .txt02{ font-size: 2.6vw; line-height: 3; margin-top: 3em;}
	.time .block04 .right{ flex-basis: 100%;}
	.time .block04 .right li{ flex-basis: calc((100% - 20px) / 2);}
}

/* #peace */
.peace .block-tit{margin-bottom: 120px;}

.peace .block01 .peaceCopyBox{ justify-content: center; align-items: flex-start; gap: 50px; margin-bottom: 70px;}
.peace .block01 .peaceCopyBox figure{ margin-top: -30px; max-width: 327px; aspect-ratio: 327 / 367;}
.peace .block01 .peaceCopyBox .txtBox{ justify-content: center; gap: 30px; text-align: left; margin-top: -1.5em;}
.peace .block01 .peaceCopyBox .txtBox .txt25{ margin-bottom: 0.8em;}
.peace .block01 .peaceCopyBox .txtBox .txt{ font-size: 15px;}
.peace .block01 .areaIllust figure{ position: relative; margin: 0 auto; max-width: 1034px; aspect-ratio: 517 / 460;}
.peace .block01 .areaIllust figcaption{ position: absolute; bottom: 21px; right: 11%; z-index: 2;}
.peace .block02 li .inner{ margin: 0 auto; flex-direction: column; justify-content: unset;}
.peace .block02 li .inner img{ margin: 0 auto;}
.peace .block02 li .inner > .flexBox{ margin-top: auto; align-items: flex-end;}
.peace .block02 li .inner .photo .caption{ margin-top: 1em; text-align: center;}
.peace .block02 li .inner .titJpEn{ margin: 1.5em 0 1em;}
.peace .block02 li .inner .txt{ text-align: left; font-size: 15px;  margin:0 auto 1em;}
.peace .block02 li .inner figure{ width: 100%; text-align: center; overflow: inherit;}
.peace .block02 li .inner figcaption{ width: 100%; text-align: right;  bottom: -20px;}

.peace .block02 li .illustBox{ min-height: 371px; margin-bottom: 30px; padding-bottom: 20px;}
.peace .block02 .slide01 .illustBox figure{ max-width: 257px; aspect-ratio: 257 / 341;}
.peace .block02 .slide02 .illustBox figure{ max-width: 266px; aspect-ratio: 19 / 27;}
.peace .block02 .slide03 .illustBox figure{ max-width: 212px; aspect-ratio: 212 / 311;}

@media screen and (max-width: 768px) {
    .peace .block-tit{margin-bottom: 60px;}
	.peace .block01{ padding-bottom: 0;}
	.peace .block01 .peaceCopyBox figure{ width: 53%;}
	.peace .block01 .peaceCopyBox .txtBox .txt{ font-size: 13px;}
	.peace .block01 .commonSpModalImage{ overflow: visible;}
	.peace .block01 .commonSpModalImage::before{ right: 0; left: 10px; top: -30px;}
	.peace .block02 .f-border .inner{ width: 74.5%; }
	.peace .block02 li .inner .titJpEn{ margin: 0.5em 0; font-size: 6.7vw;}
	.peace .block02 li .inner figure{ width: 60%; margin: 0 auto;}
	.peace .block02 li .inner .txt { font-size: 12px;}
	.peace .block01 .areaIllust figure{ width: 100vw; margin:calc(50% - 50vw);}
	.peace .block01 .areaIllust .inner{ width: 100vw; margin: calc(50% - 50vw); overflow-x: scroll;}
	.peace .block01 .areaIllust figure { width: 600px;}
	.peace .block01 .areaIllust figcaption{ bottom: 4px; right: 5%;}
	.peace .block01 .areaIllust + .caption{ margin-top: 20px;}
	.peace .block02 li .illustBox{ min-height: 57vw;}
}

/* #cr */
.cr .txtBox{ text-align: left;}
.cr .illustInner{ }
.cr .block01 .cgBox{ max-width: 1100px; margin: clamp( 60px , 15vw , 120px) auto 20px auto; align-items: center;}
.cr .block01 .block-tit{ margin-bottom: 90px;}
.cr .block01 .cgBox figure{ flex-basis: 60%;}
.cr .block01 .cgBox .capIn{ right: auto; left: 10%;}
.cr .block01 .txtBox .txt{ margin-top: 50px; font-size: 15px;}
.cr .equipment { position: relative; margin-bottom: 150px;}

/*
.cr .block01 .equipment::before{ position: absolute; display: block; content: ""; background: url(../imgs/cr_slide_illust.jpg) no-repeat; background-size: contain; width: 226px; height: 238px; right: 8%; bottom: 100px; z-index: 2;}
.cr .block01 .equipment::after{ content: "image illust"; display: block; position: absolute; right: 8%; bottom: 80px; z-index: 2;}
*/

.cr .block01 .equipment .bgWhite{ position: relative; min-height: 500px; align-items: center;}
.cr .block01 .equipment .bgWhite > p{ position: absolute; bottom: 10px; right: 10px;}
.cr .block01 .equipment .equipItem{ position: relative; justify-content: left; align-items: flex-start; width: 100%; gap: 35px; padding: 80px 10%;}
.cr .block01 .equipment .equipItem .photo__capIn{right: auto; left: 10px;}
.cr .block01 .equipment .equipItem .txtBox{ position: relative; text-align: left;}
.cr .block01 .equipment .equipItem .exEn{ font-size: 20px;}
.cr .block01 .equipment .equipItem .exEn+p{ font-size: 18px; margin: 0.5em 0 1.2em; letter-spacing: 0.08em;}

.cr .block01 .equipment .slide .equipItem .illus{position: absolute; z-index: 1; }
.cr .block01 .equipment .slide:nth-of-type(1) .equipItem .illus{ max-height: 302px; width: 278px; bottom: 30px; right: 55px; aspect-ratio: 139 / 151;}
.cr .block01 .equipment .slide:nth-of-type(2) .equipItem .illus{ width: 265px; max-height: 306px; bottom: -10px; right: 92px; aspect-ratio: 265 / 306;}
.cr .block01 .equipment .slide:nth-of-type(3) .equipItem .illus{ width: 343px; max-height: 268px; bottom: 30px; right: 30px; aspect-ratio: 343 / 268;}
.cr .block01 .equipment .equipItem .illus p{text-align: right;}
.cr .block01 .equipment .img{position: relative;}
.cr .block01 .equipment .logoBox{ align-items: center; padding: 2% 5% 0; position: absolute; top: 100%; left: 0; width: 100%; gap: 20px;}

.cr .block01 .caption{ text-align: left; margin-top: 10px;}
.cr .block01 .equipment .slide-dots { position: absolute; left: 50%;  transform: translateX(-50%); bottom: -50px;}

@media screen and (max-width: 768px) {
	.cr .block01{ padding-bottom: 0;}
	.cr .block01 > .photo{ width: 100vw; margin:calc(50% - 50vw);}
	.cr .block01 .caption{ text-align: right; margin-top: 30px;}
	.cr .illustInner{ width: 100vw; margin: calc(50% - 50vw); overflow-x: scroll;}
	.cr .illustInner figure{ width: 600px; height: 400px;}
	.cr .block01 .cgBox{ margin-bottom: 50px;}
	.cr .block01 .cgBox figure{flex-basis: 100vw; width: 100vw; margin: 50px calc(50% - 50vw) 0;  overflow: visible;}
	.cr .block01 .cgBox .commonSpModalImage::before{ top: -30px;}
	.cr .block01 .txtBox{ margin: 0 auto;}
	.cr .block01 .txtBox .txt{ font-size: 13px; margin-top: 30px;}
	.cr .block01 .illustInner{ padding-bottom: 50px;}
	.cr .block01 .equipment{ margin-bottom: 30px;}
	.cr .block01 .equipment .security .txtBox{  margin-top: -3em;}
	.cr .block01 .equipment .caption{ width: 100%; margin: 10px auto 10px;}
	.cr .block01 .equipment::before{ width: 29.4vw; height: 30vw; bottom: auto; top: 111vw;}
	.cr .block01 .equipment::after{ bottom: auto; top: 142.5vw;}
	.cr .block01 .equipment .equipItem{ padding: 20px 20px 30px; display: block;}
	.cr .block01 .equipment .logoBox{ flex-wrap: nowrap; }
	.cr .block01 .equipment .slide:nth-of-type(1) .photo{ height: 48vw;}
	.cr .block01 .equipment .slide:nth-of-type(1) img{ object-fit: cover;}
	.cr .block01 .equipment .equipItem .exEn{ font-size: 16px;}
	.cr .block01 .equipment .equipItem .exEn + p{ font-size: 3.5vw; margin: 0.2em 0 0.5em;}
    .cr .block01 .equipment .equipItem .txtBox{ position: relative; margin: 15px 0 0 10px; z-index: 2;}
    .cr .block01 .equipment .equipItem .txtBox .lh3{ font-size: 2.7vw;}

	.cr .block01 .equipment .bgWhite { padding-bottom: 50px;}
	.cr .block01 .equipment .bgWhite > p{ bottom: 50px; font-size: 8px;}
	.cr .block01 .equipment .slide .equipItem .illus{position: relative; margin: 0 auto; }
	.cr .block01 .equipment .slide:nth-of-type(1) .equipItem .illus{ width: auto; max-height: 192px; right: auto; bottom: -10px;}
	.cr .block01 .equipment .slide:nth-of-type(2) .equipItem .illus{ z-index: 1; width: auto; max-height: 192px; bottom: -10px; right: 10px;}
	.cr .block01 .equipment .slide:nth-of-type(3) .equipItem .illus{ width: auto; max-height: 192px; right: auto; bottom: -10px;}
	.cr .block01 .equipment .slide .illus.crossfade-loop .crossfade-item{ height: 100%; width: auto;}
	.cr .block01 .equipment .equipItem.slide-03 .txtBox{margin-top: 10px;}
    .cr .block01 .equipment .logoBox{position: static; padding: 2% 5% 0; gap:40px;}

	.cr .block01 .equipment .slide-dots{ bottom: 85px;}
}

/* #plan */
.plan .pointList{ margin-top: clamp( 50px , 14.3vw , 110px);}
.plan .pointList li{ flex-basis: calc((100% - 50px) / 6);}
.plan .mapBox{ max-width: 1060px; align-content: flex-end; margin: 60px auto 0; gap: 6.6%;}
.plan .mapBox .map{ flex-basis: 46.5%;}
.plan .mapBox .planDetail{ flex-basis: 46.5%; align-self: flex-end; margin-bottom: 30px;}
.plan .mapBox .planDetail .typeHead{ padding: 0;}
.plan .mapBox .planDetail .typeHead .row01,
.plan .mapBox .planDetail .typeHead .row02 ul{ justify-content: left; padding-left: 1em;}

.plan .mapBox .planDetail .typeHead .row01 .name{ color: var(--color-primary);}
.plan .mapBox .planDetail .typeHead .row01 .ldk span{ font-size: clamp( 28px , 5.7vw ,  44px); }
.plan .mapBox .planDetail .typeHead .row01 .name span{ font-size: clamp( 28px , 5.7vw ,  44px);}
.plan .mapBox .planDetail .typeHead .txt{ font-family: var(--font-family-display); color: var(--color-primary);}
.plan .mapBox .storageBox{ padding: clamp( 20px , 6.5vw , 50px) 0;}
.plan .mapBox .storageBox .inner{ max-width: 380px;  margin: 0 auto;}
.plan .mapBox .storageBox .txtBox{ margin: 20px 0 10px; text-align: left;}
.plan .mapBox .storageBox .txtBox .copy{ margin-bottom: 0.8em; font-size: 16px;}
.plan .mapBox .storageBox .txtBox .txt{ font-size: 12px;}
.plan .mapBox .storageBox .storageImg img{ max-height: 345px; width: auto;}
.plan .mapBox .storageBox .storageImg .crossfade-item{ width: 100%; height: 100%; max-height: none; object-fit: cover;}
.plan .mapBox .storageBox img{ margin: 0 auto;}
.plan .mapBox .storageBox .left{ flex-basis: 57%; line-height: 1.8;}
.plan .mapBox .storageBox .right{ flex-basis: 42%;}
.plan .mapBox .storageBox .right img{ margin-top: 10px; height: auto;}
.plan .mapBox .storageBox .right .caption{ position: absolute; right: 0; bottom: 0;}

.plan .mapBox .storageBox .equipment .prev-arrow { left: -75px;}
.plan .mapBox .storageBox .equipment .next-arrow { right: -75px;}

.plan .mapBox .storageBox .slide:nth-of-type(1) .crossfade-loop.loop03{ max-width: 403px; aspect-ratio: 403 / 366;}
.plan .mapBox .storageBox .slide:nth-of-type(2) .crossfade-loop{ max-width: 265px; max-height: 392px; aspect-ratio: 265 / 396; margin: 0 auto;}

.plan .mapBox .storageBox .slide.loop04 .crossfade-loop{ max-width: 167px; aspect-ratio: 167 / 147; margin: 0 auto;}

@media screen and (max-width: 768px) {
	.plan .pointList{ width: 100%;}
	.plan .pointList li{ flex-basis: calc((100% - 20px) / 2);}
	.plan .block01 .txt26{ font-size: 16px;}
	.plan .mapBox{ position: relative;}
	.plan .mapBox .typeHead{ flex-basis: 100%; width: 100%; position: absolute; top: 0;}
	.plan .mapBox .planDetail .typeHead .row01,
	.plan .mapBox .planDetail .typeHead .row02 ul{ justify-content: center; padding-left: 1em;}
	.plan .mapBox .map{ margin: 37vw auto 40px; flex-basis: 90%;}
	.plan .mapBox .planDetail{ width: 100%; flex-basis: 100%; align-self: flex-end;}
	.plan .mapBox .storageBox .inner{ padding: 0 15px;}
	.plan .mapBox .storageBox .txtBox{ margin: 20px auto 0; display: inline-block;}
	.plan .mapBox .storageBox .slide:nth-of-type(1) .txtBox{ width: 98%;}
	.plan .mapBox .storageBox .txtBox .copy{ font-size: 3.4vw;}
	.plan .mapBox .storageBox .txtBox .txt{ font-size: 2.5vw;}
	.plan .mapBox .storageBox .storageImg img{ max-height: 73.6vw; }
	.plan .mapBox .storageBox .inner figure{ margin: 0 auto;}

	.plan .mapBox .storageBox .equipment .prev-arrow { left: -25px;}
	.plan .mapBox .storageBox .equipment .next-arrow { right: -25px;}

	
	.plan .mapBox .storageBox .slide .crossfade-loop.loop03{ height: 68vw;}

	.plan .mapBox .storageBox .slide:nth-of-type(1) .crossfade-loop.loop03{ width: 74vw;}
	.plan .mapBox .storageBox .slide:nth-of-type(2) .crossfade-loop{ width: 45vw;}
}

/* #planList */
.planList{ position: relative; z-index: 0; clip-path: inset(0);}
.planList::before{ content: ''; position: fixed;  top: 0; left: 0; width: 100%; height: 100%; background: var(--color-bg-gray) url(../imgs/plan_bg.png) no-repeat; background-position: center;}
.planList .itemList{ row-gap: 25px; margin-top: clamp( 50px , 9vw ,70px);}
.planList .itemList .planItem{ flex-basis: calc((100% - 75px) / 4); box-shadow: 12px 12px 18px 0px rgba(0, 0, 0, 0.25);}
.planList .itemList .planItem .txt{ padding: 1em 1em 0; background: rgba(216, 112, 127, 0.8); color: var(--color-bg-white); }
.planList .itemList .planItem .bgWhite{ background: rgba(255, 255, 255, 0.6);}
.planList .itemList .planItem .name{ margin: 0 auto;}
.planList .itemList .planItem .tit33{ letter-spacing: var(--letter-spacing-narrow);}
.planList .itemList .planItem figure{ max-width: 120px; padding-bottom: 40px; margin: 0 auto;}

.planList .itemList .planItem:hover{ transform: translateY(4px); opacity: 1; box-shadow: none; transition: transform 0.2s , opacity 0.2s; }
.planList .itemList .planItem:hover .bgWhite{ background: rgba(255, 255, 255, 1);}

@media screen and (max-width: 768px) {
	.planList{ position: relative; z-index: 0; background: none; }
	.planList::before {   background-position: -41px 131px; background-size: 128%; mix-blend-mode: multiply; z-index: -1; 
	}
	.planList .itemList .planItem{ flex-basis: calc((100% - 15px) / 2);}
}

/* value banner*/
.value { max-width: 1178px; width: calc(100% - 30px); margin: 120px auto 200px; position: relative; z-index: 80;}
.value a:hover { opacity: 0.8;}
.bnrValue { max-width: 1180px; background-color: #d7344c; display: flex; justify-content: space-between; position: relative; margin: auto; align-items: center; transition: 0.5s ease;}
.bnrValue .colL { width: 48.982%; transition: 0.5s ease; overflow: hidden}
.bnrValue .colL .bnrValue__tit { position: absolute; top: 50%; left: 50%; width: 99%; transform: translate(-50%, -50%); text-align: center; color: white; z-index: 1;}
.bnrValue .colL .photo::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); transition: 1s all;}
.bnrValue .colL .photo img { transition: 1s all;}
.bnrValue .colL .txt01 { font-size: 25px; }
.bnrValue .colL .txt02 { font-size: 35px; transition: 1.5s ease; line-height: 1.7;}
.bnrValue .colL .txt02 .jp { font-family: 'Libre Caslon Display', serif;}
.bnrValue .colL .txt02 .en { font-family: 'Cormorant Garamond', serif;}
.bnrValue .colL .txt03 { font-size: 13px; font-weight: 500; margin: 8px 0 20px;font-family: 'Cinzel', serif;  font-weight: 600;}
.bnrValue .colL .txt03 span { display: inline-block; }
.bnrValue .colL .txt03 span::first-letter { font-size: 1.2em; }
.bnrValue:hover .colL .photo img { transform: scale(1.1, 1.1); transition: 1s all;}
.bnrValue .colR { width: 51%; text-align: center; color: white; line-height: 1; padding: 20px 30px 0;}
.bnrValue .colR .txt04 { font-size: clamp(20px, 3.6vw, 28px); line-height: 1.5; margin-bottom: 20px;}
.bnrValue .colR .btnMore { max-width: 90px; margin: 30px auto 0; -webkit-animation: blink 1.5s ease-in-out infinite alternate; -moz-animation: blink 1.5s ease-in-out infinite alternate; animation: blink 1.5s ease-in-out infinite alternate;}
.bnrValue .colR .btnMore img { width: 100%;}
.bnrValue .innerLine { position: absolute; border-top: 1px solid #eeeeee; border-left: 1px solid #eeeeee; border-right: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; top: 10px; left: 10px; right: 10px; bottom: 10px; z-index: 10; transition: 0.5s ease;}

@media screen and (max-width: 768px) {
	.value { margin: 60px auto 100px;}
    .value a { box-shadow: none;}
    .bnrValue { flex-wrap: wrap}
    .bnrValue .colL { width: 100%; margin-bottom: 20px;}
    .bnrValue .colR { width: 100%; padding-bottom: 20px;}
	.bnrValue .colL .txt01 { font-size: 4vw;}
    .bnrValue .colL .txt02 { font-size: 6vw;}
    .bnrValue .colL .txt03 { font-size: 12px; margin: 8px 0 0;}
    .bnrValue .colR .btnMore { position: absolute; top: 41%; right: 7px; z-index: 12; width: 65px;}
}