@charset "UTF-8";
/*! Writen  by SCSS */
figure figcaption {
  font-size: 10px; }

.img101 {
  max-width: none;
  mask: url("../images/access/img_mask.svg") alpha center/cover no-repeat; }
  .img101 .cap {
    text-align: right;
    margin-right: calc(110%/16); }

.slide_txt {
  text-align: center; }
  .slide_txt span {
    font-size: 10px;
    border-bottom: 1px solid #000;
    display: inline-block;
    margin: 0 auto 5px;
    position: relative; }
    .slide_txt span::before {
      content: "▼";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1.2em;
      z-index: 1; }

.sec01 {
  padding: 80px 0 120px; }
  .sec01 .sec_txts {
    margin-bottom: 80px; }
  .sec01 .img102 {
    margin-bottom: 60px; }
    @media screen and (max-width: 480px) {
      .sec01 .img102 {
        margin-bottom: 40px; }
        .sec01 .img102 .sp_slide {
          overflow-x: scroll; }
          .sec01 .img102 .sp_slide img {
            max-width: 480px;
            width: 480px; } }
    .sec01 .img102 .cap {
      text-align: right; }
  .sec01 .box01 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 15px; }
    @media screen and (max-width: 1000px) {
      .sec01 .box01 {
        grid-gap: 50px 0; } }
    .sec01 .box01 .item {
      width: calc(280%/12.8); }
      @media screen and (max-width: 1000px) {
        .sec01 .box01 .item {
          width: 48%; } }
    .sec01 .box01 .img_cap {
      margin-bottom: 35px; }
      @media screen and (max-width: 1000px) {
        .sec01 .box01 .img_cap {
          margin-bottom: 15px; } }
    .sec01 .box01 .txts {
      width: fit-content;
      margin-left: auto;
      margin-right: auto;
      text-align: center; }
      .sec01 .box01 .txts .txt1 {
        font-size: clamp(20px, 2.5vw, 32px);
        line-height: 1;
        letter-spacing: 0.15em;
        margin-bottom: 10px; }
        @media screen and (max-width: 1000px) {
          .sec01 .box01 .txts .txt1 {
            font-size: clamp(20px, 3.2vw, 32px);
            margin-bottom: 0.3em; } }
        .sec01 .box01 .txts .txt1 .small1 {
          display: block;
          line-height: 1;
          font-size: clamp(10px, 1.016vw, 13px);
          line-height: 1;
          margin-bottom: 0.5em;
          letter-spacing: 0.1em; }
          @media screen and (max-width: 1000px) {
            .sec01 .box01 .txts .txt1 .small1 {
              font-size: clamp(12px, 1.3vw, 13px); } }
        .sec01 .box01 .txts .txt1 .small2 {
          font-size: clamp(16px, 1.875vw, 24px);
          line-height: 1; }
          @media screen and (max-width: 1000px) {
            .sec01 .box01 .txts .txt1 .small2 {
              font-size: clamp(16px, 2.4vw, 24px); } }
      .sec01 .box01 .txts .txt2 {
        font-size: clamp(16px, 1.875vw, 24px);
        line-height: 1;
        letter-spacing: 0.15em; }
        @media screen and (max-width: 1000px) {
          .sec01 .box01 .txts .txt2 {
            font-size: clamp(16px, 2.4vw, 24px); } }
        .sec01 .box01 .txts .txt2 .big {
          font-size: clamp(26px, 3.438vw, 44px); }
          @media screen and (max-width: 1000px) {
            .sec01 .box01 .txts .txt2 .big {
              font-size: clamp(26px, 4.4vw, 44px); } }
      .sec01 .box01 .txts .cap_r {
        margin-top: 5px; }

.sec02 .sec_txts {
  max-width: 480px;
  margin: 0 auto; }
  .sec02 .sec_txts .cap_r {
    margin-top: 0.8em; }
.sec02 .box02 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 945px;
  margin: 0 auto 100px; }
  @media screen and (max-width: 768px) {
    .sec02 .box02 {
      margin-bottom: 0;
      flex-direction: column-reverse; } }
  .sec02 .box02 .l_cnt {
    width: calc(584%/9.45); }
    @media screen and (max-width: 768px) {
      .sec02 .box02 .l_cnt {
        width: auto; } }
  .sec02 .box02 .r_cnt {
    width: calc(280%/9.45); }
    @media screen and (max-width: 1000px) {
      .sec02 .box02 .r_cnt {
        width: calc(320%/9.45); } }
    @media screen and (max-width: 768px) {
      .sec02 .box02 .r_cnt {
        width: auto;
        max-width: 280px;
        margin: 0 auto 15px; } }
    .sec02 .box02 .r_cnt .img108 {
      margin-bottom: 35px; }
      @media screen and (max-width: 1000px) {
        .sec02 .box02 .r_cnt .img108 {
          margin-bottom: calc(18%/3.2); } }
  .sec02 .box02 .txts {
    text-align: center; }
    .sec02 .box02 .txts .txt1 {
      font-size: clamp(20px, 2.5vw, 32px);
      line-height: 1;
      letter-spacing: 0.15em;
      margin-bottom: 10px; }
      @media screen and (max-width: 1000px) {
        .sec02 .box02 .txts .txt1 {
          font-size: clamp(20px, 3.2vw, 32px);
          margin-bottom: 0.3em; } }
      .sec02 .box02 .txts .txt1 .small1 {
        line-height: 1;
        font-size: clamp(12px, 1.407vw, 18px);
        line-height: 1;
        margin-bottom: 0.5em;
        letter-spacing: 0.1em; }
        @media screen and (max-width: 1000px) {
          .sec02 .box02 .txts .txt1 .small1 {
            font-size: clamp(12px, 1.8vw, 18px); } }
      .sec02 .box02 .txts .txt1 .small2 {
        font-size: clamp(16px, 1.875vw, 24px);
        line-height: 1; }
        @media screen and (max-width: 1000px) {
          .sec02 .box02 .txts .txt1 .small2 {
            font-size: clamp(16px, 2.4vw, 24px); } }
    .sec02 .box02 .txts .txt2 {
      font-size: clamp(16px, 1.875vw, 24px);
      line-height: 1;
      letter-spacing: 0.15em;
      margin-bottom: 10px; }
      @media screen and (max-width: 1000px) {
        .sec02 .box02 .txts .txt2 {
          font-size: clamp(16px, 2.4vw, 24px);
          margin-bottom: 0.3em; } }
      .sec02 .box02 .txts .txt2 .big {
        font-size: clamp(26px, 3.438vw, 44px); }
        @media screen and (max-width: 1000px) {
          .sec02 .box02 .txts .txt2 .big {
            font-size: clamp(26px, 4.4vw, 44px); } }
    .sec02 .box02 .txts .txt3 {
      font-size: clamp(13px, 1.25vw, 16px);
      line-height: 1.68;
      letter-spacing: 0.25em; }
      @media screen and (max-width: 1000px) {
        .sec02 .box02 .txts .txt3 {
          font-size: clamp(13px, 1.6vw, 16px); } }

.kuusatu {
  position: relative;
  overflow: hidden; }
  .kuusatu.p-view .bg_img {
    clip-path: inset(0 0 0 0); }
  .kuusatu.p-view .img101_hasira_kirakira {
    opacity: 1; }
    .kuusatu.p-view .img101_hasira_kirakira img {
      opacity: 1; }
  .kuusatu .plot {
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 1; }
  .kuusatu .bg_img {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    clip-path: inset(100% 0 0 0); }
  .kuusatu .img101_line1 {
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 1;
    background-image: url("../images/access/eki01.png");
    transition: 1s clip-path ease-in-out 1.5s; }
  .kuusatu .img101_line2 {
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 1;
    background-image: url("../images/access/eki02.png");
    transition: 1s clip-path ease-in-out 1.5s; }
  .kuusatu .img101_hasira {
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 1;
    background-image: url("../images/access/hikari.png");
    transition: 3s clip-path ease-in-out 1.4s; }
  .kuusatu .img101_hasira_kirakira {
    overflow: hidden;
    position: absolute;
    bottom: calc(423%/8.99);
    left: calc(931%/16);
    width: calc(381%/16);
    height: calc(477%/8.99);
    mix-blend-mode: screen;
    z-index: 1;
    opacity: 0;
    transition: 3s opacity ease-in-out 2.5s; }
    .kuusatu .img101_hasira_kirakira p {
      padding-top: calc(25%/8.99);
      position: relative;
      overflow: hidden;
      height: 100%;
      width: 100%; }
    .kuusatu .img101_hasira_kirakira img {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0;
      transition-delay: 1s; }
      .kuusatu .img101_hasira_kirakira img.kira {
        animation: hikari 10s linear 0s infinite both; }
      .kuusatu .img101_hasira_kirakira img.kira01 {
        animation-delay: -2.5s !important;
        animation-duration: 4.5s !important; }
      .kuusatu .img101_hasira_kirakira img.kira02 {
        animation-delay: -3s !important;
        animation-duration: 6.5s !important; }
      .kuusatu .img101_hasira_kirakira img.kira03 {
        animation-delay: -3.5s !important;
        animation-duration: 8.5s !important; }
      .kuusatu .img101_hasira_kirakira img.kira04 {
        animation-delay: -4s !important;
        animation-duration: 10.5s !important; }
      .kuusatu .img101_hasira_kirakira img.kira05 {
        animation-delay: -4.5s !important;
        animation-duration: 12.5s !important; }
      .kuusatu .img101_hasira_kirakira img.kira06 {
        animation-delay: -5s !important;
        animation-duration: 14.5s !important; }

@keyframes hikari {
  0% {
    opacity: 0;
    transform: translateY(0%); }
  30% {
    opacity: 1; }
  75% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: translateY(-50%); } }

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