body {
  font-family: var(--font-zen-old-mincho);
  color: #2d3135;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.02em;
}

sub {
  bottom: -0.1em;
}

@media (min-width: 768px) {
  .u-pc-hide-br {
    display: none;
  }
}

@media not all and (min-width: 768px) {
  .u-sp-hide-br {
    display: none;
  }
}

.page-note_by_n_amino_shtr .c-breadcrumbs {
  font-family: var(--font-noto-sans);
}
.page-note_by_n_amino_shtr .c-breadcrumbs__item--current  {
  text-transform: unset;
}
.page-note_by_n_amino_shtr .l-site-navigation-wrap,
.page-note_by_n_amino_shtr .l-site-footer {
  font-family: var(--font-noto-sans);
  letter-spacing: normal;
}
.page-note_by_n_amino_shtr .l-section {
  padding: 0 2.6667vw;
}
@media (min-width: 768px) {
  .page-note_by_n_amino_shtr .l-section {
    padding: 0 1.8182vw;
  }
}
@media (min-width: 1100px) {
  .page-note_by_n_amino_shtr .l-section {
    padding: 0;
  }
}

.page-note_by_n_amino_shtr .l-section__inner {
  max-width: 67.865rem;
}

.page-note_by_n_amino_shtr .l-section.note01 {
  padding-top: 11.7333vw;
  padding-bottom: 13.3333vw;
}
.note01 .l-section__inner {
  display: flex;
  flex-direction: column;
}
.note01 .c-section-title {
  margin-bottom: 6.9333vw;
  font-size: 6.9333vw;
  color: #4a4f54;
  font-weight: 600;
  line-height: 1.7;
  text-align: center;
  order: 2;
}
@media (min-width: 768px) {
  .page-note_by_n_amino_shtr .l-section.note01 {
    padding-top: 6vw;
    padding-bottom: 6.3636vw;
  }
  .note01 .c-section-title {
    margin-bottom: 6.9333vw;
    font-size: 3.6036vw;
  }
}
@media (min-width: 1110px) {
  .page-note_by_n_amino_shtr .l-section.note01 {
    padding-top: 4.125rem;
    padding-bottom: 4.375rem;
  }
  .note01 .c-section-title {
    margin-bottom: 3.125rem;
    font-size: 2.5rem;
  }
}

.note01 .c-catch {
  margin-bottom: 6.9333vw;
  font-size: 5.3333vw;
  text-align: center;
  background: linear-gradient(90deg, #9e9ea0 0%, #cac1c2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  order: 1;
}
@media (min-width: 768px) {
  .note01 .c-catch {
    margin-bottom: 2.2727vw;
    font-size: 2.963vw;
  }
}
@media (min-width: 1110px) {
  .note01 .c-catch {
    margin-bottom: 1.5625rem;
    font-size: 2rem;
  }
}


.note01 .c-text {
  margin-bottom: 12.152vw;
  font-size: 3.7333vw;
  line-height: 2;
  font-weight: 500;
  text-align: center;
  order: 3;
}
.note01 .c-text p:last-of-type {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .note01 .c-text {
    margin-bottom: 7.0909vw;
    font-size: 1.4815vw;
  }
}
@media (min-width: 1110px) {
  .note01 .c-text {
    margin-bottom: 4.875rem;
    font-size: 1rem;
  }
}

.note01 .c-image {
  width: 100vw;
  margin: 0 calc(50% - 50vw) 9.0667vw;
  order: 4;
}
.note01 .c-image img {
  width: 68.5333%;
  margin-left: auto;
  display: block;
}
.note01 .c-image figcaption {
  padding-left: 10.4vw;
  margin-top: -4.2667vw;
  font-size: 4.5333vw;
  color: #4a4f54;
  font-weight: 700;
}
@media (min-width: 768px) {
  .note01 .c-image {
    max-width: 53.75rem;
    width: 100%;
    margin: 0 auto 5vw;
  }
  .note01 .c-image img {
    width: 68.3023%;
  }
  .note01 .c-image figcaption {
    padding-left: 0;
    margin-top: -11.7593vw;
    font-size: 2.6852vw;
    font-weight: 600;
  }
}
@media (min-width: 1110px) {
  .note01 .c-image {
    margin-bottom: 3.4375rem;
  }
  .note01 .c-image figcaption {
    margin-top: -7.9365rem;
    font-size: 1.8125rem;
  }
}

.note01 .c-item-name {
  margin: 0 0 0 7.8vw;
  font-family: var(--font-noto-sans);
  font-size: 4vw;
  color: #4a4f54;
  text-align: center;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  column-gap: 4.8vw;
  order: 5;
}
.note01 .c-item-name::before {
  width: 14.4vw;
  background: url(../images/note_by_ndot/icon-new.svg) no-repeat 50% 50% / cover;
  content: '\0020';
  display: block;
  aspect-ratio: 1;
}

@media (min-width: 768px) {
  .note01 .c-item-name {
    margin-left: 0;
    font-size: 1.8519vw;
    justify-content: center;
    column-gap: 1.9444vw;
  }
  .note01 .c-item-name::before {
    width: 7.5926vw;
  }
}

@media (min-width: 1110px) {
  .note01 .c-item-name {
    font-size: 1.25rem;
    column-gap: 1.3125rem;
  }
  .note01 .c-item-name::before {
    width: 5.125rem;
  }
}

.page-note_by_n_amino_shtr .l-section.p-line-up {
  padding-top: 8.8vw;
  border-top: 1px solid rgb(74 79 84 / .2);
}
.p-line-up .c-section-title {
  margin-bottom: 4.5333vw;
  font-size: 5.3333vw;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .page-note_by_n_amino_shtr .l-section.p-line-up {
    padding-top: 5.8182vw;
  }
  .p-line-up .c-section-title {
    margin-bottom: 1.4545vw;
    font-size: 2.18181vw;
  }
}
@media (min-width: 1100px) {
  .page-note_by_n_amino_shtr .l-section.p-line-up {
    padding-top: 4rem;
  }
  .p-line-up .c-section-title {
    margin-bottom: 1rem;
    font-size: 1.5rem;
  }
}

.p-line-up .c-text {
  margin-bottom: 8vw;
  font-size: 4vw;
  line-height: 1.8;
  font-weight: 400;
  text-align: center;
}
.p-line-up .c-text p:last-of-type {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .p-line-up .c-text {
    margin-bottom: 4.5455vw;
    font-size: 1.3636vw;
  }
}
@media (min-width: 1100px) {
  .p-line-up .c-text {
    margin-bottom: 3.125rem;
    font-size: 0.9365rem;
  }
}

.p-line-up .c-grid {
  display: grid;
  grid-template-columns: 100%;
  row-gap: 6.4vw;
}
@media (min-width: 768px) {
  .p-line-up .c-grid {
    grid-template-columns: repeat(3, 32.5967%);
    column-gap: 1.10495%;
    row-gap: unset;
  }
}
.c-note-line-up {
  padding: 0 0 6.2667vw;
  background-color: #fff;
}
@media (min-width: 768px) {
  .c-note-line-up {
    padding-bottom: 2.7273vw;
    row-gap: 2.2727vw;
  }
}
@media (min-width: 1100px) {
  .c-note-line-up {
    padding-bottom: 1.875rem;
    row-gap: 1.5625rem;
  }
}
.c-note-line-up__image {
  position: relative;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.c-note-line-up__image img {
  position: relative;
  z-index: 1;
}
.c-note-line-up__caption {
  padding: calc((7 / 375) * 100vw) 0 0 calc((19 / 375) * 100vw);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
@media (min-width: 768px) {
  .c-note-line-up__caption {
    padding: calc((24 / 1110) * 100vw) 0 0 calc((29 / 1110) * 100vw);
  }
}
@media (min-width: 1100px) {
  .c-note-line-up__caption {
    padding: 1.5rem 0 0 1.8125rem;
  }
}
.c-note-line-up__caption .en {
  margin: 0 0 1.6vw;
}
@media (min-width: 768px) {
  .c-note-line-up__caption .en {
    margin-bottom: 0.5455vw;
  }
}
@media (min-width: 1100px) {
  .c-note-line-up__caption .en {
    margin-bottom: 0.375rem;
  }
}
.c-note-line-up__caption .en img {
  vertical-align: bottom;
}
.c-note-line-up__caption .jpn {
  margin: 0;
  font-family: var(--font-noto-sans);
  font-size: 2.6667vw;
  letter-spacing: 0.25em;
}
@media (min-width: 768px) {
  .c-note-line-up__caption .jpn {
    font-size: 0.9091vw;
  }
}
@media (min-width: 1100px) {
  .c-note-line-up__caption .jpn {
    font-size: 0.625rem;
  }
}
.c-note-line-up__content {
  display: contents;
}
@media (min-width: 768px) {
  .c-note-line-up__content {
    display: block;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }
}
.c-note-line-up__text {
  padding: 0 calc((20 / 375) * 100vw);
  margin-bottom: calc((10 / 375) * 100vw);
  font-size: calc((12 / 375) * 100vw);
  color: #000;
  line-height: 1.7;
  letter-spacing: normal;
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
@media (min-width: 768px) {
  .c-note-line-up__text {
    padding-left: 1.9091vw;
    margin-bottom: 0;
    font-size: 1.0909vw;
  }
}
@media (min-width: 1100px) {
  .c-note-line-up__text {
    padding-left: 1.3125rem;
    font-size: 0.75rem;
  }
}
.c-note-line-up__text p:last-of-type {
  margin-bottom: 0;
}
.c-note-line-up__icon {
  padding-left: calc((23 / 135) * 100%);
  height: 100%;
}
@media (min-width: 768px) {
  .c-note-line-up__icon {
    padding-left: 0;
  }
}

.c-note-line-up__icon-name {
  margin-bottom: calc((8 / 375) * 100vw);
  font-family: var(--font-zen-old-mincho);
  font-size: calc((11 / 375) * 100vw);
  color: #b2b2b2;
  font-weight: 500;
  text-align: center;
}
@media (min-width: 768px) {
  .c-note-line-up__icon-name {
    margin-bottom: 1px;
    font-size: calc((11 / 1110) * 100vw);
  }
}
@media (min-width: 1110px) {
  .c-note-line-up__icon-name {
    font-size: 0.6875rem;
  }
}
.c-note-line-up__icon img {
  width: calc((111.583 / 375) * 100vw);
  margin: 0 auto;
  display: block;
}
@media (min-width: 768px) {
  .c-note-line-up__icon img {
    width: 10.1818vw;
  }
}
@media (min-width: 1100px) {
  .c-note-line-up__icon img {
    width: 7rem;
  }
}

.c-note-line-up__key-name {
  margin-bottom: calc((8 / 375) * 100vw);
  font-family: var(--font-zen-old-mincho);
  font-size: calc((11 / 375) * 100vw);
  color: #b2b2b2;
  font-weight: 500;
  text-align: center;
}
@media (min-width: 768px) {
  .c-note-line-up__key-name {
    margin-bottom: 2px;
    font-size: calc((11 / 1110) * 100vw);
  }
}
@media (min-width: 1110px) {
  .c-note-line-up__key-name {
    font-size: 0.6875rem;
  }
}
.c-note-line-up__key img {
  width: calc((66 / 375) * 100vw);
  margin: 0 auto calc((10 / 375) * 100vw);
  display: block;
}
@media (min-width: 768px) {
  .c-note-line-up__key img {
    width: calc((66 / 1110) * 100vw);
    margin-bottom: calc((3 / 375) * 100vw);
  }
}
@media (min-width: 1110px) {
  .c-note-line-up__key img {
    width: 4.125rem;
    margin-bottom: 0.1875rem;
  }
}

.c-note-line-up__key-caption {
  text-align: center;
}
.c-note-line-up__key-caption p {
  margin-bottom: 0;
  font-family: var(--font-zen-kaku-gothic-new);
  color: #000;
}
.c-note-line-up__key-caption .name {
  font-size: calc((11 / 375) * 100vw);
  line-height: 1.8;
}
.c-note-line-up__key-caption .text {
  margin-right: calc((-19.5 / 375) * 100vw);
  margin-left: calc((-19.5 / 375) * 100vw);
  font-size: calc((8 / 375) * 100vw);
  line-height: 1.3;
}
.c-note-line-up__key-caption .tag {
  width: auto;
  padding: 0 calc((7 / 375) * 100vw);
  background-color: #ededed;
  font-size: calc((9 / 375) * 100vw);
  line-height: 1.5;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transform: translateY(calc((-3 / 375) * 100vw));
}
@media (min-width: 768px) {
  .c-note-line-up__key-caption .name {
    font-size: calc((11 / 1110) * 100vw);
  }
  .c-note-line-up__key-caption .text {
    font-size: calc((8 / 1110) * 100vw);
  }
  .c-note-line-up__key-caption .tag {
    padding: 0 calc((7 / 1110) * 100vw);
    font-size: calc((9 / 1110) * 100vw);
    transform: translateY(calc((-4 / 1110) * 100vw));
  }
}
@media (min-width: 1110px) {
  .c-note-line-up__key-caption .name {
    font-size: 0.6875rem
  }
  .c-note-line-up__key-caption .text {
    font-size: 0.5rem;
  }
  .c-note-line-up__key-caption .tag {
    padding: 0 0.4375rem;
    font-size: 0.5625rem;
    transform: translateY(-0.25rem);
  }
}

.c-note-line-up--classy-fig .c-note-line-up__caption .en {
  width: calc((146 / 375) * 100vw);
}
@media (min-width: 768px) {
  .c-note-line-up--classy-fig .c-note-line-up__caption .en {
    width: 13.0909vw;
  }
}
@media (min-width: 1100px) {
  .c-note-line-up--classy-fig .c-note-line-up__caption .en {
    width: 9rem;
  }
}
.c-note-line-up--white-musk .c-note-line-up__caption .en {
  width: calc((155 / 375) * 100vw);
}
@media (min-width: 768px) {
  .c-note-line-up--white-musk .c-note-line-up__caption .en {
    width: 14.1818vw;
  }
}
@media (min-width: 1100px) {
  .c-note-line-up--white-musk .c-note-line-up__caption .en {
    width: 9.75rem;
  }
}
.c-note-line-up--sheer-bloom .c-note-line-up__caption .en {
  width: calc((174 / 375) * 100vw);
}
@media (min-width: 768px) {
  .c-note-line-up--sheer-bloom .c-note-line-up__caption .en {
    width: 15.7273vw;
  }
}
@media (min-width: 1100px) {
  .c-note-line-up--sheer-bloom .c-note-line-up__caption .en {
    width: 10.8125rem;
  }
}

.p-note-contents {
  padding: 17.3333vw 7.0667vw 18.6667vw;
  background: url(../images/note_by_ndot/bg-lineup_sp.webp) no-repeat 50% 100% / 100% auto;
  display: grid;
  grid-template-columns: 100%;
  row-gap: 11.4667vw;
  position: relative;
}
.p-note-contents::before {
  width: 100%;
  height: 12.5333vw;
  background: url(../images/note_by_ndot/bg-grad.webp) repeat-x 50% 50% / auto 100%;
  content: '\0020';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
@media (min-width: 768px) {
  .p-note-contents {
    padding: 8.1818vw 2.4091vw;
    background: url(../images/note_by_ndot/bg-lineup_pc.webp) no-repeat 50% 100% / 100% auto;
    row-gap: 7.2727vw;
  }
  .p-note-contents::before {
    height: 15.0909vw;
  }
}
@media (min-width: 1100px) {
  .p-note-contents {
    padding: 5.625rem 0;
    row-gap: 5rem;
  }
  .p-note-contents::before {
    height: 10.375rem;
  }
}
.c-note-content {
  padding-top: 6.9333vw;
  position: relative;
}
.c-note-content::before {
  width: 20.8vw;
  height: 1px;
  background-color: rgb(74 79 83 / .5);
  content: '\0020';
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.c-note-content:nth-of-type(1) {
  padding-top: 0;
}
.c-note-content:nth-of-type(1)::before {
  display: none;
}
@media (min-width: 768px) {
  .c-note-content {
    width: 63.2727vw;
    padding-top: 0;
    margin: 0 auto;
    display: grid;
    grid-template-columns: calc((136 / 696) * 100%) calc((500 / 696) * 100%);
    column-gap: calc((60 / 696) * 100%);
  }
  .c-note-content::before {
    display: none;
  }
}
@media (min-width: 1100px) {
  .c-note-content {
    width: 43.5rem;
  }
}
.c-note-content__title {
  margin-bottom: 6.9333vw;
  font-size: 5.8667vw;
  font-weight: 600;
  text-align: center;
}
@media (min-width: 768px) {
  .c-note-content__title {
    margin-bottom: 0;
    font-size: 2vw;
    text-align: left;
  }
}
@media (min-width: 1100px) {
  .c-note-content__title {
    font-size: 1.375rem;
  }
}
.c-note-content__text {
  font-size: 3.7333vw;
  color: #4a4f54;
  line-height: 1.8;
  font-weight: 400;
}
.c-note-content__text p {
  margin-bottom: 0;
}
.c-note-content__text ol {
  padding-top: 6.6667vw;
  font-size: 3.2vw;
}
@media (min-width: 768px) {
  .c-note-content__text {
    font-size: 1.2727vw;
  }
  .c-note-content__text ol {
    padding-top: 2.2727vw;
    font-size: 1vw;
  }
}
@media (min-width: 1100px) {
  .c-note-content__text {
    font-size: 0.875rem;
  }
  .c-note-content__text ol {
    padding-top: 1.5625rem;
    font-size: 0.6875rem;
  }
}



.c-note-item {
  max-width: 75rem;
  width: 100%;
  padding: 16vw 2.6667vw 8vw;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
@media not all and (min-width: 768px) {
  .c-note-item picture {
    order: 2;
  }
  .c-note-item__caption {
    display: contents;
  }
  .c-note-item__title {
    order: 1;
  }
  .c-note-item h3 {
    order: 3;
  }
  .c-note-item .c-row:nth-of-type(1) {
    order: 4;
  }
  .c-note-item .c-row:nth-of-type(2) {
    order: 5;
  }
  .c-note-item .c-row:nth-of-type(3) {
    order: 6;
  }
  .c-note-item__note {
    order: 7;
  }
}
.c-note-item__title {
  margin: 0 auto 10.6667vw;
  font-family: var(--font-zen-old-mincho);
  font-size: calc((17 / 375) * 100vw);
  color: #4a4f54;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.11em;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  row-gap: calc((6 / 375) * 100vw);
  order: 1;
}
.c-note-item__title img {
  width: calc((217 / 375) * 100vw);
}
@media (min-width: 768px) {
  .c-note-item__title {
    margin-bottom: calc((46 / 1110) * 100vw);
    font-size: calc((16 / 1110) * 100vw);
    row-gap: calc((15 / 1110) * 100vw);
    order: unset;
  }
  .c-note-item__title img {
    width: calc((242 / 1110) * 100vw);
  }
}
@media (min-width: 1110px) {
  .c-note-item__title {
    margin-bottom: 2.875rem;
    font-size: 1rem;
    row-gap: 0.9375rem;
  }
  .c-note-item__title img {
    width: 15.125rem;;
  }
}

.c-note-item__image {
  margin-bottom: calc((42 / 375) * 100vw);
  border-radius: 1.3333vw;
  order: 2;
}
.c-note-item__caption {
  padding-top: 3.4053vw;
  text-align: center;
  display: contents;
}
.c-note-item__caption h3 {
  margin-bottom: calc((47 / 375) * 100vw);
  font-family: var(--font-zen-old-mincho);
  font-size: calc((11 / 375) * 100vw);
  color: #2d3135;
  font-weight: 600;
  line-height: 1.7;
  text-align: center;
  order: 3;
}
.c-note-item__caption h3 em {
  font-size: calc((14 / 375) * 100vw);
}
.c-row {
  margin-bottom: calc((25 / 375) * 100vw);
}
.c-row:nth-of-type(1) {
  order: 4;
}
.c-row:nth-of-type(2) {
  order: 5;
}
.c-row:nth-of-type(3) {
  margin-bottom: calc((23 / 375) * 100vw);
  order: 6;
}
.c-note-item__caption h4 {
  margin-bottom: calc((3 / 375) * 100vw);
  font-family: var(--font-zen-old-mincho);
  font-size: calc((11 / 375) * 100vw);
  color: #393d41;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.02em;
  text-align: center;
}
.c-note-item__caption h4 + p {
  margin-bottom: 0;
  font-family: var(--font-zen-old-mincho);
  font-size: calc((10 / 375) * 100vw);
  color: #393d41;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.02em;
  text-align: center;
}
.c-note-item__note {
  font-family: var(--font-zen-old-mincho);
  font-size: calc((10 / 375) * 100vw);
  color: #393d41;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.02em;
  text-align: center;
  order: 7;
}
@media (min-width: 768px) {
  .c-note-item {
    padding: 0 0 4.6296vw;
    display: grid;
    grid-template-columns: calc((533 / 1200) * 100%) calc((667 / 1200) * 100%);
    align-items: flex-start;
  }
  .c-note-item__image {
    margin-bottom: 0;
    border-radius: 0 0 0.4505vw 0;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    order: unset;
    transform: translateY(-2px);
  }
  .c-note-item__caption {
    padding-top: calc((60 / 1110) * 100vw);
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    display: block;
  }
  .c-row {
    width: calc((530 / 1110) * 100vw);
    margin: 0 auto calc((8 / 1110) * 100vw);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 1em;
    order: unset;
  }
  .c-row:nth-of-type(3) {
    margin-bottom: calc((16 / 1110) * 100vw);
  }
  .c-note-item__caption h3 {
    margin-bottom: calc((43 / 1110) * 100vw);
    font-size: calc((12 / 1110) * 100vw);
    line-height: 1.9;
  }
  .c-note-item__caption h3 em {
    font-size: calc((16 / 1110) * 100vw);
  }
  .c-note-item__caption h4 {
    margin-bottom: 0;
    font-size: calc((11 / 1110) * 100vw);
  }
  .c-note-item__caption h4 + p {
    font-size: calc((10 / 1110) * 100vw);
  }
  .c-note-item__note {
    margin-bottom: calc((6 / 1110) * 100vw);
    font-size: calc((10 / 1110) * 100vw);
    order: unset;
  }
}
@media (min-width: 1110px) {
  .c-note-item {
    padding: 0 0 3.125rem;
  }
  .c-note-item__image {
    margin-bottom: 0;
    border-radius: 0 0 0.3125rem 0;
  }
  .c-row {
    width: 33.125rem;
    margin-bottom: 0.5rem;
  }
  .c-row:nth-of-type(3) {
    margin-bottom: 1rem;
  }
  .c-note-item__caption {
    padding-top: 3.75rem;
  }
  .c-note-item__caption h3 {
    margin-bottom: 2.6875rem;
    font-size: 0.75rem;
  }
  .c-note-item__caption h3 em {
    font-size: 1rem;
  }
  .c-note-item__caption h4 {
    font-size: 0.6875rem;
  }
  .c-note-item__caption h4 + p {
    font-size: 0.625rem;
  }
  .c-note-item__note {
    margin-bottom: 0.375rem;
    font-size: 0.625rem;
  }
}

.c-note-notice {
  padding: calc((7 / 375) * 100vw) calc((10 / 375) * 100vw) calc((30 / 375) * 100vw);
  font-size: 3.7333vw;
  line-height: 1.8;
  font-weight: 500;
  text-align: center;
}
.c-note-notice p {
  margin-bottom: 3.7333vw;
}
.c-note-notice p:last-of-type {
  margin-bottom: 0;
}
.c-note-notice a:link {
  color: #6a6f73;
  text-decoration: underline;
}
.c-note-notice a:visited {
  color: #6a6f73;
  text-decoration: underline;
}
.c-note-notice a:hover {
  color: #6a6f73;
  text-decoration: underline;
}
.c-note-notice a:focus {
  color: #6a6f73;
  text-decoration: underline;
}

@media (min-width: 768px) {
  .c-note-notice {
    padding: 4.6296vw 0.9259vw;
    font-size: 1.3889vw;
    line-height: 2;
    font-weight: 400;
    text-align: center;
  }
  .c-note-notice p {
    margin-bottom: 0;
  }
}

@media (min-width: 1110px) {
  .c-note-notice {
    padding: 3.125rem 0;
    font-size: 0.9375rem;
  }
}

.c-note-links {
  max-width: 61.25rem;
  width: 100%;
  padding: 8vw 2.6667vw 18.6667vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 100%;
  row-gap: 3.7333vw;
}
@media (min-width: 768px) {
  .c-note-links {
    padding: 4.6296vw 0.9259vw 9.2593vw;
    grid-template-columns: repeat(3, 32.585%);
    column-gap: 1.0185vw;
    row-gap: 0;
  }
}
@media (min-width: 1110px) {
  .c-note-links {
    padding: 3.125rem 0 6.25rem;
    column-gap: 0.6875rem;
  }
}
.c-note-links__item {
  width: 100%;
  height: 13.8667vw;
  font-size: 4vw;
  line-height: 1.8;
  letter-spacing: 0.04em;
}
.c-note-links__item--insta .c-note-links__link::before {
  width: 5.8667vw;
  height: 5.8667vw;
  background: url(../images/common/instagram-c.svg) no-repeat 50% 50% / cover;
  content: '\0020';
  display: block;
}
@media (min-width: 768px) {
  .c-note-links__item {
    height: 6.8519vw;
    font-size: 1.3889vw;
  }
  .c-note-links__item--insta .c-note-links__link::before {
    width: 2.037vw;
    height: 2.037vw;
  }
}
@media (min-width: 1110px) {
  .c-note-links__item {
    height: 4.625rem;
    font-size: 0.9375rem
  }
  .c-note-links__item--insta .c-note-links__link::before {
    width: 1.375rem;
    height: 1.375rem;
  }
}
.c-note-links__link {
  width: 100%;
  height: 100%;
  background-color: #f9f9fc;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4vw;
}
.c-note-links__link:link {
  color: #4a4f54;
}
.c-note-links__link:visited {
  color: #4a4f54;
}
.c-note-links__link:hover {
  color: #4a4f54;
}
.c-note-links__link:focus {
  color: #4a4f54;
}
@media (min-width: 768px) {
  .c-note-links__link {
    column-gap: 1.3889vw;
  }
}
@media (min-width: 1110px) {
  .c-note-links__link {
    column-gap: 0.9375rem;
  }
}


.p-note-about.l-section {
  padding-top: calc((48 / 375) * 100vw);
  padding-bottom: calc((55 / 375) * 100vw);
  background: url(../images/note_by_n_amino_shtr/bg-about_sp.webp) no-repeat 50% 0 / cover;
}
@media (min-width: 768px) {
  .p-note-about.l-section {
    padding-top: 5.225vw;
    padding-bottom: 5.045vw;
    background: url(../images/note_by_n_amino_shtr/bg-about_pc.webp) no-repeat 50% 0 / cover;
  }
}
@media (min-width: 1110px) {
  .p-note-about.l-section {
    padding-top: 3.625rem;
    padding-bottom: 3.5rem;
  }
}


.p-note-about .c-section-title {
  margin-bottom: calc((32 / 375) * 100vw);
  font-size: calc((22 / 375) * 100vw);
  color: #4a4f54;
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
@media (min-width: 768px) {
  .p-note-about .c-section-title {
    margin-bottom: calc((32 / 1110) * 100vw);
    font-size: calc((26 / 1110) * 100vw);
  }
}
@media (min-width: 1110px) {
  .p-note-about .c-section-title {
    margin-bottom: 2rem;
    font-size: 1.625rem;
  }
}


.p-note-about .c-text p, .p-note-about .c-text h1 {
  margin-bottom: calc((28 / 375) * 100vw);
  font-size: calc((14 / 375) * 100vw);
  line-height: 2;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.02em;
}
.p-note-about .c-text p:last-of-type {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .p-note-about .c-text p, .p-note-about .c-text h1 {
    margin-bottom: calc((30 / 1110) * 100vw);
    font-size: calc((14 / 1110) * 100vw);
  }
}
@media (min-width: 1110px) {
  .p-note-about .c-text p, .p-note-about .c-text h1 {
    margin-bottom: 1.875rem;
    font-size: 0.875rem;
  }
}

.p-note-thoughts.l-section {
  position: relative;
}
@media not all and (min-width: 768px) {
  .p-note-thoughts.l-section {
    padding: calc((80 / 375) * 100vw) 0 calc((33 / 375) * 100vw) calc((34 / 375) * 100vw);
  }
}
@media (min-width: 768px) {
  .p-note-thoughts.l-section {
    padding-top: calc((100 / 1110) * 100vw);
    padding-bottom: calc((93 / 1110) * 100vw);
  }
}
@media (min-width: 1110px) {
  .p-note-thoughts.l-section {
    padding-top: 6.25rem;
    padding-bottom: 5.8125rem;
  }
}

.p-note-thoughts .l-section__inner {
  max-width: 56.25rem;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto auto;
  row-gap: 11.7333vw;
}
@media (min-width: 768px) {
  .p-note-thoughts .l-section__inner {
    grid-template-columns: 33.8% 66.2%;
    grid-template-rows: auto;
    row-gap: unset;
    align-items: end;
    position: relative;
  }
}

.p-note-thoughts .c-section-title {
  font-size: calc((16 / 375) * 100vw);
  color: #4a4f54;
  line-height: 1.8;
  font-weight: 600;
  letter-spacing: 0.05em;
  position: absolute;
  top: calc((172 / 375) * 100vw);
  left: 0.067vw;
}
@media (min-width: 768px) {
  .p-note-thoughts .c-section-title {
    font-size: calc((30 / 1110) * 100vw);
    top: calc((369 / 1110) * 100vw);
    left: 0;
  }
}
@media (min-width: 1110px) {
  .p-note-thoughts .c-section-title {
    font-size: 1.875rem;
    top: 23.0625rem;
  }
}

.p-note-thoughts .c-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  row-gap: 4.8vw;
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.p-note-thoughts .c-text span {
  padding: 2.4vw 4.2667vw;
  border-radius: 5px;
  background-color: #f9f9fc;
  font-size: 3.7333vw;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 768px) {
  .p-note-thoughts .c-text {
    grid-row: 1 / 2;
    row-gap: 2.7027vw;
  }
  .p-note-thoughts .c-text span {
    padding: 1.1712vw 1.4414vw;
    font-size: 1.3514vw;
  }
}
@media (min-width: 1110px) {
  .p-note-thoughts .c-text {
    row-gap: 1.875rem;
  }
  .p-note-thoughts .c-text span {
    padding: 0.8125rem 1rem;
    font-size: 0.9375rem;
  }
}
.p-note-thoughts .c-image {
  width: calc((271 / 375) * 100vw);
  margin-left: auto;
  border-radius: calc((5 / 375) * 100vw) 0 0 calc((5 / 375) * 100vw);
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  overflow: hidden;
}
@media (min-width: 768px) {
  .p-note-thoughts .c-image {
    width: 100%;
    padding-bottom: 4.3243vw;
    border-radius: 5px;
    grid-column: 2 / 3;
  }
}
@media (min-width: 1110px) {
  .p-note-thoughts .c-image {
    padding-bottom: 3rem;
  }
}

.p-note-oil.l-section {
  padding-top: calc((24 / 375) * 100vw);
  padding-bottom: calc((86 / 375) * 100vw);
}
@media (min-width: 768px) {
  .p-note-oil.l-section {
    background: var(--white);
  }
}
.p-note-oil .l-section__inner {
  max-width: 56.25rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.p-note-oil .l-section__inner::after {
  width: calc((271 / 375) * 100vw);
  height: calc((202 / 375) * 100vw);
  border-radius: 0 calc((5 / 375) * 100vw) calc((5 / 375) * 100vw) 0;
  background: linear-gradient(-90deg, #f2eded 8.63%, #fafafa 74.81%);
  content: '\0020';
  display: block;
  position: absolute;
  top: calc((171 / 375) * 100vw);
  left: calc((-20 / 375) * 100vw);
  z-index: 1;
}
@media (min-width: 768px) {
  .p-note-oil.l-section {
    padding-top: calc((27 / 1110) * 100vw);
    padding-bottom: calc((142 / 1110) * 100vw);
  }
  .p-note-oil .l-section__inner::after {
    width: calc((789 / 1110) * 100vw);
    height: calc((300 / 1110) * 100vw);
    border-radius: 0 calc((5 / 1110) * 100vw) calc((5 / 1110) * 100vw) 0;
    top: 0;
    right: calc(100% - calc((564 / 1110) * 100vw));
    left: auto;
  }
}
@media (min-width: 1110px) {
  .p-note-oil.l-section {
    padding-top: 1.6875rem;
    padding-bottom: 8.875rem;
  }
  .p-note-oil .l-section__inner::after {
    width: 49.2125rem;
    height: 18.75rem;
    border-radius: 0 0.3125rem 0.3125rem 0;
    right: calc(100% - 35.25rem);
  }
}
.p-note-oil .c-section-title {
  padding-left: calc((36 / 375) * 100vw);
  margin-bottom: calc((28 / 375) * 100vw);
  font-size: calc((18 / 375) * 100vw);
  color: #4a4f54;
  line-height: 1.4;
  font-weight: 400;
  text-align: left;
  letter-spacing: 0.05em;
  order: 2;
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  .p-note-oil .c-section-title {
    padding-left: 0;
    margin-bottom: calc((34 / 1110) * 100vw);
    font-size: calc((20 / 1110) * 100vw);
    text-align: left;
  }
}
@media (min-width: 1110px) {
  .p-note-oil .c-section-title {
    margin-bottom: 2.125rem;
    font-size: 1.25rem;
  }
}
.p-note-oil .c-icon {
  width: calc((214.472 / 375) * 100vw);
  margin: 0 auto calc((36 / 375) * 100vw);
  order: 1;
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  .p-note-oil .c-icon {
    width: 21.0811vw;
    margin: 0 calc((113 / 1110) * 100vw) 0 auto;
    position: relative;
    z-index: 10;
  }
}
@media (min-width: 1110px) {
  .p-note-oil .c-icon {
    width: 14.625rem;
    margin-right: 7.0625rem;
  }
}
.p-note-oil .c-text {
  padding: 0 calc((5 / 375) * 100vw) 0 calc((36 / 375) * 100vw);
  font-size: calc((13 / 375) * 100vw);
  color: #2d3135;
  line-height: 1.8;
  letter-spacing: 0.02em;
  order: 3;
  position: relative;
  z-index: 2;
}
.p-note-oil .c-text p:last-of-type {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .p-note-oil .c-text {
    padding: 0;
    font-size: calc((13 / 1110) * 100vw);
  }
}
@media (min-width: 1110px) {
  .p-note-oil .c-text {
    font-size: 0.8125rem;
  }
}

.p-note-oil .c-content {
  display: flex;
  flex-direction: column-reverse;
}
@media (min-width: 768px) {
  .p-note-oil .c-content {
    width: calc((920 / 1200) * 100vw);
    padding-top: calc((37 / 1110 * 100vw));
    border-radius: 5px;
    display: grid;
    grid-template-columns: calc((420 / 920) * 100%) calc((500 / 920) * 100%);
    align-items: center;
    position: relative;
    z-index: 5;
    overflow: hidden;
  }
  .p-note-oil .c-content__inner {
    padding: 0;
    order: 2;
  }
}
@media (min-width: 1110px) {
  .p-note-oil .c-content {
    width: 57.5rem;
    padding-top: 2.3125rem;
    margin: 0 auto;
  }
}

.p-note-features.l-section {
  background-color: #f3f4fb;
  color: #4a5f54;
  overflow: visible;
}
@media not all and (min-width: 768px) {
  .p-note-features.l-section {
    padding: 0 6.4vw 24.5333vw;
  }
}
@media (min-width: 768px) {
  .p-note-features.l-section {
    padding: 0 0 9.9099vw;
  }
}
@media (min-width: 1110px) {
  .p-note-features.l-section {
    padding: 0 0 6.875rem;
  }
}


.p-note-features .c-section-title {
  margin-bottom: calc((62 / 375) * 100vw);
  font-size: 5.8667vw;
  color: #2d3135;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  transform: translateY(-3.7333vw);
}
@media (min-width: 768px) {
  .p-note-features .c-section-title {
    margin-bottom: 4.3243vw;
    font-size: 2.3423vw;
    transform: translateY(-1.2613vw);
  }
}
@media (min-width: 1110px) {
  .p-note-features .c-section-title {
    margin-bottom: 3rem;
    font-size: 1.625rem;
    transform: translateY(-0.875rem);
  }
}

.p-note-features .l-section__inner {
  max-width: none;
}
.p-note-features .c-text {
  margin-bottom: 10.6667vw;
  font-size: 4vw;
  line-height: 1.88;
  text-align: center;
}
.p-note-features .c-text p {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .p-note-features .c-text {
    margin-bottom: 3.6036vw;
    font-size: 1.4414vw;
  }
}
@media (min-width: 1110px) {
  .p-note-features .c-text {
    margin-bottom: 2.5rem;
    font-size: 1rem;
  }
}

.p-note-features .c-grid {
  display: grid;
  grid-template-columns: 100%;
  row-gap: 9.0667vw;
  overflow: hidden;
}
@media (min-width: 768px) {
  .p-note-features .c-grid {
    row-gap: calc((70 / 900) * 100vw);
  }
  .c-feature-box {
    padding-bottom: 3.6036vw;
    position: relative;
    overflow: hidden;
  }
  .c-feature-box::after {
    width: 100%;
    height: calc((200 / 900) * 100vw);
    border-radius: 5px;
    overflow: hidden;
    content: '\0020';
    display: block;
    position: absolute;
    top: calc((96 / 900) * 100vw);
    left: 0;
    z-index: 1;
  }
  .note-feature01.c-feature-box::after {
    height: calc((280 / 900) * 100vw);
    background: linear-gradient(90deg, rgb(255 255 255 / 0.60) 23.1%, rgb(255 255 255 / 0.10) 99.86%);
  }
  .note-feature02.c-feature-box::after {
    height: calc((290 / 900) * 100vw);
    background: linear-gradient(270deg, rgb(255 255 255 / 0.60) 23.1%, rgb(255 255 255 / 0.10) 99.86%);
    top: calc((87 / 900) * 100vw);
  }
  .note-feature03.c-feature-box::after {
    height: calc((270 / 900) * 100vw);
    background: linear-gradient(90deg, rgb(255 255 255 / 0.60) 23.1%, rgba(255 255 255 / 0.10) 99.86%);
    top: calc((87 / 900) * 100vw);
  }
}
@media (min-width: 900px) {
  .p-note-features .c-grid {
    row-gap: 4.375rem;
  }
  .c-feature-box {
    padding-bottom: 2.5rem;
  }
  .c-feature-box::after {
    height: 12.5rem;
    top: 6rem;
  }
  .note-feature01.c-feature-box::after {
    height: 17.5rem;
  }
  .note-feature02.c-feature-box::after {
    height: 18.125rem;
    top: 5.4375rem;
  }
  .note-feature03.c-feature-box::after {
    height: 16.875rem;
    top: 5.4375rem;
  }
}
.c-feature-box__inner {
  padding: calc((40 / 375) * 100vw) calc((19 / 375) * 100vw);
  background-color: #f9f9fc;
}
.note-feature02.c-feature-box .c-feature-box__inner {
  /* padding-bottom: 0; */
}
.note-feature03.c-feature-box + ul {
  max-width: 56.25rem;
  width: 100%;
  margin: 0 auto;
  font-family: var(--font-zen-old-mincho);
  font-size: calc((10 / 375) * 100vw);
  line-height: 1.6;
  letter-spacing: -0.01em;
}
.note-feature03.c-feature-box + ul li {
  padding-left: 2.5em;
  text-indent: -2.5em;
}
@media (min-width: 768px) {
  .c-feature-box__inner {
    max-width: 56.25rem;
    padding: 0;
    margin: 0 auto;
    background-color: transparent;
    display: grid;
    position: relative;
    z-index: 5;
    transition: all .7s;
  }
  .note-feature01.c-feature-box .c-feature-box__inner {
    grid-template-columns: calc((264 / 900) * 100%) calc((596 / 900) * 100%);
    grid-template-rows: auto auto;
    column-gap: calc((40 / 900) * 100%);
    align-items: start;
  }
  .note-feature02.c-feature-box .c-feature-box__inner {
    grid-template-columns: calc((596 / 900) * 100%) calc((264 / 900) * 100%);
    grid-template-rows: auto auto;
    column-gap: 3%;
    align-items: start;
  }
  .note-feature03.c-feature-box .c-feature-box__inner {
    /* grid-template-columns: 37.3334% 56.3333%; */
    grid-template-columns: calc((264 / 900) * 100%) calc((596 / 900) * 100%);
    grid-template-rows: auto auto;
    column-gap: 6.3333%;
    align-items: start;
  }
  .note-feature03.c-feature-box + ul {
    margin-top: calc((-9 / 1110) * 100vw);
    font-size: calc((10 / 900) * 100vw);
    letter-spacing: 0.02em;
  }
  .note-feature03.c-feature-box + ul li {
    padding-left: 0;
    text-indent: 0;
    display: inline-block;
  }
  .note-feature03.c-feature-box + ul li:nth-of-type(1),
  .note-feature03.c-feature-box + ul li:nth-of-type(4) {
    width: 100%;
  }
  .note-feature03.c-feature-box + ul li:nth-of-type(5),
  .note-feature03.c-feature-box + ul li:nth-of-type(6),
  .note-feature03.c-feature-box + ul li:nth-of-type(7) {
    margin-right: 1em;
  }
}
@media (min-width: 900px) {
  /* .note-feature01.c-feature-box .c-feature-box__inner {
    grid-template-rows: 8.5rem 1fr;
  }
  .note-feature02.c-feature-box .c-feature-box__inner {
    grid-template-rows: 8.9625rem 1fr;
  }
  .note-feature03.c-feature-box .c-feature-box__inner {
    grid-template-rows: 7.75rem 1fr;
  } */
  .note-feature03.c-feature-box + ul {
    margin-top: -0.5625rem;
    font-size: 0.625rem;
  }
}
.c-feature-box__title {
  margin-bottom: calc((17 / 375) * 100vw);
  font-size: calc((18 / 375) * 100vw);
  color: #4a4f54;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.04em;
  text-align: center;
}
@media not all and (min-width: 768px) {
  .note-feature03 .c-feature-box__title {
    font-size: calc((18 / 375) * 100vw);
    text-align: center;
  }
}
.c-feature-box__title sub {
  font-size: calc((10 / 375) * 100vw);
  letter-spacing: 0.04em;
}
.c-feature-box__title span {
  margin-left: 0.3em;
  font-size: calc((22 / 375) * 100vw);
  font-weight: 700;
  letter-spacing: 0.182em;
}
@media (min-width: 768px) {
  .c-feature-box__title {
    margin-bottom: 0;
    font-size: calc((22 / 1110) * 100vw);
    text-align: left;
  }
  .note-feature01 .c-feature-box__title {
    margin-top: calc((69 / 1110) * 100vw);
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }
  .note-feature02 .c-feature-box__title {
    margin-top: calc((60 / 1110) * 100vw);
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
  .note-feature03 .c-feature-box__title {
    margin-top: calc((60 / 1110) * 100vw);
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }
  .c-feature-box__title sub {
    font-size: calc((10 / 1110) * 100vw);
  }
  .c-feature-box__title span {
    font-size: calc((27 / 1110) * 100vw);
  }
}
@media (min-width: 900px) {
  .c-feature-box__title {
    font-size: 1.375rem;
  }
  .c-feature-box__title sub {
    font-size: 0.625rem;
  }
  .c-feature-box__title span {
    font-size: 1.6875rem;
  }
  .note-feature01 .c-feature-box__title {
    margin-top: 4.3125rem;
  }
  .note-feature02 .c-feature-box__title {
    margin-top: 3.75rem;
  }
  .note-feature03 .c-feature-box__title {
    margin-top: 3.75rem;
  }
}
.c-feature-box__text {
  margin-bottom: calc((18 / 375) * 100vw);
  font-size: calc((14 / 375) * 100vw);
  line-height: 1.8;
  letter-spacing: 0.02em;
}
@media not all and (min-width: 768px) {
  .note-feature01 .c-feature-box__text p span {
    white-space: nowrap;
    margin-right: -1em;
  }
  .note-feature02 .c-feature-box__text p span {
    white-space: nowrap;
    margin-right: -1em;
  }
  .note-feature03 .c-feature-box__text {
    margin-bottom: 5.3333vw;
  }
}
.c-feature-box__text p:last-of-type {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .c-feature-box__text {
    margin-bottom: 2.7027vw;
    font-size: calc((15 / 1110) * 100vw);
    letter-spacing: 0.02em;
  }
  .note-feature01 .c-feature-box__text {
    padding-top: calc((18 / 1110) * 100vw);
    margin-bottom: 0;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
  .note-feature02 .c-feature-box__text {
    padding-top: calc((24 / 1110) * 100vw);
    margin-bottom: 0;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
  .note-feature03 .c-feature-box__text--1 {
    padding-top: 0;
    margin-top: calc((-46 / 1110) * 100vw);
    margin-bottom: 0;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
  .note-feature03 .c-feature-box__text--2 {
    margin-bottom: 4.6847vw;
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }
}
@media (min-width: 900px) {
  .c-feature-box__text {
    margin-bottom: 1.875rem;
    font-size: 0.9375rem;
  }
  .note-feature01 .c-feature-box__text {
    padding-top: 1.125rem;
  }
  .note-feature02 .c-feature-box__text {
    padding-top: 1.5rem;
    margin-bottom: 0;
  }
  .note-feature03 .c-feature-box__text--1 {
    padding-top: 0;
    margin-top: -2.875rem;
  }
  .note-feature03 .c-feature-box__text--2 {
    margin-bottom: 3.25rem;
  }
}
.c-feature-box__image {
  margin-bottom: 0;
  border-radius: calc((5 / 375) * 100vw);
  display: block;
  overflow: hidden;
}
@media (min-width: 768px) {
  .c-feature-box__image {
    margin-bottom: 0;
    border-radius: calc((5 / 1110) * 100vw);
  }
  .note-feature01 .c-feature-box__image {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    overflow: hidden;
  }
  .note-feature02 .c-feature-box__image {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
  }
  .note-feature03 .c-feature-box__image {
    margin-bottom: 0;
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }
}
@media (min-width: 1110px) {
  .c-feature-box__image {
    border-radius: 0.3125rem;
  }
}
.c-feature-box__note {
  font-size: 2.6667vw;
  line-height: 1.8;
}
.c-feature-box__note p:last-of-type {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .c-feature-box__note {
    font-size: 0.9009vw;
  }
  .note-feature01 .c-feature-box__note {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }
}
@media (min-width: 900px) {
  .c-feature-box__note {
    font-size: 0.625rem;
  }
}
.c-feature-box__list {
  font-size: 2.9333vw;
  line-height: 1.8;
}
.c-feature-box__list em {
  font-size: 3.7333vw;
  font-weight: 700;
}
.c-feature-box__list li {
  padding-left: 7.4667vw;
  margin-bottom: 5.3333vw;
  position: relative;
}
.c-feature-box__list li:last-of-type {
  margin-bottom: 0;
}
.c-feature-box__list li::before {
  width: 4vw;
  height: 3.2vw;
  background: url(../images/note_by_ndot/202507/icon-check.svg) no-repeat 50% 50% / cover;
  content: '\0020';
  display: block;
  position: absolute;
  top: 2.1333vw;
  left: 0;
}
@media (min-width: 768px) {
  .c-feature-box__list {
    margin-bottom: 1.0811vw;
    font-size: 0.991vw;
    grid-column: 2 / 3;
    grid-row: 4 / 5;
    display: grid;
    grid-template-columns: calc((200 / 450) * 100%) calc((200 / 450) * 100%);
    column-gap: calc((35 / 450) * 100%);
  }
  .c-feature-box__list em {
    font-size: 1.441vw;
  }
  .c-feature-box__list li {
    padding-left: 2.7027vw;
    margin-bottom: 0;
  }
  .c-feature-box__list li::before {
    width: 1.6216vw;
    height: 1.3514vw;
    top: 0.8108vw;
  }
}
@media (min-width: 900px) {
  .c-feature-box__list {
    margin-bottom: 0.75rem;
    font-size: 0.6875rem;
  }
  .c-feature-box__list em {
    font-size: 1rem;
  }
  .c-feature-box__list li {
    padding-left: 1.875rem;
  }
  .c-feature-box__list li::before {
    width: 1.125rem;
    height: 0.9375rem;
    top: 0.5625rem;
  }

}
.c-feature-box__key {
  width: calc(100% + 10.134vw);
  padding: 3.7333vw 8.5333vw 10.6667vw;
  margin: 0 -5.6667vw;
  background-color: #f4f1f2;
}
@media (min-width: 768px) {
  .c-feature-box__key {
    width: auto;
    padding: 2.7027vw 3.964vw 2.7027vw 5.4054vw;
    margin: 0;
    border-radius: 5px;
    position: relative;
    grid-column: 2 / 3;
    grid-row: 1 / 3;
  }
}
@media (min-width: 900px) {
  .c-feature-box__key {
    width: auto;
    padding: 1.875rem 2.75rem 1.875rem 3.75rem;
  }
}
.c-feature-box__key h4 {
  font-size: 4.8vw;
  color: #80828e;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
  transform: translateY(-8.2vw);
}
@media (min-width: 768px) {
  .c-feature-box__key h4 {
    font-size: 1.8018vw;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: .5em;
    position: absolute;
    top: 50%;
    left: -6.3964vw;
    transform: translateY(-50%) rotate(-90deg);
  }
  .c-feature-box__key h4::before,
  .c-feature-box__key h4::after {
    content: '-';
    display: block;
  }
}
@media (min-width: 900px) {
  .c-feature-box__key h4 {
    font-size: 1.25rem;
    left: -4.375rem;
  }
}

.c-feature-box__key-box {
  margin-bottom: 8vw;
}
.c-feature-box__key-box + .c-feature-box__key-box {
  padding-top: 8vw;
  margin-bottom: 0;
  border-top: 1px solid #fff;
}
@media (min-width: 768px) {
  .c-feature-box__key-box {
    margin-bottom: 2.1622vw;
    display: grid;
    grid-template-columns: 9.3694vw 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 2.1622vw;
  }
  .c-feature-box__key-box + .c-feature-box__key-box {
    padding-top: 2.1622vw;
  }
}
@media (min-width: 900px) {
  .c-feature-box__key-box {
    margin-bottom: 1.5rem;
    grid-template-columns: 6.5rem 1fr;
    column-gap: 1.5rem;
  }
  .c-feature-box__key-box + .c-feature-box__key-box {
    padding-top: 1.5rem;
  }
}


.c-feature-box__key-image {
  width: 27.7333vw;
  margin: 0 auto 3.7333vw;
}
@media (min-width: 768px) {
  .c-feature-box__key-image {
    width: 9.3694vw;
    margin: 0;
    grid-column: 1 / 2;
    grid-row: 1 / 4;
  }
}
@media (min-width: 900px) {
  .c-feature-box__key-image {
    width: 6.5rem;
  }
}
.c-feature-box__key-box h5 {
  font-size: 3.4667vw;
  font-weight: 600;
  line-height: 1.8;
  text-align: center;
}
@media (min-width: 768px) {
  .c-feature-box__key-box h5 {
    font-size: 1.1712vw;
    text-align: left;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }
}
@media (min-width: 900px) {
  .c-feature-box__key-box h5 {
    font-size: 0.8125rem;
  }
}
.c-feature-box__key-box h5 + p {
  margin-bottom: 5.3333vw;
  font-size: 2.6667vw;
  line-height: 1.8;
  text-align: center;
}
@media (min-width: 768px) {
  .c-feature-box__key-box h5 + p {
    margin-bottom: 1.4414vw;
    font-size: 0.9009vw;
    text-align: left;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
}
@media (min-width: 900px) {
  .c-feature-box__key-box h5 + p {
    margin-bottom: 1rem;
    font-size: 0.625rem;
  }
}

.c-feature-box__key-box h5 + p + p {
  margin-bottom: 0;
  font-size: 2.9333vw;
  line-height: 1.8;
}
@media (min-width: 768px) {
  .c-feature-box__key-box h5 + p + p {
    font-size: 0.991vw;
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }
}
@media (min-width: 900px) {
  .c-feature-box__key-box h5 + p + p {
    font-size: 0.6875rem;
  }
}


.p-note-line-up.l-section {
  padding: calc((14 / 375) * 100vw) calc((10 / 375) * 100vw) calc((100 / 375) * 100vw);
  background-color: #fff;
  position: relative;
  overflow: visible;
}
.p-note-line-up .c-section-title {
  width: 100%;
  margin-bottom: 0;
  font-size: 5.8667vw;
  color: #2d3135;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  transform: translateY(-9.0667vw);
}
@media (min-width: 768px) {
  .p-note-line-up.l-section {
    padding-top: 0.991vw;
    padding-bottom: 9.9099vw;
  }
  .p-note-line-up .c-section-title {
    margin-bottom: 1.4545vw;
    font-size: 2.3636vw;
    transform: translateY(-3.4234vw);
  }
}
@media (min-width: 1110px) {
  .p-note-line-up.l-section {
    padding-top: 0.6875rem;
    padding-bottom: 6.875rem;
  }
  .p-note-line-up .c-section-title {
    margin-bottom: 1rem;
    font-size: 1.625rem;
    transform: translateY(-2.375rem);
  }
}

.p-note-line-up .c-text {
  padding-top: calc((7 / 375) * 100vw);
  margin-bottom: 8.6667vw;
  font-size: 4vw;
  line-height: 1.8;
  text-align: center;
}
.p-note-line-up .c-text p:last-of-type {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .p-note-line-up .c-text {
    padding-top: 0;
    margin-bottom: 5.1351vw;
    font-size: 1.4414vw;
  }
}
@media (min-width: 1110px) {
  .p-note-line-up .c-text {
    margin-bottom: 3.5625rem;
    font-size: 1rem;
  }
}


.p-note-line-up .c-grid {
  margin-bottom: 16vw;
  display: grid;
  grid-template-columns: 100%;
  row-gap: calc((22 / 375) * 100vw);
}
@media (min-width: 768px) {
  .p-note-line-up .c-grid {
    margin-bottom: 5.7658vw;
    row-gap: 2.3423vw;
  }
}
@media (min-width: 1110px) {
  .p-note-line-up .c-grid {
    margin-bottom: 4rem;
    row-gap: 1.625rem;
  }
}

.p-note-line-up .c-note-line-up {
  padding-bottom: calc((17 / 375) * 100vw);
  border-radius: 5px;
  border: 1px solid #fff;
  background-color: #fafafa;
  overflow: hidden;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto auto auto auto;
  row-gap: unset;
}
.p-note-line-up .c-note-line-up .c-note-line-up__image {
  margin-bottom: calc((22 / 375) * 100vw);
}
.p-note-line-up .c-note-line-up .c-note-line-up__tags {
  padding: 0 calc((20 / 375) * 100vw);
  margin-bottom: calc((25 / 375) * 100vw);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  column-gap: 2.6667vw;
}
.p-note-line-up .c-note-line-up .c-note-line-up__tags-item {
  height: calc((25 / 375) * 100vw);
  padding: 0 calc((11 / 375) * 100vw) calc((2 / 375) * 100vw);
  border-radius: calc(infinity * 1px);
  border: 1px solid #e1e2ef;
  background-color: #fff;
  font-size: calc((11 / 375) * 100vw);
  color: #626262;
  font-weight: 600;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 768px) {
  .p-note-line-up .c-note-line-up {
    max-width: 56.25rem;
    width: 100%;
    padding-bottom: 0;
    margin: 0 auto;
    grid-template-columns: calc((520 / 900) * 100%) calc((380 / 900) * 100%);
    grid-template-rows: auto;
    /* grid-template-rows: 1fr 5.2252vw 15.5856vw; */
    gap: unset;
  }
  .p-note-line-up .c-note-line-up .c-note-line-up__image {
    margin-bottom: 0;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
  .p-note-line-up .c-note-line-up .c-note-line-up__text {
    padding: calc((34 / 1110) * 100vw) calc((28 / 1110) * 100vw) 0;
    margin-bottom: calc((13 / 1110) * 100vw);
    font-size: 1.2613vw;
    line-height: 1.8;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }
  .p-note-line-up .c-note-line-up .c-note-line-up__tags {
    width: calc(100% - 5.045vw);
    padding: 0;
    margin: 0 auto calc((22 / 1110) * 100vw);
    border-top: none;
    justify-content: flex-start;
    align-items: flex-start;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    column-gap: 0.9009vw;
  }
  .p-note-line-up .c-note-line-up .c-note-line-up__tags-item {
    height: 2.3423vw;
    padding: 0 0.991vw 0.1802vw;
    font-size: 1.0811vw;
  }
  .p-note-line-up .c-note-line-up .c-note-line-up__icon {
    /* grid-column: 2 / 3;
    grid-row: 3 / 4; */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    row-gap: 0.9009vw;
  }
  .p-note-line-up .c-note-line-up .c-note-line-up__icon img {
    width: 100%;
    margin-top: 0;
  }
}
@media (min-width: 1110px) {
  .p-note-line-up .c-note-line-up {
    padding-bottom: 0;
    /* grid-template-rows: 1fr 3.625rem 10.8125rem; */
  }
  .p-note-line-up .c-note-line-up .c-note-line-up__text {
    padding: 2.125rem 1.75rem 0;
    margin-bottom: 0.8125rem;
    font-size: 0.875rem;
  }
  .p-note-line-up .c-note-line-up .c-note-line-up__tags {
    width: calc(100% - 3.5rem);
    margin-bottom: 1.375rem;
    column-gap: 0.625rem;
  }
  .p-note-line-up .c-note-line-up .c-note-line-up__tags-item {
    height: 1.625rem;
    padding: 0 0.6875rem 0.125rem;
    font-size: 0.75rem;
  }
  .p-note-line-up .c-note-line-up .c-note-line-up__icon {
    row-gap: 0.9375rem;
  }
}

.p-note-line-up .c-note-line-up__badge {
  width: calc((39 / 375) * 100vw);
  position: absolute;
  top: calc((88 / 375) * 100vw);
  left: calc((18 / 375) * 100vw);
}
@media (min-width: 768px) {
  .p-note-line-up .c-note-line-up__badge {
    width: calc((39 / 1110) * 100vw);
    top: calc((102 / 1110) * 100vw);
    left: calc((28 / 1110) * 100vw);
  }
}
@media (min-width: 1110px) {
  .p-note-line-up .c-note-line-up__badge {
    width: 2.4375rem;
    top: 6.375rem;
    left: 1.75rem;
  }
}

.p-note-line-up .c-note-line-up .c-note-line-up__tags + .c-grid {
  width: calc(100% - calc((34 / 375) * 100vw));
  padding-top: calc((9 / 375) * 100vw);
  margin: 0 auto;
  border-top: 1px solid rgb(74 79 84 / .1);
  display: grid;
  grid-template-columns: calc((135 / 319) * 100%) calc((146 / 319) * 100%);
  column-gap: calc((38 / 319) * 100%)
}
@media (min-width: 768px) {
  .p-note-line-up .c-note-line-up .c-note-line-up__tags + .c-grid {
    width: calc(100% - 5.045vw);
    padding-top: calc((11 / 1110) * 100vw);
    grid-template-columns: calc((124 / 323) * 100%) calc((186 / 323) * 100%);
    column-gap: calc((29 / 323) * 100%);
  }
}
@media (min-width: 1110px) {
  .p-note-line-up .c-note-line-up .c-note-line-up__tags + .c-grid {
    width: calc(100% - 3.5rem);
    padding-top: 0.6875rem;
    column-gap: 1.8125rem;
  }
}

.p-note-line-up .c-button {
  width: 64.5333vw;
  height: 16vw;
  border: none;
  border-radius: 8vw;
  box-shadow: 1px 4px 18px 0px rgba(0, 0, 0, 0.10);
}
@media (min-width: 768px) {
  .p-note-line-up .c-button {
    width: 22.5225vw;
    height: 5.2252vw;
    border-radius: 2.6126vw;
    font-size: 1.3514vw;
  }
}
@media (min-width: 1110px) {
  .p-note-line-up .c-button {
    width: 15.625rem;
    height: 3.625rem;
    border-radius: 1.8125rem;
    font-size: 0.9375rem;
  }
}
.p-note-line-up .c-button__link {
  padding: 0;
  background: #a0a5c3;
  font-size: 4.26667vw;
  line-height: 1;
  font-weight: 700;
  letter-spacing: normal;
  justify-content: center;
}
@media (min-width: 768px) {
  .p-note-line-up .c-button__link {
    font-size: 1.3514vw;
  }
}
@media (min-width: 1110px) {
  .p-note-line-up .c-button__link {
    font-size: 0.9375rem;
  }
}
.p-note-line-up .c-button__link:link {
  color: var(--white);
}
.p-note-line-up .c-button__link:visited {
  color: var(--white);
}
.p-note-line-up .c-button__link:hover {
  color: var(--white);
}
.p-note-line-up .c-button__link:focus {
  color: var(--white);
}


.p-note-how-to-use.l-section {
  padding-bottom: 24vw;
  /* background: url(../images/note_by_ndot/202507/bg-how-to-use_sp.webp) no-repeat 50% 0 / cover; */
  background-color: #f0f1f9;
  color: #4a5f54;
  overflow: visible;
  position: relative;
  z-index: 1;
}
@media not all and (min-width: 768px) {
  .p-note-how-to-use.l-section {
    padding-right: calc((10 / 385) * 100vw);
    padding-left: calc((10 / 385) * 100vw);
  }
}
@media (min-width: 768px) {
  .p-note-how-to-use.l-section {
    padding-bottom: 9.009vw;
    /* background: url(../images/note_by_ndot/202507/bg-how-to-use_pc.webp) no-repeat 50% 0 / cover; */
  }
}
@media (min-width: 1110px) {
  .p-note-how-to-use.l-section {
    padding-bottom: 6.25rem;
  }
}

.p-note-how-to-use .c-section-title {
  margin-bottom: calc((58 / 375) * 100vw);
  font-size: 5.8667vw;
  color: #2d3135;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  transform: translateY(-3.7333vw);
}
@media (min-width: 768px) {
  .p-note-how-to-use .c-section-title {
    margin-bottom: calc((80 / 1110) * 100vw);
    font-size: 2.3636vw;
    transform: translateY(-1.2613vw);
  }
}
@media (min-width: 1110px) {
  .p-note-how-to-use .c-section-title {
    margin-bottom: 5rem;
    font-size: 1.625rem;
    transform: translateY(-0.875rem);
  }
}

.p-note-how-to-use h3 {
  margin-bottom: calc((7 / 375) * 100vw);
  font-family: var(--font-zen-old-mincho);
  font-size: calc((22 / 375) * 100vw);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
  transform: translateY(-54%);
}
@media (min-width: 768px) {
  .p-note-how-to-use h3 {
    margin-bottom: calc((7 / 1110) * 100vw);
    font-size: calc((26 / 1110) * 100vw);
  }
}
@media (min-width: 1110px) {
  .p-note-how-to-use h3 {
    margin-bottom: 0.4375rem;
    font-size: 1.625rem;
  }
}
.p-note-how-to-use .c-how-to-use-shampoo h3 {
  color: #8187aa;
}
.p-note-how-to-use .c-how-to-use-treatment h3 {
  color: #88acae;
}
@media (min-width: 768px) {
  .p-note-how-to-use .c-how-to-use-treatment h3 {
    margin-bottom: calc((-4 / 1110) * 100vw);
  }
}
@media (min-width: 1110px) {
  .p-note-how-to-use .c-how-to-use-treatment h3 {
    margin-bottom: -0.25rem;
  }
}

.p-note-how-to-use .c-how-to-use-shampoo,
.p-note-how-to-use .c-how-to-use-treatment {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  border-radius: calc((5 / 375) * 100vw);
  background-color: #fff;
}
.p-note-how-to-use .c-how-to-use-shampoo {
  margin-bottom: calc((65 / 375) * 100vw);
}
@media (min-width: 768px) {
  .p-note-how-to-use .c-how-to-use-shampoo,
  .p-note-how-to-use .c-how-to-use-treatment {
    border-radius: calc((5 / 1110) * 100vw);
  }
  .p-note-how-to-use .c-how-to-use-shampoo {
    margin-bottom: calc((60 / 1110) * 100vw);
  }
  .p-note-how-to-use .c-how-to-use-treatment .c-note-how-to-use-box {
    row-gap: calc((13 / 1110) * 100vw);
  }
}
@media (min-width: 1110px) {
  .p-note-how-to-use .c-how-to-use-shampoo,
  .p-note-how-to-use .c-how-to-use-treatment {
    border-radius: 0.3125rem;
  }
  .p-note-how-to-use .c-how-to-use-shampoo {
    margin-bottom: 3.75rem;
  }
  .p-note-how-to-use .c-how-to-use-treatment .c-note-how-to-use-box {
    row-gap: 0.8125rem;
  }
}

.p-note-how-to-use .c-how-to-use-note {
  padding: calc((10 / 375) * 100vw) calc((25 / 375) * 100vw) calc((15 / 375) * 100vw);
  border-radius: 0 0 calc((5 / 375) * 100vw) calc((5 / 375) * 100vw);
  font-family: var(--font-zen-old-mincho);
  font-size: calc((11 / 375) * 100vw);
  color: #2d3135;
  line-height: 1.7;
  font-weight: 700;
}
.p-note-how-to-use .c-how-to-use-note h5 {
  font-size: calc((13 / 375) * 100vw);
  line-height: 2.2;
}
@media (min-width: 768px) {
  .p-note-how-to-use .c-how-to-use-note {
    height: calc((38 / 375) * 100vw);
    padding: calc((10 / 1110) * 100vw) calc((25 / 1110) * 100vw) calc((15 / 1110) * 100vw);
    border-radius: 0 0 calc((5 / 1110) * 100vw) calc((5 / 1110) * 100vw);
    font-size: calc((13 / 1110) * 100vw);
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 1em;
  }
  .p-note-how-to-use .c-how-to-use-note h5 {
    font-size: calc((13 / 1110) * 100vw);
  }
}
@media (min-width: 1110px) {
  .p-note-how-to-use .c-how-to-use-note {
    height: 2.475rem;
    padding: 0.625rem 1.5625rem 0.9375rem;
    border-radius: 0 0 0.3125rem 0.3125rem;
    font-size: 0.81255rem;
  }
  .p-note-how-to-use .c-how-to-use-note h5 {
    font-size: 0.8125rem;
  }
}

.p-note-how-to-use .c-how-to-use-note p {
  margin-bottom: 0;
}
.p-note-how-to-use .c-how-to-use-shampoo .c-how-to-use-note {
  background-color: rgb(129 137 186 / .2);
}
.p-note-how-to-use .c-how-to-use-treatment .c-how-to-use-note {
  background-color: rgb(136 172 174 / .25);
}

.p-note-how-to-use .c-text {
  margin-bottom: 10.6667vw;
  font-size: 4vw;
  line-height: 1.88;
  text-align: center;
}
.p-note-how-to-use .c-text p {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .p-note-how-to-use .c-text {
    margin-bottom: 3.6036vw;
    font-size: 1.4414vw;
  }
}
@media (min-width: 1110px) {
  .p-note-how-to-use .c-text {
    margin-bottom: 2.5rem;
    font-size: 1rem;
  }
}

.c-note-how-to-use-grid {
  width: calc((316 / 375) * 100vw);
  margin: 0 auto calc((10 / 375) * 100vw);
  display: grid;
  row-gap: 6.1333vw;
}
.c-note-how-to-use-grid + .c-note-how-to-use-grid {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .c-note-how-to-use-grid {
    width: 86.2162vw;
    margin-bottom: calc((32 / 1110) * 100vw);
    grid-template-columns: repeat(3, calc((214 / 1110) * 100vw));
    column-gap: calc((100 / 1110) * 100vw);
    row-gap: calc((104 / 1110) * 100vw);
    justify-content: center;
    row-gap: 0;
  }
  .c-note-how-to-use-grid + .c-note-how-to-use-grid {
    /* grid-template-columns: repeat(3, 26.5766vw); */
  }
}
@media (min-width: 1110px) {
  .c-note-how-to-use-grid {
    width: 59.8125rem;
    margin-bottom: 2rem;
    grid-template-columns: repeat(3, 13.375rem);
    column-gap: 6.5rem;
    row-gap: 2.375rem;
  }
  .c-note-how-to-use-grid + .c-note-how-to-use-grid {
    /* grid-template-columns: repeat(3, 18.4375rem); */
  }
}

.c-note-how-to-use-box {
  display: grid;
  grid-template-columns: calc((108 / 295) * 100%) calc((169 / 295) * 100%);
  column-gap: calc((18 / 295) * 100%);
}
.c-note-how-to-use-box.shampoo03 {
  padding: calc((16 / 385) * 100vw) calc((8 / 375) * 100vw) calc((18 / 375) * 100vw) calc((22 / 375) * 100vw);
  margin-bottom: calc((-9 / 375) * 100vw);
  border: 1px solid rgb(160 165 195 / .3);
  border-radius: calc((14 / 375) * 100vw);
  background-color: #f0f1f9;
  position: relative;
  grid-template-columns: calc((164 / 288) * 100%) calc((109 / 288) * 100%);
  column-gap: calc((15 / 288) * 100%);
  align-items: start;
  transform: translateY(calc((-11 / 375) * 100vw));
}
.c-note-how-to-use-box.shampoo03::before {
  width: calc((34 / 375) * 100vw);
  border: 1px solid rgb(160 165 195 / .3);
  background-color: #f0f1f9;
  content: '\0020';
  display: block;
  position: absolute;
  top: calc((-10 / 375) * 100vw);
  left: calc((46 / 375) * 100vw);
  transform: rotate(45deg);
  clip-path: polygon(0 0, calc((12.42 / 375) * 100vw) calc((-8.5 / 375) * 100vw), calc((24.85 / 375) * 100vw) 0, 0 calc((24.85 / 375) * 100vw));
  aspect-ratio: 1;
}
.c-note-how-to-use-box.shampoo03 figcaption {
  display: contents;
}
.c-note-how-to-use-box.shampoo03 h4 {
  margin-bottom: calc((11 / 375) * 100vw);
  font-family: var(--font-zen-old-mincho);
  font-size: calc((18 / 375) * 100vw);
  color: #8187aa;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
.c-note-how-to-use-box.shampoo03 h4 span {
  margin-bottom: calc((10 / 375) * 100vw);
  font-size: calc((11 / 375) * 100vw);
  font-weight: 600;
  display: inline-block;
}
.c-note-how-to-use-box.shampoo03 .c-text {
  margin-bottom: 0;
  font-family: var(--font-zen-old-mincho);
  font-size: calc((12 / 375) * 100vw);
  line-height: 1.7;
  letter-spacing: 0.02em;
  text-align: left;
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.c-note-how-to-use-box.shampoo03 img {
  margin-top: calc((-30 / 375) * 100vw);
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
@media (min-width: 768px) {
  .c-note-how-to-use-box {
    padding-top: 1.0811vw;
    grid-template-columns: 100%;
    row-gap: calc((10 / 1110) * 100vw);
  }
  .c-note-how-to-use-box.shampoo01 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
  .c-note-how-to-use-box.shampoo02 {
    transform: translateX(calc((-56 / 1110) * 100vw));
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }
  .c-note-how-to-use-box.shampoo03 {
    width: calc((406 / 1110) * 100vw);
    padding: calc((26 / 1110) * 100vw) 0 0;
    margin: 0 auto;
    border-radius: 0;
    border-right: none;
    border-bottom: none;
    border-left: none;
    background-color: transparent;
    grid-column: 1 / 4;
    grid-row: 2 / 3;
    transform: translate(calc((-30 / 1110) * 100vw), calc((30 / 1110) * 100vw));
  }
  .c-note-how-to-use-box.shampoo03::before {
    width: calc((34 / 1110) * 100vw);
    background-color: #fff;
    top: 2px;
    left: 47.5%;
    transform: rotate(45deg) translateX(-50%);
    clip-path: polygon(0 0, calc((12.42 / 1110) * 100vw) calc((-8.5 / 1110) * 100vw), calc((24.85 / 1110) * 100vw) 0, 0 calc((24.85 / 1110) * 100vw));
  }
  .c-note-how-to-use-box.shampoo03 h4 {
    margin-bottom: calc((15 / 1110) * 100vw);;
    font-size: calc((18 / 1110) * 100vw);
    text-align: left;
  }
  .c-note-how-to-use-box.shampoo03 h4 span {
    margin-bottom: calc((10 / 1110) * 100vw);
    font-size: calc((11 / 1110) * 100vw);
  }
  .c-note-how-to-use-box.shampoo03 .c-text {
    font-size: calc((12 / 1110) * 100vw);
  }
  .c-note-how-to-use-box.shampoo03 img {
    margin-top: calc((-74 / 1110) * 100vw);
  }
  .c-note-how-to-use-box.shampoo04 {
    transform: translateX(calc((-60/ 1110) * 100vw));
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }

  .c-note-how-to-use-box.treatment02 {
    transform: translateX(calc((-28/ 1110) * 100vw));
  }
  .c-note-how-to-use-box.treatment03 {
    transform: translateX(calc((-53/ 1110) * 100vw));
  }
}
@media (min-width: 1110px) {
  .c-note-how-to-use-box {
    padding-top: 0.75rem;
    row-gap: 0.625rem;
  }
  .c-note-how-to-use-box.shampoo02 {
    transform: translateX(-1.75rem);
  }
  .c-note-how-to-use-box.shampoo03 {
    width: 25.375rem;
    padding-top: 1.625rem;
    transform: translate(-1.875rem, 0);
  }
  .c-note-how-to-use-box.shampoo03::before {
    width: 2.125rem;
    clip-path: polygon(0 0, 0.77625rem -0.55rem, 1.553125rem 0, 0 1.553125rem);
  }
  .c-note-how-to-use-box.shampoo03 h4 {
    margin-bottom: 0.9375rem;
    font-size: 1.125rem;
  }
  .c-note-how-to-use-box.shampoo03 h4 span {
    margin-bottom: 0.625rem;
    font-size: 0.6875rem;
  }
  .c-note-how-to-use-box.shampoo03 .c-text {
    font-size: 0.75rem;
  }
  .c-note-how-to-use-box.shampoo03 img {
    margin-top: -4.625rem;
  }
  .c-note-how-to-use-box.shampoo04 {
    transform: translateX(-3.75rem);
  }
  .c-note-how-to-use-box.treatment02 {
    transform: translateX(-1.875rem);
  }
  .c-note-how-to-use-box.treatment03 {
    transform: translateX(-3.3125rem);
  }
}

.c-note-how-to-use-box img {
  width: 100%;
}
@media (min-width: 768px) {
  .c-note-how-to-use-box img {
    width: calc((166 / 1110) * 100vw);
    margin: 0 auto;
    display: block;
  }
}
@media (min-width: 1110px) {
  .c-note-how-to-use-box img {
    width: 10.375rem;
  }
}

.c-note-how-to-use-box figcaption {
  font-size: calc((12 / 375) * 100vw);
  color: #000;
  line-height: 1.7;
  letter-spacing: 0.02em;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
@media (min-width: 768px) {
  .c-note-how-to-use-box figcaption {
    width: 100%;
    font-size: calc((13 / 1110) * 100vw);
    text-align: center;
    justify-content: center;
  }
}
@media (min-width: 1110px) {
  .c-note-how-to-use-box figcaption {
    font-size: 0.8125rem;
  }
}

@keyframes fadeup {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.js-fadeup {
  transform: translateY(20px);
  opacity: 0;
}
.js-fadeup.is-active {
  animation: 1s fadeup 0s forwards;
}


.c-item-info {
  font-family: var(--font-zen-old-mincho);
  color: #393d41;
  font-wight: 400;
  letter-spacing: 0.02em;
  text-align: center;
}
.c-item-info__name {
  margin-bottom: calc((28 / 375) * 100vw);
  font-size: calc((18 / 375) * 100vw);
  color: #2d3135;
  line-height: 2;
  font-weight: 600;
}
.c-item-info__name span:not(.jpn) {
  letter-spacing: 0.08em;
}
.c-item-info__name .jpn {
  font-size: calc((13/ 375) * 100vw);
  color: #6b7279;
  display: block;
}
.c-item-info__item-name {
  margin-bottom: calc((11 / 375) * 100vw);
  font-size: calc((13 / 375) * 100vw);
  line-height: 1.8;
  font-weight: 700;
}
.c-item-info__price {
  margin-bottom: calc((26 / 375) * 100vw);
  font-size: calc((12 / 375) * 100vw);
  line-height: 1.8;
}
.c-item-info__text {
  margin-bottom: calc((33 / 375) * 100vw);
  font-size: calc((10 / 375) * 100vw);
  line-height: 1.8;
  font-weight: 500;
}
.c-item-info__note {
  padding: calc((3 / 375) * 100vw) calc((16 / 375) * 100vw);
  margin-bottom: calc((40 / 375) * 100vw);
  border: 1px solid rgb(107 113 121 / .5);
  font-family: var(--font-zen-old-mincho);
  font-size: calc((13 / 375) * 100vw);
  color: #1c1c1c;
  line-height: 2;;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 768px) {
  .c-item-info__name {
    margin-bottom: calc((19 / 1110) * 100vw);
    font-size: calc((18 / 1110) * 100vw);
  }
  .c-item-info__name .jpn {
    font-size: calc((13/ 1110) * 100vw);
  }
  .c-item-info__item-name {
    margin-bottom: 0;
    font-size: calc((13 / 1110) * 100vw);
  }
  .c-item-info__price {
    margin-bottom: calc((20 / 1110) * 100vw);
    font-size: calc((12 / 1110) * 100vw);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .c-item-info__text {
    margin-bottom: calc((50 / 1110) * 100vw);
    font-size: calc((10 / 1110) * 100vw);
  }
  .c-item-info__note {
    padding: calc((3 / 1110) * 100vw) calc((16 / 1110) * 100vw);
    margin-bottom: calc((50 / 1110) * 100vw);
    font-size: calc((13 / 1110) * 100vw);
  }
}
@media (min-width: 1110px) {
  .c-item-info__name {
    margin-bottom: 1.1875rem;
    font-size: 1.125rem;
  }
  .c-item-info__name .jpn {
    font-size: 0.8125rem;
  }
  .c-item-info__item-name {
    font-size: 0.8125rem;
  }
  .c-item-info__price {
    margin-bottom: 1.25rem;
    font-size: 0.75rem;
  }
  .c-item-info__text {
    margin-bottom: 3.125rem;
    font-size: 0.625rem;
  }
  .c-item-info__note {
    padding: 0.1875rem 1rem;
    margin-bottom: 3.125rem;
    font-size: 0.8125rem;
  }
}