﻿@charset "UTF-8";

/* =============================================================

   サイトジャック用 CSS

============================================================= */

#header #header_bottom.active {
  height: auto;
  z-index: auto;
  visibility: visible;
}

#header #header_bottom.active .inner {
  opacity: 1;
}

/* PC用*/
@media (min-width: 769px) {

  #header #header_bottom.active .inner {
    padding: 1.5rem 0;
  }

  #header #header_bottom.active .inner {
    top: 0;
    animation: hdrfx2 .2s ease 0s 1 forwards;
  }

}

/* SP用*/
@media (max-width: 768px) {

  #header #header_bottom.active .inner {
    top: 0;
    animation: hdrfx3 .2s ease 0s 1 forwards;
    transition: none;
  }
  @keyframes hdrfx3 {
    100% {
      top: calc(0 * (100vw / 428));
    }
  }

  #header #header_bottom.active .inner {
    padding: calc(10 * (100vw / 390)) calc(15 * (100vw / 390));
  }
  #header.scroll #header_bottom.active .inner {
    animation: hdrfx2 .2s ease 0s 1 forwards;
  }

}

/* コンテンツ
============================================================= */

#Wrap {
  padding-top: 6.8rem;
}

/* -- セクション色付け化 -- */
#Contents .top_mainvisual_section,
#Contents .top_news_section,
#Contents .top_special_section {
}

#Contents .top_info_section {
  background: var(--color-sightjack-08);
}

#Contents .top_info_section li,
#Contents .top_info_section a:not(.header_tagline a) {
  /* color: var(--color-sightjack-txt_header); */
}

#Contents .top_info_section li a,
#Contents .top_info_section li div {
  color: #707070;
}

/* -- メインビジュアル -- */
#Contents .top_mainvisual_section {
  position: relative;
  z-index: 0;
}

#Contents .top_mainvisual_section::before,
#Contents .top_mainvisual_section::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

#Contents .top_mainvisual_section::before {
  top: -14rem;
  left: 0;
  width: 49.6rem;
  height: 70.6rem;
  background: url(/Contents/ImagesPkg/sightjack/260312/img-pc_1.png) no-repeat 0 0;
  background-size: 100%;
  z-index: -1;
}

#Contents .top_mainvisual_section::after {
  bottom: -13rem;
  right: -.4rem;
  width: 18.4rem;
  height: 22.8rem;
  background: url(/Contents/ImagesPkg/sightjack/260312/img-pc_2.png) no-repeat 0 0;
  background-size: 100%;
  z-index: 1;
}

#Contents .top_mainvisual_section .swiper-pagination-bullet {
  background-color: #fff;
  border-color: var(--color-sightjack-07);
}

#Contents .top_mainvisual_section .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--color-sightjack-05);
  border-color: var(--color-sightjack-05);
}


/* ピックアップ
============================================================= */

#Contents .top_nav_section {
  position: relative;
  z-index: 2;
  margin-bottom: 0;
  padding-top: 3rem;
  background-color: var(--color-sightjack-08);
  border-bottom: 10px solid var(--color-sightjack-08);
  box-shadow: unset;
}

#Contents .top_nav_section::before,
#Contents .top_nav_section::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

#Contents .top_nav_section::before {
  top: -18rem;
  right: 0;
  width: 18.2rem;
  height: 24.2rem;
  background: url(/Contents/ImagesPkg/sightjack/260312/img-pc_4.png) no-repeat 0 0;
  background-size: 100%;
  z-index: 1;
}

#Contents .top_nav_section::after {
  bottom: -11rem;
  left: 0;
  width: 23.9rem;
  height: 25.2rem;
  background: url(/Contents/ImagesPkg/sightjack/260312/img-pc_5.png) no-repeat 0 0;
  background-size: 100%;
  z-index: 1;
}


/* 人気の商品
============================================================= */

.ranking_section {
  position: relative;
  z-index: 0;
  margin: 0 auto;
  padding-top: 5rem;
  padding-bottom: 3rem;
}

.ranking_section::before {
  content: "";
  position: absolute;
  pointer-events: none;
}

.ranking_section::before {
  margin: auto;
  bottom: -43rem;
  right: -4%;
  left: 0;
  width: 84rem;
  height: 62.4rem;
  background: url(/Contents/ImagesPkg/sightjack/260312/img-pc_15.png) no-repeat 0 0;
  background-size: 100%;
  z-index: -1;
}

.tab_btn_area .tab_btn.selected {
  background-color: var(--color-sightjack-05);
  border-color: var(--color-sightjack-05);
}


/* おすすめのアイテム
============================================================= */

.season_section {
  position: relative;
  z-index: 0;
  background: url(/Contents/ImagesPkg/sightjack/260312/img-pc_13.png) no-repeat right 0% bottom 2%;
  background-size: auto 62.4rem;
}

.season_section::before,
.season_section::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.season_section::before {
  bottom: -51rem;
  left: 21rem;
  width: 63.4rem;
  height: 72.2rem;
  background: url(/Contents/ImagesPkg/sightjack/260312/img-pc_14.png) no-repeat 0 0;
  background-size: 100%;
  z-index: -1;
}

.season_section::after {
  bottom: -23rem;
  right: 0;
  width: 21.4rem;
  height: 31.7rem;
  background: url(/Contents/ImagesPkg/sightjack/260312/img-pc_6.png) no-repeat 0 0;
  background-size: 100%;
  z-index: 1;
}

.season_section .top_section__inner {
  padding-top: 6rem;
}

.rmd_category {
  border-color: var(--color-sightjack-08i);
}


/* ホットキーワード
============================================================= */

.top_hotword_section {
  position: relative;
  z-index: 2;
  margin-bottom: 0;
  background: none;
}

.top_hotword_section::before {
  content: "";
  position: absolute;
  pointer-events: none;
}

.top_hotword_section::before {
  top: -56rem;
  left: 0;
  width: 18.3rem;
  height: 49.6rem;
  background: url(/Contents/ImagesPkg/sightjack/260312/img-pc_3.png) no-repeat 0 0;
  background-size: 100%;
  z-index: 1;
}

.top_hotword_section .top_section__inner {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

body #Wrap .tag_list a,
body #Wrap .tag_list a:link {
  background-color: var(--color-sightjack-07);
  color: #fff!important;
}

.tab_btn_area .tab_btn {
  background-color: #fff;
}

.sightjack_img {
  margin: 3.8rem auto 0;
  width: 30rem;
}

/* ---- バナー ---- */

#Contents .top_special_section .swiper-pagination-bullet {
  border-color: var(--color-sightjack-05);
}

#Contents .top_special_section .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--color-sightjack-05);
  border-color: var(--color-sightjack-05);
}

.top_special_section .feature_list_common .feature_cat {
  color: #000;
  background-color: #f4fffa;
}

/* -- 最新特集 -- */
.feature_list_common .top_special_section .feature_cat,
.header_feature .feature_cat {
  color: var(--color-sightjack-05);
}


/* ---- 特設バナー ---- */

#Contents .top_special_section {
  margin: 2rem auto 5rem;
  width: 98rem;
}

#Contents .top_special_section .sightjack_collection_logo {
    display: block;
    margin: auto;
    width: 46%;
}

#Contents .top_special_section .itemArea__button.cv__button {
  display: block;
  margin: 1rem auto 0;
  width: 20rem;
}


/* ---- ベネントエリア ---- */

#BenentSnap,
#BenentVideo {
  position: relative;
  background-color: var(--color-sightjack-08);
}

#BenentSnap::before,
#BenentVideo::before {
  content: "";
  position: absolute;
  pointer-events: none;
}

#BenentSnap {
  padding-top: 6rem;
}

#BenentSnap::before {
  top: -40rem;
  left: 0;
  width: 19.1rem;
  height: 50.9rem;
  background: url(/Contents/ImagesPkg/sightjack/260312/img-pc_7.png) no-repeat 0 0;
  background-size: 100%;
  z-index: -1;
}

#BenentVideo {
  padding-top: 1rem;
  border: none;
  box-shadow: unset;
}

#BenentVideo::before {
  bottom: -16rem;
  right: 0;
  width: 22.1rem;
  height: 41.8rem;
  background: url(/Contents/ImagesPkg/sightjack/260312/img-pc_8.png) no-repeat 0 0;
  background-size: 100%;
  z-index: 1;
}


/* ---- 新商品 ---- */

.newitem_section {
  position: relative;
  z-index: 0;
  border-top: none;
}

.newitem_section::before,
.newitem_section::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.newitem_section::before {
  top: -6rem;
  left: -3rem;
  width: 84rem;
  height: 62.4rem;
  background: url(/Contents/ImagesPkg/sightjack/260312/img-pc_15.png) no-repeat 0 0;
  background-size: 100%;
}

.newitem_section::after {
  bottom: -8rem;
  right: -4rem;
  width: 68.4rem;
  height: 75.2rem;
  background: url(/Contents/ImagesPkg/sightjack/260312/img-pc_14.png) no-repeat 0 0;
  background-size: 100%;
}

.newitem_section,
.first-user .newitem_section {
  padding-top: 5.5rem;
  padding-bottom: 2.5rem;
  background: #fff;
}

.newitem_section .item_list {
  background: rgb(255 255 255 / 80%);
}

/* ---- 肌診断 ---- */

.top_skinCheck_section {
  background-color: var(--color-sightjack-06);
}

.top_skinCheck_section::before,
.top_skinCheck_section::after {
  mix-blend-mode: luminosity;
}

.skinCheck .skinCheck__ttl--obi {
  background-color: var(--color-sightjack-05);
}


/* ---- 特集 ---- */

.feature_section {
  border-bottom: none;
  background: var(--color-sightjack-08);
  padding-top: 4.5rem;
}

.feature_section::before,
.feature_section::after {
  pointer-events: none;
  z-index: 0;
}

.feature_section::before {
  top: -8rem;
  left: 4rem;
  width: 17rem;
  height: 14.4rem;
  background: url(/Contents/ImagesPkg/sightjack/260312/img-pc_9.png) no-repeat 0 0;
  background-size: 100%;
}

.feature_section .feature_list_common {
  border-bottom: none;
}

.feature_section .feature_list_common .feature_cat {
  background-color: var(--color-sightjack-05);
  color: var(--color-sightjack-txt_header);
}

/* ---- 記事 ---- */

.articles_section {
  background: left 24% top -17% / 68.8rem auto no-repeat url(/Contents/ImagesPkg/sightjack/260312/img-pc_14.png), right 29% bottom 25% / 89.2rem auto no-repeat url(/Contents/ImagesPkg/sightjack/260312/img-pc_15.png);
  z-index: 2;
}

.articles_section::before,
.articles_section::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.articles_section::before {
  top: -32rem;
  right: 0;
  width: 15.7rem;
  height: 40.9rem;
  background: url(/Contents/ImagesPkg/sightjack/260312/img-pc_10.png) no-repeat 0 0;
  background-size: 100%;
  z-index: 1;
}

.articles_section::after {
  bottom: 10rem;
  left: 0;
  width: 100%;
  height: 73.6rem;
  background: url(/Contents/ImagesPkg/sightjack/260312/img-pc_11.png) no-repeat left 0% top 0%, url(/Contents/ImagesPkg/sightjack/260312/img-pc_12.png) no-repeat right 0% bottom 0%;
    background-size: 20rem auto, 18rem auto;
  z-index: 1;
}

.btn_viewmore a {
  color: #000 !important;
  background-image: url(../../../Contents/ImagesPkg/common/icn_btn_arw_black.svg);
}


/* sight-jack_articles
---------------------------------- */

.sight-jack_articles {
  margin: 7rem auto 16rem;
  padding-top: 0;
}

.sight-jack_articles .articles_list__inner {
  display: flex;
  opacity: 1;
}

.sight-jack_articles .articles_list__item {
  display: block;
  text-align: center;
  width: 54rem;
}

.sight-jack_articles .articles_list__item a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  border-radius: 1.2rem;
  background: var(--color-sightjack-01);
  box-shadow: 0 3px 10px rgb(0 0 0 / 18%);
  overflow: hidden;
  line-height: 0;
}

.sight-jack_articles .articles_img {
  width: 52%;
  border-radius: 0;
  margin: 0;
  box-shadow: none;
}

.sight-jack_articles .articles_cont {
  width: 48%;
  padding: 0 1.2rem;
}

.sight-jack_articles .articles_cate {
  padding: .7rem 0 1.5rem;
}

.sight-jack_articles .articles_cate .txt_lg {
  font-size: 2.6rem;
}

.sight-jack_articles .articles_cate .txt_sm {
  padding-bottom: .5rem;
  font-size: 1.4rem;
}

.sight-jack_articles .articles_ttl {
  margin: 0;
  font-size: 1.6rem;
}


/* ロゴ・TOP TOボタン
 ---------------------------------- */

.sightjack_logo {
  position: relative;
  margin: 0 auto 2rem;
  width: 33rem;
  z-index: 2;
}

.page-top-btn-sightjack {
  display: grid;
  place-content: center;
  position: fixed;
  padding-top: .4rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
  bottom: 6%;
  right: 4%;
  background-color: #e8c4ce;
  border-radius: 50%;
  box-sizing: border-box;
  color: #fff !important;
  font-size: 1.5rem;
  line-height: 1.4;
  text-align: center;
  width: 8.6rem;
  height: 8.6rem;
  z-index: 11;
}

.page-top-btn-sightjack.is-show {
  opacity: 1;
  visibility: visible;
}

.page-top-btn-sightjack::before {
  content: '';
  position: absolute;
  top: -.8rem;
  right: -2.4rem;
  width: 4.6rem;
  height: 7.3rem;
  background-image: url(/Contents/ImagesPkg/sightjack/260312/panda.png);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 0;
}


/* PC用*/
@media (min-width: 769px) {

  #Contents .top_mainvisual_section {
    padding-top: 8rem;
    padding-bottom: 2rem;
  }

  .top_special_section {
    padding-bottom: 0 !important;
  }

  .top_special_section .swiper-pagination {
    bottom: 1.8rem !important;
  }

}

/* SP用*/
@media (max-width: 768px) {

  /* -- メインビジュアル -- */
  #Contents .top_mainvisual_section {
    padding: calc(60 * (100vw / 428)) 0 0;
  }

  #Contents .top_mainvisual_section::before {
    top: calc(-40 * (100vw / 390));
    width: 100%;
    height: calc(307 * (100vw / 390));
    background: url(/Contents/ImagesPkg/sightjack/260312/img-sp_1.png) no-repeat 0 0;
    background-size: 100%;
    z-index: -1;
  }

  #Contents .top_mainvisual_section::after {
    bottom: calc(-22 * (100vw / 390));
    right: 0;
    width: calc(62 * (100vw / 390));
    height: calc(96 * (100vw / 390));
    background: url(/Contents/ImagesPkg/sightjack/260312/img-sp_2.png) no-repeat 0 0;
    background-size: 100%;
    z-index: 1;
  }

  /* ---- 特設バナー ---- */

  #Contents .top_special_section {
    margin: calc(30 * (100vw / 375)) 0 0;
    width: 100%;
  }

  #Contents .top_special_section .sightjack_collection_logo {
    width: 70%;
  }

  #Contents .top_special_section .itemArea__button.cv__button {
    margin: calc(2 * (100vw / 375)) auto calc(54 * (100vw / 375));
    width: calc(162 * (100vw / 375));
  }

  /* サブバナー
  ============================================================= */
  .top_bnr_section {
    margin: calc(-20 * (100vw / 390)) 0 calc(18 * (100vw / 390));
  }


  /* ホットキーワード
  ============================================================= */

  .top_hotword_section::before {
    position: static;
    background: none;
  }



  /* ピックアップ
  ============================================================= */
  #Contents .top_nav_section {
    padding-block: calc(40 * (100vw / 428)) calc(20 * (100vw / 428));
    z-index: 1;
  }

  #Contents .top_nav_section::before {
    top: calc(-388 * (100vw / 390));
    width: calc(80 * (100vw / 390));
    height: calc(126 * (100vw / 390));
    background: url(/Contents/ImagesPkg/sightjack/260312/img-sp_4.png) no-repeat 0 0;
    background-size: 100%;
    z-index: 1;
  }

  #Contents .top_nav_section::after {
    bottom: calc(-92 * (100vw / 390));
    width: calc(126 * (100vw / 390));
    height: calc(140 * (100vw / 390));
    background: url(/Contents/ImagesPkg/sightjack/260312/img-sp_5.png) no-repeat 0 0;
    background-size: 100%;
    z-index: 1;
  }


  /* 人気の商品
  ============================================================= */

  .ranking_section {
    margin: 0;
    padding-top: calc(34 * (100vw / 428));
    padding-bottom: calc(12 * (100vw / 428));
    z-index: 1;
  }

  .ranking_section::before {
    margin: auto;
    bottom: calc(-356 * (100vw / 390));
    right: 0;
    width: 100%;
    height: calc(488 * (100vw / 390));
    background: url(/Contents/ImagesPkg/sightjack/260312/img-sp_16.png) no-repeat 0 0;
    background-size: contain;
    z-index: -1;
  }

  .tab_btn_area .tab_btn.selected {
    background-color: var(--color-sightjack-05);
    border-color: var(--color-sightjack-05);
  }



  /* おすすめのアイテム
  ============================================================= */

  .season_section {
    background: none;
    z-index: 1;
  }

  .season_section::before {
    bottom: calc(-300 * (100vw / 390));
    left: 0;
    width: 100%;
    height: calc(488 * (100vw / 390));
    background: url(/Contents/ImagesPkg/sightjack/260312/img-sp_15.png) no-repeat 0 0;
    background-size: 100%;
  }

  .season_section::after {
    bottom: calc(-26 * (100vw / 390));
    right: 0;
    width: calc(94 * (100vw / 390));
    height: calc(134 * (100vw / 390));
    background: url(/Contents/ImagesPkg/sightjack/260312/img-sp_6.png) no-repeat 0 0;
    background-size: 100%;
    z-index: 1;
  }

  .season_section .top_section__inner {
    padding-top: calc(50 * (100vw / 428));
  }


  /* ---- ベネントエリア ---- */

  #BenentSnap {
    padding-top: calc(68 * (100vw / 586));
  }

  #BenentSnap::before {
    top: calc(-242 * (100vw / 390));
    left: 0;
    width: calc(81 * (100vw / 390));
    height: calc(290 * (100vw / 390));
    background: url(/Contents/ImagesPkg/sightjack/260312/img-sp_7.png) no-repeat 0 0;
    background-size: contain;
    z-index: 1;
  }

  #BenentVideo {
    padding-top: calc(38 * (100vw / 586));
    padding-bottom: calc(68 * (100vw / 586));
  }

  #BenentVideo::before {
    bottom: calc(-57 * (100vw / 390));
    right: 0;
    width: calc(114 * (100vw / 390));
    height: calc(196 * (100vw / 390));
    background: url(/Contents/ImagesPkg/sightjack/260312/img-sp_8.png) no-repeat 0 0;
    background-size: contain;
    z-index: 2;
  }

  #BenentVideo .ranking_list .item_list__item {
    margin-top: 0;
    overflow: hidden;
  }

  /* ---- あなただけのおすすめ ---- */

  .top_section.recommend_section {
    position: relative;
    padding-top: calc(70 * (100vw / 586));
    padding-bottom: calc(68 * (100vw / 586));
    z-index: 1;
  }

  .item_list_common {
    margin: 0;
  }

  /* ---- 新商品 ---- */

  .newitem_section {
    margin-bottom: 0;
    padding-top: calc(74 * (100vw / 586));
    padding-bottom: calc(90 * (100vw / 586));
    z-index: 1;
  }

  .newitem_section::before {
    top: calc(-15 * (100vw / 390));
    width: 100%;
    height: calc(912 * (100vw / 390));
    background: left 0% top 0% / 100% auto no-repeat url(/Contents/ImagesPkg/sightjack/260312/img-sp_15.png), left 0% bottom 0% / 100% auto no-repeat url(/Contents/ImagesPkg/sightjack/260312/img-sp_16.png);
  }

  .newitem_section::after {
    bottom: calc(-58 * (100vw / 390));
    right: auto;
    left: 0;
    width: 100%;
    height: calc(574 * (100vw / 390));
    background: left 0% top 0% / calc(94 * (100vw / 390)) auto no-repeat url(/Contents/ImagesPkg/sightjack/260312/img-sp_9.png), right 0% bottom 0% / calc(77 * (100vw / 390)) auto no-repeat url(/Contents/ImagesPkg/sightjack/260312/img-sp_10.png);
    z-index: 1;
  }

  .newitem_section .item_list {
    background: rgb(255 255 255 / 70%);
  }

  /* ---- 肌診断 ---- */

  .top_skinCheck_section {
    margin: 0;
    padding: calc(58 * (100vw / 390)) 0 calc(56 * (100vw / 390));
    z-index: 0;
  }

  .skinCheck .skinCheck__ttl--obi {
    background-color: unset;
  }
  .skinCheck .skinCheck__ttl--obi span {
    background-color: var(--color-sightjack-05);
  }


  /* ---- 特集 ---- */

  .feature_section {
    padding-block: calc(70 * (100vw / 586)) calc(40 * (100vw / 586));
  }

  .feature_section::before {
    top: calc(-40 * (100vw / 390));
    left: 0;
    width: calc(78 * (100vw / 390));
    height: calc(74 * (100vw / 390));
    background: url(/Contents/ImagesPkg/sightjack/260312/img-sp_11.png) no-repeat 0 0;
    background-size: contain;
  }

  .feature_section::after {
    content: '';
    position: absolute;
    bottom: calc(-120 * (100vw / 390));
    right: 0;
    width: calc(77 * (100vw / 390));
    height: calc(280 * (100vw / 390));
    background: url(/Contents/ImagesPkg/sightjack/260312/img-sp_12.png) no-repeat 0 0;
    background-size: 100%;
    z-index: -1;
  }

  /* ---- 記事 ---- */

  .articles_section {
    position: relative;
    padding-block: calc(68 * (100vw / 586)) calc(40 * (100vw / 586));
    background: left 0% top 14% / 100% auto no-repeat url(/Contents/ImagesPkg/sightjack/260312/img-sp_17.png), right 0% bottom 13% / 100% auto no-repeat url(/Contents/ImagesPkg/sightjack/260312/img-sp_18.png);
    z-index: 0;
  }

  .articles_section::before {
    top: calc(652 * (100vw / 390));
    left: 0;
    right: auto;
    width: calc(99 * (100vw / 390));
    height: calc(260 * (100vw / 390));
    background: url(/Contents/ImagesPkg/sightjack/260312/img-sp_13.png) no-repeat 0 0;
    background-size: contain;
    z-index: 0;
  }

  .articles_section::after {
    bottom: calc(102 * (100vw / 390));
    left: auto;
    right: calc(-8 * (100vw / 390));
    width: calc(106 * (100vw / 390));
    height: calc(282 * (100vw / 390));
    background: url(/Contents/ImagesPkg/sightjack/260312/img-sp_14.png) no-repeat left 0% bottom 0%;
    background-size: contain;
    z-index: 1;
  }

  .articles_section .js_item_slidebar .simplebar-track.simplebar-horizontal {
    background: #375484;
  }

  .js_item_slidebar .simplebar-track.simplebar-horizontal .simplebar-scrollbar {
    left: -2px;
  }

  .js_item_slidebar .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
    right: calc(-31 * (100vw / 428));
  }


  /* sight-jack_articles
  ---------------------------------- */

  .sight-jack_articles {
    margin: calc(46 * (100vw / 428)) 0 calc(90 * (100vw / 428));
    overflow-x: unset;
  }

  .sight-jack_articles .articles_list__inner {
    flex-direction: column;
    gap: calc(20 * (100vw / 428)) 0;
  }

  .sight-jack_articles .articles_list__item {
    margin: 0;
    width: 100%;
  }

  .sight-jack_articles .articles_list__item a {
    border-radius: calc(10 * (100vw / 428));
    box-shadow: 0 3px 8px rgb(0 0 0 / 18%);
  }

  .sight-jack_articles .articles_img {
    width: 46%;
  }

  .sight-jack_articles .articles_cont {
    width: 54%;
    padding: 0 calc(10 * (100vw / 428));
  }

  .sight-jack_articles .articles_cate {
    padding: calc(10 * (100vw / 428))0 calc(12 * (100vw / 428));
  }

  .sight-jack_articles .articles_cate .txt_lg {
    font-size: calc(20 * (100vw / 428));
  }

  .sight-jack_articles .articles_cate .txt_sm {
    padding-bottom: calc(10 * (100vw / 428));
    font-size: calc(13 * (100vw / 428));
  }

  .sight-jack_articles .articles_ttl {
    font-size: calc(14 * (100vw / 428));
  }


  /* ロゴ・TOP TOボタン
  ---------------------------------- */

  .sightjack_logo {
    margin: calc(0 * (100vw / 390)) auto calc(20 * (100vw / 390));
    width: calc(260 * (100vw / 390));
  }

  .page-top-btn-sightjack {
    padding-top: calc(4 * (100vw / 390));
    bottom: 3%;
    right: 5%;
    font-size: calc(14 * (100vw / 390));
    line-height: 1.3;
    width: calc(72 * (100vw / 390));
    height: calc(72 * (100vw / 390));
  }

  .page-top-btn-sightjack::before {
    top: calc(-6 * (100vw / 390));
    right: calc(-21 * (100vw / 390));
    width: calc(38 * (100vw / 390));
    height: calc(58 * (100vw / 390));
  }

}
