*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* MOVIE
------------------------------------------------ */

html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* ずっと hidden のまま */
}

/*body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}*/

.intro-finished {
  overflow: auto;   /* 動画終了後スクロールを許可 */
}

#intro-video-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: black;
}

#intro-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#main-content {
  opacity: 0;
  transition: opacity 1s ease;
  /*padding: 2em;*/
}

#skip-btn {
  position: absolute;
  bottom: 40px;
  right: 40px;
  padding: 5px 20px;
  border:1px solid #FFFFFF;
  color:#FFFFFF;
  background-color: rgba(0,0,0,0.3);
  border-radius: 6px;
  cursor: pointer;
  z-index: 10000;
  transition: background 0.3s;
}
#skip-btn:hover {
  background: rgba(255,255,255,0.5);
}

/* First
------------------------------------------------ */
@media screen and (max-width: 1200px) {
.sm1200 {
	display:none;
}
.intro-finished-b .sm1200 {
	display:block;
}
	.intro-finished-b .sm1200 .logo { 
    display: block !important;
    padding-top: 112px !important;
  }
    .intro-finished-b {
        margin-top: -56px !important;
    }
}

time {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 8px;
  color:#8C6900;
}

.message_w {
	position: relative;
	background: url(https://www.hotelgajoen-tokyo.com/wp/wp-content/themes/gj2017/timeline/top.jpg) fixed;
	background-position: center 20vh !important;
	background-repeat: no-repeat;
	background-size: 80vw !important; 
	height:750px;
}
.message {
	background-color:rgba(255, 255, 255, 0.86); 
	width: 45vw; 
	top: 40%; 
	left: 50%; 
        transform: translateY(-50%) translateX(-50%);
	position: absolute; 
	margin: 0 20px 0 0; 
	padding: 30px;
}
@media screen and (max-width: 1200px) {
.message_w {
	position: relative;
	background: url(https://www.hotelgajoen-tokyo.com/wp/wp-content/themes/gj2017/timeline/top.jpg);
	background-position: center 160px !important;
	background-repeat: no-repeat;
	background-size: 150vh !important; 
	height:700px;
}
.message {
	background-color:rgba(255, 255, 255, 0.86); 
	width: 80vw; 
	top: 50%;/*600px*/ 
	/*left: 10%;*/ 
	position: absolute; 
	margin: 0 20px 0 0; 
	padding: 20px;
}
}

.fadeInUp_tl {
  opacity: 0;
  transform: translateY(30px);
  transition: all 3s ease;
}
.fadeInUp_tl.active {
  opacity: 1;
  transform: translateY(0);
}



/* IMAGE
------------------------------------------------- */
    .mainimg_w {
      margin: -5vh 0;
      padding: 0;
      height: 100%;
      background: #FFF;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .mainimg {
      width: 95vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .mainimg img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }


/* TIMELINE
------------------------------------------------ */
.topborder_tl {
	position: relative;
	text-align: center;
}

.topborder_tl:before{
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	border-bottom: solid 1px #8C6900;
	transform: translateX(-50%);
	animation: topborder 2s linear forwards;
	animation-delay: 3s;
}

@keyframes topborder {
	0%{
		width: 0%;
		opacity:0;
	}
	100%{
		width: 100%;
	}
}

.timeline ul li {
  list-style-type: none;
  position: relative;
  width: 1px;
  margin: 0 auto;
  padding-top: 150px;
  background: #8C6900;
}

.timeline ul li::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 170px;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: inherit;
  z-index: 1;
}

.timeline-box {
  position: relative;
  bottom: 0;
  left: 90px;
  width: 500px;
  padding: 15px;
  background: white;
  opacity: 0;
  transform: translateX(0); /* 初期値は0 */
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.timeline ul li:nth-child(odd) .timeline-box.animate-line {
  transform: translateX(20px); /* ←左から */
}

.timeline ul li:nth-child(even) .timeline-box.animate-line {
  transform: translateX(-30px); /* →右から */
}

.timeline-box.animate-line {
  opacity: 1;
  transform: translateX(0);
}

.timeline-box::before {
  content: "";
  position: absolute;
  top: 30px;
  left: -100px;
  width: 0;
  height: 1px;
  width: 0;
  background: #8C6900;
  transition: none;
  z-index: -1;
}

.timeline ul li:nth-child(even) .timeline-box::before {
  left: auto;
  right: -100px;
}

.timeline ul li:nth-child(even) .timeline-box {
  left: -570px;
}

.timeline-box.animate-line::before {
  animation: border_anim 0.8s ease-out forwards;
}

@keyframes border_anim {
  0% {
    width: 0;
    opacity:0;
  }
  100% {
    width: 100px;
    opacity:1;
  }
}


/* EFFECTS
------------------------------------------------ */

.timeline ul li::after {
  /* transition: background 1s ease-in-out; */
}

.timeline ul li.in-view::after {
  /*background: #8C6900;
  width: 20px;
  height: 20px;*/
}

/* GENERAL MEDIA QUERIES
------------------------------------------------ */

@media screen and (min-width: 899px) {
  .timeline ul li:nth-child(even) .timeline-box h3, 
  .timeline ul li:nth-child(even) .timeline-box time{
    text-align:right;
  }
}

@media screen and (max-width: 900px) {
/*   .mainimg {
     width: 100vw;
     max-height: 100vh;
     aspect-ratio: 16 / 6;
     display: flex;
     justify-content: center;
     align-items: center;
   }*/

  .timeline ul li {
    margin-left: 20px;
    padding-top: 50px;
  }

.timeline ul li::after {
  top: 70px;
}

  .timeline-box {
    width: calc(100vw - 55px);
  }
  .timeline ul li:nth-child(odd) div, .timeline ul li:nth-child(even) .timeline-box {
    left: 0px;
  }
  .timeline ul li:nth-child(odd) .timeline-box::before, .timeline ul li:nth-child(even) .timeline-box::before {
  left: -50px;
  }

@keyframes border_anim {
  0% {
    width: 0;
    left:-20px;
    opacity:0;
  }
  100% {
    width: 25px;
    left:-20px;
    opacity:1;
  }
}

.timeline ul li:nth-child(even) .timeline-box.animate-line {
  transform: translateX(20px); /* →右から */
}
}


/* EXTRA/CLIP PATH STYLES
------------------------------------------------ */
.timeline-clippy ul li::after {
  width: 40px;
  height: 40px;
  border-radius: 0;
}

.timeline-rhombus ul li::after {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.timeline-rhombus ul li div::before {
  bottom: 12px;
}

.timeline-star ul li::after {
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

.timeline-heptagon ul li::after {
  clip-path: polygon(
    50% 0%,
    90% 20%,
    100% 60%,
    75% 100%,
    25% 100%,
    0% 60%,
    10% 20%
  );
}

.timeline-infinite ul li::after {
  animation: scaleAnimation 2s infinite;
}

@keyframes scaleAnimation {
  0% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.25);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}

/*------------------------------------------------
アコーディオン
---------------------------------------------------*/
#read-more-0 label{ /* label上のカーソルをリンク時と同じタイプにする*/
  cursor: pointer;
  color:#A0082C;
}
#read-more-0 input{ /* inputは非表示 */
  display: none;
}
#read-more-0 input ~ span.more-open {/* 無くても機能する */
  display: inline;
}
#read-more-0 input ~ span.more-contents {
  display: none; 
}
#read-more-0 input ~ span.more-close {
  display: none;
}
#read-more-0 input:checked ~ span.more-open{ /*チェックされたinputの弟で、クラス名がmore-openのspanに適用*/
  display: none; 
}
#read-more-0 input:checked ~ span.more-contents{
  display: inline;
}
#read-more-0 input:checked ~ span.more-close{ /* 無くても機能する */
  display: inline;
}

span.more-contents {
  animation: more-contentsAni 1s;
}
@keyframes more-contentsAni {
  0% {
     opacity: 0;
  }
  100% {
     opacity: 1;
  }
}
}
.more-open:hover, .more-close:hover {
  opacity:0.6;
}