@charset "UTF-8";
/*==========================================================================================================
 
	common font
 
===========================================================================================================*/
/*==========================================================================================================
 
	character color
 
===========================================================================================================*/
body {
  background-image: url("../img/lp/halfanniv/bg_kv.png");
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  position: relative; }

@media only screen and (max-width: 768px) {
  body::after {
    content: "";
    width: 100vw;
    height: 100vh;
    background-image: url("../img/lp/halfanniv/bg_kv@2x.png");
    background-size: cover;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: -1; } }
#lp_content {
  max-width: 100%;
  padding: 0; }
  #lp_content .item {
    position: absolute;
    top: 50px;
    right: 0; }
  #lp_content p {
    font-size: 20px; }

@media only screen and (max-width: 768px) {
  #lp_content p {
    font-size: 14px; } }
img {
  max-width: 100%;
  height: auto; }

#lp {
  padding-bottom: 150px; }
  #lp > .meta {
    position: relative;
    max-width: 1360px;
    margin: 0 auto 60px;
    padding: 0 20px; }
    #lp > .meta h1 {
      margin-bottom: -15px;
      margin-left: 40px;
      transition: all 0.3s ease; }
    #lp > .meta .catch {
      margin: 0 0 40px 200px;
      font-size: 20px;
      font-family: A1 Mincho, 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "Sawarabi Mincho", “メイリオ”, Meiryo, serif;
      line-height: 1;
      letter-spacing: .1em;
      color: #08718f;
      transition: all 0.3s ease; }
  #lp .coming {
    padding: 100px 0;
    font-size: 56px;
    text-align: center;
    color: #000f73; }
  #lp a img:hover, #lp a:link img:hover, #lp a:visited img:hover {
    transform: translate(0, -3px);
    text-decoration: none !important; }
  #lp a:hover {
    text-decoration: none !important; }

@media only screen and (max-width: 1200px) {
  #lp > .meta h1 {
    margin-left: 0; }
  #lp > .meta .catch {
    margin: 0 0 40px 160px; } }
@media only screen and (max-width: 768px) {
  #lp_content .item {
    top: -3%;
    right: -10%;
    width: calc(299/640*100%); }
    #lp_content .item img {
      width: 100%; }

  #lp > .meta {
    margin: 0 auto 0; }
    #lp > .meta h1 {
      margin-left: 0; }
      #lp > .meta h1 img {
        width: calc(307/640*100%); }
    #lp > .meta .catch {
      margin: 0 0 20px 30%;
      font-size: 20px;
      font-size: 3.2552083333vw; }
  #lp .coming {
    font-size: 50px;
    font-size: 8.1380208333vw; } }
#bn_main {
  margin: 0 auto;
  text-align: center;
  position: relative; }

.container, .container_bn {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  margin: 15px auto; }

@media only screen and (max-width: 768px) {
  .container_bn {
    display: inline-block; } }
.logo_lp {
  margin: 0 auto;
  position: absolute;
  top: -15%;
  left: 30%; }

@media only screen and (max-width: 768px) {
  .logo_lp {
    top: 0%;
    left: 0%; } }
.chara_main_lp {
  max-width: 100%;
  height: auto; }

/*応援きゃんエリア*/
.cheer_area {
  padding: 10px 10%; }

@media only screen and (max-width: 768px) {
  .cheer_area {
    padding: 10px 3%; } }
.pink_bg {
  background-color: #e4c438cc;
  text-align: center; }

.center_area {
  margin: 0 auto;
  text-align: center; }
  .center_area img {
    margin: 10px 0; }

/*アコーディオン*/
.cp_actab {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 5% auto;
  /* :checked */
  /* Icon */ }
  .cp_actab input {
    position: absolute;
    z-index: -1;
    opacity: 0; }
  .cp_actab label {
    font-weight: bold;
    position: relative;
    display: block;
    cursor: pointer;
    background: #ecef28;
    margin: 0 auto;
    font-size: medium;
    padding: 2%;
    line-height: initial; }
  .cp_actab .cp_actab-content {
    overflow: hidden;
    max-height: 0;
    -webkit-transition: max-height 0.35s;
    transition: max-height 0.35s;
    color: #333333;
    background: #ffffff; }
  .cp_actab .cp_actab-content p {
    margin: 1em; }
  .cp_actab input:checked ~ .cp_actab-content {
    max-height: fit-content;
    text-align: left; }
  .cp_actab label::after {
    line-height: 3;
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 3em;
    height: 3em;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
    text-align: center; }
  .cp_actab input[type=checkbox] + label::after {
    content: ''; }
  .cp_actab input[type=checkbox]:checked + label::after {
    transform: rotate(315deg); }

a .btn_bn {
  text-decoration: none !important; }

.btn_bn {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none !important;
  color: #101980;
  font-size: 21px;
  border-radius: 59px;
  background-color: #ffffff85;
  font-weight: bold;
  border: 3px solid #ffffff;
  width: 368px;
  margin: 3% auto;
  height: 100%;
  padding: 6% 5%;
  text-shadow: 2px 2px 1px #ffffff;
  margin-left: 10px; }

@media only screen and (max-width: 768px) {
  .btn_bn {
    padding: 9% 2%;
    margin: 1% auto;
    border-radius: 20px; } }
div.btn_bn::after {
  content: "";
  display: inline-block;
  width: 31px;
  height: 31px;
  margin: -3px 0 0 5px;
  background: url("../img/lp/cheer/icon_bn_sankaku.png") no-repeat;
  background-size: contain;
  vertical-align: middle; }

/*はーふあにば*/
/* フレックスボックスの基本設定 等間隔（両端揃え）折返しあり */
[class^="flex-col"] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 2%; }

/* コンテンツ下のマージン */
.flex-child {
  margin-bottom: 30px; }

/* 各カラム毎のコンテンツと疑似要素の横幅 */
.flex-col2 .flex-child {
  width: calc( (100% - 10px) / 2 ); }

.flex-col3::after,
.flex-col3 .flex-child {
  width: calc( (100% - 20px) / 3 ); }

.flex-col4::before,
.flex-col4::after,
.flex-col4 .flex-child {
  width: calc( (100% - 30px) / 4 ); }

/* 最終行は両端揃えにしない */
.flex-col3::after,
.flex-col4::before,
.flex-col4::after {
  content: ""; }

.flex-col4::before {
  order: 1; }

/* レスポンシブ対応 */
/* 991px以下で4列 → 3列 
@media screen and (max-width: 991px) {
	.flex-col4::after,
	.flex-col4 .flex-child { width: calc( (100% - 20px) / 3 ); }
}*/
/* 767px以下で4列・3列 → 2列 */
@media screen and (max-width: 767px) {
  .flex-col3 .flex-child,
  .flex-col4 .flex-child {
    width: calc( (100% - 10px) / 2 ); } }
.info_area {
  margin: 0 auto;
  text-align: center;
  width: 80%; }

#news01_area, #news02_area, #news03_area, #news04_area, #news05_area, #news06_area, #news07_area, #news08_area, #news09_area, #news10_area, #news11_area {
  width: 80%;
  margin: 2% auto;
  border: 3px solid #ff74b0;
  background-color: #fff4e5a3; }

@media only screen and (max-width: 768px) {
  #news01_area, #news02_area, #news03_area, #news04_area, #news05_area, #news06_area, #news07_area, #news08_area, #news09_area, #news10_area, #news11_area {
    width: 95%;
    margin: 8% auto;
    border: 3px solid #ff74b0;
    background-color: #fff4e5a3; } }
.news_box {
  padding: 5%;
  text-align: center; }
  .news_box h3 {
    font-size: 38px;
    color: #e43073;
    margin-bottom: 1%;
    text-align: center;
    line-height: initial; }
  .news_box a img {
    text-align: center;
    margin-top: 20px; }

.bgh3 {
  background-color: #e8ff68;
  padding: 1%; }

@media only screen and (max-width: 768px) {
  .news_box {
    padding: 2%;
    text-align: center; }
    .news_box h3 {
      font-size: 18px;
      color: #e43073;
      margin-bottom: 5%;
      text-align: center;
      line-height: 23px; }
    .news_box a img {
      text-align: center;
      margin-top: 20px; }
    .news_box .text {
      text-align: left; } }
/*応援メッセージ*/
.bg_ouen {
  background-color: #503f0687;
  margin: 0 auto;
  padding: 2%;
  margin-bottom: 100px;
  text-align: center; }
  .bg_ouen p {
    font-size: 20px;
    color: #FFF;
    padding: 1%; }
  .bg_ouen .btn-h {
    padding: 2% 0; }

.sukima {
  padding-top: 2%; }

.ouen_img {
  width: 60%;
  margin: 0 auto;
  text-align: center;
  border: 3px solid #986217; }

@media only screen and (max-width: 768px) {
  .ouen_img {
    width: 100%; } }
@keyframes open-keyanime1 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.animation1 {
  animation-name: open-keyanime1;
  animation-duration: 5s;
  animation-fill-mode: both;
  animation-iteration-count: 1; }

.animation_main {
  animation-name: open-keyanime1;
  animation-duration: 3s;
  animation-fill-mode: both;
  animation-iteration-count: 1; }

.mv_area {
  width: 40%;
  box-sizing: border-box;
  margin: 0 auto; }

@media only screen and (max-width: 768px) {
  .mv_area {
    width: 100%; } }
.mv_area .inner {
  padding-top: 56.25%;
  position: relative;
  height: 0;
  overflow: hidden; }

.mv_area iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.p-top {
  margin-top: 5%; }

@media only screen and (max-width: 768px) {
  .p-top {
    margin-top: 10%; } }
/*アオペラ史*/
#movie_area {
  background-color: #55a1ca;
  margin: 0 auto;
  text-align: center;
  position: relative; }

.sukima2 {
  padding: 2%; }

.w_pad {
  width: 80%;
  margin: 0 auto; }

@media only screen and (max-width: 768px) {
  .w_pad {
    width: 98%;
    margin: 0 auto; } }
/*
#movie_area::before {
    content: "";
    display: inline-block;
    width: 1400px;
    height: 681px;
    margin: -84px 0 0 5px;
    background: url(../img/lp/halfanniv/movie_deco.png) no-repeat 100% top;
    background-size: contain; 
    vertical-align: middle;
}*/
/*ふわふわ*/
.fuwafuwa_balloon {
  position: absolute;
  top: -11%;
  left: -7%;
  animation: fuwafuwa 3s infinite ease-in-out .8s alternate;
  background: url(../img/lp/halfanniv/anime_star_01.png) no-repeat center center/38% auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 23%;
  height: 42%;
  margin-top: 15px; }

@media only screen and (max-width: 768px) {
  .fuwafuwa_balloon {
    top: 55%;
    left: 5%;
    background: url(../img/lp/halfanniv/anime_star_01.png) no-repeat center center/100px auto;
    width: 50%;
    height: 50%; } }
.fuwafuwa_balloon2 {
  position: absolute;
  top: 66%;
  right: 5%;
  animation: fuwafuwa 2s infinite ease-in-out .8s alternate;
  background: url(../img/lp/halfanniv/anime_star_02.png) no-repeat center center/120px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 147px;
  height: 147px;
  margin-top: 15px; }

@media only screen and (max-width: 768px) {
  .fuwafuwa_balloon2 {
    right: -14%;
    background: url(../img/lp/halfanniv/anime_star_02.png) no-repeat center center/70px auto;
    width: 50%;
    height: 50%; } }
.fuwafuwa_balloon3 {
  position: absolute;
  top: -27%;
  right: 17%;
  animation: fuwafuwa 4s infinite ease-in-out .8s alternate;
  background: url(../img/lp/halfanniv/anime_star_03.png) no-repeat center center/110px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 161px;
  height: 185px;
  margin-top: 15px; }

.fuwafuwa_balloon4 {
  position: absolute;
  top: 69%;
  left: 2%;
  animation: fuwafuwa 4s infinite ease-in-out .8s alternate;
  background: url(../img/lp/halfanniv/anime_balloon_01.png) no-repeat center center/100px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 112px;
  height: 390px;
  margin-top: 15px; }

@media only screen and (max-width: 768px) {
  .fuwafuwa_balloon4 {
    top: 80%;
    left: -19%;
    background: url(../img/lp/halfanniv/anime_balloon_01.png) no-repeat center center/55px auto;
    width: 50%;
    height: 50%; } }
.fuwafuwa_balloon5 {
  position: absolute;
  top: 0%;
  right: 1%;
  animation: fuwafuwa 4s infinite ease-in-out .8s alternate;
  background: url(../img/lp/halfanniv/anime_balloon_02.png) no-repeat center center/67% auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 9%;
  height: 68%;
  margin-top: 15px; }

@media only screen and (max-width: 768px) {
  .fuwafuwa_balloon5 {
    top: 10%;
    left: -8%;
    animation: fuwafuwa 4s infinite ease-in-out .8s alternate;
    background: url(../img/lp/halfanniv/anime_balloon_02.png) no-repeat center center/50px auto;
    width: 50%;
    height: 50%; } }
.fuwafuwa_balloon6 {
  position: absolute;
  top: 35%;
  left: 6%;
  animation: fuwafuwa 4s infinite ease-in-out .8s alternate;
  background: url(../img/lp/halfanniv/anime_balloon_03.png) no-repeat center center/60% auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 8%;
  height: 69%;
  margin-top: 15px; }

@media only screen and (max-width: 768px) {
  .fuwafuwa_balloon6 {
    top: -88px;
    right: -20%;
    animation: fuwafuwa 4s infinite ease-in-out .8s alternate;
    background: url(../img/lp/halfanniv/anime_balloon_03.png) no-repeat center center/50px auto;
    width: 50%;
    height: 50%; } }
/*アオペラ史のほうアニメ*/
.fuwafuwa_balloon7 {
  position: absolute;
  top: -4%;
  left: 4%;
  animation: fuwafuwa 3s infinite ease-in-out .8s alternate;
  background: url(../img/lp/halfanniv/anime_star_01.png) no-repeat center center/41% auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 28%;
  height: 10%;
  margin-top: 15px; }

@media only screen and (max-width: 768px) {
  .fuwafuwa_balloon7 {
    top: 65%;
    left: 36%;
    background: url(../img/lp/halfanniv/anime_star_01.png) no-repeat center center/63px auto;
    width: 80px;
    height: 74px; } }
.fuwafuwa_balloon8 {
  position: absolute;
  left: 4%;
  animation: fuwafuwa 2s infinite ease-in-out .8s alternate;
  background: url(../img/lp/halfanniv/anime_star_02.png) no-repeat center center/120px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 147px;
  height: 147px;
  margin-top: 15px; }

@media only screen and (max-width: 768px) {
  .fuwafuwa_balloon8 {
    left: -6%;
    top: 2%;
    background: url(../img/lp/halfanniv/anime_star_02.png) no-repeat center center/59px auto;
    width: 75px;
    height: 83px; } }
.fuwafuwa_balloon9 {
  position: absolute;
  right: 17%;
  animation: fuwafuwa 4s infinite ease-in-out .8s alternate;
  background: url(../img/lp/halfanniv/anime_star_03.png) no-repeat center center/110px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 161px;
  height: 185px;
  margin-top: 15px; }

@media only screen and (max-width: 768px) {
  .fuwafuwa_balloon9 {
    bottom: 0;
    right: -5%;
    animation: fuwafuwa 4s infinite ease-in-out .8s alternate;
    background: url(../img/lp/halfanniv/anime_balloon_03.png) no-repeat center center/50px auto;
    width: 100px;
    height: 300px; } }
.fuwafuwa_balloon10 {
  position: absolute;
  top: 55%;
  right: 8%;
  animation: fuwafuwa 4s infinite ease-in-out .8s alternate;
  background: url(../img/lp/halfanniv/anime_balloon_01.png) no-repeat center center/100px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 112px;
  height: 390px;
  margin-top: 15px; }

@media only screen and (max-width: 768px) {
  .fuwafuwa_balloon10 {
    top: 36%;
    right: -5%;
    background: url(../img/lp/halfanniv/anime_balloon_01.png) no-repeat center center/55px auto;
    width: 100px;
    height: 300px; } }
.fuwafuwa_balloon11 {
  position: absolute;
  top: -2%;
  right: 5%;
  animation: fuwafuwa 4s infinite ease-in-out .8s alternate;
  background: url(../img/lp/halfanniv/anime_balloon_02.png) no-repeat center center/100px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 109px;
  height: 440px;
  margin-top: 15px; }

@media only screen and (max-width: 768px) {
  .fuwafuwa_balloon11 {
    top: 24%;
    left: -11%;
    animation: fuwafuwa 4s infinite ease-in-out .8s alternate;
    background: url(../img/lp/halfanniv/anime_balloon_02.png) no-repeat center center/50px auto;
    width: 100px;
    height: 300px; } }
.fuwafuwa_balloon12 {
  position: absolute;
  top: 35%;
  left: 47%;
  animation: fuwafuwa 4s infinite ease-in-out .8s alternate;
  background: url(../img/lp/halfanniv/anime_balloon_03.png) no-repeat center center/90px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 97px;
  height: 356px;
  margin-top: 15px; }

@media only screen and (max-width: 768px) {
  .fuwafuwa_balloon12 {
    top: 14%;
    left: 34%;
    animation: fuwafuwa 4s infinite ease-in-out .8s alternate;
    background: url(../img/lp/halfanniv/anime_balloon_03.png) no-repeat center center/50px auto;
    width: 100px;
    height: 200px; } }
.fuwafuwa_balloon13 {
  position: absolute;
  top: 61%;
  left: 4%;
  animation: fuwafuwa 4s infinite ease-in-out .8s alternate;
  background: url(../img/lp/halfanniv/anime_star_03.png) no-repeat center center/110px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 161px;
  height: 185px;
  margin-top: 15px; }

@media only screen and (max-width: 768px) {
  .fuwafuwa_balloon13 {
    left: 42%;
    top: 95%;
    animation: fuwafuwa 4s infinite ease-in-out .8s alternate;
    background: url(../img/lp/halfanniv/anime_balloon_03.png) no-repeat center center/50px auto;
    width: 100px;
    height: 269px; } }
.fuwafuwa_balloon14 {
  position: absolute;
  top: 25%;
  left: 4%;
  animation: fuwafuwa 2s infinite ease-in-out .8s alternate;
  background: url(../img/lp/halfanniv/anime_star_02.png) no-repeat center center/120px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 147px;
  height: 147px;
  margin-top: 15px; }

@media only screen and (max-width: 768px) {
  .fuwafuwa_balloon14 {
    top: 55%;
    left: -10%;
    background: url(../img/lp/halfanniv/anime_balloon_03.png) no-repeat center center/50px auto;
    width: 100px;
    height: 200px; } }
@keyframes fuwafuwa {
  0% {
    transform: translate(0, 0) rotate(-7deg); }
  50% {
    transform: translate(0, -7px) rotate(0deg); }
  100% {
    transform: translate(0, 0) rotate(7deg); } }
/*ボタン*/
.btn_hw,
a.btn_hw,
button.btn_hw {
  font-size: 1.6rem;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 3rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
  margin-bottom: 20px;
  min-width: 50%; }

@media only screen and (max-width: 768px) {
  .btn_hw, a.btn_hw, button.btn_hw {
    font-size: 16px;
    min-width: 70%; } }
.btn_howto,
a.btn_howto {
  color: #fff;
  background-color: #ef6784; }

.btn_howto,
a.btn_howto {
  color: #fff;
  background-color: #ef6784; }

.btn_howto:hover,
a.btn_howto:hover {
  color: #fff;
  background: #b38317; }

.video_mv {
  width: 40%;
  padding: 0;
  text-align: center;
  margin: 15px auto;
  box-sizing: border-box; }

.video_mv .inner {
  padding-top: 56.25%;
  position: relative;
  height: 0;
  overflow: hidden; }

.video_mv iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

@media screen and (max-width: 959px) and (min-width: 1px) {
  .video_mv {
    width: 80%;
    padding: 0;
    text-align: center;
    margin: 15px auto;
    box-sizing: border-box; } }