@charset "UTF-8";
/* --------------------
setting
-------------------- */
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Parisienne&family=Zen+Old+Mincho&display=swap');

:root {
--c-key: #572d38;
--swiper-pagination-color: #000;
--swiper-pagination-bullet-horizontal-gap: 15px;
}

* {
font-family: "Zen Old Mincho", serif;
font-weight: 500;
font-style: normal;
font-feature-settings: "palt";
}

#content {
position: relative;
}

picture img {
width: 100%;
height: auto;
object-fit: cover;
}


/* --------------------
Logo
-------------------- */
.logo {
position: fixed;
z-index: 2;
top: 1.25rem;
left: 1.25rem;

& svg {
width: 25vw;
height: auto;
opacity: 0;
transition: color 0.3s ease, opacity 0.3s ease;

&.overlapped {
opacity: 1;
color: var(--c-key);
}
}
}

@media screen and (min-width: 768px) {
.logo {
top: 2.9375rem;
left: 2.4375rem;

& svg {
width: 9.875rem;
height: 3.62625rem;
opacity: 1;
color: white;

&.overlapped {
color: var(--c-key);
}
}
}
}

/* --------------------
Section
-------------------- */

.section {
display: grid;
place-items: flex-start;
position: sticky;
top: 0;

&:nth-child(odd) {
background-color: #F5F5F4;
}

&:nth-child(even) {
background-color: #fff;
}

/* player 用の高さ調整 */
&:first-child {
height: fit-content;
}

&:not(:first-child):not(.section--product) {
min-height: 100svh;
height: 100lvh;
}

/* 段落下部スペース調整 */
&:not(:first-child):not(.section--product):not(.section--banner) {
padding-bottom: 5.875rem;
}
}

.section__inner {
display: grid;
grid-template-areas: "swiper" "header" "paragraph";
width: 100%;
margin: 0 auto;
padding: 0;
}

.section__header {
grid-area: header;
margin-bottom: 1.875rem;
padding: 0 6%;
}

.section.section--product {
position: sticky;
height: fit-content;
top: auto;

.section__inner {
padding: 6.25rem 6%;
}
}

.section.section--banner {
place-items: center;
}

/* 375px以下の場合、stickyを解除 */
@media screen and (width < 376px) {
.section {
position: relative;

&.section--product {
position: relative;
}

&:not(:first-child):not(.section--product) {
height: fit-content;
}
}
}

@media screen and (min-width: 768px) {
.section {
place-items: center;

&:not(:first-child):not(.section--product):not(.section--banner) {
padding-bottom: 0;
}
}

.section__inner {
grid-template-areas: "header" "swiper" "paragraph";
}

.section__header {
margin-bottom: 1.5rem;
}

.section.section--product {
position: sticky;
top: 0;

.section__inner {
padding: 8.125rem 6%;
}
}
}

/* --------------------
Heading
-------------------- */
.heading {
font-weight: 600;
font-style: normal;
word-break: keep-all;
overflow-wrap: anywhere;
}

.heading__en {
display: inline;
letter-spacing: .1em;
}

.heading__justify {
display: inline-block;
width: 100%;
max-width: calc(11 * 1.2em);
text-align: justify;
letter-spacing: .2em;
}

.heading__brackets--left {
margin-left: -.5em;
}

.heading__brackets--right {
margin-right: -.5em;
}

.heading.heading--lv1 {
padding-top: 5.625rem;
font-size: 26px;
line-height: 1.75;
}

.heading.heading--lv2 {
text-align: center;
font-size: 20px;
line-height: 2;

.heading__en {
display: block;
font-size: 14px;
}

.heading__brackets--left {
margin-left: -.25em;
}
}

@media screen and (min-width: 768px) {
.heading {
text-align: center;
}

.heading__justify {
display: inline;
width: auto;
max-width: initial;
letter-spacing: .1em;
}

.heading.heading--lv1 {
padding-top: 0;
font-size: 33px;
line-height: 1.8;

.heading__en {
letter-spacing: .05em;
}
}

.heading.heading--lv2 {
font-size: 24px;

.heading__en {
display: inline;
font-size: inherit;
}
}
}

/* --------------------
Subheading
-------------------- */
.subheading {
text-align: center;
font-size: 14px;
line-height: 2.64;
letter-spacing: .1em;
}

@media screen and (min-width: 768px) {
.subheading {
font-size: 24px;
line-height: 1.75;
}
}

/* --------------------
Paragraph
-------------------- */
.paragraph__wrapper {
grid-area: paragraph;
padding: 0 6%;
}

.paragraph {
display: inline;
font-size: 14px;
line-height: 2;

&.paragraph--lead {
display: block;
word-break: keep-all;
overflow-wrap: anywhere;
text-wrap: balance;
}
}

.paragraph + .paragraph {
margin-top: 0rem;
}

@media screen and (min-width: 768px) {
.paragraph {
display: block;
text-align: center;
line-height: 1.85;
letter-spacing: .05em;

&.paragraph--lead {
font-size: 16px;
line-height: 2.5;
}
}

.paragraph + .paragraph:not(.paragraph--lead) {
margin-top: 1.3125rem;
}
}

/* --------------------
Swiper
-------------------- */
.swiper {
grid-area: swiper;
width: 100%;
height: fit-content;

& picture {
aspect-ratio: 20 / 11;
}
}

.swiper-wrapper {
aspect-ratio: 16 / 9;
}

.swiper-pagination {
position: relative !important;
display: flex;
align-items: center;
justify-content: center;
margin-block: 2.9375rem;
line-height: 0;
}

.swiper-pagination-bullet {
position: relative;

&:not(.swiper-pagination-bullet-active) {
width: 6px !important;
height: 6px !important;
border: 1px solid #000;
background-color: transparent !important;
opacity: 1 !important;
}

&:not(.swiper-pagination-bullet-active) svg {
display: none;
}
}

.swiper-pagination-bullet-active svg {
--progress: 0;
position: absolute;
width: 250%;
height: 250%;
left: -75%;
top: -75%;
stroke-width: 2px;
stroke: var(--swiper-pagination-color);
fill: none;
stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
stroke-dasharray: 125.6;
z-index: 10;
transform: rotate(-90deg);
}

@media screen and (min-width: 768px) {
.swiper {
max-width: 29.75rem;
}
.swiper-pagination {
margin-block: 2.625rem;
}
}

/* --------------------
Product
-------------------- */
.product__wrapper {
display: grid;
grid-template-columns: 1fr;
gap: 4.375rem;
}

.product {
position: relative;
display: grid;
grid-template-rows: auto 1fr auto;
width: 100%;
text-align: center;

& picture {
width: 100%;
aspect-ratio: 329 / 409;
}
}

.product__title {
margin-top: 2.25rem;
font-size: 15px;
line-height: 1.75;
}

.product__link {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
border: 1px solid #000;
margin-top: 1.4375rem;
padding: 1.3125rem 0.91875rem;
text-align: center;
font-size: 16px;
letter-spacing: .3em;
color: #fff;
background-color: #000;
cursor: pointer;
transition: color 0.3s ease, background-color 0.3s ease;

&:hover {
background-color: #fff;
color: #000;
}

/* 右向きのchevron */
&::after {
content: '';
position: absolute;
display: inline-block;
width: 0.6875rem;
height: 0.6875rem;
top: 50%;
right: 0.9375rem;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: translateY(-50%) rotate(45deg);
transition: border-color 0.3s ease;
}

&:hover::after {
border-top: 2px solid #000;
border-right: 2px solid #000;
}
}

@media screen and (min-width: 768px) {
.product__wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.9375rem;
}

.product {
& picture {
width: 100%;
aspect-ratio: 329 / 409;
}
}

.product__title {
margin-top: 1.875rem;
}

.product__link {
max-width: 11.125rem;
margin-top: 1.5rem;
margin-inline: auto;
padding: 0.4375rem 0.875rem 0.5625rem;
font-size: 14px;
letter-spacing: .1em;

&::after {
right: 0.875rem;
}
}
}

@media screen and (min-width: 960px) {
.product__wrapper {
grid-template-columns: repeat(4, 1fr);
}
}

/* --------------------
Banner
-------------------- */
.banner__wrapper {
display: flex;
flex-direction: column;
gap: 6rem;
}

.banner {
position: relative;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
place-items: center;
gap: 1.375rem;
width: 100%;
}

.banner__image {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;

picture {
width: 100%;

&.brandlogo {
width: 6.375rem;
}
}
}

.banner__link {
font-size: 15px;
letter-spacing: .05em;
text-decoration: underline;
}

@media screen and (min-width: 768px) {
.banner__wrapper {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr 1fr;
gap: 0;
}

.banner {
gap: 3rem;
}

.banner__image {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;

picture.brandlogo {
width: 9.5625rem;
}
}

.banner__link {
font-size: 20px;
}
}


/* --------------------
Utilities
-------------------- */

.dash {
letter-spacing: -.1em;
white-space: nowrap;
}

.mt-l {
margin-top: 2.1875rem;
}

.pc {
display: none;
}

.sp {
display: initial;
}

@media screen and (min-width: 768px) {
.mt-l {
margin-top: 3.875rem;
}

.pc {
display: initial;
}

.sp {
display: none;
}
}

/* --------------------
Player
-------------------- */
.player__wrapper {
position: relative;
width: 100%;
height: fit-content;
aspect-ratio: 16 / 9;
overflow: hidden;

& iframe {
width: 100%;
height: 100%;
aspect-ratio: 16 / 9;
margin-left: 0;
}
}

.player__mask {
position: absolute;
width: 100%;
height: auto;
left: 0;
top: 0;
aspect-ratio: 16 / 9;
z-index: 1;
}

@media screen and (min-width: 768px) {
.player__wrapper {
height: 100%;

& iframe {
position: absolute;
width: auto;
min-width: 100%;
height: auto;
object-fit: cover;
}
}

.player__mask {
width: 100%;
height: 100%;
aspect-ratio: none;
}
}

/* --------------------
footer
-------------------- */
.footer {
padding: 16vw 0;
background-color: #000;
font-family: "Lato", sans-serif;
font-weight: 300;
letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
.footer {
padding: 3.90625vw 0;
}
}
.footer img {
width: 100%;
height: auto;
}
.footer__logo {
width: 34.6666666667vw;
margin: 0 auto 4.2666666667vw;
}
@media screen and (min-width: 768px) {
.footer__logo {
width: 10.15625vw;
margin: 0 auto 1.25vw;
}
}
.footer__logo a {
display: block;
width: 34.6666666667vw;
}
@media screen and (min-width: 768px) {
.footer__logo a {
width: 10.15625vw;
transition: all 0.5s ease;
}
}
@media screen and (min-width: 768px) {
.footer__logo a:hover {
opacity: 0.5;
}
}
.footer__copyright {
text-align: center;
color: #fff;
font-size: 2.9333333333vw;
}
@media screen and (min-width: 768px) {
.footer__copyright {
font-size: 11px;
}
}
/*# sourceMappingURL=style.css.map */