@charset "UTF-8";
/* =====================
Custom Property
===================== */
:root {
/* debug */
--debug: false;
/* color */
--black: #000;
--primary: #0e90a2;
--secondary: #7fb3d6;
--sub: #ee704e;
--bg: #ecf2e4;
/* font */
--yumin: 'Yu Mincho Demibold', 'YuMincho Demibold', '游明朝', 'Yu Mincho Regular', 'Yu Mincho', 'YuMincho Medium', serif;
--yugo: '游ゴシック', 'Yu Gothic', yugothic, 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'メイリオ', meiryo, 'ＭＳ ゴシック', sans-serif;
--sanserif: 'BIZ UDPGothic', sans-serif;
/* icon */
--icon-tel: url('data:image/svg+xml,');
--icon-pin: url('data:image/svg+xml,');
--icon-mail: url('data:image/svg+xml,');
--icon-arrow: url('data:image/svg+xml,');
--icon-cross: url('data:image/svg+xml,');
--icon-triangle: url('data:image/svg+xml,');
--icon-next: url('data:image/svg+xml,');
--img-hr: url('data:image/svg+xml,');
/* ease */
--slideInBezier: cubic-bezier(0.16, 0.5, 0.43, 1);
--easeOutQuart: cubic-bezier(0.25, 1, 0.5, 1);
--easeOutExpo: cubic-bezier(0.87, 0, 0.13, 1);
--easeOutBack: cubic-bezier(0.34, 1.56, 0.64, 1);
--easeOutQuint: cubic-bezier(0.22, 1, 0.36, 1);
--easeInCirc: cubic-bezier(0.55, 0, 1, 0.45);
--easeInOutBack: cubic-bezier(0.68, -0.6, 0.32, 1.6);
--easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
}
@media (width <= 768px) {
:root {
--img-hr: url('data:image/svg+xml,');
}
}
/* =====================
container context
===================== */
@container style(--debug:true) {
* {
outline: 1px solid tomato;
&:focus {
outline: 2px solid var(--blue);
outline-offset: 2px;
}
}
}
@layer style {
/* =====================
common
===================== */
html,
body {
font-family: var(--sanserif);
font-size: 18px;
font-weight: 400;
line-height: 1.8;
color: var(--black);
@media (width <= 768px) {
font-size: calc((100 / 390) * 18 * 1vw);
}
}
body {
@media (width > 768px) {
min-inline-size: 1440px;
}
}
@media (width > 768px) {
.sp {
display: none;
}
}
@media (width <= 768px) {
.pc {
display: none;
}
}
/* p */
:where(p, li, dt, dd, th, td) {
line-height: 1.8;
}
/* =====================
header
===================== */
.header {
position: sticky;
inset: 0 auto auto;
z-index: 20;
display: block grid;
grid-template-columns: 331px 1fr;
grid-auto-flow: column;
align-items: flex-start;
justify-content: flex-start;
inline-size: 100%;
background: white;
@media (width <= 768px) {
display: block flex;
flex-direction: column;
}
/* ==== logo ==== */
.logo {
display: block flex;
gap: 10px;
align-items: center;
padding-block: 32px;
padding-inline: 40px 28px;
color: white;
background: var(--primary);
transition: opacity 250ms ease 0s;
will-change: opacity;
@media (width <= 768px) {
gap: 2.6vw;
justify-content: center;
inline-size: 100%;
padding-block: 2vw;
padding-inline: 0;
& img {
inline-size: calc((100 / 390) * 56 * 1vw);
}
}
@media (any-hover: hover) {
&:hover {
opacity: 0.8;
}
}
/* ==== hgroup ==== */
.hgroup {
display: block grid;
gap: 10px;
@media (width <= 768px) {
gap: 2.6vw;
}
}
& :where(h1, p) {
margin-block: calc((1em - 1lh) / 2);
line-height: 1;
}
/* ==== p ==== */
& p {
font-size: 14px;
font-weight: 700;
letter-spacing: 1.12px;
@media (width <= 768px) {
font-size: calc((100 / 390) * 11.2 * 1vw);
letter-spacing: calc((100 / 390) * 0.896 * 1vw);
}
}
/* ==== h1 ==== */
& h1 {
font-size: 32px;
font-weight: 700;
@media (width <= 768px) {
font-size: calc((100 / 390) * 25.6 * 1vw);
}
}
}
/* ==== nav ==== */
.nav {
display: block grid;
@media (width <= 768px) {
inline-size: 100%;
}
}
/* ==== unit ==== */
.unit {
display: block grid;
grid-template-columns: 1fr 205px 250px;
@media (width > 768px) {
@container (width <= 610px) {
grid-template-columns: 1fr auto auto;
}
}
@media (width <= 768px) {
grid-template-columns: repeat(3, 1fr);
border-top: 1px solid white;
}
/* ==== .tel ==== */
.tel {
display: block flex;
gap: 8px;
align-items: center;
justify-content: flex-end;
padding-inline: 33px;
/* icon */
&::before {
flex-shrink: 0;
inline-size: 40px;
aspect-ratio: 1 / 1;
content: '';
background-color: var(--primary);
mask-image: var(--icon-tel);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
@media (width <= 768px) {
gap: 0;
justify-content: center;
padding-inline: 0;
&::before {
inline-size: calc((100 / 390) * 40 * 1vw);
}
& > * {
display: none !important;
}
}
/* ==== a ==== */
& .number {
display: block flow;
/* flex-shrink: 0; */
margin-block: calc((1em - 1lh) / 2);
font-size: 24px;
font-weight: 700;
color: var(--primary);
}
/* ==== p ==== */
& p {
margin-block: calc((1em - 1lh) / 2);
font-size: 16px;
}
}
/* ==== access ==== */
.access {
display: block flex;
gap: 11px;
align-items: center;
justify-content: center;
padding-block: 16px;
padding-inline: 40px;
font-size: 20px;
font-weight: 700;
color: white;
background: var(--sub);
transition: background 250ms ease 0s;
will-change: background;
@media (any-hover: hover) {
&:hover {
background: color-mix(in srgb, var(--sub) 80%, white 20%);
}
}
@media (width <= 768px) {
gap: 0;
padding-block: calc((100 / 390) * 3.9 * 1vw);
padding-inline: calc((100 / 390) * 10 * 1vw);
& span {
display: none;
}
}
/* icon */
&::before {
inline-size: 40px;
aspect-ratio: 1 / 1;
content: '';
background-color: currentcolor;
mask-image: var(--icon-pin);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
@media (width <= 768px) {
&::before {
inline-size: calc((100 / 390) * 40 * 1vw);
}
}
}
/* ==== contact ==== */
.contact {
display: block grid;
grid-auto-flow: column;
gap: 11px;
align-items: center;
justify-content: center;
padding-inline: 37px;
font-size: 20px;
font-weight: 700;
color: white;
background: var(--primary);
transition: background 250ms ease 0s;
will-change: background;
/* icon */
&::before {
inline-size: 40px;
aspect-ratio: 1 / 1;
content: '';
background-color: currentcolor;
mask-image: var(--icon-mail);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
@media (any-hover: hover) {
&:hover {
background: color-mix(in srgb, var(--primary) 80%, white 20%);
}
}
@media (width <= 768px) {
& span {
display: none;
}
&::before {
inline-size: calc((100 / 390) * 40 * 1vw);
}
}
}
}
/* ==== list ==== */
.list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--_border-width);
block-size: fit-content;
padding: var(--_border-width);
font-size: 20px;
font-weight: 700;
background: white;
--_border-width: 1px;
@media (width <= 768px) {
font-size: calc((100 / 390) * 14 * 1vw);
}
& li {
box-shadow: 0 0 0 var(--_border-width) #b4b4b4;
& button {
display: block flex;
gap: 10px;
align-items: center;
justify-content: center;
inline-size: 100%;
padding-block: 21px;
transition: all 300ms ease-out 0s;
@media (width <= 768px) {
flex-direction: column;
gap: 0;
padding-block: calc((100 / 390) * 2 * 1vw) calc((100 / 390) * 0 * 1vw);
line-height: 1.6;
text-align: center;
}
&::after {
inline-size: 16px;
aspect-ratio: 1 / 2;
content: '';
background-color: var(--primary);
mask-image: var(--icon-arrow);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
transition: inherit;
}
.sp-hide {
display: contents;
}
@media (width <= 768px) {
.sp-hide {
display: none;
}
&::after {
inline-size: calc((100 / 390) * 60 * 1vw);
block-size: calc((100 / 390) * 22 * 1vw);
aspect-ratio: unset;
translate: 0 calc((100 / 390) * 3 * -1 * 1vw);
}
}
@media (any-hover: hover) {
&:hover {
color: white;
background: #8db8be;
}
&:hover::after {
background: white;
}
}
}
}
}
}
/* =====================
footer
===================== */
.footer {
display: block grid;
gap: 36px;
align-items: center;
justify-content: center;
padding-block: 40px;
background: white;
@media (width <= 768px) {
gap: 3.5vw;
padding-block: calc((100 / 390) * 24 * 1vw);
}
/* ==== logo ==== */
.logo {
display: block flex;
gap: 26px;
align-items: center;
justify-content: center;
@media (width <= 768px) {
gap: calc((100 / 390) * 19.2 * 1vw);
padding-inline: 0;
& img {
inline-size: calc((100 / 390) * 64 * 1vw);
}
}
@media (any-hover: hover) {
&:hover {
opacity: 0.8;
}
}
/* ==== hgroup ==== */
.hgroup {
display: block grid;
gap: 10px;
@media (width <= 768px) {
gap: calc((100 / 390) * 16 * 1vw);
}
}
& :where(h1, p) {
margin-block: calc((1em - 1lh) / 2);
line-height: 1;
}
/* ==== hgroup ==== */
.hgroup {
display: block grid;
gap: 10px;
@media (width <= 768px) {
gap: calc((100 / 390) * 6 * 1vw);
}
}
& :where(h1, p) {
margin-block: calc((1em - 1lh) / 2);
line-height: 1;
}
/* ==== p ==== */
& p {
font-size: 16px;
font-weight: 700;
letter-spacing: 1.12px;
@media (width <= 768px) {
font-size: calc((100 / 390) * 12.8 * 1vw);
letter-spacing: calc((100 / 390) * 1.024 * 1vw);
}
}
/* ==== h1 ==== */
& h1 {
font-size: 40px;
font-weight: 700;
@media (width <= 768px) {
font-size: calc((100 / 390) * 32 * 1vw);
}
}
}
/* ==== address ==== */
.address {
margin-block: calc((1em - 1lh) / 2);
font-size: 20px;
text-align: center;
letter-spacing: 2.4px;
@media (width <= 768px) {
font-size: calc((100 / 390) * 12 * 1vw);
letter-spacing: calc((100 / 390) * 1.44 * 1vw);
}
}
/* ==== small ==== */
.small {
margin-block: calc((1em - 1lh) / 2);
text-align: center;
@media (width <= 768px) {
font-size: calc((100 / 390) * 12 * 1vw);
}
}
}
/* =====================
main
===================== */
.main {
margin-block-start: 0;
@media (width <= 768px) {
margin-block-start: 0;
}
}
}