@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Description: SWELLの子テーマ（HIROSHIGE BLUE 用の調整入り）
    Version: 1.0.0-hb12
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ===== HIROSHIGE BLUE: 作品を主役にする最小限の調整 ===== */
:root {
  --hb-blue: #1f4e9c;      /* 広重の藍（ベロ藍）を思わせる濃い青。アクセントにだけ使う */
  --hb-ink: #1b1d21;
  --hb-sub: #6b7280;
  --hb-line: #e5e7eb;
}

/* ロゴ: 大文字の太いゴシック（画像ロゴを設定しない場合のサイト名表示） */
.c-headLogo__link,
.l-header .c-headLogo a,
.l-fixHeader .c-headLogo a {
  font-family: "Arial Black", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--hb-ink);
}
/* ロゴのカーニング: functions.php の hb_kern_logo が 1 文字ずつ span で囲み、組ごとの増減を --k で渡す */
.hb-logo > span { margin-right: var(--k, 0); white-space: pre; }

/* 記事の原画: できるだけ大きく、画面からはみ出さない高さで中央に */
.post_content .hb-artwork {
  margin: 0 auto 2.2em;
  text-align: center;
}
.post_content .hb-artwork img {
  width: auto;
  max-width: 100%;
  max-height: 88vh;
  height: auto;
  box-shadow: 0 2px 18px rgba(0, 0, 0, .12);
}
.post_content .hb-byline {
  color: var(--hb-sub);
  font-size: .95em;
  letter-spacing: .02em;
  margin-bottom: 1.2em;
}

/* 壁紙ダウンロード */
.post_content .hb-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-end;
  justify-content: center;
  margin: 1em 0 .6em;
}
.post_content .hb-dl-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.post_content .hb-dl-card img {
  display: block;
  border-radius: 6px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .15);
  height: auto;
}
.post_content .hb-dl-desktop img { width: min(100%, 420px); }
.post_content .hb-dl-phone img { width: min(100%, 150px); }
.post_content .hb-dl-btn {
  display: inline-block;
  background: var(--hb-blue);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700;
  padding: .55em 1.3em;
  border-radius: 999px;
  text-align: center;
  line-height: 1.35;
}
.post_content .hb-dl-btn span {
  display: block;
  font-weight: 400;
  font-size: .78em;
  opacity: .85;
}
.post_content .hb-dl-btn:hover { filter: brightness(1.12); }
.post_content .hb-dl-original {
  text-align: center;
  font-size: .92em;
  margin-top: .8em;
}

/* 作品情報の表 */
.post_content .hb-details table { font-size: .92em; }
.post_content .hb-details th {
  width: 9em;
  white-space: nowrap;
  font-weight: 600;
  background: #f7f8fa;
}

/* 一覧のサムネイル（関連記事・ウィジェットなど、格子以外の一覧） */
.p-postList__thumb img { object-fit: cover; }
.p-postList__title { font-weight: 700; }


/* ===== HIROSHIGE BLUE hb7: 暗い配色（2026-11-04 ユーザー様指示。Flickr のダークモードの色を参考） =====
   色は参考画像から採取: 背景 #24221f・ヘッダー #211f1b・帯 #1e1c18・区切り線 #302a25。
   SWELL はカスタマイザーの色を :root の変数で出すので、body で上書きする（body 以下にだけ効く）。 */
body {
  --hb-bg: #24221f;
  --hb-bg-deep: #1e1c18;
  --hb-head: #211f1b;
  --hb-panel: #2b2925;
  --hb-line: #302a25;
  --hb-ink: #ece9e4;
  --hb-sub: #a8a39b;
  --hb-link: #8fb4ee;
  --color_bg: var(--hb-bg);
  --color_content_bg: var(--hb-bg);
  --color_text: var(--hb-ink);
  --color_link: var(--hb-link);
  --color_border: var(--hb-line);
  --color_gray: var(--hb-panel);
  --color_header_bg: var(--hb-head);
  --color_header_text: var(--hb-ink);
  --color_gnav_bg: var(--hb-bg-deep);
  --color_footer_bg: var(--hb-bg-deep);
  --color_footer_text: var(--hb-sub);
  --color_htag: var(--hb-blue);
  background-color: var(--hb-bg);
  color: var(--hb-ink);
}
.l-header,
.l-fixHeader,
.p-spHeadMenu { background-color: var(--hb-head); color: var(--hb-ink); }
.l-header__bar { background-color: var(--hb-bg-deep); color: var(--hb-sub); border-bottom: 1px solid var(--hb-line); }
/* キャッチフレーズはバナーにも同じ文があるので、ヘッダーバーのほうは出さない（2026-11-04 ユーザー様指示）。RSS・検索のアイコンは右端に残る */
.l-header__bar .c-catchphrase { display: none; }
/* シェアボタンは当分使わない（2026-11-05 ユーザー様指示）。左の固定（-fix）と記事下（-bottom）の両方を隠す。戻すときはこの行を消す */
.c-shareBtns { display: none !important; }
.l-header { border-bottom: 1px solid var(--hb-line); box-shadow: none; }
.c-headLogo__link,
.l-header .c-headLogo a,
.l-fixHeader .c-headLogo a { color: var(--hb-ink); }
.c-gnav a, .c-gnav .ttl, .l-header__bar a, .c-iconBtn { color: var(--hb-ink); }
.l-footer, .l-footer__foot, .l-footer__widgetArea { background-color: var(--hb-bg-deep); color: var(--hb-sub); }
.l-footer a { color: var(--hb-sub); }
.l-footer { border-top: 1px solid var(--hb-line); }
.p-drawer, .p-searchModal__inner, .c-modal__inner { background-color: var(--hb-head); color: var(--hb-ink); }
.p-drawer a { color: var(--hb-ink); }
.l-content, .l-mainContent, .l-sidebar, .c-widget, .p-breadcrumb { background: transparent; color: var(--hb-ink); }
.p-breadcrumb, .p-breadcrumb a { color: var(--hb-sub); }
.post_content a, .c-widget a { color: var(--hb-link); }
.c-widget__title, .c-secTitle, .c-pageTitle, .c-postTitle__ttl, .post_content h2, .post_content h3 { color: var(--hb-ink); }
.post_content h2 { background: var(--hb-panel); border-left: 4px solid var(--hb-blue); }
input[type="text"], input[type="search"], input[type="email"], textarea, select,
.c-searchForm__s {
  background-color: var(--hb-panel); color: var(--hb-ink); border-color: var(--hb-line);
}
.c-searchForm__submit,
.wp-block-search__button,
.searchform [type="submit"] { background-color: var(--hb-blue); color: #fff; border-color: var(--hb-blue); }
.l-sidebar [type="submit"],
.l-sidebar .wp-block-search__button {
  background-color: var(--hb-blue) !important;
  color: #fff !important;
  border-color: var(--hb-blue) !important;
}
.wp-block-search__input { background-color: var(--hb-panel); color: var(--hb-ink); border-color: var(--hb-line); }
.p-breadcrumb, .p-breadcrumb.-bg-on { background: var(--hb-bg-deep); border-bottom: 1px solid var(--hb-line); }
.c-pagination a, .c-pagination span, .page-numbers {
  background: var(--hb-panel); color: var(--hb-ink); border-color: var(--hb-line);
}
.c-pagination .-current, .page-numbers.current { background: var(--hb-blue); color: #fff; }
.p-pnLinks__link { background: var(--hb-panel); color: var(--hb-ink); }
.post_content .hb-details th { background: var(--hb-panel); color: var(--hb-ink); }
.post_content table, .post_content th, .post_content td { border-color: var(--hb-line); }
.post_content .hb-artwork img,
.post_content .hb-dl-card img { box-shadow: 0 2px 18px rgba(0, 0, 0, .55); }


/* ===== HIROSHIGE BLUE hb7: 一覧を「高さ揃え・幅可変」の格子に（Flickr Explore の並び） =====
   各記事は原画の縦横比 --ar を持つ（parts/post_list/loop_main.php が出す）。幅 = --ar × 基準の高さ、
   余った幅は --ar に比例して配るので、同じ行の画像は高さが揃ったまま横一杯に並ぶ。
   最後の行は ::after が余りを吸い、引き伸ばさない。画像どうしの隙間が背景の色で細い枠に見える。 */
body.hb-listpage .l-container { max-width: 1640px; }
.hb-jgrid {
  --hb-rh: 300px;           /* 基準の行の高さ（実際の行は少し高くなる） */
  --hb-gap: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--hb-gap);
  list-style: none;
  margin: 0 0 3em;
  padding: 0;
}
.hb-jgrid::after {
  content: "";
  flex-grow: 1000000;
}
.hb-jgrid > .hb-jitem {
  position: relative;
  flex-grow: calc(var(--ar) * 100);
  width: calc(var(--ar) * var(--hb-rh));
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--hb-bg-deep);
  overflow: hidden;
}
.hb-jgrid > .hb-jitem::before { content: none; }
.hb-jitem__link {
  display: block;
  position: relative;
  color: #fff !important;
  text-decoration: none !important;
}
.hb-jitem__spacer {
  display: block;
  padding-bottom: calc(100% / var(--ar));
}
.hb-jitem__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease, filter .3s ease;
}
.hb-jitem__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.6em .9em .7em;
  background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.hb-jitem__title {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hb-jitem__title::before, .hb-jitem__title::after { content: none; }
.hb-jitem__date {
  display: block;
  margin-top: .3em;
  font-size: 12px;
  color: rgba(255, 255, 255, .75);
}
.hb-jitem__link:hover .hb-jitem__cap,
.hb-jitem__link:focus-visible .hb-jitem__cap { opacity: 1; transform: none; }
.hb-jitem__link:hover .hb-jitem__img { transform: scale(1.025); filter: brightness(1.06); }
.hb-jitem__link:focus-visible { outline: 2px solid var(--hb-link); outline-offset: -2px; }
@media (hover: none) {
  .hb-jitem__cap { opacity: 1; transform: none; padding-top: 2em; }
  .hb-jitem__title { font-size: 13px; }
  .hb-jitem__date { display: none; }
}
@media (max-width: 959px) {
  .hb-jgrid { --hb-rh: 220px; }
}
@media (max-width: 599px) {
  .hb-jgrid { --hb-rh: 150px; --hb-gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .hb-jitem__img, .hb-jitem__cap { transition: none; }
  .hb-jitem__link:hover .hb-jitem__img { transform: none; }
}