@charset "UTF-8";
/* フォント設定
---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700&display=swap');
/* 切り替え
---------------------------------------------------------- */
.pc {
  display: block !important;
}
.sp {
  display: none !important;
}
/* 決まりごと
---------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}
img {
  vertical-align: top;
  line-height: 1.0em;
}
a:hover img {
  opacity: 0.5;
}
/*グレーアウト*/
.img_grayout {
  filter: grayscale(100%);
}
p.indent-1 {
  padding-left: 1em;
  text-indent: -1em;
}
/* ここからスタート
---------------------------------------------------------- */
/* background */
.xmas_bg {
  position: relative;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  background-color: #1a1666;
}
/* 基本コンテナ */
.TomicaContents-960px {
  width: 960px;
  margin: 0 auto;
}
.TomicaContents-900px {
  width: 900px;
  margin: 0 auto;
}
/* メインイメージ
---------------------------------------------------------- */
.main_visual {
  position: relative;
  width: 900px;
  margin: 0 auto;
}
/* background */
.main_base {
  display: block;
  width: 100%;
  height: auto;
}
.main_layer {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  animation: layerFadeDown 1.2s ease-out forwards;
}
.main_layer_link {
  position: absolute;
  display: block;
  opacity: 0;
  animation: layerFadeDown 1.2s ease-out forwards;
}
.main_layer_link img {
  display: block;
  width: 100%;
  height: auto;
}
.main_layer_link:hover img {
  animation: hoverBounce .4s ease-in-out infinite alternate;
}
/* ギフトセット */
.layer_01 {
  top: 17%;
  left: 57%;
  width: 30%;
  animation-delay: .2s;
}
/* ブロック */
.layer_02 {
  top: 17%;
  left: 1%;
  width: 30%;
  animation-delay: .4s;
}
/* ワールド */
.layer_03 {
  top: 16%;
  left: 28%;
  width: 43%;
  animation-delay: .6s;
}
/* ジョブレイバー */
.layer_04 {
  top: 17%;
  left: 70%;
  width: 30%;
  animation-delay: .8s;
}
/* クロス */
.layer_05 {
  top: 17%;
  left: 6%;
  width: 30%;
  animation-delay: 1.0s;
}
/* タイトル */
.layer_06 {
  top: 0%;
  left: 0%;
  width: 100%;
  animation-delay: 1.2s;
}
/* プレゼント */
.layer_07 {
  top: 67%;
  right: 28%;
  width: 50%;
  animation-delay: 1.5s;
}
@keyframes layerFadeDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes hoverBounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10px);
  }
}
/* メニュー
---------------------------------------------------------- */
.box_lineup {
  width: 700px;
  margin: 2em auto 3em;
}
.box_menubutton {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(5, auto);
  grid-column-gap: 30px;
  grid-row-gap: 30px;
}
.lineup_btn {
  width: 100%;
}
.box_menubutton::after {
  content: '';
  display: block;
}
.lineup_btn_shadow {
  filter: drop-shadow(3px 3px 3px #000);
}
/* アイテム枠設定
---------------------------------------------------------- */
.box_item {
  width: 100%;
  height: auto;
  filter: drop-shadow(5px 5px 5px #000);
  margin: 0 auto 5em;
}
/* エリアカラー設定
---------------------------------------------------------- */
.area_red {
  width: 100%;
  height: auto;
  background-color: #e40113;
}
.area_red_mg {
  width: 100%;
  height: auto;
  background-color: #e40113;
  padding: 0 0 2.5em;
}
.area_red_mg_ud {
  width: 100%;
  height: auto;
  background-color: #e40113;
  padding: 2.5em 0;
}
.area_green {
  width: 100%;
  height: auto;
  background-color: #008843;
  padding: 0 0 2.5em;
}
.area_green_mg {
  width: 100%;
  height: auto;
  background-color: #008843;
  margin: 2.5em 0 0;
  padding: 0 0 2.5em;
}
.area_blue {
  width: 100%;
  height: auto;
  background-color: #004ea2;
}
.area_xmas {
  width: 100%;
  height: auto;
  margin: 3em 0 0;
  padding: 0 0 2em;
  background-color: #d4d4d4;
  filter: drop-shadow(0px 5px 5px #333);
}
.area_xmas_ud {
  width: 100%;
  height: auto;
  margin: 3em 0;
  padding: 0 0 2em;
  background-color: #d4d4d4;
  filter: drop-shadow(0px 5px 5px #333);
}
/* 動画
---------------------------------------------------------- */
.mov_area {
  width: 80%;
  height: auto;
  margin: 0 auto;
  padding: 1.5em 0;
}
iframe[src*="youtube.com"], iframe[src*="youtube-nocookie.com"] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
}
/* 詳しく＆ラインナップボタン
---------------------------------------------------------- */
.btn_kuwashiku {
  width: 70%;
  height: auto;
  margin: 1em auto;
}
.btn_lineup {
  width: 70%;
  height: auto;
  margin: 1em auto;
}
/* 価格ボタン
---------------------------------------------------------- */
.big_kakaku {
  width: 60%;
  height: auto;
  margin: 1em auto;
}
.small_kakaku {
  width: 20%;
  height: auto;
  z-index: 3;
}
.border_solid {
  border: solid 3px antiquewhite;
  border-radius: 26px;
  padding: 0.3em;
}
.btn_other_item {
  position: absolute;
  width: 86%;
  height: auto;
  margin: 0 7%;
  padding: 0.2rem 0 0;
}
.btn_item_price {
  position: absolute;
  top: 76%;
  left: 60%;
}
.btn_item_price_02 {
  position: absolute;
  top: 70%;
  left: 60%;
}
.btn_item_kuwashiku {
  position: absolute;
  width: 27%;
  top: 76%;
  left: 16%;
}
/* 画像サイズ設定
---------------------------------------------------------- */
.img_80per {
  width: 80%;
  height: auto;
  margin: 1.5em 10%;
}
.img_santa {
  width: 100%;
  height: auto;
  padding: 1.5em 0;
}
/* いっしょに買うなら設定
---------------------------------------------------------- */
.box_together {
  position: relative;
  width: 100%;
  height: auto;
  margin: 1em 0;
}
.item_together_kuwashiku {
  position: absolute;
  top: 80%;
  left: 15%;
  width: 20%;
  height: auto;
  z-index: 3;
}
.item_together_buy {
  position: absolute;
  top: 74%;
  right: 13%;
  width: 30%;
  height: auto;
  z-index: 5;
}
/* 注意書きなど
---------------------------------------------------------- */
.layer_txt {
  width: 100%;
  height: auto;
}
.txt_notice_sellout {
  font-size: 1rem;
  text-align: center;
  color: #555;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.txt_notice_last {
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
  color: #999;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
  padding: 0 0 5rem;
}