@charset "UTF-8";
:root {
--white: #FFFFFF;
--white-opacity-800: rgb(255 255 255 / .8);
--white-opacity-700: rgb(255 255 255 / .7);
--white-opacity-600: rgb(255 255 255 / .6);
--white-opacity-550: rgb(255 255 255 / .55);
--black-solid: #000000;
--black: #1A1311;
--black-opacity-600: rgb(0 0 0 / .6);
--black-opacity-500: rgb(0 0 0 / .5);
--black-opacity-300: rgb(0 0 0 / .3);
--black-opacity-200: rgb(0 0 0 / .2);
--gray-dark: #696969;
--gray: #B5B5B5;
--gray-light: #707070;
--beige-dark: #D6CFBE;
--beige: #E8E6E0;
--beige-opacity-620: rgb(214 207 190 / .62);
--moss: #353E35;
--moss-light: #84856F;
--moss-opacity-970: rgb(53 62 53 / .97);
--brown-dark: #483B37;
--red: #E71F19;
--shadow-primary: 5px 5px 15px rgba(0 0 0 / 0.1);
--shadow-secondary: 0 0 20px rgba(0 0 0 / 0.93);
--gradient-primary: linear-gradient(to bottom, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 35%, rgb(0 0 0 / 0.8) 100%);
--gradient-radical: radial-gradient(ellipse at center, rgb(255 255 255 / 0) 0%, rgb(0 74 78 / 0.4) 100%);
--radius-sm: clamp(0.188rem, 0.127rem + 0.247vw, 0.313rem);
--radius-lg: clamp(0.313rem, 0.147rem + 0.678vw, 0.625rem);
--radius-full: calc(1px / 0);
--family-primary: "Zen Old Mincho", sans-serif;
--weight-regular: 400;
--weight-bold: 700;
--weight-black: 900;
--family-secondary: "Crimson Text", sans-serif;
--weight-secondary-regular: 400;
--weight-secondary-semibold: 600;
--line-height-tight: 1.2;
--line-height-snug: 1.4;
--line-height-default: 1.5;
--line-height-normal: 1.75;
--line-height-relaxed: 2;
--header-height: 100px;
--header-height-sm: 60px;
--spacing-gutter: clamp(1.25rem, -0.061rem + 5.379vw, 4rem);
--spacing-gutter-sm: clamp(0.875rem, 0.100rem + 3.178vw, 2.5rem);
--spacing-grid: clamp(0.875rem, 0.677rem + 0.813vw, 1.25rem);
--spacing-grid-sm: calc(var(--spacing-grid) * 0.8);
--spacing-grid-lg: calc(var(--spacing-grid) * 1.5);
--gap-xl: clamp(1.5rem, 0.217rem + 5.263vw, 4rem);
--gap-lg: clamp(1.25rem, 0.480rem + 3.158vw, 2.75rem);
--gap-md: clamp(1.125rem, 0.484rem + 2.632vw, 2.375rem);
--gap-sm: clamp(0.75rem, 0.365rem + 1.579vw, 1.5rem);
--leading-trim: calc((1em - 1lh) / 2);
--text-box: trim-both cap alphabetic;
}
:root {
--icon-chevron: url('data:image/svg+xml,');
--icon-tel: url('data:image/svg+xml,');
--icon-mail: url('data:image/svg+xml,');
--icon-index: url('data:image/svg+xml,');
--icon-instagram: url('data:image/svg+xml,');
--icon-fax: url('data:image/svg+xml,');
--icon-prev: url('data:image/svg+xml,');
--icon-next: url('data:image/svg+xml,');
--icon-prev-circle: url('data:image/svg+xml,');
--icon-next-circle: url('data:image/svg+xml,');
}
/* ---------------------------
CSS Reset
----------------------------- */
* {
min-inline-size: 0;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
:where(html) {
-webkit-text-size-adjust: 100%;
-moz-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])) {
-webkit-text-decoration-skip: ink;
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(:-moz-any-link,
button,
[type=button],
[type=reset],
[type=submit],
label[for],
select,
summary,
[role=tab],
[role=button]) {
cursor: pointer;
}
: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;
}
:where(dialog) {
width: unset;
max-width: unset;
height: unset;
max-height: unset;
padding: unset;
color: unset;
background-color: unset;
border: unset;
overflow: unset;
}
@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;
}
}
body {
background-color: var(--beige-opacity-620);
background-image: url(../img/common/bg_unit_700.png);
background-repeat: repeat;
background-size: 100px 100px;
color: var(--black);
font-size: clamp(0.875rem, 0.81rem + 0.271vw, 1rem);
font-family: var(--family-primary);
font-weight: var(--weight-regular);
letter-spacing: 0;
overflow-x: clip;
overflow-wrap: anywhere;
word-break: normal;
line-break: strict;
text-autospace: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body:has(dialog[open]) {
overflow: hidden;
}
a {
color: var(--black);
}
button {
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
background-color: transparent;
border: none;
border-radius: 0;
margin: 0;
padding: 0;
}
fieldset {
min-width: 0;
margin: 0;
border: 0;
padding: 0;
}
legend {
width: 100%;
margin: 0;
padding: 0;
}
:where(:focus-visible) {
outline-width: 3px;
outline-offset: 0.125rem;
outline-style: solid;
outline-color: var(--red);
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
}
.header::before {
content: "";
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: var(--header-height);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0) 100%);
opacity: 0;
transition: opacity 0.3s ease-in;
}
@media (max-width: 979px) {
.header::before {
height: var(--header-height-sm);
}
}
.header.has-shadow::before {
opacity: 1;
}
.header[data-is-home] .logo-sm {
display: none;
}
@media (max-width: 979px) {
.header[data-is-home] .logo-sm {
display: block;
}
}
.header[data-is-home] .logo-lg {
margin-top: 60px;
}
@media (max-width: 979px) {
.header[data-is-home] .logo-lg {
display: none;
margin-top: 0;
}
}
.header[data-in-mv] .logo-sm {
transition: filter 0.6s ease-in-out;
filter: brightness(20);
}
.header[data-in-mv] .global-nav__item a {
transition: color 0.6s ease-in-out;
color: var(--white);
}
.header[data-in-mv] .hamburger__inner span {
transition: background-color 0.6s ease-in-out;
background-color: var(--white);
}
@media (max-width: 979px) {
.header__logo img {
width: clamp(3.5rem, 2.71rem + 3.252vw, 5rem);
}
}
.header__logo .logo-sm {
padding-top: 40px;
}
@media (max-width: 979px) {
.header__logo .logo-sm {
padding-top: 0;
}
}
.header__wrapper {
position: relative;
max-width: 92vw;
margin-inline: auto;
height: var(--header-height);
display: flex;
gap: 40px;
justify-content: space-between;
padding-right: 90px;
}
@media (max-width: 979px) {
.header__wrapper {
height: var(--header-height-sm);
align-items: center;
}
}
.header__logo a {
display: block;
transition: opacity 0.2s ease-in-out;
}
.header__logo a:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.header__logo a:hover {
opacity: 0.7;
}
}
@media (max-width: 979px) {
.header__nav {
display: none;
}
}
.global-nav {
display: flex;
align-items: center;
gap: 2.2vw;
padding-top: 40px;
}
.global-nav__item a {
display: block;
font-size: 0.875rem;
padding: 1em;
font-weight: var(--weight-bold);
transition: opacity 0.2s ease-in-out;
}
.global-nav__item a:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.global-nav__item a:hover {
opacity: 0.7;
}
}
@media (max-width: 1140px) {
.global-nav__item a {
padding: 1em 0.5em;
}
}
.hamburger {
display: grid;
align-content: center;
width: 50px;
height: 50px;
background-color: transparent;
position: fixed;
top: 39px;
right: 4vw;
z-index: 9999;
}
@media (max-width: 979px) {
.hamburger {
top: 10px;
right: 24px;
width: 40px;
height: 40px;
}
}
.hamburger:focus-visible {
outline-offset: -3px;
}
.hamburger__inner {
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
height: 100%;
}
.hamburger__inner span {
display: block;
width: 100%;
height: 1px;
transform-origin: center;
background-color: var(--black);
}
.hamburger-close {
position: static;
margin-left: auto;
display: grid;
align-content: center;
width: 50px;
height: 50px;
background-color: transparent;
}
@media (max-width: 979px) {
.hamburger-close {
width: 40px;
height: 40px;
}
}
.hamburger-close:focus-visible {
outline-offset: -3px;
}
.hamburger-close__inner {
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
height: 100%;
position: relative;
}
.hamburger-close__inner span {
display: block;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
background-color: var(--white);
}
.hamburger-close__inner span:first-child {
rotate: 20deg;
}
.hamburger-close__inner span:last-child {
rotate: -20deg;
}
.folded-nav {
position: fixed;
width: 100%;
top: 0;
right: 0;
max-width: 380px;
margin-left: auto;
margin-right: 0;
background-color: var(--moss-opacity-970);
transition: opacity 0.2s ease-out, translate 0.2s ease-out;
}
@media (min-width: 1281px) {
.folded-nav {
max-width: 29.7vw;
}
}
@media (max-width: 599px) {
.folded-nav {
max-width: 57.2%;
}
}
.folded-nav[open] {
display: block;
translate: 0 0;
}
.folded-nav:not(.is-open) {
translate: 100% 0;
opacity: 0;
}
.folded-nav:not(.is-open) .folded-nav__inner {
opacity: 0;
}
.folded-nav::backdrop {
background-color: transparent;
transition: opacity 0.2s ease-out;
}
.folded-nav:not(.is-open)::backdrop {
opacity: 0;
}
.folded-nav__inner {
height: 100%;
overflow: auto;
overscroll-behavior: contain;
padding: 40px 4vw;
}
@media (max-width: 979px) {
.folded-nav__inner {
padding: 10px 24px;
}
}
.folded-nav__inner .c-sns {
margin-top: 40px;
}
.sm-nav {
margin-top: 10px;
}
.sm-nav__item {
border-bottom: 1px solid #4F5C4F;
display: block;
padding: 1.3em 0;
}
@media (max-width: 599px) {
.sm-nav__item {
padding: 1.5em 0;
}
}
.sm-nav__item > a {
display: grid;
grid-template-columns: max-content 1fr;
align-items: center;
gap: 0.6em;
font-size: clamp(0.75rem, 0.62rem + 0.542vw, 1rem);
font-weight: var(--weight-bold);
color: var(--white);
transition: opacity 0.2s ease-in-out;
}
.sm-nav__item > a:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.sm-nav__item > a:hover {
opacity: 0.7;
}
}
.sm-nav__item > a::before {
content: "";
display: inline-block;
width: 0.3em;
height: auto;
aspect-ratio: 7/12;
-webkit-mask-image: var(--icon-chevron);
mask-image: var(--icon-chevron);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
background-color: var(--white);
}
.sm-nav-child {
margin-top: 14px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 3em;
font-size: clamp(0.75rem, 0.62rem + 0.542vw, 1rem);
padding-left: 0.9em;
}
.sm-nav-child__item {
display: block;
}
.sm-nav-child__item > a {
display: inline-block;
font-size: clamp(0.75rem, 0.62rem + 0.542vw, 1rem);
font-weight: var(--weight-bold);
color: var(--white);
transition: opacity 0.2s ease-in-out;
}
.sm-nav-child__item > a:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.sm-nav-child__item > a:hover {
opacity: 0.7;
}
}
.using-mouse dialog * {
outline: none;
}
.using-mouse .hamburger {
outline: none;
}
.aside {
background-color: var(--moss-light);
padding: clamp(4.375rem, 3.85rem + 2.168vw, 5.375rem) 0 clamp(4.375rem, 3.38rem + 4.065vw, 6.25rem);
}
.aside-hgroup {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: clamp(1.5rem, 0.97rem + 2.168vw, 2.5rem);
}
@media (max-width: 599px) {
.aside-hgroup {
align-items: end;
gap: 10px;
}
}
.aside-hgroup h2 {
font-size: clamp(1.5625rem, 1.4rem + 0.678vw, 1.875rem);
font-weight: var(--weight-bold);
}
.aside-hgroup p {
font-family: var(--family-secondary);
font-size: clamp(0.9375rem, 0.77rem + 0.678vw, 1.25rem);
font-weight: var(--weight-secondary-semibold);
letter-spacing: 0.05em;
color: var(--brown-dark);
}
.aside-link {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px 10px;
}
@media (max-width: 979px) {
.aside-link {
max-width: 600px;
margin-inline: auto;
grid-template-columns: 1fr;
}
}
.aside-link a {
display: grid;
place-content: center;
height: 100%;
min-height: 164px;
border-radius: var(--radius-lg);
background-color: var(--white-opacity-800);
color: var(--black);
text-align: center;
transition: background-color 0.2s ease-in;
}
@media (max-width: 979px) {
.aside-link a {
min-height: 110px;
}
}
.aside-link a:focus-visible {
background-color: var(--white);
}
@media (any-hover: hover) {
.aside-link a:hover {
background-color: var(--white);
}
}
.aside-link__tel {
padding-bottom: 0.2em;
}
.aside-link__tel span {
display: block;
font-size: clamp(0.6875rem, 0.59rem + 0.407vw, 0.875rem);
font-weight: var(--weight-bold);
margin-bottom: 0.5em;
}
.aside-link__tel b {
position: relative;
display: grid;
grid-template-columns: max-content 1fr;
align-items: center;
width: -moz-fit-content;
width: fit-content;
margin-inline: auto;
gap: 0.2em;
font-family: var(--family-secondary);
font-size: clamp(1.5625rem, 1.2rem + 1.491vw, 2.25rem);
font-weight: var(--weight-secondary-semibold);
letter-spacing: 0.05em;
line-height: var(--line-height-tight);
}
.aside-link__tel b::before {
content: "";
display: inline-block;
width: 0.7em;
height: auto;
aspect-ratio: 24/26;
background-color: var(--black);
-webkit-mask-image: var(--icon-tel);
mask-image: var(--icon-tel);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.aside-link__tel b::after {
content: "";
display: inline-block;
width: 100%;
height: 1px;
background-color: #C4C4C4;
position: absolute;
bottom: -0.15em;
left: 0;
z-index: 10;
}
.aside-link__mail {
position: relative;
}
.aside-link__mail span {
display: grid;
align-items: center;
grid-template-columns: max-content 1fr;
gap: 0.5em;
font-size: clamp(0.8125rem, 0.58rem + 0.949vw, 1.25rem);
font-weight: var(--weight-bold);
}
.aside-link__mail span::before {
content: "";
display: inline-block;
width: 1.5em;
height: auto;
aspect-ratio: 30/22;
background-color: var(--black);
-webkit-mask-image: var(--icon-mail);
mask-image: var(--icon-mail);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.aside-link__mail::after {
content: "";
display: inline-block;
width: 0.7em;
height: auto;
aspect-ratio: 8/12;
background-color: var(--black);
-webkit-mask-image: var(--icon-chevron);
mask-image: var(--icon-chevron);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
position: absolute;
top: 50%;
right: 1.5em;
translate: 0 -50%;
}
@media (max-width: 599px) {
.aside-link__mail::after {
width: 0.4em;
}
}
.footer-insert {
position: relative;
aspect-ratio: 1280/410;
overflow: hidden;
}
@media (max-width: 599px) {
.footer-insert {
aspect-ratio: 750/410;
}
}
.footer-insert img, .footer-insert picture {
width: 100%;
}
.footer-insert picture {
display: block;
height: 100%;
}
.footer-insert img {
display: block;
height: calc(100% + 100px);
-o-object-fit: cover;
object-fit: cover;
position: relative;
top: -50px;
}
@media (max-width: 599px) {
.footer-insert img {
height: calc(100% + 50px);
top: -25px;
}
}
.footer-insert::after {
content: "";
display: block;
position: absolute;
inset: 0;
z-index: 100;
background-image: var(--gradient-radical);
mix-blend-mode: multiply;
}
.footer {
padding: 70px 0;
background-color: #24231F;
color: var(--white);
}
.footer-wrapper {
position: relative;
}
.footer-inner {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
@media (max-width: 979px) {
.footer-inner {
grid-template-columns: 1fr;
gap: 35px;
}
}
.footer-meta__logo {
display: block;
width: -moz-fit-content;
width: fit-content;
transition: opacity 0.2s ease-in-out;
}
.footer-meta__logo:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.footer-meta__logo:hover {
opacity: 0.7;
}
}
@media (max-width: 979px) {
.footer-meta__logo {
margin-inline: auto;
}
}
.footer-meta__logo img {
width: clamp(9.6875rem, 7.77rem + 7.859vw, 13.3125rem);
}
.footer-meta__address {
font-size: clamp(0.6875rem, 0.65rem + 0.136vw, 0.75rem);
line-height: 1.67;
margin-top: 2em;
}
@media (max-width: 979px) {
.footer-meta__address {
line-height: var(--line-height-relaxed);
text-align: center;
}
}
.footer-meta__tel {
display: flex;
font-size: clamp(0.6875rem, 0.65rem + 0.136vw, 0.75rem);
font-weight: var(--weight-regular);
line-height: 1.67;
}
@media (max-width: 979px) {
.footer-meta__tel {
justify-content: center;
line-height: var(--line-height-relaxed);
}
}
.footer-meta__tel dt:not(:first-child)::before {
content: "／";
font-size: 1em;
}
.footer-meta__hour {
font-size: clamp(0.6875rem, 0.65rem + 0.136vw, 0.75rem);
font-weight: var(--weight-regular);
margin-top: 0.6em;
margin-bottom: 2em;
line-height: 1.67;
}
@media (max-width: 979px) {
.footer-meta__hour {
text-align: center;
margin-bottom: 0;
line-height: var(--line-height-relaxed);
}
}
.footer-meta__hour dt {
margin-bottom: 0.2em;
}
@media (max-width: 979px) {
.footer-meta__sns.c-sns {
display: none;
justify-content: center;
}
}
.footer-info {
display: grid;
grid-template-columns: 1fr;
gap: 35px;
}
.footer-info__nav {
display: flex;
justify-content: space-between;
gap: 20px;
}
@media (max-width: 979px) {
.footer-info__nav {
display: block;
max-width: 500px;
width: 100%;
margin-inline: auto;
}
}
@media (max-width: 979px) {
.footer-info__nav dl {
display: grid;
grid-template-columns: max-content 1fr;
align-items: center;
gap: 30px;
border-top: 1px solid var(--white);
padding: 1.1em 0;
}
}
.footer-info__nav dt {
font-size: clamp(0.8125rem, 0.58rem + 0.949vw, 1.25rem);
font-weight: var(--weight-bold);
margin-bottom: 1.5em;
}
@media (max-width: 979px) {
.footer-info__nav dt {
margin-bottom: 0;
}
}
.footer-info__nav li {
font-size: clamp(0.6875rem, 0.59rem + 0.407vw, 0.875rem);
}
.footer-info__nav li + li {
margin-top: 1.8em;
}
@media (max-width: 979px) {
.footer-info__nav li + li {
margin-top: 0;
}
}
@media (max-width: 979px) {
.f-nav {
border-bottom: 1px solid var(--white);
}
}
@media (max-width: 979px) {
.f-nav__item {
border-top: 1px solid var(--white);
}
}
.f-nav__item a {
display: inline-block;
font-size: clamp(0.8125rem, 0.78rem + 0.136vw, 0.875rem);
font-weight: var(--weight-bold);
color: var(--white);
transition: color 0.2s ease-in;
transition: opacity 0.2s ease-in-out;
}
.f-nav__item a:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.f-nav__item a:hover {
opacity: 0.7;
}
}
@media (max-width: 979px) {
.f-nav__item a {
padding: 1.2em 0;
}
}
@media (max-width: 979px) {
.f-nav-child {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 48px;
}
}
.f-nav-child__item a {
display: inline-block;
font-size: clamp(0.6875rem, 0.59rem + 0.407vw, 0.875rem);
font-weight: var(--weight-bold);
color: var(--white);
transition: color 0.2s ease-in;
transition: opacity 0.2s ease-in-out;
}
.f-nav-child__item a:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.f-nav-child__item a:hover {
opacity: 0.7;
}
}
.f-nav-child__item a {
padding-left: 1.5em;
position: relative;
}
.f-nav-child__item a::before {
content: "";
display: inline-block;
width: 0.8em;
height: 1px;
background-color: var(--white);
position: absolute;
top: 0.75em;
left: 0;
}
.footer-info__label {
position: absolute;
right: 0;
bottom: 0;
}
@media (max-width: 979px) {
.footer-info__label {
position: static;
}
}
.footer-info__label li {
font-size: clamp(0.6875rem, 0.65rem + 0.136vw, 0.75rem);
line-height: 1.83;
text-align: right;
}
@media (max-width: 979px) {
.footer-info__label li {
text-align: center;
}
}
.footer-info__sns.c-sns {
display: none;
justify-content: center;
gap: 35px;
}
@media (max-width: 979px) {
.footer-info__sns.c-sns {
display: flex;
}
}
.footer-copyright small {
display: block;
font-family: var(--family-secondary);
font-weight: var(--weight-secondary-semibold);
font-size: clamp(0.625rem, 0.56rem + 0.271vw, 0.75rem);
letter-spacing: 0.05em;
}
@media (max-width: 979px) {
.footer-copyright small {
text-align: center;
}
}
.c-breadcrumb__inner {
overflow-x: auto;
}
.c-breadcrumb__inner ol {
width: -moz-max-content;
width: max-content;
min-width: 100%;
display: flex;
align-items: center;
gap: 0.2em 0;
}
.c-breadcrumb__inner li {
display: block;
font-size: clamp(0.625rem, 0.53rem + 0.407vw, 0.8125rem);
white-space: nowrap;
}
.c-breadcrumb__inner span {
color: #A29E93;
}
.c-breadcrumb__inner a {
color: var(--white);
text-underline-offset: 0.2em;
}
.c-breadcrumb__inner a:focus-visible {
text-decoration: underline;
}
@media (any-hover: hover) {
.c-breadcrumb__inner a:hover {
text-decoration: underline;
}
}
.c-breadcrumb__inner a > span {
color: var(--white);
}
.c-breadcrumb__inner li:not(:first-child)::before {
content: "";
display: inline-block;
width: 1.1em;
height: 1px;
background-color: var(--white);
margin: 0 0.3em;
translate: 0 -0.3em;
}
.c-pagination {
margin-top: clamp(2.5rem, 1.18rem + 5.42vw, 5rem);
}
.c-pagination ol {
display: flex;
align-items: center;
justify-content: center;
gap: 0 clamp(0.5rem, 0.17rem + 1.355vw, 1.125rem);
}
.c-pagination li .page-numbers {
display: grid;
place-content: center;
width: 1.9em;
aspect-ratio: 1/1;
font-size: clamp(0.75rem, 0.55rem + 0.813vw, 1.125rem);
font-weight: var(--weight-bold);
line-height: 1;
}
.c-pagination li a.page-numbers {
text-decoration: underline;
}
.c-pagination li a.page-numbers:focus-visible {
text-decoration: none;
}
@media (any-hover: hover) {
.c-pagination li a.page-numbers:hover {
text-decoration: none;
}
}
.c-pagination li .current {
border: 1px solid var(--white);
border-radius: 50%;
}
.c-pagination li.next a, .c-pagination li.prev a {
width: 1.9em;
aspect-ratio: 1/1;
display: grid;
place-content: center;
transition: opacity 0.2s ease-in-out;
}
.c-pagination li.next a:focus-visible, .c-pagination li.prev a:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.c-pagination li.next a:hover, .c-pagination li.prev a:hover {
opacity: 0.7;
}
}
.c-pagination li.next a::before, .c-pagination li.prev a::before {
content: "";
display: inline-block;
width: 0.5em;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
aspect-ratio: 8/14;
background-color: var(--white);
}
.c-pagination li.next a::before {
-webkit-mask-image: var(--icon-next);
mask-image: var(--icon-next);
}
.c-pagination li.prev a::before {
-webkit-mask-image: var(--icon-prev);
mask-image: var(--icon-prev);
}
.c-btn-chevron {
display: grid;
grid-template-columns: 1fr max-content;
align-items: center;
gap: 1em;
position: relative;
font-size: clamp(0.6875rem, 0.52rem + 0.678vw, 1rem);
font-weight: var(--weight-bold);
letter-spacing: 0.05em;
padding-bottom: 0.8em;
max-width: 154px;
width: 100%;
transition: opacity 0.2s ease-in-out;
}
.c-btn-chevron:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.c-btn-chevron:hover {
opacity: 0.7;
}
}
@media (max-width: 599px) {
.c-btn-chevron {
max-width: 85px;
padding-bottom: 0.6em;
}
}
.c-btn-chevron::after {
content: "";
display: inline-block;
width: 0.4em;
aspect-ratio: 7/12;
-webkit-mask-image: var(--icon-chevron);
mask-image: var(--icon-chevron);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: var(--black);
}
.c-btn-chevron::before {
content: "";
display: block;
width: 100%;
height: 1px;
background-color: var(--black);
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
}
.c-btn-chevron[data-color=black] {
color: var(--black);
}
.c-btn-chevron[data-color=black]::after {
background-color: var(--black);
}
.c-btn-chevron[data-color=black]::before {
background-color: var(--black);
}
.c-btn-instagram {
display: grid;
grid-template-columns: 1fr max-content;
align-items: center;
gap: 0.5em;
position: relative;
font-size: clamp(0.6875rem, 0.52rem + 0.678vw, 1rem);
font-weight: var(--weight-bold);
letter-spacing: 0.05em;
padding-bottom: 0.55em;
width: -moz-fit-content;
width: fit-content;
transition: opacity 0.2s ease-in-out;
}
.c-btn-instagram:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.c-btn-instagram:hover {
opacity: 0.7;
}
}
@media (max-width: 599px) {
.c-btn-instagram {
gap: 1.5em;
}
}
.c-btn-instagram::after {
content: "";
display: inline-block;
width: 1.5em;
aspect-ratio: 1/1;
-webkit-mask-image: var(--icon-instagram);
mask-image: var(--icon-instagram);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: var(--black);
}
.c-btn-instagram::before {
content: "";
display: block;
width: 100%;
height: 1px;
background-color: var(--black);
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
}
.c-hgroup h2, .c-hgroup h3 {
font-size: clamp(2.1875rem, 1.36rem + 3.388vw, 3.75rem);
font-weight: var(--weight-bold);
line-height: var(--line-height-tight);
}
.c-hgroup p {
font-size: clamp(0.9375rem, 0.77rem + 0.678vw, 1.25rem);
font-family: var(--family-secondary);
font-weight: var(--weight-secondary-semibold);
letter-spacing: 0.05em;
}
.c-hgroup[data-align=center] {
text-align: center;
}
.c-hgroup[data-color=black] h2, .c-hgroup[data-color=black] h3 {
color: var(--black);
}
.c-hgroup[data-color=black] p {
color: var(--black);
}
.c-hgroup[data-size=sm] h2, .c-hgroup[data-size=sm] h3 {
font-size: clamp(1.5625rem, 1.4rem + 0.678vw, 1.875rem);
}
.c-nopost {
text-align: center;
}
.c-cat {
display: block;
width: -moz-fit-content;
width: fit-content;
font-size: 0.625rem;
font-size: clamp(0.6875rem, 0.59rem + 0.407vw, 0.875rem);
font-weight: var(--weight-bold);
text-align: center;
letter-spacing: 0.05em;
color: var(--black);
background-color: var(--beige);
border-radius: 2px;
padding: 0.1em 0.8em 0.2em;
}
.c-time {
display: block;
font-size: clamp(0.75rem, 0.62rem + 0.542vw, 1rem);
font-family: var(--family-secondary);
font-weight: var(--weight-secondary-semibold);
letter-spacing: 0.05em;
}
.c-sns {
display: flex;
align-items: center;
gap: 30px;
}
.c-sns li {
display: block;
}
.c-sns a {
display: block;
transition: opacity 0.2s ease-in-out;
}
.c-sns a:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.c-sns a:hover {
opacity: 0.7;
}
}
.u-sm-only {
display: none;
}
@media (max-width: 599px) {
.u-sm-only {
display: block;
}
}
@media (max-width: 599px) {
br.u-sm-only {
display: inline;
}
}
.u-md-only {
display: none;
}
@media (max-width: 979px) {
.u-md-only {
display: block;
}
}
@media (max-width: 979px) {
br.u-md-only {
display: inline;
}
}
.u-sm-none {
display: block;
}
@media (max-width: 599px) {
.u-sm-none {
display: none;
}
}
br.u-sm-none {
display: inline;
}
@media (max-width: 599px) {
br.u-sm-none {
display: none;
}
}
.u-md-none {
display: block;
}
@media (max-width: 979px) {
.u-md-none {
display: none;
}
}
br.u-md-none {
display: inline;
}
@media (max-width: 979px) {
br.u-md-none {
display: none;
}
}
.u-wrapper {
margin-inline: auto;
max-width: 78vw;
}
@media (max-width: 1280px) {
.u-wrapper {
max-width: calc(1000px + var(--spacing-gutter) * 2);
padding-inline: var(--spacing-gutter);
}
}
.u-gutter {
padding-inline: var(--spacing-gutter-sm);
}
@media (max-width: 979px) {
.u-gutter {
padding-inline: 0;
}
}
.u-bgi {
background-image: url(../img/common/bg_unit_250.png);
background-repeat: repeat;
background-size: 100px 100px;
}
.u-visually-hidden {
position: fixed !important;
inset: 0 !important;
contain: strict !important;
visibility: initial !important;
inline-size: 4px !important;
block-size: 4px !important;
margin: unset !important;
padding: unset !important;
border: unset !important;
opacity: 0 !important;
pointer-events: none !important;
}
.top-mv {
position: relative;
}
:root {
--js-mv-opacity: 0;
}
.top-mv__fixed {
position: sticky;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
.top-mv__fixed::before {
content: "";
display: block;
position: absolute;
inset: 0;
background-color: var(--black);
opacity: var(--js-mv-opacity);
z-index: 1;
transition: opacity 0.3s linear;
}
.top-mv__fixed .splide__slide img {
height: 100vh;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.top-mv__fixed .splide__slide.is-active span img,
.top-mv__fixed .splide__slide.is-prev span img,
.top-mv__fixed .splide__slide span.is-prev img {
animation: zoom-out 10s linear 0s normal both;
}
@keyframes zoom-out {
0% {
scale: 1.2;
}
100% {
scale: 1;
}
}
.top-mv-slogan {
position: absolute;
inset: 0;
z-index: 100;
display: grid;
align-items: center;
padding-top: var(--header-height);
}
@media (max-width: 979px) {
.top-mv-slogan {
padding-top: 0;
}
}
.top-mv-slogan .u-wrapper {
width: 100%;
}
.top-mv-slogan__main {
width: -moz-fit-content;
width: fit-content;
margin-left: auto;
}
@media (max-width: 599px) {
.top-mv-slogan__main {
margin-right: auto;
}
}
.top-mv-slogan__main img {
filter: drop-shadow(var(--shadow-secondary));
width: clamp(12.5rem, 5.33rem + 29.404vw, 26.0625rem);
}
.top-mv-slogan__sub {
display: flex;
align-items: center;
justify-content: end;
gap: 0.5em;
font-size: clamp(1.25rem, 0.52rem + 2.981vw, 2.625rem);
font-weight: var(--weight-bold);
text-shadow: var(--shadow-secondary);
color: var(--white);
margin-left: auto;
margin-right: -0.4em;
margin-top: 1em;
}
@media (max-width: 599px) {
.top-mv-slogan__sub {
margin-right: auto;
width: -moz-fit-content;
width: fit-content;
}
}
.top-mv-slogan__sub::before {
content: "";
display: block;
width: 3em;
height: 1px;
background-color: var(--white);
}
.top-mv-typo {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 10;
translate: 0 56%;
padding-inline: 10px;
}
.top-mv-typo img {
width: 100%;
}
.top-mv__static {
position: relative;
z-index: 100;
font-size: clamp(0.8125rem, 0.65rem + 0.678vw, 1.125rem);
color: var(--white);
padding-top: 40em;
padding-bottom: 20em;
}
@media (max-width: 599px) {
.top-mv__static {
padding-bottom: 15em;
}
}
.top-mv__static p {
font-weight: var(--weight-black);
line-height: 2.22;
text-shadow: var(--shadow-secondary);
}
.top-mv__static p + p {
margin-top: 2.1em;
}
.top-news-section {
padding-top: max(100px, 11.4vw);
}
.top-news {
padding-top: 4px;
border-top: 2px solid var(--black);
border-bottom: 2px solid var(--black);
}
.top-news-head {
display: grid;
align-items: center;
grid-template-columns: 1fr 2fr 1fr;
padding: var(--spacing-grid) 0;
border-top: 1px solid var(--black);
border-bottom: 1px solid var(--black);
}
@media (max-width: 979px) {
.top-news-head {
grid-template-columns: 1fr;
border-bottom: none;
padding-bottom: 0;
}
}
.top-news-head__item {
display: grid;
place-content: center;
height: 100%;
padding: 0 var(--spacing-grid);
}
.top-news-head__item:not(:first-child) {
border-left: 1px solid var(--black);
}
@media (max-width: 979px) {
.top-news-head__item:not(:first-child) {
border-left: none;
}
}
@media (max-width: 979px) {
.top-news-head__title {
padding-bottom: var(--spacing-grid);
border-bottom: 1px solid var(--black);
}
}
@media (max-width: 979px) {
.top-news-head__title .c-hgroup {
padding: 4px 50px;
border-left: 1px solid var(--black);
border-right: 1px solid var(--black);
}
}
@media (max-width: 979px) {
.top-news-head__desc {
padding-top: var(--spacing-grid-lg);
}
}
.top-news-head__desc p {
font-size: clamp(0.6875rem, 0.52rem + 0.678vw, 1rem);
line-height: var(--line-height-relaxed);
}
@media (max-width: 979px) {
.top-news-head__desc p {
text-align: center;
}
}
@media (max-width: 979px) {
.top-news-head__link {
display: none;
}
}
.top-news-body {
padding: var(--spacing-grid) 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 979px) {
.top-news-body {
width: calc(100% + var(--spacing-gutter) * 2);
margin-inline: calc(var(--spacing-gutter) * -1);
padding: var(--spacing-grid-lg) calc(var(--spacing-gutter) - var(--spacing-grid-sm));
overflow: auto;
}
}
@media (max-width: 979px) {
.top-news-body .top-info-article {
width: 200px;
}
}
.top-news-foot {
padding: var(--spacing-grid) 0;
border-top: 1px solid var(--black);
display: grid;
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 979px) {
.top-news-foot {
padding: var(--spacing-grid-lg) 0;
gap: 15px;
}
}
.top-news-more {
display: none;
margin-top: 10px;
padding-bottom: 30px;
}
@media (max-width: 979px) {
.top-news-more {
display: block;
}
}
.top-news-more .c-btn-chevron {
margin-inline: auto;
}
.top-info-article {
padding: 0 var(--spacing-grid-sm);
}
.top-info-article:not(:first-child) {
border-left: 1px solid var(--black);
}
.top-info-article a {
display: block;
transition: opacity 0.2s ease-in;
}
.top-info-article a:focus-visible {
opacity: 0.8;
}
.top-info-article a:focus-visible .top-info-article__thumbnail img {
scale: 1.05;
}
@media (any-hover: hover) {
.top-info-article a:hover {
opacity: 0.8;
}
.top-info-article a:hover .top-info-article__thumbnail img {
scale: 1.05;
}
}
.top-info-article__thumbnail {
margin-bottom: 14px;
border-radius: var(--radius-sm);
overflow: hidden;
}
.top-info-article__thumbnail img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
aspect-ratio: 220/168;
transition: scale 0.2s ease-in;
}
.top-info-article__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-inline: 4px;
}
.top-info-article__meta .c-cat {
font-size: 0.625rem;
}
.top-info-article__meta .c-time {
font-size: clamp(0.6875rem, 0.59rem + 0.407vw, 0.875rem);
}
.top-info-article__title {
font-size: clamp(0.6875rem, 0.59rem + 0.407vw, 0.875rem);
letter-spacing: 0.05em;
font-weight: var(--weight-bold);
line-height: 1.7;
margin-top: 0.4em;
padding-inline: 4px;
}
.top-other-article {
padding: 0 var(--spacing-grid-sm);
}
@media (max-width: 979px) {
.top-other-article {
padding: 0;
}
}
.top-other-article:not(:first-child) {
border-left: 1px solid var(--black);
}
@media (max-width: 979px) {
.top-other-article:not(:first-child) {
border-left: none;
}
}
.top-other-article a {
display: grid;
align-items: end;
grid-template-columns: 2.3fr 2fr;
gap: 12px;
padding: var(--spacing-grid-sm);
background-color: var(--white-opacity-700);
border-radius: var(--radius-sm);
transition: opacity 0.2s ease-in-out;
}
.top-other-article a:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.top-other-article a:hover {
opacity: 0.7;
}
}
@media (max-width: 979px) {
.top-other-article a {
align-items: start;
grid-template-rows: auto 1fr;
grid-template-columns: 1fr;
height: 100%;
}
}
@media (max-width: 599px) {
.top-other-article a {
padding: 7px 7px 14px;
}
}
.top-other-article__thumbnail img {
width: 100%;
border-radius: var(--radius-sm);
}
.top-other-article__text {
min-height: 90px;
}
@media (max-width: 979px) {
.top-other-article__text {
min-height: inherit;
}
}
.top-other-article__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}
@media (max-width: 979px) {
.top-other-article__meta {
justify-content: space-between;
}
}
.top-other-article__meta .c-cat {
font-size: 0.625rem;
}
.top-other-article__meta .c-time {
font-size: clamp(0.6875rem, 0.59rem + 0.407vw, 0.875rem);
color: var(--black);
}
.top-other-article__title {
font-size: clamp(0.6875rem, 0.59rem + 0.407vw, 0.875rem);
letter-spacing: 0.05em;
font-weight: var(--weight-bold);
line-height: 1.7;
color: var(--black);
margin-top: 0.5em;
padding-bottom: 1em;
}
@media (max-width: 979px) {
.top-other-article__title {
padding-bottom: 0;
}
}
.top-insta-section {
position: relative;
padding: max(70px, 7vw) 0 max(100px, 16.7vw);
}
.top-insta-head {
display: flex;
justify-content: space-between;
align-items: end;
gap: 40px;
margin-bottom: clamp(1.875rem, 1.41rem + 1.897vw, 2.75rem);
}
@media (max-width: 599px) {
.top-insta-head {
justify-content: center;
}
}
@media (max-width: 599px) {
.top-insta-head .c-btn-instagram {
display: none;
}
}
.top-insta-head__title {
font-size: 2.125rem;
font-weight: var(--weight-bold);
letter-spacing: 0.05em;
}
.top-insta-embed {
width: 100%;
aspect-ratio: 1000/495;
}
@media (max-width: 479px) {
.top-insta-embed {
aspect-ratio: 1/1;
}
}
.top-insta-embed img {
border-radius: var(--radius-lg);
overflow: hidden;
}
.top-insta-embed #sb_instagram {
padding: 0 !important;
}
.top-insta-embed #sb_instagram #sbi_images {
padding: 0 !important;
}
@media (max-width: 599px) {
.top-insta-embed #sb_instagram #sbi_images {
gap: 5px !important;
}
}
.top-insta-foot {
display: none;
margin-top: 30px;
}
@media (max-width: 599px) {
.top-insta-foot {
display: block;
}
}
.top-insta-foot .c-btn-instagram {
margin-inline: auto;
}
.top-exp-section {
padding: max(100px, 12.5vw) 0 clamp(6.25rem, 4.27rem + 8.13vw, 10rem);
background-color: var(--moss-light);
}
.top-exp-head {
display: grid;
grid-template-columns: 3.1fr 6.5fr;
gap: 24px 40px;
margin-bottom: clamp(1.875rem, -0.04rem + 7.859vw, 5.5rem);
}
@media (max-width: 599px) {
.top-exp-head {
grid-template-columns: 1fr;
}
}
.top-exp-head .c-hgroup {
width: -moz-fit-content;
width: fit-content;
margin-right: auto;
}
@media (max-width: 599px) {
.top-exp-head .c-hgroup {
margin-inline: auto;
}
}
@media (max-width: 599px) {
.top-exp-head__text {
text-align: center;
}
}
.top-exp-head__text h3 {
font-size: clamp(1.25rem, 0.92rem + 1.355vw, 1.875rem);
font-weight: var(--weight-bold);
color: var(--black);
margin-bottom: 0.5em;
text-indent: -0.5em;
}
@media (max-width: 599px) {
.top-exp-head__text h3 {
text-indent: 0;
margin-bottom: 0.8em;
}
}
.top-exp-head__text p {
font-size: clamp(0.6875rem, 0.52rem + 0.678vw, 1rem);
color: var(--black);
line-height: var(--line-height-relaxed);
}
.top-exp-grid {
counter-reset: counter;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
@media (max-width: 979px) {
.top-exp-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 599px) {
.top-exp-grid {
grid-template-columns: 1fr;
gap: 15px;
}
}
.top-exp-grid + .top-exp-grid {
margin-top: 70px;
}
.top-exp-grid__head {
border-radius: var(--radius-lg);
overflow: hidden;
height: 100%;
display: grid;
align-content: center;
background-color: var(--white-opacity-550);
color: var(--black);
padding: 1.9vw 2.4vw;
}
@media (max-width: 979px) {
.top-exp-grid__head {
padding: 24px 30px;
}
}
@media (max-width: 599px) {
.top-exp-grid__head {
align-items: center;
grid-template-columns: 2.3fr 3.34fr;
gap: 20px;
padding: 22px 4vw 28px;
}
}
.top-exp-grid__head h3 {
font-size: clamp(1.0625rem, 0.53rem + 2.168vw, 2.0625rem);
font-weight: var(--weight-bold);
line-height: 1;
}
.top-exp-grid__head span {
font-family: var(--family-secondary);
font-size: clamp(3.4375rem, 1.62rem + 7.453vw, 6.875rem);
font-weight: var(--weight-secondary-regular);
}
.top-exp-grid__head p {
font-size: clamp(0.6875rem, 0.52rem + 0.678vw, 1rem);
line-height: var(--line-height-relaxed);
margin-top: 1.5em;
}
@media (max-width: 599px) {
.top-exp-grid__head p {
margin-top: 0;
}
}
.top-exp-grid__head .c-btn-chevron {
margin-top: 2em;
}
@media (max-width: 599px) {
.top-exp-grid__head .c-btn-chevron {
margin-top: 1em;
}
}
.top-exp-grid__item {
counter-increment: counter;
border-radius: var(--radius-lg);
overflow: hidden;
height: 100%;
position: relative;
}
.top-exp-grid__item img {
position: relative;
z-index: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: scale 0.3s ease-in-out;
}
.top-exp-grid__item a {
display: block;
width: 100%;
height: 100%;
}
.top-exp-grid__item a:focus-visible img {
scale: 1.05;
}
@media (any-hover: hover) {
.top-exp-grid__item a:hover img {
scale: 1.05;
}
}
.top-exp-grid__item a::before {
content: "";
display: block;
position: absolute;
inset: 0;
z-index: 1;
background-image: var(--gradient-primary);
}
.top-exp-grid__item a::after {
content: "";
display: inline-block;
width: 8px;
aspect-ratio: 7/12;
-webkit-mask-image: var(--icon-chevron);
mask-image: var(--icon-chevron);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: var(--white);
position: absolute;
right: 1.9vw;
bottom: 2.4vw;
z-index: 10;
}
@media (max-width: 979px) {
.top-exp-grid__item a::after {
right: 30px;
bottom: 30px;
}
}
@media (max-width: 599px) {
.top-exp-grid__item a::after {
right: 4vw;
bottom: 27px;
width: 5px;
}
}
.top-exp-grid__text {
position: absolute;
bottom: 0;
left: 0;
z-index: 100;
padding: 1.9vw 1.6vw;
}
@media (max-width: 979px) {
.top-exp-grid__text {
padding: 24px 20px;
}
}
@media (max-width: 599px) {
.top-exp-grid__text {
padding: 20px 16px;
}
}
.top-exp-grid__text h4 {
font-size: clamp(1.5625rem, 1.2rem + 1.491vw, 2.25rem);
font-weight: var(--weight-bold);
line-height: 1;
color: var(--white);
margin-bottom: 0.5em;
}
@media (max-width: 599px) {
.top-exp-grid__text h4 {
display: flex;
align-items: center;
gap: 0.8em;
}
}
.top-exp-grid__text h4::before {
content: counter(counter);
display: block;
font-family: var(--family-secondary);
font-weight: var(--weight-secondary-regular);
font-size: clamp(2.5rem, 1.51rem + 4.065vw, 4.375rem);
}
.top-exp-grid__text p {
font-size: clamp(0.6875rem, 0.52rem + 0.678vw, 1rem);
line-height: 1.88;
}
@media (max-width: 599px) {
.top-exp-grid__text p {
background-color: var(--white-opacity-800);
padding: 0.1em 0.6em;
padding-right: 0.2em;
}
}
@media (max-width: 599px) {
.top-exp-grid__text br {
display: none;
}
}
.top-exp-grid__text span {
display: inline;
color: var(--moss);
font-weight: var(--weight-bold);
background-color: var(--white-opacity-800);
padding: 0.05em 0.5em 0.1em;
}
@media (max-width: 599px) {
.top-exp-grid__text span {
padding: 0;
background: none;
}
}
.top-gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
position: relative;
}
@media (max-width: 599px) {
.top-gallery {
display: block;
}
}
.top-gallery__item {
position: relative;
overflow: hidden;
aspect-ratio: 640/400;
}
@media (max-width: 599px) {
.top-gallery__item {
aspect-ratio: 750/472;
}
}
.top-gallery__item img {
display: block;
position: relative;
top: -50px;
width: 100%;
height: calc(100% + 100px);
-o-object-fit: cover;
object-fit: cover;
}
@media (max-width: 599px) {
.top-gallery__item img {
top: -25px;
height: calc(100% + 50px);
}
}
@media (max-width: 599px) {
.top-gallery__item:first-child {
display: none;
}
}
.top-insert {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
padding-inline: 10px;
z-index: 10;
translate: 0 60%;
overflow: hidden;
}
@media (max-width: 599px) {
.top-insert {
padding-inline: 0;
}
}
.top-insert img {
width: 100%;
}
@media (max-width: 599px) {
.top-insert img {
width: 600px;
max-width: inherit;
}
}
.top-guidance-section {
padding: max(100px, 11vw) 0 clamp(4.375rem, 1.4rem + 12.195vw, 10rem);
}
.top-guidance-head {
display: grid;
grid-template-columns: 3.1fr 6.5fr;
gap: 24px 40px;
margin-bottom: clamp(1.875rem, 0.88rem + 4.065vw, 3.75rem);
}
@media (max-width: 599px) {
.top-guidance-head {
grid-template-columns: 1fr;
}
}
.top-guidance-head .c-hgroup {
width: -moz-fit-content;
width: fit-content;
margin-right: auto;
}
@media (max-width: 599px) {
.top-guidance-head .c-hgroup {
margin-inline: auto;
}
}
@media (max-width: 599px) {
.top-guidance-head__text {
text-align: center;
}
}
.top-guidance-head__text h3 {
font-size: clamp(1.25rem, 0.92rem + 1.355vw, 1.875rem);
font-weight: var(--weight-bold);
margin-bottom: 0.5em;
}
@media (max-width: 599px) {
.top-guidance-head__text h3 {
margin-bottom: 0.8em;
}
}
.top-guidance-head__text p {
font-size: clamp(0.6875rem, 0.52rem + 0.678vw, 1rem);
line-height: var(--line-height-relaxed);
}
.top-guidance-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px 10px;
}
@media (max-width: 979px) {
.top-guidance-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 599px) {
.top-guidance-grid {
grid-template-columns: 1fr;
}
}
.top-guidance-grid__item {
display: block;
border-radius: var(--radius-lg);
overflow: hidden;
height: 100%;
position: relative;
}
.top-guidance-grid__item img {
position: relative;
z-index: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: scale 0.3s ease-in-out;
}
.top-guidance-grid__item a {
display: block;
width: 100%;
height: 100%;
}
.top-guidance-grid__item a:focus-visible img {
scale: 1.05;
}
@media (any-hover: hover) {
.top-guidance-grid__item a:hover img {
scale: 1.05;
}
}
.top-guidance-grid__item a::before {
content: "";
display: block;
position: absolute;
inset: 0;
z-index: 1;
background-image: var(--gradient-primary);
}
.top-guidance-grid__text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 100;
padding: 36px 20px;
}
@media (max-width: 599px) {
.top-guidance-grid__text {
padding: 44px 20px;
}
}
.top-guidance-grid__text h4 {
font-size: clamp(1.5625rem, 1.27rem + 1.22vw, 2.125rem);
font-weight: var(--weight-bold);
text-align: center;
color: var(--white);
}
.top-guidance-grid__text p {
font-size: clamp(0.6875rem, 0.52rem + 0.678vw, 1rem);
font-weight: var(--weight-bold);
text-align: center;
color: var(--white);
margin-top: 0.8em;
position: relative;
}
@media (max-width: 599px) {
.top-guidance-grid__text p {
font-weight: var(--weight-regular);
}
}
.top-guidance-grid__text p::after {
content: "";
display: inline-block;
width: 0.4em;
aspect-ratio: 7/12;
-webkit-mask-image: var(--icon-chevron);
mask-image: var(--icon-chevron);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: var(--white);
position: absolute;
top: 0.4em;
right: 0;
}
.top-access-section {
margin-top: clamp(4.375rem, 2.59rem + 7.317vw, 7.75rem);
}
.top-access {
display: grid;
grid-template-columns: 3.25fr 6.34fr;
gap: 20px 40px;
}
@media (max-width: 979px) {
.top-access {
grid-template-columns: 1fr;
}
}
@media (max-width: 979px) {
.top-access__map {
display: none;
}
}
.top-access__map iframe {
display: block;
width: 100%;
height: 100%;
border-radius: var(--radius-lg);
}
.top-access__text .c-hgroup {
margin-bottom: clamp(1.875rem, 1.54rem + 1.355vw, 2.5rem);
}
@media (max-width: 979px) {
.top-access__text .c-hgroup {
display: flex;
align-items: end;
gap: 0.5em;
}
}
.top-access__text iframe {
display: none;
width: 100%;
height: auto;
border-radius: var(--radius-lg);
aspect-ratio: 670/327;
}
@media (max-width: 979px) {
.top-access__text iframe {
display: block;
}
}
.top-access__text h4 {
font-size: clamp(0.6875rem, 0.52rem + 0.678vw, 1rem);
font-weight: var(--weight-regular);
line-height: var(--line-height-relaxed);
margin-top: 2em;
margin-bottom: 0.2em;
}
@media (max-width: 979px) {
.top-access__text h4 {
margin-top: 1em;
}
}
.top-access__text > p {
font-size: clamp(0.6875rem, 0.52rem + 0.678vw, 1rem);
line-height: var(--line-height-relaxed);
}
.top-access__text dl {
display: grid;
grid-template-columns: max-content 1fr max-content;
align-items: center;
gap: 0 0.6em;
font-size: clamp(0.6875rem, 0.59rem + 0.407vw, 0.875rem);
font-weight: var(--weight-regular);
line-height: var(--line-height-relaxed);
max-width: 300px;
}
.top-access__text dl > div {
display: block;
width: 100%;
height: 1px;
background-color: #C4C4C4;
}
.top-access__address {
margin-bottom: 3em;
}
@media (max-width: 979px) {
.top-access__address {
margin-bottom: 1em;
margin-top: 1.8em;
}
}
.top-bnr-section {
margin-top: clamp(4.375rem, 1.73rem + 10.84vw, 9.375rem);
}
.top-bnr {
display: grid;
grid-template-columns: 4.1fr 5.9fr;
border-radius: var(--radius-lg);
overflow: hidden;
}
@media (max-width: 979px) {
.top-bnr {
grid-template-columns: 1fr;
}
}
.top-bnr__text {
display: grid;
align-content: center;
background-color: var(--white-opacity-800);
padding: 40px 56px;
}
@media (min-width: 1281px) {
.top-bnr__text {
justify-content: center;
}
}
@media (max-width: 599px) {
.top-bnr__text {
padding: 16px 20px;
}
}
.top-bnr__text a {
display: grid;
align-items: center;
grid-template-columns: 1fr max-content;
gap: 1em;
font-size: clamp(0.9375rem, 0.57rem + 1.491vw, 1.625rem);
font-weight: var(--weight-bold);
color: var(--black);
padding-bottom: 0.7em;
position: relative;
}
.top-bnr__text a:focus-visible::after {
translate: 50% 0;
}
@media (any-hover: hover) {
.top-bnr__text a:hover::after {
translate: 50% 0;
}
}
@media (min-width: 1281px) {
.top-bnr__text a {
min-width: 480px;
}
}
.top-bnr__text a::before {
content: "";
display: block;
width: 100%;
height: 1px;
background-color: var(--black);
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
}
.top-bnr__text a::after {
content: "";
display: inline-block;
width: 0.3em;
aspect-ratio: 7/12;
-webkit-mask-image: var(--icon-chevron);
mask-image: var(--icon-chevron);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: var(--black);
transition: translate 0.2s ease-in;
}
.top-bnr__text p {
font-size: clamp(0.6875rem, 0.52rem + 0.678vw, 1rem);
font-weight: var(--weight-bold);
line-height: var(--line-height-relaxed);
margin-top: 1em;
color: var(--black);
}
.top-bnr__img {
order: -1;
}
.top-bnr__img img, .top-bnr__img picture {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.p-header {
margin-top: var(--header-height);
}
@media (max-width: 979px) {
.p-header {
margin-top: var(--header-height-sm);
}
}
.p-header__title {
font-size: clamp(1.5rem, 0.77rem + 2.981vw, 2.875rem);
font-weight: var(--weight-bold);
padding: clamp(2.5rem, 0.52rem + 8.13vw, 6.25rem) 0 40px;
}
.p-header__anchor {
max-width: 95vw;
margin-inline: auto;
background-color: var(--moss);
padding: 20px;
}
@media (max-width: 599px) {
.p-header__anchor {
padding: 10px;
}
}
.p-header__anchor ul {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0 20px;
}
.p-header__anchor li {
display: block;
}
.p-header__anchor a {
display: grid;
grid-template-columns: 1fr max-content;
gap: 0.65em;
align-items: center;
font-size: clamp(0.75rem, 0.62rem + 0.542vw, 1rem);
font-weight: var(--weight-bold);
color: var(--white);
padding: 0.5em 1em;
}
.p-header__anchor a::after {
content: "";
display: inline-block;
width: 0.4em;
aspect-ratio: 7/12;
-webkit-mask-image: var(--icon-chevron);
mask-image: var(--icon-chevron);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: var(--white);
transition: translate 0.2s ease-in;
}
.p-header__anchor a:focus-visible::after {
translate: 40% 0;
}
@media (any-hover: hover) {
.p-header__anchor a:hover::after {
translate: 40% 0;
}
}
.p-header__anchor .is-current a {
color: var(--black);
background-color: var(--white-opacity-700);
border-radius: var(--radius-full);
}
.p-header__anchor .is-current a::after {
background-color: var(--black);
}
.p-bottom-breadcrumb {
padding-bottom: clamp(1.25rem, 0.59rem + 2.71vw, 2.5rem);
}
.p-bottom-breadcrumb .c-breadcrumb__inner a {
color: var(--black);
}
.p-bottom-breadcrumb .c-breadcrumb__inner a > span {
color: var(--black);
}
.p-bottom-breadcrumb .c-breadcrumb__inner li:not(:first-child)::before {
background-color: var(--black);
}
.p-spacer {
padding: clamp(0.625rem, -0.37rem + 4.065vw, 2.5rem) 0 clamp(4.375rem, 3.38rem + 4.065vw, 6.25rem);
}
:root:has(.p-header__anchor) .p-spacer {
padding-top: clamp(2.5rem, 0.52rem + 8.13vw, 6.25rem);
}
.p-cover {
position: relative;
}
.p-cover__wrapper {
position: absolute;
inset: 0;
z-index: 100;
display: grid;
place-content: center;
}
.p-cover__title {
font-size: clamp(1.875rem, 1.54rem + 1.355vw, 2.5rem);
font-weight: var(--weight-bold);
color: var(--white);
writing-mode: vertical-rl;
letter-spacing: 1em;
}
.p-cover__hgroup {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: clamp(2rem, 1.41rem + 2.439vw, 3.125rem);
}
.p-cover__hgroup p {
font-size: clamp(2rem, 1.01rem + 4.065vw, 3.875rem);
font-weight: var(--weight-regular);
color: var(--white);
letter-spacing: 0.37em;
line-height: 1;
border-right: 1px solid var(--white);
padding-bottom: 0.1em;
padding-right: 0.5em;
margin-right: 0.7em;
}
.p-cover__hgroup h1 {
font-size: clamp(1.125rem, 0.86rem + 1.084vw, 1.625rem);
font-weight: var(--weight-bold);
color: var(--white);
letter-spacing: 0.55em;
}
.p-cover__lead p {
font-size: clamp(0.75rem, 0.62rem + 0.542vw, 1rem);
font-weight: var(--weight-bold);
line-height: var(--line-height-relaxed);
color: var(--white);
}
.p-cover__lead p + p {
margin-top: 1.8em;
}
.p-cover__bg {
position: relative;
z-index: 1;
}
.p-cover__bg img {
width: 100%;
height: 100vh;
min-height: 600px;
-o-object-fit: cover;
object-fit: cover;
}
.p-cover__breadcrumb {
position: absolute;
bottom: 50px;
right: 4vw;
z-index: 100;
}
@media (max-width: 599px) {
.p-cover__breadcrumb {
bottom: 20px;
}
}
.p-cover__breadcrumb .u-wrapper {
padding: 0;
}
.error404 h2 {
font-size: 1.25rem;
font-weight: var(--weight-bold);
margin-bottom: 1em;
}
.error404 p {
font-size: clamp(0.875rem, 0.74rem + 0.542vw, 1.125rem);
}
.error404 a {
margin-top: 2em;
}
.news-section + .news-section {
margin-top: clamp(3.75rem, 1.11rem + 10.84vw, 8.75rem);
}
.news-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding-bottom: 16px;
border-bottom: 4px solid var(--black);
margin-bottom: 4px;
}
.news-head h2 {
font-size: clamp(1.25rem, 0.92rem + 1.355vw, 1.875rem);
font-weight: var(--weight-bold);
}
.news-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0 40px;
border-top: 1px solid var(--black);
padding-top: 10px;
}
@media (max-width: 599px) {
.news-list {
grid-template-columns: 1fr;
}
}
.news-article a {
display: grid;
grid-template-columns: 1.8fr 2.8fr;
gap: 24px;
padding: 20px 0;
border-bottom: 1px solid var(--black);
}
@media (max-width: 599px) {
.news-article a {
gap: 18px;
}
}
.news-article a:focus-visible .news-article__thumbnail img {
scale: 1.05;
}
@media (any-hover: hover) {
.news-article a:hover .news-article__thumbnail img {
scale: 1.05;
}
}
.news-article__thumbnail {
border-radius: var(--radius-sm);
overflow: hidden;
}
.news-article__thumbnail img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
aspect-ratio: 180/136;
transition: scale 0.2s ease-in;
}
.news-article__title {
font-size: clamp(0.8125rem, 0.65rem + 0.678vw, 1.125rem);
font-weight: var(--weight-bold);
line-height: var(--line-height-normal);
margin-top: 0.5em;
}
.news-article__meta {
display: flex;
align-items: center;
gap: 16px;
}
.single-header {
max-width: var(--wp--style--global--content-size);
margin-inline: auto;
padding: 30px 0;
border-top: 1px solid var(--black);
border-bottom: 1px solid var(--black);
position: relative;
}
.single-header::before {
content: "";
position: absolute;
top: -8px;
left: 0;
width: 100%;
height: 3px;
background-color: var(--black);
}
.single-header h1 {
font-size: clamp(1.25rem, 1.12rem + 0.542vw, 1.5rem);
font-weight: var(--weight-bold);
letter-spacing: 0.05em;
margin-top: 0.5em;
}
.single-header__meta {
display: flex;
align-items: center;
gap: 16px;
}
.single-body {
padding: 30px 0;
}
.single-footer {
max-width: 700px;
margin-inline: auto;
margin-top: clamp(1.875rem, -0.44rem + 9.485vw, 6.25rem);
}
.single-footer__sns {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.single-footer__sns li {
display: block;
}
.single-footer__sns a {
display: block;
transition: opacity 0.2s ease-in-out;
}
.single-footer__sns a:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.single-footer__sns a:hover {
opacity: 0.7;
}
}
.single-footer__nav {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: clamp(1.25rem, 0.85rem + 1.626vw, 2rem);
}
@media (max-width: 599px) {
.single-footer__nav {
gap: 10px;
}
}
.single-footer__nav a, .single-footer__nav span {
display: flex;
align-items: center;
justify-content: center;
gap: 0.7em;
font-size: clamp(0.75rem, 0.62rem + 0.542vw, 1rem);
font-weight: var(--weight-bold);
background-color: var(--white-opacity-700);
border-radius: var(--radius-lg);
padding: 1.5em 1em;
color: var(--black);
}
.single-footer__nav a::before, .single-footer__nav a::after, .single-footer__nav span::before, .single-footer__nav span::after {
content: "";
display: inline-block;
width: 1.1em;
aspect-ratio: 1/1;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.single-footer__nav span {
opacity: 0.5;
pointer-events: none;
}
.single-footer__nav a {
transition: background-color 0.2s ease-in;
}
.single-footer__nav a:focus-visible {
background-color: var(--white);
}
@media (any-hover: hover) {
.single-footer__nav a:hover {
background-color: var(--white);
}
}
.single-footer__nav .prev::before {
-webkit-mask-image: var(--icon-prev-circle);
mask-image: var(--icon-prev-circle);
background-color: var(--black);
}
.single-footer__nav .next::after {
-webkit-mask-image: var(--icon-next-circle);
mask-image: var(--icon-next-circle);
background-color: var(--black);
}
.single-footer__back {
display: flex;
align-items: center;
justify-content: center;
gap: 1em;
background-color: #2F362D;
width: 100%;
font-size: clamp(0.75rem, 0.62rem + 0.542vw, 1rem);
font-weight: var(--weight-bold);
color: var(--white);
border-radius: var(--radius-lg);
padding: 1.5em 1em;
margin-top: 26px;
transition: background-color 0.2s ease-in;
}
.single-footer__back:focus-visible {
background-color: var(--black-solid);
}
.single-footer__back:focus-visible::after {
translate: 40% 0;
}
@media (any-hover: hover) {
.single-footer__back:hover {
background-color: var(--black-solid);
}
.single-footer__back:hover::after {
translate: 40% 0;
}
}
@media (max-width: 599px) {
.single-footer__back {
margin-top: 10px;
}
}
.single-footer__back::before, .single-footer__back::after {
content: "";
display: inline-block;
width: 0.4em;
aspect-ratio: 7/12;
}
.single-footer__back::after {
-webkit-mask-image: var(--icon-chevron);
mask-image: var(--icon-chevron);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: var(--white);
transition: translate 0.2s ease-in;
}
.contact-section {
padding: clamp(0.625rem, -0.37rem + 4.065vw, 2.5rem) 0 clamp(4.375rem, 3.38rem + 4.065vw, 6.25rem);
}
.contact-section__wrapper {
max-width: 62.5vw;
margin-inline: auto;
}
@media (max-width: 1280px) {
.contact-section__wrapper {
max-width: 800px;
}
}
.contact-lead {
font-size: clamp(0.75rem, 0.62rem + 0.542vw, 1rem);
line-height: var(--line-height-relaxed);
}
.contact-info {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 24px;
}
@media (max-width: 599px) {
.contact-info {
grid-template-columns: 1fr;
gap: 15px;
}
}
.contact-info li {
display: block;
text-align: center;
color: var(--black);
border-radius: var(--radius-lg);
background-color: var(--white-opacity-700);
padding: 40px 20px;
}
@media (max-width: 599px) {
.contact-info li {
padding: 24px 20px;
}
}
.contact-info h2 {
font-size: clamp(0.875rem, 0.81rem + 0.271vw, 1rem);
margin-bottom: 0.9em;
}
.contact-info a, .contact-info span {
position: relative;
display: grid;
grid-template-columns: max-content 1fr;
align-items: center;
width: -moz-fit-content;
width: fit-content;
margin-inline: auto;
gap: 0.2em;
font-family: var(--family-secondary);
font-size: clamp(1.5625rem, 1.2rem + 1.491vw, 2.25rem);
font-weight: var(--weight-secondary-semibold);
letter-spacing: 0.05em;
line-height: var(--line-height-tight);
color: var(--black);
}
.contact-info a::before, .contact-info span::before {
content: "";
display: inline-block;
height: auto;
background-color: var(--black);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.contact-info p {
font-size: clamp(0.75rem, 0.65rem + 0.407vw, 0.9375rem);
font-weight: var(--weight-bold);
margin-top: 0.9em;
}
.contact-info__tel a::before {
width: 0.7em;
aspect-ratio: 24/26;
-webkit-mask-image: var(--icon-tel);
mask-image: var(--icon-tel);
}
.contact-info__fax span::before {
width: 0.7em;
aspect-ratio: 30/25;
-webkit-mask-image: var(--icon-fax);
mask-image: var(--icon-fax);
}
.contact-form {
margin-top: clamp(3.75rem, 2.43rem + 5.42vw, 6.25rem);
}
.contact-form .fieldset-wrapper {
display: flex;
padding: clamp(1.25rem, 0.59rem + 2.71vw, 2.5rem) 0 clamp(1.5rem, 0.97rem + 2.168vw, 2.5rem);
border-bottom: 1px solid var(--border-tertiary);
}
.contact-form fieldset {
display: block;
margin-top: clamp(1.75rem, 1.22rem + 2.168vw, 2.75rem);
}
.contact-form legend {
display: block;
font-size: clamp(0.875rem, 0.74rem + 0.542vw, 1.125rem);
font-weight: var(--weight-bold);
position: relative;
margin-top: 1em;
margin-bottom: 0.8em;
}
@media (max-width: 979px) {
.contact-form legend {
width: 100%;
margin-top: 0;
margin-bottom: 12px;
}
}
.contact-form legend.must::after {
content: "必須";
display: inline-block;
font-size: clamp(0.625rem, 0.56rem + 0.271vw, 0.75rem);
font-weight: var(--weight-bold);
letter-spacing: 0.05em;
text-align: center;
white-space: nowrap;
color: var(--white);
background-color: var(--black);
border-radius: var(--radius-full);
padding: 0.1em 1em 0.2em;
margin-left: 1.5em;
translate: 0 -0.1em;
}
.contact-form legend span {
display: block;
font-weight: var(--weight-regular);
font-size: clamp(0.6875rem, 0.52rem + 0.678vw, 1rem);
margin-top: 0.5em;
}
.contact-form fieldset:has(.wpcf7-checkbox, .wpcf7-radio) legend {
margin-top: 0;
}
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form input[type=tel],
.contact-form textarea,
.contact-form select {
width: 100%;
background-color: var(--white);
border: 1px solid var(--gray);
border-radius: var(--radius-sm);
padding: 0.7em;
padding-left: 1.2em;
font-size: 1rem;
line-height: var(--line-height-normal);
}
.contact-form input[type=text]::-moz-placeholder, .contact-form input[type=email]::-moz-placeholder, .contact-form input[type=tel]::-moz-placeholder, .contact-form textarea::-moz-placeholder, .contact-form select::-moz-placeholder {
font-size: clamp(0.875rem, 0.81rem + 0.271vw, 1rem);
color: #C4C4C4;
}
.contact-form input[type=text]::placeholder,
.contact-form input[type=email]::placeholder,
.contact-form input[type=tel]::placeholder,
.contact-form textarea::placeholder,
.contact-form select::placeholder {
font-size: clamp(0.875rem, 0.81rem + 0.271vw, 1rem);
color: #C4C4C4;
}
.contact-form input[type=text]:focus,
.contact-form input[type=email]:focus,
.contact-form input[type=tel]:focus,
.contact-form textarea:focus,
.contact-form select:focus {
background-color: var(--beige);
}
.contact-form textarea {
display: block;
min-height: 450px;
resize: vertical;
}
@media (max-width: 599px) {
.contact-form textarea {
min-height: 300px;
}
}
.contact-form label {
display: flex;
align-items: center;
gap: 0.45em;
cursor: pointer;
}
.contact-form label img {
width: 100%;
border: 2px solid var(--border-primary);
border-radius: var(--radius-sm);
margin-bottom: 0.5em;
}
@media (max-width: 599px) {
.contact-form label img {
margin-bottom: 0.2em;
}
}
.contact-form input[type=radio] {
display: grid;
place-content: center;
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
border: 1px solid var(--gray-dark);
border-radius: 50%;
background-color: var(--white);
margin: 0;
padding: 0;
cursor: pointer;
}
.contact-form input[type=radio]::after {
content: "";
display: block;
width: 12px;
height: 12px;
background-color: var(--black);
border-radius: 50%;
opacity: 0;
}
.contact-form input[type=radio]:checked::after {
opacity: 1;
}
.contact-form .field-postcode {
max-width: 190px;
}
.contact-form .fieldset-flex {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0 40px;
}
@media (max-width: 599px) {
.contact-form .fieldset-flex {
grid-template-columns: 1fr;
}
}
.contact-form input[type=checkbox] {
display: grid;
place-content: center;
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
border: 1px solid var(--gray-dark);
border-radius: 3px;
background-color: var(--white);
margin: 0;
padding: 0;
cursor: pointer;
background-image: url("../img/common/check.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 10px;
}
.contact-form input[type=checkbox]:checked {
background-color: var(--black);
}
.contact-form .wpcf7-acceptance b {
text-decoration: underline;
text-underline-offset: 0.2em;
}
.contact-form .wpcf7-acceptance label {
gap: 0.7em;
justify-content: center;
}
.contact-form .privacy {
margin-top: clamp(2.1875rem, 1.69rem + 2.033vw, 3.125rem);
margin-bottom: clamp(1.875rem, 1.41rem + 1.897vw, 2.75rem);
text-align: center;
}
.contact-form .privacy a {
text-decoration: underline;
text-underline-offset: 0.2em;
}
.contact-form .privacy a:focus-visible {
text-decoration: none;
}
@media (any-hover: hover) {
.contact-form .privacy a:hover {
text-decoration: none;
}
}
.contact-form .submit {
margin-top: 24px;
width: 100%;
max-width: clamp(12.5rem, 5.89rem + 27.1vw, 25rem);
margin-inline: auto;
position: relative;
}
.contact-form .submit::after {
position: absolute;
top: 50%;
right: 24px;
translate: 0 -50%;
z-index: 10;
content: "";
display: inline-block;
width: 7px;
-webkit-mask-image: var(--icon-chevron);
mask-image: var(--icon-chevron);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
aspect-ratio: 7/12;
background-color: var(--white);
}
.contact-form .submit input[type=submit] {
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
border: none;
margin: 0;
width: 100%;
display: block;
color: var(--white);
font-size: clamp(0.875rem, 0.81rem + 0.271vw, 1rem);
font-weight: var(--weight-bold);
letter-spacing: 0.05em;
text-align: center;
border-radius: var(--radius-sm);
background-color: var(--black);
padding: 1.4em 2em 1.4em 2em;
transition: opacity 0.2s ease-in-out;
}
.contact-form .submit input[type=submit]:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.contact-form .submit input[type=submit]:hover {
opacity: 0.7;
}
}
.contact-form .submit .wpcf7-spinner {
position: absolute;
top: 50%;
left: 24px;
margin: 0;
translate: 0 -50%;
}
.contact-form input[aria-invalid=true] {
border-color: var(--red);
}
.contact-form .wpcf7-form-control-wrap + .wpcf7-form-control-wrap {
display: block;
margin-top: clamp(0.625rem, 0.46rem + 0.678vw, 0.9375rem);
}
.contact-form .wpcf7-list-item {
margin: 0;
display: block;
}
.contact-form .wpcf7-list-item-label {
font-size: clamp(0.8125rem, 0.71rem + 0.407vw, 1rem);
font-weight: var(--weight-bold);
}
.contact-form .wpcf7-not-valid-tip {
color: var(--red);
font-size: clamp(0.75rem, 0.68rem + 0.271vw, 0.875rem);
margin-top: 0.5em;
}
.contact-form .wpcf7-radio .wpcf7-list-item + .wpcf7-list-item {
margin-top: clamp(0.75rem, 0.49rem + 1.084vw, 1.25rem);
}
.contact-form .fieldset-custom .wpcf7-checkbox {
margin-top: 0;
}
.contact-form .fieldset-custom .wpcf7-list-item {
display: flex;
align-items: center;
gap: 0.45em;
}
.contact-form .fieldset-custom .wpcf7-list-item span {
font-size: clamp(0.875rem, 0.81rem + 0.271vw, 1rem);
}
.contact-form .wpcf7-turnstile {
margin-bottom: clamp(1.5rem, 0.84rem + 2.71vw, 2.75rem);
}
.using-mouse .contact-form input:focus-visible, .using-mouse .contact-form textarea:focus-visible, .using-mouse .contact-form select:focus-visible {
outline: none;
}
.exp-section {
padding: clamp(6.25rem, 4.93rem + 5.42vw, 8.75rem) 0;
}
.exp-section + .exp-section {
padding-top: 0;
}
.exp-section__wrapper {
position: relative;
padding-top: clamp(2.5rem, 1.84rem + 2.71vw, 3.75rem);
border-top: 1px solid var(--black);
}
.exp-section__wrapper::before {
content: "";
position: absolute;
top: -8px;
left: 0;
width: 100%;
height: 3px;
background-color: var(--black);
}
.exp-headline {
font-size: clamp(1.25rem, 0.92rem + 1.355vw, 1.875rem);
font-weight: var(--weight-bold);
text-align: center;
line-height: var(--line-height-snug);
}
.exp-lead {
font-size: clamp(0.75rem, 0.62rem + 0.542vw, 1rem);
line-height: var(--line-height-relaxed);
text-align: center;
margin-top: 1em;
}
.exp-grid {
counter-reset: counter;
margin-top: clamp(2rem, 0.94rem + 4.336vw, 4rem);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
@media (max-width: 599px) {
.exp-grid {
grid-template-columns: 1fr;
gap: 20px;
}
}
.exp-grid__item {
counter-increment: counter;
border-radius: var(--radius-lg);
overflow: hidden;
background-color: var(--white-opacity-700);
padding: clamp(2rem, 1.21rem + 3.252vw, 3.5rem) clamp(1.25rem, 0.06rem + 4.878vw, 3.5rem) clamp(2.5rem, 1.97rem + 2.168vw, 3.5rem);
color: var(--black);
}
.exp-grid__item h3 {
font-size: clamp(1.25rem, 1.12rem + 0.542vw, 1.5rem);
font-weight: var(--weight-bold);
letter-spacing: 0.2em;
text-align: center;
}
.exp-grid__item h3::before {
content: counter(counter);
display: block;
width: -moz-fit-content;
width: fit-content;
margin-inline: auto;
font-family: var(--family-secondary);
font-size: clamp(2.5rem, 1.84rem + 2.71vw, 3.75rem);
font-weight: var(--weight-secondary-regular);
line-height: 1;
padding: 0 0.55em;
border-bottom: 1px solid var(--black);
padding-bottom: 10px;
margin-bottom: 10px;
}
.exp-grid__item p {
font-size: clamp(0.6875rem, 0.52rem + 0.678vw, 1rem);
line-height: var(--line-height-relaxed);
margin-top: 1.6em;
}
.exp-card {
border-radius: var(--radius-lg);
background-color: var(--white-opacity-700);
padding: clamp(1.875rem, 0.88rem + 4.065vw, 3.75rem) var(--spacing-gutter);
margin-top: clamp(2.5rem, 1.84rem + 2.71vw, 3.75rem);
}
.exp-lead + .exp-card {
margin-top: clamp(2.5rem, 1.51rem + 4.065vw, 4.375rem);
}
.exp-card__grid {
display: grid;
grid-template-columns: 3.7fr 4.6fr;
gap: clamp(1.25rem, 0.26rem + 4.065vw, 3.125rem);
color: var(--black);
}
@media (max-width: 599px) {
.exp-card__grid {
grid-template-columns: 1fr;
}
}
.exp-card__grid h3 {
font-size: clamp(1.125rem, 0.86rem + 1.084vw, 1.625rem);
font-weight: var(--weight-bold);
line-height: var(--line-height-relaxed);
padding-left: 0.9em;
border-left: 2px solid var(--black);
margin-bottom: 1em;
}
.exp-card__grid p {
font-size: clamp(0.6875rem, 0.52rem + 0.678vw, 1rem);
line-height: var(--line-height-relaxed);
}
.exp-card__grid img {
width: 100%;
border-radius: var(--radius-lg);
}
.exp-card__table {
width: 100%;
border-collapse: collapse;
margin-top: clamp(1.25rem, 0.92rem + 1.355vw, 1.875rem);
}
.exp-card__table th, .exp-card__table td {
font-size: clamp(0.6875rem, 0.52rem + 0.678vw, 1rem);
border-top: 1px solid var(--gray);
border-bottom: 1px solid var(--gray);
padding: 0.55em 2em;
line-height: var(--line-height-relaxed);
vertical-align: top;
}
@media (max-width: 599px) {
.exp-card__table th, .exp-card__table td {
padding: 0.55em 1em;
}
}
.exp-card__table th {
text-align: center;
background-color: var(--black);
color: var(--white);
font-weight: var(--weight-regular);
width: 164px;
}
@media (max-width: 599px) {
.exp-card__table th {
width: -moz-fit-content;
width: fit-content;
white-space: nowrap;
}
}
.exp-card__table td {
color: var(--black);
}
.exp-card__table a {
color: var(--black);
text-decoration: underline;
text-underline-offset: 0.1em;
}
.exp-card__table a:focus-visible {
text-decoration: none;
}
@media (any-hover: hover) {
.exp-card__table a:hover {
text-decoration: none;
}
}
.exp-card__table a[target=_blank]::after {
content: "";
display: inline-block;
width: 1em;
aspect-ratio: 1/1;
background-image: url(../img/common/outerlink.svg);
background-size: contain;
background-repeat: no-repeat;
margin-left: 0.5em;
margin-right: 0.7em;
vertical-align: middle;
translate: 0 -0.1em;
}
.exp-card__notice {
margin-top: 1.2em;
font-size: clamp(0.6875rem, 0.52rem + 0.678vw, 1rem);
color: var(--black);
}
.exp-card__notice::before {
content: "※";
display: inline;
color: var(--black);
font-size: 1em;
}
.precincts-head {
padding: clamp(2.5rem, 1.51rem + 4.065vw, 4.375rem) 0 clamp(5rem, 3.68rem + 5.42vw, 7.5rem);
background-color: var(--moss-light);
}
.precincts-head__wrapper {
max-width: 1000px;
margin-inline: auto;
}
.precincts-head__lead {
font-size: clamp(0.75rem, 0.62rem + 0.542vw, 1rem);
line-height: var(--line-height-relaxed);
}
.precincts-head__nav {
container-type: inline-size;
margin-top: clamp(2.5rem, 1.51rem + 4.065vw, 4.375rem);
position: relative;
}
.precincts-head__nav img {
width: 100%;
position: relative;
z-index: 1;
}
.precincts-head__nav li {
position: absolute;
display: block;
z-index: 10;
}
.precincts-head__nav a {
display: grid;
place-content: center;
border-radius: 50%;
aspect-ratio: 1/1;
width: 5.1cqw;
font-size: 3.4cqw;
font-family: var(--family-secondary);
font-weight: var(--weight-secondary-regular);
color: var(--white);
background-color: var(--black);
transition: color 0.2s ease-in, background-color 0.2s ease-in;
}
.precincts-head__nav a:focus-visible {
background-color: var(--white);
color: var(--black);
}
@media (any-hover: hover) {
.precincts-head__nav a:hover {
background-color: var(--white);
color: var(--black);
}
}
.precincts-head__nav [data-index="1"] {
top: 45.5cqw;
left: 62.6cqw;
}
.precincts-head__nav [data-index="2"] {
top: 23.6cqw;
left: 47.8cqw;
}
.precincts-head__nav [data-index="3"] {
top: 23cqw;
left: 19.3cqw;
}
.precincts-head__nav [data-index="4"] {
top: 33.2cqw;
left: 66.1cqw;
}
.precincts-head__nav [data-index="5"] {
top: 20.6cqw;
left: 67.1cqw;
}
.precincts-head__nav [data-index="6"] {
top: 59.2cqw;
left: 12.8cqw;
}
.precincts-head__nav [data-index="7"] {
top: 20.6cqw;
left: 72.7cqw;
}
.precincts-head__nav [data-index="8"] {
top: 13cqw;
left: 37.4cqw;
}
.precincts-head__nav [data-index="9"] {
top: 32.2cqw;
left: 88.8cqw;
}
.precincts-head__nav [data-index="10"] {
top: 45.5cqw;
left: 68.6cqw;
}
.precincts-head__nav [data-index="11"] {
top: 0.8cqw;
left: 38cqw;
}
.precincts-head__nav [data-index="12"] {
top: 6.6cqw;
left: 38cqw;
}
.precincts-head__nav [data-index="13"] {
top: 33.5cqw;
left: 55.9cqw;
}
.precincts-section-outer {
padding: clamp(5rem, 3.68rem + 5.42vw, 7.5rem) 0 clamp(5rem, 4.34rem + 2.71vw, 6.25rem);
}
.precincts-section + .precincts-section {
margin-top: clamp(5rem, 3.35rem + 6.775vw, 8.125rem);
}
.precincts-section:first-of-type .precincts-headline {
padding-top: clamp(2.5rem, 1.51rem + 4.065vw, 4.375rem);
border-top: 1px solid var(--black);
position: relative;
}
.precincts-section:first-of-type .precincts-headline::before {
content: "";
position: absolute;
top: -8px;
left: 0;
width: 100%;
height: 3px;
background-color: var(--black);
}
.precincts-headline {
display: flex;
align-items: center;
width: 100%;
font-size: clamp(1.25rem, 0.92rem + 1.355vw, 1.875rem);
font-weight: var(--weight-bold);
letter-spacing: 0.3em;
writing-mode: vertical-rl;
margin-block: auto;
margin-bottom: 1.2em;
}
.precincts-lead {
font-size: clamp(0.75rem, 0.62rem + 0.542vw, 1rem);
line-height: var(--line-height-relaxed);
text-align: center;
}
.precincts-list {
--_gap: 40px;
display: flex;
flex-wrap: wrap;
row-gap: 50px;
margin-left: calc(var(--_gap) * -1);
margin-top: clamp(2rem, 0.94rem + 4.336vw, 4rem);
}
@media (max-width: 599px) {
.precincts-list {
--_gap: 0;
row-gap: 40px;
}
}
.precincts-list .precincts-list__item {
padding-left: var(--_gap);
}
.precincts-list__item {
display: flex;
flex-direction: column;
}
.precincts-list__item[data-colspan="1"] {
width: 100%;
}
.precincts-list__item[data-colspan="2"] {
width: 50%;
}
@media (max-width: 599px) {
.precincts-list__item[data-colspan="2"] {
width: 100%;
}
}
.precincts-list__item[data-colspan="3"] {
width: 33.3333333333%;
}
@media (max-width: 979px) {
.precincts-list__item[data-colspan="3"] {
width: 50%;
}
}
@media (max-width: 599px) {
.precincts-list__item[data-colspan="3"] {
width: 100%;
}
}
.precincts-list__item::after {
content: "";
display: block;
width: 100%;
height: 1px;
background-color: var(--black);
margin-top: auto;
}
.precincts-list__item img {
width: 100%;
border-radius: var(--radius-lg);
}
.precincts-list__item h3 {
display: grid;
grid-template-columns: max-content 1fr;
align-items: center;
gap: 0.5em;
font-size: clamp(1.125rem, 0.86rem + 1.084vw, 1.625rem);
font-weight: var(--weight-bold);
margin-top: 1em;
margin-bottom: 0.7em;
}
.precincts-list__item span {
display: grid;
place-content: center;
width: 1.75em;
aspect-ratio: 1/1;
border-radius: 50%;
color: var(--white);
background-color: var(--black);
font-family: var(--family-secondary);
font-size: clamp(0.875rem, 0.64rem + 0.949vw, 1.3125rem);
font-weight: var(--weight-secondary-regular);
}
.precincts-list__item p {
font-size: clamp(0.6875rem, 0.52rem + 0.678vw, 1rem);
line-height: var(--line-height-relaxed);
padding-bottom: 1.8em;
}
.events-section {
padding: clamp(4.375rem, 2.06rem + 9.485vw, 8.75rem) 0;
}
.events-section + .events-section {
padding-top: 0;
margin-top: 8px;
}
.events-head {
display: grid;
grid-template-columns: 2fr 8fr;
align-items: center;
padding: clamp(1.25rem, 0.59rem + 2.71vw, 2.5rem) 0;
border-top: 1px solid var(--black);
border-bottom: 1px solid var(--black);
position: relative;
}
@media (max-width: 599px) {
.events-head {
grid-template-columns: 1fr;
border-bottom: none;
}
}
.events-head::before {
content: "";
position: absolute;
top: -8px;
left: 0;
width: 100%;
height: 3px;
background-color: var(--black);
}
.events-head__title {
display: grid;
align-content: center;
}
@media (max-width: 599px) {
.events-head__title {
padding-bottom: clamp(1.25rem, 0.59rem + 2.71vw, 2.5rem);
border-bottom: 1px solid var(--black);
}
}
.events-head__title h2 {
font-size: clamp(1.375rem, 1.11rem + 1.084vw, 1.875rem);
font-weight: var(--weight-bold);
}
@media (max-width: 599px) {
.events-head__title h2 {
padding: 0 1.5em;
border-left: 1px solid var(--black);
border-right: 1px solid var(--black);
text-align: center;
width: -moz-fit-content;
width: fit-content;
margin-inline: auto;
}
}
.events-head__lead {
border-left: 1px solid var(--black);
display: grid;
align-content: center;
justify-content: start;
padding-left: clamp(0.625rem, -3.14rem + 15.447vw, 7.75rem);
font-size: clamp(0.6875rem, 0.52rem + 0.678vw, 1rem);
min-height: 6em;
}
@media (min-width: 1281px) {
.events-head__lead {
justify-content: center;
padding-left: 0;
}
}
@media (max-width: 599px) {
.events-head__lead {
display: block;
min-height: inherit;
border-left: none;
padding-left: 0;
padding-top: clamp(1.25rem, 0.59rem + 2.71vw, 2.5rem);
}
}
.events-head__lead p {
font-size: clamp(0.6875rem, 0.52rem + 0.678vw, 1rem);
line-height: var(--line-height-relaxed);
width: -moz-fit-content;
width: fit-content;
}
.events-card {
display: grid;
grid-template-columns: 4fr 6fr;
align-items: center;
gap: 50px;
padding: clamp(1.875rem, 1.54rem + 1.355vw, 2.5rem) 0;
border-bottom: 1px dashed var(--gray-light);
}
@media (max-width: 979px) {
.events-card {
gap: 20px 40px;
}
}
@media (max-width: 599px) {
.events-card {
grid-template-columns: 1fr;
}
}
.events-card:last-child {
border-bottom: 1px dashed var(--black);
}
.events-card__text h3 {
font-size: clamp(1.125rem, 0.86rem + 1.084vw, 1.625rem);
font-weight: var(--weight-bold);
}
.events-card__text dd {
display: block;
width: -moz-fit-content;
width: fit-content;
padding: 0.3em 1.3em;
background-color: var(--black-opacity-300);
text-align: center;
font-size: clamp(0.6875rem, 0.59rem + 0.407vw, 0.875rem);
font-weight: var(--weight-bold);
border-radius: var(--radius-full);
margin-top: 1em;
}
.events-card__text p {
font-size: clamp(0.6875rem, 0.52rem + 0.678vw, 1rem);
line-height: var(--line-height-relaxed);
margin-top: 1.2em;
}
.events-card__text .notice {
font-size: clamp(0.625rem, 0.56rem + 0.271vw, 0.75rem);
line-height: var(--line-height-relaxed);
margin-top: 1em;
}
.events-card__text .notice::before {
content: "※";
font-size: 1em;
}
.events-card__img {
order: -1;
}
.events-card__img img {
width: 100%;
border-radius: var(--radius-lg);
}
.history-intro {
margin-top: clamp(3.75rem, 3.09rem + 2.71vw, 5rem);
padding-bottom: clamp(2.5rem, 0.52rem + 8.13vw, 6.25rem);
position: relative;
}
@media (max-width: 979px) {
.history-intro {
padding-bottom: 100vw;
}
}
.history-intro__headline {
position: relative;
z-index: 100;
display: flex;
align-items: center;
width: 100%;
font-size: clamp(1.25rem, 0.92rem + 1.355vw, 1.875rem);
font-weight: var(--weight-bold);
line-height: var(--line-height-relaxed);
letter-spacing: 0.35em;
writing-mode: vertical-rl;
margin-bottom: clamp(2.5rem, -0.47rem + 12.195vw, 8.125rem);
}
.history-intro__text {
position: relative;
z-index: 100;
}
.history-intro__text p {
font-size: clamp(0.8125rem, 0.65rem + 0.678vw, 1.125rem);
line-height: var(--line-height-relaxed);
font-weight: var(--weight-bold);
text-align: center;
}
@media (max-width: 979px) {
.history-intro__text p {
text-shadow: var(--shadow-secondary);
}
}
.history-intro__text p + p {
margin-top: 1.8em;
}
.history-intro__img {
position: absolute;
width: min(23.5vw, 450px);
aspect-ratio: 300/440;
z-index: 1;
overflow: hidden;
}
@media (max-width: 979px) {
.history-intro__img {
width: 40vw;
}
}
.history-intro__img img {
position: absolute;
top: -50px;
width: 100%;
height: calc(100% + 100px);
-o-object-fit: cover;
object-fit: cover;
}
@media (max-width: 979px) {
.history-intro__img img {
top: -25px;
height: calc(100% + 50px);
}
}
.history-intro__img[data-position=right] {
right: 0;
top: 0;
border-top-left-radius: var(--radius-lg);
border-bottom-left-radius: var(--radius-lg);
}
@media (max-width: 979px) {
.history-intro__img[data-position=right] {
top: auto;
bottom: 25vw;
}
}
.history-intro__img[data-position=left] {
left: 0;
bottom: 0;
border-top-right-radius: var(--radius-lg);
border-bottom-right-radius: var(--radius-lg);
}
@media (max-width: 979px) {
.history-intro__img[data-position=left] {
top: auto;
bottom: 0;
}
}
.histoy-section {
padding: clamp(5rem, 3.68rem + 5.42vw, 7.5rem) 0;
}
.histoy-section.u-bgi {
background-color: var(--moss-light);
}
.histoy-section__wrapper {
padding-top: clamp(2.5rem, 1.51rem + 4.065vw, 4.375rem);
border-top: 1px solid var(--black);
position: relative;
}
.histoy-section__wrapper::before {
content: "";
position: absolute;
top: -8px;
left: 0;
width: 100%;
height: 3px;
background-color: var(--black);
}
.history-layout {
display: grid;
grid-template-columns: 114px auto;
gap: 30px 50px;
}
@media (max-width: 979px) {
.history-layout {
grid-template-columns: max-content 1fr;
gap: var(--spacing-gutter);
}
}
.history-layout__head {
font-size: clamp(1.125rem, 0.86rem + 1.084vw, 1.625rem);
}
@media (max-width: 979px) {
.history-layout__head:has([data-lines="1"]) {
width: 1.2em;
}
}
@media (max-width: 979px) {
.history-layout__head:has([data-lines="2"]) {
width: 2.4em;
}
}
.history-layout__head h2 {
position: sticky;
top: 80px;
left: 0;
display: flex;
align-items: center;
gap: 1em;
width: 88px;
font-size: clamp(1.125rem, 0.86rem + 1.084vw, 1.625rem);
font-weight: var(--weight-bold);
letter-spacing: 0.3em;
writing-mode: vertical-rl;
}
@media (max-width: 979px) {
.history-layout__head h2 {
width: -moz-fit-content;
width: fit-content;
line-height: var(--line-height-tight);
}
}
.history-layout__head h2::before {
content: "";
display: block;
width: 1px;
height: 3em;
background-color: var(--black);
}
.history-layout__body {
padding-top: 30px;
}
@media (max-width: 979px) {
.history-layout__body {
padding-top: 0;
}
}
.history-treasures {
--_gap: 50px;
display: flex;
flex-wrap: wrap;
row-gap: 50px;
margin-left: calc(var(--_gap) * -1);
}
@media (max-width: 599px) {
.history-treasures {
row-gap: 30px;
}
}
.history-treasures .history-treasures__item {
padding-left: var(--_gap);
}
.history-treasures__item[data-colspan="3"] {
width: 33.3333333333%;
}
@media (max-width: 979px) {
.history-treasures__item[data-colspan="3"] {
width: 50%;
}
}
@media (max-width: 599px) {
.history-treasures__item[data-colspan="3"] {
width: 100%;
}
}
.history-treasures__item[data-colspan="2"] {
width: 50%;
}
@media (max-width: 599px) {
.history-treasures__item[data-colspan="2"] {
width: 100%;
}
}
.history-treasures__item[data-colspan="1"] {
width: 100%;
}
.history-treasures__item img {
width: 100%;
}
.history-treasures__text {
background-color: var(--white-opacity-700);
padding: 20px 20px 24px;
text-align: center;
color: var(--black);
}
.history-treasures__text h3 {
font-size: clamp(1rem, 0.8rem + 0.813vw, 1.375rem);
font-weight: var(--weight-bold);
}
.history-treasures__text p {
font-size: clamp(0.6875rem, 0.56rem + 0.542vw, 0.9375rem);
font-weight: var(--weight-bold);
line-height: var(--line-height-relaxed);
margin-top: 0.3em;
}
[data-colspan="1"] .history-treasures__text {
padding: 24px 40px 28px;
text-align: left;
}
[data-colspan="1"] .history-treasures__text p {
font-size: clamp(0.6875rem, 0.52rem + 0.678vw, 1rem);
font-weight: var(--weight-regular);
margin-top: 1em;
}
.history-grave img {
width: 100%;
border-radius: var(--radius-lg);
margin-bottom: clamp(1.5rem, 0.31rem + 4.878vw, 3.75rem);
}
.history-grave p {
font-size: clamp(0.6875rem, 0.52rem + 0.678vw, 1rem);
line-height: var(--line-height-relaxed);
margin-top: 1em;
}
.history-grave h3 {
font-size: clamp(0.875rem, 0.74rem + 0.542vw, 1.125rem);
font-weight: var(--weight-bold);
background-color: var(--black);
padding: 0.8em 1.2em;
color: var(--white);
margin-top: 2.8em;
margin-bottom: 1em;
}
.history-grave li {
padding-left: 1.2em;
font-size: clamp(0.6875rem, 0.52rem + 0.678vw, 1rem);
line-height: var(--line-height-relaxed);
position: relative;
}
.history-grave li::before {
content: "";
position: absolute;
left: 0.2em;
top: 0.9em;
width: 0.25em;
aspect-ratio: 1/1;
border-radius: 50%;
background-color: var(--black);
}
.history-grave li + li {
margin-top: 0.8em;
}
.history-links__item + .history-links__item {
margin-top: clamp(1.25rem, 0.92rem + 1.355vw, 1.875rem);
}
.history-links__item a {
display: block;
background-color: var(--white);
color: var(--black);
padding: 32px 40px 36px;
border-left: 2px solid var(--black);
font-size: clamp(0.6875rem, 0.59rem + 0.407vw, 0.875rem);
position: relative;
transition: background-color 0.2s ease-in;
}
@media (max-width: 599px) {
.history-links__item a {
padding: 20px 24px 24px 16px;
}
}
.history-links__item a:focus-visible {
background-color: var(--white-opacity-800);
}
.history-links__item a:focus-visible::after {
translate: 50% -50%;
}
@media (any-hover: hover) {
.history-links__item a:hover {
background-color: var(--white-opacity-800);
}
.history-links__item a:hover::after {
translate: 50% -50%;
}
}
.history-links__item a::after {
content: "";
display: inline-block;
width: 0.5em;
aspect-ratio: 7/12;
-webkit-mask-image: var(--icon-chevron);
mask-image: var(--icon-chevron);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: var(--black);
position: absolute;
top: 50%;
right: 32px;
z-index: 10;
translate: 0 -50%;
transition: translate 0.2s ease-in;
}
@media (max-width: 599px) {
.history-links__item a::after {
right: 10px;
}
}
.history-links__item h3 {
width: -moz-fit-content;
width: fit-content;
font-size: clamp(0.9375rem, 0.77rem + 0.678vw, 1.25rem);
font-weight: var(--weight-bold);
}
.history-links__item h3::after {
content: "";
display: inline-block;
width: 0.65em;
aspect-ratio: 1/1;
background-image: url(../img/common/outerlink.svg);
background-size: contain;
background-repeat: no-repeat;
margin-left: 0.5em;
vertical-align: middle;
translate: 0 -0.15em;
}
@media (max-width: 599px) {
.history-links__item h3::after {
width: 0.8em;
}
}
.history-links__item p {
margin-top: 0.7em;
}
.privacy-content {
border-radius: var(--radius-sm);
background-color: var(--white-opacity-700);
padding: clamp(1.25rem, 0.59rem + 2.71vw, 2.5rem);
color: var(--black);
}
.privacy-content h2 {
font-size: clamp(0.8125rem, 0.65rem + 0.678vw, 1.125rem);
margin-bottom: 0.5em;
}
.privacy-content p + h2 {
margin-top: 1.8em;
}
@media (max-width: 599px) {
.privacy-content p + h2 {
margin-top: 1.5em;
}
}
.privacy-content p {
font-size: clamp(0.6875rem, 0.52rem + 0.678vw, 1rem);
line-height: var(--line-height-relaxed);
}
h1.wp-block-heading {
font-size: var(--wp--preset--font-size--xl);
margin-block-start: clamp(3.125rem, 2.46rem + 2.71vw, 4.375rem);
margin-block-end: 1em;
}
h2.wp-block-heading {
font-size: var(--wp--preset--font-size--lg);
margin-block-start: clamp(3.125rem, 2.46rem + 2.71vw, 4.375rem);
margin-block-end: 1em;
background-color: var(--white-opacity-700);
padding: 0.5em 1.2em;
color: var(--black);
box-sizing: border-box;
}
h3.wp-block-heading {
font-size: var(--wp--preset--font-size--lg);
margin-block-start: clamp(1.875rem, 0.88rem + 4.065vw, 3.75rem);
margin-block-end: 1em;
}
h4.wp-block-heading {
font-size: var(--wp--preset--font-size--md);
}
:where(ol.wp-block-list) {
list-style: decimal;
}
:where(ul.wp-block-list) {
list-style: disc;
}
.wp-block-post-content {
font-size: clamp(0.75rem, 0.62rem + 0.542vw, 1rem);
line-height: var(--line-height-relaxed);
}
.wp-block-post-content img {
display: inline;
border-radius: var(--radius-sm);
}
.editor-styles-wrapper {
background-color: var(--moss);
}
.aioseo-toc-header .aioseo-toc-header-title {
display: none;
}
.wp-block-aioseo-table-of-contents {
display: flex;
align-items: center;
justify-content: center;
gap: 24px 8px;
flex-wrap: wrap;
background-color: var(--white-opacity-800);
border-top: 2px solid var(--black);
padding: 32px 50px 54px;
color: var(--black);
margin-block: clamp(3.125rem, 2.46rem + 2.71vw, 4.375rem);
box-shadow: var(--shadow-primary);
}
@media (max-width: 599px) {
.wp-block-aioseo-table-of-contents {
padding: 24px 20px 32px;
}
}
.wp-block-aioseo-table-of-contents::before {
content: "目次";
display: inline-block;
font-size: clamp(1rem, 0.87rem + 0.542vw, 1.25rem);
font-weight: var(--weight-bold);
letter-spacing: 0.05em;
}
.wp-block-aioseo-table-of-contents::after {
content: "";
order: -1;
display: inline-block;
aspect-ratio: 25/20;
width: 25px;
height: auto;
background-color: var(--black);
-webkit-mask-image: var(--icon-index);
mask-image: var(--icon-index);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.wp-block-aioseo-table-of-contents > div {
width: 100%;
}
.wp-block-aioseo-table-of-contents ol {
width: 100%;
counter-reset: counter;
}
.wp-block-aioseo-table-of-contents li {
counter-increment: counter;
display: block;
border-top: 1px dashed var(--black);
}
.wp-block-aioseo-table-of-contents li:last-child {
border-bottom: 1px dashed var(--black);
}
.wp-block-aioseo-table-of-contents li > a {
display: grid;
grid-template-columns: max-content 1fr;
align-items: baseline;
gap: 0.8em;
padding: 0.8em 0;
color: var(--black);
font-size: clamp(0.8125rem, 0.71rem + 0.407vw, 1rem);
font-weight: var(--weight-bold);
letter-spacing: 0.05em;
transition: opacity 0.2s ease-in-out;
}
.wp-block-aioseo-table-of-contents li > a:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.wp-block-aioseo-table-of-contents li > a:hover {
opacity: 0.7;
}
}
.wp-block-aioseo-table-of-contents li > a::before {
content: "0" counter(counter) ".";
display: inline-block;
font-size: clamp(0.9375rem, 0.84rem + 0.407vw, 1.125rem);
font-weight: var(--weight-regular);
color: var(--gray-dark);
}/*# sourceMappingURL=style.css.map */