@charset "UTF-8";
/* ****************************************************
		 　基本の設定
***************************************************** */
:root {
  --color-text: #454034;
  --color-white: #fff;
  --color-link: #4f73a5;
  --color-hover: #3a5882;
  --color-key: #dde3d8;
  --margin-list-before: clamp(2rem, calc(1.85rem + 0.625vw), 2.6rem);
  --text-size-auto-mega:  clamp(1.2rem, calc(1rem + 0.625vw), 1.5rem);
  --text-size-auto-large:  clamp(0.8rem, calc(0.65rem + 0.625vw), 1.1rem);
  --text-size-auto-normal: clamp(0.8rem, calc(0.65rem + 0.625vw), 1rem);
  --text-size-auto-small: clamp(0.7rem, calc(0.55rem + 0.625vw), 0.85rem);
  --text-size-auto-095: clamp(0.8rem, calc(0.6rem + 0.625vw), 0.95rem);
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E");
  --icon-check-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M469.402 35.492C334.09 110.664 197.114 324.5 197.114 324.5L73.509 184.176 0 254.336l178.732 222.172 65.15-2.504C327.414 223.414 512 55.539 512 55.539z'/%3E%3C/svg%3E");
  --icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M384 336l-192 0c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l133.5 0c4.2 0 8.3 1.7 11.3 4.7l58.5 58.5c3 3 4.7 7.1 4.7 11.3L400 320c0 8.8-7.2 16-16 16zM192 384l192 0c35.3 0 64-28.7 64-64l0-197.5c0-17-6.7-33.3-18.7-45.3L370.7 18.7C358.7 6.7 342.5 0 325.5 0L192 0c-35.3 0-64 28.7-64 64l0 256c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-16-48 0 0 16c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l16 0 0-48-16 0z'/%3E%3C/svg%3E");
  --icon-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M480 80c8.8 0 16 7.2 16 16l0 256c0 8.8-7.2 16-16 16l-320 0c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l320 0zM160 32c-35.3 0-64 28.7-64 64l0 256c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-256c0-35.3-28.7-64-64-64L160 32zm80 112a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm140.7 3.8c-4.3-7.3-12.2-11.8-20.7-11.8s-16.4 4.5-20.7 11.8l-46.5 79-17.2-24.6c-4.5-6.4-11.8-10.2-19.7-10.2s-15.2 3.8-19.7 10.2l-56 80c-5.1 7.3-5.8 16.9-1.6 24.8S191.1 320 200 320l240 0c8.6 0 16.6-4.6 20.8-12.1s4.2-16.7-.1-24.1l-80-136zM48 152c0-13.3-10.7-24-24-24S0 138.7 0 152L0 448c0 35.3 28.7 64 64 64l360 0c13.3 0 24-10.7 24-24s-10.7-24-24-24L64 464c-8.8 0-16-7.2-16-16l0-296z'/%3E%3C/svg%3E");
  --icon-clone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M464 0H144c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h320c26.51 0 48-21.49 48-48v-48h48c26.51 0 48-21.49 48-48V48c0-26.51-21.49-48-48-48zM362 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h42v224c0 26.51 21.49 48 48 48h224v42a6 6 0 0 1-6 6zm96-96H150a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h308a6 6 0 0 1 6 6v308a6 6 0 0 1-6 6z'/%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: "Kosugi Maru", "Hiragino Maru Gothic ProN", "Quicksand", sans-serif;
  line-height: 1.8;
  color: var(--color-text);
  font-size: 1rem;
  letter-spacing: 1px;
  padding-top: 60px;
  background: #f3f1ed;
  max-width: 100vw;
}

html {
  scroll-behavior: smooth !important;
}


/* ****************************************************
		 　カラム設定
***************************************************** */

/* --- レイアウトのベース --- */
.container {
    display: flex;
    flex-direction: column; /* スマホでは縦に並べる */
    width: 100%;
    justify-content: flex-end;
    align-items: flex-start;
}

/* --- メインコンテンツエリア --- */
main {
    width: 100%;
    padding: clamp(8px, 1.4vw + 2px, 22px);
    box-sizing: border-box;
    background: #f6f4f1;
    margin: 1em 0;
}

/* --- サイドバー（スマホ：初期状態は隠す） --- */
aside.sidebar {
    position: fixed;
    top: 0;
    left: -280px; /* 画面の左外に隠す */
    width: 280px;
    height: 100vh;
    z-index: 1000;
    transition: all 0.3s ease;
    overflow-y: auto;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    background: #f6f4f1;
    margin: 1em 0;
    padding: 15px;
}

/* スマホでメニューを開いた時のクラス */
.container.menu-open aside.sidebar {
    left: 0; /* 画面内にスライド */
}

@media (min-width: 1024px) {
    .container {
        display: flex;
        flex-direction: row;
        max-width: 1200px;
        margin: 0 auto;
        gap: 1em;
        padding: 0;
        /* ↓【ここを変更】flex-startを削除、または stretch に */
        align-items: stretch; 
    }

    main{
        max-width: 960px;
    }

    aside.sidebar {
        position: static !important;
        width: 376px;
        height: auto;
        min-height: 100%;
        order: 2;
        box-shadow: none;
        display: block !important;
        padding: 19px;
        overflow: visible !important; /* ← これは維持 */

        /* ↓ これを追加 */
        overflow-y: visible !important;
    }

     .sidebar-toc {
        position: -webkit-sticky;
        position: sticky;
        top: 80px;
        z-index: 10;
        /* ↓ max-height と overflow-y を削除またはコメントアウト */
        /* max-height: calc(100vh - 100px); */
        /* overflow-y: auto; */
    }
}

@media screen and (min-width: 1600px){

	.container{ max-width: 1500px;}
	
	main {
		font-size: 1.1rem;
	}

}


/* 設定
---------------------------------*/
.inner-container {
  max-width: 100%;
  padding-left: 4px;
  padding-right: 4px;
  container-type: inline-size;
}

/* 画像や動画が親要素を突き破らないようにする */
.inner-container img,
.inner-container video {
  max-width: 100%;
  height: auto;
}

.inner-container iframe {
  max-width: 100%;
}

/* 長いURLや英単語を強制的に改行させる */
.inner-container p,
.inner-container li,
.inner-container h1,
.inner-container h2,
.inner-container h3 {
  overflow-wrap: break-word; /* 枠の端で改行する */
  word-break: break-all; /* 長い英単語もバラして改行する */
}

.no-transition {
    transition: none !important;
}

a {
  color: var(--color-link);
  text-decoration: none;
}
a:hover{ color:var(--color-hover);}

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


/* p
---------------------------------*/

p { margin: 0 8px 2em;}
p.text-center{text-align: center;}

p.link-before {
    background: #3b90a3;
    color: #fff;
    margin: 1em 0;
    padding: 0 0.4em;
    display: inline-block;
    border-radius: 5px;
}

p.link-before + a {
    margin-top: 0;
}

p:has(.note_info){margin: 5em 0 4em;}
p.last-text , p.p-top-L { margin-top: 5em;}
p.p-bottom-L { margin-bottom: 4em;}
p.text-right{text-align: right;}

/* eyecatch
---------------------------------*/
.eyecatch {
    margin: auto;
    width: fit-content;
}
.eyecatch img{
  width:auto;
  max-height: 500px;
}




/* ****************************************************
		 　header
***************************************************** */
/* --- ヘッダー全体の設計 --- */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 60px;
    background: var(--color-key);
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    transition: transform 0.3s ease; 
    z-index: 1100;
}

/* スマホ用：スクロールで隠すクラス */
header.header-hide {
    transform: translateY(-100%);
}


/* --- ロゴエリア --- */
.site-logo {
    flex: 1;
    text-align: center;
    padding-right: 40px;
}

.site-logo h1, .site-logo p {
    margin: 0;
    font-size: 1.4rem;
    font-weight: bold;
}

.site-logo a {
    text-decoration: none;
    color:var(--color-text);
}

/* --- ハンバーガーボタン（スマホ専用） --- */
#menu-toggle {
    display: flex;
    flex-direction: column; /* 縦並びに変更 */
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    gap: 4px; /* アイコンと文字の隙間 */
    color: var(--color-text);
}

.hamburger-icon {
    width: 24px;
    height: 16px; /* 縦幅を少し抑えるとバランスが良いです */
    position: relative;
}

/* 三本ラインの基本スタイル（再掲） */
.hamburger-icon span,
.hamburger-icon span::before,
.hamburger-icon span::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background: currentColor;
    left: 0;
    transition: 0.3s;
}

.hamburger-icon span { top: 7px; }         /* 真ん中 */
.hamburger-icon span::before { top: -7px; } /* 上 */
.hamburger-icon span::after { bottom: -7px; } /* 下 */

.menu-text {
    font-size: 0.65rem; /* 文字を少し小さくして上品に */
    font-weight: bold;
    line-height: 1;
}

/* --- ページトップへ戻るボタン --- */
#back-to-top {
    position: fixed !important;
    right: 20px;
    bottom: 20px;
    width: 45px;
    height: 45px;
    background: #93a683;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 2000;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);

    /* --- 初期状態（非表示） --- */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* transformを少し大きく動かすと、消える挙動がはっきりします */
    transform: translateY(20px) scale(0.8);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* 加減速をつけて滑らかに */
}

/* 表示状態 */
#back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

#back-to-top:hover {
    opacity: 0.8;
}

/* --- PC表示（1024px以上）の調整 --- */

@media (min-width: 1024px) {
    header {
        position: relative; 
        height: 100px;
        padding: 0 40px;
        transform: none !important; /* JSによる移動を無効化 */
    }

    /* PCではヘッダーが場所を取るのでbodyの余白をリセット */
    body {
        padding-top: 0;
    }

    /* PCではメニュー開閉ボタンを非表示 */
    #menu-toggle {
        display: none;
    }

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

/* ****************************************************
		 　見出し
***************************************************** */
/* 見出しに飛んだとき、ヘッダーの高さ分（60px）だけ手前で止まるようにする */
h2, h3, table {
  scroll-margin-top: 80px;
}

.inner-container h2 {
    margin-bottom: 1em;
    background: var(--color-key);
    padding: 20px;
    font-size: 1.3rem;
    margin: 3rem 0 1.8rem;
    border-radius: 3px;
}
h2 ~ h2 { margin-top: 4em; }

.inner-container h3:not(.search-item-title , .archive-item-title) {
    border: 0;
    display: inline-block;
    background: #eaede7;
    border-radius: 10px;
    font-size: 1.2rem;
    padding: 4px 1em;
	margin-top: 2em;
    margin-bottom: 1em;
}

.inner-container h4 {
    display: inline-block;
    border-bottom: 3px solid #e3dfd6;
    border-top: none;
    font-size: 1.1rem;
    padding: 0 .5em;
    margin-bottom: 1em;
    margin-left: .5em;
}

.inner-container h4.step-list-h{
	margin-bottom:.5em;
}

.sidebar h2, .sidebar h3 {
    background-color: var(--cocoon-xx-thin-color);
    padding: 12px;
    margin: 16px 0;
    border-radius: 2px;
    font-size: 1.2rem;
    background-color: #eaede7;
}


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

table {
  max-width: 100%;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0px;
  margin-bottom: 20px;
}



/* ****************************************************
		 　パンくず 目次
***************************************************** */
.breadcrumb-container {
  margin-bottom: 1rem;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/* =========================================
   目次全体の基本スタイル (Main)
========================================= */

/* ジャンプ先の span を調整 */
span[id^="section-"] {
    display: inline-block; /* 高さを認識させる */
    scroll-margin-top: 100px; /* JavaScriptが動かない時のための保険 */
}

/* --- 元のデザインを維持 --- */
main .toc {
    padding: 1em 1em 1em 1.6em;
    margin: auto;
    background: #f3f1e9;
    width: fit-content;
    min-width: 50%;
}

.toc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-bottom: 1em;
}

.toc-title {
    margin: 0;
    font-weight: bold;
}

.toc-checkbox {
    display: none;
}


/* --- ボタンのデザイン（＋/ー） --- */
.toc-button {
    cursor: pointer;
    width: 24px;  /* ボタンの幅 */
    height: 24px; /* ボタンの高さ */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e3dfd6;
    border-radius: 4px;
    padding: 0;
}

/* ボタンの中の記号(span)の設定 */
.toc-button span {
    position: relative;
    width: 12px;
    height: 2px;
    background: var(--color-text);
    display: block;
    transition: transform 0.3s ease; /* 回転スピード */
}

/* ＋の縦線を作る（疑似要素） */
.toc-button span::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    transform: rotate(90deg); /* 90度回転させて縦線に */
    transition: transform 0.3s ease;
}

/* --- 回転の動き --- */

/* 開いている状態（checked）: マイナスにする（縦線を横に重ねる） */
.toc-checkbox:checked ~ .toc-header .toc-button span::after {
    transform: rotate(0deg);
}
.toc-checkbox:checked ~ .toc-header .toc-button span {
    transform: rotate(180deg); /* 180度くるっと回る */
}

/* 閉じている状態（not checked）: プラスにする（デフォルトの状態） */
.toc-checkbox:not(:checked) ~ .toc-header .toc-button span::after {
    transform: rotate(90deg);
}
.toc-checkbox:not(:checked) ~ .toc-header .toc-button span {
    transform: rotate(0deg);
}

.toc-button::before { content: none !important; }

/* --- アニメーションの設定（ここが重要） --- */
.toc-list {
    display: grid;
    grid-template-rows: 1fr; /* 開いている時の高さ */
    transition: grid-template-rows 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 1;
    overflow: hidden;
}

/* 閉じている時：高さを0にして余白も消す */
.toc-checkbox:not(:checked) ~ .toc-list {
    grid-template-rows: 0fr;
    opacity: 0;
    margin-top: 0;
}

/* 中身が消えないようにするおまじない */
.toc-list > ul {
    min-height: 0;
}

.toc-list ul {
    list-style: decimal;
    padding-left: 1.8em;
}

.toc-list ul ul {
    list-style: disc;
    margin-right: 1em;
}


/* --- サイドバー用 --- */
.sidebar-toc .toc-list {
    display: block !important;
    opacity: 1 !important;
    grid-template-rows: none !important;
}


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

.sidebar ul:not(.toc-list ul) {list-style: none;}
.sidebar ul a {
    display: block;
    color: var(--color-text);
}
.sidebar .widget_recent_entries ul a { padding: 8px 4px;}
.sidebar .widget_recent_entries ul a:hover {text-decoration: underline;}

/* 検索
---------------------------------*/
.sidebar-search form {
    display: flex;
    gap: .5em;
    margin: 0 0 2em;
}
.sidebar-search span.search {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 5px 5px 0;
    display: inline-block;
}
.sidebar-search input {
    font-size: .95rem;
    padding: 1em 5px;
    border-radius: 8px;
    border: 1px solid #bbb;
    flex: 1; /* 余ったスペースをすべて使う */
    min-width: 0; /* フレックスボックス内での幅崩れを防止 */
}

.sidebar-search button {
    border: none;
    background: #776b5f;
    color: #fff;
    border-radius: 8px;
    padding: 0 15px;
    min-width: 60px;
    flex-shrink: 0; /* ボタンが勝手に縮まないように固定 */
    cursor: pointer;
}

/* 目次
---------------------------------*/
#sidebar .toc-title,
#slide-in-sidebar .toc-title {
    display: none;
}




#sidebar.toc,
#slide-in-sidebar .toc li {
    margin: .1em 0;
}

.sidebar-toc a {
    padding: 2px 0;
}


.toc-list li a.current ,
.toc-list ol > li:has(a.current) {
	font-weight:bold;
}

/* サイドバー内の目次ハイライト */
.sidebar-toc .toc-list ul li a.current {
    font-weight: bold;

}


/************************************************
 * サイドバー：カテゴリーメニュー
 ************************************************/

.widget_categories {
    width: 100%;
}

#categories-2 {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

/* 親カテゴリ名とボタンの列 */
.cat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 0;
}

.cat-header a {
    flex: 1;
    color: #454034;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.05rem;
}

/* --- ボタンのデザイン（目次と統一） --- */
.parent_cat .toc-button {
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e3dfd6; /* サイドバーの色味に合わせる */
    border-radius: 4px;
}

.parent_cat .toc-button span {
    position: relative;
    width: 12px;
    height: 2px;
    background: #454034;
    display: block;
    transition: transform 0.3s ease;
}

.parent_cat .toc-button span::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}

/* --- 回転アニメーション（目次と同期） --- */
.toc-checkbox:checked ~ .cat-header .toc-button span::after {
    transform: rotate(0deg);
}
.toc-checkbox:checked ~ .cat-header .toc-button span {
    transform: rotate(180deg);
}

/* --- スルスル開閉（Gridアニメーション） --- */
.parent_cat .toc-list {
    display: grid;
    grid-template-rows: 0fr; /* 👈 閉じている時は高さ0 */
    opacity: 0;
    transition: grid-template-rows 0.3s ease-out, opacity 0.3s ease-out;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 開いた時 */
.toc-checkbox:checked ~ .toc-list {
    grid-template-rows: 1fr; 
    opacity: 1;
    margin-bottom: 10px; 
}

.parent_cat .toc-list > div {
    min-height: 0;
}

/* 子カテゴリのリスト項目 */
.parent_cat .children li {
    padding: 6px 0 6px 1.5rem;
    list-style: none;
}

.parent_cat .children li a {
    text-decoration: none;
}

/* ****************************************************
		 　画像クリック
***************************************************** */

#image-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex; /* 常にflexにしておく */
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: zoom-out;

    /* ここから「ふわっと」の設定 */
    opacity: 0;           /* 最初は透明 */
    visibility: hidden;   /* クリックできないように隠す */
    transition: opacity 0.1s ease, visibility 0.1s; 
}

/* 表示された時 */
#image-overlay.active {
    opacity: 1;           /* 不透明にする */
    visibility: visible;  /* 表示する */
    transition: opacity 0.5s ease, visibility 0.5s;
}

/* 中の画像のアニメーション */
#image-overlay img {
    max-width: 90%;
    max-height: 90%;
    border: 4px solid #fff;
    
    /* 少し小さめから元のサイズに戻る動き */
    transform: scale(0.8); 
    transition: transform 0.1s ease;
}

#image-overlay.active img {
    transform: scale(1); /* 元のサイズに */
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* ****************************************************
		 　コンテンツ
***************************************************** */


/* 自動リンク
---------------------------------*/
ul.about-link{margin-left:1.5em;}


/* 自動リンク
---------------------------------*/
.auto-link {
    color: #3c81d0; /* リンクの色 */
    text-decoration: none;
    transition: all 0.3s;
}

.auto-link:hover {
    border-bottom: 1px solid #4a90e2;
}

/* ****************************************************
		 　ブログカード
***************************************************** */
/* --- 1. 基本設定（スマホ基準） --- */
.blog-card-link {
    text-decoration: none !important;
    color: inherit !important;
    display: block;
    margin: 1.5em 0;
}

.blog-card {
    display: flex;
    background: #ebeef1;
    border: 2px solid #d1dce9;
    overflow: hidden;
    transition: all 0.5s ease;
    position: relative;
    max-width: 98%; /* スマホで左右に少し余白を作る */
    margin: auto;
    box-shadow: 0 1px 8px #dedede;
    padding: 5px;
    align-items: center; /* 画像とテキストの高さを中央に揃える */
}

.blog-card:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-color: #ccc;
    transform: translateY(-2px);
}

/* --- 2. 画像部分 --- */
.blog-card-img {
    width: 30%;
    min-width: 100px; /* スマホ用に少し小さく調整 */
    max-width: 200px;
    height: 90px; /* 高さを固定すると並びが綺麗です */
    background: #f0f0f0;
    flex-shrink: 0;
    margin: 5px;
}

.blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- 3. テキスト部分 --- */
.blog-card-body {
    padding: 10px 10px 5px 10px; /* 余白を少し詰めました */
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

/* 記事タイトル（スマホでは小さめ） */
.blog-card-title {
    font-weight: bold;
    font-size: .85rem; /* 少しだけ大きくして視認性アップ */
    line-height: 1.3;
    margin-bottom: 4px;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--color-link, #333);
    overflow: hidden;
    padding-bottom: 2px;
    border-bottom: 2px solid #c5d0dd;
}

/* 説明文（スマホではかなり小さめ） */
.blog-card-text {
    color: #555;
    margin-bottom: 4px;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .7rem; /* 予定通りの極小サイズ */
    line-height: 1.4;
}

/* ドメイン表示 */
.blog-card-site {
    font-size: 0.65rem;
    color: #999;
    text-align: right;
}

/* --- 4. ラベル設定 --- */
.blog-card::before {
    content: "あわせて読みたい";
    position: absolute;
    top: 0; left: 0;
    background: #cd874a;
    color: #fff;
    font-size: 9px; /* スマホ用に少し小さく */
    padding: 1px 6px;
    z-index: 10;
    border-radius: 0 0 4px 0;
}

/* --- 5. レスポンシブ（480px以上） --- */
@container (min-width: 480px) {
    .blog-card {
        padding: 8px;
    }
    .blog-card-img {
        width: 160px;
        height: 110px;
    }
    .blog-card-title {
        font-size: 1rem;
        margin-bottom: 8px;
    }
    .blog-card-text {
        font-size: .85rem;
    }
    .blog-card::before {
        font-size: 10px;
        padding: 2px 8px;
    }
}

/************************************
** 成分リスト
************************************/
dl.component-dl {
	margin: auto 1em 4em;
}

dl.component-dl dt {
    font-weight: bold;
}

dl.component-dl dd {
    margin-left: 1em;
    margin-bottom: 1em;
}

dl.component-dl ul {
    margin: 0 0 1em 1em;
	padding: 0;
}

/************************************
** ステップリスト
************************************/
.step-list {
    list-style: none;
    counter-reset: step-counter;
    padding-left: 0;
}

.step-list li {
    counter-increment: step-counter;
    position: relative;
    padding-bottom: 15px;
    padding-left: 10px;
}

/* 「STEP + 数字」のデザイン */
.step-list li::before {
    content: "STEP " counter(step-counter);
    background: #b5afa4;
    color: #ffffff;
    padding: 2px 10px;
    border-radius: 4px;
    margin-right: 10px;
    font-size: 0.8em;
}

/* 矢印（↓）を境界線で表現する */
.step-list li:not(:last-child)::after {
    content: "↓";
    position: absolute;
    bottom: -12px;
    left: 30px;
    color: #d1dbc8;
    font-weight: bold;
}

/************************************
** アコーディオン summary
************************************/

details.custom-details {
    margin: 1em 0;
}

/* 1. summary全体のレイアウト */
.custom-details summary {
    display: flex;
    align-items: center;
    width: fit-content; /* クリック範囲を文字とアイコンに限定 */
    cursor: pointer;
    list-style: none;
    color: #697d56;
    font-weight: bold;
    padding: 8px 0;
    outline: none;
}

/* デフォルトの矢印を消す */
.custom-details summary::-webkit-details-marker {
    display: none;
}

/* 2. アイコン（＋ボタン）の外枠 */
.toggle-icon {
    position: relative;
    flex: 0 0 24px;
    height: 24px;
    margin-right: 12px;
    background-color: #b9ae96;
    border-radius: 4px;
    display: block;
}

/* アイコン：横棒 */
.toggle-icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 3px;
    background-color: #fff;
    border-radius: 5px;
    transform: translate(-50%, -50%);
}

/* アイコン：縦棒（回転アニメーション） */
.toggle-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 60%;
    background-color: #fff;
    border-radius: 5px;
    transform: translate(-50%, -50%) rotate(0deg);
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* 開いた（open状態）時の縦棒の動き */
.custom-details[open] .toggle-icon::after {
    transform: translate(-50%, -50%) rotate(270deg);
}

/* 3. コンテンツエリア（基本状態：閉じている時） */
.details-content {
    opacity: 0;
    transform: translateY(-12px);
    visibility: hidden;
    height: 0;
    overflow: hidden;

    transition:
        opacity 1000ms ease,
        transform 1000ms ease;
    transition-delay: 0ms;
}

.details-content.is-open {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 200ms;
}

.details-content.is-closing {
    opacity: 0;
    transform: translateY(0);
    transition-delay: 0ms;
}

/* 画像自体のレイアウト（お好みで調整） */
.details-content figure {
    margin: 0;
    padding: 0;
}

.details-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}

/************************************
**** カテゴリページ トップページ
************************************/

/* カテゴリページ専用：縦並びリスト */
.archive-list-container {
    margin: 40px 0;
    max-width: 900px; /* 読みやすい幅に制限 */
}

.archive-list {
    display: flex;
    flex-direction: column; /* 縦に並べる */
    gap: 20px;
}

.archive-list h3 {
    margin: 0;
    background: 0;
    border-radius: 0;
    padding: 0;
}


.archive-item {
    border-bottom: 1px solid #efe0c8;
    padding-bottom: 20px;
    transition: opacity 0.3s;
}

.archive-item:last-child {
    border-bottom: none;
}

.archive-item-link {
    display: flex; /* 画像とテキストを横に並べる */
    gap: 20px;
    text-decoration: none;
    color: inherit;
}

.archive-item-link:hover {
    opacity: 0.8;
}

/* サムネイル */
.archive-item-thumbnail {
    flex: 0 0 38%;
    height: auto;
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
}
.archive-item-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* テキスト部分 */
.archive-item-body {
    flex: 1;
}

.archive-item-title {
    font-size: 1.25rem;
    margin: 0 0 10px 0;
    color: #333;
    line-height: 1.4;
    font-weight: bold;
}

.archive-item-desc {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
    line-height: 1.6;
    /* 2行まで表示して省略 */
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* スマホ対応：画像とテキストを縦並びに戻す */
@media (max-width: 600px) {
    .archive-item-link {
        flex-direction: column;
        gap: 12px;
    }
    .archive-item-thumbnail {
        flex: 0 0 auto;
        width: 100%;
        height: 180px;
    }
    .archive-item-title {
        font-size: 1.1rem;
    }
}

/************************************
**** 検索結果
************************************/

/* 検索結果セクション全体のレイアウト */
.search-result-content {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.search-result-content .result-title {
    margin-bottom: 2rem;
    border-bottom: 2px solid #eee;
}

/* カードを並べるグリッド（スマホ1列、PC3列） */
.search-result-content .post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* カード単体のスタイル */
.search-result-content .search-item-card {
    background: #fff;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    padding: 10px;
    border: 1px solid #e3dfd6;
}

.search-item-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.12);
}

.search-item-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* サムネイル部分 */
.search-item-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f0f0f0;
}

.search-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* テキスト部分 */
.search-item-body {
    padding: 15px;
}

.search-item-title {
    font-size: 1.1rem;
    margin: 0 0 10px 0;
    line-height: 1.4;
    font-weight: bold;
    /* 2行以上は「...」にする設定 */
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-item-excerpt {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
    /* 3行以上は「...」にする設定 */
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 0件の時のスタイル */
.no-result {
    padding: 3rem 1rem;
    text-align: center;
    background: #f9f9f9;
    border-radius: 8px;
    color: #888;
}

/************************************
**** 関連記事カード（干渉防止・2行スライド版）
************************************/

/* 1. 全体コンテナ */
.related-articles-section {
    position: relative;
    margin-top: 4em;
    padding-bottom: 20px;
}

/* スライダー内の見出し */
main div.related-articles-section h3.section-h {
    background: none;
    color: var(--color-text);
    padding: 0;
    margin: .5em 0;
    font-size: 1.3rem;
    border: 0;
}

/* 2. カードと矢印を横に並べる親 */
.related-flex-container {
    display: flex;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    border-top: 1px solid #e3dfd6;
    border-bottom: 1px solid #e3dfd6;
    padding: 20px 0; /* 変数が不明な場合は数値に */
}

/* 3. スクロールエリア */
.related-scroll-wrapper {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    cursor: grab;
    user-select: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding: 10px 0; /* カードの影が切れないように少し余白を */
}

.related-scroll-wrapper:active {
    cursor: grabbing;
}

.related-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

/* 4. カードが並ぶグリッド（2行設定） */
.scroll-grid {
    display: grid !important; 
    grid-template-rows: repeat(2, 1fr); /* 2行に固定 */
    grid-auto-flow: column; /* 横に向かって並べる */
    width: max-content;
    gap: 15px; 
    margin: 0;
}

/* 5. 関連記事内のカード設定 */
.scroll-grid .post-card {
    width: 220px; 
    flex: none; /* flexの干渉を防止 */
    transition: opacity 0.3s ease;
    white-space: normal;
    background: #fff;
    border-radius: 4px; /* スライダー用はお好みで */
    transform: none !important; /* 一覧ページの浮き上がりを無効化 */
    box-shadow: none; /* 一覧ページの影を一旦リセット */
    margin: 0;
    padding: 10px;
    border: 1px solid #eee;
}

/* 関連記事カードのホバー（浮かせず、透かすだけ） */
.scroll-grid .post-card:hover {
    transform: none; 
    opacity: 0.8;
    box-shadow: none;
}

.post-card-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9; /* ここを 4 / 3 に固定 */
    overflow: hidden;
}

.post-card-thumbnail img {
    width: 100%;
    height: 100%;
    /* 【重要】比率を保ったまま枠いっぱいに広げ、はみ出しをカット */
    object-fit: cover; 
    object-position: center; /* 中央を基準に切り抜き */
}


.rose-content .post-card-thumbnail img {
    width: 100%;
    height: 100%;
    /* 【重要】比率を保ったまま枠いっぱいに広げ、はみ出しをカット */
    object-fit: scale-down;
}


/* スライダー内のタイトル文字調整 */
.scroll-grid .post-card-content h3 {
  background: none;
    font-size: 0.9rem;
    color: var(--color-text);
    margin: 5px 0 0 0;
    padding: 0;
    border: 0 ;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* 6. 右横の矢印ボタン */
.related-arrow-next {
    flex: 0 0 35px;
    background: #f3f1ed;
    border: 1px solid #e3dfd6;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--color-text);
    font-size: 1.4rem;
}

/* 7. レスポンシブ対応 */
@container (min-width: 768px) {
    .scroll-grid .post-card {
        width: 280px; /* PCでは少し大きく */
    }
}

@media screen and (max-width: 480px) {
    .related-arrow-next {
        display: none;
    }
    .related-flex-container {
        gap: 0;
    }
    .scroll-grid .post-card {
        width: 180px; /* スマホでは小さくして2段を見やすく */
    }
}

/************************************
**** ショップカード
************************************/

h2:has(+ .shop-card) {
    margin-bottom: 1em;
}

.shop-card {
    display: flex;
    flex-direction: column; /* スマホは縦並び */
    position: relative;
    z-index: 1;
    text-align: center;
    border-radius: 8px;
    padding: 0 .8em;
    margin: 1em 0;
    gap: 0;
    max-width: 100%;
    justify-content: center;
    align-items: center;
}

.shop-card-image {
    width: 250px;
    max-width: 80%;
    margin: 0 auto;
}

.shop-card-image a:has(img) {
    position: relative;
    margin-top: 30px;
    display: block;
}

.shop-card-image a:has(img)::before {
    content: "PR";
    position: absolute;
    top: -19px;
    left: 8px;
    background-color: #e3dfd6;
    color: #87806e;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 6px 12px 4px;
    border-radius: 12px 12px 0 0;
    pointer-events: none;
    z-index: 1;
}

.shop-card-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.shop-card-content {
    width: 100%;
    background: transparent;
    padding: 0;
    display: block;
}

p.shop-card-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #707967;
    margin: 1.5em 0 1em;
}

.shop-card-buttons {
    display: flex;
    flex-wrap: wrap; /* スマホで横並び・折り返し許可 */
    gap: 8px;
    margin: 0 auto 14px;
    padding: 0;
    list-style-type: none;
    width: 100%;
    max-width: 500px;
}

.shop-card-buttons a {
    display: flex;
    position: relative;
    flex: 1 1 calc(50% - 8px); /* 横幅を半分にする */
    min-width: 120px;
    min-height: 40px;
    overflow-x: hidden;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    transition: 0.3s ease-out;
    box-sizing: border-box;
    text-align: center;
    padding: 10px 4px;
    border-radius: 4px;
    text-decoration: none;
    color: #5d584c;
    background: #e3dfd6;
    font-size: 0.8rem;
    padding-right: 1em;
}
.shop-card-buttons a:hover {
    transform: translateY(-2px);}

.shop-card-buttons a:after {
    position: absolute;
    right: 12px;
    width: 6px;
    height: 6px;
    border-top: 2px solid;
    border-right: 2px solid;
    content: "";
    transform: rotate(45deg);
    box-sizing: border-box;
}

/* --- [2] コンテナ幅が700px以上の場合（PC・タブレット向け） --- */
@media screen and (min-width: 700px) {
    .shop-card {
        flex-direction: row; /* 横並びに戻す */
        text-align: left;
        gap: 25px;
        align-items: stretch;
    }

    .shop-card-image {
        flex: 0 1 300px;
        min-width: 100px;
        margin: 0;
        display: flex;
        align-items: center;
    }

    .shop-card-content {
        flex: 1;
        max-width: 65%;
        padding: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 10px 0;
    }

    .shop-card-buttons {
        flex-direction: column; /* PCでは縦並び */
        align-items: flex-start;
        gap: 1.2em;
        margin-top: 10px;
        margin-left: 0;
    }

    .shop-card-buttons a {
        flex: none;
        width: 100%;
        max-width: 250px;
        font-size: .95rem;
    }
}

/************************************
**** ad
************************************/
/* 親要素：中央寄せなどのレイアウト管理 */
.ad-wrapper-safe {
    margin: 30px auto 15px;
	text-align: center;
}

span.ad-label-simple {
    font-size: 11px;
    color: #8d8d8d;
    line-height: 1;
    padding: 0 1em;
}

/* 下部用 */
.ad-flexible-bottom {
	display: block;
    width: 100%;
	height: auto;
    min-height: 250px;
	max-height: 300px;
    margin: 0 auto;
}

/* 【下部用 （768px〜1024px）】 */
@container (min-width: 768px) {
    .ad-flexible-bottom {
		width: 100%;
		max-width: 728px;
        min-height: 90px;
		max-height: 300px;
    }
}

/* 【下部用 （1025px〜1600px以上）】 */
@container (min-width: 1025px) {
    .ad-flexible-bottom {
		width: 100%;
		max-width: 1200px;
		min-height: 90px;
        max-height: 300px; 
    }
}
/************************************
**** ad ダブルレクタングル
************************************/

.ad-wrapper-double + h2 , .ad-wrapper-single + h2 {
  margin-top: 3em !important;
}


/* --- 1. 共通設定 --- */
.my-ad-unit {
    display: block;
    width: 100%;
	min-height: 100px;
    max-height: 300px;
    margin: 0 auto;
}

/* --- 2. スマホ版まとめ枠 --- */
.ad-wrapper-single {
    background-color: #f8fbfe;
    padding: 20px 0 10px;
    position: relative;
    text-align: center;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ad-wrapper-single::before {
    content: "PR";
    font-size: 10px;
    color: #4989bf;
    position: absolute;
    left: 0; right: 0; top: 2px;
}

/* --- 3. PC・iPad用まとめ枠 --- */
.ad-wrapper-double {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f8fbfe;
    padding: 20px 5px 10px;
    margin: 40px auto;
    border-radius: 4px;
    position: relative;
}

/* --- 【新規追加】420px以上、767pxまでの設定 --- */
@container (min-width: 400px) and (max-width: 767px) {
    .my-ad-unit {
		width: 100%;
        max-width: 600px; 
        max-height: 300px;
    }
}

/* 768px以上の時のスタイル（2枚並び） */
@container (min-width: 768px) {
    .ad-wrapper-double {
        flex-direction: row;
        justify-content: center;
        border: 1px solid #c5d2db;
        padding: 10px 0; /* 元の設定を維持 */
        margin: 50px auto;
        max-width: 1200px;
        border-radius: 8px;
		gap: 10px;
    }
    
    .ad-wrapper-double::before {
        content: "SPONSORED LINK";
        position: absolute;
        bottom: -20px; /* 元の設定（枠外はみ出し）を維持 */
        /* bottom: 8px; 変更を破棄 */
        right: 20px;
        font-size: 9px;
        color: #93b5d1;
        letter-spacing: 0.1em;
    }

.ad-wrapper-double .ad-slot {
    flex: 1;
    display: flex;
    text-align: center;
    justify-content: center;
}

    .my-ad-unit {
      width: 100%;
      max-width: 336px;
      max-height: 300px;
      margin: 0;
    }
}

/* 1200px以上の隙間調整 */
@container (min-width: 1200px) {
	   .my-ad-unit {
      width: 100%;
      max-width: 480px;
      max-height: 300px;
      margin: 0;
    }
}

/* 【安全装置】767px以下では2枚目を消す */
@container (max-width: 767px) {
    .ad-wrapper-double .ad-slot:last-child {
        display: none;
    }
	
.ad-wrapper-double::before {
    content: "PR";
    font-size: 10px;
    color: #4989bf;
    position: absolute;
    left: 0; right: 0; top: 2px; bottom: auto;
	text-align: center;
}
	
}


/* ****************************************************
		 　フッター
***************************************************** */
footer {
    display: flex;
    flex-direction: column; /* スマホでは縦並び */
    align-items: center;    /* 中央揃え */
    padding: 3em 1em 2.5em;
    gap: 1em;
    background: var(--color-key);
}

footer p {margin: 0;}

footer p.site-name {
    font-size: 1.3em;
}

/* --- nav（二列並びの設定） --- */
.navi-footer ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* スマホは2列 */
    gap: 10px 20px;
    list-style: none;
    padding: 0;
    text-align: center;
    margin-bottom: 1em;
}

.copyright {
    font-size: 0.8em;
}

/* --- PCの時のレイアウト切り替え --- */
@media (min-width: 768px) {
    footer {
        flex-direction: row;    /* 横並びに変更 */
        align-items: flex-end; /* 下揃え */
        justify-content: space-between; /* 両端に寄せる */
        padding-inline: 5%;
    }

    .nav-copyright {
        text-align: right;     /* 右寄せ */
    }

    .navi-footer ul {
        display: flex;         /* PCでは横一列に */
        grid-template-columns: none;
        gap: 15px;
        margin-bottom: 5px;    /* コピーライトとの間隔 */
    }

    /* 前にやったスラッシュを入れるならここに追加 */
    .navi-footer li + li::before {
        content: "/";
        margin-right: 15px;
        color: #ccc;
    }
}