/* ------------------------------------------------------- 親テーマから使える変数 ------------------------------------------------------- */ /* grid-systems/theme.json が出力するCSSカスタムプロパティ。 色・余白・フォントサイズはこの中から選び、直値を書かない。 値そのものを変えたい場合は my-theme/theme.json の settings に定義を追加して上書きする。 色（配色は案件ごとに my-theme/theme.json で上書きする。役割は共通） --wp--preset--color--base 背景。primary の上に乗せる文字色 --wp--preset--color--contrast 本文 --wp--preset--color--primary リンク・ボタン・アクセント --wp--preset--color--dark-gray 補足テキスト・アイコン --wp--preset--color--gray ボーダー・区切り線 --wp--preset--color--light-gray 淡い背景 余白（clamp() でSP〜PCの間を可変。スラッグの数値がPC時のpx） --wp--preset--spacing--10 5 〜 10px --wp--preset--spacing--20 10 〜 20px --wp--preset--spacing--30 15 〜 30px 本文の左右余白と同じ値 --wp--preset--spacing--40 20 〜 40px --wp--preset--spacing--50 25 〜 50px --wp--preset--spacing--60 30 〜 60px --wp--preset--spacing--70 35 〜 70px --wp--preset--spacing--80 40 〜 80px フォントサイズ（同じく clamp()。例：--wp--preset--font-size--36 は 24〜36px） --wp--preset--font-size--10 / 12 / 14 / 16 / 18 / 20 / 24 / 28 / 32 / 36 / 40 / 48 / 56 / 64 / 72 / 80 --wp--preset--font-size--default 15 〜 16px（本文の既定サイズ） フォント --wp--preset--font-family--noto-sans-jp "Noto Sans JP", sans-serif（サイト既定） --wp--preset--font-family--inter Inter（欧文のみ） font-family は継承した値を引き継がず指定したリストで置き換わるため、 日本語が混ざる要素に inter を当てるときは noto-sans-jp と並べて書く。 例：font-family: var(--wp--preset--font-family--inter), var(--wp--preset--font-family--noto-sans-jp); レイアウト --wp--style--global--content-size 1000px（通常幅） --wp--style--global--wide-size 1600px（幅広） --wp--style--block-gap 20px（ブロック間の既定の余白） --wp--style--root--padding-right / --wp--style--root--padding-left var(--wp--preset--spacing--30)（本文の左右余白） */ /* ------------------------------------------------------- common ------------------------------------------------------- */ /* 見出しの下線に重ねる primary のアクセント線。 見た目（幅・太さ・色・位置）はこの1ルールだけで管理する。値を変えるときはここを直す。 使い方は2通り。ブロックスタイル「title-02」（is-style-title-02）を 選ぶか、追加CSSクラスに title-02 を直接入れる。 既存の2箇所は下線の持ち主や ::before / ::after の別がそれぞれ違うのでセレクタで拾っている。 */ :root { --title-accent-width: 80px; } .title-02::after, .is-style-title-02::after, :is( .content-area, .main-contents ) :is( .post-styles, .single-post .wp-block-post-content ) h2::before, :is( .content-area, .main-contents ) .post-header::after { content: ''; display: block; width: var(--title-accent-width); height: 1px; background-color: var(--wp--preset--color--primary); position: absolute; bottom: -1px; left: 0; } /* クラス／ブロックスタイルで足す場合は下線と余白もここで持つ（値は .post-header に揃えてある） */ .title-02, .is-style-title-02 { position: relative; padding-bottom: var(--wp--preset--spacing--30); border-bottom: solid 1px var(--wp--preset--color--light-gray); } /* 見出しは太字にしない（サイト全体で見出しは 400 に揃えている） */ .title-02 :is( h1, h2, h3, h4, h5, h6 ), .is-style-title-02 :is( h1, h2, h3, h4, h5, h6 ) { font-weight: 400; } /* 2つ目以降の要素は見出しの補足として扱う。中身が何であってもよい */ .is-style-title-02 > * + * { margin-top: var(--wp--preset--spacing--10); font-size: var(--wp--preset--font-size--14); color: var(--wp--preset--color--dark-gray); } body { font-family: var(--wp--preset--font-family--noto-sans-jp); font-size: var(--wp--preset--font-size--16); } .main { padding-bottom: 0; } /* button */ /* 余白・ボーダーは is-style-arrow-right に揃える。色や文字装飾はスタイルごとに残す */ .wp-element-button, .wp-block-button__link { padding: var(--wp--preset--spacing--20); border: solid 1px var(--wp--preset--color--light-gray); border-radius: 0; } /* is-style-outline は親テーマが 0,3,0 で border を上書きしているので個別に揃える */ .wp-block-button.is-style-outline .wp-block-button__link { border: solid 1px var(--wp--preset--color--light-gray); } /* arrow-right / arrow-left */ .is-style-arrow-right .wp-element-button, .is-style-arrow-right .wp-block-button__link, .is-style-arrow-left .wp-element-button, .is-style-arrow-left .wp-block-button__link { display: grid; text-align: center; gap: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--20); border: solid 1px var(--wp--preset--color--light-gray); border-radius: 0; color: var(--wp--preset--color--contrast); background-color: transparent; text-transform: capitalize; font-family: var(--wp--preset--font-family--inter); line-height: 1.5; letter-spacing: .1em; transition: color .4s, background-color .4s; } /* ラベル / 縦線 / 矢印 の並び。arrow-left は左右を入れ替える */ .is-style-arrow-right .wp-element-button, .is-style-arrow-right .wp-block-button__link { grid-template-columns: 1fr auto auto; padding-left: calc(var(--wp--preset--spacing--20) * 2); } .is-style-arrow-left .wp-element-button, .is-style-arrow-left .wp-block-button__link { grid-template-columns: auto auto 1fr; padding-right: calc(var(--wp--preset--spacing--20) * 2); } /* line */ .is-style-arrow-right .wp-element-button::before, .is-style-arrow-right .wp-block-button__link::before, .is-style-arrow-left .wp-element-button::before, .is-style-arrow-left .wp-block-button__link::before { content: ""; width: 1px; align-self: stretch; background-color: var(--wp--preset--color--light-gray); } .is-style-arrow-right .wp-element-button::before, .is-style-arrow-right .wp-block-button__link::before { margin-left: var(--wp--preset--spacing--20); order: 1; } .is-style-arrow-left .wp-element-button::before, .is-style-arrow-left .wp-block-button__link::before { margin-right: var(--wp--preset--spacing--20); order: -1; } /* arrow */ .is-style-arrow-right .wp-element-button::after, .is-style-arrow-right .wp-block-button__link::after, .is-style-arrow-left .wp-element-button::after, .is-style-arrow-left .wp-block-button__link::after { content: '\e941'; color: var(--wp--preset--color--primary); letter-spacing: normal; align-self: center; position: relative; top: 0; } .is-style-arrow-right .wp-element-button::after, .is-style-arrow-right .wp-block-button__link::after { right: 0 !important; order: 2; } /* 左向きは arrow_right_alt を左右反転して使う。 専用グリフに差し替えると形が微妙に変わるので、同じ字形を反転させる。 */ .is-style-arrow-left .wp-element-button::after, .is-style-arrow-left .wp-block-button__link::after { left: 0 !important; transform: scaleX(-1); order: -2; } /* arrow-down : ラベルの上下に余白を持たせるので、上下 padding だけ詰める */ .is-style-arrow-down .wp-element-button, .is-style-arrow-down .wp-block-button__link { padding-top: var(--wp--preset--spacing--10); padding-bottom: var(--wp--preset--spacing--10); } /* button-set */ .button-set:has(.wp-block-button + .wp-block-button) { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: fit-content; margin-left: auto; margin-right: auto; } /* header ------------------------------------------------------- */ .header { padding-top: var(--wp--preset--spacing--20); padding-bottom: var(--wp--preset--spacing--20); } .header .wp-block-navigation ul { gap: var(--wp--preset--spacing--20); } /* g-nav */ .header .wp-block-navigation-item__content { padding: var(--wp--preset--spacing--10); } /* rel の値を英語ラベルとして日本語ラベルの上に表示する */ .header .wp-block-navigation-item__content[rel] { flex-direction: column; justify-content: center; gap: .5em 1em; white-space: nowrap; transition: color .2s, background-color .2s; } /* en */ .header .wp-block-navigation-item__content[rel]::before { content: attr(rel); font-family: var(--wp--preset--font-family--inter); font-weight: 600; line-height: normal; text-transform: capitalize; } /* jp */ .header .wp-block-navigation-item__content[rel] .wp-block-navigation-item__label { font-size: var(--wp--preset--font-size--14); font-weight: 400; line-height: normal; } /* toggle-btn */ .header .logo { min-height: 80px; } /* トップだけロゴを h1 で包む（heading_levels.php）。見出しの余白・文字サイズを打ち消す */ .header .site-logo-heading { margin: 0; font-size: 0; line-height: 0; } .toggle-btn { width: 80px; height: 80px; background-color: var(--wp--preset--color--primary); } .toggle-btn::before, .toggle-btn p::before, .toggle-btn p::after { height: 1px; right: auto; left: 20px; background: var(--wp--preset--color--base); } .toggle-btn p::before { top: calc(50% - 13.5px); width: 40px; } .toggle-btn::before { top: calc(50% - .5px); width: 30px; } .toggle-btn p::after { top: calc(50% + 12.5px); width: 20px; } @keyframes toggle-line-stretch { 0% { transform: scaleX(1); transform-origin: right; } 40% { transform: scaleX(0); transform-origin: right; } 40.01% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } } .nav-open .toggle-btn p::before { width: 40px; transform: translateY(13px) rotate(-45deg); } .nav-open .toggle-btn p::after { width: 40px; transform: translateY(-13px) rotate(45deg); } /* is-toggle-menu（スクロールで開くドロワー）の指定は 1001px 以上でのみ使う。 1000px 以下は is-toggle-menu の有無に関わらずドロワーなので、そちらは max-width: 1000px のブロックが担当する。両方を無条件に置くと、詳細度の高い is-toggle-menu 側（クラス4 + 属性1）が常に勝ち、メディアクエリ側が死ぬ。 → min 1001 のブロックを参照 */ /* footer ------------------------------------------------------- */ .footer { background-color: var(--wp--preset--color--dark-gray); color: var(--wp--preset--color--base); } .footer .footer-block { justify-content: space-between; gap: var(--wp--preset--spacing--40); padding-top: var(--wp--preset--spacing--80); padding-bottom: var(--wp--preset--spacing--80); } .footer .info-wrap { gap: var(--wp--preset--spacing--50); } .footer .info-wrap .cont { gap: var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--14); } .footer .info-wrap .wp-block-button__link { font-size: var(--wp--preset--font-size--12); padding: var(--wp--preset--spacing--10); padding-left: calc(var(--wp--preset--spacing--10) * 2); gap: var(--wp--preset--spacing--10); color: var(--wp--preset--color--base); border-color: rgba(255, 255, 255, .1); } .footer .info-wrap .wp-block-button__link::before { margin-left: var(--wp--preset--spacing--10); background-color: rgba(255, 255, 255, .1); } .footer .info-wrap .wp-block-button__link::after { color: var(--wp--preset--color--base); font-size: 16px; line-height: 16px; } .footer-menu .menu-list ul { display: grid; grid-template-columns: repeat(2, 1fr); } .footer-sitemap a { color: var(--wp--preset--color--base); font-family: var(--wp--preset--font-family--inter); text-transform: capitalize; line-height: 1.5; position: relative; padding-left: 20px; } .footer-sitemap a::before { content: '\e315'; font-family: 'Material Symbols Outlined'; font-size: 16px; line-height: 16px; font-variation-settings: 'FILL' 0, 'wght' 300; position: absolute; top: calc(var(--wp--preset--font-size--14) * .95 - 8px); left: 0; transition: color 0.2s, left 0.2s; } /* ------------------------------------------------------- front page ------------------------------------------------------- */ .fv-box + *, .banner-box + *, .section + * { margin-top: 0; } /* fv ------------------------------------------------------- */ .fv-box .wp-block-image { margin: 0; display: block; } .fv-box .wp-block-image img { width: 100%; aspect-ratio: 1600 / 900; max-height: calc(var(--vh-eff) - var(--fv-reserve)); object-fit: cover; object-position: 50% 20%; } /* banner ------------------------------------------------------- */ :root { --vh-eff: max(100svh, 900px); --banner-h: clamp(200px, calc(var(--vh-eff) * .2222), 280px); --banner-box-pad: min(var(--wp--preset--spacing--20), calc(var(--vh-eff) * .015)); --banner-frame-hover: clamp(8px, calc(8px + (var(--vh-eff) - 900px) * .025), 16px); --banner-cont-pad-top: clamp(8px, calc(8px + (var(--vh-eff) - 900px) * .0375), 20px); --banner-cont-pad-bottom: clamp(13px, calc(13px + (var(--vh-eff) - 900px) * .053125), 30px); --fv-reserve: calc(160px + var(--banner-h) + var(--banner-box-pad) * 2); } .banner-box { padding-top: var(--banner-box-pad); padding-bottom: var(--banner-box-pad); background-color: var(--wp--preset--color--pale-gray); } .banner-box .banner-section { gap: var(--wp--preset--spacing--20); } /* 下層ページの banner-box は本文と同じ幅に収める。 背景（pale-gray）は alignfull のまま全幅で、内側の banner-section だけ頭打ちにする。 トップページの banner-box は content-area / main-contents の外にあるため当たらない。 404ページは content-area / main-contents を挟まず .page-404 が直接の親なので、 これも拾う（親テーマの 404.html の構成）。 */ :is( .content-area, .main-contents, .page-404 ) .banner-box .banner-section { max-width: var(--wp--style--global--content-size); margin-left: auto; margin-right: auto; } .banner { display: flex; } .banner > * { display: flex; flex: 1; } .banner .wp-block-cover { flex: 1; height: var(--banner-h); align-items: stretch; min-height: fit-content; padding: 0; } .banner .wp-block-cover .wp-block-cover__image-background { transition: transform .8s; } .banner .wp-block-cover__background { transition: opacity .4s; } .banner .wp-block-cover__inner-container { display: flex; height: 100%; max-width: none; margin: 0; padding: 4px; transition: padding .4s; } .banner .cont { color: var(--wp--preset--color--contrast); flex: 1; flex-wrap: nowrap; max-width: none; height: 100%; margin: 0; justify-content: center; gap: var(--wp--preset--spacing--20); padding: var(--banner-cont-pad-top) var(--wp--preset--spacing--20) var(--banner-cont-pad-bottom); text-align: center; background-color: rgba(255, 255, 255, .9); } /* title-01 ------------------------------------------------------- */ :is( .title-01, .is-style-title-01 ).is-vertical { gap: var(--wp--preset--spacing--10); text-align: center; } :is( .title-01, .is-style-title-01 ):not(.is-vertical) { gap: var(--wp--preset--spacing--20); align-items: center; } /* 中の余白はブロックの flex レイアウト（.is-layout-flex > * の margin: 0）が消している。 管理画面には同じ指定が無く、親テーマの .animation-block 配下の指定 （.block-editor-block-list__layout > * + * の margin-top: 2em）が効いてしまうので、 ここで打ち消しておく。フロントでは元から 0 なので影響しない。 */ :is( .title-01, .is-style-title-01 ) > *, :is( .title-01, .is-style-title-01 ) .block-editor-block-list__layout > * { margin-top: 0; } /* 固定ページの page-header だけ、英語がショートコード（current_page_slug）の div.page-header-slug、日本語が post-title の h1.page-header-label で出力される。 他ページは段落と見出しブロック（p / .wp-block-heading）なので、そのままだと この2つだけ体裁が違う。同じ見た目になるよう、以下のセレクタ束に併記してある。 打ち消す相手は親テーマの .page-header .page-header-slug / .page-header-label。 */ /* en */ :is( .title-01, .is-style-title-01 ) > p, :is( .title-01, .is-style-title-01 ) > .page-header-slug { font-family: var(--wp--preset--font-family--inter), var(--wp--preset--font-family--noto-sans-jp); font-size: var(--wp--preset--font-size--40); font-weight: 600; line-height: normal; text-transform: capitalize; } /* jp */ :is( .title-01, .is-style-title-01 ) > .wp-block-heading, :is( .title-01, .is-style-title-01 ) > .page-header-label { font-size: var(--wp--preset--font-size--20); font-weight: 400; line-height: normal; /* 親テーマが post-title 側にだけ持たせている上余白を消す（間隔は group の gap で持つ） */ margin-top: 0; } .banner :is( .title-01, .is-style-title-01 ) > p { letter-spacing: .1em; mix-blend-mode: color-burn; transition: color .4s; } .banner :is( .title-01, .is-style-title-01 ) > .wp-block-heading { font-weight: 500; letter-spacing: .1em; } /* dot */ /* 縦積み（is-vertical）の丸は、もともと .section / .page-header の中だけに出していた。 バナー（.banner）の見出しには丸を付けないための絞り込み。 ブロックスタイルはどこにでも置けるので、is-style-title-01 は場所で絞らない。 */ .section :is( .title-01, .is-style-title-01 ).is-vertical > p, .page-header :is( .title-01, .is-style-title-01 ).is-vertical > p, .is-style-title-01.is-vertical > p, :is( .title-01, .is-style-title-01 ):not(.is-vertical) > p, .is-style-title-01.is-vertical > .page-header-slug { display: flex; gap: var(--wp--preset--spacing--20); align-items: center; } .section :is( .title-01, .is-style-title-01 ).is-vertical > p, .page-header :is( .title-01, .is-style-title-01 ).is-vertical > p, .is-style-title-01.is-vertical > p, .is-style-title-01.is-vertical > .page-header-slug { justify-content: center; } .section :is( .title-01, .is-style-title-01 ).is-vertical > p::before, .section :is( .title-01, .is-style-title-01 ).is-vertical > p::after, .page-header :is( .title-01, .is-style-title-01 ).is-vertical > p::before, .page-header :is( .title-01, .is-style-title-01 ).is-vertical > p::after, .is-style-title-01.is-vertical > p::before, .is-style-title-01.is-vertical > p::after, :is( .title-01, .is-style-title-01 ):not(.is-vertical) > p::before, .is-style-title-01.is-vertical > .page-header-slug::before, .is-style-title-01.is-vertical > .page-header-slug::after, :is( .content-area, .main-contents ) .wp-block-query-title::before, :is( .content-area, .main-contents ) .wp-block-query-title::after, .mem-faculty .mem-name-en::before, .mem-faculty .mem-name-en::after { content: ''; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background-color: var(--wp--preset--color--primary); } /* バナーの見出しには丸を付けない。 旧クラス（.title-01）のときは .section / .page-header の中だけを拾っていたので 自然に外れていたが、ブロックスタイルは場所を問わず効くのでここで打ち消す。 */ .banner .is-style-title-01 > p { display: block; } .banner .is-style-title-01 > p::before, .banner .is-style-title-01 > p::after { content: none; } /* section ------------------------------------------------------- */ .section { padding-top: calc(var(--wp--preset--spacing--80) * 1.5); padding-bottom: calc(var(--wp--preset--spacing--80) * 1.5); } .info-box { padding-bottom: 0 !important; } .info-box :is( .title-01, .is-style-title-01 ), .info-box .button-set { padding-left: var(--wp--preset--spacing--30); padding-right: var(--wp--preset--spacing--30); } .info-box .cont, .info-box .button-set, .news-box .news-list { margin-top: var(--wp--preset--spacing--60); } .info-box .cont > * + * { margin-top: var(--wp--preset--spacing--40); } /* image-block ------------------------------------------------------- */ /* トップページ以外（パターンとして単体で置いた場合）でも同じ体裁にするため、 .animation-block でスコープしない。ただしコアが is-nowrap のグループに当てる display: flex と詳細度が並ぶので、.wp-block-group を重ねて 0,2,0 にしてある。 */ .wp-block-group.image-block { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: calc(var(--wp--preset--spacing--80) * 1.5); } .image-block .wp-block-image { margin: 0; } .image-block .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } /* news ------------------------------------------------------- */ .news-box .title-block { gap: var(--wp--preset--spacing--20); align-items: center; } .news-cont > li { display: flex; flex-direction: column; gap: .8em; align-items: flex-start; margin-top: 0; padding-bottom: var(--wp--preset--spacing--30); border-bottom: 1px solid var(--wp--preset--color--light-gray); } .news-cont > li + li { padding-top: var(--wp--preset--spacing--30); } /* 最後の項目は区切り線を引かない */ .news-cont > li:last-child { border-bottom: none; } .news-cont > li > * { margin: 0; } /* meta */ .news-cont .meta { display: flex; flex-wrap: nowrap; gap: var(--wp--preset--spacing--20); align-items: center; font-family: var(--wp--preset--font-family--inter), var(--wp--preset--font-family--noto-sans-jp); font-size: var(--wp--preset--font-size--14); color: var(--wp--preset--color--gray); } /* line */ /* 線はカテゴリーの前ではなく日付の後ろに置く。 カテゴリーを出さないとき（popular_posts）でも線が残る。見た目の位置は同じ。 */ .news-cont .meta .wp-block-post-date { display: flex; gap: var(--wp--preset--spacing--20); align-items: center; } .news-cont .meta .wp-block-post-date::after { content: ''; flex-shrink: 0; width: 1px; height: 16px; background-color: currentColor; opacity: .4; } .news-cont .meta .wp-block-post-terms { display: flex; gap: var(--wp--preset--spacing--20); align-items: center; } /* category */ .news-cont .meta .wp-block-post-terms [rel="tag"] { font-size: var(--wp--preset--font-size--12); color: var(--wp--preset--color--base); background-color: var(--wp--preset--color--primary); border: solid 1px var(--wp--preset--color--primary); border-radius: 0; padding: 6px 1em; text-transform: capitalize; } /* cont */ .news-cont .cont { display: flex; flex-direction: column; align-items: flex-start; position: relative; gap: .5em; } .news-cont .wp-block-post-title { display: flex; align-items: flex-start; gap: 10px; font-size: var(--wp--preset--font-size--20); font-weight: 400; } .news-cont .wp-block-post-title::before { content: ''; flex-shrink: 0; width: 8px; height: 2px; margin-top: calc((1lh - 2px) / 2); background-color: var(--wp--preset--color--primary); } .news-cont .wp-block-post-title a { color: var(--wp--preset--color--contrast); } .news-cont .wp-block-post-title a::after { content: ''; position: absolute; inset: 0; } .news-cont .wp-block-post-excerpt { font-size: var(--wp--preset--font-size--14); font-weight: 400; line-height: 2; } /* ------------------------------------------------------- 下層ページ ------------------------------------------------------- */ /* research topic ------------------------------------------------------- */ /* 研究テーマ1件分のまとまり（topic-cont）。 中身は「title is-style-title-02 > topic-head is-style-title-03（topic-title） ＋ topic-member」と本文（topic-text）で、見た目の値はブロックスタイル側が持つ。 ここにはテーマどうし・要素どうしの間隔だけを置く。 通し番号は振らない。title-03 は「1つ目の子＝番号」という作りなので、 番号を持たない topic-head では番号側の指定が topic-title（h2）に当たってしまう。 下記「通し番号 + タイトル」で topic-head を番号の指定から除外し、 タイトル側の指定に入れることで、テーマ名だけが並ぶ形にしている。 要素どうしの間隔は記事本文と同じにする。 親テーマの .post-styles .wp-block-post-content > * + * が 2em（SPは 1.5em）。 */ .entry-content > .topic-cont > * + * { margin-top: 2em; } /* テーマどうしは、中の要素の間隔よりはっきり空ける */ .entry-content > .topic-cont + .topic-cont { margin-top: var(--wp--preset--spacing--60); } /* post-header ------------------------------------------------------- */ /* テンプレートパーツ post-header は cover に差し替えてある。 親テーマの .page-header（余白のみを持つ group 前提）はここでは邪魔なのでリセットする。 page.html が使う素の .page-header には影響させないため、cover と併せて指定する。 */ .wp-block-cover.page-header { padding-top: 0; padding-bottom: 0; color: var(--wp--preset--color--contrast); } /* post-styles ------------------------------------------------------- */ /* h2 は親テーマの中央揃え・上下ボーダー・primary色をやめて、 h4（1px gray の下線のみ）と同じ体裁の左揃えにする。 サイズは h1〜h6 のはしごとして theme.json 側で持つので、ここでは指定しない。 スコープは親テーマ（grid-systems/assets/scss/post-styles.scss）と同条件にする。 .wp-block-post-content だけで書くと投稿タイプを問わず当たり、member や publication の詳細ページにもこの装飾が乗ってしまう。 */ :is( .content-area, .main-contents ) :is( .post-styles, .single-post .wp-block-post-content ) h2 { text-align: left; padding: 0 0 .8em; border-top: none; border-bottom: solid 1px var(--wp--preset--color--light-gray); position: relative; } /* 下線に重ねるアクセント線は common の共通ルールで一括指定 */ :is( .content-area, .main-contents ) :is( .post-styles, .single-post .wp-block-post-content ) h3 { text-align: left; padding-left: var(--wp--preset--spacing--20); padding-right: var(--wp--preset--spacing--20); } /* quote ------------------------------------------------------- */ :is( .content-area, .main-contents ) .wp-block-quote { border-left-width: 1px; } :is( .content-area, .main-contents ) .wp-block-pullquote { border-top-width: 1px; border-bottom-width: 1px; } /* file ------------------------------------------------------- */ :is( .content-area, .main-contents ) .wp-block-file:not( .wp-element-button ) { gap: var(--wp--preset--spacing--20); } /* single 記事の post-header（一覧項目の .post-item .post-header や archive の .page-header とは別） */ :is( .content-area, .main-contents ) .post-header { padding-top: 0; position: relative; /* 親テーマは 2em。本文との間隔を詰める */ margin-bottom: 1.5em; } /* 親テーマの border-bottom に重ねるアクセント線は common の共通ルールで一括指定 */ /* 一覧項目の post-header は親テーマがボーダーを消しているので、線も出さない */ :is( .content-area, .main-contents ) .post-item .post-header::after { content: none; } /* content-area ------------------------------------------------------- */ /* 親テーマは light-gray を淡い背景、gray をボーダーに割り当てているが、 このサイトの配色では pale-gray が淡い背景、light-gray がボーダーにあたる。 記事本文まわり（content-area / main-contents）の中だけ役割を読み替える。 single には content-area が無く main-contents が最上位なので、両方をスコープにする。 */ /* 淡い背景 : light-gray -> pale-gray */ :is( .content-area, .main-contents ) .wp-block-post-terms [rel="tag"], :is( .content-area, .main-contents ) .wp-block-table tfoot, :is( .content-area, .main-contents ) .wp-block-tag-cloud a, :is( .content-area, .main-contents ) .sidebar .wp-block-heading, :is( .content-area, .main-contents ) .step-list .step::after, :is( .content-area, .main-contents ) .schema-how-to .schema-how-to-total-time, :is( .content-area, .main-contents ) .schema-how-to .schema-how-to-step::after, :is( .content-area, .main-contents ) .lwptoc-light .lwptoc_i, :is( .content-area, .main-contents ) .linkcard .lkc-info, :is( .content-area, .main-contents ) .talk.wp-block-columns:not( .is-not-stacked-on-mobile ) > .wp-block-column.comment, :is( .content-area, .main-contents ) :is( .post-styles, .single-post .wp-block-post-content ) h3 { background-color: var(--wp--preset--color--pale-gray); } /* 親テーマ側が !important で指定しているため揃える */ :is( .content-area, .main-contents ) .tabs .tab-btn .wp-element-button { background-color: var(--wp--preset--color--pale-gray) !important; } /* ボーダー : gray -> light-gray */ :is( .content-area, .main-contents ) .wp-block-table td, :is( .content-area, .main-contents ) .wp-block-table th, :is( .content-area, .main-contents ) .wp-block-separator, :is( .content-area, .main-contents ) .wp-block-rss .wp-block-rss__item, :is( .content-area, .main-contents ) .wp-block-search__input, :is( .content-area, .main-contents ) .wp-block-search__button-inside .wp-block-search__inside-wrapper, :is( .content-area, .main-contents ) .is-style-single-line-posts .post-list, :is( .content-area, .main-contents ) .post-header, :is( .content-area, .main-contents ) .is-style-arrow-link-list > li:not( :first-child ), :is( .content-area, .main-contents ) .is-style-arrow-link-list .children li, :is( .content-area, .main-contents ) .is-style-arrow-link-list .wp-block-navigation__submenu-container li, :is( .content-area, .main-contents ) .sidebar .post-list.is-layout-grid .post, :is( .content-area, .main-contents ) .post-list--simple .post-list, :is( .content-area, .main-contents ) .post-list--simple .post-list .wp-block-post, :is( .content-area, .main-contents ) .post-list--meta .post-list, :is( .content-area, .main-contents ) .linkcard a.lkc-link, :is( .content-area, .main-contents ) :is( .post-styles, .single-post .wp-block-post-content ) h4 { border-color: var(--wp--preset--color--light-gray); } /* news-cont ------------------------------------------------------- */ /* 一覧（アーカイブ・検索結果）は1件が抜粋まで持つので、項目の間隔を広く取る。 トップページの news-cont は .main-column の外にあるため 30px のまま。 */ :is( .content-area, .main-contents ) .main-column .news-cont > li { padding-bottom: var(--wp--preset--spacing--50); } /* 区切り線の上下を均等にする */ :is( .content-area, .main-contents ) .main-column .news-cont > li + li { padding-top: var(--wp--preset--spacing--50); } /* 一覧（アーカイブ・検索結果）の抜粋。トップページには抜粋が無いのでここだけ小さくする */ :is( .content-area, .main-contents ) .main-column .news-cont .wp-block-post-excerpt { font-size: var(--wp--preset--font-size--16); } /* 例外 : アイキャッチ無しのときの枠は線というより面なので pale-gray にする */ :is( .content-area, .main-contents ) .post-item a:has( .default-image ) { border-color: var(--wp--preset--color--pale-gray); } /* post-header ------------------------------------------------------- */ /* 記事詳細の meta を news-list と同じ体裁にする。 縦積みの post-title-meta を折り返しの横並びにして、タイトルだけ1行占有させ、 日付とカテゴリーを1行に並べる。 */ :is( .content-area, .main-contents ) .post-header .post-title-meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--20); } /* 記事タイトルは .wp-block-heading が付かないため、親テーマの .wp-block-heading { font-weight: normal } が効かず theme.json の 600 のまま残る。 本文の見出しに合わせてここで 400 に戻す。サイズは theme.json の h1 に従う。 */ :is( .content-area, .main-contents ) .post-header .post-title-meta > .wp-block-post-title { width: 100%; font-weight: 400; } /* タイトルが1行占有したあとの残り幅いっぱいを使う */ :is( .content-area, .main-contents ) .post-header .post-meta { flex: 1 1 auto; gap: var(--wp--preset--spacing--20); align-items: center; font-family: var(--wp--preset--font-family--inter), var(--wp--preset--font-family--noto-sans-jp); font-size: var(--wp--preset--font-size--14); } /* line : news-list と同じく日付の後ろに置く */ :is( .content-area, .main-contents ) .post-header .post-meta .wp-block-post-date { display: flex; gap: var(--wp--preset--spacing--20); align-items: center; } :is( .content-area, .main-contents ) .post-header .post-meta .wp-block-post-date::after { content: ''; flex-shrink: 0; width: 1px; height: 16px; background-color: currentColor; opacity: .4; } /* category */ :is( .content-area, .main-contents ) .post-header .wp-block-post-terms [rel="tag"] { font-size: var(--wp--preset--font-size--12); color: var(--wp--preset--color--base); background-color: var(--wp--preset--color--primary); border: solid 1px var(--wp--preset--color--primary); border-radius: 0; padding: 6px 1em; text-transform: capitalize; } /* schema-how-to ------------------------------------------------------- */ :is( .content-area, .main-contents ) .schema-how-to .schema-how-to-step-name { gap: .8em; } /* step-text の左paddingはバッジ幅＋gapの計算式（親テーマ）。 gap を .5em から .8em に変えたので、係数もそれに合わせる。 */ :is( .content-area, .main-contents ) .schema-how-to .schema-how-to-step-text { padding-left: calc( ( var(--wp--preset--font-size--18) * 2.5 ) + ( var(--wp--preset--font-size--24) * .8 ) ); } /* 手順番号のバッジ */ :is( .content-area, .main-contents ) .schema-how-to .schema-how-to-step-name::before { font-family: var(--wp--preset--font-family--inter); border-radius: 0; } /* schema-faq ------------------------------------------------------- */ /* section : ナビ項目の区切りと同じ 1px light-gray の下線 */ :is( .content-area, .main-contents ) .schema-faq .schema-faq-section { padding: 1em 0; border-bottom: 1px solid var(--wp--preset--color--light-gray); } :is( .content-area, .main-contents ) .schema-faq .schema-faq-answer { margin-top: .25em; } :is( .content-area, .main-contents ) .schema-faq .schema-faq-question { gap: .8em; font-size: var(--wp--preset--font-size--20); transition: color .2s; } /* Q のバッジ */ :is( .content-area, .main-contents ) .schema-faq .schema-faq-question::before { font-family: var(--wp--preset--font-family--inter); border-radius: 0; } /* 開閉のアイコン */ :is( .content-area, .main-contents ) .schema-faq.is-style-toggle-faq .schema-faq-question::after { color: var(--wp--preset--color--primary); font-variation-settings: 'FILL' 0, 'wght' 200; } /* post-nav ------------------------------------------------------- */ /* 矢印を button と同じ arrow_right_alt に揃える（左向きは反転） */ :is( .content-area, .main-contents ) .post-nav-block .post-nav .post-navigation-link-previous a::before, :is( .content-area, .main-contents ) .post-nav-block .post-nav .post-navigation-link-next a::before { content: '\e941'; font-variation-settings: 'FILL' 0, 'wght' 300; } :is( .content-area, .main-contents ) .post-nav-block .post-nav .post-navigation-link-previous a::before { transform: scaleX(-1); } /* pagination ------------------------------------------------------- */ /* 論文情報・学会情報のアーカイブテンプレートには content-area / main-contents が無く、 .contents-wrap が最上位になる。ページ送りだけはそこでも同じ体裁にしたいので、 このセクションのスコープにだけ .contents-wrap を足してある（:is() なので詳細度は同じ）。 */ /* 前後の矢印は button の矢印と同じ 20px にする */ :is( .content-area, .main-contents, .contents-wrap ) .wp-block-query-pagination .wp-block-query-pagination-previous::before, :is( .content-area, .main-contents, .contents-wrap ) .wp-block-query-pagination .wp-block-query-pagination-next::before { font-size: 20px; line-height: 20px; } /* リンクは primary + 白文字、現在地と dots は淡い背景 + 本文色 */ /* 親テーマは line-height: 40px で中央に見せているが、ボーダーを足すと 内容ボックスが 38px になり数字が1px下がる。グリッドで中央に置けばボーダーに依存しない （親テーマの前後矢印と同じやり方）。 */ :is( .content-area, .main-contents, .contents-wrap ) .wp-block-query-pagination-numbers > .page-numbers, :is( .content-area, .main-contents, .contents-wrap ) .post-nav-links > .post-page-numbers { display: grid; place-content: center; line-height: 1; border-radius: 0; color: var(--wp--preset--color--contrast); background-color: var(--wp--preset--color--pale-gray); } :is( .content-area, .main-contents, .contents-wrap ) .wp-block-query-pagination-numbers > a.page-numbers, :is( .content-area, .main-contents, .contents-wrap ) .post-nav-links > a.post-page-numbers { color: var(--wp--preset--color--base); background-color: var(--wp--preset--color--primary); border: solid 1px var(--wp--preset--color--primary); } /* contents-wrap ------------------------------------------------------- */ /* .section の上下 120px は本文の頭には広すぎるので、上だけ詰める。 メンバー一覧のように .main-contents を挟まないテンプレートもあるので、 .contents-wrap.section 単体でも拾えるようにしてある。 （論文・学会アーカイブは年ナビの帯を上端に置くため、下の指定で 0 に上書きされる） */ :is( .content-area, .main-contents ) .contents-wrap, .contents-wrap.section { padding-top: var(--wp--preset--spacing--50); } /* 研究テーマだけは下の余白を持たせない。 上の指定と同じ範囲を、body のクラス（slug-research-topic）で絞って打ち消す。 */ .slug-research-topic :is( .content-area, .main-contents ) .contents-wrap, .slug-research-topic .contents-wrap.section { padding-bottom: 0; } /* アーカイブ・検索結果の見出し */ /* 前後の dot は title-01 と同じ作り。丸そのものの指定は dot のセレクタ束（ファイル冒頭）にある */ :is( .content-area, .main-contents ) .wp-block-query-title { display: flex; gap: var(--wp--preset--spacing--20); align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--inter), var(--wp--preset--font-family--noto-sans-jp); font-size: var(--wp--preset--font-size--32); text-transform: capitalize; margin-bottom: var(--wp--preset--spacing--50); } /* sidebar ------------------------------------------------------- */ :is( .content-area, .main-contents ) .sidebar .wp-block-heading { margin-bottom: 1em; border-radius: 0; font-family: var(--wp--preset--font-family--inter), var(--wp--preset--font-family--noto-sans-jp); font-size: var(--wp--preset--font-size--18); text-transform: capitalize; } :is( .content-area, .main-contents ) .schema-how-to .schema-how-to-total-time { border-radius: 0; } :is( .content-area, .main-contents ) .wp-block-search__button-inside .wp-block-search__inside-wrapper, :is( .content-area, .main-contents ) .wp-block-search__input { border-radius: 0; } :is( .content-area, .main-contents ) .wp-block-search__button-inside .wp-block-search__button.has-icon { padding: 8px; border-radius: 0; } :is( .content-area, .main-contents ) .wp-block-search__button-inside .wp-block-search__button.has-icon svg { width: 24px; height: 24px; fill: var(--wp--preset--color--primary); } /* menu-list ------------------------------------------------------- */ /* フッターの menu-list と同じ体裁にする。並びは縦積み。 カテゴリー・アーカイブのどちらでも効くよう、ブロック名ではなく ブロックスタイル is-style-arrow-link-list に対して当てる。 */ .sidebar .menu-list .is-style-arrow-link-list > li { display: block; padding: 0; border-top: none; } .sidebar .menu-list .is-style-arrow-link-list li a { display: inline-block !important; padding: .5em 0 .5em 20px !important; font-family: var(--wp--preset--font-family--inter); font-size: var(--wp--preset--font-size--14); line-height: 1.5; text-transform: capitalize; position: relative; } /* top に em を使うと擬似要素側の font-size（16px）で解決され、a の行高とずれる。 上下パディングが同じなので 50% で中央に合わせる。 */ .sidebar .menu-list .is-style-arrow-link-list li a::before { content: '\e315'; font-family: 'Material Symbols Outlined'; font-size: 16px; line-height: 16px; font-variation-settings: 'FILL' 0, 'wght' 300; position: absolute; top: calc(50% - 8px); left: 0; transition: color .2s, left .2s; } /* 親テーマの is-style-arrow-link-list が付ける右向き矢印は消す。 categories は a::after、archives は投稿数の都合で li::after に付く。 */ .sidebar .menu-list .is-style-arrow-link-list li a::after, .sidebar .menu-list .is-style-arrow-link-list > li::after { content: none; } /* ------------------------------------------------------- publication 論文情報。1件分のまとまりが pub-cont。 マークアップは同期パターン「pub-cont」（wp_block）で、各記事の本文に実体として コピーされる。アーカイブでは投稿テンプレート内の post-content から出力されるため、 DOM は次の入れ子になる。 ul.wp-block-post-template > li.wp-block-post > .entry-content.wp-block-post-content > .pub-cont 体裁はトップページの news-cont に合わせている （1px の区切り線 / 欧文は Inter / 補足テキストは 14px）。 ------------------------------------------------------- */ /* 年の切り替えナビ ------------------------------------------------------- */ /* [publication_years] ショートコードの出力。 年別アーカイブ（/publications/2024/）への導線。 デザイン未確定のため、並びと現在地が分かる最小限に留めてある。 */ /* years-section は年ナビを包む全幅の帯（テンプレート側のグループブロック）。 背景色を敷くのはこちらで、中の years-nav は余白を持たない。 */ .years-section { padding-block: var(--wp--preset--spacing--40); margin-bottom: var(--wp--preset--spacing--60); background-color: var(--wp--preset--color--pale-gray); } /* 帯を上端いっぱいに置くため、これを含むセクションの上余白を無くす。 打ち消す相手は .section の padding-top（spacing--80 の1.5倍）。 年ナビを置くアーカイブだけに効かせたいので body のクラスで絞る （これらのテンプレートには main-contents / content-area のラッパーが無い）。 */ .post-type-archive-publication .contents-wrap.section, .post-type-archive-presentation .contents-wrap.section { padding-top: 0; } /* 10列に割って左から詰める。年が11件以上になったら2行目に折り返り、 余った分は左寄せのまま列幅を保つ（列の頭が上の行と揃う）。 列幅は 1fr なのでトラックが親幅をそのまま分けきる。 左揃えは grid の既定の流れで決まるため justify-content は指定しない。 余りを中央に寄せたい場合は grid では無理で、flex ＋ li 固定幅にする必要がある （2026-09-16 に一度そうしたが、左揃えでよいと判断して grid に戻した）。 */ .years-nav ul { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0.8em; margin: 0; padding: 0; list-style: none; } /* en */ /* 見た目は is-style-outline のボタンに合わせる。 枠線は子テーマが 1px light-gray に上書きしているので、その値に揃える （この節の上にある「button」の指定を参照）。 */ /* サイズはサイト内のボタン（.wp-element-button / .wp-block-button__link）に合わせる。 左右の padding は子テーマの上書き（spacing--20）に、上下は spacing--10 に詰める。 line-height は親テーマの 1.5 に揃える。 body の 2 を継承せず、親テーマがボタンに直接指定しているため。 */ .years-nav a { display: block; padding: var(--wp--preset--spacing--10); /* 幅は指定しない。ul 側のグリッド（769px 以上は10列、768px 以下は5列。いずれも 1fr）が 決める。下限を持たせると狭い画面で列幅を超えて溢れる。 */ border: solid 1px var(--wp--preset--color--light-gray); color: var(--wp--preset--color--primary); background-color: var(--wp--preset--color--base); font-family: var(--wp--preset--font-family--inter), var(--wp--preset--font-family--noto-sans-jp); font-size: var(--wp--preset--font-size--16); line-height: 1.5; text-align: center; text-decoration: none; } /* 表示中の年は色を反転させる（outline ボタンのホバーと同じ配色） */ .years-nav .is-current a { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); background-color: var(--wp--preset--color--primary); } /* pub-cont はグループブロックなので has-global-padding と is-layout-constrained が付く。 そのままだと main-contents の内側でさらに左右余白が入り、子要素にも margin-left / margin-right: auto と max-width が効いて幅が縮む。ここで打ち消す。 */ .pub-cont.has-global-padding { padding-left: 0; padding-right: 0; } .pub-cont > * { max-width: none; margin-left: 0; margin-right: 0; } /* パターンに無い段落が足された場合の受け皿。 編集者が項目の途中で改行すると、クラスの付かない段落が pub-cont 直下にできる。 そのままだと本文サイズ（16px）で上余白も無く、前の行に貼り付いて見える。 下の各項目（pub-authors など）はクラス指定のため詳細度が高く、上書きされない。 line-height は body の 2 を継承するので指定しない。 */ .pub-cont p { margin-top: var(--wp--preset--spacing--10); margin-bottom: 0; font-size: var(--wp--preset--font-size--14); } .pub-cont { padding-bottom: var(--wp--preset--spacing--40); border-bottom: 1px solid var(--wp--preset--color--light-gray); } /* 最後の1件だけ下線を消す。 :last-child ではなく「後ろに同じものが無いもの」で拾う（mem-block と同じ考え方）。 一覧（クエリループ）は pub-cont が li ごとに包まれて兄弟にならないので li 側で、 メンバー詳細（mem-paper）は pub-cont が兄弟に並ぶので pub-cont 側で判定する。 メンバー詳細は入力の案内文（mem-note）が後ろに残ることがあるため、 :last-child では最後の1件に当たらない。 余白（padding-bottom）は残す。次のセクションとの間隔まで詰まってしまうため。 */ .wp-block-post-template > li:not( :has( ~ li ) ) .pub-cont, .mem-paper .pub-cont:not( :has( ~ .pub-cont ) ) { border-bottom: 0; } /* 2件目以降にだけ上の余白を持たせる（news-cont と同じ考え方） */ .wp-block-post-template > li + li .pub-cont { padding-top: var(--wp--preset--spacing--40); } /* 通し番号 + タイトル ------------------------------------------------------- */ /* ブロックスタイル「title-03」（is-style-title-03）でも同じ体裁が使える。 あちらは中身のクラスを見ず、1つ目を番号・2つ目以降をタイトルとして扱う。 ブロック側の flex 指定に頼らないよう display も持たせておく。 研究テーマ（topic-head）は番号を持たずタイトルだけなので、番号側の指定からは :not( .topic-head ) で外し、タイトル側の指定に .topic-head > * で入れている。 */ .pub-cont .pub-head, .is-style-title-03 { display: flex; flex-wrap: nowrap; gap: var(--wp--preset--spacing--20); align-items: baseline; margin-bottom: var(--wp--preset--spacing--20); } /* 文字サイズと行間は配下にまとめて効かせる。 タイトルは post-title（h2）で出力され、グローバルの h2 指定が継承より優先されるため、 親に置くだけでは効かない。子セレクタで明示的に上書きする。 */ .pub-cont .pub-head, .pub-cont .pub-head > *, .is-style-title-03, .is-style-title-03 > * { font-size: var(--wp--preset--font-size--24); line-height: 1.5; } /* en */ .pub-cont .pub-no, .is-style-title-03:not( .topic-head ) > *:first-child { display: flex; gap: var(--wp--preset--spacing--20); align-items: center; flex-shrink: 0; margin: 0; font-family: var(--wp--preset--font-family--inter), var(--wp--preset--font-family--noto-sans-jp); color: var(--wp--preset--color--primary); /* 桁数が変わっても番号の幅を揃える */ font-variant-numeric: tabular-nums; } /* line */ /* 番号とタイトルの区切り。news-cont の meta と同じ作り。 向こうは currentColor（＝gray）だが、こちらは番号が primary なので 線だけ gray を直接指定して同じ見え方に揃える。 */ .pub-cont .pub-no::after, .is-style-title-03:not( .topic-head ) > *:first-child::after { content: ''; flex-shrink: 0; width: 1px; height: 16px; background-color: var(--wp--preset--color--gray); opacity: .4; } /* jp */ .pub-cont .pub-title, .is-style-title-03 > * + *, .topic-head > * { /* 長いタイトルを番号の隣で折り返させる */ min-width: 0; margin: 0; font-weight: 400; } /* 著者・メタ情報 ------------------------------------------------------- */ /* 余白と文字サイズは上の .pub-cont p で共通に効くため、ここでは指定しない */ /* en */ .pub-cont .pub-meta { font-family: var(--wp--preset--font-family--inter), var(--wp--preset--font-family--noto-sans-jp); color: var(--wp--preset--color--dark-gray); } /* 誌名の斜体は編集側で書式を付ける。ここでは強制しない */ .pub-cont .pub-meta em { font-style: italic; } /* 注釈 ------------------------------------------------------- */ /* 表紙採用・特集号・受賞など、論文が受けた特別な扱いを示す行。 書誌情報ではなく「特筆したい事柄」なので、他の行より目立たせる。 現行サイトでも色付きで強調されていた（Selected as a Front Cover Picture 等）。 親テーマの段落スタイル「注釈」（is-style-notes）とは役割が違うため、 そちらには適用しない。注釈は補足を控えめに書くためのもの。 */ .pub-cont .pub-highlight { color: var(--wp--preset--color--secondary); } /* 図 ------------------------------------------------------- */ .pub-cont .pub-fig { margin-top: var(--wp--preset--spacing--20); } /* パターンの pub-fig を使わず画像ブロックを直接置いた場合も同じ体裁になるよう、 pub-cont 内の figure をまとめて中央寄せにする。 */ .pub-cont figure { margin-top: var(--wp--preset--spacing--30); margin-bottom: var(--wp--preset--spacing--30); text-align: center; } /* 図の表示上限は縦横とも 640px。縦横比は保つ。上限より小さい図は実寸のまま。 支給される図は縦横比がまちまち（横長のスキームから縦長の全体図まで）なので、 どちらか長いほうの辺で頭打ちにする。 width: auto は指定しない。WordPress 6.7 以降、遅延読み込みの画像には sizes="auto" が付く。この状態で width を auto にすると、画像の固有幅が レイアウト幅から逆算されるため max-width まで引き伸ばされてしまう （実際に 694px の図が 800px に拡大された）。width 属性の実寸を使わせる。 そのぶん max-height は要素の高さだけを切るので、縦長の図の比率は object-fit で保つ。 */ .pub-cont figure img { max-width: min( 100%, 640px ); max-height: 640px; height: auto; object-fit: contain; } /* DOI ------------------------------------------------------- */ /* en */ .pub-cont .pub-doi { gap: var(--wp--preset--spacing--20); /* ラベルが背景付きのチップなので、ベースラインではなく中央で揃える */ align-items: center; margin-top: var(--wp--preset--spacing--20); font-family: var(--wp--preset--font-family--inter), var(--wp--preset--font-family--noto-sans-jp); font-size: var(--wp--preset--font-size--14); } .pub-cont .pub-doi p { margin: 0; } /* ラベル（「DOI」の文字） */ /* 白抜きのラベル。news-cont のカテゴリー（[rel="tag"]）と同じ作りで、 背景色だけ primary からグレーに替えている。 白文字を載せるため、背景は gray（#ABADB2）ではなく dark-gray を使う。 gray に白文字だとコントラスト比が約2:1しかなく読みにくいため。 */ .pub-cont .pub-doi-label { flex-shrink: 0; padding: 2px .8em; color: var(--wp--preset--color--base); background-color: var(--wp--preset--color--dark-gray); font-size: var(--wp--preset--font-size--12); } /* リンク（DOI番号）。flex の子は既定で縮まないため min-width で折り返しを許可する */ .pub-cont .pub-doi-link { min-width: 0; } .pub-cont .pub-doi a { color: var(--wp--preset--color--primary); /* DOI は区切りが無く長いため、狭い幅でも折り返させる */ word-break: break-all; } /* ------------------------------------------------------- presentation 学会情報。1記事＝1つの学会で、発表（pre-item）を必要な数だけ並べる。 マークアップは同期パターン pre-cont（学会1件）と pre-item（発表1件）。 体裁は publication に揃えている。 ------------------------------------------------------- */ /* mem-box ------------------------------------------------------- */ /* メンバー詳細の一番外側。上下余白は section クラスの .section が持っているが、 上だけは詰める。パンくずのすぐ下に氏名が来るので、そこまで空ける必要がない。 下は .section のまま（フッターとの間隔は他のページと揃える）。 マークアップが class="mem-box section" なので .mem-box.section で詳細度を 0,2,0 にする。 .mem-box 単体（0,1,0）だと 768px 以下のブロックにある .section に記述順で負けて、 狭い幅でだけ上余白が 80 に戻ってしまう。 */ .mem-box.section { padding-top: var(--wp--preset--spacing--60); } /* mem-cont ------------------------------------------------------- */ /* グループブロックの自動クラスを打ち消す（pub-cont と同じ理由） */ .pre-cont.has-global-padding { padding-left: 0; padding-right: 0; } .pre-cont > *, .pre-cont .title > * { max-width: none; margin-left: 0; margin-right: 0; } /* 学会名と会場・会期をひとまとまりとして扱う枠。 下線・アクセント線・下の余白はブロックスタイル「title-02」 （is-style-title-02）が持つので、ここには学会記事固有の余白だけ置く。 値は記事詳細の .post-header に揃えてある。 */ .pre-cont .title { margin-bottom: 2em; } /* パターンに無い段落が足された場合の受け皿 */ .pre-cont p { margin-top: var(--wp--preset--spacing--10); margin-bottom: 0; font-size: var(--wp--preset--font-size--14); } /* 学会どうしの区切り線は引かない。 学会名の下（pre-meta の下線）で切れ目が付くため、二重にならないようにしている。 */ .pre-cont { /* 発表の連番をこの学会の中だけで数える */ counter-reset: pre-item; padding-bottom: var(--wp--preset--spacing--30); } /* 2件目以降にだけ上の余白を持たせる（pub-cont と同じ考え方） */ .wp-block-post-template > li + li .pre-cont { padding-top: var(--wp--preset--spacing--30); } /* 学会名 ------------------------------------------------------- */ /* 本文中の h2（.post-styles h2 / .single-post .wp-block-post-content h2）と同じ体裁にする。 学会名は投稿タイトル（post-title）なので上記のセレクタには当たらず、 ここで同じ指定を持たせている。 ただし下線は学会名の直下ではなく、会場・会期（pre-meta）の下に引く。 学会名と開催情報をひとまとまりとして見せるため。線の指定は pre-meta 側にある。 */ .pre-cont .pre-name { margin: 0; font-size: var(--wp--preset--font-size--24); font-weight: 400; text-align: left; } /* 会場・会期 ------------------------------------------------------- */ /* en */ /* 下線は親の title グループに引いている */ .pre-cont .pre-meta { gap: var(--wp--preset--spacing--20); align-items: center; color: var(--wp--preset--color--contrast); font-size: var(--wp--preset--font-size--14); } .pre-cont .pre-meta p { margin: 0; } /* line */ /* 会場と会期の区切り。news-cont の meta と同じ作り */ .pre-cont .pre-venue { display: flex; gap: var(--wp--preset--spacing--20); align-items: center; } .pre-cont .pre-venue::after { content: ''; flex-shrink: 0; width: 1px; height: 16px; background-color: var(--wp--preset--color--gray); opacity: .4; } /* 会場が空なら区切り線ごと出さない */ .pre-cont .pre-venue:empty { display: none; } /* 発表 ------------------------------------------------------- */ .pre-cont .pre-item { counter-increment: pre-item; margin-top: var(--wp--preset--spacing--20); } /* jp */ /* 連番は手入力せずカウンタで振る。 発表の追加・削除・並べ替えをしても番号がズレない。 */ .pre-cont .pre-item-title { display: flex; gap: .4em; /* 連番（Inter）と題目（Noto Sans JP）で書体が違うため、既定の stretch だと 箱の上端だけが揃って数字が浮く。pre-item-meta と同じくベースラインで揃える */ align-items: baseline; margin: 0; font-size: var(--wp--preset--font-size--18); font-weight: 400; line-height: 1.5; } /* en */ .pre-cont .pre-item-title::before { content: counter(pre-item) "."; flex-shrink: 0; color: var(--wp--preset--color--primary); font-family: var(--wp--preset--font-family--inter), var(--wp--preset--font-family--noto-sans-jp); font-variant-numeric: tabular-nums; } /* 発表者・発表形式 ------------------------------------------------------- */ /* gap は pre-item-title と同じ幅にする。 .4em のままだとこの行の文字サイズ（継承の14px）が基準になり、 見出し側（16-18px）より約1px狭くなって下の頭揃えがズレる。 */ .pre-cont .pre-item-meta { gap: calc(.4 * var(--wp--preset--font-size--18)); align-items: baseline; margin-top: var(--wp--preset--spacing--10); } /* 発表者の行は、見出しの連番の分だけ送って本文と頭を揃える。 連番はカウンタで振っていて桁数が変わる（1. と 10. で幅が違う）ため、 padding の固定値では揃わない。同じカウンタを不可視で置いて幅だけ借りる。 文字サイズ・書体・tabular-nums は pre-item-title::before と必ず揃えること。 片方だけ変えると頭がズレる。 */ .pre-cont .pre-item-meta::before { content: counter(pre-item) "."; flex-shrink: 0; align-self: flex-start; visibility: hidden; height: 0; overflow: hidden; font-size: var(--wp--preset--font-size--18); font-family: var(--wp--preset--font-family--inter), var(--wp--preset--font-family--noto-sans-jp); font-variant-numeric: tabular-nums; } .pre-cont .pre-item-meta p { margin: 0; } /* 登壇者を示す印（「◯」）は本文の発表者名にそのまま入れる。CSSでは描かない。 pre-item-authors::before で丸を描くと全ての発表に必ず出てしまうが、実データは 印の付きかたが揃っていない（印の無い発表が2件、印が筆頭ではなく6人目に付く発表が 1件ある）。CSSで一律に描けないので入力側に持たせている。ここに ::before を 足さないこと。二重に出る。 */ /* 括弧は入力させずCSSで付ける。 実データでは半数の発表に形式の記載が無いため、空なら括弧ごと消す。 */ .pre-cont .pre-item-type::before { content: '（'; } .pre-cont .pre-item-type::after { content: '）'; } .pre-cont .pre-item-type:empty { display: none; } /* ------------------------------------------------------- member メンバー詳細。本文一式が mem-cont。 マークアップは非同期パターン「mem-faculty」（教員・研究員）と「mem-student」（学生）で、 各記事の本文に実体としてコピーされる。 体裁は publication / presentation に揃えている （1px の区切り線 / 欧文は Inter / 補足テキストは 14px / 通し番号は primary ＋ 縦線）。 本文中の h2 の指定（.single-post .wp-block-post-content h2）は投稿タイプ post に 絞ってあり member には当たらないため、見出しの体裁は mem-block-title で持たせている。 pre-name と同じ考え方。 ------------------------------------------------------- */ /* グループブロックの自動クラスを打ち消す（pub-cont と同じ理由） */ .mem-cont.has-global-padding { padding-left: 0; padding-right: 0; } .mem-cont > * { max-width: none; margin-left: 0; margin-right: 0; } /* 2カラム（学生） ------------------------------------------------------- */ /* 学生は顔写真を左、内容を右に置く2カラム。 参考サイト（itami-lab.com のスタッフ詳細）と同じく、氏名も本文も右カラムに収める。 教員側は写真が支給されていないため1カラムのままで、この指定は当たらない。 */ .mem-cont.mem-student { gap: var(--wp--preset--spacing--50); } .mem-student > .mem-photo { flex-shrink: 0; width: 240px; margin: 0; } /* 比率（3/4）と object-fit は画像ブロックの設定として img の style 属性に出るが、 アイキャッチ未設定の投稿は親テーマの set_default_thumbnail_image が 素の に差し替えるため、その style が付かない。 default-image.png は 1200x1200（正方形）なので、そのままだと写真ありの メンバーと縦横比が揃わない。ここで同じ値をCSSでも持たせて揃える。 */ .mem-student > .mem-photo img, .mem-card-photo img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; } /* 代替画像も写真と同じく枠いっぱいに切り抜く */ .mem-student > .mem-photo img.default-image, .mem-card-photo img.default-image { object-fit: cover; } /* 詳細ページは写真が白地に1枚置かれるだけなので、代替画像には輪郭の枠線を足す */ .mem-student > .mem-photo img.default-image { box-sizing: border-box; border: solid 1px var(--wp--preset--color--pale-gray); } /* flex の子は既定で縮まないため min-width で折り返しを許可する */ .mem-student > .cont { flex: 1 1 auto; min-width: 0; } /* セクション同士の間隔。本文の余白指定（post-styles）が効かないのでここで持つ */ .mem-faculty > * + * { margin-top: var(--wp--preset--spacing--60); } /* 学生は項目が少なく行も低いので、教員より詰める */ .mem-student > .cont > * + * { margin-top: var(--wp--preset--spacing--30); } /* 氏名・英字表記・E-mail ------------------------------------------------------- */ /* ブロック側は flow なので、縦の間隔は flex + gap でここに持たせる */ .mem-cont .mem-head { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); align-items: center; text-align: center; } /* 学生は顔写真が左にあるので、右カラムの中では左揃えにして 「ドット・区分・氏名・英字表記」を1行に並べる。 詳細度が同じなので、上のルールの直後に置くこと。 */ /* 学生は「区分ラベル｜氏名／英字表記」の2カラム。 左に区分、右に氏名と英字を縦に積む。 区分は mem-name-wrap の中にあるので、その枠を display: contents で外して 中身を直接この grid に並べ、配置は grid-column / grid-row で明示する。 */ .mem-student .mem-head { display: grid; grid-template-columns: max-content 1fr; column-gap: var(--wp--preset--spacing--20); row-gap: 0; align-items: start; text-align: left; } .mem-student .mem-name-wrap { display: contents; } /* ラベルは氏名の行にだけ置き、その行の中で上下中央に合わせる */ .mem-student .mem-role { grid-column: 1; grid-row: 1; align-self: center; } .mem-student .mem-name { grid-column: 2; grid-row: 1; } .mem-student .mem-name-en { grid-column: 2; grid-row: 2; } .mem-head > * { margin: 0; } /* 区分（member_role）と氏名。教員は氏名の上、学生は mem-head の上に置く */ .mem-name-wrap { gap: 0; align-items: center; } /* jp */ /* リンクは PHP 側で外してある（assets/functions/member_role_term_text.php）。 アンカーが無いので親テーマのタグ体裁（.wp-block-post-terms [rel=tag]）は当たらず、 ここで指定するのはサイズだけでよい。色は本文（contrast）を継ぐ。 */ .mem-role { font-size: var(--wp--preset--font-size--14); } /* jp */ /* サイズは h1〜h6 のはしごとして theme.json 側で持つので、ここでは指定しない。 太さだけ pub-title / pre-name と揃える。 */ .mem-cont .mem-name { font-weight: 400; } /* en */ /* 記事の日付（.wp-block-post-date）と同じ体裁。色だけ本文色にする */ /* dot : 丸そのものの指定は title-01 と共通（ファイル冒頭の dot のセレクタ束）*/ .mem-head .mem-name-en { font-family: var(--wp--preset--font-family--inter), var(--wp--preset--font-family--noto-sans-jp); font-size: var(--wp--preset--font-size--18); color: var(--wp--preset--color--contrast); } /* 教員は英字表記を挟むように前後へ置く。学生は行頭（mem-head::before）に1つだけ */ .mem-faculty .mem-name-en { display: flex; gap: var(--wp--preset--spacing--20); align-items: center; justify-content: center; } /* en */ /* 「学位」「E-mail」のラベルは入力させずCSSで付ける。 白抜きのチップは pub-doi のラベルと同じ作り。値だけが裸で置かれるのを避ける。 */ /* 2つを縦に積む器。ラベルと値を別々の列に置いて、 ラベルの幅は長いほう（E-mail）にそろえる（1列目が max-content）。 */ .mem-head .mem-meta { display: grid; grid-template-columns: max-content 1fr; gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); align-items: center; /* mem-head の中央揃えを継承するので、ここだけ左に戻す */ text-align: left; } /* 各行は段落だが、ラベル（::before）と値を別の列に置きたいので display: contents で段落の箱を外し、中身を直接グリッドの子にする。 font-family などの継承する指定は箱が無くなっても値に効く。 */ .mem-head .mem-degree, .mem-head .mem-mail { display: contents; font-family: var(--wp--preset--font-family--inter), var(--wp--preset--font-family--noto-sans-jp); font-size: var(--wp--preset--font-size--14); } /* アドレスは区切りが無く長いため、狭い幅でも折り返させる */ .mem-head .mem-mail { word-break: break-all; } /* ラベルは1列目いっぱいに広げて、文字数が違っても同じ幅で並べる */ .mem-head .mem-degree::before, .mem-head .mem-mail::before { grid-column: 1; justify-self: stretch; padding: 2px .8em; color: var(--wp--preset--color--base); background-color: var(--wp--preset--color--dark-gray); font-size: var(--wp--preset--font-size--12); /* 幅を長いほうにそろえてあるので、短い「学位」は中央に置く */ text-align: center; } .mem-head .mem-degree::before { content: '学位'; } .mem-head .mem-mail::before { content: 'E-mail'; } /* セクション ------------------------------------------------------- */ /* 見出しを左、内容を右に置いて表のように並べる。 パターン側で flex になっているブロックと flow のままのブロックが混在しているので、 どちらも同じ体裁になるよう grid で上書きする（詳細度を .mem-cont で上げてある）。 */ .mem-cont .mem-block, .mem-list .mem-list-group { display: grid; grid-template-columns: 20% 1fr; align-items: stretch; /* ブロック側が flex のものはブロック間の既定余白（block-gap）が gap として出る */ gap: 0; /* 表組みなので本文の行間（2）より詰める。見出しセルは inherit で追随する */ line-height: 1.5; } /* 行どうしは隙間なく積む。mem-head との間の余白（block-gap）は残す */ .mem-cont .mem-block + .mem-block, .mem-list .mem-list-group + .mem-list-group { margin-top: 0; } /* 余白と区切り線は行ではなくセル側で持つ。gap を空けないので線が横につながる。 */ .mem-cont .mem-block > *, .mem-list .mem-list-group > * { /* 管理画面ではブロック間の既定余白（block-gap）がセルに入って行が崩れる */ margin-top: 0; padding-block: var(--wp--preset--spacing--40); padding-inline: var(--wp--preset--spacing--20); border-top: 1px solid var(--wp--preset--color--light-gray); } /* 学生は項目が3つで中身も1行なので、行の高さを詰める。 詳細度は同じなのでこの位置（上のルールの直後）に置くこと。 */ .mem-student .mem-block > * { padding-block: var(--wp--preset--spacing--30); } /* jp */ /* 見出し側のセルだけ上の線を primary にする。列幅（20%）のぶんだけ引かれる */ .mem-cont .mem-block-title, .mem-list .mem-list-title { margin: 0; border-top: 1px solid var(--wp--preset--color--primary); font-size: var(--wp--preset--font-size--16); font-weight: 400; /* 行（mem-block / mem-list-group）から継承して、1行目の位置を内容側と揃える */ line-height: inherit; text-align: left; } /* 最後の行にだけ下の線を引いて表を閉じる。色の割り当ては上の線と同じ。 :last-child ではなく「後ろに同じ行が無いもの」で拾う。 一覧では表組みのあとに学生のまとまり（mem-students）が続くため、 :last-child だと最後の行に当たらない。 */ .mem-cont .mem-block:not(:has(~ .mem-block)) > *, .mem-list .mem-list-group:not(:has(~ .mem-list-group)) > * { border-bottom: 1px solid var(--wp--preset--color--light-gray); } .mem-cont .mem-block:not(:has(~ .mem-block)) .mem-block-title, .mem-list .mem-list-group:not(:has(~ .mem-list-group)) .mem-list-title { border-bottom: 1px solid var(--wp--preset--color--primary); } /* 見出しと短文だけのセクション（専門分野・主な研究テーマ・コメント・出身・部活・一言）。 パターンに無い段落が足された場合の受け皿も兼ねる（pub-cont p と同じ考え方）。 */ .mem-block > p { margin-bottom: 0; } /* 入力の案内文（mem-note）と、パターンに無い段落が足された場合の受け皿。 案内文は入力後に削除される前提だが、残っていても本文と紛れないよう 補足テキストの体裁にしておく。 mem-note は mem-block の直下にも置ける。短文セクションの本文を拾う .mem-block > p と競合するため、詳細度を上げてある。 */ .mem-cont .mem-note, .mem-history > p, .mem-paper > p { margin-top: var(--wp--preset--spacing--20); margin-bottom: 0; font-size: var(--wp--preset--font-size--14); color: var(--wp--preset--color--gray); } /* 経歴・受賞歴・外部資金 ------------------------------------------------------- */ /* 年月（年度）と内容の2カラム。区切り線の位置を全行で揃えたいので、 親を grid にして1列目を max-content にする。列幅が一番長い年月に合わせて決まるため、 「令和0-0年度」のように桁数の違う行が混ざっても線が縦に揃う。 行（item）は display: contents にしてセルを直接 grid に並べる。 item ごとに flex を組むと、行をまたいで幅を揃えられないため。 */ .mem-history, .mem-award, .mem-fund { display: grid; grid-template-columns: max-content 1fr; column-gap: var(--wp--preset--spacing--20); row-gap: var(--wp--preset--spacing--10); align-items: baseline; } .mem-cont .mem-history-item, .mem-cont .mem-award-item, .mem-cont .mem-fund-item { display: contents; } .mem-history-item p, .mem-award-item p, .mem-fund-item p { margin: 0; } /* en */ .mem-history-date, .mem-award-date, .mem-fund-term { display: flex; gap: var(--wp--preset--spacing--20); align-items: center; justify-content: space-between; font-family: var(--wp--preset--font-family--inter), var(--wp--preset--font-family--noto-sans-jp); font-size: var(--wp--preset--font-size--16); color: var(--wp--preset--color--gray); /* 桁数が変わっても幅を揃える */ font-variant-numeric: tabular-nums; } /* line : 日付の後ろに置く区切り。news-cont の meta と同じ作り */ .mem-history-date::after, .mem-award-date::after, .mem-fund-term::after { content: ''; flex-shrink: 0; width: 1px; height: 16px; background-color: var(--wp--preset--color--gray); opacity: .4; } /* jp */ .mem-history-text, .mem-award-text, .mem-fund-text { min-width: 0; font-size: var(--wp--preset--font-size--16); } /* 発表論文 ------------------------------------------------------- */ /* 1件のマークアップは論文情報と同じ pub-cont（クラスも共用）。 体裁は publication セクションの .pub-cont 一式がそのまま効くので、 ここにはメンバー詳細での差分だけを置く。 */ /* 一覧（24px）より小さく。セクション見出し（16px）より大きくなりすぎないようにする */ .mem-paper .pub-head, .mem-paper .pub-head > * { margin-bottom: var(--wp--preset--spacing--10); font-size: var(--wp--preset--font-size--18); } /* 一覧は1件が独立したカードなので行間を広めに取っているが、 ここはセクションの中に収まるので、各行の間隔を詰める。 */ .mem-paper .pub-cont p { margin-top: 0; } .mem-paper .pub-cont .pub-doi { margin-top: var(--wp--preset--spacing--10); } /* 一覧では本文書体のままだが、ここは年月・書誌と同じ扱いにして Inter に揃える */ .mem-paper .pub-authors { font-family: var(--wp--preset--font-family--inter), var(--wp--preset--font-family--noto-sans-jp); color: var(--wp--preset--color--dark-gray); } /* 2件目以降の上余白。 一覧はクエリループなので .wp-block-post-template > li + li で拾っているが、 メンバー詳細では pub-cont が兄弟に並ぶため、隣接でも拾えるようにする。 */ .pub-cont + .pub-cont { padding-top: var(--wp--preset--spacing--30); } /* 講演歴 ------------------------------------------------------- */ /* 通し番号はブロックスタイル「番号付き」（is-style-ol-list）のカウンタで振る。 項目の追加・削除・並べ替えをしても番号がズレない。番号の色と位置もそちらが持つ。 */ .mem-lecture { margin-bottom: 0; font-size: var(--wp--preset--font-size--16); } /* ------------------------------------------------------- member archive メンバー一覧（/members/）。区分ごとに「見出し＋クエリループ」を並べる。 教員・研究員・博士課程は氏名だけを横に流し、学生（B6/B5/B4）は写真つきカードにする。 区分の並び順はテンプレート（アーカイブ: メンバー）の記述順そのもの。 順序を変える・区分を増やす場合はテンプレートを編集する。 区分内の並びは投稿の menu_order（管理画面でドラッグ）。 ------------------------------------------------------- */ /* 年度の見出し。体裁はブロックスタイル「title-01」（is-style-title-01）が持つ。 ショートコードの出力にはブロックの flex クラスが付かないので、縦積みだけここで補う。 共通ルール（:not(.is-vertical)）に display を足すと、is-vertical を持たない バナーの見出しまで横並びになってしまうため、この要素に限定する。 */ .mem-list-year { display: flex; flex-direction: column; } /* ブロックの flex レイアウトが自前で消しているぶん（.is-layout-flex > *）を補う */ .mem-list-year > * { margin: 0; } .mem-list { margin-top: var(--wp--preset--spacing--60); } /* 在籍者がいない区分は見出しごと隠す（教授が不在のときなど） */ .mem-list-group:not(:has(.wp-block-post)), .mem-card-group:not(:has(.wp-block-post)) { display: none; } /* 見出しと氏名の2カラム・区切り線・余白は、詳細ページの mem-block と共通のルールが持つ （「セクション」の項を参照）。ここには一覧固有のものだけ置く。 */ /* 学生 ------------------------------------------------------- */ /* 学生は人数が多く写真もあるので、表組みには入れず 「学生」の見出しでひとまとめにし、区分ごとにカードを並べる。 見出しの体裁はブロックスタイル「title-01」（is-style-title-01）が持つ。 */ .mem-students { margin-top: var(--wp--preset--spacing--80); } .mem-card-group { margin-top: var(--wp--preset--spacing--60); } .mem-card-group > * + * { margin-top: var(--wp--preset--spacing--30); } /* jp */ /* 区分名のラベル。一覧の B6 などと、学生詳細の区分に使う。 見た目はトップの news のカテゴリー（.news-cont .meta の [rel="tag"]）に似ているが、 あちらはリンクでホバーで色が反転する。こちらはただの見出しなので、 背景を dark-gray にして見分けが付くようにし、指定も別に持たせている。 */ .mem-card-group-title, .mem-student .mem-role { display: flex; align-items: center; margin: 0; /* ブロック要素なので、背景が横いっぱいに伸びないよう文字幅に収める */ width: fit-content; padding: 4px .8em; border: solid 1px var(--wp--preset--color--dark-gray); color: var(--wp--preset--color--base); background-color: var(--wp--preset--color--dark-gray); font-size: var(--wp--preset--font-size--12); font-weight: 400; line-height: 1.5; text-transform: capitalize; /* 文字の重心が上に寄って見えるので、位置だけ少し下げる */ position: relative; top: 2px; } /* 一覧へ戻る ------------------------------------------------------- */ /* mem-box section の中、最後のセクションの下に置く */ .mem-back { margin-top: var(--wp--preset--spacing--60); } /* 氏名だけの並び ------------------------------------------------------- */ .mem-name-list { gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40); margin: 0; padding: 0; list-style: none; } /* jp */ .mem-list-name { margin: 0; font-size: var(--wp--preset--font-size--16); font-weight: 400; } /* リンクの有無を見分けられるようにする。 掲載情報が未受領の教員は詳細ページを作らず氏名がテキストのままなので （member_no_single_link.php）、色と下線が付いているものだけが開ける。 */ .mem-list-name a { color: var(--wp--preset--color--primary); border-bottom: 1px solid currentColor; } /* 写真つきカード ------------------------------------------------------- */ .mem-card-list { gap: var(--wp--preset--spacing--20); margin: 0; padding: 0; list-style: none; } /* 行の高さが揃うよう、カードはセルいっぱいに伸ばす */ .mem-card { position: relative; height: 100%; padding: var(--wp--preset--spacing--20); background-color: var(--wp--preset--color--pale-gray); } /* カード全体をリンクにする。氏名のリンクをカードいっぱいに広げているので、 リンクは1枚だけで済む（写真側の isLink は外してある）。 */ .mem-card-name a::after { content: ''; position: absolute; inset: 0; } /* 比率（3/4）は詳細ページの顔写真とまとめて member セクション冒頭で持っている */ /* ホバーで拡大させるため、はみ出しを隠す */ .mem-card-photo { margin: 0; overflow: hidden; } .mem-card-photo img { transition: all .6s; } /* jp */ .mem-card-name { margin-top: 1em; margin-bottom: 0; font-weight: 400; line-height: 1.5; text-align: center; } .mem-card-name a { color: var(--wp--preset--color--contrast); } /* ------------------------------------------------------- gallery ギャラリー一覧（/news/category/gallery/）。 テンプレート「カテゴリー: Gallery」（category-gallery、DB保存）が持つクエリループで、 アイキャッチとタイトルだけのカードを3列に並べる。日付・カテゴリー・抜粋は出さない。 他のカテゴリーと /news/ は index テンプレートのままなので影響しない。 体裁はメンバー一覧の写真つきカード（mem-card）に揃えている。 ------------------------------------------------------- */ .gallery-card-list { gap: var(--wp--preset--spacing--20); margin: 0; padding: 0; list-style: none; } /* 行の高さが揃うよう、カードはセルいっぱいに伸ばす */ .gallery-card { position: relative; height: 100%; padding: var(--wp--preset--spacing--20); background-color: var(--wp--preset--color--pale-gray); } /* カード全体をリンクにする。タイトルのリンクをカードいっぱいに広げているので、 リンクは1枚だけで済む（写真側の isLink は外してある）。 */ .gallery-card-title a::after { content: ''; position: absolute; inset: 0; } /* ホバーで拡大させるため、はみ出しを隠す */ .gallery-card-photo { margin: 0; overflow: hidden; } /* 正方形に切り抜く。アイキャッチ未設定時の代替画像（default-image、1200x1200）は ブロックの aspect-ratio スタイルが付かないので、CSS でも同じ値を持たせて揃える （mem-card-photo と同じ理由）。 */ .gallery-card-photo img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; transition: all .6s; } /* jp */ /* jp */ .gallery-card-title { margin-top: 1em; margin-bottom: 0; font-size: var(--wp--preset--font-size--16); font-weight: 400; line-height: 1.5; text-align: center; } .gallery-card-title a { color: var(--wp--preset--color--contrast); } /* ギャラリーブロック ------------------------------------------------------- */ /* 写真どうしの間隔をメンバー一覧・ギャラリー一覧のカード（mem-card-list / gallery-card-list）と 同じ spacing--20 にする。コアは gap に加えて、切り抜き時の各画像の幅も --wp--style--unstable-gallery-gap から計算しているので、変数ごと差し替える。 コアがブロックごとに出す .wp-block-gallery.wp-block-gallery-N（0,2,0）より強くするため 3クラス。 */ .wp-block-gallery.has-nested-images.is-layout-flex { --wp--style--unstable-gallery-gap: var(--wp--preset--spacing--20); gap: var(--wp--preset--spacing--20); } /* gallery-cont ------------------------------------------------------- */ /* ギャラリー記事の本文パターン（段落 + ギャラリー）。 グループで包んだことで、親テーマが本文直下の要素に当てる 2em （.single-post .wp-block-post-content > * + *）が届かなくなるため、同じ値を中で持つ。 */ .gallery-cont > * + * { margin-top: 2em; } /* ------------------------------------------------------- lightbox ギャラリーブロック内の画像のクリック拡大（WordPress 標準のライトボックス）。 有効化は assets/functions/gallery_lightbox.php。ここは見た目の調整だけ。 画像の切り替えをフェードにする class は assets/js/myscript.js が付ける。 ------------------------------------------------------- */ /* サムネイル : 右上の拡大ボタンとズームカーソルはやめる。 ホバーは画像を半透明にして、下に敷いた dark-gray を透かす（hover ブロックを参照）。 transform を使わないので、コアの位置計測（getBoundingClientRect）には影響しない。 */ .wp-lightbox-container button { display: none; } .wp-lightbox-container { background-color: var(--wp--preset--color--dark-gray); } .wp-lightbox-container img { cursor: pointer; transition: opacity .6s; } /* 拡大中 : コアが overlay 全体に当てる zoom-out カーソルはやめる（背景クリックで閉じる挙動は残る） */ .wp-lightbox-overlay { cursor: default; } /* 背景 : コアが inline style で base を当てているので、!important で dark-gray にする */ .wp-lightbox-overlay .scrim { background-color: var(--wp--preset--color--dark-gray) !important; } /* 閉じる・前後の矢印 : コアの SVG は隠し、Material Symbols のグリフを白で置く。 矢印はドロワーメニューと同じ arrow_right_alt（20px / wght 300、左向きは反転）、 閉じるは close（40px / wght 100。下で上書き）。 コアの SVG（viewBox 24 の中に描かれた X）は同じ 20px でも一回り小さく見えるため、 サイズだけ揃えるのではなくグリフに差し替えている。 */ .wp-lightbox-overlay .wp-lightbox-close-icon svg, .wp-lightbox-overlay .wp-lightbox-navigation-icon svg { display: none; } .wp-lightbox-overlay .wp-lightbox-close-button::before, .wp-lightbox-overlay .wp-lightbox-navigation-button-prev::before, .wp-lightbox-overlay .wp-lightbox-navigation-button-next::before { font-family: 'Material Symbols Outlined'; content: '\e941'; font-variation-settings: 'FILL' 0, 'wght' 300; display: inline-block; font-size: 20px; line-height: 20px; color: var(--wp--preset--color--base); } /* 閉じるだけ倍の 40px。線が太く見えるので wght は 100 に落とす */ .wp-lightbox-overlay .wp-lightbox-close-button::before { content: '\e5cd'; font-variation-settings: 'FILL' 0, 'wght' 100; font-size: 40px; line-height: 40px; } .wp-lightbox-overlay .wp-lightbox-navigation-button-prev::before { transform: scaleX(-1); } /* 画像の切り替え : コアは同じ の src を差し替えるだけで演出が無い。 myscript.js が src の変化を検知して is-fading を付け直すので、それにフェードを当てる。 コアが .zoom.active ... img { animation: none } を 0,4,1 で持っているため、 それより強いセレクタにしてある。 */ @keyframes lightbox-fade { from { opacity: 0; } to { opacity: 1; } } @media not (prefers-reduced-motion) { .wp-lightbox-overlay.zoom.active .lightbox-image-container img.is-fading { animation: lightbox-fade .4s ease; } } /* ------------------------------------------------------- 1200 ------------------------------------------------------- */ @media screen and ( max-width: 1200px ) { :root { --banner-h: clamp(180px, calc(var(--vh-eff) * .2), 220px); --banner-cont-pad-top: 4px; --banner-cont-pad-bottom: 6px; --banner-frame-hover: 6px; } .header .logo .wp-block-site-logo img { width: 200px; } /* ブロック側のインライン width を上書きするため !important が要る */ .footer .info-wrap img { width: 200px !important; } .header .wp-block-navigation ul { gap: var(--wp--preset--spacing--10); } .banner .cont > p { line-height: 1.5; } } /* ------------------------------------------------------- min 1001 ------------------------------------------------------- */ @media screen and (min-width: 1001px) { .header .is-style-nav-under-line > .wp-block-navigation-item::after, .header .is-style-nav-under-line .wp-block-page-list > .wp-block-navigation-item::after { width: 4px !important; height: 4px; left: calc(50% - 2px) !important; bottom: -8px; border-radius: 50%; background-color: var(--wp--preset--color--primary); opacity: 0; visibility: hidden; } .header .is-style-nav-under-line > .wp-block-navigation-item.current-menu-item::after, .header .is-style-nav-under-line .wp-block-page-list > .wp-block-navigation-item.current-menu-item::after { opacity: 1; visibility: visible; } /* g-nav : この幅ではスクロールして is-toggle-menu が付いたときだけドロワーになる */ .is-style-header-scroll-toggle.is-toggle-menu .header .g-nav-block { gap: var(--wp--preset--spacing--20); } .is-style-header-scroll-toggle.is-toggle-menu .header .wp-block-navigation-item__content[rel] { flex-direction: row; align-items: center; justify-content: flex-start; padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20); } .is-style-header-scroll-toggle.is-toggle-menu .header .wp-block-navigation-item__content[rel]::before { font-size: var(--wp--preset--font-size--20); } /* arrow + line : 行末に arrow_right_alt を置き、その左に button-01 （is-style-arrow-right）と同じ 1px の縦線を入れる。 擬似要素は ::before が英語ラベル、::after が矢印で埋まっているので、 線は ::after の border-left として描き、align-self: stretch で伸ばす。 親テーマはホバーで ::after ごと translateX するため、そのままだと線も動く。 幅を「線 + 余白 + グリフ」で固定しておき、ホバー時は transform を打ち消して text-indent でグリフだけを箱の中でずらす（後方の hover ブロックを参照）。 Material Symbols のグリフ送りは 1em ちょうど（実測 20px / font-size 20px）。 */ .is-style-header-scroll-toggle.is-toggle-menu .header .wp-block-navigation-item__content::after { content: '\e941'; display: flex; align-items: center; align-self: stretch; box-sizing: border-box; width: calc(1em + var(--wp--preset--spacing--20) + 1px); margin-left: auto; padding-left: var(--wp--preset--spacing--20); border-left: solid 1px var(--wp--preset--color--light-gray); color: var(--wp--preset--color--primary); letter-spacing: normal; opacity: 1; visibility: visible; transition: text-indent .2s; } .is-style-header-scroll-toggle.is-toggle-menu .header .wp-block-navigation ul { gap: 0; } .is-style-header-scroll-toggle.is-toggle-menu .header .wp-block-navigation-item { border-bottom: 1px solid var(--wp--preset--color--light-gray); } } /* ------------------------------------------------------- 1000 ------------------------------------------------------- */ @media screen and ( max-width: 1000px ) { .header { padding-top: 0; padding-bottom: 0; } /* g-nav : この幅では is-toggle-menu の有無に関わらずドロワーになる。 ただし親テーマの is-toggle-menu 指定（クラス4）はメディアクエリの外にあり、 素の .header ...（クラス2〜3）より強い。スクロールして is-toggle-menu が 付いた瞬間に親の値へ戻ってしまうため、同じ形のセレクタを併記して打ち消す。 */ .header .g-nav-block, .is-style-header-scroll-toggle.is-toggle-menu .header .g-nav-block { gap: var(--wp--preset--spacing--20); } .header .wp-block-navigation-item__content[rel], .is-style-header-scroll-toggle.is-toggle-menu .header .wp-block-navigation-item__content[rel] { flex-direction: row; align-items: center; justify-content: flex-start; padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--20) var(--wp--preset--spacing--50) var(--wp--preset--spacing--30); } .header .wp-block-navigation-item__content[rel]::before, .is-style-header-scroll-toggle.is-toggle-menu .header .wp-block-navigation-item__content[rel]::before { font-size: var(--wp--preset--font-size--18); } /* arrow + line : min 1001 側と同じ。値の意味はそちらのコメントを参照 */ .header .wp-block-navigation-item__content::after, .is-style-header-scroll-toggle.is-toggle-menu .header .wp-block-navigation-item__content::after { content: '\e941'; display: flex; align-items: center; align-self: stretch; box-sizing: border-box; width: calc(1em + var(--wp--preset--spacing--20) + 1px); margin-left: auto; padding-left: var(--wp--preset--spacing--20); border-left: solid 1px var(--wp--preset--color--light-gray); color: var(--wp--preset--color--primary); letter-spacing: normal; opacity: 1; visibility: visible; transition: text-indent .2s; } .header .wp-block-navigation ul, .is-style-header-scroll-toggle.is-toggle-menu .header .wp-block-navigation ul { gap: 0; } .header .wp-block-navigation-item, .is-style-header-scroll-toggle.is-toggle-menu .header .wp-block-navigation-item { border-bottom: 1px solid var(--wp--preset--color--light-gray); } .footer .info-wrap br.sp { display: inline; } } /* ------------------------------------------------------- 769 - 781 ------------------------------------------------------- */ /* コアの columns は 781px 以下で縦積みになる。 banner は 768px で切り替えたいので、その手前の帯だけ横並びに戻す。 コア側が !important なので同じ強さが要る。 */ @media screen and ( min-width: 769px ) and ( max-width: 781px ) { .banner-box .banner-section { flex-wrap: nowrap !important; } .banner-box .banner-section > .wp-block-column { flex-basis: 0 !important; } } /* ------------------------------------------------------- 768 ------------------------------------------------------- */ @media screen and ( max-width: 768px ) { /* page-header */ /* 親テーマの .wp-block-cover, .wp-block-cover-image { min-height: 240px } が 全ての cover ブロックに一律で効いているため、page-header だけスマホ幅で狭める。 */ .wp-block-cover.page-header { min-height: 160px; } /* publication */ /* 年ナビは10列だと狭すぎるので5列に割り直す。左詰めは共通側と同じ */ .years-nav ul { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--wp--preset--spacing--10); } /* 番号とタイトルの横並びは維持する（現行サイトの「178. Title」の形）。 pub-head は flex-wrap: nowrap のままなので、タイトル側の min-width: 0 で折り返させる。 */ .pub-cont .pub-head { gap: var(--wp--preset--spacing--20); } .pub-cont .pub-head, .pub-cont .pub-head > * { font-size: var(--wp--preset--font-size--18); } /* DOI はラベルと番号を縦に積む */ .pub-cont .pub-doi { flex-wrap: wrap; } /* button */ /* SP ではボタンの高さを is-style-arrow-right に揃える。 この指定が arrow-right だけに掛かっていたため、他のスタイル （塗りつぶし・輪郭・左矢印・メール・電話）だけが上下 20 のまま低かった。 arrow-right / arrow-left はベースの指定が 0,2,0（.is-style-… + 要素）なので、 素の .wp-element-button（0,1,0）では上書きできない。セレクタを併記してある。 arrow-down は入れない。ラベルの下に矢印がもう1行入るぶん上下を 10 に詰めてあり、 合計の高さは既に arrow-right と揃っている。 */ .wp-element-button, .wp-block-button__link, .is-style-arrow-right .wp-element-button, .is-style-arrow-right .wp-block-button__link, .is-style-arrow-left .wp-element-button, .is-style-arrow-left .wp-block-button__link { padding-top: var(--wp--preset--spacing--30); padding-bottom: var(--wp--preset--spacing--30); } /* title-01 : 横並びも縦積みと同じ中央揃えにする */ :is( .title-01, .is-style-title-01 ):not(.is-vertical) { flex-direction: column; gap: var(--wp--preset--spacing--10); text-align: center; } :is( .title-01, .is-style-title-01 ):not(.is-vertical) > p { justify-content: center; } :is( .title-01, .is-style-title-01 ):not(.is-vertical) > p::after { content: ''; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background-color: var(--wp--preset--color--primary); } /* news */ .news-cont .meta, .news-cont .meta .wp-block-post-terms, .news-cont .meta .wp-block-post-date { gap: var(--wp--preset--spacing--30); } /* 下層ページの2カラム : この幅ではコアが本文とサイドバーを縦積みにする（block-gap の 20px）。 詰まって見えるので、縦に並んだときの間隔だけ spacing--50 に広げる。 横並びの幅（769px以上）はコアの列間のまま。 */ .content-area .content-columns { row-gap: var(--wp--preset--spacing--50); } /* news : ボタンを一覧の後ろに送る */ .news-box .animation-block { display: flex; flex-direction: column; } .news-box .title-block { display: contents; } .news-box :is( .title-01, .is-style-title-01 ) { order: 1; } .news-box .news-list { order: 2; } .news-box .button-set { order: 3; margin-top: var(--wp--preset--spacing--60); } /* section */ .section { padding-top: var(--wp--preset--spacing--80); padding-bottom: var(--wp--preset--spacing--80); } /* banner */ /* toggle-btn */ .header .logo { min-height: 64px; } .toggle-btn { width: 64px; height: 64px; } .toggle-btn::before, .toggle-btn p::before, .toggle-btn p::after { left: 16px; } .toggle-btn p::before { top: calc(50% - 10.5px); width: 32px; } .toggle-btn::before { width: 24px; } .toggle-btn p::after { top: calc(50% + 9.5px); width: 16px; } .nav-open .toggle-btn p::before { width: 32px; transform: translateY(10px) rotate(-45deg); } .nav-open .toggle-btn p::after { width: 32px; transform: translateY(-10px) rotate(45deg); } /* footer */ .footer .info-wrap { flex-direction: column; align-items: center; } .footer .info-wrap > .wp-block-group { align-items: center; } .footer .info-wrap .wp-block-button__link { font-size: inherit; gap: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20); padding-left: calc(var(--wp--preset--spacing--20) * 2); } .footer .info-wrap .wp-block-button__link::before { margin-left: var(--wp--preset--spacing--20); } .footer .info-wrap .wp-block-button__link::after { font-size: 20px; line-height: 20px; } .footer .footer-block { padding-top: var(--wp--preset--spacing--20); padding-bottom: var(--wp--preset--spacing--60); gap: var(--wp--preset--spacing--60); } .footer-sitemap { border: none; } .footer-sitemap a { padding-top: var(--wp--preset--spacing--30); padding-bottom: var(--wp--preset--spacing--30); } .footer-menu { padding: 0; border-bottom-color: rgba(255, 255, 255, .1); } .footer-menu .menu-list ul { grid-template-columns: 1fr; } .footer-menu .menu-list li + li { border-top: solid 1px rgba(255, 255, 255, .1); } .footer-sitemap a::before { top: calc(50% - 8px); } .footer .info-wrap br.sp { display: none; } :root { --banner-box-pad: var(--wp--preset--spacing--20); } /* fv */ .fv-box .wp-block-image img { aspect-ratio: 1 / 1; max-height: none; object-position: center; } /* banner */ .banner .wp-block-cover, .banner .cont { height: auto; } .banner .cont { padding-top: var(--wp--preset--spacing--40); padding-bottom: var(--wp--preset--spacing--50); font-size: var(--wp--preset--font-size--14); } .button-set:has(.wp-block-button + .wp-block-button) { grid-auto-flow: row; } /* image-block */ .wp-block-group.image-block { grid-template-columns: repeat(2, 1fr); margin-top: var(--wp--preset--spacing--80); } /* research topic : 親テーマの post-styles と同じく SP では詰める */ .entry-content > .topic-cont > * + * { margin-top: 1.5em; } /* member */ /* 顔写真を縮めて、右の内容側に幅を回す */ .mem-student > .mem-photo { width: 160px; } /* 経歴・受賞歴・外部資金は年月と内容を縦に積む。区切り線は位置が合わなくなるので消す。 列を揃える必要がなくなるので grid を解き、行ごとの flex に戻す。 */ .mem-history, .mem-award, .mem-fund { display: block; } .mem-cont .mem-history-item, .mem-cont .mem-award-item, .mem-cont .mem-fund-item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--10); } .mem-history-item + .mem-history-item, .mem-award-item + .mem-award-item, .mem-fund-item + .mem-fund-item { margin-top: var(--wp--preset--spacing--20); } .mem-history-date, .mem-award-date, .mem-fund-term { justify-content: flex-start; } .mem-history-date::after, .mem-award-date::after, .mem-fund-term::after { display: none; } /* 論文の横並び・折り返し・DOI の縦積みは publication 側の 768 指定がそのまま効く。 ここでは論題のサイズだけ、一覧（18px）よりさらに一段落とす。 publication の指定より後ろに書くこと。 */ .mem-paper .pub-head, .mem-paper .pub-head > * { font-size: var(--wp--preset--font-size--16); } } /* ------------------------------------------------------- 600 ------------------------------------------------------- */ @media screen and ( max-width: 600px ) { /* publication */ /* 1件あたりの上下の余白を広げる。 pub-cont はメンバー詳細（mem-paper）でも使い回しているので、 一覧（クエリループ）の中だけに効かせる。 */ .wp-block-post-template > li .pub-cont { padding-bottom: var(--wp--preset--spacing--50); } .wp-block-post-template > li + li .pub-cont { padding-top: var(--wp--preset--spacing--50); } /* 本文が縦に伸びるので、DOI との間も空ける */ .pub-cont .pub-doi { margin-top: var(--wp--preset--spacing--30); } /* presentation */ /* 学会名まわりが縦に伸びるので、発表一覧との間隔を詰める */ .pre-cont .title { margin-bottom: 1em; } /* 1件あたりの上下の余白を広げる */ .pre-cont { padding-bottom: var(--wp--preset--spacing--40); } .wp-block-post-template > li + li .pre-cont { padding-top: var(--wp--preset--spacing--40); } /* member */ /* 学生の2カラムを解いて、顔写真の下に内容を積む。 ブロック側の layout 指定（flexWrap: nowrap / verticalAlignment: top）で align-items: flex-start が当たっており、そのままだと縦積み時に 内容側（.cont）が内容幅まで縮むので stretch に戻す。 */ .mem-cont.mem-student { flex-direction: column; align-items: stretch; /* 縦の間隔になるので、横並び時（50）より詰める */ gap: var(--wp--preset--spacing--30); } /* 逆に内容側は、写真の下で1カラムになるぶんセクションの間隔を広げる */ .mem-student > .cont > * + * { margin-top: var(--wp--preset--spacing--50); } /* 幅を内容側へ回す必要がなくなるので 240px（既定）に戻し、中央へ置く */ .mem-student > .mem-photo { width: 240px; margin-inline: auto; } /* 氏名まわりは grid（区分ラベル｜氏名／英字表記の2カラム）を解いて、 教員・研究員（mem-faculty）とまったく同じ見た目にする。 1. mem-head を縦積みの中央揃えに戻す（＝.mem-cont .mem-head の指定）。 gap は grid 用の指定（column 20 / row 0）を打ち消して 10 に戻す 2. display: contents で外していた mem-name-wrap を枠として復帰させ、 「区分の下に氏名」を隙間なく積む入れ子（＝教員と同じ構造）に戻す 3. 英字表記の左右に dot を置く */ .mem-student .mem-head { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); align-items: center; text-align: center; } /* 枠を戻すと .mem-name-wrap（gap: 0 / align-items: center）がそのまま効く */ .mem-student .mem-name-wrap { display: flex; } /* 区分（B4 など）のチップの体裁を解いて、教員と同じ素の文字にする。 打ち消す相手は member セクションの .mem-card-group-title, .mem-student .mem-role。 */ .mem-student .mem-role { display: block; top: 0; width: auto; padding: 0; border: 0; color: inherit; background-color: transparent; font-size: var(--wp--preset--font-size--14); /* チップ用の 1.5 のままだと氏名に近づくので、body の 2 に戻す */ line-height: inherit; } /* 以下2つは .mem-faculty .mem-name-en と、dot のセレクタ束（ファイル冒頭）の複製 */ .mem-student .mem-name-en { display: flex; gap: var(--wp--preset--spacing--20); align-items: center; justify-content: center; } .mem-student .mem-name-en::before, .mem-student .mem-name-en::after { content: ''; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background-color: var(--wp--preset--color--primary); } /* 表組みは解かず、見出しの列幅だけ広げる（詳細ページ・一覧とも同じ体裁にする） */ .mem-cont .mem-block { grid-template-columns: 25% 1fr; } /* 一覧（/members/）は見出しの語が長いので、詳細よりさらに広げる */ .mem-list .mem-list-group { grid-template-columns: 30% 1fr; } /* 列が狭くなって行が折り返しやすくなるので、詰めていた行の高さを既定に戻す */ .mem-student .mem-block > * { padding-block: var(--wp--preset--spacing--40); } /* 教員・研究員は項目が長い（経歴・外部資金・発表論文）ので、表組みを解いて 見出しを上、内容を全幅に置く。学生は項目が短く表組みのままで足りるので触らない。 見出しの体裁は研究テーマの見出し（title-02 / is-style-title-02）と同じ： light-gray の全幅下線に primary の --title-accent-width のアクセントを重ねる。 新しい装飾ではなく、ファイル冒頭の title-02 の指定をここで再現している。 */ .mem-cont.mem-faculty .mem-block { display: block; } /* 行どうしの間隔。表組みでは線で区切っていたぶんを余白で持つ */ .mem-cont.mem-faculty .mem-block + .mem-block { margin-top: var(--wp--preset--spacing--60); } /* セル用の左右余白と、行の上線（見出し側 primary / 内容側 light-gray）を外す */ .mem-cont.mem-faculty .mem-block > * { padding-inline: 0; border-top: 0; } /* 表を閉じる下線も不要（見出しの下線は残す。あちらは border-bottom で引いている） */ .mem-cont.mem-faculty .mem-block:not( :has( ~ .mem-block ) ) > :not( .mem-block-title ) { border-bottom: 0; } /* 見出し：title-02 と同じ下線。項目名なので大きさは 18 に留める。 PC用の「最後の行の見出しだけ primary で閉じる」指定（.mem-cont .mem-block:not(:has(~ .mem-block)) .mem-block-title、 詳細度 0,4,0）に負けないよう、.mem-block を挟んで詳細度を揃えてある。 */ .mem-cont.mem-faculty .mem-block .mem-block-title { position: relative; padding-top: 0; padding-bottom: var(--wp--preset--spacing--30); border-bottom: solid 1px var(--wp--preset--color--light-gray); font-size: var(--wp--preset--font-size--18); } .mem-cont.mem-faculty .mem-block .mem-block-title::after { content: ''; display: block; width: var(--title-accent-width); height: 1px; background-color: var(--wp--preset--color--primary); position: absolute; bottom: -1px; left: 0; } /* 内容は見出しの直下から。上の余白は見出し側の padding-bottom で持つ */ .mem-cont.mem-faculty .mem-block > :not( .mem-block-title ) { padding-top: var(--wp--preset--spacing--30); padding-bottom: 0; } /* 写真つきカードは2列。 コアも 600px 以下でグリッドを1列にするが、その指定 （.wp-block-post-template-is-layout-grid[class*="columns-"]:not(.has-native-responsive-grid) ＝詳細度 0,3,0）より上げてある。 */ .mem-card-group .mem-card-query .wp-block-post-template.mem-card-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* gallery : カードは2列。詳細度の考え方は上の mem-card-list と同じ */ .main-column .gallery-list .wp-block-post-template.gallery-card-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 縦積みになったサイドバーとの間隔をお知らせ一覧に揃える。 お知らせは最後の項目の padding-bottom が row-gap（spacing--50）に足されて 50px 前後になるが、 カードにはその余白が無いので、一覧の下に同じ spacing--50 を持たせる。 */ .main-column .gallery-list { margin-bottom: var(--wp--preset--spacing--50); } } /* ------------------------------------------------------- hover ------------------------------------------------------- */ @media screen and ( min-width: 769px ) { /* member */ /* 教員・研究員の氏名 */ /* 既定で primary なので、ホバーは下線を消して変化を出す */ .mem-list-name a:hover { border-bottom-color: transparent; } /* カードはどこを触っても反応させる。 判定はカード全体（:has）で行い、氏名のリンクだけを見るのではない。 値は親テーマの post-item のホバーに揃えてある。 */ .mem-card:has( a:hover ) .mem-card-photo img { transform: scale( 1.1 ); } .mem-card:has( a:hover ) .mem-card-name a { color: var(--wp--preset--color--primary); } /* gallery : mem-card と同じ */ .gallery-card:has( a:hover ) .gallery-card-photo img { transform: scale( 1.1 ); } .gallery-card:has( a:hover ) .gallery-card-title a { color: var(--wp--preset--color--primary); } /* lightbox のサムネイル : 半透明にして下の dark-gray を透かす */ .wp-lightbox-container img:hover { opacity: .6; } .header .is-style-nav-under-line > .wp-block-navigation-item:hover::after, .header .is-style-nav-under-line .wp-block-page-list > .wp-block-navigation-item:hover::after { opacity: 1; visibility: visible; } .toggle-btn:hover::before, .toggle-btn:hover p::before, .toggle-btn:hover p::after { left: 20px; } body:not(.nav-open) .toggle-btn:hover p::before { animation: toggle-line-stretch .5s ease; } body:not(.nav-open) .toggle-btn:hover::before { animation: toggle-line-stretch .5s ease .08s; } body:not(.nav-open) .toggle-btn:hover p::after { animation: toggle-line-stretch .5s ease .16s; } .nav-open .toggle-btn:hover p::before { transform: translateY(13px) rotate(-45deg) scaleX(1.35); } .nav-open .toggle-btn:hover p::after { transform: translateY(-13px) rotate(45deg) scaleX(1.35); } .footer-sitemap a:hover { color: var(--wp--preset--color--gray); } .footer-sitemap a:hover::before { left: 2px; color: var(--wp--preset--color--gray); } .sidebar .menu-list .is-style-arrow-link-list li a:hover { color: var(--wp--preset--color--primary); } .sidebar .menu-list .is-style-arrow-link-list li a:hover::before { left: 2px; color: var(--wp--preset--color--primary); } :is( .content-area, .main-contents, .contents-wrap ) .wp-block-query-pagination-numbers > a.page-numbers:hover, :is( .content-area, .main-contents, .contents-wrap ) .post-nav-links > a.post-page-numbers:hover { color: var(--wp--preset--color--primary); background-color: var(--wp--preset--color--base); } .is-style-arrow-right .wp-element-button:hover, .is-style-arrow-right .wp-block-button__link:hover, .is-style-arrow-left .wp-element-button:hover, .is-style-arrow-left .wp-block-button__link:hover { color: var(--wp--preset--color--base); background-color: var(--wp--preset--color--primary); } .is-style-arrow-right .wp-element-button:hover::after, .is-style-arrow-right .wp-block-button__link:hover::after { color: var(--wp--preset--color--base); transform: translateX(20%); } /* scaleX(-1) を保ったまま動かすので、見た目は左に出る */ .is-style-arrow-left .wp-element-button:hover::after, .is-style-arrow-left .wp-block-button__link:hover::after { color: var(--wp--preset--color--base); transform: scaleX(-1) translateX(20%); } .banner .link-to-cover-and-group-blocks:hover .wp-block-cover .wp-block-cover__background { opacity: .5; } .banner .link-to-cover-and-group-blocks:hover .wp-block-cover .wp-block-cover__image-background { transform: scale(1.1); } .banner .link-to-cover-and-group-blocks:hover .wp-block-cover__inner-container { padding: var(--banner-frame-hover); } .banner .link-to-cover-and-group-blocks:hover :is( .title-01, .is-style-title-01 ) > p { color: var(--wp--preset--color--primary); } :is( .content-area, .main-contents ) .schema-faq .schema-faq-question:hover { color: var(--wp--preset--color--primary); } .news-cont .meta .wp-block-post-terms [rel="tag"]:hover, :is( .content-area, .main-contents ) .post-header .wp-block-post-terms [rel="tag"]:hover { color: var(--wp--preset--color--primary); background-color: var(--wp--preset--color--base); } .news-cont .cont:hover .wp-block-post-title a { color: var(--wp--preset--color--primary); } /* 年ナビ。outline ボタンのホバーと同じく色を反転させる */ .years-nav li:not(.is-current) a:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); background-color: var(--wp--preset--color--primary); } } /* ------------------------------------------------------- hover min 769 max 1000 ------------------------------------------------------- */ @media screen and ( min-width: 769px ) and ( max-width: 1000px ) { /* is-toggle-menu 付きの側も併記する。理由はレイアウト側（1000 のブロック）と同じ */ .nav-open .header .wp-block-navigation-item__content:hover, .nav-open .is-style-header-scroll-toggle.is-toggle-menu .header .wp-block-navigation-item__content:hover { background-color: var(--wp--preset--color--pale-gray); } /* 親テーマは ::after ごと translateX(5px) するが、::after には区切り線の border-left も乗っているので線まで動いてしまう。transform は打ち消し、 text-indent でグリフだけを右へずらす。 */ .nav-open .header .wp-block-navigation-item__content:hover::after, .nav-open .is-style-header-scroll-toggle.is-toggle-menu .header .wp-block-navigation-item__content:hover::after { transform: none; text-indent: 5px; } } /* ------------------------------------------------------- hover min 1001 ------------------------------------------------------- */ @media screen and ( min-width: 1001px ) { /* ドロワーは is-toggle-menu が付いているあいだだけ存在する */ .nav-open .is-style-header-scroll-toggle.is-toggle-menu .header .wp-block-navigation-item__content:hover { background-color: var(--wp--preset--color--pale-gray); } /* 線を動かさず矢印だけずらす。理由は min 769 - max 1000 側と同じ */ .nav-open .is-style-header-scroll-toggle.is-toggle-menu .header .wp-block-navigation-item__content:hover::after { transform: none; text-indent: 5px; } }