@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&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;
}
/* 背景
---------------------------------------------------------- */
.xmas_bg {
  position: relative;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  background-color: #b50005;
  overflow: hidden;
  isolation: isolate;
}
.xmas_bg::before, .xmas_bg::after {
  content: "";
  position: absolute;
  top: -300px;
  left: 0;
  right: 0;
  height: calc(100% + 300px);
  pointer-events: none;
  z-index: 0;
  background-repeat: repeat;
  animation: snowFall 14s linear infinite;
}
.xmas_bg::before {
  opacity: .6;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .95) 0 2px, transparent 2.5px), radial-gradient(circle, rgba(255, 255, 255, .8) 0 3px, transparent 3.5px), radial-gradient(circle, rgba(255, 255, 255, .65) 0 1.5px, transparent 2px);
  background-size:
    120px 140px, 190px 220px, 85px 110px;
  background-position:
    10px 20px, 70px 60px, 40px 90px;
  filter: blur(.8px);
}
.xmas_bg::after {
  opacity: .3;
  background-image:
    radial-gradient(circle, #fff 0 1px, transparent 1.5px), radial-gradient(circle, #fff 0 2px, transparent 2.5px);
  background-size:
    70px 90px, 145px 170px;
  background-position:
    25px 10px, 90px 55px;
  filter: blur(2px);
  animation-duration: 22s;
}
@keyframes snowFall {
  from {
    background-position:
      10px -200px, 70px -300px, 40px -150px;
  }
  to {
    background-position:
      60px 700px, 120px 900px, 90px 650px;
  }
}
.xmas_bg > * {
  position: relative;
  z-index: 1;
}
/* 基本枠
---------------------------------------------------------- */
.maincontents_2610 {
  width: 960px;
  height: auto;
  margin: 0 auto;
}
/* メインオーナメント
---------------------------------------------------------- */
.main_ornament {
  position: relative;
  width: 100%;
  margin: 0 auto 5em;
}
.ornament_base {
  display: block;
  width: 100%;
  height: auto;
}
.ornament_main_layer {
  position: absolute;
  opacity: 0;
  animation: layerFadeIn 1s ease forwards;
  pointer-events: none;
}
.ornament_layer_link {
  position: absolute;
  display: block;
  opacity: 0;
  animation: layerFadeIn 1s ease forwards;
}
.ornament_layer_link:hover img {
  animation: hoverBounce .4s ease-in-out infinite alternate;
}
@keyframes hoverBounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-5px);
  }
}
.ornament_layer_link img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .25s ease;
}
.ornament_layer_01 {
  top: 48%;
  left: 0%;
  width: 43%;
  animation-delay: .2s;
}
.ornament_layer_02 {
  top: 42%;
  left: 33%;
  width: 30%;
  animation-delay: .3s;
}
.ornament_layer_03 {
  top: 41%;
  right: 0%;
  width: 43%;
  animation-delay: .4s;
}
.ornament_layer_04 {
  top: 62.3%;
  left: 35.5%;
  width: 38%;
  animation-delay: .5s;
}
.ornament_layer_05 {
  top: 66%;
  right: 0%;
  width: 28%;
  animation-delay: .6s;
}
.ornament_layer_06 {
  top: 73%;
  left: 0%;
  width: 28%;
  animation-delay: .7s;
}
.ornament_layer_07 {
  top: 82%;
  left: 22%;
  width: 28%;
  animation-delay: .8s;
}
.ornament_layer_08 {
  top: 83%;
  right: 2%;
  width: 48%;
  animation-delay: .9s;
}
@keyframes layerFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* フローチャート
---------------------------------------------------------- */
.flowchart {
  position: relative;
  width: 100%;
  margin: 0 auto 5em;
}
.flowchart_base {
  display: block;
  width: 100%;
  height: auto;
}
.flowchart_main_layer {
  position: absolute;
}
.flowchart_layer_link {
  position: absolute;
  display: block;
}
.flowchart_layer_link:hover img {
  animation: hoverBounce .2s ease-in-out infinite alternate;
}
@keyframes hoverBounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-1px);
  }
}
.ornament_layer_link img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .25s ease;
}
.flowchart_layer_01 {
  top: 12%;
  left: 7%;
  width: 28%;
  border-radius: 7.5%;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.flowchart_layer_02 {
  top: 40%;
  left: 7%;
  width: 28%;
  border-radius: 7.5%;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.flowchart_layer_03 {
  top: 73.5%;
  left: 7%;
  width: 28%;
  border-radius: 7.5%;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.flowchart_layer_04 {
  top: 73.5%;
  left: 37%;
  width: 28%;
  border-radius: 7.5%;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.flowchart_layer_05 {
  top: 73.5%;
  left: 67%;
  width: 28%;
  border-radius: 7.5%;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
/* 各カテゴリベース
---------------------------------------------------------- */
.bg_yellow {
  width: 90%;
  height: auto;
  margin: 0 auto 5em;
  padding: 2em 0;
  border: solid 3px #603813;
  border-radius: 0 0 30px 30px;
  background-color: #ffcc36;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.bg_blue {
  width: 90%;
  height: auto;
  margin: 0 auto 5em;
  padding: 2em 0;
  border: solid 3px #103381;
  border-radius: 0 0 30px 30px;
  background-color: #83d8fc;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.bg_pink {
  width: 90%;
  height: auto;
  margin: 0 auto 5em;
  padding: 2em 0;
  border: solid 3px #da1e79;
  border-radius: 0 0 30px 30px;
  background-color: #ffc1c5;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.bg_green {
  width: 90%;
  height: auto;
  margin: 0 auto 5em;
  padding: 2em 0;
  border: solid 3px #006837;
  border-radius: 0 0 30px 30px;
  background-color: #78c382;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.bg_black {
  width: 90%;
  height: auto;
  margin: 0 auto 3em;
  padding: 2em 0;
  border: solid 3px #111;
  border-radius: 0 0 30px 30px;
  background-color: #000;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
/* 各カテゴリタイトル
---------------------------------------------------------- */
.tit_yellow {
  width: 90%;
  height: auto;
  margin: 0 auto;
  border: solid 3px #603813;
  border-radius: 30px 30px 0 0;
  background-color: #603813;
  box-shadow: 5px 3px 5px rgba(0, 0, 0, 0.3);
}
.tit_blue {
  width: 90%;
  height: auto;
  margin: 0 auto;
  border: solid 3px #103381;
  border-radius: 30px 30px 0 0;
  background-color: #103381;
  box-shadow: 5px 3px 5px rgba(0, 0, 0, 0.3);
}
.tit_pink {
  width: 90%;
  height: auto;
  margin: 0 auto;
  border: solid 3px #da1e79;
  border-radius: 30px 30px 0 0;
  background-color: #da1e79;
  box-shadow: 5px 3px 5px rgba(0, 0, 0, 0.3);
}
.tit_green {
  width: 90%;
  height: auto;
  margin: 0 auto;
  border: solid 3px #006837;
  border-radius: 30px 30px 0 0;
  background-color: #006837;
  box-shadow: 5px 3px 5px rgba(0, 0, 0, 0.3);
}
.tit_black {
  width: 90%;
  height: auto;
  margin: 0 auto;
  padding: 1.2em 0;
  border: solid 3px #111;
  border-radius: 30px 30px 0 0;
  background-color: #000;
  box-shadow: 5px 3px 5px rgba(0, 0, 0, 0.3);
}
/* 内枠
---------------------------------------------------------- */
.frame_90 {
  width: 90%;
  height: auto;
  margin: 0 auto;
}
.frame_100 {
  width: 100%;
  height: auto;
  margin: 0 auto;
}
/* 動画
---------------------------------------------------------- */
.mov_area {
  width: 98%;
  height: auto;
  margin: 1.5em auto;
}
iframe[src*="youtube.com"], iframe[src*="youtube-nocookie.com"] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
}
/* 各ボタン
---------------------------------------------------------- */
.btn_kuwashiku {
  width: 85%;
  margin: 0 auto;
  padding: 1em 0 2em;
}
/* 購入ボタン
---------------------------------------------------------- */
.kakaku {
  width: 85%;
  margin: 0 auto;
  padding: 2em 0;
  text-align: center;
}
a.btn_buycart {
  width: 90%;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: 700;
  font-style: normal;
  border-radius: 0.5rem;
  color: #fff;
  background: linear-gradient(180deg, #ff9d2e 0%, #e05200 100%);
}
a.btn_buycart:hover {
  color: #fff;
  background: linear-gradient(180deg, #e05200 0%, #ff9d2e 100%);
}
a.btn_buycart.btn_cubic {
  border-bottom: 5px solid #b50005;
}
a.btn_buycart.btn_cubic:hover {
  margin-top: 3px;
  border-bottom: 2px solid #b50005;
}
/* 黄色 */
a.btn_buycart_y {
  width: 90%;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: 700;
  font-style: normal;
  border-radius: 0.5rem;
  color: #111;
  background: linear-gradient(180deg, #fffbb8 0%, #ccb800 100%);
}
a.btn_buycart_y:hover {
  color: #fff;
  background: linear-gradient(180deg, #ccb800 0%, #fffbb8 100%);
}
a.btn_buycart_y.btn_cubic {
  border-bottom: 5px solid #aa7c00;
}
a.btn_buycart_y.btn_cubic:hover {
  margin-top: 3px;
  border-bottom: 2px solid #aa7c00;
}
a.btn_inner {
  font-size: 2rem;
  position: relative;
  padding: 1.5rem 2rem;
  border-radius: 100vh;
}
a.btn_inner i {
  margin-right: 1rem;
}
/* 画像個別設定
---------------------------------------------------------- */
.img_border {
  width: 100%;
  height: auto;
  margin: 2em auto;
}
/* 個別
---------------------------------------------------------- */
/* レイアウトセット */
.grid_layoutset {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-column-gap: 40px;
}
/* コピーライト */
.txt_copyright {
  width: 100%;
  height: auto;
  margin: 0 auto 3em;
  font-size: 1em;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  color: #000;
  text-align: center;
}