main {
  opacity: 0; }

main.open {
  opacity: 1; }

/*common*/
.box_btn {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center; }
  @media screen and (min-width: 769px) {
    .box_btn {
      gap: 1rem; } }
  @media screen and (max-width: 768px) {
    .box_btn {
      gap: 1rem; } }

.box_btn p {
  position: relative;
  font-weight: 700;
  letter-spacing: 0.0em;
  transition: ease-in-out 0.4s all;
  color: #1a3661; }
  @media screen and (min-width: 769px) {
    .box_btn p {
      text-align: center;
      line-height: 1em;
      font-size: 1.6rem; } }
  @media screen and (max-width: 768px) {
    .box_btn p {
      line-height: 1em;
      font-size: 1.6rem; } }

.box_btn .arrow {
  position: relative;
  display: inline-block;
  background: #1a3661;
  transition: ease-in-out 0.4s all; }
  @media screen and (min-width: 769px) {
    .box_btn .arrow {
      width: 5.6rem;
      height: 5.6rem;
      border-top-left-radius: 1.5rem;
      border-bottom-right-radius: 1.5rem; } }
  @media screen and (max-width: 768px) {
    .box_btn .arrow {
      width: 4.8rem;
      height: 4.8rem;
      border-top-left-radius: 1.5rem;
      border-bottom-right-radius: 1.5rem; } }

.box_btn .arrow::after {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  content: '';
  transition: ease-in-out 0.4s all;
  background: url("../img/box_arrow.svg") center center no-repeat; }
  @media screen and (min-width: 769px) {
    .box_btn .arrow::after {
      background-size: 1.5rem auto; } }
  @media screen and (max-width: 768px) {
    .box_btn .arrow::after {
      background-size: 1.5rem auto; } }

@media screen and (min-width: 769px) {
  .box_btn:hover p {
    color: #457cca; } }

@media screen and (min-width: 769px) {
  .box_btn:hover .arrow {
    background: #457cca; } }

@media screen and (min-width: 769px) {
  .box_btn:hover .arrow::after {
    transform: translateX(5px); } }

/**/
#preload {
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
  /*clip-path: inset(0 0 0 0);*/
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff; }
  @media screen and (min-width: 769px) {
    #preload {
      gap: 4rem; } }
  @media screen and (max-width: 768px) {
    #preload {
      gap: 4rem; } }

#preload.set1 {
  background: url("../img/preload_bg_1.png") center center repeat; }
  @media screen and (min-width: 769px) {
    #preload.set1 {
      background-size: 11rem auto; } }
  @media screen and (max-width: 768px) {
    #preload.set1 {
      background-size: 9rem auto; } }

#preload.set2 {
  background: url("../img/preload_bg_2.png") center center repeat; }
  @media screen and (min-width: 769px) {
    #preload.set2 {
      background-size: 11rem auto; } }
  @media screen and (max-width: 768px) {
    #preload.set2 {
      background-size: 9rem auto; } }

#preload.set3 {
  background: url("../img/preload_bg_3.png") center center repeat; }
  @media screen and (min-width: 769px) {
    #preload.set3 {
      background-size: 11rem auto; } }
  @media screen and (max-width: 768px) {
    #preload.set3 {
      background-size: 9rem auto; } }

#preload.out {
  pointer-events: none;
  /*
  clip-path: inset(0 100% 0 0);
  transition: all 700ms cubic-bezier(0.740, 0.255, 0.190, 0.955);
  transition-timing-function: cubic-bezier(0.740, 0.255, 0.190, 0.955);
  */
  transition: 1.6s ease-in-out;
  transition-delay: .3s;
  opacity: 0; }

#preload > div {
  position: relative; }

/*
#preload.out > div{
	transition: all 8000ms cubic-bezier(0.740, 0.255, 0.190, 0.955);
	transition-timing-function: cubic-bezier(0.740, 0.255, 0.190, 0.955);
	transform: translateX(-90vw) rotate(-30deg);
}
*/
#preload .load {
  position: relative;
  text-align: center;
  font-weight: 700;
  color: #e9495d;
  font-family: "Roboto", sans-serif; }
  @media screen and (min-width: 769px) {
    #preload .load {
      line-height: 1em;
      font-size: 2.4rem; } }
  @media screen and (max-width: 768px) {
    #preload .load {
      line-height: 1em;
      font-size: 1.8rem; } }

#preload.set1 .load {
  color: #e9495d; }

#preload.set2 .load {
  color: #5188d6; }

#preload.set3 .load {
  color: #8476db; }

#preload.out .load {
  transition: .2s ease-out;
  opacity: 0; }

.load span {
  display: inline-block;
  animation: loadJump 1.2s ease-in-out infinite; }

.load span:nth-child(1) {
  animation-delay: 0s; }

.load span:nth-child(2) {
  animation-delay: 0.08s; }

.load span:nth-child(3) {
  animation-delay: 0.16s; }

.load span:nth-child(4) {
  animation-delay: 0.24s; }

.load span:nth-child(5) {
  animation-delay: 0.32s; }

.load span:nth-child(6) {
  animation-delay: 0.40s; }

.load span:nth-child(7) {
  animation-delay: 0.48s; }

.load span:nth-child(8) {
  animation-delay: 0.56s; }

.load span:nth-child(9) {
  animation-delay: 0.64s; }

.load span:nth-child(10) {
  animation-delay: 0.72s; }

.load span:nth-child(11) {
  animation-delay: 0.80s; }

.load span:nth-child(12) {
  animation-delay: 0.88s; }

.load span:nth-child(13) {
  animation-delay: 0.96s; }

.load span:nth-child(14) {
  animation-delay: 1.04s; }

@keyframes loadJump {
  0%,
	70%,
	100% {
    transform: translateY(0); }
  15% {
    transform: translateY(-8px); }
  30% {
    transform: translateY(0); } }
#preload .preload_character {
  position: relative;
  background: url("../img/preload_chara_1.png") 0 0 no-repeat;
  background-size: contain;
  animation: fuwafuwa 3s ease-in-out infinite;
  margin: 0 auto; }
  @media screen and (min-width: 769px) {
    #preload .preload_character {
      width: 25rem;
      height: 18rem; } }
  @media screen and (max-width: 768px) {
    #preload .preload_character {
      width: 16rem;
      height: 12rem; } }

#preload.set1 .preload_character {
  background: url("../img/preload_chara_1.png") 0 0 no-repeat;
  background-size: contain; }

#preload.set2 .preload_character {
  background: url("../img/preload_chara_2.png") 0 0 no-repeat;
  background-size: contain; }

#preload.set3 .preload_character {
  background: url("../img/preload_chara_3.png") 0 0 no-repeat;
  background-size: contain; }

@keyframes fuwafuwa {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-out; }
  30% {
    transform: translateY(-20px);
    animation-timing-function: ease-in; }
  55% {
    transform: translateY(3px);
    animation-timing-function: ease-out; }
  78% {
    transform: translateY(14px);
    animation-timing-function: ease-in; }
  100% {
    transform: translateY(0); } }
/**/
#main_visual {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important; }
  @media screen and (min-width: 769px) {
    #main_visual {
      height: 100vh; } }

#main_visual .slider_set,
#main_visual .slider_set figure {
  position: relative;
  width: 100% !important; }
  @media screen and (min-width: 769px) {
    #main_visual .slider_set,
    #main_visual .slider_set figure {
      height: 100%; } }

#main_visual .slider_set figure img {
  position: relative;
  display: block;
  width: 100%; }
  @media screen and (min-width: 769px) {
    #main_visual .slider_set figure img {
      height: 100%;
      object-fit: cover; } }

@media screen and (min-width: 769px) {
  #main_visual .slider_set figure.t_l img {
    object-position: left bottom; } }

/*
#main_visual{
    position:relative;
	width: 100%;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
	@include mq(pc) {
    }
    @include mq(sp) {
    }
}
#main_visual .slider_set{
	position: relative;
	width: 100% !important;
	@include mq(pc) {
    }
    @include mq(sp) {
    }
}
*/
#main_visual .kv_set p {
  position: absolute !important;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 3; }

#main_visual .kv_set p.ttl {
  clip-path: inset(0 50% 0 0); }
  @media screen and (min-width: 769px) {
    #main_visual .kv_set p.ttl {
      transition: all 2400ms cubic-bezier(0.61, 0.65, 0.02, 0.985);
      /* custom */
      transition-timing-function: cubic-bezier(0.61, 0.65, 0.02, 0.985);
      /* custom */ } }
  @media screen and (max-width: 768px) {
    #main_visual .kv_set p.ttl {
      transition: all 1500ms cubic-bezier(0.61, 0.65, 0.02, 0.985);
      /* custom */
      transition-timing-function: cubic-bezier(0.61, 0.65, 0.02, 0.985);
      /* custom */ } }

#main_visual .kv_set.is-active p.ttl {
  transition-delay: .1s; }
  @media screen and (min-width: 769px) {
    #main_visual .kv_set.is-active p.ttl {
      transition-delay: .1s;
      clip-path: inset(0 0 0 0); } }
  @media screen and (max-width: 768px) {
    #main_visual .kv_set.is-active p.ttl {
      transition-delay: .6s;
      clip-path: inset(0 0 0 0); } }

#main_visual .kv_set p.txt {
  clip-path: inset(0 100% 0 0); }
  @media screen and (min-width: 769px) {
    #main_visual .kv_set p.txt {
      transition: all 1600ms cubic-bezier(0.61, 0.65, 0.02, 0.985);
      /* custom */
      transition-timing-function: cubic-bezier(0.61, 0.65, 0.02, 0.985);
      /* custom */ } }
  @media screen and (max-width: 768px) {
    #main_visual .kv_set p.txt {
      transition: all 1600ms cubic-bezier(0.61, 0.65, 0.02, 0.985);
      /* custom */
      transition-timing-function: cubic-bezier(0.61, 0.65, 0.02, 0.985);
      /* custom */ } }

#main_visual .kv_set.is-active p.txt {
  transition-delay: .1s; }
  @media screen and (min-width: 769px) {
    #main_visual .kv_set.is-active p.txt {
      clip-path: inset(0 50% 0 0); } }
  @media screen and (max-width: 768px) {
    #main_visual .kv_set.is-active p.txt {
      clip-path: inset(0 0 0 0); } }

#main_visual .slider_nav {
  position: absolute !important;
  z-index: 4; }
  @media screen and (min-width: 769px) {
    #main_visual .slider_nav {
      width: 100%;
      left: 0rem;
      bottom: 2rem; } }
  @media screen and (max-width: 768px) {
    #main_visual .slider_nav {
      right: 1rem;
      bottom: 0rem;
      width: 3.2rem;
      height: 100%; } }

#main_visual .slider_nav .inner {
  position: relative;
  display: flex; }
  @media screen and (min-width: 769px) {
    #main_visual .slider_nav .inner {
      justify-content: center;
      align-items: center;
      gap: 1.5rem; } }
  @media screen and (max-width: 768px) {
    #main_visual .slider_nav .inner {
      width: 3.2rem;
      height: 100%;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 1.2rem; } }

#main_visual .slider_nav .dots {
  position: relative;
  display: flex;
  justify-content: flex-end; }
  @media screen and (min-width: 769px) {
    #main_visual .slider_nav .dots {
      gap: 1.2rem; } }
  @media screen and (max-width: 768px) {
    #main_visual .slider_nav .dots {
      flex-direction: column;
      align-items: center;
      gap: 1.2rem; } }

#main_visual .slider_nav .dots .dot {
  position: relative;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  transition: ease-in-out .4s all; }
  @media screen and (min-width: 769px) {
    #main_visual .slider_nav .dots .dot {
      width: 1.2rem;
      height: 1.2rem;
      border: #fff 0.2rem solid; } }
  @media screen and (max-width: 768px) {
    #main_visual .slider_nav .dots .dot {
      width: 1.2rem;
      height: 1.2rem;
      border: #fff 0.2rem solid; } }

#main_visual .slider_nav .dots .dot.active,
#main_visual .slider_nav .dots .dot:hover {
  background: #fff !important; }

#main_visual .slider_nav .stop_to_go {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff;
  border: 0.2rem #fff solid;
  cursor: pointer;
  transition: ease-out 0.4s all;
  display: flex;
  justify-content: center;
  align-items: center; }
  @media screen and (min-width: 769px) {
    #main_visual .slider_nav .stop_to_go {
      width: 3.2rem;
      height: 3.2rem; } }
  @media screen and (max-width: 768px) {
    #main_visual .slider_nav .stop_to_go {
      width: 3.2rem;
      height: 3.2rem; } }

@media screen and (max-width: 768px) {
  #main_visual .slider_nav .stop_to_go {
    border: 0.2rem #fff solid; } }

#main_visual .slider_nav .stop_to_go {
  border-radius: 50%; }

@media screen and (min-width: 769px) {
  #main_visual .slider_nav .stop_to_go:hover {
    background: #fff; } }

#main_visual .slider_nav .stop_to_go span {
  position: relative;
  background: url("../img/icon_stop_k.svg") right center no-repeat;
  background-size: contain; }
  @media screen and (min-width: 769px) {
    #main_visual .slider_nav .stop_to_go span {
      width: 1.2rem;
      height: 1.4rem; } }
  @media screen and (max-width: 768px) {
    #main_visual .slider_nav .stop_to_go span {
      width: 1.2rem;
      height: 1.4rem; } }

#main_visual .slider_nav .stop_to_go.paused span {
  background: url("../img/icon_play_k.svg") right center no-repeat;
  background-size: contain; }
  @media screen and (min-width: 769px) {
    #main_visual .slider_nav .stop_to_go.paused span {
      width: 1.2rem;
      height: 1.4rem; } }
  @media screen and (max-width: 768px) {
    #main_visual .slider_nav .stop_to_go.paused span {
      width: 1.2rem;
      height: 1.4rem; } }

#news {
  position: relative; }

#news .inner {
  position: relative;
  margin: 0 auto;
  color: #1a3661; }
  @media screen and (min-width: 769px) {
    #news .inner {
      display: flex;
      flex-direction: row;
      width: 102rem;
      padding: 3rem 0; } }
  @media screen and (max-width: 768px) {
    #news .inner {
      display: flex;
      flex-direction: column;
      width: 32rem;
      padding: 3rem 0; } }

#news .h_group {
  display: flex;
  flex-direction: column; }
  @media screen and (min-width: 769px) {
    #news .h_group {
      align-items: flex-start;
      justify-content: center;
      width: 14.5rem;
      padding: 1rem 0;
      gap: 1rem; } }
  @media screen and (max-width: 768px) {
    #news .h_group {
      align-items: center;
      justify-content: center;
      width: 32rem;
      padding: 0 0 1.5rem;
      gap: 1rem; } }

@media screen and (min-width: 769px) {
  #news .h_group h2 {
    width: 9.4rem; } }
@media screen and (max-width: 768px) {
  #news .h_group h2 {
    width: 7rem;
    margin: 0 auto; } }

#news .h_group p {
  position: relative;
  font-weight: 700;
  letter-spacing: 0.0em; }
  @media screen and (min-width: 769px) {
    #news .h_group p {
      line-height: 1em;
      font-size: 1.2rem; } }
  @media screen and (max-width: 768px) {
    #news .h_group p {
      line-height: 1em;
      font-size: 1.2rem; } }

#news .news_list {
  display: flex;
  flex-direction: column; }
  @media screen and (min-width: 769px) {
    #news .news_list {
      width: 97.5rem;
      border-left: #1a3661 0.2rem solid;
      padding: 1rem 0 1rem 4rem;
      gap: 0.5rem; } }
  @media screen and (max-width: 768px) {
    #news .news_list {
      width: 27.5rem;
      gap: 1rem; } }

#area_sea {
  position: relative;
  width: 100%;
  background: #fff url("../../img/sea_bg.png") 0 0 repeat; }
  @media screen and (min-width: 769px) {
    #area_sea {
      background-size: 2.8rem auto; } }
  @media screen and (max-width: 768px) {
    #area_sea {
      background-size: 2.8rem auto; } }

#today {
  position: relative; }
  @media screen and (min-width: 769px) {
    #today {
      min-height: 75rem; } }

#today .inner {
  position: relative; }
  @media screen and (min-width: 769px) {
    #today .inner {
      display: flex;
      justify-content: space-between; } }
  @media screen and (max-width: 768px) {
    #today .inner {
      display: flex;
      flex-direction: column;
      gap: 3rem; } }

#information {
  position: relative;
  display: flex;
  flex-direction: column; }
  @media screen and (min-width: 769px) {
    #information {
      padding-top: 10rem;
      margin-left: 4.5rem;
      width: 41rem;
      gap: 1.5rem; } }
  @media screen and (max-width: 768px) {
    #information {
      padding-top: 5rem;
      width: 32rem;
      gap: 1.5rem; } }

#information .h_group {
  position: relative;
  display: flex;
  flex-direction: column; }
  @media screen and (min-width: 769px) {
    #information .h_group {
      gap: 1rem; } }
  @media screen and (max-width: 768px) {
    #information .h_group {
      gap: 1rem; } }

#information .h_group h2 {
  position: relative;
  font-weight: 700;
  letter-spacing: 0.0em;
  font-family: "Roboto", sans-serif;
  color: #1a3661;
  border-left: #1a3661 0.2rem solid; }
  @media screen and (min-width: 769px) {
    #information .h_group h2 {
      padding-left: 1rem;
      line-height: 1.188em;
      font-size: 1.6rem; } }
  @media screen and (max-width: 768px) {
    #information .h_group h2 {
      padding-left: 1rem;
      line-height: 1.215em;
      font-size: 1.4rem; } }

#information .h_group p {
  position: relative;
  font-weight: 700;
  letter-spacing: 0.0em;
  color: #1a3661; }
  @media screen and (min-width: 769px) {
    #information .h_group p {
      line-height: 1.5em;
      font-size: 2.6rem; } }
  @media screen and (max-width: 768px) {
    #information .h_group p {
      line-height: 1.5em;
      font-size: 2.2rem; } }

#information .box {
  position: relative;
  display: flex;
  width: 100%;
  background: #fff; }
  @media screen and (min-width: 769px) {
    #information .box {
      border-radius: 1.5rem;
      box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1); } }
  @media screen and (max-width: 768px) {
    #information .box {
      border-radius: 1.5rem;
      box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1); } }

#information h3 {
  position: absolute;
  top: 0;
  left: 0;
  background: #1a3661;
  font-weight: 700;
  letter-spacing: 0.0em;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center; }
  @media screen and (min-width: 769px) {
    #information h3 {
      width: 12.4rem;
      height: 3.4rem;
      border-top-left-radius: 1.5rem;
      border-bottom-right-radius: 1.5rem;
      line-height: 1em;
      font-size: 1.6rem; } }
  @media screen and (max-width: 768px) {
    #information h3 {
      width: 11.4rem;
      height: 2.8rem;
      border-top-left-radius: 1.5rem;
      border-bottom-right-radius: 1.5rem;
      line-height: 1em;
      font-size: 1.4rem; } }

#information .box_btn .arrow {
  position: relative;
  display: inline-block;
  background: #1a3661;
  transition: ease-in-out 0.4s all; }
  @media screen and (min-width: 769px) {
    #information .box_btn .arrow {
      width: 4.3rem;
      height: 4.3rem;
      border-top-left-radius: 1.5rem;
      border-bottom-right-radius: 1.5rem; } }
  @media screen and (max-width: 768px) {
    #information .box_btn .arrow {
      width: 3.6rem;
      height: 3.6rem;
      border-top-left-radius: 1.5rem;
      border-bottom-right-radius: 1.5rem; } }

#information .box_btn .arrow::after {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  content: '';
  transition: ease-in-out 0.4s all;
  background: url("../img/box_arrow.svg") center center no-repeat; }
  @media screen and (min-width: 769px) {
    #information .box_btn .arrow::after {
      background-size: 1rem auto; } }
  @media screen and (max-width: 768px) {
    #information .box_btn .arrow::after {
      background-size: 0.8rem auto; } }

@media screen and (min-width: 769px) {
  #information .box:hover .box_btn p {
    color: #457cca; } }

@media screen and (min-width: 769px) {
  #information .box:hover .box_btn .arrow {
    background: #457cca; } }

@media screen and (min-width: 769px) {
  #information .box:hover .box_btn .arrow::after {
    transform: translateX(5px); } }

#map {
  position: relative; }
  @media screen and (min-width: 769px) {
    #map {
      padding-top: 6rem;
      width: 67rem; } }
  @media screen and (max-width: 768px) {
    #map {
      width: 32rem;
      padding-bottom: 2rem; } }

#movie {
  position: relative;
  z-index: 3; }
  @media screen and (min-width: 769px) {
    #movie {
      min-height: 50.6rem; } }
  @media screen and (max-width: 768px) {
    #movie {
      min-height: 63.5rem; } }

#movie::before {
  position: absolute;
  content: "";
  left: 0;
  width: 100%; }
  @media screen and (min-width: 769px) {
    #movie::before {
      bottom: -6rem;
      height: 56.6rem;
      background: url("../../img/movie_bg.png") center center no-repeat;
      background-size: 100% 100%; } }
  @media screen and (max-width: 768px) {
    #movie::before {
      bottom: -1rem;
      height: 63.5rem;
      background: url("../../img/movie_bg_sp.png") center center no-repeat;
      background-size: 100% 100%; } }

#movie .inner {
  position: relative; }
  @media screen and (min-width: 769px) {
    #movie .inner {
      display: flex;
      justify-content: space-between;
      padding-top: 4rem; } }
  @media screen and (max-width: 768px) {
    #movie .inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2rem;
      width: 100% !important; } }

#movie .thumbnail_box {
  position: relative;
  overflow: hidden; }
  @media screen and (min-width: 769px) {
    #movie .thumbnail_box {
      width: 45rem; } }
  @media screen and (max-width: 768px) {
    #movie .thumbnail_box {
      padding: 1rem 1rem 0;
      width: 34rem;
      margin: 0 auto;
      order: 3;
      transform: translateX(1rem); } }

#movie .movie_set {
  position: relative;
  z-index: 3; }
  @media screen and (min-width: 769px) {
    #movie .movie_set {
      width: 72rem; } }
  @media screen and (max-width: 768px) {
    #movie .movie_set {
      width: 32rem;
      order: 2; } }

#movie .movie_set::before {
  position: absolute;
  content: "";
  left: 0;
  width: 100%;
  background: url("../../img/video_bg.png") center center no-repeat;
  background-size: cover;
  z-index: -1; }
  @media screen and (min-width: 769px) {
    #movie .movie_set::before {
      height: 40.5rem;
      top: 0.7rem;
      left: 0.7rem; } }
  @media screen and (max-width: 768px) {
    #movie .movie_set::before {
      height: 18rem;
      top: 0.7rem;
      left: 0.7rem; } }

#movie .movie_set p {
  position: relative;
  font-weight: 600;
  letter-spacing: 0.0em; }
  @media screen and (min-width: 769px) {
    #movie .movie_set p {
      padding: 2.5rem 0 0;
      text-align: center;
      line-height: 1em;
      font-size: 2rem; } }
  @media screen and (max-width: 768px) {
    #movie .movie_set p {
      padding: 2rem 0 0;
      text-align: center;
      line-height: 1.5em;
      font-size: 1.6rem; } }

#movie .movie_set p span {
  font-weight: 700;
  color: #ef83a8; }
  @media screen and (min-width: 769px) {
    #movie .movie_set p span {
      padding-right: 1rem; } }
  @media screen and (max-width: 768px) {
    #movie .movie_set p span {
      display: block; } }

#movie .movie_set p a {
  position: relative;
  display: inline-block;
  color: #1a3661;
  transition: ease-in-out .4s all; }
  @media screen and (min-width: 769px) {
    #movie .movie_set p a {
      padding-right: 2.6rem; } }
  @media screen and (max-width: 768px) {
    #movie .movie_set p a {
      padding-right: 2.2rem; } }

#movie .movie_set p a::before {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  height: 100%;
  background: url("../img/icon_window.png") center center no-repeat;
  background-size: contain;
  z-index: -1; }
  @media screen and (min-width: 769px) {
    #movie .movie_set p a::before {
      width: 2rem; } }
  @media screen and (max-width: 768px) {
    #movie .movie_set p a::before {
      width: 1.6rem; } }

@media screen and (min-width: 769px) {
  #movie .movie_set p a:hover {
    opacity: .6; } }

#movie h2 {
  position: relative; }
  @media screen and (min-width: 769px) {
    #movie h2 {
      margin-top: 14.5rem;
      margin-left: 4rem;
      margin-bottom: 3.5rem;
      width: 26.8rem; } }
  @media screen and (max-width: 768px) {
    #movie h2 {
      margin-top: 7rem;
      transform: translateX(-4rem);
      padding-bottom: 1rem;
      width: 19rem;
      order: 1; } }

.thumbnail_set {
  position: relative;
  width: 100%; }
  @media screen and (min-width: 769px) {
    .thumbnail_set {
      padding-left: 1.8rem; } }
  @media screen and (max-width: 768px) {
    .thumbnail_set {
      order: 3; } }

.thumbnail_set div {
  overflow: visible; }

.thumbnail_set .slick-slide img {
  transform: scale(0.9);
  transform-origin: center bottom;
  transition: all 300ms cubic-bezier(0.74, 0.255, 0.19, 0.955);
  transition-timing-function: cubic-bezier(0.74, 0.255, 0.19, 0.955); }

.thumbnail_set .slick-slide.is-active img {
  transform: scale(1.15); }

.thumbnail_nav {
  position: relative; }
  @media screen and (min-width: 769px) {
    .thumbnail_nav {
      padding: 1rem 0 0; } }
  @media screen and (max-width: 768px) {
    .thumbnail_nav {
      padding: 1rem 0 0; } }

.thumbnail_nav .dots {
  position: relative;
  display: flex;
  justify-content: center; }
  @media screen and (min-width: 769px) {
    .thumbnail_nav .dots {
      gap: 1rem; } }
  @media screen and (max-width: 768px) {
    .thumbnail_nav .dots {
      align-items: center;
      gap: 1rem; } }

.thumbnail_nav .dots .dot {
  position: relative;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  transition: ease-in-out .4s all; }
  @media screen and (min-width: 769px) {
    .thumbnail_nav .dots .dot {
      width: 1rem;
      height: 1rem;
      border: #1a3661 0.2rem solid; } }
  @media screen and (max-width: 768px) {
    .thumbnail_nav .dots .dot {
      width: 1rem;
      height: 1rem;
      border: #1a3661 0.2rem solid; } }

.thumbnail_nav .dots .dot.active,
.thumbnail_nav .dots .dot:hover {
  background: #1a3661 !important; }

.thumbnail_nav .dots {
  position: relative;
  display: flex;
  justify-content: center; }
  @media screen and (min-width: 769px) {
    .thumbnail_nav .dots {
      gap: 1rem; } }
  @media screen and (max-width: 768px) {
    .thumbnail_nav .dots {
      align-items: center;
      gap: 1rem; } }

.thumbnail_nav .prev_next {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 10; }
  @media screen and (min-width: 769px) {
    .thumbnail_nav .prev_next {
      width: 100%;
      top: -8rem;
      left: 0rem; } }
  @media screen and (max-width: 768px) {
    .thumbnail_nav .prev_next {
      width: 33rem;
      top: -6rem;
      left: -1rem; } }

.thumbnail_nav .prev,
.thumbnail_nav .next {
  position: relative;
  transition: ease-out 0.6s all;
  background: #1a3661;
  border: none;
  display: block;
  border-radius: 50%;
  pointer-events: auto !important;
  cursor: pointer; }
  @media screen and (min-width: 769px) {
    .thumbnail_nav .prev,
    .thumbnail_nav .next {
      width: 4rem;
      height: 4rem; } }
  @media screen and (max-width: 768px) {
    .thumbnail_nav .prev,
    .thumbnail_nav .next {
      width: 4rem;
      height: 4rem; } }

.thumbnail_nav .prev span,
.thumbnail_nav .next span {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  content: '';
  transition: ease-in-out 0.4s all;
  background: url("../img/box_arrow.svg") center center no-repeat; }
  @media screen and (min-width: 769px) {
    .thumbnail_nav .prev span,
    .thumbnail_nav .next span {
      background-size: 0.8rem auto; } }
  @media screen and (max-width: 768px) {
    .thumbnail_nav .prev span,
    .thumbnail_nav .next span {
      background-size: 0.8rem auto; } }

.thumbnail_nav .prev span {
  transform: scale(-1, -1); }

#area_sky {
  position: relative;
  /*
  background:url("../../img/sky_bg.jpg") center center no-repeat;
  */
  display: flex;
  flex-direction: column;
  align-items: center; }
  @media screen and (min-width: 769px) {
    #area_sky {
      /*background-size:cover;*/
      gap: 5rem;
      padding: 14rem 0; } }
  @media screen and (max-width: 768px) {
    #area_sky {
      /*background-size:auto 100%;*/
      gap: 3rem;
      padding: 7rem 0; } }

.sky_slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; }

.sky_slide img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover; }

#area_sky .sky_box {
  position: relative;
  display: flex;
  width: 100%;
  background: #fff url("../../img/box_bg.png") 0 0 repeat; }
  @media screen and (min-width: 769px) {
    #area_sky .sky_box {
      align-items: center;
      background-size: 2.8rem auto;
      border-radius: 1.5rem;
      box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1); } }
  @media screen and (max-width: 768px) {
    #area_sky .sky_box {
      flex-direction: column;
      background-size: 2.8rem auto;
      border-radius: 1.5rem;
      box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1); } }

@media screen and (min-width: 769px) {
  #character .sky_box {
    height: 36rem; } }
@media screen and (max-width: 768px) {
  #character .sky_box {
    height: 74rem; } }

@media screen and (min-width: 769px) {
  #interview .sky_box {
    height: 34rem; } }
@media screen and (max-width: 768px) {
  #interview .sky_box {
    height: 59rem; } }

#area_sky .h_group {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column; }
  @media screen and (min-width: 769px) {
    #area_sky .h_group {
      width: 50rem;
      gap: 2.5rem; } }
  @media screen and (max-width: 768px) {
    #area_sky .h_group {
      padding-top: 3.5rem;
      padding-bottom: 1rem;
      width: 26.4rem;
      margin: 0 auto !important;
      gap: 2rem; } }

@media screen and (min-width: 769px) {
  #interview .h_group h2 {
    width: 28.8rem; } }
@media screen and (max-width: 768px) {
  #interview .h_group h2 {
    width: 26.4rem;
    margin: 0 auto !important; } }

@media screen and (min-width: 769px) {
  #character .h_group {
    width: 59rem;
    margin: 0 0 0 auto; } }

@media screen and (min-width: 769px) {
  #character .h_group h2 {
    width: 47.2rem; } }
@media screen and (max-width: 768px) {
  #character .h_group h2 {
    width: 26.4rem;
    margin: 0 auto !important; } }

#area_sky .h_group p {
  position: relative;
  font-weight: 600;
  letter-spacing: 0.0em; }
  @media screen and (min-width: 769px) {
    #area_sky .h_group p {
      text-align: center;
      line-height: 1.667em;
      font-size: 1.8rem; } }
  @media screen and (max-width: 768px) {
    #area_sky .h_group p {
      text-align: center;
      line-height: 1.625em;
      font-size: 1.6rem; } }

@media screen and (min-width: 769px) {
  #interview figure {
    position: absolute;
    top: -4rem;
    right: 0;
    width: 69.5rem; } }
@media screen and (max-width: 768px) {
  #interview figure {
    width: 35rem;
    transform: translateX(-1.5rem); } }

#character .special_character {
  position: absolute;
  display: block;
  transition: ease-in-out 0.4s all; }

@media screen and (min-width: 769px) {
  #character .special_character:hover {
    z-index: 10;
    transform: rotate(-10deg); } }

#character #special_character_1 {
  position: absolute; }
  @media screen and (min-width: 769px) {
    #character #special_character_1 {
      top: 5rem;
      left: 5rem;
      width: 24rem; } }
  @media screen and (max-width: 768px) {
    #character #special_character_1 {
      top: 49rem;
      left: -3rem;
      width: 18rem; } }

#character #special_character_2 {
  position: absolute; }
  @media screen and (min-width: 769px) {
    #character #special_character_2 {
      top: -3rem;
      left: 22rem;
      width: 28.4rem; } }
  @media screen and (max-width: 768px) {
    #character #special_character_2 {
      top: 35rem;
      left: 7.5rem;
      width: 18rem;
      z-index: 10; } }

#character #special_character_3 {
  position: absolute; }
  @media screen and (min-width: 769px) {
    #character #special_character_3 {
      top: 6rem;
      left: 40rem;
      width: 26.8rem; } }
  @media screen and (max-width: 768px) {
    #character #special_character_3 {
      top: 44rem;
      left: 16rem;
      width: 20.3rem; } }

@media screen and (min-width: 769px) {
  #character .special_character#special_character_3:hover {
    z-index: 10;
    transform: rotate(10deg); } }