@charset "UTF-8";

/* ===============================================
  * variable - 変数定義 *
=============================================== */
:root{

  /* ===============================================
    * Color *
  =============================================== */

  --color-primary: var(--color-project-primary);
  --color-secondary: var(--color-project-secondary);

  --color-emphasis: var(--color-project-sale);
  --color-text-default: var(--color-black);
  --color-textlink: var(--color-primary);

  --color-black: var(--color-project-text);
  --color-white: #fff;

  --color-gray-100: #f5f5f5;
  --color-gray-200: #e6e4e4;
  --color-gray-300: #dbdbdb;
  --color-gray-400: #bebebe;
  --color-gray-500: #7e7e7e;
  --color-gray-600: #4e4e4e;

  --color-bg-form: #f4f7fd;

  --color-social-apple-primary: #000;
  --color-social-facebook-primary: #0866FF;
  --color-social-x-primary: #000;
  --color-social-yahoo-primary: #ff0033;
  --color-social-google-primary: #000;
  --color-social-line-primary: #06C755;
  --color-social-amazon-primary: #F0C14B;

  /* Project */

  --color-project-text: #121212;
  --color-project-primary: #00A7E1;
  --color-project-secondary: #003DA6;
  --color-project-tertiary: #4D4D4D;
  --color-project-bg: #F4F4F4;
  --color-project-sale: #DE2F2F;


  /* ===============================================
    * Font *
  =============================================== */

  /* Font Family */

  --font-hiragino: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic";
  --font-helvetica: Helvetica, Arial;
  --font-fallback: sans-serif;
  --font-ja: var(--font-hiragino), var(--font-fallback);
  --font-en: var(--font-helvetica), var(--font-fallback);
  --font-main: var(--font-helvetica), var(--font-hiragino), var(--font-fallback);


  /* Font Weight (fw = font-weight) */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;


  /* ===============================================
    * Animation *
  =============================================== */

  --transition-duration: 0.3s;
  --transition-timing-function: ease;
  --transition-default: var(--transition-duration) var(--transition-timing-function);

  --hover-opacity: 0.6;


  /* ===============================================
    * z-index *
  =============================================== */

  --zindex-base: 1;
  --zindex-floating-element: 10;
  --zindex-header: 20;
  --zindex-hamburgermenu-bg: 30;
  --zindex-hamburgermenu-contents: 40;


  /* ===============================================
    * Box Model *
  =============================================== */

  --max-width-desktop: 1200;

  --container-fluid: 100%;
  --container-default: min(100%, calc((var(--max-width-desktop) * .1rem) + calc(var(--padding-horizontal-global, 0) * 2)));

  --inner-width: 92%;

  --padding-horizontal-global: 1rem;


  /* ===============================================
    * Header *
  =============================================== */

  --height-ticker: 0rem;
  --height-header-primary: 10rem;
  --height-header-global-nav: 0rem;
  --height-header: calc(var(--height-ticker) + var(--height-header-primary) + var(--height-header-global-nav));
  --variable-header-value: 4.6rem;

}

html:has(.header__content-wrapper--ticker) {
  --height-ticker: 3.5rem;
}

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

    /* ===============================================
      * Box Model *
    =============================================== */

    --inner-width: min(71.25%, calc((var(--max-width-desktop) * .1rem) + calc(var(--padding-horizontal-global, 0) * 2)));
    --form-inner-width: 78rem;

    /* ===============================================
      * Header *
    =============================================== */

    --height-header-primary: 7rem;

  }

  html:has(.header__content-wrapper--ticker) {
    --height-ticker: 4rem;
  }
}



/* ===============================================
  * Common Styles - サイト全体で共通のスタイル *
=============================================== */
/* ===============================================
  * Layout *
=============================================== */
.global-contents__inner {
  width: 100%;
  margin:0 auto;
}

.global-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.global-content__fluid-wrapper{
width:100%;
box-sizing: border-box;
padding:20px 14px;
}

.global-content__fluid-wrapper .global-content__fluid-wrapper{
padding:0;
}

.update-date{
font-size:16px;
color:inherit;
margin:10px 0;
}

/* Slider */

.c-slider {
  --swiper-navigation-size: 3.6rem;
  --swiper-navigation-position-horizontal: var(--padding-horizontal-global);

  position: relative;

  width: var(--container-default);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .c-slider {
    --swiper-navigation-position-horizontal: 0;
  }
}

@media (min-width: 1200px) {
  .c-slider {
    --swiper-navigation-position-horizontal: calc(var(--padding-horizontal-global) + -1rem);
  }
}

.c-slider.c-slider--product {
  --swiper-navigation-position-top: 6.4rem;
}

@media (min-width: 768px) {
  .c-slider.c-slider--product {
    --swiper-navigation-position-top: 7.7rem;
  }
}

.c-slider .swiper {
  display: grid;
  width: 100%;

  /* TODO: ZETA表示確認のために一旦無効化 */
  max-height: 33rem;
  opacity: 0;
  transition: opacity var(--transition-default);
}

/* TODO: ZETA表示確認のために一旦無効化 */
.c-slider .swiper.swiper-initialized {
  max-height: none;
  opacity: 1;
}

.c-slider .swiper-wrapper {
  min-width: 0;
}

.c-slider [class*="swiper-button-"] {
  top: var(--swiper-navigation-position-top, calc(50% - (var(--swiper-navigation-size) / 2)));

  width: 36px;
  height: 36px;
  margin: 0;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88_19_144%22%20data-name%3D%22%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%2019%20%E2%80%93%20144%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2036%2036%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_80917%22%20data-name%3D%22%E3%83%91%E3%82%B9%2080917%22%20d%3D%22M18%2C0A18%2C18%2C0%2C1%2C1%2C0%2C18%2C18%2C18%2C0%2C0%2C1%2C18%2C0Z%22%20fill%3D%22%234d4d4d%22%20opacity%3D%220.7%22%2F%3E%20%3Cg%20id%3D%22Icon_feather-arrow-right%22%20data-name%3D%22Icon%20feather-arrow-right%22%20transform%3D%22translate(10.061%2010.059)%22%20opacity%3D%220.8%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_68840%22%20data-name%3D%22%E3%83%91%E3%82%B9%2068840%22%20d%3D%22M7.5%2C18H22.764%22%20transform%3D%22translate(-7.5%20-10.368)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_68841%22%20data-name%3D%22%E3%83%91%E3%82%B9%2068841%22%20d%3D%22M18%2C7.5l7.632%2C7.632L18%2C22.764%22%20transform%3D%22translate(-10.368%20-7.5)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 50%;

  transition: opacity var(--transition-default);
}

.c-slider [class*="swiper-button-"]::after {
  content: none;
}

.c-slider [class*="swiper-button-"].swiper-button-disabled {
  opacity: 0 !important;
  pointer-events: none !important;
}

.c-slider .swiper-button-prev {
  left: var(--swiper-navigation-position-horizontal);

  scale: -1 1;
}

.c-slider .swiper-button-next {
  right: var(--swiper-navigation-position-horizontal);
}

.c-slider .swiper-navigation-icon {
  display: none;
}

.c-slider__item-inner {
  display: grid;
  row-gap: 1rem;

  color: var(--color-project-text);
  text-decoration: none;
}

.c-slider__image {
  position: relative;
}

.c-slider__image .cicon {
  position: absolute;
  top: 0;
  left: 0;
}

.c-slider__image .cicon img {
  width: auto;
  height: 2rem;
}

.c-slider__image .soldout {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;

  display: grid;
  place-content: center;

  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .3);

  color: var(--color-white);
  font-size: 1.4rem;
  font-weight: var(--fw-bold);
  letter-spacing: .03em;
}

.c-slider__text--rank {
  display: flex;
  align-items: center;
  column-gap: .2rem;
  margin-bottom: 8px;

  color:#003DA6;
  font-size: 16px;
  font-weight:bold;
  letter-spacing: .03em;
}

.c-slider__text--rank::after {
  content: "位";;
  font-size:16px;
  font-weight:bold;
}

.c-slider__cicon-list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;

  margin-bottom: 1.2rem;
}

.c-slider__cicon-list-item {
  display: grid;
  place-content: center;

  padding: .4rem .6rem .2rem;
  background-color: var(--color-cicon-bg, transparent);
  border: solid 1px var(--color-cicon-border, #4D4D4D);
  border-radius: .4rem;

  color: var(--color-cicon-text, #4D4D4D);
  font-size: 1rem;
  font-weight: var(--fw-light);
  letter-spacing: .03em;
  line-height: 1;
}

.c-slider__cicon-list-item[data-cicon-var="notification"] {
  --color-cicon-bg: #4D4D4D;
  --color-cicon-text: var(--color-white);
}

.c-slider__cicon-list-item[data-cicon-var="discount"] {
  --color-cicon-border: var(--color-project-sale);
  --color-cicon-text: var(--color-project-sale);
}

.c-slider__cicon-list-item[data-cicon-var="campaign"] {
  --color-cicon-border: var(--color-project-sale);
  --color-cicon-text: var(--color-project-sale);
}

.c-slider__cicon-list-item[data-cicon-var="category"] {
  --color-cicon-border: var(--color-project-secondary);
  --color-cicon-text: var(--color-project-secondary);
}

.c-slider__cicon-list:not(:has(> *)) {
  display: none;
}

.c-slider__cicon-list-item img {
  width: auto;
  height: 100%;
}

.c-slider__text--brand-name {
  margin-bottom:6px;
  font-size: 14px;
  font-weight:bold;
  letter-spacing: .03em;
  line-height: 1.5;

  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.c-slider__text--product-name {
  margin-bottom:8px;
  font-size: 16px;
  letter-spacing: .03em;
  line-height:1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-break: anywhere;
}

.c-slider__price-wrapper {
  font-size: 16px;
  font-weight:bold;
  letter-spacing: .03em;
  line-height: 1;
}

.c-slider__price-wrapper + .c-slider__cicon-list {
  margin-block: 1rem 0;
}

.c-slider__price-wrapper [class*="c-slider__price-text"] {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: .03em;
}

.c-slider__price-wrapper .c-slider__price-text--sale {
  color: var(--color-project-sale);
}

.c-slider__item-inner--feature-page {
  color: var(--color-project-text);
  text-decoration: none;
}

/*@media (min-width: 768px) {
  .c-slider__item-inner--feature-page {
    row-gap: 1.2rem;
  }
}*/

.c-slider__item-inner--feature-page .c-slider__image {
  display: grid;
  place-content: center;

  width: 100%;
  height: fit-content;
  aspect-ratio: 210 / 140;
}

.c-slider__item-inner--feature-page .c-slider__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-slider__item-inner--feature-page .c-slider__text--feature-page-title {
  font-size: 1.2rem;
  letter-spacing: .03em;
  line-height: calc(20 / 12);
}

.c-slider__item-inner--feature-page .c-slider__text--feature-page-title > span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}


/* ranking */

.ranking-automatically {
box-sizing: border-box;
width:100%;
margin:2rem auto;
}

@media (min-width: 768px) {
.ranking-automatically {
margin:3rem auto;
}
}

/*.ranking-automatically__inner {
  display: flex;
  flex-direction: column;
}*/

.ranking-automatically__text--heading--child {
  font-size:24px;
  font-weight:bold;
  letter-spacing: normal;
  line-height: 1;
}