@charset "UTF-8";
/* 国・都市ページ用CSS */
.sightseeing-content {
  /* MV */
  .mv-container {
    margin-bottom: calc(-1 * var(--ui-space-XL));
    > .container {
      > .cmp-container {
        margin-left: calc(var(--ui-layout-side-gap-sm) * -1);
        margin-right: calc(var(--ui-layout-side-gap-sm) * -1);
        padding-left: calc(var(--ui-layout-side-gap-sm));
        padding-right: calc(var(--ui-layout-side-gap-sm));
        @media (768px <= width) {
          margin-left: calc(var(--ui-layout-side-gap-md) * -1);
          margin-right: calc(var(--ui-layout-side-gap-md) * -1);
          padding-left: calc(var(--ui-layout-side-gap-sm));
          padding-right: calc(var(--ui-layout-side-gap-sm));
        }
        @media (1104px <= width) {
          margin-left: calc(50% - 50cqi);
          margin-right: calc(50% - 50cqi);
          padding-left: calc(50cqi - 50%);
          padding-right: calc(50cqi - 50%);
        }
        .mv-title .cmp-title__text {
          font-size: calc(36rem / 16);
        }
        .mv-title-sub {
          font-size: calc(24rem / 16);
          line-height: 1.3;
        }
        @media (768px <= width) {
          .mv-title .cmp-title__text {
            font-size: calc(56rem / 16);
          }
          .mv-title-en {
            font-size: calc(26rem / 16);
            line-height: 1.3;
          }
          .mv-title-sub {
            font-size: calc(32rem / 16);
          }
        }

        .mv-description {
          margin-top: 12px;
        }
      }
    }
  }
  /* ナビ */
  .ui-experiencefragment:has(.country-city-navi) {
    position: sticky;
    top: 0;
    left: 0;
    /* 検索モジュールのタブより上に */
    z-index: 2;

    overflow-x: auto;
    background-color: var(--ui-black);
    margin-left: calc(var(--ui-layout-side-gap-sm) * -1);
    margin-right: calc(var(--ui-layout-side-gap-sm) * -1);
    @media (768px <= width) {
      margin-left: calc(var(--ui-layout-side-gap-md) * -1);
      margin-right: calc(var(--ui-layout-side-gap-md) * -1);
    }
    @media (1104px <= width) {
      margin-left: calc(50% - 50cqi);
      margin-right: calc(50% - 50cqi);
    }

    .country-city-navi {
      > .container > .cmp-container {
        flex-direction: row;
        padding: var(--ui-space-XS);
        margin-left: 0;
        margin-right: 0;

        .navigation-link {
          border-bottom: none;
          padding-top: 0;
          padding-bottom: 0;
          &:not(:last-of-type):after {
            background: var(--ui-navy-40);
            content: "";
            height: 16px;
            margin: auto var(--ui-space-XS);
            width: 1px;
          }
          a {
            &,
            &:hover {
              white-space: nowrap;
              color: var(--ui-white);
            }
            text-decoration: none;
            &:hover {
              .cmp-text-link__text {
                color: var(--ui-white);
              }
              text-decoration: underline;
            }
          }

          &:last-child {
            padding-right: var(--ui-space-XS);
          }
        }
      }
    }

  }

  #ranking,
  #choice-point,
  #recommend-hotel,
  #recommend-op--tour,
  #basic-information {
    /* --sightseeing-menu-height変数はjsでhead内にstyleを出力:rootに出力 */
    scroll-margin-top: var(--sightseeing-menu-height, 80px);
  }

  #recommend-hotel,
  #recommend-op--tour,
  #related-links {
    .ui-button-large .cmp-button {
      min-width: 256px;
    }
  }
  
  .detail-contents-panel {
    padding: 16px;
    background-color: var(--ui-gray-25);
    margin-top: -56px;
    @media (768px <= width) {
      padding: 24px 56px;
    }

    .contents-heading {
      margin-bottom: 4px;
    }

    a {
      color: var(--ui-black);
      text-decoration: none;
      font-size: calc(16rem / 16);
      &:hover {
        color: var(--ui-black);
        text-decoration: underline;
      }
    }

    .anchor-sub-list {
      text-indent: 1em;
      a {
        gap: 0;
        &::before {
          content: "-";
        }
        &,
        * {
          text-indent: 0;
        }
      }
    }
  }

  .map-image-wrap {
    img {
      max-width: 100%;
      height: auto;
    }
  }

  .content-item-image-wrap {
    .item-main-image .cmp-image__image-container,
    .ui-embed .cmp-embed {
      aspect-ratio: 3 / 2;
      width: 100%;

      picture {
        display: inline;
      }
      img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
    }
  }

  .ranking-img-wrap,
  .spot-info-image-wrap {
    position: relative;
  }
  .ranking-img-wrap {
    .ranking-icon {
      position: absolute;
      top: 0;
      left: 16px;
      width: 44px;
      img {
        width: 100%;
        height: auto;
      }
    }
  }

  .ranking-location-text {
    display: flex;
    gap: 8px;
    color: #697180;
    --icon-width: 16px;
    --icon-height: 20px;
    &::before {
      content: "";
      display: block;
      flex-shrink: 0;
      width: var(--icon-width);
      height: var(--icon-height);
      /* ((フォントサイズ × line-height) - アイコンの高さ) / 2 */
      margin-top: calc((1em * 1.5 - var(--icon-width)) / 2);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      background-image: url("/content/dam/hisj/theme/sightseeing/assets/common/images/map_gray.svg");
    }

    /* テキストコンポーネントはAdvanced Classが子要素のhtml classにも設定されるので打消し */
    .ranking-location-text {
      &::before {
        content: none;
      }
    }
  }

  .spot-info-image-wrap {
    .spot-area {
      position: absolute;
      top: 0;
      right: 0;
      background-color: var(--ui-black);
      color: var(--ui-white);
      padding: 2px;
      /* テキストコンポーネントはAdvanced Classが子要素のhtml classにも設定されるので打消し */
      .spot-area {
        position: static;
      }
    }
  }

  .nice-place-block,
  .trivia-list .trivia-item {
    .cmp-container {
      flex-wrap: nowrap;
      align-items: stretch;
    }

    .nice-place-img-wrap,
    .trivia-img-wrap {
      flex-shrink: 0;
      .container,
      .cmp-container,
      .ui-image,
      .cmp-image,
      .cmp-image__image-container {
        /* height: 100%; */
      }
      &,
      .container,
      .cmp-container,
      .ui-image,
      .cmp-image {
        display: flex;
        align-items: stretch;
        flex-direction: row;
      }
      picture {
        display: inline;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .nice-place-block {
    border: solid 1px var(--ui-black);
    .nice-place-img-wrap {
      width: 30%;
    }
    .nice-place-txt-wrap {
      padding: 20px 24px;
    }
    .nice-place-heading .cmp-title__text {
      font-size: 20px;
      text-align: left;
    }
  }

  .nice-place-block {
    .cmp-container {
      flex-direction: column;
    }
    .nice-place-img-wrap {
      width: 100%;
      .container,
      .cmp-container,
      .ui-image,
      .cmp-image,
      .cmp-image__image-container {
        aspect-ratio: 16/9;
      }
    }

    @media (768px <= width) {
      .cmp-container {
        flex-direction: row;

        .nice-place-img-wrap {
        width: 30%;
        .container,
        .cmp-container,
        .ui-image,
        .cmp-image,
        .cmp-image__image-container {
          aspect-ratio: auto;
        }
      }
      }
    }
  }




  
  .trivia-list {
    > .container > .cmp-container {
      align-items: stretch;
    }
    .trivia-item {
      background-color: var(--ui-white);
      border: 1px solid var(--ui-black);
      > .container {
        &,
        .cmp-container {
          height: 100%;
        }
      }
      .trivia-img-wrap {
        width: 30%;
      }
      .trivia-txt-wrap {
        padding: 12px;
        .trivia-heading {
          margin-bottom: 8px;
        }
      }
    }
  }

  #related-links {
    .related-links-sec-heading {
      display: flex;
      justify-content: center;
      align-items: center;
      column-gap: 12px;
      &::before,
      &::after {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        border-top: 1px solid var(--ui-black);
      }

      > .cmp-title {
        flex-shrink: 0;
      }
    }
  }

  .city-link-list {
    > .container > .cmp-container {
      gap: var(--ui-space-XS);

      @media (768px <= width) {
        gap: var(--ui-space-S);
      }
    }
    .city-link {
      a {
        position: relative;
        padding: 16px;
        display: block;
        height: 100%;
        border: 1px solid var(--ui-navy-40);
        border-radius: 8px;

        .ui-title .cmp-title__icon {
          flex-direction: column;
        }
      }
    }
  }

  .ui-container:is(#basic-information),
  .search-mod-section {
    padding-top: calc(var(--ui-space-XL) / 2);
    padding-bottom: calc(var(--ui-space-XL) / 2);
    
    background-color: var(--ui-navy-20);

    margin-left: calc(var(--ui-layout-side-gap-sm) * -1);
    margin-right: calc(var(--ui-layout-side-gap-sm) * -1);
    padding-left: calc(var(--ui-layout-side-gap-sm));
    padding-right: calc(var(--ui-layout-side-gap-sm));
    @media (768px <= width) {
      margin-left: calc(var(--ui-layout-side-gap-md) * -1);
      margin-right: calc(var(--ui-layout-side-gap-md) * -1);
      padding-left: calc(var(--ui-layout-side-gap-sm));
      padding-right: calc(var(--ui-layout-side-gap-sm));
    }
    @media (1104px <= width) {
      margin-left: calc(50% - 50cqi);
      margin-right: calc(50% - 50cqi);
      padding-left: calc(50cqi - 50%);
      padding-right: calc(50cqi - 50%);
    }

  }

  .search-mod-section {
    .searchModDst {
      background-color: var(--ui-navy-20);
      padding-top: 0;

      margin-left: calc(var(--ui-layout-side-gap-sm) * -1);
      margin-right: calc(var(--ui-layout-side-gap-sm) * -1);
      @media (768px <= width) {
        margin-left: calc(var(--ui-layout-side-gap-md) * -1);
        margin-right: calc(var(--ui-layout-side-gap-md) * -1);
      }
      @media (1104px <= width) {
        margin-left: calc(50% - 50cqi);
        margin-right: calc(50% - 50cqi);
      }
    }
  }

  .related-link-list > .container > .cmp-container {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 16px;
    @media (768px <= width) {
      display: grid;
      row-gap: var(--ui-space-XXS);
    }
    a {
      font-size: calc(16rem / 16);
    }
  }

  .article-link-list {
    a {
      img {
        border-radius: 8px;
      }
    }
  }

  .search-other-spot-list {
    margin-left: calc(var(--ui-layout-side-gap-sm) * -1);
    margin-right: calc(var(--ui-layout-side-gap-sm) * -1);

    @media (768px <= width) {
      margin-left: 0;
      margin-right: 0;
    }

    > .container > .cmp-container {
      @media (768px <= width) {
        column-gap: 16px;
      }
    }

    .area-item-wrap {
      border-bottom: 1px solid var(--ui-navy-40);
      @media (768px <= width) {
        border-bottom: none;
      }

      &:first-child {
        border-top: 1px solid var(--ui-navy-40);
        @media (768px <= width) {
          border-top: none;
        }
      }

      .area-item {
        display: none;
        background-color: var(--ui-navy-30);
        padding-left: var(--ui-layout-side-gap-sm);
        padding-right: var(--ui-layout-side-gap-sm);
        @media (768px <= width) {
          display: block;
          background-color: transparent;
          padding-left: 0;
          padding-right: 0;
        }
        &.sp-accordion-is-open {
          display: block;
        }

        & > .container > .cmp-container {
          row-gap: 0;
          @media (768px <= width) {
            row-gap: var(--ui-space-XS);
          }
        }
      }
      .area-accordion-button {
        display: block !important;
        &,
        .cmp-button {
          width: 100%;
        }
        .cmp-button {
          border-radius: 0;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-color: transparent;
          padding: 16px 20px;
          &::after {
            content: "";
            display: block;
            height: 8px;
            width: 12px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            background-image: url("/content/dam/hisj/theme/sightseeing/assets/common/images/icon-chevron-down.svg");
          }
        }

        &.sp-accordion-is-open {
          .cmp-button {
            &::after {
              transform: rotate(180deg);
            }
          }
        }
        @media (768px <= width) {
          display: none !important;
        }
      }
      
    }

    .area-heading-link {
      > .container > .cmp-container {
        background-image: none;
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        border-radius: 8px;
        padding: 8px 0;
        .ui-text > .cmp-title p {
          font-weight: bold;

          br {
            display: none;
            @media (768px <= width) {
              display: inline;
            }
          }
        }
        @media (768px <= width) {
          padding: 12px;
          aspect-ratio: 1/1;
          background-image: var(--aem-bg-img-sp, var(--aem-bg-img-tb, var(--aem-bg-img-pc)));
          justify-content: center;

          .ui-text {
            color: var(--ui-white);
            & > .cmp-title p {
              font-weight: normal;
            }
          }
        }
      }
    }

    .detail-link-list {
      & > .container > .cmp-container {
        row-gap: 0;
        @media (768px <= width) {
          row-gap: var(--ui-space-XXS);
        }

        & > .ui-container {
          padding: 8px 0;
          @media (768px <= width) {
            padding: 0;
          }
          &:not(:last-child) {
            border-bottom: 1px solid var(--ui-navy-40);
            @media (768px <= width) {
              border-bottom: none;
            }
          }
        }
      }
      a {
        color: var(--ui-black);
        text-decoration: none;
        &:hover {
          @media (768px <= width) {
            text-decoration: underline;
          }
        }

        &:is(.middle-link a) {
          font-weight: bold;
          display: block;
          @media (768px <= width) {
            display: inline-flex;
          }
        }

        @media (768px <= width) {
          .cmp-text-link__icon {
            display: none;
          }
        }
      }

      .middle-link {
        padding: 8px 20px;
        @media (768px <= width) {
          padding: 0;
        }
      }
      .lower-link-list {
        .ui-text-link {
          padding: 8px 10px 8px 32px;
          @media (768px <= width) {
            padding: 0;
          }

          .cmp-text-link {
            font-size: calc(14rem / 16);
            font-weight: bold;
            display: flex;
            align-items: flex-start;

            --icon-width: 6px;
            --icon-height: 6px;
            &::before {
              content: "";
              display: block;
              flex-shrink: 0;
              width: var(--icon-width);
              height: var(--icon-height);
              border-radius: 50%;
              background-color: var(--ui-navy-50);
              /* ((フォントサイズ × line-height) - アイコンの高さ) / 2 */
              margin-top: calc((1em * 1.5 - var(--icon-width)) / 2);
            }
            @media (768px <= width) {
              display: inline-flex;
              align-items: center;
              font-size: var(--ui-typography-S);
              font-weight: normal;
              &::before {
                content: none;
              }
            }
          }
        }
      }
    }
    
  }

  .product-list {
    display: flex;
    flex-direction: column;
    gap: 16px;

    .product-item-link {
      display: flex;
      flex-direction: column;
      column-gap: 8px;
      text-decoration: none;
      color: var(--ui-black);
      border-radius: 8px;
      background: var(--ui-white);
      box-shadow: 0 0 4px 0 var(--Color-Alpha-black-2, rgba(44, 42, 41, 0.30));
      overflow: hidden;
      
      .img-block {
        width: 100%;
        .thumb-wrap {
          aspect-ratio: 10 / 7;  
          /*
            object-fit: contain;と縦横100%を使うと、
            親の領域全体が画像領域とみなされ、狙った角丸が出来ないので、
            flexで対応。
          */
          display: flex;
          justify-content: center;
          align-items: center;

          img {
            /* width: 100%;
            height: 100%;
            object-fit: contain; */
            
            /* border-radius: 8px; */
            /* 暫定で設定 */
            max-width: 100%;
            max-height: 100%;
          }
        }
        .area-name {
          display: flex;

          .area-name-inner {
            display: block;
            padding: 2px 8px;
            font-size: calc(12rem / 16);
            color: var(--ui-white);
            background-color: var(--ui-navy-70);
          }
        }
      }

      .info-block {
        padding: 16px;
        
        .info-title {
          font-size: calc(20rem / 16);
          font-weight: bold;
        }

        .info-desc {
          font-size: calc(14rem / 16);
        }

        .badge-list {
          padding: 8px 0;
          display: flex;
          flex-wrap: wrap;
          gap: 4px;
          .badge {
            border-radius: 8px;
            padding: 4px 8px;
            font-size: calc(12rem / 16);
            font-weight: bold;

            &.badge--gray {
              color: var(--ui-navy-70);
              background: var(--ui-navy-20);
            }
            &.badge--blue {
              color: var(--ui-sky-blue-80);
              background: var(--ui-unleash-blue-10);
            }
          }
        }

        .column4-wrapper--card__price {
          text-align: right;
          color: var(--ui-red-70);
          font-size: calc(22rem / 16);
          font-weight: bold;
        }
      }
    }

    @media (768px <= width) {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  /* 都市ページはエリア名非表示 */
  &.content-city {
    .product-list {
      .product-item-link {
        .img-block {
          .area-name {
            display: none;
          }
        }
      }
    }
  }

  /* 商材ないときはコンポーネント見出しやボタン含めたコンポーネントごと非表示 */
  .section-has-product-list {
    &:has(.product-list.no-product) {
      display: none;
    }
  }

  .travel-info-link-section a.container {
    display: block;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
  }
}