/* =====================================================================
   NROCKS V15.2：幅600pxの1列レイアウト（トップ・一覧・記事・固定ページ・404）
   - main.css（昔からの土台）の上に重ねて、600pxの1列・余白・線・ナビなどを決める
   - functions.php の nrocks_enqueue_front() で読み込む
   - 並び：
     1. 共通（変数・600pxの列・ページ全体の縦線）
     2. ヘッダー・フッター
     3. 縦の余白（ヘッダー 〜 見出し 〜 一覧 〜 フッター）
     4. 一覧（トップ・記事一覧・検索結果）
     5. 一覧のページ送り
     6. 広告
     7. トップのスライダー
     8. 記事ページ
     9. 固定ページ（PRIVACY POLICY・PROFILE・CONTACT）
    10. CATEGORIES・ARCHIVES・TAGS の一覧
    11. ITEMS（商品一覧）
    12. 404
   - 「トンボの線」：印刷のトンボ風の目印（1px × 20px・薄いグレー）。始まり＝左上側／終わり＝右下側の対角に置く
     列の外に余白がない 720px 未満の画面では出さない。長さ・間・色は下の変数の1か所で変える
   ===================================================================== */


/* =====================================================================
   1. 共通
   ===================================================================== */

:root {
  --trim-mark-length: 20px;    /* 線の長さ */
  --trim-mark-gap: 10px;       /* 列と線の間 */
  --trim-mark-color: #bcbcbc;  /* 線の色（サイトのグレー） */
}

/* 600pxの列を画面の中央に（640px未満はもともと1列なので何もしない） */
@media (min-width: 640px) {
  .page-header,
  .container03,
  .footer {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
  /* main.css の2列（一覧75%＋右メニュー20%）をやめる */
  .container03--front .container03-1 {
    float: none;
    width: auto;
    padding-right: 0;
  }
}

/* ページ全体の縦線：上は列の右端・下は列の左端（body の真ん中 ±300px） */
@media (min-width: 640px) {
  body {
    position: relative;
  }
  /* ヘッダーの上の余白 30px を .page-header の内側に（margin だと body の外にはみ出して、上の線の位置がずれる） */
  .page-header {
    padding-top: 30px;
  }
  .page-header .page-header-inner {
    margin-top: 0;
  }
  body::before,
  body::after {
    content: "";
    position: absolute;
    width: 0;
    height: var(--trim-mark-length);
    border-left: 1px solid var(--trim-mark-color);
    pointer-events: none;
  }
  body::before {               /* 上・右：列の右端の内側1px */
    top: 0;
    left: calc(50% + 300px - 1px);
  }
  body::after {                /* 下・左：列の左端 */
    bottom: 0;
    left: calc(50% - 300px);
  }
}


/* =====================================================================
   2. ヘッダー・フッター
   ===================================================================== */

/* フッター：検索欄 →20px→ PRIVACY POLICY・PROFILE →4px→ コピーライト
   ・書式は main.css の .header-sublinks（700）・.header-copyright（400）。フッターの中は 90% が重なるので 10.8px に固定 */
.footer .footer-sublinks {
  float: none;
  clear: both;
  margin: 20px 0 0;
  text-align: left;
  font-size: 10.8px;
}
.footer .footer-copyright {
  float: none;
  clear: both;
  margin: 4px 0 0;
  text-align: left;
  font-size: 10.8px;
}

/* ページ全体を対角の2本ではさむトンボの線：始まり＝ロゴの左（文字の上端）／終わり＝コピーライトの右（列の右端の外・文字の下端） */
@media (min-width: 720px) {
  .page-header h1.type-TTL {
    position: relative;
  }
  .page-header h1.type-TTL::before {
    content: "";
    position: absolute;
    top: 2px;                  /* ロゴ（28.8px・行の高さ 23px）の大文字の上端 */
    left: calc((var(--trim-mark-length) + var(--trim-mark-gap)) * -1);
    width: var(--trim-mark-length);
    border-top: 1px solid var(--trim-mark-color);
    pointer-events: none;
  }
  .footer .copyright {
    width: 100%;               /* float で文字の幅に縮んでいるので、列の幅いっぱいにして右端を列の右端にそろえる */
  }
  .footer .footer-copyright {
    position: relative;
  }
  .footer .footer-copyright::after {
    content: "";
    position: absolute;
    bottom: 2px;               /* 文字の下端（行の高さ 13px・文字 10.8px） */
    right: calc((var(--trim-mark-length) + var(--trim-mark-gap)) * -1);
    width: var(--trim-mark-length);
    border-top: 1px solid var(--trim-mark-color);
    pointer-events: none;
  }
}


/* =====================================================================
   3. 縦の余白
   ・ヘッダー 〜 見出し（LATEST POSTS など）＝ 80px
   ・見出し 〜 一覧の1件目・記事と記事の間 ＝ 40px
   ・ページ送り 〜 フッター ＝ 約80px／フッターの最後 〜 ページの一番下 ＝ 60px
   ・数字は実測で合わせたもの
   ===================================================================== */

.container03--front .container03-1 {
  margin-top: 93px;
}
/* パンくずの行があるページ（トップ以外）：パンくずの行（ヘッダーの枠からはみ出している約17px）のぶん足す */
body:has(.header-breadcrumb) .container03--front .container03-1 {
  margin-top: 109px;
}
/* スマホ（639px以下）：ヘッダーの高さが固定でないので、MENU の文字 〜 見出し ＝ 約65px に */
@media (max-width: 639px) {
  .container03--front .container03-1 {
    margin-top: 48px;
  }
  body:has(.header-breadcrumb) .container03--front .container03-1 {
    margin-top: 60px;          /* スマホではパンくずの行もヘッダーの高さに入る */
  }
}

/* 見出し 〜 一覧の1件目 ＝ 40px */
.container03--front .news {
  padding-top: 20px;
}

/* 一覧の下 〜 フッター：左の列と全体の下の余白をなくし、フッターの上の余白で空ける */
.container03--front,
.container03--front .container03-1 {
  padding-bottom: 0;
}
.footer {
  padding-bottom: 0;
}
.footer .footer-inner {
  margin-top: 65px;
  display: flow-root;          /* 中の .copyright が float なので、高さに含める */
  padding-bottom: 51px;        /* フッターの最後の行 〜 ページの一番下 ＝ 60px */
}


/* =====================================================================
   4. 一覧（トップ・記事一覧・検索結果。.postlist02）
   1行目：タイトル（14px）／2行目：日付・カテゴリ・タグ（.postlist02-meta）
   ===================================================================== */

.container03--front .postlist02-title {
  font-size: 14px;
  line-height: 1.2em;
}
/* 新着の印（＊）も細く（main.css の .newMark は 700） */
.container03--front .postlist02-title .newMark {
  font-weight: 400;
}
.postlist02-meta {
  display: flex;
  flex-wrap: wrap;             /* 入りきらないときだけ折り返す */
  gap: 0 0.6em;
  margin: 0;
  font-weight: 400;
}
.postlist02-meta a {
  font-weight: inherit;
}

/* 記事と記事の間 ＝ 40px（main.css の .postlist02 は 上の外余白 10px・内余白 10px。下の外余白 30px と重なって 30＋10） */
.container03--front .postlist02 {
  margin-bottom: 30px;
}

/* カテゴリ・タグのリンク書式：トップ・記事一覧の日付の行と、CATEGORIES などの一覧で同じ見た目に
   → Montserrat・12px・400・字間 -0.5px */
.container03--front .postlist02-meta,
.container03--index .index-list {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.5px;
}
.container03--front .postlist02-meta a,
.container03--index .index-list a,
.container03--index .index-list .post-count {
  font-weight: inherit;
}

/* 稲妻（人気記事。.postlist02-rank）：マウスオンでアイコンの横に「POPULAR POSTS」
   ・前後のナビと同じ動き：出るとき 0.3s／消えるとき 1.2s。文字は横に浮かせるので、タイトルの折り返しは変わらない */
.container03--front .postlist02-rank {
  position: relative;
  color: inherit;
  text-decoration: none;
}
.container03--front .postlist02-rank__label {
  position: absolute;
  left: calc(100% + 0.5em);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  text-transform: uppercase;
  color: #bcbcbc;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.container03--front .postlist02-rank:hover .postlist02-rank__label,
.container03--front .postlist02-rank:focus-visible .postlist02-rank__label {
  opacity: 1;
  transition-duration: 0.3s;
}

/* 検索結果の本文の抜粋（日付の行の下・本文と同じ 12px） */
.container03--search .postlist02-excerpt {
  margin-top: 6px;
}
.container03--search .postlist02-excerpt p {
  margin: 0;
}

/* 一覧のトンボの線
   ・トップ：記事ごとに、タイトルの左（始まり）
   ・記事一覧（.container03--archive）：一覧全体の上と下だけ（1件目のタイトルの左／最後の記事の日付の行の右）
   ・検索結果：記事ごとに、タイトルの左と抜粋の最後の行の右 */
@media (min-width: 720px) {
  .container03--front .postlist02-content {
    position: relative;
  }
  .container03--front .postlist02-content::before {
    content: "";
    position: absolute;
    top: 3px;                  /* タイトルの文字の頭 */
    left: calc((var(--trim-mark-length) + var(--trim-mark-gap)) * -1);
    width: var(--trim-mark-length);
    border-top: 1px solid var(--trim-mark-color);
  }
  .container03--archive .postlist02:not(:first-child) .postlist02-content::before {
    content: none;
  }
  .container03--archive .postlist02:not(:has(~ .postlist02)) .postlist02-content::after {
    content: "";
    position: absolute;
    bottom: 1px;               /* 日付の行の文字の下端 */
    right: calc((var(--trim-mark-length) + var(--trim-mark-gap)) * -1);
    width: var(--trim-mark-length);
    border-top: 1px solid var(--trim-mark-color);
    pointer-events: none;
  }
  .container03--search.container03--archive .postlist02:not(:first-child) .postlist02-content::before {
    content: "";
  }
  .container03--search .postlist02 .postlist02-content::after {
    content: "";
    position: absolute;
    bottom: 1px;               /* 抜粋の最後の行の下端あたり */
    right: calc((var(--trim-mark-length) + var(--trim-mark-gap)) * -1);
    width: var(--trim-mark-length);
    border-top: 1px solid var(--trim-mark-color);
    pointer-events: none;
  }
}


/* =====================================================================
   5. 一覧のページ送り（functions.php の nrocks_list_nav()。.nav-row .listnavi）
   ・左右の矢印だけ。マウスオンで矢印の横に「PREV 10 POSTS」「NEXT 10 POSTS」
   ・ページがない側も矢印は出す（.listnavi__none・押せない）。マウスオンで NO NEWER POSTS／NO OLDER POSTS
   ・.nav-row は POPULAR POSTS の WEEKLY AGGREGATION の行（.wp-pagenavi .nav-total）でも使う
   ===================================================================== */

.container03--front .nav-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1em;
  font-size: 12px;             /* main.css の .navigation の 80% を打ち消す */
}
.container03--front .nav-row .wp-pagenavi {
  clear: none;
  font-size: 10.8px;
}
.container03--front .wp-pagenavi span {
  border: 0;
  background: transparent;
}
.container03--front .nav-row .nav-total span {
  margin-left: 0;              /* 文字の頭を記事のタイトルの左端にそろえる */
  padding-left: 0;
}

.container03--front .listnavi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;            /* 最後の記事 〜 矢印 ＝ 40px */
  padding-bottom: 2px;
}
.container03--front .listnavi a,
.container03--front .listnavi__none {
  display: flex;
  align-items: center;
  gap: 0.6em;
  color: inherit;
  text-decoration: none;
}
.container03--front .listnavi__none {
  cursor: default;
}
.container03--front .listnavi__next {
  margin-left: auto;
}
.container03--front .listnavi i {
  font-size: 14px;
}
.container03--front .listnavi__label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s ease;
}
.container03--front .listnavi__none:hover .listnavi__label,
.container03--front .listnavi a:hover .listnavi__label,
.container03--front .listnavi a:focus-visible .listnavi__label {
  opacity: 1;
}


/* =====================================================================
   6. 広告（一般の人：.googlead／ログイン中：.type-x の HIDE ADS FOR ADMIN）
   ・中身のない広告の箱は出さない
   ・① 見出し・スライダーの下（.container03-1 の直下）／② ナビの下（.news の中の最後）
   ・広告が入ったとき（AdSense が ins に付ける data-ad-status が unfilled 以外）だけ、一覧の上の広告の上下を 25px にそろえる
     （"filled" のほか、代わりの広告で埋まった "unfill-optimized" もある）
   ・記事ページはアイキャッチのすぐ下に置き、上を 5px にする
   ===================================================================== */

.container03--front .googlead:not(:has(*)) {
  display: none;
}
/* ① 見出し・スライダーの下 */
.container03--front .container03-1 > .type-x,
.container03--front .container03-1 > .googlead {
  margin: 10px 0 0;
}
/* ② ナビの下 */
.container03--front .news > .type-x,
.container03--front .news > .googlead {
  margin: 40px 0 12px;
}

/* 広告が入ったとき：スライダー・見出し →25px→ 広告 →25px→ 一覧の1件目のタイトル */
.container03--front .googlead:has(ins.adsbygoogle[data-ad-status]:not([data-ad-status="unfilled"])) {
  margin-top: 25px;
  margin-bottom: 15px;         /* ＋1件目の内側 10px ＝ 25px */
}
.container03--front .googlead:has(ins.adsbygoogle[data-ad-status]:not([data-ad-status="unfilled"])) + .news {
  padding-top: 0;
}
.container03--front .googlead:has(ins.adsbygoogle[data-ad-status]:not([data-ad-status="unfilled"])) + .news > .postlist02:first-child {
  margin-top: 0;
}
/* 記事ページ：アイキャッチ →5px→ 広告 */
.container03--single .single-eyecatch + .googlead:has(ins.adsbygoogle[data-ad-status]:not([data-ad-status="unfilled"])) {
  margin-top: 5px;
}


/* =====================================================================
   7. トップのスライダー（front-page.php の .nrocks-slider。Swiper 8.4.5）
   ・写真は 4:3・真ん中で切り抜き。文字の重ね方は main.css の Swiper の指定
   ・フェードの時間は functions.php の speed（2500ms）
   ===================================================================== */

.container03--front .nrocks-slider {
  margin: 10px 0 0;
}
.container03--front .nrocks-slider .post__thumb--img {
  margin: 0;
}
.container03--front .nrocks-slider .post__thumb--img a {
  padding-top: 0;              /* main.css の背景画像用の高さ（75%）を打ち消す */
}
.container03--front .nrocks-slider .post__thumb--img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  margin: 0;                   /* main.css の .news img（下10px）を打ち消す */
}
.container03--front .nrocks-slider .swiper-slide {
  transition-timing-function: ease-in-out;   /* ふわっと始まって、ふわっと終わる */
}


/* =====================================================================
   8. 記事ページ（single.php）
   見出し（カテゴリ名_POST）→ タイトル・日付 → アイキャッチ → 広告 → 本文 → NOTICES → SHARE → 前後の矢印 → 広告
   ===================================================================== */

/* 見出しのカテゴリ名はリンク（色は文字と同じ） */
.container03--single .list-head h1.type-46 a {
  color: inherit;
  text-decoration: none;
}
.container03--single .single-head {
  margin-top: 20px;            /* ＋ .news の上 20px ＝ 見出し 〜 タイトル 40px */
}
.container03--single .single-title {
  margin: 0;
  font-family: "M PLUS Rounded 1c";
  font-weight: 400;
}
.container03--single .single-edit {
  margin-left: 0.4em;
}
.container03--single .single-eyecatch {
  margin: 10px 0 0;
}
.container03--single .single-eyecatch img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* 本文：アイキャッチ・広告・本文をひとかたまりに（広告あり：広告 →30px→ 本文／広告なし：アイキャッチ →45px→ 本文） */
.container03--single .news .content {
  padding-top: 10px;
}
.container03--single .content > :last-child {
  margin-bottom: 0;            /* 本文の最後の要素の下の余白は記事によって違うので 0 に */
}

/* NOTICES：本文の最後のひと言のように、本文の最後 →約1行分（20px）→ NOTICES。見出しと説明を横1行に */
.container03--single .notice-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 1.2em;
  margin-top: 10px;            /* ＋本文の箱の下 10px ＝ 20px */
}
.container03--single .notice-row .type-D--notices {
  margin: 0;
}
.container03--single .notice-row .type-J {
  margin: 0;
  padding: 0;
  list-style: none;
}
.container03--single .notice-row .type-J li {
  margin: 0;
  padding: 0;
}

/* SHARE：NOTICES →40px→ SHARE。見出しとリンクを横1行に（間は 1.2em・ベースラインでそろえる）
   ・リンクの書式はフッターの PRIVACY POLICY と同じ（Montserrat・10.8px・700・大文字）。頭に鎖のアイコン */
.container03--single .share-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 1.2em;
  margin-top: 40px;
  padding-bottom: 15px;
}
.container03--single .share-row .type-D--share {
  margin: 0;
}
.container03--single .share-row .sharebtn--text {
  margin: 0;
  padding: 0;
}
.container03--single .sharebtn--text {
  padding-top: 0;
  margin-top: -2px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  text-transform: uppercase;
}
.container03--single .sharebtn--text ul {
  display: flex;               /* inline-block だと改行のぶんの空白が足されるので flex で 1.2em だけにする */
  flex-wrap: wrap;
  gap: 0 1.2em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.container03--single .sharebtn--text ul li {
  margin-left: 0;
  letter-spacing: -0.05em;
}
.container03--single .sharebtn--text a {
  font-family: inherit;
  text-decoration: none;
}
.container03--single .sharebtn--text a::before {
  content: "\f0c1";            /* 鎖（Font Awesome 7 の link） */
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 0.85em;
  margin-right: 0.2em;
  letter-spacing: 0;
}

/* 前後の記事の矢印（.postnavi--arrows）：SHARE →40px→ 矢印
   ・← 新しい記事／→ 古い記事（一覧の並びと同じ向き）。左右の矢印はいつも出す
   ・マウスオンで矢印の横に「記事タイトル　IN ○○」。記事がない側は NO NEWER POSTS／NO OLDER POSTS
   ・ラベルは出るとき 0.3s／消えるとき 1.2s（残像） */
.container03--single .postnavi--arrows {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 22px 0 0;            /* ＋SHARE の行の下 15px ＋矢印の箱の上のすき間 ＝ 40px */
  padding: 0;
}
.container03--single .postnavi--arrows .postnavi__prev,
.container03--single .postnavi--arrows .postnavi__next {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6em;
  color: inherit;
  text-decoration: none;
}
.container03--single .postnavi__prev {
  flex-direction: row-reverse; /* HTML はラベル → 矢印の順なので、左側は矢印を左に */
  justify-content: flex-end;
}
.container03--single .postnavi__next {
  margin-left: auto;
}
.container03--single .postnavi--arrows .postnavi__none {
  cursor: default;
}
.container03--single .postnavi--arrows i {
  font-size: 14px;
  flex-shrink: 0;
}
.container03--single .postnavi__label {
  display: flex;
  align-items: baseline;
  gap: 0.8em;
  width: max-content;
  max-width: 280px;            /* 列の半分弱。左右のラベルが重ならないように */
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.container03--single .postnavi__title {
  min-width: 0;
  font-family: "M PLUS Rounded 1c";
  font-size: 12px;
  white-space: nowrap;         /* 1行。長いときは「…」 */
  overflow: hidden;
  text-overflow: ellipsis;
}
.container03--single .postnavi__none .postnavi__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  color: #bcbcbc;
}
.container03--single .postnavi__scope {
  flex-shrink: 0;
  white-space: nowrap;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  text-transform: uppercase;
  color: #bcbcbc;
}
.container03--single .postnavi--arrows .postnavi__prev:hover .postnavi__label,
.container03--single .postnavi--arrows .postnavi__next:hover .postnavi__label,
.container03--single .postnavi--arrows a:focus-visible .postnavi__label {
  opacity: 1;
  transition-duration: 0.3s;
}

/* 記事ページのトンボの線
   ・写真（アイキャッチと本文の画像ブロック）ごとに右下。説明文があるときは説明文の下
   ・SHARE の見出しの左（記事の終わりの目印） */
@media (min-width: 720px) {
  .container03--single .single-eyecatch,
  .container03--single .content figure.wp-block-image,
  .container03--single .type-D--share {
    position: relative;
  }
  .container03--single .type-D--share::before {
    content: "";
    position: absolute;
    top: 2px;
    left: calc((var(--trim-mark-length) + var(--trim-mark-gap)) * -1);
    width: var(--trim-mark-length);
    border-top: 1px solid var(--trim-mark-color);
    pointer-events: none;
  }
  .container03--single .single-eyecatch::after,
  .container03--single .content figure.wp-block-image::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: calc((var(--trim-mark-length) + var(--trim-mark-gap)) * -1);
    width: var(--trim-mark-length);
    border-bottom: 1px solid var(--trim-mark-color);
    pointer-events: none;
  }
}


/* =====================================================================
   9. 固定ページ（PRIVACY POLICY・PROFILE・CONTACT・標準の page.php。.container03--page）
   ・見出し 〜 本文の最初の行 ＝ 40px（広告があるときは 見出し →10px→ 広告 →40px→ 本文）
   ===================================================================== */

.container03--front.container03--page .news {
  padding-top: 0;
}
.container03--page .news > .type-x:first-child,
.container03--page .news > .googlead:first-child {
  margin: 10px 0 0;
}
.container03--page .news .content {
  padding-top: 33px;
}
.container03--page .news > .content:first-child,
.container03--page .news > .googlead:not(:has(*)) + .content {
  padding-top: 38px;
}

/* PROFILE の CONTACT：ヘッダーのメニューと同じ書式 */
.container03--page .page-contact {
  font-family: Montserrat, sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2em;
  text-transform: uppercase;
}
.container03--page .page-contact a {
  color: inherit;
  text-decoration: none;
}
.container03--page .page-contact a:hover {
  color: #bdc3c7;
}

/* CONTACT のフォーム（Contact Form 7）
   ・項目名：ヘッダーのメニューと同じ書式／入力欄：列の幅いっぱい・下線だけ・本文と同じ 12px
   ・送信ボタン：#eeeeee の箱 ＋ 紙飛行機のアイコン。マウスオン・送信中はグレー
   ・エラーは薄いグレーの文字だけ（赤や色付きの枠にしない） */
.container03--contact .news > .content:first-child {
  padding-top: 45px;           /* 見出し 〜 NAME* ＝ 40px */
}
.container03--contact .wpcf7 ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.container03--contact .wpcf7 ul + ul {
  margin-top: 16px;            /* 項目と項目の間 */
}
.container03--contact .wpcf7 li {
  margin: 0;
  padding: 0;
  width: auto;
  float: none;
}
.container03--contact .wpcf7 li.left {
  font-family: Montserrat, sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2em;
  text-transform: uppercase;
  margin-bottom: 6px;          /* 項目名 〜 入力欄 */
}
.container03--contact .wpcf7 input[type="text"],
.container03--contact .wpcf7 input[type="email"],
.container03--contact .wpcf7 textarea {
  box-sizing: border-box;
  width: 100%;
  height: auto;                /* main.css の高さ 16px を打ち消す */
  padding: 8px 0;              /* 左右 0：入力した文字の頭を項目名にそろえる */
  border: 0;
  border-bottom: 1px solid #000;
  border-radius: 0;
  background: transparent;
  color: #3c3c3b;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  display: block;
}
.container03--contact .wpcf7 textarea {
  height: 180px;
  resize: vertical;
}
.container03--contact .wpcf7 .wpcf7-submit {
  display: block;
  height: auto;                /* main.css の高さ 40px を打ち消す */
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 1.2em;
  color: #3c3c3b;
  font-family: Montserrat, sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
}
.container03--contact .wpcf7 .wpcf7-submit:hover {
  color: #bdc3c7;
}
/* 送信ボタンの箱と紙飛行機（アイコンは li の ::before。クリックは下のボタンに通す） */
.container03--contact .wpcf7 li:has(> .wpcf7-submit) {
  position: relative;
  display: inline-block;
}
.container03--contact .content .wpcf7 .wpcf7-submit {
  padding: 6px 12px 6px 28px;  /* 左はアイコンの分 */
  background: #eeeeee;
}
.container03--contact .wpcf7 li:has(> .wpcf7-submit)::before {
  content: "\f1d8";            /* 紙飛行機（Font Awesome 7 の paper-plane） */
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 10.8px;
  line-height: 1;
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: #3c3c3b;
  pointer-events: none;
}
.container03--contact .wpcf7 li:has(> .wpcf7-submit):hover::before,
.container03--contact .wpcf7 form.submitting li:has(> .wpcf7-submit)::before {
  color: #bdc3c7;
}
/* 送信中の「くるくる」は出さず、SEND EMAIL の文字をグレーにする */
.container03--contact .content .wpcf7 .wpcf7-spinner {
  display: none;
}
.container03--contact .content .wpcf7 form.submitting .wpcf7-submit {
  color: #bdc3c7;
  cursor: default;
}
/* 欄ごとのエラー：下線のすぐ下に左揃え・薄いグレー */
.container03--contact .content .wpcf7 .wpcf7-not-valid-tip {
  position: static;
  display: block;
  width: auto;
  margin-top: 4px;
  color: #bcbcbc;
  font-size: 10.8px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
}
/* 送信後のまとめ表示：SEND EMAIL の下に文字だけ。エラーのときだけ薄いグレー */
.container03--contact .content .wpcf7 form .wpcf7-response-output {
  width: auto;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #3c3c3b;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}
.container03--contact .content .wpcf7 form.invalid .wpcf7-response-output,
.container03--contact .content .wpcf7 form.unaccepted .wpcf7-response-output,
.container03--contact .content .wpcf7 form.failed .wpcf7-response-output,
.container03--contact .content .wpcf7 form.aborted .wpcf7-response-output,
.container03--contact .content .wpcf7 form.spam .wpcf7-response-output {
  color: #bcbcbc;
}


/* =====================================================================
   10. CATEGORIES・ARCHIVES・TAGS の一覧（page-categories.php など。.container03--index）
   ・見出し 〜 一覧 ＝ 40px／最後の行 〜 フッター ＝ 80px
   ・一覧全体を「1つの記事」としてトンボの線ではさむ（左上・右下）
   ===================================================================== */

.container03--index .container03-1 {
  padding-bottom: 10px;
}
.container03--index .index-list {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  line-height: 2em;
  text-transform: uppercase;
}
@media (min-width: 720px) {
  .container03--index .index-list {
    position: relative;
  }
  .container03--index .index-list::before,
  .container03--index .index-list::after {
    content: "";
    position: absolute;
    width: var(--trim-mark-length);
    border-top: 1px solid var(--trim-mark-color);
    pointer-events: none;
  }
  .container03--index .index-list::before {
    top: 8px;                  /* 1行目の大文字の上端 */
    left: calc((var(--trim-mark-length) + var(--trim-mark-gap)) * -1);
  }
  .container03--index .index-list::after {
    bottom: 8px;               /* 最後の行の文字の下端 */
    right: calc((var(--trim-mark-length) + var(--trim-mark-gap)) * -1);
  }
}


/* =====================================================================
   11. ITEMS（商品一覧。page-items.php）：左に商品の写真（60px角）、右に商品名・記事・ショップのリンク
   ===================================================================== */

.container03--items .items-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.container03--items .items-thumb {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container03--items .items-thumb img {
  max-width: 60px;
  max-height: 60px;
  width: auto;
  height: auto;
}
.container03--items .items-row .postlist02-content {
  flex: 1 1 auto;
  min-width: 0;
}
.container03--items .items-row .clear {
  display: none;
}
.container03--items .items-shops {
  margin: 4px 0 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2em;
  text-transform: uppercase;
}
.container03--items .items-shops a {
  color: inherit;
  text-decoration: none;
}
.container03--items .items-shops a + a {
  margin-left: 1.2em;
}
.container03--items .items-shops a:hover {
  color: #bdc3c7;
}
.container03--items .items-pixel {   /* 計測用の1px画像は見えないように */
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}


/* =====================================================================
   12. 404（ヘッダーを出さないので、見出しをページの一番上から 30px に）
   ===================================================================== */

.container03--front.container03--404 .container03-1 {
  margin-top: 35px;
}