/* ================================================== */
/* 汎用 */
/* ================================================== */

/* カラーパレット */
:root {
--bl:#0075c2;
--bk:#231815;
--gray:#595757;
--gr:#00a73c; 
--or:#ed6c00;
--or-2:#f29600;
--rd:#ea5504;
--ye:#fff9eb;
--wh:#fff;
}

/* 全体 */
html {
color:var(--bk);
color-scheme:light;
font-family:"Noto Sans JP", sans-serif;
font-optical-sizing:auto;
font-style:normal;
line-break:strict;
line-height:1.8;
overflow-wrap:anywhere;
overflow-x:clip;
scroll-behavior:smooth;
scroll-padding-block-start:var(--header-h, 0);
}
body { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; overflow-x:clip; }
:root {
--header-h:72px;
--header-pad:20px;
}

/* 文字太さ */
.w500 { font-weight:500; }
.w600 { font-weight:600; }
.w700 { font-weight:700; }

/* 汎用ボタン */
.more-button { display:flex; font-size:16px; font-weight:700; justify-content:center; letter-spacing:3.2px; line-height:1; }
.more-button a { align-items:center; background-color:var(--or); border:2px solid var(--or); color:var(--wh); gap:20px; justify-content:center; transition:.3s; height:40px; width:200px; }
.button-arrow { block-size:14px; display:grid; inline-size:9px; place-items:center; }
.button-arrow::before { block-size:9.5px; border-block-start: 2px solid var(--wh); border-inline-end:2px solid var(--wh); box-sizing:border-box; content:""; inline-size:9.5px; rotate:45deg; translate:-2.3px; transition:.3s; }
.more-button a:hover { background-color:var(--wh); color:var(--or); transition:.3s; }
.more-button a:hover .button-arrow::before { border-block-start: 2px solid var(--or); border-inline-end:2px solid var(--or); transition:.3s; }

/* オレンジ色のボタン */
.or-button { align-items:center; background-color:var(--or-2); border-radius:40px; color:var(--wh); display:flex; font-size:18px; font-weight:600; gap:8px; justify-content:center; transition:.3s; line-height:22px; margin:auto; height:52px; width:216px; }
.or-button:hover { transition:.3s; opacity:0.7; }
.right-arrow { align-items:center; background-color:var(--wh); border-radius:50%; display:flex; justify-content:center; height:32px; width:32px; }

/* 汎用リスト */
.list {
--list-gap:.25em;
--list-indent:1.25em;
--list-marker-color:currentcolor;
--list-marker-size:1em;
--list-space:.5em;
}
.list { list-style:disc; padding-inline-start:var(--list-indent); }
.list li::marker { color:var(--list-marker-color); font-size:var(--list-marker-size); }
.list li + li { margin-block-start:var(--list-space); }
.list :is(ul, ol) { margin-block-start:var(--list-space); padding-inline-start:var(--list-indent); }
.list ul { list-style:circle; }
.list ul ul { list-style:square; }
.list ol { list-style:decimal; }

/* 汎用リスト：数字（2桁想定でインデント広め） */
.list--num { --list-indent:1.75em; list-style:decimal; }

/* 汎用リスト：注釈（※ をぶら下げ） */
.list--note { --list-indent:0; font-size:.875em; list-style:none; }
.list--note > li { display:grid; gap:0 var(--list-gap); grid-template-columns:auto 1fr; }
.list--note > li::before { content:"※"; }
.list--note > li > * { grid-column:2; }

/* 画像ホバー演出 */
a.img-swap { display:inline-block; overflow:hidden; position:relative; z-index:1; }
a.img-swap img { display:block; opacity:1; transition:transform 0.4s ease, opacity 0.4s ease; height:auto; width:100%; }
a.img-swap::after { background-position:center; background-size:cover; background-repeat:no-repeat; content:''; inset:0; opacity:0; transition:transform 0.4s ease, opacity 0.4s ease; position:absolute; right:0; bottom:0; z-index:1; }
a.img-swap:hover img { transition:transform 0.4s ease, opacity 0.4s ease; opacity:0; }
a.img-swap:hover::after { transition:transform 0.4s ease, opacity 0.4s ease; opacity:1; }

@media (prefers-reduced-motion: reduce) {

/* 全体 */
html { scroll-behavior:auto; }
*, ::before, ::after {
animation-duration:1ms !important;
animation-iteration-count:1 !important;
transition-duration:1ms !important;
}

}

@media( min-width:960px ) {

/* 全体 */
:root {
--header-h:100px;
--header-pad:clamp( 24px, 5vw, 120px );
}

/* オレンジ色のボタン */
.or-button { font-size:20px; gap:16px; line-height:22px; height:64px; width:288px; }

}

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

/* ベース */
.site-header { align-items:center; background-color:var(--wh); display:flex; justify-content:space-between; padding-block:0; padding-inline:var( --header-pad ); position:fixed; top:0; height:var(--header-h); width:100%; z-index:100; }

/* サイトタイトル */
.site-title a { align-items:center; display:flex; }
.site-title img { display:block; height:auto; max-width:249px; width:249px; }

/* youtube のボタン（header 用は pc のみ、nav 用は sp のみ表示） */
.yt-button { display:block; transition:opacity .3s; inline-size:var(--yt-size, 52px); }
.yt-button img { display:block; height:auto; max-width:48px; width:100%; }
.yt-button--header { display:none; }

/* P犬くんのボタン */
.pken-shiryo { display:none; }

@media( min-width:960px ) {

/* サイトタイトル */
.site-title img { max-width:100%; width:clamp( 300px, 28vw, 416px ); }

/* youtube のボタン（margin-inline-end:auto で nav を右端へ押し出す） */
.yt-button:hover { opacity:.6; }
.yt-button--header { --yt-size:clamp( 40px, 3.61vw, 52px ); display:block; flex-shrink:0; margin-inline:clamp( 16px, 2.78vw, 40px ) auto; }

/* P犬くんのボタン */
.pken-shiryo { display:inline-block; }
.pken-shiryo a { position:fixed; top:45svh; left:-50px; z-index:1; }
.pken-shiryo a img { filter:drop-shadow(8px 8px 0px #7f7f7f); transition:.3s; max-width:225px; }
.pken-shiryo a img.ov-a { display:none; }
.pken-shiryo a:hover img { filter:drop-shadow(0px 0px 0px transparent); transform:translate(8px,8px); transition:.3s; }
.pken-shiryo a:hover img.ov-a { display:block; }
.pken-shiryo a:hover img.ov-b { display:none; }

}

/* ================================================== */
/* ナビゲーション */
/* ================================================== */

/* 調整用の値 */
.l-nav {
--nav-arrow:26px;
--nav-border:#595757;
--nav-col-gap:70px;
--nav-cols:4;
--nav-font:16px;
--nav-gutter:40px;
--nav-icon-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14'/%3E%3Cpath d='M13 7l5 5-5 5'/%3E%3C/svg%3E");
--nav-icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 15l7-7 7 7'/%3E%3C/svg%3E");
--nav-indent:32px;
--nav-line:var(--bk);
--nav-panel-w:1320px;
--nav-pken:68px;
--nav-pken-bg:var(--or);
--nav-pken-border:3px solid var(--bk);
--nav-pken-face:80%;
--nav-row:12px;
--nav-row-gap:32px;
}

/* ハンバーガーメニュー */
.l-nav__toggle { cursor:pointer; position:relative; height:43px; width:30px; z-index:10; }
.l-nav__toggle .l-nav__bar { align-items:center; background-color:var(--gray); border-radius:2px; display:flex; justify-content:center; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); transition:opacity .3s, top .3s, transform .3s; height:2px; width:26px; z-index:1; }
.l-nav__toggle .l-nav__bar:first-child { top:calc( 50% - 8px ); }
.l-nav__toggle .l-nav__bar:last-child { top:calc( 50% + 8px ); }

/* ハンバーガーメニュー：展開時 */
.l-nav.is-open .l-nav__bar:nth-child(2) { opacity:0; }
.l-nav.is-open .l-nav__bar:first-child { top:50%; transform:translateX(-50%) translateY(-50%) rotate(45deg); }
.l-nav.is-open .l-nav__bar:last-child { top:50%; transform:translateX(-50%) translateY(-50%) rotate(-45deg); }

/* ナビメニュー本体 */
.g-nav-list { background-color:var(--wh); color:var(--gray); opacity:0; overflow-y:auto; overscroll-behavior:contain; padding:24px var(--nav-gutter) 40px; position:fixed; left:0; top:var(--header-h); transition:opacity .3s, visibility .3s; visibility:hidden; height:calc( 100svh - var(--header-h) ); width:100%; z-index:99; }
.g-nav-list > li + li { margin-block-start:32px; }

/* ナビメニュー本体：展開時 */
.g-nav-list.is-open { opacity:1; visibility:visible; }

/* 大項目・単独項目：共通 */
.g-nav-list__toggle, .g-nav-list__link { align-items:center; display:grid; font-size:var(--nav-font); font-weight:700; gap:0 16px; grid-template-columns:1fr auto; letter-spacing:.05em; line-height:1.5; padding-block:var(--nav-row); text-align:start; width:100%; }
.g-nav-list__toggle br, .g-nav-list__link br { display:none; }

/* 大項目：開閉ボタン */
.g-nav-list__toggle { border-block-end:1px solid var(--gray); cursor:pointer; }
.g-nav-list__toggle::after { background:var(--rd) var(--nav-icon-chevron) no-repeat center / 55% auto; border-radius:50%; content:""; grid-column:2; rotate:180deg; transition:rotate .3s; block-size:var(--nav-arrow); inline-size:var(--nav-arrow); }

/* 大項目：開閉ボタン：展開時 */
.g-nav-list__toggle[aria-expanded="true"]::after { rotate:0deg; }

/* 大項目：加入をご検討の方（sp は常時展開のため矢印なし） */
.g-nav-list__toggle--cv { background-color:var(--rd); border-block-end:0; border-radius:999px; color:var(--wh); display:block; margin-block-end:8px; padding:8px 32px; text-align:center; width:fit-content; }
.g-nav-list__toggle--cv::after { content:none; }

/* 小項目 */
.sub-menu { overflow:hidden; padding-inline-start:var(--nav-indent); visibility:hidden; block-size:0; }
.sub-menu a { align-items:center; display:grid; gap:0 16px; grid-template-columns:1fr auto; padding-block:var(--nav-row); }

/* 小項目：展開時 */
.g-nav-list [aria-expanded="true"] + .sub-menu { block-size:auto; }
.g-nav-list.is-open [aria-expanded="true"] + .sub-menu { visibility:visible; }

/* 矢印つきリンク */
.g-nav-list__link, .sub-menu a { border-block-end:1px solid var(--gray); }
.g-nav-list__link::after, .sub-menu a::after { background:var(--rd) var(--nav-icon-arrow) no-repeat center / 55% auto; border-radius:50%; content:""; grid-column:2; block-size:var(--nav-arrow); inline-size:var(--nav-arrow); }

/* youtube・ピーケンくん */
.g-nav-list__extra { align-items:center; display:flex; justify-content:space-between; }
.g-nav-list__pken { align-items:center; aspect-ratio:1; border-radius:50%; display:flex; justify-content:center; overflow:hidden; position:relative; inline-size:var(--nav-pken); }
.g-nav-list__pken img { display:block; height:auto; width:var(--nav-pken-face); }
.g-nav-list__pken::after { background:url("../img/header/icon-pken-smile.png") no-repeat center / var(--nav-pken-face) auto; border-radius:inherit; content:""; inset:0; opacity:0; position:absolute; transition:opacity .2s; }

/* 展開時：背面のスクロールを止める */
body.is-nav-open { overflow:hidden; }

/* 開閉アニメーション（対応ブラウザのみ） */
@supports (interpolate-size:allow-keywords) {
.l-nav { interpolate-size:allow-keywords; }
.sub-menu { transition:block-size .3s, visibility .3s; }
}

@media( min-width:960px ) {

/* 調整用の値 */
.l-nav { --nav-arrow:32px; --nav-cv-pad:clamp( 14px, 2.2vw, 32px ); --nav-font:clamp( 14px, 1.1vw, 16px ); --nav-gap:clamp( 8px, 1.6vw, 24px ); --nav-item-pad:clamp( 6px, 1.1vw, 16px ); --nav-pken:clamp( 52px, 4.72vw, 68px ); }

/* ハンバーガーメニュー */
.l-nav__toggle { display:none; }

/* ナビメニュー本体 */
.g-nav-list { align-items:center; background-color:transparent; display:flex; gap:var( --nav-gap ); opacity:1; overflow:visible; padding:0; position:static; transition:none; visibility:visible; height:auto; width:auto; }
.g-nav-list > li + li { margin-block-start:0; }

/* 大項目・単独項目：共通 */
.g-nav-list__toggle, .g-nav-list__link { border-block-end:0; display:block; padding-block:8px; padding-inline:var( --nav-item-pad ); text-align:center; transition:opacity .3s; white-space:nowrap; width:auto; }
.g-nav-list__toggle br, .g-nav-list__link br { display:inline; }
.g-nav-list__toggle::after, .g-nav-list__link::after { content:none; }
.g-nav-list__toggle:hover, .g-nav-list__link:hover { opacity:.6; }

/* 大項目：加入をご検討の方（sp 用の「へ」は省く） */
.g-nav-list__sp { display:none; }
.g-nav-list__toggle--cv { margin-block-end:0; padding-block:10px; padding-inline:var( --nav-cv-pad ); }
.g-nav-list__toggle--cv:hover { opacity:.6; }

/* 小項目：ダイナミックメニュー */
.sub-menu { background-color:var(--wh); border-block-end:1px solid var(--nav-border); display:grid; gap:var(--nav-row-gap) var(--nav-col-gap); grid-template-columns:repeat( var(--nav-cols), 1fr ); opacity:0; overflow:visible; padding-block:40px; padding-inline:max( var(--nav-gutter), ( 100% - var(--nav-panel-w) ) / 2 ); position:fixed; left:0; top:var(--header-h); transition:opacity .3s, visibility .3s; visibility:hidden; block-size:auto; width:100%; }
.sub-menu a { border-block-end:0; font-weight:700; grid-template-columns:auto 1fr auto; padding-block:0; transition:opacity .3s; white-space:nowrap; }
.sub-menu a::before { background-color:var(--nav-line); content:""; grid-column:2; grid-row:1; block-size:1px; }
.sub-menu a::after { grid-column:3; grid-row:1; }
.sub-menu a:hover { opacity:.6; }

/* 小項目：展開時 */
.g-nav-list [aria-expanded="true"] + .sub-menu { opacity:1; visibility:visible; }

/* youtube・ピーケンくん（youtube は header 側に表示） */
.g-nav-list__pken { flex-shrink:0; }
.g-nav-list__pken:hover::after, .g-nav-list__pken:focus-visible::after { opacity:1; }
.yt-button--nav { display:none; }

}

/* ================================================== */
/* 固定ボタン */
/* ================================================== */

/* ベース */
.fixed-button { display:flex; position:fixed; bottom:0; width:100%; z-index:10; }

/* ボタン */
.contact-info, .contact-us { width:50%; }
.contact-info a, .contact-us a { align-items:center; display:flex; justify-content:center; line-height:1; height:52px; width:100%; }
.contact-info a { background-color:var(--gr); }
.contact-us a { background-color:var(--or); }

@media(min-width:960px) {

/* ベース */
.fixed-button { flex-direction:column; gap:clamp( 8px, 1.11vw, 16px ); left:inherit; top:clamp( 160px, 15.4vw, 222px ); bottom:inherit; right:0; width:auto; }

/* ボタン */
.contact-info a, .contact-us a { box-shadow:8px 8px 0 0 rgba(0, 0, 0, 0.25); transition:.3s; height:clamp( 200px, 16.67vw, 240px ); width:clamp( 64px, 6.11vw, 88px ); }
.contact-info a:hover, .contact-us a:hover { box-shadow:0 0 0 0 rgba(0, 0, 0, 0); transform:translate(8px,8px); transition:.3s; }

/* ボタン内ラベル */
.fixed-button picture { display:block; }
.fixed-button img { width:100%; }
.contact-info picture { width:28.4%; } /* 25 / 88 */
.contact-us picture { width:27.3%; }   /* 24 / 88 */

}

/* ================================================== */
/* メイン */
/* ================================================== */

/* ベース */
.main-content { container:main / inline-size; flex:1 0 auto; margin-top:var(--header-h); overflow-x:clip; }

/* ================================================== */
/* フッタ */
/* ================================================== */

/* ベース */
.site-footer { background-color:var(--ye); color:var(--gray); padding:16px 0 68px 0; }

/* キャッチコピー */
.catch-copy { font-size:12px; line-height:14px; }

/* 組織名 */
.footer-name { font-size:20px; font-weight:800; line-height:130%; letter-spacing:1px; }

/* フッターコンテンツ */
.footer-info { gap:8px; margin:0 auto; max-width:calc( 100vw - 40px ); }
.footer-info address { font-size:12px; font-weight:400; gap:8px; line-height:12px; }

/* 区切り線 */
.footer-line { background:linear-gradient( var(--gray), var(--gray) ) no-repeat center / calc( 100% - 6px ) 1px; border:0; margin:8px auto; max-width:calc( 100vw - 40px ); position:relative; height:6px; width:100%; }
.footer-line::before, .footer-line::after { background-color:var(--gray); clip-path:polygon( 50% 0, 100% 50%, 50% 100%, 0 50% ); content:""; position:absolute; top:0; height:6px; width:6px; }
.footer-line::before { left:0; }
.footer-line::after { right:0; }

/* フッターナビ */
.footer-nav { margin:0 auto 16px; max-width:calc( 100vw - 40px ); }
.footer-nav ul { display:grid; gap:12px 16px; grid-template-columns:repeat( 2, 1fr ); }
.footer-nav a { align-items:center; display:flex; font-size:12px; font-weight:400; gap:6px; line-height:1.2; }
.footer-nav a::before { background-color:currentColor; content:""; flex-shrink:0; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 11'%3E%3Cpath d='M1 10 7 5.5 1 1Z' fill='%23000' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; height:9px; width:6px; }

/* コピーライト */
.copy { font-size:11px; font-weight:400; line-height:22px; }

@media(min-width:960px) {

/* ベース */
.site-footer { display:grid; gap:0 40px; grid-template-columns:1fr auto; padding:40px max( 20px, ( 100% - 1000px ) / 2 ) 24px; }

/* フッターコンテンツ */
.footer-info { margin:0; max-width:100%; }

/* キャッチコピー */
.catch-copy { font-size:20px; line-height:normal; }
.catch-copy br { display:none; }

/* 組織名 */
.footer-name { font-size:42px; }

/* 区切り線 */
.footer-line { display:none; }

/* フッターナビ */
.footer-nav { margin:0; max-width:100%; }
.footer-nav ul { gap:8px; grid-template-columns:1fr; }
.footer-nav a { font-size:16px; font-weight:500; gap:0; transition:.3s; line-height:28px; }
.footer-nav a::before { mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 18 17 12 9 6Z' fill='%23000' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; margin-right:5px; height:12px; width:12px; }
.footer-nav a:hover { opacity:0.6; transition:.3s; }

/* コピーライト */
.copy { font-size:14px; grid-column:1 / -1; margin-block-start:40px; }

}