@charset "UTF-8";

/*-----------------------------------------------------------------
		汎用スタイル
-----------------------------------------------------------------*/


body {
  height: 100%;
  line-height: normal;
  font-family: 'Noto Sans', sans-serif;
  background-color: #fff;
}

.wrapper {
  background-color: #fff;
  background-image:
    radial-gradient(at 99% 53%, hsla(311, 100%, 93%, 1) 0, transparent 72%),
    radial-gradient(at 48% 13%, hsla(53, 100%, 92%, 1) 0, transparent 74%),
    radial-gradient(at 60% 77%, hsla(191, 100%, 86%, 1) 0, transparent 78%),
    radial-gradient(at 3% 5%, hsla(22, 100%, 94%, 1) 0, transparent 46%),
    radial-gradient(at 95% 95%, hsla(243, 100%, 90%, 1) 0, transparent 50%),
    radial-gradient(at 40% 49%, hsla(70, 100%, 90%, 1) 0, transparent 73%),
    radial-gradient(at 86% 5%, hsla(355, 85%, 93%, 1) 0, transparent 50%),
    radial-gradient(at 1% 100%, hsla(144, 100%, 92%, 1) 0, transparent 50%)
    /* radial-gradient(at 99% 53%, hsla(292, 47%, 89%, 1) 0, transparent 72%),
    radial-gradient(at 40% 30%, hsla(72, 100%, 90%, 1) 0, transparent 35%),
    radial-gradient(at 99% 43%, hsla(224, 83%, 95%, 1) 0, transparent 42%),
    radial-gradient(at 48% 13%, hsla(53, 100%, 92%, 1) 0, transparent 74%),
    radial-gradient(at 60% 77%, hsla(210, 100%, 84%, 1) 0, transparent 78%),
    radial-gradient(at 23% 35%, hsla(22, 83%, 95%, 1) 0, transparent 46%),
    radial-gradient(at 95% 95%, hsla(243, 100%, 90%, 1) 0, transparent 50%),
    radial-gradient(at 10% 50%, hsla(198, 100%, 90%, 1) 0, transparent 58%),
    radial-gradient(at 86% 5%, hsla(355, 85%, 93%, 1) 0, transparent 50%),
    radial-gradient(at 1% 100%, hsla(144, 100%, 92%, 1) 0, transparent 50%); */
}


.content {
  min-height: 100vh;
  /* margin-bottom: -40px; */
  padding: 0 40px;
  margin: 0 auto;
  max-width: 880px;
}

@media screen and (max-width: 520px) {
  .content {
    padding: 20px;
  }
}

ul li {
  list-style: none;
}

h1 {
  font-size: 40px;
  margin-bottom: 10px;
  font-family: 'Josefin Sans', 'Noto Sans', sans-serif;
}

h2 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  margin-top: 40px;
}

h2::before {
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  background: url(../images/april/rose.png) no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-right: 1rem;
  /* background:
    linear-gradient(127deg, rgba(200, 255, 205, 1), rgba(122, 216, 255, 1) 160%),
    linear-gradient(217deg, rgba(248, 221, 255, 1), rgba(251, 246, 202, 1) 70.71%); */
}

h3 {
  font-size: 16px;
  font-weight: 700;
}

p {
  font-size: 16px;
}

section {
  margin: 100px auto;
  position: relative;
}

.btn {
  margin: 50px auto;
  width: 240px;
  font-size: 20px;
}

button {
  padding: 15px 0;
  width: 240px;
  background: rgba(255, 255, 255, 1);
  border: none;
  border-radius: 100px;
  color: #0D0D0D;
  font-weight: 700;
  letter-spacing: .1rem;
  text-align: center;
  outline: none;
  cursor: pointer;
  transition: .2s ease-in-out;
  box-shadow: -6px -6px 14px rgba(255, 255, 255, .3),
    -6px -6px 10px rgba(255, 255, 255, .3),
    6px 6px 8px rgba(255, 255, 255, .3),
    6px 6px 10px rgba(0, 0, 0, .1);
}

button:hover {
  box-shadow: -2px -2px 6px rgba(255, 255, 255, .3),
    -2px -2px 4px rgba(255, 255, 255, .3),
    2px 2px 2px rgba(255, 255, 255, .3),
    2px 2px 4px rgba(0, 0, 0, .2);
}

.txt_bg {
  padding: 20px;
  border: solid #fff 1px;
  background-color: rgba(255, 255, 255, 0.5);
}

.mv_widePC {
  display: none;
}

.mv_pc {
  display: block;
}

.mv_sp {
  display: none;
}

.is_pc {
  display: block;
}

.is_sp {
  display: none;
}

@media screen and (min-width: 1000px) {
  .mv_widePC {
    display: block;
  }

  .mv_pc {
    display: none;
  }

  .mv_sp {
    display: none;
  }
}

@media screen and (max-width: 520px) {
  h1 {
    font-size: 30px;
  }

  .mv_widePC {
    display: none;
  }

  .mv_pc {
    display: none;
  }

  .mv_sp {
    display: block;
  }

  .is_pc {
    display: none;
  }

  .is_sp {
    display: block;
  }
}

/*-----------------------------------------------------------------
		MV
-----------------------------------------------------------------*/
.mv {
  margin: 0 auto;
  max-width: 1000px;
  /* background-image: url(../images/april/mv_pc.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 450px; */
}

/* @media screen and (max-width: 768px) {
  .mv {
    height: 300px;
  }
}

@media screen and (max-width: 555px) {
  .mv {
    height: 250px;
  }
} */
header {
  /* padding: 42px 20px; */
  margin: 0 auto;
  position: absolute;
}

.menu {
  max-width: 1000px;
  /* display: flex;
  justify-content: flex-end; */
  /* align-items: center; */
  margin-left: auto;
  margin-right: auto;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 999;
  /* font-family: "Roustel"; */
  /* font-size: 2.4em; */
  /* background: #fff;
  opacity: 0.7;
  border-radius: 100%;
  width: 50px;
  height: 50px; */
}

/* トグルアイコン  */
#nav-toggle,
#nav-toggle span {
  display: inline-block;
  transition: transform .4s;
  box-sizing: border-box;
}

#nav-toggle {
  position: relative;
  width: 30px;
  height: 38px;
}

#nav-toggle span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #0D0D0D;
}

.secret #nav-toggle span {
  background-color: #2A1D1D;
}

#nav-toggle span:nth-of-type(1) {
  top: 5px;
}

#nav-toggle span:nth-of-type(2) {
  top: 15px;
}

#nav-toggle span:nth-of-type(3) {
  top: 25px;
}

.open #nav-toggle span:nth-of-type(1) {
  top: 5px;
}

.toggle-wrap {
  position: relative;
}

/* ハンバーガー下の文字 */
.toggle-menu {
  display: inline-block;
  /* margin-top: 8px; */
  /* position: absolute; */
}

.toggle-close {
  display: none;
}

.open .toggle-menu {
  display: none;
}

.open .toggle-close {
  display: inline-block;
  /* position: absolute; */
  left: 50%;
  /* transform: translateX(-50%);
    margin-top: 10px; */
}

/* ハンバーガー下の文字 */
/* ハンバーガーアニメーション */
.open #nav-toggle.active {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

.open #nav-toggle.active span:nth-of-type(1) {
  -webkit-transform: translateY(10px) rotate(-45deg);
  transform: translateY(10px) rotate(-45deg);
  background-color: #2A1D1D;
}

.open #nav-toggle.active span:nth-of-type(2) {
  -webkit-transform: translateY(0) rotate(45deg);
  transform: translateY(0) rotate(45deg);
  background-color: #2A1D1D;
}

.open #nav-toggle.active span:nth-of-type(3) {
  opacity: 0;
}

/* トグルアイコン  */
/* メニュー開 */
.nav ul {
  display: block;
  font-size: 20px;
}

.menu a {
  font-size: 1.7em;
}

#nav-toggle {
  z-index: 1000;
}

#nav-toggle>div {
  width: 30px;
}

.open #nav-toggle>div {
  width: 25px;
}

#container {
  z-index: 900;
}

.gloval-nav {
  /* background: #A38449; */
  font-family: 'Josefin Sans', 'Noto Sans', sans-serif;
  background-image:
    radial-gradient(at 99% 53%, hsla(292, 47%, 89%, 1) 0, transparent 100%),
    radial-gradient(at 48% 13%, hsla(53, 100%, 92%, 1) 0, transparent 100%),
    radial-gradient(at 60% 77%, hsla(191, 100%, 86%, 1) 0, transparent 100%),
    radial-gradient(at 3% 5%, hsla(22, 100%, 90%, 1) 0, transparent 100%),
    radial-gradient(at 95% 95%, hsla(243, 100%, 90%, 1) 0, transparent 100%),
    radial-gradient(at 40% 49%, hsla(70, 100%, 90%, 1) 0, transparent 100%),
    radial-gradient(at 86% 5%, hsla(355, 85%, 93%, 1) 0, transparent 100%),
    radial-gradient(at 1% 100%, hsla(144, 100%, 92%, 1) 0, transparent 100%);
  color: #2A1D1D;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 990;
  text-align: center;
  display: flex;
  visibility: hidden;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  opacity: 0;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  height: 100vh;
  overflow: auto;
  padding: 80px 0 0;
}

.nav a {
  display: block;
  padding: 0;
  transition: color 0.6s ease;
  margin-left: auto;
  margin-right: auto;
  background-size: 72px;
}

.gloval-nav a:link {
  color: #2A1D1D;
}

.gloval-nav a:visited {
  color: #2A1D1D;
}

.gloval-nav ul li {
  opacity: 0;
}

/* open */
.open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

.open .gloval-nav {
  visibility: visible;
  opacity: 1;
}

.open .gloval-nav li {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1s ease, opacity 0.9s ease;
  margin: 60px 0;
}

/*-----------------------------------------------------------------
		花
-----------------------------------------------------------------*/
.copy::before {
  content: "";
  width: 80px;
  height: 80px;
  background: url(../images/april/rose_red_01.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: -45px;
  right: -20px;
}

.sec01::before {
  content: "";
  width: 70px;
  height: 40px;
  background: url(../images/april/rose_yellow_01.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: -35px;
  left: -40px;
}

.sec02 h1::before {
  content: "";
  width: 80px;
  height: 74px;
  background: url(../images/april/rose_green_02.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: -50px;
  left: 100px;
}

.sec02 .btn {
  position: relative;
}

.sec02 .btn::before {
  content: "";
  width: 50px;
  height: 50px;
  background: url(../images/april/rose_purple_01.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: -40px;
  right: -70px;
}

.sec02 .table_02 {
  position: relative;
}

.sec02 .table_02::before {
  content: "";
  width: 70px;
  height: 70px;
  background: url(../images/april/rose_yellow_02.png) no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 0;
  right: 0;
}

.sec03::before {
  content: "";
  width: 50px;
  height: 62px;
  background: url(../images/april/rose_blue_01.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: -45px;
  left: -30px;
}

.sec03::after {
  content: "";
  width: 60px;
  height: 50px;
  background: url(../images/april/rose_red_02.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 25px;
  right: -20px;
}

.sec04 h1::before {
  content: "";
  width: 44px;
  height: 40px;
  background: url(../images/april/rose_purple_02.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 110px;
}

.sec04::after {
  content: "";
  width: 44px;
  height: 40px;
  background: url(../images/april/rose_purple_03.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: -40px;
  left: -20px;
}

.sec05 h1::before {
  content: "";
  width: 44px;
  height: 40px;
  background: url(../images/april/rose_blue_02.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: -35px;
  left: -25px;
}

.sec05 ::after {
  content: "";
  width: 60px;
  height: 67px;
  background: url(../images/april/rose_yellow_03.png) no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -15px;
  right: -20px;
}



.footer_link::before {
  content: "";
  width: 110px;
  height: 116px;
  background: url(../images/april/rose_green_01.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: -80px;
  left: 180px;
}



@media screen and (max-width: 520px) {
  .sec03::after {
    top: 12px;
  }

  .sec04 h1::before {
    content: none;
  }
  .footer_link::before{
    left: 20px;
  }
}

/*-----------------------------------------------------------------
		キャッチコピー
-----------------------------------------------------------------*/
.copy {
  font-family: 'Noto Serif JP', serif;
  font-size: 24px;
  text-align: center;
  margin: 50px;
}

@media screen and (max-width: 520px) {
  .copy {
    margin: auto;
  }
}

/*-----------------------------------------------------------------
		INFORMATION
-----------------------------------------------------------------*/
.sec01 table {
  margin-top: 20px;
  font-size: 18px;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

.sec01 table tr {
  border-bottom: solid 2px #240D0D;
  cursor: pointer;
}

.sec01 table td {
  /* text-align: center; */
  width: 15%;
  padding: 35px 0 15px;
  font-weight: bold;
}

.sec01 table td+td {
  width: 75%;
  font-weight: normal;
}

.sec01 table td.icon {
  background-size: 85px;
  background-position: left 5px center;
  background-repeat: no-repeat;
  padding-left: 30px;
}

.sec01 table td.icon.bird {
  background-image: url(icon-bird.png)
}

.sec01 table td.icon.whale {
  background-image: url(icon-whale.png)
}

@media screen and (max-width: 520px) {
  .sec01 table td.icon {
    padding-left: 0;
  }

  .sec01 table td+td {
    padding-left: 20px;
  }
}

/*-----------------------------------------------------------------
		TICKET
-----------------------------------------------------------------*/
.sec02 .flexbox {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  font-family: 'Josefin Sans', 'Noto Sans', sans-serif;
  font-size: 20px;
}

.SS_ticket {
  border: solid #fff 1px;
  background-color: rgba(255, 255, 255, 0.5);
  font-weight: bold;
  flex-basis: 50%;
  padding: 20px;
}

.SS_ticket img {
  max-height: 160px;
  margin: 20px auto;
  display: table-cell;
  vertical-align: middle;
}

.SS_ticket .notes {
  font-size: 12px;
}

.price {
  margin-left: 50px;
}

.normal_ticket {
  flex-basis: 50%;
  height: calc(100% - 20px);
}

.normal_ticket li {
  border: solid #fff 1px;
  background-color: rgba(255, 255, 255, 0.5);
  font-weight: bold;
  padding: 20px 20px 20px 50px;
  margin-bottom: 20px;
  height: calc(100% / 3);
}

.normal_ticket li:last-child {
  margin-bottom: 0;
}

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

  /* 520px以下 */
  .sec02 .flexbox {
    display: block;
    flex-direction: column;
    gap: 20px;
    font-size: 16px;
  }

  .SS_ticket .notes {
    font-size: 10px;
  }

  .normal_ticket {
    width: 100%;
    margin-top: 20px;
  }

  .normal_ticket li {
    padding: 20px;
  }
}

.sec02 table {
  margin-top: 20px;
  width: 100%;
  font-size: 14px;
}

.sec02 table th {
  position: relative;
  text-align: left;
  width: 14rem;
}

.sec02 table td {
  width: 5rem;
}

.sec02 table td+td {
  width: auto;
}

.sec02 table th:after {
  display: block;
  content: "";
  width: 30px;
  height: 2px;
  background-color: #333;
  position: absolute;
  top: calc(50% - 1px);
  right: 20px;
}

.sec02 table.table_02 th {
  width: 8rem;
}

@media screen and (max-width: 520px) {
  .sec02 table th:after {
    /* width: 5px;
height: 15px;
background-color: rgba(255, 255, 255, 1);
top: 0;
left: 0; */
    content: none;
  }

  .sec02 table {
    font-size: 12px;
  }

  .sec02 table, tbody, tr {
    display: block;
    width: 100%;
  }

  .sec02 table th {
    margin-top: 20px;
    display: block;
    /* padding-left: 1em; */
    font-weight: bold;
    /* background-color: rgba(255, 255, 255, 0.5); */
  }

  .sec02 table td {
    /* padding-left: 1em; */
    width: 3rem;
  }

  .sec02 table.table_02 {
    width: 100%;
  }

  .sec02 table.table_02 th:after {
    content: none;
  }
}

.goods_item {
  width: 100%;
}

/*-----------------------------------------------------------------
		CAST
-----------------------------------------------------------------*/
.cast_warp {
  position: relative;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  margin-top: 140px;
}

.cast_warp .cast_img {
  position: absolute;
  width: 240px;
  bottom: 0;
}

.cast_sign {
  height: 70px;
  display: block;
  margin-left: auto;
  margin-top: -20px;
}

.cast_comment {
  padding: 20px;
  /* height: 150px; */
}

.red .cast_comment,
.blue .cast_comment,
.purple .cast_comment {
  text-align: right;
  padding-bottom: 0;
}

.green .cast_comment,
.yellow .cast_comment {
  width: calc(100% - 300px);
}

.cast_warp:nth-of-type(odd) .cast_img {
  left: 20px;
}

/* .cast_comment:nth-of-type(odd) {
  width: 60%;
  width: calc(100% - 300px);
  text-align: right;
} */
.cast_warp:nth-of-type(odd) p {
  /* width: 60%; */
  width: calc(100% - 250px);
  display: inline-block;
  text-align: left;
}

.cast_warp:nth-of-type(odd) .cast_sign {
  padding: 0 20px 20px 0;
}

.cast_warp:nth-of-type(even) .cast_img {
  right: 20px;
}

/* .cast_comment:nth-of-type(even) {
  width: 60%;
  width: calc(100% - 300px);
  text-align: left;
} */
.cast_warp:nth-of-type(even) p {
  /* width: 60%; */
  /* width: calc(100% - 300px); */
  display: block;
  text-align: left;
}

.cast_warp:nth-of-type(even) .cast_sign {
  /* height: 60px; */
  /* display: block;
  margin-left: auto; */
}

.cast_comment_wrap.red {
  background: linear-gradient(25deg, #F1B1F1, #F494AE);
}

.cast_comment_wrap.red::before {
  content: "";
  width: 60px;
  height: 40px;
  background: url(../images/april/rose_red.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: -20px;
  right: -15px;
}

.cast_comment_wrap.green {
  background: linear-gradient(140deg, #63C4D4, #9DECAF, #E0EB9B);
}

.cast_comment_wrap.green::before {
  content: "";
  /* display: inline-block; */
  width: 60px;
  height: 60px;
  background: url(../images/april/rose_green.png) no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -24px;
  left: -30px;
}

.cast_comment_wrap.blue {
  background: linear-gradient(220deg, #5F81DB, #6BBDEB, #79D7EA);
}

.cast_comment_wrap.blue::before {
  content: "";
  width: 70px;
  height: 70px;
  background: url(../images/april/rose_blue.png) no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -43px;
  right: -14px;
}

.cast_comment_wrap.yellow {
  background: linear-gradient(140deg, #F5AD6A, #FAD86C, #F4EE78);
}

.cast_comment_wrap.yellow::before {
  content: "";
  width: 50px;
  height: 50px;
  background: url(../images/april/rose_yellow.png) no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -20px;
  left: -20px;
}

.cast_comment_wrap.purple {
  background: linear-gradient(25deg, #E08BEB, #B583E6, #946DE1, #7E5EE2);
}

.cast_comment_wrap.purple::before {
  content: "";
  /* display: inline-block; */
  width: 65px;
  height: 65px;
  background: url(../images/april/rose_purple.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: -25px;
  right: -20px;
}

@media screen and (max-width: 520px) {
  .cast_warp {
    margin-top: 30px;
  }

  .cast_warp+.cast_warp {
    margin-bottom: 60px;
  }

  .cast_warp:nth-of-type(odd) p {
    width: 100%;
  }

  .cast_warp:nth-of-type(odd) .cast_img {
    margin-top: 20px;
  }

  .cast_warp .cast_img {
    position: static;
    width: 80%;
    margin: 0 auto;
  }

  .cast_sign {
    display: none;
  }

  /* .sp_cast{
    display: flex;
    align-items: flex-end;
    margin-top: 20px;
    justify-content: space-between;
  } */
  .green .cast_comment, .yellow .cast_comment {
    width: auto;
  }
}

/*-----------------------------------------------------------------
		ATTENTION
-----------------------------------------------------------------*/
.sec05 p {
  font-size: 14px;
}

/*-----------------------------------------------------------------
		FOOTER
-----------------------------------------------------------------*/
footer {
  text-align: center;
  font-family: 'Josefin Sans', 'Noto Sans', sans-serif;
  padding-bottom: 15px;
  position: relative;
}

footer p {
  font-size: 12px;
}

.footer_link {
  margin-bottom: 20px;
}

.footer_link a+a {
  margin-left: 20px;
}

.footer_link img {
  height: 40px;
}