@charset "utf-8";
/* ==========================================================================
   BP Parts : 記事内パーツ用CSS
   CTAボックス / スタッフの推しポイント / ご感想 / ボタン / 関連記事（nlink）

   ★ 色の変更は、この :root の変数のカラーコードを書き換えるだけで OK です（サイトのテーマカラーに合わせる）。
   ========================================================================== */
:root {
  --bp-accent:  #3a75bb; /* CTAの枠・タイトル・強調文字 */
  --bp-main:    #1a335b; /* 通常のボタン */
  --bp-blue:    #3a75bb; /* CTA 画像対応タイプのボタン */
  --bp-bg:      #edf5fc; /* スタッフの推しポイント・ご感想の背景 */
  --bp-bg-gray: #edf5fc; /* 関連記事の背景 */
  --bp-line:    #3a75bb; /* ご感想の見出し下線 */
  --bp-card:    #3a75bb; /* 関連記事のラベルと線（初期値はボタンと同じ色） */
}

/* CTA用　20260911
----------------------------------------------------------------------------------*/
.blog_cta_box {
  background: #fff;
  margin: 2em auto;
  font-size: 16px;
  border: solid 2px var(--bp-accent);
  border-radius: 1em;
}

@media screen and (max-width: 960px) {
  .blog_cta_box {
    font-size: 13px;
  }
}

@media screen and (max-width: 480px) {
  .blog_cta_box {
    font-size: 13px;
  }
}

.blog_cta_box_inner {
  font-size: 1em;
}

.blog_cta_title {
  border-bottom: solid 1px var(--bp-accent);
  color: var(--bp-accent);
  padding: 0.7em 1em;
  font-size: 1.4em;
  font-weight: bold;
}

.blog_cta_textbox {
  padding: 1em;
}

.blog_cta_sub_title {
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 1em;
}

.blog_cta_sub_title_l {
  font-size: 1.3em;
}

.blog_cta_sub_title_l {
  color: var(--bp-accent);
}

.blog_cta_wrap {
  margin-bottom: 2em;
}

/* スマホ：本文とサブタイトルを大きく（強調部分 .blog_cta_sub_title_l は従来のサイズのまま） */
@media screen and (max-width: 960px) {
  .blog_cta_text {
    font-size: 15px;
  }
  .blog_cta_sub_title {
    font-size: 16px;
  }
  .blog_cta_sub_title_l {
    font-size: 18.6px;
  }
}

.blog_cta_btn_box {
  text-align: center;
}

.blog_cta_btn_title {
  display: inline-block;
  position: relative;
  padding: 0 1em;
  font-weight: bold;
}

.blog_cta_btn_title:before,
.blog_cta_btn_title:after {
  content: "";
  background: #000;
  height: 1.5em;
  width: 2px;
  position: absolute;
  top: 50%;
}

.blog_cta_btn_title:before {
  left: 0;
  transform: translate(-0%, -50%) rotate(-35deg);
}

.blog_cta_btn_title:after {
  right: 0;
  transform: translate(-0%, -50%) rotate(35deg);
}

.blog_cta_btn {
  max-width: 95%;
  margin:0.5em auto auto  auto;
}
/* 編集画面（ブロックエディタ）で p の文字寄せが戻されても、ボタンが中央に来るよう、横並びで寄せる */
.blog_cta_btn_box .blog_cta_btn {
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 1em; /* ボタンの下の余白。flex にすると行の隙間が消えるため、明示する */
}

.blog_cta_btn a {
  align-items: center;
  justify-content: center;
  display: inline-flex !important;
  background: var(--bp-main);
  border: solid 1px var(--bp-main);
  border-radius: 15em !important;
  color: #fff !important;
  font-weight: bold !important;
  padding: 0.3em 1em !important;
  text-decoration: none !important;
  font-size: 1.2em;
   margin: auto;
  transition: all 0.15s ease;
}

.blog_btn_arrow {
  display: inline-block;
  position: relative;
  padding-right: 2em;
}

.blog_btn_arrow:before {
  position: absolute;
  right: 0;
  top: 50%;
  display: block;
  width: 7px;
  height: 7px;
  margin: auto;
  content: '';
  transform: translate(-0%, -50%) rotate(45deg);
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

@media screen and (min-width: 961px),
print {
  .blog_cta_btn a:hover {
    color: var(--bp-main) !important;
    background: #fff !important;
  }

  .blog_btn_arrow::hover:before {
    border-top: 2px solid var(--bp-main) !important;
    border-right: 2px solid var(--bp-main) !important;
  }
}


/* blog_cta ver.2 */
.blog_cta_v2 .blog_cta_textbox {
  position: relative;
  z-index: 0;
}

.blog_cta_v2 .blog_cta_wrap {
  display: flex;
  gap:0 1em
}
.blog_cta_v2 .blog_cta_wrap .blog_cta_text{
width: 60%;
}
.blog_cta_v2 .blog_cta_wrap .blog_cta_img{
width: 40%;
}
.blog_cta_v2 .blog_cta_wrap .blog_cta_img img{
width: 100%;
}
.blog_cta_v2 .blog_cta_btn a {
  background: var(--bp-blue);
  border: solid 1px var(--bp-blue);
}

@media screen and (min-width: 961px),
print {
  .blog_cta_v2 .blog_cta_btn a:hover {
    color: var(--bp-blue) !important;
    background: #fff !important;
  }

  .blog_cta_v2 .blog_btn_arrow:hover:before {
    border-top: 2px solid var(--bp-blue) !important;
    border-right: 2px solid var(--bp-blue) !important;
  }
}

@media screen and (max-width: 480px) {
  .blog_cta_v2 .blog_cta_wrap {
    display: block;
  }


.blog_cta_v2 .blog_cta_wrap .blog_cta_text{
width: auto;
}
.blog_cta_v2 .blog_cta_wrap .blog_cta_img{
width: auto;
margin: 1em auto;
}

}

/* ブログカード
------------------------*/
/* blog_point
============================================================================================================ */
.blog_point {
  display: flex;
  margin: 2em 0 0;
  background: var(--bp-bg);
  border-radius: 4px;
  padding: 1em;
}
.blog_point .photo_icon {
  width: 100px;
  height: 100px;
  margin-bottom: 0.5em;
}
.blog_point .photo_icon img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0;
  object-fit: cover;
}
.blog_point .name {
  font-size: 14px;
  text-align: center;
}
.blog_point .arrow_box {
  width: 100%;
  position: relative;
  display: inline-block;
  margin-right: 30px;
  padding: 1em;
  background: #fff;
  border-radius: 4px;
  text-align: left;
  line-height: 1.5;
}
.blog_point .arrow_box::after {
  content: "";
  position: absolute;
  top: 30%;
  right: -14px; /* 本体と1px重ねて、すき間が出ないようにする */
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  border-right: 0;
}
.blog_point .arrow_box > p:last-child {
  margin-bottom: 0;
}
.blog_point .arrow_box p.arrow_box_title {
  font-size: 19px;
  margin-bottom: 0.7em;
}
.blog_point .arrow_box p {
    font-size: 16px;
    line-height: 1.7;
}
@media screen and (max-width: 768px) {
  .blog_point {
    flex-direction: column-reverse;
    padding: 0.8em;
  }
  .blog_point_staff {
    display: flex;
    align-items: center;
    margin-bottom: 0.7em;
  }
  .blog_point .photo_icon {
    width: 90px;
    height: 90px;
    margin-bottom: 0;
  }
  .blog_point .photo_icon img {
    width: 90px;
    height: 90px;
  }
  .blog_point .name {
    text-align: left;
    margin-left: 1em;
    margin-bottom: 0;
  }
  .blog_point .arrow_box {
    margin-right: 0;
    padding: 1em 0.5em;
    margin-bottom: 0;
  }
  .blog_point .arrow_box::after {
    top: -15px;
    right: inherit;
    left: 40%;
    rotate: -90deg;
  }
  .blog_point .arrow_box p.arrow_box_title {
    font-size: 17px;
  }
  .blog_point .arrow_box p {
    font-size: 15px;
  }
}

/* blog_feedback
============================================================================================================ */
.blog_feedback {
  background: var(--bp-bg);
  padding: 1.5em 1em;
  margin: 2em 0;
}
.blog_point + .blog_feedback {
  margin-top: 0;
  padding-top: 1em;
}
.blog_feedback p {
    font-size: 16px;
    line-height: 1.7;
}
.blog_feedback > p.blog_feedback_title {
  font-size: 19px;
  margin-bottom: 1em;
  text-align: left;
  padding: 0 0.3em 0.3em 0.3em;
  position: relative;
  border-bottom: 1px solid var(--bp-line);
}
.blog_feedback > p:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  .blog_feedback {
    padding: 0.8em;
  }
  .blog_feedback > p.blog_feedback_title {
    font-size: 17px;
  }
  .blog_feedback p {
    font-size: 15px;
  }
}
/* button
============================================================================================================ */
.is-content-justification-center {
  text-align: center;
}
/* ブロックエディタ（編集画面）では、ボタンの外枠が横並び(flex)になるため、中央寄せを明示する */
.wp-block-buttons.bp-btn {
  display: flex;
  justify-content: center;
  text-align: center;
}
.bp-btn .wp-block-button {
  margin: 0;
}
.bp-btn a.wp-block-button__link,
.blog_text a.wp-block-button__link {
  display: inline-block;
  color: #fff!important;
  text-decoration: none;
  background-color: var(--bp-main)!important;
  padding: calc(0.7em + 2px) calc(4em + 2px);
  border-radius: 100px;
  padding: 20px;
  font-size: 18px;
  line-height: 1.2;
  min-width: 250px;
}
@media screen and (max-width: 768px) {
  .bp-btn a.wp-block-button__link,
  .blog_text a.wp-block-button__link {
    padding: 20px 45px;
    min-width: 300px;
  }
}

/* button
============================================================================================================ */
.blog_card {
  margin: 2em 0 0;
}
.blog_card .blog_card_txt {
  font-size: 14px;
  margin-bottom: 0;
  line-height: 1;
  background-color: var(--bp-card)!important;
  color: #fff;
  text-align: center;
  max-width: 10em;
  width: 100%;
  padding: 7px 0;
  border-radius: 0.5em 0.5em 0 0;
}
.blog_card .blog_card_item a {
  display: flex;
  align-items: center;
  gap: 1em;
  border-top: 1px solid var(--bp-card);
  border-bottom: 1px solid var(--bp-card);
  padding: 0.8em;
  background-color: var(--bp-bg-gray);
  text-decoration: none;
}
.blog_card .blog_card_img {
  max-width: 110px;
  width: 100%;
}
.blog_card .blog_card_img img {
  margin: 0;
}
.blog_card .blog_card_ttl {
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #212121;
}
@media screen and (max-width: 768px) {
  .blog_card .blog_card_img {
    max-width: 94px;
  }
}

/* blog_link_box
============================================================================================================ */
.blog_link_box {
  width: 420px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  background: #f6e7cc;
  border: 1px solid var(--bp-main);
}
.blog_link_box a {
  display: flex;
  color: #5f4f35 !important;
  text-decoration: none;
  position: relative;
}
.blog_link_box a :after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0.8em;
  width: 8px;
  height: 8px;
  margin: auto;
  border-top: 1px solid #8a7555;
  border-right: 1px solid #8a7555;
  transform: rotate(45deg);
  box-sizing: border-box;
}
.blog_link_box p {
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.4;
}
.blog_link_box_img {
  width: 100px;
  min-height: 80px;
}
.blog_link_box_img img {
  width: 100%;
  height: 100%;
  margin: 0;
}
.blog_link_box_title {
  width: calc(100% - 100px);
  padding: 0.5em 2em 0.5em 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .blog_link_box {
    width: 100%;
  }
  .blog_link_box p {
  font-size: 13px;
}
  .blog_link_box_img {
    width: 90px;
    min-height: 70px;
  }
  .blog_link_box_title {
    width: calc(100% - 90px);
  }
}

/* ビジュアルエディタ内用（公開画面の .blog_text 内と見た目を合わせる） */
.editor-area a.wp-block-button__link,
.bp-btn a.wp-block-button__link {
  display: inline-block;
  color: #fff !important;
  text-decoration: none;
  background-color: var(--bp-main) !important;
  border-radius: 100px;
  padding: 20px;
  font-size: 18px;
  line-height: 1.2;
  min-width: 250px;
}

/* kichinan2024 固有
   テーマの .article-single p { margin-top: 3.2rem }（769px以上）が、CTAのボタン(p)にも効いて上の余白が大きくなるため、ボタンだけ 2rem にする */
@media screen and (min-width: 769px) {
  .article-single .blog_cta_btn_box .blog_cta_btn {
    margin-top: 2rem;
  }
}