@use '../global' as *;

.access-flow {
  margin-top: rem(52);

  &__list {
    display: flex;
    justify-content: space-between;
    column-gap: rem(30);
    position: relative;

    @include mq-down(sm) {
      flex-wrap: wrap;
      column-gap: rem(10);
      padding-bottom: rem(50);

      &::after {
        content: '';
        @include trans_x;
        bottom: 0;
        background-image: radial-gradient(circle, #1d2a3a 0.5px, transparent 0.5px);
        background-position: left top;
        background-repeat: repeat-y;
        background-size: 1px 6px;
        flex: 1 1 auto;
        width: 1px;
        height: rem(50);
      }
    }
  }

  &__item {
    flex: 1 1 auto;

    @include mq-down(sm) {
      flex: 0 0 47.5%;

      .access-flow__line {
        display: none;
      }

      .access-flow__time {
        padding: rem(15) 0;
      }
    }
  }

  &__route {
  }

  &__from {
    border: 1px solid $key_blue;
    border-radius: rem(10);
    color: $key_blue;
    text-align: center;
    padding: rem(18) rem(24);
    font-size: rem(20);
    font-weight: 500;
    line-height: 1.25;

    &.--band {
      background-color: $key_blue;
      color: #fff;
    }
  }

  &__to {
    position: relative;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
  }

  &__line {
    background-image: radial-gradient(circle, #1d2a3a 0.5px, transparent 0.5px);
    background-position: left top;
    background-repeat: repeat-y;
    background-size: 1px 6px;
    flex: 1 1 auto;
    width: 1px;
    height: rem(27);
  }

  &__col {
    display: flex;
    justify-content: center;

    @include mq-down(sm) {
      display: block;
    }
  }

  &__time {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  &__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;

    &.--fly {
      width: rem(16);
      margin-right: rem(7);
    }

    &.--car {
      width: rem(30);
      margin-right: rem(7);
    }

    &.--bus {
      width: rem(31);
      margin-right: rem(9);
    }
  }

  &__duration {
    flex: 1 1 auto;
    font-weight: 500;
    font-size: rem(16);
  }
}

.access_map {
  background-color: #f6f6f6;
  padding: fz(72) 0;

  @include mq-down(sm) {
    padding: fz(30) 0;
  }

  &__cont {
    height: fz(595);
    border: fz(10) solid #fff;

    @include mq-down(sm) {
      height: fz(270);
    }
  }
}

.access-route {
  margin-top: rem(40);

  &__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: rem(24) rem(16);
    list-style: none;
    padding: 0;
    margin: 0;

    @include mq-down(sm) {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  &__item {
  }

  &__img {
    width: 100%;
    margin: 0;

    img {
      width: 100%;
      height: auto;
      display: block;
      aspect-ratio: 4 / 3;
      object-fit: cover;
    }
  }

  &__text {
    margin-top: rem(8);
    font-size: rem(14);
    line-height: 1.65;
  }
}

.access-btm-bnr {
  margin-top: rem(135);

  @include mq-down(sm) {
    margin-top: rem(70);
  }
}

.about {
  position: relative;
  z-index: 3;
  margin-top: rem(-30);

  &__top {
    gap: rem(152);
    margin-bottom: rem(95);

    // 上部エリア
    @include mq-down(sm) {
      flex-flow: column-reverse;
      gap: rem(40);
      margin-bottom: rem(55);
    }

    &-map {
      flex: 1 1 auto;
    }

    &-info {
      flex: 0 0 rem(448);

      @include mq-down(sm) {
        flex-basis: auto;
      }
    }

    &-ttl {
      margin-bottom: rem(15.5);
    }

    &-desc {
      font-size: rem(20);
      font-weight: 500;

      @include mq-down(sm) {
        font-size: rem(16);
      }
    }
  }

  &__middle {
    max-width: 100%;
    width: rem(928);
    margin: 0 auto rem(80);

    @include mq-down(sm) {
      margin-bottom: rem(50);
    }

    &-ttl {
      margin-bottom: rem(15.5);
    }

    &-desc {
    }
  }

  &__images {
    display: grid;
    grid-template-columns: repeat(3, rem(360));
    gap: rem(40);
    margin-bottom: rem(67);

    @include mq-down(sm) {
      grid-template-columns: 1fr;
      gap: rem(20);
    }

    &-item {
    }
  }

  &__slides {
    margin-bottom: rem(112);

    @include mq-down(sm) {
      margin-bottom: rem(60);
    }
  }

  &__dates {
    margin-bottom: rem(234);

    @include mq-down(sm) {
      margin-bottom: rem(90);
    }

    &-ttl {
      margin-bottom: rem(27);
    }

    &-info {
      margin-bottom: rem(119);
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: 1em;
    }

    &-dt {
      font-weight: 600;
    }

    &-dd {
      // 定義リストの説明
    }
  }
}

.information {
  position: relative;
  z-index: 3;
  //margin-top: rem(-90);

  &__points {
    display: flex;
    justify-content: space-between;
    margin-bottom: rem(85);

    @include mq-down(sm) {
      display: block;
      margin-bottom: rem(45);
    }

    &-item {
      flex: 0 0 31%;
      border-radius: rem(20);
      border: 2px solid $key_blue;
      background-color: #f6faff;
      position: relative;
      padding: rem(35) rem(30);

      @include mq-down(sm) {
        &:not(:last-of-type) {
          margin-bottom: rem(40);
        }
      }
    }

    &-num {
      background-color: $key_blue;
      @include trans_x;
      border-radius: rem(90);
      text-align: center;
      font-size: rem(19);
      font-weight: 800;
      top: rem(-21);
      color: #fff;
      padding: rem(5) rem(24);
    }

    &-catch {
      text-align: center;
      display: flex;
      align-items: center;
      flex-flow: column;
      color: $key_blue;
      margin-bottom: rem(23);
      line-height: 1.2;
    }

    &-sub {
      font-size: rem(18);
    }

    &-main {
      font-size: rem(31);
    }

    &-desc {
      font-size: rem(17);
      font-weight: 500;
      line-height: 1.54;
    }
  }

  &__block {
    &:not(:last-of-type) {
      margin-bottom: rem(121);

      @include mq-down(sm) {
        margin-bottom: rem(57);
      }
    }
  }

  &__heading {
    margin-bottom: rem(45);

    @include mq-down(sm) {
      margin-bottom: rem(27);
    }
  }

  &__col {
    display: flex;
    gap: rem(77);

    @include mq-down(sm) {
      flex-flow: column-reverse;
      gap: rem(25);
    }
  }

  &__pic-col02 {
    display: flex;
    flex: 1 1 auto;
    justify-content: space-between;
    height: rem(241);
    gap: rem(4);

    @include mq-down(sm) {
      width: 100%;
      height: rem(170);
      flex: 0 0 auto;
    }
  }

  &__pic {
    border-radius: rem(10);
    height: 100%;
    overflow: hidden;
    flex: 1 1 auto;
  }

  &__pic-wide {
    flex: 0 0 60%;
  }

  &__pic-sm {
    flex: 1 1 auto;
  }

  &__info {
    flex: 0 0 rem(448);

    @include mq-down(sm) {
      flex-basis: auto;
    }
  }

  &__info-ttl {
    margin-bottom: rem(10);
  }

  &__info-data {
  }

  &__sub-blocks {
    margin-top: rem(60);
    background-color: #f9f9f9;
    display: flex;
    padding: rem(34) 0;

    @include mq-down(sm) {
      display: block;
      padding: 0;
    }
  }

  &__sub-block {
    padding: 0 rem(47);
    display: flex;
    align-items: center;
    gap: rem(26);

    @include mq-up(sm) {
      flex: 0 0 50%;
    }

    @include mq-down(sm) {
      padding: rem(25) rem(30);
    }

    &:not(:last-of-type) {
      @include mq-up(sm) {
        border-right: 2px dotted #b6b6b6;
      }

      @include mq-down(sm) {
        border-bottom: 2px dotted #b6b6b6;
      }
    }
  }

  &__sub-block-pic {
    height: rem(102);
  }

  &__sub-block-info {
    flex: 0 0 60%;
  }

  &__sub-block-dt {
    font-size: rem(22);
    margin-bottom: rem(11);

    @include mq-down(sm) {
      font-size: rem(18);
      margin-bottom: rem(6);

      &::before {
        position: relative;
        top: rem(2.5);
      }
    }
  }

  &__sub-block-dd {
    font-size: rem(18);
    line-height: 1.5;
    font-weight: 500;

    @include mq-down(sm) {
      font-size: rem(15);
    }
  }

  &__slides {
    margin-top: rem(37);
  }

  &__coldesc {
    display: flex;
    justify-content: space-between;
    gap: rem(40);
    @include mq-down(sm) {
      flex-flow: column;
      gap: rem(20);
    }

    &:nth-of-type(even) {
      @include mq-up(sm) {
        flex-flow: row-reverse;
      }
    }

    &:not(:last-of-type) {
      margin-bottom: rem(94);
      @include mq-down(sm) {
        margin-bottom: rem(49);
      }
    }

    &-img {
      flex: 0 0 45%;
      border-radius: rem(6);
      overflow: hidden;
    }

    &-texts {
      flex: 1 1 auto;
    }
  }

  &__l-img {
    margin-bottom: rem(20);
  }
}

.information-section {
  padding-block: rem(94);
  @include mq-down(sm) {
    padding-block: rem(40);
  }
}

.information-wide-image {
  margin-top: rem(121);
  border-radius: rem(12);
  overflow: hidden;
  @include mq-down(sm) {
    margin-top: rem(60);
  }
}

.information-points {
  margin-top: rem(65);
  margin-bottom: rem(192);
  @include mq-down(sm) {
    margin-block: rem(32) rem(55);
  }
  &__item {
    border: 2px solid $key_blue;
    border-radius: rem(20);
    background-color: #f6faff;
    position: relative;
    padding: rem(45) rem(39);
    @include mq-down(sm) {
      padding: rem(45) rem(22) rem(27);
    }
    &:not(:last-of-type) {
      margin-bottom: rem(55);
      @include mq-down(sm) {
        margin-bottom: rem(38);
      }
    }
  }

  &__num {
    @include trans_x;
    background-color: $key_blue;
    color: #fff;
    top: rem(-20);
    border-radius: rem(9999);
    padding: rem(4) rem(20);
    font-size: rem(19);
    font-weight: 900;
    @include mq-down(sm) {
      top: rem(-17);
      font-size: rem(16);
    }
  }

  &__body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    @include mq-down(sm) {
      flex-direction: column;
      gap: rem(17);
    }
  }

  &__ttl {
    flex: 0 0 30%;
    color: $key_blue;
    text-align: center;
    font-size: rem(30);
    line-height: 1.25;
    @include mq-down(sm) {
      font-size: rem(25);
    }
  }

  &__col {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    gap: rem(57);
    @include mq-down(xl) {
      gap: rem(25);
    }
    @include mq-down(sm) {
      flex-direction: column;
      gap: rem(20);
    }
  }

  &__desc {
    flex: 1 1 auto;
  }

  &__photo {
    aspect-ratio: 1/1;
    flex: 0 0 rem(154);
    overflow: hidden;
    border-radius: rem(6);
    @include mq-down(sm) {
      flex-basis: auto;
      width: rem(140);
    }
  }

  &.--color-green {
    margin-bottom: rem(65);
    @include mq-down(sm) {
      margin-bottom: rem(35);
    }
    .information-points__item {
      border-color: #0faf8f;
      background-color: #f6fcfc;
    }

    .information-points__num {
      background-color: #0faf8f;
    }

    .information-points__ttl {
      color: #0faf8f;
    }
  }
}

.information-points-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: rem(67);
  margin-block: rem(31) rem(66);
  @include mq-down(xl) {
    gap: rem(30);
  }
  @include mq-down(sm) {
    grid-template-columns: 1fr;
    gap: rem(25);
    margin-block: rem(20) rem(38);
  }
  &__item {
    border: 2px solid $key_blue;
    border-radius: rem(16);
    padding: rem(23) rem(20);
  }

  &__head {
    display: flex;
    align-items: center;
    gap: rem(17);
    margin-bottom: rem(12);
    @include mq-down(sm) {
      gap: rem(11);
    }
  }

  &__num {
    aspect-ratio: 1/1;
    flex: 0 0 rem(54);
    border-radius: 50%;
    background-color: $key_blue;
    color: #fff;
    font-size: rem(19);
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    @include mq-down(sm) {
      flex-basis: rem(41);
      font-size: rem(17);
    }
  }

  &__ttl {
    color: $key_blue;
    font-size: rem(26);
    @include mq-down(sm) {
      font-size: rem(20);
    }
    &-sub {
      font-size: 0.7em;
    }
  }

  &__desc {
    font-size: rem(20);
    @include mq-down(sm) {
      font-size: rem(16);
    }
  }
}

.information-flow-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: rem(46);
  margin-bottom: rem(76);
  @include mq-down(sm) {
    grid-template-columns: 1fr;
    gap: rem(55);
    margin-bottom: rem(40);
  }
  &__item {
    position: relative;
    &:not(:last-of-type) {
      @include mq-up(sm) {
        .information-flow-col__img {
          &::after {
            content: '';
            @include trans_y;
            right: rem(-30);
            width: rem(15);
            height: rem(30);
            background: url(../../abashiri/assets/images/information/flow_arw.svg) no-repeat;
            background-size: 100% auto;
          }
        }
      }

      @include mq-down(sm) {
        &::after {
          content: '';
          @include trans_x;
          bottom: rem(-30);
          width: rem(30);
          height: rem(15);
          background: url(../../abashiri/assets/images/information/flow_arw_sp.svg) no-repeat;
          background-size: 100% auto;
        }
      }
    }
  }

  &__figure {
    display: flex;
    flex-direction: column;
    gap: rem(15);
    @include mq-down(sm) {
      gap: rem(10);
    }
  }

  &__img {
    position: relative;
    aspect-ratio: 357/265;
  }

  &__caption {
    font-size: rem(20);
    @include mq-down(sm) {
      font-size: rem(16);
    }
  }
}

.information-catchs {
  display: flex;
  //flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: rem(10);
  margin-bottom: rem(72);
  flex-wrap: wrap;
  @include mq-down(sm) {
    margin-bottom: rem(45);
  }
  &__lead {
    font-size: rem(20);
    font-weight: 900;
    @include mq-down(sm) {
      font-size: rem(18);
    }
  }

  &__logo {
  }
}

.sightseeing-map {
  padding: rem(80) 0;

  @include mq-down(sm) {
    padding: rem(55) 0;
  }

  &__ttl {
    margin-bottom: rem(25);
  }

  &__map {
    aspect-ratio: 1/0.5;

    @include mq-down(sm) {
      aspect-ratio: 1/1;
    }
  }

  &__cap {
    color: $key_blue;
  }
}

.sightseeing-spot {
  padding: rem(40) 0 rem(120);

  @include mq-down(sm) {
    padding: rem(25) 0 rem(70);
  }

  &__ttl {
    margin-bottom: rem(30);
  }

  &__contents {
  }

  &__sub-ttl {
    display: flex;
    align-items: center;
    gap: rem(12);
    margin-bottom: rem(27);

    @include mq-down(sm) {
      font-size: rem(18);
      line-height: 1.25;
    }

    &-icon {
      display: flex;
      align-items: center;
      flex: 0 0 auto;
      width: rem(30);
    }

    &-text {
    }
  }

  &__lists {
    display: grid;
    grid-template-columns: repeat(2, 47%);
    justify-content: space-between;
    row-gap: rem(45);

    @include mq-down(sm) {
      grid-template-columns: 1fr;
    }

    &-item {
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      gap: rem(20);
    }

    &-head {
      flex: 1 1 75%;
      gap: rem(15);
      display: flex;
      flex-flow: column;
    }

    &-main {
      flex: 1 1 auto;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      gap: rem(15);
    }

    &-thumb {
      aspect-ratio: 1/0.4;
      border-radius: rem(11);
      overflow: hidden;
    }

    &-texts {
    }

    &-ttl {
      font-size: 1.2rem;
      padding-bottom: rem(6);
      margin-bottom: rem(12);
      border-bottom: 4px dotted #c1c1c1;
      color: $key_blue;
    }

    &-desc {
      @include mq-down(sm) {
        font-size: 0.9rem;
      }
    }

    &-tb {
      //margin-bottom: rem(15);
      flex: 1 1 auto;
    }

    &-row {
      display: flex;

      &:not(:last-of-type) {
        margin-bottom: rem(2);
      }

      &-label {
        flex: 0 0 15%;
        text-align: center;
        background-color: $key_blue;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;

        @include mq-down(sm) {
          flex-basis: 23%;
          font-size: 0.9rem;
        }
      }

      &-data {
        flex: 1 1 auto;
        padding: rem(5) rem(18);
        font-size: 0.9rem;
        background-color: $bg_sky_blue;
        display: flex;
        align-items: center;
        line-height: 1.2;
      }
    }

    &-btm {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex: 0 0 auto;
    }

    &-access {
      display: flex;
      align-items: center;
      gap: rem(10);

      @include mq-down(sm) {
        font-size: 0.88rem;
      }

      &-icon {
        width: rem(30);
      }
    }

    &-links {
      display: flex;
      align-items: center;
      gap: rem(12);

      &-item {
      }

      &-link {
        display: flex;
        align-items: center;
        gap: rem(10);

        @include mq-down(sm) {
          font-size: 0.88rem;
        }
      }

      &-icon {
        width: rem(20);
      }

      &-text {
      }
    }
  }
}

.privacy-main {
  padding: rem(80) 0 rem(140);

  @include mq-down(sm) {
    padding: rem(40) 0 rem(88);
  }

  &__block {
    &:not(:last-of-type) {
      margin-bottom: rem(50);

      @include mq-down(sm) {
        margin-bottom: rem(30);
      }
    }
  }

  &__ttl {
    margin-bottom: 1.5rem;

    @include mq-down(sm) {
      font-size: 1.28rem;
    }
  }

  &__desc {
    margin-bottom: 1rem;
    font-size: 1rem;
  }

  &__gr {
    &-ttl {
      color: $key_blue;
      margin-bottom: 0.5rem;
      font-size: 1.12rem;
    }
  }

  &__lists {
    margin-bottom: 1rem;

    li {
      list-style-position: inside;
      list-style-type: disc;
    }
  }

  &__nums {
    margin-bottom: 1rem;

    li {
      list-style-type: decimal;
      list-style-position: inside;
    }
  }
}