/*! Writen  by SCSS */
.breadlist {
  display: none; }

div.wrap {
  padding-top: 0 !important; }

.container {
  padding: 0; }

@media screen and (max-width: 767px) {
  .inner_main .t_cap_bg {
    bottom: calc(20% / 12); } }

.map1 {
  padding-top: 0;
  padding-bottom: clamp(40px, calc(100vw / 12), 100px); }
  .map1 .head_wrap {
    display: grid;
    place-items: center;
    padding: clamp(80px, calc(190vw / 12), 190px) 0 clamp(50px, calc(100vw / 12), 100px);
    background: url("../map/img/bg.jpg") left center/cover no-repeat;
    font-size: clamp(20px, calc(45vw / 12), 45px);
    font-size: clamp(20px, calc(40vw / 12), 40px);
    font-weight: 400;
    line-height: 1;
    margin-bottom: clamp(60px, calc(100vw / 12), 100px);
    color: rgba(89, 87, 87, 0.8); }
    @media screen and (max-width: 480px) {
      .map1 .head_wrap {
        font-size: 28px;
        padding: 95px 0 30px;
        margin-bottom: 30px; } }
    .map1 .head_wrap .head {
      margin-bottom: 0.5em;
      letter-spacing: 0.1em; }
    .map1 .head_wrap .text {
      font-size: 50%; }

.map1 a.g_link,
.map1 a.gallery_link {
  width: 500px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px auto;
  background-image: url("../map/img/arw.png");
  background-position: 95% center;
  background-size: 20px auto;
  background-repeat: no-repeat; }

.map1 a {
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  transition: .5s ease-in-out; }

.map1 a.g_link {
  background-color: rgba(167, 167, 191, 0.3); }
  @media screen and (max-width: 767px) {
    .map1 a.g_link {
      width: calc(90% - 33.8px);
      height: 60px;
      margin: 0 auto 10px auto;
      background-size: 15px;
      background-position: 98% center; } }

.map1 h2 {
  padding: 0 0 50px 0;
  font-size: 32px;
  text-align: center; }

.map1 > figure {
  width: 100%;
  height: auto;
  margin: 0 0 60px 0;
  padding: 0;
  line-height: 0; }
  @media screen and (max-width: 480px) {
    .map1 > figure {
      margin-bottom: 20px; } }

.map1 > figure figcaption {
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 2.5em;
  display: block;
  text-align: right; }

.map1 a.g_link {
  background-color: rgba(167, 167, 191, 0.3); }

.map1 a.g_link span,
.map1 a.gallery_link span {
  display: block;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-align: center;
  position: relative; }

.map1 a.g_link:hover,
.map1 a.gallery_link:hover {
  opacity: 0.7; }

@media screen and (max-width: 767px) {
  .map1 a.g_link span,
  .map1 a.gallery_link span {
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 1.3em; } }
.cbtn_wrap .cbtn_sub li.map {
  padding-bottom: 0; }

.bg1 {
  padding-bottom: clamp(40px, calc(100vw / 12), 100px);
  background: url("../images/common/bg.png") left top/cover no-repeat; }
  .bg1 .root_mov {
    padding-top: 0; }
    @media only screen and (max-width: 768px) {
      .bg1 .root_mov {
        padding-top: 0; } }

.root_mov {
  width: calc(100% - 40px);
  margin-inline: auto;
  padding-top: 70px; }
  @media only screen and (max-width: 768px) {
    .root_mov {
      padding-top: 40px; } }
  @media only screen and (max-width: 480px) {
    .root_mov {
      padding: 40px 20px 0; } }
  .root_mov .page_ttl {
    font-size: clamp(16px, calc(22vw / 16), 22px);
    font-size: clamp(16px, calc(26vw / 12), 26px);
    font-weight: 600;
    font-weight: 400;
    color: #595757;
    letter-spacing: 0.8em;
    letter-spacing: 0.05em;
    margin-bottom: 2em;
    margin-bottom: 1em;
    padding-top: 5em;
    position: relative;
    text-align: center; }
    .root_mov .page_ttl .en {
      font-weight: 500; }
    .root_mov .page_ttl .ja {
      font-weight: 700; }
    .root_mov .page_ttl::after {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      width: 1px;
      height: 4.8em;
      background: #161519; }
    @media only screen and (max-width: 768px) {
      .root_mov .page_ttl {
        margin-bottom: 2em;
        padding-top: 3em; }
        .root_mov .page_ttl::after {
          height: 2.8em; } }
  .root_mov .mov_btn {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1040px;
    gap: 50px calc(80% / 10.4);
    margin-inline: auto; }
    @media only screen and (max-width: 480px) {
      .root_mov .mov_btn {
        gap: 30px 4%;
        gap: 20px 4%; } }
    .root_mov .mov_btn li {
      width: calc(480% / 10.4);
      text-align: center; }
      @media only screen and (max-width: 480px) {
        .root_mov .mov_btn li {
          width: 48%; } }
      .root_mov .mov_btn li.v1 {
        margin-inline: calc(270% / 10.4); }
        @media only screen and (max-width: 480px) {
          .root_mov .mov_btn li.v1 {
            margin-inline: 26%; } }
      .root_mov .mov_btn li.v2 {
        width: calc(800% / 10);
        margin-inline: calc(150% / 10);
        width: calc(800% / 10);
        margin-inline: calc(150% / 10); }
        @media only screen and (max-width: 480px) {
          .root_mov .mov_btn li.v2 {
            width: 100%;
            margin-inline: 0; } }
        @media only screen and (max-width: 480px) {
          .root_mov .mov_btn li.v2 {
            width: 100%;
            margin-inline: 0; } }
      .root_mov .mov_btn li p {
        margin-bottom: 0.4em;
        line-height: 1.4;
        font-size: clamp(12px, calc(18vw / 10.4), 20px);
        font-size: clamp(12px, calc(18vw / 10.4), 18px); }
        @media only screen and (max-width: 480px) {
          .root_mov .mov_btn li p {
            font-size: calc(13vw / 3.9); } }
      .root_mov .mov_btn li .modal_button {
        width: fit-content;
        margin-inline: auto;
        cursor: pointer;
        transition: all 0.3s ease-in-out; }
        .root_mov .mov_btn li .modal_button:hover {
          opacity: 0.6; }
    .root_mov .mov_btn.v1 li:first-child {
      margin-inline: calc(280% / 10.4); }
      @media only screen and (max-width: 480px) {
        .root_mov .mov_btn.v1 li:first-child {
          margin-inline: 26%; } }
    .root_mov .mov_btn.v2 {
      max-width: 950px;
      max-width: 1000px;
      gap: 60px calc(40% / 10);
      gap: 30px calc(40% / 10); }
      @media only screen and (max-width: 480px) {
        .root_mov .mov_btn.v2 {
          gap: 20px 0; } }
      .root_mov .mov_btn.v2 li {
        width: calc(475% / 10); }
        @media only screen and (max-width: 480px) {
          .root_mov .mov_btn.v2 li {
            width: 100%; } }
        .root_mov .mov_btn.v2 li:first-child {
          width: calc(580% / 10);
          width: calc(600% / 10);
          margin-inline: calc(195% / 10); }
          @media only screen and (max-width: 480px) {
            .root_mov .mov_btn.v2 li:first-child {
              width: 100%;
              margin-inline: 0; } }
          .root_mov .mov_btn.v2 li:first-child .modal_button {
            width: 100%; }
            .root_mov .mov_btn.v2 li:first-child .modal_button img {
              width: 100%; }
  .root_mov .cap_c {
    text-align: center;
    font-size: 14px;
    margin-top: 5px; }
    @media only screen and (max-width: 480px) {
      .root_mov .cap_c {
        font-size: 12px; } }

.modal_cont {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999; }
  body.modal_open .modal_cont {
    opacity: 1;
    pointer-events: all; }
  .modal_cont .modal {
    position: absolute;
    inset: 0;
    max-width: 1600px;
    width: 96%;
    height: 100dvh;
    margin-inline: auto;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out; }
    @media only screen and (max-width: 480px) {
      .modal_cont .modal {
        width: 100%; } }
    .modal_cont .modal.active {
      opacity: 1;
      pointer-events: all; }
    .modal_cont .modal .modal_box {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center; }
      @media only screen and (max-width: 480px) {
        .modal_cont .modal .modal_box {
          align-items: flex-start;
          margin-top: 45%; } }
    .modal_cont .modal video {
      width: 100%;
      height: auto;
      line-height: 0; }
  .modal_cont .modal_close {
    position: fixed;
    top: 10px;
    right: 10px;
    cursor: pointer;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: flex-end;
    border: 1px solid #fff;
    background-color: rgba(0, 0, 0, 0.2); }
    @media only screen and (max-width: 480px) {
      .modal_cont .modal_close {
        width: 50px;
        height: 50px; } }
    .modal_cont .modal_close::before, .modal_cont .modal_close::after {
      position: absolute;
      top: 40%;
      left: 30%;
      width: 40%;
      height: 2px;
      background-color: #FFF;
      content: ""; }
      @media only screen and (max-width: 480px) {
        .modal_cont .modal_close::before, .modal_cont .modal_close::after {
          top: 35%; } }
    .modal_cont .modal_close::before {
      transform: rotate(45deg); }
    .modal_cont .modal_close::after {
      transform: rotate(-45deg); }
    .modal_cont .modal_close .close_text {
      text-align: center;
      font-size: 12px;
      margin-bottom: 2px;
      width: 100%;
      color: #fff; }
      @media only screen and (max-width: 480px) {
        .modal_cont .modal_close .close_text {
          font-size: 10px;
          margin-bottom: 1px; } }

/*# sourceMappingURL=map.css.map */
