@charset "UTF-8";
/*.card_wrap {
 background: url("/admission/common/teikiLP_contents/images/campaign/shinsyun_card_bg.jpg");
}*/
.card_wrap {
 position: relative;
}
.open_txt {
 position: absolute;
 top: 36%;
 left: 10%;
 right: 10%;
 animation: move-y .5s infinite alternate ease-in-out;
}
@keyframes move-y {
 from {
  transform: translateY(0);
 }
 to {
  transform: translateY(10px);
 }
}
.card_inner {
 width: calc(100% - 40px);
 max-width: 675px;
 position: absolute;
 bottom: 12%;
 left: 5%;
 right: 5%;
}
.card_inner ul {
 display: flex;
}
.card_inner ul li {
 padding: 0 20px;
}
.card_trigger {
 display: none;
}
label {
 cursor: pointer;
 transition: all 0.3s ease 0s;
 display: inline-block;
}
label:hover {
 transform: translateY(-10px);
}
.js-ctawrap {
 display: none;
}
.click_inner {
 width: calc(100% - 100px);
 max-width: 580px;
 position: absolute;
 bottom: 5%;
 left: 11%;
 right: 10%;
}
.icon {
 width: 80px;
 height: 80px;
 animation: slideanim 10.5s linear infinite;
 animation-direction: alternate;
}
@keyframes slideanim {
 from {
  margin-left: 0%;
 }
 to {
  margin-left: 100%;
 }
}
.js-anim.stop {
 animation-play-state: paused;
}
@media(max-width:767px) {
 .card_inner {
  bottom: 12%;
  left: 5%;
  right: 5%;
 }
 .card_inner ul li {
  padding: 0 10px;
 }
 .click_inner {
  bottom: 5%;
  left: 5%;
  right: 5%;
 }
 .icon {
  width: 45px;
  height: 45px;
  animation: slideanim 12s linear infinite;
  animation-direction: alternate;
 }
}
/*--------------------  モーダル -------------------*/
.modal {
 display: none;
 height: 100vh;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 9999;
}
.modal__bg {
 background: rgba(0, 0, 0, 0.8);
 height: 100vh;
 position: absolute;
 width: 100%;
}
.modal__content {
 left: 50%;
 position: absolute;
 top: 50%;
 transform: translate(-50%, -50%);
 width: 40%;
 max-width: 640px;
}
.modal__content img {
 width: 100%;
}
.modal__content .btn__wrapper {
 position: absolute;
 right: 0;
 top: -40px;
}
.modal__content .close-btn {
 display: block;
 position: relative;
 width: 30px;
 height: 30px;
 border: 2px solid #fff; /* 枠の調整 */
 border-radius: 50%; /* 丸みの度合い */
 background: #fff; /* ボタンの背景色 */
}
.modal__content .close-btn::before, .close-btn::after {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 width: 3px; /* 棒の幅（太さ） */
 height: 22px; /* 棒の高さ */
 background: #333; /* バツ印の色 */
}
.modal__content .close-btn::before {
 transform: translate(-50%, -50%) rotate(45deg);
}
.modal__content .close-btn::after {
 transform: translate(-50%, -50%) rotate(-45deg);
}
.modal__content .modal_txt {
 font-size: 1.75em;
 color: #fff;
 text-align: center;
 font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN";
}
.modal__inner {
 max-height: 600px;
 overflow: scroll;
}
@media(max-width:767px) {
 .modal__content {
  width: 90%;
 }
 .modal__content .modal_txt {
  font-size: 1.25em;
 }
 .modal__inner {
 max-height: 500px;

}
}
/*-------------------- 特典（大）商品スライド -------------------*/
.tokuten_big_wrap {
 position: relative;
}
.dairy_slide {
 position: absolute;
 bottom: 17%;
 left: 5%;
 right: 5%;
 max-width: calc(100% - 80px);
}
.dairy_slide_anim {
 overflow: hidden;
}
.dairy_slide_anim > div {
 display: flex;
 animation: slide-to-left 30s linear infinite;
}
.dairy_slide_anim > div img {
 padding: 0 5px;
}
.dairy_slide_anim > div > * {
 min-width: calc(100% / 3);
}
@keyframes slide-to-left {
 100% {
  transform: translateX(calc(-100% * (6 / 3)))
 }
}
.s-sticky-card {
 position: fixed;
 bottom: 220px;
 left: 20px;
 width: 125px;
}
@media(max-width:767px) {
 .s-sticky-card {
  bottom: 15%;
  left: 0;
  width: 20%;
  z-index: 100;
 }
 .dairy_slide {
  width: 100%;
  max-width: calc(100% - 40px);
 }
}
/*キャンペーン終了ページ*/
.attention_box {
 width: 90%;
 max-width: 750px;
 margin: 10px auto 50px;
}
.attention_box h2 {
 font-size: 24px;
}
.attention_box p {
 line-height: 2;
 font-size: 18px
}
.attention_box .bold {
 font-weight: 900;
}
@media screen and (max-width:767px) {
.attention_box {
  margin: 10px auto 30px;
 }
.attention_box h2 {
  font-size: 1.5em;
 }
.attention_box p {
  /*font-size: 1.2em*/
 }
}
.campaign_end {
  display: none;
}
.campaign_link_end {
  pointer-events: none;
}