/* =========================================================================
* style-2026-teaser.css — サイト全スタイル(1 ファイル構成)
*
* 構成:
* 1. 2025 年ティーザー由来のベーススタイル(リセット/セクション/Tailwind)
* 出典: tech-day/2025-teaser/assets/css/style.css(ビルド成果物)。
* 2026-08-19 に未使用ルールを削除し(約 8,700 行 → 約 2,500 行)、
* 2026 年版の変更(body の overflow、roundBox のリデザイン、装飾の
* 静止表示など)を該当ルールへ直接統合した。
* 2. 末尾「2026 年版で新規に追加したスタイル」: ヒーロー画面・ヘッダー・
* 申込チケット・開催日看板・セクション装飾キャラクターなど
*
* かつては style-2025-teaser.css(無改変移植)+ overrides-2026.css(後勝ち
* 上書き)の二層構成だったが、詳細度・読み込み順の罠が多いため 1 ファイルに
* 統合した。統合前の各ファイルは git 履歴(2026-08-19 以前)を参照。
* 画像は url("../img/…") の相対参照のため、このファイルは public/assets/css/
* から動かさないこと(README「CSS の方針」参照)。
* ========================================================================= */
*,
*::before,
*::after {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:where(html) {
-webkit-text-size-adjust: none;
color-scheme: dark light;
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;
}
@media (prefers-reduced-motion: no-preference) {
:where(html:focus-within) {
scroll-behavior: smooth;
}
}
:where(body) {
line-height: 1.5;
font-family: system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
}
:where(button) {
all: unset;
}
:where(input, button, textarea, select) {
font: inherit;
color: inherit;
}
:where(button, label, select, summary, [role=button], [role=option]) {
cursor: pointer;
}
:where(:disabled) {
cursor: not-allowed;
}
:where(label:has(> input:disabled), label:has(+ input:disabled)) {
cursor: not-allowed;
}
:where(a) {
color: inherit;
text-underline-offset: 0.2ex;
}
:where(ul, ol) {
list-style: none;
}
:where(img, svg, video, canvas, audio, iframe, embed, object) {
display: block;
}
:where(img, picture, svg, video) {
max-inline-size: 100%;
block-size: auto;
}
:where(p, h1, h2, h3, h4, h5, h6) {
overflow-wrap: break-word;
}
:where(h1, h2, h3) {
line-height: calc(1em + 0.5rem);
text-wrap: balance;
}
:where(:focus-visible) {
outline: 3px solid CanvasText;
-webkit-box-shadow: 0 0 0 5px Canvas;
box-shadow: 0 0 0 5px Canvas;
outline-offset: 1px;
}
:where(:focus-visible, :target) {
scroll-margin-block: 8vh;
}
:where(.visually-hidden:not(:focus-within, :active)) {
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
height: 1px !important;
width: 1px !important;
overflow: hidden !important;
position: absolute !important;
white-space: nowrap !important;
border: 0 !important;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
scroll-margin-top: var(--scrollPadding);
font-size: 100%;
}
*::before, *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
ul,
ol,
dd {
padding: 0;
margin: 0;
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
font-size: inherit;
font-weight: inherit;
}
li,
td,
th,
dt,
dd,
p,
figcaption {
text-align: inherit;
}
button,
input::-moz-focus-inner,
select,
textarea,
table {
font-size: 100%;
}
section {
clear: both;
position: relative;
z-index: 2;
}
button {
padding: 0;
color: inherit;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
background-color: transparent;
border: none;
}
picture {
display: block;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
line-height: 1;
}
:root {
--headerHeight: 8.5rem;
--scrollPadding: 8.5rem;
}
html,
body {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
width: 100%;
/* 2025 年版は overflow: hidden。hidden の body は「スクロールしないスクロール
コンテナ」になり、子孫の position: sticky(申込チケット・開催日看板)が
ビューポートに追従しなくなる(このサイトのスクロールは html 側の
overflow: auto)。clip なら同じくはみ出しを切りつつスクロールコンテナを
作らない。※コメント内に波括弧を書くと tests/static-motion.test.mjs の
正規表現がルールを跨いで誤判定するため使用しないこと */
overflow: clip;
font-family: "M PLUS 1p", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
line-height: 1.75;
color: #333;
letter-spacing: 0.04em;
word-wrap: break-word;
overflow-wrap: break-word;
background-color: #fff;
-webkit-font-smoothing: antialiased;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
font-size: 1.6rem;
}
@media not screen and (min-width: 768px) {
body {
font-size: clamp(1.4rem,3.7333333333vw,1.6rem);
}
}
html {
overflow: auto;
font-size: 62.5%;
}
html:has(*:popover-open) {
overflow: hidden;
}
html:has(*:popover-open) body {
overflow: auto;
scrollbar-gutter: stable;
}
main {
/* 2025 年版はメインビジュアルが position: fixed でここに padding-top: 100vh を
取っていたが、2026 年版はヒーローが通常フローで 1 画面分を占めるため不要。
padding-bottom はコンテンツとフッターの間隔(旧イラスト帯の余白の代替)。
sticky の申込チケットの包含ブロックは main のコンテンツボックスなので、
チケットはこの余白の上端(コンテンツ末尾)で止まり、フッターに接しない */
padding-bottom: clamp(48px, calc(80 / 1366 * 100vw), 96px);
}
p {
padding: 0;
margin: 0;
font-weight: normal;
line-height: 1.75;
text-align: left;
letter-spacing: 0.04em;
word-break: normal;
font-size: 1.6rem;
}
@media not screen and (min-width: 768px) {
p {
font-size: clamp(1.4rem,3.7333333333vw,1.6rem);
line-height: 1.8571428571;
}
}
p + p {
margin-top: 1.88em;
}
::-moz-selection {
color: #fff;
background-color: #2864eb;
}
::selection {
color: #fff;
background-color: #2864eb;
}
a,
button {
color: inherit;
text-decoration: none;
}
a:not([class]),
button:not([class]) {
color: #275ac8;
text-decoration: underline;
}
a[href^="mailto:"],
button[href^="mailto:"] {
text-decoration: none;
}
a:focus-visible,
button:focus-visible {
border: 0;
outline: solid 0.2rem #2864eb;
outline-offset: 0.3rem;
-webkit-box-shadow: none;
box-shadow: none;
}
.contentInner {
width: 100%;
max-width: 100rem;
padding: 0;
margin: 0 auto;
}
@media not screen and (min-width: 1011px) {
.contentInner {
padding: 0 2rem;
}
}
@media not screen and (min-width: 768px) {
.contentInner {
padding: 0 min(5.3333333333vw,4rem);
}
.pcOnly {
display: none !important;
}
}
@media screen and (min-width: 768px) {
.spOnly {
display: none !important;
}
}
.txtHidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
white-space: nowrap;
}
.resImg {
max-width: 100%;
max-height: 100%;
}
/* ボックス */
/* コンテンツ枠: 2025 年版は「淡色ベタ塗りの外枠+白い内箱(boxInner)」の
二重枠だったが、2026 年版で KV のフラットな線画のトンマナに合わせて
「白いカード+セクション色の 2px 枠+右下へずらした同系淡色のベタ影」の
1 枚カードに変更。配色は 2025 年版の枠色・淡色を継承(淡色は外枠の塗りから
影 --box-shadow-color へ移動。4 色ボックスは #contents 側で上書き) */
.roundBox {
position: relative;
z-index: 1;
margin: auto;
--box-shadow-color: #73a5ff;
background-color: #fff;
border: 2px solid #2864f0;
border-radius: clamp(0px, calc(24 / 1366 * 100vw), 24px);
box-shadow: clamp(0px, calc(10 / 1366 * 100vw), 10px)
clamp(0px, calc(10 / 1366 * 100vw), 10px) 0 var(--box-shadow-color);
padding: 0;
}
@media not screen and (min-width: 768px) {
.roundBox {
border-radius: 4.2666666667vw;
box-shadow: 2.1333333333vw 2.1333333333vw 0 var(--box-shadow-color);
border-width: 0.5333333333vw;
}
}
.roundBox_ttl {
font-size: 24px;
font-weight: bold;
}
@media not screen and (min-width: 768px) {
.roundBox_ttl {
font-size: 5.3333333333vw;
width: calc(100% + 6px);
}
}
.roundBox_ttl .en {
font-size: 26px;
font-family: "Dangrek", sans-serif;
font-weight: 400;
letter-spacing: 0;
}
@media not screen and (min-width: 768px) {
.roundBox_ttl .en {
font-size: 6.4vw;
}
}
.roundBox_subTtl {
margin-top: 28px;
font-weight: bold;
font-size: 32px;
line-height: 1.3;
letter-spacing: -0.01em;
}
@media not screen and (min-width: 768px) {
.roundBox_subTtl {
font-size: 6.9333333333vw;
width: calc(100% + 24px);
}
}
.roundBox .nameList {
margin-top: 16px;
}
@media not screen and (min-width: 768px) {
.roundBox .nameList {
margin-top: 4.5333333333vw;
}
}
.roundBox .nameList li {
font-size: 14px;
font-weight: 500;
color: #777;
letter-spacing: -0.01em;
}
@media not screen and (min-width: 768px) {
.roundBox .nameList li:nth-child(1) {
margin-top: 0;
}
.roundBox .nameList li {
font-size: 3.4666666667vw;
margin-top: 1.0666666667vw;
}
}
/* 内箱(boxInner)は 2026 年リデザインで枠としての見た目をやめ、余白だけ残す */
.roundBox .boxInner {
background-color: transparent;
border: 0;
border-radius: clamp(0px, calc(40 / 1366 * 100vw), 40px);
padding: 60px;
}
@media not screen and (min-width: 768px) {
.roundBox .boxInner {
border-radius: 6.4vw;
padding: 8.5333333333vw;
}
}
.contentInner .deco {
position: absolute;
top: 0;
left: 0;
z-index: 6;
}
.contentInner .deco img {
max-width: unset;
height: auto;
}
@media not screen and (min-width: 768px) {
.contentInner .deco img {
width: 100%;
}
}
/* 本文装飾の静止表示: 各セクション装飾はモーション設定に関係なく最初から
完成状態で表示する(2025 年版のスクロール出現演出は 2026 年版で全廃。
宣言順は tests/static-motion.test.mjs の回帰検査と対応) */
.contentInner .deco {
opacity: 1;
translate: 0 0;
transition: none;
animation: none;
}
/* /ボックス */
/* ボタン */
.footBtn {
outline-color: #fff;
}
.footBtn::before {
content: "";
-webkit-transition: scale 0.4s;
transition: scale 0.4s;
}
@media not screen and (min-width: 768px) {
.footBtn {
max-width: min(78.6666666667vw,59rem);
height: min(19.7333333333vw,14.8rem);
}
.footBtn span {
font-size: min(2.6666666667vw,2rem);
}
.footBtn img {
max-width: min(57.0666666667vw,42.8rem);
}
}
@media (hover: hover) {
.footBtn:hover::before {
scale: 1.1;
}
}
.footBtn:focus-visible::before {
scale: 1.1;
}
.c_btn {
position: relative;
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
max-width: 100%;
min-height: 6.2rem;
margin: auto;
font-weight: bold;
color: #fff;
letter-spacing: 0.04em;
border-radius: 999rem;
background-color: #2864f0;
-webkit-transition: background-color 0.4s, color 0.4s;
transition: background-color 0.4s, color 0.4s;
font-size: 1.8rem;
font-family: "Dangrek", sans-serif;
}
@media not screen and (min-width: 768px) {
.c_btn {
font-size: clamp(1.8rem,4.8vw,1.8rem);
}
}
@media (hover: hover) {
.c_btn:hover {
background-color: #0040D6;
}
}
.c_btn:focus-visible {
outline-offset: 1rem;
}
/* /ボタン */
/* 申込チケットの位置決め(sticky 追従)は「2026 年版で新規に追加したスタイル」
セクションの #main .joinTicket にある(2025 年版の position: fixed +
出現アニメーション方式は廃止)。ここはホバー演出と地色のみ */
@media (hover: hover) {
.joinTicket:hover svg path.ticketBody {
fill: #1d4fc7;
}
}
.joinTicket .joinPic {
display: block;
}
/* チケットの地色。2025 年版の黄色(#FFD278)から、サイトの基調色に合わせた
ブランドブルーへ変更(2026-08-19)。線・文字は白(SVG 側の属性を参照) */
.joinTicket svg path.ticketBody {
fill: #2864f0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
/* 見出し */
.ttl_img{
margin-left: auto;
margin-right: auto;
margin-bottom: 5.4rem;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
/* /見出し */
footer {
/* 2025 年版の margin-top(PC 415px / SP 73.3vw)は、フッター上のイラスト帯
(footer:before の footerBgDeco)を translate -100% で重ねるための確保余白。
帯は前年 KV 由来のため 2026 年版で廃止し、余白も 0 にした(コンテンツとの
間隔は main の padding-bottom 側で確保) */
padding-top: 80px;
padding-bottom: 80px;
z-index: 1;
}
@media not screen and (min-width: 768px) {
footer {
padding-left: 21.3333333333vw;
padding-right: 21.3333333333vw;
}
}
@media not screen and (min-width: 768px) {
footer {
padding: 16vw 0;
}
}
footer .footer_company a {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
footer .footer_company a img {
width: 260px;
}
@media not screen and (min-width: 768px) {
footer .footer_company a img {
width: 46.4vw;
}
}
footer .footBtn {
margin-top: 50px;
margin-left: auto;
margin-right: auto;
width: 260px;
height: 68px;
background-color: #fff;
border-radius: 8px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-transition: 0.4s;
transition: 0.4s;
}
@media not screen and (min-width: 768px) {
footer .footBtn {
margin-top: 11.2vw;
}
}
footer .footBtn:hover {
opacity: 0.6;
}
footer .footBtn span {
color: #285AC8;
font-size: 12px;
font-weight: 500;
}
footer .footBtn .resImg {
width: 140px;
}
footer .footContainer {
gap: 0 min(0.5208333333vw,1rem);
}
footer .footer_nav {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
@media not screen and (min-width: 768px) {
footer .footer_nav {
margin-top: 11.2vw;
}
}
footer .footer_nav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media not screen and (min-width: 768px) {
footer .footer_nav ul {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 54.4vw;
}
}
footer .footer_nav ul li {
padding-left: 46px;
position: relative;
}
@media not screen and (min-width: 768px) {
footer .footer_nav ul li {
padding-left: 8.5333333333vw;
}
}
footer .footer_nav ul li:before {
content: "";
display: block;
top: 50%;
left: 24px;
width: 1px;
height: 14px;
background-color: #fff;
translate: 0% -50%;
position: absolute;
}
@media not screen and (min-width: 768px) {
footer .footer_nav ul li:before {
left: 4.2666666667vw;
}
}
footer .footer_nav ul li:nth-child(1) {
padding-left: 0;
}
footer .footer_nav ul li:nth-child(1):before {
display: none;
}
@media not screen and (min-width: 768px) {
footer .footer_nav ul li:nth-child(3) {
padding-left: 0;
}
footer .footer_nav ul li:nth-child(3):before {
display: none;
}
}
footer .footer_nav ul a {
font-weight: 500;
}
@media not screen and (min-width: 768px) {
footer .footer_nav ul a {
font-size: 3.2vw;
}
}
@media (hover: hover) {
footer .footer_nav ul a:hover {
text-decoration: underline;
}
}
footer .footer_nav ul a:focus-visible {
text-decoration: underline;
}
footer small {
text-align: center;
font-size: 14px;
color: #fff;
margin-top: 34px;
display: block;
}
@media not screen and (min-width: 768px) {
footer small {
margin-top: 33.6vw;
font-size: 3.2vw;
}
}
footer #toTop {
position: absolute;
width: 50px;
height: 50px;
border-radius: 9999px;
background-color: #EDF3FF;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
top: 340px;
left: calc(50% + 340px);
}
@media not screen and (min-width: 768px) {
footer #toTop {
top: 97.0666666667vw;
left: 50%;
translate: -50% 0;
}
}
/* ヘッダー */
header {
position: fixed;
z-index: 102;
width: 100%;
padding-top: 2.4rem;
}
@media not screen and (min-width: 768px) {
header {
padding-top: 3.7333333333vw;
}
}
header > .contentInner {
gap: 0 min(0.5208333333vw,1rem);
max-width: inherit;
padding: 0 min(2.0833333333vw,4rem);
}
@media not screen and (min-width: 768px) {
header > .contentInner {
gap: 0 min(2.6666666667vw,2rem);
padding: 0 min(4.2666666667vw,3.2rem);
}
}
header .headerLogo {
max-width: 12.5rem;
}
header .headerLogo a img:nth-child(1) {
display: block;
}
header .headerLogo a img:nth-child(2) {
display: none;
}
@media not screen and (min-width: 768px) {
header .headerLogo {
z-index: 999;
width: 30.6666666667vw;
max-width: inherit;
}
}
header .headerLogo a {
display: block;
}
header .headerLogo a img {
width: 125px;
}
@media not screen and (min-width: 768px) {
header .headerLogo a img {
width: 115px;
}
header .ac_menu {
position: relative;
z-index: 999;
width: min(11.7333333333vw,8.8rem);
height: min(11.7333333333vw,8.8rem);
background-color: #2864f0;
border-radius: 50%;
}
header .ac_menu:focus-visible {
outline-color: #fff;
}
header .ac_menu > span {
position: absolute;
inset: 0;
width: min(5.0666666667vw,3.8rem);
height: 0.12rem;
margin: auto;
color: transparent;
text-indent: -99rem;
background-color: #fff;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
header .ac_menu > span::before, header .ac_menu > span::after {
position: absolute;
inset: -0.6rem 0 auto;
display: block;
width: 100%;
height: 2px;
margin: auto;
content: "";
background: #fff;
-webkit-transition: rotate 0.3s;
transition: rotate 0.3s;
}
header .ac_menu > span::after {
top: auto;
bottom: -0.6rem;
}
}
header #navi {
gap: 0 24px;
outline-offset: -0.5rem;
}
@media not screen and (min-width: 768px) {
header #navi {
width: 100%;
padding-left: 13.3333333333vw;
padding-right: 13.3333333333vw;
background-color: transparent;
outline: 0;
}
}
header #navi > li {
position: relative;
}
@media not screen and (min-width: 768px) {
header #navi > li {
width: 100%;
margin-bottom: 4.2666666667vw;
}
}
header #navi > li a {
display: block;
font-weight: 500;
line-height: 1.8;
color: #2864eb;
text-decoration: none;
letter-spacing: 0.01em;
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
font-size: 20px;
font-family: "Dangrek", sans-serif;
}
@media not screen and (min-width: 768px) {
header #navi > li a {
width: 100%;
color: #fff;
font-size: 7.4666666667vw;
}
header #navi > li a:focus-visible {
outline-color: #fff;
}
}
header #navi > li a::before {
position: absolute;
inset: auto 0 0;
width: 0;
height: 2px;
margin: auto;
content: "";
background-color: #2864eb;
-webkit-transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media not screen and (min-width: 768px) {
header #navi > li a::before {
content: none;
}
}
header #navi > li a::after {
content: none;
}
@media not screen and (min-width: 768px) {
header #navi > li a::after {
display: none;
position: absolute;
inset: 0 0 0 auto;
width: min(2.6666666667vw,2rem);
height: min(2.6666666667vw,2rem);
margin: auto;
content: "";
border: 0.12rem solid #fff;
border-width: 0.12rem 0.12rem 0 0;
rotate: 45deg;
}
}
@media (hover: hover) {
header #navi > li a:hover {
opacity: 0.7;
}
header #navi > li a:hover::before {
width: 100%;
}
}
header #navi > li a:focus-visible {
opacity: 0.7;
}
header #navi > li a:focus-visible::before {
width: 100%;
}
@media not screen and (min-width: 768px) {
header .naviWrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
height: 100dvh;
padding-top: min(24.2666666667vw,18.2rem);
padding-bottom: 2em;
overflow-y: auto;
background-color: #2864f0;
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
}
}
header.-menuOpen .headerLogo a img:nth-child(1) {
display: none;
}
header.-menuOpen .headerLogo a img:nth-child(2) {
display: block;
}
header.-menuOpen .ac_menu span {
background-color: transparent;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
header.-menuOpen .ac_menu span::before, header.-menuOpen .ac_menu span::after {
top: 0;
bottom: 0;
background-color: #fff;
-webkit-transition: rotate 0.3s;
transition: rotate 0.3s;
rotate: 45deg;
}
header.-menuOpen .ac_menu span::after {
rotate: -45deg;
}
@media not screen and (min-width: 768px) {
header.-menuOpen .naviWrapper {
opacity: 1;
pointer-events: all;
}
header.-menuOpen .naviWrapper #navi {
display: block;
overscroll-behavior-y: contain;
}
}
header.-menuOpen .snsBox {
display: block;
}
header .snsBox {
display: none;
}
header .snsBox .flex {
gap: 6.4vw;
}
header .snsBox a:focus-visible {
outline-color: #fff;
}
html:has(header.-menuOpen) {
overflow: hidden;
}
html:has(header.-menuOpen) body {
overflow: auto;
scrollbar-gutter: stable;
}
/* /ヘッダー */
/* アーカイブス */
#archives {
margin-top: 154px;
}
@media not screen and (min-width: 768px) {
#archives {
margin-top: 52.2666666667vw;
}
}
#archives .contentInner {
position: relative;
}
#archives .ttl_img {
width: 361.8px;
z-index: 10;
margin-left: unset;
margin-right: unset;
margin-bottom: 59px;
}
@media not screen and (min-width: 768px) {
#archives .ttl_img {
width: 61.8666666667vw;
margin-left: 2.9333333333vw;
margin-bottom: 15.2vw;
}
#archives .archivesList {
margin-top: 13.8666666667vw;
}
}
#archives .archivesList ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 40px;
}
@media not screen and (min-width: 768px) {
#archives .archivesList ul {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 10.6666666667vw;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
#archives .archivesList ul li {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
@media not screen and (min-width: 768px) {
#archives .archivesList ul li {
-webkit-box-flex: unset;
-ms-flex: unset;
flex: unset;
}
}
#archives .archivesList ul li a {
display: block;
text-align: center;
text-decoration: unset;
}
#archives .archivesList ul li a img {
-webkit-transition: scale 0.4s;
transition: scale 0.4s;
}
@media (hover: hover) {
#archives .archivesList ul li a:hover img {
scale: 1.05;
}
}
#archives .archivesList ul li a p {
margin-top: 24px;
font-size: 18px;
font-weight: bold;
color: #3862E8;
text-align: center;
}
@media not screen and (min-width: 768px) {
#archives .archivesList ul li a p {
margin-top: 3.4666666667vw;
font-size: 4.2666666667vw;
letter-spacing: 0.01em;
}
}
/* /アーカイブス */
/* コンセプト */
#concept .ttl_img {
width: 340px;
position: absolute;
left: 50%;
translate: -201px calc(-50% - 14px);
z-index: 10;
}
@media not screen and (min-width: 768px) {
#concept .ttl_img {
width: 65.0666666667vw;
translate: calc(-50% - 1.8666666667vw) calc(-50% - 3.7333333333vw);
}
}
#concept .roundBox .boxInner {
padding: 100px 80px;
}
@media not screen and (min-width: 768px) {
#concept .roundBox .boxInner {
padding: 14.4vw 7.4666666667vw;
}
}
#concept .roundBox p {
font-size: 20px;
font-weight: bold;
color: #2864f0;
letter-spacing: 0.01em;
}
@media not screen and (min-width: 768px) {
#concept .roundBox p {
text-align: center;
font-size: 4.2666666667vw;
line-height: 1.5;
}
}
#concept .roundBox p + p {
margin-top: 1.5em;
}
#concept .contentInner .deco {
pointer-events: none;
}
/* /コンセプト */
/* 概要 */
#outline {
margin-top: 278px;
}
@media not screen and (min-width: 768px) {
#outline {
margin-top: 77.6vw;
}
#outline .roundBox .boxInner {
padding: 16vw 5.3333333333vw;
}
}
#outline .ttl_img {
position: absolute;
top: -119px;
left: 375px;
width: 418px;
z-index: 2;
}
@media not screen and (min-width: 768px) {
#outline .ttl_img {
top: 0;
left: 50%;
width: 80vw;
z-index: 2;
translate: calc(-50% - 1.6vw) calc(-50% - 6.9333333333vw);
}
}
#outline .outlineList_item {
background-color: #EDF3FF;
border-radius: 10px;
padding: 20px;
margin-top: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@media not screen and (min-width: 768px) {
#outline .outlineList_item {
padding: 4vw 3.2vw;
display: block;
margin-top: 2.6666666667vw;
}
}
#outline .outlineList_item:nth-child(1) {
margin-top: 0;
}
#outline .outlineList_item > dt,
#outline .outlineList_item > dd {
font-size: 16px;
letter-spacing: 0.001em;
}
#outline .outlineList_item > dt {
width: 143px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #3862E8;
font-weight: bold;
}
@media not screen and (min-width: 768px) {
#outline .outlineList_item > dt {
width: 100%;
font-size: 4vw;
display: block;
}
}
#outline .outlineList_item > dd {
width: calc(100% - 143px);
color: #3862E8;
position: relative;
font-weight: 500;
padding-left: 62px;
}
@media not screen and (min-width: 768px) {
#outline .outlineList_item > dd {
width: 100%;
font-size: 4vw;
padding-left: 0;
margin-top: 3.2vw;
}
}
#outline .outlineList_item .mapBtn {
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 130px;
height: 36px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 9999px;
background-color: #fff;
border: 1px solid #2864f0;
font-size: 16px;
font-family: "Dangrek", sans-serif;
text-align: center;
gap: 5px;
-webkit-transition: 0.3s;
transition: 0.3s;
}
@media (hover: hover) {
#outline .outlineList_item .mapBtn:hover {
background-color: #EDF3FF;
}
}
@media not screen and (min-width: 768px) {
#outline .outlineList_item .mapBtn {
position: unset;
margin-left: auto;
margin-right: auto;
margin-top: 3.2vw;
}
}
#outline .outlineList_item .mapBtn:after {
content: "";
display: block;
width: 11.5px;
height: 11.5px;
background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.1512 4.95166L11.1512 2.15067L8.35026 2.15067' stroke='%233862E8' stroke-linecap='round'/%3E%3Cpath d='M5.4046 7.89746L11.1506 2.15148' stroke='%233862E8' stroke-linecap='round'/%3E%3Cpath d='M6.16901 3.25049H3C1.89543 3.25049 1 4.14592 1 5.25049V10.2505C1 11.3551 1.89543 12.2505 3 12.2505H8C9.10457 12.2505 10 11.3551 10 10.2505V7.1103' stroke='%233862E8' stroke-linecap='round'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-size: 100% 100%;
}
#outline .deco {
pointer-events: none;
}
/* /概要 */
/* コンテンツ */
#contents {
margin-top: 155px;
}
@media not screen and (min-width: 768px) {
#contents {
margin-top: 45.3333333333vw;
}
}
#contents .ttl_img {
width: 516px;
height: auto;
margin-left: unset;
margin-right: unset;
margin-bottom: 0;
}
@media not screen and (min-width: 768px) {
#contents .ttl_img {
margin-left: auto;
margin-right: auto;
width: 80vw;
}
}
#contents .ttl_img img {
width: 100%;
}
#contents .roundBox {
position: relative;
margin-top: 54px;
}
@media not screen and (min-width: 768px) {
#contents .roundBox {
margin-top: 10.6666666667vw;
}
}
#contents .roundBox:nth-child(1) {
margin-top: 0;
}
@media not screen and (min-width: 768px) {
#contents .roundBox:nth-child(1) .boxInner {
padding: 8.5333333333vw 7.4666666667vw 14.9333333333vw 7.4666666667vw;
}
#contents .roundBox .boxInner {
padding: 11.4666666667vw 7.4666666667vw 14.9333333333vw 7.4666666667vw;
}
#contents .roundBox .boxInner .roundBox_ttl {
letter-spacing: 0.01em;
line-height: 1.25;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 4vw 2.4vw;
}
#contents .roundBox .boxInner .roundBox_ttl + .roundBox_subTtl {
margin-top: 4.8vw;
}
#contents .roundBox .boxInner .roundBox_subTtl {
margin-top: 6.9333333333vw;
}
}
#contents .roundBox.-color01 {
border-color: #006e2d;
--box-shadow-color: #bbdf8a;
}
#contents .roundBox.-color01 .roundBox_ttl {
color: #006e2d;
}
/* 内箱の枠は 2026 年リデザインで廃止済みだが、border-color の計算値を
維持するため宣言は残している(width 0 のため見た目への影響なし) */
#contents .roundBox.-color01 .boxInner {
border-color: #006e2d;
}
#contents .roundBox.-color02 {
border-color: #5a2daa;
--box-shadow-color: #cab4f2;
}
#contents .roundBox.-color02 .roundBox_ttl {
color: #5a2daa;
}
/* 内箱の枠は 2026 年リデザインで廃止済みだが、border-color の計算値を
維持するため宣言は残している(width 0 のため見た目への影響なし) */
#contents .roundBox.-color02 .boxInner {
border-color: #5a2daa;
}
#contents .roundBox.-color03 {
border-color: #be4b0f;
--box-shadow-color: #e7bfaa;
}
#contents .roundBox.-color03 .roundBox_ttl {
color: #be4b0f;
}
/* 内箱の枠は 2026 年リデザインで廃止済みだが、border-color の計算値を
維持するため宣言は残している(width 0 のため見た目への影響なし) */
#contents .roundBox.-color03 .boxInner {
border-color: #be4b0f;
}
#contents .roundBox.-color03 .roundBox_ttl.online:after, #contents .roundBox.-color03 .roundBox_ttl.offline:after {
background-color: #EDF3FF;
color: #3862E8;
font-size: 14px;
font-weight: bold;
width: 90px;
height: 23px;
border-radius: 4px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
translate: 0px -4px;
margin-left: 16px;
}
@media not screen and (min-width: 768px) {
#contents .roundBox.-color03 .roundBox_ttl.online:after, #contents .roundBox.-color03 .roundBox_ttl.offline:after {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 3.2vw;
width: 20.2666666667vw;
height: 6.1333333333vw;
margin-top: 0;
margin-left: 0;
translate: 0px 0px;
}
}
#contents .roundBox.-color03 .roundBox_ttl.offline:after {
content: "オフライン";
}
#contents .roundBox.-color04 {
border-color: #146464;
--box-shadow-color: #b7e7e7;
}
#contents .roundBox.-color04 .roundBox_ttl {
color: #146464;
}
/* 内箱の枠は 2026 年リデザインで廃止済みだが、border-color の計算値を
維持するため宣言は残している(width 0 のため見た目への影響なし) */
#contents .roundBox.-color04 .boxInner {
border-color: #146464;
}
#contents .roundBox.-color04 .roundBox_ttl.online:after, #contents .roundBox.-color04 .roundBox_ttl.offline:after {
background-color: #EDF3FF;
color: #3862E8;
font-size: 14px;
font-weight: bold;
width: 90px;
height: 23px;
border-radius: 4px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
translate: 0px -4px;
margin-left: 16px;
}
@media not screen and (min-width: 768px) {
#contents .roundBox.-color04 .roundBox_ttl.online:after, #contents .roundBox.-color04 .roundBox_ttl.offline:after {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 3.2vw;
width: 20.2666666667vw;
height: 6.1333333333vw;
margin-top: 0;
margin-left: 0;
translate: 0px 0px;
}
}
#contents .roundBox.-color04 .roundBox_ttl.offline:after {
content: "オフライン";
}
#contents .roundBox .sessionParagraph {
margin-top: 32px;
}
@media not screen and (min-width: 768px) {
#contents .roundBox .sessionParagraph {
margin-top: 5.6vw;
width: calc(100% - 2px);
}
}
#contents .roundBox .sessionParagraph p {
font-weight: 500;
font-size: 18px;
letter-spacing: -0.009em;
line-height: 1.65;
}
@media not screen and (min-width: 768px) {
#contents .roundBox .sessionParagraph p {
font-size: 4vw;
line-height: 1.6;
}
}
#contents .roundBox .sessionAboutImgs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 25px;
margin-top: 40px;
}
@media not screen and (min-width: 768px) {
#contents .roundBox .sessionAboutImgs {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-top: 6.1333333333vw;
gap: 5.6vw;
}
}
#contents .roundBox .sessionAboutImgs img {
width: 100%;
height: auto;
/* 写真の角丸。sessionAboutImgs009.png は画像自体に角丸(半径 34px /
原寸幅 460px)が焼き込まれているため、表示サイズ(PC 最大 243px 幅)での
焼き込み半径 約 18px を CSS の角丸が完全に覆う 20px にする
(画像側の処理を隠して全写真の角丸を均一に見せる)。
PC は写真の表示幅が一定(コンテナ上限 900px)なので px 固定で指定 */
border-radius: 20px;
}
@media not screen and (min-width: 768px) {
#contents .roundBox .sessionAboutImgs img {
width: 56vw;
/* SP は写真幅 56vw に比例: 焼き込み半径 34×56/460 ≈ 4.14vw を覆う値 */
border-radius: 4.3vw;
}
}
#contents .roundBox .sessionAboutImgs > * {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
@media not screen and (min-width: 768px) {
#contents .roundBox .sessionAboutImgs > * {
-webkit-box-flex: unset;
-ms-flex: unset;
flex: unset;
width: 100%;
max-width: 56vw;
}
}
#contents .pcRow {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
gap: clamp(0px, calc(70 / 1366 * 100vw), 70px);
margin-bottom: 55px;
width: 100%;
max-width: 108.6rem;
padding: 0;
margin-left: auto;
margin-right: auto;
}
@media not screen and (min-width: 768px) {
#contents .pcRow {
display: block;
margin-bottom: 12.8vw;
}
}
#contents .sessionImg {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 22px;
}
@media not screen and (min-width: 768px) {
#contents .sessionImg {
gap: 0;
}
#contents .sessionImg picture {
scale: 1.02;
}
}
#contents .sessionImg picture:nth-child(2) {
margin-top: 36px;
}
@media not screen and (min-width: 768px) {
#contents .sessionImg picture:nth-child(2) {
margin-top: 21.3333333333vw;
}
}
#contents .sessionImg picture img {
width: 180px;
}
@media not screen and (min-width: 768px) {
#contents .sessionImg picture img {
width: 34.6666666667vw;
}
}
#contents .pageInLink {
-ms-flex-negative: 0;
flex-shrink: 0;
}
@media not screen and (min-width: 768px) {
#contents .pageInLink {
max-width: 77.8666666667vw;
margin-left: auto;
margin-right: auto;
margin-top: 11.2vw;
}
}
#contents .pageInLink ul {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
max-width: 502px;
}
@media not screen and (min-width: 768px) {
#contents .pageInLink ul {
display: block;
}
#contents .pageInLink ul li {
margin-top: 8px;
}
}
#contents .pageInLink ul li a {
border-radius: 9999px;
display: block;
background-color: #fff;
padding: 15px 24px;
text-decoration: unset;
border: 2px solid;
font-family: "Dangrek", "M PLUS 1p", sans-serif;
font-size: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
letter-spacing: 0.004em;
width: 242px;
height: 60px;
line-height: 1;
-webkit-transition: 0.3s;
transition: 0.3s;
}
#contents .pageInLink ul li a.-adjust {
font-size: 18px;
}
@media not screen and (min-width: 768px) {
#contents .pageInLink ul li a.-adjust {
font-size: 4vw;
}
}
#contents .pageInLink ul li a.-adjust02 {
font-size: 24px;
}
@media not screen and (min-width: 768px) {
#contents .pageInLink ul li a.-adjust02 {
font-size: 5.3333333333vw;
}
#contents .pageInLink ul li a {
font-size: 4.8vw;
width: unset;
height: 12.8vw;
padding: 4vw 2.6666666667vw 4vw 5.8666666667vw;
line-height: 1;
}
}
#contents .pageInLink ul li a .small {
font-size: 12px;
font-weight: bold;
}
@media not screen and (min-width: 768px) {
#contents .pageInLink ul li a .small {
font-size: 3.4666666667vw;
}
}
#contents .pageInLink ul li a .arrow {
width: 30px;
height: 30px;
border-radius: 9999px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
@media not screen and (min-width: 768px) {
#contents .pageInLink ul li a .arrow {
width: 6.4vw;
height: 6.4vw;
}
}
#contents .pageInLink ul li a .arrow svg path {
-webkit-transition: 0.3s;
transition: 0.3s;
}
@media not screen and (min-width: 768px) {
#contents .pageInLink ul li:nth-child(1) {
margin-top: 0;
}
}
#contents .pageInLink ul li:nth-child(1) a {
border-color: #006e2d;
color: #006e2d;
}
#contents .pageInLink ul li:nth-child(1) a .arrow {
background-color: #D1F0A6;
}
#contents .pageInLink ul li:nth-child(1) a .arrow svg path {
stroke: #006e2d;
}
@media (hover: hover) {
#contents .pageInLink ul li:nth-child(1) a:hover {
background-color: #D1F0A6;
}
#contents .pageInLink ul li:nth-child(1) a:hover .arrow {
background-color: #006e2d;
}
#contents .pageInLink ul li:nth-child(1) a:hover .arrow svg path {
stroke: #fff;
}
}
#contents .pageInLink ul li:nth-child(2) a {
border-color: #5a2daa;
color: #5a2daa;
}
#contents .pageInLink ul li:nth-child(2) a .arrow {
background-color: #DFCEFC;
}
#contents .pageInLink ul li:nth-child(2) a .arrow svg path {
stroke: #5a2daa;
}
@media (hover: hover) {
#contents .pageInLink ul li:nth-child(2) a:hover {
background-color: #DFCEFC;
}
#contents .pageInLink ul li:nth-child(2) a:hover .arrow {
background-color: #5a2daa;
}
#contents .pageInLink ul li:nth-child(2) a:hover .arrow svg path {
stroke: #fff;
}
}
#contents .pageInLink ul li:nth-child(3) a {
border-color: #be4b0f;
color: #be4b0f;
}
#contents .pageInLink ul li:nth-child(3) a .arrow {
background-color: #F7D7C6;
}
#contents .pageInLink ul li:nth-child(3) a .arrow svg path {
stroke: #be4b0f;
}
@media (hover: hover) {
#contents .pageInLink ul li:nth-child(3) a:hover {
background-color: #F7D7C6;
}
#contents .pageInLink ul li:nth-child(3) a:hover .arrow {
background-color: #be4b0f;
}
#contents .pageInLink ul li:nth-child(3) a:hover .arrow svg path {
stroke: #fff;
}
}
#contents .pageInLink ul li:nth-child(4) a {
border-color: #146464;
color: #146464;
}
#contents .pageInLink ul li:nth-child(4) a .arrow {
background-color: #C5ECEC;
}
#contents .pageInLink ul li:nth-child(4) a .arrow svg path {
stroke: #146464;
}
@media (hover: hover) {
#contents .pageInLink ul li:nth-child(4) a:hover {
background-color: #C5ECEC;
}
#contents .pageInLink ul li:nth-child(4) a:hover .arrow {
background-color: #146464;
}
#contents .pageInLink ul li:nth-child(4) a:hover .arrow svg path {
stroke: #fff;
}
}
/* 注記(.remarks)のスタイルはタイムテーブル節の末尾へ移動(2026-08-31。
マークアップも Contents.astro → Timetable.astro へ移動済み) */
#contents .deco {
pointer-events: none;
}
/* /コンテンツ */
/* 申し込み */
#register {
margin-top: 148px;
}
@media not screen and (min-width: 768px) {
#register {
margin-top: 47.4666666667vw;
}
}
#register .roundBox {
margin-top: 60px;
}
@media not screen and (min-width: 768px) {
#register .roundBox {
margin-top: 12.5333333333vw;
}
}
#register .roundBox .boxInner {
padding: 50px;
}
@media not screen and (min-width: 768px) {
#register .roundBox .boxInner {
padding: 14.1333333333vw 6.9333333333vw;
}
}
#register .ttl_img {
width: 388px;
translate: -83px 0;
margin-bottom: 58px;
}
@media not screen and (min-width: 768px) {
#register .ttl_img {
width: 72vw;
margin-left: auto;
margin-right: auto;
translate: clamp(-9999px, -1.8666666667vw, -7px) 0;
margin-bottom: 11.4666666667vw;
}
}
#register .ticketBtn {
display: block;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
@media (hover: hover) {
#register .ticketBtn:hover svg .ticketBody {
fill: #1d4fc7;
}
}
#register .ticketBtn svg .ticketBody {
fill: #2864f0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
#register .supportBox .paragraph {
margin-top: 14px;
}
@media not screen and (min-width: 768px) {
#register .supportBox .paragraph {
margin-top: 6.4vw;
}
}
#register .supportBox .paragraph p {
font-weight: 500;
font-size: 16px;
letter-spacing: 0.005em;
}
@media not screen and (min-width: 768px) {
#register .supportBox .paragraph p {
font-size: 4vw;
line-height: 1.6;
}
}
#register .supportBox .btn {
-ms-flex-negative: 0;
flex-shrink: 0;
width: 220px;
}
@media not screen and (min-width: 768px) {
#register .supportBox .btn {
margin-top: 6.4vw;
width: 58.6666666667vw;
margin-left: auto;
margin-right: auto;
}
}
#register .support_ttl {
position: relative;
font-size: 24px;
font-weight: bold;
color: #2864f0;
translate: 60px 0px;
}
@media not screen and (min-width: 768px) {
#register .support_ttl {
translate: unset;
text-align: center;
font-size: 5.3333333333vw;
margin-top: 10.1333333333vw;
}
}
#register .support_ttl:before {
content: "";
position: absolute;
bottom: -6px;
left: 0;
translate: calc(-100% - 12px) 0;
width: 109.4px;
height: 132.9px;
background-image: url("../img/support_deco01.png");
background-repeat: no-repeat;
background-size: 100% 100%;
display: block;
}
@media not screen and (min-width: 768px) {
#register .support_ttl:before {
position: absolute;
bottom: 6.6666666667vw;
left: 50%;
translate: -50% 0;
margin-left: auto;
margin-right: auto;
width: 24.8vw;
height: 30.08vw;
margin-bottom: 3.2vw;
}
}
/* /申し込み */
/* SNS */
.snsBox {
margin-top: 120px;
}
@media not screen and (min-width: 768px) {
.snsBox {
margin-top: 21.0666666667vw;
width: 100%;
}
}
.snsBox .text-prime {
background-color: #EDF3FF;
border-radius: 9999px;
width: 320px;
height: 60px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
font-size: 24px;
font-weight: bold;
color: #3862E8;
}
@media not screen and (min-width: 768px) {
.snsBox .text-prime {
font-size: 5.3333333333vw;
width: 76.5333333333vw;
letter-spacing: 0;
}
}
.snsBox .flex {
gap: 40px;
margin-top: 50px;
}
@media not screen and (min-width: 768px) {
.snsBox .flex {
gap: 10.6666666667vw;
margin-top: 9.0666666667vw;
}
}
.snsBox .snsIcon img {
width: 60px;
height: 60px;
}
@media not screen and (min-width: 768px) {
.snsBox .snsIcon img {
width: 16vw;
height: 16vw;
}
}
.snsBox a {
display: block;
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.snsBox a:focus-visible {
outline-color: #2864eb;
}
@media (hover: hover) {
.snsBox a:hover {
opacity: 0.7;
}
}
/* /SNS */
/* ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
-webkit-box-sizing: border-box;
box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */
border-style: solid; /* 2 */
border-color: currentColor; /* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-moz-tab-size: 4; /* 3 */
-o-tab-size: 4;
tab-size: 4; /* 3 */
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
-webkit-font-feature-settings: normal;
font-feature-settings: normal; /* 5 */
font-variation-settings: normal; /* 6 */
-webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0; /* 1 */
line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
-webkit-font-feature-settings: inherit;
font-feature-settings: inherit; /* 1 */
font-variation-settings: inherit; /* 1 */
font-size: 100%; /* 1 */
font-weight: inherit; /* 1 */
line-height: inherit; /* 1 */
color: inherit; /* 1 */
margin: 0; /* 2 */
padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button; /* 1 */
background-color: transparent; /* 2 */
background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Reset default styling for dialogs.
*/
/*
Prevent resizing textareas horizontally by default.
*/
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
input::-ms-input-placeholder, textarea::-ms-input-placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block; /* 1 */
vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
*, ::before, ::after{
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
::-ms-backdrop{
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
::backdrop{
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
.relative{
position: relative;
}
.m-auto{
margin: auto;
}
.block{
display: block;
}
.flex{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.hidden{
display: none;
}
.w-\[100\%\]{
width: 100%;
}
.max-w-\[100\%\]{
max-width: 100%;
}
.max-w-\[128rem\]{
max-width: 128rem;
}
.max-w-\[90rem\]{
max-width: 90rem;
}
.content-between{
-ms-flex-line-pack: justify;
align-content: space-between;
}
.items-end{
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.items-center{
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.justify-center{
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.justify-between{
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.gap-1{
gap: 1rem;
}
.bg-prime{
--tw-bg-opacity: 1;
background-color: rgb(40 90 200 / var(--tw-bg-opacity));
}
.text-left{
text-align: left;
}
.text-center{
text-align: center;
}
.text-\[1\.2rem\]{
font-size: 1.2rem;
}
.text-\[1\.3rem\]{
font-size: 1.3rem;
}
.font-bold{
font-weight: 700;
}
.leading-\[calc\(28\/14\)\]{
line-height: calc(28 / 14);
}
.leading-\[calc\(30\/12\)\]{
line-height: calc(30 / 12);
}
.tracking-\[0\.01em\]{
letter-spacing: 0.01em;
}
.tracking-\[0\]{
letter-spacing: 0;
}
.text-link{
--tw-text-opacity: 1;
color: rgb(39 90 200 / var(--tw-text-opacity));
}
.text-prime{
--tw-text-opacity: 1;
color: rgb(40 90 200 / var(--tw-text-opacity));
}
.text-white{
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
@media (min-width: 768px) {
.md\:flex{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.md\:w-\[55rem\]{
width: 55rem;
}
.md\:flex-row-reverse{
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.md\:text-\[1\.2rem\]{
font-size: 1.2rem;
}
.md\:text-\[1\.4rem\]{
font-size: 1.4rem;
}
}
.\[\&\:focus-visible\]\:outline-white:focus-visible{
outline-color: #fff;
}
@media (min-width: 768px) {
.md\:\[\&\>img\]\:w-\[100\%\]>img{
width: 100%;
}
}
/* =========================================================================
* ここから 2026 年版で新規に追加したスタイル
* (ヒーロー画面・ヘッダー・申込チケット・開催日看板・セクション装飾ほか)
* ========================================================================= */
/* ==================================================================
* 2026 ヒーロー画面(キービジュアル再現)
* Hero.astro のマークアップに対応。各要素の座標は Hero.astro の
* items 配列(KV 1920×1080 上の実測値)からカスタムプロパティ
* --x / --y / --w(PC。ヒーロー領域に対する %)と
* --sp-x / --sp-y / --sp-w(SP。画面幅 vw / 高さ % / 幅 vw)として
* ビルド時に書き出される。ここはその参照とレイヤー構成を担当する。
* ================================================================== */
/* --- サイト全体の固定背景(bg.svg) ---
* background-attachment: fixed は iOS Safari で効かないため、
* position: fixed の要素に cover で敷く方式にしている。
* z-index: -1 でもコンテンツより奥に描画される(body の背景色よりは手前) */
.siteBg {
position: fixed;
inset: 0;
z-index: -1;
background: url("../img/svg/bg.svg") center / cover no-repeat;
}
/* --- ヒーロー領域 ---
* 通常フローで 1 画面分(100svh)を占める。ツバメや画面外へはみ出す
* 素材(負座標の雲・キャラクター)はここで切り取る */
.hero {
position: relative;
height: 100vh; /* svh 未対応ブラウザ用フォールバック */
height: 100svh;
overflow: hidden;
/* コンテンツまでの助走スペース。#concept の見出し(.ttl_img)はセクション
* 上端をまたいで配置される(translate -50%)ため、これが無いと初期表示の
* ヒーロー 1 画面目に見出しが食い込む。将来ヒーローの捌けモーションを
* 付ける場合のスクロール余白も兼ねる */
margin-bottom: clamp(120px, calc(200 / 1366 * 100vw), 280px);
}
/* --- ツバメ+雲の渦の全景(tsubame.svg) ---
* 「右上が描画領域の右上と一致」「縦横比維持でなるべく画面いっぱい」を
* 満たすため、右上アンカー + 幅 max(画面幅, 画面高さ×16/9)で cover 相当に
* 拡大する。16:9 より縦長の画面では左が、横長の画面では下がはみ出す */
.hero_tsubame {
position: absolute;
top: 0;
right: 0;
width: max(100vw, calc(100vh * (1920 / 1080)));
width: max(100vw, calc(100svh * (1920 / 1080)));
z-index: 1;
}
.hero_tsubame img {
display: block;
width: 100%;
height: auto;
}
/* --- 雲・キャラクター(共通) ---
* PC: KV(1920×1080)上の座標を % 化した値で配置。画面が 16:9 から
* ずれた場合は縦横が独立に伸縮する(全要素の画面内維持を優先)。
* 幅のみ指定 + height: auto のため、素材の縦横比変更に追従する */
.hero_item {
position: absolute;
left: calc(var(--x) * 1%);
top: calc(var(--y) * 1%);
width: calc(var(--w) * 1%);
}
.hero_item img {
display: block;
width: 100%;
height: auto;
}
/* 雲はキャラクターより奥(KV の重なり順) */
.hero_item.-cloud {
z-index: 2;
}
.hero_item.-chara {
z-index: 3;
}
/* pc 座標を持たない素材(character_08 など KV 未登場のもの)は PC 非表示 */
.hero_item.-spOnly {
display: none;
}
/* --- 2026 年版ロゴ(h1。ヒーロー内の最前面) ---
* PC は KV と同じ位置・サイズ(291,230 / 720×520 の % 換算) */
.hero_logo {
position: absolute;
left: 15.156%;
top: 21.296%;
width: 37.5%;
margin: 0;
z-index: 4;
}
.hero_logo img {
display: block;
width: 100%;
height: auto;
}
/* --- SP(767px 以下): 間引きレイアウト ---
* KV の再現はやめ、sp 座標を持つ素材だけを手置きで配置する。
* ツバメは幅 210vw(右上アンカーのまま)で、右側の雲の渦・浮島と
* ツバメ本体の頭〜翼が画面上半分に入るバランス */
@media not screen and (min-width: 768px) {
.hero {
margin-bottom: 32vw;
}
.hero_tsubame {
width: 210vw;
}
.hero_item {
display: none;
}
.hero_item.-spKeep {
display: block;
left: calc(var(--sp-x) * 1vw);
top: calc(var(--sp-y) * 1%);
/* 幅は vw 連動だが、タブレット級の広い画面ではキャラクター同士や
ツバメとの重なりが目立つため、画面幅 500px 時点の実寸で頭打ちにする
(1vw=5px 相当。狭い画面では従来どおり vw 連動) */
width: min(calc(var(--sp-w) * 1vw), calc(var(--sp-w) * 5px));
}
/* ロゴは画面下半分の中央(ツバメの燕本体と重ならない位置) */
/* ロゴは画面下部の看板+申込チケット(sticky 追従)と被らない高さに置く */
.hero_logo {
left: 50%;
top: 46%;
translate: -50% 0;
width: min(72vw, 380px);
}
}
/* ------------------------------------------------------------------
* ヘッダー(2026 年調整)
* ------------------------------------------------------------------ */
/* PC のグローバルナビ: freee ロゴとメニュー項目を 1 つの白い半透明ピルに
* 横並びで収め、ヘッダー中央に配置する(半透明背景はヒーローやコンテンツに
* 重なった時のメニューの可読性確保)。
* - ピルは header > .contentInner に敷く(ロゴ .headerLogo とメニュー #navi の
* 共通の親)。幅は fit-content にし、.contentInner 既定の margin: 0 auto で
* センタリングされる
* - 768px 直上でもピルが画面からはみ出さないよう、余白は 1366px 基準で縮む
* clamp() にしている
* - SP のメニューは全画面オーバーレイ(青背景)なので対象外。2025 年版 CSS が
* SP 向けの指定を持っており、無条件に書くと後勝ちで壊すため PC 限定にする */
@media screen and (min-width: 768px) {
header > .contentInner {
width: fit-content;
justify-content: center;
gap: 0 clamp(1.6rem, calc(32 / 1366 * 100vw), 3.2rem);
padding: 0.8rem clamp(1.6rem, calc(32 / 1366 * 100vw), 3.2rem);
background-color: rgba(255, 255, 255, 0.7);
border-radius: 9999px;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
header #navi {
gap: 0 clamp(1.2rem, calc(24 / 1366 * 100vw), 2.4rem);
}
}
/* 申込チケット CTA。
* main の先頭に高さ 0 の sticky 基準線を置き、その上側へチケットを配置する。
* 基準線は画面下端付近に留まり、main の末尾(= footer 上端)へ到達すると包含
* ブロック境界に押されるため、チケットも footer と一緒に上へ流れる。
* 前提: body がスクロールコンテナでないこと(上の body { overflow: clip })。 */
#main .joinTicket {
--join-ticket-width: 243px;
--join-ticket-height: 124px;
--join-ticket-bottom-gap: clamp(0px, calc(30 / 1366 * 100vw), 30px);
position: sticky;
top: max(var(--join-ticket-height), calc(100vh - var(--join-ticket-bottom-gap)));
top: max(var(--join-ticket-height), calc(100svh - var(--join-ticket-bottom-gap)));
right: auto;
bottom: auto;
width: 100%;
height: 0;
margin: 0;
z-index: 101;
translate: 0 0;
transition: none;
}
#main .joinTicket .joinPic {
position: absolute;
right: clamp(0px, calc(50 / 1366 * 100vw), 50px);
bottom: 0;
width: var(--join-ticket-width);
height: var(--join-ticket-height);
}
#main .joinTicket .joinPic > svg {
display: block;
width: 100%;
height: auto;
}
/* SP は PC 用チケット SVG を出さず(.pcOnly)、開催日看板(.dateBoard)の内容を
* 統合した横長チケット(Hero.astro の .ticketSp)を画面下部に表示する。
* .ticketSp は viewBox 366×84 の固定ジオメトリ SVG で、|開催日|参加申し込み| の
* 2 セルを縦破線 2 本で区切る。左端の半券風の切り欠き・破線・矢印・配色
* (地 #2864f0 / 線・文字 白)は PC 版チケット SVG と同じ意匠 */
@media not screen and (min-width: 768px) {
#main .joinTicket {
/* 実高さは 84px×縮小率。この変数は top: max() の第 1 引数
* (画面上端への食い込み防止)にしか効かないため目安値でよい */
--join-ticket-height: 84px;
--join-ticket-bottom-gap: 12px;
}
#main .joinTicket .joinPic {
/* 横幅は 366px 固定・中央寄せ。それを置けない狭い画面では左右余白
* 12px を確保できる幅まで縮め、SVG なので中身ごと等倍スケールする */
left: 0;
right: 0;
margin: 0 auto;
width: min(366px, calc(100vw - 24px));
height: auto;
}
/* SVG 内テキストのサイズ・色。font-size 属性は 2025 年版リセット CSS の
* `* { font-size: 100% }` に負けて効かないため CSS で指定する。
* px は viewBox のユーザー座標として解釈され、チケットの縮小と一緒に
* スケールする。値を変えたら Hero.astro 側の x/y 座標も要調整 */
#main .joinTicket .ticketSp text {
fill: #fff;
font-weight: 700;
}
/* 曜日ピルは白地のままなので文字は青 */
#main .joinTicket .ticketSp .-dow {
fill: #2864f0;
}
#main .joinTicket .ticketSp .-year {
font-size: 13px;
}
#main .joinTicket .ticketSp .-day {
font-size: 26px;
letter-spacing: 0.02em;
}
#main .joinTicket .ticketSp .-dow {
font-size: 11px;
}
#main .joinTicket .ticketSp .-place {
font-size: 10.5px;
}
#main .joinTicket .ticketSp .-join {
font-size: 13px;
}
}
/* チケット・看板が sticky の下限(コンテンツ末尾)に達した時、最後のコンテンツ
* (アーカイブ末尾のハッシュタグ・SNS アイコン)と横並びになって被らないよう、
* SNS ボックスの下に駐機スペースを確保し、そこに収める。
* SP: 統合チケット(高さ 84px)+上余白 20px。
* PC: 幅が狭めだと左下の看板・右下のチケットが中央の SNS ボックスと重なる
* ため、SP と同じ方式で下へ逃がす(看板の高さ 142px(支柱込み)+上余白) */
@media not screen and (min-width: 768px) {
#archives .snsBox {
margin-bottom: calc(84px + 20px);
}
}
@media screen and (min-width: 768px) {
#archives .snsBox {
margin-bottom: calc(142px + 24px);
}
}
/* 開催日アナウンスの看板。
* 申込チケットと同じ「main 先頭の高さ 0 sticky 基準線」方式で画面左下に追従し、
* main 末尾(= footer 上端手前)で押し上げられる。2025 年版の ctaBanner.png の
* デザイン(水色の看板 + 白ボックス + 日付/会場)を HTML/CSS で再現したもので、
* 配色は元画像から採取(枠・支柱 #73a5ff / 文字 #3862e8)。 */
#main .dateBoard {
/* 下余白なし: 支柱の脚が常に画面下端に接する */
--date-board-bottom-gap: 0px;
/* sticky 位置決め用の目安高さ(支柱込み)。実高さと多少ずれても
* top: max() の第 1 引数(画面上端への食い込み防止)にしか効かない */
--date-board-height: 150px;
position: sticky;
top: max(var(--date-board-height), calc(100vh - var(--date-board-bottom-gap)));
top: max(var(--date-board-height), calc(100svh - var(--date-board-bottom-gap)));
width: 100%;
height: 0;
margin: 0;
z-index: 100; /* 申込チケット(101)のすぐ下、ヘッダー(102)より下 */
}
#main .dateBoard .boardPic {
position: absolute;
bottom: 0;
left: clamp(0px, calc(40 / 1366 * 100vw), 40px);
}
/* 支柱 2 本(看板の下から生える) */
#main .dateBoard .boardPic::before,
#main .dateBoard .boardPic::after {
content: "";
position: absolute;
bottom: 0;
width: 13px;
height: 34px;
background: #73a5ff;
/* 板と同じくチケット風の枠線(2026-08-19) */
border: 2px solid #2864f0;
border-bottom: 0; /* 画面下端に接する脚の下辺は線を引かない */
}
#main .dateBoard .boardPic::before {
left: 30px;
}
#main .dateBoard .boardPic::after {
right: 30px;
}
#main .dateBoard .boardFrame {
position: relative;
z-index: 1;
margin-bottom: 26px; /* 支柱が見える分 */
padding: 8px;
background: #73a5ff;
/* チケットと同様の枠線(2026-08-19) */
border: 2px solid #2864f0;
border-radius: 10px;
}
#main .dateBoard .boardInner {
display: flex;
align-items: center;
gap: 18px;
padding: 12px 22px;
background: #fff;
border-radius: 6px;
}
#main .dateBoard .boardDate {
display: flex;
align-items: baseline;
gap: 4px;
color: #3862e8;
font-weight: 700;
white-space: nowrap;
}
#main .dateBoard .boardDate .-year {
font-size: 1.8rem;
}
#main .dateBoard .boardDate .-day {
font-size: 4rem;
line-height: 1;
letter-spacing: 0.02em;
}
#main .dateBoard .boardDate .-dow {
margin-left: 4px;
padding: 2px 10px;
background: #e7f0ff;
border-radius: 9999px;
font-size: 1.5rem;
}
#main .dateBoard .boardPlace {
padding-left: 18px;
border-left: 2px solid #73a5ff;
color: #3862e8;
font-weight: 700;
font-size: 1.5rem;
line-height: 1.6;
text-align: right;
white-space: nowrap;
}
/* SP では看板そのものは表示せず、内容(開催日・会場)を申込チケットへ統合する
* (Hero.astro の .ticketSp。スタイルは上の「申込チケット CTA」の SP ブロック)。
* 日付・会場を更新するときは看板と .ticketSp の両方を直すこと */
@media not screen and (min-width: 768px) {
#main .dateBoard {
display: none;
}
}
/* href の無い a はクリック不可のプレースホルダー(現在は学生支援の a.c_btn が
* 該当。参加申込の ticketBtn も受付開始前はこの状態だった)。
* その間はカーソルとホバー演出を通常表示に抑える */
.ticketBtn:not([href]) {
cursor: default;
}
.ticketBtn:not([href]) .ticketBody {
transition: none;
}
.c_btn:not([href]) {
cursor: default;
opacity: 0.6;
}
/* ------------------------------------------------------------------
* SP メニューの「メニューを閉じる」ボタン(スクリーンリーダー向け不可視
* ボタン)は、メニューが閉じている間・PC 表示では機能しないのに
* フォーカス可能なままだった(2025 年版からの持ち越し)。
* 不可視のタブストップにならないよう、必要な時だけ表示対象にする。
* ------------------------------------------------------------------ */
header:not(.-menuOpen) .naviWrapper > button.txtHidden {
display: none;
}
@media screen and (min-width: 768px) {
.naviWrapper > button.txtHidden {
display: none;
}
}
/* ------------------------------------------------------------------
* アーカイブサムネイルの共通枠
* 3 年分とも 2026 年版支給の archive_20XX.png(1200x630、枠デザインなし)に
* 統一したため、CSS 側で共通の枠を付ける。比率は 2025 年版サムネイル
* (430x250)に合わせて切り抜き、枠線・角丸はサイト共通の意匠
* (roundBox の青 #2864f0)に揃える。
* ------------------------------------------------------------------ */
.archivesList ul li a img {
width: 100%;
aspect-ratio: 430 / 250;
object-fit: cover;
height: auto;
border: 2px solid #2864f0;
border-radius: clamp(4px, calc(10 / 1366 * 100vw), 10px);
background-color: #fff;
}
/* ------------------------------------------------------------------
* セクション装飾キャラクター(2026 年版)
* 2025 年版の装飾は前年 KV 由来の大きなシート画像(concept_deco01 など)
* だったため、2026 年版 KV のキャラクター画像(assets/img/png/character_NN.png)
* を 1 体ずつ配置する方式に置き換えた。マークアップは各コンポーネントの
* ![]()