@charset "UTF-8";
body {
  font-family: "Yu Gothic", YuGothic, Helvetica, Arial,
  "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",
  Meiryo, メイリオ, sans-serif;
  background-color: #f7f6f4;
  overflow: hidden;
  color: #000101;
}

/** -----------------------------------
  全体レイアウト
-------------------------------------**/
img {max-width: 100%; height: auto;}
#about ,#service{padding: 10vw 7% 33vh 7%;}
#voice ,#access{padding: 0px 10% 56px 10%;}
#sckedule {padding: 100px 7% 30px 7%;}
.section-inner {position:relative; width: 100%;max-width: 960px;margin: 0 auto;}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  #about {padding: 10vw 7% 25vh 7%;}
  #voice ,#access{padding: 0px 7% 56px 7%;}
}


/** -----------------------------------
    テキスト
-------------------------------------**/

h2 {font-weight: bold; font-size: 60px;line-height: 1.5; letter-spacing: 0.03em; margin-bottom: 20%; color: #fc555e;}
h3 {font-weight: bold; font-size: 30px; line-height: 1.6; letter-spacing: 0.03em; margin-bottom: 30px; padding-top: 50px; color:#532a2a;}
p.large {font-size: 20px; line-height: 1.5; letter-spacing: 0.06em; font-weight: bold; margin-bottom: 20px; color:#532a2a;}
p.small {font-size: 16px; line-height: 1.8; letter-spacing: 0.06em; text-decoration: none;}
p.mini{font-size: 10px; line-height: 1.8; letter-spacing: 0.06em; }
h1.header-logo {width: 120px;margin-top: 10px;}
h1.header-logo :hover{opacity:0.8;}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
h2{font-size: 26px; margin-bottom: 4%;}
h3{font-size: 24px;}
p.large{font-size: 18px;}
}


/** -----------------------------------
    ボタン
-------------------------------------**/
.button-small ,.button-small1{
  display: block;
  width: 160px;
  height: 44px;
  background-color: #fc555e;
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.3em;
  font-weight: bold;
  line-height: 45px;
  text-align: center;
  border-radius: 10px;
}
.button-small1:hover {top:-3px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);}
.button-small1 a{ text-decoration: none;}


/** -----------------------------------
    ヘッダー
-------------------------------------**/
#header {width: 100%; height: 70px; display: flex; justify-content: space-between; padding: 0 80px; position: fixed; top: 0; z-index: 4;}
#header.header-logo{display: flex; align-items: center;}
#header.header-logo a {display: inline;}
#header .gnav-pc-wrap { width: 100%;display: flex; justify-content: space-between; align-items: center;}
#header .gnav-pc {margin-left: auto;}
#header .gnav-pc li {display: inline-flex; margin-right: 20px}
#header .gnav-pc-wrap a {text-decoration: none; transition: 0.7s;}
#header .gnav-pc li a {font-size: 20px; letter-spacing: 0.13em; color:#532a2a;font-weight: bold; transition: 1.0s;}
#header .gnav-pc li a:hover {color: #fc555e;}
#header .hamburger-menu {display: none;}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  #header {padding: 0; }
  #header h1 {padding-left: 7%; margin: auto; width: 200px; height: auto;}
  #header h1 a {display: flex; align-items: flex-start; }
  #header .hamburger-menu{display: flex;}

    /* PCのナビゲーションをスマホでは非表示にする */
  .gnav-pc-wrap ,.button-small{display: none;}
  .button-small1 {margin-top: 40px; width:100%; height:60px; line-height:60px;text-decoration: none;}
  .gnav-pc {display: none;}
  .menu-btn {
      position: fixed;
      top: 10px;
      right: 10px;
      display: flex;
      height: 60px;
      width: 60px;
      justify-content: center;
      align-items: center;
      z-index: 90;
  }
  .menu-btn span,
  .menu-btn span:before,
  .menu-btn span:after {
      content: '';
      display: block;
      height: 3px;
      width: 25px;
      border-radius: 3px;
      background-color: #ffffff;
      position: absolute;
  }
  .menu-btn span:before { bottom: 8px;}
  .menu-btn span:after { top: 8px;}
  .menu-btn {
    position: fixed;
    top: 4px;
    right: 4px;
    display: flex;
    height: 50px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
  }
  .menu-btn span,
  .menu-btn span:before,
  .menu-btn span:after {
      content: '';
      display: block;
      height: 2px;
      width: 25px;
      border-radius: 3px;
      background-color: #333333;
      position: absolute;
  }
  .menu-btn span:before {
      bottom: 8px;
  }
  .menu-btn span:after { top: 8px;}

  /* バツが三本線 */
#menu-btn-check:checked ~ .menu-btn span { background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/}
#menu-btn-check:checked ~ .menu-btn span::before { bottom: 0; transform: rotate(45deg);}
#menu-btn-check:checked ~ .menu-btn span::after { top: 0; transform: rotate(-45deg);}
/* end */

#menu-btn-check{ display: none;}
.menu-content {width: 100%; height: 100vh; position: fixed; top: 0; z-index: 80; opacity: 0.95; background-color: #f7f6f4}
.menu-content ul { padding: 70px 30px 0;}
.menu-content ul li { border-bottom: solid 1px #010000; list-style: none;}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 20px;
    box-sizing: border-box;
    color:#2d2a26;
    text-decoration: none;
    padding: 20px 0 20px 0;
    position: relative;
    text-align: center;
    font-weight: bold;
}
.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #2d2a26;
    border-right: solid 2px #2d2a26;
    transform: rotate(45deg);
    position: absolute;
    right: 5px;
    top: 28px;
}
#menu-btn-check:checked ~ .menu-content { right: 0;/*メニューを画面内へ*/}

}




/** -----------------------------------
    メインビジュアルー
-------------------------------------**/
.mainvisual-pc{display: flex; height: 100%; padding-top: 40px;}
.mainvisual-sp{display: none;}
.mainvisual-right{
  background-image: url(../images/mainvisual-right-bg-pc.webp);
  width: 60%;
  background-size: cover;
  border-radius: 20px 0 0 20px;
}
.mainvisual-left{
  width: 40%;
  padding-left: 7%;
  align-items: center;
  display: flex;
}
.mainvisual-left-content{display: block;}
.mainvisual-left-content img{width: 60%; margin-left: 30px;}
#mainvisual {
    width: 100%;
    background-size: 100vh;
  	height: calc(100vh - 70px);
  	background-position: center;
  	background-repeat: no-repeat;
  	margin-top: 70px;
    position: relative;
}
.fuwafuwa {animation: fuwafuwa 3s infinite ease-in-out .8s alternate; display: inline-block; transition: 1.5s ease-in-out; position: absolute; right: 0px; top: -70px; z-index: -10;}

@keyframes fuwafuwa {
  0% {transform:translate(0, 0) rotate(-7deg);}
  50% {transform:translate(0, -7px) rotate(0deg);}
  100% {transform:translate(0, 0) rotate(7deg);}
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
.mainvisual-right{ background-image: url(../images/mainvisual-right-bg-sp.webp);}
#mainvisual {width: 100vw; height: calc(100vh - 60px); margin-top: 60px;}
.mainvisual-pc{display: none;}
.mainvisual-sp{display: block;}
.mainvisual-left{width: 100%; padding: 9%; height: calc(35vh - 70px);}
.mainvisual-right{height: 60vh; margin-left: 9%; width: 100%;}
.mainvisual-left-content img{margin-left: 40%;margin-top: -10px;}
}


/** -----------------------------------
    About
-------------------------------------**/

.col-2 {display: flex; margin: 50px 0; height: 40vh}
.col-2-pc{display: flex; margin-bottom: 162px;}
.col-2 .item-left{width: 50%;}
.col-2 .item-right{width: 50%; padding-left: 5%; padding-right: 10%; margin: auto 0;}
.item-left img{object-fit: cover; object-position: center center; width: 100%; height: 100%; border-radius: 15px;}
.item-right a.button-small {width: auto; text-decoration: none; margin-top: 10px;}

#about .fuwafuwa1 ,.fuwafuwa2 ,.fuwafuwa3 ,.fuwafuwa4 ,.fuwafuwa5 ,.fuwafuwa6{position: absolute;}
#about .fuwafuwa4 ,.fuwafuwa5 ,.fuwafuwa6{animation: fuwafuwa 3s infinite ease-in-out .8s alternate; transition: 1.5s ease-in-out;}
.fuwafuwa1 {right: 0px; width: 110%; z-index: -10;}
.fuwafuwa2 {right: 4vw;}
.fuwafuwa3 {right: 0px; width: 60%; z-index: -10;}
.fuwafuwa4 {left: 4vw; width: 5%;}
.fuwafuwa5 {left: 4vw; width: 5%;}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  .fuwafuwa1 {width: 93%;}
  .fuwafuwa2 {right: 6vw; z-index: -1; width:15%;}
  .fuwafuwa4 {left: 8vw; width: 10%;}
  .fuwafuwa5 ,.fuwafuwa6{left: 3vw; width: 10%;}  
  .col-2 {display: block; margin: 50px 0 10px 0; height:auto; position: relative;}
  .col-2 .item-left{width: 100%; height: 40vh;}
  .col-2  .item-right{width: 100%;  margin: 30px 0px 0px 0px; padding: 0;}
  #about p.small{margin-bottom: 60px;}
  .item-right a.button-small{display: block; margin-top: -40px; margin-bottom: 60px;}
}


/** -----------------------------------
    voice
-------------------------------------**/

#voice {background-color: #f8eced; text-align: center;}
#section-inner{margin-bottom: 56px;}
.voice-background{position: relative;}
.voice-background1{width: 100%; height:auto; position: absolute; z-index: -1; top: -30vh;}
.voice-background2{display: block; width: 100%; height: 10vh;}
.voice-background3{width: 140px; height: auto; position: absolute; left: 50%; transform: translateX(-50%); top: -60px;}
.voice-background4{width: 250px; height: auto; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0px;}
.fuwafuwa7 {animation: fuwafuwa 3s infinite ease-in-out .8s alternate; transition: 1.5s ease-in-out; position: absolute; width: 20%; height: auto;position: absolute; left: 60%; bottom: 80px;}


/** -------- slider設定 -------- **/
.slick-slide img {margin: auto; width: 55%;}
.slick-next:before, .slick-prev:before{color: #fc555e;font-size: 40px;}
.slick-dotted.slick-slider {margin-bottom: 60px;}
.slider-sp{display: none;}
.slider-pc{display: block;}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  .voice-background1{top: -20vh;}
  .slick-slide img {margin: auto; width: 90%;}
  .slick-next:before, .slick-prev:before{font-size: 20px;}
  .slider-pc{display: none;}
  .slider-sp{display: block;}
  .slick-next{right: -10px;}
  .slick-prev {left: -10px;}
}

/** -----------------------------------
     Sckedule
-------------------------------------**/

.schedule {position: relative; font-size: 14px; margin-bottom: 40px;}
.schedule::before {position: absolute; background-color: #f8e6e7; content: "";}
.schedule ul { padding: 0px; margin: 0px; list-style: none;}
.schedule li {position: relative;}
.schedule_time {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 5em;
  height: 2em;
  border-radius: 6px;
  background-color: #fc555e;
  color: #fff;
  text-align: center;
}
.schedule_time::before {
  position: absolute;
  width: 0.5em;
  height: 0.5em;
  z-index: -1;
  background-color: #fc555e;
  content: "";
}
.schedule_time::after {
  position: absolute;
  width: 1em;
  height: 1em;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: #fc555e;
  content: "";
}

.schedule_content_title { font-weight: bold;}
.sckedule-background{position: relative;}
.sckedule-background1{width: 140px; position: absolute; right: 3vw; z-index: 1;}
.sckedule-background2{width: 40%; position: absolute; right: -7%; }
.sckedule-background2-sp{display: none;}
.sckedule-background3{width: 40%; position: absolute; left: 50%; transform: translateX(-50%); top: -60px; z-index: -10;}
.sckedule-background4{width: 80px; position: absolute; right: 10px; top: 300px;}
.fuwafuwa8 {animation: fuwafuwa 3s infinite ease-in-out .8s alternate; transition: 1.5s ease-in-out;}



/** -------- スマホ-------- **/
@media screen and (max-width: 768px) {
  .sckedule-background3{width: 70%; top: 130px;}
  .sckedule-background1{right: 0vw; width: 100px;}
  .sckedule-background2-sp{display: block;  position: absolute; width: auto; right: -7vw;}
  .sckedule-background2{display: none;}
}
@media screen and (max-width: 991.98px) {
  .schedule::before { top: 0px; left: 6.3em; width: 6px; height: 100%;}
  .schedule li { display: flex; align-items: center; width: 100%;}
  .schedule li + li { margin-top: 2em;}
  .schedule_time::before { top: 50%; right: 0px; transform: translateX(50%) translateY(-50%) rotate(45deg);}
  .schedule_time::after { top: 50%; left: 6em; transform: translateY(-50%);}
  .schedule_content { margin: 0px 0px 0px 3em; width: calc(100% - 10em);}
}
@media screen and (min-width: 992px) {
  .schedule::before { top: 3.5em; left: 0px; transform: translateY(-50%); width: 100%; height: 5px;}
  .schedule ul { display: flex; flex-wrap: wrap; margin: 0px -10px;}
  .schedule li { margin: 0px 10px; width: calc(13% - 20px);}
  .schedule_time { margin: 0px auto;}
  .schedule_time::before { left: 50%; bottom: 0px; transform: translateX(-50%) translateY(50%) rotate(45deg);}
  .schedule_time::after { top: 3.5em; left: 50%; transform: translateX(-50%) translateY(-50%);}
  .schedule_content { margin: 3em 0px 0px;}
  .schedule_content_title { text-align: center; }
  .schedule_content_detail { margin-top: 0.5em;}
}

/** -----------------------------------
    ACCESS
-------------------------------------**/
#access {background-color: #f8eced; text-align: center;}
.access-background{position: relative;}
img.access-background-top{display: block; width: 100%; height: auto;}
.access {display: flex; margin: 0 auto; justify-content: space-between; width: 100%; max-width: 700px;}
.item1 {width: 50%; text-align: left;}
.item2 { width: 50%;}
.gmapsp {display: none;}
.item1 a{font-size: 16px; line-height: 1.8; letter-spacing: 0.06em;}
/** -------- スマホ-------- **/
@media screen and (max-width: 768px) {
  .access{display:block;}
  .item1 ,.item2{width: 100%;}
  .gmap {display: none;}
  .gmapsp {display: flex;}
}


/** -----------------------------------
    footerー
-------------------------------------**/
#footer {width: 100%; height: 70px; background-color: #fc555e; text-align: center; color: #ffffff;}
#footer p.small{line-height: 70px;}
/** -------- スマホ -------- **/
@media screen and (max-width: 560px) {
}