@charset "UTF-8";

:where(body){
  background-color: #FFFDF6;
}

#feature-list  .l-container-wrap__body--top-gap-short{
  padding-top: 2rem;
}

#feature-list .m-breadcrumb{
  margin-top: 0;
}

#feature-list .s-formContent-head{
  margin-top: 4rem;
  padding-bottom: 2.5rem;
  border-bottom: none;
}

#feature-list .p-homeSection__title{
  letter-spacing: 0.1em;
}

#feature-list .p-homeSection__title .c-common-title--jp{
  font-weight: 600;
}

#feature-list .m-formHeading-body__tagList{
  padding-bottom: 0.5rem;
  padding-inline: 1.5rem;
  flex-wrap: nowrap;
  gap: 0.5rem;
  overflow: auto;
}

#feature-list .m-formHeading-body__tagListWrap{
  margin-top: 2.6rem;
}

#feature-list .m-formHeading-body__tagListItem{
  margin: 0;
  flex-shrink: 0;
}

#feature-list .m-formHeading-body__tagListItemLink{
  padding: 0.75rem 1.2rem;
  font-size: 1.4rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--color-white);
}

#feature-list .m-formHeading-body__tagListItemLink[data-category-id="001001"],
#feature-detail [id$="-contents-area"] .category-list :where(li)[data-category-id="001001"]{
  background-color: #D67936;
}

#feature-list .m-formHeading-body__tagListItemLink[data-category-id="001002"],
#feature-detail [id$="-contents-area"] .category-list :where(li)[data-category-id="001002"]{
  background-color: #4C4671;
}

#feature-list .m-formHeading-body__tagListItemLink[data-category-id="001003"],
#feature-detail [id$="-contents-area"] .category-list :where(li)[data-category-id="001003"]{
  background-color: #EF9888;
}

#feature-list .m-formHeading-body__tagListItemLink[data-category-id="001004"],
#feature-detail [id$="-contents-area"] .category-list :where(li)[data-category-id="001004"]{
  background-color: #7CA0D5;
}

#feature-list .m-formHeading-body__tagListItemLink[data-category-id="001005"],
#feature-detail [id$="-contents-area"] .category-list :where(li)[data-category-id="001005"]{
  background-color: #A7B523;
}

#feature-list .m-formHeading-body__tagListItemLink[data-category-id="001006"],
#feature-detail [id$="-contents-area"] .category-list :where(li)[data-category-id="001006"]{
  background-color: #E2BD21;
}

#feature-list .m-formHeading-body__tagListItemLink[data-category-id="001007"],
#feature-detail [id$="-contents-area"] .category-list :where(li)[data-category-id="001007"]{
  background-color: #C14C46;
}

#feature-list .m-formHeading-body__tagListItemLink[data-category-id="001008"],
#feature-detail [id$="-contents-area"] .category-list :where(li)[data-category-id="001008"]{
  background-color: #5378CC;
}

#feature-list .p-homeSection__title{
  margin-bottom: 0;
}

#feature-list .m-featureListLine{
  margin-top: 0;
  padding-top: 0;
  display: grid;
  gap: 3rem;
}

#feature-list .m-featureListLine__item{
  width: 100%;
}

#feature-list .m-featureListLine__item .c-feature-head__image{
  aspect-ratio: 345/230;
  object-fit: cover;
}

#feature-list .m-featureListLine__item .c-feature-body{
  margin-top: 2rem;
}

#feature-list .m-featureListLine__item .c-feature-body__title{
  display: grid;
  gap: 0.8rem;
}

#feature-list .m-featureListLine__item .c-feature-body__date{
  font-family: var(--font-en);
  font-size: 1.4rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.1em;
  line-height: 1;
  color: #625033;
}

#feature-list .m-featureListLine__item .c-feature-body__title-name{
  font-size: 1.4rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.025em;
  line-height: 1.5;
}

#feature-detail{
  --color-black: #333;
  --color-white: #fff;
  --color-beige-light: #F8E4BA;
  --color-beige-dark: #D67936;

  --color-table-border: #E2DDD5;
  --color-table-accent: #FCF4E7;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 600;

  --margin-block: 3.6rem;
}

#feature-detail #page-title{
  margin-block: 0;
}

#feature-detail #page-title .c-page-title{
  padding: 0;
  font-family: var(--font-ja);
  font-size: 2.2rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.05em;
  line-height: 1.6;
  border-bottom: none;
}

#feature-detail #feature-parts-header-banner{
  margin-block: var(--margin-block);
}

#feature-detail .s-featureContent-item__headerImage{
  width: 100%;
  margin: 0;
}

#feature-detail [id$="-contents-area"] .article-info{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 1rem;
}

#feature-detail [id$="-contents-area"] .category-list{
  margin-block: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#feature-detail [id$="-contents-area"] .category-list :where(li){
  padding: 0.7rem 1.5rem;
  width: fit-content;
  list-style-type: none;
  font-size: 1.4rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.02em;
  line-height: 1;
  background-color: var(--color-gray);
  border-radius: 100vh;
  color: var(--color-white);
}

#feature-detail [id$="-contents-area"] .category-list :where(li)::before{
  content: none;
}

#feature-detail [id$="-contents-area"] :where(time){
  font-family: var(--font-en);
  font-size: 1.3rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.1em;
  line-height: 1;
  color: #625033;
}

#feature-detail [id$="-contents-area"] :where(h2){
  margin-block: var(--margin-block);
  padding: 1.5rem;
  font-size: 2rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.05em;
  line-height: 1.5;
  background-color: var(--color-beige-light);
  border-radius: 0.6rem;
}

#feature-detail [id$="-contents-area"] :where(h3){
  margin-block: var(--margin-block);
  padding: 0 0 0 2rem;
  font-size: 2rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.05em;
  line-height: 1.5;
  border-left: 0.4rem solid var(--color-beige-dark);
}

#feature-detail [id$="-contents-area"] :where(h4){
  margin-block: var(--margin-block);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.2rem;
  font-size: 1.8rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.05em;
  line-height: 1.5;
}

#feature-detail [id$="-contents-area"] :where(h4)::before{
  content: '';
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: var(--color-beige-dark);
}

#feature-detail [id$="-contents-area"] :where(h5){
  margin-block: var(--margin-block);
  font-size: 1.6rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  line-height: 2;
}

#feature-detail [id$="-contents-area"] :where(p){
  margin-block: var(--margin-block);
  font-size: 1.5rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.025em;
  line-height: 2;
}

#feature-detail [id$="-contents-area"] :where(ul){
  margin-block: var(--margin-block);
}

#feature-detail [id$="-contents-area"] :where(li){
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  font-size: 1.5rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.025em;
  line-height: 2;
}

#feature-detail [id$="-contents-area"] :where(ol){
  counter-reset: ordered-list;
}

#feature-detail [id$="-contents-area"] :where(ol) :where(li){
  counter-increment: ordered-list;
  column-gap: 0.5em;
}

#feature-detail [id$="-contents-area"] :where(ol) :where(li)::before{
  content: counter(ordered-list)". ";
}

#feature-detail [id$="-contents-area"] :where(ul) :where(li)::before{
  margin-right: 1.5rem;
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--color-black);
}

#feature-detail [id$="-contents-area"] :where(small){
  margin-block: var(--margin-block);
  display: block;
  font-size: 1.4rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.025em;
  line-height: 2;
  color: var(--color-red);
}

#feature-detail [id$="-contents-area"] .text-section-fill{
  margin-block: var(--margin-block);
  padding: 2rem;
  background-color: #FCF4E7;
  border-radius: 1rem;
}

#feature-detail [id$="-contents-area"] .text-section-outline{
  margin-block: var(--margin-block);
  padding: 2rem;
  border: 2px solid #E2DDD5;
  border-radius: 1rem;
}

#feature-detail [id$="-contents-area"] .text-section-fill > * ,
#feature-detail [id$="-contents-area"] .text-section-outline > *{
  margin-block: 0;
  line-height: 2;
}

#feature-detail [id$="-contents-area"] :where(a){
  margin-block: var(--margin-block);
  display: block;
  font-size: 1.5rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.05em;
  line-height: 1.75;
  width: fit-content;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--color-sub);
}

#feature-detail [id$="-contents-area"] :where(a[target="_blank"]){
  padding-right: 2rem;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%20%3Cpath%20d%3D%22M7.667%2C5V6.333H4.333v7.333h7.333V10.333H13v4a.667.667%2C0%2C0%2C1-.667.667H3.667A.667.667%2C0%2C0%2C1%2C3%2C14.333V5.667A.667.667%2C0%2C0%2C1%2C3.667%2C5ZM15%2C3V8.333H13.667V5.275l-5.2%2C5.2-.943-.943%2C5.195-5.2H9.667V3Z%22%20transform%3D%22translate(-3%20-3)%22%20fill%3D%22%23333%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-size: 1.2rem;
  background-position: center right;
}

#feature-detail [id$="-contents-area"] :where(table){
  border-top: 1px solid var(--color-table-border);
}

#feature-detail [id$="-contents-area"] :where(table) :where(tr){
  display: grid;
  border-bottom: 1px solid var(--color-table-border);
}

#feature-detail [id$="-contents-area"] :where(table) :where(th){
  padding: 0.938rem 1rem;
  font-size: 1.5rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.02em;
  line-height: 1.75;
  text-align: left;
  background-color: var(--color-table-accent);
}

#feature-detail [id$="-contents-area"] :where(table) :where(td){
  padding: 1.5rem 1rem 2.5rem;
  font-size: 1.5rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.02em;
  line-height: 1.75;
  background-color: var(--color-white);
}

#feature-detail [id$="-contents-area"] :where(figure){
  margin-block: var(--margin-block);
  display: grid;
  gap: 1rem;
}

#feature-detail [id$="-contents-area"] :where(img){
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: auto;
}

#feature-detail [id$="-contents-area"] :where(figcaption){
  font-size: 1.3rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.02em;
  line-height: 1.75;
  color: var(--color-sub);
}

#feature-detail [id$="-contents-area"] .grid-area{
  --column-count: 2;

  margin-block: var(--margin-block);
  display: grid;
  grid-template-columns: repeat(var(--column-count), 1fr);
  align-items: start;
  gap: 3.6rem 1.5rem;
}

#feature-detail [id$="-contents-area"] .grid-area > *{
  margin-block: 0;
}

#feature-detail .feature-content__share{
  margin-block: 8rem;
}

#feature-detail .feature-content__share--heading{
  text-align: center;
  font-family: var(--font-en);
  font-size: 1.8rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.1em;
  line-height: 1;
}

#feature-detail .feature-content__share--list{
  margin-top: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
}

#feature-detail .feature-content__share--item{
  width: 3.6rem;
  height: 100%;
  aspect-ratio: 1;
}

#feature-detail .feature-content__share :where(img){
  width: 100%;
  height: auto;
  display: block;
}

#feature-detail .m-featureProductList__title{
  margin-bottom: 3.6rem;
  padding: 1.5rem;
  font-family: var(--font-ja);
  font-size: 2rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-align: left;
  background-color: var(--color-beige-light);
  border-radius: 0.6rem;
}

#feature-detail .m-featureProductList .l-container{
  padding-inline: 0;
}

#feature-detail .m-featureProductListLine{
  display: grid;
  gap: 2.5rem;
  overflow: hidden;
}

#feature-detail .m-featureProductListLine__item{
  width: 100%;
  justify-content: unset;
}

#feature-detail .c-product-body__price{
  margin-top: 0.85rem;
  display: grid;
  gap: 0.5rem;
  font-size: 1.8rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.025em;
}

#feature-detail .l-container.opened .m-featureProductListLine{
  height: fit-content!important;
}

#feature-detail .feature-product__viewmore{
  margin-inline: auto;
  padding: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  width: 20rem;
  height: 5rem;
  background-color: var(--color-button);
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  color: var(--color-secondary) !important;
  cursor: pointer;
}

#feature-detail .feature-product__viewmore::before,
#feature-detail .feature-product__viewmore::after{
  content: '';
  width: 1.1rem;
  height: 1px;
  background-color: #D57936;
  position: absolute;
  top: 50%;
  right: 1.5rem;
}

#feature-detail .feature-product__viewmore::before{
  transform: translateY(-50%);
}

#feature-detail .feature-product__viewmore::after{
  transform: translateY(-50%);
  rotate: -90deg;
  transition: rotate var(--transition-default);
}

#feature-detail .feature-product__viewmore.opened::after{
  rotate: 0deg;
}

@media (min-width: 768px) {
  #feature-list .m-formHeading-body__tagList{
    justify-content: center;
  }

  #feature-list .m-formHeading-body__tagListWrap{
    margin-top: 4rem;
  }

  #feature-list .m-formHeading-body__tagListItemLink{
    padding: 0.85rem 1.6rem;
    font-size: 1.5rem;
  }

  #feature-list .m-featureListLine{
    grid-template-columns: repeat(3, 1fr);
    gap: 5rem 3rem;
  }

  #feature-list .s-formContent-head{
    margin-top: 4.8rem;
    padding-bottom: 4rem;
  }

  #feature-list .m-formHeading-head{
    margin-bottom: 0;
    justify-content: center;
  }

  #feature-list .m-featureListLine__item .c-feature-body__date{
    font-size: 1.5rem;
  }

  #feature-list .m-featureListLine__item .c-feature-body__title-name{
    font-size: 1.5rem;
  }

  #feature-detail{
    --margin-block: 5rem;
  }

  #feature-detail #page-title .c-page-title{
    font-size: 3rem;
    line-height: 1.5;
  }

  #feature-detail [id$="-contents-area"] :where(time){
    font-size: 1.5rem;
  }

  #feature-detail [id$="-contents-area"] :where(h2){
    font-size: 2.4rem;
  }

  #feature-detail [id$="-contents-area"] :where(h3){
    padding: 0 0 0 2.5rem;
    font-size: 2.4rem;
  }

  #feature-detail [id$="-contents-area"] :where(h4){
    font-size: 2rem;
    gap: 2rem;
  }

  #feature-detail [id$="-contents-area"] :where(h4)::before{
    width: 1rem;
    height: 1rem;
  }

  #feature-detail [id$="-contents-area"] :where(h5){
    font-size: 1.8rem;
  }

  #feature-detail [id$="-contents-area"] :where(p){
    font-size: 1.7rem;
  }

  #feature-detail [id$="-contents-area"] :where(li){
    font-size: 1.7rem;
  }

  #feature-detail [id$="-contents-area"] :where(small){
    font-size: 1.4rem;
  }

  #feature-detail [id$="-contents-area"] .text-section-fill{
    padding: 3rem;
  }

  #feature-detail [id$="-contents-area"] .text-section-outline{
    padding: 3rem;
  }

  #feature-detail [id$="-contents-area"] :where(a){
    font-size: 1.7rem;
    line-height: 1.5;
  }

  #feature-detail [id$="-contents-area"] :where(table) :where(tr){
    display: table;
  }

  #feature-detail [id$="-contents-area"] :where(table) :where(th){
    padding: 2.5rem 2rem;
    width: 25%;
    font-size: 1.6rem;
  }

  #feature-detail [id$="-contents-area"] :where(table) :where(td){
    padding: 2.5rem 2rem;
    font-size: 1.6rem;
  }

  #feature-detail [id$="-contents-area"] :where(figure){
    gap: 2rem;
  }

  #feature-detail [id$="-contents-area"] :where(figcaption){
    font-size: 1.5rem;
    line-height: 1.75;
  }

  #feature-detail [id$="-contents-area"] .grid-area{
    gap: 4.8rem 4rem;
  }

  #feature-detail [id$="-contents-area"] .grid-area[data-pc-column="3"]{
    --column-count: 3;
  }

  #feature-detail [id$="-contents-area"] .grid-area[data-pc-column="4"]{
    --column-count: 4;
  }

  #feature-detail .m-featureProductList__title{
    margin-bottom: 4rem;
    font-size: 2.4rem;
  }

  #feature-detail .feature-content__share{
    margin-block: 0;
  }

  #feature-detail .m-featureProductListLine{
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  #feature-detail .feature-product__viewmore{
    width: 25rem;
    height: 6rem;
    font-size: 1.6rem;
    transition: all 0.3s ease;
  }
}

@media (hover: hover){
  #feature-detail .feature-product__viewmore:hover{
    opacity: 1;
    background-color: var(--color-primary);
    color: var(--color-white) !important;
  }

  #feature-detail .feature-product__viewmore:hover::before,
  #feature-detail .feature-product__viewmore:hover::after{
    background-color: var(--color-white);
  }
}