@charset "UTF-8";
/* ===============================================
  * 共通 *
=============================================== */
:root {
  /* ===============================================
    * Color *
  =============================================== */
  --color-primary: #E6001F;
  /* --color-secondary: #666666; */
  /* --color-tertiary: #B39665; */
  --color-emphasis: #E6001F;
  --color-text-default: #000000;
  --color-text-sub: #555555;
  --color-primary-bg: #FAFAFA;
  --color-secondary-bg: #F8F8F8;
  --color-error: var(--color-red);
  --color-textlink: var(--color-text-default);
  --color-black: #222;
  --color-white: #fff;
  --color-red: #CC1800;
  --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-gray-middle: #7C7C7C;
  --color-gray-a: #aaa;

  /* 下記任意で変更してください */
  --color-bg-form: #FDFDFD;
  --color-gray-form: #CBCBCB;
  --color-placeholder-form: #999;
  --color-border: #DBDBDB;
  --color-border: #D5D5D5;
  --color-product-border: #D5D5D5;
  --color-bg-active: #F7F7F7;

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

  --font-noto-sans: "Noto Sans JP";
  --font-poppins: "Poppins";
  --font-kaisei-opti: "Kaisei Opti"; 

  --font-design-ja: var(--font-kaisei-opti), serif;
  --font-design-en: var(--font-poppins), sans-serif;

  --font-ja: var(--font-noto-sans),sans-serif;
  --font-en: var(--font-poppins),sans-serif;

  --font-main: var(--font-poppins),var(--font-noto-sans), sans-serif;

  /* Font Weight (fw = font-weight) */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  /* ===============================================
    * Animation *
  =============================================== */
  --transition-duration: 300ms;
  --transition-duration-short: 150ms;
  --transition-duration-long: 400ms;
  --transition-timing-function: ease;
  --transition-default: var(--transition-duration) var(--transition-timing-function);
  --hover-opacity: 0.7;
  /* ===============================================
    * z-index *
  =============================================== */
  --zindex-base: 1;
  --zindex-floating-element: 10;
  --zindex-header: 20;
  --zindex-hamburgermenu-bg: 30;
  --zindex-hamburgermenu-contents: 40;
  /* ===============================================
    * container *
  =============================================== */
  --container-lp-default: 100%;
  --container-lp-wide: 100%;
  /* ===============================================
    * height *
  =============================================== */
  --height-ticker: 3rem;
  --height-navi: 6rem;
  --hegiht-header:calc(var(--height-ticker) + var(--height-navi));
  /* ===============================================
    * Button Size *
  =============================================== */
  --button-common-size:20rem;
}

@media screen and (min-width: 992px) {
  :root{
    /* ===============================================
      * height *
    =============================================== */
    --height-navi: 12rem;
  }
}

@media screen and (max-width: 767px) {
  .pconly {
    display: none !important;
  }
}
body {
  font-family: var(--font-main);
  color: var(--color-text-default);
}

@media screen and (min-width: 992px) {
}
@media screen and (max-width: 991px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
}

html{
  scroll-behavior: smooth;
  scroll-padding-top: var(--hegiht-header);
}

/* =============================================================
    Header
============================================================= */
/* ticker text */
.s-header-ticker{
  padding-inline: 1rem;
  background-color: var(--color-primary);
  display: grid;
  place-content: center;
  width: 100%;
  height: var(--height-ticker);
}
.s-header-ticker__item{
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 0.1em;
  color: #fff;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-align: center;
}
a.s-header-ticker__item{
  color: #fff;
}
.s-header{
  height: auto;
  position: sticky;
  top: calc(var(--height-ticker) * -1);
  z-index: 1000;
}

.s-header-wrap{
  position: relative;
}

.s-header-wrap__logo{
  width: 5rem;
}
.s-header-wrap {
  height: var(--height-navi);
}
.s-header-categoryNav__head{
  font-size: 1.4rem;
}
.s-header-userNav__navLink{
  border-color: #E2DDD5;
}
.s-header-navBlok__nav{
  border-top: unset;
}
@media screen and (min-width: 992px) {
  html{
    overflow-x: hidden;
  }
  .s-header-userNav,
  .s-header-miniCart{
    position: absolute;
    top: 100%;
    height: 100vh;
  }
  .s-header-wrap {
    height: calc(var(--height-navi) + 1px);
  }
  .s-header-wrap__logo{
    width: 10rem;
  }

  
  .s-header-contentsNavBlock{
    height: var(--height-navi);
  }
  
  .s-header-categoryNav:hover {
    border-bottom: 3px solid var(--color-primary);
  }
  .s-header-categoryNav__head{
    font-size: 1.5rem;
    letter-spacing: 0.1em;
  }
  .s-header-categoryNav__head-simple::after{
    display: none;    
  }
  .s-header-contentsNavBlock{
    gap: 4rem;
  }

  .s-header-contentsNavBlock__item:has(.s-header-categoryNav:hover) .s-header-categoryNav__head::after{
    transform: rotate(180deg);
  }
  .s-header-wrap{
    gap: 4rem;
  }
  .s-header-categoryNav__navlist.u-hidden-lg-down{
    max-width: 114rem;
  }
  .s-header-categoryNav__navlist.u-hidden-lg-down .s-header-categoryNav__navLink:first-child{
    display: none;
  }
  .s-header-categoryNav__navlist{
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 2.5rem 4rem;
  }
  .s-header-categoryNav__navLink > a{
    font-size: 1.5rem;
  }

  .s-header-wrap {
    border-bottom: unset;
  }

}
@media screen and (min-width: 992px) {
  .s-header-categoryNav__body{
    top: var(--height-navi);
    padding: 5rem 2rem 7rem;
  }
}

@media screen and (max-width: 991px) {
  .s-header-wrap__nav{
    position: static;
  }
  /* .s-header-wrap{
    position: relative;
  } */
  .s-header-navBlok__nav{
    position: absolute;
    top: 100%;
  }
  .s-header-navBlok__nav{
    height: calc(100vh - var(--height-navi));
    top: var(--height-navi);
  }
  .s-header-navBlok__openBtn{
    position: absolute;
    left: 1.4rem;
  }
  .s-header-navBlok__openBtn > span{
    opacity: 0;
  }
  .s-header-navBlok__openBtn::before {
    top: calc(50% - .4rem);
  }
  .s-header-navBlok__openBtn::after {
    bottom: calc(50% - .4rem);
  }
  .s-header-navBlok__openBtn.active::before {
    transform: translateY(0.3rem) rotate(-45deg);
  }
  .s-header-navBlok__openBtn.active::after {
      transform: translateY(-0.3rem) rotate(45deg);
  }
}
/* ナビゲーション */
.s-header-userNav__title{
  font-size: 1.4rem;
}
@media screen and (min-width: 992px) {
  .s-header-userNav{
    padding: 2rem 1.5rem;
  }
  .s-header-userNav__head{
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--color-text-default);
  }
  .s-header-userNav__navLink{
      border-bottom: 1px solid #E2DDD5;
  }
  .s-header-userNav__title {
      width: calc(100% - 4.1rem);
      font-size: 1.4rem;
  }
  .s-header-userNav__navLink > a {
    display: block;
    padding: 1.6rem 0;
    font-size: 1.4rem;
  }
  .s-header-userNav__navLink:first-child > a{
    padding: 2rem 0 1.6rem;
  }
}
/* =============================================================
    Footer
============================================================= */
.s-footer-snsNav{
  gap: 2.5rem;
}
.s-footer-snsNav__item{
  width: 2.5rem;
}
.s-footer__copy{
  margin-top: 3rem;
}
@media screen and (min-width: 768px) {
  .s-footer{
    padding-block: 3.59rem 4rem;
    border-top: 1px solid #EAE8E4;
  }
  .s-footer-guideNav{
    gap: 1rem 3rem;
  }
  .s-footer__copy{
    margin-top: .5rem;
  }
}
@media screen and (max-width: 767px) {
  .s-footer-guideNav__item {
    border-top: 1px solid #EAE8E4;
  }
}

/* =============================================================
    Common
============================================================= */
/* 商品一覧系 */
.c-product-head__status{
  padding-right: 0;
}
.c-product-sIcon,
.c-productUser-sIcon{
  display: flex;
  gap: .2rem;
  flex-wrap: wrap;
}
.c-product-sIcon__item{
  height: 2rem;
  width: auto;
}
.c-product-sIcon__item img{
  height: 100%;
  display: block;
}
.c-product-body{
  margin-top: 1rem;
}
.c-product-body__title-name{
  font-size: 1.2rem;
  line-height: 1.5;
  letter-spacing: .025em;
}
.p-page-home .m-productLineHome-col2-md5{
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 2rem 1.5rem;
}
.p-page-home .m-productLineHome-col2-md5__item{
  width: 100%;
}
.c-button-primary{
  max-width: 24rem;
  margin-inline: auto;
  background-color: var(--color-primary);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: .025em;
  font-weight: var(--fw-bold);
  display: grid;
  place-content: center;
  border-radius: 4em;
  border: 1px solid var(--color-primary);
  padding-block: 1.3rem 1.1rem;
}
a.c-button-primary,
a.c-button-primary:visited{
  color: #fff;
}


@media screen and (min-width: 768px) {
  .c-product-sIcon,
  .c-productUser-sIcon{
    gap: .3rem;
  }
  .c-product-body__title-name{
    font-size: 1.3rem;
  }
  .c-product-body__price{
    font-size: 1.7rem;
  }
  .p-page-home .m-productLineHome-col2-md5{
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 4rem 2rem;
  }
  .c-button-primary{
    max-width: 25rem;
    font-size: 1.6rem;
    padding-block: 1.6rem 1.5rem;
  }

}

/* =============================================================
    HISROEY
============================================================= */
[data-section="history"] .m-productLineHome-col3-md6{
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 2rem 1.5rem;
}
.m-productLineHome-col3-md6__item {
  width: 100%;
}
[data-section="history"] .c-product-sIcon__item,
[data-section="recommend"] .c-productUser-sIcon__item{
  height: 1.5rem;
}
.p-page-productList [data-section="history"]{
  padding-bottom: 5.5rem;
}
[data-section="recommend"] .c-productUser-sIcon__item img{
  height: 100%;
  display: block;
}
@media screen and (min-width: 768px) {
  [data-section="history"] .m-productLineHome-col3-md6{
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 2rem;
  }
  [data-section="history"] .c-product-sIcon__item,
  [data-section="recommend"] .c-productUser-sIcon__item{
    height: 1.8rem;
  }
  .p-page-productList [data-section="history"]{
    padding-bottom: 0;
  }
}
@media (hover: hover){
  .s-footer-guideNav__item a{
    transition: color var(--transition-default);
  }
  .s-footer-guideNav__item a:hover{
    color: var(--color-primary);
    opacity: 1;
  }
  .c-button-primary{
    transition: background var(--transition-default),color var(--transition-default);
  }
  .c-button-primary:hover{
    opacity: 1;
    background-color: #fff;
    color: var(--color-primary);
  }
  a.c-button-primary:hover,
  a.c-button-primary:visited:hover{
    color: var(--color-primary);
  }
  .s-header-categoryNav__navLink > a{
    transition: color var(--transition-default);
  }
  .s-header-categoryNav__navLink > a:hover{
    color: var(--color-primary);
    opacity: 1;
  }
}


.c-btn.c-btn--radius{
  border-radius: 4em;
}

.c-button--page-top{
  position: fixed;
  bottom: 2rem;
  right: 1.4rem;
  width: 2.092rem;
  z-index: var(--zindex-floating-element);
}
@media screen and (min-width: 768px) {
  .c-button--page-top{
    bottom: 2rem;
    right: 1.95rem;
    width: 3.093rem;
  }
}

/*
 * Object - Utility
 */
.u-visually-hidden {
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(0px 0px 99.9% 99.9%);
}