@charset "UTF-8";

/* mode */
.dark_active, .dark_active .section {
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #1e1e20), color-stop(38%, #1e1f21));
  background-image: -o-linear-gradient(top, #1e1e20 5%, #1e1f21 38%);
  background-image: linear-gradient(to bottom, #1e1e20 5%, #1e1f21 38%);
}
.dark_active section .container h3 { color: #fff; }
.dark_active .container .line { background-color: #fff; }
.dark_active .container .line h3 { background-color: #1e1f21; }
.dark_active .section figure a {color: #fff;}
.dark_active #section1 figure a, .dark_active #section3 figure a {color: inherit;}

/* zoom */
#contents.zoom.main_wrap { font-size: 1.2em; }

#visual_wrap { width: 100vw; height: 100vh; position: relative; background-image: url(../img/main/main_visual.jpg); background-size: cover; background-position: 50% 0; background-repeat: no-repeat; background-attachment: fixed;margin: 0 auto;}
#visual_wrap:before { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); content: ''; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5);}
#visual_wrap .desc {position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);text-align: center;color: #fff;width: 100%;}
#visual_wrap .desc h2 {position: relative;font-size: 62px;font-weight: 800;}
#visual_wrap .desc h2 span {font-size: 37px;display: block;font-weight: 300;}
#visual_wrap .desc .month { position: relative; padding-top: 11rem; margin-top: 0.5rem; letter-spacing: 0; }
#visual_wrap .desc .month strong { font-size: 7rem; font-weight: 600; position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); line-height: 1; }
#visual_wrap .desc .month span { font-size: 2.3rem; font-weight: 400;}
#visual_wrap .desc .month span:nth-of-type(2) { padding: 0 1rem; }
#visual_wrap .scroll { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 3rem; padding: 3.3rem; text-transform: capitalize; color: #fff; letter-spacing: 0; font-size: 1.5rem; }
#visual_wrap .scroll:before, #visual_wrap .scroll:after { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); content: ''; border: 6px solid transparent; border-top: 6px solid #fff; }
#visual_wrap .scroll:before { bottom: 1rem; -webkit-animation: scroll_opacity 1s 0s alternate infinite; animation: scroll_opacity 1s 0s alternate infinite; }
#visual_wrap .scroll:after { bottom: 0; -webkit-animation: scroll_opacity 1s .5s normal infinite; animation: scroll_opacity 1s .5s normal infinite; }
@-webkit-keyframes scroll_opacity {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
@keyframes scroll_opacity {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
.section { background-color: #fff; position: relative; z-index: 1; }
.section h2 {text-align: center;}
#section2 .container .line {margin-top: 160px;}
.container .line {width: 100%;height: 3px;background-color: #000;position: relative;margin: 120px 0 70px;}
.container .line h3 {position: absolute;top: -37px;left: 50%;transform: translateX(-50%);padding: 0 35px;background-color: white;font-size: 2.8125em;font-weight: 700;-webkit-transition: font-size .4s;transition: font-size .4s;}
.container .imgwrap {display: flex;justify-content: space-between;}
#section4 .container .imgwrap {gap: 20px;}
.container .imgwrap a i {-webkit-transition: .4s; transition: .4s;}
.container .imgwrap a:hover i {color: #ff8a42;transform: rotate(90deg);scale: 1.1;}
.container .imgwrap p {font-size: 1.4375em;font-weight: 500;line-height: 1.2;word-break: keep-all;overflow: hidden;white-space: normal;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;-webkit-transition: .4s;transition: .4s;}
.container .imgwrap .more {left: auto;bottom: 10px;top: auto;font-size: 1em;width: 100%;text-align: right;padding-right: 10px;}
.container .imgwrap p .tit {font-size: 1.3em;font-weight: 600;display: block;margin-bottom: 5px;}
.container .imgwrap a figure {position: relative;overflow: hidden;}
.container .imgwrap a img {width: 100%;-webkit-transition: .6s;transition: .6s;}
figure a:hover img {transform: scale(1.1);}
.img__wrap {overflow: hidden;margin-bottom: 20px;}

section .container {position: relative;text-align: center;}
#section1::after {display: block;clear: both;content: '';background: #f3f3f3;width: 100%;height: 260px;position: absolute;bottom: -40px;z-index: -1;}
#section3::after {display: block;clear: both;content: '';background: #f3f3f3;width: 100%;height: 260px;position: absolute;bottom: -40px;z-index: -1;}
#section5 {margin-bottom: 70px;}
#section5 .mobile {display: none;}
#section5 .pc {display: block;}
#section5 .row { display: flex; justify-content: space-between; flex-wrap: wrap; }

.swiper-button-prev {left: -85px;right: auto;width: 70px;height: 70px;border-radius: 50%;background-color: #fff;border: 1px solid #adadad;display: block;}
.swiper-button-next {right: -85px;left: auto;width: 70px;height: 70px;border-radius: 50%;background-color: #fff;border: 1px solid #adadad;display: block;}
.swiper-button-next:after, .swiper-button-prev:after {line-height: 70px;}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {opacity: 1;cursor: pointer;pointer-events: auto;}
.swiper-button-lock {display: block;}

#myModal .modal-close {cursor: pointer; color: #fff; font-weight: 300; display: block; background: #0194e1; padding: 5px 10px; }
.modal { display: none; top: 0; left: 0; position: fixed; background-color: rgba(0,0,0,0.5); width: 100%; height: 100vh; z-index: 10000;}
.modal .util {display: flex;justify-content: space-between;padding: 5px 10px;align-items: center;}
.modal .util label span {margin-left: 3px;}
.popup_wrap { display: flex; flex-direction: column; align-items: center; width: 100%; transform: translateY(-50%); position: absolute; top: 50%;}
.pop { display: inline-block; background: #fff; margin: 10px;}

@media (max-width: 1300px) {
  #visual_wrap {background-position: 50% 0;}
  .container { max-width: calc(100% - 8rem); }
  .swiper-button-next, .swiper-button-prev {display: none !important;}
}
@media (max-width: 1026px) {
  .container { max-width: calc(100% - 2rem); }
}
@media (max-width: 768px) {
  #visual_wrap { background-image: url(../img/main/main_visual.jpg); background-size: cover; background-attachment: scroll;}
  #section2 .container .line {margin-top: 130px;}
  #section5 {margin-bottom: 20px;}
  .container .line {margin: 90px 0 40px;}
  .container .line h3 {font-size: 30px;top: -24px;}
  .container .imgwrap p {font-size: 18px;}
}
@media (max-width: 600px) {
  #visual_wrap .desc h2 span { font-size: 18px; }
  section .container h2 { margin-bottom: 3.5rem; }
  .container .imgwrap p {font-size: 1.3em;}
  #section5 .mobile {display: block;}
  #section5 .pc {display: none;}
}
@media (max-width: 540px) {
  #visual_wrap .scroll { bottom: 9rem; }
  .container .imgwrap { flex-direction: column; gap: 20px; }
  .container .line h3 {font-size: 25px; top: -20px; padding: 0 20px;}
  .container .line {margin: 55px 0 35px;}
  #section1::after {display: none;}
  #section3::after {display: none;}
  #section2 .container .line {margin-top: 55px;}
  #section5 {margin-bottom: 0;}
}
@media (max-width: 414px) {
  section .container h2 { font-size: 2.6em; }
}
@media (max-width: 320px) {
  #visual_wrap .desc h2 { font-size: 40px; }
  #visual_wrap .desc h2 span {font-size: 14px;}  
  #visual_wrap .desc .month strong { font-size: 6rem; }
  #visual_wrap .desc .month span {font-size: 1.59rem;}
  .container .imgwrap p {font-size: 1.25em;}
  .container .line {height: 2px;}
  .container .line h3 {font-size: 22px;top: -18px;padding: 0 10px;}
}