@charset "UTF-8";
/* Scss Document */
/* CSS Document */
/*------------------------------mixin font------------------------------*/
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../font/NotoSansJP-Regular.woff2") format("woff2"), url("../font/NotoSansJP-Regular.woff") format("woff");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../font/NotoSansJP-Bold.woff2") format("woff2"), url("../font/NotoSansJP-Bold.woff") format("woff");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../font/NotoSansJP-Black.woff2") format("woff2"), url("../font/NotoSansJP-Black.woff") format("woff");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../font/OpenSans-Bold.woff2") format("woff2"), url("../font/OpenSans-Bold.woff") format("woff");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../font/BarlowCondensed-Bold.woff2") format("woff2"), url("../font/BarlowCondensed-Bold.woff") format("woff");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../font/BarlowCondensed-Medium.woff2") format("woff2"), url("../font/BarlowCondensed-Medium.woff") format("woff");
}
/*------------------------------mixin bg------------------------------*/
/*------------------------------mixin flex------------------------------*/
html {
  scroll-behavior: smooth;
  font-size: 0.694444444vw;
  font-feature-settings: "palt";
}
@media only screen and (max-width: 768px) {
  html {
    font-size: 2.56vw;
  }
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  color: #222;
  line-height: 1.6;
  counter-reset: benefit_number;
}

picture {
  display: block;
}

img, source {
  width: 100%;
  height: auto;
}

.wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
}

main {
  flex: 1;
  width: 100%;
  padding: 0 !important;
}

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

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

.bold {
  font-weight: 700;
}

.open-sans {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
}

.cormorant-garamond {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
}

.blue {
  color: #0056CC;
}

.d-blue {
  color: #002F6F;
}

.orange {
  color: #FF9B14;
}

.yellow {
  color: #FFF717;
}

.box {
  display: none;
}

.pc_flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 768px) {
  .pc_flex {
    flex-direction: column;
  }
}

/*------------------------------mixin bg------------------------------*/
/*------------------------------mixin flex------------------------------*/
.font-en {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.number {
  line-height: 1;
}

.strong {
  font-weight: 600;
}

.campaign-red {
  color: #EE422E;
}

.campaign-blue {
  color: #31B2EF;
}

.section_title {
  font-size: 5rem;
  text-align: center;
  font-weight: bold;
  margin-bottom: 4rem;
  line-height: 1.3;
  color: #002F6F;
}
@media only screen and (max-width: 768px) {
  .section_title {
    font-size: 3.2rem;
    margin-bottom: 2.5rem;
  }
}
.section_title .small {
  font-size: 3.6rem;
}
@media only screen and (max-width: 768px) {
  .section_title .small {
    font-size: 2.6rem;
  }
}
.section_title .small .open-sans {
  font-size: 4rem;
}
@media only screen and (max-width: 768px) {
  .section_title .small .open-sans {
    font-size: 3rem;
  }
}
.section_title .sub {
  font-size: 3.2rem;
}
@media only screen and (max-width: 768px) {
  .section_title .sub {
    font-size: 2.4rem;
  }
}

/* 注釈 */
.note_wrap {
  padding-left: 1rem;
  text-align: justify;
  color: #888;
}
@media only screen and (min-width: 769px) {
  .note_wrap {
    padding-left: 1.5rem;
  }
}
.note_wrap .note {
  position: relative;
  font-size: 1rem;
  display: inline-block;
}
@media only screen and (min-width: 769px) {
  .note_wrap .note {
    font-size: 1.4rem;
  }
}
.note_wrap .note::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-100%);
}

/* ボタン上テキスト */
.cv_wrap .copy {
  text-align: center;
}
.cv_wrap .copy .copy_inline {
  display: inline-block;
  font-size: 1.8rem;
  font-weight: bold;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .cv_wrap .copy .copy_inline {
    font-size: 1.6rem;
  }
}
.cv_wrap .copy .copy_inline::before, .cv_wrap .copy .copy_inline::after {
  content: "";
  display: block;
  background: #222;
  width: 0.1rem;
  height: 2.2rem;
  position: absolute;
  left: -1.2rem;
  top: 50%;
  transform: translateY(-50%) rotate(-25deg);
}
.cv_wrap .copy .copy_inline::after {
  left: auto;
  right: -1.2rem;
  transform: translateY(-50%) scale(-1, 1) rotate(-25deg);
}

/* アコーディオン */
.accordion.detail {
  font-weight: 700;
  text-align: center;
  color: #fff;
  width: 100%;
  background: #222;
  border-radius: 0.2rem;
  cursor: pointer;
  position: relative;
}
.accordion.detail::after {
  content: "";
  width: 1.2em;
  height: 1.2em;
  background: url("../img/plus.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  right: 1.2em;
  top: 50%;
  transform: translateY(-50%);
}
@media only screen and (max-width: 768px) {
  .accordion.detail::after {
    right: 1em;
  }
}
.accordion.detail.close::after {
  background: url("../img/minus.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/*------------------------------キャンペーン詳細------------------------------*/
.campaign {
  padding: 0 1.5rem 4rem;
  background: url(../img/campaign/sakura_top.svg) no-repeat top -1.2rem left -5.3rem/20rem 9.04rem, url(../img/campaign/sakura_middle.svg) no-repeat center/90%, url(../img/campaign/sakura_bottom.svg) no-repeat bottom -6rem left 24.8rem/25rem 13.753rem, linear-gradient(to right, #EE422E 0%, #EE422E 50%, #31B2EF 50%, #31B2EF 100%);
}
@media only screen and (min-width: 769px) {
  .campaign {
    padding: 0 27rem 6rem;
    background: url(../img/campaign/sakura_top.svg) no-repeat top left -14.4rem/60rem 27rem, url(../img/campaign/sakura_middle.svg) no-repeat center/90%, url(../img/campaign/sakura_bottom.svg) no-repeat bottom left 105.3rem/60rem 33rem, linear-gradient(to right, #EE422E 0%, #EE422E 50%, #31B2EF 50%, #31B2EF 100%);
  }
}
.campaign--title {
  text-align: center;
  margin-left: -1.5rem;
}
@media only screen and (min-width: 769px) {
  .campaign--title {
    margin-left: 0;
  }
}
.campaign--title figure {
  margin: 0 auto;
  width: 39rem;
}
@media only screen and (min-width: 769px) {
  .campaign--title figure {
    width: 66.7rem;
  }
}
.campaign .term_wrap {
  text-align: center;
}
.campaign .term_wrap .term {
  letter-spacing: 0.04rem;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  color: #fff;
  background: #002F6F;
  position: relative;
  font-size: 1.2rem;
  text-align: center;
  padding: 0.5em 1em;
  margin-top: -2rem;
  border-radius: 0.2rem;
  border: 1px #fff solid;
}
@media only screen and (min-width: 769px) {
  .campaign .term_wrap .term {
    font-size: 1.8rem;
    margin-top: -4.4rem;
  }
}
.campaign .term_wrap .term::before, .campaign .term_wrap .term::after {
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
}
.campaign .term_wrap .term::before {
  width: 5.625rem;
  height: 4.883rem;
  background: url(../img/campaign/giftcard.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  left: -6rem;
}
@media only screen and (min-width: 769px) {
  .campaign .term_wrap .term::before {
    width: 9rem;
    height: 7.918rem;
    left: -11rem;
  }
}
.campaign .term_wrap .term::after {
  width: 5rem;
  height: 4.452rem;
  background: url(../img/campaign/air2_airpods4.webp);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  right: -6rem;
}
@media only screen and (min-width: 769px) {
  .campaign .term_wrap .term::after {
    width: 9rem;
    height: 8.013rem;
    right: -11rem;
  }
}
.campaign .term_wrap .term .number {
  font-size: 2rem;
}
@media only screen and (min-width: 769px) {
  .campaign .term_wrap .term .number {
    font-size: 3.6rem;
  }
}
.campaign .term_wrap .intro {
  color: #fff;
  margin-top: 1em;
  font-weight: 600;
  font-size: 1.4rem;
}
@media only screen and (min-width: 769px) {
  .campaign .term_wrap .intro {
    font-size: 2rem;
  }
}
.campaign .term_wrap .intro span {
  display: inline-block;
  position: relative;
  padding: 0 1em;
}
@media only screen and (min-width: 769px) {
  .campaign .term_wrap .intro span {
    padding: 0 1.25em;
  }
}
.campaign .term_wrap .intro span::before, .campaign .term_wrap .intro span::after {
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1.1rem;
  background: url(../img/campaign/down_arrow.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
@media only screen and (min-width: 769px) {
  .campaign .term_wrap .intro span::before, .campaign .term_wrap .intro span::after {
    width: 1.5rem;
    height: 1.65rem;
  }
}
.campaign .term_wrap .intro span::before {
  right: 0;
}
.campaign .term_wrap .intro span::after {
  left: 0;
}
.campaign .term_wrap + div {
  margin-top: 2rem;
}
@media only screen and (min-width: 769px) {
  .campaign .term_wrap + div {
    margin-top: 4rem;
  }
}
.campaign .two_chances--wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
@media only screen and (min-width: 769px) {
  .campaign .two_chances--wrap {
    gap: 6rem;
  }
}
.campaign .two_chances--wrap .chance {
  position: relative;
  background: #fff;
  border-radius: 0.5rem;
  padding: 1.5rem;
}
@media only screen and (min-width: 769px) {
  .campaign .two_chances--wrap .chance {
    padding: 2rem 2.5rem;
  }
}
.campaign .two_chances--wrap .chance .top {
  line-height: 1;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 0.5rem;
  width: 4rem;
  height: 4rem;
  top: -1rem;
  left: -1rem;
  font-size: 0.8rem;
}
@media only screen and (min-width: 769px) {
  .campaign .two_chances--wrap .chance .top {
    width: 8rem;
    height: 8rem;
    top: -2rem;
    left: -2rem;
    font-size: 1.6rem;
  }
}
.campaign .two_chances--wrap .chance .top .number {
  font-size: 1.4rem;
}
@media only screen and (min-width: 769px) {
  .campaign .two_chances--wrap .chance .top .number {
    font-size: 2.8rem;
  }
}
.campaign .two_chances--wrap .chance .heading {
  text-align: center;
  font-weight: 600;
}
.campaign .two_chances--wrap .chance .heading--wrap {
  font-feature-settings: "palt";
  display: inline-block;
  position: relative;
  padding: 0 0.6em;
  font-size: 1.2rem;
}
@media only screen and (min-width: 769px) {
  .campaign .two_chances--wrap .chance .heading--wrap {
    font-size: 1.8rem;
  }
}
.campaign .two_chances--wrap .chance .heading--wrap::before, .campaign .two_chances--wrap .chance .heading--wrap::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 1em;
  top: 50%;
}
.campaign .two_chances--wrap .chance .heading--wrap::before {
  transform: translateY(-50%) rotate(-20deg);
  left: 0;
}
.campaign .two_chances--wrap .chance .heading--wrap::after {
  transform: translateY(-50%) rotate(20deg);
  right: 0;
}
.campaign .two_chances--wrap .chance .heading--wrap.lottery {
  font-size: 1rem;
}
@media only screen and (min-width: 769px) {
  .campaign .two_chances--wrap .chance .heading--wrap.lottery {
    font-size: 1.6rem;
  }
}
.campaign .two_chances--wrap .chance .heading--wrap.lottery .number {
  font-size: 1.8rem;
}
@media only screen and (min-width: 769px) {
  .campaign .two_chances--wrap .chance .heading--wrap.lottery .number {
    font-size: 2.8rem;
  }
}
.campaign .two_chances--wrap .chance .heading + div {
  margin-top: 0.5rem;
}
@media only screen and (min-width: 769px) {
  .campaign .two_chances--wrap .chance .main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
  }
}
@media only screen and (max-width: 768px) {
  .campaign .two_chances--wrap .chance .main figure {
    margin: 0 auto;
  }
}
.campaign .two_chances--wrap .chance .main figure.circle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 12rem;
  height: 12rem;
}
.campaign .two_chances--wrap .chance .main .text {
  font-weight: 600;
  text-align: center;
  font-size: 2rem;
}
@media only screen and (min-width: 769px) {
  .campaign .two_chances--wrap .chance .main .text {
    font-size: 2.4rem;
  }
}
.campaign .two_chances--wrap .chance .main .text .strong {
  line-height: 1;
}
.campaign .two_chances--wrap .chance .main.card .circle img {
  width: 9rem;
}
.campaign .two_chances--wrap .chance .main.card .text {
  line-height: 1.4;
}
.campaign .two_chances--wrap .chance .main.card .text .small {
  font-size: 1.2rem;
}
@media only screen and (min-width: 769px) {
  .campaign .two_chances--wrap .chance .main.card .text .small {
    font-size: 1.6rem;
  }
}
.campaign .two_chances--wrap .chance .main.card .text .strong {
  color: #EE422E;
  font-size: 4rem;
}
@media only screen and (min-width: 769px) {
  .campaign .two_chances--wrap .chance .main.card .text .strong {
    font-size: 5.2rem;
  }
}
.campaign .two_chances--wrap .chance .main.airpods4 .circle img {
  width: 7.5rem;
}
.campaign .two_chances--wrap .chance .main.airpods4 .text .small {
  font-size: 1rem;
}
@media only screen and (min-width: 769px) {
  .campaign .two_chances--wrap .chance .main.airpods4 .text .small {
    font-size: 1.4rem;
  }
}
.campaign .two_chances--wrap .chance .main.airpods4 .text .strong {
  color: #31B2EF;
  font-size: 3.2rem;
}
@media only screen and (min-width: 769px) {
  .campaign .two_chances--wrap .chance .main.airpods4 .text .strong {
    font-size: 4rem;
  }
}
.campaign .two_chances--wrap .chance .main + div {
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: solid 1px;
}
@media only screen and (min-width: 769px) {
  .campaign .two_chances--wrap .chance .main + div {
    margin-top: 2rem;
    padding-top: 2rem;
  }
}
.campaign .two_chances--wrap .chance .bottom_text {
  font-size: 1rem;
}
@media only screen and (min-width: 769px) {
  .campaign .two_chances--wrap .chance .bottom_text {
    font-size: 1.4rem;
  }
}
.campaign .two_chances--wrap .chance.chance_01 .top {
  color: #EE422E;
  background: url(../img/campaign/sakura_mark_red.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.campaign .two_chances--wrap .chance.chance_01 .heading {
  color: #EE422E;
}
.campaign .two_chances--wrap .chance.chance_01 .heading--wrap::before, .campaign .two_chances--wrap .chance.chance_01 .heading--wrap::after {
  background: #EE422E;
}
.campaign .two_chances--wrap .chance.chance_01 .main .circle {
  background: #FAC7C1;
}
.campaign .two_chances--wrap .chance.chance_01 .main + div {
  border-color: #FAC7C1;
}
.campaign .two_chances--wrap .chance.chance_02 .top {
  color: #31B2EF;
  background: url(../img/campaign/sakura_mark_blue.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.campaign .two_chances--wrap .chance.chance_02 .heading {
  color: #31B2EF;
}
.campaign .two_chances--wrap .chance.chance_02 .heading--wrap::before, .campaign .two_chances--wrap .chance.chance_02 .heading--wrap::after {
  background: #31B2EF;
}
.campaign .two_chances--wrap .chance.chance_02 .main .circle {
  background: #C2E8FB;
}
.campaign .two_chances--wrap .chance.chance_02 .main + div {
  border-color: #C2E8FB;
}
.campaign .two_chances + div {
  margin-top: 2rem;
}
@media only screen and (min-width: 769px) {
  .campaign .two_chances + div {
    margin-top: 4rem;
  }
}
.campaign .cv_wrap .cv-btn {
  height: 7rem;
}
@media only screen and (min-width: 769px) {
  .campaign .cv_wrap .cv-btn {
    height: 8rem;
  }
}
.campaign .cv_wrap .cv-btn p {
  font-size: 1.6rem;
}
@media only screen and (min-width: 769px) {
  .campaign .cv_wrap .cv-btn p {
    font-size: 1.8rem;
  }
}
.campaign .cv_wrap + .note_wrap {
  margin-top: 2rem;
}
@media only screen and (min-width: 769px) {
  .campaign .cv_wrap + .note_wrap {
    margin-top: 4rem;
  }
}
.campaign .note_wrap {
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}
@media only screen and (min-width: 769px) {
  .campaign .note_wrap {
    font-size: 1.2rem;
  }
}

/* campaign.html */
#campaign_page_top.campaign {
  padding: 1.5rem 1.5rem 4rem;
  margin-top: 5.3rem;
  background: url(../img/campaign/sakura_top.svg) no-repeat top -1.2rem left -5.3rem/20rem 9.04rem, url(../img/campaign/sakura_middle.svg) no-repeat center/90%, linear-gradient(to right, #EE422E 0%, #EE422E 50%, #31B2EF 50%, #31B2EF 100%);
}
@media only screen and (min-width: 769px) {
  #campaign_page_top.campaign {
    padding: 2rem 27rem 6rem;
    background: url(../img/campaign/sakura_top.svg) no-repeat top left -14.4rem/60rem 27rem, url(../img/campaign/sakura_middle.svg) no-repeat center/90%, linear-gradient(to right, #EE422E 0%, #EE422E 50%, #31B2EF 50%, #31B2EF 100%);
  }
}
#campaign_page_top.campaign .term_wrap .term::before, #campaign_page_top.campaign .term_wrap .term::after {
  display: none;
}
@media only screen and (min-width: 769px) {
  #campaign_page_top.campaign .two_chances .chance {
    padding: 2rem 2.5rem 3rem;
  }
}
@media only screen and (min-width: 769px) {
  #campaign_page_top.campaign .two_chances .chance .main {
    gap: 2rem;
  }
}
#campaign_page_top.campaign .two_chances .chance .main.card figure {
  width: 11.5rem;
}
@media only screen and (min-width: 769px) {
  #campaign_page_top.campaign .two_chances .chance .main.card figure {
    width: 12rem;
  }
}
#campaign_page_top.campaign .two_chances .chance .main.airpods4 {
  position: relative;
}
#campaign_page_top.campaign .two_chances .chance .main.airpods4 figure {
  width: 10rem;
}
@media only screen and (min-width: 769px) {
  #campaign_page_top.campaign .two_chances .chance .main.airpods4 figure {
    width: 10rem;
  }
}
#campaign_page_top.campaign .two_chances .chance .main.airpods4 .lottery {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 6rem;
  left: -1rem;
  width: 5rem;
  height: 5rem;
  background: #FFF717;
  border-radius: 50%;
  font-size: 1rem;
  color: #0056CC;
}
@media only screen and (min-width: 769px) {
  #campaign_page_top.campaign .two_chances .chance .main.airpods4 .lottery {
    width: 7.5rem;
    height: 7.5rem;
    font-size: 1.4rem;
    bottom: -2rem;
    left: 0;
  }
}
#campaign_page_top.campaign .two_chances .chance .main.airpods4 .lottery .number {
  font-size: 1.6rem;
}
@media only screen and (min-width: 769px) {
  #campaign_page_top.campaign .two_chances .chance .main.airpods4 .lottery .number {
    font-size: 2.4rem;
  }
}
#campaign_page_top.campaign .two_chances .chance .main.airpods4 .text {
  font-size: 1.6rem;
}
@media only screen and (max-width: 768px) {
  #campaign_page_top.campaign .two_chances .chance .main.airpods4 .text {
    margin-top: 1.5rem;
  }
}
@media only screen and (min-width: 769px) {
  #campaign_page_top.campaign .two_chances .chance .main.airpods4 .text {
    font-size: 2.4rem;
  }
}
@media only screen and (min-width: 769px) {
  #campaign_page_top.campaign .two_chances .chance .main.airpods4 .text .small {
    font-size: 1.6rem;
  }
}

.notification {
  border-radius: 0.5rem;
  background: #999;
  color: #fff;
  padding: 2rem;
  font-size: 1.4rem;
}
@media only screen and (min-width: 769px) {
  .notification {
    font-size: 1.6rem;
  }
}

/**/
.chance_detaile {
  padding: 4rem 3rem;
}
@media only screen and (min-width: 769px) {
  .chance_detaile {
    padding: 6rem 27rem;
  }
}
.chance_detaile .detaile_wrap {
  background: #fff;
  border-radius: 0.5rem;
  position: relative;
  padding: 3rem 2rem;
}
@media only screen and (min-width: 769px) {
  .chance_detaile .detaile_wrap {
    padding: 4rem 13rem 4.5rem;
  }
}
.chance_detaile .detaile_wrap .heading {
  text-align: center;
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 26.3rem;
  height: 4rem;
}
@media only screen and (min-width: 769px) {
  .chance_detaile .detaile_wrap .heading {
    top: -2.7rem;
    width: 35.6rem;
    height: 5.6rem;
  }
}
.chance_detaile .detaile_wrap .ribbon {
  text-align: center;
}
.chance_detaile .detaile_wrap .ribbon span {
  position: relative;
  display: inline-block;
  font-size: 1.6rem;
  color: #fff;
  padding: 0.5em 1.5em;
}
.chance_detaile .detaile_wrap .ribbon span::before, .chance_detaile .detaile_wrap .ribbon span::after {
  position: absolute;
  content: "";
  background: #fff;
  width: 0.8rem;
  height: 100%;
  top: 0;
}
.chance_detaile .detaile_wrap .ribbon span::before {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  left: 0;
}
.chance_detaile .detaile_wrap .ribbon span::after {
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  right: 0;
}
.chance_detaile .detaile_wrap .ribbon + div {
  margin-top: 1.5rem;
}
@media only screen and (min-width: 769px) {
  .chance_detaile .detaile_wrap .ribbon + div {
    margin-top: 2rem;
  }
}
@media only screen and (min-width: 769px) {
  .chance_detaile .detaile_wrap .present {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
  }
}
.chance_detaile .detaile_wrap .present .image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.chance_detaile .detaile_wrap .present .image.logos {
  gap: 1rem;
}
.chance_detaile .detaile_wrap .present .image.logos figure {
  width: 6.5rem;
}
@media only screen and (min-width: 769px) {
  .chance_detaile .detaile_wrap .present .image.logos figure {
    width: 8rem;
  }
}
.chance_detaile .detaile_wrap .present .image.circle_airpods {
  gap: 1.5rem;
}
.chance_detaile .detaile_wrap .present .image.circle_airpods .circle {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: #0056CC;
  background: #FFF717;
  border-radius: 50%;
  width: 8rem;
  height: 8rem;
}
@media only screen and (min-width: 769px) {
  .chance_detaile .detaile_wrap .present .image.circle_airpods .circle {
    font-size: 1.6rem;
    width: 10.4rem;
    height: 10.4rem;
  }
}
.chance_detaile .detaile_wrap .present .image.circle_airpods .circle .number {
  font-size: 2.4rem;
}
@media only screen and (min-width: 769px) {
  .chance_detaile .detaile_wrap .present .image.circle_airpods .circle .number {
    font-size: 3.2rem;
  }
}
.chance_detaile .detaile_wrap .present .image.circle_airpods figure {
  width: 10rem;
}
@media only screen and (min-width: 769px) {
  .chance_detaile .detaile_wrap .present .image.circle_airpods figure {
    width: 13rem;
  }
}
.chance_detaile .detaile_wrap .present .text {
  font-weight: 600;
  text-align: center;
  font-size: 2.4rem;
}
@media only screen and (max-width: 768px) {
  .chance_detaile .detaile_wrap .present .text {
    margin-top: 1.5rem;
  }
}
.chance_detaile .detaile_wrap .present .text .strong {
  line-height: 1;
  font-size: 3.2rem;
}
.chance_detaile .detaile_wrap .present .text .small {
  font-size: 1.6rem;
}
.chance_detaile .detaile_wrap .present + div {
  margin-top: 1.5rem;
  padding-top: 2rem;
  border-top: solid 1px;
}
@media only screen and (min-width: 769px) {
  .chance_detaile .detaile_wrap .present + div {
    margin-top: 2rem;
  }
}
.chance_detaile .detaile_wrap .more_detaile {
  font-size: 1.4rem;
}
@media only screen and (min-width: 769px) {
  .chance_detaile .detaile_wrap .more_detaile {
    font-size: 1.6rem;
  }
}
.chance_detaile .detaile_wrap p + dl {
  margin-top: 2rem;
}
.chance_detaile .detaile_wrap dl dt {
  background: #002F6F;
  color: #fff;
  text-align: center;
  padding: 0.25em 0;
  border-radius: 0.2rem;
}
.chance_detaile .detaile_wrap dl dt + dd {
  margin-top: 1em;
}
.chance_detaile .detaile_wrap dl dd a {
  color: #0056CC;
  text-decoration: underline;
}
.chance_detaile .detaile_wrap + div {
  margin-top: 3rem;
}
@media only screen and (min-width: 769px) {
  .chance_detaile .detaile_wrap + div {
    margin-top: 4rem;
  }
}
.chance_detaile .detaile_wrap + div.note_wrap {
  color: #fff;
}
.chance_detaile .detaile_wrap + div.note_wrap.bottom_note {
  text-shadow: 1px 1px 0 #31B2EF;
}
.chance_detaile .detaile_wrap + div + .cv_wrap {
  margin-top: 3rem;
}
@media only screen and (min-width: 769px) {
  .chance_detaile .detaile_wrap + div + .cv_wrap {
    margin-top: 4rem;
  }
}
.chance_detaile.chance_01 {
  background: url(../img/campaign/sakura_middle.svg) no-repeat top center/100%, #EE422E;
}
@media only screen and (min-width: 769px) {
  .chance_detaile.chance_01 {
    background: url(../img/campaign/sakura_middle.svg) no-repeat center/90%, #EE422E;
  }
}
.chance_detaile.chance_01 .ribbon span {
  background: #EE422E;
}
.chance_detaile.chance_01 .present .text .strong {
  color: #EE422E;
}
@media only screen and (min-width: 769px) {
  .chance_detaile.chance_01 .present .text .strong {
    font-size: 6rem;
  }
}
.chance_detaile.chance_01 .present + div {
  border-color: #FAC7C1;
}
.chance_detaile.chance_02 {
  background: url(../img/campaign/sakura_middle.svg) no-repeat bottom 4rem center/100%, url(../img/campaign/sakura_bottom.svg) no-repeat bottom -3rem left 24.8rem/25rem 13.753rem, #31B2EF;
}
@media only screen and (min-width: 769px) {
  .chance_detaile.chance_02 {
    background: url(../img/campaign/sakura_middle.svg) no-repeat bottom 4rem center/90%, url(../img/campaign/sakura_bottom.svg) no-repeat bottom left 105.3rem/60rem 33rem, #31B2EF;
  }
}
.chance_detaile.chance_02 .ribbon span {
  background: #31B2EF;
}
.chance_detaile.chance_02 .present .text .strong {
  color: #31B2EF;
}
@media only screen and (min-width: 769px) {
  .chance_detaile.chance_02 .present .text .strong {
    font-size: 4.4rem;
  }
}
.chance_detaile.chance_02 .present + div {
  border-color: #C2E8FB;
}
.chance_detaile.chance_02 .more_detaile .listening {
  position: relative;
}
.chance_detaile.chance_02 .more_detaile .listening::after {
  position: absolute;
  content: "";
  background: url(../img/campaign/listening.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 9rem;
  height: 10.8rem;
  bottom: 0;
  right: 0;
}
@media only screen and (min-width: 769px) {
  .chance_detaile.chance_02 .more_detaile .listening::after {
    width: 10rem;
    height: 12rem;
    right: 5rem;
  }
}

/**/
.application {
  padding: 4rem 3rem;
}
@media only screen and (min-width: 769px) {
  .application {
    padding: 6rem 27rem;
  }
}
.application h2 {
  margin-bottom: 2rem;
}
.application h2 figure {
  margin: 0 auto;
  width: 31.2rem;
}
@media only screen and (min-width: 769px) {
  .application h2 figure {
    width: 43.4rem;
  }
}
.application .applicatin_wrap {
  position: relative;
  background: #fff;
  border-radius: 0.5rem;
  font-size: 1.4rem;
  padding: 2rem 2rem 2.5rem;
}
@media only screen and (min-width: 769px) {
  .application .applicatin_wrap {
    font-size: 1.6rem;
    padding: 4rem 8rem;
  }
}
.application .applicatin_wrap .heading {
  color: #fff;
  font-weight: 600;
  line-height: 1;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 0.5rem;
  width: 6.4rem;
  height: 6.4rem;
  top: -1.5rem;
  left: -1.5rem;
  font-size: 1.4rem;
}
@media only screen and (min-width: 769px) {
  .application .applicatin_wrap .heading {
    width: 8rem;
    height: 8rem;
    top: -2rem;
    left: -2rem;
    font-size: 1.75rem;
  }
}
.application .applicatin_wrap .heading .number {
  font-size: 2rem;
}
@media only screen and (min-width: 769px) {
  .application .applicatin_wrap .heading .number {
    font-size: 2.5rem;
  }
}
.application .applicatin_wrap dl div dt {
  background: #002F6F;
  color: #fff;
  text-align: center;
  padding: 0.25em 0;
  border-radius: 0.2rem;
}
.application .applicatin_wrap dl div dt + dd {
  margin-top: 1em;
}
.application .applicatin_wrap dl div dd .how-to-entry {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 4.2rem;
}
@media only screen and (min-width: 769px) {
  .application .applicatin_wrap dl div dd .how-to-entry {
    gap: 5.2rem;
  }
}
.application .applicatin_wrap dl div dd .how-to-entry li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.application .applicatin_wrap dl div dd .how-to-entry li figure {
  width: 10.6rem;
  height: 10.6rem;
}
@media only screen and (min-width: 769px) {
  .application .applicatin_wrap dl div dd .how-to-entry li figure {
    width: 16.4rem;
    height: 16.4rem;
  }
}
.application .applicatin_wrap dl div dd .how-to-entry li p {
  font-size: 1.4rem;
  text-align: center;
  font-weight: bold;
  line-height: 1.4;
}
@media only screen and (min-width: 769px) {
  .application .applicatin_wrap dl div dd .how-to-entry li p {
    font-size: 1.6rem;
  }
}
.application .applicatin_wrap dl div dd .how-to-entry li:first-child {
  position: relative;
}
.application .applicatin_wrap dl div dd .how-to-entry li:first-child::before {
  content: "▶︎";
  font-size: 1.6rem;
  color: #EE422E;
  position: absolute;
  right: -3rem;
  top: 4.2rem;
}
@media only screen and (min-width: 769px) {
  .application .applicatin_wrap dl div dd .how-to-entry li:first-child::before {
    top: 7rem;
    right: -3.5rem;
  }
}
.application .applicatin_wrap dl div dd .how-to-entry + p {
  margin-top: 2rem;
}
.application .applicatin_wrap dl div dd .intro {
  text-align: center;
  font-weight: 600;
}
.application .applicatin_wrap dl div dd p + .note_wrap {
  margin-top: 1em;
}
.application .applicatin_wrap dl div dd .note_wrap {
  color: #888;
}
.application .applicatin_wrap dl div dd .note_wrap.center {
  text-align: center;
}
@media only screen and (min-width: 769px) {
  .application .applicatin_wrap dl div dd .note_wrap .note {
    font-size: 1.4rem;
  }
}
.application .applicatin_wrap dl div dd .note_wrap + p {
  margin-top: 1em;
}
.application .applicatin_wrap dl div dd .flex_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
@media only screen and (min-width: 769px) {
  .application .applicatin_wrap dl div dd .flex_wrap {
    gap: 1.5rem;
  }
}
.application .applicatin_wrap dl div dd .flex_wrap figure {
  width: 10.6rem;
}
@media only screen and (min-width: 769px) {
  .application .applicatin_wrap dl div dd .flex_wrap figure {
    width: 12.3rem;
  }
}
.application .applicatin_wrap dl div dd .flex_wrap .text_wrap {
  flex: 1;
}
@media only screen and (min-width: 769px) {
  .application .applicatin_wrap dl div dd .flex_wrap .text_wrap {
    flex: inherit;
  }
}
.application .applicatin_wrap dl div dd .flex_wrap + p {
  margin-top: 2rem;
}
@media only screen and (min-width: 769px) {
  .application .applicatin_wrap dl div dd .list {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.application .applicatin_wrap dl div dd .list ul {
  counter-reset: application_list;
}
.application .applicatin_wrap dl div dd .list ul li {
  font-weight: 600;
  padding-left: 2.5em;
  position: relative;
}
.application .applicatin_wrap dl div dd .list ul li::before {
  position: absolute;
  counter-increment: application_list;
  content: counter(application_list, decimal-leading-zero);
  color: #fff;
  font-family: "Open Sans", sans-serif;
  background: url(../img/campaign/sakura_blue.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  left: 0;
  top: -0.4rem;
}
@media only screen and (min-width: 769px) {
  .application .applicatin_wrap dl div dd .list ul li::before {
    width: 3.2rem;
    height: 3.2rem;
  }
}
.application .applicatin_wrap dl div dd .list ul li + li {
  margin-top: 1rem;
}
@media only screen and (min-width: 769px) {
  .application .applicatin_wrap dl div dd .list ul li + li {
    margin-top: 1.5rem;
  }
}
.application .applicatin_wrap dl div dd .posting {
  margin: 2rem auto -2.1rem;
  width: 20rem;
}
@media only screen and (min-width: 769px) {
  .application .applicatin_wrap dl div dd .posting {
    width: 30rem;
  }
}
.application .applicatin_wrap dl div + div {
  margin-top: 2rem;
}
.application .accordeion_wrap {
  margin-top: 3rem;
}
@media only screen and (min-width: 769px) {
  .application .accordeion_wrap {
    width: 80%;
    margin: 4rem auto 0;
  }
}
.application .accordeion_wrap .content_box + div {
  margin-top: 2rem;
}
.application .accordeion_wrap .content_box .accordion.detail {
  cursor: pointer;
  background: #EE422E;
  text-align: center;
  color: #fff;
  padding: 0.5em;
  font-size: 1.4rem;
}
@media only screen and (min-width: 769px) {
  .application .accordeion_wrap .content_box .accordion.detail {
    font-size: 1.6rem;
  }
}
.application .accordeion_wrap .content_box .box {
  padding: 1.5rem 2rem 2rem;
  background: #fff;
}
@media only screen and (min-width: 769px) {
  .application .accordeion_wrap .content_box .box {
    padding: 1.5rem 4rem 3rem;
  }
}
.application .accordeion_wrap .content_box .box .contents {
  font-size: 1.2rem;
}
@media only screen and (min-width: 769px) {
  .application .accordeion_wrap .content_box .box .contents {
    font-size: 1.4rem;
  }
}
.application .accordeion_wrap .content_box .box .contents .accordion_top {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.application .accordeion_wrap .content_box .box .contents .accordion_top figure {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.application .accordeion_wrap .content_box .box .contents .accordion_top p {
  display: inline-block;
  font-weight: bold;
  color: #EE422E;
  font-size: 1.4rem;
}
@media only screen and (min-width: 769px) {
  .application .accordeion_wrap .content_box .box .contents .accordion_top p {
    font-size: 1.6rem;
  }
}
.application .accordeion_wrap .content_box .box .contents .accordion_top.invalid p {
  color: #888;
}
.application .accordeion_wrap .content_box .box .contents dl div dt {
  background: #FAC7C1;
  text-align: center;
  color: #EE422E;
  padding: 0.2em 0;
  font-size: 1.4rem;
}
.application .accordeion_wrap .content_box .box .contents dl div dd {
  margin-top: 1rem;
}
.application .accordeion_wrap .content_box .box .contents dl div dd .note_wrap {
  margin-top: 1em;
  color: #888;
}
.application .accordeion_wrap .content_box .box .contents dl div + div {
  margin-top: 2rem;
}
.application .accordeion_wrap .content_box .box .contents.lottery .accordion_top p {
  color: #31B2EF;
}
.application .accordeion_wrap .content_box .box .contents.lottery dl div dt {
  background: #C2E8FB;
  color: #31B2EF;
}
.application .accordeion_wrap .content_box .box .contents + .contents {
  margin-top: 4rem;
}
.application .accordeion_wrap + div {
  margin-top: 3rem;
}
@media only screen and (min-width: 769px) {
  .application .accordeion_wrap + div {
    margin-top: 4rem;
  }
}
.application.application_01 {
  background: url(../img/campaign/sakura_top.svg) no-repeat top -1.2rem left -5.3rem/20rem 9.04rem, url(../img/campaign/sakura_middle.svg) no-repeat center/90%, #EE422E;
}
@media only screen and (min-width: 769px) {
  .application.application_01 {
    background: url(../img/campaign/sakura_top.svg) no-repeat top left -14.4rem/60rem 27rem, url(../img/campaign/sakura_middle.svg) no-repeat center/90%, #EE422E;
  }
}
.application.application_01 .heading {
  background: url(../img/campaign/benefits_01.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.application.application_02 {
  background: #31B2EF;
  background: url(../img/campaign/sakura_middle.svg) no-repeat bottom 4rem center/100%, url(../img/campaign/sakura_bottom.svg) no-repeat bottom -6rem left 24.8rem/25rem 13.753rem, #31B2EF;
}
@media only screen and (min-width: 769px) {
  .application.application_02 {
    background: url(../img/campaign/sakura_middle.svg) no-repeat bottom 4rem center/90%, url(../img/campaign/sakura_bottom.svg) no-repeat bottom left 105.3rem/60rem 33rem, #31B2EF;
  }
}
.application.application_02 .heading {
  background: url(../img/campaign/benefits_02.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.application .note_wrap {
  color: #fff;
}
.application .note_wrap.bottom_note {
  text-shadow: 1px 1px 0 #31B2EF;
}/*# sourceMappingURL=campaign.css.map */