@charset "UTF-8";

* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
margin: 0;
padding: 0;
color: #5a4a4d;
background: #fff;
font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
font-size: 14px;
line-height: 1.9;
letter-spacing: .08em;
}

img {
display: block;
max-width: 100%;
height: auto;
}

a {
color: inherit;
text-decoration: none;
}

ul {
margin: 0;
padding: 0;
list-style: none;
}

h1,
h2,
h3,
p {
margin-top: 0;
}

/* ============== スクロールアニメーション ============= */

.fade-in {
opacity: 0;
transform: translateY(25px);
transition: opacity 1s ease, transform 1s cubic-bezier(.2, .7, .2, 1);
}

.fade-in.is-visible {
opacity: 1;
transform: translateY(0);
}

/* ============== ヘッダー ============= */

#header {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
color: #fff;
background: transparent;
opacity: 0;
visibility: hidden;
transform: translateY(-15px);
transition: opacity .6s ease, transform .6s ease, background-color .5s ease, color .5s ease, box-shadow .5s ease, visibility 0s linear .6s;
}

#header.scrolled {
color: #5a454a;
background: rgba(255, 255, 255, .95);
box-shadow: 0 2px 14px rgba(80, 50, 60, .07);
backdrop-filter: blur(8px);
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity .6s ease, transform .6s ease, background-color .5s ease, color .5s ease, box-shadow .5s ease;
}

.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
width: calc(100% - 80px);
max-width: 1200px;
height: 82px;
margin: 0 auto;
}

.logo {
display: block;
width: 145px;
}

.h-logo {
width: 100%;
max-height: 52px;
object-fit: contain;
object-position: left center;
}

/* ============== PCナビ ============= */

.pc-nav ul {
display: flex;
align-items: center;
gap: 38px;
}

.pc-nav a {
position: relative;
display: inline-block;
padding: 5px 0;
font-family: "Times New Roman", "Cormorant Garamond", serif;
font-size: 14px;
font-weight: 400;
letter-spacing: .12em;
}

.pc-nav a::after {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
content: "";
background: #d6a0af;
transition: width .3s ease;
}

.pc-nav a:hover::after {
width: 100%;
}

/* ============== ハンバーガーメニュー ============= */

.menu-toggle {
display: none;
position: relative;
width: 42px;
height: 42px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
color: #5a4a4d;
}

.menu-toggle span {
position: absolute;
left: 8px;
width: 26px;
height: 1px;
background: currentColor;
transition: top .3s ease, transform .3s ease, opacity .3s ease;
}

.menu-toggle span:nth-child(1) {
top: 13px;
}

.menu-toggle span:nth-child(2) {
top: 20px;
}

.menu-toggle span:nth-child(3) {
top: 27px;
}

.menu-toggle.is-open span:nth-child(1) {
top: 20px;
transform: rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
top: 20px;
transform: rotate(-45deg);
}

/* ============== SPナビ ============= */

.sp-nav {
display: none;
}

/* ============== キービジュアル ============= */

#key {
position: relative;
width: 100%;
padding: 0;
overflow: hidden;
background: #9f6666;
}

.key-img {
display: block;
width: 100%;
max-width: 1300px;
max-height: 100vh;
margin: auto;
object-fit: contain;
animation: keyZoom 2.2s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes keyZoom {
from {
transform: scale(1.045);
}

to {
transform: scale(1);
opacity: 1;
}
}

@media (max-width: 767px) {
  .key-img {
    animation: none;
  }
}

/* ============== Concept ============= */

#concept {
position: relative;
padding: 115px 30px 125px;
overflow: hidden;
text-align: center;
background: #fff;
}

#concept h1,
#concept img,
#concept p {
position: relative;
z-index: 1;
}

#concept h1 {
margin-bottom: 42px;
color: #6a4d55;
font-family: "Times New Roman", "Yu Mincho", serif;
font-size: 26px;
font-weight: 400;
line-height: 1.9;
letter-spacing: .08em;
}

#concept h1 span {
font-size: 14px;
letter-spacing: .08em;
}

#concept img {
width: 190px;
margin: 0 auto 42px;
}

#concept p {
max-width: 680px;
margin: 0 auto 25px;
color: #6d5b60;
font-size: 16px;
line-height: 2.5;
letter-spacing: .1em;
}

#concept p:last-child {
margin-bottom: 0;
}

/* ============== 共通 ============= */

.section-inner {
width: calc(100% - 80px);
max-width: 1100px;
margin: 0 auto;
}

#notes,
#products,
#other-series {
position: relative;
overflow: hidden;
}

#notes h2,
#products h2,
#other-series h2 {
color: #6a4c55;
font-family: "Times New Roman", "Yu Mincho", serif;
font-size: 30px;
font-weight: 400;
line-height: 1.2;
letter-spacing: .1em;
}

#notes h2::after,
#products h2::after,
#other-series h2::after {
display: block;
width: 55px;
height: 1px;
margin: 18px auto 0;
content: "";
background: #d6a0af;
}

/* ============== 香調 ============= */

#notes {
padding: 105px 0 115px;
background: #fff6f5;
}

#notes .section-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 80px;
max-width: 800px;
}

#notes h2 {
flex: 0 0 170px;
margin: 0;
text-align: center;
}

#notes h2 span {
font-size: .72em;
letter-spacing: .08em;
}

#notes table {
width: min(680px, 100%);
border-collapse: collapse;
}

#notes tr {
border-bottom: 1px solid rgba(167, 119, 133, .2);
}

#notes tr:first-child {
border-top: 1px solid rgba(167, 119, 133, .2);
}

#notes th,
#notes td {
padding: 18px 15px;
text-align: left;
}

#notes th {
width: 100px;
color: #a16d7d;
font-family: "Times New Roman", serif;
font-size: 14px;
font-weight: 400;
letter-spacing: .12em;
}

#notes td {
color: #66575b;
font-size: 16px;
letter-spacing: .06em;
}

/* ============== ラインナップ ============= */

#products {
padding: 100px 0 120px;
background: #fff;
}

#products .section-inner {
width: calc(100% - 80px);
max-width: 1400px;
}

#products h2 {
margin: 0 0 40px;
text-align: center;
}

#products .product-box {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 50px;
width: 100%;
max-width: 1280px;
margin: 0 auto;
}

#products a {
display: block;
width: 100%;
transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

#products a img {
width: 100%;
transition: filter .5s ease;
}

#products a:hover {
transform: translateY(-5px) scale(1.025);
}

#products a:hover img {
filter: brightness(104%);
}

/* ============== 他シリーズ ============= */

#other-series {
padding: 100px 0 120px;
background: #fff6f5;
}

#other-series .section-inner {
text-align: center;
}

#other-series h2 {
margin-bottom: 55px;
}

#other-series .series-item {
width: 80%;
max-width: 800px;
margin: 0 auto;
}

#other-series .img-box {
display: block;
width: 100%;
overflow: hidden;
}

#other-series .img-box img {
width: 100%;
transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

#other-series .img-box:hover img {
transform: scale(1.025);
}

/* ============== フッター ============= */

footer {
padding: 4em 1em 1em;
color: #fff;
background: #6c4945;
text-align: center;
}

footer .link-wrapper {
display: flex;
justify-content: center;
gap: 1em;
}

.footer-inner {
display: flex;
flex-direction: column;
justify-content: center;
gap: 18px;
max-width: 1100px;
margin: 0 auto;
}

.footer-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: calc(50% - 9px);
padding: 20px;
border: 1px solid rgba(255, 255, 255, .45);
transition: background-color .4s ease, border-color .4s ease, transform .4s ease;
}

.footer-link-title {
display: block;
margin-bottom: 5px;
font-family: "Times New Roman", "Cormorant Garamond", serif;
font-size: 16px;
letter-spacing: .18em;
}

.footer-link-sub {
display: block;
color: rgba(255, 255, 255, .72);
font-size: 12px;
letter-spacing: .08em;
}

.footer-link:hover {
border-color: rgba(255, 255, 255, .75);
background: rgba(255, 255, 255, .1);
transform: translateY(-2px);
}

footer p {
margin: 0;
color: rgba(255, 255, 255, .6);
font-family: Arial, sans-serif;
font-size: 12px;
letter-spacing: .05em;
}

/* ============== レスポンシブ（タブレット） ============= */

@media (max-width: 1100px) {
#products .section-inner {
width: calc(100% - 60px);
}

#products .product-box {
gap: 30px;
}
}

@media (max-width: 900px) {
.header-inner {
width: calc(100% - 50px);
}

.pc-nav ul {
gap: 25px;
}

#notes .section-inner {
gap: 45px;
}

#notes h2 {
flex-basis: 140px;
}

#products .section-inner {
width: calc(100% - 50px);
}

#products .product-box {
gap: 20px;
}
}

/* ============== レスポンシブ（SP） ============= */

@media (max-width: 767px) {
body {
font-size: 12px;
letter-spacing: .05em;
}

.header-inner {
width: calc(100% - 30px);
height: 65px;
}

.logo {
width: 120px;
}

.h-logo {
max-height: 42px;
}

.pc-nav {
display: none;
}

.menu-toggle {
display: block;
}

.sp-nav {
display: block;
position: fixed;
top: 65px;
left: 0;
width: 100%;
height: calc(100vh - 65px);
padding: 50px 30px;
background: rgba(255, 255, 255, .98);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
}

.sp-nav.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.sp-nav ul {
display: block;
width: 100%;
}

.sp-nav li {
border-bottom: 1px solid #d9ceca;
}

.sp-nav li:first-child {
border-top: 1px solid #d9ceca;
}

.sp-nav a {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 16px 8px;
color: #624850;
font-family: "Times New Roman", serif;
font-size: 16px;
letter-spacing: .12em;
text-transform: uppercase;
}

.sp-nav a::after {
content: "→";
font-size: 14px;
color: #b99a6b;
transition: transform .3s ease;
}

.sp-nav a:hover::after {
transform: translateX(5px);
}

.section-inner {
width: calc(100% - 40px);
}

#concept {
padding: 80px 25px 90px;
}

#concept img {
width: 165px;
margin-bottom: 32px;
}

#concept h1 {
margin-bottom: 32px;
font-size: 20px;
line-height: 1.9;
}

#concept h1 span {
font-size: 12px;
}

#concept p {
font-size: 14px;
line-height: 2.4;
letter-spacing: .07em;
}

#notes {
padding: 80px 0 90px;
}

#notes .section-inner {
display: block;
}

#notes h2,
#products h2,
#other-series h2 {
font-size: 28px;
}

#notes h2 {
margin-bottom: 38px;
text-align: center;
}

#notes h2::after,
#products h2::after,
#other-series h2::after {
width: 45px;
margin-top: 14px;
}

#notes table {
width: 100%;
max-width: 400px;
margin: auto;
}

#notes th,
#notes td {
padding: 15px 10px;
}

#notes th {
width: 80px;
font-size: 12px;
}

#notes td {
font-size: 14px;
line-height: 1.8;
}

#products {
padding: 65px 0 80px;
}

#products h2 {
margin-bottom: 25px;
}

#products .product-box {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}

#products a {
width: auto;
transition: transform .4s ease;
}

#products a:active {
transform: scale(.98);
}

#other-series {
padding: 65px 0 80px;
}

#other-series h2 {
margin-bottom: 42px;
}

#other-series .series-item {
width: 100%;
max-width: 600px;
}

#other-series .img-box {
width: 100%;
}

.footer-inner {
width: 100%;
}

footer .link-wrapper {
flex-direction: column;
}

.footer-link {
width: 100%;
}

.footer-link-title {
font-size: 14px;
}
}

@media (max-width: 480px) {
#concept {
padding-right: 20px;
padding-left: 20px;
}

#concept h1 {
font-size: 18px;
}

#concept img {
width: 155px;
}

#notes td {
font-size: 12px;
}

#products h2,
#other-series h2 {
font-size: 24px;
}

#products .product-box {
gap: 8px;
}
}