@charset "UTF-8";
/**
 * 旅色BOOK トンマナ用CSS
 * Created on: 2019.05.29
 * Modified on: 2021.12.27 -- dart-sass対応
 */
/*--------------------------------------------------------
　BREAK POINT
--------------------------------------------------------*/
/*--------------------------------------------------------
　FONT
--------------------------------------------------------*/
/*--------------------------------------------------------
　COLOR
--------------------------------------------------------*/
/*--------------------------------------------------------
　FRAME WIDTH
--------------------------------------------------------*/
/*--------------------------------------------------------
　CSS SPRITE
--------------------------------------------------------*/
/*--------------------------------------------------------
　OTHERS
--------------------------------------------------------*/
/**
 * 旅色BOOK3月号 テーマカラー用CSS
 * Created on: 2026.02.25
 */
/*--------------------------------------------------------
　COLOR
--------------------------------------------------------*/
/**
 * 旅色BOOK3月号 巻頭用CSS
 * Created on: 2026.02.25
 */
/*--------------------------------------------------------
　TOP
--------------------------------------------------------*/
body {
  background: #FFFFFF;
  border-width: 0;
}
body #frames .frame-top,
body #frames .frame-bottom {
  height: 0;
  transition: all 0.3s ease-in-out;
}
body #frames .frame-top::after,
body #frames .frame-bottom::after {
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
body #frames .frame-left,
body #frames .frame-right {
  width: 0;
  transition: all 0.3s ease-in-out;
}
body #frames .frame-left::after,
body #frames .frame-right::after {
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
body #header {
  transform: translate(0, -50px);
}
body #menu_btn,
body #sns_area {
  transform: translate(0, 160px);
}
body #arrows {
  transform: translate(70px, 0);
}
body #fp-nav {
  transform: translate(-70px, 0);
}
body #header,
body #menu_btn,
body #sns_area,
body #arrows,
body #fp-nav {
  transition: all 0.3s ease-in-out;
}
body.is-frame-fixed #frames .frame-top,
body.is-frame-fixed #frames .frame-bottom {
  height: 44px;
}
body.is-frame-fixed #frames .frame-top::after,
body.is-frame-fixed #frames .frame-bottom::after {
  opacity: 1;
}
body.is-frame-fixed #frames .frame-left,
body.is-frame-fixed #frames .frame-right {
  width: 44px;
}
body.is-frame-fixed #frames .frame-left::after,
body.is-frame-fixed #frames .frame-right::after {
  opacity: 1;
}
body.is-frame-fixed #header,
body.is-frame-fixed #menu_btn,
body.is-frame-fixed #sns_area,
body.is-frame-fixed #arrows,
body.is-frame-fixed #fp-nav {
  transform: translate(0, 0);
}

#arrows span.next {
  opacity: 1;
  transition: all 0.3s ease-in;
}
#arrows span.next.hide {
  opacity: 0;
}

#scroll_arrow {
  width: 108px;
  text-align: center;
  position: absolute;
  bottom: 40px;
  right: 60px;
  cursor: pointer;
  opacity: 1;
}
.is-frame-fixed #scroll_arrow {
  opacity: 0;
  transition: all 0.3s ease-in;
}
#scroll_arrow .next {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-right: 10px solid #FFFFFF;
  border-bottom: 10px solid #FFFFFF;
  -webkit-animation: down 2s infinite;
          animation: down 2s infinite;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.1));
}
#scroll_arrow .scroll {
  display: inline-block;
  width: 108px;
  height: 20px;
  margin-top: 20px;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.1));
}

@-webkit-keyframes down {
  0% {
    transform: translate(0, -20px) rotate(45deg);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  70% {
    transform: translate(0, 0) rotate(45deg);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes down {
  0% {
    transform: translate(0, -20px) rotate(45deg);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  70% {
    transform: translate(0, 0) rotate(45deg);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
#loadingbg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #ffffff;
  z-index: 999;
}

#loadingbar_base {
  width: 200px;
  height: 1px;
  background: #cccccc;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

#loadingbar {
  width: 0;
  height: 1px;
  background: #DC3C2D;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.2s linear;
}

.movie-area {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}
.movie-area iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 177.77777778vh;
  /* 16:9 の幅→16 ÷ 9＝ 177.77% */
  height: 56.25vw;
  /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  min-height: 100%;
  min-width: 100%;
}
.movie-area::before {
  content: "";
  width: 100%;
  height: 100%;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.cover-block {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}
.cover-block .tabiiro-logo {
  width: 19.53%;
  max-width: 249px;
  margin: 0 auto;
  position: absolute;
  top: 26.5%;
  left: 13%;
}
@media only screen and (max-width: 800px) {
  .cover-block .tabiiro-logo {
    width: 29.53%;
  }
}
@media only screen and (max-width: 800px) {
  .cover-block .tabiiro-logo {
    margin-top: -17vh;
  }
}
.cover-block .tabiiro-mv img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 100% 0%;
     object-position: 100% 0%;
}
.cover-body .cover-ttl {
  width: 27.3%;
  max-width: 349px;
  margin: 0 auto;
  position: absolute;
  top: 54.9%;
  left: 12%;
}
@media only screen and (max-width: 800px) {
  .cover-body .cover-ttl {
    width: 37.3%;
  }
}
.cover-body .cover-ttl-min {
  width: 19.7%;
  max-width: 252px;
  margin: 0 auto;
  position: absolute;
  top: 18.9%;
  left: 74.5%;
}
@media only screen and (max-width: 800px) {
  .cover-body .cover-ttl-min {
    width: 29.7%;
  }
}
.cover-second .contents-box {
  display: flex;
  justify-content: space-between;
}
.cover-second .contents-left {
  width: 46.5%;
  background: #FFFFFF;
  position: relative;
}
.cover-second .contents-left .cover {
  width: 70%;
  /* 330px */
  max-width: 412px;
  /* 330px *1.25 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.cover-second .contents-left .cover img {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.cover-second .contents-right {
  width: 53.5%;
  height: 100vh;
  background: #E5F8FF;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.cover-second .contents-right::before {
  content: "";
  width: 0;
  height: 0;
  border-width: 13px 26px 13px 0;
  border-style: solid;
  border-color: transparent #E5F8FF transparent transparent;
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -13px;
}
.cover-second .contents-txt {
  width: 10px;
  position: absolute;
  top: 54px;
  left: -20px;
}
.cover-second .contents-list {
  width: 83.6%;
  /* 460px */
  max-width: 575px;
  /* 460px *1.25 */
  position: relative;
}
.cover-second .contents-list:hover li a {
  opacity: 0.25;
}
.cover-second .contents-list li {
  padding-bottom: 4%;
}
.cover-second .contents-list li:first-child {
  padding-bottom: 6.5%;
}
.cover-second .contents-list li:nth-child(2) {
  padding-bottom: 3%;
}
.cover-second .contents-list li:nth-child(3) {
  padding-bottom: 6%;
}
.cover-second .contents-list li:nth-child(4) {
  padding-bottom: 1.6%;
}
.cover-second .contents-list li:nth-child(5) {
  padding-bottom: 1.6%;
}
.cover-second .contents-list li:nth-child(6) {
  padding-bottom: 1.6%;
}
.cover-second .contents-list li:last-child {
  padding-bottom: 0;
}
.cover-second .contents-list a {
  display: block;
  padding-left: 6%;
  position: relative;
  transition: opacity 0.3s ease;
}
.cover-second .contents-list a:hover {
  opacity: 1 !important;
}
.cover-second .contents-list a::before {
  content: "";
  width: 10px;
  height: 10px;
  background: url("/book/monthly/202603/images/top/contents_arrow.svg") no-repeat center center/10px auto;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -5px;
}
.cover-second .contents-list a::after {
  content: "";
  width: 0;
  height: 1px;
  background: #000000;
  position: absolute;
  bottom: 0;
  left: 6%;
  transition: width 0.3s ease-in-out;
}
.cover-second .contents-interview img {
  width: 35.1%;
}
.cover-second .contents-interview a:hover::after {
  width: 34.4%;
}
.cover-second .contents-interview a::before {
  top: 64.8%;
}
.cover-second .contents-refreshtrip img {
  width: 70.2%;
}
.cover-second .contents-refreshtrip a:hover::after {
  width: 67.5%;
}
.cover-second .contents-refreshtrip a::before {
  top: 73.8%;
}
.cover-second .contents-column img {
  width: 72.3%;
}
.cover-second .contents-column a:hover::after {
  width: 69.1%;
}
.cover-second .contents-column a::before {
  top: 60.8%;
}
.cover-second .contents-area img {
  width: 46.7%;
}
.cover-second .contents-area a:hover::after {
  width: 44.6%;
}
.cover-second .contents-area a::before {
  top: 79.8%;
}
.cover-second .contents-area2 img {
  width: 48.1%;
}
.cover-second .contents-area2 a:hover::after {
  width: 45.8%;
}
.cover-second .contents-area2 a::before {
  top: 43.8%;
}
.cover-second .contents-area3 img {
  width: 55.5%;
}
.cover-second .contents-area3 a:hover::after {
  width: 52.7%;
}
.cover-second .contents-area3 a::before {
  top: 79.8%;
}
.cover-second .contents-area4 img {
  width: 36%;
}
.cover-second .contents-area4 a:hover::after {
  width: 34.5%;
}
.cover-second .contents-area4 a::before {
  top: 43.8%;
}
.cover-second .contents-suite_room img {
  width: 59.5%;
}
.cover-second .contents-suite_room a:hover::after {
  width: 55.9%;
}
.cover-second .contents-suite_room a::before {
  top: 62.8%;
}
.tobira-bottom {
  background: #ffffff;
}
.tobira-bottom #footer {
  padding-top: 120px;
  min-height: calc(100vh + 1px);
  box-sizing: border-box;
}
.tobira-bottom .copyrights {
  margin-bottom: 88px;
}
@media only screen and (max-width: 800px) {
  .tobira-bottom .bottom-contents {
    width: calc(90% - 88px);
  }
}

/*--------------------------------------------------------
　SCROLL ANIMATION
--------------------------------------------------------*/
body::before {
  transform: translate3d(0, 100%, 0);
  transition: all 0.7s ease-in-out;
}
body.moveDown1st::before, body.removeImg::before {
  transform: translate3d(0, 0, 0);
}
body.bg-white::before {
  display: none;
}

.tabiiro-logo {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.7s ease-in-out, all 0.7s ease;
}
.tabiiro-logo.is-loading {
  opacity: 0;
}
.tabiiro-logo.is-passing {
  opacity: 1;
}

.cover-block .cover-ttl {
  opacity: 1;
  transition: opacity 0.7s ease-in-out, all 0.7s ease;
}
.cover-block .cover-ttl.is-loading {
  opacity: 0;
}
.cover-block .cover-ttl.is-passing {
  opacity: 1;
}
.cover-block .cover-ttl-min {
  opacity: 1;
  transition: opacity 0.7s ease-in-out, all 0.7s ease;
}
.cover-block .cover-ttl-min.is-loading {
  opacity: 0;
}
.cover-block .cover-ttl-min.is-passing {
  opacity: 1;
}
.cover-second .contents-box li {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease-in-out, all 0.7s ease;
}
.cover-second .contents-present {
  opacity: 0;
  transition: opacity 0.7s ease-in-out, all 0.7s ease;
}
.cover-second.move-up .contents-box li, .cover-second.active .contents-box li {
  opacity: 1;
  transform: translateX(0);
}
.cover-second.move-up .contents-box li:nth-child(1), .cover-second.active .contents-box li:nth-child(1) {
  transition-delay: 1s;
}
.cover-second.move-up .contents-box li:nth-child(2), .cover-second.active .contents-box li:nth-child(2) {
  transition-delay: 1.1s;
}
.cover-second.move-up .contents-box li:nth-child(3), .cover-second.active .contents-box li:nth-child(3) {
  transition-delay: 1.2s;
}
.cover-second.move-up .contents-box li:nth-child(4), .cover-second.active .contents-box li:nth-child(4) {
  transition-delay: 1.3s;
}
.cover-second.move-up .contents-box li:nth-child(5), .cover-second.active .contents-box li:nth-child(5) {
  transition-delay: 1.4s;
}
.cover-second.move-up .contents-box li:nth-child(6), .cover-second.active .contents-box li:nth-child(6) {
  transition-delay: 1.5s;
}
.cover-second.move-up .contents-box li:nth-child(7), .cover-second.active .contents-box li:nth-child(7) {
  transition-delay: 1.6s;
}
.cover-second.move-up .contents-box li:nth-child(8), .cover-second.active .contents-box li:nth-child(8) {
  transition-delay: 1.7s;
}
.cover-second.move-up .contents-box li:nth-child(9), .cover-second.active .contents-box li:nth-child(9) {
  transition-delay: 1.8s;
}
.cover-second.move-up .contents-box li:nth-child(10), .cover-second.active .contents-box li:nth-child(10) {
  transition-delay: 1.9s;
}
.cover-second.move-up .contents-present, .cover-second.active .contents-present {
  opacity: 1;
  transition-delay: 1s;
}
/*# sourceMappingURL=top.css.map */