@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

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

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

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

/************************************
** Aima独自ブロックのモバイル崩れ修正（2026-08-12）
** 追加CSS(wp-custom-css)はこのファイルより後に読み込まれるため、
** .entry-content を付けて詳細度を上げて上書きしている。
** CTAは2種類のマークアップが混在:
**   A) .aima-cta > .aima-cta-text + p > a,a
**   B) .aima-cta > a,a （pなし）
************************************/

/* A) pでラップされている場合: pをflexにして折り返しても中央を保つ */
.entry-content .aima-cta p {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 16px;
  margin: 0;
}
/* flexのgapで間隔を作るので、折り返し時に中央をズラす margin-left は消す */
.entry-content .aima-cta p a + a {
  margin-left: 0;
}

/* B) aが直下の場合: PCでの間隔は従来どおり維持する */
.entry-content .aima-cta > a + a {
  margin-left: 16px;
}

/* 比較表: overflow:hidden で右側の列が切れて読めない問題を修正（横スクロール可に） */
@media screen and (max-width: 834px) {
  .entry-content table.aima-compare {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
}

/* スマホ: ボタンを縦積みして幅をそろえる（288px/294pxのガタつき解消） */
@media screen and (max-width: 480px) {
  .entry-content .aima-cta {
    padding: 24px 16px;
  }
  .entry-content .aima-cta p {
    flex-direction: column;
  }
  .entry-content .aima-cta a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    font-size: 16px;
  }
  /* B) 縦積みにするので横マージンは消して縦の間隔に置き換える */
  .entry-content .aima-cta > a + a {
    margin-left: 0;
    margin-top: 12px;
  }
  .entry-content .aima-cta-text {
    font-size: 16px;
    line-height: 1.6;
  }
  .entry-content table.aima-compare {
    font-size: 13px;
  }
  .entry-content .aima-compare th,
  .entry-content .aima-compare td {
    padding: 10px 12px;
  }
}

/* 比較表の強調セル（th以外にも効くようにする） --- */
/* 親テーマ側は th.aima-highlight しか定義がなく、
   記事側は td / tr に付けているため効いていなかった。
   td は文字色が濃いので、背景は淡いゴールドにして可読性を保つ。 */
.entry-content .aima-compare td.aima-highlight,
.entry-content .aima-compare tr.aima-highlight td {
  background: #FDF6E3 !important;
  font-weight: 600;
  box-shadow: inset 3px 0 0 #D4A843;
}