/*****************
  リセットCSS
*****************/
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul,
ol {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
  text-decoration: none;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

a {
  color: inherit;
  text-decoration: none
}

/**************************
  CSS変数をまとめておくファイル
**************************/

:root {
  /* コンテンツ */
  --common-contents-max-width: calc(100% - 220px);

  /* フォントカラー */
  --base-font-color: #464646;

  /* フォントファミリー */
  --font-family-Source-Sans-Pro: "Source Sans Pro", sans-serif;
  --font-family-dnp-shuei-kaku-gothic: "dnp-shuei-gothic-kin-std", sans-serif;
  --font-family-lato: "Lato", sans-serif;

  /*****************
    SVGファイルのコード
  *****************/

  /* aboutエリアで使用しているチェックボックス */
  --checkbox-icon: url("data:image/svg+xml,%3Csvg width='21' height='19' viewBox='0 0 21 19' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Crect width='21' height='19' fill='url(%23pattern0_1_46)'/%3E%3Cdefs%3E%3Cpattern id='pattern0_1_46' patternContentUnits='objectBoundingBox' width='1' height='1'%3E%3Cuse xlink:href='%23image0_1_46' transform='scale(0.047619 0.0526316)'/%3E%3C/pattern%3E%3Cimage id='image0_1_46' width='21' height='19' preserveAspectRatio='none' xlink:href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAATCAMAAABIkLa5AAAAAXNSR0IB2cksfwAAANJQTFRF2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMV2EMVteaemAAAAEZ0Uk5TDb7j4dkoCyO30oGEgLPT52EArPQ/r/8wYvYmBKovWF8PsP4zHwEGB/o7LC73x/PCDgqx9TgbJCnp7DIqPOheK55n6+rub94JfToAAAChSURBVHicldE7C8JAEATgGRQ1oomFHHiFCD4KCwt7/39jJyFFiHUgQfEBarTw4kXM3VVO+bHMLixBEvWwTMfRok0GFuphR5tkwcB7GPjq8QZLu2XrpVKfJ60D1Xl+ah1e03mmTGSC6SivFJK85+Wi/gE/hWx8jmeCumK2l8diEsNULNRkBFuxZAhXv/lbN9yZuoqU+uukZeg4VDoVnv2LLd7yWj5Nfs9PqQAAAABJRU5ErkJggg=='/%3E%3C/defs%3E%3C/svg%3E");

  /* Show Moreボタンに使用している矢印 */
  --show-more-arrow: url("data:image/svg+xml,%3Csvg%20width%3D%22119%22%20height%3D%2213%22%20viewBox%3D%220%200%20119%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0%2013V12H119V13H0Z%22%20fill%3D%22%23464646%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M118.4%2011.6001L117.6%2012.3999L106.6%201.3999L107.4%200.600098L118.4%2011.6001Z%22%20fill%3D%22%23464646%22%2F%3E%3C%2Fsvg%3E");

  /* モバイルの画面幅 */
  --mobileDeviceWidth: 440px;

  @media screen and (max-width: 440px) {
    --common-contents-max-width: 100dvw;
  }
}



/*****************
  共通
*****************/
html {
  color: var(--base-font-color);
}

/* 横スワイプをJS側に優先させる */
.recommend-slider .slick-list,
.ranking-slider .slick-list {
  touch-action: pan-y;         /* 縦スクロールはブラウザ、横はJS */
  -ms-touch-action: pan-y;     /* 旧Edge用 */
}

/* shoe moreボタンのアニメーション */
@keyframes slide-in-from-left {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

body {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;

  &.archive {
    max-width: unset;
  }

  &.archive .archive.mainContents {
    margin-top: 0;
  }

  &.tag .archive.mainContents{
    margin-top: 0;
  }
}

/* moreボタン */
.more-button__container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 13px;
  overflow: hidden;

  .more-button__text {
    font-size: 24px;
    font-family: var(--font-family-lato);
    letter-spacing: 0.08em;
    font-weight: bold;
  }

  .more-button__arrow--default {
    position: relative;
    width: 120px;
    height: 16px;
    background-image: var(--show-more-arrow);
    background-position-y: -3px;
    background-repeat: no-repeat;
    opacity: 1;
    transform: translateX(0);
  }

  @media screen and (min-width: 721px) {
    &:hover {
      cursor: pointer;

      .more-button__arrow--default {
        animation: slide-in-from-left 1s ease forwards;
      }
    }
  }

  .more-button__circle {
    content: "";
    position: relative;
    right: 40px;
    display: block;
    width: 45px;
    height: 45px;
    border-radius: 100vmax;
    border: 1px solid #464646;
  }

  @media (max-width: 440px) {
    padding: 0 19px;

    .more-button__text {
      font-size: 18px;
    }

    .more-button__circle {
      width: 39px;
      height: 39px;
    }
  }
}

.home .section-title__container {
  margin-bottom: 50px;
  transform: translateY(50px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  opacity: 0;

  @media (max-width: 440px) {
    padding: 0 19px;
    margin-bottom: 19px;
  }

  &.is-show {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-title {
  font-size: 50px;
  font-family: var(--font-family-lato);
  margin-bottom: 5px;
  letter-spacing: 0.05em;

  @media (max-width: 440px) {
    font-size: 30px;
  }

  @media (max-width: 375px) {
    font-size: clamp(26px, 8.09968847vw ,30px);
  }
}

.section-sub-title {
  font-size: 24px;
  font-family: var(--font-family-dnp-shuei-kaku-gothic);

  @media (max-width: 440px) {
    font-size: 14px;
  }
}

.spOnly {
  display: none;
  @media (max-width: 440px) {
    display: block;
  }
}

/* スクロールラインの点滅アニメーション */
@keyframes scrollLineBlink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

/* TODO: 背景確認のため一時的に背景色を設定 */
body {
  background: linear-gradient(to bottom, #ffe9d7 0%, #ffd2c1 50%, #fbbfa7 100%);
}

/*****************
  メインコンテンツ
*****************/
.mainContents {
  &.is-show {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition: transform 400ms, opacity 400ms, -webkit-transform 400ms;
  }

  &.is-hide {
    opacity: 0;
    transform: scale(0.96);
  }
}

/*****************
  ヘッダー
*****************/
.header {
  width: 100dvw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  transition: background 0.3s ease-in-out;

  &.header--gradient {
    background: linear-gradient(
      to bottom,
      rgba(255,255,255) 0%,
      rgba(255,255,255,0) 100%
    );
  }

  .header__inner {
    max-width: var(--common-contents-max-width);
    margin: 0 auto;
    padding: 25px 0;
  }

  .header__contents-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .header__logo {
    width: 189px;
    height: auto;

    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }

  /*****************
    ハンバーガーメニュー
  *****************/
  .header__hamburger {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40px;
    cursor: pointer;
    z-index: calc(infinity);

    .header__hamburger-text {
      margin-bottom: 3px;
      font-size: 15px;
      font-family: var(--font-family-Source-Sans-Pro);
      transition: all 0.3s;
      position: relative;
      top: 0;
    }

    .header__hamburger-stick-container {
      position: relative;
      display: flex;
      flex-direction: column;
      row-gap: 9px;
      width: 35px;
      border-radius: 100vmax;
    }

    .header__hamburger-stick {
      display: block;
      height: 1px;
      background-color: #7b847b;
      transition: all 0.3s ease-in-out;
      position: relative;
      top: 0;
      transform-origin: center;
    }

    .header__hamburger-stick:first-of-type {
      transform: rotate(0deg);
    }

    .header__hamburger-stick:last-of-type {
      transform: rotate(0deg);
    }

    &.is-closed {
      .header__hamburger-stick-container {
        height: 35px;
        background-color: rgba(255, 255, 255, 0.6);
      }

      .header__hamburger-text {
        opacity: 0;
        display: none;
      }

      .header__hamburger-stick {
        position: absolute;
        inset: 0;
        margin: auto;
        height: 3px;
        width: 20px;
      }

      .header__hamburger-stick:first-of-type {
        transform: rotate(45deg);
      }

      .header__hamburger-stick:nth-child(2) {
        opacity: 0;
      }

      .header__hamburger-stick:last-of-type {
        transform: rotate(-45deg);
      }
    }
  }

  @media (max-width: 440px) {
    .header__inner {
      padding: 16px;
    }
  }
}

/*****************
  メインビジュアル
*****************/
.mainVisual {
  margin-bottom: 200px;
  padding-top: 50px;

  .mainVisual__contents-container {
    position: relative;
    max-width: var(--common-contents-max-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 70px;

    @media screen and (min-width: 1920px) {
      max-width: 1400px;
    }
  }

  .mainVisual__text-container {
    padding-top: 372px;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;

    &.is-show {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .mainVisual__sub-text {
    font-family: var(--font-family-dnp-shuei-kaku-gothic);
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    color: var(--base-font-color);
    letter-spacing: 0.7rem;
  }

  .mainVisual__main-text {
    font-size: 100px;
    color: var(--base-font-color);
    font-family: var(--font-family-lato);
    font-weight: bold;
    font-style: normal;
    letter-spacing: 0.7rem;
  }

  .mainVisual__sns-container {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;

    &.is-show {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .mainVisual__sns-icon-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    column-gap: 16px;
    margin-bottom: 50px;
  }

  .mainVisual__sns-icon-link {
    display: block;
    width: 100%;
    height: 100%;

    svg {
      width: 100%;
      height: 100%;
    }

    img {
      width: 100%;
      height: 100%;
    }
  }

  .mainVisual__scroll-container {
    display: none;
  }

  .mainVisual__follow-text {
    margin-bottom: 25px;
    font-family: var(--font-family-Source-Sans-Pro);
    font-size: 16px;
    letter-spacing: 0.1rem;
  }

  .mainVisual__sns-icon {
    height: 36px;
  }

  .mainVisual__scroll-icon-container {
    max-width: 36px;
    height: 36px;
    margin-top: 22px;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 1px;
      height: 40px;
      background-color: #464646;
      top: -50%;
      animation: scrollLineBlink 2s ease-in-out infinite;
    }

    img {
      width: 100%;
      height: 100%;
    }
  }

  .mainVisual__line-cta-button-container {
    max-width: var(--common-contents-max-width);
    margin-inline: auto;

    @media screen and (min-width: 1920px) {
      max-width: 1400px;
    }

    .mainVisual__line-cta-button {
      display: block;
      margin-left: auto;
      background-color: #4CC764;
      border-radius: 100vmax;
      max-width: 400px;
      max-height: 100px;
      height: 100%;
      width: 100%;
      overflow: hidden;
      transition: opacity 0.2s ease-out;

      @media screen and (min-width: 721px) {
        &:hover {
          opacity: 0.8;
        }
      }
    }

    .mainVisual__line-cta-link {
      position: relative;
      color: #fff;
      text-decoration: none;
      display: block;
      width: 100%;
      height: 100%;
      font-size: 24px;
      line-height: 24px;
      padding: 26px 0 26px 110px;

      &::before {
        content: '';
        width: 80px;
        height: 80px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 30px;
        background: url('../images/korehana_line-icon.webp') no-repeat center / contain;
      }

      span {
        font-weight: bold;
      }
    }
  }



  @media (max-width: 440px) {
    padding-top: 30px;

    .mainVisual__contents-container {
      flex-direction: column;
      padding: 0 19px;
    }

    .mainVisual__text-container {
      width: 100%;
      padding-top: 190px;
    }

    .mainVisual__sub-text {
      font-size: 20px;
      letter-spacing: 0.2rem;
    }

    .mainVisual__main-text {
      font-size: clamp(50px,13.29787234vw ,60px);
      letter-spacing: 0.2rem;
      margin-bottom: 100px;
    }

    .mainVisual__scroll-container {
      position: absolute;
      bottom: 35px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 15px;
    }

    .mainVisual__follow-text {
      display: none;
    }

    .mainVisual__sns-icon-container {
      position: relative;
      column-gap: 0;
      row-gap: 15px;
      flex-direction: column;
    }

    .mainVisual__sns-icon {
      width: 24px;
      height: 24px;
    }

    .mainVisual__scroll-text {
      font-size: 16px;
      font-family: var(--font-family-dnp-shuei-kaku-gothic);
      color: var(--base-font-color);
      letter-spacing: 0.2rem;
    }

    .mainVisual__scroll-icon-container {
      max-width: 36px;
      height: 36px;
      margin-top: 22px;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 1px;
        height: 40px;
        background-color: #9A9A9A;
        top: -50%;
        animation: scrollLineBlink 2s ease-in-out infinite;
      }

      img {
        width: 100%;
        height: 100%;
      }
    }

    .mainVisual__line-cta-button-container {
      display: none;
    }
  }

  @media (max-width: 375px) {
    .mainVisual__main-text {
      font-size: clamp(40px, 12.46105919vw, 50px);
    }
  }
}

/*****************
  PICKUP
*****************/
.pickup {
  margin-bottom: 217px;

  .pickup__section-title {
    width: fit-content;
    margin: 0 auto 30px;
  }

  .pickup__section-main-title {
    font-size: 50px;
    font-family: var(--font-family-lato);
    color: var(--base-font-color);
    text-align: center;
    letter-spacing: 0.5rem;
    margin-bottom: 10px;
  }

  .pickup__section-sub-title {
    font-size: 24px;
    font-family: var(--font-family-dnp-shuei-kaku-gothic);
    color: var(--base-font-color);
    text-align: center;
    letter-spacing: 0.3rem;
  }

  .pickup__tag-container {
    max-width: var(--common-contents-max-width);
    margin-inline: auto;
    margin-bottom: 35px;
  }

  .pickup__tag-lists {
    margin: 0 auto 37px;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
  }

  .pickup__tag-list-item {
    font-size: 14px;
    color: #d84315;
    border: 1px solid #d84315;
    border-radius: 100vmax;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-family: var(--font-family-dnp-shuei-kaku-gothic);

    @media screen and (min-width: 721px) {
      &:hover {
        cursor: pointer;
        background-color: #d84315;
        color: #fff;
      }
    }
  }

  .pickup__tag-link {
    display: block;
    width: 100%;
    height: 100%;
    padding: 5px 15px;
    color: inherit;
    text-decoration: none;
  }

  .slick-slide {
    max-width: 450px;
    width: 100%;
  }

  @media (max-width: 440px) {
    margin-bottom: 80px;

    .pickup__section-main-title {
      font-size: 30px;
    }

    .pickup__section-sub-title {
      font-size: 14px;
    }

    .pickup__tag-lists {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: max-content; /* 各列は中身のサイズになる */
      grid-template-rows: repeat(2, auto); /* 2行固定 */
      overflow-x: auto;
      padding-bottom: 8px;
      scrollbar-width: none;
      -ms-overflow-style: none;
      gap: 7px;
      justify-content: flex-start;
      list-style: none; /* ulのリストマーク消し */
      padding: 0; /* ulの余白リセット */
      margin: 0;
    }

    .pickup__tag-list-item {
      display: inline-block; /* 重要：リストアイテムの幅を中身に合わせる */
      font-size: 12px;
      text-align: center;
    }

    .pickup__tag-link {
      display: inline-block; /* aタグも必ず中身に合わせる */
      white-space: nowrap; /* 改行防止 */
    }

    .pickup__tag-container {
      padding: 0 0 0 19px;
    }

    .slick-slide {
      max-width: 200px;
      width: 100%;
    }
  }
}

.pickup-splide-container {
  .splide__thumbnail-container {
    max-height: 250px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;

    img {
      width: 100%;
      height: auto;
      object-fit: contain;
    }
  }

  .splide__publishded-date  {
    position: relative;
    display: block;
    margin-bottom: 8px;
    padding-left: 30px;
    font-size: 16px;

    @media (max-width: 440px) {
      font-size: 11px;
      padding-left: 18px;
      margin-bottom: 6px;
    }


    &::before {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      width: 20px;
      height: 20px;
      background-image: url("../images/korehana_clock_icon.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;

      @media (max-width: 440px) {
        width: 13px;
        height: 13px;
      }
    }
  }

  .splide__title {
    margin-bottom: 15px;
    font-size: 20px;
    white-space: normal;
    text-wrap: wrap;
    overflow-wrap: break-word;
    word-break: normal;
    line-break: strict;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;

    @media (max-width: 440px) {
      font-size: 16px;
      margin-bottom: 10px;
    }
  }

  .splide__tags {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0 5px;
    font-size: 14px;
    color: #d84315;
    text-decoration: none;

    @media (max-width: 440px) {
      font-size: 11px;
    }
  }
}

/*****************
  ABOUT
*****************/
.about {
  margin-bottom: 190px;

  .about__inner {
    max-width: var(--common-contents-max-width);
    margin-inline: auto;

    @media screen and (min-width: 1920px) {
      max-width: 1400px;
    }
  }

  .about__contents-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    row-gap: 19px;
  }

  .about__text-container {
    .about__title--small {
      font-size: 45px;
      font-weight: bold;
      margin-bottom: 20px;
      line-height: 1;
      font-family: var(--font-family-lato);
    }

    .about__title--big {
      font-size: 80px;
      font-weight: bold;
      margin-bottom: 30px;
      line-height: 1;
      font-family: var(--font-family-lato);
    }

    .about__heading-text {
      font-size: 32px;
      font-family: var(--font-family-dnp-shuei-kaku-gothic);
      margin-bottom: 32px;
    }

    .about__description-container {
      max-width: 754px;
      font-size: 16px;
      font-family: var(--font-family-dnp-shuei-kaku-gothic);
      margin-bottom: 35px;

      .about__description-text {
        line-height: 2.5;
        letter-spacing: 0.08em;

        &:nth-child(2),
        &:nth-child(3),
        &:nth-child(4) {
          position: relative;
          padding-left: 2rem;

          &::before {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            content: "";
            display: inline-block;
            width: 21px;
            height: 19px;
            background-image: var(--checkbox-icon);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
          }
        }

        &.about {
          margin-bottom: 10px;
        }

        &.list {
          margin-bottom: 10px;
        }
      }
    }
  }

  .about__image-container {
    width: 627px;
    height: 574px;

    > img {
      width: 100%;
      height: 100%;
    }
  }

  .about__contents-image--sp-only {
    display: none;
  }

  @media (max-width: 440px) {
    margin-bottom: 80px;

    .about__contents--right {
      display: none;
    }

    .about__text-container {
      .about__title--small {
        font-size: 24px;
        padding: 0 19px;
        letter-spacing: 0.3rem;
        margin-bottom: 15px;
      }

      .about__title--big {
        font-size: 40px;
        padding: 0 19px;
        letter-spacing: 0.3rem;

        @media screen and (max-width: 375px) {
          font-size: clamp(35px, 10.90342679vw, 40px);
        }
      }

      .about__heading-text {
        font-size: 18px;
        padding: 0 19px;
        margin-bottom: 18px;
      }

      .about__description-container {
        font-size: 13px;
        padding: 0 19px;

        .about__description-text {
          line-height: 2;
          letter-spacing: 0.15rem;
        }
      }
    }

    .about__contents-image--sp-only {
      display: block;
      margin-bottom: 32px;
      padding: 0 19px;

      img {
        width: 100%;
        height: auto;
        object-fit: contain;
      }
    }

    .more-button__container {
      padding: 0 19px;
    }
  }
}

/*****************
  Youtube
*****************/
.youtube {
  margin-bottom: 100px;

  .youtube__section-inner {
    max-width: var(--common-contents-max-width);
    margin-inline: auto;

    @media screen and (min-width: 1920px) {
      max-width: 1400px;
    }
  }

  .youtube__contents-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  .youtube__movie-container {
    max-width: 860px;
    height: auto;
    margin-bottom: 50px;
    aspect-ratio: 16 / 9;

    iframe {
      width: 100%;
      height: 100%;
    }
  }

  .youtube__google-ad-container {
    width: 300px;
    height: 250px;
    margin-bottom: 65px;

    &:last-child {
      margin-bottom: 0;
    }

    img {
      width: 100%;
      height: 100%;
    }
  }

  .youtube__contents {
    max-width: 860px;
    margin-bottom: 50px;
  }

  .youtube__blog-list {
    margin: 0;
    padding: 0;
  }

  .youtube__blog-list-item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    column-gap: 54px;
    margin-bottom: 30px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .youtube__blog-link {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    column-gap: 50px;
    text-decoration: none;
    color: inherit;
  }

  .youtube__blog-image-container {
    width: 350px;
    height: auto;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    aspect-ratio: 16 / 9;

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

  .youtube__blog-title {
    font-size: 20px;
    font-family: var(--font-family-lato);
    margin-bottom: 10px;
    font-weight: bold;
    white-space: normal;
    text-wrap: wrap;
    overflow-wrap: break-word;
    word-break: normal;
    line-break: strict;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .youtube__blog-content {
    font-size: 14px;
    font-family: var(--font-family-dnp-shuei-kaku-gothic);
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
      font-weight: normal;
      font-size: inherit;
      letter-spacing: 0.1rem;
    }
  }

  .youtube__blog-published-date {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    font-size: 16px;
    font-family: "Source Sans Pro", sans-serif;
    padding-left: 30px;
    margin-bottom: 15px;

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      width: 20px;
      height: 20px;
      background-image: url("../images/korehana_clock_icon.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
  }

  .youtube__blog-tag-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .youtube__blog__tag {
    font-size: 14px;
    color: #d84315;
    text-decoration: none;
    margin-right: 5px;

    @media screen and (max-width: 440px) {
      font-size: 11px;
    }

    &:last-child {
      margin-right: 0;
    }
  }

  @media (max-width: 440px) {
    margin-bottom: 60px;

    .youtube__contents {
      padding: 0 19px;
      margin-bottom: 20px;
    }

    .youtube__movie-container {
      width: 100%;
      margin-bottom: 19px;
    }

    .youtube__blog-image-container {
      width: auto;
      height: 89px;
    }

    .youtube__blog-title {
      font-size: 13px;
      margin-bottom: 6px;
    }

    .youtube__blog-content {
      display: none;
    }

    .youtube__blog-published-date {
      font-size: 11px;
      padding-left: 18px;
      margin-bottom: 6px;

      &::before {
        width: 13px;
        height: 13px;
      }
    }

    .youtube__blog-list-item {
      column-gap: 15px;
    }

    .youtube__blog-tag-container {
      display: -webkit-box; /* 必須 */
      -webkit-box-orient: vertical; /* 必須 */
      -webkit-line-clamp: 1; /* 行数を制限 */
      overflow: hidden; /* はみ出た部分を非表示 */
    }

    .youtube__blog-contents {
      overflow: hidden;
    }

    .youtube__contents-right {
      display: none;
    }

    .youtube__contents-container {
      display: block;
    }
  }
}

/*****************
  BLOG FOR BRIDES
*****************/
.blog-for-brides {
  margin-bottom: 105px;

  .blog-for-brides__section-inner {
    max-width: var(--common-contents-max-width);
    margin-inline: auto;

    @media screen and (min-width: 1920px) {
      max-width: 1400px;
    }
  }

  .blog-for-brides__blog-list {
    margin-bottom: 50px;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .blog_for_brides__blog-list-item {
    width: calc((100% - 120px) / 4);
    height: auto;
  }

  .blog_for_brides__blog-link {
    color: var(--base-font-color);
    text-decoration: none;
  }

  .blog_for_brides__blog-image-container {
    width: 100%;
    height: 100%;
    margin-bottom: 30px;
    border-radius: 6px;
    overflow: hidden;

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

  .blog_for_brides__blog-title {
    font-family: var(--font-family-dnp-shuei-kaku-gothic);
    font-weight: bold;
    margin-bottom: 25px;
    font-size: 20px;
    font-weight: bold;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .blog_for_brides__blog-content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 14px;
    margin-bottom: 25px;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-weight: normal;
      font-size: inherit;
    }
  }

  .blog_for_brides__blog-published-date {
    position: relative;
    font-size: 16px;
    font-family: "Source Sans Pro", sans-serif;
    padding-left: 30px;
    margin-bottom: 15px;

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      width: 20px;
      height: 20px;
      background-image: url("../images/korehana_clock_icon.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
  }

  .blog_for_brides__tag {
    font-size: 14px;
    color: #d84315;
    text-decoration: none;
    margin-right: 5px;

    @media (max-width: 440px) {
      font-size: 11px;
    }

    &:last-child {
      margin-right: 0;
    }
  }

  @media (max-width: 440px) {
    margin-bottom: 60px;

    .blog-for-brides__blog-list {
      padding: 0 19px;
      column-gap: 16px;
      margin-bottom: 21px;
    }

    .blog_for_brides__blog-list-item {
      max-width: 47%;
      width: 100%;
      margin-bottom: 21px;
    }

    .blog_for_brides__blog-image-container {
      width: 100%;
      height: auto;
      margin-bottom: 15px;
    }

    .blog_for_brides__blog-content {
      display: none;
    }

    .blog_for_brides__blog-title {
      font-size: 13px;
      margin-bottom: 6px;
    }

    .blog_for_brides__blog-published-date {
      font-size: 11px;
      padding-left: 18px;
      margin-bottom: 6px;

      &::before {
        width: 13px;
        height: 13px;
      }
    }

    .blog_for_brides__blog-tag-container {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
  }
}

/*****************
  Recommend
*****************/
.recommend {
  margin-bottom: 102px;

  .recommend__blog-contents {
    width: 100%;
  }

  .section-title__container,
  .more-button__container {
    max-width: var(--common-contents-max-width);
    margin-inline: auto;

    @media screen and (min-width: 1920px) {
      max-width: 1400px;
    }
  }

  .recommend__blog-link {
    color: var(--base-font-color);
    text-decoration: none;
  }

  .recommend__blog-image-container {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 32px;

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

  .recommend__blog-title {
    font-size: 20px;
    font-family: var(--font-family-dnp-shuei-kaku-gothic);
    margin-bottom: 27px;
    font-weight: bold;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .recommend__blog-content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-bottom: 28px;
  }

  .recommend__blog-text {
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .recommend__blog-published-date {
    position: relative;
    font-size: 16px;
    font-family: "Source Sans Pro", sans-serif;
    padding-left: 30px;
    margin-bottom: 15px;

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      width: 20px;
      height: 20px;
      background-image: url("../images/korehana_clock_icon.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
  }

  .recommend__tag {
    font-size: 14px;
    color: #d84315;
    text-decoration: none;
    margin-right: 5px;

    @media (max-width: 440px) {
      font-size: 11px;
    }

    &:last-child {
      margin-right: 0;
    }
  }

  @media (max-width: 440px) {
    margin-bottom: 60px;

    .more-button__container {
      display: none;
    }

    .recommend__blog-title {
      font-size: 16px;
      margin-bottom: 6px;
    }

    .recommend__blog-image-container {
      margin-bottom: 15px;
    }

    .recommend__blog-text {
      font-size: 14px;
      margin-bottom: 10px;
    }

    .recommend__blog-published-date {
      font-size: 11px;
      padding-left: 18px;
      margin-bottom: 6px;

      &::before {
        width: 13px;
        height: 13px;
      }
    }
  }

  .recommend-splide-container {
    margin-bottom: 50px;
  }
}

/*****************
  Ranking
*****************/
.ranking {
  margin-bottom: 100px;

  .section-title__container,
  .more-button__container {
    max-width: var(--common-contents-max-width);
    margin-inline: auto;

    @media screen and (min-width: 1920px) {
      max-width: 1400px;
    }
  }

  .ranking__blog-link {
    color: var(--base-font-color);
    text-decoration: none;
  }

  .ranking__blog-image-container {
    width: 100%;
    height: auto;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 32px;

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

  .ranking__blog-title {
    font-size: 20px;
    font-family: var(--font-family-dnp-shuei-kaku-gothic);
    margin-bottom: 27px;
    font-weight: bold;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;

    @media (max-width: 440px) {
      font-size: 16px;
      margin-bottom: 6px;
    }
  }

  .ranking__blog-content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-bottom: 28px;
  }

  .ranking__blog-text {
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;

    @media (max-width: 440px) {
      font-size: 14px;
      margin-bottom: 10px;
    }
  }

  .ranking__blog-published-date {
    position: relative;
    font-size: 16px;
    font-family: "Source Sans Pro", sans-serif;
    padding-left: 30px;
    margin-bottom: 15px;

    @media (max-width: 440px) {
      font-size: 11px;
      padding-left: 18px;
      margin-bottom: 4px;
    }

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      width: 20px;
      height: 20px;
      background-image: url("../images/korehana_clock_icon.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;

      @media (max-width: 440px) {
        width: 13px;
        height: 13px;
      }
    }
  }

  .ranking__tag {
    font-size: 14px;
    color: #d84315;
    text-decoration: none;
    margin-right: 5px;

    @media (max-width: 440px) {
      font-size: 11px;
    }

    &:last-child {
      margin-right: 0;
    }
  }

  .ranking-splide-container {
    margin-bottom: 50px;
  }

  .ranking__blog-contents {
    width: 100%;
  }


  @media (max-width: 440px) {
    margin-bottom: 60px;

    .more-button__container {
      display: none;
    }

    .ranking__blog-image-container {
      margin-bottom: 15px;
    }

    .ranking__blog-tag-container {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
  }
}

/*****************
  ハッシュタグ
*****************/
.hashtag {
  margin-bottom: 100px;

  .hashtag__inner {
    max-width: var(--common-contents-max-width);
    margin-inline: auto;

    @media screen and (min-width: 1920px) {
      max-width: 1400px;
    }
  }

  #hashtag-list-pc {
    display: flex;
  }
  #hashtag-tags-scroll-area {
    display: none;
  }

  .hashtag__tags-list {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 21px 23px;
    margin: 0;
    padding: 0;
  }

  .hashtag__tags-list-item {
    font-size: 18px;
    color: #d84315;
    border: 1px solid #d84315;
    border-radius: 100vmax;

    @media screen and (min-width: 721px) {
      &:hover {
        cursor: pointer;
        color: #fff;
        background-color: #d84315;
        transition: 0.2s;
      }
    }
  }

  .hashtag__tags-list-link {
    width: 100%;
    height: 100%;
    padding: 5px 20px;
    color: inherit;
    text-decoration: none;
    display: block;
  }

  @media (max-width: 440px) {
    margin-bottom: 60px;

    .hashtag__tags-container {
      padding: 0 0 0 19px;
    }

    #hashtag-list-pc {
      display: none;
    }
    #hashtag-tags-scroll-area {
      display: flex;
      flex-direction: column;
    }

    .hashtag__tags-list {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: max-content;
      grid-template-rows: repeat(2, auto);
      overflow-x: auto;
      overflow-y: hidden;
      width: 100%;
      max-width: 100%;
      gap: 7px;
      list-style: none;
      padding: 0;
      margin: 0;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .hashtag__tags-list::-webkit-scrollbar {
      display: none;
    }

    .hashtag__tags-list-item {
      font-size: 12px;
      min-width: fit-content;
      text-align: center;
      white-space: nowrap;
    }

    .hashtag__tags-list-link {
      display: inline-block;
      white-space: nowrap;
    }

    .hashtag__tags-scroll-area {
      gap: 7px;
    }

    .hashtag__tags-list {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      width: 100%;
      gap: 7px;
      list-style: none;
      padding: 0;
      margin: 0;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
  }

  @media (min-width: 441px) {
    .hashtag__tags-scroll-area {
      gap: 0;
    }

    #hashtag-list-2 {
      display: none;
    }
  }
}

/*****************
  カテゴリー
*****************/
.category {
  margin-bottom: 100px;

  .category__inner {
    max-width: var(--common-contents-max-width);
    margin-inline: auto;

    @media screen and (min-width: 1920px) {
      max-width: 1400px;
    }
  }

  .category__card-list {
    display: grid;
    grid-template-columns: repeat(6, minmax(auto, 210px));
    grid-template-rows: repeat(auto-fill, minmax(auto, 210px));
    justify-content: center;
    place-items: center;
    gap: 17px;
    margin: 0;
    padding: 0;

    .category__card {
      aspect-ratio: 1;
      width: 100%;
    }
  }

  .category__card-list-item {
    position: relative;
    width: 180px;
    height: 180px;
    background-image: url("../images/korehana_category_bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.2s;

    @media screen and (min-width: 721px) {
      &:hover {
        transform: scale(1.1);
      }
    }
  }

  .category__card-link {
    display: block;
    width: 100%;
    height: 100%;
    margin: auto;
  }

  .category__card-link-text {
    text-align: center;
    position: absolute;
    inset: 0;
    margin: auto;
    width: 80%;
    height: fit-content;
    border-radius: 6px;
    color: #e64a19;
    font-size: 18px;
    font-weight: bold;
    font-family: var(--font-family-Source-Sans-Pro);
  }

  .category__card-link-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media (max-width: 440px) {
    margin-bottom: 60px;

    .category__card-list-container {
      padding: 0 19px;
    }

    .category__card-list {
      grid-template-columns: repeat(3, minmax(auto, 105px));
      grid-template-rows: repeat(auto-fill, minmax(auto, 105px));
      gap: 11px 9px;
    }

    .category__card-list-item {
      width: 100%;
      height: 0;
      padding-bottom: 100%;
      position: relative;

      img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .category__card-link-text {
      font-size: 10px;
      width: 85px;
      padding: 6px 0;
    }
  }
}

/*****************
  NEWS
*****************/
.news {
  margin-bottom: 150px;

  .news-inner {
    max-width: var(--common-contents-max-width);
    margin-inline: auto;

    @media screen and (min-width: 1920px) {
      max-width: 1400px;
    }
  }

  .news__contents-list {
    margin: 0 0 65px 0;
    padding: 0;
  }

  .news__contents-list-item {
    border-top: 1px solid #c4c4c4;

    &:last-child {
      border-bottom: 1px solid #c4c4c4;
    }

    a {
      display: block;
      padding: 25px 0;
      transition: transform 0.2s;
    }
  }

  @media screen and (min-width: 721px) {
    .news__contents-list-item:hover {
      a {
        transform: translateX(15px);
      }
    }
  }

  .news__contents-list-title {
    margin-bottom: 15px;
    font-size: 20px;
    font-family: var(--font-family-dnp-shuei-kaku-gothic);
    color: #051818;
  }

  .news__blog-published-date {
    position: relative;
    font-size: 14px;
    font-family: "Source Sans Pro", sans-serif;
    padding-left: 30px;

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      width: 20px;
      height: 20px;
      background-image: url("../images/korehana_clock_icon.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
  }

  @media (max-width: 440px) {
    margin-bottom: 64px;

    .news__contents-list-container {
      padding: 0 19px;
    }

    .news__contents-list {
      margin-bottom: 35px;
    }

    .news__contents-list-title {
      font-size: 14px;
    }

    .news__blog-published-date {
      font-size: 11px;
      padding-left: 18px;
      margin-bottom: 6px;

      &::before {
        width: 12px;
        height: 12px;
      }
    }

    .news__contents-list-title {
      margin-bottom: 10px;
    }

    .news__blog-published-date {
      margin-bottom: 0;
    }
  }
}

/*****************
  Contact Us
*****************/
.contact {
  margin-bottom: 200px;

  .contact__inner {
    max-width: var(--common-contents-max-width);
    margin-inline: auto;

    @media screen and (min-width: 1920px) {
      max-width: 1400px;
    }
  }

  .contact__image-container {
    width: 100%;
    margin-bottom: 72px;
    position: relative;
    overflow: hidden;

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

    &::before {
      content: "";
      position: absolute;
      left: -350px;
      bottom: -340px;
      width: 830px;
      height: 590px;
      background: url("../images/korehana_contact_bubble.webp") no-repeat center center / contain;
      transform: scale(1.2) translateY(50px);
      transition: opacity 0.6s, transform 0.6s;

      @media (max-width: 440px) {
        width: 206px;
        height: 147px;
        top: -54px;
        right: -25px;
        left: unset;
        bottom: unset;
        background: url("../images/korehana_contact_bubble_sp.webp") no-repeat center center / contain;
      }
    }

    &.is-show::before {
      opacity: 1;
      transform: scale(1.2) translateY(0);
    }
  }

  .contact__heading-text-container {
    margin-bottom: 48px;
    text-align: center;
    font-weight: bold;

    .contact__heading-text {
      font-size: 50px;
      font-family: var(--font-family-lato);
      margin-bottom: 34px;
    }

    .contact__preface-text {
      font-size: 24px;
      font-family: var(--font-family-dnp-shuei-kaku-gothic);
    }
  }

  .contact__description-text-container {
    text-align: center;
    margin-bottom: 50px;

    .contact__description-text {
      font-size: 14px;
    }
  }

  .contact__consult-on-line {
    max-width: 600px;
    margin-inline: auto;
    display: block;
    border: none;
    background-color: unset;
    transition: opacity 0.3s ease-in-out;

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

  @media screen and (min-width: 721px) {
    .contact__consult-on-line:hover {
      opacity: 0.8;
      cursor: pointer;
    }
  }

  @media (max-width: 440px) {
    .contact__image-container {
      margin-bottom: 32px;
    }

    .contact__heading-text-container {
      .contact__heading-text {
        font-size: 32px;
        margin-bottom: 17px;
      }

      .contact__preface-text {
        font-size: 14px;
      }
    }

    .contact__description-text-container {
      margin-bottom: 34px;
      padding: 0 19px;

      .contact__description-text {
        font-size: 12px;
        line-height: 2rem;
      }
    }

    .contact__consult-on-line {
      width: calc(100% - 38px);
    }
  }
}

/*****************
  フッター
*****************/
.footer {
  background: linear-gradient(to bottom, #f6ae7b, #e4937b, #d88d7e);

  &.is-show {
    opacity: 1;
    visibility: visible;
  }

  &.is-hide {
    opacity: 0;
    visibility: hidden;
  }

  .footer__inner {
    padding: 121px 205px 101px;
  }

  .footer__logo-text-container {
    width: 250px;
    height: auto;
    margin-bottom: 50px;
  }

  .footer__logo-text {
    color: #fff;
    font-size: 80px;
    font-family: var(--font-family-lato);
    text-decoration: none;
    line-height: 1;
    letter-spacing: 7px;
    margin-bottom: 10px;
    display: block;
    width: 100%;
    height: 100%;

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

  .footer__logo-description {
    color: #fff;
    font-size: 20px;
    font-family: var(--font-family-Source-Sans-Pro);
    width: fit-content;
    letter-spacing: 1px;
    padding-left: 5px;
  }

  .footer__link-list-container {
    margin-bottom: 50px;
  }

  .footer__logo-list-items {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 25px 75px;
  }

  .footer__link-text {
    font-size: 23px;
    color: #fff;
    font-family: var(--font-family-lato);
    text-decoration: none;
  }

  .footer__sns-icons-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px 30px;
    margin-bottom: 80px;
  }

  .footer__icon-container {
    width: 50px;
    height: 50px;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  .footer__copyright {
    width: fit-content;
    margin-inline: auto;
  }

  .footer__copyright-text {
    color: #fff;
    font-size: 22px;
    font-family: var(--font-family-Source-Sans-Pro);
    text-align: center;
  }

  .footer__copyright-text--mark {
    font-size: 1.7em;
    vertical-align: middle;
  }

  @media (max-width: 440px) {
    .footer__inner {
      padding: 60px 19px 53px;
    }

    .footer__logo-text {
      font-size: 40px;
    }

    .footer__logo-description {
      font-size: 13px;
      padding-left: 0;
    }

    .footer__logo-list-items {
      gap: 10px 20px;
    }

    .footer__link-text {
      font-size: 14px;
    }

    .footer__icon-container {
      width: 30px;
      height: 30px;
    }

    .footer__link-list-container {
      margin-bottom: 30px;
    }

    .footer__sns-icons-wrapper {
      margin-bottom: 34px;
    }

    .footer__copyright-text {
      font-size: 12px;
    }
  }
}

/* LINEの追従アイコン */
.tracking-line-icon {
  position: fixed;
  transform: translateY(50px);
  right: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;

  &.is-show {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    bottom: 20px;
    font-size: 0;
  }

  .tracking-line-icon__button {
    width: 110px;
    height: 110px;
    border-radius: 100vmax;
    overflow: hidden;
  }

  .tracking-line-icon__link {
    display: block;
  }

  .tracking-line-icon__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  @media screen and (max-width: 440px) {
    right: 10px;

    .tracking-line-icon__button {
      width: 90px;
      height: 90px;
    }

    &.is-show {
      bottom: 10px;
    }
  }
}

#tsparticles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  z-index: -1; /* 背景に回す */
  pointer-events: none;
}



/*****************
  singleページ
*****************/
.single-page-contents {
  max-width: 1400px;
  margin-inline: auto;
  margin-top: 80px;
}

.article {
  margin: 0 auto 190px;

  .article-title__text {
    font-size: 35px;
    font-weight: bold;
  }

  /* 記事本文内の YouTube 埋め込みをはみ出させない（モダン対応） */
  iframe[src*="youtube.com"],
  iframe[src*="youtu.be"] {
    width: 100% !important;   /* 幅は常にコンテナにフィット */
    max-width: 100%;
    aspect-ratio: 16 / 9;     /* 高さは自動計算（16:9） */
    height: auto;
    display: block;
  }

  /* 念のため、Gutenbergのラッパーもはみ出させない */
  .wp-block-embed,
  .wp-block-embed__wrapper,
  .wp-block-video {
    max-width: 100%;
  }

  .article__inner {
    max-width: var(--common-contents-max-width);
    margin-inline: auto;
  }

  .article__heading-contents {
    margin-bottom: 62px;
  }

  .article__heading-contents--top {
    max-width: 1400px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  .sns__title {
    letter-spacing: 0.1rem;
    margin-bottom: 20px;
    font-size: 24px;
  }

  .sns-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 16px;
  }

  .sns-icon {
    width: 48px;
  }

  .sns-icon-link {
    width: 100%;
    height: 100%;

    img {
      width: 100%;
      height: auto;
    }
  }

  .article__heading-contents--bottom {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px 24px;
    flex-wrap: wrap;
    margin-bottom: 30px;
  }

  .article-meta__category-list {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px 25px;
    flex-wrap: wrap;
  }

  .article-meta__category-list-item {
    border: 1px solid #D84315;
    border-radius: 100vmax;
    transition: background-color 0.2s;

    @media screen and (min-width: 721px) {
      &:hover {
        background-color: #D84315;
      }
    }

    a {
      display: block;
      font-size: 18px;
      color: #D84315;
      padding: 6px 20px;
      transition: color 0.2s;

      @media screen and (min-width: 721px) {
        &:hover {
          color: #fff;
        }
      }
    }
  }

  .article-meta__published-date {
    font-size: 16px;
    color: var(--base-font-color);
  }

  .article-meta__hash-tag {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 8px;
    color: #D84315;
    flex-wrap: wrap;
  }

  /* メインコンテンツ */
  .article__contents {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    column-gap: 90px;
  }

  .article__main-contents {
    max-width: 860px;
  }

  .article__thumbnail-container {
    max-width: 860px;

    .article__thumbnail {
      width: 100%;
      height: auto;
      object-fit: cover;
    }
  }

  .article__thumbnail-container {
    margin-bottom: 30px;
  }

  h2 {
    font-size: 25px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #464646;
  }

  p {
    margin-bottom: 80px;
  }


  /* サイドバーコンテンツ */
  .article__side-contents-container {
    max-width: 450px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    row-gap: 50px;
  }

  .article__side-contents--ad {
    width: 450px;
    height: 400px;
    background-color: pink;
  }
}

.category-group {
  margin-bottom: 65px;
}

/* 記事詳細ページ内にあるRECOMMENDコンテンツのスタイル */
.single-recommend {
  margin-bottom: 120px;

  .single-recommend__title-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    row-gap: 10px;
    width: fit-content;
    margin-bottom: 62px;
    margin-inline: auto;
    text-align: center;
  }

  .single-recommend__contents-container {
    max-width: 1400px;
    margin-inline: auto;
  }

  .single-recommend__title {
    font-size: 50px;
    font-family: var(--font-family-Source-Sans-Pro);
    font-weight: bold;
  }

  .single-recommend__subtitle {
    font-size: 24px;
    font-family: var(--font-family-dnp-shuei-kaku-gothic);
  }

  .single-recommend__blog-image-container {
    max-width: 320px;

    img {
      width: 100%;
      height: auto;
      object-fit: contain;
    }
  }

  .single-recommend__contents-list {
    margin-bottom: 50px;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    column-gap: 40px;
    flex-wrap: wrap;
  }

  .single-recommend__blog-list-item {
    max-width: 320px;
  }

  .single-recommend__blog-link {
    color: var(--base-font-color);
    text-decoration: none;
  }

  .single-recommend-blog__tag {
    display: inline-block;
    margin-right: 8px;
    color: #D84315;

    @media screen and (min-width: 721px) {
      &:hover {
        opacity: 0.8;
      }
    }
  }

  .single-recommend__blog-image-container {
    width: 320px;
    height: 100%;
    margin-bottom: 30px;
    border-radius: 6px;
    overflow: hidden;

    img {
      width: 100%;
      height: auto;
      object-fit: contain;
    }
  }

  .single-recommend__blog-title {
    font-family: var(--font-family-dnp-shuei-kaku-gothic);
    font-weight: bold;
    margin-bottom: 25px;
    font-size: 20px;
  }

  .single-recommend__blog-content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 14px;
    margin-bottom: 25px;
  }

  /* おすすめコンテンツに表示される本文はすべて親要素で指定した文字サイズに変更 */
  .single-recommend__blog-content h1,
  .single-recommend__blog-content h2,
  .single-recommend__blog-content h3,
  .single-recommend__blog-content h4,
  .single-recommend__blog-content h5,
  .single-recommend__blog-content h6 {
    font-size: inherit;
    font-weight: normal;
  }

  .single-recommend__blog-published-date {
    position: relative;
    font-size: 16px;
    font-family: "Source Sans Pro", sans-serif;
    padding-left: 30px;
    margin-bottom: 15px;

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      width: 20px;
      height: 20px;
      background-image: url("../images/korehana_clock_icon.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
  }
}

@media screen and (max-width: 440px) {
  .article {
    margin-bottom: 70px;

    h2 {
      font-size: 16px;
    }

    p {
      margin-bottom: 50px;
    }

    .article__heading-contents {
      padding: 0 21px;
      margin-bottom: 24px;
    }

    .article__heading-contents--top {
      margin-bottom: 15px;
    }

    .article-title__text{
      font-size: 18px;
    }

    .sns__container{
      display: none;
    }

    .article__side-contents {
      display: none;
    }

    .article-meta__category-list-item {
      a {
        font-size: 12px;
      }
    }

    .article__heading-contents--bottom {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px 0;
    }

    .article__contents {
      display: block;
      padding: 0 21px;
    }

    .article__thumbnail-container {
      margin-bottom: 30px;
    }
  }

  .single-recommend {
    margin-bottom: 60px;

    .single-recommend__title {
      font-size: 30px;
    }

    .single-recommend__subtitle {
      font-size: 14px;
    }

    .single-recommend__contents-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }

    .single-recommend__blog-image-container {
      width: 100%;
      margin-bottom: 10px;
    }

    .single-recommend__contents-container {
      padding: 0 18px;
    }

    .single-recommend__blog-title {
      font-size: 13px;
      margin-bottom: 10px;
    }

    .single-recommend__blog-content {
      display: none;
    }

    .single-recommend__blog-published-date {
      font-size: 11px;
      padding-left: 20px;

      &::before {
        width: 13px;
        height: 13px;
      }
    }

    .single-recommend-blog__tag {
      font-size: 11px;
    }
  }

  .category-group {
    padding-bottom: 20px;
    margin-bottom: 20px !important;
    border-bottom: 1px solid #464646;
  }
}


/*****************
  archiveページ
*****************/
.archive {
  max-width: var(--common-contents-max-width);
  margin-inline: auto;

  .archive__heading-container {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto 80px;

    .article-sns__container{
      position: absolute;
      top: 0;
      right: 0;
    }
  }

  .archive__title {
    width: fit-content;
    font-size: 50px;
    font-family: var(--font-family-Source-Sans-Pro);
    text-align: center;
    margin: 0 auto 40px;
  }

  .archive__subtitle {
    width: fit-content;
    font-size: 24px;
    font-family: var(--font-family-dnp-shuei-kaku-gothic);
    text-align: center;
    letter-spacing: 0.1em;
    margin-inline: auto;
  }

  .sns__container {
    position: absolute;
    top: 0;
    right: 0;
  }

  .archive__blog-list-container {
    max-width: 1400px;
    margin-inline: auto;
    margin-bottom: 100px;
  }

  .archive__blog-link {
    color: var(--base-font-color);
    text-decoration: none;
  }

  .archive__blog-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 50px;
    padding: 0;
    gap: 40px;
  }

  .archive__blog-card {
    max-width: 320px;
  }

  .archive__thumbnail-container {
    width: 100%;
    height: 159px;
    margin-bottom: 10px;
    border-radius: 6px;
    overflow: hidden;

    img {
      width: 100%;
      height: auto;
      object-fit: contain;
    }
  }

  .archive__blog-title {
    font-family: var(--font-family-dnp-shuei-kaku-gothic);
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: bold;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .archive__blog-content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 14px;
    margin-bottom: 15px;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-size: inherit;
      font-weight: normal;
    }
  }

  .archive__blog-published-date {
    position: relative;
    font-size: 16px;
    font-family: "Source Sans Pro", sans-serif;
    padding-left: 30px;
    margin-bottom: 8px;

    @media screen and (max-width: 440px) {
      padding-left: 18px;
    }

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      width: 20px;
      height: 20px;
      background-image: url("../images/korehana_clock_icon.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;

      @media screen and (max-width: 440px) {
        width: 13px;
        height: 13px;
      }
    }
  }

  .archive__blog-tag-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
  }

  .archive-blog__tag {
    color: #D84315;
  }

  .page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;

    li {
      width: 50px;
      aspect-ratio: 1;
      margin-left: 21px;

      &:not(:nth-child(3)) {
        &:last-child {
          margin-left: 21px;
        }
      }

      &:first-child,
      &:last-child {
        margin-left: 0;
      }

      &:has(span.dots) {
        margin-left: 0;
      }

      @media screen and (min-width: 721px) {
        &:hover {
          a {
            border: 1px solid #D84315;
            background-color: #D84315;
            color: #fff;
          }
        }
      }

      span,
      a {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100vmax;
        border: 1px solid #464646;
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
      }

      span.current {
        border: 1px solid #D84315;
        color: #D84315;
      }

      span.page-numbers.dots {
        border: none;
        align-items: flex-end;
      }
    }
  }

  .archive__no-post {
    font-size: 32px;
    width: fit-content;
    margin-inline: auto;
  }
}

/* Tiktokタグが付いている場合はサムネイルのサイズを縦長にする */
.archive.tag-tiktok {
  .archive__thumbnail-container {
    height: auto;
  }
}

/* 一覧ページあるtiktokセクション */
.archive-tiktok-section {
  margin-bottom: 100px;

  .archive-tiktok-section__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 50px;
    padding: 0;
    gap: 40px;

    @media (max-width: 440px) {
      grid-template-columns: repeat(2, 1fr);
      gap: 40px 20px;
      padding: 0 18px;
    }
  }

  .archive-tiktok-section__image-container {
    height: auto;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;

    @media (max-width: 440px) {
      margin-bottom: 15px;
    }

    img {
      width: 100%;
      height: auto;
      object-fit: contain;
    }
  }

  .archive-tiktok-section__title {
    font-size: 50px;
    font-family: var(--font-family-lato);
    margin-bottom: 25px;
    letter-spacing: 0.05em;

    @media (max-width: 440px) {
      font-size: 30px;
      padding: 0 18px;
    }

    @media (max-width: 375px) {
      font-size: clamp(26px, 8.09968847vw ,30px);
    }
  }

  .archive-tiktok-section__blog-title {
    font-family: var(--font-family-dnp-shuei-kaku-gothic);
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: bold;

    @media (max-width: 440px) {
      font-size: 13px;
    }
  }

  .archive-tiktok-section__blog-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 14px;
    margin-bottom: 15px;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-size: inherit;
      font-weight: normal;
    }

    @media (max-width: 440px) {
      font-size: 11px;
    }
  }

  .archive-tiktok-section__blog-published-date {
    position: relative;
    display: block;
    margin-bottom: 8px;
    padding-left: 30px;
    font-size: 16px;

    @media (max-width: 440px) {
      font-size: 11px;
      padding-left: 18px;
      margin-bottom: 6px;
    }


    &::before {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      width: 20px;
      height: 20px;
      background-image: url("../images/korehana_clock_icon.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;

      @media (max-width: 440px) {
        width: 13px;
        height: 13px;
      }
    }
  }

  .archive-tiktok-section__blog-tag-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;

    @media (max-width: 440px) {
      font-size: 14px;
    }

    a {
      color: #D84315;
    }
  }
}

@media screen and (max-width: 440px) {
  .archive {
    margin: 90px auto 0;

    .archive__title {
      font-size: 30px;
      margin: 0 auto 16px;
    }

    .archive__subtitle {
      font-size: 14px;
    }

    .sns__container {
      right: 18px;
    }

    .sns__title {
      display: none;
    }

    .sns-icon-container {
      flex-direction: column;
      row-gap: 8px;
    }

    .sns-icon {
      width: 23px;
    }

    .archive__blog-list-container {
      padding: 0 18px;
    }

    .archive__thumbnail-container {
      max-width: unset;
      width: 100%;
      height: auto;
      margin-bottom: 15px;
    }

    .archive__blog-list {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
    }

    .archive__blog-card {
      max-width: 47%;
      width: 100%;
    }

    .archive__blog-title{
      font-size: 13px;
      margin-bottom: 6px;
    }

    .archive__blog-content {
      font-size: 11px;
      margin-bottom: 6px;
    }

    .archive__blog-published-date {
      font-size: 11px;
    }

    .archive-blog__tag {
      font-size: 14px;
      margin-right: 5px;

      @media (max-width: 440px) {
        font-size: 11px;
      }

      &:last-child {
        margin-right: 0;
      }
    }

    .page-numbers {
      li {
        width: 40px;
        aspect-ratio: 1;
        margin-left: 12px;
      }
    }

    .hashTag-group {
      margin-bottom: 40px;
    }

    .category-group {
      padding-bottom: 20px;
      border-bottom: 1px solid #464646;
      margin-bottom: 22px;
    }

    .archive__no-post {
      font-size: 24px;
    }
  }
}


/* カテゴリーグループのスタイル */
.category-group {
  max-width: 1400px;
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

  .category-group__title-container {
    width: 205px;
    flex-shrink: 0;
  }

  .category-group__main-text {
    width: 100%;
    font-size: 30px;
    font-family: var(--font-family-Source-Sans-Pro);
    margin-bottom: 15px;
    font-weight: bold;
  }

  .category-group__sub-text {
    font-size: 16px;
    font-family: var(--font-family-dnp-shuei-kaku-gothic);
  }

  .category-group__list-container {
    padding-left: 40px;
    border-left: 1px solid #464646;
  }

  .category-group__list {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    flex-wrap: wrap;
  }

  .category-group__list-item {
    border: 1px solid #D84315;
    border-radius: 100vmax;
    transition: background-color 0.2s;

    @media screen and (min-width: 721px) {
      &:hover {
        background-color: #D84315;
      }
    }

    a {
      display: block;
      font-size: 18px;
      color: #D84315;
      padding: 6px 20px;
      transition: color 0.2s;

      @media screen and (min-width: 721px) {
        &:hover {
          color: #fff;
        }
      }
    }
  }
}

@media screen and (max-width: 440px) {
  .category-group {
    flex-direction: column;
    margin: 0 22px;

    .category-group__title-container {
      width: auto;
      margin-inline: auto;
      margin-bottom: 15px;
    }

    .category-group__main-text {
      font-size: 18px;
      text-align: center;
    }

    .category-group__sub-text {
      font-size: 11px;
      text-align: center;
    }

    .category-group__list-container {
      border-left: none;
      padding-left: 0;
      padding-bottom: 20px,
      border-bottom: 1px solid #464646;
    }

    .category-group__list {
      gap: 11px;
      justify-content: center;
    }

    .category-group__list-item {
      .category-group__list-link {
        font-size: 12px;
      }
    }
  }
}

@import "../../variable.css";

.hamburger-menu__container {
  position: absolute;
  z-index: -100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--common-contents-max-width);
  width: 100%;
  height: 100dvh;
  margin-inline: auto;
  background-color: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  .hamburger-menu-left-contents {
    width: 200px;
    text-align: center;

    @media screen and (max-width: 440px) {
      display: none;
    }

    .hamburger-menu-left-contents__sns {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 10px;
      transition: transform 0.7s, opacity 0.7s, -webkit-transform 0.7s;
      transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
      transition-delay: 0.08s;
      opacity: 0;
      transform: translate3d(-100px, 0, 0);
      will-change: transform;
      backface-visibility: hidden;
    }

    .hamburger-menu-left-contents__sns-text {
      font-size: 14px;
      font-family: var(--font-family-Source-Sans-Pro);
      font-weight: bold;
    }

    .hamburger-menu-left-contents__sns-icons {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0 16px;
    }

    .hamburger-menu-left-contents__sns-icon {
      width: 48px;
      height: 48px;
    }

    .hamburger-menu-left-contents__sns-link {
      display: block;
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    .hamburger-menu-left-contents__logo {
      text-align: center;
      margin-bottom: 60px;
      opacity: 0;
      pointer-events: none;
      transition: transform 0.5s, opacity 0.5s, webkit-transform 0.5s;
      transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
      transform: translate3d(-100px, 0, 0);

      img {
        width: 100%;
        height: auto;
      }
    }
  }

  .hamburger-menu-contents {
    margin-top: auto;
    width: 30%;
    height: 100dvh;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: transparent;
    align-items: center;
    justify-content: center;
    padding: 0 32px;

    @media screen and (max-width: 440px) {
      width: 100%;
      margin-top: 20%;
      justify-content: flex-start;
    }

    &.is-show {
      display: flex;
    }

    &.hide {
      display: none;
    }

    .hamburger-menu-contents__lists {
      width: 100%;
    }

    .hamburger-menu-contents__lists-container {
      width: 100%;
      margin-bottom: 7%;
    }

    .hamburger-menu-contents__list-item {
      text-align: center;
      transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s;
      transform: translate3d(50px, 0, 0);
      opacity: 0;
      border-bottom: 1px solid rgba(192, 192, 192, 0.6);

      &:last-of-type {
        border-bottom: none;
      }

      @media (min-width: 721px) {
        font-size: 1.8rem;
      }

      @media screen and (max-width: 440px) {
        font-size: 1.4rem;
      }

      &:nth-child(1) {
        transition-delay: 0.07s;
      }

      &:nth-child(2) {
        transition-delay: 0.14s;
      }

      &:nth-child(3) {
        transition-delay: 0.21s;
      }

      &:nth-child(4) {
        transition-delay: 0.28s;
      }
    }

    .hamburger-menu-contents__list-item-link {
      display: block;
      width: 100%;
      text-align: left;
      text-decoration: none;
      color: inherit;
      padding: 20px;
      transition: letter-spacing 0.4s;
      font-family: var(--font-family-Source-Sans-Pro);
      font-size: 22px;

      @media screen and (min-width: 721px) {
        &:hover {
          letter-spacing: 0.2em;
        }
      }

      .hamburger-menu-contents__list-item-link-text {
        position: relative;
        display: inline-block;
      }
    }
  }

  &.is-show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    position: static;
    z-index: 0;

    .hamburger-menu-left-contents__logo,
    .hamburger-menu-left-contents__sns,
    .hamburger-menu-contents__list-item,
    .hamburger-menu-contents__contact {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      pointer-events: auto;
    }
  }
}


/* ハッシュタググループのスタイル */
.hashTag-group {
  margin-bottom: 150px;
  max-width: 1400px;
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

  .hashTag-group__title-container {
    width: 205px;
    flex-shrink: 0;
  }

  .hashTag-group__main-text {
    width: 100%;
    font-size: 30px;
    cont-family: var(--font-family-Source-Sans-Pro);
    margin-bottom: 15px;
    font-weight: bold;
  }

  .hashTag-group__sub-text {
    font-size: 16px;
    font-family: var(--font-family-dnp-shuei-kaku-gothic);
  }

  .hashTag-group__list-container {
    padding-left: 40px;
    border-left: 1px solid #464646;
  }

  .hashTag-group__list {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    flex-wrap: wrap;
  }

  .hashTag-group__list-item {
    border: 1px solid #D84315;
    border-radius: 100vmax;
    transition: background-color 0.2s;

    @media screen and (min-width: 721px) {
      &:hover {
        background-color: #D84315;
      }
    }

    a {
      display: block;
      font-size: 18px;
      color: #D84315;
      padding: 6px 20px;
      transition: color 0.2s;

      @media screen and (min-width: 721px) {
        &:hover {
          color: #fff;
        }
      }
    }
  }
}

@media screen and (max-width: 440px) {
  .hashTag-group {
    flex-direction: column;
    padding: 0 22px;

    .hashTag-group__title-container {
      width: auto;
      margin-inline: auto;
      margin-bottom: 15px;
    }

    .hashTag-group__main-text {
      font-size: 18px;
      text-align: center;
    }

    .hashTag-group__sub-text {
      font-size: 11px;
      text-align: center;
    }

    .hashTag-group__list-container {
      border-left: none;
      padding-left: 0;
      padding-bottom: 20px,
      border-bottom: 1px solid #464646;
    }

    .hashTag-group__list {
      gap: 11px;
      justify-content: center;
    }

    .hashTag-group__list-item {
      .hashTag-group__list-link {
        font-size: 12px;
      }
    }
  }
}


.sns__container {
  width: fit-content;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}

.sns__title {
  letter-spacing: 0.1rem;
  margin-bottom: 20px;
  font-size: 24px;
}

.sns-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 16px;
}

.sns-icon {
  width: 48px;
}

.sns-icon-link {
  width: 100%;
  height: 100%;

  img {
    width: 100%;
    height: auto;
  }
}

.slick-pagination-bullets {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 25px;
  position: static;

  @media (max-width: 440px) {
    gap: 0 5px;
  }
}

.slick-pagination-bullet {
  width: 20px;
  height: 20px;
  background-color: #474646;

  @media (max-width: 440px) {
    width: 10px;
    height: 10px;
  }
}

/* サービスページ */
.page-template-page-about {
  .about__contents-container {
    margin-bottom: 40px;
  }

  .about-usage-process {
    margin-bottom: 100px;
  }

  .about-usage-process__label {
    width: 250px;
    font-size: 20px;
    display: inline-block;
    padding: 5px 20px;
    margin-bottom: 40px;
    border: 2px solid #d84315;
    border-radius: 100vmax;
    color: #d84315;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    background-color: transparent;
  }

  .about-usage-process__item-container {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0 20px;
  }

  .about-usage-process__left-item-container {
    width: 45px;
    height: auto;
    background-color: skyblue;
  }

  .about-usage-process__right-item {
    margin-bottom: 50px;

    &:last-of-type {
      margin-bottom: 0;
    }
  }

  .about-usage-process__right-item-heading {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .about-usage-process__right-item-description {
    font-size: 16px;
  }

  .section-title__container {
    margin-bottom: 30px;
  }

  .about-message__description {
    letter-spacing: 0.1em;
    line-height: 2.5em;
  }
}