@charset "UTF-8";
/* cms.css
----------------------------------------------------------------- */
@layer components {
  /* CMS共通スタイル */
  /* ページネーション */
  .pagination {
    position: relative;
    margin-top: 4em;
  }
  @media screen and (max-width: 768px) {
    .pagination {
      margin-top: 3em;
    }
  }
  .pagination > ul {
    list-style: none;
    font-size: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    margin: 0 auto;
  }
  @media screen and (max-width: 768px) {
    .pagination > ul {
      flex-wrap: wrap;
    }
  }
  .pagination li {
    font-size: 12px;
    color: #fff;
    margin: 5px;
    display: inline-block;
    vertical-align: top;
  }
  @media screen and (max-width: 768px) {
    .pagination li.nextItem {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 15px;
    }
  }
  @media screen and (max-width: 768px) {
    .pagination li.prevItem {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: 15px;
    }
  }
  .pagination span.current,
  .pagination a {
    line-height: 40px;
    width: 40px;
    height: 40px;
    display: block;
  }
  .pagination span.current {
    background: #b4b4b4;
  }
  .pagination a {
    text-decoration: none;
    background: var(--primary-color);
    color: #fff;
    font-weight: bold;
    transition: all 0.3s ease;
  }
  @media (min-width: 767px) {
    .pagination a:hover {
      transform: translateY(-3px);
    }
  }
  .pagination a.prev,
  .pagination a.next {
    font-family: var(--en);
    padding: 0 1em;
    min-width: 80px;
  }
}
@layer pages {
  /* NEWS一覧 */
  .news {
    min-height: 700px;
    padding-block: 3em 4em;
  }
  @media screen and (max-width: 768px) {
    .news {
      min-height: 300px;
      padding-block: 0.5em 3em;
    }
  }
  .news__inner {
    max-width: 529px;
    width: 85.2%;
    margin-inline: auto;
  }
  .news__list {
    margin-top: 5em;
    display: flex;
    flex-direction: column;
    gap: 3em;
  }
  @media screen and (max-width: 768px) {
    .news__list {
      margin-top: 2em;
      gap: 2em;
    }
  }
  .news__item.no-item {
    text-align: center;
    font-size: clamp(16px, 2.6041666667vw, 20px);
    line-height: 1.5;
    letter-spacing: 0.1em;
    font-weight: normal;
    color: var(--primary-color);
  }
  .news__link {
    position: relative;
    display: block;
    background: var(--secoundary-bg);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
    min-height: 141px;
    padding-block: 1em;
    padding-inline: 24px 22%;
  }
  @media screen and (max-width: 768px) {
    .news__link {
      min-height: 86px;
      padding-block: 0.8em;
      padding-inline: 15px 22%;
    }
  }
  .news__link:after {
    content: "▶";
    display: inline-block;
    position: absolute;
    top: 50%;
    right: clamp(11px, 2.34375vw, 18px);
    transform: translateY(-50%);
    font-size: clamp(14px, 2.9947916667vw, 23px);
    line-height: 1.3;
    letter-spacing: 0.05em;
    font-weight: bold;
    color: var(--primary-color);
  }
  .news__date {
    font-size: clamp(12px, 2.4739583333vw, 19px);
    line-height: 1.5;
    letter-spacing: 0.05em;
    font-weight: bold;
    color: var(--primary-color);
  }
  .news__title {
    margin-top: 0.5em;
    font-size: clamp(12px, 2.4739583333vw, 19px);
    line-height: 1.5;
    letter-spacing: 0.05em;
    font-weight: bold;
    color: var(--primary-color);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  @media screen and (max-width: 768px) {
    .news__title {
      margin-top: 0.3em;
    }
  }
  /* NEWS詳細ページ */
  .news_s {
    padding-block: 3em 8em;
  }
  @media screen and (max-width: 768px) {
    .news_s {
      padding-block: 0.5em 4em;
    }
  }
  .news_s__inner {
    max-width: 560px;
    width: 71.2%;
    margin-inline: auto;
  }
  .news_s__contents {
    padding-top: 5em;
  }
  @media screen and (max-width: 768px) {
    .news_s__contents {
      padding-top: 3em;
    }
  }
  .news_s__head {
    width: 97.4%;
    margin-inline: auto;
  }
  .news_s__date {
    font-size: clamp(12px, 2.3148148148vw, 25px);
    line-height: 1.52;
    letter-spacing: 0.05em;
    font-weight: bold;
    color: var(--primary-color);
  }
  .news_s__title {
    margin-top: 0.5em;
    font-size: clamp(12px, 2.7777777778vw, 30px);
    line-height: 1.2;
    letter-spacing: 0.05em;
    font-weight: bold;
    color: var(--primary-color);
    margin-top: 0.5rem;
  }
  @media screen and (max-width: 768px) {
    .news_s__title {
      line-height: 1.5;
    }
  }
  .news_s__thumb {
    aspect-ratio: 560/333;
    height: 100%;
    overflow: hidden;
    margin-top: 2em;
  }
  @media screen and (max-width: 768px) {
    .news_s__thumb {
      margin-top: 1em;
    }
  }
  .news_s__thumb > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .news_s__body {
    width: 97.9%;
    margin-inline: auto;
    margin-top: 2em;
  }
  @media screen and (max-width: 768px) {
    .news_s__body {
      margin-top: 1em;
    }
  }
  .news_s__body > p {
    font-size: clamp(12px, 2.8645833333vw, 22px);
    line-height: 1.81;
    letter-spacing: 0.1em;
    font-weight: normal;
  }
  @media screen and (max-width: 768px) {
    .news_s__body > p {
      line-height: 2.08;
    }
  }
  .news_s__btnBox {
    display: flex;
    justify-content: center;
    margin-top: 3em;
  }
  @media screen and (max-width: 768px) {
    .news_s__btnBox {
      margin-top: 1em;
    }
  }
  .news_s__body a {
    color: navy;
    text-decoration: underline;
  }
  .news_s__body h2,
  .news_s__body h3,
  .news_s__body h4,
  .news_s__body h5,
  .news_s__body h6 {
    display: block;
    font-size: 22px;
    font-weight: 600;
    color: var(--color-black2);
    line-height: 1.5;
    letter-spacing: 0.14em;
    padding: calc(0.5em + 1px);
    border-bottom: 1px solid var(--primary-color);
  }
  .news_s__body h2,
  .news_s__body h3,
  .news_s__body h4,
  .news_s__body h5,
  .news_s__body h6,
  .news_s__body ul,
  .news_s__body ol {
    margin: 20px 0;
  }
  .news_s__body ul,
  .news_s__body ol {
    font-size: clamp(12px, 2.8645833333vw, 22px);
    padding-left: 25px;
  }
  .news_s__body ul li {
    list-style-type: disc;
  }
  .news_s__body ol li {
    list-style-type: decimal;
  }
  .news_s__body img {
    width: auto;
  }
  /* ギャラリー一覧ページ */
  .gallery {
    padding-block: 3em 7em;
  }
  @media screen and (max-width: 768px) {
    .gallery {
      padding-block: 0.5em 5em;
    }
  }
  .gallery__inner {
    max-width: 532px;
    width: 100%;
    margin-inline: auto;
  }
  .gallery__list {
    display: flex;
    flex-direction: column;
    gap: 7em;
    padding-top: 4em;
  }
  @media screen and (max-width: 768px) {
    .gallery__list {
      gap: 5em;
      padding-top: 3em;
    }
  }
  .gallery__img {
    aspect-ratio: 532/306;
    height: 100%;
    overflow: hidden;
  }
  .gallery__img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .gallery__body {
    margin-top: 2em;
    max-width: 395px;
    width: 74.34%;
    margin-inline: auto;
  }
  @media screen and (max-width: 768px) {
    .gallery__body {
      margin-top: 1.5em;
    }
  }
  .gallery__title {
    text-align: center;
    font-size: clamp(16px, 2.6041666667vw, 20px);
    line-height: 1;
    letter-spacing: 0.1em;
    font-weight: bold;
    color: var(--primary-color);
  }
  @media screen and (max-width: 768px) {
    .gallery__title {
      line-height: 1.125;
    }
  }
  .gallery__detailList {
    width: 100%;
    display: flex;
  }
  .gallery__detailItem {
    flex: 1;
    border: 1px solid var(--primary-border);
    text-align: center;
    font-size: clamp(16px, 2.6041666667vw, 20px);
    line-height: 1;
    font-weight: bold;
    color: var(--primary-color);
    margin-top: 0.5em;
    padding-block: 15.5px;
  }
  @media screen and (max-width: 768px) {
    .gallery__detailItem {
      padding-block: 9.5px;
    }
  }
  .gallery__detailItem:not(:first-child) {
    border-left: none;
  }
  .gallery__btnBox {
    display: flex;
    justify-content: center;
    margin-top: 1em;
  }
  /* ギャラリー詳細ページ */
  .gallery_s {
    padding-block: 3em 7em;
  }
  @media screen and (max-width: 768px) {
    .gallery_s {
      padding-block: 0.5em 3em;
    }
  }
  .gallery_s__inner {
    max-width: 928px;
    width: 100%;
    margin-inline: auto;
  }
  .gallery_s__title {
    text-align: center;
    font-size: clamp(16px, 4.1666666667vw, 32px);
    line-height: 1;
    letter-spacing: 0.1em;
    font-weight: bold;
    color: var(--primary-color);
    margin-top: 3rem;
  }
  @media screen and (max-width: 768px) {
    .gallery_s__title {
      line-height: 1.125;
      margin-top: 1.5rem;
    }
  }
  .gallery_s__detailList {
    max-width: 395px;
    width: 74.34%;
    margin-inline: auto;
    display: flex;
    margin-top: 2em;
  }
  @media screen and (max-width: 768px) {
    .gallery_s__detailList {
      margin-top: 1em;
    }
  }
  .gallery_s__detailItem {
    flex: 1;
    border: 1px solid var(--primary-border);
    text-align: center;
    font-size: clamp(16px, 2.6041666667vw, 20px);
    line-height: 1;
    font-weight: bold;
    color: var(--primary-color);
    padding-block: 15.5px;
  }
  @media screen and (max-width: 768px) {
    .gallery_s__detailItem {
      padding-block: 9.5px;
    }
  }
  .gallery_s__detailItem:not(:first-child) {
    border-left: none;
  }
  .gallery_s__slide {
    display: grid;
    grid-template-columns: 644fr 275fr;
    gap: 0.5em;
    margin-top: 3em;
  }
  @media screen and (max-width: 768px) {
    .gallery_s__slide {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      margin-top: 2em;
    }
  }
  .gallery_s__slide #main-slider .splide__slide {
    aspect-ratio: 644/371;
    height: 100%;
    overflow: hidden;
  }
  .gallery_s__slide #main-slider .splide__slide > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .gallery_s__slide .thumbnails > .thumbnails__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 6px;
  }
  @media screen and (max-width: 768px) {
    .gallery_s__slide .thumbnails > .thumbnails__list {
      display: flex;
      gap: 0;
    }
  }
  .gallery_s__slide .thumbnails > .thumbnails__list > li {
    aspect-ratio: 136/122;
    height: 100%;
    overflow: hidden;
  }
  @media screen and (max-width: 768px) {
    .gallery_s__slide .thumbnails > .thumbnails__list > li {
      flex: 1;
    }
  }
  .gallery_s__slide .thumbnails > .thumbnails__list > li.is-active > img {
    transform: scale(1.1);
  }
  @media (min-width: 767px) {
    .gallery_s__slide .thumbnails > .thumbnails__list > li:hover > img {
      transform: scale(1.1);
    }
  }
  .gallery_s__slide .thumbnails > .thumbnails__list > li > img {
    cursor: pointer;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease-in-out;
  }
  .splide__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(22px, 5.3385416667vw, 41px);
    margin-top: 4em;
  }
  @media screen and (max-width: 768px) {
    .splide__nav {
      margin-top: 1.5em;
    }
  }
  .splide__nav #prevBtn, .splide__nav #nextBtn {
    max-width: clamp(20px, 4.8177083333vw, 37px);
    width: 100%;
    aspect-ratio: 1/1;
    transition: all 0.3s ease;
  }
  @media (min-width: 767px) {
    .splide__nav #prevBtn:hover, .splide__nav #nextBtn:hover {
      opacity: 0.6;
    }
  }
  .splide__nav #prevBtn {
    transform: scale(-1, 1);
  }
  .splide__logo {
    max-width: clamp(96px, 23.1770833333vw, 178px);
    width: 100%;
  }
  .gallery_s__furnitureBox {
    margin-top: 5em;
    border: 1px solid var(--primary-border);
    max-width: 915px;
    width: 74.1%;
    min-height: 522px;
    margin-inline: auto;
    padding-inline: 8.6%;
  }
  @media screen and (max-width: 768px) {
    .gallery_s__furnitureBox {
      min-height: auto;
      margin-top: 4em;
      padding-inline: 8%;
    }
  }
  .gallery_s__furnitureHeading {
    text-align: center;
    max-width: 211px;
    width: 100%;
    margin-inline: auto;
    background: var(--primary-color);
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: 0.25em;
    font-weight: bold;
    color: #fff;
    padding-block: 5.5px;
    margin-top: -20.5px;
  }
  @media screen and (max-width: 768px) {
    .gallery_s__furnitureHeading {
      max-width: 124px;
      font-size: 12px;
      padding-block: 3px;
      margin-top: -12px;
    }
  }
  .gallery_s__furnitureList {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3em 11.2%;
    padding-block: 5em;
  }
  @media screen and (max-width: 768px) {
    .gallery_s__furnitureList {
      grid-template-columns: 1fr;
      padding-block: 3em;
    }
  }
  .gallery_s__furnitureLink {
    display: block;
  }
  .gallery_s__ganre {
    text-align: center;
    display: block;
    max-width: clamp(82px, 18.2291666667vw, 140px);
    width: 100%;
    background: var(--tertiary-bg);
    font-size: clamp(12px, 2.6041666667vw, 20px);
    line-height: 1.5;
    letter-spacing: 0.2em;
    font-weight: bold;
    color: #fff;
    padding-block: 5px;
    padding-inline: 1em;
  }
  @media screen and (max-width: 768px) {
    .gallery_s__ganre {
      margin-inline: auto;
      padding-block: 3px;
    }
  }
  .gallery_s__maker {
    font-size: 14px;
    line-height: 1.29;
    letter-spacing: 0.2em;
    font-weight: bold;
    color: var(--primary-color);
    margin-top: 1.5em;
  }
  @media screen and (max-width: 768px) {
    .gallery_s__maker {
      margin-top: 1em;
    }
  }
  .gallery_s__model {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.2em;
    font-weight: normal;
    color: var(--primary-color);
    margin-top: 1.5em;
  }
  @media screen and (max-width: 768px) {
    .gallery_s__model {
      margin-top: 0;
    }
  }
  .gallery_s__btnBox {
    display: flex;
    justify-content: center;
    margin-top: 5em;
  }
  @media screen and (max-width: 768px) {
    .gallery_s__btnBox {
      margin-top: 4em;
    }
  }
}