@charset "utf-8"; /* ========================================================================== Fonts ※ Google Fonts は各ページの で タグとして読み込む 　（@import による直列ダウンロードを避けパフォーマンスを向上させるため） ========================================================================== */ /* ========================================================================== Base ========================================================================== */ /* :root { --header-bg: #fbf7ef; --ink: #111; --line: #0b1f2a; --pill: #1c2f3a; --muted: #2b2b2b; } */ :root { --font-ja-base: 'YakuHanJP', 'Zen Kaku Gothic New', 'Sawarabi Gothic', 'Noto Sans JP', 'Noto Serif JP', sans-serif; } html, body { width: 100% !important; height: 100% !important; } html { font-size: 93.75% !important; /* 15px */ -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; -ms-overflow-style: scrollbar !important; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; } body { font-family: var(--font-ja-base); font-weight: 500; line-height: 1.75; letter-spacing: 0.005em; color: #333333; background-color: #fbf7ef; margin: 0; padding: 0; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } button, input, select, textarea { font-family: var(--font-ja-base); } address { font-style: normal; } *, *:before, *:after { box-sizing: border-box; } *:focus { outline: none !important; box-shadow: none !important; } /* Utilities */ .font-tek { font-family: 'Teko', sans-serif !important; } /* ========================================================================== Layout: Container ========================================================================== */ .container-fluid { max-width: 1000px; margin: 0 auto; padding: 0 15px; } @media (max-width: 767px) { .container-fluid { padding: 0 10px; } } /* ========================================================================== Header ========================================================================== */ header { margin: 0; padding: 0; margin-bottom: 15px; } .site-header { background: #fbf7ef; border-bottom: 1px solid #0b1f2a; margin: 0 0 15px !important; padding: 5px 0 0 !important; } .site-header .inner { min-height: 80px; padding: 0; } /* Logo */ .header-logo { width: 77px; height: auto; border-radius: 50%; overflow: hidden; flex: 0 0 auto; } .header-logo img { width: 100%; height: 100%; object-fit: contain; display: block; } @media (max-width: 576px) { .header-logo { width: 50px; } } @media (max-width: 420px) { .header-logo { width: 30px; } } /* Tagline / Title */ .header-tagline { font-size: clamp(0.813rem, 0.75rem + 0.31vw, 1.125rem); letter-spacing: 0.06em; color: #2b2b2b; margin: 0 0 6px; text-align: left; white-space: nowrap; line-height: 1.12; } .header-title { font-family: 'Zen Old Mincho', serif; font-size: clamp(1rem, 0.875rem + 0.63vw, 1.625rem); line-height: 1.12; margin: 0; font-weight: 900; color: #0b1f2a; letter-spacing: 0.02em; } .header-title > span { display: inline-block; } /* Right meta area */ .header-meta { display: grid; gap: 8px; justify-items: start; } .meta-row { display: flex; gap: 10px; align-items: center; white-space: nowrap; justify-content: flex-start; } .meta-label { background: #1c2f3a; color: #fff; padding: 4px 10px; border-radius: 0; line-height: 1.2; } .meta-value { font-weight: 500; color: #0b1f2a; } .meta-num { font-size: 1.5em; line-height: 1; font-weight: 600; } /* Mobile header behavior */ .pc { display: block; } .sp { display: none; } @media (max-width: 991.98px) { header { position: sticky; top: 0 !important; z-index: 9999; } .pc { display: none; } .sp { display: block; } /* ハンバーガー分の逃げ（必要なら 50px → 100px に） */ .header-tagline, .header-title { padding-right: 50px; /* ← 右100px空けたいならここを 100px に */ } .header-tagline { white-space: normal; } .header-meta { justify-items: start; } } @media (max-width: 576px) { .site-header .inner { min-height: 60px; padding: 0 0 5px; } .header-tagline { font-size: 12px; margin-bottom: 4px; } .meta-row { flex-wrap: wrap; } /* .header-tagline, .header-title { padding-right: 0px; } */ .header-tagline, .header-title { letter-spacing: -0.05em; } } /* ========================================================================== Hamburger menu ========================================================================== */ .menu-btn { position: fixed; top: 20px; right: 15px; display: flex; height: 48px; width: 48px; justify-content: center; align-items: center; z-index: 90; background-color: rgba(0, 0, 0, 0.8); border-radius: 2px; } .menu-btn span, .menu-btn span:before, .menu-btn span:after { content: ''; display: block; height: 1px; width: 25px; border-radius: 3px; background-color: #ffffff; position: absolute; } .menu-btn span:before { bottom: 8px; } .menu-btn span:after { top: 8px; } #menu-btn-check { display: none; } #menu-btn-check:checked ~ .menu-btn span { background-color: rgba(255, 255, 255, 0); } #menu-btn-check:checked ~ .menu-btn span::before { bottom: 0; transform: rotate(45deg); } #menu-btn-check:checked ~ .menu-btn span::after { top: 0; transform: rotate(-45deg); } .menu-content { width: 100%; height: 100%; position: fixed; top: 0; left: 100%; z-index: 80; background-color: rgba(0, 0, 0, 0.9); transition: all 0.5s; } .menu-content ul { margin-top: 60px; padding: 10px 10px 50px; height: calc(100vh - 70px) !important; overflow-y: scroll; } .menu-content ul li { border-bottom: solid 1px #ccc; list-style: none; } .menu-content ul li a { display: block; width: 100%; font-weight: 400; box-sizing: border-box; color: #fff; text-decoration: none; padding: 15px 25px 15px 5px; position: relative; font-family: 'Noto Sans JP', sans-serif; } .menu-content ul li a::before { content: ''; width: 7px; height: 7px; border-top: solid 2px #fff; border-right: solid 2px #fff; transform: rotate(45deg); position: absolute; right: 11px; top: 23px; } .menu-content ul li a:hover { color: #ffffff; background-color: #107dc3; } .menu-content ul li a:hover::before { border-top: solid 2px #fff !important; border-right: solid 2px #fff !important; } .menu-content ul li:last-child { margin-bottom: 150px !important; } #menu-btn-check:checked ~ .menu-content { left: 0; /* メニューを画面内へ */ } @media (max-width: 767px) { } @media (max-width: 576px) { .menu-btn { top: 16px; right: 10px; height: 36px; width: 36px; } .menu-btn span, .menu-btn span:before, .menu-btn span:after { width: 18px; border-radius: 1px; } .menu-btn span:before { bottom: 7px; } .menu-btn span:after { top: 7px; } } /* ========================================================================== Content area ========================================================================== */ #society-main .content-area-top { padding: 25px 0 45px !important; } #society-main .content-area { padding: 25px 25px 50px !important; } @media (max-width: 767px) { #society-main .content-area { padding: 25px 5px 25px !important; } } /* ========================================================================== Footer ========================================================================== */ #footer-area { display: flex; justify-content: center; align-items: flex-start; margin: 15vh 0 0; padding: 35px 0 55px; gap: 25px; } @media (max-width: 767px) { #footer-area { display: block !important; } } #footer-area ul.secretariat, #footer-area ul.secretariat li { margin: 0; padding: 0; } #footer-area ul.secretariat { width: auto; margin: 0 0 35px; padding: 0; color: #333; list-style: none; font-size: 0.9rem; } #footer-area .secretariat02 { display: flex; justify-content: space-between; gap: 10px; } #footer-area .secretariat02 > div { width: 100%; } @media (max-width: 540px) { #footer-area .secretariat02 { display: block; } #footer-area .secretariat02 > div { width: 96%; margin: 15px auto 25px; } } #footer-area ul.secretariat li { margin: 0; padding: 0; line-height: 1.55; } #footer-area ul.secretariat li:nth-child(1) { color: #333; background-color: #fff; border: solid 1px #000; padding: 7px 0 5px; margin: 0 0 10px; font-weight: bold; text-align: center; } #footer-area ul.secretariat li:nth-child(2) { color: #333; font-size: 0.95rem; padding: 0 !important; font-weight: bold; margin: 0 0 3px; } #footer-area ul.secretariat li:nth-child(3) span { display: inline-block !important; } footer { width: 100%; text-align: center; font-size: 0.8rem; margin: 0; padding: 12px 0; } /* ========================================================================== Page top button ========================================================================== */ div#pagetop-scroll { display: none; position: fixed; right: 35px; bottom: 28px; color: #fff; width: 2.7em; height: 2.7em; border-radius: 50%; background: #e58228; text-align: center; line-height: 2.7em; z-index: 7000; } @media (max-width: 992px) { div#pagetop-scroll { right: 15px; bottom: 30px; } } div#pagetop-scroll:hover { cursor: pointer; opacity: 0.9; } /* ========================================================================== Aside / Menu (left) ========================================================================== */ #society-aside { padding: 0 0 25px; margin: 0; width: 100%; z-index: 1001; transition: all 0.5s ease; letter-spacing: 0.05rem; } #society-aside::-webkit-scrollbar { display: none; } /* Main menu list */ #society-aside #society-main-menu ul, #society-aside #society-main-menu ul li { margin: 0; padding: 0; } #society-aside #society-main-menu ul li { list-style: none; font-weight: 600; background-color: #ffffff; border-bottom: thin solid #dfe3e8; display: inline-block; width: 93%; /* font-family: 'Noto Sans JP', sans-serif; */ /* text-transform: uppercase; */ letter-spacing: 0; } #society-aside #society-main-menu ul li a { color: #1c2f3a; text-decoration: none !important; position: relative; transition: all 0.3s ease; display: block; width: 100%; padding: 12px 7px; line-height: 1.25; } #society-aside #society-main-menu ul li a > small { color: #444; font-weight: bold !important; padding-left: 19px; margin: 0; line-height: 1 !important; } #society-aside #society-main-menu ul li a span { color: #fff; background: #078e6c; margin: -2px 5px 0 0; } #society-aside #society-main-menu ul li a div { opacity: 0.5; display: inline-block; } #society-aside #society-main-menu ul li.preparation { pointer-events: none !important; } /* Hover / active */ #society-aside #society-main-menu ul li:hover { background-color: #078e6c !important; text-decoration: none !important; } #society-aside #society-main-menu ul li a:hover, #society-aside #society-main-menu ul li a:hover > small { color: #fff; } #society-aside #society-main-menu ul li.society-active { background-color: #078e6c; } #society-aside #society-main-menu ul li.society-active a, #society-aside #society-main-menu ul li.society-active a > small { color: #fff !important; } #society-aside #society-main-menu ul li.society-active a span { background: none !important; } /* Poster download (posd) */ #society-aside .posd { margin: 22px 0 0; padding: 0 !important; width: 93%; background: #5876b7; } #society-aside .posd img { width: 93%; } .visitor-counter { width: 93%; margin: 14px 0 0; padding: 0; position: relative; } .visitor-counter__inner { position: relative; overflow: hidden; padding: 8px 10px 7px; color: #283645; border: 1px solid #d6dce5; background: #f8fafc; box-shadow: none; } .visitor-counter__eyebrow { position: relative; z-index: 1; margin: 0 0 3px; font-size: 0.55rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #607387; } .visitor-counter__row { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .visitor-counter__label { font-size: 0.78rem; font-weight: 700; line-height: 1.2; } .visitor-counter__note { margin-top: 1px; font-size: 0.66rem; line-height: 1.3; color: #6b7d90; } .visitor-counter__badge { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 24px; color: #8ea0b2; font-size: 0.68rem; border: 1px solid #d6dce5; background: #ffffff; } .visitor-counter__value { position: relative; z-index: 1; margin-top: 4px; font-family: 'Teko', sans-serif; font-size: clamp(1.65rem, 1.42rem + 0.45vw, 1.95rem); line-height: 0.95; letter-spacing: 0.03em; color: #3f5f84; } .visitor-counter__value .js-visitor-counter { display: inline-block; min-width: 3ch; } .visitor-counter--footer { display: none; width: 100%; margin: 12px 0 16px; } .footer-mobile-downloads { display: none; } .footer-mobile-downloads__item { margin: 0 0 12px; } .footer-mobile-downloads .flyer-download { width: 100%; } .footer-mobile-downloads .flyer-download img { width: 93%; } @media (max-width: 991.98px) { #footer-area { display: block !important; } .footer-mobile-downloads { display: block; width: min(100%, 560px); margin: 0 auto 14px; } .footer-mobile-downloads__item { margin: 0 0 10px; } .footer-mobile-downloads .flyer-download, .footer-mobile-downloads .btn-slide-dl { width: 100%; max-width: 560px; margin: 0 auto; } } @media (max-width: 767px) { .visitor-counter, .visitor-counter--footer { display: block; width: 100%; } .footer-mobile-downloads { width: min(100%, 430px); margin: 0 auto 14px; } .footer-mobile-downloads .flyer-download__thumb { width: 54%; } .footer-mobile-downloads .flyer-download__cta { width: 46%; gap: 4px; } .footer-mobile-downloads .flyer-download__title, .footer-mobile-downloads .flyer-download__subtitle { font-size: 13px; } .footer-mobile-downloads .flyer-download__icon { font-size: 22px; margin-top: 4px; } .footer-mobile-downloads .flyer-download__btntext { font-size: 12px; } .footer-mobile-downloads .btn-slide-dl { padding-top: 0.7rem !important; padding-bottom: 0.7rem !important; font-size: 0.95rem; } .visitor-counter__inner { padding: 10px; } .visitor-counter__note { font-size: 0.68rem; } } /* 全体：画像＋CTAの2カラム */ .flyer-download { border-radius: 0; /* 角丸不要なら0 */ overflow: hidden; /* 端を揃える */ background: #295cab; padding: 5px; } .flyer-download:hover { opacity: 0.7; } /* 左：チラシ枠 */ .flyer-download__thumb { width: 60%; /* 画像側の比率（調整OK） */ display: flex; align-items: center; justify-content: center; padding: 0; } /* 右：オレンジ面 */ .flyer-download__cta { width: 40%; color: #fff; text-decoration: none; padding: 0; gap: 6px; transition: filter 0.15s ease, transform 0.15s ease; } .flyer-download__title { font-weight: 800; letter-spacing: 0.06em; font-size: 15px; line-height: 1; letter-spacing: -0.1em; } .flyer-download__subtitle { font-weight: 600; font-size: 15px; line-height: 1.1; letter-spacing: -0.1em; } .flyer-download__icon { font-size: 30px; line-height: 1; margin: 8px 0 0; } .flyer-download__btntext { font-weight: 700; font-size: 13px; opacity: 0.95; line-height: 1; } .flyer-download { color: inherit; } .flyer-download:hover { text-decoration: none; } /* Secretariat list (aside) */ #society-aside ul.secretariat, #society-aside ul.secretariat li { margin: 0; padding: 0; } #society-aside ul.secretariat { width: 93%; margin: 22px 0 0; padding: 0; list-style: none; font-size: 0.9rem; color: #333; } #society-aside ul.secretariat li { line-height: 1.25; padding: 0 3px 0; letter-spacing: -0.01em; } #society-aside ul.secretariat li.secretariat__title { color: #333; font-size: 0.95rem !important; background-color: #fff; border: solid 1px #000; padding: 7px 0 5px; margin-bottom: 10px; font-weight: bold; text-align: center; } #society-aside ul.secretariat li.toptitle { color: #333; font-size: 0.9rem; padding: 1px 3px 1px; font-weight: bold; margin-bottom: 3px; } /* Main */ #society-main { transition: all 0.5s ease; } /* Utility */ .text-shadow01 { text-shadow: 0 0 10px #241714 !important; } .vertical { writing-mode: vertical-rl; } .v_line_left { border-left: solid 1px rgb(255, 255, 255); padding-left: 1px; height: 2.8rem !important; } .v_line_left02 { border-left: solid 1px rgb(255, 255, 255); padding-left: 1px; height: 3rem !important; } /* ========================================================================== News / Info ========================================================================== */ h2.info_heading { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem); font-weight: 600; margin-top: 15px; margin-bottom: 5px; } .info { padding: 1.25em 1.5em 1.75em; border: 1px solid #ccc; text-align: left; line-height: 1.45; color: #241714; overflow: auto; width: 100%; background-color: #fff; } .info dl { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: start; margin: 0; padding: 0.75rem; border-bottom: 1px solid #ccc; } .info dt { flex-shrink: 0; line-height: 1.45; padding-right: 0.75em; margin: 0 !important; } .info dd { flex: 1; min-width: 300px !important; line-height: 1.45; padding-right: 0.25em; margin: 0 !important; } /* ========================================================================== Sponsored heading border ========================================================================== */ .head-border { display: flex; align-items: center; color: #107dc3 !important; } .head-border:before, .head-border:after { content: ''; height: 1px; flex-grow: 1; background-color: #ccc; } .head-border:before { margin-right: 1rem; } .head-border:after { margin-left: 1rem; } /* ========================================================================== Modal ========================================================================== */ body.fixed { position: fixed; width: 100%; height: 100%; left: 23.8%; } body.fixed02 { position: fixed; width: 100%; height: 100%; left: 0; } .modalArea { display: none; position: fixed; top: 0; left: 0; width: 100%; height: calc(100% + 160px); z-index: 99999; } .modalBg { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); } .modalWrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70%; max-width: 800px; padding: 45px 30px; background-color: #fff; margin-top: -80px; } @media (max-width: 767px) { .modalWrapper { width: 90%; padding: 45px 15px; } } .modalContents > p.mtitle { font-weight: 600; text-align: left; } .modalContents > p { line-height: 2; font-weight: 500; text-align: center; } .closeModal { position: absolute; top: 0.5rem; right: 1rem; cursor: pointer; } /* ========================================================================== Bootstrap Icons (menu) ========================================================================== */ #society-aside #society-main-menu .menu-ico { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 15px; font-size: 11px; line-height: 1; margin-right: 8px; background-color: #333; color: #fff; border-radius: 2px; /* 少しだけ角丸 */ } /* a内のdivがブロックで崩れるのが嫌なら inline-block に */ #society-aside #society-main-menu ul li a div { display: inline-block; } #society-aside #society-main-menu ul li a:hover .menu-ico, #society-aside #society-main-menu ul li.society-active .menu-ico { color: #fff; background-color: #078e6c; } /* ----- 広報用スライドダウンロードボタン ----- */ .btn-slide-dl { background-color: #3764af; border-color: #3764af; color: #fff; font-weight: 600; transition: background-color 0.2s ease, border-color 0.2s ease; } .btn-slide-dl:hover, .btn-slide-dl:focus { background-color: #264d8c; border-color: #264d8c; color: #fff; }