@charset "utf-8";

/*
Theme Name: Minimal Journal Ⅱ
Theme URI: http://minimalwp.com/category/gallery/
Description: PC、タブレット、スマートフォンと見ているデバイスに自動最適化されるレスポンシブデザインに対応したミニマルでシンプルなWordPressテーマです。
Version: 20260712
Tested up to: 7.0
Requires PHP: 7.4
Author: Minimal WP
Author URI: http://minimalwp.com
License: 
License URI:
Tags: custom-menu
Text Domain: minimal-journal
*/


/* *****************************************************************
*	CSS変数
* ***************************************************************** */

:root {
  --color-accent:   #378893;
  --color-text:     #444;
  --color-muted:    #999;
  --color-border:   #dedede;
  --color-bg:       #fff;
  --color-bg-light: #f5f5f5;
  --transition:     0.3s ease;
  --max-width:      960px;

  --ink:            #333;
  --text:           var(--color-text);
  --muted:          var(--color-muted);
  --border:         var(--color-border);
  --bg:             var(--color-bg);
  --bg-soft:        var(--color-bg-light);
  --accent:         var(--color-accent);
  --accent-dark:    #2c6f78;
  --radius:         14px;
  --radius-sm:      8px;

  --font-display: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
  --font-en: "Inter", "Helvetica Neue", Arial, sans-serif;
}

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


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

body {
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, sans-serif;
font-weight: 500;
font-size: 16px;
background: #fff;
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;
}


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

a{
color:var(--accent);
text-decoration:none;
transition: 0.5s;
}

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


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

img{
border:0;
padding:0px;
margin:0px
}



/* フロート
---------------------------------------------------- */

.alignright, .right { 
float: right; 
margin: 0 0 10px 20px;
}

.alignleft, .left { 
float: left; 
margin: 0 20px 10px 0;
}

.aligncenter { 
display: block; 
margin: 0 auto; 
}

.clear { 
clear:both; 
}


/* リスト
---------------------------------------------------- */

ol {
margin: 10px 0 20px 10px;
padding: 0 0 0 0;
list-style: decimal;
}

ul {
margin: 10px 0 20px 4px;
padding: 0 0 0 0;
list-style: disc;
}

li {
margin: 10px 0 10px 15px;
padding: 0;
}

li a{
color:var(--accent);
transition: 0.5s;
}

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



/* *****************************************************************
*	全体Wrapper
* ***************************************************************** */

.wrapper {
margin: auto; 
max-width: 960px;
padding: 0px 30px 50px 30px;
}



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

#header {
width: 100%;
}

.header-inner {
max-width: 960px;
overflow: hidden;
margin: 0px auto;
padding: 80px 0;
}

#header h1 {
text-align:center;
margin: 0;	
}

.logo {
text-align:center;
margin: 0 ;
padding: 0;
}

.logo img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}



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

#nav {
width: 100%;
margin: 0 0 50px 0;
z-index: 9999;
padding: 0;
text-align: center;
background: var(--bg);
position: sticky;
top: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
}

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

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

ul.nav-menu,
div.nav-menu > ul {
margin: 0;
padding: 0;
}

.nav-menu li {
display: inline-block;
position: relative;
margin: 0 0;
}

.nav-menu li a {
position: relative;
color: var(--ink);
display: block;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.03em;
text-decoration: none;
padding: 12px 30px 12px 30px;
transition: color var(--transition);
}

/* ホバー・現在地は背景塗りではなく、項目下端のアクセントバーで示す
   （widget-titleやpagetitleの下線モチーフと同じ言語に揃える。folcloreと同じ考え方） */
.nav-menu > li > a::after {
content: "";
position: absolute;
left: 30px;
right: 30px;
bottom: 6px;
height: 2px;
background: var(--accent);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.25s ease;
}

.nav-menu li:hover > a,
.nav-menu li a:hover {
color: var(--accent-dark);
}

.nav-menu > li:hover > a::after,
.nav-menu > li > a:hover::after {
transform: scaleX(1);
}

.nav-menu .sub-menu,
.nav-menu .children {
background: var(--bg);
border: 1px solid var(--border);
display: none;
padding: 0;
position: absolute;
z-index: 99999;
}

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

ul.nav-menu ul a,
.nav-menu ul ul a {
color: var(--ink);
margin: 0;
width: 200px;
text-align: left;
}

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

ul.nav-menu li:hover > ul,
.nav-menu ul li:hover > ul {
display: block;
background: var(--bg);
}

.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(--ink);
background: none;
}

.nav-menu > li.current_page_item > a::after,
.nav-menu > li.current_page_ancestor > a::after,
.nav-menu > li.current-menu-item > a::after,
.nav-menu > li.current-menu-ancestor > a::after,
.nav-menu > li.current-post-ancestor > a::after {
transform: scaleX(1);
}

.toggle {
display: none;
}

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


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

.hamburger { display: none; }

/* 細い線のハンバーガーメニュー（スマホ用。PC縮小メニュー用の大きい版は
   別途「PC縮小メニュー」セクションで.toggle .hamburgerだけを上書きする） */
.hamburger {
width: 44px;
height: 44px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: none;
border: 0;
margin: 0;
overflow: visible;
}

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

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
position: absolute;
left: 0;
width: 22px;
height: 2px;
background-color: var(--ink);
border-radius: 2px;
content: "";
transform-origin: center;
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);
}


/* サブメニュートグルボタン（グローバルではPC非表示）
---------------------------------------------------- */

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



/* ***************************************************************** 
*	メイン（本文）コンテンツ
* ***************************************************************** */	

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


/* ギャラリーレイアウト
---------------------------------------------------- */

/* responsive.cssのfloatグリッドを上書きし、崩れないCSS Gridに */
ul.block-two {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 48px 32px;
margin: 0;
}

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

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

li.item-similar {
margin-bottom: 50px;
}

.item-img {
position: relative;
display: block;
margin: 0 0 16px 0;
aspect-ratio: 3 / 2;
overflow: hidden;
text-align:center;
border: 1px solid var(--border);
background: var(--bg-soft);
/* 配布テーマにつき、写真・イラスト作品の形を変えないよう角丸なし */
border-radius: 0;
}

.item-img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}

.item:hover .item-img img,
.item-first:hover .item-img img {
transform: scale(1.06);
}

/* スクロールで視界に入ったカードがふわっと下から現れる（JSはfooter.php側） */
.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);
}

/* 画像にマウスを乗せたときに右下に出る矢印ボタン */
.item-img::after {
content: "→";
position: absolute;
/* 装飾用の矢印。クリックを奪って画像リンクが押せなくならないよう透過させる */
pointer-events: none;
right: 12px;
bottom: 12px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
color: var(--ink);
font-family: var(--font-en);
font-weight: 400;
font-size: 15px;
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);
}

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

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

/* トップページ1件目だけ少し大きく扱う「特集」写真。ただしミニマリズムを保つため
   .wrapper幅（960px）に収め、画像は縁までいっぱいにせず余白の中で静かに見せる */
.item-first {
margin-bottom: 100px;
}

.item-first .item-img {
border: none;
background: none;
aspect-ratio: auto;
margin: 0 0 24px 0;
}

/* 日付・カテゴリは小さく控えめに一行にまとめる */
.item-cat {
display: block;
font-family: var(--font-en);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--muted);
padding: 0;
margin: 0 0 8px 0;
text-align: center;
}

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

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

.item h2 {
font-family: var(--font-display);
font-size: 18px;
line-height: 160%;
font-weight: 700;
letter-spacing: 0.03em;
font-feature-settings: "palt";
overflow-wrap: anywhere;
}

.item-title {
text-align: center;
margin: 0 0 0 0;
padding: 0 20px;
border-top: none;
border-bottom: none;
}

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

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

.item-first .item-title {
max-width: 960px;
margin: auto;
}

.item-first .item h2 {
font-size: 26px;
}

.item-text {
font-size: 13px;
color: var(--muted);
line-height: 170%;
overflow-wrap: anywhere;
}


/* ブログ記事部分
---------------------------------------------------- */

.single-contents {
margin: 0 0 50px 0;
}

.page-contents {
margin: 0 0 50px 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);
}


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

.breadcrumb {
margin: 30px 0 50px 0;
line-height: 120%;
}

.breadcrumb div {
display: inline;
font-size: 11px;
color: #999;
}

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

.breadcrumb ol {
margin: 0px;
}

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


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

.pagedate {
font-size: 12px;
font-weight: normal;
text-align: left;
padding: 0 0 0 0;
margin: 0 0 -10px 0;
color: var(--muted);
letter-spacing: 0.02em;
}

/* アーカイブページの大見出し（カテゴリ名・年月日等） */
.pagetitle {
position: relative;
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
letter-spacing: 0.01em;
padding: 0 0 20px 0;
margin: 0 auto 50px auto;
border-bottom: none;
max-width: 300px;
text-align: center;
}

.pagetitle::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 48px;
height: 3px;
background: var(--accent);
}

.pagetitle a {
color: var(--ink);
transition: var(--transition);
}

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

/* 記事詳細のカテゴリラベル（小） */
.pagetitle-single {
color: var(--muted);
font-family: var(--font-en);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
font-style:normal;
margin: 0 0 10px 0;
}

.pagetitle-single a {
color: var(--muted);
transition: var(--transition);
}

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

.blog-title {
position: relative;
font-family: var(--font-display);
font-size: 28px;
line-height: 145%;
font-weight: 700;
letter-spacing: 0.03em;
font-feature-settings: "palt";
color: var(--ink);
margin: 20px 0 20px 0;
padding: 0 0 18px 0;
border-top: none;
border-left: none;
border-bottom: 1px solid var(--border);
}

.blog-title::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 28px;
height: 2px;
background: var(--accent);
}

.blog-title a {
color: var(--ink);
text-decoration:none;
transition: 0.5s;
}

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


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

h1 {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
letter-spacing: 0.03em;
font-feature-settings: "palt";
color: var(--ink);
margin: 40px 0px 20px 0px;
}

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

/* journal独自の個性：本文中の見出しも、ウィジェット見出しと同じ装飾（アクセントバー）で揃える。
   ただし.item-title（記事カード見出し）・.lp-heading（LP見出し）は同じh2タグを使い回す
   専用デザインを既に持っているため、この装飾からは除外する */
h2:not(.item-title):not(.lp-heading)::after, h4::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 28px;
height: 2px;
background: var(--accent);
}

h3 {
font-family: var(--font-display);
font-size: 19px;
line-height: 130%;
font-weight: 700;
letter-spacing: 0.03em;
color: var(--ink);
padding: 2px 0 2px 14px;
margin: 40px 0 15px 0;
border-bottom: none;
border-left: 3px solid var(--accent);
}

h4 {
font-size: 17px;
line-height: 130%;
font-weight: bold;
color: var(--text);
padding: 0 0 6px 0;
margin: 30px 0 10px 0;
border-bottom: 1px dotted var(--border);
position: relative;
}

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

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


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

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

.head-img img {
display: block;
width: 100%;
height: auto;
}


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

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

/* 著者 */
.post-author {
margin: 0 0 24px 0;
font-size: 13px;
color: var(--muted);
}
.post-author a {
color: var(--ink);
}
.post-author a:hover {
color: var(--accent-dark);
}

/* タグのピルバッジ（#は自動で付きます） */
.tag-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}

.tag-list a {
display: inline-block;
font-size: 12px;
color: var(--text);
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);
transform: translateY(-1px);
}


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

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

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

#next ul.block-two > li {
float: none;
width: auto;
flex: 1;
margin: 0;
}

.next-label {
display: block;
font-family: var(--font-en);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 8px 0;
}

.next-title {
display: block;
font-size: 14px;
line-height: 1.6;
color: var(--ink);
transition: color var(--transition);
}

.next-left .next-title::before { content: "← "; color: var(--accent); }
.next-right .next-title::after { content: " →"; color: var(--accent); }

.next-left:empty,
.next-right:empty {
display: none;
}

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

/* ボックス全体をクリックできるよう、枠線・余白・ホバー色はリンク自体に付与 */
.next-left a,
.next-right a {
display: block;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 20px;
transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

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


@media only screen and (max-width: 767px) {
#next ul.block-two { flex-direction: column; }
}


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

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

a.page-numbers,
.pager .current {
display: inline-block;
box-sizing: border-box;
min-width: 32px;
font-size: 13px;
line-height: 1.4;
background: var(--bg);
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 {
position: relative;
color: var(--ink);
font-size: 15px;
font-weight: bold;
letter-spacing: 0.08em;
font-style:normal;
margin: 0 0 14px 0;
padding: 0 0 10px 0;
border-top: none;
border-bottom: 1px solid var(--border);
}

.similar-head::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 28px;
height: 2px;
background: var(--accent);
}

@media only screen and (min-width: 768px) {
.similar-head {
margin-bottom: 38px;
}
}

/* 記事詳細（サイドバー無し）の関連記事：ギャラリーカードと同じ.item-img/.item-titleを流用 */
ul.block-three {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px 24px;
margin: 0;
padding: 0;
}

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

/* サイドバーあり版（single-sidebar.php）の関連記事：テーブルレイアウトのまま個性として維持 */
.similar ul{
margin: 0 0 0 0;
padding: 0 0 0 0;
}

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

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

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


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

.commentlist li{
list-style: none;
font-size:90%;
color:#888;
}

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

li.comment {
list-style: none;
font-size:90%;
color:#888;
margin: 30px 0px 30px 0px;
}

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


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

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

.wp-caption-text {
font-size:90%;
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: 0px 0px 40px 0px;
padding: 0 0 0 0;
}


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

.sidebox-new {
color: var(--text);
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 solid var(--border);
}

.sidebox-new li a{
font-size: 14px;
color: var(--text);
list-style: none;
transition: 0.5s;
}

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


table.similar-side {
width: 100%;
color: var(--text);
margin: 0 0 0 0;
border-collapse: collapse;
border-spacing: 0;
}

table.similar-side img {
width: 80px;
/* 配布テーマにつき、写真・イラスト作品の形を変えないよう角丸なし */
border-radius: 0;
}

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;
padding-left: 12px;
}


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

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

.footer-inner {
margin: 0px auto 0px auto;
padding: 0px 0px;
max-width: 960px;
}

#copyright {
font-family: var(--font-en);
font-weight: 400;
font-size: 10px;
letter-spacing: 0.08em;
line-height: 110%;
color: var(--muted);
text-align: center;
position: relative;
margin: 0;
padding: 14px;
background: var(--ink);
}

#copyright a {
color: #fff;
}

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


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

/* 基本形
---------------------------------------------------- */

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

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

.widget li{
list-style: none;
}

.widget li a{
color: #666;
font-size: 14px;
}

.widget li a:hover{
color: #999;
}

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

.textwidget, .textwidget p {
font-size: 14px;
color: #444;
line-height:180%;
margin: 0 0 0px 0;
padding: 5px 0 0 0;
}

/* ブロックウィジェットの段落（カスタムHTML含む）も、クラシックのテキスト
   ウィジェットと同じ「パーツ扱い」のサイズに揃える（本文pの16pxを継承させない） */
.widget_block p {
font-size: 14px;
line-height: 180%;
margin: 0;
padding: 5px 0 0 0;
}

.widget-title, h2.widget-title,
.wp-block-group h2.wp-block-heading,
.widget h2.wp-block-heading,
.footer-widget-title {
position: relative;
color: var(--ink);
font-size: 15px;
font-weight: bold;
letter-spacing: 0.08em;
font-style:normal;
margin: 0px 0px 14px 0px;
padding: 0 0 10px 0;
border-top: none;
border-bottom: 1px solid var(--border);
}

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

.widget_block h2 {
font-size: 15px !important;
border-bottom: 1px solid var(--border);
border-top: none;
margin: 0px 0px 14px 0px !important;
padding: 0px 0 10px 0 !important;
}




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

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

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

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

.topbox li a{
line-height: 160%;
color: #444;
margin: 0 0 0 0;
padding: 7px 0px 6px 0px;
list-style: none;
transition: 0.5s;
}

.topbox li a:hover{
color:#999;
}

.topbox h2{
font-size: 14px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

.topbox h3{
font-size: 13px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

.topbox h4{
font-size: 12px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

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

.topbox ul.children li{
padding-left: 15px;
padding-top: 5px;
border-top: 1px dotted #ccc;
border-bottom: 0px dotted #ccc;
}

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

.topbox ul.sub-menu li{
padding-left: 15px;
padding-top: 5px;
border-top: 1px dotted #ccc;
border-bottom: 0px dotted #ccc;
}

.top-widget-title {
position: relative;
font-size: 18px;
font-weight: normal;
letter-spacing: 0.03em;
font-style: normal;
padding: 0px 0px 14px 0px;
margin: 0px auto 40px auto;
border-bottom: 1px solid var(--border);
color: var(--ink);
max-width: 380px;
text-align: center;
}

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


/* ウィジェットボックスフッター用
---------------------------------------------------- */

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

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

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

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

.footerbox li a{
font-size: 14px;
line-height: 160%;
color: #444;
margin: 0 0 0 0;
padding: 7px 0px 6px 0px;
list-style: none;
transition: 0.5s;
}

.footerbox li a:hover{
color:#999;
}

.footerbox h2{
font-size: 14px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

.footerbox h3{
font-size: 13px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

.footerbox h4{
font-size: 12px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

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

.footerbox ul.children li{
padding-left: 15px;
padding-top: 5px;
border-top: 1px dotted #ccc;
border-bottom: 0px dotted #ccc;
}

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

.footerbox ul.sub-menu li{
padding-left: 15px;
padding-top: 5px;
border-top: 1px dotted #ccc;
border-bottom: 0px dotted #ccc;
}


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

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

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

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

.singlebox li a{
line-height: 160%;
color: #444;
margin: 0 0 0 0;
padding: 7px 0px 6px 0px;
list-style: none;
transition: 0.5s;
}

.singlebox li a:hover{
color:#999;
}

.single-widget-title {
color: var(--ink);
font-size: 18px;
font-weight: 700;
letter-spacing: 0.05em;
font-style:normal;
margin: 50px 0 10px 0 ;
padding: 0 0 3px 0;
border-top: none;
border-bottom: 1px solid var(--border);
}

.singlebox:empty {
display: none;
margin: 0;
}

.singlebox .textwidget,
.singlebox .textwidget p {
font-size: 16px;
color: #444;
line-height: 170%;
margin: 0 0 0px 0;
padding: 5px 0 5px 0;
}

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

.singlebox ul.children li{
padding-left: 15px;
padding-top: 5px;
border-top: 1px dotted #ccc;
border-bottom: 0px dotted #ccc;
}

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

.singlebox ul.sub-menu li{
padding-left: 15px;
padding-top: 5px;
border-top: 1px dotted #ccc;
border-bottom: 0px dotted #ccc;
}


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

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

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

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

.sidebox li a{
font-size: 14px;
color: #444;
margin: 0 0 0 0;
padding: 5px 0px 5px 0px;
list-style: none;
transition: 0.5s;
}

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

.sidebox h2{
font-size: 14px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

.sidebox h3{
font-size: 13px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

.sidebox h4{
font-size: 12px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

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

.sidebox ul.children li{
padding: 5px 0 5px 15px;
border-top: 1px dotted #ccc;
border-bottom: 0px dotted #ccc;
}

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

.sidebox ul.sub-menu li{
padding: 5px 0 5px 15px;
border-top: 1px dotted #ccc;
border-bottom: 0px dotted #ccc;
}


/* ウィジェットボックスワイドコンテンツ用
---------------------------------------------------- */

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

.top-wide-contents .widget {
padding: 56px 20px 56px 20px;
}

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

.top-wide-contents .textwidget p:last-child,
.top-wide-contents p:last-child {
margin-bottom: 0;
}

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

.top-wide-contents li{
margin: 0 0 0 0;
padding: 7px 0px 6px 0px;
list-style: none;
border-bottom:1px dotted #ddd;
}

.top-wide-contents li a{
line-height: 160%;
color: #444;
margin: 0 0 0 0;
padding: 7px 0px 6px 0px;
list-style: none;
transition: 0.5s;
}

.top-wide-contents li a:hover{
color:#999;
}

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

.top-wide-contents ul.children li{
padding-left: 15px;
padding-top: 5px;
border-top: 1px dotted #ccc;
border-bottom: 0px dotted #ccc;
}

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

.top-wide-contents ul.sub-menu li{
padding-left: 15px;
padding-top: 5px;
border-top: 1px dotted #ccc;
border-bottom: 0px dotted #ccc;
}


/* タグクラウド
---------------------------------------------------- */

/* ブロック版タグクラウドは<p class="wp-block-tag-cloud">で出力されるため、
   本文リンク用のp a下線を継承してしまう。クラシック版と同じピル型に揃えつつ
   下線を打ち消す（font-sizeはWPがインラインで出力するため!importantで固定） */
.widget_tag_cloud a,
.wp-block-tag-cloud a {
font-size: 12px !important;
line-height: 200%;
padding: 5px 14px;
margin: 0 5px 6px 0;
display: inline-block;
color: var(--text);
background: var(--bg);
border: 1px solid var(--border);
word-break: keep-all;
border-radius: 999px;
text-decoration: none;
transition: border-color var(--transition), color var(--transition);
}

.widget_tag_cloud a:hover,
.wp-block-tag-cloud a:hover {
border-color: var(--ink);
color: var(--ink);
text-decoration: none;
}


/* トップページ・記事まわりのウィジェットは「本文扱い」で16px、
   サイドバー・フッターは「パーツ扱い」の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;
}


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

table#wp-calendar {
width: 100%
}

table#wp-calendar th {
text-align: center;
}

table#wp-calendar td {
text-align: center;
}


/* ソーシャルウィジェット
---------------------------------------------------- */

.sidebox .wp-social-link svg {
height: 24px !important;
width: 35px !important;
padding: 0px;
}

.footerbox .wp-social-link svg {
height: 24px !important;
width: 38px !important;
padding: 0px;
}

.singlebox .wp-social-link svg, 
.top-wide-contents .wp-social-link svg, 
.topbox .wp-social-link svg {
height: 26px !important;
width: 24px !important;
padding: 0px 8px;
}



/* *****************************************************************
*	検索フォーム＆検索結果
* ***************************************************************** */

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

.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）
---------------------------------------------------- */

.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;
}



/* *****************************************************************
*	CSS3アニメーション
* ***************************************************************** */

/* 画像リンクフェード（旧jQueryフェードのCSS代替） */
a img {
transition: opacity 0.25s ease;
}
a:hover img {
opacity: 0.8;
}

/* カード写真のズームは.item-img imgのtransform（メイン本文コンテンツ節）に統一済み。
   関連記事カード（.item-similar）にも同じズームを適用する */
.item-similar:hover .item-img img {
transform: scale(1.06);
}

/* 関連記事のタイトルは他テーマの.similar-titleと同じ「13px・左揃え」に揃える
   （.item-titleは記事カード用の共用クラス＝中央揃えのため、関連記事スコープでのみ上書き） */
.item-similar .item-title {
font-size: 14px;
line-height: 1.6;
text-align: left;
padding: 0;
overflow-wrap: anywhere;
}



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

.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 -20px; }
.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; }
}


/* テーブル
---------------------------------------------------- */

.single-contents tabel,
.page-contents tabel {
width: 100%;
}
 
.single-contents th,
.single-contents td,
.page-contents th,
.page-contents td {
border: 1px solid #ccc;
padding: 20px;
}
 
.single-contents th,
.page-contents th {
font-weight: bold;
background-color: #dedede; 
}



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


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

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


/* Tablet (Portrait) 画面の横幅が768px〜959pxまで
---------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 959px) {
.wrapper { width: 728px; padding: 0px 20px 50px 20px; }
.header-inner { width: 728px; margin: auto; padding: 70px 0 60px 0; }
#nav { width: 728px; margin: 0 auto 50px auto; padding: 0; }
.footer-inner { width: 728px; padding: 0px 0px; }
}


/* Mobile (Portrait) 画面の横幅が300px~767pxまで（基本）
---------------------------------------------------- */

@media only screen and (max-width: 767px) {
.wrapper { width: auto; padding: 0 21px 50px 21px; }
.header-inner { width: auto; margin: 0; padding: 64px 21px 64px 21px; }
.logo { text-align: center; }
#header h1, #header .logo { float: none; margin-bottom: 0px; }
.logo img {
max-width: 200px;
max-height: 40px;
width: auto;
height: auto;
}
#nav {
display: flex;
flex-direction: column;
justify-content: flex-start;
position: fixed;
top: 0;
left: 0;
float: none;
text-align: left;
width: 100%;
height: 100dvh;
background: var(--bg);
margin: 0;
padding: 0 0 24px 0;
overflow-y: auto;
z-index: 9990;
/* display:none/flexは切り替え不可なので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 ul{margin:auto}（デスクトップ用）はflex化した#navの子として置かれると
   横方向のstretchを打ち消して縮こまってしまうため、モバイルでは明示的にリセットする */
#nav ul.nav-menu {
margin: 0;
width: 100%;
}
#nav.nav-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
}
.nav-menu li a { color: var(--ink); display: block; font-size: 17px; font-weight: 600; padding: 18px 56px 18px 24px; text-decoration: none;}
.nav-menu li { display: block; float: none; border-bottom: 1px solid var(--border); position: relative; }
/* PCの下線アクセントバーはモバイルの縦積みリストだと行を横切る太い線に見えてしまうため無効化し、
   文字色の変化だけで現在地・タップ中を示す（folcloreの同箇所と同じ扱い） */
.nav-menu > li > a::after { display: none; }
.nav-menu li:hover > a,
.nav-menu li a:hover,
.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 {
background: none;
color: var(--accent-dark);
}

/* サブメニュートグルボタン（SPのみ表示） */
.sub-menu-toggle {
display: block;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
background: none;
border: none;
cursor: pointer;
font-size: 10px;
color: var(--color-muted);
}
.sub-menu-toggle:hover {
background: rgba(0,0,0,0.04);
}

/* サブメニューのli：left揃え＋インデント */
#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-left: 32px;
}

/* ホバーでサブメニューが開かないよう打ち消す（タップがhoverを発火するため） */
#nav ul.nav-menu li:hover > ul,
#nav .nav-menu ul li:hover > ul {
display: none;
}
/* トグルの開閉もメイン開閉と同じくふんわりに（display:noneはtransitionできないため
   常にdisplay:blockのままopacity+visibility+transformで表現する） */
#nav .nav-menu .sub-menu,
#nav .nav-menu .children {
display: block;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
pointer-events: none;
}

/* トグルで開いた場合のみ表示（左端に1pxだけ余白を入れ、枠線が画面端と重なって見えなくなるのを防ぐ） */
#nav .nav-menu .sub-menu.sub-menu-open,
#nav .nav-menu .children.sub-menu-open {
display: block;
left: 1px;
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}

.toggle { display: block; float: none; position: fixed; top: 4px; right: 8px; z-index: 9999; }
body { font-size: 16px; }
p { font-size: 15px; }
.blog-title { font-size: 26px; }
.pager { margin: 50px 0 50px 0; }
.footer-inner { width: auto; padding: 0 21px; }
.mobile-display-none { display: none; }
.single-contents br { display: none; }
.top-wide-contents br { display: none; }
.single-contents { margin: 0 0 50px 0; }
.page-contents { margin: 0 0 50px 0; }

/* ページャー：モバイルは1列に収まるミニサイズ */
.pager {
padding: 0 4px;
}
a.page-numbers,
.pager .current {
min-width: 27px;
padding: 4px 4px;
margin: 0 1px 6px 1px;
font-size: 12px;
}

/* 記事カード・関連記事もスマホは1カラムに */
ul.block-two { grid-template-columns: 1fr; gap: 40px; }
ul.block-three { grid-template-columns: 1fr; gap: 0; }

/* サイドバーあり版（single-sidebar.php）の関連記事もスマホはサイドバー新着記事と同じ「左に画像・右にタイトル」に */
.similar li {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
/* 関連記事カード（ul.block-three）もスマホはサイドバー新着記事と同じ「左に画像・右にタイトル」に */
li.item-similar {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
margin-bottom: 0;
border-bottom: 1px solid var(--border);
}
li.item-similar .item-img {
flex: none;
width: 96px;
height: auto;
aspect-ratio: 3 / 2;
margin: 0;
}
li.item-similar .item-title {
min-width: 0;
text-align: left;
padding: 0;
}
}


@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; }
#nav .nav-menu .sub-menu,
#nav .nav-menu .children,
#nav .nav-menu .sub-menu.sub-menu-open,
#nav .nav-menu .children.sub-menu-open {
transition: opacity 0.01s linear, visibility 0.01s linear;
transform: none;
}
}


/* *****************************************************************
*	【試作】PC縮小メニュー（スクロールでハンバーガーに切り替え）
*	下向きスクロールで通常ナビを消し、右上の丸いハンバーガーだけ残す。
*	footer.php側のJSがscrollY・scroll方向を見てbody.nav-condensedを付け外しする。
* ***************************************************************** */

@media (min-width: 768px) {

.toggle {
display: flex;
position: fixed;
top: 16px;
right: 24px;
z-index: 9999;
opacity: 0;
transform: scale(0.85);
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s ease;
}

body.nav-condensed .toggle {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}

/* PC縮小メニュー専用のハンバーガーは、モバイルのものより一回り大きく・線を極細にする
   （モバイル側の.hamburgerサイズには一切影響させない） */
.toggle .hamburger {
width: 52px;
height: 52px;
}

.toggle .hamburger-box {
width: 34px;
height: 22px;
}

.toggle .hamburger-inner,
.toggle .hamburger-inner::before,
.toggle .hamburger-inner::after {
width: 34px;
height: 1.5px;
}

.toggle .hamburger-inner { margin-top: -0.75px; }
.toggle .hamburger-inner::before { top: -9px; }
.toggle .hamburger-inner::after  { bottom: -9px; }

/* 触れると3本の線がむにゅっと伸びて弾む、少し遊び心のあるホバー演出（PCのみ） */
.toggle .hamburger:not(.is-active):hover .hamburger-inner,
.toggle .hamburger:not(.is-active):hover .hamburger-inner::before,
.toggle .hamburger:not(.is-active):hover .hamburger-inner::after {
transform: scaleX(1.18);
transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toggle .hamburger:not(.is-active):hover .hamburger-inner::before {
transition-delay: 0.03s;
}
.toggle .hamburger:not(.is-active):hover .hamburger-inner::after {
transition-delay: 0.06s;
}

body.nav-condensed #nav:not(.nav-open) {
opacity: 0;
transform: translateY(-8px);
pointer-events: none;
}

/* ハンバーガーを押すとモバイルと同じ考え方の全画面オーバーレイに切り替わる。
   ただしPCなので中央寄せ・大きめの文字でゆったり見せる */
body.nav-condensed #nav.nav-open {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: fixed;
inset: 0;
width: 100%;
height: 100dvh;
background: var(--bg);
margin: 0;
z-index: 9990;
opacity: 1;
transform: none;
pointer-events: auto;
}

body.nav-condensed #nav.nav-open ul.nav-menu {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}

body.nav-condensed #nav.nav-open .nav-menu li {
border-bottom: none;
position: relative;
}

body.nav-condensed #nav.nav-open .nav-menu li a {
font-size: 18px;
padding: 12px 28px;
}

body.nav-condensed #nav.nav-open .nav-menu li a::after {
left: 28px;
right: 28px;
bottom: 8px;
}

/* サブメニューはホバーで出す方式（右フライアウト／中央ドリルダウン）を
   2回試したが、いずれも「近接した項目同士の表示領域が衝突する」
   「マウス位置次第で開閉がちらつく」という問題が解消しきれなかった。
   そこでモバイルで既に実績のある「▼ボタンをクリックしてその場で開く」
   方式（.sub-menu-toggle + .sub-menu-open、position:absoluteのオーバーレイで
   後続の項目を押し下げない）をPC縮小メニューにもそのまま流用する。
   ホバーに依存しないため、マウス位置による誤爆・衝突が原理的に起こらない */
body.nav-condensed #nav.nav-open .sub-menu-toggle {
display: block;
position: absolute;
/* liの幅は中央寄せリンクの文字幅ぴったりなので、right:0だと文字に被る。
   liの外側（右の余白）にはみ出す位置まで離す */
right: -50px;
top: 50%;
transform: translateY(-50%) rotate(-90deg);
width: 52px;
height: 52px;
background: none;
border: none;
cursor: pointer;
font-size: 12px;
color: var(--color-muted);
}

body.nav-condensed #nav.nav-open .sub-menu-toggle:hover {
background: rgba(0,0,0,0.04);
}

/* サブメニューは親項目の右側の余白に縦積みで表示する（folcloreの通常ドロップダウンは
   下に開くが、クリック開閉なので右側に出しても近接項目との衝突は起きない） */
body.nav-condensed #nav.nav-open .nav-menu .sub-menu,
body.nav-condensed #nav.nav-open .nav-menu .children {
display: block;
position: absolute;
left: 100%;
top: 50%;
margin: 0 0 0 76px;
padding: 8px 0;
width: max-content;
max-width: 240px;
transform: translateY(-50%) translateX(-6px);
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: 0 18px 40px -24px rgba(23, 25, 28, 0.28);
text-align: left;
white-space: normal;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
z-index: 2;
}

body.nav-condensed #nav.nav-open .nav-menu .sub-menu.sub-menu-open,
body.nav-condensed #nav.nav-open .nav-menu .children.sub-menu-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(-50%) translateX(0);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}

body.nav-condensed #nav.nav-open .nav-menu .sub-menu li,
body.nav-condensed #nav.nav-open .nav-menu .children li {
display: block;
text-align: left;
}

body.nav-condensed #nav.nav-open .nav-menu .sub-menu a,
body.nav-condensed #nav.nav-open .nav-menu .children a {
position: relative;
font-size: 18px;
padding: 10px 32px;
/* 旧ドロップダウン時代の固定幅（ul.nav-menu ul a の width:200px）が残っていると、
   content-boxのため 200+32+32=264px となり、枠の max-width:240px を突き破って
   ホバーの装飾が右側にはみ出す。ここで幅指定を解除する */
width: auto;
box-sizing: border-box;
}

/* サブメニューのホバーも背景塗りではなく下線で統一する */
body.nav-condensed #nav.nav-open .nav-menu .sub-menu a::after,
body.nav-condensed #nav.nav-open .nav-menu .children a::after {
content: "";
position: absolute;
left: 20px;
right: 20px;
bottom: 6px;
height: 2px;
background: var(--accent);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.25s ease;
}

/* 記事数が多いテーマなので、PCの全画面メニューにも検索アイコンを出す
   （モバイル縦向き限定にしない。mysongのPCメニューと同じ考え方） */
body.nav-condensed #nav.nav-open .nav-menu li.nav-search-item {
display: block;
}

body.nav-condensed #nav.nav-open .nav-search-trigger {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 14px 28px;
background: none;
border: none;
color: var(--ink);
cursor: pointer;
font-family: inherit;
}

body.nav-condensed #nav.nav-open .nav-search-trigger:hover {
color: var(--accent-dark);
}

body.nav-condensed #nav.nav-open .nav-menu .sub-menu a:hover,
body.nav-condensed #nav.nav-open .nav-menu .children a:hover {
background: none;
color: var(--accent-dark);
}

body.nav-condensed #nav.nav-open .nav-menu .sub-menu a:hover::after,
body.nav-condensed #nav.nav-open .nav-menu .children a:hover::after {
transform: scaleX(1);
}

}

/* メニューが開いている間はトップに戻るボタンを隠す（オーバーレイの裏に透けて見えるのを防ぐ。
   PCの縮小メニューだけでなくモバイルのフルスクリーンメニューでも起きるため幅を限定しない） */
body:has(#nav.nav-open) #topcontrol {
opacity: 0 !important;
pointer-events: none !important;
}


@media (prefers-reduced-motion: reduce) {
.toggle, body.nav-condensed #nav:not(.nav-open) { transition: none; }
}


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

/* 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%;
}


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

#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);
}


/* *****************************************************************
*	ボタン・販売ページ用パーツ
*	投稿・固定ページの本文にHTMLをそのまま貼り付けて使えるパーツ集です。
*	例：ボタン（.btn）／価格表（.price-card）／よくある質問（.lp-faq）など
* ***************************************************************** */

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

.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);
}

.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);
}

.btn-lg {
padding: 19px 60px;
font-size: 16px;
}


/* コンセプト3カラム（.philosophy）
---------------------------------------------------- */

.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-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;
}


/* 販売LP用クラス（投稿本文にコピペして使う想定）
---------------------------------------------------- */

.lp-label {
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-size: clamp(24px, 3.2vw, 34px);
font-weight: bold;
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-demo {
text-align: center;
margin: 8px 0 16px 0;
}

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

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

.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-size: 44px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1;
color: var(--accent);
margin: 0 0 16px 0;
}

.lp-step-title {
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;
}

.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: 0;
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-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-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: 6px 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; }

.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;
}

/* 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-size: clamp(26px, 3.6vw, 40px);
font-weight: bold;
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-style: normal;
font-weight: 700;
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; }

@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-steps { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.btn-lg { padding: 17px 40px; font-size: 15px; }
.philosophy { grid-template-columns: 1fr; }
.lp-cta { padding: 56px 16px; margin-top: 72px; }
.lp-cta .btn { display: block; margin: 0 auto 12px auto; max-width: 320px; }
}


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

.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;
}

/* 本文写真は角丸なし（配布テーマにつき、写真・イラスト作品の形を変えない） */
.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: 0;
height: auto;
}


/* *****************************************************************
*	本文内リスト：行間と項目間にゆとりを持たせる
* ***************************************************************** */

.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);
}


/* *****************************************************************
*	検索オーバーレイ（モバイルメニュー最終行から開く）
* ***************************************************************** */

#nav .nav-menu li.nav-search-item { display: none; }

.header-search-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(23, 25, 28, 0.55);
z-index: 99999;
align-items: flex-start;
justify-content: center;
padding: 100px 20px 0 20px;
}

.header-search-overlay.is-open {
display: flex;
}

.header-search-inner {
width: 100%;
max-width: 420px;
}

.header-search-inner .search input[type="search"] {
font-size: 16px;
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
#nav .nav-menu li.nav-search-item {
display: block;
}
.nav-search-trigger {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 18px 24px;
background: none;
border: none;
color: var(--ink);
cursor: pointer;
font-family: inherit;
}
}

/* 空のウィジェットエリアの箱は余白ごと非表示にする
   （ウィジェット未設定のエリアが余計な隙間として残らないように。
   .top-wide-contentsは対象外：空でもmargin-bottomがヒーロー直下の標準余白を兼ねているため） */
.topbox:not(:has(*)),
.singlebox:not(:has(*)),
.sidebox:not(:has(*)),
.footerbox:not(:has(*)) {
display: none;
}

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


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