@charset "UTF-8";


/* --------------------
 Hero
-------------------- */
.hero {
  height: var(--hero-h);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #111;
/*background-image:url('../img/hero_02.jpg');
background-position: left 20% top;
background-size: cover;
background-repeat: no-repeat;*/
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0px 2px 50px 2px rgba(1,1,1,0.5);
  position: relative;
  z-index: 3;
  
}
.hero .logo { 
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	width: 72px; height: 155px; z-index: 2;
 -webkit-transition:all 666ms cubic-bezier(.666,0,.333,1); -moz-transition:all 666ms cubic-bezier(.666,0,.333,1); transition:all 666ms cubic-bezier(.666,0,.333,1); 
}
.hero .logo img{ width: 100%; height: 100%; }
@media(min-width: 768px) {
.hero {
	background-position: center;
	}
.hero .logo {
width: 104px;
    height: 220px;
	}
}
.hero video {
  height: 100dvh;
  width: 100%;
  object-fit: cover;
  transition:1.0s;
}
/* hero- scroll*/
.arrow-container{
    width: 80px;
    height: 80px;
    margin: 0 auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
}
.arrow-container a{
  width: 100%;
  height: 100%;
  display: block;
}
.arrow-1{
  width: 40px;
  height: 40px;
  background: rgba(130, 40, 0, 0.4);
  opacity: 0.6;
  border-radius: 50%;
  position: absolute;
  top: 15px;
  left: 15px;
}

.arrow-2{
  width: 24px;
  height: 24px;
  border: 1px solid  rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 21;
  display: table;
}

.arrow-2:after{
    position: absolute;
    top: 50%;
    left: 50%;
    content: "";
    width: 6px;
    height: 6px;
    margin: -4px 0 0 -3px;
    border-left: 1px solid rgba(255, 255, 255, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    box-sizing: border-box;
}
.arrow-container.scroll-m{
    width: 70px;
    height: 20px;
    margin: 0 auto;
    position: absolute;
    text-align: center;
    z-index: 20;
    bottom: 20px;
}
.arrow-container.scroll-m span{
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px;
}
    
@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.2, .2, .2);
            transform: scale3d(.2, .2, .2);
  }
  50% {
    opacity: 0.7;
  } 
  100% {
    opacity: 0;
		filter:blur(5px);
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.2, .2, .2);
            transform: scale3d(.2, .2, .2);
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
	filter:blur(5px);
  }
}
.zoomIn {
  -webkit-animation-name: zoomIn;
          animation-name: zoomIn;
}   
.animated {
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.animated.hinge {
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;  
}

@media (hover: hover) {
	.arrow-container a .arrow-1{ transition: .6s;}	
	.arrow-container a:hover .arrow-1{
		transform: 0; 
		background:rgba(200, 50, 0, 0.6);
	}	
	.arrow-container a:hover .arrow-2{
	  border: 1px solid #fff;
		}
	.arrow-container a:hover .arrow-2:after{
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;	
	}
}


/* --------------------
 Peek
-------------------- */
.peek-bg {
  position: fixed;
  inset: 0;
  background-image: url('../img/bg.jpg');
  background-size: cover;
  background-position: top right 30%;
  z-index: 0;
  opacity: 1;
  transition: 1.5s;
}
body.is-attached .peek-bg {
  opacity: 0.1;
}

.peek-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.4) 15%,
    rgba(0,0,0,0.4) 85%,
    rgba(0,0,0,0.9) 100%
  );
}
.peek-space {
  height: 100dvh;
  transition: height 1.5s cubic-bezier(.16,.84,.44,1);
}

body.is-attached .peek-space {
  height: 0;
}

@media(min-width: 768px) {
.peek-bg {
  background-position: center;
  }
}

/* =========================================================
   Grid Layout
========================================================= */
.panel-grid {
  display: grid;
  width: 100%;
  /*gap: 1px;*/
  margin: 0 auto;
  grid-template-columns: 1fr; /* SP default */
/*background: rgb(0, 0, 0, 0.2);
  box-shadow: 0px -3px 5px -4px #000000;*/
  margin-top: -100dvh;  
  position: relative;
  z-index: 10;
  padding-right: 50px;
transform: translateY(100dvh);
transition: transform 2.1s cubic-bezier(.16,.84,.44,1),
    box-shadow 0.4s ease;
transition-duration: 2.1s;
}

.panel-grid.is-show {
  transform: translateY(0px);
}


@media(min-width: 768px) {
  .panel-grid { 
  grid-template-columns: 1fr 1fr; 
  padding-right: 90px;
  }
}



/* =========================================================
   Panel base
========================================================= */
.panel {
  display: block;
  text-decoration: none;
  color: inherit;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
  opacity: 1;
  transition: 0.5s;
  will-change: transform, opacity;
  /*background: rgba(1, 1, 1, 0.7);*/
}
.panel:hover{opacity: 0.8; }
.panel-inner {
  display: flex;
  width: 100%;
  height: 100%;
}
.panel.reverse .panel-inner {
  flex-direction: row-reverse;
}

.panel-a, .panel-b {
  flex: 1;
  position: relative;
  overflow: hidden;
}
/*
@media (min-width: 768px) and (max-width: 1099px){
.panel {
  aspect-ratio: 4 / 3;
}
}*/

@media (min-width: 960px) {
.panel {
  aspect-ratio: 2 / 1;
}
}
/* =========================================================
   Shared transitions
========================================================= */
.panel .panel-a-bg,
.panel .panel-b img,
.panel .panel-b div,
.panel .panel-a-texts,
.panel .ttl-kanji,
.panel .ttl-jp,
.panel .ttl-en{
  transition: opacity 1.2s ease, transform 1.7s ease;
  will-change: transform, opacity;
}


/* =========================================================
   A background
========================================================= */
.panel-a-bg {
  position: absolute;
  inset: 0;
  background: #4e0202;
  opacity: 0;
}
.panel:nth-child(1) .panel-a-bg{background:#362006;}
.panel:nth-child(2) .panel-a-bg{background:#671b01;}
/*
.panel:nth-child(3) .panel-a-bg{background:#7b4917;}
*/
.panel:nth-child(3) .panel-a-bg{background:#1d0603;}
.panel:nth-child(4) .panel-a-bg{background:#734416;}
.panel:nth-child(5) .panel-a-bg{background:#562710;}
.panel:nth-child(6) .panel-a-bg{background:#4e0202;}

/* =========================================================
   A texts（親パネル）
========================================================= */
.panel-a-texts {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 2rem;
  opacity: 1;
  transform: none;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
}


/* =========================================================
   A texts 内の子（T 要素：kanji / jp / en）
========================================================= */
.panel-a-texts > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.panel-a-texts > *.active {
  opacity: 1;
  transform: translateY(0);
}

.ttl-kanji{font-size: 40px; font-weight: 300; line-height: 40px; margin-bottom: 20px;}
.ttl-jp{font-size: 14px; font-weight: 500;}
.ttl-en{font-size: 14px; letter-spacing: 1.5px; color:rgba(255,255,255,0.5);font-weight: 500;}


/* =========================================================
   PLUS (+)
========================================================= */
.panel-a-plus {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 20px;
  height: 56px;
  transform: translateX(-50%);
}

.arrow-fixed {
  width: 100%;
  fill: rgba(255,255,255,0.5);
  opacity: 0;
   visibility: hidden;
  transform-origin: 50% 50%;
  transform:
    translateY(40px)
    rotateY(1440deg)
    scale(.4);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

/* 発火 */
.panel.active .arrow-fixed,
.panel-grid.is-visible .arrow-fixed {
  opacity: 1;
  transform: translateY(0) rotateY(0deg) scale(1);
  visibility: visible;
}

/* hover / callme 中は固定矢印をフェードアウト 
.panel.is-hover .arrow-fixed,
.arrow-lane.call ~ .arrow-fixed {
  opacity: 0;
  transform: translateY(8px) scale(.9);
}*/
.panel.active.is-hover .arrow-fixed,
.panel:has(.arrow-lane.call) .arrow-fixed {
  opacity: 0;
  transform: translateY(8px) scale(.9);
}


.panel-grid:not(.is-visible) .arrow-lane {
  opacity: 0 !important;
}

.panel.active .arrow-fixed {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) rotateY(0deg) scale(1);
  transition:
    opacity 1.2s ease,
    transform 1.2s cubic-bezier(.16,1,.3,1);
}


/*for hover callme*/
.arrow-lane {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 36px; 
  pointer-events: none;
  opacity: 0;
}

.arrow-flow {
  position: absolute;
  left: 0;
  width: 100%;
  fill: rgba(255,255,255,0.4);
  transform: translateY(-10px);
  animation: arrowFlow 1.6s ease-in-out infinite;
}

.arrow-flow:nth-child(1) { animation-delay: 0s; }
.arrow-flow:nth-child(2) { animation-delay: .28s; }
.arrow-flow:nth-child(3) { animation-delay: .56s; }


@keyframes arrowFlow {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    opacity: .6;
  }
  100% {
    transform: translateY(28px);
    opacity: 0;
  }
}


.panel.is-hover .arrow-lane,
.arrow-lane.call {
  opacity: 1;
}

.panel-grid:not(.is-visible) .arrow-lane {
  opacity: 0 !important;
}



@media (min-width: 768px) {
  .panel.active .ttl-kanji,
  .panel.active .ttl-jp,
  .panel.active .ttl-en,  .panel.active .panel-a-plus .plus {
    opacity: 1;
    transform: translateY(0);
  }
.panel:not(.active) .arrow-fixed {
  opacity: 0;
  visibility: hidden;
  transform: translateY(56px) rotateY(1440deg) scale(.4);
}

}

@media (max-width: 767px) {
	.panel-a-plus {
	width: 15px;
	bottom: -9px;
	}
}

/* =========================================================
   B image
========================================================= */

.panel-b img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transform-origin: center center;
}

.panel-b-gradient {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  pointer-events: none;
  background: linear-gradient( to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,0.65) 100% );
}

.panel:nth-child(1) .panel-b-gradient{background: linear-gradient( to bottom, rgba(0,0,0,0) 30%, #2b180e 100% ); mix-blend-mode: darken;}
.panel:nth-child(2) .panel-b-gradient{background: linear-gradient( to bottom, rgba(0,0,0,0) 30%, #380000 100% );mix-blend-mode: darken;}
.panel:nth-child(3) .panel-b-gradient{background: linear-gradient( to bottom, rgba(0,0,0,0) 30%, #4e2e0d 100% );mix-blend-mode: darken;}
.panel:nth-child(4) .panel-b-gradient{background: linear-gradient( to bottom, rgba(0,0,0,0) 30%, #732e01 100% );mix-blend-mode: darken;}
.panel:nth-child(5) .panel-b-gradient{background: linear-gradient( to bottom, rgba(0,0,0,0) 30%, #1d0603 100% );mix-blend-mode: darken;}
.panel:nth-child(6) .panel-b-gradient{background: linear-gradient( to bottom, rgba(0,0,0,0) 30%, rgba(65,5,0,0.5) 100% );mix-blend-mode: darken;}


/* =========================================================
   Z-index
========================================================= */
.panel-a { z-index: 1; }
.panel-b { z-index: 2; }
.panel-text { z-index: 3; }

/* =========================================================
   SP adjustments
========================================================= */

@media (max-width: 767px) {

.panel-a-texts { padding: 1rem; }
.ttl-kanji{font-size: 33px;line-height: 33px;margin-bottom: 10px; }
.ttl-jp{font-size: 12px; }
.ttl-en{font-size: 12px; }

  /* パネル全体の初期状態 */
  .panel {
    opacity: 0;
  transition: opacity 1.6s ease, transform 1.6s ease;
  }

  /* グリッドが見えたらパネル出現 */
  .panel-grid.is-visible .panel {
    animation: panelFadeUp 0.9s cubic-bezier(.22,.61,.36,1) forwards;
  }

  .panel-grid.is-visible .panel:nth-child(1) { animation-delay: 0.0s }
  .panel-grid.is-visible .panel:nth-child(2) { animation-delay: 0.5s }
  .panel-grid.is-visible .panel:nth-child(3) { animation-delay: 1.0s }
  .panel-grid.is-visible .panel:nth-child(4) { animation-delay: 1.5s }
  .panel-grid.is-visible .panel:nth-child(5) { animation-delay: 2.0s }
  .panel-grid.is-visible .panel:nth-child(6) { animation-delay: 2.5s }


.panel-grid.is-visible .panel .panel-a-bg,
.panel-grid.is-visible .panel .panel-b img,
.panel-grid.is-visible .panel .panel-b div {
  opacity: 1;
}
.panel-grid.is-visible .plus {
opacity: 1;
transform: translateY(0) scale(1);
}

  .panel-a-texts > * {
    opacity: 0;
    transform: translateY(40px);
    transition:
      opacity 1.2s ease,
      transform 1.2s ease;
  }

	/* あとから出す */
	.panel.is-text-visible .panel-a-texts > * {
	  opacity: 1;
	  transform: translateY(0);
	  transition-delay: calc(var(--i) * 1.2s);
	}

	.panel.is-text-visible .panel-a-texts > *:nth-child(1) {
	  transition-delay: 0.3s;
	}
	.panel.is-text-visible .panel-a-texts > *:nth-child(2) {
	  transition-delay: 0.6s;
	}
	.panel.is-text-visible .panel-a-texts > *:nth-child(3) {
	  transition-delay: 0.9s;
	}

}

@keyframes panelFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================================================
  アニメーションclip-path
========================================================= */
@media (min-width: 768px) {
.panel-a-bg,
.panel-b img,
.panel-b-gradient {
  clip-path: inset(5% 2% 5% 2%);
  filter: blur(1px);
  opacity: 0;
  will-change: clip-path, transform, filter, opacity;
}

.panel-a-bg[style*="opacity: 1"],
.panel-b img[style*="opacity: 1"],
.panel-b-gradient[style*="opacity: 1"] {
  clip-path: inset(0% 0% 0% 0%);
  filter: blur(0px);
  opacity: 1;
  transition:
    clip-path 2.4s cubic-bezier(.16,1,.3,1),
    transform 2.6s cubic-bezier(.16,1,.3,1),
    filter .8s ease-out,
    opacity 1.3s ease;
}
}


/* =========================================================
  テキストfadeup
========================================================= */
.reveal-text {
  display: block;
  opacity: 0;
  will-change: opacity, transform, filter, clip-path;
}
/* IntersectionObserverで付与される */
.reveal-text.is-visible {
  opacity: 1;
}
.reveal-text.fade {
  transform: translateY(16px);
  transition: 
    opacity 2.9s ease,
    transform 3s cubic-bezier(.16,1,.3,1);
}

.reveal-text.fade.is-visible {
  transform: translateY(0);
}
.reveal-text.blur {
  filter: blur(12px);
  transform: translateY(0.3em);
  transition:
    opacity 0.8s ease,
    filter 3.2s cubic-bezier(.16,1,.3,1),
    transform 1.1s cubic-bezier(.16,1,.3,1);
}
.reveal-text.blur.is-visible {
  filter: blur(0);
  transform: translateY(0);
}



/* =========================================================
  HOME about
========================================================= */

.about .story .sub-ttl {color: rgb(250,130,30,0.4); }
.about .btn-premium::after { background: rgb(250,130,30,0.2);}
.about .btn-premium .btn-icon { color: rgb(250,130,30,0.4); }


/* =========================================================
  HOME news
========================================================= */
.news .story .lead { color:rgb(155,65,40,0.9); font-size: 1.2rem;}
.news .list-wrap{text-align:left; width:100%;}
.news .list-wrap a{ padding: 2rem 0; display: block;  position:relative; position: relative;}
.news .list-wrap a::before {
    position: absolute;
    content: "read more";
    transform: rotate(0deg);
    right: 20px;
    top: 82%;
    width: 100%;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.6rem;
    text-align: right;
    text-transform: uppercase;
	transition: transform 2.0s cubic-bezier(.16,1,.3,1);
}
.arrow-line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.3);
  transform-origin: left center;
  transition: transform 2.0s cubic-bezier(.16,1,.3,1);
}
.list-wrap a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 1px;
  background: rgba(255,255,255,0.3);
  transform: rotate(45deg);
  transform-origin: right center;
  transition: transform 2.0s cubic-bezier(.16,1,.3,1);
}
.list-wrap a:hover .arrow-line {
  transform: scaleX(1.1);
}

.list-wrap a:hover::after {
  transform: translateX(52px) rotate(45deg);
}

.list-wrap a:hover::before {
  transform: translateX(35px);
}
.list-wrap .time{ margin-bottom: 20px; line-height: 1; letter-spacing: 1px;}
.list-wrap h4{ font-weight:400;font-size: 0.9rem;}
.news .btn-premium::after { background: rgb(155,65,40,0.5);}
.news .btn-premium .btn-icon { color: rgb(155,65,40,0.9); }

@media (min-width: 768px) {
.list-wrap a::before { font-size: 0.8rem;}
}

	
	
/* =========================================================
  HOME space
========================================================= */
.space .story {
    top:0;
}
.space .story .image-wrap {
/*    height: 80vh;*/
    height: 40vh;
}
.marquee {
  overflow: hidden;
  height: 40vh;
}
.track {
	display: flex;
	width: max-content;
	animation: scroll 35s linear infinite;
	height: 100%;
	 --w: calc(100% / 3);
	 position: relative;
}
.track::after
 {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(1, 1, 1, 0.2);
}
.row1 {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.row2 {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.row2 .track {
  animation-direction: reverse;
}

.track img {
  height: 100%;
  width: auto !important;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  flex-shrink: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.3);

}
@media (max-width: 767px) {
.space .story .image-wrap { height: 35vh;}
.space .story .story-inner{padding:50px 10% 0; }
.marquee {height: 35vh;}
.track {animation: scroll 30s linear infinite;}
.track img {aspect-ratio: 1 / 1;}
}

/* 無限ループ*/
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(var(--w) * -1));
  }
}


/* =========================================================
  HOME menu
========================================================= */
.menu .btn-premium::after { background: rgb(250,130,30,0.4);}
.menu .btn-premium .btn-icon { color: rgb(250,130,30,0.5); }
@media (min-width: 768px) {	
	.menu .btn-premium{backdrop-filter: blur(20px);}
	}
	
/*@media (max-width: 767px) {
	.menu .story { top:0;}
}*/

/* =========================================================
  HOME scene
========================================================= */
.scene .story .sub-ttl{ color: rgb(200,80,0,0.5);}
.scene .btn-premium::after { background: rgb(200,80,0,0.2);}
.scene .btn-premium .btn-icon { color: rgb(200,80,0,0.5); }
@media (min-width: 768px) {	
	.scene .btn-premium{backdrop-filter: blur(20px);}
	}
/*@media (max-width: 767px) {
	.scene .story { top:0;}
}*/



/* =========================================================
  HOME INFOMATION
========================================================= */

.info.content-box { backdrop-filter:blur(1px);}
.info .ttl-heading {backdrop-filter: blur(1px);}
.info .link {display: inline-block; border-bottom: 1px rgba(255,255,255,0.3) dotted; margin-top:5px; color:#ccc; transition: .3s;}
.info .link:hover {color:rgba(255,255,255,0.3);}

.info.content-box { backdrop-filter:blur(1px);}
.info .ttl-heading {backdrop-filter: blur(1px);}
.info .icon-blank { width: 10px; margin-left: 10px; fill: rgba(255,255,255,0.3);}

@media (min-width: 768px) {
.info.content-box {
    background: none;backdrop-filter:none;}
}

	
/* =========================================================
  下層ページ
========================================================= */
.contents-wrap.page-others { padding-right: 0;}

.page-others {
  position: relative;
  inset: 0;
  background-image: url('../img/bg.jpg');
  background-size: auto;
  background-position: top right 30%;
  z-index: 0;
  background-attachment: fixed;
}
.contents-wrap.page-others::after {
  content: "";
  position: absolute;
  inset: 0;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.9) 100%);
    background-attachment: fixed;
}
.page-others .ttl-heading{backdrop-filter: blur(3px);}
.page-others .space .story {
    top:0;
}
.page-others  .story .image-wrap {
  height: var(--hero-h);
}
.page-others .marquee {
  overflow: hidden;
  height: 100%;
}
.page-others .track {
	display: flex;
	width: max-content;
	animation: scroll 180s linear infinite;
	height: 100%;
	 --w: calc(100% / 3);
	position: relative;
}
.page-others .track::after
 {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(1, 1, 1, 0.5);
}

.page-others .track img {
  height: 100%;
  width: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  flex-shrink: 0;
margin-right: 1px;
}

.page-others .story .story-inner.onpic{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
padding:0; 
max-width: inherit;
width: 90%;
margin-top: 45px;
}

.vertical {
    display: flex;
    align-items: flex-start;
    flex-direction: row-reverse;
    gap: 5%;
	justify-content: center;
}
.page-others .story .onpic .sub-ttl {
	color: rgb(200, 170, 100, 1);
	margin-bottom: 25px;
	font-size: 15px;
}

.page-others .story .onpic .lead{
	display: inline-block;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;
	text-align: left;
	line-height: 3.3rem;
}	
.page-others .story .lead span{
	display: block;
}
.page-others .horizon{
	text-align: center;
	font-size: 0.9rem;
	line-height: 2.0;
}


@media (max-width: 767px) {
.page-others .story .story-inner.onpic{padding:70px 50px 0 0; }
.page-others .story .story-inner{margin-right: 50px;}
.page-others .story .onpic .lead{line-height: 2.3rem;font-size: 0.9rem;}
.page-others .horizon{font-size: 0.7rem;}
.page-others .track {animation: about-scroll 135s linear infinite;}
.page-others .track img {aspect-ratio: 1 / 1;}
.page-others .btn-area{margin: 0 50px 0 0;}
}

/* 無限ループ*/
@keyframes about-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(var(--w) * -1));
  }
}

/* =========================================================
  About.php
========================================================= */

@media (max-width: 767px) {
.page-others.page-about .story .story-inner.onpic{padding:90px 50px 0 0; }
}

/* =========================================================
  news.php
========================================================= */

.page-news {
  position: relative;
  inset: 0;
  background: url(../img/bg.jpg) no-repeat;
  background-size: 200%;
  background-position: top right ;
  z-index: 0;
}
.page-news::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.8);
}
.page-news .story .lead{margin-bottom:50px;}

.news-head{display: flex;
    align-items: center;
    justify-content: space-between;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
	padding: 1.5rem 0;
}
.news-item {
  scroll-margin-top: 200px;
  transition: transform .4s ease;
}
.news-item:hover .icon {
  background:rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.news-item.is-open .news-body {
  max-height: 2000px; /* 記事の最大高さより大きめに */
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s, 0.15s, 0.15s;
  display: block;
}

.news-item .icon {
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform .4s ease;
  display:inline-block;
}
.news-item .icon::before,
.news-item .icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: transform .4s ease, opacity .3s ease;
}


.news-item .icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
/* 開いてる時に - に見えるように */
.news-item.is-open .icon::after {
  opacity: 0; 
    transform: rotate(180deg);
}


	
.news-item .title {width: 85%;}
.news-item .day {margin-bottom: 10px;}
.news-item .sttl {font-weight: 400; font-size:1rem; text-align: left;}

.news-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition:
    max-height 0.9s cubic-bezier(.22,.61,.36,1),
    opacity 0.6s ease,
    transform 0.8s cubic-bezier(.22,.61,.36,1);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-size:0.8rem;
}
.news-body .news-inner{
  padding:1.5rem 0 ;
	margin-bottom: 10rem;
}
.news-body .news-inner p{
	font-size:0.9rem;
}
.news-btn{
    text-align: right;
}
.news-btn a{
position: relative;
    color: rgba(255, 255, 255, 0.5);
    padding: 0 0 8px 20px;
    font-size: 0.7rem;
}

.news-btn a::before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    transform-origin: left center;
    transition: transform 2.0s cubic-bezier(.16, 1, .3, 1);
    content: "";
}
.news-btn a::after {
content: "";
    position: absolute;
    left: -14px;
    bottom: 0;
    width: 14px;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(135deg);
    transform-origin: right center;
    transition: transform 2.0s cubic-bezier(.16, 1, .3, 1);
}


@media (max-width: 767px) {
.news-item .sttl {font-size: 0.8rem; }
.news-body .news-inner p {font-size: 0.8rem;}
}
@media (min-width: 768px) {
.news-btn a:hover::before{
  transform: translateX(-32px);}
.news-btn a:hover::after{
  transform: translateX(-32px)  rotate(135deg);}
  
}


/* =========================================================
  space.php
========================================================= */

.page-others .story .story-inner.onpic{margin-top: 0;padding-top: 70px;}
.photo-text-wrap {margin-bottom: 50px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); scroll-margin-top: 110px;}
.photo-text-wrap .story-text{width:100%;}
.photo-text-wrap .swiper-1 {width:100%; overflow: hidden; }
.swiper-1 .swiper-wrapper { height: auto !important;}
.swiper-1 img{width:100%;}
.swiper-1 .swiper-pagination {
    position: relative;
    text-align: center;
    width: 100%;
	z-index: 1;
    margin-top: 5px; font-size: 0.8rem; color: rgb(255, 255, 255, 0.5);
}
.photo-text-wrap.reverse .photo-title{text-align:left; margin-right:0;}
.photo-title{text-align:right; margin-right: 10px;}
.photo-title .sub-ttl {margin-bottom:0;}
.page-space .photo-title .lead { font-size: 1.5rem;font-weight: 200;margin-bottom: 10px;letter-spacing: 1px;}
.photo-title p { line-height: 2.3;}

@media(min-width: 768px) {
.page-space .story .story-inner{padding:60px 5% 0; max-width:1300px; margin-right: 90px; }
.photo-text-wrap{display:flex; flex-wrap:wrap; justify-content:space-between; padding-bottom:40px;}
.photo-text-wrap.reverse{flex-direction: row-reverse;}
.photo-text-wrap .story-text{width:45%;}
.photo-text-wrap .swiper-1 {width:49%; margin-top:110px;}
.photo-text-wrap .swiper-1 img{width:100%;}
.page-space .photo-title .lead { font-size: 2rem;margin-bottom: 15px;}
}


/* =========================================================
  menu.php
========================================================= */

.menu-btn .btn-premium {
        margin-bottom: 20px;
    }	
.menu-btn .btn-premium::after {
    background: rgb(250, 130, 30, 0.4);
	}
.menu-btn .btn-premium .btn-icon {
    color: rgb(250, 130, 30, 0.5);
	}
	
	
.fs07{ font-size: 9px;}
.story p.mes{ font-size:0.6rem; text-align: center;  color: rgba(255, 255, 255, 0.6); margin-bottom:25px;}
.accordion-wrap {width: 100%; margin:0 auto 70px; }	
.accordion-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    max-height 0.7s cubic-bezier(.16,1,.3,1),
    opacity 1s ease,
    transform 1s ease;
  transform-origin: top;
}
.accordion-body.is-open {
  max-height: 2000px;
  opacity: 1;
  transform: translateY(0);
}
.accordion { position: relative; margin: 0; padding: 27px 0 45px 0; cursor: pointer; border-bottom: 1px solid rgba(255, 255, 255, 0.3); color:#fff;}
.accordion .icon {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform .4s ease;
  display:inline-block;
    bottom: -30px;
    right: 0;
	transition: transform .4s ease;
}
.accordion-head .icon::before,
.accordion-head .icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: transform .4s ease, opacity .3s ease;
}
.accordion-head .icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.accordion-head.is-open .icon {
  transform: rotate(180deg);
}
.accordion-head.is-open .icon::after {
  opacity: 0; 
    transform: rotate(180deg);
}
.accordion dt {
    position: relative;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.accordion dt span { display: inline-block;}
.accordion dd {
    position: relative;
    height: auto;
/*    margin: 20px auto 40px;*/
    padding: 0;
    width: 100%;
    line-height: 3;
}
.accordion dd ul {
    text-align: left;
    width: 100%;
    margin: 20px auto 0;
}
.accordion dd ul li {
    border-bottom: 1px dotted rgb(255,255,255,0.2); padding:10px 0; list-style: inside; line-height: 2; font-size: 0.7rem;
}
.accordion dd ul li span{
    color: rgb(255,255,255,0.5);
    margin: 5px 0 0 18px;
    font-size: 0.8em;
}


@media screen and (min-width: 768px) {
.story p.fs09{ font-size:0.8rem;}
.story p.mes{ font-size:0.8rem; }
.mr-50{margin-right:50px;}
.accordion {padding: 25px 0;}
.accordion .icon {bottom: 0;}
.accordion dt { font-size: 1rem;}
.accordion dd ul li{font-size: 0.9rem;}
}