/*! Writen  by SCSS */
.contarea {
  overflow: hidden; }

.sec1 {
  padding-top: 80px; }
  @media screen and (max-width: 480px) {
    .sec1 {
      padding-top: 50px; } }
  .sec1 .img {
    max-width: 1315px; }
    @media screen and (max-width: 480px) {
      .sec1 .img {
        width: 100%; } }
  @media screen and (max-width: 480px) {
    .sec1 .read {
      margin-inline: -10px; } }

.sec2 .swipe1 img {
  width: 100%; }
  @media screen and (max-width: 480px) {
    .sec2 .swipe1 img {
      width: 700px;
      max-width: 700px; } }

.sec3 {
  position: relative; }
  .sec3 .spacer {
    height: 20vh; }
  @media screen and (max-width: 480px) {
    .sec3 .img {
      width: 100%;
      height: 100vh;
      height: 70vh; }
      .sec3 .img img {
        height: 100%;
        object-fit: cover;
        object-position: 70%; } }
  .sec3 .img.p-view::after {
    opacity: .55;
    opacity: .4; }
  .sec3 .img .cap {
    z-index: 1; }
  .sec3 .img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    transition: opacity 0.5s ease-in-out 0.5s; }
  .sec3 .img img {
    width: 100%; }
  .sec3 .text_wrap {
    position: absolute;
    inset: 0;
    width: fit-content;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: auto;
    margin-right: 5%;
    transition-delay: 1s; }
    @media screen and (max-width: 480px) {
      .sec3 .text_wrap {
        width: fit-content;
        margin-left: auto;
        margin-right: auto; } }
    .sec3 .text_wrap p {
      color: #fff !important; }
    @media screen and (min-width: 960px) {
      .sec3 .text_wrap .sec_ttl {
        font-size: clamp(14px, 2.334vw, 28px); } }
    .sec3 .text_wrap .read {
      line-height: 2.75; }
      @media screen and (min-width: 960px) {
        .sec3 .text_wrap .read {
          font-size: clamp(10px, 1.5vw, 18px); } }
      @media screen and (max-width: 480px) {
        .sec3 .text_wrap .read {
          line-height: 2.5; } }

.sec4 .sec_ttl_en {
  font-size: 34px;
  color: #b49a2c; }
  @media screen and (max-width: 480px) {
    .sec4 .sec_ttl_en {
      font-size: calc(20vw / 3.9); } }
@media screen and (max-width: 480px) {
  .sec4 .view_wrap .cap {
    display: none; } }
.sec4 div.pano {
  position: relative; }
  .sec4 div.pano .move_btn {
    width: 80px;
    width: 65px;
    position: absolute;
    bottom: 0; }
    @media screen and (max-width: 480px) {
      .sec4 div.pano .move_btn {
        width: 50px;
        width: 40px; } }
    .sec4 div.pano .move_btn.move_left_btn {
      right: calc(50% + 5px); }
      @media screen and (max-width: 480px) {
        .sec4 div.pano .move_btn.move_left_btn {
          right: calc(50% + 2px); } }
    .sec4 div.pano .move_btn.move_right_btn {
      left: calc(50% + 5px); }
      @media screen and (max-width: 480px) {
        .sec4 div.pano .move_btn.move_right_btn {
          left: calc(50% + 2px); } }
.sec4 div.mContents {
  width: 100%;
  height: 446px;
  height: 380px;
  height: 280px;
  position: relative; }
  @media screen and (max-width: 480px) {
    .sec4 div.mContents {
      height: 360px;
      height: 200px;
      height: 140px; } }
@media screen and (max-width: 480px) {
  .sec4 .pano_image {
    width: 100%;
    height: 360px;
    height: 200px;
    height: 140px;
    position: relative;
    text-align: center;
    overflow: auto; } }
.sec4 .pano_image img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: none;
  height: 100%; }
@media screen and (max-width: 480px) {
  .sec4 .view_swipe,
  .sec4 .view_swipe02 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 1;
    animation: horizontal 1s ease-in-out infinite alternate; }
    .sec4 .view_swipe img,
    .sec4 .view_swipe02 img {
      display: block;
      max-width: 184px;
      margin: 0 auto; } }
@keyframes horizontal {
  0% {
    transform: translate(-15%, 0); }
  100% {
    transform: translate(15%, 0); } }

/*# sourceMappingURL=design.css.map */