/**
 * 西院整骨院について（page-about）専用スタイル
 *
 * ▼ 前提
 * page-common.css の以下を利用しています：
 * - .saiin-page スコープ（CSS変数、フォント、ベース）
 * - .p-page-hero / .p-breadcrumb
 * - .c-section-head / __label / __title / __line / __lead
 * - .is-pc / .is-sp / .c-gold / .c-gold-strong
 *
 * このファイルにはpage-about固有のセクションのみ記述します。
 */


/* =========================================
   1. 代表挨拶（p-director）
   ========================================= */
.saiin-page .p-director{
  background: #fff;
  padding: 50px 20px;
}

.saiin-page .p-director__profile{
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  background: var(--c-bg-sub);
  padding: 24px 20px;
  border-radius: 4px;
  margin-bottom: 28px;
  position: relative;
}
.saiin-page .p-director__photo{
  flex-shrink: 0;
  width: 100%;
  max-width: 360px;
  position: relative;
}
.saiin-page .p-director__photo::before{
  content: "";
  position: absolute;
  top: -6px;
  left: -6px;
  width: 32px;
  height: 32px;
  border-top: 2px solid var(--c-accent);
  border-left: 2px solid var(--c-accent);
  z-index: 1;
}
.saiin-page .p-director__photo::after{
  content: "";
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 32px;
  height: 32px;
  border-bottom: 2px solid var(--c-accent);
  border-right: 2px solid var(--c-accent);
  z-index: 1;
}
.saiin-page .p-director__photo img{
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: center top;
  border-radius: 4px;
  display: block;
  box-shadow: 0 4px 16px rgba(14,31,60,0.12);
}
.saiin-page .p-director__name-box{ text-align: center; }
.saiin-page .p-director__name-label{
  font-size: 10px;
  color: var(--c-accent);
  letter-spacing: 0.2em;
  margin: 0 0 6px;
  font-weight: 500;
}
.saiin-page .p-director__name-role{
  font-size: 12px;
  color: var(--c-text-sub);
  margin: 0 0 6px;
}
.saiin-page .p-director__name{
  font-size: 22px;
  color: var(--c-primary);
  font-weight: 500;
  margin: 0;
  letter-spacing: 0.08em;
  font-family: var(--ff-heading);
}

.saiin-page .p-director__body p{
  font-size: 15px;
  color: var(--c-text);
  line-height: 1.9;
  margin: 0 0 16px;
}
.saiin-page .p-director__strong{
  color: var(--c-primary) !important;
  font-weight: 700;
}

.saiin-page .p-director__highlight{
  background: var(--c-bg-sub);
  border-left: 4px solid var(--c-accent);
  padding: 18px 20px;
  margin: 22px 0;
}
.saiin-page .p-director__highlight p{
  font-size: 15px;
  color: var(--c-primary) !important;
  line-height: 1.9;
  margin: 0;
  font-weight: 700;
}

@media(min-width:760px){
  .saiin-page .p-director{ padding: 80px 24px; }
  .saiin-page .p-director__body p{ font-size: 16px; }
  .saiin-page .p-director__profile{
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 40px 36px;
    margin-bottom: 40px;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
  }
  .saiin-page .p-director__photo{
    width: 380px;
    flex-shrink: 0;
    max-width: none;
  }
  .saiin-page .p-director__photo::before,
  .saiin-page .p-director__photo::after{
    width: 44px;
    height: 44px;
    border-width: 3px;
  }
  .saiin-page .p-director__name-box{
    text-align: left;
    flex-shrink: 0;
  }
  .saiin-page .p-director__name-label{
    font-size: 11px;
    margin: 0 0 10px;
  }
  .saiin-page .p-director__name-role{
    font-size: 13px;
    margin: 0 0 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(193,159,56,0.4);
  }
  .saiin-page .p-director__name{
    font-size: 28px;
    letter-spacing: 0.1em;
  }
}


/* =========================================
   2. 3つのアプローチ（p-approach）
   ========================================= */
.saiin-page .p-approach{
  background: var(--c-bg-sub);
  padding: 50px 20px;
}
.saiin-page .p-approach__list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 24px;
}
.saiin-page .p-approach__item{
  background: #fff;
  padding: 24px 20px;
  border-top: 3px solid var(--c-accent);
}
.saiin-page .p-approach__head{
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}
.saiin-page .p-approach__num{
  width: 48px;
  height: 48px;
  background: var(--c-primary);
  color: var(--c-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
  font-family: var(--ff-heading);
}
.saiin-page .p-approach__sub{
  font-size: 11px;
  color: var(--c-text-light);
  margin: 0 0 2px;
}
.saiin-page .p-approach__title{
  font-size: 18px;
  color: var(--c-primary);
  font-weight: 500;
  margin: 0;
  letter-spacing: 0.03em;
  font-family: var(--ff-heading);
}
.saiin-page .p-approach__sub-small{
  font-size: 11px;
  color: var(--c-text-sub);
  margin: 2px 0 0;
}
.saiin-page .p-approach__desc{
  font-size: 14px;
  color: var(--c-text-sub);
  line-height: 1.8;
  margin: 0;
}

.saiin-page .p-approach__closing{
  background: var(--c-primary);
  color: #fff;
  padding: 22px 18px;
  margin-top: 24px;
  text-align: center;
}
.saiin-page .p-approach__closing p{
  font-size: 14px;
  color: rgba(255,255,255,0.95);
  line-height: 1.9;
  margin: 0;
}
.saiin-page .p-approach__closing-strong{
  font-size: 16px !important;
  color: #fff !important;
  font-weight: 700;
  line-height: 1.7 !important;
  margin-top: 10px !important;
}

.saiin-page .p-approach__after{
  font-size: 15px;
  color: var(--c-text);
  line-height: 1.9;
  margin: 24px 0 8px;
}
.saiin-page .p-approach__after-strong{
  font-size: 15px;
  color: var(--c-primary);
  font-weight: 700;
  line-height: 1.9;
  margin: 0;
}

@media(min-width:760px){
  .saiin-page .p-approach{ padding: 80px 24px; }
  .saiin-page .p-approach__title{ font-size: 20px; }
  .saiin-page .p-approach__desc{ font-size: 15px; }
  .saiin-page .p-approach__list{
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 36px;
  }
  .saiin-page .p-approach__item{
    padding: 28px 22px;
    display: flex;
    flex-direction: column;
  }
  .saiin-page .p-approach__head{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    margin-bottom: 16px;
  }
  .saiin-page .p-approach__num{
    width: 56px;
    height: 56px;
    font-size: 26px;
  }
  .saiin-page .p-approach__sub,
  .saiin-page .p-approach__title,
  .saiin-page .p-approach__sub-small{ text-align: center; }
  .saiin-page .p-approach__desc{ text-align: left; flex: 1; }
}


/* =========================================
   3. 当院の理念（p-philosophy） — グリーン系の独自カラー
   ========================================= */
.saiin-page .p-philosophy{
  background: linear-gradient(180deg, #F5F8F1 0%, #EBF1E4 100%);
  padding: 50px 20px;
  position: relative;
}
.saiin-page .p-philosophy .c-section-head__label{ color: #7B9D6F; }
.saiin-page .p-philosophy .c-section-head__line{ background: #7B9D6F; }

.saiin-page .p-philosophy__statement{
  background: linear-gradient(135deg, #5C8050 0%, #4A6D40 100%);
  color: #fff;
  padding: 32px 24px;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(92,128,80,0.2);
  margin-bottom: 32px;
}
.saiin-page .p-philosophy__label{
  font-size: 11px;
  color: #D9E8C8;
  letter-spacing: 0.2em;
  margin: 0 0 12px;
  font-weight: 500;
}
.saiin-page .p-philosophy__text{
  font-size: 18px;
  color: #fff;
  font-weight: 500;
  line-height: 1.9;
  margin: 0;
  letter-spacing: 0.05em;
  font-family: var(--ff-heading);
}
.saiin-page .p-philosophy__text .c-philosophy-accent{
  color: #E8F3C5;
  font-weight: 700;
  border-bottom: 1px solid rgba(232,243,197,0.4);
  padding-bottom: 2px;
}

.saiin-page .p-philosophy__keyword{
  text-align: center;
  padding: 8px 0 24px;
  margin-bottom: 8px;
}
.saiin-page .p-philosophy__keyword-sub{
  font-size: 10px;
  color: #7B9D6F;
  margin: 0 0 4px;
  letter-spacing: 0.25em;
  font-weight: 500;
}
.saiin-page .p-philosophy__keyword-main{
  font-size: 22px;
  color: #5C8050;
  font-weight: 500;
  margin: 0;
  letter-spacing: 0.15em;
  font-family: var(--ff-heading);
  display: inline-block;
  position: relative;
  padding: 0 32px;
}
.saiin-page .p-philosophy__keyword-main::before,
.saiin-page .p-philosophy__keyword-main::after{
  content: "";
  position: absolute;
  top: 50%;
  width: 20px;
  height: 1px;
  background: #7B9D6F;
}
.saiin-page .p-philosophy__keyword-main::before{ left: 0; }
.saiin-page .p-philosophy__keyword-main::after{ right: 0; }

.saiin-page .p-philosophy__body p{
  font-size: 15px;
  color: var(--c-text);
  line-height: 1.9;
  margin: 0 0 14px;
}
.saiin-page .p-philosophy__body-strong{
  color: #5C8050 !important;
  font-weight: 700;
}

@media(min-width:760px){
  .saiin-page .p-philosophy{ padding: 80px 24px; }
  .saiin-page .p-philosophy__statement{
    padding: 40px 32px;
    margin-bottom: 40px;
  }
  .saiin-page .p-philosophy__text{ font-size: 24px; }
  .saiin-page .p-philosophy__keyword{ padding: 16px 0 32px; }
  .saiin-page .p-philosophy__keyword-main{ font-size: 28px; padding: 0 44px; }
  .saiin-page .p-philosophy__keyword-main::before,
  .saiin-page .p-philosophy__keyword-main::after{ width: 30px; }
  .saiin-page .p-philosophy__body p{ font-size: 16px; }
}


/* =========================================
   4. 自身の経験（p-story）
   ========================================= */
.saiin-page .p-story{
  background: var(--c-bg-sub);
  padding: 50px 20px;
}
.saiin-page .p-story__body p{
  font-size: 15px;
  color: var(--c-text);
  line-height: 1.9;
  margin: 0 0 14px;
}
.saiin-page .p-story__body-strong{
  color: var(--c-primary) !important;
  font-weight: 700;
}

.saiin-page .p-story__quote{
  background: #fff;
  padding: 18px 20px;
  margin: 22px 0;
  border-left: 3px solid #888;
  font-style: italic;
}
.saiin-page .p-story__quote p{
  font-size: 14px !important;
  color: var(--c-text-sub) !important;
  line-height: 1.8 !important;
  margin: 0 !important;
}

.saiin-page .p-story__turning{
  background: var(--c-primary);
  color: #fff;
  padding: 22px 18px;
  margin: 24px 0;
  text-align: center;
}
.saiin-page .p-story__body .p-story__turning-label,
.saiin-page .p-story__turning-label{
  font-size: 11px !important;
  color: var(--c-accent) !important;
  letter-spacing: 0.15em;
  margin: 0 0 8px !important;
  line-height: 1.6 !important;
}
.saiin-page .p-story__body .p-story__turning-text,
.saiin-page .p-story__turning-text{
  font-size: 16px !important;
  color: #fff !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}
.saiin-page .p-story__turning-text .c-gold{
  color: var(--c-accent) !important;
}

.saiin-page .p-story__call{
  font-size: 17px !important;
  color: var(--c-accent) !important;
  line-height: 1.9 !important;
  margin: 8px 0 24px !important;
  font-weight: 700 !important;
  text-align: center;
}

.saiin-page .p-story__subhead{
  font-family: var(--ff-heading);
  font-size: 18px;
  color: var(--c-primary);
  font-weight: 700;
  line-height: 1.6;
  margin: 36px 0 16px;
  padding: 4px 0 4px 14px;
  border-left: 4px solid var(--c-accent);
}

.saiin-page .p-story__staff-photo{ margin: 24px 0 0; }
.saiin-page .p-story__staff-photo img{
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}

@media(min-width:760px){
  .saiin-page .p-story{ padding: 80px 24px; }
  .saiin-page .p-story__body p{ font-size: 16px; }
  .saiin-page .p-story__subhead{ font-size: 22px; }
  .saiin-page .p-story__turning-text{ font-size: 20px; }
  .saiin-page .p-story__call{ font-size: 20px !important; }
}


/* =========================================
   5. 3つのお約束（p-promise）
   ========================================= */
.saiin-page .p-promise{
  background: #fff;
  padding: 50px 20px;
}
.saiin-page .p-promise__intro{
  font-size: 15px;
  color: var(--c-text);
  line-height: 1.9;
  margin: 0 0 16px;
}
.saiin-page .p-promise__intro-strong{
  font-size: 15px;
  color: var(--c-primary);
  font-weight: 700;
  line-height: 1.9;
  margin: 0 0 24px;
}

.saiin-page .p-promise__list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.saiin-page .p-promise__item{
  background: var(--c-bg-sub);
  padding: 22px 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.saiin-page .p-promise__badge{
  background: var(--c-accent);
  color: #fff;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  flex-shrink: 0;
  align-self: flex-start;
  white-space: nowrap;
}
.saiin-page .p-promise__title{
  font-size: 16px;
  color: var(--c-primary);
  font-weight: 500;
  margin: 0 0 10px;
  line-height: 1.6;
  font-family: var(--ff-heading);
}
.saiin-page .p-promise__desc{
  font-size: 14px;
  color: var(--c-text-sub);
  line-height: 1.8;
  margin: 0;
}

@media(min-width:760px){
  .saiin-page .p-promise{ padding: 80px 24px; }
  .saiin-page .p-promise__intro,
  .saiin-page .p-promise__intro-strong{ font-size: 16px; }
  .saiin-page .p-promise__title{ font-size: 18px; }
  .saiin-page .p-promise__desc{ font-size: 15px; }
}


/* =========================================
   6. 初めての方へ（p-first-visit）
   ========================================= */
.saiin-page .p-first-visit{
  background: var(--c-primary);
  color: #fff;
  padding-top: 50px;
  padding-bottom: 0;
}
.saiin-page .p-first-visit__inner{ padding: 0 20px; }

.saiin-page .p-first-visit__lead{
  font-size: 14px;
  color: rgba(255,255,255,0.9);
  line-height: 1.9;
  margin: 0 0 10px;
}
.saiin-page .p-first-visit__lead + .p-first-visit__lead{ margin-bottom: 20px; }

.saiin-page .p-first-visit__worry{
  background: rgba(255,255,255,0.05);
  padding: 16px 18px;
  margin: 0 0 20px;
  border-left: 3px solid var(--c-accent);
}
.saiin-page .p-first-visit__worry p{
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  line-height: 2;
  margin: 0;
}

.saiin-page .p-first-visit__text{
  font-size: 14px;
  color: rgba(255,255,255,0.9);
  line-height: 1.9;
  margin: 0 0 18px;
}
.saiin-page .p-first-visit__text-strong{
  font-size: 15px;
  color: var(--c-accent);
  font-weight: 700;
  line-height: 1.9;
  margin: 0 0 22px;
}
.saiin-page .p-first-visit__text-italic{
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  line-height: 1.9;
  margin: 0 0 26px;
  font-style: italic;
}

.saiin-page .p-first-visit__criteria{
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.saiin-page .p-first-visit__criteria li{
  background: rgba(193,159,56,0.1);
  border: 1px solid rgba(193,159,56,0.3);
  padding: 14px 16px;
  font-size: 14px;
  color: #fff;
  font-weight: 700;
  line-height: 1.6;
}

.saiin-page .p-first-visit__training{
  background: rgba(193,159,56,0.15);
  border: 1px solid var(--c-accent);
  margin: 24px 0;
  overflow: hidden;
}
.saiin-page .p-first-visit__training-top{
  padding: 24px 16px 22px;
  text-align: center;
}
.saiin-page .p-first-visit__training-label{
  font-size: 11px;
  color: var(--c-accent);
  margin: 0 0 6px;
  letter-spacing: 0.15em;
}
.saiin-page .p-first-visit__training-num{
  font-size: 46px;
  color: var(--c-accent);
  font-weight: 700;
  margin: 0;
  line-height: 1;
  letter-spacing: 0.02em;
  font-family: var(--ff-heading);
}
.saiin-page .p-first-visit__training-num span{
  font-size: 18px;
  margin-left: 4px;
}
.saiin-page .p-first-visit__training-text{
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  margin: 12px 0 0;
  line-height: 1.7;
}
.saiin-page .p-first-visit__training-photo img{
  width: 100%;
  height: auto;
  display: block;
}
.saiin-page .p-first-visit__training-caption{
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  text-align: center;
  padding: 10px 12px;
  background: rgba(0,0,0,0.3);
  margin: 0;
  letter-spacing: 0.05em;
}

.saiin-page .p-first-visit__closing{
  background: rgba(255,255,255,0.05);
  padding: 28px 20px;
  text-align: center;
  border: 1px solid rgba(193,159,56,0.4);
  position: relative;
  margin: 28px 0 0;
}
.saiin-page .p-first-visit__closing-quote{
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-primary);
  padding: 0 14px;
  font-size: 28px;
  color: var(--c-accent);
  line-height: 1;
  font-family: var(--ff-heading);
}
.saiin-page .p-first-visit__closing-quote-text{
  font-size: 24px;
  color: var(--c-accent);
  font-weight: 500;
  margin: 10px 0 14px;
  letter-spacing: 0.05em;
  line-height: 1.5;
  font-family: var(--ff-heading);
}
.saiin-page .p-first-visit__closing-desc{
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  line-height: 1.9;
  margin: 0 0 16px;
}
.saiin-page .p-first-visit__closing-line{
  height: 1px;
  background: rgba(193,159,56,0.3);
  margin: 18px 0;
}
.saiin-page .p-first-visit__closing-final{
  font-size: 15px;
  color: #fff;
  font-weight: 700;
  line-height: 1.9;
  margin: 0;
}

.saiin-page .p-first-visit__collage{
  margin: 24px -20px -28px;
  overflow: hidden;
}
.saiin-page .p-first-visit__collage img{
  width: 100%;
  height: auto;
  display: block;
}

.saiin-page .p-first-visit__sign{ padding: 20px 20px 40px; }
.saiin-page .p-first-visit__sign p{
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  text-align: right;
  margin: 0;
}

@media(min-width:760px){
  .saiin-page .p-first-visit{ padding-top: 80px; }
  .saiin-page .p-first-visit__lead,
  .saiin-page .p-first-visit__text{ font-size: 15px; }
  .saiin-page .p-first-visit__text-strong{ font-size: 17px; }
  .saiin-page .p-first-visit__criteria li{ font-size: 15px; }
  .saiin-page .p-first-visit__training-num{ font-size: 56px; }
  .saiin-page .p-first-visit__training-num span{ font-size: 22px; }
  .saiin-page .p-first-visit__closing-quote-text{ font-size: 28px; }
  .saiin-page .p-first-visit__closing-final{ font-size: 17px; }
}