/* @group @variables */

[class*="o-hero-root"] {
--hero-grid-columns: var(--x-padding-left) 1fr var(--x-padding-right);
--hero-grid-rows: 8.25rem 1fr 1.5rem 4.5rem 1.875rem;
--hero-color: var(--color-white);
--link-color: var(--color-white);
--link-action-color: var(--color-white-action);
--link-active-color: var(--color-white-active);
--hero-root-body-grid-row: 2;
--hero-root-media-grid-row: 1 / span 5;
--root-hero-scroll-grid-row: 4 / span 2;
}

@media all and (min-width:48em) {

[class*="o-hero-root"] {
--hero-grid-rows: 8.25rem 1fr 0 4.5rem 1.875rem;
--hero-root-body-grid-row: 2 / span 2;
}

}

/* @end @variables */

/* @group @m-hero-root */

[class*="o-hero-root"] {
display: grid;
grid-template-columns: var(--hero-grid-columns);
grid-template-rows: var(--hero-grid-rows);
}

[class*="m-hero-root-body"] {
grid-column: 2;
grid-row: var(--hero-root-body-grid-row);
}

[class*="a-hero-root-media"] {
grid-column: 1 / 4;
grid-row: var(--hero-root-media-grid-row);
}

[class*="a-root-hero-scroll"] {
grid-column: 2;
grid-row: var(--root-hero-scroll-grid-row);
}

/* @end @a-hero-root-media */

/* @group @variables */

@media all and (max-width:47.9375em) {

[class*="o-hero-root"] {
--hero-min-height: 100vh;
}

@supports (height: 100dvh) {

[class*="o-hero-root"] {
--hero-min-height: 100dvh;
}

}

}

@media all and (min-width:48em) {

[class*="o-hero-root"] {
--hero-min-height: 100vh;
}

@supports (height: 100dvh) {

[class*="o-hero-root"] {
--hero-min-height: 100dvh;
}

}

}

/*@media all and (min-width:48em) and (max-height:41.9375em) {

[class*="o-hero-root"] {
--hero-height: auto;
}

}*/

/* @end @variables */

/* @group @m-hero-root */

[class*="o-hero-root"] {
position: relative;
z-index: 1;
overflow: hidden;
height: var(--hero-height);
min-height: var(--hero-min-height);
color: var(--hero-color);
text-align: var(--hero-text-align);
}

/* @end @a-hero-root-media */

/* --------------------------------------------------------*/

/* @group @variables */

[class*="a-root-hero-scroll"] {
/*--grid-template-columns: 1px .375rem 1.125rem 1fr;
--hero-scroll-before--grid-column: 1;
--hero-link-scroll-grid-column: 3;*/
--grid-template-columns: 1fr 1px .375rem 1.125rem;
--hero-scroll-before-grid-column: 2;
--hero-link-scroll-grid-column: 4;
}

@media all and (min-width:48em) {

[class*="a-root-hero-scroll"] {
}

}

/* @end @variables */

/* @group @a-root-hero-scroll */

[class*="a-root-hero-scroll"] {
position: relative;
z-index: 2;
display: grid;
align-items: center;
grid-template-columns: var(--grid-template-columns);
grid-template-rows: .75rem auto 1fr;
}

[class*="a-root-hero-scroll"]:before {
grid-column: var(--hero-scroll-before-grid-column);
grid-row: 1 / span 3;
}

[class*="a-root-hero-link-scroll"] {
grid-column: var(--hero-link-scroll-grid-column);
grid-row: 2;
}

[class*="a-root-hero-scroll"]:before {
content: '';
display: block;
width: 1px;
height: 100%;
background-color: var(--color-white);
animation: scrollLine 2s infinite;
animation-play-state: running;
}

[class*="is-fit-sticy"] [class*="a-root-hero-scroll"]:before {
animation-play-state: paused;
}

[class*="a-root-hero-link-scroll"] {
font-size: .625rem;
line-height: 1.2;
text-transform: uppercase;
writing-mode: vertical-rl;
}

/* @end @a-root-hero-scroll */

/* --------------------------------------------------------*/

/* @group @variables */

[class*="m-hero-root-body"] {
--gap: .375rem;
--head-2-overflow: hidden;
--head-2-font-size: 1.25rem;
--head-2-line-height: 1.5;
--head-2-font-weight: 400;
--head-2-font-variation-settings: "wght" 400;
--head-2-color: var(--color-white);
--head-2-text-transform: uppercase;
--head-2-word-break: keep-all;
--head-2-overflow-wrap: break-word;
}

[class*="m-hero-root-body"] {
--head-2-font-family: NotoSerifCJKjp-Regular, serif;
--head-2-font-family: sans-serif;
--head-2-font-weight: 100;
--head-2-font-variation-settings: "wght" 100;
}

@media (orientation:portrait) { /* デバイスが縦向きの場合の記述 */

[class*="m-hero-root-body"] {
--gap: .75rem;
--head-2-font-size: 1.25rem;
--head-2-line-height: 1.5;
--writing-mode: vertical-rl;
}

@media all and (min-width:24em) {

[class*="m-hero-root-body"] {
--gap: .75rem;
--head-2-font-size: 1.5rem;
}

}

}

@media all and (min-width:48em) {

[class*="m-hero-root-body"] {
--gap: .75rem;
--head-2-font-size: 1.75rem;
--head-2-line-height: 1.5;
--writing-mode: vertical-rl;
}

}

/* @end @variables */

/* @group @m-hero-root-body */

[class*="m-hero-root-body"] {
position: relative;
z-index: 3;
align-content: center;
display: grid;
grid-auto-flow: row;
gap: var(--gap);
margin-right: auto;
writing-mode: var(--writing-mode);
}

[class*="m-hero-root-body"] h2,
[class*="m-hero-root-body"] h3,
[class*="m-hero-root-body"] p {
margin-right: 0;
margin-left: 0;
}

/* @end @m-hero-root-body */

/* --------------------------------------------------------*/

/* @group @variables */

[class*="m-hero-root-body"] em {
--hero-copy-font-size: clamp(3rem, 5.25vw, 4.5rem);
}

@media all and (min-width:48em) {

[class*="m-hero-root-body"] em {
--hero-copy-font-size: 4.5rem;
}

}

/* @end @variables */

/* @group @m-hero-root-body */

[class*="m-hero-root-body"] em {
font-family: 'Belleza', sans-serif;
font-size: var(--hero-copy-font-size);
font-weight: 300;
font-variation-settings: "wght" 300;
}

/* @end @m-hero-root-body */

/* --------------------------------------------------------*/

/* @group @a-hero-logo-image */

[class*="a-hero-logo-image"] {
width: 15rem;
filter: brightness(0) invert(1);
fill: hsla(0, 0%, 100%, 1);
transition: var(--transition-type) var(--transition-time) var(--transition-delay) cubic-bezier(var(--transition-cubic-bezier));
}

/* @end @a-hero-logo-image */

/* --------------------------------------------------------*/

/* @group @a-hero-root-media */

[class*="a-hero-root-media"] {
position: absolute;
inset: 0;
/*top: 0;
right: 0;
bottom: 0;
left: 0;*/
display: grid;
object-fit: cover;
object-position: bottom right;
}

[class*="a-hero-root-media"] img {
position: absolute;
display: block;
width: 110%;
height: 110%;
object-fit: cover;
object-position: center bottom;
filter: brightness(.75);
pointer-events: none;
}

/* @end @a-hero-root-media */