@charset "UTF-8";
/* ------------------------------

	編集時の注意
	・必ず.scssから編集してコンパイルしてください。（直接.cssを編集しないでください）

------------------------------ */
/* ------------------------------
 Mixin
------------------------------ */
/* ------------------------------
 Html, Body
------------------------------ */
html {
  background: #f2f2f2;
  font-size: 2.6666666667vw;
}
@media (min-width: 901px) {
  html {
    font-size: 24px;
  }
}

body {
  margin: 0 auto;
  padding: 0;
  color: black;
  font-family: "Noto Sans JP", "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", sans-serif;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "palt" 1;
  max-width: 900px;
  overflow-x: hidden;
  background-color: white;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
  text-align: left;
}
.show-fixed-btn body {
  padding-bottom: 9rem;
}

#page-wrap {
  overflow: hidden;
}

/* ------------------------------
 Reset CSS
------------------------------ */
* {
  box-sizing: border-box;
}

main, article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary, picture {
  display: block;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li, form {
  margin: 0;
  padding: 0;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  color: currentColor;
}
button::-moz-focus-inner {
  border: 0;
}

ul {
  list-style-type: none;
}

img {
  vertical-align: bottom;
  border: 0;
  width: 100%;
}

/* ------------------------------
 link
------------------------------ */
a {
  outline: 0;
  color: currentColor;
  text-decoration: none;
}
a:hover {
  text-decoration: none;
  color: currentColor;
}
a.line-link {
  text-decoration: underline;
}

.underline {
  border-bottom: 0.1em solid currentColor;
}

.underline-dash {
  border-bottom: 0.1em dashed currentColor;
}

/* ------------------------------
 text & layout
------------------------------ */
h1, h2, h3, h4, h5, h6, p, ul, dl {
  line-height: 1.5;
}

sup {
  font-size: 0.7em;
}

.d-ib {
  display: inline-block;
}

.ind-1em {
  display: block;
  text-indent: -1em !important;
  padding-left: 1em;
}
.ind-1em::first-letter {
  font-feature-settings: normal;
}
.ind-1em > * {
  text-indent: 0;
}

.burasage {
  overflow: hidden;
  text-align: left;
}
.burasage > * {
  display: block;
  overflow: hidden;
}
.burasage > *:first-child {
  float: left;
  font-feature-settings: normal;
}

/* ------------------------------
 text-size
------------------------------ */
.txt-xlg {
  font-size: 2.5rem;
}

.txt-lg {
  font-size: 2rem;
}

.txt-md {
  font-size: 1.75rem;
}

.txt-rg {
  font-size: 1.5rem;
}

.txt-sm {
  font-size: 1.3rem;
}

.txt-xs {
  font-size: 1.15rem;
}

.txt-xxs {
  font-size: 1rem;
}

/* ------------------------------
 font-weight
------------------------------ */
.fw-normal {
  font-weight: 400 !important;
}

.fw-medium {
  font-weight: 500 !important;
}

.fw-bold {
  font-weight: 700 !important;
}

/* ------------------------------
 margin
------------------------------ */
.mt-0 {
  margin-top: 0 !important;
}

.mt-02em {
  margin-top: 0.2em !important;
}

.mt-05em {
  margin-top: 0.5em !important;
}

.mt-1em {
  margin-top: 1em !important;
}

.mt-2em {
  margin-top: 2em !important;
}

.mt-3em {
  margin-top: 3em !important;
}

.mt-4em {
  margin-top: 4em !important;
}

.mt-5em {
  margin-top: 5em !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-05em {
  margin-bottom: 0.5em !important;
}

.mb-1em {
  margin-bottom: 1em !important;
}

.mb-2em {
  margin-bottom: 2em !important;
}

.mb-3em {
  margin-bottom: 3em !important;
}

.mb-4em {
  margin-bottom: 4em !important;
}

.mb-5em {
  margin-bottom: 5em !important;
}

.m-auto {
  margin: auto !important;
}

/* ------------------------------
 padding
------------------------------ */
.side-padding {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.side-padding-w {
  padding-left: 3rem;
  padding-right: 3rem;
}

.pt-0 {
  padding-top: 0 !important;
}

.pt-05em {
  padding-top: 0.5em !important;
}

.pt-1em {
  padding-top: 1em !important;
}

.pt-2em {
  padding-top: 2em !important;
}

.pt-3em {
  padding-top: 3em !important;
}

.pt-4em {
  padding-top: 4em !important;
}

.pt-5em {
  padding-top: 5em !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pb-05em {
  padding-bottom: 0.5em !important;
}

.pb-1em {
  padding-bottom: 1em !important;
}

.pb-2em {
  padding-bottom: 2em !important;
}

.pb-3em {
  padding-bottom: 3em !important;
}

.pb-4em {
  padding-bottom: 4em !important;
}

.pb-5em {
  padding-bottom: 5em !important;
}

/* ------------------------------
 line-height
------------------------------ */
.lh-12 {
  line-height: 1.2;
}

/* ------------------------------
 text-align
------------------------------ */
.align-left {
  text-align: left;
}

.align-center {
  text-align: center;
}

.align-right {
  text-align: right;
}

.justify {
  text-align: justify;
}

/* ------------------------------
 text-color
------------------------------ */
.color-cyan {
  color: #009FE5;
}

.color-dark-cyan {
  color: #213552;
}

.color-orange {
  color: #ED5035;
}

.color-grey {
  color: #666;
}

.color-white {
  color: white;
}

.color-black {
  color: black;
}

.color-bordeaux {
  color: #700505;
}

/* ------------------------------
 bg-color
------------------------------ */
.bg-light-cyan {
  background-color: #57D7FF;
}

.bg-pale-cyan {
  background-color: #E4F7FF;
}

.bg-pale-orange {
  background-color: #ffdbab;
}

.bg-cream {
  background-color: #fff0db;
}

.bg-pale-orange {
  background-color: #ffdbab;
}

.bg-light-orange {
  background-color: #ffad41;
}

.bg-dark-orange {
  background-color: #ff5e00;
}

/* ------------------------------
 box
------------------------------ */
.box-white {
  background-color: white;
  border-radius: 1rem;
  padding: 1.5rem;
}

.box-yellow {
  background-color: #FFFDE3;
  border: 0.15rem #213552 solid;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0.2rem 0.2rem 0 #213552;
}

/* ------------------------------
 icon-step
------------------------------ */
.icon-step {
  width: 10rem;
  margin: auto;
}

.icon-step-arrow {
  width: 2.4rem;
  margin: 0.5rem auto;
}

/* ------------------------------
 entry-kv
------------------------------ */
.entry-kv-cam {
  background-color: #ffefd1;
  margin: 1.5rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.entry-kv-period {
  font-weight: bold;
  text-align: center;
  margin: 0.5em 0;
}

/* ------------------------------
 quiz-join
------------------------------ */
.quiz-join-baloon {
  width: 26rem;
  margin: 0 auto 0.5rem;
}

/* ------------------------------
 quiz-step
------------------------------ */
.quiz-step-icon-smpr {
  width: 8rem;
  margin: auto;
}
.quiz-step-download {
  display: flex;
  justify-content: space-between;
}
.quiz-step-download li {
  width: calc(50% - 0.5rem);
}

/* ------------------------------
 quiz-sec
------------------------------ */
.quiz-sec {
  color: #213552;
}
.quiz-sec-icon {
  width: 7rem;
  margin: auto;
}
.quiz-sec-ttl {
  display: flex;
  align-items: center;
}
.quiz-sec-ttl-icon {
  width: 5rem;
  flex-shrink: 0;
  margin-right: 1rem;
}

.quiz-radio-btn {
  display: none;
}
.quiz-radio-btn + * {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.quiz-radio-btn + *::before {
  content: "";
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 0.5rem;
  background-image: url(https://prcp.pass.auone.jp/gpl/202402_taikai/img/icon-radio-off.png);
  background-size: 80% auto;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  flex-shrink: 0;
}
.quiz-radio-btn:checked + *::before {
  background-image: url(https://prcp.pass.auone.jp/gpl/202402_taikai/img/icon-radio-on.png);
}

/* ------------------------------
 checked-all
------------------------------ */
html:not(.is-checked-all) .show-checked-all {
  display: none;
}

html.is-checked-all .hide-checked-all {
  display: none;
}

/* ------------------------------
 answer
------------------------------ */
html:not(.show-answer) #ans-contents {
  height: 0;
  pointer-events: none;
}

html.show-answer #quiz-contents {
  display: none;
}

#ans-contents {
  overflow: hidden;
}
#ans-contents:not(.correct) .show-correct {
  display: none;
}
#ans-contents.correct .show-incorrect {
  display: none;
}
#ans-contents .ans-list li:not(.checked) {
  display: none;
}
#ans-contents .ans-box-ttl {
  color: #ED5035;
  text-align: center;
}
#ans-contents .ans-box-ttl::before {
  content: "";
  display: block;
  line-height: 1;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 0.5rem;
  background: url(https://prcp.pass.auone.jp/gpl/202402_taikai/img/icon-incorrect.png) no-repeat 50% 50%;
  background-size: contain;
}
#ans-contents .ans-box-ttl.correct::before {
  background-image: url(https://prcp.pass.auone.jp/gpl/202402_taikai/img/icon-correct.png);
}

/* ------------------------------
 aupay-step
------------------------------ */
.aupay-step-ttl {
  width: 20rem;
  margin: auto;
}

/* ------------------------------
 app-dl-sec
------------------------------ */
.app-dl-item:not(:last-child) {
  border-bottom: 0.15rem dashed #009FE5;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}
.app-dl-item dd {
  background: #F7F7F7;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 0.5rem;
  padding: 0.5rem;
  text-align: left;
  margin-top: 0.5rem;
}
.app-dl-item-icon {
  width: 6rem;
  margin-right: 1rem;
  flex-shrink: 0;
}
.app-dl-item-txt {
  font-weight: bold;
  color: #213552;
}
.app-dl-item-btn {
  width: 9.5rem;
  flex-shrink: 0;
  margin-left: auto;
}

/* ------------------------------
 notes
------------------------------ */
.notes-ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  background: black;
  color: white;
}

/* ------------------------------
 footer
------------------------------ */
.footer {
  text-align: center;
  border-top: #CCC 1px solid;
  padding: 1rem;
  margin: 0;
}
.footer .optout {
  font-size: 1rem;
}
.footer .copyright {
  font-size: 0.9rem;
  color: #666;
}

/* ------------------------------
 Fixed-btn
------------------------------ */
#fixed-btn {
  background: rgba(255, 255, 255, 0.8);
  padding: 0.5rem 1.5rem;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  max-width: 900px;
  z-index: 100;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
  -webkit-clip-path: inset(-1rem 0 0 0);
          clip-path: inset(-1rem 0 0 0);
  opacity: 0;
  transform: translateY(50%);
  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: opacity, transform;
}
.show-fixed-btn #fixed-btn {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ------------------------------
 goup
------------------------------ */
.goup {
  position: fixed;
  right: 0;
  bottom: 1rem;
  max-width: 20%;
  margin: auto;
  z-index: 100;
  text-align: center;
}

/* ------------------------------
 scroll-in
------------------------------ */
.scroll-in.fade-in, .modal-in.fade-in {
  opacity: 0;
  transition: 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.scroll-in.fade-in.appeared, .modal-in.fade-in.appeared {
  opacity: 1;
}
.scroll-in.up-in, .modal-in.up-in {
  opacity: 0;
  transform: translateY(3rem);
  transition: 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.scroll-in.up-in.appeared, .modal-in.up-in.appeared {
  opacity: 1;
  transform: translateY(0);
}
.scroll-in.popup-in, .modal-in.popup-in {
  opacity: 0;
  transform: scale(0.9);
  transform-origin: 50% 100%;
  transition: 0.8s cubic-bezier(0.22, 1.5, 0.8, 1);
}
.scroll-in.popup-in.appeared, .modal-in.popup-in.appeared {
  opacity: 1;
  transform: scale(1);
}
.scroll-in.zoom-in, .modal-in.zoom-in {
  opacity: 0;
  transform: scale(0.4);
  transform-origin: 50% 50%;
  transition: 0.8s cubic-bezier(0.22, 1.5, 0.8, 1);
}
.scroll-in.zoom-in.appeared, .modal-in.zoom-in.appeared {
  opacity: 1;
  transform: scale(1);
}

/* ------------------------------
 device
------------------------------ */
html.view-ios .for-android:not(.for-pc),
html.view-ios .for-pc:not(.for-android) {
  display: none !important;
}

html.view-android .for-ios:not(.for-pc),
html.view-android .for-pc:not(.for-ios) {
  display: none !important;
}

html.view-pc .for-ios:not(.for-pc),
html.view-pc .for-android:not(.for-pc) {
  display: none !important;
}

/* ------------------------------
 GAMPLA
------------------------------ */
div.campaign__container-floating-footer {
  display: none;
}

.campaign__container {
  max-width: 900px;
}

.alert {
  margin-bottom: 0;
  border-radius: 0;
}

html:not(.is-entry-done) .show-entry-done {
  display: none;
}

html.is-entry-done .hide-entry-done {
  display: none;
}