@charset "utf-8";
/* ==========================================================================
   トップページ専用スタイル（PC版・SP版 共通）
   2026-10-01 新規作成

   読み込み：functions/add_JS_CSS.php の my_stylesheet_method_pc()
             トップページのみ。PC版テーマ・SP版テーマの両方で読み込まれる。

   【PC / SP の振り分けルール】
   このサイトはレスポンシブではなく、サーバー側でテーマを切り替えている。
   画面幅とテーマが一致しないため（例：iPhone横向き＝SP版テーマだが幅850px以上）、
   メディアクエリではなく body のクラスで振り分ける。

     ・PC版テーマ … body にクラスなし  → 通常どおり書く（ベース）
     ・SP版テーマ … body に .spbody    → 「.spbody 〜」で上書きする

     例）
       .gc-salon          { display: flex; }   // PC
       .spbody .gc-salon  { display: block; }  // SP

   小型端末の微調整が必要な場合のみ、.spbody の中で
   @media screen and (max-width:320px) を使う（既存 sp_style.css と同じ流儀）。

   【rem の基準値の違いに注意】
   html { font-size: 62.5% }（＝1rem = 10px）は pc_style.css に書かれており、
   SP版テーマでは dequeue されるため効かない。SP版の 1rem はブラウザ既定の16px。
   PC・SP共通で使う要素では、rem ではなく px 指定にするか、
   .spbody 側で別途サイズを指定すること。

   【読み込み順の注意】
   SP版では top.css の後に sp_style.css が読み込まれる。
   同じ詳細度のセレクタが衝突すると sp_style.css が勝つため、
   既存クラス名の流用は避け、新しいクラス名で組むこと。
   ========================================================================== */

body.home .member_wrap.toponly,
body.home .request_wrap.toponly,
body.home .p-top3point.toponly{
	display: none;
}



/* ==========================================================================
   電話CVバー（プラン下）  ※PC版のみ表示
   .p-topTelCv
   ========================================================================== */

.p-topTelCv {
  position: relative;
  box-sizing: border-box;
  height: 76px;            /* 線の太さ込み */
  margin: 13px 0 0 16px;      /* 人物の頭と吹き出しが出る分 */
  padding: 0 20px 0 118px;
  border: solid 2px #b67d7c;
  border-radius: 5px;
  background: #fff5e9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.p-topTelCv.style2 {
	height: 90px;
	margin-bottom: 20px;
	    margin-top: 30px;
}

/* 人物写真：頭が帯の上に出て、下端は帯の下ラインに揃う（99px - 86px = 13px） */
.p-topTelCv__photo {
  position: absolute;
  left: 0px;
  top: -13px;
  margin: 0;
  line-height: 0;
	overflow: hidden;
    height: 85px;
}

.p-topTelCv.style2 .p-topTelCv__photo {
	height: 99px;
}

.p-topTelCv__photo img {
  width: 95px;
  height: 99px;
}

/* 左側のテキスト：吹き出しの上端が帯から5px出る */
.p-topTelCv__body {
  position: absolute;
  left: 98px;
  top: -10px;
}

/* 吹き出し */
.p-topTelCv__balloon {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  height: 39px;
  margin: 0;
  padding: 0 20px;
  border: solid 2px #cc2529;
  border-radius: 10px;
  background: #fefe54;
  color: #cc2529;
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 44px;
}

/* 吹き出しのしっぽ */
.p-topTelCv__balloon::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 26px;
  height: 13px;
  background: url("../img/top/fukidashi.png") no-repeat center center;
  background-size: 26px 13px;
}

.p-topTelCv__lead {
  margin: 11px 0 0;
  color: #cc2529;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.4!important;
}

.p-topTelCv.style2 .p-topTelCv__lead {
	margin: 9px 0 0 30px;
	line-height: 1.2!important;
}

/* 右側の電話番号 */
.p-topTelCv__tel {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.p-topTelCv__icon {
  margin: 0 8px 0 0;
  text-align: center;
  line-height: 1;
}

.p-topTelCv__icon img {
  width: 40px;
  height: 40px;
  display: block;
  margin: 0 auto;
}

.p-topTelCv__icon span {
  display: block;
  margin-top: 2px;
  color: #cc2529;
  font-size: 1.2rem;
  font-weight: bold;
}

.p-topTelCv__num {
  margin: 0;
  color: #cc2529;
  font-size: 6.0rem;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -1px;
	font-family: Arial, Helvetica, "sans-serif";
}

/* 下の注記 */
.p-topTelCv__notes {
  margin: 14px 0 30px 16px;
  padding: 0;
  list-style: none;
  font-size: 2.4rem;
	font-weight: bold;
  line-height: 1.2;
  color: var(--plan-1day, #4B785B);
  padding-left:1em;
text-indent:-1em;
}

.p-topTelCv__notes li {
  margin: 0;
}


/* ==========================================================================
   相談窓口エリア（サロン／ルーム）  ※PC版・SP版 共通
   .p-topSalon
   ※PCは rem（1rem = 10px）、SPは rem の基準が16pxになるため px で指定
   ========================================================================== */

.p-topSalon {
  margin: 40px 0 0 16px;   /* 左の余白はPCの他要素に合わせる */
}

/* 見出し */
.p-topSalon__title {
  margin: 0 0 20px;
  text-align: center;
  color: #c85037;
  font-size: 4.0rem;
  font-weight: bold;
  line-height: 1.3;
	display: flex;
  justify-content: center;
  align-items: center;
}

.p-topSalon__title span {
	white-space: nowrap;
}

.p-topSalon__title::before,
.p-topSalon__title::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 64px;
  height: 33px;
  background: url("../img/top/icn_grass_left.svg") no-repeat center center;
  background-size: 64px 33px;
}

.p-topSalon__title::before {
  margin-right: 20px;
}

.p-topSalon__title::after {
  margin-left: 20px;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

/* 2カラム */
.p-topSalon__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}

.p-topSalon__item {
  box-sizing: border-box;
  width: calc((100% - 20px) / 2);   /* 2カラム・間20px */
  border: solid 1px #4b785b;
  border-radius: 10px;
  background: #eeefea;
  overflow: hidden;
}

/* 見出し帯 */
.p-topSalon__head {
  margin: 0;
  height: 50px;
  background: #4b785b;
  color: #fff;
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
  display: flex;
    align-items: center;
    justify-content: center;
}

/* 中身 */
.p-topSalon__body {
  margin: 10px;
  padding: 0;
  background: #fff;
  border-radius: 3px;
}

/* 写真エリア：白エリアの横幅いっぱい・余白なし */
.p-topSalon__photo {
  position: relative;
  margin: 0;
  line-height: 0;
}

.p-topSalon__photo img {
  width: 100%;
  height: auto;
  border-radius: 3px 3px 0 0;
}

/* 勝どきのみ：写真の右下に丸い画像を重ねる（下にはみ出す） */
.p-topSalon__photo .sub {
  position: absolute;
  right: 15px;
  bottom: -30px;
  width: 135px;
  height: 134px;
  border-radius: 50%;
}

/* 情報エリア（写真の下）だけ四方に余白 */
.p-topSalon__info {
  padding: 20px;
}


/* --------------------------------------------------------------------------
   SP版
   -------------------------------------------------------------------------- */

.spbody .p-topSalon {
  margin: 30px 20px 0;   /* 左右の余白は前後の要素に合わせる */
}

.spbody .p-topSalon__title {
  margin-bottom: 15px;
  font-size: 20px;
}

.spbody .p-topSalon__title::before,
.spbody .p-topSalon__title::after {
  width: 44px;
  height: 23px;
  background-size: 44px 23px;
}

.spbody .p-topSalon__title::before {
  margin-right: 10px;
}

.spbody .p-topSalon__title::after {
  margin-left: 10px;
}

/* 縦落ち */
.spbody .p-topSalon__list {
  display: block;
}

.spbody .p-topSalon__item {
  width: auto;
}

.spbody .p-topSalon__item + .p-topSalon__item {
  margin-top: 20px;
}

.spbody .p-topSalon__head {
  height: auto;
  padding: 10px 10px;
  font-size: 16px;
  line-height: 1.4;
}

.spbody .p-topSalon__info {
  padding: 15px 10px;
}

/* SP：丸画像は半分のサイズ */
.spbody .p-topSalon__photo .sub {
  right: 10px;
  bottom: -15px;
  width: 68px;
  height: 67px;
}

/* 情報エリアの中身 */
.p-topSalon__catch {
  margin: 0;
  color: #4a3430;
  font-size: 1.9rem;
  font-weight: bold;
  line-height: 1.4!important;
}

.p-topSalon__name {
  margin: 0;
  color: #4b785b;
  font-size: 3.5rem;
  font-weight: bold;
  line-height: 1.3!important;
}

.p-topSalon__free {
  margin: 2px 0 0;
  color: #c85037;
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.4!important;
}

.p-topSalon__hours {
  margin: 10px 0 0;
  padding: 5px 10px;
  background: #c85037;
  border-radius: 3px;
  color: #fff;
  font-size: 1.6rem;
  text-align: center;
  line-height: 1.4;
}

/* 下段：ラベル＋住所 */
.p-topSalon__place {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  margin-top: 15px;
}

.p-topSalon__label {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  margin: 0 15px 0 0;
  padding: 8px 15px;
  border: solid 1px #c85037;
  border-radius: 3px;
  color: #c85037;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.4;
}

.p-topSalon__address {
  margin: 0;
  color: #4a3430;
  font-size: 1.6rem;
  line-height: 1.5;
}

.p-topSalon__map {
  margin: 2px 0 0;
  font-size: 1.4rem;
  line-height: 1.5;
}

.p-topSalon__map a {
  color: #0060ff;
}

.p-topSalon__map a:hover {
  color: #f4041a;
}

.p-topSalon__map a::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 14px;
  height: 14px;
  margin-left: 5px;
  background: url("../img/icn_blank.png") no-repeat center center;
  background-size: 14px 14px;
}

/* SP */
.spbody .p-topSalon__catch { font-size: 14px; }
.spbody .p-topSalon__name  { font-size: 25px; }
.spbody .p-topSalon__free  { font-size: 16px; }

.spbody .p-topSalon__hours {
  font-size: 14px;
  text-align: left;
}

.spbody .p-topSalon__label {
  margin-right: 10px;
  padding: 6px 10px;
  font-size: 14px;
}

.spbody .p-topSalon__address { font-size: 14px; }
.spbody .p-topSalon__map     { font-size: 13px; }


/* ==========================================================================
   おすすめする葬儀式場  ※PC版・SP版 共通
   .p-topHall
   ========================================================================== */

.p-topHall {
  margin: 20px 0 20px 16px;
  padding: 20px;
  background: #eaf2db;
  border-radius: 5px;
}

/* 見出し */
.p-topHall__title {
  margin: 0 0 20px;
  text-align: center;
  color: #4b785b;
  font-size: 3.6rem;
  font-weight: bold;
  line-height: 1.3;
}

.p-topHall__title span {
  display: inline-block;
  vertical-align: middle;
  padding-bottom: 8px;
  border-bottom: solid 6px #cedfa8;
}

.p-topHall__title::before,
.p-topHall__title::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 64px;
  height: 33px;
  background: url("../img/top/icn_grass_left.svg") no-repeat center center;
  background-size: 64px 33px;
}

.p-topHall__title::before { margin-right: 20px; }
.p-topHall__title::after  { margin-left: 20px; -webkit-transform: scaleX(-1); transform: scaleX(-1); }

/* 式場一覧（PC：5列） */
.p-topHall__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-topHall__item {
  box-sizing: border-box;
  width: calc((100% - 80px) / 5);   /* 5列・間20px */
  margin-bottom: 20px;
  text-align: center;
}

.p-topHall__item img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
	border-radius: 3px;
}

.p-topHall__name {
  margin: 8px 0 0;
  color: #656565;
  font-size: 1.3rem;
  line-height: 1.3!important;
	font-weight: bold;
}

/* 下部の緑ボックス */
.p-topHall__area {
  padding: 15px;
  background: #3b7554;
  border-radius: 5px;
  text-align: center;
}

.p-topHall__areaTitle {
  margin: 0;
  color: #fff;
  font-size: 3.6rem;
  font-weight: bold;
  line-height: 1.3;
}

.p-topHall__areaTitle span {
  color: #dde4df;
  font-size: 2.9rem;
}

.p-topHall__areaNote {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: solid 3px #8ea58c;
  color: #dde4df;
  font-size: 2.1rem;
  line-height: 1.5;
}


/* --------------------------------------------------------------------------
   SP版
   -------------------------------------------------------------------------- */

.spbody .p-topHall {
  width: 100%;
  box-sizing: border-box;
  margin: 30px 0 0;
  padding: 15px;
  border-radius: 0;
}

.spbody .p-topHall__title {
  position: relative;
  margin-bottom: 15px;
  padding-bottom: 8px;
  font-size: min(20px, 5.95vw);
  border-bottom: solid 6px #cedfa8;   /* ラインは葉アイコンの下まで伸ばす */
	display: flex;
  justify-content: center;
  align-items: center;
}



.spbody .p-topHall__title span {
  padding-bottom: 0;
  border-bottom: none;
	white-space: nowrap;
}

.spbody .p-topHall__title::before,
.spbody .p-topHall__title::after {
  width: 44px;
  height: 23px;
  background-size: 44px 23px;
}

.spbody .p-topHall__title::before { margin-right: 10px; }
.spbody .p-topHall__title::after  { margin-left: 10px; }

/* SP：2列 */
.spbody .p-topHall__item {
  width: calc((100% - 20px) / 2);
}

.spbody .p-topHall__name      { font-size: 13px; }
.spbody .p-topHall__areaTitle { font-size: 25px; }

.spbody .p-topHall__areaTitle span {
  display: block;
  font-size: 15px;
}

.spbody .p-topHall__areaNote { font-size: 15px; }


/* ==========================================================================
   3プランの上のリード文（PCトップのみ）  2026-10-04
   ※SP版テーマの front-page.php には入れていないのでSPには出ない
   ========================================================================== */
.p-topPlanLead {
  margin: 28px 0 24px;
  color: var(--plan-1day, #4B785B);
  font-size: 2.7rem;      /* 27px */
  font-weight: bold;
  line-height: 1.45;
  text-align: center;
}


/* ==========================================================================
   SPトップ「お葬式プランのご案内」見出し ＋ 無料会員登録バナー  2026-10-04
   ※見出しは .brw-bk（茶）から専用クラスに変更。
     .brw-bk は SP の /plan/ 一覧やお寺ブロックでも使われているため、
     そちらに影響しないよう別クラスにしている。
   ========================================================================== */
.funeral-plan-area .funeral-plan .plan-title-outer.gc-planHead {
  background-color: #006600;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 17px;
  padding: 10px;
}

/* プラン一覧の上に移動した無料会員登録バナーの左右余白を、本文に揃える */
.funeral-plan-area .funeral-plan .tel_box_top {
  margin: 0 20px 20px;
}


/* ==========================================================================
   SPトップ ヒーロー下のリード文  2026-10-04
   ※SP版の front-page.php にのみ記述しているのでPCには出ない
   ========================================================================== */
.gc-heroLead {
  margin: 0 20px 10px;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.4;
  text-align: left;
}
.gc-heroLead em {
  font-style: normal;
  color: #cc2529;
}


/* ==========================================================================
   SPトップ「感謝でおくるお葬式」ボックス ＋ その下のリード文  2026-10-04
   ※横幅は上の .tel_box（搬送安置サポート）に合わせて calc(100% - 40px)
   ========================================================================== */
.gc-kansha {
  box-sizing: border-box;
  width: calc(100% - 40px);
  margin: 0 auto 22px;
  padding: 20px 15px 10px;
  border: solid 1px #ac7393;
  border-radius: 4px;
  background: #FFFFFF;
}
.gc-kansha__title {
  margin: 0;
  color: #333333;
  font-size: 26px;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
}
/* 見出し下の短い区切り線 */
.gc-kansha__title::after {
  content: "";
  display: block;
  width: 62px;
  height: 4px;
  margin: 13px auto 20px;
  background: #ac7393;
}
.gc-kansha__txt {
  margin: 0;
  color: #525252;
  font-size: 16px;
  line-height: 1.4;
}

.gc-planLeadSp {
  width: calc(100% - 40px);
  margin: 0 auto 0px;
  color: var(--plan-1day, #4B785B);
  font-size: 20px;
  font-weight: bold;
  line-height: 1.35;
  text-align: left;
}


/* ==========================================================================
   SPトップ 体験レポート：動画のサムネイルに再生アイコンを重ねる  2026-10-04
   .user_ph に has-mov を付けて <span class="ic-mov"></span> を入れた行だけ出る
   ========================================================================== */
.user_wrap_top .user_ph.has-mov {
  position: relative;
}
.user_wrap_top .user_ph.has-mov .ic-mov {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  background: url("../img/ic_fluent_play_circle_48_regular.svg") center center no-repeat;
  background-size: 100% auto;
  z-index: 3;
  pointer-events: none;   /* カード全体のクリック（click_R）を邪魔しない */
}