﻿@charset "UTF-8";

/* =============================================================

   サイトジャック用 CSS

============================================================= */

@font-face {
  font-family: "HelveticaRounded";
  src: url("/Page/LP/2502_miffy/fonts/HelveticaRounded-Bold.otf") format("opentype"),
  url("/Page/LP/2502_miffy/fonts/HelveticaRounded-Bold.woff") format("woff"),
  url("/Page/LP/2502_miffy/fonts/HelveticaRounded-Bold.woff2") format("woff2");
}

#Wrap {
  background-color: #fbfcff;
}


/* ヘッダー
============================================================= */

#header_txt_slider,
#header_img_slider {
  position: relative;
  z-index: 30;
}

.top_hotwords_section .hotWords_list ul li a {
  background-color: #fff;
}

/* ---- ヘッダー帯 ---- */

#header_txt_slider,
#header_txt_slider li {
  background-color: #fffbc7 !important;
}

#header_txt_slider li p {
  color:  #707070 !important;
}

/* ---- ヘッダーロゴ ---- */

#header .header_logo a {
  display: block;
  width: 100%;
  height: 100%;
  background: url(../../../Contents/ImagesPkg/sightjack/251106/logo_w.svg) no-repeat center;
  background-color: transparent;
  mask: none;
}

#header .header_logo img {
  opacity: 0;
}

/* ---- ヘッダーアイコン ---- */

#header .header_utiliry .utility_favorite svg,
#header .header_utiliry .utility_mypage svg,
#header .header_utiliry .utility_cart svg,
#header .header_utiliry .search_modal__btn svg {
  fill: #fff;
}

#header .header_utiliry .utility_cart .num {
  color: #fff !important;
}

/*
#header .header_utiliry .utility_favorite a {
  position: relative;
  display: block;
  mask-image: url('data:image/svg+xml;charset=utf8,%09%09%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2050.1%2046%22%3E%0A%09%09%09%09%09%09%09%09%09%3C!--%20Generator%3A%20Adobe%20Illustrator%2028.6.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%201.2.0%20Build%20709)%20%20--%3E%0A%09%09%09%09%09%09%09%09%09%3Cg%3E%0A%09%09%09%09%09%09%09%09%09%09%3Cg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%3E%0A%09%09%09%09%09%09%09%09%09%09%09%3Cpath%20id%3D%22_%E3%83%91%E3%82%B9_674%22%20data-name%3D%22%E3%83%91%E3%82%B9_674%22%20d%3D%22M4.1%2C25.2l20.8%2C20.8%2C5.4-5.4%2C15.4-15.4c5.5-5.5%2C5.8-14.4.5-20.2-.2-.2-.4-.4-.5-.6C43.1%2C1.6%2C39.3%2C0%2C35.4%2C0c-.4%2C0-.8%2C0-1.1%2C0%2C0%2C0-.2%2C0-.3%2C0-3.4.3-6.6%2C1.8-9%2C4.2h0c-5.9-5.6-15.2-5.5-20.8.4-5.5%2C5.7-5.5%2C14.8%2C0%2C20.5Z%22%2F%3E%0A%09%09%09%09%09%09%09%09%09%09%09%3Cpath%20d%3D%22M42.6%2C22l-17.7%2C17.7L7.3%2C22c-1.9-1.9-3-4.5-3-7.2%2C0-2.7%2C1.1-5.3%2C3-7.2%2C1.9-1.9%2C4.5-3%2C7.2-3%2C2.7%2C0%2C5.3%2C1.1%2C7.2%2C3l3.2%2C3.2%2C3.2-3.2c1.9-1.9%2C4.5-3%2C7.2-3%2C2.7%2C0%2C5.3%2C1.1%2C7.2%2C3%2C4%2C4%2C4%2C10.5%2C0%2C14.5Z%22%2F%3E%0A%09%09%09%09%09%09%09%09%09%09%3C%2Fg%3E%0A%09%09%09%09%09%09%09%09%09%3C%2Fg%3E%0A%09%09%09%09%09%09%09%09%3C%2Fsvg%3E');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 94%;
  background: #fff;
}*/

.top_topics_section,
.top_topics_section .section_head__img p {
  background: #fffbc7;
}

.ranking_section .section_head .ttl_section {
  color: #a9bddb;
}

.ranking_section .ranking_list .item_list__item {
  background: #a9bddb;
}
#CartDrawer .drawer__header {
  background-color: #ffdde2;
  color: #fff;
}

.minicart-drawer--right {
  border-left: none;
}

#CartDrawer .drawer__title {
  color: #fff;
}

#CartDrawer .drawer__close button {
  position: relative;
  top: -.3rem;
  mask-image:
    url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2235%22%20height%3D%2235%22%20viewBox%3D%220%200%2035%2035%22%3E%3Cpath%20d%3D%22M0%2C0H35V35H0Z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M15.731%2C13.488l7.852-7.852%2C2.243%2C2.243-7.852%2C7.852%2C7.852%2C7.852-2.243%2C2.243-7.852-7.852L7.879%2C25.827%2C5.636%2C23.584l7.852-7.852L5.636%2C7.879%2C7.879%2C5.636Z%22%20transform%3D%22translate(1.769%201.769)%22%20fill%3D%22%23212121%22%2F%3E%3C%2Fsvg%3E');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 93%;
  cursor: pointer;
  text-indent: -200px;
  overflow: hidden;
  background: #fff;
}

.tab_btn_area .tab_btn {
  background: #fff;
}

.tab_btn_area .tab_btn.selected {
  border-color: #a9bddb;
  color: #a9bddb;
}

.sightjack_img {
  padding-top: 3.8rem;
  background-color: #d3ddf8;
  width: 100%;
}

.sightjack_img img {
  display: block;
  margin: 0 auto;
  width: 30rem;
}

/* PC用*/

@media (min-width: 769px) {

  #header {
    background-color: #a9bddb !important;
  }

  #header .header_nav .menu_contents {
    background-color: #c3d0e4 !important;
  }

  .header_nav_list + .bg_header_nav_list {
    background: none;
  }

  #header .header_inner,
  #header .header_inner .header_nav_list a:hover {
    color: #707070;
  }

  #header .header_inner .header_nav_list span,
  #header .header_inner .header_nav_list a {
    color: #838383;
  }

  #header .header_search_box .search_cate_btn,
  #header .header_search_box .search_box input,
  #header .header_search_box .search_cate_list ul {
    background-color: #fff !important;
  }

  .header_nav .menu_contents {
    top: 15.8rem;
  }

  .header_nav .menu_contents::before {
    top: -3rem;
  }

  #header .header_nav_list {
    margin-top: .9rem;
    margin-bottom: 2.3rem;
    padding: 0 1rem;
    background: #ffdde2;
    border-radius: .5rem;
  }

  #header .header_nav_list > li {
    line-height: 1.2;
  }

  #header .header_search_box .search_cate_btn {
    border-right-color: #a9bddb;
  }

  #header .header_nav .cate_list dt, #header .header_nav .cate_list dt > a {
    background: #ffdde2;
    font-weight: bold;
    color: #fff;
  }

  #header .header_nav .cate_list > li > p > a {
    background: #fffbc7;
    color: #a7a7a7;
  }

  /* --- カテゴリボタン --- */
  .header_search_box .search_cate_list .btn_all_cate span,
  .header_search_box .search_cate_list .btn_all_cate a {
    background: #bd8c66;
  }
}

/* SP用*/
@media (max-width: 768px) {

  .Benent_section .section_head .ttl_section {
    color: #a9bddb;
  }

  #header.scroll #header_bottom.active .inner {
    background: #c3d0e4;
  }

  #header .header_nav {
    padding-top: 7rem;
    background-color: #f8faff;
  }

  #header .sp_menu_search {
    background: #c3d0e4;
  }

  #header .header_logo {
    padding-top: calc(18* (100vw / 750));
  }

  #header .header_inner,
  #header.sp_open .header_inner .hamburger::before,
  #header.sp_open .header_inner .hamburger::after {
    background-color: #a9bddb !important;
  }

  #header .header_inner .hamburger {
    background-color: #fff;
  }

  #header .header_inner .hamburger::before,
  #header .header_inner .hamburger::after,
  #header .header_inner .hamburger span {
    background-color: #a9bddb;
  }

  #header .head_site_menu ul li {
    background-color: #ffd1d7;
    color: #fff;
  }

  #header .head_site_menu ul li span {
    color: #9f6e75;
  }

  #header .head_site_menu img {
    mix-blend-mode: luminosity;
  }

  #header .header_nav > dl > dt {
    color: #a9bddb;
  }

  #header .header_nav .header_nav_list > li.sp_menu_acc .sp_menu_acc_btn::before {
    mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2234%22%20height%3D%2231%22%20viewBox%3D%220%200%2034%2031%22%3E%0A%20%20%3Cpath%20id%3D%22%E5%A4%9A%E8%A7%92%E5%BD%A2_1%22%20data-name%3D%22%E5%A4%9A%E8%A7%92%E5%BD%A2%201%22%20d%3D%22M14.37%2C4.8a3%2C3%2C0%2C0%2C1%2C5.261%2C0L31.564%2C26.558A3%2C3%2C0%2C0%2C1%2C28.933%2C31H5.067a3%2C3%2C0%2C0%2C1-2.63-4.442Z%22%20fill%3D%22%238ebd9b%22%2F%3E%0A%3C%2Fsvg%3E%0A');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: calc(34 * (100vw / 750)) calc(31 * (100vw / 750));
    background: #a9bddb;
  }

  #header .header_nav .hotWords_list li a {
    border-color: #a9bddb;
    background: #fff;
    color: #a9bddb;
  }

  #header .header_nav .header_nav_utility > li > a {
    position: relative;
  }

  #header .header_nav .header_nav_utility > li > a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #a7a7a7;
    opacity: 0.5;
    mix-blend-mode: soft-light;
  }
}

/* コンテンツ
============================================================= */

/* ---- MV ---- */
.top_mainvisual_section {
  background-color: #d3ddf8;
}

.top_mainvisual_section .swiper-pagination-bullet {
  background-color: #ffffff;
  opacity: .8;
}

.top_mainvisual_section .swiper-pagination-bullet-active {
  background-color: #a9bddb;
}

.top_cate_section {
  background-color: #d3ddf8;
}

.top_cate_section .top_section__inner {
  padding-bottom: calc(100 * (100vw / 750));
}

.top_marquee {
  margin-top: 0;
}

/* ---- 特設バナー ---- */
#Contents .top_special_section {
  position: relative;
  z-index: 2;
  margin-bottom: 0;
  padding-top: 5rem;
  padding-bottom: 0;
  background-color: #d3ddf8;
}

#Contents .top_special_section .top_section__inner {
  width: 100rem;
  position: relative;
  line-height: 0;
  text-align: center;
}

#Contents .top_special_section .top_section__inner a {
  display: block;
  position: relative;
  margin: 0 auto;
  width: 90rem;
  z-index: 10;
}

#Contents .top_special_section .top_section__inner a::before {
  content: '';
  position: absolute;
  transform: rotate(20deg);
  top: -3rem;
  left: -10rem;
  width: 26.6rem;
  height: 13.2rem;
  background-image: url(../../../Contents/ImagesPkg/sightjack/251106/deco-left.svg);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
}

#Contents .top_special_section .top_section__inner a::after {
  content: '';
  position: absolute;
  transform: rotate(30deg);
  bottom: 1rem;
  right: -9rem;
  width: 23.6rem;
  height: 11.6rem;
  background-image: url(../../../Contents/ImagesPkg/sightjack/251106/deco-right.svg);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
}

#Contents .top_special_section .top_section__inner a:hover {
  opacity: 1;
}

#Contents .top_special_section {
  position: relative;
}

.top_sightjack_flower {
  overflow: hidden;
  position: fixed;
  top: -10%; /* 画面の上からスタート */
  animation: fall linear infinite;
  will-change: transform; /* パフォーマンス最適化 */
  width: 2.1rem;
  height: 2.1rem;
  z-index: 20;
  font-size: 20px; /* 花の大きさ */
  line-height: 2.1rem;
  text-indent: -3000px;
}

.top_sightjack_flower::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../../Contents/ImagesPkg/sightjack/250609/icn_flower.svg?240121) no-repeat 0 0;
  background-size: 100% 100%;
  animation: spin 8s linear infinite;
  content: "";
}

.top_sightjack_flower:nth-child(2n)::before {
  background-image: url(../../Contents/ImagesPkg/sightjack/250609/icn_flower2.svg?240121);
}

.top_sightjack_flower:nth-child(3n)::before {
  background-image: url(../../Contents/ImagesPkg/sightjack/250609/icn_flower3.svg?240121);
}

.top_sightjack_flower.is-star {
  width: 1.9rem;
  height: 1.9rem;
}

.top_sightjack_flower.is-star::before,
.top_sightjack_flower.is-star:nth-child(2n)::before,
.top_sightjack_flower.is-star:nth-child(3n)::before {
  background-image: url(../../Contents/ImagesPkg/sightjack/250609/icn_star.svg);
}

@keyframes fall {
  0% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(100vh);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg); /* 初めは回転なし */
  }
  100% {
    transform: rotate(360deg); /* 360度回転 */
  }
}

@keyframes fuwafuwa {
	0%, 100% {
		transform: rotate(6deg);
	}
	50% {
		transform: rotate(-6deg);
	}
}

#Contents .top_special_section .top_section__inner a .itemArea__button:hover {
  background-color: #a9bddb;
  color: #fff;
}

#Contents .top_special_section .top_section__inner a .itemArea__button:hover .text::after {
  background: #fff;
}

.top_special_section .itemArea__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  background-color: #fff;
  border: 1px solid #a9bddb;
  border-radius: 100px;
  color: #a9bddb;
  font-size: 1.8rem;
  line-height: 1.4;
  letter-spacing: .04em;
  width: 24.8rem;
  height: 4.6rem;
}


.top_special_section .itemArea__button .text {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 3rem;
  padding-left: 5rem;
}

.top_special_section .itemArea__button .text::after {
  content: '';
  transition: all .6s ease;
  margin: auto;
  top: 0;
  bottom: 0;
  width: 2.7rem;
  height: 0.8rem;
  mask-image: url(../../../Contents/ImagesPkg/sightjack/251106/arrow.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  background: #a9bddb;
  z-index: 1;
}


/* ---- 下部バナー ---- */

.top_section .bnr_miffy,
.bnr_miffycafe {
}

.top_section .bnr_miffy .articles_cont,
.top_section .bnr_miffycafe .articles_cont {
  font-family: "HelveticaRounded", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN,HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
  text-align: center;
}

.top_section .bnr_miffy .articles_cont,
.top_section .bnr_miffycafe .articles_cont {
  font-weight: bold;
}

.top_section .bnr_miffy .articles_cate,
.top_section .bnr_miffycafe .articles_cate {
  margin: 1rem auto;
}

.top_section .bnr_miffy {
}

.top_section .bnr_miffy .articles_cate {
  width: 13rem;
}

.top_section .bnr_miffycafe {
}

.top_section .bnr_miffycafe .articles_cate {
  width: 16rem;
}

.articles_list .bnr_miffy .articles_ttl,
.articles_list .bnr_miffycafe .articles_ttl {
  font-size: 1.4rem;
  font-weight: bold;
}

.top_section .bnr_miffy .articles_ttl__date,
.top_section .bnr_miffycafe .articles_ttl__date {
  display: inline-block;
  padding-top: 1rem;
  font-size: 1.3rem;
  line-height: 1.4;
  color: #EB6100;
}


/* -- deco1 -- */

.night_section {
  overflow: hidden;
  width: 70rem;
  margin: 4rem auto 0;
}

.night_section .deco1 {
  position: relative;
  padding-top: 18rem;
  padding-bottom: 0rem;
}

.night_section .deco1 .deco_head {
  display: inline-block;
  position: absolute;
  top: 3rem;
  width: 30rem;
}

.night_section .deco1 .deco_head1 {
  right: 38rem;
  transform: translateX(-80%);
}

.night_section .deco1.effect .deco_head1 {
  animation: deco_head1 1.4s ease-in-out 1 forwards;
}

.night_section .deco1.effect .deco_head1 img {
  width: 100%;
}

@keyframes deco_head1 {
  0% {
   transform: translateX(-80%);
  }
  100% {
    transform: translateX(0);
  }
}

.night_section .deco1 .deco_head2 {
  left: 38rem;
  transform: translateX(80%);
}

.night_section .deco1.effect .deco_head2 {
  animation: deco_head2 1.4s ease-in-out 1 forwards;
}

@keyframes deco_head2 {
  0% {
   transform: translateX(80%);
  }
  100% {
    transform: translateX(0);
  }
}

.night_section .deco1 .deco_cont {
  position: relative;
  display: block;
  width: 16rem;
  margin: auto;
}

.night_section .deco1 .deco_cont::before {
  position: absolute;
  top: -4rem;
  left: 2rem;
  width: 0;
  height: 5.2rem;
  background: url(../../Contents/ImagesPkg/sightjack/250609/night_item_deco1_txt.svg) no-repeat;
  background-size: 12rem;
  content: "";
}

.night_section .deco1.effect .deco_cont::before {
  animation: night_deco 1s ease-in-out 0.4s 1 forwards;
}

@keyframes night_deco {
  0% {
    width: 0;
  }
  100% {
    width: 12rem;
  }
}

/* ---- Articles List ---- */

.articles_list {
  padding-top: 1rem;
}

.articles_list ul {
  display: flex;
  gap: 3rem;
}

.articles_list .articles_list__item {
  display: block;
  width: 54rem;
}

.articles_list .articles_list__item a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  border-radius: 1.2rem;
  background: #fff;
  box-shadow: 0 3px 10px rgb(0 0 0 / 18%);
  overflow: hidden;
  line-height: 0;
}

.articles_list .articles_img {
  width: 60%;
  border-radius: 0;
  margin: 0;
  box-shadow: none;
}

.articles_list .articles_cont {
  width: 40%;
  padding: 0 2rem;
}

.articles_list .articles_cate {
  padding: .7rem 0 1.2rem;
}

.articles_list .articles_cate .txt_lg {
  font-size: 2.6rem;
}

.articles_list .articles_cate .txt_sm {
  padding-bottom: .5rem;
  font-size: 1.4rem;
}

.articles_list .articles_ttl {
  margin: 0 0 1rem;
  font-size: 1.6rem;
}

.BenentSnap_section,
.BenentVideo_section {
  mix-blend-mode: multiply;
}

.top_hotwords_section {
  position: relative;
  padding-top: 2rem;
  z-index: 0;
}

.top_hotwords_section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 37rem;
  background: #fffbc7;
  z-index: -1;
}

.bnr_area {
  padding-top: 18rem;
}

/* ページトップボタンのスタイル */
.page-top-btn-sightjack {
  position: fixed;
  bottom: 4rem;
  right: 2rem;
  padding: 1rem 1.2rem 5.7rem;
  transition: opacity 0.3s, visibility 0.3s;
  background: url(../../../Contents/ImagesPkg/sightjack/251106/top.svg) no-repeat center bottom 1rem;
  background-size: 3rem;
  background-color: #fff;
  box-shadow: 0 0 2px rgba(169, 189, 219, .5);
  border-radius: 1rem;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 500;
  display: none;
  z-index: 1000;
  line-height: 1.2;
  text-align: center;
}

.page-top-btn-sightjack:hover {
  opacity: 0.6;
}

.page-top-btn-sightjack span {
  color: #9dbed7;
  font-weight: bold;
}


/* PC用*/
@media (min-width: 769px) {

  .top_mainvisual_section {
    padding-top: 3rem;
  }

  .top_sightjack_flower {
    width: 2.1rem;
    height: 2.1rem;
    line-height: 2.1rem;
  }


  @keyframes fuwafuwa{
    0%, 100% {
      transform: rotate(8deg);
    }
    50% {
      transform: rotate(-8deg);
    }
  }

  /* ---- 帯バナーエリア ---- */
  #Contents .top_news_section {
    margin-bottom: 0;
    padding-bottom: 3rem;
  }

  .top_cate_section .top_section__inner {
    padding-bottom: 10rem;
  }

  .top_section .bnr_miffy:nth-child(2) .articles_cate {
    margin-bottom: 0.5rem;
  }

  .top_section .bnr_miffy:nth-child(2) .articles_ttl__date {
    padding-top: 0.3rem;
  }

}

/* SP用*/
@media (max-width: 768px) {

  #Contents {
    margin-top: -.2rem;
  }

  .header_search_box .search_cate_list ul {
    background: #fff;
  }

  .header_search_box .search_cate_list .btn_all_cate span {
    background: #a9bddb;
  }

  #header_bottom .inner {
    padding: calc(28 * (100vw / 750)) calc(18 * (100vw / 750));
    background: #c3d0e4;
  }

  #header .header_search_box .search_box input {
    background-color: #fff!important;
  }

  #header .header_search_box .search_cate_btn {
    background: #fff;
    border-right: 2px solid #a9bddb;
  }

  #header .header_nav_list .sp_menu__more_area::before {
    background: linear-gradient(180deg, rgb(249 250 255 / 0%) 0%, rgb(249 250 255) 90%);
  }

  /* ---- セクション余白 ---- */

  #Contents .top_special_section{
    padding: 0;
  }

  /* -- セクション色付け化 -- */

  .special_area {
    padding-bottom: calc(30 * (100vw / 390));
  }

  /* ---- 特設バナー ---- */
  #Contents .top_special_section {
    margin-top: calc(-50 * (100vw / 428));
    padding: 0 0 calc(50 * (100vw / 428));
  }

  #Contents .top_special_section .top_section__inner {
    width: 100%;
  }

  .top_sightjack_flower {
    width: 4.5rem;
    height: 4.5rem;
    line-height: 4.5rem;
  }

  .top_sightjack_flower.is-star {
    width: 4.6rem;
    height: 4.6rem;
    line-height: 4.6rem;
  }


  @keyframes fuwafuwa{
    0%, 100% {
      transform: rotate(8deg);
    }
    50% {
      transform: rotate(-8deg);
    }
  }

  #Contents .top_special_section .top_section__inner a {
    margin: 0 auto;
    width: 100%;
  }

  #Contents .top_special_section .top_section__inner a .itemArea__button .text {
    column-gap: calc(30 * (100vw / 755));
    padding-left: calc(60 * (100vw / 755));
  }

  #Contents .top_special_section .top_section__inner a .itemArea__button .text::after {
    width: calc(36 * (100vw / 755));
    height: calc(16 * (100vw / 755));
  }

  #Contents .top_special_section .top_section__inner a::before {
    top: calc(-60 * (100vw / 755));
    left: calc(-60 * (100vw / 755));
    width: calc(295 * (100vw / 755));
    height: calc(132 * (100vw / 755));
  }

  #Contents .top_special_section .top_section__inner a::after {
    bottom: calc(14 * (100vw / 755));
    right: calc(-70 * (100vw / 755));
    width: calc(253 * (100vw / 755));
    height: calc(133 * (100vw / 755));
  }

  .top_special_section .itemArea__button {
    margin-top: calc(34 * (100vw / 755));
    padding-top: calc(0 * (100vw / 755));
    font-size: calc(34 * (100vw / 755));
    width: calc(320 * (100vw / 755));
    height: calc(80 * (100vw / 755));
  }

  /* ---- Articles List ---- */

  .articles_list {
    padding-top: calc(10 * (100vw / 428));
  }

  .articles_list ul {
    flex-direction: column;
    gap: calc(30 * (100vw / 428)) 0;
  }

  .articles_list .articles_list__item {
    width: 100%;
  }

  .articles_list .articles_list__item a {
    border-radius: calc(10 * (100vw / 428));
    box-shadow: 0 3px 8px rgb(0 0 0 / 18%);
  }

  .articles_list .articles_img {
    width: 55%;
  }

  .articles_list .articles_cont {
    width: 45%;
    padding: 0 calc(10 * (100vw / 428));
  }

  .articles_list .articles_cate {
    padding: calc(10 * (100vw / 428))0 calc(12 * (100vw / 428));
  }

  .articles_list .articles_cate .txt_lg {
    font-size: calc(20 * (100vw / 428));
  }

  .articles_list .articles_cate .txt_sm {
    padding-bottom: calc(10 * (100vw / 428));
    font-size: calc(13 * (100vw / 428));
  }

  .articles_list .articles_ttl {
    margin: 0 0 calc(10 * (100vw / 428));
    font-size: calc(16 * (100vw / 428));
  }

  /* ---- 下部バナー ---- */

  .top_section .bnr_miffy .articles_cate,
  .top_section .bnr_miffycafe .articles_cate {
    margin: 0 auto;
  }

  .top_section .bnr_miffy .articles_cate {
    width: calc(117 * (100vw / 428));
  }

  .top_section .bnr_miffycafe {
  }

  .top_section .bnr_miffycafe .articles_cate {
    width: calc(150 * (100vw / 428));
  }

  .articles_list .bnr_miffy .articles_ttl,
  .articles_list .top_section .bnr_miffycafe .articles_ttl {
    font-size: calc(12 * (100vw / 428));
    -webkit-line-clamp: 5;
  }

  .top_section .bnr_miffy .articles_ttl__date,
  .top_section .bnr_miffycafe .articles_ttl__date {
    padding-top: calc(5 * (100vw / 428));
    font-size: calc(13 * (100vw / 428));
  }

  .top_section .bnr_miffy .articles_ttl__date br,
  .top_section .bnr_miffycafe .articles_ttl__date br {
    display: none;
  }

  /* -- deco1 -- */

  .BenentVideo_section {
    padding-bottom: calc(440 * (100vw / 750));
  }

  .night_section {
    width: 100%;
    margin: calc(40 * (100vw / 428)) auto 0;
  }

  .night_section .deco1 {
    padding-top: calc(224* 100vw / 750);
    padding-bottom: calc(0* 100vw / 750);
  }

  .night_section .deco1 .deco_head {
    top: 0;
    width: calc(505* 100vw / 750);
  }

  .night_section .deco1 .deco_head1 {
    right: calc(420* 100vw / 750);
  }

  .night_section .deco1 .deco_head2 {
    left: calc(420* 100vw / 750);
  }

  .night_section .deco1 .deco_cont {
    width: calc(330* 100vw / 750);
  }

  .night_section .deco1 .deco_cont::before {
    top: calc(-63* 100vw / 750);
    left: calc(44* 100vw / 750);
    height: calc(52* 100vw / 750);
    background-size: calc(244* 100vw / 750);
  }

  @keyframes night_deco {
    0% {
      width: 0;
    }
    100% {
      width: calc(244* 100vw / 750);
    }
  }

  .sightjack_img {
    padding-block: calc(26 * (100vw / 586)) calc(20 * (100vw / 586));
  }

  .sightjack_img img {
    width: 70%;
  }

  .top_hotwords_section::before {
    height: calc(900* 100vw / 750);
  }

  .bnr_area {
    padding-top: calc(116* 100vw / 750);
  }

  /* ページトップボタンのスタイル */
  .page-top-btn-sightjack {
    bottom: calc(20 * (100vw / 428));
    right: calc(15 * (100vw / 428));
    padding: calc(10 * (100vw / 428)) calc(12 * (100vw / 428)) calc(59 * (100vw / 428));
    background-size: calc(32 * (100vw / 428));
    border-radius: calc(12 * (100vw / 428));
    font-size: calc(13 * (100vw / 428));
    letter-spacing: 0.02em;
    background-position: center bottom calc(9 * (100vw / 428));
  }

  .page-top-btn-sightjack span {
    font-size: .9em;
  }

}
