@charset "utf-8";
/*
Theme Name: デジタル観光統計
Theme URI: 
Description: デジタル観光統計
*/

/*
#1333BA→#1333BA 青色
*/

/* 追加 or 置き換え */
.category_bar{
  display:flex;
  justify-content:center;
  position: sticky;
  position: -webkit-sticky; /* iOS安定化 */
  top: 10px;                /* 元の位置を維持 */
  z-index: 30;

  background: #fff;
  margin: 0; padding: 0; border: none; overflow: visible;
  
  width:min(100%, 800px);
  margin: 0 auto;   /* ← これで中央寄せ */
}

#pillCate{ overflow: hidden; }

#pillCate * { box-sizing: border-box; font-family: "Noto Sans JP", sans-serif; }

#pillCate .seg-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

#pillCate .seg-scroll::-webkit-scrollbar { display: none; }
#pillCate .seg-scroll { scrollbar-width: none; }

#pillCate .seg-scroll .cats {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  gap: 8px;
  white-space: nowrap;
  min-width: max-content;
}

#pillCate .seg-scroll .cat {
  flex: 0 0 auto;
  scroll-snap-align: center;
}

#pillCate h2 {
  margin: 40px 0 10px;
  border-left: 5px solid #3B34E0;
  padding-left: 8px;
  font-size: 18px;
  font-weight: 700;
}

#pillCate .cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
  padding: 4px;
  margin-top:0px;
  margin-bottom:10px;
}

#pillCate .cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 16px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

#pillCate .cats--pill-minimal .cat {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  color: #111827;
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: all 0.2s ease;
}
#pillCate .cats--pill-minimal .cat:hover {
  background: #ffffff;
  border-color: #d1d5db;
  transform: translateY(-1px);
}
#pillCate .cats--pill-minimal .cat.is-active {
  background: #3B34E0;
  color: #fff;
  border-color: #3B34E0;
  box-shadow: 0 4px 8px rgba(59,52,224,0.25);
}

#pillCate .seg-scroll::-webkit-scrollbar { display: block !important; height: 8px; }
#pillCate .seg-scroll {
  scrollbar-width: thin !important;
  scrollbar-color: #cbd5e1 transparent !important;
  overflow-x: auto !important;
  overflow-y: hidden;
  scrollbar-gutter: stable both-edges;
}

#pillCate .seg-scroll::-webkit-scrollbar-track { background: transparent; }
#pillCate .seg-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

#pillCate {
  --cat-font: 14px;
  --cat-pad-y: 8px;
  --cat-pad-x: 16px;
  --cat-gap: 8px;
  --cat-radius: 999px;
}

#pillCate .seg-scroll .cats { gap: var(--cat-gap); }
#pillCate .cats--pill-minimal .cat{
  font-size: var(--cat-font);
  padding: var(--cat-pad-y) var(--cat-pad-x);
  border-radius: var(--cat-radius);
  line-height: 1; /* 余白を管理しやすく */
}

#pillCate .cats--size-xs { --cat-font: 12px; --cat-pad-y: 6px;  --cat-pad-x: 12px; --cat-gap: 6px; }
#pillCate .cats--size-sm { --cat-font: 13px; --cat-pad-y: 7px;  --cat-pad-x: 14px; --cat-gap: 8px; }
#pillCate .cats--size-md { --cat-font: 14px; --cat-pad-y: 8px;  --cat-pad-x: 16px; --cat-gap: 8px; } /* 既定 */
#pillCate .cats--size-lg { --cat-font: 15px; --cat-pad-y: 10px; --cat-pad-x: 18px; --cat-gap: 10px; }
#pillCate .cats--size-xl { --cat-font: 16px; --cat-pad-y: 12px; --cat-pad-x: 20px; --cat-gap: 12px; }

@media (max-width: 640px){
  #pillCate .cats--auto { --cat-font: 15px; --cat-pad-y: 10px; --cat-pad-x: 18px; --cat-gap: 10px; }
}
@media (min-width: 1024px){
  #pillCate .cats--auto { --cat-font: 14px; --cat-pad-y: 8px;  --cat-pad-x: 16px; --cat-gap: 8px; }
}

#pillCate .cat { min-height: 40px; } 



/* 重要：カテゴリ直下に“透明の板”を常に貼り付ける */
.cat-guard{
  height: 0px;
  position: sticky;
  top: 0;
  z-index: 20;          /* category(30)より下、一覧より上 */
  background:#fff;      /* ←ここを白(ページ背景色)にすることで、赤線の位置までで描画を止められる */
  pointer-events:none;  /* クリックを邪魔しない */
}

.cat-guard.is-active {
  height: 80px;
}

.category_bar > .scroll_content{ pointer-events: auto; } /* 中身は通常操作 */

/* 元の見た目はそのまま維持（overflow-x もカスタムスクロールも含む） */
/* ↓ ここから下は “元のまま” でOK。ただし sticky系だけ削除します */
ul.scroll_content{
  display: flex;
  max-width: 1000%;
  overflow-x: auto;        /* ← 元のまま（見た目のスクロールバー維持） */
  background: #fff;
  border-radius: 5px;
  text-align: left;
  padding-inline-start: 0px;
  /* position: sticky; ← 削除 */
  /* top: 67px;       ← 削除 */
  /* z-index: 1000;   ← 削除 */
  margin-bottom:10px;
  padding-top: 5px;
}

ul.scroll_content li {
flex-shrink: 0;
list-style: none;
border: 1px solid;
border-radius: 5px;
color: #fff;
margin-left:10px;
margin-bottom:15px;
margin-top:5px;
}
ul.scroll_content li:eq(0) {
margin-left:0px;
}
ul.scroll_content li a.topMidConDetButton {
width:100%;
}
/* スクロールの幅の設定 */
ul.scroll_content::-webkit-scrollbar {
width: 10px;
height: 10px;
}

/* スクロールの背景の設定 */
ul.scroll_content::-webkit-scrollbar-track {
border-radius: 5px;
background: rgba(110, 108, 108, 0.2);
}

/* ドラックできるスクロール部の設定 */
ul.scroll_content::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #1333BA;
}

a.topMidConDetButton.cateBtn {
    background: #1333BA;
    transition: background 0.4s;
    padding: 10px 15px 10px 15px;
}
ul.scroll_content li a.topMidConDetButton.cateBtn:hover {
    background: #fff;
    color: #1333BA;
    border: 2px solid #1333BA;
}


ul.scroll_content {
    display: flex;
    max-width: 1000%;
    overflow-x: auto;
    background: #fff;
    border-radius: 5px;
    text-align: left;
    padding-inline-start: 0px;
    position: sticky;
    top: 67px;
    z-index: 1000;
    margin-bottom: 10px;
    padding-top: 5px;
}

.topMidConDetButton {
    background: #0085cf;
    color: #ffffff;
    font-size: 20px;
    padding: 10px 5px;
    line-height: 32px;
    border-radius: 5px;
    text-align: center;
}

.topMidConDetButton:link,
.topMidConDetButton:visited,
.topMidConDetButton:active {
color: #ffffff;
width: 40%;
text-decoration: none;
}

@media (max-width: 480px) {
div.category_bar{
width:100%;
}
}


/* --- モーダル共通 --- */
.modal{ position: fixed; inset: 0; display: none; z-index: 9999; }
.modal[aria-hidden="false"]{ display:block; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.35); }
.modal__panel{
  position:absolute; left:50%; transform:translateX(-50%);
  width:min(920px, 92vw); background:#fff; border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.2); overflow:hidden;
  top:10vh; /* PC: 画面中央付近 */
}
.modal__header{ display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid #eee; }
.modal__title{ font-size:16px; margin:0; }
.modal__close{ background:transparent; border:none; font-size:28px; line-height:1; cursor:pointer; }
.modal__body{ padding:12px 16px 20px; max-height:70vh; overflow:auto; }

/* 2層目ボタンのグリッド */
.subcat-grid{ display:grid; gap:8px; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); }
.subcat-btn{
  display:block; padding:10px 12px; border-radius:8px; text-align:center;
  text-decoration:none; border:1px solid #1333BA; color:#1333BA; background:#fff; transition:.2s;
}
.subcat-btn:hover{ background:#1333BA; color:#fff; }

/* --- スマホ: ボトムシート化 --- */
@media (max-width: 600px){
  .modal__panel{
    left:0; right:0; width:100%; border-radius:16px 16px 0 0;
    transform:none; bottom:0; top:auto;
  }
  .modal__body{ max-height: 55vh; }
}

/* アニメ（任意） */
.modal[aria-hidden="false"] .modal__panel{ animation:slideIn .18s ease-out; }
@keyframes slideIn{ from{ transform:translate(-50%, 10px); opacity:.95; } to{ transform:translate(-50%, 0); opacity:1; } }
@media (max-width:600px){
  @keyframes slideIn{ from{ transform:translateY(10px); opacity:.95; } to{ transform:translateY(0); opacity:1; } }
}

/* 背景スクロール停止 */
body.modal-open { overflow: hidden; touch-action: none; }

/* スマホのときはボトムシート化 */
@media (max-width: 600px){
  .modal__panel{
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    width: 100%;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%); /* 初期は下に隠す */
    will-change: transform, height;
    max-height: 100svh; /* iOS用の安定単位 */
    display: flex; flex-direction: column;
  }
  .modal[aria-hidden="false"] .modal__panel{
    transform: translateY(0);
    transition: transform .18s ease-out;
  }

  /* 掴みハンドル */
  .modal__header{ position: relative; padding-top: 18px; }
  .modal__header::before{
    content:""; position:absolute; left:50%; transform:translateX(-50%);
    top:8px; width:44px; height:4px; border-radius:9999px; background:#ddd;
  }

  /* 本文はスクロール、safe-area考慮 */
  .modal__body{
    overflow:auto;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }

  /* ドラッグ中はアニメ無効 */
  .modal__panel.is-dragging{ transition:none !important; }
}

/* 一覧表示用のCSS */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, 360px); /* 1枚あたり幅を固定 */
  gap: 1.5rem;
  justify-content: center; /* 中央寄せ */
  width: 100%;
  max-width: 1200px;       /* 全体の最大幅 */
  margin: 2rem auto;
}

.card{
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #222 !important;
  text-decoration: none;
  border-radius: 14px;
  box-shadow: 0 4px 15px rgba(0,0,0,.12);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}

.card:hover{
  transform: translateY(-6px) scale(1.08);         /* 大きめ拡大 */
  box-shadow: 0 18px 40px rgba(0,0,0,.3);          /* 影を強調 */
  filter: brightness(1.06) saturate(1.12);
  opacity:1;
}

.card:focus-visible{
  outline: 3px solid #3b82f6;
  outline-offset: 3px;
}

/* サムネイル */
/*
.card__thumb{
  margin: 0;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
*/
/*
.card__thumb{
  margin: 0;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  width: 100%;
  height: 200px;
}
*/
.card__thumb {
  margin: 0;
  position: relative;
  aspect-ratio: 16 / 9; /* 枠は常に16:9 */
  width: 360px;         /* 一覧用の幅 */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card__thumb img{
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.card__thumb img.thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 小さい画像は拡大せず中央配置 */
.card__thumb img.thumb-img.is-small {
  width: auto;
  height: auto;
  object-fit: contain;
  margin: auto;
}

/* カテゴリラベル */
.card__category{
  position: absolute;
  top: 10px;
  left: 10px;
  padding: .25rem .6rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
  color: #fff;
}
.cat-news { background: #e11d48; }   /* 赤 */
.cat-blog { background: #2563eb; }   /* 青 */
.cat-tips { background: #059669; }   /* 緑 */

/* 既存の .cards / .card / :hover などはそのまま */

.card__content{
  padding: 1rem 1.25rem 1.25rem;
}

.card__date{
  display: block;
  font-size: 1.4rem;
  color: #888;
  margin-bottom: .4rem;
}

.card__title{
  font-size: clamp(1.6rem, 3vw, 1.8rem) !important;
  font-weight: 700;
  margin: .25rem 0 .75rem !important;
  padding-bottom: .35rem;
  border-bottom: 3px solid #000;
  color: #000 !important;
}

.card__desc{
  color: #555;
  line-height: 1.85;
  font-size: .95rem;
  margin: 0;
}

/* ▼ カテゴリ（リード文の下に配置） */
.card__cats{
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .5rem;           /* 行間/列間 */
  margin: .9rem 0 0;          /* リード文との余白 */
  padding: 0;
  list-style: none;
  margin-bottom:10px;
}

.card__cat{
  display: inline-block;
  padding: .25rem .6rem;
  border-radius: 999px;       /* pill 形状 */
  border: 1px solid #e5e7eb;  /* 薄い枠線 */
  font-size: 1.3rem;
  line-height: 1;
  white-space: nowrap;        /* タグ内部改行なし */
  background: #e7ecfc; /* 薄い青 */
  color: #1333BA;
  border-radius: 999px;
}

.card__cat_detail{
  display: inline-block;
  padding: .25rem .6rem;
  border-radius: 999px;       /* pill 形状 */
  background: #f3f4f6;        /* 薄いグレー */
  border: 1px solid #e5e7eb;  /* 薄い枠線 */
  color: #374151;
  font-size: 1.2rem;
  line-height: 1;
  white-space: nowrap;        /* タグ内部改行なし */
}

div.case_content p {
    margin: revert;
}

@media (max-width: 480px) {
  .cards {
    grid-template-columns: 1fr;   /* 1列固定 */
    justify-content:center;
  }
  .card {
    width:90%;
    max-width: 360px;
    margin: 0 auto;
  }
  
  .card__thumb {
    width:100%;
  }
  .topMidConDetButton{
    font-size:15px;
  }
  .cat-guard{
    height:10px;
  }
}

/* もっとみるボタンのスタイル */
.link-case {
  text-align: center;
  margin: 20px 0;
}

.more-btn {
  display: inline-block;
  padding: 12px 30px;
  background-color: #32AD66;
  color: white !important;
  text-decoration: none;
  border: none;
  border-radius: 25px;
  font-weight: bold;
  font-size:1.7rem;
  transition: background-color 0.3s ease;
}

.more-btn:hover {
  background-color: #278a50;
  color: white !important;
  text-decoration: none;
}

.more-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

#loading .more-btn {
  background-color: #ccc;
  cursor: not-allowed;
}


.case_detail {
    max-width: 1126px;
    margin: 0 auto 140px;
    padding: 0 20px;
}

.case_detail .case_ttl {
    padding: 27px 50px 27px 60px;
    margin-bottom: 5px;
    display: flex;
}

.case_detail .case_ttl h3 {
    font-weight: bold;
    font-size: 1.5em;
}

.case_detail .case_subcontent {
    padding: 0px 50px 0px 60px;
}


.case_detail .case_content {
    padding: 0px 50px 27px 60px;
}

.case_detail .btn {
    margin-top: 100px;
}
.case_detail .btn .btn_link {
    margin: 0 auto;
}

@media (max-width: 480px) {
  .case_detail .case_content,
  .case_detail .case_ttl,
  .case_detail .case_subcontent{
    padding:revert;
  }
}


/* ===== Case Study Page Styles ===== */
:root{
  --brand: #32ad66;          /* 既存のグリーン */
  --brand-blue: #1f57d6;     /* トップページの青に合わせる場合は上書き */
  --ink:#1d1d1f; --muted:#6b7280; --line:#e5e7eb; --container:980px;
}
.case-title *{box-sizing:border-box;}
.case-title .container{max-width:var(--container);margin:0 auto;padding:0 20px;}
.case-title a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}

/* ===== HERO ===== */
.case-title .hero{background:#fff;border-bottom:1px solid var(--line)}
.case-title .eyebrow{
  display:inline-block;font-size:.85rem;letter-spacing:.08em;color:var(--brand);
  font-weight:700;background:rgba(50,173,102,.08);border:1px solid rgba(50,173,102,.25);
  padding:6px 10px;border-radius:999px;margin-bottom:12px
}
.case-title .title{
  font-size:24pt;            /* H1=24pt */
  line-height:1.35;color:var(--ink);margin:0 0 6px;font-weight:800;
  border-left:5px solid var(--brand);padding-left:.6em;
}
.case-title .lead{
  color:var(--ink);
  font-size:1.2rem;          /* リード少し大きく */
  line-height:1.9;margin:.6rem 0 0
}
.case_hr{
border: none;
border-top: 1px solid #DCDCDC;
}

figure.wp-block-image img{
border: 1px solid var(--line);
    border-radius: 12px!important;
}

div.case_content p{
margin: revert;
line-height: 1.9;
}