@charset "UTF-8";

/* =========================================================
   PAGE 04｜店舗・院長紹介
   PART 1：共通設定・メイン・店舗紹介・院長紹介
   スマホファースト
========================================================= */


/* =========================================================
   01. 4ページ目全体
========================================================= */

.page4 {
  --p4-white: #ffffff;
  --p4-text: #2c2823;
  --p4-muted: #746d64;
  --p4-gold: #b88932;
  --p4-gold-dark: #936718;
  --p4-line: rgba(184, 137, 50, 0.32);
  --p4-beige: #faf7f1;
  --p4-shadow: 0 12px 32px rgba(67, 49, 27, 0.08);

  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;

  background: var(--p4-white);
  color: var(--p4-text);

  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "Noto Serif JP",
    serif;

  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

.page4,
.page4 *,
.page4 *::before,
.page4 *::after {
  box-sizing: border-box;
}

.page4 img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

.page4 p,
.page4 h2,
.page4 h3,
.page4 figure {
  margin-top: 0;
}


/* =========================================================
   02. 共通セクション見出し
========================================================= */

.page4-section-heading {
  width: 100%;
  margin: 0 auto 30px;
  padding: 0 20px;
  text-align: center;
}

.page4-section-heading__en {
  margin: 0 0 7px;

  color: var(--p4-gold-dark);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.18em;
}

.page4-section-heading h2 {
  margin: 0;

  color: var(--p4-text);

  font-size: 20px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.07em;
}

.page4-section-heading > span {
  display: block;

  width: 42px;
  height: 1px;

  margin: 15px auto 0;

  background: var(--p4-gold);
}


/* =========================================================
   03. メインビジュアル
========================================================= */

.page4-hero {
  position: relative;

  width: 100%;
  padding: 25px 0 35px;

  background: #ffffff;
}


/* ---------------------------------------------------------
   メイン写真
--------------------------------------------------------- */

.page4-hero__image {
  position: relative;

  width: calc(100% - 22px);
  height: clamp(245px, 69vw, 345px);

  margin: 18px 0 0 auto;

  overflow: hidden;
  background: #f1ede7;
}

.page4-hero__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;
}

.page4-hero__image::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.34) 0%,
      rgba(255, 255, 255, 0.07) 36%,
      transparent 64%
    );
}


/* ---------------------------------------------------------
   メイン文章
--------------------------------------------------------- */

.page4-hero__copy {
  position: relative;
  z-index: 2;

  width: calc(100% - 48px);

  margin: -34px auto 0;
  padding: 29px 23px 33px;

  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--p4-shadow);
}

.page4-number{
    display:none;
}
.page4-short-line{
    display:none;
}

.page4-hero__eyebrow {
  margin: 0 0 8px;

  color: var(--p4-gold-dark);

  font-size: 20px;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.06em;
}

.page4-hero__title {
  margin: 0;

  color: var(--p4-text);

  font-size: clamp(35px, 10vw, 47px);
  font-weight: 500;
  line-height: 1.48;
  letter-spacing: 0.07em;
}

.page4-hero__access {
  margin: 22px 0 0;
  padding: 3px 0 3px 15px;

  border-left: 2px solid var(--p4-gold);

  color: var(--p4-gold-dark);

  font-size: 17px;
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: 0.04em;
}

.page4-hero__lead {
  margin: 19px 0 0;

  color: var(--p4-text);

  font-size: 15px;
  line-height: 2.05;
  letter-spacing: 0.025em;
}


/* =========================================================
   04. 店舗紹介
========================================================= */

.page4-clinic {
  width: 100%;
  padding: 28px 20px 60px;
  background: #ffffff;
}

.page4-clinic__content {
  width: 100%;
  max-width: 680px;

  margin: 0 auto;
  padding: 28px 22px;

  border-top: 1px solid var(--p4-line);
  border-bottom: 1px solid var(--p4-line);

  background: #ffffff;
}

.page4-clinic__content p {
  margin: 0;

  color: var(--p4-text);

  font-size: 15px;
  line-height: 2.08;
  letter-spacing: 0.025em;
}

.page4-clinic__content p + p {
  margin-top: 16px;
}


/* =========================================================
   05. 院長紹介
========================================================= */

.page4-director {
  width: 100%;

  padding: 15px 17px 76px;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fffdf9 52%,
      #ffffff 100%
    );
}


/* ---------------------------------------------------------
   スマホ：左に院長写真、右にプロフィール
--------------------------------------------------------- */

.page4-director__layout {
  display: grid;

  grid-template-columns:
    minmax(110px, 34%)
    minmax(0, 1fr);

  column-gap: 17px;
  row-gap: 20px;

  width: 100%;
  max-width: 980px;

  margin: 0 auto;

  align-items: start;
}


/* ---------------------------------------------------------
   院長写真 共通
--------------------------------------------------------- */

.page4-director__photo {
  position: relative;

  overflow: hidden;
  background: #eee9e1;
}

.page4-director__photo img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* ---------------------------------------------------------
   左：院長写真1
--------------------------------------------------------- */

.page4-director__photo--main {
  grid-column: 1;
  grid-row: 1;

  width: 100%;
  aspect-ratio: 0.68 / 1;

  box-shadow: 0 10px 27px rgba(66, 47, 24, 0.09);
}

.page4-director__photo--main img {
  object-position: center top;
}


/* ---------------------------------------------------------
   右：プロフィール
--------------------------------------------------------- */

.page4-director__profile {
  grid-column: 2;
  grid-row: 1 / span 2;

  min-width: 0;
}

.page4-director__name-area {
  width: 100%;
}

.page4-director__label {
  margin: 0 0 3px;

  color: var(--p4-gold-dark);

  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.09em;
}

.page4-director__name{
    font-size: clamp(22px, 6vw, 30px);
    font-weight: 500;
    letter-spacing: .05em;
}

.page4-director__career {
  margin: 9px 0 0;

  color: var(--p4-gold-dark);

  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.02em;
}

.page4-director__career span {
  display: inline-block;

  margin: 0 5px;

  font-weight: 400;
}


/* ---------------------------------------------------------
   国家資格
--------------------------------------------------------- */

.page4-director__license {
  margin-top: 17px;
}

.page4-director__license-title{

    display:block;

    margin-bottom:8px;

    padding:0;

    background:none;

    color:var(--p4-gold-dark);

    font-size:14px;

    font-weight:700;

    letter-spacing:.08em;

}
.page4-director__license > p:last-child {
  margin: 0;

  color: var(--p4-text);

  font-size: 13px;
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: 0.015em;
}


/* ---------------------------------------------------------
   役職
--------------------------------------------------------- */

.page4-director__position {

    margin: 15px 0 18px;
    padding: 0;

    border: none;
    background: transparent;

    color: #444;

    font-size: 13px;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: .02em;

}


/* ---------------------------------------------------------
   経歴文章
--------------------------------------------------------- */

.page4-director__text {
  margin-top: 18px;
}

.page4-director__text p {
  margin: 0;

  color: var(--p4-text);

  font-size: 13px;
  line-height: 2;
  letter-spacing: 0.015em;
}

.page4-director__text p + p {
  margin-top: 12px;
}

.page4-director__text .page4-director__message {
  color: var(--p4-gold-dark);
  font-weight: 600;
}


/* ---------------------------------------------------------
   左下：院長写真2
--------------------------------------------------------- */

.page4-director__photo--sub {
  grid-column: 1;
  grid-row: 2;

  width: 100%;
  aspect-ratio: 0.78 / 1;

  margin-top: 2px;
}

.page4-director__photo--sub img {
  object-position: center top;
}


/* =========================================================
   06. 小さいスマホ
========================================================= */

@media screen and (max-width: 370px) {

  .page4-hero__copy {
    width: calc(100% - 24px);

    padding-right: 18px;
    padding-left: 18px;
  }

  .page4-director {
    padding-right: 12px;
    padding-left: 12px;
  }

  .page4-director__layout {
    grid-template-columns:
      minmax(96px, 31%)
      minmax(0, 1fr);

    column-gap: 13px;
  }

  .page4-director__name {
    font-size: 13px;
  }

  .page4-director__career,
  .page4-director__license > p:last-child,
  .page4-director__position,
  .page4-director__text p {
    font-size: 12px;
  }
}


/* =========================================================
   07. タブレット
========================================================= */

@media screen and (min-width: 700px) {

  .page4-hero {
    padding-bottom: 80px;
  }

  .page4-hero__image {
    width: calc(100% - 70px);
    height: 470px;

    margin-top: 30px;
  }

  .page4-hero__copy {
    width: min(640px, calc(100% - 90px));

    margin-top: -72px;
    padding: 44px 50px 46px;
  }

  .page4-hero__eyebrow {
    font-size: 25px;
  }

  .page4-hero__title {
    font-size: 52px;
  }

  .page4-hero__access {
    font-size: 19px;
  }

  .page4-hero__lead {
    font-size: 16px;
  }

  .page4-clinic {
    padding-top: 84px;
    padding-bottom: 82px;
  }

  .page4-clinic__content {
    padding: 35px 42px;
  }

  .page4-clinic__content p {
    font-size: 16px;
  }

  .page4-director {
    padding: 82px 34px 92px;
  }

  .page4-director__layout {
    grid-template-columns:
      minmax(190px, 30%)
      minmax(0, 1fr);

    column-gap: 34px;
    row-gap: 28px;
  }

  .page4-director__name {
    font-size: 20px;
  }

  .page4-director__career {
    font-size: 16px;
  }

  .page4-director__license > p:last-child,
  .page4-director__position,
  .page4-director__text p {
    font-size: 14px;
  }
}


/* =========================================================
   08. PC
========================================================= */

@media screen and (min-width: 1000px) {

  .page4 {
    overflow: visible;
  }

  .page4-hero {
    display: grid;

    grid-template-columns:
      minmax(420px, 42%)
      minmax(0, 58%);

    min-height: 610px;
    max-width: 1400px;

    margin: 0 auto;
    padding: 0;

    align-items: stretch;
  }

  .page4-hero__copy {
    grid-column: 1;
    grid-row: 1;

    align-self: center;

    z-index: 3;

    width: auto;
    max-width: 540px;

    margin:
      0
      0
      0
      max(48px, calc((100vw - 1280px) / 2));

    padding: 45px 55px 50px 0;

    background: transparent;
    box-shadow: none;
  }

  .page4-hero__image {
    grid-column: 2;
    grid-row: 1;

    width: 100%;
    height: 100%;
    min-height: 610px;

    margin: 0;
  }

  .page4-hero__image::after {
    background:
      linear-gradient(
        90deg,
        #ffffff 0%,
        rgba(255, 255, 255, 0.82) 9%,
        rgba(255, 255, 255, 0.2) 34%,
        transparent 56%
      );
  }

  .page4-hero__title {
    font-size: clamp(52px, 4.5vw, 68px);
  }

  .page4-clinic {
    padding-top: 98px;
    padding-bottom: 94px;
  }

  .page4-director {
    padding-top: 95px;
    padding-bottom: 105px;
  }

  .page4-director__layout {
    grid-template-columns:
      minmax(220px, 25%)
      minmax(440px, 1fr)
      minmax(185px, 21%);

    column-gap: 42px;

    max-width: 1180px;
  }

  .page4-director__photo--main {
    grid-column: 1;
    grid-row: 1;

    aspect-ratio: 0.68 / 1;
  }

  .page4-director__profile {
    grid-column: 2;
    grid-row: 1;
  }

  .page4-director__photo--sub {
    grid-column: 3;
    grid-row: 1;

    aspect-ratio: 0.72 / 1;

    margin-top: 105px;
  }

  .page4-director__name {
    font-size: 30px;
  }

  .page4-director__career {
    font-size: 17px;
  }

  .page4-director__license > p:last-child,
  .page4-director__position,
  .page4-director__text p {
    font-size: 15px;
  }
}

/* =========================================================
   PART 1 END
   この下へPART 2を続けて貼り付けます
========================================================= */

/* =========================================================
   PAGE 04｜店舗・院長紹介
   PART 2：4枚写真コラージュ・予約導線
========================================================= */


/* =========================================================
   09. ギャラリー全体
========================================================= */

.page4-gallery {
  width: 100%;
  padding: 25px 16px 78px;
  background: #ffffff;
}

.page4-gallery__lead {
  margin: -7px auto 36px;
  padding: 0 15px;

  color: var(--p4-text);

  text-align: center;
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.025em;
}


/* =========================================================
   10. 4枚写真コラージュ
========================================================= */

/*
  見本テンプレート

  左上：縦長・大きめ
  右上：横長
  左下：横長
  右下：縦長

  中央に白い余白を残し、
  4枚の縦横ラインをそろえすぎない配置
*/

.page4-collage {
  position: relative;

  width: 100%;
  max-width: 760px;
  aspect-ratio: 1 / 1.08;

  margin: 0 auto;

  background: #ffffff;
}

.page4-collage__item {
  position: absolute;

  margin: 0;
  padding: 0;

  overflow: hidden;

  background: #f0ece6;
  box-shadow: 0 8px 22px rgba(54, 40, 23, 0.08);
}

.page4-collage__item img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* ---------------------------------------------------------
   左上：縦長・大
--------------------------------------------------------- */

.page4-collage__item--1 {
  top: 0;
  left: 0;

  width: 40%;
  height: 52%;
}

.page4-collage__item--1 img {
  object-position: center center;
}


/* ---------------------------------------------------------
   右上：横長
--------------------------------------------------------- */

.page4-collage__item--2 {
  top: 5%;
  right: 0;

  width: 54%;
  height: 34%;
}

.page4-collage__item--2 img {
  object-position: center center;
}


/* ---------------------------------------------------------
   左下：横長
--------------------------------------------------------- */

.page4-collage__item--3 {
  left: 4%;
  bottom: 0;

  width: 59%;
  height: 35%;
}

.page4-collage__item--3 img {
  object-position: center center;
}


/* ---------------------------------------------------------
   右下：縦長
--------------------------------------------------------- */

.page4-collage__item--4 {
  right: 3%;
  bottom: 3%;

  width: 31%;
  height: 47%;
}

.page4-collage__item--4 img {
  object-position: center center;
}

/* 菊池 芳人だけ小さくする */
.page4 .page4-director__name{
    font-size:18px !important;
    line-height:1.4 !important;
    letter-spacing:0.03em !important;
}

.page4-clinic {
  padding-bottom: 8px !important;
}

.page4-director {
  padding-top: 12px !important;
}


.page4-director .page4-section-heading__en {
  display: none !important;
}


/* スマホだけ院長名を小さくする */
@media screen and (max-width: 767px){

  .page4-director__name{
    font-size:15px !important;
    line-height:1.4 !important;
    letter-spacing:0.03em;
  }

}

/* 菊池 芳人｜スマホ表示を強制的に小さくする */
@media screen and (max-width: 999px) {
  #page4 h3.page4-director__name {
    font-size: 16px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.02em !important;
  }
}


/* スマホだけ「治療から美容まで」の上を詰める */
@media screen and (max-width: 767px) {

  .page4-gallery {
    padding-top: 10px !important;
  }

}

/* =========================================================
   PAGE 04｜アクセス・店舗情報
========================================================= */

.page4-access {
  width: 100%;
  padding: 45px 18px 75px;
  background: #ffffff;
  color: var(--p4-text);
}


/* =========================================================
   見出し
========================================================= */

.page4-access__heading {
  max-width: 720px;
  margin: 0 auto 30px;
  text-align: center;
}

.page4-access__heading h2 {
  margin: 0;

  font-size: 23px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.page4-access__heading > span {
  display: block;

  width: 42px;
  height: 1px;

  margin: 14px auto 17px;

  background: var(--p4-gold);
}

.page4-access__heading p {
  margin: 0;

  font-size: 14px;
  line-height: 1.95;
  letter-spacing: 0.025em;
}


/* =========================================================
   Googleマップ
========================================================= */

.page4-access__map {
  width: 100%;
  max-width: 900px;
  height: 290px;

  margin: 0 auto 38px;

  overflow: hidden;

  background: #f2f2f2;
}

.page4-access__map iframe {
  display: block;

  width: 100%;
  height: 100%;

  border: 0;
}


/* =========================================================
   営業時間・支払い方法
========================================================= */

.page4-access__information {
  width: 100%;
  max-width: 760px;

  margin: 0 auto;
}

.page4-access__block {
  padding: 28px 0;

  border-top: 1px solid var(--p4-line);
}

.page4-access__block:last-child {
  border-bottom: 1px solid var(--p4-line);
}

.page4-access__block h3 {
  margin: 0 0 20px;

  color: var(--p4-gold-dark);

  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.06em;
}


/* 営業時間 */

.page4-hours {
  width: 100%;
}

.page4-hours__row {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 14px;

  padding: 13px 0;

  border-bottom: 1px solid #eee9e2;
}

.page4-hours__row:last-child {
  border-bottom: 0;
}

.page4-hours__label {
  margin: 0;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
}

.page4-hours__value {
  margin: 0;

  font-size: 14px;
  line-height: 1.7;
}

.page4-hours__value span {
  display: block;

  color: var(--p4-muted);

  font-size: 12px;
}


/* 支払い方法 */

.page4-payment__text {
  margin: 0;

  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.02em;
}


/* =========================================================
   道順
========================================================= */

.page4-route {
  width: 100%;
  max-width: 760px;

  margin: 55px auto 0;
}

.page4-route__heading {
  margin-bottom: 22px;
  text-align: center;
}

.page4-route__heading h3 {
  margin: 0 0 11px;

  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.page4-route__heading p {
  margin: 0;

  font-size: 14px;
  line-height: 1.9;
}

.page4-route__image {
  width: 100%;
  overflow: hidden;
  background: #f4f2ee;
}

.page4-route__image img {
  width: 100%;
  height: auto;
}

.page4-route__button {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: min(100%, 420px);
  min-height: 58px;

  margin: 25px auto 0;
  padding: 12px 48px;

  border: 1px solid var(--p4-gold);
  border-radius: 999px;

  background: #ffffff;
  color: var(--p4-gold-dark);

  text-decoration: none;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

.page4-route__button span:last-child {
  position: absolute;
  right: 24px;

  font-family: Arial, sans-serif;
  font-size: 26px;
  font-weight: 300;
}


/* =========================================================
   看板・入口の注意案内
========================================================= */

.page4-entrance {
  width: 100%;
  max-width: 760px;

  margin: 60px auto 0;
  padding: 30px 20px;

  background: #faf8f4;
}

.page4-entrance__text h3 {
  margin: 0 0 18px;

  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.page4-entrance__text p {
  margin: 0;

  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.02em;
}

.page4-entrance__text p + p {
  margin-top: 12px;
}

.page4-entrance__text strong {
  color: var(--p4-gold-dark);
  font-weight: 600;
}


/* 看板写真 */

.page4-entrance__photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;

  margin-top: 25px;
}

.page4-entrance__photos figure {
  margin: 0;
}

.page4-entrance__photos img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;

  object-fit: contain;
  object-position: center;

  opacity: 1;
  filter: none;
}

.page4-entrance__photos figcaption {
  margin-top: 8px;

  color: var(--p4-muted);

  text-align: center;
  font-size: 11px;
  line-height: 1.6;
}

.page4-entrance__note {
  margin: 20px 0 0;

  color: var(--p4-gold-dark);

  text-align: center;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.8;
}


/* =========================================================
   小さいスマホ
========================================================= */

@media screen and (max-width: 370px) {

  .page4-access {
    padding-right: 13px;
    padding-left: 13px;
  }

  .page4-hours__row {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
  }

  .page4-hours__label,
  .page4-hours__value,
  .page4-payment__text,
  .page4-entrance__text p {
    font-size: 13px;
  }

  .page4-entrance {
    padding-right: 15px;
    padding-left: 15px;
  }
}


/* =========================================================
   タブレット以上
========================================================= */

@media screen and (min-width: 700px) {

  .page4-access {
    padding: 70px 34px 100px;
  }

  .page4-access__heading h2 {
    font-size: 27px;
  }

  .page4-access__map {
    height: 380px;
    margin-bottom: 50px;
  }

  .page4-access__block {
    padding: 35px 0;
  }

  .page4-hours__row {
    grid-template-columns: 150px minmax(0, 1fr);
    padding: 16px 0;
  }

  .page4-hours__label,
  .page4-hours__value,
  .page4-payment__text {
    font-size: 15px;
  }

  .page4-hours__value span {
    display: inline;
    margin-left: 8px;
    font-size: 13px;
  }

  .page4-route {
    margin-top: 75px;
  }

  .page4-entrance {
    margin-top: 75px;
    padding: 42px;
  }

  .page4-entrance__photos {
    gap: 25px;
    margin-top: 32px;
  }
}


/* =========================================================
   PC
========================================================= */

@media screen and (min-width: 1000px) {

  .page4-access {
    padding-top: 90px;
    padding-bottom: 120px;
  }

  .page4-access__map {
    max-width: 980px;
    height: 430px;
  }

  .page4-access__information {
    max-width: 900px;
  }

  .page4-route,
  .page4-entrance {
    max-width: 900px;
  }

  .page4-entrance {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 45px;
    align-items: center;
  }

  .page4-entrance__photos {
    margin-top: 0;
  }

  .page4-entrance__note {
    grid-column: 1 / -1;
  }
}

.page4-hours__value a {
  color: var(--p4-gold-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.page4-hours__value a:active {
  opacity: 0.7;
}

.page4-phone-note{
    margin-top:8px;

    color:#777;

    font-size:12px;
    line-height:1.8;
}

.page4-webreserve{
    color:#b07b28;
    font-weight:700;
    text-decoration:underline;
    text-underline-offset:3px;
}

.page4-webreserve:hover{
    opacity:.8;
}

/* ==========================================
   PAGE4 アクセス・目印
========================================== */

.page4-access-points {
  width: min(calc(100% - 40px), 620px);
  margin: 0 auto;
  text-align: center;
}

.page4-access-points__lead {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 2;
}

.page4-access-points__title {
  display: inline-block;
  margin: 0 0 12px;
  color: var(--p4-gold-dark);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.page4-access-points__list {
  width: fit-content;
  margin: 0 auto;
  padding: 0;
  list-style: none !important;
  text-align: left;
}

.page4-access-points__list li {
  position: relative;
  margin: 7px 0;
  padding-left: 22px;
  list-style: none !important;
  font-size: 13px;
  line-height: 1.8;
}

.page4-access-points__list li::before {
  content: "";
  position: absolute;
  top: 0.85em;
  left: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--p4-gold);
  transform: translateY(-50%);
}

@media screen and (max-width: 680px) {

  .page4-access-points {
    width: calc(100% - 32px);
  }

  .page4-access-points__lead {
    font-size: 13px;
  }

  .page4-access-points__list {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding: 0 12px;
    box-sizing: border-box;
  }

  .page4-access-points__list li {
    padding-left: 20px;
    padding-right: 4px;
    font-size: 12px;
    overflow-wrap: anywhere;
  }

  .page4-access-points__list li::before {
    left: 3px;
    width: 5px;
    height: 5px;
  }
}
/* =========================================================
   PAGE 04 END
========================================================= */