@charset "UTF-8";
/* ---------------------------
variable
----------------------------- */
:root {
--black: #000000;
--black-light: #333333;
--gray-dark: #808080;
--gray: #cccccc;
--gray-light: #f2f2f2;
--gray-white: #fafafa;
--white: #ffffff;
--beige: #f3f2ea;
--beige-light: #f7f7f4;
--blue: #0093e2;
--blue-shadow: #204d8e;
--indigo: #0c2756;
--indigo-shadow: #000000;
--orange: #f15a24;
--honey: #f1941d;
--red: #f0181f;
--theme-color: var(--indigo);
--theme-color-shadow: var(--indigo-shadow);
--background-primary: var(--beige-light);
--background-secondary: var(--beige);
--border-primary: var(--gray);
--border-secondary: var(--black);
--font-primary: var(--black);
--family-primary: "Noto Sans JP", sans-serif;
--family-secondary: "Noto Serif JP", sans-serif;
--line-height-tight: 1.2;
--line-height-snug: 1.4;
--line-height-default: 1.5;
--line-height-normal: 1.7;
--line-height-relaxed: 2;
--spacing-gutter: clamp(10px, -2.431px + 3.315vw, 40px);
--header-width: 100px;
--header-height-sp: 50px;
--leading-trim: calc((1em - 1lh) / 2);
--radius-full: calc(1px / 0);
}
/* ---------------------------
icon
----------------------------- */
:root {
--icon-chevron-right: url('data:image/svg+xml,');
--icon-chevron-left: url('data:image/svg+xml,');
--icon-chevron-right-circle: url('data:image/svg+xml,');
--icon-chevron-right-circle-2: url('data:image/svg+xml,');
--icon-arrow-right: url('data:image/svg+xml,');
--icon-train: url('data:image/svg+xml,');
--icon-bus: url('data:image/svg+xml,');
--icon-car: url('data:image/svg+xml,');
--icon-home: url('data:image/svg+xml,');
--icon-calendar: url('data:image/svg+xml,');
}
/* ---------------------------
CSS Reset
----------------------------- */
* {
min-inline-size: 0;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
:where(html) {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
:where(body) {
text-rendering: optimizeSpeed;
line-height: 1.5;
}
:where(body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol) {
margin: 0;
}
:where(ul, ol) {
list-style-type: "";
padding: unset;
}
:where(a:not([class])) {
text-decoration-skip-ink: auto;
}
:where(a) {
text-decoration: none;
}
:where(img, picture) {
max-width: 100%;
height: auto;
display: block;
}
:where(input, button, textarea, select) {
font: inherit;
}
:where(input[type=text], textarea) {
font-size: 16px;
}
:where(textarea) {
field-sizing: content;
}
:where(button, [type=button], [type=reset], [type=submit]) {
touch-action: manipulation;
}
:where(:any-link,
button,
[type=button],
[type=reset],
[type=submit],
label[for],
select,
summary,
[role=tab],
[role=button]) {
cursor: pointer;
}
:focus:not(:focus-visible) {
outline: none;
}
:where(address) {
font-style: normal;
}
:where(table) {
border-collapse: collapse;
}
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after,
::backdrop {
background-attachment: scroll !important;
transition-delay: 0s !important;
transition-duration: 1ms !important;
animation-duration: 1ms !important;
animation-delay: 0s !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}
/* ---------------------------
base
----------------------------- */
body {
background-color: var(--background-primary);
color: var(--font-primary);
font-family: var(--family-primary);
font-size: clamp(14px, 13.22px + 0.207vw, 16px);
line-height: var(--line-height-default);
font-weight: 400;
font-feature-settings: "halt" on;
letter-spacing: 0.04em;
overflow-x: clip;
overflow-y: scroll;
overflow-wrap: anywhere;
word-break: normal;
line-break: strict;
}
body:has(dialog[open]) {
overflow: hidden;
}
body.is_active {
overflow: hidden;
}
a {
color: var(--font-primary);
}
button {
border: none;
color: var(--font-primary);
}
main {
display: block;
padding-left: var(--header-width);
}
@media (max-width: 1024px) {
main {
padding-left: 0;
padding-top: var(--header-height-sp);
}
}
/* ---------------------------
utility
----------------------------- */
.u-wrapper {
max-width: calc(1340px + 2 * var(--spacing-gutter));
margin-inline: auto;
padding-left: var(--spacing-gutter);
padding-right: var(--spacing-gutter);
}
@media (max-width: 640px) {
.u-sm-gutter {
padding-left: 10px;
padding-right: 10px;
}
}
.u-container {
container-type: inline-size;
}
.u-br-sm {
display: none;
}
@media (max-width: 640px) {
.u-br-sm {
display: inline;
}
}
.u-br-sm-none {
display: inline;
}
@media (max-width: 640px) {
.u-br-sm-none {
display: none;
}
}
.u-br-md {
display: none;
}
@media (max-width: 768px) {
.u-br-md {
display: inline;
}
}
.u-br-lg {
display: none;
}
@media (max-width: 1024px) {
.u-br-lg {
display: inline;
}
}
.u-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.u-forced-wide {
margin-inline: calc(50% - 50vi);
}
.u-forced-wide-bg {
border-image: linear-gradient(var(--_background) 0 0) fill 0//0 100vi;
}
/* ---------------------------
component
----------------------------- */
.c-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5em;
width: fit-content;
padding: 0.7em 2.7em 0.9em;
background-color: var(--theme-color);
color: var(--white);
font-size: clamp(13px, 11.83px + 0.311vw, 16px);
transition: opacity 0.2s ease-in-out;
}
.c-btn:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.c-btn:hover {
opacity: 0.7;
}
}
.c-btn::after {
content: "";
display: inline-block;
mask: var(--icon-chevron-right) no-repeat center/contain;
aspect-ratio: 2/3;
inline-size: 0.45em;
background-color: var(--white);
translate: 0 0.05em;
}
.c-btn--center {
margin-inline: auto;
}
.c-btn--orange {
background-color: var(--orange);
}
.c-btn--honey {
background-color: var(--honey);
}
.c-btn-circle {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5em;
width: fit-content;
padding: 0.7em 1.2em 0.9em;
border-radius: 5px;
background-color: var(--honey);
color: var(--white);
font-size: clamp(14px, 13.22px + 0.207vw, 16px);
font-weight: 500;
transition: opacity 0.2s ease-in-out;
}
.c-btn-circle:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.c-btn-circle:hover {
opacity: 0.7;
}
}
.c-btn-circle::after {
content: "";
display: inline-block;
mask: var(--icon-chevron-right-circle-2) no-repeat center/contain;
aspect-ratio: 1/1;
inline-size: 1em;
background-color: var(--white);
translate: 0 0.1em;
}
.c-arrow-link {
display: flex;
align-items: center;
gap: 0.6em;
width: fit-content;
font-size: clamp(14px, 13.22px + 0.207vw, 16px);
transition: opacity 0.2s ease-in-out;
}
.c-arrow-link:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.c-arrow-link:hover {
opacity: 0.7;
}
}
.c-arrow-link::after {
content: "";
display: inline-block;
mask: var(--icon-arrow-right) no-repeat center/contain;
aspect-ratio: 43/8;
inline-size: 2.7em;
background-color: var(--theme-color);
translate: 0 -0.1em;
}
/* ---------------------------
header
----------------------------- */
.header-title {
display: flex;
align-items: center;
height: 50px;
gap: 8px 20px;
margin-left: var(--header-width);
background-color: var(--black-light);
padding: 9px 28px;
position: relative;
z-index: 1000;
}
.header-title:focus-visible p {
opacity: 0.75;
}
@media (any-hover: hover) {
.header-title:hover p {
opacity: 0.75;
}
}
@media (max-width: 1024px) {
.header-title {
display: none;
}
}
.header-title p {
color: var(--white);
font-family: var(--family-secondary);
font-weight: 600;
font-size: 16px;
transition: opacity 0.2s ease-in;
}
.header-fixed {
position: fixed;
top: 0;
left: 0;
width: var(--header-width);
height: 100%;
z-index: 9999;
background-color: var(--theme-color);
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
padding-top: 50px;
padding-bottom: 80px;
}
@media (max-width: 1024px) {
.header-fixed {
width: 100%;
height: var(--header-height-sp);
flex-direction: row;
padding-top: 0;
padding-bottom: 0;
padding-left: var(--spacing-gutter);
}
}
.header-fixed__logo {
order: 2;
}
@media (max-width: 1024px) {
.header-fixed__logo {
order: 1;
}
}
.header-fixed__logo a {
display: block;
width: fit-content;
margin-inline: auto;
}
.header-fixed__logo a img {
transition: scale 0.2s ease-in;
}
.header-fixed__logo a:focus-visible img {
scale: 1.08;
}
@media (any-hover: hover) {
.header-fixed__logo a:hover img {
scale: 1.08;
}
}
.header-fixed__sns {
order: 3;
}
@media (max-width: 1024px) {
.header-fixed__sns {
display: none;
}
}
.g-sns {
display: flex;
align-items: center;
gap: 8px;
flex-direction: column;
list-style: none;
}
.g-sns__item a {
display: block;
padding: 8px;
transition: opacity 0.2s ease-in-out;
}
.g-sns__item a:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.g-sns__item a:hover {
opacity: 0.7;
}
}
@media (max-width: 1024px) {
.header-nav {
display: none;
}
}
.header-nav__main {
position: fixed;
top: 0;
left: calc(var(--header-width) - 1px);
translate: -100%;
background-color: var(--white);
height: 100vh;
padding-top: 80px;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: max-content 1fr;
overflow-y: auto;
}
@media (max-width: 1024px) {
.header-nav__main {
left: 0;
padding-top: 100px;
}
}
.header-nav__main {
border-right: 1px solid var(--border-primary);
z-index: 999;
transition: translate 0.3s linear;
}
@media (max-width: 640px) {
.header-nav__main {
border-right: none;
}
}
.header-nav__main.is_active {
translate: 0%;
}
.g-nav {
width: 266px;
height: 100%;
overflow-y: auto;
padding-bottom: 30px;
background-color: var(--white);
list-style: none;
}
@media (max-width: 1024px) {
.g-nav {
width: 250px;
padding-bottom: 100px;
}
}
.g-nav__item > a {
display: block;
color: var(--theme-color);
background-color: var(--white);
font-size: 18px;
font-weight: 500;
padding: 0.8em 1.9em;
transition: background-color 0.1s ease-in;
}
.g-nav__item > a:focus-visible {
background-color: var(--theme-color);
color: var(--white);
}
@media (any-hover: hover) {
.g-nav__item > a:hover {
background-color: var(--theme-color);
color: var(--white);
}
}
.g-nav__item--sm > a {
font-size: 15px;
font-weight: 400;
padding: 0.6em 2.4em;
}
.g-nav__item--mt {
margin-top: 3.5em;
}
.g-nav-child {
list-style: none;
max-height: 0px;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
.g-nav-child__item > a {
display: block;
color: var(--theme-color);
background-color: var(--beige-light);
font-size: 18px;
font-weight: 500;
padding: 0.8em 1.9em;
transition: background-color 0.1s ease-in;
}
.g-nav-child__item > a:focus-visible {
background-color: var(--theme-color);
color: var(--white);
}
@media (any-hover: hover) {
.g-nav-child__item > a:hover {
background-color: var(--theme-color);
color: var(--white);
}
}
.g-nav-child-opener {
display: grid;
grid-template-columns: 1fr max-content;
justify-content: space-between;
align-items: center;
gap: 1em;
width: 100%;
background-color: var(--white);
text-align: left;
color: var(--theme-color);
font-size: 18px;
font-weight: 500;
padding: 0.8em 1.9em;
transition: background-color 0.1s ease-in;
}
.g-nav-child-opener:focus-visible {
background-color: var(--theme-color);
color: var(--white);
}
.g-nav-child-opener:focus-visible::after {
background-color: var(--white);
}
@media (any-hover: hover) {
.g-nav-child-opener:hover {
background-color: var(--theme-color);
color: var(--white);
}
.g-nav-child-opener:hover::after {
background-color: var(--white);
}
}
.g-nav-child-opener.is_active {
background-color: var(--theme-color);
color: var(--white);
}
.g-nav-child-opener.is_active::after {
background-color: var(--white);
rotate: -90deg;
}
.g-nav-child-opener::after {
content: "";
display: inline-block;
mask: var(--icon-chevron-right) no-repeat center/contain;
aspect-ratio: 2/3;
inline-size: 0.52em;
background-color: var(--theme-color);
rotate: 90deg;
}
.header-sp-nav {
display: none;
}
@media (max-width: 1024px) {
.header-sp-nav {
display: block;
}
}
.header-sp-nav__main {
position: fixed;
top: 0;
left: calc(var(--header-width) - 1px);
translate: -100%;
background-color: var(--white);
height: 100vh;
padding-top: 80px;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: max-content 1fr;
overflow-y: auto;
}
@media (max-width: 1024px) {
.header-sp-nav__main {
left: 0;
padding-top: 100px;
}
}
.header-sp-nav__main {
border-right: 1px solid var(--border-primary);
z-index: 999;
transition: translate 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 640px) {
.header-sp-nav__main {
border-right: none;
}
}
.header-sp-nav__main.is_active {
translate: 0%;
}
.sp-nav-title {
font-size: 18px;
font-weight: 500;
color: var(--theme-color);
border-left: 3px solid var(--theme-color);
line-height: 1.1;
padding-left: 0.5em;
padding-bottom: 0.2em;
margin-bottom: 1.5em;
margin-left: 1.5em;
}
.sp-nav {
width: 250px;
height: 100%;
overflow-y: auto;
padding-bottom: 30px;
background-color: var(--white);
list-style: none;
}
@media (max-width: 1024px) {
.sp-nav {
padding-bottom: 100px;
}
}
.sp-nav__item > a {
display: block;
color: var(--theme-color);
background-color: var(--white);
font-size: 15px;
font-weight: 500;
padding: 0.8em 1.9em;
transition: background-color 0.1s ease-in;
}
.sp-nav__item > a:focus-visible {
background-color: var(--theme-color);
color: var(--white);
}
@media (any-hover: hover) {
.sp-nav__item > a:hover {
background-color: var(--theme-color);
color: var(--white);
}
}
.sp-nav__item--sm > a {
font-size: 12px;
font-weight: 400;
padding: 0.6em 2.4em;
}
.sp-nav__item--mt {
margin-top: 3.5em;
}
.sp-nav-child {
list-style: none;
max-height: 0px;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
.sp-nav-child__item > a {
display: block;
color: var(--theme-color);
background-color: var(--beige-light);
font-size: 15px;
font-weight: 500;
padding: 0.8em 1.9em;
transition: background-color 0.1s ease-in;
}
.sp-nav-child__item > a:focus-visible {
background-color: var(--theme-color);
color: var(--white);
}
@media (any-hover: hover) {
.sp-nav-child__item > a:hover {
background-color: var(--theme-color);
color: var(--white);
}
}
.sp-nav-child-opener {
display: grid;
grid-template-columns: 1fr max-content;
justify-content: space-between;
align-items: center;
gap: 1em;
width: 100%;
background-color: var(--white);
text-align: left;
color: var(--theme-color);
font-size: 15px;
font-weight: 500;
padding: 0.8em 1.9em;
transition: background-color 0.1s ease-in;
}
.sp-nav-child-opener:focus-visible {
background-color: var(--theme-color);
color: var(--white);
}
.sp-nav-child-opener:focus-visible::after {
background-color: var(--white);
}
@media (any-hover: hover) {
.sp-nav-child-opener:hover {
background-color: var(--theme-color);
color: var(--white);
}
.sp-nav-child-opener:hover::after {
background-color: var(--white);
}
}
.sp-nav-child-opener.is_active {
background-color: var(--theme-color);
color: var(--white);
}
.sp-nav-child-opener.is_active::after {
background-color: var(--white);
rotate: -90deg;
}
.sp-nav-child-opener::after {
content: "";
display: inline-block;
mask: var(--icon-chevron-right) no-repeat center/contain;
aspect-ratio: 2/3;
inline-size: 0.52em;
background-color: var(--theme-color);
rotate: 90deg;
}
.header-nav-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
z-index: 900;
display: none;
}
.header-nav-backdrop.is_active {
display: block;
}
/* ---------------------------
hamb
----------------------------- */
.hamburger {
order: 1;
display: block;
width: 100px;
height: 100px;
min-width: 100px;
min-height: 100px;
padding: 29px 27px;
background-color: var(--theme-color);
cursor: pointer;
}
@media (max-width: 1024px) {
.hamburger {
display: none;
width: 50px;
height: 50px;
min-width: 50px;
min-height: 50px;
padding: 17px 13px;
}
}
.hamburger.is_active .hamburger__inner span:nth-of-type(1) {
transform: rotate(28deg);
translate: 2px 0;
}
@media (max-width: 1024px) {
.hamburger.is_active .hamburger__inner span:nth-of-type(1) {
transform: rotate(39deg);
}
}
.hamburger.is_active .hamburger__inner span:nth-of-type(2) {
opacity: 0;
}
.hamburger.is_active .hamburger__inner span:nth-of-type(3) {
transform: rotate(-28deg);
translate: 2px 0;
}
@media (max-width: 1024px) {
.hamburger.is_active .hamburger__inner span:nth-of-type(3) {
transform: rotate(-39deg);
}
}
.hamburger__inner {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
flex-direction: column;
transition: 0.3s ease-in-out;
}
.hamburger__inner span {
display: block;
width: 100%;
height: 1px;
opacity: 1;
background-color: var(--white);
transform-origin: left;
transition: 0.3s ease-in-out;
}
.hamburger__inner p {
color: var(--white);
text-align: center;
font-size: 11px;
letter-spacing: 0;
white-space: nowrap;
line-height: 1;
}
@media (max-width: 1024px) {
.hamburger__inner p {
display: none;
}
}
.sp-hamburger {
display: none;
order: 1;
width: 100px;
height: 100px;
min-width: 100px;
min-height: 100px;
padding: 29px 27px;
background-color: var(--theme-color);
cursor: pointer;
}
@media (max-width: 1024px) {
.sp-hamburger {
display: block;
width: 50px;
height: 50px;
min-width: 50px;
min-height: 50px;
padding: 17px 13px;
}
}
.sp-hamburger.is_active .sp-hamburger__inner span:nth-of-type(1) {
transform: rotate(28deg);
translate: 2px 0;
}
@media (max-width: 1024px) {
.sp-hamburger.is_active .sp-hamburger__inner span:nth-of-type(1) {
transform: rotate(39deg);
}
}
.sp-hamburger.is_active .sp-hamburger__inner span:nth-of-type(2) {
opacity: 0;
}
.sp-hamburger.is_active .sp-hamburger__inner span:nth-of-type(3) {
transform: rotate(-28deg);
translate: 2px 0;
}
@media (max-width: 1024px) {
.sp-hamburger.is_active .sp-hamburger__inner span:nth-of-type(3) {
transform: rotate(-39deg);
}
}
.sp-hamburger__inner {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
flex-direction: column;
transition: 0.3s ease-in-out;
}
.sp-hamburger__inner span {
display: block;
width: 100%;
height: 1px;
opacity: 1;
background-color: var(--white);
transform-origin: left;
transition: 0.3s ease-in-out;
}
.sp-hamburger__inner p {
color: var(--white);
text-align: center;
font-size: 11px;
letter-spacing: 0;
white-space: nowrap;
line-height: 1;
}
@media (max-width: 1024px) {
.sp-hamburger__inner p {
display: none;
}
}
/* ---------------------------
right-menu
----------------------------- */
.right-menu {
display: block;
position: fixed;
top: 100px;
right: 0;
z-index: 900;
}
@media (max-width: 1024px) {
.right-menu {
display: none;
}
}
.right-menu a {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 0.6em;
background-color: var(--honey);
color: var(--white);
padding: 22px 11px;
transition: opacity 0.2s ease-in-out;
}
.right-menu a:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.right-menu a:hover {
opacity: 0.7;
}
}
.right-menu span {
display: block;
font-size: clamp(16px, 15.22px + 0.207vw, 18px);
font-weight: 700;
white-space: nowrap;
writing-mode: vertical-rl;
}
/* ---------------------------
sp-bottom-menu
----------------------------- */
.bottom-menu {
display: none;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: 900;
border-top: 1px solid var(--black);
}
@media (max-width: 1024px) {
.bottom-menu {
display: block;
}
}
.bottom-menu-list {
display: grid;
grid-template-columns: 1fr 50px;
gap: 1px;
background-color: var(--black);
list-style: none;
}
.bottom-menu-list__item a {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6em;
height: 50px;
background-color: var(--white);
}
.bottom-menu-list__item span {
font-size: 12px;
white-space: nowrap;
}
@media (max-width: 640px) {
.bottom-menu-list__item span {
font-size: 10px;
}
}
/* ---------------------------
footer
----------------------------- */
.footer {
padding-right: 50px;
padding-left: calc(50px + var(--header-width));
}
@media (max-width: 1024px) {
.footer {
padding-right: 0;
padding-left: 0;
}
}
.footer-wrapper {
background-image: url(../img/common/footer_bg.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
position: relative;
}
@media (max-width: 1024px) {
.footer-wrapper {
background-image: none;
background-color: var(--theme-color);
}
}
.footer-wrapper::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: var(--theme-color);
opacity: 0.9;
}
@media (max-width: 1024px) {
.footer-wrapper::before {
display: none;
}
}
.footer-layout {
display: flex;
justify-content: space-between;
align-items: center;
gap: 28px 50px;
padding: 100px 0;
position: relative;
z-index: 10;
}
@media (max-width: 1024px) {
.footer-layout {
flex-direction: column;
}
}
@media (max-width: 640px) {
.footer-layout {
padding: 40px 0;
}
}
.footer-copyright {
position: relative;
z-index: 10;
border-top: 1px solid var(--border-primary);
}
.footer-copyright small {
display: block;
text-align: center;
color: var(--white);
font-size: clamp(10px, 9.61px + 0.104vw, 11px);
padding: 1.3em 0;
letter-spacing: 0;
}
.footer-head__logo img {
margin-inline: auto;
}
.footer-head__sns {
display: none;
align-items: center;
justify-content: center;
gap: 4px;
margin-top: 50px;
list-style: none;
}
@media (max-width: 1024px) {
.footer-head__sns {
display: flex;
margin-top: 32px;
}
}
.footer-head__sns a {
display: block;
padding: 8px;
transition: opacity 0.2s ease-in-out;
}
.footer-head__sns a:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.footer-head__sns a:hover {
opacity: 0.7;
}
}
.footer-body {
max-width: 960px;
}
.footer-body__nav {
margin-bottom: 100px;
}
@media (max-width: 1024px) {
.footer-body__nav {
display: none;
}
}
.footer-body__nav ul {
list-style: none;
}
.footer-body__nav > ul {
display: flex;
justify-content: space-between;
gap: 20px;
}
.footer-body__nav > ul > li > ul > li + li {
margin-top: 1em;
}
.footer-body__nav .child {
padding-left: 1em;
margin-top: 1em;
}
.footer-body__nav a {
display: block;
color: var(--white);
font-size: clamp(12px, 10.45px + 0.415vw, 16px);
transition: opacity 0.2s ease-in-out;
}
.footer-body__nav a:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.footer-body__nav a:hover {
opacity: 0.7;
}
}
.footer-body__nav .child li + li {
margin-top: 1em;
}
.footer-body__links dt {
color: var(--white);
font-weight: 500;
font-size: clamp(16px, 14.06px + 0.518vw, 21px);
margin-bottom: 1em;
}
@media (max-width: 1024px) {
.footer-body__links dt {
text-align: center;
}
}
.footer-body__links ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.4em;
font-size: clamp(12px, 10.45px + 0.415vw, 16px);
list-style: none;
}
@media (max-width: 1024px) {
.footer-body__links ul {
grid-template-columns: 1fr;
gap: 1em;
}
}
.footer-body__links a {
display: block;
color: var(--white);
font-size: clamp(12px, 10.45px + 0.415vw, 16px);
transition: opacity 0.2s ease-in-out;
}
.footer-body__links a:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.footer-body__links a:hover {
opacity: 0.7;
}
}
@media (max-width: 1024px) {
.footer-body__links a {
text-align: center;
}
}
.pagetop {
position: fixed;
right: 4px;
bottom: 20px;
z-index: 888;
width: 40px;
height: 40px;
display: none;
}
@media (max-width: 1024px) {
.pagetop {
display: block;
}
}
/* ---------------------------
post
----------------------------- */
.post *,
.wp-editor * {
font-size: clamp(14px, 13.61px + 0.104vw, 15px);
line-height: var(--line-height-normal);
}
.post > *,
.wp-editor > * {
margin-top: 1em;
margin-bottom: 1em;
max-width: 100%;
}
.post > *:first-child,
.wp-editor > *:first-child {
margin-top: 0 !important;
}
.post > *:last-child,
.wp-editor > *:last-child {
margin-bottom: 0 !important;
}
.post h1:not([class]), .post h1[class^=mt]:not([class*=" "]), .post h1[class^=mb]:not([class*=" "]),
.wp-editor h1:not([class]),
.wp-editor h1[class^=mt]:not([class*=" "]),
.wp-editor h1[class^=mb]:not([class*=" "]) {
font-size: clamp(28px, 26.45px + 0.415vw, 32px);
font-weight: bold;
margin-top: 2em;
}
.post h2:not([class]), .post h2[class^=mt]:not([class*=" "]), .post h2[class^=mb]:not([class*=" "]),
.wp-editor h2:not([class]),
.wp-editor h2[class^=mt]:not([class*=" "]),
.wp-editor h2[class^=mb]:not([class*=" "]) {
font-size: clamp(22px, 19.67px + 0.622vw, 28px);
font-weight: 500;
margin-top: 2.8em;
color: var(--theme-color);
display: grid;
align-items: center;
grid-template-columns: max-content 1fr;
gap: 0.9em;
}
.post h2:not([class])::after, .post h2[class^=mt]:not([class*=" "])::after, .post h2[class^=mb]:not([class*=" "])::after,
.wp-editor h2:not([class])::after,
.wp-editor h2[class^=mt]:not([class*=" "])::after,
.wp-editor h2[class^=mb]:not([class*=" "])::after {
content: "";
width: 100%;
height: 1px;
background-color: var(--theme-color);
}
.post h3:not([class]), .post h3[class^=mt]:not([class*=" "]), .post h3[class^=mb]:not([class*=" "]),
.wp-editor h3:not([class]),
.wp-editor h3[class^=mt]:not([class*=" "]),
.wp-editor h3[class^=mb]:not([class*=" "]) {
margin-top: 1.8em;
font-size: clamp(18px, 16.83px + 0.311vw, 21px);
font-weight: 500;
color: var(--theme-color);
}
.post h4:not([class]), .post h4[class^=mt]:not([class*=" "]), .post h4[class^=mb]:not([class*=" "]),
.wp-editor h4:not([class]),
.wp-editor h4[class^=mt]:not([class*=" "]),
.wp-editor h4[class^=mb]:not([class*=" "]) {
width: fit-content;
min-width: 300px;
padding: 0.4em 2em;
font-size: clamp(15px, 14.61px + 0.104vw, 16px);
font-weight: 500;
background-color: var(--theme-color);
color: var(--white);
text-align: center;
}
@media (max-width: 640px) {
.post h4:not([class]), .post h4[class^=mt]:not([class*=" "]), .post h4[class^=mb]:not([class*=" "]),
.wp-editor h4:not([class]),
.wp-editor h4[class^=mt]:not([class*=" "]),
.wp-editor h4[class^=mb]:not([class*=" "]) {
min-width: inherit;
}
}
.post h5:not([class]), .post h5[class^=mt]:not([class*=" "]), .post h5[class^=mb]:not([class*=" "]),
.wp-editor h5:not([class]),
.wp-editor h5[class^=mt]:not([class*=" "]),
.wp-editor h5[class^=mb]:not([class*=" "]) {
font-size: clamp(16px, 15.22px + 0.207vw, 18px);
font-weight: 700;
}
.post h5:has(+ p),
.wp-editor h5:has(+ p) {
margin-bottom: 0;
}
.post h5 + p,
.wp-editor h5 + p {
margin-top: 0.6em;
}
.post h6:not([class]), .post h6[class^=mt]:not([class*=" "]), .post h6[class^=mb]:not([class*=" "]),
.wp-editor h6:not([class]),
.wp-editor h6[class^=mt]:not([class*=" "]),
.wp-editor h6[class^=mb]:not([class*=" "]) {
font-size: 14px;
font-weight: 700;
}
.post a:not([class]),
.wp-editor a:not([class]) {
text-decoration: underline;
transition: text-decoration 0.1s ease-in-out;
color: var(--theme-color);
}
.post a:not([class]):focus-visible,
.wp-editor a:not([class]):focus-visible {
text-decoration: none;
}
@media (any-hover: hover) {
.post a:not([class]):hover,
.wp-editor a:not([class]):hover {
text-decoration: none;
}
}
.post .headline-mincho,
.wp-editor .headline-mincho {
text-align: center;
font-family: var(--family-secondary);
font-weight: 500;
font-size: clamp(22px, 16.56px + 1.451vw, 36px);
color: var(--theme-color);
}
.post .headline-mincho-lg,
.wp-editor .headline-mincho-lg {
font-family: var(--family-secondary);
font-weight: 500;
font-size: clamp(22px, 16.56px + 1.451vw, 36px);
}
.post .headline-mincho-md,
.wp-editor .headline-mincho-md {
font-family: var(--family-secondary);
font-weight: 500;
font-size: clamp(18px, 15.67px + 0.622vw, 24px);
}
.post .headline-mincho-en,
.wp-editor .headline-mincho-en {
font-family: var(--family-secondary);
font-weight: 500;
font-size: clamp(28px, 20.23px + 2.073vw, 48px);
line-height: var(--line-height-normal);
}
.post .headline-badge,
.wp-editor .headline-badge {
width: fit-content;
font-weight: 500;
font-size: clamp(14px, 13.22px + 0.207vw, 16px);
background-color: var(--theme-color);
color: var(--white);
text-align: center;
padding: 0.4em 2em;
min-width: 140px;
margin-top: 1.2em;
}
.post .headline-badge-honey,
.wp-editor .headline-badge-honey {
width: fit-content;
font-weight: 500;
font-size: clamp(14px, 13.22px + 0.207vw, 16px);
background-color: var(--honey);
color: var(--white);
text-align: center;
padding: 0.4em 2em;
min-width: 140px;
margin-top: 1.2em;
}
.post .headline-calendar,
.wp-editor .headline-calendar {
display: flex;
gap: 0.6em;
justify-content: center;
align-items: center;
font-size: clamp(22px, 18.11px + 1.036vw, 32px);
font-weight: 500;
font-family: var(--family-secondary);
color: var(--theme-color);
}
.post .headline-calendar::before,
.wp-editor .headline-calendar::before {
content: "";
display: inline-block;
mask: var(--icon-calendar) no-repeat center/contain;
aspect-ratio: 48/52;
inline-size: 1.5em;
background-color: var(--theme-color);
translate: 0 0.05em;
}
.post .headline-bg,
.wp-editor .headline-bg {
background-color: var(--theme-color);
color: var(--white);
font-family: var(--family-secondary);
font-weight: 500;
font-size: clamp(20px, 16.89px + 0.829vw, 28px);
padding: 0.2em 0.6em 0.3em;
}
.post .headline-separator,
.wp-editor .headline-separator {
font-family: var(--family-secondary);
font-weight: 500;
font-size: clamp(16px, 14.06px + 0.518vw, 21px);
border-top: 1px solid var(--border-primary);
border-bottom: 1px solid var(--border-primary);
padding-top: 1em;
padding-bottom: 1em;
text-align: center;
}
.post .headline-voice,
.wp-editor .headline-voice {
font-family: var(--family-secondary);
color: var(--theme-color);
font-weight: 500;
font-size: clamp(16px, 14.06px + 0.518vw, 21px);
}
.post .headline-department,
.wp-editor .headline-department {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4em;
font-weight: 500;
font-size: clamp(32px, 25.78px + 1.658vw, 48px);
color: var(--theme-color);
}
.post .headline-department span,
.wp-editor .headline-department span {
display: block;
width: fit-content;
background-color: var(--theme-color);
color: var(--white);
padding: 0.2em 1em;
font-size: clamp(18px, 15.67px + 0.622vw, 24px);
font-weight: 500;
}
.post .headline-bl,
.wp-editor .headline-bl {
border-left: 5px solid var(--theme-color);
padding-left: 0.5em;
font-size: clamp(16px, 15.22px + 0.207vw, 18px);
font-weight: 500;
line-height: var(--line-height-snug);
}
.post .pl1em,
.wp-editor .pl1em {
padding-left: 1em !important;
}
.post .mb0,
.wp-editor .mb0 {
margin-bottom: 0 !important;
}
.post .mb0p5em,
.wp-editor .mb0p5em {
margin-bottom: 0.5em !important;
}
.post .mb1em,
.wp-editor .mb1em {
margin-bottom: 1em !important;
}
.post .mb1p5em,
.wp-editor .mb1p5em {
margin-bottom: 1.5em !important;
}
.post .mb1em,
.wp-editor .mb1em {
margin-bottom: 1em !important;
}
.post .mb2em,
.wp-editor .mb2em {
margin-bottom: 2em !important;
}
.post .mb2p5em,
.wp-editor .mb2p5em {
margin-bottom: 2.5em !important;
}
.post .mb3em,
.wp-editor .mb3em {
margin-bottom: 3em !important;
}
.post .mb4em,
.wp-editor .mb4em {
margin-bottom: 4em !important;
}
.post .mt0,
.wp-editor .mt0 {
margin-top: 0 !important;
}
.post .mt0p5,
.wp-editor .mt0p5 {
margin-top: 0.5em !important;
}
.post .mt1em,
.wp-editor .mt1em {
margin-top: 1em !important;
}
.post .mt1p5em,
.wp-editor .mt1p5em {
margin-top: 1.5em !important;
}
.post .mt2em,
.wp-editor .mt2em {
margin-top: 2em !important;
}
.post .mt2p5em,
.wp-editor .mt2p5em {
margin-top: 2.5em !important;
}
.post .mt3em,
.wp-editor .mt3em {
margin-top: 3em !important;
}
.post .mt4em,
.wp-editor .mt4em {
margin-top: 4em !important;
}
.post ul:not([class]),
.wp-editor ul:not([class]) {
list-style: disc;
padding-left: 1.2em;
}
.post ul:not([class]) li + li,
.wp-editor ul:not([class]) li + li {
margin-top: 0.2em;
}
.post .list-disc,
.wp-editor .list-disc {
list-style: none;
padding-left: 0;
}
.post .list-disc li,
.wp-editor .list-disc li {
padding-left: 1.5em;
position: relative;
}
.post .list-disc li::before,
.wp-editor .list-disc li::before {
content: "●";
font-size: 1em;
display: inline-block;
color: var(--theme-color);
position: absolute;
top: 0em;
left: 0;
}
.post .list-disc li + li,
.wp-editor .list-disc li + li {
margin-top: 0.2em;
}
.post .list-pdf,
.wp-editor .list-pdf {
list-style: none;
padding-left: 0;
}
.post .list-pdf li,
.wp-editor .list-pdf li {
border-top: 1px solid var(--border-primary);
}
.post .list-pdf li:last-child,
.wp-editor .list-pdf li:last-child {
border-bottom: 1px solid var(--border-primary);
}
.post .list-pdf a,
.wp-editor .list-pdf a {
display: block;
width: fit-content;
padding: 1.3em 1em;
padding-left: 3.2em;
font-size: clamp(15px, 14.61px + 0.104vw, 16px);
font-weight: 500;
color: var(--font-primary);
text-decoration: none;
background-image: url(../img/common/pdf.png);
background-position: left 1em center;
background-repeat: no-repeat;
background-size: 1.5em;
transition: opacity 0.2s ease-in-out;
}
.post .list-pdf a:focus-visible,
.wp-editor .list-pdf a:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.post .list-pdf a:hover,
.wp-editor .list-pdf a:hover {
opacity: 0.7;
}
}
.post .list-traffic,
.wp-editor .list-traffic {
list-style: none;
}
.post .list-traffic li + li,
.wp-editor .list-traffic li + li {
margin-top: 1.2em;
}
.post .list-traffic li,
.wp-editor .list-traffic li {
display: grid;
grid-template-columns: max-content 1fr;
align-items: center;
gap: 1em;
}
.post .list-traffic li::before,
.wp-editor .list-traffic li::before {
content: "";
display: inline-block;
background-color: var(--theme-color);
inline-size: 1.4em;
}
.post .list-traffic li:nth-child(1)::before,
.wp-editor .list-traffic li:nth-child(1)::before {
mask: var(--icon-train) no-repeat center/contain;
aspect-ratio: 21/30;
}
.post .list-traffic li:nth-child(2)::before,
.wp-editor .list-traffic li:nth-child(2)::before {
mask: var(--icon-bus) no-repeat center/contain;
aspect-ratio: 21/24;
}
.post .list-traffic li:nth-child(3)::before,
.wp-editor .list-traffic li:nth-child(3)::before {
mask: var(--icon-car) no-repeat center/contain;
aspect-ratio: 22/17;
}
.post .list-lesson,
.wp-editor .list-lesson {
list-style: none;
}
.post .list-lesson li,
.wp-editor .list-lesson li {
font-family: var(--family-secondary);
font-weight: 500;
font-size: clamp(18px, 15.67px + 0.622vw, 24px);
padding-bottom: 0.9em;
border-bottom: 1px solid var(--border-primary);
}
.post .list-lesson li + li,
.wp-editor .list-lesson li + li {
margin-top: 0.9em;
}
.post .list-chevron,
.wp-editor .list-chevron {
list-style: none;
}
.post .list-chevron li,
.wp-editor .list-chevron li {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.7em;
}
.post .list-chevron li::before,
.wp-editor .list-chevron li::before {
content: "";
display: inline-block;
mask: var(--icon-chevron-right-circle) no-repeat center/contain;
aspect-ratio: 1/1;
background-color: var(--theme-color);
inline-size: 1.2em;
translate: 0 0.3em;
}
.post .list-chevron li + li,
.wp-editor .list-chevron li + li {
margin-top: 0.6em;
}
.post .list-links,
.wp-editor .list-links {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
list-style: none;
}
@media (max-width: 640px) {
.post .list-links,
.wp-editor .list-links {
grid-template-columns: 1fr;
}
}
.post .list-links a,
.wp-editor .list-links a {
display: flex;
align-items: center;
justify-content: center;
position: relative;
height: clamp(80px, 64.46px + 4.145vw, 120px);
background-color: var(--theme-color);
transition: opacity 0.2s ease-in-out;
}
.post .list-links a:focus-visible,
.wp-editor .list-links a:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.post .list-links a:hover,
.wp-editor .list-links a:hover {
opacity: 0.7;
}
}
.post .list-links a::after,
.wp-editor .list-links a::after {
content: "";
display: block;
position: absolute;
bottom: 10px;
right: 10px;
width: 15px;
aspect-ratio: 1/1;
clip-path: polygon(0 100%, 100% 0, 100% 100%);
background-color: var(--white);
}
.post .list-links img,
.wp-editor .list-links img {
height: clamp(20px, 16.11px + 1.036vw, 30px);
width: auto;
}
.post .list-anchor,
.wp-editor .list-anchor {
display: grid;
grid-template-columns: repeat(4, 1fr);
list-style: none;
}
@media (max-width: 768px) {
.post .list-anchor,
.wp-editor .list-anchor {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 640px) {
.post .list-anchor,
.wp-editor .list-anchor {
grid-template-columns: repeat(2, 1fr);
}
}
.post .list-anchor li,
.wp-editor .list-anchor li {
padding: 0.8em 0.5em;
font-size: clamp(11px, 9.83px + 0.311vw, 14px);
border: 1px solid var(--border-primary);
text-align: center;
}
.post .list-anchor a,
.wp-editor .list-anchor a {
font-size: clamp(11px, 9.83px + 0.311vw, 14px);
color: var(--theme-color);
text-decoration: underline;
transition: text-decoration 0.1s ease-in-out;
}
.post .list-anchor a:focus-visible,
.wp-editor .list-anchor a:focus-visible {
text-decoration: none;
}
@media (any-hover: hover) {
.post .list-anchor a:hover,
.wp-editor .list-anchor a:hover {
text-decoration: none;
}
}
.post .list-pagetop-links,
.wp-editor .list-pagetop-links {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: clamp(56px, 38.9px + 4.56vw, 100px);
}
@media (max-width: 768px) {
.post .list-pagetop-links,
.wp-editor .list-pagetop-links {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.post .list-pagetop-links,
.wp-editor .list-pagetop-links {
grid-template-columns: 1fr;
gap: 10px;
}
}
.post .list-pagetop-links a,
.wp-editor .list-pagetop-links a {
display: grid;
grid-template-columns: 1fr max-content;
align-items: center;
color: var(--white);
text-align: center;
font-size: clamp(15px, 13.83px + 0.311vw, 18px);
height: clamp(64px, 50.01px + 3.731vw, 100px);
padding: 0.9em;
background-color: var(--theme-color);
text-decoration: none !important;
transition: opacity 0.2s ease-in-out;
}
.post .list-pagetop-links a:focus-visible,
.wp-editor .list-pagetop-links a:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.post .list-pagetop-links a:hover,
.wp-editor .list-pagetop-links a:hover {
opacity: 0.7;
}
}
.post .list-pagetop-links a::after,
.wp-editor .list-pagetop-links a::after {
content: "";
display: inline-block;
mask: var(--icon-chevron-right) no-repeat center/contain;
aspect-ratio: 2/3;
inline-size: 0.5em;
background-color: var(--white);
}
.post ol:not([class]),
.wp-editor ol:not([class]) {
list-style: decimal;
padding-left: 1.5em;
}
.post ol:not([class]) li + li,
.wp-editor ol:not([class]) li + li {
margin-top: 0.2em;
}
.post .def-contact,
.wp-editor .def-contact {
display: grid;
justify-content: center;
align-items: center;
grid-template-columns: repeat(2, 1fr);
padding: 20px;
border: 1px solid var(--theme-color);
}
@media (max-width: 768px) {
.post .def-contact,
.wp-editor .def-contact {
grid-template-columns: 1fr;
}
}
.post .def-contact dt,
.wp-editor .def-contact dt {
text-align: center;
font-weight: 500;
padding: 1em;
padding-right: 40px;
padding-bottom: 1.4em;
margin-left: auto;
width: fit-content;
}
@media (max-width: 768px) {
.post .def-contact dt,
.wp-editor .def-contact dt {
margin-right: auto;
padding: 0;
padding-bottom: 20px;
}
}
.post .def-contact dd,
.wp-editor .def-contact dd {
padding: 1em;
padding-left: 40px;
border-left: 1px solid var(--theme-color);
line-height: var(--line-height-tight);
}
@media (max-width: 768px) {
.post .def-contact dd,
.wp-editor .def-contact dd {
padding-left: 0;
border-left: none;
padding: 0;
border-top: 1px solid var(--theme-color);
padding-top: 20px;
text-align: center;
}
}
.post .def-contact dd strong,
.wp-editor .def-contact dd strong {
font-size: clamp(20px, 18.45px + 0.415vw, 24px);
font-weight: 700;
}
.post .def-result dt,
.wp-editor .def-result dt {
font-size: clamp(18px, 15.67px + 0.622vw, 24px);
font-weight: 500;
font-family: var(--family-secondary);
margin-bottom: 1em;
padding-top: 30px;
border-top: 1px solid var(--theme-color);
}
.post .def-result dd,
.wp-editor .def-result dd {
padding-bottom: 36px;
}
.post .def-result dd:last-child,
.wp-editor .def-result dd:last-child {
border-bottom: 1px solid var(--theme-color);
}
.post .def-number,
.wp-editor .def-number {
display: grid;
grid-template-columns: repeat(2, 1fr);
width: fit-content;
margin-inline: auto;
border: 1px solid var(--border-secondary);
}
.post .def-number dt, .post .def-number dd,
.wp-editor .def-number dt,
.wp-editor .def-number dd {
width: fit-content;
min-width: 100px;
font-weight: 500;
padding: 0.25em 2em;
text-align: center;
font-size: clamp(16px, 15.22px + 0.207vw, 18px);
place-content: center;
}
.post .def-number dt,
.wp-editor .def-number dt {
background-color: #4d4d4d;
color: var(--white);
}
.post .aligncenter,
.wp-editor .aligncenter {
text-align: center;
margin-inline: auto;
}
.post .alignleft,
.wp-editor .alignleft {
text-align: left;
}
.post .alignright,
.wp-editor .alignright {
text-align: right;
}
.post strong, .post strong > *,
.wp-editor strong,
.wp-editor strong > * {
font-weight: 700;
}
.post em, .post em > *,
.wp-editor em,
.wp-editor em > * {
font-style: italic;
}
.post blockquote,
.wp-editor blockquote {
padding: 0.5em;
background-color: #f2f2f2;
}
.post img,
.wp-editor img {
display: block;
}
.post img.aligncenter,
.wp-editor img.aligncenter {
display: block;
margin-inline: auto;
}
.post img.alignleft,
.wp-editor img.alignleft {
display: block;
margin-right: auto;
margin-left: 0;
}
.post img.alignright,
.wp-editor img.alignright {
display: block;
margin-left: auto;
margin-right: 0;
}
.post figure figcaption,
.wp-editor figure figcaption {
text-align: center;
margin-top: 0.8em;
}
.post figure img,
.wp-editor figure img {
margin-top: 0;
margin-bottom: 0;
}
.post .embed-map,
.wp-editor .embed-map {
border: 1px solid var(--border-primary);
}
.post .embed-map iframe,
.wp-editor .embed-map iframe {
width: 100%;
height: 100%;
display: block;
aspect-ratio: 840/500;
border: none;
}
.post .embed-youtube,
.wp-editor .embed-youtube {
padding-left: 20px;
padding-right: 20px;
}
@media (max-width: 640px) {
.post .embed-youtube,
.wp-editor .embed-youtube {
padding-right: 0;
padding-left: 0;
}
}
.post .embed-youtube iframe,
.wp-editor .embed-youtube iframe {
width: 100%;
height: 100%;
display: block;
aspect-ratio: 840/450;
border: none;
}
.post table,
.wp-editor table {
width: 100%;
border-collapse: collapse;
}
.post table th, .post table td,
.wp-editor table th,
.wp-editor table td {
border: 1px solid var(--border-primary);
padding: 0.7em 1em;
text-align: left;
font-weight: 400;
}
.post table th,
.wp-editor table th {
background-color: var(--beige-light);
width: fit-content;
min-width: 88px;
}
.post table td,
.wp-editor table td {
background-color: var(--white);
}
.post .table-nowrap th,
.wp-editor .table-nowrap th {
width: 0px;
white-space: nowrap;
}
@media (max-width: 640px) {
.post .table-nowrap th,
.wp-editor .table-nowrap th {
white-space: inherit;
width: auto;
}
}
.post .table-schedule th,
.wp-editor .table-schedule th {
width: 0px;
white-space: nowrap;
text-align: center;
}
@media (max-width: 640px) {
.post .table-schedule th,
.wp-editor .table-schedule th {
white-space: inherit;
width: auto;
}
}
.post .table-sitemap th, .post .table-sitemap td,
.wp-editor .table-sitemap th,
.wp-editor .table-sitemap td {
border: 1px solid var(--border-primary);
padding: 0.7em 1em;
text-align: left;
font-weight: 400;
}
.post .table-sitemap a,
.wp-editor .table-sitemap a {
display: grid;
grid-template-columns: 1fr max-content;
align-items: center;
gap: 0.6em;
color: var(--theme-color);
width: fit-content;
text-decoration: none;
transition: text-decoration 0.1s ease-in-out;
}
.post .table-sitemap a:focus-visible,
.wp-editor .table-sitemap a:focus-visible {
text-decoration: underline;
}
@media (any-hover: hover) {
.post .table-sitemap a:hover,
.wp-editor .table-sitemap a:hover {
text-decoration: underline;
}
}
.post .table-sitemap a::after,
.wp-editor .table-sitemap a::after {
content: "";
display: inline-block;
mask: var(--icon-chevron-right) no-repeat center/contain;
aspect-ratio: 2/3;
inline-size: 0.4em;
background-color: var(--theme-color);
translate: 0 0.05em;
}
.post .btn,
.wp-editor .btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5em;
width: fit-content;
padding: 0.7em 2.7em 0.9em;
background-color: var(--theme-color);
color: var(--white);
font-size: clamp(13px, 11.83px + 0.311vw, 16px);
text-decoration: none;
transition: opacity 0.2s ease-in-out;
}
.post .btn:focus-visible,
.wp-editor .btn:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.post .btn:hover,
.wp-editor .btn:hover {
opacity: 0.7;
}
}
.post .btn::after,
.wp-editor .btn::after {
content: "";
display: inline-block;
mask: var(--icon-chevron-right) no-repeat center/contain;
aspect-ratio: 2/3;
inline-size: 0.45em;
background-color: var(--white);
translate: 0 0.05em;
}
.post .btn-pdf,
.wp-editor .btn-pdf {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5em;
width: fit-content;
border: 1px solid var(--border-secondary);
padding: 0.7em 2.7em 0.9em;
background-color: var(--white);
color: var(--font-primary);
font-size: clamp(13px, 11.83px + 0.311vw, 16px);
text-decoration: none;
transition: opacity 0.2s ease-in-out;
}
.post .btn-pdf:focus-visible,
.wp-editor .btn-pdf:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.post .btn-pdf:hover,
.wp-editor .btn-pdf:hover {
opacity: 0.7;
}
}
@media (max-width: 640px) {
.post .btn-pdf,
.wp-editor .btn-pdf {
padding-left: 1em;
padding-right: 1em;
}
}
.post .btn-pdf::before,
.wp-editor .btn-pdf::before {
content: "";
width: 1.5em;
display: inline-block;
background-image: url(../img/common/pdf.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
aspect-ratio: 24/29;
}
.post .link,
.wp-editor .link {
display: flex;
align-items: center;
gap: 0.5em;
color: var(--theme-color);
font-weight: 500;
width: fit-content;
text-decoration: none;
transition: opacity 0.2s ease-in-out;
}
.post .link:focus-visible,
.wp-editor .link:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.post .link:hover,
.wp-editor .link:hover {
opacity: 0.7;
}
}
.post .link::before,
.wp-editor .link::before {
content: "";
display: inline-block;
mask: var(--icon-chevron-right-circle) no-repeat center/contain;
aspect-ratio: 1/1;
inline-size: 1em;
background-color: var(--theme-color);
translate: 0 0.05em;
}
.post .link-arrow,
.wp-editor .link-arrow {
display: flex;
align-items: center;
gap: 0.6em;
width: fit-content;
font-size: clamp(14px, 13.22px + 0.207vw, 16px);
transition: opacity 0.2s ease-in-out;
}
.post .link-arrow:focus-visible,
.wp-editor .link-arrow:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.post .link-arrow:hover,
.wp-editor .link-arrow:hover {
opacity: 0.7;
}
}
.post .link-arrow::after,
.wp-editor .link-arrow::after {
content: "";
display: inline-block;
mask: var(--icon-arrow-right) no-repeat center/contain;
aspect-ratio: 43/8;
inline-size: 2.7em;
background-color: var(--theme-color);
translate: 0 -0.1em;
}
.post .btn-wrap,
.wp-editor .btn-wrap {
margin-top: 50px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 15px 20px;
}
@media (max-width: 640px) {
.post .btn-wrap,
.wp-editor .btn-wrap {
margin-top: 30px;
}
}
.post .grid-2,
.wp-editor .grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
@media (max-width: 1024px) {
.post .grid-2,
.wp-editor .grid-2 {
grid-template-columns: 1fr;
gap: 32px;
}
}
.post .grid-2 > div > *,
.wp-editor .grid-2 > div > * {
margin-top: 1em;
margin-bottom: 1em;
max-width: 100%;
}
.post .grid-2 > div > *:first-child,
.wp-editor .grid-2 > div > *:first-child {
margin-top: 0 !important;
}
.post .grid-2 > div > *:last-child,
.wp-editor .grid-2 > div > *:last-child {
margin-bottom: 0 !important;
}
.post .grid-2-1to2,
.wp-editor .grid-2-1to2 {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px 32px;
}
@media (max-width: 768px) {
.post .grid-2-1to2,
.wp-editor .grid-2-1to2 {
grid-template-columns: 1fr;
}
}
.post .grid-2-1to2 > div > *,
.wp-editor .grid-2-1to2 > div > * {
margin-top: 1em;
margin-bottom: 1em;
max-width: 100%;
}
.post .grid-2-1to2 > div > *:first-child,
.wp-editor .grid-2-1to2 > div > *:first-child {
margin-top: 0 !important;
}
.post .grid-2-1to2 > div > *:last-child,
.wp-editor .grid-2-1to2 > div > *:last-child {
margin-bottom: 0 !important;
}
.post .grid-2-2to3,
.wp-editor .grid-2-2to3 {
display: grid;
grid-template-columns: 2fr 3.1fr;
gap: 32px;
}
@media (max-width: 1024px) {
.post .grid-2-2to3,
.wp-editor .grid-2-2to3 {
grid-template-columns: 1fr;
}
}
.post .grid-2-2to3 > div > *,
.wp-editor .grid-2-2to3 > div > * {
margin-top: 1em;
margin-bottom: 1em;
max-width: 100%;
}
.post .grid-2-2to3 > div > *:first-child,
.wp-editor .grid-2-2to3 > div > *:first-child {
margin-top: 0 !important;
}
.post .grid-2-2to3 > div > *:last-child,
.wp-editor .grid-2-2to3 > div > *:last-child {
margin-bottom: 0 !important;
}
.post .grid-3,
.wp-editor .grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px 40px;
}
@media (max-width: 1024px) {
.post .grid-3,
.wp-editor .grid-3 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.post .grid-3,
.wp-editor .grid-3 {
grid-template-columns: 1fr;
}
}
.post .grid-3 > div > *,
.wp-editor .grid-3 > div > * {
margin-top: 1em;
margin-bottom: 1em;
max-width: 100%;
}
.post .grid-3 > div > *:first-child,
.wp-editor .grid-3 > div > *:first-child {
margin-top: 0 !important;
}
.post .grid-3 > div > *:last-child,
.wp-editor .grid-3 > div > *:last-child {
margin-bottom: 0 !important;
}
.post .grid-3-gap-sm,
.wp-editor .grid-3-gap-sm {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 1024px) {
.post .grid-3-gap-sm,
.wp-editor .grid-3-gap-sm {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.post .grid-3-gap-sm,
.wp-editor .grid-3-gap-sm {
grid-template-columns: 1fr;
}
}
.post .grid-3-gap-sm > div > *,
.wp-editor .grid-3-gap-sm > div > * {
margin-top: 1em;
margin-bottom: 1em;
max-width: 100%;
}
.post .grid-3-gap-sm > div > *:first-child,
.wp-editor .grid-3-gap-sm > div > *:first-child {
margin-top: 0 !important;
}
.post .grid-3-gap-sm > div > *:last-child,
.wp-editor .grid-3-gap-sm > div > *:last-child {
margin-bottom: 0 !important;
}
.post .box,
.wp-editor .box {
background-color: var(--background-secondary);
padding: 40px;
}
@media (max-width: 640px) {
.post .box,
.wp-editor .box {
padding: 32px 20px;
}
}
.post .box > *,
.wp-editor .box > * {
margin-top: 1em;
margin-bottom: 1em;
max-width: 100%;
}
.post .box > *:first-child,
.wp-editor .box > *:first-child {
margin-top: 0 !important;
}
.post .box > *:last-child,
.wp-editor .box > *:last-child {
margin-bottom: 0 !important;
}
.post .box + .box,
.wp-editor .box + .box {
margin-top: 20px;
}
.post .box-triangle,
.wp-editor .box-triangle {
background-color: var(--background-secondary);
padding: 40px;
position: relative;
}
@media (max-width: 640px) {
.post .box-triangle,
.wp-editor .box-triangle {
padding: 32px 20px;
}
}
.post .box-triangle::after,
.wp-editor .box-triangle::after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
width: clamp(40px, 24.46px + 4.145vw, 80px);
aspect-ratio: 1/1;
clip-path: polygon(0 0, 100% 0, 100% 100%);
background-color: var(--theme-color);
}
.post .box-triangle > *,
.wp-editor .box-triangle > * {
margin-top: 1em;
margin-bottom: 1em;
max-width: 100%;
}
.post .box-triangle > *:first-child,
.wp-editor .box-triangle > *:first-child {
margin-top: 0 !important;
}
.post .box-triangle > *:last-child,
.wp-editor .box-triangle > *:last-child {
margin-bottom: 0 !important;
}
.post .box-triangle + .box-triangle,
.wp-editor .box-triangle + .box-triangle {
margin-top: 20px;
}
.post .box-card,
.wp-editor .box-card {
display: flex;
flex-direction: column;
background-color: var(--background-secondary);
padding: 20px 20px 32px;
height: 100%;
position: relative;
}
.post .box-card span,
.wp-editor .box-card span {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--theme-color);
color: var(--white);
font-size: 24px;
font-weight: 500;
font-family: var(--family-secondary);
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.post .box-card img,
.wp-editor .box-card img {
width: 100%;
margin-top: 0;
margin-bottom: 0;
}
.post .box-card h3,
.wp-editor .box-card h3 {
font-weight: 700;
color: var(--font-primary);
font-size: clamp(16px, 15.22px + 0.207vw, 18px);
margin-top: 1em;
margin-bottom: 0;
}
.post .box-card p,
.wp-editor .box-card p {
margin-top: 0.8em;
}
.post .box-card > *,
.wp-editor .box-card > * {
margin-top: 1em;
margin-bottom: 1em;
max-width: 100%;
}
.post .box-card > *:first-child,
.wp-editor .box-card > *:first-child {
margin-top: 0 !important;
}
.post .box-card > *:last-child,
.wp-editor .box-card > *:last-child {
margin-bottom: 0 !important;
}
.post .box-card a,
.wp-editor .box-card a {
margin-left: auto;
margin-top: auto;
}
.post .box-card a.fancybox,
.wp-editor .box-card a.fancybox {
margin-top: 0;
margin-bottom: 0;
}
.post .box-card .link-arrow,
.wp-editor .box-card .link-arrow {
margin-left: auto;
margin-top: auto;
}
.post .box-border,
.wp-editor .box-border {
border: 1px solid var(--border-primary);
padding: 20px 30px;
margin-top: 50px;
}
@media (max-width: 640px) {
.post .box-border,
.wp-editor .box-border {
padding: 20px;
margin-top: 20px;
}
}
.post .box-border__head,
.wp-editor .box-border__head {
font-size: clamp(17px, 15.45px + 0.415vw, 21px);
font-weight: 500;
}
.post .box-border__text,
.wp-editor .box-border__text {
margin-top: 1em;
padding-top: 1em;
border-top: 1px solid var(--border-primary);
}
.post .box-white,
.wp-editor .box-white {
background-color: var(--white);
border-radius: 10px;
padding: 20px 24px;
}
@media (max-width: 640px) {
.post .box-white,
.wp-editor .box-white {
padding: 20px;
}
}
.post .box-white > *,
.wp-editor .box-white > * {
margin-top: 1em;
margin-bottom: 1em;
max-width: 100%;
}
.post .box-white > *:first-child,
.wp-editor .box-white > *:first-child {
margin-top: 0 !important;
}
.post .box-white > *:last-child,
.wp-editor .box-white > *:last-child {
margin-bottom: 0 !important;
}
.post .color-red,
.wp-editor .color-red {
color: var(--red);
}
.post .inline-center,
.wp-editor .inline-center {
width: fit-content;
margin-inline: auto;
}
.post .br-sm-only,
.wp-editor .br-sm-only {
display: none;
}
@media (max-width: 640px) {
.post .br-sm-only,
.wp-editor .br-sm-only {
display: inline;
}
}
.post .br-lg-only,
.wp-editor .br-lg-only {
display: inline;
}
@media (max-width: 640px) {
.post .br-lg-only,
.wp-editor .br-lg-only {
display: none;
}
}
.post .calendar,
.wp-editor .calendar {
display: grid;
grid-template-columns: max-content 1fr;
gap: 40px;
}
@media (max-width: 640px) {
.post .calendar,
.wp-editor .calendar {
gap: 20px;
}
}
.post .calendar__month,
.wp-editor .calendar__month {
width: clamp(80px, 72.23px + 2.073vw, 100px);
height: clamp(80px, 72.23px + 2.073vw, 100px);
background-color: var(--theme-color);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family: var(--family-secondary);
font-weight: 500;
color: var(--white);
font-size: clamp(30px, 26.89px + 0.829vw, 38px);
line-height: 1;
gap: 0.1em;
}
.post .calendar__month span,
.wp-editor .calendar__month span {
display: block;
font-size: clamp(10px, 8.45px + 0.415vw, 14px);
}
.post .calendar__list li,
.wp-editor .calendar__list li {
padding: 0.6em 0.4em;
border-top: 1px solid var(--border-primary);
}
.post .calendar__list li:last-child,
.wp-editor .calendar__list li:last-child {
border-bottom: 1px solid var(--border-primary);
}
.post .department-layout,
.wp-editor .department-layout {
height: 100%;
display: flex;
flex-direction: column;
}
.post .department-layout .link-arrow,
.wp-editor .department-layout .link-arrow {
margin-top: auto;
margin-left: auto;
}
@media (max-width: 1024px) {
.post .department-layout .link-arrow,
.wp-editor .department-layout .link-arrow {
margin-top: 0.5em;
}
}
@media (max-width: 1024px) {
.post .grid-3:has(.department-elements),
.wp-editor .grid-3:has(.department-elements) {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
}
@media (max-width: 768px) {
.post .grid-3:has(.department-elements),
.wp-editor .grid-3:has(.department-elements) {
grid-template-columns: 1fr;
}
}
.post .department-elements,
.wp-editor .department-elements {
position: relative;
width: 100%;
height: 100%;
max-width: 250px !important;
margin-inline: auto;
aspect-ratio: 1/1;
}
.post .department-elements__badge,
.wp-editor .department-elements__badge {
position: absolute;
top: 0;
left: 0;
width: fit-content;
display: block;
background-color: var(--honey);
color: var(--white);
font-weight: 500;
text-align: center;
padding: 0.4em 1.1em;
font-size: clamp(14px, 13.22px + 0.207vw, 16px);
}
.post .department-elements__text,
.wp-editor .department-elements__text {
width: 100%;
height: 100%;
background-color: var(--theme-color);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 0.5em;
font-size: clamp(18px, 16.83px + 0.311vw, 21px);
font-weight: 500;
color: var(--white);
text-align: center;
}
.post .department-elements__text span,
.wp-editor .department-elements__text span {
font-size: clamp(13px, 12.22px + 0.207vw, 15px);
}
/* ---------------------------
top - common
----------------------------- */
.top-common-headline {
font-size: clamp(16px, 14.06px + 0.518vw, 21px);
font-weight: 400;
padding-left: 60px;
position: relative;
margin-bottom: 1em;
}
@media (max-width: 1024px) {
.top-common-headline {
margin-left: calc(-1 * var(--spacing-gutter));
}
}
.top-common-headline::before {
content: "";
display: block;
width: 50px;
height: 2px;
background-color: var(--theme-color);
position: absolute;
top: 0.75em;
left: 0;
}
@media (max-width: 640px) {
.top-common-headline::before {
height: 1px;
}
}
/* ---------------------------
hero
----------------------------- */
.hero {
position: relative;
}
.hero__bg {
width: 100%;
}
.hero__bg img {
width: 100%;
}
.hero__slogan {
position: absolute;
top: 7%;
left: 0;
width: 100%;
}
@media (max-width: 640px) {
.hero__slogan {
top: 50%;
translate: 0 -50%;
}
}
.hero__slogan img {
width: 50.5%;
margin-inline: auto;
}
@media (max-width: 640px) {
.hero__slogan img {
width: 9%;
}
}
/* ---------------------------
layout
----------------------------- */
.top-info {
background-color: var(--background-secondary);
padding: 50px 0;
}
@media (max-width: 640px) {
.top-info {
padding: 40px 0;
}
}
.top-info-layout {
display: grid;
grid-template-columns: 1fr 2.6fr;
gap: 40px 20px;
}
@media (max-width: 1200px) {
.top-info-layout {
grid-template-columns: 1fr;
}
}
/* ---------------------------
exam
----------------------------- */
.top-exam {
padding-right: 20px;
border-right: 5px solid var(--theme-color);
}
@media (max-width: 1200px) {
.top-exam {
padding-right: 0;
border: none;
}
}
.top-exam-bnr {
position: relative;
border: 1px solid var(--border-primary);
}
.top-exam-bnr:nth-child(1){
height: 420px;
overflow: hidden;
}
@media (max-width: 1200px) {
.top-exam-bnr {
display: grid;
grid-template-columns: 1fr 1fr;
border: 20px solid var(--theme-color);
}
}
@media (max-width: 640px) {
.top-exam-bnr:nth-child(1){
height: 100% !important;
overflow: visible !important;
}
.top-exam-bnr {
grid-template-columns: 1fr;
}
}
.top-exam-bnr picture, .top-exam-bnr img {
width: 100%;
}
@media (max-width: 1200px) {
.top-exam-bnr picture, .top-exam-bnr img {
height: 100%;
object-fit: cover;
}
}
.top-exam-bnr__btn {
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
}
@media (max-width: 1200px) {
.top-exam-bnr__btn {
display: none;
}
}
.top-exam-bnr__text {
display: none;
}
@media (max-width: 1200px) {
.top-exam-bnr__text {
display: flex;
flex-direction: column;
padding: clamp(20px, 12.23px + 2.073vw, 40px);
background-color: var(--white);
}
}
.top-exam-bnr__text h3 {
font-size: clamp(16px, 14.06px + 0.518vw, 21px);
color: var(--theme-color);
font-weight: 500;
}
.top-exam-bnr__text p {
margin-top: 1em;
margin-bottom: 2em;
}
.top-exam-bnr__text .c-arrow-link {
margin-top: auto;
margin-left: auto;
}
/* ---------------------------
news
----------------------------- */
.top-news-more {
margin-left: auto;
margin-top: 30px;
}
@media (max-width: 640px) {
.top-news-more {
margin-inline: auto;
}
}
.top-news-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 20px;
background-color: var(--white);
}
@media (max-width: 640px) {
.top-news-list {
width: calc(100% + 2 * var(--spacing-gutter));
margin-inline: calc(-1 * var(--spacing-gutter));
overflow-x: auto;
gap: 10px;
}
}
@media (max-width: 640px) {
.top-news-list .news-article {
width: calc(100vw - 8 * var(--spacing-gutter));
}
}
/* ---------------------------
policy
----------------------------- */
.top-policy-section {
padding: 50px 0;
}
@media (max-width: 640px) {
.top-policy-section {
padding: 40px 0;
}
}
.top-policy {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px 50px;
}
@media (max-width: 1024px) {
.top-policy {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.top-policy {
gap: 32px;
}
}
.top-policy__img picture, .top-policy__img img {
width: 100%;
}
.top-policy__img .top-common-headline {
display: none;
}
@media (max-width: 1024px) {
.top-policy__img .top-common-headline {
display: block;
}
}
.top-policy__text .top-common-headline {
display: block;
}
@media (max-width: 1024px) {
.top-policy__text .top-common-headline {
display: none;
}
}
.top-policy__text h3 {
font-family: var(--family-secondary);
font-weight: 500;
line-height: var(--line-height-snug);
font-size: clamp(21px, 16.73px + 1.14vw, 32px);
letter-spacing: 0.1em;
}
@media (max-width: 1024px) {
.top-policy__text h3 {
text-align: center;
}
}
.top-policy__text p {
font-family: var(--family-secondary);
font-weight: 500;
line-height: 2.5;
letter-spacing: 0;
margin-top: 2em;
}
@media (max-width: 1024px) {
.top-policy__text p {
line-height: 2;
}
}
.top-policy__text p + p {
margin-top: 1em;
}
/* ---------------------------
media
----------------------------- */
.top-media {
padding: 50px 0;
}
@media (max-width: 1024px) {
.top-media {
padding: 0;
}
}
.top-media-layout {
display: grid;
grid-template-columns: 1.63fr 1fr;
gap: 40px 50px;
}
@media (max-width: 1024px) {
.top-media-layout {
grid-template-columns: 1fr;
}
}
.top-media-youtube iframe {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 800/450;
}
.top-media-instagram #sb_instagram, .top-media-instagram #sb_instagram #sbi_images {
padding: 0 !important;
}
.top-media-more {
margin-top: 1.8em;
}
/* ---------------------------
access
----------------------------- */
.top-access-section {
padding: 50px 0 100px;
}
@media (max-width: 640px) {
.top-access-section {
padding: 40px 0;
}
}
.top-access {
display: grid;
grid-template-columns: 1.63fr 1fr;
gap: 40px 50px;
}
@media (max-width: 1024px) {
.top-access {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.top-access {
gap: 24px;
}
}
.top-access__map .top-common-headline {
display: none;
}
@media (max-width: 1024px) {
.top-access__map .top-common-headline {
display: block;
}
}
.top-access__text .top-common-headline {
display: block;
}
@media (max-width: 1024px) {
.top-access__text .top-common-headline {
display: none;
}
}
.top-access__text h3 {
font-family: var(--family-secondary);
font-weight: 500;
color: var(--theme-color);
font-size: clamp(18px, 15.67px + 0.622vw, 24px);
}
.top-access__text address {
font-size: clamp(13px, 11.83px + 0.311vw, 16px);
font-family: var(--family-secondary);
font-weight: 500;
margin-top: 0.6em;
}
.top-access__text address a {
color: var(--theme-color);
text-decoration: underline;
transition: text-decoration 0.1s ease-in-out;
}
.top-access__text address a:focus-visible {
text-decoration: none;
}
@media (any-hover: hover) {
.top-access__text address a:hover {
text-decoration: none;
}
}
.top-access-list__item {
font-family: var(--family-secondary);
font-weight: 500;
display: grid;
grid-template-columns: max-content 1fr;
align-items: center;
gap: 1em;
margin-top: 1.5em;
font-size: clamp(13px, 11.83px + 0.311vw, 16px);
}
.top-access-list__item + .top-access-list__item {
margin-top: 1.2em;
}
.top-access-list__item::before {
content: "";
display: inline-block;
background-color: var(--theme-color);
inline-size: 1.4em;
}
.top-access-list__item--train::before {
mask: var(--icon-train) no-repeat center/contain;
aspect-ratio: 21/30;
}
.top-access-list__item--bus::before {
mask: var(--icon-bus) no-repeat center/contain;
aspect-ratio: 21/24;
}
.top-access-list__item--car::before {
mask: var(--icon-car) no-repeat center/contain;
aspect-ratio: 22/17;
}
.top-access-embed {
border: 1px solid var(--border-primary);
}
.top-access-embed iframe {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 800/480;
}
.top-access-contact {
margin-top: 1.8em;
}
@media (max-width: 1024px) {
.top-access-contact {
margin-inline: auto;
}
}
/* ---------------------------
page - common
----------------------------- */
.page-head {
position: relative;
padding: 50px 50px 0;
}
@media (max-width: 1024px) {
.page-head {
padding: 40px 30px 0;
}
}
@media (max-width: 640px) {
.page-head {
padding-bottom: 40px;
}
}
.page-head__title {
position: absolute;
top: 0;
left: 0;
z-index: 10;
font-size: clamp(18px, 14.11px + 1.036vw, 28px);
font-weight: 500;
color: var(--white);
background-color: var(--theme-color);
padding: 0.68em 3.6em;
translate: 20px 20px;
}
@media (max-width: 1024px) {
.page-head__title {
translate: 15px 20px;
}
}
.page-head__title::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
translate: 0 100%;
z-index: -1;
display: block;
width: 30px;
aspect-ratio: 3/2;
clip-path: polygon(0 0, 100% 0, 100% 100%);
background-color: var(--theme-color-shadow);
}
@media (max-width: 1024px) {
.page-head__title::after {
width: 15px;
}
}
.page-head__cover {
position: relative;
}
.page-head__cover picture, .page-head__cover img {
width: 100%;
object-fit: cover;
}
@media (max-width: 1024px) {
.page-head__cover picture, .page-head__cover img {
height: 300px;
}
}
@media (max-width: 640px) {
.page-head__cover picture, .page-head__cover img {
height: 200px;
}
}
.page-body {
padding-bottom: 100px;
}
@media (max-width: 640px) {
.page-body {
padding-bottom: 40px;
}
}
.page-body .u-wrapper {
padding-left: 50px;
padding-right: 50px;
}
@media (max-width: 1024px) {
.page-body .u-wrapper {
padding-left: var(--spacing-gutter);
padding-right: var(--spacing-gutter);
}
}
.page-layout {
display: grid;
grid-template-columns: auto 300px;
gap: 40px;
}
@media (max-width: 1280px) {
.page-layout {
grid-template-columns: 1fr;
}
}
.page-layout__content {
padding: 50px;
border: clamp(10px, 6.11px + 1.036vw, 20px) solid var(--beige);
background-color: var(--white);
}
@media (max-width: 640px) {
.page-layout__content {
border: none;
width: calc(100% + 2 * var(--spacing-gutter));
margin-inline: calc(-1 * var(--spacing-gutter));
padding: 40px calc(2 * var(--spacing-gutter));
}
}
/* ---------------------------
breadcrumbs
----------------------------- */
.breadcrumbs {
width: 100%;
padding: 30px 0;
}
@media (max-width: 640px) {
.breadcrumbs {
display: none;
}
}
.breadcrumbs a, .breadcrumbs span {
display: block;
font-size: 14px;
font-weight: 500;
color: var(--theme-color);
}
.breadcrumbs a {
transition: text-decoration 0.1s ease-in-out;
}
.breadcrumbs a:focus-visible {
text-decoration: underline;
}
@media (any-hover: hover) {
.breadcrumbs a:hover {
text-decoration: underline;
}
}
.breadcrumbs .home {
transition: opacity 0.2s ease-in-out;
}
.breadcrumbs .home:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.breadcrumbs .home:hover {
opacity: 0.7;
}
}
.breadcrumbs .home::after {
content: "";
width: 1.1em;
display: inline-block;
mask: var(--icon-home) no-repeat center/contain;
aspect-ratio: 18/16;
inline-size: 1.3em;
background-color: var(--gray-dark);
translate: 0 0.2em;
}
.breadcrumbs .home span {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.breadcrumbs-inner {
width: 100%;
display: flex;
align-items: center;
}
.breadcrumbs-inner > span:not(:last-of-type) {
display: block;
padding-right: 24px;
margin-right: 18px;
background-image: url(../img/common/chevron_breadcrumbs.svg);
background-repeat: no-repeat;
background-position: right center;
background-size: 4px 8px;
}
/* ---------------------------
form
----------------------------- */
.form {
margin-top: 50px;
}
@media (max-width: 640px) {
.form {
margin-top: 40px;
}
}
.form dl {
display: grid;
grid-template-columns: 256px auto;
}
@media (max-width: 768px) {
.form dl {
grid-template-columns: 1fr;
}
}
.form dt, .form dd {
padding-top: 24px;
padding-bottom: 24px;
border-top: 1px solid var(--border-primary);
}
.form dt {
font-weight: 400;
display: flex;
align-items: center;
gap: 0.6em;
padding-left: var(--spacing-gutter);
padding-right: 1em;
}
@media (max-width: 768px) {
.form dt {
padding-left: 0;
padding-right: 0;
padding-bottom: 12px;
}
}
.form dt:last-of-type {
border-bottom: 1px solid var(--border-primary);
}
@media (max-width: 768px) {
.form dt:last-of-type {
border-bottom: none;
}
}
.form dt span {
display: block;
width: fit-content;
text-align: center;
color: #ffffff;
font-size: 10px;
background-color: var(--red);
border-radius: 3px;
letter-spacing: 0;
padding: 0.2em 0.5em;
}
.form dd {
padding-right: var(--spacing-gutter);
}
@media (max-width: 768px) {
.form dd {
border-top: none;
padding-top: 0;
padding-right: 0;
}
}
.form dd:last-of-type {
border-bottom: 1px solid var(--border-primary);
}
.form .error {
font-size: 13px !important;
margin-top: 0.2em;
}
.form input[type=text],
.form input[type=email],
.form textarea {
width: 100%;
border-radius: 0;
border: 3px solid #e4e4e4;
background-color: var(--white);
font-size: 16px;
font-weight: 400;
padding: 0.5em 1em;
color: var(--black);
}
.form input[type=text]::placeholder,
.form input[type=email]::placeholder,
.form textarea::placeholder {
color: #b0b0b0;
font-weight: 400;
font-size: 15px;
}
.form select {
appearance: none;
-webkit-appearance: none;
background-image: url(../img/common/select.svg);
background-position: right 16px center;
background-size: 10px;
background-repeat: no-repeat;
cursor: pointer;
}
.form .name {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: 20px;
}
.form .name label {
display: flex;
align-items: center;
gap: 20px;
}
.form .name span {
white-space: nowrap;
}
.form .horizontal-item + .horizontal-item {
margin: 0 !important;
}
.form .radio {
display: flex;
align-items: center;
gap: 30px;
}
.form .radio label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.form .radio input[type=radio] {
appearance: none;
-webkit-appearance: none;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 20px;
height: 20px;
padding: 0;
margin: 0;
background-color: #fff;
border: 3px solid #e5e5e5;
cursor: pointer;
}
.form .radio input[type=radio]::after {
content: "";
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #e5e5e5;
}
.form .radio input[type=radio]:checked::after {
background-color: var(--theme-color);
}
.form .radio span {
font-size: 14px;
}
.form textarea {
display: block;
height: 180px;
resize: vertical;
}
.form .siryo {
margin-top: 1.2em;
}
.form .siryo p {
font-size: clamp(13px, 12.61px + 0.104vw, 14px);
margin-top: 1em;
}
@media (max-width: 480px) {
.form .siryo input::placeholder {
font-size: 11px;
translate: 0 -0.2em;
}
}
.form .privacy {
margin-top: 48px;
}
@media (max-width: 640px) {
.form .privacy {
margin-top: 30px;
}
}
.form .privacy p {
font-size: clamp(13px, 12.61px + 0.104vw, 14px);
width: fit-content;
margin-inline: auto;
}
.form .privacy__head {
text-align: center;
font-weight: 400;
margin-bottom: 1em;
font-size: clamp(15px, 14.61px + 0.104vw, 16px);
}
.form .submit {
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
margin-top: 48px;
}
@media (max-width: 640px) {
.form .submit {
margin-top: 30px;
gap: 20px;
}
}
.form .submit button {
display: block;
width: 100%;
max-width: 200px;
font-size: clamp(15px, 14.61px + 0.104vw, 16px);
font-weight: 400;
text-align: center;
padding: 0.8em 1em;
border-radius: 0;
color: var(--white);
background-color: var(--theme-color);
cursor: pointer;
transition: opacity 0.2s ease-in-out;
}
.form .submit button:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.form .submit button:hover {
opacity: 0.7;
}
}
.form .submit .back {
background-color: var(--gray-dark);
}
.form .submit .mwform-checkbox-field label {
display: flex;
align-items: center;
gap: 0.5em;
cursor: pointer;
}
.form .submit .mwform-checkbox-field span {
font-size: 14px;
font-weight: 400;
}
.form .submit .mwform-checkbox-field input {
display: block;
width: 12px;
height: 12px;
appearance: none;
-webkit-appearance: none;
padding: 0;
margin: 0;
background-color: var(--white);
border-radius: 0;
border: 1px solid var(--font-primary);
background-image: url(../img/common/check.svg);
background-position: center;
background-size: 10px;
background-repeat: no-repeat;
cursor: pointer;
}
.form .submit .mwform-checkbox-field input:checked {
background-color: var(--theme-color);
}
.form .small {
max-width: 184px;
}
.mw_wp_form_confirm .form .privacy {
display: none;
}
.mw_wp_form_confirm .form .submit__confirm {
display: none;
}
.mw_wp_form_confirm .form .name span {
display: none;
}
.mw_wp_form_confirm .form .siryo p {
display: none;
}
/* ---------------------------
club
----------------------------- */
.club-slider {
margin-top: 50px;
margin-bottom: 50px;
}
@media (max-width: 640px) {
.club-slider {
margin-top: 20px;
margin-bottom: 30px;
}
}
.club-slider .swiper-button-next,
.club-slider .swiper-button-prev {
width: 50px;
height: 50px;
top: 50%;
translate: 0 -50%;
bottom: auto;
margin: 0;
padding: 0;
background-color: transparent;
cursor: pointer;
}
@media (max-width: 640px) {
.club-slider .swiper-button-next,
.club-slider .swiper-button-prev {
width: 40px;
height: 40px;
}
}
.club-slider .swiper-button-next img,
.club-slider .swiper-button-prev img {
width: 50px;
}
@media (max-width: 640px) {
.club-slider .swiper-button-next img,
.club-slider .swiper-button-prev img {
width: 40px;
}
}
.club-slider .swiper-button-next::after,
.club-slider .swiper-button-prev::after {
display: none;
}
.club-slider .swiper-button-next {
right: 0;
left: auto;
}
@media (max-width: 640px) {
.club-slider .swiper-button-next {
right: 10px;
}
}
.club-slider .swiper-button-prev {
left: 0;
right: auto;
}
@media (max-width: 640px) {
.club-slider .swiper-button-prev {
left: 10px;
}
}
.club-slider__main {
position: relative;
padding: 0 80px;
}
@media (max-width: 640px) {
.club-slider__main {
padding: 0;
}
}
.club-slider__sub {
margin-top: 10px;
padding: 0 80px;
}
@media (max-width: 640px) {
.club-slider__sub {
padding: 0;
}
}
.club-slider__sub .swiper-slide {
cursor: pointer;
}
.club-slider__sub img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 1/1;
}
/* ---------------------------
news
----------------------------- */
.news-article {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: max-content 1fr;
border: 1px solid var(--border-primary);
}
.news-article__thumbnail {
display: block;
}
.news-article__thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 291/218;
}
.news-article__text {
display: flex;
flex-direction: column;
padding: 16px 20px 24px;
}
.news-article__text time {
display: block;
font-size: 14px;
margin-bottom: 0.4em;
}
.news-article__text h2, .news-article__text h3 {
font-size: 18px;
font-weight: 500;
color: var(--theme-color);
}
.news-article__text ul {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 10px;
margin-bottom: 14px;
}
.news-article__text li {
width: fit-content;
font-size: 12px;
background-color: #f1f1f1;
padding: 0.15em 0.6em;
color: var(--black-light);
}
.news-article__text p {
font-size: 14px;
margin-bottom: 1.5em;
}
@media (max-width: 640px) {
.news-article__text p {
display: none;
}
}
.news-article__text .c-arrow-link {
margin-left: auto;
margin-top: auto;
}
/* ---------------------------
archive
----------------------------- */
.news-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 768px) {
.news-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.news-list {
grid-template-columns: 1fr;
}
}
.news-list--mt {
margin-top: 50px;
}
@media (max-width: 640px) {
.news-list--mt {
margin-top: 30px;
}
}
.wp-pagenavi {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: 50px;
}
@media (max-width: 640px) {
.wp-pagenavi {
margin-top: 40px;
gap: 6px;
}
}
.wp-pagenavi span, .wp-pagenavi a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: var(--theme-color);
font-size: 14px;
color: var(--white);
}
.wp-pagenavi a {
transition: opacity 0.2s ease-in-out;
}
.wp-pagenavi a:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.wp-pagenavi a:hover {
opacity: 0.7;
}
}
.wp-pagenavi .current {
background-color: var(--gray-dark);
}
.wp-pagenavi .nextpostslink,
.wp-pagenavi .previouspostslink {
color: transparent;
background-position: center;
background-repeat: no-repeat;
background-size: 6px;
}
.wp-pagenavi .nextpostslink {
background-image: url(../img/common/post_next.svg);
}
.wp-pagenavi .previouspostslink {
background-image: url(../img/common/post_prev.svg);
}
/* ---------------------------
single
----------------------------- */
.news-single-head {
padding-bottom: 30px;
border-bottom: 1px solid var(--border-primary);
}
@media (max-width: 640px) {
.news-single-head {
padding-bottom: 20px;
}
}
.news-single-head time {
display: block;
font-size: clamp(14px, 13.22px + 0.207vw, 16px);
margin-bottom: 0.4em;
}
.news-single-head h1 {
font-size: clamp(20px, 15.34px + 1.244vw, 32px);
font-weight: 700;
}
.news-single-head ul {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 20px;
}
.news-single-head li {
width: fit-content;
font-size: 12px;
background-color: #f1f1f1;
padding: 0.15em 0.6em;
color: var(--black-light);
}
.news-single-body {
padding: 30px 0 50px;
}
@media (max-width: 640px) {
.news-single-body {
padding: 20px 0 30px;
}
}
.news-single-foot {
border-top: 1px solid var(--border-primary);
padding-top: 50px;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
@media (max-width: 640px) {
.news-single-foot {
padding-top: 30px;
}
}
.news-single-foot a {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
background-color: var(--theme-color);
color: #ffffff;
font-weight: 500;
text-align: center;
transition: opacity 0.2s ease-in-out;
}
.news-single-foot a:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.news-single-foot a:hover {
opacity: 0.7;
}
}
.news-single-foot .archive {
padding: 0.7em 2em 0.8em;
}
.news-single-foot .prev, .news-single-foot .next {
width: 50px;
color: transparent;
text-indent: -9999px;
overflow: hidden;
background-repeat: no-repeat;
background-size: 6px;
background-position: center;
}
.news-single-foot .prev {
background-image: url(../img/common/post_prev.svg);
}
.news-single-foot .next {
background-image: url(../img/common/post_next.svg);
}
/* ---------------------------
sidebar
----------------------------- */
.sidebar {
position: relative;
height: 100%;
}
.sidebar .u-sm-gutter {
height: 100%;
}
@media (max-width: 1280px) {
.sidebar-item-sticky {
display: none;
}
}
.sidebar-item + .sidebar-item {
margin-top: 20px;
}
.sidebar-item + .sidebar-bnr,
.sidebar-bnr + .sidebar-item,
.sidebar-bnr + .sidebar-item-sticky {
margin-top: 20px;
}
.sidebar-item__title {
background-color: var(--theme-color);
color: var(--white);
font-size: 16px;
font-weight: 600;
padding: 0.8em 1.2em;
}
.sidebar-item__title--orange {
background-color: var(--orange);
}
.sidebar-item__list {
background-color: var(--white);
padding: 0 20px 40px;
border: 1px solid var(--border-primary);
border-top: none;
list-style: none;
}
@media (max-width: 640px) {
.sidebar-item__list {
padding-bottom: 20px;
}
}
.sidebar-item__list li {
border-bottom: 1px solid var(--border-primary);
}
.sidebar-item__list a {
display: block;
padding: 1em 0.5em;
font-size: clamp(14px, 13.61px + 0.104vw, 15px);
font-weight: 400;
color: var(--theme-color);
transition: opacity 0.2s ease-in-out;
}
.sidebar-item__list a:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.sidebar-item__list a:hover {
opacity: 0.7;
}
}
.sidebar-item__list time {
display: block;
font-size: clamp(13px, 12.61px + 0.104vw, 14px);
color: var(--font-primary);
margin-bottom: 0.2em;
}
.sidebar-item__list h4 {
font-size: clamp(14px, 13.61px + 0.104vw, 15px);
font-weight: 400;
color: var(--theme-color);
}
.sidebar-bnr {
position: relative;
}
.sidebar-bnr__img {
display: block;
width: fit-content;
margin-inline: auto;
}
.sidebar-bnr__img img {
margin-inline: auto;
}
@media (max-width: 480px) {
.sidebar-bnr__img img {
width: 100%;
}
}
.sidebar-bnr__link {
width: 100%;
position: absolute;
bottom: 16px;
left: 0;
}
.sidebar-bnr__link .c-btn-circle {
margin-inline: auto;
}
.video-wrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9の比率 */
height: 0;
overflow: hidden;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}