@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
body {
  font-family: "Noto Sans JP", sans-serif;
  color: #000000;
}


main a,
main a:visited,
main a:hover,
main a:focus,
main a:active,
footer a,
footer a:visited,
footer a:hover,
footer a:focus,
footer a:active {
  color: inherit !important;
  background: none !important;
  transform: none !important;
  box-shadow: none !important;
  transition: none !important;
  text-decoration: none !important;
  /* ホバー時も下線表示 */
  opacity: 1 !important;
}

/*コンテンツ記事内のa*/
.entry-content a,
.entry-content a:visited {
  text-decoration: underline !important;
  /* 下線を表示 */
  color: #007bff !important;
  padding-bottom: 0 !important;
  /* 必要に応じて微調整 */
  display: inline-block !important;
  /* padding や line-height が効きやすくなる*/
}

/*コンテンツ記事内のpの中のテキストリンク対策*/
.entry-content p a,
.entry-content p a:visited {

display: inline !important; 

}


/* ============================================== */
/* ページ送り：数字ボタンだけをピンクの丸にする    */
/* ============================================== */

/* 1. 数字と矢印（>）の基本：白背景にピンク文字 */
/* セレクタを .pagination a だけに絞ることで、不要な丸を防ぎます */
.pagination a {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 45px !important;
  height: 45px !important;
  border-radius: 50% !important;
  margin: 0 5px 10px 5px !important;
  border: 1px solid #E66075 !important;
  background-color: #fff !important;
  color: #E66075 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  font-size: 16px !important;
}

/* 2. 今見ているページの数字：ピンク背景に白文字 */
.pagination .current {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 45px !important;
  height: 45px !important;
  border-radius: 50% !important;
  margin: 0 5px 10px 5px !important;
  background-color: #E66075 !important;
  color: #fff !important;
  border: 1px solid #E66075 !important;
}

/* 3. 押した時や訪れた後も、色は絶対に変えない */
.pagination a:hover,
.pagination a:active,
.pagination a:visited {
  background-color: #fff !important;
  color: #E66075 !important;
  border: 1px solid #E66075 !important;
}

/* 4. 数字の横にある「>」を少し大きくする */
.pagination .next {
  font-size: 20px !important;
}

/* 5. 【重要】大きな「次のページ」用の枠線を完全に解除する */
.pagination-next-link {
  border: none !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================== */
/* 記事一覧とページボタンの間の隙間を詰める        */
/* ============================================== */

/* 1. 記事一覧（リスト）の下側の余白を削る */
#main #list {
  margin-bottom: 0 !important; /* ここの数字を小さくするとさらに縮まります */
}

/* 2. ページボタンエリア（pagination）の上側の余白を削る */
.pagination {
  margin-top: 10px !important;    /* ここの数字を小さくするとさらに縮まります */
}


/* ============================================== */
/* 検索結果タイトル：文字の大きさや余白の調整      */
/* ============================================== */

#archive-title {
  font-size: 22px !important;
  font-weight: bold !important;
  margin-bottom: 20px !important;
}


/* ロゴと検索を横並びにする設定 */
.header-flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  background-color: #E66075;
  padding: 0 20px;
  color: white;
}

.header-flex-container .logo {
  padding: 0 !important;
}

.header-flex-container a {
  padding: 2px 10px 9px 10px !important;
}

.left-dummy-area {
  width: 40px;
}

.header-logo-area {
  text-align: center;
  flex: 1;
  font-weight: bold;
}

/* 三角の矢印マークを消す指定 */
.custom-header-search summary {
  list-style: none;
  cursor: pointer;
}
.custom-header-search summary::-webkit-details-marker {
  display: none;
}

/* 検索を開くボタン */
.search-toggle-button {
  width: 40px;
  height: 40px;
  background: url('http://bikomi.net/wp-content/uploads/2025/05/search-acbc71.svg') no-repeat center center;
  background-size: 24px 24px;
}

/* 開いたときに出てくる検索フォーム */
.custom-search-form {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  padding: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 999;
  display: flex;
  gap: 10px;
  box-sizing: border-box;
}

/* 文字を入れる入力欄 */
.custom-search-form input {
  flex: 1;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}

/* 送信ボタン */
.custom-search-form button[type="submit"] {
  width: 40px;
  height: 40px;
  background: url('http://bikomi.net/wp-content/uploads/2025/05/search_black-84b8a2.svg') no-repeat center center;
  background-size: 24px 24px;
  border: none;
  cursor: pointer;
}

/*サイドバーの検索ボタン設置*/
/* 検索入力フィールド全体のサイズと位置を調整（上にずれないように） */
.search-box {
    margin-top: 20px; /* 見出しとの間の垂直余白を広げる */
    width: 100%;       /* 幅を100%にする（または元のサイズに合わせる） */
    height: 50px;      /* 高さをしっかり取る（または元のサイズに合わせる） */
}

/* 検索入力フィールド（枠線部分）のサイズと中央配置 */
.search-box input.search-edit {
    height: 100%;      /* .search-box の高さに合わせる */
    padding: 0 10px;   /* 内部のパディング */
    vertical-align: middle; /* 垂直方向の中央配置を助ける */
}

/* 検索入力欄を選択したときの黒枠をなくす */
.search-box input.search-edit:focus {
    outline: none;
    border: 1px solid #cccccc; /* 枠線を優しいグレーにしています */
    box-shadow: none;
}

/* 検索ボタン（虫眼鏡）を大幅に大きくして、右側に余白を作る */
.search-box button.search-submit {
    font-size: 22px;   /* さらに大きくします */
    margin-right: 5px; /* 右側の隙間を明確に広げます */
}

/*★★★ここから見出し★★★*/
h1.entry-title,
h2.wp-block-heading,
h3.wp-block-heading,
h4.wp-block-heading,
h5.wp-block-heading,
h6.wp-block-heading {
  margin: 0;
  width: 100%;
  border: none;
  padding: 0;
  font-weight: bold;
}

/*h1と投稿日、更新日のマージンのため*/
header .date-tags {
  margin-top: 20px !important;
}

h1.entry-title {
  line-height: 1.5;
}

/*見出しのビジュアル*/
h2.wp-block-heading {
  position: relative;
  /* 疑似要素の基準点 */
  font-size: 22px;
  /* フォントサイズ */
  color: #fff;
  /* 文字色を白に */
  background-color: #E66075;
  /* 背景色をピンクに */
  padding: 5px 10px 7px 10px;
  /* 上下左右のpadding */

  margin-bottom: 8px;
  /* 下の余白（三角ボタンとの間隔） */
  border-radius: 8px 8px;
  /* 左上と右上のみ角丸 */
  display: block;
  /* 幅を親要素いっぱいに広げる */
  line-height: 1.5;

}

/*見出しH2の▼*/
h2.wp-block-heading::after {
  content: "";
  position: absolute;
  bottom: -6px;
  /* h2要素の下に配置 */
  left: 10px;
  /* 左からの位置 */
  width: 0px;
  height: 0px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #E66075;
  /* 三角ボタンの色 */
}

h2.wp-block-heading + h3.wp-block-heading{
	margin-top:30px !important;
}


h3.wp-block-heading {
  padding: 0 0 10px 0;
  margin-bottom: 0;
  background-image: linear-gradient(90deg, #E66075 0 20%, #dedede 20%);
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: bottom;
  font-size: 21px;
  line-height: 1.4;
}


h4.wp-block-heading {
  font-size: 20px;
  /* フォントサイズ（h3よりさらに小さく） */
  color: #333;
  /* 文字色を濃いグレーに */
  padding-left: 8px;
  /* 左側の余白（ピンクの縦線との間隔） */
  border-left: 4px solid #E66075;
  /* 左側のピンク色の縦線 */
  display: block;
  /* 幅を親要素いっぱいに広げる */
  line-height: 1.5;
}


h5.wp-block-heading {
  font-size: 19px;
  /* フォントサイズ */
  color: #333;
  /* 文字色を濃いグレーに */
  border-bottom: 2px solid #E66075;
  /* ピンク色の下線 */
  display: block;
  /* 幅を親要素いっぱいに広げる */
  line-height: 1.4;

}

@media screen and (max-width: 480px) {
  h2.wp-block-heading {
    font-size: 20px;
  }

  h3.wp-block-heading {
    font-size: 19px;
  }

  h4.wp-block-heading {
    font-size: 18px;
  }

  h5.wp-block-heading {
    font-size: 17px;
  }

}





/*★★★ここからインデックスのエントリーカード★★★*/

/* 1. カード全体の基本リセット */
.entry-card-wrap,
.a-wrap {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.entry-card-content {
  display: flex;
  flex-direction: column;
}

/* 2. ★超重要★ サムネイル枠を画像の実際の比率（1200:628）に完全に固定 */
.entry-card-thumb,
.widget-entry-card-thumb {
  width: 100%;
  aspect-ratio: 1200 / 628 !important;
  overflow: hidden;
}

.entry-card-thumb {
  max-width: 300px;
}

.widget-entry-card-thumb {
  max-width: 120px;
}

/* 3. 画像自体のフィッティング */
.entry-card-thumb img,
.widget-entry-card-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* 枠と画像の形が同じになったので、見切れずにピタッとハマります */
  border-radius: 5px;
  box-shadow: 0px 1px 1px 0px rgba(108, 108, 108, 0.45);
}

/* 4. タイトルと日付の余白調整 */
.entry-card-title {
  display: block;
  font-size: 22px;
  line-height: 1.4;
  margin-top: -10px;
  margin-bottom: 4px;
  padding-left: 10px;
}

.entry-card .entry-card-info {
  margin: 5px 0 0 10px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}

/* 5. レスポンシブ対応（スマホ表示） */
@media (max-width: 600px) {
  .entry-card-thumb {
    max-width: 200px;
  }
}

@media (max-width: 480px) {
  .entry-card-thumb {
    max-width: 120px;
  }

  .entry-card-title {
    font-size: 16px;
    line-height: 1.4;
    margin-top: 0;
    padding-left: 10px;
  }

  main #list a.a-wrap {
    margin-top: -10px !important;
  }
}


/*★★★ここから個別記事★★★*/



/*マーカー*/
strong {
  background-image: linear-gradient(to bottom, #FBFF8B, #FBFF8B);
  background-repeat: no-repeat;
  background-size: 100% 10px;
  background-position: bottom;

}
/* ========================================================== */
/* 通常のテーブル（Flexible Table Block）の完全版修正           */
/* ========================================================== */

/* 1. 外枠（横スクロールを強制し、実機での潰れを完全に防ぐ） */
#main .entry-content .wp-block-flexible-table-block-table,
.editor-styles-wrapper .wp-block-flexible-table-block-table {
  display: block !important;
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin-top: 30px !important;
}

/* 2. テーブル本体（中身の最大幅に合わせて広げる） */
#main .entry-content .wp-block-flexible-table-block-table table,
.editor-styles-wrapper .wp-block-flexible-table-block-table table {
  display: table !important;
  border-collapse: collapse !important;
  width: max-content !important; /* ★中身の最大サイズに合わせる */
  min-width: 100% !important;
  table-layout: auto !important;
  margin-top: 0 !important;
}

/* 3. 各セル共通（縦中央・改行ガード・ピンク枠） */
#main .entry-content .wp-block-flexible-table-block-table th,
#main .entry-content .wp-block-flexible-table-block-table td,
.editor-styles-wrapper .wp-block-flexible-table-block-table th,
.editor-styles-wrapper .wp-block-flexible-table-block-table td {
  font-size: 16px !important;
  padding: 12px 20px !important; /* 左右の余白を少し広げました */
  vertical-align: middle !important; /* ★縦中央 */
  box-sizing: border-box !important;
  background: #fff;
  border: 1px solid #E66075 !important; /* 基本の枠線はピンク */
  line-height: 1.6 !important;
  white-space: nowrap !important; /* ★勝手な改行を禁止 */
}

/* 4. 見出し(th)専用：ピンク背景 ＋ 白い区切り線の復活 */
#main .entry-content .wp-block-flexible-table-block-table th,
.editor-styles-wrapper .wp-block-flexible-table-block-table th {
  background-color: #E66075 !important; /* 背景ピンク */
  color: #ffffff !important;           /* 文字白 */
  /* 隣り合う見出しの間に「白い縦線」を復活 */
  border-right: 1px solid #ffffff !important; 
  border-bottom: 1px solid #ffffff !important; 
}

/* 右端の見出しだけは、外側の枠線をピンクに戻す */
#main .entry-content .wp-block-flexible-table-block-table th:last-child,
.editor-styles-wrapper .wp-block-flexible-table-block-table th:last-child {
  border-right: 1px solid #E66075 !important;
}

/* 5. 画像が潰れないためのガード（おすすめイメージ等） */
#main .entry-content .wp-block-flexible-table-block-table img,
.editor-styles-wrapper .wp-block-flexible-table-block-table img {
  max-width: none !important; /* 画面幅による縮小を禁止 */
  width: auto !important;
  display: block !important;
  margin: 0 auto !important;
}

/* ScrollHint の親に相対位置を付ける */
.scrollable table {
    margin-bottom: 0 !important;
}

/*スクロール*/
/* ScrollHint（グレー背景ごと）を上にずらす */
.scroll-hint-icon-wrap {
  position: absolute !important;
  bottom: auto !important;  /* 下固定を解除 */
  top: 0px !important;    /* 上に上げる（値は調整） */
  transform: translateY(0);
}


/* scroll hintが適用されていないテーブルの直後の余白を調整 */
.entry-content table:not(.scroll-hint) {
    margin-bottom: 0; /* 下の余白を削除 */
}


/* ===================================
   Cocoon 目次カスタマイズ
   条件：
   - H2/H3全階層対応
   - すべての「・」の左端を10pxに固定
   - 「・」とテキストの間隔は自然に
   - リスト階層に関係なく揃う
   =================================== */

/* 目次全体 */
.toc {
  border: solid 1px #E66075 !important;
  padding: 0;
  background: #fff;
  border-radius: 4px;
}

/* 目次タイトル */
.toc-title {
  font-size: 17px;
  color: #fff;
  font-weight: bold;
  background: #E66075;
  padding: 10px;
}

/* リスト全体 */
.toc-list {
  padding: 20px !important;
  margin: 0;
}

/* ネストリセット */
#toc .toc-content ol,
#toc .toc-content ul {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

#toc .toc-content li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* H2/H3全階層のリンク共通設定 */
#toc .toc-content .toc-list li a {
  display: inline-block;
  position: relative;
  padding-left: calc(1.3em + 10px); /* ・の幅 + 左端余白10px */
  line-height: 1.6;
  text-decoration: none;
  color: inherit;
  font-size: 16px;
}

/* 「・」マークを左端から10pxに固定 */
#toc .toc-content .toc-list li a::before {
  content: "・";
  position: absolute;
  left: 10px; /* ← 左端からの余白 */
  top: 0;
  width: 1.3em; /* ・マーク幅 */
  text-align: left;
  color: #333;
}

/* 子リストも同じにする */
#toc .toc-content .toc-list li ul li a {
  padding-left: calc(1.3em + 10px) !important;
}

/* 最初のliだけ上の余白を消す */
#toc .toc-content li.first-li a {
  margin-top: 0 !important;
}

/* hover効果 */
ul.toc-list a:hover {
  text-decoration: underline;
}

/* li の上下余白微調整（必要に応じて変更可能） */
#toc .toc-content .toc-list li {
  margin-top: 5px;
}


/*TOPへ戻るボタン*/
.go-to-top-button {
  border-radius: 50% !important;
  /* 丸くする */
}

/* トップに戻るボタンをSVG画像に変更 */
#page-top {
  background: url('http://bikomi.net/wp-content/uploads/2025/05/r_top-7119ae.svg') no-repeat center center;
  background-size: contain;
  width: 49px;
  /* 必要に応じて調整 */
  height: 49px;
  /* 必要に応じて調整 */
  box-shadow: none;
}

/* デフォルトの矢印アイコンを非表示 */
#page-top::before {
  content: none;
}


/*リンクボタン*/
.wp-block-button {
  max-width: 100%;
  width: 100%;
  /* 幅を親要素の100%にする */
}


/*ボタンのリンクがあるときに白くする*/
a.wp-block-button__link[href] {
  color: #fff !important;
}


/*わけわからない余白潰す*/
.wp-block-buttons.is-layout-flex.wp-block-buttons-is-layout-flex,
.wp-block-buttons.is-layout-flex.wp-block-buttons-is-layout-flex>.wp-block-button {
  margin: 0 !important;
  padding: 0 !important;
}



/* 煽り文のスタイル */
.cta-aori {
  margin: 30px 0 0 0 !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: bold;
}

/*CTA上の余白*/
.wp-block-buttons.is-layout-flex.wp-block-buttons-is-layout-flex {
  margin-top: 30px !important;
}



/* 煽り直下に続くボタンの余白を潰す */
.cta-aori+.wp-block-buttons.is-layout-flex {
  margin-top: 5px !important;
}



a.wp-element-button {
  width: 100%;
  background-color: #03AB92 !important;
  color: #fff !important;
  padding: 16px 30px 14px 30px !important;
  border-radius: 100vmax;
  text-decoration: none !important;
  font-weight: bold;
  display: block;
  box-shadow: 0px 3px 10px -5px #999999 !important;
  position: relative;
  overflow: hidden;
  line-height: 1.4;
  font-size: 22px;
  transition: none !important;
}


@media screen and (max-width: 480px) {
  a.wp-element-button {

    padding: 14px 20px !important;
    line-height: 1.4;
    font-size: 17px;

  }
}

/* 右端アイコン（擬似要素） */
a.wp-element-button::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url('http://bikomi.net/wp-content/uploads/2025/05/link-7abded.svg');
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  /* クリック邪魔しないように */
}

@media screen and (max-width: 480px) {

  /* 右端アイコン（擬似要素） */
  a.wp-element-button::after {

    top: 50%;
    right: 16px;

    width: 14px;
    height: 14px;

  }
}

.wp-block-button a:hover,
.wp-block-button a:focus,
.wp-block-button a:active {
  background-color: #03AB92 !important;
  color: #fff !important;
  box-shadow: 0px 3px 10px -5px #999999 !important;
  text-decoration: none !important;
}

/* ぬらり光アニメーション用 */
.wp-block-button a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.5) 50%,
      rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg);
  animation: shimmer 1.5s infinite;
  pointer-events: none;
}

@keyframes shimmer {
  0% {
    left: -75%;
  }

  100% {
    left: 125%;
  }
}










/*個別記事本文、リストの文字サイズ*/
.entry-content p,
.entry-content .wp-block-list li {
  margin: 0;
  font-size: clamp(16px, calc(15.5px + 0.15vw), 17px);
}

/*個別記事本文と本文のマージン*/
.entry-content p+p {
  margin-top: 20px;

}



/*個別記事見出しのマージン*/
.entry-content h2 {
  margin-top: 40px;
  margin-bottom: 20px;
}

/*個別記事見出しのマージン*/
.entry-content h3 {
  margin-top: 40px;
  margin-bottom: 20px;
}

/*個別記事見出しのマージン*/
.entry-content h4 {
  margin-top: 40px;
  margin-bottom: 20px;
}

/*個別記事見出しのマージン*/
.entry-content h5 {
  margin-top: 40px;
  margin-bottom: 20px;
}





/*★★★ここからコンタクトフォーム★★★*/
/* フォーム全体のスタイル */
.wpcf7 {
  background-color: #f0f0f0;
  /* ライトグレー */
  padding: 20px;
  border-radius: 10px;
  max-width: 100%;
  margin: auto;
}


/* ラベルのスタイル */
.wpcf7-form label {
  display: block;
  position: relative;
  margin-bottom: 10px;
  font-size: 18px;
  color: #333333;
  /* ダークグレー */
}


/* 必須フィールドのラベルスタイル */
.wpcf7-form .required {
  display: inline-block;
  position: absolute;
  top: 16px;
  /* 親要素の中央 */
  transform: translateY(-50%);
  /* 自要素の高さの半分上に移動 */
  background-color: #ff0000;
  color: white;
  padding: 0 5px 0 5px !important;
  border-radius: 3px;
  margin-left: 5px;
  font-size: 12px;
}


/* インプットフィールドのスタイル */
.wpcf7-form textarea {
  resize: none;
  /* サイズ変更を禁止 */
  height: 300px;
  width: 100%;
  padding: 10px;
  border: 1px solid #cccccc;
  /* ライトグレー */
  border-radius: 5px;
  margin-top: 5px !important;
  font-size: 16px;
  background-color: #ffffff;
  /* 白 */
  margin-top: 10px !important;
}


/* エラーメッセージと成功メッセージのスタイル */
.wpcf7-form .wpcf7-not-valid-tip {
  color: red;
  font-size: 14px;
}


.wpcf7-form .wpcf7-mail-sent-ok {
  color: green;
  font-size: 16px;
  margin-bottom: 20px;
}


input[type="submit"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-size: 20px;
  font-weight: bold;
  width: 100%;
  padding: 15px 20px;
  border-radius: 100vmax;
  background-color: #E66075 !important;
  border: none;
  color: #fff;
  cursor: pointer;
}


span.wpcf7-spinner {
  display: none;
}


.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  outline: none !important;
  /* !important を使用して優先度を上げる */
  box-shadow: none !important;
  /* 念のため、box-shadow も削除 */
}


.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="range"],
.wpcf7-form input[type="file"],
.wpcf7-form input[type="password"] {
  height: auto !important;
  margin-top: 10px !important;
  padding-top: 9px !important;
  /* 上のpaddingを小さく */
  padding-bottom: 3px !important;
  /* 下のpaddingを小さく */
}








/* フッター全体の設定 */
#footer {
  margin: 0 0 0 0 !important;
  margin-top: 60px !important;
  padding: 10px 0 30px 0;
  background: #E66075;
  /* 背景色を設定 */
}

/* フッター内のコンテンツ */
#footer-in {
  margin: 0 auto;
  padding: 0;
  background-color: #E66075;
  color: #fff;
  /* 文字色を白に */
}

/* フッター全体の余白やパディングのリセット */
.navi-footer {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  /* 幅を100%に設定 */
}


/* footer-widgets の flex を無効化し、通常のブロック配置に戻す */
.footer-widgets {
  display: block !important;
}

/* footer-center を左に寄せる */
.footer-center {
  display: block !important;
  float: left !important;
  /* 左に配置 */
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-align: left !important;
}

/* ロゴブロックの余白を完全に排除 */
.footer-custom-logo {
  margin: 0 0 0 20px !important;
  /* 上 右 下 左 → 左に20pxだけ余白 */
  padding: 0 !important;
}

/* ロゴ画像を左寄せ・サイズ調整 */
.footer-custom-logo img {
  display: block;
  margin: 0 !important;
  max-width: 150px;
}


















/* ロゴとホームメニュー間の余白削減 */
.footer-bottom-logo,
.navi-footer {
  margin: 0 !important;
  /* 上下の余白を完全に削減 */
  padding: 0 !important;
  /* 上下の余白を完全に削減 */
}

/* フッター内のロゴとメニュー間の余白を縮める */
.footer-in {
  padding-top: 0 !important;
  /* 内部の余白を削減 */
  margin-top: 0 !important;
  /* 内部の余白を削減 */
}

/* メニュー自体の余白も削減 */
#navi-footer {
  margin-top: 0 !important;
  /* メニューの上部余白を削減 */
  padding-top: 0 !important;
  /* メニューの上部余白を削減 */
}


/* ロゴとホームメニューの間の余白を縮める */
.footer-bottom-logo {
  margin-bottom: 0 !important;
  /* ロゴ下の余白削減 */
  padding-bottom: 0 !important;
  /* ロゴ下のパディング削減 */
}

/* ロゴとその下のコンテンツ間の余白削減 */
.footer-bottom {
  margin-top: 0 !important;
  /* ロゴ部分全体の上部余白削減 */
  padding-top: 0 !important;
  /* ロゴ部分全体の上部パディング削減 */
}

/* フッター内の上部余白削減 */
.footer-in {
  margin-top: 0 !important;
  /* フッター内の上部余白削減 */
  padding-top: 0 !important;
  /* フッター内の上部パディング削減 */
}

/* ホームメニューの上部余白削減 */
#navi-footer {
  margin-top: 0 !important;
  /* メニュー上部の余白削減 */
  padding-top: 0 !important;
  /* メニュー上部のパディング削減 */
  padding-left: 5px !important;
}







/* フッター内メニューリンクのホバー効果を無効にする */
.navi-footer a:hover {
  color: inherit !important;
  background-color: transparent !important;
  text-decoration: none !important;
}

/* フッター内メニューアイテムを縦並びに調整 */
.navi-footer .menu-footer {
  display: block;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

/* メニューアイテム間の余白を調整 */
.navi-footer .menu-footer li {
  display: block;
  margin-bottom: 8px;
  text-align: left;
  border: none;
  border-bottom: none;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

/* メニューアイテムのリンクテキストのフォントサイズとタップエリア */
.navi-footer .menu-footer li a {
  font-size: 14px;
  text-align: left;
  padding-left: 0;
  /* タップエリアの余白をなくす */
  padding-right: 0;
  /* タップエリアの余白をなくす */
  padding-top: 0;
  /* 上部の余白をなくす */
  padding-bottom: 0;
  /* 下部の余白をなくす */
  display: inline-block;
  /* リンクをインラインブロックにしてタップエリアをテキストに合わせる */
}

/* 運営者情報の右端の白い縦線を消す */
#menu-item-87 {
  border-right: none !important;
  /* 右端の縦線を消す */
  box-shadow: none !important;
  /* シャドウがある場合、それも消す */
}

/* もし他のメニューアイテムにも縦線があれば、それも消す */
.navi-footer .menu-footer li:last-child {
  border-right: none !important;
  /* 最後のメニューアイテムの右端の縦線を消す */
}


/* copyright部分のフォントサイズ */
.copyright {
  margin-top: 50px !important;
  font-size: 12px;
}



/*★★★ここからサイドバーウィジェット★★★*/

/*ウィジェット記事の投稿日・更新日を表示*/
.widget-entry-card-date {
  display: block;
  margin: 5px 0 0 10px;
}

/*サイドバーウィジェットの関連リンク*/
.related-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 20px;
}

/*サイドバーウィジェットの関連リンクの文字よしなに*/
.related-link a {
  position: relative;
  margin: 0;
  padding-left: 20px;
  font-size: clamp(14px, 4vw + 1rem, 16px);
}

/*サイドバーウィジェットの関連リンクに・つけたい*/
.related-link a::before {
  content: "・";
  /* 表示する記号 */
  position: absolute;
  left: 0;
}

/*★★★サイドバーウィジェットのカテゴリとタグ★★★*/

/*サイドバーウィジェットのカテゴリとタグの基本設定*/
.custom-category-widget ul,
.custom-tag-widget ul {
  display: flex;
  /* Flexboxを有効にする */
  flex-wrap: wrap;
  /* 要素が収まりきらない場合に折り返す */
  justify-content: flex-start;
  list-style: none;
  margin: 0;
  /* 外側の余白をリセット */
  padding: 0;
  /* 内側の余白をリセット */
  gap: 0px 5px;
  /* 横の間隔 */
  margin-top: 14px;
}

@media (max-width: 480px) {

  /* サイドバーウィジェットのカテゴリとタグの基本設定（スマホ用） */
  .custom-category-widget ul,
  .custom-tag-widget ul {
    gap: 5px 5px;
  }
}




/*サイドバーウィジェットのカテゴリとタグのリンク囲い*/
.custom-category-widget a,
.custom-tag-widget a {
  display: inline-block;
  border: solid 1px #997F1D;
  color: #997F1D !important;
  padding: 2px 8px 3px 8px !important;
  border-radius: 20px;
  font-size: 14px;
  text-decoration: none;
  line-height: 1.3;
}


/*サイドバーウィジェットの部位・施術とタグ(他院修正など)の距離*/
.bui-tag {
  margin-top: -14px;
}

@media (max-width: 480px) {

  /* サイドバーウィジェットの部位・施術とタグの距離（スマホ用） */
  .bui-tag {
    margin-top: -10px;
  }
}


/*サイドバーウィジェットの新着記事、関連記事、人気記事のタイトル。タイトル全表示されるように*/
.widget-entry-card-title {
  margin-left: 10px !important;
  font-weight: bold;
  line-height: 1.4;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  display: block !important;
  word-break: break-word !important;
}

/*サイドバーウィジェットの新着記事、関連記事、人気記事の記事の縦マージン*/
.widget-entry-card-link {
  margin-top: 20px !important;
}

/*サイドバーウィジェットの新着記事、関連記事、人気記事の記事の縦マージンの見出しとの距離紀にしてる*/
.widget-entry-card-link:first-child {
  margin-top: 20px !important;
}


/*★★★ここからパンくず★★★*/
/* 区切り「＞」の調整　*/
.breadcrumb .sp {
  margin: 0 5px;
}

.breadcrumb-item>.fa,
.breadcrumb-home .fa.fa-home.fa-fw {
  display: none;
}
/*★★★ここからGoogle Mapの口コミ★★★*/
.clinic-review {
  padding: 20px 20px;
  margin: 50px 0 0 0;
  background-color: #FBF4F4;
  position: relative;
  font-size: 15px !important;
  line-height: 1.8;
  border-radius: 12px;
  border: #E66075 solid 1px;
  /* filterで影をつけることで、しっぽの枠線も含めたきれいな影になります */
  box-shadow: none; 
  filter: drop-shadow(1px 1px 2px #d9d9d9);
}

.clinic-review.first-review {
  margin-top: 40px !important;
}

.clinic-review a {
	  font-size: 10px !important;

  text-decoration: none !important;
}

.clinic-review-footer {
  color: #666;
  text-align: right;
  margin-top: 15px;
}

/* --- しっぽ（三角）の設定 --- */

/* 共通設定：beforeが「枠線（ピンク）」、afterが「中身（ベージュ）」になります */
.clinic-review .clinic-review-footer::before,
.clinic-review .clinic-review-footer::after {
  content: "";
  position: absolute;
  top: 100%;
  width: 0;
  height: 0;
  border-style: solid;
}

/* --- 奇数：右三角 --- */

/* 1. 下地（ピンクの枠線役） */
.clinic-review:nth-of-type(odd) .clinic-review-footer::before {
  right: 30px;
  left: auto;
  border-width: 14px 0 0 20px;
  border-color: #E66075 transparent transparent transparent; /* ピンク */
}

/* 2. 上書き（ベージュの中身役） */
.clinic-review:nth-of-type(odd) .clinic-review-footer::after {
  right: 30px; /* beforeと同じ位置 */
  left: auto;
  border-width: 14px 0 0 20px;
  border-color: #FBF4F4 transparent transparent transparent; /* 背景色 */
  
  /* ★ここがポイント：少しだけ上にずらしてピンクの線を出す */
  margin-top: -3px; 
  margin-right: 2px; /* 微調整 */
}


/* --- 偶数：左三角 --- */

/* 1. 下地（ピンクの枠線役） */
.clinic-review:nth-of-type(even) .clinic-review-footer::before {
  left: 30px;
  right: auto;
  border-width: 14px 20px 0 0;
  border-color: #E66075 transparent transparent transparent; /* ピンク */
}

/* 2. 上書き（ベージュの中身役） */
.clinic-review:nth-of-type(even) .clinic-review-footer::after {
  left: 30px; /* beforeと同じ位置 */
  right: auto;
  border-width: 14px 20px 0 0;
  border-color: #FBF4F4 transparent transparent transparent; /* 背景色 */

  /* ★ここがポイント：少しだけ上にずらしてピンクの線を出す */
  margin-top: -3px;
  margin-left: 2px; /* 微調整 */
}


/* リンクの色を全状態で固定・青くならないように修正 */
.clinic-review-footer a,
.clinic-review-footer a:visited,
.clinic-review-footer a:hover,
.clinic-review-footer a:active,
.clinic-review-footer a:focus {
  color: #414141 !important; /* 常にダークグレーを維持 */
  text-decoration: none !important;
  border-bottom: none !important;
  background: none !important; /* 背景色がつくのを防止 */
  box-shadow: none !important; /* 影がつくのを防止 */
  opacity: 1 !important;       /* 透明度が変わるのを防止 */
}

/*★★★ここから注釈★★★*/
/*Google Mapの口コミの注釈*/
.entry-content .google-map-note {
  margin-top: 5px;
  font-size: 12px !important;
}

/*文頭・文末の注釈、*/
.entry-content .head-note {
  margin-top: 5px;
  font-size: 12px !important;
}


/* ========================================================== */
/* 1. クリニック詳細表 (class: .clinic-info) 設定             */
/* ========================================================== */

/* テーブル全体の隙間をなくす */
.clinic-info table {
    border-collapse: collapse !important;
    width: 100%;
}

/* 見出し(th)・中身(td) 共通設定 */
.clinic-info table tbody th,
.clinic-info table tbody td {
    padding: 8px 15px;
    font-size: 16px !important;
    text-align: left !important;
    vertical-align: middle;

    /* 下・左・右に1pxのピンク線を入れて箱型にする */
    border-bottom: 1px solid #E66075 !important;
    border-left:   1px solid #E66075 !important;
    border-right:  1px solid #E66075 !important;
    
    /* 上の線は二重になるのを防ぐため基本なし */
    border-top: none; 
}

/* 一番上の行だけは「上の線」がないと箱が開いちゃうので蓋をする */
.clinic-info table tbody tr:first-child th {
    border-top: 1px solid #E66075 !important;
}

/* 見出し（ピンク背景） */
.clinic-info table tbody th {
    background: #E66075;
    color: #ffffff;
}

/* 中身（ベージュ背景） */
.clinic-info table tbody td {
    background: #FFF9F4;
    font-weight: bold;
}

/* --- clinic-info 内の「普通のリンク」をテキストスタイルに戻す --- */
.clinic-info a,
.editor-styles-wrapper .clinic-info a {
    display: inline !important;             /* テキスト幅に */
    color: #007bff !important;              /* 青色 */
    text-decoration: underline !important;  /* 下線 */
    text-decoration-color: #007bff !important;
    
    /* ボタン風の装飾をリセット */
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    cursor: pointer;
}
.clinic-info a:hover {
    opacity: 0.7;
    text-decoration: none !important;
}


/* ========================================================== */
/* 2. 横スクロール比較表 (class: .clinic-cv-table) 設定       */
/* ========================================================== */

/* --- 横スクロール比較表の「列の幅」を中身に自動で合わせる --- */

/* テーブル全体の設定：中身に合わせて列幅を自動計算する */
.clinic-cv-table table {
  table-layout: auto !important; /* 固定ではなく自動計算に変更 */
  width: max-content !important; /* 中身のサイズを優先して広げる */
  min-width: 100% !important;
}

/* 1番左のセル（項目名）の幅は読みやすさのため固定 */
.clinic-cv-table tbody tr th:first-child {
  width: 120px !important;
  min-width: 120px !important;
  white-space: normal !important;
}

/* データ列（クリニックのセル）は、中身の一番長いものに自動で合わせる */
.clinic-cv-table tbody tr td {
  width: auto !important; /* 固定幅を解除 */
  min-width: max-content !important; /* その列で一番長い要素に合わせて幅を広げる */
  white-space: normal !important;
}

/* ★超重要★ CTAボタン内の文字が勝手に改行して崩れるのを完全に防ぐ */
.clinic-cv-table a.cta,
.clinic-cv-table-head a.cta {
  white-space: nowrap !important; /* ボタンの文字は絶対に1行で表示する */
  min-width: max-content !important;
}

.clinic-cv-table {
  display: block;
  width: 100%;
  overflow-x: auto; /* 横スクロール有効 */
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  border-spacing: 0;
}

.clinic-cv-table tbody tr th,
.clinic-cv-table tbody tr td {
  padding: 6px 20px; /* 広めのパディング */
  border: solid 1px #E66075;
  line-height: 1.4;
  white-space: nowrap; /* 折り返しなし */
  font-size: 15px !important;
}


/* ========================================================== */
/* 3. スマホ折り返し表 (class: .clinic-cv-table-head) 設定    */
/* ========================================================== */

.clinic-cv-table-head {
  display: table;
  width: 100%;
  table-layout: fixed !important; /* 幅固定 */
  border-collapse: collapse;
  border-spacing: 0;
  word-break: break-all;
}

.clinic-cv-table-head tbody tr th,
.clinic-cv-table-head tbody tr td {
  padding: 6px 3px; /* 狭めのパディング */
  border: solid 1px #E66075;
  line-height: 1.5;
  white-space: normal; /* 折り返しあり */
  font-size: 15px !important;
}

/* カラム幅指定（headのみ適用） */
.clinic-cv-table-head tbody tr:first-of-type > :nth-child(1) { width: 32% !important; }
.clinic-cv-table-head tbody tr:first-of-type > :nth-child(2) { width: 29% !important; }
.clinic-cv-table-head tbody tr:first-of-type > :nth-child(3) { width: 39% !important; }


/* ========================================================== */
/* 4. CVテーブル共通デザイン（色・罫線調整）                  */
/* ========================================================== */

/* マージン調整 */
.clinic-cv-table + .clinic-cv-table,
.clinic-cv-table-head + .clinic-cv-table-head {
  margin-top: -20px;
}

/* テーブル自体の設定 */
.clinic-cv-table table, .clinic-cv-table tbody,
.clinic-cv-table-head table, .clinic-cv-table-head tbody {
  width: 100%;
}

/* td（データセル）の共通デザイン */
.clinic-cv-table tbody tr td,
.clinic-cv-table-head tbody tr td {
  text-align: center !important;
  vertical-align: middle !important;
  background: #fff9f4 !important;
  font-weight: bold;
  color: #333333 !important;
}

/* th（見出しセル）の共通デザイン */
.clinic-cv-table tbody th,
.clinic-cv-table-head tbody th {
  background-color: #E66075 !important;
  font-weight: bold;
  color: #fff;
  letter-spacing: 1px;
  vertical-align: middle !important;
  border-right: solid 1px #fff !important;
  border-bottom: solid 1px #fff !important;
}

/* CTAボタン周りの余白 */
.clinic-cv-table tbody td:has(a),
.clinic-cv-table-head tbody td:has(a) {
  padding: 15px 5px !important;
}

/* ---- 罫線の細かい調整（CVテーブル用） ---- */
/* 縦並びの最初の列だけ下線を白に */
.clinic-cv-table table tbody tr > th:first-child:has(+ td),
.clinic-cv-table-head table tbody tr > th:first-child:has(+ td) {
  border-bottom: 1px solid #fff !important;
}
/* 縦並びの最終行の th を下線ピンクに */
.clinic-cv-table table tbody > tr:last-of-type > th:has(+ td),
.clinic-cv-table-head table tbody > tr:last-of-type > th:has(+ td) {
  border-bottom: 1px solid #E66075 !important;
}
/* 横並びの th の下線をピンクに */
.clinic-cv-table table tbody > tr:first-of-type > th,
.clinic-cv-table-head table tbody > tr:first-of-type > th {
  border-bottom: 1px solid #E66075 !important;
}
/* 横並びの最終列の th を右線ピンクに */
.clinic-cv-table table tbody > tr:first-of-type > th:last-child,
.clinic-cv-table-head table tbody > tr:first-of-type > th:last-child {
  border-right: solid 1px #E66075 !important;
}
/* 右線を消す処理 */
.clinic-cv-table table tbody th:has(+ td), .clinic-cv-table-head table tbody th:has(+ td) { border-right: none !important; }
.clinic-cv-table tbody th:has(+ td), .clinic-cv-table-head tbody th:has(+ td) { border-right: none !important; }

/* 1カラム時設定 */
.clinic-cv-table tr td:only-child, .clinic-cv-table tr th:only-child,
.clinic-cv-table-head tr td:only-child, .clinic-cv-table-head tr th:only-child {
  white-space: normal !important;
  width: 100% !important;
  display: table-cell;
}


/* ========================================================== */
/* 5. ボタン(CTA)と煽り文のデザイン（サイズ分け調整済み）     */
/* ========================================================== */

/* --- 共通の装飾設定（色や形） --- */

/* 煽り文の基本 */
.clinic-cv-table .clinic-cv-table-aori,
.clinic-cv-table-head .clinic-cv-table-aori,
.clinic-info .clinic-cv-table-aori {
  text-align: center !important;
  font-weight: bold;
  margin-bottom: 5px;
}
.clinic-cv-table .clinic-cv-table-aori strong,
.clinic-cv-table-head .clinic-cv-table-aori strong,
.clinic-info .clinic-cv-table-aori strong {
  color: #E66075 !important;
  background: none !important;
}

/* CTAボタンの基本 */
.clinic-cv-table a.cta,
.clinic-cv-table-head a.cta,
.clinic-info a.cta {
  display: flex !important; 
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  background-color: #03AB92 !important;
  color: #fff !important;
  padding: 12px 30px 12px 30px !important; /* ★上下左右の余白をゆったり広げました */
  border-radius: 100vmax;
  text-decoration: none !important;
  font-weight: bold;
  box-shadow: 0px 3px 10px -5px #999999 !important;
  position: relative;
  overflow: hidden;
  transition: none !important;
  line-height: 1.3;
  margin-top: 2px !important;
  margin-bottom: -3px !important;
  border: none !important; 
  max-width: none !important;
}

/* clinic-info のボタンだけ下の余白調整 */
.clinic-info a.cta {
    margin-bottom: 5px !important;
}

/* --- ★サイズ調整（PC版） --- */

/* 1. 小さめ維持グループ (.clinic-cv-table-head) */
.clinic-cv-table-head .clinic-cv-table-aori { font-size: 15px !important; }
.clinic-cv-table-head a.cta { font-size: 16px !important; }

/* 2. 大きめ変更グループ (.clinic-cv-table, .clinic-info) */
.clinic-cv-table .clinic-cv-table-aori,
.clinic-info .clinic-cv-table-aori { 
    font-size: 16px !important; /* 15pxからアップ */
}
.clinic-cv-table a.cta,
.clinic-info a.cta {
    font-size: 18px !important; /* 16pxからアップ */
}

/* --- 装飾系（アイコン・アニメーション） --- */
.clinic-cv-table a.cta::after,
.clinic-cv-table-head a.cta::after,
.clinic-info a.cta::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-image: url('http://bikomi.net/wp-content/uploads/2025/05/link-7abded.svg');
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
.clinic-cv-table a.cta, .clinic-cv-table-head a.cta, .clinic-info a.cta { position: relative; overflow: hidden; }
.clinic-cv-table a.cta::before, .clinic-cv-table-head a.cta::before, .clinic-info a.cta::before {
  content: '';
  position: absolute;
  top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  animation: shimmer 1.5s infinite;
  pointer-events: none;
}
@keyframes shimmer { 0% { left: -75%; } 100% { left: 125%; } }


/* ========================================================== */
/* 6. スマホ表示時の調整（max-width: 480px）                  */
/* ========================================================== */

@media screen and (max-width: 480px) {
  
  /* 基本の文字サイズ */
  .clinic-cv-table tbody tr th, .clinic-cv-table-head tbody tr th {
    font-size: 14px !important; 
    line-height: 1.4;
  }
  .clinic-cv-table tbody tr td, .clinic-cv-table-head tbody tr td {
    font-size: 15px !important;
    line-height: 1.4;
  }

  /* --- ★文字サイズ調整（スマホ版） --- */

  /* 1. 小さめ維持グループ (.clinic-cv-table-head) */
  .clinic-cv-table-head a.cta { font-size: 14px !important; }
  .clinic-cv-table-head .clinic-cv-table-aori { font-size: 12px !important; }

  /* 2. 大きめ変更グループ (.clinic-cv-table, .clinic-info) */
  .clinic-cv-table a.cta,
  .clinic-info a.cta {
      font-size: 17px !important; /* 14px → 17px にアップ */
  }
  .clinic-cv-table .clinic-cv-table-aori,
  .clinic-info .clinic-cv-table-aori {
      font-size: 14px !important; /* 12px → 13px に少しアップ */
  }

  /* --- ★アイコンサイズ調整（スマホ版 8px） --- */
  /* PCの10pxから8pxへ変更 */
  .clinic-cv-table a.cta::after,
  .clinic-cv-table-head a.cta::after,
  .clinic-info a.cta::after {
      width: 9px !important;
      height: 9px !important;
      background-size: contain !important; /* 念のため維持 */
  }
}

/* ========================================================== */
/* ★重要★ プロフィール（監修者）カード（行間・完全修正版）    */
/* ========================================================== */

/* 大枠 */
.author-box {
  display: grid !important;
  grid-template-columns: 40px 1fr !important; 
  gap: 0 30px !important;                     
  border: 1px solid #e3e3e3 !important;
  padding: 0 0 15px 0 !important;
  background-color: #fff !important;
  margin: 40px 0 !important;
  text-align: left !important;
  overflow: hidden !important;
}

/* 「書いた人」の帯 */
.author-info-title, 
.author-box-label, 
.author-box-title,
.author-widget-name {
  grid-column: 1 / 3 !important;
  background-color: #f0f0f0 !important; 
  color: #333 !important;
  font-size: 14px !important;
  font-weight: bold !important;
  text-align: center !important;
  padding: 10px 0 !important;
  margin: 0 0 15px 0 !important;
  border: none !important;
  display: block !important;
}

/* アイコン */
.author-thumb {
  grid-column: 1 / 2 !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 0 0 15px !important;
}
.author-thumb img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 文章エリア */
.author-content {
  grid-column: 2 / 3 !important;
  padding-right: 15px !important;
  margin: 0 !important;
}

/* 名前 */
.author-name {
  display: block !important;
  font-size: 16px !important;
  font-weight: bold !important;
  color: #000 !important;
  margin: 0 0 5px 0 !important; /* 名前と説明文の間も少しあけました */
}

/* 説明文（行間を2.0に強制固定） */
/* 中に <p> などのタグが入っていても効くようにしました */
.author-description,
.author-description p,
.author-description span {
  display: block !important;
  font-size: 12px !important;
  line-height: 1.6 !important; /* ここを思い切り広げました */
  margin: 0 !important;
}



/*★★★ここからブログカード★★★*/
.blogcard-wrap {
  width: 100% !important;
  box-shadow: 0px 6px 5px -6px #d1d1d1 !important;
	margin-top:30px !important;
}

.blogcard {
  border: none !important;
  border-right: solid 1px rgba(154, 154, 154, 0.2) !important;
  border-top: solid 1px rgba(154, 154, 154, 0.2) !important;

  border-left: solid 1px rgba(154, 154, 154, 0.2) !important;
  box-shadow: 0px 1px 1px 0px rgba(154, 154, 154, 0.4);
  padding: 10px 5px 15px 10px;
  border-radius: 2px !important;
}

a.blogcard-wrap {
  font-size: 18px !important;
  line-height: 1.4 !important;
  text-decoration: none !important;


}

@media screen and (max-width: 480px) {

  a.blogcard-wrap,
  a.blogcard-wrap * {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }
}


/*ファビコンとURL消す*/
.blogcard-favicon,
.blogcard-site {
  display: none;
}

a.blogcard-wrap .blogcard-post-date {
  font-size: 11px !important;
  color: #1B1B1B !important;
  padding: 5px 10px 0 0 !important;
}


.blogcard-wrap .blogcard-post-date::before {
  font-family: 'FontAwesome';
  content: '\f017';
margin-right:3px;
}


/*ブログカードの抜粋文を全て消す*/
.blogcard-snippet {
  display: none;
}


/* ==================================================
   Cocoon FAQ：公開ページ最終版
================================================== */

.entry-content .wp-block-cocoon-blocks-faq {
  --faq-key: #E66075;
  --faq-key-dark: #D24763;
  --faq-answer-bg: #FFF9F4;
  --faq-icon-size: 30px;
  --faq-gap: 12px;
  --faq-padding-x: 12px;
  --faq-question-padding-y: 11px;
  --faq-answer-padding-y: 18px;

  display: block !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;

  margin: 0 0 10px !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 通常の段落の直後にある最初のFAQだけ20px空ける */
.entry-content > p + .wp-block-cocoon-blocks-faq {
  margin-top: 20px !important;
}

/* FAQ同士は通常の10px間隔 */
.entry-content
.wp-block-cocoon-blocks-faq
+ .wp-block-cocoon-blocks-faq {
  margin-top: 0 !important;
}

/* FAQ内部 */
.entry-content
.wp-block-cocoon-blocks-faq
dl.faq {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==================================================
   Q欄
================================================== */

.entry-content
.wp-block-cocoon-blocks-faq
.faq-question {
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  gap: var(--faq-gap) !important;

  width: 100% !important;
  box-sizing: border-box !important;

  margin: 0 !important;
  padding:
    var(--faq-question-padding-y)
    44px
    var(--faq-question-padding-y)
    var(--faq-padding-x) !important;

  background: var(--faq-key) !important;
  border: 1px solid var(--faq-key) !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  cursor: pointer;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease;
}

.entry-content
.wp-block-cocoon-blocks-faq
.faq-question:hover {
  background: var(--faq-key-dark) !important;
  border-color: var(--faq-key-dark) !important;
}

/* Qアイコン */
.entry-content
.wp-block-cocoon-blocks-faq
.faq-question-label.faq-item-label {
  display: block !important;

  width: var(--faq-icon-size) !important;
  height: var(--faq-icon-size) !important;
  flex: 0 0 var(--faq-icon-size) !important;

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

  background-color: transparent !important;
  background-image:
    url("https://bikomi.net/wp-content/uploads/2025/10/Group-2-995225.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* Q本文を1px上げる */
.entry-content
.wp-block-cocoon-blocks-faq
.faq-question-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;

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

  color: #fff !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;

  transform: translateY(-1px) !important;
}

/* プラス・マイナス */
.entry-content
.wp-block-cocoon-blocks-faq
.faq-toggle-icon {
  position: absolute !important;
  top: 50% !important;
  right: 16px !important;

  width: 16px !important;
  height: 16px !important;
  margin-top: -8px !important;

  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff) !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 2px 100%, 100% 2px !important;

  transition:
    transform 0.3s ease,
    background-size 0.3s ease;
}

.entry-content
.wp-block-cocoon-blocks-faq
dl.faq.is-open
.faq-toggle-icon {
  transform: rotate(180deg) !important;
  background-size: 0 100%, 100% 2px !important;
}

/* ==================================================
   A欄
================================================== */

/* 高さの開閉はJavaScriptが制御する */
.entry-content
.wp-block-cocoon-blocks-faq
.faq-answer {
  width: 100% !important;
  box-sizing: border-box !important;

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

  background: transparent !important;
  border: 0 !important;
}

/* 回答欄本体 */
.entry-content
.wp-block-cocoon-blocks-faq
.faq-answer-inner {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--faq-gap) !important;

  width: 100% !important;
  box-sizing: border-box !important;

  margin: 0 !important;
  padding:
    var(--faq-answer-padding-y)
    var(--faq-padding-x) !important;

  background: var(--faq-answer-bg) !important;
  border: 1px solid var(--faq-key) !important;
  border-top: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Aアイコン */
.entry-content
.wp-block-cocoon-blocks-faq
.faq-answer-label.faq-item-label {
  display: block !important;

  width: var(--faq-icon-size) !important;
  height: var(--faq-icon-size) !important;
  flex: 0 0 var(--faq-icon-size) !important;

  margin: 2px 0 0 !important;
  padding: 0 !important;

  background-color: transparent !important;
  background-image:
    url("https://bikomi.net/wp-content/uploads/2025/10/Group-1-f2d1c0.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* A本文を2px下げる */
.entry-content
.wp-block-cocoon-blocks-faq
.faq-answer-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;

  margin: 2px 0 0 !important;
  padding: 0 !important;

  line-height: 1.8 !important;
}

.entry-content
.wp-block-cocoon-blocks-faq
.faq-answer-content p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.8 !important;
}

/*ここまでよくある質問*/

/* 「こんな人にオススメ見出しボックス」のカスタマイズ */
.caption-box.block-box.not-nested-style.cocoon-block-caption-box {
  border: 1px solid #E66075; /* 枠線の色 */
  border-radius: 6px;
	margin-top:30px;
}
/* 見出し部分の背景と文字色 */
.caption-box-label.block-box-label.box-label {
  background-color: #E66075; /* 背景色 */
  color: #fff; /* 文字色（白推奨） */
  padding: 6px 12px;
  border-radius: 4px 4px 0 0;
  display: flex;
  justify-content: center; /* 横方向中央 */
  align-items: center;     /* 縦方向中央 */
}

/* 見出しテキスト */
.caption-box-label-text {
  font-weight: bold;
	font-size:17px;
}

.caption-box-content{
	padding:20px 20px !important;
	line-height:1.7 !important;
}

.caption-box-content strong{
	background:none;
	color:#E66075;
}

.caption-box-content p {
  font-size:16px !important;
}
	


/* 2つ目以降の段落にだけ margin-top を追加 */
.caption-box-content p + p {
  margin-top: 10px !important;
}

/* ====================================================
   1. 白抜きボックス（blank-box）のデザイン
   ==================================================== */

/* クラスがあってもなくても、すべての白抜きボックスをこのデザイン（osusumeと同じ）に統一 */
.blank-box {
  margin-top: 30px;
  background-color: #FBF4F4 !important; /* 背景色 */
  border: 1px solid #FBF4F4 !important; /* 枠線 */
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 2em 1.5em !important;
  color: #333333 !important;
}


/* ====================================================
   2. リストの基本構造（全共通）
   数字消し・余白調整などの「機能」部分
   ==================================================== */

/* ★ここが重要：キャプションボックス、白抜きボックスの中身も対象に追加しました★ */
.caption-box-content ul, .caption-box-content ol, .caption-box-content .wp-block-list,
.blank-box ul, .blank-box ol, .blank-box .wp-block-list,
.list_osusume ul, .list_osusume ol, .list_osusume .wp-block-list {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  counter-reset: none !important;
}

.caption-box-content li, .caption-box-content .wp-block-list li,
.blank-box li, .blank-box .wp-block-list li,
.list_osusume li, .list_osusume .wp-block-list li {
  font-weight: bold;
  position: relative;
  padding-left: 24px !important;
  margin-bottom: 20px !important;
  list-style: none !important;
  background: none !important;
  line-height: 1.6;
  color: #333333 !important;
}

/* マーカー（黒点）を消す */
.caption-box-content li::marker, .caption-box-content .wp-block-list li::marker,
.blank-box li::marker, .blank-box .wp-block-list li::marker,
.list_osusume li::marker, .list_osusume .wp-block-list li::marker {
  display: none !important;
  content: "" !important;
}

/* 一番下の余白ゼロ */
.caption-box-content li:last-child, .caption-box-content .wp-block-list li:last-child,
.blank-box li:last-child, .blank-box .wp-block-list li:last-child,
.list_osusume li:last-child, .list_osusume .wp-block-list li:last-child {
  margin-bottom: 0 !important;
}


/* ====================================================
   3. アイコンと強調色の設定
   ==================================================== */

/* --- 太字（strong）の設定：ピンクにする --- */
.caption-box-content strong,
.blank-box strong,
.list_osusume strong {
  color: #E66075 !important;
  font-weight: bold !important;
  background: none !important;
  background-color: transparent !important;
  border-bottom: none !important;
}

/* --- A. 基本のアイコン（ピンクの矢印） --- */
/* ★ここも重要：すべてのボックス内リストを矢印にします */
.caption-box-content li::before, .caption-box-content .wp-block-list li::before,
.blank-box li::before, .blank-box .wp-block-list li::before,
.list_osusume li::before, .list_osusume .wp-block-list li::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 7px !important;
  width: 16px !important;
  height: 16px !important;
  background-image: url('https://bikomi.net/wp-content/uploads/2025/05/arrow-ba3cbc.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  border: none !important;
  background-color: transparent !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* --- B. おすすめしない（バツ画像）の上書き設定 --- */
/* 「.list_not_osusume」がついている時だけ、アイコンをバツに変える */
.blank-box.list_not_osusume ul li::before,
.blank-box.list_not_osusume ol li::before,
.blank-box.list_not_osusume .wp-block-list li::before,
.list_not_osusume ul li::before,
.list_not_osusume ol li::before,
.list_not_osusume .wp-block-list li::before {
  background-image: url('https://bikomi.net/wp-content/uploads/2025/11/not-67c375.svg') !important;
  /* バツ印の位置微調整 */
  top: 7px !important;
  left: 2px !important;
  width: 15px !important;
  height: 15px !important;
}

/*画像設定*/
/* wp-block-image の中央寄せと上下マージン30pxを強制 */
.entry-content .wp-block-image {
    margin: 30px auto !important; /* 上下30px、左右auto（中央寄せ） */
    display: block !important;
}



/*★★★ここからエディタ★★★*/


/*リンクボタン*/
.wp-block-button {
  max-width: 100%;
  width: 100%;
  /* 幅を親要素の100%にする */
}




/*エディタ用ハック→リンクに青線引く。めんどくさいから気をつける*/
.block-editor-block-list__layout p a,
.block-editor-block-list__layout ul a,
.block-editor-block-list__layout td a {
  color: #007bff !important;
  border-bottom: 1px solid #007bff !important;
  /* 下線をボーダーで表現 */
  text-decoration: none !important;
  padding-bottom: 0 !important;
  /* 必要に応じて微調整 */
  display: block !important;
  /* padding や line-height が効きやすくなる*/
}


/*わけわからない余白潰す*/
.block-editor-block-list__layout .wp-block-buttons.is-layout-flex.wp-block-buttons-is-layout-flex,
.block-editor-block-list__layout .wp-block-buttons.is-layout-flex.wp-block-buttons-is-layout-flex>.wp-block-button {
  margin: 0 auto !important;

}

/* ブロックエディタ内のボタン全般に適用 */
.block-editor-block-list__layout .wp-block-button,
.editor-styles-wrapper .wp-block-button {
  width: 100% !important;
  /* 幅を自動に */
  max-width: 850px !important;
  /* 任意の最大幅 */
  margin: 0 auto !important;
  display: block !important;
  /* ブロック要素に */
  float: none !important;
  /* float解除 */
  clear: both !important;
  /* float解除 */
}




/* 煽り文のスタイル */
.block-editor-block-list__layout .cta-aori {
  margin: 30px 0 0 0 !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: bold;
}

/*CTA上の余白*/
.block-editor-block-list__layout .wp-block-buttons.is-layout-flex.wp-block-buttons-is-layout-flex {
  margin-top: 30px !important;
}



/* 煽り直下に続くボタンの余白を潰す */
.block-editor-block-list__layout .cta-aori+.wp-block-buttons.is-layout-flex {
  margin-top: 5px !important;
}




.block-editor-block-list__layout .wp-block-button__link.wp-element-button,
.editor-styles-wrapper .wp-block-button__link.wp-element-button {
  width: 100%;
  background-color: #03AB92 !important;
  color: #fff !important;
  padding: 16px 30px 14px 30px !important;
  border-radius: 100vmax;
  text-decoration: none !important;
  font-weight: bold;
  display: block;
  box-shadow: 0px 3px 10px -5px #999999 !important;
  position: relative;
  overflow: hidden;
  line-height: 1.4;
  font-size: 22px;
  transition: none !important;
}

.block-editor-block-list__layout .wp-block-button__link.wp-element-button:hover,
.block-editor-block-list__layout .wp-block-button__link.wp-element-button:focus,
.block-editor-block-list__layout .wp-block-button__link.wp-element-button:active,
.editor-styles-wrapper .wp-block-button__link.wp-element-button:hover,
.editor-styles-wrapper .wp-block-button__link.wp-element-button:focus,
.editor-styles-wrapper .wp-block-button__link.wp-element-button:active {
  background-color: #03AB92 !important;
  color: #fff !important;
  box-shadow: 0px 3px 10px -5px #999999 !important;
  text-decoration: none !important;
}

.block-editor-block-list__layout .wp-block-button__link.wp-element-button::before,
.editor-styles-wrapper .wp-block-button__link.wp-element-button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -150%;
  width: 400%;
  height: 200%;
  background-color: rgba(255, 255, 255, 0.5);
  transform: rotate(-45deg) translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: opacity 2000ms, transform 2000ms;
  animation: shiny-button 2s ease-in-out infinite;
}



/*エディタ用ハック→見出しとp*/
.block-editor-block-list__layout .wp-block-heading+p {
  margin-top: 0px !important;
  font-size: 17px !important;

}

/* エディタ：段落の間にマージン */
.block-editor-block-list__layout p+p {
  margin-top: -10px;
  font-size: 17px !important;

}

/* エディタ：見出しのマージン */
.block-editor-block-list__layout h2 {
  margin-top: 35px !important;
  margin-bottom: 20px !important;
}

.block-editor-block-list__layout h3 {
  margin-top: 35px !important;
  margin-bottom: 20px !important;
}

.block-editor-block-list__layout h4 {
  margin-top: 35px !important;
  margin-bottom: 20px !important;
}

.block-editor-block-list__layout h5 {
  margin-top: 35px !important;
  margin-bottom: 20px !important;
}



/* 万が一マージンが折りたたまれるならpaddingで代用 */
.block-editor-block-list__layout h2+p,
.block-editor-block-list__layout h3+p,
.block-editor-block-list__layout h4+p,
.block-editor-block-list__layout h5+p,
.editor-styles-wrapper h2+p,
.editor-styles-wrapper h3+p,
.editor-styles-wrapper h4+p,
.editor-styles-wrapper h5+p {
  padding-top: -40px !important;

}

/* ブロック追加用のプラスボタン周りの余白を減らす */
.block-editor-block-list__insertion-point {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
  padding: 0 !important;
}

/* ブロック同士の間の余白を狭く */
.block-editor-block-list__layout>*+* {
  margin-top: 8px !important;
}


/* ========================================================== */
/* エディタ用：ボックスとリストのデザイン統一（強力版）         */
/* ========================================================== */

/* --------------------------------------------------
   1. 見出しボックス（caption-box）の強制ピンク化
   -------------------------------------------------- */
/* 箱全体の枠線をピンクに */
.editor-styles-wrapper .wp-block-cocoon-blocks-caption-box-1,
.editor-styles-wrapper .caption-box {
  border: 1px solid #E66075 !important;
  background-color: #ffffff !important; /* 中身は白 */
}

/* 見出し部分（ラベル）を強制的にピンク背景・白文字に */
.editor-styles-wrapper .wp-block-cocoon-blocks-caption-box-1 .caption-box-label,
.editor-styles-wrapper .caption-box .caption-box-label,
.editor-styles-wrapper .caption-box-label {
  background-color: #E66075 !important;
  color: #ffffff !important;
}


/* --------------------------------------------------
   2. 白抜きボックス（blank-box）のデザイン統一
   -------------------------------------------------- */
/* クラスが何もなくても、自動的にこの「薄ピンク背景」にします */
.editor-styles-wrapper .blank-box {
  margin-top: 30px !important;
  background-color: #FBF4F4 !important; /* 薄いピンク */
  border: 1px solid #FBF4F4 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 2em 1.5em !important;
  color: #333333 !important;
}

/* 「おすすめしない(.list_not_osusume)」の時もデザインを変えない */
.editor-styles-wrapper .blank-box.list_not_osusume {
  background-color: #FBF4F4 !important;
  border: 1px solid #FBF4F4 !important;
  border-radius: 8px !important;
}


/* --------------------------------------------------
   3. リストの自動アイコン化（矢印＆バツ）
   -------------------------------------------------- */

/* リストの点（マーカー）を消して、余白を作る */
.editor-styles-wrapper .caption-box .wp-block-list,
.editor-styles-wrapper .caption-box ul,
.editor-styles-wrapper .caption-box ol,
.editor-styles-wrapper .blank-box .wp-block-list,
.editor-styles-wrapper .blank-box ul,
.editor-styles-wrapper .blank-box ol {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.editor-styles-wrapper .caption-box li,
.editor-styles-wrapper .blank-box li {
  list-style: none !important;
  position: relative !important;
  padding-left: 24px !important;
  margin-bottom: 10px !important;
  line-height: 1.6 !important;
  border: none !important;
}

/* 黒丸完全消去 */
.editor-styles-wrapper .caption-box li::marker,
.editor-styles-wrapper .blank-box li::marker {
  content: none !important;
  display: none !important;
}


/* A. 基本はピンクの矢印（すべてのボックス内リストに適用） */
.editor-styles-wrapper .caption-box li::before,
.editor-styles-wrapper .blank-box li::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.5em !important;
  width: 16px !important;
  height: 16px !important;
  background-image: url('https://bikomi.net/wp-content/uploads/2025/05/arrow-ba3cbc.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  border: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* B. 「not_osusume」の時だけバツ画像で上書き */
.editor-styles-wrapper .blank-box.list_not_osusume li::before,
.editor-styles-wrapper .caption-box.list_not_osusume li::before {
  background-image: url('https://bikomi.net/wp-content/uploads/2025/11/not-67c375.svg') !important;
  left: 2px !important;
  width: 15px !important;
  height: 15px !important;
}

/* 4. 太字（strong）をピンクにする */
.editor-styles-wrapper .caption-box strong,
.editor-styles-wrapper .blank-box strong {
  color: #E66075 !important;
  background: none !important;
  font-weight: bold !important;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px) {
  /*必要ならばここにコードを書く*/
  /* ホームメニューの上部余白削減 */



}

/*834px以下*/
@media screen and (max-width: 834px) {

  /*必要ならばここにコードを書く*/
  #navi-footer {

    padding-left: 10px !important;
  }
}

/*480px以下*/
@media screen and (max-width: 480px) {
  /*必要ならばここにコードを書く*/

}