既定（下線・青色）を打ち消し、
pill 形のアクセント塗りボタンに */
.mv-mod-cta {
text-align: center;
margin: 2em 0 0;
}
.mv-mod-cta-btn, a.mv-mod-cta-btn, .mv-mod-cta a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 28px;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
background: var(--mv-accent);
color: #fff !important;
/* a タグの色既定を打ち消す */
border: 1px solid var(--mv-accent);
border-radius: var(--mv-radius-pill);
text-decoration: none !important;
/* a タグの下線を除去 */
white-space: nowrap;
transition: background 0.18s, transform 0.18s, box-shadow 0.18s, border-color 0.18s;
box-shadow: 0 4px 12px var(--mv-accent-bg);
cursor: pointer;
}
.mv-mod-cta-btn:hover, a.mv-mod-cta-btn:hover, .mv-mod-cta a:hover {
background: var(--mv-accent-dark);
border-color: var(--mv-accent-dark);
color: #fff !important;
transform: translateY(-1px);
box-shadow: 0 6px 18px var(--mv-accent-bg);
text-decoration: none !important;
}
.mv-mod-cta-btn .material-symbols-outlined, .mv-mod-cta a .material-symbols-outlined {
font-size: 18px;
line-height: 1;
}
/* ==========================================================================
★★★ CTN_ADDITIONAL_MODULES_START
追加：表示確認テンプレで使用するモジュール用スタイル（不足分の補強）
front_code 実出力に対して不足していた CSS を補う。
- mid=8/48 .custom_html
- mid=10-13 .col2_wrap / .col2_block
- mid=18/19 .info_table.no_head / .info_table.left_head
- mid=26/57 .post_list_mod
- mid=27 .event_list_mod
- mid=28 .graph_cont.graph_pie ほか
- mid=46 .accordion_set
- mid=49 .movie_gallery
- mid=50 .kv_block
- mid=51 .banner_set
- mid=52 .logo_banner
- mid=53 .bg_editor / mid=54 .border_editor
- mid=58/59 .recruit_list
========================================================================== */
/* ---- mid=8/48 HTML/CSS/JS 埋め込み ---- */
.custom_html {
margin: 1em 0;
padding: 14px 18px;
background: var(--mv-surface-soft);
border: 1px dashed var(--mv-border);
border-radius: var(--mv-radius-sm);
font-size: 14px;
color: var(--mv-text-sub);
}
/* ---- mid=10-13 2カラム ---- */
.col2_wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin: 1.6em 0;
}
.col2_wrap > .col2_block {
min-width: 0;
}
@media (max-width: 900px) {
.col2_wrap {
grid-template-columns: 1fr;
gap: 16px;
}
}
/* ---- mid=18 テーブル（ヘッダーなし） ---- */
.info_table.no_head th {
display: none;
}
/* ---- mid=19 テーブル（左表題） ---- */
.info_table.left_head th {
width: 28%;
white-space: nowrap;
text-align: left;
}
@media (max-width: 700px) {
.info_table.left_head th {
width: auto;
white-space: normal;
}
}
/* ---- mid=27 イベント一覧モジュール ----
※ mid=26 お知らせ一覧（.post_list_mod）のスタイルは common.css 側で
全ページ共通として定義しているのでここからは除外。 */
.event_list_mod ul {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid var(--mv-border-soft);
}
.event_list_mod li {
border-bottom: 1px solid var(--mv-border-soft);
}
.event_list_mod li a {
display: grid;
grid-template-columns: 120px 120px 1fr;
align-items: center;
gap: 16px;
padding: 14px 4px;
color: var(--mv-text);
text-decoration: none;
transition: opacity 0.15s;
}
.event_list_mod li a:hover {
opacity: 0.7;
}
.event_list_mod time {
font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
font-size: 13px;
color: var(--mv-text-mute);
}
.event_list_mod .cat {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 10px;
font-size: 11px;
font-weight: 700;
border: 1px solid var(--mv-accent);
border-radius: var(--mv-radius-sm);
color: var(--mv-accent);
width: fit-content;
}
.event_list_mod .ttl {
font-size: 14px;
font-weight: 500;
line-height: 1.6;
}
@media (max-width: 700px) {
.event_list_mod li a {
grid-template-columns: 1fr;
gap: 4px;
padding: 12px 4px;
}
}
/* ---- mid=28-31 グラフ：Chart.js 用 chart_wrap サイズ指定 ----
Chart.js の canvas が親要素の幅にフィットして横幅いっぱいに描画される。
円グラフは正方形（aspect-ratio:1）、棒/折れ線は固定 height で描画。 */
.graph_cont .chart_wrap {
width: 100%;
position: relative;
}
.graph_cont .chart_wrap_pie {
aspect-ratio: 1;
max-width: 100%;
}
.graph_cont .chart_wrap_h {
height: clamp(220px, 36vw, 360px);
}
.graph_cont .chart_wrap_v {
height: clamp(240px, 38vw, 400px);
}
.graph_cont .chart_wrap_line {
height: clamp(260px, 40vw, 420px);
}
.graph_cont .chart_wrap > canvas {
width: 100% !important;
height: 100% !important;
max-width: 100%;
display: block;
}
/* ---- mid=46 .accordion_set（汎用アコーディオン） ---- */
.accordion_set {
display: flex;
flex-direction: column;
gap: 8px;
margin: 1em 0;
}
.accordion_set details {
border: 1px solid var(--mv-border);
border-radius: var(--mv-radius-md);
background: var(--mv-surface);
overflow: hidden;
}
.accordion_set summary {
padding: 14px 48px 14px 18px;
font-weight: 600;
cursor: pointer;
list-style: none;
position: relative;
background: var(--mv-surface-soft);
}
.accordion_set summary::-webkit-details-marker {
display: none;
}
.accordion_set summary::after {
content: "+";
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
color: var(--mv-text-mute);
}
.accordion_set details[open] summary::after {
content: "−";
}
.accordion_set .acc_body {
padding: 14px 18px;
line-height: 1.85;
}
/* ---- mid=49 動画ギャラリー ---- */
.movie_gallery {
display: grid;
gap: 16px;
margin: 1em 0;
}
.movie_gallery.col2 {
grid-template-columns: repeat(2, 1fr);
}
.movie_gallery.col3 {
grid-template-columns: repeat(3, 1fr);
}
.movie_gallery .movie_set {
aspect-ratio: 1.7777777778;
background: #000;
border-radius: var(--mv-radius-md);
overflow: hidden;
}
.movie_gallery .movie_set iframe, .movie_gallery .movie_set video {
width: 100%;
height: 100%;
border: 0;
display: block;
}
@media (max-width: 700px) {
.movie_gallery.col2, .movie_gallery.col3 {
grid-template-columns: 1fr;
}
}
/* ---- mid=50 キービジュアル ---- */
.kv_block {
position: relative;
margin: 1em 0;
border-radius: var(--mv-radius-md);
overflow: hidden;
}
.kv_block picture, .kv_block img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 2.4;
object-fit: cover;
}
.kv_block .kv_text {
position: absolute;
left: 0;
bottom: 0;
padding: 24px 28px;
color: #fff;
background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
width: 100%;
box-sizing: border-box;
}
.kv_block .kv_text h2 {
margin: 0 0 6px;
font-size: clamp(20px, 3vw, 32px);
color: #fff;
border: 0;
background: none;
padding: 0;
}
.kv_block .kv_text p {
margin: 0;
font-size: 14px;
color: rgba(255, 255, 255, 0.9);
}
/* ---- mid=51 バナー（全幅 slick スライダー） ---- */
.banner_set {
margin: 1em 0;
position: relative;
}
.banner_set a {
display: block;
transition: opacity 0.15s;
}
.banner_set a:hover {
opacity: 0.85;
}
.banner_set img {
width: 100%;
height: auto;
display: block;
border-radius: var(--mv-radius-sm);
}
/* slick 初期化前は最初の 1 枚以外を非表示にして縦並びチラ見えを防ぐ */
.banner_slider:not(.slick-initialized) > a:nth-child(n + 2) {
display: none;
}
.banner_slider .slick-dots {
position: absolute;
bottom: 12px;
left: 0;
right: 0;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
gap: 8px;
list-style: none;
z-index: 2;
}
.banner_slider .slick-dots li {
list-style: none;
line-height: 0;
}
.banner_slider .slick-dots li::marker, .banner_slider .slick-dots li::before {
content: none !important;
}
.banner_slider .slick-dots li button {
width: 10px;
height: 10px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.6);
font-size: 0;
cursor: pointer;
}
.banner_slider .slick-dots li.slick-active button {
background: #fff;
transform: scale(1.2);
}
/* ---- mid=52 協賛ロゴバナー（全幅 slick スライダー、横に流れる）
コンテンツの max-width から飛び出してビューポート全幅に拡張する
（body 直下の overflow-x: clip と組み合わせて横スクロールは出ない） */
.logo_banner {
margin: 2em calc(50% - 50vw);
/* 左右に負マージン → ビューポート端まで拡張 */
width: 100vw;
background: var(--mv-surface);
border-top: 1px solid var(--mv-border);
border-bottom: 1px solid var(--mv-border);
padding: 24px 0;
/* 左右 padding なし、ロゴはビューポート端まで流れる */
box-sizing: border-box;
}
/* slick 初期化前は item が縦並びにならないよう横並びで表示しておく */
.logo_banner_slider:not(.slick-initialized) {
display: flex;
gap: 24px;
overflow: hidden;
align-items: center;
}
.logo_banner_slider:not(.slick-initialized) > .item {
flex: 0 0 auto;
}
/* variableWidth: true 時、各 slide は画像コンテンツの自然幅で並ぶ。
slick は .slick-slide に幅を絶対指定するが、 .item / a / img 側は
画像幅にフィットするように設計。 */
.logo_banner .item {
padding: 0 16px;
box-sizing: border-box;
}
.logo_banner .item a {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 18px;
background: #fff;
border: 1px solid var(--mv-border);
border-radius: var(--mv-radius-sm);
transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
height: 96px;
/* 高さは統一 */
box-sizing: border-box;
}
.logo_banner .item a:hover {
border-color: var(--mv-accent);
box-shadow: var(--mv-shadow-card);
opacity: 0.95;
}
.logo_banner img {
width: auto;
height: auto;
max-height: 64px;
/* 高さ上限のみで横幅は画像ネイチャー幅に依存 */
max-width: 240px;
/* 大きすぎるロゴの上限 */
display: block;
object-fit: contain;
}
.logo_banner_slider .slick-track {
display: flex;
align-items: center;
}
.logo_banner_slider .slick-slide {
height: auto;
/* 高さは a の指定 96px に従う */
}
/* ---- mid=53/54 背景付き/罫線付き本文 ---- */
.mod_cont.bg_editor {
padding: 22px 24px;
background: var(--mv-surface-alt);
border-radius: var(--mv-radius-md);
}
.mod_cont.border_editor {
padding: 22px 24px;
border: 2px solid var(--mv-border);
border-radius: var(--mv-radius-md);
}
/* mid=53 / mid=54 の説明文（.editor）内、最初の見出しは上余白を 0 にして
枠との段差を防ぐ */
.mod_cont.bg_editor > .editor > :first-child, .mod_cont.border_editor > .editor > :first-child, .mod_cont.bg_editor > .editor > h1:first-child, .mod_cont.bg_editor > .editor > h2:first-child, .mod_cont.bg_editor > .editor > h3:first-child, .mod_cont.bg_editor > .editor > h4:first-child, .mod_cont.bg_editor > .editor > h5:first-child, .mod_cont.bg_editor > .editor > h6:first-child, .mod_cont.border_editor > .editor > h1:first-child, .mod_cont.border_editor > .editor > h2:first-child, .mod_cont.border_editor > .editor > h3:first-child, .mod_cont.border_editor > .editor > h4:first-child, .mod_cont.border_editor > .editor > h5:first-child, .mod_cont.border_editor > .editor > h6:first-child {
margin-top: 0;
}
/* ---- mid=58/59 採用一覧 ---- */
.recruit_list ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.recruit_list li a {
display: grid;
grid-template-columns: 1fr 120px 120px;
gap: 16px;
align-items: center;
padding: 14px 18px;
background: var(--mv-surface);
border: 1px solid var(--mv-border);
border-radius: var(--mv-radius-md);
color: var(--mv-text);
text-decoration: none;
transition: border-color 0.15s, background 0.15s;
}
.recruit_list li a:hover {
border-color: var(--mv-accent);
background: var(--mv-accent-bg);
}
.recruit_list .post {
font-weight: 700;
}
.recruit_list .kind, .recruit_list .loc {
font-size: 12px;
color: var(--mv-text-mute);
display: inline-flex;
align-items: center;
gap: 4px;
}
.recruit_list .kind::before {
content: "◆";
color: var(--mv-accent);
}
.recruit_list .loc::before {
content: "📍";
}
@media (max-width: 700px) {
.recruit_list li a {
grid-template-columns: 1fr;
gap: 4px;
}
}
/* ---- mod_demo 各サンプルのラベル（single.html 表示確認用） ---- */
.mod_demo {
margin: 0 0 32px;
scroll-margin-top: 80px;
}
.mod_demo_label {
display: inline-block;
margin: 0 0 10px;
padding: 2px 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--mv-accent);
background: var(--mv-accent-bg);
border: 1px solid var(--mv-accent-border);
border-radius: var(--mv-radius-sm);
}
/* ★★★ CTN_ADDITIONAL_MODULES_END ★★★ */
/* ==========================================================================
★★★ CTN_DECORATED_LIST_RESET_START
装飾系リストラッパー内のリストスタイル一括打ち消し
──────────────────────────────────────────────────────────────────────
.btn_list / .sdgs_icon / .gallery / .link_list / .relation_link /
.faq_set / .post_list_mod / .event_list_mod / .recruit_list /
.logo_banner / .movie_gallery / .accordion_set / .mod_slider /
.graph_cont .graph_legend / .attention_list /
.faq_set_accordion などの「装飾された UL/OL」配下に、
ブラウザ既定の disc/decimal や本文用の ::before マーカーが
一切乗らないようにする。
.anchor_link だけは明示的に decimal 表示を保持する。
========================================================================== */
/* 装飾ラッパー内のリストは list-style:none と左 padding/margin リセット。
ただし ::before でアイコン表示する .attention_list li や、
セルに余白を持つ .relation_link の link_set / dt は除外しておく
（padding-left を !important でリセットすると ::before やタイトル左余白が
消えてしまうため）。 */
.btn_list ul, .btn_list ol, .btn_list li, .sdgs_icon ul, .sdgs_icon li, .gallery, .gallery > .gallery_set, .movie_gallery, .movie_gallery > .movie_set, .attention_list ul, .link_list ul, .link_list ol, .link_list li, .relation_link dl, .relation_link dd, .faq_set, .faq_set dt, .faq_set dd, .faq_set_accordion, .faq_set_accordion .faq_item, .event_list_mod ul, .event_list_mod li, .recruit_list ul, .recruit_list li, .logo_banner ul, .logo_banner li, .accordion_set, .accordion_set details, .mod_slider .main_slider, .mod_slider .thumb_slider, .graph_cont .graph_legend, .graph_cont .graph_legend > li {
list-style: none !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
/* .anchor_link ラッパー自身は padding を持つため、汎用リセットに含めず
ul / li にだけ list-style:none と左 padding/margin 0 を当てる。 */
.anchor_link ul, .anchor_link li {
list-style: none !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
/* .attention_list li は list-style だけ消し、padding/margin は維持
（::before の ※ マークと本文テキストの間に余白を確保するため） */
.attention_list li {
list-style: none !important;
}
/* 装飾ラッパー内の li にブラウザ既定の disc / decimal ::marker が
出ないよう完全除去（個別装飾の ::before は別セレクタで content 指定済み） */
.btn_list li::marker, .sdgs_icon li::marker, .gallery > .gallery_set::marker, .movie_gallery > .movie_set::marker, .event_list_mod li::marker, .recruit_list li::marker, .logo_banner li::marker, .link_list li::marker, .relation_link dt::marker, .relation_link dd::marker {
content: none !important;
}
/* 装飾ラッパー内の li にブラウザ既定の左余白が乗らないよう打ち消し */
.btn_list li, .sdgs_icon li, .event_list_mod li, .recruit_list li, .logo_banner li, .link_list li, .attention_list li {
text-indent: 0;
}
/* .anchor_link の li::marker は出さない（前段の reset で list-style:none、
個別の .anchor_link a::before で Material アイコンを表示する設計のため） */
.anchor_link li::marker {
content: none !important;
}
/* ★★★ CTN_DECORATED_LIST_RESET_END ★★★ */
/* ==========================================================================
★★★ CTN_SLICK_BASE_START
mid=21 スライドショー用 slick の最小限ベーススタイル
（社内ルール：jsライブラリの slick.css は使用しない。動作に必要な
track / list / slide / arrows / dots だけを自前で記述する）
========================================================================== */
.mod_slider .main_slider {
position: relative;
border-radius: var(--mv-radius-md);
overflow: hidden;
background: var(--mv-surface-alt);
/* slick の fade モードはアクティブスライドに高い z-index を付与するため、
stacking context を内部に閉じ込めてヘッダー（z-index:100）等を覆わないようにする */
isolation: isolate;
z-index: 0;
}
/* slick が組み立てる構造への基本宣言 */
.mod_slider .slick-slider {
position: relative;
display: block;
box-sizing: border-box;
user-select: none;
-webkit-touch-callout: none;
touch-action: pan-y;
}
.mod_slider .slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
}
.mod_slider .slick-list:focus {
outline: none;
}
.mod_slider .slick-track {
position: relative;
top: 0;
left: 0;
display: flex;
align-items: stretch;
}
.mod_slider .slick-track::before, .mod_slider .slick-track::after {
content: "";
display: table;
}
.mod_slider .slick-slide {
display: none;
float: left;
min-height: 1px;
outline: none;
}
.mod_slider .slick-initialized .slick-slide {
display: block;
}
.mod_slider .slick-loading .slick-slide {
visibility: hidden;
}
/* スライド中の 画像 */
.mod_slider .main_slider .item {
line-height: 0;
}
.mod_slider .main_slider .item img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 1.7777777778;
object-fit: cover;
}
/* 矢印 prev / next
slick の fade モードはアクティブスライドに z-index:1000 を動的付与するため、
矢印・ドットは 1001 以上にして必ず最前面に出す。 */
.mod_slider .slick-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1010;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.45);
color: #fff;
font-size: 22px;
font-family: inherit;
line-height: 1;
cursor: pointer;
/* flex 中央寄せで矢印文字を縦横ともに正確に中央配置 */
display: inline-flex;
align-items: center;
justify-content: center;
/* button のデフォルト指定差異を吸収 */
appearance: none;
-webkit-appearance: none;
box-sizing: border-box;
text-align: center;
text-indent: 0;
vertical-align: middle;
transition: background 0.2s;
}
.mod_slider .slick-arrow:hover, .mod_slider .slick-arrow:focus-visible {
background: rgba(0, 0, 0, 0.7);
outline: none;
}
.mod_slider .slick-prev {
left: 14px;
}
.mod_slider .slick-next {
right: 14px;
}
/* 矢印グリフ：button 内テキストを使わず、CSS の border で描画して正確に中央配置 */
.mod_slider .slick-arrow {
font-size: 0;
}
.mod_slider .slick-prev::before, .mod_slider .slick-next::before {
content: "";
display: block;
width: 10px;
height: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
pointer-events: none;
}
.mod_slider .slick-prev::before {
transform: rotate(-135deg);
margin-right: -3px;
/* 視覚上の中央調整（左矢印は右に寄る分を補正） */
}
.mod_slider .slick-next::before {
transform: rotate(45deg);
margin-left: -3px;
}
.mod_slider .slick-disabled {
opacity: 0.4;
cursor: default;
}
/* ドット（active slide z-index:1000 の上に出す） */
.mod_slider .slick-dots {
position: absolute;
bottom: 14px;
left: 0;
right: 0;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
gap: 8px;
list-style: none;
z-index: 1010;
}
.mod_slider .slick-dots li {
line-height: 0;
list-style: none;
padding: 0;
margin: 0;
}
.mod_slider .slick-dots li::marker, .mod_slider .slick-dots li::before {
content: none !important;
display: none !important;
}
.mod_slider .slick-dots li button {
width: 10px;
height: 10px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.55);
font-size: 0;
color: transparent;
cursor: pointer;
transition: background 0.2s, transform 0.2s;
}
.mod_slider .slick-dots li.slick-active button {
background: #fff;
transform: scale(1.25);
}
.mod_slider .slick-dots li button:focus-visible {
outline: 2px solid var(--mv-accent);
outline-offset: 2px;
}
@media (max-width: 640px) {
.mod_slider .slick-arrow {
display: none !important;
}
.mod_slider .slick-dots {
bottom: 8px;
}
}
/* ★★★ CTN_SLICK_BASE_END ★★★ */
body.pg_eventdetail .post_article_body .border_cont h2, body.pg_eventdetail .post_article_body .border_cont h3, body.pg_eventdetail .post_article_body .border_cont h4, body.pg_eventdetail .post_article_body .border_cont h5, body.pg_eventdetail .post_article_body .border_cont h6, body.pg_eventdetail .post_article_body .border_cont .mv-mod-h2, body.pg_eventdetail .post_article_body .border_cont .mv-mod-h3, body.pg_eventdetail .post_article_body .border_cont .mv-mod-h4, body.pg_eventdetail .post_article_body .border_cont .mv-mod-h5, body.pg_eventdetail .post_article_body .bg_cont h2, body.pg_eventdetail .post_article_body .bg_cont h3, body.pg_eventdetail .post_article_body .bg_cont h4, body.pg_eventdetail .post_article_body .bg_cont h5, body.pg_eventdetail .post_article_body .bg_cont h6, body.pg_eventdetail .post_article_body .bg_cont .mv-mod-h2, body.pg_eventdetail .post_article_body .bg_cont .mv-mod-h3, body.pg_eventdetail .post_article_body .bg_cont .mv-mod-h4, body.pg_eventdetail .post_article_body .bg_cont .mv-mod-h5 {
margin-top: 0;
}