@import url(common.css);

/* ============================================================
   TOPページ全体
   ------------------------------------------------------------
   【通常変更しない】

   このページ全体の基本的な設定です。

   html
   → ページをスクロールしたときの設定

   main
   → TOPページのメインコンテンツ全体の設定
============================================================ */

html {
  overflow-y: scroll;
}

main {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* ============================================================
   メインビジュアル
   ------------------------------------------------------------
   【TOPページ上部】

   ページを開いたときに最初に表示される
   大きな写真・キャッチコピー・木のアニメーションを
   まとめて配置しているエリアです。

   【通常変更しない】
============================================================ */

.main-visual {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fffdf9;
}

/* ============================================================
   写真エリア
   ------------------------------------------------------------
   【通常変更しない】

   HTMLに記載されているメイン写真3枚を
   配置するためのエリアです。

   現在はスライドショーとして動かさず、
   3枚をそれぞれ決められた場所に配置しています。
============================================================ */

.hero-slides {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  z-index: 1;
  opacity: 1;
  visibility: visible;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
}

/* ============================================================
   写真そのもの
   ------------------------------------------------------------
   【通常変更しない】

   写真の基本表示設定です。

   実際に表示する写真を変更するときは、
   HTMLの <img src="..."> を変更します。
============================================================ */

.hero-slide img {
  display: block;
}

/* ============================================================
   1枚目の写真の後ろにある水彩
   ------------------------------------------------------------
   【通常変更しない】

   大きなメイン写真の後ろにある
   オレンジ色の水彩風の背景です。

   CSSで作っている装飾なので、
   画像ファイルではありません。
============================================================ */

.hero-slide:nth-child(1)::before {
  content: "";
  position: absolute;

  top: 47%;
  right: 0;

  width: 760px;
  height: 720px;

  transform: translateY(-50%) rotate(6deg);

  background: radial-gradient(ellipse at 35% 35%, rgba(234, 163, 23, 0.22) 0%, rgba(234, 163, 23, 0.14) 38%, rgba(234, 163, 23, 0.07) 60%, rgba(234, 163, 23, 0.02) 73%, rgba(234, 163, 23, 0) 82%);

  border-radius: 46% 54% 52% 48% / 53% 44% 56% 47%;

  filter: blur(3px);

  z-index: 3;
  pointer-events: none;
}

/* ============================================================
   1枚目の写真の下側に広がる水彩
   ------------------------------------------------------------
   【通常変更しない】

   メイン写真の下側にある
   薄いオレンジ色の水彩風装飾です。
============================================================ */

.hero-slide:nth-child(1)::after {
  content: "";

  position: absolute;

  top: 61%;
  right: 25%;

  width: 400px;
  height: 280px;

  background: radial-gradient(ellipse, rgba(234, 163, 23, 0.14) 0%, rgba(234, 163, 23, 0.07) 42%, rgba(234, 163, 23, 0.025) 62%, rgba(234, 163, 23, 0) 78%);

  transform: rotate(-18deg);

  filter: blur(9px);

  z-index: 2;
  pointer-events: none;
}

/* ============================================================
   1枚目のメイン写真
   ------------------------------------------------------------
   【通常変更しない】

   TOPページで一番大きく表示される写真です。

   【写真を変更する場合】
   HTMLの、

   <img src="...">

   の画像ファイル名を変更してください。

   このCSSでは写真の「大きさ・位置・形」を
   設定しています。
============================================================ */

.hero-slide:nth-child(1) img {
  position: absolute;

  top: 42%;
  right: 5%;

  width: 610px;
  height: 610px;

  transform: translateY(-50%) rotate(2deg);

  object-fit: cover;

  border-radius: 48% 52% 55% 45% / 52% 46% 54% 48%;

  border: none;

  box-shadow: 0 18px 42px rgba(90, 65, 35, 0.14);

  z-index: 5;
}

/* ============================================================
   2枚目の写真
   ------------------------------------------------------------
   【通常変更しない】

   メインビジュアル左下に表示される写真です。
============================================================ */

.hero-slide:nth-child(2) {
  position: absolute;
}

/* ============================================================
   2枚目の写真の水彩
   ------------------------------------------------------------
   【通常変更しない】
============================================================ */

.hero-slide:nth-child(2)::before {
  content: "";

  position: absolute;

  top: 70%;
  left: 33%;

  width: 360px;
  height: 280px;

  background: radial-gradient(ellipse, rgba(234, 163, 23, 0.11) 0%, rgba(234, 163, 23, 0.05) 48%, rgba(234, 163, 23, 0) 76%);

  transform: translate(-50%, -50%) rotate(-12deg);

  filter: blur(8px);

  z-index: 6;

  pointer-events: none;
}

/* ============================================================
   2枚目の写真そのもの
   ------------------------------------------------------------
   【通常変更しない】

   写真の変更はHTML側で行います。
============================================================ */

.hero-slide:nth-child(2) img {
  position: absolute;

  top: 73%;
  left: 43%;

  width: 315px;
  height: 315px;

  transform: translate(-50%, -50%) rotate(-5deg);

  object-fit: cover;

  border-radius: 55% 45% 48% 52% / 46% 55% 45% 54%;

  border: none;

  box-shadow: 0 15px 34px rgba(90, 65, 35, 0.13);

  z-index: 7;
}

/* ============================================================
   3枚目の写真
   ------------------------------------------------------------
   【通常変更しない】

   メインビジュアル右下に表示される写真です。
============================================================ */

.hero-slide:nth-child(3) {
  position: absolute;
}

/* ============================================================
   3枚目の写真の水彩
   ------------------------------------------------------------
   【通常変更しない】
============================================================ */

.hero-slide:nth-child(3)::before {
  content: "";

  position: absolute;

  top: 83%;
  right: 0;

  width: 300px;
  height: 230px;

  background: radial-gradient(ellipse, rgba(234, 163, 23, 0.12) 0%, rgba(234, 163, 23, 0.05) 48%, rgba(234, 163, 23, 0) 76%);

  transform: rotate(12deg);

  filter: blur(8px);

  z-index: 7;

  pointer-events: none;
}

/* ============================================================
   3枚目の写真そのもの
   ------------------------------------------------------------
   【通常変更しない】

   写真の変更はHTML側で行います。
============================================================ */

.hero-slide:nth-child(3) img {
  position: absolute;

  top: 85%;
  right: 3%;

  width: 245px;
  height: 245px;

  transform: translateY(-50%) rotate(6deg);

  object-fit: cover;

  border-radius: 48% 52% 55% 45% / 54% 46% 51% 49%;

  border: none;

  box-shadow: 0 14px 32px rgba(90, 65, 35, 0.12);

  z-index: 8;
}

/* ============================================================
   左側の白いベール
   ------------------------------------------------------------
   【通常変更しない】

   メインビジュアル左側を少し白くして、
   キャッチコピーを読みやすくするための
   グラデーションです。
============================================================ */

.main-visual::after {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(90deg, rgba(255, 253, 249, 0.98) 0%, rgba(255, 253, 249, 0.9) 17%, rgba(255, 253, 249, 0.35) 32%, rgba(255, 253, 249, 0) 46%);

  pointer-events: none;

  z-index: 2;
}

/* ============================================================
   キャッチコピー
   ------------------------------------------------------------
   【文章変更はHTML】

   メイン写真の上に表示される
   キャッチコピーの位置・大きさなどを設定しています。

   文章を変更するときは、
   index.htmlの .hero-catch を編集してください。

   このCSSは基本的に変更しません。
============================================================ */

.hero-catch {
  position: absolute;

  top: 48%;
  left: 11%;

  width: 40%;

  margin: 0;
  padding: 0;

  transform: translateY(-50%);

  z-index: 50;

  display: block;

  text-align: left;

  pointer-events: none;
}

.hero-catch p {
  position: relative;

  display: inline-block;

  margin: 0;

  padding: 0 0 22px;

  color: #4a4037;

  font-size: 42px;
  font-weight: 600;

  line-height: 1.8;

  letter-spacing: 0.12em;

  text-align: left;
}

.hero-catch p::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 78px;
  height: 4px;

  background: #eaa317;

  border-radius: 20px;
}

/* ============================================================
   木のオープニング
   ------------------------------------------------------------
   【重要・通常変更しない】

   ページを開いたときに表示される
   木のアニメーションの土台です。

   script.jsと連動しています。

   ※この部分のclass名や設定を変更すると、
     オープニングアニメーションが
     正常に動かなくなる可能性があります。
============================================================ */

.tree-opening {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  background: #fffdf9;

  overflow: hidden;

  z-index: 10;

  pointer-events: auto;

  cursor: pointer;
}

/* ============================================================
   木＋事業所名の配置
   ------------------------------------------------------------
   【通常変更しない】

   木のイラストと事業所名を
   横並びに配置しています。
============================================================ */

.opening-content {
  position: absolute;

  top: 50%;
  left: 50%;

  width: min(900px, 90%);

  display: flex;

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

  gap: 60px;

  transform: translate(-50%, -50%);
}

/* ============================================================
   木の表示エリア
   ------------------------------------------------------------
   【通常変更しない】

   木の画像を配置するためのエリアです。
============================================================ */

.opening-tree-wrap {
  position: relative;

  flex: 0 0 auto;

  height: 520px;

  display: flex;

  align-items: flex-end;
  justify-content: center;
}

/* ============================================================
   木のイラスト
   ------------------------------------------------------------
   【画像変更はHTML】

   木の画像そのものを変更する場合は、
   index.htmlの、

   <img src="img/tree.png">

   の画像ファイル名を変更します。

   このCSSでは木の大きさや
   アニメーションに必要な設定をしています。

   ※script.jsと連動しているため、
     基本的に変更しないでください。
============================================================ */

.opening-tree {
  display: block;

  width: auto;
  height: 520px;

  max-width: 480px;

  margin: 0;
  padding: 0;

  opacity: 0;

  transform-origin: 50% 100%;

  will-change: transform, opacity;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ============================================================
   オープニング事業所名
   ------------------------------------------------------------
   【通常変更しない】

   木の横に表示される
   「ケアホーム柏 ヘルパーセンター」の
   表示位置や文字の設定です。

   文字そのものを変更する場合は、
   index.htmlの .opening-message を編集します。
============================================================ */

.opening-message {
  flex: 0 0 auto;

  text-align: left;

  opacity: 0;

  transform: translateY(15px);

  will-change: opacity, transform;
}

/* ============================================================
   オープニング施設名
   ------------------------------------------------------------
   【文字変更はHTML】
============================================================ */

.opening-message-small {
  margin: 0 0 12px;

  color: #eaa317;

  font-size: 28px;
  font-weight: 500;

  letter-spacing: 0.12em;

  line-height: 1.8;
}

/* ============================================================
   オープニング事業所名
   ------------------------------------------------------------
   【文字変更はHTML】
============================================================ */

.opening-message-large {
  margin: 0;

  color: #eaa317;

  font-size: 42px;
  font-weight: 600;

  letter-spacing: 0.12em;

  line-height: 1.6;
}

/* ============================================================
   会社紹介
   ------------------------------------------------------------
   【TOPページの会社紹介エリア】

   「会社紹介」の見出しと、
   「施設について」「私たちの想い」を
   表示するエリアです。
============================================================ */

.service {
  width: 100%;
  max-width: 1180px;

  margin: 0 auto;

  padding: 115px 40px 65px;

  box-sizing: border-box;
}

/* ============================================================
   会社紹介のページ見出し
   ------------------------------------------------------------
   【文章変更はHTML】

   ABOUT US
   会社紹介
   オレンジライン

   の見た目を設定しています。

   「会社紹介」の文字を変更する場合は、
   index.htmlの<h2>を変更します。

   ABOUT USを変更する場合は、
   このCSSのcontentを変更します。
============================================================ */

.service > h2 {
  position: relative;

  margin: 0 0 75px;

  text-align: center;

  color: #333;

  font-size: 34px;
  font-weight: 600;

  letter-spacing: 0.12em;

  line-height: 1.5;
}

.service > h2::before {
  content: "ABOUT US";

  display: block;

  margin-bottom: 10px;

  color: #eaa317;

  font-size: 13px;
  font-weight: 600;

  letter-spacing: 0.2em;
}

.service > h2::after {
  content: "";

  display: block;

  width: 48px;
  height: 2px;

  margin: 20px auto 0;

  background: #eaa317;

  border-radius: 10px;
}

/* ============================================================
   会社紹介の内容ブロック
   ------------------------------------------------------------
   【通常変更しない】

   写真と文章を横並びにするための設定です。

   写真・文章そのものを変更する場合は、
   index.htmlを編集します。
============================================================ */

.content-block {
  display: flex;

  align-items: flex-start;

  gap: 75px;

  width: 100%;

  margin: 0 auto 125px;
}

.content-block:last-child {
  margin-bottom: 0;
}

/* ============================================================
   会社紹介の写真
   ------------------------------------------------------------
   【画像変更はHTML】

   写真の大きさ・位置・枠を設定しています。

   写真を変更する場合は、
   index.htmlの<img src="...">を変更します。
============================================================ */

.content-block .image {
  position: relative;

  width: 52%;

  flex-shrink: 0;
}

/* ============================================================
   写真のオレンジ枠
   ------------------------------------------------------------
   【通常変更しない】

   写真の後ろに表示される
   オレンジ色の枠です。
============================================================ */

.content-block .image::after {
  content: "";

  position: absolute;

  top: 14px;
  left: 14px;

  width: 100%;
  height: 100%;

  border: 2px solid #eaa317;

  border-radius: 14px;

  box-sizing: border-box;

  z-index: 0;
}

/* ============================================================
   会社紹介の写真そのもの
   ------------------------------------------------------------
   【通常変更しない】

   写真のサイズ・形・影を設定しています。
============================================================ */

.content-block .image img {
  position: relative;

  z-index: 1;

  display: block;

  width: 100%;
  height: 350px;

  margin: 0;
  padding: 0;

  object-fit: cover;

  border-radius: 14px;

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
}

/* ============================================================
   会社紹介の文章エリア
   ------------------------------------------------------------
   【通常変更しない】

   写真の右側に文章を表示するための設定です。
============================================================ */

.content-block .text {
  flex: 1;

  padding-top: 5px;
}

/* ============================================================
   施設について・私たちの想いの見出し
   ------------------------------------------------------------
   【文章変更はHTML】

   見出しの文字そのものは
   index.htmlの<h3>を変更します。

   このCSSでは、
   ・文字サイズ
   ・オレンジの縦線
   ・下線
   を設定しています。
============================================================ */

.content-block .text h3 {
  position: relative;

  margin: 0 0 30px;

  padding: 0 0 18px 20px;

  color: #333;

  font-size: 27px;
  font-weight: 600;

  letter-spacing: 0.08em;

  line-height: 1.6;
}

/* ============================================================
   見出し左側のオレンジ線
   ------------------------------------------------------------
   【通常変更しない】
============================================================ */

.content-block .text h3::before {
  content: "";

  position: absolute;

  left: 0;
  top: 5px;

  width: 4px;
  height: 75%;

  background: #eaa317;

  border-radius: 10px;
}

/* ============================================================
   見出し下のライン
   ------------------------------------------------------------
   【通常変更しない】
============================================================ */

.content-block .text h3::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  width: 100%;
  height: 1px;

  background: #e8e3dc;
}

/* ============================================================
   会社紹介本文
   ------------------------------------------------------------
   【文章変更はHTML】

   本文そのものを変更する場合は、
   index.htmlの<p>内の文章を変更します。

   このCSSでは文字の大きさや
   行間などを設定しています。
============================================================ */

.content-block .text p {
  margin: 0;

  color: #555;

  font-size: 16px;

  line-height: 2.15;

  letter-spacing: 0.03em;
}

/* ============================================================
   ページ下部メッセージ
   ------------------------------------------------------------
   【TOPページ下部】

   「人と人とのつながりを大切に。」
   などのメッセージを表示するエリアです。
============================================================ */

.message-section {
  width: 100%;
  max-width: 1000px;

  margin: 0 auto;

  padding: 115px 30px 130px;

  text-align: center;

  box-sizing: border-box;
}

/* ============================================================
   下部メインメッセージ
   ------------------------------------------------------------
   【文章変更はHTML】

   メッセージの文字そのものは
   index.htmlの.message-mainを変更します。

   CSSでは文字サイズや位置などを設定しています。
============================================================ */

.message-main {
  position: relative;

  margin: 0;

  padding-top: 30px;

  color: #333;

  font-size: 32px;
  font-weight: 600;

  line-height: 1.8;

  letter-spacing: 0.1em;

  text-align: center;
}

/* ============================================================
   メインメッセージ上のオレンジの丸
   ------------------------------------------------------------
   【通常変更しない】
============================================================ */

.message-main::before {
  content: "";

  position: absolute;

  top: 0;
  left: 50%;

  width: 10px;
  height: 10px;

  background: #eaa317;

  border-radius: 50%;

  transform: translateX(-50%);
}

/* ============================================================
   メッセージ中央のオレンジライン
   ------------------------------------------------------------
   【通常変更しない】
============================================================ */

.message-line {
  display: block;

  width: 48px;
  height: 2px;

  margin: 35px auto;

  background: #eaa317;

  border-radius: 10px;
}

/* ============================================================
   ページ下部メッセージ本文
   ------------------------------------------------------------
   PC版

   【文章変更はHTML】

   文章そのものは
   index.htmlの.message-textを変更します。

   このCSSでは文字サイズ・行間・配置を設定しています。
============================================================ */

.message-text {
  margin: 0;

  color: #555;

  font-size: 17px;

  line-height: 2.4;

  letter-spacing: 0.04em;

  text-align: center;
}

/* ============================================================
   ページ全体の葉っぱイラスト
   ------------------------------------------------------------
   【TOPページ専用】

   index.htmlにある
   leaf-A / leaf-B / leaf-C
   をページの背景に配置しています。

   【画像変更はHTML】

   葉の画像そのものを変更する場合は、
   index.htmlの<img src="...">を変更します。

   このCSSでは葉の位置・大きさ・向きを
   設定しています。
============================================================ */

.page-leaves {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;

  z-index: 20;
}

.page-leaf {
  position: absolute;

  display: block;

  width: auto;
  height: auto;

  object-fit: contain;

  opacity: 0.85;
}

/* ============================================================
   leaf-A
   ------------------------------------------------------------
   【通常変更しない】

   メインビジュアル終了後から
   右側に配置する葉です。
============================================================ */

.page-leaf.leaf-a {
  top: calc(100vh + 120px);
  right: 5%;

  width: 75px;

  transform: rotate(12deg);
}

/* ============================================================
   leaf-B
   ------------------------------------------------------------
   【通常変更しない】

   ページ中央付近の左側に配置する葉です。
============================================================ */

.page-leaf.leaf-b {
  top: 1500px;
  left: 5%;

  width: 60px;

  transform: rotate(-18deg);
}

/* ============================================================
   leaf-C
   ------------------------------------------------------------
   【通常変更しない】

   ページ下部の右側に配置する葉です。
============================================================ */

.page-leaf.leaf-c {
  top: 2200px;
  right: 7%;

  width: 50px;

  transform: rotate(20deg);
}

/* ============================================================
   スマートフォン表示
   ------------------------------------------------------------
   【重要】

   画面幅が768px以下のときだけ、
   ここに書かれた設定が適用されます。

   PC表示には影響しません。

   スマートフォン用のレイアウトを変更する場合は、
   基本的にこの中を確認します。
============================================================ */

@media (max-width: 768px) {
  /* ==========================================================
     スマートフォン・ページ全体
     ----------------------------------------------------------
     【通常変更しない】

     スマートフォンで横方向に
     ページがはみ出さないようにしています。
  ========================================================== */

  html,
  body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

  body {
    background: #fffdf9;
  }

  main {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* ==========================================================
     スマホ版・葉っぱ
     ----------------------------------------------------------
     【TOPページ専用】

     スマートフォンでは、
     PC版より葉を小さくして配置しています。

     葉の画像を変更する場合は、
     HTML側を変更します。
  ========================================================== */

  .page-leaves {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 20;
  }

  .page-leaf {
    position: absolute;
    display: block;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.78;
  }

  /* 1枚目 */

  .page-leaf.leaf-a {
    top: calc(100svh + 65px);
    right: 2%;
    width: 32px;
    transform: rotate(14deg);
  }

  /* 2枚目
     少し上へ戻して、左側に控えめに配置 */

  .page-leaf.leaf-b {
    top: 2000px;
    left: 7%;
    width: 29px;
    transform: rotate(-18deg);
  }

  /* 3枚目
     フッター直前 */

  .page-leaf.leaf-c {
    top: 2450px;
    right: 4%;
    width: 29px;
    transform: rotate(20deg);
  }

  /* ==========================================================
     スマホ版・メインビジュアル
     ----------------------------------------------------------
     【通常変更しない】

     スマートフォンの画面サイズに合わせて、
     メインビジュアルの高さを調整しています。
  ========================================================== */

  .main-visual {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 560px;
    max-height: 750px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #fffdf9;
  }

  /* ==========================================================
     スマホ版・写真エリア
     ----------------------------------------------------------
     【通常変更しない】
  ========================================================== */

  .hero-slides {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 1;
  }

  .hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  /* ==========================================================
     スマホ版・メイン写真
     ----------------------------------------------------------
     【通常変更しない】

     メイン写真の位置・大きさを
     スマートフォン用に調整しています。

     写真の変更はHTML側で行います。
  ========================================================== */

  .hero-slide:nth-child(1) img {
    position: absolute;

    top: 41%;
    right: -12%;

    width: 82vw;
    height: 82vw;

    min-width: 280px;
    min-height: 280px;

    max-width: 430px;
    max-height: 430px;

    transform: translateY(-50%) rotate(2deg);

    object-fit: cover;

    border-radius: 48% 52% 55% 45% / 52% 46% 54% 48%;

    border: none;

    box-shadow: 0 15px 32px rgba(90, 65, 35, 0.14);

    z-index: 5;
  }

  /* ==========================================================
     スマホ版・メイン写真の水彩背景
     ----------------------------------------------------------
     【通常変更しない】
  ========================================================== */

  .hero-slide:nth-child(1)::before {
    content: "";

    position: absolute;

    top: 41%;
    right: -20%;

    width: 105vw;
    height: 95vw;

    max-width: 500px;
    max-height: 470px;

    transform: translateY(-50%) rotate(6deg);

    background: radial-gradient(ellipse at 35% 35%, rgba(234, 163, 23, 0.22) 0%, rgba(234, 163, 23, 0.14) 38%, rgba(234, 163, 23, 0.07) 60%, rgba(234, 163, 23, 0.02) 73%, rgba(234, 163, 23, 0) 82%);

    border-radius: 46% 54% 52% 48% / 53% 44% 56% 47%;

    filter: blur(3px);

    z-index: 3;
    pointer-events: none;
  }

  /* ==========================================================
     スマホ版・メイン写真下側の水彩
     ----------------------------------------------------------
     【通常変更しない】
  ========================================================== */

  .hero-slide:nth-child(1)::after {
    content: "";

    position: absolute;

    top: 60%;
    right: 25%;

    width: 55vw;
    height: 38vw;

    max-width: 280px;
    max-height: 200px;

    background: radial-gradient(ellipse, rgba(234, 163, 23, 0.14) 0%, rgba(234, 163, 23, 0.07) 42%, rgba(234, 163, 23, 0.025) 62%, rgba(234, 163, 23, 0) 78%);

    transform: rotate(-18deg);

    filter: blur(8px);

    z-index: 2;
    pointer-events: none;
  }

  /* ==========================================================
     スマホ版・左下の写真
     ----------------------------------------------------------
     【通常変更しない】

     写真の変更はHTML側で行います。
  ========================================================== */

  .hero-slide:nth-child(2) img {
    position: absolute;

    top: 72%;
    left: 19%;

    width: 34vw;
    height: 34vw;

    min-width: 115px;
    min-height: 115px;

    max-width: 190px;
    max-height: 190px;

    transform: translate(-50%, -50%) rotate(-5deg);

    object-fit: cover;

    border-radius: 55% 45% 48% 52% / 46% 55% 45% 54%;

    border: none;

    box-shadow: 0 12px 26px rgba(90, 65, 35, 0.13);

    z-index: 7;
  }

  /* 左下写真の水彩 */

  .hero-slide:nth-child(2)::before {
    content: "";

    position: absolute;

    top: 70%;
    left: 20%;

    width: 42vw;
    height: 32vw;

    max-width: 220px;
    max-height: 170px;

    background: radial-gradient(ellipse, rgba(234, 163, 23, 0.11) 0%, rgba(234, 163, 23, 0.05) 48%, rgba(234, 163, 23, 0) 76%);

    transform: translate(-50%, -50%) rotate(-12deg);

    filter: blur(8px);

    z-index: 6;
    pointer-events: none;
  }

  /* ==========================================================
     スマホ版・右下の写真
     ----------------------------------------------------------
     【通常変更しない】

     写真の変更はHTML側で行います。
  ========================================================== */

  .hero-slide:nth-child(3) img {
    position: absolute;

    top: 82%;
    right: -2%;

    width: 27vw;
    height: 27vw;

    min-width: 90px;
    min-height: 90px;

    max-width: 150px;
    max-height: 150px;

    transform: translateY(-50%) rotate(6deg);

    object-fit: cover;

    border-radius: 48% 52% 55% 45% / 54% 46% 51% 49%;

    border: none;

    box-shadow: 0 11px 24px rgba(90, 65, 35, 0.12);

    z-index: 8;
  }

  /* 右下写真の水彩 */

  .hero-slide:nth-child(3)::before {
    content: "";

    position: absolute;

    top: 81%;
    right: -5%;

    width: 35vw;
    height: 27vw;

    max-width: 180px;
    max-height: 140px;

    background: radial-gradient(ellipse, rgba(234, 163, 23, 0.12) 0%, rgba(234, 163, 23, 0.05) 48%, rgba(234, 163, 23, 0) 76%);

    transform: rotate(12deg);

    filter: blur(8px);

    z-index: 7;
    pointer-events: none;
  }

  /* ==========================================================
     スマホ版・白いベール
     ----------------------------------------------------------
     【通常変更しない】

     キャッチコピーを読みやすくするための
     白いグラデーションです。
  ========================================================== */

  .main-visual::after {
    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(90deg, rgba(255, 253, 249, 0.96) 0%, rgba(255, 253, 249, 0.78) 22%, rgba(255, 253, 249, 0.28) 45%, rgba(255, 253, 249, 0) 68%);

    pointer-events: none;

    z-index: 2;
  }

  /* ==========================================================
     スマホ版・キャッチコピー
     ----------------------------------------------------------
     【文章変更はHTML】

     文字そのものを変更する場合は、
     index.htmlの.hero-catchを編集します。

     この部分ではスマートフォン用に
     位置・サイズ・行間などを設定しています。
  ========================================================== */

  .hero-catch {
    position: absolute;

    top: 37%;
    left: 7%;

    width: 48%;

    margin: 0;
    padding: 0;

    transform: translateY(-50%);

    z-index: 50;

    display: block;

    text-align: left;

    pointer-events: none;
  }

  .hero-catch p {
    position: relative;

    display: inline-block;

    margin: 0;
    padding: 0 0 15px;

    color: #4a4037;

    font-size: 23px;
    font-weight: 600;

    line-height: 1.8;

    letter-spacing: 0.07em;

    text-align: left;
  }

  .hero-catch p::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 55px;
    height: 3px;

    background: #eaa317;

    border-radius: 20px;
  }

  /* ==========================================================
     スマホ版・木のオープニング
     ----------------------------------------------------------
     【重要・通常変更しない】

     script.jsと連動している
     木のオープニングをスマートフォン用に
     調整しています。

     ※class名や構造は変更しないでください。
  ========================================================== */

  .opening-content {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 94%;
    max-width: 500px;

    display: flex;

    flex-direction: row;

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

    gap: 12px;

    margin: 0;
    padding: 0;

    transform: translate(-50%, -50%);

    box-sizing: border-box;
  }

  /* ==========================================================
     スマホ版・木の表示エリア
  ========================================================== */

  .opening-tree-wrap {
    position: relative;

    width: auto;
    height: 220px;

    flex: 0 0 auto;

    display: flex;

    align-items: flex-end;
    justify-content: center;
  }

  /* ==========================================================
     スマホ版・木
     ----------------------------------------------------------
     【通常変更しない】

     木の画像を変更する場合はHTML側です。
  ========================================================== */

  .opening-tree {
    display: block;

    width: auto;
    height: 220px;

    max-width: 170px;

    margin: 0;
    padding: 0;
  }

  /* ==========================================================
     スマホ版・オープニング事業所名
  ========================================================== */

  .opening-message {
    width: auto;

    max-width: calc(100% - 175px);

    flex: 0 1 auto;

    margin: 0;
    padding: 0;

    text-align: left;

    box-sizing: border-box;
  }

  .opening-message-small {
    margin: 0 0 4px;

    color: #eaa317;

    font-size: 14px;
    font-weight: 500;

    letter-spacing: 0.05em;

    line-height: 1.5;

    white-space: nowrap;
  }

  .opening-message-large {
    margin: 0;

    color: #eaa317;

    font-size: 20px;
    font-weight: 600;

    letter-spacing: 0.04em;

    line-height: 1.5;

    white-space: nowrap;
  }

  /* ==========================================================
     スマホ版・会社紹介
     ----------------------------------------------------------
     【通常変更しない】

     会社紹介エリアの幅・余白を
     スマートフォン用に設定しています。
  ========================================================== */

  .service {
    width: 100%;
    max-width: 100%;

    margin: 0;

    padding: 75px 20px 55px;

    box-sizing: border-box;
  }

  /* ==========================================================
     スマホ版・会社紹介見出し
     ----------------------------------------------------------
     【文章変更はHTML】

     ABOUT US
     会社紹介
     オレンジライン

     のスマートフォン用設定です。

     「会社紹介」の文字を変更する場合は
     HTML側を変更してください。
  ========================================================== */

  .service > h2 {
    width: 100%;

    margin: 0 0 50px;

    color: #333;

    font-size: 28px;
    font-weight: 600;

    letter-spacing: 0.08em;

    line-height: 1.5;

    text-align: center;
  }

  .service > h2::before {
    margin-bottom: 8px;

    font-size: 11px;

    letter-spacing: 0.18em;
  }

  .service > h2::after {
    width: 42px;
    height: 2px;

    margin-top: 17px;
  }

  /* ==========================================================
     スマホ版・コンテンツブロック
     ----------------------------------------------------------
     【通常変更しない】

     PCでは写真と文章を横並び、
     スマートフォンでは縦並びにしています。
  ========================================================== */

  .content-block {
    display: flex;

    flex-direction: column;

    gap: 28px;

    width: 100%;

    margin: 0 0 85px;

    padding: 0;

    box-sizing: border-box;
  }

  .content-block:last-child {
    margin-bottom: 15px;
  }

  /* ==========================================================
     スマホ版・写真
     ----------------------------------------------------------
     【画像変更はHTML】

     写真を変更する場合は
     index.htmlの<img src="...">を変更します。
  ========================================================== */

  .content-block .image {
    position: relative;

    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
  }

  /* スマホ版・写真のオレンジ枠 */

  .content-block .image::after {
    top: 9px;
    left: 9px;

    width: 100%;
    height: 100%;

    border: 2px solid #eaa317;

    border-radius: 12px;

    box-sizing: border-box;
  }

  /* スマホ版・写真 */

  .content-block .image img {
    position: relative;

    z-index: 1;

    display: block;

    width: 100%;
    max-width: 100%;

    height: 235px;

    margin: 0;
    padding: 0;

    object-fit: cover;

    border-radius: 12px;

    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);

    box-sizing: border-box;
  }

  /* ==========================================================
     スマホ版・文章
     ----------------------------------------------------------
     【文章変更はHTML】

     本文の文章を変更する場合は、
     index.htmlの<p>を編集します。

     ここでは文章の表示サイズや
     レイアウトを設定しています。
  ========================================================== */

  .content-block .text {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
  }

  /* ==========================================================
     スマホ版・小見出し
     ----------------------------------------------------------
     【文章変更はHTML】

     「施設について」
     「私たちの想い」
     の文字はHTML側で変更します。
  ========================================================== */

  .content-block .text h3 {
    width: 100%;

    margin: 0 0 20px;

    padding: 0 0 13px 15px;

    color: #333;

    font-size: 22px;
    font-weight: 600;

    letter-spacing: 0.06em;

    line-height: 1.6;

    box-sizing: border-box;
  }

  /* スマホ版・見出し左のオレンジ線 */

  .content-block .text h3::before {
    left: 0;
    top: 4px;

    width: 4px;
    height: 75%;
  }

  /* スマホ版・見出し下のライン */

  .content-block .text h3::after {
    height: 1px;
  }

  /* ==========================================================
     スマホ版・本文
     ----------------------------------------------------------
     【文章変更はHTML】

     本文そのものを変更する場合は
     HTML側を編集します。
  ========================================================== */

  .content-block .text p {
    width: 100%;

    margin: 0;
    padding: 0;

    color: #555;

    font-size: 15px;

    line-height: 2.05;

    letter-spacing: 0.02em;

    box-sizing: border-box;
  }

  /* ==========================================================
     スマホ版・下部メッセージ
     ----------------------------------------------------------
     【通常変更しない】

     TOPページ下部のメッセージエリアを
     スマートフォン用に調整しています。
  ========================================================== */

  .message-section {
    width: 100%;
    max-width: 100%;

    margin: 0;

    padding: 75px 20px 95px;

    box-sizing: border-box;

    text-align: center;
  }

  /* ==========================================================
     スマホ版・メインメッセージ
     ----------------------------------------------------------
     【文章変更はHTML】

     文字そのものは
     index.htmlの.message-mainを変更します。
  ========================================================== */

  .message-main {
    margin: 0;

    padding-top: 25px;

    color: #333;

    font-size: 23px;
    font-weight: 600;

    line-height: 1.8;

    letter-spacing: 0.08em;

    text-align: center;
  }

  /* スマホ版・上のオレンジの丸 */

  .message-main::before {
    top: 0;

    width: 8px;
    height: 8px;
  }

  /* スマホ版・オレンジライン */

  .message-line {
    width: 42px;
    height: 2px;

    margin: 28px auto;
  }

  /* ==========================================================
     スマホ版・メッセージ本文
     ----------------------------------------------------------
     【文章変更はHTML】

     文章そのものは
     index.htmlの.message-textを変更します。
  ========================================================== */

  .message-text {
    margin: 0;

    color: #555;

    font-size: 14px;

    line-height: 2.1;

    letter-spacing: 0.02em;

    text-align: center;
  }
}