@charset "UTF-8";
/* =========================================================
   IKKA DESIGN TOP
   デザイン基準：PC 1440px / SP 390px
   PCの写真・余白は --u（= 画面幅/1440、最大1px）で等比スケール
   ========================================================= */

:root {
  /* Figma カラースタイル */
  --c-text: #202020;
  /* 文字の黒 */
  --c-sub: #847e76;
  /* 文字のグレー */
  --c-gray: #a9a29a;
  /* イッカグレー */
  --c-gray40: #dddad7;
  /* イッカグレー40% */
  --c-red: #ba4848;
  /* 赤 */
  --c-charcoal: #45413d;
  /* チャコール */
  --c-bg: #f6f6f6;
  --c-line-light: #dddad7;

  --ff-mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --ff-gothic: "Zen Kaku Gothic Antique", "Hiragino Sans", "Yu Gothic", sans-serif;

  --u: calc(min(100vw, 1440px) / 1440);
  --header-h: 70px;
  --ease: cubic-bezier(.25, .8, .25, 1);
}

/* ---------- reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 60px;
}

body,
h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
address {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

address {
  font-style: normal;
}

body {
  font-family: var(--ff-mincho);
  font-size: 14px;
  line-height: 2;
  letter-spacing: .05em;
  color: var(--c-text);
  /* Figma の和紙テクスチャ（bg 1）をタイル状に敷く */
  background: #d9d6d1 url("../img/bg-texture.webp") repeat top center / 1440px auto;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 0;
}

body.is-menu-open {
  overflow: hidden;
}

:focus-visible {
  outline: 1px solid var(--c-sub);
  outline-offset: 4px;
}

.sp-only {
  display: none;
}

@media (max-width: 767px) {
  .sp-only {
    display: revert;
  }

  br.sp-only {
    display: inline;
  }

  .pc-only {
    display: none !important;
  }
}

/* 縦書きタイトル（FV・メニュー共通） */
.v-title {
  writing-mode: vertical-rl;
  font-size: 24px;
  line-height: 44px;
  /* 列幅30 + 列間14 */
  letter-spacing: .33em;
  color: #fff;
  font-weight: 400;
}

.v-label {
  writing-mode: vertical-rl;
  font-size: 11px;
  line-height: 20px;
  letter-spacing: .1em;
}

/* ---------- 共通：見出し ---------- */
.sec-en {
  font-size: 14px;
  line-height: 2;
  letter-spacing: .05em;
  color: var(--c-sub);
}

.sec-title {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .1em;
}

.sec-en+.sec-title {
  margin-top: 12px;
}

.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
}

.container {
  width: min(1140px, 100% - 80px);
  margin-inline: auto;
}

/* ---------- 共通：矢印ボタン（button_bl） ---------- */
.btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  font-size: 14px;
  line-height: 2;
  letter-spacing: .05em;
  white-space: nowrap;
}

.btn-arrow::after {
  content: "";
  flex: none;
  width: 48px;
  height: 24px;
  background: url("../img/arrow.svg") no-repeat center / contain;
  transition: transform .4s var(--ease);
}

.btn-arrow--white {
  color: #fff;
}

.btn-arrow--white::after {
  background-image: url("../img/arrow-white.svg");
}

.btn-arrow--lg {
  font-size: 16px;
}

a:hover>.btn-arrow::after,
.btn-arrow:hover::after {
  transform: translateX(6px);
}

/* =========================================================
   ヘッダー
   ========================================================= */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 40px 0 30px;
  color: var(--c-text);
  background: rgba(160, 160, 160, .08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: height .4s var(--ease), background-color .4s, color .4s;
}

.header.is-over-fv {
  height: var(--header-h);
  padding-left: 25px;
  color: #fff;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.header__logo img {
  width: 140px;
}

.header__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--ff-gothic);
  font-size: 13px;
  line-height: 1;
  letter-spacing: .05em;
}

.header__link {
  padding: 4px 0 6px;
}

.header__link:hover {
  opacity: .7;
}

.header__divider {
  width: 1px;
  height: 12px;
  background: var(--c-gray);
}

.header__menu {
  margin-left: 20px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}

.header__menu-icon {
  grid-area: 1 / 1;
  width: 24px;
}

.header__menu-icon--white {
  opacity: 0;
}

.header.is-over-fv .header__menu-icon--white {
  opacity: 1;
}

.header.is-over-fv .header__menu-icon--dark {
  opacity: 0;
}

@media (max-width: 767px) {
  .header {
    padding: 0 20px 0 15px;
  }

  .header.is-over-fv {
    padding-left: 15px;
  }

  .header__logo img {
    width: 135px;
  }

  .header__nav {
    display: none;
  }

  .header__menu {
    margin-left: auto;
  }
}

/* =========================================================
   展開メニュー
   ========================================================= */
.gnav {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--c-charcoal);
  color: #fff;
  overflow-y: auto;
  opacity: 0;
  transition: opacity .4s var(--ease);
}

.gnav[hidden] {
  display: none;
}

.gnav.is-open {
  opacity: 1;
}

.gnav__inner {
  position: relative;
  min-height: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto;
  padding: 140px 170px 80px;
}

.gnav__close {
  position: absolute;
  top: 24px;
  right: 40px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}

.gnav__catch {
  position: absolute;
  left: 11.81%;
  top: 220px;
}

.gnav__catch .v-title {
  margin-top: 70px;
}

.gnav__frame {
  position: absolute;
  top: 0;
  left: 80px;
  width: 60px;
}

.gnav__body {
  grid-column: 2;
  display: flex;
  gap: 135px;
  align-items: flex-start;
}

.gnav__col {
  width: 160px;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.gnav__main {
  font-size: 16px;
  line-height: 2;
  letter-spacing: .05em;
  white-space: nowrap;
}

.gnav__group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.gnav__sub {
  font-size: 13px;
  line-height: 2;
  color: var(--c-gray40);
}

.gnav a:hover {
  opacity: .7;
}

.gnav__ext {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.gnav__ext img {
  width: 11px;
}

.gnav__cta {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.gnav__cta a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  padding-right: 10px;
  border-bottom: 1px solid var(--c-sub);
  font-size: 16px;
  line-height: 2;
  letter-spacing: .05em;
  align-items: flex-start;
}

.gnav__cta img {
  width: 12px;
  margin-top: 14px;
}

.gnav__recruit {
  font-size: 13px;
  color: var(--c-gray40);
}

.gnav__sns {
  gap: 12px;
}

.gnav__sns img {
  width: 19px;
}

.gnav__sns a:last-child img {
  width: 27px;
}

.gnav__sns .icon-line {
  width: 19px;
  height: 19px;
}

.gnav__foot {
  grid-column: 2;
  margin-top: 50px;
  display: flex;
  justify-content: flex-end;
}

.gnav__foot-catch {
  display: none;
}

@media (max-width: 1100px) {
  .gnav__inner {
    padding-inline: 60px;
  }

  .gnav__body {
    gap: 60px;
  }

  .gnav__catch {
    display: none;
  }

  .gnav__inner {
    grid-template-columns: 1fr;
  }

  .gnav__body,
  .gnav__foot {
    grid-column: 1;
  }
}

@media (max-width: 767px) {
  .gnav__inner {
    display: block;
    padding: 60px 0 60px;
  }

  .gnav__inner::before {
    content: "";
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    border-top: 1px solid rgba(169, 162, 154, .3);
  }

  .gnav__close {
    top: 18px;
    right: 20px;
  }

  .gnav__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 40px 30px 0;
  }

  .gnav__col {
    width: auto;
    gap: 30px;
  }

  .gnav__main {
    font-size: 15px;
  }

  .gnav__main.gnav__ext {
    white-space: nowrap;
  }

  .gnav__col--cta {
    grid-column: 1 / -1;
    margin: 40px -30px 0;
    padding: 50px 30px 40px;
    border-top: 1px solid rgba(169, 162, 154, .3);
    gap: 40px;
  }

  .gnav__cta {
    width: 160px;
    gap: 25px;
  }

  .gnav__sns img {
    width: 24px;
  }

  .gnav__sns a:last-child img {
    width: 34px;
  }

  .gnav__sns .icon-line {
    width: 24px;
    height: 24px;
  }

  .gnav__foot {
    display: block;
    margin-top: 0;
    padding: 40px 30px 0;
    border-top: 1px solid rgba(169, 162, 154, .3);
  }

  .gnav__foot-catch {
    display: block;
    font-size: 24px;
    line-height: 1.7;
    letter-spacing: .1em;
  }

  .gnav__foot .copyright {
    margin-top: 20px;
    justify-content: space-between;
  }
}

/* =========================================================
   FV
   ========================================================= */
.fv {
  position: relative;
  aspect-ratio: 1440 / 760;
  overflow: hidden;
  color: #fff;
  background: #3a3632;
}

.fv__slides,
.fv__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fv__slide {
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 2s ease, transform 8s linear;
}

.fv__slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.fv__catch {
  position: absolute;
  left: 11.81%;
  top: 28.95%;
  font-weight: 400;
}

.fv__catch .v-title {
  margin-top: calc(760 * 0.0921 * var(--u));
}

.fv__frame {
  position: absolute;
  top: 0;
  left: calc(80 * var(--u));
  width: calc(60 * var(--u));
  min-width: 40px;
}

.fv__news {
  position: absolute;
  right: 29px;
  bottom: 38px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ff-gothic);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .05em;
}

.fv__news img {
  width: 3px;
}

.fv__news:hover span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 767px) {
  .fv {
    aspect-ratio: auto;
    height: min(100svh, 760px);
    min-height: 600px;
  }

  .fv__slides::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .2);
  }

  .fv__catch {
    left: 40.51%;
    top: 25%;
  }

  .fv__catch .v-title {
    margin-top: 70px;
  }

  .fv__frame {
    left: 72px;
    width: 60px;
  }

  .fv__news {
    left: 22px;
    right: 22px;
    bottom: 9%;
    font-size: 12px;
  }
}

/* =========================================================
   イントロ
   ========================================================= */
.intro {
  position: relative;
  padding: calc(150 * var(--u)) 0 calc(150 * var(--u));
}

.intro__rule {
  position: absolute;
  top: 0;
  left: calc(140 * var(--u));
  height: calc(920 * var(--u));
  border-left: 1px solid var(--c-line-light);
}

.intro__side {
  position: absolute;
  top: calc(150 * var(--u));
  left: calc(40 * var(--u));
  width: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  font-size: 11px;
  letter-spacing: .1em;
}

.intro__side-ja {
  writing-mode: vertical-rl;
  line-height: 20px;
}

.intro__side-en {
  writing-mode: vertical-rl;
  line-height: 20px;
  padding-left: 10px;
}

.intro__row--1 {
  display: grid;
  grid-template-columns: calc(240 * var(--u)) calc(580 * var(--u)) calc(480 * var(--u));
}

.intro__lead {
  grid-column: 2;
  padding-top: calc(140 * var(--u));
}

.intro__title {
  font-size: 22px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .1em;
  white-space: nowrap;
}

.intro__text {
  letter-spacing: .1em;
}

.intro__text+.intro__text {
  margin-top: 2em;
}

.intro__title+.intro__text {
  margin-top: 52px;
}

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

.intro__img--2 {
  grid-column: 3;
  aspect-ratio: 480 / 600;
}

.intro__img--1 {
  width: calc(620 * var(--u));
  aspect-ratio: 620 / 310;
  margin-top: calc(170 * var(--u));
}

.intro__statement {
  margin: calc(110 * var(--u)) 0 0 calc(840 * var(--u));
  white-space: nowrap;
}

.intro__img--3 {
  width: calc(1200 * var(--u));
  aspect-ratio: 1200 / 640;
  margin: calc(130 * var(--u)) 0 0 auto;
}

@media (max-width: 1100px) and (min-width: 768px) {
  .intro__title {
    font-size: 20px;
    white-space: normal;
  }

  .intro__lead {
    padding-right: 30px;
  }

  .intro__statement {
    margin-left: calc(600 * var(--u));
    white-space: normal;
  }
}

@media (max-width: 767px) {
  .intro {
    padding: 0 0 0;
    overflow: hidden;
  }

  .intro__rule {
    left: 48px;
    height: 1700px;
    max-height: calc(100% - 220px);
  }

  .intro__side {
    top: 60px;
    left: 10px;
    width: 30px;
    padding-block: 90px;
    font-size: 10px;
  }

  .intro__side-ja {
    line-height: 1.3;
  }

  .intro__side-en {
    padding-left: 5px;
  }

  .intro__side br {
    display: none;
  }

  .intro__row--1 {
    display: block;
  }

  .intro__lead {
    padding: 141px 20px 0 100px;
  }

  .intro__title {
    font-size: 20px;
    line-height: 1.9;
  }

  .intro__title+.intro__text {
    margin-top: 34px;
  }

  .intro__text {
    letter-spacing: .05em;
    white-space: nowrap;
  }

  .intro__img--2 {
    width: 320px;
    max-width: calc(100% - 70px);
    margin: 55px 0 0 auto;
  }

  .intro__img--1 {
    width: 340px;
    max-width: calc(100% - 50px);
    aspect-ratio: 340 / 170;
    margin-top: 140px;
    position: relative;
    z-index: 1;
  }

  .intro__texture {
    position: absolute;
    left: 0;
    right: 0;
    top: 1165px;
    height: 480px;
    mix-blend-mode: darken;
    opacity: .3;
  }

  .intro__texture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .6;
  }

  .intro__statement {
    position: relative;
    margin: 100px 0 0 100px;
  }

  .intro__img--3 {
    width: 100%;
    aspect-ratio: 390 / 218;
    margin-top: 60px;
  }
}

/* =========================================================
   施工事例
   ========================================================= */
.works {
  display: grid;
  grid-template-columns: calc(80 * var(--u)) calc(400 * var(--u)) 1fr;
  padding: 170px 0 170px calc(60 * var(--u));
}

.works__index {
  grid-column: 1;
  grid-row: 1;
  padding-top: 107px;
  font-size: 12px;
  line-height: 2;
  letter-spacing: .05em;
}

.works__index ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.works__index button {
  color: var(--c-sub);
  transition: color .3s;
}

.works__index button[aria-selected="true"],
.works__index button:hover {
  color: var(--c-text);
}

.works__viewall {
  display: inline-block;
  margin-top: 176px;
}

.works__viewall:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.works__list {
  grid-column: 2 / 4;
  grid-row: 1;
  position: relative;
}

.work {
  display: none;
  grid-template-columns: calc(400 * var(--u)) 1fr;
}

.work.is-active {
  display: grid;
  animation: fade .6s var(--ease);
}

@keyframes fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.work__meta {
  position: relative;
  padding: 107px 0 0 calc(100 * var(--u));
}

.work__meta::before {
  content: "";
  position: absolute;
  left: 0;
  top: 103px;
  height: 320px;
  border-left: 1px solid var(--c-gray);
}

.work__label {
  font-size: 14px;
  line-height: 2;
}

.work__num {
  margin-top: -8px;
  font-size: 32px;
  font-weight: 600;
  line-height: 2;
  letter-spacing: .2em;
}

.work__title {
  margin-top: 46px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .08em;
}

.work__place {
  margin-top: 12px;
  font-size: 12px;
  line-height: 2;
  color: var(--c-sub);
}

.work__more {
  margin-top: 60px;
}

.work__slider {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}

.work__slider::-webkit-scrollbar {
  display: none;
}

.work__slider.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.work__track {
  display: flex;
  gap: 8px;
  width: max-content;
}

.work__track li {
  scroll-snap-align: start;
}

.work__track img {
  width: calc(790 * var(--u));
  aspect-ratio: 790 / 526;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 767px) {
  .works {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 150px 0 0;
  }

  .works__head {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    width: calc(100% - 40px);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--c-gray);
  }

  .works__head-title {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .08em;
  }

  .works__head-en {
    font-size: 12px;
    letter-spacing: .08em;
    color: var(--c-sub);
  }

  .works__list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
  }

  .work,
  .work.is-active {
    display: block;
    animation: none;
  }

  .work__meta {
    padding: 0 20px;
  }

  .work__meta::before,
  .work__label,
  .work__num,
  .work__more {
    display: none;
  }

  .work__title {
    margin: 0;
    font-size: 18px;
    line-height: 2;
  }

  .work__place {
    margin: -3px 0 0;
    font-size: 13px;
  }

  .work__slider {
    margin-top: 22px;
  }

  .work__track {
    gap: 5px;
    padding-inline: 17px;
  }

  .work__track li {
    scroll-snap-align: center;
  }

  .work__track img {
    width: min(346.8px, calc(100vw - 43px));
    aspect-ratio: 3 / 2;
  }

  .work::after {
    content: "";
    display: block;
    width: calc(100% - 40px);
    margin: 45px auto 0;
    border-top: 1px solid var(--c-gray);
  }

  .works__more {
    display: flex !important;
    justify-content: flex-end;
    width: calc(100% - 40px);
  }
}

/* =========================================================
   モデルハウス
   ========================================================= */
.modelhouse {
  padding: 170px 0 240px;
}

.modelhouse__body {
  display: grid;
  grid-template-columns: calc(850 * var(--u)) 1fr;
  grid-template-rows: auto auto;
  padding-left: calc(80 * var(--u));
}

.modelhouse__head {
  grid-column: 1;
  grid-row: 1;
}

.modelhouse__text {
  grid-column: 2;
  grid-row: 1 / 3;
  padding: 10px 40px 0 0;
}

.modelhouse__btn {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  margin-top: 22px;
}

.modelhouse__img {
  margin-top: 46px;
  aspect-ratio: 1440 / 700;
}

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

@media (max-width: 1100px) and (min-width: 768px) {
  .modelhouse__body {
    grid-template-columns: calc(700 * var(--u)) 1fr;
  }
}

@media (max-width: 767px) {
  .modelhouse {
    padding: 130px 0 120px;
  }

  .modelhouse__body {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
  }

  .modelhouse .sec-en {
    font-size: 12px;
    letter-spacing: .08em;
  }

  .modelhouse .sec-en+.sec-title {
    margin-top: 10px;
  }

  .modelhouse__text {
    padding: 24px 0 0;
  }

  .modelhouse__btn {
    margin-top: 44px;
  }

  .modelhouse__img {
    margin-top: 58px;
    aspect-ratio: 390 / 326;
  }
}

/* =========================================================
   イッカデザインの家づくり
   ========================================================= */
.about {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: calc(120 * var(--u));
}

.about__img {
  width: calc(750 * var(--u));
  aspect-ratio: 750 / 600;
  flex: 0 1 auto;
  min-width: 0;
}

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

.about__body {
  width: max(438 * var(--u), 380px);
  min-width: 0;
  padding-left: 30px;
  flex: 0 1 auto;
}

.about__list {
  margin-top: 62px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 420px;
}

.about__list a {
  display: flex;
  align-items: flex-start;
  height: 60px;
  padding: 0 10px;
  border-bottom: 1px solid var(--c-gray);
}

.about__num {
  width: 50px;
  padding-top: 2px;
  color: var(--c-sub);
}

.about__label {
  flex: 1;
  font-size: 16px;
}

.about__list img {
  width: 48px;
  margin-top: 4px;
  transition: transform .4s var(--ease);
}

.about__list a:hover img {
  transform: translateX(6px);
}

@media (max-width: 767px) {
  .about {
    flex-direction: column-reverse;
    gap: 50px;
    padding: 0;
  }

  .about__img {
    width: 100%;
    aspect-ratio: 390 / 312;
  }

  .about__body {
    width: 100%;
    padding: 0 20px;
  }

  .about .sec-en {
    font-size: 12px;
    letter-spacing: .08em;
  }

  .about__list {
    margin-top: 58px;
    max-width: none;
  }

  .about__list a {
    border-bottom-color: rgba(169, 162, 154, .4);
  }

  .about__num {
    width: 40px;
    padding-right: 20px;
    font-size: 13px;
    letter-spacing: .08em;
  }

  .about__label {
    font-size: 15px;
    letter-spacing: .08em;
    flex: none;
    width: 230px;
    max-width: calc(100% - 110px);
  }
}

/* =========================================================
   イベント
   ========================================================= */
.event {
  padding: 200px 0;
}

.event__list {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.event-card__img {
  aspect-ratio: 360 / 225;
  overflow: hidden;
}

.event-card__img img,
.land-card__img>img,
.post__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}

.event-card a:hover img,
.land-card a:hover .land-card__img>img,
.post a:hover img {
  transform: scale(1.04);
}

.event-card__title {
  margin-top: 15px;
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
}

.event-card__date {
  color: var(--c-sub);
}

@media (max-width: 767px) {
  .container {
    width: calc(100% - 40px);
  }

  .sec-en {
    font-size: 12px;
    letter-spacing: .08em;
  }

  .sec-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .sec-head>div {
    display: contents;
  }

  .sec-head {
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 10px;
    align-items: center;
  }

  .sec-head .sec-en {
    grid-column: 1 / -1;
  }

  .sec-head .sec-en+.sec-title {
    margin-top: 0;
  }

  .event {
    padding: 120px 0;
  }

  .event__list {
    margin-top: 30px;
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .event-card a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .event-card__img {
    width: 130px;
    flex: none;
    aspect-ratio: 130 / 81;
  }

  .event-card a {
    gap: 10px;
  }

  .event-card__body {
    flex: 0 1 210px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .event-card__title {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
  }

  .event-card__date {
    font-size: 13px;
  }
}

/* =========================================================
   会社概要
   ========================================================= */
.company {
  position: relative;
  color: #fff;
}

.company__bg {
  aspect-ratio: 1440 / 640;
}

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

.company__body {
  position: absolute;
  top: calc(137 * var(--u));
  left: 0;
  padding-left: calc(90 * var(--u));
}

.company__en {
  color: var(--c-gray);
}

.company__lead {
  margin-top: 12px;
  letter-spacing: .1em;
}

.company__title {
  margin-top: 2px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .1em;
}

.company__rule {
  display: block;
  width: calc(410 * var(--u));
  margin: 44px 0 0 calc(-90 * var(--u));
  border-top: 1px solid rgba(169, 162, 154, .4);
}

.company__address {
  margin-top: 39px;
}

.company .btn-arrow {
  margin-top: 36px;
}

@media (max-width: 1100px) and (min-width: 768px) {
  .company__bg {
    aspect-ratio: auto;
    height: 640px;
  }

  .company__body {
    top: 120px;
    padding-left: 60px;
  }

  .company__rule {
    width: 380px;
    margin-left: -60px;
  }
}

@media (max-width: 767px) {
  .company__bg {
    aspect-ratio: auto;
    height: max(560px, 100vw * 580 / 390);
  }

  .company__body {
    top: 127px;
    padding-left: 20px;
  }

  .company__lead {
    margin-top: 10px;
  }

  .company__title {
    margin-top: 0;
  }

  .company__rule {
    width: 340px;
    max-width: calc(100% - 50px);
    margin: 31px 0 0 -20px;
  }

  .company__address {
    margin-top: 39px;
    font-size: 13px;
  }

  .company .btn-arrow {
    margin-top: 29px;
  }
}

/* =========================================================
   不動産情報
   ========================================================= */
.land {
  padding-top: 200px;
}

.land__list {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.land-card__img {
  position: relative;
  aspect-ratio: 360 / 252;
  overflow: hidden;
}

.land-card__tag {
  position: absolute;
  top: 0;
  left: 0;
  padding: 3px 10px;
  border-bottom-right-radius: 3px;
  background: var(--c-gray);
  color: #fff;
  font-family: var(--ff-gothic);
  font-size: 13px;
  line-height: normal;
  letter-spacing: .05em;
}

.land-card__sold {
  position: absolute;
  inset: 0;
  background: #707070;
  mix-blend-mode: multiply;
}

.land-card__sold-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--ff-gothic);
  font-size: 14px;
  letter-spacing: .05em;
}

.land-card__title {
  margin-top: 15px;
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
}

.land-card__spec {
  margin-top: 10px;
  padding-top: 15px;
  border-top: 1px solid var(--c-gray40);
  font-size: 13px;
  line-height: 1.8;
}

.land-card__spec div {
  display: flex;
}

.land-card__spec dt::after {
  content: "：";
}

@media (max-width: 767px) {
  .land {
    padding-top: 120px;
  }

  .land__list {
    margin-top: 30px;
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .land-card__img {
    aspect-ratio: 350 / 245;
  }
}

/* =========================================================
   ニュース
   ========================================================= */
.news {
  padding: 170px 40px;
}

.news__box {
  width: min(1201px, 100%);
  min-height: 360px;
  margin-inline: auto;
  padding: 0 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  border: 1px solid var(--c-gray);
  border-radius: 35px;
}

.news__head {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.news__head .sec-en+.sec-title {
  margin-top: 2px;
}

.news__list {
  width: min(720px, 100%);
}

.news__list li+li {
  border-top: 1px solid var(--c-gray);
}

.news__list a {
  display: flex;
  align-items: center;
  height: 80px;
  gap: 0;
}

.news__meta {
  display: flex;
  align-items: center;
  flex: none;
}

.news__meta time {
  width: 60px;
  color: var(--c-sub);
  white-space: nowrap;
}

.news__cat {
  width: 102px;
  text-align: center;
  position: relative;
  margin-left: 20px;
}

.news__cat::before,
.news__cat::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 12px;
  margin-top: -6px;
  border-left: 1px solid var(--c-gray);
}

.news__cat::before {
  left: 0;
}

.news__cat::after {
  right: 0;
}

.news__title {
  flex: 1;
  min-width: 0;
  padding-left: 22px;
}

.news__list img {
  width: 48px;
  flex: none;
  transition: transform .4s var(--ease);
}

.news__list a:hover img {
  transform: translateX(6px);
}

.news__list a:hover .news__title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1100px) and (min-width: 768px) {
  .news__box {
    padding: 50px 50px;
    flex-direction: column;
    align-items: stretch;
  }

  .news__head {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }

  .news__list {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .news {
    padding: 80px 15px 120px;
  }

  .news__box {
    min-height: 0;
    padding: 50px 30px 30px;
    flex-direction: column;
    align-items: stretch;
    gap: 50px;
  }

  .news__head {
    gap: 0;
  }

  .news__head {
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 10px;
    align-items: center;
  }

  .news__head>div {
    display: contents;
  }

  .news__head .sec-en {
    grid-column: 1 / -1;
  }

  .news__head .sec-en+.sec-title {
    margin-top: 0;
  }

  .news__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .news__list li+li {
    border-top: 0;
  }

  .news__list li {
    border-bottom: 1px solid var(--c-gray);
  }

  .news__list li:last-child {
    border-bottom: 0;
  }

  .news__list a {
    height: auto;
    padding-bottom: 25px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    letter-spacing: .08em;
  }

  .news__meta {
    grid-column: 1 / -1;
    gap: 10px;
  }

  .news__meta time {
    width: auto;
    font-size: 13px;
  }

  .news__cat {
    width: auto;
    margin-left: 0;
    padding: 0 10px;
  }

  .news__title {
    padding: 0 10px 0 0;
    line-height: 1.6;
  }
}

/* =========================================================
   区切り写真
   ========================================================= */
.break-img {
  aspect-ratio: 1440 / 610;
}

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

@media (max-width: 767px) {
  .break-img {
    aspect-ratio: 390 / 200;
  }
}

/* =========================================================
   対応エリア
   ========================================================= */
.area {
  position: relative;
  min-height: 640px;
  background: var(--c-bg) url("../img/bg-texture.webp") repeat top center / 1440px auto;
}

.area__body {
  padding: 120px 0 80px calc(150 * var(--u));
}

.area__body>*:not(.area__map) {
  position: relative;
  z-index: 1;
}

.area__text {
  margin-top: 12px;
}

.area__map {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

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

.area__list {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 440px;
}

.area__list div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.area__list dt {
  display: flex;
  align-items: center;
  gap: 5px;
}

.area__list dt::before {
  content: "";
  width: 8px;
  border-top: 1px solid var(--c-gray);
}

.area__list dd {
  font-size: 13px;
  line-height: 1.8;
}

.area__vlabel {
  position: absolute;
  top: 35px;
  right: 20px;
}

@media (max-width: 1100px) and (min-width: 768px) {
  .area__body {
    padding-left: 50px;
  }

  .area__list,
  .area__text {
    max-width: 44%;
  }

  .area__list dd br {
    display: none;
  }
}

@media (max-width: 767px) {
  .area {
    min-height: 0;
  }

  .area__body {
    padding: 120px 20px;
    display: flex;
    flex-direction: column;
  }

  .area .sec-en {
    font-size: 12px;
    letter-spacing: .08em;
  }

  .area .sec-en+.sec-title {
    margin-top: 10px;
  }

  .area__text {
    margin-top: 10px;
  }

  .area__map {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 350 / 311;
    margin-top: 40px;
  }

  .area__list {
    margin-top: 40px;
  }

  .area__list dd br {
    display: none;
  }
}

/* =========================================================
   SNS
   ========================================================= */
.sns {
  display: flex;
  min-height: 640px;
}

.sns__img {
  position: relative;
  width: 50%;
  flex: none;
}

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

.sns__vlabel {
  position: absolute;
  top: 35px;
  left: 20px;
  color: #fff;
  white-space: nowrap;
}

.sns__body {
  padding: 120px 40px 80px calc(100 * var(--u));
}

.sns__list {
  margin-top: 52px;
  width: min(520px, 100%);
}

.sns__list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-block: 17px;
}

.sns__list li:first-child {
  padding-top: 0;
}

.sns__list li+li {
  border-top: 1px solid var(--c-gray);
}

.sns__list .btn-arrow {
  gap: 10px;
}

.sns__list p {
  min-width: 294px;
  flex: none;
  white-space: nowrap;
}

@media (max-width: 1100px) and (min-width: 768px) {
  .sns__list li {
    flex-direction: column;
    align-items: flex-start;
  }

  .sns__list p {
    min-width: 0;
    white-space: normal;
  }
}

@media (max-width: 767px) {
  .sns {
    flex-direction: column;
    min-height: 0;
    padding-bottom: 100px;
  }

  .sns__img {
    width: 100%;
    aspect-ratio: 390 / 346;
  }

  .sns__body {
    padding: 50px 20px 0;
  }

  .sns__list {
    margin-top: 40px;
  }

  .sns__list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    padding-block: 17px;
  }

  .sns__list p {
    min-width: 0;
    white-space: normal;
  }
}

/* =========================================================
   コラム・ブログ
   ========================================================= */
.reading {
  display: flex;
}

.reading__col {
  width: 50%;
  padding: 160px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
}

.reading__head,
.reading .post-list {
  width: min(560px, 100%);
}

.reading__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
}

.reading__sub {
  margin-top: 2px;
  color: var(--c-sub);
}

.post a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-block: 25px;
  border-top: 1px solid var(--c-gray);
}

.post__img {
  flex: none;
  overflow: hidden;
}

.post--column .post__img {
  width: 120px;
  aspect-ratio: 1;
}

.post--blog .post__img {
  width: 171px;
  aspect-ratio: 171 / 120;
}

.post__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.post--column .post__body {
  max-width: 420px;
}

.post--blog .post__body {
  width: 360px;
  height: 128px;
  justify-content: space-between;
  gap: 0;
}

.post__title {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 16px;
}

.post__new {
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .05em;
  color: var(--c-red);
}

.post__date {
  font-size: 12px;
  line-height: 1.7;
  color: var(--c-sub);
}

.post__tags {
  display: flex;
  align-items: center;
  gap: 15px;
}

.post__tag {
  padding: 0 10px;
  border-radius: 3px;
  background: var(--c-gray40);
}

.post__heading {
  line-height: 1.7;
}

.post a:hover .post__title,
.post a:hover .post__heading {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1100px) and (min-width: 768px) {
  .reading__col {
    padding: 120px 30px;
  }

  .reading__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .post--blog .post__body {
    width: auto;
  }

  .post--blog .post__img {
    width: 130px;
  }
}

@media (max-width: 767px) {
  .reading {
    flex-direction: column;
    gap: 100px;
    padding: 120px 20px;
  }

  .reading__col {
    width: 100%;
    padding: 0;
    align-items: stretch;
    gap: 30px;
  }

  .reading__head,
  .reading .post-list {
    width: 100%;
  }

  .reading__head {
    display: contents;
  }

  .reading__head>div {
    order: 0;
  }

  .reading__head .btn-arrow {
    order: 2;
    align-self: flex-start;
  }

  .reading .post-list {
    order: 1;
    border-bottom: 1px solid var(--c-gray);
  }

  .reading__sub {
    font-size: 12px;
    letter-spacing: .08em;
  }

  .post a {
    gap: 10px;
  }

  .post--column .post__body {
    max-width: 210px;
  }

  .post__excerpt {
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .post--blog .post__body {
    width: auto;
    flex: 1;
  }

  .post--blog .post__img {
    width: 143px;
    aspect-ratio: 143 / 100;
  }

  .post__heading {
    line-height: 1.6;
  }
}

/* =========================================================
   CTA（共通）
   ========================================================= */
.cta {
  display: flex;
  justify-content: space-between;
  gap: 1px;
}

.cta__item {
  position: relative;
  flex: 1;
  aspect-ratio: 359 / 420;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.cta__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}

.cta__item:hover img {
  transform: scale(1.04);
}

.cta__item .btn-arrow {
  position: relative;
}

@media (max-width: 767px) {
  .cta {
    flex-direction: column;
    gap: 0;
  }

  .cta__item {
    aspect-ratio: 390 / 180;
  }
}

/* =========================================================
   フッター（共通）
   ========================================================= */
.footer {
  background: var(--c-charcoal);
  color: #fff;
}

.footer__inner {
  width: min(1140px, 100% - 80px);
  margin-inline: auto;
  padding: 100px 0;
  min-height: 650px;
  display: grid;
  grid-template-columns: 1fr 640px;
  grid-template-rows: 1fr auto;
  column-gap: 60px;
  font-size: 13px;
  letter-spacing: .03em;
}

.footer a:hover {
  opacity: .7;
}

.footer__brand img {
  width: 127px;
}

.footer__catch {
  margin-top: 15px;
  font-size: 24px;
  line-height: 1.7;
  letter-spacing: .1em;
}

.footer__company {
  margin-top: 30px;
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__sns {
  padding-top: 30px;
}

.footer__nav {
  display: flex;
  gap: 80px;
}

.footer__nav ul {
  width: 160px;
  line-height: 2.3;
}

.footer__area {
  margin-top: 50px;
  padding-top: 50px;
  border-top: 1px solid rgba(169, 162, 154, .3);
}

.footer__area dl {
  margin-top: 10px;
}

.footer__area div {
  display: flex;
}

.footer__area dt {
  flex: none;
}

.footer__area dt::after {
  content: "|";
  margin: 0 .9em;
}

.footer__copy {
  grid-column: 1 / -1;
  align-self: end;
  margin-top: 60px;
}

.sns-icons {
  display: flex;
  align-items: center;
  gap: 13px;
}

.sns-icons img {
  width: 24px;
}

.sns-icons a:last-child img {
  width: 34px;
}

.icon-line {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  overflow: hidden;
}

.icon-line img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.icon-line .icon-line__text {
  inset: 38.08% 27.13% 46.1% 27.59%;
  width: auto;
  height: auto;
}

.copyright {
  display: flex;
  gap: 20px;
  font-family: var(--ff-gothic);
  font-size: 12px;
  line-height: normal;
  letter-spacing: .05em;
  color: var(--c-gray);
}

.copyright a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 1100px) and (min-width: 768px) {
  .footer__inner {
    grid-template-columns: 1fr;
    row-gap: 60px;
  }

  .footer__nav {
    gap: 40px;
  }
}

@media (max-width: 767px) {
  .footer__inner {
    width: 100%;
    min-height: 0;
    padding: 100px 30px 60px;
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .footer__info,
  .footer__main {
    display: contents;
  }

  .footer__brand {
    order: 1;
  }

  .footer__catch {
    margin-top: 10px;
  }

  .footer__company {
    order: 2;
    margin-top: 0;
    padding-bottom: 10px;
  }

  .footer__nav {
    order: 3;
    justify-content: space-between;
    gap: 10px;
    padding-block: 30px;
    border-block: 1px solid rgba(169, 162, 154, .3);
  }

  .footer__nav ul {
    width: 160px;
    line-height: 2.5;
  }

  .footer__area {
    order: 4;
    margin: 0;
    padding: 0 0 30px;
    border: 0;
    border-bottom: 1px solid rgba(169, 162, 154, .3);
  }

  .footer__area dl {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    line-height: 1.7;
  }

  .footer__area div {
    display: block;
  }

  .footer__area dt {
    display: inline;
  }

  .footer__area dd {
    display: inline;
  }

  .footer__sns {
    order: 5;
    padding-top: 0;
    gap: 12px;
  }

  .footer__copy {
    order: 6;
    align-self: stretch;
    margin-top: 0;
    justify-content: space-between;
  }

  .footer__copy a {
    text-decoration: none;
  }
}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* =========================================================
   下層ページ共通
   ========================================================= */
.page-head {
  padding: 95px 40px 0;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  font-family: var(--ff-gothic);
  font-size: 12px;
  line-height: normal;
  letter-spacing: .05em;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 15px;
}

.breadcrumb li+li::before {
  content: "";
  width: 3px;
  height: 6px;
  background: url("../img/breadcrumb-arrow.svg") no-repeat center / contain;
}

.breadcrumb a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.breadcrumb a:hover {
  opacity: .7;
}

.page-title {
  margin: 68px 0 0 70px;
}

.page-title__en {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  line-height: 2;
  color: var(--c-gray);
}

.page-title__en::before {
  content: "";
  width: 8px;
  border-top: 1px solid var(--c-gray);
}

.page-title__ja {
  margin-top: 2px;
  font-size: 24px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .08em;
}

@media (max-width: 767px) {
  .page-head {
    padding: 80px 20px 0;
  }

  .page-title {
    margin: 53px 0 0 10px;
  }
}

/* コンセプトへの誘導バナー */
.concept-banner {
  padding: 100px 20px 160px;
}

.concept-banner a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  width: min(900px, 100%);
  min-height: 180px;
  margin-inline: auto;
  padding: 30px 90px;
  color: #fff;
  overflow: hidden;
}

.concept-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}

.concept-banner a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, .2);
}

.concept-banner a>span {
  position: relative;
  z-index: 2;
}

.concept-banner a:hover img {
  transform: scale(1.04);
}

@media (max-width: 1000px) and (min-width: 768px) {
  .concept-banner a {
    padding-inline: 50px;
  }
}

@media (max-width: 767px) {
  .concept-banner {
    padding: 104px 20px 100px;
  }

  .concept-banner a {
    min-height: 140px;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    padding: 27px 20px 16px 23px;
    font-size: 14px;
  }

  .concept-banner .btn-arrow {
    align-self: center;
  }
}

/* 下層CTA（資料請求／来場予約） */
.cta-duo {
  display: flex;
}

.cta-duo a {
  position: relative;
  flex: 1;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  color: #fff;
  text-align: center;
  overflow: hidden;
}

.cta-duo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  transition: transform .8s var(--ease);
}

.cta-duo a:nth-child(2)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(69, 65, 61, .1);
  mix-blend-mode: multiply;
}

.cta-duo a:hover img {
  transform: scale(1.04);
}

.cta-duo__title,
.cta-duo__text {
  position: relative;
  z-index: 2;
}

.cta-duo__title {
  font-size: 18px;
  letter-spacing: .08em;
}

@media (max-width: 767px) {
  .cta-duo {
    flex-direction: column;
  }

  .cta-duo a {
    min-height: 220px;
  }
}

/* =========================================================
   施工事例一覧
   ========================================================= */
.works-list {
  width: min(1220px, 100% - 80px);
  margin: 62px auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 44px;
  row-gap: 50px;
}

.works-card a {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.works-card__img {
  aspect-ratio: 588 / 340;
  overflow: hidden;
}

.works-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}

.works-card a:hover img {
  transform: scale(1.04);
}

.works-card__title {
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
}

.works-card__meta {
  color: var(--c-sub);
}

@media (max-width: 767px) {
  .works-list {
    width: calc(100% - 40px);
    margin-top: 42px;
    grid-template-columns: 1fr;
  }

  .works-card__img {
    aspect-ratio: 350 / 202;
  }
}

/* =========================================================
   施工事例詳細
   ========================================================= */
.detail-hero {
  aspect-ratio: 1440 / 921;
}

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

.detail-head {
  padding: 19px 40px 0;
}

.detail {
  width: min(1000px, 100% - 80px);
  margin: 103px auto 0;
  display: flex;
  flex-direction: column;
  gap: 70px;
}

.detail__intro {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail__title {
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
}

.detail__photos {
  display: flex;
  flex-direction: column;
  gap: 70px;
}

.detail__pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.detail-photo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-photo img {
  width: 100%;
  object-fit: cover;
}

.detail-photo--portrait img {
  aspect-ratio: 480 / 720;
}

.detail-photo--wide img {
  aspect-ratio: 1000 / 676;
}

.detail__story {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.detail__story section,
.detail__info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail__sub {
  font-size: 15px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .08em;
  color: var(--c-sub);
}

.detail__spec {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px 20px;
}

.detail__spec div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.detail__spec dt {
  width: 80px;
  flex: none;
}

.detail__spec dd {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 項目と値の間の斜線（Figma Line 23：傾き112°・長さ16px） */
.detail__spec dd::before {
  content: "";
  width: 1px;
  height: 15px;
  background: var(--c-gray);
  transform: rotate(22deg);
}

.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding-top: 100px;
}

.pager__list {
  width: 260px;
  text-align: center;
}

.pager__list:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pager__prev,
.pager__next {
  display: inline-flex;
  align-items: center;
  gap: 15px;
}

.pager__prev img,
.pager__next img {
  width: 48px;
  transition: transform .4s var(--ease);
}

.pager__prev:hover img {
  transform: translateX(-6px);
}

.pager__next:hover img {
  transform: translateX(6px);
}

.detail+.cta-duo {
  margin-top: 160px;
}

@media (max-width: 767px) {
  .detail-hero {
    aspect-ratio: 390 / 293;
  }

  .detail-head {
    padding: 17px 20px 0;
  }

  .detail {
    width: calc(100% - 40px);
    margin-top: 73px;
    gap: 30px;
  }

  .detail__photos {
    gap: 50px;
  }

  .detail__pair {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .detail-photo--portrait img {
    aspect-ratio: 350 / 525;
  }

  .detail-photo--wide img {
    aspect-ratio: 350 / 236;
  }

  .detail__story {
    gap: 40px;
  }

  .detail__spec {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .detail__spec dt {
    width: 60px;
  }

  .pager {
    justify-content: space-between;
    gap: 0;
    padding-top: 40px;
  }

  .pager__list {
    width: auto;
  }

  .detail+.cta-duo {
    margin-top: 100px;
  }
}

/* =========================================================
   下層：大きな写真つきのページ見出し（イベント一覧・コラム一覧など）
   ========================================================= */
.page-hero {
  margin: 100px 0 0 40px;
  aspect-ratio: 1400 / 540;
  overflow: hidden;
}

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

.page-hero+.page-head {
  padding-top: 25px;
}

.page-hero+.page-head .page-title {
  margin: 118px 0 0 110px;
}

@media (max-width: 767px) {
  .page-hero {
    margin: 60px 0 0 20px;
    aspect-ratio: 370 / 240;
  }

  .page-hero+.page-head {
    padding-top: 17px;
  }

  .page-hero+.page-head .page-title {
    margin: 53px 0 0 10px;
  }
}

/* ページ送り */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
}

.pagination a,
.pagination span {
  min-width: 10px;
  text-align: center;
}

.pagination [aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pagination a:hover {
  opacity: .6;
}

.pagination img {
  width: 12px;
}

/* ikka designの家づくりを知る */
.know {
  padding: 60px 40px;
  border-top: 1px solid var(--c-gray40);
  text-align: center;
}

.know__title {
  font-size: 16px;
  font-weight: 400;
}

.know__list {
  width: min(1220px, 100%);
  margin: 30px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  text-align: left;
}

.know__list a {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 120px;
  padding: 10px 12px;
  overflow: hidden;
  color: #fff;
  background: #d9d9d9;
}

.know__list a.is-noimage {
  color: var(--c-text);
}

.know__list img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}

.know__list a:not(.is-noimage)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, .2);
}

.know__list span {
  position: relative;
  z-index: 2;
}

.know__list a:hover img {
  transform: scale(1.04);
}

.know+.cta-duo {
  margin-top: 42px;
}

@media (max-width: 767px) {
  .know {
    padding: 50px 20px;
  }

  .know {
    padding-inline: 0;
  }

  .know__list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .know__list::-webkit-scrollbar {
    display: none;
  }

  .know__list li {
    flex: 0 0 200px;
    scroll-snap-align: start;
  }

  .know__list a {
    height: 120px;
  }
}

/* =========================================================
   イベント・見学会一覧
   ========================================================= */
.event-grid {
  width: min(1140px, 100% - 80px);
  margin: 62px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 80px 30px;
}

.event-grid .event-card__img {
  position: relative;
}

.event-grid .event-card__body {
  margin-top: 15px;
}

.event-grid .event-card__title {
  margin: 0;
}

.event-card.is-ended .event-card__img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #707070;
  mix-blend-mode: multiply;
}

.event-card__ended {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--ff-gothic);
  font-size: 14px;
  letter-spacing: .05em;
}

.event-grid+.pagination {
  margin-top: 80px;
}

.pagination+.concept-banner {
  padding: 80px 20px;
}

@media (max-width: 900px) and (min-width: 768px) {
  .event-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .event-grid {
    width: calc(100% - 40px);
    margin-top: 42px;
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .event-grid .event-card__body {
    margin-top: 0;
  }

  .event-card__ended {
    font-size: 12px;
  }

  .event-grid+.pagination {
    margin-top: 50px;
  }

  .pagination+.concept-banner {
    padding: 60px 20px;
  }
}

/* =========================================================
   イベント・見学会詳細
   ========================================================= */
.event-head {
  padding: 95px 40px 0;
}

.event-head__body {
  margin-top: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.event-head__title {
  font-size: 24px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .08em;
}

.event-head__date {
  margin-top: 17px;
  padding: 6px 15px;
  border: 1px solid var(--c-gray);
  border-radius: 21px;
}

.event-head__place {
  margin-top: 8px;
  color: var(--c-sub);
}

.event-detail {
  width: min(960px, 100% - 80px);
  margin: 57px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
}

.event-detail>* {
  width: 100%;
}

.event-detail__main {
  aspect-ratio: 960 / 540;
}

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

.event-detail__outline dt,
.event-detail__outline dd {
  display: inline;
}

.event-detail__outline div+div {
  margin-top: 0;
}

.event-detail__outline dt::after {
  content: "｜";
}

.event-detail__note {
  margin: 0;
}

.btn-reserve {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 300px;
  height: 70px;
  border-radius: 45px;
  background: var(--c-charcoal);
  color: #fff;
  transition: opacity .3s;
}

.btn-reserve:hover {
  opacity: .85;
}

.btn-reserve img {
  width: 12px;
}

.event-detail__reserve {
  width: auto;
  padding: 30px 0;
}

.event-point {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.event-point__img {
  width: 400px;
  flex: none;
  aspect-ratio: 400 / 225;
}

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

.event-point__body {
  width: 520px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.event-point__title {
  font-size: 18px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .08em;
}

.event-spec {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: center;
  margin: 20px 0 !important;
  border: 1px solid var(--c-gray);
  text-align: center;
}

.event-spec>* {
  padding: 22px 10px;
}

.event-spec>*+* {
  border-left: 1px solid var(--c-gray);
}

.event-spec__label {
  font-size: 16px;
}

.event-spec dl {
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.event-spec dt {
  color: var(--c-sub);
}

.event-recommend {
  padding: 20px 30px;
  border-radius: 10px;
  background: rgba(221, 218, 215, .5);
}

.event-recommend h2 {
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
}

.event-recommend ul {
  margin-top: 5px;
}

.event-recommend li::before {
  content: "・";
}

.event-section h2 {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-gray);
  font-size: 18px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .08em;
}

.event-section p {
  margin-top: 20px;
}

.event-section a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.event-back {
  display: flex;
  justify-content: center;
  padding: 60px 0 140px;
}

@media (max-width: 1000px) and (min-width: 768px) {
  .event-point__img {
    width: 40%;
  }

  .event-point__body {
    width: auto;
    flex: 1;
  }
}

@media (max-width: 767px) {
  .event-head {
    padding: 80px 20px 0;
  }

  .event-head__body {
    margin-top: 50px;
  }

  .event-head__title {
    font-size: 20px;
    line-height: 1.9;
  }

  .event-detail {
    width: calc(100% - 40px);
    margin-top: 40px;
    gap: 40px;
  }

  .event-detail__main {
    aspect-ratio: 350 / 197;
  }

  .event-detail__reserve {
    padding: 10px 0;
  }

  .event-point {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .event-point__img {
    width: 100%;
  }

  .event-point__body {
    width: auto;
  }

  .event-spec {
    grid-template-columns: repeat(3, 1fr);
  }

  .event-spec>* {
    padding: 15px 5px;
  }

  .event-spec__label {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--c-gray);
  }

  .event-spec>*+* {
    border-left: 0;
  }

  .event-spec dl+dl {
    border-left: 1px solid var(--c-gray);
  }

  .event-spec dl {
    font-size: 13px;
  }

  .event-recommend {
    padding: 20px;
  }

  .event-back {
    padding: 40px 0 100px;
  }
}

/* =========================================================
   フォーム（イベント予約・来場予約・資料請求・お問い合わせで共通）
   ========================================================= */
.form-section {
  width: min(1080px, 100% - 80px);
  margin: 127px auto 0;
  display: grid;
  grid-template-columns: 373px 1fr;
}

.form-section__title {
  font-size: 18px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .08em;
}

.form-section__lead {
  margin-top: 50px;
  font-size: 13px;
}

.form-section__lead p+p {
  margin-top: 1.5em;
}

.req {
  color: var(--c-red);
}

.form {
  display: flex;
  flex-direction: column;
  gap: 52px;
  max-width: 690px;
}

.form__field {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.form__label {
  display: block;
  margin-bottom: 18px;
  font-size: 14px;
  padding: 0;
}

.form__row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.form__row>* {
  flex: 1;
}

.form__row--zip>input {
  flex: 0 0 138px;
}

.form__row--zip span {
  flex: 0 0 auto;
  color: var(--c-sub);
}

.form input[type="text"],
.form input[type="tel"],
.form input[type="email"],
.form input[type="date"],
.form select,
.form textarea {
  width: 100%;
  height: 50px;
  padding: 0 20px;
  border: 1px solid var(--c-gray);
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  letter-spacing: .05em;
  color: var(--c-text);
  appearance: none;
}

.form select {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='none' stroke='%23847e76'/%3E%3C/svg%3E") no-repeat right 20px center;
}

.form select:invalid,
.form input[type="date"]:invalid {
  color: var(--c-gray);
}

.form textarea {
  height: 140px;
  padding: 14px 20px;
  resize: vertical;
}

.form ::placeholder {
  color: var(--c-gray);
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--c-text);
}

.form__note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--c-red);
}

.form__privacy {
  font-size: 13px;
  line-height: 1.7;
}

.form__privacy a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form__agree {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: -20px;
  font-size: 14px;
  cursor: pointer;
}

.form__agree input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--c-charcoal);
}

.form__submit {
  height: 88px;
  border-radius: 44px;
  background: var(--c-charcoal);
  color: #fff;
  font-size: 14px;
  letter-spacing: .1em;
  transition: opacity .3s;
}

.form__submit:hover {
  opacity: .85;
}

@media (max-width: 1000px) {
  .form-section {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .form-section__lead {
    margin-top: 20px;
  }
}

@media (max-width: 767px) {
  .form-section {
    width: calc(100% - 40px);
    margin-top: 80px;
  }

  .form {
    gap: 36px;
  }

  .form__label {
    margin-bottom: 12px;
  }

  .form__row {
    gap: 10px;
  }

  .form__row--zip>input {
    flex-basis: 110px;
  }

  .form__submit {
    height: 70px;
  }
}

/* =========================================================
   スタッフコラム一覧
   ========================================================= */
.column-index {
  display: grid;
  grid-template-columns: calc(370 * var(--u)) minmax(0, 850px);
  padding: 118px calc(110 * var(--u)) 0;
  justify-content: space-between;
}

.column-index .page-title {
  margin: 0;
}

.column-list li+li {
  margin-top: 40px;
}

.column-item a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--c-gray);
}

.column-item__body {
  flex: 1;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.column-item__head {
  display: flex;
  align-items: center;
  gap: 15px;
}

.column-item__new {
  font-size: 12px;
  line-height: 1.7;
  color: var(--c-red);
}

.column-item__title {
  font-size: 18px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .08em;
}

.column-item__head img {
  width: 48px;
  transition: transform .4s var(--ease);
}

.column-item a:hover .column-item__head img {
  transform: translateX(6px);
}

.column-item__date {
  padding-top: 25px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--c-sub);
}

.column-item__img {
  width: 200px;
  flex: none;
  aspect-ratio: 1;
  overflow: hidden;
}

.column-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}

.column-item a:hover .column-item__img img {
  transform: scale(1.04);
}

.column-index .pagination {
  justify-content: flex-end;
  padding: 50px 0 0;
}

.column-index+.cta-duo {
  margin-top: 124px;
}

@media (max-width: 1000px) and (min-width: 768px) {
  .column-index {
    grid-template-columns: 1fr;
    gap: 50px;
    padding-inline: 40px;
  }
}

@media (max-width: 767px) {
  .column-index {
    display: block;
    padding: 58px 20px 0;
  }

  .column-index .page-title {
    margin-left: 0;
  }

  .column-list {
    margin-top: 30px;
  }

  .column-list li+li {
    margin-top: 0;
  }

  .column-item a {
    padding: 25px 0;
    border-bottom: 0;
    border-top: 1px solid var(--c-gray);
    gap: 20px;
  }

  .column-item__body {
    gap: 10px;
  }

  .column-item__title {
    font-size: 16px;
    letter-spacing: .05em;
  }

  .column-item__head img {
    display: none;
  }

  .column-item__excerpt {
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .column-item__date {
    padding-top: 0;
  }

  .column-item__img {
    width: 120px;
  }

  .column-index .pagination {
    justify-content: center;
    padding: 30px 0 0;
  }

  .column-index+.cta-duo {
    margin-top: 104px;
  }
}

/* =========================================================
   記事詳細（コラム・ブログ・ニュースで共通）
   ========================================================= */
.article {
  width: min(800px, 100% - 80px);
  margin: 68px auto 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.article__head {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.article__titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--c-gray);
}

.article__title {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .1em;
}

.article__date {
  flex: none;
  font-size: 13px;
  color: var(--c-sub);
}

.article__body {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.article__body p+p {
  margin-top: 2em;
}

.article__body figure img {
  width: 100%;
}

.article__author {
  margin-top: 0 !important;
}

.article .pager {
  justify-content: space-between;
  padding-top: 50px;
  border-top: 1px solid var(--c-gray);
}

.article+.cta-duo {
  margin-top: 134px;
}

@media (max-width: 767px) {
  .page-head--article {
    padding-bottom: 0;
  }

  .article {
    width: calc(100% - 40px);
    margin-top: 53px;
    gap: 30px;
  }

  .article__titlebar {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .article__body {
    gap: 30px;
  }

  .article .pager {
    padding-top: 40px;
  }

  .article .pager__list {
    order: 3;
    flex-basis: 100%;
    margin-top: 30px;
  }

  .article .pager {
    flex-wrap: wrap;
  }

  .article+.cta-duo {
    margin-top: 100px;
  }
}

/* =========================================================
   ニュース一覧
   ========================================================= */
.column-index--news {
  grid-template-columns: calc(250 * var(--u)) minmax(0, 900px);
  padding-inline: calc(150 * var(--u)) calc(140 * var(--u));
}

.news-list li {
  border-bottom: 1px solid var(--c-gray);
}

.news-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 80px;
}

.news-list__main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.news-list__date {
  width: 60px;
  flex: none;
  font-size: 13px;
  letter-spacing: .08em;
  color: #6f6962;
}

.news-list__cat {
  width: 80px;
  flex: none;
  text-align: center;
  letter-spacing: .08em;
}

.news-list__main>span.sep {
  width: 1px;
  height: 12px;
  flex: none;
  background: var(--c-gray);
}

.news-list__title {
  letter-spacing: .08em;
}

.news-list img {
  width: 48px;
  flex: none;
  transition: transform .4s var(--ease);
}

.news-list a:hover img {
  transform: translateX(6px);
}

.news-list a:hover .news-list__title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pagination__dots {
  color: var(--c-sub);
}

@media (max-width: 1000px) and (min-width: 768px) {
  .column-index--news {
    grid-template-columns: 1fr;
    padding-inline: 40px;
  }
}

@media (max-width: 767px) {
  .column-index--news {
    padding-inline: 20px;
  }

  .news-list {
    margin-top: 30px;
    border-top: 1px solid var(--c-gray);
  }

  .news-list a {
    padding: 20px 0;
  }

  .news-list__main {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .news-list__cat {
    width: auto;
    padding: 0 10px;
  }

  .news-list__title {
    flex-basis: 100%;
    line-height: 1.7;
  }
}

/* =========================================================
   ブログ一覧
   ========================================================= */
.blog-side__lead {
  margin-top: 40px;
}

.blog-side__cat {
  width: 200px;
  margin-top: 40px;
  padding: 50px 0;
  border-block: 1px solid var(--c-gray);
}

.blog-side__cat p {
  font-size: 12px;
  color: var(--c-sub);
}

.blog-side__cat ul {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.blog-side__cat a {
  color: var(--c-sub);
  border-bottom: 1px solid transparent;
}

.blog-side__cat a[aria-current="page"],
.blog-side__cat a:hover {
  color: var(--c-text);
  border-bottom-color: var(--c-text);
}

.blog-list li+li {
  margin-top: 40px;
}

.blog-item a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--c-gray);
}

.blog-item__body {
  flex: 1;
  max-width: 520px;
  min-height: 148px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.blog-tag {
  padding: 0 10px;
  border-radius: 3px;
  background: var(--c-gray40);
}

.blog-item__title {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .08em;
}

.blog-item__meta {
  display: flex;
  gap: 20px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--c-sub);
}

.blog-item__meta .new {
  color: var(--c-red);
}

.blog-item__img {
  width: 240px;
  flex: none;
  aspect-ratio: 240 / 168;
  overflow: hidden;
}

.blog-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}

.blog-item a:hover img {
  transform: scale(1.04);
}

.blog-item a:hover .blog-item__title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog-index {
  padding-bottom: 234px;
}

@media (max-width: 767px) {
  .blog-index {
    padding-bottom: 100px;
  }

  .blog-side__lead {
    margin-top: 20px;
  }

  .blog-side__cat {
    width: 100%;
    margin-top: 30px;
    padding: 25px 0;
  }

  .blog-list {
    margin-top: 40px;
  }

  .blog-item a {
    gap: 15px;
    align-items: flex-start;
    padding-bottom: 30px;
  }

  .blog-list li+li {
    margin-top: 30px;
  }

  .blog-item__body {
    min-height: 0;
    gap: 8px;
  }

  .blog-item__title {
    font-size: 15px;
    line-height: 1.7;
  }

  .blog-item__img {
    width: 120px;
  }
}

/* =========================================================
   記事詳細：中央揃えの見出し（ニュース）・ブログ
   ========================================================= */
.article-center-head {
  margin-top: 68px;
  text-align: center;
  padding-inline: 20px;
}

.article-center-head h1 {
  font-size: 24px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .08em;
}

.article-center-head time {
  display: block;
  margin-top: 7px;
  color: var(--c-sub);
}

.article--news {
  margin-top: 77px;
  gap: 70px;
}

.article-back {
  display: flex;
  justify-content: center;
  padding-top: 50px;
  border-top: 1px solid var(--c-gray);
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 15px;
}

.btn-back img {
  width: 48px;
  transition: transform .4s var(--ease);
}

.btn-back:hover img {
  transform: translateX(-6px);
}

.article--news {
  margin-bottom: 106px;
}

.blog-head {
  width: min(800px, 100% - 80px);
  margin: 78px auto 0;
}

.blog-head__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.blog-head__meta time {
  font-size: 12px;
  line-height: 1.7;
  color: var(--c-sub);
}

.blog-head h1 {
  margin-top: 2px;
  font-size: 24px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .08em;
}

.article--blog {
  margin-top: 42px;
  gap: 50px;
}

.article--blog .article__body {
  gap: 50px;
}

.article--blog h2 {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-gray);
  font-size: 18px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .08em;
}

.article--blog section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.article--blog .formula {
  padding-left: 2em;
}

.toc {
  padding: 20px 30px;
  border-radius: 10px;
  background: rgba(221, 218, 215, .5);
}

.toc p {
  font-size: 16px;
}

.toc ol {
  margin-top: 10px;
  list-style: none;
  counter-reset: toc;
}

.toc li {
  counter-increment: toc;
}

.toc li::before {
  content: counter(toc) " ";
}

.toc a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.writer {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 50px;
  border: 1px solid var(--c-gray);
  border-radius: 15px;
}

.writer img {
  width: 120px;
  aspect-ratio: 1;
  object-fit: cover;
  flex: none;
}

.writer__name {
  display: flex;
  align-items: center;
  gap: 15px;
}

.writer__name span:first-child {
  color: var(--c-sub);
}

.writer__name span:last-child {
  font-size: 16px;
}

.writer p:last-child {
  margin-top: 10px;
}

.article--blog .concept-banner {
  padding: 50px 0;
  margin-inline: -50px;
}

.related__title {
  font-size: 18px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .08em;
  text-align: center;
}

.related ul {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 240px);
  justify-content: space-between;
  gap: 40px 20px;
}

.related a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.related img {
  width: 100%;
  aspect-ratio: 240 / 168;
  object-fit: cover;
}

.related__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

.related .blog-tag {
  background: var(--c-gray);
}

.related__heading {
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: .08em;
}

.related time {
  font-size: 12px;
  line-height: 1.7;
  color: var(--c-sub);
}

.article--blog {
  margin-bottom: 144px;
}

@media (max-width: 900px) {
  .article--blog .concept-banner {
    margin-inline: 0;
  }

  .related ul {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

@media (max-width: 767px) {
  .article-center-head {
    margin-top: 50px;
  }

  .article-center-head h1 {
    font-size: 20px;
    line-height: 1.9;
  }

  .article--news {
    margin-top: 50px;
    gap: 50px;
    margin-bottom: 80px;
  }

  .blog-head {
    width: calc(100% - 40px);
    margin-top: 50px;
  }

  .blog-head h1 {
    font-size: 20px;
    line-height: 1.9;
  }

  .article--blog {
    margin-top: 30px;
    gap: 40px;
    margin-bottom: 100px;
  }

  .article--blog .article__body {
    gap: 40px;
  }

  .writer {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 30px 20px;
  }

  .article--blog .concept-banner {
    padding: 20px 0;
  }

  .related ul {
    grid-template-columns: 1fr;
  }

  .related a {
    flex-direction: row;
    gap: 15px;
  }

  .related img {
    width: 120px;
    flex: none;
  }
}

.article-back--plain {
  padding-top: 0;
  border-top: 0;
}

.article--blog .related__title {
  padding-bottom: 0;
  border-bottom: 0;
}

@media (max-width: 767px) {
  .news-list__main>span.sep:nth-of-type(3) {
    display: none;
  }

  .news-list__cat+.sep {
    display: none;
  }
}

/* =========================================================
   お客様の声一覧
   ========================================================= */
.voice-head {
  position: relative;
  min-height: 750px;
}

.voice-head .page-head {
  position: relative;
  z-index: 1;
}

.voice-head .page-title {
  margin: 148px 0 0 70px;
}

.voice-head__lead {
  position: relative;
  z-index: 1;
  max-width: 470px;
  margin: 50px 0 0 160px;
}

.voice-head__img1 {
  position: absolute;
  top: 60px;
  left: calc(730 * var(--u));
  width: calc(480 * var(--u));
  aspect-ratio: 480 / 600;
}

.voice-head__img2 {
  position: absolute;
  top: calc(60px + 410 * var(--u));
  right: 0;
  width: calc(280 * var(--u));
  aspect-ratio: 1;
}

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

.voice-grid {
  width: min(1220px, 100% - 80px);
  margin: 140px auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 80px 44px;
}

.voice-card a {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.voice-card__img {
  aspect-ratio: 588 / 340;
  overflow: hidden;
}

.voice-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}

.voice-card a:hover img {
  transform: scale(1.04);
}

.voice-card__title {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
}

.voice-name {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--c-sub);
}

.voice-name::before {
  content: "";
  width: 30px;
  border-top: 1px solid var(--c-gray);
}

.voice-grid+.cta-duo {
  margin-top: 172px;
}

@media (max-width: 1100px) and (min-width: 768px) {
  .voice-head__lead {
    margin-left: 70px;
    max-width: calc(660 * var(--u) - 70px);
  }
}

@media (max-width: 767px) {
  .voice-head {
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: 80px;
  }

  .voice-head .page-head {
    display: contents;
  }

  .voice-head .page-head>nav {
    order: 1;
    padding: 0 20px;
  }

  .voice-head__img1 {
    order: 2;
    position: relative;
    top: auto;
    left: auto;
    width: calc(100% - 81px);
    aspect-ratio: 309 / 322;
    margin: 15px 0 0 auto;
  }

  .voice-head__img2 {
    top: 407px;
    right: auto;
    left: 34px;
    width: 95px;
    z-index: 1;
  }

  .voice-head .page-title {
    order: 3;
    margin: 90px 0 0 30px;
  }

  .voice-head__lead {
    order: 4;
  }

  .voice-head__lead {
    margin: 30px 20px 0;
  }

  .voice-head__lead br {
    display: none;
  }

  .voice-grid {
    width: calc(100% - 40px);
    margin-top: 60px;
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .voice-card a {
    gap: 15px;
  }

  .voice-grid+.cta-duo {
    margin-top: 100px;
  }
}

/* =========================================================
   お客様の声詳細
   ========================================================= */
.voice-detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(720 * var(--u));
  column-gap: 40px;
  margin-top: 68px;
}

.voice-detail-head__body {
  padding: 160px 0 0 calc(120 * var(--u));
  max-width: 600px;
}

.voice-detail-head__title {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .08em;
}

.voice-detail-head .voice-name {
  margin-top: 20px;
}

.voice-spec {
  margin-top: 77px;
  max-width: 480px;
  padding: 30px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 20px;
  border-block: 1px solid var(--c-gray);
}

.voice-spec div {
  display: flex;
  align-items: center;
  gap: 15px;
}

.voice-spec dt {
  width: 70px;
  flex: none;
}

.voice-spec dd {
  display: flex;
  align-items: center;
  gap: 15px;
}

.voice-spec dd::before {
  content: "";
  width: 1px;
  height: 16px;
  background: var(--c-gray);
}

.voice-detail-head__img {
  aspect-ratio: 720 / 480;
  margin-top: 0;
}

.voice-detail-head__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.interview {
  width: min(800px, 100% - 80px);
  margin: 266px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
}

.interview>* {
  width: 100%;
}

.interview__qa {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.interview__q {
  padding-bottom: 15px;
  border-bottom: 1px solid var(--c-gray);
  font-size: 18px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .08em;
}

.interview__a {
  margin-top: 25px;
}

.interview__a p+p {
  margin-top: 2em;
}

.interview__qa figure img {
  width: 100%;
}

.interview__from {
  padding: 50px;
  border: 1px solid var(--c-gray);
  border-radius: 15px;
}

.interview__from p:first-child {
  color: var(--c-sub);
}

.interview__from p+p {
  margin-top: 15px;
}

.interview .btn-back {
  width: auto;
}

.interview .concept-banner {
  width: auto;
  padding: 0;
  margin-inline: -50px;
}

.interview+.cta-duo {
  margin-top: 161px;
}

@media (max-width: 1100px) and (min-width: 768px) {
  .voice-detail-head__body {
    padding-top: 40px;
    padding-left: 40px;
  }
}

@media (max-width: 900px) {
  .interview .concept-banner {
    margin-inline: 0;
  }
}

@media (max-width: 767px) {
  .voice-detail-head {
    display: flex;
    flex-direction: column-reverse;
    margin-top: 30px;
  }

  .voice-detail-head__body {
    padding: 30px 20px 0;
  }

  .voice-detail-head__title {
    font-size: 18px;
  }

  .voice-spec {
    margin-top: 40px;
    max-width: none;
  }

  .interview {
    width: calc(100% - 40px);
    margin-top: 80px;
    gap: 60px;
  }

  .interview__qa {
    gap: 30px;
  }

  .interview__q {
    font-size: 16px;
  }

  .interview__from {
    padding: 30px 20px;
  }

  .interview+.cta-duo {
    margin-top: 100px;
  }
}

/* =========================================================
   下層ページ追加分：共通パーツ
   ========================================================= */
/* 横スクロール（ドラッグでも送れる。main.js 参照） */
.h-scroll {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}

.h-scroll::-webkit-scrollbar {
  display: none;
}

.h-scroll>* {
  scroll-snap-align: start;
}

.h-scroll.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.h-scroll.is-dragging img {
  pointer-events: none;
}

/* 大きな写真つき見出しの下：タイトル＋リード文 */
.page-intro {
  width: min(1220px, 100% - 80px);
  margin: 118px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}

.page-intro .page-title {
  margin: 0;
}

.page-intro--narrow {
  width: min(1140px, 100% - 80px);
}

.page-intro--form {
  width: min(1080px, 100% - 80px);
  display: grid;
  grid-template-columns: 380px 1fr;
  align-items: start;
}

.page-intro--form .page-intro__lead {
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.page-intro__note {
  font-size: 13px;
  line-height: 1.8;
}

/* パンくずの下に直接タイトルが来るページ（お問い合わせなど） */
.page-wrap {
  width: min(1080px, 100% - 80px);
  margin-inline: auto;
}

.page-wrap>.page-title {
  margin: 68px 0 0;
}

/* パンくずの右に小見出し（コンセプト） */
.page-head--split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.page-label {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 2;
}

.page-label::before {
  content: "";
  width: 12px;
  border-top: 1px solid var(--c-gray);
}

/* 20px見出し＋下に小さな英字 */
.lead-title {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .1em;
}

.lead-title small {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 2;
  letter-spacing: .08em;
  color: var(--c-sub);
}

/* 小さな英字の下に見出し（会社案内） */
.small-title {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 24px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .08em;
}

.small-title span {
  font-size: 14px;
  letter-spacing: .05em;
  color: var(--c-sub);
}

.small-title--sm {
  font-size: 20px;
  line-height: 1.9;
  letter-spacing: .1em;
}

/* 下線つきの18px見出し */
.bar-title {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-gray);
  font-size: 18px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .08em;
}

/* 枠線のタグ（今秋完成予定など） */
.tag {
  display: inline-block;
  padding: 0 10px;
  border: 1px solid var(--c-gray);
  color: var(--c-sub);
  line-height: 2;
}

.tag--fill {
  padding: 3px 10px;
  border: 0;
  border-radius: 0 0 3px 0;
  background: var(--c-gray);
  color: #fff;
  font-family: var(--ff-gothic);
  font-size: 13px;
  line-height: normal;
}

/* 項目｜値 のリスト（オフィス情報・モデルハウス情報） */
.info-list div {
  display: flex;
  align-items: center;
  gap: 15px;
}

.info-list dt {
  flex: none;
  width: 71px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--c-sub);
}

.info-list dt::after {
  content: "";
  width: 1px;
  height: 10px;
  background: var(--c-gray);
}

.info-list a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 角丸の枠（オフィス情報・モデルハウス情報） */
.info-box {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px 25px 25px;
  border: 1px solid var(--c-gray);
  border-radius: 10px;
}

.info-box__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--c-gray);
}

.info-box__head h2 {
  font-size: 18px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .08em;
}

/* 項目｜値 の罫線表（会社概要・物件概要） */
.spec-table {
  border-top: 1px solid var(--c-gray);
}

.spec-table div {
  display: flex;
  align-items: center;
  gap: 80px;
  padding: 25px 10px;
  border-bottom: 1px solid var(--c-gray);
}

.spec-table dt {
  flex: none;
  width: 120px;
  color: var(--c-sub);
}

.spec-table dd {
  flex: 1;
  min-width: 0;
}

.spec-table a {
  text-decoration: none;
}

/* 写真スライダーのドット */
.slider-dots {
  display: flex;
  gap: 12px;
}

.slider-dots button {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-gray40);
}

.slider-dots button[aria-current="true"] {
  background: var(--c-sub);
}

/* 右端に縦書きで流れるラベル（PCのみ） */
.side-label {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 40px;
  pointer-events: none;
}

.side-label__inner {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 150px 0;
}

.side-label p {
  writing-mode: vertical-rl;
  font-size: 11px;
  line-height: 20px;
  letter-spacing: .1em;
}

.side-label__en {
  padding-left: 10px;
}

/* 全幅の区切り写真 */
.photo-break {
  aspect-ratio: 1440 / 600;
  overflow: hidden;
}

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

/* お電話でのお問い合わせ */
.tel-box {
  margin-top: 62px;
  display: flex;
  align-items: center;
  gap: 80px;
  padding: 40px 0;
  border-top: 1px solid var(--c-gray);
  border-bottom: 1px solid var(--c-gray);
}

.tel-box__title {
  flex: none;
  width: 300px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .1em;
}

.tel-box__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 30px;
}

.tel-box__num {
  font-size: 18px;
  letter-spacing: .08em;
}

.tel-box__hours {
  color: var(--c-sub);
  white-space: pre;
}

.page-wrap+.form-section {
  margin-top: 80px;
}

/* フォーム：ページ末尾に置くとき・ラジオボタン */
.form-section--end {
  margin-bottom: 160px;
}

.form-section--request {
  margin-top: 140px;
}

.form__note--plain {
  color: var(--c-text);
  line-height: 1.8;
}

.form__note--plain a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form__choices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px 0;
}

.form__choice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.form__choice input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--c-gray);
  border-radius: 50%;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.form__choice input:checked {
  background: radial-gradient(circle, var(--c-sub) 0 4px, transparent 4.5px);
}

.form__choice input:focus-visible {
  outline: 1px solid var(--c-sub);
  outline-offset: 2px;
}

/* LINE公式アカウントの案内（不動産一覧・LINE） */
.line-box {
  width: min(960px, 100% - 80px);
  min-height: 240px;
  margin: 200px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 40px 90px 40px 80px;
  border: 1px solid var(--c-gray);
  border-radius: 10px;
}

.line-box__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.line-box__title {
  font-size: 18px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .08em;
}

.line-box__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 34px;
}

.line-box__actions a:hover {
  opacity: .8;
}

.line-box__qr {
  width: 100px;
}

.page-back {
  display: flex;
  justify-content: center;
  padding: 60px 0 200px;
}

@media (max-width: 1100px) {
  .side-label {
    display: none;
  }
}

@media (max-width: 767px) {

  .page-intro,
  .page-intro--narrow,
  .page-intro--form {
    width: calc(100% - 40px);
    margin-top: 53px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .page-intro .page-title {
    margin-left: 0;
  }

  .page-intro--form .page-intro__lead {
    padding-top: 0;
  }

  .page-wrap {
    width: calc(100% - 40px);
  }

  .page-wrap>.page-title {
    margin: 53px 0 0;
  }

  .page-head--split {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .spec-table div {
    gap: 20px;
    padding: 20px 5px;
  }

  .spec-table dt {
    width: 90px;
  }

  .photo-break {
    aspect-ratio: 390 / 240;
  }

  .tel-box {
    margin-top: 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 30px 0;
  }

  .tel-box__title {
    width: auto;
    font-size: 18px;
  }

  .tel-box__hours {
    font-size: 13px;
    white-space: normal;
  }

  .page-wrap+.form-section {
    margin-top: 60px;
  }

  .form-section--end {
    margin-bottom: 100px;
  }

  .form-section--request {
    margin-top: 80px;
  }

  .form__choices {
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
  }

  .line-box {
    width: calc(100% - 40px);
    margin-top: 100px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 30px 20px;
  }

  .line-box__actions {
    align-self: center;
  }

  .page-back {
    padding: 40px 0 100px;
  }
}

/* =========================================================
   コンセプト
   ========================================================= */
.concept-lead__inner {
  margin-top: 88px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: flex-start;
  gap: 29px;
}

.concept-lead__title {
  writing-mode: vertical-rl;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .1em;
}

/* 縦書きの本文：右の列から左へ読む。段落の間は1列あける */
.concept-lead__text {
  margin-top: 38px;
  display: flex;
  flex-direction: row-reverse;
  gap: 32px;
}

.concept-lead__text>div {
  writing-mode: vertical-rl;
}

.concept-lead__text p {
  font-size: 14px;
  line-height: 32px;
  letter-spacing: .08em;
}

.concept-lead__text p+p {
  margin-block-start: 32px;
}

.concept-lead__photo {
  width: min(1040px, 100% - 80px);
  margin: 130px auto 0;
  aspect-ratio: 1040 / 443;
  overflow: hidden;
}

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

/* 暮らしを聞くことから始まる：写真と文章を散らしたレイアウト（1440基準で等比） */
.concept-process {
  position: relative;
  height: calc(1840 * var(--u));
  margin-top: calc(177 * var(--u));
}

.concept-process> :not(.side-label) {
  position: absolute;
}

.concept-process__title {
  left: calc(130 * var(--u));
  top: calc(150 * var(--u));
}

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

.concept-process__img--a {
  right: calc(130 * var(--u));
  top: calc(70 * var(--u));
  width: calc(300 * var(--u));
  aspect-ratio: 300 / 450;
}

.concept-process__img--b {
  left: 0;
  top: calc(390 * var(--u));
  width: calc(540 * var(--u));
  aspect-ratio: 540 / 405;
}

.concept-process__img--c {
  right: calc(180 * var(--u));
  top: calc(1230 * var(--u));
  width: calc(440 * var(--u));
  aspect-ratio: 1;
}

.concept-process__text p+p {
  margin-top: 2em;
}

.concept-process__text--a {
  left: calc(720 * var(--u));
  right: calc(70 * var(--u));
  top: calc(670 * var(--u));
}

.concept-process__text--b {
  left: calc(220 * var(--u));
  top: calc(1090 * var(--u));
}

/* 派手さではなく、深く残る美しさを設計する */
.concept-points {
  padding: 70px 0 200px;
}

.concept-points__title {
  margin-left: calc(130 * var(--u));
}

.concept-points__list {
  margin-top: 80px;
  display: flex;
  gap: 2px;
}

.concept-point {
  position: relative;
  flex: 0 0 440px;
  height: 550px;
  padding: 71px 53px 0;
  color: #fff;
  overflow: hidden;
}

.concept-point img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.concept-point {
  isolation: isolate;
}

.concept-point--shade::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, .2);
}

.concept-point__num {
  font-size: 12px;
  letter-spacing: .08em;
}

.concept-point__title {
  margin-top: 6px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .1em;
}

.concept-point__text {
  width: 300px;
  margin-top: 162px;
  font-size: 13px;
  line-height: 1.9;
}

/* 暮らしの想いをかたちにした住まいの事例 */
.concept-case {
  position: relative;
  padding: 150px 0 170px;
}

.concept-case__title {
  margin-left: calc(130 * var(--u));
}

.concept-case__body {
  width: min(1000px, 100% - 80px);
  margin: 60px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 120px;
}

.concept-case__main {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.concept-case__main img,
.concept-case__work img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.concept-case__story {
  width: min(800px, 100%);
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.concept-case__story div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.concept-case__story dt {
  font-size: 15px;
  letter-spacing: .08em;
  color: var(--c-sub);
  white-space: nowrap;
}

.concept-case__story dd {
  width: 560px;
}

.concept-case__work {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 120px;
}

.concept-case__work figure {
  flex: none;
  width: 400px;
  aspect-ratio: 400 / 500;
}

.concept-case__work-body {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 30px;
}

.concept-case__work-body h3 {
  align-self: stretch;
  font-size: 18px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .08em;
}

/* よくあるご質問 */
.faq {
  display: grid;
  grid-template-columns: calc(390 * var(--u)) minmax(0, 880px);
  padding: 30px 0 160px calc(70 * var(--u));
}

.faq__sticky {
  position: sticky;
  top: 0;
  padding-top: 140px;
  display: flex;
  flex-direction: column;
  gap: 275px;
}

.faq__nav li+li {
  margin-top: 10px;
}

.faq__nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.9;
  letter-spacing: .1em;
}

.faq__nav a::before {
  content: "";
  width: 12px;
  border-top: 1px solid transparent;
}

.faq__nav a.is-current::before {
  border-top-color: var(--c-gray);
}

.faq__nav a:hover {
  opacity: .7;
}

.faq__body {
  padding-top: 170px;
  display: flex;
  flex-direction: column;
  gap: 70px;
}

.faq__group {
  scroll-margin-top: 80px;
}

.faq__group-title {
  padding-bottom: 15px;
  border-bottom: 1px solid var(--c-gray);
  font-size: 18px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .08em;
}

.faq__item {
  border-bottom: 1px solid var(--c-gray);
}

.faq__item summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 30px 20px 30px 0;
  font-size: 15px;
  letter-spacing: .08em;
  list-style: none;
  cursor: pointer;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1px solid var(--c-gray);
  border-bottom: 1px solid var(--c-gray);
  transform: translateY(-3px) rotate(45deg);
  transition: transform .3s var(--ease);
}

.faq__item[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.faq__q {
  flex: none;
  width: 20px;
  color: var(--c-sub);
}

.faq__a {
  margin-top: -18px;
  padding: 0 20px 30px 26px;
}

.faq__a p+*,
.faq__a ol+p {
  margin-top: 0;
}

@media (max-width: 1100px) {
  .concept-process {
    height: auto;
    margin-top: 120px;
    padding: 0 40px 120px;
    display: flex;
    flex-direction: column;
    gap: 50px;
  }

  .concept-process> :not(.side-label) {
    position: static;
  }

  .concept-process__img--a {
    align-self: flex-end;
    width: 50%;
  }

  .concept-process__img--b {
    width: 80%;
    margin-left: -40px;
  }

  .concept-process__img--c {
    align-self: flex-end;
    width: 60%;
  }

  .concept-case__work {
    gap: 50px;
  }

  .concept-case__work figure {
    width: 40%;
  }

  .faq {
    grid-template-columns: 1fr;
    padding: 0 40px 120px;
  }

  .faq__sticky {
    position: static;
    padding-top: 100px;
    gap: 30px;
  }

  .faq__body {
    padding-top: 50px;
  }
}

@media (max-width: 767px) {
  .concept-lead__inner {
    margin-top: 70px;
    padding-right: 30px;
    justify-content: flex-start;
    gap: 20px;
  }

  .concept-lead__text {
    flex-direction: column;
    align-items: flex-end;
    gap: 60px;
    margin-top: 60px;
  }

  .concept-lead__text p {
    font-size: 14px;
    line-height: 30px;
  }

  .concept-lead__text p+p {
    margin-block-start: 30px;
  }

  .concept-lead__photo {
    width: 100%;
    margin-top: 80px;
    aspect-ratio: 390 / 240;
  }

  .concept-process {
    margin-top: 100px;
    padding: 0 20px 100px;
    gap: 40px;
  }

  .concept-process__img--b {
    margin-left: -20px;
  }

  .concept-points {
    padding: 0 0 100px;
  }

  .concept-points__title {
    margin-left: 30px;
  }

  .concept-points__list {
    margin-top: 50px;
    padding-left: 30px;
    scroll-padding-left: 30px;
  }

  .concept-point {
    flex-basis: 330px;
    height: 412px;
    padding: 50px 30px 0 38px;
  }

  .concept-point__text {
    width: auto;
    margin-top: 80px;
  }

  .concept-case {
    padding: 100px 0;
  }

  .concept-case__title {
    margin: 0 30px;
  }

  .concept-case__body {
    width: calc(100% - 40px);
    margin-top: 40px;
    gap: 60px;
  }

  .concept-case__story {
    gap: 30px;
  }

  .concept-case__story div {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .concept-case__story dd {
    width: auto;
  }

  .concept-case__work {
    flex-direction: column;
    gap: 30px;
  }

  .concept-case__work figure {
    width: 100%;
    aspect-ratio: 350 / 437;
  }

  .faq {
    padding: 0 20px 100px;
  }

  .faq__sticky {
    padding-top: 80px;
  }

  .faq__body {
    padding-top: 40px;
    gap: 50px;
  }

  .faq__item summary {
    align-items: flex-start;
    padding: 20px 5px 20px 0;
    font-size: 14px;
  }

  .faq__item summary::after {
    margin-top: 10px;
  }

  .faq__a {
    margin-top: -8px;
    padding: 0 0 20px 26px;
  }
}

/* =========================================================
   家づくりの流れ
   ========================================================= */
.step-nav {
  width: min(1220px, 100% - 80px);
  margin: 110px auto 0;
}

.step-nav ul {
  display: flex;
  justify-content: space-between;
  border-left: 1px solid var(--c-gray);
}

.step-nav li {
  flex: 1;
  display: flex;
  justify-content: center;
  border-right: 1px solid var(--c-gray);
}

.step-nav a {
  width: min(320px, 100% - 40px);
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding-right: 70px;
}

.step-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 48px;
  height: 24px;
  margin-top: -12px;
  background: url("../img/arrow.svg") no-repeat center / contain;
  transition: transform .4s var(--ease);
}

.step-nav a:hover::after {
  transform: translateX(6px);
}

.step-nav__num {
  color: var(--c-gray);
}

.step-nav__title {
  font-size: 16px;
}

.flow {
  width: min(1220px, 100% - 80px);
  margin: 140px auto 0;
  display: flex;
  flex-direction: column;
  gap: 120px;
}

.flow-step {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  scroll-margin-top: 80px;
}

.flow-step__body {
  width: 600px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.flow-step__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 30px;
  font-size: 24px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .08em;
}

.flow-step__badge {
  padding: 2px 12px;
  border: 1px solid var(--c-gray);
  border-radius: 3px;
  font-size: 14px;
  letter-spacing: .05em;
}

.flow-step__img {
  flex: none;
  width: 450px;
  aspect-ratio: 450 / 563;
  overflow: hidden;
}

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

.flow-step:nth-child(2) .flow-step__img img {
  object-position: 73% 94%;
}

/* 縦線でつないだ手順 */
.timeline__title {
  position: relative;
  padding-left: 31px;
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .05em;
}

.timeline__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--c-charcoal);
}

.timeline__title small {
  font-size: 14px;
}

.timeline__body {
  margin-left: 3px;
  padding: 10px 0 35px 28px;
  border-left: 1px solid var(--c-gray);
}

.timeline li:last-child .timeline__body {
  border-left-color: transparent;
}

.timeline a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.flow+.know {
  margin-top: 160px;
}

@media (max-width: 1100px) and (min-width: 768px) {
  .step-nav a {
    padding-right: 60px;
  }

  .flow-step__body {
    width: auto;
    flex: 1;
  }

  .flow-step__img {
    width: 36%;
  }
}

@media (max-width: 767px) {
  .step-nav {
    width: calc(100% - 40px);
    margin-top: 50px;
  }

  .step-nav ul {
    flex-direction: column;
    border-left: 0;
  }

  .step-nav li {
    border-right: 0;
    border-bottom: 1px solid var(--c-gray);
  }

  .step-nav a {
    width: 100%;
    min-height: 0;
    padding: 12px 60px 12px 0;
  }

  .flow {
    width: calc(100% - 40px);
    margin-top: 60px;
    gap: 80px;
  }

  .flow-step {
    flex-direction: column-reverse;
    gap: 30px;
  }

  .flow-step__body {
    width: auto;
    gap: 30px;
  }

  .flow-step__title {
    flex-direction: column;
    align-items: flex-start;
    font-size: 20px;
  }

  .flow-step__img {
    width: 100%;
    aspect-ratio: 350 / 262;
  }

  .flow+.know {
    margin-top: 100px;
  }
}

/* =========================================================
   アフターサポート
   ========================================================= */
.support-sec {
  width: min(1140px, 100% - 80px);
  margin: 120px auto 0;
}

.support-sec+.support-sec {
  margin-top: 160px;
}

.support-sec__title {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--c-gray);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .1em;
}

.support-check {
  margin-top: 90px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.support-check figure {
  flex: none;
  width: 480px;
  aspect-ratio: 3 / 2;
}

.support-check img,
.warranty img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.support-check p {
  width: 560px;
}

.support-schedule__title {
  margin-top: 110px;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .08em;
}

.support-schedule {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.support-schedule li {
  min-height: 250px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px;
  border-radius: 5px;
  background: rgba(221, 218, 215, .5);
}

.support-schedule h4 {
  background: rgba(255, 255, 255, .1);
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
}

.support-schedule p {
  font-size: 13px;
  line-height: 1.8;
}

.warranty {
  margin-top: 90px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 80px 30px;
}

.warranty li {
  display: flex;
  flex-direction: column;
}

.warranty figure {
  aspect-ratio: 360 / 225;
}

.warranty h3 {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .08em;
}

.warranty h3 small {
  font-size: 16px;
  letter-spacing: .05em;
}

.warranty p {
  margin-top: 7px;
}

.support-sec:last-of-type {
  margin-bottom: 200px;
}

@media (max-width: 1100px) and (min-width: 768px) {
  .support-check figure {
    width: 42%;
  }

  .support-check p {
    width: auto;
    flex: 1;
  }

  .support-schedule {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .warranty {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .support-sec {
    width: calc(100% - 40px);
    margin-top: 80px;
  }

  .support-sec+.support-sec {
    margin-top: 100px;
  }

  .support-sec__title {
    font-size: 18px;
    padding-bottom: 12px;
  }

  .support-check {
    margin-top: 30px;
    flex-direction: column;
    gap: 20px;
  }

  .support-check figure {
    width: 100%;
  }

  .support-check p {
    width: auto;
  }

  .support-schedule__title {
    margin-top: 60px;
    font-size: 16px;
  }

  .support-schedule {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .support-schedule li {
    min-height: 0;
    padding: 20px;
  }

  .warranty {
    margin-top: 30px;
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .warranty h3 {
    margin-top: 15px;
    font-size: 16px;
  }

  .support-sec:last-of-type {
    margin-bottom: 100px;
  }
}

/* =========================================================
   会社案内
   ========================================================= */
.company-page {
  display: grid;
  grid-template-columns: calc(250 * var(--u)) minmax(0, 870px);
  margin: 0 0 0 calc(110 * var(--u));
  padding-top: 118px;
}

.company-page__side .page-title {
  position: sticky;
  top: 100px;
  margin: 0;
}

.company-page__body {
  display: flex;
  flex-direction: column;
  gap: 180px;
  padding-top: 160px;
}

.company-message {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.company-message__text {
  width: 500px;
  display: flex;
  flex-direction: column;
  gap: 2em;
}

.company-message__text h2 {
  margin-bottom: calc(50px - 2em);
}

.company-message__ceo {
  flex: none;
  width: 280px;
}

.company-message__ceo img {
  width: 100%;
  aspect-ratio: 280 / 350;
  object-fit: cover;
  object-position: 50% 100%;
}

.company-message__ceo figcaption {
  margin-top: 15px;
  line-height: 1.71;
}

.company-message__ceo span {
  display: block;
  font-size: 16px;
}

.company-profile .spec-table {
  margin-top: 50px;
}

@media (max-width: 1100px) and (min-width: 768px) {
  .company-page {
    grid-template-columns: 1fr;
    margin: 0 40px;
  }

  .company-page__side .page-title {
    position: static;
  }

  .company-page__body {
    padding-top: 60px;
  }

  .company-message__text {
    width: auto;
    flex: 1;
  }

  .company-message__ceo {
    width: 32%;
  }
}

@media (max-width: 767px) {
  .company-page {
    display: block;
    margin: 0 20px;
    padding-top: 53px;
  }

  .company-page__side .page-title {
    position: static;
    margin-left: 0;
  }

  .company-page__body {
    gap: 80px;
    padding-top: 50px;
  }

  .company-message {
    flex-direction: column-reverse;
    gap: 40px;
  }

  .company-message__text {
    width: auto;
  }

  .company-message__ceo {
    width: 62%;
  }

  .small-title {
    font-size: 20px;
  }

  .company-profile .spec-table {
    margin-top: 30px;
  }
}

/* =========================================================
   オフィス
   ========================================================= */
.office-top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding-left: calc(110 * var(--u));
}

.office-top__info {
  flex: none;
  width: 360px;
}

.office-top__info .page-title {
  margin: 68px 0 0;
}

.office-top__catch {
  margin-top: 32px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .08em;
}

.office-top__info>p {
  margin-top: 20px;
}

.office-top__info .info-list {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--c-gray);
}

.office-top__slider {
  width: calc(840 * var(--u));
  margin-top: 78px;
}

.office-slider {
  display: flex;
  gap: 10px;
}

.office-slider li {
  flex: 0 0 calc(720 * var(--u));
  aspect-ratio: 3 / 2;
}

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

.office-top__slider .slider-dots {
  margin-top: 22px;
}

.office-map {
  display: block;
  height: 360px;
  margin-top: 160px;
}

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

.office-kids {
  width: min(800px, 100% - 80px);
  margin: 150px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.office-kids figure {
  flex: none;
  width: 300px;
  aspect-ratio: 3 / 2;
}

.office-kids img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 83%;
}

.office-kids>div {
  width: 460px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.office-kids h2 {
  font-size: 18px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .08em;
}

.office-kids+.concept-banner {
  padding-top: 130px;
}

@media (max-width: 1100px) and (min-width: 768px) {
  .office-top {
    padding-left: 40px;
  }

  .office-top__info {
    width: 300px;
  }

  .office-top__slider {
    flex: 1;
    min-width: 0;
  }

  .office-slider li {
    flex-basis: 85%;
  }
}

@media (max-width: 767px) {
  .office-top {
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  .office-top__info {
    width: auto;
    padding: 0 20px;
  }

  .office-top__info .page-title {
    margin: 53px 0 0;
  }

  .office-top__slider {
    width: 100%;
    margin-top: 50px;
    padding-left: 20px;
  }

  .office-slider li {
    flex-basis: 320px;
  }

  .office-top__slider .slider-dots {
    margin-top: 15px;
  }

  .office-map {
    height: 240px;
    margin-top: 80px;
  }

  .office-kids {
    width: calc(100% - 40px);
    margin-top: 80px;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .office-kids figure {
    width: 100%;
  }

  .office-kids>div {
    width: auto;
  }

  .office-kids+.concept-banner {
    padding-top: 80px;
  }
}

/* =========================================================
   モデルハウス
   ========================================================= */
.mh-hero {
  position: relative;
  height: calc(700 * var(--u));
  min-height: 560px;
}

.mh-hero__img {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(1120 * var(--u));
  height: 100%;
}

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

.mh-hero .page-head {
  position: relative;
  width: max-content;
}

.mh-hero__title {
  position: absolute;
  left: calc(110 * var(--u));
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.mh-hero__title .page-title__en {
  color: var(--c-sub);
}

.mh-hero__title h1 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 24px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: .08em;
}

.mh-hero__title h1 span {
  font-size: 14px;
  letter-spacing: .05em;
}

.mh-hero__title .tag {
  margin-top: 5px;
}

.mh-row {
  position: relative;
  margin-top: calc(240 * var(--u));
  isolation: isolate;
}

.mh-row__img {
  overflow: hidden;
}

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

.mh-row--1 .mh-row__img {
  width: calc(900 * var(--u));
  aspect-ratio: 900 / 540;
}

.mh-row--1 .mh-text {
  position: absolute;
  left: calc(1010 * var(--u));
  top: calc(370 * var(--u));
}

.mh-row--2 .mh-row__img {
  width: calc(900 * var(--u));
  aspect-ratio: 900 / 540;
  margin-left: auto;
}

.mh-row--2 .mh-text {
  position: absolute;
  left: calc(110 * var(--u));
  top: calc(374 * var(--u));
}

.mh-row--info {
  display: flex;
  align-items: center;
  gap: calc(70 * var(--u));
  padding-left: calc(150 * var(--u));
}

.mh-row--info .mh-row__img {
  flex: none;
  width: calc(640 * var(--u));
  aspect-ratio: 640 / 420;
}

.mh-row--info .info-box {
  width: 430px;
}

.mh-text {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mh-text__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .08em;
}

.mh-text__title::before {
  content: "";
  width: 30px;
  border-top: 1px solid var(--c-gray);
}

/* 水面のテクスチャ（装飾） */
.mh-water {
  position: absolute;
  left: 0;
  z-index: -1;
  object-fit: cover;
  opacity: .18;
  mix-blend-mode: darken;
  pointer-events: none;
}

.mh-water--1 {
  top: calc(-490 * var(--u));
  width: calc(1080 * var(--u));
  height: calc(560 * var(--u));
}

.mh-water--2 {
  top: calc(280 * var(--u));
  width: calc(720 * var(--u));
  height: calc(560 * var(--u));
}

.mh-row--info+.concept-banner {
  padding-top: 160px;
}

@media (max-width: 1100px) and (min-width: 768px) {

  .mh-row--1 .mh-text,
  .mh-row--2 .mh-text {
    position: static;
    margin: 40px 40px 0;
  }

  .mh-row--2 .mh-text {
    margin-left: auto;
    margin-right: 40px;
  }

  .mh-row--1 .mh-text {
    margin-left: auto;
  }

  .mh-row--info .info-box {
    width: auto;
    flex: 1;
    margin-right: 40px;
  }
}

@media (max-width: 767px) {
  .mh-hero {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .mh-hero__img {
    position: static;
    order: -1;
    width: 100%;
    height: auto;
    aspect-ratio: 390 / 280;
    margin-top: 60px;
  }

  .mh-hero .page-head {
    padding-top: 17px;
  }

  .mh-hero__title {
    position: static;
    margin: 50px 20px 0;
  }

  .mh-row {
    margin-top: 80px;
  }

  .mh-row--1 .mh-row__img,
  .mh-row--2 .mh-row__img {
    width: calc(100% - 20px);
  }

  .mh-row--1 .mh-text,
  .mh-row--2 .mh-text {
    position: static;
    width: auto;
    margin: 30px 20px 0;
  }

  .mh-row--info {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
    padding: 0 20px;
  }

  .mh-row--info .mh-row__img {
    width: 100%;
  }

  .mh-row--info .info-box {
    width: auto;
    padding: 15px 20px 20px;
  }

  .mh-row--info .info-list div {
    align-items: flex-start;
  }

  .mh-water {
    display: none;
  }

  .mh-row--info+.concept-banner {
    padding-top: 100px;
  }
}

/* =========================================================
   京都の不動産情報
   ========================================================= */
.land-index {
  width: min(1140px, 100% - 80px);
  margin: 62px auto 0;
  row-gap: 80px;
}

.land-index__pagination {
  margin-top: 80px;
}

.line-box+.know {
  margin-top: 140px;
}

.land-detail-head {
  margin-top: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-inline: 20px;
  text-align: center;
}

.land-detail-head h1 {
  font-size: 24px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .08em;
}

.land-detail {
  width: min(800px, 100% - 80px);
  margin: 27px auto 0;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.land-detail__main {
  aspect-ratio: 4 / 3;
}

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

.land-detail__summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 30px 0;
  text-align: center;
}

.land-detail__summary div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-height: 70px;
  border-left: 1px solid var(--c-gray);
}

.land-detail__summary div:last-child {
  border-right: 1px solid var(--c-gray);
}

.land-detail__summary dd {
  font-size: 13px;
  line-height: 1.4;
}

.land-detail .bar-title {
  margin-bottom: 20px;
}

.spec-table--land {
  border-top: 0;
}

.spec-table--land div {
  gap: 10px;
  min-height: 60px;
  padding: 14px 0;
}

.spec-table--land div:last-child {
  border-bottom: 0;
}

.spec-table--land dt {
  width: 180px;
}

.land-detail a[href^="tel"] {
  text-decoration: none;
}

.land-detail+.form-section {
  margin-top: 150px;
}

/* 現地写真のスライダー */
.photo-slider {
  display: grid;
  grid-template-columns: 8px minmax(0, 720px) 8px;
  justify-content: center;
  align-items: center;
  gap: 10px 25px;
}

.photo-slider__track {
  display: flex;
}

.photo-slider__track li {
  flex: 0 0 100%;
  aspect-ratio: 3 / 2;
}

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

.photo-slider__prev,
.photo-slider__next {
  width: 16px;
  height: 16px;
  margin-left: -4px;
}

.photo-slider__prev::before,
.photo-slider__next::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-left: 1px solid var(--c-text);
  border-bottom: 1px solid var(--c-text);
  transform: rotate(45deg);
}

.photo-slider__next::before {
  transform: rotate(-135deg);
}

.photo-slider .slider-dots {
  grid-column: 2;
  justify-content: center;
  margin-top: 10px;
}

@media (max-width: 767px) {
  .land-index {
    width: calc(100% - 40px);
    margin-top: 42px;
    row-gap: 60px;
  }

  .land-index__pagination {
    margin-top: 50px;
  }

  .line-box+.know {
    margin-top: 80px;
  }

  .land-detail-head {
    margin-top: 53px;
  }

  .land-detail-head h1 {
    font-size: 20px;
  }

  .land-detail {
    width: calc(100% - 40px);
    gap: 40px;
  }

  .land-detail__summary {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 20px;
    padding: 0;
  }

  .land-detail__summary div:nth-child(2) {
    border-right: 1px solid var(--c-gray);
  }

  .spec-table--land dt {
    width: 110px;
  }

  .photo-slider {
    grid-template-columns: 8px minmax(0, 1fr) 8px;
    gap: 10px 12px;
  }

  .land-detail+.form-section {
    margin-top: 80px;
  }
}

/* =========================================================
   来場予約
   ========================================================= */
.reserve-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.reserve-head__inner {
  width: min(450px, 100% - 40px);
  margin-left: calc(140 * var(--u) + 40px);
}

.reserve-head .page-head {
  padding-bottom: 0;
}

.reserve-head .page-title {
  margin: 68px 0 0;
}

.reserve-head__inner>p {
  margin-top: 32px;
}

.reserve-head__inner .info-box {
  margin-top: 68px;
}

.reserve-head__img {
  aspect-ratio: 720 / 750;
  overflow: hidden;
}

.reserve-head__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 25% 50%;
}

.reserve-note {
  margin-top: 190px;
  text-align: center;
  font-size: 16px;
}

.reserve-note+.page-wrap .tel-box {
  margin-top: 80px;
}

@media (max-width: 1100px) and (min-width: 768px) {
  .reserve-head__inner {
    margin-left: 40px;
    width: calc(100% - 80px);
  }
}

@media (max-width: 767px) {
  .reserve-head {
    grid-template-columns: 1fr;
  }

  .reserve-head__img {
    order: -1;
    margin-top: 60px;
    aspect-ratio: 390 / 300;
  }

  .reserve-head .page-head {
    padding-top: 17px;
  }

  .reserve-head__inner {
    width: auto;
    margin: 0 20px;
  }

  .reserve-head .page-title {
    margin: 53px 0 0;
  }

  .reserve-head__inner>p {
    margin-top: 20px;
  }

  .reserve-head__inner .info-box {
    margin-top: 40px;
    padding: 15px 20px 20px;
  }

  .reserve-head__inner .info-list div {
    align-items: flex-start;
  }

  .reserve-note {
    margin-top: 100px;
    padding-inline: 20px;
    font-size: 15px;
  }

  .reserve-note+.page-wrap .tel-box {
    margin-top: 40px;
  }
}

/* =========================================================
   LINE公式アカウント
   ========================================================= */
.line-points {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  margin-top: 132px;
  padding-left: calc(150 * var(--u));
}

.line-points__list {
  width: 560px;
  display: flex;
  flex-direction: column;
  gap: 70px;
}

.line-points__list h2 {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 18px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .08em;
}

.line-points__list h2 span {
  padding-right: 15px;
  border-right: 1px solid var(--c-gray);
  font-size: 16px;
  line-height: 20px;
  letter-spacing: .05em;
  color: var(--c-sub);
}

.line-points__list p {
  margin-top: 20px;
}

.line-points__img {
  flex: none;
  width: calc(540 * var(--u));
  aspect-ratio: 540 / 675;
}

.line-points__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 17% 50%;
}

.line-points+.line-box {
  margin: 135px auto 220px;
}

@media (max-width: 1100px) and (min-width: 768px) {
  .line-points {
    padding-left: 40px;
  }

  .line-points__list {
    width: auto;
    flex: 1;
  }
}

@media (max-width: 767px) {
  .line-points {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 50px;
    margin-top: 60px;
    padding: 0;
  }

  .line-points__img {
    width: calc(100% - 20px);
    margin-left: auto;
    aspect-ratio: 370 / 300;
  }

  .line-points__list {
    width: auto;
    padding: 0 20px;
    gap: 50px;
  }

  .line-points__list h2 {
    font-size: 16px;
  }

  .line-points__list h2 span {
    font-size: 14px;
  }

  .line-points+.line-box {
    margin: 80px auto 100px;
  }
}

/* =========================================================
   プライバシーポリシー
   ========================================================= */
.policy {
  margin: 62px 0 162px;
  display: flex;
  flex-direction: column;
  gap: 120px;
}

.policy__group {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.policy__title {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .1em;
}

.policy__title+p {
  margin-top: -30px;
}

.policy__block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.policy__ol {
  list-style: decimal;
  padding-left: 21px;
}

.policy__ul {
  list-style: disc;
  padding-left: 21px;
}

.policy a {
  text-decoration: none;
}

@media (max-width: 767px) {
  .policy {
    margin: 40px 0 100px;
    gap: 80px;
  }

  .policy__group {
    gap: 30px;
  }

  .policy__title {
    font-size: 18px;
  }

  .policy__title+p {
    margin-top: -20px;
  }

  .policy .bar-title {
    font-size: 16px;
  }
}