@charset "UTF-8";



/*all----------------------------*/

html {

  font-size: 62.5%;

}



body {

  -webkit-tap-highlight-color: transparent;

}



#Wrap {

  width: auto;

}



#HeaderWrap {

  position: relative;

  z-index: 5;

}



@font-face {

  font-family: "AlrightSans";

  src: url("../font/AlrightSans-Bold.otf") format("opentype");

  font-weight: 700;

}



:root {

  --font_regular: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "ヒラギノ角ゴ Pro", "メイリオ", "Meiryo", sans-serif;

  --font_eng: "AlrightSans",  sans-serif;

  --color_regular: #565a5c;

  --color_regular: #565a5c;

  --color_accent_01: #bbdbcf;

  --color_accent_02: #72B89C;

  --color_accent_03: #5aad96;

  --color_caption: #707070;

   --color_line: #41685b;

}



.topic-path li {

  font-family: var(--font_regular);

}



.LP_page * {

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  line-height: 1;

  letter-spacing: 0;

}



.LP_page {

  width: 100%;

  background: #fff;

  font-family: var(--font_regular);

  color: var(--color_regular);

  overflow-x: clip;

  padding-bottom: 12rem;

}



.LP_page picture {

  display: block;

  font-size: 0;

}



.LP_page a {

  display: block;

}



.LP_page img {

  width: 100%;

  height: auto;

  vertical-align: bottom;

}



/*----------------------------all*/

.activePoint {

  opacity: 0;

  translate: 0 5rem;

  transition: opacity 1s, translate 1s;

}



.activePoint.active {

  opacity: 1;

  translate: unset;

}



.page_inner {

  width: 130rem;

  margin: 0 auto;

}



.main_ttl {

  width: 120rem;

  margin: 0 auto 6rem;

}



.each_area:nth-of-type(n+2) {

  margin-top: 15rem;

}



.area_ttl {

  display: grid;

  place-items: center;

  width: 60rem;

  min-height: 10rem;

  margin: 0 auto;

  padding: 2rem 0;

  border-top: solid var(--color_line) .2rem;

  border-bottom: solid var(--color_line) .2rem;

  font-size: 3.2rem;

  line-height: 1.5;

  letter-spacing: .05em;

  font-weight: 500;

  text-align: center;

}



.area_ttl span {

  line-height: 1.5;

}



.area_ttl .icon_crown {

  display: inline-block;

  width: 4.3rem;

  margin-left: .5rem;

  line-height: 1;

}



.area_lead {

  margin-top: 2rem;

  font-size: 1.4rem;

  line-height: 2;

  text-align: center;

}



.product_list {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 5rem;

  margin-top: 3rem;

  padding: 0 5rem;

}



.bestBuy_area .product_list {

  gap: 6rem;

}



.product_list li {

  width: 25rem;

}



.bestBuy_area .product_list li {

  width: 19.2rem;

}



.product_img {

  margin-bottom: 1rem;

}



.product_cat {

  display: grid;

  place-items: center;

  height: 3rem;

  margin-bottom: 1rem;

  background: var(--color_accent_01);

  font-size: 1.4rem;

  text-align: center;

  color: #fff;

}



.product_name {

  margin-bottom: 1rem;

  font-weight: 700;

  font-size: 1.2rem;

  line-height: 1.5;

  letter-spacing: .025em;

  font-feature-settings: "palt";

  text-align: center;

}



.product_price {

  font-size: 1.2rem;

  font-weight: 500;

  font-feature-settings: "palt";

  text-align: center;

}



.product_caption {

  margin-top: 1.5rem;

  font-size: 1.2rem;

  line-height: 1.65;

  color: var(--color_caption);

}



.product_link {

  position: relative;

  display: grid !important;

  place-items: center;

  height: 5.5rem;

  margin-top: 1.5rem;

  border-radius: .5rem;

  background: var(--color_accent_03);

  font-size: 1.2rem;

  font-weight: 500;

  text-align: center;

  color: #fff;

}



.product_link .txt_eng {

  display: block;

  margin-bottom: .4rem;

  font-family: var(--font_eng);

}



.product_link::before {

  position: absolute;

  top: 50%;

  right: 0;

  translate: 0 -50%;

  margin-right: 1rem;

  border-left: solid #fff .6rem;

  border-top: solid transparent .35rem;

  border-bottom: solid transparent .35rem;

  content: "";

}



.campaign_bnr {

  width: 120rem;

  margin: 6rem auto 0;

}



.campaign02_area .area_ttl span {

  display: block;

  width: 39.4rem;

  margin: 0 auto;

  font-size: 0;

}



.area_btn {

  display: grid !important;

  place-items: center;

  width: 43rem;

  height: 6.2rem;

  margin: 6rem auto 0;

  border-radius: .5rem;

  border: solid var(--color_accent_02) .1rem;

  background: #fff;

  font-size: 2rem;

  font-weight: 500;

  text-align: center;

  color: var(--color_accent_02);

  transition: background-color .3s, color .3s;

}



.area_btn .txt_eng {

  display: block;

  margin-top: .5rem;

  font-size: 1.4rem;

  font-weight: 400;

}



.area_btn:hover {

  background: var(--color_accent_02);

  color: #fff;

}



.ranking_area {

  padding: 0 4rem;

}



.ranking_area h2 {

  margin-bottom: 3rem;

  font-size: 2.4rem;

  text-align: center;

}



.tab_list {

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  justify-content: center;

  margin-bottom: 2rem;

}



.tab_list li {

  position: relative;

}



.tab_list li::before {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: .4rem;

  background: var(--color_regular);

  content: "";

  opacity: 0;

}



.tab_list li.selected::before {

  opacity: 1;

}



.tab_list li input {

  display: none;

}



.tab_list li label {

  display: grid;

  place-items: center;

  height: 6.5rem;

  border-bottom: solid var(--color_regular) .2rem;

  font-size: 1.6rem;

  opacity: .4;

  transition: opacity .3s;

  cursor: pointer;

}



.tab_list li.selected label {

  opacity: 1;

}



.each_rankingList_wrap {

  height: 0;

  overflow: hidden;

  opacity: 0;

  transition: opacity .3s;

}



.each_rankingList_wrap.selected {

  height: auto;

  opacity: 1;

  overflow: visible;

}



.ranking_wrap .slick-track {

  display: flex;

}



.ranking_wrap li {

  width: 20.4rem;

  height: auto;

}



.ranking_wrap li:nth-of-type(n+2) {

  margin-left: 5rem;

}



.ranking_wrap li .rank {

  width: 5rem;

}



.ranking_wrap li .img {

  margin-bottom: 1rem;

}



.ranking_wrap li .data {

  font-size: 1.3rem;

  line-height: 1.5;

  font-weight: 700;

}



.ranking_wrap li .rank_price {

  margin-top: 1rem;

  font-size: 1.4rem;

}



.item_list__review {

  overflow: hidden;

  padding-top: 0;

  padding-bottom: 0;

  margin-top: 1rem;

}



.item_list__review iframe {

  width: 150%;

  height: 2.4rem;

}



.item_list__review.summary-empty {

  display: none !important;

}



/*SP------------------------------------------------------*/

@media screen and  (max-width:768px) {

.LP_page .only_pc {

  display: none;

}



.LP_page {

  padding-bottom: 16rem;

}



.page_inner {

  width: auto;

}



.main_ttl {

  width: auto;

  margin: 0 auto 9rem;

}



.each_area:nth-of-type(n+2) {

  margin-top: 18rem;

}



.area_ttl {

  width: 70rem;

  min-height: 15rem;

  padding: 3rem 0;

  font-size: 5rem;

}



.area_ttl .icon_crown {

  width: 7rem;

  margin-left: 1.5rem;

}



.area_lead {

  margin-top: 4rem;

  font-size: 2.6rem;

}



.product_list {

  display: grid;

  justify-content: normal;

  grid-template-columns: repeat(2, 1fr);

  margin-top: 3rem;

  padding: 0 3rem;

}



.bestBuy_area .product_list {

  gap: 8rem 5rem;

}



.product_list li {

  width: auto;

}



.bestBuy_area .product_list li {

  width: auto;

}



.product_cat {

  height: 5rem;

  font-size: 2.3rem;

}



.product_name {

  font-size: 2.3rem;

}



.product_price {

  font-size: 2.3rem;

}



.product_caption {

  margin-top: 1.5rem;

  font-size: 2.3rem;

}



.product_link {

  height: 9rem;

  margin-top: 2rem;

  font-size: 2rem;

}



.product_link .txt_eng {

  margin-bottom: .8rem;

}



.product_link::before {

  margin-right: 2rem;

  border-left-width: 1.2rem;

  border-top-width: .7rem;

  border-bottom-width: .7rem;

}



.campaign_bnr {

  width: 68rem;

  margin: 5rem auto 0;

}



.campaign02_area .area_ttl span {

  width: 58rem;

}



.area_btn {

  width: 70rem;

  height: 12.2rem;

  margin: 7rem auto 0;

  border-width: .2rem;

  font-size: 3.6rem;

}



.area_btn .txt_eng {

  margin-top: 1.2rem;

  font-size: 2.4rem;

}



.ranking_area {

  padding: 0;

}



.ranking_area h2 {

  margin-bottom: 2rem;

  font-size: 3.4rem;

}



.tab_list {

  margin-bottom: 3rem;

}



.tab_list li::before {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: .4rem;

  background: var(--color_regular);

  content: "";

  opacity: 0;

}



.tab_list li label {

  height: 7.6rem;

  font-size: 2.2rem;

}



.ranking_wrap li {

  width: 30rem;

  padding: 2rem 2rem 4rem;

  border: solid #e4e4e4 .2rem;

  translate: 3rem 0;

}



.ranking_wrap li:nth-of-type(n+2) {

  margin-left: 2rem;

}



.ranking_wrap li .rank {

  position: absolute;

  width: 8rem;

}



.ranking_wrap li .img {

  margin-bottom: 1.5rem;

}



.ranking_wrap li .data {

  font-size: 2.4rem;

}



.ranking_wrap li .rank_price {

  margin-top: 1.5rem;

  font-size: 2.8rem;

}



.item_list__review {

  margin-top: 1.5rem;

}



.item_list__review iframe {

  width: 195%;

  height: 3.4rem;

}



}

/*------------------------------------------------------SP*/





/*PC------------------------------------------------------*/

@media screen and  (min-width:769px) {

  .LP_page .only_sp {

    display: none;

  }

}

/*------------------------------------------------------PC*/





/*レスポンシブ対応-------------------------------*/

@media screen and (max-width: 1400px) and (min-width: 769px) {

  html {

    font-size: calc(10 * (100vw / 1400));

  }

}



@media screen and (max-width: 768px) {

  html {

    font-size: calc(10 * (100vw / 750));

  }

}

/*-------------------------------レスポンシブ＆タブレット対応*/