@charset "UTF-8";
/* =========================================================================
   reason.css
   「杜のしおんが選ばれる理由」(reason.html) 専用スタイル。
   共通のヘッダー/ナビ/フッター/お問合せ(.s5-common)は styles.css
   (pcstyles.css / smartphonestyles.css / w450styles.css) を利用し、
   本ファイルでは #reason 固有の見た目だけを定義する。

   ・PC(641px以上)向けの指定を素のセレクタで記述し、
     スマートフォン(640px以下)・狭幅(450px以下)はメディアクエリで上書きする。
   ・配色は styles.css の CSS変数（--primary-color-purple 等）に準拠。
   ========================================================================= */

#reason .tel-and-menu-container .menu-btn-container.menubtn {
  margin: 0px 0px 10px 1px;
}

#reason .tel-and-menu-container .menu-btn-container img {
  margin-left: 20px;
}

/* =========================================================
   1. ヘッダー（文字なし写真の上に白文字の見出しを重ねる）
   ========================================================= */
/* PC用ヘッダー背景画像。高さ25vw・cover表示は他ページ(.main-header-container)と同様 */
#reason .main-header-container {
  background-image: url(../images/reason/main.jpg);
  width: 100%;
  height: 25vw;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* ナビをヘッダー画像より前面に表示する */
#reason .main-nav-container {
  z-index: 1000;
}

/* ページタイトル：写真中央に白文字で重ねる */
#reason figure.header-body-title-container h2 {
  position: absolute;
  font-family: var(--kiwimaru-font);
  font-size: var(--text-48) !important;
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
  /* 明るい写真上でも読めるよう、うっすら影を付ける */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  left: 50%;
  top: 50%;
  transform: translate(-50%, 0);
}

/* =========================================================
   2. パンくず（他ページと同じ見た目）
   ========================================================= */
#reason figure.breadcrumb-container {
  height: 6.243496357960458vh;
  background-color: #fff;
  color: #888888;
  padding-left: 29px;
}

#reason figure.breadcrumb-container ul.breadcrumb {
  padding: 10px 16px;
  list-style: none;
  margin: 10px 0 10px 0;
}

#reason figure.breadcrumb-container ul.breadcrumb li {
  display: inline;
  font-size: 12px;
}

#reason figure.breadcrumb-container ul.breadcrumb li + li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}

#reason figure.breadcrumb-container ul.breadcrumb li a.breadcrumb-item {
  text-decoration: none;
  color: #888888;
}

#reason figure.breadcrumb-container ul.breadcrumb li a.breadcrumb-item-active {
  color: #888888;
  text-decoration: none;
  pointer-events: none;
}

#reason figure.breadcrumb-container ul.breadcrumb li a:hover {
  color: #888888;
  text-decoration: underline;
}

/* =========================================================
   3. 共通の本文タイポグラフィ（本ページ内の段落）
   ========================================================= */
#reason main p {
  line-height: 1.95;
}

#reason main p + p {
  margin-top: 1.5em;
}

/* 強調語は太字＋本文より少し大きく（1.1em）する */
#reason main strong {
  font-weight: 700;
  font-size: 1.1em;
}

/* =========================================================
   4. イントロ：一日二組でゆっくりお別れ可能
      ・見出し（下線付き）＋ 左:本文 / 右:装飾写真 の2カラム
   ========================================================= */
#reason .reason-intro {
  padding: 72px 0 88px;
}

/* セクション見出し（文字色・サイズは #cremation .s2-1 h3.caption02 に合わせる：緑・36px） */
#reason .reason-sec-ttl {
  font-family: var(--kiwimaru-font);
  font-size: var(--text-36);
  font-weight: 500;
  color: #658465;
  letter-spacing: 0.04em;
  margin-bottom: 40px;
}

/* 装飾写真(img01.jpg)は本文エリアの背景として右側に配置し、本文は左に置く */
#reason .reason-intro-body {
  align-items: flex-start;
  background-image: url(../images/reason/img01.jpg);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 800px;
  /* 背景幅800px時の画像高さ（800 × 712 ÷ 1055 ≒ 539.9px）以上を確保し、画像が切れないようにする */
  min-height: 540px;
}

#reason .reason-intro-text {
  width: 54%;
}

/* =========================================================
   5. 選ばれる理由（サービス紹介・ベージュ背景の白カード）
   ========================================================= */
#reason .reason-service {
  background-color: #fbf7eb;
  padding: 64px 0 80px;
}

/* 各テーマは白い角丸カード */
#reason .reason-block {
  background-color: #fff;
  border-radius: 10px;
  padding: 48px 56px;
  margin-bottom: 36px;
}

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

/* カード見出し（紫）。フォント・フォントサイズは #cremation .s1 .s1_box>.text h3.icon01 に合わせる（Noto Sans JP・1.75em） */
#reason .reason-block-ttl {
  font-family: var(--notosans-font);
  font-size: 1.75em;
  font-weight: 500;
  color: var(--primary-color-purple);
  letter-spacing: 0.04em;
  margin-bottom: 30px;
}

/* 写真＋本文の1行 */
#reason .reason-row {
  align-items: flex-start;
}

#reason .reason-row + .reason-row {
  margin-top: 34px;
}

/* 写真を右に置く行（HTMLは写真→本文の順なので row-reverse） */
#reason .reason-row--img-right {
  flex-direction: row-reverse;
}

/* 写真を左に置く行 */
#reason .reason-row--img-left {
  flex-direction: row;
}

#reason .reason-row-img {
  width: 46%;
}

#reason .reason-row-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

#reason .reason-row-text {
  width: 50%;
}

/* =========================================================
   6. 浜松葬儀のグループ会社（白背景・中央寄せ）
      ・左上/右上に淡い植物装飾(img08/img09)を疑似要素で配置
   ========================================================= */
#reason .reason-company {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  padding: 76px 0 56px;
  text-align: center;
}

/* 左上の淡い葉の装飾 */
#reason .reason-company::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 360px;
  height: 224px;
  background: url(../images/reason/img08.png) no-repeat left top;
  background-size: contain;
  pointer-events: none;
}

/* 右上の淡い葉の装飾 */
#reason .reason-company::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 175px;
  height: 229px;
  background: url(../images/reason/img09.png) no-repeat right top;
  background-size: contain;
  pointer-events: none;
}

/* 本文は装飾より前面に */
#reason .reason-company .container {
  position: relative;
  z-index: 1;
}

#reason .reason-company-building img {
  display: inline-block;
  width: auto;
  height: auto;
}

/* グループ会社見出し（緑） */
#reason .reason-company-ttl {
  font-family: var(--kiwimaru-font);
  color: var(--primary-color-green);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.55;
  margin: 16px 0 30px;
}

/* グループ会社の本文は幅1000pxにし、ブロックは中央寄せ・テキストは左寄せ */
#reason .reason-company p {
  width: 1000px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* 会員様10%引バナー（中央寄せ） */
#reason .reason-company-member {
  margin-top: 40px;
}

#reason .reason-company-member a {
  display: inline-block;
  transition: ease all 0.3s;
}

#reason .reason-company-member a:hover {
  opacity: 0.8;
}

#reason .reason-company-member img {
  width: 408px;
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   7. フッター手前の装飾（お問合せセクションと重ねる花の背景）
      ・他ページと同じ cremation の花素材を利用
   ========================================================= */
#reason .bottom-pc-background {
  background-image: url(../images/cremation/left-bg-flower.png),
    url(../images/cremation/right-bg-flower.png);
  background-repeat: no-repeat;
  background-position: 0% 431%, 100% 136%;
  background-size: 20%, 20%;
  height: 800px;
  z-index: -1;
  position: relative;
}

/* =========================================================
   8. スマートフォン（640px以下）
      ※ 開閉メニュー（.menucontainer）のPCカード型デザインは pcstyles.css に汎用ルールとして移設済み
   ========================================================= */
@media only screen and (max-width: 640px) {
    #reason .tel-and-menu-container, .tel-btn-container {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
  
  /* --- ヘッダー --- */
  #reason .main-header-container {
    background-image: url(../images/reason/main_sp.jpg);
    max-width: 640px;
    height: 71.71875vw;
    background-position: center;
    background-size: cover;
  }

  /* スマホ用ナビ（上部固定・前面） */
  #reason .main-nav-container {
    display: flex;
    justify-content: space-between;
    position: sticky;
    top: 0;
    align-items: center;
    z-index: 1000;
    padding: 2.5vw 2.5vw 0;
    margin-bottom: -11vh;
  }

  #reason figure.header-body-title-container h2 {
    font-size: calc(250vw / 26) !important;
    text-align: center;
    line-height: 1.5;
  }

  /* --- 本文タイポグラフィ --- */
  #reason main p {
    line-height: 1.9;
  }

  /* --- イントロ --- */
  #reason .reason-intro {
    padding: 9% 0 12%;
  }

  /* イントロ内コンテナの左右余白 */
  #reason .reason-intro .container {
    padding: 0 1em;
  }

  #reason .reason-sec-ttl {
    font-size: 5.2vw;
    padding-bottom: 3vw;
    margin-bottom: 6vw;
  }

  /* 写真は上部に背景表示し、本文はその下に配置（padding-top で画像の高さ分だけ下げる）
     img01_sp.jpg は 640x494 のため、高さは横幅の 77.19%（494/640） */
  #reason .reason-intro-body {
    flex-direction: column;
    background-image: url(../images/reason/img01_sp.jpg);
    background-position: top center;
    background-size: 100% auto;
    padding-top: 77.19%;
  }

  #reason .reason-intro-text {
    width: 100%;
  }

  /* --- サービス紹介 --- */
  #reason .reason-service {
    padding: 9% 0 11%;
  }

  #reason .reason-block {
    padding: 6vw 5vw;
    margin: 0 1em 5vw 1em;
    border-radius: 8px;
  }

  #reason .reason-block-ttl {
    font-size: 4.6vw;
    padding-bottom: 3vw;
    margin-bottom: 5vw;
  }

  /* 写真→本文の縦積み（左右指定を解除） */
  #reason .reason-row,
  #reason .reason-row--img-right,
  #reason .reason-row--img-left {
    flex-direction: column;
  }

  #reason .reason-row + .reason-row {
    margin-top: 7vw;
  }

  #reason .reason-row-img,
  #reason .reason-row-text {
    width: 100%;
  }

  #reason .reason-row-img {
    margin-bottom: 5vw;
  }

  /* --- グループ会社 --- */
  #reason .reason-company {
    padding: 11% 0 9%;
  }

  /* コンテナの左右余白 */
  #reason .reason-company .container {
    margin: 0 1em;
  }

  #reason .reason-company::before {
    width: 100vw;
    height: 100vw;
  }

  /* 右上の装飾はスマホでは非表示 */
  #reason .reason-company::after {
    display: none;
  }

  #reason .reason-company-ttl {
    font-size: 5.6vw;
    margin: 4vw 0 5vw;
  }

  #reason .reason-company-member {
    margin-top: 7vw;
  }

  #reason .reason-company-member img {
    width: 100%;
  }

  /* --- フッター手前の装飾（スマホ用素材：#ossuary .bottom-pc-background と同じ） --- */
  #reason .bottom-pc-background {
    background-image: url(../images/cremation/bottom-sp-bg.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
    height: 41vh;
    z-index: -1;
    /* border-radius: 20px; */
  }

}

/* =========================================================
   9. 狭幅スマートフォン（450px以下）の微調整
   ========================================================= */
@media only screen and (max-width: 450px) {
  #reason .reason-sec-ttl {
    font-size: 20px;
  }

  #reason .reason-block-ttl {
    font-size: 18px;
  }

  #reason .reason-company-ttl {
    font-size: 21px;
  }
}