/*!
 * Bootstrap v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

:root {
  /* Brand - primary */
  --color-brand-primary: #202B46;         /* HGV Navy */

  /* Brand - inverse */
  --color-brand-white: #FFFFFF;         /* White */
  --color-brand-black: #000D14;
  --color-black: #000000;

  /* Accent (secondary 7 colors) */
  --color-accent-1: #00B0B9;
  --color-accent-2: #018289;
  --color-accent-3: #00A9EB;
  --color-accent-4: #DD0088;
  /* --color-accent-4: #E73C3E; */
  --color-accent-5: #CE3262;
  --color-accent-6: #742F4E;
  --color-accent-7: #CBA158;

  /* Neutral (gray 6 steps) */
  --color-neutral-100: #606060;           /* darkest */
  --color-neutral-200: #909292;
  --color-neutral-300: #9EA2AD;
  --color-neutral-400: #C7C8C8;
  --color-neutral-500: #DEDFDF;
  --color-neutral-600: #EAEAEA;
  --color-neutral-700: #F1F1F1;          /* lightest */

  /* Sand */
  --color-neutral-sand: #F5F1EB;

  --color-neutral-lightteal:#d4f1f3;
}


@media only screen and (max-width: 767px) {

:root {
  --text-size-normal: 1.8rem;
}

}

.bold{
  font-weight: 700;
}

/*==========================================
 font
===========================================*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
html {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 62.5%;
  font-weight: 400;
  color: var(--color-brand-black);
}

/* link */
a:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
}
a { outline: none; text-decoration: none; }
a:link    { color: var(--color-brand-white); text-decoration: none; }
a:visited { color: var(--color-brand-black); text-decoration: underline; }
a:hover   { color: var(--color-brand-black); text-decoration: underline; }
a:active  { color: var(--color-brand-black); text-decoration: underline; }



/*==========================================
 body
===========================================*/

html {
  background: var(--color-brand-white);
  overflow: auto;
}
body {
  overflow: hidden;
	/* min-width: 1100px; */
  -webkit-text-size-adjust: 100%;
}
@media only screen and (max-width: 767px) {
  body {
  	min-width: auto;
  }
}

/*==========================================
 clearfix
===========================================*/
.clearfix {
	zoom: 1;
}
.clearfix:before, .clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}

/*==========================================
 画像切替
===========================================*/
/* PC、スマートフォン表示分岐 */
.pcView {
  display: block !important;
}
.spView {
  display: none !important;
}
@media only screen and (max-width: 767px) {
  .pcView {
    display: none !important;
  }
  .spView {
    display: block !important;
  }
}

/*==========================================
 ヘッダーのスタイル
===========================================*/
header{
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  background-color: var(--color-brand-white);
}

.header_block{
  display: flex;
  justify-content: space-between;
  padding: 0;
  align-items: center;
  width: 90%;
  margin: 0 auto;
}

.header_block a{
  display: block;
  padding: 20px 0;
}
.header_block a img{
  width: 100%;
  max-width: 230px;
}

@media only screen and (max-width: 767px) {
  header{
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    background-color: var(--color-brand-white);
  }

  .header_block{
    display: flex;
    justify-content: center;
    padding: 0;
    align-items: center;
    width: 90%;
    margin: 0 auto;
  }

  .header_block a{
    display: block;
    padding: 20px 0;
  }
  .header_block a img{
    width: 100%;
    max-width: 230px;
  }
}


/*==========================================
 メインビジュアルのスタイル
===========================================*/
#hilton-main{
  padding: 75px 0 0;
}

.contents_wrapper{
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
}

.main_visual{

}

.main_visual img{
  width: 100%;
}

@media only screen and (max-width: 767px) {
  #hilton-main{
    padding: 75px 0 0;
  }

  .contents_wrapper{
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
  }

  .main_visual{

  }

  .main_visual img{
    width: 100%;
  }
}

/*==========================================
 イントロのスタイル
===========================================*/

.intro_block{
  margin: 70px auto;
  width: 95%;
}

.intro_title{
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  text-align: center;
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.6;
}

.intro_subtitle{
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  text-align: center;
  font-size: 2rem;
  font-weight: 300;
  margin: 20px 0 0;
  line-height: 1.6;
}

.intro_text{
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  text-align: left;
  font-size: 1.7rem;
  font-weight: 400;
  margin: 0;
  line-height: 1.6;
}

.intro_text p{
  margin: 0 0 20px;
}

.intro_text p:last-child{
  margin: 0 0;
}

.intro_btn,.intro_btn:visited,.intro_btn:focus{
  color: var(--color-brand-white);
  background-color: var(--color-accent-4);
  text-align: center;
  padding: 12px 0;
  width: 50%;
  max-width: 300px;
  margin: 50px auto 0;
  display: block;
  border-radius: 60px;
  font-size: 2rem;
  font-weight: 500;
}

.intro_btn:hover{
  color: var(--color-brand-white) !important;
  text-decoration: none;
}

@media only screen and (max-width: 767px) {
  .intro_block {
    margin: 30px auto;
    width: 90%;
  }

  .intro_text p{
    margin: 0 0 20px;
    font-size: 1.5rem;
  }

  .intro_btn{
    width: 80%;
    max-width: 400px;
    font-size: 1.8rem;
    margin: 30px auto 0;
  }
}

/*==========================================
 プランのスタイル
===========================================*/

.plan_block{
  background-color: var(--color-brand-primary);
  color: var(--color-brand-white);
  padding: 30px 30px;
}

.plan_text{
  font-size: 1.7rem;
  color: var(--color-brand-white);
  padding: 20px 0 0;
  margin: 0;
  text-align: center;
}

.plan_text:first-child{
  padding: 0 0;
}

.plan_text--normal{
  font-weight: 200;
}

.plan_text--bold{
  font-weight: 400;
}

.plan_text--left{
  text-align: left;
}

.plan_text a{
  font-size: 1.7rem;
  color: var(--color-brand-white);
  text-decoration: underline;
}

.plan_contact{
  width: 90%;
  margin: 0 auto;
  /* border: solid 2px #fff; */
  font-weight: 400;
  font-size: 1.7rem;
  margin: 30px auto 0;
  padding: 20px;
  text-align: center;
}

.plan_contact_title{
  font-size: 2rem;
  font-weight: 400;

}

.plan_tel{
  font-size: 4rem;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Open Sans", Arial, sans-serif, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", 游ゴシック, "Yu Gothic", "Noto Sans JP";
}

.plan_tel:hover{
  color: #fff;
}

@media only screen and (max-width: 767px) {
  .plan_block{
    background-color: var(--color-brand-primary);
    color: var(--color-brand-white);
    padding: 30px 15px;
  }

.plan_text{
  font-size: 1.5rem;
}

  .plan_contact{
    width: 100%;
    margin: 0 auto;
  }
}

/*==========================================
 イベントのスタイル
===========================================*/

.event_block{
  margin: 70px auto;
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.event_title{
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-brand-black);
  text-align: center;
  margin: 70px 0 0;
}

.event_contents{
  display: flex;
  gap: 30px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--color-brand-black);
  padding: 50px 0 0;
}

.event_contents:first-child{
  border: none;
  padding: 0;
}

.event_image{
  width: 40%; 
}

.event_image img{
  width: 100%;
}

.event_text{
  width: 60%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}


.event_date{
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
}


.event_detail{
  margin: 0;
  font-size: 2rem;
  font-weight: 400;
}

.event_attention{
  font-size: 1.6rem;
  font-weight: 400;
  text-align: center;
  margin: 20px 0 0;
}


@media only screen and (max-width: 767px) {
  .event_block{
    margin: 70px auto;
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .event_contents{
    display: flex;
    gap: 20px;
    flex-direction: column-reverse;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0 0;
  }

  .event_contents:first-child {
    border: none;
    padding: 0;
    gap: 20px;
  }

  .event_image{
    width: 100%; 
  }

  .event_image img{
    width: 100%;
  }

  .event_text{
    width: 100%;
    gap: 10px;
  }

  .event_title{
    margin: 50px 0 0;
    font-weight: 700;
  }

  .event_date{
    font-size: 2rem;
    margin: 0;
  }


  .event_detail{
    font-size: 1.5rem;
  }

  .event_attention{
    font-size: 1.2rem;
  }
}


/*==========================================
 問い合わせのスタイル
===========================================*/

.contact_block{
  background-color: var(--color-brand-primary);
  padding: 50px 50px;
  text-align: center;
  width: 100%;
  margin: 0 auto;
  color: var(--color-brand-white);
}

.contact_title{
  font-size: 3rem;
  font-weight: 400;
}

.contact_tel,.contact_tel:link,.contact_tel:hover,.contact_tel:visited{
  font-size: 5rem;
  font-weight: 500;
  color: var(--color-brand-white);
  text-decoration: none;
}

.contact_tel:hover{
  text-decoration: underline;
}


.contact_detail{
  font-size: 1.6rem;
  font-weight: 400;
  margin: 20px 0 0;
}

@media only screen and (max-width: 767px) {
  .contact_block{
    background-color: var(--color-brand-primary);
    padding: 30px 15px;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    color: var(--color-brand-white);
  }

  .contact_title{
    font-size: 2rem;
    font-weight: 400;
  }

  .contact_tel,.contact_tel:link,.contact_tel:hover,.contact_tel:visited{
    font-size: 4rem;
    font-weight: 500;
    color: var(--color-brand-white);
    text-decoration: none;
  }

  .contact_tel:hover{
    text-decoration: underline;
  }


  .contact_detail{
    font-size: 1.4rem;
    font-weight: 400;
    margin: 10px 0 0;
  }
}


/*==========================================
　 参加条件のスタイル
===========================================*/

.col-accordion{
  margin: 50px 0;
  padding: 0;
}

/* .col-accordion__title{
  font-size: 3rem;
  font-weight: 500;
} */

.col-accordion__content {
  padding: 0;
}

.col-accordion__toggle{
  padding: 12px 10px;
  font-weight: 500;
  font-size: 2.5rem;
}

.hgv-row {
  clear: both;
  width: 90%;
  margin: 0 auto;
}

.hgv-rte h3{
  font-size: 2rem;
  margin: 30px 0 15px;
}

.hgv-rte h3:first-child{
  font-size: 2rem;
  margin: 0 0 15px;
}

.hgv-rte ul{
  padding: 0 0 0 20px;
}

.hgv-rte ul li{
  font-weight: 300;
}

.hgv-rte p{
  font-weight: 300;
}

@media only screen and (max-width: 767px) {
  .col-accordion{
    margin: 50px 0;
    padding: 0;
  }

  /* .col-accordion__title{
    font-size: 3rem;
    font-weight: 500;
  } */

  .col-accordion__content {
    padding: 0;
  }

  .col-accordion__toggle{
    padding: 12px 10px;
    font-weight: 500;
    font-size: 2rem;
  }

  .hgv-row {
    clear: both;
    width: 90%;
    margin: 0 auto;
  }

  .hgv-rte h3{
    font-size: 2rem;
    font-weight: 400;
    margin: 20px 0 15px;
  }


  .hgv-rte h3{
  font-size: 2rem;
  margin: 30px 0 15px;
}

.hgv-rte h3:first-child{
  font-size: 2rem;
  margin: 0 0 15px;
}

  .hgv-rte ul{
    padding: 0 0 0 20px;
  }

  .hgv-rte ul li{
    font-weight: 300;
  }

  .hgv-rte p{
    font-weight: 300;
  }
}

/*==========================================
 リゾート一覧のスタイル
===========================================*/

.resort_block{
  margin: 20px 0 0;
}

.resort_title{
  font-size: 2.5rem;
  font-weight: 500;
  text-align: center;
  color:var(--color-brand-primary);
}

.resort_list{
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin: 20px auto 0;
  width: 95%;
}

.resort_item{
  display: block;
  width: calc((100% - 60px) / 4);
}

.resort_link{
  display: flex;
  flex-direction: column;
}

.resort_image{

}
.resort_image img{
  width: 100%;
}
.resort_name{
  font-size: 1.4rem;
  font-weight: 400;
  margin: 5px 0 0;
  color: var(--color-brand-black);
}

@media only screen and (max-width: 767px) {
  .resort_block{
    margin: 20px 0 0;
  }

  .resort_title{
    font-size: 2.5rem;
    font-weight: 500;
    text-align: center;
    color:var(--color-brand-primary);
  }

  .resort_list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px auto 0;
    width: 90%;
  }

  .resort_item{
    display: block;
    width: calc((100% - 20px) / 2);
  }

  .resort_link{
    display: flex;
    flex-direction: column;
  }

  .resort_image{

  }
  .resort_image img{
    width: 100%;
  }
  .resort_name{
    font-size: 1.4rem;
    font-weight: 400;
    margin: 5px 0 0;
    color: var(--color-brand-black);
  }
}

/*==========================================
 フッターのスタイル
===========================================*/
footer {
  width: 100%;
  margin: 50px 0 0;
  background-color: var(--color-brand-primary);
}
footer #footerBody {
  position: relative;
  width: 90%;
  margin: 0 auto;
  padding: 80px 0 50px;
  max-width: 900px;
}

footer #footerBody p {
  padding: 25px 0 0;
  font-size: 1.2rem;
  line-height: 2.0;
  color: var(--color-brand-white);
}
footer #footerBody small {
  display: block;
  padding: 50px 0 0;
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--color-brand-white);
  text-align: center;
}

footer a,footer a:visited{
  color: var(--color-brand-white);
}
@media only screen and (max-width: 767px) {
  footer {
    width: 100%;
    margin: 50px 0 30px;
  }
  footer #footerBody {
    width: 90%;
    padding: 30px 0 50px;
  }
  footer #footerBody h1 {
    width: 100%;
  }
  footer #footerBody h1 img {
    width: 100%;
    height: auto;
  }
}

/*==========================================
 フォームのスタイル
===========================================*/

.hgv-toc-intro h2{
  font-size: 3rem;
  font-weight: 500;
  margin-bottom: 0;
}

.form__label,.form-control,.formText{
  font-size: 1.6rem;
  font-weight: 400;
}

.btn-primary{
  color: var(--color-brand-white);
  background-color: var(--color-accent-4);
  text-align: center;
  padding: 12px 0;
  width: 50%;
  max-width: 300px;
  margin: 50px auto 0;
  display: block;
  border-radius: 60px;
  font-size: 2rem;
  font-weight: 500;
  height: auto;
}

.form_required {
  background: var(--color-accent-4);
  padding: 3px 8px;
  font-size: 1rem;
  color: #fff;
  border-radius: 3px;
  margin-left: 4px;
  font-weight: 500;
}

.form_notes{
  font-size: 1.5rem;
  font-weight: 400;
}

.privacy_block{
  margin: 40px 0 ;
  border: 1px solid var(--color-neutral-200);
  border-radius: 6px;
  padding: 20px;
  font-size: 1.4rem;
  font-weight: 300;
}

.privacy_link,.privacy_link:hover,.privacy_link:visited,.privacy_link:focus,.privacy_link:link{
  color: var(--color-brand-black);
  font-size: 1.4rem;
  font-weight: 300;
}

.btn-primary:hover {
  border: none;
  background-color: var(--color-accent-4);
  color: var(--color-brand-white);
  opacity: 0.65;
}

.btn-primary.disabled, .btn-primary:disabled{
  background-color: var(--color-neutral-200);
  opacity: 1;
}



@media only screen and (max-width: 767px) {
  .btn-primary{
    width: 50%;
  }
}


.thankyou_block{
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  clear: both;
  max-width: 790px;
  margin: 0 auto;
  padding: 0 20px;
}

.thankyou_title{
  font-size: 3rem;
  font-weight: 500;
  margin-bottom: 0;
  text-align: center;
}

.thankyou_block p{
  font-size: 21px;
  margin-top: 5px;
  text-align: center;
}

.thankyou_link{
  display: block;
  width: 300px;
  margin: 40px auto 0;
  padding: 12px 0;
  box-sizing: border-box;
  border-radius: 30px;
  background-color: var(--color-brand-primary);
  font-size: 2.2rem;
  font-weight: 700;
  color: #FFF !important;
  text-decoration: none;
  text-align: center;
}