/* ============================================================
 * About ページ専用 CSS
 * Figma: weMbv5Gyjtk9YIJKwOcv1Q / node 1741:12893
 * ============================================================ */

/* ============================================================
 * ページ背景グラジェント
 * ============================================================ */
/* ページ背景は shared.css の .page-id-151 ルール (装飾 + 204deg gradient) に統合済み。
   body shorthand は装飾レイヤーをリセットしてしまうためここでは宣言しない。 */


/* ============================================================
 * About FV (.aoi-about-fv) — Figma node 1741:12902
 * ============================================================ */

.aoi-about-fv {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  aspect-ratio: 1472 / 380;
  overflow: hidden;
}

@media (max-width: 599px) {
  .aoi-about-fv {
    aspect-ratio: 350 / 263;
  }
}

.aoi-about-fv__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.aoi-about-fv picture {
  display: block;
  height: 100%;
  width: 100%;
}

.aoi-about-fv__deco {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: block;
}

.aoi-about-fv__deco--h1 { width: 8.13%; left: 21.3%; top: 31.7%; }
.aoi-about-fv__deco--h2 { width: 4.43%; left: 72.1%; top: 23.4%; }
.aoi-about-fv__deco--h3 { width: 4.43%; left: 25.3%; top: 69.3%; }
.aoi-about-fv__deco--h4 { width: 8.07%; left: 80.2%; top: 50.1%; }

.aoi-about-fv__deco--r1 { width: 7.08%; left: 89.6%; top: 20.2%; }
.aoi-about-fv__deco--r2 { width: 9.85%; left: 10.75%; top: 68.5%; }
.aoi-about-fv__deco--r3 { width: 4.10%; left: 86.1%; top: 76.4%; }
.aoi-about-fv__deco--r4 { width: 4.10%; left: 12.8%; top: 16.8%; }

.aoi-about-fv__en,
.aoi-about-fv__ja {
  position: absolute;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
}

.aoi-about-fv__en {
  left: 28%;
  top: 30%;
  font-family: 'Oooh Baby', cursive;
  font-size: 6.35vw;
  color: #e7f4b3;
  letter-spacing: -0.05em;
  transform: rotate(-9.26deg);
}

.aoi-about-fv__ja {
  left: 38%;
  top: 48%;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 1.72vw;
  color: #ffffff;
  letter-spacing: 0.1em;
}

@media (max-width: 599px) {
  .aoi-about-fv__en {
    font-size: 48px;
    left: 20%;
    top: 32%;
    transform: rotate(-13.37deg) skewX(-6.99deg) scaleY(0.99);
  }
  .aoi-about-fv__ja {
    font-size: 24px;
    letter-spacing: 2.4px;
    line-height: 1.4;
    left: 0;
    right: 0;
    top: 40%;
    margin-left: auto;
    margin-right: auto;
    width: 253px;
    transform: none;
    white-space: normal;
    text-align: center;
  }

  .aoi-about-fv__deco--h1 { width: 22.3%; left: 21.7%; top: 76.8%; }
  .aoi-about-fv__deco--h2 { width: 19.1%; left: 57.9%; top: 41.3%; }
  .aoi-about-fv__deco--h3 { width: 14.3%; left: 85.1%; top: 20.2%; }
  .aoi-about-fv__deco--h4 { display: none; }
  .aoi-about-fv__deco--r1 { width: 26.9%; left: 80.9%; top: 73.4%; }
  .aoi-about-fv__deco--r2 { width: 17.7%; left: 15.7%; top: 17.9%; }
  .aoi-about-fv__deco--r3 { display: none; }
  .aoi-about-fv__deco--r4 { display: none; }
}

/* ============================================================
 * About コンテンツレイアウト
 * ============================================================ */

/* 装飾円の絶対配置基点 */
.aoi-about-content {
  position: relative;
}

/* セクション別背景装飾リング */
.aoi-section-deco-wrap {
  position: relative;
  overflow: hidden;
}

.aoi-section-deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: -1;
  opacity: 0.8;
}

/* プロフィールセクション */
.aoi-section-deco--profile {
  width: 988px;
  height: 988px;
  left: -420px;
  top: 190px;
}

/* サービスセクション */
.aoi-section-deco--service {
  width: 1115px;
  height: 1115px;
  left: 1059px;
  top: 164px;
}

.aoi-section-deco--service-white {
  width: 761px;
  height: 761px;
  left: -47px;
  top: 1258px;
  transform: rotate(-14.69deg);
  opacity: 0.9;
}

/* 料金セクション */
.aoi-section-deco--price {
  width: 840px;
  height: 840px;
  left: 996px;
  top: 725px;
}

@media (max-width: 599px) {
  .aoi-section-deco {
    display: none;
  }
}

/* ============================================================
 * グローバル h2/h3/h4 余白の打ち消し
 * .aoi-about-content 内の見出しに過大な余白が付くのを防ぐ
 * (旧テーマ由来の h2{margin:4em 0 2em} 等が cascade で残っていた場合の保険)
 * ============================================================ */
.aoi-about-content h2 {
  background: none;
  padding: 0;
}
.aoi-about-content h2::before {
  border-top: none;
  border-bottom: none;
}
.aoi-about-content h3 {
  margin: 0;
  padding: 0;
  position: static;
}
.aoi-about-content h3::before {
  display: none;
}
.aoi-about-content h4 {
  margin: 0 0 16px;
  padding: 0;
  border-left: none;
  position: static;
}

/* ===== セクションタイトル（margin は about 固有値）===== */
.aoi-page-about .aoi-section-title-wrap {
  margin: 70px 0;
}

/* ===== 想いセクション (concept) ===== */
.aoi-cols--concept {
  align-items: center;
  gap: 70px; /* Figma: 70px (658px text col + 470px image col in ~1200px content) */
  margin-bottom: 0;
}

.aoi-col--concept-text {
  flex: 0 0 60%;
  max-width: 60%;
}

/* concept 見出し: Figma 30px / bold / #1c4660 / letter-spacing 4.8px / line-height 1.4 */
.aoi-col--concept-text h3 {
  font-size: 30px;
  font-weight: 700;
  color: #1c4660;
  letter-spacing: 0.16em;
  line-height: 1.4;
  margin: 0 0 40px;
}

.aoi-col--concept-portrait {
  flex: 0 0 calc(40% - 40px);
  max-width: calc(40% - 40px);
}

.aoi-col--concept-portrait .aoi-image-round img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}

.aoi-about-portrait-sp {
  display: none;
}

@media (max-width: 599px) {
  .aoi-col--concept-text {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .aoi-col--concept-portrait {
    display: none;
  }
  .aoi-about-portrait-sp {
    display: block;
    margin-bottom: 16px;
  }
  .aoi-about-portrait-sp img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    display: block;
  }
}

/* ===== 選ばれる理由（3カラム）===== */
.aoi-cols--3 {
  align-items: stretch;
  gap: 24px;
}

.aoi-cols--3 > .aoi-col {
  flex: 1 1 0;
}

.aoi-cols--3 .aoi-white-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
}

.aoi-cols--3 .aoi-white-box .aoi-image-round {
  margin: 0;
}

.aoi-cols--3 .aoi-white-box .aoi-image-round img {
  width: 100%;
  display: block;
  border-radius: 0;
}

/* カード内 h3: Figma 20px / bold / #1c4660 / letter-spacing 2px / line-height 1.8 */
.aoi-white-box__body h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1c4660;
  letter-spacing: 0.1em;
  line-height: 1.8;
  margin: 0 0 16px;
}

/* 選ばれる理由カード：見出し下の区切り線（Figma確認）*/
.aoi-cols--3 .aoi-white-box__body h3 {
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 16px;
  margin-bottom: 20px;
}

@media (max-width: 599px) {
  .aoi-cols--3 {
    gap: 16px;
  }
}

/* ===== 代表プロフィール ===== */
.aoi-cols--profile {
  align-items: flex-start;
  gap: 48px;
}

.aoi-col--profile-img {
  flex: 0 0 35%;
  max-width: 35%;
}

.aoi-col--profile-img img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}

.aoi-col--profile-text {
  flex: 1;
}

.aoi-about-role {
  margin-bottom: 4px;
}

.aoi-about-name strong {
  font-size: 1.5em;
}

.aoi-about-career {
  margin-top: 24px;
}

@media (max-width: 599px) {
  .aoi-col--profile-img {
    flex: 1 1 100%;
    max-width: 60%;
    margin: 0 auto;
  }
  .aoi-col--profile-text {
    flex: 1 1 100%;
  }
  .aoi-about-name {
    text-align: center;
  }
  .aoi-about-role {
    text-align: center;
  }
}

/* ===== サービス ===== */
.aoi-cols--service {
  gap: 40px;
  align-items: center;
  margin-bottom: 24px;
  border-radius: 16px;
  padding: 32px;
}

.aoi-col--service-img {
  flex: 0 0 30%;
  max-width: 30%;
}

.aoi-col--service-img img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

.aoi-col--service-body {
  flex: 1;
}

/* サービス見出し h3 */
.aoi-col--service-body h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1c4660;
  letter-spacing: 0.1em;
  line-height: 1.6;
  margin: 0 0 16px;
}

@media (max-width: 599px) {
  .aoi-cols--service {
    flex-direction: column;
    padding: 20px;
  }
  .aoi-cols--service-rev {
    flex-direction: column;
  }
  .aoi-col--service-img {
    flex: 1 1 100%;
    max-width: 100%;
    order: -1;
  }
  .aoi-col--service-body {
    flex: 1 1 100%;
  }
}

/* ===== 料金案内 ===== */
.aoi-section-deco-wrap--price h4 {
  font-size: 18px;
  font-weight: 700;
  color: #1c4660;
  margin: 0 0 16px;
  border-left: 4px solid #17bfbd;
  padding-left: 10px;
}

.aoi-about-price-img {
  margin: 0 0 16px;
}

.aoi-about-price-img img {
  width: 100%;
  height: auto;
  display: block;
}

.aoi-about-price-img--sp {
  display: none;
}

@media (max-width: 599px) {
  .aoi-about-price-img--pc {
    display: none;
  }
  .aoi-about-price-img--sp {
    display: block;
  }
}

/* ============================================================
 * 料金案内 — HTML/CSSコーディング化
 * ============================================================ */
.aoi-price {
  margin: 0 auto 40px;
}
.aoi-price + .aoi-price {
  margin-top: 32px;
}
.aoi-price__subheading {
  color: #1c4660;
  font-weight: 700;
  font-size: 20px;
  text-align: left;
  margin: 0 0 16px;
}

/* 料金システム: 2カード横並び (+で連結) */
.aoi-price__system-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 24px;
}
.aoi-price__plus {
  align-self: center;
  text-align: center;
  font-size: 40px;
  font-weight: 700;
  color: #17bfbd;
  line-height: 1;
}

/* 共通カード */
.aoi-price-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e5e5;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.aoi-price-card__header {
  color: #fff;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.05em;
}
.aoi-price-card__header--accent {
  background: #17bfbd;
}
.aoi-price-card__header--navy {
  background: #1c4660;
}
.aoi-price-card__body {
  padding: 24px 16px;
  text-align: center;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aoi-price-card__body--accent {
  color: #17bfbd;
  font-size: 18px;
  font-weight: 700;
  line-height: 2;
  flex-direction: column;
}
.aoi-price-card__body--accent p {
  margin: 0;
}
.aoi-price-card__amount {
  font-size: 32px;
  font-weight: 700;
  color: #17bfbd;
  margin: 0;
  padding: 8px 0;
  letter-spacing: 0.02em;
}
.aoi-price-card__body--navy {
  color: #1c4660;
  font-size: 16px;
  font-weight: 500;
}
.aoi-price-card__body--navy p {
  margin: 0;
}

/* 注釈 */
.aoi-price__notes {
  margin-top: 16px;
}
.aoi-price__notes p {
  font-size: 12px;
  color: #1c4660;
  opacity: 1;
  text-align: left;
  margin: 0;
  line-height: 1.7;
}

/* お支払い: 2カード横並び (左狭・右広) */
.aoi-price__payment-grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 16px;
}

/* SP */
@media (max-width: 768px) {
  .aoi-price__system-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .aoi-price__plus {
    font-size: 32px;
  }
  .aoi-price__payment-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}