@charset "UTF-8";

/* font-family: "lust-script", sans-serif;
font-weight: 700;
font-style: normal;

font-family: "lust-script-display", sans-serif;
font-weight: 400;
font-style: normal;

font-family: "lust-script-fine", sans-serif;
font-weight: 100;
font-style: normal;

font-family: "source-han-sans-jp-variable", sans-serif;
font-variation-settings: "wght" 250; */

/* top-page */

@media screen and (min-width: 900px) {

    /* ハンバーガーメニュー */
    label {
        display: none;
    }


    /* ローディング */
    /* Loading背景画面設定　*/
    #splash {
        /*fixedで全面に固定*/
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 999;
        background: #74BFF7;
        text-align: center;
        color: #fff;
    }

    /* Loading画像中央配置*/
    #splash_logo {
        position: absolute;
        top: 50%;
        left: 63%;
        transform: translate(-50%, -50%);
    }

    /* Loading アイコンの大きさ設定　*/
    #splash_logo svg {
        width: 200%;
    }

    /*=============== SVGアニメーション内の指定 =================*/

    /*アニメーション前の指定*/
    #mask path {
        fill-opacity: 0;
        /*最初は透過0で見えない状態*/
        transition: fill-opacity .5s;
        /*カラーがつく際のアニメーション0.5秒で変化*/
        fill: none;
        /*塗りがない状態*/
        stroke: rgb(255, 255, 255);
        /*線の色*/
    }

    /*アニメーション後に.doneというクラス名がで付与された時の指定*/
    #mask.done path {
        fill: rgb(255, 255, 255);
        /*塗りの色*/
        fill-opacity: 1;
        /*透過1で見える状態*/
        stroke: none;
        /*線の色なし*/
    }

    /*========= レイアウトのためのCSS ===============*/

    #container {
        width: 100%;
        height: 100vh;
        background: #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    a {
        color: rgb(255, 255, 255);
    }

    a:hover {
        text-decoration: none;
    }

    /* 背景キラキラ */

    .top-main-visual {
        background: url(/images/top.jpg) no-repeat center;
        background-size: cover;
        height: 100vh;
        background-color: #74BFF7;
    }


    .gnav-wrap {
        width: 100%;
        justify-content: space-between;
        align-items: center;
        display: flex;
        position: fixed;
        z-index: 100;
        /* background-color: aqua; */
    }

    .gnav-img {
        width: 30%;
    }

    .site-logo {
        width: 70px;
        margin: 5%;
        opacity: 0.5;
    }

    .site-logo-blue {
        opacity: 0.8;
    }

    .site-logo-skyblue {
        display: none;
    }

    .site-logo-gray {
        display: none;
    }

    .site-logo-white {}

    .gnav {
        width: 20%;
        /* background-color: bisque; */
        margin-right: 2%;
    }

    .gnav-ul {
        display: flex;
        justify-content: space-between;
        width: 100%;
        /* background-color: rgb(150, 150, 173); */
    }

    .gnav-li {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 300;

    }

    .gnav-link {
        text-decoration: none;
        color: #fff;
    }

    .gnav-link-blue {
        color: #0067BF;
    }



    .gnav-li-blue {
        color: #0067BF;
    }

    .gnav-li-white {
        color: #ffffff;
    }

    .active {
        color: #0067BF;
    }

    .main-visual-content {
        width: 60%;
        margin: 0 auto;
        padding: 10%;
        /* background-color: bisque; */
    }

    .main-visual-name {
        font-family: "lust-script", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 90px;
        color: #fff;
        opacity: 0.9;
    }

    .name_2 {
        text-align: center;
        margin: 3% 0;
    }

    .name_3 {
        text-align: right;
        font-size: 65px;
    }

    /* about */

    .about-container {
        padding-top: 5%;
    }

    .title-section {
        display: flex;
        align-items: center;
        margin: 0 5%;
        padding-top: 7%;
        border-bottom: 1px solid #0067BF;
    }

    .top-title {
        font-family: "lust-script", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: #0067BF;
        font-size: 60px;
    }

    .top-subtitle {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 300;
        color: #0067BF;
        margin-left: 2%;
    }

    .top-about-wrap {
        display: flex;
        width: 80%;
        justify-content: space-between;
        align-items: center;
        /* background-color: aquamarine; */
        margin: 15% auto;
    }

    .profile-img {
        width: 35%;
        min-width: 280px;
    }

    .about-section {
        /* background-color: chartreuse; */
        width: 60%;
    }

    .about-name {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        font-size: 25px;
        color: #0067BF;
        margin-bottom: 5%;
    }

    .about-name-small {
        font-size: 15px;
    }

    .about-content {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 330;
        font-size: 15px;
        color: #0067BF;
        line-height: 32px;
    }

    /* skills */

    .skills-area {
        background-color: #74BFF7;
        /* height: 500px; */
    }

    .title-section-white {
        display: flex;
        align-items: center;
        margin: 0 5% 0 5%;
        padding-top: 9%;
        border-bottom: 1px solid #ffffff;
    }

    .top-title-white {
        font-family: "lust-script", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: #ffffff;
        font-size: 60px;
    }

    .top-title-small {
        font-size: 40px;
        margin-bottom: 10px;
    }

    .top-subtitle-white {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 300;
        color: #ffffff;
        margin-left: 2%;
    }

    .slills-wrap {
        width: 50%;
        margin: 10% 15% 10% auto;
    }

    .slills-wrap_2 {
        width: 50%;
        margin: 0 auto 0 15%;
        padding-bottom: 15%;
    }

    .skills-inner-title {
        font-family: "lust-script", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: #ffffff;
        font-size: 40px;
        margin-bottom: 3%;
    }

    .skills-inner-content {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 330;
        color: #fff;
        font-size: 16px;
        line-height: 30px;
    }

    /* works */

    .works-area {
        /* height: 800px; */
        background-image: url(/images/sky.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .works-wrap {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 80%;
        height: auto;
        /* background-color: #74BFF7; */
        margin: 5% auto 0 auto;
        padding-bottom: 10%;
    }

    .works-inner-wrap {
        width: 30%;
        list-style: none;
        /* background-color :aqua; */
    }

    .works-link {
        text-decoration: none;
    }

    .works-img {
        width: 100%;
        margin-bottom: 7%;
        /* background-color: #74BFF7; */
    }

    .works-img-banner {
        width: 70%;
        display: block;
        margin: 0 auto 7% auto;
    }

    .works-img-banner2 {
        width: 70%;
        display: block;
        margin: -70% auto 7% auto;
    }

    .works-img-youtube {
        width: 80%;
        display: block;
        margin: -70% auto 7% auto;
    }

    .works-content-category {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 330;
        color: #fff;
        font-size: 13px;
        margin-bottom: 10px;
    }

    .works-content {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 330;
        color: #fff;
        font-size: 15px;
        margin-bottom: 25%;
    }

    /* footer */
    .global-footer {
        background-color: #1B1F22;
        padding: 10%;
    }

    .global-footer-section {
        display: flex;
        justify-content: center;
        border-bottom: 0.5px solid #fff;
        /* padding: 10%; */
    }

    .footer-title {
        font-family: "lust-script", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 30px;
        color: #fff;
        line-height: 50px;
        margin-right: 30px;
    }

    .footer-address {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 330;
        color: #fff;
        font-size: 35px;
        text-decoration: none;
    }

    .footer-address:hover {
        color: #74BFF7;
        transition: 0.3s;
    }

    .cppyright {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 330;
        color: #fff;
        font-size: 12px;
        text-align: end;
        margin-top: 10px;
    }

    /* About-page */

    .title-blue {
        width: 20%;
        margin: 0 auto;
        padding: 10% 0 5% 0;
        color: #0067BF;
        /* background-color: #74BFF7; */
    }

    .about-page-comment {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 500;
        color: #0067BF;
        font-size: 28px;
        text-align: center;
        margin-bottom: 8%;
    }

    .profile-img_2 {
        width: 30%;
        min-width: 190px;
    }

    .about-wrap {
        display: flex;
        width: 70%;
        justify-content: space-between;
        align-items: center;
        /* background-color: aquamarine; */
        margin: 0 auto;
        margin-bottom: 10%;
    }

    /* biorgaphy */

    /* .side-scroll-list-wrapper {
    position: relative;
    width: 200%;
    height: 300px;
    background-color: #74BFF7;
  }
  
  .side-scroll-list {
    position: absolute;
    display: flex;
    background-color: #0e5790;
  } */


    .side-scroll-list-wrapper {
        /* background-color: aqua; */
        position: relative;
        width: 100%;
        height: 100vh;
        background-image: url(/images/cloud.jpg);
        background-repeat: no-repeat;
        /* background-size: 100%; */
        background-size: cover;
    }

    .side-scroll-list {
        position: absolute;
        top: 230px;
        left: 0;
        display: flex;
        gap: 0 70px;
        margin-left: 0;
        height: 100vh;
    }

    .side-scroll-item {
        display: flex;
        flex-direction: column;
        /* align-items: center; */
        justify-content: space-around;
        width: 500px;
        height: 350px;
        background-color: #ffffff;
        background-color: rgba(255, 255, 255, 0.9);
        background-blend-mode: lighten;
        color: #1b1717;
        font-size: 32px;
        font-weight: 700;
        padding: 30px 30px;
        box-sizing: border-box;
        border-radius: 5%;
    }

    .side-scroll-item-liststyle {
        list-style: none;
    }

    /* .side-scroll-item+.side-scroll-item {
    margin-left: 60px;
} */

    .biography-title {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 250;
        color: rgb(0, 0, 0);
        font-size: 16px;
        line-height: 30px;
    }

    .biography-comment {
        /* height: 100%; */
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 250;
        color: rgb(0, 0, 0);
        font-size: 14px;
        line-height: 30px;
        /* background-color: #1B1F22; */
    }



    /* Strength */

    .Strength-area {
        background-color: #E2F5FF;
        /* height: 800px; */
    }

    /* works-page */
    .title-margin {
        padding-bottom: 0;
        color: #fff;
    }

    .title-black {
        color: #000;
    }


    .site-name-wrap {
        /* background-color: #74BFF7; */
        height: 110px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 3% auto 3% 6%;
    }

    .site-name {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 300;
        color: #000000;
        font-size: 40px;
        margin-bottom: 1%;
    }


    .site-name-sideber {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        color: #797979;
        font-size: 15px;
        line-height: 25px;
    }

    .site-url {
        color: #797979;
        text-decoration: none;
        background-image: linear-gradient(#797979, #797979);
        background-size: 0 1px;
        background-position: left bottom;
        background-repeat: no-repeat;
        transition: all .3s;
    }

    .site-url:hover {
        background-size: 100% 1px;
        border-bottom: none;
    }


    .banner-wrap {
        display: flex;
        justify-content: space-between;
        width: 600px;
        height: 457px;
        margin: 10% auto;
        /* background-color: #0067BF; */

    }

    .banner-wrap-flex {
        width: 350px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* background-color: #74BFF7; */
    }

    .left-banner {
        width: 100%;
    }

    .left-banner2 {
        width: 120%;
        margin-top: 10%;
    }

    .right-banner {
        display: block;
    }

    .site-img-wrap {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 80%;
        /* height: 460px; */
        margin: 8% auto;
        /* background-color: #74BFF7; */
    }

    .site-img-li {
        width: 17%;
        height: auto;
        /* background-color: #797979; */
        margin-top: 5%;
    }

    .site-img {
        width: 100%;
    }

    .site-img2-li {
        width: 70%;
        /* background-color: #0067BF; */
    }

    .site-img2 {
        width: 100%;
    }

    .banner-sp {
        display: block;
        width: 30%;
        margin: 0 auto;
    }

    .youtube-thumbnail {
        display: block;
        width: 90%;
        margin: 0 auto;
    }

    .youtube-thumbnail_2 {
        display: block;
        width: 70%;
        margin: 10% auto;
    }

    .site-article-wrap {
        width: 70%;
        margin: 10% auto;
        /* background-color: #74BFF7; */
    }

    .site-article-section {
        width: 100%;
        /* background-color: #797979; */
        height: 120px;
    }

    .site-article-short {
        height: 80px;
    }


    .site-article-svg {
        height: 150px;
        /* background-color: rgb(127, 169, 206); */
    }

    .site-article-svg_2 {
        height: 180px;
    }

    .color-chart-svg {
        width: 100%;
    }

    .site-article-content-left {
        width: 20%;
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        color: #000000;
        font-size: 15px;
        line-height: 25px;
    }

    .site-article-content-right {
        width: 60%;
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        color: #000000;
        font-size: 15px;
        line-height: 25px;
        /* background-color: aqua; */
    }

    .circle-section {
        background-color: #ffd7e8;
        width: 1000px;
        margin: 0 auto;
        /* display: flex;
    justify-content: space-between; */
        position: relative;
    }

    .circle-section2 {
        display: none;
    }

    .circle-section3 {
        display: none;
    }



    .circle-anima {
        opacity: 0;
    }

    .circle-animation {
        opacity: 1;
        stroke-dasharray: 614;
        stroke-dashoffset: 614;
        animation: dash 2s ease-in-out forwards;
        /* transform: rotate(-90deg); */
        transform-origin: 50% 50%;
    }

    .circle-animation-right {
        stroke-dashoffset: -614;
    }

    @keyframes dash {
        to {
            stroke-dashoffset: 0;
        }
    }

    //以下関係ないCSS

    body {
        background-color: #000;
    }

    /* .circle-wrapper-sp {
    background-color: hotpink;
    outline:1px solid #fff;
    position: relative;

} */

    .circle-wrapper-sp1 {
        position: absolute;
        top: 0;
        left: 140px;
    }


    .circle-wrapper-sp2 {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    .circle-wrapper-sp3 {
        position: absolute;
        top: 0;
        right: 140px;
    }

    .circle-text1 {
        position: absolute;
        left: 243px;
        top: 190px;
        margin: auto;
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        color: #0067BF;
        font-size: 20px;
    }

    .circle-text2 {
        position: absolute;
        left: 468px;
        top: 190px;
        margin: auto;
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        color: #0067BF;
        font-size: 20px;
    }

    .circle-text3 {
        position: absolute;
        left: 665px;
        top: 190px;
        margin: auto;
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        color: #0067BF;
        font-size: 20px;
    }



    .strength-article-container {
        /* margin-top: 400px; */
        width: 80%;
        /* background-color:#ffd7e8 ; */
        margin: 0 auto auto auto;
        padding-bottom: 5%;
    }

    .strength-article-section-margin {
        margin-top: 400px;
    }

    .strength-article-section {
        width: 100%;
        display: flex;
        border-bottom: 1.5px solid #0067BF;
        /* width: 90%; */
        /* background-color: #E2F5FF; */

    }

    .article-number {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        color: #0067BF;
        font-size: 20px;
        line-height: 45px;
        margin-left: 10px;
    }

    .article-title {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        color: #0067BF;
        font-size: 27px;
        line-height: 40px;
        margin-left: 20px;
    }

    .article-content {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        color: #0067BF;
        font-size: 16px;
        line-height: 28px;
        width: 70%;
        margin: 2% 0 0 auto;
        /* background-color: #74BFF7; */
    }

    .strength-article-container-padding {
        padding-bottom: 10%;
    }

    .glowAnime span {
        opacity: 0;
        font-family: "lust-script", sans-serif;
        font-weight: 700;
        font-style: normal;
    }

    /* ブラー */
    .circle-blur {
        opacity: 0;
    }

    /* circleブラー */
    .blur {
        opacity: 1;
        animation-name: blurAnime;
        animation-duration: 2s;
        animation-fill-mode: forwards;
    }

    @keyframes blurAnime {
        from {
            filter: blur(5px);
            transform: scale(1.02);
        }

        to {
            filter: blur(0);
            transform: scale(1);
        }
    }


    /* タイトルキラキラ */
    /*アニメーションで透過を0から1に変化させtext-shadowをつける*/
    .glowAnime.glow span {
        animation: glow_anime_on 1s ease-out forwards;
    }

    @keyframes glow_anime_on {
        0% {
            opacity: 0;
            text-shadow: 0 0 0 #fff, 0 0 0 #fff;
        }

        50% {
            opacity: 1;
            text-shadow: 0 0 10px #fff, 0 0 15px #fff;
        }

        100% {
            opacity: 1;
            text-shadow: 0 0 0 #fff, 0 0 0 #fff;
        }
    }

    /* works 画像ズーム */
    .zoomIn img {
        transform: scale(1);
        transition: .3s ease-in-out;
        /*移り変わる速さを変更したい場合はこの数値を変更*/
    }

    .zoomIn a:hover img {
        /*hoverした時の変化*/
        transform: scale(1.1);
        /*拡大の値を変更したい場合はこの数値を変更*/
    }



    /* 斜めから出てくる文字 */
    .smoothText {
        overflow: hidden;
        display: block;
    }

    /* アニメーションで傾斜がついている文字列を水平に戻す*/
    .smoothTextTrigger {
        transition: 2.0s ease-in-out;
        transform: translate3d(0, 100%, 0) skewY(12deg);
        transform-origin: left;
        display: block;
        font-family: "lust-script", sans-serif;
        font-weight: 700;
        font-style: normal;
        padding-top: 10px;
    }

    .smoothTextTrigger.smoothTextAppear {
        transform: translate3d(0, 0, 0) skewY(0);
    }

    /* じわっと文字 */
    .blur2 {
        animation-name: blurAnime;
        animation-duration: 1s;
        animation-fill-mode: forwards;
    }

    @keyframes blurAnime {
        from {
            filter: blur(10px);
            transform: scale(1.1);
            opacity: 0;
        }

        to {
            filter: blur(0);
            transform: scale(1);
            opacity: 1;
        }
    }

    .blurTrigger {
        opacity: 0;
    }

    /* スケール小さいブラー */
    .blur3 {
        animation-name: blurAnime;
        animation-duration: 0.8s;
        animation-fill-mode: forwards;
    }

    @keyframes blurAnime {
        from {
            filter: blur(5px);
            transform: scale(1.0);
            opacity: 0;
        }

        to {
            filter: blur(0);
            transform: scale(1);
            opacity: 1;
        }
    }

    .blurTrigger2 {
        opacity: 0;
    }


    /*==================================================
ふわっ
===================================*/
    /* fadeUp */

    .fadeUp {
        animation-name: fadeUpAnime;
        animation-duration: 1.0s;
        animation-fill-mode: forwards;
        opacity: 0;
    }

    @keyframes fadeUpAnime {
        from {
            opacity: 0;
            transform: translateY(100px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
    .fadeUpTrigger {
        opacity: 0;
    }


    /* work-1 */
    .site-thumb-img-wrap {
        display: flex;
        width: 80%;
        justify-content: space-between;
        margin: 0 auto;
    }

    .site-thumb-img {
        width: 100%;
        margin-bottom: 2%;
    }

    .site-thumb-section-pc {
        width: 60%;
    }

    .site-thumb-section-sp {
        width: 30%;
    }

}




/* tablet */

@media screen and (min-width:500px) and (max-width:899px) {

    /* ハンバーガーメニュー */
    label {
        display: none;
    }

    /* ローディング */
    /* Loading背景画面設定　*/
    #splash {
        /*fixedで全面に固定*/
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 999;
        background: #74BFF7;
        text-align: center;
        color: #fff;
    }

    /* Loading画像中央配置*/
    #splash_logo {
        position: absolute;
        top: 50%;
        left: 63%;
        transform: translate(-50%, -50%);
    }

    /* Loading アイコンの大きさ設定　*/
    #splash_logo svg {
        width: 200%;
    }

    /*=============== SVGアニメーション内の指定 =================*/

    /*アニメーション前の指定*/
    #mask path {
        fill-opacity: 0;
        /*最初は透過0で見えない状態*/
        transition: fill-opacity .5s;
        /*カラーがつく際のアニメーション0.5秒で変化*/
        fill: none;
        /*塗りがない状態*/
        stroke: rgb(255, 255, 255);
        /*線の色*/
    }

    /*アニメーション後に.doneというクラス名がで付与された時の指定*/
    #mask.done path {
        fill: rgb(255, 255, 255);
        /*塗りの色*/
        fill-opacity: 1;
        /*透過1で見える状態*/
        stroke: none;
        /*線の色なし*/
    }

    /*========= レイアウトのためのCSS ===============*/

    #container {
        width: 100%;
        height: 100vh;
        background: #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    a {
        color: rgb(255, 255, 255);
    }

    a:hover {
        text-decoration: none;
    }

    /* 背景キラキラ */

    .top-main-visual {
        background: url(/images/top.jpg) no-repeat center;
        background-size: cover;
        height: 100vh;
        background-color: #74BFF7;
    }


    .gnav-wrap {
        width: 100%;
        justify-content: space-between;
        align-items: center;
        display: flex;
        position: fixed;
        z-index: 100;
        /* background-color: aqua; */
    }

    .gnav-img {
        width: 30%;
    }

    .site-logo {
        width: 70px;
        margin: 5%;
        opacity: 0.5;
    }

    .site-logo-blue {
        opacity: 0.8;
    }

    .site-logo-skyblue {
        display: none;
    }

    .site-logo-gray {
        display: none;
    }

    /* .site-logo-white {} */

    .gnav {
        width: 25%;
        /* background-color: bisque; */
        margin-right: 2%;
    }

    .gnav-ul {
        display: flex;
        justify-content: space-between;
        width: 100%;
        /* background-color: rgb(150, 150, 173); */
    }

    .gnav-li {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 300;

    }

    .gnav-link {
        text-decoration: none;
        color: #fff;
        font-size: 14px;
    }

    .gnav-link-blue {
        color: #0067BF;
    }



    .gnav-li-blue {
        color: #0067BF;
    }

    .gnav-li-white {
        color: #ffffff;
    }

    .active {
        color: #0067BF;
    }

    .main-visual-content {
        width: 75%;
        margin: 0 auto;
        padding: 13%;
        /* background-color: bisque; */
    }

    .main-visual-name {
        font-family: "lust-script", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 70px;
        color: #fff;
        opacity: 0.9;
    }

    .name_2 {
        text-align: center;
        margin: 3% 0;
    }

    .name_3 {
        text-align: right;
        font-size: 50px;
    }

    /* about */

    .about-container {
        padding-top: 5%;
    }

    .title-section {
        display: flex;
        align-items: center;
        margin: 0 5%;
        padding-top: 7%;
        border-bottom: 1px solid #0067BF;
    }

    .top-title {
        font-family: "lust-script", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: #0067BF;
        font-size: 50px;
    }

    .top-subtitle {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 300;
        color: #0067BF;
        font-size: 14px;
        margin-left: 2%;
    }

    .top-about-wrap {
        display: flex;
        flex-direction: column;
        width: 70%;
        justify-content: center;
        align-items: center;
        /* background-color: aquamarine; */
        margin: 10% auto 15% auto;
    }

    .profile-img {
        width: 100%;
    }

    .about-section {
        /* background-color: chartreuse; */
        width: 100%;
    }

    .about-name {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        font-size: 25px;
        color: #0067BF;
        margin: 10% auto 5% auto;
    }

    .about-name-small {
        font-size: 15px;
    }


    .about-content {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 330;
        font-size: 14px;
        color: #0067BF;
        line-height: 28px;
    }

    /* skills */

    .skills-area {
        background-color: #74BFF7;
        /* height: 500px; */
    }

    .title-section-white {
        display: flex;
        align-items: center;
        margin: 0 5% 0 5%;
        padding-top: 12%;
        border-bottom: 1px solid #ffffff;
    }

    .top-title-white {
        font-family: "lust-script", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: #ffffff;
        font-size: 50px;
    }

    .top-title-small {
        font-size: 40px;
        margin-bottom: 10px;
    }

    .top-subtitle-white {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 300;
        color: #ffffff;
        margin-left: 2%;
        font-size: 14px;
    }

    .slills-wrap {
        width: 70%;
        margin: 15% auto 10% auto;
    }

    .slills-wrap_2 {
        width: 70%;
        margin: 0 auto 0 15%;
        padding-bottom: 15%;
    }

    .skills-inner-title {
        font-family: "lust-script", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: #ffffff;
        font-size: 30px;
        margin-bottom: 3%;
    }

    .skills-inner-content {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 330;
        color: #fff;
        font-size: 15px;
        line-height: 30px;
    }

    /* works */

    .works-area {
        /* height: 800px; */
        background-image: url(/images/sky.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .works-wrap {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 90%;
        height: auto;
        /* background-color: #74BFF7; */
        margin: 5% auto 0 auto;
        padding-bottom: 10%;
    }

    .works-inner-wrap {
        width: 46%;
        list-style: none;
        /* background-color :aqua; */
    }

    .works-link {
        text-decoration: none;
    }

    .works-img {
        width: 100%;
        margin-bottom: 7%;
    }

    .works-content-category {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 330;
        color: #fff;
        font-size: 13px;
        margin-bottom: 10px;
    }

    .works-content {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 330;
        color: #fff;
        font-size: 14px;
        margin-bottom: 25%;
    }

    /* footer */
    .global-footer {
        background-color: #1B1F22;
        padding: 10%;
    }

    .global-footer-section {
        display: flex;
        justify-content: center;
        border-bottom: 0.5px solid #fff;
        /* padding: 10%; */
    }

    .footer-title {
        font-family: "lust-script", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 20px;
        color: #fff;
        line-height: 35px;
        margin-right: 20px;
    }

    .footer-address {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 330;
        color: #fff;
        font-size: 25px;
        text-decoration: none;
    }

    .footer-address:hover {
        color: #74BFF7;
        transition: 0.3s;
    }

    .cppyright {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 330;
        color: #fff;
        font-size: 10px;
        text-align: end;
        margin-top: 10px;
    }

    /* About-page */

    .title-blue {
        /* width: 20%; */
        text-align: center;
        margin: 0 auto;
        padding: 15% 0 8% 0;
        color: #0067BF;
        /* background-color: #74BFF7; */
    }

    .about-page-comment {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 500;
        color: #0067BF;
        font-size: 23px;
        text-align: center;
        margin-bottom: 10%;
    }

    .profile-img_2 {
        width: 60%;
    }

    .about-wrap {
        display: flex;
        flex-direction: column;
        width: 80%;
        justify-content: space-between;
        align-items: center;
        /* background-color: aquamarine; */
        margin: 0 auto;
        margin-bottom: 15%;
    }

    /* biorgaphy */

    /* .side-scroll-list-wrapper {
    position: relative;
    width: 200%;
    height: 300px;
    background-color: #74BFF7;
  }
  
  .side-scroll-list {
    position: absolute;
    display: flex;
    background-color: #0e5790;
  } */


    .side-scroll-list-wrapper {
        /* background-color: aqua; */
        position: relative;
        width: 100%;
        height: 100vh;
        background-image: url(/images/cloud.jpg);
        background-repeat: no-repeat;
        /* background-size: 100%; */
        background-size: cover;
    }

    .side-scroll-list {
        position: absolute;
        top: 230px;
        left: 0;
        display: flex;
        gap: 0 70px;
        margin-left: 0;
        height: 100vh;
    }

    .side-scroll-item {
        display: flex;
        flex-direction: column;
        /* align-items: center; */
        justify-content: space-around;
        width: 450px;
        height: 350px;
        background-color: #ffffff;
        background-color: rgba(255, 255, 255, 0.9);
        background-blend-mode: lighten;
        color: #1b1717;
        font-size: 32px;
        font-weight: 700;
        padding: 30px 30px;
        box-sizing: border-box;
        border-radius: 5%;
    }

    .side-scroll-item-liststyle {
        list-style: none;
    }

    /* .side-scroll-item+.side-scroll-item {
    margin-left: 60px;
} */

    .biography-title {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 250;
        color: rgb(0, 0, 0);
        font-size: 16px;
        line-height: 30px;
    }

    .biography-comment {
        /* height: 100%; */
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 250;
        color: rgb(0, 0, 0);
        font-size: 14px;
        line-height: 30px;
        /* background-color: #1B1F22; */
    }



    /* Strength */

    .Strength-area {
        background-color: #E2F5FF;
        /* height: 800px; */
    }

    /* works-page */
    .title-margin {
        padding-bottom: 0;
        color: #fff;
    }

    .title-black {
        color: #000;
    }


    .site-name-wrap {
        /* background-color: #74BFF7; */
        height: 110px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 3% auto 3% 6%;
    }

    .site-name {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 300;
        color: #000000;
        font-size: 30px;
    }

    .site-name-sideber {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        color: #797979;
        font-size: 14px;
        line-height: 20px;
    }

    .site-url {
        color: #797979;
        text-decoration: none;
        background-image: linear-gradient(#797979, #797979);
        background-size: 0 1px;
        background-position: left bottom;
        background-repeat: no-repeat;
        transition: all .3s;
    }

    .site-url:hover {
        background-size: 100% 1px;
        border-bottom: none;
    }

    .banner-wrap {
        display: flex;
        justify-content: space-between;
        width: 500px;
        height: 457px;
        margin: 10% auto;
        /* background-color: #0067BF; */

    }

    .banner-wrap-flex {
        width: 350px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* background-color: #74BFF7; */
    }

    .left-banner {
        width: 100%;
    }

    .left-banner2 {
        width: 105%;
        margin-top: 10%;
    }

    /* .right-banner{
        display: block;
    } */

    .site-img-wrap {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 80%;
        /* height: 460px; */
        margin: 8% auto;
        /* background-color: #74BFF7; */
    }

    .site-img-li {
        width: 17%;
        height: auto;
        /* background-color: #797979; */
        margin-top: 5%;
    }

    .site-img {
        width: 100%;
    }

    .site-img2-li {
        width: 70%;
        /* background-color: #0067BF; */
    }

    .site-img2 {
        width: 100%;
    }

    .banner-sp {
        display: block;
        width: 30%;
        margin: 0 auto;
    }

    .youtube-thumbnail {
        display: block;
        width: 90%;
        margin: 0 auto;
    }

    .youtube-thumbnail_2 {
        display: block;
        width: 70%;
        margin: 10% auto;
    }

    .site-article-wrap {
        width: 80%;
        margin: 10% auto;
        /* background-color: #74BFF7; */
    }

    .site-article-section {
        width: 100%;
        /* background-color: #797979; */
        height: 120px;
    }

    .site-article-short {
        height: 80px;
    }


    .site-article-svg {
        height: 150px;
        /* background-color: rgb(127, 169, 206); */
    }

    .site-article-svg_2 {
        height: 180px;
    }

    .color-chart-svg {
        width: 100%;
        /* min-width: 450px; */
    }

    .site-article-content-left {
        width: 20%;
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        color: #000000;
        font-size: 14px;
        line-height: 25px;
        /* background-color: #ffd7e8; */
    }

    .site-article-content-right {
        width: 80%;
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        color: #000000;
        font-size: 14px;
        line-height: 25px;
        /* background-color: aqua; */
    }

    .circle-section {
        background-color: #ffd7e8;
        width: 500px;
        margin: 0 auto;
        /* display: flex;
    justify-content: space-between; */
        position: relative;
    }

    .circle-section {
        display: none;
    }

    .circle-section3 {
        display: none;
    }

    .circle-section2 {
        background-color: #ffd7e8;
        width: 500px;
        margin: 0 auto;
        /* display: flex; */
        /* justify-content: space-between; */
        position: relative;
    }


    .circle-anima {
        opacity: 0;
    }

    .circle-animation {
        opacity: 1;
        stroke-dasharray: 614;
        stroke-dashoffset: 614;
        animation: dash 2s ease-in-out forwards;
        /* transform: rotate(-90deg); */
        transform-origin: 50% 50%;
    }

    .circle-animation-right {
        stroke-dashoffset: -614;
    }

    @keyframes dash {
        to {
            stroke-dashoffset: 0;
        }
    }

    //以下関係ないCSS

    body {
        background-color: #000;
    }

    /* .circle-wrapper-sp {
    background-color: hotpink;
    outline:1px solid #fff;
    position: relative;

} */

    .circle-wrapper-sp1 {
        position: absolute;
        top: 210px;
        left: 30px;
        /* background-color: #ccc; */
    }


    .circle-wrapper-sp2 {
        position: absolute;
        top: 50px;
        left: 0;
        right: 0;
        margin: auto;
        /* background-color: #797979; */
    }

    .circle-wrapper-sp3 {
        position: absolute;
        top: 210px;
        right: 30px;
        /* background-color: #ffd7e8; */
    }

    .circle-text1 {
        position: absolute;
        left: 210px;
        top: 160px;
        margin: auto;
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        color: #0067BF;
        font-size: 20px;
    }

    .circle-text2 {
        position: absolute;
        left: 120px;
        top: 320px;
        margin: auto;
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        color: #0067BF;
        font-size: 20px;
    }

    .circle-text3 {
        position: absolute;
        left: 300px;
        top: 320px;
        margin: auto;
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        color: #0067BF;
        font-size: 20px;
    }



    .strength-article-container {
        /* margin-top: 400px; */
        width: 85%;
        /* background-color:#ffd7e8 ; */
        margin: 0 auto auto auto;
        padding-bottom: 10%;
    }

    .strength-article-section-margin {
        margin-top: 500px;
    }

    .strength-article-section {
        width: 100%;
        display: flex;
        border-bottom: 1.5px solid #0067BF;
        /* width: 90%; */
        /* background-color: #E2F5FF; */

    }

    .article-number {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        color: #0067BF;
        font-size: 20px;
        line-height: 45px;
        margin-left: 10px;
    }

    .article-title {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        color: #0067BF;
        font-size: 25px;
        line-height: 40px;
        margin-left: 20px;
    }

    .article-content {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        color: #0067BF;
        font-size: 14px;
        line-height: 28px;
        width: 100%;
        margin: 2% 0 0 auto;
        /* background-color: #74BFF7; */
    }

    .strength-article-container-padding {
        padding-bottom: 20%;
    }

    .glowAnime span {
        opacity: 0;
        font-family: "lust-script", sans-serif;
        font-weight: 700;
        font-style: normal;
    }

    /* ブラー */
    .circle-blur {
        opacity: 0;
    }

    /* circleブラー */
    .blur {
        opacity: 1;
        animation-name: blurAnime;
        animation-duration: 2s;
        animation-fill-mode: forwards;
    }

    @keyframes blurAnime {
        from {
            filter: blur(5px);
            transform: scale(1.02);
        }

        to {
            filter: blur(0);
            transform: scale(1);
        }
    }


    /* タイトルキラキラ */
    /*アニメーションで透過を0から1に変化させtext-shadowをつける*/
    .glowAnime.glow span {
        animation: glow_anime_on 1s ease-out forwards;
    }

    @keyframes glow_anime_on {
        0% {
            opacity: 0;
            text-shadow: 0 0 0 #fff, 0 0 0 #fff;
        }

        50% {
            opacity: 1;
            text-shadow: 0 0 10px #fff, 0 0 15px #fff;
        }

        100% {
            hover opacity: 1;
            text-shadow: 0 0 0 #fff, 0 0 0 #fff;
        }
    }

    /* works 画像ズーム */
    .zoomIn img {
        transform: scale(1);
        transition: .3s ease-in-out;
        /*移り変わる速さを変更したい場合はこの数値を変更*/
    }

    .zoomIn a:hover img {
        /*hoverした時の変化*/
        transform: scale(1.1);
        /*拡大の値を変更したい場合はこの数値を変更*/
    }



    /* 斜めから出てくる文字 */
    .smoothText {
        overflow: hidden;
        display: block;
    }

    /* アニメーションで傾斜がついている文字列を水平に戻す*/
    .smoothTextTrigger {
        transition: 2.0s ease-in-out;
        transform: translate3d(0, 100%, 0) skewY(12deg);
        transform-origin: left;
        display: block;
        font-family: "lust-script", sans-serif;
        font-weight: 700;
        font-style: normal;
        padding-top: 10px;
    }

    .smoothTextTrigger.smoothTextAppear {
        transform: translate3d(0, 0, 0) skewY(0);
    }

    /* じわっと文字 */
    .blur2 {
        animation-name: blurAnime;
        animation-duration: 1s;
        animation-fill-mode: forwards;
    }

    @keyframes blurAnime {
        from {
            filter: blur(10px);
            transform: scale(1.1);
            opacity: 0;
        }

        to {
            filter: blur(0);
            transform: scale(1);
            opacity: 1;
        }
    }

    .blurTrigger {
        opacity: 0;
    }

    /* スケール小さいブラー */
    .blur3 {
        animation-name: blurAnime;
        animation-duration: 0.8s;
        animation-fill-mode: forwards;
    }

    @keyframes blurAnime {
        from {
            filter: blur(5px);
            transform: scale(1.0);
            opacity: 0;
        }

        to {
            filter: blur(0);
            transform: scale(1);
            opacity: 1;
        }
    }

    .blurTrigger2 {
        opacity: 0;
    }


    /*==================================================
ふわっ
===================================*/
    /* fadeUp */

    .fadeUp {
        animation-name: fadeUpAnime;
        animation-duration: 1.0s;
        animation-fill-mode: forwards;
        opacity: 0;
    }

    @keyframes fadeUpAnime {
        from {
            opacity: 0;
            transform: translateY(100px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
    .fadeUpTrigger {
        opacity: 0;
    }


    /* work-1 */
    .site-thumb-img-wrap {
        display: flex;
        width: 80%;
        justify-content: space-between;
        margin: 0 auto;
    }

    .site-thumb-img {
        width: 100%;
        margin-bottom: 2%;
    }

    .site-thumb-section-pc {
        width: 60%;
    }

    .site-thumb-section-sp {
        width: 30%;
    }


}


/* s-p */
@media (max-width:499px) {

    /* ハンバーガー */
    @import url("https://fonts.googleapis.com/css?family=Lato");

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

    html {
        font-size: 18px;
    }

    /* body {
          font-family: "Lato", serif;
          font-size: 28px;
          line-height: 1.6;
          background: #61B2A0;
          overflow-x: hidden;
        } */


    .h-menu {
        position: fixed;
        /* top: 30%; */
    }

    label .menu {
        position: fixed;
        right: -100px;
        top: -100px;
        z-index: 1000;
        width: 100px;
        height: 100px;
        background: #FFF;
        border-radius: 50% 50% 50% 50%;
        transition: .4s ease-in-out;
        box-shadow: 0 0 0 0 rgb(255, 255, 255), 0 0 0 0 rgb(255, 255, 255);
        cursor: pointer;
    }

    label .hamburger {
        position: absolute;
        top: 130px;
        left: -50px;
        width: 30px;
        height: 2px;
        background: #000;
        display: block;
        transform-origin: center;
        transition: .5s ease-in-out;
    }

    /* ایجاد نشان گر منو در قسمت بالای سمت راست */
    label .hamburger:after,
    label .hamburger:before {
        transition: .5s ease-in-out;
        content: "";
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        background: #000;
    }

    label .hamburger:before {
        top: -10px;
    }

    label .hamburger:after {
        bottom: -10px;
    }

    label input {
        display: none;
    }

    /* ایجاد انیمیشن حرکت صفحه سفید و نمایش آیتم های منو */
    label input:checked+.menu {
        box-shadow: 0 0 0 100vw rgb(255, 255, 255), 0 0 0 100vh rgb(255, 255, 255);
        border-radius: 0;
        /* position: fixed;
        top: 0; */
    }

    /*تغییر زاویه  علامت نشانگر منو*/
    label input:checked+.menu .hamburger {
        transform: rotate(45deg);
    }

    label input:checked+.menu .hamburger:after {
        transform: rotate(90deg);
        bottom: 0;
    }


    label input:checked+.menu .hamburger:before {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        top: 0;
    }

    label input:checked+.menu+ul {
        display: block;
        opacity: 1;
    }

    /* نمایش آیتم های منو */
    label ul {
        z-index: 1001;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        display: none;
        transition: .3s 0s ease-in-out;
        list-style: none;
    }

    label a {
        margin-bottom: 50%;
        display: block;
        color: #000;
        text-decoration: none;
        font-family: "lust-script", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 30px;

    }

    /* ローディング */
    /* Loading背景画面設定　*/
    #splash {
        /*fixedで全面に固定*/
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 999;
        background: #74BFF7;
        text-align: center;
        color: #fff;
    }

    /* Loading画像中央配置*/
    #splash_logo {
        position: absolute;
        top: 50%;
        left: 63%;
        transform: translate(-50%, -50%);
    }

    /* Loading アイコンの大きさ設定　*/
    #splash_logo svg {
        width: 200%;
    }

    /*=============== SVGアニメーション内の指定 =================*/

    /*アニメーション前の指定*/
    #mask path {
        fill-opacity: 0;
        /*最初は透過0で見えない状態*/
        transition: fill-opacity .5s;
        /*カラーがつく際のアニメーション0.5秒で変化*/
        fill: none;
        /*塗りがない状態*/
        stroke: rgb(255, 255, 255);
        /*線の色*/
    }

    /*アニメーション後に.doneというクラス名がで付与された時の指定*/
    #mask.done path {
        fill: rgb(255, 255, 255);
        /*塗りの色*/
        fill-opacity: 1;
        /*透過1で見える状態*/
        stroke: none;
        /*線の色なし*/
    }

    /*========= レイアウトのためのCSS ===============*/

    #container {
        width: 100%;
        height: 100vh;
        background: #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    a {
        color: rgb(255, 255, 255);
    }

    a:hover {
        text-decoration: none;
    }

    /* 背景キラキラ */

    .top-main-visual {
        background: url(/images/top.jpg) no-repeat center;
        background-size: cover;
        height: 100vh;
        background-color: #74BFF7;
    }


    .gnav-wrap {
        width: 100%;
        justify-content: space-between;
        align-items: center;
        display: flex;
        position: fixed;
        z-index: 100;
        /* background-color: aqua; */
    }

    .gnav-img {
        width: 30%;
    }

    .site-logo {
        width: 60px;
        margin: 10%;
        opacity: 0.5;
    }

    .site-logo-blue {
        opacity: 0.8;
    }

    .site-logo-skyblue {
        display: none;
    }

    .site-logo-gray {
        display: none;
    }

    /* .site-logo-white {} */

    .gnav {
        /* width: 25%; */
        /* background-color: bisque; */
        /* margin-right: 2%; */
        display: none;
    }

    .gnav-ul {
        display: flex;
        justify-content: space-between;
        width: 100%;
        /* background-color: rgb(150, 150, 173); */
    }

    .gnav-li {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 300;

    }

    .gnav-link {
        text-decoration: none;
        color: #fff;
        font-size: 14px;
    }

    .gnav-link-blue {
        color: #0067BF;
    }



    .gnav-li-blue {
        color: #0067BF;
    }

    .gnav-li-white {
        color: #ffffff;
    }

    .active {
        color: #0067BF;
    }

    .main-visual-content {
        width: 90%;
        /* min-width: 275px; */
        margin: 0 auto;
        padding-top: 30%;
        /* background-color: bisque; */
    }

    .main-visual-name {
        font-family: "lust-script", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 50px;
        color: #fff;
        opacity: 0.9;
    }

    .name_2 {
        text-align: center;
        margin: 5% 0;
    }

    .name_3 {
        text-align: right;
        font-size: 40px;
    }

    /* about */

    .about-container {
        padding-top: 15%;
    }

    .title-section {
        display: flex;
        align-items: center;
        margin: 0 5%;
        padding-top: 15%;
        border-bottom: 1px solid #0067BF;
    }

    .top-title {
        font-family: "lust-script", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: #0067BF;
        font-size: 40px;
    }

    .top-subtitle {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 300;
        color: #0067BF;
        font-size: 14px;
        margin-left: 2%;
    }

    .top-about-wrap {
        display: flex;
        flex-direction: column;
        width: 90%;
        justify-content: center;
        align-items: center;
        /* background-color: aquamarine; */
        margin: 10% auto 15% auto;
    }

    .profile-img {
        width: 100%;
    }

    .about-section {
        /* background-color: chartreuse; */
        width: 100%;
    }

    .about-name {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        font-size: 20px;
        color: #0067BF;
        margin: 10% auto 5% auto;
    }

    .about-name-small {
        font-size: 15px;
    }


    .about-content {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 330;
        font-size: 14px;
        color: #0067BF;
        line-height: 28px;
    }

    /* skills */

    .skills-area {
        background-color: #74BFF7;
        /* height: 500px; */
        padding-bottom: 10%;
    }

    .title-section-white {
        display: flex;
        align-items: center;
        margin: 0 5% 0 5%;
        padding-top: 15%;
        border-bottom: 1px solid #ffffff;
    }

    .title-padding {
        padding-top: 20%;
    }

    .top-title-white {
        font-family: "lust-script", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: #ffffff;
        font-size: 40px;
        line-height: 45px;
    }

    .top-title-small {
        font-size: 35px;
        margin-bottom: 10px;
        /* margin-top: 30px; */
    }

    .top-subtitle-white {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 300;
        color: #ffffff;
        margin-left: 2%;
        font-size: 14px;
    }

    .slills-wrap {
        width: 90%;
        margin: 15% auto 15% auto;
    }

    .slills-wrap_2 {
        width: 90%;
        margin: 15% auto 0 auto;
        padding-bottom: 15%;
    }

    .skills-inner-title {
        font-family: "lust-script", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: #ffffff;
        font-size: 25px;
        margin-bottom: 3%;
    }

    .skills-inner-content {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 330;
        color: #fff;
        font-size: 14px;
        line-height: 28px;
    }

    /* works */

    .works-area {
        /* height: 800px; */
        background-image: url(/images/sky.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .works-wrap {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 90%;
        height: auto;
        /* background-color: #74BFF7; */
        margin: 5% auto 0 auto;
        padding-bottom: 10%;
    }

    .works-inner-wrap {
        width: 46%;
        list-style: none;
        /* background-color :aqua; */
    }

    .works-link {
        text-decoration: none;
    }

    .works-img {
        width: 100%;
        margin-bottom: 7%;
    }

    .works-content-category {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 330;
        color: #fff;
        font-size: 13px;
        margin-bottom: 10px;
    }

    .works-content {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 330;
        color: #fff;
        font-size: 12px;
        margin-bottom: 25%;
    }

    /* footer */
    .global-footer {
        background-color: #1B1F22;
        padding: 10%;
    }

    .global-footer-section {
        display: flex;
        justify-content: center;
        border-bottom: 0.5px solid #fff;
        /* padding: 10%; */
    }

    .footer-title {
        font-family: "lust-script", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 13px;
        color: #fff;
        line-height: 25px;
        margin-right: 10px;
    }

    .footer-address {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 330;
        color: #fff;
        font-size: 15px;
        text-decoration: none;
    }

    .footer-address:hover {
        color: #74BFF7;
        transition: 0.3s;
    }

    .cppyright {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 330;
        color: #fff;
        font-size: 8px;
        text-align: end;
        margin-top: 10px;
    }

    /* About-page */

    .title-blue {
        /* width: 20%; */
        text-align: center;
        margin: 0 auto;
        padding: 15% 0 8% 0;
        color: #0067BF;
        /* background-color: #74BFF7; */
    }

    .about-page-comment {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 500;
        color: #0067BF;
        font-size: 20px;
        text-align: center;
        margin-bottom: 10%;
    }

    .profile-img_2 {
        width: 60%;
    }

    .about-wrap {
        display: flex;
        flex-direction: column;
        width: 90%;
        justify-content: space-between;
        align-items: center;
        /* background-color: aquamarine; */
        margin: 0 auto;
        margin-bottom: 15%;
    }

    /* biorgaphy */

    /* .side-scroll-list-wrapper {
    position: relative;
    width: 200%;
    height: 300px;
    background-color: #74BFF7;
  }
  
  .side-scroll-list {
    position: absolute;
    display: flex;
    background-color: #0e5790;
  } */


    .side-scroll-list-wrapper {
        /* background-color: aqua; */
        position: relative;
        width: 100%;
        height: 100vh;
        background-image: url(/images/cloud.jpg);
        background-repeat: no-repeat;
        /* background-size: 100%; */
        background-size: cover;
    }

    .side-scroll-list {
        position: absolute;
        top: 180px;
        left: 0;
        display: flex;
        gap: 0 70px;
        margin-left: 0;
        height: 100vh;
    }

    .side-scroll-item {
        display: flex;
        flex-direction: column;
        /* align-items: center; */
        justify-content: space-around;
        width: 360px;
        height: 490px;
        background-color: #ffffff;
        background-color: rgba(255, 255, 255, 0.9);
        background-blend-mode: lighten;
        color: #1b1717;
        font-size: 32px;
        font-weight: 700;
        padding: 80px 30px;
        box-sizing: border-box;
        border-radius: 5%;
    }

    .side-scroll-item-liststyle {
        list-style: none;
    }

    /* .side-scroll-item+.side-scroll-item {
    margin-left: 60px;
} */

    .biography-title {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 250;
        color: rgb(0, 0, 0);
        font-size: 16px;
        line-height: 30px;
    }

    .biography-comment {
        /* height: 100%; */
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 250;
        color: rgb(0, 0, 0);
        font-size: 14px;
        line-height: 30px;
        /* background-color: #1B1F22; */
    }



    /* Strength */

    .Strength-area {
        background-color: #E2F5FF;
        /* height: 800px; */
    }

    /* works-page */
    .title-margin {
        padding-bottom: 0;
        color: #fff;
    }

    .title-black {
        color: #000;
    }


    .site-name-wrap {
        /* background-color: #74BFF7; */
        height: 90px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 3% auto 3% 6%;
    }

    .site-name {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 300;
        color: #000000;
        font-size: 20px;
    }

    .site-name-sideber {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        color: #797979;
        font-size: 12px;
        line-height: 18px;
    }

    .site-url {
        color: #797979;
        text-decoration: none;
        background-image: linear-gradient(#797979, #797979);
        background-size: 0 1px;
        background-position: left bottom;
        background-repeat: no-repeat;
        transition: all .3s;
    }

    .site-url:hover {
        background-size: 100% 1px;
        border-bottom: none;
    }

    .banner-wrap {
        display: flex;
        justify-content: space-between;
        width: 280px;
        height: 250px;
        margin: 10% auto;
        /* background-color: #0067BF; */

    }

    .banner-wrap-flex {
        width: 70%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* background-color: #74BFF7; */
    }

    .left-banner {
        width: 100%;
    }

    .left-banner2 {
        width: 105%;
        margin-top: 10%;
    }

    .right-banner {
        /* width: 30%; */
    }

    .site-img-wrap {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 90%;
        /* height: 460px; */
        margin: 8% auto;
        /* background-color: #74BFF7; */
    }

    .site-img-li {
        width: 17%;
        height: auto;
        /* background-color: #797979; */
        margin-top: 5%;
    }

    .site-img {
        width: 100%;
    }

    .site-img2-li {
        width: 70%;
        /* background-color: #0067BF; */
    }

    .site-img2 {
        width: 100%;
    }


    .banner-sp {
        display: block;
        width: 60%;
        margin: 0 auto;
    }

    .youtube-thumbnail {
        display: block;
        width: 90%;
        margin: 0 auto;
    }

    .youtube-thumbnail_2 {
        display: block;
        width: 70%;
        margin: 10% auto;
    }

    .site-article-wrap {
        width: 90%;
        margin: 10% auto;
        /* background-color: #74BFF7; */
    }

    .site-article-section {
        width: 100%;
        /* background-color: #797979; */
        height: 120px;
    }

    .site-article-short {
        height: 80px;
    }


    .site-article-svg {
        height: 150px;
        /* background-color: rgb(127, 169, 206); */
    }

    .site-article-svg_2 {
        height: 180px;
    }

    .color-chart-svg {
        width: 100%;
    }

    .site-article-content-left {
        width: 20%;
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        color: #000000;
        font-size: 13px;
        line-height: 25px;
    }

    .site-article-content-right {
        width: 60%;
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        color: #000000;
        font-size: 13px;
        line-height: 25px;
        /* background-color: aqua; */
    }

    .circle-section {
        background-color: #ffd7e8;
        width: 500px;
        margin: 0 auto;
        /* display: flex;
    justify-content: space-between; */
        position: relative;
    }

    .circle-section {
        display: none;
    }

    .circle-section2 {
        display: none;
    }

    .circle-section3 {
        background-color: #ffd7e8;
        width: 380px;
        margin: 0 auto;
        /* display: flex; */
        /* justify-content: space-between; */
        position: relative;
    }


    .circle-anima {
        opacity: 0;
    }

    .circle-animation {
        opacity: 1;
        stroke-dasharray: 614;
        stroke-dashoffset: 614;
        animation: dash 2s ease-in-out forwards;
        /* transform: rotate(-90deg); */
        transform-origin: 50% 50%;
    }

    .circle-animation-right {
        stroke-dashoffset: -614;
    }

    @keyframes dash {
        to {
            stroke-dashoffset: 0;
        }
    }

    //以下関係ないCSS

    body {
        background-color: #000;
    }

    /* .circle-wrapper-sp {
    background-color: hotpink;
    outline:1px solid #fff;
    position: relative;

} */

    .circle-wrapper-sp1 {
        position: absolute;
        top: 190px;
        left: 0;
        /* background-color: #ccc; */
    }


    .circle-wrapper-sp2 {
        position: absolute;
        top: 50px;
        left: 0;
        right: 0;
        margin: auto;
        /* background-color: #797979; */
    }

    .circle-wrapper-sp3 {
        position: absolute;
        top: 190px;
        right: 0;
        /* background-color: #ffd7e8; */
    }

    .circle-text1 {
        position: absolute;
        left: 150px;
        top: 150px;
        margin: auto;
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        color: #0067BF;
        font-size: 20px;
    }

    .circle-text2 {
        position: absolute;
        left: 75px;
        top: 290px;
        margin: auto;
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        color: #0067BF;
        font-size: 20px;
    }

    .circle-text3 {
        position: absolute;
        left: 225px;
        top: 290px;
        margin: auto;
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        color: #0067BF;
        font-size: 20px;
    }



    .strength-article-container {
        /* margin-top: 400px; */
        width: 85%;
        /* background-color:#ffd7e8 ; */
        margin: 0 auto auto auto;
        padding-bottom: 10%;
    }

    .strength-article-section-margin {
        margin-top: 450px;
    }

    .strength-article-section {
        width: 100%;
        display: flex;
        border-bottom: 1.5px solid #0067BF;
        /* width: 90%; */
        /* background-color: #E2F5FF; */

    }

    .article-number {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        color: #0067BF;
        font-size: 20px;
        line-height: 45px;
        margin-left: 10px;
    }

    .article-title {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        color: #0067BF;
        font-size: 25px;
        line-height: 40px;
        margin-left: 20px;
    }

    .article-content {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 350;
        color: #0067BF;
        font-size: 14px;
        line-height: 28px;
        width: 100%;
        margin: 2% 0 0 auto;
        /* background-color: #74BFF7; */
    }

    .strength-article-container-padding {
        padding-bottom: 20%;
    }

    .glowAnime span {
        opacity: 0;
        font-family: "lust-script", sans-serif;
        font-weight: 700;
        font-style: normal;
    }

    /* ブラー */
    .circle-blur {
        opacity: 0;
    }

    /* circleブラー */
    .blur {
        opacity: 1;
        animation-name: blurAnime;
        animation-duration: 2s;
        animation-fill-mode: forwards;
    }

    @keyframes blurAnime {
        from {
            filter: blur(5px);
            transform: scale(1.02);
        }

        to {
            filter: blur(0);
            transform: scale(1);
        }
    }


    /* タイトルキラキラ */
    /*アニメーションで透過を0から1に変化させtext-shadowをつける*/
    .glowAnime.glow span {
        animation: glow_anime_on 1s ease-out forwards;
    }

    @keyframes glow_anime_on {
        0% {
            opacity: 0;
            text-shadow: 0 0 0 #fff, 0 0 0 #fff;
        }

        50% {
            opacity: 1;
            text-shadow: 0 0 10px #fff, 0 0 15px #fff;
        }

        100% {
            opacity: 1;
            text-shadow: 0 0 0 #fff, 0 0 0 #fff;
        }
    }

    /* works 画像ズーム */
    .zoomIn img {
        transform: scale(1);
        transition: .3s ease-in-out;
        /*移り変わる速さを変更したい場合はこの数値を変更*/
    }

    .zoomIn a:hover img {
        /*hoverした時の変化*/
        transform: scale(1.1);
        /*拡大の値を変更したい場合はこの数値を変更*/
    }



    /* 斜めから出てくる文字 */
    .smoothText {
        overflow: hidden;
        display: block;
    }

    /* アニメーションで傾斜がついている文字列を水平に戻す*/
    .smoothTextTrigger {
        transition: 2.0s ease-in-out;
        transform: translate3d(0, 100%, 0) skewY(12deg);
        transform-origin: left;
        display: block;
        font-family: "lust-script", sans-serif;
        font-weight: 700;
        font-style: normal;
        padding-top: 10px;
    }

    .smoothTextTrigger.smoothTextAppear {
        transform: translate3d(0, 0, 0) skewY(0);
    }

    /* じわっと文字 */
    .blur2 {
        animation-name: blurAnime;
        animation-duration: 1s;
        animation-fill-mode: forwards;
    }

    @keyframes blurAnime {
        from {
            filter: blur(10px);
            transform: scale(1.1);
            opacity: 0;
        }

        to {
            filter: blur(0);
            transform: scale(1);
            opacity: 1;
        }
    }

    .blurTrigger {
        opacity: 0;
    }

    /* スケール小さいブラー */
    .blur3 {
        animation-name: blurAnime;
        animation-duration: 0.8s;
        animation-fill-mode: forwards;
    }

    @keyframes blurAnime {
        from {
            filter: blur(5px);
            transform: scale(1.0);
            opacity: 0;
        }

        to {
            filter: blur(0);
            transform: scale(1);
            opacity: 1;
        }
    }

    .blurTrigger2 {
        opacity: 0;
    }


    /*==================================================
ふわっ
===================================*/
    /* fadeUp */

    .fadeUp {
        animation-name: fadeUpAnime;
        animation-duration: 1.0s;
        animation-fill-mode: forwards;
        opacity: 0;
    }

    @keyframes fadeUpAnime {
        from {
            opacity: 0;
            transform: translateY(100px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
    .fadeUpTrigger {
        opacity: 0;
    }


    /* work-1 */
    .site-thumb-img-wrap {
        display: flex;
        width: 80%;
        justify-content: space-between;
        margin: 0 auto;
    }

    .site-thumb-img {
        width: 100%;
        margin-bottom: 2%;
    }

    .site-thumb-section-pc {
        width: 60%;
    }

    .site-thumb-section-sp {
        width: 30%;
    }



}