@charset "UTF-8";

@font-face {
    font-family: Chicago_Light;
    src: url(../font/Chicago/Chicago_Light.ttf);
}

@font-face {
    font-family: Nosutaru-dot;
    src: url(../font/Nosutaru-dotMPlusH-10-Regular/Nosutaru-dotMPlusH-10-Regular.ttf);
}

@font-face {
    font-family: Zen_Kaku_Gothic_New;
    src: url(../font/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Regular.ttf);
}

* {
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
    color: #303030;
}

body {
    font-family: Zen_Kaku_Gothic_New;
    color: #303030;
    font-size: 1.2vw;

    background: radial-gradient(circle, #f7dec6 0%, #d4e9ff 100%);
}

h1,
h2 {
    font-family: Chicago_Light;
    font-weight: Bold;
}

h3 {
    font-weight: normal;
    font-size: 1.8vw;
}

h4 {
    font-weight: normal;
    font-size: 1.6vw;
}

.marker {
    background: linear-gradient(transparent 70%, #f7dec6 30%);
}

.anchor{
    /* ページ内リンクの位置調整 */
    display: block;
    padding-top: 80px;
    margin-top: -80px;
}

/* ウインドウ(共通)ここから------- */
.window__frame {
    width: 100%;
    padding-bottom: 1.2%;
    box-shadow: -0.2vw -0.2vw inset #ccc,
        0.2vw 0.2vw inset #fff,
        0px 0px 1.5vw -0.5vw rgba(0, 0, 0, .5);
    background-color: #ebebeb;

    z-index: 10;
}

.window__bar {
    position: sticky;
    top: 0;
    width: 100%;
    height: 5vw;
    margin: 0 auto;
    box-shadow: -0.2vw 0 inset #ccc,
        0.2vw 0.2vw inset #fff;
    background: linear-gradient(180deg, #069 0%, #069 80%, #ebebeb 20%, #ebebeb 100%);

    z-index: 9;
}

.window__bar::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    content: "";
    width: 96.3%;
    height: 20%;
    background-color: #ebebeb;
    box-shadow: 0 0.2vw 0.2vw -0.1vw #aaa;
}

.window__bar p {
    position: absolute;
    top: 20%;
    left: 1%;
    width: fit-content;
    color: #fff;
    font-size: 1.6vw;
    font-family: Chicago_Light;
}

.window__bar__i {
    position: absolute;
    top: 20%;
    right: 1%;
    display: flex;
    width: 6.4%;
}

.window__bar__i i {
    display: block;
    width: 2vw;
    aspect-ratio: 1 / 1;
    padding: 4.4%;
    text-align: center;
    background-color: #fff;
    box-shadow: -0.1vw -0.2vw inset rgba(0, 0, 0, .5);
    font-size: 1.4vw;
}

.window__bar__i i:hover {
    box-shadow: 0.1vw 0.1vw inset rgba(0, 0, 0, .5);
    background: #ccc;
}

.window__bar__i .fa-window-minimize {
    text-align: left;
    font-size: 1vw;
}

.window__contents {
    width: 95%;
    height: auto;
    margin: 0 auto;
    box-shadow: -0.15vw -0.15vw 0.2vw inset #aaa,
        0.15vw 0.15vw 0.1vw inset #aaa;
    background-color: #fff;
    padding: 0.5em;

    z-index: 8;
}

/* -------ウインドウ(共通)ここまで */

/* ////////////////////////////// */
/* メインビジュアル */
header {
    width: 100%;
}

header .desktop__frame {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: #ebebeb;
    box-shadow: -0.2vw -0.2vw inset #ccc,
        0.2vw 0.2vw inset #fff;
}

.desktop__frame .desktop {
    width: 96%;
    height: 90vh;
    margin: 0 auto;
    box-shadow: -0.15vw -0.15vw 0.2vw inset #aaa,
        0.15vw 0.15vw 0.1vw inset #aaa;
    background-image: url(../images/mv\(16-9\).jpg);
    background-size: cover;
    background-position: 0 40%;
    padding: 0.5em;
}

/* desktop__windowここから */
.desktop__window__frame {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%,20%);
    width: 60%;
    padding-bottom: 1.2%;
    box-shadow: -0.2vw -0.2vw inset #ccc,
        0.2vw 0.2vw inset #fff,
        0 0 1.5vw -0.5vw rgba(0, 0, 0, .5),
        2vw 2vw 0 #4b8bab;
    background-color: #ebebeb;
    opacity: 0;
    z-index: 10;

    animation: desktop__window-anime steps(1) 0.3s forwards;
}
@keyframes desktop__window-anime {
    100% {
        opacity: 1;
    }
}

.desktop__window__bar {
    display: flex;
    width: 100%;
    height: 3vw;
    margin: 0 auto;
    box-shadow: -0.2vw 0 inset #ccc,
        0.2vw 0.2vw inset #fff;
    background: linear-gradient(180deg, #069 0%, #069 65%, #ebebeb 35%, #ebebeb 100%);
}
.desktop__window__bar p {
    width: 90%;
    height: 2.2vw;
    line-height: 2.2vw;
    margin-left: 0.5em;
    color: #fff;
    font-size: 1.2vw;
    font-family: Chicago_Light;
}
.desktop__window__bar__i {
    display: flex;
    width: 4%;
    height: 1.6vw;
    margin-top: 0.45%;
}
.desktop__window__bar__i i {
    display: block;
    width: 2vw;
    aspect-ratio: 1 / 1;
    padding: 4.4%;
    text-align: center;
    background-color: #fff;
    box-shadow: -0.1vw -0.2vw inset rgba(0, 0, 0, .5);
    font-size: 1.4vw;
}
.desktop__window__bar__i i:hover {
    box-shadow: 0.1vw 0.1vw inset rgba(0, 0, 0, .5);
    background: #ccc;
}
.desktop__window__bar__i .fa-window-minimize {
    text-align: left;
    font-size: 1vw;
}

.desktop__window__contents {
    width: 91%;
    height: auto;
    margin: 0 auto;
    box-shadow: -0.15vw -0.15vw 0.2vw inset #aaa,
        0.15vw 0.15vw 0.1vw inset #aaa;
    background-color: #fff;
    padding: 3%;
}
/* ここまでdesktop__window */

h1 {
    width: 40%;
    margin: 0 auto;
    line-height: 1.6;
    font-size: 3vw;
}
h1 .typing-l1 {
    width: 5em;
    border-right: transparent;
    overflow: hidden;

    animation: typing-l1 0.8s steps(9),
        text-bar-l1 0.3s step-end alternate;
}
h1 .typing-l2 {
    width: 2em;
    border-right: transparent;
    overflow: hidden;

    animation: typing-l2 0.5s steps(3) forwards,
        text-bar-l2 0.3s step-end alternate;
    animation-delay: 0.8s;
    opacity: 0;
}
h1 .typing-l3 {
    width: 8em;
    border-right: 0.2vw solid #333;
    overflow: hidden;
    white-space: nowrap;

    animation: typing-l3 1s steps(13) forwards,
        text-bar-l3 0.5s step-end alternate infinite;
    animation-delay: 1.3s;
    opacity: 0;
}
@keyframes typing-l1 {
    from {
        width: 0
    }
}
@keyframes text-bar-l1 {
    50% {
        border-right: 0.2vw solid black;
    }
}
@keyframes typing-l2 {
    from {
        width: 0
    }

    1% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}
@keyframes text-bar-l2 {
    50% {
        border-right: 0.2vw solid black;
    }
}
@keyframes typing-l3 {
    from {
        width: 0
    }

    1% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}
@keyframes text-bar-l3 {
    50% {
        border-right: transparent;
    }
}

/* desktop__window-subここから */
.desktop__window__frame-sub {
    position: absolute;
    bottom: 55vh;
    left: 5%;
    width: 20%;
    padding-bottom: 1.2%;
    box-shadow: -0.2vw -0.2vw inset #ccc,
        0.2vw 0.2vw inset #fff,
        0 0 1.5vw -0.5vw rgba(0, 0, 0, .5);
    background-color: #ebebeb;
    opacity: 0;
    z-index: 1;

    animation: desktop__window-anime steps(1) 0.3s forwards;
}
.desktop__window__contents-sub {
    width: 88%;
    height: auto;
    margin: 0 auto;
    box-shadow: -0.15vw -0.15vw 0.2vw inset #aaa,
        0.15vw 0.15vw 0.1vw inset #aaa;
    background-color: #fff;
    padding: 8% 3%;
    text-align: center;
    font-size: 1.4vw;
    font-family: Nosutaru-dot;
}

.desktop__window__frame-sub-2 {
    position: absolute;
    top: 52vh;
    right: 10%;
    width: 33%;
    padding-bottom: 1.2%;
    box-shadow: -0.2vw -0.2vw inset #ccc,
        0.2vw 0.2vw inset #fff,
        0 0 1.5vw -0.5vw rgba(0, 0, 0, .5);
    background-color: #ebebeb;
    opacity: 0;
    z-index: 20;

    animation: desktop__window-sub-anime steps(6) 0.5s forwards;
    animation-delay: 2s;
}
@keyframes desktop__window-sub-anime {
    0% {
        transform: scale(0.6);
        transform-origin: bottom left;
        opacity: 0;
    }
    100% {
        transform: scale(1);
        transform-origin: bottom left;
        opacity: 1;
    }
}
.desktop__window__frame-sub-2 > .desktop__window__bar .desktop__window__bar__i {
    margin-top: 1%;
    margin-left: 93%;
}
.desktop__window__frame-sub-2 > .desktop__window__contents-sub p {
    width: 100%;
    text-align-last: left;
    white-space: pre-wrap;
    line-height: 1.4;
    font-size: 1.1vw;
    font-family: Zen_Kaku_Gothic_New;
}
/* ここまでdesktop__window-sub */

.desktop__files img {
    display: block;
    width: 80%;
    margin: 10%;
    filter: hue-rotate(180deg) drop-shadow(0px 0px 2px #fff);
}

.desktop__files-left {
    position: absolute;
    top: 3%;
    left: 3%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    width: fit-content;
}
.desktop__files-right {
    position: absolute;
    top: 3%;
    right: 3%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: fit-content;
}
.desktop__files-right img:nth-of-type(1) {
    grid-area: 1 / 1 / 2 / 2;
}
.desktop__files-right img:nth-of-type(2) {
    grid-area: 1 / 2 / 2 / 3; 
}
.desktop__files-right img:nth-of-type(3) {
    grid-area: 2 / 2 / 3 / 3; 
}

.desktop .desktop__window__scroll {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    height: 1.5vw;
    background-image: linear-gradient(90deg, #d4e9ff 0%, #bfd4eb 100%);

    background-position: 0% 0%;
    background-size: 3000px 100%;
    border: 1px solid #888;

    animation: grad-anime 2s steps(30) forwards;
    animation-delay: 2s;
}  
@keyframes grad-anime {
    0% {
        background-position: 0 0%;
    }
    100% {
        background-position: 3000px 0%;
    }
}

.desktop .desktop__window__scroll p {
    width: 98%;
    height: 1.5vw;
    line-height: 1.5vw;
    margin: 0 auto;
    letter-spacing: 0.1em;
    text-align: center;
    font-size: 1vw;
    opacity: 0;
    color: #888;
    font-family: Nosutaru-dot;

    animation: scroll-anime 2s steps(3) infinite;
    animation-delay: 3s;
}
.fa-caret-down {
    position: absolute;
    bottom: 5%;
    left: 0;
    width: 100%;
    text-align: center;
    color: #888;
    opacity: 0;

    animation: scroll-anime 2s steps(3) infinite;
    animation-delay: 3s;
}
@keyframes scroll-anime {
    30% {
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
}

/* ////////////////////////////// */
/* ヘッダーメニュー */

/* Gナビ */
.Gnav-window {
    /* Gナビ・固定 */
    position: fixed;
    top: 0;
    left: 91%;
    width: 10%;
    padding: 1% 0 1% 1%;
    background: linear-gradient(-90deg, transparent, #c8d7de 50%, #c8d7de 100%);
    box-shadow: 0 -0.2vw inset #ccc,
        0.2vw 0.2vw inset #eee,
        0px 0px 1.5vw -0.5vw rgba(0, 0, 0, .5);
    z-index: 1000;

    /* スクロールイベント */
    transform: translateX(120%);
}

/* Gナビ_中身 */
nav {
    width: fit-content;
}

nav ul {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-row-gap: 3px;
}

nav ul li {
    height: 6vw;
    aspect-ratio: 1 / 1;
    font-size: 1.2vw;
    font-family: Chicago_Light;

    background-color: #fff;
    box-shadow: -0.2vw -0.2vw 0.1vw inset rgba(0, 0, 0, .5),
        0px 0px 1vw -0.5vw rgba(0, 0, 0, .5);

}

nav ul li:hover {
    box-shadow: 0.1vw 0.1vw 0.2vw inset rgba(0, 0, 0, .5);
    background: #ccc;
}

nav ul li a {
    position: relative;
    display: block;
    margin: 0 auto;
    text-align: center;
}

nav ul li a img {
    display: block;
    width: 68%;
    margin: 0 auto;
}

nav ul li a .Gnav-list {
    display: block;
    line-height: 0.5;
    text-shadow: 1px 1px 1px #fff;
}

nav ul li a .Gnav-list span {
    font-size: 0.7vw;
    font-family: Nosutaru-dot;
    text-shadow: 1px 1px 1px #fff;
}

nav ul li a .Gnav-list span::before {
    content: "\A";
    white-space: pre;
}

/* 再生プレイヤー */
.music-player {
    position: fixed;
    bottom: 0;
    right: 0;
    padding-left: 1%;
    padding-right: 1%;
    border-radius: 2vw 0 0 2vw;
    background-color: #ffffff80;
    z-index: 100;

    /* スクロールイベント */
    transform: translateX(120%);
}
audio {
    display: none;
}
.audio-play {
    width: 100%;
}
.audio-play-img {
    position: relative;
}
.audio-play-img .fa-file-audio {
    position: absolute;
    bottom: 0;
    right: 10%;
    font-size: 3vw;
    color: #f96;

    z-index: 101;
}
.audio-play-img img {
    width: 70%;
    animation: disk__anime 10s infinite linear;
}
@keyframes disk__anime {
    100% {
        transform: rotate(360deg);
    }
}

.audio-play-controls {
    display: flex;
    justify-content: space-around;
}
#play, #stop {
    display: block;
    text-align: center;
    cursor: pointer;
}
#play span, #stop span {
    display: block;
    font-size: 1vw;
}
#play:hover i,
 #stop:hover i {
    color: #069;
}
.audio-play-controls i {
    text-align: center;
    font-size: 2vw;
    color: #555;
}

.audio-play p {
    text-align: center;
    font-size: 1vw;
}
/* ////////////////////////////// */
/* セクション共通 */
section {
    width: 100%;
    display: flex;
}

section .h2-area {
    position: relative;
    width: 6%;
    height: auto;

    background-image: url(../images/section_1.jpg);
}
section .h2-area::after {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 110%;
    height: 100%;
    border-right: 4px solid #BDDDF5;
}

section h2 {
    position: sticky;
    top: 20%;
    left: 5%;
    color: #fff;
    writing-mode: sideways-lr;
    font-size: 4vw;
}

.section-area {
    width: 80%;
    margin: 5% 10% 5% 4%;
}

/* セクション1-プロフィール */
.section-1-wrap {
    display: flex;
    width: 90%;
    margin: 5%;
    align-items: center;
}

.section-1-inner_img {
    display: block;
    width: 30%;

    /* スクロールイベント */
    transform: translateY(20%);
    opacity: 0;
}

.section-1-inner_txt {
    width: 65%;
    margin-left: 5%;
}

.section-1-inner_txt h3 {
    width: 60%;
}

.line {
    position: relative;
    width: 92%;
    height: 3px;
    margin-bottom: 5%;
    background: linear-gradient(90deg, #d4e9ff 0%, #f7dec6 100%);
    /* スクロールイベント */
    transform: scaleX(0);
    transform-origin: left;
}
.line::after {
    position: absolute;
    top: 50%;
    right: -1%;
    transform: translateY(-50%);
    content: "\025cf";
    color: #f7dec6;
    font-size: 1.8vw;
}
.line-2 {
    position: relative;
    width: 50%;
    height: 3px;
    margin-bottom: 5%;
    margin-left: 2.5%;
    background-color: #BDDDF5;
    /* スクロールイベント */
    transform: scaleX(0);
    transform-origin: left;
}
.line-2::after {
    position: absolute;
    top: 50%;
    right: -6%;
    transform: translateY(-50%);
    content: "\025bc";
    color: #BDDDF5;
    font-size: 1.6vw;

    animation: line__down-anime 2s infinite;
    animation-delay: 1s;
}
@keyframes line__down-anime {
    60% {
        transform: translateY(-30%);
    }
    100% {
        transform: translateY(-50%);
    }
}

.section-1-inner_txt p {
    width: 95%;
    margin-top: 1em;
    line-height: 2;
    white-space: pre-wrap;
    text-align: justify;
    text-indent: 1em;
}

/* セクション2-スキル */
#skill h3 {
    margin: 1% 1% 0 1%;
}

.section-2-wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2%;
}

.section-2-inner {
    width: 30%;
    padding: 2%;
    border-left: 2px dotted #ccc;
}

.section-2-inner:nth-of-type(1) {
    border-left: transparent;
}

.section-2-inner_flex {
    display: flex;
    width: 100%;
    margin: 0 auto 5% auto;
    align-items: center;
}

.section-2-inner_flex img {
    display: block;
    width: 20%;
    margin: 0 auto;
}

.section-2-inner_flex h4 {
    width: 77%;
    padding-left: 3%;
    font-weight: normal;
    font-size: 1.6vw;
}

.section-2-inner ul {
    display: flex;
    width: 80%;
    flex-wrap: wrap;
}

.section-2-inner ul li {
    position: relative;
    width: fit-content;
    height: 1.6vw;
    line-height: 1.6vw;
    padding: 0 1em 0 1.2em;
    margin-right: 3%;
    margin-bottom: 2%;
    border-radius: 2vw;
    cursor: default;
    color: #fff;
    background-color: #069;
}

.section-2-inner ul li::before {
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    content: "";
    width: 0.5vw;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: #fff;
}

.section-2-inner>p:nth-of-type(1) {
    margin-top: 8%;
    line-height: 1.6;
    white-space: pre-wrap;
}

.section-2-inner>p:nth-of-type(2) {
    margin-top: 8%;
    font-size: 1vw;
}

.section-2-inner_skill-2_flex {
    display: flex;
    align-items: center;
    margin-top: 3%;
}

.section-2-inner_skill-2_flex img {
    width: 13%;
    margin-right: 3%;
}

.section-2-inner_skill-2_flex p {
    line-height: 1.2;
    font-size: 1vw;
}
.section-2-inner_skill-2_flex p span {
    display: block;
}

/* セクション3-制作物 */
#works h3 {
    margin: 1% 1% 0 1%;
}

.works-icons {
    /* 制作物別リンクアイコン */
    display: flex;
    align-items: center;
    width: 80%;
    margin-left: 20%;
    height: 4vw;
}
.works-icons a {
    display: block;
    height: 3vw;
    margin-left: 2%;
    text-align: center;
}
.fa-square-up-right {
    display: block;
    margin-top: 3%;
    margin-left: 0.2em;
    font-size: 0.8vw;
    color: #fff;
}
.works-icons a img {
    display: block;
    width: 100%;
    height: 3vw;
    margin: 0 auto;
    filter: drop-shadow(0 3px 1px #888);
    transition: 0.2s;
}
.works-icons a:hover img {
    filter: drop-shadow(0 0 0 #888);
    transform: translateY(5%);
    transition: 0.5s;
}

.section3-flex {
    display: flex;
    width: 100%;
    margin-bottom: 5%;
    align-items: center;
    font-size: 1.3vw;
}
.section3-flex img {
    width: 4%;
    margin-left: auto;
}
.loupe {
    /* スクロールイベント */
    transform: scaleX(0);
}
.loupe-p {
    width: fit-content;
    margin-right: auto;
    /* スクロールイベント */
    transform: translateY(30%);
    opacity: 0;
}

#works h4 {
    display: flex;
    width: 95%;
    margin: 5% auto 2% auto;
    align-items: center;
}

#works h4 img {
    display: block;
    width: 5%;
    margin-right: 0.5em;
}

#works .between-img {
    display: flex;
    width: 15%;
    margin: 0 auto;
}
#works .between-img img {
    display: block;
    width: calc( 100% / 3 );
    filter: hue-rotate(160deg);

    animation: planet__1-anime 7s linear infinite;
}
@keyframes planet__1-anime {
    100% {
        transform: rotate(360deg);
    }
}
#works .between-img img:nth-of-type(2) {
    filter: hue-rotate(260deg);

    rotate: 80deg;
    animation: planet__2-anime 10s linear infinite;
}
@keyframes planet__2-anime {
    100% {
        transform: rotate(360deg);
    }
}
#works .between-img img:nth-of-type(3) {
    filter: hue-rotate(360deg);

    rotate: -10deg;
    animation: planet__3-anime 8.5s linear infinite;
}
@keyframes planet__3-anime {
    100% {
        transform: rotate(-360deg);
    }
}

.section-3-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 98%;
    margin: 0 auto;
    padding-bottom: 5%;
}
.section-3-wrap figure {
    width: 82%;
    height: fit-content;
    padding: 9%;
}
.section-3-wrap figure > a {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 3%;
    border: 2px solid #ccc;
    box-shadow: 0.2vw 0.2vw 0.2vw #eee,
        -0.2vw -0.2vw 0.2vw #eee;
    background-color: #fff;

    transition: 0.2s;
}
.section-3-wrap figure > a:hover {
    filter: contrast(80%);
    transform: translateY(1%);
    transition: 0.5s;
}
.section-3-wrap figure > a > img:nth-of-type(1) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.section-3-wrap figure > a > img:nth-of-type(2) {
    position: absolute;
    bottom: -5%;
    right: -3%;
    width: 15%;
}

.section-3-wrap figure figcaption p span {
    width: fit-content;
    height: 1.6vw;
    line-height: 1.6vw;
    padding: 0 1em;
    margin-right: 2%;
    border-radius: 2vw;
    cursor: default;
    font-size: 1.2vw;
    color: #fff;
    background-color: #069;
}
.section-3-wrap figure figcaption p .figure-category {
    background-color: #6c6;
}
.section-3-wrap figure figcaption p:nth-of-type(2) {
    padding: 2% 0;
    border-bottom: 2px dotted #ccc;
    font-size: 1.4vw;
}
.section-3-wrap figure figcaption p:nth-of-type(3) {
    padding-top: 2%;
    font-size: 1.2vw;
}

/* モーダルウィンドウここから */
.featherlight__content {
    display: none;
}
.featherlight__content .featherlight-flex {
    display: flex;
    margin: 1% 2%;
}
.featherlight__content .featherlight-flex .featherlight-img {
    width: 45%;
    aspect-ratio: 1 / 1 ;
}
.featherlight-img img {
    display: flex;
    width: 100%;
    filter: drop-shadow(2px 2px 3px #555);
}

.featherlight__content .featherlight-flex .featherlight-caption__wrap {
    width: 50%;
    height: fit-content;
    margin-left: 5%;
    padding: 1%;
    border-radius: 1vw;

    background-color: rgba(182, 165, 153, 0.08);
}
.featherlight-caption__wrap > p:nth-of-type(1) {
    /* タイトル */
    position: relative;
    top: 0;
    left: 3%;
    margin-bottom: 0.5em;
    white-space: pre-wrap;
    font-weight: bold;
    font-size: 2.2vw;
}
.featherlight-caption__wrap > p:nth-of-type(1)::before {
    position: absolute;
    top: 0;
    left: -3%;
    content: "";
    width: 2%;
    height: 100%;

    background-color: #ccc;
}
.featherlight-caption__wrap > p:nth-of-type(2) {
    /* 概要 */
    font-size: 1.4vw;
    margin-left: 1em;
    padding-bottom: 1em;
}
.featherlight-caption__1 {
    display: flex;
    align-items: center;
    width: 98%;
    padding-bottom: 5%;
}
.featherlight-caption__wrap .featherlight-caption__1 > p {
    /* テーマ、ターゲット */
    width: 72%;
    margin-left: 3%;
    white-space: pre-wrap;
}
.featherlight-caption__wrap .featherlight-caption__1 > span {
    display: block;
    width: 22%;
    height: 3vw;
    line-height: 3vw;
    border-radius: 2vw;
    cursor: default;
    text-align: center;
    font-weight: bold;
    color: #fff;
    background-color: #f96;
}
.featherlight-caption__2 {
    width: 100%;
    padding-top: 5%;
    border-top: 2px dashed #ccc;
}
.featherlight-caption__2 > span {
    display: block;
    width: 25%;
    height: 2vw;
    line-height: 2vw;
    cursor: default;
    text-align: center;
    color: #fff;
    background-color: #39c;
}
.featherlight-caption__2 > p {
    /* デザイン説明 */
    width: 93%;
    margin: 1.5% 0 1.5% 7%;
    font-weight: normal;
    font-size: 1.2vw;
    white-space: pre-wrap;
}
.featherlight-caption__2 > p::before {
    content: "\02714";
    margin-left: -1em;
    margin-right: 0.2em;
    color: #39c;
}
.featherlight-caption__wrap > p:nth-of-type(3) {
    /* 制作時間 */
    font-size: 1.4vw;
    text-align: right;
}

/* ここまでモーダルウィンドウ */

/* 名刺サムネイル画像-枠線 */
.business-card__img {
    filter: drop-shadow(2px 2px 3px #555);
}

/* ポスター画像サイズ・枠線 */
.works-poster {
    width: 45%;
    height: fit-content;
    aspect-ratio: 1 / 1;
}
.works-poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(2px 2px 3px #555);
}

/* フォトショップ-レタッチ */
.retouch-img {
    position: relative;
    width: 80%;
    margin: 0 auto;
}
.retouch-img span {
    display: block;
    width: 20%;
    height: 2.5vw;
    line-height: 2.5vw;
    margin-bottom: 0.5em;
    border-radius: 1vw;
    cursor: default;
    text-align: center;
    color: #fff;
    background-color: #39c;
}
.retouch-img img {
    width: 100%;
}
.retouch-img p {
    width: 100%;
    margin-left: 1em;
}
.retouch-img p::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 2%;
    height: 100%;
    background-color: #f96;
}

/* サイト制作 */
.Web-site figure > a > img:nth-of-type(1) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.web-site__notes {
    width: fit-content;
    padding: 0 1em;
    color: #fff;
    background-color: #933;
}

.featherlight-caption__wrap .featherlight-caption__1-WebSite {
    display: flex;
    align-items: center;
    width: 98%;
    padding-bottom: 5%;
}
.featherlight-caption__1-WebSite > span {
    display: block;
    width: 15%;
    height: 4vw;
    line-height: 4vw;
    border-radius: 1vw;
    cursor: default;
    text-align: center;
    font-weight: bold;
    font-size: 1.3vw;
    color: #fff;
    background-color: #f96;
}
.featherlight-caption__1-WebSite > a {
    width: 72%;
    margin-left: 3%;
    text-decoration: underline;
    white-space: pre-wrap;
}
.featherlight-caption__1-WebSite > a:hover {
    color: #f96;
    transition: 0.2s;
}
.featherlight-caption__1-WebSite > p {
    display: block;
}

.featherlight-caption__2-Website-span {
    background: linear-gradient(-30deg, #39c 0%, #39c 75%, #cc0 75%, #cc0 100%);
}

/* サイト制作-タブ切り替え */
.featherlight-img > p {
    line-height: 2;
    font-size: 1vw;
}
.featherlight-img > p .fa-angles-down {
    margin-right: 0.2em;
    color: #f96;
}
/* タブ */
.tab-area {
    display: flex;
    width: 100%;
}

.tab-area__inner27 {
    /* 水族館タブ */
    display: flex;
    flex-wrap: wrap;
}
.tab-area__inner27 li:first-child {
    width: 100%;
}
.tab-area__inner27 li:nth-child(2) ~ li:nth-child(4) {
    width: calc( 100% / 3 );
}

.tab {
    width: fit-content;
    padding: 0.2em 0.5em;
    margin-right: 1em;
    margin-bottom: 3%;
    border: 1px solid #888;
    cursor: pointer;
    background-color: #fff;
}
.tab.active {
    filter: contrast(60%);
    transform: translate(0%, 8%);
}

/* パネル */
.panel {
    display: none;
    margin: 0 auto;
}
.panel.active {
    display: block;

    animation: panel-active__anime 0.6s;
}
@keyframes panel-active__anime {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* セクション4-コンタクト */
#contact .section-area {
    padding-bottom: 10%;
}

.section-4-wrap {
    display: flex;
    width: 90%;
    margin: 5%;
    align-items: center;
}
.anime-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 20%;
    margin-left: 5%;
    margin-right: 10%;
    aspect-ratio: 1 / 1 ;
    border: 2px solid #39c;
    border-radius: 50%;
}
.anime-container p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 80%;
    text-align: center;
    border-bottom: 1px solid #39c;
    color: #39c;
    font-family: Chicago_Light;
}

.anime-square {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;

    animation: contact-planet__anime 8s infinite linear;
}
@keyframes contact-planet__anime {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
}
.anime-square:nth-of-type(1) span {
    position: absolute;
    bottom: 0;
    right: 0;
    display: block;
    width: 30%;
    aspect-ratio: 1 / 1 ;
}
.anime-square:nth-of-type(2) span {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 30%;
    aspect-ratio: 1 / 1 ;
}
.anime-square img {
    display: block;
    width: 100%;
    filter: hue-rotate(170deg);

    animation: contact-planet__anime-2 8s infinite linear;
} 
@keyframes contact-planet__anime-2 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-360deg);
    }
}

.section-4_txt {
    width: 60%;
}

.contact-wrap {
    width: fit-content;
}

input {
    display: block;
    width: fit-content;
    margin: 3% auto;
    padding: 2% 8%;
    border: 1px solid #888;
    border-radius: 20vw;
    text-align: center;
    color: #333;
    background: linear-gradient(45deg, #d4e9ff80 0%, #f7dec680 100%);
    font-size: 1.6vw;
    font-family: Zen_Kaku_Gothic_New;

    /* スクロールイベント */
    transform: translateY(20%);
    opacity: 0;
}
input:focus {
    outline: 0;
}

.contact-inner {
    display: flex;
    width: 65%;
    margin: 0 auto;
    justify-content: space-between;
}
.contact-inner button {
    /* テキストコピー */
    width: fit-content;
    border: transparent;
    background-color: transparent;
    color: #333;
    cursor: pointer;
    font-size: 1.1vw;
    font-family: Zen_Kaku_Gothic_New;
}
.contact-inner button:hover {
    text-decoration: underline;
    color: #069;
}

.contact-inner a {
    /* メーラー起動 */
    width: fit-content;
    text-align: center;
    font-size: 1.1vw;
}
.contact-inner a:hover {
    text-decoration: underline;
    color: #069;
}

.contact-inner button .fa-copy,
.contact-inner a .fa-arrow-up-right-from-square {
    margin-right: 0.2em;
    font-size: 1.4vw;
}

/* フッター */
footer {
    position: relative;
    display: flex;
    height: 5vw;
    align-items: center;
    background-color: #fff;
    font-family: Chicago_Light;
}

footer ul {
    display: flex;
    width: 45%;
    margin-left: 5%;
    align-items: center;
}
footer ul li {
    width: fit-content;
    margin-right: 15%;
    font-size: 1.3vw;
}
footer ul li a {
    color: #555;
}
footer ul li a:hover {
    text-decoration: underline;
    color: #069;
}
footer p {
    width: 50%;
}
footer p small {
    display: block;
    font-size: 1vw;
    color: #888;
}

/* elemアニメーション */
.isAnimate {
    transform: translate3d(0, 0, 0);
    transform: scaleX(1);
    opacity: 1;
    transition: 1s;
}