@charset "UTF-8";

.container{
    width: 100%;
}

.sns{
    width: 30%;
    display: flex;
    float: right;
}

.sns img{
    width: 20%;
}

.header{
    width: 100%;
}
.header ul{
    padding-left: 20px;
    list-style: none;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 100px;
    font-weight: 700;
    font-size: 100px;
}

.header a{
    color: black;
    text-decoration: none;
}

.header a:hover{
    color: darkorange;
}
.top{
    width: 100%;
    height: 600px;
}
.gallery {
    width: 100%;
}

.gallery img:hover{
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

.pic{
    width: 16%;
}
.gallery ul{
     display: flex;  /*ここです！*/
    list-style: none;
}

.gallery img{
    width: 100%; /*これも必要です！*/

}

.main1{
    width: 100%;
    display: flex;
    padding-left: 20px;
    padding-top: 30px;
}

.main1 p{
    padding-left: 20px;
    padding-top: 20px;
    color: darkorange;
}

.main1 h2{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-weight: 700;
font-size: 80px;
padding-left: 20px;
}

.main1 h3{ 
    padding-top: 20px;
    font-size: 50px;
    font-weight: 500;
    padding-left: 150px;
}

.item{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-left: 30px;
    padding-top: 50px;
    margin-left: 60px;
}


.item1{
    width: 30%;
}
.item1 img{
    width: 50%;
}

.item h3{
    padding-left: 50px;
}

.photoshop{
    padding-left: 20px;

}

.seo{
    padding-left: 40px;
}



.border{
    margin-top: 40px;
}



.main2{
    width: 100%;
    display: flex;
    margin-top: 50px;
}

.main2 p{
    padding-left: 20px;
    padding-top: 20px;
    color: hsl(33, 100%, 50%);
}

.main2 h2{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-weight: 700;
font-size: 80px;
padding-left: 20px;
white-space: none;
}

/*==================================================
スライダーのためのcss
===================================*/
.slider {
    width: 60%;
    margin: 0 auto;
    position:relative;
      z-index: 1;
      /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
      height: 80vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  }
  /*　背景画像設定　*/
  
  .slider-item01 {
      background:url(../image/COMINGSOON.jpeg);
  }
  
  .slider-item02 {
      background:url(../image/COMINGSOON.jpeg);
  }
  
  .slider-item03 {
      background:url(../image/COMINGSOON.jpeg);
  }
  
  .slider-item {
      width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
      height:80vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
      background-repeat: no-repeat;/*背景画像をリピートしない*/
      background-position: center;/*背景画像の位置を中央に*/
      background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
  }
  
  /*矢印の設定*/
  
  .slick-prev, 
  .slick-next {
      position: absolute;
      z-index: 3;
      top: 42%;
      cursor: pointer;/*マウスカーソルを指マークに*/
      outline: none;/*クリックをしたら出てくる枠線を消す*/
      border-top: 2px solid #fff;/*矢印の色*/
      border-right: 2px solid #fff;/*矢印の色*/
      height: 25px;
      width: 25px;
  }
  
  .slick-prev {/*戻る矢印の位置と形状*/
      left:2.5%;
      transform: rotate(-135deg);
  }
  
  .slick-next {/*次へ矢印の位置と形状*/
      right:2.5%;
      transform: rotate(45deg);
  }
  
  /*ドットナビゲーションの設定*/
  
  .slick-dots {
      position: relative;
      z-index: 3;
      text-align:center;
      margin:-50px 0 0 0;/*ドットの位置*/
  }
  
  .slick-dots li {
      display:inline-block;
      margin:0 5px;
  }
  
  .slick-dots button {
      color: transparent;
      outline: none;
      width:8px;/*ドットボタンのサイズ*/
      height:8px;/*ドットボタンのサイズ*/
      display:block;
      border-radius:50%;
      background:#fff;/*ドットボタンの色*/
  }
  
  .slick-dots .slick-active button{
      background:rgb(220, 116, 20);/*ドットボタンの現在地表示の色*/
  }



  /*-----------------------------------------------------*/
/* タブレット用のCSS */
/*-----------------------------------------------------*/
@media only screen and (min-width:480px) and (max-width:999px) {
    .container{
        width: 100%;
    }
    
    .sns{
        width: 40%;
        display: flex;
        
    }
    
    .sns img{
        width: 30%;
    }

    .sns p{
        padding-left: 5px;
    }
    
    .header{
        width: 100%;
    }
    .header ul{
        padding-left: 20px;
        list-style: none;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 100px;
        font-weight: 700;
        font-size: 100px;
    }
    
    .header a{
        color: black;
        text-decoration: none;
    }
    
    .header a:hover{
        color: darkorange;
    }
    .top{
        width: 100%;
        height: 600px;
    }
    .gallery {
        width: 100%;
    }
    
    .gallery img:hover{
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    
    .pic{
        width: 16%;
    }
    .gallery ul{
         display: flex;  /*ここです！*/
        list-style: none;
    }
    
    .gallery img{
        width: 100%; /*これも必要です！*/
    
    }
    
    .main1{
        width: 100%;
        display: flex;
        padding-left: 10px;
        padding-top: 10px;
    }
    
    .main1 p{
        padding-left: 10px;
        padding-top: 10px;
        color: darkorange;
    }
    
    .main1 h2{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: 700;
    font-size: 80px;
    padding-left: 20px;
    }
    
    .main1 h3{ 
        padding-top: 20px;
        font-size: 50px;
        font-weight: 500;
        padding-left: 150px;
    }
    
    .item{
        width: 100%;
        display: flex;
        justify-content: space-between;
        /* padding-left: 15px; */
        padding-top: 30px;
        margin-left: 30px;
    }
    
    
    .item1{
        width: 30%;
    }
    .item1 img{
        width: 50%;
    }
    
    .item h3{
        padding-left: 25px;
    }

    .item p{
        padding-right: 20px;
    }
    
    .photoshop{
        padding-left: 10px;
    
    }
    
    .seo{
        padding-left: 20px;
    }
    
    
    
    .border{
        margin-top: 40px;
    }
    
    
    
    .main2{
        width: 100%;
        display: flex;
        margin-top: 10px;
    }
    
    .main2 p{
        padding-left: 10px;
        padding-top: 10px;
        color: hsl(33, 100%, 50%);
    }
    
    .main2 h2{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: 700;
    font-size: 80px;
    padding-left: 20px;
    white-space: none;
    }
    
    /*==================================================
    スライダーのためのcss
    ===================================*/
    .slider {
        width: 100%;
        margin: 0 auto;
        position:relative;
          z-index: 1;
          /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
          height: 40vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
      }
      /*　背景画像設定　*/
      
      .slider-item01 {
          background:url(../image/COMINGSOON.jpeg);
      }
      
      .slider-item02 {
          background:url(../image/COMINGSOON.jpeg);
      }
      
      .slider-item03 {
          background:url(../image/COMINGSOON.jpeg);
      }
      
      .slider-item {
          width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
          height:80vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
          background-repeat: no-repeat;/*背景画像をリピートしない*/
          background-position: center;/*背景画像の位置を中央に*/
          background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
      }
      
      /*矢印の設定*/
      
      .slick-prev, 
      .slick-next {
          position: absolute;
          z-index: 3;
          top: 42%;
          cursor: pointer;/*マウスカーソルを指マークに*/
          outline: none;/*クリックをしたら出てくる枠線を消す*/
          border-top: 2px solid #fff;/*矢印の色*/
          border-right: 2px solid #fff;/*矢印の色*/
          height: 25px;
          width: 25px;
      }
      
      .slick-prev {/*戻る矢印の位置と形状*/
          left:2.5%;
          transform: rotate(-135deg);
      }
      
      .slick-next {/*次へ矢印の位置と形状*/
          right:2.5%;
          transform: rotate(45deg);
      }
      
      /*ドットナビゲーションの設定*/
      
      .slick-dots {
          position: relative;
          z-index: 3;
          text-align:center;
          margin:-50px 0 0 0;/*ドットの位置*/
      }
      
      .slick-dots li {
          display:inline-block;
          margin:0 5px;
      }
      
      .slick-dots button {
          color: transparent;
          outline: none;
          width:8px;/*ドットボタンのサイズ*/
          height:8px;/*ドットボタンのサイズ*/
          display:block;
          border-radius:50%;
          background:#fff;/*ドットボタンの色*/
      }
      
      .slick-dots .slick-active button{
          background:rgb(220, 116, 20);/*ドットボタンの現在地表示の色*/
      }
}

/*-----------------------------------------------------*/
/* スマホ用のCSS */
/*-----------------------------------------------------*/
@media only screen and (max-width: 479px) {

    container{
        width: 100%;
    }
    
    .sns{
        width: 15%;
        display: flex;
        float: right;
    }
    
    .sns img{
        width: 100%;
        margin-left: 5px;
    }

    .sns p{
        padding-left: 5px;
    }
    
    .header{
        width: 100%;
    }
    .header ul{
        padding-left: 10px;
        list-style: none;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 50px;
        font-weight: 700;
        white-space: none;
    }
    
    .header a{
        color: black;
        text-decoration: none;
    }
    
    .header a:hover{
        color: darkorange;
    }
    .top{
        width: 100%;
        height: 300px;
    }
    .gallery {
        width: 100%;
    }
    
    .gallery img:hover{
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    
    .pic{
        width: 30%;
    }
    .gallery ul{
         display: flex; 
        list-style: none;
    }
    
    .gallery img{
        width: 100%; /*これも必要です！*/
    
    }
    
    .main1{
        width: 100%;
        display: flex;
        padding-left: 10px;
        padding-top: 10px;
    }
    
    .main1 p{
        padding-left: 10px;
        padding-top: 10px;
        color: darkorange;
    }
    
    .main1 h2{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: 700;
    font-size: 50px;
    padding-left: 10px;
    }
    
    .main1 h3{ 
        padding-top: 20px;
        font-size: 40px;
        font-weight: 500;
        padding-left: 150px;
    }
    
    .item{
        width: 100%;
        display: flex;
        justify-content: space-between;
        /* padding-left: 15px; */
        padding-top: 20px;
        margin-left: 15px;
    }
    
    
    .item1{
        width: 30%;
    }
    .item1 img{
        width: 50%;
    }
    
    .item h3{
        padding-left: 1px;
        font-size: 15px;
    }

    .item p{
        padding-right: 30px;
        font-size: 10px;
    }
    
    .photoshop{
        padding-left: 10px;
    
    }
    
    .seo{
        padding-left: 20px;
    }
    
    
    
    .border{
        margin-top: 40px;
    }
    
    
    
    .main2{
        width: 100%;
        display: flex;
        margin-top: 10px;
    }
    
    .main2 p{
        padding-left: 10px;
        padding-top: 10px;
        color: hsl(33, 100%, 50%);
    }
    
    .main2 h2{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: 700;
    font-size: 50px;
    padding-left: 10px;
    white-space: none;
    }
    
    /*==================================================
    スライダーのためのcss
    ===================================*/
    .slider {
        width: 100%;
        margin: 0 auto;
        position:relative;
          z-index: 1;
          /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
          height: 40vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
      }
      /*　背景画像設定　*/
      
      .slider-item01 {
          background:url(../image/COMINGSOON.jpeg);
      }
      
      .slider-item02 {
          background:url(../image/COMINGSOON.jpeg);
      }
      
      .slider-item03 {
          background:url(../image/COMINGSOON.jpeg);
      }
      
      .slider-item {
          width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
          height:50vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
          background-repeat: no-repeat;/*背景画像をリピートしない*/
          background-position: center;/*背景画像の位置を中央に*/
          background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
      }
      
      /*矢印の設定*/
      
      .slick-prev, 
      .slick-next {
          position: absolute;
          z-index: 3;
          top: 42%;
          cursor: pointer;/*マウスカーソルを指マークに*/
          outline: none;/*クリックをしたら出てくる枠線を消す*/
          border-top: 2px solid #fff;/*矢印の色*/
          border-right: 2px solid #fff;/*矢印の色*/
          height: 25px;
          width: 25px;
      }
      
      .slick-prev {/*戻る矢印の位置と形状*/
          left:2.5%;
          transform: rotate(-135deg);
      }
      
      .slick-next {/*次へ矢印の位置と形状*/
          right:2.5%;
          transform: rotate(45deg);
      }
      
      /*ドットナビゲーションの設定*/
      
      .slick-dots {
          position: relative;
          z-index: 3;
          text-align:center;
          margin:-50px 0 0 0;/*ドットの位置*/
      }
      
      .slick-dots li {
          display:inline-block;
          margin:0 5px;
      }
      
      .slick-dots button {
          color: transparent;
          outline: none;
          width:8px;/*ドットボタンのサイズ*/
          height:8px;/*ドットボタンのサイズ*/
          display:block;
          border-radius:50%;
          background:#fff;/*ドットボタンの色*/
      }
      
      .slick-dots .slick-active button{
          background:rgb(220, 116, 20);/*ドットボタンの現在地表示の色*/
      }
}