@charset "utf-8";
@import url('//fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,600,700,800,900');
/*----------------------------------------------------
 elements
----------------------------------------------------*/
.telLink {
    pointer-events: none;
}
/*7月に再表示*/
#reservation{
  display: none;
}
#teaser.fixed {
    margin-top: 0 !important;
}
.pc{
  display: block;
}
.sp{
  display: none;
}

body{
  font-family: "ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #333333;
  min-width: 1000px;
  background: #ff9c31;
  background: -moz-linear-gradient(left, #ffc371 0%, #ff325d 100%);
  background: -webkit-linear-gradient(left, #ffc371 0%, #ff325d 100%);
  background: linear-gradient(to right, #ffc371 0%, #ff325d 100%);
}
.top-back{
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #009fe8;
  height: 50px;
  width: 50px;
  padding: 10px;
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0px 0px 5px 0px #ffffff;
  transition: background .3s linear;
  -webkit-transition: background .3s linear;
  z-index: 1;
}
.top-back:hover{
  background: #33b5e2;
}
.top-back a{
  position: absolute;
  width: 15px;
  height: 15px;
  border: 2px solid #707070;
  border-left-color: #FFF;
  border-top-color: #FFF;
  border-right-color: transparent;
  border-bottom-color: transparent;
  top: 21px;
  left: 18px;
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  font-size: 0;
}
.phone-fixed img {
  position: fixed;
  bottom: 175px;
  right: 30px;
  width: 50px;
  height: 50px;
  z-index: 1;
}

@keyframes show{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}
@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
  0% {-moz-transform: rotate(0deg);}
  100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
  0% {-ms-transform: rotate(0deg);}
  100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
  0% {-o-transform: rotate(0deg);}
  100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
#progress {
  width: 100%;
  position: fixed;
  top: 60%;
  left: 0;
  z-index: 50;
}
#progress .imgbox {
  text-align: center;
  padding: 10px 0;
  position: absolute;
  top: -170px;
  left: 0;
  width: 100%;
}
#progress .imgbox img {
  width: 250px;
}
#progress .imgbox img path {
  stroke:#000;
  stroke-width:1px;
  fill:transparent;
  stroke-dasharray:1425px;
  stroke-dashoffset:1425px;
  animation:anim 2s ease-in 0s forwards;
}
#progressBar {
  width: 0;
  height: 3px;
  background-color: #ffffff;
  position: absolute;
  top: 0;
  left: 0;
}
#progressTxt {
  text-align: center;
  font-size: 26px;
  margin-top: 10px;
  color: #ffffff;
}

#boel{
  stroke:#000;
  stroke-width:1px;
  fill:transparent;
  stroke-dasharray:1425px;
  stroke-dashoffset:1425px;
  animation:anim 2s ease-in 0s forwards;
}
@keyframes anim{
  0%{stroke-dashoffset:1425px;}
  30%{fill:transparent;}
  60%{stroke-dashoffset:0;}
  100%{stroke-dashoffset:0; fill:#000000;}
}

/*----------------------------------------------------
 header
----------------------------------------------------*/
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition: background .3s linear;
  -webkit-transition: background .3s linear;
  animation: show 0.3s linear 0s;
  z-index: 100;
}
header.active {
  /*background: #d1e8f8;*/
  padding: 5px 0;
  background: #ff9c31;
  background: -moz-linear-gradient(left, #ffc371 0%, #ff325d 100%);
  background: -webkit-linear-gradient(left, #ffc371 0%, #ff325d 100%);
  background: linear-gradient(to right, #ffc371 0%, #ff325d 100%);
}
#headerInner {
  width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}
header h1{
  position: absolute;
  top: 40px;
  display: block;
}
header h1:after {
  content: "";
  width: 195px !important;
  height: 59px;
  background: url(../../common/img/pc/header/logo_m.svg) no-repeat;
  display: none;
  animation: show 0.3s linear 0s;
  filter: drop-shadow(1px 0px 1px rgba(255,255,255,0.8));
}
header.active h1{
  float: left;
  margin-right: 60px;
  position: static;
}
header.active h1:after,header h1 img {
  width: 100%;
  display: block;
  animation: show 0.3s linear 0s;
}
header.active h1 img,header #gnav {
  display: none;
  animation: show 0.3s linear 0s;
}
header.active #gnav {
  display: block;
  animation: show 0.3s linear 0s;
}
a {
  text-decoration: none;
}

/*----------------------------------------------------
 gnav
----------------------------------------------------*/
nav#gnav {
  display: none;
  animation: show 0.3s linear 0s;
  float: left;
}
nav#gnav > ul {
  display: flex;
  flex-direction: row;
  padding: 16px 0;
}
nav#gnav > ul > li {
  margin-left: 35px;
}
nav#gnav > ul > li:first-child {
  margin-left: 0;
}
nav#gnav > ul > li > a {
  color: #ffffff;
  transition: color .3s linear;
  -webkit-transition: color .3s linear;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
}
nav#gnav > ul > li > a:hover{
  color: #333333;
}
nav#gnav > ul > li > a{
  padding-left: 15px;
  position: relative;
}
nav#gnav > ul > li > a:before{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -6px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent #ffffff;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 1200px;
  padding: 5px 0;
  margin-left: -600px;
  list-style: none;
  font-size: 14px;
  text-align: left;
  background-color: rgba(0,0,0,0.9);
  background-clip: padding-box;
}


/*----------------------------------------------------
 footer
----------------------------------------------------*/
footer {
  color: #ffffff;
  background: #ff9c31;
  background: -moz-linear-gradient(left, #ffc371 0%, #ff325d 100%);
  background: -webkit-linear-gradient(left, #ffc371 0%, #ff325d 100%);
  background: linear-gradient(to right, #ffc371 0%, #ff325d 100%);
}
#footerInner {
  width: 1000px;
  margin: 0 auto;
  padding: 50px 0 0;
}
.footerLogo {
  margin: 0 auto 35px;
  text-align: center;
  width: 250px;
}
#footerInner p{
  text-align: center;
  font-size: 14px;
  line-height: 26px;
}
#footerInner p a{
  color: #ffffff;
  text-decoration: none;
}
#footerInner p.copy{
  padding: 10px 0;
}


/*----------------------------------------------------
 content
----------------------------------------------------*/
.wrap{
  opacity: 0;
  overflow: hidden;

}
#content {
}
#contentInner {

}

#mainContent {

}
#subContent {

}
.secInner{
  min-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.drawer-hamburger{
    display: none;
}
/*====
    フェードイン　
=================================*/
.fade_off {
  position: relative;
  bottom: -20px;
  opacity: 0;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
}
.fade_on {
  position: relative;
  bottom: 0 !important;
  opacity: 1 !important;
}
.dot{
  position: relative;
}
.dot:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 3px 3px;
  margin: 0 auto;
/*  background: rgba(0,0,0,0.5);*/
  z-index: 1;
   background: rgba(255,156,46,0.5);
    background: -moz-linear-gradient(left, rgba(255,195,113,0.5) 0%, rgba(255,50,93,0.5) 100%);
    background: -webkit-linear-gradient(left, rgba(255,195,113,0.5) 0%, rgba(255,50,93,0.5) 100%);
    background: linear-gradient(to right, rgba(255,195,113,0.5) 0%, rgba(255,50,93,0.5) 100%);
}
.cardContainer {
  display: flex;
  flex-flow: row wrap;
  margin: 50px 0;
}

.cardBox {
  width: calc(33.3% - 20px);
  margin: 10px 10px;
}

.cardBox {
  position: relative;
  border: 2px solid #333333;
  border-radius: 5px;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
}

.card-radius_02 {
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,.2);
}

.card_02 {
  background-color: #fff;
  box-shadow: 0 0 0px rgba(0, 0, 0, .16);
  color: #212121;
  text-decoration: none;
}

.card__header_02 {
  display: flex;
  flex-wrap: wrap;
}

.card__title_02 {
  padding: 1rem 1.5rem 0;
  font-size: 1.6rem;
  order: 1;
  font-weight: bold;
  text-decoration: none;
}

.card__thumbnail_02 {
  margin: 0;
  order: 0;
  width: 100%;
}

.card__image_02 {
  width: 100%;
}

.card__body_02 {
  padding: 0 1.5rem;
}

.card__text_02 {
  font-size: .8rem;
  text-align: center;
  text-decoration: none;
}

.card__text2_02 {
  font-size: .8rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

@media screen and (max-width: 767px) {
.pc{
  display: none;
}
.sp{
  display: block;
}
.telLink {
    pointer-events: auto;
    color: #fff;
    text-decoration: none;
}
#progress .imgbox img {
    width: 250px;
}
body {
    font-size: 16px;
    line-height: 1.7;
    color: #333333;
    min-width: 100%;
}
.secInner {
    width: 100%;
    min-width: 100%;
    margin: 0 auto;
}

header h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 80%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
header h1 img {
  width: 100%;
}
header.active {
    padding: 7.5px 0;
}
header.active h1 {
    float: none;
    margin-right: 0;
    position: static;
    top: auto;
    left: auto;
    width: 160px;
    transform: translate(0%, 0%);
    -webkit-transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
}
header #gnav {
    background: #ff9c31;
    padding-top: 74px;
    box-sizing: border-box;
}
header.active #gnav {
    animation: show 0.3s linear 0s;
}

nav#gnav > ul > li > a {
    color: #ffffff;
    transition: color .3s linear;
    -webkit-transition: color .3s linear;
    text-decoration: none;
    font-size: 20px;
    display: block;
    padding: 13px 10px;
}
.dropdown > a:before {
    content: "";
    width: 5px;
    height: 9px;
    background: url(../../common/img/pc/icon/menu-close.png) no-repeat;
    display: block;
    position: absolute;
    right: 0;
    left: auto;
    top: 50%;
    margin-top: -4.5px;
}
.drawer-hamburger {
    padding: 15px 13px 48px;
    animation: show 0.3s linear 0s;
    width: 38px;
}
.drawer-toggle.drawer-hamburger:after{
    content: "MENU";
    display: block;
    color: #fff;
    position: absolute;
    top: 43px;
    right: 12px;
    font-size: 12px;
    letter-spacing: 1px;
}
header.active .drawer-hamburger{
    display: block;
    animation: show 0.3s linear 0s;
    right: 0 !important;
}
.drawer--right.drawer-open .drawer-hamburger:after{
    content: "CLOSE";
    display: block;
    color: #fff;
    position: absolute;
    top: 43px;
    right: 9px;
    font-size: 12px;
}
.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
    height: 1px;
    background-color: #fff;
}
.drawer-hamburger-icon {
    margin-top: 10px;
}
.drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
    top: -8px;
}
.drawer-hamburger-icon:after {
    top: 8px;
}
.drawer-overlay {
    background-color: rgba(0,0,0,.7);
}
.drawer-nav {
    width: 100%;
}
.drawer--right .drawer-nav {
    right: -100%;
}
#headerInner {
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}
header.active #headerInner{
    height: auto;
}
#footerInner {
    width: 100%;
    margin: 0 auto;
    padding: 20px 20px 0;
    position: relative;
}
.footerLogo img{
  width: 183px;
}
nav#gnav > ul {
    display: block;
    flex-direction: row;
    padding: 0 20px;
}
nav#gnav > ul > li {
    margin-left: 0;
    border-bottom: 1px solid #ccc;
}
nav#gnav > ul > li > a:before {
    display: block;
    position: absolute;
    left: auto;
    right: 0;
    top: 50%;
}
#reserBtn{
  border-bottom: none !important;
  margin-top: 30px;
}
#reserBtn a{
    background-color: #324023;
    background-image: url(../../common/img/sp/icon/icon-arrow.png);
    background-position: right 20px top 50%;
    background-repeat: no-repeat;
    background-size: 8.4px 14.3px;
}
#reserBtn a:before{
  content: none !important;
}

}
.sub-sp-title {
  display: none;
}
@media screen and (max-width: 479px) {
  /* 479px以下用（スマートフォン用）の記述 */
  .cardBox {
    width: 100%;
    margin-bottom: 50px;
  }
  .sub-sp-title {
    display: block;
    font-size: 0.75rem;
  }
}