@charset "utf-8";

/*
Theme Name: My Song Ⅱ
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: minimalwp
*/

/* ==========================================================
   カラー・デザイン設定（ここを変えるだけでサイト全体の色味が変わります）
   ========================================================== */
: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: 'century', 'Times New Roman', 'Baskerville', 'Optima', 'Palatino', 'Georgia', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'HGS明朝E', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
  --font-en: "Helvetica Neue", Arial, sans-serif;

  /* ヘッダー固定バーの高さ。ロゴ・ハンバーガーの位置調整と
     本文の上余白（padding-top）の両方がこの値を参照します */
  --header-height: 48px;
}

::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;
/* ヘッダーを画面上部に固定しているぶん、本文の開始位置をヘッダーの高さだけ下げる。
   ただし画像がブラウザ最上部から始まるページ（トップページのヒーロー画像／
   イメージヘッダー付きページ）は、その画像の上にヘッダーを透過で重ねたいので
   このpadding-topは持たせない（下のbody:has()で上書き） */
padding-top: var(--header-height);
}

body:has(#top-slide-max),
body:has(.head-img) {
padding-top: 0;
}


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

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

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

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


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

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

img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
padding:4px;
margin: 0 0 10px 20px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 0 20px 10px 0;
display: inline;
}


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

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

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

.clear { 
clear:both; 
}

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


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

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

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

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

li a{
color:#45AAB8;
transition: 0.5s;

}

li a:hover{
color:#666;
}



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

.wrapper {
margin: auto;
max-width: 960px;
/* アーカイブ・投稿・固定ページなど通常ページは、固定ヘッダーの下に
   ちゃんと余白を持たせる（上30px／下50px） */
padding: 60px 30px 50px 30px;
}

/* トップページだけは特別扱い。ヘッダー画像をヘッダー直下に
   隙間なく張り付かせたいので、wrapperの上下パディングを持たせない。
   ウィジェットが1つも無い状態でもここが0のままフッターに直接くっつく */
body.home .wrapper {
padding: 0 30px;
}



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

/* ヘッダーを画面上部に固定し、ロゴを小さく左寄せ、ハンバーガーは
   右側に固定（.toggleは別ルールで常時fixed）。PC/SP共通で同じ挙動 */
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--header-height);
/* 常時白ではなく半透明＋すりガラス。下を流れる画像がしっかり透ける */
background: rgba(255, 255, 255, 0.35);
-webkit-backdrop-filter: blur(14px) saturate(160%);
backdrop-filter: blur(14px) saturate(160%);
border-bottom: 1px solid rgba(23, 25, 28, 0.08);
z-index: 9998;
}

/* ロゴをコンテンツ幅(960px)ではなく、ブラウザの本当の左端に揃える。
   ハンバーガー(.toggle)側は元々position:fixedで画面端基準だったので、
   ロゴ側もmax-widthを外して同じ「画面端から24px」の基準に揃える */
.header-inner {
height: 100%;
margin: 0;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: flex-start;
overflow: visible;
}

#header h1 {
text-align: left;
margin: 0;
line-height: 0;
}

.logo {
text-align: left;
margin: 0;
padding: 0;
line-height: 0;
}

.logo img {
display: block;
max-height: 18px;
max-width: 160px;
width: auto;
height: auto;
margin: 0;
}



/* *****************************************************************
*	トップナビゲーション
*	（このテーマはPC/SP共通で常にハンバーガーメニュー。#navはクリックで
*	開くまで常時非表示＝display:noneが基本状態。固定ヘッダーの
*	下からフルスクリーンで開く、PC/SP共通の縦一列メニューに統一）
* ***************************************************************** */

#nav {
display: flex;
flex-direction: column;
justify-content: flex-start;
position: fixed;
top: var(--header-height);
left: 0;
width: 100%;
height: calc(100dvh - var(--header-height));
margin: 0;
padding: 0 0 24px 0;
background: var(--bg);
overflow-y: auto;
text-align: left;
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.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; }
}

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

/* #nav ul{margin:auto}は#navが常時flex化されているこのテーマでは
   横方向のstretchを打ち消して縮こまってしまうため、明示的にリセットする */
#nav ul.nav-menu {
margin: 0;
width: 100%;
}

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

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

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

.nav-menu li a {
color: var(--ink);
display: block;
font-size: 17px;
font-weight: 600;
letter-spacing: 0.06em;
text-decoration: none;
padding: 18px 56px 18px 24px;
transition: color var(--transition);
}

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

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

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



/* ハンバーガーメニュー（PC/SP共通、常に表示）
---------------------------------------------------- */

.hamburger { display: none; }

/* 細い線のハンバーガーメニュー */
.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: "";
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/SP共通・常時固定） */
.toggle {
display: block;
position: fixed;
top: calc((var(--header-height) - 44px) / 2);
right: 20px;
z-index: 10000;
}

/* モバイルは他テーマ（right:8px）とハンバーガー位置を揃える */
@media (max-width: 767px) {
.toggle {
right: 8px;
}
}


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

#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: 767px) {
  .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);
  }
}




/* *****************************************************************
*	スライドショー
* ***************************************************************** */

/* PCでは横長、モバイルでは縦長に、画面いっぱいに1枚画像を敷いて
   中央基準でセンタークロップする（object-fit:cover）。ヘッダーは画像の
   上に透過で重なる形なので、画像はヘッダー分を引かず100dvhフルで敷く。
   min-heightは極端に横長のウィンドウで画像が潰れすぎないための保険 */
#top-slide-max {
position: relative;
width: 100%;
height: 100dvh;
min-height: 320px;
overflow: hidden;
padding: 0px;
margin: 0px auto;
text-align: center;
}

/* 下にウィジェットのコンテンツがある時だけ出す、下方向への
   スクロール誘導。ヘッダー画像の邪魔にならないよう控えめな半透明表示 */
.scroll-cue {
position: absolute;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
/* 写真の明暗を問わず視認できるよう、明るい半透明の丸に黒系アイコンを乗せる */
background: rgba(255, 255, 255, 0.85);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
color: var(--ink);
opacity: 0.92;
animation: scroll-cue-bounce 2.2s ease-in-out infinite;
transition: opacity 0.3s, background 0.3s;
}

.scroll-cue:hover {
opacity: 1;
background: rgba(255, 255, 255, 1);
}

@keyframes scroll-cue-bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
.scroll-cue {
animation: none;
}
}

#top-slide-max img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}



/* ヘッダーイメージ
---------------------------------------------------- */

.header-image {
overflow: hidden;
width: 960px;
height: auto;
margin: 0px auto;
}


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

#main {
margin:0 0 0 0;
padding: 0 0 0 0;
/* スクロール誘導矢印のフォールバック先。固定ヘッダー分の余白を確保 */
scroll-margin-top: calc(var(--header-height) + 46px);
}

/* トップページで、ウィジェットが1つでも設定されている場合だけ
   スライド画像との間に余白を入れる。全部空の場合はこのpadding自体
   付かないので、ヘッダー画像がそのままフッターに接する。
   ここの値は.topbox/scroll-margin-topと同じ「ヘッダー高さ＋見出し上の余白」
   にしておかないと、スクロール誘導矢印で来た時に実際の余白が足りず
   ヘッダーの下に画像がチラ見えしてしまう（実余白 >= スクロール停止位置が必要） */
#main:has(.topbox *) {
padding-top: calc(var(--header-height) + 46px);
}


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

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

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

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

.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 {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition);
}

.item:hover .item-img img {
transform: scale(1.04);
}

/* スクロールで視界に入ったカードがふわっと下から現れる（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: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 50%;
color: var(--ink);
font-size: 14px;
opacity: 0;
transform: translateY(6px);
transition: opacity var(--transition), transform var(--transition);
}

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

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

/* 日付・カテゴリはメタ情報として控えめに */
.item-cat {
display: inline-block;
font-family: var(--font-en);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
padding: 0;
margin: 0 8px 8px 0;
}

.item-date {
display: inline-block;
font-family: var(--font-en);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--muted);
padding: 0;
margin: 0 0 8px 0;
}

/* タイトルはメリハリをつけてしっかり大きく */
.item-title {
font-family: var(--font-display);
font-size: 19px;
line-height: 160%;
letter-spacing: 0.03em;
overflow-wrap: anywhere;
margin: 0 0 8px 0;
padding: 0;
border-top: none;
border-bottom: none;
}

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

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

/* マウスオーバーでタイトルスライド表示
---------------------------------------------------- */

.slidebase {
position: relative;
}

.slidetext {
width: 100%;
display: none;
position: absolute;
color: #fff;
background: rgba(0, 0, 0, 0.5);
}

.slidetext a {
padding: 10px 10px;
display: block;
color: #fff;
}

.slidetext a:hover {
color: #ccc;
}


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

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

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


/* ページタイトル（このテーマは元々センター揃えが個性なので維持し、装飾もセンター用に作る）
---------------------------------------------------- */

.pagedate {
font-size: 12px;
font-weight: normal;
text-align: left;
padding: 0 0 0 0;
/* .pagetitle自体が下に50pxのmargin-bottomを持っているので、
   ここに上余白を足すとアーカイブの見出し下と比べて広くなりすぎる。
   ここは0にして、アーカイブと同じ50pxの間隔に揃える */
margin: 0 0 -10px 0;
color: var(--muted);
letter-spacing: 0.02em;
}

.pagetitle {
position: relative;
font-family: var(--font-display);
font-size: 21px;
font-weight: normal;
letter-spacing: 0.03em;
font-style: normal;
padding: 0px 0px 14px 0px;
margin: 0px auto 50px auto;
border-bottom: 1px solid var(--border);
color: var(--ink);
max-width: 380px;
text-align: center;
}

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

.pagetitle a {
/* 親の.pagetitleはfont-style:normalなのに、ここだけitalicが残っていた。
   記事ページのカテゴリ表示（the_category）はリンクなので、
   欧文だけ斜体・和文は直立という不揃いな見た目になってしまう */
font-style: normal;
color: var(--ink);
transition: 0.5s;
}

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

/* モバイルは記事タイトルをひとまわり小さく */
@media only screen and (max-width: 767px) {
.blog-title { font-size: 26px; }
}

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

.blog-title a:hover {
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: #45aab8;
}

.breadcrumb ol {
margin: 0px;
}

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


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

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

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

/* 本文中の見出しも、ウィジェット見出しと同じ装飾（アクセントバー）で揃える。
   ただし.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: 20px;
line-height: 130%;
font-weight: bold;
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-family: var(--font-display);
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;
}

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

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

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

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

.blog-foot span {
color:#999;
}


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

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

.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 a:hover .next-title,
.next-right a:hover .next-title {
color: var(--accent-dark);
}

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

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

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


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

.similar ul {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin: 0;
padding: 0;
list-style: none;
}

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

.similar-thumb {
display: block;
overflow: hidden;
border-radius: 0;
margin: 0 0 10px 0;
aspect-ratio: 3 / 2;
}

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

.similar-item:hover .similar-thumb img {
transform: scale(1.05);
}

.similar-title {
display: block;
font-size: 14px;
line-height: 1.6;
color: var(--text);
overflow-wrap: anywhere;
transition: color var(--transition);
}

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


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

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-item {
display: flex;
align-items: center;
gap: 12px;
list-style: none;
margin: 0;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}

.sidebox-new-thumb {
flex: none;
display: block;
width: 72px;
height: auto;
aspect-ratio: 3 / 2;
overflow: hidden;
border-radius: 0;
}

.sidebox-new-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

.sidebox-new-title {
min-width: 0;
font-size: 14px;
line-height: 1.6;
color: var(--text);
overflow-wrap: anywhere;
transition: color var(--transition);
}

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


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

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

#sociallink {
text-align:center;
position: relative;
margin: 0 auto 10px auto;
padding: 0 0 0 0;
}

#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,
.similar-head {
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,
.similar-head::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 28px;
height: 2px;
background: var(--accent);
}

/* 関連記事の見出しはPCでは詰まって見えるため、記事タイトル等と
   同じ38pxに底上げする（モバイルは現状の14pxのままで詰まって見えないため据え置き）。
   .similar-head単独(class1つ)だと、この要素が同時にマッチする
   h2.widget-title（type1+class1）の方が詳細度で勝ってしまうため、
   .widget-title.similar-head（class2つ）にして確実に上書きする */
@media only screen and (min-width: 768px) {
.widget-title.similar-head {
margin-bottom: 38px;
}
}

.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;
/* スクロール誘導矢印からのジャンプ時、固定ヘッダーに見出しが
   隠れないよう、その分の余白を確保してから止まるようにする */
scroll-margin-top: calc(var(--header-height) + 46px);
}

.topbox .widget {
margin: 0 0 150px 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{
font-size: 16px;
line-height: 160%;
color: #444;
margin: 0 0 0 0;
padding: 7px 10px 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-family: var(--font-display);
font-size: 24px;
font-weight: normal;
letter-spacing: 0.03em;
font-style: italic;
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);
}

/* トップページのウィジェットエリア（.topbox）内でH2見出しブロックを
   単体（グループ化なし）で使った場合も、自動生成される見出しと
   同じ中央揃えデザインになるようにする（.widget h2.wp-block-heading の
   左揃えルールより後に置いて上書き） */
.topbox h2.wp-block-heading,
.topbox .wp-block-group h2.wp-block-heading {
position: relative;
font-family: var(--font-display);
font-size: 24px !important;
font-weight: normal;
letter-spacing: 0.03em;
font-style: italic;
padding: 0px 0px 14px 0px !important;
margin: 0px auto 40px auto !important;
border-bottom: 1px solid var(--border);
color: var(--ink);
max-width: 380px;
text-align: center;
}

.topbox h2.wp-block-heading::after,
.topbox .wp-block-group h2.wp-block-heading::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 ;
}

.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 .textwidget,
.singlebox .textwidget p {
font-size: 16px;
color: #444;
line-height: 170%;
margin: 0 0 0px 0;
padding: 5px 0 5px 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;
}

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


/* トップページ・記事まわりのウィジェットは「本文扱い」で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;
}


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

/* ブロック版タグクラウドは<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;
}


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

table#wp-calendar {
width: 100%
}

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

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


/* ソーシャルウィジェット（My Song）
---------------------------------------------------- */

.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 {
height: 26px !important;
width: 24px !important;
padding: 0px 8px;
}

.topbox .wp-social-link svg {
height: 26px !important; 
width: 23px !important; 
padding-left: 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__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;
}



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

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

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

.responsive-tabel-01 th,
.responsive-tabel-01 td {
box-sizing: border-box;
}

.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 0; }
.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 var(--border); }
}



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

.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: 60px 20px 50px 20px; }
body.home .wrapper { padding: 0 20px; }
/* .header-inner / #nav はPC/SP共通の固定ヘッダー用ルールをそのまま使うためここでは上書きしない */
#slidedown-nav { width: 728px; }
.cycle-slideshow { width: 728px; height: auto; margin: 0 ; overflow: hidden; }
.twothird { width: 460px; margin-right:10px; }
.footer-inner { width: 728px; padding: 0px 0px;}
}


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

@media only screen and (max-width: 767px) {
.wrapper { width: auto; padding: 60px 21px 50px 21px; }
body.home .wrapper { padding: 0 21px; }
/* ヘッダー・ロゴ・#nav は固定ヘッダー化に伴いPC/SP共通の基本ルールをそのまま使うため、
   ここでの個別上書きは行わない（以前はここでモバイル専用のフルスクリーンオーバーレイに
   していたが、そのデザインを常時適用に統一したため重複削除） */
/* ホバーでサブメニューが開かないよう打ち消す（タップが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;
}
/* トグルで開いた場合のみ表示 */
#nav .nav-menu .sub-menu.sub-menu-open,
#nav .nav-menu .children.sub-menu-open {
display: block;
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
#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;
}
}
#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: 40px; }
#slidedown-nav { visibility: hidden; }
.cycle-slideshow { width: auto; height: auto; margin: 0 ; overflow: hidden; }
p { font-size: 15px; }
.footer-inner { width: auto; padding: 0 21px; }
.mobile-display-none { display: none; }
.single-contents br { display: none; }
.topbox .widget { margin: 0 0 80px 0; }

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

/* 関連記事もスマホはサイドバー新着記事と同じ「左に画像・右にタイトル」に */
.similar-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.similar-thumb {
flex: none;
width: 96px;
height: auto;
aspect-ratio: 3 / 2;
margin: 0;
}
.similar-title {
min-width: 0;
font-size: 14px;
}
}






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

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


/* *****************************************************************
*	ボタン・販売ページ用パーツ
*	投稿・固定ページの本文に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;
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;
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);
}


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

/* メニューがPC/SP共通のフルスクリーン縦一列になったため、検索アイコンも
   画面幅を問わず常にメニュー最終行に表示する（以前はモバイル縦向きのみだった） */
#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;
}

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



/* *****************************************************************
*	PC用メニュー（minimaljournalのPC縮小メニューと同じ意匠）
*	mysongはPCでも常時ハンバーガーの設計なので、開いたメニューは
*	モバイルの「ヘッダー下パネル」ではなく画面中央の全画面オーバーレイで
*	ゆったり見せる。ハンバーガーも一回り大きい極細線＋ホバー演出にする
* ***************************************************************** */

@media (min-width: 768px) {

.toggle {
top: calc((var(--header-height) - 52px) / 2);
}

/* PC用ハンバーガーはモバイルより一回り大きく・線を極細に */
.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;
}

/* 開いたメニューは画面中央の全画面オーバーレイ（中央寄せ・大きめ文字） */
#nav {
top: 0;
height: 100dvh;
align-items: center;
justify-content: center;
text-align: center;
padding: 0;
}

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

#nav .nav-menu li {
display: block;
border-bottom: none;
position: relative;
}

#nav .nav-menu li a {
position: relative;
font-size: 18px;
font-weight: 600;
padding: 12px 28px;
}

/* ホバー・現在地は項目下端のアクセントバーで示す */
#nav .nav-menu > li > a::after {
content: "";
position: absolute;
left: 28px;
right: 28px;
bottom: 8px;
height: 2px;
background: var(--accent);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.25s ease;
}

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

/* サブメニュートグル：▼をrotateで▶に読み替え、リンク文字の右外側に置く */
#nav.nav-open .sub-menu-toggle {
display: block;
position: absolute;
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);
}

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

/* サブメニューは親項目の右側の余白に縦積みのフライアウトで表示
   （クリック開閉なので近接項目との衝突・ホバー誤爆が起きない） */
#nav.nav-open .nav-menu .sub-menu,
#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;
}

#nav.nav-open .nav-menu .sub-menu.sub-menu-open,
#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;
}

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

#nav.nav-open .nav-menu .sub-menu a,
#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;
}

/* サブメニューのホバーも下線アクセントで統一 */
#nav.nav-open .nav-menu .sub-menu a::after,
#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;
}

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

}

/* メニューが開いている間はトップに戻るボタンを隠す（オーバーレイの裏に
   透けて見えるのを防ぐ。PC・モバイル共通なので@mediaの外に置く） */
body:has(#nav.nav-open) #topcontrol {
opacity: 0 !important;
pointer-events: none !important;
}

/* 空のウィジェットエリアの箱は余白ごと非表示にする
   （ウィジェット未設定のエリアが余計な隙間として残らないように。
   .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%;
}