@charset "UTF-8";
/* Sass Document */
picture {
  display: block;
}

.gpg-content-inner {
  max-width: calc(1080px + 3rem);
  padding: 0 1.5rem;
  margin: 0 auto;
}

.gpg-title {
  font-size: 2.4rem;
  font-weight: 700;
  position: relative;
  color: #33485c;
  text-align: center;
  letter-spacing: .2em;
  padding-bottom: 3rem;
  margin-bottom: 4.2rem;
  line-height: 1.4;
}

@media screen and (max-width: 767px) {
  .gpg-title {
    padding-bottom: 1rem;
    margin-bottom: 2rem;
  }
}

.gpg-title::after {
  content: '';
  position: absolute;
  height: 3px;
  width: 7.2rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 0;
  background-color: #33485c;
}

.m-text {
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: .2em;
}

.m-note {
  padding-left: 1em;
  text-indent: -1em;
}

.m-center {
  text-align: center;
}

@media screen and (max-width: 767px) {
  .m-center {
    text-align: left;
  }
}

.gpg-cards {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 3.5rem;
}

@media screen and (max-width: 767px) {
  .gpg-cards {
    display: block;
  }
}

.gpg-cards.col3 .gpg-card {
  width: 31.4%;
  margin-right: 2.9%;
}

@media screen and (max-width: 767px) {
  .gpg-cards.col3 .gpg-card {
    width: 100%;
    margin-bottom: 4rem;
  }
  .gpg-cards.col3 .gpg-card:last-of-type {
    margin-bottom: 0;
  }
}

.gpg-cards.col3 .gpg-card:nth-of-type(3n) {
  margin-right: 0;
}

.gpg-cards.col2 {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.gpg-cards.col2 .gpg-card {
  width: 46.2%;
}

@media screen and (max-width: 767px) {
  .gpg-cards.col2 .gpg-card {
    width: 100%;
    margin-bottom: 4rem;
  }
  .gpg-cards.col2 .gpg-card:last-of-type {
    margin-bottom: 0;
  }
}

.gpg-card:nth-of-type(3n) {
  margin-right: 0;
}

.gpg-card .gpg-title {
  font-size: 1.8rem;
  padding-bottom: 1.6rem;
}

.gpg-card picture {
  margin-bottom: 1.6rem;
}

@media screen and (max-width: 767px) {
  .gpg-card picture {
    width: 100%;
  }
  .gpg-card picture img {
    width: 100%;
    height: auto;
  }
}

.gpg-card .gpg-scene-title {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .2em;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.gpg-card .gpg-scene-title .m-text-small {
  font-size: 1.2rem;
  letter-spacing: .1em;
}

.gpg-card .m-text {
  font-size: 1.2rem;
}

.gpg-card a {
  text-decoration: underline;
  color: #33485c;
}

/* ----------------------------------------------------------------------------------------------------
*  メインビジュアル
* --------------------------------------------------------------------------------------------------*/
.gpg-main-visual {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .gpg-main-visual {
    padding-top: var(--header-height);
  }
}

.gpg-main-visual-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 767px) {
  .gpg-main-visual-content {
    display: block;
  }
}

.gpg-main-visual-content picture {
  width: 50%;
}

@media screen and (max-width: 767px) {
  .gpg-main-visual-content picture {
    width: 100%;
  }
}

.gpg-main-visual-content picture img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  font-family: 'object-fit: cover;';
  height: 640px;
}

@media screen and (max-width: 767px) {
  .gpg-main-visual-content picture img {
    height: auto;
  }
}

.gpg-main-visual-content picture.gpg-mv img {
  -o-object-position: bottom right;
     object-position: bottom right;
}

.gpg-main-visual-content picture.gpg-logo {
  text-align: center;
  background-color: #ebe8df;
}

.gpg-main-visual-content picture.gpg-logo img {
  max-width: 640px;
}

@media screen and (max-width: 767px) {
  .gpg-main-visual-content picture.gpg-logo {
    display: none;
  }
}

/* ----------------------------------------------------------------------------------------------------
*  ナビゲーション
* --------------------------------------------------------------------------------------------------*/
.gpg-nav-height {
  height: 8rem;
  width: 100%;
  display: block;
}

@media screen and (max-width: 767px) {
  .gpg-nav-height {
    height: auto;
  }
}

.gpg-nav__wrapper {
  background-color: #33485c;
  padding: 0 0 0 5rem;
}

@media screen and (max-width: 767px) {
  .gpg-nav__wrapper {
    -webkit-transition: .25s;
    transition: .25s;
    padding: 2rem;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    padding-top: calc(var(--header-height) + 2rem);
  }
  .gpg-nav__wrapper.is_open {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.gpg-nav__wrapper.is_fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}
@media screen and (max-width: 767px) {
  .gpg-nav__wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
}
@media screen and (max-width: 767px) {
  .gpg-nav__wrapper.is_fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
}
.gpg-nav__list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}

@media screen and (max-width: 767px) {
  .gpg-nav__list {
    display: block;
  }
}

.gpg-nav__item {
  margin-right: 2rem;
}

@media screen and (max-width: 767px) {
  .gpg-nav__item {
    margin-right: 0;
  }
}

.gpg-nav__link {
  font-size: 1.4rem;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .gpg-nav__link {
    padding: 1.5rem 0;
    display: inline-block;
  }
}

.gpg-nav-content {
  max-width: 1438px;
  margin: 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media screen and (max-width: 767px) {
  .gpg-nav__wrapper .gpg-page-titie {
    display: none;
  }
}

.gpg-hamburger {
  display: none;
  position: fixed;
  width: 100%;
  background-color: #33485c;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  z-index: 20;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 6rem;
}

@media screen and (max-width: 767px) {
  .gpg-hamburger {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

.gpg-hamburger .gpg-page-titie {
  max-width: 40%;
  height: 6rem;
}

.gpg-hamburger .gpg-page-titie img {
  height: 6rem;
}

.gpg-menu-trigger,
.gpg-menu-trigger span {
  display: inline-block;
  -webkit-transition: all .4s;
  transition: all .4s;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.gpg-menu-trigger {
  position: relative;
  width: 3rem;
  height: 2rem;
  background: none;
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  margin-right: 2rem;
}

.gpg-menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
  border-radius: 4px;
}

.gpg-menu-trigger span:nth-of-type(1) {
  top: 0;
}

.gpg-menu-trigger span:nth-of-type(2) {
  top: calc(50% - 1px);
}

.gpg-menu-trigger span:nth-of-type(3) {
  bottom: 0;
}

.gpg-menu-trigger span:nth-of-type(1) {
  -webkit-animation: menu-bar01 .75s forwards;
          animation: menu-bar01 .75s forwards;
}

@-webkit-keyframes menu-bar01 {
  0% {
    -webkit-transform: translateY(0) rotate(45deg);
            transform: translateY(0) rotate(45deg);
    top: calc(50% - 1px);
  }
  50% {
    -webkit-transform: translateY(0) rotate(0);
            transform: translateY(0) rotate(0);
    top: calc(50% - 1px);
  }
  100% {
    -webkit-transform: translateY(0) rotate(0);
            transform: translateY(0) rotate(0);
    top: 0;
  }
}

@keyframes menu-bar01 {
  0% {
    -webkit-transform: translateY(0) rotate(45deg);
            transform: translateY(0) rotate(45deg);
    top: calc(50% - 1px);
  }
  50% {
    -webkit-transform: translateY(0) rotate(0);
            transform: translateY(0) rotate(0);
    top: calc(50% - 1px);
  }
  100% {
    -webkit-transform: translateY(0) rotate(0);
            transform: translateY(0) rotate(0);
    top: 0;
  }
}

.gpg-menu-trigger span:nth-of-type(2) {
  -webkit-transition: all .25s .25s;
  transition: all .25s .25s;
  opacity: 1;
}

.gpg-menu-trigger span:nth-of-type(3) {
  -webkit-animation: menu-bar02 .75s forwards;
          animation: menu-bar02 .75s forwards;
}

@-webkit-keyframes menu-bar02 {
  0% {
    -webkit-transform: translateY(0) rotate(-45deg);
            transform: translateY(0) rotate(-45deg);
    bottom: calc(50% - 1px);
  }
  50% {
    -webkit-transform: translateY(0) rotate(0);
            transform: translateY(0) rotate(0);
    bottom: calc(50% - 1px);
  }
  100% {
    -webkit-transform: translateY(0) rotate(0);
            transform: translateY(0) rotate(0);
    bottom: 0;
  }
}

@keyframes menu-bar02 {
  0% {
    -webkit-transform: translateY(0) rotate(-45deg);
            transform: translateY(0) rotate(-45deg);
    bottom: calc(50% - 1px);
  }
  50% {
    -webkit-transform: translateY(0) rotate(0);
            transform: translateY(0) rotate(0);
    bottom: calc(50% - 1px);
  }
  100% {
    -webkit-transform: translateY(0) rotate(0);
            transform: translateY(0) rotate(0);
    bottom: 0;
  }
}

.gpg-menu-trigger.is_active span:nth-of-type(1) {
  -webkit-animation: active-menu-bar01 .75s forwards;
          animation: active-menu-bar01 .75s forwards;
}

@-webkit-keyframes active-menu-bar01 {
  0% {
    -webkit-transform: translateY(0) rotate(0);
            transform: translateY(0) rotate(0);
  }
  50% {
    -webkit-transform: translateY(0) rotate(0);
            transform: translateY(0) rotate(0);
    top: calc(50% - 1px);
  }
  100% {
    -webkit-transform: translateY(0) rotate(45deg);
            transform: translateY(0) rotate(45deg);
    top: calc(50% - 1px);
  }
}

@keyframes active-menu-bar01 {
  0% {
    -webkit-transform: translateY(0) rotate(0);
            transform: translateY(0) rotate(0);
  }
  50% {
    -webkit-transform: translateY(0) rotate(0);
            transform: translateY(0) rotate(0);
    top: calc(50% - 1px);
  }
  100% {
    -webkit-transform: translateY(0) rotate(45deg);
            transform: translateY(0) rotate(45deg);
    top: calc(50% - 1px);
  }
}

.gpg-menu-trigger.is_active span:nth-of-type(2) {
  opacity: 0;
}

.gpg-menu-trigger.is_active span:nth-of-type(3) {
  -webkit-animation: active-menu-bar03 .75s forwards;
          animation: active-menu-bar03 .75s forwards;
}

@-webkit-keyframes active-menu-bar03 {
  0% {
    -webkit-transform: translateY(0) rotate(0);
            transform: translateY(0) rotate(0);
  }
  50% {
    -webkit-transform: translateY(0) rotate(0);
            transform: translateY(0) rotate(0);
    bottom: calc(50% - 1px);
  }
  100% {
    -webkit-transform: translateY(0) rotate(-45deg);
            transform: translateY(0) rotate(-45deg);
    bottom: calc(50% - 1px);
  }
}

@keyframes active-menu-bar03 {
  0% {
    -webkit-transform: translateY(0) rotate(0);
            transform: translateY(0) rotate(0);
  }
  50% {
    -webkit-transform: translateY(0) rotate(0);
            transform: translateY(0) rotate(0);
    bottom: calc(50% - 1px);
  }
  100% {
    -webkit-transform: translateY(0) rotate(-45deg);
            transform: translateY(0) rotate(-45deg);
    bottom: calc(50% - 1px);
  }
}

/* ----------------------------------------------------------------------------------------------------
*  について
* --------------------------------------------------------------------------------------------------*/
.gpg-about {
  padding-top: 11.2rem;
}

@media screen and (max-width: 767px) {
  .gpg-about {
    padding-top: 4rem;
    overflow: hidden;
  }
}

.gpg-about .gpg-content-inner {
  padding-right: 0;
}

@media screen and (max-width: 767px) {
  .gpg-about .gpg-content-inner {
    padding-right: 1.5rem;
  }
}

.gpg-about__title {
  font-size: 1.8rem;
  margin-bottom: 3rem;
  color: #33485c;
  font-weight: 700;
  letter-spacing: .2em;
  line-height: 1.4;
}

.gpg-media {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (max-width: 767px) {
  .gpg-media {
    display: block;
  }
}

.gpg-media picture {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  width: 51.2%;
  margin-left: 4rem;
}

@media screen and (max-width: 767px) {
  .gpg-media picture {
    width: 100%;
    margin-left: 0;
    margin-top: 1rem;
  }
  .gpg-media picture img {
    width: 100%;
    height: auto;
  }
}

@media screen and (min-width: 768px) and (max-width: 960px) {
  .gpg-about__title {
    letter-spacing: .1em;
  }
  .gpg-media picture {
    margin-left: 2rem;
  }
}

.gpg-main-color {
  color: #33485c;
}

/* ----------------------------------------------------------------------------------------------------
*  ご利用シーン
* --------------------------------------------------------------------------------------------------*/
.gpg-scene {
  padding-top: 10rem;
  /*  margin-bottom: 8rem; */
}

@media screen and (max-width: 767px) {
  .gpg-scene {
    padding-top: 8rem;
  }
}

/* ----------------------------------------------------------------------------------------------------
*  お食事
* --------------------------------------------------------------------------------------------------*/
.gpg-meal {
  padding-top: 10rem;
}

@media screen and (max-width: 767px) {
  .gpg-meal {
    padding-top: 8rem;
  }
}

.gpg-meal picture {
  margin-bottom: 2rem;
}

.gpg-meal .gpg-scene-title {
  font-size: 1.8rem;
  margin-bottom: 2.2rem;
  color: #33485c;
}

.gpg-meal .gpg-meal-text {
  font-weight: 700;
  color: #33485c;
}

.gpg-menu-wrapper {
  margin-top: 2.5rem;
}

.gpg-menu-wrapper a {
  text-decoration: none;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.4;
  display: inline-block;
  margin-bottom: .8rem;
}

.gpg-menu-wrapper .m-note {
  font-size: 1.2rem;
  line-height: 1.4;
}

/* ----------------------------------------------------------------------------------------------------
*  料金
* --------------------------------------------------------------------------------------------------*/
.gpg-price {
  padding-top: 10rem;
  margin-bottom: 7rem;
}

@media screen and (max-width: 767px) {
  .gpg-price {
    padding-top: 8rem;
    margin-bottom: 0;
  }
}

.gpg-price .m-note {
  font-size: 1.2rem;
  line-height: 2;
}

/* 施設まるごと〜 , ご利用金額の例*/
.gpg-price__title {
  font-size: 2.0rem;
  line-height: 1.4;
  letter-spacing: .2em;
  padding: 1rem;
  padding-top: 1.2rem;
  text-align: center;
  background-color: #33485c;
  color: #fff;
  margin-bottom: 3.5rem;
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .gpg-price__title {
    margin-bottom: 1.5rem;
    font-size: 1.4rem;
  }
}

/* チェックイン〜 */
.checkin-text {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: .2em;
  line-height: 1.4;
}

@media screen and (max-width: 767px) {
  .checkin-text {
    text-align: left;
  }
}

.pgp-price-content {
  max-width: 82rem;
  margin: 0 auto 4rem;
}

.gpg-graph-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 2.8rem;
  margin-bottom: 1.4rem;
}

@media screen and (max-width: 767px) {
  .gpg-graph-flex {
    display: block;
    margin-top: 1rem;
  }
}

.gpg-total {
  border: 1px solid #767777;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-right: 1rem;
}

@media screen and (max-width: 767px) {
  .gpg-total {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    margin-right: 0;
    margin-bottom: 1rem;
  }
}

.gpg-total__detail {
  color: #fff;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  background-color: #767777;
  padding: 3rem;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media screen and (max-width: 767px) {
  .gpg-total__detail {
    padding: 1rem;
  }
}

/* ご利用総額 */
.gpg-total__title {
  font-size: 2.3rem;
  font-weight: 700;
  text-align: center;
  padding: 7rem 3rem;
}

@media screen and (max-width: 767px) {
  .gpg-total__title {
    font-size: 1.7rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 0 1rem;
  }
}

.gpg-room-price {
  font-size: 3.5rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .gpg-room-price {
    font-size: 1.7rem;
  }
}

/* プラスマーク */
.gpg-plus {
  width: 3.3rem;
  margin: 3rem auto 4rem;
}

@media screen and (max-width: 767px) {
  .gpg-plus {
    margin: 1rem auto;
    width: 1.5rem;
  }
}

.gpg-nop {
  font-size: 2.3rem;
  color: #fff;
  text-align: center;
  line-height: 1.4;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .gpg-nop {
    font-size: 1.7rem;
  }.gpg-nop .m-small-text {
    font-size: 1.4rem;
  }
}

.gpg-nop .m-small-text {
  font-size: 1.8rem;
}
@media screen and (max-width: 767px) {
  .gpg-nop {
    font-size: 1.7rem;
  }.gpg-nop .m-small-text {
    font-size: 1.4rem;
  }
}
.gpg-graph-wrapper {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

/* テーブル */
.gpg-graph {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border-left: 1px solid #767777;
  margin-bottom: 6rem;
}

@media screen and (max-width: 767px) {
  .gpg-graph {
    margin-bottom: 1rem;
  }
}

.gpg-graph:last-of-type {
  margin-bottom: 0;
}

.gpg-graph .gpg-table-heading th {
  font-size: 2.0rem;
  color: #fff;
  padding: 1.6rem 1rem 1rem;
  text-align: center;
  font-weight: 700;
  background-color: #767777;
  border: none;
}


.gpg-graph .gpg-table-heading th .m-text-small {
  font-size: 1.8rem;
}
@media screen and (max-width: 767px) {
  .gpg-graph .gpg-table-heading th {
    font-size: 1.7rem;
  }
  .gpg-graph .gpg-table-heading th .m-text-small {
    font-size: 1.4rem;
  }
}
.gpg-graph th {
  background-color: #eee;
  font-size: 1.65rem;
}

.gpg-graph td {
  font-size: 1.98rem;
  width: 42%;
}

.gpg-graph td, .gpg-graph th {
  border-right: 1px solid #767777;
  border-bottom: 1px solid #767777;
  padding: 1.6rem 1rem 1rem;
  text-align: center;
  font-weight: 700;
  vertical-align: middle;
}

@media screen and (max-width: 767px) {
  .gpg-graph td, .gpg-graph th {
    padding-right: .5rem;
    padding-left: .5rem;
  }
}

.gpg-graph td .m-text-small, .gpg-graph th .m-text-small {
  font-size: 1.3rem;
}

.gpg-graph td .m-text-small-2, .gpg-graph th .m-text-small-2 {
  font-size: 1.43rem;
}

.gpg-graph td .m-text-more-small, .gpg-graph th .m-text-more-small {
  font-size: .9rem;
}

/* ※ 料金はすべて税込価格です。 */
.gpg-text-price {
  font-size: 1.32rem;
  text-align: right;
  line-height: 2;
  font-weight: 700;
  margin-bottom: 2rem;
}

/* ご利用料金には、下記の内容を含みます。 */
.m-text-detail {
  font-size: 1.2rem;
  line-height: 2;
  letter-spacing: .2em;
}

/* 例：大人20名様で、金曜日にご宿泊の場合 */
.gpg-price-example {
  margin-top: 5rem;
}

@media screen and (max-width: 767px) {
  .gpg-price-example {
    margin-top: 2rem;
  }
}

.gpg-price-example dt {
  font-size: 1.8rem;
  line-height: 1.4;
  padding-bottom: 2rem;
  border-bottom: 1px solid #33485c;
}

@media screen and (max-width: 767px) {
  .gpg-price-example dt {
    padding-bottom: 1rem;
  }
}

.gpg-price-example dd {
  font-size: 2.0rem;
  font-weight: 700;
  line-height: 1.9;
  margin-top: 1rem;
}

.gpg-price-example dd .m-text-small {
  font-size: 1.4rem;
}

@media screen and (max-width: 767px) {
  .gpg-price-example dd {
    text-align: center;
    line-height: 1.4;
  }
}

/* ----------------------------------------------------------------------------------------------------
*  ご予約の流れ
* --------------------------------------------------------------------------------------------------*/
.gpg-flow {
  padding-top: 2rem;
  margin-bottom: -5rem;
  overflow: hidden;
}

.gpg-flow__list {
  display: -ms-grid;
  display: grid;
  margin: 6rem auto 0;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -ms-grid-columns: 2fr 1fr 2fr 1fr 2fr 1fr 2fr;
      grid-template-columns: 2fr 1fr 2fr 1fr 2fr 1fr 2fr;
}

@media screen and (max-width: 767px) {
  .gpg-flow__list {
    display: block;
    margin-top: 3rem;
  }
}

.m-blank {
  display: none;
}

.ie11 .gpg-flow__list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.ie11 .m-blank {
  display: none;
}

.ie11 .m-hide {
  display: none;
}

.ie11 .gpg-flow__item {
  margin-bottom: 1rem;
}

.m-hide {
  display: none;
}

@media screen and (min-width: 768px) and (max-width: 960px) {
  /*　画面サイズが768pxから960pxまではここを読み込む　*/
  .gpg-flow__list {
    margin: 0 auto;
    max-width: 50rem;
    -ms-grid-columns: 1fr 2fr 1fr 2fr 1fr;
        grid-template-columns: 1fr 2fr 1fr 2fr 1fr;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    row-gap: 2rem;
    -webkit-column-gap: 1rem;
            column-gap: 1rem;
  }
  .m-blank {
    display: block;
  }
  .m-hide {
    display: block;
  }
}

.gpg-flow__item {
  background: url(../img/lp-gramping/flow-bg.png) no-repeat center center/cover;
  width: 20.3rem;
  height: 20.3rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
}

@media screen and (max-width: 767px) {
  .gpg-flow__item {
    margin: 0 auto;
  }
}

.gpg-flow__item:last-of-type {
  margin-right: 0;
}

@media screen and (max-width: 767px) {
  .gpg-flow__item:last-of-type {
    margin: 0 auto;
  }
}

.gpg-flow__item:last-of-type::after {
  display: none;
}

.m-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1.2rem 0 1.2rem 1.8rem;
  border-color: transparent transparent transparent #fff100;
  margin: 0 1rem;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .m-arrow {
    margin: 2rem auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 24px 20px 0 20px;
    border-color: #fff100 transparent transparent transparent;
    display: block;
  }
  .m-arrow.m-hide {
    display: none;
  }
}

.gpg-flow__title {
  font-size: 2.0rem;
  height: 50%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #fff;
  line-height: 1;
  text-align: center;
  padding-top: 3rem;
  font-weight: 700;
}

.gpg-flow__text {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  line-height: 2;
  text-align: center;
  margin-top: 1rem;
}

/* キャンセルについて */
.gpg-cancel {
  background-color: #e7625f;
  padding: 2rem 3rem 1.8rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 100px;
  max-width: 82rem;
  margin: 5rem auto;
}

@media screen and (max-width: 767px) {
  .gpg-cancel {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 2rem;
  }
}

.gpg-cancel dt {
  font-size: 2.0rem;
  font-weight: 700;
  color: #fff;
  margin-right: 6%;
  letter-spacing: .2em;
}

@media screen and (max-width: 767px) {
  .gpg-cancel dt {
    margin-right: 0;
    margin-bottom: 1rem;
    text-align: center;
  }
}

.gpg-cancel dd {
  font-size: 1.4rem;
  line-height: 2;
  color: #fff;
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .gpg-cancel dd {
    text-align: center;
  }
}

/* ----------------------------------------------------------------------------------------------------
*  お問い合わせ
* --------------------------------------------------------------------------------------------------*/
.gpg-inquiry {
  padding-top: 10rem;
}

@media screen and (max-width: 767px) {
  .gpg-inquiry {
    padding-top: 8rem;
  }
}

.gpg-application-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 6.5rem;
}

@media screen and (max-width: 767px) {
  .gpg-application-content {
    display: block;
    padding-left: 0;
  }
}

@media screen and (min-width: 768px) and (max-width: 960px) {
  .gpg-application-content {
    padding-left: 0;
  }
}

.gpg-form-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 2.2rem;
}

.gpg-form-wrap p {
  font-weight: bold;
  color: #33485c;
}

@media screen and (max-width: 767px) {
  .gpg-form-wrap {
    display: block;
  }
}

.gpg-form-wrap .m-text-small {
  font-size: 1.2rem;
}

.gpg-form-wrap.m-fs {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.gpg-form-wrap.m-fs dt {
  margin-top: 1rem;
}

.gpg-form-wrap dt {
  font-size: 1.8rem;
  font-weight: 700;
  color: #33485c;
  text-align: right;
  margin-right: 2rem;
  min-width: 18.4rem;
  letter-spacing: .2em;
}

@media screen and (max-width: 767px) {
  .gpg-form-wrap dt {
    text-align: left;
    margin-bottom: .5rem;
  }
}

.gpg-form-wrap dd {
  font-size: 1.8rem;
  color: #33485c;
  letter-spacing: .2em;
  font-weight: 700;
}

.gpg-form-wrap dd div {
  margin-bottom: 1rem;
}

@media screen and (max-width: 991px) {
  .gpg-form-wrap dd div {
    margin-bottom: 0;
  }
}

input[type="text"],
input[type="tel"],
input[type="email"],
textarea {
  background-color: #efefef;
  padding: .5rem;
  font-size: 1.8rem;
}

.ui-datepicker {
  width: auto !important;
}

textarea {
  min-width: 32.4rem;
  min-height: 13rem;
}

@media screen and (max-width: 767px) {
  textarea {
    width: 100%;
    min-width: inherit;
  }
}

.gpg-form-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 767px) {
  .gpg-form-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.first-name {
  margin-right: 1rem;
}

@media screen and (max-width: 767px) {
  .first-name {
    width: 50%;
  }
}

.m-yy {
  width: 9.4rem;
  margin-right: 1rem;
}

.m-mm {
  width: 4.7rem;
  margin: 0 1rem 0 2rem;
}

@media screen and (max-width: 767px) {
  .m-mm {
    margin-left: 1rem;
  }
}

.m-dd {
  width: 4.7rem;
  margin: 0 1rem 0 2rem;
}

@media screen and (max-width: 767px) {
  .m-dd {
    margin-left: 1rem;
  }
}

.m-middle {
  width: 15.4rem;
  margin-right: 1rem;
}

@media screen and (max-width: 767px) {
  .name01,
  .name02,
  .kana01,
  .kana02{
    width: 48%;
  }
  .name01 input,
  .name02 input,
  .kana01 input,
  .kana02 input{
    width: 100%;
  }
  .m-middle {
   /* width: 48%; */
  }
}

.last-name {
  margin-right: 0;
}

.m-last-name {
  margin-right: 0;
}

.m-large {
  width: 31.8rem;
}

@media screen and (max-width: 767px) {
  .m-large {
    width: 100%;
  }
}

.m-short {
  width: 4.7rem;
  margin: 0 1rem;
}

.m-baseline {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.gpg-pearson .m-baseline {
  display: block;
  line-height: 1.4;
  margin-bottom: 0rem;
  vertical-align: baseline;
}

.gpg-pearson .m-baseline .m-short {
  margin-bottom: 1.5rem;
}

.m-calendar {
  width: 3.5rem;
  margin: 0 0 .2rem 3rem;
}

@media screen and (max-width: 767px) {
  .m-calendar {
    margin-left: 0;
    width: 3rem;
  }
}

span.wpcf7-form-control-wrap.date {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.ui-datepicker-trigger {
  margin-left: 1rem;
  width: 3.5rem;
  display: inline-block;
}

.m-submit {
  margin: 6rem auto;
  width: 60%;
  background-color: #33485c;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.2em;
  border: 1px solid #005513;
  font-size: 1.8rem;
  padding: 2rem;
  display: block;
  -webkit-transition: .3s;
  transition: .3s;
}

@media screen and (max-width: 767px) {
  .m-submit {
    width: 100%;
    margin-top: 3rem;
  }
}

.m-submit:hover {
  opacity: .7;
}
/*# sourceMappingURL=lp-gramping.css.map */


/*add 20211001 for form*/
.wpcf7-not-valid-tip {
	font-size: 0.8rem;
	letter-spacing: 0;
	position: absolute;
	left: 0;
	bottom: -20px;
}
.your-email .wpcf7-not-valid-tip, .gpg-form-wrap:nth-of-type(5) .wpcf7-not-valid-tip {
	bottom: -25px;
}

.gpg-pearson .m-baseline {
	position: relative;
}
.gpg-form-wrap .m-baseline {
	position: relative;
}

.wpcf7-form-control-wrap.adult .wpcf7-not-valid-tip {	
	position: absolute;
	left: 10px;
	bottom: -14px;
	white-space: nowrap;
}

@media screen and (max-width: 767px) {
	.wpcf7-custom-item-error.adult .wpcf7-not-valid-tip {
		bottom: 50px;
	}
}

.wpcf7 form.invalid .wpcf7-response-output {
	border-color: #dc3232;
	margin-top: -40px;
	padding: 20px;
	text-align: center;
}
@media screen and (max-width: 767px) {
	.wpcf7 form.invalid .wpcf7-response-output {
		font-size: 1.4rem;
	}
}