/* ==========================================================
1. Root / Variables
========================================================== */
:root {
/* =========================================
Font Scale (調整済み)
========================================= */
--fs-2xs: clamp(0.75rem, 0.75vw, 0.8rem);
--fs-xs: clamp(0.85rem, 0.85vw, 0.95rem);
--fs-sm: clamp(0.95rem, 0.95vw, 1.05rem);
--fs-base: clamp(1.05rem, 1vw, 1.12rem);
--fs-md: clamp(1.12rem, 1.2vw, 1.22rem);
--fs-lg: clamp(1.2rem, 1.4vw, 1.35rem);
/* h4 */
--fs-xl: clamp(1.35rem, 1.8vw, 1.65rem);
/* h3 */
--fs-2xl: clamp(1.6rem, 2.2vw, 2rem);
/* h2 */
--fs-3xl: clamp(1.9rem, 2.8vw, 2.8rem);
/* h1 */
/* =========================================
Vertical Rhythm (安定化)
========================================= */
--vr: 1.5rem;
/* --- Font family --- */
--font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
"Segoe UI", Arial, "Hiragino Sans", "Noto Sans JP", sans-serif;
--font-serif: "Noto Serif JP", "Hiragino Mincho ProN",
"Yu Mincho", "游明朝", serif;
/* --- Color palette --- */
--color-333: #333;
--color-444: #444;
--color-666: #666;
--color-888: #888;
--color-AAA: #AAA;
--color-CCC: #CCC;
--color-DDD: #DDD;
--color-EEE: #EEE;
--color-F5: #F5F5F5;
--color-FFF: #FFF;
--color-lime-pale: #F2F6F2;
/* Lime */
--color-lime-tint: #EAFBD9;
/* 背景・淡色 */
--color-lime-light: #82D011;
/* アイコン・アクセント */
--color-lime-base: #6FB90B;
/* メイン */
--color-lime-dark: #379156;
/* 見出し・ボタン */
--color-lime-darker: #1F6F4A;
/* hover・区切り */
--color-lime-deep: #0F4F3A;
/* セクション背景 */
--color-lime-blackish: #0A2E22;
--color-lime-ink: #061F17;
/* 最暗・文字／最下層背景 */
/* Blue */
--color-blue-light: #3387B4;
--color-blue-base: #0069A2;
--color-blue-dark: #005481;
/* Yellow – Badge向け */
--color-yellow-light: #FFF7CC;
/* かなり淡い */
--color-yellow-base: #E6B800;
/* 落ち着いたゴールド */
--color-yellow-dark: #B8860B;
/* 深いゴールド */
/* Category colors */
--color-cat-important: #D62828;
--color-cat-event: #1D3557;
--color-cat-research: #2A9D8F;
--color-cat-member: #F4A261;
--color-cat-public: #6A4C93;
/* Alpha colors */
--color-white-alpha30: #ffffff50;
/* 色（エスケープ済み） */
--icon-color-default: %23333;
/* #333 */
--icon-color-lime: %236FB90B;
/* #6FB90B */
/* Shadow */
--shadow-soft:
0 1px 2px rgba(0, 0, 0, .04),
0 10px 24px rgba(0, 0, 0, .08);
--shadow-hover:
0 4px 12px rgba(0, 0, 0, .08),
0 20px 40px rgba(0, 0, 0, .14);
/* Transition */
--transition-smooth:
transform .3s cubic-bezier(.4, 0, .2, 1),
box-shadow .3s cubic-bezier(.4, 0, .2, 1),
border-color .3s ease;
/* ▼ プラス（＋） */
--svg-plus-default: url("data:image/svg+xml;utf8,");
--svg-plus-lime: url("data:image/svg+xml;utf8,");
/* ▼ マイナス（−） */
--svg-minus-default: url("data:image/svg+xml;utf8,");
--svg-minus-lime: url("data:image/svg+xml;utf8,");
--icon-lock: url("data:image/svg+xml;utf8,");
}
@media (max-width: 959px) {
:root {
--vr: 1.6rem;
}
}
/* ==========================================================
2. Reset / Base
========================================================== */
html {
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
font-size: 15px;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
overflow-x: hidden;
font-family: var(--font-sans);
color: var(--color-333);
font-size: 1rem;
font-weight: 400;
line-height: 1.9;
max-width: 1600px;
min-width: 320px;
}
.entry {
width: 100%;
}
.entry-header {
padding: 2.5rem 3% 1rem;
display: flex;
flex-direction: column;
}
/* ラベル（小さく上品に） */
.entry-type,
.entry-parent {
display: inline-block;
font-size: .75rem;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--color-lime-base);
margin-bottom: .5rem;
}
/* h1 */
.entry-title {
font-family: var(--font-serif);
font-size: var(--fs-2xl);
font-weight: 500;
letter-spacing: .04em;
line-height: 1.35;
margin: 0 0 0.5rem 0;
}
/* 静かなブランドライン */
.entry-title::after {
content: "";
display: block;
width: 100%;
height: 2px;
margin-top: 1rem;
background: var(--color-lime-base);
}
/* メタ情報 */
.entry-meta {
margin-top: .8rem;
display: flex;
justify-content: flex-end;
gap: 1.2rem;
align-items: baseline;
font-size: .8rem;
}
.entry-category {
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
}
.category_name {
display: inline-flex;
align-items: center;
padding: .25em .75em;
font-size: .75rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
border-radius: 999px;
/* ピル型 */
white-space: nowrap;
color: #fff;
}
.entry-date {
color: var(--color-666);
}
/* 本文 */
.entry-content {
padding: 0 3% 4rem;
}
@media (max-width: 959px) {
.entry-content {
padding: 0 3% 4rem;
}
}
/* ==========================================================
TYPOGRAPHY – Optimized Balance
========================================================== */
/* Reset */
.entry-content :where(h1, h2, h3, h4, h5, h6,
p, ul, ol, dl,
table, blockquote,
figure, pre) {
margin: 0;
font-weight: 400;
line-height: 1.8;
overflow-wrap: break-word;
word-break: normal;
}
/* =========================================
Automatic Block Spacing
========================================= */
.entry-content>*+* {
margin-top: var(--vr);
}
.entry-content>figure+p {
margin-top: 0;
}
.entry-content td>*+* {
margin-top: 0.7em;
}
/* Nested Gutenberg blocks */
.entry-content :where(.wp-block-group,
.wp-block-columns,
.wp-block-cover)>*+* {
margin-top: var(--vr);
}
/* First element reset */
.entry-content>*:first-child {
margin-top: 0 !important;
}
/* =========================================
Headings – Optimized Ratio
========================================= */
/* h2 – Chapter */
.entry-content h2 {
position: relative;
font-size: var(--fs-2xl);
font-weight: 700;
line-height: 1.5;
margin-top: calc(var(--vr) * 1.6);
margin-bottom: calc(var(--vr) * 0.9);
padding: .7em 1rem .7em 1.2rem;
color: var(--color-333);
background:
linear-gradient(90deg,
rgba(111, 185, 11, .10) 0%,
rgba(111, 185, 11, .03) 60%,
rgba(111, 185, 11, 0) 100%);
border-left: 5px solid var(--color-lime-base);
border-bottom: 1px solid rgba(111, 185, 11, .18);
letter-spacing: .02em;
}
/* h3 – Section */
.entry-content h3 {
position: relative;
font-size: var(--fs-xl);
font-weight: 700;
margin-top: calc(var(--vr) * 1.2);
margin-bottom: calc(var(--vr) * 0.5);
padding: .35em .8em;
color: var(--color-333);
background:
linear-gradient(90deg,
rgba(111, 185, 11, .08) 0%,
rgba(111, 185, 11, 0) 100%);
border-left: 4px solid var(--color-lime-base);
}
/* h4 – Subsection */
.entry-content h4 {
font-size: var(--fs-lg);
font-weight: 800;
border-left: 3px solid var(--color-lime-base);
padding-left: .45em;
margin-top: calc(var(--vr) * 1.35);
margin-bottom: calc(var(--vr) * 0.45);
color: var(--color-333);
}
/* h5 */
.entry-content h5 {
font-size: var(--fs-sm);
font-weight: 700;
margin-top: calc(var(--vr) * 1.15);
margin-bottom: calc(var(--vr) * 0.35);
color: var(--color-444);
}
/* h6 */
.entry-content h6 {
font-size: var(--fs-xs);
font-weight: 500;
margin-top: var(--vr);
margin-bottom: calc(var(--vr) * 0.3);
color: var(--color-666);
}
/* Consecutive headings compress */
.entry-content :where(h2, h3, h4, h5, h6)+ :where(h2, h3, h4, h5, h6) {
margin-top: var(--vr);
}
/* =========================================
Paragraph
========================================= */
.entry-content p {
font-size: var(--fs-base);
letter-spacing: .01em;
}
/* SP slightly relaxed */
@media (max-width: 959px) {
:root {
--vr: clamp(1.4rem, 2vw, 1.8rem);
}
}
/* =========================================
Lists / Table / Blocks
========================================= */
.entry-content :where(ul, ol, dl,
table, blockquote,
figure, pre) {
font-size: var(--fs-base);
}
/* =========================================
Inline
========================================= */
.entry-content strong {
font-weight: 600;
}
.entry-content small {
font-size: var(--fs-sm);
color: var(--color-666);
}
/* =========================================
Links
========================================= */
a {
color: var(--color-333);
text-decoration: none;
transition: color .2s ease, opacity .15s ease;
}
.entry-content a {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.page-template-news-archive .entry-content a {
text-decoration: none;
}
.entry-content a[href^="http"] {
overflow-wrap: anywhere;
word-break: break-word;
gap: 1rem;
}
@media (hover: hover) and (pointer: fine) {
a:hover,
.entry-content a:hover {
color: var(--color-lime-base);
}
}
a:active {
opacity: .7;
}
/* ==========================================================
4. Layout（グローバル構造）
========================================================== */
.content-wrapper {
display: flex;
flex-direction: column;
width: 100%;
}
.sidebar {
flex: 0 0 280px;
width: 280px;
box-sizing: border-box;
background-color: #fff;
height: 100vh;
overflow-y: auto;
-ms-overflow-style: none;
scrollbar-width: none;
border-left: 8px solid var(--color-lime-base);
position: fixed;
}
.sidebar::-webkit-scrollbar {
display: none;
}
.main-content {
flex: 1 1 auto;
min-width: 0;
box-sizing: border-box;
margin-left: 280px;
}
.footer {
margin-left: 280px;
}
@media screen and (max-width: 959px) {
#wpmem_login {
width: 100% !important;
}
}
/* ==========================================================
LISTS
========================================================== */
ul,
ol {
list-style: none;
padding: 0;
margin: 0;
}
.content-inner ul {
margin-bottom: 1rem;
}
.content-inner ul,
.content-inner ol,
.content-inner li {
list-style-type: initial;
padding-left: 1.5em;
}
/* li 本体には余計な操作をしない */
.content-inner li {
padding-left: 0;
text-indent: 0;
}
/* ・と文字の間を詰める */
.content-inner li::marker {
font-size: .9em;
/* マーカーを少し小さく */
}
/* =========================================
JCEH Archive List
========================================= */
.journal_archive_list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid #e5e5e5;
}
.journal-row a {
display: grid;
grid-template-columns: 1fr 120px 20px;
align-items: center;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid #e5e5e5;
color: inherit;
text-decoration: none;
transition: all .2s ease;
}
.journal-row a:hover {
padding-left: .5rem;
background: transparent;
}
/* Vol */
.journal-vol {
font-weight: 600;
color: #222;
}
/* Date */
.journal-date {
font-size: .9rem;
color: #888;
text-align: right;
white-space: nowrap;
}
/* Arrow */
.journal-arrow {
color: #aaa;
text-align: right;
transition: .2s;
}
.journal-row a:hover .journal-arrow {
transform: translateX(4px);
color: var(--color-lime-base);
}
@media (max-width: 640px) {
.journal-row a {
grid-template-columns: 1fr auto;
gap: .25rem 1rem;
}
.journal-date {
grid-column: 1 / 2;
text-align: left;
font-size: .85rem;
}
.journal-arrow {
grid-row: 1 / 3;
}
}
/* ==========================================================
TABLES
========================================================== */
.wp-block-table {
display: flex !important;
flex-direction: column;
}
.wp-block-table figcaption {
order: -1;
font-size: var(--fs-xl);
font-weight: 600;
color: var(--color-lime-dark);
}
.entry-content table {
width: 100%;
border-collapse: collapse;
color: var(--color-333);
table-layout: auto;
}
/* いったん全ボーダー削除 */
.entry-content th,
.entry-content td {
border: none;
}
.entry-content table th:first-child,
.entry-content table td:first-child {
white-space: nowrap;
}
/* 行ごとに上線 */
.entry-content tr {
border-top: 1px solid var(--color-DDD);
}
/* 最初の行は上線なし */
.entry-content tr:first-child {
border-top: none;
}
/* 見出し背景は維持 */
.entry-content th {
white-space: nowrap;
}
/* 左列は500 */
.entry-content th:first-child,
.entry-content td:first-child {
font-weight: 700;
}
/* フォントサイズ */
.entry-content td {
font-size: var(--fs-base);
padding: var(--vr);
}
@media (max-width: 959px) {
.entry-content table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.entry-content table thead {
display: none;
}
/* 各行をカード化 */
.entry-content table tr {
display: block;
padding: 1rem 0.5rem;
background: none;
/* ← ストライプ廃止 */
border-top: 1px solid var(--color-DDD);
/* ← 上線のみ */
}
/* 最初の行は上線なし */
.entry-content table tr:first-child {
border-top: none;
}
/* 偶数行の背景削除 */
.entry-content table tr:nth-child(even) {
background: none;
}
/* th非表示処理 */
.entry-content th {
border: none;
padding: 0;
margin: 0;
background: transparent;
}
/* td */
.entry-content table td {
display: block;
width: 100%;
padding: 0rem 0;
border: none;
white-space: normal;
}
/* data-label */
.entry-content table td::before {
content: attr(data-label);
display: block;
font-weight: 700;
margin-bottom: 0.3rem;
white-space: nowrap;
color: var(--color-333);
}
}
/* =========================================
Table Style: Left Column Fixed
========================================= */
.is-style-left-fixed-100 table {
table-layout: fixed;
}
.is-style-left-fixed-100 table th:first-child,
.is-style-left-fixed-100 table td:first-child {
width: 100px;
white-space: nowrap;
}
/* ==========================================================
RESPONSIVE TABLE COMPONENT
========================================================== */
/* PC */
.wp-block-table.responsive-table table {
width: 100%;
border-collapse: collapse;
}
.wp-block-table.responsive-table thead {
border-bottom: none;
}
.wp-block-table.responsive-table th,
.wp-block-table.responsive-table td {
padding: 0.6em 0.8em;
border-bottom: 1px solid #e0e0e0;
text-align: left;
}
.wp-block-table.responsive-table thead th {
background: var(--color-lime-pale);
font-weight: 600;
}
/* Mobile */
@media (max-width: 959px) {
/* ヘッダーは保持 */
.wp-block-table.responsive-table thead {
position: sticky;
top: 0;
z-index: 2;
}
/* 1行＝1カード */
.wp-block-table.responsive-table tbody tr {
display: block;
margin: 0;
padding: 0.35em 0;
border: 0px solid #ddd;
background: #fff;
}
.wp-block-table.responsive-table tbody tr {
border-bottom: 1px solid #e0e0e0;
padding: 1.5rem 0;
}
/* td：基本は「ラベル＋内容」 */
.wp-block-table.responsive-table tbody td {
display: grid;
grid-template-columns: var(--label-width) 1fr;
gap: 0.6em;
padding: 0 0;
border: none;
}
/* 左ラベル共通 */
.wp-block-table.responsive-table tbody td::before {
font-weight: 600;
white-space: nowrap;
padding-left: 1rem;
margin-bottom: 0;
}
/* ===== 1列目：カードタイトル ===== */
.wp-block-table.responsive-table tbody td:nth-child(1) {
grid-template-columns: 1fr;
font-weight: 700;
font-size: var(--fs-xl);
padding-bottom: 0.2em;
color: var(--color-lime-dark);
}
.wp-block-table.responsive-table tbody td:nth-child(1)::before {
content: none;
}
}
@media (max-width: 959px) {
.wp-block-table.responsive-table.meetings {
--label-width: 5rem;
}
/* ← 学術集会 ＞ 総会一覧 */
.wp-block-table.responsive-table.meetings tbody td:nth-child(2)::before {
content: "開催日";
}
.wp-block-table.responsive-table.meetings tbody td:nth-child(3)::before {
content: "開催地";
}
.wp-block-table.responsive-table.meetings tbody td:nth-child(4)::before {
content: "会 場";
}
.wp-block-table.responsive-table.meetings tbody td:nth-child(5)::before {
content: "会 長";
}
.wp-block-table.responsive-table.meetings tbody td:nth-child(6)::before {
content: "会長所属";
}
/* ← サテライトミーティング ＞ 日本リンパ腫学会認定団体 JSLA */
.wp-block-table.responsive-table.jsla {
--label-width: 4rem;
}
.wp-block-table.responsive-table.jsla tbody td:nth-child(2)::before {
content: "名称";
}
.wp-block-table.responsive-table.jsla tbody td:nth-child(3)::before {
content: "承認日";
}
/* ← 理事会議事録 */
.wp-block-table.responsive-table.board {
--label-width: 4rem;
}
.wp-block-table.responsive-table.board tbody td:nth-child(2)::before {
content: "回";
}
.wp-block-table.responsive-table.board tbody td:nth-child(3)::before {
content: "場所";
}
}
/* ==========================================================
BUTTON
========================================================== */
/* ----------------------------------------
* Section More
---------------------------------------- */
.section_more {
display: inline-flex;
align-items: center;
gap: .5rem;
color: #5ca800;
font-size: .95rem;
font-weight: 700;
line-height: 1;
text-decoration: none;
white-space: nowrap;
transition: color .2s ease;
}
.section_more::after {
content: "→";
font-size: 1rem;
line-height: 1;
transition: transform .2s ease;
}
.section_more:hover {
color: #3f7f00;
}
.section_more:hover::after {
transform: translateX(4px);
}
/* BASE ===================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
padding: 0.8rem 2.4rem 0.8rem 1.8rem;
border-radius: 8px;
font-size: var(--fs-base);
font-weight: 500;
letter-spacing: .04em;
line-height: 1;
text-decoration: none;
cursor: pointer;
user-select: none;
box-shadow: var(--shadow-soft);
transition: var(--transition-smooth);
overflow: hidden;
}
.btn::after {
content: '';
position: absolute;
top: 50%;
right: 1.4rem;
width: 7px;
height: 7px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: translateY(-50%) rotate(45deg);
transition:
right .25s ease,
border-color .25s ease;
}
.btn:hover::after {
right: 1.1rem;
}
.btn,
.btn:hover {
text-decoration: none !important;
}
/* ==========================================================
① PRIMARY – Lime Gradient
========================================================== */
.btn-primary {
background: linear-gradient(135deg,
var(--color-lime-base),
var(--color-lime-dark));
color: var(--color-FFF);
border: none;
}
.btn-primary:hover {
transform: translateY(-3px);
color: var(--color-FFF);
background: linear-gradient(135deg,
var(--color-lime-light),
var(--color-lime-base));
box-shadow: var(--shadow-hover);
}
/* ==========================================================
② SECONDARY – White Clean
========================================================== */
.btn-secondary {
background: var(--color-FFF);
color: var(--color-444);
border: 1px solid var(--color-DDD);
}
.btn-secondary:hover {
transform: translateY(-2px);
border-color: var(--color-lime-base);
color: var(--color-lime-base);
box-shadow: var(--shadow-hover);
}
/* ==========================================================
③ OUTLINE LIME – Between Primary & Secondary
========================================================== */
.btn-outline-lime {
background: var(--color-FFF);
color: var(--color-lime-dark);
border: 2px solid var(--color-lime-base);
}
.btn-outline-lime:hover {
transform: translateY(-3px);
background: var(--color-lime-tint);
color: var(--color-lime-darker);
border-color: var(--color-lime-dark);
box-shadow: var(--shadow-hover);
}
/* ==========================================================
③ ACCENT – Yellow / Gold
========================================================== */
.btn-accent {
background: linear-gradient(135deg,
var(--color-yellow-base),
var(--color-yellow-dark));
color: var(--color-FFF);
border: none;
}
.btn-accent:hover {
transform: translateY(-3px);
background: linear-gradient(135deg,
var(--color-yellow-light),
var(--color-yellow-base));
box-shadow: var(--shadow-hover);
}
/* ==========================================================
SIZE OPTIONS（任意）
========================================================== */
.btn-sm {
padding: 0.6rem 2rem 0.6rem 1.4rem;
font-size: var(--fs-sm);
}
.btn-lg {
padding: 1rem 3rem 1rem 2rem;
font-size: var(--fs-lg);
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 959px) {
.btn {
padding: 0.7rem 2rem 0.7rem 1.4rem;
font-size: 0.9rem;
}
}
/* ==========================================================
LOGIN AREA
========================================================== */
.login-wrap {
display: flex;
justify-content: center;
}
.btn-logout {
background: #666;
color: #fff;
}
.btn-logout:hover {
background: #444;
}
/* ==========================================================
FILE LINK ICONS
========================================================== */
.wp-block-file:not(.wp-element-button) {
font-size: var(--fs-base);
margin: 0 0 1.6em;
}
/* common */
.entry-content a[href$=".pdf"],
.entry-content a[href$=".doc"],
.entry-content a[href$=".docx"],
.entry-content a[href$=".xls"],
.entry-content a[href$=".xlsx"],
.entry-content a[href$=".ppt"],
.entry-content a[href$=".pptx"],
.entry-content a[href$=".zip"],
.entry-content a[href$=".jpg"],
.entry-content a[href$=".png"],
.entry-content a[href$=".txt"],
.entry-content a[href$=".mp4"],
.entry-content a[href$=".mp3"] {
position: relative;
padding-left: 1.5rem;
}
/* icon base */
.entry-content a[href$=".pdf"]::before,
.entry-content a[href$=".doc"]::before,
.entry-content a[href$=".docx"]::before,
.entry-content a[href$=".xls"]::before,
.entry-content a[href$=".xlsx"]::before,
.entry-content a[href$=".ppt"]::before,
.entry-content a[href$=".pptx"]::before,
.entry-content a[href$=".zip"]::before,
.entry-content a[href$=".jpg"]::before,
.entry-content a[href$=".png"]::before,
.entry-content a[href$=".txt"]::before,
.entry-content a[href$=".mp4"]::before,
.entry-content a[href$=".mp3"]::before {
content: "";
position: absolute;
left: 0;
top: 0.15em;
width: 1.2em;
height: 1.2em;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/* extension icons */
.entry-content a[href$=".pdf"]::before {
background-image: url("../icons/pdf.svg");
}
.entry-content a[href$=".doc"]::before,
.entry-content a[href$=".docx"]::before {
background-image: url("../icons/doc.svg");
}
.entry-content a[href$=".xls"]::before,
.entry-content a[href$=".xlsx"]::before {
background-image: url("../icons/xls.svg");
}
.entry-content a[href$=".ppt"]::before,
.entry-content a[href$=".pptx"]::before {
background-image: url("../icons/ppt.svg");
}
.entry-content a[href$=".zip"]::before {
background-image: url("../icons/zip.svg");
}
.entry-content a[href$=".jpg"]::before,
.entry-content a[href$=".png"]::before {
background-image: url("../icons/img.svg");
}
.entry-content a[href$=".mp4"]::before {
background-image: url("../icons/vid.svg");
}
.entry-content a[href$=".txt"]::before {
background-image: url("../icons/txt.svg");
}
/* internal links */
.entry-content a[href^="/"],
.entry-content a[href*="example.com"] {
color: var(--color-blue-base);
text-decoration: underline;
}
/* external icon */
a.is-external-link .external-link-icon {
display: inline-block;
width: 0.85em;
height: 0.85em;
margin-left: .2em;
vertical-align: -0.1em;
opacity: .7;
background: url("../icons/ext.svg") no-repeat center / contain;
}
/* 外部リンクアイコンを無効化 */
.journal-bottom-link.no-external-icon .external-link-icon {
display: none !important;
}
/* ==========================================================
HEADER LOGO
========================================================== */
/* PC */
.site-header {
display: none;
}
.h1-logo {
height: auto;
padding: 25px 12px 20px;
margin: 0;
width: 267px;
}
.sp-logo {
display: none;
}
.lang-switch {
font-size: 0.85rem;
display: flex;
align-items: center;
gap: 6px;
padding: 0.3rem 1rem;
}
/* デフォルト：薄く */
.lang-switch a {
text-decoration: none;
color: #333;
opacity: 0.4;
transition: 0.2s;
}
/* アクティブ：濃く */
.lang-switch a.active {
opacity: 1;
color: var(--color-lime);
border-bottom: 2px solid var(--color-lime);
font-weight: 600;
}
/* hover */
.lang-switch a:hover {
opacity: 0.7;
}
@media (max-width:959px) {
.site-header {
display: block;
position: relative;
min-height: 70px;
}
.sp-logo {
display: block;
margin: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 250px;
}
.sidebar .h1-logo {
display: none;
}
}
/* ==========================================================
Search
========================================================== */
.site-search,
.sp-search {
padding: 0 1rem 1.4rem;
margin-top: 1rem;
}
.site-search-form,
.site-search form,
.sp-search form {
display: flex;
align-items: center;
gap: .5rem;
width: 100%;
padding: .45rem;
border: 1px solid rgba(0, 0, 0, .06);
border-radius: 999px;
background: rgba(255, 255, 255, .92);
box-shadow: 0 4px 14px rgba(0, 0, 0, .04);
backdrop-filter: blur(10px);
}
.site-search-input {
min-width: 0;
width: 100%;
border: none;
background: transparent;
padding: .55em .2em .55em .7em;
font-size: var(--fs-sm);
color: var(--color-333);
}
.site-search-input:focus {
outline: none;
}
.site-search-input::placeholder {
color: var(--color-888);
}
.site-search-button {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.4rem;
height: 2.4rem;
border: none;
border-radius: 999px;
background: var(--color-lime-base);
color: #fff;
cursor: pointer;
transition: .25s ease;
}
.site-search-button:hover {
background: var(--color-lime-dark);
transform: translateY(-1px);
}
/* ==========================================================
SP
========================================================== */
@media (max-width: 959px) {
.sp-search {
padding: 1rem 1.2rem 1.4rem;
margin-top: 0;
}
.sp-search .site-search-form,
.sp-search form {
background: #fff;
border-color: var(--color-DDD);
box-shadow: none;
}
.sp-search .site-search-button {
width: 2.2rem;
height: 2.2rem;
}
.sp-search .site-search-button svg {
width: 16px;
height: 16px;
}
}
/* ==========================================================
検索結果ページ
========================================================== */
.search-results-list {
display: grid;
gap: 1rem;
}
.search-result-card {
display: block;
padding: 1.4rem 1.6rem;
background: #fff;
border: 1px solid var(--color-EEE);
box-shadow: var(--shadow-soft);
text-decoration: none;
color: inherit;
}
.search-result-card:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-2px);
}
.search-result-card h2 {
margin: 0 0 .4rem !important;
padding: 0 !important;
background: none !important;
border: none !important;
font-size: var(--fs-lg) !important;
color: var(--color-lime-dark);
}
.search-result-date {
font-size: var(--fs-sm);
color: var(--color-888);
}
.search-result-excerpt {
margin-top: .6rem;
color: var(--color-666);
}
/* ================================
Footer Base（最重要）
================================= */
.footer {
background: var(--color-lime-blackish);
color: #fff;
padding: 4rem 4% 0 4%;
}
/* グローバルa対策（これが本質） */
.footer a {
color: inherit;
text-decoration: none;
}
/* hover */
.footer a:hover {
opacity: .8;
}
/* ================================
Layout（縦構造）
================================= */
.footer_top,
.footer_bottom {
max-width: 1100px;
margin: 0 auto;
}
/* メニュー（上） */
.footer_top {}
/* 横並び */
.footer-menu {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
margin-bottom: 6rem;
}
/* 親メニュー */
.footer-menu>li>a {
font-weight: 600;
font-size: 1rem;
margin-bottom: .6rem;
display: inline-block;
color: #fff;
}
/* 親リンクを無効化 */
.footer .menu-item-has-children>a {
pointer-events: none;
cursor: default;
}
/* サブメニューを常に表示 */
.footer .sub-menu {
display: block;
}
.footer-menu>li>a {
position: relative;
padding-left: .8rem;
}
.footer-menu>li>a::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 2px;
height: 14px;
background: var(--color-lime-base);
transform: translateY(-50%);
}
/* 子メニュー */
.footer-menu .sub-menu a {
font-weight: 400;
font-size: 0.9rem;
opacity: 0.8;
display: block;
padding: 0.2rem 0 0.5rem 0;
margin-left: 0.85rem;
border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.footer-menu .sub-menu a:hover {
opacity: 1;
transform: translateX(3px);
}
.footer-menu .sub-menu li+li {
margin-top: .3rem;
}
/* ================================
フッター下部 横並び
================================= */
.footer_bottom {
border-top: 1px solid rgba(255, 255, 255, .14);
padding-top: 1.5rem;
padding-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 1.8rem;
}
/* ロゴ */
.footer-logo {
margin: 0;
flex-shrink: 0;
}
.footer-logo img {
width: 150px;
height: auto;
display: block;
}
/* テキスト（右側） */
.footer-text {
display: flex;
flex-direction: column;
justify-content: center;
gap: .3rem;
}
.footer-name {
margin: 0;
font-size: 1.05rem;
font-weight: 600;
letter-spacing: .03em;
line-height: 1.4;
margin-bottom: .2rem;
}
.footer-name .org-type {
letter-spacing: .05em;
}
/* 一般社団法人（小さく） */
.footer-name .org-type {
font-size: 0.75em;
font-weight: 400;
margin-right: .4em;
}
/* 住所 */
.f_add {
margin: 0;
font-style: normal;
font-size: .95rem;
line-height: 1.7;
opacity: .9;
}
/* コピーライト */
.copyright {
margin: 0;
font-size: .8rem;
opacity: .7;
}
/* ================================
TOPへ戻る
================================= */
.to-top {
position: fixed;
right: 1.5rem;
bottom: 1.5rem;
width: 54px;
height: 54px;
border-radius: 50%;
/* 白背景でも見える設計 */
border: 1.5px solid rgba(0, 0, 0, .2);
background: rgba(255, 255, 255, .85);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all .3s ease;
z-index: 999;
}
/* 表示 */
.to-top.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* 矢印（黒系） */
.to-top::before {
content: "";
width: 10px;
height: 10px;
border-top: 2px solid #333;
border-left: 2px solid #333;
transform: rotate(45deg);
}
/* hover */
.to-top:hover {
background: rgba(255, 255, 255, 1);
border-color: rgba(0, 0, 0, .35);
transform: translateY(-2px);
}
/* ================================
Responsive
================================= */
@media (max-width: 959px) {
.footer-menu {
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
padding: 0rem 2% 0 2%;
}
.footer_top {
margin-bottom: 2rem;
}
.footer_bottom {
text-align: center;
padding-top: 1.5rem;
}
.footer_bottom {
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
}
.footer-logo img {
width: 180px;
}
.footer-text {
gap: .4rem;
}
}
/* =========================================
リニューアルのお知らせ
========================================= */
.renewal-notice {
padding: 24px 20px;
background: #f7fbef;
}
.renewal-notice__inner {
max-width: 1080px;
margin: 0 auto;
padding: 26px 30px;
border: 1px solid #d9edbd;
border-radius: 14px;
background: #fff;
}
.renewal-notice__label {
display: inline-block;
margin: 0 0 10px;
padding: 4px 12px;
border-radius: 999px;
background: #eafbd9;
color: #1f6f4a;
font-size: 0.85rem;
font-weight: 700;
}
.renewal-notice__title {
margin: 0 0 12px;
color: #1f6f4a;
font-size: 1.4rem;
line-height: 1.5;
}
.renewal-notice__text {
margin: 0 0 18px;
line-height: 1.8;
}
.renewal-notice__button {
display: inline-block;
padding: 10px 22px;
border-radius: 999px;
background: #6fb90b;
color: #fff;
font-weight: 700;
text-decoration: none;
}
.renewal-notice__button:hover {
background: #379156;
}
@media (max-width: 767px) {
.renewal-notice {
padding: 18px 14px;
}
.renewal-notice__inner {
padding: 22px 18px;
}
.renewal-notice__title {
font-size: 1.2rem;
}
}
/* =========================================
ログインページ
========================================= */
#wpmem_login legend,
#wpmem_reg legend {
display: none;
}
/* =========================================
メインビジュアルスライド
========================================= */
/* スライド画像 */
.swiper-slide img {
width: 100%;
height: auto;
object-fit: cover;
}
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next {
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--color-white-alpha30);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: background .2s ease;
box-shadow: var(--shadow-soft);
transition: var(--transition-smooth);
}
.hero-swiper .swiper-button-prev:hover,
.hero-swiper .swiper-button-next:hover {
background: var(--color-lime-base);
box-shadow: var(--shadow-hover);
}
.hero-swiper .swiper-button-prev::after,
.hero-swiper .swiper-button-next::after {
font-size: 1rem;
color: var(--color-FFF);
font-weight: 700;
}
.hero-swiper .swiper-button-prev::after {
transform: translateX(-0.1rem);
}
.hero-swiper .swiper-button-next::after {
transform: translateX(0.1rem);
}
.hero-swiper .swiper-button-prev:hover::after,
.hero-swiper .swiper-button-next:hover::after {
color: var(--color-FFF);
}
.hero-swiper .swiper-pagination {
bottom: 1rem !important;
}
.hero-swiper .swiper-pagination-bullet {
width: 0.7rem;
height: 0.7rem;
background: var(--color-FFF);
opacity: 0.5;
transition: all .3s ease;
}
.hero-swiper .swiper-pagination-bullet-active {
background: var(--color-lime-light);
opacity: 1;
transform: scale(1.3);
box-shadow: var(--shadow-soft);
}
@media (max-width: 959px) {
.hero-swiper .swiper-pagination {
display: none;
}
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next {
z-index: 20;
pointer-events: auto;
}
.hero-swiper .swiper-slide a {
position: relative;
z-index: 1;
}
}
/* ================================
Floating Membership
================================= */
/* 初期状態（非表示） */
.floating-membership-wrap {
position: fixed;
top: 5rem;
right: 0;
z-index: 999;
transform: translateX(100%);
opacity: 0;
transition: transform .35s ease, opacity .35s ease;
}
/* 表示状態 */
.floating-membership-wrap.is-visible {
transform: translateX(0);
opacity: 1;
}
/* ボタン本体 */
.floating-membership {
padding: 1rem 2rem;
min-width: 160px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: var(--fs-base);
font-weight: 700;
letter-spacing: .05em;
text-decoration: none;
border-radius: 10px 0 0 10px;
color: var(--color-FFF);
background: linear-gradient(135deg,
var(--color-lime-base),
var(--color-lime-dark));
box-shadow:
0 1px 2px rgba(0, 0, 0, .04),
0 10px 24px rgba(0, 0, 0, .08);
transition:
transform .3s cubic-bezier(.4, 0, .2, 1),
box-shadow .3s cubic-bezier(.4, 0, .2, 1),
border-color .3s ease;
}
.floating-membership::after {
content: '';
position: absolute;
top: 50%;
right: 1.2rem;
width: 7px;
height: 7px;
border-top: 2px solid var(--color-FFF);
border-right: 2px solid var(--color-FFF);
transform: translateY(-50%) rotate(45deg);
transition: right 0.2s ease;
}
/* hover時 */
.floating-membership:hover::after {
right: 0.7rem;
}
/* ホバー */
.floating-membership:hover {
background: linear-gradient(135deg,
var(--color-lime-light),
var(--color-lime-base));
color: var(--color-FFF);
transform: translateY(-4px);
box-shadow:
0 4px 12px rgba(0, 0, 0, .08),
0 20px 40px rgba(0, 0, 0, .14);
}
@media (max-width: 959px) {
.floating-membership-wrap {
top: 2rem;
}
.floating-membership {
padding: 1rem 2rem;
font-size: 0.85rem;
min-width: 140px;
}
}
/* ==========================================================
HERO
========================================================== */
.hero {
position: relative;
overflow: hidden;
}
/* 画像 */
.hero_media img {
width: 100%;
height: 350px;
object-fit: cover;
object-position: right center;
/* PC：手を右に見せる */
display: block;
}
/* 読みやすさ用オーバーレイ */
.hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg,
rgba(255, 255, 255, 0.92) 0%,
rgba(255, 255, 255, 0.75) 50%,
rgba(255, 255, 255, 0.15) 100%);
}
/* テキスト配置 */
.hero_inner {
position: absolute;
inset: 0;
display: flex;
align-items: center;
padding: 60px;
z-index: 1;
}
.hero_copy {
font-family:
"Noto Serif JP",
"Yu Mincho",
"Hiragino Mincho ProN",
"MS PMincho",
serif;
font-size: var(--fs-xl);
}
/* 本文 */
.hero_text {
font-size: var(--fs-xl);
font-family: inherit;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
letter-spacing: .03em;
text-align: left;
}
.hero_text span {
opacity: 0;
display: inline-block;
}
@media (max-width: 959px) {
/* 画像：縦長にする */
.hero__media img {
height: 500px;
object-position: right 90%;
/* ← 右側を優先 */
}
/* オーバーレイ方向変更（縦） */
.hero::after {
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(255, 255, 255, 0.80) 55%,
rgba(255, 255, 255, 0.25) 100%);
}
.sp-br {
display: inline;
}
.hero_inner {
justify-content: center;
padding: 1.5rem;
}
.hero_copy {
text-align: center;
font-family:
"Noto Serif JP",
"Yu Mincho",
"Hiragino Mincho ProN",
serif;
}
.hero_text {
text-align: center;
font-size: var(--fs-lg);
}
}
@keyframes fadeInSoft {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 1行目 */
.hero.is-animated .hero_text span:nth-of-type(1) {
animation: fadeInSoft 1.2s ease-out forwards;
animation-delay: 0.4s;
}
/* 2行目 */
.hero.is-animated .hero_text span:nth-of-type(2) {
animation: fadeInSoft 1.2s ease-out forwards;
animation-delay: 0.9s;
}
/* 3行目 */
.hero.is-animated .hero_text span:nth-of-type(3) {
animation: fadeInSoft 1.2s ease-out forwards;
animation-delay: 1.4s;
}
/* 4行目 */
.hero.is-animated .hero_text span:nth-of-type(4) {
animation: fadeInSoft 1.2s ease-out forwards;
animation-delay: 1.9s;
}
/* 5行目 */
.hero.is-animated .hero_text span:nth-of-type(5) {
animation: fadeInSoft 1.2s ease-out forwards;
animation-delay: 2.4s;
}
/* ==========================================================
フロントページ
========================================================== */
.home .section-title {
font-family: var(--font-serif);
font-size: var(--fs-2xl);
font-weight: 600;
letter-spacing: .04em;
line-height: 1.4;
margin: 0 0 2rem;
}
/* 静かなブランドライン */
/* 小ラベル */
.home .section-sub {
display: block;
font-size: 0.9rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--color-lime-base);
margin-bottom: .4rem;
}
.section-title .section-sub,
.section-title .journal-en-title {
display: block;
}
.journal-en-title {
margin-top: .25rem;
font-size: var(--fs-sm);
font-weight: 400;
line-height: 1.6;
letter-spacing: .03em;
color: var(--color-666);
font-style: italic;
}
@media (max-width: 959px) {
.home .section-title {
text-align: center;
}
/* ← これを追加 */
.home .section-title::after {
margin-left: auto;
margin-right: auto;
}
.home .section-sub {
margin-bottom: .5rem;
}
}
/* ==========================================================
SECTION COMMON
========================================================== */
.event_section,
.journal_section,
.news_section,
.pickup_section,
.membership-section {
width: 100%;
padding: 3rem 3% 3rem;
}
@media screen and (max-width: 959px) {
.event_section,
.journal_section,
.news_section,
.pickup_section,
.membership-section {
padding: 3rem 5% 3rem;
}
}
/* ==========================================================
SECTION HEAD COMMON
========================================================== */
.section_head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
}
.section_head .section-title {
margin-bottom: 0;
}
@media screen and (max-width: 959px) {
.section_head {
display: block;
text-align: center;
}
.section_head .section_more {
margin-top: .75rem;
justify-content: center;
}
}
/* ==========================================================
EVENT SECTION
========================================================== */
.event-slider {
display: flex;
gap: 1.6rem;
}
/* --- Card --- */
.event-item {
max-width: 400px;
background: var(--color-FFF);
overflow: hidden;
border: 1px solid var(--color-EEE);
box-shadow: var(--shadow-soft);
transition: var(--transition-smooth);
}
.event-item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-hover);
}
/* --- Link --- */
.event-link {
display: block;
height: 100%;
color: inherit;
text-decoration: none;
}
/* --- Thumbnail --- */
.event-thumb img {
width: 100%;
object-fit: cover;
display: block;
background: var(--color-EEE);
}
/* --- Body --- */
.event-body {
padding: .9rem 1rem 1.2rem;
text-align: center;
}
/* Date */
.event-date {
color: var(--color-cat-important);
font-weight: bold;
font-size: var(--fs-base);
}
/* Title */
.event-title {
color: var(--color-333);
font-size: var(--fs-base);
margin: 0.2rem 0 0 0;
}
/* Venue */
.event-venue {
color: var(--color-333);
font-size: var(--fs-sm);
margin: 0.2rem 0 0 0;
}
/* Focus（アクセシビリティ） */
.event-link:focus-visible {
outline-offset: 4px;
}
@media (max-width: 959px) {
.event-slider {
display: flex;
/* 明示 */
flex-direction: column;
/* ← 縦並び */
gap: 1.2rem;
}
.event-item {
width: 100%;
/* 横幅いっぱい */
max-width: none;
/* 400px制限解除 */
flex: none;
}
.event-body {
padding: .9rem 1rem 1.2rem;
}
.event-date {
font-size: .7rem;
margin-bottom: .35rem;
}
.event-title {
font-size: .9rem;
}
.event-venue {
font-size: .75rem;
}
}
/*--------------------------------------ここからリニューアル*/
.event_list{
margin: 1rem 0rem;
}
.event_more::after {
content: "›";
font-size: 1.2em;
line-height: 1;
}
.event_item {
display: grid;
grid-template-columns: 90px 170px 1fr 20px;
align-items: center;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid #dbe8cf;
color: inherit;
text-decoration: none;
}
.event_tag {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 70px;
padding: .35rem .8rem;
border-radius: 6px;
color: #fff;
font-size: .8rem;
font-weight: 700;
line-height: 1;
letter-spacing: .05em;
}
.event_tag.jslr {
background: linear-gradient(135deg, #9adf2d, #61b500);
}
.event_tag.jsla {
background: linear-gradient(135deg, #27b3ff, #0077cc);
}
.event_status {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .3rem .7rem;
border-radius: 999px;
font-size: .7rem;
font-weight: 700;
line-height: 1;
}
.event_status.finished {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .3rem .65rem;
border-radius: 999px;
background: #f1f5f9;
color: #64748b;
font-size: .7rem;
font-weight: 700;
line-height: 1;
}
.event_item.is_finished {
opacity: .72;
}
.event_status.upcoming {
background: #eef8e2;
color: #4f8f00;
}
.event_status.finished {
background: #f1f5f9;
color: #64748b;
}
.event_date {
padding-left: 1rem;
border-left: 1px solid #dbe8cf;
}
.event_year {
font-size: .75rem;
font-weight: 700;
line-height: 1;
color: #666;
margin-bottom: .3rem;
}
.event_day_wrap {
display: flex;
align-items: center;
gap: .4rem;
}
.event_day {
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
color: #111;
letter-spacing: .02em;
}
.event_week {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.8em;
height: 1.8em;
border-radius: 50%;
background: #6bbd00;
color: #fff;
font-size: .72rem;
font-weight: 700;
line-height: 1;
}
.event_week.sun {
background: #dc2626;
}
.event_week.sat {
background: #0ea5e9;
}
.event_body h3 {
margin: 0;
font-size: clamp(1rem, 1.3vw, 1.15rem);
font-weight: 700;
line-height: 1.6;
}
.event_meta {
margin-top: .25rem;
font-size: .8rem;
color: #666;
}
.event_arrow {
color: #5ca800;
font-size: 1.8rem;
line-height: 1;
text-align: right;
}
.event_item:hover h3 {
color: #5ca800;
}
@media screen and (max-width: 959px) {
.event_item {
grid-template-columns: 70px 140px 1fr;
gap: .75rem;
padding: .9rem 0;
}
.event_arrow {
display: none;
}
.event_date {
padding-left: .75rem;
}
.event_body h3 {
font-size: .95rem;
}
}
@media screen and (max-width: 560px) {
.event_item {
grid-template-columns: 1fr;
gap: .45rem;
}
.event_date {
border-left: none;
padding-left: 0;
}
.event_day {
font-size: 1rem;
}
}
/* ========================================
イベント一覧
======================================== */
.event_archive_section {
width: 100%;
padding: 3rem 3%;
}
.event_archive_header {
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid #dbe8cf;
}
.event_archive_en {
margin: 0 0 .3rem;
color: #5ca800;
font-size: clamp(2rem, 4vw, 3.2rem);
font-weight: 700;
letter-spacing: .12em;
line-height: 1;
}
.event_archive_title {
margin: 0;
font-size: clamp(1.3rem, 2vw, 1.8rem);
line-height: 1.5;
}
.event_archive_lead {
margin-top: .8rem;
font-size: .95rem;
line-height: 1.8;
color: #555;
}
.event_archive_list {
width: 100%;
}
.event_archive_item {
display: grid;
grid-template-columns: 150px 170px 1fr 24px;
align-items: center;
gap: 1.2rem;
padding: 1.35rem 0;
border-bottom: 1px solid #dbe8cf;
color: inherit;
text-decoration: none;
}
.event_archive_item:hover h2 {
color: #5ca800;
}
.event_archive_tags {
display: flex;
flex-wrap: wrap;
gap: .4rem;
}
.event_tag {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 70px;
padding: .35rem .8rem;
border-radius: 6px;
color: #fff;
font-size: .8rem;
font-weight: 700;
line-height: 1;
letter-spacing: .05em;
}
.event_tag.jslr {
background: linear-gradient(135deg, #9adf2d, #61b500);
}
.event_tag.jsla {
background: linear-gradient(135deg, #27b3ff, #0077cc);
}
.event_status {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .35rem .7rem;
border-radius: 6px;
background: #eef7e5;
color: #5ca800;
font-size: .75rem;
font-weight: 700;
line-height: 1;
}
.event_archive_item.is_finished .event_status {
background: #f1f5f9;
color: #64748b;
}
.event_archive_item.is_finished {
opacity: .78;
}
.event_archive_date {
padding-left: 1rem;
border-left: 1px solid #dbe8cf;
font-size: 1rem;
font-weight: 700;
color: #111;
line-height: 1.5;
}
.event_archive_body h2 {
margin: 0;
font-size: clamp(1rem, 1.4vw, 1.2rem);
font-weight: 700;
line-height: 1.6;
transition: color .2s ease;
}
.event_archive_body p {
margin: .25rem 0 0;
font-size: .85rem;
color: #666;
}
.event_archive_arrow {
color: #5ca800;
font-size: 1.8rem;
line-height: 1;
text-align: right;
}
.event_archive_empty {
padding: 2rem;
background: #f7fbf2;
border: 1px solid #dbe8cf;
border-radius: 8px;
}
@media screen and (max-width: 959px) {
.event_archive_section {
padding: 3rem 5%;
}
.event_archive_item {
grid-template-columns: 120px 140px 1fr;
gap: .8rem;
}
.event_archive_arrow {
display: none;
}
}
@media screen and (max-width: 600px) {
.event_archive_item {
grid-template-columns: 1fr;
gap: .55rem;
padding: 1.2rem 0;
}
.event_archive_date {
border-left: none;
padding-left: 0;
}
}
.event_filter {
display: grid;
grid-template-columns: 1fr 160px 180px auto;
gap: .8rem;
margin: 2rem 0;
padding: 1rem;
background: #f7fbf2;
border: 1px solid #dbe8cf;
border-radius: 10px;
}
.event_filter input,
.event_filter select {
width: 100%;
height: 42px;
padding: 0 .8rem;
border: 1px solid #ccd8c5;
border-radius: 6px;
background: #fff;
}
.event_filter button {
height: 42px;
padding: 0 1.3rem;
border: none;
border-radius: 6px;
background: #6bbd00;
color: #fff;
font-weight: 700;
cursor: pointer;
}
@media screen and (max-width: 768px) {
.event_filter {
grid-template-columns: 1fr;
}
}
/* ========================================
Journal Section
======================================== */
.journal-section {
width: 100%;
padding: 3rem 3% 3rem;
}
.journal-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 1em;
}
/* SP対応（狭いときは下に落とす） */
@media (max-width: 600px) {
.journal-header {
flex-direction: column;
align-items: flex-start;
gap: .4em;
}
}
.journal-list {
display: grid;
gap: 1rem;
}
.journal-card {
position: relative;
display: grid;
grid-template-columns: 1fr auto 32px;
align-items: center;
gap: 1.5rem;
padding: 1.5rem 1.5rem 1.5rem 1.8rem;
background:
linear-gradient(135deg, rgba(111, 185, 11, .08), rgba(255,255,255,0) 55%),
#fff;
border: 1px solid rgba(111, 185, 11, .22);
border-radius: 14px;
color: inherit;
text-decoration: none;
box-shadow: 0 8px 24px rgba(0,0,0,.04);
transition: .25s ease;
overflow: hidden;
}
.journal-card:hover {
transform: translateY(-2px);
box-shadow: 0 14px 34px rgba(0,0,0,.08);
border-color: var(--color-lime-base);
}
.journal-card-label {
display: inline-flex;
margin-bottom: .6rem;
color: var(--color-lime-base);
font-size: .72rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.journal-card-volume {
display: flex;
align-items: baseline;
gap: .8rem;
}
.journal-vol {
font-family: var(--font-serif);
font-size: clamp(1.8rem, 2vw, 2.6rem);
font-weight: 600;
line-height: 1;
color: var(--color-333);
}
.journal-no {
font-size: 1rem;
font-weight: 700;
color: var(--color-666);
}
.journal-card-meta {
padding-left: 1.2rem;
border-left: 1px solid #dbe8cf;
}
.journal-card-meta-label {
display: block;
margin-bottom: .2rem;
font-size: .72rem;
font-weight: 700;
color: var(--color-666);
}
.journal-card-date {
font-size: .95rem;
font-weight: 700;
color: var(--color-333);
}
.journal-card-arrow {
color: var(--color-lime-base);
font-size: 2rem;
line-height: 1;
transition: transform .2s ease;
}
.journal-card:hover .journal-card-arrow {
transform: translateX(4px);
}
@media screen and (max-width: 600px) {
.journal-card {
grid-template-columns: 1fr 24px;
gap: .8rem;
padding: 1.25rem;
}
.journal-card-meta {
grid-column: 1 / -1;
grid-row: 2;
padding-left: 0;
border-left: none;
}
.journal-card-arrow {
grid-column: 2;
grid-row: 1;
}
}
/* ========================================
Bottom Links
======================================== */
.journal-bottom-links {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin-top: 2rem;
border: 1px solid rgba(127, 160, 0, 0.22);
border-radius: 18px;
overflow: hidden;
background: #fcfcf8;
}
.journal-bottom-link {
display: flex;
align-items: center;
gap: 1rem;
min-height: 126px;
padding: 1.5rem;
color: #1f2b21;
text-decoration: none;
border-right: 1px solid rgba(127, 160, 0, 0.16);
transition: background .2s ease, color .2s ease;
}
.journal-bottom-link:last-child {
border-right: none;
}
.journal-bottom-link:hover {
background: rgba(157, 188, 44, 0.08);
}
.journal-link-icon {
flex: 0 0 54px;
color: var(--color-lime-dark, #7fa000);
}
.journal-link-icon svg {
width: 54px;
height: 54px;
display: block;
}
.journal-link-text {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.journal-link-text strong {
font-size: 1.15rem;
font-weight: 600;
color: #1f2b21;
}
.journal-link-text small {
font-size: 0.95rem;
line-height: 1.7;
color: #596159;
}
/* 右矢印（全リンク共通） */
.journal-bottom-link {
position: relative;
display: flex;
align-items: center;
padding-right: 2rem;
/* 矢印分の余白 */
}
/* 矢印 */
.journal-bottom-link::after {
content: "›";
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
font-size: 2rem;
line-height: 1;
color: var(--color-lime-base);
transition: transform .2s ease, opacity .2s ease;
}
/* hover */
.journal-bottom-link:hover::after {
transform: translateY(-50%) translateX(4px);
opacity: .8;
}
/* ========================================
Responsive
======================================== */
@media (max-width: 1100px) {
.journal-card {
grid-template-columns: 120px 1fr 190px 100px;
}
.journal-paper-title {
font-size: 1.55rem;
}
.journal-bottom-links {
grid-template-columns: 1fr 1fr;
}
.journal-bottom-link:nth-child(2) {
border-right: none;
}
.journal-bottom-link:nth-child(-n+2) {
border-bottom: 1px solid rgba(127, 160, 0, 0.16);
}
}
@media (max-width: 767px) {
.journal-section {}
.journal-head {
grid-template-columns: 1fr;
gap: 1.5rem;
margin-bottom: 2.5rem;
}
.journal-head-mark {
display: none;
}
.journal-description {
font-size: 1rem;
line-height: 1.9;
}
.journal-card {
grid-template-columns: 1fr;
gap: 1rem;
padding: 1.25rem;
}
.journal-card::before {
top: 14px;
bottom: 14px;
}
.journal-card-volume,
.journal-card-meta,
.journal-card-link {
padding-right: 0;
}
.journal-card-volume::after,
.journal-card-meta::after {
display: none;
}
.journal-vol {
font-size: 1.4rem;
}
.journal-no,
.journal-year {
display: inline-block;
margin-top: 0;
margin-right: 0.8rem;
}
.journal-paper-title {
font-size: 1.25rem;
}
.journal-authors {
margin-top: 0.7rem;
font-size: 0.95rem;
}
.journal-card-link {
justify-content: flex-start;
}
.journal-bottom-links {
grid-template-columns: 1fr;
}
.journal-bottom-link {
min-height: auto;
border-right: none;
border-bottom: 1px solid rgba(127, 160, 0, 0.16);
}
.journal-bottom-link:last-child {
border-bottom: none;
}
}
/* ==========================================================
NEWS TABS
========================================================== */
.tabs {
padding-bottom: 0;
background: var(--color-FFF);
width: 100%;
margin: 1rem 0rem;
}
.tab_item {
width: calc(100% / 5);
height: 45px;
line-height: 45px;
float: left;
text-align: center;
font-size: var(--fs-base);
font-weight: 500;
background: var(--color-EEE);
color: var(--color-333);
/* ▼ 追加ポイント */
border: 1px solid var(--color-DDD);
border-bottom: none;
/* 下はコンテンツと接続 */
border-radius: 8px 8px 0 0;
/* 上だけ丸く */
box-sizing: border-box;
cursor: pointer;
transition:
background-color .2s ease,
color .2s ease,
opacity .2s ease,
transform .15s ease;
}
.tab_item:hover {
opacity: .85;
}
.tabs input:checked+.tab_item {
color: #fff;
position: relative;
z-index: 2;
/* transform は使わない */
box-shadow: 0 6px 14px rgba(0, 0, 0, .14);
}
.tab_item+.tab_item {
margin-left: -1px;
/* ← 境界線を1本に見せる */
}
/* ===== すべて ===== */
#all:checked+.tab_item {
background: var(--color-lime-base);
color: #fff;
}
/* ===== 重要 ===== */
#important:checked+.tab_item {
background: var(--color-cat-important);
color: #fff;
}
/* ===== 会員 ===== */
#member:checked+.tab_item {
background: var(--color-cat-member);
color: #fff;
}
/* ===== JCEH ===== */
#jceh:checked+.tab_item {
background: var(--color-cat-research);
color: #fff;
}
/* ===== 更新情報 ===== */
#update:checked+.tab_item {
background: var(--color-cat-public);
color: #fff;
}
input[name="tab_item"] {
display: none;
}
/* 重要タブが選択中のとき */
#important:checked~#important_content:hover::before {
background: color-mix(in srgb, var(--color-cat-important) 15%, transparent);
}
/* 会員 */
#member:checked~#member_content:hover::before {
background: color-mix(in srgb, var(--color-cat-member) 15%, transparent);
}
/* JCEH */
#jceh:checked~#jceh_content:hover::before {
background: color-mix(in srgb, var(--color-cat-research) 15%, transparent);
}
/* 更新 */
#update:checked~#update_content:hover::before {
background: color-mix(in srgb, var(--color-cat-public) 15%, transparent);
}
/* ---------- News row ---------- */
.tab_content {
display: none;
/* フロント：タブ制御 */
padding: 0px 0px 0;
clear: both;
overflow: hidden;
width: 100%;
padding-left: 2%;
padding-right: 2%;
border-bottom: 1px solid var(--color-DDD);
position: relative;
/* hover演出用 */
}
/* フロント：選択中タブのみ表示 */
#all:checked~#all_content,
#important:checked~#important_content,
#member:checked~#member_content,
#jceh:checked~#jceh_content,
#update:checked~#update_content {
display: block;
}
/* アーカイブ：常に表示 */
.past-news-item.tab_content {
display: block;
}
.tab_content {
transition: color .2s ease;
}
.tab_content a:focus-visible .c-txtsp {
color: var(--color-lime-base);
outline: none;
}
.permalink:hover .c-txtsp {
color: var(--color-lime-base);
}
/* ---------- Inner layout ---------- */
.tab_content_description_01 {
display: flex;
flex-direction: column;
flex-wrap: wrap;
padding: 0.5rem 0rem;
color: var(--color-333);
}
.tab_cont_top {
display: flex;
flex-direction: row;
height: 1.2rem;
}
/* ---------- Date ---------- */
.day {
color: var(--color-888);
font-size: var(--fs-sm);
padding: 2px 0px;
width: 75px;
margin-right: 1rem;
}
/* ---------- Title ---------- */
.c-txtsp,
.c-txtsp:visited {
margin-top: 0.5rem;
margin-bottom: 0px;
font-size: var(--fs-base);
cursor: pointer;
color: var(--color-333);
text-decoration: none;
}
/* =========================
News Category Label
========================= */
.category_name {
display: inline-flex;
align-items: center;
justify-content: center;
height: 1.3rem;
padding: 0 10px;
font-size: var(--fs-sm);
line-height: 1;
border-radius: 13px;
font-weight: 500;
white-space: nowrap;
color: #fff;
/* ← 文字は常に白 */
}
/* ===== Important ===== */
.category_name.important {
background: var(--color-cat-important);
}
/* ===== Member ===== */
.category_name.member {
background: var(--color-cat-member);
}
/* ===== JCEH ===== */
.category_name.jceh {
background: var(--color-cat-research);
}
/* ===== Update ===== */
.category_name.update {
background: var(--color-cat-public);
}
/* ===== All / その他 ===== */
.category_name.all {
background: var(--color-666);
}
.tab_content:hover .category_name {
filter: brightness(1.05);
}
/* ===== アーカイブ用 ===== */
.past-news-filter .tab_item.all {
background: var(--color-lime-base);
color: #fff;
}
.past-news-filter .tab_item.active {
color: #fff;
position: relative;
z-index: 2;
box-shadow: 0 6px 14px rgba(0, 0, 0, .14);
}
.past-news-filter .tab_item.important.active {
background: var(--color-cat-important);
}
.past-news-filter .tab_item.member.active {
background: var(--color-cat-member);
}
.past-news-filter .tab_item.jceh.active {
background: var(--color-cat-research);
}
.past-news-filter .tab_item.update.active {
background: var(--color-cat-public);
}
.news-year {
margin-top: 2rem;
margin-bottom: .5rem;
font-weight: 700;
font-size: 1.1rem;
}
/* ----------------------------------------
* TOP NEWS
---------------------------------------- */
.news_tabs {
width: 100%;
}
.news_tabs > input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
/* カテゴリ切替ボタン */
.news_filter_button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 80px;
margin: 0 .45rem 1rem 0;
padding: .45rem .9rem;
border-radius: 6px;
background: #eef3ea;
color: #345;
font-size: .8rem;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: .2s ease;
}
.news_filter_button:hover {
background: #dfead6;
}
#news_all:checked ~ label[for="news_all"],
#news_important:checked ~ label[for="news_important"],
#news_member:checked ~ label[for="news_member"],
#news_jceh:checked ~ label[for="news_jceh"],
#news_update:checked ~ label[for="news_update"] {
background: #6bbd00;
color: #fff;
}
.news_panels {
border-top: 1px solid #dbe8cf;
}
.news_panel {
display: none;
}
#news_all:checked ~ .news_panels #panel_all,
#news_important:checked ~ .news_panels #panel_important,
#news_member:checked ~ .news_panels #panel_member,
#news_jceh:checked ~ .news_panels #panel_jceh,
#news_update:checked ~ .news_panels #panel_update {
display: block;
}
/* 一覧 */
.news_list {
width: 100%;
}
.news_item {
display: grid;
grid-template-columns: 110px 140px 1fr 20px;
align-items: center;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid #dbe8cf;
color: inherit;
text-decoration: none;
transition: .2s ease;
}
.news_item:hover .news_title {
color: #5ca800;
}
.news_date {
font-size: .9rem;
font-weight: 700;
color: #333;
white-space: nowrap;
}
.news_cats {
display: flex;
flex-wrap: wrap;
gap: .4rem;
}
/* カテゴリ色：お知らせ一覧と統一 */
.news_cat {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 72px;
padding: .35rem .75rem;
border-radius: 999px;
font-size: .75rem;
font-weight: 700;
line-height: 1;
color: #fff;
}
.news_cat.important {
background: #dc2626;
}
.news_cat.member {
background: #334155;
}
.news_cat.jceh {
background: #009b72;
}
.news_cat.update {
background: #84cc16;
}
.news_cat.news,
.news_cat.notice {
background: #64748b;
}
.news_title {
font-size: 1rem;
font-weight: 700;
line-height: 1.6;
transition: color .2s ease;
}
.news_arrow {
color: #5ca800;
font-size: 1.8rem;
line-height: 1;
text-align: right;
}
.news_empty {
padding: 1.5rem;
background: #f7fbf2;
border: 1px solid #dbe8cf;
border-radius: 8px;
font-size: .95rem;
}
/* SP */
@media screen and (max-width: 959px) {
.news_item {
grid-template-columns: 95px 110px 1fr;
gap: .75rem;
}
.news_arrow {
display: none;
}
.news_title {
font-size: .95rem;
}
}
@media screen and (max-width: 600px) {
.news_filter_button {
min-width: auto;
padding: .45rem .8rem;
font-size: .78rem;
}
.news_item {
grid-template-columns: 1fr;
gap: .45rem;
padding: .9rem 0;
}
.news_cats {
order: -1;
}
.news_date {
font-size: .85rem;
}
}
/* ==========================================================
お知らせ一覧
========================================================== */
.news_archive_section {
width: 100%;
padding: 3rem 3%;
}
.news_archive_header {
margin-bottom: 1.5rem;
}
.news_filter {
display: grid;
grid-template-columns: 1fr 150px 150px auto auto;
gap: .75rem;
margin-bottom: 2rem;
padding: 1rem;
background: #f7fbf2;
border: 1px solid #dbe8cf;
border-radius: 10px;
}
.news_filter input,
.news_filter select {
width: 100%;
height: 42px;
padding: 0 .8rem;
border: 1px solid #ccd8c5;
border-radius: 6px;
background: #fff;
font-size: .9rem;
}
.news_filter button {
height: 42px;
padding: 0 1.4rem;
border: none;
border-radius: 6px;
background: #6bbd00;
color: #fff;
font-weight: 700;
cursor: pointer;
}
.news_filter_reset {
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1rem;
border: 1px solid #ccd8c5;
border-radius: 6px;
color: #555;
text-decoration: none;
font-size: .85rem;
background: #fff;
}
.news_archive_list {
width: 100%;
}
.news_archive_item {
display: grid;
grid-template-columns: 110px 150px 1fr 24px;
align-items: center;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid #dbe8cf;
color: inherit;
text-decoration: none;
}
.news_archive_item:hover .news_archive_title {
color: #5ca800;
}
.news_archive_date {
font-size: .9rem;
font-weight: 700;
color: #333;
}
.news_archive_cats {
display: flex;
flex-wrap: wrap;
gap: .4rem;
}
.news_archive_cat {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 72px;
padding: .35rem .75rem;
border-radius: 999px;
font-size: .75rem;
font-weight: 700;
line-height: 1;
color: #fff;
}
.news_archive_cat.important {
background: #dc2626;
}
.news_archive_cat.member {
background: #334155;
}
.news_archive_cat.jceh {
background: #009b72;
}
.news_archive_cat.update {
background: #84cc16;
}
.news_archive_cat.news,
.news_archive_cat.notice {
background: #64748b;
}
.news_archive_title {
font-size: 1rem;
font-weight: 700;
line-height: 1.6;
transition: color .2s ease;
}
.news_archive_arrow {
color: #5ca800;
font-size: 1.8rem;
line-height: 1;
text-align: right;
}
.news_archive_empty {
padding: 2rem;
background: #f7fbf2;
border: 1px solid #dbe8cf;
border-radius: 8px;
}
.news_pagination {
display: flex;
justify-content: center;
gap: .4rem;
margin-top: 2.5rem;
}
.news_pagination .page-numbers {
min-width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 .7rem;
border: 1px solid #d4decf;
border-radius: 6px;
color: #5ca800;
text-decoration: none;
font-weight: 700;
}
.news_pagination .page-numbers.current {
background: #6bbd00;
color: #fff;
border-color: #6bbd00;
}
@media screen and (max-width: 959px) {
.news_archive_section {
padding: 3rem 5%;
}
.news_filter {
grid-template-columns: 1fr 1fr;
}
.news_archive_item {
grid-template-columns: 100px 120px 1fr;
}
.news_archive_arrow {
display: none;
}
}
@media screen and (max-width: 600px) {
.news_filter {
grid-template-columns: 1fr;
}
.news_archive_item {
grid-template-columns: 1fr;
gap: .45rem;
padding: 1rem 0;
}
.news_archive_cats {
order: -1;
}
}
/* ==========================================================
PICKUP SECTION
========================================================== */
.pickup-slider {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.6rem;
}
/* --- Card --- */
.pickup-item {
background: var(--color-FFF);
overflow: hidden;
/* 境界をほんのり */
border: 1px solid var(--color-EEE);
/* 軽い浮遊感 */
box-shadow:
0 1px 2px rgba(0, 0, 0, .04),
0 10px 24px rgba(0, 0, 0, .08);
transition:
transform .3s cubic-bezier(.4, 0, .2, 1),
box-shadow .3s cubic-bezier(.4, 0, .2, 1),
border-color .3s ease;
}
.pickup-item:hover {
transform: translateY(-4px);
box-shadow:
0 4px 12px rgba(0, 0, 0, .08),
0 20px 40px rgba(0, 0, 0, .14);
}
/* --- Link --- */
.pickup-link {
display: block;
height: 100%;
color: inherit;
text-decoration: none;
}
/* --- Thumbnail --- */
.pickup-thumb img {
width: 100%;
/*aspect-ratio: 16 / 9;*/
object-fit: cover;
display: block;
background: var(--color-EEE);
}
/* --- Body --- */
.pickup-body {
padding: 1.2rem 1.4rem 1.5rem;
}
/* Date */
.pickup-date {
display: block;
font-size: .72rem;
font-weight: 500;
margin-bottom: .4rem;
color: var(--color-888);
letter-spacing: .06em;
}
/* Title */
.pickup-title {
font-size: 1rem;
line-height: 1.5;
margin: 0 0 .45rem;
letter-spacing: .02em;
transition: color .2s ease;
}
/* Excerpt */
.pickup-excerpt {
font-size: .85rem;
line-height: 1.7;
color: var(--color-666);
}
/* Focus（アクセシビリティ） */
.pickup-link:focus-visible {
outline-offset: 4px;
}
@media (max-width: 959px) {
/* 3列 → 1列 */
.pickup-slider {
grid-template-columns: 1fr;
gap: 1.2rem;
}
.pickup-body {
padding: .9rem 1rem 1.2rem;
}
.pickup-date {
font-size: .7rem;
margin-bottom: .3rem;
}
.pickup-title {
font-size: .9rem;
}
.pickup-excerpt {
font-size: .78rem;
}
}
/* ==========================================================
MEMBERSHIP CTA
========================================================== */
.membership-section {
display: flex;
justify-content: flex-start;
background:
linear-gradient(90deg,
rgba(255, 255, 255, 0.98) 0%,
/* 左：ほぼ白 */
rgba(255, 255, 255, 0.95) 40%,
rgba(255, 255, 255, 0.85) 60%,
rgba(255, 255, 255, 0.65) 75%,
rgba(255, 255, 255, 0.35) 90%,
rgba(255, 255, 255, 0.15) 100%
/* 右：かなり見える */
),
url("/wp-content/themes/jsltr/images/membership_bg.webp");
background-repeat: no-repeat;
background-position: bottom;
background-size: cover;
}
@media screen and (max-width: 959px) {
.membership-section {
background:
linear-gradient(180deg,
rgba(255, 255, 255, 0.97) 0%,
rgba(255, 255, 255, 0.92) 60%,
rgba(255, 255, 255, 0.85) 100%),
url("/wp-content/themes/jsltr/images/membership_bg.webp");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
}
}
/* テキスト */
.membership-cta_title {
font-size: 1.4rem;
margin: 0 0 .8rem;
color: var(--color-lime-darker);
}
.membership-cta_lead {
font-size: 1rem;
margin: 0 0 .6rem;
color: var(--color-444);
}
.membership-cta_desc {
font-size: .9rem;
line-height: 1.7;
color: var(--color-666);
}
/* ボタン */
.membership-cta_button {
display: inline-block;
padding: .9em 2.2em;
border-radius: 999px;
background: var(--color-lime-base);
color: #fff;
font-size: .95rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.membership-cta_button:hover {
background: var(--color-lime-dark);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
}
@media (max-width: 959px) {
.membership-cta_inner {
grid-template-columns: 1fr;
}
.membership-cta_action {
margin-top: 1.5rem;
}
}
/* ==========================================================
CHILD PAGE GRID
========================================================== */
.child-pages-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.child-page-card {
display: block;
border: 1px solid #ccc;
border-radius: 8px;
text-align: center;
background-color: #fff;
transition: transform 0.2s, box-shadow 0.2s;
text-decoration: none !important;
}
.child-page-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.child-page-card img {
max-width: 100%;
border-radius: 4px;
margin-bottom: 0.5rem;
}
.child-page-card h3 {
font-size: 1.2rem;
background-image: none;
margin: 1rem 0 1rem 0;
padding: 0;
}
.child-page-card p {
font-size: 0.9rem;
color: #666;
}
/* =========================================
My Page Buttons
========================================= */
.mypage-links {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2rem;
}
.mypage-links .btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 250px;
padding: .85rem 1.4rem;
border-radius: 999px;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
transition: all .2s ease;
}
/* 登録情報変更 */
.mypage-links .btn-primary {
background: var(--color-lime-base, #6FB90B);
color: #fff;
border: 1px solid var(--color-lime-base, #6FB90B);
}
.mypage-links .btn-primary:hover,
.mypage-links .btn-primary:focus {
background: var(--color-lime-dark, #5ca000);
color: #fff;
text-decoration: none;
}
/* パスワード変更・ログアウト */
.mypage-links .btn-secondary {
background: #f4f6f4;
color: #333;
border: 1px solid #d8ded8;
}
.mypage-links .btn-secondary:hover,
.mypage-links .btn-secondary:focus {
background: #ecefec;
color: #333;
text-decoration: none;
}
/* 念のためテーマCSSを打ち消す */
.mypage-links .btn,
.mypage-links .btn:hover,
.mypage-links .btn:focus,
.mypage-links .btn:visited {
text-decoration: none;
}
/* SP */
@media (max-width: 640px) {
.mypage-links {
display: grid;
gap: .75rem;
}
.mypage-links .btn {
width: 100%;
min-width: 0;
}
}
/* ==========================================================
ACCORDION MENU (PC / SP)
========================================================== */
/* --- 基本構造 --- */
.accordion-menu,
.accordion-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.accordion-menu li {
position: relative;
}
.accordion-menu a {
display: block;
text-decoration: none;
cursor: pointer;
color: #333;
font-weight: 500;
font-size: var(--fs-base);
padding: 0.5rem 1rem;
}
/* --- 親メニュー（子を持つ li の a） --- */
.accordion-menu li.menu-item-has-children>a {
border-bottom: 1px solid #EDEFF2;
position: relative;
}
/* --- サブメニュー共通 --- */
.accordion-menu .sub-menu {
display: none;
}
/* --- 2階層目 --- */
.accordion-menu .sub-menu>li>a {
padding: 0.3rem 2rem;
font-size: var(--fs-sm);
background-color: #EDEFF2;
border-bottom: 1px solid #DDD;
}
/* --- 3階層目 --- */
.accordion-menu .sub-menu .sub-menu>li>a {
padding: 0.3rem 3rem;
background-color: #DDE1E6;
}
/* -------------------- ホバー時 -------------------- */
.accordion-menu a:hover {
color: var(--color-lime-base);
}
/* -------------------- アクティブ時 -------------------- */
.accordion-menu .current-menu-ancestor>.sub-menu,
.accordion-menu .current-menu-parent>.sub-menu {
display: block;
}
/* 現在ページのリンク */
.accordion-menu .current-menu-item>a {
color: var(--color-lime-base) !important;
}
/* アクティブ時（現在のページ）*/
.accordion-menu .current-menu-item>a::after {
border-right-color: var(--color-lime-base) !important;
border-bottom-color: var(--color-lime-base) !important;
/*background: var(--color-lime-base) !important;*/
}
/* 階層ありメニュー = 小さめプラス */
.accordion-menu li.menu-item-has-children>a::after {
content: "";
width: 1.1rem;
height: 1.1rem;
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
background-repeat: no-repeat;
background-size: 1.1rem;
background-image: var(--svg-plus-default);
}
/* 開いている場合（.open）→ 小さめマイナス */
.accordion-menu li.menu-item-has-children.open>a::after {
background-image: var(--svg-minus-default);
}
/* プラスのホバー */
.accordion-menu li.menu-item-has-children>a:hover::after {
background-image: var(--svg-plus-lime);
}
/* マイナスのホバー */
.accordion-menu li.menu-item-has-children.open>a:hover::after {
background-image: var(--svg-minus-lime);
}
/* アクティブ（現在のページ）= ライム色のまま（子または自身が current-menu-item のときのみ） */
.accordion-menu li.current-menu-item>a::after {
background-image: var(--svg-plus-lime);
}
/* アクティブで open の場合（＝マイナス） */
.accordion-menu li.current-menu-item.open>a::after {
background-image: var(--svg-minus-lime);
}
@media (max-width: 959px) {
/* --------------------
ヘッダー
-------------------- */
.site-header {
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
position: relative;
/* ボタンの絶対配置用 */
height: 65px;
}
/* --------------------
ハンバーガーボタン
-------------------- */
.h-wrap {
margin-left: auto;
}
.menu-toggle {
position: relative;
width: 50px;
height: 45px;
background: none;
border: none;
cursor: pointer;
padding: 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 10;
margin-right: 9px
}
.menu-toggle .bar {
width: 100%;
height: 2px;
background-color: #333;
transition: opacity 0.3s ease;
border-radius: 2px;
/* ここで角を丸く */
}
.menu-toggle .bar-cross {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
pointer-events: none;
/* 非表示時はクリック不可 */
transition: opacity 0.3s ease;
}
.menu-toggle.active .bar {
opacity: 0;
/* バーをフェードアウト */
}
.menu-toggle.active .bar-cross {
opacity: 1;
/* ×をフェードイン */
}
.menu-toggle svg {
color: #333
}
/* --------------------
レイアウト調整
-------------------- */
.content-wrapper {
flex-direction: column;
}
.sidebar {
display: none;
}
.main-content,
.footer {
margin-left: 0;
}
/* --------------------
SPメニュー全体
-------------------- */
.mobile-menu-wrapper {
display: none;
position: fixed;
top: 65px;
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
background: #fff;
z-index: 999;
padding-bottom: 80px;
}
body.menu-open {
overflow: hidden;
position: fixed;
width: 100%;
display: block;
}
/* --------------------
ナビゲーションメニュー
-------------------- */
.site-navigation .menu {
display: block;
/* SPでも必ず表示 */
padding: 0;
margin: 0;
}
/* 第1階層メニュー */
.menu>.menu-item>a {
font-size: var(--fs-base);
padding: 0.8rem 2rem;
color: #333;
display: block;
width: 100%;
background-color: #fff;
border-bottom: 1px solid #ddd;
cursor: pointer;
margin-top: 0;
}
/* ===== ＋アイコン ===== */
.site-navigation .menu-item-has-children>a {
position: relative;
}
/* 横線 */
.site-navigation .menu-item-has-children>a::before,
.site-navigation .menu-item-has-children>a::after {
content: "";
position: absolute;
right: 2.6rem;
top: 50%;
width: 12px;
height: 1.5px;
background: #555;
}
/* 横線 */
.site-navigation .menu-item-has-children>a::before {
transform: translateY(-50%);
}
/* 縦線（＋になる） */
.site-navigation .menu-item-has-children>a::after {
transform: translateY(-50%) rotate(90deg);
}
/* ===== OPEN時 → − ===== */
.site-navigation .menu-item-has-children.open>a::after {
transform: translateY(-50%) rotate(0deg);
}
/* 第2階層メニュー */
.site-header .sub-menu {
display: none;
background-color: #EDEFF2;
margin-top: 0;
}
.site-header .sub-menu>.menu-item>a {
font-size: var(--fs-sm);
padding: 0.7rem 3rem;
position: relative;
display: block;
border-bottom: 1px solid #ddd;
}
/* 第3階層メニュー */
.site-header .sub-menu>li>.sub-menu>li>a {
background-color: #DDE1E6;
padding: 0.5rem 4rem;
}
/* --------------------
フッター（モバイル用）
-------------------- */
.mobile-footer {
padding: 1rem 2rem;
}
}
/* 共通：アイコンの位置調整 */
.menu .menu-login>a,
.menu .menu-logout>a {
display: flex;
align-items: center;
gap: 6px;
}
/* ログイン（閉じた鍵） */
.menu .menu-login>a::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-size: contain;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;utf8,");
}
/* ログアウト（開いた鍵） */
.menu .menu-logout>a::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-size: contain;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;utf8,");
}
.menu-text {
display: block;
/* 横並びにならないようにする */
margin-top: 10px;
/* 必要に応じて位置調整 */
}
/* 未ログイン時だけ会員メニューに鍵 */
body:not(.logged-in) .menu-item-has-children>a[href*="membership-menu"] {
padding-left: 2.2em;
background-image: var(--icon-lock);
background-repeat: no-repeat;
background-position: 1em center;
background-size: 0.9em;
}
@media (max-width: 959px) {
/* （SP版位置調整 ）未ログイン時 会員メニューに鍵 */
body:not(.logged-in) .menu-item-has-children>a[href*="membership-menu"] {
padding-left: 3.2em;
background-position: 2em center;
}
}
/* ==============================
TOC + Layout (Rebuild)
============================== */
/* stickyの上余白（ヘッダー高さに合わせて調整） */
:root {
--sticky-offset: 110px;
--toc-width: 300px;
--toc-gap: 28px;
}
/* --- アンカー（h2/h3...）ジャンプ時のズレ対策：正攻法 --- */
.entry-content :is(h2, h3, h4, h5, h6) {
scroll-margin-top: calc(var(--sticky-offset) + 16px);
}
/* --- Layout base --- */
.entry-layout {
display: flex;
grid-template-columns: minmax(0, 1fr) var(--toc-width);
align-items: start;
}
.entry-main {
min-width: 0;
}
.entry-toc {
position: sticky;
top: var(--sticky-offset);
align-self: start;
width: 400px;
margin-right: 3%;
}
/* PCだけスクロール */
.entry-toc .toc-box {
max-height: calc(100vh - (var(--sticky-offset) + 30px));
overflow: auto;
background: #fff;
border: 1px solid rgba(0, 0, 0, .08);
padding: 14px 14px 12px;
box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
width: 300px;
}
/* SP：縦積み（TOCは上） */
@media (max-width: 959px) {
.entry-layout {
display: flex;
flex-direction: column;
}
.entry-toc {
order: -1;
margin: 0 0 16px;
position: static;
width: 100%;
}
.entry-toc .toc-box {
width: 94%;
margin: 0 3%;
}
}
/* ------------------------------
Toggle (SP accordion)
------------------------------ */
/* ボタン：PCはタイトル扱い（クリック不要） */
.entry-toc .toc-toggle {
all: unset;
display: block;
font-weight: 600;
letter-spacing: .04em;
margin: 0 0 .65rem;
}
/* PC：ボタンは非インタラクティブに */
@media (min-width: 960px) {
.entry-toc .toc-toggle {
cursor: default;
pointer-events: none;
}
}
/* SP：ボタンとして機能させる + アイコン */
@media (max-width: 959px) {
.entry-toc .toc-toggle {
cursor: pointer;
width: 100%;
position: relative;
margin: 0;
}
/* +- アイコン */
.entry-toc .toc-toggle::after,
.entry-toc .toc-toggle::before {
content: "";
position: absolute;
right: .4em;
top: 50%;
width: 12px;
height: 2px;
background: currentColor;
transform: translateY(-50%);
}
.entry-toc .toc-toggle::before {
transform: translateY(-50%) rotate(90deg);
}
/* 閉じているとき nav を隠す */
.entry-toc .toc-toggle[aria-expanded="false"]+.toc-nav {
display: none;
}
/* 開いているときは縦線を消して「−」に */
.entry-toc .toc-toggle[aria-expanded="true"]::before {
opacity: 0;
}
}
/* ------------------------------
TOC content typography
------------------------------ */
.entry-toc .toc-nav {
font-size: .95em;
line-height: 1.45;
}
/* ● を消す + 余白リセット */
.entry-toc .toc-nav ul {
list-style: none;
margin: 0;
padding-left: 0;
}
.entry-toc .toc-nav li {
margin: .4rem 0;
padding-left: 0;
}
/* 階層表現：ネストだけ字下げ */
.entry-toc .toc-nav ul ul {
margin-top: .35rem;
padding-left: 1.1em;
opacity: .92;
font-size: .95em;
}
/* h2相当リンクを少し強く */
.entry-toc .toc-nav>ul>li>a {
font-weight: 600;
}
/* link */
.entry-toc a {
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
.entry-toc a:hover {
text-decoration: underline;
}
}
/* ==========================================================
WP-Members ログインフォーム
========================================================== */
#wpmem_login {
width: 50%;
}
/* input */
#wpmem_login input[type="text"],
#wpmem_login input[type="password"] {
width: 100%;
padding: 0.6em;
border: 1px solid #ccc;
}
/* ボタン */
#wpmem_login input[type="submit"] {
background: linear-gradient(135deg, var(--color-lime-base), var(--color-lime-dark));
border: none;
padding: 0.7em 1.2em;
color: #fff;
cursor: pointer;
border-radius: 8px;
}
#wpmem_login fieldset>*+* {
margin-bottom: 1rem;
}
#wpmem_login fieldset {
border: none;
margin: 0;
padding: 0;
width: 350px;
}
/* ==========================================================
WP-MEMBERS FORM
========================================================== */
/* ------------------------------
フォーム全体
------------------------------ */
#wpmem_reg {
width: 100%;
margin: 0 auto;
}
/* ------------------------------
fieldset（グループ）
------------------------------ */
#wpmem_reg fieldset {
margin: 0;
padding: 2rem 1rem 2rem;
border: none;
border-radius: 0px;
background: #EEE;
}
/* fieldset タイトル */
#wpmem_reg legend {
padding: 0 .6em;
font-size: .95em;
font-weight: 600;
letter-spacing: .04em;
color: var(--color-lime-dark);
}
/* ------------------------------
各フィールドブロック
------------------------------ */
#wpmem_reg>div {
margin-bottom: 1.6em;
}
/* ------------------------------
ラベル行
------------------------------ */
#wpmem_reg label {
display: block;
font-weight: 600;
font-size: .95em;
margin-bottom: .35em;
line-height: 1.4;
margin-top: 1.2rem;
}
/* 必須マーク */
#wpmem_reg .req {
color: #c62828;
margin-left: .25em;
font-size: .85em;
font-weight: 700;
}
/* ------------------------------
入力フィールド共通
------------------------------ */
#wpmem_reg input,
#wpmem_reg select,
#wpmem_reg textarea {
width: 100%;
padding: .65em .8em;
font-size: .95em;
line-height: 1.5;
border: 1px solid rgba(0, 0, 0, .25);
border-radius: 0px;
background: #fff;
box-sizing: border-box;
}
/* フォーカス時 */
#wpmem_reg input:focus,
#wpmem_reg select:focus,
#wpmem_reg textarea:focus {
outline: none;
border-color: var(--color-lime-base);
box-shadow: 0 0 0 2px rgba(111, 185, 11, .15);
}
/* textarea 高さ */
#wpmem_reg textarea {
min-height: 6em;
resize: vertical;
}
/* ------------------------------
説明文（小さな注記など）
------------------------------ */
#wpmem_reg .description,
#wpmem_reg .hint {
font-size: .85em;
color: rgba(0, 0, 0, .65);
margin-top: .3em;
}
/* ------------------------------
幅を調整したい項目
------------------------------ */
/* 郵便番号（7桁） */
#wpmem_reg .div_text:has(input[name="home_postal_code"]),
#wpmem_reg .div_text:has(input[name="work_postal_code"]) {
max-width: 240px;
}
/* 電話・FAX */
#wpmem_reg .div_text:has(input[name*="phone"]),
#wpmem_reg .div_text:has(input[name*="fax"]) {
max-width: 360px;
}
/* 都道府県（select） */
#wpmem_reg .div_select:has(select[name*="prefecture"]) {
max-width: 320px;
}
/* ------------------------------
生年月日
------------------------------ */
#wpmem_reg .div_date:has(input[name*="birthdate"]) {
max-width: 320px;
}
#wpmem_reg .div_date:has(input[name="birthdate"])::after {
content: "※ 西暦で入力してください（例：1980/01/01）";
display: block;
margin-top: .1em;
font-size: .85em;
color: rgba(0, 0, 0, .65);
}
/* iPhone Safari: date input fix */
#wpmem_reg input[type="date"] {
max-width: 90%;
box-sizing: border-box;
padding-right: 1em;
}
@supports (-webkit-touch-callout: none) {
#wpmem_reg input[type="date"] {
padding-right: 1em;
}
}
/* ------------------------------
送付先（home / work）
------------------------------ */
/* ラジオボタンの場合 */
#wpmem_reg .div_radio:has(input[name="postal_address"]) {
max-width: 420px;
}
/* select の場合 */
#wpmem_reg .div_select:has(select[name="postal_address"]) {
max-width: 500px;
}
#wpmem_reg .div_select:has(select[name="postal_address"])::after {
content: "※ 学会誌など、郵送物の送付先を選択してください。（送付先として選択した住所は必ず登録してください）送付停止をご希望の場合は事務局までメールにてご連絡ください。";
display: block;
margin-top: .1em;
font-size: .85em;
color: #d60000;
}
/* ------------------------------
チェックボックス・ラジオ
------------------------------ */
#wpmem_reg .div_checkbox label,
#wpmem_reg .div_radio label {
display: inline-flex;
align-items: center;
gap: .4em;
font-weight: 500;
}
#wpmem_reg .div_checkbox input,
#wpmem_reg .div_radio input {
width: auto;
}
/* ------------------------------
送信ボタン
------------------------------ */
#wpmem_reg input[type="submit"] {
display: inline-block;
width: auto;
font-size: .95em;
font-weight: 600;
background: linear-gradient(135deg, var(--color-lime-base), var(--color-lime-dark));
border: none;
padding: 0.7em 3em;
color: #fff;
cursor: pointer;
border-radius: 8px;
margin: 1rem 0 1rem 0;
}
#wpmem_reg input[type="submit"]:hover {
background: var(--color-lime-light);
position: relative;
}
/* ------------------------------
エラーメッセージ
------------------------------ */
#wpmem_reg .err {
margin-top: .35em;
font-size: .85em;
color: #c62828;
}
/* ------------------------------
モバイル微調整
------------------------------ */
@media (max-width: 640px) {
#wpmem_reg {
max-width: 100%;
}
#wpmem_reg>div {
margin-bottom: 1.4em;
}
}
/* ------------------------------
会員情報変更ページ
------------------------------ */
/* update-profile ページ上部の操作リンク（登録情報の変更 / パスワード変更）を非表示 */
.page-slug-update-profile .entry-content>ul {
display: none;
}
/* ==========================================================
JSRA
========================================================== */
/* ------------------------------
Slider Wrap
------------------------------ */
.research-slider-wrap {
position: relative;
}
/* ------------------------------
Horizontal Scroll
------------------------------ */
.research-news-query .wp-block-post-template {
display: flex;
gap: 1.5rem;
overflow-x: auto;
padding-bottom: 1rem;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.research-news-query .wp-block-post-template::-webkit-scrollbar {
display: none;
}
/* カード幅 */
.research-news-query .wp-block-post {
flex: 0 0 320px;
scroll-snap-align: start;
}
/* ------------------------------
Navigation Button
------------------------------ */
.research-scroll-prev,
.research-scroll-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 50;
width: 48px;
height: 48px;
border: none;
border-radius: 999px;
background: #fff;
box-shadow: var(--shadow-soft);
cursor: pointer;
transition: var(--transition-smooth);
}
/* hover */
.research-scroll-prev:hover,
.research-scroll-next:hover {
transform: translateY(-50%) scale(1.05);
box-shadow: var(--shadow-hover);
}
/* 左 */
.research-scroll-prev {
left: -24px;
}
/* 右 */
.research-scroll-next {
right: -24px;
}
/* ------------------------------
Card
------------------------------ */
.research-news-card {
position: relative;
display: block;
padding: 1rem;
background: #fff;
border: 1px solid var(--color-EEE);
box-shadow: var(--shadow-soft);
transition: var(--transition-smooth);
overflow: hidden;
}
/* hover */
.research-news-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-hover);
}
/* ------------------------------
Entire Card Link
------------------------------ */
.research-news-card .wp-block-post-title a {
color: inherit;
text-decoration: none;
position: relative;
z-index: 20;
}
/* カード全面リンク */
.research-news-card .wp-block-post-title a::after {
content: "";
position: absolute;
top: -1000px;
right: -1000px;
bottom: -1000px;
left: -1000px;
z-index: 10;
}
/* ------------------------------
Image
------------------------------ */
.research-news-card img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}
/* ------------------------------
Date
------------------------------ */
.research-news-card .wp-block-post-date {
display: block;
margin-top: .9rem;
font-size: var(--fs-sm);
color: var(--color-888);
}
/* ------------------------------
Title
------------------------------ */
.research-news-card .wp-block-post-title {
margin: .45rem 0 0 !important;
padding: 0 !important;
background: none !important;
border: none !important;
box-shadow: none !important;
font-size: var(--fs-base) !important;
font-weight: 600;
line-height: 1.6;
color: var(--color-333);
position: relative;
}
/* h2装飾除去 */
.research-news-card .wp-block-post-title::before,
.research-news-card .wp-block-post-title::after {
display: none !important;
}
/* ------------------------------
Excerpt
------------------------------ */
.research-news-card .wp-block-post-excerpt {
margin-top: .6rem;
font-size: var(--fs-sm);
line-height: 1.7;
color: var(--color-666);
}
/* ==========================================================
Navigation
========================================================== */
.research-slider-nav {
display: flex;
gap: .6rem;
margin-top: 0;
height: 1.5rem;
position: relative;
z-index: 100;
}
.research-scroll-prev,
.research-scroll-next,
.research-scroll-prev .wp-block-button__link,
.research-scroll-next .wp-block-button__link {
pointer-events: auto;
}
/* ==========================================================
Minimal Navigation
========================================================== */
.research-slider-nav {
display: flex;
gap: .8rem;
margin-top: 0;
}
/* ボタン */
.research-scroll-prev,
.research-scroll-next {
position: relative;
width: 24px;
height: 24px;
padding: 0;
border: none;
background: transparent;
box-shadow: none;
opacity: .7;
transition: .25s ease;
margin: 0;
}
/* hover */
.research-scroll-prev:hover,
.research-scroll-next:hover {
opacity: 1;
}
/* Gutenbergボタン装飾除去 */
.research-scroll-prev .wp-block-button__link,
.research-scroll-next .wp-block-button__link {
padding: 0 !important;
width: 100%;
height: 100%;
background: transparent !important;
border: none !important;
font-size: 0;
box-shadow: none !important;
}
/* 共通矢印 */
.research-scroll-prev::before,
.research-scroll-next::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
}
/* 左矢印 */
.research-scroll-prev::before {
border-top: 1.5px solid var(--color-666);
border-left: 1.5px solid var(--color-666);
transform:
translate(-30%, -50%) rotate(-45deg);
}
/* 右矢印 */
.research-scroll-next::before {
border-top: 1.5px solid var(--color-666);
border-right: 1.5px solid var(--color-666);
transform:
translate(-80%, -50%) rotate(45deg);
}
/* ------------------------------
Mobile
------------------------------ */
@media (max-width: 959px) {
.research-news-query .wp-block-post {
flex: 0 0 70%;
max-width: 70%;
}
/* SPはボタン非表示 */
.research-scroll-prev,
.research-scroll-next {
display: none;
}
}
/* ==========================================================
NEW BADGE
========================================================== */
.new {
position: relative;
}
.new::after {
content: "NEW";
display: inline-block;
margin-left: .5em;
padding: .15em .6em;
font-size: .7em;
font-weight: 600;
letter-spacing: .05em;
line-height: 1;
color: #fff;
background: linear-gradient(135deg, #e63946, #ff6b6b);
border-radius: 999px;
vertical-align: middle;
transform: translateY(-0.05em);
}
/* さりげなく目立たせる（任意） */
@media (prefers-reduced-motion: no-preference) {
.new::after {
animation: newPulse 1.8s ease-in-out infinite;
}
}
@keyframes newPulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: .75;
}
}
/* ==========================================================
IMAGES
========================================================== */
img {
display: block;
max-width: 100%;
height: auto;
}
.float-image-left {
float: left;
margin: 0 1rem 1rem 0;
max-width: 40%;
}
.float-image-right {
float: right;
margin: 0 0 1rem 1rem;
max-width: 40%;
}
.wp-block-image.float-image-left,
.wp-block-image.float-image-right {
display: inline-block;
}
.wp-block-image figcaption {
font-size: 0.9em;
color: #333;
text-align: center;
margin-top: 0.3em;
}
.sp-br {
display: none;
}
/* ==========================================================
MOBILE: HOVER / MOTION MINIMAL MODE
SPでは動きを極力なくす
========================================================== */
@media (max-width: 959px) {
/* --- transform系を止める --- */
.btn:hover,
.event-item:hover,
.pickup-item:hover,
.journal_card:hover,
.floating-membership:hover,
.child-page-card:hover,
.membership-cta_button:hover,
.to-top:hover {
transform: none !important;
box-shadow: var(--shadow-soft) !important;
}
/* --- 矢印スライド止める --- */
.btn:hover::after,
.journal_nav a:hover::after,
.journal_card:hover .journal_card_link::after,
.floating-membership:hover::after {
right: 1.2rem !important;
}
/* --- ホバー色変化を抑える --- */
a:hover,
.entry-content a:hover,
.accordion-menu a:hover,
.footer-menu a:hover,
.tab_item:hover {
color: inherit !important;
opacity: 1 !important;
}
/* --- カード明るさ演出を止める --- */
.tab_content:hover .category_name {
filter: none !important;
}
/* --- ToTopを落ち着かせる --- */
.to-top:hover {
background: var(--color-lime-base-alpha30) !important;
}
.btn:active {
opacity: .85;
}
}