:root {
  --primary: #133f6f;      
  --secondary: #ffce32;    
  --light: #f5f7fa;        
  --dark: #0a2440;         
  --text-dark: #24344d;    
}

body {
  font-family: 'Inter Tight', 'Noto Sans JP', sans-serif;
  color: var(--text-dark);
  line-height: 1.6;
  background: var(--light);
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--primary);
  font-weight: 700;
  line-height: 1.2;
}

p {
  margin-bottom: 1rem;
}

.navbar {
  background-color: var(--primary);
  padding: 0.5rem 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
  font-weight: 600;
  font-size: 1.25rem;
  color: #fff !important;
  display: flex;
  align-items: center;
}
.navbar-brand img {
  height: 2rem;
  width: auto;
  margin-right: 0.5rem;
}

.navbar-nav .nav-link {
  color: #fff;
  margin-right: 1rem;
  font-weight: 500;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: var(--secondary);
}

.navbar .btn-primary {
  background-color: var(--secondary);
  border: none;
  color: var(--primary);
  font-weight: 600;
}
.navbar .btn-primary:hover {
  background-color: #e5b71f;
  color: var(--primary);
}

.hero {
  position: relative;
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
  padding: 7rem 0 6rem;
}
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}
.hero .container {
  position: relative;
  z-index: 2;
}
.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
.hero p {
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.hero h1 {
  font-size: clamp(1.75rem, 4vw + 1rem, 3rem);
}
.hero p {
  font-size: clamp(1rem, 2.5vw + 0.5rem, 1.25rem);
}
.hero h1, .hero p {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
}
.hero .hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
.hero .btn {
  margin: 0;
  min-width: 200px;
}
@media (max-width: 575.98px) {
  .hero .btn {
    min-width: 100%;
  }
}
.hero .btn-primary {
  background-color: var(--secondary);
  border: none;
  color: var(--primary);
}
.hero .btn-outline-light {
  border-color: #fff;
  color: #fff;
}

@media (max-width: 575.98px) {
  .hero::before { background: rgba(0,0,0,0.62); }
}

.sns-grid .sns-card img {
  width: 84px;
  height: 84px;
  object-fit: contain;
}
.sns-grid .sns-card {
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  background: #fff;
  padding: 1.25rem;
  height: 100%;
}

.map-embed {
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: 12px;
}

.about-media {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e9e9e9;
  background: #fff;
}
.about-media img {
  width: 100%;
  height:auto;
  object-fit:contain;
}
.about-media .caption {
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  color: #555;
}
.hero .btn-outline-light:hover {
  background-color: rgba(255,255,255,0.15);
  color: #fff;
}

section {
  padding: 4rem 0;
}

.solutions-section .card,
.categories-section .card {
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  background-color: #fff;
}
.solutions-section .icon,
.categories-section .icon {
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
  object-fit: cover;
}

.about-section {
  background-color: #fff;
}

.categories-section {
  background-color: #f0f4f8;
}

.cta-section {
  background-color: var(--primary);
  color: #fff;
  text-align: center;
}
.cta-section .btn {
  background-color: var(--secondary);
  color: var(--primary);
  font-weight: 600;
  border: none;
  padding: 0.75rem 1.5rem;
  margin-top: 1rem;
}
.cta-section .btn:hover {
  background-color: #e5b71f;
}

footer {
  background-color: var(--dark);
  color: #fff;
  padding: 2rem 0;
  font-size: 0.875rem;
}
footer p {
  margin-bottom: 0.5rem;
}
footer a {
  color: var(--secondary);
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}

@media (max-width: 991.98px) {
  .navbar .btn-primary {
    margin-top: 0.75rem;
  }
}

@media (max-width: 767.98px) {
  .hero h1 {
    font-size: 1.75rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .navbar-brand {
    font-size: 1rem;
  }
  section {
    padding: 3rem 0;
  }
  .cta-section .btn {
    width: 100%;
  }
}

section[id] {
  scroll-margin-top: 80px;
}

@media (max-width: 400px) {
  .navbar-nav .nav-link {
    font-size: 0.8rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}

@media (max-width: 575.98px) {
  .btn {
    display: block;
    width: 100%;
  }
}

.categories-section .card-body img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

@media (max-width: 767.98px) {
  .categories-section .card-body img {
    height: 120px;
  }
}

.recommended-section{
  padding-top: 3rem;
  padding-bottom: 2rem;
}
.recommended-section h1,
.recommended-section h2{
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.15;
}

.about-photo{
  width:100%;
  height:auto;
  object-fit:contain;
}
.about-media{
  overflow:visible;
}
.categories-section .category-img{
  width:100%;
  height:180px;
  object-fit:contain;
  background:#fff;
  border-radius:12px;
}
.flow-cards .flow-step{
  font-weight:800;
  letter-spacing:0.06em;
}
.flow-card p{
  font-size:1.05rem;
  line-height:1.6;
}
.flow-card h3{
  font-size:1.25rem;
}
@media (max-width:576px){
  .categories-section .category-img{ height:160px; }
  .flow-card p{ font-size:1.1rem; }
  .flow-card h3{ font-size:1.3rem; }
}

.about-media img.about-photo{
  height:auto !important;
  object-fit:contain !important;
}

.cta-section .p-3.border.rounded-4.h-100{
  display:flex;
  flex-direction:column;
}
.cta-section .p-3.border.rounded-4.h-100 .btn{
  align-self:flex-start;
}
.cta-section .p-3.border.rounded-4.h-100 .btn + .btn{
  margin-top:0.5rem;
}
.cta-section .contact-actions{
  gap:0.5rem;
}
@media (min-width: 768px){
  .cta-section .p-3.border.rounded-4.h-100 .btn{align-self:flex-start;}
}

.service-actions{display:flex;justify-content:center;}

.cta-section .p-3.border.rounded-4.h-100{
  text-align:left;
  align-items:flex-start;
}
.cta-section .btn{
  margin-top:0 !important;
}
.cta-section .contact-actions{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  margin-top:0.75rem;
}
.cta-section .contact-actions .btn{
  width:auto !important;
}
@media (max-width: 767.98px){
  .cta-section .btn{
    width:100% !important;
  }
  .cta-section .contact-actions{
    width:100%;
  }
  .cta-section .contact-actions .btn{
    flex:1 1 auto;
  }
}

.contact-actions{
  display:flex;
  gap:0.75rem;
  flex-wrap:wrap;
  align-items:center;
}
.contact-actions .btn{
  min-width: 180px;
}
@media (max-width: 575.98px){
  .contact-actions .btn{
    width:100%;
    min-width:100%;
  }
}

.navbar .nav-link{
  color:#ffffff !important;
  opacity:0.9;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus{
  opacity:1;
}
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"]{
  color:#ffffff !important;
  background:transparent !important;
  opacity:1;
}

.combined-action .btn{
  min-width: 240px;
}


/* Layout fixes */
.hero-cta{
  display:flex;
  gap:0.75rem;
  flex-wrap:wrap;
  align-items:center;
}
.hero-cta .btn{
  min-width: 220px;
}
@media (max-width: 575.98px){
  .hero-cta{justify-content:center;}
  .hero-cta .btn{min-width: 0; width: 100%;}
}

#contact .btn-wrap{
  justify-content:flex-start;
}
#contact .btn-wrap .btn{
  min-width: 200px;
}
#contact .btn-wrap{
  margin-top: 0.5rem;
}

.footer-cta .btn{
  min-width: 180px;
}

.navbar-nav .nav-link.active{
  color:#fff;
  text-decoration: underline;
}

.navbar .navbar-toggler{
  border-color: rgba(255,255,255,0.5);
}
.navbar .navbar-toggler-icon{
  filter: invert(1);
}

img{max-width:100%; height:auto;}

/* English flow readability */
.flow-cards .flow-card{
  font-size: 1.05rem;
}
.flow-step{
  font-weight: 800;
  letter-spacing: .02em;
  font-size: 1.15rem;
}
@media (max-width:575.98px){
  .flow-cards .flow-card{font-size:1.1rem;}
  .flow-step{font-size:1.2rem;}
}


/* Corporate flow (cards) */
.steps-section {
  background: var(--light);
}
.steps-section .steps-row {
  position: relative;
}
.step-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 22px 18px 18px;
  box-shadow: 0 10px 25px rgba(10, 36, 64, 0.08);
  border: 1px solid rgba(10, 36, 64, 0.08);
}
.step-badge {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--secondary);
  color: var(--dark);
  font-weight: 800;
  margin-bottom: 12px;
}
.step-title {
  font-weight: 800;
  color: var(--primary);
  font-size: 18px;
  margin-bottom: 8px;
}
.step-text {
  color: var(--text-dark);
  opacity: 0.9;
  font-size: 14px;
  line-height: 1.7;
}
.flow-cta {
  background: #fff;
  border-radius: 18px;
  padding: 18px 18px;
  box-shadow: 0 10px 25px rgba(10, 36, 64, 0.08);
  border: 1px solid rgba(10, 36, 64, 0.08);
}
.flow-cta-title {
  font-weight: 800;
  color: var(--primary);
  font-size: 18px;
  margin-bottom: 6px;
}
.flow-cta-text {
  color: var(--text-dark);
  opacity: 0.85;
  font-size: 14px;
}



html { scroll-behavior: smooth; }
body.site-body { padding-top: 74px; }
.navbar { backdrop-filter: blur(10px); }
.navbar .navbar-nav { gap: 0.25rem; }
.navbar-nav .nav-link[aria-current="page"] { color: var(--secondary); }
.logo { height: 2rem; width: auto; }
.hero.hero-compact { padding: 6rem 0 4.5rem; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.card, .sns-card, .feature-card, .price-card { transition: transform .25s ease, box-shadow .25s ease; }
.card:hover, .sns-card:hover, .feature-card:hover, .price-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(19,63,111,.12); }
.feature-card, .price-card { background:#fff; border-radius:1rem; padding:1.5rem; box-shadow:0 8px 24px rgba(10,36,64,.08); height:100%; }
.price-card .plan { font-weight:700; color:var(--primary); margin-bottom:.5rem; }
.price-card .price { font-size:2rem; font-weight:700; color:var(--dark); margin-bottom:.75rem; }
.price-card.featured { border:2px solid var(--secondary); }
.flow-list li { margin-bottom:.75rem; }
.hero .eyebrow { font-weight:600; }
.service-actions .btn, .hero-cta .btn, .d-flex .btn { border-radius:999px; }
footer a[href^="mailto:"] { word-break: break-all; }
@media (max-width: 1199.98px) { .navbar-nav .nav-link { margin-right: 0; font-size: .95rem; } }
@media (max-width: 991.98px) {
  body.site-body { padding-top: 66px; }
  .navbar-collapse { background: rgba(19,63,111,.97); padding: 1rem; margin-top: .5rem; border-radius: 1rem; }
  .navbar .btn-primary { width: 100%; }
}
@media (max-width: 767.98px) {
  section { padding: 3rem 0; }
  .feature-card, .price-card { padding: 1.25rem; }
  .map-embed { height: 260px; }
}


.navbar .container{
  gap: 0.75rem;
}
.navbar-brand{
  white-space: nowrap;
  flex-shrink: 0;
}
.navbar-brand img,
.navbar .logo{
  height: 2rem;
  width: auto;
  flex: 0 0 auto;
}
.navbar-collapse{
  flex-grow: 1;
}
.navbar-nav{
  gap: 0.1rem;
}
.navbar-nav .nav-link{
  white-space: nowrap;
  margin-right: 0;
  padding-left: 0.65rem;
  padding-right: 0.65rem;
  font-size: 1rem;
}
.navbar .nav-cta{
  white-space: nowrap;
  padding: 0.7rem 1rem;
  font-size: 0.98rem;
}
.navbar .dropdown-menu{
  border: 0;
  border-radius: 0.75rem;
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
}
.navbar .dropdown-item{
  padding: 0.65rem 1rem;
}
@media (min-width: 1200px) and (max-width: 1399.98px){
  .navbar{
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
  .navbar-brand{
    font-size: 1.08rem;
  }
  .navbar-brand img,
  .navbar .logo{
    height: 1.8rem;
  }
  .navbar-nav .nav-link{
    font-size: 0.9rem;
    padding-left: 0.42rem;
    padding-right: 0.42rem;
  }
  .navbar .nav-cta{
    font-size: 0.9rem;
    padding: 0.62rem 0.8rem;
  }
}
@media (max-width: 1199.98px){
  .navbar-collapse{
    padding-top: 0.75rem;
  }
  .navbar-nav{
    gap: 0;
  }
  .navbar-nav .nav-link{
    font-size: 1rem;
    padding-left: 0;
    padding-right: 0;
  }
  .navbar .dropdown-menu{
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.04);
    box-shadow: none;
  }
  .navbar .dropdown-item{
    color: #fff;
  }
  .navbar .dropdown-item:hover,
  .navbar .dropdown-item:focus{
    background: rgba(255,255,255,.08);
    color: var(--secondary);
  }
  .navbar .nav-cta{
    display: inline-block;
    margin-top: 0.75rem;
  }
}
@media (max-width: 575.98px){
  .navbar-brand{
    font-size: 0.92rem;
  }
  .navbar-brand img,
  .navbar .logo{
    height: 1.75rem;
  }
}


/* Navbar stability update */
@media (max-width: 1399.98px) {
  body.site-body { padding-top: 66px; }
  .navbar-collapse { background: rgba(19,63,111,.97); padding: 1rem; margin-top: .5rem; border-radius: 1rem; }
  .navbar .nav-cta { display: inline-block; margin-top: 0.75rem; }
}
@media (min-width: 1400px) and (max-width: 1599.98px) {
  .navbar { padding-left: 0.55rem; padding-right: 0.55rem; }
  .navbar .container { gap: 0.5rem; }
  .navbar-brand { font-size: 1.02rem; }
  .navbar-brand img, .navbar .logo { height: 1.72rem; }
  .navbar-nav { gap: 0; }
  .navbar-nav .nav-link { font-size: 0.87rem; padding-left: 0.33rem; padding-right: 0.33rem; }
  .navbar .nav-cta { font-size: 0.88rem; padding: 0.58rem 0.72rem; }
}
@media (min-width: 1600px) {
  .navbar-nav .nav-link { font-size: 0.96rem; padding-left: 0.5rem; padding-right: 0.5rem; }
  .navbar .nav-cta { padding: 0.68rem 0.95rem; }
}

.hero-phone {
  text-align: center;
}
.hero-phone-link {
  display: inline-block;
  color: #fff;
  font-weight: 700;
  font-size: clamp(1rem, 1vw + 0.85rem, 1.2rem);
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgba(19, 63, 111, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.hero-phone-link:hover,
.hero-phone-link:focus {
  color: #fff;
  background: rgba(19, 63, 111, 0.5);
  border-color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 575.98px) {
  .hero-phone-link {
    display: block;
    width: 100%;
  }
}

.service-panel,
.faq-card,
.channel-card,
.square-callout,
.support-step {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(10, 36, 64, 0.08);
  border: 1px solid rgba(10, 36, 64, 0.08);
  height: 100%;
}

.service-panel,
.faq-card,
.channel-card,
.support-step {
  padding: 1.5rem;
}

.square-callout {
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(19, 63, 111, 0.98), rgba(10, 36, 64, 0.92));
  color: #fff;
}

.square-callout h2,
.square-callout h3,
.square-callout p,
.square-callout li,
.square-callout .small {
  color: #fff;
}

.square-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: rgba(255, 206, 50, 0.16);
  color: var(--secondary);
  border: 1px solid rgba(255, 206, 50, 0.34);
}

.square-note {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 1rem;
  padding: 1rem 1.1rem;
}

.product-highlight {
  background: #fff;
  border-radius: 1.25rem;
  box-shadow: 0 12px 30px rgba(10, 36, 64, 0.08);
  overflow: hidden;
}

.product-highlight img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-highlight .product-body {
  padding: 1.75rem;
}

.mini-list,
.faq-list,
.support-list {
  padding-left: 1.15rem;
}

.mini-list li,
.faq-list li,
.support-list li {
  margin-bottom: 0.55rem;
}

.support-grid .card,
.channel-card,
.faq-card {
  border: 0;
}

.step-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.2rem;
  height: 2rem;
  border-radius: 999px;
  background: rgba(19, 63, 111, 0.08);
  color: var(--primary);
  font-weight: 800;
  font-size: 0.9rem;
  margin-bottom: 0.9rem;
}

.contact-strip {
  background: rgba(19, 63, 111, 0.06);
  border-radius: 1.25rem;
  padding: 1.25rem;
}

.eyebrow-text {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}

.page-lead {
  max-width: 54rem;
}

.channel-card .icon-title,
.faq-card .icon-title,
.service-panel .icon-title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.9rem;
}

.icon-dot {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--secondary);
  box-shadow: 0 0 0 6px rgba(255, 206, 50, 0.18);
  flex: 0 0 auto;
}

@media (max-width: 767.98px) {
  .service-panel,
  .faq-card,
  .channel-card,
  .support-step,
  .square-callout {
    padding: 1.2rem;
  }

  .product-highlight .product-body {
    padding: 1.35rem;
  }
}

.catalog-card {
  background: #fff;
  border-radius: 1.1rem;
  box-shadow: 0 10px 26px rgba(10, 36, 64, 0.08);
  border: 1px solid rgba(10, 36, 64, 0.08);
  overflow: hidden;
  height: 100%;
}

.catalog-media {
  background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
  padding: 1rem;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.catalog-media img {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
}

.catalog-body {
  padding: 1.35rem;
}

.catalog-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
}

.catalog-specs {
  padding-left: 1.1rem;
  margin-bottom: 1rem;
}

.catalog-specs li {
  margin-bottom: 0.45rem;
}

.stock-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.78rem;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 700;
  margin-bottom: 0.9rem;
}

.stock-chip.available {
  background: rgba(24, 133, 72, 0.12);
  color: #1b6b40;
}

.stock-chip.inquiry {
  background: rgba(19, 63, 111, 0.1);
  color: var(--primary);
}

.catalog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.catalog-actions .btn {
  border-radius: 999px;
}

.section-intro {
  max-width: 48rem;
}

.purchase-note {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(10, 36, 64, 0.08);
  border: 1px solid rgba(10, 36, 64, 0.08);
  padding: 1.35rem;
  height: 100%;
}

.purchase-note h3 {
  margin-bottom: 0.75rem;
}

@media (max-width: 767.98px) {
  .catalog-media {
    min-height: 210px;
  }

  .catalog-media img {
    max-height: 180px;
  }

  .catalog-body,
  .purchase-note {
    padding: 1.15rem;
  }
}

/* Accessibility and performance cleanup added 2026-04-26 */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:1100;background:#fff;color:#111;padding:.75rem 1rem;border-radius:.5rem;box-shadow:0 2px 12px rgba(0,0,0,.18)}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;overflow:visible}
img{max-width:100%;height:auto}
.logo{width:48px;height:48px;object-fit:contain}
.icon{width:160px;max-height:160px;object-fit:contain}