/* 共通の設定（色・文字・リセット・モーダルの土台） */
:root {
  --c-pony-blue: #095CA8;
  --c-pony-yellow: #FFF000;
  --c-clozy-blue: #00AAE6;
  --c-clozy-blue-60: #6ECFF1;
  --c-blue-gray: #E6EFF6;
  --c-black: #333333;
  --c-gray: #626262;
  --c-light-gray: #CCCCCC;
  --c-white: #FFFFFF;

  --font-jp: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-en: "Nunito", var(--font-jp);

  --ls-jp: 0.05em;
  --ls-en: 0.03em;

  --bp-sp: 767px;
  --pc-content: 956px;
}
body { font-family: var(--font-jp); color: var(--c-black); letter-spacing: var(--ls-jp); line-height: 1.6; margin: 0; background: var(--c-white); }
h1,h2,h3,h4,p,ul,ol,dl { margin: 0; }
ul,ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.en { font-family: var(--font-en); font-weight: 800; letter-spacing: var(--ls-en); line-height: 1.5; }

.sec[id] { scroll-margin-top: 80px; }
.pc-only { display: block; }
.sp-only { display: none; }
@media (max-width: 767px) {
  .pc-only { display: none; }
  .sp-only { display: block; }
  .sec[id] { scroll-margin-top: 92px; }
}
body.modal-open, body.menu-open { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.modal-panel { position: relative; z-index: 1; }

/* ヘッダー */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  height: 80px;
  background: var(--c-blue-gray);
  box-sizing: border-box;
}
.site-header .header-inner { position: relative; height: 100%; }

.site-header .logo {
  position: absolute;
  left: 16px; top: 12px;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.site-header.is-scrolled .logo,
.site-header.is-static-logo .logo { opacity: 1; pointer-events: auto; }
.site-header .logo img { display: block; }
.site-header .logo .logo-pc { width: 181.495px; height: 56.41px; }
.site-header .logo .logo-sp { display: none; width: 141.567px; height: 44px; }

.site-header .anchor-nav,
.site-header .page-nav {
  position: absolute;
  right: 24px; top: 50%;
  transform: translateY(-50%);
}
.site-header .anchor-nav ul,
.site-header .page-nav ul { display: flex; align-items: center; gap: 32px; }
.site-header .anchor-nav a,
.site-header .page-nav a {
  display: block;
  font-size: 14px; font-weight: 700; line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--c-pony-blue);
  white-space: nowrap;
}

.site-header .page-nav a { display: flex; align-items: center; gap: 4px; }
.site-header .page-nav a img {
  width: 11.485px; height: 10.063px;
  margin: 1.97px 1.257px;
  transform: rotate(90deg);
}

.site-header .menu-toggle { display: none; }

@media (max-width: 767px) {
  .site-header {
    height: 92px;
    padding-top: 40px;
    padding-bottom: 8px;
  }
  .site-header .header-inner { height: 44px; }
  .site-header .logo { left: 8px; top: 0; }
  .site-header .logo .logo-pc { display: none; }
  .site-header .logo .logo-sp { display: block; }
  .site-header .anchor-nav,
  .site-header .page-nav { display: none; }

  .site-header .menu-toggle {
    display: block;
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    width: 52px; height: 52px;
    border-radius: 32px;
    overflow: hidden;
  }

  .site-header .menu-toggle .icon-menu {
    position: absolute; left: 50%; top: 50%;
    width: 32px; height: 32px;
    margin: -16px 0 0 -16px;
  }
  .site-header .menu-toggle .icon-menu i {
    position: absolute;
    left: 3.333px;
    width: 25.333px; height: 0;
    border-top: 2.67px solid var(--c-pony-blue);
    border-radius: 2px;
    margin-top: -1.335px;
  }
  .site-header .menu-toggle .icon-menu i:nth-child(1) { top: 10px; }
  .site-header .menu-toggle .icon-menu i:nth-child(2) { top: 18px; }
  .site-header .menu-toggle .icon-menu i:nth-child(3) { top: 26px; }
  .site-header .menu-toggle .icon-close {
    display: none;
    position: absolute; left: 50%; top: 50%;
    width: 32px; height: 32px;
    margin: -16px 0 0 -16px;
  }
  .site-header .menu-toggle[aria-expanded="true"] .icon-menu { display: none; }
  .site-header .menu-toggle[aria-expanded="true"] .icon-close { display: block; }

  body.menu-open .site-header .logo { opacity: 1; pointer-events: auto; }
}

body[data-page="items"], body[data-page="support"] { padding-top: 80px; }
@media (max-width: 767px) {
  body[data-page="items"], body[data-page="support"] { padding-top: 92px; }
}

@media (max-width: 767px) {
  body[data-page="index"] .site-header .menu-toggle { display: none; }

  body[data-page="index"] .site-header:not(.is-scrolled) { background: transparent; pointer-events: none; }
}

/* メインビジュアル */
.sec-kv { position: relative; overflow-x: clip; height: calc(708px * var(--kv-scale, 1)); background: var(--c-blue-gray); font-family: "A1 Gothic", "A P-OTF A1Gothic Std", var(--font-jp); font-weight: 500; color: var(--c-pony-blue); }
.sec-kv .kv-box { position: absolute; left: 50%; top: 0; width: 1440px; height: 708px; margin-left: -720px; transform-origin: 50% 0; transform: scale(var(--kv-scale, 1)); }
.sec-kv .kv-clip { position: absolute; inset: 0; overflow: hidden; }
.sec-kv .kv-band { position: absolute; left: 0; bottom: 0; width: 100%; height: 170px; background: #C3DAEE; }

.sec-kv .kv-brand { position: absolute; left: 94px; top: 142px; width: 460.89px; height: 198.25px; }
.sec-kv .kv-logo { position: absolute; left: 0; top: 55px; width: 460.89px; height: 143.248px; font-size: 0; font-weight: inherit; }
.sec-kv .kv-logo img { width: 460.89px; height: 143.248px; }

.sec-kv .kv-text { position: absolute; line-height: 0; }
.sec-kv .kv-text img { width: 100%; height: 100%; max-width: none; }
.sec-kv .kv-tagline { left: 128px; top: 142px; width: 383px; height: 39px; }
.sec-kv .kv-title { left: 665px; top: 129px; width: 775px; height: 148px; }
.sec-kv .kv-sub { left: 669px; top: 289px; width: 775px; height: 54px; }

.sec-kv .kv-since { left: 636.39px; top: 101.13px; width: 108px; height: 44px; }

.sec-kv .kv-sub-line { position: absolute; left: 669px; top: 341px; width: 426px; height: 3px; background: var(--c-pony-blue); }

.sec-kv .kv-illust { position: absolute; max-width: none; }
.sec-kv .kv-illust-assess { left: 158px; top: 376px; width: 387px; height: 453.132px; }
.sec-kv .kv-illust-photo { left: 614px; top: 372px; width: 392px; height: 297.934px; }
.sec-kv .kv-illust-listing { left: 1060px; top: 336px; width: 303px; height: 361.397px; }
.sec-kv .kv-illust-plant { left: 72px; top: 503px; width: 66px; height: 147.95px; }

.sec-kv .kv-badges { position: absolute; left: 50%; top: 0; z-index: 3; width: 1440px; height: 708px; margin-left: -720px; transform-origin: 50% 0; transform: scale(var(--kv-scale, 1)); pointer-events: none; }
.sec-kv .kv-badge { pointer-events: auto; position: absolute; box-sizing: border-box; width: 165.6px; height: 165.6px; border-radius: 50%; overflow: hidden; text-align: center; white-space: nowrap; }
.sec-kv .kv-badge > span { position: absolute; left: 50%; transform: translateX(-50%); }

.sec-kv .kv-badge-cashback { left: 51px; top: 610.4px; background: var(--c-clozy-blue); border: 1.15px solid var(--c-white); color: var(--c-white); }
.sec-kv .kv-badge-cashback .kv-badge-head { top: 30.94px; font-size: 22.77px; line-height: 1.5; letter-spacing: 1.1385px; }
.sec-kv .kv-badge-cashback .kv-badge-main { top: 48.53px; font-size: 0; line-height: 0; letter-spacing: 2.3805px; }
.sec-kv .kv-badge-cashback .kv-badge-num { font-size: 47.61px; line-height: 1.5; }
.sec-kv .kv-badge-cashback .kv-badge-unit { font-size: 38.295px; line-height: 1.5; }
.sec-kv .kv-badge-cashback .kv-badge-rest { top: 106.49px; font-size: 22.77px; line-height: 1.5; letter-spacing: 1.1385px; }

.sec-kv .kv-badge-free { left: 225.8px; top: 610.4px; background: var(--c-white); border: 1.15px solid var(--c-pony-blue); }
.sec-kv .kv-badge-free .kv-badge-head { top: -1.55px; width: 165px; height: 64px; box-sizing: border-box; padding: 10px 8px 3px; border-radius: 3.105px; background: var(--c-pony-blue); color: var(--c-white); font-size: 17px; line-height: 1.3; letter-spacing: 0.85px; display: flex; align-items: center; justify-content: center; }
.sec-kv .kv-badge-free .kv-badge-lead { top: 62.74px; font-size: 22.77px; line-height: 1.5; letter-spacing: 1.1385px; }
.sec-kv .kv-badge-free .kv-badge-main { top: 88.62px; font-size: 31.05px; line-height: 1.5; letter-spacing: 1.5525px; }

@media (max-width: 767px) {

  .sec-kv { height: calc(630px * var(--kv-scale, 1)); }
  .sec-kv .kv-box, .sec-kv .kv-badges { width: 390px; height: 630px; margin-left: -195px; }
  .sec-kv .kv-band { height: 374px; }
  .sec-kv .kv-brand { left: 0; top: 0; width: 390px; height: auto; }
  .sec-kv .kv-logo { left: 79px; top: 95px; width: 232px; height: 72.107px; }
  .sec-kv .kv-logo img { width: 232px; height: 72.107px; }
  .sec-kv .kv-tagline { left: 86px; top: 66px; width: 219px; height: 22px; }
  .sec-kv .kv-title { left: 13px; top: 433px; width: 361px; height: 72px; }
  .sec-kv .kv-sub { left: 14px; top: 510.5px; width: 251px; height: 31px; }
  .sec-kv .kv-since { left: 5px; top: 405.81px; width: 81px; height: 33px; }

  .sec-kv .kv-sub-line { left: 14px; top: 541px; width: 244px; height: 1.5px; }
  .sec-kv .kv-illust-photo { left: 110px; top: 189.34px; width: 159.869px; height: 121.506px; }
  .sec-kv .kv-illust-listing { left: 233.57px; top: 203.32px; width: 151.079px; height: 180.196px; }
  .sec-kv .kv-illust-assess { left: -18.4px; top: 241.37px; width: 139.383px; height: 163.201px; }
  .sec-kv .kv-illust-plant { display: none; }

  .sec-kv .kv-badge { transform-origin: 0 0; transform: scale(0.5928); }
  .sec-kv .kv-badge-cashback { left: 181px; top: 551.24px; }
  .sec-kv .kv-badge-free { left: 283px; top: 551px; }
}

/* アプリのダウンロード */
.sec-app-dl { position: relative; z-index: 2; background: var(--c-pony-blue); color: var(--c-white); }
.sec-app-dl .inner { max-width: 1440px; margin: 0 auto; box-sizing: border-box; padding: 16px 40px; display: flex; align-items: center; justify-content: flex-end; gap: 32px; }

.sec-app-dl .inner { position: relative; padding-bottom: 52px; }
.sec-app-dl .app-dl-note { position: absolute; left: 51px; top: 74px; width: 342px; font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: 0.6px; }
.sec-app-dl .app-dl-lead { display: flex; align-items: center; gap: 16px; flex: none; }
.sec-app-dl .app-dl-icon { width: 52px; height: 52px; }
.sec-app-dl .app-dl-text { font-size: 16px; font-weight: 700; line-height: 1.6; letter-spacing: 0.8px; white-space: nowrap; }
.sec-app-dl .app-dl-stores { display: flex; align-items: flex-end; gap: 8px; height: 52px; flex: none; }
.sec-app-dl .app-dl-store { display: block; line-height: 0; }
.sec-app-dl .app-dl-store-ios img { width: 141.507px; height: 52px; }
.sec-app-dl .app-dl-store-android img { width: 175.499px; height: 52px; }

.sec-app-dl .app-dl-qr { position: relative; width: 90px; height: 90px; border-radius: 0.9px; flex: none; }
.sec-app-dl .app-dl-qr-img { width: 90px; height: 90px; object-fit: cover; }

@media (max-width: 767px) {

  .sec-app-dl .inner { flex-direction: column; justify-content: center; gap: 8px; padding: 16px 24px; max-width: none; }
  .sec-app-dl .app-dl-note { position: static; order: -1; align-self: flex-end; width: 200px; margin-top: 6px; font-size: 10px; letter-spacing: 0.3px; }
  .sec-app-dl .app-dl-lead { gap: 8px; }
  .sec-app-dl .app-dl-icon { width: 44px; height: 44px; }
  .sec-app-dl .app-dl-text { line-height: 1.5; }
  .sec-app-dl .app-dl-stores { gap: 15px; align-items: center; }
  .sec-app-dl .app-dl-qr { display: none; }
}

/* クロジーとは */
.sec-about { background: var(--c-white); display: flex; flex-direction: column; align-items: center; gap: 40px; padding-top: 56px; }

.sec-about .about-head { display: flex; flex-direction: column; align-items: center; width: 570px; }
.sec-about .about-en { font-size: 32px; color: var(--c-clozy-blue); white-space: nowrap; }
.sec-about .about-title { display: flex; align-items: flex-end; justify-content: center; gap: 8px; font-weight: 700; color: var(--c-pony-blue); }
.sec-about .about-logo-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sec-about .about-logo-ruby { font-size: 14px; line-height: 1.5; letter-spacing: 0.7px; white-space: nowrap; }
.sec-about .about-logo { width: 171.217px; height: 55px; }
.sec-about .about-title-text { font-size: 32px; line-height: 1.5; letter-spacing: 1.6px; white-space: nowrap; }

.sec-about .about-body { position: relative; display: grid; grid-template-columns: 433.2px 1fr; column-gap: 24px; row-gap: 24px; align-items: start; width: 1080px; }
.sec-about .about-illust { position: relative; grid-column: 1; grid-row: 1 / span 2; width: 433.2px; height: 399px; }
.sec-about .about-bubble { position: absolute; }
.sec-about .about-bubble-bg { position: absolute; left: 0; top: 0; max-width: none; }
.sec-about .about-bubble-let-go .about-bubble-bg,
.sec-about .about-bubble-annoying .about-bubble-bg { transform: scaleX(-1); }
.sec-about .about-bubble-text { position: absolute; margin: 0; font-family: "A1 Gothic", "A P-OTF A1Gothic Std", var(--font-jp); font-weight: 500; font-size: 16.8px; line-height: 1.4; letter-spacing: 0.84px; color: var(--c-pony-blue); text-align: center; white-space: nowrap; }

.sec-about .about-bubble-how-to-start { left: 10px; top: 0; width: 197.625px; height: 114.326px; }
.sec-about .about-bubble-how-to-start .about-bubble-text { left: 16px; top: 21px; width: 165.6px; }

.sec-about .about-bubble-let-go { left: 212px; top: 32px; width: 215.625px; height: 124.739px; }
.sec-about .about-bubble-let-go .about-bubble-text { left: 16.8px; top: 14px; width: 182.4px; }

.sec-about .about-bubble-use-time { left: 0; top: 123px; width: 215.625px; height: 145.165px; }
.sec-about .about-bubble-use-time .about-bubble-text { left: 27.6px; top: 26px; width: 164.4px; }

.sec-about .about-bubble-annoying { left: 264px; top: 165px; width: 169.2px; height: 121.595px; }
.sec-about .about-bubble-annoying .about-bubble-text { left: 19.67px; top: 17px; width: 133.2px; }

.sec-about .about-woman { position: absolute; left: 170.41px; top: 189px; width: 147.68px; height: 210px; max-width: none; }

.sec-about .about-lead { grid-column: 2; grid-row: 1; font-size: 24px; font-weight: 700; line-height: 1.6; letter-spacing: 1.2px; color: var(--c-pony-blue); }
.sec-about .about-desc { grid-column: 2; grid-row: 2; font-size: 18px; font-weight: 700; line-height: 1.8; letter-spacing: 0.9px; color: var(--c-black); }
.sec-about .about-pc-space { display: inline; }

.sec-about .about-clothes { display: contents; }
.sec-about .about-shirt { position: absolute; left: 918.28px; top: 61.7px; width: 112.125px; height: 98.625px; max-width: none; transform: rotate(5deg); }
.sec-about .about-cardigan { position: absolute; left: 936.35px; top: 123.42px; width: 129.188px; height: 105.188px; max-width: none; transform: rotate(10deg); }

@media (max-width: 767px) {
  .sec-about { gap: 16px; padding: 40px 16px 0; box-sizing: border-box; }
  .sec-about .about-head { width: 100%; }
  .sec-about .about-en { font-size: 24px; }
  .sec-about .about-title { gap: 6px; }
  .sec-about .about-logo-wrap { gap: 3px; }
  .sec-about .about-logo-ruby { font-size: 12px; letter-spacing: 0.6px; }
  .sec-about .about-logo { width: 141.254px; height: 45.375px; }
  .sec-about .about-title-text { font-size: 28px; line-height: 1.6; letter-spacing: 1.4px; }

  .sec-about .about-body { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
  .sec-about .about-lead { order: 1; position: relative; width: 100%; font-size: 20px; letter-spacing: 1px; text-align: center; }
  .sec-about .about-illust { order: 2; width: 358px; max-width: 100%; height: 218px; overflow: hidden; }
  .sec-about .about-desc { order: 3; width: 100%; font-size: 16px; letter-spacing: 0.8px; }
  .sec-about .about-pc-space { display: none; }

  .sec-about .about-bubble-text { font-size: 10.619px; letter-spacing: 0.5309px; }
  .sec-about .about-bubble-use-time { left: 12.89px; top: 1.11px; width: 136.288px; height: 91.775px; }
  .sec-about .about-bubble-use-time .about-bubble-text { left: 17.44px; top: 15.93px; width: 103.911px; }
  .sec-about .about-bubble-let-go { left: 184.38px; top: 0.63px; width: 136.289px; height: 78.843px; }
  .sec-about .about-bubble-let-go .about-bubble-text { left: 10.62px; top: 10.62px; width: 115.288px; }
  .sec-about .about-bubble-how-to-start { left: 8px; top: 104.68px; width: 124.911px; height: 72.261px; }
  .sec-about .about-bubble-how-to-start .about-bubble-text { left: 12.08px; top: 15.17px; width: 104.669px; }
  .sec-about .about-bubble-annoying { left: 243.72px; top: 99.34px; width: 106.945px; height: 77.108px; }
  .sec-about .about-bubble-annoying .about-bubble-text { left: 12.43px; top: 12.13px; width: 84.191px; }
  .sec-about .about-woman { left: 118.87px; top: 33.74px; width: 129.03px; height: 183.48px; }

  .sec-about .about-shirt { left: auto; right: 8.55px; top: 35.61px; width: 44.85px; height: 39.45px; }
  .sec-about .about-cardigan { left: auto; right: -5.5px; top: 60.3px; width: 51.675px; height: 42.075px; }
}

/* クロジーの特徴 */
.sec-features { background: var(--c-white); display: flex; flex-direction: column; align-items: center; gap: 48px; padding: 56px 0 80px; }

.sec-features .features-head { display: flex; flex-direction: column; align-items: center; width: 1080px; white-space: nowrap; line-height: 1.5; }
.sec-features .features-en { font-size: 32px; color: var(--c-clozy-blue); }
.sec-features .features-title { display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--c-pony-blue); text-align: center; }
.sec-features .features-title-jp { font-size: 32px; font-weight: 700; line-height: 1.5; letter-spacing: 1.6px; }
.sec-features .features-title-num { font-size: 48px; letter-spacing: 1.44px; }

.sec-features .features-cards { display: flex; align-items: stretch; justify-content: center; gap: 40px; width: 1080px; }
.sec-features .features-card { position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 333px; padding: 32px 0; border-radius: 16px; background: var(--c-blue-gray); }

.sec-features .features-num { position: absolute; z-index: 1; left: 50%; top: -41px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 81.344px; height: 81.344px; border-radius: 50%; background: var(--c-clozy-blue-60); border: 0.5px solid var(--c-pony-blue); }
.sec-features .features-num .en { font-size: 40px; letter-spacing: -2.8px; color: var(--c-pony-blue); }
.sec-features .features-illust { position: relative; width: 325px; height: 182px; overflow: hidden; }
.sec-features .features-illust img { width: 325px; height: 182px; max-width: none; }

.sec-features .features-illust .features-logo-pony { position: absolute; left: calc(50% + 0.42px); top: calc(50% + 4.67px); width: 168.839px; height: 133.338px; transform: translate(-50%, -50%); }
.sec-features .features-text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 300px; line-height: 1.6; }
.sec-features .features-card-title { display: flex; flex-direction: column; width: 100%; font-weight: 700; color: var(--c-pony-blue); text-align: center; }
.sec-features .features-card-title-sub { font-size: 20px; letter-spacing: 1px; }
.sec-features .features-card-title-main { font-size: 24px; letter-spacing: 1.2px; }
.sec-features .features-card-body { width: 100%; font-size: 16px; font-weight: 500; letter-spacing: 0.8px; color: var(--c-black); }

@media (max-width: 767px) {
  .sec-features { padding: 40px 16px; box-sizing: border-box; }
  .sec-features .features-head { width: 100%; }
  .sec-features .features-en { font-size: 24px; }
  .sec-features .features-title-jp { font-size: 28px; line-height: 1.6; letter-spacing: 1.4px; }
  .sec-features .features-title-num { font-size: 40px; letter-spacing: 2px; }

  .sec-features .features-cards { flex-direction: column; align-items: center; width: 100%; }
  .sec-features .features-card { width: 100%; padding: 32px 16px; }
  .sec-features .features-card:nth-child(2) .features-num { top: -35.26px; }
  .sec-features .features-card:nth-child(3) .features-num { top: -34.26px; }
  .sec-features .features-illust { max-width: 100%; }
  .sec-features .features-text { width: 100%; }
}

/* ご利用の流れ */
.sec-steps { background: var(--c-pony-blue); color: var(--c-white); display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 56px 0 80px; border-radius: 24px 24px 0 0; overflow: hidden; }

.sec-steps .steps-head { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.sec-steps .steps-head-title { display: flex; flex-direction: column; align-items: center; width: 1080px; line-height: 1.5; }
.sec-steps .steps-en { font-size: 32px; letter-spacing: 0.96px; color: var(--c-clozy-blue-60); white-space: nowrap; }
.sec-steps .steps-title { font-size: 32px; font-weight: 700; line-height: 1.5; letter-spacing: 1.6px; color: var(--c-white); text-align: center; }
.sec-steps .steps-lead { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sec-steps .steps-lead-text { display: flex; align-items: center; gap: 4px; text-align: center; white-space: nowrap; }
.sec-steps .steps-lead-jp { font-size: 20px; font-weight: 700; line-height: 1.6; letter-spacing: 1px; }
.sec-steps .steps-lead-num { font-size: 32px; letter-spacing: 0.96px; }

.sec-steps .steps-campaign { position: relative; box-sizing: border-box; width: 485.3px; height: 86.3px; background: var(--c-white); border: 1.15px solid var(--c-pony-blue); border-radius: 8px; overflow: hidden; font-family: "A1 Gothic", "A P-OTF A1Gothic Std", var(--font-jp); font-weight: 500; line-height: 1.5; text-align: center; white-space: nowrap; }
.sec-steps .steps-campaign-head { position: absolute; left: -1.5px; top: -1.15px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 486px; height: 35px; padding: 0 24px; background: var(--c-clozy-blue); border-radius: 3.726px; font-size: 18px; letter-spacing: 0.9px; color: var(--c-white); }
.sec-steps .steps-campaign-body { position: absolute; left: 24px; top: 40px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.sec-steps .steps-campaign-title { font-size: 24px; letter-spacing: 1.2px; color: var(--c-pony-blue); }
.sec-steps .steps-campaign-period { font-size: 14px; letter-spacing: 0.7px; color: var(--c-gray); }

.sec-steps .steps-cards { display: flex; align-items: stretch; justify-content: center; gap: 8px; width: 1080px; }
.sec-steps .steps-card { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 24px; width: 333px; padding: 0 16px 16px; background: var(--c-white); border: 1px solid var(--c-light-gray); border-radius: 16px; overflow: hidden; color: var(--c-black); }
.sec-steps .steps-card-2 { padding-bottom: 32px; }

.sec-steps .steps-arrow { display: flex; align-items: center; justify-content: center; align-self: center; width: 24px; height: 40px; flex: none; }
.sec-steps .steps-arrow img { width: 34.641px; height: 18px; max-width: none; transform: rotate(90deg); }

.sec-steps .steps-illust { position: relative; width: calc(100% + 32px); height: 186.48px; margin: 0 -16px; background: var(--c-blue-gray); overflow: hidden; flex: none; }
.sec-steps .steps-illust img { position: absolute; max-width: none; }

.sec-steps .steps-illust-1 img { left: calc(50% - 1px); top: 16.23px; width: 258.877px; height: 170.5px; transform: translateX(-50%); }

.sec-steps .steps-illust-stage { position: absolute; left: 50%; top: 0; width: 333px; height: 100%; transform: translateX(-50%); }
.sec-steps .steps-illust-bag { left: 69.09px; top: 29.7px; width: 68.848px; height: 106.45px; }
.sec-steps .steps-illust-box { left: 10.5px; top: 79.7px; width: 99.606px; height: 78px; }
.sec-steps .steps-illust-arrow { left: 142.5px; top: 71.7px; width: 34.045px; height: 38.729px; }
.sec-steps .steps-illust-truck { left: 181.5px; top: calc(50% + 0.14px); width: 143.715px; height: 95.355px; transform: translateY(-50%); }

.sec-steps .steps-illust-frame { position: absolute; box-sizing: border-box; width: 187.197px; height: 112.503px; background: var(--c-white); border: 3px solid #000; border-radius: 7.71px; }
.sec-steps .steps-illust-frame-1 { left: 18.5px; top: 18.29px; }
.sec-steps .steps-illust-frame-2 { left: 127.69px; top: 56.1px; }

.sec-steps .steps-card-title { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.sec-steps .steps-card-step { font-size: 24px; letter-spacing: 0.72px; color: var(--c-clozy-blue); }
.sec-steps .steps-card-name { font-size: 24px; font-weight: 700; line-height: 1.6; letter-spacing: 1.2px; color: var(--c-pony-blue); }
.sec-steps .steps-card-body { width: 100%; font-size: 16px; font-weight: 500; line-height: 1.6; letter-spacing: 0.8px; color: var(--c-black); }
.sec-steps .steps-card-2-text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }

.sec-steps .steps-btn { box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--c-clozy-blue); border-radius: 6px; font-size: 16px; font-weight: 700; line-height: 1.6; letter-spacing: 0.8px; color: var(--c-white); white-space: nowrap; }
.sec-steps .steps-btn img { width: 16px; height: 16px; flex: none; }
.sec-steps .steps-btn-items { width: 257px; justify-content: center; }

.sec-steps .steps-logos { display: flex; align-items: center; justify-content: center; gap: 40px; width: 100%; }
.sec-steps .steps-logo { position: relative; height: 44px; overflow: hidden; flex: none; }
.sec-steps .steps-logo img { position: absolute; max-width: none; }
.sec-steps .steps-logo-familymart { width: 42.788px; }
.sec-steps .steps-logo-familymart-mark { left: 0; top: 0; width: 42.775px; height: 31.694px; }
.sec-steps .steps-logo-familymart-text { left: 0; top: 35.98px; width: 42.788px; height: 8.021px; }
.sec-steps .steps-logo-seven { width: 44px; }
.sec-steps .steps-logo-seven img { left: 0; top: 0; width: 44px; height: 44px; }
.sec-steps .steps-logo-seven-text { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 10px; font-weight: 700; line-height: 1.25; letter-spacing: 0; text-align: center; color: var(--c-black); }
.sec-steps .steps-logo-yamato { width: 46.977px; }
.sec-steps .steps-logo-yamato img { left: -7.094px; top: -6.662px; width: 61.202px; height: 57.565px; }

.sec-steps .steps-card-sub { width: 100%; font-size: 20px; font-weight: 700; line-height: 1.6; letter-spacing: 1px; color: var(--c-pony-blue); text-align: center; }
.sec-steps .steps-shops { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; }
.sec-steps .steps-shop { display: flex; align-items: center; justify-content: center; gap: 16px; }
.sec-steps .steps-shop-logo { position: relative; width: 115px; height: 44px; flex: none; }
.sec-steps .steps-shop-logo-mercari img { position: absolute; left: 50%; top: calc(50% - 0.28px); width: 112px; height: 33px; max-width: none; transform: translate(-50%, -50%); }
.sec-steps .steps-shop-logo-own { display: flex; align-items: center; justify-content: center; }
.sec-steps .steps-shop-logo-own img { height: 44px; width: auto; }
.sec-steps .steps-btn-shop { width: 168px; padding: 8px 12px; }
.sec-steps .steps-btn-own { padding: 8px 16px; justify-content: center; }

.sec-steps .steps-register { box-sizing: border-box; display: flex; align-items: stretch; gap: 40px; width: 1080px; padding: 24px 40px; background: var(--c-white); border: 1px solid var(--c-white); border-radius: 16px; color: var(--c-black); }
.sec-steps .steps-register-text { display: flex; flex: 1 0 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; min-width: 0; }
.sec-steps .steps-register-title { font-size: 24px; font-weight: 700; line-height: 1.5; letter-spacing: 1.2px; color: var(--c-pony-blue); white-space: nowrap; }
.sec-steps .steps-register-body { width: 100%; font-size: 16px; font-weight: 500; line-height: 1.6; letter-spacing: 0.8px; }

.sec-steps .steps-app { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; background: var(--c-blue-gray); border-radius: 8px; flex: none; }
.sec-steps .steps-app-lead { display: flex; align-items: center; gap: 16px; width: 100%; }
.sec-steps .steps-app-icon { width: 52px; height: 52px; flex: none; }
.sec-steps .steps-app-text { font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: 0.8px; color: var(--c-pony-blue); white-space: nowrap; }
.sec-steps .steps-app-stores { display: flex; align-items: flex-end; gap: 8px; height: 54px; }
.sec-steps .steps-app-store { display: block; line-height: 0; }
.sec-steps .steps-app-store-ios img { width: 141.507px; height: 52px; }
.sec-steps .steps-app-store-android img { width: 175.499px; height: 52px; }

.sec-steps .steps-app-qr { position: relative; width: 90px; height: 90px; border-radius: 0.9px; flex: none; }
.sec-steps .steps-app-qr-img { width: 90px; height: 90px; object-fit: cover; }

@media (max-width: 767px) {

  .sec-steps { box-sizing: border-box; width: 100%; gap: 24px; padding: 40px 16px; }
  .sec-steps .steps-head { width: 100%; }
  .sec-steps .steps-head-title { width: 100%; }
  .sec-steps .steps-en { font-size: 24px; letter-spacing: 0.72px; }
  .sec-steps .steps-title { font-size: 28px; line-height: 1.6; letter-spacing: 1.4px; }
  .sec-steps .steps-lead { gap: 16px; width: 100%; }

  .sec-steps .steps-campaign { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; height: auto; padding-bottom: 8px; }
  .sec-steps .steps-campaign-head { position: static; width: calc(100% + 2.3px); margin: -1.15px -1.15px 0; flex: none; }
  .sec-steps .steps-campaign-body { position: static; flex-direction: column; gap: 4px; }

  .sec-steps .steps-cards { flex-direction: column; align-items: center; gap: 16px; width: 100%; }
  .sec-steps .steps-card { width: 100%; padding-bottom: 24px; }
  .sec-steps .steps-card-2 { padding-bottom: 32px; }
  .sec-steps .steps-arrow { width: 40px; height: 24px; }
  .sec-steps .steps-arrow img { transform: scaleY(-1); }
  .sec-steps .steps-illust { height: 186px; }
  .sec-steps .steps-illust-1 img { left: calc(50% + 0.44px); top: 16.32px; }
  .sec-steps .steps-illust-frame { border-width: 3.352px; }
  .sec-steps .steps-illust-frame-1 { left: 23.31px; }
  .sec-steps .steps-illust-frame-2 { left: 151px; }
  .sec-steps .steps-btn-items { width: 100%; height: 48px; padding: 10px 16px; }

  .sec-steps .steps-shop { width: 326px; max-width: 100%; gap: 8px; }
  .sec-steps .steps-shop-logo { width: 150px; }
  .sec-steps .steps-shop-logo-mercari img { left: calc(50% - 0.48px); top: 50%; width: 122.034px; height: 36px; }
  .sec-steps .steps-shop-logo-own { width: 149.153px; }
  .sec-steps .steps-btn-shop { flex: 1 0 0; width: auto; min-width: 0; height: 48px; padding: 10px 16px; justify-content: center; }

  .sec-steps .steps-register { flex-direction: column; align-items: stretch; gap: 24px; width: 100%; padding: 24px 16px; }
  .sec-steps .steps-register-text { align-items: center; flex: none; }
  .sec-steps .steps-register-title { line-height: 1.6; }
  .sec-steps .steps-register-body { font-weight: 700; }
  .sec-steps .steps-btn-register { width: 100%; height: 48px; padding: 10px 16px; justify-content: center; }
  .sec-steps .steps-app { width: 100%; gap: 16px; }
  .sec-steps .steps-app-lead { gap: 8px; }
  .sec-steps .steps-app-text { line-height: 1.6; }
  .sec-steps .steps-app-stores { align-items: center; gap: 7.237px; height: auto; }
  .sec-steps .steps-app-store-ios img { width: 128.007px; height: 47.039px; }
  .sec-steps .steps-app-store-android img { width: 158.756px; height: 47.039px; }
  .sec-steps .steps-app-qr { display: none; }
}

/* ご利用のコツ */
.sec-tips { background: var(--c-clozy-blue); color: var(--c-white); display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 56px 0; border-radius: 0 0 24px 24px; overflow: hidden; }

.sec-tips .tips-head { display: flex; flex-direction: column; align-items: center; width: 1080px; line-height: 1.5; }
.sec-tips .tips-en { font-size: 32px; letter-spacing: 0.96px; color: var(--c-pony-blue); white-space: nowrap; }
.sec-tips .tips-title { font-size: 32px; font-weight: 700; line-height: 1.5; letter-spacing: 1.6px; color: var(--c-white); text-align: center; }

.sec-tips .tips-cards { display: flex; align-items: flex-start; justify-content: center; gap: 40px; }
.sec-tips .tips-card { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 325px; }
.sec-tips .tips-illust { position: relative; width: 325px; height: 182px; background: var(--c-blue-gray); border-radius: 16px; overflow: hidden; flex: none; }
.sec-tips .tips-illust img { position: absolute; left: 0; top: 0; width: 325px; height: 182px; max-width: none; }

.sec-tips .tips-illust-2 img { left: 50%; top: 6.5px; width: 176.053px; height: 165px; transform: translateX(-50%); }

.sec-tips .tips-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
.sec-tips .tips-text-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; padding-bottom: 12px; border-bottom: 3px dashed var(--c-pony-blue); }

.sec-tips .tips-point { position: relative; width: 67.2px; height: 28.8px; }
.sec-tips .tips-point img { position: absolute; left: 1.24px; top: 2.07px; width: 18.809px; height: 9.6px; max-width: none; transform: rotate(-45deg); }
.sec-tips .tips-point .en { position: absolute; left: 14.83px; top: 5.07px; font-size: 20px; letter-spacing: 0.6px; color: var(--c-pony-blue); white-space: nowrap; }
.sec-tips .tips-card-title { width: 100%; font-size: 24px; font-weight: 700; line-height: 1.6; letter-spacing: 1.2px; color: var(--c-white); text-align: center; white-space: nowrap; }
.sec-tips .tips-card-body { width: 100%; font-size: 16px; font-weight: 500; line-height: 1.6; letter-spacing: 0.8px; color: var(--c-white); }

@media (max-width: 767px) {

  .sec-tips { gap: 24px; padding: 40px 0; }
  .sec-tips .tips-head { width: 100%; }
  .sec-tips .tips-en { font-size: 24px; letter-spacing: 0.72px; }
  .sec-tips .tips-title { font-size: 28px; line-height: 1.6; letter-spacing: 1.4px; }
  .sec-tips .tips-cards { box-sizing: border-box; flex-direction: column; align-items: center; gap: 40px; width: 100%; padding: 0 16px; }
  .sec-tips .tips-card { align-items: center; gap: 8px; width: 100%; }
  .sec-tips .tips-illust { max-width: 100%; }
  .sec-tips .tips-text-head { gap: 4px; }
}

/* 出品・配送のルール */
.sec-guide { background: var(--c-white); display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 56px 0; }

.sec-guide .guide-head { display: flex; flex-direction: column; align-items: center; width: 1080px; max-width: 100%; white-space: nowrap; line-height: 1.5; }
.sec-guide .guide-en { font-size: 32px; letter-spacing: 0.96px; color: var(--c-clozy-blue); }
.sec-guide .guide-title { font-size: 32px; font-weight: 700; line-height: 1.5; letter-spacing: 1.6px; color: var(--c-pony-blue); text-align: center; }

.sec-guide .guide-group { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 800px; max-width: 100%; box-sizing: border-box; }
.sec-guide .guide-group-listing { padding-bottom: 48px; border-bottom: 1px solid var(--c-light-gray); }
.sec-guide .guide-group-title { display: flex; align-items: center; gap: 8px; width: 100%; font-size: 24px; font-weight: 700; line-height: 1.6; letter-spacing: 1.2px; color: var(--c-pony-blue); white-space: nowrap; }
.sec-guide .guide-group-icon { flex: none; width: 40px; height: 40px; }

.sec-guide .guide-group-icon-box { position: relative; overflow: hidden; }
.sec-guide .guide-group-icon-box img { position: absolute; left: calc(50% + 0.95px); top: calc(50% + 1.25px); width: 31.896px; height: 32.5px; max-width: none; transform: translate(-50%, -50%); }

.sec-guide .guide-items { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
.sec-guide .guide-item { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; color: var(--c-black); line-height: 1.6; }
.sec-guide .guide-item dt { font-size: 20px; font-weight: 700; letter-spacing: 1px; }
.sec-guide .guide-item dd { margin: 0; width: 100%; font-size: 16px; font-weight: 500; letter-spacing: 0.8px; }

.sec-guide .guide-logos { display: flex; align-items: center; gap: 24px; width: 100%; }
.sec-guide .guide-logo { position: relative; display: block; flex: none; height: 44px; overflow: hidden; }
.sec-guide .guide-logo img { position: absolute; max-width: none; }

.sec-guide .guide-logo-familymart { width: 42.788px; }
.sec-guide .guide-logo-familymart-mark { left: 0; top: 0; width: 42.775px; height: 31.694px; }
.sec-guide .guide-logo-familymart-text { left: 0; top: 35.98px; width: 42.788px; height: 8.018px; }

.sec-guide .guide-logo-seven { width: 44px; }
.sec-guide .guide-logo-seven img { left: 0; top: 0; width: 44px; height: 44px; }
.sec-guide .guide-logo-seven-text { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 10px; font-weight: 700; line-height: 1.25; letter-spacing: 0; text-align: center; color: var(--c-black); }

.sec-guide .guide-logo-yamato { width: 46.977px; }
.sec-guide .guide-logo-yamato img { left: -7.09px; top: -6.66px; width: 61.2px; height: 57.57px; }

@media (max-width: 767px) {
  .sec-guide { gap: 24px; padding: 40px 16px; box-sizing: border-box; }
  .sec-guide .guide-head { width: 100%; }
  .sec-guide .guide-en { font-size: 24px; letter-spacing: 0.72px; }
  .sec-guide .guide-title { font-size: 28px; line-height: 1.6; letter-spacing: 1.4px; }
  .sec-guide .guide-group { width: 100%; }
  .sec-guide .guide-group-listing { padding-bottom: 32px; }
  .sec-guide .guide-group-title { justify-content: center; }
  .sec-guide .guide-logos { justify-content: center; gap: 32px; }
}

/* 注意事項 */
.sec-notes { background: var(--c-blue-gray); display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 56px 0; }

.sec-notes .notes-head { display: flex; flex-direction: column; align-items: center; width: 1080px; max-width: 100%; white-space: nowrap; line-height: 1.5; }
.sec-notes .notes-en { font-size: 32px; letter-spacing: 0.96px; color: var(--c-clozy-blue); }
.sec-notes .notes-title { font-size: 32px; font-weight: 700; line-height: 1.5; letter-spacing: 1.6px; color: var(--c-pony-blue); text-align: center; }

.sec-notes .notes-items { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 800px; max-width: 100%; padding-bottom: 48px; box-sizing: border-box; }
.sec-notes .notes-item { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; color: var(--c-black); line-height: 1.6; }
.sec-notes .notes-item dt { font-size: 20px; font-weight: 700; letter-spacing: 1px; }
.sec-notes .notes-item dd { margin: 0; width: 100%; font-size: 16px; font-weight: 500; letter-spacing: 0.8px; }

.sec-notes .notes-paras { display: flex; flex-direction: column; gap: 8px; }
.sec-notes .notes-label { font-weight: 700; }

.sec-notes .notes-btn-wrap { width: auto; }
.sec-notes .notes-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 6px; background: var(--c-clozy-blue); color: var(--c-white); font-size: 16px; font-weight: 700; letter-spacing: 0.8px; line-height: 1.6; white-space: nowrap; }
.sec-notes .notes-btn img { flex: none; width: 16px; height: 16px; }

.sec-notes .notes-note { font-size: 14px; letter-spacing: 0.7px; color: var(--c-gray); }

@media (max-width: 767px) {
  .sec-notes { gap: 24px; padding: 40px 16px; box-sizing: border-box; }
  .sec-notes .notes-head { width: 100%; }
  .sec-notes .notes-en { font-size: 24px; letter-spacing: 0.72px; }
  .sec-notes .notes-title { font-size: 28px; line-height: 1.6; letter-spacing: 1.4px; }
  .sec-notes .notes-items { width: 100%; padding-bottom: 0; }

  .sec-notes .notes-btn-wrap { width: 100%; }
  .sec-notes .notes-btn { display: flex; justify-content: center; width: 100%; box-sizing: border-box; padding: 12px 16px; }
}

/* よくある質問 */
.sec-faq { background: var(--c-pony-blue); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 56px 0; }

.sec-faq-sub { margin: 0 auto 40px; max-width: 1360px; }

.sec-faq .faq-head { display: flex; flex-direction: column; align-items: center; width: 1080px; max-width: 100%; line-height: 1.5; }
.sec-faq .faq-en { font-size: 32px; letter-spacing: 0.96px; color: var(--c-clozy-blue-60); white-space: nowrap; }
.sec-faq .faq-title { font-size: 32px; font-weight: 700; line-height: 1.5; letter-spacing: 1.6px; color: var(--c-white); text-align: center; }

.sec-faq .faq-list { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 800px; max-width: 100%; }
.sec-faq .faq-item { width: 100%; box-sizing: border-box; background: var(--c-white); border-radius: 16px; padding: 16px 24px; }

.sec-faq .faq-q { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; color: var(--c-pony-blue); }
.sec-faq .faq-q-text { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 700; line-height: 26px;  letter-spacing: 0.8px; word-break: break-word; }
.sec-faq .faq-icon { flex: none; width: 24px; height: 24px; }
.sec-faq .faq-icon-minus { display: none; }
.sec-faq .faq-item.is-open .faq-icon-plus { display: none; }
.sec-faq .faq-item.is-open .faq-icon-minus { display: block; }

.sec-faq .faq-a { display: none; max-width: 587px; margin-top: 8px; font-size: 16px; font-weight: 500; line-height: 26px; letter-spacing: 0.8px; color: var(--c-black); word-break: break-word; }
.sec-faq .faq-item.is-open .faq-a { display: block; }

.sec-faq .faq-more { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 6px; background: var(--c-clozy-blue); color: var(--c-white); font-size: 16px; font-weight: 700; line-height: 26px; letter-spacing: 0.8px; white-space: nowrap; }
.sec-faq .faq-more img { flex: none; width: 16px; height: 16px; }

@media (max-width: 767px) {

  .sec-faq { gap: 24px; padding: 40px 16px; box-sizing: border-box; }
  .sec-faq .faq-head { width: 100%; }
  .sec-faq .faq-en { font-size: 24px; letter-spacing: 0.72px; }
  .sec-faq .faq-title { font-size: 28px; line-height: 1.6; letter-spacing: 1.4px; }
  .sec-faq .faq-list { width: 100%; }
  .sec-faq .faq-a { max-width: none; }

  .sec-faq .faq-more { display: flex; justify-content: center; width: 100%; box-sizing: border-box; padding: 12px 16px; }
}

/* アプリのご案内 */
.sec-app { background: var(--c-white); display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 41px 0; }

.sec-app .app-head { display: flex; flex-direction: column; align-items: center; width: 1080px; max-width: 100%; }
.sec-app .app-title { width: 100%; font-size: 28px; font-weight: 700; line-height: 1.6; letter-spacing: 1.4px; color: var(--c-pony-blue); text-align: center; word-break: break-word; }

.sec-app .app-logo { width: 219.5px; height: 155.779px; flex: none; }

.sec-app .app-stores { display: flex; align-items: center; gap: 15px; }
.sec-app .app-store { display: block; line-height: 0; }
.sec-app .app-store-ios img { width: 141.507px; height: 52px; }
.sec-app .app-store-android img { width: 175.499px; height: 52px; }

.sec-app .app-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 24px; max-width: 956px; }
.sec-app .app-link { display: inline-flex; align-items: center; gap: 2px; font-size: 16px; font-weight: 700; line-height: 26px;  letter-spacing: 0.8px; color: var(--c-clozy-blue); white-space: nowrap; }
.sec-app .app-link img { flex: none; width: 16px; height: 16px; }

@media (max-width: 767px) {

  .sec-app { gap: 24px; padding: 40px 16px; box-sizing: border-box; }
  .sec-app .app-head { width: 100%; }
  .sec-app .app-title { font-size: 24px; line-height: 38px;  letter-spacing: 1.2px; }

  .sec-app .app-logo { width: 180px; height: 127.746px; }

  .sec-app .app-links { flex-wrap: wrap; width: 330px; max-width: 100%; gap: 16px 32px; }
}

/* フッター */
.sec-footer {
  padding: 12px 0;
  background: var(--c-pony-blue);
  text-align: center;
}

.sec-footer .footer-info {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 16px;
  margin: 0 0 4px; padding: 0 16px; list-style: none;
  font-family: var(--font-jp);
  font-size: 11px; font-weight: 400; line-height: 1.5;
  letter-spacing: var(--ls-jp);
  color: var(--c-white);
}
.sec-footer .footer-info a { color: inherit; text-decoration: underline; }
.sec-footer .copyright {
  font-family: var(--font-jp);
  font-size: 11px; font-weight: 400; line-height: 1.5;
  letter-spacing: var(--ls-jp);
  color: var(--c-white);
  white-space: nowrap;
}

/* スマートフォン用メニュー */
.sp-menu {
  position: fixed;
  top: 92px; left: 0; right: 0; bottom: 0;
  z-index: 890;
  background: var(--c-blue-gray);
  overflow-y: auto;
}
.sp-menu[hidden] { display: none; }
.sp-menu .sp-menu-list {
  display: flex; flex-direction: column; align-items: center;
  gap: 40px;
  padding: 40px 16px;
  box-sizing: border-box;
  width: 100%;
}
.sp-menu .sp-menu-list a {
  display: flex; align-items: center; gap: 2px;
  font-size: 20px; font-weight: 700; line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--c-black);
  white-space: nowrap;
  text-align: center;
}
.sp-menu .sp-menu-list a img { width: 24px; height: 24px; }
@media (min-width: 768px) {
  .sp-menu { display: none; }
}

/* モーダル：対象商品 */
#modal-items[hidden] { display: none; }
#modal-items .modal-backdrop { background: rgba(0, 0, 0, 0.5); }

.modal-items { box-sizing: border-box; width: 956px; max-width: calc(100% - 32px); padding: 40px; background: var(--c-white); border-radius: 16px; color: var(--c-black); }
.modal-items .modal-items-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
.modal-items .modal-items-title { width: 100%; font-size: 24px; font-weight: 700; line-height: 1.6; letter-spacing: 1.2px; color: var(--c-pony-blue); text-align: left; }

.modal-items .modal-items-body { display: flex; align-items: flex-start; gap: 24px; width: 100%; }

.modal-items .modal-items-illust { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 6px; width: 428.571px; height: 240px; flex: none; background: var(--c-blue-gray); border-radius: 16px; overflow: hidden; }
.modal-items .modal-items-illust img { flex: none; max-width: none; }
.modal-items .modal-items-illust-jacket { width: 79.835px; height: 105px; }
.modal-items .modal-items-illust-onepiece { width: 72.381px; height: 110px; }
.modal-items .modal-items-illust-rompers { width: 69.109px; height: 75px; }

.modal-items .modal-items-illust-outer { width: 82.038px; height: 114px; transform: scaleX(-1); }
.modal-items .modal-items-illust-muffler { width: 63.486px; height: 75px; }

.modal-items .modal-items-text { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; flex: 1 0 0; min-width: 1px; }
.modal-items .modal-items-block { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }

.modal-items .modal-items-list { padding-left: 24px; list-style: disc; font-size: 16px; font-weight: 500; line-height: 1.6; letter-spacing: 0.8px; color: var(--c-black); }

.modal-items .modal-items-btn { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 8px; width: 226px; padding: 8px 16px; background: var(--c-clozy-blue); border-radius: 6px; font-size: 16px; font-weight: 700; line-height: 1.6; letter-spacing: 0.8px; color: var(--c-white); white-space: nowrap; }
.modal-items .modal-items-btn img { flex: none; width: 16px; height: 16px; }

.modal-items .modal-items-caution-title { box-sizing: border-box; padding: 3px; border-bottom: 1px solid #EA5023; font-size: 16px; font-weight: 700; line-height: 1.6; letter-spacing: 0.8px; color: #EA5023; text-align: center; white-space: nowrap; }
.modal-items .modal-items-caution-text { width: 100%; font-size: 16px; font-weight: 500; line-height: 1.6; letter-spacing: 0.8px; color: #EA5023; word-break: break-word; }

.modal-items .modal-close { position: absolute; right: 24px; top: 21.5px; width: 24px; height: 24px; display: block; }
.modal-items .modal-close img { width: 24px; height: 24px; }

@media (max-width: 767px) {

  #modal-items { padding: 0 16px; box-sizing: border-box; }
  .modal-items { width: 100%; max-width: 100%; max-height: calc(100% - 32px); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px 16px; }
  .modal-items .modal-items-title { text-align: center; }
  .modal-items .modal-items-body { flex-direction: column; gap: 24px; }

  .modal-items .modal-items-illust { width: 100%; height: 182.56px; gap: 4.564px; border-radius: 12.171px; }
  .modal-items .modal-items-illust-jacket { width: 60.728px; height: 79.87px; }
  .modal-items .modal-items-illust-onepiece { width: 55.058px; height: 83.673px; }
  .modal-items .modal-items-illust-rompers { width: 52.569px; height: 57.05px; }
  .modal-items .modal-items-illust-outer { width: 62.404px; height: 86.716px; }
  .modal-items .modal-items-illust-muffler { width: 48.292px; height: 57.05px; }
  .modal-items .modal-items-text { gap: 24px; width: 100%; flex: none; }
  .modal-items .modal-items-block { gap: 24px; }
  .modal-items .modal-items-block-caution { gap: 16px; align-items: center; }
  .modal-items .modal-items-list { width: 100%; box-sizing: border-box; }

  .modal-items .modal-items-btn { width: 100%; padding: 12px 16px; }

  .modal-items .modal-close { width: 32px; height: 32px; }
  .modal-items .modal-close img { width: 32px; height: 32px; }
}

/* モーダル：ご利用のコツ */
#modal-tips[hidden] { display: none; }
#modal-tips .modal-backdrop { background: rgba(0, 0, 0, 0.5); }

.modal-tips { box-sizing: border-box; display: flex; flex-direction: column; gap: 24px; width: 956px; max-width: calc(100% - 32px); padding: 40px; background: var(--c-white); border-radius: 16px; color: var(--c-black); }
.modal-tips .modal-tips-head { width: 100%; }
.modal-tips .modal-tips-title { width: 100%; font-size: 24px; font-weight: 700; line-height: 1.6; letter-spacing: 1.2px; color: var(--c-pony-blue); text-align: left; }

.modal-tips .modal-close { position: absolute; right: 24px; top: 21.5px; width: 24px; height: 24px; display: block; }
.modal-tips .modal-close img { width: 24px; height: 24px; }

.modal-tips .modal-tips-cards { display: flex; align-items: flex-start; justify-content: center; gap: 16px; }
.modal-tips .modal-tips-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 280px; }

.modal-tips .modal-tips-illust { position: relative; width: 280px; height: 156.8px; background: var(--c-blue-gray); border-radius: 13.785px; overflow: hidden; flex: none; }
.modal-tips .modal-tips-illust img { position: absolute; left: 0; top: 0; width: 280px; height: 156.8px; max-width: none; }

.modal-tips .modal-tips-illust-2 img { left: 50%; top: 6.892px; width: 151.676px; height: 142.154px; transform: translateX(-50%); }

.modal-tips .modal-tips-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }

.modal-tips .modal-tips-text-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; padding-bottom: 12px; border-bottom: 3px dashed var(--c-clozy-blue); }

.modal-tips .modal-tips-point { position: relative; width: 56px; height: 24px; }
.modal-tips .modal-tips-point img { position: absolute; left: 1.03px; top: 1.73px; width: 15.674px; height: 8px; max-width: none; transform: rotate(-45deg); }
.modal-tips .modal-tips-point .en { position: absolute; left: 12.36px; top: 4.22px; font-size: 16.667px; letter-spacing: 0.5px; color: var(--c-clozy-blue); white-space: nowrap; }
.modal-tips .modal-tips-card-title { width: 100%; font-size: 20px; font-weight: 700; line-height: 1.6; letter-spacing: 1px; color: var(--c-pony-blue); text-align: center; }
.modal-tips .modal-tips-card-body { width: 100%; font-size: 16px; font-weight: 500; line-height: 1.6; letter-spacing: 0.8px; color: var(--c-black); word-break: break-word; }

@media (max-width: 767px) {

  #modal-tips { box-sizing: border-box; align-items: flex-start; padding: 40px 16px 35px; }
  .modal-tips { gap: 0; width: 100%; max-width: 100%; max-height: 100%; padding: 0; overflow: hidden; }
  .modal-tips .modal-tips-head { position: relative; flex: none; box-sizing: border-box; padding: 24px 16px; background: var(--c-white); border-radius: 16px 16px 0 0; }
  .modal-tips .modal-tips-title { text-align: center; }

  .modal-tips .modal-close { right: 24px; top: 21.5px; width: 32px; height: 32px; }
  .modal-tips .modal-close img { width: 32px; height: 32px; }
  .modal-tips .modal-tips-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 0 16px 24px; }

  .modal-tips .modal-tips-cards { flex-direction: column; align-items: center; gap: 16px; width: 100%; }
  .modal-tips .modal-tips-card { align-items: center; gap: 8px; width: 100%; }

  .modal-tips .modal-tips-illust { width: 260px; height: 145.6px; border-radius: 12.8px; }
  .modal-tips .modal-tips-illust img { width: 260px; height: 145.6px; }
  .modal-tips .modal-tips-illust-2 img { top: 6.4px; width: 140.842px; height: 132px; }

  .modal-tips .modal-tips-text-head { gap: 0; align-items: center; padding-bottom: 8px; }
  .modal-tips .modal-tips-point { width: 100%; height: 20px; }
  .modal-tips .modal-tips-point img { left: 0.86px; top: 1.44px; width: 13.062px; height: 6.667px; }
  .modal-tips .modal-tips-point .en { left: 10.3px; top: 3.52px; font-size: 13.889px; letter-spacing: 0.4167px; }
  .modal-tips .modal-tips-card-title { white-space: nowrap; }
}

/* モーダル：会員登録の方法 */
#modal-register[hidden] { display: none; }
#modal-register .modal-backdrop { background: rgba(0, 0, 0, 0.5); }

.modal-register { box-sizing: border-box; width: 956px; max-width: calc(100% - 32px); padding: 40px 48px; background: var(--c-white); border: 1px solid var(--c-light-gray); border-radius: 16px; color: var(--c-black); }

.modal-register .modal-register-inner { display: flex; align-items: flex-start; gap: 24px; width: 860px; max-width: 100%; }
.modal-register .modal-register-text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 583px; flex: none; text-align: left; word-break: break-word; }
.modal-register .modal-register-title { width: 100%; font-size: 24px; font-weight: 700; line-height: 1.6; letter-spacing: 1.2px; color: var(--c-pony-blue); }
.modal-register .modal-register-body { width: 100%; font-size: 16px; font-weight: 500; line-height: 1.6; letter-spacing: 0.8px; color: var(--c-black); }
.modal-register .modal-register-body p { white-space: pre-wrap; }

.modal-register .modal-register-list { padding-left: 24px; list-style: disc; }

.modal-register .modal-register-phone { position: relative; width: 195px; height: 387px; flex: none; }
.modal-register .modal-register-phone-img { position: absolute; left: 0; top: 0; width: 195px; height: 406.5px; max-width: none; }

.modal-register .modal-register-callout { position: absolute; left: -5px; top: 57.19px; box-sizing: border-box; width: 201px; height: 37.094px; border: 1px solid var(--c-clozy-blue); border-radius: 2.588px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15); overflow: hidden; background: var(--c-white); }
.modal-register .modal-register-callout img { position: absolute; left: -1px; top: calc(-59.44px - 1px); width: 201.863px; height: 438.496px; max-width: none; }

.modal-register .modal-close { position: absolute; right: 23px; top: 23px; width: 24px; height: 24px; display: block; }
.modal-register .modal-close img { width: 24px; height: 24px; }

@media (max-width: 767px) {

  #modal-register { padding: 0 16px; box-sizing: border-box; }
  .modal-register { width: 100%; max-width: 100%; max-height: calc(100% - 32px); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px 16px; border: 0; }
  .modal-register .modal-register-inner { flex-direction: column; align-items: center; gap: 24px; width: 100%; }
  .modal-register .modal-register-text { width: 100%; }
  .modal-register .modal-register-title { text-align: center; }

  .modal-register .modal-register-phone { width: 155.814px; height: 300px; }
  .modal-register .modal-register-phone-img { left: 3.88px; width: 151.163px; height: 315.1px; }

  .modal-register .modal-register-callout { left: 0; top: 44.33px; width: 155.814px; height: 28.755px; border-width: 0.775px; border-radius: 2.006px; box-shadow: 0 1.55px 3.101px 0 rgba(0, 0, 0, 0.15); }
  .modal-register .modal-register-callout img { left: -0.775px; top: calc(-46.08px - 0.775px); width: 156.483px; height: 339.919px; }

  .modal-register .modal-close { right: 24px; top: 21.5px; width: 32px; height: 32px; }
  .modal-register .modal-close img { width: 32px; height: 32px; }
}