@charset "utf-8";
/*
Theme Name: SWELL CHILD (akspot)
Template: swell
Theme URI: https://github.com/shngmsw/akspot-swell-theme
Description: SWELLの子テーマ。えけすぽ！(akspot.april-knights.com) 用カスタマイズ。
Author: April Knights Inc.
Version: 0.1.0
Text Domain: swell_akspot
*/

@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Sans+JP:wght@100..900&display=swap");

:root {
  --aks-main: #4e82c2;
  --aks-accent: #f4d124;
  --aks-bg: #f7f7f7;
  --aks-text: #24252d;
  --aks-radius: 4px;
  --aks-footer-bg: #24252d;
}

body {
  font-family: "Lato", "Noto Sans JP", sans-serif;
}

/* =========================================================
 * ヘッダー: 本番(jstork_custom)の段組み再現
 *   1段目: ロゴ(左) + 独自リンク3つ(右)  -- 白背景
 *   2段目: グローバルナビ(ロゴ下、全幅)   -- 白背景
 * (本番のヘッダー自体は白。青文字や青ボタンが乗るだけ)
 * =======================================================*/
.l-header { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.l-header__inner.l-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.3em;
  padding-top: 8px;
  padding-bottom: 0;
}
/* 1段目: ロゴ */
.l-header__logo { flex: 0 0 auto; margin-right: auto; }
.l-header__logo .c-headLogo__img { max-height: 44px; width: auto; }

/* 1段目: えけすぽ独自リンク3つ(ロゴ右) */
.aks-header-links {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.8em;
  flex: 0 0 auto;
  order: 2;
}
.aks-header-link {
  display: flex;
  align-items: center;
  gap: 0.3em;
  text-decoration: none;
  font-weight: bold;
  padding: 0.45em 0.9em;
  border-radius: 2em;
  white-space: nowrap;
  line-height: 1.2;
}
.aks-header-link svg { width: 1.2em; height: 1.2em; }
.aks-header-link--about { color: #414143; background: transparent; }
.aks-header-link--about:hover { color: #414143; opacity: 0.7; }
.aks-header-link--company { background: #eaebf0; color: var(--aks-main); }
.aks-header-link--company:hover { color: var(--aks-main); opacity: 0.85; }
.aks-header-link--recruit {
  color: #fff;
  background: linear-gradient(135deg, #6ab7f4 0%, #a496fb 100%);
}
.aks-header-link--recruit:hover { color: #fff; opacity: 0.85; }

/* ヘッダー右端: 検索アイコンボタン(虫眼鏡) — 本番準拠の位置に */
.aks-header-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: 0.4em;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  color: var(--aks-text);
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.aks-header-search:hover { background: #eaebf0; color: var(--aks-main); }
.aks-header-search__icon { display: block; }

/* SWELL の上部バー(.l-header__bar)は header_contents.php でも出力停止しているが、
   親テーマカスタマイザー側で再有効化されたとき用に CSS でも保険で隠す */
.l-header__bar { display: none !important; }

/* 2段目: グローバルナビを全幅で押し出し */
.l-header__gnav {
  order: 3;
  flex: 0 0 100%;
  width: 100%;
  margin-top: 0.3em;
}
.l-header .c-gnav {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  gap: 0 1.5em;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.l-header .c-gnav > li > a {
  color: var(--aks-main);
  padding: 0.4em 0;
  font-size: 0.9em;
  font-weight: 700;
  white-space: nowrap;
}
.l-header .c-gnav > li > a:hover { color: var(--aks-main); opacity: 0.75; }
.l-header .c-gnav > li > a::after { background: var(--aks-accent); }
/* 現在地(カテゴリ閲覧中)のメニューは黄色い下線で強調 (現行準拠) */
.l-header .c-gnav > li.current-menu-item > a,
.l-header .c-gnav > li.current_page_item > a,
.l-header .c-gnav > li.current-category-ancestor > a,
.l-header .c-gnav > li.current-menu-parent > a,
.l-header .c-gnav > li.current-menu-ancestor > a {
  border-bottom: 3px solid var(--aks-accent);
}
.l-header .c-gnav .sub-menu { background: #fff; color: #333; }
.l-header .c-gnav .sub-menu a { color: #333; }
.l-header .c-gnav .sub-menu a:hover { color: var(--aks-main); }

/* お知らせバー(グロナビ下のYouTube誘導、現行準拠):
   青いバー全幅 + 白文字センター。SWELL の動的CSS(background-color等)が
   出力されないケースがあるため子テーマで明示的に指定する */
.c-infoBar {
  background: var(--aks-main) !important;
  text-align: center;
}
.c-infoBar__link {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
}
.c-infoBar__text {
  color: #fff !important;
  font-size: 0.8em;
  font-weight: 500;
}
.c-infoBar__link:hover .c-infoBar__text { text-decoration: underline; }

/* SPは独自リンクとPCナビを隠す(SWELLのSPメニューに任せる) */
@media only screen and (max-width: 959px) {
  .aks-header-links { display: none; }
  .l-header__gnav { display: none; }
  .l-header__inner.l-container { padding-top: 0; }
}

/* =========================================================
 * フッター: えけすぽ独自(本番 jstork_custom 準拠)
 * SWELLの l-footer の直前に独自フッタを差し込む
 * =======================================================*/
.aks-footer {
  background: var(--aks-footer-bg);
  color: #cacaca;
  padding: 2em 1em 1em;
}
.aks-footer-inner { max-width: 1166px; margin: 0 auto; }

.aks-footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5em;
  margin-bottom: 2em;
}
.aks-footer-logo { width: 12em; display: inline-block; }
.aks-footer-logo img { width: 100%; height: auto; display: block; }
.aks-footer-sns { display: flex; gap: 1em; }
.aks-footer-sns-btn {
  width: 8em;
  height: 3em;
  background: #fff;
  padding: 0.8em 1em;
  border-radius: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}
.aks-footer-sns-btn:hover { opacity: 0.8; }
.aks-footer-sns-btn img { display: inline-block; width: 100%; height: 100%; object-fit: contain; }

.aks-footer-nav { margin: 1.5em 0; }
.aks-footer-nav-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5em 1.5em;
}
.aks-footer-nav-list a {
  color: #cacaca;
  text-decoration: none;
  font-size: 0.85em;
}
.aks-footer-nav-list a:hover { color: #fff; text-decoration: underline; }

.aks-footer-copyright {
  text-align: center;
  font-size: 0.82em;
  color: #cacaca;
  margin: 1em 0 0;
}

@media only screen and (max-width: 767px) {
  .aks-footer-top { flex-direction: column; align-items: center; }
}

/* =========================================================
 * トップページ
 * 本番計測値:
 *   body.bgfull = #f7f7f7
 *   #inner-content (=コンテナ) = 1166px (padding 35px)
 *   .top-home #main = 1096px
 * =======================================================*/
/* SWELL は body_class を <div id="body_wrap"> に出力するので、
   ターゲットは body ではなく #body_wrap.home になる。
   背景色は :root の --color_bg を上書きするのが一番確実。 */
:root { --color_bg: #f7f7f7; }
#body_wrap.home { background: var(--aks-bg); }
#body_wrap.home #content,
#body_wrap.home .l-content,
#body_wrap.home .l-mainContent { background: transparent; }
#body_wrap.home .l-content.l-container {
  max-width: 1166px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* =========================================================
 * single / archive: 共通のコンテナ幅も本番に揃える
 *   single はサイドバー無し前提で 1166px 中央寄せ。
 *   archive は右サイドバーありなので 1166px の中で 2:1 で分割 (本番準拠)。
 * =======================================================*/
#body_wrap .l-content.l-container {
  max-width: 1166px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
/* archive(カテゴリ/タグ)固有: h1の「– category –」「– tag –」接尾辞を非表示 */
.c-pageTitle__subTitle { display: none !important; }
/* SWELL の data-style="b_bottom" による .c-pageTitle__inner の青い下線を削除
   (Figma #14 指示: 線要らない、その分下に下がってバランス) */
.archive .c-pageTitle__inner { border-bottom: 0 !important; padding-bottom: 0 !important; }
.archive .c-pageTitle { padding-bottom: 16px; margin-bottom: 24px; }

/* =========================================================
 * archive: 本番(jstork_custom)レイアウトに合わせて
 *   - メイン + 右サイドバーの 2 カラム
 *   - 記事1件 = 横長 (左サムネ + 右テキスト) のリスト表示
 *   - メインカラム背景は白、ページ全体背景はグレー
 * =======================================================*/
/* ページ全体: トップと同じグレー背景 */
.archive #body_wrap { background: var(--aks-bg); }
.archive #content,
.archive .l-content { background: transparent; }

/* 2カラム化: SWELLは .l-content.l-container 直下に
   .l-mainContent と #sidebar(div.l-sidebar) を並べる構成。
   親 SWELL 既定では grid だが、本番の比率に合わせて flex で実装。 */
.archive .l-content.l-container {
  display: flex !important;
  flex-wrap: wrap;
  gap: 36px;
  align-items: flex-start;
}
.archive .l-content > .l-mainContent {
  flex: 1 1 0;
  min-width: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
.archive .l-content > .l-sidebar,
.archive .l-content #sidebar {
  flex: 0 0 336px;
  width: 336px;
  max-width: 100%;
  background: transparent;
  padding: 0;
}

/* h1「ネタ」などのカテゴリタイトル: 本番風にシンプルに */
.archive .c-pageTitle {
  background: none !important;
  text-align: left;
  padding: 0 0 16px;
  margin: 0 0 16px;
  border-bottom: 2px solid var(--aks-main);
}
.archive .c-pageTitle__main { font-size: 1.5em; color: var(--aks-text); }

/* 投稿リスト: 1カラム縦並び・各 item は左サムネ + 右テキスト */
.archive .p-postList {
  display: block !important;
  grid-template-columns: none !important;
  margin: 0;
}
.archive .p-postList__item {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 24px;
  padding: 0 0 24px;
  border-bottom: 1px solid #eee;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.archive .p-postList__item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.archive .p-postList__item > a,
.archive .p-postList__link {
  display: flex !important;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  text-decoration: none;
}
.archive .p-postList__thumb,
.archive .p-postList__figure,
.archive .p-postList__item figure {
  flex: 0 0 280px;
  width: 280px;
  margin: 0;
}
/* サムネは 1200x630 (アイキャッチ元画像) をトリミングせずそのまま表示する。
   SWELL が 16:9 のクロップ(aspect-ratio)を強制するため !important で解除。
   ラッパー(.p-postList__thumb / .c-postThumb__figure)も 16:9 の高さが残ると
   画像の下に白い余白が出るので高さを画像に追従させ、img の absolute 配置も解除。
   SWELL のサムネ box-shadow も本番に無いので削除。
   対象: archive の記事一覧 + single の関連記事 (.p-relatedPosts) */
.archive .p-postList__thumb,
.archive .p-postList__thumb .c-postThumb__figure,
.p-relatedPosts .p-postList__thumb,
.p-relatedPosts .p-postList__thumb .c-postThumb__figure {
  height: auto !important;
  aspect-ratio: auto !important;
  padding-top: 0 !important;
  box-shadow: none !important;
}
/* SWELL は figure の ::before (padding-top) で 16:9 の高さを確保するのでこれも解除 */
.archive .p-postList__thumb .c-postThumb__figure::before,
.p-relatedPosts .p-postList__thumb .c-postThumb__figure::before {
  content: none !important;
  padding-top: 0 !important;
  display: none !important;
}
.archive .p-postList__thumb img,
.archive .p-postList__figure img,
.archive .p-postList__item figure img,
.archive .c-postThumb__img,
.p-relatedPosts .p-postList__thumb img,
.p-relatedPosts .c-postThumb__img {
  position: static !important;
  width: 100%;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: unset !important;
  display: block;
  border-radius: var(--aks-radius);
}
.archive .p-postList__body,
.archive .p-postList__inner {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
}
.archive .p-postList__title,
.archive .p-postList__item .c-postTitle,
.archive .p-postList__item h2 {
  font-size: 1.15em;
  line-height: 1.5;
  margin: 0 0 0.4em;
  color: var(--aks-text);
}
.archive .p-postList__meta,
.archive .p-postList__times {
  font-size: 0.85em;
  color: #888;
  margin: 0 0 0.5em;
}
.archive .p-postList__excerpt,
.archive .p-postList__body p {
  font-size: 0.9em;
  line-height: 1.6;
  color: #555;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* サイドバーのウィジェット見た目: 本番(jstork_custom)準拠
   タイトルは青塗りつぶしの帯(白文字・全幅)、ウィジェット自体は枠なし。
   SWELL は widget root に .c-widget クラスを使うので両方カバー。 */
.archive #sidebar .widget,
.archive .l-sidebar .widget,
.archive #sidebar .c-widget,
.archive .l-sidebar .c-widget {
  background: transparent;
  padding: 0;
  margin: 0 0 24px;
  border-radius: 0;
  box-shadow: none;
}
.archive #sidebar .widgettitle,
.archive .l-sidebar .widgettitle,
.archive #sidebar .c-widget__title,
.archive .l-sidebar .c-widget__title {
  display: block;
  background: var(--aks-main);
  color: #fff;
  font-size: 0.95em;
  font-weight: bold;
  padding: 11px 14px;
  margin: 0 0 12px;
  border-left: none;
  border-radius: 3px;
  text-align: left;
}
.archive #sidebar .widgettitle span,
.archive .l-sidebar .widgettitle span,
.archive #sidebar .c-widget__title span,
.archive .l-sidebar .c-widget__title span {
  background: transparent;
  color: inherit;
  padding: 0;
}

/* レスポンシブ: タブレット以下はサイドバーを下に積む */
@media only screen and (max-width: 959px) {
  .archive .l-content.l-container {
    flex-direction: column;
    gap: 24px;
  }
  .archive .l-content > .l-sidebar,
  .archive .l-content #sidebar {
    flex: 1 1 100%;
    width: 100%;
  }
}
@media only screen and (max-width: 599px) {
  .archive .p-postList__item > a,
  .archive .p-postList__link {
    flex-direction: column;
    gap: 12px;
  }
  .archive .p-postList__thumb,
  .archive .p-postList__figure,
  .archive .p-postList__item figure {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* =========================================================
 * トップ下: 人気記事widget (SWELL Popular Posts のリスト型) を
 * 本番の「人気記事」相当に近いコンパクトな見た目に整える。
 *   - サムネを小さめ (90x60, 3:2) に
 *   - 各行の高さは控えめに
 * =======================================================*/
.aks-home-widget-area .widget_swell_popular_posts {
  max-width: 720px;
  margin: 0; /* 左寄せ: 記事一覧/バナーと同じ左端に揃える */
}
.aks-home-widget-area .widget_swell_popular_posts .p-postList.-type-list .p-postList__item {
  margin-bottom: 12px;
}
.aks-home-widget-area .widget_swell_popular_posts .p-postList.-type-list .p-postList__link {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.aks-home-widget-area .widget_swell_popular_posts .p-postList.-type-list .p-postList__thumb {
  flex: 0 0 90px !important;
  width: 90px !important;
  max-width: 90px !important;
}
.aks-home-widget-area .widget_swell_popular_posts .p-postList.-type-list .p-postList__thumb .c-postThumb__figure {
  width: 90px !important;
  height: auto !important;
}
.aks-home-widget-area .widget_swell_popular_posts .p-postList.-type-list .c-postThumb__img {
  width: 90px !important;
  height: 60px !important;
  aspect-ratio: 3/2 !important;
  object-fit: cover !important;
}
.aks-home-widget-area .widget_swell_popular_posts .p-postList.-type-list .p-postList__body {
  flex: 1 1 0;
  min-width: 0;
}
.aks-home-widget-area .widget_swell_popular_posts .p-postList.-type-list .p-postList__title {
  font-size: 0.95em;
  line-height: 1.5;
  margin: 0 0 4px;
}
.aks-home-widget-area .widget_swell_popular_posts .p-postList.-type-list .p-postList__meta {
  font-size: 0.8em;
}

/* =========================================================
 * フォント正規化: 本番(jstork_custom)の見た目に揃える
 *   prod は body に font-size: 1.03em を仕込み、各見出しは em で連動。
 *   SWELL は px 直指定が多いので、個別に上書きする。
 *   font-family は stg の "Lato, Noto Sans JP, sans-serif" が技術的に正しい
 *   (prod の順序は sans-serif が先で誤り)ので、そのまま据え置き。
 * =======================================================*/
/* 本文基準: prod は ~16.48px / line 24.7 / #3e3e3e */
body {
  font-size: 1.03em;
  line-height: 1.5;
  color: #3e3e3e;
}

/* グロナビ: prod は ~12.36px / 700 / 青文字 / line 16 (現行準拠) */
.l-header .c-gnav a,
.l-header .c-gnav__item > a {
  font-size: 0.75em !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

/* archive h1 (ページタイトル): prod は ~18.13px / 700 / #4e82c2 / line 1.4 */
.archive .c-pageTitle,
.archive .c-pageTitle__main {
  font-size: 1.1em !important;
  font-weight: 700;
  line-height: 1.4;
  color: var(--aks-main) !important;
}

/* archive 記事タイトル: prod は ~20.80px / 700 / #444 / line 1.4 */
.archive .p-postList__title,
.archive .p-postList .c-postTitle,
.archive .p-postList h2 {
  font-size: 1.26em !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #444 !important;
}

/* archive 記事メタ(日付): prod は ~13px / 500 / #666 / line 1.75 */
.archive .p-postList__meta,
.archive .p-postList__times,
.archive .p-postList .p-postList__info {
  font-size: 0.79em !important;
  font-weight: 500 !important;
  line-height: 1.75 !important;
  color: #666 !important;
}

/* archive 記事抜粋: prod は ~13px / 500 / #666 / line 1.75 */
.archive .p-postList__excerpt,
.archive .p-postList__body p,
.archive .p-postList__inner p {
  font-size: 0.79em !important;
  font-weight: 500 !important;
  line-height: 1.75 !important;
  color: #666 !important;
}

/* サムネ右上のカテゴリラベル: 本番(prod)準拠で 黄色BG + 黒文字、右上ぴったり
   フォルダアイコン (.icon-folder::before の 📁) は削除する */
.archive .p-postList__cat,
.archive .c-postThumb__cat,
.archive .c-postThumb__catLabel {
  font-size: 0.56em !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: #24252d !important;
  background: #f4d522 !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  left: auto !important;
  border-radius: 0 !important;
}
.archive .c-postThumb__cat.icon-folder::before,
.archive .c-postThumb__cat::before,
.archive .c-postThumb__catLabel::before {
  content: none !important;
  display: none !important;
}

/* アーカイブ上部のカテゴリパンくず (.p-termNavigation):
   ユーザー再指示で SWELL 既定の青BG+白文字に戻す (黄色は違和感)。
   📁アイコン(::before)だけは引き続き非表示。 */
.archive .p-termNavigation::before { content: none !important; display: none !important; }

/* 記事一覧の「もっと見る」ボタン (aks-loadmore.js が設置、現行準拠の青ピル型)。
   ページネーションはJS側で隠す(JS無効時はSWELL標準のページネーションが残る) */
.aks-loadmore { text-align: center; margin: 2.5em 0; }
.aks-loadmore__button {
  display: inline-block;
  background: var(--aks-main);
  color: #fff;
  font-size: 1.1em;
  font-weight: 700;
  padding: 0.7em 1.5em;
  border: 0;
  border-radius: 2em;
  cursor: pointer;
  transition: opacity 0.2s;
}
.aks-loadmore__button:hover { opacity: 0.85; }

/* ウィジェットタイトル: prod は ~14.83px / 700 / 白文字 (青塗り帯は前述)
   .l-sidebar は SWELL 既定で font-size:14px なので、ここからの em で計算する */
.archive #sidebar .widgettitle,
.archive .l-sidebar .widgettitle,
.archive #sidebar .c-widget__title,
.archive .l-sidebar .c-widget__title {
  font-size: 1.06em !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

/* ウィジェット内リンク(最近の投稿等): prod は ~13.35px / 500 / #666
   サイドバー root の 14px から見て 0.95em。
   font-size は li にだけ適用 (li > a に二重指定すると 0.9025em で 12.6px になる)。
   SWELL は .c-widget を使うので両方カバー。 */
.archive #sidebar .widget li,
.archive .l-sidebar .widget li,
.archive #sidebar .c-widget li,
.archive .l-sidebar .c-widget li {
  font-size: 0.95em !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}
.archive #sidebar .widget li a,
.archive .l-sidebar .widget li a,
.archive #sidebar .c-widget li a,
.archive .l-sidebar .c-widget li a {
  color: #666 !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

/* =========================================================
 * single 上部: カテゴリラベルをタイトル/日付より上に配置
 *   SWELLのDOM順: タイトル → メタ(カテゴリ) → アイキャッチ → 本文
 *   article.l-mainContent__inner を flex 化して order で並べ替え。
 *   メタの中の日付(c-postTimes)は重複なので非表示にして
 *   タイトル横の date を残す。
 * =======================================================*/
.single article.l-mainContent__inner {
  display: flex;
  flex-direction: column;
}
.single .p-articleMetas.-top { order: 1; margin-bottom: 0.5em; }
.single .p-articleHead.c-postTitle { order: 2; }
.single .p-articleThumb { order: 3; }
.single .post_content,
.single .p-articleFoot,
.single .c-shareBtns,
.single .l-articleBottom { order: 4; }
/* メタの中の日付は title 横と重複するので非表示 */
.single .p-articleMetas.-top .p-articleMetas__times { display: none; }
/* カテゴリリンクは背景なしだと白文字で読めないので本番のラベル風(青背景+白文字)に */
.single .p-articleMetas.-top { font-size: 1em; }
.single .p-articleMetas.-top .c-categoryList { gap: 0.4em; }
.single .p-articleMetas.-top .c-categoryList__link {
  background: var(--aks-main);
  color: #fff !important;
  font-size: 0.85em;
  font-weight: bold;
  padding: 0.3em 0.9em;
  border-radius: 1em;
  text-decoration: none;
  line-height: 1.4;
  display: inline-block;
}
.single .p-articleMetas.-top .c-categoryList__link:hover { opacity: 0.85; }

/* 記事内カテゴリ/タグ表示のフォルダ・タグアイコン(icomoonの::before)は
   本番に無いので削除 (記事末尾 .-bottom / 冒頭 .-top 共通)。
   アイコンはリンクではなく .c-categoryList / .c-tagList ラッパー側に付く */
.single .p-articleMetas .c-categoryList::before,
.single .p-articleMetas .c-tagList::before,
.single .p-articleMetas .c-categoryList__link::before,
.single .p-articleMetas .icon-folder::before {
  content: none !important;
  display: none !important;
}

/* =========================================================
 * single 前後記事ナビ (.p-pnLinks): 現行(.np-post)準拠
 *   - 背景 #eaebf0 の角丸ボックス
 *   - サムネ小さく表示 (SWELL設定 show_page_link_thumb=on 前提)
 * =======================================================*/
.single .p-pnLinks {
  background: #eaebf0;
  border-radius: 4px;
  padding: 16px;
}
.single .p-pnLinks .c-postThumb,
.single .p-pnLinks__figure,
.single .p-pnLinks__thumb {
  width: 72px;
  height: 48px;
  flex: 0 0 72px;
  background: #dee0e6; /* letterbox 部分の背景 (画像が枠より縦長/横長な場合) */
}
/* 小さい枠でも欠けないよう contain に。img の width/height 属性由来の
   aspect-ratio が cover とセットで効くため、ここで明示的に上書きする */
.single .p-pnLinks__thumb {
  object-fit: contain !important;
  aspect-ratio: auto !important;
}
.single .p-pnLinks__title { font-size: 0.82em; line-height: 1.5; }

/* =========================================================
 * この記事を書いた人: 本番(jstork_custom .authorbox)準拠
 *   - 枠線なし
 *   - 「ABOUT この記事をかいた人」見出し
 *   - アバター(丸116px)左フロート、名前・説明が右に回り込み
 *   - SNSテキストリンクは中央寄せ
 *   マークアップは parts/single/post_author.php (子テーマ上書き)
 * =======================================================*/
.aks-authorbox { border: 0; padding: 0; }
.aks-authorbox__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--aks-text);
  margin: 0 0 2em;
}
.aks-authorbox__title-en {
  font-size: 2em;
  margin-right: 0.8em;
  letter-spacing: 0.04em;
}
.aks-authorbox__profile { overflow: hidden; }
.aks-authorbox__profile .avatar {
  float: left;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  margin: 0 16px 8px 0;
}
.aks-authorbox__name { font-size: 1.03em; font-weight: 700; margin: 0 0 0.6em; }
.aks-authorbox__desc { font-size: 0.82em; line-height: 1.7; }
.aks-authorbox__sns {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 2em;
  margin: 2em 0 0;
  padding: 0;
}
.aks-authorbox__sns a {
  font-size: 0.82em;
  color: var(--aks-text);
  text-decoration: none;
}
.aks-authorbox__sns a:hover { color: var(--aks-main); }
.aks-authorbox__sns i { margin-right: 0.3em; }

.aks-top { background: transparent; padding: 20px 0 40px; }
.aks-top-container { max-width: 1096px; margin: 0 auto; padding: 0 16px; }
.aks-top-main { width: 100%; }

.aks-section-heading {
  font-size: 1.5em;
  margin: 1.5em 0 1em;
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-weight: bold;
  color: var(--aks-main);
}
.aks-section-icon { width: 0.8em; height: auto; }

.aks-pickup { margin: 0 auto 60px; }
.aks-pickup-link {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: var(--aks-radius);
  overflow: hidden;
  color: #333;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.09);
}
.aks-pickup-link:hover { color: #333; opacity: 0.97; }
.aks-pickup-thumb { width: 60%; margin: 0; }
.aks-pickup-thumb img { width: 100%; aspect-ratio: 40/21; object-fit: cover; display: block; }
.aks-pickup-body {
  padding: 20px; flex-grow: 1; width: 40%;
  display: flex; flex-direction: column; gap: 0.5em;
}
.aks-pickup-title {
  font-size: 1.2em; margin: 0;
  overflow: hidden; display: -webkit-box;
  -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
}
.aks-pickup-labels { display: flex; flex-wrap: wrap; gap: 0.3em; align-items: center; }
.aks-pickup-cat { background: var(--aks-main); color: #fff; font-weight: bold; font-size: 0.9em; padding: 0.3em 0.6em; border-radius: 1em; }
.aks-pickup-tag { border: 1px solid lightgray; font-size: 0.9em; padding: 0.3em 0.6em; border-radius: 1em; }
.aks-pickup-date { color: gray; margin: 0; font-size: 0.85em; }

.aks-cards { display: flex; flex-wrap: wrap; gap: 3%; row-gap: 1.5em; }
.aks-card {
  width: 31.3%;
  background: #fff;
  border-radius: var(--aks-radius);
  overflow: hidden;
  margin: 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.09);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.aks-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); transform: translateY(-2px); }
.aks-card-link { text-decoration: none; color: var(--aks-text); display: block; height: 100%; }
.aks-card-thumb { position: relative; margin: 0; overflow: hidden; }
.aks-card-thumb img { width: 100%; aspect-ratio: 40/21; object-fit: cover; display: block; }
.aks-card-cat {
  position: absolute; right: 0; top: 0; left: auto;
  background: #f4d522; color: #24252d;
  font-size: 0.72em; font-weight: 700;
  padding: 0.2em 0.6em; border-radius: 0;
}
.aks-card-body { padding: 12px; }
.aks-card-title { font-size: 1em; line-height: 1.5; margin: 0 0 0.4em; }
.aks-card-meta { font-size: 0.8em; color: gray; display: flex; gap: 0.8em; margin: 0 0 0.5em; }
.aks-card-desc {
  font-size: 0.85em; color: #555;
  overflow: hidden; display: -webkit-box;
  -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
}

.aks-more { margin: 1.5em auto 3em; text-align: center; }
.aks-more-btn {
  transition: 0.3s; font-weight: bold; font-size: 1.1em;
  display: inline-block; padding: 0.7em 1.5em;
  border-radius: 2em; text-decoration: none;
  color: #fff; background: var(--aks-main);
}
.aks-more-btn:hover { opacity: 0.8; color: #fff; }

/* 人気記事 (Jetpack Top Posts) */
.aks-home-widget-area { margin: 2em auto 1em; }
.aks-home-widget { background: transparent; }
.aks-home-widget .widgets-list-layout,
.aks-home-widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8em 1.5em;
}
.aks-home-widget li {
  display: flex;
  align-items: center;
  gap: 0.8em;
  border-bottom: 1px solid #eaebf0;
  padding: 0.5em 0;
  margin: 0;
}
.aks-home-widget .widgets-list-layout-blavatar {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 4px;
  object-fit: cover;
}
.aks-home-widget .widgets-list-layout-links,
.aks-home-widget li > a:not(.bump-view):not(:has(img)) {
  font-size: 0.9em;
  line-height: 1.4;
}
.aks-home-widget li a {
  color: var(--aks-text);
  text-decoration: none;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.aks-home-widget li a:hover { color: var(--aks-main); }
@media only screen and (max-width: 767px) {
  .aks-home-widget .widgets-list-layout,
  .aks-home-widget ul { grid-template-columns: 1fr; }
}

.aks-banners { display: flex; flex-direction: column; gap: 1.5em; margin-top: 1.5em; }
.aks-banner {
  text-decoration: none; color: #fff;
  display: flex; justify-content: space-between; align-items: center; gap: 0.5em;
  padding: 2em; border-radius: 16px; background: rgb(186, 186, 186);
}
.aks-banner:hover { color: #fff; opacity: 0.8; }
.aks-banner p { margin: 0; font-size: 1.2em; font-weight: bold; }
.aks-banner span { font-size: 0.9em; }
.aks-banner img { width: 4em; }
.aks-banner--video { background: url(assets/images/banner-bg-video.jpg) no-repeat center / cover; }
.aks-banner--recruit { background: url(assets/images/banner-bg-recruit.jpg) no-repeat center / cover; }

@media only screen and (max-width: 767px) {
  .aks-pickup-link { flex-direction: column; }
  .aks-pickup-thumb, .aks-pickup-body { width: auto; }
  .aks-cards { flex-direction: column; gap: 1.5em; }
  .aks-card { width: 100%; }
}

/* =========================================================
 * スクロールアニメーション (IntersectionObserver駆動)
 * 本番の wow.js + animate.css の fadeIn 風挙動を素のCSSで再現
 * JSが効かない場合や reduced-motion は表示状態のまま
 * =======================================================*/
.aks-inview {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.aks-inview.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .aks-inview { opacity: 1; transform: none; transition: none; }
}
/* JS無効環境向けフォールバック: 1秒以内に is-visible が付かなければ強制表示 */
.no-js .aks-inview { opacity: 1; transform: none; }