/* CSS Document */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
ul, ol, li, dl, dt, dd {
  list-style-type: none;
  list-style-position: outside;
}
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  text-decoration: none;
}
p {
  margin: 0;
  padding: 0;
}
/****************************************************************/
/* 共通CSS
/****************************************************************/
.main {
  font-size: 16px;
  overflow: hidden;
  background: #fff;
  margin: 0 auto;
}
html, body {
  font-size: 16px;
}
h1, h2, h3, h4, h5 {
  font-size: 100%;
}
.main section {
  padding: 45px 0;
}
.inner {
  font-family: Noto Sans JP, serif;
  font-size: 16px;
  font-weight: normal;
  /*    width: 992px;*/ width: 940px;
  margin: 0 auto;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
}
.main h2 {
  font-weight: bold;
  font-size: 32px;
  margin-bottom: 10px;
}
.main h3 {
  font-weight: bold;
  font-size: 24px;
  margin-bottom: 10px;
  line-height: 1.3em;
}
.main img {
  max-width: 100%;
}
.caution {
  text-align: left;
  font-size: 14px;
  display: block;
}
/* titleArea ---------------------- */
#titleArea {
  background: url(../img/cpn/beachclub/top.jpg) no-repeat center bottom;
  background-size: cover;
  position: relative;
	padding-top: 22.5%;/* 高さ450 ÷幅2000 × 100 */ 
/*min-height: 450px;*/
}
/* youtube ---------------------- */
#section-movie {
  display: flex;
  justify-content: center;
  align-items: center;
}
#movie_wrap {
  /*  position: relative;
  margin: 0 auto;*/
  width: 100%;
  max-width: 490px; /* 最大の横幅 */ padding: 0px 0 0 25px;
}
#movie {
  padding-top: 56.25%;
  position: relative;
  width: 100%;
  height: 100%;
  /*	background: #000;*/
}
#movie iframe {
  height: 100% !important;
  left: 0;
  position: absolute;
  top: 0;
  width: 100% !important;
}
.lead {
  width: 500px;
  max-width: 100%;
  text-align: center;
}
.lead p {
  font-size: 1.2em;
}
#section-movie .sec_ttl {
  color: #ffb400;
}
.main section#section-beach { padding-bottom: 0;}

#section-beach ul {
  background: #fff7f3;
  display: flex;
  justify-content: center;
  /*  align-items: center;*/
  align-items: flex-start;
  flex-direction: row-reverse; /*左右入れ替え*/
}
#section-beach ul:nth-child(even) {
  flex-direction: row;
  background: #fff;
}
#section-beach ul li {
  width: 450px;
  padding: 25px 10px 50px;
  text-align: center;
  font-size: 1.2em;
}
#section-beach ul li.dinner h3 {
  background: #ffb400;
  color: #fff;
  font-size: 0.8em;
  display: inline-block;
  border-radius: 30px;
  padding: 5px 20px;
  margin-top: 10px;
}
#section-beach h2 {
  font-family: "Sedan SC", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 46px !important;
  position: relative;
  text-align: center;
  margin-bottom: 10px;
  color: #ffb400;
}
#section-beach h3 {
  color: #ffb400;
}
.section-schedule h2, #section-beach h2 {
  font-family: "tacitus-pro", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 84px !important;
  position: relative;
  text-align: center;
  margin-bottom: 15px;
  line-height: 75%;
}
#section-beach h2 span, .section-schedule h2 span {
  /*position: absolute;
  top: 0;
  right: 40%;*/
  display: block;
  color: #222;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: -20px;
}
#section-beach p {
  text-align: left;
}
#section-beach ul li.dinner p {
  background: #fff;
  padding: 15px 10px;
  margin-top: -20px;
  margin-bottom: 10px;
  border: solid 1px #ffb400;
}
#section-beach ul li.event p {
  background: #fff7f3;
  padding: 10px;
  margin-top: 10px;
  font-size: 0.8em;
}
.blue_box {
  border: double 4px #43acdb;
  font-size: 16px;
  font-weight: bold;
  width: 800px;
  margin:30px auto 10px;
  padding: 15px;
  max-width: 100%;
}
.blue_box h3{ color: #43acdb; text-align: center;
}
.purple_box {
  border: double 4px #c71585;
  font-size: 16px;
  font-weight: bold;
  width: 800px;
  margin:30px auto 30px;
  padding: 15px;
  max-width: 100%;
}
.purple_box h3{ color: #c71585; text-align: center;
}
/* 対象商品 ---------------------- */
#section-summary {
  background: url("../img/cpn/beachclub/bg_photo.jpg") no-repeat center top #eff9fb;
  text-align: center;
  background-attachment: fixed;
	background-size: cover;
}
#section-summary .sec_ttl {
  width: calc((757 / 720) * 100%);
  max-width: 757px;
  margin: 0 auto 40px;
  padding: 60px 0 30px;
  font-weight: 400;
  font-style: normal;
}
.info_ttl {
  background: #ff3366;
  color: #fff;
  font-size: 20px;
  display: inline-block;
  width: 60%;
  padding: 0px 0 2px;
  letter-spacing: 1px;
  margin-bottom: 10px;
  margin-top: 20px;
  border-radius: 30px;
}
#section-summary dl {
  background: #fff;
  padding: 0 25px 15px;
  margin-bottom: 15px;
}
#section-summary dd {
  font-weight: bold;
  margin-bottom: 10px;
  text-align: left;
}
#section-summary dd.caution {
  font-weight: normal;
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.flex dl {
  width: 49.5%;
}
/* オプショナル ---------------------- */
#section-op {
  padding-bottom: 240px;
  background: url("../img/cpn/beachclub/photo.jpg") repeat-x center bottom #fff;
}
#section-op .sec_ttl {
  margin-bottom: 20px;
  font-size: 30px;
}
#section-op .sec_ttl span {
  display: block;
  margin-bottom: 10px;
  font-size: 0.6em;
}
#section-op .inner p {
  margin: 10px auto 10px;
}
.red_box {
  border: double 5px #ff3366;
  font-size: 30px;
  font-weight: bold;
  width: 800px;
  margin:15px auto 30px;
  padding: 15px;
  max-width: 100%;
}
.red_box .price {
  color: #ff3366;
  font-size: 54px;
}
.red_box .price_yen {
  color: #ff3366;
  font-size: 36px;
}
.red_box .code {
  text-align: center;
  font-size: 0.6em;
}
/* スケジュール ---------------------- */
.pink {
  color: #ff3366;
}
.blue {
  color: #43acdb;
}
.section-schedule ul {
  position: relative;
  font-size: 20px;
  width: 800px;
  max-width: 100%;
  margin: 0 auto 15px;
  font-weight: bold;
  list-style: none;
}
.section-schedule ul::before {
  z-index: 1;
  position: absolute;
  top: 0px;
  left: 7.9em;
  width: 2px;
  height: 100%;
  background-color: #222;
  content: "";
}
.section-schedule li {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.schedule_p li:nth-child(odd) {
  background: #fce5e8;
}
.schedule_b li:nth-child(odd) {
  background: #d7f8ff;
}
.section-schedule li + li {
  margin-top: 0.2em;
}
.schedule_time {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  width: 7em;
  height: 2em;
  border-radius: 6px;
  font-weight: bold;
}
/*.schedule_time::before {
  position: absolute;
  top: 50%;
  right: 0px;
  transform: translateX(50%) translateY(-50%) rotate(45deg);
  width: 0.5em;
  height: 0.5em;
  background-color: #222;
  content: "";
}*/
.schedule_time::after {
  position: absolute;
  top: 50%;
  left: 7.5em;
  transform: translateY(-50%);
  width: .9em;
  height: .9em;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: #222;
  content: "";
}
.schedule_content_title {
  font-weight: bold;
  text-align: left;
  padding: 2px
}
.schedule_content {
  margin: 0px 0px 0px 2em;
  width: calc(100% - 10em);
}
.schedule_content_detail {
  font-size: 0.8em;
}
.w800 {
  width: 800px;
  max-width: 100%;
  margin: 0 auto;
  padding-bottom: 30px;
}

@media screen and  (min-width:751px) {
  .nopc {
    display: none;
  }
}
@media screen and  (max-width:750px) {
  .main h2 {
    font-size: 6.5vw;
  }
  .main h3 {
    font-size: 6vw;
  }
  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    /*  flex-wrap: wrap;*/
  }
  .main img {
    max-width: 100%;
  }
  .main section {
    padding: 5vw 0;
  }
	  #titleArea {
    height: 0;
    width: 100%;
    padding-top: calc((770 / 750) * 100%);
    background: url(../img/cpn/beachclub/smp_title.jpg) no-repeat center top;
    background-size: cover;
    position: relative;
  }
  .lead p {
    font-size: 4vw
  }
	
	
  #section-movie {
    width: 94%;
    margin: 0 auto;
    padding: 5vw 0;
  }
  #section-movie {
    flex-direction: column;
  }
  #movie_wrap {
    padding: 10px 0 0 0;
  }
  #section-beach ul {
    align-items: center;
    flex-direction: column;
  }
  #section-beach ul li {
    width: 90%;
    margin: 0 auto;
    padding: 0 0 8vw 0;
  }
  #section-beach ul:nth-child(even) {
    background: #fff;
    flex-direction: row;
    flex-direction: column;
  }
  .section-schedule ul {
    font-size: 3.5vw;
  }
  .main {
    font-size: 3.5vw;
  }
  html, body {
    font-size: 3.5vw;
  }
  .main .inner {
    width: 94%;
    margin: 0 auto;
    padding: 30px 0;
  }
  .main .inner .caution {
    font-size: 3vw;
  }
  .schedule {
    font-size: 4vw;
  }
  #section-summary dl {
    width: 100%;
	padding: 0 15px 15px;
  }

  #section-summary dd {
    font-size: 4vw;
  }
  #section-summary dd.caution {
    font-size: 3vw;
  }
  #section-summary .sec_ttl {
    width: 96%;
    padding: 10% 0 0;
  }
  .info_ttl {
    font-size: 4vw;
  }
  #section-op {
    padding-bottom: calc((480 / 960) * 100%);
    background-image: url("../img/cpn/beachclub/photo_sp.jpg");
    background-size: contain;
  }
  #section-op .inner h3 {
    font-size: 4vw;
  }
  .red_box {
    font-size: 6vw;
  }
  .red_box .price {
    font-size: 12vw;
    position: relative;
  }
  .red_box .price_yen {
    font-size: 7vw;
  }
  .red_box .code {
    display: block;
  }
	.blue_box{
	width: 94%;
	font-size: 3vw;
}
	.purple_box{
		width: 94%;
	font-size: 3vw;
	}
	.blue_box h3{ color: #43acdb; text-align: center; font-size: 4vw;}
	.purple_box h3{ color: #c71585; text-align: center; font-size: 4vw;}
  .nosp {
    display: none;
  }
}
/* .img-set
------------------------------------*/
[class*="img-set"] {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 0;
  z-index: 0;
}
#section-beach figure {
  position: absolute;
  z-index: 1;
  margin: 0;
}
#section-beach figure img {
  width: 70%;
}
.sunset01 {
  top: 3%;
  left: 0;
}
.sunset02 {
  bottom: 2%;
  right: -6%;
}
.pool {
  bottom: 2%;
  right: -15%;
}
.dinner {
top: -5%;
  right: -10%;
}
.event01 {
  top: 3%;
  right: -3%;
}
.event02{
  bottom: 13%;
  left: 6%;
}
.hanabi01 {
  bottom:20%;
  right: -10%;
}
.hanabi02 {
  bottom: 0%;
  left: -10%;
}
@media (max-width:750px) {
	#section-beach figure img {
  width: 60%;
}
  .sunset01 {
    top: -4%;
    left: -15%;
  }
  .sunset02 {
    bottom: 2%;
    right: -17%;
  }
  .pool {
    bottom: 2%;
    right: -23%;
  }
	.dinner {
top:  -14%;
  right: -14%;
}
.event01 {
  top: -5%;
  right: -5%;
}
.event02{
  bottom: 12%;
  left: 0;
}
  .hanabi01 {
    bottom: 23%;
    right: -13%;
  }
  .hanabi02 {
    bottom: 2%;
    left: -13%;
  }
}