@charset "utf-8";

/*
 * Blog CTA Component (Scoped)
 *
 * 記事ページに [cta_contact] / [cta_urgent] ショートコードで挿入される CTA 用のスタイル。
 * 既存の area_place_access.css / common_new_top.css / top_new_style.css から CTA関連ルールだけを
 * 抽出し、すべてのセレクタを .blog-cta スコープで囲うことでグローバル汚染を防ぐ。
 *
 * テンプレート: template-parts/cta-contact-*.php, template-parts/cta-urgent-*.php
 * 各テンプレートの最外要素に .blog-cta クラスを持たせる前提で、内部の既存クラス名
 * (.contactInfo2 / .urgent_and_recommend など) はそのまま使う。
 *
 * 抽出スクリプト: scripts/extract_cta_css.py
 */

/* ============================================================
 * blog.css 干渉打ち消し
 *
 * 記事本文 (.article_contents) や記事ラッパ (.article_box) 内に CTA が置かれた時、
 * blog.css の汎用ルール（h2/h3 のborder、p の padding-bottom、a の underline 等）が
 * .blog-cta 配下に効いてしまう。スコープが .blog-cta 内に限定された打ち消しを入れる。
 * ============================================================ */

.article_box .blog-cta a,
.article_box .blog-cta a:hover {
    text-decoration: none;
}

.article_contents .blog-cta h2,
.article_contents .blog-cta h3 {
    border-bottom: none;
    border-left: none;
    padding-left: 0;
    margin: 0;
}

.article_contents .blog-cta p {
    padding-bottom: 0;
}

.article_contents .blog-cta * + * {
    margin-top: 0;
}

/* ============================================================
 * Narrow column override
 *
 * CTAは 1000px+ の広いカラム前提で組まれているが、ブログ記事本文 (.main = 760px) では
 * 電話・教科書セクションの左右50%横並び（float）が窮屈になる。
 * .article_contents 内では「電話」と「教科書」を縦に積みつつ、各セクション内部の
 * 横並び（電話番号＋情報 / 教科書画像＋テキスト＋ボタン）は全幅でゆったり維持する。
 * ============================================================ */

@media screen and (min-width: 1000px) {
    /* 記事カラム(760px)いっぱいに表示する。
       共通ルール側の .contactInfo2 { width: 90% } を打ち消す（余白の原因だった）。 */
    .article_contents .blog-cta .contactInfo2 {
        width: 100%;
        box-sizing: border-box;
        margin: 30px 0;
        padding: 20px 30px;
    }

    /* 電話・教科書セクションを全幅の縦積みにする（左右50%floatを解除）。
       各セクション内部の横並びはそのまま全幅で活かす。 */
    .article_contents .blog-cta .contactInfo2-staff,
    .article_contents .blog-cta .contactInfo2-num,
    .article_contents .blog-cta .contactInfo2-estimate {
        width: 100%;
        margin: 20px 0;
        float: none;
        height: auto;
    }

    .article_contents .blog-cta .cont_first_btm,
    .article_contents .blog-cta .cont_first_btm ul {
        flex-direction: column;
    }

    .article_contents .blog-cta .cont_first_btm li,
    .article_contents .blog-cta .cont_first_emergency,
    .article_contents .blog-cta .cont_first_beforehand {
        width: 100%;
    }

    .article_contents .blog-cta .cont_first_emergency + .cont_first_beforehand,
    .article_contents .blog-cta .cont_first_beforehand + .cont_first_emergency {
        margin-top: 20px;
    }
}

/* ============================================================
 * SP layout (Figma node 1:8670 準拠)
 *
 * SP版CTAは「グレー背景 + 白カード2枚」構成:
 *   - カード1: 電話ボタン + 見積りボタン + 教科書
 *   - カード2: 葬祭ディレクター（影付き）
 * 元の common_new_top.css にはこのグレー背景・白カード・影が無いため補う。
 * （Figma: 全体 #ebebeb / カード白 / 影 0 4px 4px rgba(0,0,0,.25)）
 * ============================================================ */

@media screen and (max-width: 999px) {
    /* CTA全体の背景グレー（上下の余白を広めに取る） */
    .article_contents .blog-cta {
        background: #ebebeb;
        padding: 32px 11px;
    }

    /* カード1: 電話/見積りボタン + 教科書
       common由来の width:90% を 100% に上書き（右余白の原因だった）。
       375px超の広い画面では Figma のカード幅(354px)で中央寄せにし間延びを防ぐ。 */
    .article_contents .blog-cta .contactInfo2 {
        width: 100%;
        max-width: 720px !important;
        box-sizing: border-box;
        background: #fff;
        margin: 0 auto;
        padding: 24px 13px 28px;
    }

    /* カード2: 葬祭ディレクター（影付き） */
    .article_contents .blog-cta .contactInfo3 {
        width: 100%;
        max-width: 720px !important;
        box-sizing: border-box;
        background: #fff;
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
        margin: 24px auto 0;
        padding: 20px 13px 28px;
    }

    /* ボタンをカード内に収める（カードの padding 分はみ出さないよう border-box）*/
    .article_contents .blog-cta .sp-call-estimate-btn,
    .article_contents .blog-cta .sp-call-estimate-btn > li,
    .article_contents .blog-cta .btn12,
    .article_contents .blog-cta .btn13 {
        box-sizing: border-box;
        width: 100%;
    }

    /* 電話/見積りボタンの影（Figma 準拠に統一） */
    .article_contents .blog-cta .btn12,
    .article_contents .blog-cta .btn13 {
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    }

    /* directors-bg の内側影（二重枠の原因）を解除。
       カード2の影は contactInfo3 側に付与済み。 */
    .article_contents .blog-cta .directors-bg {
        box-shadow: none;
        background: transparent;
    }

    /* 教科書セクション: 画像（左・小）＋ 吹き出し/テキスト（右）の横並び。
       common由来の staff-1 45% + staff-2 60% = 105% で折り返していたのを
       flex で解消し、画像は Figma 準拠の固定幅にする。 */
    .article_contents .blog-cta .contactInfo2-staff {
        display: flex;
        align-items: flex-start;
        justify-content: center; /* 広い幅でも画像＋吹き出しを中央に寄せる */
        gap: 19px; /* Figma: 画像右端→吹き出し左端 */
        width: 100%;
    }
    .article_contents .blog-cta .contactInfo2-staff-1 {
        flex: 0 0 97px; /* Figma: 教科書画像 97px */
        width: 97px;
        float: none;
        margin: 0;
    }
    .article_contents .blog-cta .contactInfo2-staff-1 img {
        width: 100%;
        max-width: 97px !important;
        height: auto;
        margin: 0;
    }
    /* staff-2 は Figma のテキスト幅(173px)に揃え、広い画面でも横に広がりすぎないように */
    .article_contents .blog-cta .contactInfo2-staff-2 {
        flex: 0 1 auto;
        width: auto;
        max-width: 185px !important;
        float: none;
        margin: 0;
    }
    /* 吹き出し画像が staff-2 いっぱい(width:100%)に広がるのを Figma 実測(171px)に制御 */
    .article_contents .blog-cta .contactInfo2-staff-2_uppper img {
        width: auto;
        max-width: 171px !important;
        height: auto;
    }

    /* ディレクターセクション: 相談員写真を Figma 実測(121px)に。
       common由来の a{width:50%} img{width:100%} で大きくなっていたのを抑える。 */
    .article_contents .blog-cta .directors-bg .directors-img {
        justify-content: center;
        gap: 20px; /* Figma: 相談員2人の間隔 */
    }
    .article_contents .blog-cta .directors-bg .directors-img a {
        flex: 0 0 auto;
        width: auto;
    }
    .article_contents .blog-cta .directors-bg .directors-img img {
        width: 121px;
        max-width: 121px !important;
        height: auto;
    }
    /* 「私たち葬祭ディレクターが賜ります。」は Figma では左寄せ */
    .article_contents .blog-cta .directors-bg > h3 {
        text-align: left;
        margin: 0;
    }
}


/* === from: funeral/css/top_new_style.css (media: min-width:1000px) === */

@media screen and (min-width: 1000px) {
  .blog-cta .cont_first_top li {
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	width: 100%;
  }

  .blog-cta .cont_first_top li:first-child h2 {
  	display: flex;
  	font-size: 24px;
  	width: 100%;
  	align-items: center;
  	justify-content: center;

  }

  .blog-cta .cont_first_top {
  	border-bottom: 1px solid #e2e2e2;
  	width: 100%;
  }

  .blog-cta .cont_first_top a {
  	padding: 54px 0 60px 0;
  	line-height: 1.4;
  }

  .blog-cta .cont_first_top ul {
  	display: flex;
  	justify-content: space-around;
  }

  .blog-cta .cont_first_top li:last-child {
  	line-height: 1.7;
  	font-size: 15px;
  	padding-top: 5px;
  }

  .blog-cta .urgent_and_recommend{
  	width: 960px;
  	margin: 0 auto;
  	display: flex;
  }

  .blog-cta .cont_first_btm {
  	width: 100%;
  	display: flex;
  }

  .blog-cta .cont_first_btm ul {
  	display: flex;
  }

  .blog-cta .cont_first_btm li {
  	border-left: 2px solid #B95280;
  	display: flex;
  	width: 50%;
  	flex-direction: column;
      flex-wrap: wrap;
  }

  .blog-cta .cont_first_btm li:first-child {
  	/* padding: 30px 30px 30px 0; */
  }

  .blog-cta .cont_first_btm li:last-child {
  	/* padding: 30px 0 30px 30px; */
  }

  .blog-cta .cont_first_btm .cont_first_left_border {
  	display: flex;
  	align-items: flex-end;
  	border-left:2px solid #B95280;
  }

  .blog-cta .cont_first_btm .left{
  	height: 150px;
  }

  .blog-cta .cont_first_btm .right{
  	height: 200px;
  }

  .blog-cta .cont_first_btm .cont_first_text{
  	width: 70%;
  	background-color: #FFF5F5;
  	padding:10px 20px 5px;
  }

  .blog-cta .cont_first_btm li a::before {

  }

  .blog-cta .cont_first_btm .stuff_circle_img {
  	display: flex;
    align-items: center;
  	width: 100%;
  	margin-top:25px;
  }

  .blog-cta .cont_first_btm .stuff_circle_img img:first-child {
  	width:150px;
  }

  .blog-cta .cont_first_btm .stuff_circle_img img:nth-child(2) {
  	width:55%;
  	margin-left: 10px;
  }

  .blog-cta .cont_first_btm h2 {
  	font-size:16px ;
  	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif !important;
  	margin-bottom: 5px;
  }

  .blog-cta .cont_first_btm p {
  	margin: 0;
  	letter-spacing: 0.8px;
  	color: #B95280;
  	font-size:20px ;
  	margin-bottom: 5px;
  }

  .blog-cta .cont_first_emergency, .blog-cta .cont_first_beforehand{
  	width: 50%;
  }

  .blog-cta .cont_first_beforehand strong {
  	display: inline-block;
  	font-size: 22px;
  	margin: 5px auto 15px;
  }

  @media screen and (max-width: 999px) {
  .blog-cta .cont_first_btm {
  		order: 1;
  	}
  .blog-cta .cont_first_top {
  		order: 4;
  		border: 0;
  	}
  .blog-cta .cont_first_btm ul {
  		flex-direction: column;
  	}
  .blog-cta .cont_first_btm li:first-child,
  	.blog-cta .cont_first_btm li:last-child{
  		width: 100%;
  		padding: 20px;
  		text-align: center;
  	}
  .blog-cta .cont_first_btm a {
  		display: block;
  		padding: 0px 10px 20px;
  	}
  .blog-cta .cont_first_btm li a::before {
  		display: none;
  	}
  .blog-cta .cont_first_btm li:first-child a {
  		background: #f1e8ec;
  		border-bottom: 4px solid #deafc2;
  	}
  .blog-cta .cont_first_btm li:last-child a {
  		background: #ffff;
  		border-bottom: 4px solid #deafc2;
  		border-bottom: 4px solid #a2a2a2;
  	}
  .blog-cta .cont_first_btm h2 {
  		display: block;
  	}
  .blog-cta .cont_first_btm h2 img {
  		display: none;
  	}
  .blog-cta .cont_first_btm h2 span {
  		font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif;
  		font-size: 16px;
  		line-height: 1.4;
  	}
  .blog-cta .cont_first_btm h2 strong {
  		font-size: 22px;
  		margin: 5px auto;
  		color: #ba5080;
  	}
  .blog-cta .cont_first_btm li:last-child {
  		border: none;
  		background: #e1e1e1;
  	}
  .blog-cta .cont_first_top a {
  		padding: 0;
  	}
  .blog-cta .cont_first_top ul,
  	.blog-cta .cont_first_top li,
  	.blog-cta .cont_first_top li:first-child h2 {
  		flex-direction: column;
  	}
  .blog-cta .cont_first_top li {
  		padding: 40px 20px;
  	}
  .blog-cta .cont_first_top li:first-child h2 span {
  		order: 1;
  		display: block;
  		font-size: 24px;
  		margin-bottom: 30px;
  	}
  .blog-cta .cont_first_top li:first-child h2 img {
  		order: 2;
  	}
  .blog-cta .cont_first_top .cont_first_lnk {
  		display: block;
  		width: 80%;
  		background: #419c36;
  		line-height: 60px;
  		font-size: 18px;
  		font-weight: bold;
  		height: 60px;
  		border-radius: 30px;
  		color: #fff;
  		text-align: center;
  		margin: 30px auto 0;
  	}
  .blog-cta .urgent_and_recommend{
  		width: 100%;
  		margin: 0 auto;
  		padding:0 20px 35px; 
  	}
  .blog-cta .cont_first_btm {
  		display: block;
  	}
  .blog-cta .cont_first_btm .cont_first_left_border {
      display: flex;
      align-items: flex-end;
      border-left: 2px solid #B95280;
  	}
  .blog-cta .cont_first_emergency .cont_first_beforehand {
  		text-align: right;
  	}
  .blog-cta .cont_first_emergency {
  		width: 95%;
  		float: right;
  	}
  .blog-cta .cont_first_beforehand {
  		width:85%;
  		float: right;
  	}
  .blog-cta .cont_first_btm .left, .blog-cta .cont_first_btm .right {
      	height: 120px;
  	}
  .blog-cta .cont_first_btm .cont_first_text {
  		width: 100%;
  		background-color: #FFF5F5;
  		padding: 15px 20px 5px;
  	}
  .blog-cta .cont_first_btm .cont_first_text p {
  		position: relative;
  	}
  .blog-cta .cont_first_btm .cont_first_text p::before,  .blog-cta .cont_first_btm .cont_first_text p::after{
  		content: "";
  		display: block;
  		position: absolute;
  		top: 0;
  		bottom: 0;
  		margin: auto;
  	}
  .blog-cta .cont_first_btm .cont_first_text p::before{
  		width: 7px;
  		height: 7px;
  		border-top: 2px solid #fff;
  		border-right: 2px solid #fff;
  		transform: rotate(45deg);
  		right:-2px;
  		z-index: 2;
  	}
  .blog-cta .cont_first_btm .cont_first_text p::after{
  		background: #8D8D8D;
  		width: 22px;
  		height: 22px;
  		border-radius: 50%;
  		right: -11px;
  		z-index: 1;
  	}
  .blog-cta .cont_first_btm .cont_first_text h2 {
  		font-weight: normal;
  		font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif !important;
  	}
  .blog-cta .cont_first_btm .stuff_circle_img img:first-child {
  		width: 35%;
  	}
  .blog-cta .cont_first_btm .stuff_circle_img img:last-child {
  		width: 70%;
  	}
  }
}

/* === from: funeral/style/pc/area_place_access.css (media: min-width:1000px) === */

@media screen and (min-width: 1000px) {
  @media screen and (min-width: 1000px) {
  .blog-cta .contactInfo2_wrapper {
      max-width:1200px;
      margin:0 auto;
      border-top: 1px solid #333;
    }
  .blog-cta .contactInfo2 {
      width:100%;
      border: 1px solid #c5c0b7;
      margin: 50px auto 0;
      display: table;
      padding: 0 40px 20px;
    }
  .blog-cta .contactInfo2 .info {
      width: 50%;
      text-align: center;
      margin: 20px 0;
    }
  .blog-cta .contactInfo2-inner {
      width: 100%;
      display: table;
      padding: 30px 50px 30px 30px;
    }
  .blog-cta .contactInfo2 .h2_wrapper{
      width:1000px;
      margin: 0 auto;
      background-color: #ccc;
      border-bottom: 1px solid #333;
    }
  .blog-cta .contactInfo2 h2 {
      font-size: 30px;
      color: #000;
      display: block;
      padding: 30px 10px 20px;
      text-align: center;
      /* font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif; */
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif !important;
      background:none !important;
      border: none;
      line-height: 1.0;
      font-weight: 500;
    }
  .blog-cta .contactInfo2-staff, .blog-cta .contactInfo2-num, .blog-cta .contactInfo2-estimate {
      width: calc(50% - 34px);
      margin: 30px 17px;
      float: left;
      height: 170px;
    }
  .blog-cta .contactInfo2-staff{
      display: flex;
      justify-content: center;
      align-items: flex-end;
      padding:0 10px;
    }
  .blog-cta .contactInfo2-staff .contactInfo2-staff-1{
      width: 31%;
      margin-bottom: -20px;
    }
  .blog-cta .contactInfo2-staff .contactInfo2-staff-1 img{
      width:100%;
    }
  .blog-cta .contactInfo2-staff .contactInfo2-staff-2{
      width:70%;
    }
  .blog-cta .contactInfo2-staff .contactInfo2-staff-2_uppper{
      display: flex;
      align-items: flex-end;
      margin-bottom: 12px;
    }
  .blog-cta .contactInfo2-staff .contactInfo2-staff-2_uppper p{
      width: 62%;
      margin: 0 0 0 18px;
      text-align: left;
      font-size: clamp(14px, 1vw, 15px);
    }
  .blog-cta .contactInfo2-staff .contactInfo2-staff-2_uppper img{
      width: 38%;
      margin-bottom: -16px;
    }
  .blog-cta .contactInfo2-staff-1 p, .blog-cta .contactInfo2-staff-2 p {
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif;
      text-align: center;
    }
  .blog-cta .contactInfo2-staff {
      text-align: center;
    }
  .blog-cta .contactInfo2-staff-1, .blog-cta .contactInfo2-staff-2 {
      width: 50%;
      float: left;
      text-align: center;
    }
  .blog-cta .contactInfo2-staff-1 img, .blog-cta .contactInfo2-staff-2 img {
      padding: 5px 0 0;
    }
  .blog-cta .contactInfo2-staff-1 p,
      .blog-cta .contactInfo2-staff-2 p {
      font-size: 13px;
      line-height: 1.4em;
    }
  .blog-cta .contactInfo2-staff-1 a, .blog-cta .contactInfo2-staff-2 a {
      display: block;
    }
  .blog-cta .contactInfo2-num{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }
  .blog-cta .contactInfo2-num > .contactInfo2-num_left{
      width:70%;
    }
  .blog-cta .contactInfo2-num > .contactInfo2-num_right {
      width:30%;
      text-align: center;
    }
  .blog-cta .contactInfo2-num > .contactInfo2-num_left > a {
      display: block;
      width: 95%;
      height: 70px;
      padding-left: 52px;
      color: #4b3304;
      text-align: center;
      background: url(../../img/common/contact/gr_2-22.png) no-repeat 6px 10px;
      background-size: 12%;
    }
  .blog-cta .contactInfo2-num > .contactInfo2-num_left > a > span {
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif;
      font-size: clamp(29px, 3.0vw, 36px);
      line-height: 55px;
      padding-top: 5px;
      margin-bottom: 5px;
      letter-spacing: 0.01em;
      white-space: nowrap;
      display: flex;
      justify-content: center;
      text-align: center;
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif !important;
    }
  .blog-cta .contactInfo2-num > .contactInfo2-num_right > span {
      font-size: 13px;
    }
  .blog-cta .contactInfo2-num > .contactInfo2-num_right > p {
      font-size: clamp(14px, 1.4vw, 15px);
      border:1px solid #333;
      border-radius: 5px;
      margin: 5px 0 28px;
      padding:9px 0;
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif;
      line-height: 1;
    }
  .blog-cta .contactInfo2-num > .contactInfo2-num_bottom {
      width: 100%;
    }
  .blog-cta .contactInfo2-num > .contactInfo2-num_bottom > p  {
      font-size: 15px;
      margin:0 0 10px;
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif !important;
      line-height: 1;
    }
  .blog-cta .contactInfo2-num > .contactInfo2-num_bottom > span  {
      font-size: 12px;
    }
  .blog-cta .contactInfo2-estimate {
      margin-top: 30px;
      background: #ffdbdb;
    }
  .blog-cta .contactInfo2-estimate a {
      display: block;
      line-height: 50px;
      height: 100%;
      text-align: center;
    }
  .blog-cta .contactInfo2-estimate a > .bg:before {
      content:"〈";
    }
  .blog-cta .contactInfo2-estimate a > .bg:after {
      content:"〉";
    }
  .blog-cta .contactInfo2-estimate p {
      line-height: 50px;
    }
  }

  @media screen and (max-width:999px) {
  .blog-cta .contactInfo2 {
      width: 90%;
      margin: 30px auto;
      display: block;
      overflow: hidden;
      text-align: center;
      line-height: 1.6em;
      border: none;
      padding-bottom:0;
    }
  .blog-cta .contactInfo2 h2 {
      font-size: 1.2em;
      color: #fff;
      display: block;
      padding: 10px 3px;
      margin: auto;
      text-align: center;
      background: #429c37;
      font-weight: bold;
      line-height: 1.5;
    }
  .blog-cta .contactInfo2 p {
      font-size: 22px;
      margin-top: 10px;
    }
  .blog-cta .contactInfo2 p.info {
      font-weight: bolder;
      text-align: center;
      color: #429c37;
    }
  .blog-cta .contactInfo2-staff,
    .blog-cta .contactInfo2-num,
    .blog-cta .contactInfo2-estimate {
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif;
      text-align: center;
    }
  .blog-cta .contactInfo2-staff {
      width: calc(100% - 20px);
      margin: 10px;
      text-align: center;
    }
  .blog-cta .contactInfo2-staff-1{
      width: 45%;
    }
  .blog-cta .contactInfo2-staff-2{
      width: 60%;
    }
  .blog-cta .contactInfo2-staff-1,
    .blog-cta .contactInfo2-staff-2 {
      float: left;
      text-align: center;
      padding: 0;
    }
  .blog-cta .contactInfo2-staff-1 img,
    .blog-cta .contactInfo2-staff-2 img {
      width: 100%;
      padding: 5px;
    }
  .blog-cta .contactInfo2-staff-1 p,
    .blog-cta .contactInfo2-staff-2 p {
      font-size: 18px;
      line-height: 1.2em;
      margin: 15px 0 0 0px;
      text-align: left;
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif !important;
    }
  .blog-cta .contactInfo2-staff-1 a,
    .blog-cta .contactInfo2-staff-2 a {
      display: block;
    }
  .blog-cta .contactInfo2-num,
    .blog-cta .contactInfo2-estimate,
    .blog-cta .contactInfo2-tel {
      max-width: 420px;
      margin: 0 auto;
    }
  .blog-cta .contactInfo2-num > a {
      display: block;
      width: 100%;
      padding-left: 100px;
      height: 80px;
      color: #4b3304;
      text-align: center;
      background: url(../../img/common/footer/24-365.svg) no-repeat 0 0;
      background-size: contain;
    }
  .blog-cta .contactInfo2-num > a > address {
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif;
      font-size: 45px;
      line-height: 55px;
      padding-top: 5px;
      margin-bottom: 5px;
      display: flex;
      justify-content: space-between;
    }
  .blog-cta .contactInfo2-num > a > address > span {
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif;
    }
  .blog-cta .contactInfo2-num > a > p {
      font-size: 15px;
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif;
      line-height: 20px;
      margin-top: auto;
      -moz-text-align-last: justify;
           text-align-last: justify;
    }
  .blog-cta .contactInfo2-tel-note {
      font-size: 20px;
      width: calc(100% - 40px);
      margin: 10px auto;
      line-height: 1.2;
    }
  .blog-cta .contactInfo2-tel-note span {
      color: #0a62d0;
    }
  .blog-cta .contactInfo2-tel {
      background-color: #ba5080;
      color: #fff;
      line-height: 28px;
      padding: 20px;
      border-radius: 5px;
      box-shadow: #ccc 0 5px 0;
      display: block;
    }
  .blog-cta .contactInfo2-tel p {
      color: #fff;
      display: inline-block;
      /* background: url(../../img/sp/img/common/ico_tel03.png) no-repeat 0 3px;
      background-size: 22px 22px;
      padding-left: 28px; */
      background: url(../../img/sp/img/common/ico_tel03.png) no-repeat 0 5px;
      background-size: 20px 19px;
      padding-left: 25px;
      font-size: 20px;
      font-weight: 700;
      line-height: 28px;
      margin: 0;
    }
  .blog-cta .contactInfo2-tel span {
      font-weight: 500;
    }
  .blog-cta .contactInfo2-estimate {
      background-color: #429c37;
      color: #fff;
      line-height: 28px;
      padding: 20px;
      border-radius: 5px;
      box-shadow: #ccc 0 5px 0;
      display: block;
      margin-top: 20px;
    }
  .blog-cta .contactInfo2-estimate p {
      color: #fff;
      display: inline-block;
      background: url(../../img/sp/img/common/ico_mail03.png) no-repeat 0 3px;
      background-size: 25px 21px;
      padding-left: 35px;
      font-size: 20px;
      line-height: 28px;
      border-radius: 5px;
      margin: 0;
    }
  .blog-cta .contactInfo2-estimate a span {
      font-weight: 500;
    }
  .blog-cta .contactInfo2-staff-1,
    .blog-cta .contactInfo2-staff-2 {
      margin-top: 5px;
      text-align: center;
    }
  .blog-cta .contactInfo2-staff-1 a,
    .blog-cta .contactInfo2-staff-2 a {
      text-decoration: none;
      color: #000;
    }
  .blog-cta .contactInfo2-staff-1 a:hover {
      opacity: 0.9;
    }
  .blog-cta .contactInfo2-estimate a {
      display: block;
      color: #fff;
    }
  .blog-cta .sp-call-estimate-btn {
      width: 100%;
    }
  .blog-cta .sp-call-estimate-btn > li{
      width: 99%;
    }
  .blog-cta .sp-call-estimate-btn > li .sp-fixed-btn-phone-s,
    .blog-cta .sp-call-estimate-btn > li .sp-fixed-btn-phone-xs {
      font-size: 16px;
    }
  .blog-cta .btnInner12 {
      background: #ba5080;
      color: #fff;
    }
  .blog-cta .btnInner13 {
      background: #429c37;
      color: #fff;
    }
  .blog-cta .btn12, .blog-cta .btn13  {
      height: 75px;
      /* border-radius: 4px; */
      box-shadow: 3px 3px 0px 0px rgba(157, 154, 153, 0.7);
    }
  .blog-cta .btnCall12 p,
    .blog-cta .btnMail12 p {
      padding: 8px 0;
      font-size: 13px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 75px;
    }
  .blog-cta .btnCall12 p {
      padding: 10px 0;
      font-size: 13px;
    }
  .blog-cta .tel-bottom12{
      font-size: 15px;
      display: flex;
      margin-top: 3px;
    }
  .blog-cta .btnCall12 span.tel {
      background: url(../../img/sp/img/common/ico_tel04.png) no-repeat 0 3px;
      background-size: 35px 35px;
      padding-left: 57px;
      display: inline-block;
      line-height: 28px;
      font-size: 28px;
      background-position: left;
    }
  .blog-cta .btnMail12 span.mail {
      background: url(../../img/sp/img/common/ico_mail04.png) no-repeat 0 3px;
      background-size: 30px 21px;
      padding-left: 45px;
      background-position: top 45% left 3px;
      line-height: 28px;
      display: inline-block;
      font-size: 28px;
    }
  .blog-cta .btnMail12 span.mail2, .blog-cta .btnCall12 span.tel2  {
      font-size: 19px;
      margin-left: 10px;
    }
  .blog-cta .contactInfo3 {
      display: none;
    }
  }

  @media screen and (max-width: 480px) {
  .blog-cta .contactInfo2-num > a {
      width: calc(100% - 40px);
      max-width: 350px;
      padding-left: 80px;
      height: 60px;
      margin: 0 auto;
    }
  .blog-cta .contactInfo2-num > a > address {
      font-size: 35px;
      line-height: 45px;
      padding-top: 4px;
      margin-bottom: 4px;
    }
  .blog-cta .contactInfo2-num > a > p {
      font-size: 11px;
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif;
      line-height: 15px;
      margin-top: auto;
      -moz-text-align-last: justify;
           text-align-last: justify;
    }
  .blog-cta .contactInfo2-estimate,
      .blog-cta .contactInfo2-tel {
      width: calc(100% - 40px);
      max-width: 350px;
    }
  .blog-cta .contactInfo2-estimate {
      margin-top: 20px;
    }
  .blog-cta .contactInfo2-estimate a span {
      display: none;
    }
  .blog-cta .contactInfo2-tel {
      margin: 0 auto;
    }
  .blog-cta .contactInfo2-tel span {
      font-size: 16px;
    }
  .blog-cta .contactInfo2-tel .contactInfo2-tel-s-hidden {
      display: none;
    }
  }

  @media screen and (max-width: 700px) {
  .blog-cta .contactInfo2 {
      width: 93%;
    }
  .blog-cta .contactInfo2-staff {
      width: 100%;
      margin: 10px auto 0;
      display: flex;
    }
  }
}

/* === from: funeral/style/sp/common_new_top.css (media: max-width:999px) === */

@media screen and (max-width: 999px) {
  .blog-cta .contactInfo2 {
    width: 90%;
    margin: 30px auto;
    display: block;
    overflow: hidden;
    text-align: center;
    line-height: 1.6em;
    border: none;
    padding-bottom:0;
  }

  .blog-cta .contactInfo2 h2 {
    font-size: 1.2em;
    color: #fff;
    display: block;
    padding: 10px 3px;
    margin: auto;
    text-align: center;
    background: #429c37;
    font-weight: bold;
    line-height: 1.5;
  }

  .blog-cta .contactInfo2 p {
    font-size: 22px;
    margin-top: 10px;
  }

  .blog-cta .contactInfo2 p.info {
    font-weight: bolder;
    text-align: center;
    color: #429c37;
  }

  .blog-cta .contactInfo2-staff,
  .blog-cta .contactInfo2-num,
  .blog-cta .contactInfo2-estimate {
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif;
    text-align: center;
  }

  .blog-cta .contactInfo2-staff {
    width: calc(100% - 20px);
    margin: 10px;
    text-align: center;
  }

  .blog-cta .contactInfo2-staff-1{
    width: 45%;
  }

  .blog-cta .contactInfo2-staff-2{
    width: 60%;
  }

  .blog-cta .contactInfo2-staff-1,
  .blog-cta .contactInfo2-staff-2 {
    float: left;
    text-align: center;
    padding: 0;
  }

  .blog-cta .contactInfo2-staff-1 img,
  .blog-cta .contactInfo2-staff-2 img {
    width: 100%;
    padding: 5px;
  }

  .blog-cta .contactInfo2-staff-1 p,
  .blog-cta .contactInfo2-staff-2 p {
    font-size: 18px;
    line-height: 1.2em;
    margin: 15px 0 0 0px;
    text-align: left;
  }

  .blog-cta .contactInfo2-staff-1 a,
  .blog-cta .contactInfo2-staff-2 a {
    display: block;
  }

  .blog-cta .contactInfo2-num,
  .blog-cta .contactInfo2-estimate,
  .blog-cta .contactInfo2-tel {
    max-width: 420px;
    margin: 0 auto;
  }

  .blog-cta .contactInfo2-num > a {
    display: block;
    width: 100%;
    padding-left: 100px;
    height: 80px;

    color: #4b3304;
    text-align: center;

    background: url(../../img/common/footer/24-365.svg) no-repeat 0 0;
    background-size: contain;
  }

  .blog-cta .contactInfo2-num > a > address {
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif;
    font-size: 45px;
    line-height: 55px;
    padding-top: 5px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
  }

  .blog-cta .contactInfo2-num > a > address > span {
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif;
  }

  .blog-cta .contactInfo2-num > a > p {
    font-size: 15px;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif;
    line-height: 20px;
    margin-top: auto;
    text-align-last: justify;
  }

  .blog-cta .contactInfo2-tel-note {
    font-size: 20px;
    width: calc(100% - 40px);
    margin: 10px auto;
    line-height: 1.2;
  }

  .blog-cta .contactInfo2-tel-note span {
    color: #0a62d0;
  }

  .blog-cta .contactInfo2-tel {
    background-color: #ba5080;
    color: #fff;
    line-height: 28px;
    padding: 20px;
    border-radius: 5px;
    box-shadow: #ccc 0 5px 0;
    display: block;
  }

  .blog-cta .contactInfo2-tel p {
    color: #fff;
    display: inline-block;
    /* background: url(../../img/sp/img/common/ico_tel03.png) no-repeat 0 3px;
    background-size: 22px 22px;
    padding-left: 28px; */
    background: url(../../img/sp/img/common/ico_tel03.png) no-repeat 0 5px;
    background-size: 20px 19px;
    padding-left: 25px;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    margin: 0;
  }

  .blog-cta .contactInfo2-tel span {
    font-weight: 500;
  }

  .blog-cta .contactInfo2-estimate {
    background-color: #429c37;
    color: #fff;
    line-height: 28px;
    padding: 20px;
    border-radius: 5px;
    box-shadow: #ccc 0 5px 0;
    display: block;
    margin-top: 20px;
  }

  .blog-cta .contactInfo2-estimate p {
    color: #fff;
    display: inline-block;
    background: url(../../img/sp/img/common/ico_mail03.png) no-repeat 0 3px;
    background-size: 25px 21px;
    padding-left: 35px;
    font-size: 20px;
    line-height: 28px;
    border-radius: 5px;
    margin: 0;
  }

  .blog-cta .contactInfo2-estimate a span {
    font-weight: 500;
  }

  @media screen and (max-width: 480px) {
  .blog-cta .contactInfo2-num > a {
      width: calc(100% - 40px);
      max-width: 350px;
      padding-left: 80px;
      height: 60px;
      margin: 0 auto;
    }
  .blog-cta .contactInfo2-num > a > address {
      font-size: 35px;
      line-height: 45px;
      padding-top: 4px;
      margin-bottom: 4px;
    }
  .blog-cta .contactInfo2-num > a > p {
      font-size: 11px;
      font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif;
      line-height: 15px;
      margin-top: auto;
      text-align-last: justify;
    }
  .blog-cta .contactInfo2-estimate,
    .blog-cta .contactInfo2-tel {
      width: calc(100% - 40px);
      max-width: 350px;
    }
  .blog-cta .contactInfo2-estimate {
      margin-top: 20px;
    }
  .blog-cta .contactInfo2-estimate a span {
      display: none;
    }
  .blog-cta .contactInfo2-tel {
      margin: 0 auto;
    }
  .blog-cta .contactInfo2-tel span {
      font-size: 16px;
    }
  .blog-cta .contactInfo2-tel .contactInfo2-tel-s-hidden {
      display: none;
    }
  }

  @media screen and (max-width: 700px) {
  .blog-cta .contactInfo2 {
      width: 93%;
    }
  .blog-cta .contactInfo2-staff {
      width: 100%;
      margin: 10px auto 0;
      display: flex;
    }
  }

  .blog-cta .contactInfo2-staff-1,
  .blog-cta .contactInfo2-staff-2 {
    margin-top: 5px;
    text-align: center;
  }

  .blog-cta .contactInfo2-staff-1 a,
  .blog-cta .contactInfo2-staff-2 a {
    text-decoration: none;
    color: #000;
  }

  .blog-cta .contactInfo2-staff-1 a:hover {
    opacity: 0.9;
  }

  .blog-cta .contactInfo2-estimate a {
    display: block;
    color: #fff;
  }

  .blog-cta .sp-call-estimate-btn {
    width: 100%;
  }

  .blog-cta .sp-call-estimate-btn > li{
    width: 99%;
  }

  .blog-cta .sp-call-estimate-btn > li .sp-fixed-btn-phone-s,
  .blog-cta .sp-call-estimate-btn > li .sp-fixed-btn-phone-xs {
    font-size: 16px;
  }

  .blog-cta .btnInner12 {
    background: #ba5080;
    color: #fff;
  }

  .blog-cta .btnInner13 {
    background: #429c37;
    color: #fff;
  }

  .blog-cta .btn12, .blog-cta .btn13  {
    height: 75px;
    /* border-radius: 4px; */
    box-shadow: 3px 3px 0px 0px rgba(157, 154, 153, 0.7);
  }

  .blog-cta .btnCall12 p,
  .blog-cta .btnMail12 p {
    padding: 8px 0;
    font-size: 13px;
    text-align: center;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 75px;
  }

  .blog-cta .btnCall12 p {
    padding: 10px 0;
    font-size: 13px;
  }

  .blog-cta .tel-bottom12{
    font-size: 15px;
    display: flex;
    margin-top: 3px;
  }

  .blog-cta .btnCall12 span.tel {
    background: url(../../img/sp/img/common/ico_tel04.png) no-repeat 0 3px;
    background-size: 35px 35px;
    padding-left: 57px;
    display: inline-block;
    line-height: 28px;
    font-size: 28px;
    background-position: left;
  }

  .blog-cta .btnMail12 span.mail {
    background: url(../../img/sp/img/common/ico_mail04.png) no-repeat 0 3px;
    background-size: 30px 21px;
    padding-left: 45px;
    background-position: top 45% left 3px;
    line-height: 28px;
    display: inline-block;
    font-size: 28px;
  }

  .blog-cta .btnMail12 span.mail2, .blog-cta .btnCall12 span.tel2  {
    font-size: 19px;
    margin-left: 10px;
  }

  .blog-cta .contactInfo3 {
    width: 100%;
    background: #ECECEC;
    padding: 35px 0;
    box-shadow: 0px 3px 6px #00000029;
  }

  .blog-cta .directors-bg{
    background: #fff;
    margin: 0 20px;
    padding: 30px 8px;
    box-shadow: 3px 3px 0px 0px rgba(157, 154, 153, 0.7);
  }

  .blog-cta .directors-bg h3{
    font-size: 20px;
    font-weight: normal;
    padding-bottom: 10px;
    margin :0 auto;
    text-align: center;
    letter-spacing:-1px;
  }

  .blog-cta .directors-bg p{
    font-size: 15px;
    line-height:1;
    margin-bottom: 10px;
  }

  .blog-cta .directors-bg span{
    font-size: 13px;
    text-align: left;
  }

  .blog-cta .directors-bg h3, .blog-cta .directors-bg p, .blog-cta .directors-bg span{
    letter-spacing: 0.0em;
  }

  .blog-cta .directors-bg .directors-img{
    display: flex;
    justify-content: space-around;
  }

  .blog-cta .directors-bg .directors-img a{
    width:50%;
  }

  .blog-cta .directors-bg .directors-img img{
    width:100%;
  }

  .blog-cta .directors-bg .first-exp{
    display: flex;
    align-items: center;
    justify-content: center;
    margin :20px 0;
  }

  .blog-cta .directors-bg .first-exp img{
    width:16%;
  }

  .blog-cta .directors-bg .first-exp h3{
    font-size: 20px;
    font-weight: normal;
    padding-bottom:0;
    margin:0 0 0 10px;
  }

  .blog-cta .contactInfo3 {
    width: 90%;
    margin: 30px auto;
    display: block;
    padding-bottom: 20px;
    overflow: hidden;
    text-align: center;
    line-height: 1.6em;
  }

  .blog-cta .contactInfo3 h2 {
    font-size: 1.2em;
    color: #fff;
    display: block;
    padding: 10px 3px;
    margin: auto;
    text-align: center;
    background: #429c37;
    font-weight: bold;
    line-height: 1.5;
  }

  .blog-cta .contactInfo3 p {
    font-size: 22px;
    margin-top: 20px;
  }

  .blog-cta .contactInfo3 p.info {
    font-weight: bolder;
    text-align: center;
    color: #429c37;
  }

  .blog-cta .contactInfo3-staff,
  .blog-cta .contactInfo3-num,
  .blog-cta .contactInfo3-estimate {
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif;
    text-align: center;
  }

  .blog-cta .contactInfo3-staff {
    width: calc(100% - 20px);
    margin: 10px;
    text-align: center;
  }

  .blog-cta .contactInfo3-staff-1,
  .blog-cta .contactInfo3-staff-2 {
    width: 50%;
    float: left;
    text-align: center;
  }

  .blog-cta .contactInfo3-staff-1 img,
  .blog-cta .contactInfo3-staff-2 img {
    width: 100%;
    padding: 10px;
  }

  .blog-cta .contactInfo3-staff-1 p,
  .blog-cta .contactInfo3-staff-2 p {
    font-size: 13px;
    line-height: 1.4em;
    margin-top: 0;
  }

  .blog-cta .contactInfo3-staff-1 a,
  .blog-cta .contactInfo3-staff-2 a {
    display: block;
  }

  .blog-cta .contactInfo3-num,
  .blog-cta .contactInfo3-estimate,
  .blog-cta .contactInfo3-tel {
    max-width: 420px;
    margin: 0 auto;
  }

  .blog-cta .contactInfo3-estimate {
    background-color: #429c37;
    color: #fff;
    line-height: 28px;
    padding: 20px;
    border-radius: 5px;
    box-shadow: #ccc 0 5px 0;
    display: block;
    margin-top: 20px;
  }

  .blog-cta .contactInfo3-estimate p {
    color: #fff;
    display: inline-block;
    background: url(../../img/sp/img/common/ico_mail03.png) no-repeat 0 3px;
    background-size: 25px 21px;
    padding-left: 35px;
    font-size: 20px;
    line-height: 28px;
    border-radius: 5px;
    margin: 0;
  }

  .blog-cta .contactInfo3-estimate a span {
    font-weight: 500;
  }

  @media screen and (max-width: 480px) {
  .blog-cta .contactInfo3-estimate,
    .blog-cta .contactInfo3-tel {
      width: calc(100% - 40px);
      max-width: 350px;
    }
  .blog-cta .contactInfo3-estimate {
      margin-top: 20px;
    }
  .blog-cta .contactInfo3-estimate a span {
      display: none;
    }
  }

  @media screen and (max-width: 700px) {
  .blog-cta .contactInfo3 {
      width: 95%;
    }
  .blog-cta .contactInfo3-staff {
      width: 100%;
      margin: 0 auto;
      display: flex;
    }
  }

  .blog-cta .contactInfo3-staff-1,
  .blog-cta .contactInfo3-staff-2 {
    margin-top: 5px;
    padding: 0 10px;
    text-align: center;
  }

  .blog-cta .contactInfo3-staff-1 a,
  .blog-cta .contactInfo3-staff-2 a {
    text-decoration: none;
    color: #000;
  }

  .blog-cta .contactInfo3-staff-1 a:hover {
    opacity: 0.9;
  }

  .blog-cta .contactInfo3-estimate a {
    display: block;
    color: #fff;
  }
}