@charset "utf-8";
html{
    font-size: 14px;
    font-kerning: normal;
    font-optical-sizing: auto;  
    font-family: inherit;
    scroll-behavior: smooth;
}
*,*::before,*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --base:#fafafa;/* ベース:60% */
    --base:rgba(250, 250, 250, 1);/* ベース:60% */
    --main:rgba(0, 135, 155, 1);/* メイン:30% */
    --sub:rgba(227, 208, 175, 1);/* サブ:10~15% */
    --accent: rgba(186, 200, 77, 1);/*アクセントト:5～10% */
    --white:rgba(250, 250, 250, 1);
    --black: rgba(51, 51, 51, 1);
    --Helvetica: "Helvetica", sans-serif;
    --gothic: "游ゴシック体", "YuGothic", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}
body{
    width: 100%;
    height: 100dvh;
    background: var(--base);;
    color: var(--black);
    font-family: var(--Helvetica);
    line-height: 1.8;
    letter-spacing: 0.05em;
    text-align: left;
    display: flex;
    overflow-x: hidden; /* 横スクロール抑止 */
}
img{
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* ローディング（モーフィング） */
.loading{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--base);
    z-index: 50;
    animation: loaderFade .2s ease-out 2.3s forwards;
}
.loading::after{
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    animation: whiteOut .3s ease-out 2s forwards;
}
@keyframes whiteOut{
    from{opacity: 0;}
    to  {opacity: 1;}
}
@keyframes loaderFade {
    from{opacity: 1; visibility: visible;}
    to  {opacity: 0; visibility: hidden;}
}
.morphing{
    position: relative;
    width: 100%;
    height: 100%;
    color: var(--black);
    filter: contrast(28) saturate(1.05);
    --radiusX: clamp(18vw, 24vmin, 28vw);
    --radiusY: clamp(14vh, 18vmin, 22vh);
}
.word{
    position: absolute;
    top: 50%;
    left: 50%;
    line-height: 1.2;
    letter-spacing: .02em;
    text-align: center;
    white-space: pre-line; /* br のみ改行を有効に */
    opacity: 0;
    z-index: 1;
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(var(--scale, 1));
    will-change: opacity, transform, filter, letter-spacing, color;
}
.word:nth-child(1) {
    --dx: 0; --dy: 0; --scale: 1;
    width: 200px;
    margin: 0 auto;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.6;
    z-index: 2;
    text-align: left;
    animation: word1Zoom 2.3s ease-out forwards;
}
@keyframes word1Zoom{
    0%  { opacity: 0;  filter: blur(1em);   transform: translate(-50%, -50%) scale(.9);}
    12% { opacity: 1;  filter: blur(.25em); transform: translate(-50%, -50%) scale(1);}
    20% { opacity: 1;  filter: blur(0);     transform: translate(-50%, -50%) scale(1.02);}
    80% { opacity: 1;  filter: blur(0);     transform: translate(-50%, -50%) scale(1.1);}
    90% { opacity: 1;  filter: blur(0);     transform: translate(-50%, -50%) scale(1.1);}
    100%{ opacity: .6; filter: blur(8px);   transform: translate(-50%, -50%) scale(1.1);}
}
/* word2〜4 */
.word:nth-child(2),
.word:nth-child(3),
.word:nth-child(4){
    width: 200px;
    font-size: 16px;
    animation: appearThenBloom 2.3s ease-out forwards;
}
.word:nth-child(2){
    --dx: calc(-1 * var(--radiusX));
    --dy: calc(-1 * var(--radiusY) * 1.1);
    animation-delay: .1s;
}
.word:nth-child(3){
    --dx: calc(var(--radiusX) * 1.3 - 16px);
    --dy: calc(var(--radiusY) * .8);
    animation-delay: .2s;
}
.word:nth-child(4){
    --dx: -16px;
    --dy: calc(var(--radiusY) * 1.5 + 16px);
    animation-delay: .3s;
}
@keyframes appearThenBloom{
    0%  {opacity: 0;   color: rgba(0,0,0,0);    filter: blur(14px);
        transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.92);}
    15% {opacity: .7;  color: rgba(0,0,0,.45); filter: blur(6px); }
    35% {opacity: .8;  color: rgba(0,0,0,.5);  filter: blur(0);
        transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1);}
    95% {opacity: .75; color: rgba(0,0,0,.42); filter: blur(1px); }
    100%{opacity: .6;  color: rgba(0,0,0,.35); filter: blur(8px);
        transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.02);}
}

/* ふわっと出現 */
.fadeinFast{
    opacity : 0;
    transform: translateY(20px);
    transition: all .5s;
}
.fadein{
    opacity : 0;
    transform: translateY(20px);
    transition: all .75s;
}
.fadeinSlow{
    opacity : 0;
    transform: translateY(20px);
    transition: all .9s;
}

header{
    width: 166px;
    height: 100dvh;
    box-shadow: 4px 0 3px -3px rgba(0, 0, 0, 0.15);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    background: var(--base); /* 必要ないが、後ろの要素が透けるときの保険 */
}
.headerInner{
    width: 166px;
    height: 100dvh;
    position: relative;
}
h1{
    font-size: 28px;
    line-height: 1.2;
    position: absolute;
    top: 10%;
    left: 18%;
    font-family: "Helvetica";
}
h1 a{
    width: 108.26px;
    height: 67.2px;
    line-height: 0;
}
h1 a:hover{color: var(--black);}
nav{
    position: absolute;
    top: 40%;
    left: 18%;
}
li{
    list-style: none;
    padding-left: 0;
}
a{
    text-decoration: none;
    color: var(--black);
    line-height: 2.5;
    transition: .3s;
    position: relative; /*線の基点*/
}
a:hover{
    cursor: pointer;
    color: var(--main);
}
nav li a::after{
    content: '';
    /*線の位置*/
    position: absolute;
    bottom: -2px;
    left: 0;
    /*線の形状*/
    width: 100%;
    height: 2px;
    background: var(--main);
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: left top;/*左上基点*/
}
/*現在地とhoverの設定*/
nav a::after,nav a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}

aside{
    width: 64%;
    height: 24px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    position: absolute;
    bottom: 10%;
    left: 18%;
}
aside a{
    display: inline-block;
    width: 24px;
    height: 24px;
    transition: all .5s;
}
aside a:nth-child(1){
    background: url(img/icon_insta_black.webp) center/cover no-repeat;}
aside a:nth-child(2){
    background: url(img/icon_facebook_black.png) center/contain no-repeat;}
aside a:nth-child(3){
    border-radius: 50%;
    background: url(img/icon_github.webp) top/contain no-repeat;
    filter: brightness(1);
}
aside a:nth-child(1):hover{
    background: url(img/icon_insta_org.webp) center/cover no-repeat;}
aside a:nth-child(2):hover{
    background: url(img/icon_facebook_org.png) center/contain no-repeat;}
aside a:nth-child(3):hover{
    filter: brightness(1.4);
    box-shadow: inset 0 0 0 100vmax rgba(0, 135, 155, .4);
}

main{
    width: calc(100% - 166px);
    height: 100dvh;
    position: relative;
    z-index: 10;
    margin-left: 166px;
}
#vanta{
    width: 100%;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
    opacity: .6;
    transition: opacity 0.8s ease;
}
canvas.vanta-canvas{
    width: 100%;
    height: 100dvh;
    display: block;
    filter: invert(100%) grayscale(100%) contrast(96%) brightness(1);
    transition: filter 0.725s ease-out;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
    pointer-events: none;
}
#vanta:hover canvas.vanta-canvas {
    filter: invert(100%) grayscale(0%) contrast(96%) brightness(1);
    transition: filter 5s ease-in;
}
.mainvisual{
    width: 100%;
    height: 100dvh;
    background: rgba(0,0,0,0);
    pointer-events: none;
    padding-top: 60px;
    padding-left: 10%;
}
/* 外側の流体シェイプ（グレー） */
.message01 {
    width: 450px;           /* 外側ブロブの幅 */
    height: 250px;          /* 外側ブロブの高さ */
    position: absolute;     /* 絶対配置で左上に固定 */
    overflow: visible;      /* 子のmessage02をはみ出させる */
    z-index: 0;
    pointer-events: auto;
}
.message01::before {
    content: "";            /* 疑似要素でブロブを描画 */
    position: absolute;
    inset: 0;               /* 親いっぱいに広げる */
    border-radius: 54% 46% 46% 54% / 52% 46% 54% 48%; /* 丸みを維持した非対称 */
    background: radial-gradient(120% 160% at 15% 10%, rgba(226, 226, 226,5), rgba(250,250,250,.5));
    box-shadow:
        0 3dvh 6dvh rgba(0, 0, 0, 0.05),  /* 外側の柔らかい影 */
        inset 0 0 4dvh rgba(255, 255, 255, 0.5); /* 内側の光 */
    animation: blobOuter 40s ease-in-out infinite;
    z-index: -10;
}
/* 内側の流体シェイプ（白） */
.message02 {
    width: 445px;           /* サイズは固定指定 */
    height: 248px;
    position: relative;
    z-index: 10;
    border-radius: 50% / 50%; /* クリップ丸み（基準は円形） */
    pointer-events: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.message02::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 51% 49% 49% 51% / 52% 48% 52% 48%; /* 丸みを保った非対称 */
    background: rgba(250, 250, 250, .9);
    box-shadow:
        0 2dvh 3dvh rgba(0, 0, 0, 0.06), /* 外側の影 */
        inset 0 0 1px rgba(0, 0, 0, 0.04); /* 内側の影 */
    animation: blobInner 45s ease-in-out infinite; /* 疑似要素だけ動かす */
    z-index: -10;
}
/* 外側ブロブ（グレー） */
@keyframes blobOuter {
    0% {
        border-radius: 54% 46% 46% 54% / 52% 46% 54% 48%;
        transform: scale(1.000);}
    25% {
        border-radius: 52% 48% 49% 51% / 54% 46% 54% 46%;
        transform: scale(1.010);}
    50% {
        border-radius: 49% 51% 55% 45% / 53% 47% 53% 47%;
        transform: scale(1.005);}
    75% {
        border-radius: 47% 53% 51% 49% / 50% 50% 50% 50%;
        transform: scale(0.995);}
    100% {
        border-radius: 54% 46% 46% 54% / 52% 46% 54% 48%;
        transform: scale(1.000);}
}
/* 内側ブロブ（白） */
@keyframes blobInner {
    0% {
        border-radius: 51% 49% 49% 51% / 52% 48% 52% 48%;
        transform: scale(1.000);}
    25% {
        border-radius: 53% 47% 50% 50% / 54% 46% 52% 48%;
        transform: scale(1.008);}
    50% {
        border-radius: 50% 50% 53% 47% / 55% 45% 51% 49%;
        transform: scale(1.000);}
    75% {
        border-radius: 48% 52% 51% 49% / 52% 48% 46% 54%;
        transform: scale(0.995);}
    100% {
        border-radius: 51% 49% 49% 51% / 52% 48% 52% 48%;
        transform: scale(1.000);}
}

.message02 p{
    line-height: 2.5;
    letter-spacing: 0.2em;
}
.pcNone{display: none;}

.works,.about{
    width: 80%;
    height: auto;
    background: rgba(0,0,0,0);
    pointer-events: none;
    margin: 0 auto 180px;
}
h2{
    width: fit-content;
    font-size: 32px;
    font-weight: 500;
    padding-top: 16px;
    margin: 0 auto 60px;
}
.item{
    width: min(960px,100%);
    height: auto;
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
    pointer-events: auto;
    margin: 0 auto 150px;
    overflow: hidden;
}
.itemImg{
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    margin: 0 auto;
    box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.15);
}
.works .item:nth-of-type(1) .itemImg {
    background: url("img/andherenailImg.webp") center/cover;}
.works .item:nth-of-type(2) .itemImg {
    background: url("img/renovImg.webp") center/cover;}
.works .item:nth-of-type(3) .itemImg {
    background: url("img/snacklabImg.webp") center/cover;}
.works .item:nth-of-type(4) .itemImg {
    background: url("img/kakeiboAppImg.webp") center/cover;}
.works .item:nth-of-type(5) .itemImg {
    background: url("img/linestampImg.webp") center/cover;}
.works .item:nth-of-type(6) .itemImg {
    background: url("img/portfolioImg.webp") center/cover;}
.itemText{
    width: 100%;
    height: auto;
    padding: 5%;
}
h3{
    font-size: 16px;
    font-weight: 600;
    font-family: var(--gothic);
    margin-bottom: 16px;
}
h3 a{
    width: fit-content;
    display: flex;
    align-items: center;
    position: relative;
}
h3 a:hover{
    cursor: pointer;
    color: var(--black);
}
h3 a::after{
    content: '';
    /* 線の位置 */
    position: absolute;
    bottom: 5px;
    left: 0;
    /* 線の形状 */
    width: 100%;
    height: 2px;
    background: var(--black);
    /* アニメーションの指定 */
    transition: all .5s;
    /* ホバー前の初期状態（非表示） */
    transform: scaleX(0);
    transform-origin: left;
}
/* ホバー時の線の表示 */
h3 a:hover::after{transform: scaleX(1);}
h3 img{margin-left: 8px;}
h4{
    font-size: 14px;
    font-weight: 600;
    font-family: var(--gothic);
    margin-bottom: 16px;
}
.itemText p{
    font-family: var(--gothic);
    padding-top: 4px;
    margin-bottom: 16px;
}
.aboutInner{
    width: min(960px,100%);
    height: auto;
    background: var(--base);
    border-radius: 10px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
    pointer-events: auto;
    margin: 0 auto 60px;
    padding: 5%;
}
.prof{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 45px;
}
.profImg{
    width: 160px;
    height: 160px;
    flex-shrink: 0;
    background: url(img/habuImg.webp) center/cover;
    background-size: 102%;
}

.about p,.about dt{font-weight: normal;}
.about h4{
    font-size: 14px;
    font-weight: 550;
    line-height: 1.5;
    margin-bottom: 0px;
}
.about dd{
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 16px;
}
.skill{
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    column-gap: 16px;
}
.skillInner{
    width: 344px;
    height: 401.2px;
    background: var(--base);
    border-radius: 10px;
    box-shadow: 0 0 6px rgba(0,0,0,.15);
    padding: 16px;
    margin-bottom: 45px;
    pointer-events: auto;
}
.skill h3{
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
}
.skill p{margin-bottom: 20px;}
.skill ul{
    width: fit-content;
    padding-left:16px;
    margin-bottom: 20px;
}
.skill li{
    width: fit-content;
    list-style: initial;
    padding-left: initial;
}
.about span{font-size: 12px;}

footer{
    width: 100%;
    height: auto;
    background: rgba(0,0,0,0);
    text-align: center;
    pointer-events: none;
}
/* アコーディオン全体 */
.policy{
    width: min(537px,90%);
    margin: 0 auto 30px;
    pointer-events: none;
}
#policy{scroll-margin-top: 30px;}
.toggle{
    width: fit-content;
    font-size: 14px;
    font-weight: 550;
    color: var(--black);
    letter-spacing: 1;
    border: none;
    text-decoration: none;
    outline: none;
    background: transparent;
    display: flex;
    align-items: center;
    margin: 0 auto 12px;
    padding-bottom: 16px;
    position: relative;      /* 基点は残す（今後拡張用） */
    cursor: pointer;
    pointer-events: auto;
}
/* 下線の疑似要素は作らない（過去定義の打ち消しも含む） */
.toggle::after{content: none !important;}
/* 念のため、ホバー／フォーカス時の変形も無効化 */
.toggle:hover::after,
.toggle:focus-visible::after{transform: none !important;}
/* 矢印（▼ / ▲） */
.toggle .chevron{
    margin-left: .5rem;
    width: .6rem;
    height: .6rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateX(-4px) translateY(-1px) rotate(45deg);  /* ★ ここで位置を調整 */
    transition: transform .3s ease;
}
.toggle[aria-expanded="true"] .chevron{
    transform: translateX(-4px) translateY(4px) rotate(-135deg); /* ▲ */
}
/* パネル本体 */
.panel{
    width: 100%;
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 0 6px rgba(0,0,0,.15);
    margin: 0 auto;
    padding: 16px;
    overflow: hidden;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    max-height: 0;
    transition:
        transform .5s ease,
        max-height .5s ease,
        opacity .5s ease;
    will-change: transform, max-height, opacity; /* 描画を安定させる */
}
.panel.is-open{
    opacity: 1;
    transform: scaleX(1);
    /* max-heightはJSがpxで設定／維持（noneにしない） */
}
/* パネル内側（テキスト部分はopacityでふわっと） */
.policyInner{
    padding: 16px;
    text-align: left;
    opacity: 0;
    transition: opacity .5s ease;
}
.panel.is-open .policyInner{opacity: 1;}
.policyInner h2{
    font-size: 14px;
    font-weight: 600;
    color: var(--black);
    padding-top: 0;
    margin: 0;
}
.policyInner p{color: var(--black);}
footer small{
    display: block;
    width: fit-content;
    line-height: 60px;
    margin: 0 auto;
}
/* 省モーション環境 */
@media (prefers-reduced-motion: reduce){
    .loading, .loading::after, .word,
    .message01::before,
    .message02::before {animation: none;}
    .loading::after {opacity: 0;}
    .word {opacity: 1; filter: none; transform: translate(-50%, -50%);}
    .panel,
    .policyInner,
    .toggle::after,
    .toggle .chevron{
        transition: none !important;
    }
}
@media screen and (max-width:924px){
    .prof{
        flex-direction: column;
        gap: 16px;
    }
    .profImg{margin: 0 auto;}
}
@media screen and (max-width:721px){
    .message01 {
        width: 310px;               /* 外側ブロブの幅 */
        height: 250px;              /* 外側ブロブの高さ */
    }
    .message02 {
        width: 300px;                /* サイズは固定指定 */
        height: 248px;
    }
    .spNone{display: none;}
    .pcNone{display: block;}
}
@media screen and (max-width:596px){
    header{
        width: 100%;
        height: 60px;
        box-shadow: 0 -1px 2px -1px rgba(0, 0, 0, 0.15);
        top: auto;
        bottom: 0;
    }
    .headerInner{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    h1{
        width: 79px;
        height: 38.4;
        font-size: 20px;
        font-weight: 600;
        line-height: .8;
        margin-left: 1%;
        position: static;
        top: auto;
        left: auto;
    }
    nav{
        width: fit-content;
        position: static;
        top: auto;
        left: auto;
    }
    nav ul{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
    }
    nav a{line-height: 0;}
    aside{
        width: 64px;
        height: 60px;
        margin-right: 1%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 1% 0 0;
        position: static;
        top: auto;
        left: auto;
    }
    aside a{
        width: 18px;
        height: 18px;
    }
    main{
        width: 100%;
        height: auto; 
        margin-left: 0;
    }
    #vanta{
        width: 100%;
        height: calc(100dvh - 60px);
    }
    .works,.about{width: 90%;}
    .skillInner{height: auto;}
    .policy-inner h2,.policy-inner p{font-size: 12px;}
    footer{padding-bottom: 60px;}
}
@media screen and (max-width:451px){
    .works,.about{width: 80%;}
}
@media screen and (max-width:390px){
    .works,.about{width: 90%;}
}
@media screen and (max-width:370px){
    .skill span {font-size: 11.3px;}
}