@charset "utf-8";

/* 元テンプレ調整用 */
#mid {
  max-width: 100%;
  width: unset;
  padding: 0;
}

#site_aside2 {
  display: none;
}

#header {
  display: block !important;
}

#header.hide {
  opacity: 1;
}

#mid {
  margin-top: 0;
}

#outer {
  margin-top: 0;
  margin-bottom: 0;
}

#footer {
  position: relative;
  z-index: 99999999;
}

/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
共通
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/
.flex {
  display: flex;
}

.inner {
  width: 90%;
  margin: 0 auto;
}

#all_Wrap a,
#all_Wrap button {
  display: block;
  transition: .3s;
}

#all_Wrap a:hover,
#all_Wrap button:hover {
  opacity: .6;
}

#all_Wrap img {
  width: 100%;
}

#all_Wrap figure {
  line-height: 1;
}

.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}

.inner90 {
  width: 90%;
  margin: 0 auto;
}

iframe {
  aspect-ratio: 16/9;
  width: 100%;
}

.sp {
  display: none;
}



/* コンテンツ */

#all_Wrap {
  position: relative;
  width: 100%;
  margin: 0 auto;
  z-index: 0;
}

.left_Box {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  width: calc((100% - 480px) / 2);
  height: 100%;
  z-index: 1;
  /* background: url() no-repeat center top; */
  background-size: 100%;
}

.left_Box>h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 550px;
  width: 80%;
  padding: 0;
  text-align: center;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

.right_Box {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  max-width: 100%;
  width: calc((100% - 480px) / 2);
  height: 100%;
  z-index: 1;
  /* background: url() no-repeat center top; */
  background-size: 100%;
}

.right_Box>.r_menu {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 400px;
  width: 80%;
  padding: 0;
  text-align: center;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  z-index: 10;
}

.right_Box>.r_menu li {
  background-color: #fff;
  border-radius: 15px;
}

.right_Box>.r_menu li:nth-of-type(1),
.right_Box>.r_menu li:nth-of-type(2) {
  width: 100%;
}

.right_Box>.r_menu .page_top {
  max-width: 80px;
  width: 5vw;
}

.left_Box .coupon1 {
  position: absolute;
  width: 20%;
  top: 20%;
  left: -3%;
}

.left_Box .coupon2 {
  position: absolute;
  width: 20%;
  top: 15%;
  right: -2%;
}

.left_Box .coupon3 {
  position: absolute;
  width: 100%;
  height: 30%;
  bottom: 0;
  left: 0;
  background-color: #90127a;
}

.right_Box .coupon4 {
  position: absolute;
  width: 30%;
  top: 10%;
  right: -3%;
}

.right_Box .coupon5 {
  position: absolute;
  width: 16%;
  top: 40%;
  left: -2%;
}

.right_Box .coupon6 {
  position: absolute;
  width: 45%;
  bottom: -3%;
  right: -5%;
}

.bg_wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background-size: cover;
  z-index: -1;
}

#all_Wrap main {
  position: relative;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
  background-color: #fff;
  border-left: 1px solid #eee;
  /* box-shadow: inset 1px 0 0 #eee; */
}




/* mainvisual */

section.mainvisual {
  /* background-color: #90127a; */
}

section.mainvisual video {
  aspect-ratio: 750/1334;
  width: 100%;
}

section.mainvisual figure {
  /* display: none; */
}


/* lineup */

section.lineup {
  background-color: #90127a;
  padding: 10% 0 0 0;
}

section.lineup ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

section.lineup ul li {
  width: calc((100% - 5.3%) / 2);
  margin: 5% 0 0 0;
}

section.lineup ul li a {
  margin: 6% 0 0 0;
}

section.lineup .lineup-coupon1-ttl{
  margin: 5% 0 0 0;
}

section.lineup .lineup-coupon1-btn {
  margin: 2% 0 0 0;
}

section.lineup .lineup-dl-ttl {
  margin: 5% 0 0 0;
}

section.lineup .lineup-dl-btn {
  margin: 2% 0 0 0;
}

section.lineup .lineup-note {
  margin: 9% 0 12% 0;
}



/* from app */

.from-app {
  position: relative;
}

.from-app .appstore_btn {
  position: absolute;
  width: 37%;
  top: 54%;
  left: 9%;
}

.from-app .googleplay_btn {
  position: absolute;
  width: 45%;
  top: 66%;
  left: 9%;
}

.from-app .iaeon_btn {
  position: absolute;
  width: 33%;
  top: 52%;
  left: 57%;
}



/* from app1 */

section.from-app1 figure {
  margin: 12% auto 15%;
}




/* new member */

#new-member1 {
  margin: 0 0 18% 0;
}

section .new-member-ttl {
  margin: 5% auto 0;
}

section .new-member-500yen-off {
  margin: 5% auto 0;
}

section .new-member-3step {
  margin: 5% auto 0;
}

section .new-member-thanks {
  margin: 5% auto 0;
}

section .new-member-period {
  margin: 5% auto 0;
}

section .new-member-dl-ttl {
  margin: 5% auto 0;
}

section .new-member-dl-icon {
  width: 38.13%;
  margin: 3% auto 0;
}

section .new-member-dl-copy {
  width: 72.8%;
  margin: 2% auto 0;
}

section .new-member-dl-btn {
  width: 72.8%;
  margin: 4% auto 0;
}

section .new-member-dl-note {
  width: 72.8%;
  margin: 6% auto 5%;
}




/* coupon 1 〜 4 */

#coupon1,
#coupon2,
#coupon3,
#coupon4,
#coupon5,
#coupon6 {
  margin: 0 0 18% 0;
}

#coupon1 .ttl,
#coupon2 .ttl,
#coupon3 .ttl,
#coupon4 .ttl,
#coupon5 .ttl,
#coupon6 .ttl {

}

#coupon1 .overview,
#coupon2 .overview,
#coupon3 .overview,
#coupon4 .overview,
#coupon5 .overview,
#coupon6 .overview {
  width: 90%;
  margin: 4% auto 0;
}

#coupon1 ul,
#coupon2 ul,
#coupon4 ul,
#coupon5 ul,
#coupon6 ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 92.26%;
  margin: 3% auto 0;
}

#coupon1 ul li,
#coupon2 ul li,
#coupon4 ul li,
#coupon5 ul li,
#coupon6 ul li  {
  width: 48%;
  border: 4px solid #231815;
  padding: 1.5%;
  margin: 3.5% 0 0 0;
}

#coupon1 .note,
#coupon2 .note,
#coupon4 .note,
#coupon5 .note,
#coupon6 .note {
  width: 90%;
  margin: 5% auto 0;
}

#coupon1 .btn,
#coupon4 .btn {
  width: 90%;
  margin: 5.5% auto 0;
}

#coupon3 .future {
  width: 90%;
  margin: 6% auto 0;
}

#coupon3 .overview {
  width: 90%;
  margin: 1% auto 0;
}

#coupon3 .ph {
  width: 82.53%;
  border: 6px solid #231815;
  padding: 2%;
  margin: 4% auto 0;
}

#coupon3 .btn {
  width: 90%;
  margin: 4% auto 0;
}

#coupon5 .overview,
#coupon6 .overview {
  margin-top: 0;
}


/* voice */

section.voice {
  margin: 0 0 16% 0;
}

section.voice .voice-cnt1 {
  background-color: #d1167b;
  padding: 7% 0 5.5% 0;
}

section.voice .voice-cnt2 {
  background-color: #21abdb;
  padding: 10% 0 6% 0;
}

section.voice .voice-cnt3 {
  background-color: #ff8812;
  padding: 10% 0 9% 0;
}




/* from app2 */

section.from-app2 {

}

section.from-app2 .youtube_box {
  width: 90%;
  margin: 4% auto 0;
}




/* about iaon */

section.about_iaon {
  width: 90%;
  margin: 15% auto 0;
}

section.about_iaon figure:has(img[src*="-sub"]) {
  width: 93.8%;
  margin: 4.6% auto 0;
}

section.about_iaon .method-ttl {
  margin: 4.6% auto 0;
}

section.about_iaon .youtube_box {
  margin: 4.6% auto 0;
}

section.about_iaon .youtube_box iframe {
  aspect-ratio: 651/1157;
}



/* sns share */

section.sns_share {
  width: 90%;
  margin: 15% auto 0;
}

section.sns_share ul {
  display: flex;
  justify-content: center;
  margin: 6% 0 5%;
  gap: 20px 8%;
}

section.sns_share ul li {
  width: calc((100% - 4%) / 3);
}




/* footer */

footer {
  position: relative;
  /* margin: 15% auto 0; */
}

footer h2 {
  display: block;
  width: 27.5%;
  margin: 0 auto 10%;
}

footer ul {
  display: flex;
}

footer ul li:nth-of-type(1) {
  width: calc(100% * 620 / 750);
}

footer ul li:nth-of-type(2) {
  width: calc(100% * 130 / 750);
}

@media only screen and (max-width: 768px) {
  footer h2 {
    margin: 0 auto 30%;
  }
  footer ul {
    position: fixed;
    bottom: 0;
  }
}









@media only screen and (max-width: 768px) {
  .sp {
    display: block;
  }

  .left_Box {
    display: none;
  }

  .right_Box {
    display: none;
  }

  .bg_wrap {
    display: none;
  }

  #all_Wrap main {
    max-width: 100%;
    width: 100%;
    box-shadow: none;
    border-left: none;
  }

}