@charset "utf-8";

/*-------------------------------------------------
   Breakpoints
   - Mobile portrait           : (default)
   - Mobile landscape          : ～h500px
   - Tablet portrait           : w768px～
   - Tablet landscape & Desktop: w1024px～
-------------------------------------------------*/


/**************************************************
   Variable
**************************************************/
/* --- 変数は全ページ分を下記で一括管理 --- */
:root {
    /* --- Z-index --- */
    --z-loading         : 6000;        /* ローディング */
    --z-cursor          : 5000;         /* 追尾カーソル */
    --z-header          : 4000;         /* ヘッダー */
    --z-header-menu-btn : 200;          /* ヘッダー内メニューボタン */
    --z-header-nav      : 100;          /* ヘッダー内ナビ */
    --z-mask            : 3000;         /* メニュー開時の背景マスク */
    --z-pagetop         : 2000;         /* ページトップに戻るボタン */
    --z-footer          : 1000;         /* フッター */
    --z-main            : 1;            /* メイン */
    --z-front-content   : 2;            /* メイン内の前面に表示するコンテンツ */
    --z-back-content    : -1;           /* メイン内の背面に表示するコンテンツ */

    /* --- Colors --- */
    /* - base - */
    --clr-bg-page    : #e6ecec;         /* Gray  : サイト全体の背景 */
    --clr-bg-card    : #faffff;         /* White : カードの背景・メニュー等の文字色 */
    --clr-text       : #1c1c1c;         /* Black : メインの文字色 */
    /* - accent & states - */
    --clr-primary    : #558890;         /* Green : メニュー背景・タグ文字・差し色 */
    --clr-active     : #1e2a3a;         /* Blue  : ホバー・アクティブ背景 */
    --clr-bg-contact : linear-gradient(180deg, #e6ecec 0%, #92b1b6 100%);     /* Gradient : コンタクトセクションの背景色 */

    /* --- Font family --- */
    /* - common - */
    --fnt-base   : dnp-shuei-gothic-gin-std, Montserrat, Corbel, source-sans-pro, sans-serif;
    --fnt-accent : futura-pt, dnp-shuei-gothic-gin-std, sans-serif;
    /* - top (loading) - */
    --fnt-countup : "inter-variable",sans-serif;

    /* --- Spacing / Margin / Padding --- */
    --spc-2xs : 0.4rem;         /* 4px */
    --spc-xs  : 0.8rem;         /* 8px */
    --spc-s   : 1.6rem;         /* 16px */
    --spc-m   : 2.4rem;         /* 24px */
    --spc-l   : 4.8rem;         /* 48px */
    --spc-xl  : 7.2rem;         /* 72px */
    --spc-2xl : 12.0rem;        /* 120px */
}


/**************************************************
   Keyframes
**************************************************/
/* --- Contact section 内の横流れループ文字 --- */
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }           /* 50%まで動かしてループ */
}


/**************************************************
   Selector
**************************************************/
html {
    inline-size: 100%;
    font-size: 62.5%;               /* 1rem = 16px * 62.5% = 10px */
    scroll-behavior: smooth;        /* ページ内リンクをクリックした時、スクロールを滑らかにする */
}

*, *::before, *::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.l-body {
    margin-inline: auto;
    background-color: var(--clr-bg-page);
    color: var(--clr-text);
    font-family: var(--fnt-base);
    font-size: 1.2rem;
    line-height: 2;
    letter-spacing: 0.15em;
}

img {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
    object-fit: cover;
}

ul {
    list-style: none;
}

a {
    display: inline-block;
    text-decoration: none;
    color: inherit;                     /* リンクテキストの色をリセット */
}

button {
    appearance: none;                   /* ブラウザ独自のスタイルをリセット */
    background-color: transparent;
    border: none;
    cursor: pointer;
}

span {
    display: inline-block;
}


/**************************************************
   Header
**************************************************/
.l-header {
    position: fixed;
    inset-inline: 0;
    inset-block-start: 0;
    z-index: var(--z-header);
}

.l-header__logo {
    position: absolute;
    inset-inline-start: var(--spc-m);
    inset-block-start: var(--spc-m);
    margin: 0;
    line-height: 1;
}

.l-header__logo-link {
    font-family: var(--fnt-accent);
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.l-header__nav {
    position: fixed;
    inset-inline: 0;
    inset-block-start: -100dvh;
    inline-size: 100%;
    block-size: 100dvh;
    padding-block: var(--spc-2xl);
    background-color: var(--clr-primary);
    z-index: var(--z-header-nav);
    visibility: hidden;
    transition:
        inset-block-start 0.3s ease-in-out,
        visibility 0.3s;
}

/* - Active - */
.l-header__nav.is-active {
    inset-block-start: 0;
    visibility: visible;
}

.l-header__item {
    border-block-start: 1px dotted var(--clr-bg-card);
}

.l-header__item:last-child {
    border-block-end: 1px dotted var(--clr-bg-card);
}

.l-header__menu-link {
    display: block;
    padding-inline: var(--spc-xl);
    padding-block: var(--spc-m);
    font-family: var(--fnt-accent);
    font-size: 2.4rem;
    letter-spacing: 0.2em;
    color: var(--clr-bg-card);
    text-transform: capitalize;
}

/* - Active - */
.l-header__menu-link.is-active {
    background-color: var(--clr-active);
}

.l-header__menu-btn {
    position: absolute;
    inset-inline-end: var(--spc-m);
    inset-block-start: calc(var(--spc-m) + 5px);
    z-index: var(--z-header-menu-btn);
}


/**************************************************
   Main
**************************************************/
.l-main {
    z-index: var(--z-main);
}

.l-section {
    padding-block: var(--spc-2xl);
    border-block-start: 8px dotted var(--clr-primary);
}

.l-section:first-child {
    border-block-start: none;
}

.l-section__title {
    position: relative;
    padding-block-end: var(--spc-xs);
    margin-block-end: var(--spc-xl);
    font-family: var(--fnt-accent);
    font-weight: 700;
    font-size: 3.2rem;
    letter-spacing: 0.15em;
    line-height: 1;
    text-align: center;
    text-transform: capitalize;
}

.l-section__title::after {
    content: "";
    position: absolute;
    inset-inline-start: 50%;
    inset-block-end: 0;
    inline-size: 0;
    block-size: 0.5px;
    background-color: var(--clr-primary);
    transform: translateX(-50%);
    transition: inline-size 0.6s cubic-bezier(0.33, 1, 0.68, 1) 0.6s;
}

.l-section__title.is-show::after {
    inline-size: 85%;
}

.l-section__lead {
    inline-size: 85%;
    padding-inline: var(--spc-m);
    margin-inline: auto;
    margin-block-end: var(--spc-xl);
    text-align: justify;            /* 両端揃え */
    text-justify: inter-character;  /* 日本語の調整を最適化 */
    word-break: break-all;          /* 単語の途中で変な改行が起きないようにする */
}

.l-section__container {
    inline-size: 85%;
    margin-inline: auto;
}


/**************************************************
   Contact section
**************************************************/
.p-contact {
    block-size: 400vh;              /* スクロールの遊びを確保 */
    padding-block: 0;
    border-block-start: none;
}

.p-contact__sticky-bg {
    position: sticky;               /* 背景色が画面全体に表示されたら固定 */
    inset: 0;
    block-size: 100vh;
    background: var(--clr-bg-contact);
}

.p-contact__marquee {
    position: sticky;
    inset-block-start: calc(50vh - 30vh - 80px);        /* 画面中央（画面の半分 50vh - 要素の高さの半分 30vh) - ずらし 80px */
    display: flex;
    white-space: nowrap;
    overflow: hidden;
}

.p-contact__marquee-text {
    padding-inline-end: 20px;
    font-size: 2.4rem;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);        /* 薄い白（透かす） */
    animation: marquee 10s linear infinite;
}

.p-contact__img {
    display: block;
    position: sticky;
    block-size: 60vh;
    margin-inline: auto;
    margin-block-end: -20px;
    border: 1px solid var(--clr-bg-card);
    border-radius: 8px;
}

.p-contact__img:nth-of-type(1) {
    inset-block-start: calc(50vh - 30vh - 30px);        /* 画面中央（画面の半分 50vh - 要素の高さの半分 30vh) - ずらし 30px */
    inline-size: 70%;
    z-index: var(--z-front-content);
}

.p-contact__img:nth-of-type(2) {
    inset-block-start: calc(50vh - 30vh - 20px);        /* 画面中央（画面の半分 50vh - 要素の高さの半分 30vh) - ずらし 20px */
    inline-size: 75%;
    z-index: calc(var(--z-front-content) + 1);
}

.p-contact__img:nth-of-type(3) {
    inset-block-start: calc(50vh - 30vh - 10px);        /* 画面中央（画面の半分 50vh - 要素の高さの半分 30vh) - ずらし 10px */
    inline-size: 80%;
    z-index: calc(var(--z-front-content) + 2);
}

.p-contact__container {
    position: sticky;
    inset-block-start: calc(50vh - 30vh);               /* 画面中央（画面の半分 50vh - 要素の高さの半分 30vh) */
    inline-size: 85%;
    block-size: 60vh;
    margin-inline: auto;
    margin-block-end: -20px;
    z-index: calc(var(--z-front-content) + 3);
}

.p-contact__content {
    block-size: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--clr-bg-card);
    border-radius: 8px;
    text-align: center;
    filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.5));
}

.p-contact__title {
    inline-size: 80%;
    margin-inline: auto;
    margin-block-end: var(--spc-l);
}

.p-contact__text {
    margin-block-end: var(--spc-m);
}


/**************************************************
   Footer
**************************************************/
.l-footer {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-footer);
}

.l-footer__github {
    position: absolute;
    inset-inline-start: var(--spc-m);
    inset-block-end: var(--spc-m);
}

.l-footer__github-link {
    font-size: 1.0rem;
    letter-spacing: 0.2em;
    color: var(--clr-text);
}

.l-footer__github-link::after {
    content: ">";
    padding-inline-start: var(--spc-xs);
}

.l-footer__copy {
    position: absolute;
    inset-inline-end: var(--spc-m);
    inset-block-end: var(--spc-m);
    font-size: 1.0rem;
    letter-spacing: 0.2em;
    color: var(--clr-text);
}


/**************************************************
   Pagetop
**************************************************/
.l-pagetop {
    position: fixed;
    inset-block-end: var(--spc-l);
    inset-inline-end: 0;
    z-index: var(--z-pagetop);
}


/**************************************************
   Mask
**************************************************/
.l-mask {
    display: none;
}


/**************************************************
   Utility
**************************************************/
/* --- アクセシビリティ対応用（視覚的には消しつつ、情報は残す） --- */
.u-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- スマホ専用の改行 --- */
.u-br--sp {
    display: block;
    content: "";
}

/* --- Scroll Animation --- */
/* --- Text >> fade up (js-scrollやu-delayとセットで付与） --- */
.u-fade-up {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition:
        opacity 0.6s cubic-bezier(0.33, 1, 0.68, 1),
        transform 0.6s cubic-bezier(0.33, 1, 0.68, 1),
        visibility 0.6s;
}

/* - Show - */
.u-fade-up.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* --- Image >> fade scale (js-scrollやu-delayとセットで付与） --- */
.u-fade-scale {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9);
    transition:
        opacity 0.6s cubic-bezier(0.33, 1, 0.68, 1),
        transform 0.6s cubic-bezier(0.33, 1, 0.68, 1),
        visibility 0.6s;
}

/* - Show - */
.u-fade-scale.is-show {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* --- delay --- */
.u-delay-300  { transition-delay: 0.3s; }
.u-delay-600  { transition-delay: 0.6s; }


/**************************************************
   Media queries
**************************************************/
/* --- Tablet portrait --- */
@media screen and (min-width: 768px) and (orientation: portrait) {
   
    .l-header__nav {
        padding-block: 10vh;
    }

    .l-header__menu {
        padding-block: 10vh;
    }

    .l-header__menu-link {
        padding-block: 0;
        padding-inline: var(--spc-2xl);
        block-size: 15vh;
        line-height: 15vh;
        font-size: 3.2rem;
    }

    .p-contact {
        block-size: 300vh;              /* スクロールの遊びを確保 */
        padding-block: 0;
        border-block-start: none;
    }

    .p-contact__marquee {
        inset-block-start: calc(50vh - 25vh - 150px);
    }

    .p-contact__marquee-text {
        font-size: 4.8rem;
    }

    .p-contact__img {
        block-size: 40vh;
    }

    .p-contact__img:nth-of-type(1) {
        inset-block-start: calc(50vh - 20vh - 60px);
        inline-size: 45%;
    }

    .p-contact__img:nth-of-type(2) {
        inset-block-start: calc(50vh - 20vh - 40px);
        inline-size: 50%;
    }

    .p-contact__img:nth-of-type(3) {
        inset-block-start: calc(50vh - 20vh - 20px);
        inline-size: 55%;
    }

    .p-contact__container {
        inset-block-start: calc(50vh - 20vh);
        inline-size: 60%;
        block-size: 40vh;
    }

    .p-contact__content {
        block-size: 40vh;
    }

    .p-contact__title {
        margin-block-end: var(--spc-xl);
    }

    .p-contact__text {
        margin-block-end: var(--spc-l);
    }
    
    .u-br--sp {
        display: none;
    }
}


/* --- Tablet landscape & Desktop --- */
@media screen and (min-width: 1024px) {
    
    .l-body {
        font-size: 1.4rem;
    }

    .l-header__nav {
        inset-inline-start: unset;
        inset-inline-end: -240px;
        inset-block-start: 0;
        inline-size: 240px;
        block-size: auto;
        padding-block-start: var(--spc-xl);
        padding-block-end: var(--spc-m);
        border-radius: 16px 0 0 16px;
        transition:
            inset-inline-end 0.3s ease-in-out,
            visibility 0.3s;
    }

    /* --- Active --- */
    .l-header__nav.is-active {
        inset-inline-end: 0;
    }

    .l-header__menu {
        padding-block-end: var(--spc-m);
    }

    .l-header__menu-link {
        padding-inline: var(--spc-l);
        padding-block: var(--spc-s);
        font-size: 2.0rem;
    }

    .l-header__item {
        border: none;
    }

    .l-header__item:last-child {
        border-block-end: none;
    }

    .l-header__menu-link:hover {
        background-color: var(--clr-active);
        transition: background-color 0.6s ease;
    }

    .l-section__title {
        font-size: 4.8rem;
        padding-block-end: var(--spc-s);
    }
    
    .l-section__title.is-show::after {
        max-inline-size: 1024px;
        margin-inline: auto;
    }
    
    .l-section__lead {
        inline-size: 60%;
        max-inline-size: 1024px;
        margin-inline: auto;
        padding-inline: 0;
    }

    .l-section__container {
        inline-size: 90%;
        max-inline-size: 1024px;
        margin-inline: auto;
        padding-inline: 0;
    }

    .p-contact {
        block-size: 400vh;
    }

    .p-contact__marquee {
        inset-block-start: calc(50vh - 30vh - 140px);
    }

    .p-contact__marquee-text {
        font-size: 4.0rem;
    }

    .p-contact__img {
        block-size: 60vh;
    }

    .p-contact__img:nth-of-type(1) {
        inset-block-start: calc(50vh - 30vh - 60px);
        inline-size: 40%;
        max-inline-size: 620px;
    }

    .p-contact__img:nth-of-type(2) {
        inset-block-start: calc(50vh - 30vh - 40px);
        inline-size: 45%;
        max-inline-size: 640px;
    }

    .p-contact__img:nth-of-type(3) {
        inset-block-start: calc(50vh - 30vh - 20px);
        inline-size: 50%;
        max-inline-size: 660px;
    }

    .p-contact__container {
        inset-block-start: calc(50vh - 30vh);
        inline-size: 55%;
        max-inline-size: 700px;
        block-size: 60vh;
    }

    .p-contact__content {
        block-size: 60vh;
    }

    .p-contact__title {
        margin-block-end: var(--spc-l);
    }

    .l-footer__github-link:hover {
        text-decoration: underline;
        text-underline-offset: 0.5em;
        text-decoration-thickness: 0.5px;
        text-decoration-color: var(--clr-primary);
    }

    .l-mask {
        display: block;
        position: fixed;
        inset: 0;
        background-color: var(--clr-text);
        z-index: var(--z-mask);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    /* --- Active --- */
    .l-mask.is-active {
        opacity: 0.8;
        visibility: visible;
    }

    .u-br--sp {
        display: none;
    }
}


/* --- Mobile landscape --- */
@media screen and (max-height: 500px) and (orientation: landscape) {

    .l-header__nav {
        padding-block: 10vh;
    }

    .l-header__menu {
        padding-block: 6vh;
    }

    .l-header__menu-link {
        padding-block: 0;
        block-size: 17vh;
        line-height: 17vh;
    }

    .l-section {
        padding-block: var(--spc-xl);
    }

    .l-section__lead {
        padding-inline: var(--spc-2xl);
    }

    .l-section__container {
        padding-inline: var(--spc-2xl);
    }

    .p-contact {
        padding-block: 0;
    }

    .p-contact__marquee {
        inset-block-start: calc(50vh - 32.5vh - 80px);
    }

    .p-contact__img {
        block-size: 65vh;
    }

    .p-contact__img:nth-of-type(1) {
        inset-block-start: calc(50vh - 32.5vh - 60px);
        inline-size: 45%;
    }

    .p-contact__img:nth-of-type(2) {
        inset-block-start: calc(50vh - 32.5vh - 40px);
        inline-size: 50%;
    }

    .p-contact__img:nth-of-type(3) {
        inset-block-start: calc(50vh - 32.5vh - 20px);
        inline-size: 55%;
    }

    .p-contact__container {
        inset-block-start: calc(50vh - 32.5vh);
        inline-size: 60%;
        block-size: 65vh;
    }

    .p-contact__content {
        block-size: 65vh;
    }

    .p-contact__title {
        margin-block-end: var(--spc-m);
    }

    .p-contact__text {
        margin-block-end: var(--spc-s);
    }

    .u-br--sp {
        display: none;
    }
}