@charset "UTF-8";

/* ============================================================

	jongdou-style-ver01.css
	2026/11/16
	http://jongdou.com

 ============================================================ */

/* ============================================================
	01. 共通設定・基本レイアウト
 ============================================================ */

:root { --dark:#1F1F1F; --light:#ECECEC; --header-height:68px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--header-height) + 16px); }
body { margin:0; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; background:var(--light); color:var(--dark); font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif; }
a { color:inherit; }
main { flex:1 0 auto; padding-top:var(--header-height); }

p,h1,h2,h3,h4,h5,h6,
ul,ol.blockquote,pre,d,hr,figure { margin:0; line-height:1.5; }

/* ============================================================
	02. 本文
 ============================================================ */

.content-background {
	background-color:#f7f3e9; 
	background-image:url('https://jongdou.com/img/back/illust(1).jpg'); 
	background-position:center; 
	background-repeat:no-repeat; 
	background-size:cover; 
	background-attachment:fixed; 
	padding:40px 20px; 
	margin:0;
}

.content-inner {
	width:80%; 
	max-width:1200px; 
	margin:0 auto; padding:20px; 
	background:var(--light); 
	color:var(--dark);
}

.content-section > :first-child {
	position: relative;
	padding: 20px;
}

.content-section > :first-child::after {
	content: "";
	position: absolute;
	top: -20px;
	bottom: 20px;
	left: 20px;
	right: 20px;
	border-bottom:10px solid #d1d1d1;
}

.content-section:last-child { border-bottom:0; }

.section-body {
	padding:0 20px 0 20px; 
	font-size: 22px;
}

.title-main {
	letter-spacing: -1px; 
	font-size: clamp(26px, 3vw, 100px);
}

/* ============================================================
	03. ヘッダー
 ============================================================ */

.site-header { position:fixed; inset:0 0 auto; height:var(--header-height); z-index:1000; background:var(--dark); color:var(--light); }
.header-inner { height:100%; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(16px,4vw,48px); }
.header-logo { display:flex; align-items:center; max-width:200px; height:100%; }
.header-logo img { display:block; max-width:100%; max-height:40px; width:auto; height:auto; object-fit:contain; }

/* ============================================================
	04. メニュー
 ============================================================ */

.menu-toggle { width:46px; height:46px; padding:11px 7px; border:0; background:transparent; display:flex; flex-direction:column; justify-content:space-around; cursor:pointer; position:relative; z-index:2; }
.menu-toggle span { display:block; width:100%; height:2px; border-radius:2px; background:var(--light); transform-origin:center; transition:transform .35s ease,opacity .2s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }
.site-menu { position:absolute; top:100%; left:0; right:0; background:var(--dark); display:grid; grid-template-rows:0fr; visibility:hidden; opacity:0; transition:grid-template-rows .55s cubic-bezier(.22,1,.36,1),opacity .4s ease,visibility .55s; box-shadow:0 10px 22px rgba(0,0,0,.15); }
.site-menu.is-open { grid-template-rows:1fr; visibility:visible; opacity:1; }
.menu-links { min-height:0; overflow:hidden; display:flex; flex-direction:column; align-items:stretch; }
.menu-links a { display:block; padding:14px max(24px,calc((100vw - 1000px)/2)); color:var(--light); text-decoration:none; text-align:center; border-top:1px solid rgba(236,236,236,.12); transition:background .2s ease; }
.menu-links a:hover,.menu-links a:focus-visible { background:#363636; }

/* ============================================================
	05. トップ動画・ロゴ
 ============================================================ */

.hero { position:relative; width:100%; height:calc(100vh - var(--header-height)); height:calc(100dvh - var(--header-height)); min-height:300px; overflow:hidden; display:grid; place-items:center; background:var(--dark); }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-shade { position:absolute; inset:0; background:rgba(0,0,0,.08); pointer-events:none; }
.hero-logo-link { position:relative; z-index:1; display:block; width:min(72vw,820px); text-align:center; }
.hero-logo { display:block; width:100%; height:auto; max-height:70vh; object-fit:contain; }

/* ============================================================
	06. フッター
 ============================================================ */

.site-footer { flex-shrink:0; background:var(--dark); color:var(--light); text-align:center; padding:20px 16px; font-size:13px; }
.site-footer p { margin:0; }

/* ============================================================
	07. ▲ボタン
 ============================================================ */

.back-to-content { position:fixed; right:60px; bottom:65px; z-index:900; width:48px; height:48px; display:flex; align-items:center; justify-content:center; border:0; border-radius:50%; background:rgba(31,31,31,.75); color:rgba(255,255,255,.9); font-size:24px; line-height:1; cursor:pointer; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(12px); transition:background .2s ease,color .2s ease,opacity .25s ease,transform .25s ease,visibility .25s; }
.back-to-content.is-visible { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.back-to-content:hover,.back-to-content:focus-visible { background:rgba(31,31,31,.90); color:#fff; }

/* ============================================================
	08. レスポンシブ対応
 ============================================================ */

@media (max-width:1024px) {
	.content-background { background-image:none; background-color:var(--light); padding:0; }
	.content-inner { width:100%; max-width:none; }
}
@media (max-width:768px) {
	:root { --header-height:58px; }
	.header-inner { padding-inline:16px; }
	.header-logo { max-width:150px; }
	.header-logo img { max-height:40px; }
	.hero-logo-link { width:86vw; }
	.content-inner { padding:24px 18px; }
	.menu-links a { padding:16px 20px; }
	.back-to-content { right:24px; bottom:65px; }
}
@media (prefers-reduced-motion:reduce) {
	html { scroll-behavior:auto; }
	.site-menu,.menu-toggle span,.back-to-content { transition-duration:.01ms; }
}

/* ============================================================
	09. WEBフォント
 ============================================================ */

/* 極太明朝体 */
@font-face {
	font-family: "Dfminc";
	src:
		url("/font/Dfminc-DFMincho-UB-WIN-RKSJ-H.woff2") format("woff2"),
		url("/font/Dfminc-DFMincho-UB-WIN-RKSJ-H.woff") format("woff");
	font-style: normal;
	font-display: swap;
}

.abril-fatface-regular {
	font-family: "Dfminc", "Yu Mincho", serif;
	font-weight: 700;
}

/* ============================================================
	10. フォント太さ
 ============================================================ */

/* 少し太く */
.font-thick-05 {
	-webkit-text-stroke: 0.5px currentColor;
}

/* やや太く */
.font-thick-10 {
	-webkit-text-stroke: 1.0px currentColor;
}

/* 太く */
.font-thick-15 {
	-webkit-text-stroke: 1.5px currentColor;
}

/* かなり太く */
.font-thick-20 {
	-webkit-text-stroke: 2px currentColor;
}

/* 非常に太く */
.font-thick-30 {
	-webkit-text-stroke: 3px currentColor;
}

/* ============================================================
	11. フォント大きさ
 ============================================================ */

.font-10 { font-size: 10px !important; } .font-11 { font-size: 11px !important; }
.font-12 { font-size: 12px !important; } .font-13 { font-size: 13px !important; }
.font-14 { font-size: 14px !important; } .font-15 { font-size: 15px !important; }
.font-16 { font-size: 16px !important; } .font-17 { font-size: 17px !important; }
.font-18 { font-size: 18px !important; } .font-19 { font-size: 19px !important; }
.font-20 { font-size: 20px !important; } .font-21 { font-size: 21px !important; }
.font-22 { font-size: 22px !important; } .font-23 { font-size: 23px !important; }
.font-24 { font-size: 24px !important; } .font-25 { font-size: 25px !important; }
.font-26 { font-size: 26px !important; } .font-27 { font-size: 27px !important; }
.font-28 { font-size: 28px !important; } .font-29 { font-size: 29px !important; }
.font-30 { font-size: 30px !important; } .font-31 { font-size: 31px !important; }
.font-32 { font-size: 32px !important; } .font-33 { font-size: 33px !important; }
.font-34 { font-size: 34px !important; } .font-35 { font-size: 35px !important; }
.font-36 { font-size: 36px !important; } .font-37 { font-size: 37px !important; }
.font-38 { font-size: 38px !important; } .font-39 { font-size: 39px !important; }
.font-40 { font-size: 40px !important; } .font-41 { font-size: 41px !important; }
.font-42 { font-size: 42px !important; } .font-43 { font-size: 43px !important; }
.font-44 { font-size: 44px !important; } .font-45 { font-size: 45px !important; }
.font-46 { font-size: 46px !important; } .font-47 { font-size: 47px !important; }
.font-48 { font-size: 48px !important; } .font-49 { font-size: 49px !important; }
.font-50 { font-size: 50px !important; } .font-51 { font-size: 51px !important; }
.font-52 { font-size: 52px !important; } .font-53 { font-size: 53px !important; }
.font-54 { font-size: 54px !important; } .font-55 { font-size: 55px !important; }
.font-56 { font-size: 56px !important; } .font-57 { font-size: 57px !important; }
.font-58 { font-size: 58px !important; } .font-59 { font-size: 59px !important; }
.font-60 { font-size: 60px !important; } .font-61 { font-size: 61px !important; }
.font-62 { font-size: 62px !important; } .font-63 { font-size: 63px !important; }
.font-64 { font-size: 64px !important; } .font-65 { font-size: 65px !important; }
.font-66 { font-size: 66px !important; } .font-67 { font-size: 67px !important; }
.font-68 { font-size: 68px !important; } .font-69 { font-size: 69px !important; }
.font-70 { font-size: 70px !important; } .font-71 { font-size: 71px !important; }
.font-72 { font-size: 72px !important; } .font-73 { font-size: 73px !important; }
.font-74 { font-size: 74px !important; } .font-75 { font-size: 75px !important; }
.font-76 { font-size: 76px !important; } .font-77 { font-size: 77px !important; }
.font-78 { font-size: 78px !important; } .font-79 { font-size: 79px !important; }
.font-80 { font-size: 80px !important; } .font-81 { font-size: 81px !important; }
.font-82 { font-size: 82px !important; } .font-83 { font-size: 83px !important; }
.font-84 { font-size: 84px !important; } .font-85 { font-size: 85px !important; }
.font-86 { font-size: 86px !important; } .font-87 { font-size: 87px !important; }
.font-88 { font-size: 88px !important; } .font-89 { font-size: 89px !important; }
.font-90 { font-size: 90px !important; } .font-91 { font-size: 91px !important; }
.font-92 { font-size: 92px !important; } .font-93 { font-size: 93px !important; }
.font-94 { font-size: 94px !important; } .font-95 { font-size: 95px !important; }
.font-96 { font-size: 96px !important; } .font-97 { font-size: 97px !important; }
.font-98 { font-size: 98px !important; } .font-99 { font-size: 99px !important; }
.font-100 { font-size: 100px !important; }

/* ============================================================
   12. 挿絵・色・文字
 ============================================================ */
.diagonal {
	font-style: italic;
}

.section-illust {
	float: right;
	width: 200px;
	height: auto;
	margin: 0 0 15px 15px;
	
}
.section-body {
	display: flow-root;
}

/* ============================================================
   13. ガード
 ============================================================ */
.content-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    align-content: start;
    gap: 20px;
}

@media (max-width: 768px) {
    .content-columns {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}

a[href] {
	text-decoration: none;
	color: inherit;
	transition: color 0.3s ease;
}

a[href]:hover {
	opacity: 0.6;
}

a[href] img {
	opacity: 0.6;
	transition: opacity 0.3s ease;
}

a[href]:hover img {
	opacity: 0.4;
}