@charset "UTF-8";
/***
    The new CSS reset - version 1.11.3 (last updated 25.08.2024)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/
/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
    - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
 */
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

a, button {
  cursor: revert;
}

ol, ul, menu, summary {
  list-style: none;
}

ol {
  counter-reset: revert;
}

img {
  max-inline-size: 100%;
  max-block-size: 100%;
}

table {
  border-collapse: collapse;
}

input, textarea {
  -webkit-user-select: auto;
}

textarea {
  white-space: revert;
}

meter {
  -webkit-appearance: revert;
  appearance: revert;
}

:where(pre) {
  all: revert;
  box-sizing: border-box;
}

::placeholder {
  color: unset;
}

:where([hidden]) {
  display: none;
}

:where([contenteditable]:not([contenteditable=false])) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
  -webkit-user-select: auto;
}

:where([draggable=true]) {
  -webkit-user-drag: element;
}

:where(dialog:modal) {
  all: revert;
  box-sizing: border-box;
}

::-webkit-details-marker {
  display: none;
}

:focus-visible {
  outline: 2px solid #005af0; /* プロジェクトの色に合わせて調整 */
  outline-offset: 2px;
}

img, svg, video, canvas {
  font-style: italic;
  display: block;
  height: auto;
  max-width: 100%;
  shape-margin: 0.75rem;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
}

::placeholder {
  color: #757575;
  opacity: 1;
}

a:not([class]) {
  color: var(--color-font);
}
@media (any-hover: hover) {
  a:not([class]):hover {
    opacity: 0.8;
  }
}

b, strong {
  font-weight: bolder;
}

:root {
  --color-font: #1b243f;
  --color-primary: #9a8b38;
  --color-secondary: #3c5aa6;
  --color-tertiary: #7690b9;
  --font-NotoSansJP: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", YuGothic, sans-serif;
  --font-NotoSerifJP: "Noto Serif JP", "Hiragino Mincho Pro", "Yu Mincho", YuMincho, serif;
}

body {
  background: #e8f0f3;
  color: var(--color-font);
  font-family: var(--font-NotoSansJP);
  font-weight: 400;
  line-height: 1;
  margin-inline: auto;
  overflow-wrap: break-word;
  width: 100%;
}
@media screen and (max-width: 768px) {
  body {
    font-size: 3.467vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  body {
    font-size: 1.667vw;
  }
}
@media screen and (min-width: 1080px) {
  body {
    font-size: 18px;
    min-width: 1080px;
  }
}

.u-font-oswald {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-style: 400;
}

.u-font-raleway {
  font-family: "Raleway", sans-serif;
  font-style: normal;
  font-weight: 900;
}

.u-sup {
  font-size: 58.3%;
  vertical-align: super;
}

@media screen and (min-width: 769px) {
  .u-only-sp {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .u-only-pc {
    display: none !important;
  }
}
.u-visually-hidden {
  border-width: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.is-active .u-anim-slide-in--left {
  animation: slideInLeft 0.8s ease-out forwards;
}
.is-active .u-anim-slide-in--right {
  animation: slideInRight 0.8s ease-out forwards;
}
.is-active .u-delay-200 {
  animation-delay: 0.2s;
}
.is-active .u-delay-400 {
  animation-delay: 0.4s;
}
.is-active .u-delay-600 {
  animation-delay: 0.6s;
}
.is-active .u-delay-800 {
  animation-delay: 0.8s;
}
.is-active .u-delay-1000 {
  animation-delay: 1s;
}
.is-active .u-delay-1200 {
  animation-delay: 1.2s;
}
.is-active .u-delay-1400 {
  animation-delay: 1.4s;
}
.is-active .u-delay-1600 {
  animation-delay: 1.6s;
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-200px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(200px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.l-wrapper {
  overflow-x: hidden;
  position: relative;
  width: 100%;
}

@media screen and (min-width: 769px) {
  .l-inner {
    margin-inline: auto;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .l-inner {
    width: 92.593%;
  }
}
@media screen and (min-width: 1080px) {
  .l-inner {
    width: 1000px;
  }
}

.l-header {
  background: url(../images/header_bg.png) 50% 50% repeat #1a1a1a;
  position: fixed;
  width: 100%;
  z-index: 110;
}
@media screen and (max-width: 768px) {
  .l-header {
    background-size: 6.667vw auto;
    box-shadow: 0 1.333vw 1.333vw rgba(0, 12, 15, 0.3);
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .l-header {
    background-size: 4.63vw auto;
    box-shadow: 0 0.926vw 0.926vw rgba(0, 12, 15, 0.3);
  }
}
@media screen and (min-width: 1080px) {
  .l-header {
    box-shadow: 0 10px 10px rgba(0, 12, 15, 0.3);
  }
}

.l-header__inner {
  position: relative;
}
@media screen and (max-width: 768px) {
  .l-header__inner {
    min-height: 17.333vw;
    padding-block-start: 2.667vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .l-header__inner {
    padding-block: 1.481vw;
  }
}
@media screen and (min-width: 1080px) {
  .l-header__inner {
    padding-block: 16px;
  }
}

.l-footer {
  background: #f3f5f8;
}
@media screen and (max-width: 768px) {
  .l-footer {
    padding-block: 5.333vw 6vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .l-footer {
    padding-block: 2.778vw;
  }
}
@media screen and (min-width: 1080px) {
  .l-footer {
    padding-block: 30px;
  }
}

@media screen and (min-width: 769px) {
  .l-footer__inner {
    display: flex;
    justify-content: space-between;
  }
}

.l-footer__nav {
  display: flex;
}
@media screen and (max-width: 768px) {
  .l-footer__nav {
    justify-content: center;
    gap: 0 3.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .l-footer__nav {
    gap: 0 2.778vw;
  }
}
@media screen and (min-width: 1080px) {
  .l-footer__nav {
    gap: 0 30px;
  }
}

@media screen and (max-width: 768px) {
  .l-footer__nav-item {
    line-height: 1.577;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .l-footer__nav-item {
    font-size: 1.481vw;
  }
}
@media screen and (min-width: 1080px) {
  .l-footer__nav-item {
    font-size: 16px;
  }
}
.l-footer__nav-item:not(:first-of-type) {
  border-left: 1px solid #333;
}
@media screen and (max-width: 768px) {
  .l-footer__nav-item:not(:first-of-type) {
    padding-inline-start: 2.667vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .l-footer__nav-item:not(:first-of-type) {
    padding-inline-start: 2.778vw;
  }
}
@media screen and (min-width: 1080px) {
  .l-footer__nav-item:not(:first-of-type) {
    padding-inline-start: 30px;
  }
}

.l-footer__link {
  color: #333;
}
@media (any-hover: hover) {
  .l-footer__link:hover {
    opacity: 0.8;
    text-decoration: underline;
  }
}

@media screen and (max-width: 768px) {
  .l-footer__link-note {
    font-size: 2.667vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .l-footer__link-note {
    font-size: 1.296vw;
  }
}
@media screen and (min-width: 1080px) {
  .l-footer__link-note {
    font-size: 14px;
  }
}

@media screen and (max-width: 768px) {
  .l-footer__copyright {
    margin-block-start: 3.333vw;
    text-align: center;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .l-footer__copyright {
    font-size: 1.667vw;
  }
}
@media screen and (min-width: 1080px) {
  .l-footer__copyright {
    font-size: 18px;
  }
}

.c-overlay {
  background: rgba(0, 0, 0, 0.5);
  display: none;
  height: 100%;
  inset: 0;
  position: fixed;
  width: 100%;
  z-index: 999;
}

.c-alert-popup {
  background: #fff;
  display: none;
  left: 50%;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}
@media screen and (max-width: 768px) {
  .c-alert-popup {
    width: 92vw;
  }
}
@media screen and (min-width: 769px) {
  .c-alert-popup {
    max-width: 90vw;
  }
}

@media screen and (max-width: 768px) {
  .c-alert-popup__inner {
    padding-block: 5%;
    padding-inline: 5%;
  }
}
@media screen and (min-width: 769px) {
  .c-alert-popup__inner {
    padding-block: 2%;
    padding-inline: 2%;
  }
}

@media screen and (max-width: 768px) {
  .c-alert-popup__text {
    font-size: 4vw;
    line-height: 1.6;
  }
}
@media screen and (min-width: 769px) {
  .c-alert-popup__text {
    line-height: 1.8;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-alert-popup__text {
    font-size: 1.481vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-alert-popup__text {
    font-size: 16px;
  }
}

.c-alert-popup__actions {
  display: flex;
}
@media screen and (max-width: 768px) {
  .c-alert-popup__actions {
    gap: 4%;
    margin-block-start: 4%;
  }
}
@media screen and (min-width: 769px) {
  .c-alert-popup__actions {
    gap: 1%;
    margin-block-start: 2%;
  }
}

.c-button {
  background: rgb(240, 240, 240);
  border: 1px solid #000;
  border-radius: 4px;
  color: #000;
  cursor: pointer;
  display: block;
  padding-block: 1.5%;
  padding-inline: 2%;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s, opacity 0.3s;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .c-button {
    font-size: 4vw;
    padding-block: 4%;
    width: 20vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-button {
    font-size: 1.296vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-button {
    font-size: 14px;
  }
}
@media (hover: hover) {
  .c-button:hover {
    background: rgb(220, 220, 220);
  }
}

.c-group {
  background: #fff;
  position: absolute;
  top: 0;
}
@media screen and (max-width: 768px) {
  .c-group {
    border-bottom-left-radius: 2.717vw;
    border-bottom-right-radius: 2.717vw;
    height: 18.667vw;
    left: 2vw;
    padding-block-start: 5.067vw;
    width: 26.667vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-group {
    border-bottom-left-radius: 1.481vw;
    border-bottom-right-radius: 1.481vw;
    height: 8.148vw;
    left: 2.5vw;
    padding-block-start: 0.926vw;
    width: 18.148vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-group {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    height: 88px;
    left: 27px;
    padding-block-start: 10px;
    width: 196px;
  }
}

.c-group__logo {
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .c-group__logo {
    width: 21.867vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-group__logo {
    width: 15.185vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-group__logo {
    width: 164px;
  }
}

@media screen and (min-width: 769px) {
  .c-header__nav {
    align-items: center;
    display: flex;
    flex-direction: row-reverse;
  }
}

@media screen and (max-width: 768px) {
  .c-header-btn {
    margin-block-end: 2.667vw;
    margin-inline-start: 32.4vw;
    width: 46.667vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-header-btn {
    width: 19.815vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-header-btn {
    width: 214px;
  }
}

.c-header-btn__link {
  background: var(--color-primary);
  color: #fff;
  display: block;
  text-align: center;
  position: relative;
}
@media screen and (max-width: 768px) {
  .c-header-btn__link {
    border-radius: 1.333vw;
    padding-inline-end: 2.667vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-header-btn__link {
    border-radius: 0.463vw;
    padding-inline-end: 0.463vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-header-btn__link {
    border-radius: 5px;
    padding-inline-end: 5px;
  }
}
.c-header-btn__link::before, .c-header-btn__link::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.c-header-btn__link::before {
  aspect-ratio: 1/1;
  background: #fff;
  border-radius: 50%;
}
@media screen and (max-width: 768px) {
  .c-header-btn__link::before {
    right: 3.6vw;
    width: 3.067vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-header-btn__link::before {
    right: 0.741vw;
    width: 1.111vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-header-btn__link::before {
    right: 8px;
    width: 12px;
  }
}
.c-header-btn__link::after {
  background: var(--color-font);
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
@media screen and (max-width: 768px) {
  .c-header-btn__link::after {
    height: 1.533vw;
    right: 4.267vw;
    width: 1.173vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-header-btn__link::after {
    height: 0.52vw;
    right: 1.019vw;
    width: 0.433vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-header-btn__link::after {
    height: 6px;
    right: 11px;
    width: 5px;
  }
}
@media (any-hover: hover) {
  .c-header-btn__link:hover {
    background: var(--color-tertiary);
  }
}

.c-header-btn__label {
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .c-header-btn__label {
    font-size: 3.733vw;
    line-height: 3.25;
  }
}
@media screen and (min-width: 769px) {
  .c-header-btn__label {
    line-height: 2.5;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-header-btn__label {
    font-size: 1.481vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-header-btn__label {
    font-size: 16px;
  }
}

@media screen and (max-width: 768px) {
  .c-gnav {
    height: 0;
    opacity: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    transition: height 0.5s linear;
    visibility: hidden;
  }
}
@media screen and (min-width: 769px) {
  .c-gnav {
    display: flex;
  }
}

@media screen and (max-width: 768px) {
  .c-header__nav.is-active .c-gnav {
    height: calc(100vh - 17.333vw);
    height: calc(100dvh - 17.333vw);
    padding-block: 9.333vw;
    opacity: 1;
    right: 0;
    visibility: visible;
  }
}

.c-gnav__item {
  font-weight: 300;
}
@media screen and (max-width: 768px) {
  .c-gnav__item {
    font-size: 4.267vw;
    margin-inline: auto;
    width: 86.667vw;
  }
}
@media screen and (min-width: 769px) {
  .c-gnav__item {
    line-height: 1.5;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-gnav__item {
    font-size: 1.481vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-gnav__item {
    font-size: 16px;
  }
}
@media screen and (max-width: 768px) {
  .c-gnav__item:not(:last-child) {
    border-bottom: 1px solid #fff;
  }
}
@media screen and (min-width: 769px) {
  .c-gnav__item:not(:last-child) {
    border-right: 1px solid #fff;
  }
}

.c-gnav__link {
  color: #fff;
}
@media screen and (max-width: 768px) {
  .c-gnav__link {
    display: block;
    padding-block: 4vw;
    padding-inline: 6vw;
    position: relative;
  }
}
@media screen and (min-width: 769px) {
  .c-gnav__link {
    padding-inline: 1em;
  }
}
@media screen and (max-width: 768px) {
  .c-gnav__link::after {
    background: #fff;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    content: "";
    height: 2.4vw;
    position: absolute;
    right: 4vw;
    top: 50%;
    transform: translateY(-50%);
    width: 2vw;
  }
}
@media (any-hover: hover) {
  .c-gnav__link:hover {
    color: #eddc94;
    text-decoration: underline;
  }
}

@media screen and (max-width: 768px) {
  .c-header__hamburger {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1.733vw;
    height: 17.333vw;
    padding-block-start: 5.333vw;
    position: absolute;
    right: 1.733vw;
    top: 0;
    width: 17.333vw;
  }
}

@media screen and (max-width: 768px) {
  .c-hamburger__line {
    background: #fff;
    display: block;
    height: 2px;
    transition: all 0.3s linear;
    width: 8.667vw;
  }
}

@media screen and (max-width: 768px) {
  .c-hamburger__label {
    bottom: 5.333vw;
    color: #fff;
    font-size: 2.4vw;
    font-weight: 500;
    left: 0;
    letter-spacing: 0.12em;
    position: absolute;
    text-align: center;
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .c-hamburger__label-close {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .c-header__hamburger.is-active .c-hamburger__label-open {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .c-header__hamburger.is-active .c-hamburger__label-close {
    display: inherit;
  }
}
@media screen and (max-width: 768px) {
  .c-header__hamburger.is-active .c-hamburger__line:nth-of-type(1) {
    rotate: 15deg;
    margin-block-start: 1.333vw;
  }
  .c-header__hamburger.is-active .c-hamburger__line:nth-of-type(2) {
    rotate: -15deg;
    margin-block-start: -2.133vw;
  }
}

@media screen and (max-width: 768px) {
  .c-text {
    font-size: 3.733vw;
    line-height: 1.964;
  }
}
@media screen and (min-width: 769px) {
  .c-text {
    line-height: 2;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-text {
    font-size: 1.852vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-text {
    font-size: 20px;
  }
}

.c-movie {
  position: relative;
  z-index: 5;
}
.c-movie::before {
  background: 50% 0/contain no-repeat;
  content: "";
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  .c-movie::before {
    height: 12.867vw;
    width: 12.867vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-movie::before {
    height: 7.407vw;
    width: 7.407vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-movie::before {
    height: 80px;
    width: 80px;
  }
}
@media screen and (max-width: 768px) {
  .c-movie--strength {
    margin-block-start: 7.333vw;
    padding-block-start: 13.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-movie--strength {
    margin-block-start: 2.963vw;
    padding-block-start: 7.407vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-movie--strength {
    margin-block-start: 32px;
    padding-block-start: 80px;
  }
}
.c-movie--strength::before {
  background-image: url(../images/arrow_ash.svg);
  top: 0;
}
@media screen and (max-width: 768px) {
  .c-movie--translucency {
    padding-block-start: 13.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-movie--translucency {
    padding-block-start: 4.444vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-movie--translucency {
    padding-block-start: 48px;
  }
}
.c-movie--translucency::before {
  background-image: url(../images/arrow_navy.svg);
}
@media screen and (max-width: 768px) {
  .c-movie--translucency::before {
    top: 0;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-movie--translucency::before {
    top: -3.241vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-movie--translucency::before {
    top: -35px;
  }
}

.c-movie__title {
  align-items: center;
  background: #1f2a66;
  color: #fff;
  display: flex;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-inline: auto;
  position: relative;
}
@media screen and (max-width: 768px) {
  .c-movie__title {
    border-radius: 4.667vw;
    font-size: 4vw;
    gap: 1.6vw;
    line-height: 2.4;
    padding-inline-start: 9.333vw;
    width: 48vw;
  }
}
@media screen and (min-width: 769px) {
  .c-movie__title {
    line-height: 2.5;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-movie__title {
    border-radius: 2.778vw;
    font-size: 2.222vw;
    gap: 1.111vw;
    padding-inline-start: 4.63vw;
    width: 27.778vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-movie__title {
    border-radius: 30px;
    font-size: 24px;
    gap: 12px;
    padding-inline-start: 50px;
    width: 300px;
  }
}
.c-movie__title::after {
  background: #1f2a66;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: "";
  display: block;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  .c-movie__title::after {
    bottom: -3.067vw;
    height: 3.867vw;
    width: 4.667vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-movie__title::after {
    bottom: -1.574vw;
    height: 1.852vw;
    width: 2.778vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-movie__title::after {
    bottom: -17px;
    height: 20px;
    width: 30px;
  }
}

.c-movie__title-icon {
  background: #fff;
  display: block;
  position: relative;
}
@media screen and (max-width: 768px) {
  .c-movie__title-icon {
    border-radius: 1.467vw;
    height: 4.667vw;
    width: 6.667vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-movie__title-icon {
    border-radius: 0.833vw;
    height: 2.778vw;
    width: 3.889vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-movie__title-icon {
    border-radius: 9px;
    height: 30px;
    width: 42px;
  }
}
.c-movie__title-icon::after {
  background: #1f2a66;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  content: "";
  display: block;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
  .c-movie__title-icon::after {
    height: 2.133vw;
    width: 1.733vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-movie__title-icon::after {
    height: 1.389vw;
    width: 1.111vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-movie__title-icon::after {
    height: 15px;
    width: 12px;
  }
}

.c-movie__container {
  aspect-ratio: 16/9;
  margin-inline: auto;
  position: relative;
}
@media screen and (max-width: 768px) {
  .c-movie__container {
    margin-block-start: 6.933vw;
    width: 85.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-movie__container {
    margin-block-start: 3.981vw;
    width: 59.259vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-movie__container {
    margin-block-start: 43px;
    width: 640px;
  }
}
.c-movie__container iframe, .c-movie__container video {
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.c-movie__text {
  margin-inline: auto;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .c-movie__text {
    margin-block-start: 5.333vw;
    width: 89.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-movie__text {
    margin-block-start: 2.778vw;
    width: 64.815vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-movie__text {
    margin-block-start: 30px;
    width: 700px;
  }
}

.c-movie--strength .c-movie__text {
  color: #fff;
}

.c-recommend__inner {
  position: relative;
}

.c-recommend__label {
  background: url(../images/recommend_bg@2x.png) 0/contain no-repeat;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-align: center;
  text-indent: -0.3em;
}
@media screen and (max-width: 768px) {
  .c-recommend__label {
    font-size: 3.2vw;
    line-height: 1.917;
    width: 38.4vw;
  }
}
@media screen and (min-width: 769px) {
  .c-recommend__label {
    line-height: 1.9;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend__label {
    font-size: 1.852vw;
    width: 22.037vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend__label {
    font-size: 20px;
    width: 238px;
  }
}

.c-recommend__name {
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
}
@media screen and (max-width: 768px) {
  .c-recommend__name {
    font-size: 6.4vw;
    margin-block-start: 4vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend__name {
    font-size: 3.704vw;
    margin-block-start: 2.315vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend__name {
    font-size: 40px;
    margin-block-start: 25px;
  }
}

.c-recommend__name-note {
  font-weight: 700;
  margin-inline-start: -0.5em;
}
@media screen and (max-width: 768px) {
  .c-recommend__name-note {
    font-size: 3.2vw;
    margin-block-start: 2.667vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend__name-note {
    font-size: 1.852vw;
    margin-block-start: 0.926vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend__name-note {
    font-size: 20px;
    margin-block-start: 10px;
  }
}

.c-recommend__list {
  display: flex;
  flex-direction: column;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .c-recommend__list {
    gap: 4vw;
    width: 84vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend__list {
    gap: 1.852vw;
    width: 86.111vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend__list {
    gap: 20px;
    width: 930px;
  }
}

.c-recommend__detail {
  display: flex;
}

.c-recommend__detail-title {
  align-items: center;
  background: var(--color-font);
  color: #fff;
  font-weight: 500;
  display: flex;
  justify-content: center;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .c-recommend__detail-title {
    font-size: 4vw;
    line-height: 1.6;
    padding-block: 4vw;
    width: 26.133vw;
  }
}
@media screen and (min-width: 769px) {
  .c-recommend__detail-title {
    line-height: 1.5;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend__detail-title {
    font-size: 1.852vw;
    padding-block: 0.926vw;
    width: 20.37vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend__detail-title {
    font-size: 20px;
    padding-block: 10px;
    width: 220px;
  }
}

.c-recommend__detail-text {
  align-items: center;
  background: #fff;
  font-weight: 500;
  display: flex;
}
@media screen and (max-width: 768px) {
  .c-recommend__detail-text {
    line-height: 2.038;
    padding-block: 4vw;
    padding-inline: 2.933vw 0;
    width: 57.867vw;
  }
}
@media screen and (min-width: 769px) {
  .c-recommend__detail-text {
    line-height: 1.667;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend__detail-text {
    padding-block: 1.389vw;
    width: 65.741vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend__detail-text {
    padding-block: 15px;
    width: 710px;
  }
}

.c-recommend__btn {
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-inline: auto;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .c-recommend__btn {
    font-size: 4vw;
    line-height: 1.267;
    width: 80vw;
  }
}

.c-recommend__btn-link {
  align-items: center;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  justify-content: center;
  position: relative;
}
@media screen and (max-width: 768px) {
  .c-recommend__btn-link {
    border-radius: 1.887vw;
    height: 16vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend__btn-link {
    border-radius: 0.741vw;
    height: 4.63vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend__btn-link {
    border-radius: 8px;
    height: 50px;
  }
}
.c-recommend__btn-link::after {
  background: #fff;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  content: "";
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .c-recommend__btn-link::after {
    height: 2.167vw;
    right: 4vw;
    width: 1.733vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend__btn-link::after {
    height: 0.926vw;
    right: 1.852vw;
    width: 0.741vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend__btn-link::after {
    height: 10px;
    right: 20px;
    width: 8px;
  }
}
@media (any-hover: hover) {
  .c-recommend__btn-link:hover {
    background: var(--color-font);
  }
}

@media screen and (max-width: 768px) {
  .c-recommend--zen-universal {
    padding-block: 11.333vw 14.667vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend--zen-universal {
    padding-block: 7.87vw 5.093vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend--zen-universal {
    padding-block: 85px 55px;
  }
}
.c-recommend--zen-universal .c-recommend__title {
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .c-recommend--zen-universal .c-recommend__title {
    width: 83.467vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend--zen-universal .c-recommend__title {
    width: 47.037vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend--zen-universal .c-recommend__title {
    width: 508px;
  }
}
@media screen and (max-width: 768px) {
  .c-recommend--zen-universal .c-recommend__image {
    margin-block-start: 6vw;
    margin-inline-start: 6vw;
    width: 89.867vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend--zen-universal .c-recommend__image {
    position: absolute;
    right: -18.981vw;
    top: 18.519vw;
    width: 62.407vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend--zen-universal .c-recommend__image {
    position: absolute;
    right: -205px;
    top: 200px;
    width: 674px;
  }
}
@media screen and (max-width: 768px) {
  .c-recommend--zen-universal .c-recommend__info {
    margin-block-start: 6vw;
    margin-inline-start: 7.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend--zen-universal .c-recommend__info {
    margin-block-start: 12.037vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend--zen-universal .c-recommend__info {
    margin-block-start: 130px;
  }
}
@media screen and (max-width: 768px) {
  .c-recommend--zen-universal .c-recommend__name {
    margin-block-start: 4vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend--zen-universal .c-recommend__name {
    margin-block-start: 2.778vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend--zen-universal .c-recommend__name {
    margin-block-start: 30px;
  }
}
@media screen and (max-width: 768px) {
  .c-recommend--zen-universal .c-recommend__text {
    margin-block-start: 3.333vw;
    width: 85.6vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend--zen-universal .c-recommend__text {
    margin-block-start: 2.315vw;
    width: 46.296vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend--zen-universal .c-recommend__text {
    margin-block-start: 25px;
    width: 500px;
  }
}
@media screen and (max-width: 768px) {
  .c-recommend--zen-universal .c-recommend__list {
    margin-block-start: 9.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend--zen-universal .c-recommend__list {
    margin-block-start: 6.019vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend--zen-universal .c-recommend__list {
    margin-block-start: 65px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend--zen-universal .c-recommend__detail-text {
    padding-inline: 2.778vw 0.926vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend--zen-universal .c-recommend__detail-text {
    padding-inline: 30px 10px;
  }
}
@media screen and (max-width: 768px) {
  .c-recommend--zen-universal .c-recommend__btn {
    margin-block-start: 9.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend--zen-universal .c-recommend__btn {
    margin-block-start: 5.556vw;
    width: 42.593vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend--zen-universal .c-recommend__btn {
    margin-block-start: 60px;
    width: 460px;
  }
}

.c-performance {
  background: #e4e9f1;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .c-performance {
    border-radius: 1.645vw;
    margin-block-start: 10.667vw;
    margin-inline: auto;
    padding-block-end: 6vw;
    width: 89.333vw;
  }
}
@media screen and (min-width: 769px) {
  .c-performance {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    position: relative;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-performance {
    border-radius: 0.96vw;
    margin-block-start: 5.556vw;
    padding-block: 5.556vw 2.315vw;
    padding-inline: 2.315vw 1.389vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-performance {
    border-radius: 10px;
    margin-block-start: 60px;
    padding-block: 60px 25px;
    padding-inline: 25px 15px;
  }
}

.c-performance__title {
  background: var(--color-tertiary);
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .c-performance__title {
    font-size: 4vw;
    line-height: 2.4;
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  .c-performance__title {
    line-height: 2.364;
    left: 0;
    position: absolute;
    top: 0;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-performance__title {
    border-bottom-right-radius: 1.852vw;
    font-size: 2.037vw;
    width: 51.204vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-performance__title {
    border-bottom-right-radius: 20px;
    font-size: 22px;
    width: 553px;
  }
}

@media screen and (max-width: 768px) {
  .c-performance__detail {
    margin-block-start: 4vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-performance__detail {
    margin-block-start: 1.852vw;
    width: 34.259vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-performance__detail {
    padding-block-start: 25px;
    width: 370px;
  }
}

.c-performance__detail-title {
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .c-performance__detail-title {
    margin-inline-start: 2.933vw;
  }
}

@media screen and (max-width: 768px) {
  .c-performance__detail-text {
    margin-block-start: 4.667vw;
    margin-inline-start: 5.067vw;
    width: 81.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-performance__detail-text {
    margin-block-start: 1.852vw;
    margin-inline-start: 0.741vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-performance__detail-text {
    margin-block-start: 20px;
    margin-inline-start: 8px;
  }
}

@media screen and (max-width: 768px) {
  .c-performance__data {
    margin-block-start: 5.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-performance__data {
    width: 52.407vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-performance__data {
    width: 566px;
  }
}

@media screen and (max-width: 768px) {
  .c-performance__graph {
    margin-inline-start: 4.8vw;
    width: 80vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-performance__graph {
    width: 51.759vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-performance__graph {
    width: 559px;
  }
}

@media screen and (max-width: 768px) {
  .c-performance__notes {
    font-size: 2vw;
    line-height: 1.6;
    margin-inline-start: 6vw;
    width: 80vw;
  }
}
@media screen and (min-width: 769px) {
  .c-performance__notes {
    line-height: 1.429;
    margin-inline: auto 0;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-performance__notes {
    font-size: 1.296vw;
    width: 51.852vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-performance__notes {
    font-size: 14px;
    width: 560px;
  }
}

.c-performance__notes-small {
  font-size: 75%;
}

.c-performance__source {
  text-align: right;
}
@media screen and (max-width: 768px) {
  .c-performance__source {
    font-size: 1.96vw;
    margin-block-start: -0.5em;
    margin-inline-start: 6vw;
    width: 80vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-performance__source {
    font-size: 1.296vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-performance__source {
    font-size: 14px;
  }
}

.c-recommend--dwx-43w {
  background: #eaebed;
}
@media screen and (max-width: 768px) {
  .c-recommend--dwx-43w {
    padding-block-end: 15.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend--dwx-43w {
    padding-block-end: 7.87vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend--dwx-43w {
    padding-block-end: 85px;
  }
}
@media screen and (min-width: 769px) {
  .c-recommend--dwx-43w .c-recommend__outer {
    position: relative;
  }
}
@media screen and (min-width: 769px) {
  .c-recommend--dwx-43w .c-recommend__outer::before {
    background: #bcc5ce;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
  }
}
@media screen and (min-width: 769px) {
  .c-recommend--dwx-43w .c-recommend__outer::after {
    background: url(../images/dwx-43w_bg_pc.jpg) 0 0/auto 100% no-repeat;
    content: "";
    display: block;
    height: 100%;
    left: 50%;
    position: absolute;
    top: 0;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend--dwx-43w .c-recommend__outer::after {
    border-bottom-left-radius: 18.519vw;
    transform: translateX(-74.074vw);
    width: 166.667vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend--dwx-43w .c-recommend__outer::after {
    border-bottom-left-radius: 200px;
    transform: translateX(-800px);
    width: 1800px;
  }
}
@media screen and (max-width: 768px) {
  .c-recommend--dwx-43w .c-recommend__inner {
    background: linear-gradient(150deg, rgb(231, 245, 255) 0%, rgb(188, 197, 206) 42.39%);
    border-bottom-left-radius: 14.853vw;
    margin-inline: auto 0;
    padding-block: 10.667vw 12vw;
    width: 94.667vw;
  }
}
@media screen and (min-width: 769px) {
  .c-recommend--dwx-43w .c-recommend__inner {
    position: relative;
    z-index: 5;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend--dwx-43w .c-recommend__inner {
    padding-block: 6.019vw 5.556vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend--dwx-43w .c-recommend__inner {
    padding-block: 65px 60px;
  }
}
.c-recommend--dwx-43w .c-recommend__title {
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .c-recommend--dwx-43w .c-recommend__title {
    width: 56.267vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend--dwx-43w .c-recommend__title {
    width: 69.259vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend--dwx-43w .c-recommend__title {
    width: 748px;
  }
}
@media screen and (min-width: 769px) {
  .c-recommend--dwx-43w .c-recommend__row {
    align-items: flex-start;
    display: flex;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend--dwx-43w .c-recommend__row {
    gap: 2.315vw;
    margin-block-start: 3.704vw;
    margin-inline-start: 4.167vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend--dwx-43w .c-recommend__row {
    gap: 25px;
    margin-block-start: 40px;
    margin-inline-start: 45px;
  }
}
@media screen and (max-width: 768px) {
  .c-recommend--dwx-43w .c-recommend__image {
    margin-block-start: 6vw;
    margin-inline: auto;
    width: 49.867vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend--dwx-43w .c-recommend__image {
    width: 28.704vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend--dwx-43w .c-recommend__image {
    width: 310px;
  }
}
.c-recommend--dwx-43w .c-recommend__info {
  position: relative;
}
@media screen and (max-width: 768px) {
  .c-recommend--dwx-43w .c-recommend__info {
    margin-inline-start: 10vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend--dwx-43w .c-recommend__info {
    margin-block-start: 4.167vw;
    width: 56.944vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend--dwx-43w .c-recommend__info {
    margin-block-start: 45px;
    width: 615px;
  }
}
@media screen and (max-width: 768px) {
  .c-recommend--dwx-43w .c-recommend__name {
    margin-block-start: 2vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend--dwx-43w .c-recommend__name {
    margin-block-start: 0.926vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend--dwx-43w .c-recommend__name {
    margin-block-start: 10px;
  }
}
@media screen and (max-width: 768px) {
  .c-recommend--dwx-43w .c-recommend__text {
    margin-block-start: 5.333vw;
    width: 80vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend--dwx-43w .c-recommend__text {
    margin-block-start: 2.315vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend--dwx-43w .c-recommend__text {
    margin-block-start: 25px;
  }
}
.c-recommend--dwx-43w .c-recommend__type {
  position: absolute;
}
@media screen and (max-width: 768px) {
  .c-recommend--dwx-43w .c-recommend__type {
    left: 41.067vw;
    top: -0.8vw;
    width: 17.6vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend--dwx-43w .c-recommend__type {
    left: 23.611vw;
    top: -0.463vw;
    width: 10.185vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend--dwx-43w .c-recommend__type {
    left: 255px;
    top: -5px;
    width: 110px;
  }
}
@media screen and (max-width: 768px) {
  .c-recommend--dwx-43w .c-recommend__list {
    margin-block-start: 8.667vw;
    margin-inline-start: 6vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend--dwx-43w .c-recommend__list {
    margin-block-start: -0.926vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend--dwx-43w .c-recommend__list {
    margin-block-start: -10px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend--dwx-43w .c-recommend__detail-text {
    padding-inline: 1.852vw 0;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend--dwx-43w .c-recommend__detail-text {
    padding-inline: 20px 0;
  }
}
@media screen and (max-width: 768px) {
  .c-recommend--dwx-43w .c-recommend__btn {
    margin-block-start: 6.667vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .c-recommend--dwx-43w .c-recommend__btn {
    margin-block-start: 5.556vw;
    width: 23.148vw;
  }
}
@media screen and (min-width: 1080px) {
  .c-recommend--dwx-43w .c-recommend__btn {
    margin-block-start: 60px;
    width: 250px;
  }
}

@media screen and (max-width: 768px) {
  .p-main-top {
    background: url(../images/bg_top_sp_01.jpg) 0 0/100% auto no-repeat;
  }
}
@media screen and (min-width: 769px) {
  .p-main-top {
    background: url(../images/bg_top_pc_01.jpg) 50% 0 no-repeat, url(../images/bg_top_pc_02.jpg) 0 0 repeat-x, url(../images/bg_top_pc_03.png) 50% 0 repeat-y;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-main-top {
    background-size: auto 185.185vw, auto 185.185vw, 129.63vw auto;
  }
}

@media screen and (max-width: 768px) {
  .p-kv {
    min-height: 200vw;
    padding-block-start: 28.667vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-kv {
    min-height: 78.704vw;
    padding-block-start: 16.204vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-kv {
    min-height: 850px;
    padding-block-start: 175px;
  }
}

.p-kv__inner {
  position: relative;
}

@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-kv__top {
    width: 51.296vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-kv__top {
    width: 554px;
  }
}

.p-kv__copy {
  opacity: 0;
  transform: translateX(-200px);
}

@media screen and (max-width: 768px) {
  .p-kv__copy-lead {
    margin-inline-start: 10.933vw;
    width: 53.2vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-kv__copy-lead {
    margin-inline: auto;
    width: 39.074vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-kv__copy-lead {
    margin-inline: auto;
    width: 422px;
  }
}

@media screen and (max-width: 768px) {
  .p-kv__copy-main {
    margin-block-start: 2vw;
    margin-inline-start: 10.4vw;
    width: 53.867vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-kv__copy-main {
    margin-block-start: 1.389vw;
    margin-inline: auto;
    width: 39.352vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-kv__copy-main {
    margin-block-start: 15px;
    margin-inline: auto;
    width: 425px;
  }
}

.p-kv__manufacturer {
  align-items: center;
  background: #e8f0f3;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 5;
}
@media screen and (max-width: 768px) {
  .p-kv__manufacturer {
    border-radius: 2.577vw;
    gap: 4vw;
    height: 9.333vw;
    margin-block-start: 74.667vw;
    margin-inline: auto;
    width: 89.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-kv__manufacturer {
    border-radius: 1.481vw;
    gap: 2.407vw;
    height: 5.37vw;
    margin-block-start: 3.241vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-kv__manufacturer {
    border-radius: 16px;
    gap: 26px;
    height: 58px;
    margin-block-start: 35px;
  }
}

@media screen and (max-width: 768px) {
  .p-kv__manufacturer-item--mitsuichemicals {
    width: 27.867vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-kv__manufacturer-item--mitsuichemicals {
    width: 16.019vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-kv__manufacturer-item--mitsuichemicals {
    width: 173px;
  }
}
@media screen and (max-width: 768px) {
  .p-kv__manufacturer-item--sunmedical {
    width: 25.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-kv__manufacturer-item--sunmedical {
    width: 14.537vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-kv__manufacturer-item--sunmedical {
    width: 157px;
  }
}
@media screen and (max-width: 768px) {
  .p-kv__manufacturer-item--kulzer {
    width: 20.8vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-kv__manufacturer-item--kulzer {
    width: 11.944vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-kv__manufacturer-item--kulzer {
    width: 129px;
  }
}

.p-kv__badge {
  align-items: center;
  aspect-ratio: 1/1;
  background: url(../images/kv_badge_bg.jpg) 0/cover no-repeat;
  border-radius: 100vw;
  display: flex;
  justify-content: center;
  position: absolute;
  opacity: 0;
  transform: translateX(200px);
}
@media screen and (max-width: 768px) {
  .p-kv__badge {
    right: 7.333vw;
    top: 16vw;
    width: 28vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-kv__badge {
    right: -2.315vw;
    top: -4.63vw;
    width: 19.444vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-kv__badge {
    right: -25px;
    top: -50px;
    width: 210px;
  }
}

.p-kv__badge-text {
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .p-kv__badge-text {
    font-size: 3.733vw;
    line-height: 1.214;
  }
}
@media screen and (min-width: 769px) {
  .p-kv__badge-text {
    line-height: 1.231;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-kv__badge-text {
    font-size: 2.558vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-kv__badge-text {
    font-size: 27.63px;
  }
}

.p-kv__visual {
  position: absolute;
  opacity: 0;
  transform: translateX(200px);
}
@media screen and (max-width: 768px) {
  .p-kv__visual {
    height: 83.467vw;
    left: 2.667vw;
    top: 35.333vw;
    width: 94.667vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-kv__visual {
    height: 36.852vw;
    right: 3.241vw;
    top: 7.778vw;
    width: 41.667vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-kv__visual {
    height: 398px;
    right: 35px;
    top: 84px;
    width: 450px;
  }
}

.p-kv__visual-image {
  position: absolute;
}
@media screen and (max-width: 768px) {
  .p-kv__visual-image {
    width: 44vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-kv__visual-image {
    width: 19.352vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-kv__visual-image {
    width: 209px;
  }
}
.p-kv__visual-image:nth-of-type(1) {
  left: 0;
  top: 0;
}
.p-kv__visual-image:nth-of-type(2) {
  top: 0;
}
@media screen and (max-width: 768px) {
  .p-kv__visual-image:nth-of-type(2) {
    right: 15.467vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-kv__visual-image:nth-of-type(2) {
    right: 6.944vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-kv__visual-image:nth-of-type(2) {
    right: 75px;
  }
}
.p-kv__visual-image:nth-of-type(3) {
  bottom: 0;
}
@media screen and (max-width: 768px) {
  .p-kv__visual-image:nth-of-type(3) {
    left: 16.667vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-kv__visual-image:nth-of-type(3) {
    left: 7.13vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-kv__visual-image:nth-of-type(3) {
    left: 77px;
  }
}
.p-kv__visual-image:nth-of-type(4) {
  bottom: 0;
  right: 0;
}

.p-kv__detail {
  display: grid;
}
@media screen and (max-width: 768px) {
  .p-kv__detail {
    gap: 4.667vw 0;
    grid-template-columns: 32.667vw 57.333vw;
    grid-template-rows: 22vw 7.2vw;
    margin-block-start: 8.667vw;
    margin-inline-start: 6.667vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-kv__detail {
    grid-template-columns: 17.593vw 56.481vw;
    grid-template-rows: 6.944vw 4.352vw;
    margin-block-start: 5.556vw;
    margin-inline-start: 8.796vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-kv__detail {
    grid-template-columns: 190px 610px;
    grid-template-rows: 75px 47px;
    margin-block-start: 60px;
    margin-inline-start: 95px;
  }
}

@media screen and (max-width: 768px) {
  .p-kv__logo {
    grid-area: 1/1/2/2;
    padding-inline-start: 1.733vw;
  }
}
@media screen and (min-width: 769px) {
  .p-kv__logo {
    grid-area: 1/1/3/2;
  }
}

@media screen and (max-width: 768px) {
  .p-kv__logo-image {
    width: 27.733vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-kv__logo-image {
    width: 15.648vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-kv__logo-image {
    width: 169px;
  }
}

.p-kv__body {
  color: #fff;
  letter-spacing: 0.02em;
}
@media screen and (max-width: 768px) {
  .p-kv__body {
    font-size: 6.533vw;
    grid-area: 1/2/2/3;
  }
}
@media screen and (min-width: 769px) {
  .p-kv__body {
    font-weight: 700;
    grid-area: 1/2/2/3;
    letter-spacing: 0.02em;
    line-height: 1.156;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-kv__body {
    font-size: 2.963vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-kv__body {
    font-size: 32px;
  }
}

.p-kv__category {
  font-size: 70%;
}

@media screen and (max-width: 768px) {
  .p-kv__title {
    margin-block-start: 0.1em;
    line-height: 1.143;
  }
}

.p-kv__feature-list {
  display: flex;
}
@media screen and (max-width: 768px) {
  .p-kv__feature-list {
    gap: 0.933vw;
    grid-area: 2/1/3/3;
  }
}
@media screen and (min-width: 769px) {
  .p-kv__feature-list {
    grid-area: 2/2/3/3;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-kv__feature-list {
    gap: 0.556vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-kv__feature-list {
    gap: 6px;
  }
}

.p-kv__features-item {
  background: #fff;
  color: var(--color-secondary);
  font-weight: 500;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .p-kv__features-item {
    border-radius: 2.44vw;
    font-size: 3.733vw;
    line-height: 1.929;
    padding-inline: 2.8vw;
  }
}
@media screen and (min-width: 769px) {
  .p-kv__features-item {
    letter-spacing: 0.04em;
    line-height: 2.136;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-kv__features-item {
    border-radius: 1.481vw;
    font-size: 2.037vw;
    padding-inline: 2.315vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-kv__features-item {
    border-radius: 16px;
    font-size: 22px;
    padding-inline: 25px;
  }
}

@media screen and (max-width: 768px) {
  .p-about {
    min-height: 255.333vw;
    padding-block: 10vw 13.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-about {
    min-height: 80.556vw;
    padding-block: 4.167vw 12.037vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-about {
    min-height: 870px;
    padding-block: 45px 130px;
  }
}

.p-about__lead {
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-about__lead {
    width: 83.6vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-about__lead {
    width: 61.111vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-about__lead {
    width: 660px;
  }
}

.p-about__catch {
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-about__catch {
    margin-block-start: 4vw;
    width: 88.267vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-about__catch {
    margin-block-start: 2.222vw;
    width: 52.315vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-about__catch {
    margin-block-start: 24px;
    width: 565px;
  }
}

.p-about__title {
  border: solid #fff;
  border-width: 1px 0;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-about__title {
    margin-block-start: 7.2vw;
    padding-block: 2vw;
    width: 89.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-about__title {
    margin-block-start: 4.444vw;
    padding-block: 1.852vw;
    width: 76.852vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-about__title {
    margin-block-start: 48px;
    padding-block: 20px;
    width: 830px;
  }
}

.p-about__title-image {
  display: block;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-about__title-image {
    width: 87.467vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-about__title-image {
    width: 51.852vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-about__title-image {
    width: 560px;
  }
}

@media screen and (min-width: 769px) {
  .p-about__content {
    position: relative;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-about__content {
    margin-block-start: 2.778vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-about__content {
    margin-block-start: 30px;
  }
}

@media screen and (max-width: 768px) {
  .p-about__image {
    margin-block-start: 2.133vw;
    margin-inline: auto;
    width: 79.2vw;
  }
}
@media screen and (min-width: 769px) {
  .p-about__image {
    position: absolute;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-about__image {
    left: -0.926vw;
    top: -4.167vw;
    width: 45.833vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-about__image {
    left: -10px;
    top: -45px;
    width: 495px;
  }
}

@media screen and (max-width: 768px) {
  .p-about__text-wrap {
    margin-inline: auto;
    width: 89.333vw;
  }
}
@media screen and (min-width: 769px) {
  .p-about__text-wrap {
    margin-inline: auto 0;
    width: 50%;
  }
}

.p-about__text {
  color: #fff;
}
@media screen and (max-width: 768px) {
  .p-about__text {
    font-size: 3.733vw;
    line-height: 2.071;
    text-align: center;
  }
}
@media screen and (min-width: 769px) {
  .p-about__text {
    line-height: 2;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-about__text {
    font-size: 1.852vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-about__text {
    font-size: 20px;
  }
}
.p-about__text + .p-about__text {
  margin-block-start: 1em;
}

.p-about__manufacturer {
  align-items: center;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .p-about__manufacturer {
    flex-wrap: wrap;
    gap: 4vw 6.667vw;
    margin-block-start: 12.667vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-about__manufacturer {
    gap: 1.852vw;
    margin-block-start: 3.333vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-about__manufacturer {
    gap: 20px;
    margin-block-start: 36px;
  }
}

@media screen and (max-width: 768px) {
  .p-about__manufacturer-item--group {
    margin-block-end: 2.667vw;
    width: 52.4vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-about__manufacturer-item--group {
    width: 21.574vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-about__manufacturer-item--group {
    width: 233px;
  }
}
@media screen and (max-width: 768px) {
  .p-about__manufacturer-item--mitsuichemicals {
    width: 43.2vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-about__manufacturer-item--mitsuichemicals {
    width: 20.833vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-about__manufacturer-item--mitsuichemicals {
    width: 225px;
  }
}
@media screen and (max-width: 768px) {
  .p-about__manufacturer-item--sunmedical {
    width: 39.2vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-about__manufacturer-item--sunmedical {
    margin-inline-start: 2.037vw;
    width: 18.889vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-about__manufacturer-item--sunmedical {
    margin-inline-start: 22px;
    width: 204px;
  }
}
@media screen and (max-width: 768px) {
  .p-about__manufacturer-item--kulzer {
    width: 32.267vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-about__manufacturer-item--kulzer {
    margin-inline-start: 2.037vw;
    width: 15.556vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-about__manufacturer-item--kulzer {
    margin-inline-start: 22px;
    width: 168px;
  }
}

@media screen and (max-width: 768px) {
  .p-monomer {
    padding-block-start: 17.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-monomer {
    padding-block-start: 6.481vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-monomer {
    padding-block-start: 70px;
  }
}

.p-monomer__title {
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-monomer__title {
    width: 74.933vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-monomer__title {
    width: 43.333vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-monomer__title {
    width: 468px;
  }
}

.p-monomer__text {
  text-align: center;
}
@media screen and (max-width: 768px) {
  .p-monomer__text {
    margin-block-start: 7.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-monomer__text {
    margin-block-start: 2.315vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-monomer__text {
    margin-block-start: 25px;
  }
}

.p-monomer__list {
  display: flex;
}
@media screen and (max-width: 768px) {
  .p-monomer__list {
    flex-direction: column;
    gap: 24.667vw;
    margin-block-start: 14vw;
    margin-inline: auto;
    width: 76.4vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-monomer__list {
    gap: 6.944vw;
    margin-block-start: 9.259vw;
    margin-inline-start: 6.481vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-monomer__list {
    gap: 75px;
    margin-block-start: 100px;
    margin-inline-start: 70px;
  }
}

.p-monomer__list-item {
  position: relative;
}

.p-monomer__list-title {
  align-items: center;
  color: #fff;
  display: flex;
  font-weight: 500;
  font-feature-settings: "palt";
  letter-spacing: 0.04em;
  justify-content: center;
  position: absolute;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .p-monomer__list-title {
    background: url(../images/monomer_bg_sp.png) 0/contain no-repeat;
    height: 24.667vw;
    line-height: 1.077;
    width: 24.667vw;
  }
}
@media screen and (min-width: 769px) {
  .p-monomer__list-title {
    background: url(../images/monomer_bg_pc.png) 0/contain no-repeat;
    line-height: 1.16;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-monomer__list-title {
    font-size: 2.315vw;
    height: 20vw;
    top: -9.259vw;
    width: 20vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-monomer__list-title {
    font-size: 25px;
    height: 216px;
    top: -100px;
    width: 216px;
  }
}

.p-monomer__list-image {
  position: relative;
  z-index: 5;
}

@media screen and (max-width: 768px) {
  .p-monomer__list-text {
    line-height: 2.154;
  }
}
@media screen and (min-width: 769px) {
  .p-monomer__list-text {
    line-height: 1.667;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-monomer__list-text {
    margin-block-start: 2.778vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-monomer__list-text {
    margin-block-start: 30px;
  }
}

@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-monomer__list-item--contain {
    width: 31.944vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-monomer__list-item--contain {
    width: 345px;
  }
}
@media screen and (max-width: 768px) {
  .p-monomer__list-item--contain .p-monomer__list-title {
    left: 4vw;
    padding-block-start: 2vw;
    padding-inline-end: 0.667vw;
    top: -12.667vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-monomer__list-item--contain .p-monomer__list-title {
    left: -2.778vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-monomer__list-item--contain .p-monomer__list-title {
    left: -30px;
  }
}
@media screen and (max-width: 768px) {
  .p-monomer__list-item--contain .p-monomer__list-image {
    margin-inline-start: 23.333vw;
    width: 40vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-monomer__list-item--contain .p-monomer__list-image {
    margin-inline-start: 13.889vw;
    width: 13.889vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-monomer__list-item--contain .p-monomer__list-image {
    margin-inline-start: 150px;
    width: 150px;
  }
}
@media screen and (max-width: 768px) {
  .p-monomer__list-item--contain .p-monomer__list-text {
    margin-block-start: 4vw;
  }
}

@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-monomer__list-item--filler {
    width: 38.889vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-monomer__list-item--filler {
    width: 420px;
  }
}
.p-monomer__list-item--filler::before {
  aspect-ratio: 1/1;
  background: url(../images/monomer_cross.svg) 0/contain no-repeat;
  content: "";
  display: block;
  position: absolute;
}
@media screen and (max-width: 768px) {
  .p-monomer__list-item--filler::before {
    left: 32.667vw;
    top: -18vw;
    width: 9.6vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-monomer__list-item--filler::before {
    left: -7.407vw;
    top: 4.63vw;
    width: 5.556vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-monomer__list-item--filler::before {
    left: -80px;
    top: 50px;
    width: 60px;
  }
}
@media screen and (max-width: 768px) {
  .p-monomer__list-item--filler .p-monomer__list-title {
    left: -4vw;
    top: -14vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-monomer__list-item--filler .p-monomer__list-title {
    right: -7.222vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-monomer__list-item--filler .p-monomer__list-title {
    right: -78px;
  }
}
@media screen and (max-width: 768px) {
  .p-monomer__list-item--filler .p-monomer__list-image {
    margin-inline-start: 14vw;
    width: 60.267vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-monomer__list-item--filler .p-monomer__list-image {
    width: 31.667vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-monomer__list-item--filler .p-monomer__list-image {
    width: 342px;
  }
}
@media screen and (max-width: 768px) {
  .p-monomer__list-item--filler .p-monomer__list-text {
    margin-block-start: 5.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-monomer__list-item--filler .p-monomer__list-text {
    margin-inline: auto;
    width: 30.556vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-monomer__list-item--filler .p-monomer__list-text {
    margin-inline: auto;
    width: 330px;
  }
}

@media screen and (max-width: 768px) {
  .p-char {
    margin-block-start: 15.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-char {
    margin-block-start: 4.63vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-char {
    margin-block-start: 50px;
  }
}

.p-char__title {
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-char__title {
    width: 76.933vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-char__title {
    width: 53.426vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-char__title {
    width: 577px;
  }
}

.p-char__list {
  display: flex;
}
@media screen and (max-width: 768px) {
  .p-char__list {
    flex-direction: column;
    gap: 4vw;
    margin-block-start: 6vw;
    margin-inline: auto;
    width: 89.333vw;
  }
}
@media screen and (min-width: 769px) {
  .p-char__list {
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-char__list {
    gap: 1.852vw;
    margin-block-start: 2.778vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-char__list {
    gap: 20px;
    margin-block-start: 30px;
  }
}

.p-char__item {
  background: linear-gradient(90deg, rgb(239, 248, 253) 0%, rgb(234, 246, 252) 23.26%, rgb(221, 241, 250) 49.63%, rgb(206, 236, 247) 68.72%);
  display: grid;
  position: relative;
  z-index: 5;
}
@media screen and (max-width: 768px) {
  .p-char__item {
    border-radius: 4vw;
    gap: 2.667vw 1.333vw;
    grid-template-columns: 22.133vw 54.533vw;
    grid-template-rows: 23.067vw auto;
    min-height: 55.6vw;
    padding-block: 4vw;
    padding-inline: 6.4vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-char__item {
    border-radius: 1.852vw;
    gap: 0.926vw 1.852vw;
    grid-template-columns: 10.185vw 25.463vw;
    grid-template-rows: 10.648vw auto;
    min-height: 25.926vw;
    padding-block: 2.037vw;
    padding-inline: 2.778vw 0.926vw;
    width: 41.667vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-char__item {
    border-radius: 20px;
    gap: 10px 20px;
    grid-template-columns: 110px 275px;
    grid-template-rows: 115px auto;
    min-height: 280px;
    padding-block: 22px;
    padding-inline: 30px 10px;
    width: 450px;
  }
}
@media screen and (max-width: 768px) {
  .p-char__item:nth-child(1) {
    order: 1;
  }
  .p-char__item:nth-child(2) {
    order: 5;
  }
  .p-char__item:nth-child(3) {
    order: 2;
  }
  .p-char__item:nth-child(4) {
    order: 4;
  }
  .p-char__item:nth-child(5) {
    order: 3;
  }
}

.p-char__icon {
  grid-area: 1/1/2/2;
}

.p-char__heading {
  align-self: center;
  grid-area: 1/2/2/3;
}

.p-char__heading-en {
  color: #666;
  display: block;
  letter-spacing: 0.06em;
}
@media screen and (max-width: 768px) {
  .p-char__heading-en {
    font-size: 8vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-char__heading-en {
    font-size: 3.704vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-char__heading-en {
    font-size: 40px;
  }
}
.p-char__heading-en::first-letter {
  color: #00a0e9;
}

.p-char__heading-jp {
  font-weight: 500;
  display: block;
  margin-block-start: 0.35em;
}
@media screen and (max-width: 768px) {
  .p-char__heading-jp {
    font-size: 4.533vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-char__heading-jp {
    font-size: 2.13vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-char__heading-jp {
    font-size: 23px;
  }
}

.p-char__text {
  grid-area: 2/1/3/3;
}
@media screen and (max-width: 768px) {
  .p-char__text {
    line-height: 2.038;
  }
}
@media screen and (min-width: 769px) {
  .p-char__text {
    line-height: 1.667;
  }
}

@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-char__item--absorption .p-char__text {
    padding-inline-end: 4.63vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-char__item--absorption .p-char__text {
    padding-inline-end: 50px;
  }
}

.p-char__item--refraction .p-char__heading-en {
  letter-spacing: 0em;
}
@media screen and (max-width: 768px) {
  .p-char__item--refraction .p-char__heading-en {
    font-size: 6.347vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-char__item--refraction .p-char__heading-en {
    font-size: 2.963vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-char__item--refraction .p-char__heading-en {
    font-size: 32px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-char__item--refraction .p-char__text {
    padding-inline-end: 4.167vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-char__item--refraction .p-char__text {
    padding-inline-end: 45px;
  }
}

@media screen and (max-width: 768px) {
  .p-creatly {
    background: url(../images/creatly_bg_sp.jpg) 0 0/cover no-repeat;
    height: 169.6vw;
    margin-block-start: -2.933vw;
    padding-block-start: 28vw;
  }
}
@media screen and (min-width: 769px) {
  .p-creatly {
    background: url(../images/creatly_bg_pc_01.jpg) 50% 0/auto 100% no-repeat, url(../images/creatly_bg_pc_02.jpg) 50% 0/auto 100% repeat-x;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-creatly {
    height: 130.185vw;
    margin-block-start: -21.296vw;
    padding-block-start: 25.926vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-creatly {
    height: 1406px;
    margin-block-start: -230px;
    padding-block-start: 280px;
  }
}

.p-creatly__inner {
  background: url(../images/arrow_navy.svg) no-repeat;
  position: relative;
}
@media screen and (max-width: 768px) {
  .p-creatly__inner {
    background-position: 50% 2.4vw;
    background-size: 17.333vw auto;
    padding-block-start: 23.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-creatly__inner {
    background-position: 50% 5.556vw;
    background-size: 10.093vw auto;
    padding-block-start: 15.926vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-creatly__inner {
    background-position: 50% 60px;
    background-size: 109px auto;
    padding-block-start: 172px;
  }
}

.p-creatly__image {
  position: absolute;
}
@media screen and (max-width: 768px) {
  .p-creatly__image {
    right: 0;
    top: -6vw;
    width: 37.867vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-creatly__image {
    left: 76.852vw;
    top: 38.426vw;
    width: 61.481vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-creatly__image {
    left: 830px;
    top: 415px;
    width: 664px;
  }
}

.p-creatly__title {
  margin-inline: auto;
  position: relative;
  z-index: 5;
}
@media screen and (max-width: 768px) {
  .p-creatly__title {
    width: 73.6vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-creatly__title {
    width: 42.778vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-creatly__title {
    width: 462px;
  }
}

.p-creatly__table {
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-creatly__table {
    margin-block-start: 6.667vw;
    width: 100%;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-creatly__table {
    margin-block-start: 3.241vw;
    width: 76.296vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-creatly__table {
    margin-block-start: 35px;
    width: 824px;
  }
}

.p-feature__inner {
  position: relative;
}

.p-feature__header {
  align-items: center;
  display: flex;
}
@media screen and (max-width: 768px) {
  .p-feature__header {
    gap: 4.267vw;
    height: 29.333vw;
    padding-block-start: 0.667vw;
    width: 94.667vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-feature__header {
    gap: 3.889vw;
    height: 12.963vw;
    padding-block-start: 0.463vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-feature__header {
    gap: 42px;
    height: 140px;
    padding-block-start: 5px;
  }
}

.p-feature__header-num {
  position: relative;
  z-index: 5;
}
@media screen and (max-width: 768px) {
  .p-feature__header-num {
    height: 14vw;
    margin-block-start: -2vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-feature__header-num {
    height: 7.87vw;
    margin-block-start: -0.926vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-feature__header-num {
    height: 85px;
    margin-block-start: -10px;
  }
}
.p-feature__header-num img {
  height: 100%;
  width: auto;
}

.p-feature__header-title {
  position: relative;
  z-index: 5;
}
@media screen and (max-width: 768px) {
  .p-feature__header-title {
    height: 10.4vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-feature__header-title {
    height: 6.019vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-feature__header-title {
    height: 65px;
  }
}
.p-feature__header-title img {
  height: 100%;
  width: auto;
}

.p-feature__header-list {
  display: flex;
  position: relative;
  z-index: 5;
}

@media screen and (max-width: 768px) {
  .p-feature--aesthetics {
    background: url(../images/aesthetics_bg_sp.jpg) no-repeat;
    background-position: 0 5.333vw;
    background-size: 100% auto;
    margin-block-start: -10.667vw;
    padding-block-start: 26.667vw;
  }
}
@media screen and (min-width: 769px) {
  .p-feature--aesthetics {
    background: url(../images/aesthetics_bg_pc.jpg) 50% 0 no-repeat;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-feature--aesthetics {
    background-size: 185.185vw auto;
    margin-block-start: -9.259vw;
    padding-block-start: 9.259vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-feature--aesthetics {
    margin-block-start: -100px;
    padding-block-start: 100px;
  }
}
@media screen and (max-width: 768px) {
  .p-feature--aesthetics .p-feature__inner {
    padding-block: 1.067vw 14.133vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-feature--aesthetics .p-feature__inner {
    padding-block: 9.259vw 12.963vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-feature--aesthetics .p-feature__inner {
    padding-block: 100px 140px;
  }
}
.p-feature--aesthetics .p-feature__header {
  position: absolute;
}
@media screen and (max-width: 768px) {
  .p-feature--aesthetics .p-feature__header {
    background: url(../images/feature_header_bg_sp_01.jpg) 0 0/cover no-repeat;
    border-bottom-right-radius: 5.733vw;
    border-top-right-radius: 5.733vw;
    left: 0;
    padding-inline-start: 14.933vw;
    top: -24.8vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-feature--aesthetics .p-feature__header {
    padding-inline-start: 10.37vw;
    top: -12.963vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-feature--aesthetics .p-feature__header {
    padding-inline-start: 112px;
    top: -140px;
  }
}
@media screen and (min-width: 769px) {
  .p-feature--aesthetics .p-feature__header::before {
    background: url(../images/feature_header_bg_pc_01.jpg) 0 0/cover no-repeat;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
  }
}
@media screen and (min-width: 769px) and (min-width: 769px) and (max-width: 1079px) {
  .p-feature--aesthetics .p-feature__header::before {
    border-bottom-right-radius: 3.704vw;
    border-top-right-radius: 3.704vw;
    left: -46.296vw;
    width: 148.148vw;
  }
}
@media screen and (min-width: 769px) and (min-width: 1080px) {
  .p-feature--aesthetics .p-feature__header::before {
    border-bottom-right-radius: 40px;
    border-top-right-radius: 40px;
    left: -500px;
    width: 1600px;
  }
}
@media screen and (max-width: 768px) {
  .p-feature--aesthetics .p-feature__header-list {
    flex-direction: column;
    gap: 1.333vw;
    margin-inline-start: -1.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-feature--aesthetics .p-feature__header-list {
    gap: 0.926vw;
    margin-inline-start: 0.741vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-feature--aesthetics .p-feature__header-list {
    gap: 10px;
    margin-inline-start: 8px;
  }
}
.p-feature--aesthetics .p-feature__header-item {
  background: #a19600;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .p-feature--aesthetics .p-feature__header-item {
    border-radius: 1.44vw;
    font-size: 4vw;
    line-height: 1.8;
    padding-inline: 2.667vw;
  }
}
@media screen and (min-width: 769px) {
  .p-feature--aesthetics .p-feature__header-item {
    line-height: 1.818;
    padding-inline: 0.68em;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-feature--aesthetics .p-feature__header-item {
    border-radius: 0.741vw;
    font-size: 2.037vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-feature--aesthetics .p-feature__header-item {
    border-radius: 8px;
    font-size: 22px;
  }
}

.p-aesthetics-section {
  position: relative;
}
@media screen and (max-width: 768px) {
  .p-aesthetics-section {
    margin-inline: auto;
    width: 89.333vw;
  }
}

.p-aesthetics-section__title {
  position: absolute;
}
@media screen and (max-width: 768px) {
  .p-aesthetics-section__title {
    width: 40vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-aesthetics-section__title {
    width: 23.796vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-aesthetics-section__title {
    width: 257px;
  }
}

.p-aesthetics-section__catch {
  border-bottom: 1px solid #a19600;
  margin-inline: auto;
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-aesthetics-section__catch {
    width: 83.333vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-aesthetics-section__catch {
    width: 900px;
  }
}

@media screen and (max-width: 768px) {
  .p-aesthetics-section__text {
    margin-block-start: 4.667vw;
    margin-inline: auto;
    width: 77.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-aesthetics-section__text {
    margin-block-start: 2.778vw;
    width: 87.037vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-aesthetics-section__text {
    margin-block-start: 30px;
    width: 940px;
  }
}

@media screen and (max-width: 768px) {
  .p-aesthetics-section--glitter {
    margin-block-start: 18.667vw;
  }
}
@media screen and (max-width: 768px) {
  .p-aesthetics-section--glitter .p-aesthetics-section__title {
    left: -2.133vw;
    top: -18.667vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-aesthetics-section--glitter .p-aesthetics-section__title {
    left: -4.63vw;
    top: -4.63vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-aesthetics-section--glitter .p-aesthetics-section__title {
    left: -50px;
    top: -55px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-aesthetics-section--glitter .p-aesthetics-section__text {
    padding-inline-start: 20.37vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-aesthetics-section--glitter .p-aesthetics-section__text {
    padding-inline-start: 220px;
  }
}

.p-glitter-specialty {
  background: url(../images/header_bg.png) 50% 50% repeat var(--color-primary);
  color: #fff;
  position: relative;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .p-glitter-specialty {
    background-size: 6.667vw auto;
    margin-block-start: 8vw;
    margin-inline: auto;
    padding-block: 5.333vw 6vw;
    width: 80vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-glitter-specialty {
    background-size: 4.63vw auto;
    margin-block-start: 6.944vw;
    margin-inline-start: 27.778vw;
    padding-block: 2.778vw 3.241vw;
    width: 55.556vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-glitter-specialty {
    margin-block-start: 75px;
    margin-inline-start: 300px;
    padding-block: 30px 35px;
    width: 600px;
  }
}

.p-glitter-specialty__title {
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .p-glitter-specialty__title {
    font-size: 4.267vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-glitter-specialty__title {
    font-size: 2.222vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-glitter-specialty__title {
    font-size: 24px;
  }
}

@media screen and (max-width: 768px) {
  .p-glitter-specialty__text {
    margin-block-start: 2.4vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-glitter-specialty__text {
    margin-block-start: 0.926vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-glitter-specialty__text {
    margin-block-start: 10px;
  }
}

.p-glitter-specialty__deco {
  position: absolute;
}
@media screen and (max-width: 768px) {
  .p-glitter-specialty__deco--left {
    bottom: -31.333vw;
    filter: drop-shadow(2.667vw 2.667vw 2.667vw rgba(0, 0, 0, 0.2));
    left: -5.333vw;
    width: 59.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-glitter-specialty__deco--left {
    filter: drop-shadow(1.852vw 1.852vw 1.852vw rgba(0, 0, 0, 0.2));
    left: -42.407vw;
    top: 1.852vw;
    width: 49.259vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-glitter-specialty__deco--left {
    filter: drop-shadow(20px 20px 20px rgba(0, 0, 0, 0.2));
    left: -458px;
    top: 20px;
    width: 532px;
  }
}
@media screen and (max-width: 768px) {
  .p-glitter-specialty__deco--right {
    right: -8vw;
    top: -4.8vw;
    width: 22.933vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-glitter-specialty__deco--right {
    right: -9.815vw;
    top: -5.185vw;
    width: 18.796vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-glitter-specialty__deco--right {
    right: -106px;
    top: -56px;
    width: 203px;
  }
}

@media screen and (max-width: 768px) {
  .p-aesthetics-section--stain {
    margin-block-start: 12vw;
    padding-block-start: 22.667vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-aesthetics-section--stain {
    margin-block-start: 7.407vw;
    padding-block-start: 5.093vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-aesthetics-section--stain {
    margin-block-start: 80px;
    padding-block-start: 55px;
  }
}
.p-aesthetics-section--stain .p-aesthetics-section__title {
  top: 0;
}
@media screen and (max-width: 768px) {
  .p-aesthetics-section--stain .p-aesthetics-section__title {
    right: -5.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-aesthetics-section--stain .p-aesthetics-section__title {
    right: -2.778vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-aesthetics-section--stain .p-aesthetics-section__title {
    right: -30px;
  }
}
@media screen and (max-width: 768px) {
  .p-aesthetics-section--stain .p-aesthetics-section__text {
    margin-block-start: 5.333vw;
    width: 85.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-aesthetics-section--stain .p-aesthetics-section__text {
    padding-inline-start: 6.111vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-aesthetics-section--stain .p-aesthetics-section__text {
    padding-inline-start: 66px;
  }
}

.p-stain-improve {
  background: linear-gradient(150deg, rgb(224, 138, 36) 0%, rgb(183, 113, 31) 2.88%, rgb(135, 83, 26) 6.79%, rgb(94, 58, 21) 10.81%, rgb(60, 37, 17) 14.89%, rgb(33, 21, 14) 19.03%, rgb(15, 9, 12) 23.26%, rgb(4, 2, 10) 27.64%, rgb(0, 0, 10) 32.4%);
  margin-inline: auto;
  position: relative;
}
@media screen and (max-width: 768px) {
  .p-stain-improve {
    border-radius: 2.733vw;
    box-shadow: 2.733vw 2.733vw 1.36vw rgba(0, 107, 145, 0.1);
    margin-block-start: 18.667vw;
    padding-block: 14vw 4.667vw;
    width: 100%;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-stain-improve {
    border-radius: 1.898vw;
    box-shadow: 1.898vw 1.898vw 0.944vw rgba(0, 107, 145, 0.1);
    margin-block-start: 9.259vw;
    padding-block: 4.63vw 1.389vw;
    width: 83.333vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-stain-improve {
    border-radius: 20px;
    box-shadow: 20px 20px 10px rgba(0, 107, 145, 0.1);
    margin-block-start: 100px;
    padding-block: 50px 15px;
    width: 900px;
  }
}

.p-stain-improve__title {
  left: 50%;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
  .p-stain-improve__title {
    width: 80vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-stain-improve__title {
    width: 74.074vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-stain-improve__title {
    width: 800px;
  }
}

@media screen and (max-width: 768px) {
  .p-stain-improve__compare {
    margin-inline-start: 4vw;
    width: 83.733vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-stain-improve__compare {
    margin-inline-start: 10.648vw;
    width: 58.148vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-stain-improve__compare {
    margin-inline-start: 115px;
    width: 628px;
  }
}

.p-stain-improve__note {
  color: #fff;
  text-align: right;
}
@media screen and (max-width: 768px) {
  .p-stain-improve__note {
    font-size: 2.4vw;
    line-height: 1.444;
    margin-block-start: 4vw;
    margin-inline: 4.667vw;
  }
}
@media screen and (min-width: 769px) {
  .p-stain-improve__note {
    line-height: 1.563;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-stain-improve__note {
    font-size: 1.481vw;
    margin-block-start: 2.315vw;
    margin-inline: 1.852vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-stain-improve__note {
    font-size: 16px;
    margin-block-start: 25px;
    margin-inline: 20px;
  }
}

@media screen and (max-width: 768px) {
  .p-aesthetics-section--wear {
    margin-block-start: 14.667vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-aesthetics-section--wear {
    margin-block-start: 9.259vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-aesthetics-section--wear {
    margin-block-start: 100px;
  }
}
@media screen and (max-width: 768px) {
  .p-aesthetics-section--wear .p-aesthetics-section__title {
    left: 2vw;
    top: -1.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-aesthetics-section--wear .p-aesthetics-section__title {
    left: -4.63vw;
    top: -1.852vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-aesthetics-section--wear .p-aesthetics-section__title {
    left: -50px;
    top: -20px;
  }
}
@media screen and (max-width: 768px) {
  .p-aesthetics-section--wear .p-aesthetics-section__text {
    margin-inline-start: 6vw;
    width: 83.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-aesthetics-section--wear .p-aesthetics-section__text {
    padding-inline-start: 18.519vw;
    width: 88.889vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-aesthetics-section--wear .p-aesthetics-section__text {
    padding-inline-start: 200px;
    width: 960px;
  }
}

.p-feature__body--wear {
  background: #fff;
  margin-inline: auto;
  position: relative;
}
@media screen and (max-width: 768px) {
  .p-feature__body--wear {
    border-radius: 1.727vw;
    box-shadow: 2.667vw 2.667vw 1.333vw rgba(0, 107, 145, 0.1);
    margin-block-start: 12vw;
    padding-block: 8.667vw 9.333vw;
    width: 100%;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-feature__body--wear {
    border-radius: 10px;
    box-shadow: 1.898vw 1.898vw 0.944vw rgba(0, 107, 145, 0.1);
    margin-block-start: 6.481vw;
    padding-block: 4.444vw 3.241vw;
    width: 83.333vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-feature__body--wear {
    border-radius: 10px;
    box-shadow: 20px 20px 10px rgba(0, 107, 145, 0.1);
    margin-block-start: 70px;
    padding-block: 48px 35px;
    width: 900px;
  }
}
.p-feature__body--wear::before {
  content: "";
  display: block;
  inset: 0;
  pointer-events: none;
  position: absolute;
}
@media screen and (max-width: 768px) {
  .p-feature__body--wear::before {
    border: 2px solid #fff;
    border-radius: 2vw;
    height: calc(100% + 8px);
    transform: translate(-4px, -4px);
    width: calc(100% + 8px);
  }
}
@media screen and (min-width: 769px) {
  .p-feature__body--wear::before {
    border: 3px solid #fff;
    border-radius: 13px;
    height: calc(100% + 12px);
    transform: translate(-6px, -6px);
    width: calc(100% + 12px);
  }
}

@media screen and (min-width: 769px) {
  .p-wear-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-wear-section {
    gap: 3.241vw 4.63vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-wear-section {
    gap: 35px 50px;
  }
}
@media screen and (max-width: 768px) {
  .p-wear-section--change {
    margin-block-start: 10.667vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-wear-section--change {
    margin-block-start: 2.963vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-wear-section--change {
    margin-block-start: 32px;
  }
}

.p-wear-section__title {
  background: var(--color-tertiary);
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-inline: auto;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .p-wear-section__title {
    border-radius: 8vw;
    font-size: 4vw;
    line-height: 1.333;
    padding-block: 2.667vw;
    width: 80vw;
  }
}
@media screen and (min-width: 769px) {
  .p-wear-section__title {
    line-height: 2.4;
    padding-inline: 2em;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-wear-section__title {
    border-radius: 2.778vw;
    font-size: 2.315vw;
    min-width: 55.556vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-wear-section__title {
    border-radius: 30px;
    font-size: 25px;
    min-width: 600px;
  }
}

@media screen and (max-width: 768px) {
  .p-wear-section__image {
    margin-block-start: 6.667vw;
    margin-inline: auto;
    width: 66.667vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-wear-section__image {
    margin-block-start: 0.926vw;
    width: 33.148vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-wear-section__image {
    margin-block-start: 10px;
    width: 358px;
  }
}

@media screen and (max-width: 768px) {
  .p-wear-section__image-graph {
    box-shadow: 0 0 1.733vw rgba(35, 20, 12, 0.15);
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-wear-section__image-graph {
    box-shadow: 0 0 1.204vw rgba(35, 20, 12, 0.15);
  }
}
@media screen and (min-width: 1080px) {
  .p-wear-section__image-graph {
    box-shadow: 0 0 13px rgba(35, 20, 12, 0.15);
  }
}

@media screen and (max-width: 768px) {
  .p-wear-section__text {
    margin-block-start: 5.333vw;
    margin-inline: auto;
    width: 75.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-wear-section__text {
    width: 33.611vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-wear-section__text {
    width: 363px;
  }
}

@media screen and (max-width: 768px) {
  .p-feature--strength {
    background: url(../images/strength_bg_sp.jpg) 0 0/cover no-repeat;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-feature--strength {
    background: url(../images/strength_bg_pc_01.jpg) 50% 0/auto 100% no-repeat;
  }
}
@media screen and (min-width: 769px) {
  .p-feature--strength {
    background: url(../images/strength_bg_pc_01.jpg) 50% 0 no-repeat, url(../images/strength_bg_pc_02.jpg) 0 0 repeat-x;
    background-size: auto 100%;
  }
}
@media screen and (max-width: 768px) {
  .p-feature--strength .p-feature__inner {
    min-height: 336.267vw;
    padding-block: 1.333vw 29.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-feature--strength .p-feature__inner {
    min-height: 175.556vw;
    padding-block: 21.759vw 5.556vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-feature--strength .p-feature__inner {
    min-height: 1896px;
    padding-block: 235px 60px;
  }
}
.p-feature--strength .p-feature__header {
  position: absolute;
}
@media screen and (max-width: 768px) {
  .p-feature--strength .p-feature__header {
    background: url(../images/feature_header_bg_sp_02.jpg) 0 0/cover no-repeat;
    border-bottom-left-radius: 5.733vw;
    border-top-left-radius: 5.733vw;
    margin-inline: auto 0;
    padding-inline-start: 4.667vw;
    position: relative;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-feature--strength .p-feature__header {
    padding-inline-start: 15.741vw;
    top: -0.648vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-feature--strength .p-feature__header {
    padding-inline-start: 170px;
    top: -7px;
  }
}
@media screen and (min-width: 769px) {
  .p-feature--strength .p-feature__header::before {
    background: url(../images/feature_header_bg_pc_02.jpg) 0 0/cover no-repeat;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
  }
}
@media screen and (min-width: 769px) and (min-width: 769px) and (max-width: 1079px) {
  .p-feature--strength .p-feature__header::before {
    border-bottom-left-radius: 3.704vw;
    border-top-left-radius: 3.704vw;
    left: -9.259vw;
    width: 148.148vw;
  }
}
@media screen and (min-width: 769px) and (min-width: 1080px) {
  .p-feature--strength .p-feature__header::before {
    border-bottom-left-radius: 40px;
    border-top-left-radius: 40px;
    left: -100px;
    width: 1600px;
  }
}
@media screen and (max-width: 768px) {
  .p-feature--strength .p-feature__header-list {
    gap: 1.333vw;
    margin-block-start: 2.667vw;
    margin-inline-start: -1.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-feature--strength .p-feature__header-list {
    gap: 1.667vw;
    margin-inline-start: 1.389vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-feature--strength .p-feature__header-list {
    gap: 18px;
    margin-inline-start: 15px;
  }
}
@media screen and (max-width: 768px) {
  .p-feature--strength .p-feature__header-item {
    height: 16vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-feature--strength .p-feature__header-item {
    height: 11.019vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-feature--strength .p-feature__header-item {
    height: 119px;
  }
}
.p-feature--strength .p-feature__header-item img {
  height: 100%;
  width: auto;
}

@media screen and (max-width: 768px) {
  .p-strength-intro {
    margin-block-start: 12vw;
    margin-inline: auto;
    width: 87.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-strength-intro {
    margin-inline-start: 27.315vw;
    width: 63.889vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-strength-intro {
    margin-inline-start: 295px;
    width: 690px;
  }
}

@media screen and (max-width: 768px) {
  .p-strength-intro__title {
    margin-inline-start: 45.067vw;
    width: 42.267vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-strength-intro__title {
    width: 41.852vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-strength-intro__title {
    width: 452px;
  }
}

.p-strength-intro__text {
  color: #fff;
}
@media screen and (max-width: 768px) {
  .p-strength-intro__text {
    margin-block-start: 10.667vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-strength-intro__text {
    margin-block-start: 1.852vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-strength-intro__text {
    margin-block-start: 20px;
  }
}

.p-strength-test {
  background: #fff;
  margin-inline: auto;
  position: relative;
}
@media screen and (max-width: 768px) {
  .p-strength-test {
    border-radius: 1.727vw;
    box-shadow: 2.667vw 2.667vw 1.333vw rgba(0, 107, 145, 0.1);
    margin-block-start: 11.333vw;
    padding-block: 6vw 6.667vw;
    padding-inline: 4vw 3.333vw;
    width: 89.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-strength-test {
    border-radius: 10px;
    box-shadow: 1.852vw 1.852vw 0.926vw rgba(0, 107, 145, 0.1);
    margin-block-start: 7.407vw;
    padding-block: 3.704vw;
    padding-inline: 7.87vw;
    width: 83.333vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-strength-test {
    border-radius: 10px;
    box-shadow: 20px 20px 10px rgba(0, 107, 145, 0.1);
    margin-block-start: 80px;
    padding-block: 40px;
    padding-inline: 85px;
    width: 900px;
  }
}
.p-strength-test::before {
  content: "";
  display: block;
  inset: 0;
  pointer-events: none;
  position: absolute;
}
@media screen and (max-width: 768px) {
  .p-strength-test::before {
    border: 2px solid #fff;
    border-radius: 2vw;
    height: calc(100% + 8px);
    transform: translate(-4px, -4px);
    width: calc(100% + 8px);
  }
}
@media screen and (min-width: 769px) {
  .p-strength-test::before {
    border: 3px solid #fff;
    border-radius: 13px;
    height: calc(100% + 12px);
    transform: translate(-6px, -6px);
    width: calc(100% + 12px);
  }
}

.p-strength-test__inner {
  align-items: center;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .p-strength-test__inner {
    flex-wrap: wrap;
    gap: 4.8vw 4vw;
  }
}
@media screen and (min-width: 769px) {
  .p-strength-test__inner {
    flex-direction: column;
    position: relative;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-strength-test__inner {
    gap: 1.852vw;
    min-height: 37.037vw;
    padding-block: 3.704vw;
    padding-inline-start: 27.778vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-strength-test__inner {
    gap: 20px;
    min-height: 400px;
    padding-block: 40px;
    padding-inline-start: 300px;
  }
}

.p-strength-test__title {
  background: var(--color-tertiary);
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .p-strength-test__title {
    border-radius: 4.667vw;
    font-size: 4vw;
    line-height: 2.4;
    margin-inline: auto;
    width: 67.2vw;
  }
}
@media screen and (min-width: 769px) {
  .p-strength-test__title {
    line-height: 2.4;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-strength-test__title {
    border-radius: 2.778vw;
    font-size: 2.315vw;
    width: 38.889vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-strength-test__title {
    border-radius: 30px;
    font-size: 25px;
    width: 420px;
  }
}

@media screen and (max-width: 768px) {
  .p-strength-test__image {
    width: 34.133vw;
  }
}
@media screen and (min-width: 769px) {
  .p-strength-test__image {
    left: 0;
    position: absolute;
    top: 0;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-strength-test__image {
    width: 23.704vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-strength-test__image {
    width: 256px;
  }
}

@media screen and (max-width: 768px) {
  .p-strength-test__text-wrap {
    width: 42.667vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-strength-test__text-wrap {
    margin-inline: auto 0;
    width: 35.556vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-strength-test__text-wrap {
    margin-inline: auto 0;
    width: 384px;
  }
}

@media screen and (max-width: 768px) {
  .p-strength-test__text {
    line-height: 2.038;
  }
}
@media screen and (min-width: 769px) {
  .p-strength-test__text {
    line-height: 2;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-strength-test__text {
    font-size: 1.852vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-strength-test__text {
    font-size: 20px;
  }
}

.p-strength-test__source {
  text-align: right;
}
@media screen and (max-width: 768px) {
  .p-strength-test__source {
    font-size: 80%;
    margin-block-start: 0.6em;
  }
}
@media screen and (min-width: 769px) {
  .p-strength-test__source {
    line-height: 2;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-strength-test__source {
    font-size: 1.852vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-strength-test__source {
    font-size: 20px;
  }
}

@media screen and (max-width: 768px) {
  .p-feature--translucency {
    background: url(../images/translucency_bg_sp_01.jpg) 0 0/100% auto no-repeat;
  }
}
@media screen and (min-width: 769px) {
  .p-feature--translucency {
    background: url(../images/translucency_bg_pc_01.jpg) 50% 0 no-repeat #e8f0f3;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-feature--translucency {
    background-size: 185.185vw auto;
  }
}
@media screen and (max-width: 768px) {
  .p-feature--translucency .p-feature__inner {
    padding-block-start: 15.333vw;
  }
}
.p-feature--translucency .p-feature__header {
  position: absolute;
}
@media screen and (max-width: 768px) {
  .p-feature--translucency .p-feature__header {
    background: url(../images/feature_header_bg_sp_01.jpg) 0 0/cover no-repeat;
    border-bottom-right-radius: 5.733vw;
    border-top-right-radius: 5.733vw;
    left: 0;
    padding-inline-start: 8.533vw;
    top: -24vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-feature--translucency .p-feature__header {
    padding-inline-start: 19.815vw;
    position: relative;
  }
}
@media screen and (min-width: 1080px) {
  .p-feature--translucency .p-feature__header {
    padding-inline-start: 214px;
    position: relative;
  }
}
@media screen and (min-width: 769px) {
  .p-feature--translucency .p-feature__header::before {
    background: url(../images/feature_header_bg_pc_01.jpg) 0 0/cover no-repeat;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
  }
}
@media screen and (min-width: 769px) and (min-width: 769px) and (max-width: 1079px) {
  .p-feature--translucency .p-feature__header::before {
    border-bottom-right-radius: 3.704vw;
    border-top-right-radius: 3.704vw;
    left: -46.296vw;
    width: 148.148vw;
  }
}
@media screen and (min-width: 769px) and (min-width: 1080px) {
  .p-feature--translucency .p-feature__header::before {
    border-bottom-right-radius: 40px;
    border-top-right-radius: 40px;
    left: -500px;
    width: 1600px;
  }
}
@media screen and (max-width: 768px) {
  .p-feature--translucency .p-feature__header-list {
    gap: 2.133vw;
    margin-block-start: 2.667vw;
    margin-inline-start: -1.067vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-feature--translucency .p-feature__header-list {
    gap: 1.111vw;
    margin-inline-start: -0.37vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-feature--translucency .p-feature__header-list {
    gap: 12px;
    margin-inline-start: -4px;
  }
}
@media screen and (max-width: 768px) {
  .p-feature--translucency .p-feature__header-item {
    height: 17.867vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-feature--translucency .p-feature__header-item {
    height: 11.667vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-feature--translucency .p-feature__header-item {
    height: 126px;
  }
}
.p-feature--translucency .p-feature__header-item img {
  height: 100%;
  width: auto;
}

@media screen and (max-width: 768px) {
  .p-translucency-harden {
    padding-block-end: 14vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-translucency-harden {
    height: 29.63vw;
    padding-block-start: 6.944vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-translucency-harden {
    height: 320px;
    padding-block-start: 75px;
  }
}

@media screen and (max-width: 768px) {
  .p-translucency-harden__title {
    margin-inline-start: 16.667vw;
    width: 66.667vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-translucency-harden__title {
    margin-inline: auto;
    width: 71.296vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-translucency-harden__title {
    margin-inline: auto;
    width: 770px;
  }
}

.p-translucency-harden__text {
  text-align: center;
}
@media screen and (max-width: 768px) {
  .p-translucency-harden__text {
    margin-block-start: 4.267vw;
    margin-inline: auto;
    width: 89.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-translucency-harden__text {
    margin-block-start: 1.852vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-translucency-harden__text {
    margin-block-start: 20px;
  }
}

@media screen and (max-width: 768px) {
  .p-translucency-result {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 17%, rgb(255, 255, 255) 86.95%, rgba(255, 255, 255, 0) 100%);
    padding-block: 13.333vw 16vw;
    position: relative;
    z-index: 5;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-translucency-result {
    height: 44.63vw;
    padding-block-start: 4.63vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-translucency-result {
    height: 482px;
    padding-block-start: 50px;
  }
}

.p-translucency-result__title {
  color: #1f2a66;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .p-translucency-result__title {
    font-size: 4vw;
    line-height: 1.333;
    margin-inline: auto 5.333vw;
    width: 58.133vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-translucency-result__title {
    font-size: 2.315vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-translucency-result__title {
    font-size: 25px;
  }
}

.p-translucency-result__card {
  align-items: flex-start;
  display: flex;
}
@media screen and (max-width: 768px) {
  .p-translucency-result__card {
    justify-content: space-between;
    margin-block-start: 6.667vw;
    margin-inline: auto;
    position: relative;
    width: 89.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-translucency-result__card {
    gap: 0.926vw;
    margin-block-start: 2.778vw;
    margin-inline-start: 3.056vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-translucency-result__card {
    gap: 10px;
    margin-block-start: 30px;
    margin-inline-start: 33px;
  }
}

.p-translucency-result__card-title {
  align-items: center;
  aspect-ratio: 1/1;
  background: var(--color-font);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-weight: 500;
  justify-content: center;
  letter-spacing: 0.02em;
}
@media screen and (max-width: 768px) {
  .p-translucency-result__card-title {
    left: 0.667vw;
    line-height: 1.569;
    top: -26.667vw;
    position: absolute;
    width: 30.267vw;
  }
}
@media screen and (min-width: 769px) {
  .p-translucency-result__card-title {
    line-height: 1.545;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-translucency-result__card-title {
    font-size: 2.037vw;
    margin-block-start: 0.556vw;
    width: 17.5vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-translucency-result__card-title {
    font-size: 22px;
    margin-block-start: 6px;
    width: 189px;
  }
}

.p-translucency-result__card-image {
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .p-translucency-result__card-image {
    border-radius: 1.373vw;
    width: 44vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-translucency-result__card-image {
    border-radius: 0.926vw;
    width: 29.63vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-translucency-result__card-image {
    border-radius: 10px;
    width: 320px;
  }
}

.p-translucency-result__note {
  color: #666;
  text-align: right;
}
@media screen and (max-width: 768px) {
  .p-translucency-result__note {
    font-size: 2.4vw;
    margin-block-start: 2.4vw;
    margin-inline: auto;
    width: 89.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-translucency-result__note {
    font-size: 1.204vw;
    margin-block-start: 0.926vw;
    margin-inline: auto 10.648vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-translucency-result__note {
    font-size: 13px;
    margin-block-start: 10px;
    margin-inline: auto 115px;
  }
}

.p-translucency-result__text {
  text-align: center;
}
@media screen and (max-width: 768px) {
  .p-translucency-result__text {
    margin-block-start: 5.333vw;
    margin-inline: auto;
    width: 89.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-translucency-result__text {
    margin-block-start: 2.778vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-translucency-result__text {
    margin-block-start: 30px;
  }
}

.p-translucency-bottom {
  background-repeat: no-repeat;
}
@media screen and (max-width: 768px) {
  .p-translucency-bottom {
    background-image: url(../images/translucency_bg_sp_02.jpg), linear-gradient(to bottom, #e8f0f3 0%, #e8f0f3 50%, #eaebed 100%);
    background-position: 0 178.667vw, 0 0;
    background-size: 100% auto, 100% 100%;
    margin-block-start: -11.333vw;
    padding-block-start: 6vw;
  }
}
@media screen and (min-width: 769px) {
  .p-translucency-bottom {
    background-image: url(../images/translucency_bg_pc_02.jpg), linear-gradient(to bottom, #e8f0f3 0%, #e8f0f3 50%, #eaebed 100%);
    background-position: 50% 0, 0 0;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-translucency-bottom {
    background-size: 185.185vw auto, 100% 100%;
  }
}

.p-design {
  align-items: center;
  background: #fff;
  display: flex;
  margin-inline: auto;
  position: relative;
}
@media screen and (max-width: 768px) {
  .p-design {
    border-radius: 3.701vw;
    flex-direction: column;
    gap: 6vw;
    margin-block-start: 10.667vw;
    padding-block: 6.667vw 8vw;
    width: 89.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-design {
    border-radius: 20px;
    gap: 5.556vw;
    margin-block-start: 6.667vw;
    padding-block-start: 2.315vw;
    padding-inline-start: 5.37vw;
    width: 80.556vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-design {
    border-radius: 20px;
    gap: 60px;
    margin-block-start: 72px;
    padding-block: 25px;
    padding-inline-start: 58px;
    width: 870px;
  }
}
.p-design::before {
  content: "";
  display: block;
  inset: 0;
  pointer-events: none;
  position: absolute;
}
@media screen and (max-width: 768px) {
  .p-design::before {
    border: 2px solid #e7eaf4;
    border-radius: 4vw;
    height: calc(100% + 8px);
    transform: translate(-4px, -4px);
    width: calc(100% + 8px);
  }
}
@media screen and (min-width: 769px) {
  .p-design::before {
    border: 3px solid #e7eaf4;
    border-radius: 23px;
    height: calc(100% + 12px);
    transform: translate(-6px, -6px);
    width: calc(100% + 12px);
  }
}

@media screen and (max-width: 768px) {
  .p-design__image {
    width: 59.067vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-design__image {
    width: 28.519vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-design__image {
    width: 308px;
  }
}

@media screen and (max-width: 768px) {
  .p-design__text {
    width: 75.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-design__text {
    width: 37.407vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-design__text {
    width: 404px;
  }
}

@media screen and (max-width: 768px) {
  .p-lineup {
    background: url(../images/lineup_bg_sp.jpg) 0 0/cover no-repeat;
  }
}
@media screen and (min-width: 769px) {
  .p-lineup {
    background: url(../images/lineup_bg_pc.jpg) 50% 0/auto 100% no-repeat #fdfefe;
  }
}

.p-lineup__inner {
  background: rgba(255, 255, 255, 0.7);
}
@media screen and (max-width: 768px) {
  .p-lineup__inner {
    margin-inline: auto;
    min-height: 212vw;
    padding-block: 11.333vw 16.667vw;
    width: 89.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-lineup__inner {
    min-height: 86.111vw;
    padding-block: 8.796vw 9.259vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-lineup__inner {
    min-height: 930px;
    padding-block: 95px 100px;
  }
}

.p-lineup__lead {
  color: var(--color-primary);
  font-weight: 300;
  letter-spacing: 0.12em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .p-lineup__lead {
    font-size: 9.867vw;
    line-height: 1.081;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-lineup__lead {
    font-size: 5.741vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-lineup__lead {
    font-size: 62px;
  }
}

.p-lineup__lead-flat {
  display: inline-block;
  transform: scale(0.9, 1);
}

.p-lineup__lead-mark {
  font-family: var(--font-NotoSansJP);
  font-weight: 500;
  margin-inline-start: -0.5em;
  vertical-align: super;
}
@media screen and (max-width: 768px) {
  .p-lineup__lead-mark {
    font-size: 4.4vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-lineup__lead-mark {
    font-size: 2.593vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-lineup__lead-mark {
    font-size: 28px;
  }
}

.p-lineup__lead-large {
  display: inline-block;
  font-size: 105%;
  margin-inline-start: -0.2em;
  vertical-align: text-top;
}
@media screen and (max-width: 768px) {
  .p-lineup__lead-large {
    margin-block-start: -0.1em;
  }
}
@media screen and (min-width: 769px) {
  .p-lineup__lead-large {
    margin-block-start: -0.05em;
  }
}

.p-lineup__title {
  color: var(--color-primary);
  font-feature-settings: "palt";
  font-weight: 500;
  margin-inline: auto;
  position: relative;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .p-lineup__title {
    font-size: 3.733vw;
    margin-block-start: 2.667vw;
    width: 80vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-lineup__title {
    font-size: 1.944vw;
    margin-block-start: 0.926vw;
    width: 68.333vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-lineup__title {
    font-size: 21px;
    margin-block-start: 10px;
    width: 738px;
  }
}
.p-lineup__title::before, .p-lineup__title::after {
  background-image: url(../images/lineup_title_deco.png);
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
}
@media screen and (max-width: 768px) {
  .p-lineup__title::before, .p-lineup__title::after {
    background-size: auto 1.333vw;
    width: 25.067vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-lineup__title::before, .p-lineup__title::after {
    background-size: auto 0.926vw;
    width: 25.37vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-lineup__title::before, .p-lineup__title::after {
    width: 274px;
  }
}
.p-lineup__title::before {
  background-position: 0 50%;
  left: 0;
}
.p-lineup__title::after {
  background-position: 100% 50%;
  right: 0;
}

.p-lineup__content {
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-lineup__content {
    font-size: 3.733vw;
    margin-block-start: 8.667vw;
    width: 75.6vw;
  }
}
@media screen and (min-width: 769px) {
  .p-lineup__content {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-lineup__content {
    margin-block-start: 7.407vw;
    width: 85.185vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-lineup__content {
    margin-block-start: 80px;
    width: 920px;
  }
}

.p-lineup__image {
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .p-lineup__image {
    border-radius: 3.2vw;
    margin-inline: auto;
    width: 64vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-lineup__image {
    border-radius: 1.852vw;
    width: 37.037vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-lineup__image {
    border-radius: 20px;
    width: 400px;
  }
}

@media screen and (max-width: 768px) {
  .p-lineup__detail {
    margin-block-start: 6vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-lineup__detail {
    width: 43.704vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-lineup__detail {
    width: 472px;
  }
}

.p-lineup__product-name {
  align-items: baseline;
  color: var(--color-primary);
  display: flex;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .p-lineup__product-name {
    gap: 1.333vw;
    margin-inline-start: 2vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-lineup__product-name {
    gap: 0.926vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-lineup__product-name {
    gap: 10px;
  }
}

@media screen and (max-width: 768px) {
  .p-lineup__product-name-label {
    font-size: 4.8vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-lineup__product-name-label {
    font-size: 2.778vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-lineup__product-name-label {
    font-size: 30px;
  }
}

.p-lineup__product-name-value {
  background: #ebe8d7;
  border-radius: 100vw;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .p-lineup__product-name-value {
    line-height: 1.462;
    width: 24vw;
  }
}
@media screen and (min-width: 769px) {
  .p-lineup__product-name-value {
    line-height: 1.5;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-lineup__product-name-value {
    font-size: 1.852vw;
    width: 13.148vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-lineup__product-name-value {
    font-size: 20px;
    width: 142px;
  }
}

.p-lineup__info {
  border-left: 2px solid var(--color-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .p-lineup__info {
    gap: 1.333vw;
    margin-block-start: 2vw;
    margin-inline-start: 2.667vw;
    min-height: 11.467vw;
    padding-inline-start: 3.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-lineup__info {
    gap: 0.926vw;
    margin-block-start: 1.389vw;
    min-height: 6.667vw;
    padding-inline-start: 1.852vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-lineup__info {
    gap: 10px;
    margin-block-start: 15px;
    min-height: 72px;
    padding-inline-start: 20px;
  }
}

.p-lineup__info-item {
  display: flex;
  gap: 1em;
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-lineup__info-item {
    font-size: 1.852vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-lineup__info-item {
    font-size: 20px;
  }
}

@media screen and (max-width: 768px) {
  .p-lineup__shade {
    margin-block-start: 5.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-lineup__shade {
    margin-block-start: 1.852vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-lineup__shade {
    margin-block-start: 20px;
  }
}

.p-lineup__shade-title {
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .p-lineup__shade-title {
    font-size: 3.733vw;
    margin-inline-start: 1.6vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-lineup__shade-title {
    font-size: 1.852vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-lineup__shade-title {
    font-size: 20px;
  }
}

.p-lineup__shade-icon {
  display: inline-block;
  vertical-align: middle;
}
@media screen and (max-width: 768px) {
  .p-lineup__shade-icon {
    margin-inline-end: 1.333vw;
    width: 3.84vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-lineup__shade-icon {
    margin-inline-end: 0.463vw;
    width: 1.852vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-lineup__shade-icon {
    margin-inline-end: 5px;
    width: 20px;
  }
}

.p-lineup__shade-image {
  overflow: hidden;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .p-lineup__shade-image {
    border-radius: 1.6vw;
    margin-block-start: 12px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-lineup__shade-image {
    border-radius: 1.852vw;
    margin-block-start: 1.296vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-lineup__shade-image {
    border-radius: 20px;
    margin-block-start: 14px;
  }
}

.p-lineup__btn {
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-lineup__btn {
    margin-block-start: 11.333vw;
    width: 80vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-lineup__btn {
    margin-block-start: 12.963vw;
    width: 55.556vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-lineup__btn {
    margin-block-start: 140px;
    width: 600px;
  }
}

.p-lineup__link {
  background: var(--color-font);
  color: #fff;
  display: block;
  position: relative;
}
@media screen and (max-width: 768px) {
  .p-lineup__link {
    border-radius: 1.733vw;
    padding-inline-start: 25.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-lineup__link {
    border-radius: 0.926vw;
    padding-inline-start: 18.056vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-lineup__link {
    border-radius: 10px;
    padding-inline-start: 195px;
  }
}
@media (any-hover: hover) {
  .p-lineup__link:hover {
    background: var(--color-primary);
  }
}

.p-lineup__link-image {
  position: absolute;
  transform-origin: 0 0;
  transform: rotate(-10deg);
}
@media screen and (max-width: 768px) {
  .p-lineup__link-image {
    box-shadow: -1.333vw 1.333vw 1.067vw rgba(0, 12, 15, 0.5);
    left: 2.667vw;
    top: -3.333vw;
    width: 16.267vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-lineup__link-image {
    box-shadow: -0.926vw 0.926vw 0.741vw rgba(0, 12, 15, 0.5);
    left: 1.852vw;
    top: -3.704vw;
    width: 11.296vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-lineup__link-image {
    box-shadow: -10px 10px 8px rgba(0, 12, 15, 0.5);
    left: 20px;
    top: -50px;
    width: 122px;
  }
}

.p-lineup__link-label {
  font-weight: 700;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 768px) {
  .p-lineup__link-label {
    font-size: 4vw;
    line-height: 4;
  }
}
@media screen and (min-width: 769px) {
  .p-lineup__link-label {
    line-height: 2.917;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-lineup__link-label {
    font-size: 2.222vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-lineup__link-label {
    font-size: 24px;
  }
}

.p-lineup__link-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .p-lineup__link-icon {
    right: 5.733vw;
    width: 3.84vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-lineup__link-icon {
    right: 4.167vw;
    width: 2.222vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-lineup__link-icon {
    right: 45px;
    width: 24px;
  }
}

.p-main-bottom {
  background: url(../images/bg_bottom_01.png) 50% 0 repeat, url(../images/bg_bottom_02.webp) 50% 0 no-repeat #333331;
}
@media screen and (max-width: 768px) {
  .p-main-bottom {
    background-size: 64.133vw auto, 293.333vw auto;
    padding-block: 12.267vw 20vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-main-bottom {
    background-size: 44.537vw auto, 203.704vw auto;
    padding-block: 7.593vw 9.722vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-main-bottom {
    padding-block: 82px 105px;
  }
}

@media screen and (max-width: 768px) {
  .p-qa {
    padding-block-end: 6.667vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-qa {
    padding-block-end: 3.704vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-qa {
    padding-block-end: 40px;
  }
}

.p-qa__title {
  color: var(--color-primary);
  font-weight: 200;
  letter-spacing: 0.12em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .p-qa__title {
    font-size: 10.267vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-qa__title {
    font-size: 5.926vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-qa__title {
    font-size: 64px;
  }
}

.p-qa__title-symbol {
  font-weight: 300;
}
@media screen and (max-width: 768px) {
  .p-qa__title-symbol {
    font-size: 8vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-qa__title-symbol {
    font-size: 4.63vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-qa__title-symbol {
    font-size: 50px;
  }
}

.p-qa__title-ja {
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-qa__title-ja {
    margin-block-start: 3.333vw;
    width: 40.533vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-qa__title-ja {
    margin-block-start: 1.667vw;
    width: 23.611vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-qa__title-ja {
    margin-block-start: 18px;
    width: 255px;
  }
}

.p-qa__item {
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-qa__item {
    box-shadow: 0 0.933vw 0.933vw rgba(0, 12, 15, 0.5);
    margin-block-start: 4vw;
    width: 89.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-qa__item {
    box-shadow: 0 0.648vw 0.648vw rgba(0, 12, 15, 0.5);
    margin-block-start: 3.704vw;
    width: 83.333vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-qa__item {
    box-shadow: 0 7px 7px rgba(0, 12, 15, 0.5);
    margin-block-start: 40px;
    width: 900px;
  }
}
@media screen and (max-width: 768px) {
  .p-qa__item:first-of-type {
    margin-block-start: 10.667vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-qa__item:first-of-type {
    margin-block-start: 4.815vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-qa__item:first-of-type {
    margin-block-start: 52px;
  }
}

.p-qa__question {
  align-items: center;
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  display: flex;
  list-style: none;
}
@media screen and (max-width: 768px) {
  .p-qa__question {
    border-radius: 1.922vw 1.922vw 0 0;
    min-height: 18.667vw;
    padding-block: 3.333vw;
    padding-inline: 3.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-qa__question {
    border-radius: 0.926vw 0.926vw 0 0;
    gap: 1.852vw;
    min-height: 5.556vw;
    padding-block: 1.389vw;
    padding-inline: 2.315vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-qa__question {
    border-radius: 10px 10px 0 0;
    gap: 20px;
    min-height: 60px;
    padding-block: 15px;
    padding-inline: 25px;
  }
}
.p-qa__question::-webkit-details-marker {
  display: none;
}

.p-qa__question-icon {
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .p-qa__question-icon {
    font-size: 4.8vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-qa__question-icon {
    font-size: 2.593vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-qa__question-icon {
    font-size: 28px;
  }
}

.p-qa__question-text {
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .p-qa__question-text {
    font-size: 3.733vw;
    line-height: 1.571;
    margin-inline-start: 2.933vw;
    width: 67.333vw;
  }
}
@media screen and (min-width: 769px) {
  .p-qa__question-text {
    line-height: 1.9;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-qa__question-text {
    font-size: 1.852vw;
    width: 69.444vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-qa__question-text {
    font-size: 20px;
    width: 750px;
  }
}

.p-qa__question-toggle {
  aspect-ratio: 1/1;
  background: #fff;
  border-radius: 50%;
  margin-inline-start: auto;
  position: relative;
}
@media screen and (max-width: 768px) {
  .p-qa__question-toggle {
    width: 5.867vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-qa__question-toggle {
    width: 2.407vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-qa__question-toggle {
    width: 26px;
  }
}
.p-qa__question-toggle::before, .p-qa__question-toggle::after {
  background: var(--color-tertiary);
  content: "";
  height: 2px;
  left: 50%;
  position: absolute;
  top: 50%;
  translate: -50% -50%;
  transition: rotate 0.3s ease;
}
@media screen and (max-width: 768px) {
  .p-qa__question-toggle::before, .p-qa__question-toggle::after {
    width: 2.533vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-qa__question-toggle::before, .p-qa__question-toggle::after {
    width: 1.019vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-qa__question-toggle::before, .p-qa__question-toggle::after {
    width: 11px;
  }
}
.p-qa__question-toggle::after {
  rotate: 90deg;
}

.p-qa__item[open] .p-qa__question-toggle::after {
  rotate: 0deg;
}

.p-qa__answer {
  background-color: #fff;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-out;
}
@media screen and (max-width: 768px) {
  .p-qa__answer {
    border-radius: 0 0 1.922vw 1.922vw;
    padding-block: 4vw;
    padding-inline: 10.667vw 6vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-qa__answer {
    border-radius: 0 0 0.926vw 0.926vw;
    padding-block: 1.852vw;
    padding-inline: 6.667vw 3.333vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-qa__answer {
    border-radius: 0 0 10px 10px;
    padding-block: 20px;
    padding-inline: 72px 36px;
  }
}

.p-qa__answer-text {
  color: #333;
}
@media screen and (max-width: 768px) {
  .p-qa__answer-text {
    line-height: 2.038;
  }
}
@media screen and (min-width: 769px) {
  .p-qa__answer-text {
    line-height: 2.111;
  }
}

.p-product {
  border: 1px solid #b8ae74;
  color: #b8ae74;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-product {
    border-radius: 2.196vw;
    margin-block-start: 6.667vw;
    padding-block: 8.667vw;
    padding-inline: 5.067vw;
    width: 89.333vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-product {
    border-radius: 1.481vw;
    margin-block-start: 3.704vw;
    padding-block: 3.704vw;
    padding-inline: 3.704vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-product {
    border-radius: 16px;
    margin-block-start: 40px;
    padding-block: 40px;
    padding-inline: 40px;
  }
}

@media screen and (max-width: 768px) {
  .p-product-spec {
    font-size: 3.2vw;
    line-height: 2.125;
  }
}
@media screen and (min-width: 769px) {
  .p-product-spec {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1em;
    line-height: 1.857;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-product-spec {
    font-size: 1.296vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-product-spec {
    font-size: 14px;
  }
}
@media screen and (max-width: 768px) {
  .p-product-spec:not(:first-of-type) {
    margin-block-start: 2.125em;
  }
}
@media screen and (min-width: 769px) {
  .p-product-spec:not(:first-of-type) {
    margin-block-start: 1.857em;
  }
}

@media screen and (min-width: 769px) {
  .p-product-spec__row {
    display: flex;
  }
  .p-product-spec__row:first-of-type {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .p-product-spec__label,
  .p-product-spec__value {
    display: inline;
  }
}

.p-product-spec__label::after {
  content: "：";
}

@media screen and (max-width: 768px) {
  .p-product-note {
    font-size: 3.2vw;
    line-height: 2.125;
    margin-block-start: 7.333vw;
  }
}
@media screen and (min-width: 769px) {
  .p-product-note {
    line-height: 1.875;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
  .p-product-note {
    font-size: 1.481vw;
    margin-block-start: 2.315vw;
  }
}
@media screen and (min-width: 1080px) {
  .p-product-note {
    font-size: 16px;
    margin-block-start: 25px;
  }
}/*# sourceMappingURL=style.css.map */