/* ===================================================
   why.css
   テーマ: gala
   WHY GALAページ専用スタイル
=================================================== */

/* ============================================
   HERO（中央揃えオーバーライド）
============================================ */
.page-why-gala .page-hero {
  text-align: center;
}
.page-why-gala .page-hero .section-title {
  text-align: center;
}
/* .page-why-gala .page-hero .section-title::after {
  content: '';
  display: block;
  width: 3.2rem;
  height: 1px;
  background: var(--color_white);
  margin: 1.2rem auto 0;
} */

/* ============================================
   MISSION
============================================ */
.why_mission {
  padding: clamp(8rem, calc(120 / var(--design-width) * 100vw), 12rem) 0;
  position: relative;
  z-index: -2;
  background-color: var(--color_bg);
}
.why_mission::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(10rem, calc(150 / var(--design-width) * 100vw), 15rem);
  background-color: var(--color_bg);
  transform: translateY(-100%);
}
.why_mission__inner {
  text-align: center;
}
.why_mission__label {
  font-family: var(--font_serif);
  font-size: clamp(3.6rem, calc(46 / var(--design-width) * 100vw), 4.6rem);
  font-weight: 700;
  color: var(--color_sub1);
  letter-spacing: 0.12em;
  margin-bottom: 1.6rem;
}
.why_mission__ornament {
  width: 4rem;
  height: 1px;
  background: var(--color_sub1);
  margin: 0 auto 2.8rem;
}
.why_mission__text {
  font-size: clamp(2rem, calc(30 / var(--design-width) * 100vw), 3rem);
  font-weight: 500;
  line-height: 1.6;
  color: var(--color_text);
}

/* ============================================
   WHY GALA（3理由）
============================================ */
.why_main {
  padding: clamp(8rem, calc(120 / var(--design-width) * 100vw), 12rem) 0 0;
}
.why_main__head {
  text-align: center;
  margin-bottom: clamp(2rem, calc(40 / var(--design-width) * 100vw), 4rem);
}
.why_main__head .page-title {
  margin-bottom: clamp(2rem, calc(40 / var(--design-width) * 100vw), 4rem);
}
.why_main__heading {
  font-family: var(--font_serif);
  font-size: clamp(3.6rem, calc(60 / var(--design-width) * 100vw), 6rem);
  font-weight: 700;
  color: var(--color_sub1);
  margin-bottom: 2.8rem;
}
.why_main__lead {
  font-size: clamp(1.4rem, calc(16 / var(--design-width) * 100vw), 1.6rem);
  font-weight: 500;
  line-height: 2;
  color: var(--color_text);
  margin: 0 auto;
  text-align: left;
}

/* 理由リスト */
.why_reasons {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, calc(40 / var(--design-width) * 100vw), 4rem);
}
.why_reason {
  display: grid;
  grid-template-columns: clamp(50%, calc(50 / var(--design-width) * 100vw), 50rem) auto;
  gap: clamp(1.5rem, calc(30 / var(--design-width) * 100vw), 3rem);
  align-items: center;
}
/* 02：テキスト左・画像右 */
.why_reason--reverse .why_reason__body {
  order: 1;
}
.why_reason--reverse .why_reason__img {
  order: 2;
}
.why_reason__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.why_reason__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: var(--transition);
}
.why_reason__img-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color_sub5);
  min-height: 30rem;
}
.why_reason__body {
  display: grid;
  gap: 2rem;
}
.why_reason__num {
  font-family: var(--font_serif);
  font-size: clamp(5rem, calc(70 / var(--design-width) * 100vw), 7rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color_sub2);
}
.why_reason__title {
  font-size: clamp(2rem, calc(26 / var(--design-width) * 100vw), 2.6rem);
  font-weight: 500;
  color: var(--color_sub1);
}
.why_reason__text {
  font-size: clamp(1.4rem, calc(15 / var(--design-width) * 100vw), 1.5rem);
  font-weight: 500;
  line-height: 2.1;
  color: var(--color_text);
}

/* ============================================
   代表挨拶
============================================ */
.why_greeting {
  background: var(--color_white);
  position: relative;
  padding: clamp(10rem, calc(150 / var(--design-width) * 100vw), 15rem) 0;
}
.why_greeting::after {
  content: '';
  width: 100%;
  height: 40%;
  background-color: var(--color_bg);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
}
.why_greeting .section-md-inner {
  position: relative;
  z-index: 1;
}
.why_greeting__head {
  text-align: center;
  margin-bottom: clamp(4rem, calc(60 / var(--design-width) * 100vw), 6rem);
}
.why_greeting__body {
  font-size: clamp(1.4rem, calc(16 / var(--design-width) * 100vw), 1.6rem);
  font-weight: 500;
  line-height: 2.2;
  color: var(--color_text);
}
.why_greeting__body p {
  margin-bottom: 2rem;
}
.why_greeting__body p:last-child {
  margin-bottom: 0;
}

/* ============================================
   あなたの今に、伝えたいこと
============================================ */
.why_target {
  position: relative;
  padding-top: 0;
  padding-bottom: clamp(8rem, calc(120 / var(--design-width) * 100vw), 12rem);
}
.why_target::after {
  content: '';
  width: 100%;
  height: 50%;
  background-color: var(--color_bg);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.why_target .section-inner {
  position: relative;
  z-index: 1;
}
.why_target__head {
  text-align: center;
  margin-bottom: clamp(2rem, calc(40 / var(--design-width) * 100vw), 4rem);
}
.why_target__title {
  font-family: var(--font_serif);
  font-size: clamp(2.4rem, calc(36 / var(--design-width) * 100vw), 3.6rem);
  font-weight: 700;
  color: var(--color_text);
  margin-bottom: 1.2rem;
}
.why_target__sub {
  font-family: var(--font_serif);
  font-weight: 700;
  font-size: clamp(1.6rem, calc(20 / var(--design-width) * 100vw), 2rem);
  margin: clamp(2rem, calc(40 / var(--design-width) * 100vw), 4rem) auto;
}
.why_target__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, calc(30 / var(--design-width) * 100vw), 3rem);
}
.why_target__card {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.why_target__card-img {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.why_target__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: var(--transition);
}
.why_target__card:hover .why_target__card-img img {
  transform: scale(1.04);
}
.why_target__card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color_text);
  opacity: 0.7;
  transition: var(--transition);
}
.why_target__card:hover .why_target__card-img::after {
  opacity: 0.2;
}
.why_target__card-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color_sub1);
  min-height: 20rem;
}
.why_target__card-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font_serif);
  font-size: clamp(1.6rem, calc(20 / var(--design-width) * 100vw), 2rem);
  font-weight: 700;
  color: var(--color_white);
  z-index: 1;
}
.why_target__card .btn {
  align-self: center;
}

/* ============================================
   代表プロフィール
============================================ */
.why_profile {
  position: relative;
  z-index: 3;
  padding: clamp(6rem, calc(100 / var(--design-width) * 100vw), 10rem) 0;
}
.why_profile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: max(36rem, calc(100% - clamp(1.5rem, calc(120 / var(--design-width) * 100vw), 12.0rem)));
  height: 100%;
  background: url('../images/why-gala-bg.webp') center / cover no-repeat;
  opacity: 0.25;
}
.why_profile::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: max(36rem, calc(100% - clamp(1.5rem, calc(120 / var(--design-width) * 100vw), 12.0rem)));
  height: 100%;
  background: var(--gradient3);
  mix-blend-mode: multiply;
}
.why_profile__bg {
  position: absolute;
  top: clamp(4rem, calc(60 / var(--design-width) * 100vw), 6rem);
  right: 0;
  z-index: 2;
  width: max(36rem, calc(100% - clamp(1.5rem, calc(120 / var(--design-width) * 100vw), 12.0rem)));
  height: 100%;
  background: var(--color_text);
  opacity: 0.7;
  mix-blend-mode: multiply;
}
.why_profile .section-md-inner {
  position: relative;
  z-index: 3;
  padding-top: clamp(4rem, calc(60 / var(--design-width) * 100vw), 6rem);
}
.why_profile__head {
  text-align: center;
  margin-bottom: clamp(4rem, calc(60 / var(--design-width) * 100vw), 6rem);
}
.why_profile__heading {
  font-family: var(--font_serif);
  font-size: clamp(3rem, calc(48 / var(--design-width) * 100vw), 4.8rem);
  font-weight: 700;
  color: var(--color_white);
  letter-spacing: 0.05em;
}
.why_profile__inner {
  display: grid;
  grid-template-columns: clamp(20rem, calc(300 / var(--design-width) * 100vw), 30rem) 1fr;
  gap: clamp(3rem, calc(50 / var(--design-width) * 100vw), 5rem);
  align-items: flex-start;
}
.why_profile__photo {
  text-align: center;
  flex-shrink: 0;
}
.why_profile__photo img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 1.6rem;
}
.why_profile__name {
  font-size: clamp(2.8rem, calc(32 / var(--design-width) * 100vw), 3.2rem);
  font-weight: 500;
  color: var(--color_white);
  line-height: 1.3;
}
.why_profile__name span {
  font-family: var(--font_serif);
}
.why_profile__overview {
  font-size: 1.3rem;
  margin:2.5rem 0;
  text-align: left;
  color: white;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255,255,255,0.5);
  border-bottom: 1px solid rgba(255,255,255,0.5);
}
.why_profile__overview a {
  text-decoration:underline;
}
.why_profile__sns {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: 2.5rem;
  justify-content: center;
}
.why_profile__sns-item {
  min-width: 60px;
}
.why_profile__sns-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.4rem;
  color: var(--color_white);
  transition: var(--transition);
}
.why_profile__sns-link:hover {
  font-weight: bold;
}
.why_profile__sns-icon {
  width: 1.6rem;
  height: 1.6rem;
  fill: currentColor;
  flex-shrink: 0;
  transition: var(--transition);
}
.why_profile__sns-link:hover .why_profile__sns-icon {
  transform: scale(1.05);
}
.why_profile__dl {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.why_profile__dl-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
.why_profile__dl-row dt {
  font-size: clamp(1.6rem, calc(18 / var(--design-width) * 100vw), 1.8rem);
  font-weight: 700;
  color: var(--color_white);
  padding-top: 0.2rem;
  line-height: 1.6;
}
.why_profile__dl-row dd {
  font-size: clamp(1.4rem, calc(16 / var(--design-width) * 100vw), 1.6rem);
  line-height: 1.8;
  color: var(--color_white);
}
.why_profile__dl-row dd p {
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.why_profile__dl-row dd ul {
  list-style: none;
  padding: 0;
}
.why_profile__dl-row dd ul li {
  margin-bottom: 0.6rem;
  padding-left: 0;
}
.why_profile__dl-row dd ul li::before {
  content: '・';
  color: var(--color_sub2);
}

/* ============================================
   会社概要
============================================ */
.why_company__head {
  text-align: center;
  margin-bottom: clamp(4rem, calc(60 / var(--design-width) * 100vw), 6rem);
}
.why_company__table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(1.4rem, calc(16 / var(--design-width) * 100vw), 1.6rem);
  max-width: 80rem;
  margin: 0 auto;
}
.why_company__table th,
.why_company__table td {
  padding: clamp(1.6rem, calc(24 / var(--design-width) * 100vw), 2.4rem) clamp(1.6rem, calc(32 / var(--design-width) * 100vw), 3.2rem);
  text-align: left;
  border-bottom: 1px solid var(--color_gray);
  vertical-align: top;
  line-height: 1.8;
}
.why_company__table th {
  font-weight: 500;
  color: var(--color_muted);
  width: clamp(10rem, calc(180 / var(--design-width) * 100vw), 18rem);
  white-space: nowrap;
}

/* ============================================
   SP（〜768px）
============================================ */
@media (max-width: 768px) {
  /* MISSION */
  .why_mission__text {
    text-align: left;
  }

  /* 理由 */
  .why_reason {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .why_reason--reverse .why_reason__body {
    order: 2;
  }
  .why_reason--reverse .why_reason__img {
    order: 1;
  }
  .why_reason__img-placeholder {
    min-height: 24rem;
  }

  /* あなたの今に */
  .why_target__cards {
    grid-template-columns: 1fr;
    gap: 3.2rem;
  }
  .why_target__card .btn {
    align-self: center;
  }

  /* 代表プロフィール */
  .why_profile__inner {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
  .why_profile__photo img {
    width: 16rem;
    margin: 0 auto 1.6rem;
  }
  .why_profile__sns {
    flex-direction: column;
    gap: 1.2rem;
  }
  .why_profile__dl-row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  /* 会社概要 */
  .why_company__table,
  .why_company__table tbody,
  .why_company__table tr,
  .why_company__table th,
  .why_company__table td {
    display: block;
    width: 100%;
  }
  .why_company__table tbody tr {
    padding: 1.6rem 0;
    border-bottom: 1px solid var(--color_gray);
  }
  .why_company__table th,
  .why_company__table td {
    border: none;
    padding: 0.2rem 0;
    white-space: normal;
  }
  .why_company__table th {
    width: 100%;
  }
}