/*
 Theme Name: AISAS Simple Agency
 Theme URI: https://example.com/
 Author: Your Name
 Author URI: https://example.com/
 Description: AISASモデルで構成された広告会社向け1カラムテーマ。カスタマイザーで全セクション編集可能。
 Version: 1.0.0
 License: GNU General Public License v2 or later
 Text Domain: aisas-simple-agency
*/

/* ベースリセット（必要最低限） */
* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  color: #222;
  line-height: 1.8;
  background: #fff;
}

a { color: #0b6efd; text-decoration: none; }
a:hover { text-decoration: underline; }

/* レイアウト共通 */
.container { width: 92%; max-width: 1100px; margin: 0 auto; }
.site-header { border-bottom: 1px solid #e5e5e5; }
/* PCでは全体コンテナ幅を80%に統一 */
@media (min-width: 769px) {
  .container { width: 80%; max-width: none; }
}
.site-header .container { display:flex; align-items:center; justify-content: space-between; }
.site-branding { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.site-title { font-size: 1.25rem; font-weight: 700; margin: 0; }
.site-description { font-size: .9rem; color: #666; margin: 0; }

.nav-wrap { position: relative; }
.nav-toggle { display: none; }
.nav-toggle-label { display: none; cursor: pointer; padding: 10px 0; font-weight: 600; }
.primary-nav { display: flex; gap: 18px; padding: 10px 0; }
.primary-nav a { color: #222; font-weight: 600; }

.hero {
  position: relative; overflow: hidden; color: #fff; text-align: center;
  background: #111; min-height: 42vh; display: grid; place-items: center; padding: 40px 0;
}
.hero .hero-inner { padding: 20px; }
.hero .catch { font-size: 2rem; font-weight: 800; margin: 0 0 10px; }
.hero .sub { font-size: 1.1rem; opacity: .9; max-width: 800px; margin: 0 auto; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.hero video.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Attention セクション横幅をPCで80%に抑える */
@media (min-width: 769px) {
  #attention .container { width: 80%; max-width: none; }
}

/* Interest セクション レイアウト調整（PC） */
@media (min-width: 769px) {
  #interest .container { width: 80%; max-width: none; }
  /* ズーム時の見え方を安定させるため、%ではなくremでオフセット */
  #interest .interest-item .text-col { margin-top: 3rem; }
}

.section { padding: 56px 0; border-bottom: 1px solid #f0f0f0; }
.section h2 { color: #1BBAC7; font-size: 60px; line-height: 1; font-weight: 700; margin: 0 0 16px; }
.section p { margin: 0 0 16px; }
.section .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.section .grid img { width: 100%; height: auto; border-radius: 8px; }

/* Interest セクション専用 */
#interest .interest-item { align-items: center; }
#interest .interest-item .img-col { align-self: stretch; }
#interest .interest-item .img-wrap { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: #f5f7f9; }
#interest .interest-item .img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
#interest .interest-item .text-col { align-self: start; }
#interest .interest-item { margin-top: 1.5em; }
@media (min-width: 769px) { #interest .interest-item { margin-top: 3em; } }
#interest .interest-item .interest-title { 
  margin: 0 0 8px; 
  font-style: normal; 
  font-weight: 800; 
  line-height: 1.25; 
  font-family: 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', 'Noto Serif JP', 'Tsukushi Mincho', 'MS PMincho', serif; 
  font-size: clamp(20px, 2.2vw, 28px); /* 既存の約70%に縮小 */
  text-align: center;
}
#interest .interest-item .logo-wrap { margin: 6px 0 12px; display: flex; justify-content: center; }
#interest .interest-item .logo-wrap .logo-img { width: 35%; height: auto; display: block; max-width: 260px; }

/* Interest セクションの見出し・サブ見出し・リード文を中央寄せ */
#interest h2 { text-align: center; }
#interest .sub { text-align: center; }
#interest .lead, #interest .lead p { text-align: center; }

/* Recruit セクション */
#recruit h2 { text-align: center; }
#recruit .sub { text-align: center; }
#recruit .lead, #recruit .lead p { text-align: center; }
#recruit .recruit-card .recruit-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #f5f7f9; }
#recruit .recruit-card .recruit-thumb a { display: block; position: relative; width: 100%; height: 100%; }
#recruit .recruit-card .recruit-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; transform-origin: center center; }
#recruit .recruit-card .recruit-thumb:hover img { transform: scale(1.04); }
/* 画像中央にタイトルを重ねて表示 */
#recruit .recruit-card .recruit-thumb .recruit-title {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-block; color: #fff; font-weight: 800; font-size: clamp(18px, 1.8vw, 24px);
  text-shadow: 0 2px 8px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
  pointer-events: none; /* リンク上でもテキストがクリックを阻害しない */
}
/* PCでは画像幅を約80%に縮小し、左右から中央へ寄せる。中央間隔は約2文字分 */
@media (min-width: 769px) {
  #recruit .grid { gap: 2em; }
  #recruit .recruit-card .recruit-thumb { width: 80%; }
  #recruit .recruit-card:first-child .recruit-thumb { margin-left: auto; margin-right: 0; }
  #recruit .recruit-card:last-child  .recruit-thumb { margin-left: 0;    margin-right: auto; }
}

/* Attention: Chart UI */
.section#attention h2,
#attention h2 { text-align: center; }
.att-chart-wrap { margin-top: 24px; display: grid; gap: 12px; }
.att-chart-grid { display: grid; grid-template-columns: minmax(240px, 34%) 1fr; gap: 24px; align-items: start; }
.att-chart-grid > * { min-width: 0; }
.att-chart-desc { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.att-chart-desc__title { margin: 0 0 8px; font-size: 1.125rem; font-weight: 700; }
.att-chart-desc p { margin: 0 0 10px; }
.att-chart-config { border: 1px solid #e5e5e5; border-radius: 8px; padding: 12px; background: #fff; }
.att-chart-config label { display: block; font-size: .9rem; color: #666; margin-bottom: 6px; }
.att-chart-config textarea { width: 100%; min-height: 140px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; padding: 10px; border: 1px solid #ddd; border-radius: 6px; resize: vertical; }
.att-chart-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.att-chart-buttons button { appearance: none; border: 1px solid #ccc; background: #f7f7f7; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.att-chart-buttons button:hover { background: #f0f0f0; }
.att-chart-buttons .primary { background: #e8f7fb; border-color: #bfe7f2; }
.att-chart-msg { min-height: 1.2em; font-size: 13px; color: #666; margin-top: 4px; }
.att-chart-msg.error { color: #b00020; }
.att-chart-card { border: 1px solid #e5e5e5; border-radius: 8px; padding: 8px; background: #fff; width: 100%; margin: 0; }
.att-chart-card canvas { width: 100% !important; height: auto !important; display: block; }

@media (max-width: 768px) {
  .att-chart-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  #interest .interest-item .logo-wrap .logo-img { width: 45%; max-width: 220px; }
}

/* Donut graph: shrink to 60% on mobile to avoid overflow */
@media (max-width: 768px) {
  .js-donut { overflow: hidden; }
  .js-donut svg { transform: scale(0.78); transform-origin: center center; display: block; margin: 0 auto; }
}

.list, .faq, .links, .testimonials { list-style: none; padding: 0; margin: 0; }
.list li, .links li, .testimonials li { padding: 8px 0; border-bottom: 1px dashed #eee; }
.faq li { padding: 12px 0; border-bottom: 1px dashed #eee; }
.faq .q { font-weight: 700; }
.faq .a { color: #444; }

.cta { text-align: center; }
/* 共通ボタンのサイズ指定：左右+2ch、上下+0.5em */
.btn { display: inline-block; padding: 0.6em 4em; font-size: 1.5rem; }
.cta .btn { display: inline-block; padding: 0.6em 4em; background: var(--btn-bg, #0b6efd); color: #fff; border-radius: var(--btn-radius, 6px); font-weight: 700; }
.cta .btn:hover { opacity: .9; text-decoration: none; }

/* 緑→ピンク グラデ境界の“枠のみ”ボタン（丸型） */
.btn--gp-border {
  background:
    linear-gradient(var(--bg, #fff), var(--bg, #fff)) padding-box,
    linear-gradient(90deg, var(--green, #16c264), var(--pink, #ff5db1)) border-box;
  border: 2px solid transparent;
  color: #222;
  border-radius: var(--btn-radius, 999px);
}
.btn--gp-border:hover { filter: brightness(1.02); }

/* グラデ“塗りつぶし”ボタン（必要なら使う） */
.btn--gp-filled {
  background: linear-gradient(90deg, var(--green, #16c264), var(--pink, #ff5db1));
  color: #fff;
  border-radius: var(--btn-radius, 999px);
}
.btn--gp-filled:hover { opacity: .92; text-decoration: none; }

.share-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.share-buttons a { display: inline-block; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; color: #222; background: #fafafa; }

.site-footer { padding: 24px 0; text-align: center; color: #666; font-size: .9rem; }

/* ブログ */
.post-list article { padding: 20px 0; border-bottom: 1px solid #eee; }
.post-list .meta { color: #666; font-size: .9rem; }
.post-content img { max-width: 100%; height: auto; }

/* 検索フォーム */
.search-form { display: flex; gap: 8px; }
.search-form input[type="search"] { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }
.search-form button { padding: 10px 16px; border: 1px solid var(--btn-bg, #0b6efd); background: var(--btn-bg, #0b6efd); color: #fff; border-radius: var(--btn-radius, 6px); font-weight: 700; }

/* レスポンシブ */
@media (max-width: 768px) {
  .section .grid { grid-template-columns: 1fr; }
  .primary-nav { display: none; flex-direction: column; }
  .nav-toggle-label { display: inline-block; }
  .nav-toggle:checked ~ .primary-nav { display: flex; }
  .hero .catch { font-size: 1.6rem; }
}

/* Interest（興味）: スマホでは「画像→文章」の順に統一 */
@media (max-width: 768px) {
  #interest .interest-item { display: flex; flex-direction: column; }
  #interest .interest-item .img-col { order: 1; }
  #interest .interest-item .text-col { order: 2; }
}

/* Recruit（仕事内容・得られる経験） 画像形状・フルブリード */
#rec-culture .culture-img {
  width: 100%;
  aspect-ratio: 3 / 1.4; /* ベース（後段でPCは上書き） */
  overflow: hidden;
  background: #f5f7f9;
}
#rec-culture .culture-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
#rec-culture .culture-img--left { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }
#rec-culture .culture-img--right { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
/* PC：画像の高さを統一（1,2,3で同じ高さになるよう固定） */
@media (min-width: 769px) {
  #rec-culture .culture-img { max-width: 100%; height: var(--culture-h, auto); aspect-ratio: auto; }
  #rec-culture .culture-img--left,
  #rec-culture .culture-img--right { position: static; width: 100%; margin: 0; left: auto; right: auto; }
}


/* 画像はカラム内に収める（直前のブリード指定を解除） */

/* （直前のブリード指定を戻し、画像はカラム内に収める） */
/* モバイルははみ出し解除＋通常の角丸 */
@media (max-width: 768px) {
  #rec-culture .culture-img { aspect-ratio: 16 / 9; border-radius: 12px; width: 100%; left: 0; right: 0; margin-left: 0; }
}

/* Recruit 文章カラムの横幅拡張（読みやすさ重視） */
@media (min-width: 769px) {
  /* 画像に寄せつつ、本文を広く（PC） */
  #rec-culture .culture-row { column-gap: 3.5ch; }
  /* テキスト側は最低でも約34文字分の横幅を確保、画像をより広く */
  #rec-culture .culture-row--left { grid-template-columns: 3fr minmax(34ch, 2fr); }
  #rec-culture .culture-row--right { grid-template-columns: minmax(34ch, 2fr) 3fr; }
  /* グリッド子要素のオーバーフロー抑止（右側がカラムを超えないように） */
  #rec-culture .culture-row > div { min-width: 0; }
  #rec-culture .culture-row p { overflow-wrap: anywhere; }
}

/* PC：画像のみ、カラム外へ水平拡張（内側の縁は固定して外側に広げる） */
@media (min-width: 769px) {
  /* 左画像（1・3）：配置を“左端→約68%”に、テキスト位置はそのまま */
  #rec-culture { --left-span: 68vw; --culture-h: calc(var(--left-span) * (1.4 / 3)); }
  #rec-culture .culture-row--left > div:first-child { overflow: visible; }
  #rec-culture .culture-row--left > div:first-child .culture-img {
    position: relative;
    left: calc((100vw - 100%) / -2);
    width: var(--left-span);
    max-width: none;
  }
  /* 右画像（2）：今回は変更なし */
  #rec-culture .culture-row--left > div:nth-child(2) { position: relative; z-index: 1; }
}

/* PC：右画像（2）も右端まで表示（配置は現状維持、サイズは変更しない） */
@media (min-width: 769px) {
  /* 2番目（右側画像）はカラム内に収める（配置以外は変更なし） */
  #rec-culture .culture-row--right > div:nth-child(2) { overflow: hidden; }
  #rec-culture .culture-row--right > div:nth-child(2) .culture-img {
    position: static;
    left: auto;
    right: auto;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }
}

/* PC：2番目（右側画像）を“右へ4〜5cm”拡張（左端はそのまま、テキスト配置は不変） */
@media (min-width: 769px) {
  #rec-culture { --right-extend: 4.5cm; }
  #rec-culture .culture-row--right > div:nth-child(2) { overflow: visible; }
  #rec-culture .culture-row--right > div:nth-child(2) .culture-img {
    width: calc(100% + var(--right-extend));
    margin-right: calc(var(--right-extend) * -1);
    max-width: none;
  }
  #rec-culture .culture-row--right > div:first-child { position: relative; z-index: 1; }
}

/* PC：左画像（1・3）の配置を「左端→約65〜70%」に固定（テキスト位置は維持） */
@media (min-width: 769px) {
  #rec-culture { --left-span: 68vw; --culture-h: calc(var(--left-span) * (1.4 / 3)); }
  #rec-culture .culture-row--left > div:first-child { overflow: visible; }
  #rec-culture .culture-row--left > div:first-child .culture-img {
    position: relative;
    left: calc((100vw - 100%) / -2);
    width: var(--left-span);
    max-width: none;
  }
  #rec-culture .culture-row--left > div:nth-child(2) { position: relative; z-index: 1; }
}

/*（直前の左画像の固定幅ブリード指定を戻す）*/

/* ============================
   緑-ピンク おしゃれボックス
   [gp_box] ショートコード用
   ============================ */
:root{ --gp-green:#16c264; --gp-pink:#ff5db1; }
.gp-box{ position:relative; display:block; max-width: var(--gp-maxw, 100%); margin: 24px auto; filter: drop-shadow(0 8px 24px rgba(0,0,0,.12)); }
.gp-box.align-left{ margin-left: 0; }
.gp-box.align-right{ margin-right: 0; margin-left: auto; }
.gp-box__svg{ display:block; width:100%; height:auto; }
.gp-box__content{
  position:absolute;
  inset: var(--gp-pad, 24px);
  background:#fff;
  border-radius: var(--gp-radius, 32px);
  padding: 0; /* insetで実質パディングを確保 */
}
.gp-box__content > .gp-box__inner{ padding: 0; }
.gp-box__title{ margin:0 0 8px; font-size: 1.125rem; font-weight: 700; }
.gp-box__body p{ margin: 0 0 10px; }

/* ふんわり滲み（背面グロー） */
.gp-box::before{
  content:""; position:absolute; inset:-8px;
  border-radius: calc(var(--gp-radius, 32px) + 10px);
  background: linear-gradient(90deg, var(--gp-green, #16c264), var(--gp-pink, #ff5db1));
  filter: blur(22px);
  opacity:.35; z-index:-1; pointer-events:none;
}
.gp-box.no-glow::before{ display:none; }

/* ボタンの緑-ピンク（既存CTAでも使える） */
.btn--gp-border {
  background:
    linear-gradient(var(--bg, #fff), var(--bg, #fff)) padding-box,
    linear-gradient(90deg, var(--gp-green, #16c264), var(--gp-pink, #ff5db1)) border-box;
  border: 2px solid transparent;
  color: #222;
  border-radius: 999px;
}
.btn--gp-border:hover { filter: brightness(1.02); }
.btn--gp-filled {
  background: linear-gradient(90deg, var(--gp-green, #16c264), var(--gp-pink, #ff5db1));
  color: #fff; border-radius: 999px;
}
.btn--gp-filled:hover { opacity:.92; text-decoration:none; }

/* Header logo sizing (wide horizontal recommended) */
.site-branding .header-logo,
.site-branding img.custom-logo {
  max-height: 44px; /* 2.5〜3倍程度に拡大 */
  width: auto;
  height: auto;
  display: block;
}

/* NEWS セクション */
#news h2 { text-align: center; }
#news .sub { text-align: center; color: #666; }
#news .lead, #news .lead p { text-align: center; }
#news .news-list { max-width: 800px; margin: 16px auto 0; }
#news .news-item { padding: 14px 0; border-bottom: 1px solid #eee; }
#news .news-date { font-size: .85rem; color: #888; line-height: 1.4; margin-bottom: 4px; }
#news .news-comment { font-size: 1rem; color: #222; line-height: 1.7; }

/* CONTRIBUTION セクション */
#contribution h2 { text-align: center; }
#contribution .sub { text-align: center; color: #666; }
#contribution .lead, #contribution .lead p { text-align: center; }
#contribution .contrib-media { margin: 20px auto; max-width: 70%; }
#contribution .contrib-media__inner { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #f5f7f9; }
#contribution .contrib-media__inner img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Attention-2 カウントアップ数字の色をドーナツ中央数値と揃える（冗長だが担保用） */
.js-stat-card .js-countup { color: #1BBAC7; }