@charset "utf-8"; /* ========================================================================== 第44回日本森田療法学会 — base style ※ Google Fonts は各ページの で として読み込む ========================================================================== */ :root { /* Fonts（今大会は明朝系をベースにする） */ --font-ja-base: 'YakuHanMP', 'Zen Old Mincho', 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif; --font-ja-sans: 'YakuHanJP', 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; --font-en-display: 'Cormorant Garamond', 'Zen Old Mincho', serif; /* Colors（トップ画像から採色） */ --bg: #f5efe3; /* トップ画像の地色と同色 */ --bg-soft: #f9f5ec; --panel: #fffdf8; /* 本文パネル（真っ白を避けた温かい紙色） */ --ink: #231815; --ink-soft: #4c443e; --ink-mute: #7a7069; --green: #2b6533; /* 見出し・メニュー等のメインカラー */ --green-dark: #1d4a25; --green-pale: #e8eee2; --indigo: #1b3557; /* 絣（かすり）の藍 */ --indigo-deep: #0a1d38; --accent: #d95f22; /* 日付などのアクセント（朱） */ --line: #ddd4c1; --line-soft: #eae2d2; } 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.85; letter-spacing: 0.02em; color: var(--ink); background-color: var(--bg); 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; } a { color: var(--green-dark); text-underline-offset: 0.2em; } a:hover { color: var(--accent); } /* Utilities */ .font-sans { font-family: var(--font-ja-sans) !important; } .font-en { font-family: var(--font-en-display) !important; letter-spacing: 0.04em; } .text-accent { color: var(--accent) !important; } .text-green { color: var(--green) !important; } /* 本文パネル（白すぎない紙色） */ .sheet { background-color: var(--panel); border: 1px solid var(--line-soft); } /* ========================================================================== Layout: Container ========================================================================== */ /* Bootstrap のカラムは min-width:auto のため、画像などの固有幅で カラム自体が画面幅より広がってしまう。0 を指定して抑止する。 */ #wrapper > [class*='col-'] { min-width: 0; } .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: var(--bg); border-bottom: 1px solid var(--line); margin: 0 0 15px !important; padding: 8px 0 0 !important; } .site-header .inner { min-height: 84px; padding: 0 0 6px; } /* Logo mark */ .header-logo { width: 96px; height: auto; overflow: hidden; flex: 0 0 auto; } .header-logo img { width: 100%; height: auto; display: block; } @media (max-width: 576px) { .header-logo { display: none; } } /* Title */ .header-title-area { min-width: 0; } /* PC：大会名の上に緑のバッジとして置く */ .header-title .header-kai { display: block; width: fit-content; font-family: var(--font-ja-base); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; color: #fff; background: var(--green); padding: 1px 9px 0; margin: 0 0 5px; line-height: 1.6; } .header-title { font-family: var(--font-ja-base); font-size: clamp(1.15rem, 0.95rem + 1vw, 1.8rem); line-height: 1.2; margin: 0; font-weight: 700; color: var(--ink); letter-spacing: 0.06em; } .header-title > span { display: inline-block; } .header-en { font-family: var(--font-en-display); font-size: clamp(0.62rem, 0.55rem + 0.3vw, 0.8rem); letter-spacing: 0.06em; color: var(--green-dark); margin: 5px 0 0; line-height: 1.35; } /* Right meta area */ .header-meta { display: grid; gap: 7px; justify-items: start; font-family: var(--font-ja-sans); } /* .header-meta は .pc（display:block）に上書きされるため、 行間は gap ではなくマージンで確保する */ .meta-row + .meta-row { margin-top: 7px; } .meta-row { display: flex; gap: 8px; align-items: center; justify-content: flex-start; font-size: 0.8rem; line-height: 1.35; } .meta-label { background: var(--green); color: #fff; padding: 3px 8px; border-radius: 0; line-height: 1.2; font-size: 0.72rem; letter-spacing: 0.08em; flex: 0 0 auto; white-space: nowrap; } .meta-value { font-weight: 500; color: var(--ink-soft); } .meta-num { font-family: var(--font-ja-base); font-size: 1.3em; line-height: 1; font-weight: 700; color: var(--accent); padding: 0 1px; } /* Mobile header behavior */ .pc { display: block; } .sp { display: none; } @media (max-width: 991.98px) { header { position: sticky; top: 0 !important; z-index: 9999; margin-bottom: 10px; } .pc { display: none; } .sp { display: block; } /* 縦を詰める。ヘッダーの高さ＝ハンバーガーボタンの高さに合わせ、 ボタンが下線をまたがないようにする */ .site-header { margin: 0 0 10px !important; padding: 0 !important; } .site-header .inner { min-height: 56px; padding: 2px 0; } .header-logo { width: 62px; } /* SP・タブレット：バッジをやめ「第44回日本森田療法学会」を1行の見出しに */ .header-title .header-kai { display: inline; width: auto; background: none; color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; padding: 0; margin: 0; } .header-en { margin-top: 0; line-height: 1.25; } /* ハンバーガーボタン（56px）との重なり防止 */ .header-title-area { padding-right: 64px; } } @media (max-width: 576px) { /* ボタンが50pxになるのに合わせてヘッダーも50pxに */ .site-header .inner { min-height: 50px; padding: 0; } /* 天地中央だと上寄りに見えるので、少し下げて収まりを良くする */ .header-title-area { padding-top: 6px; } .header-title { letter-spacing: 0.02em; } /* 狭い端末でも英文サブタイトルを1行に収める */ .header-en { letter-spacing: 0.01em; } .header-title-area { padding-right: 58px; } } /* ========================================================================== Hamburger menu ========================================================================== */ .menu-btn { position: fixed; top: 0; right: 0; display: flex; height: 56px; width: 56px; justify-content: center; align-items: center; z-index: 90; background-color: var(--green-dark); border-radius: 0; } .menu-btn::after { content: 'MENU'; position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; color: #ffffff; font-size: 9px; letter-spacing: 0.1em; font-family: var(--font-ja-sans); line-height: 1; } #menu-btn-check:checked ~ .menu-btn::after { content: 'CLOSE'; font-size: 8px; } .menu-btn span { margin-top: -9px; } .menu-btn span, .menu-btn span:before, .menu-btn span:after { content: ''; display: block; height: 1px; width: 30px; 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: #152618; /* 背景が透けて読みづらくならないよう不透明に */ 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 rgba(255, 255, 255, 0.35); list-style: none; } .menu-content ul li a { display: block; width: 100%; font-weight: 500; box-sizing: border-box; color: #fff; text-decoration: none; padding: 15px 25px 15px 5px; position: relative; font-family: var(--font-ja-base); letter-spacing: 0.04em; } .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: var(--green); } .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: 576px) { .menu-btn { top: 0; right: 0; height: 50px; width: 50px; } .menu-btn::after { font-size: 9px; bottom: 7px; } .menu-btn span { margin-top: -8px; } .menu-btn span, .menu-btn span:before, .menu-btn span:after { width: 30px; 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; } } /* トップ画像は地色と同化させるため枠・影を付けない */ .topvisual img { display: block; width: 100%; height: auto; } /* ========================================================================== Footer ========================================================================== */ #footer-area { display: flex; justify-content: center; align-items: flex-start; margin: 12vh 0 0; padding: 35px 0 45px; gap: 25px; border-top: 1px solid var(--line) !important; } @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 30px; padding: 0; color: var(--ink-soft); list-style: none; font-size: 0.88rem; } #footer-area ul.secretariat li { margin: 0; padding: 0; line-height: 1.6; } #footer-area ul.secretariat li:nth-child(1) { color: var(--green-dark); background-color: var(--panel); border: solid 1px var(--green); padding: 5px 14px 4px; margin: 0 0 10px; font-weight: 700; text-align: center; letter-spacing: 0.1em; } #footer-area ul.secretariat li:nth-child(2) { color: var(--ink); font-size: 0.95rem; padding: 0 !important; font-weight: 700; 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; letter-spacing: 0.1em; color: var(--ink-mute); margin: 0; padding: 12px 0 18px; border-top: 1px solid var(--line-soft) !important; } /* ========================================================================== 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: var(--green); 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.03em; } #society-aside::-webkit-scrollbar { display: none; } #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: var(--panel); border-bottom: thin solid var(--line-soft); display: inline-block; width: 93%; letter-spacing: 0; } #society-aside #society-main-menu ul li:first-child { border-top: 2px solid var(--green); } #society-aside #society-main-menu ul li a { color: var(--ink); text-decoration: none !important; position: relative; transition: all 0.25s ease; display: block; width: 100%; /* アイコン分を左に空け、折り返し時も文字がアイコン下に回り込まないようにする */ padding: 11px 7px 11px 29px; line-height: 1.3; font-size: 0.95rem; } #society-aside #society-main-menu ul li a > small { color: var(--ink-mute); font-weight: 700 !important; padding-left: 19px; margin: 0; line-height: 1 !important; } #society-aside #society-main-menu ul li a span { color: var(--accent); margin: -2px 5px 0 0; font-size: 0.7em !important; } #society-aside #society-main-menu ul li.preparation { pointer-events: none !important; } #society-aside #society-main-menu ul li:hover { background-color: var(--green) !important; text-decoration: none !important; } #society-aside #society-main-menu ul li a:hover, #society-aside #society-main-menu ul li a:hover > small, #society-aside #society-main-menu ul li a:hover span { color: #fff; } #society-aside #society-main-menu ul li.society-active { background-color: var(--green); } #society-aside #society-main-menu ul li.society-active a, #society-aside #society-main-menu ul li.society-active a > small, #society-aside #society-main-menu ul li.society-active a span { color: #fff !important; } /* Menu icon */ #society-aside #society-main-menu .menu-ico { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 15px; font-size: 11px; line-height: 1; background-color: var(--green); color: #fff; border-radius: 2px; } #society-aside #society-main-menu ul li a:hover .menu-ico, #society-aside #society-main-menu ul li.society-active .menu-ico { color: var(--green); background-color: #fff; } #society-aside #society-main-menu ul li a div { display: inline-block; opacity: 0.5; } /* 準備中メニュー（クリック不可。背景に同化しない程度に彩度を落とす） */ #society-aside #society-main-menu ul li.is-prep { pointer-events: none; } #society-aside #society-main-menu ul li.is-prep:not(.society-active) a { color: #6f665e; } #society-aside #society-main-menu ul li.is-prep:not(.society-active) .menu-ico { background-color: #8e9a88; color: #fff; } /* SPメニューの準備中 */ .menu-content ul li a.is-prep { pointer-events: none; color: rgba(255, 255, 255, 0.6); } .menu-content ul li a.is-prep::before { opacity: 0.5; } /* ポスターダウンロード（サイド／SP時はフッター） */ #society-aside .posd { width: 93%; margin: 22px 0 0; padding: 0 !important; } .flyer-download { overflow: hidden; max-width: 100%; background: var(--green); padding: 5px; color: inherit; transition: opacity 0.2s ease; } .flyer-download:hover { opacity: 0.85; text-decoration: none; } .flyer-download__thumb { width: 60%; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 0; background: #fff; } .flyer-download__thumb img { width: 100%; height: auto; display: block; } .flyer-download__cta { width: 40%; min-width: 0; color: #fff; text-decoration: none; padding: 0; gap: 4px; } .flyer-download__title { font-weight: 700; font-size: 15px; line-height: 1.1; letter-spacing: -0.02em; } .flyer-download__subtitle { font-weight: 600; font-size: 13px; line-height: 1.2; letter-spacing: -0.06em; } .flyer-download__icon { font-size: 26px; line-height: 1; margin: 6px 0 0; } .flyer-download__btntext { font-family: var(--font-en-display); font-weight: 600; font-size: 13px; letter-spacing: 0.12em; opacity: 0.95; line-height: 1; } /* SP・タブレット時はサイドが隠れるためフッターに表示 */ .footer-mobile-downloads { display: none; } @media (max-width: 991.98px) { .footer-mobile-downloads { display: block; width: min(100%, 430px); margin: 0 auto 18px; } .footer-mobile-downloads .flyer-download { width: 100%; } } /* 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.88rem; color: var(--ink-soft); } #society-aside ul.secretariat li { line-height: 1.35; padding: 0 3px 0; letter-spacing: 0; } #society-aside ul.secretariat li.secretariat__title { color: var(--green-dark); font-size: 0.92rem !important; background-color: var(--panel); border: solid 1px var(--green); padding: 5px 0 4px; margin-bottom: 10px; font-weight: 700; text-align: center; letter-spacing: 0.1em; } /* Main */ #society-main { transition: all 0.5s ease; } /* ========================================================================== News / Info ========================================================================== */ h2.info_heading { font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.28rem); font-weight: 700; color: var(--green-dark); margin-top: 15px; margin-bottom: 8px; letter-spacing: 0.06em; } .info { padding: 0.75em 1.5em 1em; border: 1px solid var(--line); text-align: left; line-height: 1.5; color: var(--ink); overflow: auto; width: 100%; background-color: var(--panel); } .info dl { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: start; margin: 0; padding: 0.85rem 0.25rem; border-bottom: 1px dotted var(--line); } .info dl:last-child { border-bottom: 0; } .info dt { flex-shrink: 0; line-height: 1.5; padding-right: 1em; margin: 0 !important; font-family: var(--font-en-display); font-size: 1.05rem; letter-spacing: 0.04em; color: var(--green-dark); font-weight: 600; } .info dd { flex: 1; /* 狭幅端末で全体レイアウトを押し広げないよう 100% で頭打ちにする */ min-width: min(300px, 100%) !important; line-height: 1.5; padding-right: 0.25em; margin: 0 !important; } /* ========================================================================== Heading with rules ========================================================================== */ .head-border { display: flex; align-items: center; color: var(--green-dark) !important; } .head-border:before, .head-border:after { content: ''; height: 1px; flex-grow: 1; background-color: var(--line); } .head-border:before { margin-right: 1rem; } .head-border:after { margin-left: 1rem; } /* ========================================================================== Modal / body lock ========================================================================== */ body.fixed02 { position: fixed; width: 100%; height: 100%; left: 0; } /* Utility */ .vertical { writing-mode: vertical-rl; }