/* MakeShop専用CSS。元のstyles.cssとの併用は不要です。
   画像URLはアップロード先に合わせて変更してください。
   すべての規則をLP内に限定し、公式ヘッダー・フッター・メニューは対象外です。 */
#juic-wear-lp { container-type: inline-size; container-name: juicwear; width:100%; min-width:0; text-align:left; }
#juic-wear-lp *, #juic-wear-lp *::before, #juic-wear-lp *::after { box-sizing:border-box; }
#juic-wear-lp h1, #juic-wear-lp h2, #juic-wear-lp h3 { padding:0; border:0; background:none; float:none; width:auto; }
#juic-wear-lp {
  --red:#e6002d;
  --ink:#17171b;
  --muted:#626269;
  --pink:#fff1f5;
  --blue:#eef8ff;
  --green:#f0faee;
  --accent:#a83253;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  color:var(--ink);
  font-synthesis:none
}

#juic-wear-lp * {
  box-sizing:border-box
}

#juic-wear-lp {
  margin:0;
  background:#fff;
  font-size:16px;
  line-height:1.8
}

#juic-wear-lp a {
  color:inherit;
  text-decoration:none
}

#juic-wear-lp img {
  max-width:100%;
  display:block;
  height:auto
}

#juic-wear-lp a:focus-visible {
  outline:3px solid #155baf;
  outline-offset:5px
}

#juic-wear-lp a {
  touch-action:manipulation
}

#juic-wear-lp .juic-lp-hero {
  max-width:1440px;
  margin:auto;
  position:relative;
  min-height:570px;
  overflow:hidden;
  background:#fafafa
}

#juic-wear-lp .juic-lp-hero::before {
  content:"";
  position:absolute;
  width:72%;
  height:200px;
  bottom:-140px;
  left:-70px;
  border:35px solid #fbe4ec;
  border-radius:50%;
  transform:rotate(-12deg);
  z-index:1;
  pointer-events:none
}

#juic-wear-lp .juic-lp-hero-model {
  position:absolute;
  right:-90px;
  top:-22px;
  width:860px;
  max-width:none;
  mix-blend-mode:multiply
}

#juic-wear-lp .juic-lp-hero-copy {
  position:relative;
  padding:72px 0 80px 7%;
  z-index:2;
  width:65%;
  pointer-events:none
}

#juic-wear-lp .juic-lp-eyebrow {
  font:600 13px/1.4 Arial,sans-serif;
  letter-spacing:.2em;
  color:var(--muted);
  margin:0 0 32px
}

#juic-wear-lp h1,
#juic-wear-lp h2,
#juic-wear-lp h3,
#juic-wear-lp p {
  margin-top:0
}

#juic-wear-lp .juic-lp-hero h1 {
  font-size:clamp(24px,3.6cqw,52px);
  line-height:1.5;
  letter-spacing:.015em;
  margin:0 0 24px;
  font-weight:900
}

#juic-wear-lp .juic-lp-hero h1>span {
  display:block
}

#juic-wear-lp .juic-lp-hero .juic-lp-hero-line {
  display:flex;
  align-items:flex-end;
  gap:10px;
  margin-bottom:12px
}

#juic-wear-lp .juic-lp-wordmark {
  display:inline-block;
  flex:0 0 210px;
  aspect-ratio:1536/637;
  background:var(--red);
  mask:url("https://gigaplus.makeshop.jp/juic/juic-lp/assets/logo.png") center/contain no-repeat luminance;
  -webkit-mask:url("https://gigaplus.makeshop.jp/juic/juic-lp/assets/logo.png") center/contain no-repeat luminance
}

#juic-wear-lp .juic-lp-pronounce {
  font-size:clamp(15px,1.7cqw,25px);
  line-height:1.5;
  padding-bottom:3px
}

#juic-wear-lp .juic-lp-hero h1 strong {
  font-size:1.65em;
  color:var(--red);
  letter-spacing:.02em;
  line-height:1.25;
  display:inline-block;
  position:relative
}

#juic-wear-lp .juic-lp-hero h1 strong::after {
  content:"";
  height:4px;
  position:absolute;
  bottom:-4px;
  left:0;
  right:10%;
  background:var(--red);
  transform:rotate(-3deg)
}

#juic-wear-lp .juic-lp-dot {
  font-size:.6em
}

#juic-wear-lp .juic-lp-hero-sub {
  font-size:18px;
  font-weight:700;
  margin-bottom:8px
}

#juic-wear-lp .juic-lp-hero-caption {
  font-size:14px;
  color:#57575e;
  margin:0
}

#juic-wear-lp .juic-lp-hero-note {
  position:absolute;
  right:4%;
  bottom:45px;
  z-index:2;
  transform:rotate(-9deg);
  font-family:serif;
  font-size:20px;
  font-weight:600;
  line-height:1.7
}

#juic-wear-lp .juic-lp-nav-wrap {
  max-width:1176px;
  margin:0 auto;
  padding:38px 36px 24px
}

#juic-wear-lp .juic-lp-nav-intro {
  text-align:center;
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  margin-bottom:20px
}

#juic-wear-lp .juic-lp-category-nav {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px
}

#juic-wear-lp .juic-lp-style {
  --accent:#aa2d50;
  --tint:#fff0f5;
  --number:#eda1b6
}

#juic-wear-lp .juic-lp-eco {
  --accent:#17658e;
  --tint:#edf8ff;
  --number:#98c9e9
}

#juic-wear-lp .juic-lp-value {
  --accent:#286c43;
  --tint:#f0faef;
  --number:#9bd5ac
}

#juic-wear-lp .juic-lp-category-nav a {
  display:flex;
  align-items:center;
  gap:14px;
  padding:19px 24px;
  border-radius:60px;
  background:var(--tint);
  color:var(--accent);
  font-size:17px;
  font-weight:700;
  transition:transform .2s,box-shadow .2s
}

#juic-wear-lp .juic-lp-category-nav a:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 20px #1111110b
}

#juic-wear-lp .juic-lp-nav-num {
  font:italic 700 28px/1 Arial,sans-serif;
  opacity:.7
}

#juic-wear-lp .juic-lp-category-nav small {
  display:block;
  font-size:14px;
  font-weight:500
}

#juic-wear-lp .juic-lp-category-nav a>span:last-child {
  margin-left:auto;
  font-size:24px
}

#juic-wear-lp .juic-lp-demo-notice {
  font-size:13px;
  line-height:1.7;
  color:#6c5960;
  margin:22px 0 0;
  text-align:center
}

#juic-wear-lp .juic-lp-demo-notice>span {
  font:700 11px Arial,sans-serif;
  letter-spacing:.1em;
  border:1px solid #cab8bc;
  padding:3px 7px;
  margin-right:9px
}

#juic-wear-lp .juic-lp-collection {
  background:var(--tint);
  border-top:7px solid white;
  scroll-margin-top:20px
}

#juic-wear-lp .juic-lp-section-inner {
  max-width:1180px;
  padding:55px 40px 65px;
  margin:auto
}

#juic-wear-lp .juic-lp-section-heading {
  display:flex;
  align-items:flex-start;
  gap:24px;
  margin-bottom:34px
}

#juic-wear-lp .juic-lp-section-number {
  font:italic 800 84px/.95 Arial,sans-serif;
  color:var(--number);
  letter-spacing:-.06em
}

#juic-wear-lp .juic-lp-section-en {
  font:700 12px Arial,sans-serif;
  letter-spacing:.12em;
  color:var(--accent);
  margin:0 0 10px
}

#juic-wear-lp .juic-lp-section-heading h2 {
  font-size:26px;
  line-height:1.5;
  margin:0 0 8px;
  letter-spacing:.02em
}

#juic-wear-lp .juic-lp-section-heading h2>span {
  color:var(--accent)
}

#juic-wear-lp .juic-lp-section-heading h2 small {
  font-size:19px;
  margin-left:9px;
  white-space:nowrap
}

#juic-wear-lp .juic-lp-section-intro {
  font-size:14px;
  margin:0
}

#juic-wear-lp .juic-lp-hand-note {
  font-family:serif;
  font-size:17px;
  font-weight:600;
  line-height:1.7;
  transform:rotate(-8deg);
  color:var(--accent);
  margin:0 0 0 auto;
  white-space:nowrap
}

#juic-wear-lp .juic-lp-product-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px
}

#juic-wear-lp .juic-lp-product {
  background:white;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 4px 15px #22222205;
  display:flex;
  flex-direction:column
}

#juic-wear-lp .juic-lp-product-image {
  display:block;
  position:relative;
  overflow:hidden;
  margin:12px 12px 0;
  border-radius:6px;
  aspect-ratio:1
}

#juic-wear-lp .juic-lp-product-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s
}

#juic-wear-lp .juic-lp-product-image:hover img {
  transform:scale(1.035)
}

#juic-wear-lp .juic-lp-image-tag {
  position:absolute;
  bottom:14px;
  left:14px;
  background:#ffffffed;
  border:1px solid #ddd;
  font-size:12px;
  color:#555;
  padding:3px 9px;
  border-radius:3px
}

#juic-wear-lp .juic-lp-image-arrow {
  position:absolute;
  right:14px;
  bottom:14px;
  background:white;
  border-radius:50%;
  width:32px;
  height:32px;
  text-align:center;
  font-size:20px;
  color:var(--accent)
}

#juic-wear-lp .juic-lp-product-copy {
  padding:22px 24px 26px;
  display:flex;
  flex:1;
  flex-direction:column
}

#juic-wear-lp .juic-lp-sample-label {
  font-size:12px;
  color:#777;
  letter-spacing:.04em;
  margin-bottom:3px
}

#juic-wear-lp .juic-lp-product h3 {
  font-size:21px;
  line-height:1.5;
  margin-bottom:10px
}

#juic-wear-lp .juic-lp-product p {
  font-size:14px;
  color:#5a5a61;
  line-height:1.8;
  margin-bottom:23px
}

#juic-wear-lp .juic-lp-product-link {
  background:var(--red);
  color:white;
  border-radius:50px;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:11px 16px;
  font-weight:700;
  margin-top:auto;
  transition:background .2s
}

#juic-wear-lp .juic-lp-product-link:hover {
  background:#b80024
}

#juic-wear-lp .juic-lp-dummy-label {
  font-size:11px;
  font-weight:400;
  background:#fff3;
  border-radius:4px;
  padding:0 5px
}

#juic-wear-lp .juic-lp-closing {
  text-align:center;
  padding:72px 24px 80px;
  background:#fff
}

#juic-wear-lp .juic-lp-closing p {
  font-size:16px;
  margin-bottom:5px
}

#juic-wear-lp .juic-lp-closing h2 {
  font-size:30px;
  margin-bottom:24px
}

#juic-wear-lp .juic-lp-closing a {
  display:inline-block;
  border-bottom:1px solid #222;
  font-size:14px;
  font-weight:700;
  padding:8px
}

@container juicwear (min-width:1440px) {
#juic-wear-lp .juic-lp-hero h1 {
  font-size:52px
}
}

@container juicwear (max-width:1050px) {
#juic-wear-lp .juic-lp-hero {
  min-height:520px
}

#juic-wear-lp .juic-lp-hero-model {
  width:780px;
  right:-150px
}

#juic-wear-lp .juic-lp-hero-copy {
  padding:65px 0 70px 5%;
  width:70%
}

#juic-wear-lp .juic-lp-wordmark {
  flex-basis:175px
}

#juic-wear-lp .juic-lp-hero-sub {
  font-size:16px
}

#juic-wear-lp .juic-lp-hero-note {
  display:none
}

#juic-wear-lp .juic-lp-section-heading h2 {
  font-size:23px
}

#juic-wear-lp .juic-lp-hand-note {
  display:none
}

#juic-wear-lp .juic-lp-category-nav a {
  padding:16px;
  gap:10px;
  font-size:15px
}

#juic-wear-lp .juic-lp-nav-num {
  font-size:23px
}

#juic-wear-lp .juic-lp-product-grid {
  gap:16px
}

#juic-wear-lp .juic-lp-product-copy {
  padding:18px
}

#juic-wear-lp .juic-lp-section-inner {
  padding:45px 28px 55px
}

#juic-wear-lp .juic-lp-product h3 {
  font-size:19px
}
}

@container juicwear (max-width:700px) {
#juic-wear-lp .juic-lp-hero {
  min-height:0;
  aspect-ratio:1.02;
}

#juic-wear-lp .juic-lp-hero-model {
  width:135%;
  right:-45%;
  top:3%;
}

#juic-wear-lp .juic-lp-hero-copy {
  padding:10% 0 0 6%;
  width:100%
}

#juic-wear-lp .juic-lp-eyebrow {
  font-size:10px;
  margin-bottom:9%
}

#juic-wear-lp .juic-lp-hero h1 {
  font-size:clamp(18px,4.5cqw,31px);
  line-height:1.7;
  width:69%;
  margin-bottom:24px
}

#juic-wear-lp .juic-lp-hero .juic-lp-hero-line {
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
  margin-bottom:10px;
  max-width:55%
}

#juic-wear-lp .juic-lp-wordmark {
  flex-basis:clamp(110px,29cqw,170px)
}

#juic-wear-lp .juic-lp-pronounce {
  font-size:14px;
  white-space:nowrap;
  display:block;
  margin-top:3px
}

#juic-wear-lp .juic-lp-hero h1 strong {
  font-size:2.05em;
  margin-top:3px
}

#juic-wear-lp .juic-lp-hero-sub {
  font-size:clamp(12px,2.8cqw,16px);
  max-width:62%;
  line-height:1.9;
  margin-bottom:7px
}

#juic-wear-lp .juic-lp-hero-caption {
  font-size:clamp(10px,2.4cqw,14px);
  max-width:60%
}

#juic-wear-lp .juic-lp-hero::before {
  width:90%;
  height:100px;
  bottom:-100px;
  border-width:20px
}

#juic-wear-lp .juic-lp-nav-wrap {
  padding:25px 16px 19px
}

#juic-wear-lp .juic-lp-nav-intro {
  font-size:13px;
  margin-bottom:15px
}

#juic-wear-lp .juic-lp-category-nav {
  gap:7px
}

#juic-wear-lp .juic-lp-category-nav a {
  border-radius:12px;
  padding:13px 7px;
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:center;
  font-size:clamp(11px,2.6cqw,16px);
  line-height:1.6
}

#juic-wear-lp .juic-lp-nav-num {
  font-size:18px
}

#juic-wear-lp .juic-lp-category-nav small {
  font-size:12px
}

#juic-wear-lp .juic-lp-category-nav a>span:last-child {
  margin:0;
  font-size:18px;
  line-height:1
}

#juic-wear-lp .juic-lp-demo-notice {
  font-size:12px;
  text-align:left;
  margin-top:18px;
  line-height:1.9
}

#juic-wear-lp .juic-lp-section-inner {
  padding:34px 22px 42px;
  max-width:500px
}

#juic-wear-lp .juic-lp-section-heading {
  gap:13px;
  margin-bottom:24px
}

#juic-wear-lp .juic-lp-section-number {
  font-size:58px
}

#juic-wear-lp .juic-lp-section-en {
  font-size:10px;
  letter-spacing:.08em;
  margin-bottom:7px
}

#juic-wear-lp .juic-lp-section-heading h2 {
  font-size:20px;
  line-height:1.5;
  margin-bottom:8px
}

#juic-wear-lp .juic-lp-section-heading h2 small {
  display:block;
  font-size:16px;
  margin-left:0
}

#juic-wear-lp .juic-lp-section-intro {
  font-size:13px
}

#juic-wear-lp .juic-lp-eco .juic-lp-section-heading h2>span {
  font-size:17px
}

#juic-wear-lp .juic-lp-product-grid {
  grid-template-columns:1fr;
  gap:23px
}

#juic-wear-lp .juic-lp-product-image {
  margin:12px 12px 0
}

#juic-wear-lp .juic-lp-product-copy {
  padding:23px 25px 27px
}

#juic-wear-lp .juic-lp-product h3 {
  font-size:23px
}

#juic-wear-lp .juic-lp-product p {
  font-size:16px
}

#juic-wear-lp .juic-lp-product-link {
  font-size:15px;
  padding:13px 20px
}

#juic-wear-lp .juic-lp-sample-label {
  font-size:12px
}

#juic-wear-lp .juic-lp-closing {
  padding:54px 20px
}

#juic-wear-lp .juic-lp-closing h2 {
  font-size:25px
}
}

@media(prefers-reduced-motion:reduce) {
#juic-wear-lp * {
  transition:none!important
}
}

#juic-wear-lp .juic-lp-product-price {
  border-top:1px solid #ececef;
  padding-top:15px;
  margin:0 0 22px;
  color:var(--ink)
}

#juic-wear-lp .juic-lp-price-label {
  display:block;
  font-size:12px;
  line-height:1.7;
  color:var(--muted);
  margin-bottom:5px
}

#juic-wear-lp .juic-lp-price-line {
  display:flex;
  align-items:baseline;
  gap:5px;
  flex-wrap:wrap
}

#juic-wear-lp .juic-lp-price-line strong {
  font:700 26px/1.4 Arial,sans-serif;
  letter-spacing:.015em
}

#juic-wear-lp .juic-lp-price-tax {
  font-size:12px
}

#juic-wear-lp .juic-lp-price-dummy {
  font-size:12px;
  color:#875915;
  background:#fff4de;
  border:1px solid #e6d4b3;
  border-radius:4px;
  padding:1px 6px;
  margin-left:5px
}
@container juicwear (min-width:701px) {
  #juic-wear-lp .juic-lp-hero { min-height:470px; }
  #juic-wear-lp .juic-lp-hero-model { width:80%; right:-18%; top:0; }
  #juic-wear-lp .juic-lp-hero-copy { padding:55px 0 60px 5%; width:72%; }
  #juic-wear-lp .juic-lp-hero h1 { font-size:clamp(25px,3.6cqw,48px); }
  #juic-wear-lp .juic-lp-wordmark { flex-basis:clamp(125px,17cqw,210px); }
  #juic-wear-lp .juic-lp-hand-note { display:none; }
}
