/*
 * TapTrip（旧サイトの tcss/style.css、article.css、SP 用の detail.css・sp_style.css の配色と部品を引き継いだレスポンシブ版）
 * 768px 未満: スマートフォン（旧 SP 版） / 1080px 以上: 本文 760px + サイドバー 320px の 2 カラム（旧 PC 版）
 */
/* エリア名の英語表記の書体（旧サイトと同じ Google Fonts の Homemade Apple をサイトに置いたもの。assets/homemade-apple/README.md） */
@font-face { font-family: "Homemade Apple"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/homemade-apple/HomemadeApple-Regular.woff2") format("woff2"); }
:root {
  --text: #4d4d4d;
  --strong: #333;
  --sub: #666;
  --muted: #999;
  --line: #ccc;
  --orange: #f26722;       /* フッターの線、ランキングの番号など */
  --orange-h2: #ee6a22;    /* 本文の見出しの下線 */
  --orange-soft: #fe8651;  /* タグの文字と枠 */
  --orange-pale: #ffe8da;  /* タグの背景 */
  --quote: #facab3;        /* 引用の背景 */
  --bg: #fff;
  --font: "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.7; }
a { color: var(--strong); }
a:hover { color: var(--orange); }
img { max-width: 100%; height: auto; vertical-align: bottom; }
ul, ol { margin: 0; padding: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- ヘッダー ---- */
.siteHeader { border-bottom: 1px solid var(--line); background: #fff; }
.siteHeader .inner { max-width: 1100px; margin: 0 auto; padding: 5px 5px 0; display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
.siteHeader .logo img { display: block; width: 179px; height: auto; }
.gnav { display: flex; }
.gnav a { display: block; padding: 0 20px; border-left: 1px solid var(--sub); line-height: 25px; color: var(--sub); text-decoration: none; font-size: 12px; text-align: center; min-width: 120px; }
.gnav a:last-child { border-right: 1px solid var(--sub); }
.gnav a i { padding-right: 5px; }
.gnav a:nth-child(1):hover { color: #f9a600; }
.gnav a:nth-child(2):hover { color: #1be0c9; }
.gnav a:nth-child(3):hover { color: #eb2874; }

/* ---- 本体 ---- */
.contents { max-width: 1100px; margin: 0 auto; padding: 20px 16px 30px; }
.contents.hasSide { display: flex; gap: 20px; align-items: flex-start; }
.main { flex: 1 1 760px; min-width: 0; max-width: 760px; }
.side { flex: 0 0 320px; }
.contents:not(.hasSide):not(.wide) .main { max-width: none; }   /* 1 カラムのページ（固定ページ、キーワード一覧）は 1100px の幅いっぱい */

.breadcrumb { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.breadcrumb a { color: var(--sub); text-decoration: none; }
.pageTitle { font-size: 22px; line-height: 1.4; color: var(--strong); margin: 10px 0 20px; }

/* ---- 記事 ---- */
.entryTitle { font-size: 24px; line-height: 30px; font-weight: bold; color: var(--strong); margin: 20px 0 10px; }
.articleMeta { list-style: none; display: flex; flex-wrap: wrap; gap: 0 12px; font-size: 12px; color: var(--muted); }
.articleMeta a { color: var(--sub); }
.eyecatch { margin: 20px 0 10px; }
.eyecatch img { width: 100%; }
.lead { font-size: 14px; line-height: 1.8; color: var(--sub); }

.entryBody { font-size: 16px; line-height: 25px; margin-top: 20px; }
.entryBody p { margin: 0 0 20px; }
.entryBody h2 { font-size: 22px; line-height: 25px; color: var(--strong); margin: 60px 0 20px; padding-bottom: 10px; border-bottom: 3px solid var(--orange-h2); }
.entryBody h3 { font-size: 18px; line-height: 22px; color: var(--strong); margin: 40px 0 15px; }
.entryBody h3::before { content: "■"; padding-right: 5px; }
.entryBody h4 { font-size: 16px; color: var(--strong); margin: 30px 0 10px; }
.entryBody img { display: block; margin: 40px auto 10px; }
.entryBody a { color: var(--strong); text-decoration: underline; }
.entryBody ul { padding-left: 1.5em; margin: 0 0 20px; }
.entryBody .source, .entryBody .credit { font-size: 10px; line-height: 14px; text-align: right; padding: 0 10px; margin-top: -10px; }
.entryBody .source a, .entryBody .credit a { color: var(--sub); }
.entryBody .linkTitle { margin-top: 40px; font-size: 18px; line-height: 24px; font-weight: bold; }
.entryBody blockquote { position: relative; margin: 40px 0 10px; padding: 30px; background: var(--quote); border-radius: 5px; font-size: 14px; line-height: 22px; }
.entryBody blockquote p { margin: 0; }
.entryBody blockquote::before { content: "\201C"; position: absolute; left: 20px; top: -10px; font: 96px/1 sans-serif; color: #fff; }
.entryBody blockquote::after { content: "\201D"; position: absolute; right: 20px; bottom: -50px; font: 96px/1 sans-serif; color: #fff; }
.entryBody .video { position: relative; padding-top: 56.25%; margin: 40px 0 10px; }
.entryBody .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.entryBody .instagram-media, .entryBody .twitter-tweet { margin: 40px auto 10px !important; }
/* Instagram の埋め込み。旧サイトは公式の埋め込みコードの style（白い枠と影、幅 326〜540px）を本文に持っていて、
   embed.js はその style を iframe に引き継ぐ。書き出した本文には style がないので、同じ見た目をここで付ける
   （embed.js が動く前の blockquote と、置き換わった後の iframe の両方に効く） */
.entryBody .instagram-media { background: #fff; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0, 0, 0, .5), 0 1px 10px 0 rgba(0, 0, 0, .15); max-width: 540px; min-width: 326px; width: calc(100% - 2px); padding: 0; }
.entryBody blockquote.instagram-media { padding: 16px; font-size: 14px; text-align: center; }
/* embed.js が動かない（ブラウザの追跡防止や広告ブロックで止められた、投稿が削除された）時に残るリンクを、旧サイトの「Instagramで見る」のカードに近づける */
.entryBody blockquote.instagram-media a { display: block; padding: 200px 0; font-size: 0; text-decoration: none; }
.entryBody blockquote.instagram-media a::before { content: "\f16d"; display: block; margin-bottom: 14px; font: 56px/1 FontAwesome; color: #000; }
.entryBody blockquote.instagram-media a::after { content: "この投稿をInstagramで見る"; font-size: 14px; font-weight: bold; color: #3897f0; }
.entryBody blockquote.instagram-media::before, .entryBody blockquote.instagram-media::after { content: none; }

/* お店（旧 spotBox。写真 320px の右に情報、外部サイトのリンクは右下） */
.entryBody .spotBox { display: flex; gap: 10px; margin: 40px 0 20px; padding: 10px; background: #e8eadf; border-radius: 5px; font-size: 14px; line-height: 1.6; color: var(--strong); }
.entryBody .spotBox .ph { flex: 0 0 320px; height: 240px; overflow: hidden; }
.entryBody .spotBox .ph img { width: 100%; height: 100%; object-fit: cover; margin: 0; }
.entryBody .spotBox .text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.entryBody .spotBox .title { margin: 0 0 5px; font-weight: bold; }
.entryBody .spotBox .reading { margin: -5px 0 5px; font-size: 10px; line-height: 20px; }
.entryBody .spotBox dl { margin: 0; font-weight: bold; color: var(--sub); }
.entryBody .spotBox dt { float: left; clear: left; padding: 2px 0 3px; }
.entryBody .spotBox dd { margin-left: 70px; padding: 2px 0 3px; overflow-wrap: anywhere; }
.entryBody .spotBox dd a { color: var(--sub); }
.entryBody .spotBox .spotLinks { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; margin: auto 0 0; padding: 10px 0 0; }
.entryBody .spotBox .spotLinks a { display: block; padding: 5px; background: #fff; border-radius: 3px; }
.entryBody .spotBox .spotLinks img { display: block; width: auto; height: 20px; margin: 0; }

/* 目次（旧 topmenu。4 つ目以降は「[開く]」で出す） */
.toc { margin: 30px 0; padding: 15px 20px; border: 1px solid var(--line); border-radius: 3px; background: #fafafa; font-size: 14px; }
.tocTitle { margin: 0 0 8px; font-weight: bold; color: var(--strong); }
.toc ol { margin: 0; padding-left: 1.8em; }
.toc li { padding: 3px 0; }
.toc a { color: var(--strong); text-decoration: none; }
.toc a:hover { color: var(--orange); text-decoration: underline; }
.toc details summary { display: inline-block; margin: 5px 0 0; color: var(--orange); cursor: pointer; list-style: none; }
.toc details summary::-webkit-details-marker { display: none; }
.toc details[open] summary { display: none; }

/* 著者（旧 autorInfoWrapper） */
.authorBox { display: flex; gap: 20px; margin: 40px 0; padding-top: 40px; border-top: 1px solid var(--line); }
.authorImg { flex: 0 0 200px; }
.authorImg img { display: block; width: 200px; height: 200px; object-fit: cover; }
.authorText { flex: 1; min-width: 0; font-size: 14px; line-height: 25px; }
.authorName { margin: 20px 0; font-weight: bold; color: var(--strong); }

/* 執筆者のページ（旧 writersProfile）。見出しの下に著者欄と同じ形で、区切り線は下に */
.writerBox { margin: 0 0 10px; padding: 0 0 30px; border-top: 0; border-bottom: 1px solid var(--line); }
.writerBox .authorText p:first-child { margin-top: 0; }
.writerLinks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.writerLinks a { display: inline-block; padding: 2px 12px; border: 1px solid var(--orange-soft); border-radius: 3px; color: var(--orange-soft); font-size: 13px; text-decoration: none; }
.writerLinks a:hover { color: #fff; background: var(--orange-soft); }
.writerLinks .fa { margin-right: 4px; }
.writerCount { color: var(--muted); font-size: 12px; }

/* ライター一覧（旧 contentsWriters・writersLink。正方形のアバターのタイルで、下に半透明の黒い帯と白い名前） */
.writers { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.writers a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--line); color: #fff; text-decoration: none; }
.writers img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.writers a:hover img { opacity: .8; }
.writerName { position: absolute; left: 0; right: 0; bottom: 0; padding: 1em 4px; background: rgba(0, 0, 0, .6); color: #fff; font-weight: bold; line-height: 1.2; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.writers a:hover .writerName { color: #fff; }

/* 見出し（中央に線を引いたもの。旧 entryKeywords、recommendEntry の h2） */
.sectionTitle { margin: 60px 0 30px; background: url(/assets/img/bg_top_h2.png) repeat-x left center; text-align: center; font-size: 20px; color: var(--strong); }
.sectionTitle span { display: inline-block; padding: 0 20px; background: #fff; }

/* タグ */
.tag { list-style: none; text-align: center; }
.tag li { display: inline-block; }
.tag a, .tag .nolink { display: inline-block; margin: 5px; padding: 5px 20px; line-height: 20px; font-size: 12px; font-weight: bold; color: var(--orange-soft); background: var(--orange-pale); border: 1px solid var(--orange-soft); border-radius: 3px; text-decoration: none; }
.tag a:hover { color: #fff; background: var(--orange-soft); }
.tag .count { font-weight: normal; font-size: 11px; opacity: .8; }
.sideTag { text-align: left; }
.sideTag a { margin: 0 4px 8px 0; padding: 3px 12px; }

/* 共有ボタン */
.snsBtn { list-style: none; display: flex; gap: 6px; margin: 15px 0; }
.snsBtn a { display: block; min-width: 80px; padding: 4px 12px; border-radius: 3px; color: #fff; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; }
.snsBtn a:hover { color: #fff; opacity: .85; }
.sns-x { background: #000; }
.sns-fb { background: #3b5998; }
.sns-hatena { background: #00a4de; }
.sns-line { background: #06c755; }

/* 記事カード（旧 recommendEntry のタイル） */
.cards { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.card { position: relative; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; height: 210px; }
.card a { display: block; height: 100%; color: var(--strong); text-decoration: none; }
.card .img_cover { display: block; height: 150px; margin: 5px; background: var(--line); }
.card .img_cover img { width: 100%; height: 100%; object-fit: cover; }
.card .cardText { position: absolute; left: 0; right: 0; bottom: 0; height: 53px; padding: 5px 10px; background: rgba(255, 255, 255, .9); overflow: hidden; transition: height .5s ease-out; }
.card .cardTitle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 21px; }
.card .cardDesc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 5px; font-size: 12px; line-height: 18px; color: var(--sub); }
.card:hover .cardText { height: 115px; }
.more { text-align: right; }
.more a { color: var(--orange); font-weight: bold; }

/* ページ番号（旧 pagenation。オレンジの枠の四角、今のページは塗りつぶし） */
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 30px 0; }
.pager a, .pager .current { display: block; min-width: 40px; height: 40px; padding: 0 6px; line-height: 38px; border: 1px solid var(--orange); color: var(--orange); background: #fff; text-align: center; text-decoration: none; }
.pager a:hover, .pager .current { color: #fff; background: var(--orange); font-weight: normal; }
.pager .gap { line-height: 40px; color: var(--muted); }

/* 人気順・新着順のタブ（旧 #tab） */
.listTabs { list-style: none; display: flex; margin: 20px 0 30px; border-bottom: 1px solid var(--line); }
.listTabs a { display: block; width: 140px; margin-bottom: -1px; padding: 10px 0; border: 1px solid var(--line); background: #dedede; color: var(--strong); text-align: center; text-decoration: none; }
.listTabs li + li a { border-left: 0; }
.listTabs .active a { background: #fff; border-bottom-color: #fff; }
.listTabs a:hover { color: var(--orange); }

/* エリアのページ（旧 area.css）。上の大きな画像の中央に、白い丸でエリア名と英語表記 */
.areaTop { max-width: 1100px; margin: 0 auto; padding: 20px 16px 0; }
.areaCrumb { margin-bottom: 10px; }
.areaHeader { position: relative; height: 400px; background: var(--line) no-repeat center / cover; }
.areaHeaderText { position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; background: rgba(255, 255, 255, .8); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.areaHeaderText h1 { margin: 0; font-size: 36px; font-weight: normal; line-height: 1.2; color: var(--strong); }
.areaHeaderText span { margin-top: 10px; font-family: "Homemade Apple", cursive; font-size: 28px; color: #d21e0d; transform: rotate(-10deg); }
.areaDetail { margin: 0 0 40px; font-size: 14px; line-height: 24px; }
.countryList { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px 10px; }
.countryList li { padding: 5px; }
.countryList a { color: var(--strong); }
.moreBox { margin: 20px 0 0; text-align: center; }
.moreBox a { display: inline-block; min-width: 240px; padding: 10px 20px; border: 1px solid var(--orange-soft); border-radius: 3px; color: var(--orange-soft); font-weight: bold; text-decoration: none; }
.moreBox a:hover { color: #fff; background: var(--orange-soft); }
.categoryTiles img { object-fit: cover; }

/* エリアで絞り込む・エリア一覧（旧 destinationSearch。本文の幅では 3 列） */
.hasSide .main .tiles { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pageLead { margin: -10px 0 20px; color: var(--sub); }
.areaGroup { margin-top: 40px; }
.areaGroupTitle { margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--orange-h2); font-size: 18px; }
.areaGroupTitle a { color: var(--strong); text-decoration: none; }
.areaTree, .areaTree ul { list-style: none; }
.areaTree > li { padding: 6px 0; border-bottom: 1px solid #eee; }
.areaTree > li > a { font-weight: bold; }
.areaTree ul { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px; padding-left: 1em; font-size: 13px; }
.areaTree a { color: var(--strong); text-decoration: none; }
.areaTree a:hover, .areaGroupTitle a:hover { color: var(--orange); text-decoration: underline; }
.count { font-size: 11px; color: var(--muted); }

.ad { margin: 30px 0; min-height: 100px; text-align: center; }
/* 帯（トップのカテゴリから探すなど）の最後の広告は、帯の下の余白（.bandInner の padding）と重ならないよう下の margin をなくす */
.bandInner > .ad:last-child { margin-bottom: 0; }
/* AdSense が「出す広告がない」と返した枠は、確保した高さごと消す（ins に data-ad-status="unfilled" が付く） */
.ad:has(> ins[data-ad-status="unfilled"]) { display: none; }

/* ---- サイドバー（旧 rankingData、newEntryData） ---- */
.sideBox { margin-bottom: 40px; }
.sideTitle { margin: 0 0 15px; padding: 8px 10px; font-size: 16px; color: #fff; background: var(--orange); border-radius: 3px; }
.contents.sideLeft { flex-direction: row-reverse; }
.contents.sideLeft .side { flex-basis: 280px; }
/* カテゴリで絞り込む（旧 leftMenu） */
.sideMenu { list-style: none; }
.sideMenu li { border-bottom: 1px solid #eee; font-size: 13px; }
.sideMenu a, .sideMenu span { display: block; padding: 8px 5px; color: var(--strong); text-decoration: none; }
.sideMenu a::before, .sideMenu span::before { content: "＊"; margin-right: 4px; color: var(--orange); }
.sideMenu a:hover { color: var(--orange); }
.sideMenu span { color: var(--muted); }
.sideMenu .active span { color: #fff; background: var(--orange-soft); font-weight: bold; }
.sideMenu .active span::before { color: #fff; }
.sideList { list-style: none; }
.sideList li { border-bottom: 1px solid #eee; }
.sideList a { display: flex; gap: 10px; padding: 8px 0; color: var(--strong); text-decoration: none; font-size: 13px; line-height: 19px; }
.sideList a:hover { color: var(--orange); }
.sideList .thumb { position: relative; flex: 0 0 100px; height: 66px; background: var(--line); }
.sideList .thumb img { width: 100%; height: 100%; object-fit: cover; }
.sideList .rank { position: absolute; left: 0; top: 0; width: 0; height: 0; border-style: solid; border-width: 30px 30px 0 0; border-color: var(--orange) transparent transparent transparent; }
.sideList .rank { font-size: 0; }
.ranking { counter-reset: rank; }
.ranking li { counter-increment: rank; }
.ranking .thumb::after { content: counter(rank); position: absolute; left: 3px; top: 0; font-size: 11px; font-weight: bold; color: #fff; }
.sideList .t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- フッター（旧 #footerWrapper） ---- */
.siteFooter { margin-top: 40px; padding: 20px 0 40px; border-top: 1px solid var(--muted); border-bottom: 5px solid var(--orange); }
.siteFooter .inner { max-width: 1010px; margin: 0 auto; padding: 0 16px; display: flex; flex-wrap: wrap; gap: 20px; }
.footerLogo { flex: 0 0 250px; }
.footerLists { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.footerLists h3 { font-size: 13px; color: var(--strong); margin: 0 0 8px; }
.footerLists ul { list-style: none; }
.footerLists a { font-size: 12px; line-height: 24px; color: var(--sub); text-decoration: none; }
.footerLists a:hover { color: var(--orange); text-decoration: underline; }
.copyright { flex: 0 0 100%; margin: 20px 0 0; font-size: 11px; color: var(--muted); text-align: center; }

/* ---- トップページ（旧 index.css。白と薄緑の帯を交互に並べ、帯の上端に三角の切り欠きを付ける） ---- */
.contents.wide { max-width: none; padding: 0; }
.contents.wide .main { max-width: none; }   /* 記事ページ用の本文の幅（760px）を外し、帯は画面の端まで、中身は中央の 1100px にする */
/* 画面上部の大きな画像（旧 #mainImage。PC は main_img.jpg、スマホは main_img_sp.jpg） */
.mainImage { height: 400px; background: url(/assets/img/main_img.jpg) no-repeat center / cover; box-shadow: 0 0 2px 1px #ccc; }
.band { position: relative; border-top: 1px solid #e3e3e3; }
.band::before { content: ""; position: absolute; left: 50%; top: -9px; width: 25px; height: 15px; transform: translateX(-50%) rotate(45deg); background: #e8eadf; pointer-events: none; }
.bandAlt { background: #e8eadf; box-shadow: 0 5px 15px -5px #9ea4d5; }
.bandAlt::before { background: #fff; }
.band:first-of-type { border-top: 0; }
.band:first-of-type::before { content: none; }
.bandInner { max-width: 1100px; margin: 0 auto; padding: 1px 16px 50px; }
.band .sectionTitle span { padding: 0 40px; letter-spacing: .3em; font-weight: bold; }
.bandAlt .sectionTitle span { background: #e8eadf; }
.subTitle { margin: 40px 0 15px; font-size: 20px; color: var(--strong); }
.icon { display: inline-block; width: 1.1em; height: 1em; margin-right: .4em; vertical-align: -.125em; fill: currentColor; }
.subTitle .icon { margin: 0 .5em 0 .3em; }
.cards4 { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.bandAlt .card { background: #fff; }

/* 写真の上に丸いラベルを置くタイル（地域・国・カテゴリ。旧 265×140） */
.tiles { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tiles a { position: relative; display: block; aspect-ratio: 265 / 140; overflow: hidden; background: var(--line); color: var(--strong); text-decoration: none; }
.tiles img { width: 100%; height: 100%; object-fit: cover; }
.tiles span { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; background: rgba(255, 255, 255, .8); font-size: 12px; line-height: 16px; font-weight: bold; text-align: center; transition: transform .2s ease-out; }
.tiles a:hover span { transform: scale(1.25); color: var(--strong); }
/* 国: 旧サイトのスライダーの代わりに、2 段の横スクロール */
.tilesScroll { grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: calc((100% - 30px) / 4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.tilesScroll li { scroll-snap-align: start; }
.slider { position: relative; }
/* スクリプトが動いたら、スクロールバーを隠して矢印と点で送る（旧 flexslider と同じく、矢印は PC ではマウスを乗せた時だけ外側に出す） */
.slider.ready .tilesScroll { scrollbar-width: none; padding-bottom: 0; }
.slider.ready .tilesScroll::-webkit-scrollbar { display: none; }
.sliderPrev, .sliderNext { position: absolute; top: 0; bottom: 30px; width: 30px; padding: 0; border: 0; background: no-repeat center; cursor: pointer; opacity: 0; transition: opacity .3s; }
.sliderPrev { left: -36px; background-image: url(/assets/img/arrow_left.png); }
.sliderNext { right: -36px; background-image: url(/assets/img/arrow_right.png); }
.slider:hover .sliderPrev, .slider:hover .sliderNext, .sliderPrev:focus-visible, .sliderNext:focus-visible { opacity: 1; }
.sliderDots[hidden] { display: none; }
.sliderDots { list-style: none; display: flex; justify-content: center; gap: 8px; margin-top: 15px; }
.sliderDots button { display: block; width: 10px; height: 10px; padding: 0; border: 0; background: #ccc; cursor: pointer; }
.sliderDots button:hover { background: #999; }
.sliderDots button.active { background: #333; }
/* 画面の端に余白がない幅・タッチ操作の端末では、矢印を写真の上に重ねて常に出す */
@media (max-width: 1179px), (hover: none) {
  .sliderPrev, .sliderNext { opacity: 1; width: 36px; background-color: rgba(255, 255, 255, .7); }
  .sliderPrev { left: 0; }
  .sliderNext { right: 0; }
}

/* 記事から探す（丸い写真とタイトル） */
.circles { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 40px; }
.circles li { width: 230px; }
.circles a { display: block; color: var(--strong); text-decoration: none; }
.circleImg { display: block; width: 230px; height: 230px; border-radius: 50%; overflow: hidden; background: var(--line); }
.circleImg img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease-out; }
.circles a:hover .circleImg img { transform: scale(1.05); }
.circleTitle { display: block; padding: 20px 0 10px; font-size: 16px; line-height: 21px; font-weight: bold; }
.circleDesc { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 18px; color: var(--sub); }

/* ---- タブレット（2 カラムにできない幅） ---- */
@media (max-width: 1079px) {
  .contents.hasSide { display: block; }
  .main { max-width: none; }
  .side { margin-top: 40px; }
  .cards4 { grid-template-columns: repeat(3, 1fr); }
}

/* ---- スマートフォン（旧 SP 版） ---- */
@media (max-width: 767px) {
  body { font-size: 14px; }
  .siteHeader .inner { flex-direction: column; align-items: stretch; padding: 8px 0 0; min-height: 0; }
  .siteHeader .logo { display: block; text-align: center; }
  .siteHeader .logo img { display: inline-block; width: 140px; }
  .gnav { margin-top: 6px; border-top: 1px solid #eee; }
  .gnav a { flex: 1; min-width: 0; padding: 0; border: 0 !important; line-height: 40px; font-size: 13px; }
  .gnav a + a { border-left: 1px solid #eee !important; }
  .contents { padding: 12px 12px 20px; }
  .entryTitle { font-size: 20px; line-height: 28px; margin-top: 10px; }
  .entryBody { font-size: 15px; line-height: 1.8; }
  .entryBody h2 { font-size: 19px; line-height: 1.4; margin-top: 40px; }
  .entryBody h3 { font-size: 17px; line-height: 1.4; margin-top: 30px; }
  .entryBody img, .entryBody blockquote, .entryBody .video { margin-top: 25px; }
  .entryBody blockquote { padding: 25px 20px; }
  .entryBody .spotBox { display: block; margin-top: 25px; }
  .entryBody .spotBox .ph { height: auto; aspect-ratio: 4 / 3; margin-bottom: 10px; }
  .authorBox { gap: 12px; margin: 30px 0; padding-top: 30px; }
  .authorImg { flex-basis: 80px; }
  .authorImg img { width: 80px; height: 80px; border-radius: 50%; }
  .authorName { margin: 0 0 8px; }
  .writers { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .writerName { padding: 10px 4px; font-size: 13px; }
  .sectionTitle { margin: 40px 0 20px; font-size: 17px; }
  .snsBtn a { flex: 1; min-width: 0; padding: 6px 0; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .mainImage { height: 190px; background-image: url(/assets/img/main_img_sp.jpg); }
  .bandInner { padding: 1px 12px 30px; }
  .band .sectionTitle span { padding: 0 15px; letter-spacing: .1em; }
  .subTitle { margin-top: 25px; font-size: 16px; }
  .tiles, .hasSide .main .tiles { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .areaTop { padding: 12px 12px 0; }
  .areaHeader { height: 200px; }
  .areaHeaderText { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
  .areaHeaderText h1 { font-size: 22px; }
  .areaHeaderText span { margin-top: 4px; font-size: 16px; }
  .countryList { grid-template-columns: repeat(2, 1fr); }
  .listTabs a { width: auto; flex: 1; }
  .listTabs li { flex: 1; }
  .pager a, .pager .current { min-width: 36px; height: 36px; line-height: 34px; }
  .tilesScroll { grid-template-columns: none; grid-auto-columns: calc((100% - 6px) / 2); }
  .tiles span { width: 70px; height: 70px; margin: -35px 0 0 -35px; font-size: 11px; line-height: 14px; }
  .circles { display: block; }
  .circles li { width: auto; border-bottom: 1px solid #eee; }
  .circles a { display: grid; grid-template-columns: 90px 1fr; gap: 0 12px; padding: 10px 0; }
  .circleImg { grid-row: 1 / 3; width: 90px; height: 90px; }
  .circleTitle { padding: 5px 0; font-size: 14px; }
  .circleDesc { -webkit-line-clamp: 2; }
  .card { height: auto; }
  .card .img_cover { height: 0; padding-top: 65%; position: relative; margin: 0; }
  .card .img_cover img { position: absolute; inset: 0; }
  .card .cardText { position: static; height: auto; background: none; }
  .card .cardDesc { display: none; }
  .card:hover .cardText { height: auto; }
  .siteFooter .inner { display: block; }
  .footerLogo { text-align: center; margin-bottom: 20px; }
  .footerLists { grid-template-columns: 1fr 1fr; }
  .footerLists > div:last-child { grid-column: 1 / -1; }
}