/* =======================================
   訪問看護・介護・美容ページ nursing.css
   - sec_point（特徴）
   - point（特徴ブロック）
   - point-container
   - hair-what / hair-service
   - service（共通サービスレイアウト）
   - nursing / care / hair それぞれのサービス
   - flow（ご利用の流れ）
   ======================================= */


/* ---------------------------------------
   特徴セクション（Point）
   --------------------------------------- */

  
  #recruit .sec_point img[alt="特徴-Point-"] {
    width: 18%;
  }
  
  
  /* ---------------------------------------
     point（特徴ブロック）
     --------------------------------------- */
  
  .point {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: repeat(2, auto);
    grid-template-areas:
      "h1-area h3-area"
      "h2-area text-area";
  }
  
  .point h2 { grid-area: h1-area; }
  .point h3 { grid-area: h2-area; margin: 0; }
  .point h4 {
    grid-area: h3-area;
    font-family: "kinuta-maruminold-stdn", serif;
    font-size: 1.375rem;
    color: #6D7B52;
    margin: 0.67em 0;
  }
  
  .point p {
    grid-area: text-area;
    margin-top: -84px;
  }
  
  #hair .point p { margin: 0; }
  
  /* recruit の point（1列） */
  #recruit .point {
    text-align: center;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
    grid-template-areas:
      "h1-area"
      "h2-area"
      "h3-area";
  }
  
  /* point 親グリッド */
  .point-container {
    width: 975px;
    display: grid;
    grid-auto-rows: 367px;
    grid-template-columns: repeat(auto-fill, 300px);
    grid-column-gap: 33px;
    margin: 60px auto 0;
  }
  #hair .point-container{
    grid-auto-rows: 450px;
  }
  #hair .point-container h5{
    font-size: 1.2rem;
    margin: 16px 0;
    color: var(--color-text);
  }
  /*--------------------------------
  運営規定（.or）
---------------------------------*/

#nursing .or {
  padding: 90px 0 130px;
  text-align: center;
  width: 100%;
  background-color: #C8D9C8;
  border-radius: 20px 20px 0 0 ;
}

#nursing .or h2 {
  font-family: "kinuta-maruminold-stdn", serif;
  font-size: 2rem;
  color: #6D7B52;
  margin-bottom: 6px;
}

#nursing .or-sub {
  font-style: italic;
  color: #a39b78;
  margin-bottom: 30px;
}

/* -------- カード -------- */

#nursing .or-card {
  width: 600px;
  max-width: 90%;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 22px;
  padding: 26px 24px 30px;
  display: flex;
  gap: 18px;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  text-align: left;
}

#nursing .or-icon {
  font-size: 2.6rem;
  line-height: 1;
}

#nursing .or-title {
  margin: 0;
  font-weight: bold;
  font-size: 1.1rem;
  color: #6D7B52;
}

#nursing .or-desc {
  margin: 2px 0 12px;
  font-size: 0.95rem;
  color: #444;
  line-height: 1.6;
}

#nursing .or-btn {
  display: inline-block;
  background-color: #00A63C;
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.95rem;
  transition: 0.2s;
}

#nursing .or-btn:hover {
  background-color: #008c33;
  transform: translateY(-2px);
}

  /* ---------------------------------------
     hair 美容室ページ（説明ブロック）
     --------------------------------------- */
  
  #hair .hair-what {
    text-align: left;
  }
  
  #hair .hair-what h2 {
    text-align: center;
  }
  
  #hair .hair-what h3 {
    text-align: center;
    font-size: 1.375rem;
    font-family: "kinuta-maruminold-stdn", serif;
    color: #6D7B52;
    margin: .67em auto;
  }
  
  #hair .hair-what p {
    width: 71%;
  }
  
  /* hair サービスパネル */
  #hair .service {
    background-color: #C8D9C8;
    margin-bottom: 10vw;
    padding: 5vw;
  }
  
  #hair .service .service-ttl h2 {
    width: 975px;
    margin: 0 auto;
  }
  
  #hair .service-ttl h2 img {
    width: 20%;
  }
  
  #hair .service.use .service-ttl h2 img {
    width: 14vw;
  }
  
  

  
  /* ---------------------------------------
     ご利用の流れ（flow）
     --------------------------------------- */
  
  .flow {
    margin: 150px auto;
  }
  
  .flow h2 {
    text-align: center;
  }
  .flow h2 img{
    margin: 0 auto;
  }
  
  /* 流れコンテナ */
  .flow .flow-wrap {
    position: relative;
    width: 975px;
    margin: 35px auto 0;
    padding-bottom: 80px;
  }
  
  .flow .flow-wrap .flow-line {
    margin-top: 30px;
    margin-right: 10px;
  }
  
  /* flow 年表（訪問看護 5行タイプ） */
  .flow .flow-wrap dl {
    display: grid;
    align-items: center;
    grid-template-columns: 298px 665px;
    grid-template-rows: repeat(5, 42px);
    grid-row-gap: 102px;
    grid-template-areas:
      "dt1 dd1"
      "dt2 dd2"
      "dt3 dd3"
      "dt4 dd4"
      "dt5 dd5";
  }
  
  .flow .flow-wrap dl dt {
    font-family: "Noto sans jp", serif;
    font-weight: 600;
    font-size: 1.375rem;
    color: #4d4d4d;
  }
  .flow .flow-wrap dl dt::before{
    content: "・";
    color: #008c33;
  }
  
  .flow .flow-wrap dl dd {
    border-radius: 30px;
    background-color: #fff;
    padding: 10px 17px;
    color: #6D7B52;
  }
  
  /* 各行の grid-area */
  .flow .flow-wrap dl .dt1 { grid-area: dt1; }
  .flow .flow-wrap dl .dt2 { grid-area: dt2; }
  .flow .flow-wrap dl .dt3 { grid-area: dt3; }
  .flow .flow-wrap dl .dt4 { grid-area: dt4; }
  .flow .flow-wrap dl .dt5 { grid-area: dt5; }
  
  .flow .flow-wrap dl .dd1 { grid-area: dd1; }
  .flow .flow-wrap dl .dd2 { grid-area: dd2; }
  .flow .flow-wrap dl .dd3 { grid-area: dd3; }
  .flow .flow-wrap dl .dd4 { grid-area: dd4; }
  .flow .flow-wrap dl .dd5 { grid-area: dd5; }
  
  
  /* --- hair flow（3行タイプ） --- */
  #hair .flow .flow-wrap dl {
    grid-template-columns: 288px 675px;
    grid-template-rows: repeat(3, 42px);
    grid-row-gap: 102px;
    grid-template-areas:
      "dt1 dd1"
      "dt2 dd2"
      "dt3 dd3";
  }
  
  #hair .flow .flow-wrap dl .dt1,
  #hair .flow .flow-wrap dl .dt2,
  #hair .flow .flow-wrap dl .dt3 {
    margin-bottom: 2vw;
    margin-top: 0;
  }
  
  /* --- care flow（6行タイプ） --- */
  #care .flow .flow-wrap dl {
    color: #6D7B52;
    grid-template-columns: 288px 675px;
    grid-template-rows: repeat(6, 42px);
    grid-row-gap: 102px;
    grid-template-areas:
      "dt1 dd1"
      "dt2 dd2"
      "dt3 dd3"
      "dt4 dd4"
      "dt5 dd5"
      "dt6 dd6";
  }
  
  #care .flow .flow-wrap dl .dt1 { grid-area: dt1; }
  #care .flow .flow-wrap dl .dt2 { grid-area: dt2; }
  #care .flow .flow-wrap dl .dt3 { grid-area: dt3; }
  #care .flow .flow-wrap dl .dt4 { grid-area: dt4; }
  #care .flow .flow-wrap dl .dt5 { grid-area: dt5; }
  #care .flow .flow-wrap dl .dt6 { grid-area: dt6; }
  
  #care .flow .flow-wrap dl .dd1 { grid-area: dd1; }
  #care .flow .flow-wrap dl .dd2 { grid-area: dd2; }
  #care .flow .flow-wrap dl .dd3 { grid-area: dd3; }
  #care .flow .flow-wrap dl .dd4 { grid-area: dd4; }
  #care .flow .flow-wrap dl .dd5 { grid-area: dd5; }
  #care .flow .flow-wrap dl .dd6 { grid-area: dd6; }
  
  /* flow 背景の葉っぱ */
  .flow-wrap .yellow-leaf {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
  }
  /* =========================
   ご利用料金
   ========================= */

.price {
  padding: 90px 0 130px;
}

.price > h2 {
  text-align: center;
}

.price > h2 img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.price-wrapper {
  max-width: 780px;
  margin: 40px auto 0;
  background-color: #fff;
  border-radius: 32px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  padding: 28px 32px 36px;
}

/* タブ */
.price .tab {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.price .tab li a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 18px;
  border-radius: 999px;
  background-color: #f3f0d7;
  color: #4c5a39;
  text-decoration: none;
  font-size: 0.95rem;
}

.price .tab li a img {
  width: 18px;
  height: auto;
}

.price .tab li a.active,
.price .tab li a:hover {
  background-color: #00a63c;
  color: #fff;
}

/* 見出し */
.price-main-ttl {
  text-align: center;
  font-size: 1.1rem;
  color: #6d7b52;
  margin-bottom: 18px;
}

.price-group {
  margin-top: 22px;
}

.price-group-ttl {
  font-size: 1rem;
  margin-bottom: 8px;
  color: #00a63c;
  border-left: 4px solid #00a63c;
  padding-left: 10px;
}

/* 料金リスト本体 */
.price-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 18px;
  border: 1px solid #e3e3d4;
  overflow: hidden;
}

.price-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  font-size: 0.97rem;
  line-height: 1.5;
}

.price-list li:nth-child(odd) {
  background-color: #faf9f0;
}

.price-list li:nth-child(even) {
  background-color: #ffffff;
}

.price-list .menu {
  flex: 1 1 auto;
}

.price-list .price-amount {
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 600;
  color: #4c5a39;
  text-align: right;
}

.price-list .price-amount.note {
  font-weight: normal;
  color: #555;
}

/* 備考 */
.price-notes {
  margin-top: 18px;
  font-size: 0.85rem;
  color: #555;
}

.price-notes ul {
  padding-left: 1.3em;
  margin: 0;
}

.price-notes li {
  margin-bottom: 4px;
}

/* タブ切り替え用（JSが display 制御しているならそれ優先でOK） */
.tab-area {
  display: none;
}

.tab-area.is-active {
  display: block;
}

/* =========================
   ご利用の流れ（訪問理容）
   ========================= */

.service.use {
  background-color: #cfded0; /* 既存の淡いグリーンに近い色なら調整OK */
  padding: 90px 0 110px;
}

.service.use .service-ttl {
  text-align: center;
}

.service.use .service-ttl h2 img {
  max-width: 260px;
  height: auto;
}

/* カードレイアウト */
.service.use .service-container {
  max-width: 1080px;
  margin: 40px auto 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 36px;
}

.service.use .service-card {
  position: relative;
  flex: 1 1 0;
  max-width: 320px;
  background-color: #ffffff;
  border-radius: 26px;
  padding: 20px 20px 24px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  text-align: center;
}

/* ステップ間の矢印（PCのみ） */
@media (min-width: 769px) {
  .service.use .service-card::after {
    content: "→";
    position: absolute;
    top: 50%;
    right: -28px;
    transform: translateY(-50%);
    font-size: 1.4rem;
    color: #7fa36a;
  }
  .service.use .service-card:last-child::after {
    content: none;
  }
}

/* 画像 */
.service.use .service-img {
  border-radius: 22px;
  overflow: hidden;
  margin-bottom: 14px;
}

.service.use .service-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* 見出し・本文 */
.service.use .service-card h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
  color: #4c5a39;
}

.service.use .service-card p {
  font-size: 0.95rem;
  line-height: 1.7;
  text-align: left;
  color: #555;
}

/* =========================
   1日の流れ（訪問理容）
   ========================= */

   .flow.flow-day {
    background-color: #f7f5e8;
    padding: 80px 0 90px;
    width: 100%;
  }
  
  .flow.flow-day h2 {
    text-align: center;
  }
  
  .flow.flow-day h2 img {
    max-width: 260px;
    height: auto;
  }
  
  /* --- タイムラインレイアウト（PC） --- */
  .flow.flow-day .flow-wrap {
    max-width: 980px;
    margin: 40px auto 0;
    position: relative;
    padding-left: 40px;
  }
  
  /* 縦ライン */
  .flow.flow-day .flow-wrap::before {
    content: "";
    position: absolute;
    left: 49px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: linear-gradient(
      to bottom,
      #8cbf6f 0%,
      #cde0ba 50%,
      #8cbf6f 100%
    );
  }
  
  /* 定義リストを2カラムに */
  .flow.flow-day dl {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    column-gap: 32px;
    row-gap: 32px;
    align-items: center;
  }
  
  /* 左側のタイトル */
  .flow.flow-day dt {
    position: relative;
    font-weight: 600;
    font-size: 1.05rem;
    color: #4b5a35;
    padding-left: 34px;
  }
  
  /* タイトル左の丸ポチ */
  .flow.flow-day .flow-wrap dt::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #fff;
    border: 3px solid #8cbf6f;
    box-shadow: 0 0 0 4px #f7f5e8;
  }
  
  /* 右側の吹き出しカード */
  .flow.flow-day dd {
    background-color: #ffffff;
    border-radius: 999px;
    padding: 16px 26px;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #555;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  }
  
  /* --- 所要時間ボックス --- */
  .flow.flow-day .time-schedule {
    max-width: 720px;
    margin: 50px auto 0;
    background-color: #ffffff;
    border-radius: 20px;
    padding: 20px 28px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06);
    color: #444;
    font-size: 0.95rem;
  }
  
  .flow.flow-day .time-schedule p {
    margin-bottom: 8px;
  }
  
  .flow.flow-day .time-schedule ul {
    padding-left: 1.2em;
  }
  
  .flow.flow-day .time-schedule li {
    line-height: 1.7;
  }
  /* ご注意事項 */
.notes {
  padding: 80px 16px 100px;
  text-align: center;
  width: 100%;
}

.notes h2 img {
  max-width: 260px;
  width: 100%;
  height: auto;
  margin: 0 auto 32px;
  display: block;
}

.notes-inner {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border-radius: 24px;
  padding: 32px 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  text-align: left;
}

.notes-lead {
  font-size: 1.0rem;
  margin-bottom: 20px;
  color: #6b7b46;
}

/* リストスタイル */
.notes-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.notes-list li {
  position: relative;
  padding-left: 1.6em;
  line-height: 1.9;
  font-size: 0.95rem;
  color: #4f5a33;
}

.notes-list li + li {
  margin-top: 12px;
}

.notes-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00a63c;   /* サイトのアクセントカラーに合わせて調整 */
}

/* お問い合わせ全体 */
.hair-contact {
  padding: clamp(4rem, 6vw, 6rem) 1.5rem clamp(6rem, 7vw, 7rem);
  text-align: center;
  background: #f7f6e8; /* 他セクションと馴染む柔らかいベージュ */
  width: 100%;
}

.hair-contact h2 img {
  width: 20%;
  margin: 0 auto;
}

.hair-contact-lead {
  margin-top: 1.5rem;
  line-height: 1.8;
  color: #6b6b4f;
  font-size: 1.5rem;
}

/* カード部分 */
.hair-contact-card {
  max-width: 900px;
  margin: 2.5rem auto 0;
  padding: clamp(2rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(122, 132, 95, 0.15);
}

/* 行ごとのレイアウト */
.contact-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid #e3e5cf;
}

.contact-row:first-child {
  border-top: none;
}

.contact-label {
  min-width: 6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #4c6a36;
  font-size: 1.5rem;
}

.contact-body {
  flex: 1;
  text-align: left;
}

/* テキストリンク */
.contact-link {
  font-size: 1.7rem;
  font-weight: 700;
  color: #3c7c4f;
  text-decoration: none;
  word-break: break-all;
}

.contact-link:hover {
  text-decoration: underline;
}

/* ボタン風リンク（フォーム） */
.contact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2.4rem;
  border-radius: 999px;
  background: #7fb685;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(83, 133, 89, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.contact-button:hover {
  background: #6aa671;
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(83, 133, 89, 0.3);
}

/* 補足テキスト（必要なら使用） */
.contact-note {
  margin-top: 0.4rem;
  font-size: 1.3rem;
  color: #88886a;
}
  
  /* =======================================
     スマホ（max-width:600px）
     --------------------------------------- */
  
  @media (max-width: 600px) {
  
    /* sec_point */
    .sec_point .right-leaf {
      right: 0;
      bottom: 0;
      width: 20vw;
    }
  
    .point {
      grid-template-columns: 90vw;
      grid-template-rows: auto;
      grid-template-areas:
        "h1-area"
        "img-area"
        "h2-area"
        "h3-area"
        "text-area";
    }
  
    .point p {
      margin: 3vw 0 0;
    }
  
    .point-container {
      width: 90vw;
      grid-auto-rows: auto;
      grid-template-columns: 90vw;
    }
    #hair .point-container{
      grid-auto-rows: auto;
    }
    /* hair */
    #hair .hair-what p {
      width: 90vw;
    }
  
    #hair .service-ttl h2 img {
      width: 25vw;
    }
  
    #hair .service.use .service-ttl h2 img {
      width: 40vw;
    }
  
    #hair .hair-what h3 {
      text-align: left;
      width: 90vw;
      margin: 0 auto;
    }
  

  
    /* flow（SP） */
    .flow h2 img {
      width: 40vw;
    }
  
    .flow .flow-wrap {
      width: 90vw;
      margin: 10vw auto 0;
      padding: 0;
    }
  
    .flow .flow-wrap dl {
      grid-template-columns: 90vw;
      grid-template-rows: repeat(10, auto);
      grid-row-gap: 0;
      grid-template-areas:
        "dt1"
        "dd1"
        "dt2"
        "dd2"
        "dt3"
        "dd3"
        "dt4"
        "dd4"
        "dt5"
        "dd5";
    }
  
    .flow .flow-wrap dl dt {
      font-weight: 400;
      font-size: 1.25rem;
      margin-bottom: 2vw;
    }
  
    .flow .flow-wrap dl dd {
      background-color: #fff;
      margin: 0 0 7vw;
      padding: 3vw;
      border-radius: 5px;
    }
  
    /* nursing 向けサイズ調整 */
    #nursing .flow .flow-wrap dl dt {
      font-weight: 600;
      font-size: .9rem;
    }
  
    #nursing .flow .flow-wrap dl dd {
      font-size: 3vw;
    }
    #nursing .or {
      padding: 18vw 0 20vw;
    }
  
    #nursing .or-card {
      padding: 6vw 5vw 8vw;
      gap: 4vw;
      flex-direction: row;
    }
  
    #nursing .or-icon {
      font-size: 8vw;
    }
  
    #nursing .or-title {
      font-size: 4vw;
    }
  
    #nursing .or-desc {
      font-size: 3.5vw;
    }
  
    #nursing .or-btn {
      font-size: 3.4vw;
      padding: 2.4vw 5vw;
      border-radius: 6px;
    }

      
  #hair .service .service-ttl h2 {
    width: 90vw;
  }
    /* hair flow（SP）3行 */
    #hair .flow .flow-wrap dl {
      grid-template-columns: 90vw;
      grid-template-rows: repeat(6, auto);
      grid-template-areas:
        "dt1"
        "dd1"
        "dt2"
        "dd2"
        "dt3"
        "dd3";
    }
    #hair .flow .flow-wrap dl {
      grid-row-gap: 0;
    }
    /* care flow（SP）6行 */
    #care .flow .flow-wrap dl {
      grid-template-columns: 90vw;
      grid-template-rows: repeat(12, auto);
      grid-template-areas:
        "dt1"
        "dd1"
        "dt2"
        "dd2"
        "dt3"
        "dd3"
        "dt4"
        "dd4"
        "dt5"
        "dd5"
        "dt6"
        "dd6";
        grid-row-gap:0;
    }
    /* =========================
   ご利用料金
   ========================= */
  .price {
    padding: 16vw 0 20vw;
  }
  .price > h2 img {
    width: 35%;
  }

  .price-wrapper {
    max-width: 92vw;
    padding: 6vw 4.5vw 7vw;
  }

  .price .tab {
    gap: 3vw;
    margin-bottom: 4vw;
  }

  .price .tab li a {
    font-size: 3.7vw;
    padding: 1.6vw 4.5vw;
  }

  .price-main-ttl {
    font-size: 4vw;
    margin-bottom: 3vw;
  }

  .price-group {
    margin-top: 4vw;
  }

  .price-group-ttl {
    font-size: 3.6vw;
    padding-left: 2.4vw;
  }

  .price-list li {
    flex-direction: row;
    align-items: baseline;
    padding: 3vw 3.4vw;
    font-size: 3.4vw;
  }

  .price-list .price-amount {
    font-size: 3.5vw;
  }

  .price-notes {
    font-size: 3.1vw;
    margin-top: 4vw;
  }
  /* =========================
   ご利用の流れ
   ========================= */
.service.use {
    padding: 14vw 0 18vw;
  }

  .service.use .service-ttl h2 img {
    max-width: 52vw;
  }

  .service.use .service-container {
    max-width: 92vw;
    flex-direction: column;
    gap: 5vw;
  }

  .service.use .service-card {
    max-width: 100%;
    padding: 4.5vw 4.5vw 5vw;
    border-radius: 22px;
  }

  .service.use .service-card::after {
    content: none; /* スマホは矢印なしで縦並び */
  }

  .service.use .service-card h3 {
    font-size: 4.2vw;
    text-align: center;
  }

  .service.use .service-card p {
    font-size: 3.6vw;
  }
    /* =========================
   1日のながれ
   ========================= */
  .flow.flow-day {
    padding: 14vw 0 16vw;
  }

  .flow.flow-day h2 img {
    max-width: 52vw;
  }

  .flow.flow-day .flow-wrap {
    max-width: 92vw;
    margin: 8vw auto 0;
    padding-left: 0;
  }

  .flow.flow-day .flow-wrap::before {
    display: none; /* スマホは縦ライン非表示 */
  }

  .flow.flow-day dl {
    display: block;
  }

  .flow.flow-day dt {
    padding-left: 0;
    margin-top: 6vw;
    font-size: 4.2vw;
  }

  .flow.flow-day dt::before {
    display: none;
  }

  .flow.flow-day dd {
    margin-top: 2vw;
    border-radius: 18px;
    padding: 4vw 4.5vw;
    font-size: 3.6vw;
  }

  .flow.flow-day .time-schedule {
    max-width: 92vw;
    margin-top: 8vw;
    padding: 4vw 4.5vw;
    font-size: 3.6vw;
  }
  .notes {
    padding: 56px 16px 72px;
  }
  .notes h2 img{
    width: 45%;
  }
  .notes-inner {
    padding: 24px 20px;
    border-radius: 18px;
  }

  .notes-lead {
    font-size: 0.95rem;
    width: auto;
  }

  .notes-list li {
    font-size: 0.9rem;
  }
  .hair-contact {
    text-align: left;
  }
  .hair-contact h2 img{
    width: 60%;
  }
  .hair-contact-lead {
    font-size: 0.975rem;
  }

  .hair-contact-card {
    padding: 1.8rem 1.6rem;
    margin-top: 2rem;
  }

  .contact-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 1.2rem 0;
  }

  .contact-label {
    font-size: 1.2rem;
  }

  .contact-link {
    font-size: 1.2rem;
  }

  .contact-button {
    width: 100%;
    justify-content: center;
    font-size: 1rem;
  }

  }