@charset "UTF-8";



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

html {
  background: #010E1A;
  font-size: 16px;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  -webkit-print-color-adjust: exact;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-underline-offset: .2em;
  background: #fff;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  color: #022F5E;
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', sans-serif;
  font-size: 16px;
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0;
  line-break: strict;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  word-break: normal;
  overflow-wrap: anywhere;
}

article,
aside,
footer,
header,
nav,
section,
main {
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
span,
em,
small,
strong,
sub,
sup,
mark,
del,
ins,
strike,
abbr,
dfn,
blockquote,
q,
cite,
code,
pre,
ol,
ul,
li,
dl,
dt,
dd,
div,
section,
article,
main,
aside,
nav,
header,
hgroup,
footer,
img,
figure,
figcaption,
address,
time,
audio,
video,
canvas,
iframe,
details,
summary,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  vertical-align: baseline;
  margin: 0;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 100%;
}

a {
  display: inline-block;
  -webkit-transition: opacity .3s ease 0s;
  transition: opacity .3s ease 0s;
  color: inherit;
  text-decoration: none;
}

a[href='*'] {
  cursor: pointer;
}

a[href='*']:hover, a[href='*']:focus-visible {
  opacity: .7;
}

img,
svg {
  display: inline-block;
  vertical-align: top;
  border: none;
  width: 100%;
  max-width: 100%;
  height: auto;
}

video {
  width: 100%;
  height: auto;
}

code,
kbd,
pre,
samp {
  font-size: inherit;
}

ul,
ol {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote::after,
blockquote::before,
q::after,
q::before {
  content: '';
  content: none;
}

address {
  font-style: italic;
}

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  margin: 0;
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
}

abbr,
acronym {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

cite {
  font-style: italic;
}

code,
kbd {
  background-color: #F8F8F8;
  padding: .25em .5em;
}

em {
  font-style: italic;
  font-weight: 700;
}

pre {
  display: block;
  background-color: #F8F8F8;
  padding: 1em 2em;
}

sub {
  vertical-align: sub;
  font-size: smaller;
}

sup {
  vertical-align: super;
  font-size: smaller;
}

var {
  background-color: #F8F8F8;
  padding: .25em .5em;
  font-style: italic;
}

/************************************************************************
* end reset
************************************************************************/
[data-target] {
  cursor: pointer;
}

.l-container {
  margin: 0 auto;
  width: 100%;
}

.l-container.l-container--full {
  margin-left: calc((100% - 100vw) / 2);
  width: 100vw;
  max-width: none;
}

/************************************************************************
* l-main
************************************************************************/
.l-main {
  position: relative;
  z-index: 8;
  margin-top: 5.3333333333vw;
}

/************************************************************************
* l-solution
* SP: vw(値, 375) - 375px基準
* PC: pcvw(値) - 768pxで375px、最大500px
************************************************************************/
.l-solution {
  margin-top: -11.7333333333vw;
}

/************************************************************************
* l-price
* SP: vw(値, 375) - 375px基準
* PC: pcvw(値) - 768pxで375px、最大500px
************************************************************************/
.l-price {
  margin-top: -8vw;
}

/************************************************************************
* トグルアイコン（アコーディオンなどで使用）
* SP: rem(値) - 16px基準
* PC: pcvw(値) - 768pxで375px、最大500px
************************************************************************/
.c-toggleIcon {
  aspect-ratio: 1;
  position: relative;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-top: 2px;
  margin-top: .125rem;
  border-radius: 50%;
  background-color: #2C629A;
  width: 18px;
  width: 1.125rem;
}

.c-toggleIcon span {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: opacity .3s ease, -webkit-transform .3s ease;
  transition: opacity .3s ease, -webkit-transform .3s ease;
  transition: transform .3s ease, opacity .3s ease;
  transition: transform .3s ease, opacity .3s ease, -webkit-transform .3s ease;
  border-radius: 100vh;
  background-color: #fff;
}

.c-toggleIcon span:first-child {
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 10px;
  width: .625rem;
  height: 2px;
  height: .125rem;
}

.c-toggleIcon span:last-child {
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 2px;
  width: .125rem;
  height: 10px;
  height: .625rem;
}

[aria-expanded=true] .c-toggleIcon span:last-child {
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

/************************************************************************
* p-fv
************************************************************************/
.p-fv {
  position: relative;
  z-index: 10;
}

.p-fv__img {
  aspect-ratio: 375/677;
}

.p-fv__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

.p-fvBtn {
  position: relative;
  z-index: 10;
  margin-top: -40vw;
  padding: 0 3.2vw;
  text-align: center;
}

.p-fvBtn a {
  display: inline-block;
  -webkit-transition: -webkit-transform .3s ease;
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
  width: 93.3333333333vw;
  max-width: 100%;
}

.p-fvBtn img {
  width: 100%;
  height: auto;
}

.p-pcSideMenu {
  display: none;
}

.p-pcSideMenu__logo {
  text-align: center;
}

.p-pcSideMenu__logo img {
  max-width: 100%;
  height: auto;
}

.p-pcSideMenu__nav {
  gap: 15px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 20px;
  margin-top: 1.25rem;
}

.p-pcSideMenu__navItem {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  border: clamp(2px, .43px + .2vw, 3px) solid #fff;
  border-radius: 50vmax;
  background-color: rgba(0, 39, 77, .9);
  padding: 12px 20px;
  color: #fff;
  font-size: clamp(10px, -.29px + 1.34vw, 19px);
  font-weight: 600;
  text-decoration: none;
}

.p-pcSideMenu__navItem::after {
  aspect-ratio: 1/1;
  position: absolute;
  right: clamp(8px, -4.71px + 1.65vw, 18px);
  -webkit-mask-image: url('../img/icon_arrow.svg');
  mask-image: url('../img/icon_arrow.svg');
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-transition: background-color .3s ease;
  transition: background-color .3s ease;
  background-color: #fff;
  width: clamp(10px, -.29px + 1.34vw, 16px);
  content: '';
}

.p-pcSideMenu__cta {
  gap: 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  margin-top: 15px;
  border: clamp(2px, .43px + .2vw, 3px) solid #0C8D27;
  border-radius: 50vmax;
  background-color: #18AB37;
  padding: 14px 20px;
  color: #fff;
  font-size: clamp(10px, -.29px + 1.34vw, 19px);
  font-weight: 600;
  text-decoration: none;
}

.p-pcSideMenu__cta::after {
  aspect-ratio: 1/1;
  position: absolute;
  right: clamp(8px, -4.71px + 1.65vw, 18px);
  -webkit-mask-image: url('../img/icon_arrow_line.svg');
  mask-image: url('../img/icon_arrow_line.svg');
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-transition: background-color .3s ease;
  transition: background-color .3s ease;
  background-color: #fff;
  width: clamp(10px, -.29px + 1.34vw, 16px);
  content: '';
}

.p-pcSideMenu__qr {
  gap: 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 20px;
  margin-top: 1.25rem;
  border-radius: 2px;
  background-color: rgba(53, 96, 136, .8);
  padding: 12px clamp(5px, -7.29px + 1.6vw, 26px);
}

.p-pcSideMenu__qrText {
  color: #fff;
  font-size: clamp(10px, -.29px + 1.34vw, 19px);
  font-weight: 600;
  line-height: 1.4210526316;
  text-align: right;
}

.p-pcSideMenu__qrImg {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: clamp(50px, 11.43px + 5.02vw, 70px);
  height: clamp(50px, 11.43px + 5.02vw, 70px);
}

.p-pcSideMenu__qrImg img {
  border-radius: 5px;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

/************************************************************************
* p-trouble
************************************************************************/
.p-trouble {
  --cut-size: clamp(20px, calc(5.71px + 1.86vw), 30px);
  position: relative;
  z-index: 7;
  -webkit-clip-path: polygon(0 0, 100% var(--cut-size), 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% var(--cut-size), 100% 100%, 0 100%);
}

.p-trouble__img {
  aspect-ratio: 375/708;
}

.p-trouble__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/************************************************************************
* p-solution
************************************************************************/
.p-solution {
  position: relative;
  z-index: 6;
}

.p-solution__img {
  aspect-ratio: 375/858;
}

.p-solution__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/************************************************************************
* p-provide
* SP: vw(値, 375) - 375px基準
* PC: pcvw(値) - 768pxで375px、最大500px
************************************************************************/
.p-provide {
  position: relative;
  z-index: 5;
  margin-top: -8.5333333333vw;
}

.p-provide__img {
  aspect-ratio: 375/517;
}

.p-provide__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/************************************************************************
* p-voice
************************************************************************/
.p-voice {
  position: relative;
  z-index: 2;
}

.p-voice__img {
  aspect-ratio: 375/889;
}

.p-voice__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/************************************************************************
* p-about
* SP: vw(値, 375) - 375px基準
* PC: pcvw(値) - 768pxで375px、最大500px
************************************************************************/
.p-about {
  position: relative;
  z-index: 4;
  margin-top: -8.5333333333vw;
}

.p-about__img {
  aspect-ratio: 375/1997;
}

.p-about__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.p-about__flow {
  position: absolute;
  top: 59%;
  width: 100%;
  height: 0;
}

.p-about__btn {
  position: absolute;
  bottom: 13.3333333333vw;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 100%;
}

.p-about__btn a {
  aspect-ratio: 730/173;
  display: block;
  -webkit-transition: -webkit-transform .3s ease;
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
  margin: 0 auto;
  width: 97.3333333333vw;
}

.p-about__btn a img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/************************************************************************
* p-price
* SP: vw(値, 375) - 375px基準
* PC: pcvw(値) - 768pxで375px、最大500px
************************************************************************/
.p-price {
  position: relative;
  z-index: 3;
  background-color: #E3EAEF;
  padding: 21.3333333333vw 5.3333333333vw 13.3333333333vw;
}

.p-price::after {
  aspect-ratio: 375/32;
  position: absolute;
  bottom: 1px;
  left: 0;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  background: url('../img/price_bottom.svg') no-repeat center/100% 100%;
  width: 100%;
  content: '';
}

.p-price__title {
  aspect-ratio: 335/57;
  margin: 0 auto;
  width: 89.3333333333vw;
}

.p-price__title img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.p-price__edPeFee {
  margin-top: 7.4666666667vw;
}

.p-price__link {
  display: block;
  position: relative;
  -webkit-transition: -webkit-transform .3s ease;
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
  cursor: pointer;
  margin: .8vw auto 0;
  border: 3px solid #14518F;
  border-radius: 50vmax;
  background: #1D5C9E;
  padding: 4vw 5.3333333333vw;
  width: 100%;
  max-width: 80vw;
  color: #fff;
  font-size: 4.8vw;
  font-weight: 600;
  line-height: 1.2222222222;
  text-align: center;
}

.p-price__link::after {
  aspect-ratio: 1/1;
  position: absolute;
  top: 50%;
  right: 4vw;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-image: url('../img/icon_price_link.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 5.3333333333vw;
  content: '';
}

.p-price__link-text {
  color: #fff;
  font-size: 4.8vw;
  font-weight: 700;
}

.p-price__text {
  margin-bottom: calc(30 / 3.75 * 1vw);;
}

.p-price__trial {
  margin-top: 7.4666666667vw;
}

.p-price__trialTitle {
  position: relative;
  padding-left: 2.9333333333vw;
  color: #022F5E;
  font-size: 4.8vw;
  font-weight: 600;
}

.p-price__trialTitle::before {
  aspect-ratio: 6/20;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: #022F5E;
  width: 1.6vw;
  content: '';
}

.p-price__trialTitle::after {
  position: absolute;
  bottom: -1.3333333333vw;
  left: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(227, 234, 239, 0)), to(#E3EAEF));
  background: linear-gradient(180deg, rgba(227, 234, 239, 0) 0%, #E3EAEF 100%);
  width: 100%;
  height: 10.6666666667vw;
  pointer-events: none;
  content: '';
}

.p-price:has(.p-price__toggle.is-open) .p-price__trialTitle::after {
  display: none;
}

.p-price__accordionWrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.p-price__content {
  display: none;
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
}

.p-price__content > * + * {
  margin-top: 10.6666666667vw;
}

/************************************************************************
* p-cta
* SP: vw(値, 375) - 375px基準
* PC: pcvw(値) - 768pxで375px、最大500px
************************************************************************/
.l-cta {
  margin-top: -12vw;
}

.p-cta {
  position: relative;
  z-index: 1;
}

.p-cta__img {
  aspect-ratio: 375/935;
  position: relative;
}

.p-cta__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.p-cta__btn {
  position: absolute;
  bottom: 17.0666666667vw;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 2;
  width: 100%;
}

.p-cta__btn a {
  aspect-ratio: 350/71;
  display: block;
  -webkit-transition: -webkit-transform .3s ease;
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
  margin: 0 auto;
  width: 92vw;
}

.p-cta__btn a img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/************************************************************************
* アコーディオン
* SP: vw(値, 375) - 375px基準
* PC: pcvw(値) - 768pxで375px、最大500px
************************************************************************/
.p-accordion {
  gap: 12px;
  gap: .75rem;
  display: grid;
}

.p-accordion__item {
  border: 1px solid #AEC2D8;
  border-radius: .5rem;
  background-color: #fff;
  overflow: hidden;
}

.p-accordion__trigger {
  gap: 1em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-transition: background-color .3s ease;
  transition: background-color .3s ease;
  cursor: pointer;
  border: none;
  background-color: #fff;
  padding: 3.4666666667vw 4vw;
  width: 100%;
  text-align: left;
}

.p-accordion__text {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  color: #022F5E;
  font-size: 4vw;
  font-weight: 600;
}

.p-accordion__content {
  display: none;
  line-height: 1.7;
}

.p-accordion__inner {
  gap: 20px;
  gap: 1.25rem;
  display: grid;
  padding: 0 4vw 3.7333333333vw;
  font-size: 3.7333333333vw;
  line-height: 1.7142857143;
}

/************************************************************************
* p-medicinePriceSection
* SP: vw(値, 375) - 375px基準
* PC: pcvw(値) - 768pxで375px、最大500px
************************************************************************/
.p-trialMedicineSection__title {
  position: relative;
  padding-left: 2.9333333333vw;
  color: #022F5E;
  font-size: 4.8vw;
  font-weight: 600;
}

.p-trialMedicineSection__title::before {
  aspect-ratio: 6/20;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: #022F5E;
  width: 1.6vw;
  content: '';
}

/************************************************************************
* p-edSetMedicineSection
* SP: vw(値, 375) - 375px基準
* PC: pcvw(値) - 768pxで375px、最大500px
************************************************************************/
.p-edSetMedicineSection {
  margin-top: 12.8vw;
}

.p-edSetMedicineSection__title {
  font-size: 5.3333333333vw;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

.p-edSetMedicineSection .p-trialMedicineSection {
  margin-top: 5.3333333333vw;
}

/************************************************************************
* お薬3セット料金表（定期便・まとめ買い・バラ売り）汎用
* SP: vw(値, 375) - 375px基準
* PC: pcvw(値) - 768pxで375px、最大500px
************************************************************************/
.p-medicineSetPriceList {
  gap: 25px;
  gap: 1.5625rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 10px;
  margin-top: .625rem;
}

.p-medicineSetPrice {
  border: 1px solid #2C629A;
  border-radius: .5rem;
  background-color: #fff;
  overflow: hidden;
}

.p-medicineSetPrice__title {
  background-color: #022F5E;
  padding: 3.2vw 4vw 3.2vw 4vw;
  color: #fff;
  font-size: 4.8vw;
  font-weight: 600;
  line-height: 1.2222222222;
  text-align: center;
}

.p-medicineSetPrice__section {
  gap: 12px;
  gap: .75rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 15px 10px;
  padding: .9375rem .625rem;
}

.p-medicineSetPrice__sectionBody {
  border: 1px solid #AEC2D8;
  border-radius: .625rem;
  overflow: hidden;
}

.p-medicineSetPrice__sectionHeader {
  gap: 8px;
  gap: .5rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: #E0EAF3;
  padding: 1.3333333333vw 10px;
  padding: 1.3333333333vw .625rem;
}

.p-medicineSetPrice__sectionHeader--center {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.p-medicineSetPrice__icon {
  width: 16px;
  width: 1rem;
  height: 16px;
  height: 1rem;
}

.p-medicineSetPrice__sectionTitle {
  font-size: 4.2666666667vw;
  font-weight: 600;
}

.p-medicineSetPrice__subscriptionContent {
  border-radius: .5rem;
  padding: 8px 10px 12px;
  padding: .5rem .625rem .75rem;
  text-align: center;
}

.p-medicineSetPrice__period {
  border-bottom: 1px solid #e6e6e6;
  padding-bottom: 1.0666666667vw;
  font-size: 3.4666666667vw;
  font-weight: 600;
}

.p-medicineSetPrice__price {
  margin-top: 2.6666666667vw;
  font-size: 4vw;
  font-weight: 600;
}

.p-medicineSetPrice__price--subscription {
  font-size: 4.8vw;
}

.p-medicineSetPrice__price--bulk {
  font-size: 4vw;
}

.p-medicineSetPrice__unit {
  font-size: 2.6666666667vw;
}

.p-medicineSetPrice__unit--subscription {
  font-size: 3.2vw;
}

.p-medicineSetPrice__unit--bulk {
  font-size: 2.6666666667vw;
}

.p-medicineSetPrice__perPrice {
  gap: 2px;
  gap: .125rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 5px;
  margin-top: .3125rem;
  border-radius: .125rem;
  background-color: #FAFAFA;
  padding: 3px 10px;
  padding: .1875rem .625rem;
}

.p-medicineSetPrice__perPrice--set {
  margin-inline: auto;
  width: 90%;
}

.p-medicineSetPrice__perLabel {
  font-size: 2.1333333333vw;
  font-weight: 600;
  line-height: 1;
}

.p-medicineSetPrice__perValue {
  color: #FF8C27;
  font-size: 3.2vw;
  font-weight: 600;
  line-height: 1;
}

.p-medicineSetPrice__perValue span {
  font-size: 2.4vw;
}

.p-medicineSetPrice__bulkContent {
  gap: 2px;
  gap: .125rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-right: 4px;
  padding-right: .25rem;
  padding-left: 4px;
  padding-left: .25rem;
}

.p-medicineSetPrice__bulkItem {
  padding: 12px 0 10px 0;
  padding: .75rem 0 .625rem 0;
  text-align: center;
}

.p-medicineSetPrice__bulkSet {
  border-radius: .1875rem .1875rem 0 0;
  background-color: #E0EAF3;
  padding: 3px 4px 5px 4px;
  padding: .1875rem .25rem .3125rem .25rem;
  font-size: 3.2vw;
  font-weight: 600;
}

.p-medicineSetPrice__singleContent {
  padding: 12px 0 10px;
  padding: .75rem 0 .625rem;
  text-align: center;
}

.p-medicineSetPrice__singlePrice {
  font-size: 4.8vw;
  font-weight: 600;
}

.p-medicineSetPrice__singlePrice span {
  font-size: 3.2vw;
}

.p-medicineSetPrice__note {
  margin-top: -5px;
  margin-top: -.3125rem;
  font-size: 3.2vw;
  line-height: 1.75;
  text-align: left;
}

.p-medicineSetPrice__caution {
  margin-top: 12px;
  margin-top: .75rem;
  font-size: 3.2vw;
}

.p-medicineSetPrice__caution + .p-medicineSetPrice__caution {
  margin-top: 5px;
  margin-top: .3125rem;
}

/************************************************************************
* 単剤処方 料金表
* SP: vw(値, 375) - 375px基準
* PC: pcvw(値) - 768pxで375px、最大500px
************************************************************************/
.p-singleMedicinePriceSection {
  margin-top: 10.6666666667vw;
}

.p-singleMedicinePriceSection--smallMargin {
  margin-top: 5.3333333333vw;
}

.p-singleMedicinePriceList {
  gap: 30px;
  gap: 1.875rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 2.6666666667vw;
}

.p-singleMedicinePrice {
  border: 1px solid #2C629A;
  border-radius: .5rem;
  background-color: #fff;
  overflow: hidden;
}

.p-singleMedicinePrice__header {
  border-radius: .5rem .5rem 0 0;
  background-color: #022F5E;
  padding: 3.2vw 4vw 3.7333333333vw 4vw;
}

.p-singleMedicinePrice__title {
  color: #fff;
  font-size: 4.8vw;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.p-singleMedicinePrice__body {
  padding-top: 2.6666666667vw;
  padding-bottom: 3.2vw;
}

.p-singleMedicinePrice__singlePurchase {
  gap: 10px;
  gap: .625rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-right: 1.3333333333vw;
  margin-left: 1.3333333333vw;
  border-bottom: 1px solid #E6E6E6;
  padding-bottom: 1.6vw;
}

.p-singleMedicinePrice__singleLabel {
  color: #022F5E;
  font-size: 4.2666666667vw;
  font-weight: 600;
}

.p-singleMedicinePrice__singlePrice {
  color: #C71000;
  font-size: 4.8vw;
  font-weight: 700;
}

.p-singleMedicinePrice__price.p-singleMedicinePrice__price--small {
  margin-top: 2.6666666667vw;
  font-size: 4vw;
}

.p-singleMedicinePrice__unit.p-singleMedicinePrice__unit--small {
  font-size: 2.6666666667vw;
}

.p-singleMedicinePrice__subscriptionHeader {
  gap: 4px;
  gap: .25rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 3.2vw 4vw .8vw;
}

.p-singleMedicinePrice__icon {
  width: 14px;
  width: .875rem;
  height: 14px;
  height: .875rem;
}

.p-singleMedicinePrice__subscriptionTitle {
  font-size: 3.4666666667vw;
  font-weight: 600;
}

.p-singleMedicinePrice__options {
  gap: 5px;
  gap: .3125rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-right: 1.3333333333vw;
  padding-left: 1.3333333333vw;
}

.p-singleMedicinePrice__option {
  text-align: center;
}

.p-singleMedicinePrice__period {
  border-radius: .1875rem .1875rem 0 0;
  background-color: #E0EAF3;
  padding: .8vw .8vw 1.0666666667vw .8vw;
  font-size: 3.2vw;
  font-weight: 600;
}

.p-singleMedicinePrice__price {
  color: #022F5E;
  font-size: 4.8vw;
  font-weight: 700;
  line-height: 1;
}

.p-singleMedicinePrice__unit {
  font-size: 3.2vw;
}

.p-singleMedicinePrice__perMonth {
  gap: 2px;
  gap: .125rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 3.2vw;
  margin-right: auto;
  margin-left: auto;
  border-radius: .125rem .125rem 0 0;
  background-color: #FAFAFA;
  padding: .8vw 1.3333333333vw;
  width: 90%;
}

.p-singleMedicinePrice__perMonthLabel {
  font-size: 2.1333333333vw;
  font-weight: 600;
  line-height: 1;
}

.p-singleMedicinePrice__perMonthPrice {
  color: #FF8C27;
  font-size: 3.4666666667vw;
  font-weight: 600;
  line-height: 1;
}

.p-singleMedicinePrice__perMonthUnit {
  font-size: 2.4vw;
  font-weight: 600;
}

.p-singleMedicinePrice__note {
  margin-top: 2.6666666667vw;
  padding: 0 2.6666666667vw;
  font-size: 3.2vw;
  text-align: left;
}

/************************************************************************
* 定期便・お薬の追加配送についてセクション
* SP: vw(値, 375) - 375px基準
* PC: pcvw(値) - 768pxで375px、最大500px
************************************************************************/
.p-lpSubscription {
  border: 1px solid #2C629A;
  border-radius: .5rem;
  background-color: #fff;
  padding: 6.6666666667vw 4vw 5.3333333333vw;
}

.p-lpSubscription__mainTitle {
  position: relative;
  padding-bottom: 1.3333333333vw;
  font-size: 4.8vw;
  font-weight: 600;
  line-height: 1.6111111111;
}

.p-lpSubscription__mainTitle::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 100vh;
  background-color: #2C629A;
  width: 100%;
  height: .5333333333vw;
  content: '';
}

.p-lpSubscription__contents {
  gap: 9.3333333333vw;
  display: grid;
}

/************************************************************************
* 定期便セクション
************************************************************************/
.p-lpSubscription__intro {
  margin-top: 4.5333333333vw;
}

.p-lpSubscription__introTitle {
  position: relative;
  padding-left: 5.8666666667vw;
  font-size: 4.2666666667vw;
  font-weight: 600;
}

.p-lpSubscription__introTitle::before {
  aspect-ratio: 1;
  display: block;
  position: absolute;
  top: .5lh;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-image: url(../img/icon_subscription.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 4.2666666667vw;
  content: '';
}

.p-lpSubscription__introContent {
  margin-top: .8vw;
}

.p-lpSubscription__introText {
  font-size: 3.7333333333vw;
  line-height: 1.7142857143;
}

.p-lpSubscription__introNoteList {
  gap: .5333333333vw;
  display: grid;
  margin-top: 2.1333333333vw;
}

.p-lpSubscription__introNote {
  font-size: 3.2vw;
}

.p-lpSubscription__tabs {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 3.2vw;
  border-bottom: 2px solid #022F5E;
  border-radius: 2.6666666667vw 2.6666666667vw 0 0;
  background-color: #F8F8F8;
  overflow: clip;
}

.p-lpSubscription__tab {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 0;
  -ms-flex: 1 0 0;
  flex: 1 0 0;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  cursor: pointer;
  padding: 2.1333333333vw 1.3333333333vw;
  color: #022F5E;
  font-size: 3.2vw;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.p-lpSubscription__tab:not(:last-child)::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: #d6d6d6;
  width: 1px;
  height: 1.3lh;
  content: '';
}

.p-lpSubscription__tab:has(+ .is-active)::after {
  background-color: transparent;
}

.p-lpSubscription__tab:hover {
  background-color: rgba(93, 209, 196, .1);
}

.p-lpSubscription__tab.is-active {
  border-radius: 2.6666666667vw 2.6666666667vw 0 0;
  border-color: #022F5E;
  background-color: #022F5E;
  color: #fff;
}

.p-lpSubscription__tab.is-active::after {
  background-color: transparent;
}

.p-lpSubscription__tabContent {
  display: none;
  margin-top: 1.3333333333vw;
}

.p-lpSubscription__tabContent.is-active {
  display: block;
}

.p-lpSubscription__flowSection {
  margin-top: 6.6666666667vw;
}

.p-lpSubscription__flowSection:first-of-type {
  margin-top: 0;
}

.p-lpSubscription__flowLabel {
  font-size: 4vw;
  font-weight: 600;
}

.p-lpSubscription__flowSteps {
  gap: 1.0666666667vw;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 1.3333333333vw;
}

.p-lpSubscription__stepContainer {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 0;
  -ms-flex: 1 0 0;
  flex: 1 0 0;
  padding-right: 3.7333333333vw;
}

.p-lpSubscription__stepContainer:last-child {
  padding-right: 0;
}

.p-lpSubscription__stepContainer:not(:last-child)::after {
  aspect-ratio: 8/14;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background-color: #AEC2D8;
  width: 2.1333333333vw;
  content: '';
}

.p-lpSubscription__step {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: 2px solid #AEC2D8;
  border-radius: 2.1333333333vw;
  padding: 1.3333333333vw .5333333333vw;
  height: 100%;
}

.p-lpSubscription__stepIcon {
  aspect-ratio: 50/40;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 13.3333333333vw;
}

.p-lpSubscription__stepIcon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.p-lpSubscription__stepText {
  margin-top: .5333333333vw;
  font-size: 2.9333333333vw;
  font-weight: 600;
  text-align: center;
}

.p-lpSubscription__stepTextSmall {
  font-size: 2.4vw;
}

.p-lpSubscription__notice {
  margin-top: 2.6666666667vw;
  text-align: center;
}

.p-lpSubscription__noticeText {
  display: inline-block;
  position: relative;
  border-radius: 100vh;
  background-color: #2C629A;
  padding: .8vw 5.3333333333vw;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: #fff;
  font-size: 3.2vw;
  font-weight: 600;
  text-align: center;
}

.p-lpSubscription__noticeText::before {
  aspect-ratio: 12/8;
  position: absolute;
  bottom: 99%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: #2C629A;
  width: 3.2vw;
  content: '';
}

.p-lpSubscription__noticeTextHighlight {
  color: #FFFD7B;
}

.p-lpSubscription__description {
  gap: .8em;
  display: grid;
  margin-top: 5.3333333333vw;
  font-size: 3.2vw;
}

/************************************************************************
* お薬の追加配送について
************************************************************************/
.p-lpSubscription__additionalText {
  gap: .8em;
  display: grid;
  margin-top: 2.6666666667vw;
  font-size: 3.7333333333vw;
  line-height: 1.7142857143;
}

.p-lpSubscription__accordion {
  margin-top: 2.6666666667vw;
}

.p-lpSubscription__title {
  position: relative;
  padding-left: 3.2vw;
  font-size: 4.2666666667vw;
  font-weight: 600;
  line-height: 1.385;
}

.p-lpSubscription__title::before {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: #022F5E;
  width: 1.6vw;
  height: 4.8vw;
  content: '';
}

/************************************************************************
* p-edPeFee
* SP: vw(値, 375) - 375px基準
* PC: pcvw(値) - 768pxで375px、最大500px
************************************************************************/
.p-edPeFee {
  gap: 5px;
  gap: .3125rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.p-edPeFee__item {
  gap: 4px;
  gap: .25rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: 1px solid #2C629A;
  border-radius: .5rem;
  background-color: #fff;
  padding: .8vw 5.3333333333vw;
}

.p-edPeFee__label {
  color: #022F5E;
  font-size: 4.2666666667vw;
  font-weight: 600;
  line-height: 1.375;
}

.p-edPeFee__value {
  color: #C71000;
  font-size: 5.6vw;
  font-weight: 600;
}

.p-edPeFee__unit {
  font-size: 4vw;
  font-weight: 600;
  line-height: 1.4666666667;
}

@media screen and (min-width: 768px) {

  html,
  body {
    overflow-x: clip;
  }

  body {
    background: #010E1A;
  }

  .l-container {
    width: clamp(375px, 34.72vw, 500px);
  }

  .l-container.l-container--narrow {
    max-width: 908px;
  }

  .l-container.l-container--wide {
    max-width: 1332px;
  }

  .l-main {
    margin-top: 0;
    background: linear-gradient(180deg, #010E1A 0, #04396B 1200px);
    background-color: #04396B;
  }

  .l-solution {
    margin-top: clamp(-58.6666666667px, -4.0740740741vw, -44px);
  }

  .l-price {
    margin-top: clamp(-33px, -2.7777777778vw, -30px);
  }

  .c-toggleIcon {
    margin-top: clamp(2px, .1851851852vw, 2.6666666667px);
    width: clamp(18px, 1.6666666667vw, 24px);
  }

  .c-toggleIcon span:first-child {
    width: clamp(10px, .9259259259vw, 13.3333333333px);
    height: clamp(2px, .1851851852vw, 2.6666666667px);
  }

  .c-toggleIcon span:last-child {
    width: clamp(2px, .1851851852vw, 2.6666666667px);
    height: clamp(10px, .9259259259vw, 13.3333333333px);
  }

  .p-fv {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    overflow: hidden;
  }

  .p-fv__img {
    aspect-ratio: revert;
    width: 100%;
    height: 100svh;
  }

  .p-fvBtn {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: -25svh;
    background: transparent -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(83%, #010C16), to(#010E1A)) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #010C16 83%, #010E1A 100%) 0% 0% no-repeat padding-box;
    padding: 25px 0;
  }

  .p-fvBtn a {
    width: 375px;
    max-width: 90%;
  }

  .p-pcSideMenu {
    --clip-top: 100%;
    display: block;
    position: fixed;
    top: 50%;
    left: calc((100vw - clamp(375px, 34.72vw, 500px)) / 4);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 100;
    -webkit-clip-path: inset(var(--clip-top) 0 0 0);
    clip-path: inset(var(--clip-top) 0 0 0);
    width: clamp(170px, 19.14px + 19.64vw, 302px);
  }

  .p-provide {
    margin-top: clamp(-42.6666666667px, -2.962962963vw, -32px);
  }

  .p-provide__img {
    aspect-ratio: 500/689;
  }

  .p-about {
    position: relative;
    margin-top: clamp(-42.6666666667px, -2.962962963vw, -32px);
    background-color: #E3EAEF;
  }

  .p-about__btn {
    bottom: clamp(50px, 4.6296296296vw, 66.6666666667px);
  }

  .p-about__btn a {
    width: clamp(365px, 33.7962962963vw, 486.6666666667px);
  }

  .p-price {
    padding: clamp(80px, 6.4814814815vw, 80px) 0 clamp(50px, 3.7037037037vw, 60px);
  }

  .p-price__title {
    width: clamp(335px, 31.0185185185vw, 446.6666666667px);
  }

  .p-price__edPeFee {
    margin-top: clamp(28px, 2.5925925926vw, 37.3333333333px);
  }

  .p-price__link {
    margin: 0 auto;
    padding: clamp(22px, 1.3888888889vw, 20px) clamp(20px, 1.8518518519vw, 26.6666666667px);
    max-width: clamp(300px, 27.7777777778vw, 400px);
    font-size: clamp(18px, 1.6666666667vw, 24px);
  }

  .p-price__link::after {
    right: clamp(15px, 1.3888888889vw, 20px);
    width: clamp(20px, 1.8518518519vw, 24px);
  }

  .p-price__link-text {
    font-size: clamp(18px, 1.6666666667vw, 24px);
  }

  .p-price__trial {
    margin-top: clamp(28px, 2.5925925926vw, 37.3333333333px);
  }

  .p-price__trialTitle {
    padding-left: clamp(11px, 1.0185185185vw, 14.6666666667px);
    font-size: clamp(18px, 1.6666666667vw, 24px);
  }

  .p-price__trialTitle::before {
    width: clamp(6px, .5555555556vw, 8px);
  }

  .p-price__trialTitle::after {
    bottom: clamp(-6.6666666667px, -.462962963vw, -5px);
    height: clamp(40px, 3.7037037037vw, 53.3333333333px);
  }

  .p-price__content > * + * {
    margin-top: clamp(40px, 3.7037037037vw, 53.3333333333px);
  }

  .p-price__text {
    margin-bottom: clamp(30px, 2.986vw, 43px);
  }

  .l-cta {
    margin-top: clamp(-60px, -4.1666666667vw, -45px);
  }

  .p-cta__img::before {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 0;
    background: url('../img/cta_bg_pc.png') no-repeat center top;
    background-size: cover;
    width: 100vw;
    height: 100%;
    content: '';
  }

  .p-cta__img img {
    position: relative;
    z-index: 1;
  }

  .p-cta__btn {
    bottom: clamp(64px, 5.9259259259vw, 85.3333333333px);
  }

  .p-cta__btn a {
    width: clamp(345px, 31.9444444444vw, 460px);
  }

  .p-accordion {
    gap: clamp(12px, 1.1111111111vw, 16px);
  }

  .p-accordion__item {
    border-radius: clamp(8px, .7407407407vw, 10.6666666667px);
  }

  .p-accordion__trigger {
    padding: clamp(13px, 1.2037037037vw, 17.3333333333px) clamp(15px, 1.3888888889vw, 20px);
  }

  .p-accordion__text {
    font-size: clamp(15px, 1.3888888889vw, 20px);
  }

  .p-accordion__inner {
    gap: clamp(20px, 1.8518518519vw, 26.6666666667px);
    padding: 0 clamp(15px, 1.3888888889vw, 20px) clamp(14px, 1.2962962963vw, 18.6666666667px);
    font-size: clamp(14px, 1.2962962963vw, 18.6666666667px);
  }

  .p-trialMedicineSection__title {
    padding-left: clamp(11px, 1.0185185185vw, 14.6666666667px);
    font-size: clamp(18px, 1.6666666667vw, 24px);
  }

  .p-trialMedicineSection__title::before {
    width: clamp(6px, .5555555556vw, 8px);
  }

  .p-edSetMedicineSection {
    margin-top: clamp(48px, 4.4444444444vw, 64px);
  }

  .p-edSetMedicineSection__title {
    font-size: clamp(20px, 1.8518518519vw, 26.6666666667px);
  }

  .p-edSetMedicineSection .p-trialMedicineSection {
    margin-top: clamp(20px, 1.8518518519vw, 26.6666666667px);
  }

  .p-medicineSetPriceList {
    gap: clamp(25px, 2.3148148148vw, 33.3333333333px);
    margin-top: clamp(10px, .9259259259vw, 13.3333333333px);
  }

  .p-medicineSetPrice {
    border-radius: clamp(8px, .7407407407vw, 10.6666666667px);
  }

  .p-medicineSetPrice__title {
    padding: clamp(12px, 1.1111111111vw, 16px) clamp(15px, 1.3888888889vw, 20px) clamp(12px, 1.1111111111vw, 16px) clamp(15px, 1.3888888889vw, 20px);
    font-size: clamp(18px, 1.6666666667vw, 24px);
  }

  .p-medicineSetPrice__section {
    gap: clamp(12px, 1.1111111111vw, 16px);
    padding: clamp(15px, 1.3888888889vw, 20px) clamp(10px, .9259259259vw, 13.3333333333px);
  }

  .p-medicineSetPrice__sectionBody {
    border-radius: clamp(10px, .9259259259vw, 13.3333333333px);
  }

  .p-medicineSetPrice__sectionHeader {
    gap: clamp(8px, .7407407407vw, 10.6666666667px);
    padding: clamp(5px, .462962963vw, 6.6666666667px) clamp(10px, .9259259259vw, 13.3333333333px);
  }

  .p-medicineSetPrice__icon {
    width: clamp(16px, 1.4814814815vw, 21.3333333333px);
    height: clamp(16px, 1.4814814815vw, 21.3333333333px);
  }

  .p-medicineSetPrice__sectionTitle {
    font-size: clamp(16px, 1.4814814815vw, 21.3333333333px);
  }

  .p-medicineSetPrice__subscriptionContent {
    border-radius: clamp(8px, .7407407407vw, 10.6666666667px);
    padding: clamp(8px, .7407407407vw, 10.6666666667px) clamp(10px, .9259259259vw, 13.3333333333px) clamp(12px, 1.1111111111vw, 16px);
  }

  .p-medicineSetPrice__period {
    padding-bottom: clamp(4px, .3703703704vw, 5.3333333333px);
    font-size: clamp(13px, 1.2037037037vw, 17.3333333333px);
  }

  .p-medicineSetPrice__price {
    margin-top: clamp(10px, .9259259259vw, 13.3333333333px);
    font-size: clamp(15px, 1.3888888889vw, 20px);
  }

  .p-medicineSetPrice__price--subscription {
    font-size: clamp(18px, 1.6666666667vw, 24px);
  }

  .p-medicineSetPrice__price--bulk {
    font-size: clamp(15px, 1.3888888889vw, 20px);
  }

  .p-medicineSetPrice__unit {
    font-size: clamp(10px, .9259259259vw, 13.3333333333px);
  }

  .p-medicineSetPrice__unit--subscription {
    font-size: clamp(12px, 1.1111111111vw, 16px);
  }

  .p-medicineSetPrice__unit--bulk {
    font-size: clamp(10px, .9259259259vw, 13.3333333333px);
  }

  .p-medicineSetPrice__perPrice {
    gap: clamp(2px, .1851851852vw, 2.6666666667px);
    margin-top: clamp(5px, .462962963vw, 6.6666666667px);
    border-radius: clamp(2px, .1851851852vw, 2.6666666667px);
    padding: clamp(3px, .2777777778vw, 4px) clamp(10px, .9259259259vw, 13.3333333333px);
  }

  .p-medicineSetPrice__perLabel {
    font-size: clamp(8px, .7407407407vw, 10.6666666667px);
  }

  .p-medicineSetPrice__perValue {
    font-size: clamp(12px, 1.1111111111vw, 16px);
  }

  .p-medicineSetPrice__perValue span {
    font-size: clamp(9px, .8333333333vw, 12px);
  }

  .p-medicineSetPrice__bulkContent {
    gap: clamp(2px, .1851851852vw, 2.6666666667px);
    padding-right: clamp(4px, .3703703704vw, 5.3333333333px);
    padding-left: clamp(4px, .3703703704vw, 5.3333333333px);
  }

  .p-medicineSetPrice__bulkItem {
    padding: clamp(12px, 1.1111111111vw, 16px) 0 clamp(10px, .9259259259vw, 13.3333333333px) 0;
  }

  .p-medicineSetPrice__bulkSet {
    border-radius: clamp(3px, .2777777778vw, 4px) clamp(3px, .2777777778vw, 4px) 0 0;
    padding: clamp(3px, .2777777778vw, 4px) clamp(4px, .3703703704vw, 5.3333333333px) clamp(5px, .462962963vw, 6.6666666667px) clamp(4px, .3703703704vw, 5.3333333333px);
    font-size: clamp(12px, 1.1111111111vw, 16px);
  }

  .p-medicineSetPrice__singleContent {
    padding: clamp(12px, 1.1111111111vw, 16px) 0 clamp(10px, .9259259259vw, 13.3333333333px);
  }

  .p-medicineSetPrice__singlePrice {
    font-size: clamp(18px, 1.6666666667vw, 24px);
  }

  .p-medicineSetPrice__singlePrice span {
    font-size: clamp(12px, 1.1111111111vw, 16px);
  }

  .p-medicineSetPrice__note {
    margin-top: clamp(-6.6666666667px, -.462962963vw, -5px);
    font-size: clamp(12px, 1.1111111111vw, 16px);
  }

  .p-medicineSetPrice__caution {
    margin-top: clamp(12px, 1.1111111111vw, 16px);
    font-size: clamp(12px, 1.1111111111vw, 16px);
  }

  .p-medicineSetPrice__caution + .p-medicineSetPrice__caution {
    margin-top: clamp(5px, .462962963vw, 6.6666666667px);
  }

  .p-singleMedicinePriceSection {
    margin-top: clamp(40px, 3.7037037037vw, 53.3333333333px);
  }

  .p-singleMedicinePriceSection--smallMargin {
    margin-top: clamp(20px, 1.8518518519vw, 26.6666666667px);
  }

  .p-singleMedicinePriceList {
    gap: clamp(30px, 2.7777777778vw, 40px);
    margin-top: clamp(10px, .9259259259vw, 13.3333333333px);
  }

  .p-singleMedicinePrice {
    border-radius: clamp(8px, .7407407407vw, 10.6666666667px);
  }

  .p-singleMedicinePrice__header {
    border-radius: clamp(8px, .7407407407vw, 10.6666666667px) clamp(8px, .7407407407vw, 10.6666666667px) 0 0;
    padding: clamp(12px, 1.1111111111vw, 16px) clamp(15px, 1.3888888889vw, 20px) clamp(14px, 1.2962962963vw, 18.6666666667px) clamp(15px, 1.3888888889vw, 20px);
  }

  .p-singleMedicinePrice__title {
    font-size: clamp(18px, 1.6666666667vw, 24px);
  }

  .p-singleMedicinePrice__body {
    padding-top: clamp(10px, .9259259259vw, 13.3333333333px);
    padding-bottom: clamp(12px, 1.1111111111vw, 16px);
  }

  .p-singleMedicinePrice__singlePurchase {
    gap: clamp(10px, .9259259259vw, 13.3333333333px);
    margin-right: clamp(5px, .462962963vw, 6.6666666667px);
    margin-left: clamp(5px, .462962963vw, 6.6666666667px);
    padding-bottom: clamp(6px, .5555555556vw, 8px);
  }

  .p-singleMedicinePrice__singleLabel {
    font-size: clamp(16px, 1.4814814815vw, 21.3333333333px);
  }

  .p-singleMedicinePrice__singlePrice {
    font-size: clamp(18px, 1.6666666667vw, 24px);
  }

  .p-singleMedicinePrice__price.p-singleMedicinePrice__price--small {
    margin-top: clamp(10px, .9259259259vw, 13.3333333333px);
    font-size: clamp(15px, 1.3888888889vw, 20px);
  }

  .p-singleMedicinePrice__unit.p-singleMedicinePrice__unit--small {
    font-size: clamp(10px, .9259259259vw, 13.3333333333px);
  }

  .p-singleMedicinePrice__subscriptionHeader {
    gap: clamp(4px, .3703703704vw, 5.3333333333px);
    padding: clamp(12px, 1.1111111111vw, 16px) clamp(15px, 1.3888888889vw, 20px) clamp(3px, .2777777778vw, 4px);
  }

  .p-singleMedicinePrice__icon {
    width: clamp(14px, 1.2962962963vw, 18.6666666667px);
    height: clamp(14px, 1.2962962963vw, 18.6666666667px);
  }

  .p-singleMedicinePrice__subscriptionTitle {
    font-size: clamp(13px, 1.2037037037vw, 17.3333333333px);
  }

  .p-singleMedicinePrice__options {
    gap: clamp(5px, .462962963vw, 6.6666666667px);
    padding-right: clamp(5px, .462962963vw, 6.6666666667px);
    padding-left: clamp(5px, .462962963vw, 6.6666666667px);
  }

  .p-singleMedicinePrice__period {
    border-radius: clamp(3px, .2777777778vw, 4px) clamp(3px, .2777777778vw, 4px) 0 0;
    padding: clamp(3px, .2777777778vw, 4px) clamp(3px, .2777777778vw, 4px) clamp(4px, .3703703704vw, 5.3333333333px) clamp(3px, .2777777778vw, 4px);
    font-size: clamp(12px, 1.1111111111vw, 16px);
  }

  .p-singleMedicinePrice__price {
    font-size: clamp(18px, 1.6666666667vw, 24px);
  }

  .p-singleMedicinePrice__unit {
    font-size: clamp(12px, 1.1111111111vw, 16px);
  }

  .p-singleMedicinePrice__perMonth {
    gap: clamp(2px, .1851851852vw, 2.6666666667px);
    margin-top: clamp(12px, 1.1111111111vw, 16px);
    border-radius: clamp(2px, .1851851852vw, 2.6666666667px) clamp(2px, .1851851852vw, 2.6666666667px) 0 0;
    padding: clamp(3px, .2777777778vw, 4px) clamp(5px, .462962963vw, 6.6666666667px);
  }

  .p-singleMedicinePrice__perMonthLabel {
    font-size: clamp(8px, .7407407407vw, 10.6666666667px);
  }

  .p-singleMedicinePrice__perMonthPrice {
    font-size: clamp(13px, 1.2037037037vw, 17.3333333333px);
  }

  .p-singleMedicinePrice__perMonthUnit {
    font-size: clamp(9px, .8333333333vw, 12px);
  }

  .p-singleMedicinePrice__note {
    margin-top: clamp(10px, .9259259259vw, 13.3333333333px);
    padding: 0 clamp(10px, .9259259259vw, 13.3333333333px);
    font-size: clamp(12px, 1.1111111111vw, 16px);
  }

  .p-lpSubscription {
    border-radius: clamp(8px, .7407407407vw, 10.6666666667px);
    padding: clamp(25px, 2.3148148148vw, 33.3333333333px) clamp(15px, 1.3888888889vw, 20px) clamp(20px, 1.8518518519vw, 26.6666666667px);
  }

  .p-lpSubscription__mainTitle {
    padding-bottom: clamp(5px, .462962963vw, 6.6666666667px);
    font-size: clamp(18px, 1.6666666667vw, 24px);
  }

  .p-lpSubscription__mainTitle::before {
    height: clamp(2px, .1851851852vw, 2.6666666667px);
  }

  .p-lpSubscription__contents {
    gap: clamp(35px, 3.2407407407vw, 46.6666666667px);
  }

  .p-lpSubscription__intro {
    margin-top: clamp(17px, 1.5740740741vw, 22.6666666667px);
  }

  .p-lpSubscription__introTitle {
    padding-left: clamp(22px, 2.037037037vw, 29.3333333333px);
    font-size: clamp(16px, 1.4814814815vw, 21.3333333333px);
  }

  .p-lpSubscription__introTitle::before {
    width: clamp(16px, 1.4814814815vw, 21.3333333333px);
  }

  .p-lpSubscription__introContent {
    margin-top: clamp(3px, .2777777778vw, 4px);
  }

  .p-lpSubscription__introText {
    font-size: clamp(14px, 1.2962962963vw, 18.6666666667px);
  }

  .p-lpSubscription__introNoteList {
    gap: clamp(2px, .1851851852vw, 2.6666666667px);
    margin-top: clamp(8px, .7407407407vw, 10.6666666667px);
  }

  .p-lpSubscription__introNote {
    font-size: clamp(12px, 1.1111111111vw, 16px);
  }

  .p-lpSubscription__tabs {
    margin-top: clamp(12px, 1.1111111111vw, 16px);
    border-radius: clamp(10px, .9259259259vw, 13.3333333333px) clamp(10px, .9259259259vw, 13.3333333333px) 0 0;
  }

  .p-lpSubscription__tab {
    padding: clamp(8px, .7407407407vw, 10.6666666667px) clamp(5px, .462962963vw, 6.6666666667px);
    font-size: clamp(12px, 1.1111111111vw, 16px);
  }

  .p-lpSubscription__tab.is-active {
    border-radius: clamp(10px, .9259259259vw, 13.3333333333px) clamp(10px, .9259259259vw, 13.3333333333px) 0 0;
  }

  .p-lpSubscription__tabContent {
    margin-top: clamp(5px, .462962963vw, 6.6666666667px);
  }

  .p-lpSubscription__flowSection {
    margin-top: clamp(25px, 2.3148148148vw, 33.3333333333px);
  }

  .p-lpSubscription__flowLabel {
    font-size: clamp(15px, 1.3888888889vw, 20px);
  }

  .p-lpSubscription__flowSteps {
    gap: clamp(4px, .3703703704vw, 5.3333333333px);
    margin-top: clamp(5px, .462962963vw, 6.6666666667px);
  }

  .p-lpSubscription__stepContainer {
    padding-right: clamp(14px, 1.2962962963vw, 18.6666666667px);
  }

  .p-lpSubscription__stepContainer:not(:last-child)::after {
    aspect-ratio: 12/18;
    width: clamp(8px, 1.1111111111vw, 12px);
  }

  .p-lpSubscription__step {
    border-radius: clamp(8px, .7407407407vw, 10.6666666667px);
    padding: clamp(5px, .462962963vw, 6.6666666667px) clamp(2px, .1851851852vw, 2.6666666667px);
  }

  .p-lpSubscription__stepIcon {
    width: clamp(50px, 4.6296296296vw, 66.6666666667px);
  }

  .p-lpSubscription__stepText {
    margin-top: clamp(2px, .1851851852vw, 2.6666666667px);
    font-size: clamp(11px, 1.0185185185vw, 14.6666666667px);
  }

  .p-lpSubscription__stepTextSmall {
    font-size: clamp(9px, .8333333333vw, 12px);
  }

  .p-lpSubscription__notice {
    margin-top: clamp(10px, .9259259259vw, 13.3333333333px);
  }

  .p-lpSubscription__noticeText {
    padding: clamp(3px, .2777777778vw, 4px) clamp(20px, 1.8518518519vw, 26.6666666667px);
    font-size: clamp(12px, 1.1111111111vw, 16px);
  }

  .p-lpSubscription__noticeText::before {
    width: clamp(12px, 1.1111111111vw, 16px);
  }

  .p-lpSubscription__description {
    margin-top: clamp(20px, 1.8518518519vw, 26.6666666667px);
    font-size: clamp(12px, 1.1111111111vw, 16px);
  }

  .p-lpSubscription__additionalText {
    margin-top: clamp(10px, .9259259259vw, 13.3333333333px);
    font-size: clamp(14px, 1.2962962963vw, 18.6666666667px);
  }

  .p-lpSubscription__accordion {
    margin-top: clamp(10px, .9259259259vw, 13.3333333333px);
  }

  .p-lpSubscription__title {
    padding-left: clamp(12px, 1.1111111111vw, 16px);
    font-size: clamp(16px, 1.4814814815vw, 21.3333333333px);
  }

  .p-lpSubscription__title::before {
    width: clamp(6px, .5555555556vw, 8px);
    height: clamp(18px, 1.6666666667vw, 24px);
  }

  .p-edPeFee {
    gap: clamp(5px, .462962963vw, 6.6666666667px);
  }

  .p-edPeFee__item {
    gap: clamp(4px, .3703703704vw, 5.3333333333px);
    border-radius: clamp(8px, .7407407407vw, 10.6666666667px);
    padding: clamp(3px, .2777777778vw, 4px) clamp(20px, 1.8518518519vw, 26.6666666667px);
  }

  .p-edPeFee__label {
    font-size: clamp(16px, 1.4814814815vw, 21.3333333333px);
  }

  .p-edPeFee__value {
    font-size: clamp(21px, 1.9444444444vw, 28px);
  }

  .p-edPeFee__unit {
    font-size: clamp(15px, 1.3888888889vw, 20px);
  }
  
}

@media (hover: hover) {

  .p-fvBtn a:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  .p-pcSideMenu__navItem:hover {
    background-color: #fff;
    color: #022F5E;
  }

  .p-pcSideMenu__navItem:hover::after {
    background-color: #022F5E;
  }

  .p-pcSideMenu__cta:hover {
    background-color: #fff;
    color: #0C8D27;
  }

  .p-pcSideMenu__cta:hover::after {
    background-color: #0C8D27;
  }

  .p-about__btn a:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  .p-price__link:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  .p-cta__btn a:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
}