html {
font-size: 1.6667vw;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 20px);
}
body {
min-width: 320px;
font-family: var(--f-base);
font-weight: 400;
line-height: 1.5;
color: var(--c-text);
background-color: var(--c-ground);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-break: strict;
overflow-wrap: break-word;
}
p, li, dd, dt, td, th, figcaption {
text-wrap-style: auto;
word-break: normal;
}
h1, h2, h3, h4 {
text-wrap-style: balance;
word-break: auto-phrase;
}
@media (max-width: 768px) {
body {
padding-bottom: calc(var(--telbar-h) + env(safe-area-inset-bottom));
}
}
html.is-locked {
overflow: hidden;
}
:focus-visible {
outline: 3px solid var(--c-text);
outline-offset: 3px;
}
.l-footer .c-cta :focus-visible,
.c-cta :focus-visible {
outline-color: #fff;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-delay: 0s !important;
transition-duration: .01ms !important;
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}
ul,
ol {
padding: 0;
list-style: none;
}
img,
svg,
video {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
letter-spacing: inherit;
}
button {
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
address {
font-style: normal;
}
:root {
--c-ground: #fcfaf1;
--c-white: #fff;
--c-text: #333;
--c-nav: #222;
--c-card-text: #444;
--c-main: #cc8366;
--c-sub1: #dba894;
--c-sub2: #e8c7ba;
--c-gray: #a7a7a7;
--c-dot: #d9d9d9;
--c-pale: #f3f2f2;
--c-pale2: #e0e0e0;
--c-type-jihatsu: #cde296;
--c-bullet: #ccc;
--c-bullet-on: var(--c-main);
--c-tsumiki-salmon: #dabba9;
--c-tsumiki-yellow: #d3bf92;
--c-tsumiki-sky: #b1cad3;
--c-tsumiki-pink: #dcb7ba;
--c-tsumiki-green: #aac39d;
--c-tsumiki-purple: #c7b7cd;
--c-tsumiki-orange: #ce9e8d;
--c-tsumiki-pink-s: #b6565e;
--c-tsumiki-orange-s: #af5e41;
--c-tsumiki-yellow-s: #8c7030;
--c-tsumiki-green-s: #5a7d47;
--c-tsumiki-sky-s: #497b8e;
--c-pink: #ff9097;
--c-orange: #f2994a;
--c-yellow: #f2c94c;
--c-green: #6fcf97;
--c-blue: #56ccf2;
--c-purple: #bb6bd9;
--c-main-face: #cc8366;
--c-on-main: #fff;
--c-main-l: #ab4f2b;
--c-main-s: #aa4f31;
--c-pink-l: #ff5a65;  --c-pink-s: #ee000f;
--c-orange-l: #e77511; --c-orange-s: #b75d0d;
--c-yellow-l: #b98e0d; --c-yellow-s: #93710b;
--c-green-l: #38a867; --c-green-s: #2c8551;
--c-blue-l: #109fcd;  --c-blue-s: #0d80a5;
--c-purple-l: #bb6bd9; --c-purple-s: #ab49d0;
--c-gray-l: #949494;  --c-gray-s: #757575;
--c-link-l: #3ea587;  --c-link-s: #2d7963;
--c-tab-face: #5c9970;
--f-base: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
--f-maru: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", var(--f-base);
--ease: cubic-bezier(.43, .05, .17, 1);
--header-h: clamp(61px, 8.472vw, 122px);
--telbar-h: 72px;
}
@media (max-width: 768px) {
:root {
--header-h: 80px;
}
}
.l-main {
position: relative;
display: block;
}
.l-container {
position: relative;
width: 100%;
max-width: 1440px;
padding: clamp(16px, 1.527vw, 22px) clamp(18px, 6.666vw, 96px) clamp(40px, 4.861vw, 70px);
margin: 0 auto;
background-color: var(--c-white);
border-radius: clamp(30px, 5.555vw, 80px);
}
@media (max-width: 768px) {
.l-container {
padding: 16px 18px 40px;
}
}
.l-article {
position: relative;
}
.l-article > .l-container {
z-index: 2;
padding: clamp(16px, 2.083vw, 30px) clamp(16px, 3.68vw, 53px) clamp(40px, 5.555vw, 80px);
margin-top: -140px;
}
@media (max-width: 768px) {
.l-article {
padding-top: 92px;
}
.l-article > .l-container {
padding: 16px 6px 40px;
margin-top: -40px;
}
}
.l-columns {
margin-top: clamp(15px, 3.472vw, 50px);
}
.l-columns__main {
position: relative;
max-width: 800px;
margin: 0 auto;
}
@media (max-width: 768px) {
.l-columns {
margin-top: 36px;
}
}
.l-section {
position: relative;
width: 100%;
padding-bottom: clamp(60px, 8.333vw, 120px);
}
.l-section--last {
padding-bottom: 0;
}
.l-inner {
width: 100%;
max-width: 1168px;
padding: 0 clamp(18px, 2.222vw, 32px);
margin: 0 auto;
}
.l-cta {
width: 100%;
max-width: 1440px;
overflow-x: clip;
padding: 0 clamp(25px, 2.708vw, 39px);
margin: var(--cta-gap, 83px) auto 0;
}
.l-drawer-overlay,
.l-drawer-bg,
.l-drawer {
display: none;
}
@media (max-width: 768px) {
.l-drawer-overlay {
position: fixed;
inset: 0;
z-index: 9996;
pointer-events: none;
background-color: var(--c-text);
opacity: 0;
}
.is-drawer-open .l-drawer-overlay {
display: block;
opacity: .3;
}
.l-drawer-bg {
position: fixed;
top: 18px;
right: 18px;
z-index: 9997;
display: block;
width: 48px;
height: 48px;
pointer-events: none;
background-color: var(--c-white);
border-radius: 50%;
opacity: 0;
transition: width .6s var(--ease), height .6s var(--ease), margin .6s var(--ease), opacity 0s .6s;
}
.is-drawer-open .l-drawer-bg {
width: 180vh;
height: 180vh;
margin: -90vh -90vh 0 0;
opacity: 1;
transition: width .6s var(--ease), height .6s var(--ease), margin .6s var(--ease), opacity 0s;
}
.l-drawer {
position: fixed;
inset: 0;
z-index: 9998;
display: block;
overflow-y: auto;
overscroll-behavior: contain;
opacity: 0;
transition: opacity .5s var(--ease);
}
.l-drawer[hidden] {
display: none;
}
.is-drawer-open .l-drawer {
opacity: 1;
}
.l-drawer__nav {
position: relative;
width: 100%;
padding-top: clamp(40px, 16vw, 64px);
}
.l-drawer__item {
text-align: center;
}
.l-drawer__link {
display: block;
padding: clamp(12px, 4.857vw, 17px) 0;
line-height: 1.2;
font-size: clamp(16px, 5.142vw, 18px);
font-weight: 700;
color: var(--c-text);
}
.l-drawer__btns {
position: relative;
padding: clamp(20px, 10.857vw, 38px) 18px 40px;
}
.l-drawer__btns li + li {
margin-top: 12px;
}
.l-drawer__btn {
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
width: 100%;
max-width: 290px;
white-space: nowrap;
padding: 12px;
margin: 0 auto;
font-size: clamp(14px, 5.142vw, 18px);
font-weight: 700;
line-height: 1.6;
letter-spacing: .1em;
border-radius: 50px;
}
.l-drawer__btn--tel {
letter-spacing: .06em;
color: var(--c-text);
background-color: var(--c-white);
border: 2px solid var(--c-text);
}
.l-drawer__btn--contact {
font-size: 19px;
color: var(--c-on-main);
letter-spacing: .04em;
background-color: var(--c-main-face);
}
.l-drawer__btn-icon {
flex-shrink: 0;
width: 22px;
height: 22px;
background: 50% / contain no-repeat;
}
.l-drawer__btn-icon--tel {
background-image: url(../images/icon/tel-main.svg?v=6701b3e1);
}
.l-drawer__btn-icon--plane {
width: 31px;
height: 20px;
background-image: url(../images/icon/plane.svg?v=20261021);
}
}
@media (max-width: 768px) and (max-height: 767px) {
.l-drawer__nav {
padding-top: 8vh;
}
.l-drawer__btns {
padding-top: 5vh;
}
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
.l-drawer-bg,
.is-drawer-open .l-drawer-bg,
.l-drawer {
transition: none;
}
}
.l-footer {
position: relative;
z-index: 1;
padding-top: 100px;
}
.l-footer__inner {
width: 100%;
max-width: 1215px;
padding: 0 clamp(18px, 2.5vw, 36px);
margin: 0 auto;
color: var(--c-text);
}
.l-footer__main {
display: flex;
justify-content: space-between;
}
.l-footer__copy {
flex-shrink: 0;
width: 100%;
max-width: clamp(324px, 25.763vw, 371px);
padding-top: 8px;
}
.l-footer__side {
width: 100%;
max-width: 484px;
padding-left: clamp(18px, 2.5vw, 36px);
}
.l-footer__list {
display: flex;
flex-wrap: wrap;
max-width: 466px;
margin: -18px 0 0 -18px;
}
.l-footer__item {
flex: 0 1 calc(50% - 18px);
margin: 18px 0 0 18px;
}
.l-footer__link {
font-size: clamp(15px, 1.25vw, 18px);
font-weight: 700;
line-height: 2;
}
.l-footer__link:hover {
text-decoration: underline;
text-underline-offset: .25em;
}
.l-footer__banner {
position: relative;
display: grid;
place-items: center;
width: 100%;
margin: 44px 0 0;
overflow: hidden;
aspect-ratio: 448 / 125;
border-radius: 18px;
}
.l-footer__banner-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s var(--ease);
}
.l-footer__banner:hover .l-footer__banner-img {
transform: scale(1.04);
}
.l-footer__banner-label {
position: relative;
padding: 10px 26px;
font-family: var(--f-maru);
font-size: clamp(18px, 1.666vw, 24px);
font-weight: 700;
line-height: 1.4;
letter-spacing: .08em;
background-color: var(--c-white);
border-radius: 50px;
}
.l-footer__banner-label {
display: inline-flex;
align-items: center;
gap: .5em;
}
.l-footer__banner-mark {
flex: none;
width: auto;
height: 1.9em;
}
.l-footer__insta {
display: flex;
align-items: center;
height: 80px;
padding: 0 0 0 30px;
margin-top: 18px;
overflow: hidden;
background: var(--c-white) url(../images/tsumiki/pattern.svg?v=d750b7e3) 0 0 / 240px auto;
border: 1.86px solid var(--c-sub1);
border-radius: 18.628px;
}
.l-footer__insta-icon {
flex-shrink: 0;
width: 44px;
}
.l-footer__insta-text {
flex-shrink: 0;
margin-right: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 0 0 13px;
}
.l-footer__insta-name {
font-size: 14px;
font-weight: 500;
line-height: 1.6;
letter-spacing: .056em;
}
.l-footer__insta-main {
font-size: 20px;
font-weight: 700;
line-height: 1.6;
letter-spacing: .08em;
}
.l-footer__insta-photo {
flex-shrink: 1;
min-width: 0;
height: 100%;
margin: 0 0 0 auto;
aspect-ratio: 314 / 161;
}
.l-footer__insta-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.l-footer__sub {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: clamp(44px, 7.5vw, 108px);
}
.l-footer__logo {
display: block;
width: 100%;
max-width: clamp(263px, 27.361vw, 394px);
}
.l-footer__address {
display: flex;
flex-direction: column;
width: 100%;
max-width: 484px;
padding-left: clamp(18px, 2.5vw, 36px);
font-size: clamp(14px, 1.111vw, 16px);
font-weight: 500;
line-height: 1.9;
letter-spacing: .04em;
}
.l-footer__address-name {
font-weight: 700;
}
.l-footer__tel {
font-weight: 700;
text-decoration: underline;
text-underline-offset: .2em;
}
.l-footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding: clamp(19px, 2.083vw, 30px) 0;
margin-top: clamp(32px, 2.638vw, 38px);
border-top: 3px dotted var(--c-dot);
}
.l-footer__copyright {
order: -1;
font-size: 12px;
line-height: 1;
}
.l-footer__links {
display: flex;
flex-wrap: wrap;
gap: 1.875vw;
}
.l-footer__small-link {
font-size: 12px;
font-weight: 400;
letter-spacing: .04em;
}
.l-footer__small-link:hover {
text-decoration: underline;
}
@media (max-width: 768px) {
.l-footer__inner {
padding: 0 18px;
}
.l-footer__main {
flex-direction: column;
max-width: 400px;
margin: 0 auto;
}
.l-footer__copy {
order: 2;
align-self: center;
margin-top: 44px;
}
.l-footer__side {
max-width: none;
padding-left: 0;
}
.l-footer__list {
max-width: none;
padding-left: 18px;
margin: 0;
}
.l-footer__item {
flex-basis: 100%;
margin: 14px 0 0;
}
.l-footer__banner {
aspect-ratio: 339 / 151;
}
.l-footer__insta {
height: 20.5128vw;
max-height: 90px;
padding: 0 0 0 3.8461vw;
margin-top: 3.8461vw;
}
.l-footer__insta-icon {
width: 10.2564vw;
max-width: 44px;
}
.l-footer__insta-text {
padding: 0 0 0 2.5641vw;
}
.l-footer__insta-name {
font-size: clamp(12px, 3.0769vw, 14px);
line-height: 1.4;
}
.l-footer__insta-main {
font-size: clamp(16px, 4.1025vw, 20px);
line-height: 1.4;
}
.l-footer__sub {
display: block;
max-width: 400px;
margin: 0 auto;
}
.l-footer__logo {
margin: 40px auto 24px;
}
.l-footer__address {
align-items: center;
max-width: none;
padding-left: 0;
text-align: center;
}
.l-footer__bottom {
flex-direction: column;
text-align: center;
}
.l-footer__copyright {
order: 2;
margin-top: 10px;
}
.l-footer__links {
gap: 5.1282vw;
justify-content: center;
}
}
@media (min-width: 769px) {
.l-footer__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 484px);
column-gap: clamp(18px, 2.5vw, 36px);
}
.l-footer__main {
display: contents;
}
.l-footer__copy {
grid-row: 1;
grid-column: 1;
}
.l-footer__side {
grid-row: 1 / span 2;
grid-column: 2;
padding-left: 0;
}
.l-footer__sub {
flex-direction: column;
gap: clamp(20px, 2.222vw, 32px);
align-items: flex-start;
justify-content: flex-start;
grid-row: 2;
grid-column: 1;
margin-top: clamp(40px, 4.166vw, 60px);
}
.l-footer__bottom {
grid-row: 3;
grid-column: 1 / -1;
}
.l-footer__address {
padding-left: 0;
}
}
@media (min-width: 560px) and (max-width: 768px) {
.l-footer__item {
flex-basis: 50%;
}
}
.l-header {
position: fixed;
top: 0;
z-index: 1000;
width: 100%;
pointer-events: none;
transition: all .5s var(--ease);
}
.l-header__inner {
display: flex;
align-items: flex-start;
width: 100%;
max-width: 1400px;
padding: clamp(22px, 3.055vw, 44px) clamp(20px, 2.777vw, 40px) 0;
margin: 0 auto;
transition: all .5s var(--ease);
}
.l-header__inner > * {
pointer-events: auto;
}
.l-header__logo {
display: block;
flex-shrink: 1;
align-self: center;
width: 100%;
min-width: 120px;
max-width: clamp(120px, 20.5vw, 296px);
opacity: 1;
transform: scale(1);
transition: all .3s var(--ease);
}
.l-header__logo img {
width: 100%;
}
.l-header.is-scrolled .l-header__logo {
flex-shrink: 0;
width: 0;
min-width: 0;
opacity: 0;
transform: scale(.3);
}
.l-header.is-scrolled .l-header__inner {
padding: 10px clamp(20px, 2.777vw, 40px);
}
.l-header.is-scrolled .l-header__nav {
margin-left: 0;
}
.l-header__nav {
display: block;
width: 100%;
margin-left: clamp(30px, 4.166vw, 60px);
background-color: var(--c-white);
border-radius: 64px;
transition: all .3s var(--ease);
}
.l-header__list {
display: flex;
margin: 0 0 0 clamp(9px, 1.25vw, 18px);
}
.l-header__item {
flex-grow: 1;
}
.l-header__link {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: clamp(36px, 5vw, 72px);
padding: 0 clamp(4px, .694vw, 10px);
font-size: clamp(12px, 1.111vw, 16px);
font-weight: 700;
line-height: 1.6;
color: var(--c-nav);
text-align: center;
white-space: nowrap;
transition: all .3s var(--ease);
}
.l-header__link::after {
position: absolute;
top: 80%;
left: 50%;
width: 6px;
height: 6px;
content: "";
background-color: var(--c-white);
border-radius: 0;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
transition: all .3s var(--ease);
transform: translate(-50%, -50%);
}
.l-header__link:hover,
.l-header__link[aria-current="page"] {
color: var(--c-main-s);
}
.l-header__link:hover::after,
.l-header__link[aria-current="page"]::after {
background-color: var(--c-main);
}
.l-header__item--contact {
flex-grow: 0;
flex-basis: clamp(100px, 13.888vw, 200px);
}
.l-header__btn {
position: relative;
display: flex;
gap: clamp(8px, .9vw, 13px);
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: clamp(36px, 5vw, 72px);
overflow: hidden;
font-size: 19px;
font-weight: 700;
line-height: 1.25;
color: var(--c-on-main);
text-align: left;
letter-spacing: .04em;
white-space: nowrap;
background-color: var(--c-main-face);
border-radius: 0 64px 64px 80px;
}
.l-header__btn-icon {
flex-shrink: 0;
width: clamp(15px, 2.083vw, 30px);
height: clamp(10px, 1.319vw, 19px);
background: url(../images/icon/plane.svg?v=20261021) 50% / contain no-repeat;
}
.l-header__btn:hover .l-header__btn-icon {
animation: l-header-plane 1.5s ease-in-out both;
}
@keyframes l-header-plane {
0% { opacity: 1; transform: translate(0); }
25% { opacity: .5; transform: translate(2rem, -2rem); }
30% { opacity: 0; transform: translate(5rem, -4rem); }
40% { opacity: 0; transform: translate(0); }
55% { opacity: 0; transform: translate(-3rem, 3rem); }
60% { opacity: .5; transform: translate(-2rem, 2rem); }
100% { opacity: 1; transform: translate(0); }
}
@media (min-width: 960px) {
.l-header__link {
font-size: clamp(13px, 1.111vw, 16px);
}
}
@media (max-width: 1199px) {
.l-header__btn-more,
.l-header__btn-icon {
display: none;
}
}
.l-header__sp-btn,
.l-toggle {
display: none;
}
@media (max-width: 768px) {
.l-header {
transition: all .3s var(--ease);
}
.l-header__inner {
display: block;
padding: clamp(10px, 3.714vw, 13px) clamp(15px, 5.142vw, 18px);
transition: all .3s var(--ease);
}
.l-header.is-hidden .l-header__inner {
visibility: hidden;
opacity: 0;
}
.l-header.is-scrolled .l-header__inner {
padding: clamp(10px, 3.714vw, 13px) clamp(15px, 5.142vw, 18px);
}
.l-header__logo,
.l-header.is-scrolled .l-header__logo {
display: inline-block;
width: clamp(140px, 42vw, 260px);
min-width: 0;
max-width: none;
padding: 8px 6px;
margin-top: calc(42px - clamp(10px, 3.714vw, 13px));
background-color: var(--c-white);
border-radius: 20px;
opacity: 1;
transform: translateY(-50%);
}
.l-header__nav {
display: none;
}
.l-header__sp-btn {
position: absolute;
top: 42px;
right: 21.33%;
display: flex;
align-items: center;
justify-content: space-between;
width: 29.5vw;
max-width: 150px;
height: 9.2307vw;
max-height: 44px;
padding: 0 3px 0 min(3.0769vw, 15px);
font-size: clamp(12px, 3.0769vw, 15px);
font-weight: 700;
line-height: 1.6;
color: var(--c-main-s);
letter-spacing: min(.1231vw, .6px);
white-space: nowrap;
background: var(--c-white);
border: 2px solid var(--c-main);
border-radius: 12.8205vw;
transform: translateY(-50%);
}
.l-header__sp-btn::after {
position: absolute;
inset: -5px 0;
content: "";
}
.l-header__sp-arrow {
flex-shrink: 0;
width: 6.1538vw;
max-width: 30px;
height: 6.1538vw;
max-height: 30px;
margin-left: min(2.0512vw, 10px);
background: var(--c-main) url(../images/icon/arrow.svg?v=be649064) 50% / 9px 10px no-repeat;
border-radius: 50%;
}
.l-toggle {
position: fixed;
top: 18px;
right: 18px;
z-index: 10000;
display: block;
width: 48px;
height: 48px;
color: var(--c-on-main);
background-color: var(--c-main-face);
border-radius: 50%;
transition: transform .6s var(--ease);
}
.l-toggle.is-hidden {
transform: translateY(-72px);
}
.l-toggle__line,
.l-toggle__line::before,
.l-toggle__line::after {
position: absolute;
display: block;
width: 18px;
height: 2px;
background-color: currentColor;
transition: all .6s var(--ease);
}
.l-toggle__line {
top: 19px;
right: 15px;
}
.l-toggle__line::before,
.l-toggle__line::after {
content: "";
}
.l-toggle__line::before {
top: 5px;
}
.l-toggle__line::after {
top: 10px;
}
.l-toggle[aria-expanded="true"] .l-toggle__line {
top: 23px;
transform: rotate(45deg);
}
.l-toggle[aria-expanded="true"] .l-toggle__line::before {
top: 0;
opacity: 0;
transform: rotate(-45deg);
}
.l-toggle[aria-expanded="true"] .l-toggle__line::after {
top: 0;
transform: rotate(-90deg);
}
}
@media (max-width: 374px) {
.l-header__logo,
.l-header.is-scrolled .l-header__logo {
width: clamp(140px, 41vw, 160px);
padding: 6px 7px;
}
}
@media (min-width: 769px) {
.l-header__logo {
box-sizing: content-box;
padding: 12px 14px;
background-color: var(--c-white);
border-radius: 20px;
}
.l-header.is-scrolled .l-header__logo {
padding: 0;
}
}
.l-side-tab {
position: fixed;
right: -340px;
bottom: 217px;
z-index: 900;
display: flex;
width: 423px;
height: 217px;
color: #fff;
background-color: var(--c-tab-face);
border-radius: 30px 0 0 20px;
transition: right .3s ease-in-out, transform .4s var(--ease), opacity .4s var(--ease);
}
.l-side-tab.is-open {
right: 0;
}
.l-side-tab.is-away {
pointer-events: none;
opacity: 0;
transform: translateX(100%);
}
.l-side-tab__tab {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 83px;
height: 100%;
color: inherit;
border-radius: 30px 0 0 20px;
}
.l-side-tab__tab-text {
font-size: 19px;
font-weight: 700;
line-height: 1.35;
letter-spacing: .06em;
text-align: start;
writing-mode: vertical-rl;
text-orientation: upright;
}
.l-side-tab__panel {
flex: 1;
height: 100%;
}
.l-side-tab__link {
position: relative;
display: flex;
align-items: center;
height: 100%;
padding: 12px 0 11px 21px;
color: inherit;
}
.l-side-tab__img {
width: 266px;
height: 192px;
object-fit: cover;
border-radius: 16px;
}
.l-side-tab__label {
margin-left: 14px;
font-size: 19px;
font-weight: 700;
line-height: 1.2;
letter-spacing: .1em;
writing-mode: vertical-rl;
}
@media (max-width: 768px) {
.l-side-tab {
display: none;
}
}
.l-tel-bar {
display: none;
}
@media (max-width: 768px) {
.l-tel-bar {
position: fixed;
right: 18px;
bottom: 0;
left: 18px;
z-index: 950;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: var(--telbar-h);
padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
color: var(--c-on-main);
text-align: center;
background-color: var(--c-main-face);
border-radius: 30px 30px 0 0;
}
.is-drawer-open .l-tel-bar {
display: none;
}
.l-tel-bar {
transition: transform .4s var(--ease), visibility 0s;
}
.is-mv-in .l-tel-bar {
visibility: hidden;
transform: translateY(100%);
transition: transform .4s var(--ease), visibility 0s .4s;
}
.l-tel-bar__icon {
position: relative;
top: 2px;
flex-shrink: 0;
width: 24px;
height: 24px;
background: url(../images/icon/tel.svg?v=964019e8) 50% / 22px auto no-repeat;
}
.l-tel-bar__label {
font-size: 19px;
font-weight: 700;
line-height: 1.3;
}
.l-tel-bar__num {
display: flex;
gap: 6px;
align-items: center;
font-size: 22px;
font-weight: 700;
line-height: 1.25;
letter-spacing: .06em;
}
}
@media (max-width: 360px) {
.l-tel-bar {
right: 8px;
left: 8px;
padding-right: 8px;
padding-left: 8px;
}
}
.js.is-ani-ready .js-ani:not(.is-in) {
opacity: 0;
}
.js.is-ani-ready .js-ani[data-ani="rise"]:not(.is-in) {
transform: rotate(-10deg);
transform-origin: 0 100%;
}
.js.is-ani-ready .js-ani[data-ani="fade"]:not(.is-in) {
transform: translateY(30px);
}
.js-ani.is-in[data-ani="rise"] {
transform-origin: 0 100%;
animation: c-ani-rise .3s var(--ani-delay, 0s) both;
}
.js-ani.is-in[data-ani="fade"] {
animation: c-ani-fade .8s var(--ani-delay, 0s) var(--ease) both;
}
@keyframes c-ani-rise {
0% { opacity: 0; transform: rotate(-10deg); }
15% { opacity: 1; }
36% { transform: rotate(0); animation-timing-function: ease-out; }
54% { transform: rotate(-2.5deg); animation-timing-function: ease-in; }
73% { transform: rotate(0); animation-timing-function: ease-out; }
86% { transform: rotate(-.6deg); animation-timing-function: ease-in; }
100% { opacity: 1; transform: rotate(0); }
}
@keyframes c-ani-fade {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: none; }
}
.c-arrow {
position: relative;
display: inline-block;
flex-shrink: 0;
width: clamp(38px, 2.777vw, 40px);
height: clamp(38px, 2.777vw, 40px);
vertical-align: middle;
background: var(--c-main) url(../images/icon/arrow.svg?v=be649064) 50% 50% / 10px 11px no-repeat;
border-radius: 50%;
transition: all .3s var(--ease);
}
.c-arrow--m {
width: clamp(24px, 3.333vw, 48px);
height: clamp(24px, 3.333vw, 48px);
background-color: var(--c-main);
}
.c-arrow--l {
width: clamp(38px, 4.305vw, 62px);
height: clamp(38px, 4.305vw, 62px);
background-color: var(--c-main);
background-size: 17px 15.5px;
}
.c-arrow--white {
background-color: var(--c-white);
background-image: url(../images/icon/arrow-main.svg?v=75566335);
}
.c-arrow--out {
width: clamp(20px, 2.777vw, 40px);
height: clamp(20px, 2.777vw, 40px);
background-color: var(--c-main);
background-size: 9px 10px;
transform: rotate(-45deg);
}
@media (max-width: 768px) {
.c-arrow--l {
width: 38px;
height: 38px;
background-size: 9.5px 10.5px;
}
}
.c-breadcrumb {
position: relative;
z-index: 2;
font-size: 12px;
}
.c-breadcrumb__list {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.c-breadcrumb__item {
display: flex;
align-items: center;
}
.c-breadcrumb__item + .c-breadcrumb__item::before {
display: inline-block;
width: 5px;
height: 8px;
margin: 0 19px;
content: "";
background: url(../images/icon/gt.svg?v=a76cb3de) 50% / contain no-repeat;
}
.c-breadcrumb__link {
font-size: 12px;
font-weight: 500;
line-height: 2;
color: var(--c-gray-s);
}
.c-breadcrumb__link:hover {
text-decoration: underline;
}
.c-breadcrumb__current {
font-size: clamp(12px, .972vw, 14px);
font-weight: 700;
line-height: 2;
color: var(--c-text);
}
@media (max-width: 768px) {
.c-breadcrumb {
padding: 0 12px;
}
.c-breadcrumb__item + .c-breadcrumb__item::before {
margin: 0 10px;
}
}
.c-btn {
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: clamp(276px, 21.458vw, 309px);
padding: 8px 8px 8px 30px;
font-size: 14px;
font-weight: 700;
line-height: 1.8;
color: var(--c-text);
text-align: left;
letter-spacing: .04em;
background-color: var(--c-white);
border: 2px solid var(--c-main);
border-radius: 50px;
}
.c-btn:hover .c-arrow {
background-position-x: 65%;
}
.c-btn--center {
margin-right: auto;
margin-left: auto;
}
.c-btn--main {
max-width: min(100%, clamp(324px, 26.388vw, 380px));
font-size: 19px;
color: var(--c-on-main);
background-color: var(--c-main-face);
border-color: var(--c-main-face);
}
.c-btn--main .c-arrow {
width: clamp(38px, 4.305vw, 62px);
height: clamp(38px, 4.305vw, 62px);
background-color: var(--c-white);
background-image: url(../images/icon/arrow-main.svg?v=75566335);
background-size: 16px 17px;
}
@media (max-width: 768px) {
.c-btn {
padding: 6px 8px 6px 30px;
}
.c-btn--main .c-arrow {
width: 38px;
height: 38px;
background-size: 9px 10px;
}
}
.c-btn__text {
min-width: 0;
}
@media (max-width: 374px) {
.c-btn--main {
padding-left: 18px;
font-size: 17px;
letter-spacing: 0;
}
}
@media (max-width: 374px) {
.c-btn--main[href^="tel:"] .c-btn__text {
font-size: 15px;
}
}
.c-btn--tel {
min-height: 80px;
padding-top: 12px;
padding-bottom: 12px;
}
.c-btn--tel .c-btn__text {
display: flex;
flex-direction: column;
}
.c-btn--tel .c-btn__tel-main {
display: flex;
gap: 8px;
align-items: center;
}
.c-btn--tel .c-btn__tel-icon {
flex: none;
width: 1.05em;
height: 1.05em;
background-color: currentColor;
-webkit-mask: url(../images/icon/tel-main.svg?v=6701b3e1) 50% / contain no-repeat;
mask: url(../images/icon/tel-main.svg?v=6701b3e1) 50% / contain no-repeat;
}
.c-btn--tel .c-btn__tel-sub {
margin-top: 2px;
font-size: 13px;
font-weight: 500;
line-height: 1.5;
}
@media (max-width: 768px) {
.c-btn--tel {
min-height: 62px;
}
.c-btn--tel .c-btn__tel-sub {
font-size: 11px;
}
}
.c-copy {
--copy-b: 136px;
display: inline-flex;
flex-direction: column;
align-items: flex-start;
font-family: var(--f-maru);
font-weight: 700;
line-height: 1;
color: var(--c-text);
letter-spacing: 0;
}
.c-copy__row {
display: flex;
align-items: flex-end;
}
.c-copy__row--1 {
gap: calc(var(--copy-b) * .03);
}
.c-copy__row--2 {
align-self: flex-end;
margin-top: calc(var(--copy-b) * .2);
margin-right: calc(var(--copy-b) * .18);
}
.c-copy__ch {
display: inline-block;
transform: translateY(var(--ty, 0)) rotate(var(--rot, 0deg));
}
.c-copy__ch--1 { --rot: -6deg; font-size: calc(var(--copy-b) * .9); }
.c-copy__ch--2 { --rot: 3deg; --ty: calc(var(--copy-b) * -.05); font-size: calc(var(--copy-b) * .7); }
.c-copy__ch--3 { --rot: -4deg; --ty: calc(var(--copy-b) * -.02); font-size: calc(var(--copy-b) * .36); }
.c-copy__ch--4 { --rot: 4deg; --ty: calc(var(--copy-b) * -.08); font-size: calc(var(--copy-b) * .8); }
.c-copy__ch--5 { --rot: -6deg; --ty: calc(var(--copy-b) * .01); font-size: calc(var(--copy-b) * .36); }
.c-copy__ch--6 { --rot: 4deg; --ty: calc(var(--copy-b) * -.03); font-size: calc(var(--copy-b) * .36); }
.c-copy__ch--7 { --rot: -8deg; --ty: calc(var(--copy-b) * .02); font-size: calc(var(--copy-b) * .36); }
.c-copy__ch--8 { font-size: calc(var(--copy-b) * .26); letter-spacing: .06em; margin-right: -.06em; white-space: nowrap; }
.c-copy--footer {
--copy-b: clamp(84px, 6.18vw, 89px);
}
.c-cta {
position: relative;
width: 100%;
max-width: 1338px;
margin: 0 auto;
}
.c-cta__inner {
position: relative;
padding: clamp(80px, 8.611vw, 124px) 12px clamp(86px, 8.333vw, 120px);
color: var(--c-on-main);
text-align: center;
background-color: var(--c-main-face);
border-radius: 80px;
}
.c-cta__heading {
position: relative;
z-index: 1;
}
.c-cta__title {
font-size: clamp(28px, 3.333vw, 48px);
font-weight: 700;
line-height: 1;
letter-spacing: .16em;
}
.c-cta__read {
margin-top: clamp(18px, 2.5vw, 36px);
font-size: clamp(19px, 1.388vw, 20px);
font-weight: 700;
line-height: 2;
letter-spacing: .04em;
word-break: auto-phrase;
}
.c-cta__btn-wrap {
position: relative;
z-index: 1;
margin-top: clamp(36px, 4.166vw, 60px);
}
.c-cta__btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 380px;
min-height: 90px;
padding: 14px 12px 14px 40px;
margin: 0 auto;
color: var(--c-text);
text-align: left;
letter-spacing: .04em;
background-color: var(--c-white);
border-radius: 50px;
}
.c-cta__btn-text {
display: flex;
flex-direction: column;
}
.c-cta__btn-main {
display: flex;
align-items: center;
gap: 6px;
font-size: 20px;
font-weight: 700;
line-height: 1.5;
}
.c-cta__btn-icon {
flex: none;
width: 1.1em;
height: 1.1em;
background: url(../images/icon/tel-main.svg?v=6701b3e1) 50% / contain no-repeat;
}
.c-cta__btn-sub {
font-size: 13px;
font-weight: 500;
line-height: 1.5;
}
.c-cta__btn:hover .c-arrow {
background-position-x: 65%;
}
.c-cta__photo {
position: absolute;
overflow: hidden;
border-radius: 40px;
}
.c-cta__photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.c-cta__photo--1 {
top: -2.1rem;
left: -.8rem;
width: clamp(108px, 15.625vw, 225px);
aspect-ratio: 225 / 261;
}
.c-cta__photo--2 {
bottom: 1.2rem;
left: 5.5rem;
width: clamp(72px, 12.43vw, 179px);
aspect-ratio: 179 / 203;
}
.c-cta__photo--3 {
right: 3.8rem;
bottom: 3.2rem;
width: clamp(144px, 15.763vw, 227px);
aspect-ratio: 227 / 256;
}
@media (max-width: 768px) {
.c-cta {
max-width: 324px;
}
.c-cta__inner {
border-radius: 30px;
}
.c-cta__title {
line-height: 1.4;
}
.c-cta__read {
line-height: 1.8;
}
.c-cta__btn {
max-width: 270px;
min-height: 54px;
padding: 8px 8px 8px 24px;
}
.c-cta__btn-main {
font-size: 15px;
}
.c-cta__btn-sub {
font-size: 11px;
}
.c-cta__photo {
border-radius: 22px;
}
.c-cta__photo--1 {
top: -88px;
left: -14px;
width: 140px;
}
.c-cta__photo--2 {
bottom: -42px;
left: 12px;
width: 100px;
}
.c-cta__photo--3 {
right: -16px;
bottom: -74px;
width: 190px;
aspect-ratio: 144 / 110;
}
}
@media (min-width: 560px) and (max-width: 768px) {
.c-cta {
max-width: 600px;
}
}
.c-dots {
width: 100%;
height: 3px;
margin: 0;
background: url(../images/icon/dot.svg?v=3aa85b70) 0 0 / 10px 3px repeat-x;
border: 0;
}
.c-dots-top {
background: url(../images/icon/dot.svg?v=3aa85b70) 0 0 / 10px 3px repeat-x;
}
.c-dots-bottom {
background: url(../images/icon/dot.svg?v=3aa85b70) 0 100% / 10px 3px repeat-x;
}
.c-mv-slider {
position: relative;
z-index: 1;
width: 100%;
height: 705px;
overflow: hidden;
}
.c-mv-slider__track {
display: flex;
height: 100%;
}
.c-mv-slider__slide {
flex: 0 0 100%;
height: 100%;
}
.c-mv-slider__slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.c-mv-slider__nav {
position: absolute;
bottom: 175px;
left: 50%;
z-index: 12;
display: flex;
gap: 20px;
align-items: center;
justify-content: center;
transform: translateX(-50%);
}
.c-mv-slider__dots {
display: flex;
gap: 18px;
align-items: center;
}
.c-mv-slider__dot {
width: 10px;
height: 10px;
padding: 0;
background-color: rgba(255, 255, 255, .5);
border-radius: 50%;
transition: all .3s ease;
}
.c-mv-slider__dot:hover {
background-color: rgba(255, 255, 255, .8);
transform: scale(1.1);
}
.c-mv-slider__dot[aria-current="true"] {
background-color: var(--c-main);
transform: scale(1.4);
}
.c-mv-slider__prev,
.c-mv-slider__next {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
background: var(--c-main-face) url(../images/icon/chevron.svg?v=319a2130) 52% 50% / 7px 11px no-repeat;
border-radius: 50%;
transition: all .3s ease;
}
.c-mv-slider__prev {
transform: scaleX(-1);
}
.c-mv-slider__next:hover {
transform: scale(1.1);
}
.c-mv-slider__prev:hover {
transform: scale(-1.1, 1.1);
}
.c-mv-slider:not(.is-ready) .c-mv-slider__nav {
display: none;
}
@media (max-width: 768px) {
.c-mv-slider {
height: 256px;
}
.c-mv-slider__nav {
bottom: 60px;
gap: 15px;
}
.c-mv-slider__dots {
gap: 12px;
}
.c-mv-slider__prev,
.c-mv-slider__next {
width: 30px;
height: 30px;
}
}
.c-facility-heading {
position: relative;
width: 100%;
padding: clamp(12.5px, 1.736vw, 25px) 25px clamp(35px, 4.861vw, 70px);
}
.c-facility-heading::before,
.c-facility-heading::after {
position: absolute;
z-index: -1;
content: "";
background: 50% / contain no-repeat;
}
.c-facility-heading::before {
top: clamp(30px, 4.166vw, 60px);
left: 26px;
width: clamp(71.5px, 9.93vw, 143px);
height: clamp(65.5px, 9.097vw, 131px);
background-image: url(../images/tsumiki/head-l.svg?v=7fca43c2);
}
.c-facility-heading::after {
top: clamp(16px, 2.222vw, 32px);
right: 25px;
width: clamp(67px, 9.305vw, 134px);
height: clamp(84.5px, 11.736vw, 169px);
background-image: url(../images/tsumiki/head-r.svg?v=1df1d075);
}
.c-facility-heading__inner {
width: 100%;
max-width: clamp(382.5px, 53.125vw, 765px);
margin: 0 auto;
text-align: center;
}
.c-facility-heading__title {
margin-bottom: 6px;
font-size: clamp(22px, 2.222vw, 32px);
font-weight: 700;
line-height: 2;
letter-spacing: .24em;
}
.c-facility-heading__logo {
display: block;
width: auto;
height: clamp(30px, 2.9vw, 42px);
margin: 0 auto;
}
.c-facility-heading__types {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: -6px 0 0 -6px;
}
.c-facility-heading__type {
display: inline-block;
padding: 6px 12px;
margin: 6px 0 0 6px;
font-size: 14px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
background-color: var(--c-type-jihatsu);
border-radius: 20px;
}
.c-facility-heading__lead {
margin-top: clamp(22px, 2.083vw, 30px);
font-size: clamp(14px, 1.111vw, 16px);
font-weight: 500;
line-height: 2;
letter-spacing: .04em;
}
.c-facility-heading__tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 16px 0 0;
}
.c-facility-heading__tag {
position: relative;
display: inline-block;
padding-bottom: 6px;
margin: 8px 0 0;
font-size: 14px;
font-weight: 500;
line-height: 1;
color: var(--c-main-s);
}
.c-facility-heading__tag::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
content: "";
background-color: var(--c-main-s);
}
.c-facility-heading__tag:not(:first-child) {
margin-left: 14px;
}
@media (max-width: 768px) {
.c-facility-heading {
padding: 18px 18px 40px;
}
.c-facility-heading::before,
.c-facility-heading::after {
display: none;
}
.c-facility-heading__title {
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
}
.c-facility-heading__title::before,
.c-facility-heading__title::after {
flex-shrink: 0;
width: 46px;
height: 46px;
content: "";
background: 50% / contain no-repeat;
}
.c-facility-heading__title::before {
margin-left: -14px;
background-image: url(../images/tsumiki/head-l.svg?v=7fca43c2);
}
.c-facility-heading__title::after {
margin-right: -14px;
background-image: url(../images/tsumiki/head-r.svg?v=1df1d075);
}
.c-facility-heading__title {
margin-bottom: 12px;
line-height: 1.4;
letter-spacing: .04em;
}
.c-facility-heading__tags {
justify-content: flex-start;
margin: 14px 0 12px -18px;
}
.c-facility-heading__tag,
.c-facility-heading__tag:not(:first-child) {
margin: 14px 0 0 18px;
}
}
@media (max-width: 374px) {
.c-facility-heading__title {
gap: 6px;
font-size: 19px;
}
.c-facility-heading__title::before,
.c-facility-heading__title::after {
width: 40px;
height: 40px;
}
}
.c-mv-slider__prev,
.c-mv-slider__next,
.c-mv-slider__dot {
position: relative;
}
.c-mv-slider__prev::after,
.c-mv-slider__next::after {
position: absolute;
inset: -8px;
content: "";
}
.c-mv-slider__dot::after {
position: absolute;
inset: -7px;
content: "";
}
.c-facility-heading::before,
.c-facility-heading::after,
.c-facility-heading__title::before,
.c-facility-heading__title::after {
display: none;
}
.c-heading {
position: relative;
margin-bottom: clamp(30px, 4.166vw, 60px);
text-align: center;
}
.c-heading__title {
font-size: clamp(26px, 2.638vw, 38px);
font-weight: 700;
line-height: 2;
letter-spacing: .24em;
}
.c-heading__read {
margin-top: clamp(16px, 1.388vw, 20px);
font-size: clamp(15px, 1.25vw, 18px);
font-weight: 500;
line-height: 1.8;
letter-spacing: .04em;
}
.c-heading--left {
text-align: left;
}
@media (max-width: 768px) {
.c-heading__title {
line-height: 1.6;
letter-spacing: .2em;
}
.c-heading--left {
text-align: center;
}
}
.c-title {
position: relative;
margin: 0 auto clamp(22px, 3.055vw, 44px);
font-size: clamp(20px, 1.944vw, 28px);
font-weight: 700;
line-height: 1;
text-align: center;
letter-spacing: .04em;
}
.c-title__text {
position: relative;
display: inline-block;
}
.c-title--lr .c-title__text {
padding: 0 clamp(12px, 1.388vw, 20px);
}
.c-title--lr .c-title__text::before,
.c-title--lr .c-title__text::after,
.c-title--r .c-title__text::after,
.c-title--b .c-title__text::after {
position: absolute;
content: "";
background: 50% / contain no-repeat;
}
.c-title--lr .c-title__text::before {
top: 50%;
right: 100%;
width: clamp(66px, 6.736vw, 97px);
height: clamp(16px, 1.597vw, 23px);
background-image: url(../images/tsumiki/deco-l.svg?v=dd8d195e);
transform: translateY(-50%);
}
.c-title--lr .c-title__text::after {
top: 50%;
left: 100%;
width: clamp(65px, 6.458vw, 93px);
height: clamp(15px, 1.458vw, 21px);
background-image: url(../images/tsumiki/deco-r.svg?v=ccf8a975);
transform: translateY(-50%);
}
.c-title--r .c-title__text {
padding: 0 clamp(4px, 1.388vw, 20px) 0 0;
}
.c-title--r .c-title__text::after {
top: 50%;
left: 100%;
width: clamp(61px, 6.458vw, 93px);
height: clamp(14px, 1.458vw, 21px);
background-image: url(../images/tsumiki/deco-r2.svg?v=4e45241d);
transform: translateY(-50%);
}
.c-title--b .c-title__text {
padding-bottom: 30px;
font-size: clamp(26px, 2.638vw, 38px);
line-height: 2;
letter-spacing: .24em;
}
.c-title--b .c-title__text::after {
bottom: 0;
left: 50%;
width: 60px;
height: 19px;
background-image: url(../images/tsumiki/deco-b.svg?v=c92819b8);
transform: translateX(-50%);
}
@media (max-width: 768px) {
.c-title--r .c-title__text {
padding-right: 4px;
}
.c-title--b .c-title__text {
padding-bottom: 40px;
line-height: 1.6;
letter-spacing: .2em;
}
}
.c-title--h3 {
font-size: clamp(18px, 1.527vw, 22px);
line-height: 2;
}
.c-kari {
display: inline-block;
padding: 4px 12px;
font-size: 13px;
font-weight: 700;
line-height: 1.4;
color: var(--c-text);
letter-spacing: .08em;
white-space: nowrap;
vertical-align: middle;
background-color: var(--c-pale);
border: 1px dashed var(--c-gray);
border-radius: 25px;
}
.c-kari-box {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
justify-content: center;
width: 100%;
padding: 16px;
font-size: 14px;
line-height: 1.6;
color: var(--c-text);
text-align: center;
background-color: var(--c-pale);
border: 2px dashed var(--c-gray);
border-radius: 20px;
}
.c-notch-mark {
--mark: var(--c-tsumiki-salmon);
--mark-size: 48px;
position: absolute;
right: 0;
bottom: 0;
width: var(--mark-size);
height: var(--mark-size);
pointer-events: none;
background-color: var(--mark);
border-radius: 50%;
}
.c-notch-mark[data-shape="tri"] {
border-radius: 0;
clip-path: polygon(50% 6%, 98% 94%, 2% 94%);
}
.c-notch-mark[data-shape="half"] {
width: calc(var(--mark-size) * 1.08);
height: calc(var(--mark-size) * .54);
margin-bottom: calc(var(--mark-size) * .2);
border-radius: var(--mark-size) var(--mark-size) 4px 4px;
}
.c-notch-mark[data-shape="square"] {
width: calc(var(--mark-size) * .86);
height: calc(var(--mark-size) * .86);
margin: 0 calc(var(--mark-size) * .07) calc(var(--mark-size) * .07) 0;
border-radius: 10px;
}
.c-notch-mark[data-shape="holed"] {
width: calc(var(--mark-size) * .86);
height: calc(var(--mark-size) * .86);
margin: 0 calc(var(--mark-size) * .07) calc(var(--mark-size) * .07) 0;
background-color: var(--mark);
border-radius: 10px;
-webkit-mask: radial-gradient(circle, transparent 0 27%, #000 28%);
mask: radial-gradient(circle, transparent 0 27%, #000 28%);
}
@media (max-width: 768px) {
.c-notch-mark {
--mark-size: 38px;
}
}
.c-page-head {
position: relative;
z-index: 1;
width: 100%;
max-width: 1440px;
padding: 0 clamp(18px, 6.666vw, 96px);
margin: 0 auto;
}
.c-page-head__inner {
position: relative;
width: 100%;
max-width: 1248px;
margin: 0 auto;
}
.c-page-head__heading {
position: absolute;
left: 50%;
width: 100%;
text-align: center;
transform: translateX(-50%);
}
.c-page-head__title {
padding: 0;
margin: 0;
font-size: clamp(26px, 2.638vw, 38px);
font-weight: 700;
line-height: 1.6;
letter-spacing: .04em;
}
.c-page-head__sub {
display: inline-block;
font-size: clamp(15px, 1.25vw, 18px);
font-weight: 500;
line-height: 2;
letter-spacing: .04em;
transform: translateY(-20px);
}
.c-page-head__sub:empty {
display: none;
}
.c-page-head--post {
height: clamp(97.5px, 13.541vw, 195px);
}
.c-page-head--news {
background: url(../images/tsumiki/band-news.svg?v=0c2fff4e) 50% 100% / clamp(636.5px, 88.402vw, 1273px) auto no-repeat;
}
.c-page-head--news .c-page-head__inner {
height: clamp(233px, 25.694vw, 370px);
}
.c-page-head--news .c-page-head__heading {
top: clamp(94px, 14.236vw, 205px);
}
.c-page-head--contact {
background: url(../images/tsumiki/band-contact.svg?v=ebbcd05c) 50% 100% / clamp(623.5px, 86.597vw, 1247px) auto no-repeat;
}
.c-page-head--contact .c-page-head__inner {
height: clamp(179px, 25.694vw, 370px);
}
.c-page-head--contact .c-page-head__heading {
top: clamp(96px, 14.236vw, 205px);
}
@media (max-width: 768px) {
.c-page-head--post {
height: clamp(46px, 26.571vw, 93px);
}
.c-page-head--news {
background:
url(../images/tsumiki/band-news-l.svg?v=ab5bb746) 0 100% / clamp(86px, 49.142vw, 172px) auto no-repeat,
url(../images/tsumiki/band-news-r.svg?v=40860547) 100% 100% / clamp(49px, 28vw, 98px) auto no-repeat;
}
.c-page-head__sub {
transform: none;
}
.c-page-head--contact {
background:
url(../images/tsumiki/band-contact-l.svg?v=46fcce73) 0 100% / clamp(63px, 36vw, 126px) auto no-repeat,
url(../images/tsumiki/band-contact-r.svg?v=55d0b912) 100% 100% / clamp(79px, 45.142vw, 158px) auto no-repeat;
}
.c-page-head--contact .c-page-head__heading {
top: clamp(42px, 27.428vw, 96px);
}
}
.c-tsumiki-svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
.c-tsumiki-stack {
position: relative;
width: 100%;
height: 100%;
}
.c-tsumiki-piece {
position: absolute;
display: block;
overflow: visible;
transform-box: border-box;
}
.c-tsumiki-fall {
transform-box: fill-box;
transform-origin: 50% 50%;
will-change: transform;
}
.js .c-tsumiki-fall {
animation: c-tsumiki-fall .5s var(--d, 0s) cubic-bezier(.34, 1.25, .64, 1) both;
}
.js .c-tsumiki-fall > g[filter] {
animation: c-tsumiki-nolit calc(.5s + var(--d, 0s)) linear;
}
@keyframes c-tsumiki-nolit {
from,
to {
filter: none;
}
}
@keyframes c-tsumiki-fall {
from {
transform: translateY(-1500px) rotate(var(--r, 0deg));
}
}
.page-about,
.page-philosophy {
--cta-gap: 0px;
}
.p-about__table {
padding-top: 3px;
margin-top: clamp(50px, 4.166vw, 60px);
background: url(../images/icon/dot.svg?v=3aa85b70) 0 0 / 10px 3px repeat-x;
}
.p-about__row {
display: flex;
padding: clamp(12px, 1.666vw, 24px) 0 clamp(13.5px, 1.875vw, 27px);
font-size: clamp(16px, 1.25vw, 18px);
line-height: 1.7;
background: url(../images/icon/dot.svg?v=3aa85b70) 0 100% / 10px 3px repeat-x;
}
.p-about__th {
flex: 1 0 clamp(107.5px, 14.93vw, 215px);
padding-right: 1em;
font-weight: 700;
letter-spacing: .06em;
}
.p-about__td {
flex: 0 1 100%;
font-weight: 500;
}
.p-about__tel {
text-decoration: underline;
text-underline-offset: .2em;
}
@media (max-width: 768px) {
.p-about__overview,
.p-about__access {
padding: 0 12px;
}
.p-about__table {
padding-top: 0;
background: none;
}
.p-about__row {
display: block;
padding: 0 0 18px;
margin: 0 0 14px;
}
.p-about__row:last-child {
margin: 0;
}
.p-about__th {
padding-right: 0;
line-height: 1;
}
.p-about__td {
margin-top: 12px;
}
}
.p-about__access-body {
margin-top: clamp(30px, 3.472vw, 50px);
}
.p-about__map {
position: relative;
padding-top: 56.25%;
overflow: hidden;
background-color: var(--c-pale);
border-radius: clamp(26px, 2.777vw, 40px);
}
.p-about__map iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.p-about__address {
margin-top: clamp(20px, 2.083vw, 30px);
font-size: clamp(14px, 1.25vw, 18px);
font-weight: 500;
line-height: 1.7;
text-align: center;
}
.p-about__maplink {
margin-top: clamp(10px, 1.25vw, 18px);
text-align: center;
}
.p-about__maplink a {
display: inline-block;
font-size: 14px;
font-weight: 500;
line-height: 1.7;
text-decoration: underline;
text-underline-offset: .3em;
}
.p-brand {
position: relative;
padding: clamp(60px, 12.152vw, 175px) 0;
overflow: hidden;
background: url(../images/tsumiki/pattern.svg?v=d750b7e3) 0 0 / 1535px auto repeat;
}
.p-brand__part {
position: relative;
scroll-margin-top: calc(var(--header-h) + 20px);
}
.p-brand__part + .p-brand__part {
margin-top: clamp(67px, 9.305vw, 134px);
}
.p-brand__heading {
position: relative;
text-align: center;
}
.p-brand__logo {
display: flex;
justify-content: center;
height: clamp(28px, 2.569vw, 37px);
margin-bottom: 13px;
}
.p-brand__logo img {
width: auto;
height: 100%;
object-fit: contain;
}
.p-brand__heading .p-brand__title {
margin-bottom: clamp(32px, 4.861vw, 70px);
}
.p-brand__title--day .c-title__text::after {
background-image: url(../images/tsumiki/deco-b2.svg?v=70699dca);
}
.p-about__title--overview .c-title__text::after {
background-image: url(../images/tsumiki/deco-b4.svg?v=477d764f);
}
.p-about__title--access .c-title__text::after {
background-image: url(../images/tsumiki/deco-b5.svg?v=74aae60c);
}
.p-brand__contents {
width: 100%;
max-width: 1128px;
padding: 0 36px;
margin: 0 auto;
}
.p-brand__row {
display: flex;
align-items: center;
justify-content: center;
}
.p-brand__image {
flex: 0 1 clamp(252px, 35vw, 504px);
width: clamp(252px, 35vw, 504px);
height: clamp(225px, 31.25vw, 450px);
margin: 0 auto;
overflow: hidden;
border-radius: clamp(30px, 4.166vw, 60px);
}
.p-brand__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.p-brand__detail {
flex: 0 1 50%;
padding-left: clamp(37.5px, 5.208vw, 75px);
}
.p-brand__copy {
font-size: clamp(22px, 2.638vw, 38px);
font-weight: 700;
line-height: 1.6;
letter-spacing: .12em;
}
.p-brand__lead {
margin-top: clamp(18px, 2.222vw, 32px);
font-size: clamp(15px, 1.111vw, 16px);
font-weight: 500;
line-height: 1.8;
letter-spacing: .04em;
}
.p-brand__lead p + p {
margin-top: 1.8em;
}
.p-brand__policy {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(16px, 2.222vw, 32px);
margin-top: clamp(40px, 4.861vw, 70px);
}
.p-brand__policy-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: clamp(220px, 19.444vw, 280px);
padding: clamp(32px, 3.333vw, 48px) clamp(20px, 2.777vw, 40px);
text-align: center;
background-color: var(--c-white);
border-radius: clamp(30px, 3.333vw, 48px);
}
.p-brand__policy-title {
display: inline-block;
padding: 6px 18px;
font-size: clamp(14px, 1.111vw, 16px);
font-weight: 700;
line-height: 1.5;
letter-spacing: .16em;
background-color: var(--c-ground);
border-radius: 999px;
}
.p-brand__policy-text {
position: relative;
z-index: 1;
margin-top: clamp(16px, 1.666vw, 24px);
font-family: var(--f-maru);
font-size: clamp(24px, 2.5vw, 36px);
font-weight: 700;
line-height: 1.6;
letter-spacing: .12em;
}
.p-brand__inner {
position: relative;
width: 100%;
max-width: clamp(444px, 61.666vw, 888px);
padding: clamp(23px, 3.194vw, 46px) clamp(18px, 2.5vw, 36px);
margin: 0 auto;
}
.p-brand__text {
font-size: clamp(15px, 1.25vw, 18px);
font-weight: 500;
line-height: 1.8;
text-align: center;
letter-spacing: .04em;
}
@media (max-width: 768px) {
.p-brand {
padding: 60px 0 120px;
background-size: 480px auto;
}
.p-brand__row {
display: block;
}
.p-brand__image {
width: 100%;
}
.p-brand__detail {
padding-top: 24px;
padding-left: 0;
}
.p-brand__part--row .p-brand__row {
display: flex;
flex-direction: column-reverse;
}
.p-brand__part--row .p-brand__detail {
padding-top: 0;
padding-bottom: 24px;
}
.p-brand__policy {
grid-template-columns: 1fr;
}
.p-brand__policy-box {
min-height: 180px;
}
.p-brand__text {
margin-top: 28px;
text-align: left;
}
.p-brand__title + .p-brand__text {
margin-top: 0;
}
}
.p-brand__contents + .p-flow {
margin-top: clamp(60px, 8.333vw, 120px);
}
.p-brand__inner + .p-flow {
margin-top: clamp(22px, 3.055vw, 44px);
}
.p-flow {
position: relative;
width: 100%;
overflow: hidden;
--flow-dur: 52s;
}
.p-flow__track {
display: flex;
width: max-content;
animation: p-flow var(--flow-dur) linear infinite;
}
.p-flow__list {
display: flex;
flex: none;
align-items: flex-start;
}
.p-flow__slide {
flex: none;
height: clamp(206px, 29.583vw, 426px);
margin-left: clamp(15px, 2.083vw, 30px);
overflow: hidden;
border-radius: 40px;
}
.p-flow__slide--w {
aspect-ratio: 670 / 426;
}
.p-flow__slide--t {
aspect-ratio: 335 / 426;
}
.p-flow__slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
@keyframes p-flow {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (max-width: 768px) {
.p-brand__contents + .p-flow {
margin-top: 41px;
}
.p-brand__inner + .p-flow {
margin-top: 6px;
}
.p-flow {
--flow-dur: 42s;
}
}
@media (prefers-reduced-motion: reduce) {
.p-flow__track {
animation: none;
}
}
.p-brand__title--yaru .c-title__text::after {
background-image: url(../images/tsumiki/deco-b2.svg?v=70699dca);
}
.p-yaru {
width: 100%;
max-width: 1128px;
padding: 0 36px;
margin: 0 auto;
}
.p-yaru__item {
--yaru: var(--c-main);
--yaru-tag: var(--c-sub2);
}
.p-yaru__list {
display: grid;
gap: clamp(48px, 5.555vw, 80px);
padding: 0;
margin: 0;
list-style: none;
}
.p-yaru__item {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(32px, 4.444vw, 64px);
align-items: center;
}
.p-yaru__item:nth-child(even) .p-yaru__image {
order: 2;
}
.p-yaru__image {
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: clamp(30px, 3.333vw, 48px);
}
.p-yaru__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.p-yaru__num {
display: inline-block;
padding-bottom: 4px;
font-family: var(--f-maru);
font-size: clamp(15px, 1.25vw, 18px);
font-weight: 700;
line-height: 1;
color: var(--c-text);
letter-spacing: .12em;
border-bottom: 4px solid var(--yaru);
}
.p-yaru__title {
margin-top: clamp(12px, 1.111vw, 16px);
font-size: clamp(22px, 2.222vw, 32px);
font-weight: 700;
line-height: 1.5;
letter-spacing: .08em;
}
.p-yaru__text {
margin-top: clamp(12px, 1.111vw, 16px);
font-size: clamp(15px, 1.111vw, 16px);
font-weight: 500;
line-height: 1.8;
letter-spacing: .04em;
}
.p-yaru__why {
padding: clamp(18px, 1.666vw, 24px) clamp(20px, 1.944vw, 28px);
margin-top: clamp(18px, 1.666vw, 24px);
background-color: var(--c-white);
border-radius: clamp(16px, 1.388vw, 20px);
}
.p-yaru__why-title {
display: block;
width: fit-content;
padding: 3px 14px 4px;
font-size: 14px;
font-weight: 700;
line-height: 1.5;
color: var(--c-text);
letter-spacing: .12em;
background-color: var(--yaru-tag);
border-radius: 999px;
}
.p-yaru__why-text {
margin-top: 10px;
margin-bottom: calc((1em - 1lh) / 2);
font-size: clamp(15px, 1.111vw, 16px);
font-weight: 500;
line-height: 1.8;
letter-spacing: .04em;
}
@media (max-width: 768px) {
.p-yaru {
padding: 0 20px;
}
.p-yaru__list {
gap: 48px;
}
.p-yaru__item {
grid-template-columns: minmax(0, 1fr);
gap: 20px;
}
.p-yaru__item:nth-child(even) .p-yaru__image {
order: 0;
}
.p-yaru__image {
aspect-ratio: 3 / 2;
border-radius: 30px;
}
.p-yaru__item {
gap: 0;
}
.p-yaru__body {
display: contents;
}
.p-yaru__num {
order: 1;
justify-self: start;
}
.p-yaru__title {
order: 2;
margin-top: 10px;
}
.p-yaru__item .p-yaru__image,
.p-yaru__item:nth-child(even) .p-yaru__image {
order: 3;
margin-top: 16px;
}
.p-yaru__text {
order: 4;
margin-top: 16px;
}
.p-yaru__why {
order: 5;
}
}
.page-news-single .p-article__body h3 {
position: relative;
padding: 0 0 14px 1.9em;
margin: clamp(44px, 5vw, 64px) 0 clamp(18px, 2vw, 26px);
font-size: clamp(18px, 1.527vw, 22px);
font-weight: 700;
line-height: 1.5;
letter-spacing: .04em;
background: url(../images/icon/dot.svg?v=3aa85b70) 0 100% / 10px 3px repeat-x;
}
.page-news-single .p-article__body h3::before {
position: absolute;
top: .3em;
left: 0;
width: .95em;
height: .95em;
content: "";
background-color: var(--c-tsumiki-salmon);
border-radius: 4px;
}
.page-news-single .p-article__body h3::after {
position: absolute;
top: .78em;
left: .62em;
width: .7em;
height: .7em;
content: "";
background-color: var(--c-tsumiki-yellow);
border-radius: 50%;
}
.page-news-single .p-article__body .is-style-nu-lead {
position: relative;
padding: clamp(40px, 4vw, 50px) clamp(22px, 3.4vw, 44px) clamp(22px, 2.8vw, 34px);
margin: 0 0 clamp(36px, 4vw, 52px);
background-color: var(--c-ground);
border-radius: clamp(20px, 2.5vw, 32px);
}
.page-news-single .p-article__body .is-style-nu-lead::before {
position: absolute;
top: clamp(18px, 1.8vw, 24px);
left: clamp(22px, 3.4vw, 44px);
width: 12px;
height: 12px;
content: "";
background-color: var(--c-tsumiki-salmon);
border-radius: 3px;
box-shadow: 18px 0 0 var(--c-tsumiki-yellow), 36px 0 0 var(--c-tsumiki-green);
}
.page-news-single .p-article__body .is-style-nu-lead p {
margin: 0;
font-size: 1.05em;
line-height: 2.1;
}
.page-news-single .p-article__body .is-style-nu-lead p + p {
margin-top: 12px;
}
.page-news-single .p-article__body ul {
padding: clamp(6px, .8vw, 10px) clamp(18px, 2.6vw, 34px);
margin: 24px 0;
list-style: none;
background-color: var(--c-white);
border: 2px solid var(--c-sub2);
border-radius: clamp(18px, 2vw, 26px);
}
.page-news-single .p-article__body ul li {
position: relative;
padding: 16px 0 16px 30px;
margin: 0;
line-height: 1.8;
background: url(../images/icon/dot.svg?v=3aa85b70) 0 100% / 10px 3px repeat-x;
}
.page-news-single .p-article__body ul li:last-child {
background: none;
}
.page-news-single .p-article__body ul li::before {
position: absolute;
top: 1.45em;
left: 4px;
width: 12px;
height: 12px;
content: "";
background-color: var(--c-main);
border-radius: 50%;
}
.page-news-single .p-article__body ul li strong {
color: var(--c-main-s);
}
.page-news-single .p-article__body ol {
padding: 0;
margin: 24px 0;
list-style: none;
counter-reset: nu-step;
}
.page-news-single .p-article__body ol li {
position: relative;
min-height: 36px;
padding: 4px 0 4px 52px;
margin: 16px 0;
line-height: 1.8;
list-style: none;
counter-increment: nu-step;
}
.page-news-single .p-article__body ol li::before {
position: absolute;
top: 2px;
left: 0;
width: 36px;
height: 36px;
font-size: 16px;
font-weight: 700;
line-height: 36px;
color: var(--c-main-s);
text-align: center;
content: counter(nu-step);
background-color: var(--c-white);
border: 2px solid var(--c-main);
border-radius: 50%;
}
.page-news-single .p-article__body ul.is-style-nu-dl li {
display: flex;
gap: 16px;
align-items: baseline;
padding-left: 0;
}
.page-news-single .p-article__body ul.is-style-nu-dl li::before {
display: none;
}
.page-news-single .p-article__body ul.is-style-nu-dl li strong {
flex: 0 0 6.4em;
padding: 3px 0;
font-size: 14px;
line-height: 1.6;
text-align: center;
background-color: var(--c-white);
border: 2px solid var(--c-main);
border-radius: 10px;
}
.page-news-single .p-article__body .is-style-nu-info {
padding: clamp(28px, 3.5vw, 44px) clamp(20px, 4vw, 52px);
margin: clamp(40px, 4.5vw, 60px) 0;
text-align: center;
background-color: var(--c-ground);
border: 2px solid var(--c-main);
border-radius: clamp(24px, 3vw, 40px);
}
.page-news-single .p-article__body .is-style-nu-info h3 {
padding: 0;
margin: 0 0 16px;
background: none;
}
.page-news-single .p-article__body .is-style-nu-info h3::before,
.page-news-single .p-article__body .is-style-nu-info h3::after {
display: none;
}
.page-news-single .p-article__body .is-style-nu-info p {
margin: 12px 0;
line-height: 2;
}
.page-news-single .p-article__body .is-style-nu-info p.nu-small {
font-size: 14px;
}
.page-news-single .p-article__body .wp-block-buttons {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin: 24px 0 12px;
}
.page-news-single .p-article__body .wp-block-button__link {
display: inline-flex;
gap: 10px;
align-items: center;
justify-content: center;
min-height: 62px;
padding: 10px clamp(28px, 4vw, 48px);
font-size: 19px;
font-weight: 700;
line-height: 1.4;
color: var(--c-on-main);
text-decoration: none;
letter-spacing: .04em;
background-color: var(--c-main-face);
border: none;
border-radius: 50px;
transition: opacity .3s var(--ease);
}
.page-news-single .p-article__body .wp-block-button__link:hover {
opacity: .85;
}
.page-news-single .p-article__body .wp-block-button__link[href^="tel:"]::before {
width: 22px;
height: 22px;
content: "";
background-color: var(--c-on-main);
-webkit-mask: url(../images/icon/tel.svg?v=964019e8) center / contain no-repeat;
mask: url(../images/icon/tel.svg?v=964019e8) center / contain no-repeat;
}
.page-news-single .p-article__body .is-style-nu-note {
padding: clamp(20px, 2.4vw, 28px) clamp(20px, 3vw, 36px);
margin: clamp(32px, 3.6vw, 48px) 0;
font-size: 15px;
border: 2px dotted var(--c-main);
border-radius: clamp(18px, 2vw, 26px);
}
.page-news-single .p-article__body .is-style-nu-note p {
margin: 0;
line-height: 2;
}
.page-news-single .p-article__body .is-style-nu-note p + p {
margin-top: 8px;
}
.page-news-single .p-article__body hr.wp-block-separator {
width: 100%;
height: 3px;
margin: clamp(40px, 4.5vw, 56px) 0;
background: url(../images/icon/dot.svg?v=3aa85b70) 0 0 / 10px 3px repeat-x;
border: none;
}
.page-news-single .p-article__body figure.wp-block-image {
margin: 32px 0;
}
.page-news-single .p-article__body figure.wp-block-image img {
display: block;
width: 100%;
height: auto;
border-radius: clamp(18px, 2.2vw, 28px);
}
.page-news-single .p-article__body figure.wp-block-image figcaption {
margin: 12px 0 0;
font-size: 14px;
line-height: 1.6;
text-align: center;
}
.page-news-single .p-article__body .wp-block-group p {
line-height: 2;
}
.p-article {
position: relative;
width: 100%;
max-width: clamp(383.5px, 53.263vw, 767px);
margin: calc(clamp(15px, 3.472vw, 50px) + 10px) auto 0;
}
@media (max-width: 768px) {
.p-article {
max-width: none;
margin-top: 25px;
}
}
.p-article__title {
font-size: clamp(24px, 2.222vw, 32px);
font-weight: 700;
line-height: 1.6;
letter-spacing: .04em;
}
.p-article__sub {
display: flex;
align-items: center;
margin-top: clamp(17px, 1.944vw, 28px);
}
.p-article__cat {
display: inline-block;
padding: 8px;
font-size: clamp(13px, .972vw, 14px);
font-weight: 700;
line-height: 1;
color: var(--c-main-s);
white-space: nowrap;
border: 2px solid currentColor;
border-radius: 10px;
}
.p-article__date {
margin-left: clamp(15px, 2.083vw, 30px);
font-size: 15px;
font-weight: 500;
line-height: 1.7;
letter-spacing: .06em;
}
@media (max-width: 768px) {
.p-article__title {
line-height: 1.4;
}
.p-article__cat {
padding: 6px 8px;
}
.p-article__date {
margin-left: 10px;
}
}
.p-article__body {
margin: clamp(51px, 5.486vw, 79px) 0;
font-size: clamp(16px, 1.25vw, 18px);
font-weight: 500;
}
.p-article__head + .p-article__body {
margin-top: clamp(51px, 5.486vw, 79px);
}
.p-article__body > h2 {
margin: clamp(30px, 2.777vw, 40px) 0;
font-size: clamp(18px, 1.527vw, 22px);
font-weight: 700;
line-height: 1.5;
}
.p-article__body > h3 {
margin: clamp(30px, 2.777vw, 40px) 0;
font-size: clamp(17px, 1.388vw, 20px);
font-weight: 700;
line-height: 1.5;
}
.p-article__body > h4 {
margin: clamp(30px, 2.777vw, 40px) 0;
font-size: clamp(16px, 1.25vw, 18px);
font-weight: 700;
line-height: 1.6;
}
.p-article__body > .p-article__step {
font-size: clamp(17px, 1.388vw, 20px);
color: var(--c-main-s);
}
@media (min-width: 1348px) {
.p-article__body > .p-article__step {
color: var(--c-main-l);
}
}
.p-article__body > p {
margin: 20px 0;
line-height: 2;
}
.p-article__body ul,
.p-article__body ol {
position: relative;
margin: 20px 0 20px 1.2em;
}
.p-article__body ul > li {
position: relative;
}
.p-article__body ul > li::before {
position: absolute;
left: -1.2em;
content: "・";
}
.p-article__body ol > li {
list-style: decimal;
}
.p-article__body li {
margin: 8px 0;
line-height: 1.6;
}
.p-article__body a {
color: var(--c-link-s);
text-decoration: underline;
text-decoration-color: var(--c-link-s);
text-underline-offset: .2em;
}
.p-article__body > a {
display: inline-block;
margin-top: 20px;
}
.p-article__body a:hover {
text-decoration: none;
}
.p-article__body > figure {
margin: 40px 0 30px;
}
.p-article__body > figure img {
max-width: 100%;
height: auto;
}
.p-article__body > figure figcaption {
margin: clamp(12px, 1.388vw, 20px) 0 0;
font-size: 14px;
line-height: 1.4;
}
.p-article__body strong {
font-weight: 700;
}
.p-article__body > blockquote {
padding-left: clamp(17px, 3.194vw, 46px);
margin: 20px 0;
border-left: 4px solid var(--c-gray);
}
.p-article__body > blockquote > p {
line-height: 2;
}
.p-article__body > hr {
height: 1px;
margin: 50px 0 40px;
background-color: var(--c-gray);
border: none;
}
.p-article__body > table {
width: 100%;
margin: 2rem 0;
border-collapse: collapse;
border-top: 1px solid var(--c-gray);
border-left: 1px solid var(--c-gray);
}
.p-article__body > table th {
background-color: var(--c-pale);
}
.p-article__body > table th,
.p-article__body > table td {
padding: 1rem;
text-align: left;
border-right: 1px solid var(--c-gray);
border-bottom: 1px solid var(--c-gray);
}
.p-article__marker {
padding: 0 10px;
line-height: 2;
background-color: var(--c-sub2);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.p-article__qa {
display: inline-block;
margin-right: .5em;
}
@media (max-width: 768px) {
.p-article__body > p,
.p-article__body ul,
.p-article__body ol {
margin-top: 30px;
margin-bottom: 30px;
}
.p-article__body > figure {
margin: 40px 0 26px;
}
.p-article__body > blockquote {
margin: 38px 0 30px;
}
.p-article__body > hr {
margin: 30px 0;
}
}
.p-article__body > .p-article__photo img {
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
}
.p-article__body > .p-article__photo--hana img {
object-position: 50% 42%;
}
.p-article__action {
margin: clamp(30px, 2.777vw, 40px) 0 60px;
}
.p-article__hours {
margin: 8px 0 0;
font-size: 14px;
text-align: center;
}
.p-article__action .c-btn--main {
margin: 0 auto;
}
.p-article__back {
margin: clamp(28px, 4.236vw, 61px) auto clamp(40px, 5.555vw, 80px);
}
@media (max-width: 768px) {
.p-article__back {
margin-bottom: 60px;
}
}
.p-article__sub .c-kari {
margin-left: 12px;
}
.p-contact {
width: 100%;
max-width: clamp(480px, 66.666vw, 960px);
margin: clamp(30px, 2.43vw, 35px) auto 0;
}
.p-contact__lead {
margin: clamp(30px, 2.43vw, 35px) auto clamp(30px, 4.166vw, 60px);
font-size: clamp(16px, 1.25vw, 18px);
font-weight: 500;
line-height: 2;
text-align: center;
}
.p-contact__panel {
position: relative;
padding: clamp(30px, 4.166vw, 60px) clamp(36px, 5vw, 72px) clamp(30px, 4.166vw, 60px);
background-color: var(--c-ground);
border-radius: clamp(30px, 4.166vw, 60px);
}
.p-contact__box {
position: relative;
padding: clamp(26px, 2.083vw, 30px) clamp(26px, 2.083vw, 30px) clamp(30px, 2.708vw, 39px);
text-align: center;
background-color: var(--c-white);
border-radius: clamp(26px, 2.083vw, 30px);
}
.p-contact__box-text {
font-size: 14px;
font-weight: 500;
line-height: 1.6;
letter-spacing: .04em;
}
.p-contact__number {
display: flex;
align-items: center;
justify-content: center;
margin-top: clamp(20px, 1.597vw, 23px);
}
.p-contact__number-name {
font-size: clamp(15px, 1.111vw, 16px);
font-weight: 700;
line-height: 2;
letter-spacing: .04em;
}
.p-contact__number-tel {
margin-left: clamp(16.5px, 2.291vw, 33px);
font-size: clamp(30px, 2.222vw, 32px);
font-weight: 700;
line-height: 1;
color: var(--c-main-l);
letter-spacing: .04em;
white-space: nowrap;
}
.p-contact__number-tel {
display: inline-flex;
align-items: center;
gap: .3em;
}
.p-contact__number-icon {
flex: none;
width: .85em;
height: .85em;
background-color: currentColor;
transform: translateY(.09em);
-webkit-mask: url(../images/icon/tel-main.svg?v=6701b3e1) 50% / contain no-repeat;
mask: url(../images/icon/tel-main.svg?v=6701b3e1) 50% / contain no-repeat;
}
.p-contact__number-tel:hover {
text-decoration: underline;
}
.p-contact__check {
margin-top: clamp(30px, 2.777vw, 40px);
}
.p-contact__check-lead {
font-size: clamp(16px, 1.25vw, 18px);
font-weight: 700;
line-height: 2;
text-align: center;
}
.p-contact__check-list {
width: fit-content;
max-width: 100%;
margin: 12px auto 0;
font-size: clamp(16px, 1.25vw, 18px);
font-weight: 500;
}
.p-contact__check-list > li {
position: relative;
padding-left: 1.2em;
margin: 8px 0;
line-height: 1.6;
}
.p-contact__check-list > li::before {
position: absolute;
left: 0;
content: "・";
}
@media (max-width: 768px) {
.p-contact__panel {
padding: 40px 12px 30px;
border-radius: 26px;
}
.p-contact__number {
flex-direction: column;
}
.p-contact__number-tel {
margin-top: 6px;
margin-left: 0;
}
.p-contact__number .p-contact__number-tel {
display: inline-flex;
}
.p-contact__check-list {
padding: 0 6px;
}
}
.p-contact__photo img {
display: block;
width: 100%;
height: auto;
border-radius: clamp(30px, 4.166vw, 60px);
}
.p-contact__map {
position: relative;
padding-top: 56.25%;
margin-top: clamp(30px, 3.472vw, 50px);
overflow: hidden;
background-color: var(--c-pale2);
border-radius: clamp(26px, 2.777vw, 40px);
}
.p-contact__map iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.p-contact__address {
margin-top: clamp(20px, 2.083vw, 30px);
font-size: clamp(14px, 1.25vw, 18px);
font-weight: 500;
line-height: 1.7;
text-align: center;
}
.p-contact__maplink {
margin-top: clamp(10px, 1.25vw, 18px);
text-align: center;
}
.p-contact__maplink a {
display: inline-block;
font-size: 14px;
font-weight: 500;
line-height: 1.7;
text-decoration: underline;
text-underline-offset: .3em;
}
.p-contact__maplink a:hover {
text-decoration-color: transparent;
}
.p-contact__pin {
display: inline-block;
width: 11px;
height: 14px;
margin-right: 7px;
vertical-align: -1px;
}
@media (max-width: 768px) {
.p-contact__access {
padding: 0 12px;
}
}
.p-contact__title--tel .c-title__text::after {
background-image: url(../images/tsumiki/deco-b2.svg?v=70699dca);
}
.p-contact__title--access .c-title__text::after {
background-image: url(../images/tsumiki/deco-b5.svg?v=74aae60c);
}
.p-disclosure {
position: relative;
}
.p-disclosure__year {
margin: 0 0 clamp(30px, 2.777vw, 40px);
font-size: clamp(20px, 1.944vw, 28px);
font-weight: 700;
line-height: 1.5;
letter-spacing: .04em;
}
.p-disclosure__date {
display: block;
margin-top: 8px;
font-size: 15px;
font-weight: 500;
line-height: 1.7;
letter-spacing: .06em;
}
.p-disclosure__doc + .p-disclosure__doc {
margin-top: clamp(50px, 5.555vw, 80px);
}
.p-disclosure__doc-title {
margin: 0 0 clamp(20px, 2.083vw, 30px);
font-size: clamp(17px, 1.388vw, 20px);
font-weight: 700;
line-height: 1.5;
color: var(--c-main-s);
}
@media (min-width: 1348px) {
.p-disclosure__doc-title {
color: var(--c-main-l);
}
}
.p-disclosure__pages {
display: flex;
flex-direction: column;
gap: 20px;
}
.p-disclosure__page {
display: block;
border: 1px solid var(--c-dot);
transition: opacity .3s var(--ease);
}
.p-disclosure__page:hover {
opacity: .8;
}
.p-disclosure__page img {
display: block;
width: 100%;
height: auto;
}
.p-disclosure__note {
margin: clamp(12px, 1.388vw, 20px) 0 0;
font-size: 14px;
line-height: 1.4;
}
.p-disclosure__pdf {
margin-top: 20px;
}
.p-disclosure__empty {
line-height: 2;
}
.p-disclosure--past {
padding-top: clamp(50px, 5.555vw, 80px);
margin-top: clamp(50px, 5.555vw, 80px);
border-top: 1px solid var(--c-gray);
}
.p-disclosure__past-title {
margin: 0 0 clamp(20px, 2.361vw, 34px);
font-size: clamp(20px, 1.944vw, 28px);
font-weight: 700;
line-height: 1.5;
letter-spacing: .04em;
}
.p-disclosure__past {
position: relative;
background: url(../images/icon/dot.svg?v=3aa85b70) 0 0 / 10px 3px repeat-x;
}
.p-disclosure__past:last-child {
padding-bottom: 3px;
background:
url(../images/icon/dot.svg?v=3aa85b70) 0 0 / 10px 3px repeat-x,
url(../images/icon/dot.svg?v=3aa85b70) 0 100% / 10px 3px repeat-x;
}
.p-disclosure__past > summary {
position: relative;
display: block;
padding: clamp(20px, 1.527vw, 22px) 44px clamp(20px, 1.527vw, 22px) 0;
font-size: clamp(15px, 1.111vw, 16px);
font-weight: 700;
line-height: 1.7;
letter-spacing: .04em;
cursor: pointer;
list-style: none;
transition: color .3s var(--ease);
}
.p-disclosure__past > summary::-webkit-details-marker {
display: none;
}
.p-disclosure__past > summary::after {
position: absolute;
top: 50%;
right: clamp(15.5px, 2.152vw, 31px);
width: 10px;
height: 9px;
content: "";
background: url(../images/icon/caret.svg?v=d0c71fb6) 50% / contain no-repeat;
transform: translateY(-50%);
transition: transform .3s var(--ease);
}
.p-disclosure__past[open] > summary::after {
transform: translateY(-50%) rotate(180deg);
}
.p-disclosure__past > summary:hover {
color: var(--c-main-s);
}
.p-disclosure__past > summary .c-kari {
margin-right: 12px;
}
.p-disclosure__past > summary .p-disclosure__date {
display: inline-block;
margin: 0 0 0 clamp(15px, 2.083vw, 30px);
font-weight: 500;
}
.p-disclosure__past[open] {
padding-bottom: clamp(40px, 4.166vw, 60px);
}
.p-disclosure__past > .p-disclosure__doc:first-of-type {
margin-top: clamp(10px, 1.388vw, 20px);
}
@media (max-width: 768px) {
.p-disclosure__past > summary {
padding-right: 36px;
}
.p-disclosure__past > summary .p-disclosure__date {
display: block;
margin: 4px 0 0;
}
}
.p-program {
display: flex;
flex-direction: column;
gap: clamp(32px, 3.333vw, 48px);
}
.p-program dl,
.p-program dd {
margin: 0;
}
.p-program__heading {
display: flex;
gap: 10px;
align-items: center;
margin: 0 0 clamp(14px, 1.388vw, 20px);
font-size: clamp(16px, 1.25vw, 18px);
font-weight: 700;
line-height: 1.5;
letter-spacing: .04em;
}
.p-program__heading::before {
width: 14px;
height: 14px;
content: "";
background-color: var(--c-main);
border-radius: 50%;
}
.p-program__label {
font-weight: 700;
line-height: 1.5;
letter-spacing: .04em;
}
.p-program__text {
font-size: clamp(15px, 1.111vw, 16px);
line-height: 1.9;
}
.p-program__facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.p-program__fact {
padding: clamp(16px, 1.527vw, 22px) clamp(18px, 1.666vw, 24px);
background-color: var(--c-ground);
border-radius: 16px;
}
.p-program__fact .p-program__label {
font-size: 13px;
color: var(--c-main-s);
}
.p-program__fact .p-program__text {
margin-top: 4px;
font-size: clamp(17px, 1.388vw, 20px);
font-weight: 700;
line-height: 1.6;
}
.p-program__cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.p-program__card {
--area: var(--c-tsumiki-salmon);
position: relative;
padding: clamp(18px, 1.666vw, 24px) clamp(18px, 1.666vw, 24px) clamp(18px, 1.666vw, 24px) calc(clamp(18px, 1.666vw, 24px) + 6px);
overflow: hidden;
background-color: var(--c-white);
border: 1px solid var(--c-dot);
border-radius: 16px;
}
.p-program__card::before {
position: absolute;
inset: 0 auto 0 0;
width: 6px;
content: "";
background-color: var(--area);
}
.p-program__card--kenkou { --area: var(--c-tsumiki-pink); }
.p-program__card--undou  { --area: var(--c-tsumiki-sky); }
.p-program__card--ninchi { --area: var(--c-tsumiki-yellow); }
.p-program__card--gengo  { --area: var(--c-tsumiki-green); }
.p-program__card--ningen { --area: var(--c-tsumiki-purple); }
.p-program__card:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.p-program__card .p-program__label {
font-size: clamp(16px, 1.25vw, 18px);
}
.p-program__card .p-program__text {
margin-top: 8px;
}
.p-program__rows {
background: url(../images/icon/dot.svg?v=3aa85b70) 0 0 / 10px 3px repeat-x;
}
.p-program__row {
display: grid;
grid-template-columns: clamp(150px, 13.888vw, 200px) minmax(0, 1fr);
gap: 20px;
padding: clamp(16px, 1.527vw, 22px) 0;
background: url(../images/icon/dot.svg?v=3aa85b70) 0 100% / 10px 3px repeat-x;
}
.p-program__row .p-program__label {
font-size: 15px;
line-height: 1.9;
}
.p-program__made {
margin: clamp(20px, 2.083vw, 30px) 0 0;
font-size: 14px;
line-height: 1.6;
text-align: right;
}
.p-disclosure__orig {
margin-top: clamp(20px, 2.083vw, 30px);
}
.p-disclosure__orig > summary {
display: inline-flex;
gap: 10px;
align-items: center;
padding-block: 8px;
font-size: 15px;
font-weight: 700;
color: var(--c-main-s);
cursor: pointer;
list-style: none;
}
.p-disclosure__orig > summary::-webkit-details-marker {
display: none;
}
.p-disclosure__orig > summary::after {
width: 10px;
height: 9px;
content: "";
background: url(../images/icon/caret.svg?v=d0c71fb6) 50% / contain no-repeat;
transition: transform .3s var(--ease);
}
.p-disclosure__orig[open] > summary::after {
transform: rotate(180deg);
}
.p-disclosure__orig > .p-disclosure__pages {
margin-top: 12px;
}
@media (max-width: 768px) {
.p-program__cards {
grid-template-columns: minmax(0, 1fr);
}
.p-program__row {
grid-template-columns: minmax(0, 1fr);
gap: 4px;
}
}
@media (max-width: 479px) {
.p-program__fact--rinen,
.p-program__fact--hoshin {
grid-column: 1 / -1;
}
}
.p-disc-tabs__list {
display: none;
}
.p-disc-tabs.is-ready > .p-disc-tabs__list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
margin: 0 0 clamp(30px, 2.777vw, 40px);
}
.p-disc-tabs__tab {
min-height: 52px;
padding: 10px 8px;
font-size: clamp(14px, 1.111vw, 16px);
font-weight: 700;
line-height: 1.4;
color: var(--c-text);
letter-spacing: .04em;
background-color: var(--c-ground);
border: 2px solid transparent;
border-radius: 14px;
transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.p-disc-tabs__tab:hover {
border-color: var(--c-sub1);
}
.p-disc-tabs__tab[aria-selected="true"] {
color: var(--c-main-s);
background-color: var(--c-white);
border-color: var(--c-main);
}
.p-disc-tabs__tab:focus-visible {
outline: 2px solid var(--c-main-s);
outline-offset: 3px;
}
.p-disc-tabs__panel + .p-disc-tabs__panel {
margin-top: clamp(50px, 5.555vw, 80px);
}
.p-disc-tabs.is-ready > .p-disc-tabs__panel + .p-disc-tabs__panel {
margin-top: 0;
}
.p-disc-tabs .p-disclosure__doc + .p-disclosure__doc {
margin-top: 0;
}
@media (max-width: 768px) {
.p-disc-tabs.is-ready > .p-disc-tabs__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.p-program__sub {
display: block;
margin-top: 2px;
font-size: 14px;
font-weight: 500;
}
.p-sk__list {
display: flex;
flex-direction: column;
gap: 12px;
padding: 0;
margin: 0;
list-style: none;
}
.p-sk__item {
position: relative;
padding: clamp(18px, 1.666vw, 24px) clamp(18px, 1.666vw, 24px) clamp(18px, 1.666vw, 24px) calc(clamp(18px, 1.666vw, 24px) + 40px);
background-color: var(--c-white);
border: 1px solid var(--c-dot);
border-radius: 16px;
}
.p-sk__num {
position: absolute;
top: clamp(18px, 1.666vw, 24px);
left: clamp(18px, 1.666vw, 24px);
display: grid;
place-items: center;
width: 28px;
height: 28px;
font-size: 14px;
font-weight: 700;
line-height: 1;
background-color: var(--c-ground);
border-radius: 50%;
}
.p-sk__main {
margin: 0;
font-size: clamp(16px, 1.25vw, 18px);
font-weight: 700;
line-height: 1.6;
}
.p-sk .p-sk__subs {
padding-top: 14px;
margin-top: 14px;
background: url(../images/icon/dot.svg?v=3aa85b70) 0 0 / 10px 3px repeat-x;
}
.p-sk__sub + .p-sk__sub {
margin-top: 14px;
}
.p-sk__sub-label {
font-size: 13px;
font-weight: 700;
line-height: 1.6;
color: var(--c-main-s);
}
.p-sk__sub-text {
margin: 2px 0 0;
font-size: clamp(15px, 1.111vw, 16px);
line-height: 1.9;
}
.p-article__body .p-sk__list {
margin: 0;
}
.p-article__body .p-sk__list > li {
margin: 0;
line-height: inherit;
list-style: none;
}
.p-faq {
display: flex;
flex-direction: column;
gap: clamp(12px, 1.111vw, 16px);
margin: clamp(51px, 5.486vw, 79px) 0;
}
.p-faq__item {
background-color: var(--c-ground);
border: 2px solid transparent;
border-radius: clamp(16px, 1.388vw, 20px);
transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.p-faq__item:hover {
border-color: var(--c-sub2);
}
.p-faq__item[open] {
background-color: var(--c-white);
border-color: var(--c-sub1);
}
.p-faq__q {
display: flex;
gap: clamp(12px, 1.111vw, 16px);
align-items: center;
padding: clamp(16px, 1.527vw, 22px) clamp(16px, 1.666vw, 24px);
cursor: pointer;
list-style: none;
}
.p-faq__q::-webkit-details-marker {
display: none;
}
.p-faq__q:focus-visible {
outline: 3px solid var(--c-link-s);
outline-offset: 2px;
border-radius: clamp(16px, 1.388vw, 20px);
}
.p-faq__q-text {
flex: 1;
min-width: 0;
font-size: clamp(16px, 1.25vw, 18px);
font-weight: 700;
line-height: 1.6;
letter-spacing: .04em;
}
.p-faq__mark {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: clamp(36px, 2.777vw, 40px);
height: clamp(36px, 2.777vw, 40px);
font-family: var(--f-maru);
font-size: clamp(17px, 1.388vw, 20px);
font-weight: 700;
line-height: 1;
color: var(--c-on-main);
background-color: var(--c-main-face);
border-radius: 50%;
}
.p-faq__mark--a {
padding-bottom: .2em;
}
@media (min-width: 1280px) {
.p-faq__mark--a {
padding-bottom: .1em;
}
}
.p-faq__mark--a {
color: var(--c-main-s);
background-color: var(--c-white);
border: 2px solid var(--c-sub1);
}
.p-faq__toggle {
position: relative;
flex-shrink: 0;
width: 28px;
height: 28px;
background-color: var(--c-white);
border-radius: 50%;
}
.p-faq__item[open] .p-faq__toggle {
background-color: var(--c-ground);
}
.p-faq__toggle::before,
.p-faq__toggle::after {
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 2px;
content: "";
background-color: var(--c-main-s);
border-radius: 1px;
transform: translate(-50%, -50%);
transition: transform .3s var(--ease);
}
.p-faq__toggle::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.p-faq__item[open] .p-faq__toggle::after {
transform: translate(-50%, -50%) rotate(0deg);
}
.p-faq__a {
display: flex;
gap: clamp(12px, 1.111vw, 16px);
align-items: flex-start;
padding: 0 clamp(16px, 1.666vw, 24px) clamp(18px, 1.666vw, 24px);
}
.p-faq__item[open] .p-faq__a {
padding-top: clamp(16px, 1.388vw, 20px);
margin: 0 clamp(16px, 1.666vw, 24px);
padding-right: 0;
padding-left: 0;
background: url(../images/icon/dot.svg?v=3aa85b70) 0 0 / 10px 3px repeat-x;
}
.p-faq__a-text {
flex: 1;
word-break: normal;
overflow-wrap: anywhere;
padding-top: clamp(4px, .416vw, 6px);
font-size: clamp(16px, 1.25vw, 18px);
font-weight: 500;
line-height: 1.8;
}
.p-faq__a-text a {
color: var(--c-link-s);
text-decoration: underline;
text-decoration-color: var(--c-link-s);
text-underline-offset: .2em;
}
.p-faq__a-text a:hover {
text-decoration: none;
}
@supports selector(::details-content) {
.p-faq__item {
interpolate-size: allow-keywords;
}
.p-faq__item::details-content {
height: 0;
overflow: clip;
opacity: 0;
transition: height .4s var(--ease), opacity .4s var(--ease), content-visibility .4s allow-discrete;
}
.p-faq__item[open]::details-content {
height: auto;
opacity: 1;
}
}
.p-faq--open {
margin: clamp(24px, 2.083vw, 30px) 0 0;
}
.p-faq--open .p-faq__item,
.p-faq--open .p-faq__item:hover {
background-color: var(--c-white);
border-color: var(--c-sub1);
}
.p-faq--open .p-faq__q {
cursor: auto;
}
.p-faq--open .p-faq__a {
padding: clamp(16px, 1.388vw, 20px) 0 clamp(18px, 1.666vw, 24px);
margin: 0 clamp(16px, 1.666vw, 24px);
background: url(../images/icon/dot.svg?v=3aa85b70) 0 0 / 10px 3px repeat-x;
}
@media (prefers-reduced-motion: reduce) {
.p-faq__item,
.p-faq__item::details-content,
.p-faq__toggle::before,
.p-faq__toggle::after {
transition: none;
}
}
@media (max-width: 768px) {
.p-faq {
margin: 40px 0;
}
.p-faq__q {
align-items: flex-start;
}
.p-faq__q-text {
padding-top: 5px;
}
.p-faq__toggle {
margin-top: 4px;
}
}
.p-article__body .p-flow-steps {
margin: clamp(24px, 2.777vw, 40px) 0 clamp(40px, 4.166vw, 60px);
padding: 0;
list-style: none;
}
.p-article__body .p-flow-steps li {
list-style: none;
}
.p-article__body .p-flow-steps__item {
position: relative;
display: flex;
gap: clamp(16px, 1.666vw, 24px);
margin: 0;
padding-bottom: clamp(28px, 2.777vw, 40px);
line-height: 1.8;
}
.p-flow-steps__item:not(:last-child)::after {
position: absolute;
top: 8px;
bottom: 0;
left: calc(var(--num) / 2 - 1.5px);
width: 3px;
content: "";
background-color: var(--c-main);
border-radius: 2px;
}
.p-flow-steps {
--num: clamp(60px, 5vw, 72px);
}
.p-flow-steps__num {
position: relative;
z-index: 1;
display: flex;
flex: none;
flex-direction: column;
align-items: center;
justify-content: center;
width: var(--num);
height: var(--num);
margin: 0;
font-family: var(--f-maru);
font-size: clamp(24px, 2.083vw, 30px);
font-weight: 700;
line-height: 1;
color: var(--c-on-main);
background-color: var(--c-main-face);
border-radius: 50%;
}
.p-flow-steps__step {
margin-bottom: 2px;
font-family: var(--f-base);
font-size: 11px;
letter-spacing: .08em;
}
.p-flow-steps__body {
flex: 1;
min-width: 0;
padding-top: calc(var(--num) / 2 - 16px);
}
.p-article__body .p-flow-steps__title {
margin: 0;
font-size: clamp(18px, 1.527vw, 22px);
font-weight: 700;
line-height: 1.6;
color: var(--c-text);
}
.p-flow-steps__only {
display: inline-block;
margin-left: 10px;
padding: 3px 10px;
font-size: 13px;
font-weight: 700;
line-height: 1.4;
vertical-align: 3px;
background-color: var(--c-ground);
border: 1px solid var(--c-main);
border-radius: 20px;
}
.p-article__body .p-flow-steps__text {
margin: 8px 0 0;
}
.p-flow-steps__box {
margin-top: 16px;
padding: clamp(18px, 1.666vw, 24px) clamp(18px, 2.083vw, 30px);
background-color: var(--c-ground);
border-radius: 20px;
}
.p-article__body .p-flow-steps__box-title {
margin: 0 0 4px;
font-size: 16px;
font-weight: 700;
color: var(--c-text);
}
.p-flow-steps__box p {
margin: 0;
}
.p-article__body .p-flow-steps__box ul {
margin: 8px 0 0 1.2em;
}
.p-flow-steps__tel {
margin-top: 20px;
}
.p-article__body .p-flow-steps__tel .c-btn--main {
max-width: min(100%, clamp(324px, 26.388vw, 380px));
margin: 0;
font-size: clamp(16px, 1.319vw, 19px);
color: var(--c-on-main);
text-decoration: none;
white-space: nowrap;
}
.p-article__body .p-flow-steps__hours {
margin: 8px 0 0;
font-size: 14px;
}
.p-flow-steps__branch {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
align-items: start;
margin-top: 16px;
}
.p-flow-steps__path {
padding: clamp(16px, 1.527vw, 22px) clamp(18px, 1.666vw, 24px);
background-color: var(--c-white);
border: 2px solid var(--c-sub1);
border-radius: 20px;
}
.p-article__body .p-flow-steps__path-title {
margin: 0;
font-size: 16px;
font-weight: 700;
color: var(--c-text);
}
.p-article__body .p-flow-steps__sub {
margin: 10px 0 0;
padding: 0;
list-style: none;
}
.p-article__body .p-flow-steps__sub li {
margin: 0;
padding: 8px 12px;
background-color: var(--c-ground);
border-radius: 10px;
}
.p-article__body .p-flow-steps__sub li + li {
margin-top: 22px;
}
.p-flow-steps__sub li + li::before {
position: relative;
top: -23px;
display: block;
width: 0;
height: 0;
margin: 0 auto -8px;
content: "";
border-top: 8px solid var(--c-main);
border-right: 7px solid transparent;
border-left: 7px solid transparent;
}
.p-article__body .p-flow-steps__next {
margin: 10px 0 0;
font-weight: 700;
color: var(--c-main-s);
}
.p-article__body .p-flow-steps__more {
margin: 6px 0 0;
font-size: 14px;
}
@media (max-width: 768px) {
.p-flow-steps__branch {
grid-template-columns: 1fr;
}
.p-flow-steps__only {
margin-left: 6px;
}
}
.p-article__body .p-flow-steps__note {
margin: 6px 0 0;
font-size: 14px;
line-height: 1.7;
}
.p-flow__title--jukyusha .c-title__text::after {
background-image: url(../images/tsumiki/deco-b4.svg?v=477d764f);
}
.p-flow__title--jukyusha .c-title__text {
font-size: clamp(20px, 1.944vw, 28px);
}
.p-news {
position: relative;
width: 100%;
max-width: clamp(480px, 66.666vw, 960px);
margin: 60px auto 0;
}
.p-news__list {
position: relative;
width: 100%;
max-width: 1073px;
margin: 0 auto;
background: url(../images/icon/dot.svg?v=3aa85b70) 0 0 / 10px 3px repeat-x;
}
.p-news__item {
position: relative;
}
.p-news__link {
position: relative;
display: flex;
align-items: center;
padding: clamp(20px, 1.527vw, 22px) clamp(35px, 2.916vw, 42px) clamp(20px, 1.527vw, 22px) 0;
background:
url(../images/icon/arrow-main.svg?v=75566335) right clamp(15.5px, 2.152vw, 31px) center / 10px 11px no-repeat,
url(../images/icon/dot.svg?v=3aa85b70) 0 100% / 10px 3px repeat-x;
transition: all .3s var(--ease);
}
.p-news__link:hover {
color: var(--c-main-s);
background-position: right clamp(10.5px, 1.458vw, 21px) center, 0 100%;
}
.p-news__date {
display: inline-block;
margin-right: clamp(5px, .694vw, 10px);
font-size: clamp(15px, 1.111vw, 16px);
font-weight: 700;
line-height: 1;
color: var(--c-text);
letter-spacing: .06em;
white-space: nowrap;
}
.p-news__cat {
flex: 1 0 100px;
line-height: 1;
margin-right: clamp(10px, 1.388vw, 20px);
}
.p-news__cat-item {
display: inline-block;
padding: 8px;
font-size: clamp(13px, .972vw, 14px);
font-weight: 700;
line-height: 1;
color: var(--c-main-s);
white-space: nowrap;
border: 2px solid currentColor;
border-radius: 10px;
}
.p-news__title {
display: inline-block;
width: 100%;
font-size: clamp(13px, 1.041vw, 15px);
font-weight: 500;
line-height: 1.7;
color: currentColor;
}
@media (max-width: 768px) {
.p-news {
margin: 30px auto 40px;
}
.p-news__link {
flex-wrap: wrap;
padding-right: 44px;
}
.p-news__cat-item {
padding: 6px 8px;
}
.p-news__title {
margin-top: 8px;
}
}
.p-news__pager {
margin-top: 60px;
}
.p-news__pager-list {
display: flex;
align-items: center;
justify-content: center;
padding: 20px 0;
}
.p-news__pager-list > li {
margin: 0 8px;
}
.p-news__pager-item {
display: flex;
align-items: center;
justify-content: center;
width: clamp(18px, 2.5vw, 36px);
min-width: 28px;
height: clamp(18px, 2.5vw, 36px);
min-height: 28px;
font-size: clamp(16px, 1.388vw, 20px);
font-weight: 500;
color: var(--c-gray-s);
transition: all .3s var(--ease);
}
a.p-news__pager-item:hover,
.p-news__pager-item.is-current {
font-weight: 700;
color: var(--c-main-s);
}
@media (min-width: 1348px) {
a.p-news__pager-item:hover,
.p-news__pager-item.is-current {
color: var(--c-main-l);
}
}
.p-news__pager-item--prev::before,
.p-news__pager-item--next::before {
position: relative;
top: 2px;
width: 0;
height: 0;
content: "";
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
.p-news__pager-item--next::before {
border-left: 8px solid var(--c-text);
}
.p-news__pager-item--prev::before {
border-right: 8px solid var(--c-text);
}
.p-philosophy__article {
width: 100%;
max-width: clamp(383.5px, 53.263vw, 767px);
margin: clamp(19px, 4.444vw, 64px) auto 0;
}
.p-philosophy__poem {
margin: clamp(30px, 2.777vw, 40px) 0 0;
}
.p-philosophy__quote,
.p-philosophy__voice-quote {
padding-left: clamp(17px, 3.194vw, 46px);
margin: 20px 0;
border-left: 4px solid var(--c-gray);
}
.p-philosophy__quote p,
.p-philosophy__voice-quote p {
font-size: clamp(16px, 1.25vw, 18px);
font-weight: 500;
line-height: 2;
}
.p-philosophy__quote p + p {
margin-top: 20px;
}
.p-philosophy__cite {
margin: clamp(12px, 1.388vw, 20px) 0 0;
font-size: 14px;
line-height: 1.4;
text-align: right;
}
.p-philosophy__voice {
width: 100%;
max-width: clamp(383.5px, 53.263vw, 767px);
margin: clamp(40px, 4.861vw, 70px) auto 0;
}
.p-philosophy__voice-lead,
.p-philosophy__voice-end {
font-size: clamp(16px, 1.25vw, 18px);
font-weight: 500;
line-height: 2;
}
.p-brand__title--mizu .c-title__text,
.p-brand__title--jibun .c-title__text {
text-wrap-style: auto;
word-break: normal;
}
.p-brand__title--mizu .c-title__text::after {
background-image: url(../images/tsumiki/deco-b4.svg?v=477d764f);
}
.p-brand__title--jibun .c-title__text::after {
background-image: url(../images/tsumiki/deco-b5.svg?v=74aae60c);
}
.page-philosophy .p-brand {
background-position: 240px 120px;
}
@media (max-width: 768px) {
.p-philosophy__quote,
.p-philosophy__voice-quote {
margin: 38px 0 30px;
}
.p-philosophy__voice {
margin-top: 40px;
}
.page-philosophy .p-brand {
background-position: 120px 60px;
}
}
@media (max-width: 768px) {
.p-philosophy__article,
.p-philosophy__voice,
.page-philosophy .p-brand__inner {
max-width: none;
}
.p-philosophy__voice {
margin-inline: 0;
}
.page-philosophy .p-brand__inner {
padding-inline: 18px;
}
.page-philosophy .p-brand__contents {
padding-inline: 18px;
}
}
.p-top-omoi {
position: relative;
width: 100%;
max-width: 1440px;
padding: clamp(60px, 11.527vw, 166px) 0 clamp(60px, 8.333vw, 120px);
margin: 0 auto clamp(60px, 8.333vw, 120px);
background-color: var(--c-white);
border-radius: 0 0 clamp(30px, 5.555vw, 80px) clamp(30px, 5.555vw, 80px);
}
.p-top-omoi__grid {
position: relative;
z-index: 2;
display: flex;
text-align: center;
}
.p-top-omoi__col {
flex: 0 1 50%;
}
.p-top-omoi__voice {
display: inline-block;
text-align: left;
}
.p-top-omoi__quote p {
font-family: var(--f-maru);
font-size: clamp(30px, 3.611vw, 52px);
font-weight: 700;
line-height: 2;
letter-spacing: .3em;
white-space: nowrap;
text-wrap-style: auto;
}
.p-top-omoi__cite {
margin-top: clamp(15px, 2.083vw, 30px);
font-size: clamp(13px, 1.18vw, 17px);
font-weight: 700;
line-height: 1.8;
color: var(--c-main-s);
}
.p-top-omoi__text {
max-width: clamp(281px, 39.027vw, 562px);
margin-top: clamp(30px, 9.305vw, 134px);
font-size: clamp(16px, 1.388vw, 20px);
font-weight: 700;
line-height: 2;
text-align: left;
letter-spacing: .29em;
text-wrap-style: auto;
word-break: keep-all;
}
@media (max-width: 768px) {
.p-top-omoi__grid {
display: block;
padding: 0 36px;
text-align: left;
}
.p-top-omoi__text {
max-width: none;
}
}
.p-top-taisetsu__face {
position: relative;
width: 100%;
max-width: 1440px;
padding-top: 0;
margin: 0 auto;
overflow: clip;
background-color: var(--c-white);
border-radius: clamp(30px, 5.555vw, 80px);
}
.p-top-taisetsu__heading {
padding: clamp(50px, 6.944vw, 100px) clamp(18px, 2.222vw, 32px) 0;
margin-bottom: 0;
}
.p-top-taisetsu__heading .c-heading__title {
word-break: keep-all;
}
.p-top-taisetsu__slider {
--per: 1.4;
--gap: 25px;
--slide-w: calc((100cqw - var(--gap) * (var(--per) - 1)) / var(--per));
container-type: inline-size;
position: relative;
z-index: 1;
padding: clamp(25px, 3.472vw, 50px) 0 clamp(18px, 2.5vw, 36px);
}
@media (min-width: 480px) {
.p-top-taisetsu__slider {
--per: 2;
}
}
@media (min-width: 768px) {
.p-top-taisetsu__slider {
--per: 2.5;
--gap: 50px;
}
}
@media (min-width: 769px) {
.p-top-taisetsu__slider {
padding-bottom: clamp(78px, 10.833vw, 156px);
}
}
@media (min-width: 1024px) {
.p-top-taisetsu__slider {
--per: 3;
}
}
.p-top-taisetsu__track {
display: flex;
gap: var(--gap);
align-items: flex-start;
padding: 0 calc((100cqw - var(--slide-w)) / 2) 40px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.p-top-taisetsu__track::-webkit-scrollbar {
display: none;
}
.p-top-taisetsu__track.is-drag {
cursor: grabbing;
scroll-snap-type: none;
user-select: none;
}
.p-top-taisetsu__track.is-drag img {
pointer-events: none;
}
.p-top-taisetsu__slide {
flex: 0 0 var(--slide-w);
scroll-snap-align: center;
scroll-snap-stop: always;
}
.p-top-taisetsu__slide:nth-child(odd) {
margin-bottom: clamp(40px, 3.472vw, 50px);
}
.p-top-taisetsu__slide:nth-child(even) {
margin-top: clamp(40px, 3.472vw, 50px);
}
.p-top-taisetsu__card {
position: relative;
padding: clamp(12px, 1.666vw, 24px) clamp(12px, 1.666vw, 24px) clamp(15px, 2.083vw, 30px);
background-color: var(--c-ground);
border-radius: clamp(30px, 4.166vw, 60px);
}
.p-top-taisetsu__img {
width: 100%;
aspect-ratio: 960 / 612;
object-fit: cover;
border-radius: 30px;
}
.p-top-taisetsu__title {
padding: clamp(22px, 2.083vw, 30px) 0 clamp(16px, 1.18vw, 17px);
font-size: clamp(18px, 1.944vw, 28px);
font-weight: 700;
line-height: 1.8;
color: var(--c-card-text);
text-align: center;
letter-spacing: .04em;
}
.p-top-taisetsu__text {
padding: 0 12px;
font-size: clamp(14px, 1.111vw, 16px);
font-weight: 500;
line-height: 2;
color: var(--c-card-text);
letter-spacing: .04em;
}
.p-top-taisetsu__text,
.p-top-taisetsu__note {
text-wrap-style: auto;
word-break: normal;
}
.p-top-taisetsu__note {
padding: 0 12px;
margin-top: 8px;
font-size: clamp(12px, .972vw, 14px);
font-weight: 500;
line-height: 1.6;
color: var(--c-card-text);
letter-spacing: .04em;
}
@media (max-width: 768px) {
.p-top-taisetsu__img {
border-radius: 18px;
}
.p-top-taisetsu__title {
line-height: 1.4;
}
}
.p-top-taisetsu__dots {
position: absolute;
right: 0;
bottom: calc(clamp(28px, 10vw, 144px) - 7px);
left: 0;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
}
.p-top-taisetsu__dot {
display: block;
box-sizing: content-box;
width: clamp(6px, .694vw, 10px);
height: clamp(6px, .694vw, 10px);
padding: 0;
margin: 0 clamp(5px, .625vw, 9px);
background-color: var(--c-bullet);
background-clip: content-box;
border: 0;
border-radius: 50%;
cursor: pointer;
}
.p-top-taisetsu__dot.is-current {
width: clamp(8px, .972vw, 14px);
height: clamp(8px, .972vw, 14px);
background-color: var(--c-bullet-on);
}
@media (max-width: 768px) {
.p-top-taisetsu__dots {
bottom: 21px;
}
.p-top-taisetsu__dot.is-current {
background-color: var(--c-main);
}
}
.p-top-taisetsu__band {
position: absolute;
bottom: 0;
left: 0;
z-index: 0;
width: 100%;
aspect-ratio: 1440 / 449;
pointer-events: none;
}
@media (min-width: 1441px) {
.p-top-taisetsu__face {
max-width: none;
}
.p-top-taisetsu__heading,
.p-top-taisetsu__slider {
max-width: 1440px;
margin-right: auto;
margin-left: auto;
}
.p-top-taisetsu__band {
left: calc(50% - 720px);
width: 1440px;
}
}
.js.is-ani-ready .p-top-taisetsu__band:not(.is-in) .c-tsumiki-fall,
.js.is-ani-ready .p-top-taisetsu__band:not(.is-in) .c-tsumiki-fall > g[filter] {
animation-play-state: paused;
}
@media (min-width: 769px) {
.p-top-taisetsu__text {
font-size: clamp(15px, 1.111vw, 16px);
}
}
.p-top-nayami__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25vw;
}
.p-top-nayami__card {
position: relative;
z-index: 1;
}
@media (min-width: 769px) {
.p-top-nayami__list {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.p-top-nayami__card {
grid-column: span 2;
}
.p-top-nayami__card:nth-child(4) {
grid-column: 2 / span 2;
}
}
.p-top-nayami__card[data-color="pink"] { color: var(--c-tsumiki-pink-s); }
.p-top-nayami__card[data-color="orange"] { color: var(--c-tsumiki-orange-s); }
.p-top-nayami__card[data-color="yellow"] { color: var(--c-tsumiki-yellow-s); }
.p-top-nayami__card[data-color="green"] { color: var(--c-tsumiki-green-s); }
.p-top-nayami__card[data-color="blue"] { color: var(--c-tsumiki-sky-s); }
.p-top-nayami__face {
position: relative;
isolation: isolate;
height: 100%;
padding: clamp(24px, 2.083vw, 30px) clamp(14px, 2.083vw, 30px) clamp(24px, 3.333vw, 48px);
overflow: hidden;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='85' height='85' viewBox='0 0 85 85'%3E%3Cpath d='M0 0H85V5A20 20 0 0 1 65 25H63A38 38 0 0 0 25 63A22 22 0 0 1 3 85H0Z' fill='%23fff'/%3E%3C/svg%3E") 100% 100% / 85px 85px no-repeat;
border-radius: 30px;
}
.p-top-nayami__face::before,
.p-top-nayami__face::after {
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
content: "";
background-color: var(--c-white);
}
.p-top-nayami__face::before {
width: 100%;
height: calc(100% - 85px);
}
.p-top-nayami__face::after {
width: calc(100% - 85px);
height: 100%;
}
.p-top-nayami__title {
font-size: clamp(19px, 1.527vw, 22px);
font-weight: 700;
line-height: 1.6;
letter-spacing: .01em;
word-break: auto-phrase;
}
.p-top-nayami__after {
margin-top: clamp(25.5px, 3.541vw, 51px);
text-align: center;
}
.p-top-nayami__lead {
font-size: clamp(15px, 1.25vw, 18px);
font-weight: 500;
line-height: 1.8;
letter-spacing: .04em;
}
.p-top-nayami__btn {
margin-top: clamp(16px, 1.388vw, 20px);
}
@media (max-width: 768px) {
.p-top-nayami__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-inline: -4px;
}
.p-top-nayami__face {
padding-right: 6px;
padding-bottom: 38px;
padding-left: 10px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='85' height='85' viewBox='0 0 85 85'%3E%3Cpath d='M0 0H85V29A10 10 0 0 1 75 39H67A28 28 0 0 0 39 67V75A10 10 0 0 1 29 85H0Z' fill='%23fff'/%3E%3C/svg%3E");
}
.p-top-nayami__title {
line-height: 1.4;
letter-spacing: 0;
}
}
.p-top-nayami__keep {
white-space: nowrap;
}
.p-top-nayami__narrow {
display: none;
}
@media (max-width: 374px) {
.p-top-nayami__keep {
display: none;
}
.p-top-nayami__narrow {
display: inline;
}
}
@media (max-width: 359px) {
.p-top-nayami__title {
font-size: 17px;
}
}
.p-top-hoiku {
position: relative;
margin-top: clamp(0px, 2.569vw, 37px);
}
.p-top-hoiku__head {
position: relative;
z-index: 0;
overflow-x: clip;
}
.p-top-hoiku__head::before {
position: absolute;
top: 0;
right: 47vw;
z-index: -1;
width: 824px;
height: 351px;
content: "";
background-color: var(--c-white);
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.p-top-hoiku__heading.c-heading {
width: 100%;
max-width: 1216px;
padding: clamp(70px, 9.722vw, 140px) clamp(14px, 2.222vw, 32px) clamp(12px, 1.666vw, 24px);
margin: 0 auto;
}
.p-top-hoiku__body {
position: relative;
padding-bottom: clamp(60px, 8.333vw, 120px);
background-color: var(--c-white);
}
.p-top-hoiku__brand {
padding-top: clamp(48px, 5.555vw, 80px);
}
.p-top-hoiku__main {
position: relative;
display: flex;
align-items: center;
width: 100%;
max-width: 1170px;
padding: 0 clamp(29px, 2.222vw, 32px);
margin: 0 auto;
}
.p-top-hoiku__image,
.p-top-hoiku__text {
flex: 0 1 50%;
min-width: 0;
}
.p-top-hoiku__image {
padding-right: clamp(25px, 3.472vw, 50px);
}
.p-top-hoiku__image img {
width: 100%;
height: auto;
aspect-ratio: 503 / 449;
object-fit: cover;
border-radius: 60px;
}
.p-top-hoiku__title {
font-size: clamp(22px, 2.638vw, 38px);
font-weight: 700;
line-height: 1.6;
letter-spacing: .1em;
}
.p-top-hoiku__lead {
margin-top: clamp(22px, 2.5vw, 36px);
font-size: clamp(14px, 1.111vw, 16px);
font-weight: 500;
line-height: 1.8;
letter-spacing: .04em;
}
.p-top-hoiku__read {
padding: 0 clamp(14.5px, 2.013vw, 29px);
margin-top: clamp(40px, 7.569vw, 109px);
margin-bottom: clamp(40px, 4.166vw, 60px);
font-size: clamp(16px, 1.666vw, 24px);
font-weight: 700;
line-height: 1.8;
text-align: center;
word-break: auto-phrase;
text-wrap: balance;
}
.p-top-hoiku__features {
display: flex;
justify-content: center;
width: 100%;
max-width: 1440px;
padding: 0 clamp(13px, 1.805vw, 26px);
margin: 0 auto;
}
.p-top-hoiku__feature {
position: relative;
flex: 0 1 25%;
min-width: 0;
}
.p-top-hoiku__feature-image {
padding: 6.5%;
}
.p-top-hoiku__feature-image img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: cover;
}
.p-top-hoiku__feature-image--round img {
border-radius: 50%;
}
.p-top-hoiku__feature-image--square img {
border-radius: 17%;
}
.p-top-hoiku__feature-title {
padding: 0 clamp(9px, 1.25vw, 18px);
margin-top: 5px;
font-size: clamp(16px, 1.388vw, 20px);
font-weight: 700;
line-height: 1.6;
text-align: center;
letter-spacing: .1em;
}
.p-top-hoiku__btns {
display: flex;
gap: 18px;
align-items: center;
justify-content: center;
padding: 0 clamp(14px, 2.222vw, 32px);
margin-top: clamp(48px, 4.444vw, 64px);
}
.p-top-hoiku__btns .c-arrow--out {
width: clamp(38px, 2.777vw, 40px);
height: clamp(38px, 2.777vw, 40px);
}
@media (max-width: 768px) {
.p-top-hoiku__head::before {
right: auto;
left: 50%;
width: 110%;
height: auto;
aspect-ratio: 360 / 154;
transform: translateX(-50%);
}
.p-top-hoiku__heading.c-heading {
padding: clamp(34px, 19.714vw, 69px) 14px 0;
}
.p-top-hoiku__main {
display: flex;
flex-direction: column-reverse;
align-items: stretch;
padding: 0 29px;
}
.p-top-hoiku__image {
padding-right: 0;
margin-top: clamp(15px, 8.571vw, 30px);
}
.p-top-hoiku__image img {
border-radius: 34px;
}
.p-top-hoiku__title {
margin-top: 0;
}
.p-top-hoiku__read {
padding: 0 29px;
line-height: 1.6;
letter-spacing: .12em;
}
.p-top-hoiku__features {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 8px;
max-width: 340px;
margin-top: clamp(20px, 11.428vw, 40px);
}
.p-top-hoiku__feature-image {
padding: 6.5%;
}
.p-top-hoiku__feature-title {
padding: 0;
margin-top: 2px;
line-height: 1.4;
}
.p-top-hoiku__btns {
flex-direction: column;
gap: 10px;
}
}
.p-top-hoiku__features {
max-width: 1216px;
}
@media (min-width: 560px) and (max-width: 768px) {
.p-top-hoiku__features {
max-width: 520px;
}
}
@media (min-width: 769px) {
.p-top-hoiku__lead {
font-size: clamp(15px, 1.111vw, 16px);
}
}
.p-top-flow {
position: relative;
isolation: isolate;
width: 100%;
max-width: 1440px;
padding: clamp(46px, 10vw, 144px) clamp(12px, 1.666vw, 24px) clamp(50px, 10.416vw, 150px);
margin: 0 auto;
}
.p-top-flow__face {
position: relative;
width: 100%;
max-width: clamp(480px, 66.666vw, 960px);
padding: clamp(22.5px, 3.125vw, 45px) clamp(25px, 3.472vw, 50px) clamp(30px, 4.166vw, 60px);
margin: 0 auto;
background-color: var(--c-white);
border-radius: 80px;
}
.p-top-flow__heading.c-heading {
margin-bottom: 0;
}
.p-top-flow__heading .c-heading__title {
font-size: clamp(24px, 2.638vw, 38px);
}
.p-top-flow__rows {
margin-top: clamp(21.5px, 2.986vw, 43px);
}
.p-top-flow__row {
display: flex;
width: 100%;
padding: 20px 0;
background: url(../images/icon/dot.svg?v=3aa85b70) 0 100% / 10px 3px repeat-x;
}
.p-top-flow__row:first-child {
background:
url(../images/icon/dot.svg?v=3aa85b70) 0 0 / 10px 3px repeat-x,
url(../images/icon/dot.svg?v=3aa85b70) 0 100% / 10px 3px repeat-x;
}
.p-top-flow__key {
flex: 1 0 226px;
font-size: clamp(16px, 1.25vw, 18px);
font-weight: 700;
line-height: 1.8;
letter-spacing: .04em;
}
.p-top-flow__value {
flex: 1 1 100%;
font-size: clamp(16px, 1.25vw, 18px);
font-weight: 500;
line-height: 1.8;
}
.p-top-flow__main {
font-weight: 700;
}
.p-top-flow__sub {
font-size: clamp(14px, 1.111vw, 16px);
}
.p-top-flow__sub--block {
display: block;
}
.p-top-flow__nobr {
display: inline-block;
}
.p-top-flow__foot {
margin-top: clamp(30px, 4.166vw, 60px);
text-align: center;
}
.p-top-flow__note {
font-size: clamp(14px, 1.111vw, 16px);
font-weight: 500;
line-height: 1.8;
}
.p-top-flow__btn.c-btn {
max-width: clamp(276px, 21.458vw, 309px);
margin-top: clamp(16px, 1.666vw, 24px);
}
.p-top-flow__btn .c-arrow {
width: clamp(38px, 2.777vw, 40px);
height: clamp(38px, 2.777vw, 40px);
background-size: 10px 11px;
}
.p-top-flow__tsumiki {
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
pointer-events: none;
clip-path: inset(0);
}
.p-top-flow__tsumiki-top {
width: 100%;
max-width: clamp(450px, 62.5vw, 900px);
margin: 0 auto;
}
.p-top-flow__tsumiki-top img,
.p-top-flow__tsumiki-top-sp img {
display: block;
width: 100%;
height: auto;
}
.p-top-flow__tsumiki-around {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
aspect-ratio: 1399 / 1058;
}
.p-top-flow__tsumiki-top-sp,
.p-top-flow__tsumiki-around-sp {
display: none;
}
.p-top-flow__fall-top {
transform-origin: 50% 50%;
}
.js .p-top-flow.is-in .p-top-flow__fall-top {
animation: c-tsumiki-fall .5s cubic-bezier(.34, 1.25, .64, 1) both;
--r: -2.5deg;
}
.is-flow-ready .p-top-flow:not(.is-in) .c-tsumiki-fall,
.is-flow-ready .p-top-flow:not(.is-in) .c-tsumiki-fall > g[filter],
.is-flow-ready .p-top-flow:not(.is-in) .p-top-flow__fall-top {
visibility: hidden;
animation: none;
}
@media (max-width: 768px) {
.p-top-flow__face {
padding: 50px 18px clamp(35px, 4.861vw, 70px);
border-radius: 30px;
}
.p-top-flow__heading .c-heading__title {
line-height: 1.6;
letter-spacing: .2em;
}
.p-top-flow__row {
display: block;
}
.p-top-flow__key {
width: 100%;
}
.p-top-flow__value {
display: block;
width: 100%;
margin-top: 10px;
}
.p-top-flow__note {
text-align: left;
}
}
@media (max-width: 480px) {
.p-top-flow__tsumiki-top,
.p-top-flow__tsumiki-around {
display: none;
}
.p-top-flow__tsumiki-top-sp {
display: block;
width: 75%;
}
.p-top-flow__tsumiki-around-sp {
display: block;
width: 100%;
aspect-ratio: 352 / 611;
}
}
.p-top-news {
position: relative;
padding-bottom: clamp(60px, 8.333vw, 120px);
background-color: var(--c-white);
}
.p-top-news__inner {
width: 100%;
max-width: 1155px;
padding: 0 clamp(14px, 2.222vw, 32px);
margin: 0 auto;
}
.p-top-news__heading.c-heading {
max-width: 1073px;
padding: clamp(50px, 6.944vw, 100px) 0 0;
margin: 0 auto;
}
.p-top-news__list {
position: relative;
width: 100%;
max-width: 1073px;
margin: clamp(24px, 3.333vw, 48px) auto 0;
background: url(../images/icon/dot.svg?v=3aa85b70) 0 0 / 10px 3px repeat-x;
}
.p-top-news__item {
position: relative;
background: url(../images/icon/dot.svg?v=3aa85b70) 0 100% / 10px 3px repeat-x;
}
.p-top-news__link {
display: flex;
align-items: center;
padding: clamp(20px, 1.527vw, 22px) clamp(35px, 2.916vw, 42px) clamp(20px, 1.527vw, 22px) 0;
color: var(--c-text);
background: url(../images/icon/arrow-main.svg?v=75566335) right clamp(15.5px, 2.152vw, 31px) center / 10px 11px no-repeat;
transition: all .3s var(--ease);
}
.p-top-news__link:hover {
color: var(--c-main-s);
background-position: right clamp(10.5px, 1.458vw, 21px) center;
}
.p-top-news__date {
display: inline-block;
margin-right: clamp(5px, .694vw, 10px);
font-size: clamp(15px, 1.111vw, 16px);
font-weight: 700;
line-height: 1;
color: var(--c-text);
letter-spacing: .06em;
white-space: nowrap;
}
.p-top-news__cat {
flex: 1 0 100px;
line-height: 1;
margin-right: clamp(10px, 1.388vw, 20px);
}
.p-top-news__cat-item {
display: inline-block;
padding: 8px;
font-size: clamp(13px, .972vw, 14px);
font-weight: 700;
line-height: 1;
color: var(--c-main-s);
white-space: nowrap;
border: 2px solid;
border-radius: 10px;
}
.p-top-news__title {
display: inline-block;
width: 100%;
font-size: clamp(13px, 1.041vw, 15px);
font-weight: 500;
line-height: 1.7;
color: currentColor;
}
.p-top-news__more {
margin-top: clamp(25.5px, 3.541vw, 51px);
}
@media (max-width: 768px) {
.p-top-news__heading.c-heading {
padding-top: 50px;
}
.p-top-news__link {
flex-wrap: wrap;
padding-right: 44px;
}
.p-top-news__cat-item {
padding: 6px 8px;
}
.p-top-news__title {
margin-top: 8px;
}
}
.p-top-voice {
position: relative;
}
.p-top-voice__inner {
width: 100%;
max-width: 1440px;
padding: 0 clamp(14px, 2.222vw, 32px);
margin: clamp(60px, 8.333vw, 120px) auto 0;
}
.p-top-voice__slider {
position: relative;
z-index: 2;
display: flex;
flex-flow: row nowrap;
width: 100%;
margin-top: clamp(40px, 4.166vw, 60px);
overflow: hidden;
}
.p-top-voice__row {
display: flex;
flex-shrink: 0;
}
.p-top-voice__row:first-child {
animation: p-top-voice-slide1 133.33s linear -66.67s infinite;
}
.p-top-voice__row:last-child {
animation: p-top-voice-slide2 133.33s linear infinite;
}
.p-top-voice__slider:hover .p-top-voice__row {
animation-play-state: paused;
}
@keyframes p-top-voice-slide1 {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
}
@keyframes p-top-voice-slide2 {
from { transform: translateX(0); }
to { transform: translateX(-200%); }
}
.p-top-voice__slide {
flex: 0 0 clamp(240px, 23.333vw, 336px);
}
.p-top-voice__slide:nth-child(odd) {
margin-top: clamp(30px, 4.166vw, 60px);
}
.p-top-voice__slide:nth-child(even) {
margin-bottom: clamp(30px, 4.166vw, 60px);
}
.p-top-voice__card {
margin: 0 clamp(12px, 1.666vw, 24px);
padding: clamp(26px, 2.777vw, 40px) clamp(24px, 2.222vw, 32px);
background-color: var(--c-white);
border-radius: 40px;
}
.p-top-voice__ttl {
font-size: clamp(16px, 1.25vw, 18px);
font-weight: 700;
line-height: 1.8;
word-break: auto-phrase;
text-wrap: balance;
}
.p-top-voice__ttl::before {
position: relative;
top: 2px;
display: inline-block;
width: 40px;
height: 28px;
margin-right: 8px;
vertical-align: baseline;
content: "";
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='28' viewBox='0 0 40 28'%3E%3Cg fill='%23e8c7ba'%3E%3Cpath d='M9 28a9 9 0 0 1-9-9c0-7.6 4.3-14.6 11.6-18.6a1.6 1.6 0 0 1 2.2.6l.7 1.3a1.6 1.6 0 0 1-.5 2.1C10.6 6.6 8.7 9 8.1 10.1A9 9 0 0 1 9 28Z'/%3E%3Cpath d='M30 28a9 9 0 0 1-9-9c0-7.6 4.3-14.6 11.6-18.6a1.6 1.6 0 0 1 2.2.6l.7 1.3a1.6 1.6 0 0 1-.5 2.1c-3.4 2.2-5.3 4.6-5.9 5.7A9 9 0 0 1 30 28Z'/%3E%3C/g%3E%3C/svg%3E") 50% / contain no-repeat;
}
.p-top-voice__read {
font-size: clamp(15px, 1.111vw, 16px);
word-break: normal;
line-break: strict;
text-wrap-style: auto;
font-weight: 500;
line-height: 1.8;
}
.p-top-voice__name {
margin-top: clamp(15px, 2.083vw, 30px);
font-size: clamp(13px, 1.18vw, 17px);
font-weight: 700;
line-height: 1.8;
color: var(--c-main-s);
}
.p-top-voice__more {
padding: 0 clamp(14px, 2.222vw, 32px);
margin: clamp(25.5px, 3.541vw, 51px) 0 clamp(40px, 5.555vw, 80px);
}
@media (max-width: 768px) {
.p-top-voice__slider {
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
.p-top-voice__slider::-webkit-scrollbar {
display: none;
}
.p-top-voice__row:first-child,
.p-top-voice__row:last-child {
animation: none;
}
.p-top-voice__row:last-child {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.p-top-voice__slider {
overflow-x: auto;
}
.p-top-voice__row:first-child,
.p-top-voice__row:last-child {
animation: none;
}
.p-top-voice__row:last-child {
display: none;
}
}
.p-top-voice__ttl::before {
top: 0;
display: block;
margin: 0 0 6px;
}
.page-top {
--cta-gap: clamp(92.5px, 12.847vw, 185px);
}
.p-top-mv {
position: relative;
z-index: 1;
overflow: clip;
}
.p-top-mv__stage {
position: relative;
width: 100%;
max-width: 1440px;
height: max(100vh, min(62.5vw, 900px));
margin: 0 auto;
}
.p-top-mv__roof,
.p-top-mv__left,
.p-top-mv__right,
.p-top-mv__left-sp,
.p-top-mv__right-sp {
position: absolute;
z-index: 1;
pointer-events: none;
}
.p-top-mv__roof {
right: clamp(90.5px, 12.569vw, 181px);
bottom: clamp(322.5px, 44.791vw, 645px);
width: clamp(305px, 42.361vw, 610px);
height: clamp(113.5px, 15.763vw, 227px);
}
.p-top-mv__left {
bottom: 0;
left: clamp(13px, 1.805vw, 26px);
width: clamp(383px, 53.194vw, 766px);
height: clamp(212px, 29.444vw, 424px);
}
.p-top-mv__right {
right: clamp(11px, 1.527vw, 22px);
bottom: 0;
width: clamp(184px, 25.555vw, 368px);
height: clamp(315px, 43.75vw, 630px);
}
.p-top-mv__left-sp,
.p-top-mv__right-sp,
.p-top-mv__sp {
display: none;
}
.p-top-mv__photo {
position: absolute;
right: clamp(91.5px, 12.708vw, 183px);
bottom: clamp(44px, 6.111vw, 88px);
z-index: 2;
width: clamp(304.5px, 42.291vw, 609px);
height: clamp(269px, 37.361vw, 538px);
overflow: hidden;
background-color: var(--c-white);
border-radius: 50px;
}
.p-top-mv__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1.2s ease;
}
.p-top-mv__img.is-current {
opacity: 1;
}
.p-top-mv__img--sunaba {
object-position: 42% 50%;
}
.p-top-mv__lead {
position: absolute;
bottom: clamp(89.5px, 12.43vw, 179px);
left: clamp(34.5px, 4.791vw, 69px);
z-index: 3;
display: flex;
flex-direction: column;
width: clamp(282.5px, 39.236vw, 565px);
}
.p-top-mv__copy {
position: relative;
}
.p-top-mv__title {
--copy-b: clamp(64px, 8.4vw, 121px);
position: relative;
margin-left: clamp(26px, 3.6vw, 52px);
}
.p-top-mv__kira {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
@media (max-width: 768px) {
.p-top-mv__kira .is-br {
display: none;
}
}
.p-top-mv__action {
width: clamp(276px, 23.888vw, 344px);
margin: clamp(22px, 2.2vw, 32px) 0 0 clamp(80px, 11.18vw, 161px);
}
.p-top-mv__label {
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
align-items: center;
margin-bottom: 12px;
}
.p-top-mv__type {
display: inline-block;
padding: 6px 12px;
font-size: 14px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
background-color: var(--c-type-jihatsu);
border-radius: 20px;
}
.p-top-mv__name {
font-family: var(--f-maru);
font-size: clamp(20px, 1.944vw, 28px);
font-weight: 700;
line-height: 1.2;
letter-spacing: .08em;
}
.p-top-mv__btns li + li {
margin-top: 14px;
}
.p-top-mv__btn {
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
width: 100%;
height: 54px;
padding: 6px 8px 6px clamp(18px, 1.944vw, 28px);
font-size: clamp(14px, 1.111vw, 16px);
font-weight: 700;
line-height: 1.4;
color: var(--c-text);
letter-spacing: .04em;
white-space: nowrap;
background-color: var(--c-white);
border: 2px solid var(--c-main);
border-radius: 50px;
}
.p-top-mv__btn .c-arrow {
width: 38px;
height: 38px;
}
.p-top-mv__btn:hover .c-arrow {
background-position-x: 65%;
}
.p-top-mv__btn--main {
width: max-content;
min-width: 100%;
font-size: 19px;
color: var(--c-on-main);
letter-spacing: .02em;
background-color: var(--c-main-face);
border-color: var(--c-main-face);
}
@media (min-width: 769px) and (max-width: 1199px) {
.p-top-mv__btns {
display: grid;
width: max-content;
min-width: 100%;
}
.p-top-mv__btn--main {
gap: 8px;
padding-left: 16px;
letter-spacing: 0;
}
}
@media (min-width: 769px) and (max-width: 1199px) {
.p-top-mv__action {
margin-left: clamp(26px, 3.6vw, 52px);
}
.p-top-mv__photo {
right: 10vw;
}
}
.js .p-top-mv__photo {
animation: p-top-mv-photo .7s 1.3s cubic-bezier(.34, 1.3, .64, 1) both;
}
@keyframes p-top-mv-photo {
from { opacity: 0; transform: scale(.9); }
}
.js .p-top-mv__title .c-copy__ch {
animation: p-top-mv-fade .8s var(--cd, 2.2s) cubic-bezier(.25, .46, .45, .94) both;
}
.js .p-top-mv__title .c-copy__ch--1 { --cd: 2.2s; animation-name: p-top-mv-turn; }
.js .p-top-mv__title .c-copy__ch--2 { --cd: 2.6s; }
.js .p-top-mv__title .c-copy__ch--3 { --cd: 3s; }
.js .p-top-mv__title .c-copy__ch--4 { --cd: 3.4s; }
.js .p-top-mv__title .c-copy__ch--5 { --cd: 3.8s; }
.js .p-top-mv__title .c-copy__ch--6 { --cd: 4.2s; }
.js .p-top-mv__title .c-copy__ch--7 { --cd: 4.6s; }
.js .p-top-mv__title .c-copy__ch--8 { --cd: 5s; }
@keyframes p-top-mv-fade {
from { opacity: 0; }
}
@keyframes p-top-mv-turn {
from {
opacity: 0;
transform: translateY(var(--ty, 0)) rotate(14deg);
}
}
.js .p-top-mv__kira-star {
animation: p-top-mv-fade .4s 4.6s cubic-bezier(.25, .46, .45, .94) both;
}
.js .p-top-mv__kira-glint {
animation: p-top-mv-glint .3s 4.4s 7 alternate cubic-bezier(.25, .46, .45, .94) both;
}
@keyframes p-top-mv-glint {
from { opacity: 0; }
to { opacity: 1; }
}
.p-top-mv__drop {
transform-box: view-box;
}
.js .p-top-mv__drop {
animation: p-top-mv-drop 2.47s 3.6s both;
}
@keyframes p-top-mv-drop {
0% {
opacity: 0;
transform: translate(350px, -886px);
animation-timing-function: linear;
}
10.9% {
opacity: 1;
transform: translate(350px, -886px);
animation-timing-function: cubic-bezier(0, 0, .58, 1);
}
51.4% {
transform: translate(106px, -656px);
animation-timing-function: cubic-bezier(.32, 0, .67, 0);
}
91.9% {
transform: translate(106px, -78px);
animation-timing-function: cubic-bezier(0, 0, .58, 1);
}
100% {
opacity: 1;
transform: translate(0, 0);
}
}
.js .p-top-mv__action {
animation: p-top-mv-action 1.5s 1.5s var(--ease) both;
}
@keyframes p-top-mv-action {
from { opacity: 0; transform: translateY(30px); }
}
@media (max-width: 768px) {
.p-top-mv__stage {
--cw: min(112vw, 450px);
display: block;
height: 100vh;
min-height: 500px;
padding: 0;
}
@supports (height: 100svh) {
.p-top-mv__stage {
height: 100svh;
}
}
.p-top-mv__roof,
.p-top-mv__left,
.p-top-mv__right,
.p-top-mv__left-sp,
.p-top-mv__right-sp {
display: none;
}
.p-top-mv__sp {
position: absolute;
bottom: 0;
left: 50%;
z-index: 0;
display: block;
width: var(--cw);
aspect-ratio: 353.3 / 705;
pointer-events: none;
translate: -50% 0;
}
.p-top-mv__photo {
position: absolute;
right: auto;
bottom: calc(var(--cw) * .8001);
left: 50%;
width: calc(var(--cw) * .786);
max-width: none;
height: calc(var(--cw) * .5584);
border-radius: calc(var(--cw) * .0623);
translate: -50% 0;
}
.p-top-mv__lead {
position: absolute;
top: auto;
bottom: 44px;
left: 50%;
align-items: center;
width: clamp(300px, calc(var(--cw) * .926), 340px);
margin: 0;
translate: -50% 0;
}
.p-top-mv__title {
--copy-b: min(80px, calc(var(--cw) * .19));
margin-left: 0;
}
.p-top-mv__action {
width: 100%;
max-width: 324px;
margin: 22px auto 0;
}
.p-top-mv__label {
justify-content: center;
margin-bottom: 12px;
}
.p-top-mv__btns li + li {
margin-top: 8px;
}
.p-top-mv__btn {
height: 54px;
padding-left: 22px;
font-size: 16px;
}
.p-top-mv__btn--main {
font-size: 19px;
}
}
@media (max-width: 768px) and (max-height: 700px) {
.p-top-mv__label {
margin-bottom: 8px;
}
.p-top-mv__action {
margin-top: 14px;
}
}
@media (max-width: 768px) and (max-height: 600px) {
.p-top-mv__action {
margin-top: 4px;
}
}
@media (max-width: 374px) {
.p-top-mv__btn--main {
width: 100%;
min-width: 0;
padding-left: 16px;
letter-spacing: 0;
}
}
@media (max-width: 374px) {
.p-top-mv__lead {
width: min(calc(100vw - 24px), 324px);
}
.p-top-mv__action {
max-width: 100%;
}
}
.p-voice {
position: relative;
margin-top: calc(clamp(15px, 3.472vw, 50px) + 10px);
}
@media (max-width: 768px) {
.p-voice {
margin-top: 25px;
}
}
.p-voice__flow {
position: relative;
margin: 0 calc(clamp(18px, 6.666vw, 96px) * -1);
overflow: hidden;
}
.p-voice__track {
display: flex;
width: max-content;
animation: p-voice-flow 60s linear infinite;
}
.p-voice__slides {
display: flex;
flex: none;
}
.p-voice__slide {
flex: none;
height: clamp(206px, 29.583vw, 426px);
margin-left: clamp(15px, 2.083vw, 30px);
overflow: hidden;
border-radius: 40px;
}
.p-voice__slide--l {
aspect-ratio: 670 / 426;
}
.p-voice__slide--p {
aspect-ratio: 335 / 426;
}
.p-voice__slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@keyframes p-voice-flow {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@media (prefers-reduced-motion: reduce) {
.p-voice__track {
animation: none;
}
}
@media (max-width: 768px) {
.p-voice__flow {
margin: 0 -18px;
}
}
.p-voice__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 40px;
width: 100%;
max-width: 1044px;
margin: clamp(30px, 4.166vw, 60px) auto 0;
}
.p-voice__item {
display: flex;
}
.p-voice__card {
display: flex;
flex-direction: column;
width: 100%;
padding: 26px 24px;
background-color: var(--c-ground);
border-radius: 40px;
}
.p-voice__title {
font-size: clamp(17px, 1.388vw, 20px);
font-weight: 700;
line-height: 1.6;
letter-spacing: .04em;
}
.p-voice__title::before {
position: relative;
top: 2px;
display: inline-block;
width: 40px;
height: 28px;
margin-right: 8px;
vertical-align: baseline;
content: "";
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='28' viewBox='0 0 40 28'%3E%3Cg fill='%23e8c7ba' opacity='.5'%3E%3Ccircle cx='9' cy='18.6' r='8.6'/%3E%3Cpath d='M.6 17.5C.6 9.5 4.6 3.6 11.2.6c-2.6 2.6-4 5.6-4.4 9.6Z'/%3E%3Ccircle cx='30.5' cy='18.6' r='8.6'/%3E%3Cpath d='M22.1 17.5c0-8 4-13.9 10.6-16.9-2.6 2.6-4 5.6-4.4 9.6Z'/%3E%3C/g%3E%3C/svg%3E") 50% / contain no-repeat;
}
.p-voice__text {
margin-top: 14px;
font-size: clamp(15px, 1.111vw, 16px);
font-weight: 500;
line-height: 1.8;
}
.p-voice__text p {
word-break: normal;
line-break: strict;
text-wrap-style: auto;
}
.p-voice__text p + p {
margin-top: 0;
}
.p-voice__text .p-voice__gap {
margin-top: 1.8em;
}
.p-voice__name {
padding-top: clamp(15px, 2.083vw, 30px);
margin-top: auto;
font-size: clamp(13px, 1.18vw, 17px);
font-weight: 700;
line-height: 1.8;
color: var(--c-main-s);
}
@media (max-width: 768px) {
.p-voice__list {
grid-template-columns: 1fr;
gap: 20px;
padding: 0 12px;
}
}
@media (min-width: 769px) {
.p-voice__item:last-child:nth-child(odd) {
grid-column: 1 / -1;
justify-self: center;
width: calc((100% - 40px) / 2);
}
}
.p-voice__title::before {
top: 0;
display: block;
margin: 0 0 6px;
}
.u-visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.u-skip {
position: absolute;
top: -100px;
left: 8px;
z-index: 20000;
padding: 8px 16px;
font-weight: 700;
background: #fff;
border-radius: 8px;
}
.u-skip:focus {
top: 8px;
}
@media (max-width: 768px) {
.u-pc { display: none !important; }
}
@media (min-width: 769px) {
.u-sp { display: none !important; }
}
.u-nowrap {
white-space: nowrap;
}
.u-phrase {
text-wrap-style: auto;
word-break: keep-all;
overflow-wrap: anywhere;
}
@media (max-width: 768px) {
.l-footer__link,
.l-footer__tel,
.p-about__tel,
.p-contact__number-tel,
.p-contact__address a,
.p-contact__maplink a,
.p-about__maplink a,
.c-breadcrumb__link,
.p-flow-steps__more a {
display: inline-block;
padding-block: 12px;
margin-block: -12px;
}
}
@media (min-width:481px){.p-top-flow{padding-top:calc(clamp(450px,62.5vw,900px)*.2471)}}
@media (max-width:480px){.p-top-flow{padding-top:calc(46px + 100vw*.0507)}}
@media (min-width:769px){.p-top-mv{--pr:clamp(20px,2.78vw,40px);--pw:clamp(375px,52.08vw,750px)}.p-top-mv__roof{display:none!important}.p-top-mv__photo{right:var(--pr);width:var(--pw)}.p-top-mv__stage{height:calc(clamp(44px,6.111vw,88px) + clamp(269px,37.361vw,538px) + clamp(120px,11.11vw,160px))}}@media (min-width:769px) and (max-width:1199px){.p-top-mv{--pr:3vw;--pw:47vw}}.l-side-tab.is-fv{pointer-events:none;opacity:0;transform:translateX(100%)}
.is-band-sp{display:none!important}@media (max-width:768px){.is-band-pc{display:none!important}.is-band-sp{display:block!important}}
@media (max-width:768px){.p-top-mv__photo{height:max(calc(var(--cw)*.5584),min(calc(var(--cw)*.786*1.2),calc(100% - var(--cw)*.8001 - 96px)))}.p-top-mv__img--sunaba{object-position:38% 50%}.p-top-mv__img:nth-child(2){object-position:22% 50%}}
.c-notch-mark{background-image:url(../images/tsumiki/wood.jpg?v=d447b7ae);background-size:220px auto;background-blend-mode:multiply}
:root{--c-tsumiki-salmon:#e3c9a3;--c-tsumiki-yellow:#ecd8b4;--c-tsumiki-sky:#d2b183;--c-tsumiki-pink:#e8d2ad;--c-tsumiki-green:#c49d6c;--c-tsumiki-purple:#dbbf95;--c-tsumiki-orange:#cda57a;}