@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ｜印刷の便利帳
    Version: 2.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ==========================================================================
   方針（2026-07-31 潤くん決定）

   blog.mystella.me の子テーマ style.css を「そのまま」移植する。
   変えるのは色と文言と件数だけ。角丸・影・点線・ホバーの浮き上がり・
   余白の数値は、マイステラの値をそのまま使う。

   ※過去に私（Claude）の判断で角を立てたり影を消したりしたが、
     すべて元に戻した。意匠を変えたくなったときは潤くんが指示する。

   移植元：mystella-handover/child-theme/style.css
   ========================================================================== */

/* --- 計算ツール5ページ：本文をタイトルと左揃えにする（.post_contentの左右16px paddingを解除。2026-08-04）
   ※デスクトップ幅のみ。狭い画面ではこの16pxが画面端の余白を兼ねるため、解除すると本文がはみ出す（2026-08-05修正） --- */
@media (min-width: 960px) {
	.page-id-96 .post_content,
	.page-id-100 .post_content,
	.page-id-107 .post_content,
	.page-id-108 .post_content,
	.page-id-111 .post_content {
		padding-left: 0;
		padding-right: 0;
	}
}

:root {
	/* --- 基本 --- */
	--pt-kami:   #FBFAF7; /* 紙白：サイト全体の地 */
	--pt-haku:   #FFFFFF; /* 純白：カードの地 */
	--pt-sumi:   #1C1B18; /* 墨：文字（マイステラの --ink #303C49 にあたる） */
	--pt-usu:    #5A5852; /* 薄墨：補足（--sub #7d8894 にあたる） */
	--pt-kei:    #DEDAD2; /* 罫 */
	--pt-side:   #F4F2EC; /* サイドバー・CTAの地（--cream #F5F5F2 にあたる） */
	--pt-shadow: rgba(28,27,24,.18); /* 影（rgba(59,50,48,.2) にあたる） */

	/* --- 差し色 --- */
	--pt-shu:      #B5453E;
	--pt-shu-thin: rgba(181,69,62,.08);

	/* --- カテゴリ色 --- */
	--pt-compare: #6E7B7A; /* 藍鼠｜比べる */
	--pt-guide:   #8C7351; /* 煤竹｜頼み方ガイド */
	--pt-essay:   #77595A; /* 灰梅｜印刷と。 */
	--pt-news:    #5A5852; /* 薄墨｜お知らせ */

	/* --- 書体 --- */
	--pt-mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
	--pt-gothic: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
	--pt-en:     "Jost", sans-serif;
}

.pt-dot{color:var(--pt-shu);}


/* ==========================================================================
   書体（見出しとブランド＝明朝／本文とUI＝ゴシック／英字＝Jost）
   ========================================================================== */
.l-mainContent .post_content h2,
.l-mainContent .post_content h3,
.l-mainContent .post_content h4,
.c-pageTitle,
.p-articleTitle{
	font-family:var(--pt-mincho);
	font-weight:600;
}

/* --- 本文書体の統一（2026-08-09 潤くんイエス）
   投稿・固定ページの本文がSWELL初期設定（游ゴシック等の端末任せ）のままで、
   トップの Noto Sans JP と混在して見えていた。全ページの基本書体を
   --pt-gothic（Noto Sans JP）に統一する。
   ※ !important は body 一箇所だけ。子孫要素で個別に font-family を
     指定している箇所（明朝見出し・Jost英字など）はそのまま生きる。 --- */
body{
	font-family:var(--pt-gothic) !important;
}


/* ==========================================================================
   下部CTA（4バナー＋3カテゴリー）[pt_cta_footer]
   移植元：.ms-cta（数値そのまま）
   ========================================================================== */
.pt-cta{
	--c-compare:var(--pt-compare); --c-guide:var(--pt-guide); --c-essay:var(--pt-essay);
	max-width:1160px;margin:0 auto;box-sizing:border-box;
	font-family:var(--pt-gothic);
}
.pt-cta *{box-sizing:border-box;}
.pt-cta .en{font-family:var(--pt-en) !important;letter-spacing:.22em;}

.pt-cta .banners{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:0;padding:0;list-style:none;}
.pt-cta .bnr{
	position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;
	box-shadow:0 1px 2px var(--pt-shadow);display:flex;flex-direction:column;
	align-items:center;justify-content:center;gap:2px;padding:16px 12px;
	background:var(--pt-haku);text-align:center;text-decoration:none;color:var(--pt-sumi);
	transition:transform .22s ease,box-shadow .22s ease;
}
.pt-cta a.bnr:hover{transform:translateY(-4px);box-shadow:0 3px 6px var(--pt-shadow);}
.pt-cta .bnr img{
	height:96px;width:auto;max-width:86%;object-fit:contain;display:block;margin-bottom:8px;
	transition:transform .5s cubic-bezier(.2,.6,.2,1);
}
.pt-cta a.bnr:hover img{transform:scale(1.07);}
.pt-cta .bnr .bnr-ttl{font-family:var(--pt-mincho);font-size:14px;font-weight:700;line-height:1.5;}
.pt-cta .bnr .bnr-sub{font-size:11px;color:var(--pt-usu);}
.pt-cta .bnr.is-soon{opacity:.45;}

.pt-cta .catsec{background:var(--pt-side);border-radius:18px;margin-top:22px;padding:34px 28px;}
.pt-cta .catsec h2{
	font-family:var(--pt-mincho);font-size:18px;font-weight:700;margin:0 0 8px;text-align:center;
	color:var(--pt-sumi);background:none !important;border:none !important;padding:0 !important;box-shadow:none !important;
}
.pt-cta .catsec h2::before,.pt-cta .catsec h2::after{display:none !important;content:none !important;}
.pt-cta .catsec .sub-t{font-size:10.5px;letter-spacing:.3em;color:var(--pt-usu);margin:0 0 28px;text-align:center;}

.pt-cta .grid3c{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.pt-cta .catcard{
	background:#fff;border-radius:16px;padding:20px 16px 42px;position:relative;
	box-shadow:0 1px 2px var(--pt-shadow);text-align:center;text-decoration:none;color:var(--pt-sumi);
	transition:transform .22s ease,box-shadow .22s ease;display:flex;flex-direction:column;
}
.pt-cta .catcard:hover{transform:translateY(-6px);box-shadow:0 3px 6px var(--pt-shadow);}
.pt-cta .catcard:hover .go{transform:scale(1.18) translateX(2px);}
.pt-cta .catcard .cat-img{display:block;margin:6px auto 12px;width:auto;height:150px;max-width:92%;object-fit:contain;}
.pt-cta .catcard .dot-en{font-size:9.5px;letter-spacing:.26em;display:block;margin-bottom:6px;}
.pt-cta .catcard .ttl{font-family:var(--pt-mincho);font-size:14px;font-weight:700;line-height:1.5;color:var(--pt-sumi);}
.pt-cta .catcard .cat-main{display:block;color:var(--pt-sumi);text-decoration:none;}
.pt-cta .catcard .go{
	position:absolute;right:12px;bottom:12px;width:26px;height:26px;border-radius:50%;
	color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;
	font-family:var(--pt-en);text-decoration:none;transition:transform .22s ease;
}
.pt-cta .cc-compare{--c:var(--c-compare);} .pt-cta .cc-compare .dot-en{color:var(--pt-usu);} .pt-cta .cc-compare .go{background:var(--c-compare);}
.pt-cta .cc-guide{--c:var(--c-guide);}     .pt-cta .cc-guide .dot-en{color:var(--pt-usu);}   .pt-cta .cc-guide .go{background:var(--c-guide);}
.pt-cta .cc-essay{--c:var(--c-essay);}     .pt-cta .cc-essay .dot-en{color:var(--pt-usu);}   .pt-cta .cc-essay .go{background:var(--c-essay);}

/* !important は、category.php / home.php の #pt-cat :where(ul,ol,li){padding:0} に
   打ち消されるのを防ぐため。IDセレクタが相手なので詳細度では勝てない。
   これが無いとスマホでサブカテゴリー一覧が左端まで伸び、丸ボタンと重なる。 */
.pt-cta .catcard .sublist{
	list-style:none;margin:18px 0 0 !important;padding:14px 2px 0 !important;border-top:2px dotted #E2E0D8;text-align:left;
	flex:1;display:flex;flex-direction:column;justify-content:space-between;
}
.pt-cta .catcard .sublist li{margin:0;padding:0;list-style:none;}
.pt-cta .catcard .sublist a{
	position:relative;display:block;padding:4px 0 4px 15px !important;
	font-size:12.5px;line-height:1.55;color:var(--pt-sumi);text-decoration:none;
}
.pt-cta .catcard .sublist a::before{
	content:"";position:absolute;left:2px;top:12px;width:5px;height:5px;border-radius:50%;background:var(--c);
}
.pt-cta .catcard .sublist a:hover{color:var(--c);text-decoration:underline;}

@media(max-width:900px){
	.pt-cta .banners{grid-template-columns:1fr 1fr;gap:14px;}
	.pt-cta .grid3c{grid-template-columns:1fr;gap:14px;}
	.pt-cta .catcard{padding:18px 16px 18px 20px;text-align:left;border-radius:12px;}
	.pt-cta .catcard .cat-main{display:grid;grid-template-columns:1fr auto;grid-template-areas:"ttl img" "en img";column-gap:12px;align-items:start;}
	.pt-cta .catcard .ttl{grid-area:ttl;font-size:16px;margin-top:6px;}
	.pt-cta .catcard .dot-en{grid-area:en;margin:6px 0 0;}
	.pt-cta .catcard .cat-img{grid-area:img;height:96px;margin:0;}
	.pt-cta .catcard .sublist{border-top:none;margin:8px 0 0 !important;padding:0 0 0 32% !important;}
	.pt-cta .catcard .go{left:18px;right:auto;bottom:20px;width:30px;height:30px;}
}
@media(max-width:520px){
	.pt-cta .catsec{padding:24px 16px;}
	.pt-cta .bnr img{height:72px;}
}


/* ==========================================================================
   共通サイドバー [pt_sidebar]
   移植元：.ms-side（数値そのまま）
   ========================================================================== */
.pt-side{
	--c-compare:var(--pt-compare); --c-guide:var(--pt-guide); --c-essay:var(--pt-essay);
	background:var(--pt-side);padding:22px 18px 18px;
	display:flex;flex-direction:column;border-radius:16px;box-sizing:border-box;
	font-family:var(--pt-gothic);
}
.pt-side *{box-sizing:border-box;}
.pt-side a{text-decoration:none;color:var(--pt-sumi);}
.pt-side .en{font-family:var(--pt-en);letter-spacing:.22em;}

.pt-side .snav{position:relative;display:block;padding:13px 2px 15px 16px;text-align:center;border-bottom:2px dotted #D8D5CC;}
.pt-side .snav:last-of-type{border-bottom:none;}
.pt-side .snav.is-active{background:#fff;border-radius:8px;box-shadow:0 1px 2px var(--pt-shadow);border-bottom-color:transparent;}
.pt-side .snav.is-active .jp::after{content:"を表示中";font-size:10px;color:var(--c);display:block;font-family:var(--pt-gothic);font-weight:400;}
.pt-side .snav .cat-en{position:absolute;left:2px;top:12px;writing-mode:vertical-rl;font-family:var(--pt-en);font-size:8.5px;letter-spacing:.3em;color:var(--c);}
.pt-side .snav .snav-img{display:block;margin:0 auto;height:90px;width:auto;max-width:100%;object-fit:contain;}
.pt-side .snav .jp{font-family:var(--pt-mincho);font-size:12.5px;font-weight:600;line-height:1.45;display:block;margin-top:4px;color:var(--pt-sumi);}

/* 参照棚（マイステラの .side-banner ＝ MAKE A BOOK 枠にあたる位置） */
.pt-side .shelf{
	margin-top:16px;background:#fff;border-radius:0;padding:18px 16px;text-align:center;
	box-shadow:0 1px 2px var(--pt-shadow);border:1px solid var(--pt-kei);
	transition:background .22s ease,border-color .22s ease;
}
.pt-side .shelf .sb-en{display:block;font-family:var(--pt-en);font-size:8px;letter-spacing:.24em;color:var(--pt-usu);margin-bottom:2px;}
.pt-side .shelf .sb-ttl{display:block;font-family:var(--pt-mincho);font-size:12px;font-weight:700;line-height:1.65;color:var(--pt-sumi);margin-bottom:10px;}
.pt-side .shelf-row{
	display:flex;align-items:center;gap:6px;margin-top:8px;
	background:var(--pt-side);color:var(--pt-sumi);border-radius:0;
	padding:8px 12px;font-size:11px;font-weight:700;white-space:nowrap;
	transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.pt-side .shelf-row .nm{font-family:var(--pt-mincho);}
.pt-side .shelf-row .sub{font-size:9.5px;font-weight:400;color:var(--pt-usu);margin-left:auto;}
.pt-side .shelf-row .arw{
	width:16px;height:16px;border-radius:50%;background:rgba(28,27,24,.12);
	display:inline-flex;align-items:center;justify-content:center;
	font-family:var(--pt-en);font-size:10px;color:var(--pt-shu);flex-shrink:0;
	transition:transform .2s ease,background .2s ease;
}
.pt-side .shelf-row:hover{background:var(--pt-sumi);color:#fff;transform:translateY(-2px);box-shadow:0 3px 6px var(--pt-shadow);}
.pt-side .shelf-row:hover .sub{color:rgba(255,255,255,.7);}
.pt-side .shelf-row:hover .arw{background:rgba(255,255,255,.2);color:#fff;transform:translateX(3px);}

.pt-side .side-btns{margin-top:18px;padding-top:16px;display:flex;flex-direction:row;gap:16px;justify-content:center;}
.pt-side .sidecard{display:flex;align-items:center;justify-content:center;}
.pt-side .sc-ic{
	width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
	background:#EAE7DF;color:var(--pt-usu);
	transition:background .22s ease,color .22s ease,transform .22s ease;
}
.pt-side .sidecard:hover .sc-ic{transform:translateY(-2px);background:var(--pt-sumi);color:#fff;}


/* ==========================================================================
   投稿・固定・アーカイブ：共通サイドバーを左端のフラット列にする
   移植元：mystella style.css L126-149（数値・!important そのまま）

   ・親(.wp-singular)が全幅かつ overflow-x:clip のため、#content の中央寄せを
     外すだけで横スクロールを出さずに全幅化できる（100vwは使わない）
   ・column-gap:56px が本文とサイドバーの間隔。これが無いとシェアボタンと衝突する
   ・上部スキマは #content の上パディング(64px)分サイドバーを持ち上げ、内側で同量詰める
   ========================================================================== */
@media (min-width:960px){
	#content.l-content:has(> .l-sidebar):has(> .l-mainContent.l-article){
		max-width:none !important;margin-left:0 !important;margin-right:0 !important;
		padding-left:0 !important;padding-right:0 !important;
		justify-content:flex-start !important;column-gap:56px !important;align-items:flex-start !important;
	}
	#content.l-content:has(> .l-sidebar) > .l-sidebar{flex:0 0 230px !important;width:230px !important;max-width:230px !important;}
	#content.l-content:has(> .l-sidebar) > .l-sidebar{margin-top:-64px !important;}
	#content.l-content:has(> .l-sidebar) > .l-sidebar .pt-side{padding-top:86px !important;}
	#content.l-content:has(> .l-sidebar) > .l-mainContent.l-article{flex:1 1 0% !important;width:auto !important;min-width:0 !important;max-width:none !important;box-sizing:border-box !important;}
	#content.l-content:has(> .l-sidebar) > .l-mainContent.l-article > .l-mainContent__inner{max-width:900px !important;margin-left:auto !important;margin-right:auto !important;}
	/* SWELLウィジェット枠のカード感を消してフラットに */
	#content .l-sidebar .c-widget{margin:0 !important;}
	#content .l-sidebar .widget_block>p{margin:0 !important;}
	#content .l-sidebar .c-widget__title{display:none !important;}
	#content .l-sidebar .pt-side{border-radius:0 !important;box-shadow:none !important;}
	/* サイドバーを左へ（SWELLの sidebar_pos=left が効かないため order で寄せる） */
	#body_wrap:not(.-sidebar-left) #content.l-content:has(.pt-side) > .l-sidebar{order:-1 !important;}
}

/* 投稿一覧・アーカイブ：get_footer で #content 内に出るCTAを下へ全幅で回り込ませる */
@media (min-width:960px){
	#content.l-content:has(> .pt-home-cta){flex-wrap:wrap !important;}
	#content.l-content > .pt-home-cta{order:99 !important;flex:0 0 100% !important;width:100% !important;}
}
.pt-home-cta{padding:24px 22px 66px;}

/* スマホ：共通サイドバーを非表示（SWELLは本文最下部に回すため縦積みになる） */
@media (max-width:959px){
	.l-sidebar:has(.pt-side){display:none !important;}
}


/* ==========================================================================
   指示された2箇所の修正
   SWELL標準はメインカラーを面で塗る。メインカラーが朱なので、
   見出しと目次が朱一色になる。この2箇所だけ上書きする。
   ========================================================================== */
.l-mainContent .post_content h2{
	background:none !important;background-color:transparent !important;
	color:var(--pt-sumi);position:relative;
	border:none;border-bottom:1px solid var(--pt-kei);border-radius:0;padding:0 0 14px;
}
.l-mainContent .post_content h2::before{content:none;}
.l-mainContent .post_content h2::after{
	content:"" !important;position:absolute;left:0;bottom:-1px;
	width:56px;height:2px;background:var(--pt-shu);border:none;border-radius:0;
}
.l-mainContent .post_content h3{
	background:none !important;background-color:transparent !important;
	color:var(--pt-sumi);border:none;border-left:2px solid var(--pt-sumi);
	border-radius:0;padding:2px 0 2px 14px;
}
.l-mainContent .post_content h3::before,.l-mainContent .post_content h3::after{content:none;}

.p-toc a,.p-toc .p-toc__link{color:var(--pt-sumi) !important;text-decoration:none !important;border-bottom:none !important;}
.p-toc a:hover,.p-toc .p-toc__link:hover{color:var(--pt-shu) !important;text-decoration:underline !important;text-underline-offset:2px;}
.p-toc .p-toc__title{color:var(--pt-sumi) !important;}


/* ==========================================================================
   固定ページの体裁（About・プライバシーポリシー・お問い合わせ）
   ========================================================================== */
/* 読み物として組む。写真を上に大きく1枚、その下に小見出しで区切った本文。
   SWELLの見出し装飾（朱の下線・左の縦棒）が漏れてくるので !important で打ち消す。 */
.pt-about{max-width:760px;margin:0 auto;padding:0 0 4px;font-family:var(--pt-gothic);color:var(--pt-sumi);}

/* 16/10 は絵に合わせた比率。16/7 だと上下が大きく切れて、
   手前のロボットと左右の輪転機が入らない（画像は 1448×1086＝4:3） */
.pt-about .hero{margin:0 0 34px;border-radius:18px;overflow:hidden;aspect-ratio:16/10;background:var(--pt-side);box-shadow:0 2px 8px var(--pt-shadow);position:relative;}
.pt-about .hero img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;}
.pt-about .hero .ph-note{position:absolute;left:0;right:0;bottom:0;padding:8px 14px;font-size:10.5px;color:#fff;background:linear-gradient(transparent,rgba(28,27,24,.55));}

.pt-about .en-label{display:block;text-align:center;font-family:var(--pt-en);font-size:10px;letter-spacing:.28em;color:var(--pt-usu);margin-bottom:10px;}
.pt-about h2{font-family:var(--pt-mincho)!important;font-weight:600;font-size:24px;text-align:center;margin:0 0 34px!important;background:none!important;border:none!important;padding:0!important;color:var(--pt-sumi)!important;}
.pt-about h2::before,.pt-about h2::after{content:none!important;display:none!important;}

.pt-about h3{font-family:var(--pt-mincho)!important;font-weight:600;font-size:17px;color:var(--pt-sumi)!important;
	margin:2.8em 0 1em!important;padding:0 0 0 14px!important;background:none!important;
	border:none!important;border-left:2px solid var(--pt-shu)!important;border-radius:0!important;line-height:1.6;}
.pt-about h3::before,.pt-about h3::after{content:none!important;display:none!important;}
.pt-about h3:first-of-type{margin-top:2em!important;}

.pt-about p{font-size:15.5px;line-height:2.05;margin:0 0 1.5em;}
.pt-about .lead{font-family:var(--pt-mincho);font-weight:600;font-size:19px;line-height:1.95;}
.pt-about .qs{color:var(--pt-usu);}
.pt-about .note{font-size:13.5px;color:var(--pt-usu);line-height:1.95;}

/* 運営者の一覧 */
.pt-about .facts{margin:0 0 1.6em;border-top:1px solid var(--pt-kei);}
.pt-about .facts div{display:grid;grid-template-columns:7em 1fr;gap:0 16px;padding:11px 2px;border-bottom:1px solid var(--pt-kei);font-size:14.5px;line-height:1.8;}
.pt-about .facts dt,.pt-about .facts b{font-weight:500;color:var(--pt-usu);font-size:13.5px;}

.pt-about .colophon{margin-top:3.4em;padding-top:1.4em;border-top:1px solid var(--pt-kei);text-align:center;font-family:var(--pt-mincho);font-size:12.5px;color:var(--pt-usu);letter-spacing:.08em;}
.l-mainContent__inner:has(.pt-about) > .c-pageTitle{display:none;}

@media(max-width:600px){
	.pt-about .hero{aspect-ratio:4/3;border-radius:14px;margin-bottom:26px;}
	.pt-about h2{font-size:20px;margin-bottom:26px!important;}
	.pt-about h3{font-size:16px;margin-top:2.4em!important;}
	.pt-about p{font-size:15px;line-height:2.0;}
	.pt-about .lead{font-size:17px;}
	.pt-about .facts div{grid-template-columns:1fr;gap:2px;padding:10px 2px;}
}

.pt-doc{font-family:var(--pt-gothic);color:var(--pt-sumi);max-width:760px;font-size:15px;line-height:1.95;}
.pt-doc h2{font-family:var(--pt-mincho);font-weight:600;font-size:17px;margin:2.4em 0 .8em;padding-bottom:.4em;border-bottom:1px solid var(--pt-kei);background:none;color:var(--pt-sumi);}
.pt-doc h2::before,.pt-doc h2::after{content:none;}
.pt-doc h2:first-child{margin-top:.4em;}
.pt-doc p{margin:0 0 1.2em;}
.pt-doc ul{margin:0 0 1.4em;padding-left:1.3em;}
.pt-doc li{margin-bottom:.5em;}
.pt-doc a{color:var(--pt-shu);text-decoration:underline;text-underline-offset:2px;}
.pt-doc .pt-note{font-size:13px;color:var(--pt-usu);}
.pt-doc .pt-rev{margin-top:2.6em;padding-top:1.2em;border-top:1px solid var(--pt-kei);font-size:12.5px;color:var(--pt-usu);}