@charset "UTF-8";
/*==========================================================================================================
 
	common font
 
===========================================================================================================*/
/*==========================================================================================================
 
	character color
 
===========================================================================================================*/
body {
  background-image: url("../img/lp/aocon_2nd/main_bg_pc.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/aocon_2nd/main_bg_pc.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; }

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 {
    box-shadow: 0 5px 10px #0f126b61;
    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; } }
.marker-pink {
  background: repeating-linear-gradient(-45deg, #FFE2EF, #FFE2EF 1px, #fff0 0, #fff 3px); }

.marker-h {
  position: sticky; }

.marker-h:before {
  background: repeating-linear-gradient(-45deg, #92ffce, #daffcb 4px, #fff 0, #fff 7px);
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -2; }

.marker-h:after {
  background: linear-gradient(white 60%, rgba(255, 255, 255, 0) 0%);
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1; }

h2 {
  text-shadow: -1px 1px 10px #fff; }
  h2 .h2_s {
    font-size: 60px; }
  h2 .h2_s_center {
    font-size: 60px;
    text-align: center; }
  h2 .h2_ss {
    font-size: 40px;
    color: #000;
    padding: 1%;
    margin: 2%;
    text-shadow: -1px 1px 10px #fff; }
  h2 .h2_l {
    font-size: 70px; }
  h2 .box {
    font-size: 20px;
    padding: 2%;
    text-align: initial;
    width: 80%;
    margin: 0 auto; }
  h2 .box2 {
    text-align: left; }

h4 {
  text-shadow: -1px 1px 10px #fff;
  font-size: 30px; }

@media only screen and (max-width: 768px) {
  h2 .h2_s {
    font-size: 25px; }
  h2 .h2_s_center {
    font-size: 25px;
    text-align: center; }
  h2 .h2_ss {
    font-size: 20px;
    color: #000;
    padding: 1%;
    margin: 2%;
    text-shadow: -1px 1px 10px #fff; }
  h2 .h2_l {
    font-size: 30px; }
  h2 .box {
    width: 100%;
    margin: 20px auto;
    padding: 0%; }
  h2 .box2 {
    width: 100%;
    margin: 20px auto;
    text-align: left; } }
@media only screen and (max-width: 768px) {
  .ss_font {
    font-size: 14px !important; } }
.h3 {
  background-color: #e3139e;
  width: 79%;
  padding: 3%;
  margin: 0 auto;
  color: #FFF;
  font-size: x-large;
  font-weight: bold; }

@media only screen and (max-width: 768px) {
  .h3 {
    background-color: black;
    width: 100%;
    padding: 8%; } }
#bn_main {
  margin: 0 auto;
  text-align: center; }

.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 {
  text-align: initial;
  margin-left: 6%; }

.chara_main_lp {
  max-width: 100%;
  height: auto; }

.logo_lp_aocon {
  text-align: center; }

@media only screen and (max-width: 768px) {
  .logo_lp {
    text-align: center;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    padding-bottom: 6px; }

  .logo_lp_aocon {
    text-align: center;
    max-width: 93%;
    height: auto;
    margin: 0 auto;
    padding-bottom: 34px; }

  .container {
    margin: 12px auto; }

  .container_bn {
    width: 100%; } }
@media (min-width: 1024px) {
  .column {
    width: calc(100% / 3);
    margin: 30px 0; } }
/*応援きゃんエリア*/
.cheer_area {
  padding: 10px 10%; }

@media only screen and (max-width: 768px) {
  .cheer_area {
    padding: 10px 3%; } }
.white_bg {
  background-color: #FFF; }

.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;
    width: 80%;
    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: #e6e6e6; }
  .cp_actab .cp_actab-content p {
    margin: 1em; }
  .cp_actab input:checked ~ .cp_actab-content {
    max-height: 20em; }
  .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); }

/*アオコンエリア*/
#aocon_area {
  margin-bottom: 80px;
  padding: 10px 10%; }

@media only screen and (max-width: 768px) {
  #aocon_area {
    margin-bottom: 80px;
    padding: 10px 3%; } }
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; }

#click_sns_lp {
  display: flex;
  margin: 37px -2px 32px 55px; }

@media only screen and (max-width: 768px) {
  #click_sns_lp {
    margin-left: 0px; } }
.btn_sns_2 a {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  text-decoration: none; }

.btn_sns_2 a span {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
  height: 100%;
  background-color: #088cb3;
  z-index: 2;
  font-size: 20px;
  line-height: normal;
  color: #FFF;
  width: 291px;
  border: solid 2px #FFF;
  margin-right: 12px;
  text-decoration: none; }

.btn_sns_2 a::before {
  content: "";
  position: absolute;
  bottom: -5px;
  right: -5px;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(-45deg, #fdf53b, #e9ff2e 3px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 6px);
  z-index: 1; }

.btn_sns_2 a span:hover {
  text-decoration: none !important;
  background-color: #FFF;
  color: #000;
  border: solid 2px #000; }

@media only screen and (max-width: 768px) {
  #click_sns_lp {
    display: inline; } }
.btn_to_aocon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color: #ffffff;
  font-size: 30px;
  border-radius: 0px;
  background-color: #0000008f;
  font-weight: bold;
  border: 3px solid #ffffff;
  width: 80%;
  margin: 3% auto;
  padding: 2%; }

@media only screen and (max-width: 768px) {
  .btn_to_aocon {
    font-size: 21px;
    border-radius: 0px;
    background-color: #0000008f;
    font-weight: bold;
    border: 3px solid #ffffff;
    width: 80%;
    margin: 3% auto;
    padding: 7% 2%; } }
.btn_to_aocon::after {
  content: "";
  display: block; }

.btn_to_aocon:hover, .btn_bn:hover, .btn_to_aocon:visited, .btn_bn:visited, .btn_to_aocon:active, .btn_bn:active {
  background-color: #FFFFFF;
  text-decoration: none !important;
  color: #150956; }

/*Twitter施策エリア*/
.twitter_area {
  background-color: #FFF;
  transform: skewY(-5deg);
  padding: 8%; }

.norotate {
  transform: skewY(5deg); }

.text_footer {
  padding: 2% 9%;
  text-align: end;
  font-size: x-large; }

.twitter_cam {
  width: 80%;
  margin: 33px auto;
  margin-top: 74px; }

/*あおこん専用*/
.odai {
  background-color: #dfdaff;
  margin: 0 auto;
  text-align: center;
  font-size: large;
  width: 80%; }

@media only screen and (max-width: 768px) {
  .odai {
    margin: 0 auto;
    text-align: center;
    font-size: large;
    width: 100%; } }
.h3_aocon {
  background-color: #e3139e;
  width: 80%;
  padding: 3%;
  margin: 0 auto;
  color: #FFF;
  font-size: x-large;
  font-weight: bold;
  text-align: center;
  margin-top: 30px;
  line-height: initial; }

@media only screen and (max-width: 768px) {
  .h3_aocon {
    background-color: #e3139e;
    width: 100%;
    padding: 10%; } }
.btn_dl_aocon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: initial;
  text-decoration: none;
  color: #ffffff;
  font-size: 23px;
  border-radius: 0px;
  background-color: #ff9e0d;
  font-weight: bold;
  border: 3px solid #ffffff;
  width: 68%;
  margin: 1% auto;
  padding: 2%; }

@media only screen and (max-width: 768px) {
  .btn_dl_aocon {
    text-decoration: none;
    color: #ffffff;
    font-size: 14px;
    width: 100%;
    margin: 1% auto;
    padding: 7% 0; } }
a .btn_dl_aocon:hover {
  background-color: #ec3232; }

/*アオコン結果発表*/
.mb {
  margin-bottom: 2%; }

.bg_img12 {
  background-image: url(../../assets/img/lp/aocon_2nd/11.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  height: 730px;
  padding-top: 15%;
  margin-bottom: 2%;
  padding-top: 57.03125%;
  background-size: cover;
  position: relative;
  height: 0; }

@media only screen and (max-width: 768px) {
  .bg_img12 {
    background-image: url(../../assets/img/lp/aocon_2nd/11.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    height: 4%;
    width: 100%; }

  video {
    width: 75%; } }
#icon .articleList {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  box-pack: justify;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  margin-left: -12px;
  margin-right: -12px;
  margin-bottom: 25px; }

#icon .articleList li {
  padding: 0 12px;
  margin-bottom: 20px;
  box-sizing: border-box;
  width: 20%; }

#icon .articleList li img {
  border-radius: 1em; }

@media only screen and (max-width: 768px) {
  .postItem .postDetail img {
    max-width: 100%; } }