@charset "UTF-8";
/*
 Theme Name: SANGO Child
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/
/*サイト全体のフォントを変える*/
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カスタマイズ*/

/* 緑ボタン中央寄せ */
/* 親は触らない：.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表示領域の事前確保 ====== */

/* ====== 共通CTA ====== */
.ultimate-profit-box {
    margin: 30px auto 5px auto; 
    padding: 25px 15px 10px 15px;     
    max-width: 480px;
    text-align: center;
    background-color: #f9f9f9; 
    border-radius: 12px; 
    clear: both;
}

/* 一番上のコピー */
.u-micro-copy {
    font-size: 1.05rem; 
    font-weight: bold;
    color: #1C81E6; 
    margin-bottom: 10px; 
    margin-top: 0;
    line-height: 1.4;
	white-space: nowrap;
}

.u-btn-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.u-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px 10px; 
    border-radius: 8px;
    text-decoration: none !important;
    transition: 0.2s;
    box-shadow: 0 4px 0 rgba(0,0,0,0.12);
}

.u-asoview { background-color: #f44336; color: #fff !important; }
.u-rakuten { background-color: #28a745; color: #fff !important; }

.u-btn:active {
    transform: translateY(2px);
    box-shadow: none;
}

.u-main-text {
    font-size: 1.2rem; 
    font-weight: bold;
    line-height: 1.25;
    display: block;
}

.u-sub-text {
    font-size: 0.8rem;
    margin-top: 6px;
    opacity: 0.9;
}

.u-alert-text {
    display: block;
    font-size: 0.9rem;
    color: #d32f2f;
    margin-top: 20px !important; 
    margin-bottom: 0 !important;     
    font-weight: bold;
}

@media screen and (max-width: 480px) {
    .u-micro-copy {
        font-size: 0.85rem; /* 1.05remだと入り切らないから少し下げる */
    }
}
/* ====== END 共通CTA ====== */

/* 当サイトでは広告を掲載しています。 */
.ad-disclosure {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .8rem;
    line-height: 1.6;
    color: #9ca3af;
    padding: .45em .8em;
    margin: 0 0 0.4em 0;
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-height: auto;
    border: none;
    border-radius: .3em;
    text-align: center;
}

　/* SANGOのデフォルトスタイル（.entry-content p）より優先 */
.entry-content .ad-disclosure p {
    margin: 0;
    letter-spacing: .02em;
}
/* END 当サイトでは広告を掲載しています。 */