@charset "UTF-8";
/* //////////////////////////////////////////////////

Title : layout/featureDetailBase.scss
For   : feature/detail/

Created       : 2024-04-18
Last Modified : 2024-05-10

==========================================

Content
  01. variables
  02. init

////////////////////////////////////////////////// */
/* ========== variables */
.page-featureDetail {
  --font-en: "Inter", sans-serif;
  --font-en-sub: "Lato", sans-serif;
  --font-ja: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", MS PGothic, sans-serif;
  --color-attention: #BA0200;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .page-featureDetail {
    --rate: 100vw / 375;
    --base-font-size: calc(14 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .page-featureDetail {
    --rate: 1px;
    --base-font-size: calc(16 * var(--rate));
  }
}
/* ========== init */
h5,
h6 {
  margin: 0;
  padding: 0;
}

.page-featureDetail img,
.page-featureDetail picture,
.page-featureDetail svg,
.page-featureDetail video {
  display: block;
  width: 100%;
  height: auto;
}
.page-featureDetail h1,
.page-featureDetail h2,
.page-featureDetail h3,
.page-featureDetail h4,
.page-featureDetail h5,
.page-featureDetail h6 {
  font-size: var(--font-size, initial);
  line-height: var(--line-height, initial);
}
.page-featureDetail * {
  font-family: var(--font-family, var(--font-ja));
  font-weight: var(--font-weight, 300);
  letter-spacing: var(--letter-spacing, 0.05em);
}
.page-featureDetail button:hover,
.page-featureDetail select:hover {
  cursor: pointer;
}

/* //////////////////////////////////////////////////

Title : layout/container.scss
For   : feature/detail/

Created       : 2024-04-18
Last Modified : 2024-04-18

==========================================

Content
    01. layout

////////////////////////////////////////////////// */
/* ========== layout */
.page-featureDetail {
  max-width: calc(1100 * var(--rate));
  width: 100%;
  margin-inline: auto;
}
.page-featureDetail__section {
  padding-inline: var(--shell-gap, calc(50 * var(--rate)));
}
.page-featureDetail__section--fill {
  --shell-gap: 0;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .page-featureDetail {
    padding-inline: calc(15 * var(--rate));
  }
  .page-featureDetail__section {
    --shell-gap: 0;
  }
  .page-featureDetail__section + .page-featureDetail__section {
    -webkit-margin-before: calc(60 * var(--rate));
            margin-block-start: calc(60 * var(--rate));
  }
  .page-featureDetail__section--hero + * {
    -webkit-margin-before: calc(30 * var(--rate));
            margin-block-start: calc(30 * var(--rate));
  }
  .page-featureDetail__section > * + * {
    -webkit-margin-before: calc(40 * var(--rate));
            margin-block-start: calc(40 * var(--rate));
  }
  .page-featureDetail__shell > * + * {
    -webkit-margin-before: calc(40 * var(--rate));
            margin-block-start: calc(40 * var(--rate));
  }
  .page-featureDetail__heading {
    -webkit-padding-after: calc(20 * var(--rate) - 0.5em);
            padding-block-end: calc(20 * var(--rate) - 0.5em);
  }
  .page-featureDetail__heading > * + * {
    -webkit-margin-before: calc(20 * var(--rate) - 0.5em);
            margin-block-start: calc(20 * var(--rate) - 0.5em);
  }
  .page-featureDetail__article-title--primary + * {
    -webkit-margin-before: var(--title-spacer, calc(30 * var(--rate)));
            margin-block-start: var(--title-spacer, calc(30 * var(--rate)));
  }
  .page-featureDetail__article-title--secondary + * {
    -webkit-margin-before: var(--title-spacer, calc(30 * var(--rate)));
            margin-block-start: var(--title-spacer, calc(30 * var(--rate)));
  }
  .page-featureDetail__article-title--tertiary + * {
    -webkit-margin-before: var(--title-spacer, calc(25 * var(--rate)));
            margin-block-start: var(--title-spacer, calc(25 * var(--rate)));
  }
  .page-featureDetail__article-title--quaternary + * {
    -webkit-margin-before: var(--title-spacer, calc(30 * var(--rate)));
            margin-block-start: var(--title-spacer, calc(30 * var(--rate)));
  }
  .page-featureDetail__article-title--quinary + * {
    -webkit-margin-before: var(--title-spacer, calc(20 * var(--rate)));
            margin-block-start: var(--title-spacer, calc(20 * var(--rate)));
  }
  .page-featureDetail__article-title--senary + * {
    -webkit-margin-before: var(--title-spacer, calc(20 * var(--rate)));
            margin-block-start: var(--title-spacer, calc(20 * var(--rate)));
  }
  .page-featureDetail__article-title--products + * {
    -webkit-margin-before: var(--title-spacer, calc(20 * var(--rate)));
            margin-block-start: var(--title-spacer, calc(20 * var(--rate)));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .page-featureDetail__section + .page-featureDetail__section {
    -webkit-margin-before: calc(80 * var(--rate));
            margin-block-start: calc(80 * var(--rate));
  }
  .page-featureDetail__section--hero + * {
    -webkit-margin-before: calc(40 * var(--rate));
            margin-block-start: calc(40 * var(--rate));
  }
  .page-featureDetail__section > * + * {
    -webkit-margin-before: calc(40 * var(--rate));
            margin-block-start: calc(40 * var(--rate));
  }
  .page-featureDetail__shell > * + * {
    -webkit-margin-before: calc(40 * var(--rate));
            margin-block-start: calc(40 * var(--rate));
  }
  .page-featureDetail__heading {
    -webkit-padding-after: calc(20 * var(--rate) - 0.5em);
            padding-block-end: calc(20 * var(--rate) - 0.5em);
  }
  .page-featureDetail__heading > * + * {
    -webkit-margin-before: calc(20 * var(--rate) - 0.5em);
            margin-block-start: calc(20 * var(--rate) - 0.5em);
  }
  .page-featureDetail__article-title--primary + * {
    -webkit-margin-before: var(--title-spacer, calc(40 * var(--rate)));
            margin-block-start: var(--title-spacer, calc(40 * var(--rate)));
  }
  .page-featureDetail__article-title--secondary + * {
    -webkit-margin-before: var(--title-spacer, calc(40 * var(--rate)));
            margin-block-start: var(--title-spacer, calc(40 * var(--rate)));
  }
  .page-featureDetail__article-title--tertiary + * {
    -webkit-margin-before: var(--title-spacer, calc(30 * var(--rate)));
            margin-block-start: var(--title-spacer, calc(30 * var(--rate)));
  }
  .page-featureDetail__article-title--quaternary + * {
    -webkit-margin-before: var(--title-spacer, calc(40 * var(--rate)));
            margin-block-start: var(--title-spacer, calc(40 * var(--rate)));
  }
  .page-featureDetail__article-title--quinary + * {
    -webkit-margin-before: var(--title-spacer, calc(30 * var(--rate)));
            margin-block-start: var(--title-spacer, calc(30 * var(--rate)));
  }
  .page-featureDetail__article-title--senary + * {
    -webkit-margin-before: var(--title-spacer, calc(25 * var(--rate)));
            margin-block-start: var(--title-spacer, calc(25 * var(--rate)));
  }
  .page-featureDetail__article-title--products + * {
    -webkit-margin-before: var(--title-spacer, calc(40 * var(--rate)));
            margin-block-start: var(--title-spacer, calc(40 * var(--rate)));
  }
}
/* //////////////////////////////////////////////////

Title : object/component/button.scss
For   : feature/detail/

Created       : 2024-04-25
Last Modified : 2024-04-25

==========================================

Content
  01. button

////////////////////////////////////////////////// */
/* ========== button */
.page-featureDetail__button {
  --font-weight: 600;
  display: grid;
  place-content: center;
  place-items: center;
  width: 100%;
  max-width: var(--button-width, 100%);
  border-radius: calc(5 * var(--rate));
}
.page-featureDetail__button--fill {
  background-color: var(--color-attention);
  color: #fff !important;
}
.page-featureDetail__button--border {
  border: calc(1 * var(--rate)) solid #BDBDBD;
  background-color: #fff;
  color: #797979 !important;
}
/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .page-featureDetail__button {
    padding-block: var(--button-spacer, calc(16 * var(--rate)));
    font-size: var(--button-font-size, calc(16 * var(--rate)));
    line-height: 1;
  }
  .page-featureDetail__button--icon {
    grid-template-columns: var(--button-icon-size, calc(15 * var(--rate))) auto;
    -moz-column-gap: calc(8 * var(--rate));
         column-gap: calc(8 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .page-featureDetail__button {
    height: var(--button-height, calc(40 * var(--rate)));
    font-size: var(--button-font-size, calc(14 * var(--rate)));
  }
  .page-featureDetail__button--icon {
    grid-template-columns: calc(18 * var(--rate)) auto;
    -moz-column-gap: calc(8 * var(--rate));
         column-gap: calc(8 * var(--rate));
  }
}
/* //////////////////////////////////////////////////

Title : object/component/typography.scss
For   : feature/detail/

Created       : 2024-04-18
Last Modified : 2024-05-10

==========================================

Content
  01. typography

////////////////////////////////////////////////// */
/* ========== typography */
.page-featureDetail__heading {
  border-bottom: 1px solid #707070;
}
.page-featureDetail__heading > * {
  display: block;
}
.page-featureDetail__article-category {
  --letter-spacing: .1em;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background-color: #F2F3EF;
  border-radius: calc(4 * var(--rate));
  padding-inline: calc(10 * var(--rate));
  padding-block: calc(5 * var(--rate));
  font-size: calc(14 * var(--rate));
  line-height: 1;
}
.page-featureDetail__article-title {
  --font-weight: 600;
}
.page-featureDetail__article-title--primary {
  --letter-spacing: .1em;
}
.page-featureDetail__article-title--secondary {
  border-top: calc(4 * var(--rate)) solid #F0F0F0;
  border-bottom: calc(4 * var(--rate)) solid #F0F0F0;
}
.page-featureDetail__article-title--tertiary {
  background-color: #F1F1F2;
}
.page-featureDetail__article-title--quaternary {
  border-bottom: 1px solid #707070;
}
.page-featureDetail__article-title--quinary {
  border-left: calc(5 * var(--rate)) solid #000;
}
.page-featureDetail__article-title--products {
  border-bottom: calc(1 * var(--rate)) solid #BDBDBD;
}
.page-featureDetail__article-lead {
  font-size: var(--base-font-size);
}
.page-featureDetail__article-text {
  font-size: var(--text-font-size, var(--base-font-size));
}
.page-featureDetail__article-text--strong {
  --font-weight: 600;
  background-color: #f8ffb7;
}
.page-featureDetail__article-notes {
  -webkit-margin-before: 1em;
          margin-block-start: 1em;
  font-size: calc(11 * var(--rate));
  line-height: 1.5;
}
.page-featureDetail__article-notes--base {
  color: #000;
}
.page-featureDetail__article-notes--light {
  color: #707070;
}
.page-featureDetail__article-notes--attention {
  color: var(--color-attention);
}
.page-featureDetail__article-link {
  display: inline-block;
}
.page-featureDetail__article-link span {
  color: #58B8E2;
  text-decoration: underline;
}
.page-featureDetail__article-link--externalLink {
  position: relative;
  -webkit-padding-end: calc(var(--gap-externalLink) + var(--bg-size-externalLink));
          padding-inline-end: calc(var(--gap-externalLink) + var(--bg-size-externalLink));
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216.414%22%20height%3D%2216.414%22%20viewBox%3D%220%200%2016.414%2016.414%22%3E%20%3Cg%20id%3D%22Icon_feather-external-link%22%20data-name%3D%22Icon%20feather-external-link%22%20transform%3D%22translate(-3.5%20-3.086)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_22329%22%20data-name%3D%22%E3%83%91%E3%82%B9%2022329%22%20d%3D%22M16.167%2C14.444v4.667a1.556%2C1.556%2C0%2C0%2C1-1.556%2C1.556H6.056A1.556%2C1.556%2C0%2C0%2C1%2C4.5%2C19.111V10.556A1.556%2C1.556%2C0%2C0%2C1%2C6.056%2C9h4.667%22%20transform%3D%22translate(0%20-2.167)%22%20fill%3D%22none%22%20stroke%3D%22%2358b8e2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_22330%22%20data-name%3D%22%E3%83%91%E3%82%B9%2022330%22%20d%3D%22M22.5%2C4.5h4.667V9.167%22%20transform%3D%22translate(-8.667)%22%20fill%3D%22none%22%20stroke%3D%22%2358b8e2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_22331%22%20data-name%3D%22%E3%83%91%E3%82%B9%2022331%22%20d%3D%22M15%2C13.056%2C23.556%2C4.5%22%20transform%3D%22translate(-5.056)%22%20fill%3D%22none%22%20stroke%3D%22%2358b8e2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: var(--bg-size-externalLink);
}
.page-featureDetail__products-name {
  --text-line-row: 3;
  --line-height: calc(var(--price-name-line-height) / var(--price-name-font-size));
  --font-size: calc(var(--price-name-font-size) * var(--rate));
  display: -webkit-box;
  -webkit-box-orient: vertical;
  height: calc(var(--price-name-line-height) * var(--text-line-row) * var(--rate));
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: var(--text-line-row);
  font-size: calc(var(--price-name-font-size) * var(--rate));
}
.page-featureDetail__products-price {
  --font-family: var(--font-en);
  --font-weight: 500;
  --letter-spacing: 0;
  line-height: 1;
}
.page-featureDetail__products-price--selling {
  color: var(--color-selling-price, inherit);
}
.page-featureDetail__products-price--original {
  text-decoration: line-through;
}
.page-featureDetail__products-price--label {
  display: inline-block;
  border: calc(1 * var(--rate)) solid var(--color-attention);
  color: var(--color-attention);
  line-height: 1;
}
.page-featureDetail__products-price--sale {
  --color-selling-price: var(--color-attention);
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .page-featureDetail__heading {
    -webkit-padding-after: calc(20 * var(--rate));
            padding-block-end: calc(20 * var(--rate));
  }
  .page-featureDetail__heading + * {
    -webkit-margin-before: calc(30 * var(--rate));
            margin-block-start: calc(30 * var(--rate));
  }
  .page-featureDetail__article-title--primary {
    --font-size: calc(20 * var(--rate));
    --line-height: (30 / 20);
  }
  .page-featureDetail__article-title--secondary {
    --font-size: calc(16 * var(--rate));
    --line-height: (24 / 16);
    padding-block: calc(15 * var(--rate));
  }
  .page-featureDetail__article-title--tertiary {
    --font-size: calc(16 * var(--rate));
    --line-height: (24 / 16);
    padding-block: calc(15 * var(--rate));
    padding-inline: calc(15 * var(--rate));
  }
  .page-featureDetail__article-title--quaternary {
    --font-size: calc(16 * var(--rate));
    --line-height: (24 / 16);
    -webkit-padding-after: calc(10 * var(--rate));
            padding-block-end: calc(10 * var(--rate));
  }
  .page-featureDetail__article-title--quinary {
    --font-size: calc(16 * var(--rate));
    --line-height: (30 / 16);
    padding-block: calc(1 * var(--rate));
    -webkit-padding-start: calc(15 * var(--rate));
            padding-inline-start: calc(15 * var(--rate));
  }
  .page-featureDetail__article-title--senary {
    --font-size: calc(15 * var(--rate));
    --line-height: (22.5 / 15);
  }
  .page-featureDetail__article-title--products {
    --font-size: calc(16 * var(--rate));
    --line-height: (24 / 16);
    -webkit-padding-after: calc(20 * var(--rate));
            padding-block-end: calc(20 * var(--rate));
  }
  .page-featureDetail__article-lead {
    line-height: 2;
  }
  .page-featureDetail__article-text {
    line-height: var(--text-line-height, 2);
  }
  .page-featureDetail__article-link {
    font-size: calc(14 * var(--rate));
    line-height: 2.2857142857;
  }
  .page-featureDetail__article-link--externalLink {
    --gap-externalLink: calc(5 * var(--rate));
    --bg-size-externalLink: calc(12 * var(--rate));
  }
  .page-featureDetail__products-name {
    --price-name-font-size: var(--font-size-price-name, 13);
    --price-name-line-height: var(--line-height-price-name, 19.5);
  }
  .page-featureDetail__products-price--selling {
    font-size: var(--price-selling-value-font-size, calc(16 * var(--rate)));
  }
  .page-featureDetail__products-price--original {
    -webkit-margin-before: calc(8 * var(--rate));
            margin-block-start: calc(8 * var(--rate));
    font-size: var(--price-original-value-font-size, calc(14 * var(--rate)));
  }
  .page-featureDetail__products-price--label {
    -webkit-margin-start: calc(13 * var(--rate));
            margin-inline-start: calc(13 * var(--rate));
    padding-block: 0.2em;
    padding-inline: 0.4em;
    font-size: var(--price-label-value-font-size, calc(10 * var(--rate)));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .page-featureDetail__heading {
    -webkit-padding-after: calc(20 * var(--rate));
            padding-block-end: calc(20 * var(--rate));
  }
  .page-featureDetail__heading + * {
    -webkit-margin-before: calc(40 * var(--rate));
            margin-block-start: calc(40 * var(--rate));
  }
  .page-featureDetail__article-title--primary {
    --font-size: calc(25 * var(--rate));
    --line-height: (38 / 25);
  }
  .page-featureDetail__article-title--secondary {
    --font-size: calc(22 * var(--rate));
    --line-height: (36 / 22);
    --letter-spacing: .1em;
    padding-block: calc(20 * var(--rate));
  }
  .page-featureDetail__article-title--tertiary {
    --font-size: calc(20 * var(--rate));
    --line-height: (30 / 20);
    padding-block: calc(16 * var(--rate));
    padding-inline: calc(25 * var(--rate));
  }
  .page-featureDetail__article-title--quaternary {
    --font-size: calc(22 * var(--rate));
    --line-height: (33 / 22);
    -webkit-padding-after: calc(15 * var(--rate));
            padding-block-end: calc(15 * var(--rate));
  }
  .page-featureDetail__article-title--quinary {
    --font-size: calc(20 * var(--rate));
    --line-height: (30 / 20);
    padding-block: calc(7 * var(--rate));
    -webkit-padding-start: calc(15 * var(--rate));
            padding-inline-start: calc(15 * var(--rate));
  }
  .page-featureDetail__article-title--senary {
    --font-size: calc(18 * var(--rate));
    --line-height: (27 / 18);
  }
  .page-featureDetail__article-title--products {
    --font-size: calc(22 * var(--rate));
    --line-height: (33 / 22);
    -webkit-padding-after: calc(15 * var(--rate));
            padding-block-end: calc(15 * var(--rate));
  }
  .page-featureDetail__article-lead {
    line-height: 2.5;
  }
  .page-featureDetail__article-text {
    line-height: var(--text-line-height, 2.5);
  }
  .page-featureDetail__article-text--sml {
    --text-font-size: calc(15 * var(--rate));
    --text-line-height: calc(37.5 / 15);
  }
  .page-featureDetail__article-link {
    font-size: calc(16 * var(--rate));
    line-height: 2;
  }
  .page-featureDetail__article-link--externalLink {
    --gap-externalLink: calc(8 * var(--rate));
    --bg-size-externalLink: calc(14 * var(--rate));
  }
  .page-featureDetail__products-name {
    --price-name-font-size: var(--font-size-price-name, 14);
    --price-name-line-height: var(--line-height-price-name, 24);
    --letter-spacing: .02em;
  }
  .page-featureDetail__products-price--selling {
    font-size: var(--price-selling-value-font-size, calc(18 * var(--rate)));
  }
  .page-featureDetail__products-price--original {
    -webkit-margin-before: calc(8 * var(--rate));
            margin-block-start: calc(8 * var(--rate));
    font-size: var(--price-original-value-font-size, calc(15 * var(--rate)));
  }
  .page-featureDetail__products-price--label {
    -webkit-margin-start: calc(13 * var(--rate));
            margin-inline-start: calc(13 * var(--rate));
    padding-block: calc(2 * var(--rate));
    padding-inline: calc(5 * var(--rate));
    font-size: var(--price-label-value-font-size, calc(11 * var(--rate)));
  }
}
/* //////////////////////////////////////////////////

Title : object/component/textContainer.scss
For   : feature/detail/

Created       : 2024-04-18
Last Modified : 2024-04-18

==========================================

Content
  01. typography

////////////////////////////////////////////////// */
/* ========== text container */
.page-featureDetail__article-textBody {
  border: calc(5 * var(--rate)) solid #F0F0F0;
  border-radius: calc(10 * var(--rate));
}
.page-featureDetail__article-textBody--fill {
  background-color: #F0F0F0;
}
.page-featureDetail__article-textBody--label {
  --padding-block: 0;
  --padding-inline: 0;
}
.page-featureDetail__article-textBody--label dt {
  background-color: #F0F0F0;
  font-weight: 600;
}
.page-featureDetail__article-table {
  display: grid;
  grid-template-columns: var(--title-width) 1fr;
  border: calc(3 * var(--rate)) solid #F0F0F0;
  letter-spacing: 0.03em;
}
.page-featureDetail__article-table dt {
  background-color: #F0F0F0;
}
.page-featureDetail__article-table dt:nth-child(n+2) {
  border-top: 1px solid #fff;
}
.page-featureDetail__article-table dd:nth-child(n+2) {
  border-top: 1px solid #F0F0F0;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .page-featureDetail__article-textBody {
    padding-block: var(--padding-block, calc(25 * var(--rate)));
    padding-inline: var(--padding-inline, calc(10 * var(--rate)));
  }
  .page-featureDetail__article-textBody--label dt {
    padding-block: calc(8 * var(--rate));
    padding-inline: calc(10 * var(--rate));
    font-size: calc(15 * var(--rate));
  }
  .page-featureDetail__article-textBody--label dd {
    --text-font-size: calc(13 * var(--rate));
    --text-line-height: calc(19.5 / 13);
    padding-block: calc(15 * var(--rate));
    padding-inline: calc(10 * var(--rate));
  }
  .page-featureDetail__article-table {
    --title-width: calc(105 * var(--rate));
  }
  .page-featureDetail__article-table > * {
    padding-block: calc(15 * var(--rate));
  }
  .page-featureDetail__article-table dt {
    padding-inline: calc(7 * var(--rate));
    font-size: calc(16 * var(--rate));
    line-height: 1.5;
  }
  .page-featureDetail__article-table dd {
    padding-inline: calc(10 * var(--rate));
    --text-font-size: calc(14 * var(--rate));
    --text-line-height: calc(24.5 / 14);
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .page-featureDetail__article-textBody {
    --text-line-height: calc(32 / 16);
    padding-block: var(--padding-block, calc(25 * var(--rate)));
    padding-inline: var(--padding-inline, calc(25 * var(--rate)));
  }
  .page-featureDetail__article-textBody--label dt {
    padding-block: calc(20 * var(--rate));
    padding-inline: calc(25 * var(--rate));
    font-size: calc(18 * var(--rate));
  }
  .page-featureDetail__article-textBody--label dd {
    padding-block: calc(20 * var(--rate));
    padding-inline: calc(25 * var(--rate));
  }
  .page-featureDetail__article-table {
    --title-width: calc(180 * var(--rate));
    --text-line-height: calc(32 / 16);
  }
  .page-featureDetail__article-table > * {
    padding-block: calc(30 * var(--rate));
    padding-inline: calc(30 * var(--rate));
  }
  .page-featureDetail__article-table dt {
    font-size: calc(16 * var(--rate));
    line-height: 1.5;
  }
  .page-featureDetail__article-table dd {
    font-size: calc(14 * var(--rate));
    line-height: 1.75;
  }
}
/* //////////////////////////////////////////////////

Title : object/component/list.scss
For   : feature/detail/

Created       : 2024-04-18
Last Modified : 2024-04-18

==========================================

Content
  01. list

////////////////////////////////////////////////// */
/* ========== list */
.page-featureDetail__list {
  font-size: calc(var(--list-font-size) * var(--rate));
  line-height: calc(var(--list-line-height) / var(--list-font-size));
}
.page-featureDetail__list li {
  position: relative;
}

ul.page-featureDetail__list li {
  --size-disc: calc(8 * var(--rate));
}
ul.page-featureDetail__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--list-line-height) / 2 * var(--rate));
  width: var(--size-disc);
  height: var(--size-disc);
  border-radius: 100vh;
  background-color: #000;
  transform: translateY(-50%);
}

ol.page-featureDetail__list {
  counter-reset: listnum;
  list-style: none;
}
ol.page-featureDetail__list li::before {
  font-weight: 400;
  content: counter(listnum) ".";
  position: absolute;
  left: 0;
  counter-increment: listnum;
  font-family: var(--font-en-sub);
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .page-featureDetail__list {
    --list-font-size: 14;
    --list-line-height: 21;
  }
  .page-featureDetail__list li + li {
    -webkit-margin-before: calc(12 * var(--rate));
            margin-block-start: calc(12 * var(--rate));
  }
  ul.page-featureDetail__list li {
    -webkit-padding-start: calc(var(--size-disc) + 10 * var(--rate));
            padding-inline-start: calc(var(--size-disc) + 10 * var(--rate));
  }
  ol.page-featureDetail__list li {
    -webkit-padding-start: 1.25em;
            padding-inline-start: 1.25em;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .page-featureDetail__list {
    --list-font-size: 16;
    --list-line-height: 32;
  }
  .page-featureDetail__list li + li {
    -webkit-margin-before: calc(6 * var(--rate));
            margin-block-start: calc(6 * var(--rate));
  }
  ul.page-featureDetail__list li {
    -webkit-padding-start: calc(var(--size-disc) + 10 * var(--rate));
            padding-inline-start: calc(var(--size-disc) + 10 * var(--rate));
  }
  ol.page-featureDetail__list li {
    -webkit-padding-start: 1.5em;
            padding-inline-start: 1.5em;
  }
}
/* //////////////////////////////////////////////////

Title : project/hero.scss
For   : feature/detail/

Created       : 2024-04-27
Last Modified : 2024-04-27

==========================================

Content
  01. index

////////////////////////////////////////////////// */
/* ========== feature list */
/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .page-featureDetail__hero > * + * {
    -webkit-margin-before: calc(30 * var(--rate));
            margin-block-start: calc(30 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .page-featureDetail__hero > * + * {
    -webkit-margin-before: calc(40 * var(--rate));
            margin-block-start: calc(40 * var(--rate));
  }
}
/* //////////////////////////////////////////////////

Title : project/banner.scss
For   : feature/detail/

Created       : 2024-04-18
Last Modified : 2024-04-18

==========================================

Content
  01. banner

////////////////////////////////////////////////// */
/* ========== banner */
.page-featureDetail__banner {
  width: 100%;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .page-featureDetail__banner {
    -webkit-margin-before: calc(30 * var(--rate));
            margin-block-start: calc(30 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .page-featureDetail__banner {
    -webkit-margin-before: calc(50 * var(--rate));
            margin-block-start: calc(50 * var(--rate));
  }
}
/* //////////////////////////////////////////////////

Title : project/contentsIndex.scss
For   : feature/detail/

Created       : 2024-04-18
Last Modified : 2024-05-01

==========================================

Content
  01. index

////////////////////////////////////////////////// */
/* ========== index */
.page-featureDetail__index {
  margin-inline: auto;
}
.page-featureDetail__index--rowList {
  border: calc(5 * var(--rate)) solid #F0F0F0;
  border-radius: calc(10 * var(--rate));
}
.page-featureDetail__index-title {
  --font-family: var(--font-en);
  --font-weight: 700;
  --line-height: 1;
  text-align: center;
}
.page-featureDetail__index-title + * {
  -webkit-margin-before: calc(20 * var(--rate));
          margin-block-start: calc(20 * var(--rate));
}
.page-featureDetail__index-list--row li {
  position: relative;
  font-size: calc(var(--index-font-size) * var(--rate));
  line-height: calc(var(--index-line-height) / var(--index-font-size));
}
.page-featureDetail__index-list--row li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--index-line-height) / 2 * var(--rate));
  width: var(--size-disc);
  height: var(--size-disc);
  border-radius: 100vh;
  transform: translateY(-50%);
}
.page-featureDetail__index-list--row > li {
  --font-weight: 600;
}
.page-featureDetail__index-list--row > li::before {
  background-color: #000;
}
.page-featureDetail__index-list--column {
  display: flex;
  flex-wrap: wrap;
}
.page-featureDetail__index-list--column li {
  position: relative;
  border-radius: calc(5 * var(--rate));
  background-color: #F0F0F0;
  line-height: 1;
}
.page-featureDetail__index-list--column li::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--size-arrow);
  height: var(--size-arrow);
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  margin: auto;
  transform: rotate(45deg);
}
.page-featureDetail__index-innerList > li {
  --font-weight: 300;
}
.page-featureDetail__index-innerList > li::before {
  border: 1px solid #BDBDBD;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .page-featureDetail__index--rowList {
    padding-block: calc(25 * var(--rate));
    padding-inline: calc(10 * var(--rate));
  }
  .page-featureDetail__index-title {
    --font-size: calc(18 * var(--rate));
  }
  .page-featureDetail__index-list--row {
    --size-disc: calc(8 * var(--rate));
  }
  .page-featureDetail__index-list--row li {
    -webkit-padding-start: calc(10 * var(--rate) + var(--size-disc));
            padding-inline-start: calc(10 * var(--rate) + var(--size-disc));
  }
  .page-featureDetail__index-list--row > li {
    --index-font-size: 15;
    --index-line-height: 30;
  }
  .page-featureDetail__index-list--row > li + li {
    -webkit-margin-before: calc(5 * var(--rate));
            margin-block-start: calc(5 * var(--rate));
  }
  .page-featureDetail__index-list--column {
    gap: calc(5 * var(--rate));
  }
  .page-featureDetail__index-list--column li {
    padding-block: calc(12 * var(--rate));
    padding-inline: calc(30 * var(--rate));
    font-size: calc(15 * var(--rate));
  }
  .page-featureDetail__index-list--column li::after {
    --size-arrow: calc(6 * var(--rate));
    right: calc(8 * var(--rate));
  }
  .page-featureDetail__index-innerList {
    padding-block: calc(10 * var(--rate));
  }
  .page-featureDetail__index-innerList > li {
    --index-font-size: 14;
    --index-line-height: 21;
    -webkit-margin-start: calc(6 * var(--rate));
            margin-inline-start: calc(6 * var(--rate));
  }
  .page-featureDetail__index-innerList > li + li {
    -webkit-margin-before: calc(12 * var(--rate));
            margin-block-start: calc(12 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .page-featureDetail__index {
    max-width: calc(100% - 100 * var(--rate) * 2);
  }
  .page-featureDetail__index--rowList {
    padding-block: calc(35 * var(--rate));
    padding-inline: calc(35 * var(--rate));
  }
  .page-featureDetail__index-title {
    --font-size: calc(28 * var(--rate));
  }
  .page-featureDetail__index-list--row {
    --size-disc: calc(10 * var(--rate));
  }
  .page-featureDetail__index-list--row > li {
    --index-font-size: 16;
    --index-line-height: 30;
    -webkit-padding-start: calc(15 * var(--rate) + var(--size-disc));
            padding-inline-start: calc(15 * var(--rate) + var(--size-disc));
  }
  .page-featureDetail__index-list--row > li + li {
    -webkit-margin-before: calc(20 * var(--rate));
            margin-block-start: calc(20 * var(--rate));
  }
  .page-featureDetail__index-list--column {
    justify-content: center;
    gap: calc(10 * var(--rate));
  }
  .page-featureDetail__index-list--column li {
    padding-block: calc(12 * var(--rate));
    padding-inline: calc(38 * var(--rate));
    font-size: var(--base-font-size);
  }
  .page-featureDetail__index-list--column li::after {
    --size-arrow: calc(8 * var(--rate));
    right: calc(10 * var(--rate));
  }
  .page-featureDetail__index-innerList {
    -webkit-margin-before: calc(15 * var(--rate));
            margin-block-start: calc(15 * var(--rate));
  }
  .page-featureDetail__index-innerList > li {
    --index-font-size: 14;
    --index-line-height: 21;
    -webkit-padding-start: calc(10 * var(--rate) + var(--size-disc));
            padding-inline-start: calc(10 * var(--rate) + var(--size-disc));
  }
  .page-featureDetail__index-innerList > li + li {
    -webkit-margin-before: calc(15 * var(--rate));
            margin-block-start: calc(15 * var(--rate));
  }
}
/* //////////////////////////////////////////////////

Title : project/featureList.scss
For   : feature/detail/

Created       : 2024-04-18
Last Modified : 2024-04-18

==========================================

Content
  01. index

////////////////////////////////////////////////// */
/* ========== feature list */
.page-featureDetail__article-featureList {
  display: grid;
}
.page-featureDetail__article-featureList--column-single {
  grid-template-columns: 100%;
}
.page-featureDetail__article-featureList--column-double {
  grid-template-columns: repeat(2, 1fr);
}
.page-featureDetail__article-featureList--column-triple {
  grid-template-columns: repeat(3, 1fr);
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .page-featureDetail__article-feature > * + * {
    -webkit-margin-before: calc(40 * var(--rate));
            margin-block-start: calc(40 * var(--rate));
  }
  .page-featureDetail__article-featureList {
    --text-font-size: calc(12 * var(--rate));
    --text-line-height: calc(21 / 12);
    display: grid;
  }
  .page-featureDetail__article-featureList--column-double {
    gap: calc(15 * var(--rate));
  }
  .page-featureDetail__article-featureList--column-triple {
    gap: calc(15 * var(--rate));
  }
  .page-featureDetail__article-featureCell > * + * {
    -webkit-margin-before: calc(15 * var(--rate));
            margin-block-start: calc(15 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .page-featureDetail__article-feature > * + * {
    -webkit-margin-before: calc(75 * var(--rate));
            margin-block-start: calc(75 * var(--rate));
  }
  .page-featureDetail__article-featureList {
    --text-font-size: calc(15 * var(--rate));
    --text-line-height: calc(25.5 / 15);
    display: grid;
  }
  .page-featureDetail__article-featureList--column-double {
    gap: calc(50 * var(--rate));
  }
  .page-featureDetail__article-featureList--column-triple {
    gap: calc(25 * var(--rate));
  }
  .page-featureDetail__article-featureCell > * + * {
    -webkit-margin-before: calc(20 * var(--rate));
            margin-block-start: calc(20 * var(--rate));
  }
}
/* //////////////////////////////////////////////////

Title : project/pickupList.scss
For   : feature/detail/

Created       : 2024-04-25
Last Modified : 2024-04-25

==========================================

Content
  01. index

////////////////////////////////////////////////// */
/* ========== pickup list */
.page-featureDetail__article-pickupCell {
  display: grid;
}
.page-featureDetail__article-pickupCell--shadow {
  border-radius: calc(10 * var(--rate));
  box-shadow: 0px 0px calc(6 * var(--rate)) 0px rgba(0, 0, 0, 0.16);
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .page-featureDetail__article-pickupList > * + * {
    -webkit-margin-before: calc(30 * var(--rate));
            margin-block-start: calc(30 * var(--rate));
  }
  .page-featureDetail__article-pickupCell {
    --title-spacer: calc(20 * var(--rate));
    --button-spacer: calc(16 * var(--rate));
    grid-template-columns: 100%;
    row-gap: calc(20 * var(--rate));
    padding-block: calc(30 * var(--rate));
    padding-inline: calc(15 * var(--rate));
  }
  .page-featureDetail__article-pickupCell .page-featureDetail__button:nth-of-type(1) {
    -webkit-margin-before: calc(20 * var(--rate));
            margin-block-start: calc(20 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .page-featureDetail__article-pickupList > * + * {
    -webkit-margin-before: calc(60 * var(--rate));
            margin-block-start: calc(60 * var(--rate));
  }
  .page-featureDetail__article-pickupCell {
    --title-spacer: calc(15 * var(--rate));
    --text-line-height: calc(32 / 16);
    grid-template-columns: var(--pickup-thumbnail-size, calc(480 * var(--rate))) 1fr;
    -moz-column-gap: var(--pickup-gap, calc(30 * var(--rate)));
         column-gap: var(--pickup-gap, calc(30 * var(--rate)));
    align-items: center;
  }
  .page-featureDetail__article-pickupCell--withButton {
    --text-font-size: calc(15 * var(--rate));
    --text-line-height: calc(30 / 15);
    --button-width: calc(180 * var(--rate));
  }
  .page-featureDetail__article-pickupCell--narrow {
    --pickup-thumbnail-size: calc(392 * var(--rate));
    --pickup-gap: calc(40 * var(--rate));
    padding-block: calc(20 * var(--rate));
    padding-inline: calc(20 * var(--rate));
  }
  .page-featureDetail__article-pickupCell--narrow .page-featureDetail__button:nth-of-type(1) {
    -webkit-margin-before: calc(20 * var(--rate));
            margin-block-start: calc(20 * var(--rate));
  }
  .page-featureDetail__article-pickupCell--wide {
    --pickup-thumbnail-size: calc(450 * var(--rate));
    padding-block: calc(25 * var(--rate));
    padding-inline: calc(30 * var(--rate));
  }
  .page-featureDetail__article-pickupCell--wide .page-featureDetail__button:nth-of-type(1) {
    -webkit-margin-before: calc(30 * var(--rate));
            margin-block-start: calc(30 * var(--rate));
  }
}
/* //////////////////////////////////////////////////

Title : project/products.scss
For   : feature/detail/

Created       : 2024-04-30
Last Modified : 2024-05-02

==========================================

Content
  01. index

////////////////////////////////////////////////// */
/* ========== feature list */
.page-featureDetail__products--single .page-featureDetail__products-list {
  grid-template-columns: 100%;
  width: 100%;
  margin-inline: auto;
  border-radius: calc(10 * var(--rate));
  box-shadow: 0px 0px calc(6 * var(--rate)) 0px rgba(0, 0, 0, 0.16);
}
.page-featureDetail__products-list {
  display: grid;
}
.page-featureDetail__products-thumb {
  aspect-ratio: 1/1;
}
.page-featureDetail__products-thumb img {
  width: auto;
  height: 100%;
  margin-inline: auto;
}
.page-featureDetail__products-buttons {
  display: grid;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .page-featureDetail__products {
    -webkit-padding-before: calc(40 * var(--rate));
            padding-block-start: calc(40 * var(--rate));
  }
  .page-featureDetail__products--single {
    --spacer-products-summary: calc(15 * var(--rate));
    --button-gap: calc(10 * var(--rate));
    --font-size-price-name: 14;
    --line-height-price-name: 21;
    --price-selling-value-font-size: calc(24 * var(--rate));
    --price-original-value-font-size: calc(20 * var(--rate));
    --price-label-value-font-size: calc(13 * var(--rate));
    --button-icon-size: calc(18 * var(--rate));
  }
  .page-featureDetail__products--single .page-featureDetail__products-list {
    padding-block: calc(30 * var(--rate));
    padding-inline: calc(15 * var(--rate));
  }
  .page-featureDetail__products--single .page-featureDetail__products-price {
    -webkit-margin-before: calc(15 * var(--rate));
            margin-block-start: calc(15 * var(--rate));
  }
  .page-featureDetail__products--single .page-featureDetail__products-buttons {
    -webkit-margin-before: calc(20 * var(--rate));
            margin-block-start: calc(20 * var(--rate));
  }
  .page-featureDetail__products--multi {
    --button-spacer: calc(12 * var(--rate));
    --button-font-size: calc(13 * var(--rate));
  }
  .page-featureDetail__products--multi .page-featureDetail__products-list {
    grid-template-columns: repeat(2, 1fr);
    -moz-column-gap: calc(15 * var(--rate));
         column-gap: calc(15 * var(--rate));
    row-gap: calc(30 * var(--rate));
  }
  .page-featureDetail__products--multi .page-featureDetail__products-price {
    -webkit-margin-before: calc(10 * var(--rate));
            margin-block-start: calc(10 * var(--rate));
  }
  .page-featureDetail__products--multi .page-featureDetail__products-buttons {
    -webkit-margin-before: calc(10 * var(--rate));
            margin-block-start: calc(10 * var(--rate));
  }
  .page-featureDetail__products-summary {
    -webkit-margin-before: var(--spacer-products-summary, calc(10 * var(--rate)));
            margin-block-start: var(--spacer-products-summary, calc(10 * var(--rate)));
  }
  .page-featureDetail__products-buttons {
    grid-template-columns: 100%;
    row-gap: var(--button-gap, calc(8 * var(--rate)));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .page-featureDetail__products {
    -webkit-padding-before: calc(70 * var(--rate));
            padding-block-start: calc(70 * var(--rate));
  }
  .page-featureDetail__products--single {
    --spacer-products-summary: 0;
    --font-size-price-name: 17;
    --line-height-price-name: 25.5;
    --price-selling-value-font-size: calc(24 * var(--rate));
    --price-original-value-font-size: calc(20 * var(--rate));
    --price-label-value-font-size: calc(13 * var(--rate));
    padding-inline: calc(50 * var(--rate));
  }
  .page-featureDetail__products--single .page-featureDetail__products-list {
    max-width: calc(800 * var(--rate));
    padding-block: calc(25 * var(--rate));
    padding-inline: calc(25 * var(--rate));
  }
  .page-featureDetail__products--single .page-featureDetail__products-details {
    display: grid;
    grid-template-columns: calc(335 * var(--rate)) 1fr;
    -moz-column-gap: calc(40 * var(--rate));
         column-gap: calc(40 * var(--rate));
    align-items: center;
  }
  .page-featureDetail__products--single .page-featureDetail__products-price {
    -webkit-margin-before: calc(25 * var(--rate));
            margin-block-start: calc(25 * var(--rate));
  }
  .page-featureDetail__products--single .page-featureDetail__products-buttons {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(15 * var(--rate));
    -webkit-margin-before: calc(20 * var(--rate));
            margin-block-start: calc(20 * var(--rate));
  }
  .page-featureDetail__products--multi .page-featureDetail__products-list {
    grid-template-columns: repeat(4, 1fr);
    -moz-column-gap: calc(20 * var(--rate));
         column-gap: calc(20 * var(--rate));
    row-gap: calc(40 * var(--rate));
  }
  .page-featureDetail__products--multi .page-featureDetail__products-price {
    -webkit-margin-before: calc(10 * var(--rate));
            margin-block-start: calc(10 * var(--rate));
  }
  .page-featureDetail__products--multi .page-featureDetail__products-buttons {
    grid-template-columns: 100%;
    row-gap: calc(10 * var(--rate));
    max-width: calc(180 * var(--rate));
    -webkit-margin-before: calc(15 * var(--rate));
            margin-block-start: calc(15 * var(--rate));
    margin-inline: auto;
  }
  .page-featureDetail__products-summary {
    -webkit-margin-before: var(--spacer-products-summary, calc(15 * var(--rate)));
            margin-block-start: var(--spacer-products-summary, calc(15 * var(--rate)));
  }
}
/* ========== comment */
/* --- for small viewport --- */
/* --- for large viewport --- */
/*# sourceMappingURL=featurePage-detail.css.map */