@charset "utf-8";

/*------------------------------
共通設定
------------------------------*/

#feature-wrap {
  font-family:
    "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ,
    Osaka, "MS PGothic", arial, helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.8 !important;
  letter-spacing: normal !important;
}
#feature-wrap img {
  width: 500px;
  height: inherit;
}

/*------------------------------
content-wrap
------------------------------*/
.content-wrap .bnr {
  text-align: center;
  margin: auto;
}
.content-wrap a {
  color: #464646;
}
.content-wrap a:hover img {
  opacity: 0.5;
  transition: all 0.2s ease-out 0s;
}
.content-wrap .copy {
  text-align: center;
  padding: 15px 0;
  font-size: 12px;
}

.contentsBox {
  width: 794px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 60px;
}

.content-wrap .pctext01 {
  color: #ff5096;
  font-weight: bold;
  font-size: 20px;
  line-height: 1.5;
  text-align: center;
  display: block !important;
}
.content-wrap .sptext01 {
  display: none !important;
}

.content-wrap .text02 {
  margin: 3% auto 5%;
  line-height: 1.5;
  font-size: 14px;
}

.content-wrap .text03 {
  margin-bottom: 5%;
  line-height: 1.5;
  color: red;
  font-weight: bold;
}

.content-wrap .text04 {
  font-size: 15px;
  font-weight: bold;
  text-align: left;
}

.content-wrap .text05 {
  margin: 3% 0 3%;
  text-align: left;
}

.content-wrap .product_button {
  width: 80%;
  background-color: #69a400;
  margin: 0 0 4%;
  border-radius: 90px;
  box-shadow: 0px 7px 0px -2px #395900;
}

.content-wrap .product_button a {
  font-size: 0.9em;
  color: #fff;
  line-height: 1.4em;
  display: block;
  padding: 4% 0;
  font-weight: bold;
  letter-spacing: 1px;
  text-decoration: none;
  position: relative;
  text-align: center;
}

.sec03 .contentsDetail .contents .button-wrap,
.sec04 .contentsDetail .contents .button-wrap {
  text-align: center;
  margin: 20px 0 26px;
}

.sec03 .contentsDetail .contents .button-wrap .product_button,
.sec04 .contentsDetail .contents .button-wrap .product_button {
  width: min(320px, 80%);
  margin: 0 auto;
}

/*.content-wrap .product_button a::after {
	content: '';
	width: 7px;
	height: 7px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	transform: rotate(45deg);
	display: inline-block;
	position: absolute;
	right: 15px;
	top: 19px;
}*/

.content-wrap .bnr_button {
  width: 80%;
}
.content-wrap .bnr_button img {
  width: 257px !important;
}

.container1 {
  display: flex;
  justify-content: space-between;
  margin: 0px auto;
}

.container1 table {
  border-collapse: separate;
  border-spacing: 0px 10px;
  margin: auto;
  width: 100%;
}

.container1 table th {
  background-color: #4bb6f7;
  color: #fff;
  padding: 1px 20px;
  border-spacing: 20px 5px;
  width: 30%;
}

.container1 table td {
  border-bottom: 2px solid #4bb6f7;
  padding: 0 2em 0 1em;
  width: 70%;
}

.container2 {
  display: flex;
  margin: 20px auto;
}

.container3 {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-content: space-around;
}

.container3 .item {
  margin-bottom: 10px;
}

/*=====================================================================
【共用】背景色
=======================================================================*/
.bgcl_yellow2 {
  background-color: #ffba00;
  border-radius: 10px;
}
.bgcl_yellow {
  background-color: #ffee7b;
}
.bgcl_pink {
  background-color: #f46ca9;
  height: 20px;
}
.bgcl_pink_long {
  background-color: #f46ca9;
  width: 400px;
  height: 20px;
  text-align: right;
}
.bgcl_pink_long2 {
  background-color: #f46ca9;
  width: auto;
  height: 45px;
  text-align: right;
}
.bgcl_purple {
  background-color: #d9bbfd;
}

.bgcl_blue2 {
  background-color: #1fbfff;
  border-radius: 10px;
}
.bgcl_blue {
  background-color: #9de3ff;
}

/*=====================================================================
【共用】文字色
=======================================================================*/
.cl_aquablue {
  color: #00a3c5;
}

/*=====================================================================
【共用】border色
=======================================================================*/
.border_aquablue {
  border-color: #00778d;
}

/*=====================================================================
【共用】概要
=======================================================================*/
.contentsDetail {
  background-color: #fff;
  margin: 20px 0;
  border-radius: 10px;
}

.contentsDetail .title {
  color: #5d452d;
  font-size: 18px;
  font-weight: bold;
  padding: 10px 10px 6px 10px;
  margin: 10px 10px 0px 10px;
}

.contentsDetail .title2 {
  color: #5d452d;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 10px 10px 6px 10px;
}

.contentsDetail .title3 {
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  padding: 5px;
  margin: 0.5% 0.5% 0.5% 0;
}

.sec02 .contentsDetail .title {
  color: #4c3864;
  font-size: 18px;
  font-weight: bold;
  padding: 10px 10px 6px 10px;
  margin: 10px 10px 0px 10px;
}

.contentsDetail .contents {
  background-color: #fff;
  color: #000;
  padding: 10px;
  border-radius: 10px;
  text-align: center;
}
.contentsDetail .contents .left {
  display: inline-block;
  margin: 0 20px 0 0;
  padding: 0;
  vertical-align: top;
  width: 60%;
}
.contentsDetail .contents .right {
  display: inline-block;
  text-align: right;
  vertical-align: top;
  width: 35%;
}
.contentsDetail .contents .right img {
  width: 100% !important;
  height: auto !important;
  border: 2px solid #ffba00;
  box-sizing: border-box;
}

.contentsDetail .contents .right2 {
  display: inline-block;
  text-align: right;
  vertical-align: top;
  width: 35%;
}
.contentsDetail .contents .right2 img {
  width: 100% !important;
  height: auto !important;
  border: 2px solid #1fbfff;
  box-sizing: border-box;
}
.contentsDetail .contents .right2 span {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 12px;
  margin-top: 6px;
}

/* #sec01（青）
--------------------------------------------*/
.sec01 .contentsDetail {
  border: solid 3px #ffba00;
}
.sec01 .contentsDetail .contents {
  position: relative;
}
.sec01 .contentsDetail .contents .bnr_button {
  position: absolute;
  width: 257px;
  bottom: 23px;
  right: 23px;
}

.sec03 .contentsDetail,
.sec04 .contentsDetail {
  border: solid 3px #1fbfff;
}
.sec03 .contentsDetail .contents,
.sec04 .contentsDetail .contents {
  position: relative;
}
.sec03 .contentsDetail .contents .bnr_button,
.sec04 .contentsDetail .contents .bnr_button {
  position: absolute;
  width: 257px;
  bottom: 23px;
  right: 23px;
}

/* 青枠（sec03・sec04）はテキストを上段、画像を下段（横並び・最大4枚）に配置　※PCのみ */
@media (min-width: 768px) {
  .sec03 .contentsDetail .contents .left,
  .sec04 .contentsDetail .contents .left {
    display: block;
    margin: 0 0 20px 0;
    width: 100%;
  }

  .sec03 .contentsDetail .contents .product_button,
  .sec04 .contentsDetail .contents .product_button {
    width: 48%;
  }

  .sec03 .contentsDetail .contents .right2,
  .sec04 .contentsDetail .contents .right2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2%;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    padding: 10px;
  }

  .sec03 .contentsDetail .contents .right2 > img,
  .sec04 .contentsDetail .contents .right2 > img {
    width: 22% !important;
  }

  .sec03 .contentsDetail .contents .right2 > span,
  .sec04 .contentsDetail .contents .right2 > span {
    flex: 1 0 100%;
    width: 100%;
  }
}

/* 右側が日程の場合
--------------------------------------------*/
.contentsDetail .contents .right div.dateBox {
  border-width: 1px;
  border-style: solid;
  margin: 0;
  padding: 15px;
  text-align: left;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.contentsDetail .contents .right div.dateBox ul {
  font-size: 0;
  line-height: 0;
  margin: 0;
  padding: 0;
}
.contentsDetail .contents .right div.dateBox ul li {
  margin: 0 0 15px 0;
  padding: 0;
}
.contentsDetail .contents .right div.dateBox ul li:last-child {
  margin: 0;
  padding: 0;
}
.contentsDetail .contents .right div.dateBox ul li strong {
  display: block;
  font-size: 15px;
  line-height: 1;
  margin: 0 0 8px 0;
  padding: 0;
}
.contentsDetail .contents .right div.dateBox ul li span {
  display: block;
  font-size: 14px;
  line-height: 1;
  margin: 0;
  padding: 0;
}

/* schedule
--------------------------------------------*/
.schedule {
  display: inline-block;
  font-size: 16px;
}
.text04 {
  font-size: 0;
}
.text04.scheduleGroup {
  display: flex;
  align-items: flex-start;
}
.text04.scheduleGroup + .text04.scheduleGroup {
  margin-top: 10px;
}
.scheduleTimes {
  display: grid;
  grid-template-columns: repeat(2, 140px);
  gap: 4px 8px;
}
.scheduleTimes .schedule {
  display: block;
  box-sizing: border-box;
  width: 140px;
  height: auto;
  min-height: 20px;
  margin: 0;
  text-align: left;
  padding-left: 5px;
}
.pc {
  display: block !important;
}
.sp {
  display: none !important;
}

/* sec02
--------------------------------------------*/
.sec02 .contentsDetail {
  border: solid 3px #a469ea;
}
.sec02 .contentsDetail .contents ul {
  text-align: left;
  margin: 3% 0;
}
.sec02 .contentsDetail .contents ul li {
  text-indent: -1em;
  padding-left: 1em;
}

/*================================================
  SP
================================================*/
@media (max-width: 767px) {
  /*------------------------------
content-wrap
------------------------------*/
  .content-wrap .bnr {
    text-align: center;
    width: 90%;
    margin: auto;
  }
  .content-wrap {
    width: 100%;
  }
  .content-wrap img {
    width: 100% !important;
  }
  .content-wrap a {
    text-decoration: underline;
  }
  .contentsBox {
    width: 90%;
    margin: 15px auto;
    padding-top: 1%;
    padding-bottom: 5%;
  }

  .content-wrap .pctext01 {
    display: none !important;
  }
  .content-wrap .sptext01 {
    color: #ff5096;
    font-weight: bold;
    font-size: 20px;
    line-height: 1.5;
    text-align: center;
    display: block !important;
  }

  .container1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .container1 .img {
    margin-bottom: 2%;
  }

  .container2 {
    display: flex;
    flex-direction: column;
    line-height: 0;
  }

  .container3 {
    display: flex;
    width: 85%;
    margin: 0 auto;
    justify-content: space-between;
    flex-direction: column;
  }

  .container3 .item {
    margin: 2%;
  }

  .content-wrap .product_button {
    width: 90%;
    margin: 0 auto 8%;
  }

  .content-wrap .bnr_button {
    width: 90%;
    margin: 0 auto 8%;
  }

  .sec01 .contentsDetail .contents .bnr_button {
    position: initial;
    margin: 0 auto 8%;
  }

  /*=====================================================================
【SP】【共用】概要
=======================================================================*/
  .contentsDetail {
    width: 100%;
  }
  .contentsDetail .contents {
    padding: 4%;
  }
  .contentsDetail .contents .left {
    display: block;
    font-size: 15px;
    width: 100%;
  }
  .contentsDetail .contents .right {
    display: block;
    margin: 0 auto;
    width: 100%;
  }
  .contentsDetail .contents .right2 {
    display: block;
    margin: 0 auto;
    width: 100%;
  }
  .contentsDetail .title span {
    font-size: 18px;
  }

  /*右側のイメージの位置（強制）*/
  .contentsDetail .contents .right img {
    height: auto;
    margin-top: 0 !important;
    width: 100%;
  }
  .contentsDetail .contents .right2 img {
    height: auto;
    margin-top: 0 !important;
    width: 100%;
  }

  /* schedule
--------------------------------------------*/
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
  .text04.scheduleGroup {
    flex-wrap: wrap;
  }
  .scheduleTimes {
    grid-template-columns: max-content;
    width: auto;
  }
  .scheduleTimes .schedule {
    width: auto;
  }
}