@charset "UTF-8";
@import url("featurepage_parts.css");

@media (max-width: 767px) {
  #page-title, 
  #header-banner, 
  #upper-contents-area, 
  #feature-group-items, 
  #feature-page-list {
    padding-inline: 1.3rem;
  }
}
.global-contents__inner {
  padding-bottom: 0;
}
.c-page-title {
  margin-top: 6.9rem;
}
.c-breadcrumb {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
}
@media (max-width: 767px) {
  .c-page-title {
    margin-top: 3.29rem;
  }
}

.js-copy-code.hide {
  display: none;
}
.js-copy-button {
  width: 100%;
  max-height: 6rem;
  border: 1px solid #DDD;
  text-align: left;
  padding: 1rem;
  padding-right: 8rem;
  margin-top: 2rem;
  position: relative;
}
.js-copy-button::after {
  content: '';
  background-image: url("data:image/svg+xml;base64,PHN2ZyBzdHlsZT0icG9pbnRlci1ldmVudHM6bm9uZTsgd2lkdGg6MTAwJTsgaGVpZ2h0OmF1dG87IiBmaWxsPSJjdXJyZW50Q29sb3IiIHdpZHRoPSI4MDBweCIgaGVpZ2h0PSI4MDBweCIgdmlld0JveD0iMCAwIDE5MjAgMTkyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCAxOTE5Ljg4N2gxNDY3Ljg4VjQ1Mi4wMDhIMHYxNDY3Ljg4Wk0xMzU0Ljk2NSA1NjQuOTIydjEyNDIuMDUxSDExMi45MTRWNTY0LjkyMmgxMjQyLjA1MVpNMTkyMCAwdjE0NjcuOTkyaC0zMzguNzQxdi0xMTMuMDI3aDIyNS44MjdWMTEyLjkxNEg1NjUuMDM1VjMzOC43NEg0NTIuMDA4VjBIMTkyMFpNMzM4Ljc0MSAxMDE2LjkzaDc5MC4zOTdWOTA0LjAxNkgzMzguNzR2MTEyLjkxNFptMCA0NTEuMDYyaDc5MC4zOTd2LTExMy4wMjdIMzM4Ljc0djExMy4wMjdabTAtMjI1LjU4OGg1NjQuNTd2LTExMi45MTNIMzM4Ljc0djExMi45MTNaIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjwvcGF0aD48L3N2Zz4=");
  background-size: contain;
  opacity: 0.3;
  width: 2rem;
  height: 2rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 2rem;
}
.js-copy-button code {
  white-space: nowrap;
  overflow-x: scroll;
  width: 100%;
  max-height: 4rem;
  display: inline-block;
}
@media (max-width: 767px) {
  .js-copy-button {
    max-width: calc(100vw - 2.6rem);
  }
  .js-copy-button code {
    max-width: calc(100vw - 2.6rem - 9rem - 0.2rem);
  }
}

/*----------------------------------------
 特集ページ
-----------------------------------------*/
.feature-detail {
  margin-inline: auto;
}
#header-banner {
  margin-bottom: 3rem;
  display: none;
}

/*-- BOTTOM --*/
.feature-bottom {
  display: flex;
  justify-content: space-between;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  margin-top: 6rem;
  padding-inline: calc((100vw - min(80rem, 100%)) / 2);
  background: #f5f5f5;
  height: 6rem;
  align-items: center;
}
.feature-bottom-back_wrapper {
  display: grid;
  gap: 0.3rem;
}
.feature-bottom-back {
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  line-height: 1.393;
  position: relative;
  padding-left: 3rem;
}
.feature-bottom-back::before {
  content: '';
  position: absolute;
  left: 0;
  background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0i44Kz44Oz44Od44O844ON44Oz44OIXzQyXzE1NCIgZGF0YS1uYW1lPSLjgrPjg7Pjg53jg7zjg43jg7Pjg4ggNDIg4oCTIDE1NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTciIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNyAxNyI+IDxyZWN0IGlkPSLplbfmlrnlvaJfNDIiIGRhdGEtbmFtZT0i6ZW35pa55b2iIDQyIiB3aWR0aD0iMTciIGhlaWdodD0iMTciIGZpbGw9Im5vbmUiLz4gPHBhdGggaWQ9IuODkeOCuV82IiBkYXRhLW5hbWU9IuODkeOCuSA2IiBkPSJNMzQ5Ljg4NC0xMjc0LjNsLTYuMDcxLDUuMjYxLDYuMDcxLDUuMjYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMzguMDQ1IDEyNzcuODM4KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOTk5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41Ii8+PC9zdmc+");
  width: 1.7rem;
  height: 1.7rem;
  background-size: contain;
}
.feature-bottom-back a {
  text-decoration: none;
  color: var(--color-text-default);
}
.feature-bottom-sns-area {
  display: flex;
  gap: 1.6rem;
  align-items: center;
}
.feature-bottom-sns-title {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  line-height: 1.5;
}
.feature-sns-list {
  display: grid;
  grid-template-columns: repeat(3, 2.8rem);
  gap: 1rem;
}
@media (max-width: 767px) {
  .feature-bottom {
    margin-top: 4rem;
    height: 7rem;
    padding-inline: 1.3rem;
  }
.feature-bottom-back {
  font-size: 1.4rem;
  line-height: 1.5;
  }
  .feature-bottom-sns-title {
    font-size: 1.5rem;
    letter-spacing: 0.1em;
  }
}

/*----------------------------------------
 特集ページ一覧
-----------------------------------------*/
.feature-page-list-nav--topics {
  margin-block: 4.3rem 2.5rem;
  display: grid;
  gap: 2.5rem;
}
.feature-page-list-nav--topics .feature-page-list-nav-category:not(:has(.feature-page-parts-category-links-items > li)) {
  display: none;
}
.feature-page-list-nav--topics .feature-page-list-nav-title {
  font-weight: bold;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
  margin-bottom: 1rem;
}
.feature-page-list-nav--topics .feature-page-parts-brand-links-items, 
.feature-page-list-nav--topics .feature-page-parts-category-links-items {
  display: flex;
  flex-wrap: wrap;
/*  white-space: nowrap;*/
  gap: 1rem;
}
.feature-page-list-nav--topics .feature-page-parts-brand-links-items li, 
.feature-page-list-nav--topics .feature-page-parts-category-links-items li {
  border-radius: 9999px;
  display: grid;
  align-items: center;
}
.feature-page-list-nav--topics .feature-page-parts-brand-links-items li {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-align: center;

  background: #595757;
  opacity: 0.4;
  min-width: 14rem;
  padding-inline: 1.5rem;
  height: 3.4rem;
}
.feature-page-list-nav--topics .feature-page-parts-brand-links-items li.active {
  opacity: 1;
}
.feature-page-list-nav--topics .feature-page-parts-brand-links-items a {
  color: #fff;
  text-decoration: none;
}
.feature-page-list-nav--topics .feature-page-parts-category-links-items li {
  font-weight: bold;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  line-height: 1.6;

  background: #fff;
  border: 1px solid #ebebeb;
  min-width: 16.9rem;
  padding-inline: 1.7rem 5.7rem;
  min-height: 3.4rem;
  height: fit-content;
  position: relative;
}
.feature-page-list-nav--topics .feature-page-parts-category-links-items li::after {
  content: '';
  position: absolute;
  right: 1.7rem;
  top: 50%;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0Ij4gPGcgaWQ9IuOCs+ODs+ODneODvOODjeODs+ODiF80Ml82MCIgZGF0YS1uYW1lPSLjgrPjg7Pjg53jg7zjg43jg7Pjg4ggNDIg4oCTIDYwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNCAxNCkgcm90YXRlKDE4MCkiPiA8cmVjdCBpZD0i6ZW35pa55b2iXzQyIiBkYXRhLW5hbWU9IumVt+aWueW9oiA0MiIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiBmaWxsPSJub25lIi8+IDxwYXRoIGlkPSLjg5HjgrlfNiIgZGF0YS1uYW1lPSLjg5HjgrkgNiIgZD0iTTM0OS40MTMtMTI3NC4yOTVsLTQuNiw0LjAzOCw0LjYsNC4wMzgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zNDAuMDYzIDEyNzcuNTA3KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOTk5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41Ii8+IDwvZz48L3N2Zz4=");
  width: 1.4rem;
  height: 1.4rem;
  background-size: contain;
  background-repeat: no-repeat;
}
.feature-page-list-nav--topics .feature-page-parts-category-links-items a {
  color: var(--color-text-default);
  text-decoration: none;
}
.feature-page-list-nav--topics .feature-page-list-nav--border {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  border-bottom: 0.6rem solid #F5F5F5;
  margin-block: 0rem 3rem;
}
#feature-page-parts-category-links-more {
  display: none;
}
@media (max-width: 767px) {
  .feature-page-list-nav--topics {
    margin-block: 3rem 2.5rem;
  }
  .feature-page-list-nav--topics .feature-page-list-nav-title {
    margin-bottom: 1rem;
  }
  .feature-page-list-nav--topics .feature-page-parts-brand-links-items, 
  .feature-page-list-nav--topics .feature-page-parts-category-links-items {
    display: grid;
  }
  .feature-page-list-nav--topics .feature-page-parts-brand-links-items {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
  }
  .feature-page-list-nav--topics .feature-page-parts-category-links-items {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem 0.7rem;
  }
  .feature-page-list-nav--topics .feature-page-parts-brand-links-items li {
    font-weight: 600;
    font-size: 1.2rem;
    min-width: unset;
    height: unset;
    min-height: 3rem;
    white-space: normal;
    padding: 0.2rem;
  }
  .feature-page-list-nav--topics .feature-page-parts-category-links-items li {
    font-size: 1.3rem;
    min-width: unset;
    padding-inline: 1.7rem 2.7rem;
  }
  .feature-page-list-nav--topics .feature-page-list-nav--border {
    margin-block: 0rem 2.5rem;
  }
 .feature-page-list-nav--topics .feature-page-parts-category-links-items li::after {
   right: 1.2rem;
  }
  .feature-page-list-nav--topics input[type="checkbox"]#feature-page-parts-category-links-more ~ .feature-page-parts-category-links-items {
    max-height: 8rem;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
  }
  .feature-page-list-nav--topics input[type="checkbox"]#feature-page-parts-category-links-more:checked ~ .feature-page-parts-category-links-items {
    max-height: unset;
    transition: max-height 0.3s ease-out;
  }
  .feature-page-list-nav--topics input[type="checkbox"]#feature-page-parts-category-links-more ~ label[for="feature-page-parts-category-links-more"] {
    margin-top: 1.5rem;
    width: 30%;
    display: block;
    text-align: center;
    margin-inline: auto;
    position: relative;
  }
  .feature-page-list-nav--topics input[type="checkbox"]#feature-page-parts-category-links-more ~ label[for="feature-page-parts-category-links-more"]::before{
    content: "もっと見る";
  }
  .feature-page-list-nav--topics input[type="checkbox"]#feature-page-parts-category-links-more ~ label[for="feature-page-parts-category-links-more"]::after{
    content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0Ij4gPGcgaWQ9IuOCsOODq+ODvOODl18yMTM5MyIgZGF0YS1uYW1lPSLjgrDjg6vjg7zjg5cgMjEzOTMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDAgLTMpIj4gPGcgaWQ9IuOCsOODq+ODvOODl18yMTM5MiIgZGF0YS1uYW1lPSLjgrDjg6vjg7zjg5cgMjEzOTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjIuNSAtNDcyKSI+IDxsaW5lIGlkPSLnt5pfMTUzNyIgZGF0YS1uYW1lPSLnt5ogMTUzNyIgeDI9IjEwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMjQuNSA0ODIpIiBmaWxsPSJub25lIiBzdHJva2U9IiM1OTU3NTciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4gPGxpbmUgaWQ9Iue3ml8xNTM4IiBkYXRhLW5hbWU9Iue3miAxNTM4IiB4Mj0iMTAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIyOS41IDQ3Nykgcm90YXRlKDkwKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNTk1NzU3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41Ii8+IDwvZz4gPHJlY3QgaWQ9IumVt+aWueW9ol80MiIgZGF0YS1uYW1lPSLplbfmlrnlvaIgNDIiIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTE0IDE3KSByb3RhdGUoMTgwKSIgZmlsbD0ibm9uZSIvPiA8L2c+PC9zdmc+");
    position: absolute;
    right: 0;
  }
  .feature-page-list-nav--topics input[type="checkbox"]#feature-page-parts-category-links-more:checked ~ label[for="feature-page-parts-category-links-more"]::before{
    content: "閉じる";
  }
  .feature-page-list-nav--topics input[type="checkbox"]#feature-page-parts-category-links-more:checked ~ label[for="feature-page-parts-category-links-more"]::after{
    content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0Ij4gPGcgaWQ9IuOCsOODq+ODvOODl18yMTM5MyIgZGF0YS1uYW1lPSLjgrDjg6vjg7zjg5cgMjEzOTMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDAgLTMpIj4gPGcgaWQ9IuOCsOODq+ODvOODl18yMTM5MiIgZGF0YS1uYW1lPSLjgrDjg6vjg7zjg5cgMjEzOTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjIuNSAtNDcyKSI+IDxsaW5lIGlkPSLnt5pfMTUzNyIgZGF0YS1uYW1lPSLnt5ogMTUzNyIgeDI9IjEwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMjQuNSA0ODIpIiBmaWxsPSJub25lIiBzdHJva2U9IiM1OTU3NTciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4gPC9nPiA8cmVjdCBpZD0i6ZW35pa55b2iXzQyIiBkYXRhLW5hbWU9IumVt+aWueW9oiA0MiIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMTQgMTcpIHJvdGF0ZSgxODApIiBmaWxsPSJub25lIi8+IDwvZz48L3N2Zz4=");
  }
  .feature-page-parts-category-links-items:has(> :nth-child(-n+4):last-child) {
    max-height: unset !important;
  }
  .feature-page-parts-category-links-items:has(> :nth-child(-n+4):last-child) + label[for="feature-page-parts-category-links-more"] {
    display: none !important;
  }
}

.feature-page-list-nav--news .feature-page-list-nav-category {
  width: fit-content;
  margin-inline: auto 0;
  margin-bottom: 0.8rem;
}
.feature-page-list-nav--news .feature-page-list-nav-title {
  font-weight: bold;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-align: right;
}
.feature-page-list-nav--news .feature-page-parts-category-links-items-select {
  position: relative;
  width: 25rem;
}
.feature-page-list-nav--news .feature-page-parts-category-links-items-selected-text {
  display: inline-block;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  line-height: 1.615;
  padding-right: 3rem;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij4gPGcgaWQ9IuOCs+ODs+ODneODvOODjeODs+ODiF80Ml82OSIgZGF0YS1uYW1lPSLjgrPjg7Pjg53jg7zjg43jg7Pjg4ggNDIg4oCTIDY5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDE4KSByb3RhdGUoLTkwKSI+IDxyZWN0IGlkPSLplbfmlrnlvaJfNDIiIGRhdGEtbmFtZT0i6ZW35pa55b2iIDQyIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIGZpbGw9Im5vbmUiLz4gPHBhdGggaWQ9IuODkeOCuV82IiBkYXRhLW5hbWU9IuODkeOCuSA2IiBkPSJNMzUwLjcyNy0xMjc0LjI5NWwtNS45MTQsNS4xOTIsNS45MTQsNS4xOTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMzguNzA2IDEyNzguNDI1KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOTk5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41Ii8+IDwvZz48L3N2Zz4=");
  background-repeat: no-repeat;
  background-size: 1.8rem 1.8rem;
  background-position: top 50% right 1rem;
  border: 1px solid #EBEBEB;
  border-radius: 0.4rem;
  width: 100%;
  height: 4rem;
  display: grid;
  align-items: center;
  padding-left: 1.5rem;
}
.feature-page-list-nav--news .feature-page-parts-category-links-items {
  visibility: hidden;
  position: absolute;
  z-index: 3;
  top: 4rem;
  left: 0;
  background-color: var(--color-white);
  font-size: 1.3rem;
  transition: height var(--transition-default);
  overflow: hidden;
  border: 1px solid #EBEBEB;
  border-radius: 0.4rem;
  width: 100%;
}
.feature-page-list-nav--news .feature-page-parts-category-links-items li {
  padding: 1.5rem 1rem;
}
.feature-page-list-nav--news .feature-page-parts-category-links-items li a {
  color: var(--color-text-default);
  text-decoration: none;
}
.feature-page-list-nav--news .feature-page__lit-nav-news-all {
  text-align: right;
  margin-bottom: 2rem;
}
.feature-page-list-nav--news .feature-page__lit-nav-news-all a {
  color: var(--color-text-default);
}
@media (max-width: 767px) {
  .feature-page-list-nav--news .feature-page-list-nav-category {
    display: block;
    width: 100%;
  }
  .feature-page-list-nav--news .feature-page-list-nav-title {
    text-align: left;
    margin-bottom: 1rem;
  }
  .feature-page-list-nav--news .feature-page-parts-category-links-items-select {
    width: 100%;
  }
}


.feature-page-view-items {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3.5rem 2.5rem;
  overflow-wrap: break-word; 
  word-break: break-word;
}
.feature-page-view-item a {
  text-decoration: none;
}
.feature-page-view-items img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.feature-page-view-title {
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--color-text-default);
  margin-top: 1rem;
}
.feature-page-view-date {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  line-height: 1.75;
  color: #999;
  display: block;
  margin-bottom: 1rem;
}

.feature-page-view-no-item {
  text-align: center;
  font-size: 1.6rem;
  padding: 2rem 0;
  margin-bottom: 5.5rem;
}

@media (max-width: 767px) {
  .feature-page-view-title {
    font-size: 1.3rem;
  }
  .feature-page-view-date {
    font-size: 1.2rem;
  }
  .feature-page-view-items {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 1.1rem;
  }
  .feature-page-view-no-item {
    margin-bottom: 5rem;
  }
}