:root{
  --color-black: #515151;
  --color-black2: #373737;
  --color-black3: #333;
  --color-grey: #7A7A7A;
  --color-border: #DDDDDD;
  --color-beige: #F9F9F9;
  --color-orange: #FF8800;
  --font-size-14: 14px;
  --font-size-15: 15px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 18px;
  --font-size-24: 20px;
  --font-size-30: 20px;
  --font-size-40: 32px;
  --font-size-50: 32px;
  --font-family-ja: "Noto Sans JP", sans-serif;
  --font-family-en1: "Afacad", sans-serif;
  --font-family-en2: "Averia Serif Libre", serif;
  --inner-width: 1100px;
  --inner-padding: 15px;
  --header-height: 50px;
  --nav-height: 70px;
  --max-width: min(100%, 500px);
}

@media screen and (min-width: 768px) {
  :root{
    --font-size-20: 20px;
    --font-size-24: 24px;
    --font-size-30: 30px;
    --font-size-40: 40px;
    --font-size-50: 50px;
    --inner-padding: 50px;
    --header-height: 85px;
    --max-width: 100%;
  }
}

/***　共通CSS　***/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

*{
  box-sizing: border-box;
}

body{
  font-size: var(--font-size-15);
  font-family: var(--font-family-ja);
  line-height: 1.5;
}

button, input{
  border: none;
  background-color: transparent;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

a, button{
  cursor: pointer;
  color: inherit;
}



a:hover,
button:hover{
  text-decoration: none!important;
}

figure figcaption a {
    cursor: pointer!important;
}

ul, ol, figure{
  list-style: none;
  margin: 0;
  padding: 0;
}

p{
  line-height: 1.8;
}

address{
  font-style: normal;
}


@media screen and (min-width: 768px) {
  p{
    line-height: 2;
  }
  a:hover{
  color: inherit;
}
}

img {
  max-width: none;
  vertical-align: top;
}

[data-whatinput=mouse] *:focus,
[data-whatinput=touch] *:focus {
  outline: none;
}

/***　基本レイアウト　***/

.l-main{
  margin-top: var(--header-height);
}

.l-section{
  margin-bottom: 60px;
}

.l-section__bg-beige{
  position: relative;
  padding: 60px 0;
}

.l-section__bg-beige::before{
  z-index: -1;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-beige);
  border-radius: 40px;
}

.l-section__title{
  margin-bottom: 60px;
}

.l-container{
  margin-inline: auto;
  width: min(100% - calc( var(--inner-padding) * 2 ), var(--inner-width));
}

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


  .l-section{
    margin-bottom: 100px;
  }

  .l-section__bg-beigey{
    padding: 100px 0;
  }
}

@media screen and (min-width: 1200px) {
  .l-main{
    margin-top: calc(var(--header-height) + var(--nav-height));
  }
}

/***　共通パーツ　**/

.u-text-center{
  text-align: center;
}

.u-text-orange{
  color: var(--color-orange);
}

.u-text-capitalize{
  text-transform: capitalize;
}

.u-only-pc{
  display: none;
}

.u-only-sp{
  display: block;
}

.u-text-bold{
  font-weight: 700;
}

@media screen and (min-width: 768px) {
  .u-only-pc{
    display: block;
  }
  
  .u-only-sp{
    display: none;
  }
}

/**** パーツ・タイトル ****/

.c-title-en, .c-title-ja{
  font-weight: 400;
  letter-spacing: .1em;
}

.c-title-en{
  text-transform: capitalize;
  font-family: var(--font-family-en2);
  font-size: var(--font-size-40);
}

.c-title-en--large{
  font-size: var(--font-size-50);
}

.c-title-ja{
  font-size: var(--font-size-14);
}

.c-title-page{
  --text-transform: capitalize;
  --font-family:var(--font-family-en2);
  --font-weight: 400;
  letter-spacing: .1em;
  font-family: var(--font-family);
  font-size: var(--font-size-50);
  text-transform: var(--text-transform);
  font-weight: var(--font-weight);
}

.c-title-page.c-title-page--ja{
  --text-transform: none;
  --font-family:var(--font-family-ja);
}


/**** パーツ　ボタン ****/

.c-button{
  --width: min(100%, 240px);
  --height: 50px;
  --text-color: var(--color-orange);
  --bg-color: var(var(--color-orange));
  --transform-x: translateX(-100%);
  position: relative;
  background-color: #fff;
  color: var(--color-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--width);
  height: var(--height);
  overflow: hidden;
  border-radius: 50px;
  transition: all .2s linear;
  margin-inline: auto;
  border: 1px solid var(--color-orange);
}

.c-button span{
  position: relative;
  z-index: 2;
  color: var(--text-color);
  text-transform: uppercase;
  font-family: var(--font-family-en1);
  transition: color .3s ease-out;
  letter-spacing: .2em;
  font-size: var(--font-size-14);
}

.c-button::before{
  z-index: 1;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-right: 40px solid transparent;
  border-bottom: var(--height) solid var(--color-orange);
  transform: var(--transform-x);
  transition: transform .3s ease-out;
}

.c-button-2{
  --transform-x: translateX(-100%);
  position: relative;
  margin-inline: auto;
  width: min(100%, 400px);
  height: var(--height);
  font-size: var(--font-size);
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.c-button-2--white{
  --text-color: #fff;
  --border-color: #fff;
  --background: #fff;
  --font-size: var(--font-size-15);
  --background-color: transparent;
  --height: 70px;
}

.c-button-2--black{
  --text-color: var(--color-black);
  --background: var(--color-black);
  --border-color: var(--color-black);
  --font-size: var(--font-size-14);
  --background-color: #fff;
  --height: 70px;
}

.c-button-2 span,
.c-button-2::after{
  z-index: 2;
}

.c-button-2 span{
  position: relative;
  color: var(--text-color);
  transition: color .2s linear;
}

.c-button-2::after{
  content: "";
  width: .6em;
  aspect-ratio: 1;
  border-top: 1px solid var(--text-color);
  border-right: 1px solid var(--text-color);
  rotate: 45deg;
  position: absolute;
  top: 50%;
  right: calc(30 / 300 * 100%);
  translate: 0 -50%;
}

.c-button-2::before{
  z-index: 1;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-right: 50px solid transparent;
  border-bottom: var(--height) solid var(--background);
  transition: transform .3s ease-out;
  transform: var(--transform-x);
}


@media screen and (min-width: 768px) {
  .c-button-2--black{
    --height: 80px;
  }

  .c-button-2--white{
    --height: 90px;
  }
}

@media screen and (min-width: 1024px) {
  .c-button:hover{
    --text-color: #fff;
    --transform-x: translateX(0%);
  }

  .c-button-2:hover{
    --transform-x: translateX(0%);
  }

  .c-button-2--black:hover{
    --text-color: #fff;
  }

  .c-button-2--white:hover{
    --text-color: var(--color-black);
  }
}

/*** パーツ　お知らせブロック ***/

.c-list{
  --columns: 1fr;
  --gap: 15px;
  padding: calc( 25 / 15 * 1em) 0;
  border-top: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: var(--columns);
  gap: var(--gap);
}

.c-list:last-of-type{
  border-bottom: 1px solid var(--color-border);
}

.c-list__date{
  font-family: var(--font-family-en1);
  color: var(--color-black);
}

.c-list__date time{
  display: block; 
  height: 100%;
  line-height: calc( 2 * var(--font-size-15));
}

@media screen and (min-width: 768px) {
  .c-list{
    --gap: 60px;
    --columns: 85px 1fr;
  }
}

/*** パーツ　商品 ***/

.c-products{
  display: grid;
  grid-template-columns: var(--columns);
  gap: var(--gap);
  counter-reset: item;
}

.c-product{
  position: relative;
}

.c-product a{
  color: #333!important;
}

.c-products--3col{
  --gap: 28px 8px;
  --columns: repeat(2, 1fr);
}

.c-products--4col{
  --gap: 40px;
  --columns: repeat(1, 1fr);
  width: min( calc( 250 / 375 * 100%), 500px);
  margin-inline: auto;
}

.c-products--5col{
  --gap: 28px 8px;
  --columns: repeat(2, 1fr);
}

.c-product--center h3,
.c-product--center p{
  width: fit-content;
  margin-inline: auto;
}

.c-product--number{
  position: relative;
  counter-increment: item;
}

.c-product--number::before {
  z-index: 2;
  content: counter(item);
  position: absolute;
  top: 0;
  left: 0;
  font-size: var(--font-size-20);
  font-family: var(--font-family-en2);
  color: #fff;
  width: calc( 40 / 168 * 100%);
  aspect-ratio: 1;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-product figure > img{
  margin-bottom: 20px;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  background-color: aliceblue;
}

.c-product figure,
.c-product figcaption{
  display: contents;
}

.c-product h3,
.c-product p{
  margin-bottom: 20px;
}

.c-product h3{
  font-size: var(--font-size-16);
  font-weight: 500;
}

.c-product h3 img{
  vertical-align: middle;
}

.c-product__p{
  padding-right: 25px;
}

@media screen and (min-width: 768px) {
  .c-products--3col{
    --gap: 30px;
    --columns: repeat(3, 1fr);
  }
  
  .c-products--4col{
    --gap: 36px;
    --columns: repeat(3, 1fr);
    width: 100%;
  }

  .c-products--5col{
    --gap: 36px;
    --columns: repeat(3, 1fr);
  }
}

@media screen and (min-width: 1200px) {
  .c-products--4col{
    --gap: 36px;
    --columns: repeat(4, 1fr);
    width: 100%;
  }

  .c-products--5col{
    --gap: 36px;
    --columns: repeat(5, 1fr);
  }
}


/*** サービス ***/

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.p-top__service-blocks{
  --columns: repeat(1, 1fr);
  width: min(100%, 500px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: var(--columns);
  gap: 40px;
}

.p-top__service-block{
  display: grid;
  grid-template-rows: auto auto 1fr auto;
}

.p-top__service-block-icon{
  margin-bottom: 30px;
  width: min(100%, 180px);
  aspect-ratio: 1;
  margin-inline: auto;
  background-color: var(--color-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.p-top__service-block-icon img{
  display: block;
  height: calc( 50 / 180 * 100%);
  width: auto;
}

.p-top__service-block h3{
  margin-bottom: 20px;
  font-size: var(--font-size-18);
  font-weight: 500;
  letter-spacing: .1em;
  text-align: center;
}

.p-top__service-block p{
  margin-bottom: 30px;
}

@media screen and (min-width: 768px) {
  .p-top__service-blocks{
    width: 100%;
    --columns: repeat(3, 1fr);
  }
}


/*** footer ***/

.l-footer{
  --copy-height: 60px;
  // margin-top: 50px;
  position: relative;
}

.l-footer::before{
  z-index: -1;
  content: "";
  width: 100%;
  height: calc(100% - var(--copy-height));
  background-color: var(--color-black2);
  position: absolute;
  top: 0;
  left: 0;
}

.l-footer__logo{
  margin-bottom: 50px;
  display: block;
  margin-inline: auto;
}

.l-footer__container{
  padding: 50px 0;
}

.l-footer__copy-right{
  height: var(--copy-height);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .05em;
}

.l-footer__body{
  --columns: 1fr;
  display: grid;
  grid-template-columns: var(--columns);
  color: #fff;
  gap: 50px;
}

.l-footer__contact{
  text-align: center;
}


.l-footer__title{
  margin-bottom: 1em;
  font-size: 30px;
  font-family: var(--font-family-en2);
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: capitalize;
  text-align: center;
}

.l-footer__shop-name{
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .1em;
}

.l-footer__phone-number{
  margin-bottom: 6px;
  font-size: 30px;
  letter-spacing: .1em;
  font-family: var(--font-family-en2);
  font-weight: 700;
  display: flex;
  justify-content: center;
  gap: 4px;
  transition: opacity .2s ease-out;
}

.l-footer__phone-number svg{
  fill: currentcolor;
}

@media screen and (min-width: 768px) {
  .l-footer__phone-number{
  justify-content: flex-start;
  }
  
  .l-footer__phone-number:hover{
    opacity: .8;
  }

}


.l-footer__business-hours{
  margin-bottom: 10px;
}

.l-footer__address{
  margin-bottom: 30px;
}

.l-footer__social-links{
  display: flex;
  gap: 22px;
  justify-content: center;
}

.l-footer__social-links img{
  display: block;
  width: 22px;
  aspect-ratio: 1;

}

.l-footer__contents-grid{
  --colums: 1fr;
  --width: min( 305 / 375 * 100%, 500px);
  --gap: 0px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: var(--colums);
  gap: var(--gap);
  width: var(--width);
}

.l-footer__contents-column{
  line-height: 2.5;
}

.l-footer__contents-column a{
  position: relative;
  display: block;
  padding: 10px 0;
  transition: opacity .2s ease-out;
  color: #fff!important;
}

.l-footer__contents-column a::after{
  content: "";
  display: block;
  width: .4em;
  aspect-ratio: 1;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  rotate: 45deg;
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
}

@media screen and (min-width: 768px) {
  .l-footer{
    --copy-height: 80px;
    // margin-top: 120px;
  }

  .l-footer__container{
    padding: 65px 0 115px;
  }

  .l-footer__logo{
    margin-bottom: 60px;
  }

  .l-footer__contact{
    text-align: left;
  }
  .l-footer__title{
    text-align: left;
  }

  .l-footer__social-links{
    justify-content: flex-start;
  }
  
  .l-footer__contents-grid{
    --colums: repeat(3, 1fr);
    --width: 100%;
    --gap: 50px;
  }

  .l-footer__contents-column a{
    padding: 0;
  }

  .l-footer__contents-column a::after{
    content: none;
  }
  
  .l-footer__contents-column a:hover{
    opacity: .8;
  }
}


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

  .l-footer__body{
    gap: 0px;
    --columns: auto auto;
  }

  .l-footer__contents{
    border-left: 1px solid #fff;
    padding-left: 70px;
    margin-left: 50px;
  }
}

/*** ヘッダー　***/

.l-header{
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
}

.l-header__top{
  --header-inner:  0 0 0 15px;
  background-color: rgb( 255 255 255 / .9);
  padding: var(--header-inner);
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.l-header__logo{
  display: flex;
  align-items: center;
  gap: 40px;
  font-weight: 400;
  font-size: 14px;
  transition: opacity .3s ease-out;
}

.l-header__logo:hover{
  opacity: .8;
}

.l-header__logo img{
  --width: 102px;
  display: block;
  width: min(100%, var(--width));
  height: auto;
}

.l-header__logo-text{
  display: none;
}

.l-header__block{
  display: flex;
  align-items: center;
}

.l-header__nav{
  display: none;
}

.l-header__items{
  display: flex;
}

.l-header__items a{
  --color: inherit;
  display: block;
  padding: 0 15px;
  font-size: 14px;
  color: var(--color);
  transition: color .3s ease-out;
}

.l-header__items a:hover{
  --color: #7A7A7A;
}

.l-header__icons{
  margin-left: 15px;
  display: flex;
  gap: 20px;
}

.l-header__search-button{
  position: relative;
}

.l-header__search{
  display: flex;
  align-items: center;
  justify-content: center;
}

.l-header__icons a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  aspect-ratio: 1;
}

.l-header__search-button,
.l-header__humberger{
  border: none;
  background-color: transparent;
}

.l-header__search-box{
  z-index: 9999;
  position: absolute;
  top: 100%;
  right: 0;
  width: min(100%, 500px);
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease-out;
}

.l-header__search-box.is-active{
  opacity: 1;
  visibility: visible;
}

.l-header__search-form-input input{
  background-color: #FAFAFA;
  color: var(--color-black);
  padding: .5em 2.2em .5em 1em;
  min-height: var(--nav-height);
  width: 100%;
  border-radius: 0;
  font-size: 15px;
}

.l-header__search-submit{
  position: absolute;
  top: 50%;
  right: 5px;
  translate: 0 -50%;
}

.l-header__search-submit img{
  width: 20px;
  height: auto;
  display: block;
}

/*** ハンバーガー ***/

.l-header__humberger{
  position: relative;
  height: var(--header-height);
  width: auto;
  aspect-ratio: 1;
  background-color: var(--color-black2);
}

.l-header__humberger span{
  --space: 5px;
  width: calc( 15 / 50 * 100%);
  height: 1px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: all .3s ease-out;
}

.l-header__humberger span:nth-child(1){
  translate: -50% calc(-50% - var(--space));
}

.l-header__humberger span:nth-child(2){
  translate: -50% -50%;
}

.l-header__humberger span:nth-child(3){
  translate: -50% calc(-50% + var(--space));
}

.l-header__humberger.is-active span:nth-child(1){
  translate: -50% -50%;
  rotate: 45deg;
}

.l-header__humberger.is-active span:nth-child(2){
  translate: -50% -50%;
  opacity: 0;
}

.l-header__humberger.is-active span:nth-child(3){
  translate: -50% -50%;
  rotate: -45deg;
}

/*** メインナビゲーション ***/

.l-header__main-nav{
  display: none;
  z-index: 99;
}

.l-header__main-container{
  padding: 0 var(--inner-padding);
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

.l-header__main-link{
  position: relative;
  height: inherit;
}

.l-header__main-button{
  --background: transparent;
  --color: #fff;
  color: var(--color);
  font-weight: 500;
  font-family: var(--font-family-en1);
  letter-spacing: .1em;
  background-color: var(--background);
  position: relative;
  min-width: 200px;
  height: inherit;
  transition: background .3s ease-out, color .3s linear;
}

.l-header__main-button.is-active{
  --background: #fff;
  --color: var(--color-black);
}

.l-header__main-button > span{
  position: relative;
}

.l-header__main-button span::before{
  content: "";
  border-top: 1px solid var(--color);
  border-right: 1px solid var(--color);
  width: .4em;
  aspect-ratio: 1;
  display: block;
  position: absolute;
  top: 50%;
  left: -1.4em;
  rotate: 135deg;
  translate: 0 -50%;
}

.l-header__main-sub-menu{
  position: fixed;
  top: calc( var(--header-height) + var(--nav-height)) ;
  left: 0;
  width: 100%;
  padding: 50px;
  background-color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease-out;
}

.l-header__main-sub-menu.is-active{
  opacity: 1;
  visibility: visible;
}

.l-header__main-sub-menu ul{
  margin-inline: auto;
  width: min(100%, 800px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 50px;
  font-size: 14px;
  line-height: 1.8;
}

.l-header__main-sub-menu a{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.l-header__main-sub-menu a:after{
  content: "";
  width: .5rem;
  height: .5em;
  border-top: 1px solid var(--color-black3);
  border-right: 1px solid var(--color-black3);
  rotate: 45deg;
  display: block;
}

@media screen and (min-width: 768px){
  .l-header__logo img{
    --width: 150px;
  }

  .l-header__humberger span{
    --space: 8px;
  }
}

@media screen and (min-width: 1200px) {
  .l-header__top{
    --header-inner:  0 25px 0 35px;
  }
  
  .l-header__logo-text{
    display: block;
  }

  .l-header__humberger{
    display: none;
  }

  .l-header__nav{
    display: block;
  }

  .l-header__main-nav{
    display: block;
    position: absolute;
    top: var(--header-height);
    left: 0;
    background-color: var(--color-black2) ;
    width: 100%;
    height: var(--nav-height);
  }
}

/***** スマホ専用メニュー ***/

.l-header__sp-nav{
  --width: 100%;
  --overflow: scroll;
  z-index: 999;
  position: absolute;
  top: var(--header-height);
  right: 0;
  background-color: var(--color-black2);
  width: var(--width);
  min-height: 100dvh;
  height: 100%;
  overflow-y: var(--overflow);
  transform: translateX(100%);
  transition: all .3s ease-out;
}

.l-header__sp-nav.is-active{
  transform: translateX(0%);
}

.l-header__sp-nav-lists{
  padding: 50px 40px 100px;

}

.l-header__sp-nav-lists a, 
.l-header__sp-nav-lists button {
  color: #fff;
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 14px;
}

.l-header__sp-nav-lists button::after,
.l-header__sp-nav-lists a::after{
  --rotate: 45deg;
  display: block;
  content: "";
  width: .5em;
  height: .5em;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  rotate: var(--rotate);
  transition: rotate .15s linear;
}

.l-header__sp-nav-lists button.is-active::after{
  --rotate: 135deg;
}



.l-header__sp-nav-sub-menu{
  --max-height: 0;
  max-height: var(--max-height);
  transition: max-height 0.4s ease, opacity 0.4s ease;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.l-header__sp-nav-sub-menu.is-active{
  --max-height: 500px;
  opacity: 1;
  pointer-events: auto;

}

.l-header__sp-nav-sub-menu a{
  padding: 10px 0em 10px 1em;
}

@media screen and (min-width: 768px) {
  .l-header__sp-nav{
    --width: 40%;
  }
}

@media screen and (min-width: 1200px) {
  .l-header__sp-nav{
    --overflow: auto;
  }
}


/*** パンクズリスト ***/

.p-breadcrumbs{
  padding-top: 35px;
  margin-bottom: 60px;
}

.p-breadcrumbs__list{
  display: flex;
  font-size: 12px;
  line-height: 2;
}

.p-breadcrumbs__list a{
  color: var(--color-black);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
}

.p-breadcrumbs__list-item:first-child a::after{
  content: "";
  width: .35em;
  height: .35em;
  border-top: 1px solid var(--color-black);
  border-right: 1px solid var(--color-black);
  rotate: 45deg;
}

.p-breadcrumbs__list-item{
  padding-right: 1em;
}

@media screen and (min-width: 768px){
  .p-breadcrumbs{
      padding-top: 50px;
      margin-bottom: 100px;
  }
}


/******************************/
/* free page */
/******************************/
.p-freepage__attention {
  margin-top: 15px;
  margin-bottom: 30px;
  color: #ff0000;
  font-weight: bold;
  text-align: center;
}
.p-freepage__img {
  margin-top: 15px;
  margin-bottom: 15px;
  text-align: center;
}
.p-freepage__img img {
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}
.p-freepage-ol {
  padding-left: 25px;
  list-style-type: decimal;
}
.p-freepage-ol__item {
  margin-top: 20px;
  margin-bottom: 20px;
  letter-spacing: 0.1em;
}

/********** pager **********/
.c-pager {
  margin-bottom: 50px;
  text-align: center;
}
.c-pager__total {
  margin-bottom: 30px;
}
.c-pager-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 30px;
}
.c-pager-list__item {
  box-sizing: border-box;
  overflow: hidden;
  margin-left: 3px;
  margin-right: 3px;
  min-width: 30px;
  line-height: 30px;
  background: #ffffff;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .c-pager-list__item {
    display: none;
    min-width: 45px;
    line-height: 45px;
  }
}
@media screen and (max-width: 767px) {
  .c-pager-list__item.is-visible {
    display: block;
    margin-left: 15px;
    margin-right: 15px;
    width: auto;
  }
}
.c-pager-list__link {
  display: block;
  position: relative;
  border: 1px solid #ffffff;
  background: #ffffff;
  color: #000000;
  min-width: 30px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media screen and (max-width: 767px) {
  .c-pager-list__link {
    min-width: 45px;
  }
}
.c-pager-list__link:hover {
  border-color: #d8d8d8;
  background: #d8d8d8;
  color: #000000;
  text-decoration: none;
}
.c-pager-list__link.is-current {
  border-color: #535353;
}
@media screen and (max-width: 767px) {
  .c-pager-list__link.is-current {
    border-color: #ffffff;
  }
}
.c-pager-list__link.is-current:hover {
  border-color: #535353;
  background: #ffffff;
}
@media screen and (max-width: 767px) {
  .c-pager-list__link.is-current:hover {
    border-color: #ffffff;
  }
}
.c-pager-list__link.is-prev, .c-pager-list__link.is-next {
  border-color: #d8d8d8;
  background: #d8d8d8;
  text-indent: -99999px;
}
.c-pager-list__link.is-prev:before, .c-pager-list__link.is-next:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -2px;
  margin-top: -4px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
@media screen and (max-width: 767px) {
  .c-pager-list__link.is-prev:before, .c-pager-list__link.is-next:before {
    margin-left: -4px;
    margin-top: -8px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
  }
}
.c-pager-list__link.is-prev:hover, .c-pager-list__link.is-next:hover {
  background: rgba(216, 216, 216, 0.7);
}
.c-pager-list__link.is-prev.is-disabled:hover, .c-pager-list__link.is-next.is-disabled:hover {
  background: #d8d8d8;
}
.c-pager-list__link.is-prev:before {
  border-right: 4px solid #000000;
}
@media screen and (max-width: 767px) {
  .c-pager-list__link.is-prev:before {
    border-right: 8px solid #000000;
  }
}
.c-pager-list__link.is-prev.is-disabled:before {
  border-right-color: #aaaaaa;
}
.c-pager-list__link.is-next:before {
  border-left: 4px solid #000000;
}
@media screen and (max-width: 767px) {
  .c-pager-list__link.is-next:before {
    border-left: 8px solid #000000;
  }
}
.c-pager-list__link.is-next.is-disabled:before {
  border-left-color: #aaaaaa;
}

.c-pager-list__page {
  display: none;
}
@media screen and (max-width: 767px) {
  .c-pager-list__page {
    display: inline-block;
  }
}

/**** 商品一覧ページ・検索ページ ****/

.p-archive{
  --columns: 1fr;
  margin-bottom: 60px;
  display: grid;
  grid-template-columns: var(--columns);
  grid-template-areas: "main" "side";
  gap: 60px;
}

.p-achive__lists{
  margin-bottom: 60px;
}


@media screen and (min-width: 768px) {
  .p-archive{
    --columns: 230px 1fr;
     margin-bottom: 100px;
    grid-template-areas: "side main";
  }
  .p-achive__lists{
    margin-bottom: 100px;
}
}

/**** フリースペース ****/

.p-archive__free{
  margin-bottom: 50px;
}

.p-archive__free img{
  max-width: 100%;
  display: block;
  height: auto;
}

.p-archive__free *{
  margin-bottom: 50px;
}

/**** メインバー ****/
.p-archive__main{
  grid-area: main;
}

.p-archive__title{
  margin-bottom: 50px;
  font-size: var(--font-size-30);
  font-weight: 500;
  letter-spacing: .05em;
}

.p-archive__sort{
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
}

.p-archive__sort-list-item span{
  text-decoration: underline;
}
  

.p-archive__sort-list{
  display: flex;
  gap: 20px;
}

/**** サイドバー ****/

.p-archive__side{
  margin-bottom: 60px;
  grid-area: side;
}

.p-archive__side-item:not(:first-of-type){
  margin-top: 50px;
}

.p-archive__side-item-title{
  font-size: 18px;
  font-family: var(--font-family-en2);
  padding-bottom: calc(15 / 18 * 1em);
  border-bottom: 1px solid #000;
  text-transform: var(--text-transform);
}

.p-achive__side-item-title--upper{
  --text-transform: uppercase;
}

.p-archive__side-item-list a{
  display: block;
  padding: 1em calc( 10 / 15 * 1em);
  border-bottom: 1px solid #D9D9D9;
}


@media screen and (min-width: 768px) {
  .p-archive__side{
    margin-bottom: 100px;
  }
  .p-archive__side-item:not(:first-of-type){
    margin-top: 70px;
  }
}

/*** お気に入り ***/
.product-list__fav-items {
  width: 25px;
  position: absolute;
  bottom: 0;
  right: 0;
  translate: 0 -70%;
}

.product-list__fav-items button {
  display: block;
  width: 100%;
  padding: 5px 0;
  cursor: pointer;
  transition: .2s;
  text-align: center;
  color: #999;
  border: 0;
  outline: none;
  background: transparent;
}

.product-list__fav-items .fav-items {
  color: #ff7373;
}

.product-list__fav-items svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.p-lineup__items{
  margin-bottom: 25px;
}

@media screen and (min-width: 768px) {
 .p-lineup__items{
   margin-bottom: 50px;
  }
}