@charset "utf-8";
.header-nav-list{
  overflow: auto hidden;
}

@media screen and (max-width: 767px){
  main{
    padding-top: 104px;
  }
}
@media screen and (min-width:768px) and ( max-width:1023px) {
  main{
    padding-top: 122px;
  }
}
@media screen and (min-width: 1024px){
  main{
    padding-top: 144px;
  }
}
.page-link-list a::before{
  content: '';
  position: absolute;
  z-index: 10;
  background-color: #000;
  opacity: .4;
  width: 100%;
  height: 100%;
}
.page-link-list img{
  aspect-ratio: 24 / 10
}

.page-bg{
  opacity: .2;
}

.main-wrap{
  position: relative;
  z-index: 10;
  margin: 30px auto;
  padding-left: var(--space-s);
  padding-right: var(--space-s);
}
.breadcrumbs{
  overflow: auto hidden;
  padding-bottom: 10px;
  font-size: 12px;
  color: var(--color-ccc);
}
.breadcrumbs::-webkit-scrollbar{
  display: none;
}
.breadcrumbs ol{
  display: flex;
  gap: 10px;
}
.breadcrumbs ol a{
  color: var(--color-fff);
  text-decoration: underline;
  white-space: nowrap;
}
.breadcrumbs ol li{
  white-space: nowrap;
}
.breadcrumbs ol li + li::before{
  content: '>';
  align-items: center;
  padding-right: 10px;
}
.main-inner{
  background-color: rgba(255,255,255,.8);
  padding:25px 15px 20px;
}
.page-heading-title{
  margin-bottom: 20px;
  font-size: calc(26px * var(--font-size-ratio));
  line-height: 1.3;
}
.about-text{
  width: 100%;
}
.page-img{
  margin: 15px 0;
}
.page-about-img{
  margin-bottom: 15px;
}
.page-about-img > figcaption,
.page-img > figcaption{
  color: var(--color-888);
  text-align: center;
  font-size: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

@media screen and (min-width: 768px){
  .main-inner{
    padding:35px 30px 40px;
  }
  .main-wrap{
    margin: 40px auto;
  }
  .breadcrumbs{
    padding-bottom: 15px;
  }
  .page-heading-title{
    margin-bottom: 30px;
  }
  .page-about{
    display: flex;
    flex-direction: row-reverse;
  }
  .page-about-img{
    margin: 0 0 0 30px;
    max-width: 350px;
  }
  .page-img{
    max-width: 350px;
  }
  .page-about-img > img,
  .page-img > img{
    aspect-ratio: 10 / 5.774;
  }
  .page-about-img > figcaption,
  .page-img > figcaption{
    font-size: 12px;
  }
  .about-text{
    margin-top: calc(-10px * var(--space-ratio));;
  }
  .page-about-text{
    width: 100%;
    margin-top: calc(-10px * var(--space-ratio));
  }
}
@media screen and (min-width: 1024px){
  .main-inner{
    padding:50px 40px 50px;
  }
  .breadcrumbs{
    font-size: 14px;
  }
  .main-wrap{
    max-width: 1200px;
  }
}


.page-contents{
  border: solid 1px var(--color-aaa);
  margin:20px auto 20px;
}
.page-contents-title{
  font-weight: bold;
  font-size: 16px;
  border-bottom: solid 1px var(--color-aaa);
  padding: 10px;
}
.page-contents-list-wrap{
  padding: 5px 10px;
}
.page-contents-list{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  font-size: 14px;
  line-height: 1.5;
}
.page-contents-list a{
  padding: 8px 0;
  display: block;
}
.page-contents-list .page-contents-no{
  color: var(--color-888);
  padding-right: 5px;
}
.page-contents-child-list{
  padding-left: 10px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}
@media screen and (min-width: 768px){
  .page-contents{
    margin: 40px auto 50px;
  }
  .page-contents-title{
    font-size: 18px;
    padding: 15px;
  }
  .page-contents-list-wrap{
    padding: 10px 20px;
  }
  .page-contents-list .page-contents-no{
    padding-right: 10px;
  }
  .page-contents-child-list{
    padding-left: 20px;
  }
}
@media screen and (min-width: 1024px){
  .page-contents-title{
    font-size: 20px;
  }
}

.page-title-h2{
  font-size: 16px;
  padding-bottom: 10px;
  border-bottom: solid 1px var(--color-888);
  margin: 30px 0 15px;
  line-height: 1.3;
}
.page-title-h3{
  font-size: 16px;
  margin: 30px 0 15px;
  line-height: 1.3;
  color: var(--color-base3);
}
.page-title-h4{
  font-size: 14px;
  margin: 30px 0 15px;
  line-height: 1.3;
}
.page-list.dot{
  list-style-type: disc;
  padding-left: 1rem;
}
.page-list.dot > li{
  line-height: 1.5;
}
.page-point{
  background-color: var(--color-ccc);
  padding: calc(30px * var(--space-ratio));
  margin-top: calc(30px * var(--space-ratio));
  margin-bottom: calc(30px * var(--space-ratio));
}
.page-point .page-title-h3,
.page-point .page-title-h4{
  margin-top: 0;
}
.page-link-btn{
  display: block;
  width: 100%;
  border: solid 1px var(--color-aaa);
  padding: calc(15px * var(--space-ratio));
  background-color: var(--color-fff);
}
.page-link-btn img{
  aspect-ratio: 10 / 5.774;
  width: 40%;
}
.page-link-btn figure{
  display: flex;
  align-items: center;
}
.page-link-btn figcaption{
  padding-left: 20px;
  font-weight: bold;
  font-size: 14px;
}
@media screen and (min-width: 768px){
  .page-title-h2{
    font-size: 18px;
    padding-bottom: 15px;
    margin: 60px 0 20px;
  }
  .page-title-h3{
    font-size: 18px;
    margin: 40px 0 20px;
  }
  .page-title-h4{
    font-size: 16px;
    margin: 40px 0 20px;
  }
  .page-link-btn{
    width: 350px;
  }
  .page-link-btn figcaption{
    font-size: 16px;
  }
}
@media screen and (min-width: 1024px){
  .page-title-h2{
    font-size: 24px;
  }
  .page-title-h3{
    font-size: 20px;
  }
  .page-title-h4{
    font-size: 18px;
  }
}


/*アイテムページ用*/
.page-item .page-item-img > a{
  background-color: var(--color-fff);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-item .page-item-img > a > img{
  display: block;
  width: auto;
  max-width: 100%;
  height: 45vw;
}
.page-item .page-item-img figcaption{
  background-color: var(--color-base3);
  color: var(--color-fff);
  text-align: center;
  padding: calc(20px * var(--space-ratio));
  line-height: 1.3;
}
.page-item-detail li + li{
  border-top: solid 1px var(--color-ccc);
}

@media screen and (max-width: 767px){
  .page-item .page-item-img{
    margin-top: 20px;
  }
}
@media screen and (min-width: 768px){
  .page-item{
    width: 250px;
    margin-left: 40px;
  }
  .page-item .page-item-img > a{
    width: 250px;
  }
  .page-item .page-item-img > a > img{
    max-width: 100%;
    height: 206px;
  }
  .page-item .page-item-img figcaption{
    font-size: calc(20px * var(--font-size-ratio));
    padding: calc(10px * var(--space-ratio));
  }
}
.page-table tbody > tr + tr{
  border-top: solid 1px var(--color-eee);
}
.page-table tbody > tr > *:not(:last-child){
  border-right: solid 1px var(--color-eee);
}
.page-table tbody > tr:nth-child(even){
/*  background-color: var(--color-eee);*/
}
.tab-list-upper,
.tab-list-low{
  display: flex;
  flex-wrap: wrap;
  gap: calc(10px * var(--space-ratio));
}
.tab-list-upper .tab-item{
  font-weight: bold;
  padding: calc(5px * var(--space-ratio)) calc(20px * var(--space-ratio));
  border: solid 1px var(--color-444);
  border-radius: 1000px;
  display: block;
}
.tab-list-upper .tab-item.is-active{
  color: var(--color-fff);
  background-color: var(--color-444);
}
.tab-list-low .tab-item{
  width: 40px;
  height: 40px;
  opacity: .4;
  background-color: var(--color-fff);
  display: block;
}
.tab-list-low .tab-item.is-active{
  opacity: 1;
/*  background-color: var(--color-444);*/
}
@media (min-width: 768px) {
  .tab-list-upper .tab-item{
    font-weight: bold;
    padding: calc(10px * var(--space-ratio)) calc(20px * var(--space-ratio));
    border: solid 1px var(--color-444);
    border-radius: 1000px;
    display: block;
  }
  .tab-list-low .tab-item{
    width: 50px;
    height: 50px;
  }
}

.mix-sort-select{
  top: 0;
  right: 0;
}
#mix-list{
  margin-top: -240px;
  padding-top: 240px;
}
@media (min-width: 768px) {
  #mix-list{
    margin-top: -250px;
    padding-top: 250px;
  }
}

/*広告用*/
.ad-cts img{
  width: auto;
  height: auto;
}
.min-w300{
  min-width: 300px;
}
ins.adsbygoogle {
  display: block;
}