html {
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  overflow-x: hidden;
  overflow-y: auto;
}

#contents {
  padding-bottom: 0;
}

@media screen and (min-width: 769px) {
  .pcn {
    display: none !important;
  }
}

@media screen and (max-width: 850px) {
  .tcn {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  .spn {
    display: none !important;
  }
}

.wrapper {
  background: #F9F9F9;
  padding: 0 0 14rem 0;
}

@media screen and (max-width: 768px) {
  .wrapper {
    padding: 0 0 20vw 0;
  }
}

.wrapper a:hover {
  opacity: .5;
  text-decoration: none;
}

.topicWrap {
  position: relative;
  z-index: 2;
}

.loadanime {
  opacity: 0;
}

.scrollanime {
  opacity: 0;
}

.scrollanime-mugen {
  opacity: 0;
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
          animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.fadeInDownPlus {
  -webkit-animation-name: fadeInDown;
          animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.fuwafuwa {
  -webkit-animation: 3s fuwafuwa 1 forwards;
          animation: 3s fuwafuwa 1 forwards;
}

.fuwafuwa-mugen {
  -webkit-animation: 3s fuwafuwa-mugen infinite forwards;
          animation: 3s fuwafuwa-mugen infinite forwards;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}

@-webkit-keyframes fadeInDownPlus {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  70% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}

@keyframes fadeInDownPlus {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  70% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}

@-webkit-keyframes fuwafuwa {
  0%, 100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
}

@keyframes fuwafuwa {
  0%, 100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
}

@-webkit-keyframes fuwafuwa-mugen {
  0%, 100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
}

@keyframes fuwafuwa-mugen {
  0%, 100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
}

.updown {
  -webkit-transform: translateY(-100px);
          transform: translateY(-100px);
}

.downup-l {
  -webkit-transform: translateY(200px);
          transform: translateY(200px);
}

.downup {
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
}

.downup-s {
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
}

.slide-right {
  -webkit-transform: translateX(200px);
          transform: translateX(200px);
}

.slide-left {
  -webkit-transform: translateX(-200px);
          transform: translateX(-200px);
}

.slide-left-s {
  -webkit-transform: translateX(-50px);
          transform: translateX(-50px);
}

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 99;
  padding: 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.75);
  text-align: center;
}

.modal-content {
  display: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.modal-content .batsu {
  display: block;
  position: absolute;
  top: -6%;
  left: 96%;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  .modal-content .batsu {
    top: -16%;
    left: 91%;
  }
}

.modal-content .batsu::before, .modal-content .batsu::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 30px;
  background: #fff;
}

.modal-content .batsu::before {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}

.modal-content .batsu::after {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}

.modal-video {
  display: none;
}

iframe.youtube {
  vertical-align: top;
  width: 1024px;
  height: 576px;
}

@media screen and (max-width: 768px) {
  .modal-content {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
    padding: 0;
  }
  .youtube-box {
    position: relative;
    width: 100%;
    padding-top: 56.05%;
  }
  iframe.youtube {
    width: 100%;
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
  }
}

.sp-anc {
  width: 100%;
  position: relative;
  z-index: 99;
}

.sp-anc.fixed {
  position: fixed;
  top: 0;
  left: 0;
}

.sp-anc .anc-header {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 13.021vw;
  background: #fff;
}

.sp-anc .anc-header.active .logo-menu::after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.sp-anc .anc-header .logo-menu {
  width: 45.573vw;
  position: relative;
}

.sp-anc .anc-header .logo-menu::after {
  content: '';
  background-image: url(../img/arrow2.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 7.683vw;
  height: 3.777vw;
  position: absolute;
  top: 0.5vw;
  left: 61vw;
}

.sp-anc .anc-menu {
  width: 100%;
  background: #fff;
  padding: 1rem 0 3rem 0;
  display: none;
}

.sp-anc .anc-menu_itm {
  font-size: 4.428vw;
  padding: 3.5vw;
  text-align: center;
  font-weight: bold;
}

.sp-anc .anc-menu_itm a {
  color: #103675;
}

#video-area {
  width: 100%;
  height: 64.7rem;
  margin: auto;
}

#video-area.inactive {
  display: none;
}

#video {
  width: 100%;
  height: 64.7rem;
  margin: auto;
}

.kv {
  /* background-image: url(../img/kv.png); */
  background-color: #bde4f2;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  max-width: 200rem;
  height: 64.7rem;
  margin: auto;
  overflow: hidden;
}

@media screen and (min-width: 769px) {
  .kv {
    opacity: 0;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
    position: absolute;
  }
}

.kv.active {
  opacity: 1;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
  position: static;
}

@media screen and (max-width: 1500px) {
  .kv {
    max-width: 133.334vw;
    height: 43.134vw;
    overflow: hidden;
  }
}

@media screen and (max-width: 768px) {
  .kv {
    /* background-image: url(../img/kv_sp.png); */
    background-color: #bde4f2;
    width: 100%;
    height: 148.438vw;
  }
}

.kv_cont {
  max-width: 150rem;
  height: 64.7rem;
  margin: auto;
  position: relative;
}

@media screen and (max-width: 1500px) {
  .kv_cont {
    max-width: 100vw;
    height: 43.134vw;
  }
}

@media screen and (max-width: 768px) {
  .kv_cont {
    width: 100%;
    height: 148.438vw;
  }
}

.kv_deco1 {
  width: 87.9rem;
  height: 47.1rem;
  position: absolute;
  top: 0;
  left: -28rem;
}

@media screen and (max-width: 1500px) {
  .kv_deco1 {
    left: -18.666vw;
    width: 58.6vw;
    height: 31.4vw;
  }
}

@media screen and (max-width: 768px) {
  .kv_deco1 {
    width: 95.313vw;
    height: 72.136vw;
    top: 51vw;
    left: -39vw;
  }
}

.kv_deco2 {
  width: 146rem;
  height: 135.3rem;
  position: absolute;
  top: -17rem;
  left: 63rem;
}

@media screen and (max-width: 1500px) {
  .kv_deco2 {
    top: -11.333vw;
    left: 42vw;
    width: 97.334vw;
    height: 90.2vw;
  }
}

@media screen and (max-width: 768px) {
  .kv_deco2 {
    width: 81.511vw;
    height: 67.188vw;
    top: 97vw;
    left: 42vw;
  }
}

.kv_txt {
  width: 50rem;
  position: absolute;
  top: 10rem;
  left: 24rem;
}

@media screen and (max-width: 1500px) {
  .kv_txt {
    width: 26.267vw;
    top: 5vw;
    left: 16vw;
  }
}

@media screen and (max-width: 768px) {
  .kv_txt {
    width: 70vw;
    top: 5vw;
    left: 16vw;
  }
}

.kv_itm {
  width: 45rem;
  position: absolute;
  top: 10rem;
  left: 70rem;
}

.kv_itm::after {
  content: '';
  /* background-image: url(../img/kv_new.png); */
  background-repeat: no-repeat;
  background-size: contain;
  width: 9.2rem;
  height: 5rem;
  position: absolute;
  top: 6rem;
  left: 37.5rem;
}

@media screen and (max-width: 1500px) {
  .kv_itm::after {
    width: 6.134vw;
    height: 3.334vw;
    top: 4vw;
    left: 25vw;
  }
}

@media screen and (max-width: 768px) {
  .kv_itm::after {
    width: 18.75vw;
    height: 10.287vw;
    top: 25vw;
    left: 52vw;
  }
}

@media screen and (max-width: 1500px) {
  .kv_itm {
    width: 28.067vw;
    top: 3.334vw;
    left: 46.667vw;
  }
}

@media screen and (max-width: 768px) {
  .kv_itm {
    width: 70vw;
    top: 40vw;
    left: 19.667vw;
  }
}

.kv_btn {
  width: 13.1rem;
  height: 11.1rem;
  position: absolute;
  top: 50rem;
  right: 31rem;
  display: inline-block;
}

.kv_btn img:hover {
  opacity: .5;
}

@media screen and (max-width: 1500px) {
  .kv_btn {
    width: 8.734vw;
    height: 7.4vw;
    top: 33.334vw;
    right: 20.667vw;
  }
}

@media screen and (max-width: 768px) {
  .kv_btn {
    width: 27.605vw;
    height: 24.219vw;
    top: 110.334vw;
    right: 3.667vw;
  }
}

.anc {
  width: 100%;
  background: #fff;
  padding: 2.5rem 0 1rem 0;
  position: relative;
  z-index: 99;
}

.anc.fixed {
  position: fixed;
  top: 0;
  left: 0;
}

.anc_logo {
  width: 18.3rem;
  margin: auto;
}

.anc_list {
  max-width: 92rem;
  margin: 1rem auto 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media screen and (max-width: 920px) {
  .anc_list {
    max-width: 50rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.anc_list-itm {
  font-size: 1.6rem;
  line-height: 2.419em;
}

@media screen and (max-width: 920px) {
  .anc_list-itm {
    margin-right: 4rem;
  }
}

.anc_list-itm a {
  color: #103675;
  position: relative;
}

.anc_list-itm a::after {
  content: '';
  width: 1.8px;
  height: 15px;
  background: #103675;
  position: absolute;
  top: 1px;
  right: -20px;
}

.anc_list-itm:last-of-type a::after {
  display: none;
}

.concept {
  width: 100%;
}

.concept .inner {
  max-width: 102.4rem;
  margin: auto;
}

@media screen and (max-width: 768px) {
  .concept .inner {
    max-width: 100%;
  }
}

.concept_txt-img1 {
  width: 39.2rem;
  margin: 8.6rem 0 0 18rem;
}

@media screen and (max-width: 768px) {
  .concept_txt-img1 {
    width: 81.12vw;
    margin: 13vw auto 0;
  }
}

.concept_copy {
  width: 29.2rem;
  margin: 0 0 0 46rem;
}

@media screen and (max-width: 768px) {
  .concept_copy {
    width: 76.954vw;
    margin: 10vw auto 0;
    position: relative;
    left: -2vw;
  }
}

.concept_bg {
  background-image: url(../img/concept_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  max-width: 200rem;
  height: 97.1rem;
  margin: -30rem auto 0;
}

@media screen and (max-width: 1024px) {
  .concept_bg {
    max-width: 133.334vw;
    height: 64.734vw;
    margin: -20vw auto 0;
  }
}

@media screen and (max-width: 768px) {
  .concept_bg {
    background-image: url(../img/concept_bg_sp.png);
    max-width: 100%;
    height: 52.084vw;
    margin: -13vw auto 0;
  }
}

.concept_txt-block {
  width: 47rem;
  margin: -26rem 0 0 auto;
}

@media screen and (max-width: 768px) {
  .concept_txt-block {
    width: 70.704vw;
    margin: 0 0 0 9vw;
  }
}

.concept_txt-block .txt1 {
  width: 25.9rem;
}

@media screen and (max-width: 768px) {
  .concept_txt-block .txt1 {
    width: 61.459vw;
  }
}

.concept_txt-block .txt2 {
  font-size: 1.7rem;
  line-height: 1.924em;
  color: #103675;
  margin: 3rem 0 0 0;
}

@media screen and (max-width: 768px) {
  .concept_txt-block .txt2 {
    font-size: 4.167vw;
    line-height: 1.813em;
    margin: 3.5vw 0 0 0;
  }
}

.cap {
  width: 100%;
}

.cap .inner {
  max-width: 102.4rem;
  margin: auto;
}

@media screen and (max-width: 768px) {
  .cap .inner {
    max-width: 100%;
  }
}

.cap_block {
  max-width: 87.3rem;
  margin: 8rem auto 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem;
}

@media screen and (max-width: 768px) {
  .cap_block {
    max-width: 100%;
    margin: 12vw auto 0;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 0;
  }
}

.cap_txt-block {
  width: 54rem;
}

@media screen and (max-width: 768px) {
  .cap_txt-block {
    width: 89.844vw;
  }
}

.cap_txt-block .txt1 {
  width: 28.7rem;
}

@media screen and (max-width: 768px) {
  .cap_txt-block .txt1 {
    width: 67.058vw;
    margin: 0 0 0 4vw;
  }
}

.cap_txt-block .txt2 {
  font-size: 1.7rem;
  line-height: 1.924em;
  color: #103675;
  margin: 3rem 0 0 0;
}

@media screen and (max-width: 768px) {
  .cap_txt-block .txt2 {
    font-size: 4.167vw;
    line-height: 1.813em;
    margin: 4vw 0 0 4vw;
  }
}

@media screen and (max-width: 768px) {
  .cap_img-block {
    width: 89.844vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 6vw auto 0;
  }
}

.cap_img-block .img {
  width: 32rem;
  height: 32rem;
}

@media screen and (max-width: 768px) {
  .cap_img-block .img {
    width: 43.881vw;
    height: 43.881vw;
  }
}

.cap_img-block .img.mt {
  margin: 3rem 0 0 0;
}

@media screen and (max-width: 768px) {
  .cap_img-block .img.mt {
    margin: 0;
  }
}

.nature {
  width: 100%;
}

.nature_bg1 {
  background-image: url(../img/nature_bg2.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  max-width: 200rem;
  height: 119.6rem;
  margin: auto;
}

@media screen and (max-width: 1500px) {
  .nature_bg1 {
    max-width: 133.334vw;
    height: 79.734vw;
  }
}

@media screen and (max-width: 768px) {
  .nature_bg1 {
    background-image: url(../img/nature_bg_sp.png);
    max-width: 100%;
    height: 97.657vw;
    margin: 5vw auto 0;
  }
}

.nature .bg-inner {
  max-width: 150rem;
  height: 119.6rem;
  margin: auto;
  position: relative;
}

@media screen and (max-width: 768px) {
  .nature .bg-inner {
    max-width: 100%;
    height: auto;
  }
}

.nature_lead {
  width: 11.8rem;
  position: absolute;
  top: 5rem;
  left: 103rem;
}

@media screen and (max-width: 1500px) {
  .nature_lead {
    width: 7.867vw;
    top: 3.334vw;
    left: 68.667vw;
  }
}

@media screen and (max-width: 768px) {
  .nature_lead {
    width: 19.011vw;
    top: -10vw;
    left: 67vw;
  }
}

.nature_botl {
  width: 48.3rem;
  position: absolute;
  top: 69rem;
  left: 83rem;
}

@media screen and (max-width: 1500px) {
  .nature_botl {
    width: 32.2vw;
    top: 46vw;
    left: 55.334vw;
  }
}

@media (min-width: 1024px) and (max-width: 1240px) {
  .nature_botl {
    left: 58.8vw;
  }
}

@media screen and (max-width: 768px) {
  .nature_botl {
    width: 62.891vw;
    top: 63vw;
    left: 36vw;
  }
}

.nature_leaf {
  width: 10.3rem;
  position: absolute;
  top: 88rem;
  left: 24rem;
}

@media screen and (max-width: 1500px) {
  .nature_leaf {
    width: 6.867vw;
    top: 58.667vw;
    left: 16vw;
  }
}

@media screen and (max-width: 768px) {
  .nature_leaf {
    width: 18.62vw;
    top: 97vw;
    left: 3vw;
  }
}

.nature_bg2 {
  background-image: url(../img/nature_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  max-width: 200rem;
  height: 121.5rem;
  margin: -15rem auto 0;
  position: relative;
}

@media screen and (max-width: 1500px) {
  .nature_bg2 {
    max-width: 133.334vw;
    height: 81vw;
    margin: -6.666vw auto 0;
  }
}

@media screen and (max-width: 768px) {
  .nature_bg2 {
    background-image: url(../img/nature_bg2_sp.png);
    max-width: 100%;
    height: 168.62vw;
    margin: -13vw auto 0;
  }
}

.nature .inner {
  max-width: 102.4rem;
  margin: auto;
}

@media screen and (max-width: 768px) {
  .nature .inner {
    max-width: 100%;
  }
}

.nature_txt-block {
  width: 54rem;
  margin: -18rem 0 0 14rem;
  position: relative;
  z-index: 5;
}

@media screen and (max-width: 1360px) {
  .nature_txt-block {
    margin: -11rem 0 0 14rem;
  }
}

@media screen and (max-width: 1024px) {
  .nature_txt-block {
    width: 53.334vw;
    margin: -3.333vw 0 0 9.334vw;
  }
}

@media screen and (max-width: 768px) {
  .nature_txt-block {
    width: 80.599vw;
    margin: 33vw 0 0 9.334vw;
  }
}

.nature_txt-block--2 {
  margin: -23rem 0 0 39rem;
}

@media screen and (max-width: 1360px) {
  .nature_txt-block--2 {
    margin: -13rem 0 0 39rem;
  }
}

@media screen and (max-width: 1024px) {
  .nature_txt-block--2 {
    width: 68.267vw;
    margin: -10vw 0 0 26vw;
  }
}

@media screen and (max-width: 768px) {
  .nature_txt-block--2 {
    width: 80.599vw;
    margin: 5vw 0 0 9.334vw;
  }
}

.nature_txt-block .txt1 {
  width: 52.8rem;
}

@media screen and (max-width: 768px) {
  .nature_txt-block .txt1 {
    width: 62.37vw;
  }
}

.nature_txt-block .txt1.txt1-2 {
  width: 53.5rem;
}

@media screen and (max-width: 768px) {
  .nature_txt-block .txt1.txt1-2 {
    width: 63.542vw;
  }
}

.nature_txt-block .txt2 {
  font-size: 1.7rem;
  line-height: 1.924em;
  color: #103675;
  margin: 3rem 0 2rem 0;
}

@media screen and (max-width: 768px) {
  .nature_txt-block .txt2 {
    font-size: 4.167vw;
    line-height: 1.813em;
    margin: 4vw 0 5vw 0;
  }
}

.nature_txt-block .txt3 {
  font-size: 1.2rem;
  color: gray;
  margin: 2rem 0 0 0;
}

@media screen and (max-width: 768px) {
  .nature_txt-block .txt3 {
    font-size: 3.125vw;
    margin: 5vw 0 0 0;
  }
}

.nature_txt-block .detail-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.7rem;
  color: #103675;
  border: 1px solid #103675;
  width: 20.8rem;
  height: 3.6rem;
  position: relative;
}

@media screen and (max-width: 768px) {
  .nature_txt-block .detail-btn {
    font-size: 3.907vw;
    width: 48.829vw;
    height: 8.334vw;
  }
}

.nature_txt-block .detail-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  opacity: 1;
}

.nature_txt-block .detail-btn::after {
  content: '';
  background-image: url(../img/arrow.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 11px;
  height: 18px;
  display: inline-block;
  position: relative;
  left: 1.5rem;
}

.nature_deco {
  width: 14.5rem;
  margin: -10rem 0 0 77rem;
}

@media screen and (max-width: 1024px) {
  .nature_deco {
    margin: -6.666vw 0 0 60vw;
  }
}

@media screen and (max-width: 768px) {
  .nature_deco {
    width: 29.948vw;
    margin: -11.334vw 0 0 66vw;
  }
}

.nature_itm {
  width: 49.1rem;
  margin: -33rem 0 0 -8rem;
}

@media screen and (max-width: 1024px) {
  .nature_itm {
    width: 32.734vw;
    margin: -11.333vw 0 0 2vw;
  }
}

@media screen and (max-width: 768px) {
  .nature_itm {
    width: 62.631vw;
    position: absolute;
    top: 118vw;
    left: 34vw;
  }
}

.reading {
  width: 100%;
}

.reading .inner {
  max-width: 102.5rem;
  margin: auto;
}

@media screen and (max-width: 768px) {
  .reading .inner {
    max-width: 100%;
  }
}

.reading .h2 {
  max-width: 102.5rem;
  margin: 14rem auto 0;
}

@media screen and (max-width: 768px) {
  .reading .h2 {
    max-width: 100%;
    margin: 11vw auto 0;
  }
}

.reading .h2--3 {
  max-width: 102.1rem;
  margin: 11rem auto 0;
}

@media screen and (max-width: 768px) {
  .reading .h2--3 {
    max-width: 100%;
    margin: 14vw auto 0;
  }
}

.reading_image {
  width: 75.7rem;
  margin: 13rem auto 0;
}

@media screen and (max-width: 768px) {
  .reading_image {
    width: 89.844vw;
    margin: 14vw auto 0;
  }
}

.reading .txt1 {
  max-width: 98rem;
  margin: 8rem auto 0;
  font-size: 1.7rem;
  line-height: 2em;
  color: #666666;
  text-align: justify;
  padding: 1rem;
}

@media screen and (max-width: 768px) {
  .reading .txt1 {
    max-width: 79.428vw;
    font-size: 4.167vw;
    line-height: 1.657em;
    margin: 4vw auto 0;
    padding: 0;
  }
}

.reading .txt1--2 {
  max-width: 73rem;
  margin: 3rem auto 0;
}

@media screen and (max-width: 768px) {
  .reading .txt1--2 {
    max-width: 79.428vw;
  }
}

.reading .detail-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 2rem;
  color: #103675;
  border: 1px solid #103675;
  width: 33rem;
  height: 7.5rem;
  margin: 2.5rem auto 0;
  position: relative;
}

@media screen and (max-width: 768px) {
  .reading .detail-btn {
    font-size: 3.907vw;
    width: 78.125vw;
    height: 14.584vw;
    margin: 8vw auto 16vw;
  }
}

.reading .detail-btn--2 {
  width: 39.8rem;
  margin: 12rem auto 0;
}

@media screen and (max-width: 768px) {
  .reading .detail-btn--2 {
    width: 78.125vw;
    height: 14.584vw;
    margin: 14vw auto 0;
  }
}

.reading .detail-btn--3 {
  margin: 4rem auto 0;
}

@media screen and (max-width: 768px) {
  .reading .detail-btn--3 {
    margin: 8vw auto 0;
  }
}

.reading .detail-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  opacity: 1;
}

.reading .detail-btn::after {
  content: '';
  background-image: url(../img/arrow.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 11px;
  height: 18px;
  display: inline-block;
  position: relative;
  left: 1.5rem;
}

@media screen and (max-width: 768px) {
  .reading .detail-btn::after {
    position: absolute;
    left: 72vw;
  }
}

.reading .logo2 {
  width: 73rem;
  margin: 11.4rem auto 0;
}

@media screen and (max-width: 768px) {
  .reading .logo2 {
    width: 79.428vw;
    margin: 14vw auto 0;
  }
}

.movie {
  width: 100%;
}

.movie .inner {
  max-width: 102.5rem;
  margin: auto;
}

@media screen and (max-width: 768px) {
  .movie .inner {
    max-width: 100%;
  }
}

.movie .h2 {
  max-width: 102.5rem;
  margin: 14rem auto 0;
}

@media screen and (max-width: 768px) {
  .movie .h2 {
    max-width: 100%;
    margin: 14vw auto 0;
  }
}

.movie_video {
  width: 73rem;
  height: 44.3rem;
  margin: 12rem auto 0;
  display: block;
}

.movie_video iframe{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

@media screen and (max-width: 768px) {
  .movie_video {
    width: 89.844vw;
    height: 54.428vw;
    margin: 12vw auto 0;
  }
}

.movie .detail-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 2rem;
  color: #103675;
  border: 1px solid #103675;
  width: 33rem;
  height: 7.5rem;
  margin: 5.2rem auto 0;
  position: relative;
}

@media screen and (max-width: 768px) {
  .movie .detail-btn {
    font-size: 3.907vw;
    width: 78.125vw;
    height: 14.584vw;
    margin: 10vw auto 0;
  }
}

.movie .detail-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  opacity: 1;
}

.movie .detail-btn::after {
  content: '';
  background-image: url(../img/arrow.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 11px;
  height: 18px;
  display: inline-block;
  position: relative;
  left: 1.5rem;
}

@media screen and (max-width: 768px) {
  .movie .detail-btn::after {
    position: absolute;
    left: 72vw;
  }
}

.lineup {
  width: 100%;
}

.lineup .inner {
  max-width: 102.5rem;
  margin: auto;
}

@media screen and (max-width: 768px) {
  .lineup .inner {
    max-width: 100%;
  }
}

.lineup .h2 {
  max-width: 102.5rem;
  margin: 12rem auto 0;
}

@media screen and (max-width: 768px) {
  .lineup .h2 {
    max-width: 100%;
    margin: 14vw auto 0;
  }
}

.lineup .detail-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.7rem;
  color: #103675;
  border: 1px solid #103675;
  width: 20.8rem;
  height: 3.6rem;
  margin: 3rem auto 0;
  position: relative;
}

@media screen and (max-width: 768px) {
  .lineup .detail-btn {
    font-size: 3.907vw;
    width: 48.829vw;
    height: 8.334vw;
    margin: 5vw auto 0;
  }
}

.lineup .detail-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  opacity: 1;
}

.lineup .detail-btn::after {
  content: '';
  background-image: url(../img/arrow.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 11px;
  height: 18px;
  display: inline-block;
  position: relative;
  left: 1.5rem;
}

@media screen and (max-width: 768px) {
  .lineup .detail-btn::after {
    left: 2.3rem;
  }
}

.lineup_itm {
  width: 30rem;
  margin: auto;
}

@media screen and (max-width: 768px) {
  .lineup_itm {
    width: 71.094vw;
  }
}

.lineup_itm--2 {
  width: 61.5rem;
}

@media screen and (max-width: 768px) {
  .lineup_itm--2 {
    width: 71.094vw;
  }
}

.lineup_itm--3 {
  width: 58rem;
}

@media screen and (max-width: 768px) {
  .lineup_itm--3 {
    width: 97.657vw;
  }
}

.lineup_itm .h3 {
  width: 29.3rem;
  margin: 11rem auto 0;
}

@media screen and (max-width: 768px) {
  .lineup_itm .h3 {
    width: 57.162vw;
    margin: 14vw auto 0;
  }
}

.lineup_itm .h3--2 {
  width: 29.2rem;
  margin: 13.7rem auto 0;
}

@media screen and (max-width: 768px) {
  .lineup_itm .h3--2 {
    width: 57.162vw;
    margin: 15vw auto 0;
  }
}

.lineup_itm .h3--3 {
  width: 30rem;
  margin: 15rem auto 0;
}

@media screen and (max-width: 768px) {
  .lineup_itm .h3--3 {
    width: 59.506vw;
    margin: 15vw auto 0;
  }
}

.lineup_img1 {
  width: 25.4rem;
  margin: 3rem auto 0;
  position: relative;
  left: -1rem;
}

@media screen and (max-width: 768px) {
  .lineup_img1 {
    width: 71.094vw;
    margin: 2vw auto 0;
  }
}

.lineup_img2 {
  width: 61.5rem;
  margin: 0 auto 0;
}

@media screen and (max-width: 768px) {
  .lineup_img2 {
    width: 71.094vw;
    margin: 5vw auto 0;
  }
}

.lineup_img2 img {
  position: relative;
  left: 1.3vw;
}

@media screen and (max-width: 768px) {
  .lineup_img2 img {
    position: initial;
    left: 0;
  }
}

@media screen and (max-width: 768px) {
  .lineup_img2 .detail-btn {
    position: relative;
    left: -7vw;
  }
}

@media screen and (max-width: 768px) {
  .lineup_img2 div:nth-of-type(2) {
    position: relative;
    left: -0.25vw;
    width: 61vw;
    margin: -6vw auto 0;
  }
}

@media screen and (max-width: 768px) {
  .lineup_img2 div:nth-of-type(3) {
    position: relative;
    right: -7vw;
    width: 50.6vw;
    margin: 5vw auto 0;
  }
}

.lineup_img3 {
  width: 56.2rem;
  margin: 6rem auto 0;
}

@media screen and (max-width: 768px) {
  .lineup_img3 {
    width: 73.178vw;
    margin: 7vw auto 0;
  }
}

.lineup_img4 {
  width: 47.9rem;
  margin: 5rem auto 0;
}

@media screen and (max-width: 768px) {
  .lineup_img4 {
    width: 97.657vw;
    margin: 3vw auto 0;
    position: relative;
    left: 2.5vw;
  }
}

.lineup .txt1 {
  font-size: 1.7rem;
  line-height: 2em;
  margin: 5rem auto 0;
  text-align: center;
  color: #103675;
}

@media screen and (max-width: 768px) {
  .lineup .txt1 {
    font-size: 4.167vw;
    line-height: 1.657em;
    margin: 8vw auto 0;
  }
}

.shop {
  width: 100%;
}

.shop .inner {
  max-width: 102.5rem;
  margin: auto;
}

@media screen and (max-width: 768px) {
  .shop .inner {
    max-width: 100%;
  }
}

.shop .h2 {
  max-width: 102.5rem;
  margin: 10rem auto 0;
}

@media screen and (max-width: 768px) {
  .shop .h2 {
    max-width: 100%;
    margin: 14vw auto 0;
  }
}

.shop .banner {
  max-width: 83rem;
  margin: 13rem auto 0;
  display: block;
}

@media screen and (max-width: 768px) {
  .shop .banner {
    max-width: 89.844vw;
    margin: 14vw auto 0;
  }
}

.shop .link-box {
  max-width: 80.3rem;
  margin: 5.8rem auto 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (max-width: 768px) {
  .shop .link-box {
    max-width: 86.849vw;
    margin: 6vw auto 0;
  }
}

.shop .link-box_itm {
  width: 19rem;
  display: block;
}

@media screen and (max-width: 768px) {
  .shop .link-box_itm {
    width: 20.443vw;
  }
}

.shop .txt1 {
  max-width: 84rem;
  font-size: 1.4rem;
  line-height: 1.5em;
  margin: 2rem auto 0;
  text-align: justify;
  color: #666666;
  position: relative;
  left: 2rem;
}

@media screen and (max-width: 850px) {
  .shop .txt1 {
    position: static;
    padding: 1rem;
  }
}

@media screen and (max-width: 768px) {
  .shop .txt1 {
    max-width: 79.428vw;
    font-size: 3.386vw;
    line-height: 1.657em;
    padding: 0;
    -webkit-font-feature-settings: "pwid";
            font-feature-settings: "pwid";
  }
}

.shop .about-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 2rem;
  color: #fff;
  background: #00a0c9;
  width: 450px;
  height: 7.5rem;
  margin: 5rem auto 0;
  position: relative;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .shop .about-btn {
    font-size: 3.907vw;
    width: 78.125vw;
    height: 14.584vw;
    margin: 10vw auto 0;
  }
}

.shop .about-btn::after {
  content: '';
  background-image: url(../img/arrow_w.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 14px;
  height: 24px;
  display: inline-block;
  position: relative;
  left: 1.5rem;
}

@media screen and (max-width: 768px) {
  .shop .about-btn::after {
    width: 12px;
    height: 21px;
    position: absolute;
    left: 72vw;
  }
}

.shop .shop_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 2rem;
  color: #103675;
  border: 1px solid #103675;
  width: 450px;
  height: 7.5rem;
  margin: 6rem auto 0;
  position: relative;
}

@media screen and (max-width: 768px) {
  .shop .shop_btn {
      font-size: 3.907vw;
      width: 78.125vw;
      height: 14.584vw;
      margin: 8vw auto;
  }
}

.shop .shop_btn:hover {
  background: rgba(0, 0, 0, 0.1);
  opacity: 1;
}

.shop .shop_btn::after {
  content: '';
  background-image: url(../img/arrow.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 11px;
  height: 18px;
  display: inline-block;
  position: relative;
  left: 1.5rem;
}

@media screen and (max-width: 768px) {
  .shop .shop_btn::after {
    position: absolute;
    left: 72vw;
  }
}