@charset "UTF-8";

/* ============================================
   CSS Variables (Custom Properties)
   ============================================ */
:root {
    /* Font Families */
    --font-sans-jp: "IBM Plex Sans JP", sans-serif;
    --font-serif-en: "Nuosu SIL", serif;
    --font-mincho: "Shippori Mincho", serif;
    --font-konshoku: "Konshoku";

    /* Font Sizes */
    --text-1: 10px;
    --text-2: 10px;
    --text-3: 13px;
    --text-4: 14px;
    --text-5: 16px;
    --text-6: 24px;
    --text-7: 36px;

    /* Line Heights */
    --leading-tight: 120%;
    --leading-normal: 180%;

    /* Letter Spacing */
    --tracking-normal: 1px;
    --tracking-wide: 1.5px;

    /* Opacity */
    --opacity-70: 0.7;

    /* Breakpoints - Note: CSS variables in media queries have limited browser support */
    --breakpoint-tablet: 1024px;
    --breakpoint-mobile: 809px;

    /* メニュー折りたたみ時の高さ（load-menu.js で初期表示後に実測して上書き） */
    --menu-collapsed-height: 58px;

    /* For future reference: Use these values to update media queries */
    /* Tablet: 1024px */
    /* Mobile: 809px */
}

/* ============================================
   Text Selection Styles
   ============================================ */
::selection {
    background-color: #1F1F20;
    color: #fff;
}

::-moz-selection {
    background-color: #1F1F20;
    color: #fff;
}

/* 黒い背景の要素内では選択色を反転 */
.bg-black ::selection,
.bg-black::selection {
    background-color: #fff;
    color: #1F1F20;
}

.bg-black ::-moz-selection,
.bg-black::-moz-selection {
    background-color: #fff;
    color: #1F1F20;
}

/* ============================================
   Text Utility Classes
   ============================================ */



/* ============================================
   Font Face Declarations
   ============================================ */
@font-face {
    font-family: "Nuosu SIL";
    src: url("fonts/nuosu-sil-latin-400-normal.woff2") format("woff2"), url("fonts/nuosu-sil-latin-400-normal.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    unicode-range: U+0000-00FF;
    /* 基本ラテン文字 */
}

@font-face {
    font-family: "Konshoku";
    src: url("fonts/ShipporiMincho-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF;
    font-display: swap;
    /* フォント読み込み最適化 */
}

@font-face {
    font-family: "Konshoku";
    src: url("fonts/IBMPlexSansJP-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    unicode-range: U+4E00-9FAF, U+3400-4DBF;
    /* 漢字 */
    font-display: swap;
    /* フォント読み込み最適化 */
}

@font-face {
    font-family: "Konshoku";
    src: url("fonts/ShipporiMincho-Regular.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF;
    font-display: swap;
}

@font-face {
    font-family: "Konshoku";
    src: url("fonts/IBMPlexSansJP-Regular.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    unicode-range: U+4E00-9FAF, U+3400-4DBF;
    font-display: swap;
}

/* ============================================
   Utility Classes - Typography
   ============================================ */

/* 日本語テキスト - IBM Plex Sans JP */


.text-light {
    color: #f1f0f3;
}


@keyframes menuOpen {
    0% {
        width: 480px;
        height: var(--menu-collapsed-height);
    }

    50% {
        width: 640px;
        height: var(--menu-collapsed-height);
    }

    100% {
        width: 640px;
        height: 540px;
    }
}

@keyframes menuClose {
    0% {
        width: 640px;
        height: 540px;
    }

    50% {
        width: 640px;
        height: var(--menu-collapsed-height);
    }

    100% {
        width: 480px;
        height: var(--menu-collapsed-height);
    }
}

.bg-black {
    background-color: #1F1F20;
}

/* 中黒のbefore要素 */
.bg-black-before::before {
    background-color: #1F1F20;
}

.bg-white-before::before {
    background-color: #fff;
}

.konshoku {
    font-family: "Konshoku", "Shippori Mincho", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", "MS PMincho", "MS Mincho", serif;
}



html,
body {
    color: #242426;
    position: relative;
    background-color: #f4f4f4;
    font-feature-settings: "palt";
}


a {
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.4;
}

img {
    display: block;
}


/* ============================================
   Loading Screen
   ============================================ */
.loading-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #f5f5f5;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.loading-background.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-screen {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 32px);
    height: calc(100vh - 32px);
    border-radius: 8px;
    border: 1px solid #666;
    background-color: #343434;
    z-index: 9999;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out, width 0.5s cubic-bezier(0.3, 1, 0.3, 1), height 0.5s cubic-bezier(0.3, 1, 0.3, 1), top 0.5s cubic-bezier(0.3, 1, 0.3, 1), bottom 0.5s cubic-bezier(0.3, 1, 0.3, 1), left 0.5s cubic-bezier(0.3, 1, 0.3, 1), margin 0.5s cubic-bezier(0.3, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.3, 1, 0.3, 1), transform 0.5s cubic-bezier(0.3, 1, 0.3, 1);

}

/* ローディング画面の縮小アニメーション */
@keyframes loadingShrink {
    0% {
        width: calc(100vw - 48px);
        height: calc(100vh - 48px);

    }

    33% {
        width: calc(100vw - 48px);
        height: 58px;
    }

    66% {
        width: 480px;
        height: 58px;
    }

    100% {
        width: 480px;
        height: 58px;
        bottom: 24px;
    }
}

.loading-screen.is-shrinking {
    animation: loadingShrink 1.5s cubic-bezier(0.3, 1, 0.3, 1) forwards;
}

.loading-screen.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-screen__progress {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    color: #fff;
    font-family: var(--font-sans-jp);
    font-size: var(--text-4);
    font-style: normal;
    font-weight: 300;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.loading-screen__progress.is-fading-out {
    opacity: 0;
}

.loading-screen__progress.is-fading-in {
    opacity: 0;
    animation: fadeIn 0.5s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* ============================================
   Page Layout
   ============================================ */
.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 64px 48px 0;
    background-color: #f4f4f4;
}

.main-content {
    position: relative;
}


.logo-container__header {
    position: fixed;
    top: 64px;
    right: 64px;
    display: inline-block;
    mix-blend-mode: difference;
}

.logo-container__header__link {
    display: block;
    width: auto;
    height: auto;
}

.logo-container__header__svg {
    display: block;
    width: auto;
    height: 14px;
    fill: #fff;
    mix-blend-mode: difference;
}

.logo-container__header__svg path {
    fill: #fff;
}



/* Device-specific display classes（PC画面幅のときのみ .pc 表示） */
@media screen and (min-width: 810px) {
    .pc {
        display: block;
    }

    .sp {
        display: none;
    }
}


.menu--glass-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility;
    transition-duration: 0.2s;
    transition-timing-function: ease;
    transition-delay: 0.2s;
    z-index: 50;
    /* フッターより上、メニューより下 */
}

body:has(.menu.is-open) .menu--glass-overlay {
    opacity: 1;
    visibility: visible;
}


.menu {
    width: 480px;
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.3, 1, 0.3, 1);
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    max-width: calc(100% - 48px);
    overflow: hidden;
    padding: 16px 0px 0px;
    background-color: #343434;
    border-radius: 8px;
    color: #fff;
    border: 1px solid #666;
    z-index: 100;
    /* フッターより手前に表示 */
}

.menu.is-open {
    animation: menuOpen 0.5s cubic-bezier(0.3, 1, 0.3, 1) forwards;
}

.menu.is-open .menu--hidden {
    display: flex;
    opacity: 1;
    padding: 0 16px;
}

.menu.is-close {
    animation: menuClose 0.5s cubic-bezier(0.3, 1, 0.3, 1) forwards;
}

.menu--visible {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 0px;
}

.menu--visible__announcement__text {
    width: 100%;
    display: flex;
    align-items: center;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: clip;
    transform: translateY(-8px);
}

.menu--visible__announcement__text p {
    margin: 0;
    font-family: var(--font-sans-jp);
    font-size: var(--text-4);
    font-style: normal;
    font-weight: 300;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    animation: scrollLeft 10s linear infinite;
    /* 開始位置を右にオフセット */
}

@keyframes scrollLeft {
    0% {
        transform: translateX(110%);
        opacity: 1;
    }

    99% {
        transform: translateX(-100%);
        opacity: 1;
    }

    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

.menu--visible__open-menu {
    transition: all 0.2s ease;
    width: 48px;
    aspect-ratio: 1/1;
    border-radius: 4px;
    background-color: #424242;
    border: 1px solid #5E5E5E;
    margin-top: -12px;
    margin-right: 4px;
    margin-bottom: 4px;
    position: relative;
    cursor: pointer;
}

.menu--visible__open-menu::before,
.menu--visible__open-menu::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    transition: transform 0.3s ease;
}

.menu--visible__open-menu::before {
    width: 16px;
    height: 1px;
    transform: translate(-50%, -50%) rotate(0deg);
}

.menu--visible__open-menu::after {
    width: 1px;
    height: 16px;
    transform: translate(-50%, -50%) rotate(0deg);
}

.menu--visible__open-menu:hover {
    opacity: 0.4;
    transition: all 0.2s ease;
}


.menu.is-open .menu--visible__open-menu::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.menu.is-open .menu--visible__open-menu::after {
    transform: translate(-50%, -50%) rotate(45deg);
}


.menu .menu--hidden {
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 64px;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease;
    width: 100%;
}

.menu--hidden__links {
    width: 100%;
    margin-top: 64px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    border-bottom: 1px solid #494949;
    padding-bottom: 16px;
}

.menu--hidden__links a {
    display: block;
    font-family: var(--font-serif-en);
    font-style: normal;
    font-weight: 400;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-normal);
    font-size: var(--text-4);
}

.menu--hidden__sns {
    width: 100%;
    border-bottom: 1px solid #494949;
    padding-bottom: 16px;

}


.menu--hidden__sns a {
    display: block;
    font-family: var(--font-serif-en);
    font-style: normal;
    font-weight: 400;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-normal);
    font-size: var(--text-2);
}

.menu--hidden__sns a:not(:first-child) {
    margin-top: 16px;
}

.menu--hidden__contact__title {
    font-family: var(--font-serif-en);
    font-style: normal;
    font-weight: 400;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-normal);
    font-size: var(--text-3);
    margin-bottom: 8px;
}


.menu--hidden__contact__mail {
    font-family: var(--font-serif-en);
    font-style: normal;
    font-weight: 400;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-normal);
    font-size: var(--text-7);
    text-wrap: balance;
    margin-top: 0px;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    width: 100%;
}

.menu--hidden {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.main-copy {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0px;
    min-height: 200px;
    /* タイプライター演出中の高さを固定 */
}

.main-copy__content-jp {
    margin-top: 0px;
}

.main-copy__content-en {
    margin-top: 32px;
}

.main-copy__content-en .main-copy__text[lang=en] {
    font-size: 10px;
}

.main-copy__text[lang=ja] {
    margin-top: 4px;
    font-style: normal;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: var(--tracking-normal);
    font-size: var(--text-6);
    white-space: normal !important;
    min-height: 1.4em;
    /* 行の高さを固定 */
}

.main-copy__text[lang=en] {
    margin-top: 4px;
    font-family: var(--font-serif-en);
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: var(--tracking-normal);
    font-size: var(--text-4);
    white-space: normal !important;
    min-height: 1.4em;
    /* 行の高さを固定 */
}


/* ============================================
   Home Works
   ============================================ */

.home__works {
    margin-top: 104px;
    display: flex;
    margin-bottom: 40px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    row-gap: 104px;
    column-gap: 24px;
    margin-bottom: 104px;
}

.home__works__item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    row-gap: 8px;
}

.home__works__link {
    width: 100%;
    height: 100%;
}

.home__works__link:hover {
    opacity: 1;
}

.home__works__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home__works__text {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4px;
    position: relative;
}

.home__works__link:hover .home__works__text {
    opacity: 0.4;
}

.home__works__title {
    font-family: var(--font-serif-en);
    font-style: normal;
    font-weight: 400;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-normal);
    font-size: var(--text-5);
}

.home__works__day {
    font-family: var(--font-sans-jp);
    font-size: var(--text-1);
    font-style: normal;
    font-weight: 300;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-tight);
}

/* サイズ別のスタイル */
.home__works__item--size-l {
    width: calc(50% - 12px);
}

.home__works__item--size-l .home__works__img {
    aspect-ratio: 1 / 1.12;
    height: auto;
}

.home__works__item--size-s {
    width: calc(25% - 18px);
}

.home__works__item--size-s .home__works__img {
    aspect-ratio: 1 / 1.15;
    height: auto;
}

/* スペーサーとアイテムをラップするコンテナ */
.home__works__container {
    display: flex;
    flex-direction: column;
    width: calc(25% - 18px);
}

.home__works__container--size-s {
    width: calc(25% - 18px);
}

.home__works__container .home__works__item {
    width: 100%;
}

/* 透明なスペーサー（tamayaの上に配置） */
.home__works__spacer {
    width: 100%;
    aspect-ratio: 1 / 1.15;
    height: auto;
    pointer-events: none;
    flex-shrink: 0;
}

/* 2列目の要素（3番目、4番目）は上にマージン */

.home__works__item:nth-of-type(1) {
    margin-top: 0px;
}

.home__works__item:nth-of-type(2) {
    margin-top: 0px;
}

.home__works__item:nth-of-type(3) {
    margin-top: 0px;
}

.home__works__item:nth-of-type(4) {
    margin-top: 0px;
}

.home__works__item:nth-of-type(5) {
    margin-top: 0px;
}

.home__works__item:nth-of-type(6) {
    margin-top: 0px;
}

.home__works__item:nth-of-type(7) {
    margin-top: 0px;
}

.home__works__item:nth-of-type(8) {
    margin-top: 0px;
}

.home__works__item:nth-of-type(9) {
    margin-top: 0px;
}

.home__works__item:nth-of-type(10) {
    margin-top: 0px;
}

.home__works__item:nth-of-type(11) {
    margin-top: 0px;
}

.home__works__item:nth-of-type(12) {
    margin-top: 0px;
}

.private-works {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    margin-bottom: 200px;
    border-top: 1px solid #D0D0D0;
    margin-top: 104px;
}


.private-works .contents {
    margin-top: 56px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 496px;
    grid-column-gap: 24px;
    grid-row-gap: 0px;
    width: 100%;
}


.private-works .contents .works__item {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0px;
}


.private-works .contents .works__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 3/5;
}

.private-works .contents .works__item h3.title {
    font-family: var(--font-serif-en);
    font-style: normal;
    font-weight: 400;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-normal);
    font-size: var(--text-4);
    margin-top: 6px;
}

.private-works .contents .works__item time.date {
    font-family: var(--font-sans-jp);
    font-size: var(--text-1);
    font-style: normal;
    font-weight: 300;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
    margin-top: 0px;
}


/* プロフィールページ */

.page-profile {
    padding: 64px 64px 0 64px;
}

/* プロフィールページ内の共通スタイル */

.profile-section {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: auto;
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    width: calc(100% + 96px);
    padding: 96px 48px;
    margin: 0 -48px;
}


.profile-section__title {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    width: 100%;
    margin-top: 0px;
    padding-top: 0px;
}


.profile-section__title p[lang=ja] {
    font-family: "Konshoku";
    font-weight: 300;
}

.profile-section__title p[lang=en] {
    font-family: var(--font-serif-en);
    font-style: normal;
    font-size: var(--text-4);
    font-weight: 400;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-normal);
}



.profile-section__title__main {
    font-size: var(--text-6);
    text-align: left;
}


.profile-section__title__main::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 16px;
    border-radius: 50%;
    transform: translateY(-7px);
    text-align: left;
}


.profile-section__title__sub {
    font-size: var(--text-4);
    text-align: right;
}



/* プロフィールセクションのセクションごとのスタイル＿＿profile*/

.profile-section__profile {
    padding-bottom: 0px;
}

.profile-section__profile__paragragh {
    display: grid;
    grid-column-gap: 24px;
    grid-row-gap: 0px;
    margin-top: 24px;
    grid-column: 1/4;
}


.profile-section__profile__paragragh__ja[lang=ja] {
    font-family: var(--font-sans-jp);
    font-size: var(--text-4);
    font-style: normal;
    font-weight: 300;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
}

.profile-section__profile__paragragh__en[lang=en] {
    margin-top: 16px;
    font-family: var(--font-serif-en);
    font-style: normal;
    font-weight: 400;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    font-size: 10px;
}

.profile-section__profile__gallary {
    margin-top: 40px;
    height: 560px;
    display: grid;
    grid-column: 1/-1;
    grid-template-columns: repeat(6, 1fr);
}

.profile-section__profile__gallary img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* プロフィールセクションのセクションごとのスタイル＿＿feature*/

.profile-section__feature__contents {
    margin-top: 64px;
    display: grid;
    grid-column: 1/-1;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 24px;
    grid-row-gap: 0px;
    width: 100%;

}

.profile-section__feature__item {
    display: grid;
    grid-column: 2/-1;
    grid-template-columns: repeat(5, 1fr);
    width: 100%;
}

.profile-section__feature__item:not(:first-child) {
    margin-top: 40px;
}

.profile-section__feature__item__title {
    border-top: 1px solid #424242;
    padding-top: 24px;
    grid-column: 1/-1;
    grid-row: 1/2;
    margin-bottom: 24px;
    font-size: var(--text-5);
    letter-spacing: var(--tracking-normal);
    font-weight: 300;
    line-height: var(--leading-normal);
    font-family: var(--font-mincho);

}

.profile-section__feature__item__text {
    grid-column: 1/4;
    grid-row: 2/3;
}


.profile-section__feature__item__text p[lang=ja] {
    width: 100%;
    font-family: var(--font-sans-jp);
    font-size: var(--text-3);
    font-style: normal;
    font-weight: 300;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
}

.profile-section__feature__item__text p[lang=en] {
    margin-top: 16px;
    font-family: var(--font-serif-en);
    font-style: normal;
    font-weight: 400;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    font-size: var(--text-2);
    opacity: var(--opacity-70);
}

.profile-section__feature__item__img {
    grid-column: 4/-1;
    grid-row: 2/3;
    width: 100%;
    height: auto;
}


/* プロフィールセクションのセクションごとのスタイル＿＿flow*/

.profile-section__flow {
    margin-top: 200px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: auto;
    grid-column-gap: 24px;
    grid-row-gap: 40px;
    padding: 80px 64px;
    width: calc(100% + 128px);
    margin: 0 -64px;
}


.profile-section__flow__intro {
    margin-top: 40px;
    grid-column: 2/-1;
    /* grid-rowを指定しない → HTMLの順番で自動配置 */
}

.profile-section__flow__intro p[lang=ja] {
    width: 100%;
    font-family: var(--font-sans-jp);
    font-size: var(--text-3);
    font-style: normal;
    font-weight: 300;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
}

.profile-section__flow__intro p[lang=en] {
    margin-top: 16px;
    font-family: var(--font-serif-en);
    font-style: normal;
    font-weight: 400;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    font-size: var(--text-2);
    opacity: var(--opacity-70);
}

.profile-section__flow__list {
    display: grid;
    grid-column: 2/-1;
    counter-reset: flow-counter;
    list-style: none;
    padding-left: 0;
}

.profile-section__flow__item {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: auto;
    grid-column-gap: 24px;
    grid-row-gap: 8px;
    margin-top: 24px;
    border-top: 1px solid #424242;
    padding-top: 48px;
    counter-increment: flow-counter;
    position: relative;
}

.profile-section__flow__item:last-child {
    padding-bottom: 24px;
    border-bottom: 1px solid #424242;
}

.profile-section__flow__item::before {
    content: counter(flow-counter, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 24px;
    font-family: var(--font-mincho);
    font-size: var(--text-4);
    font-weight: 400;
    color: #fff;
    line-height: 1.2;
}

.profile-section__flow__item__title {
    grid-column: 1/2;
    grid-row: 2;
    font-family: var(--font-mincho);
    font-size: var(--text-5);
    font-style: normal;
    font-weight: 300;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
}

.profile-section__flow__item__content {
    grid-column: 2/-1;
    grid-row: 2;
}

.profile-section__flow__item__content p[lang=ja] {
    width: 100%;
    font-family: var(--font-sans-jp);
    font-size: var(--text-3);
    font-style: normal;
    font-weight: 300;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
}

.profile-section__flow__item__content p[lang=en] {
    margin-top: 16px;
    font-family: var(--font-serif-en);
    font-style: normal;
    font-weight: 400;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    font-size: var(--text-2);
    opacity: var(--opacity-70);
}


/* プロフィールセクションのセクションごとのスタイル＿＿price*/

.profile-section__price__intro-mitsumori {
    margin-top: 80px;
    display: grid;
    grid-column: 2/-1;
    grid-row: auto;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: auto;
    grid-column-gap: 24px;
    grid-row-gap: 24px;
}

.profile-section__price__intro-mitsumori__intro {
    border-top: 1px solid #424242;
    padding-top: 24px;
    grid-column: 1/4;
    grid-row: 1/2;
    font-size: var(--text-5);
    font-weight: 300;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
    font-family: var(--font-mincho);
}

.profile-section__price__intro-mitsumori__mitsumori {
    grid-column: 1/4;
    grid-row: 2/3;
    border-bottom: 1px solid #424242;
    padding-bottom: 24px;
}

.profile-section__price__intro-mitsumori__mitsumori h3 {
    border-top: 1px solid #424242;
    padding-top: 24px;
    font-size: var(--text-5);
    font-weight: 300;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
    font-family: var(--font-mincho);
}

.profile-section__price__intro-mitsumori__mitsumori p {
    margin-top: 24px;
    font-size: var(--text-3);
    font-weight: 300;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
    font-family: var(--font-mincho);
}

.profile-section__price__intro-mitsumori__img {
    grid-column: 4/-1;
    grid-row: 1/3;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-section__price__osaeru {
    margin-top: 0px;
    padding-top: 0px;
    display: grid;
    grid-column: 2/-1;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 24px;
    grid-row-gap: 0px;
}

.profile-section__price__osaeru__title {
    grid-column: 1/-1;
    grid-row: 1/2;

    font-size: var(--text-5);
    font-weight: 300;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
    font-family: var(--font-mincho);
}

.profile-section__price__osaeru__title span {

    grid-column: 2/5;
    grid-row: 1/2;
}

.profile-section__price__osaeru__list {
    grid-column: 1/-1;
    grid-row: 2/4;
}

.profile-section__price__osaeru__item {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 24px;
    grid-row-gap: 0px;
}

.profile-section__price__osaeru__item__number {
    grid-column: 1/2;
    grid-row: 1/2;
    font-size: var(--text-4);
    font-weight: 400;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
    font-family: var(--font-serif-en);
}

.profile-section__price__osaeru__item__title {
    grid-column: 1/2;
    grid-row: 2;
    font-size: var(--text-5);
    font-weight: 300;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
    font-family: var(--font-mincho);
}

.profile-section__price__osaeru__item__text {
    grid-column: 2/4;
    grid-row: 2/3;
    font-size: var(--text-3);
    font-weight: 300;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
    font-family: var(--font-mincho);
}

/* ワークページ */

.page-work {
    margin-top: -64px;
}

.page-work__kv {
    width: calc(100% + 96px);
    height: 80vh;
    max-height: 800px;
    min-height: 260px;
    margin: 0 -48px;
    overflow: hidden;
    position: relative;
}

.page-work__kv__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.page-work__title {
    margin-top: 80px;
    font-family: var(--font-mincho);
    font-size: var(--text-6);
    font-weight: 400;
    font-style: normal;
    height: 1.2em;
}

.page-work__overview {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 24px;
    grid-row-gap: 0px;
}

.page-work__overview__list {
    grid-column: 1;
    grid-row: 1;
}

.page-work__overview__list__item {
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}


.page-work__overview__list__item dt,
.page-work__overview__list__item dd {
    white-space: normal;
    word-break: break-word;
    font-family: var(--font-sans-jp);
    font-size: var(--text-2);
    font-style: normal;
    font-weight: 300;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-normal);
}

.page-work__overview__list__item dt {
    width: 80px;
    position: relative;
}

.page-work__overview__list__item dd {
    flex: 1;
}

.page-work__overview__list__item dd a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: #ccc;
}

.page-work__overview__list__item dt::after {
    content: ":";
    position: absolute;
    right: 0;
}


.page-work__overview__paragraph {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column: 2/-1;
    grid-row: 1;
    grid-column-gap: 24px;
}

.page-work__overview__paragraph p[lang=ja] {
    font-family: var(--font-sans-jp);
    font-size: var(--text-3);
    font-style: normal;
    font-weight: 300;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
}

.page-work__overview__paragraph p[lang=en] {
    font-family: var(--font-serif-en);
    font-size: var(--text-1);
    font-style: normal;
    font-weight: 300;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
    opacity: var(--opacity-70);
}


.page-work__overview__paragraph__body-1-ja {
    grid-column: 1;
    grid-row: 1;
}

.page-work__overview__paragraph__body-2-ja {
    grid-column: 2;
    grid-row: 1;
}

.page-work__overview__paragraph__body-1-en {
    margin-top: 24px;
    grid-column: 1;
    grid-row: 2;
}

.page-work__overview__paragraph__body-2-en {
    margin-top: 24px;
    grid-column: 2;
    grid-row: 2;
}

.page-work__overview__paragraph__url {
    margin-top: 24px;
    grid-column: 1/-1;
    grid-row: 3;
}

.page-work__overview__paragraph__url a {
    font-family: var(--font-serif-en);
    font-size: var(--text-5);
    font-style: normal;
    font-weight: 400;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-normal);
}


.page-work__contents {
    margin-top: 80px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 24px;
    grid-row-gap: 24px;
}




.page-work__contents__grid-1-2 {
    grid-column: 1/3;
}

.page-work__contents__grid-half {
    grid-column: span 3;
}

.page-work__contents__grid-span-2 {
    grid-column: span 2;
}

.page-work__contents__grid-1-4 {
    grid-column: 1/5;
}

.page-work__contents__grid-1-6 {
    grid-column: 1/-1;
}

.page-work__contents__grid-3-6 {
    grid-column: 3/-1;
}

.page-work__contents__grid-text[lang=ja] {
    font-family: var(--font-sans-jp);
    font-size: var(--text-3);
    font-style: normal;
    font-weight: 300;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
}

.page-work__contents__grid-text[lang=en] {
    font-family: var(--font-serif-en);
    font-size: var(--text-2);
    font-style: normal;
    font-weight: 300;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
    opacity: var(--opacity-70);
}

.page-work__contents__grid-text:not(:first-child) {
    margin-top: 24px;
}

.page-work__next-work {
    margin-top: 104px;
}

.page-work__next-work__link:hover {
    opacity: 1;
}

.page-work__next-work__label {
    font-family: var(--font-serif-en);
    font-style: normal;
    font-weight: 400;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-normal);
    font-size: var(--text-4);
}

.page-work__next-work__title {
    margin-top: 24px;
    font-family: var(--font-serif-en);
    font-style: normal;
    font-weight: 400;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-normal);
    font-size: var(--text-6);
}

.page-work__next-work__img {
    margin-top: 24px;
    width: 100%;
    height: 374px;
    object-fit: cover;
}

/* フッター */

.footer-wrapper {
    background-color: #1F1F20;
    color: #fff;
    padding: 80px 48px 40px;
    display: flex;
    flex-direction: column;
    gap: 80px;
    width: calc(100% + 96px);
    margin: 0 -48px -100px;
    height: auto;
    position: relative;
    z-index: 10;
}

/* 上段：メインコンテンツ */
.footer__main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

/* 左側：ナビゲーション */
.footer__nav {
    display: flex;
    gap: 120px;
}

.footer__nav-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* gapを調整（titleのマージンを含めるため少し詰める） */
    width: fit-content;
    /* 幅を中身（一番長い要素）に合わせる */
}

.footer__nav-title {
    font-family: var(--font-serif-en);
    font-size: var(--text-3);
    opacity: 0.7;
    font-weight: 400;
    line-height: var(--leading-tight);
    padding-bottom: 8px;
    /* 文字と線の間隔 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    /* 罫線追加 */
    width: 100%;
    /* 横幅いっぱいに線を引く */
    margin-bottom: 8px;
    /* 線とリストの間隔調整 */
}

.footer__nav-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer__nav-list a {
    font-family: var(--font-serif-en);
    font-size: var(--text-2);
    color: #fff;
    text-decoration: none;
    opacity: 1;
    transition: opacity 0.3s;
    line-height: var(--leading-tight);
}

.footer__nav-list a:hover {
    opacity: 0.6;
}

/* 右側：情報エリア */
.footer__info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    /* nav-listの高さに応じて広がるようにする */
    min-height: 400px;
}

/* ロゴ */
.footer__logo a {
    display: block;
}

.footer__logo img {
    height: 12px;
    width: auto;
    /* ロゴSVG自体を白くしたのでfilterは不要 */
}

/* コンタクト */
.footer__contact {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    margin-top: auto;
}

.footer__contact-label {
    font-family: var(--font-serif-en);
    font-size: var(--text-3);
    opacity: 0.7;
    line-height: var(--leading-tight);
}

.footer__contact-mail {
    font-family: var(--font-serif-en);
    font-size: var(--text-6);
    color: #fff;
    line-height: var(--leading-tight);
}

/* 下段：ボトムバー */
.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.footer__copyright,
.footer__sns a {
    font-family: var(--font-serif-en);
    font-size: var(--text-2);
    color: #fff;
    opacity: 0.7;
    text-decoration: none;
    line-height: var(--leading-tight);
    transition: opacity 0.3s;
    /* トランジションを追加して滑らかに */
}

.footer__sns a:hover {
    opacity: 0.4;
    /* ホバー時に半透明に */
}

.footer__sns {
    display: flex;
    gap: 24px;
}




/* ============================================
   Media Queries - Mobile First Approach
   ============================================ */

/* Mobile Styles (max-width: 809px) */


/* RESPONSIVE STYLES============================================ */

/* Large Tablet Styles (max-width: 1024px) */
@media screen and (max-width: 1024px) {

    .profile-section__profile__text p[lang=ja],
    .profile-section__profile__text p[lang=en] {
        grid-column: 1/3;
    }


    .profile-section__intro {
        grid-column: 1/-1;
    }

    .profile-section__flow-list {
        grid-column: 1/-1;
    }

    .profile-section__flow-item__content {
        grid-column: 1/-1;
    }

    .profile-section__flow-item__number {
        grid-column: 1/-1;
    }

    .profile-section__price__intro-mitsumori__intro {
        grid-column: 1/5;
    }

    .profile-section__price__intro-mitsumori__mitsumori-title {
        grid-column: 1/5;
    }

    .profile-section__price__intro-mitsumori__mitsumori-content {
        grid-column: 1/5;
    }

    .profile-section__price__intro-mitsumori__img {
        grid-column: 4/-1;
    }

    .profile-section__price__osaeru__title span[lang=ja] {
        grid-column: 1/5;
    }
}

/* black-grid-overlayクラスのスタイル */
.black-grid-overlay {
    background-color: #1F1F20 !important;
}


/*# sourceMappingURL=style.css.map */