/* =============================================page-header
   top.css — トップページ専用スタイル
   ============================================= */

html, body {
  overflow-x: hidden;
}


/* ===== Hero アニメーション ===== */

@keyframes fade-in-right {
  0% {
    opacity: 0;
    transform: translateX(40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.hero__eyecatch img {
  animation: fade-in-right 2s ease-out forwards;
}

@keyframes fade-in-left {
  0% {
    opacity: 0;
    transform: translateX(-40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.hero__copy {
  animation: fade-in-left 1.5s ease-out 0.5s both;
}

.hero__feature {
  opacity: 0;
  animation: fade-in-left 1.2s ease-out both;
}

.hero__feature:nth-child(1) { animation-delay: 1.2s; }
.hero__feature:nth-child(2) { animation-delay: 1.6s; }
.hero__feature:nth-child(3) { animation-delay: 1.8s; }


/* ===== Hero ===== */

.hero {
  position: relative;
  width: 100%;
  background: var(--color-bg-warm);
  overflow: visible;
}


/* ─── Mobile（375px基準）─── */

/* 背景写真：全幅・高さ200px */
.hero__eyecatch {
  position: relative;
  width: 100%;
  height: 400px;/*200pxより手動変更*/
  overflow: hidden;
}

.hero__eyecatch img {
  width: 100%;
  height: 84%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* 円形ボタン：写真右上 */
.hero__button {
  position: absolute;
  top: 62px;
  right: 10px;
  width: 95px;
  height: 95px;
  z-index: 10;
}

.hero__button a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.hero__button a:hover {
  opacity: 0.85;
}

.hero__button-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero__button-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-text-white);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: 10px;
  line-height: 1.6;
  text-align: center;
  pointer-events: none;
}

/* キャッチコピー：写真下部に重なる */
.hero__copy {
  position: absolute;
  left: 0;
  top: 163px;
  width: 314px;
  padding: 14px 20px 14px 35px;
  background: var(--color-overlay-white);
  box-shadow: 0 4px 4px var(--color-shadow-dark);
  z-index: 5;
}

.hero__copy h1 {
  font-family: var(--font-family-base);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  color: var(--color-text-dark);
  margin: 0;
}

.hero__subcopy {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-caption);
  line-height: 1.6;
  color: var(--color-text);
  margin: 8px 0 0;
}

/* 特徴3バッジ：写真の直下・3列横並び */
.hero__features {
  display: flex;
  justify-content: space-around;
  padding: 0 2px;
  margin-top: 0px; 
  padding-bottom: 20px;
  position:relative;
  top: -20px;
}

.hero__feature {
  width: 105px;
  height: 105px;
  border-radius: 50%;
  background: rgba(100, 130, 200, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
}

.hero__feature p {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-tiny);
  line-height: 1.6;
  color: var(--color-text-white);
  margin: 0;
}


/* ─── Tablet（600px以上）─── */

@media (min-width: 600px) {

  .hero {
    height: 422px;
  }

  /* 写真：全幅・高さ352px */
  .hero__eyecatch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;/*352pxより手動変更*/
  }

  /* 円形ボタン：右上・やや大きめ */
  .hero__button {
    top: 23px;
    right: 5px;
    width: 120px;
    height: 120px;
  }

  .hero__button-text {
    font-size: var(--font-size-tiny);
  }

  /* キャッチコピー：左寄り・写真に重なる */
  .hero__copy {
    top: 60px;
    left: 0;
    width: 430px;
    padding: 18px 20px 18px 35px;
  }

  .hero__copy h1 {
    font-size: var(--font-size-h2);
  }

  .hero__subcopy {
    font-size: var(--font-size-body-sm);
  }

  /* 特徴3バッジ：右寄り・段違い・写真下部に重なる */
  .hero__features {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 502px;
    margin-top: 0;
    padding: 0;
    align-items: flex-end;
    gap: 21px;
    justify-content: flex-end;
    bottom:-60px;
  }

  .hero__feature {
    width: 140px;
    height: 140px;
  }

  .hero__feature p {
    font-size: 12px;
  }

  .hero__feature:nth-child(1) { margin-bottom: 60px; }
  .hero__feature:nth-child(2) { margin-bottom: 38px; }
  .hero__feature:nth-child(3) { margin-bottom: 0; }
}


/* ─── Desktop（1024px以上）─── */

@media (min-width: 1024px) {

  .hero {
    height: 800px;
  }

  /* 写真：右75%・左端を斜めにカット */
  .hero__eyecatch {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    width: 75%;
    height: 100%;

  }

  /* 円形ボタン：右上・最大サイズ */
  .hero__button {
    top: 127px;
    right: 1%;
    width: 200px;
    height: 200px;
  }

  .hero__button-text {
    font-size: var(--font-size-body-sm);
  }

  /* キャッチコピー：左側・縦中央やや下 */
  .hero__copy {
    top: 150px;
    left: 0;
    width: 645px;
    padding: 46px 40px 46px 72px;
  }

  .hero__copy h1 {
    font-size: var(--font-size-h1);
    line-height: 1.7;
  }

  .hero__subcopy {
    font-size: var(--font-size-body-lg);
    line-height: 1.6;
  }

  /* 特徴3バッジ：右下・段違い・写真からはみ出す */
  .hero__features {
    position: absolute;
    bottom: 30px;
    right: 4%;
    width: 736px;
    gap: 30px;
    align-items: flex-end;
  }

  .hero__feature {
    width: 180px;
    height: 180px;
  }

  .hero__feature p {
    font-size: 18px;
  }

  .hero__feature:nth-child(1) { margin-bottom: 90px; }
  .hero__feature:nth-child(2) { margin-bottom: 43px; }
  .hero__feature:nth-child(3) { margin-bottom: 14px; }
}


/* =============================================
   Trouble Section
   ============================================= */

.trouble {
  background: transparent;
  padding: var(--section-padding-v) var(--section-padding-h);
  overflow: hidden;
}

@media (max-width: 599px) {
  .trouble {
    padding-top: 40px;
    padding-bottom: 0;
  }
}


/* ─── 上部：会社紹介 ─── */

.trouble__intro {
  text-align: center;
  margin-bottom: 40px;
  color: var(--color-text-dark);
}

.trouble__intro-prefix {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h4);
  margin-bottom: 4px;
}

.trouble__intro-name-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.trouble__intro-name {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-black);
  font-size: 32px;
  color: var(--color-text-ghost);
  margin: 0;
  line-height: 1.2;
}

.trouble__intro-logo {
  width: 300px;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}

@media (max-width: 599px) {
  .trouble__intro-logo {
    width: 200px;
  }
}

.trouble__intro-suffix {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body-sm);
  margin: 0;
}

.trouble__intro-body {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body-sm);
  line-height: 1.7;
  margin: 0;
}


/* ─── 吹き出しカード共通 ─── */

.trouble__bubble {
  position: relative;
}

@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.trouble__bubble-bg {
  position: relative;
  width: 100%;
  animation: float 4s ease-in-out infinite;
}

.trouble__bubble-bg img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(4px 6px 12px rgba(0, 0, 0, 0.12));
}

.trouble__bubble-bg picture {
  display: block;
}

.trouble__bubble-content {
  position: absolute;
  top: 24%;
  left: 15%;
  right: 10%;
}

.trouble__bubble-content--2{
  top:94px;
  left:60px;
  width:200px;
}
.trouble__bubble-content--3{
  top:115px;
  left:74px;
  width:166px;
}
.trouble__bubble-content--4{
  width:210px;
  top:85px;
  left:54px;
}

.trouble__bubble-title {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-body-sm);
  line-height: 1.6;
  margin-bottom: 6px;
  color: var(--color-text-dark);
}

.trouble__bubble-text {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-caption);
  line-height: 1.7;
  margin: 0;
  color: var(--color-text-dark);
}


/* ─── Mobile（375px）：縦1列・左右交互 ─── */

.trouble__stage {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trouble__man {
  position:relative;
  width: 30%;
  order: 3;
  top:-140px;
  left:40px;
}

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

.trouble__bubble--1 { align-self: flex-start; order: 1;}
.trouble__bubble--2 { align-self: flex-end;   order: 2; top:-80px;left:30px; width:320px;}
.trouble__bubble--3 { align-self: flex-start; order: 4; top:-176px; left:22%; width:315px;}
.trouble__bubble--4 { align-self: flex-end;   order: 5; top:-225px; left:-10px;}

.trouble__bubble--1 .trouble__bubble-bg { transform: rotate(-20deg); }
.trouble__bubble--2 .trouble__bubble-bg { transform: rotate(-20deg); }
.trouble__bubble--3 .trouble__bubble-bg { transform: rotate(18deg); }
.trouble__bubble--4 .trouble__bubble-bg { transform: rotate(-20deg); }


/* ─── Tablet（600px以上）：2×2グリッド・人物中央 ─── */

@media (min-width: 600px) and (max-width: 1023px){

  .trouble {
  padding-left: 16px;
  padding-right: 16px;
}

  .trouble__intro-name   { font-size: 52px; }
  .trouble__intro-prefix { font-size: var(--font-size-h3); }
  .trouble__intro-suffix { font-size: var(--font-size-h4); }
  .trouble__intro-body   { font-size: var(--font-size-body-sm); }

  .trouble__stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    align-items: end;
    width: 100%;
    box-sizing: border-box;
  }

  .trouble__man {
    grid-column: 1 / 3;
    grid-row: 2;
    width: 120px;
    order: 0;
    margin: 0 auto;
    top:0px;
    left:0;
  }

  .trouble__bubble--1 { grid-column: 1; grid-row: 1; justify-self: end; align-self: end; width: 228px;  top:0; left:-15%; }
  .trouble__bubble--2 { grid-column: 2; grid-row: 1; justify-self: start; width: 268px;  top:0; left:0; }
  .trouble__bubble--3 { grid-column: 1; grid-row: 3; justify-self: end; width: 312px; top:0; left:0; }
  .trouble__bubble--4 { grid-column: 2; grid-row: 3; justify-self: start; width: 334px;  top:0; left:-10%; }

  .trouble__bubble--2 .trouble__bubble-bg { transform: rotate(9deg); }
  .trouble__bubble--4 .trouble__bubble-bg { transform: rotate(0deg); }

  .trouble__bubble-content--1 {top: 48px; left: 38px;}
  .trouble__bubble-content--2 {top: 54px; left: 38px;}
  .trouble__bubble-content--3 {top: 120px; left: 54px;}
  .trouble__bubble-content--4 {top: 105px; left: 72px;}

  .trouble__bubble-title { font-size: 16px; }
  .trouble__bubble-text  { font-size: var(--font-size-body-sm); }
}


/* ─── Desktop（1024px以上）：絶対配置・人物中央・カード散らし ─── */

@media (min-width: 1024px) {

  .trouble {
    padding: var(--section-padding-v) 0;
    padding-bottom: 160px;
  }

  .trouble__intro {
    margin-bottom: 90px;
  }

  .trouble__intro-name   { font-size: 80px; }
  .trouble__intro-prefix { font-size: var(--font-size-h3); }
  .trouble__intro-suffix { font-size: var(--font-size-body-lg); }
  .trouble__intro-body   { font-size: var(--font-size-body-lg); }

  .trouble__stage {
    display: block;
    position: relative;
    height: 500px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .trouble__man {
    position: absolute;
    width: 160px;
    left: 50%;
    top: 80%;
    transform: translate(-50%, -50%);
  }

  .trouble__bubble {
    position: absolute;
    width: auto;
  }
 
  /* モバイル・タブレットの left / top をリセット */
  .trouble__bubble--1 { left: auto; }
  .trouble__bubble--2 { left: auto; top: auto; }
  .trouble__bubble--3 { left: auto; top: auto; }
  .trouble__bubble--4 { left: auto; top: auto; }

  /* カード1：左上（利益が安定しない）*/
  .trouble__bubble--1 { left: 264px; top: 0; width: 270px; }
  /* カード2：右上（積算できる人材が足りない）*/
  .trouble__bubble--2 { right: 188px; top: -24px; width: 300px; }
  /* カード3：左下（本来やるべき業務に集中できない）*/
  .trouble__bubble--3 { left: 25px; top: 250px; width: 345px; }
  /* カード4：右下（毎日の事務作業が重荷に）*/
  .trouble__bubble--4 { right: 28px; top: 220px; width: 280px; }


  .trouble__bubble--2 .trouble__bubble-bg { transform: rotate(20deg); }
  .trouble__bubble--3 .trouble__bubble-bg { transform: rotate(-14deg); }
  .trouble__bubble--4 .trouble__bubble-bg { transform: rotate(30deg); }

  .trouble__bubble-content {
    top: 22%;
    left: 16%;
    right: 4%;
    width:70%;
  }

  .trouble__bubble-title { font-size: 16px; }
  .trouble__bubble-text  { font-size: 15px; }
}


/* =============================================
   Solution Section アニメーション
   ============================================= */

.solution__unit {
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 1.4s ease-out;
}

.solution__unit--1,
.solution__unit--3 {
  transform: translateX(-60px);
}

.solution__unit--2,
.solution__unit--4 {
  transform: translateX(60px);
}

.solution__unit.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.solution__card {
  opacity: 0;
  transform: none;
  transition: opacity 0.8s ease-out 1s;
}

.solution__unit.is-visible .solution__card {
  opacity: 1;
}


/* =============================================
   Solution Section
   ============================================= */

.solution {
  background: transparent;
  padding-bottom: 120px;
}

@media (min-width: 600px) {
  .solution {
    padding-bottom: 180px;
  }
}

@media (min-width: 1024px) {
  .solution {
    padding-bottom: 240px;
  }
}

.solution__copy {
  text-align: center;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: 20px;
  color: var(--color-text-dark);
  margin-bottom: 48px;
  padding: 0 var(--section-padding-h);
}


/* ─── Mobile（〜599px）：縦1列・奇数左寄り・偶数右寄り ─── */

.solution__grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 var(--section-padding-h);
}

.solution__unit {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 奇数：画像左寄り */
.solution__unit--1 .solution__photo,
.solution__unit--3 .solution__photo {
  text-align: left;
}

/* 偶数：画像右寄り */
.solution__unit--2 .solution__photo,
.solution__unit--4 .solution__photo {
  text-align: right;
}

.solution__photo img {
  display: inline-block;
  width: 80%;
  height: auto;
  object-fit: contain;
}

.solution__card {
  padding: 0;
  background: transparent;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.solution__card-title {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 8px;
  color: var(--color-text-dark);
}

.solution__card-text {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
  color: var(--color-text);
}


/* ─── Tablet（600px〜799px） ─── */

@media (min-width: 600px) {

  .solution__photo img {
    width: 70%;
    height: auto;
  }

  .solution__card-title { font-size: 18px; }
  .solution__card-text  { font-size: 15px; }
}


/* ─── Desktop共通（1024px以上）：構造・レイアウト ─── */

@media (min-width: 1024px) {

  .solution__copy {
    font-size: 22px;
    margin-bottom: 60px;
  }

  .solution__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: 0;
    row-gap: 80px;
    padding: 0;
  }

  /* unit1（左上）：写真左・カード右 */
  .solution__unit--1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    grid-column: 1;
    grid-row: 1;
  }

  /* unit2（右上）：カード左・写真右 */
  .solution__unit--2 {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    grid-column: 2;
    grid-row: 1;
  }

  /* unit3（左下）：写真左・カード右 */
  .solution__unit--3 {
    display: flex;
    flex-direction: row;
    align-items: center;
    grid-column: 1;
    grid-row: 2;
  }

  /* unit4（右下）：カード左・写真右 */
  .solution__unit--4 {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    grid-column: 2;
    grid-row: 2;
  }

  .solution__photo img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .solution__card {
    background: #ffffff;
    border-radius: 8px;
    padding: 28px 24px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .solution__card-title {
    font-size: 17px;
    margin: 0 0 12px;
  }

  .solution__card-text { font-size: 15px; }
}


/* ─── Desktop流動レイアウト（1025px〜1689px）：% 値に切り替え ─── */

@media (min-width: 1025px) and (max-width: 1689px) {

  .solution__photo {
    flex: 0 0 68%;
    text-align: left;
  }

  .solution__card {
    flex: 0 0 35%;
    min-height: 200px;
    margin: 0 -7%;
  }
}


/* ─── 狭いDesktop（1025px〜1300px）：タブレットレイアウト＋画像幅442px ─── */

@media (min-width: 800px) and (max-width: 1300px) {

  .solution__grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0 var(--section-padding-h);
  }

  .solution__unit--1,
  .solution__unit--2,
  .solution__unit--3,
  .solution__unit--4 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    width: 100%;
    overflow: hidden;
  }

  /* 偶数ユニット（2・4）は画像を右側に */
  .solution__unit--2,
  .solution__unit--4 {
    flex-direction: row-reverse;
  }

  .solution__photo {
    flex: 0 0 442px;
    width: 442px;
  }

  .solution__photo img {
    width: 442px;
    height: auto;
    object-fit: cover;
    display: block;
  }

  .solution__card {
    flex: 1;
    min-width: 0;
    min-height: unset;
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }
}



/* ─── Desktop固定レイアウト（1690px以上）：固定px値 ─── */

@media (min-width: 1690px) {

  .solution__photo {
    flex: 0 0 576px;
    text-align: left;
  }

  .solution__card {
    flex: 0 0 300px;
    min-height: 240px;
    margin: 0 -60px;
  }
}


/* =====================
   Declare Section アニメーション
   ===================== */

.declare__lead {
  opacity: 0;
  transition: opacity 3.6s ease-out;
}

.declare__lead.is-visible {
  opacity: 1;
}


/* =====================
   Declare Section
   ===================== */

.declare {
  background: transparent;
  padding: var(--section-padding-v) var(--section-padding-h);
  padding-bottom: 160px;
  color: var(--color-text-dark);
}

@media (min-width: 600px) {
  .declare {
    padding-bottom: 200px;
  }
}

@media (min-width: 1024px) {
  .declare {
    padding-bottom: 240px;
  }
}

.declare__leads {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  margin-bottom: 80px;
}

.declare__lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.declare__lead-icon {
  width: 100px;
  height: 100px;
}

.declare__lead-icon img {
  width: 100%;
  height: auto;
}

.declare__lead-text {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  color: var(--color-text-dark);
  margin: 0;
}

.declare__wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
  opacity: 0;
  transition: opacity 4s ease-out;
  align-items: center;
  justify-content: center;
}

.declare__wrapper.is-visible {
  opacity: 1;
}

.declare__image {
  width: 100%;
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

.declare__image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.declare__text {
  text-align: center;
}

.declare__text p {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-h3);
  color: var(--color-text-dark);
  line-height: 1.6;
  margin: 0;
}

@media (min-width: 600px) {
  .declare__leads {
    flex-direction: row;
    justify-content: center;
    gap: 48px;
  }

  .declare__lead-icon {
    width: 120px;
    height: 120px;
  }

  .declare__wrapper {
    flex-direction: row;
    align-items: center;
  }

  .declare__image { width: 55%; }

  .declare__text {
    width: 45%;
    text-align: left;
    padding-left: 24px;
  }

  .declare__text p { font-size: var(--font-size-h2); }
}

@media (min-width: 1024px) {
  .declare__leads {
    gap: 80px;
    margin-bottom: 160px;
  }

  .declare__lead-icon {
    width: 157px;
    height: 157px;
  }

  .declare__lead-text { font-size: 20px; }

  .declare__image {
    width: 583px;
    flex-shrink: 0;
  }

  .declare__text p { font-size: 28px; }
}


/* =====================
   Features Section
   ===================== */

.features {
  background: transparent;
  padding: var(--section-padding-v) var(--section-padding-h);
  padding-bottom: 160px;
  overflow: hidden;
}

@media (min-width: 600px) {
  .features {
    padding-bottom: 200px;
  }
}

@media (min-width: 1024px) {
  .features {
    padding-bottom: 240px;
  }
}

.features__title-wrap {
  text-align: center;
  margin-bottom: 48px;
}

.features__title-en {
  font-family: var(--font-family-display);
  font-size: var(--font-size-display);
  color: #b0aaa0;
  margin: 0;
  line-height: 1;
}

.features__title-ja {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body-lg);
  color: #c46a3c;
  margin: 8px 0 0;
}

.features__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.features__item {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.features__item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

@keyframes features-band-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes features-image-from-left {
  from { opacity: 0; transform: translateX(80px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes features-image-from-right {
  from { opacity: 0; transform: translateX(-80px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 帯：円の中心〜下端に重なる縦グラデーション（下：solid → 上：transparent）
   幅：円の水平中心（radius位置）〜テキスト外端+40px まで
   Mobile：全アイテムが円左・テキスト右 → left: 50px(radius); right: -40px */
/* 初期状態：非表示（is-visible付与でアニメーション発動） */
.features__item--1,
.features__item--2,
.features__item--3 {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.features__item--1.is-visible,
.features__item--2.is-visible,
.features__item--3.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.features__item--1::before,
.features__item--2::before,
.features__item--3::before {
  content: '';
  position: absolute;
  left: 50px;
  right: -40px;
  bottom: calc(50% - 50px);
  height: 50px;
  background: linear-gradient(to top, #c8c3e8, transparent);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
}

.features__item--1.is-visible::before,
.features__item--2.is-visible::before,
.features__item--3.is-visible::before {
  animation: features-band-fadein 4s ease forwards;
}

/* 円形マスク済み画像：border-radius不要 */
.features__item-image {
  position: relative;
  z-index: 1;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}

.features__item--1.is-visible .features__item-image,
.features__item--2.is-visible .features__item-image,
.features__item--3.is-visible .features__item-image {
  animation: features-image-from-left 2s ease forwards;
}

.features__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: drop-shadow(4px 6px 12px rgba(0, 0, 0, 0.15));
}

.features__item-content {
  position: relative;
  z-index: 1;
  flex: 1;
}

@media (max-width: 599px) {
  .features__item-content {
    top: -24px;
  }
}

.features__item-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.features__item-num {
  font-family: var(--font-family-display);
  font-size: 36px;
  color: var(--color-accent);
  opacity: 0.4;
  line-height: 1;
  flex-shrink: 0;
}

.features__item-title {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body-lg);
  color: var(--color-text-dark);
  margin: 0;
  line-height: 1.4;
}

.features__item-text {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body-sm);
  color: rgba(000, 000, 000, 0.8);
  margin: 0;
  line-height: 1.7;
}

.features__more {
  margin-top: 32px;
  text-align: right;
}

.features__more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-sm);
  color: var(--color-text-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--color-text-dark);
  padding-bottom: 4px;
}

@media (min-width: 600px) {
  .features__item-image {
    width: 140px;
    height: 140px;
  }

  .features__item-num { font-size: 48px; }

  /* 奇数（1・3）：テキスト左・円右 */
  .features__item--1,
  .features__item--3 { flex-direction: row; }

  /* 奇数（1・3）の円は右側なので右から入る */
  .features__item--1.is-visible .features__item-image,
  .features__item--3.is-visible .features__item-image {
    animation-name: features-image-from-right;
  }

  /* 偶数（2）：円左・テキスト右 */
  .features__item--2 { flex-direction: row-reverse; }

  /* items 1&3：row → テキスト左・円右 → left=-40px, right=radius */
  .features__item--1::before,
  .features__item--3::before {
    left: -40px;
    right: 70px;
    bottom: calc(50% - 70px);
    height: 70px;
  }

  /* item 2：row-reverse → 円左・テキスト右 → left=radius, right=-40px */
  .features__item--2::before {
    left: 70px;
    right: -40px;
    bottom: calc(50% - 70px);
    height: 70px;
  }
}

@media (min-width: 1024px) {
  .features__title-en { font-size: 96px; }
  .features__title-ja { font-size: 26px; }

  .features__item {
    padding: 40px 0;
    max-width: 1060px;
  }

  /* 1・3は左寄り、2は右寄り */
  .features__item--1,
  .features__item--3 { margin-right: auto; }

  .features__item--2 { margin-left: auto; }

  .features__item-image {
    width: 221px;
    height: 221px;
  }

  /* items 1&3：テキスト左・円右 */
  .features__item--1::before,
  .features__item--3::before {
    left: -60px;
    right: 110px;
    bottom: calc(50% - 110px);
    height: 110px;
  }

  /* item 2：円左・テキスト右 */
  .features__item--2::before {
    left: 110px;
    right: -60px;
    bottom: calc(50% - 110px);
    height: 110px;
  }

  .features__item-num {
    font-size: 48px;
    opacity: 1;
  }

  .features__item-title { font-size: 16px; }
  .features__item-text { font-size: 15px; }
}


/* =====================
   Service Section アニメーション
   ===================== */

.service__bg-left {
  opacity: 0;
  transform: translateX(-200px);
  transition: opacity 2s ease-out, transform 2.8s ease-out;
}

.service__bg-right {
  opacity: 0;
  transform: translateX(200px);
  transition: opacity 2s ease-out, transform 2.8s ease-out;
}

.service__bg-left.is-visible,
.service__bg-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}


/* =====================
   Service Section
   ===================== */

.service {
  background: transparent;
  padding: var(--section-padding-v) 0;
  padding-bottom: 120px;
  overflow: hidden;
}

@media (min-width: 600px) {
  .service {
    padding-bottom: 160px;
  }

}

.service__title-wrap {
  text-align: center;
  margin-bottom: 48px;
  padding: 0 var(--section-padding-h);
}

.service__title-en {
  font-family: var(--font-family-display);
  font-size: var(--font-size-display);
  color: #b0aaa0;
  margin: 0;
  line-height: 1;
}

.service__title-ja {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body-lg);
  color: #c46a3c;
  margin: 8px 0 0;
}

/* 背景とコンテンツを重ねる親 */
.service__layout {
  position: relative;
}

/* 背景レイヤー全体 */
.service__bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* 左背景 */
.service__bg-left {
  position: absolute;
  top: 80px;
  left: 0;
  width: auto;
  height: 100%;
  overflow: visible;
}

/* 右背景 */
.service__bg-right {
  position: absolute;
  top: 24px;
  right: 0;
  width: auto;
  height: 100%;
  overflow: visible;
}

.service__bg-left picture,
.service__bg-right picture {
  display: block;
}

.service__bg-left img {
  width: 883px;   /* 1104px × 0.8 */
  height: auto;
  max-width: none;
  display: block;
}

.service__bg-right img {
  width: 1101px;  /* 1223px × 0.9 */
  height: auto;
  max-width: none;
  display: block;
}

/* コンテンツレイヤー */
.service__contents {
  display: flex;
  flex-direction: column;
  gap: 48px;
  position: relative;
  z-index: 1;
}

.service__item {
  position: relative;
}

.service__content {
  padding: 0px var(--section-padding-h);
  min-height: 240px;
  width:fit-content;
}

.service__item-title {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-body-lg);
  color: var(--color-text-dark);
  margin: 0 0 16px;
  display: block;
  width:fit-content;
}

.service__item-body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  color: var(--color-text-dark);
  margin: 0 0 8px;
  line-height: 1.6;
  width:fit-content;
}

.service__item-list {
  list-style: disc;
  padding-left: 20px;
  margin: 0 0 16px;
  width: fit-content;
}

.service__item-list li {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  color: var(--color-text-dark);
  margin-bottom: 4px;
  line-height: 1.6;
}

.service__more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-sm);
  color: var(--color-text-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--color-text-dark);
  padding-bottom: 4px;
  margin-top: 16px;
}

.service__item--2 .service__more-link {
  display: block;
  margin-top: 24px;
}

@media (max-width: 599px) {
  .service__more-link {
    font-size: var(--font-size-caption);
    gap: 6px;
    margin-top: 12px;
  }

  .service__bg-layer {
    top: 0;
    height: 640px;
  }

  .service__bg-right {
    width: 100%;
    height: 640px;
  }

  .service__bg-right img {
    width: 100%;
    height: 640px;
    object-fit: cover;
    object-position: right top;
  }

  .service__bg-left,
  .service__bg-right {
    transform: translateX(0);
  }

  .service__bg-left.is-visible,
  .service__bg-right.is-visible {
    transform: translateX(0);
  }
}

.service__movie {
  position: relative;
  display: block;
  margin: 16px 0;
}

.service__movie::after {
  content: 'COMING SOON';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  font-family: var(--font-family-en);
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  pointer-events: none;
}

.service__movie video {
  pointer-events: none;
  width: 100%;
  display: block;
}

.service__movie img {
  width: 100%;
  max-width: 403px;
  height: auto;
  display: block;
}

.service__note {
  margin-top: 48px;
  padding: 0 var(--section-padding-h);
  position: relative;
  z-index: 1;
}

.service__note-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #ffffff;
  padding: 16px;
  border-radius: var(--border-radius-sm);
  border: 3px solid var(--color-text-dark);
  outline: 1px solid var(--color-text-dark);
  outline-offset: 4px;
}

.service__note-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
  flex-shrink: 0;
}

.service__note-text {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-sm);
  color: var(--color-text);
  margin: 0;
  line-height: 1.6;
}

@media (min-width: 750px) {
  .service__contents {
    display: flex;
    flex-direction: row;
}
}

@media (min-width: 1024px) {
  .service {
    overflow: visible;
    padding-bottom: 200px;
  }

  .service__title-wrap {
    padding-left:  max(60px, calc((100vw - 1800px) / 2));
    padding-right: max(60px, calc((100vw - 1800px) / 2));
  }

  .service__title-en { font-size: 96px; }
  .service__title-ja { font-size: 26px; }

  .service__contents {
    /* display: flex;
    flex-direction: row; */
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(0px, 4vw, 120px);
    overflow: visible;
    width: 100%;
    padding-left:  max(60px, calc((100vw - 1800px) / 2));
    padding-right: max(60px, calc((100vw - 1800px) / 2));
    box-sizing: border-box;
  }

  .service__item {
    flex: 0 0 600px;
    width: 600px;
  }

  .service__item--1 .service__content {
    padding: 220px 60px 60px 60px;
    width: fit-content;
    box-sizing: border-box;
  }

  .service__item--2 .service__content {
    padding: 200px 60px 60px 60px;
    width: fit-content;
    box-sizing: border-box;
  }

  .service__item-title { font-size: 16px; }
  .service__item-body  { font-size: 16px; }

  .service__movie img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .service__note {
    display: flex;
    justify-content: center;
    padding: 0;
    margin-top: 172px;
  }

  .service__note-inner { max-width: 844px; }
  .service__note-logo  { width: 100px; height: 100px; }
}

/* 背景画像リキッド切り替え：右背景固定幅（1101px）を下回ったら流動化 */
@media (min-width: 1024px) and (max-width: 1101px) {
  .service__bg-left,
  .service__bg-right {
    width: 　100%;
  }

  .service__bg-left img,
  .service__bg-right img {
    width: 100%;
    height: auto;
  }
}

/* 1300px〜1024px：コンテンツリキッドレイアウトに切り替え */
@media (min-width: 1024px) and (max-width: 1300px) {
  .service__item {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  .service__item--1 .service__content,
  .service__item--2 .service__content {
    padding-left:  40px;
    padding-right: 40px;
  }
}



/* モバイル（600px以下）：背景画像サイズ調整 */
@media (max-width: 600px) {
  .service__bg-left {
    display: none;
  }

  .service__bg-left img {
    width: 400px;
  }

  /* .service__bg-right img は @media (max-width: 599px) で定義 */

  .service__bg-right {
    top: auto;
    bottom: 0;
  }
}

/* タブレット以上（601px以上）：左背景を表示 */
@media (min-width: 601px) {
  .service__bg-left {
    display: block;
  }
}


/* =====================================================
   Voices Section
   ===================================================== */
.voices {
  background: transparent;
  padding: var(--section-padding-v) var(--section-padding-h);
  padding-bottom: 120px;
}

@media (min-width: 600px) {
  .voices {
    padding-bottom: 160px;
  }
}

@media (min-width: 1024px) {
  .voices {
    padding-bottom: 200px;
  }
}

.voices__title-wrap {
  text-align: center;
  margin-bottom: 56px;
}

.voices__title-en {
  font-family: var(--font-family-display);
  font-size: var(--font-size-display);
  color: #b0aaa0;
  margin: 0;
  line-height: 1;
}

.voices__title-ja {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body-lg);
  color: #c46a3c;
  margin: 8px 0 0;
}

/* Mobile：縦積み */
.voices__list {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.voices__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* 吹き出し */
.voices__bubble {
  position: relative;
  width: 100%;
  border: 1.5px solid var(--color-text-dark);
  border-radius: 4px;
  background: #ffffff;
}

.voices__bubble::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid #ffffff;
  z-index: 2;
}

.voices__bubble::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid var(--color-text-dark);
  z-index: 1;
}

.voices__bubble-text {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  color: var(--color-text-dark);
  line-height: 1.7;
  margin: 0;
  padding: 24px 20px;
}

/* アバター */
.voices__avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.voices__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--color-overlay-white-sm);
}

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

.voices__name {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body-sm);
  color: var(--color-text);
  margin: 0;
}

/* Tablet（600px以上）：3列横並び */
@media (min-width: 600px) {
  .voices__list {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
  }
  .voices__item { flex: 1; }
}

/* Desktop（1024px以上） */
@media (min-width: 1024px) {
  .voices__title-en { font-size: 96px; }
  .voices__title-ja { font-size: 26px; }
  .voices__avatar { width: 132px; height: 132px; }
  .voices__name { font-size: 20px; }
  .voices__bubble-text { font-size: 16px; padding: 32px 26px; }
  .voices__list { gap: 44px; max-width: 1251px; margin: 0 auto; }
}


/* ===== FAQ ===== */

.faq {
  background: transparent;
  padding: var(--section-padding-v) var(--section-padding-h);
  padding-bottom: 120px;
}

@media (min-width: 600px) {
  .faq {
    padding-bottom: 160px;
  }
}

@media (min-width: 1024px) {
  .faq {
    padding-bottom: 200px;
  }
}

.faq__title-wrap {
  text-align: center;
  margin-bottom: 48px;
}

.faq__title-en {
  font-family: var(--font-family-display);
  font-size: var(--font-size-display);
  color: #b0aaa0;
  margin: 0;
  line-height: 1;
}

.faq__title-ja {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body-lg);
  color: #c46a3c;
  margin: 8px 0 0;
}

/* Q&Aリスト */
.faq__list {
  max-width: 855px;
  margin: 0 auto;
}

.faq__item {
  padding: 24px 0;
  border-top: 1px solid var(--color-border);
}

.faq__item:last-child {
  border-bottom: 1px solid var(--color-border);
}

.faq__question {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body);
  color: var(--color-text-dark);
  margin: 0 0 12px;
  line-height: 1.6;
}

.faq__answer {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  color: var(--color-text);
  margin: 0;
  line-height: 1.7;
}

/* もっと見るリンク */
.faq__more {
  max-width: 855px;
  margin: 32px auto 0;
  text-align: right;
}

.faq__more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-sm);
  color: var(--color-text-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--color-text-dark);
  padding-bottom: 4px;
}

/* Desktop（1024px以上） */
@media (min-width: 1024px) {
  .faq__title-en { font-size: var(--font-size-display); }
  .faq__title-ja { font-size: var(--font-size-h3); }
  .faq__question { font-size: var(--font-size-body); }
  .faq__answer { font-size: var(--font-size-body); }
}


/* ===== Process アニメーション ===== */

.process__shape {
  opacity: 0;
  transition: opacity 0.8s ease-out;
}

.process__shape.is-visible {
  opacity: 1;
}

.process__item:not(:last-child)::after {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.process__item.is-visible:not(:last-child)::after {
  opacity: 1;
  transform: translateX(0);
}

/* process__step-text フェードイン */
.process__step-text {
  opacity: 0;
  transition: opacity 0.8s ease-out;
}

.process__item.is-visible .process__step-text {
  opacity: 1;
}


/* ===== Process ===== */

.process {
  background: transparent;
  padding: var(--section-padding-v) var(--section-padding-h);
  padding-bottom: 120px;
}

@media (min-width: 600px) {
  .process {
    padding-bottom: 160px;
  }
}

@media (min-width: 1024px) {
  .process {
    padding-bottom: 200px;
  }
}

.process__title-wrap {
  text-align: center;
  margin-bottom: 48px;
}

.process__title-en {
  font-family: var(--font-family-display);
  font-size: var(--font-size-display);
  color: #b0aaa0;
  margin: 0;
  line-height: 1;
}

.process__title-ja {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body-lg);
  color: #c46a3c;
  margin: 8px 0 0;
}

/* ─── Mobile：縦積み ─── */
.process__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.process__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 260px;
  position: relative;
  padding-bottom: 16px;
}

.process__item:last-child {
  padding-bottom: 0;
}

/* 葉っぱ形シェイプ */
.process__shape {
  position: relative;
  width: 180px;
  height: 140px;
  flex-shrink: 0;
}

.process__shape img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

.process__step-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body-sm);
  color: var(--color-text-dark);
  text-align: center;
  margin: 0;
  line-height: 1.5;
  white-space: nowrap;
}

.process__step-text {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body-sm);
  color: var(--color-text);
  text-align: center;
  margin: 0;
  line-height: 1.7;
}

/* Mobile：↓コネクター（各アイテム末尾、最後以外） */
.process__item:not(:last-child)::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 13px solid var(--color-accent);
  margin: 4px auto 0;
}

/* ─── Tablet（600px以上）：折り返し2列 ─── */
@media (min-width: 600px) {
  .process__list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
  }

  .process__item {
    max-width: 220px;
    padding-bottom: 0;
  }

  /* Tabletではコネクター非表示（折り返しレイアウトのため） */
  .process__item:not(:last-child)::after {
    display: none;
  }
}

/* ─── Desktop（1500px以上）：5列横並び + →コネクター ─── */
@media (min-width: 1500px) {
  .process__list {
    flex-wrap: nowrap;
    gap: 20px;
    max-width: 1408px;
    margin: 0 auto;
    align-items: flex-start;
  }

  .process__item {
    flex: 1;
    max-width: none;
    padding-bottom: 0;
  }

  .process__title-en { font-size: var(--font-size-display); }
  .process__title-ja { font-size: var(--font-size-h3); }

  .process__shape {
    width: 262px;
    height: 203px;
  }

  .process__step-title { font-size: 16px; }
  .process__step-text { font-size: var(--font-size-body-sm); }

  /* Desktop：→コネクター（シェイプ中央の高さに絶対配置） */
  .process__item:not(:last-child)::after {
    display: block;
    position: absolute;
    top: 101px; /* 203px ÷ 2 = shape縦中央 */
    right: -16px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 13px solid var(--color-accent);
    margin: 0;
  }
}



/* ===== News Section ===== */
.news {
  background: transparent;
  padding: var(--section-padding-v) var(--section-padding-h);
}
.news__title-wrap {
  text-align: center;
  margin-bottom: 40px;
}
.news__title-en {
  font-family: var(--font-family-display);
  font-size: var(--font-size-display);
  color: #b0aaa0;
  margin: 0;
  line-height: 1;
}
.news__title-ja {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body-lg);
  color: #c46a3c;
  margin: 8px 0 0;
}

.news__list {
  max-width: 735px;
  margin: 0 auto 24px;
}
.news__item {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.news__item:first-child {
  border-top: 1px solid rgba(000,000,000);
}
.news__date {
  font-family: var(--font-family-en);
  font-size: var(--font-size-body-sm);
  color: var(--color-text);
  flex-shrink: 0;
  white-space: nowrap;
}
.news__title {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.5;
}
.news__title:hover {
  text-decoration: underline;
  color: var(--color-accent);
}

.news__more {
  text-align: right;
  max-width: 735px;
  margin: 0 auto;
}
.news__more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-sm);
  color: var(--color-text-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--color-text-dark);
  padding-bottom: 4px;
}

@media (min-width: 1024px) {
  .news__title-en { font-size: 96px; }
  .news__title-ja { font-size: 20px; }
  .news__date { font-size: 15px; }
  .news__title { font-size: 15px; }
}
/* /News Section */