:root{--ink:#172033;--muted:#657086;--line:#e5e9f0;--blue:#1769e0;--bg:#f6f8fb;--white:#fff}*{box-sizing:border-box}html,body{max-width:100%;overflow-x:hidden}body{margin:0;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif;background:var(--bg);line-height:1.75}.wrap{width:min(1100px,calc(100% - 32px));margin-left:auto;margin-right:auto}header{background:var(--white);border-bottom:1px solid var(--line);padding:18px 0}.brand{color:var(--ink);font-size:20px;font-weight:800;text-decoration:none}.hero{padding:64px 0 42px}.hero h1,.product h1{font-size:clamp(30px,5vw,48px);line-height:1.25;margin:.2em 0}.eyebrow,.category{color:var(--blue);font-weight:800;font-size:13px;letter-spacing:.08em;overflow-wrap:anywhere}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.card,.notice,.product article{min-width:0;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 8px 30px rgba(23,32,51,.05)}.card h3{line-height:1.45;overflow-wrap:anywhere}.card h3 a{color:var(--ink);text-decoration:none}.card p{color:var(--muted);overflow-wrap:anywhere}dl div{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:8px 0}dt{color:var(--muted)}dd{margin:0;font-weight:700}.button{display:inline-block;background:var(--blue);color:#fff!important;text-decoration:none;font-weight:700;border-radius:10px;padding:10px 18px;margin-top:10px}.notice{margin:36px 0}.product{padding-top:36px}.product nav{margin-bottom:20px;color:var(--muted);font-size:14px}.product article{max-width:820px;margin:auto}.lead{font-size:18px}.facts{display:grid;gap:10px;margin:24px 0}.facts div{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:12px}.facts span{color:var(--muted)}.product-image{display:block;max-width:420px;width:100%;height:auto;margin:24px auto}.purchase{font-size:18px;padding:14px 22px}.fine{color:var(--muted);font-size:13px}footer{margin-top:60px;padding:28px 0;background:#111827;color:#dbe2ee}@media(max-width:760px){.grid{grid-template-columns:1fr}.hero{padding-top:40px}.card,.notice,.product article{padding:20px}.facts div{display:block}.facts strong{display:block;margin-top:3px}}
.card-image{display:block;width:100%;height:200px;object-fit:contain;margin:16px 0;background:#fff;border-radius:10px}.products-section h2 small{font-size:14px;color:var(--muted);font-weight:500}.share-buttons{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:20px 0}.share-buttons>span{color:var(--muted);font-size:14px;font-weight:700}.share{display:inline-flex;align-items:center;border:0;border-radius:999px;color:#fff;text-decoration:none;font:700 13px/1 sans-serif;padding:10px 14px;cursor:pointer}.facebook{background:#1877f2}.x{background:#111}.line{background:#06c755}.native-share{background:#586174}.pagination{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:7px;margin:34px 0}.pagination a{min-width:40px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);text-align:center;text-decoration:none;font-weight:700}.pagination a.current{background:var(--blue);border-color:var(--blue);color:#fff}@media(min-width:761px){.native-share{display:none}}
.hero-panel{display:flex;align-items:center;justify-content:space-between;gap:42px;margin-top:32px;margin-bottom:58px;padding:38px 42px;border:1px solid #dce7f7;border-radius:22px;background:linear-gradient(135deg,#edf5ff,#f7f2ff);box-shadow:0 12px 36px rgba(23,32,51,.06)}
.hero-copy{min-width:0;flex:1}
.page-qr{flex:0 0 184px;text-align:center;padding:14px;border:1px solid rgba(23,105,224,.18);border-radius:18px;background:rgba(255,255,255,.82)}
.page-qr img{display:block;width:152px;height:152px;margin:0 auto;background:#fff;border-radius:8px}
.page-qr p{margin:8px 0 0;color:var(--muted);font-size:13px;font-weight:700;line-height:1.45}
@media(max-width:760px){.hero-panel{display:block;margin-top:20px;margin-bottom:40px;padding:28px 22px}.page-qr{width:184px;margin:24px auto 0}}
/* Compact title panel */
.hero-panel{
  margin-bottom:0;
  padding:20px 32px;
  min-height:126px;
}

.hero-panel .hero-copy h1{
  margin:0;
}

.page-qr{
  flex:0 0 112px;
  padding:7px;
  border-radius:12px;
}

.page-qr img{
  width:88px;
  height:88px;
}

.page-qr p{
  margin:5px 0 0;
  font-size:11px;
  line-height:1.35;
}

.hero-summary{
  margin:18px 0 6px;
}

.share-buttons{
  margin:12px 0 24px;
}

@media(max-width:760px){
  .hero-panel{
    display:flex;
    padding:18px;
    gap:14px;
  }

  .hero-panel .hero-copy h1{
    font-size:clamp(24px,7vw,32px);
  }

  .page-qr{
    flex:0 0 92px;
    width:92px;
    margin:0;
    padding:6px;
  }

  .page-qr img{
    width:80px;
    height:80px;
  }

  .page-qr p{
    font-size:10px;
  }
}
/* QR text outside the QR box */
.hero-panel{
  margin-bottom:0;
  padding:20px 32px;
  min-height:126px;
}

.hero-panel .hero-copy h1{
  margin:0;
}

.qr-group{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex:0 0 auto;
}

.qr-group>p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  line-height:1.5;
  text-align:right;
}

.page-qr{
  flex:0 0 102px;
  width:102px;
  margin:0;
  padding:7px;
  border-radius:12px;
}

.page-qr img{
  display:block;
  width:88px;
  height:88px;
  margin:0;
}

.page-qr p{
  display:none;
}

.hero-summary{
  margin:18px 0 6px;
}

.share-buttons{
  margin:12px 0 24px;
}

@media(max-width:760px){
  .hero-panel{
    display:block;
    padding:18px;
  }

  .hero-panel .hero-copy h1{
    font-size:clamp(24px,7vw,32px);
  }

  .qr-group{
    justify-content:flex-end;
    margin-top:16px;
    gap:9px;
  }

  .qr-group>p{
    font-size:11px;
  }

  .page-qr{
    flex:0 0 82px;
    width:82px;
    margin:0;
    padding:5px;
  }

  .page-qr img{
    width:70px;
    height:70px;
  }
}
/* Contact form */
.contact-form{max-width:760px;margin-top:28px}
.form-field{margin:0 0 20px}
.form-field label{display:block;margin-bottom:6px;font-weight:700}
.form-field input,.form-field select,.form-field textarea{display:block;width:100%;padding:12px 14px;border:1px solid #cbd3df;border-radius:9px;background:#fff;color:var(--ink);font:inherit}
.form-field textarea{resize:vertical}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:3px solid rgba(23,105,224,.18);border-color:var(--blue)}
.required{display:inline-block;margin-left:5px;padding:2px 6px;border-radius:4px;background:#c62828;color:#fff;font-size:11px}
.form-note{padding:14px 16px;border-radius:9px;background:#fff7df;color:#5d4a16}
.contact-submit{border:0;cursor:pointer}
.contact-submit:disabled{opacity:.6;cursor:wait}
.form-status{min-height:1.7em;margin-top:14px;font-weight:700}
.form-status.success{color:#087a39}
.form-status.error{color:#b42318}
.form-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
/* Prominent contact result */
.form-status{
  display:none;
  margin:18px 0 26px;
  padding:20px 24px;
  border:2px solid #8a96a8;
  border-radius:12px;
  background:#fff;
  font-size:20px;
  font-weight:800;
  line-height:1.6;
  box-shadow:0 8px 24px rgba(23,32,51,.08);
}

.form-status:not(:empty){
  display:block;
}

.form-status.success{
  border-color:#168a48;
  background:#eaf8f0;
  color:#086b35;
}

.form-status.error{
  border-color:#c7362f;
  background:#fff0ef;
  color:#a12520;
}

/* Daily homepage feature */
.daily-feature {
  margin: 26px 0 32px;
  padding: 24px;
  border: 1px solid #b8d5f3;
  border-radius: 16px;
  background: linear-gradient(135deg, #edf7ff 0%, #ffffff 76%);
}

.daily-feature-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.daily-feature-head h2 {
  margin: 3px 0 7px;
}

.daily-feature-date {
  margin: 0;
  color: #0866c6;
  font-size: 14px;
  font-weight: 800;
}

.daily-feature-badge {
  flex: 0 0 auto;
  padding: 7px 12px;
  border-radius: 999px;
  background: #0866c6;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.daily-feature-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.daily-feature-card {
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.daily-feature-card h3 {
  margin: 5px 0 9px;
  font-size: 16px;
  line-height: 1.55;
}

.daily-feature-card h3 a {
  color: var(--ink);
  text-decoration: none;
}

.daily-feature-price {
  color: #0756a6;
  font-size: 17px;
  font-weight: 800;
}

.daily-feature-note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 760px) {
  .daily-feature {
    padding: 18px;
  }

  .daily-feature-head {
    display: block;
  }

  .daily-feature-badge {
    display: inline-block;
    margin-top: 6px;
  }

  .daily-feature-products {
    grid-template-columns: 1fr;
  }
}


/* Yahoo colorful design and history 20260911 */
:root {
  --blue: #1769e0;
  --yellow: #f5b700;
  --orange: #f97316;
}

body {
  background:
    radial-gradient(circle at 92% 4%, rgba(14, 165, 233, 0.10), transparent 28rem),
    #f4f8ff;
}

header {
  border: 0;
  color: #fff;
  background: linear-gradient(120deg, #356986, #39809a 55%, #3e8790);
  box-shadow: 0 7px 24px rgba(30, 78, 110, 0.18);
}

header .brand {
  color: #fff;
}

.hero-panel {
  border-color: #b9d9f7;
  background: linear-gradient(135deg, #e7f4ff, #eef2ff 55%, #fff8dc);
  box-shadow: 0 14px 34px rgba(23, 105, 224, 0.12);
}

.card {
  position: relative;
  overflow: hidden;
  border-color: #d9e3f2;
  box-shadow: 0 7px 22px rgba(23, 65, 110, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: 0 15px 32px rgba(23, 105, 224, 0.16);
  transform: translateY(-4px);
}

.grid .card:nth-child(4n + 1) {
  border-top: 5px solid #1769e0;
}

.grid .card:nth-child(4n + 2) {
  border-top: 5px solid #06b6d4;
}

.grid .card:nth-child(4n + 3) {
  border-top: 5px solid #f5b700;
}

.grid .card:nth-child(4n) {
  border-top: 5px solid #f97316;
}

.category,
.eyebrow {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  color: #0756a6;
  background: #e0f2fe;
}

.button {
  border-radius: 999px;
  background: linear-gradient(135deg, #1769e0, #0891b2);
  box-shadow: 0 6px 15px rgba(23, 105, 224, 0.20);
}

.purchase {
  background: linear-gradient(135deg, #f97316, #f5b700);
}

.daily-feature {
  border-color: #9dccf5;
  background: linear-gradient(135deg, #eaf5ff, #eef2ff 50%, #fff8dc);
  box-shadow: 0 14px 34px rgba(23, 105, 224, 0.12);
}

.daily-feature-badge {
  background: linear-gradient(135deg, #1769e0, #06b6d4);
  box-shadow: 0 5px 13px rgba(23, 105, 224, 0.20);
}

.daily-feature-actions {
  display: grid;
  flex: 0 0 auto;
  gap: 10px;
  justify-items: end;
}

.history-button {
  display: inline-block;
  padding: 10px 17px;
  border-radius: 999px;
  color: #172033;
  background: linear-gradient(135deg, #ffd84d, #f5b700);
  box-shadow: 0 6px 15px rgba(245, 183, 0, 0.25);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.history-button:hover {
  color: #172033;
  filter: brightness(0.94);
}

.daily-feature-card {
  position: relative;
  overflow: hidden;
  box-shadow: 0 7px 20px rgba(23, 65, 110, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.daily-feature-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, #1769e0, #06b6d4);
  content: "";
}

.daily-feature-card:nth-child(3n + 2)::before {
  background: linear-gradient(90deg, #f5b700, #f97316);
}

.daily-feature-card:nth-child(3n)::before {
  background: linear-gradient(90deg, #06b6d4, #10b981);
}

.daily-feature-card:hover {
  box-shadow: 0 14px 28px rgba(23, 105, 224, 0.15);
  transform: translateY(-4px);
}

.daily-feature-price,
.history-price {
  color: #d95700;
  font-weight: 800;
}

.history-main {
  padding-top: 34px;
}

.history-intro {
  padding: 28px;
  border: 1px solid #b9d9f7;
  border-radius: 20px;
  background: linear-gradient(135deg, #e7f4ff, #eef2ff 55%, #fff8dc);
  box-shadow: 0 12px 30px rgba(23, 105, 224, 0.11);
}

.history-kicker {
  margin: 0;
  color: #0756a6;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.history-intro h1 {
  margin: 4px 0;
  font-size: clamp(28px, 5vw, 44px);
}

.history-count {
  color: var(--muted);
  font-weight: 700;
}

.history-list {
  display: grid;
  gap: 22px;
  margin-top: 26px;
}

.history-day {
  padding: 24px;
  border: 1px solid #d9e3f2;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 9px 25px rgba(23, 65, 110, 0.08);
}

.history-day-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.history-day-head h2 {
  margin: 3px 0 7px;
}

.history-products {
  display: grid;
  gap: 9px;
  margin-top: 17px;
}

.history-product {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 13px 15px;
  border: 1px solid #dce7f4;
  border-radius: 11px;
  color: #25305a;
  background: #f8fbff;
  text-decoration: none;
}

.history-product:hover {
  border-color: #8fc4ef;
  background: #eef7ff;
}

.history-product span {
  display: grid;
  gap: 3px;
}

.history-category {
  color: #0756a6;
  font-weight: 800;
}

.history-product b {
  color: #1769e0;
  font-size: 1.5rem;
}

.history-back {
  margin-top: 28px;
  text-align: center;
}

@media (max-width: 760px) {
  .daily-feature-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 10px;
  }

  .history-day-head {
    display: block;
  }

  .card:hover,
  .daily-feature-card:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .daily-feature-card {
    transition: none;
  }
}

/* Yahoo light clear design 20260911 */
:root {
  --blue: #317fbd;
  --bg: #f7fbff;
  --line: #d9e8f3;
  --muted: #586b7d;
}

body {
  background:
    radial-gradient(
      circle at 92% 3%,
      rgba(93, 183, 225, 0.12),
      transparent 30rem
    ),
    #f7fbff;
}

header {
  border-bottom: 1px solid #b9d9eb;
  background: linear-gradient(
    120deg,
    #dff3fc 0%,
    #e8f6fc 55%,
    #f4faff 100%
  );
  box-shadow: 0 5px 17px rgba(43, 105, 145, 0.11);
}

header .brand {
  color: #204f72;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

header nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

header nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 15px;
  border: 1px solid #87b7d2;
  border-radius: 999px;
  color: #184d73;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 3px 9px rgba(43, 105, 145, 0.10);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}

header nav a:hover,
header nav a:focus-visible {
  border-color: #5798bd;
  color: #123f60;
  background: #ffffff;
  box-shadow: 0 5px 13px rgba(43, 105, 145, 0.16);
  transform: translateY(-1px);
}

.hero-panel {
  border-color: #b9dceb;
  background: linear-gradient(
    135deg,
    #e8f7fd 0%,
    #f0f8ff 52%,
    #fffbea 100%
  );
  box-shadow: 0 11px 28px rgba(43, 105, 145, 0.10);
}

.button,
.purchase {
  border: 1px solid #2874ad;
  color: #ffffff !important;
  background: linear-gradient(
    135deg,
    #3f91ca 0%,
    #317fbd 100%
  );
  box-shadow:
    0 5px 14px rgba(35, 104, 151, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.button:hover,
.button:focus-visible,
.purchase:hover,
.purchase:focus-visible {
  border-color: #236a9f;
  color: #ffffff !important;
  background: linear-gradient(
    135deg,
    #3787c0 0%,
    #2a74ae 100%
  );
  box-shadow:
    0 7px 17px rgba(35, 104, 151, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
  transform: translateY(-1px);
}

.daily-feature {
  border-color: #b8ddec;
  background: linear-gradient(
    135deg,
    #eaf8fd 0%,
    #f1f8ff 55%,
    #fffbed 100%
  );
  box-shadow: 0 12px 29px rgba(43, 105, 145, 0.10);
}

.daily-feature-badge {
  color: #ffffff;
  background: linear-gradient(
    135deg,
    #3d91c7,
    #42a7bc
  );
  box-shadow: 0 4px 11px rgba(43, 121, 160, 0.18);
}

.history-button {
  border: 1px solid #d6ad39;
  color: #4d3b08;
  background: linear-gradient(
    135deg,
    #ffe58b,
    #f7cf5f
  );
  box-shadow: 0 5px 13px rgba(180, 139, 28, 0.18);
}

.history-button:hover,
.history-button:focus-visible {
  border-color: #c69a26;
  color: #3f3005;
  background: linear-gradient(
    135deg,
    #ffdf73,
    #efc34d
  );
  filter: none;
  transform: translateY(-1px);
}

.card,
.notice,
.product article,
.daily-feature-card,
.history-day {
  border-color: #d8e8f2;
  box-shadow: 0 7px 21px rgba(43, 89, 121, 0.07);
}

.history-intro {
  border-color: #baddec;
  background: linear-gradient(
    135deg,
    #e9f7fd,
    #f2f8ff 58%,
    #fffbed
  );
  box-shadow: 0 10px 25px rgba(43, 105, 145, 0.09);
}

@media (max-width: 760px) {
  .header-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  header nav {
    width: 100%;
  }

  header nav a {
    flex: 1 1 auto;
  }
}

/* Yahoo visible header link separator 20260911 */
header nav .nav-gap {
  display: inline-block !important;
  flex: 0 0 20px !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 1px;
}

@media (max-width: 760px) {
  header nav {
    display: flex !important;
    align-items: center;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }

  header nav a {
    flex: 1 1 0 !important;
  }

  header nav .nav-gap {
    flex-basis: 14px !important;
    width: 14px !important;
    min-width: 14px !important;
  }
}

/* Yahoo final visible navigation 20260911 */
.header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px !important;
}

header nav {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
}

header nav a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 9px 18px !important;
  border: 1px solid #286f9e !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: linear-gradient(
    135deg,
    #438dbd,
    #3279aa
  ) !important;
  box-shadow: 0 4px 12px rgba(32, 93, 133, 0.23) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

header nav .nav-gap {
  display: block !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 1px !important;
}

header nav a:hover,
header nav a:focus-visible {
  border-color: #205f88 !important;
  color: #ffffff !important;
  background: linear-gradient(
    135deg,
    #377faa,
    #286b99
  ) !important;
}

footer a,
footer a:link,
footer a:visited,
footer a:hover,
footer a:focus-visible {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-decoration-color: rgba(255, 255, 255, 0.75) !important;
  text-underline-offset: 3px;
}

@media (max-width: 760px) {
  .header-inner {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  header nav {
    width: 100% !important;
  }

  header nav a {
    flex: 1 1 0 !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  header nav .nav-gap {
    flex-basis: 14px !important;
    width: 14px !important;
    min-width: 14px !important;
  }
}

/* ===== 商品・ストア検索 ===== */
.global-product-search,
.product-search-panel,
.product-page-search {
  margin: 0 0 24px;
  padding: 18px;
  border: 1px solid #d9e2ec;
  border-radius: 12px;
  background: #fff;
}

.global-product-search label,
.product-page-search label {
  display: block;
  margin-bottom: 8px;
}

.product-search-panel h1 {
  margin-top: 0;
}

.product-search-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.product-search-row input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #b8c5d1;
  border-radius: 8px;
  font: inherit;
  background: #fff;
}

.product-search-row button {
  padding: 12px 20px;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.search-store {
  font-size: .9rem;
  opacity: .8;
}

@media (max-width: 640px) {
  .product-search-row {
    flex-direction: column;
    align-items: stretch;
  }

  .product-search-row button {
    width: 100%;
  }
}