@charset "UTF-8";


/* ===============================================
  * Foundation *
=============================================== */

@media screen and (max-width: 767px) {
  .l-container-wrap {
    flex-direction: revert;
  }
}

/*
 * Structure
 */

.p-page-feature {
  --padding-horizontal-general: 1.5rem;
}

@media (min-width: 768px) {
  .p-page-feature {
    --padding-horizontal-general: 4rem;
  }

  .l-container-sm {
    max-width: calc(93.5rem + (var(--padding-horizontal-general) * 2));
  }
}

.l-container-sm {
  padding-inline: var(--padding-horizontal-general);
}

.l-container-wrap__body {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.s-featureContent-body {
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  line-height: 1.5
}

@media (min-width: 768px) {
  .l-container-wrap__body {
    padding-bottom: 8rem;
  }

  .s-featureContent-body {
    font-size: 1.5rem;
  }
}

.s-featureContent-item {
  margin-block: 0;
}


/* Spacer */

.p-page-feature {
  --spacer-xs: 1rem;
  --spacer-s: 2rem;
  --spacer-m: 3rem;
  --spacer-ml: 4rem;
  --spacer-l: 5rem;
  --spacer-xl: 6rem;
}

.p-feature__spacer-xs {
  height: var(--spacer-xs);
}

.p-feature__spacer-s {
  height: var(--spacer-s);
}

.p-feature__spacer-m {
  height: var(--spacer-m);
}

.p-feature__spacer-ml {
  height: var(--spacer-ml);
}

.p-feature__spacer-l {
  height: var(--spacer-l);
}

.p-feature__spacer-xl {
  height: var(--spacer-xl);
}

/* Text */

.p-feature__text--publication {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
}

.p-feature__text--publication-category {
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  line-height: 1.846;
  background-color: #F5F5F5;
  padding: 0.4rem 1rem;
}

.p-feature__text--publication-date {
  font-family: var(--font-en);
  font-size: 1.3rem;
  letter-spacing: .08em;
  line-height: 1;
  text-align: right;
}

.m-featureProductList__title, 
.p-feature__text--title-h2 {
  margin: 0;
  font-weight: bold;
  font-size: 2rem;
  letter-spacing: 0.1em;
  line-height: 1.5;
  padding-bottom: 1.5rem;
  position: relative;
  text-align: left;
}
.m-featureProductList__title::before, 
.m-featureProductList__title::after, 
.p-feature__text--title-h2::before, 
.p-feature__text--title-h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
}
.m-featureProductList__title::before, 
.p-feature__text--title-h2::before {
  width: 100%;
  border-bottom: 3px solid #E3E3E3;
}
.m-featureProductList__title::after, 
.p-feature__text--title-h2::after {
  width: 10rem;
  border-bottom: 3px solid var(--color-primary);
}

.p-feature__text--title-h3 {
  margin: 0;
  font-weight: bold;
  font-size: 1.8rem;
  letter-spacing: 0.1em;
  line-height: 1.5;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--color-primary);
}

.p-feature__text--title-h4 {
  margin: 0;
  font-weight: bold;
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  line-height: 1.5;
  padding-left: 1rem;
  border-left: 5px solid var(--color-primary);
}

.p-feature__text--title-h5 {
  margin: 0;
  font-weight: bold;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  line-height: 1.5;
}

[class*="p-feature__text--paragraph"] {
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  line-height: 1.75;
}

.p-feature__text--paragraph-attention {
  color: var(--color-danger);
}

.p-feature__text--link {
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  line-height: 1.75;
  text-decoration: underline;
}

.p-feature__text--link[target="_blank"] {
  display: grid;
  grid-template-columns: 1fr 1.5rem;
  column-gap: .5rem;
  align-items: center;

  width: fit-content;
}

.p-feature__text--link[target="_blank"]::after {
  content: "";

  width: 100%;
  aspect-ratio: 1;
  background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iX2JsYW5rIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDE1IDE1Ij4gPHJlY3QgaWQ9ImJnIiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIGZpbGw9InJnYmEoMTM3LDEzNywxMzcsMCkiLz4gPGcgaWQ9Il9ibGFuay0yIiBkYXRhLW5hbWU9Il9ibGFuayIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMy4xMzkgMi45NDUpIj4gPGcgaWQ9Il9ibGFuay0zIiBkYXRhLW5hbWU9Il9ibGFuayIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMi4zMjUpIiBmaWxsPSJub25lIiBzdHJva2U9IiMyOTFhMWEiIHN0cm9rZS13aWR0aD0iMS4yIj4gPHJlY3Qgd2lkdGg9IjYuMzk3IiBoZWlnaHQ9IjYuMzk3IiBzdHJva2U9Im5vbmUiLz4gPHJlY3QgeD0iMC42IiB5PSIwLjYiIHdpZHRoPSI1LjE5NyIgaGVpZ2h0PSI1LjE5NyIgZmlsbD0ibm9uZSIvPiA8L2c+IDxwYXRoIGlkPSJfYmxhbmstNCIgZGF0YS1uYW1lPSJfYmxhbmsiIGQ9Ik0xMjY0LjA5Myw0Mzg3djUuODU2aDUuNyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEyNjQuMDkzIC00MzgzLjgwMSkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzI5MWExYSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz4gPC9nPjwvc3ZnPg==");  background-repeat: no-repeat;
  background-size: contain;
}

[class*="p-feature__text--annotation"] {
  font-size: 1.3rem;
  letter-spacing: .15em;
  line-height: 1.5;
}

.p-feature__text--annotation-red {
  color: var(--color-danger);
}

@media (min-width: 768px) {

  .p-feature__text--publication-category {
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    line-height: 1.5;
  }

  .p-feature__text--publication-date {
    font-size: 1.5rem;
    letter-spacing: .08em;
    line-height: 1.5;
  }

  .m-featureProductList__title, 
  .p-feature__text--title-h2 {
    font-size: 2.2rem;
  }
  .m-featureProductList__title::after, 
  .p-feature__text--title-h2::after {
    width: 15rem;
  }

  .p-feature__text--title-h3 {
    font-size: 2rem;
  }

  .p-feature__text--title-h4 {
    font-size: 1.8rem;
  }

  .p-feature__text--title-h5 {
    font-size: 1.6rem;
  }

  [class*="p-feature__text--paragraph"] {
    font-size: 1.5rem;
  }

  .p-feature__text--link {
    font-size: 1.5rem;
  }
}


/*
 * List
 */

[class*="p-feature__list"] {
  display: grid;
  row-gap: 1rem;
}

.p-feature__list-item {
  display: flex;
  align-items: baseline;
  column-gap: 1rem;

  font-size: 1.3rem;
  letter-spacing: 0.08em;
  line-height: 1.75;
}

.p-feature__list--disc .p-feature__list-item::before {
  content: "・";

  margin-left: -.25em;
}

.p-feature__list--number > .p-feature__list-item {
  counter-increment: list-count;
}

.p-feature__list--number > .p-feature__list-item::before {
  content: counter(list-count) ".";
}

@media (min-width: 768px) {
  .p-feature__list-item {
    font-size: 1.5rem;
  }
}

/*
 * Others
 */

.p-feature__hr {
  width: 100%;
  height: 1px;
  margin: 0;
  background-color: #CECECE;
  border: none;
}


/* ===============================================
  * 特集コラム詳細 *
=============================================== */

/*
 * ページタイトル
 */

.s-featureContent-item:has(.c-page-title) {
  margin-bottom: 2rem;
}

.c-page-title {
  padding-bottom: 0;
  border-bottom: none;

  font-size: 2.2rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.5;
}


/*
 * 見出し画像
 */

.s-featureContent-item__headerImage {
  width: 100%;
  margin: 0 auto 2rem;;
}


@media (min-width: 768px) {
  .c-page-title {
    font-size: 2.4rem;
  }


  .s-featureContent-item__headerImage {
    width: 50rem;
    margin: 0 auto 2rem;
  }
}


/*
 * メモ
 */

.p-feature__note--bg {
  background-color: #f5f5f5;
}

.p-feature__note--border {
  border: solid 1px var(--color-black);
}

.p-feature__note-inner {
  padding: 2rem;
}

.p-feature__note-inner .p-feature__text--paragraph {
  line-height: 1.75;
}


/*
 * Table
 */

.feature__table {
  border: 1px solid #D1CBCB;
}

.feature__table-item {
  display: flex;
  flex-direction: column;
}

.feature__table-item + .feature__table-item dt {
  border-top: 1px solid #D1CBCB;
}

.feature__table-item + .feature__table-item dd {
  border-top: 1px solid #D1CBCB;
}

.feature__table-item dt, 
.feature__table-item dd {
  padding: 1.5rem 1rem;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  line-height: 1.75;
  width: 100%;
}

.feature__table-item dt {
  padding-inline-end: 1rem;
  background-color: var(--color-primary);
  font-weight: bold;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  line-height: 1.75;
  color: #fff;
}

@media (min-width: 768px) {
  .feature__table-item{
    display: grid;
    grid-template-columns: 25rem auto;
  }

  .feature__table-item dt, 
  .feature__table-item dd {
    padding: 2.5rem 2rem;
    font-size: 1.5rem;
  }

  .feature__table-item dt {
    font-size: 1.5rem;
  }
}


/*
 * Map
 */
.feature__map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 36.8rem;
}

.feature__map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  .feature__map {
    padding-top: 46rem;
  }
}


/*
 * CardUnit
 */

.feature__cardunit a {
  text-decoration: unset;
  color: var(--color-text-default);
}

.feature__cardunit {
  display: grid;
}

.feature__cardunit[ data-cardunit="2"], 
.feature__cardunit[ data-cardunit="4"] {
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
}

.feature__cardunit[ data-cardunit="3"]{
  grid-template-columns: repeat(1,1fr);
  gap: 1.5rem;
}

[data-cardunit] figcaption{
  margin-top: 1rem;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  line-height: 1.75;
}


@media (min-width: 768px) {
  .feature__cardunit{
     display: grid;
  }

  .feature__cardunit[ data-cardunit="2"] {
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
  }

  .feature__cardunit[ data-cardunit="3"] {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }

  .feature__cardunit[ data-cardunit="4"] {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }

  [data-cardunit] figcaption{
    font-size: 1.5rem;
  }
}

/*
 * Back to list & SNS
 */

.s-featureContent-item--share {
  order: 999;

  width: 100%;
}

.p-feature__sns-inner {
  display: grid;
}

.p-feature__sns-text--title {
  font-family: Oswald;
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: 0.1em;
  text-align: center;
  color: #000;
}

.p-feature__sns-list {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 2.8rem;
  padding-block: 2rem 0;
}

.p-feature__sns-list-item img {
  width: 3rem;
}

@media (min-width: 768px) {
  .s-featureContent-item--share {
    padding-top: 2rem;
  }
  .p-feature__sns-text--title {
    margin-top: 2rem;
  }
}


[class*="p-feature__sns-button"] {
  display: grid;
  place-content: center;

  padding: 0;
  background-color: transparent;
  border: none;

  cursor: pointer;
}

.js-copyLinkToast {
  position: fixed;
  right: 0;
  bottom: 5svh;
  left: 0;
  z-index: var(--zindex-header-bg);

  width: fit-content;
  margin: auto;
  padding: .4rem 1.6rem;
  border-radius: 1.6rem;
  background-color: var(--color-project-bg-high);

  pointer-events: none;

  opacity: 0;
  transition: opacity var(--transition-default);
}

.js-copyLinkToast.is-active {
  opacity: 1;
}

/* ===============================================
  * 商品 *
=============================================== */

.m-featureProductList {
  padding: 4rem 0 0;
}

.m-featureProductList__title {
  font-family: var(--font-main);
}

.m-featureProductList > .l-container {
  margin-top: 3rem;
  padding-left: 0;
  padding-right: 0;
}

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

.m-featureProductListLine__item {
  width: 100%;
}

.c-product-body__title-name {
  font-size: 1.2rem;
}

.c-productSkuSelectBox__item {
  font-size: 1.3rem;
  line-height: 1.7;
}

.p-productSkuBottomBtn .c-btn-favorit, 
.p-productSkuBottomBtn .c-btn-cart {
  font-weight: bold;
  font-size: 1.3rem;
  line-height: 1.7;
  padding: 1.36rem 0 1.4rem;
}

.p-productSkuBottomBtn .c-btn-cart::before {
  width: 1.6rem;
  height: 1.9rem;
}

.p-productSkuBottomBtn .c-btn-favorit::before {
  width: 2.2rem;
  height: 1.9rem;
}

@media (min-width: 768px) {
  .c-productSkuSelectBox__item {
    font-size: 1.5rem;
  }
  .m-featureProductListLine {
    grid-template-columns: repeat(4, 1fr);
    gap: 4rem 2rem;
  }

  .p-productSkuBottomBtn .c-btn-favorit, 
  .p-productSkuBottomBtn .c-btn-cart {
    font-size: 1.4rem;
    padding: 1rem 0 1.2rem;
  }
}



/* ===============================================
  * 一覧・詳細共通 *
=============================================== */
.l-container-wrap__body {
  padding-top: 0;
}

/*
 * Breadcrumb
 */

.m-breadcrumb {
  margin-block: 1rem;
}
@media (min-width: 768px) {
  .m-breadcrumb {
    margin-block: 2rem;
  }
}

/*
.m-breadcrumb {
  padding: 1rem 2rem;
  background-color: var(--color-styling-gray-1);
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  position: relative;
  overflow-y: scroll;
}
@media (max-width: 767px) {
  .l-container-wrap:has(#s-featureContent) .m-breadcrumb {
    left: calc(50vw - 2.1rem);
  }
}
.m-breadcrumb .c-breadcrumb-list {
  width: 100%;
  flex-wrap: nowrap;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
}
.m-breadcrumb .c-breadcrumb-item:not(:last-child)::after {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4LjkwNyIgaGVpZ2h0PSIxNC45ODUiIHZpZXdCb3g9IjAgMCA4LjkwNyAxNC45ODUiPiA8cGF0aCBpZD0iXyIgZGF0YS1uYW1lPSImbHQ7IiBkPSJNNTkxLjkwNywyMjgyLjM3bC02Ljc4Niw2Ljc4Niw2Ljc4Niw2Ljc4NiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTU4My43MDcgLTIyODEuNjYzKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZWE1ODEyIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=");
  transform: rotate(180deg);
  transform-origin: 0.25rem;
}
*/

/*
 * Pager
 */
.m-featureProductList-pager, 
.s-featureContent-body__pager {
  margin-top: 0;
}
.c-pager:has(.c-pager__list) {
  margin-top: 6rem;
}
/*
.c-pager {
  gap: 3rem;
}
.c-pager__list {
  gap: 1rem;
}
.c-pager-list-item {
  width: 3.8rem;
  height: 3.8rem;
}
.c-pager-list-item--active {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.c-pager-list-item__link {
  background-color: #F7F7F7;
}
.c-pager__prev, 
.c-pager__next {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4LjkwNyIgaGVpZ2h0PSIxNC45ODUiIHZpZXdCb3g9IjAgMCA4LjkwNyAxNC45ODUiPiA8cGF0aCBpZD0iXyIgZGF0YS1uYW1lPSImbHQ7IiBkPSJNNTkxLjkwNywyMjgyLjM3bC02Ljc4Niw2Ljc4Niw2Ljc4Niw2Ljc4NiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTU4My43MDcgLTIyODEuNjYzKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZWE1ODEyIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=");
  background-repeat: no-repeat;
  background-size: 0.6rem 1.3rem;
  background-position: center;
}
.c-pager__next {
  transform: rotate(180deg);
}
.c-pager__prev img, 
.c-pager__next img {
  visibility: hidden;
}
*/