@charset "utf-8";

/* ==========================================================================
   RESET
   ========================================================================== */
* ,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
--sp: calc(100vw / 402); /* 1 = 1px at 402px SP design */
}
html.is-smooth-scroll {
scroll-behavior: auto !important;
}
html.is-smooth-scroll,
html.is-smooth-scroll body {
overscroll-behavior-y: none;
}
body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, dt, dd,
figure, figcaption {
margin: 0;
padding: 0;
}
ul, ol {
list-style: none;
}
img {
display: block;
max-width: 100%;
height: auto;
vertical-align: bottom;
border: 0;
}
a {
color: inherit;
text-decoration: none;
transition: opacity .3s ease, color .3s ease, background-color .3s ease, border-color .3s ease;
}
button {
font: inherit;
color: inherit;
border: 0;
background: none;
cursor: pointer;
}

#globalFooter .targetTop {
display: none;
}

.A1Mincho {
font-family: 'A1 Mincho', serif;
}
.KoburinaGothicW6 {
font-family: 'Koburina Gothic W6 JIS2004', sans-serif;
}
.KoburinaGothicW3 {
font-family: 'Koburina Gothic W3 JIS2004', sans-serif;
line-height: 1.5;
}

/* ==========================================================================
   BASE
   ========================================================================== */
body {
position: relative;
background: #faf9f6;
color: #161513;
font-family: 'Koburina Gothic W3 JIS2004', sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 1.9;
letter-spacing: .04em;
-webkit-font-smoothing: antialiased;
min-width: 0;
}
body.nav-open {
overflow: hidden;
}
.en,
.ttl-en {
font-family: "Zalando Sans Expanded", "Oswald", sans-serif;
}
.serif {
font-family: "Noto Serif JP", serif;
}
.cont {
box-sizing: border-box;
margin: 0 auto;
width: 100%;
}

.sp { display: inherit; }
.pc { display: none; }

@media screen and (min-width: 768px) {
html { --sp: 1px; }
body { min-width: 1280px; }
.sp { display: none; }
.pc { display: inherit; }
.cont { max-width: 1280px; }
}

/* fade / parallax temporarily disabled for layout check */
.bottomView,
.topView,
.leftView,
.rightView,
.fadeView,
.fadeImg {
opacity: 1;
transform: none;
}
.fadeImg .media {
overflow: hidden;
}
.fadeImg .media img,
.parallax-clip img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

/* scroll reveal — slow photographic fade */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 2s ease, transform 2s ease;
}
.reveal.is-in {
opacity: 1;
transform: none;
}
.reveal-fade {
opacity: 0;
filter: blur(10px);
transform: scale(1.02);
transition: opacity 2s ease, filter 2s ease, transform 2s ease;
}
.reveal-fade.is-in {
opacity: 1;
filter: blur(0);
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.reveal,
.reveal-fade {
opacity: 1;
filter: none;
transform: none;
transition: none;
}
}

/* ==========================================================================
   NAVIGATION — fixed to top (PC / SP)
   SP: menu expands below the header bar
   ========================================================================== */
#navigation {
position: fixed;
left: 0;
top: 0;
z-index: 1000;
width: 100%;
height: auto;
overflow: hidden;
background-color: #000;
}
#navigation .nav-drop {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .4s ease;
}
body.nav-open #navigation .nav-drop {
grid-template-rows: 1fr;
}
#navigation .nav-drop-inner {
overflow: hidden;
min-height: 0;
}
#navigation .nav-drop-links {
display: flex;
flex-direction: column;
gap: calc(10 * var(--sp));
margin: 0;
padding: calc(6 * var(--sp)) calc(14 * var(--sp)) calc(20 * var(--sp));
}
#navigation .nav-drop-links a {
font-family: "Zalando Sans Expanded", "Oswald", sans-serif;
font-size: calc(16 * var(--sp));
font-weight: 600;
color: #fff;
}
#navigation .nav-drop-links a.active {
text-decoration: underline;
text-underline-offset: calc(6 * var(--sp));
}
#navigation .cont {
display: flex;
align-items: center;
justify-content: flex-end;
height: calc(56 * var(--sp));
padding: calc(14 * var(--sp));
max-width: none;
gap: 0;
flex-shrink: 0;
}
#navigation .logo {
flex: none;
margin-right: auto;
}
#navigation .logo img {
width: calc(117 * var(--sp));
height: calc(29 * var(--sp));
object-fit: contain;
}
#navigation .global {
display: none;
}
#navigation .btns {
display: flex;
align-items: center;
flex: none;
gap: calc(5 * var(--sp));
}
#navigation .btns a {
display: flex;
align-items: center;
justify-content: center;
width: calc(99 * var(--sp));
height: calc(28 * var(--sp));
padding: 0;
font-size: calc(11 * var(--sp));
font-weight: 500;
letter-spacing: 0;
white-space: nowrap;
border-radius: calc(22 * var(--sp));
}
#navigation .btns .btn-line {
border: .5px solid #fff;
color: #faf9f6;
}
#navigation .btns .btn-line:hover {
background-color: rgba(255, 255, 255, .12);
}
#navigation .btns .btn-fill {
background-color: #fff;
color: #1a1a1a;
}
#navigation .btns .btn-fill:hover {
opacity: .9;
}
#navigation .nav-toggle {
display: block;
flex: none;
width: calc(25 * var(--sp));
height: calc(16 * var(--sp));
padding: 0;
margin-left: calc(12 * var(--sp));
}
#navigation .nav-toggle img {
display: block;
width: 100%;
height: 100%;
}

@media screen and (min-width: 768px) {
#navigation {
height: 61px;
min-width: 1280px;
}
#navigation .nav-drop {
display: none;
}
#navigation .cont {
height: 61px;
padding: 13px 85px;
max-width: 1280px;
gap: 32px;
}
#navigation .logo img {
width: 140px;
height: 35px;
}
#navigation .global {
display: flex;
align-items: center;
height: 100%;
gap: 32px;
margin: 0;
}
#navigation .global li a {
position: relative;
display: flex;
align-items: center;
height: 61px;
font-family: "Zalando Sans Expanded", "Oswald", sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
color: #fff;
}
#navigation .global li a:hover {
opacity: .7;
}
#navigation .global li a.active {
text-decoration: underline;
text-underline-offset: 6px;
}
#navigation .btns {
gap: 16px;
}
#navigation .btns a {
height: 24px;
}
#navigation .nav-toggle,
#navigation .nav-drop {
display: none !important;
}
}

#pageBody {
position: relative;
text-align: left;
}

/* ==========================================================================
   COMMON PARTS
   ========================================================================== */
.arrow-ico {
display: inline-flex;
flex: none;
width: calc(11 * var(--sp));
height: calc(11 * var(--sp));
}
.arrow-ico svg {
width: 100%;
height: 100%;
}

.more-link {
display: inline-flex;
align-items: center;
gap: calc(6 * var(--sp));
font-family: "Zalando Sans Expanded", "Oswald", sans-serif;
font-size: calc(14 * var(--sp));
font-weight: 400;
letter-spacing: 0;
text-decoration: none;
}
.more-link .arrow-ico {
transition: transform .3s ease;
}

#pageBody a,
#pageBody a:hover,
#pageBody a:focus {
text-decoration: none;
}

/* ==========================================================================
   CATALOG CTA
   ========================================================================== */
#CATALOG {
position: relative;
background-color: #d5d5d5;
background-image: linear-gradient(to right, #bababa 0%, #d5d5d5 48%, #e7e7e7 100%);
width: 100%;
}
#CATALOG .cont {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
min-height: 0;
padding: calc(72 * var(--sp)) 0 calc(98 * var(--sp));
background: none;
}
#CATALOG .catalog-pht {
position: relative;
z-index: 0;
flex: none;
width: calc(244 * var(--sp));
margin: 0 0 calc(40 * var(--sp));
overflow: visible;
}
#CATALOG .catalog-pht img {
display: block;
width: 100%;
height: auto;
max-width: none;
object-fit: contain;
box-shadow: calc(-10 * var(--sp)) calc(10 * var(--sp)) calc(10 * var(--sp)) rgba(0, 0, 0, 0.6);
}
#CATALOG .txt {
position: relative;
z-index: 1;
width: calc(244 * var(--sp));
max-width: none;
}
#CATALOG .txt h2 {
margin-bottom: calc(16 * var(--sp));
font-weight: 700;
font-family: 'A1 Mincho', serif;
font-size: calc(18 * var(--sp));
line-height: 1.2;
color: #000;
}
#CATALOG .txt p {
margin-bottom: calc(29 * var(--sp));
font-size: calc(14 * var(--sp));
font-weight: 300;
line-height: calc(28 * var(--sp));
color: #000;
}
#CATALOG .txt .more {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: calc(40 * var(--sp));
padding: 0 calc(20 * var(--sp));
background: #000;
color: #fff;
font-size: calc(13 * var(--sp));
font-weight: 300;
letter-spacing: .16em;
line-height: calc(40 * var(--sp));
}
#CATALOG .txt .more:hover {
background: #666;
}
#CATALOG .catalog-extra {
display: none;
}

@media screen and (min-width: 768px) {
#CATALOG .cont {
flex-direction: row;
justify-content: center;
align-items: center;
min-height: 500px;
height: 500px;
padding: 70px 0 70px 0;
gap: 150px;
}
#CATALOG .catalog-pht {
width: auto;
height: 360px;
margin: 0;
}
#CATALOG .catalog-pht img {
width: auto;
height: 100%;
}
#CATALOG .txt {
width: auto;
max-width: none;
margin: 0;
}
#CATALOG .txt h2 { margin-bottom: 16px; }
#CATALOG .txt p { margin-bottom: 19px; max-width: 336px; }
#CATALOG .txt .more {
display: inline-flex;
width: auto;
padding: 0 70px;
}
}

#PANKUZU {
position: relative;
z-index: 10;
background-color: #fff;
}
.pankuzu {
display: flex;
flex-wrap: wrap;
margin: 0 18px;
padding: 9px 0;
list-style: none;
font-family: "Times New Roman", 'A1 Mincho', sans-serif;
font-size: 14px;
color: #808080;
}
.pankuzu li::after {
content: "›";
margin: 0 .6em;
}
.pankuzu li:last-child::after {
display: none;
}
.pankuzu li a {
color: #808080;
}
.pankuzu li strong {
font-weight: normal;
}
@media (min-width: 768px) {
	.pankuzu {
    margin: 0 auto;
	padding: 25px 0;
    max-width: 1024px;
	}
}