@charset 'utf-8';

@media screen and (max-width: 960px) {

html,
body,
#wrapper,
#wrap-inner,
#contents
{
    height: 100%;
}
body {
    min-height: 100%;
}
.container {
    min-height: 100%;
}

.sp-none {
    display: none !important;
}

img {
    width: 100%;
}

#wrapper {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}
header {
    box-sizing: border-box;
    max-width: none;
    width: 100%;
    min-width: 0;
    position: static;
}
header .header {
	box-sizing: border-box;
	max-width: none;
	width: 100%;
	padding: 1em;
	margin: auto;
    background: transparent;
    color: #125126;
}
header .header a {
    color: #fff;
}
#contents {
    box-sizing: border-box;
    width: 100%;
}

#contents section {
    box-sizing: border-box;
    margin: 2em auto;
    width: 90%;
}

/* coupon {{{ */

.coupon-list {
}
.coupon-list li {
    margin-bottom: 3em;
    text-align: center;
}
button.btn {
    box-sizing: border-box;
    display: block;
    width: 80vw;
    color: #fff;
    font-size: 4.6vw;
    padding: 2.6vw;
    border-radius: 8.5vw;
    margin: 0.5em auto 1em;

    background: linear-gradient(180deg, #23a04c, #125126);
    border: 1px solid #125126;
    filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.2));
}
button.btn.disable {
    background: #e8e8e8;
    color: #fff;
    cursor: default;
    filter: none;
    border: none;
}
button.btn.back {
    background: #ccc;
    color: #fff;
    width: 10em;
}
h4 {
    text-align: center;
    margin-bottom: 1em;
    font-weight: bold;
    font-size: 1.4em;
}
label {
    display: block;
}
input[type=text],
input[type=password] {
    box-sizing: border-box;
    width: 100%;
    border-radius: 5px;
    font-size: 1em;
    padding: 0.5em;
    border: 1px solid #aaa;
}

.form-list {
}
.form-list .item {
    margin-bottom: 2em;
}
.user_register .ttl-wrap {
    margin-bottom: 2em;
}
.user_register .ttl {
    box-sizing: border-box;
    font-size: 3.4vw;
    font-weight: normal;
}
.user_register .desc {
    font-size: 2.8vw;
    text-align: center;
}
.user_register .desc.left {
    margin-top: 0.2em;
    text-align: left;
}
.user_register input[type=text],
.user_register input[type=password] {
    border-top: none;
    border-right: none;
    border-left: none;
}

/* }}} */

/* game {{{ */

.container.game {
}
.game-wrap {
    position: relative;
    width: 100%;
    min-height: 100%;
    background: url(/images/main_bg.dd40ffa4_2.jpg) center top no-repeat;
    background-size: cover;
    box-sizing: border-box;
}
.game-wrap.aim {
    background: url(/images/aimerfeel/bg.png) center top no-repeat;
    background-size: cover;
    min-height: 100%;
    width: 100%;
}
.game-wrap .message {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    text-align: center;
}
.capital-wrap {
    padding: 0.4em 0;
}
.capital {
    box-sizing: border-box;
    font-size: 3em;
    color: #fff;
    width: 1.6em;
    height: 1.6em;
    border-radius: 0.8em;
    line-height: 1.6em;
    background: #feda00;
    margin: 0 auto;
    text-align: center;
}
.game-wrap .desc {
    display: block;
    width: 70%;
    margin: 0.4em auto;
}

.game-wrap .roulette {
    position: relative;
    padding-top: 86vw;
}
.game-wrap.aim .roulette {
    top: 8vw;
    padding-top: 100vw;
    pointer-events: none;
}
.game-wrap .roulette .bg  {
    position: absolute;
    width: 80vw;
    left: 10vw;
    z-index: 1;
    top: 0;
    /* transform: translateX(-50%) translateY(-50%); */
}
.game-wrap .roulette .front  {
    position: absolute;
    width: 80vw;
    left: 10vw;
    z-index: 2;
    top: 0;
    /* transform: translateX(-50%) translateY(-50%); */
}
.game-wrap .roulette .pin  {
    position: absolute;
    width: 10vw;
    left: 50%;
    z-index: 3;
    top: 50%;
    transform: translateX(-50%) translateY(-90%);
}
.game-wrap.aim .roulette .pin  {
    top: -3vw;
    transform: translateX(-50%) translateY(0);
}
.game-wrap .btn-wrap {
    width: 50%;
    margin: 0 auto;
}
.btn-wrap .btng {
    width: 48vw;
    text-align: center;
}
.game-wrap .btn-wrap .bg {
}
.game-wrap .btn-wrap .play {
    font-size: 1.4em;
    letter-spacing: 0.2em;
    /*
    position: absolute;
    color: #fff;
    font-size: 1.4em;
    letter-spacing: 0.2em;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    */
}
.game-desc {
    box-sizing: border-box;
    color: #125126;
    width: 70%;
    margin: 1em auto;
}
.game-desc a {
    text-align: center;
    color: #125126;
    text-decoration: underline;
}
.game-desc.aim a {
    color: #fff;
}


/* }}} */
/* mypage {{{ */
.mypage .username {
    text-align: center;
    font-size: 1.8em;
}
.mypage .note {
    text-align: center;
    font-size: 0.8em;
}
.mypage .point-wrap {
    text-align: center;
    margin: 1em auto 2em;
}
.mypage .point-wrap .point {
    font-size: 2.2em;
}
.mypage .point-wrap .star-wrap {
    display: inline-block;
    width: 5vw;
}

.mypage .bottom-link {
    margin-top: 8em;
    text-align: center;
}
.mypage .bottom-link .btn {
    box-sizing: border-box;
    display: block;
    width: 80vw;
    font-size: 4.6vw;
    padding: 2.6vw;
    border-radius: 8.5vw;
    margin: 0 auto 1em;
}
.mypage.home .img-wrap {
    position: relative;
    margin-bottom: 1em;
}
.mypage.home .img-wrap .overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-weight: bold;

    display:-webkit-flex;
    display:-ms-flexbox;
    display: flex;
    -ms-flex-pack:center;
    -webkit-justify-content: center;
    justify-content:center;
    align-items: center;
}
.mypage.home .img-wrap .overlay .text {
    box-sizing: border-box;
    /*
    border: 2px solid #fff;
    border-radius: 8px;
    */
    padding: 0.6em;
    font-size: 2em;
}
.mypage .btn-select {
}
.mypage .inquiry {
    color: #125126;
    text-decoration: underline;
    font-size: 3.6vw;
}


/* }}} */
/* modal {{{ */

.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
    z-index:15;
}
.modal__bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal__content{
    background: #fff;
    left: 50%;
    padding: 20px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 60%;
    border-radius: 10px;
}
.modal__content .ttl {
    font-size: 1.2em;
    text-align: center;
    margin-bottom: 1em;
}
.modal__content .body {
    text-align: center;
    color: #333;
}
.modal__content .modal-img {
    margin: 1em auto;
    width: 80%;
}
.modal__content .register-btn {
    font-size: 3.6vw;
    padding: 0.8em 1em;
    display: block;
    margin: 1em auto;
    text-align: center;
}
.modal__content .point-wrap {
    position: relative;
    width: 80%;
    margin: 1em auto;
}
.modal__content .point-wrap .point {
    position: absolute;
    left: 50%;
    bottom: 8vw;
    font-size: 15vw;
    color: #fff;
    font-weight: bold;
    transform: translateX(-50%);
}

.modal__content.aim {
    background: url(/images/aimerfeel/modal_bg.png) no-repeat center center;
    height: 60vh;
    background-size: cover;

}
.modal__content.aim .modal__prize {
    width: 100%;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    padding-top: 32vw;
}
.modal__content.aim .modal__prize img {
    width: 32vw;
}
.modal__content.aim .modal__text {
    margin-top: 8vw;
}
.modal__content.aim .btn-green-wrap {
    width: 100%;
}

/* }}} */

/* lot {{{ */
.lot-wrap {
    position: static;
    display: block;
}
.lot .mv {
}
.lot .mv  {
    width: 100%;
    vertical-align: bottom;
    /*
    margin-bottom: -8vw;
    z-index: 5;
    */
}
.lot-content {
    /* position: relative; */
    position: static;
    width: 100%;
    min-height: 100%;
    background: url(/images/lot/bg.png) left top;
    background-repeat: repeat;
    background-size: 100vw;
    /* z-index: -1; */
}
.lot-content img {
    vertical-align: bottom;
}
.lot-content .inner {
    padding: 2em 0;
    width: 94%;
    margin: 0 auto;
    position: static;
    z-index: 0;
}
.lot-content .info-wrap {
    box-sizing: border-box;
    padding: 1em;
    text-align: center;
    background: url(/images/lot/board_bg.png) center top repeat-y;
    background-size: 100%;
    text-align: left;
}
.lot-content .info-wrap-bottom {
    vertical-align: top;
}
.lot-info {
    background: #fff;
    padding: 1em;
    border-radius: 10px;
    margin: 1em 0;
}
.link-btn {
    box-sizing: border-box;
    border-radius: 10px;
    color: #fff;
    margin: 1em 0;
    font-weight: bold;
    text-align: center;
    width: 100%;
    height: 16.3vw;

    background: url(/images/lot/btn.png) center top no-repeat;
    background-size: 100%;

    display:-webkit-flex;
    display:-ms-flexbox;
    display: flex;
    -ms-flex-pack:center;
    -webkit-justify-content: center;
    justify-content:center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.link-btn .text {
    box-sizing: border-box;
    width: 100%;
}
.link-btn .btn-right {
    box-sizing: border-box;
    width: 10.5vw;
}
.lot-number {
    background: #e5e5e5;
    font-size: 1.4em;
    font-weight: bold;
    text-align: center;
    box-sizing: border-box;
    padding: 1em;
    border-radius: 10px;
    box-sizing: border-box;
}
.get-lot-wrap {
    display: block;
    width: 60%;
    margin: 1em auto;
}
.lot.list.user a.ticket {
    color: #000;
}
.lot-list {
    margin-bottom: 1em;
}
.lot-list .dt {
    color: #777;
    font-size: 0.85em;
}
.lot-list .lot-detail {

    background: url(/images/lot/ticket.png) center top no-repeat;
    background-size: 100%;
    width: 100%;
    height: 40vw;

    border-radius: 10px;
    padding: 1em 1.2em 1em 2em;
    box-sizing: border-box;
    margin-top 0.2em;

    display:-webkit-flex;
    display:-ms-flexbox;
    display: flex;
    -ms-flex-pack:justify;
    -webkit-justify-content:space-between;
    justify-content:space-between;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

}
.lot-list .lot-detail .wrap {
    width: 75%;
}
.lot-list .lot-detail .wrap2 {
    margin-top: 9vw;
}
.lot-list .lot-detail .desc {
    font-size: 0.75em;
}
.lot-list .lot-detail .number {
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 0.2em;
}
.lot-list .lot-detail .lot-result {
    display:-webkit-flex;
    display:-ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

}
.lot-list .lot-detail .lot-result .ok {
    border: 2px solid #e86066;
    color: #e86066;
    background: #fff195;
    font-weight: bold;
    font-size: 1.2em;
    line-height: 3em;
    text-align: center;
    border-radius: 1.5em;
    width: 3em;
    height: 3em;
}
.lot-list .lot-detail .lot-result .ng {
    background: #eee;
    color: #adadad;
    font-weight: bold;
    font-size: 1.2em;
    line-height: 3em;
    text-align: center;
    border-radius: 1.5em;
    width: 3em;
    height: 3em;
}
.lot-content .to-home {
    color: #777;
    background: #fff;
    display: block;
    width: 10em;
    margin: 3em auto;
    padding: 0.4em 0;
    text-align: center;
    border-radius: 3em;
}
.lot-content .to-home img {
    display: inline-block;
    width: 5vw;
    vertical-align: top;
}
.lot-modal-btn {
    display: block;
    width: 100%;
    margin-top: 1em;
    text-align: center;
}
.lot-content .rank {
    box-sizing: border-box;
    display: inline-block;
    background: #c5c5c5;
    color: #fff;
    padding: 0.2em;
    text-align: center;
    width: 4em;
    border-radius: 1em;
    margin-bottom: 0.25em;
}
.lot-content .rank.rank3 {
    background: #6CA324;
}
.lot-content .rank.rank2 {
    background: #e9533b;
}
.lot-content .img-rank1 {
    display: block;
    width: 6em;
    margin-left: -0.8em;
}

/* }}} */

/* quiz {{{ */

.quiz {
}
.quiz .btn {
    display: inline-block;
    padding: 0.2em 2em;
    position: relative;
    border-radius: 1.4em;
}
.quiz .btn:after {
    content: "";
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    width: 0.5em;
    height: 0.5em;
    position: absolute;
    right: 1em;
    top: 45%;
    transform: rotate(45deg) translateY(-50%);
}
.quiz .btn.quiz-start {
    background-color:#ff614e;
    color: #fff;
}
.quiz .qa-area {
    background: url(../images/quiz/qbg.png) center top no-repeat;
    width: 82%;
    margin: 2em auto;
    min-height: 117vw;
    background-size: cover;
    box-sizing: border-box;
    padding: 2em;
}
.quiz .qa-area .quiz_number {
    text-align: center;
    font-weight: bold;
}
.quiz .qa-area .question {
    margin-top: 1em;
}
.quiz .qa-area .answer-wrap {
    margin-top: 2em;
}
.quiz .qa-area .answer-wrap .answers {
}
.quiz .qa-area .answer-wrap .answers li {
    text-align: center;
    margin-bottom: 2em;
}
.quiz .qa-area .answer-wrap .answers li:last-child {
    margin-bottom: 0;
}
.quiz .btn.answer {
    border: 2px solid #ff614e;
    padding: 1em 2em;
    color: #000;
    width: 15em;
    box-sizing: border-box;
    border-radius: 2em;
}
.quiz .btn.answer:after {
    content: none;
}
.quiz .btn.answer.selected {
    background: #ff614e;
    color: #fff;
}
.quiz .timer-wrap {
    width: 82%;
    margin: 1em auto;
}

.quiz .result-wrap {
    background: #1a3348;
    color: #fff;
    box-sizing: border-box;
    padding: 2em 1em;
}
.quiz .result-wrap .quiz_number {
    font-size: 1.2em;
    font-weight: bold;
}
.quiz .result-wrap .question {
    margin-top: 0.4em;
    padding: 0 2em;
}
.quiz .text-ok {
    font-size: 1.4em;
    font-weight: bold;
    margin: 1em 0;
}
.quiz .text-ng {
    font-size: 1.4em;
    font-weight: bold;
    color: #cc0000;
    margin: 1em 0;
}
.quiz.result .quiz-content img {
    width: 50vw;
    margin-top: 3em;
}
.quiz .btn.quiz-next {
    background-color:#1a3348;
    color: #fff;
}
.quiz.result .quiz-content img.star {
    width: 14px;
    margin: 0;
}


/* }}} */

/* stamp {{{ */

#contents .stamp section {
    margin: 0;
    width: 96%;
    margin: 0 auto;
}

.container.stamp {
    min-height: 100vh;
    background: url(../images/stamp/bg.png) center top no-repeat;
    background-size: cover;
    color: #fff;
}

.stamp-content .inner {
    width: 94%;
    margin: 0 auto;
    box-sizing: border-box;
    padding-top: 3em;
}
.stamp-content .shop-ttl {
    font-weight: bold;
    font-size: 2em;
    text-align: center;
    color: #fff;
}
.stamp-content .campaign-ttl {
    margin-top: 0.2em;
    font-weight: bold;
    font-size: 1.4em;
    text-align: center;
    color: #fff;
}

.stamp-content .info-wrap {
    margin: 4em 0 2em;
    text-align: center;
}

.stamp-content .desc {
    background: #008B89;
    border-radius: 20px;
    box-sizing: border-box;
    width: 100%;
    padding: 1em;
    font-size: 0.85em;
    margin-bottom: 2em;
}
.stamp .btn-wrap {
    display:-webkit-flex;
    display:-ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack:center;
    -webkit-justify-content: center;
    justify-content:center;
}
.stamp .btn{
    text-align: center;
    background: linear-gradient(180deg, #b0e6d7, #70c8c9);
    border: 1px solid #fff;
    box-sizing: border-box;
    border-radius: 2em;
    padding: 0.4em 0;
    color: #fff;
    margin: 0 0.2em;
}
.stamp button.btn {
}

.stamp_login .ttl-wrap {
    padding-top: 5em;
}
.stamp_login .ttl-wrap .ttl {
    font-weight: bold;
    font-size: 2em;
}

.stamp-detail {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 1em;
  min-width: 120px;
  max-width: 100%;
  color: #fff;
  font-size: 16px;
  background: #fff;
  width: 100%;
  border-radius: 10px;
  box-sizing: border-box;
}
.stamp-detail:before {
  content: "";
  position: absolute;
  top: -29px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-bottom: 15px solid #fff;
}
.stamp-detail span {
    color: #008B89;
}

.stamp.stmap_card {
}
.stamp.stamp_card  .point-wrap {
    margin: 2em auto 1em;
    width: 20vw;
    height: 20vw;
}
.stamp.stamp_card  .point-wrap .point {
    border-radius: 20vw;
    background: #fff;
    width: 100%;
    height: 100%;
    position: relative;
}
.stamp.stamp_card  .point-wrap .point .stamp_point {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: #6AD7E5;
    font-size: 2em;
    font-weight: bold;
}
.stamp .card-wrap {
    position: relative;
}
.stamp .card-wrap .card_bg {
    width: 100%;
}
.stamp .card-wrap .card_bg .sheet{
    width: 100%;
}
.stamp .card-wrap .stamp_bg {
    position: absolute;
    left: 6vw;
    top: 11vw;
    width: 82vw;
}
/* cssで調整する箇所 */
.stamp .card-wrap .stamp_bg {
}
.stamp .stamp_bg .stamp {
    width: 14vw;
    box-sizing: border-box;
    margin-right: 1.02vw;
    margin-bottom: 1.5vw;
    transform: scale(150%, 150%);
    opacity: 0;
    transition: opacity .5s, transform .5s;
}
.stamp .stamp_bg .stamp.current {
    transform: scale(100%, 100%);
    opacity: 1; 
}
.stamp .stamp_bg .stamp.add {
    transform: scale(100%, 100%);
    opacity: 1; 
}

.stamp.user .back-link {
    margin-left: 2em;
}
.stamp.user .back-link a {
    color: #fff;
    display: inline-block;
    position: relative;
}
.stamp.user .back-link a:before {
    content: "";
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    width: 0.5em;
    height: 0.5em;
    position: absolute;
    left: -0.5em;
    top: 50%;
    transform: rotate(-45deg) translateY(-55%);
}
/* }}} */

/* win {{{ */

.win {
    color: #fff;
}
.win a {
    color: #fff;
}
.container.win {
    background: #ff0000;
    background: linear-gradient(180deg, #0c1019 0%, #3f5c8e 50%, #0c1019 100%);
    height: 100vh;
}
.win .logo-wrap {
    background: #fff;
    width: 100%;
    padding: 0;
}
.win .logo-wrap img {
    display: block;
    width: 100%;
    margin: 0 auto;
}
.win .capital-wrap {
    padding: 0;
}
.win .game-wrap {
    background: none;
}
.win .campaign-ttl {
    text-align: center;
    margin-top: 0.5em;
}
.win .card-content {
    margin: 0 0 2em;
    width: 100%;
}
.win .card-content img {
    vertical-align: bottom;
}
.win .card-inner {
    height: 80vh; 
    width: 100%;
    background: #30805b;
    box-sizing: border-box;

    background-image: -webkit-radial-gradient(#ddd, #30805b);
    background-image: radial-gradient(#ddd, #30805b);
    color: #fff;
    position: relative;
}
.win .card-inner .text-wrap {
    position: absolute;
    top: 10vw;
    left: 50%;
    transform: translateX(-50%);
}
.win .card-inner .text-wrap img {
    width: 80vw;
}

.win .card-line {
    padding-top: 40vw;
    width: 96vw;
    box-sizing: border-box;
    margin: 0 auto;
}

.win .card-list {
    display:-webkit-flex;
    display:-ms-flexbox;
    display: flex;
    -ms-flex-pack:center;
    -webkit-justify-content: center;
    justify-content:center;
    /*
    -ms-flex-pack:justify;
    -webkit-justify-content:space-between;
    justify-content:space-between;
    */
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    box-sizing: border-box;
    width: 100%;
}
.win .card-list .item {
    box-sizing: border-box;
    /* 4枚 */
    width: 20%;
    margin: 1em 0.4em;
    /* 5枚 */
    /* width: 22%; */
    /* margin: 1em 0.5em; */

}

/* 4枚 */
.win .card-list .card1 {
    transform: translate(36vw, 44vw);
    transition: transform 1s cubic-bezier(0.68,-.55,.265,1.55);
}
.win .card-list .card2 {
    transform: translate(12vw, 43.5vw);
    transition: transform 1s cubic-bezier(0.68,-.55,.265,1.55);
}
.win .card-list .card3 {
    transform: translate(-12vw, 43vw);
    transition: transform 1s cubic-bezier(0.68,-.55,.265,1.55);
}
.win .card-list .card4 {
    transform: translate(-36vw, 42.5vw);
    transition: transform 1s cubic-bezier(0.68,-.55,.265,1.55);
}

/* 3枚,5枚 */
/*
.win .card-list .card1 {
    transform: translate(36vw, 44vw);
    transition: transform 1s cubic-bezier(0.68,-.55,.265,1.55);
}
.win .card-list .card2 {
    transform: translate(2vw, 43.5vw);
    transition: transform 1s cubic-bezier(0.68,-.55,.265,1.55);
}
.win .card-list .card3 {
    transform: translate(-33vw, 43vw);
    transition: transform 1s cubic-bezier(0.68,-.55,.265,1.55);
}
*/


/*
.win .card-list .card4 {
    transform: translate(-36vw, 42.5vw);
    transition: transform 1s cubic-bezier(0.68,-.55,.265,1.55);
}
.win .card-list .card5 {
    transform: translate(-36vw, 42.5vw);
    transition: transform 1s cubic-bezier(0.68,-.55,.265,1.55);
}
*/



.win .card-list .card1.spread {
    transform: translate(0, 0);
}
.win .card-list .card2.spread {
    transform: translate(0, 0);
}
.win .card-list .card3.spread {
    transform: translate(0, 0);
}
.win .card-list .card4.spread {
    transform: translate(0, 0);
}
.win .card-list .card4.spread {
    transform: translate(0, 0);
}





.js-modal.card {
}
.js-modal.card .modal__content {
    background: #4a8c75;
}
.js-modal.card .close-btn {
    margin: 0 0 0 auto;
}
.js-modal.card .close-btn a {
    display: block;
    width: 12vw;
}
.js-modal.card .close-btn .close-img {
}

.js-modal.card .body {
    position: relative;
}
.js-modal.card .body .fun {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
.js-modal.card .body .card {
    width: 75%;
    margin: 0 auto;
}
.js-modal.card .body .prize {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translateX(-50%);
    z-index: 5;
    width: 30vw;
}
.js-modal.card .body .prize span {
    font-size: 3em;
    font-weight: bold;
    color: #000;
}


/* }}} */

/* win kuji {{{ */

.win {
    color: #fff;
}
.win a {
    color: #fff;
}
.container.win {
    background: #c93a3a;
    height: 100vh;
}
.win .logo-wrap {
    background: #fff;
    width: 100%;
    padding: 0;
}
.win .logo-wrap img {
    display: block;
    width: 100%;
    margin: 0 auto;
}
.win .capital-wrap {
    padding: 0;
}
.win .game-wrap {
    background: none;
}
.win .campaign-ttl {
    text-align: center;
    margin-top: 0.5em;
}
.win .kuji-content {
    margin: 0;
    background: url(/images/kuji/bg.png) left top no-repeat;
    background-size: cover;
    height: 90vh;
    width: 100%;
}
.win .kuji-inner {
    padding: 3em 0;
    width: 100%;
}
.win .kuji-inner .btn-wrap,
.win .kuji-inner .img-wrap {
    display:-webkit-flex;
    display:-ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack:center;
    -webkit-justify-content: center;
    justify-content:center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.win .kuji-inner .img-wrap img {
    width: 55vw;
}
.win .kuji-inner .btn-wrap {
    margin: 2em auto 0;
}
.win .kuji-inner .btn-wrap img {
    width: 50vw;
}
.win .kuji-inner .img-wrap .image.shake {
    animation-name: kujishake;
    animation-duration: 500ms;
    animation-timing-function: ease-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes kujishake {
    0% {
        transform: translate(-2%, 0);
    }
    20% {
        transform: translate(2%, 0);
    }
    40% {
        transform: translate(-2%, 0);
    }
    60% {
        transform: translate(2%, 0);
    }
    80% {
        transform: translate(-2%, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}


.js-modal.card {
}
.js-modal.card .modal__content {
    background: #4a8c75;
}
.js-modal.card .close-btn {
    margin: 0 0 0 auto;
}
.js-modal.card .close-btn a {
    display: block;
    width: 12vw;
}
.js-modal.card .close-btn .close-img {
}

.js-modal.card .body {
    position: relative;
}
.js-modal.card .body .fun {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
.js-modal.card .body .card {
    width: 75%;
    margin: 0 auto;
}
.js-modal.card .body .prize {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translateX(-50%);
    z-index: 5;
    width: 30vw;
}
.js-modal.card .body .prize span {
    font-size: 3em;
    font-weight: bold;
    color: #000;
}

.kuji .modal__content{
    background: rgba(0,0,0,0);
    left: 50%;
    padding: 5px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 90%;
    border-radius: none;
}
.js-modal.kuji .close-btn {
    margin: 0 0 0 auto;
    display:-webkit-flex;
    display:-ms-flexbox;
    display: flex;
    -ms-flex-pack:flex-end;
    -webkit-justify-content:flex-end;
    justify-content:flex-end;

}
.js-modal.kuji .close-btn a {
    display: block;
    width: 12vw;
}
.js-modal.kuji .close-btn .close-img {
}



/* }}} */

/* quiz2 {{{ */

.quiz2 {

}
.quiz2 .quiz-wrap {
    background: url(../images/quiz2/bg.png) no-repeat center top;
    background-size: cover;
    width: 100%;
}
.quiz2 .word1 {
    width: 90%;
}
.quiz2 .btn_main {
    width: 90%;
    margin: 0 auto;
}

.quiz2 .text-box {
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    margin: 0 auto;
    width: 90%;
    padding: 2em;
}
.quiz2 ul.kome {
}
.quiz2 ul.kome .item {
    position: relative;
    padding-left: 1em;
}
.quiz2 ul.kome .item:before {
    content: "※";
    position: absolute;
    left: 0;
    top: 0;
    width: 1em;
    height: 1em;
}

.quiz2.content .quiz-content {
    text-align: center;
}

.quiz2.white-bg .quiz-wrap {
    background: none;
    margin-top: 2em;
}
.quiz2.white-bg.tab .quiz-wrap {
    margin-top: 0;
}
.quiz2.white-bg .quiz-wrap .quiz-content {
    width: 90%;
    margin: 0 auto;
}

.btn-navy-wrap {
    width: 90%;
    margin: 0 auto;
}
.btn-navy-wrap .btn-navy {
    background: #002A5B;
    box-sizing: border-box;
    color: #fff;
    font-weight: bold;
    font-size: 1.2em;
    display: flex;
    justify-content: center;
    -webkit-justify-content: center;
    padding: 0.4em 0;
    border-radius: 100vw;
}
.btn-navy-wrap .btn-navy.disable {
    color: #fff;
    background: #e8e8e8;
    cursor: default;
}
.btn-navy-wrap.-line .btn-navy {
    color: #002A5B;
    background: #fff;
    border: 1px solid #002A5B;
}
.btn-navy-wrap .btn-navy .text{
    display: inline-block;
    position: relative;
}

.btn-green-wrap {
    width: 90%;
    margin: 0 auto;
}
.btn-green-wrap .btn-green {
    background: #068b3c;
    box-sizing: border-box;
    color: #fff;
    font-weight: bold;
    font-size: 1.2em;
    display: flex;
    justify-content: center;
    -webkit-justify-content: center;
    padding: 0.4em 0;
    border-radius: 100vw;
}
.btn-green-wrap .btn-green.disable {
    color: #fff;
    background: #e8e8e8;
    cursor: default;
}
.btn-green-wrap.-line .btn-green {
    color: #068b3c;
    background: #fff;
    border: 1px solid #068b3c;
}
.btn-green-wrap .btn-green .text{
    display: inline-block;
    position: relative;
}
.btn-green-wrap .btn-green .text:before {
    content: "";
    background: url(../images/quiz2/arrow.png) no-repeat center center;
    width: 1em;
    height: 1em;
    background-size: contain;
    position: absolute;
    left: -1.2em;
    top: 50%;
    transform: translateY(-50%);
}
.btn-green-wrap.-line .btn-green .text:before {
    content: "";
    background: url(../images/quiz2/arrow_green.png) no-repeat center center;
    width: 1em;
    height: 1em;
    background-size: contain;
    position: absolute;
    left: -1.2em;
    top: 50%;
    transform: translateY(-50%);
}
.btn-green-wrap .btn-green.arrow-l .text:before {
    content: "";
    background: url(../images/quiz2/arrow_l.png) no-repeat center center;
    width: 1em;
    height: 1em;
    background-size: contain;
    position: absolute;
    left: -1.2em;
    top: 50%;
    transform: translateY(-50%);
}

.quiz2 .okng {
    width: 50%;
}
.quiz2 .passphrase {
    background: #ef6c4c;
    padding: 1em 1em;
    border: none;
    font-weight: bold;
    width: 100%;
    box-sizing: border-box;
    height: 7em;
}

.hidden_passphrase {
    /* visibility: hidden; */
}
.quiz2.question .quiz-wrap {
    background: url(../images/quiz2/bg2.png) no-repeat center top;
    background-size: cover;
    width: 100%;
}

.quiz2 .qa-area {
    background: #fff;
    width: 96%;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 1em;
    border-radius: 10px;
}
.quiz2 .sec15 {
    width: 50%;
}
.quiz2 .img-q {
    width: 10vw;
}

.quiz2 .answers li {
    width: 95%;
    margin: 0.5em auto;
    box-sizing: border-box;
}
.quiz2 .answers a {
    display: block;
    text-align: center;
    background: url(../images/quiz2/bg_answer.png) no-repeat center center;
    /* background-size: contain; */
    background-size: 100% 100%;
    width: 100%;
    box-sizing: border-box;
    /* padding: 1.5em 0; */
    padding: 1em 1em;
    margin: 0;
    color:#d14023; 
    font-weight: bold;
    font-size: 1.2em;
    box-sizing: border-box;
}

.quiz2 .result-wrap {
    background: #fff;
    border-radius: 10px;
    padding: 1em;
    box-sizing: border-box;
    width: 94%;
    margin: 0 auto;
}

.quiz2 .text-ok,
.quiz2 .text-ng {
    font-size: 4em;
    font-weight: bold;
}
.quiz2 .text-ok {
    color: #d14023;
}

.quiz2 .coin-total {
    display:-webkit-flex;
    display:-ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack:flex-start;
    -webkit-justify-content:flex-start;
    justify-content:flex-start;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.quiz2 .coin-total__image {
    width: 3em;
    margin-right: 1em;
    box-sizing: border-box;
}
.quiz2 .coin-total__text {
    color: #d14023;
    font-weight: bold;
    font-size: 4em;
    text-align: center;
}
.quiz2 .coin-history {
    margin-top: 1em;
}
.quiz2 .coin-history .item {
    display:-webkit-flex;
    display:-ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack:flex-start;
    -webkit-justify-content:flex-start;
    justify-content:flex-start;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

    box-sizing: border-box;
    padding: 1em 0;
    border-top: 1px solid #333;
}
.quiz2 .coin-history .item:last-child {
    border-bottom: 1px solid #333;
}
.quiz2 .coin-history .item .c-image {
    width: 10vw;
    margin-right: 1em;
    box-sizing: border-box;
}
.quiz2 .coin-history .item .history-text {
    display:-webkit-flex;
    display:-ms-flexbox;
    display: flex;
    -ms-flex-pack:justify;
    -webkit-justify-content:space-between;
    justify-content:space-between;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    box-sizing: border-box;
    width: calc(100% - (10vw + 1em));
}
.quiz2 .history-content{
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.quiz2 .coin-total,.quiz2 .shogo-exsit,.quiz2 .integration-box{
    grid-column: 1 / -1;
}
.quiz2 .coupon-list-box,.quiz2 .collection-list{
    aspect-ratio: 1 / 1;
}
.quiz2 .coin-total,.quiz2 .history-list,.quiz2 .coupon-list-box,.quiz2 .collection-list{
    position: relative;
    overflow: hidden;
}
.quiz2 .coin-total{
    margin: 0 auto;
}
.quiz2 .cyokinbako-image{
    width: 20vw;
    box-sizing: border-box;
}
.quiz2 .coin-total-add__text{
    border-top: 2px solid #B4ADAC;
    padding-top: 6px;
}
.quiz2 .coin-total-bg, .quiz2 .coupon-list-bg,.quiz2 .collection-list-bg{
    position: absolute;
    inset: 0;
    border-radius: 16px;
    z-index: -1;
}
.quiz2 .coin-total-bg{ 
    margin: 1em;
    margin-top: 2em;
    padding-top: 2em;
    background: #FFF4C6;
     
}
.quiz2 .coupon-list-bg{
    margin: 1em;
    background: #A8DBFA; 
}
.quiz2 .collection-list-bg{ 
    margin: 1em;
    background: #FFDBE7; 
}
.quiz2 .title-img{
    position: absolute;
    display: block;
    margin: 0 auto;
    inset: 0;
    z-index: 1;
    height: 3em;
    object-fit: contain;
    pointer-events: none;
}
.quiz2 .coin-total-content,.quiz2 .coupon-list-content,.quiz2 .collection-list-content{
    display: grid;
    place-items: center;
    margin: 0 3em;
}
.quiz2 .coupon-list-content,.quiz2 .collection-list-content{
    margin-top: 1em;    
}
.quiz2 .coin-total__title{
    display: inline-block;
    margin-top: 3em;
    padding: 0.1em 1.2em;
    background-color: #e53935;
    color: #fff;
    border-radius: 16px;
    font-weight: 400;
    line-height: 1.2;
}
.quiz2 .coin-total-data{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.quiz2 .coin-total-content .coin-image{
    /* width: 2em; */
}
.quiz2 .history-list{
    margin: 0 auto;
    margin-bottom: 1em;
}
.quiz2 .history-list .text{
    color:#000;
    font-size: 0.8em;
}
.quiz2 .coupon-list-content,.quiz2 .collection-list-content{
    margin: 3em auto;
    font-size: 0.8em;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.12em;
    color: #030762;
}
.quiz2 .btn-link-check{
    margin-top: 2em;
    font-weight: 550;
    color: #030762;
}

.quiz2 .history-ttl{
    background: #010165;
    display: grid;
    place-items: center;
    padding: 16px; 
    min-height: 20vh;
}
.quiz2 .history-ttl-text{
    color: #fff;
}
.quiz2 .history-ttl-text .borderbottom{
    display: block;
    font-size: 7vw;
    border-bottom: 2px solid #fff;
    padding-bottom: 4%;
}
.quiz2 .coin-history .item{
    margin:0 5vw;
}
.quiz2 .coupon-ttl{
    background: #A8DBFA;
    display: grid;
    place-items: center;
    padding: 18px; 
    min-height: 20vh;
}
.quiz2 .coupon-ttl-image{
    width: 30vw;
}
.quiz2 .coupon-ttl-text{
    display: block;
    font-size: 7vw;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.12em;
    color: #030762;
    border-bottom: 2px solid #030762;
    padding-bottom: 2%;
}
.quiz2 .coupon-ttl-cointotal{
    display: inline-block;
    margin-top: 1em;
    padding: 0.1em 1.2em;
    background-color: #fff;
    color: #030762;
    border-radius: 18px;
    font-weight: 400;
    line-height: 1.2;
}
.quiz2 .collection-ttl{
    background: #FFDBE7;
    display: grid;
    place-items: center;
    padding: 16px; 
    min-height: 20vh;
}
.quiz2 .collection-ttl-image{
    width: 30vw;
}
.quiz2 .collection-ttl-text{
    display: block;
    font-size: 7vw;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.12em;
    color: #030762;
    border-bottom: 2px solid #030762;
    padding-bottom: 2%;
}

.modal.quiz2 {
}
.modal.quiz2 .modal__content{
    background: #fff;
    box-sizing: border-box;
    left: 50%;
    padding: 20px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 90%;
    border-radius: 10px;
}
.quiz2 .passphrase_area {
    border: 1px solid #000;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 1em;
}
.quiz2 .passphrase_button {
    display: inline-block;
    background: #efefef;
    border: 1px solid #999;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
    box-sizing: border-box;
    padding: 0.5em;
    color: #000;
}
.quiz2 .passphrase_button.selected {
    background: #0000ff;
    color: #fff;
}
.quiz2 .button_area {
    display:-webkit-flex;
    display:-ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    -ms-flex-pack:flex-start;
    -webkit-justify-content:flex-start;
    justify-content:flex-start;
}


.modal.quiz2 .coin_wrap {
    width: 40vw;
    margin: 0 auto;
}

.quiz2 .coupon-list-wrap {
}
.quiz2 .coupon-list {
    display:-webkit-flex;
    display:-ms-flexbox;
    display: flex;
    -ms-flex-pack:justify;
    -webkit-justify-content:space-between;
    justify-content:space-between;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.quiz2 .coupon-list__item {
    width: 45%;
    margin: 2%;
}
.quiz2 .coupon-list__item .coupon__text {
    text-align: left;
}
.quiz2 .coupon-list__item .coupon__ttl {
    font-weight: bold;
}
.quiz2 .coupon-list__item .coupon__body {
    display:-webkit-flex;
    display:-ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.quiz2 .coupon-list__item .coupon__body .coin-image {
    width: 5vw;
    margin-right: 2vw;
}

.quiz2.tab .tab-list {
    box-sizing: border-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack:center;
    -webkit-justify-content: center;
    justify-content:center;

    margin-bottom: 2em;
}
.quiz2.tab .tab-list__item {
    width: 50%;
    box-sizing: border-box;
}
.quiz2.tab .tab-list__item {
    border-bottom: 2px solid #666;
    box-sizing: border-box;
    box-sizing: border-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack:center;
    -webkit-justify-content: center;
    justify-content:center;

}
.quiz2.tab .tab-list__item.current {
    border-bottom: 2px solid #ff0000;
}
.quiz2.tab .tab-list__link {
    display: block;
    color: #000;
    font-weight: bold;
    box-sizing: border-box;
    padding-bottom: 0.2em;
}
.quiz2.tab .tab-list__item.current .tab-list__link {
    color: #ff0000;
}

.shogo-exist {
    text-align: center;
}
.shogo__text {
    color: #d14023;
    text-align: center;
}

/* checkin {{{ */

.checkin {
}
.checkin-wrap {
    background-image: url(/images/checkin/bg.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100vh;
}
.checkin .word1 {
    width: 70%;
    margin: 0 auto;
}

.checkin__button {
    display: block;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(90deg, #fe3231 0%, #ff8f4c 50%, #fe3231 100%);
    border-radius: 1.5vw;
    font-size: 7vw;
    padding: 2vw 0;
    width: 80vw;
    margin: 0 auto;
    filter: drop-shadow(5px 3px 10px rgba(0,0,0,0.4));
}


/* }}} */

}

/* vim: set ts=4 sw=4 sts=0 foldmethod=marker : */