/* ============================================================
   naiyou.css
   ------------------------------------------------------------
   【このファイルの役割】
   事業内容ページ（naiyou.html）専用のCSSです。

   このファイルで管理するもの
   ・メインビジュアル
   ・事業内容ページの見出し
   ・導入メッセージ
   ・3つの事業内容ブロック
   ・事業画像
   ・事業説明文
   ・スマートフォン表示

   【共通CSSとの役割分担】

   common.css
   → サイト全体共通
      ・ヘッダー
      ・ロゴ
      ・ハンバーガーメニュー
      ・グローバルナビ
      ・フッター
      ・TOPへ戻るボタン
      ・電話番号リンク

   naiyou.css
   → このページだけ

   【重要】
   PC版は完成済みです。
   スマートフォンだけを変更する場合は、
   基本的に @media (max-width: 768px) の中を変更してください。
   ============================================================ */

/* ============================================================
   共通CSS読み込み
   ============================================================ */

@import url(common.css);

/* ============================================================
   事業内容ページ 全体
   ============================================================ */

/* ============================================================
   メイン
   ------------------------------------------------------------
   このページでは、メインコンテンツ上部の余白を
   専用設定にしています。

   【注意】
   common.css の main 設定を上書きしています。
   ============================================================ */

main {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   メインビジュアル
   ------------------------------------------------------------
   ページ上部に表示する大きな写真です。

   【画像変更】
   画像ファイルそのものは naiyou.html の
   <img src="..."> を変更してください。

   このCSSでは画像のサイズ・表示方法を管理しています。
   ============================================================ */

.main-visual {
  position: relative;

  width: 100%;

  /*
    PC版メインビジュアルの高さ
  */
  height: 65vh;

  /*
    画面が小さい場合でも一定の高さを確保
  */
  min-height: 450px;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden;
}

/* ============================================================
   メインビジュアル画像
   ============================================================ */

.main-visual img {
  display: block;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  /*
    画像を枠いっぱいに表示
  */
  object-fit: cover;
}

/* ============================================================
   写真の上に柔らかいフィルター
   ------------------------------------------------------------
   写真全体に薄いブラウン系のフィルターを重ねています。

   【基本的に変更しない】
   ページ全体の写真の雰囲気に関係します。
   ============================================================ */

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

  position: absolute;

  inset: 0;

  background: rgba(70, 55, 40, 0.15);

  /*
    フィルターが画像操作を邪魔しないようにする
  */
  pointer-events: none;
}

/* ============================================================
   事業内容 導入部分
   ------------------------------------------------------------
   ページタイトルと導入メッセージをまとめています。
   ============================================================ */

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

  margin: 0 auto;

  padding: 115px 40px 65px;

  box-sizing: border-box;
}

/* ============================================================
   ページ見出し
   ============================================================ */

.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;
}

/* ============================================================
   ページ見出し 英字
   ------------------------------------------------------------
   HTML側には英字を書かず、
   CSSの疑似要素で SERVICE を表示しています。
   ============================================================ */

.service > h2::before {
  content: "SERVICE";

  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;
}

/* ============================================================
   導入メッセージ
   ------------------------------------------------------------
   「事業内容」の見出し下にある説明文です。

   PCでは中央揃え、
   スマートフォンでは左揃えになります。
   ============================================================ */

.message {
  width: 100%;
  max-width: 850px;

  margin: 0 auto;

  color: #555;

  text-align: center;
}

.message p {
  margin: 0;

  font-size: 17px;

  line-height: 2.15;

  letter-spacing: 0.04em;
}

/* ============================================================
   事業内容ブロック
   ------------------------------------------------------------
   現在は3つの事業を表示しています。

   1. 訪問介護事業
   2. 通所介護事業
   3. 居宅介護支援事業

   【重要】
   HTML側の .business-item と連動しています。
   ============================================================ */

.business-item {
  width: 100%;
  max-width: 1180px;

  margin: 0 auto 125px;

  padding: 0 40px;

  box-sizing: border-box;
}

/* ============================================================
   事業タイトル
   ------------------------------------------------------------
   各事業名の見出しです。
   ============================================================ */

.business-item h3 {
  position: relative;

  margin: 0 0 50px;

  padding: 0 0 18px 20px;

  color: #333;

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

  letter-spacing: 0.08em;

  line-height: 1.6;
}

/* ============================================================
   左側のオレンジライン
   ------------------------------------------------------------
   事業タイトル左側の縦ラインです。
   ============================================================ */

.business-item h3::before {
  content: "";

  position: absolute;

  left: 0;
  top: 5px;

  width: 4px;
  height: 75%;

  background: #eaa317;

  border-radius: 10px;
}

/* ============================================================
   下の細いライン
   ============================================================ */

.business-item h3::after {
  content: "";

  position: absolute;

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

  width: 100%;
  height: 1px;

  background: #e8e3dc;
}

/* ============================================================
   画像＋文章
   ------------------------------------------------------------
   【重要】

   現在の完成デザインでは、
   3つすべてを

   【写真左】＋【文章右】

   に統一しています。

   以前あった「3つ目だけ左右反転」の指定は
   現在は使用していません。

   今後変更する場合は、
   3つの事業ブロックすべてに影響することを
   確認してください。
   ============================================================ */

.business-content {
  display: flex;

  /*
    写真 → 文章 の順番
  */
  flex-direction: row;

  align-items: flex-start;

  /*
    写真と文章の間隔
  */
  gap: 75px;

  width: 100%;
}

/* ============================================================
   画像
   ============================================================ */

.business-image {
  position: relative;

  /*
    PC版では全体の52%
  */
  width: 52%;

  /*
    Flexboxによって画像側が
    必要以上に縮まないようにする
  */
  flex-shrink: 0;
}

/* ============================================================
   オレンジの飾り枠
   ------------------------------------------------------------
   写真の右下方向へ少しずらした
   オレンジ色の枠を表示します。

   【画像変更OK】
   写真を変更してもこの飾り枠は自動で付きます。
   ============================================================ */

.business-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;
}

/* ============================================================
   写真
   ------------------------------------------------------------
   【画像変更】
   実際の画像ファイルはHTML側で変更します。

   ここでは写真の表示サイズと見た目を管理します。
   ============================================================ */

.business-image img {
  position: relative;

  /*
    飾り枠より前面に表示
  */
  z-index: 1;

  display: block;

  width: 100%;

  /*
    PC版の画像高さ
  */
  height: 350px;

  margin: 0;
  padding: 0;

  /*
    枠いっぱいに画像を表示
  */
  object-fit: cover;

  border-radius: 14px;

  /*
    写真に軽い影を付ける
  */
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
}

/* ============================================================
   文章
   ------------------------------------------------------------
   写真の右側に表示する説明文です。
   ============================================================ */

.business-text {
  /*
    写真以外の残りの幅を使用
  */
  flex: 1;

  padding-top: 5px;
}

.business-text p {
  margin: 0;

  color: #555;

  font-size: 16px;

  line-height: 2.15;

  letter-spacing: 0.03em;
}

/* ============================================================
   スマートフォン
   ------------------------------------------------------------
   768px以下専用の設定です。

   【重要】
   PC版には影響しません。

   スマートフォンだけ修正するときは、
   基本的にこの @media 内を変更してください。
   ============================================================ */

@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 !important;
    padding: 0 !important;

    box-sizing: border-box;
  }

  /* ==========================================================
     メインビジュアル
     ----------------------------------------------------------
     スマートフォンではPC版より低い高さに調整します。
     ========================================================== */

  .main-visual {
    width: 100%;

    height: 42vh;

    min-height: 280px;

    max-height: 380px;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;
  }

  /* ==========================================================
     メインビジュアル画像
     ========================================================== */

  .main-visual img {
    display: block;

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

    height: 100%;

    margin: 0;
    padding: 0;

    object-fit: cover;
  }

  /* ==========================================================
     事業内容 導入部分
     ========================================================== */

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

    margin: 0;

    padding: 75px 20px 60px;

    box-sizing: border-box;
  }

  /* ==========================================================
     ページ見出し
     ========================================================== */

  .service > h2 {
    width: 100%;

    margin: 0 0 48px;

    font-size: 27px;

    font-weight: 600;

    letter-spacing: 0.08em;

    line-height: 1.5;
  }

  /* ==========================================================
     ページ見出し 英字
     ========================================================== */

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

    font-size: 11px;

    letter-spacing: 0.18em;
  }

  /* ==========================================================
     ページ見出し オレンジライン
     ========================================================== */

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

    height: 2px;

    margin-top: 16px;
  }

  /* ==========================================================
     導入メッセージ
     ----------------------------------------------------------
     スマートフォンでは文章を左揃えにします。
     ========================================================== */

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

    margin: 0 auto;

    text-align: left;

    box-sizing: border-box;
  }

  .message p {
    width: 100%;

    margin: 0;

    color: #555;

    font-size: 15px;

    line-height: 2.05;

    letter-spacing: 0.02em;

    box-sizing: border-box;
  }

  /* ==========================================================
     事業内容ブロック
     ========================================================== */

  .business-item {
    width: 100%;
    max-width: 100%;

    margin: 0 0 85px;

    padding: 0 20px;

    box-sizing: border-box;
  }

  /* ==========================================================
     事業タイトル
     ========================================================== */

  .business-item h3 {
    margin: 0 0 30px;

    padding: 0 0 13px 15px;

    font-size: 22px;

    font-weight: 600;

    letter-spacing: 0.06em;

    line-height: 1.6;
  }

  /* ==========================================================
     事業タイトル 左側ライン
     ========================================================== */

  .business-item h3::before {
    left: 0;
    top: 4px;

    width: 4px;
    height: 75%;
  }

  /* ==========================================================
     事業タイトル 下線
     ========================================================== */

  .business-item h3::after {
    height: 1px;
  }

  /* ==========================================================
     画像＋文章
     ----------------------------------------------------------
     スマートフォンでは

     【写真】
        ↓
     【文章】

     の縦並びになります。

     PC版の「写真左＋文章右」には影響しません。
     ========================================================== */

  .business-content {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 30px;

    width: 100%;

    margin: 0;
    padding: 0;
  }

  /* ==========================================================
     画像
     ========================================================== */

  .business-image {
    position: relative;

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

    margin: 0;
    padding: 0;

    box-sizing: border-box;
  }

  /* ==========================================================
     オレンジの飾り枠
     ----------------------------------------------------------
     スマートフォンでは少し控えめに調整しています。
     ========================================================== */

  .business-image::after {
    top: 8px;
    left: 8px;

    width: 100%;
    height: 100%;

    border-width: 2px;

    border-radius: 12px;

    box-sizing: border-box;
  }

  /* ==========================================================
     写真
     ========================================================== */

  .business-image img {
    display: block;

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

    /*
      スマートフォン版の画像高さ
    */
    height: 230px;

    margin: 0;
    padding: 0;

    object-fit: cover;

    border-radius: 12px;

    box-sizing: border-box;

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

  /* ==========================================================
     文章
     ========================================================== */

  .business-text {
    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
  }

  .business-text p {
    width: 100%;

    margin: 0;

    color: #555;

    font-size: 15px;

    line-height: 2.05;

    letter-spacing: 0.02em;

    box-sizing: border-box;

    /*
      長い文字列が画面外にはみ出すのを防止
    */
    overflow-wrap: break-word;
  }

  /* ==========================================================
     最後の事業ブロック
     ----------------------------------------------------------
     ページ下部の余白を調整します。
     ========================================================== */

  .business-item:last-child {
    margin-bottom: 25px;
  }
}