@charset "UTF-8";
/*--ボディ共通部分ここから--*/
body,html{
  max-width: 100%;
  background-color: #4d6675;
}
img{
  max-width: 100%;
}
/*--ボディ共通部分ここまで--*/

/*--ヘッダー共通部分ここから--*/
header{
  width: 1000px;
  margin: 0 auto;
}
/*--ヘッダー共通部分ここまで--*/


/*--サイトタイトル枠ここから--*/
/*カズロウweb制作所とはタイトル*/
.what{
  padding-top:  66px;
  padding-left:  27px;
}
/*カズロウweb制作所とはタイトルここまで*/

/*さんぷるサイトタイトル*/
.sample-tl{
  padding-top: 94px;
  padding-left: 96px;
}
/*さんぷるサイトタイトルここまで*/
/*GIFアニメーションタイトル*/
.gifam{
  padding-top: 105px;
  padding-left: 46px;
}
/*GIFアニメーションタイトルここまで*/
/*GIFアニメーションさんぷるタイトル*/
.gif-san1{
  padding-top: 148px;
  padding-left: 192px;
}
/*GIFアニメーションさんぷるタイトルここまで*/
/*--サイトタイトル枠ここまで--*/



/*--メイン共通部分ここから--*/
#main{
  background-color: #4d6675; 
  width: 1000px;
  margin: 0 auto;
}
/*--メイン共通部分ここまで--*/

/*--文字共通部分ここから--*/
p{
  font-family: YakuHanJP,"Barlow Semi Condensed","Roboto","Yu Gothic","游ゴシック",YuGothic,"游ゴシック体","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo",sans-serif,MSゴシック;
  font-style: italic;
  color: #fff;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.8
}
/*--文字共通部分ここまで--*/


/*--文字枠ここから--*/
/*カズロウweb制作所とは文字枠*/
.wt-1{
  padding-top: 81px;
  padding-left: 126px;
  padding-bottom: 162px;
}
/*さんぷるサイト文字枠*/
.sp-1{
  padding-top: 45px;
  padding-left: 231px;
}
#sp-img p{
  font-size: 18px;
  text-align: center;
}
/*さんぷるサイト文字枠ここまで*/
/*GIFアニメーション文字枠*/
.gifam1{
  padding-top: 54px;
  padding-left: 218px;
}
#gif-am1 p{
  font-size: 24px;
}
/*GIFアニメーション文字枠ここまで*/
/*--文字枠ここまで--*/

/*さんぷるサイトイメージ画像と説明枠*/
#sp-img{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 173px;
  padding-bottom: 424px;
}
#sp-img p{
  padding-bottom: 100px;
}
/*さんぷるサイトイメージ画像と説明枠ここまで*/
/*GIFアニメーションイメージ画像と説明枠*/
#gif-am2{
  display: flex;
  padding-top: 44px;
  padding-left: 113px;
}
.gif-am2-1{
  padding: 45px;
  background-image: url(../images/gifanimation/nami-img1bg.png);
  background-repeat: no-repeat;
  background-position: center center;
}
.gif-am2-2{
  margin: auto 65px;
}
#gif-am3{
  display: flex;
  padding-top: px;
  padding-left: 190px;
}
.gif-am3-2{
  width: 200px;
  margin-top: -41px;
  margin-left: 59px;
  padding: 45px;
  background-image: url(../images/gifanimation/nami-gif1bg.png);
  background-repeat: no-repeat;
  background-position: center center;
}
.gif-am3-1{
  margin: auto 0;
}
#gif-am4{
  display: flex;
  padding-top: 34px;
  padding-left: 113px;
}
.gif-am4-1{
  width: 200px;
  margin-top: -41px;
  padding: 45px;
  background-image: url(../images/gifanimation/nami-gif1bg.png);
  background-repeat: no-repeat;
  background-position: center center;
}
.gif-am4-2{
  margin: auto 78px;
}
/*GIFアニメーションイメージ画像と説明枠ここまで*/
/*GIFアニメーションさんぷるイメージ画像枠*/
#gif-am-san{
  position: relative;
  margin-bottom:  928px;
}
.gif-san2{
  position: absolute;
  width: 200px;
  top: 144px;
  left: 407px;
}
.gif-san3{
  position: absolute;
  width: 200px;
  top: 239px;
  left: 120px;
  background-image: url(../images/gifanimation/push-back.png);
  background-repeat: no-repeat;
  background-position: center center;
}
.gif-san4{
  position: absolute;
  width: 200px;
  top: 291px;
  left: 682px;
  background-image: url(../images/gifanimation/puni-back.png);
  background-repeat: no-repeat;
  background-position: center center;
}
/*GIFアニメーションさんぷるイメージ画像枠ここまで*/



/*--フッター共通部分ここから--*/
footer{  
  width: 100%;
  background-color: #304d5e;
  margin-top: 0;
      }
#ft{

  width: 1000px;
  margin: 0 auto;
  background-color: #304d5e;
}
#ft1{
  display: flex;
}
#ft3{
  display: flex;
  padding-top: 70px;
  margin-left: 103px;
}
.ft-title{
  max-width: 100%;
  padding-top: 76px;
  margin-left:  30px;
}
.ft-r{
  padding-left: 35px;
}
.ft-title2{
  padding-top: 21px;
  padding-left: 33px;
}
.ft-title4{
  padding-top: 18px;
  padding-left: 21px;
}
.ft-copy{
  margin-top: 27px;
  margin-left: 347px;
  margin-bottom: 18px;
}
/*--フッター共通部分ここまで--*/



@media (max-width: 760px) {/*幅768pxまで*/
  
  
/*--ボディ共通部分ここから--*/
body,html{
  max-width: 100vw;
  background-color: #4d6675;
}
img{
  max-width: 100%;
}
/*--ボディ共通部分ここまで--*/

/*--ヘッダー共通部分ここから--*/
header{
  width: 100vw;
  margin: 0 auto;
}
/*--ヘッダー共通部分ここまで--*/
  
/*--サイトタイトル枠ここから--*/
/*カズロウweb制作所とはタイトル*/
.what{
  width: 80vw;
  padding-left:  8vw;
}
/*カズロウweb制作所とはタイトルここまで*/

/*さんぷるサイトタイトル*/
.sample-tl{
  width: 80vw;
  padding-left: 8vw;
}
/*さんぷるサイトタイトルここまで*/
/*GIFアニメーションタイトル*/
.gifam{
  width: 80vw;
  padding-left: 8vw;
}
/*GIFアニメーションタイトルここまで*/
/*GIFアニメーションさんぷるタイトル*/
.gif-san1{
  width: 80vw;
  padding-left: 8vw;
}
/*GIFアニメーションさんぷるタイトルここまで*/
/*--サイトタイトル枠ここまで--*/
  
  
  /*--メイン共通部分ここから--*/
#main{
  background-color: #4d6675; 
  width: 100vw;
  margin: 0 auto;
}
/*--メイン共通部分ここまで--*/
 
  
  /*--文字枠ここから--*/
/*カズロウweb制作所とは文字枠*/
.wt-1{
  margin: 0 auto;
  width: 90vw;
  padding-left: 0vw;
  font-size: 1.5em;
}
/*さんぷるサイト文字枠*/
.sp-1{
   margin: 0 auto;
  width: 90vw;
  padding-left: 0vw;
  font-size: 1.5em;
}
#sp-img p{
  font-size: 18px;
  text-align: center;
  padding-bottom: 150px
}
/*さんぷるサイト文字枠ここまで*/
/*GIFアニメーション文字枠*/
.gifam1{
  margin: 0 auto;
  width: 85vw;
  padding-top: 54px;
  padding-left: 0px;
  font-size: 1.5em;
}
#gif-am1 p{
  font-size: 1.5em;
}
/*GIFアニメーション文字枠ここまで*/
/*--文字枠ここまで--*/

 
  
  /*さんぷるサイトイメージ画像と説明枠*/
#sp-img{
  display: block;
  justify-content:none;
  padding-bottom: 50px;
}
  #nature{
  text-align: center;
  }
  #caffe{
    text-align: center;
  }
  #donut{
    text-align: center;
  }
/*さんぷるサイトイメージ画像と説明枠ここまで*/
  
/*GIFアニメーションイメージ画像と説明枠*/
#gif-am2{
  display: block;
  padding-top: 44px;
  padding-left: 0px;
  text-align: center;
}
.gif-am2-1{
}
.gif-am2-2{
  margin: 0 ;
}
#gif-am3{
  display: block;
  padding-top: 50px;
  padding-left: 0px;
  text-align: center;
}
.gif-am3-2{
  margin-top: 0px;
  margin-left: 0px;
}
.gif-am3-1{
}
#gif-am4{
  text-align: center;
  display: block;
  padding-top: 150px;
  padding-left: 0px;
}
.gif-am4-1{
  margin-top: 0px;
  margin-left: 0px;
}
.gif-am4-2{
  margin: auto 0;
}
/*GIFアニメーションイメージ画像と説明枠ここまで*/
  
/*GIFアニメーションさんぷるイメージ画像枠*/
#gif-am-san{
}
.gif-san2{
  width: 200px;
  top: 20px;
  left: 30vw;
}
.gif-san3{
  width: 200px;
  top: 239px;
  left: 10vw;
}
.gif-san4{
  top: 480px;
  left: 40vw;
}
/*GIFアニメーションさんぷるイメージ画像枠ここまで*/

  
  
  
 /*--フッター共通部分ここから--*/
footer{  
  width: 100vw;
  background-color: #304d5e;
  margin-top: 0;
      }
#ft{

  width: 100vw;
  margin: 0 auto;
  background-color: #304d5e;
}
#ft1{
  display:block;
}
#ft3{
  display: block;
  padding-top: 70px;
  margin-left: 0px;
}
.ft-title{
  max-width: 80vw;
  padding-top: 76px;
  margin-left:  10vw;
}
  .ft-l{
  
  padding-left 30vw;
}
.ft-r{
  
  padding-left: 28vw;
}
.ft-title1{
  padding-left: 22vw;  
  }
.ft-title2{
  padding-top: 21px;
  padding-left: 30vw;
}
  .ft-title3{
    padding-top: 18px;
   padding-right: 0px; 
  }
.ft-title4{
  padding-top: 18px;
  padding-left: 5vw;
}
.ft-copy{
  margin-top: 27px;
  margin-left: 15vw;
  margin-bottom: 18px;
}
/*--フッター共通部分ここまで--*/ 
}