@charset "utf-8";

/* ======================
　　　　　common
======================= */

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    font-family:
        "Playfair Display",
        "Kalnia",
        "Playball",
        "Reem Kufi",
        "Sawarabi Gothic",
        sans-serif;
    font-style: normal;
    background-color: #015DAF;
    line-height: 1.5;
}

img {
    max-width: 100%;
    height: auto;
}

.topic {
    position: sticky;
    display: flex;
    justify-content: center;
    padding-top: 100px;
    z-index: 5;
}

.section__topic {
    font-family: "Playfair Display";
    font-size: 5.0rem;
    font-weight: 400;
    color: #fff;
}

.topic__line__sp {
    padding-top: 27px;
    padding-right: 15px;
    padding-left: 15px;
}

.topic__line__pc {
    display: none;
}

.section__subtopic {
    font-family: "Sawarabi Gothic";
    font-size: 1.8rem;
    font-weight: 400;
    color: #fff;
    padding-top: 29px;
}

.pc {
    display: none;
}


/* common pc */

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

    .topic {
        max-width: 2000px;
        margin: 0 auto;
        display: flex;
        justify-content: left;
        padding-top: 150px;
        padding-left: 120px;
    }
    
    .section__topic {
        font-family: "Playfair Display";
        font-size: 7.0rem;
        font-weight: 400;
        color: #fff;
    }

    .topic__line__sp {
        display: none;
    }
    
    .topic__line__pc {
        display: block;
        padding-top: 42px;
        padding-right: 30px;
        padding-left: 30px;
    }
    
    .section__subtopic {
        font-family: "Sawarabi Gothic";
        font-size: 2.0rem;
        font-weight: 400;
        color: #fff;
        padding-top: 42px;
    }

    .pc {
        display: block;
    }
    
}


/* ======================
　　　　　header
======================= */

.header {
    background-color: rgba(95, 132, 156, 0.7);
    position: fixed;
    width: 100%;
    padding: 10px 20px 10px 15px;
    z-index: 100;
}

.header__topic_sp {
    margin-top: -5px;
}

.header__topic_pc {
    display: none;
}

/* .nav初期表示 */
.nav {
    background-image: url(../images/bg-menu.png);
    width: 375px;
    height: 290px;
    position: fixed;
    background-repeat: no-repeat;
    top: 0;
    right: 0;
    z-index: 100;
    transform: translateY(-100%);
    transition: transform 0.4s;
}

.nav__btn {
    text-align: right;
    padding-top: 8px;
    padding-right: 10px;
}

.nav__list {
    margin-top: 25px;
}

.nav__item {
    text-align: center;
    font-family: "Reem Kufi";
    font-size: 2.5rem;
    font-weight: 400;
    line-height: normal;
    color: #fff;
    margin-top: 10px;
    word-spacing: .5em
}

.my-parts {
	display: inline-block;
	transition: all .3s ease 0s;
	text-decoration: none;
}

.my-parts:hover {
	cursor: pointer;
	color: #015DAF;
}

.nav.active {
    transform: translateY(0);
}

.header__btn {
    width: 20px;
    height: 15px;
    top: 17px;
    right: 5.3%;
    cursor: pointer;
    position: absolute;
}


/* header pc */

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

    .header {
        display: flex;
        width: 100%;
        padding: 0px 30px 0px 0px;
    }
    
    .header__topic_sp {
        display: none;
    }
    
    .header__topic_pc {
        display: block;
        padding: 5px 0px 10px 20px;
    }
    
    .nav {
        background: transparent;
        width: auto;
        height: auto;
        padding: 0;
        position: static;
        transform: translate(0); 
        margin-left: auto;
    }
    
    .nav__list {
        margin-top: 0;
        display: flex;
    }
    
    .nav__item {
        font-family: "Reem Kufi";
        font-size: 2.5rem;
        font-weight: 400;
        color: #fff;
        margin-top: 15px;
        padding-left: 70px;
        word-spacing: .5em
    }

    .my-parts {
        display: inline-block;
        transition: all .3s ease 0s;
        text-decoration: none;
    }
    
    .my-parts:hover {
        cursor: pointer;
        color: #FAC63C;
    }
    
    .nav__header {
        display: none;
    }
    
    .header__btn {
        display: none;
    }

}


/* ======================
　　　　　main
======================= */

/* Top */

.video__sp{
    position: sticky;
    text-align: center;
    padding-top: 50px;
    z-index: -1;
}

.video__mask__sp {
    position: sticky;
    text-align: center;
    margin-top: -480px;
    z-index: 1;
}

.video__pc {
    display: none;
}

.video__mask__pc {
    display: none;
}

.title__webdesigner {
    position: sticky;
    width: 375px;
    margin: auto;
    color: #FFF;
    font-family: "Playfair Display";
    font-size: 3.0rem;
    font-weight: 400;
    margin-top: -290px;
    padding-left: 20px;
    z-index: 10;
}

.title__name {
    width: 375px;
    margin: auto;
    position: sticky;
    color: #FAC63C;
    font-family: "Kalnia";
    font-size: 5.0rem;
    font-weight: 400;
    line-height: 60px;
    letter-spacing: 2px;
    padding-top: 30px;
    padding-left: 20px;
    padding-bottom: 30px;
    z-index: 10;
}

.portfolio__year {
    display: flex;
    position: relative;
    width: 375px;
    margin: auto;
    padding-top: 60px;
    z-index: 1;
}

.title__portfolio {
    color: #FFF;
    font-family: "Playfair Display";
    font-size: 3.0rem;
    font-weight: 400;
    padding-left: 20px;
    margin-top: -60px;
}

.year_sp {
    margin-top: -100px;
    padding-bottom: 130px;
}

.year_pc {
    display: none;
}


.copy1_sp {
    text-align: center;
    transform:rotate(-15deg);  
}


@keyframes textWave {
    0% {
    top: 0;
    }
    100% {
    top: -0.30em;
    }
   }

   p span {
   font-size: 200%;
   font-family: "Playfair Display";
   color: #fff;
   display: inline-block; 
   position: relative; 
   }

   p span {
   animation-name: textWave;
   animation-duration: 1s;
   animation-timing-function: ease-in-out;
   animation-iteration-count: infinite; 
   animation-direction: alternate; 
   }
   p span:nth-of-type(2) {
   animation-delay: 0.2s; 
   }
   p span:nth-of-type(3) {
   animation-delay: 0.4s;
   }
   p span:nth-of-type(4) {
   animation-delay: 0.6s;
   }
   p span:nth-of-type(5) {
   animation-delay: 0.8s;
   }
   p span:nth-of-type(6) {
   animation-delay: 1s;
   }
   p span:nth-of-type(7) {
   animation-delay: 1.2s;
   }
   p span:nth-of-type(8) {
   animation-delay: 1.4s;
   }

   p span:nth-of-type(9) {
    animation-delay: 1.4s;
    color: #015DAF;
   }

   p span:nth-of-type(10) {
   animation-delay: 1.6s;
   }
   p span:nth-of-type(11) {
   animation-delay: 1.8s;
   }
   p span:nth-of-type(12) {
   animation-delay: 2.0s;
   }
   p span:nth-of-type(13) {
   animation-delay: 2.2s;
   }

   p span:nth-of-type(14) {
   animation-delay: 2.2s;
   color: #015DAF;
   }

   p span:nth-of-type(15) {
   animation-delay: 2.4s;
   }
   p span:nth-of-type(16) {
   animation-delay: 2.6s;
   }
   p span:nth-of-type(17) {
   animation-delay: 2.8s;
   }
   p span:nth-of-type(18) {
   animation-delay: 3.0s;
   }
   p span:nth-of-type(19) {
   animation-delay: 3.2s;
   }
   p span:nth-of-type(20) {
   animation-delay: 3.4s;
   }


.illust__top_sp {
    text-align: right;
    padding-top: 90px;
}

.top_pc {
    display: none;
}


/* Top pc */

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

    .video__sp {
        display: none;
    }

    .video__mask__sp {
        display: none;
    }

    .video__pc {
        display: block;
        position: sticky;
        text-align: right;
        padding-top: 150px;
        z-index: -1;
    }
    
    .video__mask__pc {
        display: block;
        position: sticky;
        text-align: right;
        margin-top: -830px;
        z-index: 1;
    }

    .title__webdesigner {
        min-width: 769px;
        color: #FFF;
        font-family: "Playfair Display";
        font-size: 5.0rem;
        font-weight: 400;
        margin-top: -900px;
        padding-left: 20px;
    }
    
    .title__name {
        min-width: 769px;
        color: #FAC63C;
        font-family: Kalnia;
        font-size: 8.0rem;
        font-weight: 400;
        line-height: 100px;
        letter-spacing: 2px;
        padding-top: 25px;
        padding-left: 20px;
        padding-bottom: 25px;
    }
    
    .portfolio__year {
        min-width: 769px;
        display: flex;
    }
    
    .title__portfolio {
        color: #FFF;
        font-family: "Playfair Display";
        font-size: 5.0rem;
        font-weight: 400;
        padding-left: 20px;
    }
    
    
    .year_sp {
        display: none;
    }
    
    .year_pc {
        display: block;
        margin-top: -200px;
    }

    .top_sp {
        display: none;
    }

    .top_pc {
        display: block;
    }

    .copy1_sp {
        position: sticky;
        min-width: 650px;
        max-width: 700px;
        margin: 0 auto;
        transform:rotate(-15deg);  
        padding-top: 300px;
        padding-right: 0px;
        z-index: 5;
    }

    p span {
        font-size: 300%;
        font-family: "Playfair Display";
        color: #fff;
        display: inline-block; 
        position: relative; 
    }
    
    .illust__top_pc {
        padding-top: 130px;
        text-align: right;
    }

}


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

    .video__sp {
        display: none;
    }

    .video__mask__sp {
        display: none;
    }

    .video__pc {
        display: block;
        max-width: 1440px;
        position: sticky;
        text-align: right;
        padding-top: 150px;
        z-index: -1;
    }
    
    .video__mask__pc {
        display: block;
        max-width: 1440px;
        position: sticky;
        text-align: right;
        padding-top: 150px;
        margin-top: -980px;
        z-index: 1;
    }

    .title__webdesigner {
        min-width: 1000px;
        max-width: 1440px;
        color: #FFF;
        font-family: "Playfair Display";
        font-size: 5.0rem;
        font-weight: 400;
        padding-left: 30px;
        margin-top: -900px;
    }
    
    .title__name {
        min-width: 1000px;
        max-width: 1440px;
        color: #FAC63C;
        font-family: Kalnia;
        font-size: 12.0rem;
        font-weight: 400;
        line-height: 150px;
        letter-spacing: 2px;
        padding-top: 25px;
        padding-left: 30px;
        padding-bottom: 25px;
    }
    
    .portfolio__year {
        min-width: 1000px;
        max-width: 1440px;
        display: flex;
    }
    
    .title__portfolio {
        color: #FFF;
        font-family: "Playfair Display";
        padding-left: 30px;
        font-size: 5.0rem;
        font-weight: 400;
    }
    
    .year_sp {
        display: none;
    }
    
    .year_pc {
        display: block;
        margin-top: -200px;
    }

    .top_sp {
        display: none;
    }

    .top_pc {
        display: block;
    }

    .copy1_sp {
        min-width: 800px;
        max-width: 1000px;
        margin: 0 auto;
        transform:rotate(-15deg);  
        padding-top: 200px;
        padding-right: 0px;
    }

    p span {
        font-size: 300%;
        font-family: "Playfair Display";
        color: #fff;
        display: inline-block; 
        position: relative; 
    }
    
    .illust__top_pc {
        text-align: right;
    }

}


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

    .video__sp {
        display: none;
    }

    .video__mask__sp {
        display: none;
    }

    .video__pc {
        display: block;
        max-width: 1900px;
        position: sticky;
        text-align: right;
        padding-top: 150px;
        z-index: -1;
    }
    
    .video__mask__pc {
        display: block;
        max-width: 1900px;
        position: sticky;
        text-align: right;
        padding-top: 150px;
        margin-top: -980px;
        z-index: 1;
    }

    .title__webdesigner {
        min-width: 1000px;
        max-width: 1440px;
        color: #FFF;
        font-family: "Playfair Display";
        font-size: 5.0rem;
        font-weight: 400;
        padding-left: 30px;
        margin-top: -900px;
    }
    
    .title__name {
        min-width: 1000px;
        max-width: 1440px;
        color: #FAC63C;
        font-family: Kalnia;
        font-size: 12.0rem;
        font-weight: 400;
        line-height: 150px;
        letter-spacing: 2px;
        padding-top: 25px;
        padding-left: 30px;
        padding-bottom: 25px;
    }
    
    .portfolio__year {
        min-width: 1000px;
        max-width: 1440px;
        display: flex;
    }
    
    .title__portfolio {
        color: #FFF;
        font-family: "Playfair Display";
        padding-left: 30px;
        font-size: 5.0rem;
        font-weight: 400;
    }
    
    .year_sp {
        display: none;
    }
    
    .year_pc {
        display: block;
        margin-top: -200px;
    }

    .top_sp {
        display: none;
    }

    .top_pc {
        display: block;
    }

    .copy1_sp {
        min-width: 800px;
        max-width: 1000px;
        margin: 0 auto;
        transform:rotate(-15deg);  
        padding-top: 300px;
        padding-right: 0px;
    }

    p span {
        font-size: 300%;
        font-family: "Playfair Display";
        color: #fff;
        display: inline-block; 
        position: relative; 
    }
    
    .illust__top_pc {
        text-align: right;
    }

}


/* About */

.topic__a {
    position: sticky;
    display: flex;
    justify-content: center;
    padding-top: 70px;
    z-index: 5;
}


@keyframes infinity-scroll-left {
    from {
      transform: translateX(0);
    }
      to {
      transform: translateX(-100%);
    }
}

.scroll-infinity__wrap__sp {
    position: sticky;
    display: flex;
    overflow: hidden;
    margin-top: -100px;
    z-index: 1;
}

.scroll-infinity__wrap__pc {
    display: none;
}

.scroll-infinity__list {
    display: flex;
    list-style: none;
    padding: 0
}

.scroll-infinity__list--left {
    animation: infinity-scroll-left 40s infinite linear 0.5s both;
}

.scroll-infinity__item {
    width: 376px;
    height: 200px;
}

.scroll-infinity__item>img {
    width: 376px;
    height: 200px;
}


@keyframes infinity-scroll-right {
    from {
      transform: translateX(-100%);
    }
      to {
      transform: translateX(0%);
    }
}

.scroll-infinity__list--right{
    animation :infinity-scroll-right 40s infinite linear 0.5s both;
}


.profileImg__sp {
    position: sticky;
    text-align: center;
    margin-top: -180px;
    z-index: 5;

    animation: blur ease forwards;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
}

.profileImg__pc {
    display: none;
}


.blur {
    position: sticky;
    z-index: 10;
    transition: all 2.0s;
    filter: blur(10px);
    &.scrollin{
      filter: blur(0);
    }
}


.About__name__jp {
    font-family: "Sawarabi Gothic";
    font-size: 3.0rem;
    font-weight: 400;
    line-height: normal;
    color: #fff;
    margin-top: 23px;
    text-align: center;
}

.About__name__eng {
    font-family: "Reem Kufi";
    font-size: 1.6rem;
    font-weight: 400;
    line-height: normal;
    color: #FAC63C;
    margin-top: 5px;
    text-align: center;
}

.About__txt__all {
    font-family: "Sawarabi Gothic";
    font-size: 1.4rem;
    font-weight: 200;
    line-height: 30px;
    color: #fff;
    padding: 10px 15px 40px 20px;
    position: sticky;
    z-index: 10;
}

.About__txt {
    font-family: "Sawarabi Gothic";
    font-size: 1.4rem;
    font-weight: 200;
    line-height: 30px;
    color: #fff;
    padding-top: 30px;
    position: sticky;
    z-index: 10;
}

.btn__about__sp {
    margin: 0 auto;
    cursor: pointer;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    background: #FAC63C;
    border: 1.5px solid #FAC63C;
    border-radius: 60px;
    color: #fff;
    display: block;
    font-weight: bold;
    max-width: 230px;
    padding: 10px;
    text-align: center;
}

.btn__about__sp {
    background: #015DAF;
    color: #FAC63C;
    overflow: hidden;
    position: relative;
    transition-duration: .4s;
    z-index: 2;
}

.btn__about__sp::after {
    background: #FAC63C;
    border-radius: 50%;
    content: "";
    display: block;
    margin: auto;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    width: 100%;
    padding-top: 100%;
    height: 0;
    z-index: -1;
    transform: translateY(-50%) scale(0.1);
    transition: opacity .5s, transform 0s;
    transition-delay: 0s, .4s;
}
   
.btn__about__sp:hover {
    color: #015DAF;
}

.btn__about__sp:hover::after {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
    transition-delay: 0s;
    transition: opacity .8s, transform .6s ease-in-out;
}

.text {
    position: relative;
    font-family: "Reem Kufi";
    font-size: 2.5rem;
    font-weight: 400;
    word-spacing: .5em
}


/* About pc */

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

    .topic__a {
        max-width: 2000px;
        margin: 0 auto;
        display: flex;
        justify-content: left;
        padding-top: 100px;
        padding-left: 120px;
        padding-bottom: 200px;
    }


    @keyframes infinity-scroll-left {
        from {
          transform: translateX(0);
        }
          to {
          transform: translateX(-100%);
        }
    }

    .scroll-infinity__wrap__sp {
        display: none;
    }

    .scroll-infinity__wrap__pc {
        display: block;
        position: sticky;
        display: flex;
        overflow: hidden;
        margin-bottom: -150px;
        z-index: 1;
    }

    .scroll-infinity__list {
        display: flex;
        list-style: none;
        padding: 0
    }
    
    .scroll-infinity__list--left {
        animation: infinity-scroll-left 100s infinite linear 0.5s both;
    }
    

    .scroll-infinity__item {
        width: 793px;
        height: 226px;
    }
    
    .scroll-infinity__item>img {
        width: 793px;
        height: 226px;
    }

    @keyframes infinity-scroll-right {
        from {
          transform: translateX(-100%);
        }
          to {
          transform: translateX(0%);
        }
    }

    .scroll-infinity__list--right {
        animation: infinity-scroll-right 100s infinite linear 0.5s both;
    }


    .profile {
        display: flex;
        margin-top: -400px;
        min-width: 769px;
        max-width: 1440px;
        margin: 0 auto;
    }

    .profileImg__sp {
        display: none;
    }

    .profileImg__pc {
        position: sticky;
        display: block;
        padding-right: 70px;
        padding-left: 105px;
        margin-top: -300px;
        z-index: 5;

        animation: blur ease forwards;
        animation-timeline: view();
        animation-range: cover 0% cover 100%;
    }

    .About__name__jp {
        position: sticky;
        font-family: "Sawarabi Gothic";
        font-size: 4.0rem;
        font-weight: 400;
        line-height: normal;
        color: #fff;
        margin-top: -278px;
        text-align: left;
        z-index: 5;
    }

    .About__name__eng {
        position: sticky;
        font-family: "Reem Kufi";
        font-size: 2.0rem;
        font-weight: 400;
        line-height: normal;
        color: #FAC63C;
        margin-top: 5px;
        text-align: left;
        z-index: 5;
    }

    .About__txt__all {
        font-family: "Sawarabi Gothic";
        font-size: 1.8rem;
        max-width: 800px;
        font-weight: 200;
        line-height: 30px;
        color: #fff;
        padding: 72px 10px 72px 0px;
        position: sticky;
        z-index: 10;
    }
    
    .About__txt {
        font-family: "Sawarabi Gothic";
        font-size: 1.8rem;
        max-width: 800px;
        font-weight: 200;
        line-height: 30px;
        color: #fff;
        padding-top: 30px;
        position: sticky;
        z-index: 10;
    }

    .migiyose {
        display: flex;
        justify-content: flex-end;
        padding-right: 20px;
    }

    .btn__about__sp {
        margin: 0;
        cursor: pointer;
        transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
        background: #FAC63C;
        border: 1.5px solid #FAC63C;
        border-radius: 60px;
        color: #fff;
        display: block;
        font-weight: bold;
        width: 300px;
        padding: 10px; 
    }
    
    .btn__about__sp {
        margin: 0;
        background: #015DAF;
        color: #FAC63C;
        overflow: hidden;
        position: relative;
        transition-duration: .4s;
        z-index: 2;
    }
    
    .btn__about__sp::after {
        background: #FAC63C;
        border-radius: 50%;
        content: "";
        display: block;
        margin: auto;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        width: 100%;
        padding-top: 100%;
        height: 0;
        z-index: -1;
        transform: translateY(-50%) scale(0.1);
        transition: opacity .5s, transform 0s;
        transition-delay: 0s, .4s;
    }
       
    .btn__about__sp:hover {
        color: #015DAF;
    }
    
    .btn__about__sp:hover::after {
        opacity: 1;
        transform: translateY(-50%) scale(1.1);
        transition-delay: 0s;
        transition: opacity .8s, transform .6s ease-in-out;
    }
    
    .text {
        position: relative;
        font-family: "Reem Kufi";
        font-size: 2.5rem;
        font-weight: 400;
        word-spacing: .5em
    }

}



/* Skills */

.scroll_up {
    transition: 0.8s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
    position: sticky;
    z-index: 10;
}
.scroll_up.on {
    transform: translateY(0);
    opacity: 1.0;
    position: sticky;
    z-index: 10;
}

.scroll_left {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_left.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}


.skill1 {
    background-color: rgba(95, 132, 156, 0.7);
    margin: 20px;
    border-radius: 20px;
}

.skill1__title {
    font-family: "Reem Kufi";
    font-size: 4.0rem;
    font-weight: 400;
    line-height: normal;
    color: #FAC63C;
    padding-top: 30px;
    text-align: center;
}

.skill1__illust {
    text-align: center;
    padding-top: 20px;
}

.skill1__txt {
    font-family: "Sawarabi Gothic";
    font-size: 1.4rem;
    font-weight: 200;
    line-height: 30px;
    color: #fff;
    padding: 15px 15px 25px 20px;
}

.skill1__icon__sp {
    display: flex;
    padding-left: 20px;
    padding-bottom: 40px;
}

.skill1__icon1__sp,
.skill1__icon2__sp {
    padding-right: 10px;
}

.skill2 {
    background-color: rgba(95, 132, 156, 0.7);
    margin: 20px;
    border-radius: 20px;
}

.skill2__title {
    font-family: "Reem Kufi";
    font-size: 4.0rem;
    font-weight: 400;
    line-height: normal;
    color: #FAC63C;
    padding-top: 30px;
    text-align: center;
}

.skill2__illust {
    text-align: center;
    padding-top: 20px;
}

.skill2__txt {
    font-family: "Sawarabi Gothic";
    font-size: 1.4rem;
    font-weight: 200;
    line-height: 30px;
    color: #fff;
    padding: 15px 15px 25px 20px;
}

.skill2__icon__sp {
    display: flex;
    padding-left: 20px;
    padding-bottom: 40px;
}

.skill2__icon1__sp,
.skill2__icon2__sp {
    padding-right: 10px;
}

.skill3 {
    background-color: rgba(95, 132, 156, 0.7);
    margin: 20px;
    border-radius: 20px;
}

.skill3__title {
    font-family: "Reem Kufi";
    font-size: 4.0rem;
    font-weight: 400;
    line-height: normal;
    color: #FAC63C;
    padding-top: 30px;
    text-align: center;
}

.skill3__illust {
    text-align: center;
    padding-top: 20px;
}

.skill3__txt {
    font-family: "Sawarabi Gothic";
    font-size: 1.4rem;
    font-weight: 200;
    line-height: 30px;
    color: #fff;
    padding: 15px 15px 25px 20px;
}

.skill3__icon__sp {
    display: flex;
    padding-left: 20px;
    padding-bottom: 40px;
}

.skill3__icon1__sp,
.skill3__icon2__sp {
    padding-right: 10px;
}

.skill1__icon__pc,
.skill2__icon__pc,
.skill3__icon__pc {
    display: none;
}


/* Skills pc */

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

    .skills__all {
        display: flex;
        justify-content: center;
        padding-top: 70px;
    }

    .skill1,
    .skill2,
    .skill3 {
        background-color: rgba(95, 132, 156, 0.7);
        margin: 20px;
        border-radius: 20px;
        max-width: 367px;
    }

    .skill1__txt,
    .skill2__txt,
    .skill3__txt {
        font-family: "Sawarabi Gothic";
        font-size: 1.8rem;
        font-weight: 200;
        line-height: 30px;
        color: #fff;
        padding: 15px 15px 25px 20px;
    }

    .skill1__icon__sp,
    .skill2__icon__sp,
    .skill3__icon__sp {
        display: none;
    }

    .skill1__icon__pc,
    .skill2__icon__pc,
    .skill3__icon__pc {
        display: block;
    }

    .skill1__icon__pc,
    .skill2__icon__pc,
    .skill3__icon__pc {
        display: flex;
        padding-left: 20px;
        padding-bottom: 40px;
    }

    .skill1__icon1__pc,
    .skill1__icon2__pc,
    .skill2__icon1__pc,
    .skill2__icon2__pc,
    .skill3__icon1__pc,
    .skill3__icon2__pc {
    padding-right: 10px;
}

}



/* Works */

.Works__txt {
    font-family: "Sawarabi Gothic";
    font-size: 1.0rem;
    font-weight: 200;
    line-height: 30px;
    color: #fff;
    padding-top: 30px;
    position: sticky;
    padding: 20px 0px 20px 10px;
    text-align: center;
}

.works__all {
    width: 375px;
    margin: 0 auto;
}

.works1__sample__sp {
    text-align: center;
    padding-top: 10px;
}

.icon-process {
    display: flex;
    width: 375px;
    margin: 0 auto;
}

.icon__website {
    padding-left: 30px;
}

.works1__process,
.works2__process,
.works3__process,
.works4__process {
    font-family: "Sawarabi Gothic";
    font-size: 1.4rem;
    font-weight: 200;
    color: #fff;
    padding-top: 7px;
    padding-left: 15px;
}

.works1__title,
.works2__title,
.works3__title,
.works4__title {
    font-family: "Sawarabi Gothic";
    font-size: 1.8rem;
    font-weight: 200;
    color: #fff;
    padding-top: 10px;
    padding-left: 30px;
    padding-bottom: 20px;
    width: 375px;
    margin: 0 auto;
}

.works2__title {
    padding-bottom: 25px;
}

.works2__sample__sp,
.works3__sample__sp,
.works4__sample__sp {
    text-align: center;
    padding-top: 10px;
}

.works1__sample__pc,
.works2__sample__pc,
.works3__sample__pc,
.works4__sample__pc {
    display: none;
}


.hoverMask-parent {
    position: relative;  
    overflow: hidden;
}
  
.hoverMask {
    opacity: 0;  
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0,0,0,0.5);

    font-family: "Playfair Display";
    font-size: 2.5rem;
    font-weight: 200;

    display: flex; 
    justify-content: center; 
    align-items: center; 
    color: #fff; 
    
    text-align: center; 
    transition:all 0.6s ease;  
}
  
.hoverMask:hover {
    opacity: 1;  
}



.modal-1__wrap {
    display: inline-block;
}

.modal-1__wrap input {
    display: none;
}

.modal-1__open-label,
.modal-1__close-label {
    cursor: pointer;
}

.modal-1__open-label {
    color: #4f96f6;
    font-size: .95em;
}

.modal-1__open-label:hover {
    cursor: pointer;
}

.modal-1 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
}

.modal-1__open-input:checked + label + input + .modal-1 {
    display: block;
    animation: modal-1-animation .6s;
}

.modal-1__content-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 650px;
    background-color: #5F849C;
    z-index: 2;
    border-radius: 20px;
}

.modal-1__close-label {
    background-color: #FAC63C;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 20px;
    width: 36px;
    height: 36px;
    line-height: 1.5;
    text-align: center;
    display: table-cell;
    position: fixed;
    top: -15px;
    right: -2%;
    z-index: 99999;
    font-size: 2.0em;
}

.modal-1__content {
    max-height: 80vh;
    overflow-y: auto;
    padding: 39px 45px 40px;
}

.modal-1__background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .45);
    z-index: 1;
}

@keyframes modal-1-animation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media only screen and (max-width: 520px) {
    .modal-1__open-label {
        max-width: 90%;
        padding: .94em 2.1em .94em 2.6em;
    }

    .modal-1__close-label {
        top: -17px;
        right: -4%;
    }

    .modal-1__content-wrap {
        width: 90vw;
    }

    .modal-1__content {
        padding: 33px 21px 35px;
        max-width: 100%;
    }
}


.modal-2__wrap {
    display: inline-block;
}

.modal-2__wrap input {
    display: none;
}

.modal-2__open-label,
.modal-2__close-label {
    cursor: pointer;
}

.modal-2__open-label {
    color: #4f96f6;
    font-size: .95em;
}

.modal-2__open-label:hover {
    cursor: pointer;
}

.modal-2 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
}

.modal-2__open-input:checked + label + input + .modal-2 {
    display: block;
    animation: modal-2-animation .6s;
}

.modal-2__content-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 650px;
    background-color: #5F849C;
    z-index: 2;
    border-radius: 20px;
}

.modal-2__close-label {
    background-color: #FAC63C;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 20px;
    width: 36px;
    height: 36px;
    line-height: 1.5;
    text-align: center;
    display: table-cell;
    position: fixed;
    top: -15px;
    right: -2%;
    z-index: 99999;
    font-size: 2.0em;
}

.modal-2__content {
    max-height: 80vh;
    overflow-y: auto;
    padding: 39px 45px 40px;
}

.modal-2__background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .45);
    z-index: 1;
}

@keyframes modal-2-animation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media only screen and (max-width: 520px) {
    .modal-2__open-label {
        max-width: 90%;
        padding: .94em 2.1em .94em 2.6em;
    }

    .modal-2__close-label {
        top: -17px;
        right: -4%;
    }

    .modal-2__content-wrap {
        width: 90vw;
    }

    .modal-2__content {
        padding: 33px 21px 35px;
        max-width: 100%;
    }
}


.modal-3__wrap {
    display: inline-block;
}

.modal-3__wrap input {
    display: none;
}

.modal-3__open-label,
.modal-3__close-label {
    cursor: pointer;
}

.modal-3__open-label {
    color: #4f96f6;
    font-size: .95em;
}

.modal-3__open-label:hover {
    cursor: pointer;
}

.modal-3 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
}

.modal-3__open-input:checked + label + input + .modal-3 {
    display: block;
    animation: modal-3-animation .6s;
}

.modal-3__content-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 650px;
    background-color: #5F849C;
    z-index: 2;
    border-radius: 20px;
}

.modal-3__close-label {
    background-color: #FAC63C;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 20px;
    width: 36px;
    height: 36px;
    line-height: 1.5;
    text-align: center;
    display: table-cell;
    position: fixed;
    top: -15px;
    right: -2%;
    z-index: 99999;
    font-size: 2.0em;
}

.modal-3__content {
    max-height: 80vh;
    overflow-y: auto;
    padding: 39px 45px 40px;
}

.modal-3__background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .45);
    z-index: 1;
}

@keyframes modal-3-animation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media only screen and (max-width: 520px) {
    .modal-3__open-label {
        max-width: 90%;
        padding: .94em 2.1em .94em 2.6em;
    }

    .modal-3__close-label {
        top: -17px;
        right: -4%;
    }

    .modal-3__content-wrap {
        width: 90vw;
    }

    .modal-3__content {
        padding: 33px 21px 35px;
        max-width: 100%;
    }
}


.modal-4__wrap {
    display: inline-block;
}

.modal-4__wrap input {
    display: none;
}

.modal-4__open-label,
.modal-4__close-label {
    cursor: pointer;
}

.modal-4__open-label {
    color: #4f96f6;
    font-size: .95em;
}

.modal-4__open-label:hover {
    cursor: pointer;
}

.modal-4 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
}

.modal-4__open-input:checked + label + input + .modal-4 {
    display: block;
    animation: modal-4-animation .6s;
}

.modal-4__content-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 650px;
    background-color: #5F849C;
    z-index: 2;
    border-radius: 20px;
}

.modal-4__close-label {
    background-color: #FAC63C;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 20px;
    width: 36px;
    height: 36px;
    line-height: 1.5;
    text-align: center;
    display: table-cell;
    position: fixed;
    top: -15px;
    right: -2%;
    z-index: 99999;
    font-size: 2.0em;
}

.modal-4__content {
    max-height: 80vh;
    overflow-y: auto;
    padding: 39px 45px 40px;
}

.modal-4__background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .45);
    z-index: 1;
}

@keyframes modal-4-animation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media only screen and (max-width: 520px) {
    .modal-4__open-label {
        max-width: 90%;
        padding: .94em 2.1em .94em 2.6em;
    }

    .modal-4__close-label {
        top: -17px;
        right: -4%;
    }

    .modal-4__content-wrap {
        width: 90vw;
    }

    .modal-4__content {
        padding: 33px 21px 35px;
        max-width: 100%;
    }
}




.title__all__sp {
    display: flex;
}

.title__all__pc {
    display: none;
}

.modal__wave {
    padding-top: 5px;
    margin-left: -25px;
}

.works__title {
    font-family: "Sawarabi Gothic";
    font-size: 1.8rem;
    font-weight: 200;
    color: #fff;
    padding-top: 7px;
    padding-left: 15px;
}

.work__sample__sp {
    text-align: center;
    padding-top: 20px;
}

.work__sample__pc {
    display: none;
}

.works__detail1234 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.works__detail {
    display: flex;
    padding-bottom: 10px;
}

.works__detail__title {
    font-family: "Sawarabi Gothic";
    font-size: 1.4rem;
    font-weight: 200;
    color: #FAC63C;
}

.works__detail__txt {
    font-family: "Sawarabi Gothic";
    font-size: 1.2rem;
    font-weight: 200;
    color: #fff;
    padding-top: 3px;
    padding-left: 20px;
}

.works__detail__txt__min {
    font-family: "Sawarabi Gothic";
    font-size: 1.1rem;
    font-weight: 200;
    color: #fff;
    padding-top: 3px;
    padding-left: 20px;
}


.btn__works__sp {
    text-align: center;
    margin: 0 auto;
    cursor: pointer;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    background: #FAC63C;
    border: 1.5px solid #FAC63C;
    border-radius: 60px;
    color: #fff;
    display: block;
    font-weight: bold;
    width: 250px;
    padding: 10px; 
}

.btn__works__sp {
    text-align: center;
    margin: 0 auto;
    background: #5F849C;
    color: #FAC63C;
    overflow: hidden;
    position: relative;
    transition-duration: .4s;
    z-index: 2;
}

.btn__works__sp::after {
    background: #FAC63C;
    border-radius: 50%;
    content: "";
    display: block;
    margin: auto;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    width: 100%;
    padding-top: 100%;
    height: 0;
    z-index: -1;
    transform: translateY(-50%) scale(0.1);
    transition: opacity .5s, transform 0s;
    transition-delay: 0s, .4s;
}
   
.btn__works__sp:hover {
    color: #015DAF;
}

.btn__works__sp:hover::after {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
    transition-delay: 0s;
    transition: opacity .8s, transform .6s ease-in-out;
}

.text {
    position: relative;
    font-family: "Reem Kufi";
    font-size: 2.5rem;
    font-weight: 400;
    word-spacing: .5em
}

.works__detail56789 {
    padding-top: 30px;
}

.works__detail__title2 {
    font-family: "Sawarabi Gothic";
    font-size: 1.6rem;
    font-weight: 200;
    color: #FAC63C;
    text-align: center;
}

.works__detail__txt2 {
    font-family: "Sawarabi Gothic";
    font-size: 1.2rem;
    font-weight: 200;
    color: #fff;
    padding-top: 10px;
    padding-left: 0px;
    padding-bottom: 30px;
    line-height: 20px
}

.works__detail__txt2__last {
    font-family: "Sawarabi Gothic";
    font-size: 1.2rem;
    font-weight: 200;
    color: #fff;
    padding-top: 10px;
    padding-left: 0px;
    padding-bottom: 10px;
    line-height: 20px
}



/* Works pc */

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

    .Works__txt {
        display: none;
    }

    .works__all {
        padding-top: 50px;
        padding-right: 20px;
        padding-left: 20px;
    }

    .title__all__sp {
        display: none;
    }

    .work__sample__sp {
        display: none;
    }

    .work__sample__pc {
        display: block;
        padding-left: 20px;
        padding-right: 70px;
    }

    .title__all__pc {
        display: block;
        display: flex;
        padding-left: 30px;
    }

    .works__yokonarabi {
        display: flex;
        padding-top: 30px;
        padding-left: 0px;
    }

    .works12,
    .works34 {
        display: flex;
        justify-content: center;
    }

    .works34 {
        padding-top: 100px;
    }

    .works1,
    .works3 {
        padding-right: 10px;
    }

    .works2,
    .works4 {
        padding-left: 10px;
    }

    .works1__sample__sp,
    .works2__sample__sp,
    .works3__sample__sp,
    .works4__sample__sp {
        display: none;
    }

    .works1__sample__pc,
    .works2__sample__pc,
    .works3__sample__pc,
    .works4__sample__pc {
        display: block;
    }

    .icon-process {
        display: flex;
        margin-left: 2px;
    }

    .works1__process,
    .works2__process,
    .works3__process,
    .works4__process {
        font-family: "Sawarabi Gothic";
        font-size: 1.8rem;
        font-weight: 200;
        color: #fff;
        padding-top: 4px;
        padding-left: 15px;
    }

    .works1__title,
    .works2__title,
    .works3__title,
    .works4__title {
        font-family: "Sawarabi Gothic";
        font-size: 2.5rem;
        font-weight: 200;
        color: #fff;
        padding-top: 10px;
        padding-left: 30px;
        width: 500px;
    }


    .modal-1__content-wrap,
    .modal-2__content-wrap,
    .modal-3__content-wrap,
    .modal-4__content-wrap {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        max-width: 1200px;
        background-color: #5F849C;
        z-index: 2;
        border-radius: 20px;
    }

    .modal__wave {
        padding-top: 10px;
    }

    .works__title {
        font-family: "Sawarabi Gothic";
        font-size: 2.0rem;
        font-weight: 200;
        color: #fff;
        padding-left: 30px;
    }

    .works__detail__title {
        font-family: "Sawarabi Gothic";
        font-size: 2.0rem;
        font-weight: 200;
        color: #FAC63C;
    }

    .works__detail__txt,
    .works__detail__txt__min {
        font-family: "Sawarabi Gothic";
        font-size: 1.6rem;
        font-weight: 200;
        color: #fff;
        padding-top: 3px;
        padding-left: 20px;
    }

    .migiyose {
        padding-right: 0px;
        padding-left: 270px;
    }

    .works__detail__title2 {
        font-family: "Sawarabi Gothic";
        font-size: 2.0rem;
        font-weight: 200;
        color: #FAC63C;
        text-align: center;
    }
    
    .works__detail__txt2 {
        font-family: "Sawarabi Gothic";
        font-size: 1.6rem;
        font-weight: 200;
        color: #fff;
        padding-top: 10px;
        padding-left: 0px;
        padding-bottom: 50px;
        line-height: 30px
    }

    .works__detail__txt2__last {
        font-family: "Sawarabi Gothic";
        font-size: 1.6rem;
        font-weight: 200;
        color: #fff;
        padding-top: 10px;
        padding-left: 0px;
        padding-bottom: 10px;
        line-height: 30px
    }

    .modal-1__content,
    .modal-2__content,
    .modal-3__content,
    .modal-4__content {
        max-height: 80vh;
        overflow-y: auto;
        padding: 40px 100px 40px 100px;
    }

}


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

    .works__all {
        padding-top: 50px;
    }

    .works12,
    .works34 {
        display: flex;
        justify-content: center;
    }

    .works34 {
        padding-top: 100px;
    }

    .works1,
    .works3 {
        padding-right: 50px;
        margin-left: 50px;
    }

    .works2,
    .works4 {
        margin-right: 50px;
        padding-left: 50px;
    }

    .works1__sample__sp,
    .works2__sample__sp,
    .works3__sample__sp,
    .works4__sample__sp {
        display: none;
    }

    .works1__sample__pc,
    .works2__sample__pc,
    .works3__sample__pc,
    .works4__sample__pc {
        display: block;
    }

    .works1__process,
    .works2__process,
    .works3__process,
    .works4__process {
        font-family: "Sawarabi Gothic";
        font-size: 1.8rem;
        font-weight: 200;
        color: #fff;
        padding-top: 4px;
        padding-left: 15px;
    }

    .works1__title,
    .works2__title,
    .works3__title,
    .works4__title {
        font-family: "Sawarabi Gothic";
        font-size: 2.5rem;
        font-weight: 200;
        color: #fff;
        padding-top: 10px;
        padding-left: 30px;
        width: 500px;
    }

}



/* ======================
　　　　　Footer
======================= */

.footer__topic__sp {
    padding-top: 70px;
    padding-left: 20px;
    margin-bottom: -10px;
}

.footer__topic__pc {
    display: none;
}

.arrow__btn {
    display: flex;
}

.arrow_sp {
    position: sticky;
    padding-left: 60px;
    margin-bottom: -110px;
    z-index: 5;
}

.btn__top_sp {
    text-align: right;
    padding-right: 20px;
    margin-top: -20px;
    margin-bottom: -10px;
    z-index: 50;
}

.btn__top_pc {
    display: none;
}

.fluffy {
    position: sticky;
    z-index: 50;
    animation: fluffy 3s infinite;
}
  
 @keyframes fluffy {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
}

.address {
    color: #FFF;
    font-family: "Playball";
    font-size: 3.0rem;
    font-weight: 400;
    padding-top: 20px;
    text-align: center;
    position: sticky;
    z-index: 10;
}

.my-parts2 {
	display: inline-block;
	transition: all .3s ease 0s;
	text-decoration: none;
}

.my-parts2:hover {
	cursor: pointer;
	color: #015DAF;
}

.copy {
    text-align: center;
    color: #FFF;
    font-family: "Reem Kufi";
    font-size: 1.0rem;
    font-weight: 400;
    padding-top: 20px;
    padding-left: 10px;
    margin-bottom: -120px;
    position: sticky;
    z-index: 5;
}

.scroll-infinity__wrap__pc__footer {
    display: none;
}

.scroll-infinity__item__f {
    width: 376px;
    height: 130px;
}

.scroll-infinity__item__f>img {
    width: 376px;
    height: 130px;
}


/* Footer pc */

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

    .footer__topic__sp {
        display: none;
    }

    .footer__topic__pc {
        display: block;
        padding-top: 50px;
        padding-left: 30px;
        margin-bottom: -50px;
    }

    .arrow_sp {
        position: sticky;
        padding-left: 100px;
        margin-bottom: -110px;
        z-index: 5;
    }

    .btn__top_sp {
        display: none;
    }

    .btn__top_pc {
        display: block;
        text-align: right;
        padding-right: 50px;
        margin-top: -10px;
        margin-bottom: -15px;
    }

    .address {
        color: #FFF;
        font-family: "Playball";
        font-size: 7.0rem;
        font-weight: 400;
        padding-top: 20px;
        text-align: center;
    }

    .copy {
        color: #FFF;
        font-family: "Reem Kufi";
        font-size: 1.8rem;
        font-weight: 400;
        padding-top: 20px;
        padding-left: 10px;
        padding-bottom: 10px;
        text-align: center;
    }

    .scroll-infinity__wrap__pc__footer {
        display: block;
        position: sticky;
        display: flex;
        overflow: hidden;
        margin-top: -220px;
        z-index: 1;
    }

    .scroll-infinity__list {
        display: flex;
        list-style: none;
        padding: 0
    }
    
    .scroll-infinity__list--left {
        animation: infinity-scroll-left 100s infinite linear 0.5s both;
    }
    

    .scroll-infinity__item {
        width: 793px;
        height: 226px;
    }
    
    .scroll-infinity__item>img {
        width: 793px;
        height: 226px;
    }

    @keyframes infinity-scroll-right {
        from {
          transform: translateX(-100%);
        }
          to {
          transform: translateX(0%);
        }
    }

    .scroll-infinity__list--right {
        animation: infinity-scroll-right 100s infinite linear 0.5s both;
    }

}