@charset "UTF-8";
/*
 Theme Name: SANGO Child
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
*/
/* 交差ラインブロック */
.CrossBox {
  position: relative;
  width: 85%;
  margin: 30px auto; /* 上下余白を増やしつつ中央に配置 */
  padding: 1.5em;
  color: #323232;
  border-top: solid 2px #5E8B6D;
  border-bottom: solid 2px #5E8B6D;

/* ▼ 追加：フォントを“少しだけ”小さく＆行間確保 */
  font-size: 0.95rem;   /* 例：約−5％（ベース16pxなら約15.2px） */
  line-height: 1.7;     /* 可読性のため行間をやや広めに */
}

/* モバイルでさらに少しだけ小さく */
@media (max-width: 480px) {
  .CrossBox {
    font-size: 0.92rem; /* 例：スマホでは更に微調整 */
  }
}

.CrossBox:before,
.CrossBox:after {
  content: '';
  position: absolute;
  top: -10px;
  width: 2px;
  height: calc(100% + 20px);
  background-color: #5E8B6D;
}

.CrossBox:before { left: 10px; }
.CrossBox:after  { right: 10px; }

.CrossBox p {
  margin: 0;
  padding: 0;
}

/* （任意）CrossBox内に見出しを入れる場合の過剰縮小防止 */
.CrossBox h2,
.CrossBox h3,
.CrossBox strong {
  font-size: 1em; /* 見出しがある場合は本文と同サイズに揃える */
  font-weight: 600;
}
/*サイト全体のフォントを変える*/
html body {
   font-family: 'M PLUS Rounded 1c',"segoe UI", 'Noto Sans JP', "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, sans-serif;
  /*  フォントのサイズ  */
  font-size: 16px;
  /*  フォントの色  */
  color: #333;
  /* 文字間隔の調整の設定 */
  letter-spacing: 1.5px;
  /* 行間の設定 */
  line-height: 1.75;
}
/*初期設定でQuicksandが使われている部分を変える*/
body .dfont {
   font-family: 'M PLUS Rounded 1c',"segoe UI", 'Noto Sans JP', "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, sans-serif;
}
/*Instagram中央表示*/
.instagram-media {
margin: 0 auto !important;
}
/*Twitter中央表示*/
.twitter-tweet {
margin: 0 auto !important;
}
/* レンダリングのパフォーマンスが向上 */
.story {
  content-visibility: auto;
  contain-intrinsic-size: 1000px; 
}
/* 蛍光ペン 細オレンジ */
.marker {
	background-image: -webkit-linear-gradient(transparent 60%, rgba(255,220,104,0.6) 0%);
	background-image: linear-gradient(transparent 60%, rgba(255,220,104,0.6) 0%);
    font-weight: bold;
}
/* デフォルトの見出しデザインをリセットh3 */
.entry-content h3 {
border-left: none;
padding-left: 0;
}
/*Contact Form 7カスタマイズ*/
/* ▼ テーブル全体と行の見た目 */
.entry-content .inquiry,
.entry-content .inquiry tr,
.entry-content .inquiry td,
.entry-content .inquiry th {
  border: 1px solid #d7d7d7;
  border-collapse: collapse;
  box-sizing: border-box;
}

/* ▼ 見出しセル（左カラム） */
.inquiry th {
  text-align: left;
  font-size: 14px;
  color: #444;
  padding: 8px 10px;
  width: 30%;
  background: #f7f7f7;
  vertical-align: top;
}

/* ▼ 入力セル（右カラム） */
.inquiry td {
  font-size: 13px;
  color: #333;
  padding: 8px 10px;
  background: #fff;
  vertical-align: top;
}

/* ▼ フィールド（テキスト、メール、テキストエリア） */
.inquiry input[type="text"],
.inquiry input[type="email"],
.inquiry textarea {
  width: 100%;
  max-width: 100%;
  border: 1px solid #bfc4c9;
  border-radius: 3px;
  background-color: #f1f4f7;
  box-sizing: border-box;
  padding: 8px 10px;
  line-height: 1.5;
  font-size: 14px;
  color: #333;
  margin-top: 6px;
  margin-bottom: 6px;
}

/* ▼ 必須などの注意メッセージ（CF7バリデーションメッセージ） */
.wpcf7-not-valid-tip {
  font-size: 12px;
  color: #d9534f;
  margin-top: 4px;
  display: block;
  line-height: 1.4;
}

/* ▼ 「必須」「任意」ラベル */
.haveto,
.any {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  padding: 4px 5px;
  color: #fff;
  border-radius: 2px;
  margin-right: 6px;
  position: relative;
  bottom: 1px;
  white-space: nowrap;
}
.haveto {
  background: #ff9393;
}
.any {
  background: #93c9ff;
}

/* ▼ ラジオボタン縦並び（使う場合用） */
.verticallist .wpcf7-list-item {
  display: block;
  margin-bottom: 6px;
}

/* ▼ チェックボックス同意ブロック
   - チェックボックスとテキストを横並び
   - 全体に余白と行間
*/
.consent-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 20px;
  line-height: 1.6;
  font-size: 14px;
  color: #333;
}

/* ▼ acceptance ショートコードが吐く input を内包する箱 */
.consent-box {
  line-height: 1;
  display: flex;
  align-items: flex-start;
}

/* ▼ チェックボックス本体のスタイル */
.consent-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: #ffaa56; /* テーマのボタン色に合わせる */
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* ▼ チェックボックスの説明文 */
.consent-text {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  flex: 1;
  min-width: 0;
}

/* ▼ 送信ボタン */
#formbtn {
  display: block;
  width: 70%;
  max-width: 260px;
  margin: 24px auto 0;
  padding: 1em 0;
  border: none;
  border-radius: 4px;
  background: #ffaa56;
  color: #fff;
  font-size: 18px;
  line-height: 1.4;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
}
#formbtn:hover {
  background: #ffc042;
  color: #fff;
  box-shadow: 0 3px 6px rgba(0,0,0,0.12);
}

/* ▼ モバイル用レイアウト（幅500px以下）
   - th/tdを縦並び（既存仕様を維持）
   - タップしやすいように余白拡大
   - チェックボックスも少し大きく
*/
@media (max-width: 500px) {

  .inquiry th,
  .inquiry td {
    display: block !important;
    width: 100% !important;
    border-top: none !important;
    box-sizing: border-box !important;
  }

  .inquiry tr:first-child th {
    border-top: 1px solid #d7d7d7 !important;
  }

  .inquiry th {
    padding: 10px;
    font-size: 14px;
  }

  .inquiry td {
    padding: 10px;
    font-size: 13px;
  }

/* 必須/任意バッジのサイズ（スマホで読める程度は維持） */
  .inquiry .haveto,
  .inquiry .any {
    font-size: 10px;
    padding: 4px 5px;
  }

/* 同意行（チェックボックス＋テキスト） */
  .consent-row {
    gap: 12px;
    margin: 18px 0 22px;
    font-size: 15px;
    line-height: 1.6;
  }

  .consent-row input[type="checkbox"] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
  }

  .consent-text {
    font-size: 15px;
    line-height: 1.6;
  }

/* ボタンはより押しやすく幅広に */
  #formbtn {
    width: 80%;
    max-width: 320px;
    font-size: 18px;
    line-height: 1.4;
    margin-top: 28px;
  }
}
/*END Contact Form 7カスタマイズ*/

/* テーブル */
/* === PCなど通常の画面幅用のスタイル === */
.sortable {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-family: sans-serif;
}

.sortable th,
.sortable td {
  border: 1px solid #ddd;
  padding: 12px 15px; /* 左右の余白を少し広げました */
  text-align: left;
}

.sortable thead th {
  background-color: #fffcf4; /* 背景色を変更 */
  font-weight: 700;          /* 太さを少し強調 */
  font-size: 1.1em;          /* 文字を少し大きく */
  color: #333;
  cursor: pointer;
}

.sortable tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.sortable tbody tr:hover {
  background-color: #f0f8ff; /* ホバー色を少し変更 */
}

/* スクロールラッパー */
.table-scroll {
  overflow-x: auto !important;     /* 強制的に横スクロール許可 */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  display: block;
  padding-bottom: 4px;             /* 下に少し余白を入れる */
  margin: 1em 0;
}

/* ラッパー内テーブル */
.table-scroll table {
  min-width: 700px;                /* 横スクロールが出る最低幅（調整可） */
  width: auto !important;          /* 100%指定を打ち消す */
  max-width: none !important;
  border-collapse: collapse;
  white-space: nowrap;             /* 折り返し防止 */
}

/* 横スクロールヒント（好みで削除可） */
.table-scroll::after {
  content: "→ 横スクロールできます";
  display: block;
  text-align: right;
  font-size: 12px;
  color: #9ca3af;
  padding-right: 10px;
  margin-top: -12px;
}

/* 親要素で overflow:hidden が効いている場合の防御 */
.entry-content,
.inside-article,
.site-content {
  overflow: visible !important;
}
/* END テーブル */

/* 緑ボタン中央寄せ */
/* 親は触らない：.green-bc だけを中央配置（横幅は伸ばさない） */
#inner-content .green-bc,
#inner-footer .green-bc {
  display: block;
  width: fit-content;     /* 中身分の幅に縮む。横幅は変えない */
  max-width: 100％;        /* はみ出し防止 */
  margin: 0 auto;         /* 要素自体を中央寄せ */
  text-align: center;     /* 中のテキスト・インライン要素を中央 */
}

/* 古めブラウザ向けフォールバック */
@supports not (width: fit-content) {
  #inner-content .green-bc,
  #inner-footer .green-bc {
    display: table;        /* shrink-to-fit 代替 */
    margin: 0 auto;
  }
}

/* .green-bc 内のボタンがブロックや100％幅で崩れている場合の矯正 */
#inner-content .green-bc button,
#inner-content .green-bc .btn,
#inner-footer .green-bc button,
#inner-footer .green-bc .btn {
  display: inline-block;   /* 行内ブロックにして親の text-align:center を効かせる */
  width: auto;             /* 全幅化を解除 */
  float: none;             /* 浮動化されていたら解除 */
}

/* ====== CLS対策：AdSense表示領域の事前確保 ====== */
/* 共通設定（.code-block-1, .code-block-2 などをまとめて指定） */
.code-block {
    display: flex;           /* 内容を中央寄せ */
    justify-content: center; /* 水平方向の中央寄せ */
    align-items: center;     /* 垂直方向の中央寄せ */
    background-color: #f7f7f7; /* （任意）読み込み中に表示する背景色 */
    transition: min-height 0.3s ease; /* 高さが変わる際のアニメーション */
}

/* 【確定】サイドバー最上部広告のCLS対策 */
#custom_html-2 {
    min-height: 320px; /* 広告300px + タイトルなどの余白分 */
    background-color: #f8f9fa; /* 読み込み前のグレーの下地 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 30px !important;
    overflow: hidden;
}

/* 記事内の広告（目次前など）のガタつき防止 */
.code-block-1 {
    min-height: 280px;
    margin: 20px auto;
    background-color: #f8f9fa;
}

/* スマホではサイドバー広告の高さ確保を解除（画面が狭いため） */
@media screen and (max-width: 767px) {
    #custom_html-2 {
        min-height: auto;
        background-color: transparent;
    }
}

/* モバイル（スマホ）向けの高さ確保 */
@media (max-width: 767px) {
    .code-block {
        /* モバイルで一般的な「300x250」レクタングル広告の高さを確保 */
        min-height: 260px; /* 広告250px + 上下微調整 */
    }
}

/* PC・タブレット（768px以上）向けの高さ確保 */
@media (min-width: 768px) {
    .code-block {
        /* PC版の広告サイズに合わせて調整 */
        /* 横長バナー(728x90)がメインの場合は100px程度、
           レクタングル(336x280)が出る場合は290px程度に設定 */
        min-height: 290px; 
    }
}
/* ====== END CLS対策：AdSense表示領域の事前確保 ====== */
/* --- Hタグの装飾 --- */
.single .entry-content h2,
.page .entry-content h2 {
    position: relative;
    padding: 0.5em 0.7em;
    background: #e2b007; /* マスタード */
    color: #fff;
    font-weight: bold;
    border-radius: 4px;
}

.single .entry-content h3,
.page .entry-content h3 {
    border-left: 5px solid #e2b007;
    border-bottom: 2px solid #e2b007;
    padding: 0.3em 0.5em;
    color: #333;
}
/* END --- Hタグの装飾 --- */

/* --- 箇条書き・番号付きリストの設定 --- */
/* RTOCの小見出し（level-2）のグレーボックス化を強制解除 */
div#rtoc-mokuji-wrapper ul.rtoc-mokuji.level-2,
div#rtoc-mokuji-wrapper ol.rtoc-mokuji.level-2 {
    background-color: transparent !important; /* グレーの背景を透明に */
    background-image: none !important;        /* 背景画像があれば消す */
    box-shadow: none !important;              /* 立体的な影を消す */
    border: none !important;                  /* 枠線を消す */
    padding: 0 0 0 1.5em !important;          /* 箱を消した分の余白調整 */
    margin: 5px 0 !important;                 /* 上下の余白調整 */
}
/* 小見出しの各行（li）にスタイルがついている場合の対策 */
div#rtoc-mokuji-wrapper ul.rtoc-mokuji.level-2 li.rtoc-item,
div#rtoc-mokuji-wrapper ol.rtoc-mokuji.level-2 li.rtoc-item {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}
/* デザイン調整 */
.entry-content ul, 
.entry-content ol {
    width: 90%;
    margin: 1.5em auto;
    padding: 1.5em 1.5em 1.5em 2.5em;
    background: #fdfcfb;
    border: 1px solid #e2b007;
    border-radius: 8px;
    color: #333;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* --- 箇条書き（ul）のデザイン --- */
.entry-content ul li {
    list-style-type: none !important;
    position: relative;
    padding: 0.5em 0;
    line-height: 1.6;
}

/* 💡アイコンの表示 */
.entry-content ul li::before {
    content: "💡" !important; /* 強制適用 */
    position: absolute;
    left: -1.8em;
    font-size: 0.9em;
    display: inline-block;
}

/* --- 番号付き（ol）のデザイン --- */
.entry-content ol {
    counter-reset: my-counter;
}

.entry-content ol li {
    list-style-type: none !important;
    position: relative;
    padding: 0.5em 0;
    counter-increment: my-counter;
}

.entry-content ol li::before {
    content: counter(my-counter);
    position: absolute;
    left: -2em;
    width: 1.5em;
    height: 1.5em;
    background: #e2b007;
    color: #fff;
    font-size: 0.8em;
    font-weight: bold;
    text-align: center;
    line-height: 1.5em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* モバイル対応 */
@media (max-width: 480px) {
    .entry-content ul, 
    .entry-content ol {
        width: 95%;
        padding: 1em 1em 1em 2em;
    }
}
/* END --- 箇条書き・番号付きリストの設定 --- */
/* カテゴリ一覧調整 */
/* 【2階層目】アイコン（>）の色をアクセントカラーにする */
.widget ul li ul li a::before {
    color: #e2b007 !important;
}

/* 【3階層目】文字サイズを小さくし、左の余白を調整 */
.widget ul li ul li ul li a {
    padding: 5px 7px 5px 24px !important; /* 左余白19px（お好みで調整可） */
    font-size: 90% !important;            /* 文字サイズを90%に */
}

/* 【3階層目】アイコンを「-」に変えて、アクセントカラーにする */
.widget ul li ul li ul li a::before {
    content: "-" !important;              /* 記号をハイフンに変更 */
    font-family: Arial, sans-serif !important; /* アイコンフォント解除 */
    color: #e2b007 !important;            /* 色は同じゴールド */
    padding-right: 5px !important;
    font-weight: bold !important;
}
/* END カテゴリ一覧調整 */

/* 404ページの画像に重なる「404」テキストを非表示にする */
.error404 .nofound-img h2.dfont.strong {
    display: none !important;
}

/* 記事内のテキストリンクを太字にする */
.entry-content p a,   /* 段落の中のリンク */
.entry-content li a { /* リスト（箇条書き）の中のリンク */
    font-weight: bold !important;
}