@charset "UTF-8";
/* =========================================
共通
========================================= */
/* ---------- Variables ---------- */
/* ---------- Mixins ---------- */
/* ---------- Breakpoints (cell-ect) ---------- */
/* スマホ: 〜743 */
/* タブレット: 768〜1023 */
/* PC: 1024〜 */
/* SP（〜767）＝デフォルト */
/* ---------- Base ---------- */
html, body {
  height: 100%;
}

body {
  font-family: "Lato", "Noto Sans JP", sans-serif;
  color: #282828;
  background-color: #F5F3EE;
  min-height: 100dvh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

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

main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

body.is-drawer-open {
  overflow: hidden;
  -ms-touch-action: none;
      touch-action: none;
}

figure {
  margin-bottom: 0;
}

/* focus */
*:focus:not(:focus-visible) {
  outline: none;
}

*:focus-visible {
  outline: 2px solid #ccc;
  outline-offset: 2px;
}

.container {
  max-width: 1300px;
  margin-inline: auto;
  padding-inline: clamp(16px, 5.3vw, 28px);
}
@media (min-width: 744px) and (max-width: 1023px) {
  .container {
    padding-inline: clamp(35px, 5.3vw, 45px);
  }
}
@media (min-width: 1024px) {
  .container {
    padding-inline: 60px;
  }
}

.container--fv {
  max-width: 1180px;
  margin-inline: auto;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .container--fv {
    width: 100%;
    padding: 0 clamp(25px, 1.7vw, 33px) 0 clamp(35px, 2.4vw, 43px);
  }
}
@media (min-width: 1024px) {
  .container--fv {
    padding: 0 clamp(40px, 2.8vw, 47px) 0 clamp(50px, 3.5vw, 57px);
  }
}

.container--narrow {
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: clamp(16px, 5.3vw, 28px);
}
@media (min-width: 744px) and (max-width: 1023px) {
  .container--narrow {
    padding-inline: clamp(35px, 5.3vw, 45px);
  }
}
@media (min-width: 1024px) {
  .container--narrow {
    padding-inline: 0;
  }
}

.container--wide {
  max-width: 1400px;
  padding-inline: clamp(16px, 5.3vw, 28px);
}
@media (min-width: 744px) and (max-width: 1023px) {
  .container--wide {
    padding-inline: clamp(35px, 5.3vw, 45px);
  }
}
@media (min-width: 1024px) {
  .container--wide {
    padding-inline: 60px;
  }
}

/* =========================================
ヘッダー
========================================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  z-index: 500;
  background-color: transparent;
  -webkit-transition: background-color 0.3s ease, border-color 0.3s ease;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.header::before {
  display: none;
}
@media (min-width: 1024px) {
  .header {
    height: 110px;
  }
}

.header.is-active {
  background-color: transparent;
}
.header.is-active::before {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.header__inner {
  padding: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  z-index: 600;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .header__inner {
    padding: 25px;
  }
}
@media (min-width: 1024px) {
  .header__inner {
    padding: 25px 0 25px;
    max-width: 93%;
    margin-left: auto;
    margin-right: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;
    z-index: 600;
  }
}

.header__logo {
  width: 155px;
  position: relative;
  z-index: 600;
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  -webkit-transform-origin: left top;
          transform-origin: left top;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .header__logo {
    width: 200px;
  }
}
@media (min-width: 1024px) {
  .header__logo {
    width: 230px;
    position: relative;
    z-index: 200;
    -webkit-transition: -webkit-transform 0.4s ease;
    transition: -webkit-transform 0.4s ease;
    transition: transform 0.4s ease;
    transition: transform 0.4s ease, -webkit-transform 0.4s ease;
    -webkit-transform-origin: left top;
            transform-origin: left top;
  }
}

.header.is-active .header__logo,
.header.is-scrolled .header__logo {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}

/* =========================================
ドロワーメニュー
========================================= */
.header__nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: 100%;
  height: auto;
  background: #fff;
  z-index: 400;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 150px 10% 60px 10%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.22, 0.8, 0.2, 1);
  transition: -webkit-transform 0.5s cubic-bezier(0.22, 0.8, 0.2, 1);
  transition: transform 0.5s cubic-bezier(0.22, 0.8, 0.2, 1);
  transition: transform 0.5s cubic-bezier(0.22, 0.8, 0.2, 1), -webkit-transform 0.5s cubic-bezier(0.22, 0.8, 0.2, 1);
}
@media (min-width: 744px) and (max-width: 1023px) {
  .header__nav {
    width: 50%;
    padding: 110px 8% 60px 8%;
  }
}
@media (min-width: 1024px) {
  .header__nav {
    width: 50%;
    padding: 120px 6% 60px 6%;
  }
}

.header__nav.is-open {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

/* ---------- Menu list ---------- */
.header__menu {
  width: 100%;
  margin-bottom: 0;
}

.header__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.header__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-bottom: 27px;
}
@media (min-width: 1024px) {
  .header__item {
    margin-bottom: 45px;
  }
  .header__item:hover .header__link,
  .header__item:hover .header__link-sub {
    color: #B3A38A;
  }
}

.header__link {
  display: block;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  color: #282828;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-align: left;
}
@media (min-width: 1024px) {
  .header__link {
    font-size: 25px;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
  }
}

.header__link-sub {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 400;
  margin-top: 5px;
  letter-spacing: 0.1em;
  color: #282828;
}
@media (min-width: 1024px) {
  .header__link-sub {
    font-size: 14px;
    margin-top: 8px;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
  }
}

/* ---------- Dropdown ---------- */
.header__dropdown {
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.35s ease;
  transition: height 0.35s ease;
  padding-left: 15px;
  list-style: none;
}

.header__dropdown-item {
  margin-bottom: 15px;
  letter-spacing: 0.1em;
}
.header__dropdown-item:first-child {
  margin-top: 20px;
}
.header__dropdown-item a {
  text-decoration: none;
  font-size: 16px;
  color: #282828;
  position: relative;
  padding-left: 17px;
}
.header__dropdown-item a::before {
  content: "-";
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  -webkit-transform: scaleX(1.5) translateY(-1px);
          transform: scaleX(1.5) translateY(-1px);
  -webkit-transform-origin: left;
          transform-origin: left;
}
@media (min-width: 1024px) {
  .header__dropdown-item {
    margin-bottom: 25px;
  }
  .header__dropdown-item:first-child {
    margin-top: 35px;
  }
  .header__dropdown-item a {
    font-size: 18px;
    padding-left: 18px;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
  }
  .header__dropdown-item a:hover {
    color: #B3A38A;
  }
}

.header__dropdown-link--main {
  font-weight: 600;
}

/* ---------- Hamburger ---------- */
.drawer-icon {
  position: relative;
  z-index: 400;
  width: 48px;
  height: 48px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
}
.drawer-icon:focus:not(:focus-visible) {
  outline: none;
}
.drawer-icon:focus-visible {
  outline: 1px solid #ccc;
}
@media (min-width: 1024px) {
  .drawer-icon {
    width: 60px;
    height: 60px;
  }
}

.drawer-icon__bar {
  position: absolute;
  left: 10px;
  width: 38px;
  height: 1.5px;
  background-color: #282828;
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}
.drawer-icon__bar:nth-child(1) {
  top: 18px;
}
.drawer-icon__bar:nth-child(2) {
  top: 26px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .drawer-icon__bar {
    left: 5px;
  }
}
@media (min-width: 1024px) {
  .drawer-icon__bar {
    left: 0px;
    width: 55px;
  }
  .drawer-icon__bar:nth-child(1) {
    top: 20px;
  }
  .drawer-icon__bar:nth-child(2) {
    top: 30px;
  }
}

.drawer-icon.is-open .drawer-icon__bar {
  height: 1.5px;
}
.drawer-icon.is-open .drawer-icon__bar:nth-child(1) {
  -webkit-transform: translateY(4px) rotate(38deg);
          transform: translateY(4px) rotate(38deg);
}
.drawer-icon.is-open .drawer-icon__bar:nth-child(2) {
  -webkit-transform: translateY(-4px) rotate(-38deg);
          transform: translateY(-4px) rotate(-38deg);
}
@media (min-width: 1024px) {
  .drawer-icon.is-open .drawer-icon__bar:nth-child(1) {
    -webkit-transform: translateY(5px) rotate(38deg);
            transform: translateY(5px) rotate(38deg);
  }
  .drawer-icon.is-open .drawer-icon__bar:nth-child(2) {
    -webkit-transform: translateY(-5px) rotate(-38deg);
            transform: translateY(-5px) rotate(-38deg);
  }
}

/* ---------- Search ---------- */
.header__search {
  margin-top: 30px;
  width: 100%;
}
@media (min-width: 1024px) {
  .header__search {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}

.search-form {
  position: relative;
  width: 100%;
}

.search-input {
  width: 100%;
  height: 36px;
  border: 1px solid #282828;
  border-radius: 18px;
  background-color: #fff;
  padding: 0 45px 0 20px;
  font-size: 16px;
  outline: none;
  -webkit-appearance: none;
}
@media (min-width: 1024px) {
  .search-input {
    height: 50px;
    border: 1.5px solid #282828;
    border-radius: 25px;
    background-color: #fff;
    padding: 0 50px 0 30px;
    font-size: 18px;
  }
}

.search-button {
  position: absolute;
  right: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.search-button img {
  width: 20px;
  height: auto;
}
@media (min-width: 1024px) {
  .search-button img {
    width: 25px;
    margin-right: 10px;
  }
}

/* ---------- Keyword list ---------- */
.header__keyword {
  width: 100%;
  margin-top: 50px;
}
@media (min-width: 1024px) {
  .header__keyword {
    margin-top: 60px;
  }
}

.header__sub-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}
@media (min-width: 1024px) {
  .header__sub-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 13px;
  }
}

.keyword-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 2;
}
.keyword-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.keyword-list li a {
  text-decoration: none;
  color: #282828;
  font-size: 12px;
}
.keyword-list li:not(:last-child)::after {
  content: "|";
  margin: 0 12px;
  color: #282828;
  font-size: 12px;
  font-weight: 300;
}
@media (min-width: 1024px) {
  .keyword-list li a {
    font-size: 16px;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
  }
  .keyword-list li a:hover {
    color: #B3A38A;
  }
  .keyword-list li:not(:last-child)::after {
    font-size: 16px;
  }
}

.header__article-keyword {
  width: 100%;
  margin-top: 30px;
}
@media (min-width: 1024px) {
  .header__article-keyword {
    margin-top: 45px;
  }
}

/* ---------- SNS ---------- */
.header__sns {
  width: 100%;
  margin-top: 35px;
}
@media (min-width: 1024px) {
  .header__sns {
    margin-top: 45px;
  }
}

.sns-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 25px;
  list-style: none;
  padding: 0;
  margin: 18px 0 0; /* ← 元CSSは margin-top が上書きで消えてたので修正 */
}
@media (min-width: 1024px) {
  .sns-list {
    gap: 30px;
  }
}

.sns-link {
  display: block;
}
.sns-link img {
  width: 19px;
  height: auto;
  display: block;
}
@media (min-width: 1024px) {
  .sns-link {
    display: block;
  }
  .sns-link img {
    width: 23px;
    height: auto;
    display: block;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  }
  .sns-link:hover img {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}

/* =========================================
ファーストビュー
========================================= */
.fv {
  padding: 140px 0 0;
  width: 93%;
  margin: 0 auto;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .fv {
    padding: 140px 20px 0;
  }
}
@media (min-width: 1024px) {
  .fv {
    padding: 160px 0 0;
    max-width: 1300px;
    margin: 0 auto;
  }
}

.fv__inner {
  display: grid;
  gap: 24px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .fv__inner {
    grid-template-columns: 3.2fr 6.8fr;
    gap: 30px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
@media (min-width: 1024px) {
  .fv__inner {
    grid-template-columns: 3.5fr 6.5fr;
    gap: 50px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.fv__copy {
  max-width: 320px;
  margin: 0 auto 80px;
  padding: 0 35px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .fv__copy {
    margin: 0;
    padding: 0;
  }
}
@media (min-width: 1024px) {
  .fv__copy {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }
}

.fv__jp {
  max-width: 320px;
  margin: 0 auto;
  font-size: 14.5px;
  letter-spacing: 0.1em;
  text-align: left;
}
.fv__jp p {
  margin: 0;
  padding: 6px 0 9px;
  line-height: 1.8;
  font-weight: 500;
  position: relative;
}
.fv__jp p::after, .fv__jp p:first-child::before {
  content: "";
  position: absolute;
  left: -10px;
  width: calc(100% + 20px);
  height: 1px;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(57%, #282828), color-stop(57%, transparent));
  background-image: linear-gradient(to right, #282828 57%, transparent 57%);
  background-size: 10px 100%;
  background-repeat: repeat-x;
}
.fv__jp p::after {
  bottom: 0;
}
.fv__jp p:first-child::before {
  top: 0;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .fv__jp {
    font-size: 11px;
    letter-spacing: 0.05em;
  }
  .fv__jp p {
    padding: 8px 0 7px;
  }
  .fv__jp p::after, .fv__jp p:first-child::before {
    content: "";
    position: absolute;
    left: -3px;
    width: calc(100% + 6px);
    height: 1px;
    background-image: -webkit-gradient(linear, left top, right top, color-stop(57%, #282828), color-stop(57%, transparent));
    background-image: linear-gradient(to right, #282828 57%, transparent 57%);
    background-size: 8px 100%;
    background-repeat: repeat-x;
  }
  .fv__jp p::after {
    bottom: 0;
  }
  .fv__jp p:first-child::before {
    top: 0;
  }
}
@media (min-width: 1024px) {
  .fv__jp {
    margin: 0;
    margin-left: clamp(10px, 0.97vw, 20px);
    font-size: 16px;
  }
  .fv__jp p {
    margin: 0;
    padding: 9px 0 9px;
    line-height: 1.8;
    font-weight: 500;
    position: relative;
  }
  .fv__jp p::after, .fv__jp p:first-child::before {
    content: "";
    position: absolute;
    left: -3px;
    width: calc(100% + 6px);
    height: 1.5px;
    background-image: -webkit-gradient(linear, left top, right top, color-stop(57%, #282828), color-stop(57%, transparent));
    background-image: linear-gradient(to right, #282828 57%, transparent 57%);
    background-size: 8px 100%;
    background-repeat: repeat-x;
  }
}

.fv__en {
  margin-top: 12px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.7;
  text-align: left;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .fv__en {
    font-size: 8px;
  }
}
@media (min-width: 1024px) {
  .fv__en {
    font-size: 11px;
    margin: 15px 0 0 clamp(10px, 0.97vw, 20px);
  }
}

.fv__pick {
  width: 93%;
  margin: 0 auto;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .fv__pick {
    width: 100%;
    padding-inline: 0 clamp(5px, 0.3vw, 11px) 0 clamp(10px, 0.7vw, 17px);
  }
}
@media (min-width: 1024px) {
  .fv__pick {
    width: 100%;
  }
}

/* ---------- Pick card ---------- */
.pick-wrap {
  display: block;
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  position: relative;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .pick-wrap {
    max-width: 100%;
    margin-inline: 0;
  }
}
@media (min-width: 1024px) {
  .pick-wrap {
    max-width: 100%;
    margin-inline: 0;
  }
}

.pick-label {
  position: absolute;
  right: 12px;
  top: -5px;
  font-size: 13.5px;
  letter-spacing: 0.1em;
  font-weight: 600;
  -webkit-transform: rotate(4deg);
          transform: rotate(4deg);
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .pick-label {
    top: 0px;
    font-size: 17px;
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}

.pick-card {
  gap: 12px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  position: relative;
  aspect-ratio: 813/942;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .pick-card {
    aspect-ratio: 736/331;
    grid-template-columns: 44% 1fr;
  }
}
@media (min-width: 1024px) {
  .pick-card {
    aspect-ratio: 736/331;
  }
}

.pick-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.pick-card__bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: fill;
     object-fit: fill;
  display: block;
}

.pick-card__inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: clamp(50px, 8vw, 70px) clamp(42px, 8vw, 70px) clamp(38px, 10vw, 65px) clamp(30px, 7vw, 50px);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 100%;
  overflow: hidden;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .pick-card__inner {
    padding: clamp(38px, 2.6vw, 47px) clamp(40px, 2.8vw, 47px) clamp(35px, 2.4vw, 45px) clamp(30px, 2.1vw, 38px);
    display: grid;
    grid-template-columns: 0.5fr 1fr;
    -webkit-column-gap: clamp(20px, 1.4vw, 27px);
       -moz-column-gap: clamp(20px, 1.4vw, 27px);
            column-gap: clamp(20px, 1.4vw, 27px);
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
@media (min-width: 1024px) {
  .pick-card__inner {
    padding: clamp(40px, 3.9vw, 50px) clamp(50px, 4.8vw, 62px) clamp(40px, 3.9vw, 50px) clamp(45px, 4.3vw, 55px);
    display: grid;
    grid-template-columns: 0.4fr 1fr;
    -webkit-column-gap: clamp(24px, 2vw, 30px);
       -moz-column-gap: clamp(24px, 2vw, 30px);
            column-gap: clamp(24px, 2vw, 30px);
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
}

@media (min-width: 744px) and (max-width: 1023px) {
  .pick-card__inner--portrait {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
}

@media (min-width: 744px) and (max-width: 1023px) {
  .pick-card__inner--square {
    grid-template-columns: 0.48fr 1fr;
    -webkit-column-gap: clamp(22px, 1.8vw, 28px);
       -moz-column-gap: clamp(22px, 1.8vw, 28px);
            column-gap: clamp(22px, 1.8vw, 28px);
  }
}
@media (min-width: 1024px) {
  .pick-card__inner--square {
    grid-template-columns: 0.5fr 1fr;
    -webkit-column-gap: clamp(22px, 1.8vw, 28px);
       -moz-column-gap: clamp(22px, 1.8vw, 28px);
            column-gap: clamp(22px, 1.8vw, 28px);
  }
}

.pick-card__dot {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  background: #7CFF7A;
  border-radius: 50%;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  pointer-events: none;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .pick-card__dot {
    width: 15px;
    height: 15px;
  }
}

.pick-card__image {
  max-height: 52%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: clamp(12px, 2.5vh, 30px);
}
.pick-card__image img {
  max-width: 86%;
  max-height: 100%;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .pick-card__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 30%;
            flex: 0 0 30%;
    margin-bottom: 0;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    min-height: 100%;
  }
  .pick-card__image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
    display: block;
  }
}
@media (min-width: 1024px) {
  .pick-card__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 30%;
            flex: 0 0 30%;
    margin-bottom: 0;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    min-height: 100%;
  }
  .pick-card__image img {
    max-width: 95%;
    max-height: 100%;
    width: auto;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
    display: block;
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition: -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@media (min-width: 1024px) {
  .pick-card__image--portrait {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 30%;
            flex: 0 0 30%;
  }
  .pick-card__image--portrait img {
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition: -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

.pick-card__image--square {
  aspect-ratio: 1/1;
  width: 80%;
  max-width: 80%;
  max-height: none;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  margin-inline: auto;
  -ms-flex-item-align: center;
      align-self: center;
}
.pick-card__image--square img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  display: block;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .pick-card__image--square {
    width: 100%;
    max-width: none;
    aspect-ratio: 1/1;
    max-height: none;
    display: block;
    overflow: hidden;
    border-radius: 5px;
  }
  .pick-card__image--square img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    display: block;
  }
}
@media (min-width: 1024px) {
  .pick-card__image--square {
    width: 100%;
    max-width: none;
    aspect-ratio: 1/1;
    max-height: none;
    min-height: auto;
    display: block;
    overflow: hidden;
    border-radius: 5px;
  }
  .pick-card__image--square img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    display: block;
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition: -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@media (min-width: 744px) and (max-width: 1023px) {
  .pick-card__inner.pick-card__image--square {
    grid-template-columns: 0.48fr 1fr;
    -webkit-column-gap: clamp(22px, 1.8vw, 28px);
       -moz-column-gap: clamp(22px, 1.8vw, 28px);
            column-gap: clamp(22px, 1.8vw, 28px);
  }
}
@media (min-width: 1024px) {
  .pick-card__inner.pick-card__image--square {
    grid-template-columns: 0.5fr 1fr;
    -webkit-column-gap: clamp(22px, 1.8vw, 28px);
       -moz-column-gap: clamp(22px, 1.8vw, 28px);
            column-gap: clamp(22px, 1.8vw, 28px);
  }
}

@media (min-width: 1024px) {
  .pick-wrap:hover .pick-card__image img {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}

.pick-card__body {
  min-width: 0;
}

.pick-card__category {
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: rgba(245, 243, 238, 0.95);
}
@media (min-width: 1024px) {
  .pick-card__category {
    font-size: 18px;
    margin-bottom: clamp(6px, 0.58vw, 15px);
  }
}

.pick-card__title {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 700;
  letter-spacing: 0.05em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: justify;
  -moz-text-align-last: left;
       text-align-last: left;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .pick-card__title {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
@media (min-width: 1024px) {
  .pick-card__title {
    font-size: 17px;
    line-height: 1.6;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: clamp(8px, 0.78vw, 15px);
    -webkit-line-clamp: 2;
  }
}

.pick-card__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: 0.04em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: justify;
  -moz-text-align-last: left;
       text-align-last: left;
  /* ▼ 追加（欠け防止） */
  padding-bottom: 2px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .pick-card__text {
    font-size: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
@media (min-width: 1024px) {
  .pick-card__text {
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* =========================================
記事カード
========================================= */
.article-list {
  padding: 70px 0 0;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .article-list {
    padding: 75px 0 0;
  }
}
@media (min-width: 1024px) {
  .article-list {
    padding: 120px 0 0;
  }
}

.container {
  max-width: 640px;
  margin-inline: auto;
  padding-inline: clamp(16px, 5.3vw, 28px);
}
@media (min-width: 744px) and (max-width: 1023px) {
  .container {
    max-width: 1300px;
    margin-inline: auto;
    padding-inline: clamp(35px, 5.3vw, 45px);
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 1300px;
    margin-inline: auto;
    padding-inline: clamp(60px, 5.3vw, 60px);
  }
}

.article-list__inner {
  max-width: none;
  padding: 0;
}

/* ---------- 記事カード用メニュー ---------- */
.catnav {
  position: relative;
  font-size: 15px;
  line-height: 1;
  min-height: 1em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  gap: 15px;
  margin-bottom: 30px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.catnav::-webkit-scrollbar {
  display: none;
}
.catnav > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
@media (min-width: 1024px) {
  .catnav {
    font-size: 15px;
    margin-bottom: 45px;
  }
}
.catnav__all {
  opacity: 1;
}
.catnav__curationbtn {
  opacity: 0.35;
  overflow: hidden;
  max-width: 12ch;
  white-space: nowrap;
  -webkit-transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), max-width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), max-width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), max-width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), max-width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.catnav__sep {
  position: relative;
  width: 1px;
  height: 1.5em;
  margin: 0 2px;
  color: transparent;
}
.catnav__sep::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #282828;
}
.catnav__curation {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  -webkit-transform: translateX(-6px);
          transform: translateX(-6px);
  pointer-events: none;
  -webkit-transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), max-width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), max-width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), max-width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), max-width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.catnav__curation[hidden] {
  display: none !important;
}
@media (min-width: 1024px) {
  .catnav__curation {
    gap: 20px;
  }
}
.catnav__item {
  background: transparent;
  border: 0;
  padding: 0;
  text-decoration: none;
  color: #282828;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  white-space: nowrap;
  cursor: pointer;
  opacity: 1;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.catnav__item:hover {
  color: rgba(40, 40, 40, 0.7);
  opacity: 1;
}
@media (min-width: 1024px) {
  .catnav__item {
    font-size: 17px;
  }
}
.catnav__item.is-current {
  font-weight: 600;
  color: #282828;
}
.catnav {
  /* ALL と CURATION ボタン共通 */
}
.catnav__all, .catnav__curationbtn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #282828;
  text-decoration: none;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
@media (min-width: 1024px) {
  .catnav__all, .catnav__curationbtn {
    font-size: 20px;
  }
}
.catnav {
  /* OPEN */
}
.catnav.is-curation-open .catnav__curationbtn {
  opacity: 0;
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  max-width: 0;
  pointer-events: none;
  /* gapを残さないために流れから外す */
  position: absolute;
  left: -9999px;
}
.catnav.is-curation-open .catnav__all {
  opacity: 0.35;
}
.catnav.is-curation-open .catnav__curation {
  max-width: 2000px;
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  pointer-events: auto;
}
.catnav.is-curation-open .catnav__sep {
  display: inline-block;
}

/* 閉じアニメ中も CURATION ボタンは復帰させない（ズレ防止） */
.catnav.is-curation-closing .catnav__curationbtn {
  opacity: 0;
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  max-width: 0;
  pointer-events: none;
  position: absolute;
  left: -9999px;
}

/* ---------- 記事カード ---------- */
.postgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px 14px;
  grid-auto-flow: dense;
  margin-bottom: 100px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .postgrid {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px 14px;
  }
}
@media (min-width: 1024px) {
  .postgrid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 22px;
  }
}

.postcard--tall {
  grid-row: span 2;
}
.postcard--tall .postcard__thumb-inner {
  aspect-ratio: auto;
  height: auto;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.postcard--tall .postcard__thumb img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

@media (min-width: 1024px) {
  .postcard--tall .postcard__thumb-inner {
    height: 100%;
  }
}

@media (min-width: 1024px) {
  .postcard--tall .postcard__thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

.postcard--wide {
  grid-column: 1/-1;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .postcard--wide {
    grid-column: span 2;
    grid-row: span 2;
  }
}
@media (min-width: 1024px) {
  .postcard--wide {
    grid-column: span 2;
    grid-row: span 2;
  }
}
.postcard--wide .postcard__thumb-inner {
  aspect-ratio: 16/9.5;
  overflow: hidden;
  background: #fff;
  border-radius: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.postcard--wide .postcard__thumb img {
  height: 100%;
  width: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

.postcard__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
@media (min-width: 1024px) {
  .postcard__link:hover .postcard__thumb {
    background: #7CFF7A;
  }
  .postcard__link:hover .postcard__thumb-inner img {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}

.postcard__thumb {
  background: #fff;
  border-radius: 7px;
  padding: 4px;
  overflow: hidden;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .postcard__thumb {
    padding: 6px;
    overflow: visible;
  }
}
@media (min-width: 1024px) {
  .postcard__thumb {
    padding: 7px;
    overflow: visible;
    -webkit-transition: background 0.5s ease;
    transition: background 0.5s ease;
  }
}

.postcard:not(.postcard--tall):not(.postcard--wide) .postcard__thumb-inner {
  aspect-ratio: 16/9.5;
  overflow: hidden;
  background: #fff;
  border-radius: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.postcard:not(.postcard--tall):not(.postcard--wide) .postcard__thumb img {
  width: auto;
  height: 100% !important;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (min-width: 1024px) {
  .postcard__thumb-inner img {
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: -webkit-transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}

.postcard__title {
  margin-top: 8px;
  font-size: 10px;
  line-height: 1.65;
  font-weight: 500;
  letter-spacing: 0.05em;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .postcard__title {
    margin-top: 13px;
    font-size: 13px;
    line-height: 1.75;
  }
}

.postcard__meta {
  margin: 1px 0 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #B3A38A;
}
@media (min-width: 1024px) {
  .postcard__meta {
    margin: 2px 0 0;
    font-size: 12px;
  }
}

/* =========================================
ページネーション
========================================= */
.pager {
  margin: 55px auto 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(12px, 3.5vw, 22px);
  max-width: 100%;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .pager {
    margin-top: 70px;
  }
}
@media (min-width: 1024px) {
  .pager {
    margin-top: 100px;
    margin-bottom: 130px;
  }
}

.pager__arrow {
  display: grid;
  place-items: center;
  width: clamp(26px, 7vw, 34px);
  height: clamp(26px, 7vw, 34px);
  text-decoration: none;
  position: relative;
}
.pager__arrow.is-disabled {
  pointer-events: none;
}
.pager__arrow::before {
  content: none;
}
.pager__arrow span {
  display: none;
}
.pager__arrow img {
  width: clamp(18px, 5vw, 24px);
  height: auto;
  display: block;
}
.pager__arrow--next img {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.pager__nums {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(6px, 2vw, 10px);
}

.pager__num {
  width: clamp(28px, 8vw, 40px);
  height: clamp(28px, 8vw, 40px);
  display: grid;
  place-items: center;
  text-decoration: none;
  color: #282828;
  border: 1px solid #282828;
  border-radius: 6px;
  font-size: clamp(12px, 3.5vw, 16px);
  font-weight: 400;
  background: transparent;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .pager__num {
    border: 1.5px solid #282828;
  }
}
@media (min-width: 1024px) {
  .pager__num {
    border: 1.5px solid #282828;
    border-radius: 6px;
    font-size: clamp(12px, 3.5vw, 16px);
    font-weight: 400;
    -webkit-transition: background 0.5s ease, color 0.5s ease;
    transition: background 0.5s ease, color 0.5s ease;
  }
  .pager__num:hover {
    background: #282828;
    color: #fff;
  }
  .pager__num.is-current {
    background: #282828;
    color: #fff;
    border-color: #282828;
  }
}

/* =========================================
3カード 大枠
========================================= */
.threecards {
  position: relative;
  padding: clamp(28px, 8vw, 56px) 0 clamp(44px, 10vw, 80px);
}
.threecards::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  height: 72%;
  background: #E8E3D7;
  z-index: 3;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .threecards {
    padding-bottom: 50px;
  }
}
@media (min-width: 1024px) {
  .threecards {
    margin-bottom: 70px;
  }
}

@media (min-width: 744px) and (max-width: 1023px) {
  .threecards::before {
    top: 17%;
    -webkit-transform: none;
            transform: none;
    height: 55%;
  }
}
@media (min-width: 1024px) {
  .threecards::before {
    top: 14%;
    -webkit-transform: none;
            transform: none;
    height: 57%;
  }
}

.threecards__stack {
  position: relative;
  display: grid;
  gap: clamp(18px, 6vw, 28px);
  z-index: 5;
}
.threecards__stack > .newarticle {
  margin-top: clamp(24px, 7vw, 44px);
}
@media (min-width: 744px) and (max-width: 1023px) {
  .threecards__stack {
    padding-right: 10px;
  }
}
@media (min-width: 1024px) {
  .threecards__stack {
    gap: clamp(30px, 2.9vw, 36px);
  }
}

/* =========================================
3カード NEW ARTICLE 新着記事
========================================= */
.newarticle {
  margin-left: 40px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .newarticle {
    width: 85%;
    aspect-ratio: 900/325;
    height: auto;
    margin-inline: auto;
  }
}
@media (min-width: 1024px) {
  .newarticle {
    width: 85%;
    aspect-ratio: 900/325;
    height: auto;
    margin-inline: auto;
  }
}

.newarticle__card {
  position: relative;
  display: block;
  padding: clamp(22px, 6vw, 30px) clamp(22px, 6vw, 30px) clamp(12px, 4vw, 20px);
  border: 1px solid #282828;
  border-radius: 11px;
  background: #B3A38A;
  color: #282828;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .newarticle__card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    border: 1.5px solid #282828;
    display: grid;
    height: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: clamp(25px, 5vw, 35px) clamp(25px, 4vw, 35px);
  }
}
@media (min-width: 1024px) {
  .newarticle__card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    border: 2px solid #282828;
    border-radius: 15px;
    display: grid;
    height: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: clamp(40px, 3.9vw, 55px) clamp(40px, 3.9vw, 55px);
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
  .newarticle__card:hover .newarticle__media img {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}

.newarticle__badge {
  position: absolute;
  top: -36px;
  left: -36px;
  width: 70px;
  height: 70px;
  pointer-events: none;
  display: grid;
  place-items: center;
  z-index: 6;
}
.newarticle__badge img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  -webkit-animation: badge-spin 14s linear infinite;
          animation: badge-spin 14s linear infinite;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .newarticle__badge {
    position: absolute;
    top: clamp(-40px, -5.2vw, -30px);
    left: clamp(-40px, -5.2vw, -30px);
    width: clamp(75px, 9vw, 85px);
    height: clamp(75px, 9vw, 85px);
  }
}
@media (min-width: 1024px) {
  .newarticle__badge {
    position: absolute;
    top: clamp(-50px, -3vw, -40px);
    left: clamp(-50px, -3vw, -40px);
    width: clamp(90px, 9vw, 110px);
    height: clamp(90px, 9vw, 110px);
  }
}

.newarticle__badge-text {
  position: relative;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #B3A38A;
  line-height: 1;
  -webkit-transform: rotate(-25deg);
          transform: rotate(-25deg);
}
@media (min-width: 744px) and (max-width: 1023px) {
  .newarticle__badge-text {
    position: relative;
    font-size: 10px;
  }
}
@media (min-width: 1024px) {
  .newarticle__badge-text {
    position: relative;
    font-size: 13px;
  }
}

@-webkit-keyframes badge-spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes badge-spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.newarticle__mainlink {
  display: grid;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  text-decoration: none;
  color: inherit;
  padding-left: 45px;
  padding-bottom: 7px;
  position: relative;
  z-index: 1;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .newarticle__mainlink {
    min-width: 0;
    min-height: 0;
    grid-template-columns: 30px 7fr 7fr;
    gap: 20px;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    padding: 0;
  }
}
@media (min-width: 1024px) {
  .newarticle__mainlink {
    min-width: 0;
    min-height: 0;
    grid-template-columns: 45px 7fr 7fr;
    gap: 30px;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    padding: 0;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
}

.newarticle__rail {
  font-size: 14px;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1;
  position: absolute;
  left: clamp(5px, 1vw, 10px);
  letter-spacing: 0.1em;
}
.newarticle__rail::after {
  position: absolute;
  left: clamp(16px, 5.5vw, 24px);
  content: "";
  display: block;
  width: 1px;
  height: 128px;
  background: #282828;
  margin: 0 auto 0;
}
.newarticle__rail p {
  margin: 0;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  letter-spacing: 0.12em;
  font-weight: 600;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .newarticle__rail {
    position: static;
    left: clamp(16px, 5vw, 24px);
    top: clamp(18px, 5vw, 26px);
    place-items: initial;
    -ms-flex-line-pack: start;
        align-content: start;
    justify-items: start;
    padding-right: 8px;
    border-right: 1px solid #282828;
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 0.1em;
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
  }
  .newarticle__rail::after {
    content: none !important;
  }
  .newarticle__rail p {
    margin: 0;
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    letter-spacing: 0.12em;
    font-weight: 600;
  }
}
@media (min-width: 1024px) {
  .newarticle__rail {
    position: static;
    left: clamp(16px, 5vw, 24px);
    top: clamp(18px, 5vw, 26px);
    padding-right: 16px;
    border-right: 2px solid #282828;
    letter-spacing: 0.12em;
    font-size: 18px;
  }
  .newarticle__rail::after {
    content: none !important;
  }
  .newarticle__rail p {
    margin: 0;
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    letter-spacing: 0.12em;
    font-weight: 600;
  }
}

.newarticle__media {
  width: 100%;
  aspect-ratio: 16/9.5;
  border-radius: 7px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 16px;
}
.newarticle__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition: -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 744px) and (max-width: 1023px) {
  .newarticle__media {
    aspect-ratio: 16/10;
    margin-bottom: 0;
    border-radius: 6px;
  }
}
@media (min-width: 1024px) {
  .newarticle__media {
    aspect-ratio: 16/10;
    margin-bottom: 0;
  }
}

@media (min-width: 744px) and (max-width: 1023px) {
  .newarticle__body {
    min-width: 0;
    -ms-flex-line-pack: center;
        align-content: center;
  }
}
@media (min-width: 1024px) {
  .newarticle__body {
    min-width: 0;
    -ms-flex-line-pack: center;
        align-content: center;
  }
}

/* 共通カードテキスト（feature内でも使ってる） */
.card__title {
  font-size: 15px;
  letter-spacing: 0.07rem;
  margin: 0 0 4px;
  line-height: 1.6;
  font-weight: 600;
  text-align: justify;
  -moz-text-align-last: left;
       text-align-last: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .card__title {
    font-size: 18px;
    margin: 0 0 8px;
    line-height: 1.7;
  }
}

.card__meta {
  margin: 0 0 10px;
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 500;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .card__meta {
    font-size: 11px;
  }
}
@media (min-width: 1024px) {
  .card__meta {
    margin: 0 0 clamp(15px, 1.4vw, 18px);
    font-size: 12px;
    letter-spacing: 0.08em;
    font-weight: 500;
  }
}

.newarticle__text {
  font-size: 13px;
  letter-spacing: 0.07em;
  line-height: 1.65;
  text-align: justify;
  -moz-text-align-last: left;
       text-align-last: left;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 5.1em;
}
@media (min-width: 1024px) {
  .newarticle__text {
    font-size: 14px;
    letter-spacing: 0.07em;
    line-height: 1.75;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
}

/* =========================================
3カード FEATURE+QUOTES
========================================= */
.threecards-grid {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  grid-template-columns: minmax(180px, 1.2fr) minmax(120px, 0.8fr);
  gap: clamp(12px, 3vw, 22px);
}
@media (min-width: 744px) and (max-width: 1023px) {
  .threecards-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 50px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    width: 100%;
    margin-inline: auto;
  }
}
@media (min-width: 1024px) {
  .threecards-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: clamp(85px, 6vw, 95px);
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    width: 100%;
    margin-inline: auto;
  }
}

.section-head {
  font-size: 14px;
  text-align: right;
  margin: 0 0 7px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .section-head {
    font-size: 20px;
    letter-spacing: 0.07em;
  }
}
@media (min-width: 1024px) {
  .section-head {
    font-size: 27px;
  }
}

.quotes__viewport, .feature__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.quotes__viewport::-webkit-scrollbar, .feature__viewport::-webkit-scrollbar {
  display: none;
}

.quotes__track, .feature__track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  will-change: transform;
}

.quotes__slide, .feature__slide {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  scroll-snap-align: start;
}

/* =========================================
FEATURE 特集
========================================= */
.feature {
  margin-right: 50px;
  position: relative;
  -ms-flex-item-align: start;
      align-self: start;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .feature {
    margin-right: 0;
    width: 100%;
    min-width: 0;
  }
}
@media (min-width: 1024px) {
  .feature {
    margin-right: 0;
    width: 100%;
    min-width: 0;
  }
}

.feature__card {
  position: relative;
  display: grid;
  padding: clamp(22px, 6vw, 30px) clamp(45px, 12vw, 53px) clamp(26px, 7vw, 34px);
  border-radius: 11px;
  border: 1px solid #282828;
  background: #F8CE68;
  text-decoration: none;
  color: #282828;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .feature__card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    border: 1.5px solid #282828;
    height: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: clamp(22px, 6vw, 30px) clamp(50px, 12vw, 60px) clamp(30px, 7vw, 40px);
  }
}
@media (min-width: 1024px) {
  .feature__card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    border: 2px solid #282828;
    border-radius: 15px;
    height: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: clamp(28px, 2.7vw, 48px) clamp(110px, 10.7vw, 115px);
  }
}

.feature__head {
  position: absolute;
  left: 30px;
  top: 16px;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transform-origin: left top;
          transform-origin: left top;
  text-align: left;
  margin: 0;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .feature__head {
    top: clamp(15px, 3vw, 20px);
    left: 37px;
  }
}
@media (min-width: 1024px) {
  .feature__head {
    top: clamp(25px, 4vw, 30px);
    left: 55px;
  }
}

@media (min-width: 1024px) {
  .feature__slide {
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
  .feature__slide:hover .feature__media img {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}

.feature__media {
  border-radius: 7px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 13px;
}
.feature__media img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition: -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 744px) and (max-width: 1023px) {
  .feature__media {
    border-radius: 6px;
    margin-bottom: 15px;
  }
}
@media (min-width: 1024px) {
  .feature__media {
    margin-bottom: 18px;
  }
}

@media (min-width: 744px) and (max-width: 1023px) {
  .feature__card-meta {
    margin-bottom: 0;
  }
}
@media (min-width: 1024px) {
  .feature__card-meta {
    margin-bottom: 0;
  }
}

.feature__arrows {
  position: absolute;
  right: 10px;
  bottom: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 5;
}
@media (min-width: 1024px) {
  .feature__arrows {
    right: 14px;
    bottom: 12px;
  }
}

/* =========================================
QUOTES 名言集
========================================= */
.quotes {
  margin-top: 10px;
  margin-left: clamp(0px, 5vw, 40px);
  -ms-flex-item-align: start;
      align-self: start;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .quotes {
    width: 100%;
    min-width: 0;
    margin: 0;
    margin-top: 10px;
  }
}
@media (min-width: 1024px) {
  .quotes {
    width: 100%;
    min-width: 0;
    margin: 0;
    margin-top: 10px;
  }
}

.quotes__head {
  text-align: right;
  margin: 0 0 4px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
@media (min-width: 1024px) {
  .quotes__head {
    margin-bottom: 5px;
  }
}

.quotes__card {
  position: relative;
  border-radius: 11px;
  border: 1px solid #282828;
  background: #CAC9BD;
  color: #282828;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: clamp(22px, 6vw, 30px) clamp(22px, 6vw, 30px) clamp(35px, 14vw, 45px);
}
@media (min-width: 744px) and (max-width: 1023px) {
  .quotes__card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    border: 1.5px solid #282828;
    display: grid;
    height: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: clamp(40px, 2.8vw, 50px) clamp(40px, 2.8vw, 50px) clamp(55px, 3.8vw, 65px);
  }
}
@media (min-width: 1024px) {
  .quotes__card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    border: 2px solid #282828;
    border-radius: 15px;
    display: grid;
    height: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: clamp(45px, 3.1vw, 55px) clamp(45px, 3.1vw, 55px) clamp(55px, 3.8vw, 65px);
  }
}

/* スライドは100%幅。中身（content）だけ中央に寄せる */
.quotes__slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.quotes__content {
  max-width: 420px;
  margin-inline: auto;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .quotes__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 12px;
    margin-right: 0;
    margin-left: 0;
  }
}
@media (min-width: 1024px) {
  .quotes__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 15px;
    margin-right: 0;
    margin-left: 0;
  }
}

.quotes__text {
  margin: 0 0 10px;
  line-height: 1.7;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .quotes__text {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.9;
    margin: 0;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
  }
}
@media (min-width: 1024px) {
  .quotes__text {
    font-size: 19px;
    font-weight: 400;
    line-height: 1.9;
    margin: 0;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
  }
}

.quotes__author {
  margin: 0;
  font-size: 11px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .quotes__author {
    font-size: 12px;
    letter-spacing: 0.06em;
    line-height: 1.8;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
  }
}
@media (min-width: 1024px) {
  .quotes__author {
    font-size: 16px;
    letter-spacing: 0.06em;
    line-height: 1.8;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
  }
}

@media (min-width: 744px) and (max-width: 1023px) {
  .quotes__text,
  .quotes__author {
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    text-orientation: mixed;
    line-height: 1.9;
    letter-spacing: 0.08em;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
  }
}
@media (min-width: 1024px) {
  .quotes__text,
  .quotes__author {
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    text-orientation: mixed;
    line-height: 1.9;
    letter-spacing: 0.08em;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
  }
}

.quotes__arrows {
  position: absolute;
  right: 10px;
  bottom: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (min-width: 1024px) {
  .quotes__arrows {
    right: 14px;
    bottom: 12px;
  }
}

/* ---------- スライダー用矢印 ---------- */
.navarrow {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;
  cursor: pointer;
}
.navarrow img {
  width: 18px;
  height: auto;
  display: block;
}
.navarrow--next img {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
@media (min-width: 744px) and (max-width: 1023px) {
  .navarrow {
    width: 40px;
    height: 40px;
  }
  .navarrow img {
    width: 21px;
  }
}
@media (min-width: 1024px) {
  .navarrow {
    width: 40px;
    height: 40px;
  }
  .navarrow img {
    width: 25px;
  }
}

/* =========================================
トップに戻るボタン
========================================= */
.backtotop {
  position: fixed;
  right: clamp(8px, 1.5vw, 14px);
  bottom: clamp(80px, 18vw, 100px);
  z-index: 200;
  width: 40px;
  border: none;
  background: transparent;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  -webkit-transform: translateY(8px);
          transform: translateY(8px);
  -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: opacity 0.4s ease, -webkit-transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.backtotop.is-floating {
  bottom: clamp(200px, 26vw, 280px);
}
.backtotop.is-visible {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.backtotop img {
  width: 27px;
  height: auto;
}

@media (min-width: 1024px) {
  .backtotop {
    width: 60px;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
  .backtotop:hover {
    opacity: 0.8;
  }
  .backtotop img {
    width: 33px;
  }
}
/* =====================
  フッター
===================== */
/* --- フッター 全体 --- */
.footer {
  background: none;
  padding: clamp(44px, 10vw, 80px) 0 0;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .footer {
    padding-top: 30px;
  }
}
@media (min-width: 1024px) {
  .footer {
    padding-top: 0;
  }
}
.footer .container {
  max-width: 640px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .footer .container {
    width: 80%;
  }
}
@media (min-width: 1024px) {
  .footer .container {
    max-width: 800px;
  }
}

.footer__inner {
  display: grid;
  gap: clamp(60px, 15vw, 80px);
}
@media (min-width: 1024px) {
  .footer__inner {
    gap: 120px;
  }
}

/* --- フッター メニュー部分 --- */
.footer__menu-wrap {
  width: 100%;
}

.footer__menu {
  width: 100%;
}

.footer__menu-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding-bottom: 3px;
  border-bottom: 1px solid #282828;
}
@media (min-width: 1024px) {
  .footer__menu-title {
    border-bottom: 1.5px solid #282828;
    font-size: 20px;
    letter-spacing: 0.07em;
  }
}

.footer__menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__menu-item {
  border-bottom: 1px solid #282828;
}
@media (min-width: 1024px) {
  .footer__menu-item {
    border-bottom: 1.5px solid #282828;
  }
}

.footer__menu-link,
.footer__acc-btn {
  width: 100%;
  background: none;
  border: 0;
  padding: 18px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #282828;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .footer__acc-btn {
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
    gap: 12px;
  }
  .footer__acc-btn:hover {
    color: #B3A38A;
  }
}

@media (min-width: 1024px) {
  .footer__menu-link {
    gap: 12px;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
  }
  .footer__menu-link:hover {
    color: #B3A38A;
  }
}

.footer__menu-en {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.2;
}
@media (min-width: 1024px) {
  .footer__menu-en {
    font-size: 23px;
    font-weight: 600;
    letter-spacing: 0.07em;
    line-height: 1.2;
  }
}

.footer__menu-jp {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.05em;
}
@media (min-width: 1024px) {
  .footer__menu-jp {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.07em;
  }
}

/* --- アコーディオン アイコン --- */
.footer__acc-icon {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
}
.footer__acc-icon img {
  width: 15px;
  height: auto;
  display: block;
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: -webkit-transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 開いたら180度回転（右→下に） */
.footer__menu-item--open .footer__acc-icon img {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

/* --- アコーディオンパネル --- */
.footer__acc-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
  -webkit-transition: max-height 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease, -webkit-transform 0.35s ease;
  transition: max-height 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease, -webkit-transform 0.35s ease;
  transition: max-height 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease, transform 0.35s ease;
  transition: max-height 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease, transform 0.35s ease, -webkit-transform 0.35s ease;
  padding-bottom: 0;
}

.footer__menu-item--open .footer__acc-panel {
  max-height: 300px;
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  padding-bottom: 22px;
}
.footer__menu-item--open .footer__acc-btn {
  padding-bottom: 0;
}

.footer__acc-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0;
}
.footer__acc-list li {
  padding: 10px 0 0;
}
@media (min-width: 1024px) {
  .footer__acc-list li {
    padding: 13px 0 0;
  }
}

.footer__acc-link {
  color: #282828;
  opacity: 0.9;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.08em;
  position: relative;
  padding-left: 14px;
}
.footer__acc-link::before {
  content: "-";
  position: absolute;
  left: 0;
  top: 0;
}
.footer__acc-link:hover {
  opacity: 0.85;
}
@media (min-width: 1024px) {
  .footer__acc-link {
    font-size: 17px;
    letter-spacing: 0.1em;
    padding-left: 15px;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
  }
  .footer__acc-link:hover {
    color: #B3A38A;
  }
}

.footer__acc-link--main {
  font-weight: 600;
}

/* --- フッター 黒帯部分 --- */
.footer__brand-wrap {
  background: #282828;
  color: #fff;
  padding: clamp(35px, 9.8vw, 40px) 0 40px;
  display: grid;
  gap: 26px;
  place-items: center;
  text-align: center;
  /* 画面端までフルブリード（ズレにくい版） */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* 中身の左右余白は今まで通り */
  padding-inline: clamp(16px, 5.3vw, 28px);
}
@media (min-width: 744px) and (max-width: 1023px) {
  .footer__brand-wrap {
    padding: clamp(40px, 5vw, 35px) 0 35px;
    gap: 25px;
  }
}
@media (min-width: 1024px) {
  .footer__brand-wrap {
    padding: 55px 50px 40px;
    gap: 30px;
  }
}

.footer__logo {
  display: grid;
  place-items: center;
  width: 100%;
}
.footer__logo img {
  width: clamp(150px, 40vw, 170px);
  height: auto;
  display: block;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .footer__logo {
    padding-top: 0;
  }
  .footer__logo img {
    width: clamp(120px, 20vw, 130px);
  }
}

.footer__bottom {
  width: 100%;
  text-align: center;
  display: grid;
  gap: 6px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .footer__bottom {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 30px;
  }
}
@media (min-width: 1024px) {
  .footer__bottom {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 30px;
  }
}

.footer__nav {
  font-size: 12px;
  letter-spacing: 0.05rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.footer__nav a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}
.footer__nav a:hover {
  opacity: 0.85;
}
@media (min-width: 1024px) {
  .footer__nav {
    font-size: 14px;
    letter-spacing: 0.08rem;
    gap: 10px;
  }
  .footer__nav a {
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
  .footer__nav a:hover {
    opacity: 0.7;
  }
}

.footer__sep {
  color: #fff;
}

.footer__copy {
  color: #fff;
  font-size: 12px;
}
@media (min-width: 1024px) {
  .footer__copy {
    font-size: 14px;
  }
}

/* =====================
  ARTICLES 最新記事
===================== */
.articles-loop {
  position: relative;
  padding: 60px 0 60px;
  background: #cac9bd;
}
@media (min-width: 1024px) {
  .articles-loop {
    margin-top: 100px;
    padding: 100px 0 100px;
  }
}

.articles-loop > .container {
  margin-bottom: 45px;
}
@media (min-width: 1024px) {
  .articles-loop > .container {
    margin-bottom: 75px;
  }
}

.articles-loop__title-wrap {
  text-align: center;
}

.articles-loop__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1em;
  margin-bottom: 3px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .articles-loop__title {
    font-size: 25px;
    margin-bottom: 6px;
  }
}
@media (min-width: 1024px) {
  .articles-loop__title {
    font-size: 40px;
    margin-bottom: 9px;
  }
}

.articles-loop__sub {
  color: #282828;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .articles-loop__sub {
    font-size: 14px;
  }
}
@media (min-width: 1024px) {
  .articles-loop__sub {
    font-size: 17px;
  }
}

.articles-loop__slider .splide__track {
  overflow: hidden;
}

.articles-loop__slider .splide__list {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.articles-loop__slider .splide__slide {
  width: 170px !important;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .articles-loop__slider .splide__slide {
    width: 220px !important;
  }
}
@media (min-width: 1024px) {
  .articles-loop__slider .splide__slide {
    width: 260px !important;
  }
}

.articles-loop__card {
  width: 100%;
}

.articles-loop__link {
  display: block;
  text-decoration: none;
  color: #282828;
}
@media (min-width: 1024px) {
  .articles-loop__link {
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
  .articles-loop__link:hover .articles-loop__thumb img {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}

.articles-loop__thumb {
  display: block;
  margin: 0;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.28);
}
@media (min-width: 1024px) {
  .articles-loop__thumb {
    border-radius: 10px;
  }
}

.articles-loop__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition: -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.articles-loop__body {
  margin-top: 13px;
}

.articles-loop__meta-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 10px;
  margin-bottom: 7px;
}
@media (min-width: 1024px) {
  .articles-loop__meta-row {
    gap: 12px;
  }
}

.articles-loop__tax {
  min-width: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #986a53;
}
@media (min-width: 1024px) {
  .articles-loop__tax {
    font-size: 15px;
  }
}

.articles-loop__date {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: #282828;
  opacity: 0.6;
}
@media (min-width: 1024px) {
  .articles-loop__date {
    font-size: 12px;
  }
}

.articles-loop__item-title {
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.05em;
  font-weight: 500;
  text-align: justify;
  -moz-text-align-last: left;
       text-align-last: left;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .articles-loop__item-title {
    font-size: 15px;
  }
}

/* CTAボタン */
.articles-loop__cta {
  margin-top: 40px;
  text-align: center;
}
@media (min-width: 1024px) {
  .articles-loop__cta {
    margin-top: 60px;
  }
}

.articles-loop__btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 240px;
  height: 56px;
  padding: 0 27px;
  border-radius: 999px;
  background: -webkit-gradient(linear, left top, right top, from(#111), to(#1c1c1c));
  background: linear-gradient(90deg, #111 0%, #1c1c1c 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
}
@media (min-width: 1024px) {
  .articles-loop__btn {
    min-width: 280px;
    height: 60px;
    font-size: 16px;
    -webkit-transition: background-color 0.3s ease, color 0.3s ease, -webkit-transform 0.3s ease;
    transition: background-color 0.3s ease, color 0.3s ease, -webkit-transform 0.3s ease;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, -webkit-transform 0.3s ease;
  }
  .articles-loop__btn:hover {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
    background: #fff;
    color: #282828;
  }
}

.articles-loop__arrow {
  width: 9px;
  margin-left: 10px;
  fill: currentColor;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  -webkit-transform: translateY(1px);
          transform: translateY(1px);
}
@media (min-width: 1024px) {
  .articles-loop__arrow {
    width: 9px;
    margin-left: 10px;
  }
  .articles-loop__btn:hover .articles-loop__arrow {
    -webkit-transform: translateX(4px);
            transform: translateX(4px);
  }
}

/* =========================================

  SINGLE 記事詳細ページ

========================================= */
.page-single {
  position: relative;
  isolation: isolate;
  padding-top: 120px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .page-single {
    padding-top: 140px;
  }
}
.page-single::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: clamp(260px, 65vw, 300px);
  background: #B3A38A;
  z-index: 0;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .page-single::before {
    height: clamp(370px, 50.8vw, 380px);
  }
}
@media (min-width: 1024px) {
  .page-single::before {
    height: clamp(440px, 42vw, 460px);
  }
}

.page-single-article {
  position: relative;
  isolation: isolate;
  padding-top: 120px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .page-single-article {
    padding-top: 140px;
  }
}
.page-single-article::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: clamp(260px, 65vw, 300px);
  background: #986a53;
  z-index: 0;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .page-single-article::before {
    height: clamp(370px, 50.8vw, 380px);
  }
}
@media (min-width: 1024px) {
  .page-single-article::before {
    height: clamp(440px, 42vw, 460px);
  }
}

.page-single-article--feature::before {
  background: #FFC868;
}

.single__article {
  position: relative;
  z-index: 1;
}

.single__hero {
  display: grid;
  margin-bottom: 18px;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
@media (min-width: 1024px) {
  .single__hero {
    margin-top: 30px;
  }
}

/* --- SINGLE:パンくずリスト --- */
.single__breadcrumb {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  margin-bottom: clamp(20px, 5vw, 30px);
}
@media (min-width: 744px) and (max-width: 1023px) {
  .single__breadcrumb {
    margin-bottom: 20px;
  }
}

.breadcrumb {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  font-size: 11px;
  letter-spacing: 0.06em;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .breadcrumb {
    font-size: 13px;
  }
}
@media (min-width: 1024px) {
  .breadcrumb {
    font-size: 14px;
  }
}
.breadcrumb > li {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  min-width: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.breadcrumb > li a {
  text-decoration: none;
  color: #282828;
}
.breadcrumb > li a:hover {
  opacity: 0.75;
}
.breadcrumb > li::after {
  content: "│";
  margin-left: 4px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.breadcrumb > li:last-child::after {
  content: none;
}
.breadcrumb {
  /* 最後だけが残り幅を使って省略される */
}
.breadcrumb > li.current-item,
.breadcrumb > li:last-child {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================
   Single Page - Hero Media（アイキャッチ画像）
========================================== */
.single__hero-media {
  width: 100%;
  aspect-ratio: 16/9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.single__hero-media:has(.is-landscape) {
  aspect-ratio: auto;
  height: auto;
}

.single__hero-media:has(.is-portrait) {
  aspect-ratio: auto;
  height: 61.875vw;
}
@media (min-width: 1024px) {
  .single__hero-media:has(.is-portrait) {
    aspect-ratio: 16/9;
    height: auto;
  }
}

.single__thumb {
  --pad: 6px;
  background: #fff;
  border-radius: 10px;
  padding: var(--pad);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (min-width: 1024px) {
  .single__thumb {
    --pad: 10px;
    border-radius: 15px;
  }
}

.single__thumb img {
  display: block;
  border-radius: 7px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (min-width: 1024px) {
  .single__thumb img {
    border-radius: 12px;
  }
}

.single__thumb.is-portrait {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  height: 100%;
}

.single__thumb.is-portrait img {
  width: auto;
  height: 100%;
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.single__thumb.is-landscape {
  width: 100%;
  height: auto;
}

.single__thumb.is-landscape img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.single__hero-text {
  margin-top: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #282828;
}
@media (min-width: 1024px) {
  .single__hero-text {
    margin-top: 50px;
    padding-bottom: 30px;
    border-bottom: 2px solid #282828;
  }
}

.single__meta {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 600;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  line-height: 1;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .single__meta {
    font-size: 16px;
  }
}
@media (min-width: 1024px) {
  .single__meta {
    font-size: 16px;
    line-height: 16px;
    gap: 15px;
    margin-bottom: 17px;
  }
}

.single__meta > * {
  line-height: 1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.single__cat {
  font-size: 13px;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: #B3A38A;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .single__cat {
    font-size: 17px;
  }
}
@media (min-width: 1024px) {
  .single__cat {
    font-size: 22px;
  }
}

.single-article__cat {
  font-size: 13px;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: #986a53;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .single-article__cat {
    font-size: 17px;
  }
}
@media (min-width: 1024px) {
  .single-article__cat {
    font-size: 22px;
  }
}

.single__sep {
  color: #282828;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .single__sep {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 14px;
    line-height: 1;
    -webkit-transform: translateY(-0.04em);
            transform: translateY(-0.04em);
  }
}

.single__date {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .single__date {
    font-size: 14px;
  }
}
@media (min-width: 1024px) {
  .single__date {
    font-size: 17px;
  }
}

.single__title {
  margin: 0;
  font-size: 20px;
  line-height: 1.65;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: justify;
  -moz-text-align-last: left;
       text-align-last: left;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .single__title {
    font-size: 25px;
  }
}
@media (min-width: 1024px) {
  .single__title {
    font-size: 32px;
    line-height: 1.7;
    letter-spacing: 0.08em;
  }
}

.single__body {
  margin-top: 28px;
  display: grid;
  gap: 18px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .single__body {
    gap: 18px;
  }
}
@media (min-width: 1024px) {
  .single__body {
    gap: 22px;
  }
}
.single__body h2 {
  padding-left: 17px;
  position: relative;
  font-size: 17.5px;
  line-height: 1.75;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 5px;
}
.single__body h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 3px;
  background: #B3A38A;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .single__body h2 {
    padding-left: 19px;
    font-size: 20px;
  }
}
@media (min-width: 1024px) {
  .single__body h2 {
    padding-left: 22px;
    font-size: 24px;
    line-height: 1.8;
    letter-spacing: 0.1em;
  }
  .single__body h2::before {
    top: 0.2em;
    bottom: 0.2em;
    width: 5px;
  }
}
.single__body h3 {
  margin: 10px 0 0;
  font-size: 16.5px;
  line-height: 1.85;
  font-weight: 600;
  letter-spacing: 0.06em;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .single__body h3 {
    font-size: 18px;
  }
}
@media (min-width: 1024px) {
  .single__body h3 {
    margin: 20px 0 0;
    font-size: 22px;
  }
}
.single__body p {
  margin: 0;
  font-size: 14.5px;
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: justify;
  -moz-text-align-last: left;
       text-align-last: left;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .single__body p {
    margin: 0;
    font-size: 16px;
    line-height: 2rem;
  }
}
@media (min-width: 1024px) {
  .single__body p {
    margin-top: 42px;
    gap: 22px;
    margin: 0;
    font-size: 18px;
    line-height: 2.25rem;
  }
}
.single__body a {
  color: #00b683;
  position: relative;
  white-space: nowrap;
}
.single__body a::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-left: 0.1em;
  vertical-align: -0.22em;
  background: currentColor;
  mask: url("../img/link-icon.svg") no-repeat center/contain;
  -webkit-mask: url("../img/link-icon.svg") no-repeat center/contain;
}
.single__body img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}
.single__body .is-image-80 {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.single__body .is-image-80 img {
  display: block;
  width: 100%;
  height: auto;
}
.single__body .is-image-60 {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}
.single__body .is-image-60 img {
  display: block;
  width: 100%;
  height: auto;
}
.single__body .is-image-full {
  width: 100%;
}
.single__body .is-image-full img {
  display: block;
  width: 100%;
  height: auto;
}

.single__body p.single__body-notes {
  font-size: 10px;
  line-height: 1.7;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .single__body p.single__body-notes {
    font-size: 12px;
    line-height: 1.7;
  }
}
@media (min-width: 1024px) {
  .single__body p.single__body-notes {
    font-size: 14px;
    line-height: 1.7;
  }
}

.wp-element-caption {
  font-size: 10px;
  line-height: 1.7;
  text-align: right;
  margin-top: 8px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .wp-element-caption {
    font-size: 12px;
    line-height: 1.7;
    margin-top: 9px;
  }
}
@media (min-width: 1024px) {
  .wp-element-caption {
    font-size: 14px;
    line-height: 1.7;
    margin-top: 10px;
  }
}

/* セクション見出し（TAG/SHARE） */
.single__sec-title {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .single__sec-title {
    font-size: 23px;
  }
}
@media (min-width: 1024px) {
  .single__sec-title {
    font-size: 25px;
    margin-bottom: 15px;
  }
}

.single__img {
  margin: 15px 0 15px;
}
@media (min-width: 1024px) {
  .single__img {
    margin: 25px 0 25px;
  }
}

/* =========================================
  タグとシェアボタン
========================================= */
.single__meta-bottom {
  margin: clamp(67px, 18vw, 85px) 0;
  padding-top: 30px;
  border-top: 1px solid #282828;
  display: grid;
  gap: 28px;
}
@media (min-width: 1024px) {
  .single__meta-bottom {
    border-top: 2px solid #282828;
    gap: 40px;
  }
}

/* TAG */
.single__taglist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
}

.single__tag {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 6px 18px;
  border: 1px solid #282828;
  border-radius: 999px;
  text-decoration: none;
  color: #282828;
  font-size: 12px;
  letter-spacing: 0.06em;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .single__tag {
    font-size: 14px;
    padding: 6px 18px;
  }
}
@media (min-width: 1024px) {
  .single__tag {
    border: 1.5px solid #282828;
    font-size: 16px;
    padding: 7px 20px;
    -webkit-transition: background 0.5s ease, color 0.5s ease;
    transition: background 0.5s ease, color 0.5s ease;
  }
  .single__tag:hover {
    background: #282828;
    color: #fff;
  }
}

/* SHARE */
.single__sharebtns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .single__sharebtns {
    gap: 10px;
  }
}
@media (min-width: 1024px) {
  .single__sharebtns {
    gap: 10px;
  }
}

.sharebtn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #282828;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}
.sharebtn img {
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .sharebtn {
    width: 40px;
    height: 40px;
  }
}
@media (min-width: 1024px) {
  .sharebtn {
    width: 50px;
    height: 50px;
  }
  .sharebtn:hover img {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}

/* =====================
  RELATED 関連記事
===================== */
.related {
  margin-top: 26px;
  margin-bottom: 80px;
  border: 1px solid #282828;
  border-radius: 9px;
  background: #fff;
  padding: 23px 25px 25px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .related {
    padding: 25px 30px 30px;
  }
}
@media (min-width: 1024px) {
  .related {
    border: 2px solid #282828;
    padding: 30px;
    margin-top: 150px;
    margin-bottom: 100px;
    border-radius: 12px;
  }
}

.related__title-wrap {
  text-align: center;
  border-bottom: 1px solid #282828;
  margin-left: -25px;
  margin-right: -25px;
  padding-bottom: 20px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .related__title-wrap {
    margin-left: -30px;
    margin-right: -30px;
    padding-bottom: 25px;
  }
}
@media (min-width: 1024px) {
  .related__title-wrap {
    border-bottom: 2px solid #282828;
    margin-left: -30px;
    margin-right: -30px;
    padding-bottom: 30px;
  }
}

.related__title, .popular__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  line-height: 1em;
  margin-bottom: 3px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .related__title, .popular__title {
    font-size: 25px;
    margin-bottom: 6px;
  }
}
@media (min-width: 1024px) {
  .related__title, .popular__title {
    font-size: 40px;
    margin-bottom: 9px;
  }
}

.related__sub, .popular__sub {
  color: #282828;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .related__sub, .popular__sub {
    font-size: 14px;
  }
}
@media (min-width: 1024px) {
  .related__sub, .popular__sub {
    font-size: 17px;
  }
}

.related__list {
  display: grid;
  gap: 17px;
  padding: 20px 0 0;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .related__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px 27px;
    padding-top: 30px;
  }
}
@media (min-width: 1024px) {
  .related__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 27px 31px;
    padding-top: 30px;
  }
}

.related__item {
  list-style: none;
}

.related__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 17px;
}
@media (min-width: 1024px) {
  .related__link {
    gap: 18px;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
  .related__link:hover {
    opacity: 0.7;
  }
}

.related__thumb {
  margin: 0;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 85px;
          flex: 0 0 85px;
  width: 85px;
  height: 85px;
  overflow: hidden;
  border-radius: 5px;
}
.related__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .related__thumb {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 95px;
            flex: 0 0 95px;
    width: 95px;
    height: 95px;
    border-radius: 8px;
  }
}
@media (min-width: 1024px) {
  .related__thumb {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 110px;
            flex: 0 0 110px;
    width: 110px;
    height: 110px;
    border-radius: 8px;
  }
}

.related__body {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
}

.related__item-title {
  font-size: 13.5px;
  line-height: 1.7;
  text-align: justify;
  -moz-text-align-last: left;
       text-align-last: left;
  letter-spacing: 0.05em;
  font-weight: 500;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .related__item-title {
    font-size: 15px;
  }
}

.related__meta-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  margin-top: 6px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .related__meta-row {
    gap: 12px;
  }
}
@media (min-width: 1024px) {
  .related__meta-row {
    gap: 15px;
  }
}

.related__cat {
  font-size: 13px;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: #B3A38A;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .related__cat {
    font-size: 14px;
  }
}
@media (min-width: 1024px) {
  .related__cat {
    font-size: 16px;
  }
}

.related__meta {
  font-size: clamp(10px, 2.6vw, 13px);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #282828;
  opacity: 0.5;
  white-space: nowrap;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .related__meta {
    font-size: 12px;
    font-weight: 400;
  }
}
@media (min-width: 1024px) {
  .related__meta {
    font-size: 14px;
    font-weight: 400;
  }
}

/* =====================
  POPULAR 人気記事
===================== */
.popular {
  position: relative;
  padding: 80px 0 40px;
}
.popular::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: -1;
  background: #fff;
}
@media (min-width: 1024px) {
  .popular {
    padding: 100px 0 40px;
  }
}

.popular__title-wrap {
  text-align: center;
  margin-bottom: 45px;
}
@media (min-width: 1024px) {
  .popular__title-wrap {
    margin-bottom: 75px;
  }
}

.popular__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 19px 15px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .popular__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 26px;
  }
}
@media (min-width: 1024px) {
  .popular__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 35px;
  }
}

@media (min-width: 1024px) {
  .popular__card-link {
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
  .popular__card-link:hover {
    opacity: 0.8;
  }
}

.popular__card-thumb {
  position: relative;
}

.popular__card-thumb-inner {
  aspect-ratio: 16/9.5;
  overflow: hidden;
  border-radius: 5px;
}
@media (min-width: 1024px) {
  .popular__card-thumb-inner {
    border-radius: 8px;
  }
}
.popular__card-thumb-inner img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.popular__badge {
  position: absolute;
  top: -10px;
  left: -10px;
  z-index: 2;
  width: 30px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .popular__badge {
    top: -15px;
    left: -15px;
    width: 32px;
  }
}
@media (min-width: 1024px) {
  .popular__badge {
    top: -15px;
    left: -15px;
    width: 36px;
  }
}
.popular__badge img {
  width: 100%;
  height: auto;
  display: block;
}

.popular__badge-num {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -55%);
          transform: translate(-50%, -55%);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
@media (min-width: 1024px) {
  .popular__badge-num {
    font-size: 16px;
  }
}

.popular__card-title {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.7;
  text-align: justify;
  -moz-text-align-last: left;
       text-align-last: left;
  letter-spacing: 0.05em;
  font-weight: 500;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .popular__card-title {
    font-size: 15px;
    margin-top: 16px;
  }
}

.popular__card-cat {
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: #986a53;
}
@media (min-width: 1024px) {
  .popular__card-cat {
    font-size: 15px;
    margin-top: 6px;
  }
}

/* =====================
  シングルページ用 3カード
===================== */
.threecards-single {
  position: relative;
  padding: clamp(28px, 8vw, 56px) 0 clamp(44px, 10vw, 80px);
}
.threecards-single::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40%;
  background: #fff;
  z-index: 0;
}
.threecards-single::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  height: 72%;
  background: #E8E3D7;
  z-index: 1;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .threecards-single::before {
    top: 17%;
    -webkit-transform: none;
            transform: none;
    height: 50%;
  }
}
@media (min-width: 1024px) {
  .threecards-single::before {
    top: 14%;
    -webkit-transform: none;
            transform: none;
    height: 57%;
  }
}

.threecards-single > * {
  position: relative;
  z-index: 2;
}

/* ==========================================
  スクロールアニメーション
========================================== */
.fade-in {
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fade-in.is-visible {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.fade-in:nth-child(1) {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}

.fade-in:nth-child(2) {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}

.fade-in:nth-child(3) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

.fade-in:nth-child(4) {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

.fade-in:nth-child(5) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}

.fade-in:nth-child(6) {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}

.fade-in:nth-child(7) {
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}

.fade-in:nth-child(8) {
  -webkit-transition-delay: 0.7s;
          transition-delay: 0.7s;
}

.fade-in:nth-child(9) {
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}

.fade-in:nth-child(10) {
  -webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}

@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
    -webkit-transition: none;
    transition: none;
  }
}
/* =========================================

カテゴリー一覧ページ （category.html）

========================================= */
.category-list {
  padding: 120px 0 0;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .category-list {
    padding: 150px 0 0;
  }
}
@media (min-width: 1024px) {
  .category-list {
    padding: 170px 0 0;
  }
}

.category__label-wrap {
  padding: 30px 15px;
  border-top: 1px solid #282828;
  border-bottom: 1px solid #282828;
  margin-bottom: 40px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .category__label-wrap {
    padding: 40px 20px;
    border-top: 1.5px solid #282828;
    border-bottom: 1.5px solid #282828;
    margin-bottom: 50px;
  }
}
@media (min-width: 1024px) {
  .category__label-wrap {
    padding: 50px 30px;
    border-top: 2px solid #282828;
    border-bottom: 2px solid #282828;
    margin-bottom: 70px;
  }
}

.category__label {
  text-align: center;
  font-size: 33px;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .category__label {
    font-size: 45px;
    margin-bottom: 3px;
  }
}
@media (min-width: 1024px) {
  .category__label {
    font-size: 60px;
    margin-bottom: 3px;
  }
}

.category__label-jp {
  display: block;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 20px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .category__label-jp {
    font-size: 16px;
    margin-bottom: 25px;
  }
}
@media (min-width: 1024px) {
  .category__label-jp {
    font-size: 18px;
    margin-bottom: 32px;
  }
}

.category__note {
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.06em;
  text-align: justify;
  font-weight: 500;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .category__note {
    font-size: 15px;
    text-align: center;
    letter-spacing: 0.07em;
  }
}
@media (min-width: 1024px) {
  .category__note {
    font-size: 18px;
    text-align: center;
    letter-spacing: 0.07em;
  }
}

/* =========================================

すべての記事一覧ページ （archive.html）

========================================= */
.article__label-wrap {
  padding: 30px 15px 35px;
  border-top: 1px solid #282828;
  border-bottom: 1px solid #282828;
  margin-bottom: 40px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .article__label-wrap {
    padding: 40px 20px 45px;
    border-top: 1.5px solid #282828;
    border-bottom: 1.5px solid #282828;
    margin-bottom: 50px;
  }
}
@media (min-width: 1024px) {
  .article__label-wrap {
    padding: 50px 30px 60px;
    border-top: 2px solid #282828;
    border-bottom: 2px solid #282828;
    margin-bottom: 70px;
  }
}

.archive__label-jp {
  display: block;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.07em;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .archive__label-jp {
    font-size: 16px;
    margin-bottom: 0px;
  }
}
@media (min-width: 1024px) {
  .archive__label-jp {
    font-size: 18px;
    margin-bottom: 0px;
  }
}

.category__label {
  text-align: center;
  font-size: 33px;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 7px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .category__label {
    font-size: 45px;
    margin-bottom: 8px;
  }
}
@media (min-width: 1024px) {
  .category__label {
    font-size: 60px;
    margin-bottom: 10px;
  }
}

.archive__lead {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.06em;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .archive__lead {
    font-size: 15px;
  }
}
@media (min-width: 1024px) {
  .archive__lead {
    font-size: 16px;
    line-height: 2;
  }
}

/* =========================================

カスタム投稿の記事一覧ページ （archive-article.php）

========================================= */
.articles-archive__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 19px 15px;
  margin-bottom: 100px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .articles-archive__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 26px;
  }
}
@media (min-width: 1024px) {
  .articles-archive__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 35px;
  }
}
.articles-archive__grid .articles-loop__card {
  width: auto;
  min-width: 0;
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
}

@media (min-width: 1024px) {
  .articles-archive__card-link {
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
  .articles-archive__card-link:hover {
    opacity: 0.8;
  }
}

.articles-archive__card-thumb {
  position: relative;
}

.articles-archive__card-thumb-inner {
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 5px;
}
@media (min-width: 1024px) {
  .articles-archive__card-thumb-inner {
    border-radius: 8px;
  }
}
.articles-archive__card-thumb-inner img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.articles-archive__card-title {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.7;
  text-align: justify;
  -moz-text-align-last: left;
       text-align-last: left;
  letter-spacing: 0.05em;
  font-weight: 500;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .articles-archive__card-title {
    font-size: 15px;
    margin-top: 16px;
  }
}

.articles-archive__card-cat {
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: #986a53;
}
@media (min-width: 1024px) {
  .articles-archive__card-cat {
    font-size: 15px;
    margin-top: 6px;
  }
}

/* =========================================

タグページ （tag.html） + 検索結果ページ （search.html）

========================================= */
.tag-page, .search-page {
  padding: 120px 0 0;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .tag-page, .search-page {
    padding: 150px 0 0;
  }
}
@media (min-width: 1024px) {
  .tag-page, .search-page {
    padding: 170px 0 0;
  }
}

.tag__name-wrap {
  padding: 30px 15px 35px;
  border-top: 1px solid #282828;
  border-bottom: 1px solid #282828;
  margin-bottom: 40px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .tag__name-wrap {
    padding: 40px 20px 45px;
    border-top: 1.5px solid #282828;
    border-bottom: 1.5px solid #282828;
    margin-bottom: 50px;
  }
}
@media (min-width: 1024px) {
  .tag__name-wrap {
    padding: 50px 30px 60px;
    border-top: 2px solid #282828;
    border-bottom: 2px solid #282828;
    margin-bottom: 70px;
  }
}

.search__name-wrap {
  padding: 30px 15px 35px;
  border-top: 1px solid #282828;
  border-bottom: 1px solid #282828;
  text-align: center;
  margin-bottom: 40px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .search__name-wrap {
    padding: 40px 20px 45px;
    border-top: 1.5px solid #282828;
    border-bottom: 1.5px solid #282828;
    margin-bottom: 50px;
  }
}
@media (min-width: 1024px) {
  .search__name-wrap {
    padding: 50px 30px 60px;
    border-top: 2px solid #282828;
    border-bottom: 2px solid #282828;
    margin-bottom: 70px;
  }
}

.search__lead {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 5px 15px;
  border-radius: 999px;
  text-decoration: none;
  background: #7CFF7A;
  border: 1px solid #282828;
  color: #282828;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.06em;
  margin-bottom: 7px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .search__lead {
    font-size: 17px;
    border: 1.5px solid #282828;
    padding: 6px 20px;
  }
}
@media (min-width: 1024px) {
  .search__lead {
    font-size: 18px;
    -webkit-transition: background 0.5s ease, color 0.5s ease;
    transition: background 0.5s ease, color 0.5s ease;
    border: 1.7px solid #282828;
    padding: 7px 23px;
  }
}

.tag__name {
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.tag__name::before {
  content: "#";
  margin-right: 0.2em;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .tag__name {
    font-size: 30px;
  }
}
@media (min-width: 1024px) {
  .tag__name {
    font-size: 40px;
  }
}

.search__name {
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .search__name {
    font-size: 30px;
  }
}
@media (min-width: 1024px) {
  .search__name {
    font-size: 40px;
  }
}

.taggrid {
  margin-bottom: 50px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .taggrid {
    margin-bottom: 100px;
  }
}
@media (min-width: 1024px) {
  .taggrid {
    margin-bottom: 100px;
  }
}

.searchgrid {
  margin-bottom: 50px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .searchgrid {
    margin-bottom: 100px;
  }
}
@media (min-width: 1024px) {
  .searchgrid {
    margin-bottom: 100px;
  }
}

.tag__list, .search__list {
  display: grid;
  gap: 17px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .tag__list, .search__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px 27px;
  }
}
@media (min-width: 1024px) {
  .tag__list, .search__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 35px;
  }
}

.tag__item, .search__item {
  list-style: none;
}

.tag__link, .search__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 17px;
}
@media (min-width: 1024px) {
  .tag__link, .search__link {
    gap: 20px;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
  .tag__link:hover, .search__link:hover {
    opacity: 0.7;
  }
}

.tag__thumb, .search__thumb {
  margin: 0;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 85px;
          flex: 0 0 85px;
  width: 85px;
  height: 85px;
  overflow: hidden;
  border-radius: 5px;
}
.tag__thumb img, .search__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .tag__thumb, .search__thumb {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 110px;
            flex: 0 0 110px;
    width: 110px;
    height: 110px;
    border-radius: 8px;
  }
}
@media (min-width: 1024px) {
  .tag__thumb, .search__thumb {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 150px;
            flex: 0 0 150px;
    width: 150px;
    height: 150px;
    border-radius: 8px;
  }
}

.tag__body, .search__body {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
}

.tag__item-title, .search__item-title {
  font-size: 13.5px;
  line-height: 1.7;
  text-align: justify;
  -moz-text-align-last: left;
       text-align-last: left;
  letter-spacing: 0.05em;
  font-weight: 500;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .tag__item-title, .search__item-title {
    font-size: 18px;
  }
}

.tag__meta-row, .search__meta-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  margin-top: 6px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .tag__meta-row, .search__meta-row {
    gap: 12px;
  }
}
@media (min-width: 1024px) {
  .tag__meta-row, .search__meta-row {
    gap: 15px;
    margin-top: 10px;
  }
}

.tag__cat, .search__cat {
  font-size: 13px;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: #B3A38A;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .tag__cat, .search__cat {
    font-size: 14px;
  }
}
@media (min-width: 1024px) {
  .tag__cat, .search__cat {
    font-size: 16px;
  }
}

.tag__meta, .search__meta {
  font-size: clamp(10px, 2.6vw, 13px);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #282828;
  opacity: 0.5;
  white-space: nowrap;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .tag__meta, .search__meta {
    font-size: 12px;
    font-weight: 400;
  }
}
@media (min-width: 1024px) {
  .tag__meta, .search__meta {
    font-size: 14px;
    font-weight: 400;
  }
}

/* =========================================

404ページ （404.html）

========================================= */
.notfound__wrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.notfound-page {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 80px 0 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .notfound-page {
    padding: 80px 0 0;
  }
}
@media (min-width: 1024px) {
  .notfound-page {
    padding: 110px 0 0;
  }
}

.notfound-page .container {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.notfound__main {
  width: min(520px, 78vw);
  margin: 0;
  padding: 0;
  margin-bottom: 0;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .notfound__main {
    width: 100%;
    padding: 40px 20% 45px;
    margin-bottom: 0;
  }
}
@media (min-width: 1024px) {
  .notfound__main {
    width: 100%;
    padding: 50px 20% 60px;
    margin-bottom: 0;
  }
}

.notfound__main img {
  display: block;
  width: 100%;
  height: auto;
}

/* =====================
  PAGE（利用規約 / プライバシー）
===================== */
.page {
  padding: 50px 0 60px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .page {
    padding: 80px 0 80px;
  }
}
@media (min-width: 1024px) {
  .page {
    padding: 100px 0 120px;
  }
}

.page__header {
  margin-bottom: 48px;
}

.page__title {
  margin: 0;
  font-size: 30px;
  line-height: 1.65;
  letter-spacing: 0.06em;
  font-weight: 600;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .page__title {
    font-size: 30px;
  }
}
@media (min-width: 1024px) {
  .page__title {
    font-size: 35px;
  }
}

.page__content {
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

/* 見出し */
.page__content h2 {
  margin: 2em 0 0.7em;
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .page__content h2 {
    font-size: 20px;
    margin: 1.5em 0 0.5em;
  }
}
@media (min-width: 1024px) {
  .page__content h2 {
    font-size: 22px;
    margin: 1.2em 0 0.5em;
    line-height: 1.7;
    letter-spacing: 0.1em;
  }
}

.page__content h3 {
  margin: 2em 0 0.5em;
  font-size: 16px;
  font-weight: 600;
}
/* 太字 */
.page__content strong {
  font-weight: 600;
}

/* リンク */
.page__content a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.page__content a:hover {
  opacity: 0.6;
}

/* リスト */
.page__content ul,
.page__content ol {
  margin: 0 0 1.6em 1.2em;
}

.page__content li {
  margin-bottom: 0.6em;
}

.kiyaku-page__divider {
  border: none;
  border-top: 1px solid #d5d3ce;
  margin: 25px 0 25px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .kiyaku-page__divider {
    margin: 30px 0 30px;
  }
}
@media (min-width: 1024px) {
  .kiyaku-page__divider {
    margin: 40px 0 40px;
  }
}

/* =========================================

固定ページ 特集

========================================= */
.feature-banners {
  margin-top: 60px;
}

.feature-hero {
  margin-bottom: 20px;
}
.feature-hero img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .feature-hero {
    margin-bottom: 40px;
  }
}
@media (min-width: 1024px) {
  .feature-hero {
    display: none;
  }
}

.feature-banners__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 14px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .feature-banners__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }
}
@media (min-width: 1024px) {
  .feature-banners__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
}

.feature-banners__item {
  display: block;
  text-decoration: none;
  color: #282828;
}

.feature-banners__thumb {
  overflow: hidden;
  margin-bottom: 9px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .feature-banners__thumb {
    margin-bottom: 14px;
  }
}
@media (min-width: 1024px) {
  .feature-banners__thumb {
    margin-bottom: 14px;
  }
}
.feature-banners__thumb img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  transition: -webkit-transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 1024px) {
  .feature-banners__thumb:hover img {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}

.feature-banners__title {
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  font-weight: 500;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .feature-banners__title {
    font-size: 13px;
  }
}
@media (min-width: 1024px) {
  .feature-banners__title {
    font-size: 15px;
  }
}

/* =========================================

固定ページ ABOUT

========================================= */
.about-page {
  padding-bottom: 60px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .about-page {
    padding-bottom: 80px;
  }
}
@media (min-width: 1024px) {
  .about-page {
    padding-bottom: 120px;
  }
}

.about-page__mv {
  padding-top: 24px;
}

.about-page__slider {
  position: relative;
  width: 100%;
  aspect-ratio: 3/1.8;
  overflow: hidden;
  border-radius: 7px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .about-page__slider {
    border-radius: 10px;
  }
}
@media (min-width: 1024px) {
  .about-page__slider {
    border-radius: 10px;
  }
}

.about-page__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 1.2s ease;
  transition: opacity 1.2s ease;
}

.about-page__slide.is-current {
  opacity: 1;
  pointer-events: auto;
}

.about-page__slide:first-child {
  opacity: 1;
}

.about-page__slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.about-page__mv-inner,
.about-page__inner {
  width: 100%;
  margin: 0;
}

.about-page__intro {
  margin-top: 60px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .about-page__intro {
    margin-top: 50px;
  }
}
@media (min-width: 1024px) {
  .about-page__intro {
    margin-top: 80px;
  }
}

.about-page__profile {
  margin-top: 0;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .about-page__profile {
    margin-top: 50px;
  }
}
@media (min-width: 1024px) {
  .about-page__profile {
    margin-top: 0;
  }
}

.about-page__grid {
  display: block;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .about-page__grid {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    -webkit-column-gap: 48px;
       -moz-column-gap: 48px;
            column-gap: 48px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
}
@media (min-width: 1024px) {
  .about-page__grid {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    -webkit-column-gap: 72px;
       -moz-column-gap: 72px;
            column-gap: 72px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
}

.about-page__label {
  margin-bottom: 40px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .about-page__label {
    margin-bottom: 0;
  }
}
@media (min-width: 1024px) {
  .about-page__label {
    margin-bottom: 0;
  }
}

.about-page__subhead {
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 30px;
  line-height: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 9px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .about-page__subhead {
    font-size: 32px;
    gap: 11px;
  }
}
@media (min-width: 1024px) {
  .about-page__subhead {
    font-size: 40px;
    gap: 11px;
  }
}

.about-page__subhead-ja {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .about-page__subhead-ja {
    font-size: 12px;
  }
}
@media (min-width: 1024px) {
  .about-page__subhead-ja {
    font-size: 14px;
  }
}

.about-page__body {
  margin-top: 28px;
  display: grid;
  gap: 18px;
  line-height: 2;
  width: 100%;
  max-width: 680px;
  margin-left: auto;
  text-align: justify;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .about-page__body {
    margin-top: 0px;
  }
}
@media (min-width: 1024px) {
  .about-page__body {
    margin-top: 0px;
  }
}
.about-page__body a {
  color: #00b683;
  position: relative;
  white-space: nowrap;
}
.about-page__body a::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-left: 0.1em;
  vertical-align: -0.22em;
  background: currentColor;
  mask: url("../img/link-icon.svg") no-repeat center/contain;
  -webkit-mask: url("../img/link-icon.svg") no-repeat center/contain;
}

.about-page__body > p:last-child {
  margin-bottom: 0;
}

.about-page__divider {
  border: none;
  border-top: 1px solid #d5d3ce;
  margin: 50px 0 50px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .about-page__divider {
    margin: 50px 0 50px;
  }
}
@media (min-width: 1024px) {
  .about-page__divider {
    margin: 70px 0 70px;
  }
}

.about-page__body p {
  font-size: 14.5px;
  letter-spacing: 0.04em;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .about-page__body p {
    font-size: 15px;
  }
}
@media (min-width: 1024px) {
  .about-page__body p {
    font-size: 16px;
    line-height: 2.2;
  }
}

.profile__title {
  font-size: 14.5px;
  line-height: 1.1;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .profile__title {
    line-height: 1;
  }
}
@media (min-width: 1024px) {
  .profile__title {
    font-size: 17px;
    line-height: 1.5;
  }
}

.profile__name {
  font-size: 22px;
  line-height: 1.1;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .profile__name {
    font-size: 22px;
    line-height: 1.5;
  }
}
@media (min-width: 1024px) {
  .profile__name {
    font-size: 28px;
    line-height: 1.5;
  }
}

.name-space {
  display: inline-block;
  width: 0.5em;
}

/* =====================
  CONTACT 問い合わせ
===================== */
.contact-page {
  padding: 50px 0 60px;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .contact-page {
    padding: 100px 0 80px;
  }
}
@media (min-width: 1024px) {
  .contact-page {
    padding: 140px 0 120px;
  }
}

.contact-page__head {
  margin-bottom: 40px;
}
@media (min-width: 1024px) {
  .contact-page__head {
    margin-bottom: 60px;
  }
}

.contact-page__title {
  margin: 0 0 30px;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.08em;
  font-weight: 600;
}
@media (min-width: 744px) and (max-width: 1023px) {
  .contact-page__title {
    font-size: 35px;
  }
}
@media (min-width: 1024px) {
  .contact-page__title {
    font-size: 50px;
  }
}

.contact-page__lead {
  margin: 0;
  max-width: 560px;
  font-size: 14px;
  line-height: 1.8;
  text-align: justify;
}

.contact-form__item {
  margin-bottom: 20px;
}

.contact-form__item label {
  display: block;
  margin-bottom: 3px;
  font-size: 13px;
  letter-spacing: 0.14em;
  font-weight: 600;
}

.contact-page .wpcf7-form-control-wrap {
  display: block;
}

.contact-page .contact-form__input,
.contact-page .contact-form__textarea,
.contact-page .wpcf7-text,
.contact-page .wpcf7-textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid #282828;
  background: transparent;
  padding: 12px 0;
  border-radius: 0;
  font-size: 16px;
  line-height: 1.8;
  color: #282828;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.contact-page .contact-form__input:focus,
.contact-page .contact-form__textarea:focus,
.contact-page .wpcf7-text:focus,
.contact-page .wpcf7-textarea:focus {
  outline: none;
  border-bottom-color: #666;
}

.contact-page .contact-form__textarea,
.contact-page .wpcf7-textarea {
  min-height: 120px;
  resize: vertical;
}

.contact-form__submit {
  margin-top: 40px;
}

.contact-page .contact-form__button,
.contact-page .wpcf7-submit {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 180px;
  padding: 14px 24px;
  border: 1px solid #222;
  background: #222;
  color: #f5f3ee;
  font-size: 12px;
  letter-spacing: 0.16em;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 0.3s, -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s, -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
}

.contact-page .contact-form__button:hover,
.contact-page .wpcf7-submit:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  opacity: 0.92;
}

.contact-page__note {
  margin-top: 28px;
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.05em;
  color: #282828;
}

.contact-page .wpcf7-spinner {
  display: block;
  margin: 12px 0 0;
}

.contact-page .wpcf7-not-valid-tip,
.contact-page .wpcf7-response-output {
  font-size: 12px;
  line-height: 1.7;
  margin-top: 10px;
}