@charset "UTF-8";

/* PC：1024px〜 */
@media (min-width: 1024px) {
    /* PC用のスタイル */
  

.container {
    width: 100%;
    /* background-color: hotpink; */
}

.header {
    width: 100%;
    /* background-color: darkkhaki; */
    display: flex;
}

.rogo {
    width: 30%;
    background-color: rgb(0, 0, 0);
    padding-top: 40px;
    padding-left: 50px;
    padding-bottom: 50px;
}

.rogo p {
    font-size: 30px;
    color: #ffffff;
}

.navi {
    width: 70%;
    background-color: rgb(0, 0, 0);
}

.navi ul {
    display: flex;
    justify-content: space-around;
    padding-top: 50px;
    padding-bottom: 50px;
    align-items: center;
}

.navi li {
    list-style: none;
}

.navi a {
    color: #ffffff;
    text-decoration: none;
}

.navi a:hover {
    color: #ff00d0;
}


.hamburger{
    display: none;
}




.top {
    width: 100%;
    height: 1000px;
    background-image: url(../img/NATTYp.png);
    background-size: cover;
    background-position: center;
}

.message {
    width: 100%;
    height: 520px;
    background-image: url(../img/keyboard2.png);
    text-align: center;
    /* padding-top: 70px;
    padding-bottom: 70px; */
    font-size: 30px;
    color: #ffffff;
}


.message h1{
    padding-top: 100px;
    padding-bottom: 30px;
}





/* .paper0{
    width: 100%;
    background-color: #FA999B;
} */

.paper0 img {
    width: 100%;
    background-color: #34312f;
    height: 100%;
}

.profile {
    width: 100%;
    height: 900px;
    display: flex;
    background-image: url(../img/paper.png);
    background-size: cover;
    background-position: center;
}

.text {
    width: 50%;
    /* background-color: khaki; */
    padding-top: 100px;
    padding-left: 200px;

}

.text h2 {
    font-size: 100px;
}

.text h3 {
    font-size: 40px;
}


.photo {
    width: 50%;
    /* background-color: lightsalmon; */
    padding-top: 70px;
    padding-left: 70px;
}

.photo img {
    width: 100%;
}

.paper2 {
    width: 100%;
    margin-top: -120px;
    /* background-color: rgb(91, 255, 69); */
}

.paper2 img {
    width: 100%;
}

.service {
    width: 100%;
    height: 800px;
    margin-top: -30px;
    background-color: #34312f;
    padding-top: 80px;
    text-align: center;
}


.layer {
    width: 20%;
    height: 300px;
    padding-right: 20%;
    margin-left: 40px;
    margin-top: -250px;
    /* background-color: #ff00a2; */
}

.layer img{
    height: 300px;
    padding-left: 60px;
}

.service h2 {
    color: rgb(255, 255, 255);
    font-size: 100px;
}

.block {
    display: flex;
    margin-bottom: 25px;
    justify-content: space-around;
    color: #FFF;
}

.servicepc {
    width: 30%;
}

.servicepc img {
    width: 80%;
    margin-left: 20%;

}


.servicemeisi {
    width: 30%;
}

.servicemeisi p{
    margin-bottom: 50px;
}

.servicemeisi img {
    width: 80%;
    margin-top: -20%;

}


.serviceinsta {
    width: 30%;
}


.serviceinsta img {
    width: 80%;
    margin-right: 40%;
}


.wrapper{
	overflow: hidden;
}


/* .box{
	width: 220px;
	padding: 20px;
	margin:0 20px 20px 0;
	background: #666;
	color: #fff;
	box-sizing:border-box;
} */





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


/* fadeUp */

.fadeUp{
    animation-name: fadeUpAnime;
    animation-duration:3s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeUpAnime{
      from {
        opacity: 0;
        transform: translateY(100px);
      }
    
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    
    /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
     
    /* .fadeUpTrigger{
        opacity: 0;
    }
     */

    

 .fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1.5s ease forwards;
  }
  
  
  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* 初期状態（透明 & 下にずらす） */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s ease, transform 1.2s ease;
  }
  
  /* 表示された時に適用するクラス */
  .fade-in.show {
    opacity: 1;
    transform: translateY(0);
  }




/*その他と主な共通部分は省略*/

a.btn-solid {
    padding: 20px;
    color: #fff;
    border-top: 20px solid #ec48b5;
    border-right: 20px solid #5f0a5e;
    border-bottom: 20px solid #c11b98;
    border-left: 20px solid #f38cf9;
    border-radius: 0;
    background: #a3117a;
  }
  
  a.btn-solid:hover {
    color: #fff;
    padding: 20px;
    border-top: 20px solid #740f68;
    border-right: 20px solid #f98ce5;
    border-bottom: 20px solid #ec48d6;
    border-left: 20px solid #5f0a5f;
  }






.paper3 {
    width: 100%;
    /* background-color: gold; */
}

.paper3 img {
    width: 100%;
}

.work {
    width: 100%;
    margin-bottom: 100px;
}

/*==================================================
ギャラリーのためのcss
===================================*/

/*＝＝＝並び替えボタンのCSS*/
.sort-btn {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 50px 20px;
}

.sort-btn li {
    background: #ff00a2;
    border-radius: 10px;
    cursor: pointer;
    padding: 10px;
    margin: 0 10px;
}

.sort-btn li.active {
    /*ボタンに現在地＝activeというクラス名がついたら背景色を変更*/
    background: #1b1ef3;
}

/*横幅が480px以下になった際の指定*/
@media only screen and (max-width: 480px) {
    .sort-btn {
        justify-content: space-between;
    }

    .sort-btn li {
        width: 48%;
        margin: 0 0 10px 0;
        text-align: center;
    }
}

/*＝＝＝Muuriのレイアウトのための調整 */
.grid {
    position: relative;
    /*並び替えの基準点を指定*/
}

/*各画像の横幅などの設定*/
.item {
    display: block;
    position: absolute;
    width: 33%;
    /*横並びで3つ表示*/
    z-index: 1;
}

/*内側のボックスの高さが崩れないように維持*/
.item-content {
    position: relative;
    width: 100%;
    height: 100%;
}

/*画像の横幅を100%にしてレスポンシブ化*/
.grid img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
    /*画像の下にできる余白を削除*/
}

/*横幅が768px以下になった際の指定*/
@media only screen and (max-width: 768px) {
    .item {
        width: 49.5%;
        /*横並びで2つ表示*/
    }
}

/*＝＝＝fancyboxサムネイル背景と画像選択時の枠線の指定*/
.fancybox-thumbs {
    background: transparent !important;
}

.fancybox-thumbs__list a:before {
    border: 6px solid #FA999B;
}


/*========= レイアウトのためのCSS ===============*/
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: #333;
}

a:hover,
a:active {
    text-decoration: none;
}









.skill {
    width: 100%;
    /* background-color: greenyellow; */
}

.skill h2 {
    text-align: center;
    font-size: 100px;
}





.class{
    width: 90%;
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    justify-content: center;
    text-align: center;
    /* background-color: blueviolet; */
}

.class img{
    align-items: center;
}
.png1{
    width: 28%;
    /* background-color: magenta; */
}

.png1 img{
    width: 90%;
    padding-bottom: 20px;
}

.png2{
    width: 28%;
    /* background-color: mediumorchid; */
}

.png2 img{
    width: 90%;
    padding-bottom: 20px;
}


.png3{
    width: 28%;
    /* background-color: brown; */
}

.png3 img{
    width: 90%;
    padding-bottom: 20px;
}




.camera{
    width: 90%;
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 40px;
    /* background-color: palegreen; */
}

.camera h2{
    /* background-color: rgb(132, 81, 81); */
    text-align: center;
}










.contact {
    width: 100%;
    height: 700px;
    background-image: url(../img/deel3.png);
    background-size: cover;
    background-position: 0%;
    text-align: center;
    background-color: aquamarine;
}

.contact h2 {
    padding: auto;
    padding-top: 80px;
    padding-bottom: 40px;
    font-size: 100px;

}


.button1 {
    width: 50%;
    padding-bottom: 40px;
    display: inline-flex;
    flex-direction: column;
}

.btn-gradient-radius {
    display: inline-block;
    padding: 7px 20px;
    border-radius: 25px;
    text-decoration: none;
    color: #FFF;
    background-image: linear-gradient(45deg, #ff00fb 0%, #ff5ff7 100%);
    transition: .4s;
}

.btn-gradient-radius:hover {
    background-image: linear-gradient(45deg, #fea8ef 0%, #ffd7fe 100%);
}







.skill {
    width: 100%;
    /* background-color: greenyellow; */
}

.skill h2 {
    text-align: center;
    font-size: 100px;
}





.class{
    width: 90%;
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    justify-content: center;
    text-align: center;
    /* background-color: blueviolet; */
}

.class img{
    align-items: center;
}
.png1{
    width: 28%;
    /* background-color: magenta; */
}

.png1 img{
    width: 90%;
    padding-bottom: 20px;
}

.png2{
    width: 28%;
    /* background-color: mediumorchid; */
}

.png2 img{
    width: 90%;
    padding-bottom: 20px;
}


.png3{
    width: 28%;
    /* background-color: brown; */
}

.png3 img{
    width: 90%;
    padding-bottom: 20px;
}




.camera{
    width: 90%;
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 40px;
    /* background-color: palegreen; */
}

.camera h2{
    /* background-color: rgb(132, 81, 81); */
    text-align: center;
}








.button2 {
    width: 50%;
    display: inline-flex;
    flex-direction: column;
}

.btn-gradient-radius {
    display: inline-block;
    padding: 7px 20px;
    border-radius: 25px;
    text-decoration: none;
    color: #FFF;
    background-image: linear-gradient(45deg, #ff00fb 0%, #ff5ff7 100%);
    transition: .4s;
}

.btn-gradient-radius:hover {
    background-image: linear-gradient(45deg, #fea8ef 0%, #ffd7fe 100%);
}





/*==================================================
スライダーのためのcss
===================================*/
.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 10px;/*スライド左右の余白調整*/
}




.footer {
    width: 100%;
    padding-top: 60px;
    padding-bottom: 50px;
    text-align: center;
    background-color: deeppink;
}

/* .paper4 {
    width: 100%;
    height: 50%;
    margin-top: -80px;
} */

}




















/* iPad (タブレット)：768px〜1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    /* iPad・タブレット用のスタイル */

    .container {
        width: 100%;
        /* background-color: hotpink; */
    }
    
    .header {
        width: 100%;
        /* background-color: darkkhaki; */
        display: flex;
    }
    
    .rogo {
        width: 30%;
        background-color: rgb(0, 0, 0);
        padding-top: 40px;
        padding-left: 50px;
        padding-bottom: 50px;
    }
    
    .rogo p {
        font-size: 20px;
        color: #ffffff;
    }
    
    .navi {
        width: 70%;
        background-color: rgb(0, 0, 0);
    }
    

    .navi ul {
        display: flex;
        background-color: #a3117a;
        justify-content: space-around;
        padding-top: 50px;
        padding-bottom: 50px;
        align-items: center;
    }
    
    .navi li {
        list-style: none;
    }
    
    .navi a {
        color: #ffffff;
        text-decoration: none;
    }
    
    .navi a:hover {
        color: #ff00d0;
    }


   



    .hamburger{
        display: none;
    }




    .top {
        width: 100%;
        height: 600px;
        background-image: url(../img/NATTYp2.png);
        background-size: cover;
        background-position: center;
    }
    
    .message {
        width: 100%;
        height: 350px;
        background-image: url(../img/keyboard2.png);
        text-align: center;
        /* padding-top: 70px;
        padding-bottom: 70px; */
        font-size: 20px;
        color: #ffffff;
    }

    .message h1{
        padding-top: 40px;
        padding-bottom: 60px;
    }
        
    /* .message h1 {
        padding-bottom: 30%;
    } */
    
    /* .paper0{
        width: 100%;
        background-color: #FA999B;
    } */
    
    .paper0 img {
        width: 80%;
        background-color: #34312f;
        height: 100%;
    }
    
    .profile {
        width: 100%;
        height: 800px;
        display: flex;
        background-image: url(../img/paper.png);
        background-size: cover;
        background-position: center;
    }
    
    .text {
        width: 50%;
        /* background-color: khaki; */
        padding-top: 100px;
        padding-left: 80px;
        font-size: 10px;
    }

    
    .text h2 {
        font-size: 90px;
        padding-left: 150px;
    }

    .photo {
        width: 50%;
        /* background-color: lightsalmon; */
        padding-top: 70px;
        padding-left: 70px;
    }
    
    .photo img {
        width: 100%;
        padding-top: 200px;
        padding-right: -100px;
    }
    
    .text h3 {
        font-size: 50px;
    }
    
        
    .paper2 {
        width: 100%;
        margin-top: -120px;
        /* background-color: rgb(91, 255, 69); */
    }
    
    .paper2 img {
        width: 100%;
    }
    
    .service {
        width: 100%;
        height: 800px;
        margin-top: -30px;
        background-color: #34312f;
        padding-top: 80px;
        text-align: center;
    }

    .service h2{
        padding-bottom: 30px;
    }
    
    
    .layer {
        width: 20%;
        height: 300px;
        padding-right: 20%;
        margin-left: 40px;
        margin-top: -250px;
        /* background-color: #ff00a2; */
    }
    
    .layer img{
        height: 300px;
        padding-left: 60px;
    }
    
    .service h2 {
        color: rgb(255, 255, 255);
        font-size: 90px;
    }

    
    .block {
        display: flex;
        margin-bottom: 80px;
        justify-content: space-around;
        color: #FFF;
    }
    
    .servicepc {
        width: 30%;
    }
    
    .servicepc img {
        width: 80%;
        margin-left: 20%;
    
    }
    
    
    .servicemeisi {
        width: 30%;
    }
    
    .servicemeisi p{
        margin-bottom: 50px;
    }
    
    .servicemeisi img {
        width: 80%;
        margin-top: -20%;
    
    }
    
    
    .serviceinsta {
        width: 30%;
    }
    
    
    .serviceinsta img {
        width: 80%;
        /* margin-right: 40%; */
    }
    
    
    
   
    

    .wrapper{
        overflow: hidden;
    }
    
    
    /* .box{
        width: 220px;
        padding: 20px;
        margin:0 20px 20px 0;
        background: #666;
        color: #fff;
        box-sizing:border-box;
    } */
    
    
    
    
    
    /*==================================================
    ふわっ
    ===================================*/
    
    
    /* fadeUp */
    
    .fadeUp{
        animation-name: fadeUpAnime;
        animation-duration:3s;
        animation-fill-mode:forwards;
        opacity:0;
        }
        
        @keyframes fadeUpAnime{
          from {
            opacity: 0;
            transform: translateY(100px);
          }
        
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        
        
        /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
         
        /* .fadeUpTrigger{
            opacity: 0;
        }
         */
    
        
    
     .fade-in {
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1.5s ease forwards;
      }
      
      
      @keyframes fadeInUp {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
    
      /* 初期状態（透明 & 下にずらす） */
    .fade-in {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 1.2s ease, transform 1.2s ease;
      }
      
      /* 表示された時に適用するクラス */
      .fade-in.show {
        opacity: 1;
        transform: translateY(0);
      }
    
    
    
    
    /*その他と主な共通部分は省略*/

    a.btn-solid {
        padding: 20px;
        color: #fff;
        border-top: 20px solid #ec48b5;
        border-right: 20px solid #5f0a5e;
        border-bottom: 20px solid #c11b98;
        border-left: 20px solid #f38cf9;
        border-radius: 0;
        background: #a3117a;
      }
      
      a.btn-solid:hover {
        color: #fff;
        padding: 20px;
        border-top: 20px solid #740f68;
        border-right: 20px solid #f98ce5;
        border-bottom: 20px solid #ec48d6;
        border-left: 20px solid #5f0a5f;
      }
    
    
    
    
    
    
    .paper3 {
        width: 100%;
        /* background-color: gold; */
    }
    
    .paper3 img {
        width: 100%;
        margin-top: -70px;
    }
    
    .work {
        width: 100%;
        margin-bottom: 100px;
    }
    
    /*==================================================
    ギャラリーのためのcss
    ===================================*/
    
    /*＝＝＝並び替えボタンのCSS*/
    .sort-btn {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding: 50px 20px;
    }
    
    .sort-btn li {
        background: #ff00a2;
        border-radius: 10px;
        cursor: pointer;
        padding: 10px;
        margin: 0 10px;
    }
    
    .sort-btn li.active {
        /*ボタンに現在地＝activeというクラス名がついたら背景色を変更*/
        background: #1b1ef3;
    }
    
    /*横幅が480px以下になった際の指定*/
    @media only screen and (max-width: 480px) {
        .sort-btn {
            justify-content: space-between;
        }
    
        .sort-btn li {
            width: 48%;
            margin: 0 0 10px 0;
            text-align: center;
        }
    }
    
    /*＝＝＝Muuriのレイアウトのための調整 */
    .grid {
        position: relative;
        /*並び替えの基準点を指定*/
    }
    
    /*各画像の横幅などの設定*/
    .item {
        display: block;
        position: absolute;
        width: 33%;
        /*横並びで3つ表示*/
        z-index: 1;
    }
    
    /*内側のボックスの高さが崩れないように維持*/
    .item-content {
        position: relative;
        width: 100%;
        height: 100%;
    }
    
    /*画像の横幅を100%にしてレスポンシブ化*/
    .grid img {
        width: 100%;
        height: auto;
        vertical-align: bottom;
        /*画像の下にできる余白を削除*/
    }
    
    /*横幅が768px以下になった際の指定*/
    @media only screen and (max-width: 768px) {
        .item {
            width: 49.5%;
            /*横並びで2つ表示*/
        }
    }
    
    /*＝＝＝fancyboxサムネイル背景と画像選択時の枠線の指定*/
    .fancybox-thumbs {
        background: transparent !important;
    }
    
    .fancybox-thumbs__list a:before {
        border: 6px solid #FA999B;
    }
    
    
    /*========= レイアウトのためのCSS ===============*/
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    a {
        color: #333;
    }
    
    a:hover,
    a:active {
        text-decoration: none;
    }
    
    
    
    
    
    
    
    
    
    .skill {
        width: 100%;
        /* background-color: greenyellow; */
    }
    
    .skill h2 {
        text-align: center;
        font-size: 100px;
    }
    
    
    


    .class{
        width: 90%;
        margin: 0 auto;
        padding-top: 40px;
        padding-bottom: 40px;
        display: flex;
        justify-content: center;
        text-align: center;
        /* background-color: blueviolet; */
    }
    
    .class img{
        align-items: center;
    }
    .png1{
        width: 28%;
        /* background-color: magenta; */
    }
    
    .png1 img{
        width: 90%;
        padding-bottom: 20px;
    }
    
    .png2{
        width: 28%;
        /* background-color: mediumorchid; */
    }
    
    .png2 img{
        width: 90%;
        padding-bottom: 20px;
    }
    
    
    .png3{
        width: 28%;
        /* background-color: brown; */
    }
    
    .png3 img{
        width: 90%;
        padding-bottom: 20px;
    }
    
    
    
    
    .camera{
        width: 70%;
        margin: 0 auto;
        padding-top: 40px;
        padding-bottom: 40px;
        /* background-color: palegreen; */
    }
    
    .camera h2{
        /* background-color: rgb(132, 81, 81); */
        text-align: center;
    }

    








    
    .contact {
        width: 100%;
        height: 500px;
        background-image: url(../img/deel3.png);
        background-size: cover;
        background-position: 0%;
        text-align: center;
        background-color: aquamarine;
    }
    
    .contact h2 {
        padding: auto;
        padding-top: 80px;
        padding-bottom: 40px;
        font-size: 90px;
    
    }
    
    
    .button1 {
        width: 50%;
        padding-bottom: 40px;
        display: inline-flex;
        flex-direction: column;
    }
    
    .btn-gradient-radius {
        display: inline-block;
        padding: 7px 20px;
        border-radius: 25px;
        text-decoration: none;
        color: #FFF;
        background-image: linear-gradient(45deg, #ff00fb 0%, #ff5ff7 100%);
        transition: .4s;
    }
    
    .btn-gradient-radius:hover {
        background-image: linear-gradient(45deg, #fea8ef 0%, #ffd7fe 100%);
    }
    
    
    
    
    
    
    .button2 {
        width: 50%;
        display: inline-flex;
        flex-direction: column;
    }
    
    .btn-gradient-radius {
        display: inline-block;
        padding: 7px 20px;
        border-radius: 25px;
        text-decoration: none;
        color: #FFF;
        background-image: linear-gradient(45deg,  deeppink 0%, #ff5ff7 100%);
        transition: .4s;
    }
    
    .btn-gradient-radius:hover {
        background-image: linear-gradient(45deg, #fea8ef 0%, #ffd7fe 100%);
    }
    
    
    
    
    
    .footer {
        width: 100%;
        padding-top: 60px;
        padding-bottom: 50px;
        text-align: center;
        background-color: deeppink;
    }
    
    /* .paper4 {
        width: 100%;
        height: 50%;
        margin-top: -80px;
    } */
    
  }























/* 携帯 (スマホ)：〜767px */
@media (max-width: 767px) {
    /* スマホ用のスタイル */
  

    .container {
        width: 100%;
        /* background-color: hotpink; */
    }
    
    .header {
        width: 100%;
        background-color: darkkhaki;
        display: flex;
    }
    
    .rogo {
        width: 30%;
        background-color: rgb(0, 0, 0);
        padding-top: 40px;
        padding-left: 50px;
        padding-bottom: 50px;
    }
    
    .rogo p {
        font-size: 20px;
        color: #ffffff;
    }
    
    .navi {
        width: 70%;
        background-color: rgb(0, 0, 0);
    }
    

    .navi ul {
        display: flex;
        background-color: #a3117a;
        justify-content: space-around;
        padding-top: 50px;
        padding-bottom: 50px;
        align-items: center;
    }
    
    .navi li {
        list-style: none;
    }
    
    .navi a {
        color: #ffffff;
        text-decoration: none;
    }
    
    .navi a:hover {
        color: #ff00d0;
    }


   



    .hamburger{
        display: none;
    }




    .top {
        width: 100%;
        height: 350px;
        background-image: url(../img/NATTYp2.png);
        background-size: cover;
        background-position: center;
    }
    
    .message {
        width: 100%;
        height: 200px;
        background-image: url(../img/keyboard2.png);
        text-align: center;
        /* padding-top: 70px;
        padding-bottom: 70px; */
        font-size: 10px;
        color: #ffffff;
    }

    .message h1{
        padding-top: 40px;
        padding-bottom: 40px;
    }
        
    /* .message h1 {
        padding-bottom: 30%;
    } */
    
    /* .paper0{
        width: 100%;
        background-color: #FA999B;
    } */
    
    .paper0 img {
        width: 80%;
        background-color: #34312f;
        height: 100%;
    }
    
    .profile {
        width: 100%;
        height: 600px;
        display: flex;
        background-image: url(../img/paper.png);
        background-size: cover;
        background-position: center;
    }
    
    .text {
        width: 50%;
        /* background-color: khaki; */
        padding-top: 50px;
        padding-left: 40px;
        font-size: 8px;
    }

    
    .text h2 {
        font-size: 50px;
        padding-left: 80px;
    }

    .photo {
        width: 100%;
        /* background-color: lightsalmon; */
        padding-top: 40px;
        padding-left: 40px;
    }
    
    .photo img {
        width: 100%;
        padding-top:  160px;

    }
    
    .text h3 {
        font-size: 30px;
    }
    
        
    .paper2 {
        width: 100%;
        margin-top: -120px;
        /* background-color: rgb(91, 255, 69); */
    }
    
    .paper2 img {
        width: 100%;
    }
    
    .service {
        width: 100%;
        height: 600px;
        margin-top: -10px;
        background-color: #34312f;
        padding-top: 80px;
        text-align: center;
    }

    .service h2{
        padding-bottom: 30px;
        font-size: 50px;
    }
    
    
    .layer {
        width: 20%;
        height: 300px;
        padding-right: 20%;
        margin-left: 40px;
        margin-top: -250px;
        /* background-color: #ff00a2; */
    }
    
    .layer img{
        height: 300px;
        padding-left: 60px;
    }
    
    .service h2 {
        color: rgb(255, 255, 255);
        font-size: 60px;
    }

    
    .block {
        display: flex;
        margin-bottom: 80px;
        justify-content: space-around;
        color: #FFF;
    }
    
    .servicepc {
        width: 30%;
    }
    
    .servicepc img {
        width: 80%;
        margin-left: 20%;
    
    }
    
    
    .servicemeisi {
        width: 30%;
    }
    
    .servicemeisi p{
        margin-bottom: 50px;
    }
    
    .servicemeisi img {
        width: 80%;
        margin-top: -20%;
    
    }
    
    
    .serviceinsta {
        width: 30%;
    }
    
    
    .serviceinsta img {
        width: 80%;
        /* margin-right: 40%; */
    }
    
    
    
   
    

    .wrapper{
        overflow: hidden;
    }
    
    
    /* .box{
        width: 220px;
        padding: 20px;
        margin:0 20px 20px 0;
        background: #666;
        color: #fff;
        box-sizing:border-box;
    } */
    
    
    
    
    
    /*==================================================
    ふわっ
    ===================================*/
    
    
    /* fadeUp */
    
    .fadeUp{
        animation-name: fadeUpAnime;
        animation-duration:3s;
        animation-fill-mode:forwards;
        opacity:0;
        }
        
        @keyframes fadeUpAnime{
          from {
            opacity: 0;
            transform: translateY(100px);
          }
        
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        
        
        /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
         
        /* .fadeUpTrigger{
            opacity: 0;
        }
         */
    
        
    
     .fade-in {
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1.5s ease forwards;
      }
      
      
      @keyframes fadeInUp {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
    
      /* 初期状態（透明 & 下にずらす） */
    .fade-in {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 1.2s ease, transform 1.2s ease;
      }
      
      /* 表示された時に適用するクラス */
      .fade-in.show {
        opacity: 1;
        transform: translateY(0);
      }
    
    
    
    
    /*その他と主な共通部分は省略*/

    a.btn-solid {
        padding: 20px;
        color: #fff;
        border-top: 20px solid #ec48b5;
        border-right: 20px solid #5f0a5e;
        border-bottom: 20px solid #c11b98;
        border-left: 20px solid #f38cf9;
        border-radius: 0;
        background: #a3117a;
      }
      
      a.btn-solid:hover {
        color: #fff;
        padding: 20px;
        border-top: 20px solid #740f68;
        border-right: 20px solid #f98ce5;
        border-bottom: 20px solid #ec48d6;
        border-left: 20px solid #5f0a5f;
      }
    
    
    
    
    
    
    .paper3 {
        width: 100%;
        /* background-color: gold; */
    }
    
    .paper3 img {
        width: 100%;
        margin-top: -70px;
    }
    
    .work {
        width: 100%;
        margin-bottom: 100px;
    }
    
    /*==================================================
    ギャラリーのためのcss
    ===================================*/
    
    /*＝＝＝並び替えボタンのCSS*/
    .sort-btn {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding: 50px 20px;
    }
    
    .sort-btn li {
        background: #ff00a2;
        border-radius: 10px;
        cursor: pointer;
        padding: 10px;
        margin: 0 10px;
    }
    
    .sort-btn li.active {
        /*ボタンに現在地＝activeというクラス名がついたら背景色を変更*/
        background: #1b1ef3;
    }
    
    /*横幅が480px以下になった際の指定*/
    @media only screen and (max-width: 480px) {
        .sort-btn {
            justify-content: space-between;
        }
    
        .sort-btn li {
            width: 48%;
            margin: 0 0 10px 0;
            text-align: center;
        }
    }
    
    /*＝＝＝Muuriのレイアウトのための調整 */
    .grid {
        position: relative;
        /*並び替えの基準点を指定*/
    }
    
    /*各画像の横幅などの設定*/
    .item {
        display: block;
        position: absolute;
        width: 33%;
        /*横並びで3つ表示*/
        z-index: 1;
    }
    
    /*内側のボックスの高さが崩れないように維持*/
    .item-content {
        position: relative;
        width: 100%;
        height: 100%;
    }
    
    /*画像の横幅を100%にしてレスポンシブ化*/
    .grid img {
        width: 100%;
        height: auto;
        vertical-align: bottom;
        /*画像の下にできる余白を削除*/
    }
    
    /*横幅が768px以下になった際の指定*/
    @media only screen and (max-width: 768px) {
        .item {
            width: 49.5%;
            /*横並びで2つ表示*/
        }
    }
    
    /*＝＝＝fancyboxサムネイル背景と画像選択時の枠線の指定*/
    .fancybox-thumbs {
        background: transparent !important;
    }
    
    .fancybox-thumbs__list a:before {
        border: 6px solid #FA999B;
    }
    
    
    /*========= レイアウトのためのCSS ===============*/
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    a {
        color: #333;
    }
    
    a:hover,
    a:active {
        text-decoration: none;
    }
    
    
    
    
    
    
    
    
    
    .skill {
        width: 100%;
        /* background-color: greenyellow; */
    }
    
    .skill h2 {
        text-align: center;
        font-size: 60px;
    }

    .skill p{
        font-size: 8px;
    }
    
    
    


    .class{
        width: 90%;
        margin: 0 auto;
        padding-top: 40px;
        padding-bottom: 40px;
        display: flex;
        justify-content: center;
        text-align: center;
        /* background-color: blueviolet; */
    }
    
    .class img{
        align-items: center;
    }
    .png1{
        width: 28%;
        /* background-color: magenta; */
    }
    
    .png1 img{
        width: 90%;
        padding-bottom: 20px;
    }
    
    .png2{
        width: 28%;
        /* background-color: mediumorchid; */
    }
    
    .png2 img{
        width: 90%;
        padding-bottom: 20px;
    }
    
    
    .png3{
        width: 28%;
        /* background-color: brown; */
    }
    
    .png3 img{
        width: 90%;
        padding-bottom: 20px;
    }
    
    
    
    
    .camera{
        width: 70%;
        margin: 0 auto;
        padding-top: 40px;
        padding-bottom: 40px;
        /* background-color: palegreen; */
    }
    
    .camera h2{
        /* background-color: rgb(132, 81, 81); */
        text-align: center;
    }

    








    
    .contact {
        width: 100%;
        height: 500px;
        background-image: url(../img/deel3.png);
        background-size: cover;
        background-position: 0%;
        text-align: center;
        background-color: aquamarine;
    }
    
    .contact h2 {
        padding: auto;
        padding-top: 80px;
        padding-bottom: 40px;
        font-size: 60px;
    
    }
    
    
    .button1 {
        width: 50%;
        padding-bottom: 40px;
        display: inline-flex;
        flex-direction: column;
    }
    
    .btn-gradient-radius {
        display: inline-block;
        padding: 7px 20px;
        border-radius: 25px;
        text-decoration: none;
        color: #FFF;
        background-image: linear-gradient(45deg, #ff00fb 0%, #ff5ff7 100%);
        transition: .4s;
    }
    
    .btn-gradient-radius:hover {
        background-image: linear-gradient(45deg, #fea8ef 0%, #ffd7fe 100%);
    }
    
    
    
    
    
    
    .button2 {
        width: 50%;
        display: inline-flex;
        flex-direction: column;
    }
    
    .btn-gradient-radius {
        display: inline-block;
        padding: 7px 20px;
        border-radius: 25px;
        text-decoration: none;
        color: #FFF;
        background-image: linear-gradient(45deg,  deeppink 0%, #ff5ff7 100%);
        transition: .4s;
    }
    
    .btn-gradient-radius:hover {
        background-image: linear-gradient(45deg, #fea8ef 0%, #ffd7fe 100%);
    }
    
    
    
    
    
    .footer {
        width: 100%;
        padding-top: 60px;
        padding-bottom: 50px;
        text-align: center;
        background-color: deeppink;
    }
    
    /* .paper4 {
        width: 100%;
        height: 50%;
        margin-top: -80px;
    } */
    
  }