@charset "utf-8";
/* ============================================================
   AInformation　検索まわりの作り直しと「触ると反応する」動き
   swell_child/assets/css/ainews-ui.css   2026-08-31
   ------------------------------------------------------------
   ainews.css のあとに読む。読み込みをやめれば元の見た目に戻る。
     .ai-ui … 全ページ共通のパーツ（ヘッダー・カテゴリ帯・サイドバー）
     .ai-fx … トップページと記事ページだけに付く目印
   影は使わない。動きは短く（0.2秒前後）、触ったものが分かる程度に留める。
   ============================================================ */


/* ============================================================
   1. ヘッダーの検索窓
   ------------------------------------------------------------
   広告掲載ボタンを外したぶんを検索に回す。文字が途中で切れないように
   幅を360pxまで広げ、右に押せる検索ボタンを置く。
   ============================================================ */
.ai-ui .ai-hd__in{gap:24px;}
.ai-ui .ai-hd__r{gap:10px;}

.ai-search--v2{
  width:min(360px,34vw);
  padding:0;
  gap:0;
  align-items:stretch;
  background:var(--ai-paper);
  border:1px solid #C6D2DA;
  transition:border-color .18s ease;
}
.ai-search--v2:hover{border-color:#A9BAC6;}
.ai-search--v2:focus-within{border-color:var(--ai-accent);}
.ai-search--v2 input{
  flex:1 1 auto;
  min-width:0;
  padding:9px 13px;
  font-size:13.5px;
  line-height:1.5;
}
.ai-search--v2 input::placeholder{color:#8A99A5;opacity:1;}
/* 入力欄の右端に出るブラウザ標準の×は Safari だけ形が違う。見た目をそろえる */
.ai-search--v2 input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;}

.ai-search__go{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0;
  border:0;
  padding:0 15px;
  background:var(--ai-ink);
  color:#fff;
  font:inherit;
  font-size:13px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:background .18s ease;
}
.ai-search__go:hover{background:var(--ai-accent-ink);}
.ai-search__go:active{background:#095E7C;}

/* スマホ用。ヘッダーの虫めがね */
.ai-search-open{
  display:none;
  width:40px;height:40px;
  border:0;background:none;padding:0;
  color:var(--ai-text);
  cursor:pointer;
  align-items:center;justify-content:center;
  transition:color .18s ease;
}
.ai-search-open:hover{color:var(--ai-accent-ink);}

/* スマホ用。虫めがねを押すとヘッダーの下に開く */
.ai-spsearch{display:none;}
.ai-spsearch__form{display:flex;padding:11px 20px 12px;background:var(--ai-surface);}
.ai-spsearch__form input{
  flex:1 1 auto;min-width:0;
  border:1px solid var(--ai-line);border-right:0;
  background:#fff;
  padding:10px 12px;
  font:inherit;
  font-size:16px;            /* 16px 未満だと iPhone で画面が勝手に拡大する */
  line-height:1.5;
  color:var(--ai-text);
  outline:none;
}
.ai-spsearch__form input:focus{border-color:var(--ai-accent);}
.ai-spsearch__form button{
  flex:0 0 auto;border:0;
  background:var(--ai-ink);color:#fff;
  font:inherit;font-size:13.5px;font-weight:700;
  padding:0 18px;cursor:pointer;
}

/* ドロワーの中の検索窓も同じ大きさにそろえる */
.ai-ui .ai-drawer__panel .ai-search{padding:0;gap:0;align-items:stretch;background:var(--ai-paper);}
.ai-ui .ai-drawer__panel .ai-search input{padding:10px 12px;font-size:16px;}

/* メニューが畳まれる幅ではナビの場所が空くので、検索窓の幅を確保する。
   34vw のままだと 760px あたりで文字が途中で切れる */
@media (max-width:1000px){
  .ai-ui .ai-search--v2{width:min(360px,56vw);}
}

@media (max-width:680px){
  .ai-ui .ai-search-open{display:flex;}
  .ai-ui .ai-spsearch{
    display:block;
    max-height:0;
    overflow:hidden;
    transition:max-height .22s ease;
  }
  .ai-ui .ai-spsearch.is-open{max-height:70px;border-top:1px solid var(--ai-line);}
}


/* ============================================================
   2. 触ると反応する（全ページ共通のパーツ）
   ============================================================ */

/* ヘッダーのメニュー。下に水色の線が伸びる */
.ai-ui .ai-gnav a{position:relative;transition:color .18s ease;}
.ai-ui .ai-gnav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;
  background:var(--ai-accent);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .2s ease;
}
.ai-ui .ai-gnav a:hover::after{transform:scaleX(1);}

/* カテゴリ帯。地の色が変わるだけだと分かりにくいので下に線を足す */
.ai-ui .ai-cb__item{position:relative;}
.ai-ui .ai-cb__item::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--ai-accent);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .2s ease;
}
.ai-ui .ai-cb__item:hover::after{transform:scaleX(1);}
.ai-ui .ai-cb__item.is-on::after{content:none;}

/* 速報ストリップの見出し */
.ai-ui .ai-strip__txt{transition:color .18s ease;}
.ai-ui .ai-strip__txt:hover{color:var(--ai-accent);}

/* サイドの最新ニュース */
.ai-ui .ai-mini__img{overflow:hidden;}
.ai-ui .ai-mini__img img{transition:transform .45s cubic-bezier(.2,.6,.2,1);}
.ai-ui .ai-mini:hover .ai-mini__img img{transform:scale(1.06);}
.ai-ui .ai-mini__title{transition:color .18s ease;}

/* ランキング */
.ai-ui .ai-rank{transition:background .18s ease;}
.ai-ui .ai-rank:hover{background:var(--ai-surface);}
.ai-ui .ai-rank__no{transition:transform .2s ease;}
.ai-ui .ai-rank:hover .ai-rank__no{transform:translateX(2px);}

/* もっと見る・一覧を見る。矢印が右へ動く */
.ai-ui .ai-more{transition:color .18s ease;}
.ai-ui .ai-more::after{display:inline-block;transition:transform .18s ease;}
.ai-ui .ai-more:hover::after{transform:translateX(3px);}

/* バッジ・タグ・ページ送り。色の変わり方をなめらかにそろえる */
.ai-ui .ai-badge,
.ai-ui .ai-btn,
.ai-ui .ai-tag,
.ai-ui .ai-tags a,
.ai-ui .ai-subcats a,
.ai-ui .ai-crumb a,
.ai-ui .ai-pager .page-numbers,
.ai-ui .ai-ft li a{transition:background .18s ease,color .18s ease,border-color .18s ease,opacity .18s ease;}

/* メールの登録ボタン */
.ai-ui .ai-mlbox button{transition:background .18s ease,color .18s ease;}


/* ============================================================
   3. 触ると反応する（トップページと記事ページ）
   ============================================================ */

/* ★ カードの画像。いまは常に4.5%拡大されたままで、触っても何も起きない。
      拡大を触ったときだけに戻す */
.ai-ui .ai-card__media img{transform:none;transition:transform .45s cubic-bezier(.2,.6,.2,1);}
.ai-fx .ai-card:hover .ai-card__media img,
.ai-fx .ai-card:focus-within .ai-card__media img{transform:scale(1.055);}

/* カードのタイトル。下に水色の線が左から伸びる */
.ai-fx .ai-card__title{
  padding-bottom:3px;
  background-image:linear-gradient(var(--ai-accent),var(--ai-accent));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 2px;
  transition:background-size .3s ease,color .18s ease;
}
.ai-fx .ai-card:hover .ai-card__title,
.ai-fx .ai-card:focus-within .ai-card__title{background-size:100% 2px;}

/* いちばん上の大きい記事 */
.ai-fx .ai-lead__media img{transition:transform .5s cubic-bezier(.2,.6,.2,1);}
.ai-fx .ai-lead__media:hover img{transform:scale(1.03);}
.ai-fx .ai-lead__title a{transition:color .18s ease;}

/* 目次。番号が水色に反転する */
.ai-fx .ai-toc li::before{transition:background .18s ease,color .18s ease,border-color .18s ease;}
.ai-fx .ai-toc li:hover::before{background:var(--ai-accent);color:#fff;border-bottom-color:var(--ai-accent);}
.ai-fx .ai-toc a{transition:color .18s ease;}

/* 前後の記事。PREV / NEXT が外側へ動く */
.ai-fx .ai-nav a{transition:background .18s ease;}
.ai-fx .ai-nav__lb{display:inline-block;transition:transform .2s ease,color .18s ease;}
.ai-fx .ai-nav a:hover .ai-nav__lb{color:var(--ai-accent-ink);transform:translateX(-3px);}
.ai-fx .ai-nav .is-next:hover .ai-nav__lb{transform:translateX(3px);}
.ai-fx .ai-nav__t{transition:color .18s ease;}

/* シェアと本文中のリンク */
.ai-fx .ai-share a,.ai-fx .ai-share button{transition:background .18s ease,color .18s ease,border-color .18s ease;}
.ai-fx .ai-single .post_content a{transition:color .18s ease,text-decoration-thickness .18s ease;}


/* ============================================================
   4. 指で触るとき
   ------------------------------------------------------------
   スマホにはホバーが無いので、押している間だけ反応を出す。
   ============================================================ */
@media (hover:none){
  .ai-fx .ai-card:active .ai-card__title{color:var(--ai-accent-ink);}
  .ai-ui .ai-mini:active .ai-mini__title{color:var(--ai-accent-ink);}
  .ai-ui .ai-rank:active{background:var(--ai-surface);}
  .ai-ui .ai-cb__item:active{background:var(--ai-ink2);}
}

/* ============================================================
   5. ロゴが脈打つ（全ページ共通）
   ------------------------------------------------------------
   ページを開いたときに1回だけ、そのあとはロゴに触ったときだけ動く。
   先頭の「AI」が2回ふくらみ、水色の輪が外へ広がって消える。
   .is-play が付いている間だけ再生する（付け外しは ainews-ui.js）。
   ロゴを画像に差し替えると <b> が無くなるので、そのときは何も起きない。
   ============================================================ */

.ai-ui .ai-logo b{position:relative;display:inline-block;}
.ai-ui .ai-logo b::before{
  content:"";
  position:absolute;left:50%;top:50%;
  width:30px;height:30px;margin:-15px 0 0 -15px;
  border:2px solid var(--ai-accent);
  border-radius:50%;
  opacity:0;
  pointer-events:none;
}
.ai-ui .ai-logo.is-play b{animation:ai-logo-beat 1.1s ease both;}
.ai-ui .ai-logo.is-play b::before{animation:ai-logo-ring 1.1s ease-out both;}

@keyframes ai-logo-beat{
  0%,100%{transform:scale(1);filter:none;}
  22%    {transform:scale(1.16);filter:drop-shadow(0 0 10px rgba(26,194,241,.85));}
  44%    {transform:scale(1);}
  62%    {transform:scale(1.1);filter:drop-shadow(0 0 7px rgba(26,194,241,.6));}
}
/* 白いヘッダーの中で広がりきる大きさに留める。
   下のカテゴリ帯（濃紺）まで出すと輪が沈んで見えなくなるため */
@keyframes ai-logo-ring{
  0%  {transform:scale(.5);opacity:.95;}
  70% {opacity:.3;}
  100%{transform:scale(1.6);opacity:0;}
}


/* ============================================================
   6. 速報の帯（全ページ共通）
   ------------------------------------------------------------
   最新3本を重ねて置き、5秒ごとに下から入れ替える（ainews-ui.js）。
   上のカテゴリ帯と同じ濃紺で continuous に見えるぶん中身が上へ詰まって
   見えるので、上の余白を厚くして下げる。
   ============================================================ */
/* 上のカテゴリ帯と同じ濃紺だと境目が消えて読みにくい。一段明るくして分ける */
.ai-ui .ai-strip{background:#1C3549;padding:19px 0 14px;}

.ai-ui .ai-strip__slide{
  position:relative;
  flex:1 1 auto;
  min-width:0;
  font-size:13.5px;          /* 高さを文字と同じ基準で決める（body の 15px を継承させない） */
  height:1.8em;              /* 文字1行ぶん。入れ替えても帯の高さが動かないように */
}
.ai-ui .ai-strip__slide .ai-strip__txt{
  position:absolute;left:0;right:0;top:0;
  display:block;
  opacity:0;
  visibility:hidden;
  transform:translateY(7px);
  /* 入ってくる方は少し遅らせる。同時だと2本が重なって二重に見える */
  transition:opacity .4s ease .13s,transform .4s ease .13s,color .18s ease;
}
.ai-ui .ai-strip__slide .ai-strip__txt.is-on{
  opacity:1;visibility:visible;transform:none;
}
/* 出ていく1本。visibility を残さないと消える瞬間が見えない */
.ai-ui .ai-strip__slide .ai-strip__txt.is-out{
  opacity:0;visibility:visible;transform:translateY(-7px);
  transition:opacity .26s ease,transform .26s ease;
}


/* 動きを減らす設定の人には出さない（ainews.css の指定と同じ考え方） */
@media (prefers-reduced-motion:reduce){
  .ai-ui *,.ai-fx *{transition:none!important;animation:none!important;}
  .ai-fx .ai-card:hover .ai-card__media img{transform:none;}
}

/* 上と対（2026-08-31）。1000px以下は既存の min(360px,56vw) を残したいので、
   下限を 1001px で切ってある。ここを外すと760px前後で検索の文字が切れる。
   2026-09-01：入力欄を16pxにした分だけ幅を広げて余白を詰めた（300px のままだと
   「AIツール・キーワードで検索」が12px 足りずに切れる）*/
@media (min-width:1001px) and (max-width:1160px){
  .ai-ui .ai-hd__in{gap:16px;}
  .ai-ui .ai-search--v2{width:322px;}
  .ai-ui .ai-search--v2 input{padding-left:10px;padding-right:10px;}
}


/* ============================================================
   3. 打ち込む欄は 16px より小さくしない（2026-09-01）
   ============================================================
   16px 未満の入力欄を iPhone / iPad でタップすると、画面が勝手に拡大されて戻らない。
   対象は文字を打つ欄だけ。チェックとラジオは拡大が起きないので触らない。
   ainews.css より後に読まれるので、向こうの 13px / 13.5px はここで上書きされる */
.ai-mlbox input,
.ai-search input,
.ai-search--v2 input,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="search"],
.wpcf7-form input[type="password"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea{font-size:16px;}

/* お問い合わせの表は size="40" の既定幅で決まるので、16px にすると横へ広がって
   375px の画面からはみ出す。幅を枠に合わせる。
   サイトの追加CSS（.CF7_table input）はインラインで後に出るため、
   .wpcf7-form を足して強さで勝たせてある */
.wpcf7-form .CF7_table input[type="text"],
.wpcf7-form .CF7_table input[type="email"],
.wpcf7-form .CF7_table input[type="tel"],
.wpcf7-form .CF7_table input[type="url"],
.wpcf7-form .CF7_table input[type="number"],
.wpcf7-form .CF7_table input[type="search"],
.wpcf7-form .CF7_table input[type="password"],
.wpcf7-form .CF7_table input[type="date"],
.wpcf7-form .CF7_table textarea,
.wpcf7-form .CF7_table select{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}