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

Title : style.scss
For   : Page/feature/brand/NIKE/240321_NIKE/

Created       : 2024-03-12
Last Modified : 2024-03-12

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

Content

////////////////////////////////////////////////// */
/* ========== varables */
:root {
  --container-fluid: 100%;
  --container-wide: 1200px;
  --color-black: #000;
  --color-slate-gray: #9B9EAA;
  --color-blush-beige: #E2C5BD;
  --color-steel-blue: #5C6E90;
  --color-dusty-rose: #D5C2BD;
  --color-stormy-blue: #4F5663;
  --color-ashen-beige: rgba(209,189,177,0.2);
  --color-slate-lilac: rgba(158,155,170,0.2);
  --font-en-base: pragmatica, sans-serif;
  --font-en-heading: "imperial-urw", sans-serif;
  --font-ja: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  :root {
    --rate: 100vw / 750;
    --spacer: var(--var-spacer, calc(140 * var(--rate)));
    --text-size-xlrg: calc(64 * var(--rate));
    --text-size-lrg: calc(40 * var(--rate));
    --text-size-base: calc(22 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  :root {
    --rate: 1px;
    --spacer: var(--var-spacer, calc(120 * var(--rate)));
    --text-size-xlrg: calc(32 * var(--rate));
    --text-size-lrg: calc(24 * var(--rate));
    --text-size-base: calc(14 * var(--rate));
  }
}
/* ========== define */
#em240321NIKE {
  box-sizing: border-box;
}
#em240321NIKE a,
#em240321NIKE img,
#em240321NIKE svg,
#em240321NIKE picture {
  display: var(--display, block);
}
#em240321NIKE img,
#em240321NIKE svg {
  width: 100%;
  height: auto;
}
#em240321NIKE * {
  box-sizing: border-box;
}

/* ========== layout / common */
#em240321NIKE {
  max-width: var(--container-wide);
  margin-inline: auto;
}
#em240321NIKE * {
  color: var(--color, var(--color-black));
  font-size: var(--font-size, var(--text-size-base));
  font-family: var(--font-family, var(--font-en-base));
}

.article__section + .article__section {
  -webkit-margin-before: var(--margin-block-start, var(--spacer));
          margin-block-start: var(--margin-block-start, var(--spacer));
}

.mainPanel--styling-01 {
  --section-theme-color: var(--color-slate-gray);
}
.mainPanel--styling-02 {
  --section-theme-color: var(--color-blush-beige);
}
.mainPanel--styling-03 {
  --section-theme-color: var(--color-steel-blue);
}
.mainPanel--styling-04 {
  --section-theme-color: var(--color-dusty-rose);
}
.mainPanel--styling-05 {
  --section-theme-color: var(--color-stormy-blue);
}
.mainPanel__shell, .mainPanel__column {
  position: relative;
  display: grid;
}
.mainPanel__shell {
  max-width: calc(var(--row-width) * var(--rate));
  margin-inline: auto;
}
.mainPanel__shell::before {
  position: absolute;
  background-color: var(--section-theme-color);
  opacity: var(--alpha);
  z-index: -1;
}
.mainPanel__column::before, .mainPanel__column::after {
  position: absolute;
  background-color: var(--section-theme-color);
  opacity: var(--alpha);
  z-index: -1;
}
.mainPanel__prices {
  --display: inline-block;
  font-weight: 300;
  letter-spacing: 0.05em;
}
.mainPanel__products {
  position: relative;
  text-align: center;
}
.mainPanel__productsList {
  position: relative;
  display: flex;
  justify-content: center;
  -moz-column-gap: var(--column-gap);
       column-gap: var(--column-gap);
  row-gap: var(--row-gap);
}
.mainPanel__productsList--withFrame > span {
  position: absolute;
  background-color: var(--section-theme-color);
  opacity: var(--alpha);
}
.mainPanel__productsList--withFrame > span:nth-child(1) {
  top: 0;
  left: 2px;
}
.mainPanel__productsList--withFrame > span:nth-child(2) {
  top: 0;
  right: 0;
}
.mainPanel__productsList--withFrame > span:nth-child(3) {
  bottom: 0;
  right: 2px;
}
.mainPanel__productsList--withFrame > span:nth-child(4) {
  bottom: 0;
  left: 0;
}
.mainPanel__productsList--withFrame > span:nth-child(odd) {
  width: 0;
  height: 2px;
}
.mainPanel__productsList--withFrame > span:nth-child(even) {
  width: 2px;
  height: 0;
}
.mainPanel__productsColumn {
  position: relative;
}
.mainPanel__productsColumn a {
  position: relative;
}
.mainPanel__productsBrandName {
  --color: var(--section-theme-color);
  --font-size: var(--text-size-xlrg);
  --font-family: var(--font-en-heading);
  position: absolute;
  display: inline-block;
  background-color: #fff;
  writing-mode: vertical-rl;
  line-height: 1;
  z-index: 1;
}
.mainPanel__productsBrandName:first-of-type {
  left: 0;
  transform: rotate(180deg) translateX(56%);
}
.mainPanel__productsBrandName:last-of-type {
  right: 0;
  transform: rotate(0) translateX(56%);
}
.mainPanel__productsName {
  --font-size: var(--text-size-lrg);
  --font-family: var(--font-en-heading);
  transform: translateY(-0.2em);
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .hidden-sml {
    display: none !important;
  }
  .mainPanel__prices {
    -webkit-margin-before: calc(30 * var(--rate));
            margin-block-start: calc(30 * var(--rate));
    line-height: 1.8181818182;
  }
  .mainPanel__prices > a {
    -webkit-margin-start: var(--price-gap-start, 0);
            margin-inline-start: var(--price-gap-start, 0);
    -webkit-margin-end: var(--price-gap-end, calc(12 * var(--rate)));
            margin-inline-end: var(--price-gap-end, calc(12 * var(--rate)));
  }
  .mainPanel__products {
    grid-template-columns: 100%;
    -webkit-margin-before: calc(100 * var(--rate));
            margin-block-start: calc(100 * var(--rate));
    padding-inline: calc(55 * var(--rate));
  }
  .mainPanel__productsList {
    -moz-column-gap: var(--column-gap, calc(40 * var(--rate)));
         column-gap: var(--column-gap, calc(40 * var(--rate)));
    flex-wrap: wrap;
  }
  .mainPanel__productsList--withFrame {
    --column-gap: calc(20 * var(--rate));
  }
  .mainPanel__productsList + .mainPanel__productsList {
    -webkit-margin-before: calc(65 * var(--rate));
            margin-block-start: calc(65 * var(--rate));
  }
  .mainPanel__productsBrandName {
    padding-inline: calc(6 * var(--rate));
    letter-spacing: 0.045em;
  }
  .mainPanel__productsBrandName:first-of-type {
    top: calc(40 * var(--rate));
  }
  .mainPanel__productsBrandName:last-of-type {
    bottom: calc(40 * var(--rate));
  }
  .mainPanel__productsColumn {
    width: calc(288 * var(--rate));
  }
  .mainPanel__productsName {
    -webkit-margin-before: calc(35 * var(--rate));
            margin-block-start: calc(35 * var(--rate));
    letter-spacing: 0.05em;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .hidden-lrg {
    display: none !important;
  }
  #footer_emmi {
    margin-top: 120px;
  }
  #em240321NIKE {
    padding-inline: calc(10 * var(--rate));
  }
  .mainPanel__prices {
    -webkit-margin-before: calc(25 * var(--rate));
            margin-block-start: calc(25 * var(--rate));
    line-height: 1.8571428571;
  }
  .mainPanel__products {
    display: flex;
    justify-content: var(--justify-content, center);
    align-items: center;
    -webkit-margin-before: calc(80 * var(--rate));
            margin-block-start: calc(80 * var(--rate));
  }
  .mainPanel__productsList {
    --column-gap: calc(20 * var(--rate));
  }
  .mainPanel__productsList--withFrame {
    -webkit-padding-before: calc(20 * var(--rate));
            padding-block-start: calc(20 * var(--rate));
    -webkit-padding-after: var(--padding-block-end, calc(40 * var(--rate)));
            padding-block-end: var(--padding-block-end, calc(40 * var(--rate)));
    padding-inline: calc(40 * var(--rate));
  }
  .mainPanel__productsList--withFrame .mainPanel__productsName {
    --productName-gap: 0;
  }
  .mainPanel__productsBrandName {
    padding-inline: calc(5 * var(--rate));
  }
  .mainPanel__productsBrandName:first-of-type {
    bottom: calc(15 * var(--rate));
  }
  .mainPanel__productsBrandName:last-of-type {
    top: calc(15 * var(--rate));
  }
  .mainPanel__productsColumn {
    max-width: calc(180 * var(--rate));
    width: 100%;
  }
  .mainPanel__productsName {
    -webkit-margin-before: var(--productName-gap, calc(20 * var(--rate)));
            margin-block-start: var(--productName-gap, calc(20 * var(--rate)));
    letter-spacing: 0.025em;
  }
}
/* ========== hero */
.hero {
  width: 100%;
}

/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .hero {
    max-width: calc(980 * var(--rate));
    margin-inline: auto;
  }
}
/* ========== styling 01 */
.mainPanel--styling-01 .mainPanel__shell::before {
  --alpha: .2;
  content: "";
}
.mainPanel--styling-01 .mainPanel__productsList--withFrame {
  --alpha: .45;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainPanel--styling-01 {
    --margin-block-start: calc(120 * var(--rate));
  }
  .mainPanel--styling-01 .mainPanel__shell {
    -webkit-padding-after: calc(46 * var(--rate));
            padding-block-end: calc(46 * var(--rate));
    -webkit-padding-start: calc(50 * var(--rate));
            padding-inline-start: calc(50 * var(--rate));
    -webkit-padding-end: calc(105 * var(--rate));
            padding-inline-end: calc(105 * var(--rate));
  }
  .mainPanel--styling-01 .mainPanel__shell::before {
    bottom: 0;
    right: 0;
    width: calc(510 * var(--rate));
    height: calc(805 * var(--rate));
  }
  .mainPanel--styling-01 .mainPanel__productsList--withFrame {
    --row-gap: calc(20 * var(--rate));
    -webkit-padding-before: calc(20 * var(--rate));
            padding-block-start: calc(20 * var(--rate));
    -webkit-padding-after: calc(80 * var(--rate));
            padding-block-end: calc(80 * var(--rate));
  }
  .mainPanel--styling-01 .mainPanel__productsList--withFrame .mainPanel__productsColumn:nth-of-type(1) {
    order: 2;
  }
  .mainPanel--styling-01 .mainPanel__productsList--withFrame .mainPanel__productsColumn:nth-of-type(2) {
    order: 1;
  }
  .mainPanel--styling-01 .mainPanel__productsList--withFrame .mainPanel__productsColumn:nth-of-type(3) {
    order: 3;
  }
  .mainPanel--styling-01 .mainPanel__productsList--withFrame .mainPanel__productsName {
    position: absolute;
    bottom: calc(-12 * var(--rate));
    left: 0;
    right: 0;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainPanel--styling-01 {
    --margin-block-start: calc(100 * var(--rate));
  }
  .mainPanel--styling-01 .mainPanel__shell {
    --row-width: 680;
  }
  .mainPanel--styling-01 .mainPanel__shell::before {
    top: 21.1267605634%;
    left: calc(210 / var(--row-width) * 100%);
    width: calc(390 / var(--row-width) * 100%);
    height: 78.8732394366%;
  }
  .mainPanel--styling-01 .mainPanel__column {
    -moz-column-gap: calc(30 * var(--rate));
         column-gap: calc(30 * var(--rate));
    grid-template-columns: calc(420 / var(--row-width) * 100%) 1fr;
    -webkit-padding-after: calc(110 * var(--rate));
            padding-block-end: calc(110 * var(--rate));
  }
  .mainPanel--styling-01 .mainPanel__prices {
    align-self: end;
    transform: translateY(0.5em);
  }
  .mainPanel--styling-01 .mainPanel__products {
    -moz-column-gap: calc(50 * var(--rate));
         column-gap: calc(50 * var(--rate));
    -webkit-padding-start: calc(10 * var(--rate));
            padding-inline-start: calc(10 * var(--rate));
  }
}
/* ========== styling 02 */
.mainPanel--styling-02 .mainPanel__column::before {
  --alpha: .2;
  content: "";
}
.mainPanel--styling-02 .mainPanel__productsList--withFrame {
  --alpha: .45;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainPanel--styling-02 .mainPanel__shell {
    row-gap: calc(80 * var(--rate));
  }
  .mainPanel--styling-02 .mainPanel__column:nth-child(1) {
    grid-template-columns: calc(130 * var(--rate)) calc(318 * var(--rate)) calc(302 * var(--rate));
    grid-template-rows: calc(777 * var(--rate)) calc(60 * var(--rate)) calc(540 * var(--rate));
  }
  .mainPanel--styling-02 .mainPanel__column:nth-child(1)::before {
    top: calc(517 * var(--rate));
    left: 0;
    right: 0;
    width: calc(620 * var(--rate));
    height: calc(680 * var(--rate));
    margin: auto;
  }
  .mainPanel--styling-02 .mainPanel__column:nth-child(1) .mainPanel__stylingImage:nth-child(1) {
    grid-column: 2/span 2;
    grid-row: 1/span 2;
  }
  .mainPanel--styling-02 .mainPanel__column:nth-child(1) .mainPanel__stylingImage:nth-child(2) {
    grid-column: 1/span 2;
    grid-row: 2/span 2;
  }
  .mainPanel--styling-02 .mainPanel__column:nth-child(2) {
    -webkit-padding-after: calc(90 * var(--rate));
            padding-block-end: calc(90 * var(--rate));
    -webkit-padding-start: calc(115 * var(--rate));
            padding-inline-start: calc(115 * var(--rate));
    -webkit-padding-end: calc(35 * var(--rate));
            padding-inline-end: calc(35 * var(--rate));
  }
  .mainPanel--styling-02 .mainPanel__column:nth-child(2)::before {
    bottom: 0;
    left: calc(45 * var(--rate));
    width: calc(365 * var(--rate));
    height: calc(750 * var(--rate));
  }
  .mainPanel--styling-02 .mainPanel__productsList--withFrame {
    -webkit-padding-before: calc(40 * var(--rate));
            padding-block-start: calc(40 * var(--rate));
    -webkit-padding-after: calc(70 * var(--rate));
            padding-block-end: calc(70 * var(--rate));
  }
  .mainPanel--styling-02 .mainPanel__productsList--withFrame .mainPanel__productsColumn:nth-of-type(1) .mainPanel__productsName {
    -webkit-margin-before: calc(20 * var(--rate));
            margin-block-start: calc(20 * var(--rate));
  }
  .mainPanel--styling-02 .mainPanel__productsList--withFrame .mainPanel__productsColumn:nth-of-type(2) .mainPanel__productsName {
    position: absolute;
    bottom: calc(-12 * var(--rate));
    left: 0;
    right: 0;
  }
  .mainPanel--styling-02 .mainPanel__prices {
    --price-gap-start: calc(12 * var(--rate));
    --price-gap-end: 0;
    text-align: right;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainPanel--styling-02 .mainPanel__shell {
    --row-width: 1180;
    --first-column-width: 470;
    --second-column-width: 520;
    grid-template-columns: calc(var(--first-column-width) / var(--row-width) * 100%) calc(100 / var(--row-width) * 100%) calc(var(--second-column-width) / var(--row-width) * 100%) calc(90 / var(--row-width) * 100%);
  }
  .mainPanel--styling-02 .mainPanel__column:nth-child(1) {
    grid-column: 3;
    grid-row: 1;
    grid-template-columns: calc(120 / var(--second-column-width) * 100%) calc(160 / var(--second-column-width) * 100%) calc(240 / var(--second-column-width) * 100%);
    grid-template-rows: calc(520 * var(--rate)) calc(20 * var(--rate)) calc(355 * var(--rate));
  }
  .mainPanel--styling-02 .mainPanel__column:nth-child(1)::before {
    bottom: 8.3798882682%;
    left: calc(50 / var(--second-column-width) * 100%);
    width: calc(400 / var(--second-column-width) * 100%);
    height: 44.6927374302%;
  }
  .mainPanel--styling-02 .mainPanel__column:nth-child(1) .mainPanel__stylingImage:nth-child(1) {
    grid-column: 2/span 2;
    grid-row: 1/span 2;
  }
  .mainPanel--styling-02 .mainPanel__column:nth-child(1) .mainPanel__stylingImage:nth-child(2) {
    grid-column: 1/span 2;
    grid-row: 2/span 2;
  }
  .mainPanel--styling-02 .mainPanel__column:nth-child(2) {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    -webkit-margin-before: calc(40 * var(--rate));
            margin-block-start: calc(40 * var(--rate));
    -webkit-padding-before: calc(55 * var(--rate));
            padding-block-start: calc(55 * var(--rate));
    -webkit-padding-start: calc(90 * var(--rate));
            padding-inline-start: calc(90 * var(--rate));
  }
  .mainPanel--styling-02 .mainPanel__column:nth-child(2)::before {
    top: 0;
    left: 0;
    width: calc(280 / var(--first-column-width) * 100%);
    height: 71.6216216216%;
  }
  .mainPanel--styling-02 .mainPanel__products {
    -moz-column-gap: calc(60 * var(--rate));
         column-gap: calc(60 * var(--rate));
    -webkit-padding-start: calc(10 * var(--rate));
            padding-inline-start: calc(10 * var(--rate));
  }
  .mainPanel--styling-02 .mainPanel__productsList--withFrame {
    --padding-block-end: calc(20 * var(--rate));
  }
  .mainPanel--styling-02 .mainPanel__productsList--withFrame .mainPanel__productsColumn:nth-of-type(1) .mainPanel__productsName {
    --productName-gap: calc(20 * var(--rate));
  }
}
/* ========== styling 03 */
.mainPanel--styling-03 .mainPanel__shell::before {
  --alpha: .18;
  content: "";
}
.mainPanel--styling-03 .mainPanel__productsList--withFrame {
  --alpha: .42;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainPanel--styling-03 .mainPanel__shell {
    grid-template-columns: calc(270 * var(--rate)) calc(130 * var(--rate)) calc(225 * var(--rate)) calc(125 * var(--rate));
    grid-template-rows: auto calc(50 * var(--rate)) calc(460 * var(--rate)) calc(180 * var(--rate)) auto;
  }
  .mainPanel--styling-03 .mainPanel__shell::before {
    top: calc(603 * var(--rate));
    right: 0;
    width: calc(685 * var(--rate));
    height: calc(720 * var(--rate));
  }
  .mainPanel--styling-03 .mainPanel__column:nth-child(1) {
    grid-column: 1/span 3;
    grid-row: 1;
  }
  .mainPanel--styling-03 .mainPanel__column:nth-child(2) {
    grid-column: 2/span 3;
    grid-row: 3/span 2;
    z-index: 1;
  }
  .mainPanel--styling-03 .mainPanel__column:nth-child(3) {
    grid-column: 1/span 2;
    grid-row: 4/span 2;
  }
  .mainPanel--styling-03 .mainPanel__prices {
    -webkit-padding-start: calc(35 * var(--rate));
            padding-inline-start: calc(35 * var(--rate));
  }
  .mainPanel--styling-03 .mainPanel__productsList--withFrame {
    -webkit-padding-before: calc(40 * var(--rate));
            padding-block-start: calc(40 * var(--rate));
    -webkit-padding-after: calc(70 * var(--rate));
            padding-block-end: calc(70 * var(--rate));
  }
  .mainPanel--styling-03 .mainPanel__productsList--withFrame .mainPanel__productsColumn:nth-of-type(1) .mainPanel__productsName {
    -webkit-margin-before: calc(20 * var(--rate));
            margin-block-start: calc(20 * var(--rate));
  }
  .mainPanel--styling-03 .mainPanel__productsList--withFrame .mainPanel__productsColumn:nth-of-type(2) .mainPanel__productsName {
    position: absolute;
    bottom: calc(-12 * var(--rate));
    left: 0;
    right: 0;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainPanel--styling-03 .mainPanel__shell {
    --row-width: 960;
    grid-template-columns: calc(240 / var(--row-width) * 100%) calc(120 / var(--row-width) * 100%) calc(135 / var(--row-width) * 100%) calc(45 / var(--row-width) * 100%) calc(375 / var(--row-width) * 100%) calc(45 / var(--row-width) * 100%);
    grid-template-rows: calc(65 * var(--rate)) auto calc(60 * var(--rate)) auto;
  }
  .mainPanel--styling-03 .mainPanel__shell::before {
    top: 12.2448979592%;
    right: calc(160 / var(--row-width) * 100%);
    width: calc(640 / var(--row-width) * 100%);
    height: 81.6326530612%;
  }
  .mainPanel--styling-03 .mainPanel__column:nth-child(1) {
    grid-column: 4/span 2;
    grid-row: 1/span 4;
    align-self: start;
  }
  .mainPanel--styling-03 .mainPanel__column:nth-child(2) {
    grid-column: 1/span 2;
    grid-row: 2;
  }
  .mainPanel--styling-03 .mainPanel__column:nth-child(3) {
    grid-column: 2/span 3;
    grid-row: 4;
  }
  .mainPanel--styling-03 .mainPanel__prices {
    text-align: right;
  }
  .mainPanel--styling-03 .mainPanel__products {
    -moz-column-gap: calc(65 * var(--rate));
         column-gap: calc(65 * var(--rate));
    -webkit-padding-end: calc(195 * var(--rate));
            padding-inline-end: calc(195 * var(--rate));
  }
  .mainPanel--styling-03 .mainPanel__productsList:nth-of-type(1) {
    --column-gap: calc(40 * var(--rate));
  }
  .mainPanel--styling-03 .mainPanel__productsList--withFrame {
    --padding-block-end: calc(20 * var(--rate));
  }
  .mainPanel--styling-03 .mainPanel__productsList--withFrame .mainPanel__productsColumn:nth-of-type(1) .mainPanel__productsName {
    --productName-gap: calc(20 * var(--rate));
  }
}
/* ========== styling 04 */
.mainPanel--styling-04 .mainPanel__shell::before {
  --alpha: .24;
  content: "";
}
.mainPanel--styling-04 .mainPanel__productsList--withFrame {
  --alpha: .49;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainPanel--styling-04 .mainPanel__shell {
    row-gap: calc(70 * var(--rate));
  }
  .mainPanel--styling-04 .mainPanel__shell::before {
    bottom: calc(220 * var(--rate));
    right: 0;
    width: calc(400 * var(--rate));
    height: calc(640 * var(--rate));
  }
  .mainPanel--styling-04 .mainPanel__column:nth-child(1) {
    -webkit-padding-start: calc(99 * var(--rate));
            padding-inline-start: calc(99 * var(--rate));
    -webkit-padding-end: calc(35 * var(--rate));
            padding-inline-end: calc(35 * var(--rate));
  }
  .mainPanel--styling-04 .mainPanel__column:nth-child(2) {
    -webkit-padding-end: calc(300 * var(--rate));
            padding-inline-end: calc(300 * var(--rate));
  }
  .mainPanel--styling-04 .mainPanel__prices {
    text-align: right;
  }
  .mainPanel--styling-04 .mainPanel__products {
    -webkit-padding-after: calc(8 * var(--rate));
            padding-block-end: calc(8 * var(--rate));
  }
  .mainPanel--styling-04 .mainPanel__productsList {
    justify-content: space-between;
    row-gap: calc(90 * var(--rate));
  }
  .mainPanel--styling-04 .mainPanel__productsList--withFrame {
    position: absolute;
    bottom: 0;
    right: calc(38 * var(--rate));
    -webkit-padding-before: calc(20 * var(--rate));
            padding-block-start: calc(20 * var(--rate));
    -webkit-padding-after: calc(84 * var(--rate));
            padding-block-end: calc(84 * var(--rate));
    padding-inline: calc(24 * var(--rate));
  }
  .mainPanel--styling-04 .mainPanel__productsList--withFrame .mainPanel__productsName {
    position: absolute;
    bottom: calc(-12 * var(--rate));
    left: 0;
    right: 0;
  }
  .mainPanel--styling-04 .mainPanel__prices {
    --price-gap-start: calc(12 * var(--rate));
    --price-gap-end: 0;
    text-align: right;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainPanel--styling-04 .mainPanel__shell {
    --row-width: 940;
    grid-template-columns: calc(45 / var(--row-width) * 100%) calc(440 / var(--row-width) * 100%) calc(60 / var(--row-width) * 100%) calc(300 / var(--row-width) * 100%) calc(95 / var(--row-width) * 100%);
    grid-template-rows: calc(400 * var(--rate)) auto;
  }
  .mainPanel--styling-04 .mainPanel__shell::before {
    top: calc(200 * var(--rate));
    right: 0;
    width: calc(250 * var(--rate));
    height: calc(400 * var(--rate));
  }
  .mainPanel--styling-04 .mainPanel__column:nth-child(1) {
    grid-column: 2;
    grid-row: 1/span 2;
    align-self: start;
  }
  .mainPanel--styling-04 .mainPanel__column:nth-child(2) {
    grid-column: 4;
    grid-row: 2;
  }
  .mainPanel--styling-04 .mainPanel__products {
    -moz-column-gap: calc(60 * var(--rate));
         column-gap: calc(60 * var(--rate));
    -webkit-padding-start: calc(10 * var(--rate));
            padding-inline-start: calc(10 * var(--rate));
  }
}
/* ========== styling 05 */
.mainPanel--styling-05 .mainPanel__shell::before {
  --alpha: .15;
  content: "";
}
.mainPanel--styling-05 .mainPanel__productsList--withFrame {
  --alpha: .4;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainPanel--styling-05 .mainPanel__shell {
    row-gap: calc(80 * var(--rate));
    -webkit-padding-after: calc(70 * var(--rate));
            padding-block-end: calc(70 * var(--rate));
  }
  .mainPanel--styling-05 .mainPanel__shell::before {
    bottom: 0;
    right: 0;
    width: calc(600 * var(--rate));
    height: calc(1375 * var(--rate));
  }
  .mainPanel--styling-05 .mainPanel__column:nth-child(1) {
    grid-template-columns: calc(330 * var(--rate)) calc(230 * var(--rate)) calc(190 * var(--rate));
    grid-template-rows: calc(676 * var(--rate)) calc(80 * var(--rate)) calc(430 * var(--rate));
  }
  .mainPanel--styling-05 .mainPanel__column:nth-child(1) .mainPanel__stylingImage:nth-child(1) {
    grid-column: 1/span 2;
    grid-row: 1/span 2;
  }
  .mainPanel--styling-05 .mainPanel__column:nth-child(1) .mainPanel__stylingImage:nth-child(2) {
    grid-column: 2/span 2;
    grid-row: 2/span 2;
  }
  .mainPanel--styling-05 .mainPanel__column:nth-child(2) {
    -webkit-padding-end: calc(104 * var(--rate));
            padding-inline-end: calc(104 * var(--rate));
  }
  .mainPanel--styling-05 .mainPanel__prices {
    -webkit-padding-start: calc(35 * var(--rate));
            padding-inline-start: calc(35 * var(--rate));
  }
  .mainPanel--styling-05 .mainPanel__productsList--withFrame {
    --row-gap: calc(10 * var(--rate));
    -webkit-padding-before: calc(20 * var(--rate));
            padding-block-start: calc(20 * var(--rate));
    -webkit-padding-after: calc(80 * var(--rate));
            padding-block-end: calc(80 * var(--rate));
  }
  .mainPanel--styling-05 .mainPanel__productsList--withFrame .mainPanel__productsColumn:nth-of-type(1) .mainPanel__productsName {
    -webkit-margin-before: calc(20 * var(--rate));
            margin-block-start: calc(20 * var(--rate));
  }
  .mainPanel--styling-05 .mainPanel__productsList--withFrame .mainPanel__productsColumn:nth-of-type(2) .mainPanel__productsName, .mainPanel--styling-05 .mainPanel__productsList--withFrame .mainPanel__productsColumn:nth-of-type(3) .mainPanel__productsName {
    position: absolute;
    bottom: calc(-12 * var(--rate));
    left: 0;
    right: 0;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainPanel--styling-05 .mainPanel__shell {
    --row-width: 1120;
    --first-column-width: 560;
    --second-column-width: 380;
    grid-template-columns: calc(var(--first-column-width) / var(--row-width) * 100%) calc(25 / var(--row-width) * 100%) calc(var(--second-column-width) / var(--row-width) * 100%) calc(155 / var(--row-width) * 100%);
    grid-template-rows: calc(140 * var(--rate)) auto;
  }
  .mainPanel--styling-05 .mainPanel__shell::before {
    top: 8.5106382979%;
    left: calc(276 / var(--row-width) * 100%);
    width: calc(580 / var(--row-width) * 100%);
    height: 61.7021276596%;
  }
  .mainPanel--styling-05 .mainPanel__column:nth-child(1) {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: calc(280 / var(--first-column-width) * 100%) calc(120 / var(--first-column-width) * 100%) calc(160 / var(--first-column-width) * 100%);
    grid-template-rows: calc(460 * var(--rate)) auto auto;
  }
  .mainPanel--styling-05 .mainPanel__column:nth-child(1) .mainPanel__stylingImage:nth-child(1) {
    grid-column: 1/span 2;
    grid-row: 1/span 2;
  }
  .mainPanel--styling-05 .mainPanel__column:nth-child(1) .mainPanel__stylingImage:nth-child(2) {
    grid-column: 2/span 2;
    grid-row: 2/span 2;
  }
  .mainPanel--styling-05 .mainPanel__column:nth-child(2) {
    grid-column: 3;
    grid-row: 1/span 2;
    align-self: start;
  }
  .mainPanel--styling-05 .mainPanel__prices {
    text-align: right;
  }
  .mainPanel--styling-05 .mainPanel__products {
    -moz-column-gap: calc(50 * var(--rate));
         column-gap: calc(50 * var(--rate));
    -webkit-padding-start: calc(10 * var(--rate));
            padding-inline-start: calc(10 * var(--rate));
  }
  .mainPanel--styling-05 .mainPanel__productsList--withFrame {
    --padding-block-end: calc(20 * var(--rate));
  }
  .mainPanel--styling-05 .mainPanel__productsList--withFrame .mainPanel__productsColumn:nth-of-type(1) .mainPanel__productsName {
    --productName-gap: calc(20 * var(--rate));
  }
}
/* ========== footer */
.articleFooter * {
  text-align: center;
}
.articleFooter__info {
  position: relative;
  background: linear-gradient(to right, transparent, transparent var(--branch), var(--color-ashen-beige) var(--branch), var(--color-ashen-beige));
}
.articleFooter__title {
  --color: var(--color-stormy-blue);
}
.articleFooter__title > span {
  display: block;
}
.articleFooter__title--primary {
  --font-family: var(--font-en-heading);
  line-height: 1;
}
.articleFooter__title--secondary {
  font-weight: 300;
  line-height: 1;
}
.articleFooter__date {
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.05em;
}
.articleFooter__detail {
  --font-family: var(--font-ja);
  letter-spacing: 0.05em;
}
.articleFooter__button {
  --font-family: var(--font-en-heading);
  --display: grid;
  place-items: center;
  margin-inline: auto;
  font-weight: 500;
  background: linear-gradient(to bottom, transparent, transparent var(--branch), var(--color-slate-lilac) var(--branch), var(--color-slate-lilac));
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .articleFooter {
    padding-inline: calc(70 * var(--rate));
  }
  .articleFooter__info {
    --branch: calc(235 * var(--rate));
    -webkit-padding-before: calc(72 * var(--rate));
            padding-block-start: calc(72 * var(--rate));
    -webkit-padding-after: calc(76 * var(--rate));
            padding-block-end: calc(76 * var(--rate));
    -webkit-padding-end: calc(20 * var(--rate));
            padding-inline-end: calc(20 * var(--rate));
  }
  .articleFooter__title--primary {
    --font-size: calc(64 * var(--rate));
    letter-spacing: 0.035em;
  }
  .articleFooter__title--secondary {
    --font-size: calc(38 * var(--rate));
    -webkit-margin-before: calc(34 * var(--rate));
            margin-block-start: calc(34 * var(--rate));
    letter-spacing: 0.045em;
  }
  .articleFooter__date {
    --font-size: calc(26 * var(--rate));
    -webkit-margin-before: calc(52 * var(--rate));
            margin-block-start: calc(52 * var(--rate));
  }
  .articleFooter__detail {
    --font-size: calc(24 * var(--rate));
    -webkit-margin-before: calc(30 * var(--rate));
            margin-block-start: calc(30 * var(--rate));
    line-height: 1.8333333333;
  }
  .articleFooter__button {
    --font-size: calc(46 * var(--rate));
    --branch: calc((90 - 36) / 90 * 100%);
    width: calc(480 * var(--rate));
    height: calc(90 * var(--rate));
    -webkit-margin-before: calc(120 * var(--rate));
            margin-block-start: calc(120 * var(--rate));
    letter-spacing: 0.045em;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .articleFooter {
    --row-width: 306;
    max-width: calc(var(--row-width) * var(--rate));
    margin-inline: auto;
  }
  .articleFooter__info {
    --branch: calc((var(--row-width) - 195) / var(--row-width) * 100%);
    -webkit-padding-before: calc(32 * var(--rate));
            padding-block-start: calc(32 * var(--rate));
    -webkit-padding-after: calc(36 * var(--rate));
            padding-block-end: calc(36 * var(--rate));
    -webkit-padding-end: calc(20 * var(--rate));
            padding-inline-end: calc(20 * var(--rate));
  }
  .articleFooter__title {
    letter-spacing: 0.025em;
  }
  .articleFooter__title--primary {
    --font-size: calc(32 * var(--rate));
  }
  .articleFooter__title--secondary {
    --font-size: calc(18 * var(--rate));
    -webkit-margin-before: calc(16 * var(--rate));
            margin-block-start: calc(16 * var(--rate));
  }
  .articleFooter__date {
    --font-size: calc(14 * var(--rate));
    -webkit-margin-before: calc(30 * var(--rate));
            margin-block-start: calc(30 * var(--rate));
  }
  .articleFooter__detail {
    --font-size: calc(13 * var(--rate));
    -webkit-margin-before: calc(18 * var(--rate));
            margin-block-start: calc(18 * var(--rate));
    line-height: 1.8461538462;
  }
  .articleFooter__button {
    --font-size: calc(26 * var(--rate));
    --branch: calc((52 - 22) / 52 * 100%);
    width: calc(274 * var(--rate));
    height: calc(52 * var(--rate));
    -webkit-margin-before: calc(80 * var(--rate));
            margin-block-start: calc(80 * var(--rate));
    letter-spacing: 0.025em;
  }
}
/* ========== animation */
.js-drawingFrame.is-show > span:nth-child(odd) {
  -webkit-animation: drawLineHr 1.25s ease-in-out 1.25s forwards;
          animation: drawLineHr 1.25s ease-in-out 1.25s forwards;
}
.js-drawingFrame.is-show > span:nth-child(even) {
  -webkit-animation: drawLineVr 1.25s ease-in-out 0s forwards;
          animation: drawLineVr 1.25s ease-in-out 0s forwards;
}

.js-fadeIn {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6rem);
  transition: all 0.8s ease;
}
.js-fadeIn.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@-webkit-keyframes drawLineVr {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}

@keyframes drawLineVr {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}
@-webkit-keyframes drawLineHr {
  from {
    width: 0;
  }
  to {
    width: calc(100% - 4px);
  }
}
@keyframes drawLineHr {
  from {
    width: 0;
  }
  to {
    width: calc(100% - 4px);
  }
}