/*
Theme Name: 鹿児島純心女子中・高等学校
Description:
Theme URI:
Author: スリーグッド鹿児島
Author URI:
Version:
License:
License URI:
*/

/* --------------------------
    variables
-------------------------- */
:root {
    --content-width: 1100px;
    --middle-width: 960px;
    --narrow-width: 800px;
    --wide-width: 1200px;
    --max-width: 1920px;
    --adminbar-height: 32px;
    --side-menu-width: 80px;
    --header-height: 100px;
    --header-height-sp: 50px;
    --topbar-height: 40px;
    --color: #333;
    --color-blue: #004c87;
    --color-blue-light: #b4cfdb;
    --color-blue-light2: #cde8f4;
    --color-blue-pale: #f2f7f9;
    --color-blue-grayish: #dae5ea;
    --color-blue-grayish2: #a6c3d0;
    --color-blue-dull: #647882;
    --color-beige-pale: #f2eddf;
    --color-beige-pale2: #f2eddf;
    --color-red: #ea6a79;
    --color-red-light: #eaaeb5;
    --color-red-vivid: #e35162;
    --color-red-pale: #f9e1e4;
    --color-yellow-light: #fff8b0;
    --color-yellow-dull: #e6df97;
    --color-yellow-dull-transp: rgba(230, 223, 151, 0.8);
    --color-aqua-light: #a1d6d3;
    --color-aqua-light-transp: rgba(161, 214, 211, 0.8);
    --color-aqua-dull: #83b7b7;
    --color-green-dull: #b0c3a1;
    --color-purple-light: #bdafe0;
    --color-youtube: #f00;
    --color-facebook: #1877f1;
    --color-x: #111;
    --color-tiktok: #111;
    --gradient-instagram1: linear-gradient(135deg, #427eff 0%, #f13f79 80%) no-repeat;
    --gradient-instagram2: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
    --gradient-yellow-aqua: linear-gradient(to bottom, var(--color-yellow-light), var(--color-aqua-light));
    --gradient-purple-aqua: linear-gradient(to right, var(--color-purple-light), var(--color-aqua-light));
    --gradient-purple-aqua-transp: linear-gradient(to right, var(--color-purple-light) 22%, var(--color-aqua-light-transp) 44%, transparent 66%);
    --gradient-aqua-yellow-transp: linear-gradient(to right, var(--color-aqua-light) 0%, var(--color-green-dull) 33%, var(--color-yellow-dull-transp) 44%, transparent 66%);
    --line-height: 1.75;
    --font-size: 16px;
    --font-size-sp: 14px;
    --letter-spacing: 0.1em;
    --font-family: '游ゴシック体', 'Yu Gothic', 'YuGothic', 'ヒラギノ角ゴシック ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo UI', 'ＭＳ Ｐゴシック', sans-serif;
	--serif-font: '游明朝', 'YuMincho', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif;
    --display-font: 'EB Garamond', var(--serif-font);
    --font-awesome: 'Font Awesome 6 Free';
    --material-icon: 'Material Symbols Outlined';
    --loading-logo: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuc3QwIHsKICAgICAgICBmaWxsOiAjMDA0Yzg3OwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTkyLjUwODAxLDMzLjU5MDk0djEyMi43OTM1N2MwLDYuNzc5MzUtNS41MTU0OSwxMi4yOTQ4NC0xMi4yOTQ5MywxMi4yOTQ4NHMtMTIuMjk0ODUtNS41MTU0OS0xMi4yOTQ4NS0xMi4yOTQ4NVYzMy41OTA5NGgtMjcuNjIzMjJ2MTQ4LjkwMDAyYzAsNi43Nzk0NC01LjUxNTQ5LDEyLjI5NDkzLTEyLjI5NDkzLDEyLjI5NDkzcy0xMi4yOTQ5My01LjUxNTQ5LTEyLjI5NDkzLTEyLjI5NDkzVjMzLjU5MDk0aC0yNy42MjMyMXYxMjIuNzkzNTdjMCw2Ljc3OTM1LTUuNTE1NSwxMi4yOTQ4NC0xMi4yOTQ4NSwxMi4yOTQ4NHMtMTIuMjk0OTMtNS41MTU0OS0xMi4yOTQ5My0xMi4yOTQ4NVYzMy41OTA5NGgtMjcuNjIzMjF2MTIyLjc5MzU3YzAsMjIuMDEwODQsMTcuOTA3MTQsMzkuOTE4MDYsMzkuOTE4MjMsMzkuOTE4MDYsNC44OTY0OSwwLDkuNTg4OTQtLjg4ODE0LDEzLjkyNzI3LTIuNTA4NTksNC44ODY2MywxNi41MjMyMiwyMC4xOTk0NSwyOC42MTUxMywzOC4yODU3MywyOC42MTUxM3MzMy4zOTkwOS0xMi4wOTE5MSwzOC4yODU4Mi0yOC42MTUxMWM0LjMzODQxLDEuNjIwNDMsOS4wMzA4NiwyLjUwODU5LDEzLjkyNzM2LDIuNTA4NTksMjIuMDEwOTMsMCwzOS45MTc5Ny0xNy45MDcyMiwzOS45MTc5Ny0zOS45MTgwNlYzMy41OTA5NGgtMjcuNjIzMzJaIi8+CiAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTIyMi44OTM0OSwzMC44Mjg2djEyNS41NTU5YzAsMjMuNTM0MDYtMTkuMTQ2MzYsNDIuNjgwNDEtNDIuNjgwMzEsNDIuNjgwNDEtNC4xNTQ2OCwwLTguMjQwMjgtLjU5NTM5LTEyLjE4MTgzLTEuNzcyNjMtMS4yNDYyNiwzLjM2MjY2LTIuOTE0OCw2LjU1NTI1LTQuOTc4NDEsOS41MjEyMS0yLjU3MzY4LDMuNjk5MDktNS42OTkwNiw2Ljk1NzIyLTkuMjg5NTUsOS42ODQxMS0zLjYzMTcsMi43NTgyNi03LjY0OTQ3LDQuOTAzNjMtMTEuOTQxNjcsNi4zNzY3MS00LjQ0MTMyLDEuNTI0MjMtOS4wOTE2MiwyLjI5NzE0LTEzLjgyMTgxLDIuMjk3MTRzLTkuMzgwNDgtLjc3MjkxLTEzLjgyMTgxLTIuMjk3MTRjLTQuMjkyMTgtMS40NzMwOC04LjMwOTk2LTMuNjE4NTMtMTEuOTQxNjYtNi4zNzY3MS0zLjU5MDQtMi43MjY4MS02LjcxNTg3LTUuOTg1MDItOS4yODk1NC05LjY4NDExLTIuMDYzNjItMi45NjU5Ni0zLjczMjE1LTYuMTU4NTUtNC45Nzg0MS05LjUyMTIxLTMuOTQxNDcsMS4xNzcyNi04LjAyNzA2LDEuNzcyNjMtMTIuMTgxNjUsMS43NzI2My0yMy41MzQxNCwwLTQyLjY4MDQ4LTE5LjE0NjM2LTQyLjY4MDQ4LTQyLjY4MDRWMzAuODI4NmgzMy4xNDc4OXYxMjUuNTU1OWMwLDUuMjU2MjIsNC4yNzYyOSw5LjUzMjUxLDkuNTMyNiw5LjUzMjUxczkuNTMyNTEtNC4yNzYyOSw5LjUzMjUxLTkuNTMyNTFWMzAuODI4NmgzMy4xNDc4OXYxNTEuNjYyMzZjMCw1LjI1NjMxLDQuMjc2MjksOS41MzI1OSw5LjUzMjU5LDkuNTMyNTlzOS41MzI1OS00LjI3NjMsOS41MzI1OS05LjUzMjU5VjMwLjgyODZoMzMuMTQ3OXYxMjUuNTU1ODJjMCw1LjI1NjIyLDQuMjc2Myw5LjUzMjUxLDkuNTMyNTEsOS41MzI1MXM5LjUzMjU5LTQuMjc2MjksOS41MzI1OS05LjUzMjUxVjMwLjgyODZoMzMuMTQ3ODFNMTkyLjUwODAxLDE1Ni4zODQ1MWMwLC45Mzg3OS0uMTA1OCwxLjg1MzI4LS4zMDYwMywyLjczMjI2LS4xMTgyOS41MTkxNi0uMjY5NDcsMS4wMjU5LS40NTEzNCwxLjUxNzk1LS4wMDI4OS4wMDc4Mi0uMDA1NzkuMDE1NjMtLjAwODY3LjAyMzQ1LjAwMjg5LS4wMDc4Mi4wMDU3OS0uMDE1NjMuMDA4NjctLjAyMzQ1LjE4MTg3LS40OTIwNS4zMzMwNS0uOTk4NzkuNDUxMzQtMS41MTc5NS4yMDAyMS0uODc4OTcuMzA2MDMtMS43OTM1NC4zMDYwMy0yLjczMjI2VjMzLjU5MDk0djEyMi43OTM1N00xNDAuMjk0OTMsMTgyLjQ5MDk3YzAsLjkzODc5LS4xMDU4LDEuODUzMjktLjMwNjAzLDIuNzMyMzQtLjExODI5LjUxOTE2LS4yNjk0NywxLjAyNTktLjQ1MTM0LDEuNTE3OTQtLjAwMjg5LjAwNzgxLS4wMDU3OS4wMTU2NC0uMDA4NjcuMDIzNDUuMDAyODktLjAwNzgxLjAwNTc5LS4wMTU2NC4wMDg2Ny0uMDIzNDUuMTgxODctLjQ5MjA0LjMzMzA1LS45OTg4LjQ1MTM0LTEuNTE3OTQuMjAwMjEtLjg3ODk3LjMwNjAzLTEuNzkzNTQuMzA2MDMtMi43MzIzNFYzMy41OTA5NGgwdjE0OC45MDAwMk0xMTUuNzU5MjksMTgzLjY1MDYyYy0uMDM1OTQtLjM4MTgyLS4wNTQyMi0uNzY4NjYtLjA1NDIyLTEuMTU5NjZWMzMuNTkwOTRoMHYxNDguOTAwMDJjMCwuMzkwOTkuMDE4MzYuNzc3ODQuMDU0MjIsMS4xNTk2Nk02My40OTI0OSwxNTYuNDg3NjhjLjAxMjkyLDEuNTY0NjkuMzE5NjIsMy4wNjA4Ljg2NzU4LDQuNDM1NDYtLjU0Nzk2LTEuMzc0NjctLjg1NDY2LTIuODcwNjktLjg2NzU4LTQuNDM1NDYtLjAwMDI1LS4wMzQzMy0uMDAwNDItLjA2ODc1LS4wMDA0Mi0uMTAzMTdWMzMuNTkwOTR2MTIyLjc5MzU3YzAsLjAzNDQyLjAwMDE3LjA2ODgzLjAwMDQyLjEwMzE3TTE5MC4wNjIyMywxNjMuNzM2MDRjLjIzNjI1LS4zMTU3LjQ1NzYzLS42NDI5OC42NjMyOS0uOTgxMDMtLjIwNTU4LjMzODA2LS40MjcwMy42NjU0MS0uNjYzMjkuOTgxMDNNMTM3Ljg0OTI1LDE4OS44NDI1OGMuMjM2MjUtLjMxNTcuNDU3NjMtLjY0Mjk4LjY2MzI5LS45ODEwMy0uMjA1NTguMzM4MDYtLjQyNzAzLjY2NTQxLS42NjMyOS45ODEwM005MC40NzY5LDE5Ni4xMDgyMWMuMDA4OTIuMDI0NTYuMDE3OTMuMDQ5MTEuMDI2ODYuMDczNTkuMjg3NDEuNzg0ODEuNTk4NzksMS41NTgxNC45MzMyNywyLjMxOTA3LS4zMzQ0OS0uNzYxMDEtLjY0NTg2LTEuNTM0MjYtLjkzMzI3LTIuMzE5MDctLjAwOS0uMDI0NDgtLjAxNzkzLS4wNDkwMy0uMDI2ODYtLjA3MzU5LS4yNzcwNC0uNzYwOTMtLjUzMTQ4LTEuNTMyNTYtLjc2MjYzLTIuMzE0MTUuMjMxMTUuNzgxNTguNDg1NjcsMS41NTMyMS43NjI2MywyLjMxNDE1TTIyNS42NTU4MiwyOC4wNjYyN2gtMzguNjcyMzl2MTI4LjMxODI1YzAsMy43MzMwOC0zLjAzNzE3LDYuNzcwMTgtNi43NzAyNyw2Ljc3MDE4cy02Ljc3MDI3LTMuMDM3MDgtNi43NzAyNy02Ljc3MDE4VjI4LjA2NjM1aC0zOC42NzI1N3YxNTQuNDI0NzFjMCwzLjczMzE2LTMuMDM3MTcsNi43NzAyNy02Ljc3MDI3LDYuNzcwMjdzLTYuNzcwMjYtMy4wMzcwOC02Ljc3MDI2LTYuNzcwMjdWMjguMDY2MzVoLTM4LjY3MjU4djEyOC4zMTgyNGMwLDMuNzMzMDgtMy4wMzcwOCw2Ljc3MDE4LTYuNzcwMjYsNi43NzAxOHMtNi43NzAyNi0zLjAzNzA4LTYuNzcwMjYtNi43NzAxOFYyOC4wNjYyN0gzMC4zNDQxNXYxMjguMzE4MjVjMCwyNS4wNTcxOCwyMC4zODU1Niw0NS40NDI3NSw0NS40NDI4Myw0NS40NDI3NSwzLjU2NDU3LDAsNy4wOTcyNy0uNDE0NDYsMTAuNTM0Ny0xLjIzNDExLDEuMTg5MDcsMi43MjgyNSwyLjY0OTU3LDUuMzQyNjQsNC4zNTc5Niw3Ljc5Nzk1LDIuNzM5MDYsMy45MzY3OCw2LjA2NTI1LDcuNDA0MzEsOS44ODYyOSwxMC4zMDYyOCwzLjg2NjUxLDIuOTM2NDYsOC4xNDQ2Nyw1LjIyMDg2LDEyLjcxNTY4LDYuNzg5NjMsNC43MzA1MiwxLjYyMzUsOS42ODI1OSwyLjQ0NjcyLDE0LjcxODUzLDIuNDQ2NzJzOS45ODc5My0uODIzMjIsMTQuNzE4NTQtMi40NDY3MmM0LjU3MTAxLTEuNTY4NzcsOC44NDkxNy0zLjg1MzE2LDEyLjcxNTY5LTYuNzg5NjMsMy44MjEwNS0yLjkwMTk3LDcuMTQ3MjQtNi4zNjk0OCw5Ljg4NjI5LTEwLjMwNjI4LDEuNzA4My0yLjQ1NTI5LDMuMTY4ODItNS4wNjk3Niw0LjM1Nzk2LTcuNzk4MDMsMy40Mzc0My44MTk2Niw2Ljk3MDMsMS4yMzQxMSwxMC41MzQ3OSwxLjIzNDExLDI1LjA1NzE5LDAsNDUuNDQyNjYtMjAuMzg1NTUsNDUuNDQyNjYtNDUuNDQyNzRWMjguMDY2MjdoLS4wMDAyM1oiLz4KICA8cmVjdCBjbGFzcz0ic3QwIiB4PSIxMjEuMjI5NzUiIHk9IjYxLjAzMzgyIiB3aWR0aD0iMTMuNTQwNTkiIGhlaWdodD0iMi43NjIzNCIvPgogIDxyZWN0IGNsYXNzPSJzdDAiIHg9IjY5LjAxNjY3IiB5PSI2MS4wMzM4MiIgd2lkdGg9IjEzLjU0MDUxIiBoZWlnaHQ9IjIuNzYyMzQiLz4KICA8cmVjdCBjbGFzcz0ic3QwIiB4PSIxMjEuMjI5NzUiIHk9Ijg1LjMxNTcyIiB3aWR0aD0iMTMuNTQwNTkiIGhlaWdodD0iMi43NjIzNCIvPgogIDxyZWN0IGNsYXNzPSJzdDAiIHg9IjEyMS4yMjk3NSIgeT0iNzMuMTc0NjkiIHdpZHRoPSIxMy41NDA1OSIgaGVpZ2h0PSIyLjc2MjM0Ii8+CiAgPHJlY3QgY2xhc3M9InN0MCIgeD0iNjkuMDE2NjciIHk9IjQ4Ljg5Mjg4IiB3aWR0aD0iMTMuNTQwNTEiIGhlaWdodD0iMi43NjIzNCIvPgogIDxyZWN0IGNsYXNzPSJzdDAiIHg9IjY5LjAxNjY3IiB5PSI5Ny40NTY1OCIgd2lkdGg9IjEzLjU0MDUxIiBoZWlnaHQ9IjIuNzYyMzQiLz4KICA8cmVjdCBjbGFzcz0ic3QwIiB4PSIxMjEuMjI5NzUiIHk9IjQ4Ljg5Mjg4IiB3aWR0aD0iMTMuNTQwNTkiIGhlaWdodD0iMi43NjIzNCIvPgogIDxyZWN0IGNsYXNzPSJzdDAiIHg9IjY5LjAxNjY3IiB5PSI3My4xNzQ2OSIgd2lkdGg9IjEzLjU0MDUxIiBoZWlnaHQ9IjIuNzYyMzQiLz4KICA8cmVjdCBjbGFzcz0ic3QwIiB4PSIxNzMuNDQyOTEiIHk9Ijg1LjMxNTcyIiB3aWR0aD0iMTMuNTQwNTEiIGhlaWdodD0iMi43NjIzNCIvPgogIDxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMzAuMzQ0MTggOTcuNDU2NTggNS44NjYzMiA5Ny40NTY1OCA1Ljg2NjMyIDg4LjA3Nzk3IDMwLjM0NDE4IDg4LjA3Nzk3IDMwLjM0NDE4IDg1LjMxNTcyIDUuODY2MzIgODUuMzE1NzIgNS44NjYzMiA3NS45MzcwMyAzMC4zNDQxOCA3NS45MzcwMyAzMC4zNDQxOCA3My4xNzQ2OSA1Ljg2NjMyIDczLjE3NDY5IDUuODY2MzIgNjMuNzk2MDggMzAuMzQ0MTggNjMuNzk2MDggMzAuMzQ0MTggNjEuMDMzODIgNS44NjYzMiA2MS4wMzM4MiA1Ljg2NjMyIDUxLjY1NTIyIDMwLjM0NDE4IDUxLjY1NTIyIDMwLjM0NDE4IDQ4Ljg5Mjg4IDMuMTAzOTggNDguODkyODggMy4xMDM5OCAxMDAuMjE4OTIgMzAuMzQ0MTggMTAwLjIxODkyIDMwLjM0NDE4IDk3LjQ1NjU4Ii8+CiAgPHJlY3QgY2xhc3M9InN0MCIgeD0iMTczLjQ0MjkxIiB5PSI2MS4wMzM4MiIgd2lkdGg9IjEzLjU0MDUxIiBoZWlnaHQ9IjIuNzYyMzQiLz4KICA8cmVjdCBjbGFzcz0ic3QwIiB4PSIxNzMuNDQyOTEiIHk9IjQ4Ljg5Mjg4IiB3aWR0aD0iMTMuNTQwNTEiIGhlaWdodD0iMi43NjIzNCIvPgogIDxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMjI1LjY1NTgyIDQ4Ljg5Mjg4IDIyNS42NTU4MiA1MS42NTUyMiAyNTAuMTMzNjkgNTEuNjU1MjIgMjUwLjEzMzY5IDYxLjAzMzgyIDIyNS42NTU4MiA2MS4wMzM4MiAyMjUuNjU1ODIgNjMuNzk2MDggMjUwLjEzMzY5IDYzLjc5NjA4IDI1MC4xMzM2OSA3My4xNzQ2OSAyMjUuNjU1ODIgNzMuMTc0NjkgMjI1LjY1NTgyIDc1LjkzNzAzIDI1MC4xMzM2OSA3NS45MzcwMyAyNTAuMTMzNjkgODUuMzE1NzIgMjI1LjY1NTgyIDg1LjMxNTcyIDIyNS42NTU4MiA4OC4wNzc5NyAyNTAuMTMzNjkgODguMDc3OTcgMjUwLjEzMzY5IDk3LjQ1NjU4IDIyNS42NTU4MiA5Ny40NTY1OCAyMjUuNjU1ODIgMTAwLjIxODkyIDI1Mi44OTYwMiAxMDAuMjE4OTIgMjUyLjg5NjAyIDQ4Ljg5Mjg4IDIyNS42NTU4MiA0OC44OTI4OCIvPgogIDxyZWN0IGNsYXNzPSJzdDAiIHg9IjE3My40NDI5MSIgeT0iOTcuNDU2NTgiIHdpZHRoPSIxMy41NDA1MSIgaGVpZ2h0PSIyLjc2MjM0Ii8+CiAgPHJlY3QgY2xhc3M9InN0MCIgeD0iMTIxLjIyOTc1IiB5PSI5Ny40NTY1OCIgd2lkdGg9IjEzLjU0MDU5IiBoZWlnaHQ9IjIuNzYyMzQiLz4KICA8cmVjdCBjbGFzcz0ic3QwIiB4PSIxNzMuNDQyOTEiIHk9IjczLjE3NDY5IiB3aWR0aD0iMTMuNTQwNTEiIGhlaWdodD0iMi43NjIzNCIvPgogIDxyZWN0IGNsYXNzPSJzdDAiIHg9IjY5LjAxNjY3IiB5PSI4NS4zMTU3MiIgd2lkdGg9IjEzLjU0MDUxIiBoZWlnaHQ9IjIuNzYyMzQiLz4KPC9zdmc+);
    --icon-arrow: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLnN0MCB7CiAgICAgICAgZmlsbDogIzAwNGM4NzsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSIxNS4zOTcwNSAuNTYyNDIgMTIuODIyIDMuMzI3NDQgMjQuNDIxNDQgMTQuMTA5NjYgMCAxNC4xMDk2NiAwIDE3Ljg4NDYxIDI0LjQzMDcyIDE3Ljg4NDYxIDEyLjgyMiAyOC42NzI1NiAxNS4zOTcwNSAzMS40Mzc1OCAzMiAxNi4wMDE3NyAxNS4zOTcwNSAuNTYyNDIiLz4KPC9zdmc+);
    --icon-arrow-white: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLnN0MCB7CiAgICAgICAgZmlsbDogI2ZmZjsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSIxNS4zOTcwNSAuNTYyNDIgMTIuODIyIDMuMzI3NDQgMjQuNDIxNDQgMTQuMTA5NjYgMCAxNC4xMDk2NiAwIDE3Ljg4NDYxIDI0LjQzMDcyIDE3Ljg4NDYxIDEyLjgyMiAyOC42NzI1NiAxNS4zOTcwNSAzMS40Mzc1OCAzMiAxNi4wMDE3NyAxNS4zOTcwNSAuNTYyNDIiLz4KPC9zdmc+);
    --ornament1: url(/wp-content/themes/junshin/src/junshin-ornament1.svg);
    --ornament2: url(/wp-content/themes/junshin/src/junshin-ornament2.svg);
    --ornament3: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDMyIDI0Ij4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLnN0MCB7CiAgICAgICAgZmlsbDogIzAwNGM4NzsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTIwLjY4NjMsMi42Mjc0M2gwYy0yLjU4ODE1LDIuNTg4MTgtNi43ODQzOSwyLjU4ODE4LTkuMzcyNTQsMGwtLjAwMDAzLS4wMDAwM2MtMi41ODgxNC0yLjU4ODE2LTYuNzg0MzctMi41ODgxNy05LjM3MjUyLS4wMDAwMmwtLjAwMDA5LjAwMDA5Yy0yLjU4ODE1LDIuNTg4MTUtMi41ODgxNCw2Ljc4NDM4LjAwMDAyLDkuMzcyNTJsNC42ODYzNCw0LjY4NjMsNC42ODYzLDQuNjg2M2MyLjU4ODE0LDIuNTg4MTQsNi43ODQzNiwyLjU4ODE0LDkuMzcyNSwwbDQuNjg2My00LjY4NjMsNC42ODYzMi00LjY4NjMyYzIuNTg4MTQtMi41ODgxNCwyLjU4ODE1LTYuNzg0MzMuMDAwMDItOS4zNzI0OGwtLjAwMDA3LS4wMDAwN0MyNy40NzA2OS4wMzkyNiwyMy4yNzQ0NS4wMzkyNiwyMC42ODYzLDIuNjI3NDNaIi8+Cjwvc3ZnPg==);
    --ornament4: url(/wp-content/themes/junshin/src/junshin-ornament4.svg);
    --ornament5: url(/wp-content/themes/junshin/src/junshin-ornament5.svg);
    --ornament6: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDY0IDY0Ij4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLnN0MCB7CiAgICAgICAgZmlsbDogIzAwNGM4NzsKICAgICAgfQoKICAgICAgLnN0MSB7CiAgICAgICAgZmlsbDogI2EzYzRkMzsKICAgICAgfQoKICAgICAgLnN0MiB7CiAgICAgICAgZmlsbDogIzYxOTdhZjsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPHJlY3QgY2xhc3M9InN0MCIgeD0iMjEuMzMzMzMiIHdpZHRoPSIyMS4zMzMzMyIgaGVpZ2h0PSIyMS4zMzMzMyIvPgogIDxyZWN0IGNsYXNzPSJzdDIiIHg9IjIxLjMzMzMzIiB5PSIyMS4zMzMzMyIgd2lkdGg9IjIxLjMzMzMzIiBoZWlnaHQ9IjIxLjMzMzMzIi8+CiAgPHJlY3QgY2xhc3M9InN0MSIgeD0iNDIuNjY2NjciIHk9IjIxLjMzMzMzIiB3aWR0aD0iMjEuMzMzMzMiIGhlaWdodD0iMjEuMzMzMzMiLz4KICA8cmVjdCBjbGFzcz0ic3QwIiB4PSIwIiB5PSIyMS4zMzMzMyIgd2lkdGg9IjIxLjMzMzMzIiBoZWlnaHQ9IjIxLjMzMzMzIi8+CiAgPHJlY3QgY2xhc3M9InN0MSIgeD0iMjEuMzMzMzMiIHk9IjQyLjY2NjY3IiB3aWR0aD0iMjEuMzMzMzMiIGhlaWdodD0iMjEuMzMzMzMiLz4KPC9zdmc+);
	--ornament7: url(/wp-content/themes/junshin/src/junshin-ornament7.svg);
	--ornament8: url(/wp-content/themes/junshin/src/junshin-ornament8.svg);
	--ornament9: url(/wp-content/themes/junshin/src/junshin-ornament9.svg);
	--ornament10: url(/wp-content/themes/junshin/src/junshin-ornament10.svg);
    --ornament-text2: url(/wp-content/themes/junshin/src/junshin-text2.svg);
    --top-information-bg: url(/wp-content/themes/junshin/src/junshin-top-information-bg.webp);
    --page-header-bg: url(/wp-content/uploads/2026/04/top-main-tmp.jpg);
}

@media (width < 783px) {
    --adminbar-height: 46px;
}

/* --------------------------
    reset
-------------------------- */
* {
    margin: 0;
    padding: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
    box-sizing: border-box;
}

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

html {
    scroll-padding-top: var(--header-height-sp);
    scroll-behavior: smooth;
}

body {
    font-feature-settings: 'palt';
    overflow-wrap: anywhere;
    line-break: strict;
	-webkit-text-size-adjust: 100%;
    font-size: var(--font-size);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
	color: var(--color);
    font-family: var(--font-family);
    font-weight: 500;
    min-height: 100vh;
	padding-right: var(--side-menu-width);
}

body:has(#mobile-menu-wrap:popover-open) {
	overflow-y: hidden;
}

main {
    display: block;
}

img {
    display: block;
    max-width: 100%;
}

input[type="image"],
video,
embed,
iframe,
marquee,
object {
    display: block;
    max-width: 100%;
    aspect-ratio: attr(width) / attr(height);
}

table {
    max-width: 100%;
    aspect-ratio: attr(width) / attr(height);
}

a {
    color: inherit;
    text-decoration: none;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1rem;
}

h5 {
    font-size: 0.75rem;
}

h6 {
    font-size: 0.75rem;
    font-weight: 500;
}

table {
    border-spacing: 0;
}

@media (width < 768px) {
    body {
        font-size: var(--font-size-sp);
		padding-right: 0;
    }
}

/* --------------------------
    loading
-------------------------- */
#loading {
	display: block;
	width: 100vw;
	height: 100svh;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
}

body:not(.home).show #loading {
    display: none;
}

body:not(.home).show #loading:after {
    opacity: 0;
    pointer-events: none;
    transition: all 0s 0s ease;
}

body:not(.home) #loading:before {
	display: none;
}

body.home.show #loading {
    opacity: 0;
    pointer-events: none;
    transition: all 1s 1s ease;
}

body.home #loading:before {
	content: 'loading...';
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background-image: var(--loading-logo);
	background-size: auto 120px;
	background-position: center;
	background-repeat: no-repeat;
	padding-top: calc(120px + 2.5em);
	font-family: var(--serif-font);
	font-style: italic;
	font-size: 0.875em;
	letter-spacing: 0.05em;
	line-height: 1.5;
	color: #555;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
}

body.home.show #loading:before {
	opacity: 0;
	transition: all 0.3s 0.7s ease;
}

body.home.show #loading:before {
	content: 'Welcome to \AKagoshima Junshin!';
	white-space: pre;
}


/* --------------------------
    common
-------------------------- */
.content-width {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
}

.narrow-width {
    width: 100%;
    max-width: var(--narrow-width);
    margin: 0 auto;
}

.middle-width {
    width: 100%;
    max-width: var(--middle-width);
    margin: 0 auto;
}

.wide-width {
    width: 100%;
    max-width: var(--wide-width);
    margin: 0 auto;
}

.max-width {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
}

.section-padding {
    padding: 4em 1em;
}

.section-padding-low {
    padding: 2em 1em;
}

.section-padding-full {
    padding: 4em 0;
}

.clearfix {
    clear: both;
}

.heading {
	display: flex;
	flex-flow: column;
	font-family: var(--serif-font);
	font-weight: 500;
	font-size: clamp(1.5em, 2.75vw, 2em);
	margin-bottom: 1em;
}

.heading.center {
	align-items: center;
}

.heading:before {
	content: attr(data-text);
	padding-left: 1em;
	background-image: var(--ornament3);
	background-position: center left;
	background-size: 0.5em auto;
	background-repeat: no-repeat;
	font-family: var(--display-font);
	font-weight: 400;
	font-size: 0.675em;
	letter-spacing: 0;
	line-height: 1.25;
}

.sub-heading {
	margin-bottom: 1em;
	font-family: var(--serif-font);
	font-weight: 500;
	font-size: 1em;
	position: relative;
	z-index: 1;
}

.sub-heading:before {
	content: '';
	display: block;
	width: 100%;
	border-top: 1px solid var(--color-blue-light);
	position: absolute;
	top: 50%;
	left: 0;
	z-index: -1;
}

.sub-heading > span {
	padding: 0 1em 0 1.5em;
	background-color: #fff;
	background-image: var(--ornament6);
	background-size: 1em auto;
	background-position: left center;
	background-repeat: no-repeat;
}

.sub-heading.footer {
	font-size: 1.25em;
}

.sub-heading.footer > span {
	background-color: var(--color-blue-grayish);
}

.button-wrap {
	margin-top: 2em;
}

.button-wrap.center {
	display: flex;
	justify-content: center;
	margin-left: 2em;
}

.button-wrap.right {
	display: flex;
	justify-content: flex-end;
}

.button {
	display: inline-block;
	padding-right: 3.5em;
	font-family: var(--serif-font);
	position: relative;
}

.button:hover {
	color: var(--color-blue);
}

.button:before {
	content: '';
	display: block;
	width: 2em;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-image: var(--icon-arrow-white);
	background-size: 33%;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--color-blue);
	position: absolute;
	top: 50%;
	right: 0.5em;
	transform: translateY(-50%);
	transition: right 0.3s ease;
}

.button:hover:before {
	right: 0;
	transition: right 0.3s ease;
}

.button:after {
	content: '';
	display: block;
	width: calc(100% - 3em);
	border-top: 1px solid var(--color);
	position: absolute;
	bottom: -0.5em;
	left: 0;
}

.button:hover:after {
	border-top: 1px solid var(--color-blue);
}

.frame {
	background-color: var(--color-blue-pale);
	padding: 2em 3em;
	border-radius: 0.5em;
}

.corner-round {
	border-radius: 0.5em;
	overflow: hidden;
}

.mt4 {
	margin-top: 4em;
}

.mt2 {
	margin-top: 2em;
}

.mt1 {
	margin-top: 1em;
}

.mt0 {
	margin-top: 0 !important;
}

.mb4 {
	margin-bottom: 4em;
}

.mb2 {
	margin-bottom: 2em;
}

.mb1 {
	margin-bottom: 1em;
}

.mb0 {
	margin-bottom: 0;
}

.col2 {
	display: flex;
	justify-content: space-between;
}

.col2.middle {
	align-items: center;
}

.col2.reverse {
	flex-flow: row-reverse;
}

.col2 > div {
	width: calc(50% - 2em);
}

.point {
	padding-left: 8em;
	position: relative;
}

.point:before {
	content: 'POINT';
	font-weight: 700;
	color: #fff;
	background: var(--gradient-purple-aqua);
	padding: 0.25lh 0.75lh;
	border-radius: 0.75lh;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

@media (width < 768px) {
    .section-padding {
        padding: 2em 1em;
    }

    .section-padding-low {
        padding: 1em;
    }
    
    .section-padding-full {
        padding: 2em 0;
    }

	.heading.sp-center {
		align-items: center;
	}

	.frame {
		padding: 1em 1.5em;
	}

	.col2,
	.col2.reverse {
		flex-flow: column;
	}

	.col2 > div {
		width: 100%;
	}

	.col2 > div + div {
		margin-top: 1em;
	}

	.mt4 {
		margin-top: 2em;
	}

	.mt2 {
		margin-top: 1em;
	}

	.mb4 {
		margin-bottom: 2em;
	}

	.mb2 {
		margin-bottom: 1em;
	}
}

#page-content-navigation > div {
	padding: 1em;
}

#page-content-navigation > div > .header {
	display: block;
	width: 100%;
	padding: 1em 3em 1em 1.5em;
	background-color: var(--color-blue-pale);
	position: relative;
}

#page-content-navigation > div > .header:hover {
	cursor: pointer;
}

#page-content-navigation > div > .header:before {
	content: '\f107';
	display: block;
	width: 1lh;
	height: 1lh;
	font-family: var(--font-awesome);
	font-weight: 700;
	color: var(--color-blue);
	pointer-events: none;
	position: absolute;
	top: 50%;
	right: 1em;
	transform: translateY(-50%);
}


#page-content-navigation > div > .header:has(input:checked):before {
	content: '\f106';
}

#page-content-navigation > div > .header > span {
	font-family: var(--serif-font);
	font-weight: 500;
	font-size: 0.875em;
	color: var(--color-blue);
}

#page-content-navigation > div > .header > input {
	display: none;
}

#page-content-navigation > div > .header + .link-list {
	display: none;
	padding: 0 1.5em 1.5em 1.5em;
	background-color: var(--color-blue-pale);
}

#page-content-navigation > div > .header:has(input:checked) + .link-list {
	display: grid;
}

.link-list {
	list-style-type: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 0.5em;
}

.link-list.col1 {
	grid-template-columns: 1fr;
}

.link-list.col3 {
	grid-template-columns: repeat(3, 1fr);
}

.link-list.col4 {
	grid-template-columns: repeat(4, 1fr);
}

.link-list > li > a {
	display: flex;
	align-items: center;
	height: 100%;
	border: 1px solid #ccc;
	padding: 1em 3em 1em 2em;
	background-color: #fff;
	position: relative;
	transition: all 0.2s ease;
}

.link-list > li > a:hover {
	border: 1px solid var(--color-blue);
	color: var(--color-blue);
	transition: all 0.2s ease;
}

.link-list > li > a:before {
    content: '';
    display: block;
    width: 0.75em;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-image: var(--icon-arrow);
    background-size: 100%;
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translateY(-50%);
}

.link-list > li > a[href^="#"]:before {
    transform: translateY(-50%) rotate(90deg);
}

.link-list > li > a[target="_blank"]:before {
	content: '\f4c8';
    background: unset;
	font-family: var(--material-icon);
	font-weight: 200;
	font-size: 1.25em;
}

.link-list > li > a[href$=".pdf"]:before {
	content: '\e415';
	font-family: var(--material-icon);
	font-weight: 200;
	font-size: 1.25em;
	background: unset;
}

.card-list {
	list-style-type: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 2em;
}

.card-list.col3 {
	grid-template-columns: repeat(3, 1fr);
}

.card-list > li > a {
	display: block;
	overflow: hidden;
	border-radius: 0.5em;
}

.card-list > li > a > figure {
	width: 100%;
	aspect-ratio: 3 / 2;
	background-color: #eee;
}

.card-list > li > a > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: all 0.3s ease;
}

.card-list > li > a:hover > figure > img {
	opacity: 0.7;
	transform: scale(1.05);
	transition: all 0.3s ease;
}

.card-list > li > a > div {
	padding: 0.75em 3em 0.75em 1.5em;
	background-color: var(--color-blue-pale);
	font-family: var(--serif-font);
	position: relative;
	transition: all 0.3s ease;
}

.card-list > li > a:hover > div {
	color: var(--color-blue);
	background-color: var(--color-blue-grayish);
	transition: all 0.3s ease;
}

.card-list > li > a > div:before {
	content: '';
	display: block;
	width: 1em;
	aspect-ratio: 1 / 1;
	background-image: var(--icon-arrow);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	right: 1.5em;
	transform: translateY(-50%);
	transition: right 0.3s ease;
}

.card-list > li > a:hover > div:before {
	right: 1em;
	transition: right 0.3s ease;
}

.big-catch-copy {
	font-family: var(--serif-font);
	font-size: clamp(1.25em, 2.25vw, 1.75em);
	font-weight: 500;
	word-break: auto-phrase;
}

.big-catch-copy.center {
	display: flex;
	justify-content: center;
	text-align: center;
	word-break: keep-all;
}

.big-catch-copy > span {
	display: inline-block;
	padding: 1em 2em;
	background-color: var(--color-blue-pale);
	border-radius: 0.375em;
	overflow: hidden;
}

.slogan {
	padding: 2.5em 2em 2em 2em;
	border-radius: 0.5em;
	overflow: hidden;
	background-color: var(--color-blue-pale);
	text-align: center;
	word-break: auto-phrase;
	position: relative;
	margin-bottom: 1em;
}

.slogan > dt {
	background-color: var(--color-blue);
	color: #fff;
	font-size: 0.75em;
	border-radius: 0.5em;
	padding: 0.25em 0.75em;
	position: absolute;
	top: 1em;
	left: 1em;
}

.slogan > dd {
	color: var(--color-blue);
	font-family: var(--serif-font);
	font-size: clamp(1.125em, 1.75vw, 1.5em);
}

.big-numbered-list {
	list-style-type: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1em;
	counter-reset: count;
}

.big-numbered-list.col3 {
	grid-template-columns: 1fr 1fr 1fr;
}

.big-numbered-list > li {
	background-color: var(--color-blue-pale);
	border: 1px solid var(--color-blue-light);
	border-radius: 0.5em;
}

.big-numbered-list:not(.col3) > li:last-of-type:nth-of-type(odd) {
	grid-column: span 2;
}

.big-numbered-list > li > dl {
	padding: 1em 2em 1.5em 2em;
}

.big-numbered-list > li > dl > dt {
	display: flex;
	flex-flow: column;
	align-items: center;
	text-align: center;
	word-break: auto-phrase;
	font-family: var(--serif-font);
	font-size: 1.25em;
	color: var(--color-blue);
	margin-bottom: 0.5em;
}

.big-numbered-list > li > dl > dt:before {
	counter-increment: count;
	content: '0'counter(count);
	font-family: var(--display-font);
	font-size: 2em;
	font-weight: 400;
	line-height: 1.25;
	color: var(--color-blue-light);
	margin-bottom: 0.25em;
}

.big-numbered-list > li > dl > dt[data-text]:before {
	content: attr(data-text);
}

.big-numbered-list > li > dl > dd.center {
	display: flex;
	flex-flow: column;
	align-items: center;
}

.big-numbered-list > li > dl > dd > span {
	padding: 0.25lh 1lh;
	border-radius: 0.75lh;
	background-color: var(--color-blue);
	color: #fff;
	font-size: 0.75em;
}

.scrollable {
	overflow-x: scroll;
	position: relative;
	margin-bottom: 1em;
}

.single-content .scrollable > table {
	margin-bottom: unset;
}

.scrollable > table {
	min-width: 768px;
	max-width: 100%;
}

.scrollable > table .center {
	text-align: center;
}

.notice {
	background-color: var(--color-red-pale);
	padding:  2em 2em 2em 6em;
	border: 1px solid var(--color-red);
	border-radius: 0.5em;
	position: relative;
}

.notice:before {
	content: '\f06a';
	display: flex;
	justify-content: center;
	align-items: center;
	width: 1em;
	height: 1em;
	font-family: var(--font-awesome);
	font-weight: 700;
	font-size: 3em;
	color: var(--color-red);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0.5em;
}

.interpose-content {
	padding: 2.5em 2em 2em 2em;
	position: relative;
}

.interpose-content:before {
	content: '';
	width: 100%;
	height: 2em;
	border-top: 1px solid var(--color-blue);
	border-left: 1px solid var(--color-blue);
	border-right: 1px solid var(--color-blue);
	border-radius: 0.25em 0.25em 0 0;
	position: absolute;
	top: 0;
	left: 0;
}

.interpose-content:after {
	content: '';
	width: 100%;
	height: 2em;
	border-bottom: 1px solid var(--color-blue);
	border-left: 1px solid var(--color-blue);
	border-right: 1px solid var(--color-blue);
	border-radius: 0 0 0.25em 0.25em;
	position: absolute;
	bottom: 0;
	left: 0;
}

.interpose-content > dt {
	padding: 0.25lh 1lh;
	background-color: var(--color-blue);
	border-radius: 0.75lh;
	color: #fff;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
}


#gallery-list {
	list-style-type: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 2em;
}

#gallery-list > li > figure > div {
	aspect-ratio: 3 / 2;
	background-color: #eee;
	border-radius: 0.5em;
	overflow: hidden;
}

#gallery-list > li > figure > div > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

#gallery-list > li > figure > figcaption {
	margin-top: 1em;
}

#gallery-list > li > figure > figcaption > div {
	padding-left: 2em;
	background-image: var(--ornament6);
	background-size: 1em auto;
	background-position: left center;
	background-repeat: no-repeat;
	font-family: var(--serif-font);
	font-size: clamp(1.125em, 1.75vw, 1.25em);
}

#gallery-list > li > figure > figcaption > p {
	margin-top: 1em;
}

@media (max-width: 960px) {
	.card-list,
	.card-list.col3 {
		grid-gap: 1em;
	}

	.card-list.col3 {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 768px) {
	.link-list {
		padding: 1em;
		grid-gap: 0.25em;
	}

	.link-list,
	.link-list.col1,
	.link-list.col3,
	.link-list.col4 {
		grid-template-columns: 1fr;
	}

	.link-list > li > a {
		padding: 0.5em 3em 0.5em 1em;
	}
	
	.card-list,
	.card-list.col3 {
		grid-template-columns: 1fr;
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
	}

	.big-numbered-list {
		grid-template-columns: 1fr;
	}

	.big-numbered-list.col3 {
		grid-template-columns: 1fr;
	}

	.big-numbered-list:not(.col3) > li:last-of-type:nth-of-type(odd) {
		grid-column: unset;
	}

	.big-numbered-list > li > dl {
		padding: 0.5em 1em 1em 1em;
	}

	.scrollable:before {
		content: 'スクロールできます';
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		padding-top: 4em;
		color: #fff;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.scrollable:after {
		content: '\f25a';
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		font-family: var(--font-awesome);
		font-weight: 700;
		font-size: 2em;
		color: #fff;
		position: absolute;
		top: 0;
		left: 0;
		animation: scrollFinger 2s ease infinite;
		z-index: 2;
	}

	@keyframes scrollFinger {
		0% {
			transform: translateX(0.5em);
		}
		33% {
			transform: translateX(-0.5em);
		}
		66% {
			transform: translateX(-0.5em);
		}
		100% {
			transform: translateX(-0.5em);
		}
	}

	.scrollable.scrolled:before {
		display: none;
	}

	.scrollable.scrolled:after {
		display: none;
	}

	#gallery-list {
		max-width: 480px;
		margin: 0 auto;
		grid-template-columns: 1fr;
	}
}



/* --------------------------
    side menu
-------------------------- */
#side-menu-wrap {
	display: block;
	background-color: #fff;
	width: var(--side-menu-width);
	height: 100dvh;
	position: fixed;
	right: 0;
	z-index: 256;
}

body.admin > #side-menu-wrap {
	height: calc(100dvh - var(--adminbar-height));
}

#side-menu {
	list-style-type: none;
	display: grid;
	grid-template-rows: repeat(6, auto);
	width: 100%;
	height: calc(100% - var(--side-menu-width));
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0;
	position: relative;
}

#side-menu > li {
	display: flex;
	flex-flow: column;
}

#side-menu > li:hover {
	background-color: var(--color-blue-pale);
}

#side-menu > li + li:before {
	content: '';
	display: block;
	width: calc(100% - 2em);
	border-top: 1px solid #ccc;
	margin-left: 1em;
}

#side-menu > li > a {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: 1.25;
}

#side-menu > li > a[href="#"] {
	pointer-events: none;
}

#side-menu > li > a > img {
	width: 45%;
	margin-bottom: 0.5em;
}

#side-menu > li > ul {
	list-style-type: none;
	max-width: 320px;
	width: calc(100vw - var(--side-menu-width));
	height: 100dvh;
	padding: 4em 1em;
	overflow-y: scroll;
	background-color: var(--color-blue-pale);
	pointer-events: none;
	opacity: 0;
	font-size: 1.5em;
	font-weight: 500;
	position: absolute;
	top: calc(var(--side-menu-width) * -1);
	left: 0;
	transform: translateX(-100%);
}

#side-menu > li:hover > ul {
	pointer-events: auto;
	opacity: 1;
}

#side-menu > li > ul > li > a {
	font-family: var(--serif-font);
	font-size: 1.125em;
}

#side-menu > li > ul > li > a {
	border-bottom: 1px solid var(--color-blue-grayish);
}

#side-menu ul {
	list-style-type: none;
	padding-left: 1em;
}

#side-menu ul > li + li {
	border-top: 1px solid var(--color-blue-grayish);
}

#side-menu ul > li > a {
	display: block;
	padding: 1em 3em 1em 1em;
	position: relative;
	transition: all 0.2s ease;
}

#side-menu ul > li > a:hover {
	background-color: var(--color-blue-grayish);
	color: var(--color-blue);
	transition: all 0.2s ease;
}

#side-menu ul > li > a:before {
	content: '';
	display: block;
	width: 1em;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-image: var(--icon-arrow-white);
	background-size: 33%;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--color-blue);
	position: absolute;
	top: 50%;
	right: 1em;
	transform: translateY(-50%);
}

#side-menu ul > li > a[target="_blank"]:before {
	content: '\f4c8';
	font-family: var(--material-icon);
	font-weight: 200;
	font-size: 1.25em;
	background: unset;
}

#side-menu ul > li > a[href$=".pdf"]:before {
	content: '\e415';
	font-family: var(--material-icon);
	font-weight: 200;
	font-size: 1.25em;
	background: unset;
}

@media (height < 600px) {
	#side-menu > li > a > img {
		display: none;
	}
}

@media (height < 300px) {
	#side-menu-wrap {
		background-color: unset;
	}

	#side-menu {
		display: none;
	}
}

@media (width < 768px) {
	#side-menu-wrap {
		width: var(--header-height-sp);
		background-color: unset;
	}

	#side-menu {
		display: none;
	}
}


/* --------------------------
    header
-------------------------- */
/* header */
header {
	width: calc(100% - var(--side-menu-width));
	height: var(--header-height);
	padding: 0 2rem;
	color: #fff;
	left: 0;
	position: fixed;
	z-index: 255;
	transition: height 0.2s ease, background-color 0.2s ease;
}

header.fixed {
	background-color: rgba(255, 255, 255, 0.8);
	height: var(--header-height-sp);
	padding: 0 1rem;
	color: var(--color);
	transition: height 0.2s ease, background-color 0.2s ease;
}

header:before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

header.fixed:before {
	display: none;
}

#topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: var(--topbar-height);
}

header.fixed #topbar {
	display: none;
}

#topbar > h1 {
	font-size: 10px;
}

#topbar-menu {
	list-style-type: none;
	display: flex;
	align-items: center;
	font-size: 0.75em;
	font-weight: 700;
}

#topbar-menu > li {
	display: flex;
}

#topbar-menu > li + li:not(.topbar-button):before {
	content: '|';
	display: block;
	margin: 0 0.75em;
}

#topbar-menu > li + li.topbar-button {
	margin-left: 1.5em;
}

#topbar-menu > li.topbar-button > a {
	display: inline-block;
	background-color: #fff;
	border-radius: 0.25em;
	padding: 0.25em 1em;
	color: var(--color-blue);
	letter-spacing: 0.05em;
}

#topbar-menu > li.topbar-button > a > i {
	margin-right: 0.25em;
}

#header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: calc(100% - var(--topbar-height));
}

header.fixed #header-content {
	height: 100%;
}

#header-logo > object {
	width: 360px;
	pointer-events: none;
}

header.fixed #header-logo > object {
	width: 240px;
}

#header-menu {
	list-style-type: none;
	display: flex;
	align-items: center;
	font-size: 0.875em;
	font-weight: 700;
}

#header-menu > li + li {
	margin-left: 2em;
}

#header-menu > li + li.header-button {
	margin-left: 1.5em;
}

#header-menu > li.header-button > a {
	display: inline-block;
	background-color: #fff;
	border-radius: 0.25em;
	padding: 0.25em 1em;
	color: var(--color-blue);
	letter-spacing: 0.05em;
	font-size: 0.875em;
}

#header-menu > li:not(.header-button) > a {
	text-shadow: 0 0 0.25em rgba(0, 0, 0, 0.5);
}

header.fixed #header-menu > li:not(.header-button) > a {
	text-shadow: unset;
}

header.fixed #header-menu > li.header-button > a {
	background-color: var(--color-blue);
	color: #fff;
}

#header-menu > li.header-button > a > i {
	margin-right: 0.25em;
}

@media (width < 1200px) {
	header {
		height: var(--header-height-sp);
		padding: 0 1rem;
	}

	#topbar {
		display: none;
	}

	#header-content {
		height: 100%;
	}

	#header-logo > object {
		width: 240px;
		pointer-events: none;
	}

	#header-menu {
		display: none;
	}
}

@media (width < 768px) {
	header {
		width: calc(100% - var(--header-height-sp));
	}
}

/* drawer */
.drawer-open,
.drawer-close {
	display: flex;
	height: auto;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	width: var(--side-menu-width);
	aspect-ratio: 1 / 1;
	font-size: 1em;
	appearance: none;
	outline: none;
	border: none;
	background: var(--gradient-yellow-aqua);
}

.drawer-open:hover,
.drawer-close:hover {
	cursor: pointer;
}

.drawer-close {
	position: absolute;
	top: 0;
	right: 0;
}

.drawer-open > span,
.drawer-close > span {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50%;
	height: 2px;
	background-color: #fff;
	margin: 0.75em 0;
	position: relative;
}

.drawer-open > span:before,
.drawer-close > span:before {
	display: block;
	content: '';
    width: 100%;
	height: 2px;
	background-color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateY(-0.5em);
	transition: transform 0.2s ease;
}

.drawer-open > span:after,
.drawer-close > span:after {
	display: block;
	content: '';
    width: 100%;
	height: 2px;
	background-color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateY(0.5em);
	transition: transform 0.2s ease;
}

body:has(#mobile-menu-wrap:popover-open) .drawer-open > span,
body:has(#mobile-menu-wrap:popover-open) .drawer-close > span {
	background-color: transparent;
	transition: background-color 0.2s ease;
}

body:has(#mobile-menu-wrap:popover-open) .drawer-open > span:before,
body:has(#mobile-menu-wrap:popover-open) .drawer-close > span:before {
    transform: translateY(0) rotate(45deg);
    transition: transform 0.2s ease;
}

body:has(#mobile-menu-wrap:popover-open) .drawer-open > span:after,
body:has(#mobile-menu-wrap:popover-open) .drawer-close > span:after {
    transform: translateY(0) rotate(-45deg);
    transition: transform 0.2s ease;
}

#mobile-menu-wrap {
	display: grid;
	grid-template-columns: 2fr 1fr;
	width: 100%;
	height: 100dvh;
	border: none;
	opacity: 0;
	pointer-events: none;
	overflow-y: scroll;
	transition-property: opacity, display;
	transition-duration: 0.2s;
	transition-behavior: normal, allow-discrete;
	position: fixed;
}

#mobile-menu-wrap:popover-open {
    opacity: 1;
	pointer-events: auto;
    transition-property: opacity, display;
    transition-duration: 0.2s;
    transition-behavior: normal, allow-discrete;
}

body.customize-support #mobile-menu-wrap {
	height: calc(100svh - var(--adminbar-height));
	margin-top: var(--adminbar-height);
}

#mobile-menu-wrap > div:first-of-type {
    padding: var(--header-height) 4em 4em 4em;
}

#mobile-menu-wrap > div:last-of-type {
    padding: var(--header-height) 4em 4em 4em;
	background-color: var(--color-blue-pale);
}

#mobile-menu-wrap > div:last-of-type > figure {
	aspect-ratio: 3 / 2;
	background-color: #eee;
	border-radius: 0.5em;
	overflow: hidden;
	margin-bottom: 2em;
}

#mobile-menu-wrap > div:last-of-type > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

#mobile-menu-wrap > div:last-of-type > p {
	display: flex;
	justify-content: center;
	margin-bottom: 1em;
}

#mobile-tel,
#mobile-fax {
	display: flex;
	flex-flow: column;
	align-items: center;
	margin-bottom: 1em;
}
	
#mobile-tel > a,
#mobile-fax > span {
	font-family: var(--display-font);
	font-size: clamp(1.5em, 2vw, 2em);
	font-weight: 400;
	line-height: 1.25;
}

#mobile-tel > a:hover {
	color: var(--color-blue);
}

#mobile-tel > a:before,
#mobile-fax > span:before {
	font-size: 0.5em;
}

#mobile-tel > a:before {
	content: 'tel.';
}

#mobile-fax > span:before {
	content: 'fax.';
}

#mobile-button-list {
	list-style-type: none;
	margin-bottom: 1em;
}

#mobile-button-list > li + li {
	margin-top: 0.5em;
}

#mobile-button-list > li > a {
	display: block;
	width: 100%;
	padding: 0.75em 1.25em;
	background-color: #fff;
	border: 1px solid var(--color-blue);
	border-radius: 0.5em;
	color: var(--color-blue);
	font-weight: 500;
	text-align: center;
	position: relative;
}

#mobile-button-list > li > a:before {
	content: '';
	display: block;
	width: 1.25em;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-image: var(--icon-arrow-white);
	background-size: 33%;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--color-blue);
	position: absolute;
	top: 50%;
	right: 1em;
	transform: translateY(-50%);
}

#mobile-logo {
	display: block;
	max-width: 320px;
	margin: 0 auto 1em auto;
}

#mobile-copyright {
	font-family: var(--display-font);
	font-weight: 400;
	font-size: 0.75em;
	color: var(--color-blue-dull);
}

#mobile-menu {
    list-style-type: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: 2em;
	grid-row-gap: 3em;
    counter-reset: count;
}

#mobile-menu > li {
	counter-increment: count;
}

#mobile-menu > li > a:not(:has(span:empty)):before {
    content: '0' counter(count);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3em;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	font-size: 0.75em;
    font-family: var(--display-font);
	font-weight: 400;
    background-color: var(--color-blue-light);
	color: var(--color-blue);
    position: absolute;
    top: 0;
    left: 0;
	transform: translateY(-0.25em);
}

#mobile-menu > li > a[href="#"] {
	pointer-events: none;
}

#mobile-menu > li > a {
    display: flex;
    font-family: var(--serif-font);
    font-size: 1.25em;
    font-weight: 500;
    padding-left: 3em;
    margin-bottom: 1em;
    position: relative;
}

#mobile-menu > li > a:not([href="#"]) {
    padding-left: 4.5em;
}

#mobile-menu > li > a:not([href="#"]):hover {
	text-decoration: underline;
	color: var(--color-blue);
}

#mobile-menu > li > a:not([href="#"]):after {
    content: '';
    display: block;
    width: 1em;
    aspect-ratio: 1 / 1;
/*     border-radius: 50%; */
    background-image: var(--icon-arrow);
    background-size: 66%;
    background-position: center;
    background-repeat: no-repeat;
/*     background-color: var(--color-blue); */
    position: absolute;
    top: calc((1lh - 1em) / 2);
    left: 3em;
}

#mobile-menu > li > ul {
	list-style-type: none;
	border-left: 1px solid var(--color-blue-light);
	margin-left: 1.5em;
	padding-left: 1.5em;
	font-size: 0.875em;
}

#mobile-menu > li > ul > li + li {
	margin-top: 0.5em;
}

#mobile-menu > li > ul > li > a {
	display: block;
	padding-left: 2em;
	position: relative;
}

#mobile-menu > li > ul > li.current-menu-item > a,
#mobile-menu > li > ul > li > a:hover {
	color: var(--color-blue);
	text-decoration: underline;
}

#mobile-menu > li > ul > li > a:before {
    content: '';
    display: block;
    width: 1lh;
    aspect-ratio: 1 / 1;
    background-image: var(--icon-arrow);
    background-size: 33%;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0.5lh;
    left: 0;
	transform: translateY(-50%);
}

/* #mobile-menu > li > ul > li > a[target="_blank"],
#mobile-menu > li > ul > li > a[href$=".pdf"] {
	padding-right: 2em;
} */

#mobile-menu > li > ul > li > a[target="_blank"]:after {
	content: '\f4c8';
	font-family: var(--material-icon);
	font-weight: 200;
	font-size: 1.25em;
	vertical-align: sub;
}

#mobile-menu > li > ul > li > a[href$=".pdf"]:after {
	content: '\e415';
	font-family: var(--material-icon);
	font-weight: 200;
	font-size: 1.25em;
	vertical-align: sub;
}

@media (width < 1100px) {
	#mobile-menu {
		grid-template-columns: 1fr 1fr;
	}
}

@media (width < 1024px) {
	#mobile-menu-wrap {
		display: block;
	}

	#mobile-menu {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media (width < 768px) {
	.drawer-open,
	.drawer-close {
		width: var(--header-height-sp);
	}

	#mobile-menu-wrap > div:first-of-type {
    	padding: calc(var(--header-height-sp) + 2em) 2em 2em 1em;
	}

	#mobile-menu-wrap > div:last-of-type {
    	padding: 2em;
	}

	#mobile-menu {
		grid-template-columns: 1fr 1fr;
	}
}

@media (width < 480px) {
	#mobile-menu-wrap > div:first-of-type {
    	padding: calc(var(--header-height-sp) + 2em) 2em 2em 1em;
	}

	#mobile-menu {
		grid-template-columns: 1fr;
	}

	#mobile-menu > li > ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 1em;
		grid-row-gap: 0.25em;
	}

	#mobile-menu > li > ul > li + li {
		margin-top: unset;
	}
}

/* --------------------------
    footer
-------------------------- */
/* part share */
#part-share-list-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 2em;
}

#part-share-list-wrap > dt {
	margin-right: 1em;
	padding: 0.25em 1em;
	border: 1px solid var(--color-blue);
	border-radius: 0.5em;
	font-size: 0.875em;
	color: var(--color-blue);
	position: relative;
}

#part-share-list-wrap > dt:before {
	content: '';
	display: block;
	width: 0.5em;
	height: 0.5em;
	border-top: 1px solid var(--color-blue);
	border-right: 1px solid var(--color-blue);
	border-left: 1px solid transparent;
	border-bottom: 1px solid transparent;
	border-radius: 0 0.125em 0 0;
	background-color: #fff;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(50%, -50%) rotate(45deg);
}

#part-share-list {
	list-style-type: none;
	display: flex;
}

#part-share-list > li + li {
	margin-left: 0.5em;
}

#part-share-list > li > a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	letter-spacing: 0;
	color: #fff;
}

#part-share-list > li > .x {
	background-color: var(--color-x);
}

#part-share-list > li > .facebook {
	background-color: var(--color-facebook);
}

/* footer */
footer {
	font-size: 0.875em;
}

footer > div:first-of-type {
	padding: 3em;
	border-radius: clamp(0.5em, 1vw, 1em);
	background-color: var(--color-blue-grayish);
	margin: 1em;
}

footer > div:first-of-type > .header {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-gap: 2em;
}

#footer-contact {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1em;
}

#footer-contact > div {
	display: flex;
	flex-flow: column;
	align-items: center;
}

#footer-contact > div > .tel,
#footer-contact > div > .fax {
	font-family: var(--display-font);
	font-size: clamp(1.5em, 3vw, 2.75em);
	font-weight: 400;
	line-height: 1.25;
}

#footer-contact > div > .tel:hover {
	color: var(--color-blue);
}

#footer-contact > div > *:before {
	font-size: 0.5em;
}

#footer-contact > div > .tel:before {
	content: 'tel.';
}

#footer-contact > div > .fax:before {
	content: 'fax.';
}

#footer-contact > div > a {
	padding-right: 1.125em;
	position: relative;
}

#footer-contact > div > a:after {
    content: '';
    display: block;
    width: 0.625em;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-image: var(--icon-arrow-white);
    background-size: 33%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--color-blue);
    position: absolute;
    top: 50%;
    right: 0.125em;
    transform: translateY(-50%);
	transition: right 0.3s ease;
}

#footer-contact > div > .tel:hover:after {
    right: 0;
	transition: right 0.3s ease;
}

#footer-contact > div > span {
	font-size: 0.875em;
	letter-spacing: 0.05;
}

#footer-logo {
	display: inline-block;
	max-width: 360px;
	width: 100%;
}

footer > div:first-of-type > div + div {
	margin-top: 2em;
}

#footer-menu {
	list-style-type: none;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 2em;
}

#footer-menu > li > a {
	display: block;
	margin-bottom: 1em;
	font-size: 1.125em;
	padding-left: 1em;
	background-image: var(--ornament3);
	background-size: 0.5em auto;
	background-position: left center;
	background-repeat: no-repeat;
}

#footer-menu > li > a:hover {
	text-decoration: underline;
	color: var(--color-blue);
}

#footer-menu > li > a[href="#"] {
	pointer-events: none;
}

#footer-menu > li > a:has(span:empty) {
	display: none;
}

#footer-menu > li ul {
	list-style-type: none;
	line-height: 1.25;
}

#footer-menu > li ul > li.current-menu-item > a,
#footer-menu > li ul > li > a:hover {
	text-decoration: underline;
	color: var(--color-blue);
}

#footer-menu > li ul > li > a:after {
	vertical-align: sub;
}

#footer-menu > li ul > li > a[target="_blank"]:after {
	content: '\f4c8';
	font-family: var(--material-icon);
	font-weight: 200;
	font-size: 1.25em;
}

#footer-menu > li ul > li > a[href$=".pdf"]:after {
	content: '\e415';
	font-family: var(--material-icon);
	font-weight: 200;
	font-size: 1.25em;
}

#footer-menu > li ul > li + li {
	margin-top: 0.75em;
}

#related-menu {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
}

#related-menu > li:not(:last-of-type) {
	margin-right: 2em;
}

#related-menu > li > a:after {
	vertical-align: sub;
}

#related-menu > li > a[target="_blank"]:after {
	content: '\f4c8';
	font-family: var(--material-icon);
	font-weight: 200;
	font-size: 1.25em;
}

#related-menu > li > a[href$=".pdf"]:after {
	content: '\e415';
	font-family: var(--material-icon);
	font-weight: 200;
	font-size: 1.25em;
}

#related-menu > li:hover {
	text-decoration: underline;
	color: var(--color-blue);
}

#copyright {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 2em 1em 2em;
}

#copyright > div {
	font-family: var(--display-font);
	font-weight: 400;
	font-size: 0.75em;
	color: var(--color-blue-dull);
	line-height: 1.5;
}

#footer-sns-list {
	list-style-type: none;
	display: flex;
}

#footer-sns-list > li {
	display: flex;
	align-items: center;
}

#footer-sns-list > li + li {
	margin-left: 0.5em;
}

#footer-sns-list > li > span {
    margin-right: 1em;
    padding: 0.25em 1em;
    border: 1px solid var(--color-blue);
    border-radius: 0.5em;
    font-size: 10px;
    color: var(--color-blue);
	white-space: nowrap;
    position: relative;
}

#footer-sns-list > li > span:before {
    content: '';
    display: block;
    width: 0.5em;
    height: 0.5em;
    border-top: 1px solid var(--color-blue);
    border-right: 1px solid var(--color-blue);
    border-left: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-radius: 0 0.125em 0 0;
    background-color: #fff;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%) rotate(45deg);
}

#footer-sns-list > li > a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	letter-spacing: 0;
	color: #fff;
	overflow: hidden;
    position: relative;
    z-index: 0;
}

#footer-sns-list > li > .instagram {
    background: var(--gradient-instagram1);
}

#footer-sns-list > li > a.instagram:before {
    content: '';
    display: block;
    width: 150%;
    aspect-ratio: 1 / 1;
    background: var(--gradient-instagram2);
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    transform: translate(-37.5%, -37.5%);
}

#footer-sns-list > li > .youtube {
	background-color: var(--color-youtube);
}

#footer-sns-list > li > .tiktok {
	background-color: var(--color-tiktok);
}

#footer-sns-list > li > .facebook {
	background-color: var(--color-facebook);
}

@media (width < 1100px) {
	#footer-menu {
		grid-template-columns: 1fr 1fr;
	}
}

@media (width < 768px) {
	footer > div:first-of-type {
		padding: 2em;
	}

	footer > div:first-of-type > .header {
		grid-template-columns: 1fr;
	}

	footer > div:first-of-type > .header > div {
		display: flex;
		flex-flow: column;
		align-items: center;
	}

	#footer-logo {
		width: 70%;
		max-width: 280px;
	}

	#footer-contact {
		grid-template-columns: 1fr;
	}

	#footer-contact > div > .tel,
	#footer-contact > div > .fax {
		font-size: clamp(1.5em, 6vw, 2.75em);
	}

	#copyright {
		flex-flow: column-reverse;
	}

	#copyright > div {
		margin-top: 1em;
	}
}

/* --------------------------
    archive
-------------------------- */
/* archive */
.archive-list {
    list-style-type: none;
}

.archive-list > li {
    padding: 1rem 0;
}

.archive-list > li:first-of-type {
    padding-top: 0;
}

.archive-list > li + li {
    border-top: 1px solid var(--color-blue-light);
}

.archive-list > li > a {
    display: block;
}

.archive-list > li > a > article {
    display: flex;
    align-items: center;
}

.archive-list > li > a > article > .thumb {
    width: 30%;
	aspect-ratio: 3 / 2;
    background-color: #eee;
	border-radius: 0.5em;
	overflow: hidden;
    margin-right: 2em;
    position: relative;
}

.archive-list > li > a > article > .thumb > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
	transition: all 0.3s ease;
}

.archive-list > li > a:hover > article > .thumb > img {
	opacity: 0.7;
	transform: scale(1.05);
	transition: all 0.3s ease;
}

.archive-list > li > a > article > .info {
    width: calc(70% - 2em);
}

.archive-list > li > a > article > .info > time {
    display: block;
	font-family: var(--display-font);
    font-size: 1em;
	font-weight: 400;
    margin-bottom: 0.5em;
}

.archive-list > li > a:hover > article > .info > time {
	color: var(--color-blue);
}

.archive-list > li > a > article > .info > .category {
    margin-bottom: 0.5em;
}

.archive-list > li > a > article > .info > .category > span {
    display: inline-block;
	border-radius: 0.5em;
    font-size: 10px;
	font-weight: 500;
    padding: 0.5em 1em;
    margin: 0 0.5em 0.5em 0;
	color: #fff;
    background-color: #ccc;
}

.archive-list > li > a > article > .info > h3 {
	font-family: var(--serif-font);
    font-size: 1em;
	font-weight: 500;
    margin-bottom: 0.5em;
}

.archive-list > li > a:hover > article > .info > h3 {
	text-decoration: underline;
	color: var(--color-blue);
}

.archive-list > li > a > article > .info > p {
    font-size: 0.875em;
    margin-top: 1em;
}

.archive-list > li > a:hover > article > .info > p {
	text-decoration: underline;
	color: var(--color-blue);
}

@media (width < 768px) {
    .archive-list > li > a > article {
        flex-flow: column;
    }
    
    .archive-list > li > a > article > .info {
        width: 100%;
    }
    
    .archive-list > li > a > article > .thumb {
        width: 100%;
        margin-right: 0;
        margin-bottom: 1em;
    }
}

/* archive pagination */
#pagination {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

#pagination > * {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    letter-spacing: 0;
    width: 3em;
    height: 3em;
    background: #eee;
    color: var(--color);
    margin: 0 0.5em;
    transition: all 0.3s ease;
}

#pagination > span,
#pagination > a:hover {
    background: var(--color);
    color: #fff;
    transition: all 0.3s ease;
}


/* --------------------------
    single
-------------------------- */
/* single */
#single-date {
    display: block;
	font-family: var(--display-font);
    font-size: 1em;
    font-weight: 400;
    margin-bottom: 2em;
	color: var(--color-blue);
}

.single-content *:not(.plain):not(h1, h2, h3, h4, h5, h6) + *:not(.plain):is(h1, h2, h3, h4, h5, h6) {
	margin-top: 3em;
}

.single-content h1:not(.plain),
.single-content h2:not(.plain) {
	display: flex;
	flex-flow: column;
	font-family: var(--serif-font);
	font-weight: 500;
	font-size: clamp(1.375em, 2vw, 2em);
    margin-bottom: 1em;
	position: relative;
}

.single-content h1:not(.plain)[data-text]:before,
.single-content h2:not(.plain)[data-text]:before {
	content: attr(data-text);
	font-family: var(--display-font);
	font-size: 0.5em;
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 1.5;
	color: #777;
}

.single-content h1:not(.plain):after,
.single-content h2:not(.plain):after {
	content: '';
	display: block;
	width: 100%;
	height: 3px;
	background: linear-gradient(to right, var(--color-blue), var(--color-blue-light));
	margin-top: 0.125em;
}

.single-content h3:not(.plain) {
	font-family: var(--serif-font);
	font-weight: 500;
	font-size: clamp(1.25em, 1.5vw, 1.5em);
	padding-left: 1em;
    margin-bottom: 1em;
	position: relative;
}

.single-content h3:not(.plain):after {
	content: '';
	display: block;
	width: 3px;
	height: 100%;
	background: linear-gradient(to bottom, var(--color-blue), var(--color-blue-light));
	position: absolute;
	top: 0;
	left: 0;
}

.single-content h4:not(.plain) {
	font-family: var(--serif-font);
	font-weight: 500;
	font-size: clamp(1.125em, 1.25vw, 1.25em);
	padding-left: 1.75em;
    margin-bottom: 1em;
    background-image: var(--ornament6);
    background-size: 1em auto;
    background-position: top calc((1lh - 1em) / 2) left;
    background-repeat: no-repeat;
}

.single-content h5:not(.plain) {
	font-family: var(--serif-font);
	font-weight: 500;
	font-size: clamp(1em, 1vw, 1.125em);
	padding-left: 1em;
    margin-bottom: 1em;
	background-image: var(--ornament3);
    background-size: 0.5em auto;
    background-position: top calc((1lh - 0.5em) / 2) left;
    background-repeat: no-repeat;
}

.single-content h6:not(.plain) {
	font-family: var(--serif-font);
	font-weight: 500;
	font-size: clamp(0.875em, 1vw, 1em);
    margin-bottom: 1em;
	padding-left: 1.5em;
	position: relative;
}

.single-content h6:not(.plain):before {
	content: '';
	display: block;
	width: 1em;
	border-top: 1px solid var(--color-blue);
	position: absolute;
	top: calc(0.5lh);
	left: 0;
}

.single-content hr:not(.plain) {
    display: block;
    border: none;
    border-top: 2px solid #bbb;
    margin: 4em 0;
}

.single-content ul:not(.plain) {
	list-style-type: none;
    background-color: var(--color-blue-pale);
	border: 1px solid var(--color-blue-grayish);
	border-radius: 0.25em;
    padding: 2em 2em 2em 3em;
    margin-bottom: 1em;
}

.single-content ul:not(.plain).noframe,
.single-content ol:not(.plain).noframe {
	border: none;
	background-color: unset;
	padding: 0 0 0 1em;
}

.single-content ul:not(.plain) > li,
.single-content ol:not(.plain) > li {
	position: relative;
}

.single-content ul:not(.plain):not([style^="list-style-type"]) > li:before {
	content: '';
	display: block;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--color-blue) 40%, var(--color-blue-light));
	position: absolute;
	top: 0.5lh;
	left: -1em;
	transform: translateY(-50%);
}

.single-content ol:not(.plain) {
	list-style-type: none;
	counter-reset: count;
    background-color: var(--color-blue-pale);
	border: 1px solid var(--color-blue-grayish);
	border-radius: 0.25em;
    padding: 2em 2em 2em 3em;
    margin-bottom: 1em;
}

.single-content ol:not(.plain):not([style^="list-style-type"]) > li:before {
	counter-increment: count;
	content: counter(count)'.';
	display: block;
	width: 1em;
	color: var(--color-blue);
	white-space: nowrap;
	font-family: var(--display-font);
	position: absolute;
	top: 0.5lh;
	left: -1em;
	transform: translateY(-50%);
}

.single-content ul.no-frame,
.single-content ol.no-frame {
    padding: unset;
	padding-left: 1em;
    background-color: unset;
	border: unset;
	margin-bottom: unset;
}

.single-content *:is(ul, ol):not(.plain) *:is(ul, ol) {
    padding: unset;
	background-color: unset;
	border: unset;
	margin-left: 1em;
	margin-top: 0.5em;
}

.single-content ul:not(.plain) > li + li,
.single-content ol:not(.plain) > li + li {
    margin-top: 0.5em;
}

.single-content blockquote:not(.plain) {
    background-color: var(--color-blue-pale);
	border: 1px solid var(--color-blue-grayish);
	border-radius: 0.25em;
    padding: 2em;
    margin-bottom: 1em;
}

.single-content blockquote:not(.plain) > *:last-child {
	margin-bottom: unset;
}

.single-content p:not(.plain) {
    text-align: justify;
	word-break: break-all;
    margin-bottom: 1em;
}

.single-content p:not(.plain).aligncenter {
	word-break: keep-all;
	text-align: center;
}

.single-content dl:not(.plain) {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1em;
	border-radius: 0.25em;
	overflow: hidden;
}

.single-content dl:not(.plain) > dt {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35%;
    background-color: var(--color-blue-grayish);
    padding: 1em 2em;
	font-family: var(--serif-font);
    font-weight: 500;
}

.single-content dl:not(.plain) > dd {
    width: 65%;
    background-color: var(--color-blue-pale);
    padding: 1em 2em;
}

.single-content dl:not(.plain) > *:is(dt, dd):not(:first-of-type) {
	margin-top: 2px;
}

.single-content img:not(.plain) {
    height: auto;
    margin-bottom: 2em;
}

.single-content img:not(.plain).alignleft {
    float: left;
    margin: 0 2em 2em 0;
}

.single-content img:not(.plain).alignright {
    float: right;
    margin: 0 0 2em 2em;
}

.single-content img:not(.plain).aligncenter {
    margin: 0 auto 2em auto;
}

.single-content strong:not(.plain) {
    color: var(--color-red-vivid);
}

.single-content mark:not(.plain) {
	background: linear-gradient(to top, var(--color-aqua-light) 33%, transparent 33%);
}

.single-content a:not(.plain) {
	color: var(--color-blue);
    text-decoration: underline;
}

.single-content a:not(.plain):hover {
    opacity: 0.7;
    text-decoration: unset;
}

.single-content a:not(.plain)[target="_blank"]:after {
	content: '\f4c8';
	font-family: var(--material-icon);
	font-weight: 200;
	font-size: 1.25em;
	vertical-align: sub;
}

.single-content a:not(.plain)[href$=".pdf"]:after {
	content: '\e415';
	font-family: var(--material-icon);
	font-weight: 200;
	font-size: 1.25em;
	vertical-align: sub;
}

.single-content small:not(.plain) {
    font-size: 0.75em;
}

.single-content table {
	border-spacing: 1px;
	border-radius: 0.5em;
	overflow: hidden;
	margin-bottom: 1em;
	position: relative;
}

.single-content table:before {
	content: '';
	display: block;
	width: calc(100% - 2px);
	height: calc(100% - 3px);
	background-color: var(--color-blue-grayish2);
	position: absolute;
	top: 2px;
	left: 1px;
	z-index: -1;
}

.single-content table th {
	font-family: var(--serif-font);
	font-weight: 500;
	background-color: var(--color-blue-grayish);
	padding: 1em 2em;
	white-space: nowrap;
}

.single-content table td {
	background-color: var(--color-blue-pale);
	padding: 1em 2em;
}

.single-content table .color-red {
	color: var(--color-red);
}

.single-content table .color-blue {
	color: var(--color-blue);
}

.single-content table .bg-blue {
	background-color: var(--color-blue-light2);
}

@media (width < 768px) {
	.single-content h1:not(.plain),
	.single-content h2:not(.plain) {
	}
	
	.single-content h3:not(.plain) {
	}
	
	.single-content hr:not(.plain) {
		margin: 2em 0;
	}

	.single-content ul:not(.plain) {
		padding: 1em 1em 1em 2em;
	}
	
	.single-content ol:not(.plain) {
		padding: 1em 1em 1em 3em;
	}
	
	.single-content blockquote:not(.plain) {
		padding: 1em;
	}
	
	.single-content dl:not(.plain) {
		flex-flow: column;
	}
	
	.single-content dl:not(.plain) > dt {
		width: 100%;
		padding: 1em;
	}
	
	.single-content dl:not(.plain) > dd {
		width: 100%;
		padding: 1em;
	}

	.single-content dl:not(.plain) > *:is(dt, dd):not(:first-of-type) {
		margin-top: unset;
	}

	.single-content img.aligncenter:not(.plain),
	.single-content img.alignleft:not(.plain),
	.single-content img.alignright:not(.plain) {
		float: none;
		margin: 0 auto 2em auto;
	}
}

/* single pagination */
#single-pagination {
    list-style-type: none;
    display: flex;
    border-top: 1px solid var(--color-blue-light);
    border-bottom: 1px solid var(--color-blue-light);
    padding: 1rem 0;
    margin-top: 2rem;
}

#single-pagination > li {
    width: 50%;
}

#single-pagination > li + li {
    border-left: 1px solid var(--color-blue-light);
}

#single-pagination > li > a {
    display: block;
    color: var(--color);
    padding: 1rem 3rem;
    position: relative;
}

#single-pagination > li:first-of-type > a:before {
    content: '';
    display: block;
    width: 1.5em;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-image: var(--icon-arrow-white);
    background-size: 33%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--color-blue);
    position: absolute;
    left: 0.5em;
    top: 50%;
    transform: translateY(-50%) scaleX(-1);
}

#single-pagination > li:last-of-type > a:before {
    content: '';
    display: block;
    width: 1.5em;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-image: var(--icon-arrow-white);
    background-size: 33%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--color-blue);
    position: absolute;
    right: 0.5em;
    top: 50%;
    transform: translateY(-50%);
}

@media (width < 768px) {
    #single-pagination {
        flex-flow: column;
        padding: 0;
    }

    #single-pagination > li {
        width: 100%;
    }

    #single-pagination > li + li {
        border-left: none;
    }

    #single-pagination > li:first-of-type:empty {
        border-top: 2px solid #ddd;
    }
}


/* --------------------------
    page
-------------------------- */
#page-header {
	display: flex;
	align-items: center;
	min-height: 300px;
	padding: var(--header-height) 2em 1em 2em;
	position: relative;
}

#page-header:before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-image: var(--page-header-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: brightness(0.7);
	position: absolute;
	top: 0;
	left: 0;
	z-index: -2;
}

#page-header:after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: var(--gradient-purple-aqua);
	opacity: 0.4;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

#page-header > div {
	display: flex;
	flex-flow: column;
	color: #fff;
}

#page-header > div > h2 {
	font-family: var(--serif-font);
	font-size: clamp(1.5em, 2.5vw, 2.25em);
	font-weight: 500;
	line-height: 1.5;
}

#breadcrumb {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	font-size: 0.875em;
	margin-top: 1em;
}

#breadcrumb > li {
	display: flex;
	align-items: flex-start;
}

#breadcrumb > li:not(:last-of-type) {
	margin-right: 0.5em;
}

#breadcrumb > li + li:before {
	content: '';
	display: block;
	width: 1em;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-image: var(--icon-arrow);
	background-size: 33%;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #fff;
	margin-top: calc((1lh - 1em) / 2);
	margin-right: 0.5em;
}

@media (width < 1100px) {
	#page-header {
		min-height: 200px;
		padding: var(--header-height-sp) 1em 1em 1em;
	}

	#page-header > div {
		align-items: center;
	}
}

/* --------------------------
    protected page
-------------------------- */
.post-password-form {
	display: flex;
	flex-flow: column;
	align-items: center;
	background-color: var(--color-blue-pale);
	border: 1px solid var(--color-blue-grayish);
	padding: 2em;
	border-radius: 0.5em;
}

.post-password-form .post-password-form-invalid-password {
	color: var(--color-red);
}

.post-password-form > p:last-of-type > label > input[type="password"]{
	padding: 0.5em 1em;
}

.post-password-form > p:last-of-type > input[type="submit"]{
	appearance: none;
	border: none;
	outline: none;
	padding: 0.5em 2em;
	background-color: var(--color-blue);
	border-radius: 0.25em;
	color: #fff;
}


/* --------------------------
    top
-------------------------- */
#top-main-banner {
	width: 100%;
	height: 100vh;
	background-color: #ddd;
	position: relative;
}

body.admin #top-main-banner {
	width: 100%;
	height: calc(100vh - var(--adminbar-height));
}

#top-main-banner:before {
	content: '';
	display: block;
	width: 15vw;
	aspect-ratio: 1 / 1;
	background-image: var(--ornament1);
	background-position: top right;
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
}

#top-main-banner:after {
	content: '';
	display: block;
	width: 15vw;
	aspect-ratio: 1 / 1;
	background-image: var(--ornament2);
	background-position: bottom left;
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	transform: translate(-20%, 20%);
}

#top-main-banner > video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: relative;
}

/* #top-main-banner > div:not(#top-main-banner-important-wrap) {
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.05);
    background-image: radial-gradient(#333 1%, transparent 20%), radial-gradient(#333 1%, transparent 20%);
    background-position: 0 0, 3px 3px;
    background-size: 6px 6px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
} */

#top-main-banner > object {
	width: clamp(160px,30vw, 560px);
	position: absolute;
	top: 50%;
	left: 7.5vw;
	z-index: 1;
	transform: translateY(-50%);
}

#top-main-banner-important-wrap {
	width: clamp(480px, 50%, 800px);
	height: calc(1.75lh + 1em);
	background-color: #fff;
	margin-left: 2em;
	padding: 0.5em 1em 0.5em 7em;
	border-radius: 0.5em 0 0 0;
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 1;
}

#top-main-banner-important-wrap > span {
    width: 0.5rem;
    height: 0.5rem;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
}

#top-main-banner-important-wrap > span:before {
    content: '';
    display: block;
    width: 200%;
    height: 200%;
    border-radius: 50%;
    background-color: transparent;
    box-shadow: 0 0 0 1rem #fff;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
}

#top-main-banner-important-wrap:before {
	content: '重要';
	background-color: var(--color-red-pale);
	padding: 0.25lh 1lh;
	border-radius: 0.75lh;
	font-weight: 700;
	font-size: 0.75em;
	color: var(--color-red);
	position: absolute;
	top: 50%;
	left: 2em;
	transform: translateY(-50%);
}

#top-main-banner-important-slider {
	height: 100%;
	overflow: hidden;
}

#top-main-banner-important-slider .swiper-slide > a {
	display: flex;
	align-items: center;
	height: 100%;
	padding-right: 2em;
	position: relative;
}

#top-main-banner-important-slider .swiper-slide > a:before {
	content: '';
	display: block;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	background-color: var(--color-red);
	background-image: var(--icon-arrow-white);
	background-size: 33%;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

#top-main-banner-important-slider .swiper-slide > a > h3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	max-height: 2lh;
	font-size: 0.875em;
	font-weight: 500;
}

#top-main-banner-important-slider .swiper-slide > a:hover > h3 {
	color: var(--color-red);
	text-decoration: underline;
}

@media (width < 768px) {
	#top-main-banner,
	body.admin #top-main-banner {
		height: 100vw
	}

	#top-main-banner:before,
	#top-main-banner:after {
		width: 25vw;
	}

	#top-main-banner > object {
		width: clamp(160px,50vw, 560px);
	}

	#top-main-banner-important-wrap {
		width: 75vw;
		height: calc(1.75lh + 0.5em);
		background-color: #fff;
		margin-left: 25vw;
		padding: 0.25em 1em 0.25em 6em;
	}

	#top-main-banner-important-wrap:before {
		left: 1em;
	}
}

#top-news {
	position: relative;
}

#top-news:before {
	content: '';
	display: block;
	aspect-ratio: 194 / 330;
	width: 20vw;
	background-image: var(--ornament7);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

#top-news > div {
	display: grid;
	grid-template-columns: 1fr 3fr;
	grid-template-rows: auto auto auto;
	grid-gap: 2em;
}

#top-news > div > .heading {
	grid-row: 1;
	grid-column: 1;
	margin-bottom: unset;
}

#top-news > div > .button {
	justify-self: flex-start;
	grid-row: 2;
	grid-column: 1;
}

#top-news-wrap {
	grid-row: 1 / span 3;
	grid-column: 2 / span 1;
	display: grid;
	height: min-content;
	padding: 2em;
    border: 1px solid #ccc;
    border-radius: 0.5em;
	background-color: #fff;
}

#top-news-wrap > input {
	display: none;
}

#top-news-wrap > .content {
	grid-row: 2;
	grid-column: 1;
	opacity: 0;
	height: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

#top-news-wrap > input:checked + .content {
	display: block;
	opacity: 1;
	height: auto;
	pointer-events: auto;
	transition: opacity 0.2s 0.2s ease;
}

#top-news-wrap > .labels {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	align-items: flex-start;
	grid-gap: 0.5em;
	margin-bottom: 1em;
}

#top-news-wrap > .labels > label {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 0.5em 0.25em;
	border-radius: 0.5em;
	font-family: var(--serif-font);
	font-size: 0.875em;
	white-space: nowrap;
	position: relative;
	z-index: 1;
}

#top-news-wrap > .labels > label > span {
	display: block;
	width: 0.5em;
	height: 0.5em;
	border-radius: 0 0 0.125em 0;
	background-color: var(--color-blue);
	opacity: 0;
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 50%) rotate(45deg);
}

#top-news-wrap > .labels > label:hover {
	cursor: pointer;
}

/* #top-news-wrap > .labels > label:hover,
#top-news-wrap:has(input:checked[id="top-news-all"]) > .labels > label[for="top-news-all"]
#top-news-wrap:has(input:checked[id="top-news-important"]) > .labels > label[for="top-news-important"],
#top-news-wrap:has(input:checked[id="top-news-news"]) > .labels > label[for="top-news-news"],
#top-news-wrap:has(input:checked[id="top-news-examinee"]) > .labels > label[for="top-news-examinee"],
#top-news-wrap:has(input:checked[id="top-news-high-school"]) > .labels > label[for="top-news-high-school"],
#top-news-wrap:has(input:checked[id="top-news-junior-high-school"]) > .labels > label[for="top-news-junior-high-school"] {
	background-color: var(--color-beige-pale);
} */

/* #top-news-wrap > .labels > label:hover:after,
#top-news-wrap:has(input:checked) > .labels > label > span,
#top-news-wrap:has(input:checked[id="top-news-important"]) > .labels > label[for="top-news-important"] > span,
#top-news-wrap:has(input:checked[id="top-news-news"]) > .labels > label[for="top-news-news"] > span,
#top-news-wrap:has(input:checked[id="top-news-examinee"]) > .labels > label[for="top-news-examinee"] > span,
#top-news-wrap:has(input:checked[id="top-news-high-school"]) > .labels > label[for="top-news-high-school"] > span,
#top-news-wrap:has(input:checked[id="top-news-junior-high-school"]) > .labels > label[for="top-news-junior-high-school"] > span {
	background-color: var(--color-beige-pale);
} */

#top-news-wrap > .labels > label > div > span {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0.5em;
	position: absolute;
	top: 0;
	left: 0;
}

#top-news-wrap > .labels > label > div > span:nth-of-type(1) {
	z-index: -1;
}

#top-news-wrap > .labels > label > div > span:nth-of-type(2) {
	z-index: -2;
}

#top-news-wrap:has(input:nth-of-type(1):checked) > .labels > label:nth-of-type(1) > span,
#top-news-wrap:has(input:nth-of-type(2):checked) > .labels > label:nth-of-type(2) > span,
#top-news-wrap:has(input:nth-of-type(3):checked) > .labels > label:nth-of-type(3) > span,
#top-news-wrap:has(input:nth-of-type(4):checked) > .labels > label:nth-of-type(4) > span,
#top-news-wrap:has(input:nth-of-type(5):checked) > .labels > label:nth-of-type(5) > span,
#top-news-wrap:has(input:nth-of-type(6):checked) > .labels > label:nth-of-type(6) > span {
	opacity: 1;
}

#top-news-wrap:has(input:nth-of-type(1):checked) > .labels > label:nth-of-type(1) > div > span:nth-of-type(1),
#top-news-wrap:has(input:nth-of-type(2):checked) > .labels > label:nth-of-type(2) > div > span:nth-of-type(1),
#top-news-wrap:has(input:nth-of-type(3):checked) > .labels > label:nth-of-type(3) > div > span:nth-of-type(1),
#top-news-wrap:has(input:nth-of-type(4):checked) > .labels > label:nth-of-type(4) > div > span:nth-of-type(1),
#top-news-wrap:has(input:nth-of-type(5):checked) > .labels > label:nth-of-type(5) > div > span:nth-of-type(1),
#top-news-wrap:has(input:nth-of-type(6):checked) > .labels > label:nth-of-type(6) > div > span:nth-of-type(1) {
	opacity: 0;
}

#top-news-wrap:has(input:nth-of-type(1):checked) > .labels > label:nth-of-type(1),
#top-news-wrap:has(input:nth-of-type(2):checked) > .labels > label:nth-of-type(2),
#top-news-wrap:has(input:nth-of-type(3):checked) > .labels > label:nth-of-type(3),
#top-news-wrap:has(input:nth-of-type(4):checked) > .labels > label:nth-of-type(4),
#top-news-wrap:has(input:nth-of-type(5):checked) > .labels > label:nth-of-type(5),
#top-news-wrap:has(input:nth-of-type(6):checked) > .labels > label:nth-of-type(6) {
	color: #fff;
}

@media (width < 960px) {
	#top-news > div {
		grid-template-columns: 1fr;
	}

	#top-news > div > .heading {
		grid-row: 1;
		grid-column: 1;
	}

	#top-news > div > .button {
		justify-self: center;
		grid-row: 3;
		grid-column: 1;
		margin-left: 2em;
	}

	#top-news-wrap {
		grid-row: 2;
		grid-column: 1;
		padding: 1em 1em 2em 1em;
	}

	#top-news-wrap > .labels {
		grid-template-columns: repeat(3, 1fr);
	}
}

.top-news-list {
	list-style-type: none;
}

.top-news-list > li + li {
	border-top: 1px dotted var(--color-blue-light);
}

.top-news-list > li > a {
	display: block;
	padding: 1em 4em 1em 1em;
	position: relative;
}

.top-news-list > li > a:before {
	content: '';
	display: block;
	width: 1.5em;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-image: var(--icon-arrow-white);
	background-size: 33%;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--color-blue);
	position: absolute;
	top: 50%;
	right: 1em;
	transform: translateY(-50%);
}

.top-news-list > li > a > article {
	display: flex;
	align-items: center;
}

.top-news-list > li > a > article > time {
	width: 6em;
	margin-right: 1em;
	font-family: var(--display-font);
	font-weight: 400;
}

.top-news-list > li > a > article > .category {
	width: 8em;
	margin-right: 1em;
}

.top-news-list > li > a > article > .category > span {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-blue-pale);
	padding: 0.25em 1em;
	border-radius: 0.5em;
	font-size: 0.75em;
	font-weight: 500;
	color: #fff;
}

.top-news-list > li > a > article > .category > span > span {
	display: block;
	width: 0.5em;
	height: 0.5em;
	background-color: var(--color-blue);
	border-radius: 50%;
	margin-right: 0.5em;
}

.top-news-list > li > a > article > .category > span + span {
	margin-top: 0.25em;
}

.top-news-list > li > a > article > h3 {
	width: calc(100% - 16em);
	font-size: 1em;
	font-weight: 500;
}

.top-news-list > li > a:hover > article > h3 {
	color: var(--color-blue);
	text-decoration: underline;
}

@media (width < 768px) {
	.top-news-list > li > a {
		padding: 1em 4em 1em 0;
	}
	.top-news-list > li > a > article {
		flex-flow: column;
		align-items: flex-start;
	}

	.top-news-list > li > a > article > time {
		width: 100%;
		margin-right: unset;
	}

	.top-news-list > li > a > article > .category {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		margin-right: unset;
	}

	.top-news-list > li > a > article > .category > span {
    	margin: 0.25em;
	}

	.top-news-list > li > a > article > h3 {
		width: 100%;
	}
}

#top-topics {
	overflow: hidden;
}

#top-topics > div {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	grid-gap: 2em;
}

#top-topics > div > .heading {
	grid-column: 1;
	grid-row: 1;
	margin-bottom: unset;
}

#top-topics > div > .button {
	grid-column: 2;
	grid-row: 1;
	justify-self: flex-end;
	align-self: center;
}

#top-topics-slider {
	grid-column: 1 / span 2;
	grid-row: 2;
	position: relative;
}

#top-topics-slider:before {
	content: '';
	display: block;
	width: 100vw;
	height: calc(66% + 4em);
	background-color: var(--color-beige-pale);
	position: absolute;
	left: calc((100vw - 100%) / 2 * -1);
	bottom: -4em;
}

#top-topics-slider .swiper-slide > .thumb {
	position: relative;
}

#top-topics-slider .swiper-slide > .thumb.new:before {
	content: 'NEW';
	display: inline-block;
	background-color: var(--color-red);
	padding: 0.25em 1em;
	border-radius: 0.5em;
	border: 1px solid #fff;
	font-size: 0.75em;
	font-weight: 700;
	white-space: nowrap;
	color: #fff;
	position: absolute;
	top: 1em;
	left: 1em;
	z-index: 1;
}

#top-topics-slider .swiper-slide > .thumb > figure {
	aspect-ratio: 3 / 2;
	background-color: #eee;
	border-radius: 0.5em;
	overflow: hidden;
	margin-bottom: 1em;
}

#top-topics-slider .swiper-slide > .thumb > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: all 0.3s ease;
}

#top-topics-slider .swiper-slide > .thumb:hover > figure > img {
	opacity: 0.7;
	transform: scale(1.05);
	transition: all 0.3s ease;
}

#top-topics-slider .swiper-slide > time {
	font-family: var(--display-font);
	font-weight: 400;
}

#top-topics-slider .swiper-slide > .title > h3 {
	font-family: var(--serif-font);
	font-weight: 500;
	font-size: 1em;
	line-height: 1.5;
	transition: color 0.3s ease;
}

#top-topics-slider .swiper-slide > .title:hover > h3 {
	color: var(--color-blue);
	text-decoration: underline;
}

#top-topics-slider .swiper-slide > .tags {
	display: flex;
	flex-wrap: wrap;
	margin-top: 1em;
	font-size: 0.75em;
}

#top-topics-slider .swiper-slide > .tags > a {
	background-color: #fff;
	padding: 0.25em 0.5em;
	border-radius: 0.5em;
	margin: 0 0.25em 0.25em 0;
}

#top-topics-slider .swiper-slide > .tags > a:before {
	content: '#';
}

#top-examinee {
	position: relative;
}

#top-examinee:before {
	content: '';
	display: block;
	width: 20vw;
	aspect-ratio: 1 / 1;
	background-image: var(--ornament9);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	filter: blur(0.25em);
	position: absolute;
	top: 0;
	right: 0;
	z-index: -2;
}

#top-examinee > div > div {
	width: calc((100vw - 100%) / 2 + 100% - (var(--side-menu-width) / 2) - 1em);
}

#top-examinee > div > div > div {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-gap: 2em;
	max-width: var(--content-width);
	margin-right: auto;
	margin-bottom: 4em;
}

#top-examinee > div > div > div > h2 {
	margin-bottom: unset;
}

#top-examinee-list {
	list-style-type: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1em;
}

#top-examinee-list > li > a {
	display: block;
	aspect-ratio: 3 / 1;
	border-radius: 0.5em;
	overflow: hidden;
	position: relative;
}

#top-examinee-list > li:last-of-type:nth-of-type(odd) {
	grid-column: 1 / span 2;
}

#top-examinee-list > li:last-of-type:nth-of-type(odd) > a {
	aspect-ratio: 6 / 1;
}

#top-examinee-list > li > a:before {
    content: '';
    display: block;
    width: clamp(1.5em, 3vw, 3em);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-image: var(--icon-arrow);
    background-size: 33%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff;
    position: absolute;
    bottom: 1em;
    right: 1.5em;
	z-index: 2;
}

#top-examinee-list > li > a:after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: var(--gradient-purple-aqua-transp);
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

#top-examinee-list > li > a > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -2;
	transition: all 0.3s ease;
}

#top-examinee-list > li > a:hover > img {
	filter: brightness(1.2);
	transform: scale(1.05);
	transition: all 0.3s ease;
}

#top-examinee-list > li > a > h3 {
	display: flex;
	flex-flow: column;
	width: calc(100% - 6em);
	font-family: var(--serif-font);
	font-weight: 500;
	font-size: clamp(1em, 1.5vw, 2em);
	line-height: 1.5;
	color: #fff;
	position: absolute;
	left: 1.5em;
	bottom: 1em;
}

#top-examinee-list > li > a > h3:after {
	content: attr(data-text);
	font-family: var(--display-font);
	font-size: 0.75em;
	letter-spacing: 0;
	margin-top: 0.25em;
}

@media (width < 768px) {
	#top-examinee > div > div {
		width: 100%;
	}

	#top-examinee > div > div > div {
		grid-template-columns: 1fr;
		margin-bottom: 2em;
	}

	#top-examinee-list {
		grid-template-columns: 1fr;
		grid-gap: 0.5em;
	}

	#top-examinee-list > li:last-of-type:nth-of-type(odd) {
		grid-column: unset;
	}

	#top-examinee-list > li:last-of-type:nth-of-type(odd) > a {
		aspect-ratio: 3 / 1;
	}

	#top-examinee-list > li > a > h3 {
		font-size: clamp(1em, 3vw, 2em);
	}
}

#top-event-list {
	list-style-type: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 1.5em;
}

#top-event-list > li > article > a {
	display: block;
}

#top-event-list > li > article > a > figure {
	width: 100%;
	aspect-ratio: 3 / 2;
	background-color: #eee;
	border-radius: 0.5em;
	overflow: hidden;
}

#top-event-list > li > article > a > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: all 0.3s ease;
}

#top-event-list > li > article > a:hover > figure > img {
	transform: scale(1.05);
	opacity: 0.7;
	transition: all 0.3s ease;
}

#top-event-list > li > article > .category {
	display: flex;
	flex-wrap: wrap;
	margin-top: 1em;
}

#top-event-list > li > article > .category > span {
	display: inline-block;
	background-color: #ccc;
	padding: 0.25em 1em;
	border-radius: 0.5em;
	font-size: 0.75em;
	color: #fff;
	margin: 0 0.25em 0.25em 0;
}

#top-event-list > li > article > h3 {
	font-weight: 500;
	font-size: 1em;
	line-height: 1.5;
	text-align: justify;
	word-break: break-all;
	margin-top: 1em;
}

#top-event-list > li > article > h3 > a:hover {
	text-decoration: underline;
	color: var(--color-blue);
}

#top-event-list > li > article > .date {
	margin-top: 1em;
	font-size: 0.875em;
}

#top-event-list > li > article > .date > dt {
	display: inline-block;
	border-radius: 0.5em;
	border: 1px solid var(--color-blue);
	padding: 0.25em 0.75em;
	font-size: 0.75em;
	font-weight: 700;
	color: var(--color-blue);
	margin-bottom: 0.5em;
}

@media (max-width: 768px) {
	#top-event-list {
		grid-template-columns: 1fr 1fr;
		grid-gap: 1em;
	}
}

#top-ornament {
	overflow-x: hidden;
	position: relative;
}

#top-ornament {
	background-image: var(--ornament-text2);
	background-size: auto 33%;
	background-repeat: repeat-x;
	background-position: left center;
	animation: loopText 200s linear infinite;
}

@keyframes loopText {
	from {
		background-position: left 0% center;
	}
	to {
		background-position: left 100% center;
	}
}

#top-ornament-slider {
	padding: 4em 0;
}

#top-ornament-slider > .swiper-wrapper {
	transition-timing-function: linear;
}

#top-ornament-slider .swiper-slide {
	height: 25vw;
	position: relative;
}

#top-ornament-slider .swiper-slide > img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

#top-ornament-slider .swiper-slide:nth-of-type(odd) > img {
	transform: translateY(-2em);
}

#top-ornament-slider .swiper-slide:nth-of-type(even) > img {
	transform: translateY(2em);
}

#top-ornament-slider .swiper-slide:before {
	content: '';
	display: block;
	aspect-ratio: 4 / 3;
	height: 40%;
	filter: blur(0.5em);
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
}

#top-ornament-slider .swiper-slide:nth-of-type(odd):before {
	background-image: var(--ornament4);
}

#top-ornament-slider .swiper-slide:nth-of-type(even):before {
	background-image: var(--ornament5);
	bottom: -4em;
}

#top-contents-list {
	list-style-type: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1em;
}

#top-contents-list > li > a {
	display: block;
	aspect-ratio: 3 / 1;
	border-radius: 0.5em;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

#top-contents-list > li > a:before {
    content: '';
    display: block;
    width: clamp(1.5em, 3vw, 3em);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-image: var(--icon-arrow);
    background-size: 33%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff;
    position: absolute;
    bottom: 1em;
    right: 1.5em;
	z-index: 2;
}

#top-contents-list > li > a:after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: var(--gradient-purple-aqua);
	opacity: 0.5;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

#top-contents-list > li > a > h3 {
    width: calc(100% - 6em);
    font-family: var(--serif-font);
    font-weight: 500;
	font-size: clamp(1.25em, 1.5vw, 1.75em);
    line-height: 1.5;
    color: #fff;
	text-shadow: 0 0 0.5em rgba(0, 0, 0, 0.3);
    position: absolute;
    left: 1.5em;
    bottom: 1em;
}

#top-contents-list > li > a > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	z-index: -1;
	transition: all 0.3s ease;
}

#top-contents-list > li > a:hover > img {
	opacity: 0.7;
	transform: scale(1.05);
	transition: all 0.3s ease;
}

@media (width < 768px) {
	#top-contents-list {
		grid-template-columns: 1fr;
		grid-gap: 0.5em;
	}

	#top-contents-list > li > a > h3 {
		font-size: clamp(1.25em, 3vw, 1.75em);
	}
}

#top-campus-life {
	position: relative;
}

#top-campus-life:before {
	content: '';
	display: block;
	width: 20vw;
	aspect-ratio: 1 / 1;
	background-image: var(--ornament10);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	filter: blur(0.25em);
	position: absolute;
	top: -4em;
	left: 0;
	z-index: -2;
}

#top-campus-life > div > div {
	width: calc((100vw - 100%) / 2 + 100% - (var(--side-menu-width) / 2) - 1em);
}

#top-campus-life > div > div > div {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-gap: 2em;
	max-width: var(--content-width);
	margin-right: auto;
	margin-bottom: 4em;
}

#top-campus-life > div > div > div > h2 {
	margin-bottom: unset;
}

#top-campus-life-list {
	list-style-type: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1em;
}

#top-campus-life-list > li > a {
	display: block;
	aspect-ratio: 3 / 1;
	border-radius: 0.5em;
	overflow: hidden;
	position: relative;
}

#top-campus-life-list > li:last-of-type:nth-of-type(odd) {
	grid-column: 1 / span 2;
}

#top-campus-life-list > li:last-of-type:nth-of-type(odd) > a {
	aspect-ratio: 6 / 1;
}

#top-campus-life-list > li > a:before {
    content: '';
    display: block;
    width: clamp(1.5em, 3vw, 3em);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-image: var(--icon-arrow);
    background-size: 33%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff;
    position: absolute;
    bottom: 1em;
    right: 1.5em;
	z-index: 2;
}

#top-campus-life-list > li > a:after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: var(--gradient-aqua-yellow-transp);
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

#top-campus-life-list > li > a > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -2;
	transition: all 0.3s ease;
}

#top-campus-life-list > li > a:hover > img {
	filter: brightness(1.2);
	transform: scale(1.05);
	transition: all 0.3s ease;
}

#top-campus-life-list > li > a > h3 {
	display: flex;
	flex-flow: column;
	width: calc(100% - 6em);
	font-family: var(--serif-font);
	font-weight: 500;
	font-size: clamp(1em, 1.5vw, 2em);
	line-height: 1.5;
	color: #fff;
	position: absolute;
	left: 1.5em;
	bottom: 1em;
}

#top-campus-life-list > li > a > h3:after {
	content: attr(data-text);
	font-family: var(--display-font);
	font-size: 0.75em;
	letter-spacing: 0;
	margin-top: 0.25em;
}

@media (width < 768px) {
	#top-campus-life > div > div {
		width: 100%;
	}

	#top-campus-life > div > div > div {
		grid-template-columns: 1fr;
		margin-bottom: 2em;
	}

	#top-campus-life-list {
		grid-template-columns: 1fr;
		grid-gap: 0.5em;
	}

	#top-campus-life-list > li:last-of-type:nth-of-type(odd) {
		grid-column: unset;
	}

	#top-campus-life-list > li:last-of-type:nth-of-type(odd) > a {
		aspect-ratio: 3 / 1;
	}

	#top-campus-life-list > li > a > h3 {
		font-size: clamp(1em, 3vw, 2em);
	}
}

#top-correspondence-course {
	margin-bottom: 4em;
}

#top-correspondence-course > div > a {
	display: block;
	overflow: hidden;
	border-radius: 0.5em;
	background-color: #eee;
	box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.1);
}

#top-correspondence-course > div > a > img {
	transition: opacity 0.3s ease;
}

#top-correspondence-course > div > a:hover > img {
	opacity: 0.7;
	transition: opacity 0.3s ease;
}

@media (max-width: 768px) {
	#top-correspondence-course {
		margin-bottom: 2em;
	}
}

#top-information {
	position: relative;
}

#top-information:before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: var(--gradient-purple-aqua);
	background-image: var(--top-information-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.7;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -2;
}

#top-information:after {
	content: '';
	display: block;
	aspect-ratio: 194 / 330;
	width: 20vw;
	background-image: var(--ornament8);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
}

#top-information > div > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--display-font);
	font-size: clamp(1.5em, 6vw, 3.5em);
	font-weight: 400;
	letter-spacing: 0;
	color: #fff;
}

#top-information > div > div:after {
	content: '';
	display: block;
	width: calc(100% - 5.25em);
	border-top: 2px solid #fff;
}

#top-information > div > dl > dt > h2 {
	display: inline-block;
	font-size: 1em;
	padding: 0.5em 2em 0.5em 3.5em;
	border-radius: 0.5em 0.5em 0 0;
	background-color: #fff;
	font-family: var(--serif-font);
	font-weight: 500;
	position: relative;
}

#top-information > div > dl > dt > h2:before {
	content: '';
	display: block;
	width: 1em;
	aspect-ratio: 1 / 1;
	background-image: var(--ornament6);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	left: 2em;
	transform: translateY(-50%);
}

#top-information > div > dl > dt > h2 > span {
    width: 0.5em;
    height: 0.5em;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translateX(100%);
}

#top-information > div > dl > dt > h2 > span:before {
    content: '';
    display: block;
    width: 200%;
    height: 200%;
    border-radius: 50%;
    background-color: transparent;
    box-shadow: 0 0 0 1em #fff;
    position: absolute;
    top: 0;
    left: 100%;
    transform: translate(-50%, -50%);
}

#top-information > div > dl > dd {
	background-color: #fff;
	border-radius: 0 0.5em 0.5em 0.5em;
}

#top-information-list {
	list-style-type: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

#top-information-list > li {
	padding: 1em 2em;
	position: relative;
}

#top-information-list > li:nth-of-type(odd):before {
	content: '';
	display: block;
	height: calc(100% - 2em);
	border-left: 1px solid #ddd;
	position: absolute;
	top: 1em;
	right: 0;
}

#top-information-list > li:after {
	content: '';
	display: block;
	width: calc(100% - 4em);
	border-top: 1px solid #ddd;
	position: absolute;
	bottom: 0;
	left: 2em;
}

#top-information-list > li:nth-of-type(odd):nth-last-of-type(1):after,
#top-information-list > li:nth-of-type(odd):nth-last-of-type(2):after,
#top-information-list > li:nth-of-type(even):nth-last-of-type(1):after {
	border-top: none;
}

#top-information-list > li > a {
	display: flex;
	align-items: center;
	padding: 1em 2em 1em 0;
	position: relative;
}

#top-information-list > li > a:before {
	content: '';
	display: block;
	width: 1.5em;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-image: var(--icon-arrow-white);
	background-size: 33%;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--color-blue);
	position: absolute;
	top: 50%;
	right: 0.5em;
	transform: translateY(-50%);
	transition: right 0.3s ease;
}


#top-information-list > li > a:hover:before {
	right: 0;
	transition: right 0.3s ease;
}

#top-information-list > li > a > figure {
	width: 30%;
	aspect-ratio: 1 / 1;
	background-color: #eee;
	border-radius: 0.375em;
	margin-right: 2em;
	overflow: hidden;
	transition: transform 0.2s ease;
}

#top-information-list > li > a > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: all 0.3s ease;
}

#top-information-list > li > a:hover > figure > img {
	opacity: 0.7;
	transform: scale(1.1);
	transition: all 0.3s ease;
}

#top-information-list > li > a > h3 {
	font-family: var(--serif-font);
	font-size: 1em;
	font-weight: 500;
	transition: color 0.3s ease;
}

#top-information-list > li > a:hover > h3 {
	color: var(--color-blue);
	transition: color 0.3s ease;
}

@media (width < 768px) {
	#top-information > div > dl > dt > h2 {
    	padding: 0.5em 1em 0.5em 2.5em;
	}

	#top-information > div > dl > dt > h2:before {
		left: 1em;
	}

	#top-information-list {
		grid-template-columns: 1fr;
	}

	#top-information-list > li {
		padding: 0 1em;
	}

	#top-information-list > li:after {
		width: calc(100% - 2em);
		left: 1em;
	}

	#top-information-list > li:nth-of-type(odd):before {
		content: unset;
	}

	#top-information-list > li:nth-of-type(odd):nth-last-of-type(1):after,
	#top-information-list > li:nth-of-type(odd):nth-last-of-type(2):after,
	#top-information-list > li:nth-of-type(even):nth-last-of-type(1):after {
		border-top: 1px solid #ddd;
	}
}

#top-other-contents > div > * + .sub-heading {
	margin-top: 2em;
}

.top-other-contents-list {
	list-style-type: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 0.75em;
	font-size: 0.875em;
}

.top-other-contents-list > li > a {
	display: flex;
	align-items: center;
	aspect-ratio: 3 / 1;
	border-radius: 0.5em;
	border: 1px solid #ccc;
	padding: 0.75em 2em 0.75em 0.75em;
	position: relative;
	transition: all 0.2s ease;
}

.top-other-contents-list > li > a:hover {
	border: 1px solid var(--color-blue);
	background-color: var(--color-blue-pale);
	transition: all 0.2s ease;
}

.top-other-contents-list > li > a:before {
    content: '';
    display: block;
    width: 1.25em;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-image: var(--icon-arrow-white);
    background-size: 33%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--color-blue);
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translateY(-50%);
}

.top-other-contents-list > li > a > figure {
	width: 30%;
	aspect-ratio: 1 / 1;
	background-color: #eee;
	border-radius: 0.375em;
	overflow: hidden;
	margin-right: 1em;
}

.top-other-contents-list > li > a > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.top-other-contents-list > li > a > div {
	width: calc(70% - 1em);
	font-size: clamp(10px, 1vw, 1em);
	line-height: 1.5;
}

@media (width < 768px) {
	.top-other-contents-list {
		grid-template-columns: 1fr 1fr;
	}

	.top-other-contents-list > li > a > div {
		font-size: clamp(10px, 2vw, 1em);
		letter-spacing: 0;
	}
}

/* --------------------------
    contact
-------------------------- */
.grecaptcha-badge {
	z-index: 254;
}

#contact-tel-fax-wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1em;
}

#contact-tel-fax-wrap > * {
	display: flex;
	justify-content: center;
	align-items: baseline;
	background-color: var(--color-blue-pale);
	padding: 0.5em 1em;
	border-radius: 0.25em;
	font-family: var(--display-font);
	font-size: clamp(1.5em, 3vw, 2.75em);
	font-weight: 400;
	position: relative;
}

#contact-tel-fax-wrap > *:before {
	font-size: 0.5em;
}

#contact-tel-fax-wrap > .tel:before {
	content: 'tel.';
}

#contact-tel-fax-wrap > .fax:before {
	content: 'fax.';
}

#contact-tel-fax-wrap > a {
	padding: 0.5em 1.5em 0.5em 1em;
}

#contact-tel-fax-wrap > a:hover {
	color: var(--color-blue);
}

#contact-tel-fax-wrap > a:after {
    content: '';
    display: block;
    width: 0.625em;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-image: var(--icon-arrow-white);
    background-size: 33%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--color-blue);
    position: absolute;
    top: 50%;
    right: 0.5em;
    transform: translateY(-50%);
}

@media (width < 768px) {
	#contact-tel-fax-wrap {
		grid-template-columns: 1fr;
	}

	#contact-tel-fax-wrap > * {
		font-size: clamp(1.5em, 6vw, 2.75em);
	}
}

.contactform dl {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin-bottom: 1em;
	overflow: hidden;
	border-radius: 0.25em;
}

.contactform > dl > dt {
	padding: 1em 4em 1em 1em;
	position: relative;
	display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    background-color: var(--color-blue-light);
	font-weight: 500;
	color: var(--color-blue-dark);
	font-family: var(--serif-font);
}

.contactform > dl > dd {
	padding: 1em 2em;
	width: 70%;
    background-color: var(--color-blue-pale);
}

.contactform > dl > dt:not(:last-of-type),
.contactform > dl > dd:not(:last-of-type) {
	margin-bottom: 2px;
}

.contactform > dl > dt.required:after {
	content: '必 須';
	display: block;
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0;
	padding: 0.5em 1em;
	background: var(--color-red);
	color: #fff;
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 3px;
}

.contactform > dl > dt:not(.required):after {
	content: '任 意';
	display: block;
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0;
	padding: 0.5em 1em;
	background-color: #fff;
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 3px;
	color: var(--color-blue);
}

.contactform > dl > dd input[type=text],
.contactform > dl > dd input[type=email],
.contactform > dl > dd input[type=tel],
.contactform > dl > dd textarea {
	display: block;
	width: 100%;
	border-radius: 3px;
	border: none;
	border: 1px solid #bbb;
	padding: 0.5em 1em;
	background-color: #fff;
}

.contactform > dl > dd select {
	display: block;
	border-radius: 3px;
	border: none;
	background-color: #fff;
	border: 1px solid #bbb;
	padding: 0.5em 1em;
}

.contactform > dl > dd > .zip-wrap > span > input[type=text] {
	width: 10em;
}

.contactform > dl > dd > .zip-wrap > span {
	display: flex;
	align-items: center;
}

.contactform > dl > dd.address span + span {
	display: block;
	margin-top: 0.5rem;
}

.contactform > dl > dd input[type=number] {
	display: block;
	border-radius: 3px;
	border: none;
	background-color: #fcfcfc;
	border: 1px solid #bbb;
	padding: 0.5em 1em;
}

.contactform > dl > dd input.inline {
	display: inline-block;
}

.contactform > dl > dd > .zip-wrap > span:before {
	content: '〒';
	margin-right: 0.5rem;
}

.agreement-wrap {
	text-align: center;
	margin-bottom: 1rem;
}

.contactform input[name=agreement] {
	appearance: none;
	-webkit-appearance: none;
	border: none;
}

.contactform input[name=agreement] + span {
	display: flex;
	justify-content: center;
	align-items: center;
}

.contactform input[name=agreement] + span:hover {
	cursor: pointer;
}

.contactform input[name=agreement] + span:before {
	content: '';
	display: inline-block;
	width: 3rem;
	height: 3rem;
	border: 1px solid #aaa;
	border-radius: 3px;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGZvY3VzYWJsZT0iZmFsc2UiCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIgoJIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojQUFBQUFBO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTE3My45LDQzOS40TDcuNSwyNzNjLTEwLTEwLTEwLTI2LjIsMC0zNi4ybDM2LjItMzYuMmMxMC0xMCwyNi4yLTEwLDM2LjIsMEwxOTIsMzEyLjdMNDMyLjEsNzIuNgoJYzEwLTEwLDI2LjItMTAsMzYuMiwwbDM2LjIsMzYuMmMxMCwxMCwxMCwyNi4yLDAsMzYuMkwyMTAuMSw0MzkuNEMyMDAuMSw0NDkuNCwxODMuOSw0NDkuNCwxNzMuOSw0MzkuNEwxNzMuOSw0MzkuNHoiLz4KPC9zdmc+Cg==);
	background-size: 50%;
	background-position: center;
	background-repeat: no-repeat;
	margin-right: 1rem;
	background-color: #fff;
}

.contactform input[name=agreement]:checked + span:before {
	content: '';
	display: inline-block;
	width: 3rem;
	height: 3rem;
	border: 1px solid #333;
	border-radius: 3px;
	background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJjaGVjayIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLWNoZWNrIGZhLXctMTYiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMTczLjg5OCA0MzkuNDA0bC0xNjYuNC0xNjYuNGMtOS45OTctOS45OTctOS45OTctMjYuMjA2IDAtMzYuMjA0bDM2LjIwMy0zNi4yMDRjOS45OTctOS45OTggMjYuMjA3LTkuOTk4IDM2LjIwNCAwTDE5MiAzMTIuNjkgNDMyLjA5NSA3Mi41OTZjOS45OTctOS45OTcgMjYuMjA3LTkuOTk3IDM2LjIwNCAwbDM2LjIwMyAzNi4yMDRjOS45OTcgOS45OTcgOS45OTcgMjYuMjA2IDAgMzYuMjA0bC0yOTQuNCAyOTQuNDAxYy05Ljk5OCA5Ljk5Ny0yNi4yMDcgOS45OTctMzYuMjA0LS4wMDF6Ij48L3BhdGg+PC9zdmc+);
	background-size: 50%;
	background-position: center;
	background-repeat: no-repeat;
}

.contactform .submit-wrap {
    text-align: center;
    display: flex;
    flex-flow: column;
    align-items: center;
}

.contactform .submit-wrap > input[type=submit] {
	width: 100%;
	max-width: 280px;
	border: none;
	color: #fff;
	background-color: var(--color-blue);
	padding: 1rem 2rem;
	cursor: pointer;
	border-radius: 0.25em;
}

.contactform .submit-wrap > input[type=submit]:hover {
	opacity: 0.7;
}

.contactform .submit-wrap > input[type=submit]:disabled {
	background-color: #ddd;
	cursor: not-allowed;
}

@media (width < 768px) {
	.contactform > dl > dt {
		width: 100%;
	}
	
	.contactform > dl > dd {
		width: 100%;
		padding: 1em;
	}
	
	.contactform > dl > dt:not(:last-of-type),
	.contactform > dl > dd:not(:last-of-type) {
		margin-bottom: 0;
	}
}


/* --------------------------
    access
-------------------------- */
.access-route-list {
	list-style-type: none;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	font-size: 0.875em;
	grid-gap: 1em 2em;
	padding: 0 1em;
}

.access-route-list > li {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	border: 1px solid var(--color-blue-light);
	background-color: var(--color-blue-pale);
	padding: 0.5em 1em;
	color: var(--color-blue);
	font-weight: 700;
	word-break: auto-phrase;
	position: relative;
}

.access-route-list > li:not(:first-of-type):before {
	content: '';
	display: block;
	width: 1em;
	height: 0.5em;
	background-color: var(--color-blue);
	position: absolute;
	top: 50%;
	left: -1px;
	transform: translate(-1em, -50%);
}

.access-route-list > li:not(:last-of-type):after {
	content: '';
	display: block;
	width: 1em;
	height: 0.5em;
	background-color: var(--color-blue);
	position: absolute;
	top: 50%;
	right: -1px;
	transform: translate(1em, -50%);
}

@media (max-width: 768px) {
	.access-route-list {
		grid-template-columns: repeat(2, 1fr);
	}
}


/* --------------------------
    history
-------------------------- */
#history-list-wrap {
	display: grid;
	justify-content: center;
}

#history-list {
	list-style-type: none;
	display: inline-block;
}

#history-list > li + li {
	margin-top: 1em;
}

#history-list > li {
	position: relative;
}

#history-list > li:before {
	content: '';
	display: block;
	width: 1px;
	height: calc(100% - 1rem);
	background-color: var(--color-blue);
	position: absolute;
	top: 2rem;
	left: 6.5rem;
	transform: translateX(-50%);
}

#history-list > li > dl {
	display: flex;
}

#history-list > li > dl > dt {
	width: 5rem;
	font-family: var(--display-font);
	font-size: 1.75em;
	font-weight: 400;
	line-height: 1.5em;
	color: var(--color-blue);
	position: relative;
}

#history-list > li > dl > dt:before {
	content: '';
	display: block;
	width: 0.75rem;
	aspect-ratio: 1 / 1;
	background-color: var(--color-blue);
	border-radius: 50%;
	position: absolute;
	top: 0.75em;
	right: -2.25rem;
	transform: translate(-50%, -50%);
}

#history-list > li > dl > dd {
	width: calc(100% - 8rem);
	margin-top: 0.5em;
	margin-left: 3em;
}

/* --------------------------
    greeting
-------------------------- */
#greeting > div > div {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-gap: 2em;
	align-items: flex-start;
}

#greeting > div > div > figure {
	order: 2;
	width: 100%;
	max-width: 240px;
	aspect-ratio: 3 / 4;
	background-color: #eee;
	margin: 0 auto;
}

#greeting > div > div > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

#greeting > div > div > div > h3 {
	font-family: var(--serif-font);
	font-size: clamp(1.25em, 2.5vw, 1.75em);
	font-weight: 500;
	margin-bottom: 1em;
}

#greeting > div > div > div > .name {
	font-family: var(--serif-font);
	text-align: right;
}

#greeting > div > div > div > .name > span {
	font-size: clamp(1.125em, 2.5vw, 1.5em);
	margin-left: 0.5em;
}

@media (max-width: 768px) {
	#greeting > div > div {
		grid-template-columns: 1fr;
	}
	
	#greeting > div > div > figure {
		order: unset;
	}

	#greeting > div > div > div > h3 {
		display: flex;
		justify-content: center;
	}
}

/* --------------------------
    educate color
-------------------------- */
.educate-color-wrap > .header {
	display: grid;
	grid-template-columns: 1fr 3fr;
	background-color: var(--color-blue-pale);
	padding: 2em 0;
	border: 1px solid var(--color-blue-light);
	border-radius: 0.5em;
}

.educate-color-wrap > .header > h3 {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	border-right: 1px solid var(--color-blue-light);
	font-family: var(--serif-font);
	font-size: clamp(1.25em, 3vw, 2.25em);
	font-weight: 400;
	line-height: 1.25;
	color: var(--color-blue);
}

.educate-color-wrap > .header > h3:after {
	content: attr(data-text);
	font-size: 0.5em;
	letter-spacing: 0;
}

.educate-color-wrap > .header > p {
	justify-self: center;
	align-self: center;
	font-family: var(--serif-font);
	font-size: clamp(1.125em, 2vw, 1.5em);
	font-weight: 400;
	padding: 0 1em;
	word-break: auto-phrase;
}

.educate-color-wrap > .content {
	display: grid;
	grid-template-columns: 320px auto;
	grid-gap: 2em;
	align-items: center;
	margin-top: 2em;
}

.educate-color-wrap > .content > figure {
	margin-top: 0.5lh;
}

@media (max-width: 768px) {
	.educate-color-wrap > .content {
		grid-template-columns: 1fr;
		margin-top: 0.5em;
	}

	.educate-color-wrap > .content > dl {
		padding: 1.5em 1em 1em 1em;
	}
}

/* --------------------------
    lifeintheday
-------------------------- */
#lifeintheday-list {
	list-style-type: none;
}

#lifeintheday-list > li + li {
	margin-top: 1em;
}

#lifeintheday-list > li > dl {
	display: grid;
	grid-template-columns: 8em calc(100% - 12em);
	grid-column-gap: 4em;
}

#lifeintheday-list > li > dl > dt {
	display: flex;
	justify-content: center;
	font-family: var(--display-font);
	font-weight: 400;
	font-size: 2em;
	line-height: 1.25;
	color: var(--color-blue);
	position: relative;
}

#lifeintheday-list > li > dl > dt:before {
	content: '';
	display: block;
	width: 0.25em;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-color: var(--color-blue);
	position: absolute;
	top: 0.5em;
	right: -1em;
	z-index: 1;
	transform: translate(50%, -50%);
}

#lifeintheday-list > li > dl > dd {
	display: flex;
	flex-flow: row-reverse;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
}

#lifeintheday-list > li > dl > dd:before {
	content: '';
	display: block;
	width: 0.125em;
	height: calc(100% - 1em);
	background-color: var(--color-blue-light);
	position: absolute;
	left: -2em;
	bottom: -1em;
	transform: translateX(-50%);
}

#lifeintheday-list > li > dl > dd > figure {
	width: calc(30% - 1em);
	aspect-ratio: 3 / 2;
	background-color: #eee;
	border-radius: 0.5em;
	overflow: hidden;
}

#lifeintheday-list > li > dl > dd > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

#lifeintheday-list > li > dl > dd > div {
	width: calc(70% - 1em);
}

#lifeintheday-list > li > dl > dd > div > div {
	font-family: var(--serif-font);
	font-size: 1.25em;
	margin-bottom: 1em;
}

@media (max-width: 768px) {
	#lifeintheday-list > li > dl {
		grid-template-columns: 1fr;
		padding-left: 3em;
	}

	#lifeintheday-list > li > dl > dt:before {
		top: 0.5em;
		right: unset;
		left: -1em;
		transform: translateX(-50%);
	}

	#lifeintheday-list > li > dl > dt {
		justify-content: flex-start;
	}

	#lifeintheday-list > li > dl > dd:before {
		height: calc(100% + 1em);
	}

	#lifeintheday-list > li > dl > dd {
		margin-top: 0.5em;
	}
}

@media (max-width: 480px) {
	#lifeintheday-list > li > dl > dd {
		flex-flow: column;
	}

	#lifeintheday-list > li > dl > dd > figure {
		width: 100%;
	}

	#lifeintheday-list > li > dl > dd > div {
		width: 100%;
		margin-top: 1em;
	}
}

/* --------------------------
    club
-------------------------- */
.club-list {
	list-style-type: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1em;
	counter-reset: count;
}

.club-list > li {
	padding: 2em;
	background-color: var(--color-blue-pale);
	border-radius: 0.5em;
	border: 1px solid var(--color-blue-grayish);
	counter-increment: count;
}

.club-list > li > dl > dt {
	display: flex;
	align-items: center;
	font-family: var(--serif-font);
	font-size: 1.25em;
	margin-bottom: 0.5em;
	position: relative;
}

.club-list > li > dl > dt:before {
	content: counter(count);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	background: var(--gradient-purple-aqua);
	letter-spacing: 0;
	font-size: 0.75em;
	color: #fff;
	margin-right: 0.5em;
}

@media (max-width: 768px) {
	.club-list {
		grid-template-columns: 1fr;
	}
}


/* --------------------------
    recruit
-------------------------- */
#recruit-archive-list {
	list-style-type: none;
}

#recruit-archive-list > li + li {
	border-top: 1px solid var(--color-blue-light);
}

#recruit-archive-list > li > a {
	display: block;
	padding: 1em 3em 1em 1em;
	position: relative;
	transition: background-color 0.2s ease, color 0.2s ease;
}

#recruit-archive-list > li > a:hover {
	background-color: var(--color-blue-pale);
	color: var(--color-blue);
	transition: background-color 0.2s ease, color 0.2s ease;
}

#recruit-archive-list > li > a:before {
	content: '';
	display: block;
	width: 1.5em;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-image: var(--icon-arrow-white);
	background-size: 33%;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--color-blue);
	position: absolute;
	top: 50%;
	right: 1.5em;
	transform: translateY(-50%);
}

#recruit-archive-list > li > a > article {
	display: grid;
	align-items: center;
	grid-template-columns: 100px calc(100% - 100px - 2em);
	grid-gap: 2em;
}

#recruit-archive-list > li > a > article > figure {
	width: 100%;
	aspect-ratio: 1 / 1;
	background-color: #eee;
	border-radius: 0.5em;
	overflow: hidden;
}

#recruit-archive-list > li > a > article > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

#recruit-archive-list > li > a > article > h3 {
	font-family: var(--serif-font);
	font-size: 1em;
	font-weight: 500;
}


/* --------------------------
    event
-------------------------- */
/* archive */
#event-archive-list.archive-list > li > a > article > .info > .date {
	font-family: var(--font-family);
	font-size: 0.875em;
}

#event-archive-list.archive-list > li > a > article > .info > .place {
	margin-bottom: 1em;
	font-size: 0.875em;
}

#event-archive-list.archive-list > li > a > article > .info > dl {
	display: flex;
	justify-content: space-between;
	margin-top: 0.25em;
}

#event-archive-list.archive-list > li > a > article > .info > dl > dt {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 4rem;
	border-radius: 0.5em;
	border: 1px solid var(--color-blue);
	padding: 0.25em 0.75em;
	font-size: 0.75em;
	font-weight: 700;
	color: var(--color-blue);
	margin-bottom: 0.5em;
}

#event-archive-list.archive-list > li > a > article > .info > dl > dd {
	display: flex;
	align-items: center;
	width: calc(100% - 4.5rem);
}

/* single */
#single-event-images-wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 2em;
}

#single-event-images-wrap > a {
	display: block;
	background-color: #eee;
	border-radius: 0.5em;
	overflow: hidden;
}

#single-event-images-wrap > a > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 768px) {
	#single-event-images-wrap {
		grid-gap: 1em;
	}
}

.lum-lightbox {
	z-index: 256;
}

.lum-lightbox-inner img {
	max-width: 90vw;
	max-height: 90vh;
	width: 100%;
	height: 100%;
	object-fit: contain;
	margin: auto;
}


/* --------------------------
    annual event
-------------------------- */
.annual-event-month-wrap {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 2em;
	align-items: center;
}

.annual-event-month-wrap:has(figure) {
	grid-template-columns: 1fr 1fr;
}

.annual-event-month-wrap > figure {
	width: 100%;
	aspect-ratio: 3 / 2;
	background-color: #eee;
	border-radius: 0.5em;
	overflow: hidden;
}

@media (max-width: 768px) {
	.annual-event-month-wrap,
    .annual-event-month-wrap:has(figure) {
		grid-template-columns: 1fr;
	}
}


/* --------------------------
    access
-------------------------- */
#access-gmap-wrap {
	aspect-ratio: 2 / 1;
	background-color: #eee;
}

#access-gmap-wrap > iframe {
	width: 100%;
	height: 100%;
}

@media (max-width: 768px) {
	#access-gmap-wrap {
		aspect-ratio: 1 / 1;
		background-color: #eee;
	}
}


/* --------------------------
    uniform
-------------------------- */
#uniform-list {
	list-style-type: none;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 2em 3em;
}

#uniform-list > li > a {
	justify-self: center;
	display: block;
	width: 75%;
	aspect-ratio: 2 / 3;
	background-color: #eee;
	transition: opacity 0.3s ease;
}

#uniform-list > li > a:hover {
	opacity: 0.7;
	transition: opacity 0.3s ease;
}

#uniform-list > li > a > img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

#uniform-list > li > div {
	font-family: var(--serif-font);
	font-size: 0.875em;
	justify-self: center;
	margin-top: 1em;
}

@media (max-width: 768px) {
	#uniform-list > li > a {
		width: 100%;
	}

	#uniform-list {
		grid-template-columns: 1fr 1fr;
	}
}


/* --------------------------
    global
-------------------------- */
#global-training-list {
	list-style-type: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 1em;
}

#global-training-list > li > a {
	display: block;
	height: 100%;
	background-color: var(--color-blue-pale);
	padding: 1.5em 1.5em 4em 1.5em;
	border-radius: 0.5em;
	border: 1px solid var(--color-blue-light);
	position: relative;
}

#global-training-list > li > a:before {
	content: '';
	display: block;
	width: 1.5em;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-image: var(--icon-arrow-white);
	background-size: 33%;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--color-blue);
	position: absolute;
	bottom: 1.5em;
	left: 50%;
	transform: translateX(-50%) rotate(90deg);
}

#global-training-list > li > a > div {
	font-family: var(--serif-font);
	font-size: 1.5em;
	color: var(--color-blue);
	text-align: center;
}

#global-training-list > li > a > dl {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-size: 0.875em;
	margin-top: 1em;
}

#global-training-list > li > a > dl > dt {
	width: 5em;
	background-color: var(--color-blue);
	color: #fff;
	text-align: center;
	border-radius: 0.625lh;
	padding: 0.125lh 0;
	margin-right: 1em;
	margin-bottom: 0.25em;
}

#global-training-list > li > a > dl > dd {
	width: calc(100% - 6em);
	margin-bottom: 0.25em;
}

.global-content {
    display: grid;
    grid-template-columns: 320px auto;
    grid-gap: 2em;
    align-items: flex-start;
    margin-top: 2em;
}

.global-content > figure > img {
	max-width: 320px;
	margin-left: auto;
	margin-right: auto;
	border-radius: 0.5em;
}

.global-content > figure > img + img {
	margin-top: 1em;
}

.flag-list {
	list-style-type: none;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	grid-gap: 1em;
}

.flag-list > li {
	display: flex;
	flex-flow: column;
	align-items: center;
	width: 5.5em;
	text-align: center;
}

.flag-list > li > figure {
	width: 3em;
	aspec-tatio: 4 / 3;
}

.flag-list > li > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.flag-list > li > div {
	font-size: 10px;
	letter-spacing: 0;
	line-height: 1;
	margin-top: 0.5em;
}

#global-partner-list {
	list-style-type: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1em;
}

#global-partner-list > li {
	display: grid;
	justify-content: center;
	background-color: var(--color-blue-pale);
	padding: 1.5em;
	border-radius: 0.5em;
	border: 1px solid var(--color-blue-light);
}

#global-partner-list > li > div {
	font-family: var(--serif-font);
	color: var(--color-blue);
	margin-top: 1em;
}

.grobal-round {
	display: inline-block;
	padding: 0.25lh 1lh;
	background-color: var(--color-blue);
	color: #fff;
	font-size: 0.75em;
	border-radius: 0.75lh;
	margin-right: 1em;
}

@media (max-width: 1100px) {
	#global-training-list {
		grid-template-columns: 1fr 1fr;
	}

	#global-training-list > li > a > dl {
		width: 15em;
		margin: 1em auto 0 auto;
	}
}

@media (max-width: 768px) {
	#global-training-list {
		grid-template-columns: 1fr;
	}

	.global-content {
		grid-template-columns: 1fr;
	}

	#global-partner-list {
		grid-gap: 0.5em;
	}
}


/* --------------------------
    scholarship
-------------------------- */
#scholarship-fee-emphasize {
	display: grid;
	justify-content: center;
    padding: 1em 2em;
    background-color: var(--color-blue-pale);
    border-radius: 0.375em;
	color: var(--color-blue);
	font-weight: 700;
}

#scholarship-fee-emphasize > div {
	font-size: clamp(1.25em, 2vw, 1.5em);
}

#scholarship-fee-emphasize > span {
	justify-self: flex-end;
}