@charset "utf-8";
@import url('normalize.css');

/* ####################################### */
/* Inter VariableFont */
/* ####################################### */
@font-face {
font-family: "Inter";
src: url('fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
font-display: swap;
}

/* ####################################### */
/* css変数 */
/* ####################################### */
:root {
/* main-color */
--main-color: #e6ae48;
--main-rgb: 230, 174, 72;

/* sub-color */
--sub-black: #000; /* Black */
--sub-gray: #7c7c7c; /* Gray */
--sub-white: #fff; /* White */

/* Make https://min-max-calculator.9elements.com */
/* VALUES px VIEWPORT min:320px | max:1920px */
/* Browser font: 16px */
--fs-xs: clamp(0.625rem, 0.589rem + 0.18vw, 0.75rem); /* 10 - 12 */
--fs-sm: clamp(0.75rem, 0.714rem + 0.18vw, 0.875rem); /* 12 - 14 */
--fs-base: clamp(0.875rem, 0.839rem + 0.18vw, 1rem); /* 14 - 16 */
--fs-lg: clamp(1rem, 0.964rem + 0.18vw, 1.125rem); /* 16 - 18 */
--fs-xl: clamp(1.125rem, 1.089rem + 0.18vw, 1.25rem); /* 18 - 20 */
--fs-2xl: clamp(1.375rem, 1.339rem + 0.18vw, 1.5rem); /* 22 - 24 */
--fs-3xl: clamp(1.625rem, 1.589rem + 0.18vw, 1.75rem); /* 26 - 28 */
--fs-4xl: clamp(1.875rem, 1.839rem + 0.18vw, 2rem); /* 30 - 32 */
--fs-5xl: clamp(2.125rem, 2.089rem + 0.18vw, 2.25rem); /* 34 - 36 */
--fs-6xl: clamp(2.375rem, 2.339rem + 0.18vw, 2.5rem); /* 38 - 40 */

/* Width */
--w-min: 360px;
--w-max: 1440px;
--w-normal: 1024px;
--w-narrow: 640px;
--w-960: 960px;
/* calc(--w-960 / Num); */
--w-10: 10%;
--w-20: 20%;
--w-30: 30%;
--w-40: 40%;
--w-50: 50%;
--w-60: 60%;
--w-70: 70%;
--w-80: 80%;
--w-90: 90%;
--w-100: 100%;

--w-header: var(--w-30);

/* Height */
--h-header: 120px;
--h-input: 3rem;

/* Spacer */
--spacer-100: clamp(5rem, 4.75rem + 1.25vw, 6.25rem); /* 80 - 100 */
--spacer-200: clamp(10rem, 9.5rem + 2.5vw, 12.5rem); /* 160 - 200 */

/* Radius */
--r-0: 0.125rem;
--r-1: 0.25rem;
--r-2: 0.5rem;
--r-3: 1rem;
--r-50: 50%;
--r-100: 100vh;

/* Column */
--column-num: 2;

/* Gap */
--gap-0: 0;
--gap-1: 1rem;
--gap-2: 2rem;
--gap-3: 3rem;
--gap-4: 4rem;
/* Other calc(var(--gap-1) * Num); */
}

@media screen and (width < 768px) and (orientation: portrait),
(width < 1024px) and (orientation: landscape) {
:root {
}
} /* width < 768px, 1024px */


/* ####################################### */
/* Common */
/* ####################################### */
html {
/*scroll-behavior: smooth;*/
}

body {
margin: 0;
padding: 0;
color: var(--sub-black);
background-color: var(--sub-white);
font-weight: 400;
font-size: var(--fs-base);
line-height: 1.6;
font-family: "inter", sans-serif;
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
}

figure {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}

/* Heading */
h2 {
font-size: var(--fs-4xl);
}
h3 {
font-size: var(--fs-3xl);
}
h4 {
font-size: var(--fs-2xl);
}
h5 {
font-size: var(--fs-lg);
}
h6 {
font-size: var(--fs-base);
}

/* Margin top bottom */
.mt-1 {margin-block-start: var(--gap-1);}
.mb-1 {margin-block-end: var(--gap-1);}
.mt-2 {margin-block-start: var(--gap-2);}
.mb-2 {margin-block-end: var(--gap-2);}
.mt-3 {margin-block-start: var(--gap-3);}
.mb-3 {margin-block-end: var(--gap-3);}
.mt-4 {margin-block-start: var(--gap-4);}
.mb-4 {margin-block-end: var(--gap-4);}

/* Padding top bottom */
.pt-1 {padding-block-start: var(--gap-1);}
.pb-1 {padding-block-end: var(--gap-1);}
.pt-2 {padding-block-start: var(--gap-2);}
.pb-2 {padding-block-end: var(--gap-2);}
.pt-3 {padding-block-start: var(--gap-3);}
.pb-3 {padding-block-end: var(--gap-3);}
.pt-4 {padding-block-start: var(--gap-4);}
.pb-4 {padding-block-end: var(--gap-4);}

/* ####################################### */
/* Body */
/* ####################################### */
#body-container {
display: grid;
grid-template-columns: var(--w-header) 1fr;
gap: var(--gap-0);
}
@media screen and (width < 1024px) {
#body-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: calc(var(--h-header) + var(--gap-2)) 1fr;
gap: var(--gap-0);
}
} /* width < 1024px */

/* ####################################### */
/* Header */
/* ####################################### */
#header-hiroko {
grid-column-start: 1;
grid-column-end: 2;
display: grid;
grid-template-columns: 1fr;
gap: var(--gap-1);
padding-block: var(--gap-2);
padding-inline: var(--gap-2);
width: var(--w-header);
max-height: 100dvh;
transition: background-color 0.5s ease-out;
}
.has-fixed {
position: fixed;
z-index: 10;
top: 0;
}

:where(.header-group-logo, .header-group-title, .header-group-navi,, .header-group-language) a {
color: var(--sub-black);
text-decoration: none;
}
:where(.header-group-logo, .header-group-title, .header-group-navi,, .header-group-language) a:active,
:where(.header-group-logo, .header-group-title, .header-group-navi,, .header-group-language) a:visited {
color: var(--sub-black);
}
/* Header Logo */
.header-group-logo {
width: clamp(120px, 50%, 180px);
aspect-ratio: 1;
}
.header-group-logo img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
}

/* Header Title */
.header-group-title {
display: flex;
flex-direction: column;
gap: var(--gap-2);
}
.header-group-title h1 {
margin-block: 0;
font-size: var(--fs-2xl);
font-weight: 500;
}
.header-group-title h1 span {
display: block;
font-size: var(--fs-base);
}
.header-group-title h1 + p {
margin-block: 0;
font-size: var(--fs-sm);
}

/* Header Group (Navi, Language) */
:where(.header-group-navi,, .header-group-language) ul {
padding-inline: var(--gap-1);
list-style: none;
}
.header-group-navi {
margin-block: var(--gap-2);
}

/* Header Navi Menu */
.navi-menu li {
margin-block-end: var(--gap-1);
pointer-events: auto;
}
.navi-menu li.current {
pointer-events: none;
}
.navi-menu :is(li.current a, li.current a:visited, li a:hover) {
color: var(--main-color);
}

/* NEW OFFICIAL SITE UP COMING */
.coming {
font-size: var(--fs-sm);
}

/* Header Navi SNS */
.navi-sns {
display: flex;
align-items: center;
gap: calc(var(--gap-1) * 1.5);
margin-block-start: var(--gap-3);
}
.navi-sns li {
width: 20px;
aspect-ratio: 1;
}
.navi-sns li a {
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 100%;
}
.navi-sns li a::after {
content: "";
position: absolute;
inset: -0.5rem;
}
.navi-sns li img {
vertical-align: middle;
display: block;
width: 100%;
height: auto;
}
.navi-sns li a:has(img[alt="facebook"]):hover {
filter: brightness(0) saturate(100%) invert(29%) sepia(85%) saturate(6518%) hue-rotate(214deg) brightness(108%) contrast(100%);
}
.navi-sns li a:has(img[alt="instagram"]):hover {
filter: brightness(0) saturate(100%) invert(26%) sepia(85%) saturate(3739%) hue-rotate(318deg) brightness(92%) contrast(88%);
}
.navi-sns li a:has(img[alt="youtube"]):hover {
filter: brightness(0) saturate(100%) invert(13%) sepia(91%) saturate(7498%) hue-rotate(346deg) brightness(111%) contrast(105%);
}

/* Header Navi Language */
.navi-language {
display: flex;
flex-wrap: wrap;
column-gap: calc(var(--gap-1) / 2);
row-gap: calc(var(--gap-1) / 2);
font-size: var(--fs-sm);
}
.navi-language li.current {
pointer-events: none;
}
.navi-language li a {
display: block;
width: 100%;
height: 100%;
padding-block: calc(var(--gap-1) / 4);
padding-inline: calc(var(--gap-1) / 2);
}
.navi-language :where(li:hover, li.current) a {
color: var(--sub-white);
background-color: var(--sub-gray);
}

/* Menu Open <-> Close Button */
.header-group-button {
display: none;
width: 100%;
}
.hamburger {
display: block;
position: relative;
width: 100%;
height: 100%;
margin: auto;
border: none;
background-color: transparent;
cursor: pointer;
}
.hamburger.is-open .hamburger-line {
background-color: transparent;
}
.hamburger.is-open .hamburger-line::before {
top: 0;
transform: rotate(45deg);
}
.hamburger.is-open .hamburger-line::after {
top: 0;
transform: rotate(-45deg);
}
.hamburger-line {
display: block;
height: 1px;
position: absolute;
top: auto;
left: 50%;
transform: translateX(-50%);
width: var(--w-50);
background-color: var(--sub-black);
transition: transform 0.2s linear;
}
.hamburger-line::before,
.hamburger-line::after {
content: "";
display: block;
height: 100%;
position: absolute;
width: 100%;
background-color: var(--sub-black);
transition: inherit;
}
.hamburger-line::before {
top: -12px;
}
.hamburger-line::after {
top: 12px;
}

@media screen and (width < 1024px) {
#header-hiroko {
grid-row-start: 1;
grid-row-end: 2;
grid-template-columns: var(--h-header) 1fr var(--h-header);
grid-template-rows: var(--h-header) auto 1fr;
gap: var(--gap-1);
padding-block: var(--gap-1);
padding-inline: var(--gap-1);
width: 100%;
height: 100dvh;
clip-path: inset( 0 0 calc(100% - (var(--h-header) + var(--gap-2))) 0 );
background-color: rgba(255, 255, 255, 1);
overflow: hidden;
transition: clip-path 0.3s ease-in-out;
}
#header-hiroko.is-open {
clip-path: inset( 0 0 0 0 );
overflow: auto;
}
.header-group-logo {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
width: 100%;
align-self: center;
}
.header-group-title {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
gap: var(--gap-1);
align-self: center;
}
.header-group-navi {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
pointer-events: none;
}
#header-hiroko.is-open .header-group-navi {
pointer-events: auto;
}
.header-group-language {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
pointer-events: none;
}
#header-hiroko.is-open .header-group-language {
pointer-events: auto;
}
.header-group-button {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
display: block;
justify-self: center
}
} /* width < 1024px */

@media screen and (width < 480px) {
#header-hiroko {
grid-template-columns: calc(var(--h-header) / 2) 1fr calc(var(--h-header) / 2);
}
.header-group-title h1 {
font-size: var(--fs-lg);
}
.header-group-title h1 span {
font-size: var(--fs-base);
}
.header-group-title h1 + p {
font-size: var(--fs-xs);
}
.hamburger-line {
width: var(--w-70);
}
} /* width < 480px */

/* ####################################### */
/* Contents */
/* ####################################### */
#main-container {
grid-column-start: 2;
grid-column-end: 3;
display: grid;
grid-template-rows: 1fr auto;
gap: var(--gap-0);
}
#main-container.home {
align-items: center;
height: 100dvh;
}

.content-container article {
padding-block: var(--gap-1);
padding-inline: var(--gap-2);
}
.content-container article h2 {
color: var(--main-color);
font-size: var(--fs-6xl);
font-weight: 400;
letter-spacing: calc(var(--gap-1) / 4);
}
.content-container article :where(h3, h4, h5, h6) {
margin-block-start: 0;
margin-block-end: calc(var(--gap-1) / 2);
}
.content-container .content-section:not(:first-of-type) {
margin-block-start: var(--spacer-100);
}


/* ####################################### */
/* Top */
/* ####################################### */
.main-visual {
margin: auto;
padding-block: var(--gap-1);
padding-inline: var(--gap-2);
width: 100%;
height: 90dvh;
}
.main-visual img {
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
}

@media screen and (width < 1024px) {
#main-container {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
}
#main-container.home {
height: calc(100dvh - (var(--h-header) + var(--gap-2)));
}
.main-visual {
height: calc(85dvh - (var(--h-header) + var(--gap-2)));
}
} /* width < 1024px */

@media screen and (height < 500px) and (orientation: landscape) {
#main-container.home {
height: auto;
}
.main-visual {
width: 50%;
height: auto;
}
} /* height < 500px */

/* ####################################### */
/* Biography */
/* ####################################### */
.artist-name span {
display: block;
font-size: var(--fs-base);
font-weight: 400;
}

.content-section.is-profile {
position: relative;
display: flex;
flex-direction: row-reverse;
align-items: flex-start;
gap: var(--gap-1);
}
.profile-visual {
flex-basis: 40%;
position: sticky;
top: calc(var(--h-header) + var(--gap-2));
}
.profile-text {
flex-basis: 60%;
}
.profile-visual img {
width: 100%;
}

[class^="history-"] {
display: grid;
grid-template-columns: max-content 1fr;
column-gap: calc(var(--gap-1) / 4);
row-gap: calc(var(--gap-1) / 2);
}
[class^="history-"] .is-text p {
margin-block-start: 0;
margin-block-end: var(--gap-1);
line-height: 1.4;
}

@media screen and (width < 480px) {
.content-section.is-profile {
flex-direction: column;
}
.profile-visual {
flex-basis: initial;
position: static;
top: auto;
}
.profile-text {
flex-basis: initial;
}
}

/* ####################################### */
/* Footer */
/* ####################################### */
footer {
padding: var(--gap-1);
height: max-content;
}
.copy-right {
font-size: var(--fs-xs);
text-align: center;
}

/* ####################################### */
/* GSAP */
/* ####################################### */
:where(.fade-in, .fade-in-up, .fade-in-image) {
visibility: hidden;
opacity: 0;
}

/* ####################################### */
/* Scroll to Page Top */
/* ####################################### */
.button-page-top {
position: fixed;
z-index: 1000;
right: var(--gap-2);
bottom: var(--gap-2);
display: flex;
justify-content: center;
align-items: center;
gap: 0;
width: 44px;
height: 44px;
cursor: pointer;
color: var(--sub-white);
background-color: var(--sub-gray);
}
.button-page-top:active {
background-color: var(--sub-black);
}
@media (hover: hover) {
.button-page-top:hover {
background-color: var(--sub-black);
}
}
.button-page-top > svg {
/*vertical-align: bottom;*/
fill: var(--sub-white);
width: var(--w-60);
height: var(--w-60);
}