/* =========================================================
   ETHOS JAPAN — Consolidated Stylesheet
   File: styles-ja.css   (JP site only)
   Updated: 2025-09-05
   Author: Eli (cleanup + consolidation)
   WARNING: JP-only stylesheet. Do NOT overwrite ENG styles.css.
   Cache-busting: link as /css/styles-ja.css?v=20250905-3
   Notes:
   - Replaces legacy style.css, ethos-navi1.css, and ethos-layout.css
   - Japanese-first typography, bold headings, responsive logo, mobile tweaks
   - Slideshow & grid rules preserved
   - UTF-8 hamburger (☰) — no Font Awesome required
   ========================================================= */

/* ========== 1) Base Typography & Resets ========== */
* { box-sizing: border-box; }
html, body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
  color: #111;
}
p, li { font-size: 18px; line-height: 1.8; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: maroon;
  letter-spacing: 0.01em;
  line-height: 1.35;
  margin: 0.6em 0 0.4em;
}
h1 { font-size: 28px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 17px; }
h6 { font-size: 16px; }
img { max-width: 100%; height: auto; display: block; }
a { color: maroon; text-decoration: none; }  /* nav/global baseline */

/* Variables (used below) */
:root { --ethos-maroon: maroon; --ethos-hover: #f88017; }

/* ========== 2) Header / Branding ========== */
.header {
  background-color: #ffe7cd;
  color: maroon;
  margin: 5px 15px 0 0;
  padding: 5px;
  border: 2px solid maroon;
  border-radius: 5px;
  box-shadow: 10px 10px 5px rgba(0,0,0,0.35);
}
.header-brand { display: flex; align-items: center; gap: 12px; }
.portal-label { display: inline-block; font-weight: 700; }
.banner-tagline { font-weight: 700; }

/* Logo: responsive — override any fixed width/height */
.site-header .logo img,
.logo img,
img.site-logo {
  max-width: 60px !important;
  width: auto !important;
  height: auto !important;
  display: inline-block;
  vertical-align: middle;
}

/* ========== 4) Grid / Columns ========== */
.row::after { content: ""; clear: both; display: block; }
[class*="col-"] { float: left; padding: 15px; }
.col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;}
.col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;}
.col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;}
.col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;}

/* Containers / utilities */
.container { position: relative; }
.link { position: absolute; inset: 0; z-index: 1; }

/* ========== 5) Slideshow ========== */
.prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); }
.text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; }
.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; }
.dot { cursor: pointer; height: 10px; width: 10px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }
.active, .dot:hover { background-color: #717171; }
.fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; }
@-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} }
@keyframes fade { from {opacity: .4} to {opacity: 1} }

/* ========== 6) (removed) Old Read More Buttons ========== */
/* Old .toggle-btn color rule removed to avoid conflicts. */

/* ========== 7) Mobile Tweaks ========== */
@media (max-width: 768px) {
  [class*="col-"] { width: 100%; }
}
@media (max-width: 480px) {
  h1 { font-size: 28px; line-height: 1.3; }
  h2 { font-size: 18px; }
}

/* ========== 8) ETHOS Content Links & Read-More Toggles (scoped) ========== */
.ethos-content a,
.ethos-submenu a {
  color: var(--ethos-maroon) !important;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.25s ease;
}
.ethos-content a:hover,
.ethos-submenu a:hover,
.ethos-content a:hover *,
.ethos-submenu a:hover * {
  color: var(--ethos-hover) !important;
}
.ethos-content a:visited,
.ethos-submenu a:visited {
  color: var(--ethos-maroon) !important;
}
.ethos-content a:focus-visible,
.ethos-submenu a:focus-visible {
  outline: 2px dashed var(--ethos-hover);
  outline-offset: 2px;
}

/* Read-more / 続きを読む */
.ethos-content .toggle-btn,
.toggle-btn {
  color: var(--ethos-maroon) !important;
  background: none;
  border: 0;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition: color 0.25s ease;
}
.ethos-content .toggle-btn:hover,
.ethos-content .toggle-btn:focus-visible,
.toggle-btn:hover,
.toggle-btn:focus-visible {
  color: var(--ethos-hover) !important;
  outline: 2px dashed var(--ethos-hover);
  outline-offset: 2px;
}
.ethos-content .toggle-btn:hover *,
.ethos-content .toggle-btn:focus-visible *,
.toggle-btn:hover *,
.toggle-btn:focus-visible * {
  color: var(--ethos-hover) !important;
}

/* ===== Unified Top Navigation (supports .topnav and .topnav1) ===== */
.topnav, .topnav1 {
  overflow: hidden;
  background-color: beige;
}
.topnav a, .topnav1 a {
  float: left;
  display: block;
  color: maroon;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Active: maroon background + white text */
.topnav a.active,
.topnav1 a.active {
  background-color: maroon;
  color: white !important;
  font-weight: bold;
}
/* Hover: maroon background + white text */
.topnav a:hover,
.topnav1 a:hover {
  background-color: maroon;
  color: white !important;
}

/* Hamburger hidden by default */
.topnav .icon,
.topnav1 .icon {
  display: none;
}

/* ========== Mobile behavior ========== */
@media (max-width:600px){
  /* collapsed: show only Home + hamburger */
  .topnav .menu-link, .topnav1 .menu-link { display: none; }
  .topnav .menu-link.home, .topnav1 .menu-link.home { display: block; }
  .topnav a.icon, .topnav1 a.icon { float: right; display: block; }

  /* expanded state */
  .topnav.responsive, .topnav1.responsive { position: relative; }
  .topnav.responsive a.icon, .topnav1.responsive a.icon { position: absolute; right: 0; top: 0; }
  .topnav.responsive .menu-link, .topnav1.responsive .menu-link {
    display: block; float: none; text-align: left;
  }
}

/* Fallback for pages without .menu-link classes */
@media (max-width:600px){
  .topnav:not(.has-menu-classes) a:not(:first-child),
  .topnav1:not(.has-menu-classes) a:not(:first-child) { display: none; }

  .topnav.responsive:not(.has-menu-classes) a,
  .topnav1.responsive:not(.has-menu-classes) a {
    float: none; display: block; text-align: left;
  }
}

/* Card wrapper with shadow (match nav radius) */
#box {
  background: white;
  border: 1px solid white;
  border-radius: 12px;
  box-shadow: 10px 10px 5px grey;
  margin: 0 auto 15px;
  padding: 0;
  display: block;
  text-align: center;
  overflow: hidden;
}
/* Beige nav inside the card */
#box > .topnav,
#box > .topnav1 {
  background-color: beige;
  border: 1px solid var(--ethos-maroon);
  border-radius: inherit;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}
/* Neutralize submenu spacing if any */
#box > .topnav.ethos-submenu,
#box > .topnav1.ethos-submenu {
  margin: 0;
  padding: 0;
}

/* ================= UTF-8 Hamburger (☰) styles ================= */
/* Use a literal ☰ (U+2630) or &#9776; inside <a class="icon">…</a> */
.topnav a.icon,
.topnav1 a.icon {
  color: maroon;
  background-color: beige;
  font-family: inherit;        /* keep site font */
  font-size: 22px;             /* larger tap target */
  line-height: 1;
  padding: 12px 16px;          /* matches other links */
}

/* Hover/active/open: white glyph on maroon background */
.topnav a.icon:hover,
.topnav1 a.icon:hover,
.topnav a.icon:focus,
.topnav1 a.icon:focus,
.topnav a.icon:active,
.topnav1 a.icon:active,
.topnav.responsive a.icon,
.topnav1.responsive a.icon {
  background-color: maroon !important;
  color: white !important;
}

/*---------------------------------------------- */
/*---------   For the image enlargment  -------- */
/*---------------------------------------------- */
/* Keep your 150px thumbs + add aliases so any of the three patterns work */
.ethos-thumb,
.img-container { display: inline-block; margin: 10px; position: relative; }

.ethos-thumb img,
.img-container img,
img.ethos-zoom {
  position: relative;
  width: 150px;         /* ← same as your current look */
  height: auto;
  cursor: zoom-in;
  transition: transform .25s ease; /* transform-only = smoother on mobile */
}

.ethos-thumb img.enlarged,
.img-container img.enlarged,
img.ethos-zoom.enlarged {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(4);
  transform-origin: center;
  z-index: 1000;
  cursor: zoom-out;
}
    .btn-maroon{
      display:inline-block;border:2px solid maroon; background:#ffe7cd; color:#fff !important; padding:10px 18px; border-radius:999px;
      text-decoration:none; font-weight:700;
    }
    .btn-maroon:hover{ background:#fff8e9; }