/*
Theme Name: Japan Story Minimal
Theme URI: https://example.com/
Author: Japan Story
Description: 実用性重視の軽量テーマ（事業内容優先のトップ＋コラム）
Version: 1.0.0
Text Domain: japan-story
*/

:root{
  --bg:#ffffff;
  --text:#1a1a1a;
  --muted:#f6f6f6;
  --brand:#0F2A43; /* 深紺 */
  --accent:#0E3B2E; /* 深緑（必要時） */
  --max:1200px;
  --pad:20px;
  --radius:16px;
  --shadow:0 6px 20px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
               "Noto Sans JP", Meiryo, "Helvetica Neue", Arial, sans-serif;
  line-height:1.7;
  font-size:16px;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}

/* layout */
.container{max-width:var(--max); margin:auto; padding:0 var(--pad)}
.section{padding:64px 0}
.section--tight{padding:40px 0}
.section__title{font-size:28px; margin:0 0 16px; font-weight:700}
.section__lead{margin:0 0 28px; color:#333}

/* header */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;background:#fff;padding:8px 12px;border-radius:8px;box-shadow:var(--shadow)}
.header{position:sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid #eee}
.header__in{display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.brand__logo{width:28px; height:28px; background:var(--brand); border-radius:8px}
.nav{display:flex; align-items:center; gap:20px}
.nav a{color:#222; font-weight:600}
.header__cta .btn{display:inline-block}

/* hero */
.hero{position:relative; padding:80px 0; background:linear-gradient(180deg,#f9fafb, #fff)}
.hero__in{display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center}
.hero__title{font-size:36px; line-height:1.3; margin:0 0 12px}
.hero__lead{margin:0 0 20px; color:#333}
.hero__btns{display:flex; gap:12px; flex-wrap:wrap}
.hero__img{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}

/* cards (services / strengths / process) */
.grid{display:grid; gap:20px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.card{border:1px solid #eee; border-radius:var(--radius); padding:20px; background:#fff}
.card__title{font-size:18px; margin:0 0 8px; font-weight:700}
.card__lead{margin:0 0 12px; color:#444}
.card__link{font-weight:700}

/* posts */
.posts{display:grid; gap:20px}
.posts--3{grid-template-columns:repeat(3,1fr)}
.post{border:1px solid #eee; border-radius:var(--radius); overflow:hidden; background:#fff; display:flex; flex-direction:column}
.post__thumb img{width:100%; aspect-ratio:16/9; object-fit:cover}
.post__in{padding:14px}
.post__meta{font-size:12px; color:#666; margin-bottom:6px}
.post__title{font-size:18px; margin:0 0 8px}
.post__excerpt{color:#444}

/* cta band */
.band{background:var(--muted); padding:36px 0}
.band__in{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px}
.band__text{font-weight:700; font-size:18px}

/* footer */
.footer{background:#0b0b0b; color:#ddd; padding:36px 0}
.footer a{color:#fff}
.footer__cols{display:grid; gap:20px; grid-template-columns:2fr 1fr 1fr}

/* buttons */
.btn{border-radius:999px; padding:10px 18px; border:2px solid var(--brand); color:#fff; background:var(--brand); font-weight:700; text-align:center}
.btn--ghost{background:#fff; color:var(--brand)}
.btn--full{display:block; width:100%}

/* responsive */
@media (max-width:1024px){
  .hero__in{grid-template-columns:1fr}
  .posts--3{grid-template-columns:repeat(2,1fr)}
  .grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .header__in{height:56px}
  .nav{display:none}
  .hero{padding:56px 0}
  .hero__title{font-size:28px}
  .posts--3{grid-template-columns:1fr}
  .grid--3{grid-template-columns:1fr}
  .grid--2{grid-template-columns:1fr}
}
/* 画像共通（にじみ/ボケを抑えてクッキリ） */
img { image-rendering: auto; }

/* セクション背景の共通ユーティリティ（inline指定の代替にも） */
.section--bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 背景にテキストが乗るときの薄いオーバーレイ（必要なセクションに .has-overlay を付与） */
.has-overlay { position: relative; }
.has-overlay::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(255,255,255,.55), rgba(255,255,255,.55));
  pointer-events: none;
}
.has-overlay > .container { position: relative; }

/* HERO画像の扱い（モバイルで窮屈なら非表示に） */
@media (max-width: 640px){
  .hero__img { display: none; }
}

/* 余白の底上げ：背景画像のセクションは少し広めに */
.section.bg-wide { padding: 80px 0; }
@media (max-width: 640px){ .section.bg-wide { padding: 56px 0; } }
/* カード内アイコンのサイズを統一 */
.card img {
  width: 128px;
  height: auto;
  margin-bottom: 12px;
}
/* --- 事業内容：タイトル横の小アイコンは非表示 --- */
section.services .card .icon { 
  display: none !important;
}

/* --- 事業内容：ボックス上部に画像（既存ボックスサイズ維持） --- */
section.services .card__media {
  background: #fafafa;
  border-bottom: 1px solid #eee;
}
section.services .card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;      /* 画像の縦横比がバラついても高さを揃える */
  object-fit: contain;      /* 透過PNGでも崩れにくい */
}

/* --- 強み：左にアイコン／右にテキスト（ボックスサイズは現状維持） --- */
section.strengths .card {
  display: grid;
  grid-template-columns: 56px 1fr;  /* 左にアイコン分の列を確保 */
  gap: 12px;
  align-items: start;
  padding: 16px;                    /* 既存のパディングを維持 */
}
section.strengths .card .icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin: 4px 0 0 4px;
}
section.strengths .card h3 {
  margin: 2px 0 6px;
  font-size: 18px;
  font-weight: 800;
}
section.strengths .card p { margin: 0; color:#444; }
/* --- 事業内容：タイトル横の小アイコンは非表示（現状維持） --- */
section.services .card .icon { 
  display: none !important;
}

/* --- 事業内容：カード上部画像を“箱いっぱい”に見せる --- */
/* ① .card の内側パディングで画像が縮むので、media だけパディングを打ち消す */
section.services .card__media {
  background: #fafafa;
  border-bottom: 1px solid #eee;
  margin: -20px -20px 12px;   /* ← .card の padding:20px を相殺 */
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  overflow: hidden;
}
/* ② 上部画像は幅100%。グローバルの .card img を上書き */
section.services .card__media img {
  display: block;
  width: 100% !important;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: contain;
  margin: 0 !important;       /* ← 余計な下マージンを消す */
}

/* --- 強み：左にアイコン／右にテキスト（現状維持だが明示） --- */
section.strengths .card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: start;
  padding: 16px;
}
section.strengths .card .icon {
  width: 40px !important;   /* ← 共通 .card img の幅指定を確実に上書き */
  height: 40px !important;
  object-fit: contain;
  margin: 4px 0 0 4px !important;
}

/* --- （推奨）共通の .card img が強すぎるので“アイコン専用”に縮小 --- */
/* 既存の .card img { width:128px; ... } は崩れの原因になるため置き換え推奨 */
.card img { /* ← これを使うのをやめたい場合は無効化 */
  /* 既存ルールが必要なら残してOK。上書きは上記の more specific セレクタで担保 */
}
/* 代わりにアイコン専用の基本サイズを定義（強み側は上で40pxに再定義） */
.card .icon {
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
}
/* ===== グリッド構成の指定 ===== */
/* 1) 事業内容：横2 × 縦2（PC/タブレット） */
section.services .cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

/* 2) Japan Storyの強み：横2 × 縦2（PC/タブレット） */
section.strengths .cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px; /* 行間/列間 */
}

/* 3) 進め方：横1列 */
section.process .cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* ===== カードのバランス調整（共通） ===== */
section.services .card,
section.strengths .card,
section.process .card{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 事業内容：上部画像の見え方を安定させる（縦に伸びすぎないよう制御） */
section.services .card__media{
  background: #fafafa;
  border-bottom: 1px solid #eee;
  margin: -20px -20px 12px;         /* カード内側の余白を相殺して“フチまで” */
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  overflow: hidden;
}
section.services .card__media img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;                /* 画像の比率を統一 */
  max-height: 240px;                 /* 大きくなりすぎ防止（必要なら数値調整） */
  object-fit: contain;               /* 余白を保って見切れないように */
  margin: 0;
}
section.services .card__content{ padding: 16px 16px 18px; }

/* 強み：左アイコン／右テキスト（既に適用済みの場合はそのままでOK） */
section.strengths .card{
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: start;
  gap: 12px;
  padding: 16px;
}
section.strengths .card .icon{
  width: 40px; height: 40px; object-fit: contain;
  margin: 4px 0 0 4px;
}

/* スマホ時（幅<=768px）は各セクション1列にフォールバック */
@media (max-width: 768px){
  section.services .cards,
  section.strengths .cards,
  section.process .cards{
    grid-template-columns: 1fr;
  }
}
/* HEROセクションのテキスト中央寄せ */
.hero__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;   /* 横方向の中央揃え */
    color: #fff;          /* 必要なら文字色調整 */
    z-index: 2;           /* 背景より前に出す */
    width: 80%;           /* 長文のとき適度に収まるように */
}
/* HEROセクション全体 */
.hero {
    position: relative;
    background: url("images/hero.jpg") no-repeat center center;
    background-size: cover;
    height: 70vh; /* 高さを大きく確保（従来の3倍程度） */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* HERO内テキスト */
.hero__content {
    color: #fff;
    z-index: 2;
    max-width: 80%;
    margin: 0 auto;
}

.hero__content h1 {
    font-size: 2.8rem; /* タイトルを大きく */
    margin-bottom: 1rem;
}

.hero__content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}