@charset "UTF-8";

:root {
  --white: #ffffff;
  --black: #000000;
  --pink: #e4004f;
  --palepink: #fbe5e8;
  --blue: #163586;
  --yellow: #ffff00;
  --yellow-grow: #ffff0088;
  --turquoise: #00c8d2;
  --orenge:#F26B4F;
  --brandcolor:#01834a;
  
  --title-shadow: 1px 1px 4px var(--black), 0 4px 8px #000, 0 0 12px var(--black);
  --fluid-size-1: clamp(48px, 9.6vw, 96px);
  --fluid-size-2: clamp(32px, 4.8vw, 48px);
  --fluid-size-3: clamp(24px, 4vw, 40px);
  --fluid-size-4: clamp(18px, 3.2vw, 32px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; color: var(--black); line-height: 1.6; background-image: url(https://gigaplus.makeshop.jp/uport/sp/rose/bg.jpg); background-attachment: fixed; background-position: center center; background-repeat: no-repeat; background-size: cover; }
img { max-width: 100%; height: auto; vertical-align: middle; }
mark { background: linear-gradient(transparent 60%, var(--yellow) 60%); font-style: normal; font-weight: normal; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.container { max-width: 1920px; margin: 0 auto; overflow: hidden; text-align: center; }
.ff_s { font-family: "Noto Serif JP", "游明朝", "Yu Mincho", "Hiragino Mincho ProN", serif; }
.sp-only { display: none; }
@media (max-width: 768px) {
  .sp-only { display: block; }
}
.themecolor { color: var(--pink);}
.smalltxt { font-size: 0.6em;}
.highlight { color: var(--yellow); font-size: 1.2em; }

.rose-intro__box { background-color: var(--white); max-width: 1000px; margin: 0 auto; }
.rose-intro__body { background: url('https://gigaplus.makeshop.jp/uport/sp/rose/fv-bg.jpg') no-repeat center top; background-size: cover; aspect-ratio: 1000 / 1628; }
.rose-intro__title { color: var(--white); text-shadow: 0 2px 6px rgba(0,0,0,0.5) ; container-type: inline-size; padding-top: var(--fluid-size-3);}
.rose-intro__main { font-size: 7cqw ; font-weight: 900 ; line-height: 1.2; }
.rose-intro__main em { font-size: 1.5em ; font-style: normal; }
.rose-intro__sub { margin-top: 10px ; font-size: 4cqw ; font-weight: 500 ; line-height: 1.4; }
.rose-intro__badges { display: flex; justify-content: center; gap: 16px; padding: 16px; }
.rose-intro small { text-shadow: var(--title-shadow);}
.flash-animation { animation: neonGlow 4s infinite ease-in-out; }
.rose-intro__badges-1 .flash-animation { animation-delay: 0s; }
.rose-intro__badges-2 .flash-animation { animation-delay: 0.5s; }
.rose-intro__badges-3 .flash-animation { animation-delay: 1s; }
@keyframes neonGlow {
  0% { filter: drop-shadow(0 0 0px var(--yellow)) drop-shadow(0 0 0px var(--yellow)); }
  50% { filter: drop-shadow(0 0 5px var(--yellow-grow)) drop-shadow(0 0 20px var(--yellow-grow)); }
  100% { filter: drop-shadow(0 0 0px var(--yellow)) drop-shadow(0 0 0px var(--yellow)); }
}
@media (max-width: 560px) {
}
.rose-intro__reviews { margin: 0 4%; padding-bottom: 40px; display: flex; flex-direction: column; gap: 16px; }
.rose-intro__reviews-box { border-radius: 6px; padding: 16px 0 16px 40px ; box-shadow: 0 4px 10px rgba(0,0,0,0.35); display: grid; grid-template-columns: 76fr 24fr ; flex-wrap:wrap; align-items: center; column-gap:14px; row-gap:10px; position: relative; overflow: hidden; background-color: var(--white); }
.rose-intro__reviews-avatar { display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; order: 2; }
.rose-intro__reviews-box p { font-size: clamp(16px, 3.125vw, 24px) ; line-height: 1.6; text-align: left; order:1; }
.rose-intro__reviews small { color: var(--white);}
.rose-intro__reviews-agetag { position: absolute; bottom: 0; right: -1px; display: inline-flex; align-items: center; justify-content: center; background-color: var(--pink); color: var(--white); font-size: clamp(14px, 2.34vw, 18px); width: 160px; height: 40px; padding-left: 15px; box-sizing: border-box; clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%); }
@media (max-width: 768px) {
  .m , .f1 , .f2 { display: none; }
  .rose-intro__reviews-box { display: flex; gap: 0; padding: 16px 4% 40px; }
}
.rose-intro__cta { width: 90%; margin: 0 auto; padding-bottom: var(--fluid-size-3); }

.rose-renewal__box { position: relative; width: 100%; max-width: 1000px; margin: 0 auto; }
.rose-renewal__title { position: absolute; top: 4%; left: 50%; transform: translateX(-50%); text-align: center; width: 90%; font-size: clamp( 22px, 5.6vw, 56px); }
.rose-renewal__title span { font-size: clamp( 40px, 9.6vw, 96px); color: var(--pink); line-height: clamp( 40px, 10.8vw, 108px);}
.rose-renewal__title span { display: inline-block; background: linear-gradient(to right, var(--pink) 50%, transparent 50%); background-size: 200% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: roseSweepIn 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; animation-delay: 0.5s;}
@keyframes roseSweepIn { to { background-position: 0 0; }}
.rose-renewal__main-image { width: 100%; height: auto; display: block; }
.rose-renewal__badge { position: absolute; z-index: 10; height: auto; }
.rose-renewal__rosemary { top: 30%; left: 5%; width: 32%; }
.rose-renewal__original { bottom: 5%; right: 23%; width: 20%; }
.rose-renewal__info { bottom: 5%; right: 2%; width: 20%; }

.rose-feature__box { max-width: 1000px; background-color: var(--white); margin: 0 auto ; padding-bottom: clamp(40px, 8vw, 80px); }
.rose-feature__body { position: relative; z-index: 1; width: 100%; padding-top: clamp(32px, 16vw, 160px); }
.rose-feature__body-rose { background: url('https://gigaplus.makeshop.jp/uport/sp/rose/feature-bg.jpg') no-repeat center top / cover; aspect-ratio: 1 / 1; }
.rose-feature__body-rosemary { background: url('https://gigaplus.makeshop.jp/uport/sp/rose/feature2-bg.jpg') no-repeat center top / cover; aspect-ratio: 1000 / 1060; }
.rose-feature__intro { font-size: clamp(20px, 4.8vw, 48px); font-weight: bold; }
.rose-feature__intro span { color: var(--pink); }
.rose-feature__catch-rose { color: var(--white); font-size: clamp(14px, 3.2vw, 32px); background-color: var(--pink); border-radius: 16px; max-width: 80%; margin: 0 auto; }
.rose-feature__title-rose { color: var(--white); font-size: clamp(34px, 8vw, 80px); line-height: 120%; margin: 4%; text-shadow: var(--title-shadow); }
.rose-feature__note-rose { color: var(--white); font-size: clamp(14px, 2.8vw, 28px); text-shadow: var(--title-shadow);}
.rose-feature__capsel { position: absolute; bottom: 0; }
.rose-feature__bottom-rose { display: flex; justify-content: center; gap: 3%; max-width: 1000px; margin: 0 auto; }
.rose-feature__bottom-rose p { margin: 8px; font-size: 16px; text-align: left; line-height: 1.4;}
.rose-feature__body-rosemary-inner { background: url('https://gigaplus.makeshop.jp/uport/sp/rose/feature2-cover.jpg') no-repeat center top; aspect-ratio: 900 / 675; max-width: 900px; margin: 0 auto; width: 90%; padding-top: 10%;}
.rose-feature__title-rosemary { font-size: clamp(34px, 8vw, 80px); line-height: 120%; position: relative;}
.rose-feature__title-rosemary img { position: absolute; top: -10%; left: 0; max-width: 319px; width: 35.44%;}
.rose-feature__title-rosemary span { color: var(--pink); }
.rose-feature__title-rosemary-description { display: flex; align-items: center; width: 76%; margin: 0 auto;}
.rose-feature__title-rosemary-description p { font-size: clamp(14px, 2.4vw, 24px); text-align: left; flex: 1;}
.rose-feature__title-rosemary-description div { flex: 1;}
.rose-feature__health-title { font-size: clamp(30px, 8vw, 80px); line-height: 1.2; margin-bottom: 24px;}
.rose-feature__oil { display: grid; gap: 10px; grid-template-columns: 1fr; max-width: 80%; margin: 0 auto; }
.rose-feature__oil figure { display: flex; gap: 24px; text-align: left; align-items: center; }
.rose-feature__oil figure div { max-width: 248px; width: 100%; flex: 4 1 0%; }
.rose-feature__oil figure figcaption { flex: 6 1 0%; min-width: 0; }
.rose-feature__oil figure figcaption h3 { color: var(--pink); font-size: clamp(20px, 4vw, 40px); font-family: "Kiwi Maru", serif; }
.rose-feature__oil figure figcaption p { font-size: clamp(16px, 2.4vw, 24px); }
@media (max-width: 1000px) {
  .rose-feature__bottom-rose { padding: 0 4%;}
  .rose-feature__oil { max-width: 96%; }
  .rose-feature__oil figure { gap: 8px; }
}
@media (max-width: 560px) {
  .rose-feature__body-rose { padding-top: 10%;}
  .rose-feature__title-rosemary-description { display: block; width: 80%; margin-top: 10px;}
  .rose-feature__title-rosemary-description div { display: none;}
}

.rose-recommend__body { background: url('https://gigaplus.makeshop.jp/uport/sp/rose/recommend-bg.jpg') no-repeat center top / cover; aspect-ratio: 1000 / 766;  position: relative; z-index: 1; width: 100%; max-width: 1000px; margin: 0 auto; }
.rose-recommend__body img { position: absolute; top: -8%; right: 0; width: 50%;}
.rose-recommend__title { font-size: clamp(24px, 6.4vw, 64px) ; padding-top: 25%; color: var(--white); text-shadow: var(--title-shadow);}
.rose-recommend__bottom { background-color: var(--palepink); max-width: 1000px; margin: 0 auto; text-align: left; padding: var(--fluid-size-4);}
.rose-recommend__bottom h3 { font-size: var(--fluid-size-4); color: var(--blue); text-decoration: underline solid 1px var(--blue); text-underline-offset: 8px; margin-bottom: 8px;  }
.rose-recommend__bottom p { font-size: 16px; }

.rose-faq__box { max-width: 1000px; background-color: var(--white); margin: 0 auto; padding: 40px 0;}
.rose-faq__body h2 { width: 100%; font-size: var(--fluid-size-4); color: var(--blue); display: inline-block; border-top: 1px solid var(--blue); border-bottom: 1px solid var(--blue); padding: 8px 0;}
.rose-faq__list { text-align: left; border-bottom: 1px solid var(--blue); padding: 4%;}
.rose-faq__list dt , .rose-faq__list dd { display: flex; align-items: flex-start; font-size: 16px; }
.rose-faq__list dt { color: var(--blue);}
.rose-faq__list dd { margin-bottom: 1em;}
.rose-faq__list dd:last-child { margin-bottom: 0;}
.rose-faq__list dt::before , .rose-faq__list dd::before { flex-shrink: 0; width: 1.5em; font-weight: bold;}
.rose-faq__list dt::before { content: "Q"; }
.rose-faq__list dd::before { content: "A"; color: var(--pink); }

.rose-cta { background-color: var(--turquoise); padding: var(--fluid-size-4) 0;}
.rose-cta__box { max-width: 1000px; margin: var(--fluid-size-4) auto; background: var(--white); width: 90%; border-radius: 16px; padding: var(--fluid-size-4); }
.rose-cta__title { font-size: clamp(24px, 4.8vw, 48px); line-height: 1.4; padding: 0 0 0.4em;}
.rose-cta__body { display: flex; justify-content: center; align-items: center; }
.rose-cta__body > div { flex: 1;}
.rose-cta__body-ot { width: 90%; margin: 0 auto;}
.rose-cta__ot-lead { font-size: 16px; text-align: left; margin-bottom: 16px;}
.rose-cta__ot-price { font-size: 40px;}
.rose-cta__price { display: inline-flex; align-items: flex-end; font-size: clamp(40px, 9.6vw, 96px); line-height: 1;}
.rose-cta__price strong { font-size: 1.4em;}
.rose-cta__label { font-size: 24px;}
.rose-cta__price-tax { position: absolute; left: 0; bottom: 2.6em; font-size: 0.4em; white-space: nowrap; }
.rose-cta__price-unit { position: relative; font-size: 24px; margin-left: 4px; line-height: 1;}
.rose-cta__comparison { background-color: var(--pink); color: var(--white); margin-top: 24px; padding: 8px;}
.rose-cta__comparison-value { font-size: var(--fluid-size-3); line-height: 1;}
.rose-cta__subs-bottom { max-width: 1000px; width: 90%; margin: 0 auto 24px; text-align: left; }
.rose-cta__subs-bottom ul { list-style: none; padding: 0; margin: 0; container-type: inline-size;}
.rose-cta__subs-bottom ul li { position: relative; padding-left: 1em; font-size: 6cqw; }
.rose-cta__subs-bottom ul li::before { content: "●"; position: absolute; left: 0; top: 0; }
.rose-cta__arrow { width: 12%; margin: 8px auto;}
.rose-cta__cartin { cursor: pointer; background-color: var(--orenge); color: var(--white); display: block; padding: 20px 24px; font-size: 24px; font-weight: bold; border-radius: 100vh; outline: none; border: 3px solid #F26B4F; transition: background-color 0.3s, border 0.3s; text-decoration: none;}
@media (any-hover: hover) {
  .rose-cta__cartin:hover { background-color: var(--pink); border: 3px solid var(--pink); }
}
.rose-cta__cartin:focus { background-color: var(--black); border: 3px solid var(--black); }
@media (max-width: 768px) {
  .rose-cta__body { display: block;}
  .rose-cta__body-image img { margin-top: 16px;}
  .rose-cta__body-image-fix { width: 50%; max-width: 270px; }
  .rose-cta__body-ot { width: 100%; margin: 0 auto;}
  .rose-cta__cartin { font-size: 20px;}
}