@charset "utf-8";

/*
Theme Name: MinimalWP2026 v2
Theme URI: http://minimalwp.com/category/gallery/
Description: Minimal WP公式サイトのテーマです。2026年リニューアル版。
Version: 20260704
Author: Minimal WP
Author URI: http://minimalwp.com
License:
License URI:
Tags: custom-menu
Text Domain: MinimalWP2017
*/


/* *****************************************************************
*	CSS変数（デザイントークン）
* ***************************************************************** */

:root {
  /* 新トークン */
  --ink:            #17191c;
  --text:           #35383c;
  --muted:          #8a8f94;
  --border:         #e7e7e4;
  --bg:             #ffffff;
  --bg-soft:        #f7f7f5;
  --accent:         #378893;
  --accent-dark:    #2c6f78;
  --radius:         14px;
  --radius-sm:      8px;
  --shadow-card:    0 20px 45px -28px rgba(23, 25, 28, 0.28);
  --header-height:  64px;
  --font-sans: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", YuGothic, Meiryo, sans-serif;
  --font-display: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  --font-serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-en: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* 旧トークン（互換用：既存コンテンツ・移植セクションが参照） */
  --color-accent:   #378893;
  --color-text:     #35383c;
  --color-muted:    #8a8f94;
  --color-border:   #e7e7e4;
  --color-bg:       #fff;
  --color-bg-light: #f7f7f5;
  --transition:     0.3s ease;
  --max-width:      960px;
}


/* *****************************************************************
*	基本設定
* ***************************************************************** */

html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-height) + 16px);
}

@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}

body {
font-family: var(--font-sans);
font-weight: 500;
font-size: 16px;
background: var(--bg);
color: var(--text);
line-height: 1.9;
letter-spacing: 0.01em;
word-wrap: break-word;
overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
font-synthesis: none;
}

::selection {
background: var(--accent);
color: #fff;
}

:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}


/* リンク
---------------------------------------------------- */

a {
color: var(--accent);
text-decoration: none;
transition: color var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition);
}

a:hover {
color: var(--accent-dark);
}


/* 画像
---------------------------------------------------- */

img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}


/* ヘルパー
---------------------------------------------------- */

.clear { clear: both; }
.center { text-align: center; }


/* *****************************************************************
*	レイアウト
* ***************************************************************** */

.wrapper {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px 60px 24px;
}

/* トップページ以外はヘッダー下に呼吸する余白を取る */
body:not(.home) .wrapper {
padding-top: 56px;
}

#main {
margin: 0;
padding: 0;
}


/* *****************************************************************
*	ヘッダー
* ***************************************************************** */

#header {
position: sticky;
top: 0;
z-index: 10000;
width: 100%;
background: rgba(255, 255, 255, 0.88);
-webkit-backdrop-filter: saturate(180%) blur(14px);
backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--border);
transition: box-shadow var(--transition);
}

#header.is-scrolled {
box-shadow: 0 10px 30px -18px rgba(23, 25, 28, 0.15);
}

body.admin-bar #header { top: 32px; }
@media screen and (max-width: 782px) {
body.admin-bar #header { top: 46px; }
}

.header-inner {
max-width: 1120px;
margin: 0 auto;
padding: 0 24px;
height: var(--header-height);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}

#header h1 {
margin: 0;
padding: 0;
font-size: inherit;
line-height: 1;
border: none;
}

.logo {
margin: 0;
padding: 0;
line-height: 1;
flex-shrink: 0;
}

.logo a {
display: inline-flex;
align-items: center;
}

.logo img {
width: auto;
height: 30px;
max-width: 240px;
object-fit: contain;
}


/* トップナビゲーション（PC）
---------------------------------------------------- */

#nav {
margin: 0;
padding: 0;
z-index: 9999;
}

#nav ul {
list-style: none;
margin: 0;
padding: 0;
}

.main-navigation {
clear: none;
margin: 0;
position: relative;
}

ul.nav-menu,
div.nav-menu > ul {
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 4px;
}

.nav-menu li {
display: block;
position: relative;
margin: 0;
float: none;
border: none;
}

.nav-menu li a {
color: var(--ink);
display: block;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-decoration: none;
padding: 10px 14px;
border-radius: 999px;
line-height: 1.4;
}

.nav-menu li:hover > a,
.nav-menu li a:hover {
background: var(--bg-soft);
color: var(--ink);
}

.nav-menu .current_page_item > a,
.nav-menu .current_page_ancestor > a,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a,
.nav-menu .current-post-ancestor > a {
color: var(--accent-dark);
background: var(--bg-soft);
}

/* サブメニュー（PCドロップダウン） */
.nav-menu .sub-menu,
.nav-menu .children {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 220px;
padding: 8px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: 0 24px 50px -20px rgba(23, 25, 28, 0.25);
z-index: 99999;
}

.nav-menu .sub-menu ul,
.nav-menu .children ul {
left: 100%;
top: 0;
}

/* 親メニューとドロップダウンの隙間をホバーで橋渡し（PCのみ） */
@media only screen and (min-width: 1025px) {
.nav-menu .sub-menu::before,
.nav-menu .children::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -12px;
height: 12px;
}
}

ul.nav-menu ul a,
.nav-menu ul ul a {
color: var(--text);
margin: 0;
width: auto;
font-weight: 500;
border-radius: 6px;
padding: 9px 12px;
text-align: left;
}

ul.nav-menu ul a:hover,
.nav-menu ul ul a:hover {
background: var(--bg-soft);
color: var(--ink);
}

ul.nav-menu li:hover > ul,
.nav-menu ul li:hover > ul {
display: block;
}


/* ハンバーガーメニュー
---------------------------------------------------- */

.toggle { display: none; }

.menu-toggle {
width: 40px;
height: 40px;
}

.hamburger {
display: none;
width: 44px;
height: 44px;
padding: 0;
background: none;
border: none;
cursor: pointer;
align-items: center;
justify-content: center;
}

.hamburger-box {
position: relative;
display: block;
width: 22px;
height: 16px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
position: absolute;
left: 0;
width: 22px;
height: 2px;
background: var(--ink);
border-radius: 2px;
content: "";
transition: transform 0.3s ease, top 0.3s ease, bottom 0.3s ease, opacity 0.3s ease;
}

.hamburger-inner {
top: 50%;
margin-top: -1px;
}

.hamburger-inner::before { top: -7px; }
.hamburger-inner::after  { bottom: -7px; }

.hamburger.is-active .hamburger-inner {
background: transparent;
}

.hamburger.is-active .hamburger-inner::before {
top: 0;
transform: rotate(45deg);
}

.hamburger.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-45deg);
}


/* *****************************************************************
*	ボタン
* ***************************************************************** */

.btn {
display: inline-block;
padding: 14px 36px;
border-radius: 999px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.08em;
line-height: 1.5;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn-primary {
background: var(--ink);
color: #fff;
border: 1px solid var(--ink);
}

.btn-primary:hover {
background: var(--accent-dark);
border-color: var(--accent-dark);
color: #fff;
transform: translateY(-1px);
}

.btn-ghost {
background: rgba(255, 255, 255, 0.65);
color: var(--ink);
border: 1px solid var(--border);
}

.btn-ghost:hover {
border-color: var(--ink);
color: var(--ink);
}

/* 購入ボタン（緑：価格カードのbt-orderと同色で統一） */
.btn-buy {
background: #10c98d;
color: #fff;
border: 1px solid #10c98d;
}

.btn-buy:hover {
background: #008677;
border-color: #008677;
color: #fff;
transform: translateY(-1px);
}


/* *****************************************************************
*	ヒーロー（トップページ・エディトリアル）
* ***************************************************************** */

.hero {
position: relative;
display: flex;
flex-direction: column;
min-height: min(calc(100vh - var(--header-height)), 960px);
min-height: min(calc(100dvh - var(--header-height)), 960px);
padding: 64px 64px 52px 64px;
overflow: hidden;
background: var(--bg);
}

/* 薄い罫線グリッド */
.hero .grid-lines {
position: absolute;
inset: 0;
pointer-events: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
}

.hero .grid-lines i {
border-left: 1px solid rgba(20, 21, 24, 0.05);
}

.hero .grid-lines i:first-child { border-left: none; }

/* メタ情報行 */
.hero-meta {
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
gap: 24px;
font-family: var(--font-en);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.32em;
color: var(--muted);
margin: 0 0 52px 0;
opacity: 0;
animation: hero-fadein 1s ease 1.5s forwards;
}

/* 特大タイトル */
.hero-title {
position: relative;
z-index: 3;
font-family: var(--font-display);
font-size: clamp(44px, 7.2vw, 104px);
font-weight: 900;
line-height: 1.22;
letter-spacing: 0.02em;
font-feature-settings: "palt";
color: var(--ink);
margin: 0;
padding: 0;
border: none;
}

.hero-title .line {
display: block;
overflow: hidden;
}

.hero-title .line > span {
display: block;
transform: translateY(112%);
animation: hero-rise 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-title .line:nth-child(1) > span { animation-delay: 0.25s; }
.hero-title .line:nth-child(2) > span { animation-delay: 0.42s; }
.hero-title .line:nth-child(3) > span { animation-delay: 0.59s; }

.hero-title .line.sm {
font-size: 0.4em;
font-weight: 700;
letter-spacing: 0.08em;
margin-top: 26px;
color: var(--text);
}

.hero-title em {
font-family: var(--font-serif);
font-style: normal;
font-weight: 600;
color: var(--accent);
}

/* 写真の窓（右上オフセット：メタ行の下から） */
.hero-window {
position: absolute;
top: 128px;
right: 64px;
width: min(34vw, 460px);
aspect-ratio: 4 / 5;
z-index: 1;
margin: 0;
}

.hero-window .mask {
position: absolute;
inset: 0;
overflow: hidden;
clip-path: inset(100% 0 0 0);
animation: hero-unveil 1.3s cubic-bezier(0.65, 0, 0.35, 1) 0.8s forwards;
}

.hero-window img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.08) brightness(1.02);
transform: scale(1.12);
animation: hero-settle 2.6s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards;
}

/* フィルムグレイン（どんな写真でもエディトリアルなトーンに揃える） */
.hero-window .mask::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.16;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
}

.hero-window figcaption {
position: absolute;
left: -14px;
bottom: 8px;
writing-mode: vertical-rl;
font-family: var(--font-en);
font-size: 9px;
letter-spacing: 0.3em;
color: var(--muted);
text-transform: uppercase;
}

/* 下段：リード＋CTA */
.hero-bottom {
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 40px;
margin-top: auto;
padding-top: 64px;
}

.hero-lead {
max-width: 440px;
font-size: 14px;
line-height: 2.2;
color: var(--text);
margin: 0;
padding: 0;
opacity: 0;
transform: translateY(14px);
animation: hero-up 1s cubic-bezier(0.22, 1, 0.36, 1) 1.15s forwards;
}

.hero-cta {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin: 0;
opacity: 0;
transform: translateY(14px);
animation: hero-up 1s cubic-bezier(0.22, 1, 0.36, 1) 1.3s forwards;
}

@keyframes hero-rise { to { transform: translateY(0); } }
@keyframes hero-up { to { opacity: 1; transform: none; } }
@keyframes hero-fadein { to { opacity: 1; } }
@keyframes hero-unveil { to { clip-path: inset(0 0 0 0); } }
@keyframes hero-settle { to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
.hero-meta, .hero-title .line > span, .hero-lead, .hero-cta,
.hero-window .mask, .hero-window img {
animation: none;
opacity: 1;
transform: none;
clip-path: none;
}
}

/* タブレット・スマホ：縦積み */
@media only screen and (max-width: 960px) {
.hero {
min-height: 0;
padding: 48px 24px;
}
.hero-meta { margin-bottom: 40px; flex-wrap: wrap; gap: 8px 24px; }
.hero-title { font-size: clamp(38px, 10.5vw, 64px); }
.hero-title .line.sm { margin-top: 18px; }
.hero-window {
position: relative;
top: auto;
right: auto;
width: 100%;
aspect-ratio: 16 / 10;
margin: 40px 0 8px 0;
}
.hero-bottom {
flex-direction: column;
align-items: flex-start;
margin-top: 0;
padding-top: 24px;
}
}

/* 旧トップヘッダー画像（互換） */
.top-header {
width: 100%;
margin: 0 auto;
text-align: center;
}


/* *****************************************************************
*	トップページ セクション
* ***************************************************************** */

.front-section {
padding: 96px 0 24px 0;
}

/* セクション見出し（左揃えエディトリアル） */
.section-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
text-align: left;
max-width: none;
margin: 0 0 56px 0;
padding: 0 0 20px 0;
border-bottom: 1px solid var(--border);
}

.section-eyebrow {
font-family: var(--font-en);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 14px 0;
padding: 0;
}

.section-title {
font-family: var(--font-display);
font-size: clamp(26px, 3.4vw, 42px);
line-height: 1.4;
font-weight: 900;
letter-spacing: 0.03em;
font-feature-settings: "palt";
color: var(--ink);
margin: 0;
padding: 0;
border: none;
}

.section-meta {
font-family: var(--font-en);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
padding-bottom: 6px;
}

.section-lead {
font-size: 15px;
line-height: 2.1;
color: var(--muted);
margin: 18px 0 0 0;
padding: 0;
}

/* ステートメント（コンセプト） */
.statement {
margin: 0 0 80px 0;
}

.statement p {
font-family: var(--font-display);
font-size: clamp(28px, 4.2vw, 56px);
font-weight: 900;
line-height: 1.7;
letter-spacing: 0.03em;
font-feature-settings: "palt";
color: var(--ink);
margin: 0;
padding: 0;
}

.statement em {
font-family: var(--font-serif);
font-style: normal;
font-weight: 600;
color: var(--accent);
}

/* 固定ページ（About等）のステートメント下は薄いラインで上下を切り替える
   ※トップページ（index.php直書き）の.statementには効かせない */
.page-contents .statement {
border-bottom: 1px solid var(--border);
padding-bottom: 72px;
}

.statement p.statement-note {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
line-height: 2;
letter-spacing: 0.02em;
color: var(--muted);
margin: 24px 0 0 0;
padding: 0;
}

@media only screen and (max-width: 767px) {
.section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
.statement { margin-bottom: 56px; }
.page-contents .statement { padding-bottom: 48px; }
}


/* コンセプト（デザイン・機能・価格）
---------------------------------------------------- */

.philosophy {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
margin: 0;
padding: 0;
}

.philosophy-item {
border-top: 1px solid var(--ink);
padding: 28px 0 0 0;
}

.philosophy-num {
display: block;
font-family: var(--font-en);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.28em;
color: var(--muted);
}

.philosophy-title {
font-size: 20px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--ink);
margin: 14px 0 10px 0;
padding: 0;
border: none;
}

.philosophy-text {
font-size: 14px;
line-height: 2.1;
color: var(--text);
margin: 0;
padding: 0;
}

/* 全幅の締めカード（04 所有のメッセージ用） */
.philosophy-item.philosophy-wide {
grid-column: 1 / -1;
border-top: 1px solid var(--ink);
margin-top: 8px;
}

.philosophy-wide .philosophy-title {
font-size: 24px;
letter-spacing: 0.06em;
font-feature-settings: "palt";
}

.philosophy-wide .philosophy-text {
max-width: 620px;
font-size: 14.5px;
}


/* *****************************************************************
*	記事一覧グリッド（テーマ一覧・アーカイブ）
* ***************************************************************** */

ul.block-two {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 64px 44px;
margin: 0 0 40px 0;
padding: 0;
}

.block-two > li {
float: none;
width: auto;
margin: 0;
min-width: 0;
}

li.item {
min-height: 0;
margin: 0;
list-style: none;
}

.item-img {
position: relative;
margin: 0 0 20px 0;
overflow: hidden;
text-align: center;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--bg-soft);
}

.item-img img {
width: 100%;
height: auto;
}

.img-anime2 img {
transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.7s ease;
}

.img-anime2:hover img {
transform: scale(1.06);
filter: brightness(0.96);
}

/* ホバーで出る矢印ボタン */
.item-img::after {
content: "→";
position: absolute;
right: 16px;
bottom: 16px;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
color: var(--ink);
font-family: var(--font-en);
font-size: 16px;
border-radius: 999px;
box-shadow: 0 10px 26px -10px rgba(23, 25, 28, 0.35);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}

.item:hover .item-img::after {
opacity: 1;
transform: translateY(0);
}

@media (hover: none) {
.item-img::after { display: none; }
}

.item-cat {
font-family: var(--font-en);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.24em;
color: var(--muted);
margin: 0 0 10px 0;
padding: 0;
max-height: none;
overflow: visible;
}

.item-cat a {
color: var(--muted);
}

.item-cat a:hover {
color: var(--accent-dark);
}

.item-date {
font-size: 12px;
color: var(--muted);
margin: 0 0 10px 0;
line-height: 1.5;
}

.item h2,
.item-title {
font-family: var(--font-display);
font-size: 18px;
line-height: 1.6;
font-weight: 700;
letter-spacing: 0.03em;
text-decoration: none;
margin: 0 0 8px 0;
padding: 0;
border: none;
overflow-wrap: anywhere;
}

.item-title a {
color: var(--ink);
}

.item-title a:hover {
color: var(--accent-dark);
}

.item-text {
font-size: 14px;
line-height: 1.9;
color: var(--text);
margin: 0;
padding: 0;
overflow-wrap: anywhere;
}

.item-text a {
color: var(--text);
}

.item-text a:hover {
color: var(--accent-dark);
}


/* *****************************************************************
*	トップワイドコンテンツ（ウィジェット帯）
* ***************************************************************** */

.top-wide-contents {
width: 100%;
margin: 0;
background: var(--bg-soft);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}

.top-wide-contents .widget {
max-width: var(--max-width);
margin: 0 auto;
padding: 56px 24px;
}

.top-wide-contents .textwidget,
.top-wide-contents .textwidget p {
color: var(--text);
line-height: 2;
margin: 0 0 24px 0;
text-align: center;
}

.top-wide-contents .top-widget-title {
font-weight: 700;
margin-bottom: 30px;
padding: 0 0 12px 0;
border-bottom: 1px solid var(--border);
}

.top-wide-contents ul { margin: 0; padding: 0; }

.top-wide-contents li {
margin: 0;
padding: 10px 0;
list-style: none;
border-bottom: 1px solid var(--border);
}

.top-wide-contents li a {
line-height: 1.7;
color: var(--text);
transition: color var(--transition);
}

.top-wide-contents li a:hover { color: var(--accent-dark); }

.top-wide-contents ul.children,
.top-wide-contents ul.sub-menu {
margin-bottom: 0;
display: block;
padding: 5px 0 0 0;
}

.top-wide-contents ul.children li,
.top-wide-contents ul.sub-menu li {
padding-left: 15px;
padding-top: 5px;
border-top: 1px solid var(--border);
border-bottom: none;
}

.top-wide-contents2 {
width: 100%;
background: var(--bg-soft);
padding: 50px 0 20px 0;
margin: 0 auto 50px auto;
}

.top-wide-contents2-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 20px;
}


/* ベストセラーブロック
---------------------------------------------------- */

.bestseller-bloc {
width: 100%;
background: var(--bg-soft);
border-top: 1px solid var(--border);
padding: 56px 0 40px 0;
margin: 0 auto;
}

.bestseller-bloc-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px;
}

.bestseller-bloc-midashi {
font-size: 18px;
font-weight: 700;
letter-spacing: 0.1em;
padding: 0 0 12px 0;
margin: 0 auto 40px auto;
border-bottom: 2px solid var(--ink);
max-width: 250px;
color: var(--ink);
text-align: center;
}


/* *****************************************************************
*	ブログ・固定ページ本文
* ***************************************************************** */

.single-contents,
.page-contents {
margin: 0 0 70px 0;
}

p {
font-size: 16px;
color: var(--text);
line-height: 2;
padding: 13px 0;
}

p a {
color: var(--accent);
text-decoration: underline;
text-decoration-color: rgba(55, 136, 147, 0.35);
text-underline-offset: 4px;
transition: color var(--transition), text-decoration-color var(--transition);
}

p a:hover {
color: var(--accent-dark);
text-decoration-color: var(--accent-dark);
}

p a:active, a:focus {
outline: 0;
}

blockquote {
margin: 24px 0;
padding: 8px 28px;
border-left: 3px solid var(--accent);
background: var(--bg-soft);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
color: var(--text);
}

/* 本文内リスト：行間と項目間にゆとりを持たせる */
.single-contents ul,
.page-contents ul {
margin: 20px 0 28px 1.3em;
padding: 0;
}

.single-contents ol,
.page-contents ol {
margin: 20px 0 28px 1.5em;
padding: 0;
}

.single-contents ul li,
.page-contents ul li,
.single-contents ol li,
.page-contents ol li {
margin: 0 0 12px 0;
line-height: 2;
}

.single-contents ul li::marker,
.page-contents ul li::marker {
color: var(--accent);
}


/* パンくずリスト
---------------------------------------------------- */

.breadcrumb {
margin: 10px 0 0 0;
line-height: 1.4;
}

.breadcrumb div {
display: inline;
font-size: 11px;
letter-spacing: 0.05em;
color: var(--muted);
}

.breadcrumb span,
.breadcrumb span a {
color: var(--accent);
}

.breadcrumb span a:hover {
color: var(--accent-dark);
}

.breadcrumb ol { margin: 0; }
.breadcrumb li { margin: 0; display: inline; }


/* ページタイトル
---------------------------------------------------- */

.pagedate {
font-family: var(--font-en);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-align: left;
padding: 0;
margin: 0 0 2px 0;
color: var(--muted);
}

.pagetitle {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(28px, 4vw, 44px);
line-height: 1.4;
letter-spacing: 0.03em;
font-feature-settings: "palt";
color: var(--ink);
margin: 16px 0 56px 0;
padding: 0 0 24px 0;
border: none;
border-bottom: 1px solid var(--border);
max-width: none;
text-align: left;
position: relative;
}

.pagetitle a { color: var(--ink); }
.pagetitle a:hover { color: var(--accent-dark); }

.pagetitle-single {
font-family: var(--font-en);
color: var(--accent);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.28em;
margin: 0 0 20px 0;
}

.pagetitle-single a { color: var(--accent); }
.pagetitle-single a:hover { color: var(--accent-dark); }

.blog-title {
font-family: var(--font-display);
font-size: clamp(26px, 3.4vw, 36px);
line-height: 1.55;
font-weight: 900;
letter-spacing: 0.03em;
font-feature-settings: "palt";
color: var(--ink);
margin: 10px 0 28px 0;
padding: 0 0 24px 0;
border-top: none;
border-bottom: 1px solid var(--border);
}

.blog-title a { color: var(--ink); }
.blog-title a:hover { color: var(--accent-dark); }


/* 見出し
---------------------------------------------------- */

h1 {
font-family: var(--font-display);
font-size: 24px;
line-height: 1.5;
font-weight: 900;
letter-spacing: 0.03em;
color: var(--ink);
margin: 40px 0 20px 0;
}

h2 {
font-family: var(--font-display);
font-size: 22px;
line-height: 1.5;
font-weight: 700;
letter-spacing: 0.03em;
font-feature-settings: "palt";
color: var(--ink);
margin: 56px 0 24px 0;
padding: 0 0 14px 0;
border-top: none;
border-bottom: 1px solid var(--border);
}

h3 {
font-size: 19px;
line-height: 1.5;
font-weight: 700;
letter-spacing: 0.03em;
color: var(--ink);
padding: 2px 0 2px 14px;
margin: 48px 0 16px 0;
border-bottom: none;
border-left: 3px solid var(--accent);
}

h4 {
font-size: 17px;
line-height: 1.5;
font-weight: 700;
color: var(--text);
padding: 0 0 6px 0;
margin: 36px 0 12px 0;
border-bottom: 1px dotted var(--border);
}

h5 {
font-size: 16px;
line-height: 1.4;
font-weight: 700;
color: var(--text);
margin: 30px 0 0 0;
}

h6 {
font-size: 14px;
line-height: 1.4;
font-weight: 700;
color: var(--muted);
margin: 30px 0 0 0;
}

/* 記事内で使われる装飾見出し（互換） */
.subtitle {}
.subtitle2 {}

.subtitle3 {
font-size: 20px;
line-height: 1.4;
font-weight: 700;
border-top: none;
border-bottom: none;
border-left: 4px solid var(--ink);
padding: 2px 0 2px 10px;
margin: 70px 0 10px 0;
color: var(--ink);
}

.subtitle4 {
font-family: var(--font-display);
font-size: 26px;
line-height: 1.5;
font-weight: 900;
letter-spacing: 0.04em;
font-feature-settings: "palt";
color: var(--ink);
border-top: none;
background: none;
position: relative;
padding: 0 0 18px 0;
margin: 90px 0 28px 0;
border-bottom: 1px solid var(--border);
}

.subtitle4::before {
content: "";
display: block;
width: 32px;
height: 4px;
border-radius: 4px;
background: var(--accent);
margin: 0 0 18px 0;
}

.subtitle4::after {
content: none;
}

.subtitle5 {
font-size: 18px;
font-weight: 700;
color: var(--ink);
border-top: none;
border-bottom: none;
padding: 0.2em;
background: linear-gradient(transparent 68%, rgba(55, 136, 147, 0.18) 68%);
position: relative;
margin: 0 0 25px 0;
}


/* ワンカラムページのイメージヘッダー
---------------------------------------------------- */

.head-img {
width: 100%;
text-align: center;
overflow: hidden;
margin: 0 auto 50px auto;
}

.head-img-theme {
background-color: var(--bg-soft);
}


/* 記事フッター
---------------------------------------------------- */

.blog-foot {
clear: both;
text-align: left;
margin: 0 0 24px 0;
font-weight: normal;
}

.tag-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}

.tag-list a {
display: inline-block;
font-size: 12px;
color: var(--text) !important;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 999px;
padding: 5px 14px;
transition: border-color var(--transition), color var(--transition), transform var(--transition);
}

.tag-list a::before {
content: "#";
color: var(--accent);
margin-right: 2px;
}

.tag-list a:hover {
border-color: var(--ink);
color: var(--ink) !important;
transform: translateY(-1px);
}

.post-author {
margin: 0 0 24px 0;
font-size: 13px;
letter-spacing: 0.03em;
color: var(--muted);
}

.post-author a {
color: var(--text);
}

.post-author a:hover {
color: var(--accent-dark);
}


/* 次の記事・前の記事
---------------------------------------------------- */

#next {
font-size: 90%;
line-height: 1.6;
margin: 50px 0 20px 0;
}

#next ul.block-two {
gap: 16px;
margin: 0;
}

.next-left,
.next-right {
margin: 0;
background: none;
}

.next-left { text-align: left; }
.next-right { text-align: right; }

.next-left a,
.next-right a {
position: relative;
display: block;
height: 100%;
padding: 20px 20px 20px 44px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
transition: border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.next-right a {
padding: 20px 44px 20px 20px;
}

.next-left a::before,
.next-right a::after {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: var(--muted);
font-size: 14px;
}

.next-left a::before {
content: "←";
left: 18px;
}

.next-right a::after {
content: "→";
right: 18px;
}

.next-left a:hover,
.next-right a:hover {
border-color: var(--ink);
color: var(--ink);
transform: translateY(-2px);
box-shadow: 0 12px 24px -16px rgba(23, 25, 28, 0.35);
}


/* ページャー
---------------------------------------------------- */

.pager {
text-align: center;
margin: 50px 0 80px 0;
}

a.page-numbers,
.pager .current {
display: inline-block;
box-sizing: border-box;
min-width: 32px;
font-size: 13px;
line-height: 1.4;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
padding: 6px 8px;
margin: 0 3px;
transition: border-color var(--transition), color var(--transition), transform var(--transition);
}

a.page-numbers:hover {
border-color: var(--ink);
color: var(--ink);
transform: translateY(-1px);
}

.pager .current {
background: var(--ink);
border-color: var(--ink);
color: #fff;
}


/* 関連記事
---------------------------------------------------- */

.similar-head {
color: var(--ink);
font-size: 17px;
font-weight: 700;
letter-spacing: 0.06em;
margin: 0 0 14px 0;
padding: 0 0 10px 0;
border-bottom: 1px solid var(--border);
}

.similar ul { margin: 0; padding: 0; }

.similar li {
margin: 0;
padding: 0;
list-style: none;
}

.similar li a { color: var(--text); }
.similar li a:hover { color: var(--accent-dark); }

table.similar-text {
width: 100%;
color: var(--text);
margin: 0;
padding: 0;
border-bottom: 1px solid var(--border);
border-collapse: collapse;
border-spacing: 0;
}

table.similar-text img {
width: 150px;
border-radius: var(--radius-sm);
}

table.similar-text th {
text-align: left;
width: 150px;
padding: 10px 0;
vertical-align: middle;
}

table.similar-text td {
text-align: left;
white-space: normal;
padding: 10px 0 10px 14px;
vertical-align: middle;
}


/* コメント欄
---------------------------------------------------- */

h3#comments,
.comment-head, .comment-reply-title {
color: var(--ink);
font-size: 17px;
line-height: 1.6;
font-weight: 700;
letter-spacing: 0.06em;
margin: 40px 0 16px 0;
padding: 0 0 10px 0;
border: none;
border-bottom: 1px solid var(--border);
}

.commentlist li {
list-style: none;
font-size: 90%;
color: var(--muted);
}

.commentlist {
margin: 0 0 50px 0;
padding: 0;
}

li.comment {
list-style: none;
font-size: 90%;
color: var(--muted);
margin: 30px 0;
}

.comment p { font-size: 14px; }


/* WP必須
---------------------------------------------------- */

.wp-caption { max-width: 100%; }

.wp-caption-text {
font-size: 90%;
color: var(--muted);
text-align: center;
}

.sticky {}
.gallery-caption {}
.bypostauthor {}

/* Text meant only for screen readers. */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}

.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: #21759b;
display: block;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; /* Above WP toolbar. */
}


/* *****************************************************************
*	サイドバー
* ***************************************************************** */

.sidebar {
width: 100%;
margin: 0 0 40px 0;
padding: 0;
}


/* *****************************************************************
*	ウィジェット
* ***************************************************************** */

.widget {
margin: 0 0 50px 0;
}

.widget ul { margin: 0; padding: 0; }

.widget li { list-style: none; }

.widget li a { color: var(--text); }
.widget li a:hover { color: var(--accent-dark); }

.widget_recent_entries li a,
.widget_archive li a,
.widget_categories li a,
.widget_nav_menu li a {
margin: 0;
}

.textwidget, .textwidget p {
font-size: 14px;
color: var(--text);
line-height: 1.9;
margin: 0;
padding: 0;
}

/* ウィジェット見出し（共通デザイン） */
.widget-title,
.single-widget-title,
.footer-widget-title,
.wp-block-widget-area .wp-block-heading,
.widget_block .wp-block-heading {
color: var(--ink);
font-size: 15px;
font-weight: 700;
letter-spacing: 0.1em;
margin: 0 0 14px 0;
padding: 0 0 10px 0;
border-top: none;
border-bottom: 1px solid var(--border);
position: relative;
}

.widget-title::after,
.single-widget-title::after,
.footer-widget-title::after,
.wp-block-widget-area .wp-block-heading::after,
.widget_block .wp-block-heading::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 28px;
height: 2px;
background: var(--accent);
}

.single-widget-title {
font-size: 16px;
margin: 50px 0 14px 0;
}


/* ウィジェットボックス トップページ用
---------------------------------------------------- */

.topbox { margin: 0; padding: 0; }

.topbox ul { margin: 0; padding: 0; }

.topbox li {
margin: 0;
padding: 9px 0;
list-style: none;
border-bottom: 1px solid var(--border);
}

.topbox li a {
line-height: 1.7;
color: var(--text);
margin: 0;
padding: 0;
transition: color var(--transition);
}

.topbox li a:hover { color: var(--accent-dark); }

.topbox h2 { font-size: 14px; margin: 0; padding: 0; border: none; }
.topbox h3 { font-size: 13px; margin: 0; padding: 0; border: none; }
.topbox h4 { font-size: 12px; margin: 0; padding: 0; border: none; }

.topbox ul.children,
.topbox ul.sub-menu {
margin-bottom: 0;
display: block;
padding: 5px 0 0 0;
}

.topbox ul.children li,
.topbox ul.sub-menu li {
padding-left: 15px;
padding-top: 5px;
border-top: 1px solid var(--border);
border-bottom: none;
}

.top-widget-title {
font-size: 17px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--ink);
padding: 0 0 12px 0;
margin: 0 auto 40px auto;
border-bottom: 1px solid var(--border);
max-width: 300px;
text-align: center;
position: relative;
}

.top-widget-title::after {
content: "";
position: absolute;
left: 50%;
bottom: -1px;
transform: translateX(-50%);
width: 28px;
height: 2px;
background: var(--accent);
}


/* ウィジェットボックス シングルページ用
---------------------------------------------------- */

.singlebox {
margin: 50px 0;
padding: 0;
}

.singlebox ul { margin: 0; padding: 0; }

.singlebox li {
margin: 0;
padding: 9px 0;
list-style: none;
border-bottom: 1px solid var(--border);
}

.singlebox li a {
line-height: 1.7;
color: var(--text);
margin: 0;
padding: 0;
transition: color var(--transition);
}

.singlebox li a:hover { color: var(--accent-dark); }

.singlebox .textwidget,
.singlebox .textwidget p {
font-size: 15px;
color: var(--text);
line-height: 1.9;
margin: 0;
padding: 5px 0;
}

.singlebox ul.children,
.singlebox ul.sub-menu {
margin-bottom: 0;
display: block;
padding: 5px 0 0 0;
}

.singlebox ul.children li,
.singlebox ul.sub-menu li {
padding-left: 15px;
padding-top: 5px;
border-top: 1px solid var(--border);
border-bottom: none;
}


/* ウィジェットボックス サイドバー用
---------------------------------------------------- */

.sidebox { margin: 0; padding: 0; }

.sidebox ul { margin: 0; padding: 0; }

.sidebox li {
margin: 0;
padding: 8px 0;
list-style: none;
border-bottom: 1px solid var(--border);
}

.sidebox li a {
font-size: 14px;
color: var(--text);
margin: 0;
padding: 0;
transition: color var(--transition);
}

.sidebox li a:hover { color: var(--accent-dark); }

.sidebox h2 { font-size: 14px; margin: 0; padding: 0; border: none; }
.sidebox h3 { font-size: 13px; margin: 0; padding: 0; border: none; }
.sidebox h4 { font-size: 12px; margin: 0; padding: 0; border: none; }

.sidebox ul.children,
.sidebox ul.sub-menu {
margin-bottom: 0;
display: block;
padding: 5px 0 0 0;
}

.sidebox ul.children li,
.sidebox ul.sub-menu li {
padding: 5px 0 5px 15px;
border-top: 1px solid var(--border);
border-bottom: none;
}


/* カレンダー
---------------------------------------------------- */

table#wp-calendar { width: 100%; }
table#wp-calendar th { text-align: center; }
table#wp-calendar td { text-align: center; }


/* *****************************************************************
*	検索フォーム
* ***************************************************************** */

.search fieldset {
border: none;
margin: 0;
padding: 0;
display: flex;
gap: 8px;
}

.search input[type="search"],
.search input[type="text"] {
font-size: 14px;
color: var(--text);
flex: 1;
min-width: 0;
padding: 10px 14px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: #fff;
}

.search input[type="search"]:focus,
.search input[type="text"]:focus {
border-color: var(--accent);
outline: none;
}

.search button[type="submit"] {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
padding: 10px 18px;
background: var(--ink);
color: #fff;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
white-space: nowrap;
transition: background var(--transition);
}

.search button[type="submit"]:hover {
background: var(--accent-dark);
}

/* ブロックウィジェット 検索フォーム */
.wp-block-search__inside-wrapper {
display: flex !important;
gap: 8px !important;
}

.wp-block-search__input {
font-size: 14px !important;
padding: 10px 14px !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius-sm) !important;
flex: 1 !important;
min-width: 0 !important;
height: auto !important;
}

.wp-block-search__button,
.wp-block-search .wp-element-button {
font-size: 13px !important;
font-weight: 600 !important;
padding: 10px 18px !important;
background: var(--ink) !important;
color: #fff !important;
border: none !important;
border-radius: var(--radius-sm) !important;
cursor: pointer !important;
white-space: nowrap !important;
line-height: 1.5 !important;
transition: background var(--transition);
}

.wp-block-search__button:hover,
.wp-block-search .wp-element-button:hover {
background: var(--accent-dark) !important;
}


/* *****************************************************************
*	フッター
* ***************************************************************** */

#footer {
background: var(--bg);
border-top: 1px solid var(--border);
clear: both;
width: 100%;
font-size: 14px;
margin: 0 auto;
}

.footer-inner {
margin: 0 auto;
padding: 24px 24px;
max-width: var(--max-width);
}

/* 特大ワードマーク */
.footer-wordmark {
display: block;
font-family: var(--font-en);
font-weight: 700;
font-size: clamp(52px, 9.4vw, 132px);
letter-spacing: -0.045em;
line-height: 1.05;
color: var(--ink);
white-space: nowrap;
padding: 56px 0 40px 0;
border-bottom: 1px solid var(--border);
margin: 0 0 48px 0;
transition: color var(--transition);
}

.footer-wordmark:hover {
color: var(--accent-dark);
}

.footer-brand {
margin: 0 0 40px 0;
}

.footer-logo {
font-size: 20px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--ink);
line-height: 1.4;
}

.footer-logo a { color: var(--ink); }
.footer-logo a:hover { color: var(--accent-dark); }

.footer-tagline {
font-size: 13px;
color: var(--muted);
margin: 4px 0 0 0;
padding: 0;
}

.footerbox .widget {
margin: 0;
padding: 0 0 40px 0;
}

.footerbox { margin: 0; padding: 0; }

.footerbox ul { margin: 0; padding: 0; }

.footerbox li {
margin: 0;
padding: 8px 0;
list-style: none;
border-bottom: none;
}

.footerbox li a {
font-size: 13px;
line-height: 1.7;
color: var(--text);
margin: 0;
padding: 0;
transition: color var(--transition);
}

.footerbox li a:hover { color: var(--accent-dark); }

.footerbox h2 { font-size: 14px; margin: 0; padding: 0; border: none; }
.footerbox h3 { font-size: 13px; margin: 0; padding: 0; border: none; }
.footerbox h4 { font-size: 12px; margin: 0; padding: 0; border: none; }

.footerbox ul.children,
.footerbox ul.sub-menu {
margin-bottom: 0;
display: block;
padding: 5px 0 0 0;
}

.footerbox ul.children li,
.footerbox ul.sub-menu li {
padding-left: 15px;
padding-top: 5px;
border-top: none;
border-bottom: none;
}

.footer-widget-title {
font-size: 13px;
letter-spacing: 0.14em;
}

#copyright {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
max-width: var(--max-width);
font-family: var(--font-en);
font-size: 11px;
letter-spacing: 0.08em;
line-height: 1.6;
color: var(--muted);
text-align: left;
position: relative;
margin: 0 auto;
padding: 20px 24px 28px 24px;
background: var(--bg);
border-top: none;
}

.copyright-meta {
letter-spacing: 0.22em;
font-size: 10px;
}

#copyright a {
color: var(--muted);
}

#copyright a:hover {
color: var(--accent-dark);
}


/* *****************************************************************
*	スクロールリビール
* ***************************************************************** */

.reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
opacity: 1;
transform: none;
}

@media (prefers-reduced-motion: reduce) {
.reveal {
opacity: 1;
transform: none;
transition: none;
}
}

.fade-in-up {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-up.is-visible {
opacity: 1;
transform: translateY(0);
}


/* *****************************************************************
*	レスポンシブ（メディアクエリ）
* ***************************************************************** */


/* PC 画面の横幅が960px以上
---------------------------------------------------- */

@media only screen and (min-width: 960px) {
.sidebar { width: 300px; }
}


/* タブレット以下：ハンバーガーメニュー（1024px以下）
---------------------------------------------------- */

@media only screen and (max-width: 1024px) {

/* ナビゲーション：全画面オーバーレイ
   （#headerのbackdrop-filterがfixedの基準になるため、ヘッダー基準のabsoluteで配置） */
#nav {
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
height: calc(100vh - var(--header-height));
height: calc(100dvh - var(--header-height));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
text-align: left;
width: 100%;
background: #fff;
margin: 0;
padding: 12px 0 40px 0;
/* display:none/blockは切り替え不可なのでopacity+visibility+transformでふんわり開閉する */
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

#nav.nav-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
#nav { transition: opacity 0.01s linear, visibility 0.01s linear; transform: none; }
#nav.nav-open { transition: opacity 0.01s linear, visibility 0.01s linear; }
}

ul.nav-menu,
div.nav-menu > ul {
display: block;
}

.nav-menu li {
display: block;
float: none;
position: relative;
border-bottom: 1px solid var(--border);
}

.nav-menu li a {
color: var(--ink);
display: block;
font-size: 15px;
font-weight: 600;
padding: 18px 56px 18px 24px;
border-radius: 0;
}

.nav-menu li:hover > a,
.nav-menu li a:hover {
background: var(--bg-soft);
}

/* タップがhoverを発火するため、ドロップダウンを無効化 */
#nav ul.nav-menu li:hover > ul,
#nav .nav-menu ul li:hover > ul { display: none; }

/* このテーマのサブメニューはposition:staticでその場に積み上がるアコーディオン
   なので、常時display:blockにする他テーマの方式（要素は消えても場所は取らない
   前提）だと閉じている時も空白ができてしまう。代わりにmax-height+opacityで
   ふんわり開閉する（display:noneはtransitionできないため、閉時もdisplay:block
   のままmax-height:0で畳む） */
.nav-menu .sub-menu,
.nav-menu .children {
display: block;
position: static;
min-width: 0;
padding: 0;
border: none;
border-radius: 0;
box-shadow: none;
background: var(--bg-soft);
max-height: 0;
opacity: 0;
overflow: hidden;
pointer-events: none;
transition: max-height 0.25s ease, opacity 0.2s ease;
}

/* トグルで開いた場合のみ表示 */
#nav .nav-menu .sub-menu.sub-menu-open,
#nav .nav-menu .children.sub-menu-open {
display: block;
max-height: 600px;
opacity: 1;
pointer-events: auto;
transition: max-height 0.3s ease, opacity 0.25s ease 0.05s;
}

@media (prefers-reduced-motion: reduce) {
.nav-menu .sub-menu,
.nav-menu .children,
#nav .nav-menu .sub-menu.sub-menu-open,
#nav .nav-menu .children.sub-menu-open {
transition: opacity 0.01s linear;
}
}

#nav .nav-menu .sub-menu li,
#nav .nav-menu .children li { text-align: left; }

#nav .nav-menu .sub-menu li a,
#nav .nav-menu .children li a { padding: 18px 24px 18px 40px; font-weight: 500; }

.toggle { display: block; flex-shrink: 0; }

.hamburger { display: inline-flex; }

body.nav-locked { overflow: hidden; }
}


/* Mobile (Portrait) 画面の横幅が767px以下
---------------------------------------------------- */

@media only screen and (max-width: 767px) {

:root { --header-height: 56px; }

.wrapper { width: auto; padding: 0 20px 50px 20px; }

body:not(.home) .wrapper { padding-top: 36px; }

.header-inner { padding: 0 12px 0 20px; }

.logo img { height: 24px; max-width: 190px; }

/* ヒーロー */
.hero-cta .btn { width: 100%; max-width: 320px; text-align: center; }

.front-section { padding: 64px 0 16px 0; }
.section-head { margin-bottom: 40px; }

.philosophy {
grid-template-columns: 1fr;
gap: 32px;
}

/* 一覧グリッド */
ul.block-two {
grid-template-columns: minmax(0, 1fr);
gap: 48px;
}

#next ul.block-two { gap: 12px; }

#main { padding: 0; }

table.similar-text img { width: 100px; }
table.similar-text th { width: 100px; }

p { font-size: 15px; }

/* ページャー：モバイルは1列に収まるミニサイズ */
.pager { margin: 60px 0 80px 0; }

a.page-numbers,
.pager .current {
min-width: 27px;
padding: 4px 4px;
margin: 0 1px 6px 1px;
font-size: 12px;
border-radius: 6px;
}

.mobile-display-none { display: none; }

.single-contents br { display: none; }
.single-contents { margin: 0 0 100px 0; }
.page-contents { margin: 0 0 100px 0; }

li.item { min-height: auto; margin: 0; }

.midashi-top { font-size: 26px; font-weight: bold; line-height: 150%; margin: -20px 0 30px 0; }
.indent { margin: 0 0 50px 0; }
.theme-info { padding: 0 15px; }
.theme-info2 { padding: 0 15px 15px 15px; }
.theme-h2 { font-size: 24px; }
.theme-h2 br { display: none; }
.subtitle4 { font-size: 22px; padding: 0 0 14px 0; margin-top: 70px; }
}


/* *****************************************************************
*	トップに戻るボタン
* ***************************************************************** */

#topcontrol {
position: fixed;
bottom: 32px;
right: 20px;
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid var(--border);
color: var(--ink);
border-radius: 999px;
box-shadow: 0 12px 30px -14px rgba(23, 25, 28, 0.3);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity var(--transition), border-color var(--transition), transform var(--transition);
z-index: 9999;
font-size: 16px;
}

#topcontrol:hover {
border-color: var(--ink);
transform: translateY(-2px);
}


/* *****************************************************************
*	SPサブメニュートグルボタン
* ***************************************************************** */

.sub-menu-toggle {
display: none;
}

@media screen and (max-width: 1024px) {
.sub-menu-toggle {
display: block;
position: absolute;
right: 0;
top: 0;
width: 56px;
height: 58px;
background: none;
border: none;
cursor: pointer;
font-size: 10px;
color: var(--muted);
}
.sub-menu-toggle:hover {
background: rgba(0, 0, 0, 0.04);
}
}


/* *****************************************************************
*	コンテンツ互換レイヤー（既存記事・LP用クラス）
* ***************************************************************** */

/* 新着表示
---------------------------------------------------- */

.sidebox-new {
color:#666;
margin: 0 0 50px 0 ;
padding: 0 0 0 0 ;
}

.sidebox-new ul{
margin: 0 0 0 0;
padding: 0 0 0 0;
}

.sidebox-new li{
list-style: none;
margin: 0 0 0 0;
padding: 0px 0 0px 0px;
border-bottom: 1px dotted #ddd;
}

.sidebox-new li a{
font-size: 14px;
color:#666;
list-style: none;
transition: 0.5s;
}

.sidebox-new li a:hover{
color:#999;
}


table.similar-side {
width: 100%;
color: #444;
margin: 0 0 0 0;
padding: 0 0 0 0;
border-collapse: collapse;
border-spacing: 0;
}

table.similar-side img {
width: 80px;
}

table.similar-side th {
text-align: left;
width: 80px;
vertical-align: middle;
}

table.similar-side td {
text-align: left;
white-space: normal;
vertical-align: middle;
}



/* *****************************************************************
*	レスポンシブテーブル
* ***************************************************************** */

.responsive-tabel-01 table { 
width: 100%; 
}

.responsive-tabel-01 {
margin: 20px 0;
}

.responsive-tabel-01 th {
width: 30%;
font-size: 20px;
text-align: left;
background: var(--bg-soft);
padding: 20px;
border: 1px solid var(--border);
vertical-align: middle;
}

.responsive-tabel-01 td {
font-size: 20px;
text-align: left;
padding: 20px;
border: 1px solid var(--border);
vertical-align: middle;
}


@media only screen and (max-width:480px){
.responsive-tabel-01 { margin: 20px -10px; }
.responsive-tabel-01 th,
.responsive-tabel-01 td { width: 100%; display: block; border-top: none; }
.responsive-tabel-01 tr:first-child th   { border-top: 1px solid #ddd; }
}



/* *****************************************************************
*	Minimal WPテーマ用
* ***************************************************************** */

.indent {
margin: 0 10% 50px 10%;
}

/* スマホではインデント解除（このルールはメディアクエリ節より後に読まれるため、ここで打ち消す） */
@media only screen and (max-width: 767px) {
.indent {
margin: 0 0 50px 0;
}
}


.theme-h2 {
font-family: var(--font-serif);
font-size: 28px;
font-weight: 600;
line-height: 170%;
letter-spacing: 0.06em;
text-align: center;
color: var(--ink);
margin: 40px 0px 60px 0px;
padding: 18px 0px 15px 0px;
border-bottom: 1px solid var(--ink);
border-top: 1px solid var(--ink);
}

.bt-1 a {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.1em;
color: var(--text);
background: var(--bg-soft);
display: block;
text-align: center;
margin: 20px 0 20px 0;
padding: 18px 20px;
border: 1px solid var(--border);
border-radius: 999px;
transition: border-color var(--transition), color var(--transition);
}

.bt-1 a:hover {
color: var(--ink);
background: var(--bg-soft);
border-color: var(--ink);
text-decoration: none;
}

.kakoi-pricehead {
margin: 0px 0px -1px 0px;
padding: 25px 30px 20px 30px;
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: 14px 14px 0 0;
}

.kakoi-pricehead-option {
margin: 0px 0px -1px 0px;
padding: 15px 30px 10px 30px;
background: var(--bg-soft);
border: 1px solid var(--border);
}

.theme-info {
margin: 0px 0px 20px 0px;
padding: 0px 40px 50px 40px;
border: 1px solid var(--border);
border-radius: 14px;
}

.theme-info2 {
margin: 40px 0px 50px 0px;
padding: 0px 35px 45px 35px;
border: 1px dashed var(--border);
border-radius: 14px;
}

.theme-info2 p {
font-size: 13px;
}

.theme-info-faq {
margin: 0px 0px 20px 0px;
padding: 30px 40px 30px 40px;
border: 1px solid var(--border);
border-radius: 14px;
}

.accordion_head {
cursor:pointer;
}

.faq {
margin: 10px 0px 20px 0px;
padding: 0px 19px 20px 19px;
border: 1px solid var(--border);
border-radius: 12px;
}


.bt-themeselect a {
font-size: 18px;
font-weight: 600;
letter-spacing: 0.1em;
color: #fff;
background: #D8C694;
display: block;
text-align: center;
margin: 20px 0 20px 0;
padding: 28px 30px;
border: none;
border-radius: 999px;
transition: background var(--transition);
}

.bt-themeselect a:hover {
color: #fff;
background: #baa775;
text-decoration: none;
}


.bt-themeselect2 a {
font-size: 18px;
font-weight: 600;
letter-spacing: 0.1em;
color: #fff;
background: #4CBE9F;
display: block;
text-align: center;
margin: 20px 0 20px 0;
padding: 28px 30px;
border: none;
border-radius: 999px;
transition: background var(--transition);
}

.bt-themeselect2 a:hover {
color: #fff;
background: #2aaf8b;
text-decoration: none;
}




.button-demo {
display: inline-block;
height: 70px;
font-size: 21px;
text-align: center;
text-decoration: none;
line-height: 70px;
letter-spacing: 0.3em;
outline: none;
background-color: #536a96;
color: #fff;
margin: 30px 10px 10px 10px;
padding: 0px 32px;
border-radius: 999px;
}

.button-demo::before,
.button-demo::after {
position: absolute;
z-index: -1;
display: block;
content: '';
}

.button-demo,
.button-demo::before,
.button-demo::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}

.button-demo:hover {
color: #fff;
background-color: #6e84ae;
}

.button-demo2 {
display: inline-block;
height: 70px;
font-size: 21px;
text-align: center;
text-decoration: none;
line-height: 70px;
letter-spacing: 0.1em;
outline: none;
background-color: #ee852d;
color: #fff;
margin: 30px 10px 10px 10px;
padding: 0 32px;
border-radius: 999px;
}

.button-demo2::before,
.button-demo2::after {
position: absolute;
z-index: -1;
display: block;
content: '';
}

.button-demo2,
.button-demo2::before,
.button-demo2::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}

.button-demo2:hover {
color: #fff;
background-color: #f2a05c;
}


.btn_cart {
width: 300px;
height: auto;
line-height: 60px;
border-radius: 999px;
margin: 0 auto;
background-color: #0076d7;
font-size: 15.5px;
color: #ffffff;
letter-spacing: 0.05em;
cursor: pointer;
transition: background-color ease .2s;
display: inline-block;
border: none;
padding: 0;
text-align: center;
text-decoration: none;
}
.btn_cart a {
color: #ffffff;
}
.btn_cart:hover {
background-color: #005ad9;
}



.bt-dl a {
font-size: 13px;
letter-spacing: .1em;
color: #fff;
background: #94d8c6;
text-align: center;
margin: 10px 0;
padding: 10px;
border-radius: 999px;
}



.kakoi {
border: 1px solid var(--border);
border-radius: 12px;
padding: 28px 30px;
}

.kakoi2 {
border: 1px dashed var(--border);
border-radius: 12px;
padding: 20px 30px;
margin: 30px 0;
}

.keiko {
background: linear-gradient(transparent 62%, rgba(55, 136, 147, 0.18) 62%);
}

/* CTA 
---------------------------------------------------- */

.cta-minimal {
padding: 0px 24px 14px 24px;
margin: 0 0 20px 0;
border: 1px solid var(--border);
border-top: none;
border-radius: 0 0 14px 14px;
background: var(--bg-soft);
}

.cta-title {
font-family: inherit;
margin: 40px 0 0 0;
padding: 18px 20px;
font-size: 18px;
text-align: center;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1.5;
color: #fff;
border: none;
border-radius: 14px 14px 0 0;
background: var(--ink);
}

.bt-order a {
font-size: 15px;
font-weight: 600;
letter-spacing: 0.06em;
color: #fff;
display: block;
text-align: center;
background-color: #10c98d;
margin: 20px 0;
padding: 16px 15px;
border-radius: 999px;
transition: background var(--transition), transform var(--transition);
}

.bt-order a:hover {
color:#fff;
background: #008677;
text-decoration:none;
transition: 0.5s;
}


/* テーブル */

table#flow {
width: 100%;
margin: 0 0 0 0;
padding: 0 0 0 0;
border: 0px #CCC solid;
border-collapse: collapse;
border-spacing: 0;
}

table#flow th {
font-size: 15px;
font-weight: bold;
text-align: left;
padding: 14px 0px 12px 0px;
border: none;
border-bottom: 1px solid var(--border);
white-space: normal;
vertical-align: middle;
}

table#flow td {
font-size: 15px;
text-align: left;
padding: 14px 0px 12px 10px;
border-bottom: 1px solid var(--border);
white-space: normal;
vertical-align: middle;
}


.marumaru {
position: relative;
padding: 0 .5em .5em 2em;
}
.marumaru::before,
.marumaru::after {
position: absolute;
content: '';
border-radius: 100%
}
.marumaru::before {
top: .2em;
left: .2em;
z-index: 2;
width: 18px;
height: 18px;
background: rgba(150, 150, 150, .5);
}
.marumaru::after {
top: .7em;
left: .7em;
width: 13px;
height: 13px;
background: rgba(210, 210, 210, .5);
}

.midashi-top {
font-size: 34px;
font-weight: bold;
line-height: 170%;
margin: -20px 0 30px 0; 
}


/* Gumroad決済用 */

.gumroad-product-embed {
	text-align:center;
	font-size: 30px;
	padding: 30px 0;
}




/* *****************************************************************
*   レスポンシブ（外部サービス対策用）
* ***************************************************************** */

/* Twitter Timeline
---------------------------------------------------- */

.twitter-timeline { 
width:100%; 
height: 300px; 
}





/* YouTube embed
---------------------------------------------------- */

.youtube {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin-top: 20px;
margin-bottom: 20px;
}
.youtube iframe,
.youtube object,
.youtube embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}




/* *****************************************************************
*	商品ページ（テーマ販売LP）v2
* ***************************************************************** */

.product-head {
text-align: center;
padding: 8px 0 64px 0;
}

.product-eyebrow {
font-family: var(--font-en);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.36em;
color: var(--accent);
margin: 0 0 24px 0;
padding: 0;
}

.product-title {
font-family: "Inter", "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
font-size: clamp(40px, 6.6vw, 84px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
font-feature-settings: "palt";
color: var(--ink);
margin: 0;
padding: 0;
border: none;
text-align: center;
max-width: none;
}

.product-cat {
margin: 22px 0 0 0;
font-family: var(--font-en);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--muted);
}

.product-cat a { color: var(--muted); }
.product-cat a:hover { color: var(--accent-dark); }

.product-head::after {
content: "";
display: block;
width: 32px;
height: 3px;
border-radius: 3px;
background: var(--accent);
margin: 36px auto 0 auto;
}

/* 他のテーマ（ベストセラー帯）：エディトリアルなセクションに */
.bestseller-bloc {
background: var(--bg);
border-top: 1px solid var(--border);
padding: 72px 0 40px 0;
margin: 40px auto 0 auto;
}

.bestseller-bloc-inner {
max-width: none;
padding: 0;
}

@media only screen and (max-width: 767px) {
.product-head { padding: 0 0 48px 0; }
.product-cat { margin-top: 16px; }
.bestseller-bloc { padding: 56px 0 24px 0; }
}


/* *****************************************************************
*	販売LP本文用コンポーネント v2
*	（投稿本文にコピペして使う想定のクラス群）
* ***************************************************************** */

/* セクションラベル＋見出し（中央） */
.lp-label {
font-family: var(--font-en);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--accent);
text-align: center;
margin: 104px 0 16px 0;
padding: 0;
}

.lp-heading {
font-family: var(--font-display);
font-size: clamp(24px, 3.2vw, 38px);
font-weight: 900;
line-height: 1.5;
letter-spacing: 0.04em;
font-feature-settings: "palt";
color: var(--ink);
text-align: center;
margin: 0 0 48px 0;
padding: 0;
border: none;
}

/* 導入文（中央大きめ） */
.lp-intro {
font-size: 16px;
line-height: 2.3;
color: var(--text);
text-align: center;
max-width: 640px;
margin: 0 auto;
padding: 8px 0 24px 0;
}

/* スクリーンショットギャラリー */
.lp-gallery {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px 24px;
margin: 24px 0 40px 0;
padding: 0;
}

/* どんな縦横比のスクショでも、淡い背景の正方形フレームに自動で収める */
.lp-gallery figure {
margin: 0;
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: 12px;
padding: 28px 28px 20px 28px;
}

.lp-gallery img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: contain;
border: none;
border-radius: 0;
filter: drop-shadow(0 16px 26px rgba(23, 25, 28, 0.16));
}

.lp-gallery figcaption {
font-size: 12px;
letter-spacing: 0.06em;
color: var(--muted);
margin-top: 16px;
text-align: center;
}

/* 価格カード */
.price-card {
max-width: 520px;
margin: 40px auto 48px auto;
border: 1px solid var(--border);
border-radius: 16px;
padding: 44px 44px 36px 44px;
text-align: center;
background: #fff;
box-shadow: 0 30px 60px -45px rgba(23, 25, 28, 0.35);
}

.price-card .price-plan {
font-family: var(--font-en);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 12px 0;
padding: 0;
}

.price-card .price-num {
font-family: var(--font-en);
font-size: 52px;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.2;
color: var(--ink);
margin: 0;
padding: 0;
}

.price-card .price-note {
font-size: 12px;
color: var(--muted);
margin: 12px 0 0 0;
padding: 0;
}

.price-card ul {
list-style: none;
margin: 28px 0 8px 0;
padding: 0;
text-align: left;
}

.price-card ul li {
position: relative;
margin: 0;
padding: 13px 0 13px 30px;
font-size: 14px;
line-height: 1.8;
border-bottom: 1px solid var(--border);
list-style: none;
}

.price-card ul li:last-child { border-bottom: none; }

.price-card ul li::before {
content: "✓";
position: absolute;
left: 2px;
top: 13px;
color: var(--accent);
font-weight: 700;
}

.price-card .bt-order a { margin: 20px 0 4px 0; }

/* FAQ（JS不要のdetails/summary） */
.lp-faq {
max-width: 720px;
margin: 0 auto 48px auto;
border-top: 1px solid var(--border);
}

.lp-faq details {
border-bottom: 1px solid var(--border);
}

.lp-faq summary {
cursor: pointer;
list-style: none;
position: relative;
padding: 22px 44px 22px 0;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.03em;
color: var(--ink);
transition: color var(--transition);
}

.lp-faq summary::-webkit-details-marker { display: none; }

.lp-faq summary:hover { color: var(--accent-dark); }

.lp-faq summary::after {
content: "＋";
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
font-weight: 400;
color: var(--accent);
transition: transform var(--transition);
}

.lp-faq details[open] summary::after {
content: "－";
}

.lp-faq .faq-a {
padding: 0 0 26px 0;
font-size: 14px;
line-height: 2.1;
color: var(--text);
}

.lp-faq .faq-a p { font-size: 14px; padding: 0 0 10px 0; }

/* 締めCTA */
.lp-cta {
text-align: center;
margin: 96px 0 24px 0;
padding: 72px 24px;
border-top: 1px solid var(--ink);
border-bottom: 1px solid var(--border);
}

.lp-cta .lp-cta-title {
font-family: var(--font-display);
font-size: clamp(26px, 3.6vw, 44px);
font-weight: 900;
line-height: 1.6;
letter-spacing: 0.04em;
font-feature-settings: "palt";
color: var(--ink);
margin: 0 0 12px 0;
padding: 0;
border: none;
}

.lp-cta .lp-cta-title em {
font-family: var(--font-serif);
font-style: normal;
font-weight: 600;
color: var(--accent);
}

.lp-cta .lp-cta-note {
display: block;
font-size: 13px;
color: var(--muted);
margin: 0 0 36px 0;
padding: 0;
}

/* wpautopが<p>で包んでもボタンが横並び・下線なしを保つ */
.lp-cta p { display: inline; margin: 0; padding: 0; }
.lp-cta .lp-cta-title { display: block; }
.lp-cta br { display: none; }
.lp-cta .lp-cta-title br { display: inline; }
.lp-cta a { text-decoration: none; }
.lp-cta .btn { margin: 0 7px 14px 7px; }

.lp-demo p { margin: 0; padding: 0; }
.lp-demo a { text-decoration: none; }

@media only screen and (max-width: 767px) {
.lp-label { margin-top: 72px; }
.lp-gallery { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.price-card { padding: 36px 24px 28px 24px; }
.lp-cta { padding: 56px 16px; margin-top: 72px; }
.lp-cta .btn { display: block; margin: 0 auto 12px auto; max-width: 320px; }
}


/* *****************************************************************
*	販売LP：使い方ステップ＆大型デモボタン v2
* ***************************************************************** */

/* 大きめボタン（デモ誘導用） */
.btn-lg {
padding: 19px 60px;
font-size: 16px;
}

/* デモ誘導ブロック */
.lp-demo {
text-align: center;
margin: 8px 0 16px 0;
}

.lp-demo .lp-demo-note {
font-size: 12px;
color: var(--muted);
margin: 16px 0 0 0;
padding: 0;
}

/* 使い方3ステップ */
.lp-steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 44px;
margin: 0 0 32px 0;
padding: 0;
}

.lp-step {
border-top: 1px solid var(--ink);
padding: 24px 0 0 0;
}

.lp-step-num {
display: block;
font-family: var(--font-en);
font-size: 44px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1;
color: var(--accent);
margin: 0 0 16px 0;
}

.lp-step-title {
font-family: var(--font-display);
font-size: 17px;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--ink);
margin: 0 0 10px 0;
padding: 0;
border: none;
}

.lp-step-text {
font-size: 13.5px;
line-height: 2.1;
color: var(--text);
margin: 0;
padding: 0;
}

@media only screen and (max-width: 767px) {
.lp-steps { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.btn-lg { padding: 17px 40px; font-size: 15px; }
}


/* *****************************************************************
*	本文内画像のリズム統一 v2
*	ブロックエディタ（figure.wp-block-image）とクラシックエディタ
*	（<p><img></p>）のどちらで書いても・途中で変換しても、
*	写真の上下に同じ余白がつくように吸収する
* ***************************************************************** */

.single-contents figure.wp-block-image,
.page-contents figure.wp-block-image {
margin: 24px 0;
}

.single-contents figure.wp-block-image figcaption,
.page-contents figure.wp-block-image figcaption {
font-size: 12px;
color: var(--muted);
text-align: center;
margin-top: 12px;
}

/* クラシックエディタ：画像だけの段落に同じ余白（:has対応ブラウザ） */
.single-contents p:has(> img:first-child:last-child),
.page-contents p:has(> img:first-child:last-child),
.single-contents p:has(> a:first-child:last-child > img),
.page-contents p:has(> a:first-child:last-child > img) {
padding: 24px 0;
}

/* 本文写真は角丸で統一（v2の写真言語に合わせる） */
.single-contents figure.wp-block-image img,
.page-contents figure.wp-block-image img,
.single-contents p > img,
.page-contents p > img,
.single-contents p > a > img,
.page-contents p > a > img {
border-radius: 10px;
height: auto;
}


/* *****************************************************************
*	Aboutページ用コンポーネント v2
* ***************************************************************** */

/* 実績数字の帯 */
.stats-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
border-top: 1px solid var(--ink);
border-bottom: 1px solid var(--border);
padding: 40px 0;
margin: 0 0 24px 0;
}

.stat { text-align: center; }

.stat .stat-num {
display: block;
font-family: var(--font-en);
font-size: clamp(28px, 3.4vw, 44px);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.2;
color: var(--ink);
}

.stat .stat-label {
display: block;
font-family: var(--font-en);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.24em;
color: var(--muted);
margin-top: 8px;
}

.stat .stat-note {
display: block;
font-size: 11px;
color: var(--muted);
margin-top: 4px;
}

/* プロフィール（写真＋テキスト2カラム） */
.profile {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: 48px;
align-items: start;
margin: 0 0 24px 0;
}

.profile-photo {
aspect-ratio: 1 / 1;
border-radius: 14px;
overflow: hidden;
background: var(--bg-soft);
border: 1px solid var(--border);
margin: 0;
}

.profile-photo img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.05);
border-radius: 0;
}

.profile-name {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--ink);
margin: 0 0 6px 0;
padding: 0;
border: none;
}

.profile-role {
font-family: var(--font-en);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.24em;
color: var(--muted);
margin: 0 0 18px 0;
padding: 0;
}

.profile-text {
font-size: 14px;
line-height: 2.1;
color: var(--text);
margin: 0;
padding: 0;
}

/* 本人の肉声引用（人格を残す1箇所） */
.profile-quote {
margin: 24px 0 0 0;
padding: 22px 26px;
background: var(--bg-soft);
border-left: 3px solid var(--accent);
border-radius: 0 12px 12px 0;
font-size: 13.5px;
line-height: 2.1;
color: var(--text);
}

.profile-quote p { font-size: 13.5px; padding: 0; margin: 0; }

@media only screen and (max-width: 767px) {
.stats-row { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 32px 0; }
.profile { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.profile-photo { max-width: 320px; }
}

/* カードのサムネイルは3:2に統一して表示する
   （アイキャッチ有り＝サーバー側クロップと、noimage画像=630x420の比率差を吸収。
   旧サイズ（463x327）で生成済みのサムネイルも再生成なしで3:2表示になる） */
.item-img img {
aspect-ratio: 3 / 2;
object-fit: cover;
}

/* 空のウィジェットエリアの箱は余白ごと非表示にする
   （ウィジェット未設定のエリアが余計な隙間として残らないように） */
.topbox:not(:has(*)),
.singlebox:not(:has(*)),
.sidebox:not(:has(*)),
.footerbox:not(:has(*)) {
display: none;
}

/* 全幅ウィジェット帯（.top-wide-contents）は、見えるコンテンツが無ければ帯ごと非表示にする
   （空のとき上下ヘアラインだけが線として残るのを防ぐ。空の「グループ」ブロックのような
   divだけで中身の無いウィジェットにも効くよう「コンテンツ要素が1つも無い」で判定する） */
.top-wide-contents:not(:has(p, img, h1, h2, h3, h4, h5, h6, ul, ol, li, a, figure, iframe, video, audio, blockquote, table, form, button, hr, span)) {
display: none;
}

/* 空のウィジェット箱と構造用の枠しか入っていない行は、行ごと非表示にする
   （空行のクリアフィックスが前後のマージン相殺を妨げて余白が二重になるのを防ぐ。
   記事やウィジェット本体など、リスト外の要素が1つでもあれば行はそのまま表示される） */
.row:not(:has(*:not(.topbox):not(.singlebox):not(.footerbox):not(.sidebox):not(.half):not(.third):not(.clear))) {
display: none;
}

/* ウィジェット文字サイズの「ゾーン制」（配布13テーマと同じ3段構成）
   16px本文帯＝トップ・記事まわり（.topbox/.top-wide-contents/.singlebox）
   14pxパーツ帯＝サイド・フッター（.sidebox/.footerbox）の段落・リスト */
.widget_block p {
font-size: 14px;
}
.widget li a {
font-size: 14px;
}
.topbox .textwidget, .topbox .textwidget p, .topbox .widget_block p,
.top-wide-contents .textwidget, .top-wide-contents .textwidget p, .top-wide-contents .widget_block p,
.singlebox .textwidget, .singlebox .textwidget p, .singlebox .widget_block p {
font-size: 16px;
}
.topbox li a,
.top-wide-contents li a,
.singlebox li a {
font-size: 16px;
}

/* タグクラウドウィジェット：記事下のタグと同じ白地ピル（こちらは#なし）。
   WPがfont-sizeをインライン出力するため!importantで12px固定。
   ブロック版（.wp-block-tag-cloud）はp要素で出力され本文リンクの下線を継承するので明示的に打ち消す */
.widget_tag_cloud a,
.wp-block-tag-cloud a {
display: inline-block;
font-size: 12px !important;
color: var(--text);
background: var(--bg);
border: 1px solid var(--border);
border-radius: 999px;
padding: 5px 14px;
margin: 0 4px 8px 0;
text-decoration: none;
transition: border-color var(--transition), color var(--transition), transform var(--transition);
}
.widget_tag_cloud a:hover,
.wp-block-tag-cloud a:hover {
border-color: var(--ink);
color: var(--ink);
transform: translateY(-1px);
}

/* LPの「押さえどころ」チェックリスト（機能を盛らずに期待と安心感を出す羅列。
   価格カードのチェックリストと同じデザイン言語） */
ul.lp-points {
list-style: none;
max-width: 780px;
margin: 0 auto;
padding: 0;
text-align: left;
}
ul.lp-points li {
position: relative;
margin: 0;
padding: 16px 0 16px 36px;
border-bottom: 1px solid var(--border);
font-size: 15px;
line-height: 1.9;
color: var(--text);
}
ul.lp-points li:first-child {
border-top: 1px solid var(--border);
}
ul.lp-points li::before {
content: "\2713";
position: absolute;
left: 6px;
top: 16px;
color: var(--accent);
font-weight: 700;
}
ul.lp-points li strong {
color: var(--ink);
}

/* Pointチェックリスト直下の【追記】実績行 */
.lp-points-note {
max-width: 780px;
margin: 28px auto 0 auto;
text-align: center;
font-size: 15px;
color: var(--text);
}
/* 導入直下の実績・継続性の小さな一行 */
.lp-trust {
margin: 20px 0 0 0;
text-align: center;
font-size: 13px;
color: var(--muted);
letter-spacing: 0.05em;
}

/* ギャラリーの全幅アイテム（管理画面スクショ＋しっかりめの説明用）。
   2カラムグリッドの両列をまたいで大きく見せる */
.lp-gallery .lp-gallery-wide {
grid-column: 1 / -1;
padding: 40px 28px 32px 28px;
}
.lp-gallery .lp-gallery-wide img {
aspect-ratio: auto;
max-width: 760px;
margin: 0 auto;
}
.lp-gallery .lp-gallery-wide figcaption {
max-width: 640px;
margin: 24px auto 0 auto;
font-size: 13px;
line-height: 2;
letter-spacing: 0.04em;
}
.lp-gallery .lp-gallery-wide figcaption strong {
display: block;
font-size: 15px;
color: var(--ink);
margin-bottom: 6px;
}


/* ======================================================================
 *  FAQ・解説ページ用コンポーネント（2026-07-12）
 *  LPのlp-faqと同じ見た目を、単体<details class="faq-item">でも使えるように
 * ====================================================================== */

/* 大セクション見出し（インクの罫線で章の切り替えを作る） */
.page-contents .faq-section {
margin: 90px 0 8px 0;
padding-top: 30px;
border-top: 1px solid var(--ink);
font-size: 24px;
line-height: 1.5;
letter-spacing: 0.01em;
}

/* 中グループ見出し（＜インストール関連＞など） */
.page-contents .faq-group {
margin: 56px 0 4px 0;
font-size: 14px;
font-weight: 700;
color: var(--muted);
letter-spacing: 0.08em;
}

/* Q&A本体（開閉式） */
details.faq-item {
border-bottom: 1px solid var(--border);
}

details.faq-item summary {
cursor: pointer;
list-style: none;
position: relative;
padding: 22px 44px 22px 38px;
font-size: 17px;
font-weight: 700;
line-height: 1.8;
color: var(--ink);
}

/* Q.マーク（本文は触らずCSSで全問に一括付与） */
details.faq-item summary::before {
content: "Q.";
position: absolute;
left: 0;
top: 22px;
font-family: var(--font-en);
font-size: 17px;
font-weight: 700;
line-height: 1.8;
color: var(--accent);
}

details.faq-item summary::-webkit-details-marker { display: none; }

details.faq-item summary:hover { color: var(--accent-dark); }

/* 開いている間はQ行を色でも示す（どこを開いたか迷子にならない） */
details.faq-item[open] summary { color: var(--accent-dark); }

details.faq-item summary::after {
content: "＋";
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
font-weight: 400;
color: var(--muted);
}

details.faq-item[open] summary::after { content: "－"; }

details.faq-item .faq-a {
position: relative;
padding: 4px 0 30px 38px;
font-size: 15px;
line-height: 2.1;
color: var(--text);
}

/* A.マーク（回答の開始位置がひと目で分かるように） */
details.faq-item .faq-a::before {
content: "A.";
position: absolute;
left: 0;
top: 5px;
font-family: var(--font-en);
font-size: 16px;
font-weight: 700;
line-height: 1.8;
color: var(--muted);
}

details.faq-item .faq-a p { font-size: 15px; }

/* 回答1行目の高さを揃える：wpautopが<p>で包む回答は p の上パディング13px分だけ
   1行目が下がり、生テキスト始まりの回答とA.マークの位置関係がズレるため */
details.faq-item .faq-a > p:first-child { padding-top: 0; }

/* Q&A風にしたくない開閉ブロック用（contactのフォーム折りたたみ等） */
details.faq-plain summary::before,
details.faq-plain .faq-a::before { content: none; }
details.faq-plain summary { padding-left: 0; }
details.faq-plain .faq-a { padding-left: 0; }

@media only screen and (max-width: 767px) {
.page-contents .faq-section { margin-top: 70px; font-size: 20px; }
details.faq-item summary { font-size: 16px; padding: 18px 36px 18px 30px; }
details.faq-item summary::before { top: 18px; font-size: 16px; }
details.faq-item .faq-a { padding-left: 30px; }
}


/* 解説記事の補足注記（＊〜）：本文より小さめのグレーで階層を付ける
   （赤字の重要警告はそのままのサイズで残し、重要度の差を見せる） */
.single-contents .note,
.single-contents .note p {
font-size: 12.5px;
line-height: 2;
color: var(--muted);
}

.single-contents span.note {
display: inline-block;
}


/* 本文やウィジェットに貼った素のiframe（Google Maps等の埋め込みコード）が
   モバイルで画面からはみ出さないための保険 */
iframe {
max-width: 100%;
}


/* テーマ編集の定型3点セット（自己責任＋AIで自走＋ココナラ）。
   FAQ回答内で使う枠囲み・本文より一回り小さく */
details.faq-item .faq-a .faq-diy {
margin: 20px 0 4px 0;
padding: 16px 22px;
border: 1px solid var(--border);
border-radius: 12px;
}

details.faq-item .faq-a .faq-diy,
details.faq-item .faq-a .faq-diy p {
font-size: 13px;
line-height: 2;
color: var(--text);
}