@charset "UTF-8";
/*===============================
concept
page-concept.php
================================*/

/* ============================================================
  ① ページヘッダー
============================================================ */
.concept-head {
 padding-top: var(--nav-h);
 display: grid;
 grid-template-columns: 1fr;
 min-height: calc(100svh - var(--nav-h));
}
@media screen and (min-width: 768px) {
 .concept-head {
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
 }
}

.concept-head__text {
 background: var(--dark2);
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
 padding: 52px 20px 56px;
 gap: 0;
}
@media screen and (min-width: 768px) {
 .concept-head__text {
  padding: 72px 48px 72px;
 }
}
@media screen and (min-width: 1200px) {
 .concept-head__text {
  padding: 80px 64px 80px;
 }
}
.concept-head__text .c-kicker {
 color: rgba(200, 168, 112, 0.55);
 margin-bottom: 18px;
}

.concept-head__title {
 font-family: "Shippori Mincho B1", serif;
 /* スマホ: 30px */
 font-size: 30px;
 font-weight: 400;
 line-height: 1.65;
 letter-spacing: 0.08em;
 color: #f0e8d8;
 margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
 .concept-head__title {
  font-size: 36px;
  margin-bottom: 24px;
 }
}
@media screen and (min-width: 1200px) {
 .concept-head__title {
  font-size: 42px;
 }
}
.concept-head__title em {
 font-style: normal;
 color: var(--gold2);
 font-size: 13px;
 letter-spacing: 0.35em;
 display: block;
 margin-bottom: 10px;
 font-family: "Cormorant Garamond", serif;
 font-style: italic;
}
@media screen and (min-width: 768px) {
 .concept-head__title em {
  font-size: 14px;
 }
}

.concept-head__desc {
 /* スマホ: 13px */
 font-size: 13px;
 line-height: 2.3;
 color: rgba(240, 232, 216, 0.45);
 font-weight: 200;
 letter-spacing: 0.12em;
}
@media screen and (min-width: 768px) {
 .concept-head__desc {
  font-size: 14px;
 }
}

.concept-head__visual {
 background: #c8bfa8;
 overflow: hidden;
 min-height: 52vw;
}
@media screen and (min-width: 768px) {
 .concept-head__visual {
  min-height: auto;
 }
}
.concept-head__visual img,
.concept-head__placeholder {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 /* ★プレースホルダー背景 */
 background: #c0b8a4;
}

/* ============================================================
  ② プロセス（4ステップ）
============================================================ */
.concept-process {
 padding: 64px 0 0;
 border-top: 0.5px solid var(--border);
}
@media screen and (min-width: 768px) {
 .concept-process {
  padding: 80px 0 0;
 }
}

.concept-process__head {
 display: flex;
 flex-direction: column;
 gap: 12px;
 margin-bottom: 52px;
}
@media screen and (min-width: 768px) {
 .concept-process__head {
  margin-bottom: 64px;
 }
}

.concept-process__list {
 list-style: none;
 display: flex;
 flex-direction: column;
 gap: 2px;
 background: var(--border);
}

.concept-process__item {
 display: grid;
 grid-template-columns: 1fr;
 background: var(--border);
 gap: 2px;
}
@media screen and (min-width: 768px) {
 .concept-process__item {
  grid-template-columns: 1fr 1fr;
 }
}

/* 偶数アイテム: 左右逆 */
.concept-process__item--rev .concept-process__img {
 order: 0;
}
.concept-process__item--rev .concept-process__text {
 order: 1;
}
@media screen and (min-width: 768px) {
 .concept-process__item--rev .concept-process__img {
  order: 1;
 }
 .concept-process__item--rev .concept-process__text {
  order: 0;
 }
}

.concept-process__img {
 background: #c8bfa8;
 overflow: hidden;
 min-height: 52vw;
}
@media screen and (min-width: 768px) {
 .concept-process__img {
  min-height: 340px;
 }
}
.concept-process__img img,
.concept-process__img-placeholder {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 background: #d0c8b4;
}

.concept-process__text {
 background: var(--cream2);
 padding: 44px 20px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 gap: 12px;
}
@media screen and (min-width: 768px) {
 .concept-process__text {
  padding: 56px 44px;
 }
}
@media screen and (min-width: 1200px) {
 .concept-process__text {
  padding: 64px 56px;
 }
}

.concept-process__num {
 font-family: "Cormorant Garamond", serif;
 font-size: 48px;
 font-weight: 300;
 color: rgb(28 24 16);
 line-height: 1;
 display: block;
}

.concept-process__title {
 font-family: "Shippori Mincho B1", serif;
 /* スマホ: 20px */
 font-size: 20px;
 font-weight: 400;
 letter-spacing: 0.08em;
 line-height: 1.8;
 color: var(--dark);
}
@media screen and (min-width: 768px) {
 .concept-process__title {
  font-size: 22px;
 }
}
@media screen and (min-width: 1200px) {
 .concept-process__title {
  font-size: 24px;
 }
}

/* ============================================================
  ③ 木材セクション
============================================================ */
.concept-wood {
 display: grid;
 padding-top: 10px;
 padding-bottom: 10px;
 grid-template-columns: 1fr;
 border-top: 0.5px solid var(--border);
}
@media screen and (min-width: 768px) {
 .concept-wood {
  grid-template-columns: 1.2fr 1fr;
  min-height: 440px;
 }
}

.concept-wood__visual {
 background: #c8b890;
 position: relative;
 overflow: hidden;
 min-height: 52vw;
}
@media screen and (min-width: 768px) {
 .concept-wood__visual {
  min-height: auto;
 }
}
.concept-wood__visual img,
.concept-wood__placeholder {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 background: #c4b48a;
}
.concept-wood__overlay {
 position: absolute;
 bottom: 24px;
 right: 24px;
}
.concept-wood__overlay-text {
 font-family: "Cormorant Garamond", serif;
 font-size: 11px;
 letter-spacing: 0.3em;
 color: rgba(244, 239, 230, 0.5);
 font-style: italic;
}

.concept-wood__text {
 padding: 52px 20px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 gap: 16px;
}
@media screen and (min-width: 768px) {
 .concept-wood__text {
  padding: 64px 48px;
 }
}
@media screen and (min-width: 1200px) {
 .concept-wood__text {
  padding: 72px 64px;
 }
}

/* ============================================================
  ④ 職人の技（3カラム）
============================================================ */
.concept-craft {
 padding: 64px 0;
 border-top: 0.5px solid var(--border);
 background: var(--cream2);
}
@media screen and (min-width: 768px) {
 .concept-craft {
  padding: 80px 0;
 }
}

.concept-craft__head {
 display: flex;
 flex-direction: column;
 gap: 12px;
 margin-bottom: 44px;
}
@media screen and (min-width: 768px) {
 .concept-craft__head {
  margin-bottom: 52px;
 }
}
.concept-craft__lead {
 max-width: 680px;
}

.concept-craft__grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: 2px;
 background: var(--border);
}
@media screen and (min-width: 600px) {
 .concept-craft__grid {
  grid-template-columns: repeat(2, 1fr);
 }
}
@media screen and (min-width: 1024px) {
 .concept-craft__grid {
  grid-template-columns: repeat(3, 1fr);
 }
}

.concept-craft__item {
 background: var(--cream2);
 padding: 32px 24px;
 display: flex;
 flex-direction: column;
 gap: 14px;
}
@media screen and (min-width: 768px) {
 .concept-craft__item {
  padding: 36px 30px;
 }
}

.concept-craft__item-img {
 aspect-ratio: 4 / 3;
 background: #d0c8b4;
 overflow: hidden;
 margin-bottom: 4px;
}
.concept-craft__item-img img,
.concept-craft__img-placeholder {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 background: #ccc4b0;
}

.concept-craft__item-title {
 font-family: "Shippori Mincho B1", serif;
 /* スマホ: 15px */
 font-size: 15px;
 letter-spacing: 0.1em;
 color: var(--dark);
 font-weight: 400;
}
@media screen and (min-width: 768px) {
 .concept-craft__item-title {
  font-size: 16px;
 }
}

/* ============================================================
  ⑤ 想い（引用）
============================================================ */
.concept-promise {
 display: grid;
 grid-template-columns: 1fr;
 border-top: 0.5px solid var(--border);
}
@media screen and (min-width: 768px) {
 .concept-promise {
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
 }
}

.concept-promise__text {
 background: var(--dark2);
 padding: 56px 20px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 gap: 20px;
}
@media screen and (min-width: 768px) {
 .concept-promise__text {
  padding: 72px 52px;
 }
}
@media screen and (min-width: 1200px) {
 .concept-promise__text {
  padding: 80px 64px;
 }
}
.concept-promise__text .c-kicker {
 color: rgba(200, 168, 112, 0.5);
}

.concept-promise__quote {
 font-family: "Shippori Mincho B1", serif;
 /* スマホ: 22px */
 font-size: 22px;
 font-weight: 400;
 letter-spacing: 0.1em;
 line-height: 2;
 color: #f0e8d8;
 font-style: normal;
 border: none;
 padding: 0;
 margin: 0;
}
@media screen and (min-width: 768px) {
 .concept-promise__quote {
  font-size: 26px;
 }
}
@media screen and (min-width: 1200px) {
 .concept-promise__quote {
  font-size: 28px;
 }
}

.concept-promise__body {
 /* スマホ: 13px */
 font-size: 13px;
 line-height: 2.4;
 color: rgba(240, 232, 216, 0.4);
 font-weight: 200;
 letter-spacing: 0.1em;
}
@media screen and (min-width: 768px) {
 .concept-promise__body {
  font-size: 14px;
 }
}

.concept-promise__visual {
 background: #c8bfa8;
 overflow: hidden;
 min-height: 52vw;
 order: -1;
}
@media screen and (min-width: 768px) {
 .concept-promise__visual {
  order: 1;
  min-height: auto;
 }
}
.concept-promise__visual img,
.concept-promise__placeholder {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 background: #c4bcaa;
}

/* ============================================================
  ⑥ CTA
============================================================ */
.concept-cta {
 padding: 56px 0;
 border-top: 0.5px solid var(--border);
}
@media screen and (min-width: 768px) {
 .concept-cta {
  padding: 72px 0;
 }
}
.concept-cta__inner {
 display: flex;
 flex-direction: column;
 gap: 28px;
}
@media screen and (min-width: 768px) {
 .concept-cta__inner {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
 }
}
.concept-cta__title {
 font-family: "Shippori Mincho B1", serif;
 /* スマホ: 18px */
 font-size: 18px;
 letter-spacing: 0.1em;
 color: var(--dark);
 margin-top: 8px;
 line-height: 1.7;
}
@media screen and (min-width: 768px) {
 .concept-cta__title {
  font-size: 20px;
 }
}
.concept-cta__btns {
 display: flex;
 flex-direction: column;
 gap: 10px;
 flex-shrink: 0;
}
@media screen and (min-width: 768px) {
 .concept-cta__btns {
  flex-direction: row;
  align-items: center;
  gap: 12px;
 }
}

@media screen and (min-width: 768px) {
}

/* ============================================================
  共通クラス（common.css が旧版の場合の補完）
  ※ 新 common.css に c-kicker / c-sec-title / c-body が
     定義済みであれば、このブロックは削除してOK
============================================================ */
.page-concept .c-kicker {
 font-family: "Cormorant Garamond", serif;
 font-size: 12px;
 letter-spacing: 0.55em;
 color: rgba(138, 110, 58, 1);
 font-style: italic;
 margin-bottom: 14px;
 display: block;
}
.page-concept .c-kicker--light {
 color: rgba(200, 168, 112, 1);
}

.page-concept .c-sec-title {
 font-family: "Shippori Mincho B1", serif;
 font-size: 20px;
 font-weight: 400;
 letter-spacing: 0.08em;
 line-height: 1.8;
 color: var(--dark);
}
@media screen and (min-width: 768px) {
 .page-concept .c-sec-title {
  font-size: 22px;
 }
}
@media screen and (min-width: 1200px) {
 .page-concept .c-sec-title {
  font-size: 24px;
 }
}
.page-concept .c-sec-title--light {
 color: #f0e8d8;
}

.page-concept .c-body {
 font-size: 13px;
 line-height: 2.4;
 color: rgb(28 24 16);
 font-weight: 300;
 letter-spacing: 0.1em;
}
@media screen and (min-width: 768px) {
 .page-concept .c-body {
  font-size: 14px;
 }
}

.page-concept .c-link-arrow {
 font-family: "Cormorant Garamond", serif;
 font-size: 12px;
 letter-spacing: 0.4em;
 color: #8a6e3a;
 font-style: italic;
 display: inline-flex;
 align-items: center;
 gap: 14px;
 text-decoration: none;
 transition: gap 0.2s;
}
.page-concept .c-link-arrow:hover {
 gap: 20px;
}
.page-concept .c-link-arrow::after {
 content: "";
 width: 40px;
 height: 0.5px;
 background: #8a6e3a;
}

.page-concept .c-btn-primary {
 display: inline-flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 padding: 15px 28px;
 background: var(--dark);
 color: var(--cream);
 font-family: "Shippori Mincho B1", serif;
 font-size: 13px;
 letter-spacing: 0.12em;
 text-decoration: none;
 border: none;
 cursor: pointer;
 transition: background 0.25s;
}
@media screen and (min-width: 768px) {
 .page-concept .c-btn-primary {
  font-size: 14px;
 }
}
.page-concept .c-btn-primary:hover {
 background: #8a6e3a;
}

.page-concept .c-btn-secondary {
 display: inline-flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 padding: 13px 28px;
 background: transparent;
 color: var(--dark);
 font-family: "Noto Serif JP", serif;
 font-size: 13px;
 letter-spacing: 0.15em;
 text-decoration: none;
 border: 0.5px solid rgba(28, 24, 16, 0.1);
 cursor: pointer;
 transition: all 0.25s;
}
@media screen and (min-width: 768px) {
 .page-concept .c-btn-secondary {
  font-size: 14px;
 }
}
.page-concept .c-btn-secondary:hover {
 border-color: #8a6e3a;
 color: #8a6e3a;
}

/* reveal アニメーション */
.page-concept .reveal {
 opacity: 0;
 transform: translateY(16px);
 transition:
  opacity 0.65s ease,
  transform 0.65s ease;
}
.page-concept .reveal.visible {
 opacity: 1;
 transform: none;
}
/* concept-process 見出し下のリード文 */
.concept-process__head {
 margin-bottom: 28px;
}

.concept-process__lead {
 margin-bottom: 52px;
}

.concept-process__lead .c-body + .c-body {
 margin-top: 18px;
}

@media screen and (min-width: 768px) {
 .concept-process__head {
  margin-bottom: 32px;
 }

 .concept-process__lead {
  margin-bottom: 64px;
 }
}
/* ============================================================
  木材ギャラリー
============================================================ */
.concept-timber-gallery {
 padding: 64px 0;
 background: var(--cream2);
 border-top: 0.5px solid var(--border);
}

.concept-timber-gallery__head {
 margin-bottom: 36px;
}

.concept-timber-gallery__grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 4px;
}

.concept-timber-gallery__item {
 position: relative;
 min-width: 0;
 aspect-ratio: 1 / 1;
 overflow: hidden;
 background: #c8bfa8;
 margin: 0;
}

.concept-timber-gallery__item--main {
 grid-column: 1 / -1;
 aspect-ratio: 16 / 10;
}

.concept-timber-gallery__item:last-child {
 grid-column: 1 / -1;
 aspect-ratio: 16 / 8;
}

.concept-timber-gallery__item img {
 width: 100%;
 height: 100%;
 display: block;
 object-fit: cover;
 transition: transform 0.7s ease;
}

.concept-timber-gallery__item::after {
 content: "";
 position: absolute;
 inset: auto 0 0;
 height: 45%;
 background: linear-gradient(
  to top,
  rgba(20, 17, 12, 0.55),
  rgba(20, 17, 12, 0)
 );
 pointer-events: none;
}

.concept-timber-gallery__item figcaption {
 position: absolute;
 left: 16px;
 bottom: 14px;
 z-index: 1;
 color: #fff;
 font-family: "Shippori Mincho B1", serif;
 font-size: 12px;
 line-height: 1.6;
 letter-spacing: 0.12em;
}

@media (hover: hover) {
 .concept-timber-gallery__item:hover img {
  transform: scale(1.035);
 }
}

@media screen and (min-width: 768px) {
 .concept-timber-gallery {
  padding: 80px 0;
 }

 .concept-timber-gallery__head {
  margin-bottom: 48px;
 }

 .concept-timber-gallery__grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 220px;
 }

 .concept-timber-gallery__item {
  grid-column: span 2;
  aspect-ratio: auto;
 }

 .concept-timber-gallery__item--main {
  grid-column: span 4;
  grid-row: span 2;
  aspect-ratio: auto;
 }

 .concept-timber-gallery__item:nth-child(2),
 .concept-timber-gallery__item:nth-child(3) {
  grid-column: span 2;
 }

 .concept-timber-gallery__item:last-child {
  grid-column: span 2;
  aspect-ratio: auto;
 }

 .concept-timber-gallery__item figcaption {
  left: 20px;
  bottom: 18px;
  font-size: 13px;
 }
}

@media screen and (min-width: 1200px) {
 .concept-timber-gallery__grid {
  grid-auto-rows: 260px;
 }
}