@charset "utf-8";
/* CSS Document */
/*common*/
/*▼--body領域--*/
body {
  background-color: #009fa8;
  color: #FFFFFF;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  line-height: normal; /*行間*/
}
/*▼--inner領域--*/
.inner {
  max-width: 60%;
  /*max-width:1980px;--最大ブレイクポイント1920px--*/
  /*width: 1920px;--*/
  /* max-width: 100%;*/
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}
/*▼--p領域--*/
p {
  text-align: justify;
  line-break: strict;
}
/*▼--header領域--*/
/*▽--header-img--*/
.header {
  position: fixed; /*------固定------*/
  z-index: 1; /*hero-youtubeより手前に表示*/
}
.header img {
  max-width: 100%;
}
.sp {
  display: block !important;
} /*--spで見たときは"sp"classの画像が表示される--*/
.pc {
  display: none !important;
} /*--spで見たときは"sp"classの画像が表示される--*/
/*△--header-img--*/
/*▼--gnavナビゲーション領域--*/
/*▽--headerのHOME/Profile/Paformans--*/
.gnav ul {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  margin-top: -23px; /*--gnav領域 上に--*/
}
.gnav a {
  display: block;
  color: #FFFFFF;
  font-size: calc(20 / 375 * 100vw);
  /*375基準。20pxの見た目。100vw。→自動でやってくれる*/
  text-decoration: none;
  text-shadow: 5px 5px 5px #000000;
}
/*予約ボタン-----*/
.button {
  color: #009fa8;
  display: block;
  border-radius: 8px;
  background: #fff;
  line-height: 1.5; /*行間*/
  text-decoration: none;
  border: 1.5px solid #009fa8;
  box-shadow: 4px 3px 10px #000000;
} /*予約ボタン*/
.button a {
  color: #009fa8;
  font-weight: 600; /*太字*/
  text-shadow: none; /*影の打消し(none)*/
  padding-left: 1.5px; /*右に*/
}
.gnav a:hover {
  color: #111111; /*--gnavhover 黒に--*/
}
.gnav span {
  display: none; /*--span要素 非表示に--*/
}
/*▼--main領域--*/
.main {
  margin-bottom: 20px;
} /*main-下の空き*/
.main {
  padding: 0 10px;
} /*--main左右余白--*/
/*▼--hero領域youtube--*/
.hero {
  margin: 0 auto; /*左右対象(divだとこっち。text-align: center;では無く)*/
  z-index: 2; /*hederより後ろに表示*/
  width: 95%; /*横幅変更 */
  padding: 0;
  box-sizing: border-box;
  padding-top: 174px; /*一番上から*/
}
.hero .inner {
  position: relative;
  height: 0;
  padding-bottom: 56.25%; /*Youtube動画アスペクト比（縦横比）基本16:9*/
  overflow: hidden;
}
.hero .inner iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
/*▼--lade文--*/
.lead {
  font-size: 13px;
  margin: 20px 0 20px 0;
  text-align: center;
  line-height: 20px; /*行間*/
}
/*▼--#news領域--*/
h2 {
  font-size: 20px;
  text-decoration: underline;
}
.news p {
  font-size: 10px;
  margin-top: -2px;
}
.news img {
  width: 67px;
}
.saishin {
  text-align: right; /*saishin 右寄せ*/
  display: inline-block; /*saishin 横並び*/
}
.saishin p {
  text-align: right;
} /*pの中のテキスト 右寄せ*/
.news .img {
  display: inline-block; /* 横並び*/
}
.news {
  margin: 0 auto; /*中央寄せ*/
  width: 68%; /*幅*/
  display: flex; /* 横並び*/
  justify-content: space-between; /*アイテム均等配置。最初のアイテムは先頭寄せ、最後のアイテムは末尾に寄せ */
  padding: 0 0 40px 0;
}
/*▼--#sns領域--*/
.sns img {
  width: 125px;
  text-align: center;
}
h3 {
  text-align: center;
  padding-bottom: 10px;
}
div .sns2 {
  padding-top: 0;
  padding-right: 16px;
  padding-left: 16px;
  padding-bottom: 10px;
  margin-bottom: 40px;
}
.snsicon {
  width: 78.13%;
  height: auto; /*センターにした*/
  margin-right: auto; /*センターにした*/
  margin-left: auto; /*センターにした*/
}
/*instagram幅と高*/
.instagram-media {
  width: 343px;
  height: 504px;
}
/*Twitter高*/
.twitter-timeline {
  height: 450px !important;
}
.twitter {
  margin-top: 20px;
}
/*▼--footer領域--*/
footer {
  background: url("../img/footer.png");
  background-size: cover;
  height: auto;
}
/*.spf {
    display: block !important; /*--spで見たときは"spf"classの画像が表示される--
    bottom: 00px; /*下に固定*/
/*position:absolute;/*絶対位置*/
.pcf {
  display: none !important; /*--spで見たときは"pcf"classの画像が表示される--*/
}
/*footer {
clear: both;
height: 390px;
width: 100%;
background-size: cover;
background-image: url("../img/footer.png")
}*/
.inner {
  text-align: center;
}
/*▼--snsicon領域--*/
.snsicon {
  padding-top: 70%;
  display: flex;
  position: relative;
  align-items: center; /*アイコン中央揃え*/
  justify-content: center; /*左右中央揃え*/
}
.snsicon a {
  text-decoration: none; /*下線消す*/
}
.icon-youtube1:before {
  content: "\ea9e";
  margin-right: 45px;
  /*    margin-left: 40px;*/
  color: #000000;
  font-size: 32px;
}
.icon-facebook:before {
  content: "\ea91";
  margin-right: 40px;
  color: #000000;
  font-size: 22px;
}
.icon-twitter:before {
  content: "\ea97";
  margin-right: 40px;
  color: #000000;
  font-size: 30px;
}
.icon-instagram:before {
  content: "\ea93";
  margin-right: 40.1px;
  color: #000000;
  font-size: 25px;
}
.icon-blog:before {
  content: "\e900";
  color: #000000;
  font-size: 25px;
}
/*▼--logo領域--*/
.logo {
  width: 95px;
  height: 95px;
  text-align: center;
  padding-top: 40px;
}
ul {
  list-style: none;
}
/*▼--copyright領域--*/
footer p {
  color: #000000;
  text-align: center;
  font-size: 12px;
}
/*▼--page-top領域--*/
.page-top {
  width: 37.5px;
  height: 91.82px;
  text-align: right;
  position: fixed;
  bottom: 20px;
  right: 23px;
}
.page-top a {
  display: block;
  text-decoration: none;
}
.page-top a:hover {
  opacity: 0.7;
}
.page-top img {
  width: 100%;
}
/*▼--------PC-CSSメディアクエリ-------------------------------*/
@media screen and (min-width: 768px) /*768最小ブレイク以上でPC表示*/ {
  /*▼--inner領域--*/
  .inner {
    max-width: 1920px;
  } /*--1920px最大ブレイクポイント--*/
  /*--768px最小ブレイクポイント--*/
  /*▼PC--header領域--*/
  /*▽--header-img--*/
  .sp {
    display: none !important;
  } /*--pcで見たとき"pc"classの画像が表示される--*/
  .pc {
    display: block !important;
  } /*--pcで見たとき"pc"classの画像が表示される--*/
  header img.pc {
    width: 100%;
    /*max-width: 100%;*/
    height: auto;
  }
}
/*△--header-img--*/
/*▼--gnavナビゲーション領域--*/
/*▽--headerのHOME/Profile/Paformans--*/
@media screen and (min-width: 768px) {
  .gnav ul {
    text-align: center;
    max-width: calc(1274.08px / 1920* 100vw);
    padding: 0 100px;
    margin: auto;
    margin-top: -100px; /*--gnav領域 上に--*/
  }
  .gnav a {
    font-size: 30px;
    font-size: calc(30 / 1920 * 100vw);
  }
  .gnav span {
    display: block;
    font-size: calc(18 / 1920 * 100vw);
    text-align: center;
  } /*--gnav領域 サブタイトル表示--*/
  /*予約ボタン-----*/
  .button {
    border-radius: 14px;
    text-align: center;
  } /*予約ボタン*/
  .button a {
    border-radius: 5px;
    padding: 2px 20px 2px 20px;
  }
}
@media screen and (min-width: 768px) {
  /*▼--main領域--*/
  .main {
    margin-bottom: 40px;
  } /*main-下の空き*/
  /*▼--hero領域youtube--*/
  .hero {
    padding-top: 330px;
    text-align: center;
  }
  /*▼--lade文--*/
  .lead {
    font-size: calc(32 / 1920 * 100vw);
    margin: 100px 0 100px 0;
    line-height: 70px; /*行間*/
    text-align: center;
  }
}
@media screen and (min-width: 768px) {
  /*▼--#news領域--*/
  h2 {
    font-size: calc(48 / 1920 * 100vw);
  }
  .news p {
        font-size: calc(22 / 1920 * 100vw);

  }
  .news img {
width: calc(288 / 1920* 100vw);
    }
  .news {
    width: 40%; /*幅*/
  }
}
@media screen and (min-width: 768px) {
  /*▼--#sns領域--*/
  .sns img {
    width: calc(306 / 1920* 100vw);
        padding: 10px 0 20px 0;}
   
.sns {
    margin-right: auto;
    margin-left: auto;
    }
    
    .insta{
        margin-left: 0;
    }
    
.insta, .twitter {
   width: 30%;}
    
.sns2 .instagram-media{
        padding-right: 80px;
    }    
    
  div .sns2 {
   display: flex; /* 横並び*/
   justify-content:space-around;
     /* justify-content: center;*/
    /*  margin: 0 auto;*/  }
    
  /*▼--footer領域--*/
  footer {
    background: url("../img/footer-pc.png");
    background-size: cover;
  }
  .snsicon {
    padding-top: 20%;
  }
}