/* ABOUT専用CSS：Suudon/custom-css/about.css */
.about-page {
  --about-blue: #0797c7;
  --about-blue-dark: #087fa7;
  --about-pale: #acd9e7;
  --about-text: #45494c;
  position: relative;
  width: 100vw;
  max-width: none;
  margin: 0 calc(50% - 50vw);
  margin-top: 0 !important;
  overflow: hidden;
  color: var(--about-text);
  background: #fff;
  font-family: "Noto Sans JP", "Yu Gothic", "游ゴシック", sans-serif;
  line-height: 1.9;
}
.about-page *, .about-page *::before, .about-page *::after { box-sizing: border-box; }
.about-page h1, .about-page h2, .about-page h3, .about-page p { margin-top: 0; }
.about-page h1, .about-page h2, .about-page h3 { font-weight: 200; }
.about-page p { margin-bottom: 0; }

/* ヘッダー画像 */
.about-hero {
  position: relative;
  min-height: 230px;
  color: #fff;
  background: url("https://piyo-chayama.site/wp-content/uploads/2026/10/header_img5.png") center / 60% repeat;
}
.about-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: min(840px, calc(100% - 64px));
  min-height: 230px;
  margin: 0 auto;
  padding: 32px 0;
}
.about-hero-heading { position: relative; z-index: 1; }
.about-kicker { margin: 0; font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 300; letter-spacing: .16em; line-height: 1.25; }
.about-short-line { display: block; width: 62px; height: 2px; margin: 14px 0 10px; background: currentColor; }
.about-hero-heading h1 { margin: 0; font-size: 1rem; font-weight: 300; letter-spacing: .12em; }
.about-hero-message { margin: 0; font-size: .9rem; font-weight: 300; line-height: 1.8; }

/* 本文 */
.about-main { position: relative; width: min(876px, calc(100% - 64px)); margin: 0 auto; padding: 48px 0 92px; }
.about-intro { position: relative; padding: 0 0 48px; }
.about-intro.about-intro h2 {
  margin: 0 0 10px;
  color: var(--about-blue);
  font-size: clamp(1.35rem, 2.97vw, 2.025rem);
  font-weight: 200;
  line-height: 1.55;
  letter-spacing: .03em;
}

h2 { margin: 0 0 10px; color: var(--about-blue); font-size: clamp(1.3rem, 3.3vw, 2.0rem); font-weight: 200; line-height: 1.55; letter-spacing: .03em; }
.about-intro .about-short-line { margin: 15px 0 20px; background: var(--about-blue); }
.about-intro p { font-size: 1rem; line-height: 1.95; letter-spacing: .015em; }

/* My Style */
.about-section-title { margin: 0 0 28px; text-align: center; }
.about-section-title h2 { margin: 0; color: var(--about-pale); font-size: clamp(2.4rem, 5vw, 3.2rem); font-weight: 200; letter-spacing: .1em; line-height: 1.3; }
.about-section-title .about-short-line { width: 54px; height: 1px; margin: 18px auto 0; background: #8bcfe3; }

/* 3つのスタイル紹介 */
.about-style { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 28px; align-items: start; margin: 0 0 44px; }
.about-style-number { min-height: 160px; border-right: 1px solid #69c5e1; color: var(--about-pale); font-family: Georgia, "Times New Roman", serif; font-size: clamp(6rem, 12vw, 9.5rem); font-weight: 400; line-height: .95; text-align: left; }
.about-style-content { padding-top: 6px; }
.about-style-content h3 { margin: 0 0 12px; color: var(--about-blue); font-size: clamp(1.1rem, 2.2vw, 1.45rem); font-weight: 300; line-height: 1.55; }
.about-style-content p { font-size: .95rem; line-height: 1.9; }
.about-style-two { grid-template-columns: minmax(0, 1fr) 92px; }
.about-style-two .about-style-number { grid-column: 2; grid-row: 1; padding-left: 24px; border-right: 0; border-left: 1px solid #69c5e1; }
.about-style-two .about-style-content { grid-column: 1; grid-row: 1; text-align: right; }
.about-style-two .about-style-content h3 { margin-bottom: 14px; }
.about-style-three { margin-bottom: 0; }

/* フッター画像（HTML側に class="about-footer" がある場合） */

/* フッター */
.about-footer {
  position: relative;
  min-height: 180px;
  padding: 48px max(40px, calc((100% - 1064px) / 2));
  color: #fff;
  background: url("https://piyo-chayama.site/wp-content/uploads/2026/10/footer_img5.png") center / 60% repeat;
}

.about-footer-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  max-width: 1064px;
  margin: 0 auto;
}

.about-footer-brand p {
  margin: 0;
  color: #fff;
}

.about-footer-name {
  font-family: "Noto Sans JP", "Yu Gothic", "游ゴシック", sans-serif;
  font-size: 1.2rem;
  font-weight: 200;
  letter-spacing: .04em;
}

.about-footer-copy {
  font-size: .8rem;
  font-weight: 200;
}

.about-footer-sns {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.about-footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.0;
}

.about-footer-nav a {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 1.0;
}

.about-page .about-footer-nav a,
.about-page .about-footer-nav a:visited,
.about-page .about-footer-nav a:hover {
  color: #fff;
  font-weight: 200;
  font-size: .8rem;
  text-decoration: none;
}

/* WordPress側のページタイトルが二重表示される場合 */
body.page .entry-header { display: none; }

@media (min-width: 1200px) {
  .about-hero-inner { width: min(840px, calc(100% - 80px)); }
}
@media (max-width: 700px) {
  .about-hero, .about-hero-inner { min-height: 220px; }
  .about-hero-inner { align-items: flex-start; flex-direction: column; justify-content: center; gap: 18px; width: calc(100% - 40px); padding: 28px 0; }
  .about-kicker { font-size: 2rem; }
  .about-hero-heading .about-short-line { margin: 9px 0 6px; }
  .about-hero-message { align-self: flex-end; max-width: 245px; font-size: .8rem; }
  .about-main { width: calc(100% - 40px); padding: 38px 0 64px; }
  .about-intro { padding-bottom: 38px; }
  .about-intro h2 { font-size: 1.45rem; }
  .about-intro p { font-size: .9rem; }
  .about-desktop-only { display: none; }
  .about-section-title { margin-bottom: 28px; }
  .about-section-title h2 { font-size: 2.25rem; }
  .about-style, .about-style-two { grid-template-columns: 58px minmax(0, 1fr); column-gap: 16px; margin-bottom: 34px; }
  .about-style-number, .about-style-two .about-style-number { grid-column: 1; grid-row: 1; min-height: 125px; padding: 0; border-right: 1px solid #69c5e1; border-left: 0; font-size: 6.3rem; }
  .about-style-content, .about-style-two .about-style-content { grid-column: 2; grid-row: 1; padding-top: 4px; text-align: left; }
  .about-style-content h3 { font-size: 1.05rem; }
  .about-style-content p { font-size: .85rem; line-height: 1.9; }
  .about-style-content p br { display: none; }
  .about-footer { min-height: 140px; }
}
@media (max-width: 380px) {
  .about-hero-message { align-self: flex-start; }
  .about-style, .about-style-two { column-gap: 12px; grid-template-columns: 48px minmax(0, 1fr); }
  .about-style-number, .about-style-two .about-style-number { font-size: 5.5rem; }
}

/* スマホ用：ヘッダー・フッターの背景調整 */
@media screen and (max-width: 767px) {
.about-hero {
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center;
}

.about-footer {
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center;
}
}