@charset "UTF-8";
@keyframes fadeIn {
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideIn {
  100% {
    transform: translateX(0);
  }
}
@keyframes slideInTtB {
  100% {
    transform: translateX(0);
  }
}
@keyframes slideInSide {
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes shakeAnim {
  0%, 100% {
    transform: rotate(10deg) translateX(0);
  }
  50% {
    transform: rotate(-10deg) translateX(-20px);
  }
}
/* 既存上書き用 */
body {
  background: linear-gradient(180deg, #fff 0%, #fff 80%, #000 80%, #000 100%);
}

@media screen and (max-width: 767px) {
  body {
    background: #FFF;
  }
}
header {
  z-index: 98 !important;
}

header .hmb_btn {
  z-index: 99 !important;
}

.h_nav_wrap {
  z-index: 98 !important;
}

.f_app {
  background: #000 !important;
}

.btn_apply, .intro, .page_top {
  z-index: 1;
}

.mv_pic {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  right: 50%;
  transform: translateX(50%);
  width: 100%;
}
.mv_pic p {
  width: 100%;
}
.mv_pic p:first-of-type {
  max-width: 42.9%;
}
.mv_pic p:last-of-type {
  max-width: 48.6%;
}
.mv_pic img {
  display: block;
  width: 100%;
  max-width: 100%;
}

.news_inner {
  left: 50%;
  transform: translateX(-50%);
  width: 88%;
  height: 84%;
  margin: 5% 0 0;
  padding: 0;
  overflow-y: scroll;
}

/* 共通部分 */
.sukisuki_menu_inner div, .sukisuki_magnet, .goods_box_pic, .wrapping_pic01, .wrapping_pic02, .cmn_box.broadcast_box, .broadcast_pic, .campaign_box_pic, .campaign_about_pic {
  overflow: hidden;
}

.note_box {
  margin: 16px 0;
}

.note_box ul {
  font-size: 21px;
}

@media screen and (769px <= width < 999px) {
  .note_box ul {
    font-size: 2vw;
  }
}
@media screen and (max-width: 767px) {
  .note_box ul {
    font-size: 10px;
  }
  .page_top {
    bottom: 12%;
  }
}
.cmn_box::before {
  top: -0.75%;
}

.cmn_box::after {
  bottom: -0.75%;
}

.btn_apply, .intro, .page_top {
  z-index: 3;
}

/* sec01 */
#sec01 {
  position: relative;
}

.accordion dt img:hover {
  opacity: 1;
}

.clearcard_txt01 {
  font-weight: 900;
}

.clearcard_conan {
  top: 200px;
}

.clearcard_kid {
  top: 200px;
}

.accordion {
  position: relative;
}
.accordion:first-of-type dd {
  padding-bottom: 72px;
}

.accordion .note_box ul li {
  font-size: 18px;
  text-align: left;
}

@media screen and (max-width: 767px) {
  .accordion .note_box ul li {
    font-size: 10px;
  }
}
.accordion_closed {
  z-index: 2;
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 94%;
}
.accordion_closed img {
  max-width: 100%;
  cursor: pointer;
}

@media screen and (max-width: 1000px) {
  .clearcard_ribon {
    left: 3%;
  }
}
@media screen and (max-width: 767px) {
  .accordion:first-of-type dd {
    padding: 8% 6% 6%;
  }
  .accordion:nth-last-of-type(2) .accordion_closed {
    top: 6%;
  }
  .accordion:nth-of-type(3) .accordion_closed {
    top: 5%;
  }
  .accordion_closed {
    top: 7%;
    width: calc(94% - 12px);
  }
  .clearcard_conan {
    top: 18vw;
  }
  .clearcard_kid {
    top: 18vw;
  }
  .clearcard_ribon {
    left: 5%;
  }
}
@media screen and (max-width: 460px) {
  .accordion:nth-of-type(3) .accordion_closed {
    top: 4%;
  }
}
/* sec02 */
.sukisuki_txt01 {
  font-weight: 900;
}

.sukisuki_ttl02 {
  margin-bottom: 72px;
}

.sukisuki_heiji {
  top: 14.35%;
}

.sukisuki_kazuha {
  top: 14.5%;
}

.sukisuki_kazuha + .note_box {
  margin: 0 0 120px;
}

.sukisuki_menu_ttl {
  top: -60px;
  font-weight: 900;
}

.sukisuki_menu_inner {
  padding: calc(5% + 36px) 6% 5%;
}

.sukisuki_magnet {
  margin-bottom: 44px;
}

.sukisuki_magnet_closed {
  z-index: 2;
  position: absolute;
  bottom: 10px;
  left: 0;
}
.sukisuki_magnet_closed img {
  max-width: 100%;
}

@media screen and (max-width: 1000px) {
  .sukisuki_magnet_closed {
    bottom: 3%;
  }
}
@media screen and (max-width: 767px) {
  .sukisuki_magnet_closed {
    bottom: 1%;
  }
}
@media screen and (max-width: 515px) {
  .sukisuki_magnet_closed {
    bottom: 3.5%;
  }
}
@media screen and (max-width: 425px) {
  .sukisuki_magnet_closed {
    bottom: 4.5%;
  }
}
@media screen and (max-width: 375px) {
  .sukisuki_magnet_closed {
    bottom: 7%;
  }
}


@media screen and (max-width: 767px) {
  .sukisuki_ttl02 {
    margin-bottom: 64px;
  }
  .sukisuki_heiji {
    top: 14.5%;
  }
  .sukisuki_kazuha + .note_box {
    margin: 0 0 64px;
  }
  .sukisuki_menu_ttl {
    top: -32px;
  }
  .sukisuki_magnet {
    margin-bottom: 20px;
  }
  .sukisuki_menu_inner {
    padding: 9% 6% 7%;
  }
}
/* sec03 */
.goods_txt01 {
  font-weight: 900;
}

.goods_bin {
  top: 6%;
  right: 4%;
}

.goods_conan {
  top: 9%;
  left: 1.75%;
}

.goods_akai {
  top: 8.5%;
  right: 1.75%;
}

.goods_txt02 {
  font-weight: 900;
}

.goods_box {
  margin-bottom: 44px;
  padding: 5% 6%;
}

.goods_box + .note_list {
  margin-bottom: 24px;
}

.goods_box_closed {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}
.goods_box_closed img {
  max-width: 100%;
}

@media screen and (max-width: 1000px) {
  .goods_ribon {
    left: 3%;
  }
}
@media screen and (max-width: 767px) {
  .goods_conan {
    top: 8%;
    left: 3%;
  }
  .goods_akai {
    top: 7%;
    right: 2%;
  }
  .goods_bin {
    top: 5.75%;
    right: 1%;
  }
  .goods_ribon {
    left: 4%;
  }
  .goods_box {
    margin-bottom: 20px;
  }
}
/* sec04 */
.broadcast_txt01 {
  font-weight: 900;
}

.broadcast_haibara {
  top: 12%;
  left: 1.25%;
}

.broadcast_ran {
  top: 11%;
  right: 0.75%;
}

.broadcast_txt02 {
  font-weight: 900;
}

.broadcast_box {
  padding: 7% 8%;
}

.broadcast_box_closed {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

@media screen and (max-width: 767px) {
  .broadcast_beaker01 {
    left: 5%;
  }
}
/* sec05 */
.wrapping_txt01 {
  font-weight: 900;
}

.wrapping_txt02 {
  font-weight: 900;
}

.wrapping_box {
  padding: 5.5% 8%;
}

.wrapping_box_closed {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

@media screen and (max-width: 1000px) {
  .wrapping_ribon {
    top: -2%;
    left: 3%;
  }
}
@media screen and (max-width: 767px) {
  .wrapping_ribon {
    top: -1.5%;
    left: 5%;
  }
}
/* sec06 */
#sec06 {
  overflow-x: hidden;
}

.campaign_txt01 {
  font-weight: 900;
}

.campaign_txt02 {
  font-weight: 900;
}

.campaign_box {
  margin-bottom: 44px;
  padding: 7% 8%;
}

.campaign_box_txt img {
  max-width: 74.8%;
}

.campaign_box + .note_list {
  margin-bottom: 20px;
}

.campaign_box_closed {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}
.campaign_box_closed img {
  max-width: 100%;
}

@media screen and (max-width: 767px) {
  .campaign_box {
    margin-bottom: 20px;
    padding: 5.5% 8%;
  }
}
/* キャンペーンに対するお問い合わせ */
.campaign_contact .inner {
  background-color: #FFF;
  background-image: url(../images/bg_contact.png), url(../images/bg_brick_03.png);
  background-size: cover, 100%;
  background-position: center top;
  background-repeat: no-repeat, repeat;
}

.campaign_contact_txt02 a {
  color: #FFF;
}

/* 名探偵コナンとは */
.about_box {
  padding: 6% 6%;
  font-weight: bold;
}

.campaign_contact_flex {
  display: flex;
  justify-content: flex-start;
  max-width: 82.4%;
  margin: 0 auto;
}
.campaign_contact_flex .campaign_contact_txt04 {
  text-align: left;
}
.campaign_contact_flex .campaign_contact_txt04:first-of-type {
  width: 100%;
  max-width: 76%;
}

.campaign_about_pic {
  padding-bottom: 6%;
}

@media (max-width: 900px) {
  .campaign_contact_flex {
    max-width: 100%;
  }
}
@media (max-width: 767px) {
  .campaign_contact_flex {
    max-width: 65%;
  }
}
@media (max-width: 667px) {
  .campaign_contact_flex {
    max-width: none;
  }
}
@media (max-width: 767px) and (min-width: 525px) {
  .intro {
    margin-top: -45px;
  }
}
@media (max-width: 667px) {
  .campaign_contact_txt01 {
    font-size: 0.8533333333em;
  }
  .campaign_contact_txt02 {
    margin: 0.4583333333em 0 0;
    font-size: 2.048em;
    line-height: 1em;
  }
  .campaign_contact_txt02 a {
    color: #FFF;
  }
  .campaign_contact_txt03 {
    margin: 1.2em 0 0;
  }
  .campaign_contact_txt04 {
    margin: 1.2em 0 0;
    font-size: 2.1vw;
  }
}
#page-top {
  display: none !important;
}

/* 追加分 */
.spBlock {
  display: none;
}

.spNone {
  display: block;
}

@media (max-width: 768px) {
  .spBlock {
    display: block;
  }
  .spNone {
    display: none;
  }
}
.jsFadeIn {
  opacity: 0;
  transform: translateY(15%);
}
.jsFadeIn.isEnable {
  animation: fadeIn 0.75s forwards;
}
.jsFadeIn.delay1 {
  animation-delay: 0.2s;
}
.jsFadeIn.delay2 {
  animation-delay: 0.4s;
}
.jsFadeIn.delay3 {
  animation-delay: 0.6s;
}
.jsFadeIn.delay4 {
  animation-delay: 0.8s;
}
.jsFadeIn.delay5 {
  animation-delay: 1s;
}

.jsSlideIn {
  transform: translateX(-35%);
}
.jsSlideIn.isEnable {
  animation: slideIn 0.75s forwards;
}
.jsSlideIn--ttb {
  transform: translateY(-50%);
}
.jsSlideIn--ttb.isEnable {
  animation: slideInTtB 0.75s forwards;
}

.isShakeObj {
  transition: 0.3s;
}
.isShakeObj.isStart {
  opacity: 1;
  animation: shakeAnim 4.75s infinite forwards;
}
.isShakeObj.isStart.delay {
  animation-delay: 0.3s;
}

.jsSlideInChar {
  opacity: 0;
  transform: translateX(-15%);
}
.jsSlideInChar.isEnable {
  animation: slideInSide 0.75s forwards;
}
.jsSlideInChar.delay {
  animation-delay: 0.2s;
}
.jsSlideInChar--r {
  opacity: 0;
  transform: translateX(15%);
}
.jsSlideInChar--r.isEnable {
  animation: slideInSide 0.75s forwards;
}
.jsSlideInChar--r.delay {
  animation-delay: 0.2s;
}/*# sourceMappingURL=extend.css.map */