/* ==========================================================
   enapp.css  (English pages only)
   Scope: /en/ and other English landing pages
   Policy:
   - Prefer "en-" prefixed selectors for page-specific rules
   - Avoid styling WP/theme global elements beyond what’s needed
   - During migration, keep deprecated rules here (do not delete yet)
   ========================================================== */


/* ----------------------------------------------------------
   1) Reset / Base
   ---------------------------------------------------------- */
html, body { margin: 0; padding: 0; }
body { overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }
html { scroll-behavior: smooth; }


/* ----------------------------------------------------------
   2) Layout primitives (container / anchor / hero)
   ---------------------------------------------------------- */
.ys-wrap { max-width: none; margin: 0 auto; padding: 0 20px; }

@media (max-width: 960px){
  .ys-page-container{
    padding: 0 20px;
    box-sizing: border-box;
  }
}

:root{ --header-h: 80px; }
.anchor-section{ scroll-margin-top: 120px; }
.anchor-section{ scroll-margin-top: calc(var(--header-h) + 20px); }
@media (max-width: 960px){
  :root{ --header-h: 64px; }
  .anchor-section{ scroll-margin-top: 76px; }
}

.hero-centered{
  display: block;
  width: min(1200px, 92vw);
  margin: 0 auto;
  height: auto;
}

/* global headings (note: you may later replace with section-scoped headings) */
h1, h2, h3{
  text-align: center;
  margin: 60px 0 30px;
  font-weight: 700;
}


/* ----------------------------------------------------------
   3) Header / Navigation
   ---------------------------------------------------------- */
.en-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  margin-top: 0;
}

.ys-hd{
  height: 80px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.ys-logo img{
  display: block;
  width: auto;
  height: auto;
  margin-left: 0;
}

.ys-nav{ margin-left: auto; }
.ys-nav ul{
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ys-nav a{
  color: #000;
  text-decoration: none;
  font-size: 14px;
}

.ys-lang{
  display: flex;
  align-items: center;
  gap: 6px;
  border-left: 1px solid #ccc;
  padding-left: 14px;
}

.ys-lang a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  line-height: 1;
  font-weight: 600;
  text-decoration: none;
  color: #000;
  background: transparent;
  transition: background-color .2s ease, color .2s ease;
}
@media (hover:hover){
  .ys-lang a:hover{
    background-color: #f39800;
    color: #fff;
    -webkit-text-fill-color: #fff;
  }
}
.ys-lang a:focus-visible{
  background-color: #f39800;
  color: #fff;
  -webkit-text-fill-color: #fff;
  outline: none;
}

/* Burger (currently unused in HTML; keep for future) */
#ys-toggle{ display: none; }
.ys-burger{
  display: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.ys-burger span{
  display: block;
  width: 20px;
  height: 2px;
  background: #111;
  position: relative;
}
.ys-burger span:before,
.ys-burger span:after{
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: #111;
}
.ys-burger span:before{ top: -6px; }
.ys-burger span:after{ top: 6px; }

@media (max-width: 960px){
  .ys-hd{ height: 64px; }
  .ys-logo img{ height: 30px; transform: none; }

  .ys-nav{
    display: none;
    position: fixed;
    inset: 64px 0 0 0;
    background: #fff;
    overflow: auto;
    border-top: 1px solid #eee;
  }
  .ys-nav ul{ flex-direction: column; gap: 0; }
  .ys-nav li{ border-bottom: 1px solid #f0f0f0; }
  .ys-nav a{ display: block; padding: 16px 20px; font-size: 16px; }
  .ys-lang{ border-left: none; padding-left: 0; }

  .ys-burger{ display: flex; }
  #ys-toggle:checked ~ .ys-nav{ display: block; }
}

/* ===== Header nav hover (EN) ===== */

/* PC: nav link を“背景を塗れる箱”にする */
@media (hover:hover){
  .ys-nav ul li:not(.ys-lang) > a{
    display: flex;
    align-items: center;
    height: 80px;          /* header高に合わせる（PC） */
    padding: 0 16px;       /* 日本語っぽいクリック領域 */
    border-radius: 0;
    transition: background-color .2s ease, color .2s ease;
  }

  /* hover: 赤ベタ＋白文字 */
  .ys-nav ul li:not(.ys-lang) > a:hover{
    background: #e50014;
    color: #fff;
  }
}

/* SP: header高が64pxなので、必要なら高さを合わせる（任意） */
@media (max-width: 960px) and (hover:hover){
  .ys-nav ul li:not(.ys-lang) > a{
    height: auto;          /* SPは既存の padding(16px 20px) を優先 */
    padding: 16px 20px;    /* 念のため（既に定義があるなら不要） */
  }
}

/* ===== Header nav spacing fix (EN) ===== */

/* PC：メニュー間の“隙間”を消す */
@media (hover:hover){
  .ys-nav ul{
    gap: 0;
  }

  /* 間隔はリンク自身の padding で作る */
  .ys-nav ul li:not(.ys-lang) > a{
    padding: 0 24px; /* 好みで 20〜28px で微調整 */
  }
}


/* ----------------------------------------------------------
   4) Footer
   ---------------------------------------------------------- */
.en-footer{ background: #faf4ec; }
.ys-ft{
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 40px;
  display: flex;
  align-items: center;
  gap: 24px;
  line-height: 1;
  font-size: 13px;
  color: #1a1a1a;
  letter-spacing: .3px;
}
.ys-ft a{ color: #1a1a1a; text-decoration: none; }
.ys-ft-left{ display: flex; align-items: center; gap: 10px; }
.ys-ft-left img{ width: 18px; height: 18px; display: block; }
.ys-ft-right{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 40px;
  white-space: nowrap;
  text-align: right;
}
@media (max-width: 960px){
  .ys-ft{
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .ys-ft-right{
    margin-left: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    width: 100%;
  }
}

/* ===== Footer link hover (EN) ===== */
@media (hover:hover){
  .ys-ft a{
    transition: color .2s ease, text-decoration-color .2s ease;
    text-decoration: underline transparent; /* 通常は見えない下線 */
    text-underline-offset: 4px;
  }

  .ys-ft a:hover{
    color: #e50014;
    text-decoration-color: #e50014;
  }
}

@media (hover:hover){
  .ys-ft-left:hover img{
    filter: brightness(0) saturate(100%) invert(15%) sepia(97%) saturate(7464%) hue-rotate(349deg) brightness(92%) contrast(110%);
  }
}


/* ----------------------------------------------------------
   5) Sections (current production rules)
   ---------------------------------------------------------- */

/* Products (grid) */
.en-products{
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.en-products-row{
  display: grid;
  grid-template-columns: 56% 44%;
  column-gap: 56px;
  align-items: start;
}
.en-products-media{ text-align: center; }
.en-products-body{ text-align: center; }
@media (max-width: 960px){
  .en-products-row{
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 16px;
  }
  .en-products-body{ text-align: center; }
}

/* Products shared parts */
.en-products-content{ max-width: 520px; margin: 0 auto; }
.en-products-img{
  width: 100%;
  max-width: 720px;
  display: block;
  margin: 0 auto;
  border: 1px solid #eee;
}
.en-products-img.-goods{ background: #fff; }
.en-products-card{
  border: 2px solid #2bb673;
  border-radius: 8px;
  padding: 20px;
  background: #fff;
}
.en-products-text{
  margin: 10px 0;
  line-height: 1.75;
  font-size: 14px;
}
.en-products-link{
  display: block;
  margin-top: 12px;
  color: #0a7c3b;
  font: 12px/1.4 system-ui;
  text-decoration: none;
}

/* Policy */
.en-policy{ max-width: 1200px; margin: 5px auto; text-align: center; }
.en-policy-grid{
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.en-policy-item{ flex: 1; max-width: 360px; text-align: left; }
.en-policy-img{ width: 100%; height: auto; display: block; margin-bottom: 14px; }
.en-policy-text{ font: 400 15px/1.75 system-ui; margin: 0; }
@media (max-width: 960px){
  .en-policy-grid{ flex-direction: column; gap: 20px; align-items: stretch; }
  .en-policy-item{ max-width: none; }
}

/* QFSP */
.en-qfsp{
  max-width: 1200px;
  margin: 80px auto;
  text-align: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.en-qfsp-box{
  border: 2px dotted #2bb673;
  padding: 28px 36px;
  background: #fff;
  display: inline-block;
  text-align: left;
}
.en-qfsp-lead{ margin: 0 0 18px; font: 400 16px/1.9 system-ui; }
.en-qfsp-list{
  margin: 0;
  padding-right: 22px;
  font: 400 16px/1.9 system-ui;
  list-style-position: inside;
}
.en-qfsp-list li{ margin: 8px 0; }

/* Factory */
.en-factory{
  max-width: 1200px;
  margin: 60px auto;
  display: flex;
  gap: 40px;
  padding: 0 20px;
  box-sizing: border-box;
}
.en-factory.-hero{ align-items: center; }
.en-factory.-cert{ align-items: flex-start; }
.en-factory-media,
.en-factory-certimg{ flex: 1; }
.en-factory-body{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
.en-factory-img{ width: 100%; height: auto; display: block; }
.en-factory-cert{ flex: 1; }
.en-cert-row{
  display: flex;
  border-bottom: 1px dotted #bbb;
  padding: 12px 0;
}
.en-cert-th{ flex: 0 0 230px; font-weight: 600; }
.en-cert-td{ flex: 1; }
.en-factory-cert-img{
  width: 100%;
  max-width: 430px;
  height: auto;
  border: 1px solid #ddd;
  display: block;
}
@media (max-width: 960px){
  .en-factory{ flex-direction: column; gap: 24px; }
  .en-cert-th{ flex: 0 0 180px; }
  .en-factory-certimg{ display: flex; justify-content: center; }
}

/* Sustainability */
.en-sus-lead{
  max-width: 1000px;
  margin: 60px auto;
  padding: 0 20px;
  box-sizing: border-box;
  font: 15px/1.8 system-ui;
  color: #333;
}
.en-sus-icons{
  max-width: 1100px;
  margin: 60px auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.en-sus-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 32px;
  text-align: center;
}
.en-sus-icon{
  height: 160px;
  width: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.en-sus-label{
  margin-top: 12px;
  font: 15px/1.6 system-ui;
  min-height: 44px;
}
@media (max-width: 960px){
  .en-sus-grid{ grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 560px){
  .en-sus-grid{ grid-template-columns: 1fr; }
}

/* SDGs */
.en-sdgs{
  max-width: 1100px;
  margin: 60px auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.en-sdgs-imgwrap{ text-align: center; margin: 0 0 28px; }
.en-sdgs-img{ max-width: 100%; height: auto; display: inline-block; }
.en-sdgs-list{ margin: 0 auto; max-width: 980px; padding-left: 10px; }

/* About */
.en-about{
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.en-about-grid{
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}
.en-about-media{ flex: 0 0 50%; min-width: 400px; }
.en-about-img{ width: 100%; height: auto; display: block; }
.en-about-text{
  flex: 1;
  min-width: 300px;
  font-size: 12px;
  line-height: 1.8;
  color: #222;
  text-align: left;
}
@media (max-width: 960px){
  .en-about-grid{ flex-direction: column; }
  .en-about-media{ min-width: 0; flex: 1; }
}

/* Company */
.company-table{
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.7;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.company-table th,
.company-table td{
  border-bottom: 1px dotted #ccc;
  padding: 12px 0;
  text-align: left;
  vertical-align: top;
}
.company-table th{
  width: 210px;
  font-weight: 600;
  padding-right: 40px;
  white-space: nowrap;
}
@media (max-width: 1200px){
  .company-table{ padding: 0 20px; box-sizing: border-box; }
  .company-table th,
  .company-table td{ display: block; width: 100%; padding: 6px 0; }
  .company-table th{ margin-top: 14px; padding-top: 12px; border-bottom: none; }
}
.company-table-wrap{
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
@media (min-width: 1201px){
  .company-table-wrap{ padding: 0; }
}


/* ----------------------------------------------------------
   6) Typography (Stage 4+) / Text helpers
   ---------------------------------------------------------- */
:root{
  --en-green: #006837;
  --en-green-2: #0a8a4a;
  --en-green-3: #009944;
}

.en-h2{ font: 700 22px/1.35 system-ui; margin: 0 0 6px; }
.en-h2-lg{ font: 700 26px/1.4 system-ui; margin: 0 0 20px; color: var(--en-green); }
.en-h2-xl{ font: 700 28px/1.35 system-ui; margin: 0 0 8px; }

.en-h3{ font: 600 20px/1.4 system-ui; text-align: center; margin: 0 0 16px; }
.en-h3-lg{ font: 700 24px/1.4 system-ui; margin: 0; color: var(--en-green); }

.en-subline{ color: var(--en-green-2); font: 12px/1.4 system-ui; margin: 0 0 18px; }
.en-note{ font: 400 14px/1.4 system-ui; color: var(--en-green); margin-left: 4px; }
.en-kicker{ color: var(--en-green-3); font: 600 16px/1.4 system-ui; margin: 0 0 24px; }

.en-about-title{ text-align: center; color: var(--en-green-2); font-weight: 700; font-size: 26px; margin: 0 0 10px; }
.en-about-subtitle{ text-align: center; font-size: 14px; color: #444; margin: 0 0 40px; }

.en-text{ font: 15px/1.8 system-ui; color: #333; }
.en-text p{ margin: 0 0 24px; }
.en-text p:last-child{ margin-bottom: 0; }

.en-about-text p{ margin: 0 0 12px; }
.en-about-text p:last-child{ margin-bottom: 0; }

/* SDGs list text rules (additive) */
.en-sdgs-list{ font: 16px/1.9 system-ui; color: #222; }
.en-sdgs-list li{ margin: 0 0 14px; }
.en-sdgs-list li:last-child{ margin-bottom: 0; }

/* Company title */
.en-company-title{ text-align: center; font-size: 32px; margin: 40px 0 30px; }


/* ----------------------------------------------------------
   7) Utilities / Exceptions (Stage 5)
   ---------------------------------------------------------- */
.hero-centered.-hero-shift{ margin-top: -40px; }
.en-sdgs-title{ text-align: center; font: 800 36px/1.2 system-ui; margin: 0 0 24px; }
.en-cert-table{ font: 15px/1.7 system-ui; color: #333; }
.en-link.-map{ color: #0066cc; text-decoration: underline; }
.en-ft-homeicon{ width: 18px; height: 18px; display: block; }
.en-ft-homelabel{ font-weight: 500; }


/* ----------------------------------------------------------
   8) Deprecated (keep temporarily during migration)
   ---------------------------------------------------------- */
/* Old products table styles (no longer used after grid migration)
   - .en-products-table
   - .en-products-cell
   - .en-products-cell.-media / .-content
*/
.en-products-table{
  width: 100%;
  max-width: 1200px;
  margin: 60px auto;
  border-collapse: separate;
  border-spacing: 0 36px;
  padding: 0 20px;
  box-sizing: border-box;
}
.en-products-cell{ vertical-align: top; text-align: center; }
.en-products-cell.-media{ width: 56%; padding-right: 28px; }
.en-products-cell.-content{ width: 44%; padding-left: 28px; }

/* Legacy helpers (sp-stack still used elsewhere? keep until confirmed) */
@media (max-width: 960px){
  .sp-stack{
    display: block !important;
    width: 100% !important;
    border-spacing: 0 !important;
  }
  .sp-stack tbody{ display: block !important; width: 100% !important; }
  .sp-stack tr{ display: block !important; width: 100% !important; margin-bottom: 32px; }
  .sp-stack td{
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 0 16px 0;
    box-sizing: border-box;
  }
  .sp-stack td[style*="padding-right"],
  .sp-stack td[style*="padding-left"]{
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}

/* ===== Company Profile : Contact lines ===== */
.en-contact-lines{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.en-contact-lines > div{
  display: grid;
  grid-template-columns: 3em 1em auto;
}

.en-contact-lines span{
  display: block;
}
/* ===== Company Profile : Google Map link ===== */
.en-office-map-link{
  display: inline-flex;         /* block→inline寄りに */
  align-items: center;
  gap: 4px;

  margin: 0;                    /* ← 左インデントを消す */
  width: fit-content;

  font-size: 14px;
  font-weight: 400;
  line-height: 175%;
  letter-spacing: 1.4px;
  color: #e50014;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.en-office-map-link::after{
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23E50014" d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H11C11.2833 3 11.5208 3.09583 11.7125 3.2875C11.9042 3.47917 12 3.71667 12 4C12 4.28333 11.9042 4.52083 11.7125 4.7125C11.5208 4.90417 11.2833 5 11 5H5V19H19V13C19 12.7167 19.0958 12.4792 19.2875 12.2875C19.4792 12.0958 19.7167 12 20 12C20.2833 12 20.5208 12.0958 20.7125 12.2875C20.9042 12.4792 21 12.7167 21 13V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM19 6.4L10.4 15C10.2167 15.1833 9.98333 15.275 9.7 15.275C9.41667 15.275 9.18333 15.1833 9 15C8.81667 14.8167 8.725 14.5833 8.725 14.3C8.725 14.0167 8.81667 13.7833 9 13.6L17.6 5H15C14.7167 5 14.4792 4.90417 14.2875 4.7125C14.0958 4.52083 14 4.28333 14 4C14 3.71667 14.0958 3.47917 14.2875 3.2875C14.4792 3.09583 14.7167 3 15 3H21V9C21 9.28333 20.9042 9.52083 20.7125 9.7125C20.5208 9.90417 20.2833 10 20 10C19.7167 10 19.4792 9.90417 19.2875 9.7125C19.0958 9.52083 19 9.28333 19 9V6.4Z"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}


/* ===== EN SP menu: checkbox toggle (stable) ===== */
@media (max-width: 960px){

  /* checkboxは display:none にしない（labelトグルが不安定になるのを避ける） */
  .ys-toggle{
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
  }

  .ys-burger{
    display:flex;
    margin-left:auto;
    width:50px;
    height:50px;
    align-items:center;
    justify-content:center;
    border:1px solid #ddd;
    border-radius:8px;
    background:#fff;
  }

  .ys-burger span{
    display:block;
    width:20px;
    height:2px;
    background:#111;
    position:relative;
  }

  .ys-burger span:before,
  .ys-burger span:after{
    content:"";
    position:absolute;
    left:0;
    width:20px;
    height:2px;
    background:#111;
  }

  .ys-burger span:before{ top:-6px; }
  .ys-burger span:after{ top:6px; }

  /* SPでは nav を隠す */
  .ys-nav{
    display:none;
    position:fixed;
    inset:64px 0 0 0;
    background:#fff;
    overflow:auto;
    border-top:1px solid #eee;
    z-index:9999;
  }

  /* ここが本命：隣接ではなく「兄弟(~)」で開く（WP整形に強い） */
  #ys-toggle:checked ~ .ys-nav{
    display:block;
  }
}

/* ===== EN SP hamburger (final) ===== */
.ys-burger-btn{
  display: none;
  border: 0;
  background: #e50014;
  color: #fff;
  width: 50px;
  height: 50px;
  padding: 0;
  border-radius: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-left: auto;
}

.ys-burger-icon{
  width: 32px;
  height: 32px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 32px 32px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23FFFFFF" d="M4 18C3.71667 18 3.47917 17.9042 3.2875 17.7125C3.09583 17.5208 3 17.2833 3 17C3 16.7167 3.09583 16.4792 3.2875 16.2875C3.47917 16.0958 3.71667 16 4 16H20C20.2833 16 20.5208 16.0958 20.7125 16.2875C20.9042 16.4792 21 16.7167 21 17C21 17.2833 20.9042 17.5208 20.7125 17.7125C20.5208 17.9042 20.2833 18 20 18H4ZM4 13C3.71667 13 3.47917 12.9042 3.2875 12.7125C3.09583 12.5208 3 12.2833 3 12C3 11.7167 3.09583 11.4792 3.2875 11.2875C3.47917 11.0958 3.71667 11 4 11H20C20.2833 11 20.5208 11.0958 20.7125 11.2875C20.9042 11.4792 21 11.7167 21 12C21 12.2833 20.9042 12.5208 20.7125 12.7125C20.5208 12.9042 20.2833 13 20 13H4ZM4 8C3.71667 8 3.47917 7.90417 3.2875 7.7125C3.09583 7.52083 3 7.28333 3 7C3 6.71667 3.09583 6.47917 3.2875 6.2875C3.47917 6.09583 3.71667 6 4 6H20C20.2833 6 20.5208 6.09583 20.7125 6.2875C20.9042 6.47917 21 6.71667 21 7C21 7.28333 20.9042 7.52083 20.7125 7.7125C20.5208 7.90417 20.2833 8 20 8H4Z"/></svg>');
}

.en-header.is-open .ys-burger-icon{
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23FFFFFF" d="M11.9998 13.3998L7.0998 18.2998C6.91647 18.4831 6.68314 18.5748 6.3998 18.5748C6.11647 18.5748 5.88314 18.4831 5.6998 18.2998C5.51647 18.1165 5.4248 17.8831 5.4248 17.5998C5.4248 17.3165 5.51647 17.0831 5.6998 16.8998L10.5998 11.9998L5.6998 7.0998C5.51647 6.91647 5.4248 6.68314 5.4248 6.3998C5.4248 6.11647 5.51647 5.88314 5.6998 5.6998C5.88314 5.51647 6.11647 5.4248 6.3998 5.4248C6.68314 5.4248 6.91647 5.51647 7.0998 5.6998L11.9998 10.5998L16.8998 5.6998C17.0831 5.51647 17.3165 5.4248 17.5998 5.4248C17.8831 5.4248 18.1165 5.51647 18.2998 5.6998C18.4831 5.88314 18.5748 6.11647 18.5748 6.3998C18.5748 6.68314 18.4831 6.91647 18.2998 7.0998L13.3998 11.9998L18.2998 16.8998C18.4831 17.0831 18.5748 17.3165 18.5748 17.5998C18.5748 17.8831 18.4831 18.1165 18.2998 18.2998C18.1165 18.4831 17.8831 18.5748 17.5998 18.5748C17.3165 18.5748 17.0831 18.4831 16.8998 18.2998L11.9998 13.3998Z"/></svg>');
}

.ys-burger-text{
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}

@media (max-width: 960px){
  .ys-burger-btn{ display:flex; }

  .ys-nav{ display:none; }
  .en-header.is-open .ys-nav{ display:block; }
}

/* ===== nav display control (PC vs SP) ===== */
.ys-menu{ display:none; }          /* PCではdetails非表示 */
.ys-nav--sp{ display:none; }       /* PCではSP用nav非表示 */

@media (max-width: 960px){
  .ys-nav--pc{ display:none; }     /* SPではPC用nav非表示 */
  .ys-menu{ display:block; margin-left:auto; }
  .ys-nav--sp{ display:block; }    /* details内navを使う */
}

/* ===== SP: red MENU/CLOSE trigger (details/summary) ===== */
@media (max-width: 960px){

  /* summaryのデフォルトマーカー(▶︎)を消す */
  .ys-menu-trigger{
    list-style: none;
  }
  .ys-menu-trigger::-webkit-details-marker{
    display: none;
  }
  .ys-menu-trigger::marker{
    content: "";
  }

  /* トリガー：赤ベタ */
  .ys-menu-trigger{
    width: 50px;
    height: 50px;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: #e50014;
    color: #fff;
    border: 0;
    border-radius: 0;
    font-family: Lato, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
  }

  /* アイコン（MENU状態） */
  .ys-menu-icon{
    width: 32px;
    height: 32px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px 32px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23FFFFFF" d="M4 18C3.71667 18 3.47917 17.9042 3.2875 17.7125C3.09583 17.5208 3 17.2833 3 17C3 16.7167 3.09583 16.4792 3.2875 16.2875C3.47917 16.0958 3.71667 16 4 16H20C20.2833 16 20.5208 16.0958 20.7125 16.2875C20.9042 16.4792 21 16.7167 21 17C21 17.28333 20.9042 17.5208 20.7125 17.7125C20.5208 17.9042 20.2833 18 20 18H4ZM4 13C3.71667 13 3.47917 12.9042 3.2875 12.7125C3.09583 12.5208 3 12.2833 3 12C3 11.7167 3.09583 11.4792 3.2875 11.2875C3.47917 11.0958 3.71667 11 4 11H20C20.2833 11 20.5208 11.0958 20.7125 11.2875C20.9042 11.4792 21 11.7167 21 12C21 12.28333 20.9042 12.5208 20.7125 12.7125C20.5208 12.9042 20.2833 13 20 13H4ZM4 8C3.71667 8 3.47917 7.90417 3.2875 7.7125C3.09583 7.52083 3 7.28333 3 7C3 6.71667 3.09583 6.47917 3.2875 6.2875C3.47917 6.09583 3.71667 6 4 6H20C20.2833 6 20.5208 6.09583 20.7125 6.2875C20.9042 6.47917 21 6.71667 21 7C21 7.28333 20.9042 7.52083 20.7125 7.7125C20.5208 7.90417 20.2833 8 20 8H4Z"/></svg>');
    transition: .2s;
  }

  /* ラベル：MENU/CLOSE（CSSで出す） */
  .ys-menu-label{
    display: block;
    line-height: 1;
  }
  .ys-menu-label::before{
    content: "MENU";
    transition: .2s;
  }

  /* OPEN時：×アイコン＋CLOSE */
  .ys-menu[open] .ys-menu-icon{
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23FFFFFF" d="M11.9998 13.3998L7.0998 18.2998C6.91647 18.4831 6.68314 18.5748 6.3998 18.5748C6.11647 18.5748 5.88314 18.4831 5.6998 18.2998C5.51647 18.1165 5.4248 17.8831 5.4248 17.5998C5.4248 17.3165 5.51647 17.0831 5.6998 16.8998L10.5998 11.9998L5.6998 7.0998C5.51647 6.91647 5.4248 6.68314 5.4248 6.3998C5.4248 6.11647 5.51647 5.88314 5.6998 5.6998C5.88314 5.51647 6.11647 5.4248 6.3998 5.4248C6.68314 5.4248 6.91647 5.51647 7.0998 5.6998L11.9998 10.5998L16.8998 5.6998C17.0831 5.51647 17.3165 5.4248 17.5998 5.4248C17.8831 5.4248 18.1165 5.51647 18.2998 5.6998C18.4831 5.88314 18.5748 6.11647 18.5748 6.3998C18.5748 6.68314 18.4831 6.91647 18.2998 7.0998L13.3998 11.9998L18.2998 16.8998C18.4831 17.0831 18.5748 17.3165 18.5748 17.5998C18.5748 17.8831 18.4831 18.1165 18.2998 18.2998C18.1165 18.4831 17.8831 18.5748 17.5998 18.5748C17.3165 18.5748 17.0831 18.4831 16.8998 18.2998L11.9998 13.3998Z"/></svg>');
  }
  .ys-menu[open] .ys-menu-label::before{
    content: "CLOSE";
  }
}

@media (max-width: 960px){
  .ys-menu-trigger{
    padding-top: 2px;
    padding-bottom: 2px;
    gap: 3px;
  }

  .ys-menu-icon{
    margin-top: 1px;
  }

  .ys-menu-label{
    margin-bottom: 1px;
  }
}

@media (max-width: 960px){

  .ys-menu-trigger{
    position: relative;
    width: 50px;
    height: 50px;
    margin-left: auto;
    display: block;          /* flex をやめる */
    background: #e50014;
    border: 0;
    border-radius: 0;
    padding: 0;
  }

  /* アイコンを上段中央に固定 */
  .ys-menu-icon{
    position: absolute;
    top: 1px;                /* ← ここが効く（上からの距離） */
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px 32px;
  }

  /* ラベルを下段中央に固定 */
  .ys-menu-label{
    position: absolute;
    bottom: 6px;             /* ← ここが効く（下からの距離） */
    left: 0;
    right: 0;
    text-align: center;
    font-family: Lato, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    color: #fff;
    margin: 0;
  }
}
@media (max-width: 960px){
  /* SPでは枠をコンテナ幅いっぱいにする（leadとlistの幅が揃う） */
  .en-qfsp-box{
    display: block;
    width: AUTO;
    max-width: 100%;
  }

  /* SPでは余計な右paddingを消して、文章の幅を揃える */
  .en-qfsp-list{
    padding-right: 0;
  }
}
@media (max-width: 960px){
  /* SPの番号付きリストを左揃えに戻す */
  .en-qfsp-list{
    list-style-position: outside;
    padding-left: 1.4em;  /* ここで番号分のインデントを確保 */
    margin-left: 0;       /* 余計な左マージンを消す */
  }
}