/* ==========================================================================
Yugyosen main stylesheet
- 色は白背景・白文字どちらでも WCAG AA（4.5:1）を満たす組み合わせのみ使用
- フォントサイズは rem（ブラウザの文字サイズ設定に追従）
- フォーカスは常に見える（:focus-visible）
========================================================================== */
:root {
--c-main: #025f90;
--c-deep: #112a32;
--c-pale: #e8e8e8;
--c-pale-2: #f2f9f9;
--c-line: #51727c;
--c-accent: #b5413d;
--c-text: #112a32;
--c-bg: var(--c-pale-2);
--c-focus: var(--c-deep);
--f-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
--f-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
--w-content: 1044px;
--gutter: 20px;
--tap: 2.75rem;
}
@media (max-width: 768px) { :root { --gutter: clamp(20px, 9.23vw, 36px); } }
/* Base ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
margin: 0;
overflow-x: clip;
background: var(--c-bg);
color: var(--c-text);
font-family: var(--f-sans);
font-size: 1rem;
line-height: 1.5;
overflow-wrap: anywhere;
}
img, video, iframe { max-width: 100%; }
img { height: auto; vertical-align: middle; }
a { color: var(--c-main); text-underline-offset: .2em; }
.entry-content a:hover { color: var(--c-deep); }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
button, input, select, textarea { font: inherit; }
.screen-reader-text {
position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: 8px; top: -100px; z-index: 1000;
padding: 8px 16px; background: var(--c-deep); color: #fff; text-decoration: none;
}
.skip-link:focus { top: 8px; color: #fff; --c-focus: #fff; outline-offset: -5px; }
/* Header ----------------------------------------------------------------- */
.site-header {
position: fixed; top: 0; left: 0; right: 0; z-index: 50;
background: rgb(242 249 249 / .8);
-webkit-backdrop-filter: blur(10px) brightness(1.2);
backdrop-filter: blur(10px) brightness(1.2);
}
.site-header__inner {
display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: ". brand utility" "global global global";
max-width: var(--w-content); margin: 0 auto; padding: 2rem var(--gutter) 0; column-gap: 1rem; min-height: 160px;
}
.site-branding { grid-area: brand; text-align: center; }
.site-title { margin: 0; font-family: var(--f-serif); font-weight: 300; font-size: clamp(1.5rem, 4vw, 2.6rem); line-height: 1.2; letter-spacing: 0.1em; }
.site-title a { color: var(--c-deep); text-decoration: none; }
.site-title__logo { max-height: 4rem; width: auto; }
.site-description { margin: .25rem 0 0; font-family: var(--f-serif); font-size: clamp(.75rem, 1.09vw, .875rem); font-weight: 200; color: var(--c-main); line-height: 1.42; }
.site-menu { display: contents; }
.utility-nav { position: absolute; top: 0; left: 0; right: 0; grid-area: utility; justify-self: end; padding: 0 20px; }
.utility-nav__list { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: .25rem 0 0; padding: 0; list-style: none; font-family: var(--f-serif); font-size: .9rem; }
.utility-nav a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--c-text); text-decoration: none; }
.utility-nav a:hover, .utility-nav a[aria-current="page"] { color: var(--c-main); text-decoration: underline; }
.global-nav { grid-area: global; margin: 1rem calc(var(--gutter) * -1) 0; }
.global-nav__list { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; border-right: 1px solid var(--c-main); font-size: 1.05rem; }
.global-nav__list > li { flex: 1; border-left: 1px solid var(--c-main); }
.global-nav a {
display: flex; align-items: center; justify-content: center; height: 100%; min-height: 4.5rem;
padding: .5rem .75rem; text-align: center; text-decoration: none; color: var(--c-main);
font-family: var(--f-serif); font-weight: 500; line-height: 1.5;
transition: background-color .3s, color .3s;
}
.global-nav a[href]:hover,
.global-nav a[aria-current="page"],
.global-nav .current-menu-ancestor > a { background: var(--c-main); color: #fff; }
.global-nav a[aria-current="page"] { box-shadow: inset 0 -4px 0 var(--c-deep); }
@media (min-width: 769px) {
.site-header__inner {
grid-template-columns: max-content minmax(0, 1fr); grid-template-areas: "brand global";
align-items: flex-end; padding: 1.87rem var(--gutter);
}
.site-branding { text-align: left; }
.site-title { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 500; }
.site-description { margin: .62rem 0 0; font-size: clamp(.75rem, 1.09vw, .875rem); letter-spacing: .2em; color: var(--c-deep); }
.utility-nav {
top: 1.87rem; left: auto; right: max(var(--gutter), calc((100% - var(--w-content)) / 2 + var(--gutter)));
padding: 0;
}
.utility-nav__list { margin: 0; font-size: .875rem; }
.utility-nav a { min-height: 2rem; color: #51727C; }
.utility-nav a:hover, .utility-nav a[aria-current="page"] { color: var(--c-main); }
.utility-nav { display: flex; align-items: center; }
.utility-nav__lang { padding-left: 1.5rem; margin-left: 1.5rem; border-left: 1px solid #51727C; }
.global-nav { margin: 1rem 0 0; justify-self: end; min-width: 0; }
.global-nav__list { gap: .5rem 1.12rem; border: 0; font-size: clamp(.875rem, 1.31vw, 1.05rem); }
.global-nav__list > li { flex: none; border: 0; }
.global-nav a { min-height: 0; padding: 0; color: var(--c-deep); font-weight: 300; text-decoration: underline; text-underline-offset: .3em; }
.global-nav a[href]:hover, .global-nav a[aria-current="page"], .global-nav .current-menu-ancestor > a { background: none; color: var(--c-main); box-shadow: none; }
}
.is-disabled { color: var(--c-line) !important; cursor: default; }
.menu-toggle {
grid-area: toggle; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
position: relative; z-index: 70; width: 3.25rem; height: 3.25rem; padding: 0;
border: 0; border-radius: 4px; background: var(--c-main); color: #fff; cursor: pointer;
}
.menu-toggle__icon, .menu-toggle__icon::before, .menu-toggle__icon::after {
display: block; width: 22px; height: 2px; background: currentColor; content: ""; transition: transform .2s;
}
.menu-toggle__icon { position: relative; margin: 6px 0 7px; }
.menu-toggle__icon::before { position: absolute; top: -7px; }
.menu-toggle__icon::after { position: absolute; top: 7px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { transform: translateY(-7px) rotate(-45deg); }
/* SP：背景なしの濃い色の 3 本線（デザインどおり）。ラベルは画面では隠し、読み上げには残す */
@media (max-width: 768px) {
.menu-toggle { position: absolute; top: 50%; right: 6.15%; transform: translateY(-50%); background: transparent; color: var(--c-deep); }
.menu-toggle__icon, .menu-toggle__icon::before, .menu-toggle__icon::after { width: 32px; }
.menu-toggle__icon::before { top: -16px; }
.menu-toggle__icon::after { top: 16px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { transform: translateY(16px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { transform: translateY(-16px) rotate(-45deg); }
.menu-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.menu-toggle__label { font-size: .625rem; line-height: 1; }
.menu-backdrop { position: fixed; inset: 0; z-index: 55; background: rgb(0 20 30 / .55); }
.menu-backdrop[hidden] { display: none; }
body.is-menu-open, body.is-lightbox-open { overflow: hidden; }
/* Hero ------------------------------------------------------------------- */
.hero { position: relative; z-index: 51; width: 100%; min-height: 100dvh; background: var(--c-deep); border-radius: 0 0 30px 30px; overflow: hidden; }
.hero picture { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none; }
.hero__img, .event-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__copy {
position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
width: 100%; max-width: var(--w-content); margin: 0 auto; padding: 205px var(--gutter) 90px; box-sizing: border-box;
color: #E0F2F1; font-family: var(--f-serif);
}
.hero__lead { margin: 0; font-size: clamp(1rem, 3.5vh, 1.75rem); font-weight: 300; line-height: 2; letter-spacing: .2em; }
.hero__title { margin-top: 3rem; padding-left: 1rem; border-left: 2px solid #E0F2F1; }
.hero__main {
margin: 0;
font-size: clamp(1.9rem, 5.5vh, 2.75rem); font-weight: 300; line-height: 1.45; letter-spacing: .2em;
}
.hero__en { margin: 0.6rem 0 0; font-size: clamp(.7rem, 1.75vh, .87rem); letter-spacing: .2em; line-height: 1.9; }
.hero__links { margin-top: 3rem; }
.hero__links ul { display: flex; flex-wrap: wrap; gap: .5rem 1.12rem; margin: 0; padding: 0; list-style: none; }
.hero__links a { color: #fff; text-decoration: underline; text-underline-offset: .3em; }
.hero__links a:focus-visible { outline-offset: 4px; }
@media (min-width: 769px) {
.hero__links { font-size: clamp(.875rem, 1.25vw, 1rem); }
}
.contact-fixed {
position: fixed; right: 0; bottom: 1.87rem; z-index: 40; margin: 0; font-family: var(--f-serif); font-size: .75rem; font-weight: 200; text-shadow: none; line-height: 1.2;
display: inline-flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; padding: 0.8rem 2.5rem 0.8rem 1rem; border-radius: 999px 0 0 999px; background: var(--c-deep);
}
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.contact-fixed__badge { position: relative; display: inline-flex; flex: none; justify-content: center; align-items: center; box-sizing: border-box; border-radius: 50%; width: 2.5em; height: 2.5em; }
.contact-fixed__badge::before, .join-button__badge::before {
content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .3s;
}
.contact-fixed__icon { position: relative; width: 1.37rem; height: auto; fill: currentColor; transition: transform .3s, color .3s; }
.contact-fixed:is(:hover, :focus-visible) .contact-fixed__badge::before { transform: scale(1); }
.contact-fixed:is(:hover, :focus-visible) .contact-fixed__icon { color: #303030; }
.contact-fixed:focus-visible { outline-offset: 3px; }
/* SP：画面下部に全幅で固定 */
@media (max-width: 768px) {
.contact-fixed { position: sticky; left: 0; right: 0; bottom: 0; width: 100%; margin: 0; font-size: 1rem; letter-spacing: .15em; }
.contact-fixed { justify-content: center; width: 100%; padding: .9rem 1rem; border-radius: 0; }
.contact-fixed__icon { color: #fff; }
/* SP では hover のアニメーションを出さない（白い丸の拡大と、アイコンの移行をやめる） */
.contact-fixed__badge::before, .contact-fixed__icon { transition: none; }
.contact-fixed:is(:hover, :focus-visible) .contact-fixed__badge::before { transform: scale(0); }
}
.hero-utility { position: absolute; top: 1.87rem; right: var(--gutter); z-index: 1; display: flex; align-items: center; font-size: 0.87rem; }
.hero-utility ul { display: flex; align-items: center; gap: 0 1rem; margin: 0; padding: 0; list-style: none; }
.hero-utility a { color: #E0F2F1; text-decoration: none; line-height: 1.2;}
.hero-utility a:hover, .hero-utility a:focus-visible, .lang-toggle:hover, .lang-toggle:focus-visible, .pagination .page-numbers:hover { text-decoration: underline; text-underline-offset: .3em; }
.hero-utility__lang { padding-left: 1rem; margin-left: 1rem; border-left: 1px solid #E0F2F1; }
.hero-utility__lang *, .utility-nav__lang * {
background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
.hero-utility__lang select, .utility-nav__lang select {
appearance: none; padding: 0; margin: 0; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer;
}
.hero-utility__lang option, .utility-nav__lang option { color: var(--c-text); background: #E0F2F1; }
.hero-utility .is-disabled { color: #E0F2F1 !important; }
.lang-toggle {
min-height: 1.25rem; padding: 0; border: 0; background: transparent; box-shadow: none;
color: inherit; font: inherit; letter-spacing: inherit; text-decoration: none; cursor: pointer;
}
.hero-utility .lang-toggle { color: #E0F2F1; }
.utility-nav .lang-toggle { color: #51727C; }
.lang-toggle[hidden] { display: none; }
/* GTranslate 本体は非表示にせず、画面外に描画しておく（display: none だと翻訳が始まらないため） */
/* 日付：英語表示（Google 翻訳の translated-ltr）のときだけ英語の省略形を出す */
html.translated-ltr .date__ja { display: none; }
.date__en { display: none; }
html.translated-ltr .date__en { display: inline; }
.lang-gt { position: fixed; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Google 翻訳が上部に出す帯と、そのために本文を押し下げる指定を出さない（翻訳はセレクトで行うため影響しない） */
.skiptranslate, .goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
html body { top: 0 !important; position: static !important; }
@media (max-width: 768px) { .hero-utility { display: none; } }
/* Layout ----------------------------------------------------------------- */
.site-main:focus { outline: none; }
body:not(.home) .site-main { padding-top: var(--header-h, 8rem); }
.site-content, .top-content {
max-width: var(--w-content); margin: 0 auto; padding: 0 var(--gutter) 4rem;
}
.top-content { padding-bottom: 2.25rem; }
.site-content { position: relative; overflow-y: clip; }
.site-content:not(.boat-page) { padding-top: 3rem; }
.site-content::before,
.site-content::after {
content: ""; position: absolute; z-index: -2; pointer-events: none; mix-blend-mode: screen;
background: center / contain no-repeat;
}
.site-content::before { bottom: 1040px; right: -33.52%; width: 482px; height: 245px; background-image: url(../img/common/cloud-02.png); }
.site-content::after { bottom: 20px; left: -19.73%; width: 274px; height: 192px; background-image: url(../img/common/cloud-03.png); }
@media (max-width: 768px) {
.site-content::before { bottom: 300px; right: 0; width: 140px; background-size: 482px; background-position: left center; }
.site-content::after { bottom: 0; left: 0; width: 140px; background-size: 274px; background-position: right center; }
}
.section { margin-top: 3rem; }
.more-link { margin: 1.5rem 0 0; text-align: right; }
.more-link a {
position: relative; display: inline-flex; align-items: center; padding: 0.37rem 3.5rem 0.37rem 1.87rem;
border: 1px solid var(--c-text); border-radius: 999px; font-family: var(--f-serif); font-size: 0.87rem; font-weight: 500; line-height: 1.5; text-decoration: none; color: var(--c-text);
isolation: isolate; overflow: hidden; transition: color .3s;
}
/* 矢印：SVG をマスクにして文字色（currentColor）で描く。ホバーで文字色に追従する */
.more-link a::after, .event-card__more::after {
position: absolute; top: 50%; right: 1.87rem; width: 17px; height: 13px; transform: translateY(-50%);
content: ""; background: currentColor;
mask: url("data:image/svg+xml,") no-repeat center / contain;
-webkit-mask: url("data:image/svg+xml,") no-repeat center / contain;
}
.join-button:hover { background: var(--c-text); color: #fff; }
/* 円形の背景を左から右へ伸ばす（::before の幅を 0 → 100%） */
/* 枠線（1px）の外側まで塗り、角丸の形を枠線と一致させる */
.more-link a::before, .event-card__more::before { content: ""; position: absolute; top: -1px; bottom: -1px; left: -1px; width: 0; border-radius: inherit; z-index: -1; transition: width .3s; }
.more-link a::before { background: var(--c-text); }
.more-link a:hover::before { width: calc(100% + 2px); }
.more-link a:hover { color: #fff; }
.badge {
display: inline-block; margin-left: .4em; padding: 0 .5em; border-radius: 3px;
background: var(--c-accent); color: #fff; font-family: var(--f-sans); font-size: .75rem; line-height: 1.6; vertical-align: .1em;
}
/* Post list -------------------------------------------------------------- */
.post-list { margin: 0; padding: 0; list-style: none; border-top: 1px dotted var(--c-line); }
.post-list__item { padding: 1rem 0; border-bottom: 1px dotted var(--c-line); }
/* 2 列の形（日付 | 内容） */
.post-list .post-list__item { display: grid; grid-template-columns: 8em 1fr; gap: .25rem 1.25rem; }
.post-list__meta { margin: 0; color: var(--c-main); letter-spacing: 0.02em; }
.post-list__label {
display: inline-block; margin-left: .25em; padding: 0 .5em; border: 1px solid currentColor; border-radius: 3px;
font-family: var(--f-sans); font-size: .75rem; vertical-align: .1em;
}
.post-list__title { margin: 0; font-size: 1rem; font-weight: 400; line-height: 1.5; }
.post-list__title a, .top-service__title a, .event-card__title a { color: var(--c-text); text-decoration: none; }
.post-list__title a:hover { color: var(--c-main); text-decoration: underline; }
.post-list__content { grid-column: 2; }
.post-list__excerpt { margin: 0; color: var(--c-line); font-size: .9rem; }
.top-news { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 2rem; align-items: center; margin-top: 5.87rem; padding-bottom: 6.87rem;
background: linear-gradient(to right, var(--c-line) 10px, transparent 10px) 0 100% / 20px 2px repeat-x; }
.top-news .section-head { grid-column: 1; grid-row: 1; max-width: none; margin: 0; padding: 0 0 0 1.5rem; text-align: left; }
.top-news .post-list { grid-column: 2; grid-row: 1; justify-self: end; width: min(664px, 100%); }
.top-news .post-list__item { position: relative; padding: 1.5rem 3rem 1.5rem 0; }
.top-news .post-list__title a::after { content: ""; position: absolute; inset: 0; }
.top-news .post-list__title a:focus-visible { outline-offset: 4px; }
.top-news .post-list__meta { color: #f77f00; }
.top-news .post-list__item::after {
content: ""; position: absolute; top: 50%; right: 1.3rem; width: .87rem; height: .87rem;
border-top: 2px solid var(--c-text); border-right: 2px solid var(--c-text); transform: translateY(-50%) rotate(45deg); transition-duration: .3s;
}
.top-news .post-list__item:hover::after {
right: .5rem;
}
.top-news .more-link { grid-column: 2; grid-row: 2; justify-self: end; width: min(664px, 100%); margin-right: 1.5rem; }
@media (max-width: 768px) {
.top-news { grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; }
.top-news .section-head, .top-news .post-list, .top-news .more-link { grid-column: 1; grid-row: auto; width: auto; justify-self: stretch; }
}
/* 全文表示（ニュース一覧）：白い面の中に縦に並べ、項目の間は青い線で区切る */
.post-list--full { margin: 0; padding: 0; list-style: none; }
/* 白い面：全件表示の一覧とページ送りを囲む */
.news-panel { padding: 2.12rem 8.56% 4.37rem; background: #fff; }
.post-list--full__item { padding: 0 5%; }
.post-list--full__item:not(:last-child) { margin-bottom: 6.25rem; padding-bottom: 2.75rem; border-bottom: 2px solid var(--c-main); }
.post-list--full__meta { margin: 0 0 0.37rem; font-size: 1.12rem; }
.post-list--full__label {
display: inline-block; margin-left: .25em; padding: 0 .5em; border: 1px solid currentColor; border-radius: 3px;
font-size: .75rem; vertical-align: .1em;
}
.post-list--full__title {
margin: 0; padding-bottom: 1.87rem;
background: linear-gradient(to right, var(--c-line) 2px, transparent 2px) 0 100% / 5px 1px repeat-x;
font-family: var(--f-serif); font-weight: 500; font-size: 1.87rem; line-height: 1.53;
}
.post-list--full__body { margin-top: 2.12rem; }
.post-list--full__body > :first-child { margin-top: 0; }
@media (max-width: 768px) {
.news-panel { padding-inline: 1rem; }
.post-list--full__item { padding-inline: .5rem; }
.post-list--full__item:not(:last-child) { margin-bottom: 3.75rem; }
}
/* Year nav --------------------------------------------------------------- */
.year-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.5rem 0; }
.year-nav__form { position: relative; display: flex; gap: .5rem; }
.year-nav__select, .year-nav__submit {
min-height: 1.87rem; padding: .25rem .75rem; border: 1px solid var(--c-main); border-radius: 4px; font-size: 1rem; font-weight: 700; text-align: center; line-height: 1.5;
}
.year-nav__submit { background: var(--c-main); color: #fff; cursor: pointer; }
.year-nav__submit:hover { background: var(--c-deep); }
.page-head {
position: sticky; top: var(--header-h, 8rem); z-index: 10;
width: 100vw; margin-left: calc(50% - 50vw);
background: var(--c-bg);
}
.page-head__inner {
position: relative; max-width: var(--w-content); margin: 0 auto; padding: 1.87rem var(--gutter) 2.5rem;
}
.page-head__inner::before {
content: ""; position: absolute; top: 0.81rem; right: -3.25%; z-index: -1; pointer-events: none; width: 82px; aspect-ratio: 82 / 26; transform: rotate(-4deg); background: url(../img/common/seagull.png) center / contain no-repeat;
}
@media (min-width: 769px) and (max-width: 1100px) {
.page-head__inner::before { right: 0; }
}
/* お知らせ一覧の見出し：年の選択を右に置く 3 列（SP では縦に並べる） */
.page-head__inner--news { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 1rem 2rem; }
.page-head__inner::after {
content: ""; position: absolute; bottom: 0; left: var(--gutter); right: var(--gutter); height: 1px; background-color: var(--c-line);
}
.yg-sticky { position: sticky; top: var(--header-h, 8rem); z-index: 10; background: var(--c-bg); }
.page-head__title { display: flex; flex-direction: column; }
.page-head__en { margin: 0; font-family: var(--f-serif); font-size: 2.5rem; font-weight: 600; line-height: 1.42; letter-spacing: 0.026em; color: var(--c-line); }
.page-head__ja { margin: .5rem 0 0; font-family: var(--f-sans); font-size: 1rem; font-weight: 400; line-height: 1.5; letter-spacing: normal; color: var(--c-text); }
.page-head .year-nav { grid-column: 2; justify-self: center; margin: 0 0 -10px; }
/* SP：見出しと年の選択を縦に並べる */
@media (max-width: 768px) {
.page-head__inner { max-width: none; padding: 1rem var(--gutter); }
.page-head__inner--news { grid-template-columns: 1fr; gap: .75rem; }
.page-head .year-nav { grid-column: 1; margin: 0; }
}
.year-nav__select {
appearance: none; min-width: 7em; padding: 0 1.87rem; border: 1px solid var(--c-deep); border-radius: 999px;
background: #e0f2f1; color: var(--c-deep);
}
.year-nav__form::after {
position: absolute; top: 50%; right: 1.1rem; width: .45rem; height: .45rem; pointer-events: none; content: "";
border-right: 2px solid var(--c-deep); border-bottom: 2px solid var(--c-deep); transform: translateY(-75%) rotate(45deg);
}
/* Pagination / post navigation ------------------------------------------ */
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1em; margin-top: 6.25rem; }
/* 枠なし：矢印（< >）と数字だけ。現在のページは太字で示す */
.pagination .page-numbers {
display: inline-flex; align-items: center; justify-content: center;
color: var(--c-line); font-size: 1.25rem; text-decoration: none; padding: 0 1px;
}
.pagination .page-numbers.current { color: var(--c-main); font-weight: 700; }
.pagination .page-numbers.current:hover { text-decoration: none; }
.pagination .pagination__icon { width: 13.6px; height: 24px; fill: none; stroke: currentColor; }
.pagination .pagination__icon--prev { transform: scaleX(-1); }
.pagination .page-numbers.dots { border-color: transparent; }
.post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.post-navigation .nav-next { grid-column: 2; text-align: right; }
.post-navigation a { display: block; padding: .75rem 1rem; border: 1px solid var(--c-pale); text-decoration: none; }
.post-navigation a:hover { border-color: var(--c-main); }
.post-navigation__label { display: block; color: var(--c-line); font-size: .8rem; }
.post-navigation__title { display: block; color: var(--c-text); }
.page-links { margin-top: 2rem; }
.page-links a, .page-links > .post-page-numbers { display: inline-block; min-width: var(--tap); padding: .5rem; text-align: center; }
/* Entry ------------------------------------------------------------------ */
.entry__header { margin: 2rem 0; padding-left: 1rem; border-left: 4px solid var(--c-main); }
.entry__title { margin: 0; font-family: var(--f-serif); font-weight: 500; font-size: clamp(1.4rem, 3vw, 1.8rem); line-height: 1.5; color: var(--c-deep); }
.entry__meta { margin: .5rem 0 0; color: var(--c-main); font-family: var(--f-serif); }
.entry__label { margin-left: .5em; padding: 0 .5em; border: 1px solid currentColor; border-radius: 3px; font-family: var(--f-sans); font-size: .75rem; }
/* Entry content（ブロックエディタの本文） ----------------------------------- */
.entry-content > :first-child { margin-top: 0; }
.entry-content h2, .entry-content h3, .entry-content h4 { font-family: var(--f-serif); font-weight: 500; line-height: 1.5; }
.entry-content h2 { margin: 3rem 0 1.25rem; padding-bottom: .25rem; border-bottom: 2px solid var(--c-main); color: var(--c-deep); font-size: 1.5rem; }
.entry-content h3 { margin: 2rem 0 1rem; color: var(--c-main); font-size: 1.25rem; }
.entry-content h4 { margin: 1.5rem 0 .75rem; font-size: 1.05rem; }
.entry-content a:not(.wp-element-button) { text-decoration: underline; }
.entry-content ul, .entry-content ol { padding-left: 1.5em; }
.entry-content iframe { display: block; }
.entry-content .alignwide { margin-inline: max(calc((var(--w-content) - 1200px) / 2), calc(var(--gutter) * -1)); }
.entry-content .alignfull { margin-inline: calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.entry-content .wp-block-table { margin: 1.5rem 0; overflow-x: auto; }
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content .wp-block-table table.has-fixed-layout { table-layout: auto; }
.entry-content th, .entry-content td { padding: .75rem; border: 1px solid var(--c-pale); text-align: left; vertical-align: top; }
.entry-content thead th { background: var(--c-main); color: #fff; font-weight: 500; }
.entry-content tbody th { width: 25%; min-width: 7em; background: #fff; color: var(--c-deep); font-weight: normal; }
.entry-content .wp-element-caption { color: var(--c-line); font-size: .875rem; }
.entry-content .wp-block-gallery a { cursor: zoom-in; }
.wp-element-button, .wp-block-button__link {
display: inline-flex; align-items: center; min-height: var(--tap); padding: .5rem 1.5rem;
border: 2px solid var(--c-main); border-radius: 999px; background: var(--c-main); color: #fff;
font-family: var(--f-serif); text-decoration: none; line-height: 1.5;
}
.wp-block-button__link:hover { background: var(--c-deep); border-color: var(--c-deep); color: #fff; }
.is-style-outline > .wp-block-button__link { background: transparent; color: inherit; border-color: currentColor; }
.is-style-outline > .wp-block-button__link:hover { background: #fff; color: var(--c-main); border-color: #fff; }
.yg-steps { counter-reset: none; }
.yg-steps > h3 { padding: .5rem 1rem; background: #fff; border-left: 4px solid var(--c-main); }
.yg-card { display: flex; flex-direction: column; padding: 1.25rem; border: 1px solid var(--c-pale); border-top: 4px solid var(--c-main); }
.yg-card > h3 { margin-top: 0; }
.yg-card > .wp-block-buttons { margin-top: auto; }
/* Top: 主な事業（3 カラム。カード全体がリンク） ------------------------------ */
.top-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 8rem 0 0; padding: 0; list-style: none; }
.top-service {
position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 3.12rem 1rem 5.62rem;
border-radius: 1.87rem; background: #fff; box-shadow: 3px 3px 5px rgb(0 0 0 / .16);
}
.top-service__title { margin: 0; font-family: var(--f-serif); font-weight: 500; font-size: 1.37rem; line-height: 1.4; letter-spacing: .1em; }
.top-service__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.top-service__title a:hover { color: var(--c-main); }
.top-service__head { margin-bottom: 1.37rem; }
.top-service__en { margin: .62rem 0 0; color: var(--c-main); font-family: var(--f-serif); font-weight: 300; letter-spacing: .1em; line-height: 1.37; }
.top-service__desc { margin: 0; color: var(--c-line); }
.top-service__more {
position: absolute; bottom: 1.5rem; right: 1.62rem;
margin: auto 0 0; align-self: flex-end; display: flex; align-items: center; gap: .37rem;
color: var(--c-line); font-family: var(--f-serif); font-size: 1.37rem; letter-spacing: .1em; opacity: 0.5;
}
.top-service__more::before { content: ""; width: 4.25rem; height: 1px; background: var(--c-line); transition-duration: 0.3s; }
.top-service:hover .top-service__more::before { width: 0; }
.top-service__title a:focus-visible { outline-offset: 4px; }
/* Top: イベント（スライダー） ----------------------------------------------- */
.event-section { position: relative; padding: 4rem 0 5.62rem; }
.event-section::before,.event-section::after { content: ""; position: absolute; z-index: -1; pointer-events: none; mix-blend-mode: screen; background: center / contain no-repeat; }
.event-section::before { top: 0; right: -210px; width: 482px; aspect-ratio: 482/460; background-image: url(../img/common/cloud-01.png); }
.event-section::after { bottom: -104px; left: -120px; width: 482px; aspect-ratio: 482/215; background-image: url(../img/common/cloud-02.png); }
/* 共通の見出し（イベント・加入案内）：中央揃えの英字と日本語の見出し */
.section-head { margin: 0 0 1.62rem; padding-inline: var(--gutter); text-align: center; }
.section-head__en { margin: 0; color: var(--c-main); font-family: var(--f-serif); font-size: 2.75rem; letter-spacing: .1em; line-height: 1.45; }
.section-head__title { margin: .25rem 0 0; color: var(--c-text); font-family: var(--f-sans); font-size: 1.12rem; font-weight: 400; letter-spacing: .1em; line-height: 1.44; }
.event-slider__viewport { overflow-x: auto; }
.event-slider__track { display: flex; width: max-content; }
.event-slider__list { display: flex; gap: 1rem; margin: 0; padding: 1rem 1.5rem 1.5rem 0; list-style: none; }
.event-card {
position: relative; display: flex; flex: 0 0 min(18.5rem, 78vw); flex-direction: column;
overflow: hidden; border-radius: 1.87rem; background: #fff; box-shadow: 3px 3px 5px rgb(0 0 0 / .16);
}
.event-card__category { margin: 0; padding: .75rem 1rem; color: #00A896; font-family: var(--f-serif); font-weight: 500; text-align: center; line-height: 1.25; letter-spacing: .02em; text-transform: capitalize; }
.event-card__media { aspect-ratio: 324 / 190; background: linear-gradient(135deg, #a8d0da, #51727c); }
.event-section__empty { margin: 0; padding-inline: var(--gutter); text-align: center; color: var(--c-line); }
.event-card__body { position: relative; display: flex; flex: 1; flex-direction: column; gap: .37rem; padding: 0.62rem 1rem 4.12rem; }
.event-card__title { margin: 0; font-family: var(--f-serif); font-weight: 500; font-size: 1.25rem; line-height: 1.45; letter-spacing: 0.1em; }
.event-card__title a::after { content: ""; position: absolute; inset: 0; }
.event-card:hover .event-card__title a { color: var(--c-main); text-decoration: underline; }
.event-card__date { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; font-size: 1.12rem; line-height: 1.44; }
.event-card__badge { padding: 0.12rem 1rem; border-radius: 999px; background: var(--c-main); color: #fff; font-size: .87rem; }
.event-card__info { margin: 0; padding: 0; list-style: none; font-size: .87rem; line-height: 1.25; }
.event-card__more {
position: absolute; bottom: 0.75rem; left: 0; right: 0; align-self: center; max-width: 10rem; margin: 0 auto; padding: .5rem 3.75rem; border: 1px solid var(--c-deep); border-radius: 999px;
color: var(--c-deep); font-size: 0.87rem; letter-spacing: .05em; line-height: 1.57;
isolation: isolate; overflow: hidden; transition: color .3s;
}
/* カードのホバーで、背景を左から右へ塗る */
.event-card__more::before { background: var(--c-deep); }
.event-card:hover .event-card__more::before { width: calc(100% + 2px); }
.event-card:hover .event-card__more { color: #fff; }
.event-slider__list[inert] { display: none; }
/* 動き：JS 有効・「動きを減らす」無効のときだけ自動で流れる（無限ループ） */
@media (prefers-reduced-motion: no-preference) {
.js .event-slider__viewport { overflow: hidden; }
.js .event-slider__track { animation: event-scroll 45s linear infinite; }
.js .event-slider__list[inert] { display: flex; }
/* キーボードでフォーカスが入ったら止める（Tab で移動した先が流れて消えないように） */
.js .event-slider:focus-within .event-slider__track { animation-play-state: paused; }
}
@keyframes event-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* 件数が少ないときは流さず中央に並べる（PC は 2 件以下、SP は 1 件以下） */
@media (min-width: 769px) {
.event-slider--pc-static .event-slider__viewport { overflow: visible; }
.event-slider--pc-static .event-slider__track { width: 100%; justify-content: center; animation: none; }
.event-slider--pc-static .event-slider__list { justify-content: center; padding-right: 0; }
.event-slider--pc-static .event-slider__list[inert] { display: none; }
}
@media (max-width: 768px) {
.event-slider--sp-static .event-slider__viewport { overflow: visible; }
.event-slider--sp-static .event-slider__track { width: 100%; justify-content: center; animation: none; }
.event-slider--sp-static .event-slider__list { justify-content: center; padding-right: 0; }
.event-slider--sp-static .event-slider__list[inert] { display: none; }
}
/* Top: 組合加入のご案内 ---------------------------------------------------- */
.join-section { padding: 4rem 0 0; text-align: center; }
.join-section__inner { position: relative; max-width: var(--w-content); min-height: 550px; margin: 0 auto; padding-inline: var(--gutter); }
.join-section__inner::before,.join-section__inner::after { content: ""; position: absolute; z-index: -1; pointer-events: none; mix-blend-mode: screen; background: center / contain no-repeat; }
.join-section__inner::before { bottom: 180px; right: -31.6%; width: 482px; aspect-ratio: 482/245; background-image: url(../img/common/cloud-02.png); }
.join-section__inner::after { bottom: 84px; left: -10.15%; width: 273px; aspect-ratio: 273/192; background-image: url(../img/common/cloud-03.png); }
.join-section__lead { margin: 1.62rem 0 0; font-size: 0.87rem; line-height: 2; }
.join-section__lead p { margin: 0; }
.join-section__ask { margin: 2.25rem 0 0; font-family: var(--f-serif); font-weight: 500; }
.join-button {
margin-top: 0.62rem; display: inline-flex; align-items: center; gap: .18rem; min-height: 3.5rem; padding: 0.25rem 2.87rem;
border-radius: 999px; background: var(--c-deep); color: #fff; font-size: 1.12rem; line-height: 1.5; letter-spacing: .1em; text-decoration: none;
}
.join-button__icon { position: relative; width: 1.43rem; height: auto; flex: none; fill: currentColor; transition: color .3s; }
.join-button__badge { position: relative; display: inline-flex; flex: none; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; }
.join-button:is(:hover, :focus-visible) .join-button__badge::before { transform: scale(1); }
.join-button:is(:hover, :focus-visible) .join-button__icon { color: #303030; }
/* SP では hover のアニメーションを出さない（contact-fixed と同じ扱い） */
@media (max-width: 768px) {
.join-button__badge::before, .join-button__icon { transition: none; }
.join-button:is(:hover, :focus-visible) .join-button__badge::before { transform: scale(0); }
}
.join-section__notice { margin: 1.37rem 0 0; font-size: .87rem; color: #f77f00; text-decoration: underline; text-underline-offset: .3em; line-height: 1.57; }
.join-section__gift {
max-width: 500px; margin: 2.25rem auto 0; padding: 1rem;
border: 1px solid var(--c-main); background: #fff; color: var(--c-line); font-weight: 500; text-align: center;
}
.join-section__tags { position: relative; z-index: 11; max-width: 422px; width: 100%; aspect-ratio: 422/134; margin: 2.25rem auto 0; }
.join-tag {
position: absolute; display: flex; align-items: center; justify-content: center;
background: var(--c-deep); color: #fff; letter-spacing: .08em;
}
.join-tag--sticker { left: 50%; top: 0; transform: translateX(-50%) rotate(-15deg); transform-origin: right; width: 60.18%; aspect-ratio: 254/76; margin-left: -18.48%; }
.join-tag--flag { left: 50%; top: 6.71%; transform: translateX(-50%) rotate(15deg); transform-origin: left; width: 43.6%; aspect-ratio: 184/146; margin-left: 24.17%; }
img.join-tag { background: none; object-fit: cover; }
/* isolation は付けない（雲の mix-blend-mode が背景と合成されるため） */
.section, .event-section, .join-section { position: relative; }
.deco { position: absolute; z-index: -1; max-width: none; height: auto; pointer-events: none; }
.deco--cloud { mix-blend-mode: screen; }
/* TOP のお知らせの雲：セクションの擬似要素で描く */
.top-news::before {
content: ""; position: absolute; z-index: -1; left: -31.87%; top: 100%; margin-top: -86px; width: 30.12rem;
aspect-ratio: 482 / 460; pointer-events: none; mix-blend-mode: screen;
background: url(../img/common/cloud-01.png) center / contain no-repeat;
}
.deco--seagull-news { right: -10.55%; top: -3.75rem; width: 134px; transform: rotate(-4deg); }
@media (min-width: 769px) and (max-width: 1100px) {
.deco--seagull-news { right: 0; }
}
.deco--character-news { left: 4.48%; bottom: 1.37rem; width: clamp(6rem, 12vw, 8.5rem); }
.deco--cloud-event-right { right: -4%; top: 6rem; width: clamp(14rem, 34vw, 26rem); }
.deco--cloud-event-left { left: -5%; top: 22rem; width: clamp(10rem, 22vw, 16rem); }
.deco--seagull-event { left: 50%; top: 42px; width: 134px; transform: translateX(-50%) rotate(20deg); transform-origin: left; margin-left: 300px; }
.deco--seagull-join { left: 4.11%; top: 10.75rem; width: 134px; transform: rotate(-14deg); transform-origin: right; }
@media (max-width: 768px) {
.top-services { grid-template-columns: 1fr; }
.section-head__en { font-size: 2.25rem; }
.join-button { padding: 0 1.5rem; font-size: 1.1rem; }
.join-tag { font-size: .9rem; }
}
.yg-cta { margin: 3rem 0; padding: 2rem 1.5rem; text-align: center; --c-focus: #fff; }
.entry-content .yg-cta h2 { border: 0; color: inherit; margin-top: 0; }
.yg-cta .wp-block-buttons { justify-content: center; }
.yg-cta a:not(.wp-element-button) { color: inherit; }
.yg-faq { margin: 0; border-bottom: 1px solid var(--c-pale); }
.yg-faq:first-of-type { border-top: 1px solid var(--c-pale); }
.yg-faq summary { position: relative; padding: 1rem 2.5rem 1rem 0; cursor: pointer; font-weight: bold; color: var(--c-deep); list-style: none; }
.yg-faq summary::-webkit-details-marker { display: none; }
.yg-faq summary::after { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); content: "＋"; color: var(--c-main); }
.yg-faq[open] summary::after { content: "−"; }
.yg-faq > :not(summary) { margin: 0 0 1rem; }
.yg-note { margin: 2rem 0; padding: 1rem 1.5rem; border: 2px solid var(--c-accent); border-radius: 4px; }
.entry-content .yg-note h3 { margin: 0 0 .5rem; color: var(--c-accent); }
.yg-note ul { margin: 0; }
.has-main-background-color, .has-deep-background-color, .has-accent-background-color { --c-focus: #fff; }
/* Search ----------------------------------------------------------------- */
.search-form { margin: 1.5rem 0; }
.search-form__label { display: block; margin-bottom: .25rem; font-weight: bold; }
.search-form__row { display: flex; gap: .5rem; max-width: 32rem; }
.search-form__input { flex: 1; min-width: 0; min-height: var(--tap); padding: .25rem .75rem; border: 1px solid var(--c-line); border-radius: 4px; }
.search-form__submit { min-height: var(--tap); padding: 0 1.25rem; border: 0; border-radius: 4px; background: var(--c-main); color: #fff; cursor: pointer; }
.search-form__submit:hover { background: var(--c-deep); }
/* Footer ----------------------------------------------------------------- */
.site-footer { --c-focus: #fff; position: relative; z-index: 10;
color: #fff; }
.site-footer::before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; z-index: -1; pointer-events: none; height: 100%; background: url(../img/common/footer-waves.png) top center / 1280px repeat-x; }
.site-footer__sea { display: flex; flex-direction: column; justify-content: flex-end; position: relative; min-height: 440px; padding-top: 2rem; }
.site-footer__sea::after {
content: ""; position: absolute; right: 1.4%; bottom: 80px; z-index: -1; pointer-events: none; width: clamp(9rem, 28.6vw, 22.81rem); aspect-ratio: 732 / 982; background: url(../img/common/lighthouse-island.png) center / contain no-repeat;
}
@media (min-width: 769px) {
.site-footer--top .site-footer__sea::after { bottom: 100%; margin-bottom: -128px; }
}
@media (max-width: 768px) {
.site-footer__sea {
display: block;
padding-top: 4.87rem;
min-height: 0;
}
.site-footer__sea::after { width: 142px; bottom: 100%; right: 0; margin-bottom: -62px; background-size: 232px; background-position: top left; aspect-ratio: 142 / 312; }
}
.site-footer__inner { width: 100%; max-width: var(--w-content); margin: 0 auto; padding: 0 var(--gutter) 1.25rem; }
@media (max-width: 768px) {
.site-footer__inner {position: relative; padding-bottom: 3.75rem;}
}
.site-footer a { color: #fff; }
.footer-nav { margin-top: 1.25rem; }
.footer-nav__list {
display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; row-gap: 1rem;
}
.footer-nav__list > li + li, .footer-subnav__list > li + li { border-left: 1px solid rgb(255 255 255 / .6); }
@media (max-width: 768px) {
.footer-nav {
margin-top: 1.25rem;
}
.footer-nav__list {
row-gap: 0.62rem;
font-size: 0.87rem;
}
}
.footer-nav a, .footer-nav .is-disabled { display: inline-flex; align-items: center; padding: 0 .87em; text-decoration: none; line-height: 1.4; }
.footer-nav a:hover, .footer-subnav a:hover, .site-footer__mail a:hover { text-decoration: underline; }
.footer-nav .is-disabled { color: #fff !important; }
.footer-subnav { margin-top: 1rem; }
.footer-subnav__list { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; row-gap: 1rem; }
.footer-subnav a { display: inline-flex; align-items: center; padding: 0 .87em; text-decoration: none;line-height: 1.4; }
@media (max-width: 768px) {
.footer-subnav { margin-top: 0.62rem; }
.footer-subnav__list { font-size: 0.87rem; }
}
.site-footer__info { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 1.5rem; }
.site-footer__ship { width: 154px; height: auto; }
@media (max-width: 768px) {
.site-footer__ship { position: absolute; bottom: 100%; left: 6.15%; width: 124px; margin-bottom: 30px; }
}
.site-footer__profile { text-align: left; }
.site-footer__org { font-size: 1.37rem; font-weight: 500; line-height: 1.5; margin: 0 0 0.25rem; }
.site-footer__address { font-style: normal; line-height: 1.5; }
.site-footer__line { display: block; }
.site-footer__mail { margin: 1.37rem 0 0; text-align: center; font-size: 1.12rem; }
.site-footer__mail a { font-family: var(--f-serif); letter-spacing: .2em; text-decoration: none; }
.site-footer__bottom { padding: .65rem var(--gutter); text-align: center; background: var(--c-deep); }
.site-footer__copy { margin: 0; line-height: 1.2; }
/* Lightbox（