@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');
:root {
  --green: #43675b;
  --dark: #233d35;
  --mint: #eaf0e9;
  --pale: #f5f7f1;
  --cream: #faf9f5;
  --text: #283b34;
  --muted: #76847a;
  --line: #e4e9e2;
  --max: 1200px
}
* {
  box-sizing: border-box
}
html {
  scroll-behavior: smooth
}
body {
  margin: 0;
  font-family: 'DM Sans', 'Noto Sans JP', sans-serif;
  color: var(--text);
  background: #fff;
  line-height: 1.7
}
a {
  text-decoration: none;
  color: inherit
}
button {
  font: inherit;
  cursor: pointer
}
img {
  max-width: 100%;
  display: block
}
.bar {
  background: var(--dark);
  color: white;
  text-align: center;
  padding: 8px 15px;
  font-size: 11px;
  letter-spacing: .15em
}
.header {
  background: rgba(255, 255, 255, .95);
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px)
}
.header-in {
  height: 82px;
  max-width: 1380px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 38px;
  gap: 30px
}
.brand {
  font-size: 27px;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--dark);
  line-height: 1
}
.brand small {
  display: block;
  font-size: 9px;
  letter-spacing: .24em;
  font-weight: 500;
  margin-top: 9px;
  text-align: center
}
.nav {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em
}
.nav a:hover, .footer a:hover {
  color: #75a68c
}
.actions {
  display: flex;
  gap: 18px;
  align-items: center
}
.iconbtn {
  background: none;
  border: 0;
  padding: 4px;
  color: var(--dark);
  display: flex
}
.iconbtn svg {
  height: 21px;
  width: 21px;
  stroke: currentColor;
  stroke-width: 1.65;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round
}
.mobile-menu {
  display: none
}
.hero {
  position: relative;
  height: min(650px, 53vw);
  min-height: 440px;
  background: #e4ebdf;
  overflow: hidden
}
.slides {
  height: 100%
}
.slide {
  inset: 0;
  position: absolute;
  opacity: 0;
  transition: opacity .85s ease;
  pointer-events: none
}
.slide.active {
  opacity: 1;
  pointer-events: auto
}
.slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(24, 54, 42, .49), rgba(36, 59, 43, .08) 72%);
  z-index: 1
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center
}
.slide .copy {
  position: absolute;
  z-index: 2;
  left: max(calc((100vw - var(--max))/2), 7%);
  top: 50%;
  transform: translateY(-50%);
  color: #fff
}
.eyebrow {
  font-size: 11px;
  letter-spacing: .24em;
  font-weight: 700
}
.hero h1 {
  font-weight: 500;
  line-height: 1.65;
  font-size: clamp(28px, 3.5vw, 51px);
  letter-spacing: .12em;
  margin: 19px 0
}
.hero p {
  font-size: 13px;
  line-height: 2;
  letter-spacing: .1em
}
.outline-btn, .solid-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  min-width: 188px;
  padding: 13px 25px;
  margin-top: 23px;
  font-size: 12px;
  letter-spacing: .13em;
  transition: .25s
}
.outline-btn {
  color: white;
  border: 1px solid rgba(255, 255, 255, .8)
}
.outline-btn:hover {
  background: white;
  color: var(--dark)
}
.solid-btn {
  color: white;
  background: var(--green);
  border: 1px solid var(--green)
}
.solid-btn:hover {
  background: var(--dark)
}
.dots {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 11px
}
.dot {
  height: 6px;
  width: 6px;
  border: 0;
  border-radius: 10px;
  padding: 0;
  background: #ffffff99;
  transition: .3s
}
.dot.active {
  width: 28px;
  background: #fff
}
.arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, .2);
  border: 1px solid #ffffff80;
  border-radius: 100%;
  color: white;
  font-size: 23px
}
.arrow:hover {
  background: #ffffff55
}
.prev {
  left: 30px
}
.next {
  right: 30px
}
.container {
  max-width: var(--max);
  margin: auto;
  padding: 0 26px
}
.section {
  padding: 90px 0
}
.section.soft {
  background: var(--pale)
}
.section-head {
  text-align: center;
  margin-bottom: 40px
}
.section-head .en {
  font-size: 31px;
  letter-spacing: .10em;
  color: var(--dark);
  font-weight: 500;
  line-height: 1.2
}
.section-head .jp {
  font-size: 12px;
  letter-spacing: .17em;
  color: var(--muted);
  margin-top: 10px
}
.section-head .rule {
  height: 1px;
  width: 33px;
  background: var(--green);
  margin: 18px auto 0
}
.news {
  padding: 44px 0;
  border-bottom: 1px solid var(--line)
}
.news-wrap {
  display: flex;
  gap: 75px;
  align-items: center
}
.news-title {
  flex: 0 0 130px;
  font-size: 24px;
  letter-spacing: .13em;
  font-weight: 500
}
.news-title small {
  font-size: 11px;
  display: block;
  letter-spacing: .15em;
  color: var(--muted)
}
.news-list {
  flex: 1
}
.news-item {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px
}
.news-item:last-child {
  border-bottom: 0
}
.news-item time {
  color: var(--muted);
  white-space: nowrap;
  font-size: 11px
}
.pill {
  font-size: 10px;
  border: 1px solid #b9cbbb;
  color: var(--green);
  padding: 2px 10px;
  white-space: nowrap
}
.news-item a:hover {
  text-decoration: underline
}
.news-more {
  font-size: 11px;
  letter-spacing: .1em;
  white-space: nowrap
}
.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px
}
.product {
  min-width: 0
}
.product-img {
  height: auto;
  aspect-ratio: 1/1.1;
  background: #edf0e9;
  overflow: hidden;
  position: relative
}
.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s
}
.product:hover img {
  transform: scale(1.045)
}
.tag {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  background: rgba(255, 255, 255, .91);
  padding: 5px 12px;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--green)
}
.product-name {
  font-size: 13px;
  font-weight: 600;
  margin: 15px 0 4px
}
.product-sub {
  font-size: 11px;
  color: var(--muted);
  margin: 0
}
.price {
  margin-top: 9px;
  font-size: 14px;
  font-weight: 600
}
.price span {
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 4px
}
.center {
  text-align: center
}
.center .solid-btn {
  margin-top: 46px
}
.feature {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  min-height: 670px;
  background: #edf2ea
}
.feature-image {
  position: relative;
  overflow: hidden;
  min-height: 470px
}
.feature-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0
}
.feature-copy {
  display: flex;
  align-items: center;
  padding: 68px clamp(34px, 6vw, 115px)
}
.feature-copy .inner {
  max-width: 470px
}
.feature-copy h2 {
  font-size: clamp(25px, 2.8vw, 39px);
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.7;
  margin: 15px 0 20px
}
.feature-copy p {
  font-size: 13px;
  line-height: 2.5;
  color: #637569
}
.collections {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px
}
.collection {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1/1.15;
  background: #dce5d9
}
.collection img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .5s
}
.collection:hover img {
  transform: scale(1.04)
}
.collection:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 45%, rgba(14, 40, 30, .58))
}
.collection-label {
  position: absolute;
  bottom: 26px;
  left: 25px;
  right: 20px;
  z-index: 2;
  color: #fff
}
.collection-label strong {
  font-size: 23px;
  letter-spacing: .09em;
  font-weight: 500
}
.collection-label span {
  display: block;
  font-size: 11px;
  margin-top: 2px;
  letter-spacing: .08em
}
.story {
  background: var(--dark);
  color: white;
  padding: 75px 0
}
.story-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 40px
}
.story h2 {
  font-weight: 500;
  font-size: 28px;
  letter-spacing: .1em
}
.story p {
  font-size: 13px;
  line-height: 2.2;
  color: #d1ddd3;
  max-width: 720px
}
.story .outline-btn {
  margin: 0
}
.footer {
  background: var(--cream);
  padding: 65px 0 25px
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 50px
}
.footer .brand {
  font-size: 24px;
  display: inline-block
}
.footer p, .footer a {
  font-size: 11px;
  line-height: 2.2;
  color: #697a70
}
.footer h4 {
  font-size: 12px;
  letter-spacing: .1em;
  margin: 0 0 17px
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 7px
}
.copyright {
  border-top: 1px solid #e4e7df;
  margin-top: 50px;
  padding-top: 24px;
  color: #8a968d;
  font-size: 10px;
  letter-spacing: .07em
}
.menu-panel {
  display: none
}
.notice {
  text-align: center;
  font-size: 10px;
  color: #87968a;
  padding: 14px
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0)
}
@media(max-width:900px) {
  .header-in {
    height: 70px;
    padding: 0 20px
  }
  .nav {
    gap: 17px;
    font-size: 10px
  }
  .brand {
    font-size: 23px
  }
  .actions {
    gap: 10px
  }
  .hero {
    height: 550px
  }
  .section {
    padding: 65px 0
  }
  .products {
    gap: 15px
  }
  .news-wrap {
    gap: 25px
  }
  .feature-copy {
    padding: 38px
  }
  .feature-image {
    min-height: 420px
  }
  .feature {
    min-height: 420px
  }
}
@media(max-width:650px) {
  .bar {
    font-size: 9px
  }
  .header-in {
    height: 65px;
    justify-content: center
  }
  .brand {
    font-size: 23px
  }
  .nav {
    display: none
  }
  .mobile-menu {
    display: flex;
    position: absolute;
    left: 17px
  }
  .actions {
    position: absolute;
    right: 15px
  }
  .actions .search {
    display: none
  }
  .hero {
    height: 550px;
    min-height: 0
  }
  .slide::before {
    background: linear-gradient(0deg, rgba(24, 54, 42, .65), rgba(36, 59, 43, .04) 90%)
  }
  .slide img {
    object-position: 58% center
  }
  .slide .copy {
    left: 25px;
    right: 24px;
    top: auto;
    bottom: 80px;
    transform: none
  }
  .hero h1 {
    font-size: 29px;
    margin: 12px 0
  }
  .hero p {
    font-size: 11px
  }
  .eyebrow {
    font-size: 9px
  }
  .arrow {
    width: 33px;
    height: 33px;
    top: 45%;
    font-size: 19px
  }
  .prev {
    left: 10px
  }
  .next {
    right: 10px
  }
  .dots {
    bottom: 16px
  }
  .container {
    padding: 0 20px
  }
  .news {
    padding: 37px 0
  }
  .news-wrap {
    display: block
  }
  .news-title {
    font-size: 20px;
    margin-bottom: 12px
  }
  .news-title small {
    display: inline;
    margin-left: 10px
  }
  .news-item {
    gap: 11px;
    flex-wrap: wrap;
    padding: 11px 0
  }
  .news-item a {
    flex-basis: 100%
  }
  .news-more {
    display: block;
    margin-top: 18px;
    text-align: right
  }
  .section {
    padding: 57px 0
  }
  .section-head {
    margin-bottom: 26px
  }
  .section-head .en {
    font-size: 26px
  }
  .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 13px
  }
  .product-name {
    font-size: 12px
  }
  .product-sub {
    font-size: 10px
  }
  .price {
    font-size: 13px
  }
  .feature {
    grid-template-columns: 1fr
  }
  .feature-image {
    min-height: 310px
  }
  .feature-copy {
    padding: 48px 28px 55px
  }
  .feature-copy h2 {
    font-size: 28px
  }
  .collections {
    grid-template-columns: 1fr 1fr;
    gap: 13px
  }
  .collection:first-child {
    grid-column: span 2;
    aspect-ratio: 1.35
  }
  .collection {
    aspect-ratio: .82
  }
  .collection-label {
    left: 15px;
    bottom: 17px
  }
  .collection-label strong {
    font-size: 18px
  }
  .collection-label span {
    font-size: 10px
  }
  .story {
    padding: 55px 0
  }
  .story-grid {
    display: block
  }
  .story h2 {
    font-size: 23px
  }
  .story .outline-btn {
    margin-top: 22px
  }
  .footer {
    padding-top: 50px
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 31px 15px
  }
  .footer-grid > div:first-child {
    grid-column: span 2
  }
  .copyright {
    margin-top: 35px
  }
  .menu-panel {
    position: fixed;
    inset: 65px 0 auto 0;
    background: white;
    padding: 25px;
    box-shadow: 0 15px 24px #0001;
    z-index: 25
  }
  .menu-panel.open {
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-size: 14px;
    letter-spacing: .1em
  }
}
/* Reference-inspired corporate navigation */
.site-header {
  position: relative;
  top: auto;
  background: #fff;
  backdrop-filter: none;
  box-shadow: 0 1px 0 #ebebeb
}
.site-header .header-in {
  height: 104px;
  max-width: none;
  margin: 0;
  padding: 0 0 0 33px;
  gap: 0;
  justify-content: initial
}
.site-header .brand {
  flex: 0 0 auto;
  font-size: 33px;
  font-weight: 900;
  letter-spacing: -.07em;
  color: #315e48;
  text-shadow: 1px 1px 0 #e8f0e8;
  line-height: 1
}
.site-header .brand small {
  text-align: center;
  letter-spacing: .25em;
  font-size: 8px;
  margin-top: 8px;
  text-shadow: none;
  font-weight: 600
}
.head-nav-area {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  padding: 0 28px 0 15px;
  height: 100%
}
.head-utility {
  display: flex;
  gap: 25px;
  font-size: 11px;
  color: #8a8a8a;
  font-weight: 700
}
.head-main {
  display: flex;
  align-items: center
}
.head-main a {
  font-size: 13px;
  font-weight: 700;
  padding: 0 20px;
  border-right: 1px solid #d9d9d9;
  line-height: 1.4;
  white-space: nowrap;
  color: #333
}
.head-main a:last-child {
  border: 0;
  padding-right: 0
}
.head-main a:hover, .head-utility a:hover {
  color: #e65a19
}
.head-actions {
  height: 104px;
  display: flex;
  align-self: stretch
}
.head-action {
  height: 104px;
  width: 105px;
  background: #219866;
  border-left: 1px solid #fff7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: white !important;
  text-align: center;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 700;
  white-space: nowrap
}
.head-action:hover {
  background: #ca4800
}
.head-action svg {
  width: 39px;
  height: 39px
}
.mobile-menu-toggle {
  display: none
}
.site-header .menu-panel {
  display: none
}
.inner-hero {
  background: linear-gradient(110deg, #e9f1e9, #fbfbf5);
  padding: 72px 20px;
  text-align: center
}
.inner-hero .kicker {
  font-size: 12px;
  color: #678877;
  letter-spacing: .24em
}
.inner-hero h1 {
  font-weight: 600;
  font-size: clamp(27px, 4vw, 42px);
  margin: 10px 0
}
.inner-hero p {
  color: #718276;
  font-size: 13px
}
.crumbs {
  max-width: 1150px;
  margin: 0 auto;
  padding: 15px 24px;
  font-size: 11px;
  color: #748479
}
.crumbs a {
  text-decoration: underline
}
.page-body {
  max-width: 1100px;
  margin: auto;
  padding: 42px 24px 100px
}
.page-lead {
  font-size: 15px;
  line-height: 2.4;
  max-width: 760px;
  margin: 0 auto 54px;
  text-align: center
}
.page-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px
}
.page-card {
  border: 1px solid #e6ebe3;
  background: #fff;
  overflow: hidden
}
.page-card img {
  width: 100%;
  /*aspect-ratio: 1.25;*/
  object-fit: cover;
  background: #eff4eb
}
.page-card .desc {
  padding: 20px
}
.page-card h2 {
  font-size: 15px;
  margin: 0 0 6px
}
.page-card p {
  font-size: 12px;
  line-height: 2;
  color: #768278;
  margin: 0
}
.page-card a {
  display: block
}
.content-panel {
  padding: 35px;
  background: #f6f8f4;
  margin: 22px 0
}
.content-panel h2 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 14px
}
.content-panel p {
  font-size: 14px;
  line-height: 2.3;
  margin: 0
}
.subnav {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 30px
}
.subnav a {
  border: 1px solid #bad0c0;
  border-radius: 50px;
  padding: 8px 18px;
  font-size: 12px;
  color: #43675b
}
.subnav a:hover {
  background: #e9f3e8
}
.contact-form {
  max-width: 670px;
  margin: auto
}
.form-group {
  margin: 0 0 20px
}
.form-group label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 7px
}
.form-group input, .form-group textarea, .form-group select {
  display: block;
  width: 100%;
  padding: 14px 12px;
  border: 1px solid #d7dfd6;
  background: white;
  font: inherit;
  font-size: 14px
}
.form-group textarea {
  min-height: 155px;
  resize: vertical
}
.contact-note {
  font-size: 12px;
  color: #738076;
  line-height: 1.9
}
.shop-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 22px 0
}
.shop-actions a {
  padding: 12px 23px;
  background: #43675b;
  color: white;
  font-size: 13px
}
.article {
  border-bottom: 1px solid #e2e8e1;
  padding: 25px 8px
}
.article time {
  font-size: 12px;
  color: #829185
}
.article h2 {
  font-weight: 600;
  font-size: 18px;
  margin: 10px 0
}
.article p {
  font-size: 13px;
  line-height: 2
}
@media(max-width:1000px) {
  .site-header .header-in {
    padding-left: 18px
  }
  .site-header .brand {
    font-size: 25px
  }
  .head-nav-area {
    padding-right: 12px
  }
  .head-main a {
    padding: 0 11px;
    font-size: 11px
  }
  .head-utility {
    gap: 14px;
    font-size: 10px
  }
  .head-action {
    width: 83px;
    font-size: 10px
  }
}
@media(max-width:730px) {
  .site-header .header-in {
    height: 70px;
    padding: 0 0 0 12px
  }
  .site-header .brand {
    font-size: 23px;
    margin-left: 42px
  }
  .head-nav-area {
    display: none
  }
  .head-actions, .head-action {
    height: 70px
  }
  .head-action {
    width: 67px;
    font-size: 9px;
    gap: 1px
  }
  .head-action svg {
    width: 29px;
    height: 29px
  }
  .mobile-menu-toggle {
    display: flex;
    position: absolute;
    left: 12px;
    top: 22px;
    width: 30px;
    height: 28px;
    border: 0;
    background: none;
    padding: 3px;
    flex-direction: column;
    justify-content: space-around
  }
  .mobile-menu-toggle span {
    display: block;
    height: 2px;
    width: 23px;
    background: #315e48
  }
  .site-header .menu-panel {
    position: absolute;
    inset: 70px 0 auto;
    background: #fff;
    padding: 22px 25px;
    box-shadow: 0 16px 22px #0002;
    z-index: 25
  }
  .site-header .menu-panel.open {
    display: flex;
    flex-direction: column;
    gap: 17px
  }
  .page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px
  }
  .page-card .desc {
    padding: 13px
  }
  .page-card h2 {
    font-size: 15px
  }
  .inner-hero {
    padding: 50px 18px
  }
  .page-body {
    padding-bottom: 60px
  }
}
@media(max-width:390px) {
  .site-header .brand {
    font-size: 19px;
    margin-left: 35px
  }
  .head-action {
    width: 60px
  }
  .head-action span {
    font-size: 8px
  }
  .page-grid {
    grid-template-columns: 1fr
  }
}
/* Image-based logo: swap assets/attolucky-logo.png with your final logo image. */
.site-header .brand {
  display: flex;
  align-items: center;
  margin-top: 0;
  text-shadow: none;
  min-width: 0
}
.site-header .brand img {
  display: block;
  width: 270px;
  height: auto;
  max-width: 100%;
  object-fit: contain
}
.footer .brand img {
  display: block;
  width: 216px;
  height: auto;
  object-fit: contain
}
@media(max-width:1000px) {
  .site-header .brand img {
    width: 210px
  }
}
@media(max-width:730px) {
  .site-header .brand img {
    width: 170px
  }
}
@media(max-width:390px) {
  .site-header .brand img {
    width: 143px
  }
}
/* Mobile main visual redesign: image and information each get their own space. */
@media (max-width:650px) {
  .hero {
    height: min(710px, calc(100svh - 70px));
    min-height: 540px;
    background: #f3f6f0;
  }
  .hero .slide {
    display: flex;
    flex-direction: column;
  }
  .hero .slide::before {
    display: none;
  }
  .hero .slide > img {
    height: 57%;
    width: 100%;
    flex: none;
    object-fit: cover;
    object-position: center 48%;
  }
  .hero .slide .copy {
    position: relative;
    inset: auto;
    transform: none;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
    text-align: center;
    padding: 14px 22px 43px;
    color: #2e493e;
    background: #f3f6f0;
  }
  .hero .eyebrow {
    font-size: 9px;
    letter-spacing: .18em;
    color: #789183;
  }
  .hero h1 {
    font-size: clamp(22px, 6.4vw, 29px);
    font-weight: 600;
    line-height: 1.52;
    letter-spacing: .09em;
    margin: 7px 0 6px;
  }
  .hero p {
    font-size: 11px;
    line-height: 1.7;
    letter-spacing: .02em;
    margin: 0;
  }
  .hero .outline-btn {
    margin-top: 13px;
    min-width: 0;
    min-height: 36px;
    padding: 8px 17px;
    border: 1px solid #769587;
    color: #355b4c;
    font-size: 10px;
    gap: 14px;
  }
  .hero .outline-btn:hover {
    background: #355b4c;
    color: #fff;
  }
  .hero .arrow {
    top: 28.5%;
    width: 33px;
    height: 33px;
    background: rgba(255, 255, 255, .78);
    border: 1px solid #fff;
    color: #315647;
    box-shadow: 0 2px 12px #132d2117;
  }
  .hero .prev {
    left: 11px
  }
  .hero .next {
    right: 11px
  }
  .hero .dots {
    bottom: 16px;
    gap: 8px;
  }
  .hero .dot {
    background: #b4c7b9;
    height: 5px;
    width: 7px;
  }
  .hero .dot.active {
    width: 26px;
    background: #43675b;
  }
}
@media (max-width:390px) {
  .hero {
    height: 590px;
    min-height: 520px;
  }
  .hero .slide > img {
    height: 55%;
  }
  .hero .arrow {
    top: 27.5%;
  }
  .hero h1 {
    font-size: 23px;
  }
  .hero .slide .copy {
    padding: 10px 16px 40px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .hero .slide {
    transition: none
  }
}
/* Dynamic news detail */
.news-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 15px;
  line-height: 2.4
}
.news-article-title {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 600
}
.news-meta {
  display: flex;
  gap: 15px;
  align-items: center;
  color: #75877a
}
.article a:hover {
  color: #e95a0d
}
.news-listing-title {
  font-size: 18px;
  display: block;
  margin-top: 8px
}
.news-empty {
  text-align: center;
  color: #829185;
  padding: 80px 0
}
/* Image-based logo: swap assets/attolucky-logo.png with your final logo image. */
.site-header .brand {
  display: flex;
  align-items: center;
  margin-top: 0;
  text-shadow: none;
  min-width: 0
}
.site-header .brand img {
  display: block;
  width: 270px;
  height: auto;
  max-width: 100%;
  object-fit: contain
}
.footer .brand img {
  display: block;
  width: 216px;
  height: auto;
  object-fit: contain
}
@media(max-width:1000px) {
  .site-header .brand img {
    width: 210px
  }
}
@media(max-width:730px) {
  .site-header .brand img {
    width: 170px
  }
}
@media(max-width:390px) {
  .site-header .brand img {
    width: 143px
  }
}
/* Inline style replacements */
.margin-top-28 {
  margin-top: 28px
}
.text-center-margin-top-28 {
  text-align: center;
  margin-top: 28px
}
.text-theme-green {
  color: var(--green)
}
/* Admin controls (scoped to the management interface) */
.admin-page * {
  box-sizing: border-box
}
.admin-page {
  margin: 0;
  background: #f5f8f4;
  font-family: system-ui, -apple-system, "Noto Sans JP", sans-serif;
  color: #263b32;
  line-height: 1.65
}
.admin-page header {
  background: #29483c;
  color: white;
  padding: 18px max(20px, calc((100vw - 1050px)/2))
}
.admin-page header a {
  color: white;
  text-decoration: none
}
.admin-page main {
  max-width: 1050px;
  padding: 30px 20px 90px;
  margin: auto
}
.admin-page .box {
  background: white;
  padding: 25px;
  border: 1px solid #e0e8df;
  border-radius: 12px;
  margin: 18px 0
}
.admin-page h1 {
  font-size: 25px
}
.admin-page .menu {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center
}
.admin-page .menu a {
  color: #315d48
}
.admin-page input, .admin-page textarea, .admin-page select {
  font: inherit;
  padding: 12px;
  border: 1px solid #c8d5c9;
  border-radius: 6px;
  width: 100%;
  background: #fff
}
.admin-page textarea {
  min-height: 260px
}
.admin-page label {
  display: block;
  font-weight: 600;
  margin: 17px 0 6px
}
.admin-page .btn {
  border: 0;
  border-radius: 5px;
  background: #3b6a51;
  color: white;
  padding: 11px 21px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  font: inherit
}
.admin-page .btn.secondary {
  background: #e8efe9;
  color: #29483c
}
.admin-page .btn.danger {
  background: #ad493d
}
.admin-page .actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap
}
.admin-page table {
  width: 100%;
  border-collapse: collapse
}
.admin-page td, .admin-page th {
  padding: 14px 10px;
  border-bottom: 1px solid #e7ede6;
  text-align: left;
  font-size: 13px
}
.admin-page th {
  color: #718176
}
.admin-page small, .admin-page .hint {
  color: #718176
}
.admin-page .alert {
  background: #fff0e8;
  color: #813f27;
  padding: 12px 16px;
  border-radius: 6px
}
.admin-page .ok {
  background: #e6f5e8;
  color: #305f40;
  padding: 12px 16px;
  border-radius: 6px
}
.admin-page .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px
}
@media(max-width:650px) {
  .admin-page .box {
    padding: 16px
  }
  .admin-page .row {
    grid-template-columns: 1fr
  }
  .admin-page table {
    display: block;
    overflow-x: auto;
    white-space: nowrap
  }
}
/* Responsive main visual assets: PC / smartphone */
.hero .slide > .slide-picture { display:block; width:100%; height:100%; }
.hero .slide > .slide-picture > img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
@media (max-width:650px) {
  .hero .slide > .slide-picture { width:100%; height:57%; flex:none; overflow:hidden; }
  .hero .slide > .slide-picture > img { width:100%; height:100%; object-fit:cover; object-position:center; }
}

/* Mobile header fine-tuning: align action buttons to the far right, and keep compact spacing. */
@media (max-width:730px) {
  .site-header .header-in {
    gap: 10px;
  }
  .site-header .brand {
    margin-right: 8px;
  }
  .head-actions {
    margin-left: auto;
    justify-content: flex-end;
    flex: 0 0 auto;
  }
}


/* About page: original site content and section layout */
.original-about{color:#303b33;background:#fff;font-family:"Noto Sans JP",sans-serif}
.original-about-hero{background:#2e6b51;padding:62px 24px;text-align:center;color:white}
.original-about-hero-inner>img{width:190px;max-width:70%;height:auto;display:block;margin:0 auto 18px}
.original-about-hero h1{font-size:26px;font-weight:600;letter-spacing:.12em}
.original-about-hero h1 span{display:block;font:400 14px "DM Sans",sans-serif;letter-spacing:.16em;margin-top:12px}
.original-about-container{max-width:1040px;margin:0 auto;padding:70px 28px}
.original-about-intro{max-width:none;text-align:center;background:#efefef;padding:78px 4.5% 90px;margin:0;}
.original-about-intro h2,.original-company h2{font-size:27px;margin-bottom:36px;font-weight:600}
.original-about-intro h2{font-size:clamp(34px,3.1vw,56px);margin:0 0 46px;font-weight:700;letter-spacing:.02em;color:#324238;}
.original-about-intro p{max-width:1680px;margin:0 auto 34px;font-size:clamp(18px,1.85vw,28px);line-height:2.05;color:#34423b;font-weight:500;}
.original-about-intro p:last-child{margin-bottom:0;}
.original-company{padding-top:25px}
.original-company dl{display:grid;grid-template-columns:180px 1fr;border-top:1px solid #e2e6df}
.original-company dt,.original-company dd{padding:17px 18px;border-bottom:1px solid #e2e6df;font-size:14px;line-height:1.8}
.original-company dt{font-weight:700;background:#f5f8f4}
.original-company dd small{font-size:12px;color:#7b817c}
.original-factory{background:#f2f5f1}
.original-factory-top{display:grid;grid-template-columns:1fr 45%;align-items:center;gap:48px}
.original-factory-top p{font-size:14px;line-height:2.2;margin-bottom:22px}
.original-factory-top img{width:100%;height:auto}
.original-pride{text-align:center;padding:45px 0 0}
.original-pride span,.original-section-heading span{font-size:13px;letter-spacing:.2em;color:#6f9780}
.original-pride h2,.original-section-heading h2{font-size:29px;margin:10px 0 12px}
.original-pride p{font-size:14px}
.original-section-heading{text-align:center;margin-bottom:40px}
.original-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.original-feature{background:#fff;border:1px solid #e7ede7}
.original-feature>img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.original-feature-body{padding:25px 28px 30px}
.original-feature-body>span{font-size:12px;color:#6a967b;letter-spacing:.12em}
.original-feature-body h3{font-size:25px;margin:6px 0 16px}
.original-feature-body h4{font-size:15px;line-height:1.7;margin-bottom:11px}
.original-feature-body p{font-size:13px;line-height:2;color:#6d746e}
@media(max-width:730px){.original-about-hero{padding:48px 14px}.original-about-hero h1{font-size:22px}.original-about-container{padding:50px 18px}.original-about-intro{padding:48px 18px 58px}.original-about-intro h2,.original-company h2{font-size:23px}.original-about-intro h2{margin-bottom:28px}.original-about-intro p{font-size:16px;line-height:1.95;margin-bottom:24px}.original-company dl{grid-template-columns:110px 1fr}.original-company dt,.original-company dd{padding:13px 10px;margin-left:0;font-size:12px}.original-factory-top{grid-template-columns:1fr;gap:25px}.original-features{grid-template-columns:1fr;gap:20px}.original-feature-body{padding:21px}}

/* About page image resilience and typographic refinements */
.original-about img {max-width:100%;}
.original-about-hero-inner>img{min-height:36px;object-fit:contain;}
.original-about-intro p{overflow-wrap:anywhere;}
.original-feature-body{height:100%;}
.original-feature-body h3{letter-spacing:.08em;}
.original-about a{overflow-wrap:anywhere;}
@media(max-width:650px){.original-feature>img{aspect-ratio:4/3;}.original-about-intro p{text-align:center;}.original-about-hero h1{line-height:1.6;}}


/* About page: replica of supplied ATTOLUCKY screenshots. Scoped to About only. */
.original-about .original-factory {background:#fff; padding:40px 0 35px;}
.original-about .original-factory .original-about-container {width:min(92%,1850px); max-width:none; padding:0;}
.screenshot-factory-card {border:2px solid #1ca064; border-radius:40px; min-height:630px; display:grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.97fr) minmax(110px,.32fr); gap:4%; align-items:center; padding:7% 7%; box-sizing:border-box;}
.screenshot-factory-copy {font-size:clamp(15px,1.01vw,21px); font-weight:700; line-height:2.03; color:#151515;}
.screenshot-factory-copy p {font-size:inherit; line-height:inherit; margin:0 0 25px; font-weight:inherit;}
.screenshot-factory-copy p:last-child {margin-bottom:0;}
.screenshot-factory-photo img {display:block; width:100%; height:auto; aspect-ratio:517/310; object-fit:cover;}
.screenshot-factory-heading {display:flex; align-items:center; justify-content:center; gap:25px; color:#111;}
.screenshot-factory-heading span {font-size:clamp(19px,1.4vw,29px); color:#21a366; font-weight:400;}
.screenshot-factory-heading strong {writing-mode:vertical-rl; font-size:clamp(21px,1.7vw,35px); font-weight:800; line-height:1.15; letter-spacing:.06em;}
.original-about .original-strengths {max-width:1880px; padding:32px 4.2% 100px;}
.original-about .original-features {grid-template-columns:repeat(2,minmax(0,1fr)); gap:65px 5%;}
.original-about .original-feature {border:0; background:#fff;}
.original-about .screenshot-strength-photo {position:relative; width:100%; border:0;}
.original-about .screenshot-strength-photo img {display:block; width:100%; /*aspect-ratio:898/442; object-fit:cover;*/}
.original-about .screenshot-remotely-hosted .screenshot-strength-photo img {border:3px solid #229b68;}
.screenshot-strength-badge {position:absolute; top:0; left:0; z-index:1; color:#fff; background:#229b68; width:82px; height:82px; border-radius:0 0 100% 0; display:flex; align-items:flex-start; padding:15px 6px; font-weight:700; font-size:23px;}
.screenshot-strength-label {position:absolute; left:0; bottom:0; background:#229b68; color:#fff; font-size:27px; font-weight:700; padding:4px 34px; }
.original-about .original-feature-body {padding:16px 0 0;}
.original-about .original-feature-body h4 {font-size:clamp(18px,1.1vw,27px); line-height:1.85; font-weight:750; color:#111; margin:0 0 19px;}
.original-about .original-feature-body p {font-size:clamp(15px,0.8vw,20px); line-height:2.05; color:#444;}
@media(max-width:900px){
 .screenshot-factory-card {grid-template-columns:1fr; gap:25px; min-height:0; padding:35px 28px; border-radius:25px;}
 .screenshot-factory-heading {justify-content:flex-start; gap:12px;}
 .screenshot-factory-heading strong {writing-mode:horizontal-tb; font-size:20px;}
 .screenshot-factory-heading span {font-size:18px;}
 .screenshot-factory-copy {font-size:15px;}
 .original-about .original-features {gap:34px;}
}
@media(max-width:650px){
 .original-about .original-strengths {padding:20px 20px 70px;}
 .original-about .original-features {grid-template-columns:1fr; gap:38px;}
 .original-about .original-factory .original-about-container {width:calc(100% - 32px);}
 .original-about .original-feature-body {padding:18px 0 0;}
 .original-about .original-feature-body h4 {font-size:17px; margin-bottom:10px;}
 .original-about .original-feature-body p {font-size:14px;}
}

/* About welcome: original reference two-column image layout */
.original-about .original-about-intro{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1.48fr) minmax(0,1fr);align-items:center;gap:5.5%;max-width:none;width:100%;padding:65px 2.5% 75px;background:#fff;text-align:left;}
.original-about .about-welcome-copy{min-width:0;}
.original-about .original-about-intro h2{color:#222;font-family:Georgia,"Noto Serif JP",serif;font-weight:500;font-size:clamp(29px,1.55vw,51px);line-height:1.5;letter-spacing:.045em;margin:0 0 42px;text-align:left;}
.original-about .original-about-intro p{color:#555;font-weight:400;font-size:clamp(16px,0.8vw,27px);line-height:1.98;margin:0 0 35px;text-align:left;max-width:none;}
.original-about .original-about-intro p:last-child{margin-bottom:0;}
.original-about .about-welcome-photo img{display:block;width:100%;aspect-ratio:1.16;object-fit:cover;}
@media(max-width:800px){.original-about .original-about-intro{grid-template-columns:1fr;gap:26px;padding:42px 22px 56px}.original-about .original-about-intro h2{font-size:29px;margin-bottom:22px}.original-about .original-about-intro p{font-size:15px;line-height:2;margin-bottom:22px}.original-about .about-welcome-photo img{aspect-ratio:4/3;object-fit:cover;}}

/* About content: consistent centered maximum width of 1200px (including padding). */
.original-about .original-about-container,
.original-about .original-about-intro,
.original-about .original-strengths,
.original-about .original-factory .original-about-container {
  box-sizing: border-box;
  width: calc(100% - 40px);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.original-about .original-about-intro {padding-left: 20px; padding-right: 20px;}
.original-about .original-strengths {padding-left: 0px; padding-right: 0px;}
@media (max-width: 650px) {
  .original-about .original-about-container,
  .original-about .original-about-intro,
  .original-about .original-strengths,
  .original-about .original-factory .original-about-container {
    width: calc(100% - 28px);
  }
  .original-about .original-about-intro {padding-left: 10px; padding-right: 10px;}
}

/* PANDA GUIDE — original ATTOLUCKY panda profiles, isolated from shared layout */
.panda-guide{background:#fff;color:#293a32;padding-bottom:90px}
.panda-guide-header{text-align:center;padding:80px 20px 55px}
.panda-guide-header span{color:#238c61;font:600 14px 'DM Sans',sans-serif;letter-spacing:.22em}
.panda-guide-header h1{margin:12px 0 0;font-size:clamp(29px,3.4vw,46px);font-weight:700;letter-spacing:.06em}
.panda-guide-item{width:min(1200px,calc(100% - 48px));margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,86px);align-items:center;padding:55px 0;border-bottom:1px solid #e7eee9}
.panda-guide-item:nth-child(odd) .panda-guide-image{order:2}
.panda-guide-image img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.panda-guide-copy{min-width:0}
.panda-guide-en{font-size:14px;letter-spacing:.07em;color:#239968;margin-bottom:14px}
.panda-guide-copy h2{font-size:clamp(26px,3vw,39px);line-height:1.4;margin:0 0 24px;font-weight:700}
.panda-guide-copy h3{font-size:17px;font-weight:700;margin-bottom:18px}
.panda-guide-desc{font-size:15px;line-height:2.15;color:#555;margin-bottom:30px}
.panda-guide-link{display:inline-flex;align-items:center;gap:16px;border:1px solid #268d61;color:#237b53;padding:13px 23px;font-weight:700;font-size:14px;transition:.2s}
.panda-guide-link:hover{background:#268d61;color:#fff}
@media(max-width:730px){.panda-guide-header{padding:55px 18px 20px}.panda-guide-item{width:calc(100% - 36px);grid-template-columns:1fr;gap:23px;padding:35px 0}.panda-guide-item:nth-child(odd) .panda-guide-image{order:0}.panda-guide-copy h2{font-size:28px}.panda-guide-desc{font-size:14px}}


/* How to care page */
.care-page{max-width:1200px;margin:0 auto;padding:28px 20px 80px}
.care-anchor-wrap{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:10px 0 34px}
.care-anchor{display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;border-radius:999px;border:1px solid #c8dfd1;background:#f5fbf6;color:#2c5542;font-weight:700;font-size:14px}
.care-anchor:hover{background:#eaf6ec}
.care-section{background:#fff;border:1px solid #e4eee7;border-radius:28px;padding:34px 28px;margin-bottom:28px;box-shadow:0 14px 30px rgba(37,78,52,.05)}
.care-section-head{max-width:960px;margin:0 auto 20px;text-align:center}
.care-label{display:inline-block;font:700 12px/1 "DM Sans",sans-serif;letter-spacing:.18em;color:#2a9c67;margin-bottom:10px}
.care-section-head h2{font-size:32px;line-height:1.25;margin:0 0 14px;color:#20392d}
.care-section-head p{font-size:15px;line-height:2;color:#5b675f;margin:0 auto;max-width:920px}
.care-visual img{display:block;width:100%;height:auto;border-radius:20px;border:1px solid #e2efe4;background:#fff}
.care-notes{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}
.care-note{background:#f7fbf8;border-radius:18px;padding:18px 18px 16px;border:1px solid #e0ece3}
.care-note strong{display:block;font-size:15px;color:#204d39;margin-bottom:7px}
.care-note p{font-size:14px;line-height:1.9;color:#4c5850;margin:0}
.care-boxes{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
.care-box{background:#fff;border:1px solid #e4eee7;border-radius:24px;padding:28px;box-shadow:0 10px 24px rgba(37,78,52,.04)}
.care-box h3{font-size:22px;margin:0 0 14px;color:#213b2f}
.care-box p{font-size:14px;line-height:1.95;color:#556159;margin:0 0 18px}
.care-box .solid-btn{display:inline-flex}
@media (max-width:900px){.care-notes,.care-boxes{grid-template-columns:1fr}.care-section{padding:28px 18px}.care-section-head h2{font-size:26px}}
@media (max-width:650px){.care-page{padding:20px 14px 60px}.care-anchor-wrap{gap:10px;justify-content:flex-start}.care-anchor{font-size:13px;padding:10px 16px}.care-section-head h2{font-size:24px}.care-section-head p{font-size:14px;line-height:1.85}.care-box h3{font-size:20px}}

/* Individual illustrated steps in care guide */
.care-lead{max-width:960px;margin:10px auto 25px;text-align:center;color:#59675d;line-height:2;font-size:15px}
.care-page .care-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:29px}
.care-step{border:1px solid #e3ebe4;border-radius:17px;overflow:hidden;background:white;box-shadow:0 7px 22px rgba(32,73,46,.05)}
.care-step-photo{background:#f4f7f2;aspect-ratio:1.48;overflow:hidden}
.care-step-photo img{width:100%;height:100%;object-fit:cover;display:block}
.care-step-content{position:relative;padding:23px 22px 27px}
.care-step-no{display:inline-flex;align-items:center;justify-content:center;background:#259c6d;color:white;border-radius:50%;width:35px;height:35px;font-size:13px;font-weight:700;margin-bottom:12px}
.care-step h3{font-size:18px;line-height:1.5;color:#244c38;margin-bottom:12px}
.care-step p{font-size:14px;color:#56645b;line-height:1.85;margin:0}
.care-warning{background:#eef7ef;border-radius:20px;padding:32px 36px;margin:30px 0 0}
.care-warning h2{font-size:21px;color:#255c43;margin:0 0 10px}
.care-warning p{line-height:1.95;font-size:14px;color:#485a4e;margin:0 0 12px}
.care-warning a{color:#247850;font-weight:700;text-decoration:underline}
@media(max-width:960px){.care-page .care-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.care-page .care-steps{grid-template-columns:1fr;gap:18px}.care-section{padding:22px 16px}.care-step-content{padding:19px 20px 23px}.care-warning{padding:25px 20px}.care-lead{font-size:14px; text-align: left;}}

/* Reference-accurate wording in the surface-cleaning steps */
#surface .care-step-content p{margin-top:12px;}

/* Homepage dynamic NEW ARRIVALS feedback */
.home-new-status { text-align:center; margin:16px auto 26px; color:#667b6d; font-size:14px; line-height:1.8; }
.home-new-status a { color:#23875b; text-decoration:underline; }

/* Site editorial pages and expanded footer */
.footer-grid{grid-template-columns:1.15fr 1fr 1fr 1fr;gap:32px}
.footer-links .social-pending{display:block;opacity:.65;font-size:12px;padding:5px 0}
.editorial-page{max-width:1100px}.editorial-page h2{font-size:26px;margin:40px 0 18px}.editorial-page h2:first-child{margin-top:0}.editorial-page h3{font-size:18px;margin-bottom:12px}.editorial-page p{line-height:2;margin:0 0 16px}.editorial-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:20px 0 44px}.editorial-grid article{border:1px solid #ddeae1;padding:26px;border-radius:14px;background:#fcfefd}.editorial-callout{padding:45px 25px;text-align:center;background:#f1f8f3;border-radius:20px;margin:40px 0}.info-dl{display:grid;grid-template-columns:180px minmax(0,1fr);border-top:1px solid #dae6dc}.info-dl dt,.info-dl dd{padding:19px;border-bottom:1px solid #dae6dc;line-height:1.8}.info-dl dt{font-weight:700;background:#f4faf6}.faq h3{border-top:1px solid #dce8de;padding-top:22px}.editorial-note{font-size:13px;color:#68766c}.contact-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.contact-form input,.contact-form select,.contact-form textarea{width:100%;box-sizing:border-box}@media(max-width:900px){.footer-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.footer-grid,.editorial-grid,.contact-two{grid-template-columns:1fr}.info-dl{grid-template-columns:110px minmax(0,1fr)}.info-dl dt,.info-dl dd{padding:13px 10px;font-size:13px}.editorial-page h2{font-size:23px}}

/* Retail Stores: reference-aligned editorial card layout */
.retail-stores{background:#fff;padding:80px 24px 100px;color:#262523}
.retail-inner{width:100%;max-width:1200px;margin:0 auto}
.retail-heading h2{font-family:Georgia,"Noto Serif JP",serif;font-weight:400;font-size:clamp(25px,2.5vw,32px);letter-spacing:.07em;line-height:1.3;margin:0 0 10px}
.retail-en{font-family:Georgia,serif;letter-spacing:.13em;font-weight:600;color:#777;font-size:16px;margin:0 0 38px}
.retail-description{font-size:16px;color:#666;line-height:1.95;margin:0 0 46px}
.retail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px;max-width:960px}
.retail-card{border:1px solid #ddd8d1;background:#fff;overflow:hidden}
.retail-card img{width:100%;aspect-ratio:455/404;object-fit:cover;display:block}
.retail-card-body{min-height:135px;padding:14px}
.retail-card-body h3{font-family:Georgia,"Noto Serif JP",serif;font-size:24px;font-weight:400;letter-spacing:.02em;margin:0 0 0px}
.retail-card-body p{font-size:15px;line-height:1.45;color:#777;margin:0}
.social-icons{display:flex;align-items:center;gap:12px;margin-top:12px}
.social-icons a,.social-icon-unverified{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:10px;background:rgba(255,255,255,.07)}
.social-icons img{display:block;width:30px;height:30px}
.social-icon-unverified{opacity:.48;cursor:default}
@media(max-width:680px){.retail-stores{padding:55px 18px 70px}.retail-description{font-size:14px;margin-bottom:30px}.retail-grid{grid-template-columns:1fr;gap:25px}.retail-card-body{padding:22px 22px 26px;min-height:0}.retail-card-body h3{font-size:21px;margin-bottom:13px}}

@media(max-width:680px){.retail-heading h2{font-size:26px}}

/* Dynamically refreshed new arrivals page */
.new-products-status{padding:22px 16px;text-align:center;font-size:14px;color:#4b6356}.new-products-status[hidden]{display:none}.new-products-status.is-error{color:#a34332}.new-products-status a{display:inline-block;color:#27734f;text-decoration:underline;margin-top:8px}.new-products-grid .page-card h2{overflow-wrap:anywhere}.new-products-grid .page-card img.new-image-unavailable{opacity:.3}

/* Spam trap for contact form */
.contact-trap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}

.contact-thanks{text-align:center;min-height:300px}.contact-thanks h2{font-size:24px;margin:25px 0}.contact-thanks p{margin:20px 0;line-height:1.9}