@charset "UTF-8";
 main {
display: block;
}
hr {
-webkit-box-sizing: content-box;
box-sizing: content-box;
height: 0;
overflow: visible;
border: none;
border-top: 1px solid #DDD7CA;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.u-pc-only {
display: block !important;
}
@media screen and (max-width: 1024px) {
.u-pc-only {
display: none !important;
}
}
.u-tab-only {
display: none !important;
}
@media screen and (min-width: 601px) and (max-width: 1024px) {
.u-tab-only {
display: block !important;
}
}
.u-sp-only {
display: none !important;
}
@media screen and (max-width: 600px) {
.u-sp-only {
display: block !important;
}
}
@media screen and (max-width: 600px) {
.u-hidden-sp {
display: none !important;
}
}
.u-visible-sp {
display: none !important;
}
@media screen and (max-width: 600px) {
.u-visible-sp {
display: block !important;
}
}
@media screen and (min-width: 1025px) {
.u-hidden-pc {
display: none !important;
}
}
.u-visible-pc {
display: none !important;
}
@media screen and (min-width: 1025px) {
.u-visible-pc {
display: block !important;
}
}
@media screen and (max-width: 600px) {
.u-sp-center {
text-align: center !important;
}
}
@media screen and (max-width: 600px) {
.u-sp-left {
text-align: left !important;
}
}
:root {
--transition-speed-fast: 0.25s;
--transition-speed-normal: 0.45s;
--transition-speed-slow: 0.85s;
--transition-speed-modal: 0.5s;
--transition-ease-smooth: cubic-bezier(0.25, 1, 0.5, 1);
--transition-ease-gentle: cubic-bezier(0.16, 1, 0.3, 1);
--transition-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--transition-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
--animation-speed-bounce: 2.8s;
--hover-lift-subtle: -2px;
--hover-lift-card: -4px;
--hover-scale-image: 1.025;
--font-size-base-pc: 16px;
--font-size-base-sp: 15px;
--font-size-base: 16px;
--font-size-2xs: 11px;
--font-size-xs: 12px;
--font-size-sm: 14px;
--font-size-md: 16px;
--font-size-lg: 18px;
--font-size-xl: 22px;
--font-size-2xl: 26px;
--font-size-3xl: 36px;
--font-size-4xl: 46px;
--breakpoint-sp: 600px;
--breakpoint-pc: 1025px;
}
@media screen and (max-width: 600px) {
:root {
--font-size-base: 15px;
}
}
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
max-width: 100vw;
}
@media screen and (max-width: 600px) {
html {
font-size: 15px;
}
}
body {
background-color: #f5f2eb;
color: #2c2724;
font-family: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
font-size: 16px;
line-height: 1.9;
letter-spacing: 0.05em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
max-width: 100vw;
}
@media screen and (max-width: 600px) {
body {
font-size: 15px;
}
}
img {
max-width: 100%;
height: auto;
display: block;
vertical-align: middle;
}
a {
color: inherit;
text-decoration: none;
-webkit-transition: opacity 0.25s cubic-bezier(0.25, 1, 0.5, 1);
transition: opacity 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}
ul,
ol {
list-style: none;
}
button,
input,
textarea,
select {
font-family: inherit;
font-size: inherit;
color: inherit;
border: none;
background: none;
outline: none;
}
button {
cursor: pointer;
}
svg {
display: inline-block;
vertical-align: middle;
-ms-flex-negative: 0;
flex-shrink: 0;
}
body.admin-bar .c-header {
top: 0;
}
@media screen and (max-width: 782px) {
body.admin-bar .c-header {
top: 0;
}
}
.c-header {
position: sticky;
top: 0;
z-index: 100;
background-color: rgba(250, 248, 245, 0.96);
backdrop-filter: blur(8px);
border-bottom: 1px solid #ddd7ca;
height: 72px;
width: 100%;
max-width: 100vw;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.c-header__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
height: 100%;
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding-left: 32px;
padding-right: 0;
}
@media screen and (max-width: 600px) {
.c-header__inner {
padding-left: 20px;
padding-right: 16px;
}
}
.c-header__logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c-header__logo a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 2px;
text-decoration: none;
white-space: nowrap;
line-height: 1.2;
}
.c-header__logo a:hover {
opacity: 0.85;
}
.c-header__logo-main {
font-family: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
font-size: 22px;
font-weight: 500;
letter-spacing: 0.16em;
color: #2c2724;
}
@media screen and (max-width: 600px) {
.c-header__logo-main {
font-size: 17px;
}
}
.c-header__logo-sub {
font-family: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
font-size: 11px;
letter-spacing: 0.22em;
color: #6e665f;
text-transform: uppercase;
}
.c-header__nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
}
@media screen and (max-width: 600px) {
.c-header__nav--desktop {
display: none !important;
}
}
.c-header__nav-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
margin: 0;
padding: 0;
}
.c-header__nav-item {
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c-header__nav-item a,
.c-header__nav-item button {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
padding: 0 24px;
font-size: 14px;
letter-spacing: 0.08em;
color: #2c2724;
text-decoration: none;
white-space: nowrap;
-webkit-transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
@media screen and (max-width: 600px) {
.c-header__nav-item a,
.c-header__nav-item button {
padding: 0 12px;
font-size: 13px;
}
}
.c-header__nav-item a:hover,
.c-header__nav-item button:hover {
background-color: rgba(138, 98, 52, 0.06);
color: #8a6234;
}
.c-header__nav-item--contact a,
.c-header__nav-item--contact button {
background-color: #8a6234;
color: #ffffff;
gap: 8px;
padding: 0 32px;
font-weight: 400;
-webkit-transition: background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), color 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), color 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), color 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), color 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
@media screen and (max-width: 600px) {
.c-header__nav-item--contact a,
.c-header__nav-item--contact button {
padding: 0 16px;
}
}
.c-header__nav-item--contact a img,
.c-header__nav-item--contact a svg,
.c-header__nav-item--contact button img,
.c-header__nav-item--contact button svg {
width: 16px;
height: 16px;
-ms-flex-negative: 0;
flex-shrink: 0;
display: inline-block;
vertical-align: middle;
}
.c-header__nav-item--contact a:hover,
.c-header__nav-item--contact button:hover {
background-color: #724e26;
color: #ffffff;
-webkit-box-shadow: 0 4px 12px rgba(138, 98, 52, 0.2);
box-shadow: 0 4px 12px rgba(138, 98, 52, 0.2);
}
.c-header__hamburger {
display: none;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 6px;
width: 44px;
height: 44px;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
z-index: 120;
}
@media screen and (max-width: 600px) {
.c-header__hamburger {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
.c-header__hamburger-bar,
.c-header__hamburger span {
display: block;
width: 22px;
height: 2px;
background-color: #2c2724;
-webkit-transition: opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.c-header__hamburger.is-active span:nth-child(1),
.c-header__hamburger.is-active .c-header__hamburger-bar:nth-child(1) {
-webkit-transform: translateY(8px) rotate(45deg);
transform: translateY(8px) rotate(45deg);
}
.c-header__hamburger.is-active span:nth-child(2),
.c-header__hamburger.is-active .c-header__hamburger-bar:nth-child(2) {
opacity: 0;
}
.c-header__hamburger.is-active span:nth-child(3),
.c-header__hamburger.is-active .c-header__hamburger-bar:nth-child(3) {
-webkit-transform: translateY(-8px) rotate(-45deg);
transform: translateY(-8px) rotate(-45deg);
}
.c-header__drawer {
display: none;
}
@media screen and (max-width: 600px) {
.c-header__drawer {
display: block;
position: fixed;
inset: 0;
z-index: 200;
visibility: hidden;
opacity: 0;
-webkit-transition: visibility 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: visibility 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.c-header__drawer.is-open {
visibility: visible;
opacity: 1;
}
.c-header__drawer.is-open .c-header__drawer-content {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.c-header__drawer-overlay {
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(4px);
}
.c-header__drawer-content {
position: absolute;
top: 0;
right: 0;
width: 82%;
max-width: 320px;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
background-color: #f5f2eb;
-webkit-box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 24px 24px 36px;
-webkit-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: -webkit-transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
transition: -webkit-transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
overflow-y: auto;
}
.c-header__drawer-top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding-bottom: 20px;
border-bottom: 1px solid #ddd7ca;
margin-bottom: 24px;
}
.c-header__drawer-brand {
font-family: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
font-size: 18px;
letter-spacing: 0.16em;
color: #2c2724;
font-weight: 500;
}
.c-header__drawer-close {
position: relative;
width: 36px;
height: 36px;
background: none;
border: none;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.c-header__drawer-close span {
position: absolute;
width: 20px;
height: 2px;
background-color: #2c2724;
}
.c-header__drawer-close span:nth-child(1) {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.c-header__drawer-close span:nth-child(2) {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.c-header__drawer-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin: 0 0 32px;
padding: 0;
}
.c-header__drawer-item {
border-bottom: 1px solid rgba(221, 215, 202, 0.6);
}
.c-header__drawer-item a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 18px 0;
font-size: 15px;
letter-spacing: 0.1em;
color: #2c2724;
-webkit-transition: color 0.25s cubic-bezier(0.25, 1, 0.5, 1), padding-left 0.25s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.25s cubic-bezier(0.25, 1, 0.5, 1), padding-left 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}
.c-header__drawer-item a:hover, .c-header__drawer-item a:active {
color: #8a6234;
padding-left: 6px;
}
.c-header__drawer-bottom {
margin-top: auto;
}
.c-header__drawer-contact-btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 10px;
background-color: #8a6234;
color: #ffffff;
padding: 15px 20px;
font-size: 14px;
letter-spacing: 0.1em;
-webkit-box-shadow: 0 4px 14px rgba(138, 98, 52, 0.2);
box-shadow: 0 4px 14px rgba(138, 98, 52, 0.2);
text-decoration: none;
-webkit-transition: background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.c-header__drawer-contact-btn:hover, .c-header__drawer-contact-btn:active {
background-color: #724e26;
color: #ffffff;
}
.c-header__drawer-contact-btn img,
.c-header__drawer-contact-btn svg {
width: 18px;
height: 18px;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.c-footer {
background-color: #f5f2eb;
padding-top: 80px;
padding-bottom: 32px;
border-top: 1px solid #ddd7ca;
text-align: center;
}
.c-footer__inner {
width: 100%;
max-width: 820px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
}
@media screen and (max-width: 600px) {
.c-footer__inner {
padding-left: 16px;
padding-right: 16px;
}
}
.c-footer__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c-footer__brand {
font-size: 26px;
font-weight: 500;
letter-spacing: 0.16em;
color: #2c2724;
margin-bottom: 12px;
}
.c-footer__tagline {
font-size: 14px;
letter-spacing: 0.08em;
color: #6e665f;
margin-bottom: 36px;
}
@media screen and (max-width: 600px) {
.c-footer__tagline {
font-size: 13px;
line-height: 1.6;
}
}
.c-footer__contact-btn {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #8a6234;
color: #ffffff;
width: 100%;
max-width: 440px;
padding: 18px 24px;
text-decoration: none;
cursor: pointer;
-webkit-box-shadow: 0 4px 16px rgba(138, 98, 52, 0.15);
box-shadow: 0 4px 16px rgba(138, 98, 52, 0.15);
-webkit-transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.c-footer__contact-btn:hover {
background-color: #724e26;
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0 8px 24px rgba(138, 98, 52, 0.28);
box-shadow: 0 8px 24px rgba(138, 98, 52, 0.28);
}
.c-footer__contact-btn-main {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 12px;
font-size: 16px;
font-weight: 500;
letter-spacing: 0.1em;
margin-bottom: 4px;
white-space: nowrap;
}
.c-footer__contact-btn-main svg {
width: 22px;
height: 22px;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.c-footer__contact-btn-main span {
white-space: nowrap;
}
.c-footer__contact-btn-sub {
font-size: 12px;
letter-spacing: 0.06em;
opacity: 0.9;
white-space: nowrap;
}
.c-footer__sns {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 20px;
margin-top: 36px;
margin-bottom: 36px;
}
.c-footer__sns a {
color: #2c2724;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: rgba(138, 98, 52, 0.04);
-webkit-transition: opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), color 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), color 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), color 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), color 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.c-footer__sns a:hover {
background-color: rgba(138, 98, 52, 0.12);
color: #8a6234;
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
.c-footer__sns a img,
.c-footer__sns a svg {
width: 24px;
height: 24px;
-ms-flex-negative: 0;
flex-shrink: 0;
-o-object-fit: contain;
object-fit: contain;
display: inline-block;
vertical-align: middle;
}
.c-footer__sns a img.c-footer__sns-icon--amazon,
.c-footer__sns a .c-footer__sns-icon--amazon,
.c-footer__sns a img[src*=amazon],
.c-footer__sns a img[alt*=Amazon] {
width: 48px;
height: 14px;
max-width: 48px;
max-height: 14px;
}
.c-footer__info {
font-size: 14px;
color: #6e665f;
line-height: 2;
letter-spacing: 0.06em;
margin-bottom: 48px;
}
.c-footer__info dl {
display: -ms-grid;
display: grid;
-ms-grid-columns: auto 16px 1fr;
grid-template-columns: auto 1fr;
-webkit-column-gap: 16px;
-moz-column-gap: 16px;
column-gap: 16px;
row-gap: 4px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
max-width: 480px;
margin: 0 auto;
text-align: left;
}
@media screen and (max-width: 600px) {
.c-footer__info dl {
display: block;
text-align: center;
}
}
.c-footer__info dt {
color: #9e968d;
letter-spacing: 0.1em;
}
.c-footer__info dd {
color: #2c2724;
}
.c-footer__info dd a {
text-decoration: underline;
text-underline-offset: 3px;
color: inherit;
}
.c-footer__bottom {
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding-top: 24px;
border-top: 1px solid #ddd7ca;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
font-size: 11px;
letter-spacing: 0.12em;
color: #9e968d;
}
@media screen and (max-width: 600px) {
.c-footer__bottom {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
gap: 16px;
text-align: center;
}
}
.c-footer__copyright {
text-transform: uppercase;
}
.c-footer__to-top {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 6px;
color: #6e665f;
font-size: 12px;
letter-spacing: 0.08em;
cursor: pointer;
background: none;
border: none;
-webkit-transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.c-footer__to-top:hover {
color: #8a6234;
}
.c-genre-card {
display: block;
text-decoration: none;
background-color: #121212;
overflow: hidden;
-webkit-box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
-webkit-transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.c-genre-card:hover {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}
.c-genre-card:hover .c-genre-card__img {
-webkit-transform: scale(1.025);
transform: scale(1.025);
}
.c-genre-card:hover .c-genre-card__meta {
background-color: #e7e2d7;
}
.c-genre-card:hover .c-genre-card__link-text svg {
-webkit-transform: translateX(4px);
transform: translateX(4px);
}
.c-genre-card__media {
position: relative;
width: 100%;
aspect-ratio: 16/9;
background-color: #0c0c0c;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.c-genre-card__img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
-webkit-transition: -webkit-transform 0.85s cubic-bezier(0.25, 1, 0.5, 1);
transition: -webkit-transform 0.85s cubic-bezier(0.25, 1, 0.5, 1);
transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1);
transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.85s cubic-bezier(0.25, 1, 0.5, 1);
}
.c-genre-card__meta {
background-color: #efece4;
padding: 16px 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 12px;
-webkit-transition: background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), color 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), color 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.c-genre-card__title {
font-size: 18px;
font-weight: 500;
letter-spacing: 0.12em;
color: #2c2724;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.c-genre-card__link-text {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 4px;
font-size: 14px;
letter-spacing: 0.08em;
color: #6e665f;
white-space: nowrap;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.c-genre-card__link-text svg {
width: 14px;
height: 14px;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), color 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), color 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.c-artwork-card {
display: block;
text-decoration: none;
background-color: #121212;
overflow: hidden;
-webkit-box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
-webkit-transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.c-artwork-card:hover {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}
.c-artwork-card:hover .c-artwork-card__img {
-webkit-transform: scale(1.025);
transform: scale(1.025);
}
.c-artwork-card:hover .c-artwork-card__meta {
background-color: #e7e2d7;
}
.c-artwork-card:hover .c-artwork-card__arrow {
-webkit-transform: translateX(4px);
transform: translateX(4px);
}
.c-artwork-card__media {
position: relative;
width: 100%;
aspect-ratio: 1/1;
background-color: #111111;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.c-artwork-card__img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
-webkit-transition: -webkit-transform 0.85s cubic-bezier(0.25, 1, 0.5, 1);
transition: -webkit-transform 0.85s cubic-bezier(0.25, 1, 0.5, 1);
transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1);
transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.85s cubic-bezier(0.25, 1, 0.5, 1);
}
.c-artwork-card__meta {
background-color: #efece4;
padding: 14px 18px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-transition: background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), color 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), color 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.c-artwork-card__title {
font-size: 16px;
font-weight: 500;
letter-spacing: 0.08em;
color: #2c2724;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.c-artwork-card__arrow {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #6e665f;
-webkit-transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), color 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), color 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.c-artwork-card__arrow svg {
width: 12px;
height: 12px;
}
.c-btn {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 8px;
cursor: pointer;
text-decoration: none;
font-family: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
letter-spacing: 0.08em;
-webkit-transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.c-btn--instagram {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 10px;
background-color: #8a6234;
color: #ffffff;
padding: 14px 44px;
font-size: 16px;
font-weight: 500;
letter-spacing: 0.1em;
white-space: nowrap;
text-decoration: none;
-webkit-box-shadow: 0 4px 14px rgba(138, 98, 52, 0.2);
box-shadow: 0 4px 14px rgba(138, 98, 52, 0.2);
-webkit-transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
@media screen and (max-width: 600px) {
.c-btn--instagram {
padding: 12px 28px;
font-size: 14px;
}
}
.c-btn--instagram svg {
width: 18px;
height: 18px;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.c-btn--instagram span {
white-space: nowrap;
}
.c-btn--instagram:hover {
background-color: #724e26;
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0 6px 18px rgba(138, 98, 52, 0.28);
box-shadow: 0 6px 18px rgba(138, 98, 52, 0.28);
color: #ffffff;
}
.c-btn--back {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 8px;
color: #6e665f;
font-size: 14px;
letter-spacing: 0.08em;
padding: 12px 24px;
border: 1px solid #ddd7ca;
background-color: #faf8f5;
text-decoration: none;
white-space: nowrap;
-webkit-transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.c-btn--back svg {
width: 14px;
height: 14px;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-transition: -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.c-btn--back:hover {
color: #8a6234;
border-color: #8a6234;
background-color: #ffffff;
-webkit-box-shadow: 0 4px 14px rgba(138, 98, 52, 0.1);
box-shadow: 0 4px 14px rgba(138, 98, 52, 0.1);
}
.c-btn--back:hover svg {
-webkit-transform: translateX(-4px);
transform: translateX(-4px);
}
.c-btn--scroll-down {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 6px;
color: #6e665f;
font-size: 12px;
letter-spacing: 0.16em;
background: none;
border: none;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
-webkit-transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.c-btn--scroll-down svg {
width: 16px;
height: 16px;
stroke: #8a6234;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-animation: bounce-subtle 2.8s infinite cubic-bezier(0.45, 0, 0.55, 1);
animation: bounce-subtle 2.8s infinite cubic-bezier(0.45, 0, 0.55, 1);
}
.c-btn--scroll-down:hover {
color: #8a6234;
}
@-webkit-keyframes bounce-subtle {
0%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 0.8;
}
50% {
-webkit-transform: translateY(5px);
transform: translateY(5px);
opacity: 1;
}
}
@keyframes bounce-subtle {
0%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 0.8;
}
50% {
-webkit-transform: translateY(5px);
transform: translateY(5px);
opacity: 1;
}
}
.c-pagination {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 16px;
margin-top: 56px;
margin-bottom: 24px;
font-family: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
}
.c-pagination__item {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
min-width: 32px;
height: 32px;
font-size: 16px;
color: #9e968d;
text-decoration: none;
-webkit-transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.c-pagination__item:hover {
color: #8a6234;
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
.c-pagination__item.is-active, .c-pagination__item.current {
color: #2c2724;
font-weight: 600;
position: relative;
}
.c-pagination__item.is-active::after, .c-pagination__item.current::after {
content: "";
position: absolute;
bottom: 2px;
left: 25%;
right: 25%;
height: 1px;
background-color: #2c2724;
-webkit-transition: background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.c-pagination__item--prev, .c-pagination__item--next {
color: #6e665f;
font-size: 14px;
}
.c-pagination__item--prev svg, .c-pagination__item--next svg {
width: 14px;
height: 14px;
}
.p-front-hero {
padding: 100px 20px 80px;
text-align: center;
background-color: #f5f2eb;
}
@media screen and (max-width: 600px) {
.p-front-hero {
padding: 60px 16px 50px;
}
}
.p-front-hero__inner {
width: 100%;
max-width: 820px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
}
@media screen and (max-width: 600px) {
.p-front-hero__inner {
padding-left: 16px;
padding-right: 16px;
}
}
.p-front-hero__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.p-front-hero__title {
font-size: 46px;
font-weight: 500;
letter-spacing: 0.22em;
color: #2c2724;
margin-bottom: 14px;
}
@media screen and (max-width: 600px) {
.p-front-hero__title {
font-size: 24px;
letter-spacing: 0.16em;
}
}
.p-front-hero__subtitle {
font-size: 14px;
letter-spacing: 0.2em;
color: #6e665f;
margin-bottom: 44px;
text-transform: uppercase;
}
@media screen and (max-width: 600px) {
.p-front-hero__subtitle {
font-size: 11px;
margin-bottom: 32px;
}
}
.p-front-hero__lead {
max-width: 660px;
font-size: 16px;
line-height: 2.3;
letter-spacing: 0.09em;
color: #2c2724;
text-align: justify;
text-justify: inter-ideograph;
margin-bottom: 50px;
}
@media screen and (max-width: 600px) {
.p-front-hero__lead {
font-size: 15px;
line-height: 2.1;
text-align: left;
margin-bottom: 36px;
}
}
.p-front-hero__scroll-link {
margin-top: 10px;
}
.p-front-news {
padding: 70px 20px 90px;
background-color: #f5f2eb;
}
@media screen and (max-width: 600px) {
.p-front-news {
padding: 50px 16px 60px;
}
}
.p-front-news__inner {
width: 100%;
max-width: 820px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
}
@media screen and (max-width: 600px) {
.p-front-news__inner {
padding-left: 16px;
padding-right: 16px;
}
}
.p-front-news__title {
text-align: center;
font-size: 26px;
font-weight: 500;
letter-spacing: 0.18em;
color: #2c2724;
margin-bottom: 40px;
position: relative;
}
.p-front-news__title::after {
content: "";
display: block;
width: 48px;
height: 1px;
background-color: #c9c1b2;
margin: 20px auto 0;
}
.p-front-news__list {
margin-bottom: 50px;
}
.p-front-news__item {
padding: 32px 0;
border-bottom: 1px solid #ddd7ca;
}
.p-front-news__item:first-child {
border-top: 1px solid #ddd7ca;
}
.p-front-news__meta {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.p-front-news__date {
font-size: 14px;
letter-spacing: 0.08em;
color: #9e968d;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.p-front-news__badge {
font-size: 11px;
letter-spacing: 0.1em;
color: #8a6234;
font-weight: 600;
}
.p-front-news__item-title {
font-size: 16px;
font-weight: 500;
letter-spacing: 0.06em;
color: #2c2724;
margin-bottom: 16px;
line-height: 1.6;
}
.p-front-news__item-body {
font-size: 14px;
line-height: 2.1;
color: #6e665f;
letter-spacing: 0.05em;
}
.p-front-news__item-body p + p {
margin-top: 12px;
}
.p-front-news__item-body ul {
margin-top: 14px;
padding-left: 0;
line-height: 1.9;
}
.p-front-news__item-body li {
position: relative;
padding-left: 14px;
}
.p-front-news__item-body li::before {
content: "・";
position: absolute;
left: 0;
}
.p-front-news__item-body a {
color: #8a6234;
text-decoration: underline;
text-underline-offset: 3px;
}
.p-front-news__item-body a:hover {
opacity: 0.8;
}
.p-front-news__instagram {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 48px;
}
.p-front-genres {
padding: 80px 20px 120px;
background-color: #f5f2eb;
}
@media screen and (max-width: 600px) {
.p-front-genres {
padding: 50px 16px 80px;
}
}
.p-front-genres__inner {
width: 100%;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
}
@media screen and (max-width: 600px) {
.p-front-genres__inner {
padding-left: 16px;
padding-right: 16px;
}
}
.p-front-genres__title {
text-align: center;
font-size: 26px;
font-weight: 500;
letter-spacing: 0.2em;
color: #2c2724;
margin-bottom: 60px;
}
@media screen and (max-width: 600px) {
.p-front-genres__title {
font-size: 19px;
margin-bottom: 36px;
}
}
.p-front-genres__grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 32px 1fr;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
@media screen and (max-width: 600px) {
.p-front-genres__grid {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
gap: 24px;
}
}
.p-front-genres__grid > *:last-child:nth-child(odd) {
grid-column: 1/-1;
max-width: 534px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
@media screen and (max-width: 600px) {
.p-front-genres__grid > *:last-child:nth-child(odd) {
max-width: 100%;
}
}
.p-archive-header {
padding: 80px 20px 60px;
text-align: center;
background-color: #f5f2eb;
}
@media screen and (max-width: 600px) {
.p-archive-header {
padding: 50px 16px 40px;
}
}
.p-archive-header__inner {
width: 100%;
max-width: 820px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
}
@media screen and (max-width: 600px) {
.p-archive-header__inner {
padding-left: 16px;
padding-right: 16px;
}
}
.p-archive-header__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.p-archive-header__kicker {
font-size: 14px;
letter-spacing: 0.2em;
color: #6e665f;
margin-bottom: 16px;
}
.p-archive-header__title {
font-size: 46px;
font-weight: 500;
letter-spacing: 0.18em;
color: #2c2724;
margin-bottom: 28px;
}
@media screen and (max-width: 600px) {
.p-archive-header__title {
font-size: 21px;
margin-bottom: 20px;
}
}
.p-archive-header__desc {
max-width: 660px;
font-size: 16px;
line-height: 2.3;
letter-spacing: 0.08em;
color: #6e665f;
text-align: justify;
text-justify: inter-ideograph;
}
@media screen and (max-width: 600px) {
.p-archive-header__desc {
text-align: left;
font-size: 15px;
line-height: 2;
}
}
.p-archive-header__genre-nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 8px;
margin-top: 36px;
}
.p-archive-header__genre-link {
font-size: 14px;
letter-spacing: 0.06em;
color: #6e665f;
padding: 6px 14px;
border: 1px solid #ddd7ca;
background-color: rgba(250, 248, 245, 0.8);
text-decoration: none;
-webkit-transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.p-archive-header__genre-link:hover {
color: #8a6234;
border-color: #8a6234;
background-color: #ffffff;
}
.p-archive-header__genre-link.is-active {
color: #ffffff;
background-color: #8a6234;
border-color: #8a6234;
}
.p-archive-works {
padding-bottom: 100px;
background-color: #f5f2eb;
}
@media screen and (max-width: 600px) {
.p-archive-works {
padding-bottom: 60px;
}
}
.p-archive-works__inner {
width: 100%;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
}
@media screen and (max-width: 600px) {
.p-archive-works__inner {
padding-left: 16px;
padding-right: 16px;
}
}
.p-archive-works__grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 28px 1fr 28px 1fr;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
@media screen and (min-width: 601px) and (max-width: 1024px) {
.p-archive-works__grid {
-ms-grid-columns: 1fr 20px 1fr;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media screen and (max-width: 600px) {
.p-archive-works__grid {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
gap: 24px;
}
}
.p-archive-works__empty {
text-align: center;
padding: 80px 20px;
color: #6e665f;
font-size: 14px;
letter-spacing: 0.08em;
}
.p-archive-works__back {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 48px;
padding-top: 8px;
}
@media screen and (max-width: 600px) {
.p-archive-works__back {
margin-top: 36px;
}
}
.p-single-artwork {
padding: 80px 20px 100px;
background-color: #f5f2eb;
}
@media screen and (max-width: 600px) {
.p-single-artwork {
padding: 50px 16px 60px;
}
}
.p-single-artwork__inner {
width: 100%;
max-width: 820px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
}
@media screen and (max-width: 600px) {
.p-single-artwork__inner {
padding-left: 16px;
padding-right: 16px;
}
}
.p-single-artwork__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.p-single-artwork__header {
text-align: center;
margin-bottom: 60px;
width: 100%;
}
@media screen and (max-width: 600px) {
.p-single-artwork__header {
margin-bottom: 40px;
}
}
.p-single-artwork__genre-link {
display: inline-block;
font-size: 16px;
letter-spacing: 0.18em;
color: #6e665f;
margin-bottom: 16px;
-webkit-transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.p-single-artwork__genre-link:hover {
color: #8a6234;
}
.p-single-artwork__title {
font-size: 46px;
font-weight: 500;
letter-spacing: 0.16em;
color: #2c2724;
margin-bottom: 28px;
}
@media screen and (max-width: 600px) {
.p-single-artwork__title {
font-size: 24px;
margin-bottom: 20px;
}
}
.p-single-artwork__desc {
max-width: 660px;
margin: 0 auto;
font-size: 16px;
line-height: 2.3;
letter-spacing: 0.08em;
color: #6e665f;
text-align: justify;
text-justify: inter-ideograph;
}
@media screen and (max-width: 600px) {
.p-single-artwork__desc {
text-align: left;
font-size: 15px;
line-height: 2;
}
}
.p-single-artwork__spec {
max-width: 580px;
width: 100%;
margin: 36px auto 0;
border-top: 1px solid #ddd7ca;
border-bottom: 1px solid #ddd7ca;
padding: 18px 0;
}
.p-single-artwork__spec dl {
display: -ms-grid;
display: grid;
-ms-grid-columns: 110px 1fr;
grid-template-columns: 110px 1fr;
row-gap: 10px;
font-size: 16px;
line-height: 1.8;
}
@media screen and (max-width: 600px) {
.p-single-artwork__spec dl {
font-size: 15px;
}
}
.p-single-artwork__spec dt {
color: #9e968d;
letter-spacing: 0.1em;
}
.p-single-artwork__spec dd {
color: #2c2724;
}
.p-single-artwork__gallery {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 32px;
width: 100%;
max-width: 680px;
margin-bottom: 60px;
}
@media screen and (max-width: 600px) {
.p-single-artwork__gallery {
gap: 20px;
margin-bottom: 40px;
}
}
.p-single-artwork__gallery-item {
background-color: #121212;
overflow: hidden;
-webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
position: relative;
cursor: -webkit-zoom-in;
cursor: zoom-in;
-webkit-transition: -webkit-transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.85s cubic-bezier(0.25, 1, 0.5, 1);
transition: -webkit-transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.85s cubic-bezier(0.25, 1, 0.5, 1);
transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.85s cubic-bezier(0.25, 1, 0.5, 1);
transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.85s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.85s cubic-bezier(0.25, 1, 0.5, 1);
}
.p-single-artwork__gallery-item:hover {
-webkit-transform: scale(1.025);
transform: scale(1.025);
-webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
}
.p-single-artwork__gallery-item img {
width: 100%;
height: auto;
display: block;
}
.p-single-artwork__gallery-caption {
font-size: 11px;
color: #9e968d;
letter-spacing: 0.08em;
text-align: center;
margin-top: 8px;
}
.p-single-artwork__action {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 24px;
margin-top: 20px;
}
.p-single-artwork__inquire-btn {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 8px;
background-color: #8a6234;
color: #ffffff;
padding: 14px 32px;
font-size: 14px;
letter-spacing: 0.1em;
-webkit-box-shadow: 0 4px 12px rgba(138, 98, 52, 0.15);
box-shadow: 0 4px 12px rgba(138, 98, 52, 0.15);
-webkit-transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.p-single-artwork__inquire-btn:hover {
background-color: #724e26;
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0 6px 20px rgba(138, 98, 52, 0.25);
box-shadow: 0 6px 20px rgba(138, 98, 52, 0.25);
}
.p-contact {
padding: 80px 20px 100px;
background-color: #f5f2eb;
}
.p-contact__inner {
width: 100%;
max-width: 640px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
}
@media screen and (max-width: 600px) {
.p-contact__inner {
padding-left: 16px;
padding-right: 16px;
}
}
.p-contact__title {
text-align: center;
font-size: 36px;
font-weight: 500;
letter-spacing: 0.18em;
color: #2c2724;
margin-bottom: 24px;
}
.p-contact__lead {
text-align: center;
font-size: 14px;
line-height: 2.1;
color: #6e665f;
margin-bottom: 48px;
}
.p-contact__message {
padding: 24px;
border-radius: 4px;
text-align: center;
margin-bottom: 32px;
}
.p-contact__message--success {
background-color: #F0FDF4;
border: 1px solid #BBF7D0;
color: #166534;
}
.p-contact__message--error {
background-color: #FEF2F2;
border: 1px solid #FECACA;
color: #991B1B;
}
.p-contact__message-title {
font-size: 16px;
font-weight: 600;
letter-spacing: 0.08em;
margin-bottom: 8px;
}
.p-contact__message-body {
font-size: 14px;
line-height: 1.8;
opacity: 0.95;
}
.p-contact__form {
background-color: #ffffff;
padding: 40px;
border: 1px solid #ddd7ca;
-webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}
@media screen and (max-width: 600px) {
.p-contact__form {
padding: 24px 16px;
}
}
.p-contact__group {
margin-bottom: 28px;
}
.p-contact__group label {
display: block;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.08em;
color: #2c2724;
margin-bottom: 8px;
}
.p-contact__group label .is-required {
color: #C2410C;
margin-left: 4px;
font-size: 12px;
}
.p-contact__group input[type=text],
.p-contact__group input[type=email],
.p-contact__group input[type=tel],
.p-contact__group select,
.p-contact__group textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid #ddd7ca;
background-color: #faf8f5;
font-size: 16px;
color: #2c2724;
-webkit-transition: border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.p-contact__group input[type=text]:focus,
.p-contact__group input[type=email]:focus,
.p-contact__group input[type=tel]:focus,
.p-contact__group select:focus,
.p-contact__group textarea:focus {
border-color: #8a6234;
background-color: #ffffff;
outline: none;
-webkit-box-shadow: 0 0 0 3px rgba(138, 98, 52, 0.08);
box-shadow: 0 0 0 3px rgba(138, 98, 52, 0.08);
}
.p-contact__group textarea {
resize: vertical;
min-height: 120px;
line-height: 1.7;
}
.p-contact__submit {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 36px;
}
.p-contact__submit button {
background-color: #8a6234;
color: #ffffff;
padding: 16px 48px;
font-size: 16px;
letter-spacing: 0.12em;
cursor: pointer;
-webkit-box-shadow: 0 4px 14px rgba(138, 98, 52, 0.15);
box-shadow: 0 4px 14px rgba(138, 98, 52, 0.15);
-webkit-transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.p-contact__submit button:hover {
background-color: #724e26;
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0 8px 24px rgba(138, 98, 52, 0.25);
box-shadow: 0 8px 24px rgba(138, 98, 52, 0.25);
}
.c-modal-overlay {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.72);
backdrop-filter: blur(4px);
z-index: 9999;
display: none;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 20px;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.5s cubic-bezier(0.25, 1, 0.5, 1);
transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.c-modal-overlay.is-open {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
opacity: 1;
visibility: visible;
}
.c-modal-overlay.is-open .c-modal-overlay__container {
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
opacity: 1;
}
.c-modal-overlay__container {
background-color: #f5f2eb;
width: 100%;
max-width: 600px;
max-height: 90vh;
overflow-y: auto;
padding: 44px 40px;
position: relative;
border: 1px solid #ddd7ca;
-webkit-box-shadow: 0 20px 56px rgba(0, 0, 0, 0.35);
box-shadow: 0 20px 56px rgba(0, 0, 0, 0.35);
-webkit-transform: translateY(16px) scale(0.98);
transform: translateY(16px) scale(0.98);
opacity: 0;
-webkit-transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1);
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@media screen and (max-width: 600px) {
.c-modal-overlay__container {
padding: 32px 20px;
}
}
.c-modal-overlay__close {
position: absolute;
top: 16px;
right: 16px;
background: none;
border: none;
cursor: pointer;
color: #6e665f;
padding: 8px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.c-modal-overlay__close svg {
width: 20px;
height: 20px;
stroke: currentColor;
}
.c-modal-overlay__close:hover {
color: #8a6234;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.p-contact__modal-inner .p-contact__title {
font-size: 22px;
letter-spacing: 0.16em;
margin-bottom: 12px;
}
.p-contact__modal-inner .p-contact__lead {
font-size: 12px;
line-height: 1.9;
margin-bottom: 28px;
}
.p-contact__modal-inner .p-contact__group {
margin-bottom: 20px;
}
.p-contact__modal-inner .p-contact__group label {
font-size: 12px;
margin-bottom: 6px;
}
.p-contact__modal-inner .p-contact__group input, .p-contact__modal-inner .p-contact__group select, .p-contact__modal-inner .p-contact__group textarea {
font-size: 14px;
padding: 10px 12px;
border: 1px solid #ddd7ca;
background-color: #ffffff;
}
.p-contact__modal-inner .p-contact__group textarea {
min-height: 90px;
}
.p-contact__modal-inner .p-contact__submit {
margin-top: 24px;
}
.p-contact__modal-inner .p-contact__submit button {
padding: 14px 44px;
font-size: 14px;
background-color: #8a6234;
color: #ffffff;
letter-spacing: 0.12em;
cursor: pointer;
-webkit-box-shadow: 0 4px 14px rgba(138, 98, 52, 0.15);
box-shadow: 0 4px 14px rgba(138, 98, 52, 0.15);
-webkit-transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: color 0.45s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.p-contact__modal-inner .p-contact__submit button:hover {
background-color: #724e26;
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0 6px 20px rgba(138, 98, 52, 0.25);
box-shadow: 0 6px 20px rgba(138, 98, 52, 0.25);
}