/* Preliminarise */
@charset "utf-8";

/* Variable */

:root {
    --base_white: url(../IMAGE&VIDEO/noisy-texture-100x100-o4-d10-c-f7f2f4-t0.png);
    --base_black: #333333;
    --footer_text: #d8d8d8;
    --nav_text: #000;
    --value_color:  #c7c7c7cc;
    --nav_text_size: clamp(30px, 2.196vw, 50px);
    --glass_color: 227, 244, 255, 0.2;
    --big_text_color: hsla(0, 78%, 38%, 0.3);
    --text_color: #4c4c4c;
    --footer_color: #111;
    --glass_card_text: #e6e6e6;
    --hover_color_red: #b8414f;
    --value_color_red: #a2404b;
}

/* display when loading */

.display_fixde {
    position: fixed;
}

.loading {
    display: grid;
    place-items: center;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background: var(--base_white);
    opacity: 1;
    overflow: hidden;
    z-index: 299;
}

.loading_finish {
    opacity: 0;
    transition: all 2s 0s ease-in;
}

.loading_finish_a {
    display: none;
}

#value {
    color: var(--value_color_red);
    font-size: 18.382vw;
    font-family: serif;
    font-weight: normal;
    position: absolute;
    top: 39.063vw;
    left: 3.906vw;
    letter-spacing: -0.294vw;
}

/* Base */
html {
    overscroll-behavior: none;
    -webkit-overscroll-behavior: none;
}
}

body {
    -webkit-text-size-adjust: 100%;
    font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

#horizontal-area {
    overflow: hidden;
}

#horizontal-area::after {
    content: "";
    height: 300%;
    width: 300%;
    opacity: 0.6;
    position: fixed;
    pointer-events: none;
    top: -100%;
    left: -50%;
    z-index: 999;
    background-image: url(./IMAGE&VIDEO/noise.png);
    animation: grain 8s steps(10) infinite;
}

@keyframes grain {
    0%, 100% { transform:translate(0, 0); }
    10% { transform:translate(-5%, -10%); }
    20% { transform:translate(-15%, 5%); }
    30% { transform:translate(7%, -25%); }
    40% { transform:translate(-5%, 25%); }
    50% { transform:translate(-15%, 10%); }
    60% { transform:translate(15%, 0%); }
    70% { transform:translate(0%, 15%); }
    80% { transform:translate(3%, 35%); }
    90% { transform:translate(-10%, 10%); }
  }

/*
 header 
*/

/* Navigation button */
header {
    display: flex;
    justify-content: end;
    color: var(--nav_text);
}

button {
    width: clamp(50px, 3.66vw, 60px);
    height: clamp(50px, 3.66vw, 60px);
    margin: 30px 50px 0 0;
    z-index: 100;
    cursor: pointer;
    position: fixed;
    transform: translateZ(0);
    top: 0;
    right: 0;
}

button span {
    display: block;
    width: 7.5vw;
    height: 1px;
    border-radius: 50px;
    background: rgb(177, 175, 175);
    position: absolute;
    top: 45%;
    left: 50%;
    transition: all 0.3s 0.2s ease-out;
}

button span:nth-child(1) {
    transform: translate(-50%, 5px);
    transition:  all 0.2s 0.25s ease-out;
}

button span:nth-child(2) {
    transform: translate(-50%, -5px);
    transition:  all 0.2s 0.25s ease-out;
}

/* Navigation menu */

.nav-wraper {
    width: 33.309vw;
    height: 100vh;
    background: rgba(var(--glass_color));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transform: translate(100%);
    position: fixed;
    z-index: 50;
    top: 0;
    right: 0;
    transition: all 0.3s 0s ease-out;
    overscroll-behavior: none;
}


nav {
    font-size: var(--nav_text_size);
    line-height: clamp(36px, 2.635vw, 60px);
    font-weight: bold;
}

#navigation_link {
    width: clamp(200px, 14.202vw, 320px);
    position: fixed;
    bottom: clamp(30px, 3.66vw, 100px);
    left: clamp(30px, 3.66vw, 100px);
}

.nav-list {
    transition:  all 0.2s 0.1s ease-out;
}

nav ul:first-child {
    margin-bottom: clamp(5px, 0.65vw, 50px);
    padding-bottom: clamp(5px, 0.65vw, 50px);
    border-bottom: solid 2px var(--nav_text);
}

/* Active navigation time */

.active span:first-child {
    transform: translate(-50%, 50%) rotate(45deg);
    transition:  all 0.2s 0.25s ease-out;
}

.active span:last-child {
    transform: translate(-50%, 50%) rotate(-45deg);
    transition:  all 0.2s 0.25s ease-out;
}

.open {
    transform: translate(0);
}

/* 
Main
*/

/* Hero video */
.hero {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.hero_video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

#name {
    width: 100vw;
    height: 100%;    
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    object-fit: cover;
    opacity: 0.85;
}

/* 
Parallax
*/

.parallax {
    overflow: hidden;
}

/* About */
.parallax_about {
    position: relative;
}

#about-link {
    width: 42.899vw;
}

#about-link h1 {
    line-height: 1em;
    font-size: 11.979vw;
    color: var(--big_text_color);
    position: absolute;
    top: 0;
    left: 0;
    margin-bottom: 0.25em;
    letter-spacing: -0.882vw;
}

#about-link h2 {
    line-height: 2em;
    font-size: clamp( 30px, 2.196vw, 90px);
    letter-spacing: -0.037vw;
    font-family: yu-mincho-pr6n, sans-serif;
    font-style: normal;
    font-weight: 400;
    color: var(--text_color);
    margin-top: 50px;
}

#about-link p {
    line-height: 1.8em;
    font-size:  clamp( 13px, 2.083vh, 39px);
    font-family: yu-mincho-pr6n, sans-serif;
    font-style: normal;
    font-weight: 400;
    color: var(--text_color);
    white-space: nowrap;
}

#about-link p span {
    display: inline-block;
    letter-spacing: 0.022vw;
    margin-right: 0.732vw;
}

/* Parallax about photos */
.para_photo_lemon {
    width: 61.849vh;
    height: auto;
    position: absolute;
    bottom: 2.562vw;
    left: 38.799vw;
    z-index: 30;
}

.para_photo_sapporo {
    width: 23.06vw;
    height: auto;
    position: absolute;
    top: 13.909vw;
    left: 74.305vw;
    z-index: 10;
    opacity: 0.9;
}

/* Interest */
/* Parallax interest photos */
.parallax_interest {
    position: relative;
    padding: 2.562vw 14.641vw 2.562vw 12.811vw;
}

.para_photo_autumn {
    width: 27.818vw;
    height: auto;
    position: absolute;
    bottom: 9.883vw;
    left: 13.104vw;
    z-index: 20;
    opacity: 0.95;
}

.para_photo_starry {
    width: 74.349vh;
    height: auto;
    position: absolute;
    top: 2.562vw;
    left: 34.261vw;
    z-index: 40;
}

/* Interest text */
#interest-link {
    width: 39.312vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    margin-left: auto;
}

#interest-link h1 {
    line-height: 1em;
    /* font-size: clamp( 60px, 10.417vh, 240px); */
    font-size: 11.979vw;
    color: var(--big_text_color);
    position: absolute;
    top: 36.765vw;
    left: 28.646vw;
    margin-bottom: .5em;
    letter-spacing: -0.882vw;
}

#interest-link p {
    line-height: 1.8em;
    font-size:  clamp( 13px, 2.083vh, 39px);
    font-family: yu-mincho-pr6n, sans-serif;
    font-style: normal;
    font-weight: 400;
    color: var(--text_color);
    white-space: nowrap;
}

#interest-link p span {
    display: inline-block;
    letter-spacing: 0.022vw;
    margin-right: 0.732vw;
}

/* 
Portfolios
*/

.portfolios {
    padding: 12.006vw 18.009vw;
}

.portfolios-box {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: start;
}

.title_wraper {
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.portfolios-box h1 {
    line-height: 1em;
    font-size: 11.979vw;
    color: #be3545;
    opacity: 0.7;
    position: absolute;
    top: 50%;
    left: 0;
    letter-spacing: -0.882vw;
}

.portfolio-card {
    height: clamp( 200px, 21.962vw, 500px);
    width: clamp( 200px, 21.962vw, 500px);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    box-shadow: 5px 5px 50px rgba(0, 0, 0, 0.3);
}

.portfolio_card_wraper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}

.portfolio-card .portfolio-content {
    font-size: clamp( 20px, 1.83vw, 50px);
    color: var(--glass_card_text);
    white-space: nowrap;
    transform: translateY(150px);
    opacity: 0;
    transition:  all .2s .1s ease-out;
}

.portfolio-card .portfolio-content a {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    margin-top: 20px;
    padding: 5px 20px;
    border-radius: 50px;
    overflow: hidden;
    color: var(--base_black);
    background-color: var(--glass_card_text);
}

.kitakan {
    background-image: url(../IMAGE&VIDEO/kitakan300.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 13.324vw;
    transition:  all .2s .1s ease-out;
}

/* 
Footer
*/

footer {
    padding: 0px;
    height: 40.776vw;
    color: var(--footer_text);
}

.footer_wraper {
    position: relative;
    padding: 10.249vw 0 4.392vw 7.321vw;
}

.footer-box {
    position: absolute;
    bottom: clamp( 20px, 8vw, 50px);
    width: clamp(200px, 14.202vw, 320px);
}

.footer-box > div > img {
    margin-bottom: 3.66vw;
    border-radius: 50%;
    overflow: hidden;
}

.footer-box > div ~ div {
    font-size: var(--nav_text_size);
    line-height: clamp(36px, 2.635vw, 60px);
    font-weight: bold;
}

.footer_link_wrap {
    margin-bottom: clamp(5px, 0.65vw, 50px);
    padding-bottom: clamp(5px, 0.65vw, 50px);
    border-bottom: solid 2px var(--footer_text);
}

.footer_link_wrap ul {
    margin-bottom: 0.147vw;
}

.footer_link_wrap li {
    transition:  all .2s .25s ease-out;
}

small {
    font-size: clamp( 12px, 0.952vw, 20px);
}