/* =====================================================
   MERGED FROM static/common/css/styles.css
   (Only blocks not already present in this file)
   ===================================================== */

/* ===== CSS Variables (Required for header/footer) ===== */
:root{
    --bg:#fff; --border:#e5e7eb; --muted:#64748b; --text:#0f172a;
    --accent:#e0523d; --accent-2:#ff9a7d;
    --pad:clamp(14px,4.5vw,24px);
    --leftW: 520px; --thumbH: 400px; --cardH: 400px;
    --radius:16px; --shadow:0 20px 50px rgba(16,24,40,.10);
    --adbadge:#334155;
  
    --bg-secondary:#f8f9fa; --border-light:#f1f3f5;
    --text-secondary:#475569;
    --accent-light:#fff5f2;
    --success:#10b981; --warning:#f59e0b; --info:#3b82f6;
    --radius-sm:8px; --radius-lg:16px;
    --shadow-md:0 4px 12px rgba(0,0,0,0.1); --shadow-lg:0 10px 24px rgba(0,0,0,0.15); --shadow-xl:0 20px 50px rgba(16,24,40,.10);
  }

/* ===== Reset & Base Styles ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body { overflow-x: hidden; 
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", sans-serif;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

/* ===== Header Styles ===== */
header{ position:sticky; top:0; z-index:60; background:#ffffffd8; backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--border) }
/* Ensure header-container doesn't interfere with sticky positioning */
#header-container{ display:contents }
.container{ width:min(1200px,92vw); margin:0 auto }
.hdr{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0 }
@media (min-width:1180px){
  .hdr{ 
    flex-direction:column; 
    padding:1rem 0 0;
    gap:0;
    position:relative;
  }
}
.brand{ display:flex; align-items:center; gap:.8rem }
@media (min-width:1180px){
  .brand{ 
    margin-bottom:1rem;
  }
}

/* ヘッダーロゴのサイズ調整 */
.brand img {
    height: 78px;
    width: auto;
    display: block;
    margin: 10px 0 10px 12px;
  }

@media (min-width:768px) and (max-width:1179px) {
    .brand img {
      height: 95px;
      margin: 10px 0;
    }
  }

@media (min-width:1180px){
    .brand img {
      height: 110px;
      margin: 10px 0;
    }
  }

.logo{ width:40px; height:40px; border-radius:0; background:radial-gradient(120% 120% at 20% 20%, var(--accent-2), var(--accent)); box-shadow:var(--shadow) }
.tit{ font-weight:700 }
nav ul{ list-style:none; display:flex; gap:1rem; padding:0; margin:0; align-items:center }
@media (min-width:1180px){
  nav{ 
    width:100%;
    border-top:1px solid var(--border);
    padding:0.9rem 0;
  }
  nav ul{ 
    justify-content:center;
    gap:2.5rem;
    font-size:1.1rem;
  }
}
.btn{ 
  border:1px solid var(--border); 
  background:#fff; 
  color:#0f172a; 
  padding:.55rem 1rem; 
  border-radius:0; 
  cursor:pointer;
  white-space:nowrap;
}

/* SP版でのボタンとナビゲーションのフォントサイズ調整 */
@media (max-width: 768px) {
  .btn { 
    font-size: 11px !important; 
    padding: 0.35rem 0.5rem !important;
    white-space: nowrap !important;
    letter-spacing: -0.02em !important;
  }
  nav ul li a {
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  /* 会員登録ボタンの特別調整 */
  .btn.accent {
    font-size: 10px !important;
    padding: 0.35rem 0.4rem !important;
    letter-spacing: -0.03em !important;
  }
}
.btn.accent{ border-color:transparent; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; box-shadow:var(--shadow) }
.hamb{ 
  display:none; 
  width:42px; 
  height:42px; 
  border-radius:0; 
  border:1px solid var(--border); 
  background:#fff;
  cursor:pointer;
  padding:0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  text-align:center;
  line-height:1;
}
.hamb-lines{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
}
.hamb-lines span{
  display:block;
  width:20px;
  height:4px;
  border-radius:999px;
  background:#111;
}
.hamb-text{
  display:block;
  font-size:8px;
  font-weight:700;
  letter-spacing:0.06em;
  color:#111;
  line-height:1;
}
@media (max-width:900px){ 
  nav{ display:none } 
  .hamb{ display:flex !important; } 
}

/* PC版：ボタン類をbrandロゴの中心に配置 */
@media (min-width:1180px){
  .hdr > div:last-child{
    position:absolute;
    top:calc(1rem + 50px);
    transform:translateY(-50%);
    right:0;
    display:flex;
    align-items:center;
  }
}

/* Header buttons rounded corners (applied to all papers) */
header .btn, header .hamb{ border-radius:999px !important; box-shadow:0 10px 24px rgba(16,24,40,.10) !important; }

/* Header accent button styles */
header .btn.accent{ border:0 !important; background:linear-gradient(135deg, var(--accent,#e0523d), var(--accent-2,#ff9a7d)) !important; color:#fff !important; }

/* ===== Mobile Menu Styles ===== */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 280px;
  height: 100vh;
  background: #fff;
  z-index: 10000;
  transition: right 0.3s ease;
  box-shadow: -2px 0 10px rgba(0,0,0,0.1);
}
.mobile-menu.active {
  right: 0;
}
.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border);
}
.mobile-menu-title {
  font-weight: 700;
}
.mobile-menu-close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-menu-content {
  padding: 20px;
  overflow-y: auto;
  height: calc(100vh - 80px);
}
.mobile-menu-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mobile-menu-content li {
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}
.mobile-menu-content a {
  display: block;
  color: #0f172a;
  text-decoration: none;
}
.mobile-menu-buttons {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 2px solid #e5e7eb;
}
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  display: none;
}
.mobile-menu-overlay.active {
  display: block;
}

/* ===== Footer Styles ===== */
footer {
  background: #fff;
  border-top: 1px solid var(--border);
  margin-top: 60px;
}

.footer-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 20px 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
}

.footer-logo img {
  height: 60px;
  width: auto;
}

.footer-brand p {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 15px 0 0;
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.social-icon {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: all 0.2s;
  border-radius: 0;
}

.social-icon:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.footer-heading {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 15px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  color: var(--muted);
  font-size: 0.875rem;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--accent);
}

.newsletter-box {
  background:#f3f3f3;
  padding:20px 18px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  max-width:240px;
}

.newsletter-title{
  margin:0;
  font-size:1.1rem;
  font-weight:700;
  line-height:1.5;
  color:#1f2937;
}

.newsletter-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  background:#db5b43;
  color:#fff;
  font-size:1rem;
  font-weight:700;
  text-decoration:none;
  width:100%;
  max-width:180px;
  transition:opacity .2s;
}

.newsletter-cta:hover{
  opacity:.9;
}


.newsletter-form {
  display: flex;
  gap: 8px;
}

.newsletter-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 0.875rem;
}

.newsletter-btn {
  padding: 8px 20px;
  background: var(--accent);
  color: #fff;
  border: none;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.footer-bottom {
  padding-top: 30px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.footer-bottom-links {
  display: flex;
  gap: 25px;
}

.footer-bottom-links a {
  color: var(--muted);
  font-size: 0.813rem;
}

.copyright {
  font-size: 0.813rem;
  color: var(--muted);
}

/* ===== Footer Mobile Styles ===== */
@media (max-width:768px) {
  .footer-wrapper {
    padding: 40px 15px 30px !important;
  }
  
  .footer-grid {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
  }
  
  .footer-brand {
    padding-bottom: 30px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
  }
  
  /* アコーディオンメニュー */
  .footer-column {
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
    margin-bottom: 0;
  }
  
  .footer-heading {
    margin: 0;
    padding: 15px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 0.875rem;
    text-transform: none;
    letter-spacing: normal;
    position: relative;
  }
  
  .footer-heading::after {
    content: '+';
    font-size: 1.25rem;
    color: var(--muted);
    transition: transform 0.3s;
  }
  
  .footer-column.active .footer-heading::after {
    transform: rotate(45deg);
  }
  
  .footer-links {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
  }
  
  .footer-column.active .footer-links {
    max-height: 300px;
    padding-bottom: 15px;
  }
  
  .newsletter-box {
    background: transparent;
    padding: 30px 0;
    margin-bottom: 20px;
  }
  
  .newsletter-form {
    flex-direction: column;
    gap: 12px;
  }
  
  .newsletter-input {
    padding: 12px;
    font-size: 1rem;
  }
  
  .newsletter-btn {
    padding: 12px;
    font-size: 1rem;
    width: 100%;
  }
  
  .footer-bottom {
    padding-top: 20px;
    border-top: none;
    flex-direction: column;
    text-align: center;
  }
  
  .footer-bottom-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 4px;
    width: 100%;
    text-align: center;
  }
  
  /* 区切り文字を非表示 */
  .footer-bottom-links span {
    display: none;
  }
  
  .footer-bottom-links a {
    padding: 6px 4px;
    font-size: 0.65rem;
    white-space: nowrap;
    line-height: 1.2;
  }
  
  /* さらに小さい画面用 */
  @media (max-width:360px) {
    .footer-bottom-links a {
      font-size: 0.6rem;
      padding: 5px 2px;
    }
  }
  
  .copyright {
    font-size: 0.75rem !important;
  }
}

@media (min-width:768px){

.footer-logo img {
      height: 60px;
    }
}

*,*::before,*::after{ box-sizing:border-box}
:root{ --kwH: 48px;}
header{
  position: fixed !important; top:0; left:0; right:0;
  z-index: 1000 !important;
  background: rgba(255,255,255,.88) !important;
  -webkit-backdrop-filter: saturate(180%) blur(12px) !important;
  backdrop-filter: saturate(180%) blur(12px) !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
}
.brand a{ display:block;}
@media (max-width: 768px){
  .btn{ 
      font-size: 11px !important; 
      padding: 0.35rem 0.5rem !important;
      white-space: nowrap !important;
      letter-spacing: -0.02em !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      line-height: 1.2 !important;}
  nav ul li a{
      font-size: 12px !important;
      white-space: nowrap !important;}
  .btn.accent{
      font-size: 10px !important;
      padding: 0.35rem 0.4rem !important;
      letter-spacing: -0.03em !important;}
  .hero-actions .btn,
    #search .btn{
      font-size: 14px !important;
      padding: 0.65rem 1.2rem !important;
      letter-spacing: 0 !important;}
  .hero-actions .btn.accent,
    #search .btn.accent{
      font-size: 14px !important;
      padding: 0.65rem 1.2rem !important;
      letter-spacing: 0 !important;}
  div.ad-slot.ad-half-vertical.pc-only-ad,
  .v-track > div.ad-slot.ad-half-vertical.pc-only-ad,
  #vcolA div.ad-slot.ad-half-vertical.pc-only-ad,
  #vcolB div.ad-slot.ad-half-vertical.pc-only-ad,
  a.vtile + div.ad-slot.ad-half-vertical.pc-only-ad{
    display: none !important;
    visibility: collapse !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    line-height: 0 !important;
    font-size: 0 !important;
    flex: none !important;}
}

/* ===============================
   Login page styles (moved from login.html)
   - Scoped to .page-login so other pages are unaffected
   =============================== */
.page-login .main{
  max-width:1400px;
  margin:0 auto;
  padding:60px 20px;
  min-height:calc(100vh - var(--header-height) - 48px - 400px);
}
@media (max-width:768px){
  .page-login .main{
    padding:40px 15px;
  }
}

.page-login .login-container{
  max-width:440px;
  margin:0 auto;
  background:#fff;
  border:1px solid var(--border);
  border-radius:0;
  padding:40px;
  box-shadow:0 10px 40px rgba(0,0,0,0.05);
}
@media (max-width:768px){
  .page-login .login-container{
    padding:30px 20px;
    border:none;
    box-shadow:none;
  }
}

.page-login .login-header{
  text-align:center;
  margin-bottom:30px;
}
.page-login .login-title{
  font-size:1.75rem;
  font-weight:700;
  margin-bottom:10px;
  color:var(--text);
}
.page-login .login-subtitle{
  font-size:0.875rem;
  color:var(--muted);
}
@media (max-width:768px){
  .page-login .login-title{ font-size:1.5rem; }
}

.page-login .form-group{ margin-bottom:20px; }
.page-login .form-label{
  display:block;
  font-size:0.875rem;
  font-weight:600;
  margin-bottom:8px;
  color:var(--text);
}
.page-login .form-input{
  width:100%;
  padding:12px 16px;
  border:1px solid var(--border);
  border-radius:0;
  font-size:1rem;
  transition:border-color 0.2s;
}
.page-login .form-input:focus{
  outline:none;
  border-color:var(--accent);
}
.page-login .form-input::placeholder{ color:#cbd5e1; }

.page-login .form-checkbox{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:20px;
}
.page-login .form-checkbox input{
  width:18px;
  height:18px;
  cursor:pointer;
}
.page-login .form-checkbox label{
  font-size:0.875rem;
  color:var(--text);
  cursor:pointer;
}

.page-login .form-link{
  text-align:right;
  margin-bottom:20px;
}
.page-login .form-link a{
  font-size:0.875rem;
  color:var(--accent);
  text-decoration:underline;
}
.page-login .form-link a:hover{ color:var(--accent-2); }

.page-login .login-btn{
  width:100%;
  padding:14px;
  border:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  transition:transform 0.2s;
  border-radius:0;
}
.page-login .login-btn:hover{ transform:translateY(-1px); }

.page-login .divider{
  text-align:center;
  margin:30px 0;
  position:relative;
}
.page-login .divider::before{
  content:'';
  position:absolute;
  top:50%;
  left:0;
  right:0;
  height:1px;
  background:var(--border);
}
.page-login .divider span{
  position:relative;
  background:#fff;
  padding:0 15px;
  color:var(--muted);
  font-size:0.875rem;
}

.page-login .signup-link{
  text-align:center;
  margin-top:25px;
  padding-top:25px;
  border-top:1px solid var(--border);
  font-size:0.875rem;
  color:var(--muted);
}
.page-login .signup-link a{
  color:var(--accent);
  font-weight:600;
  text-decoration:underline;
}
.page-login .signup-link a:hover{ color:var(--accent-2); }
header .btn, header .hamb{ border-radius:999px !important; box-shadow:0 10px 24px rgba(16,24,40,.10) !important; }
@media (min-width:1180px){
.band{ 
      display:grid; 
      grid-template-columns: 450px 1fr; 
      grid-template-rows: 1fr;
      align-items:stretch; 
      gap:24px;}
  .kw-bar{
    display: none !important;}
}
.kw-bar{
    position:fixed; 
    top:var(--hdrH, var(--header-height, 64px)); 
    left:0; 
    right:0;
    z-index:900;
    background:rgba(255,255,255,.9);
    backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid var(--border);
    overflow:hidden;
    height:48px;}
.kw-inner{ width:min(1280px,96vw); margin:0 auto; padding:8px 16px;}
.kw-track{
  display:flex; gap:12px; align-items:center; white-space:nowrap;
  will-change:transform;
  animation:kw-marquee 24s linear infinite;}
.kw-pill{
  flex:0 0 auto; font-size:.92rem; color:#1f2937;
  background:#f6f7f9; border:1px solid #e5e7eb; border-radius:999px;
  padding:8px 14px; line-height:1;}
@keyframes kw-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.main-wrapper{
    width:min(1400px,100vw);
    margin:0 auto;
    padding:40px 0;}
@media (max-width:768px){
  .main-wrapper{
      width:100vw !important;
      max-width:100vw !important;
      padding:20px 0 !important;
      margin:0 !important;}
  .sp-lanes{ 
      display:block !important; 
      overflow-x:auto !important;
      overflow-y:hidden !important;
      width:100vw !important; 
      margin:0 !important;
      padding:0 !important;
      -webkit-overflow-scrolling:touch !important;}
  .article-content{
      padding:20px 0;}
}
.breadcrumb{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 10px;
    flex-wrap: wrap;
    max-width: 900px;
    margin: 10px auto 10px;
    padding: 0 20px;}
@media (max-width:768px){
  .breadcrumb{
      padding: 0 15px;}
  .sp-lanes{ 
      display:block !important; 
      overflow-x:auto !important;
      overflow-y:hidden !important;
      width:100vw !important; 
      margin:0 !important;
      padding:0 !important;
      -webkit-overflow-scrolling:touch !important;}
  .article-content{
      padding:20px 0;}
}
.article-header{
    padding:0 20px 30px;
    max-width:900px;
    margin:0 auto;}
.article-meta{
    display:flex;
    gap:15px;
    align-items:center;
    margin-bottom:20px;
    font-size:0.875rem;
    color:var(--muted);}
.category-badge{
    background:var(--accent);
    color:#fff;
    padding:4px 12px;
    font-size:0.75rem;
    font-weight:600;}
.article-title{ font-size:2rem; font-weight:700; line-height:1.4; margin:15px 0;}
@media (max-width:768px){
  .article-header{
      padding:0 15px 20px;}
  .article-title{ font-size:1.5rem;}
  .sp-lanes{ 
      display:block !important; 
      overflow-x:auto !important;
      overflow-y:hidden !important;
      width:100vw !important; 
      margin:0 !important;
      padding:0 !important;
      -webkit-overflow-scrolling:touch !important;}
  .article-content{
      padding:20px 0;}
}
.content-grid{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    gap:2px;
    padding:0 20px;
    max-width:1400px;
    margin:0 auto;}
@media (max-width:768px){
  .content-grid{
      padding:0;
      gap:0;}
  .sidebar-item{
      grid-column:1 / -1 !important;
      aspect-ratio: unset !important;
      position: relative;
      left: 50%;
      right: 50%;
      margin-left: -50vw !important;
      margin-right: -50vw !important;
      width: 100vw !important;
      max-width: 100vw !important;}
  .sp-lanes{ 
      display:block !important; 
      overflow-x:auto !important;
      overflow-y:hidden !important;
      width:100vw !important; 
      margin:0 !important;
      padding:0 !important;
      -webkit-overflow-scrolling:touch !important;}
  .article-content{
      padding:20px 0;}
}
.main-image-full{
    grid-column:span 12;
    aspect-ratio:16/9;
    background:#eee;
    margin-bottom:40px;
    overflow:hidden;}
.main-image-full img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;}
.main-image-full.is-full-image{
    aspect-ratio:auto;
    overflow:visible;}
.main-image-full.is-full-image img{
    width:100%;
    height:auto;
    object-fit:contain;
    object-position:center center;
    display:block;}
.main-image-full.is-third-image{
    aspect-ratio:auto;
    overflow:hidden;}
.main-image-full.is-third-image img{
    width:100%;
    height:auto;
    object-fit:unset;
    object-position:top center;
    display:block;}
@media (max-width:768px){
  .main-image-full{
      aspect-ratio:4/3;
      margin-bottom:20px;}
  .main-image-full.is-third-image{
      aspect-ratio:auto;}
  .sp-lanes{ 
      display:block !important; 
      overflow-x:auto !important;
      overflow-y:hidden !important;
      width:100vw !important; 
      margin:0 !important;
      padding:0 !important;
      -webkit-overflow-scrolling:touch !important;}
  .article-content{
      padding:20px 0;}
}
.article-content{
    padding:30px 0;
    background:#fff;
    line-height:1.9;
    color:#374151;
    font-size:1.05rem;}
@media (max-width:768px){
  .article-content{
      padding:20px 0;}
  .sp-lanes{ 
      display:block !important; 
      overflow-x:auto !important;
      overflow-y:hidden !important;
      width:100vw !important; 
      margin:0 !important;
      padding:0 !important;
      -webkit-overflow-scrolling:touch !important;}
}
.article-content h2{ font-size:1.6rem; font-weight:700; margin:50px 0 24px; color:#111; border-bottom:3px solid var(--accent); padding-bottom:12px;}
.article-content h3{ font-size:1.3rem; font-weight:700; margin:40px 0 20px; color:#111;}
.article-content p{ margin-bottom:24px;}
.article-content ul,
  .article-content ol{
    margin:1.25rem 0;
    padding-left:2rem;}
.article-content li{
    margin:0.5rem 0;}
.sidebar-item{
    grid-column:span 4;
    aspect-ratio:1/1;
    background:#f8f9fa;
    overflow:hidden;
    position:relative;}
@media (max-width:768px){
  .sidebar-item{
      grid-column:1 / -1 !important;
      aspect-ratio: unset !important;
      position: relative;
      left: 50%;
      right: 50%;
      margin-left: -50vw !important;
      margin-right: -50vw !important;
      width: 100vw !important;
      max-width: 100vw !important;}
  .sp-lanes{ 
      display:block !important; 
      overflow-x:auto !important;
      overflow-y:hidden !important;
      width:100vw !important; 
      margin:0 !important;
      padding:0 !important;
      -webkit-overflow-scrolling:touch !important;}
  .article-content{
      padding:20px 0;}
}
.ad-slot{ display:flex; align-items:center; justify-content:center;
            background:transparent; border:none; color:#475569;
            border-radius:0; box-shadow:none; position:relative; overflow:hidden}
.ad-slot:hover{
    transform:none;}
@media (max-width:768px){
  .sidebar-item{
      grid-column:1 / -1 !important;
      aspect-ratio: unset !important;
      position: relative;
      left: 50%;
      right: 50%;
      margin-left: -50vw !important;
      margin-right: -50vw !important;
      width: 100vw !important;
      max-width: 100vw !important;}
  .sidebar-item .ad-slot{
      width: 100vw !important;
      max-width: 100vw !important;
      height: 100vw !important;}
  .sidebar-item:not([style*="aspect-ratio"]):not(:has(.popular-box)){
      height: 100vw !important;
      aspect-ratio: 1/1 !important;}
  .sidebar-item:not([style*="aspect-ratio"]):not(:has(.popular-box)) .ad-slot{
      height: 100vw !important;}
  .sidebar-item:has(.popular-box){
      height: auto !important;
      aspect-ratio: unset !important;
      margin-bottom: 0 !important;}
  .sidebar-item[style*="aspect-ratio:3/1"]{
      height: calc(100vw / 3) !important; 
      aspect-ratio: unset !important;}
  .sidebar-item[style*="aspect-ratio:3/1"] .ad-slot{
      height: calc(100vw / 3) !important;}
  .sp-lanes{ 
      display:block !important; 
      overflow-x:auto !important;
      overflow-y:hidden !important;
      width:100vw !important; 
      margin:0 !important;
      padding:0 !important;
      -webkit-overflow-scrolling:touch !important;}
  .article-content{
      padding:20px 0;}
}
.ad-badge{ position:absolute; top:10px; left:10px; font-size:12px; color:#fff;
             background:#334155; padding:4px 8px; border-radius:999px; letter-spacing:.01em;
             width:auto; height:auto; max-width:60px; max-height:30px; 
             white-space:nowrap; overflow:hidden; z-index:10;}

.ad-slot[data-hidden="true"],
.pc-only-ad[data-hidden="true"],
.halfpage-ad-wrapper[data-hidden="true"],
.mpu-ad-wrapper[data-hidden="true"]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  width:0 !important;
  height:0 !important;
  max-width:0 !important;
  max-height:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}
@media (max-width: 768px){
  .sticky-banner{ position:fixed; z-index:80; left:12px; right:12px; bottom:12px; display:none}
  .sticky-banner.active{ display:block}
  .sticky-inner{ background:#fff; border:1px solid var(--border); border-radius:0; box-shadow:var(--shadow); padding:8px; display:flex; gap:10px; align-items:center}
  .sticky-close{ margin-left:auto; border:none; background:#f1f5f9; border-radius:0; padding:6px 10px; cursor:pointer}
  .sticky-thumb{ width:64px; height:40px; border-radius:0; overflow:hidden}
  .sticky-thumb img{ width:100%; height:100%; object-fit:cover}
  @keyframes slideUp{
    from{
        transform: translateY(100%);
        opacity: 0;}
    to{
        transform: translateY(0);
        opacity: 1;}
  }
  .btn{ 
      font-size: 11px !important; 
      padding: 0.35rem 0.5rem !important;
      white-space: nowrap !important;
      letter-spacing: -0.02em !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      line-height: 1.2 !important;}
  .btn.accent{
      font-size: 10px !important;
      padding: 0.35rem 0.4rem !important;
      letter-spacing: -0.03em !important;}
  .hero-actions .btn,
    #search .btn{
      font-size: 14px !important;
      padding: 0.65rem 1.2rem !important;
      letter-spacing: 0 !important;}
  .hero-actions .btn.accent,
    #search .btn.accent{
      font-size: 14px !important;
      padding: 0.65rem 1.2rem !important;
      letter-spacing: 0 !important;}
  div.ad-slot.ad-half-vertical.pc-only-ad,
  .v-track > div.ad-slot.ad-half-vertical.pc-only-ad,
  #vcolA div.ad-slot.ad-half-vertical.pc-only-ad,
  #vcolB div.ad-slot.ad-half-vertical.pc-only-ad,
  a.vtile + div.ad-slot.ad-half-vertical.pc-only-ad{
    display: none !important;
    visibility: collapse !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    line-height: 0 !important;
    font-size: 0 !important;
    flex: none !important;}
}
@media (min-width: 769px){
  .sticky-banner{ display:none !important}
  .halfpage-ad-wrapper,
  .mpu-ad-wrapper{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;}
  .pc-only-ad{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;}
  .ad-slot.ad-rect-vertical.pc-only-ad{
    display: block !important;}
  .ad-slot.ad-half-vertical.pc-only-ad{
    display: block !important;}
}
.related-item{
    grid-column:span 3;
    aspect-ratio:1/1;
    position:relative;
    background:#fff;
    overflow:hidden;
    cursor:pointer;
    transition:transform 0.3s;}
.related-item:hover{
    transform:translateY(-2px);}
@media (max-width:768px){
  .related-item{
      grid-column:span 12;}
  .sp-lanes{ 
      display:block !important; 
      overflow-x:auto !important;
      overflow-y:hidden !important;
      width:100vw !important; 
      margin:0 !important;
      padding:0 !important;
      -webkit-overflow-scrolling:touch !important;}
  .article-content{
      padding:20px 0;}
}


/* =====================================================
   Detail page: Related items layout
   - In the mockup, .related-item cards live inside a 12-col grid (.content-grid).
   - In the current detail.html, .related-item cards are direct children of body,
     so grid-column doesn't apply and they become huge.
   - Scope fixes to .page-detail only to avoid affecting other pages.
   ===================================================== */
.page-detail{ text-align:center; }
.page-detail main,
.page-detail #header-container,
.page-detail #kwbar-container,
.page-detail #footer-container{ text-align:left; }
.page-detail .article-title{ text-align:left; }

.page-detail > .cta-section,
.page-detail > .section-title{
  width:min(1400px, 92vw);
  margin-left:auto;
  margin-right:auto;
}

.page-detail > .related-item{
  display:inline-block;
  vertical-align:top;
  width:calc((min(1400px, 92vw) - 6px) / 4);
  margin:0 2px 2px 0;
}

@media (max-width:768px){
  .page-detail > .related-item{
    width:min(1400px, 92vw);
    margin-right:0;
  }
}

/* =====================================================
   Detail page: dynamic related/tokushu lists (match mockup)
   - #detail-related-list and #detail-tokushu-list wrap cards injected by JS.
   - Use display: contents so the cards behave like direct .content-grid children.
   ===================================================== */
.page-detail .content-grid > #detail-related-list,
.page-detail .content-grid > #detail-tokushu-list{
  display: contents;
}

.page-detail .content-grid .section-title{
  grid-column: span 12;
  padding: 20px 0;
  font-size: 1.5rem;
  font-weight: 700;
  width: auto;
  margin: 0;
  border-bottom: none !important;
}

.related-thumb{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#eee;}
.related-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;}
.related-thumb.is-blurred::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(255,255,255,0.45);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    pointer-events:none;}
.related-thumb.is-blurred img{
    filter:blur(6px) brightness(0.9);
    transform:scale(1.06);}
.related-info{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:12px;
    background:rgba(0,0,0,0.6);
    color:#fff;}
.related-info .meta{
    font-size:0.7rem;
    margin-bottom:4px;
    display:flex;
    align-items:center;
    gap:6px;
    color:#fff;
    opacity:0.9;}
.related-info .category{
    background:var(--accent);
    color:#fff;
    padding:2px 6px;
    font-size:0.65rem;
    font-weight:600;}
.related-info h4{
    margin:0;
    font-size:0.8rem;
    font-weight:600;
    line-height:1.3;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    color:#fff;}
@media (max-width:768px){
  .related-info{
      padding:8px;}
  .related-info h4{
      font-size:0.7rem;}
  .sp-lanes{ 
      display:block !important; 
      overflow-x:auto !important;
      overflow-y:hidden !important;
      width:100vw !important; 
      margin:0 !important;
      padding:0 !important;
      -webkit-overflow-scrolling:touch !important;}
  .article-content{
      padding:20px 0;}
}
.popular-box{
    padding:20px;
    background:#fff;}
.popular-box h3{
    margin:0 0 15px;
    font-size:1rem;
    padding-bottom:10px;
    border-bottom:2px solid var(--accent);}
.popular-item{
    padding:10px 0;
    border-bottom:1px solid #eee;
    font-size:0.875rem;}
.popular-rank{
    font-size:1.5rem;
    font-weight:700;
    color:var(--accent);
    min-width:32px;}
@media (max-width:768px){
  .sidebar-item .popular-box{
      width: 100vw;
      padding: 20px 15px;
      margin-bottom: 0;}
  .sidebar-item:has(.popular-box),
    .popular-box:parent,
    .sidebar-item > .popular-box:parent{
      height: auto !important;
      aspect-ratio: unset !important;
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;}
  .sp-lanes{ 
      display:block !important; 
      overflow-x:auto !important;
      overflow-y:hidden !important;
      width:100vw !important; 
      margin:0 !important;
      padding:0 !important;
      -webkit-overflow-scrolling:touch !important;}
  .article-content{
      padding:20px 0;}
}
.author-box{
    grid-column:span 12;
    padding:30px;
    background:#f8f9fa;
    display:flex;
    gap:20px;
    align-items:center;
    margin:40px 0;}
@media (max-width:768px){
  .author-box{
      padding:20px;
      margin:20px 0;}
  .sp-lanes{ 
      display:block !important; 
      overflow-x:auto !important;
      overflow-y:hidden !important;
      width:100vw !important; 
      margin:0 !important;
      padding:0 !important;
      -webkit-overflow-scrolling:touch !important;}
  .article-content{
      padding:20px 0;}
}
.author-avatar{
    width:80px;
    height:80px;
    background:var(--muted);
    border-radius:50%;
    flex-shrink:0;}
.author-info h4{
    margin:0 0 8px;
    font-size:1.125rem;}
.author-info p{
    margin:0;
    font-size:0.875rem;
    color:var(--muted);}
.tags-section{
    grid-column: span 12;
    padding: 20px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;}
.tags-list{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;}
.tag{
    background: #f3f4f6;
    color: #6b7280;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 0.85rem;
    transition: all 0.2s;}
.tag:hover{
    background: var(--accent);
    color: #fff;}
.section-title{
    grid-column:span 12;
    padding:20px 0;
    font-size:1.5rem;
    font-weight:700;}
@media (max-width:768px){
  .section-title{
      padding:15px 10px;
      font-size:1.25rem;}
  .sp-lanes{ 
      display:block !important; 
      overflow-x:auto !important;
      overflow-y:hidden !important;
      width:100vw !important; 
      margin:0 !important;
      padding:0 !important;
      -webkit-overflow-scrolling:touch !important;}
  .article-content{
      padding:20px 0;}
}
.cta-section{
    grid-column:span 12;
    padding:40px 20px;
    background:linear-gradient(135deg, #fff5f3 0%, #fff 100%);
    text-align:center;
    margin:40px 0;
    border-top:2px solid var(--border);
    border-bottom:2px solid var(--border);}
.cta-title{
    font-size:1.75rem;
    font-weight:700;
    margin-bottom:15px;
    color:var(--text);}
.cta-description{
    font-size:1rem;
    color:var(--muted);
    margin-bottom:25px;
    line-height:1.6;}
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:10px}
@media (max-width:768px){
  .cta-section{
      padding:30px 15px;
      margin:30px 0;}
  .cta-title{
      font-size:1.4rem;}
  .cta-description{
      font-size:0.9rem;}
  .hero-actions{
      flex-direction:column;}
  .hero-actions .btn{
      width:100%;
      padding:12px 20px !important;
      font-size:14px !important;}
  .sp-lanes{ 
      display:block !important; 
      overflow-x:auto !important;
      overflow-y:hidden !important;
      width:100vw !important; 
      margin:0 !important;
      padding:0 !important;
      -webkit-overflow-scrolling:touch !important;}
  .article-content{
      padding:20px 0;}
}
footer{
    border-top:1px solid var(--border);
    margin-top:80px;
    background:#fff;}
.footer-brand{
    display:flex;
    flex-direction:column;
    gap:15px;}
.footer-logo{
    display:flex;
    align-items:center;
    gap:12px;}
.footer-logo-icon{
    width:48px;
    height:48px;
    background:var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:700;
    font-size:18px;}
.footer-logo-text{
    display:flex;
    flex-direction:column;}
.footer-logo-text .main{
    font-weight:700;
    font-size:1.125rem;
    color:var(--text);}
.footer-logo-text .sub{
    font-size:0.75rem;
    color:var(--muted);
    margin-top:2px;}
.footer-desc{
    font-size:0.875rem;
    color:var(--muted);
    line-height:1.6;
    max-width:300px;}
.social-link{
    width:36px;
    height:36px;
    border:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--muted);
    transition:all 0.2s;}
.social-link:hover{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);}
.footer-column h4{
    font-size:0.75rem;
    font-weight:700;
    color:var(--text);
    margin-bottom:15px;
    text-transform:uppercase;
    letter-spacing:0.1em;}
.footer-links a:hover{
    color:var(--accent);}
.newsletter-box{
    background:#f8f9fa;
    padding:30px;
    border-radius:0;
    text-align:center;
    width:100%;
    max-width:600px;}
.newsletter-box h4{
    font-size:1.125rem;
    margin-bottom:10px;}
.newsletter-box p{
    font-size:0.875rem;
    color:#1f2937;
    margin-bottom:20px;}
.newsletter-btn:hover{
    opacity:0.9;}
.footer-bottom{
    padding-top:30px;
    border-top:1px solid var(--border);
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;}
.footer-bottom-links a:hover{
    color:var(--accent);}
.share-buttons{
    position:fixed;
    bottom:30px;
    right:30px;
    display:flex;
    gap:10px;
    z-index:50;}
@media (max-width:768px){
  .share-buttons{
      bottom:20px;
      right:20px;}
  .sp-lanes{ 
      display:block !important; 
      overflow-x:auto !important;
      overflow-y:hidden !important;
      width:100vw !important; 
      margin:0 !important;
      padding:0 !important;
      -webkit-overflow-scrolling:touch !important;}
  .article-content{
      padding:20px 0;}
}
.share-btn{
    width:44px;
    height:44px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:var(--accent);
    cursor:pointer;
    transition:transform 0.2s;}
.share-btn:hover{
    transform:scale(1.1);}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr 1.5fr;
  gap:40px;
  margin-bottom:40px;}
.social-icon:hover{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);}
.footer-links a:hover{
  color:var(--accent);}
@media (max-width:768px){
  .footer-wrapper{
    padding:40px 15px 30px !important;}
  .footer-grid{
    display:flex !important;
    flex-direction:column;
    gap:0;
    margin-bottom:0;}
  .footer-brand{
    padding-bottom:30px;
    border-bottom:1px solid var(--border);
    margin-bottom:20px;}
  .footer-column{
    border-bottom:1px solid var(--border);
    padding-bottom:0;
    margin-bottom:0;}
  .footer-heading{
    margin:0;
    padding:15px 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
    font-size:0.875rem;
    text-transform:none;
    letter-spacing:normal;
    position:relative;}
  .footer-heading::after{
    content:'+';
    font-size:1.25rem;
    color:var(--muted);
    transition:transform 0.3s;}
  .footer-column.active .footer-heading::after{
    transform:rotate(45deg);}
  .footer-links{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.3s ease-out;}
  .footer-column.active .footer-links{
    max-height:300px;
    padding-bottom:15px;}
  .newsletter-box{
      background:transparent;
      padding:30px 0;
      margin-bottom:20px;}
  .newsletter-form{
      flex-direction:column;
      gap:12px;}
  .newsletter-input{
      padding:12px;
      font-size:1rem;}
  .newsletter-btn{
      padding:12px;}
  .footer-bottom{
    padding-top:20px;
    border-top:none;
    flex-direction:column;
    text-align:center;}
  .footer-bottom-links{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 4px;
    width:100%;
    text-align:center;}
  .footer-bottom-links span{
    display:none;}
  .footer-bottom-links a{
    padding:6px 4px;
    font-size:0.65rem;
    white-space:nowrap;
    line-height:1.2;}
  @media (max-width:360px){
    .footer-bottom-links a{
      font-size:0.6rem;
      padding:5px 2px;}
  }
  .copyright{
      font-size:0.7rem !important;}
  .sp-lanes{ 
      display:block !important; 
      overflow-x:auto !important;
      overflow-y:hidden !important;
      width:100vw !important; 
      margin:0 !important;
      padding:0 !important;
      -webkit-overflow-scrolling:touch !important;}
  .article-content{
      padding:20px 0;}
}
.main{ max-width:1400px; margin:0 auto; padding:20px;}
.page-header{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:20px; padding-bottom:15px; border-bottom:1px solid var(--border);}
.page-header-content{ flex:1; min-width:0;}
.page-title{ font-size:1.75rem; font-weight:700; margin-bottom:8px;}
.page-term-description{ margin:0 0 8px; color:var(--text,#1f2937); line-height:1.8; white-space:pre-line;}
.page-desc{ font-size:0.785rem; color:var(--muted); margin:0;}
.controls{
    display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center;
    margin-bottom:20px; padding:15px 20px; background:#f8f9fa;}
.filter-tabs{ display:flex; gap:8px; flex-wrap:wrap;}
.filter-tab{
    padding:8px 16px; border:1px solid var(--border); background:#fff; color:var(--muted);
    cursor:pointer; transition:all 0.2s; font-size:0.875rem; white-space:nowrap;}
.filter-tab.active, .filter-tab:hover{
    background:var(--accent); color:#fff; border-color:var(--accent);}
.sort-control{ display:flex; align-items:center; gap:10px; font-size:0.875rem;}
.sort-select{ padding:8px 12px; border:1px solid var(--border); background:#fff; font-size:0.875rem; min-width:150px;}
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:18px}
/* List page: match mockup grid gap */
.page-list .grid{ gap:2px; }

.tile{
    aspect-ratio:1/1;
    position:relative;
    background:#fff;
    overflow:hidden;
    cursor:pointer;
    transition:transform 0.3s;}
.tile:hover{ transform:translateY(-2px);}
.large{ grid-column:span 8; grid-row:span 2;}
.medium{ grid-column:span 4;}
.small{ grid-column:span 3;}
.tile-img{
    width:100%; height:100%;
    position:absolute; top:0; left:0;
    background:#eee;}
.grid > .tile .tile-img.is-blurred{
    overflow:hidden;
}
.grid > .tile .tile-img.is-blurred::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(255,255,255,0.45);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    pointer-events:none;
}
.tile-img img{
    width:100%; height:100%;
    object-fit:cover;}
.grid > .tile .tile-img.is-blurred img{
    filter:blur(6px) brightness(0.9);
    transform:scale(1.06);
}
.tile-content{
    position:absolute; bottom:0; left:0; right:0;
    padding:12px; background:rgba(0,0,0,0.6); color:#fff;}
.medium .tile-content,
  .small .tile-content{
    background:rgba(0,0,0,0.5);
    color:#fff;
    padding:8px;}
.tile-meta{
    font-size:0.7rem; margin-bottom:4px;
    display:flex; align-items:center; gap:6px;}
.tile-category{
    background:var(--accent); color:#fff;
    padding:2px 6px; font-size:0.65rem; font-weight:600;}
.tile-title{
    font-size:0.9rem; font-weight:700; line-height:1.2; margin:0;}
.large .tile-title{
    font-size:1.5rem; line-height:1.3;}
.ad{
    display:flex; align-items:center; justify-content:center;
    background:#f8fafc; border:1px dashed #cbd5e1; color:#475569;
    position:relative; cursor:default;}
.ad:hover{ transform:none;}
.pagination{
    display:flex; gap:10px; align-items:center; justify-content:center;
    flex-wrap:wrap; margin-bottom:40px;}
.pagination-btn{
    padding:8px 14px; border:1px solid var(--border); background:#fff;
    cursor:pointer; transition:all 0.2s; font-size:0.875rem;}
.pagination-btn:hover, .pagination-btn.active{
    background:var(--accent); color:#fff; border-color:var(--accent);}
.pagination-btn:disabled{
    background:#f3f4f6; color:#9ca3af; cursor:not-allowed; border-color:#e5e7eb;}
.pagination-info{
    font-size:0.875rem; color:var(--muted);}
@media (max-width:768px){
  html, body{
      overflow-x: hidden;
      width: 100vw;
      max-width: 100vw;}
  .main{ 
      padding:15px 0; 
      width: 100vw;
      max-width: 100vw;}
  .page-header,
    .controls,
    .pagination{
      padding-left: 15px;
      padding-right: 15px;}
  .page-header{ flex-direction:column; align-items:flex-start; gap:12px;}
  .page-title{ font-size:1.5rem; margin-bottom:6px;}
  .controls{ grid-template-columns:1fr; gap:12px; padding:12px 15px; margin-bottom:15px;}

  /* ✅ SP: list.html grid layout (match TOMATO_LIST_20260123.html) */
.page-list .grid{
    grid-template-columns:repeat(12, 1fr) !important;
    gap:2px !important;
    margin-bottom:20px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
}

/* ✅ SP: make tile sizing follow the grid (override global .tile width rules used elsewhere) */
.grid > .tile{
    width:auto !important;
    margin:0 !important;
    border-radius:0 !important;
}
.grid > .tile .tile-img,
.grid > .tile .tile-img img{
    border-radius:0 !important;
}

/* SP sizing (match mockup) */
.large{
    grid-column: span 12 !important;
    grid-row: span 1 !important;
}
.medium{
    grid-column: span 6 !important;
}
.small{
    grid-column: span 4 !important;
}

/* SP: hide 4th medium tile (keep 3 medium tiles like mockup) */
.medium:nth-of-type(5){
    display:none;
}

/* Text sizing on SP (match mockup) */
.large .tile-title{ font-size:1.1rem; }
.medium .tile-title{ font-size:0.8rem; }
.small .tile-title{ font-size:0.7rem; }

  .sp-lanes{ 
      display:block !important; 
      overflow-x:auto !important;
      overflow-y:hidden !important;
      width:100vw !important; 
      margin:0 !important;
      padding:0 !important;
      -webkit-overflow-scrolling:touch !important;}
  .article-content{
      padding:20px 0;}
}
html,body{ margin:0; background:var(--bg); color:var(--text);
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI",sans-serif;}
.band{ width:min(1400px,96vw); margin:0 auto; display:grid; grid-template-columns:1fr; gap:24px;
         padding: clamp(12px,4vw,28px) var(--pad)}
.left-hero{ padding:28px 24px; display:flex; flex-direction:column; justify-content:center; min-height:500px;
              border-radius:0; box-shadow: var(--shadow); background:linear-gradient(180deg,#fafafa,#fff); position:relative}
.left-hero .mark {
    color: #334155;
    font-size: 1.1rem;
    letter-spacing: .08em;
    margin-bottom: 12px;
    text-align: center;
    line-height: 1.5;
    background-color: #fff;
    border: 1px solid #f26c2b33;
    border-radius: 20px;
    padding: 20px 0px 20px 0px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.left-hero h1{ font-size: clamp(1.8rem,2.8vw,2.4rem); margin:.2rem 0 .6rem; line-height:1.15}
.left-hero p{ color:#6b7280; margin:0 0 12px}
.pill {
    background: #fff;
    border: 2px solid #f26c2b; /* stronger tomato accent border */
    padding: .38rem .8rem;
    border-radius: 999px;
    color: #334155;
    margin-right: 8px;
    margin-bottom: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* slightly stronger shadow */
    text-align: center;
    font-weight: 600; /* improves visibility */
}
.right-gallery{ display:none}
.vcol{ position:relative; width:400px; height:100%; overflow:hidden}
.v-track{ position:absolute; inset:0; display:flex; flex-direction:column; gap:2px; padding:0; will-change:transform}
.vtile{ border:none; border-radius:0; overflow:hidden; background:#fff; box-shadow: none; width:400px;}
.vtile .thumb{ width:400px; height:400px; aspect-ratio:1/1; background:#f3f4f6; overflow:hidden; border-radius:0}
.vtile .thumb img{ width:100%; height:100%; object-fit:cover; object-position:center}
.vtile .cap{ padding:12px 14px}
.meta{ color:#64748b; font-size:.9rem}
.sp-lanes{ display:grid; gap:14px; margin-top:22px}
.lane{ overflow:hidden; user-select:none; -webkit-user-select:none; touch-action:pan-y; background:transparent}
.lane-track{ display:flex; gap:14px; padding:2px}
.tile .thumb{ aspect-ratio:1/1 !important; background:#eee}
.tile .thumb img{ width:100% !important; height:100% !important; object-fit:cover !important}
.tile .cap{ padding:10px 12px}

/* Fix: SP lanes tiles must show caption (.cap) below the square thumb (match TOMATO_TOP mockup) */
.sp-lanes .tile{
  aspect-ratio: auto !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
}
.sp-lanes .tile .thumb{
  flex: 0 0 auto !important;
}
.sp-lanes .tile .cap{
  flex: 0 0 auto !important;
  display: block !important;
}

.animate-x{ animation: slideX 28s linear infinite}
.animate-x.reverse{ animation-direction: reverse; animation-duration: 34s}
section{ border-top:1px solid var(--border)}
.cat{ width:min(1320px,96vw); margin:0 auto; padding:32px var(--pad)}
.cat h2{ margin:0 0 18px; font-size:1.3rem}
.card{ grid-column:span 3; border:none; border-radius:0; overflow:hidden; background:#fff; box-shadow: var(--shadow)}
.card .image{ aspect-ratio:1/1; background:#eee; border-radius:0 !important;}
.card .image img{ width:100%; height:100%; object-fit:cover; border-radius:0 !important;}
.card .body{ padding:12px 14px}
.ad-slot[data-hidden="true"]{ display:none !important}
.ad-rect{ width:300px; max-width:100%; height:250px}
.ad-half{ width:300px; max-width:100%; height:600px}
.ad-leader{ width:100%; height: 120px}
.native-card{ grid-column:span 3; border-radius:0; background:#fff; box-shadow:var(--shadow); overflow:hidden; position:relative}
.native-card .badge{ position:absolute; top:10px; left:10px; padding:4px 8px; border-radius:999px; font-size:12px; color:#fff; background:#ef4444}
.native-card .image{ aspect-ratio:1/1; background:#eee; border-radius:0 !important;}
.foot{ 
    width:min(1320px,96vw); 
    margin:0 auto; 
    padding:60px var(--pad) 40px;}
.lang-selector{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 12px;
    border:1px solid var(--border);
    font-size:0.875rem;
    cursor:pointer;
    transition:border-color 0.2s;}
.lang-selector:hover{
    border-color:var(--accent);}
#ad_header_leader, .ad-leader, .leaderboard, .header-ad, .ad_header_leader{display:none !important; height:0 !important; padding:0 !important; margin:0 !important;}
img, .ad-slot, .ad-slot img, .tile img, .news-card img, .brand img, .lane-track .tile img, .vcol .card, .vcol .card img{border-radius:0 !important;}
#ad_header_leader, .ad_header_leader, .header-ad, .header_ad, .leaderboard, .ad-leader, .ad-leaderboard{display:none !important; height:0 !important; padding:0 !important; margin:0 !important; border:0 !important;}
img, .ad-slot, .ad-slot img, .tile img, .news-card img, .brand img, .lane-track .tile img, .vcol .card, .vcol .card img{border-radius:0 !important;}
img, .ad-slot, .ad-slot img, .tile img, .card img, .vtile img, .thumb, .vtile .thumb, .tile .thumb{ border-radius: 0 !important;}
#ad_header_leader, .ad-leader, .leaderboard, .header-ad, .ad_header_leader{display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important;}
img, .ad-slot, .ad-slot img, .vcol .vtile, .vcol .vtile img, .vcol .card, .vcol .card img{border-radius:0 !important;}
.vtile .thumb{ width:400px; height:400px; aspect-ratio:1/1; background:#f3f4f6; overflow:hidden; border-radius:0}
header::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,0)); pointer-events:none; }
.pill-bar, .chip-row, .category-chips{position: fixed !important; top: var(--hdrH); left:0; right:0;
  z-index: 900;
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border, #e5e7eb);
  overflow-x:auto; padding:8px var(--pad);}
body{padding-top: var(--hdrH);}
body.has-chips{padding-top: calc(var(--hdrH) + var(--chipsH));}
.kw-bar:hover .kw-track{ animation-play-state:paused;}
.sp-only-market{
  display:block;}
.tomato-market-data{
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  padding: 0;}
.market-header{text-align: center;
  margin-bottom: 16px;}
.market-title{
  font-size: 1.3rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px 0;
  letter-spacing: 0.02em;}
.market-date{
  font-size: 0.8rem;
  color: #64748b;
  margin: 0;}
.market-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;}
.market-card{
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;}
.market-card::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  transition: opacity 0.2s ease;}
.market-card[data-variety="large"]::before{
  background: linear-gradient(90deg, #ef4444, #dc2626);}
.market-card[data-variety="medium"]::before{
  background: linear-gradient(90deg, #f97316, #ea580c);}
.market-card[data-variety="mini"]::before{
  background: linear-gradient(90deg, #f59e0b, #d97706);}
.market-card[data-variety="first"]::before{
  background: linear-gradient(90deg, #eab308, #ca8a04);}
.market-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #d1d5db;}
.market-card .market-card .card-header{display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f3f4f6;}
.variety-info{
  flex: 1;
  min-width: 0;
  text-align: center;}
.variety-name{
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 2px 0;
  line-height: 1.2;
  letter-spacing: -0.01em;}
.market-card[data-variety="large"] .variety-name{
  color: #dc2626;}
.market-card[data-variety="medium"] .variety-name{
  color: #ea580c;}
.market-card[data-variety="mini"] .variety-name{
  color: #d97706;}
.market-card[data-variety="first"] .variety-name{
  color: #ca8a04;}
.variety-code{
  font-size: 0.7rem;
  color: #9ca3af;
  font-weight: 600;
  letter-spacing: 0.05em;}
.card-body{
  display: flex;
  flex-direction: column;
  gap: 0;}
.price-section{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;}
.price-area{
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;}
.price-display{
  display: flex;
  align-items: baseline;
  gap: 3px;
  white-space: nowrap;}
.current-price{
  font-size: 1.75rem;
  font-weight: 800;
  color: #111827;
  line-height: 1;
  letter-spacing: -0.02em;}
.price-unit{
  font-size: 0.85rem;
  color: #6b7280;
  font-weight: 600;}
.price-change{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: #f3f4f6;
  width: fit-content;}
.price-change.trend-up{
  color: #ef4444;
  background: #fef2f2;}
.price-change.trend-down{
  color: #3b82f6;
  background: #eff6ff;}
.change-icon{
  font-size: 1rem;
  font-weight: 700;}
.change-value{
  font-weight: 700;}
.change-label{
  font-size: 0.8rem;
  opacity: 0.9;}
.volume-area{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 12px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #f3f4f6;
  width: 90px;
  flex-shrink: 0;}
.volume-label{
  font-size: 0.65rem;
  color: #9ca3af;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;}
.volume-display{
  display: flex;
  align-items: baseline;
  gap: 3px;
  white-space: nowrap;}
.volume-value{
  font-size: 1.3rem;
  font-weight: 800;
  color: #111827;
  line-height: 1;}
.volume-unit{
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 600;}
.market-footer{text-align: center;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;}
.data-source{
  font-size: 0.75rem;
  color: #94a3b8;
  margin: 0;
  font-weight: 500;}
body.has-kw{padding-top: calc( (var(--hdrH,64px)) + var(--kwH,48px) );}
main img, section img, .article img, .card img, .list img, .slider img, .ad img, .ads img, .paper img, .feature img, .column img, .video img, .news img{width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;}
main figure, main .thumb, main .image, main .media, section figure, section .thumb, section .image, section .media, .card .thumb, .card .image, .card .media, .list .thumb, .list .image, .list .media, .slider .thumb, .slider .image, .slider .media, .ad .thumb, .ad .image, .ad .media, .ads .thumb, .ads .image, .ads .media, .paper .thumb, .paper .image, .paper .media, .feature .thumb, .feature .image, .feature .media, .column .thumb, .column .image, .column .media, .video .thumb, .video .image, .video .media, .news .thumb, .news .image, .news .media{aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;}
header img, nav img, footer img{aspect-ratio: auto; height: auto; object-fit: contain;}
@keyframes slideX{
  from{ transform:translateX(0)}
  to{ transform:translateX(-50%)}
}
@media (max-width: 1179px){
  .ad-slot.ad-rect-vertical.pc-only-ad{ 
      display: none !important; 
      visibility: hidden !important;}
  .ad-slot.ad-half-vertical.pc-only-ad{ 
      display: none !important; 
      visibility: hidden !important;}
  #highlight .tomato-market-data{
    display: none !important;}
}
@media (max-width: 767px){
  .tomato-market-data.sp-only-market{
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 12px 6px;
    background: #fafafa;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;}
  .market-header{width: 100%;
    text-align: center;
    margin-bottom: 10px;
    padding: 0 8px;}
  .market-title{
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 1.3;}
  .market-date{
    font-size: 0.65rem;
    color: #64748b;
    line-height: 1.4;}
  .market-grid{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;}
  @media (min-width: 520px){
    .market-grid{
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;}
    .sp-only-market .market-grid{
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;}
  }
  @media (min-width: 700px){
    .market-grid{
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;}
    .sp-only-market .market-grid{
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;}
  }
  .market-footer{width: 100%;
    text-align: center;
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid #e2e8f0;}
  .data-source{
    font-size: 0.65rem;
    color: #94a3b8;}
  .market-card{
    display: block;
    padding: 10px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: visible;}
  .market-card .card-header{display: flex;
    margin-bottom: 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid #f3f4f6;}
  .variety-info{
    display: block;
    text-align: center;}
  .variety-name{
    font-size: 0.9rem;
    display: block;
    margin-bottom: 2px;}
  .variety-code{
    font-size: 0.65rem;
    display: block;}
  .card-body{
    display: block;}
  .price-section{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;}
  .price-area{
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;}
  .price-display{
    display: flex;
    align-items: baseline;
    gap: 3px;
    white-space: nowrap;}
  .current-price{
    font-size: 1.6rem;}
  .price-unit{
    font-size: 0.7rem;}
  .price-change{
    display: inline-flex;
    font-size: 0.7rem;
    padding: 2px 6px;}
  .volume-area{
    padding: 6px 10px;
    width: auto;
    min-width: 55px;
    flex-shrink: 0;
    align-items: center;}
  .volume-label{
    font-size: 0.6rem;}
  .volume-value{
    font-size: 1.2rem;}
  .volume-unit{
    font-size: 0.7rem;}
  .columnists-section{
      margin: 40px 0 30px 0;
      padding: 40px 15px;}
  .columnists-title{
      font-size: 1.5rem;
      margin-bottom: 32px;
      padding: 0 0 16px 0;}
  .columnists-title::after{
      width: 80px;
      height: 3px;}
  .columnists-grid{
      grid-template-columns: 1fr;
      gap: 24px;
      padding: 0;}
  .columnist-card{
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 24px;}
  .columnist-icon{
      width: 80px;
      height: 80px;}
  .columnist-name{
      font-size: 1.15rem;}
  .columnist-affiliation{
      font-size: 0.9rem;}
  .columnist-bio{
      font-size: 0.85rem;}
}
@media (max-width: 768px){
  /* コラムニスト紹介：SP表示（768px以下でも適用） */
  .columnists-section{
      margin: 40px 0 30px 0;
      padding: 40px 15px;}
  .columnists-title{
      font-size: 1.5rem;
      margin-bottom: 32px;
      padding: 0 0 16px 0;}
  .columnists-title::after{
      width: 80px;
      height: 3px;}
  .columnists-grid{
      grid-template-columns: 1fr;
      gap: 24px;
      padding: 0;}
  .columnist-card{
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 24px;}
  .columnist-icon{
      width: 80px;
      height: 80px;}
  .columnist-name{
      font-size: 1.15rem;}
  .columnist-affiliation{
      font-size: 0.9rem;}
  .columnist-bio{
      font-size: 0.85rem;}

  .right-gallery{
      display: block !important;
      width: 100vw !important;
      overflow: visible !important;
      height: auto !important;
      margin: 0 !important;
      padding: 0 !important;}
  .vcol{
      width: 100vw !important;
      height: auto !important;
      overflow: visible !important;
      position: relative !important;}
  .v-track{
      position: relative !important;
      inset: auto !important;
      height: auto !important;
      gap: 0 !important;}
  #vcolB{
      display: none !important;}
  .vtile:not(.ad-half-vertical):not(.ad-rect-vertical){
      position: relative !important;
      width: 100vw !important;
      height: 100vw !important;
      aspect-ratio: 1/1 !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      display: block !important;}
  .vtile:not(.ad-half-vertical):not(.ad-rect-vertical) .thumb{
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      background: #eee !important;
      border-radius: 0 !important;}
  .vtile:not(.ad-half-vertical):not(.ad-rect-vertical) .thumb img{
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      object-position: center !important;
      display: block !important;
      border-radius: 0 !important;}
  .vtile:not(.ad-half-vertical):not(.ad-rect-vertical) .cap{
      position: absolute !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      background: rgba(0,0,0,0.6) !important;
      color: #fff !important;
      padding: 12px !important;
      margin: 0 !important;
      z-index: 2 !important;
      border-radius: 0 !important;}
  .vtile:not(.ad-half-vertical):not(.ad-rect-vertical) .cap .meta{
      font-size: 0.7rem !important;
      margin-bottom: 4px !important;
      color: #fff !important;
      opacity: 0.9 !important;}
  .vtile:not(.ad-half-vertical):not(.ad-rect-vertical) .cap > div:last-child{
      font-size: 0.8rem !important;
      font-weight: 600 !important;
      line-height: 1.3 !important;
      color: #fff !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;}
  .ad-rect-vertical:not(.mpu-ad-wrapper){ display: none !important;}
  .ad-slot.ad-rect-vertical.pc-only-ad{ display: none !important; visibility: hidden !important;}
  .ad-half-vertical:not(.halfpage-ad-wrapper){ display: none !important;}
  .ad-slot.ad-half-vertical.pc-only-ad{ display: none !important; visibility: hidden !important;}
  .sp-lanes .tile .thumb, .lane .tile .thumb, .lane-track .tile .thumb{aspect-ratio: 1/1 !important;
    width: 100% !important;
    height: auto !important;}
  .sp-lanes .tile .thumb img, .lane .tile .thumb img, .lane-track .tile .thumb img{width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;}
  div.sp-lanes div.tile div.thumb, div.lane div.tile div.thumb, div.lane-track div.tile div.thumb, section div.sp-lanes div.tile div.thumb{aspect-ratio: 1/1 !important;
    width: calc(100vw / 3) !important;
    height: calc(100vw / 3) !important;
    max-height: calc(100vw / 3) !important;
    min-height: calc(100vw / 3) !important;}
  div.sp-lanes div.tile div.thumb img, div.lane div.tile div.thumb img, div.lane-track div.tile div.thumb img, section div.sp-lanes div.tile div.thumb img{width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    aspect-ratio: 1/1 !important;}
  .left-hero{ 
    padding:20px !important; 
    box-shadow:none !important; 
    border-radius:0 !important; 
    min-height:auto !important;}
  .left-hero h1{ font-size:1.5rem !important}
  .band{ padding:0 !important; width:100vw !important;}
  .container{ 
    width: 100vw !important; 
    padding:0 !important;}
  .grid, .masonry{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1px !important;
    padding:0 !important;}
  .card, .native-card, .news-card{
    grid-column: span 1 !important;
    width: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;}
  .card .image, .native-card .image{
    aspect-ratio: 1/1 !important;
    height: auto !important;
    border-radius: 0 !important;}
  .card .image img, .native-card .image img{
    border-radius: 0 !important;}
  .sp-lanes .tile{
    width: 100vw !important;}
  .sp-lanes .tile .thumb{
    width: 100vw !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;     
    overflow: hidden !important;
    background: #eee !important;}
  .ad-slot{ 
    width: 100% !important;
    margin: 10px 0 !important;}
  body{ background: #fff;}
  .band{ padding:0 !important; width:100vw !important;}
  .left-hero{ 
    padding:20px !important; 
    box-shadow:none !important; 
    border-radius:0 !important; 
    min-height:auto !important;}
  .sp-lanes{ 
    margin:20px 0 !important; 
    padding:0 !important; 
    width:100vw !important;}
  .lane-track{ padding:0 !important; gap:1px !important;}
  .tile{ margin:0 !important;}
  #highlight, #highlight .band, .left-hero, .sp-lanes, .sp-lanes .lane, .sp-lanes .lane-track{width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;}
  .sp-lanes .lane-track{ gap: 0 !important; padding: 0 !important;}
  .sp-lanes .tile{
    width: 100vw !important;}
  .sp-lanes .tile .thumb{
    width: 100vw !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;     
    overflow: hidden !important;
    background: #eee !important;}
  .sp-lanes .tile{
    width: 100vw !important;}
  .sp-lanes .tile .thumb{
    width: 100vw !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;     
    overflow: hidden !important;
    background: #eee !important;}
  .sp-lanes .tile .thumb img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;}
  .sp-lanes .tile, .lane .tile, .lane-track .tile{width: calc(100vw / 3) !important;
    height: auto !important;}
  .sp-lanes .tile .thumb, .lane .tile .thumb, .lane-track .tile .thumb, #top .sp-lanes .tile .thumb, main .sp-lanes .tile .thumb, body .sp-lanes .tile .thumb{width: calc(100vw / 3) !important;
    height: calc(100vw / 3) !important;
    aspect-ratio: 1/1 !important;
    max-height: calc(100vw / 3) !important;
    min-height: calc(100vw / 3) !important;
    overflow: hidden !important;
    position: relative !important;}
  .sp-lanes .tile .thumb img, .lane .tile .thumb img, .lane-track .tile .thumb img, #top .sp-lanes .tile .thumb img, main .sp-lanes .tile .thumb img, body .sp-lanes .tile .thumb img{position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    aspect-ratio: 1/1 !important;}
  .ad-slot.ad-half-vertical.pc-only-ad, .ad-slot.ad-rect-vertical.pc-only-ad, div.ad-slot.ad-half-vertical.pc-only-ad, div.ad-slot.ad-rect-vertical.pc-only-ad, .vcol .ad-slot.ad-half-vertical.pc-only-ad, .vcol .ad-slot.ad-rect-vertical.pc-only-ad, .v-track .ad-slot.ad-half-vertical.pc-only-ad, .v-track .ad-slot.ad-rect-vertical.pc-only-ad, .ad-slot.pc-only-ad, .pc-only-ad{display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    pointer-events: none !important;
    line-height: 0 !important;
    flex: 0 0 0 !important;
    flex-basis: 0 !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    grid-row: 0 !important;
    grid-column: 0 !important;}
  .ad-slot.ad-half-vertical.pc-only-ad *, .ad-slot.ad-rect-vertical.pc-only-ad *, .pc-only-ad *{display: none !important;
    height: 0 !important;
    width: 0 !important;}
  .ad-slot.ad-half-vertical.pc-only-ad, .ad-slot.ad-rect-vertical.pc-only-ad{background: transparent !important;}
  .halfpage-ad-wrapper{
    display: block !important;
    width: 100vw !important;
    height: auto !important;
    margin: 0 !important;
    margin-top: -1px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    position: relative !important;}
  .mpu-ad-wrapper{
    display: block !important;
    width: 100vw !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    position: relative !important;}
  .halfpage-ad-wrapper img, .mpu-ad-wrapper img{position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;}
  img{
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;}
  .ad-slot.ad-rect-vertical[data-ad-type="mpu"] .ad-badge{
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 10 !important;}
  .halfpage-ad-wrapper{
    display: block !important;
    width: 100vw !important;
    height: auto !important;
    margin: 0 !important;
    margin-top: -1px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    position: relative !important;}
  .v-track .halfpage-ad-wrapper, #vcolA .halfpage-ad-wrapper, #vcolB .halfpage-ad-wrapper, #vcolA .v-track .halfpage-ad-wrapper, #vcolB .v-track .halfpage-ad-wrapper{margin-top: 0 !important;
    padding-top: 0 !important;
    transform: translateY(0) !important;
    position: relative !important;
    top: 0 !important;}
  .ad-slot.ad-half-vertical.pc-only-ad + .halfpage-ad-wrapper{
    margin-top: 0 !important;
    position: relative !important;}
  .ad-slot + .halfpage-ad-wrapper, .ad-slot.ad-half-vertical.pc-only-ad + .halfpage-ad-wrapper, .pc-only-ad + .halfpage-ad-wrapper, .vtile + .ad-slot + .halfpage-ad-wrapper, * + .halfpage-ad-wrapper{margin-top: 0 !important;
    padding-top: 0 !important;}
  .vtile + .ad-slot.ad-half-vertical.pc-only-ad, a.vtile + .ad-slot.ad-half-vertical.pc-only-ad{margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;}
  .ad-slot.ad-half-vertical.pc-only-ad + .halfpage-ad-wrapper, .pc-only-ad + .halfpage-ad-wrapper{margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative !important;
    top: 0 !important;}
  .vtile + .ad-slot.ad-half-vertical.pc-only-ad + .halfpage-ad-wrapper{
    margin-top: 0 !important;
    padding-top: 0 !important;}
  .vtile + .halfpage-ad-wrapper, a.vtile + .halfpage-ad-wrapper{margin-top: 0 !important;}
  .halfpage-ad-wrapper .halfpage-inner{
    position: relative !important;
    width: 100vw !important;
    height: calc(100vw * 1.5) !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    display: block !important;}
  .halfpage-ad-wrapper img{
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;}
  .mpu-ad-wrapper{
    display: block !important;
    width: 100vw !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    position: relative !important;}
  .mpu-ad-wrapper .mpu-inner{
    position: relative !important;
    width: 100vw !important;
    height: calc(100vw * 0.5) !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    display: block !important;}
  .mpu-ad-wrapper img{
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;}
  .halfpage-ad-wrapper .ad-badge, .mpu-ad-wrapper .ad-badge{position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 10 !important;
    background: #334155 !important;
    color: white !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    border-radius: 999px !important;}
  div.ad-slot.ad-half-vertical.pc-only-ad, .v-track > div.ad-slot.ad-half-vertical.pc-only-ad, #vcolA div.ad-slot.ad-half-vertical.pc-only-ad, #vcolB div.ad-slot.ad-half-vertical.pc-only-ad, a.vtile + div.ad-slot.ad-half-vertical.pc-only-ad{display: none !important;
    visibility: collapse !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    line-height: 0 !important;
    font-size: 0 !important;
    flex: none !important;}
  .btn{ 
      font-size: 11px !important; 
      padding: 0.35rem 0.5rem !important;
      white-space: nowrap !important;
      letter-spacing: -0.02em !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      line-height: 1.2 !important;}
  .btn.accent{
      font-size: 10px !important;
      padding: 0.35rem 0.4rem !important;
      letter-spacing: -0.03em !important;}
  .hero-actions .btn,
    #search .btn{
      font-size: 14px !important;
      padding: 0.65rem 1.2rem !important;
      letter-spacing: 0 !important;}
  .hero-actions .btn.accent,
    #search .btn.accent{
      font-size: 14px !important;
      padding: 0.65rem 1.2rem !important;
      letter-spacing: 0 !important;}
  div.ad-slot.ad-half-vertical.pc-only-ad,
  .v-track > div.ad-slot.ad-half-vertical.pc-only-ad,
  #vcolA div.ad-slot.ad-half-vertical.pc-only-ad,
  #vcolB div.ad-slot.ad-half-vertical.pc-only-ad,
  a.vtile + div.ad-slot.ad-half-vertical.pc-only-ad{
    display: none !important;
    visibility: collapse !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    line-height: 0 !important;
    font-size: 0 !important;
    flex: none !important;}
}
@media (max-width:1179px){
  #highlight .tomato-market-data{
    display:none !important;}
}
@media (max-width:768px){
  .sp-lanes{ 
    order: 3 !important;
    display: block !important;
    background: white !important;}
  .lane-track{ gap:1px; padding:0}
  .tile{ width:calc(100vw / 2) !important; box-shadow:none !important}
  .tile .cap{ padding:6px; font-size:0.75rem}
  .cat{ width:100vw; padding:20px 0}
  .cat h2{ padding:0 10px}
  .card{ grid-column:span 1 !important; box-shadow:none !important}
  .card .body{ padding:10px 12px}
  .ad-leader{ height: 100px}
  .ad-slot{
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      border-radius: 0 !important;}
  .ad-half-vertical{ 
      width:100vw !important; 
      height:calc(100vw * 1.5) !important;
      min-height:calc(100vw * 1.5) !important;
      max-height:calc(100vw * 1.5) !important;
      border: none !important;
      background: transparent !important;}
  .ad-rect-vertical{ 
      width:100vw !important; 
      height:calc(100vw * 0.5) !important;
      border: none !important;
      background: transparent !important;}
  .native-card{ grid-column:span 1 !important; box-shadow:none !important}
  .copyright{
      font-size:0.7rem !important;}
  .band{
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;}
  .left-hero{ 
    order: 2 !important;
    display: flex !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 20px 24px !important;
    background: white !important;}
  .sp-lanes, .lane, .lane-track, .tile{
    margin-left:0 !important; margin-right:0 !important;}
  .band{
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;}
  .left-hero{ 
    order: 2 !important;
    display: flex !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 20px 24px !important;
    background: white !important;}
  .sp-lanes, .lane, .lane-track{ padding-left:0 !important; padding-right:0 !important;}
  #highlight, #highlight .band, .left-hero, .sp-lanes, .lane, .lane-track{ width:100vw !important; max-width:100vw !important; margin:0 !important; padding:0 !important;}
  .sp-lanes .lane-track{ gap:0 !important; padding:0 !important;}
  .sp-lanes .tile{ width:100vw !important; border-radius:0 !important; box-shadow:none !important;}
  .sp-lanes .tile .thumb{ width:100vw !important; height:auto !important; aspect-ratio:16/9 !important; overflow:hidden !important;}
  .sp-lanes .tile .thumb img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; display:block !important;}
  .band{
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;}
  #vcolA{
    order: 1 !important;
    display: block !important;
    width: 100vw !important;
    height: auto !important;
    position: static !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: white !important;}
  .left-hero{ 
    order: 2 !important;
    display: flex !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 20px 24px !important;
    background: white !important;}
  .sp-lanes{ 
    order: 3 !important;
    display: block !important;
    background: white !important;}
  #vcolB{
    visibility: visible !important;
    opacity: 1 !important;}
  .right-gallery{
    display: contents !important;}
  #vcolA .v-track, #vcolB .v-track{animation: none !important;
    animation-play-state: paused !important;
    position: static !important;
    transform: none !important;
    display: block !important;
    gap: 0 !important;
    background: white !important;
    padding: 0 !important;
    margin: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;}
  #vcolA .v-track > *, #vcolB .v-track > *{margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;}
  #vcolA .vtile:not(.ad-half-vertical):not(.ad-rect-vertical), #vcolB .vtile:not(.ad-half-vertical):not(.ad-rect-vertical){width: 100vw !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    background: white !important;
    border: none !important;
    box-shadow: none !important;}
  .vtile + *, a.vtile + *{margin-top: 0 !important;}
  #vcolA .vtile:not(.ad-half-vertical):not(.ad-rect-vertical) .thumb, #vcolB .vtile:not(.ad-half-vertical):not(.ad-rect-vertical) .thumb{width: 100vw !important;
    height: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;}
  #vcolA .vtile:not(.ad-half-vertical):not(.ad-rect-vertical) .cap, #vcolB .vtile:not(.ad-half-vertical):not(.ad-rect-vertical) .cap{padding: 4px 8px !important;
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;}
  #vcolA .vtile:not(.ad-half-vertical):not(.ad-rect-vertical) .meta, #vcolB .vtile:not(.ad-half-vertical):not(.ad-rect-vertical) .meta{font-size: 0.7rem !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;}
  #vcolA .vtile.ad-half-vertical, #vcolB .vtile.ad-half-vertical{width: 100vw !important;
    height: calc(100vw * 1.5) !important; 
    margin-bottom: 1px !important;
    display: block !important;}
  #vcolA .vtile.ad-rect-vertical, #vcolB .vtile.ad-rect-vertical{width: 100vw !important;
    height: calc(100vw * 0.5) !important; 
    margin-bottom: 1px !important;
    display: block !important;}
  #vcolA .ad-rect-vertical, #vcolB .ad-rect-vertical, #vcolA .ad-slot.ad-rect-vertical, #vcolB .ad-slot.ad-rect-vertical{width: 100vw !important;
    height: calc(100vw * 0.5) !important; 
    min-width: 100vw !important;
    min-height: calc(100vw * 0.5) !important;
    max-width: 100vw !important;
    max-height: calc(100vw * 0.5) !important;
    display: flex !important;}
  #vcolA .ad-half-vertical, #vcolB .ad-half-vertical, #vcolA .ad-slot.ad-half-vertical, #vcolB .ad-slot.ad-half-vertical{width: 100vw !important;
    height: calc(100vw * 1.5) !important; 
    min-width: 100vw !important;
    min-height: calc(100vw * 1.5) !important;
    max-width: 100vw !important;
    max-height: calc(100vw * 1.5) !important;
    display: flex !important;}
  #vcolA .ad-half-vertical img, #vcolB .ad-half-vertical img{width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; 
    background: #f8fafc;}
  #vcolA .ad-rect-vertical img, #vcolB .ad-rect-vertical img{width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; 
    background: #f8fafc;}
  #vcolB{
    visibility: visible !important;
    opacity: 1 !important;}
  #vcolA, #vcolB{border-top: 1px solid var(--border);
    padding-top: 10px;
    padding-bottom: 10px;}
  .band ~ section{
    order: 6 !important;}
  .ad-half-vertical, .vtile.ad-half-vertical, .ad-slot.ad-half-vertical{width: 100vw !important;
    height: calc(100vw * 1.5) !important;
    min-height: calc(100vw * 1.5) !important;
    max-height: calc(100vw * 1.5) !important;}
  .vcol .vtile.ad-half-vertical, .v-track .vtile.ad-half-vertical, .band .vtile.ad-half-vertical{width: 100vw !important;
    height: calc(100vw * 1.5) !important;}
  .ad-half-vertical > *, .vtile.ad-half-vertical > *:not(.ad-badge){width: 100% !important;
    height: 100% !important;}
  .halfpage-ad-wrapper, .mpu-ad-wrapper{width: 100vw !important;
    overflow: hidden !important;
    position: relative !important;}
  :root{ --kwH: 52px;}
  .kw-inner{ padding:8px 12px;}
  .kw-pill{ font-size:.9rem; padding:8px 12px;}
  .article-content{
      padding:20px 0;}
}
@media (min-width: 1180px){
  .ad-rect-vertical{ width:400px !important; height:200px !important;}
  .ad-slot.ad-rect-vertical.pc-only-ad{ 
      width:400px !important; 
      height:200px !important;
      display:block !important;
      visibility: visible !important;}
  .ad-half-vertical{ width:400px !important; height:600px !important;}
  .ad-slot.ad-half-vertical.pc-only-ad{ 
      width:400px !important; 
      height:600px !important;
      display:block !important;
      visibility: visible !important;}
  .right-gallery{
    grid-template-columns: 1fr 1fr !important;
    gap: 2px !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;}
  .vcol{ 
    width: 100% !important; 
    height: 100% !important;
    overflow: hidden !important;}
  .vtile{ 
    width: 100% !important;
    display: block !important;}
  .vtile .thumb{
    width: 100% !important;
    aspect-ratio: 1/1 !important;
    height: auto !important;
    min-height: unset !important;
    overflow: hidden !important;
    background: #eee !important;}
  .vtile .thumb img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    aspect-ratio: 1 / 1 !important;
    display: block !important;}
  .tomato-market-data{
    position: absolute;
    top: 200px;
    left: 0;
    right: auto;
    width: 450px;
    z-index: 10;}
  #highlight .left-hero > .hero-actions{
    margin-top: 340px !important;
    margin-bottom: 8px !important;}
  body > .tomato-market-data{
    display: none !important;}
  .sp-only-market{
    display: none !important;}
  #highlight .tomato-market-data{
    display: block !important;}
}
@media (min-width: 768px) and (max-width: 1179px){
  .tomato-market-data{
    max-width: 100%;}
  .market-grid{
    gap: 14px;}
  .market-card{
    padding: 16px;}
  .variety-name{
    font-size: 1.05rem;}
  .current-price{
    font-size: 1.9rem;}
  .volume-area{
    width: 95px;
    padding: 10px 14px;
    align-items: center;}
  .volume-value{
    font-size: 1.4rem;}
}
@media (min-width: 769px){
  .halfpage-ad-wrapper, .mpu-ad-wrapper{display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;}
  .pc-only-ad{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;}
  .ad-slot.ad-rect-vertical.pc-only-ad{
    display: block !important;}
  .ad-slot.ad-half-vertical.pc-only-ad{
    display: block !important;}
  .sticky-banner{ display:none !important}
  .halfpage-ad-wrapper,
  .mpu-ad-wrapper{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;}
}
@media (min-width:1180px){
  .band{ 
      display:grid; 
      grid-template-columns: 450px 1fr; 
      grid-template-rows: 1fr;
      align-items:stretch; 
      gap:24px;}
  .right-gallery{ 
      display:grid; 
      grid-template-columns: 400px 400px; 
      gap:24px; 
      align-items:start; 
      height:100%;
      overflow:visible;}
  .right-gallery .ad-slot.ad-rect-vertical, .vcol .ad-slot.ad-rect-vertical{width:400px !important; 
      height:200px !important; 
      min-width:400px !important;
      max-width:400px !important;
      min-height:200px !important;
      max-height:200px !important;}
  .right-gallery .ad-slot.ad-half-vertical, .vcol .ad-slot.ad-half-vertical{width:400px !important; 
      height:600px !important; 
      min-width:400px !important;
      max-width:400px !important;
      min-height:600px !important;
      max-height:600px !important;}
  .right-gallery .ad-slot.ad-rect-vertical img, .vcol .ad-slot.ad-rect-vertical img{max-width:100% !important;
      max-height:200px !important;
      object-fit: contain !important;}
  .right-gallery .ad-slot.ad-half-vertical img, .vcol .ad-slot.ad-half-vertical img{max-width:100% !important;
      max-height:600px !important;
      object-fit: contain !important;}
  .right-gallery{ 
      display:grid; 
      grid-template-columns: 400px 400px; 
      gap:24px; 
      align-items:start; 
      height:100%;
      overflow:visible;}
  .vtile .thumb{ aspect-ratio:1/1 !important; height:auto !important;}
  .card .image{ aspect-ratio:1/1 !important; height:auto !important;}
  .vtile .thumb img, .card .image img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important;}
  .right-gallery{ 
      display:grid; 
      grid-template-columns: 400px 400px; 
      gap:24px; 
      align-items:start; 
      height:100%;
      overflow:visible;}
  .vcol{ width: 400px !important; overflow: hidden !important;}
  .vcol .vtile, .vcol .card, .vcol .ad-slot{width: 400px !important;}
  .vcol .vtile .thumb, .vcol .card .thumb, .vcol .ad-slot{width: 400px !important;
    height: 400px !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 400px !important;}
  .vcol .vtile .thumb img, .vcol .card .thumb img, .vcol .ad-slot img{width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;}
  .vcol{ width: 400px !important; overflow: hidden !important;}
  .vcol .v-track{ gap: 22px !important;}
  .right-gallery{ 
      display:grid; 
      grid-template-columns: 400px 400px; 
      gap:24px; 
      align-items:start; 
      height:100%;
      overflow:visible;}
  .vcol{ width: 400px !important; overflow: hidden !important;}
  .vcol .vtile, .vcol .card{ width:400px !important;}
  .vcol .vtile .thumb, .vcol .card .thumb{width:400px !important;
    height:400px !important;
    min-height:400px !important;
    aspect-ratio: 1 / 1 !important;}
  .vcol .card .image{
    width:400px !important; height:400px !important; min-height:400px !important; aspect-ratio: 1 / 1 !important;}
  #news .card .image, #newspaper-ads .card .image{width:100% !important;
    height:auto !important;
    min-height:auto !important;
    aspect-ratio: 1 / 1 !important;}
  .vcol .vtile .thumb img, .vcol .card .thumb img, .vcol .card .image img{width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;}
  #news .card .image img, #newspaper-ads .card .image img{width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;}
  .vcol .v-track{ gap: 22px !important;}
  :root{ --thumbH:400px; --cardH:400px;}
  .right-gallery{ 
      display:grid; 
      grid-template-columns: 400px 400px; 
      gap:24px; 
      align-items:start; 
      height:100%;
      overflow:visible;}
  .vcol{ width: 400px !important; overflow: hidden !important;}
  .vtile, .vcol .card{ width:400px !important;}
  .vtile .thumb, .vcol .card .thumb{
    width:400px !important; height:400px !important; min-height:400px !important; aspect-ratio: 1 / 1 !important;}
  .vcol .card .image{
    width:400px !important; height:400px !important; min-height:400px !important; aspect-ratio: 1 / 1 !important;}
  #news .card .image, #newspaper-ads .card .image{width:100% !important;
    height:auto !important;
    min-height:auto !important;
    aspect-ratio: 1 / 1 !important;}
  .vtile .thumb img, .vcol .card .thumb img, .vcol .card .image img{
    width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; display:block !important;}
  #news .card .image img, #newspaper-ads .card .image img{width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; display:block !important;}
  .right-gallery{ 
      display:grid; 
      grid-template-columns: 400px 400px; 
      gap:24px; 
      align-items:start; 
      height:100%;
      overflow:visible;}
  .vcol{ width: 400px !important; overflow: hidden !important;}
  .vcol .v-track{ gap: 22px !important;}
  .vcol .vtile{ width: 400px !important;}
  .vcol .vtile .thumb{
    width: 400px !important;
    height: 400px !important;
    min-height: 400px !important;
    
    aspect-ratio: unset !important;}
  .vcol .vtile .thumb img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;}
  .vcol .ad-rect{ height: 250px !important;}
  .vcol .ad-half{ height: 600px !important;}
  .vcol .ad-slot img{
    width: 100% !important; height: 100% !important; object-fit: cover !important;}
  .right-gallery{ 
      display:grid; 
      grid-template-columns: 400px 400px; 
      gap:24px; 
      align-items:start; 
      height:100%;
      overflow:visible;}
  .right-gallery .vcol{ width:400px !important; overflow:hidden !important;}
  .right-gallery .vcol .v-track{ gap:22px !important; padding:0 !important;}
  .right-gallery .vtile{ width:400px !important; display:block !important;}
  .right-gallery .vtile .thumb{
    display:block !important;
    position:relative !important;
    width:400px !important;
    height:400px  !important;
    min-height:400px !important;
    line-height:0 !important;
    padding:0 !important; margin:0 !important; border:0 !important;
    overflow:hidden !important;}
  .right-gallery .vtile .thumb img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    display:block !important;}
  .right-gallery img{ aspect-ratio:auto !important;}
  .right-gallery .vtile{ width:400px !important; display:block !important;}
  .right-gallery .vtile .thumb{
    display:block !important;
    position:relative !important;
    width:400px !important;
    height:400px  !important;
    min-height:400px !important;
    line-height:0 !important;
    padding:0 !important; margin:0 !important; border:0 !important;
    overflow:hidden !important;}
  .right-gallery .vtile .thumb img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    display:block !important;}
  .right-gallery{ 
      display:grid; 
      grid-template-columns: 400px 400px; 
      gap:24px; 
      align-items:start; 
      height:100%;
      overflow:visible;}
  .right-gallery{ 
      display:grid; 
      grid-template-columns: 400px 400px; 
      gap:24px; 
      align-items:start; 
      height:100%;
      overflow:visible;}
  .right-gallery .vcol{ width:400px !important; overflow:hidden !important;}
  .right-gallery .vcol .v-track{ gap:22px !important; padding:0 !important;}
  .right-gallery .vtile{ width:400px !important; display:block !important;}
  .right-gallery .vtile .thumb{
    display:block !important;
    position:relative !important;
    width:400px !important;
    height:400px  !important;
    min-height:400px !important;
    line-height:0 !important;
    padding:0 !important; margin:0 !important; border:0 !important;
    overflow:hidden !important;}
  .right-gallery .vtile .thumb img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    display:block !important;}
  .right-gallery{ 
      display:grid; 
      grid-template-columns: 400px 400px; 
      gap:24px; 
      align-items:start; 
      height:100%;
      overflow:visible;}
  .right-gallery .vcol{ width:400px !important; overflow:hidden !important;}
  .right-gallery .vcol *{ max-width:none !important;}
  .right-gallery .vtile{ width:400px !important; display:block !important;}
  .right-gallery .vtile .thumb{
    display:block !important;
    position:relative !important;
    width:400px !important;
    height:400px  !important;
    min-height:400px !important;
    line-height:0 !important;
    padding:0 !important; margin:0 !important; border:0 !important;
    overflow:hidden !important;}
  .right-gallery .vtile .thumb img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    display:block !important;}
  .right-gallery .vtile .thumb{
    display:block !important;
    position:relative !important;
    width:400px !important;
    height:400px  !important;
    min-height:400px !important;
    line-height:0 !important;
    padding:0 !important; margin:0 !important; border:0 !important;
    overflow:hidden !important;}
  .right-gallery .vtile .thumb img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    display:block !important;}
  .right-gallery{ 
      display:grid; 
      grid-template-columns: 400px 400px; 
      gap:24px; 
      align-items:start; 
      height:100%;
      overflow:visible;}
  .right-gallery .vcol{ width:400px !important; overflow:hidden !important;}
  .right-gallery .vcol .v-track{ gap:22px !important; padding:0 !important;}
  .right-gallery a.vtile{
    display:block !important;
    min-height:400px !important;}
  .right-gallery .vtile .thumb, .right-gallery .ad-slot{height:400px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;}
  .right-gallery .vtile .thumb img, .right-gallery .ad-slot img{width:auto !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    max-width:none !important;
    aspect-ratio:auto !important;
    display:block !important;}
  .right-gallery .vtile .thumb > *{ position:static !important;}
  .right-gallery .vtile .thumb::before, .right-gallery .vtile .thumb::after{content:none !important;}
  .sp-only-market{
    display:none !important;}
  body > .tomato-market-data{
    display:none !important;}
  #highlight .tomato-market-data{
    display:block !important;}
  #highlight .band{
    position:relative;}
  .kw-bar{
    display: none !important;}
  .right-gallery .ad-slot{ position:relative;}
  .right-gallery .ad-slot::before{
    background-size:cover !important;
    background-position:center !important;}
  .right-gallery .vtile .thumb, .right-gallery .ad-slot{height:400px !important;
    overflow:hidden !important;
    position:relative !important;}
  .right-gallery .vtile .thumb img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    display:block !important;}
  .right-gallery .ad-slot::before{
    background-size:cover !important;
    background-position:center !important;}
  .latest-news img, .paper-ad img, .preview-paper img{width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    display:block !important;}
  .footer-ad{position:relative !important; overflow:hidden !important;}
  .footer-ad::before{content:"";
    position:absolute;
    inset:0;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    background-image: var(--footerad-img, none);
    pointer-events:none;}
  #news .card .image img, #newspaper-ads .card .image img, #paper .card .image img, footer img[alt="フッター広告"]{width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    display:block !important;}
}
@media (min-width:769px){
  .sp-lanes{ display:block; overflow:visible; min-height:auto}
}
@media (min-width:769px) and (max-width:1024px){
  .card{ grid-column:span 6}
  .native-card{ grid-column:span 6}
}
@media screen and (max-width:768px){
  .ad-slot{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;}
  .ad-half-vertical, .vtile.ad-half-vertical, .ad-slot.ad-half-vertical, div.ad-half-vertical, div.vtile.ad-half-vertical, #vcolA .ad-half-vertical, #vcolB .ad-half-vertical, #vcolA .vtile.ad-half-vertical, #vcolB .vtile.ad-half-vertical, #vcolA .ad-slot.ad-half-vertical, #vcolB .ad-slot.ad-half-vertical{width: 100vw !important;
    height: calc(100vw * 1.5) !important;
    min-width: 100vw !important;
    min-height: calc(100vw * 1.5) !important;
    max-width: 100vw !important;
    max-height: calc(100vw * 1.5) !important;
    aspect-ratio: 2/3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8fafc !important;
    overflow: hidden !important;
    position: relative !important;
    margin-bottom: 1px !important;}
  .vtile.ad-half-vertical .thumb, .ad-half-vertical .thumb{display: none !important;}
  .vtile:not(.ad-half-vertical):not(.ad-rect-vertical){}
  @media (max-width: 768px){
    .halfpage-ad-wrapper,
    .mpu-ad-wrapper{
      
      aspect-ratio: unset !important;
      border-radius: 0 !important;
      width: 100vw !important;
      height: auto !important;
      overflow: hidden !important;
      position: relative !important;}
    .halfpage-ad-wrapper > *, .mpu-ad-wrapper > *{border-radius: 0 !important;
      overflow: hidden !important;}
    .halfpage-ad-wrapper div[style*="position:absolute"], .mpu-ad-wrapper div[style*="position:absolute"]{width: auto !important;
      height: auto !important;
      max-width: 60px !important;
      max-height: 30px !important;
      white-space: nowrap !important;
      overflow: hidden !important;}
    .halfpage-ad-wrapper > *,
    .mpu-ad-wrapper > *{
      border-radius: 0 !important;
      overflow: hidden !important;}
    .halfpage-ad-wrapper div[style*="position:absolute"],
    .mpu-ad-wrapper div[style*="position:absolute"]{
      width: auto !important;
      height: auto !important;
      max-width: 60px !important;
      max-height: 30px !important;
      white-space: nowrap !important;
      overflow: hidden !important;}
  }
  .ad-slot[data-ad-type="halfpage"]:not(:has(img)), .ad-slot[data-ad-type="mpu"]:not(:has(img)){background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;}
  .ad-slot[data-ad-type="halfpage"]::after, .ad-slot[data-ad-type="mpu"]::after{content: attr(data-ad-type) " 広告スペース" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;}
  .ad-half-vertical img, .vtile.ad-half-vertical img, .ad-half-vertical > img, .ad-half-vertical a img, .vtile.ad-half-vertical a img, .ad-slot.ad-half-vertical img, .ad-slot.ad-half-vertical a img, #vcolA .ad-half-vertical img, #vcolB .ad-half-vertical img{width: 100% !important;
    height: 100% !important;
    min-width: auto !important;
    min-height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 auto !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;}
  .ad-half-vertical a, .vtile.ad-half-vertical a, .ad-slot.ad-half-vertical a{display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;}
  .ad-badge{
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 10 !important;
    width: auto !important;
    height: auto !important;
    max-width: 60px !important;
    max-height: 30px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;}
  .ad-half-vertical > *:not(.ad-badge), .vtile.ad-half-vertical > *:not(.ad-badge){max-width: 100% !important;
    max-height: 100% !important;}
  .ad-half-vertical svg, .vtile.ad-half-vertical svg, .ad-half-vertical canvas, .vtile.ad-half-vertical canvas, .ad-half-vertical video, .vtile.ad-half-vertical video{width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;}
  .ad-half-vertical::before, .vtile.ad-half-vertical::before{content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);}
  .ad-rect-vertical img, .vtile.ad-rect-vertical img, .ad-slot.ad-rect-vertical img{width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;}
  .ad-half-vertical,
  .vtile.ad-half-vertical,
  .ad-slot.ad-half-vertical,
  div.ad-half-vertical,
  div.vtile.ad-half-vertical,
  #vcolA .ad-half-vertical,
  #vcolB .ad-half-vertical,
  #vcolA .vtile.ad-half-vertical,
  #vcolB .vtile.ad-half-vertical,
  #vcolA .ad-slot.ad-half-vertical,
  #vcolB .ad-slot.ad-half-vertical{
    width: 100vw !important;
    height: calc(100vw * 1.5) !important;
    min-width: 100vw !important;
    min-height: calc(100vw * 1.5) !important;
    max-width: 100vw !important;
    max-height: calc(100vw * 1.5) !important;
    aspect-ratio: 2/3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8fafc !important;
    overflow: hidden !important;
    position: relative !important;
    margin-bottom: 1px !important;}
  .vtile.ad-half-vertical .thumb,
  .ad-half-vertical .thumb{
    display: none !important;}
  .ad-slot[data-ad-type="halfpage"]:not(:has(img)),
  .ad-slot[data-ad-type="mpu"]:not(:has(img)){
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;}
  .ad-slot[data-ad-type="halfpage"]::after,
  .ad-slot[data-ad-type="mpu"]::after{
    content: attr(data-ad-type) " 広告スペース" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;}
  .ad-half-vertical img,
  .vtile.ad-half-vertical img,
  .ad-half-vertical > img,
  .ad-half-vertical a img,
  .vtile.ad-half-vertical a img,
  .ad-slot.ad-half-vertical img,
  .ad-slot.ad-half-vertical a img,
  #vcolA .ad-half-vertical img,
  #vcolB .ad-half-vertical img{
    width: 100% !important;
    height: 100% !important;
    min-width: auto !important;
    min-height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 auto !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;}
  .ad-half-vertical a,
  .vtile.ad-half-vertical a,
  .ad-slot.ad-half-vertical a{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;}
  .ad-half-vertical > *:not(.ad-badge),
  .vtile.ad-half-vertical > *:not(.ad-badge){
    max-width: 100% !important;
    max-height: 100% !important;}
  .ad-half-vertical svg,
  .vtile.ad-half-vertical svg,
  .ad-half-vertical canvas,
  .vtile.ad-half-vertical canvas,
  .ad-half-vertical video,
  .vtile.ad-half-vertical video{
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;}
  .ad-half-vertical::before,
  .vtile.ad-half-vertical::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);}
  .ad-rect-vertical img,
  .vtile.ad-rect-vertical img,
  .ad-slot.ad-rect-vertical img{
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;}
}
img{ max-width:100%; display:block}
a{ color:inherit; text-decoration:none}
.container{ width:min(1200px,92vw); margin:0 auto}
.logo{ width:40px; height:40px; border-radius:0; background:radial-gradient(120% 120% at 20% 20%, var(--accent-2), var(--accent)); box-shadow:var(--shadow)}
.tit{ font-weight:700}
.btn{ border:1px solid var(--border); background:#fff; color:#0f172a; padding:.55rem 1rem; border-radius:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font-family:inherit;}
.btn.accent{ border-color:transparent; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; box-shadow:var(--shadow)}
a.card{ display:block; text-decoration:none; color:inherit;}
.newsletter-form{
    display:flex;
    gap:10px;
    justify-content:center;
    max-width:400px;
    margin:0 auto;}
.newsletter-input{
    flex:1;
    padding:10px 15px;
    border:1px solid var(--border);
    background:#fff;
    font-size:0.875rem;}
.newsletter-btn{
    padding:10px 20px;
    background:var(--accent);
    color:#fff;
    border:none;
    font-weight:600;
    cursor:pointer;
    transition:opacity 0.2s;}
.copyright{
    font-size:0.875rem;
    color:var(--muted);}
html, body{ overflow-x: hidden;}
img, .ad-slot, .ad-slot img,
.vcol .vtile, .vcol .vtile img,
.vcol .card,  .vcol .card img{
  border-radius:0 !important;}
.market-carousel{
  position: relative;
  overflow: visible;}
.market-indicators{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 4px;}
.indicator-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;}
.indicator-dot:hover{
  background: #94a3b8;
  transform: scale(1.2);}
.indicator-dot.active{
  background: #e0523d;
  width: 24px;
  border-radius: 4px;}
main img,
section img,
.article img,
.card img,
.list img,
.slider img,
.ad img,
.ads img,
.paper img,
.feature img,
.column img,
.video img,
.news img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;}
main figure, main .thumb, main .image, main .media,
section figure, section .thumb, section .image, section .media,
.card .thumb, .card .image, .card .media,
.list .thumb, .list .image, .list .media,
.slider .thumb, .slider .image, .slider .media,
.ad .thumb, .ad .image, .ad .media,
.ads .thumb, .ads .image, .ads .media,
.paper .thumb, .paper .image, .paper .media,
.feature .thumb, .feature .image, .feature .media,
.column .thumb, .column .image, .column .media,
.video .thumb, .video .image, .video .media,
.news .thumb, .news .image, .news .media{
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;}
.social-icon{
  width:36px;
  height:36px;
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  transition:all 0.2s;}
.newsletter-form{
  display:flex;
  gap:8px;}
.newsletter-input{
  flex:1;
  padding:8px 12px;
  border:1px solid var(--border);
  background:#fff;
  font-size:0.875rem;}
.newsletter-btn{
  padding:8px 20px;
  background:var(--accent);
  color:#fff;
  border:none;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;}
img{ max-width:100%; display:block;}
a{ color:inherit; text-decoration:none;}
.container{ width:min(1200px,92vw); margin:0 auto}
.logo{ width:40px; height:40px; border-radius:0; background:radial-gradient(120% 120% at 20% 20%, var(--accent-2), var(--accent)); box-shadow:var(--shadow)}
.tit{ font-weight:700}
.btn{ border:1px solid var(--border); background:#fff; color:#0f172a; padding:.55rem 1rem; border-radius:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font-family:inherit;}
.btn.accent{ border-color:transparent; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; box-shadow:var(--shadow)}
.medium .tile-title{
    font-size:0.85rem; line-height:1.2;}
.small .tile-title{
    font-size:0.75rem; line-height:1.2;}
.social-icon{
    width:36px;
    height:36px;
    border:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--muted);
    transition:all 0.2s;}
.newsletter-form{
    display:flex;
    gap:8px;}
.newsletter-input{
    flex:1;
    padding:8px 12px;
    border:1px solid var(--border);
    background:#fff;
    font-size:0.875rem;}
.newsletter-btn{
    padding:8px 20px;
    background:var(--accent);
    color:#fff;
    border:none;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;}
img{ max-width:100%; display:block}
a{ color:inherit; text-decoration:none}
.container{ width:min(1200px,92vw); margin:0 auto}
.logo{ width:40px; height:40px; border-radius:0; background:radial-gradient(120% 120% at 20% 20%, var(--accent-2), var(--accent)); box-shadow:var(--shadow)}
.tit{ font-weight:700}
.btn{ border:1px solid var(--border); background:#fff; color:#0f172a; padding:.55rem 1rem; border-radius:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; text-decoration:none;}
.btn.accent{ border-color:transparent; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; box-shadow:var(--shadow)}
.breadcrumb a{
    color: var(--muted);
    transition: color 0.2s;}
.breadcrumb a:hover{
    color: var(--accent);}
.breadcrumb-separator{
    color: #d1d5db;}
.breadcrumb-current{
    color: var(--text);
    font-weight: 600;}
.newsletter-form{
    display:flex;
    gap:10px;
    justify-content:center;
    max-width:400px;
    margin:0 auto;}
.newsletter-input{
    flex:1;
    padding:10px 15px;
    border:1px solid var(--border);
    background:#fff;
    font-size:0.875rem;}
.newsletter-btn{
    padding:10px 20px;
    background:var(--accent);
    color:#fff;
    border:none;
    font-weight:600;
    cursor:pointer;
    transition:opacity 0.2s;}
.copyright{
    font-size:0.875rem;
    color:var(--muted);}
.prefecture-badge{
    background:#f3f4f6;
    color:#374151;
    padding:4px 12px;
    font-size:0.75rem;
    font-weight:600;}
.back-button{
    max-width: 900px;
    margin: 0 auto 20px;
    padding: 0 20px;}
.back-button a{ display:inline-flex; align-items:center; gap:8px; padding:12px 24px; background:#f3f4f6; border-radius:6px; font-weight:600; font-size:0.95rem;}
.back-button a:hover{ background:#e5e7eb;}
.article-content strong{ color:var(--accent); font-weight:700;}
.info-box{ background:#f0f9ff; border-left:4px solid #0ea5e9; padding:20px 24px; margin:30px 0; border-radius:4px;}
.info-box h4{ margin:0 0 12px; color:#0c4a6e; font-size:1.1rem;}
.info-box p{ margin:0; color:#0c4a6e;}
@media (min-width:1024px){
  .detail-layout{
      display:flex;
      flex-direction:column;
      max-width: 900px;
      margin: 0 auto;
      padding: 0 20px;}
}
@media (max-width:1023px){
  .detail-layout{
      padding: 0 15px;}
}
.main-image-container{
    margin: 0 0 24px 0;
    cursor:pointer;
    transition:opacity 0.2s;}
.main-image-container:hover{
    opacity:0.9;}
@media (min-width:1024px){
  .main-image-container img{
      width:100%;
      height:auto;
      display:block;
      border-radius:8px;
      box-shadow:0 4px 12px rgba(0,0,0,0.1);}
}
@media (max-width:1023px){
  .main-image-container{
      margin: 0 0 24px 0;}
  .main-image-container img{
      width:100%;
      height:auto;
      display:block;}
}
.sidebar{
    position:sticky;
    top:100px;}
@media (min-width:1024px){
  .sidebar{
      position: relative;
      top: auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
      margin-top: 50px;
      padding-top: 40px;
      border-top: 1px solid var(--border);}
  .sidebar.sidebar-two-columns{
      grid-template-columns: repeat(2, 1fr);}
}
.sidebar-section{
    margin-bottom:32px;}
@media (min-width:1024px){
  .sidebar-section{
      margin-bottom: 0;}
}
.sidebar-heading{
    font-size:1.1rem;
    font-weight:700;
    margin:0 0 16px;
    padding-bottom:12px;
    border-bottom:2px solid var(--accent);}
.popular-article{
    display:flex;
    gap:12px;
    margin-bottom:16px;
    padding-bottom:16px;
    border-bottom:1px solid var(--border);}
.popular-article:last-child{
    border-bottom:none;
    margin-bottom:0;
    padding-bottom:0;}
.popular-content{
    flex:1;}
.popular-title{
    font-size:0.9rem;
    font-weight:600;
    line-height:1.4;
    margin-bottom:6px;
    color:var(--text);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;}
.popular-meta{
    font-size:0.75rem;
    color:var(--muted);}
.sidebar-ad{
    background:#f8f9fa;
    padding:10px;
    text-align:center;
    border:1px solid var(--border);
    overflow:hidden;}
.ad-label{
    font-size:0.7rem;
    color:var(--muted);
    margin-bottom:8px;}
@media (max-width:1023px){
  .sidebar{
      position: relative;
      top: auto;}
}
.img-with-caption{
    margin: 40px 0;
    width: 100%;}
.img-with-caption img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);}
.detail-container .main-image-container img,
.detail-container .article-content .img-with-caption img{
  aspect-ratio: auto !important;
  height: auto !important;
  object-fit: contain !important;}
.img-caption{
    margin-top: 12px;
    font-size: 0.85rem;
    color: var(--muted);
    text-align: center;}
.columnists-section{
    grid-column: span 12;
    max-width: 900px;
    margin: 60px auto 40px auto;
    padding: 50px 0;
    background: linear-gradient(180deg, #fafafa, #fff);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);}
.columnists-title{
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
    color: var(--text);
    position: relative;
    padding: 0 40px 20px 40px;}
.columnists-title::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    border-radius: 2px;}
.columnists-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin: 0 auto;
    padding: 0 40px;}
.columnist-card{
    background: #fff;
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    display: flex;
    gap: 24px;
    align-items: flex-start;
    transition: transform 0.2s ease, box-shadow 0.2s ease;}
.columnist-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);}
.columnist-icon{
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);}
.columnist-info{
    flex: 1;}
.columnist-name{
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    color: var(--text);}
.columnist-affiliation{
    font-size: 0.95rem;
    color: var(--muted);
    margin: 0 0 14px 0;
    font-weight: 500;}
.columnist-bio{
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.7;
    margin: 0;}
.img-with-caption{
    margin: 40px 0;
    text-align: center;}
.img-with-caption img{
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);}
.img-caption{
    margin-top: 12px;
    font-size: 0.85rem;
    color: var(--muted);
    font-style: italic;
    text-align: center;}
/* ==============================
   Sponsor ads (TOP mockup style)
   Fix: make #sponsor-ads .tile thumbnails uniform
   ============================== */
#sponsor-ads .lane-track{
  display:flex;
  gap:14px;
  padding:2px;
}
@media (max-width:768px){
  #sponsor-ads .lane-track{
    gap:1px;
    padding:0;
  }
}

/* Override generic .tile rules ONLY inside sponsor-ads */
#sponsor-ads a.tile{
  flex:0 0 auto;
  width:clamp(180px,48vw,260px);
  border:none;
  border-radius:0;
  background:#fff;
  overflow:hidden;
  box-shadow: var(--shadow);
  position:static;          /* cancel global position:relative */
  aspect-ratio:auto;        /* cancel global aspect-ratio */
  transition:none;          /* cancel hover transform rules if any */
}
@media (max-width:768px){
  #sponsor-ads a.tile{
    width:calc(100vw / 3) !important;
    box-shadow:none !important;
  }
}

#sponsor-ads a.tile .thumb{
  aspect-ratio:1/1 !important;
  background:#eee;
}
#sponsor-ads a.tile .thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
#sponsor-ads a.tile .cap{
  padding:10px 12px;
}
@media (max-width:768px){
  #sponsor-ads a.tile .cap{
    padding:6px;
    font-size:0.75rem;
  }
}

/* =========================================================
   TOP: sp-lanes styles (match TOMATO_TOP_20260122.html)
   Scope to #highlight so other pages are unaffected.
   ========================================================= */

#highlight .sp-lanes{ display:grid; gap:14px; margin-top:22px; }

/* lane mechanics */
#highlight .lane{
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-y;
  background:transparent;
}

#highlight .lane-track{ display:flex; gap:14px; padding:2px; }

#highlight .tile{
  flex:0 0 auto;
  width:clamp(180px,48vw,260px);
  border:none;
  border-radius:0;
  background:#fff;
  overflow:hidden;
  box-shadow:var(--shadow);
}

#highlight .tile .thumb{ aspect-ratio:1/1 !important; background:#eee; }
#highlight .tile .thumb img{ width:100% !important; height:100% !important; object-fit:cover !important; }

#highlight .tile .cap{ padding:10px 12px; }

@media (max-width:768px){
  #highlight .tile .cap{ padding:6px; font-size:0.75rem; }
}

#highlight .animate-x{ animation: slideX 28s linear infinite; }
#highlight .animate-x.reverse{ animation-direction:reverse; animation-duration:34s; }

@media (min-width:769px){
  /* PC: horizontal lanes (2 rows) */
  #highlight .sp-lanes{ display:block; overflow:visible; min-height:auto; }
}

@media (max-width:768px){
  /* SP: horizontal lanes (3 tiles per viewport) */
  #highlight .sp-lanes{
    display:block !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    width:100vw !important;
    margin:0 !important;
    padding:0 !important;
    -webkit-overflow-scrolling:touch !important;
  }

  #highlight .lane-track{ gap:1px; padding:0; }

  #highlight .tile{
    width:calc(100vw / 3) !important;
    box-shadow:none !important;
    border:none !important;
    border-radius:0 !important;
  }

  /* make thumb strictly square */
  #highlight .tile .thumb{
    width:calc(100vw / 3) !important;
    height:calc(100vw / 3) !important;
    aspect-ratio:1/1 !important;
    max-height:calc(100vw / 3) !important;
    min-height:calc(100vw / 3) !important;
    overflow:hidden !important;
    position:relative !important;
    background:#eee !important;
  }

  #highlight .tile .thumb img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    display:block !important;
    aspect-ratio:1/1 !important;
  }

  #highlight .tile .cap{
    padding:6px !important;
    font-size:0.75rem !important;
  }

  #highlight .tile .cap .meta{
    font-size:0.7rem !important;
  }
}

/* ===============================
   Mypage page styles (moved from mypage.html)
   - Scoped to .page-mypage so other pages are unaffected
   =============================== */
.page-mypage .main-content{max-width:900px;margin:40px auto;padding:0 var(--pad)}
.page-mypage .page-header{margin-bottom:40px}
.page-mypage .page-title{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:700;color:var(--text);margin:0 0 10px}
.page-mypage .page-subtitle{font-size:1rem;color:var(--muted);margin:0}
.page-mypage .card{background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);margin-bottom:30px}
.page-mypage .card-header{padding:20px 30px;border-bottom:1px solid var(--border);background:#fafafa}
.page-mypage .card-title{font-size:1.125rem;font-weight:700;color:var(--text);margin:0;display:flex;align-items:center;gap:10px}
.page-mypage .card-icon{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}
.page-mypage .card-icon svg{width:100%;height:100%;fill:var(--accent)}
.page-mypage .card-body{padding:30px}
.page-mypage .form-group{margin-bottom:25px}
.page-mypage .form-label{display:block;font-weight:600;font-size:0.9375rem;color:var(--text);margin-bottom:8px}
.page-mypage .required{color:var(--accent);font-size:0.75rem;margin-left:5px}
.page-mypage .optional{color:var(--muted);font-size:0.75rem;margin-left:5px}
.page-mypage .form-input{width:100%;padding:12px 16px;border:2px solid var(--border);border-radius:0;font-size:0.9375rem;transition:all 0.2s;font-family:inherit}
.page-mypage .form-input:focus{outline:none;border-color:var(--accent)}
.page-mypage .form-select{width:100%;padding:12px 16px;border:2px solid var(--border);border-radius:0;font-size:0.9375rem;background:#fff;cursor:pointer;transition:all 0.2s;font-family:inherit}
.page-mypage .form-select:focus{outline:none;border-color:var(--accent)}
.page-mypage .form-textarea{width:100%;padding:12px 16px;border:2px solid var(--border);border-radius:0;font-size:0.9375rem;min-height:100px;font-family:inherit;transition:all 0.2s}
.page-mypage .form-textarea:focus{outline:none;border-color:var(--accent)}
.page-mypage .radio-group{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.page-mypage .radio-item{position:relative;border:2px solid var(--border);padding:12px 16px;cursor:pointer;transition:all 0.2s;background:#fff;display:block}
.page-mypage .radio-item:hover{border-color:var(--accent)}
.page-mypage .radio-item.selected{border-color:var(--accent);background:rgba(224,82,61,0.03)}
.page-mypage .radio-item input[type="radio"]{position:absolute;opacity:0;width:0;height:0}
.page-mypage .radio-item span{display:flex;align-items:center;gap:10px;font-size:0.9375rem;font-weight:500;color:var(--text)}
.page-mypage .radio-item span:before{content:'';width:18px;height:18px;min-width:18px;border:2px solid var(--border);border-radius:50%;transition:all 0.2s;flex-shrink:0}
.page-mypage .radio-item.selected span:before{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px #fff}
.page-mypage .checkbox-group{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.page-mypage .checkbox-item{position:relative;border:2px solid var(--border);padding:12px 16px;cursor:pointer;transition:all 0.2s;background:#fff;display:block}
.page-mypage .checkbox-item:hover{border-color:var(--accent)}
.page-mypage .checkbox-item.selected{border-color:var(--accent);background:rgba(224,82,61,0.03)}
.page-mypage .checkbox-item input[type="checkbox"]{position:absolute;opacity:0;width:0;height:0}
.page-mypage .checkbox-item span{display:flex;align-items:center;gap:10px;font-size:0.9375rem;font-weight:500;color:var(--text)}
.page-mypage .checkbox-item span:before{content:'';width:18px;height:18px;min-width:18px;border:2px solid var(--border);transition:all 0.2s;flex-shrink:0}
.page-mypage .checkbox-item.selected span:before{content:'✓';border-color:var(--accent);background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:700}
.page-mypage .crop-selection{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.page-mypage .crop-item{position:relative;border:2px solid var(--border);padding:10px 12px;cursor:pointer;transition:all 0.2s;background:#fff;display:block;text-align:center}
.page-mypage .crop-item:hover{border-color:var(--accent)}
.page-mypage .crop-item.selected{border-color:var(--accent);background:rgba(224,82,61,0.03)}
.page-mypage .crop-item input[type="checkbox"]{position:absolute;opacity:0;width:0;height:0}
.page-mypage .crop-item span{font-size:0.875rem;font-weight:500;color:var(--text)}
.page-mypage .crop-item.selected span{color:var(--accent);font-weight:600}
.page-mypage .form-actions{display:flex;gap:15px;justify-content:center;margin-top:40px;padding-top:30px;border-top:1px solid var(--border)}
.page-mypage .btn-large{padding:14px 32px;border:none;border-radius:0;font-size:1rem;font-weight:600;cursor:pointer;transition:all 0.2s;display:inline-flex;align-items:center;gap:8px;font-family:inherit}
.page-mypage .btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:var(--shadow)}
.page-mypage .btn-primary:hover{opacity:0.9}
.page-mypage .btn-secondary{background:#fff;color:var(--muted);border:2px solid var(--border)}
.page-mypage .btn-secondary:hover{background:#f8f9fa}
.page-mypage .success-message{background:#d4edda;border:1px solid #c3e6cb;color:#155724;padding:15px 20px;border-radius:0;margin-bottom:30px;display:none}
.page-mypage .success-message.show{display:block;animation:slideDown 0.3s}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:768px){
.main-content{margin:20px auto}
.page-mypage .card-header{padding:15px 20px}
.page-mypage .card-body{padding:20px}
.page-mypage .radio-group, .page-mypage .checkbox-group{grid-template-columns:1fr}
.page-mypage .crop-selection{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
.page-mypage .form-actions{flex-direction:column}
.page-mypage .btn-large{width:100%;justify-content:center}
}

/* ===============================
   Register page styles (moved from account/register.html)
   - Scoped to .page-register so other pages are unaffected
   =============================== */
.page-register .registration-container {
            max-width: 800px;
            margin: 40px auto;
            padding: 0 20px;
        }
.page-register .registration-card {
            background: white;
            border-radius: 0;
            box-shadow: var(--shadow);
            overflow: hidden;
        }
.page-register /* プログレスバー */
        .progress-header {
            background: #fafafa;
            padding: 30px;
            border-bottom: 1px solid var(--border);
        }
.page-register .progress-title {
            font-size: 28px;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 20px;
            text-align: center;
        }
.page-register .progress-bar {
            display: flex;
            justify-content: space-between;
            max-width: 500px;
            margin: 0 auto;
            position: relative;
        }
.page-register .progress-bar::before {
            content: '';
            position: absolute;
            top: 20px;
            left: 40px;
            right: 40px;
            height: 2px;
            background: var(--border);
            z-index: 0;
        }
.page-register .progress-step {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
        }
.page-register .step-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: white;
            border: 2px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            transition: all 0.3s ease;
        }
.page-register .step-circle.active {
            background: var(--accent);
            border-color: var(--accent);
            color: white;
            transform: scale(1.1);
        }
.page-register .step-circle.completed {
            background: #27ae60;
            border-color: #27ae60;
            color: white;
        }
.page-register .step-label {
            margin-top: 10px;
            font-size: 12px;
            color: #6c757d;
            font-weight: 500;
        }
.page-register .step-circle.active + .step-label, .page-register .step-circle.completed + .step-label {
            color: #2c3e50;
            font-weight: 600;
        }
.page-register /* フォームコンテンツ */
        .form-content {
            padding: 40px;
        }
.page-register .form-step {
            display: none;
            animation: fadeIn 0.5s ease;
        }
.page-register .form-step.active {
            display: block;
        }
@keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
.page-register .step-title {
            font-size: 22px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 10px;
        }
.page-register .step-subtitle {
            font-size: 14px;
            color: #6c757d;
            margin-bottom: 30px;
        }
.page-register .form-group {
            margin-bottom: 25px;
        }
.page-register .form-label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            color: #495057;
            margin-bottom: 8px;
        }
.page-register .required {
            color: #e74c3c;
            margin-left: 4px;
        }
.page-register .optional {
            color: #6c757d;
            font-size: 12px;
            font-weight: normal;
            margin-left: 8px;
        }
.page-register .form-input, .page-register .form-select, .page-register .form-textarea {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid var(--border);
            border-radius: 0;
            font-size: 15px;
            transition: all 0.3s ease;
            background: white;
        }
.page-register .form-select option {
            font-size: 16px;
            padding: 10px;
            line-height: 1.5;
        }
.page-register .form-input:focus, .page-register .form-select:focus, .page-register .form-textarea:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(224, 82, 61, 0.1);
        }
.page-register .form-textarea {
            min-height: 100px;
            resize: vertical;
        }
.page-register .form-hint {
            font-size: 12px;
            color: #6c757d;
            margin-top: 5px;
        }
.page-register /* ラジオボタン・チェックボックス */
        .radio-group, .page-register .checkbox-group {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 10px;
        }
.page-register .radio-item, .page-register .checkbox-item {
            display: flex;
            align-items: center;
            padding: 12px 20px;
            background: #f8f9fa;
            border: 2px solid var(--border);
            border-radius: 0;
            cursor: pointer;
            transition: all 0.3s ease;
        }
.page-register .radio-item:hover, .page-register .checkbox-item:hover {
            background: #fff5f5;
            border-color: var(--accent);
        }
.page-register .radio-item.selected, .page-register .checkbox-item.selected {
            background: #fff5f5;
            border-color: var(--accent);
        }
.page-register .radio-item input, .page-register .checkbox-item input {
            margin-right: 10px;
            cursor: pointer;
        }
.page-register /* 2列レイアウト */
        .form-row {
            display: flex;
            gap: 20px;
        }
.page-register .form-row .form-group {
            flex: 1;
        }
@media (max-width: 768px) {
.page-register .form-row {
                flex-direction: column;
                gap: 0;
            }

}
.page-register /* ボタン */
        .form-navigation {
            display: flex;
            justify-content: space-between;
            margin-top: 40px;
            padding-top: 30px;
            border-top: 1px solid var(--border);
        }
.page-register .btn-prev {
            border: 1px solid var(--border);
            background: #fff;
            color: #0f172a;
            box-shadow: 0 10px 24px rgba(16,24,40,.10);
        }
.page-register .btn-prev:hover {
            transform: translateY(-1px);
        }
.page-register .btn-next, .page-register .btn-submit {
            border: 0;
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            color: #fff;
            box-shadow: 0 10px 24px rgba(16,24,40,.10);
        }
.page-register .btn-next:hover, .page-register .btn-submit:hover {
            transform: translateY(-1px);
        }
.page-register .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
.page-register .form-navigation .btn[style*="display: none"] {
            display: none !important;
        }
.page-register .form-navigation .btn[style*="display: inline-flex"] {
            display: inline-flex !important;
        }
.page-register /* 利用規約 */
        .terms-box {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 0;
            margin: 20px 0;
            max-height: 300px;
            overflow-y: auto;
            font-size: 14px;
            line-height: 1.8;
            border: 1px solid var(--border);
        }
.page-register .terms-box h3 {
            margin-bottom: 15px;
            color: #2c3e50;
        }
.page-register .terms-box h4 {
            margin-top: 20px;
            margin-bottom: 10px;
            color: #495057;
        }
.page-register .terms-agree {
            display: flex;
            align-items: flex-start;
            margin-top: 20px;
            padding: 20px;
            background: #fff5f5;
            border-radius: 0;
            cursor: pointer;
            border: 2px solid var(--accent);
        }
.page-register .terms-agree input {
            margin-right: 12px;
            margin-top: 3px;
        }
.page-register /* 完了画面 */
        .completion-message {
            text-align: center;
            padding: 60px 20px;
        }
.page-register .success-icon {
            width: 80px;
            height: 80px;
            background: #27ae60;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 30px;
            font-size: 40px;
            color: white;
        }
.page-register .completion-title {
            font-size: 28px;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 15px;
        }
.page-register .completion-text {
            font-size: 16px;
            color: #6c757d;
            margin-bottom: 30px;
        }
/* レスポンシブ */
        @media (max-width: 768px) {
            .progress-bar {
                max-width: 100%;
            }
            
            .step-label {
                font-size: 10px;
            }
            
            .form-content {
                padding: 30px 20px;
            }
            
            .radio-group,
            .checkbox-group {
                flex-direction: column;
            }
        }



@media (max-width: 768px) {
.page-register .form-navigation .btn {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            min-height: 42px !important;
            padding: 0.55rem 1rem !important;
            line-height: 1.2 !important;
            border-radius: 999px !important;
            box-shadow: 0 10px 24px rgba(16,24,40,.10) !important;
            white-space: nowrap !important;
            appearance: none !important;
            -webkit-appearance: none !important;
        }
.page-register .form-navigation .btn-prev {
            font-size: 11px !important;
            letter-spacing: -0.02em !important;
            border: 1px solid var(--border) !important;
            background: #fff !important;
            color: #0f172a !important;
        }
.page-register .form-navigation .btn-next,
.page-register .form-navigation .btn-submit {
            font-size: 10px !important;
            letter-spacing: -0.03em !important;
            border: 0 !important;
            background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
            color: #fff !important;
        }
}

.page-register .page-actions{display:flex; justify-content:flex-end; gap:12px; margin:0 0 12px;}
.page-register .page-actions .btn{border-radius:999px;}

/* =====================================================
   VARIETY PAGE STYLES (from TOMATO_VARIETY_COMPLETE.html)
   ===================================================== */

/* Page Header */
  .article-container{
    max-width:1400px;
    margin:0 auto;
    padding:24px 20px 40px;
  }

  @media (max-width:768px){
    .article-container{ padding:20px 16px 32px; }
  }

  .article-header{
    text-align:center;
    margin-bottom:40px;
    padding:20px 0 16px;
    background:#fff;
  }

  .article-category{
    display:inline-block;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    color:#fff;
    padding:4px 16px;
    border-radius:20px;
    font-size:0.75rem;
    font-weight:600;
    margin-bottom:12px;
    letter-spacing:0.05em;
  }

  .article-title{
    font-size:24px;
    font-weight:700;
    line-height:1.3;
    margin:0 0 8px;
    color:var(--text);
  }

  .article-subtitle{
    font-size:clamp(0.875rem, 2vw, 1rem);
    color:var(--muted);
    font-weight:500;
    line-height:1.5;
  }

  /* Expert Section */
  .expert-section{
    background:linear-gradient(135deg, #fff5f2, #fff);
    border-left:4px solid var(--accent);
    padding:32px;
    margin:0 auto 32px;
    border-radius:8px;
    box-shadow:0 2px 12px rgba(0,0,0,0.06);
    max-width:900px;
  }

  .expert-content-wrapper{
    display:flex;
    gap:24px;
    align-items:flex-start;
  }

  .expert-photo-wrapper{
    flex-shrink:0;
  }

  .expert-photo{
    width:120px;
    height:auto;
    border-radius:8px;
    border:3px solid var(--accent);
    box-shadow:0 4px 16px rgba(224, 82, 61, 0.15);
  }

  .expert-info{
    flex:1;
  }

  .expert-name{
    font-size:1.125rem;
    font-weight:700;
    color:var(--text);
    margin-bottom:8px;
  }

  .expert-title{
    font-size:0.875rem;
    color:var(--muted);
    line-height:1.6;
    margin-bottom:16px;
  }

  .expert-intro{
    font-size:0.938rem;
    line-height:1.8;
    color:var(--text);
  }

  .expert-intro p{
    margin:0;
  }

  @media (max-width:768px){
    .expert-section{
      padding:24px 20px;
      max-width:none;
      margin-bottom:28px;
    }
    .expert-content-wrapper{
      flex-direction:row;
      gap:16px;
    }
    .expert-photo{
      width:90px;
    }
    .expert-name{
      font-size:1rem;
    }
    .expert-title{
      font-size:0.813rem;
      margin-bottom:12px;
    }
    .expert-intro{
      font-size:0.875rem;
    }
  }

  /* Points Section */
  .content-section{
    margin-bottom:40px;
  }

  .section-title{
    font-size:clamp(1.25rem, 3vw, 1.5rem);
    font-weight:700;
    margin:0 0 20px;
    color:var(--text);
    padding-bottom:10px;
    border-bottom:3px solid var(--accent);
  }

  .points-grid{
    display:grid;
    gap:24px;
    margin-bottom:32px;
  }
  
  /* PC版: 4列グリッド */
  @media (min-width:768px){
    .points-grid{
      grid-template-columns:repeat(4, 1fr);
      gap:20px;
    }

    .points-grid.points-grid-two-columns,
    .points-grid[data-visible-cards="2"]{
      grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .points-grid.points-grid-one-column,
    .points-grid[data-visible-cards="1"]{
      grid-template-columns:minmax(0, 1fr);
    }
  }

  .point-card{
    background:#fff;
    border:2px solid var(--border);
    border-radius:10px;
    padding:24px;
    transition:all 0.3s;
  }

  .point-card:hover{
    border-color:var(--accent);
    box-shadow:0 6px 20px rgba(224, 82, 61, 0.1);
    transform:translateY(-2px);
  }

  .point-title{
    font-size:1.2rem;
    font-weight:700;
    color:var(--accent);
    margin:0 0 12px;
    display:flex;
    align-items:center;
    gap:10px;
  }

  .point-title::before{
    content:'●';
    font-size:0.875rem;
  }

  .point-text{
    font-size:0.938rem;
    line-height:1.8;
    color:var(--text);
  }

  .point-text p{
    margin:0 0 12px;
  }

  .point-text p:last-child{
    margin-bottom:0;
  }
  
  /* SP版: アコーディオン表示 */
  @media (max-width:767px){
    .points-grid{
      gap:8px;
    }
    
    .point-card{
      padding:0;
      border-radius:8px;
      overflow:hidden;
    }
    
    .point-card:hover{
      transform:none;
      box-shadow:none;
    }
    
    .point-title{
      font-size:1rem;
      margin:0;
      padding:16px 20px;
      background:#fff;
      cursor:pointer;
      position:relative;
      user-select:none;
    }
    
    .point-title::after{
      content:'▼';
      position:absolute;
      right:16px;
      font-size:0.75rem;
      color:var(--muted);
      transition:transform 0.3s ease;
    }
    
    .point-card.open .point-title::after{
      transform:rotate(180deg);
    }
    
    .point-text{
      max-height:0;
      overflow:hidden;
      transition:max-height 0.3s ease, padding 0.3s ease;
      padding:0 20px;
      font-size:0.875rem;
      line-height:1.7;
      background:#fafafa;
    }
    
    .point-card.open .point-text{
      max-height:600px;
      padding:16px 20px;
    }
    
    .point-text p{
      margin:0 0 10px;
    }
  }

  /* Variety Tabs */
  .variety-tabs{
    margin-bottom:32px;
  }
  
  .tab-list{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    gap:12px;
    border-bottom:2px solid var(--border);
    flex-wrap:wrap;
    justify-content:center;
  }
  
  .tab-button{
    padding:12px 32px;
    background:transparent;
    border:none;
    border-bottom:3px solid transparent;
    font-size:1.125rem;
    font-weight:600;
    color:var(--muted);
    cursor:pointer;
    transition:all 0.2s;
    position:relative;
    bottom:-2px;
  }
  
  .tab-button.active{
    color:var(--accent);
    border-bottom-color:var(--accent);
  }

  /* Search & Filter Section */
  .search-section{
    background:#fff;
    padding:2rem 0;
    border-bottom:1px solid var(--border);
    position:sticky;
    top:73px;
    z-index:80;
    box-shadow:var(--shadow);
  }
  
  @media (min-width:1180px){ .search-section{ top:137px; } }
  
  .search-controls{
    display:flex;
    flex-direction:column;
    gap:1.25rem;
    max-width:1400px;
    margin:0 auto;
    padding:0 20px;
  }
  
  /* モバイル用フィルタートグルボタン */
  .filter-toggle{
    display:none;
  }
  
  @media (max-width:768px){
    .filter-toggle{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:0.5rem;
      padding:0.75rem 1.25rem;
      background:var(--accent);
      color:#fff;
      border:none;
      border-radius:var(--radius);
      font-size:0.95rem;
      font-weight:600;
      cursor:pointer;
      transition:all 0.2s;
    }
    
    .filter-toggle:active{
      transform:scale(0.98);
    }
    
    .filter-toggle-icon{
      transition:transform 0.3s;
    }
    
    .filter-toggle.active .filter-toggle-icon{
      transform:rotate(180deg);
    }
  }
  
  .search-bar{
    position:relative;
  }
  
  .search-input{
    width:100%;
    padding:0.9rem 1rem 0.9rem 3rem;
    border:2px solid var(--border);
    border-radius:var(--radius-lg);
    font-size:1rem;
    transition:all 0.2s;
    background:#fff;
  }
  
  .search-input:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-light);
  }
  
  .search-icon{
    position:absolute;
    left:1rem;
    top:50%;
    transform:translateY(-50%);
    color:var(--muted);
    font-size:1.25rem;
    pointer-events:none;
  }
  
  .filter-row{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:1rem;
  }
  
  @media (max-width:768px){
    .filter-row{ 
      grid-template-columns:1fr;
      display:none;
      animation:slideDown 0.3s ease;
    }
    
    .filter-row.active{
      display:grid;
    }
    
    @keyframes slideDown{
      from{
        opacity:0;
        transform:translateY(-10px);
      }
      to{
        opacity:1;
        transform:translateY(0);
      }
    }
  }
  
  @media (min-width:769px){
    .filter-row{
      display:grid !important;
    }
  }
  
  .filter-group{
    display:flex;
    flex-direction:column;
    gap:0.5rem;
  }
  
  .filter-label{
    font-size:0.875rem;
    font-weight:600;
    color:var(--text-secondary);
    display:flex;
    align-items:center;
    gap:0.4rem;
  }
  
  .filter-select{
    padding:0.75rem 1rem;
    border:2px solid var(--border);
    border-radius:var(--radius);
    font-size:0.95rem;
    background:#fff;
    cursor:pointer;
    transition:all 0.2s;
  }
  
  .filter-select:focus{
    outline:none;
    border-color:var(--accent);
  }
  
  .filter-pills{
    display:flex;
    flex-wrap:wrap;
    gap:0.5rem;
    margin-top:0.5rem;
  }
  
  .filter-pills .pill{
    display:inline-flex;
    align-items:center;
    gap:0.4rem;
    padding:0.4rem 0.9rem;
    background:var(--accent-light);
    border:1px solid var(--accent);
    border-radius:999px;
    font-size:0.813rem;
    font-weight:500;
    color:var(--accent);
  }
  
  .pill-remove{
    cursor:pointer;
    font-weight:700;
    opacity:0.7;
  }
  .pill-remove:hover{ opacity:1; }
  
  .clear-filters{
    padding:0.5rem 1rem;
    background:transparent;
    border:1px solid var(--border);
    border-radius:var(--radius);
    color:var(--muted);
    font-size:0.875rem;
    cursor:pointer;
    transition:all 0.2s;
  }
  .clear-filters:hover{
    background:var(--bg-secondary);
    border-color:var(--text-secondary);
    color:var(--text);
  }

  /* Results Header */
  .results-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1.5rem 0 1rem;
    flex-wrap:wrap;
    gap:1rem;
  }
  
  .results-count{
    font-size:0.95rem;
    color:var(--muted);
  }
  
  .results-count strong{
    color:var(--accent);
    font-weight:700;
  }
  
  .view-toggle{
    display:flex;
    gap:0.5rem;
    background:var(--bg-secondary);
    padding:0.25rem;
    border-radius:var(--radius);
  }
  
  .view-btn{
    padding:0.5rem 1rem;
    background:transparent;
    border:none;
    border-radius:var(--radius-sm);
    cursor:pointer;
    font-size:0.875rem;
    font-weight:500;
    color:var(--muted);
    transition:all 0.2s;
  }
  
  .view-btn.active{
    background:#fff;
    color:var(--text);
    box-shadow:var(--shadow);
  }

  /* ===== テーブル表示スタイル ===== */
  
  /* 凡例バー */
  .table-legend{
    display:flex;
    flex-wrap:wrap;
    gap:12px 20px;
    padding:10px 16px;
    background:#f8fafc;
    border:1px solid var(--border);
    border-radius:var(--radius);
    margin-bottom:16px;
    font-size:0.75rem;
    color:var(--muted);
    align-items:center;
  }
  
  .legend-title{
    font-weight:600;
    color:var(--text);
  }
  
  .legend-item{
    display:flex;
    align-items:center;
    gap:4px;
  }
  
  .legend-symbol{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    font-size:0.875rem;
    font-weight:600;
  }
  
  .legend-symbol.high{ color:#16a34a; }
  .legend-symbol.medium{ color:#d97706; }
  .legend-symbol.filled{ color:#4f46e5; }
  
  /* カテゴリセクション */
  .category-section{
    margin-bottom:24px;
  }
  
  .category-header{
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    color:#fff;
    padding:10px 16px;
    font-size:0.938rem;
    font-weight:700;
    border-radius:var(--radius) var(--radius) 0 0;
    display:flex;
    align-items:center;
    gap:8px;
  }
  
  .category-header.midi{ background:linear-gradient(135deg, #f59e0b, #fbbf24); }
  .category-header.mini{ background:linear-gradient(135deg, #3b82f6, #60a5fa); }
  .category-header.rootstock{ background:linear-gradient(135deg, #10b981, #34d399); }
  
  .category-count{
    background:rgba(255,255,255,0.25);
    padding:2px 10px;
    border-radius:999px;
    font-size:0.75rem;
  }
  
  /* テーブルラッパー - 横スクロール対応 */
  .variety-table-wrapper{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border:1px solid var(--border);
    border-top:none;
    border-radius:0 0 var(--radius) var(--radius);
  }
  
  .variety-table{
    width:100%;
    border-collapse:collapse;
    font-size:0.688rem;
    background:#fff;
    min-width:1200px;
  }
  
  .variety-table thead th{
    background:#f1f5f9;
    color:var(--text);
    font-weight:600;
    padding:6px 4px;
    text-align:center;
    border:1px solid var(--border);
    border-top:none;
    white-space:nowrap;
    font-size:0.625rem;
    line-height:1.25;
  }
  
  /* 品種名列 */
  .variety-table thead th.name-col{
    text-align:left;
    padding-left:8px;
    min-width:90px;
    width:90px;
    position:sticky;
    left:0;
    z-index:3;
    background:#f1f5f9;
    box-shadow:2px 0 4px rgba(0,0,0,0.08);
  }
  
  .variety-table tbody td{
    padding:4px 3px;
    text-align:center;
    border:1px solid var(--border);
    vertical-align:middle;
    font-size:0.75rem;
  }
  
  /* 品種名セル - 画像背景付き */
  .variety-table tbody td.name-cell{
    text-align:left;
    padding:0;
    font-weight:600;
    color:#fff;
    background:#666;
    min-width:90px;
    width:90px;
    height:60px;
    position:sticky;
    left:0;
    z-index:2;
    overflow:hidden;
    box-shadow:2px 0 4px rgba(0,0,0,0.08);
  }
  
  /* name-cellの内部配置用 */
  td.name-cell{
    position:relative;
  }
  
  .name-cell-inner{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    width:100%;
    height:auto;
    padding:6px 8px;
    background:linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.15) 70%, transparent 100%);
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    z-index:2;
  }
  
  .name-cell-inner span{
    font-size:0.688rem;
    line-height:1.2;
    text-shadow:0 1px 2px rgba(0,0,0,0.5);
  }
  
  /* 品種名リンク */
  .variety-name-link{
    color:#fff;
    text-decoration:none;
    transition:all 0.2s ease;
    cursor:pointer;
  }
  
  .variety-name-link:hover{
    color:var(--accent-2);
    text-decoration:underline;
  }
  
  /* 画像なしセルのリンク */
  .name-cell-inner[style*="transparent"] .variety-name-link,
  td.name-cell[style*="background:#f1f5f9"] .variety-name-link{
    color:var(--accent);
    text-shadow:none;
  }
  
  td.name-cell[style*="background:#f1f5f9"] .variety-name-link:hover{
    color:var(--accent-2);
  }
  
  .name-cell-bg{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    z-index:1;
  }
  
  .variety-table tbody tr:hover td{
    background:#fff5f2;
  }
  
  .variety-table tbody tr:hover td.name-cell{
    background:#666;
  }
  
  /* クリック可能な行 */
  .variety-table tbody tr.clickable-row{
    cursor:pointer;
    transition:all 0.15s ease;
  }
  
  .variety-table tbody tr.clickable-row:hover td{
    background:#ffe8e2;
  }
  
  .variety-table tbody tr.clickable-row:hover td.name-cell{
    background:#555;
  }
  
  .variety-table tbody tr.clickable-row:active td{
    background:#ffd4cc;
  }
  
  /* セル内シンボル */
  .cell-high{ color:#16a34a; font-weight:600; }
  .cell-medium{ color:#d97706; font-weight:600; }
  .cell-filled{ color:#4f46e5; font-weight:600; }
  .cell-empty{ color:#cbd5e1; }
  .cell-tomv{ font-size:0.625rem; color:var(--text-secondary); white-space:nowrap; }
  .cell-tylcv{ font-size:0.563rem; color:var(--text-secondary); white-space:nowrap; }
  
  /* 特徴列 */
  .cell-features{
    text-align:left !important;
    padding:4px 6px !important;
    font-size:0.625rem;
    line-height:1.35;
    color:var(--text-secondary);
    min-width:200px;
    max-width:none;
    white-space:normal;
  }
  
  /* 会社列 */
  .cell-company{
    font-size:0.625rem;
    color:var(--muted);
    white-space:nowrap;
    min-width:70px;
    text-align:center !important;
    vertical-align:middle !important;
  }
  
  /* === 2行レイアウト用スタイル === */
  .variety-table-2row{
    min-width:900px;
  }
  
  .variety-table-2row .name-cell{
    width:140px;
    min-width:140px;
    height:auto;
    position:relative;
  }
  
  .variety-table-2row .name-cell[rowspan="2"]{
    vertical-align:middle;
  }
  
  .variety-table-2row .name-cell-bg{
    width:100%;
    height:100%;
    min-height:90px;
  }
  
  .variety-table-2row .name-cell-inner{
    min-height:auto;
  }
  
  /* 上段の行（耐性情報） */
  .variety-row-top td{
    border-bottom:none !important;
    padding:6px 4px !important;
  }
  
  /* 下段の行（特徴と会社） */
  .variety-row-bottom td{
    border-top:none !important;
    padding:6px 4px !important;
  }
  
  .variety-row-bottom .cell-features{
    background:linear-gradient(135deg, #fff5f2 0%, #ffe8e2 100%);
    padding:8px 10px !important;
    font-size:0.7rem;
    line-height:1.4;
    color:#c24d3a;
    font-weight:500;
    border-radius:0;
  }
  
  .variety-row-bottom .cell-company{
    background:#fafafa;
    font-size:0.7rem;
    font-weight:600;
    color:var(--text-secondary);
    vertical-align:middle !important;
    text-align:center !important;
  }
  
  /* ホバー時の調整 */
  .variety-table-2row tbody tr.variety-row-top:hover td,
  .variety-table-2row tbody tr.variety-row-top:hover + tr.variety-row-bottom td{
    background:#fff5f2;
  }
  
  .variety-table-2row tbody tr.variety-row-top:hover + tr.variety-row-bottom .cell-features{
    background:linear-gradient(135deg, #ffe8e2 0%, #ffd4cc 100%);
  }
  
  .variety-table-2row tbody tr.variety-row-bottom:hover td{
    background:#fff5f2;
  }
  
  .variety-table-2row tbody tr.variety-row-bottom:hover .cell-features{
    background:linear-gradient(135deg, #ffe8e2 0%, #ffd4cc 100%);
  }
  
  /* 品種間の区切り線 */
  .variety-row-bottom td{
    border-bottom:2px solid var(--border) !important;
  }
  
  /* 注釈 */
  .table-notes{
    margin-top:16px;
    padding:12px 16px;
    background:#f8fafc;
    border:1px solid var(--border);
    border-radius:var(--radius);
    font-size:0.625rem;
    color:var(--muted);
    line-height:1.5;
  }
  
  .table-notes p{
    margin:0 0 3px;
  }
  
  .table-notes p:last-child{
    margin-bottom:0;
  }
  
  /* SP版調整 */
  @media (max-width:768px){
    .table-legend{
      gap:6px 10px;
      padding:8px 10px;
      font-size:0.625rem;
    }
    
    .category-header{
      font-size:0.813rem;
      padding:8px 12px;
    }
    
    .variety-table{
      font-size:0.625rem;
      min-width:1000px;
    }
    
    .variety-table thead th{
      font-size:0.563rem;
      padding:4px 2px;
    }
    
    .variety-table thead th.name-col{
      min-width:70px;
      width:70px;
      position:sticky;
      left:0;
      z-index:3;
      background:#f1f5f9;
      box-shadow:2px 0 4px rgba(0,0,0,0.08);
    }
    
    .variety-table tbody td{
      font-size:0.688rem;
      padding:3px 2px;
    }
    
    .variety-table tbody td.name-cell{
      min-width:70px;
      width:70px;
      height:50px;
      position:sticky;
      left:0;
      z-index:2;
      box-shadow:2px 0 4px rgba(0,0,0,0.08);
    }
    
    .name-cell-inner span{
      font-size:0.563rem;
    }
    
    .cell-features{
      font-size:0.563rem;
      min-width:150px;
      max-width:200px;
    }
    
    .cell-company{
      font-size:0.563rem;
      min-width:55px;
    }
    
    .cell-tomv{
      font-size:0.563rem;
    }
    
    .cell-tylcv{
      font-size:0.5rem;
    }
  }

  /* Variety Grid */
  .variety-grid{
    display:block;
    padding:1rem 0 3rem;
  }

  /* Cards are rendered inside #varietyGridInner (so the legend doesn't become a grid item) */
  .variety-grid.grid-view #varietyGridInner{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
    gap:1.5rem;
  }

  /* In list-view, #varietyGridInner should NOT be a grid (tables render inside) */
  .variety-grid.list-view #varietyGridInner{
    display:block;
  }

  @media (max-width:768px){
    .variety-grid.grid-view #varietyGridInner{ grid-template-columns:1fr; }
  }

/* Variety List View - テーブル表示用 */
  .variety-grid.list-view{
    display:block;
    padding:0;
  }

  /* カード表示時は非表示にする旧リストスタイル */
  .variety-grid.list-view #varietyGridInner > .variety-card{
    display:none;
  }

  .variety-grid.list-view .card-image-hero{
    width:180px;
    min-width:180px;
    height:auto;
    min-height:160px;
  }

  .variety-grid.list-view .card-header{
    margin-top:0;
    padding:1rem;
    background:#fff;
    border-bottom:none;
  }

  .variety-grid.list-view .card-title{
    font-size:1.1rem;
    text-shadow:none;
  }

  .variety-grid.list-view .card-company{
    text-shadow:none;
  }

  .variety-grid.list-view .card-summary{
    padding:0.75rem 1rem;
    background:#fff;
    flex:1;
  }

  .variety-grid.list-view .card-description{
    text-shadow:none;
    margin-bottom:0.75rem;
  }

  .variety-grid.list-view .card-details{
    border-top:1px solid var(--border-light);
  }

  /* リスト表示用レイアウト */
  .variety-grid.list-view .variety-card .list-content{
    display:flex;
    flex-direction:column;
    flex:1;
  }

  .variety-grid.list-view .variety-card .list-main{
    display:flex;
    flex-direction:row;
    flex:1;
    min-height:160px;
  }

  .variety-grid.list-view .variety-card .list-info{
    display:flex;
    flex-direction:column;
    padding:1rem 1.25rem;
    flex:1;
    min-width:0;
  }

  .variety-grid.list-view .variety-card .list-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:0.75rem;
  }

  .variety-grid.list-view .variety-card .list-title-area{
    flex:1;
    min-width:0;
  }

  .variety-grid.list-view .variety-card .list-title{
    font-size:1.25rem;
    font-weight:700;
    color:var(--text);
    margin-bottom:0.35rem;
    line-height:1.3;
  }

  .variety-grid.list-view .variety-card .list-company{
    font-size:0.875rem;
    color:var(--muted);
    display:flex;
    align-items:center;
    gap:0.4rem;
  }

  .variety-grid.list-view .variety-card .list-category{
    padding:0.25rem 0.75rem;
    background:var(--accent);
    color:#fff;
    border-radius:999px;
    font-size:0.7rem;
    font-weight:600;
    white-space:nowrap;
    flex-shrink:0;
  }

  .variety-grid.list-view .variety-card .list-category.midi{ background:var(--warning); }
  .variety-grid.list-view .variety-card .list-category.mini{ background:var(--info); }
  .variety-grid.list-view .variety-card .list-category.rootstock{ background:var(--success); }

  .variety-grid.list-view .variety-card .list-description{
    font-size:0.938rem;
    line-height:1.6;
    color:var(--text-secondary);
    margin-bottom:0.75rem;
    flex:1;
  }

  .variety-grid.list-view .variety-card .list-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-top:auto;
  }

  .variety-grid.list-view .variety-card .list-resistances{
    display:flex;
    flex-wrap:wrap;
    gap:0.4rem;
    flex:1;
  }

  .variety-grid.list-view .variety-card .list-expand-btn{
    padding:0.5rem 1rem;
    background:var(--bg-secondary);
    border:none;
    border-radius:var(--radius);
    color:var(--accent);
    font-weight:600;
    font-size:0.813rem;
    cursor:pointer;
    transition:all 0.2s;
    display:flex;
    align-items:center;
    gap:0.4rem;
    white-space:nowrap;
    flex-shrink:0;
  }

  .variety-grid.list-view .variety-card .list-expand-btn:hover{
    background:var(--accent-light);
  }

  .variety-grid.list-view .variety-card .list-image{
    width:160px;
    min-width:160px;
    height:auto;
    overflow:hidden;
    background:linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    flex-shrink:0;
  }

  .variety-grid.list-view .variety-card .list-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }

  .variety-grid.list-view .variety-card .list-details{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.4s ease;
    border-top:1px solid var(--border-light);
    background:var(--bg-secondary);
  }

  .variety-grid.list-view .variety-card.expanded .list-details{
    max-height:2000px;
  }

  .variety-grid.list-view .variety-card .list-details-content{
    padding:1.5rem;
  }

  /* リスト表示レスポンシブ */
  @media (max-width:768px){
    .variety-grid.list-view .variety-card{
      flex-direction:column;
    }
    
    .variety-grid.list-view .variety-card .list-main{
      flex-direction:column;
    }
    
    .variety-grid.list-view .variety-card .list-image{
      width:100%;
      height:200px;
    }
    
    .variety-grid.list-view .variety-card .list-header{
      flex-direction:column;
      gap:0.5rem;
    }
    
    .variety-grid.list-view .variety-card .list-footer{
      flex-direction:column;
      align-items:stretch;
    }
    
    .variety-grid.list-view .variety-card .list-expand-btn{
      justify-content:center;
    }
  }
  
  .variety-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    overflow:hidden;
    transition:all 0.3s;
    cursor:pointer;
  }
  
  .variety-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg);
    border-color:var(--accent);
  }
  
  .variety-card.expanded{
    border-color:var(--accent);
    box-shadow:var(--shadow-lg);
  }
  
  /* Card Image Hero */
  .card-image-hero{
    position:relative;
    width:100%;
    height:420px;
    overflow:hidden;
    background:linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  }
  
  @media (max-width:768px){
    .card-image-hero{
      height:380px;
    }
  }
  
  .card-image-hero img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }
  
  .card-image-hero .card-category{
    position:absolute;
    top:12px;
    left:12px;
    z-index:2;
  }
  
  /* Card Header - 画像の上に重ねて透過グラデーション背景 */
  .variety-card .card-header{
    margin-top:-280px;
    padding:1.25rem 1.25rem 0;
    position:relative;
    z-index:2;
    background:transparent;
  }
  
  /* 画像がない場合のcard-header */
  .variety-card.no-image .card-header{
    margin-top:0;
    padding:1.25rem;
    background:linear-gradient(135deg, var(--bg-secondary) 0%, #fff 100%);
    border-bottom:1px solid var(--border-light);
  }
  
  .card-category{
    display:inline-block;
    padding:0.25rem 0.75rem;
    background:var(--accent);
    color:#fff;
    border-radius:999px;
    font-size:0.75rem;
    font-weight:600;
    margin-bottom:0.75rem;
    letter-spacing:0.03em;
  }
  
  .card-category.midi{ background:var(--warning); }
  .card-category.mini{ background:var(--info); }
  .card-category.rootstock{ background:var(--success); }
  
  .card-title{
    font-size:1.4rem;
    font-weight:700;
    margin-bottom:0.4rem;
    color:var(--text);
    text-shadow:
      0 0 20px rgba(255,255,255,1),
      0 0 40px rgba(255,255,255,1),
      0 0 60px rgba(255,255,255,0.9),
      0 2px 10px rgba(255,255,255,1),
      0 4px 20px rgba(255,255,255,0.8);
  }
  
  .card-company{
    font-size:0.875rem;
    color:#1f2937;
    display:flex;
    align-items:center;
    gap:0.4rem;
    text-shadow:
      0 0 15px rgba(255,255,255,1),
      0 0 30px rgba(255,255,255,1),
      0 0 45px rgba(255,255,255,0.9),
      0 2px 8px rgba(255,255,255,1);
  }
  
  .company-icon{
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--accent-light);
  }
  
  .card-summary{
    padding:3rem 1.25rem 1.25rem;
    position:relative;
    z-index:2;
    background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0.5) 40%, rgba(255,255,255,0.75) 60%, rgba(255,255,255,0.9) 80%, rgba(255,255,255,1) 100%);
  }
  
  /* 画像がない場合のcard-summary */
  .variety-card.no-image .card-summary{
    padding:1.25rem;
    background:transparent;
  }
  
  .resistance-row{
    display:flex;
    flex-wrap:wrap;
    gap:0.5rem;
    margin-bottom:1rem;
  }
  
  .resistance-badge{
    display:inline-flex;
    align-items:center;
    gap:0.35rem;
    padding:0.4rem 0.8rem;
    background:var(--bg-secondary);
    border-radius:var(--radius);
    font-size:0.813rem;
    font-weight:500;
    box-shadow:0 1px 3px rgba(0,0,0,0.1);
  }
  
  .resistance-badge.high{
    background:#d1fae5;
    color:#065f46;
  }
  
  .resistance-badge.medium{
    background:#fef3c7;
    color:#92400e;
  }
  
  .resistance-icon{
    font-size:1rem;
  }
  
  .card-description{
    font-size:0.938rem;
    line-height:1.6;
    color:var(--text-secondary);
    margin-bottom:1rem;
    text-shadow:0 1px 3px rgba(255,255,255,0.8);
  }
  
  .expand-btn{
    width:100%;
    padding:0.7rem;
    background:var(--bg-secondary);
    border:none;
    border-radius:var(--radius);
    color:var(--accent);
    font-weight:600;
    font-size:0.875rem;
    cursor:pointer;
    transition:all 0.2s;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    box-shadow:0 1px 3px rgba(0,0,0,0.08);
  }
  
  .expand-btn:hover{
    background:var(--accent-light);
  }
  
  .expand-icon{
    transition:transform 0.3s;
  }
  
  .variety-card.expanded .expand-icon{
    transform:rotate(180deg);
  }
  
  .card-details{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.4s ease;
  }
  
  .variety-card.expanded .card-details{
    max-height:2000px;
  }
  
  .details-content{
    padding:1.5rem;
  }
  
  .details-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:1rem;
    margin-bottom:1.5rem;
  }
  
  .detail-item{
    padding:1rem;
    background:var(--bg-secondary);
    border-radius:var(--radius);
  }
  
  .detail-label{
    font-size:0.75rem;
    color:var(--muted);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.05em;
    margin-bottom:0.5rem;
  }
  
  .detail-value{
    font-size:1rem;
    font-weight:600;
    color:var(--text);
  }
  
  .characteristics{
    background:var(--accent-light);
    padding:1.25rem;
    border-radius:var(--radius);
    border-left:4px solid var(--accent);
  }
  
  .characteristics h4{
    font-size:1rem;
    margin-bottom:0.75rem;
    color:var(--text);
  }
  
  .characteristics p{
    font-size:0.938rem;
    line-height:1.7;
    color:var(--text-secondary);
    margin:0;
  }
  
  .action-buttons{
    display:flex;
    gap:0.75rem;
    margin-top:1.25rem;
  }
  
  .action-btn{
    flex:1;
    padding:0.75rem;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:#fff;
    font-weight:500;
    font-size:0.875rem;
    cursor:pointer;
    transition:all 0.2s;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.4rem;
  }
  
  .action-btn:hover{
    background:var(--bg-secondary);
    border-color:var(--accent);
    color:var(--accent);
  }
  
  .action-btn.primary{
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    color:#fff;
    border:none;
  }
  
  .action-btn.primary:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
  }
  
  /* ボタンアイコン */
  .btn-icon{
    width:18px;
    height:18px;
    stroke:currentColor;
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  
  /* 比較パネル */
  .compare-panel{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:#fff;
    border-top:2px solid var(--accent);
    box-shadow:0 -4px 20px rgba(0,0,0,0.15);
    transform:translateY(100%);
    transition:transform 0.3s ease;
    z-index:100;
    max-height:60vh;
    overflow-y:auto;
  }
  
  .compare-panel.active{
    transform:translateY(0);
  }
  
  .compare-header{
    padding:1rem 1.5rem;
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:var(--bg-secondary);
  }
  
  .compare-title{
    font-size:1.1rem;
    font-weight:700;
    color:var(--text);
    display:flex;
    align-items:center;
    gap:0.5rem;
  }
  
  .compare-count{
    background:var(--accent);
    color:#fff;
    padding:0.25rem 0.6rem;
    border-radius:999px;
    font-size:0.813rem;
    font-weight:600;
  }
  
  .compare-actions{
    display:flex;
    gap:0.75rem;
  }
  
  .compare-btn{
    padding:0.5rem 1rem;
    border-radius:var(--radius);
    font-size:0.875rem;
    font-weight:600;
    cursor:pointer;
    transition:all 0.2s;
    border:none;
  }
  
  .compare-btn.clear{
    background:transparent;
    color:var(--muted);
  }
  
  .compare-btn.clear:hover{
    color:var(--accent);
  }
  
  .compare-btn.view{
    background:var(--accent);
    color:#fff;
  }
  
  .compare-btn.view:hover{
    background:var(--accent-2);
  }
  
  .compare-content{
    padding:1.5rem;
  }
  
  .compare-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:1rem;
  }
  
  @media (max-width:768px){
    .compare-grid{
      grid-template-columns:1fr;
    }
  }
  
  .compare-item{
    background:var(--bg-secondary);
    border-radius:var(--radius);
    padding:1rem;
    position:relative;
  }
  
  .compare-item-remove{
    position:absolute;
    top:0.5rem;
    right:0.5rem;
    width:24px;
    height:24px;
    border-radius:50%;
    background:rgba(224,82,61,0.1);
    color:var(--accent);
    border:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.1rem;
    transition:all 0.2s;
  }
  
  .compare-item-remove:hover{
    background:var(--accent);
    color:#fff;
  }
  
  .compare-item-name{
    font-weight:700;
    font-size:1rem;
    margin-bottom:0.5rem;
    color:var(--text);
  }
  
  .compare-item-company{
    font-size:0.813rem;
    color:var(--muted);
    margin-bottom:0.75rem;
  }
  
  .compare-item-category{
    display:inline-block;
    padding:0.25rem 0.6rem;
    background:var(--accent);
    color:#fff;
    border-radius:999px;
    font-size:0.75rem;
    font-weight:600;
    margin-bottom:0.75rem;
  }

  /* Empty State */
  .empty-state{
    text-align:center;
    padding:4rem 2rem;
  }
  
  .empty-icon{
    font-size:4rem;
    margin-bottom:1rem;
    opacity:0.3;
  }
  
  .empty-title{
    font-size:1.5rem;
    font-weight:700;
    margin-bottom:0.5rem;
    color:var(--text);
  }
  
  .empty-text{
    font-size:1rem;
    color:var(--muted);
    margin-bottom:1.5rem;
  }

  /* Footer */

/* Footer */
  footer{
    background:#fff;
    margin-top:4rem;
  }
  
  .footer-wrapper{
    max-width:1400px;
    margin:0 auto;
    padding:60px 20px 40px;
  }
  
  .footer-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.5fr;
    gap:40px;
    margin-bottom:40px;
  }

  .footer-brand {
    display:flex;
    flex-direction:column;
  }
  
  .footer-logo img{
    height:60px;
    width:auto;
  }

  .social-icon {
    width:36px;
    height:36px;
    border:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--muted);
    transition:all 0.2s;
  }

  .social-icon:hover {
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
  }

  .footer-heading {
    font-size:0.75rem;
    font-weight:700;
    color:var(--text);
    margin:0 0 15px;
    text-transform:uppercase;
    letter-spacing:0.1em;
  }

  .footer-links {
    list-style:none;
    padding:0;
    margin:0;
  }

  .footer-links li {
    margin-bottom:10px;
  }

  .footer-links a {
    color:var(--muted);
    font-size:0.875rem;
    transition:color 0.2s;
  }

  .footer-links a:hover {
    color:var(--accent);
  }

  .newsletter-box {
    background:#f8f9fa;
    padding:25px;
  }

  .newsletter-form {
    display:flex;
    gap:8px;
  }

  .newsletter-input {
    flex:1;
    padding:8px 12px;
    border:1px solid var(--border);
    background:#fff;
    font-size:0.875rem;
  }

  .newsletter-btn {
    padding:8px 20px;
    background:var(--accent);
    color:#fff;
    border:none;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;
  }

  .footer-bottom {
    padding-top:30px;
    border-top:1px solid var(--border);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
  }

  .footer-bottom-links {
    display:flex;
    gap:25px;
  }

  .footer-bottom-links a {
    color:var(--muted);
    font-size:0.813rem;
  }

  /* モバイル最適化 */
  @media (max-width:768px) {
    .footer-wrapper {
      padding:40px 15px 30px !important;
    }
    
    .footer-grid {
      display:flex !important;
      flex-direction:column;
      gap:0;
      margin-bottom:0;
    }
    
    .footer-brand {
      padding-bottom:30px;
      border-bottom:1px solid var(--border);
      margin-bottom:20px;
    }
    
    /* アコーディオンメニュー */
    .footer-column {
      border-bottom:1px solid var(--border);
      padding-bottom:0;
      margin-bottom:0;
    }
    
    .footer-heading {
      margin:0;
      padding:15px 0;
      display:flex;
      justify-content:space-between;
      align-items:center;
      cursor:pointer;
      font-size:0.875rem;
      text-transform:none;
      letter-spacing:normal;
      position:relative;
    }
    
    .footer-heading::after {
      content:'+';
      font-size:1.25rem;
      color:var(--muted);
      transition:transform 0.3s;
    }
    
    .footer-column.active .footer-heading::after {
      transform:rotate(45deg);
    }
    
    .footer-links {
      max-height:0;
      overflow:hidden;
      transition:max-height 0.3s ease-out;
    }
    
    .footer-column.active .footer-links {
      max-height:300px;
      padding-bottom:15px;
    }
    
    .newsletter-box {
      background:transparent;
      padding:30px 0;
      margin-bottom:20px;
    }
    
    .newsletter-form {
      flex-direction:column;
      gap:12px;
    }
    
    .newsletter-input {
      padding:12px;
      font-size:1rem;
    }
    
    .newsletter-btn {
      padding:12px;
      font-size:1rem;
      width:100%;
    }
    
    .footer-bottom {
      padding-top:20px;
      border-top:none;
      flex-direction:column;
      text-align:center;
    }
    
    .footer-bottom-links {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px 4px;
      width:100%;
      text-align:center;
    }
    
    /* 区切り文字を非表示 */
    .footer-bottom-links span {
      display:none;
    }
    
    .footer-bottom-links a {
      padding:6px 4px;
      font-size:0.65rem;
      white-space:nowrap;
      line-height:1.2;
    }
    
    /* さらに小さい画面用 */
    @media (max-width:360px) {
      .footer-bottom-links a {
        font-size:0.6rem;
        padding:5px 2px;
      }
    }
    
    .copyright {
      font-size:0.75rem !important;
    }
  }

  /* Loading State */
  .loading{
    text-align:center;
    padding:3rem;
    color:var(--muted);
  }
  
  .spinner{
    width:40px;
    height:40px;
    border:4px solid var(--border);
    border-top-color:var(--accent);
    border-radius:50%;
    animation:spin 1s linear infinite;
    margin:0 auto 1rem;
  }
  
  @keyframes spin{
    to{ transform:rotate(360deg); }
  }


/* =====================================================
   WEB SEMINAR styles (moved from TOMATO_WEBSEMINAR_20260123.html)
   NOTE: Only styles not already present in this file were added (to avoid duplicates).
   ===================================================== */

*,*::before,*::after{ box-sizing:border-box }


html,body{ margin:0; background:var(--bg); color:var(--text);
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI",sans-serif; }


.kw-track{
    display:flex; gap:12px; align-items:center; white-space:nowrap;
    will-change:transform;
    animation:kw-marquee 24s linear infinite;
  }


.kw-bar:hover .kw-track{ animation-play-state:paused; }


@keyframes kw-marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }


/* YouTube コンテンツ */

  .live-section{
    max-width:1400px; margin:0 auto 40px; padding:0 20px; display: none;
  }


.section-header{
    margin-bottom:20px; padding-bottom:15px; border-bottom:1px solid var(--border);
  }


.section-title{
    font-size:1.75rem; font-weight:700; margin-bottom:8px;
    display:flex; align-items:center; gap:10px;
  }


.live-badge{
    background:linear-gradient(135deg,#ef4444,#dc2626);
    color:#fff; padding:4px 12px; border-radius:999px;
    font-size:0.75rem; font-weight:600;
    display:inline-flex; align-items:center; gap:6px;
    animation:pulse 2s infinite;
  }


@keyframes pulse{
    0%, 100%{ opacity:1; }
    50%{ opacity:0.7; }
  }


.section-desc{
    font-size:0.875rem; color:var(--muted); margin:0;
  }


.live-player{
    position:relative; width:100%; 
    padding-bottom:56.25%;
    background:#000; border-radius:12px; overflow:hidden;
    box-shadow:var(--shadow);
  }


.live-player iframe{
    position:absolute; top:0; left:0; width:100%; height:100%;
  }


/* 配信予定表示スタイル */
  .live-status-wrapper{
    background:#fff;
    border-radius:16px;
    box-shadow:var(--shadow);
    overflow:hidden;
  }


.status-banner{
    display:flex;
    align-items:center;
    gap:16px;
    padding:24px;
    background:linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border-bottom:1px solid var(--border);
  }


.status-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border-radius:12px;
    color:var(--accent);
    box-shadow:0 4px 12px rgba(224,82,61,0.15);
    flex-shrink:0;
  }


.status-text{
    display:flex;
    flex-direction:column;
    gap:4px;
  }


.status-label{
    font-size:1.125rem;
    font-weight:700;
    color:var(--text);
  }


.status-subtitle{
    font-size:0.875rem;
    color:var(--muted);
  }


.countdown-section{
    padding:32px 24px;
    text-align:center;
    background:#fff;
  }


.countdown-title{
    font-size:1rem;
    font-weight:600;
    color:var(--muted);
    margin:0 0 20px;
    letter-spacing:0.05em;
  }


.countdown-timer{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
  }


.time-unit{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    min-width:80px;
  }


.time-unit .number{
    font-size:3rem;
    font-weight:700;
    color:var(--accent);
    line-height:1;
    font-variant-numeric:tabular-nums;
  }


.time-unit .label{
    font-size:0.875rem;
    color:var(--muted);
    font-weight:500;
  }


.time-separator{
    font-size:2rem;
    font-weight:700;
    color:var(--muted);
    margin:0 4px;
    padding-bottom:20px;
  }


.event-info{
    padding:32px 24px;
    border-bottom:1px solid var(--border);
  }


.event-title{
    font-size:1.75rem;
    font-weight:700;
    color:var(--text);
    margin:0 0 16px;
    line-height:1.3;
  }


.event-meta{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:16px;
  }


.meta-item{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:0.9375rem;
    color:var(--muted);
  }


.meta-item svg{
    color:var(--accent);
    flex-shrink:0;
  }


.event-description{
    font-size:0.9375rem;
    color:#4b5563;
    line-height:1.7;
    margin:0 0 24px;
  }


.notify-button{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:14px 28px;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    color:#fff;
    border:none;
    border-radius:999px;
    font-size:1rem;
    font-weight:600;
    cursor:pointer;
    transition:all 0.3s;
    box-shadow:0 4px 12px rgba(224,82,61,0.3);
  }


.notify-button:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(224,82,61,0.4);
  }


.notify-button:active{
    transform:translateY(0);
  }


.video-placeholder{
    position:relative;
    width:100%;
    padding-bottom:56.25%;
    background:linear-gradient(135deg, #1f2937 0%, #111827 100%);
    overflow:hidden;
  }


.placeholder-content{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:16px;
    z-index:2;
  }


.play-icon-wrapper{
    position:relative;
    animation:float 3s ease-in-out infinite;
  }


@keyframes float{
    0%, 100%{ transform:translateY(0); }
    50%{ transform:translateY(-10px); }
  }


.play-icon{
    color:rgba(255,255,255,0.9);
    filter:drop-shadow(0 4px 12px rgba(0,0,0,0.3));
  }


.placeholder-text{
    font-size:1.125rem;
    font-weight:600;
    color:rgba(255,255,255,0.9);
    margin:0;
    letter-spacing:0.05em;
  }


.placeholder-gradient{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:radial-gradient(circle at center, rgba(224,82,61,0.15) 0%, transparent 70%);
    z-index:1;
  }


/* ページヘッダー */
  .article-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 20px 40px;
  }


  .article-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 20px 0 16px;
    background: #fff;
  }


.article-category {
    display: inline-block;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
  }


.article-subtitle {
    font-size: clamp(0.875rem, 2vw, 1rem);
    color: var(--muted);
    font-weight: 500;
    line-height: 1.5;
  }


/* 過去のセミナーセクション */
  .past-seminars-section{
    max-width:1400px; 
    margin:0 auto 60px; 
    padding:0 20px;
  }


.seminar-item{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:24px;
    margin-bottom:40px;
    background:#fff;
    border-radius:0;
    box-shadow:var(--shadow);
  }


.seminar-video{
    position:relative;
    background:#000;
    cursor:pointer;
    overflow:hidden;
    border-radius:0;
  }


.seminar-video:hover .play-overlay{
    opacity:1;
    transform:translate(-50%, -50%) scale(1.1);
  }


.seminar-video-wrapper{
    position:relative;
    width:100%;
    padding-bottom:56.25%;
    overflow:hidden;
    border-radius:0;
    text-align: center;
  }


.seminar-video-wrapper img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:0;
  }


.play-overlay{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    opacity:0.85;
    transition:all 0.3s;
    z-index:10;
  }


.seminar-article{
    padding:24px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:#f9fafb;
  }


.seminar-article-link{
    display:block;
    transition:all 0.3s;
    cursor:pointer;
  }


.seminar-article-link:hover{
    opacity:0.8;
  }


.article-thumbnail{
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:8px;
    margin-bottom:16px;
    background:#e5e7eb;
  }


.article-thumbnail img{
    width:100%;
    height:100%;
    object-fit:cover;
  }


.article-badge{
    display:inline-block;
    background:var(--accent);
    color:#fff;
    font-size:0.75rem;
    font-weight:600;
    padding:4px 12px;
    border-radius:999px;
    margin-bottom:12px;
  }


.seminar-card .article-title{
    font-size:1.125rem;
    font-weight:700;
    line-height:1.4;
    margin:0 0 12px;
    color:var(--text);
  }


.article-excerpt{
    font-size:0.875rem;
    color:var(--muted);
    line-height:1.6;
    margin:0 0 16px;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }


.article-read-more{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--accent);
    font-size:0.875rem;
    font-weight:600;
  }


.article-read-more svg{
    width:16px;
    height:16px;
    transition:transform 0.3s;
  }


.seminar-article-link:hover .article-read-more svg{
    transform:translateX(4px);
  }


/* =====================================================
   WEBセミナー（SP版）: <div class="seminar-item"> layout
   - Match TOMATO_WEBSEMINAR_20260123.html mockup
   ===================================================== */
@media (max-width: 768px){
  .past-seminars-section{
    padding: 0;
  }

  .seminar-item{
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 20px;
    box-shadow: none;
    border-bottom: 1px solid var(--border);
  }

  .seminar-video,
  .seminar-video-wrapper,
  .seminar-video-wrapper img{
    border-radius: 0;
  }

  .play-icon{
    width: 64px;
    height: 64px;
  }

  .seminar-article{
    padding: 16px;
    background: #fff;
  }

  .article-thumbnail{
    border-radius: 0;
    margin-bottom: 12px;
  }

  .article-excerpt{
    -webkit-line-clamp: 4;
  }
}



.ad{
    display:flex; align-items:center; justify-content:center;
    background:#f8fafc; border:1px dashed #cbd5e1; color:#475569;
    position:relative; cursor:default;
  }


.ad:hover{ transform:none; }


/* モーダル */
  .modal-overlay {
    display:none;
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,0.8);
    z-index:9999;
    align-items:center;
    justify-content:center;
    padding:20px;
  }


.modal-overlay.active {
    display:flex;
  }


.modal-content {
    position:relative;
    width:100%;
    max-width:1000px;
    background:#000;
    border-radius:12px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }


.video-player-wrapper {
    position:relative;
    width:100%;
    padding-bottom:56.25%; /* 16:9 アスペクト比 */
    background:#000;
  }


.modal-content iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
  }

.page-web-seminar .modal-content{
    position:relative;
  }

.page-web-seminar .video-player-wrapper.is-paywalled iframe{
    pointer-events:none;
  }

.page-web-seminar #videoModal #paywall-gate{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:72px;
    z-index:2;
    margin:0;
    max-width:none;
    padding:32px 20px;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(17,24,39,0.88);
    border:none;
    text-align:center;
  }

.page-web-seminar #videoModal #paywall-gate .paywall-inner{
    width:min(560px, 100%);
    padding:32px 24px;
    background:#fff;
    border:1px solid var(--border, #e5e7eb);
  }

.page-web-seminar #videoModal .modal-footer.is-paywalled{
    position:relative;
    z-index:3;
  }


.modal-footer {
    background:#1f2937;
    padding:16px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }


.youtube-open-btn {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 20px;
    background:#e0523d;
    color:#fff;
    border:none;
    border-radius:999px;
    font-size:0.9375rem;
    font-weight:600;
    cursor:pointer;
    transition:all 0.3s;
    white-space:nowrap;
  }


.youtube-open-btn:hover {
    background:#c94534;
    transform:translateY(-1px);
  }


.modal-hint {
    font-size:0.8125rem;
    color:#9ca3af;
    margin:0;
    line-height:1.5;
  }


.modal-close {
    position:absolute;
    top:-40px;
    right:0;
    background:#fff;
    border:none;
    width:36px;
    height:36px;
    border-radius:50%;
    cursor:pointer;
    font-size:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10000;
  }


.footer-logo{ display:flex; align-items:center; gap:12px; }


.footer-column h4, .footer-heading{ font-size:0.75rem; font-weight:700; color:var(--text); margin:0 0 15px; text-transform:uppercase; letter-spacing:0.1em; }


.footer-bottom-links a:hover{ color:var(--accent); }


.mobile-menu-buttons .btn {
    font-size: 1rem !important;
    padding: 12px 16px !important;
    text-align: center;
    justify-content: center;
    border-radius: 999px !important;
  }


@media (max-width:768px){
  .status-icon svg{ width:20px; height:20px; }

  .footer-column h4 { margin:0; padding:15px 0; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:0.875rem; text-transform:none; letter-spacing:normal; position:relative; }

  .footer-column h4::after { content:'+'; font-size:1.25rem; color:var(--muted); transition:transform 0.3s; }

  .footer-column.active h4::after { transform:rotate(45deg); }

}


/* ===============================
   Pest-control page styles (from TOMATO_PESTDISEASE_20260122.html)
   - Scoped to .page-pest-control so other pages are unaffected
   =============================== */

body.page-pest-control{
  /* Match mockup variables (page-local) */
  --radius:16px;
  --shadow:0 20px 50px rgba(16,24,40,.10);
  --danger:#dc2626;
  --warning:#f59e0b;
  --success:#10b981;

  /* This project uses fixed header + body padding-top globally.
     Mockup uses sticky header, so reset on this page only. */
  padding-top:0 !important;
}
body.page-pest-control.has-kw{
  padding-top:0 !important;
}

/* Header / Keyword bar behave like mockup */
body.page-pest-control header{
  position:sticky !important;
  top:0 !important;
  z-index:60 !important;
  width:auto !important;
}
body.page-pest-control .kw-bar{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  z-index:90 !important;
  height:auto !important;
  min-height:48px;
}

/* Main wrapper: match mockup (max-width centered, no extra vertical padding) */
body.page-pest-control .main-wrapper{
  width:auto !important;
  max-width:1400px !important;
  margin:0 auto !important;
  padding:0 !important;
}
@media (max-width:768px){
  body.page-pest-control .main-wrapper{
    max-width:100% !important;
  }
}

/* Article header block (override global article/header styles on this page only) */
body.page-pest-control .article-container{
  max-width:1400px;
  margin:0 auto;
  padding:24px 20px 40px;
}
@media (max-width:768px){
  body.page-pest-control .article-container{ padding:20px 16px 32px; }
}
body.page-pest-control .article-header{
  text-align:center;
  margin:0 0 40px;
  padding:20px 0 16px;
  border-bottom:2px solid var(--border);
  background:#fff;
  max-width:none;
}
body.page-pest-control .article-category{
  display:inline-block;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  padding:4px 16px;
  border-radius:20px;
  font-size:0.75rem;
  font-weight:600;
  margin-bottom:12px;
  letter-spacing:0.05em;
}
body.page-pest-control .article-title{
  font-size:24px;
  font-weight:700;
  line-height:1.3;
  margin:0 0 8px;
  color:var(--text);
}
body.page-pest-control .article-subtitle{
  font-size:clamp(0.875rem, 2vw, 1rem);
  color:var(--muted);
  font-weight:500;
  line-height:1.5;
  max-width: 980px;
  margin: 0 auto;
}

/* Search section */
body.page-pest-control .search-section{
  background:#fafafa;
  padding:40px;
  border-radius:16px;
  margin-bottom:60px;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}
body.page-pest-control .search-title{ font-size:1.75rem; font-weight:700; margin-bottom:12px; }
body.page-pest-control .search-subtitle{ font-size:1rem; color:var(--muted); margin-bottom:32px; }
body.page-pest-control .search-tabs{
  display:flex;
  gap:12px;
  margin-bottom:32px;
  border-bottom:2px solid var(--border);
}
body.page-pest-control .search-tab{
  padding:12px 24px;
  background:transparent;
  border:none;
  border-bottom:3px solid transparent;
  font-size:1rem;
  font-weight:600;
  color:var(--muted);
  cursor:pointer;
  transition:all 0.2s;
  position:relative;
  bottom:-2px;
}
body.page-pest-control .search-tab.active{
  color:var(--accent);
  border-bottom-color:var(--accent);
}
body.page-pest-control .tab-content{ display:none; }
body.page-pest-control .tab-content.active{ display:block; }
body.page-pest-control .search-input-group{
  display:flex;
  gap:12px;
  margin-bottom:24px;
}
body.page-pest-control .search-input{
  flex:1;
  padding:14px;
  border:2px solid var(--border);
  border-radius:8px;
  font-size:1rem;
  transition:all 0.2s;
  background:#fff;
}
body.page-pest-control .search-input:focus{ outline:none; border-color:var(--accent); }
body.page-pest-control .search-btn{
  padding:14px 32px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  border:none;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  transition:transform 0.2s;
}
body.page-pest-control .search-btn:hover{ transform:translateY(-2px); }
@media (max-width:768px){
  body.page-pest-control .search-section{ padding:24px; }
  body.page-pest-control .search-tabs{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  body.page-pest-control .search-input-group{ flex-direction:column; }
}

/* Quick access */
body.page-pest-control .quick-access{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:12px;
  margin-bottom:60px;
}
body.page-pest-control .quick-btn{
  padding:16px;
  background:#fff;
  border:2px solid var(--border);
  border-radius:8px;
  text-align:center;
  cursor:pointer;
  transition:all 0.2s;
  font-size:0.938rem;
  font-weight:600;
}
body.page-pest-control .quick-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
  transform:translateY(-2px);
}

/* Results titles */
body.page-pest-control .results-section{ margin-bottom:60px; }
body.page-pest-control .section-title{
  font-size:1.75rem;
  font-weight:700;
  margin-bottom:32px;
  padding-bottom:16px;
  border-bottom:3px solid var(--accent);
}

/* Pest/Disease cards */
body.page-pest-control .pest-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));
  gap:24px;
}
body.page-pest-control .pest-card{
  background:#fff;
  border:2px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  transition:all 0.3s;
}
body.page-pest-control .pest-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  border-color:var(--accent);
}
body.page-pest-control .pest-card-header{
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px;
  background:linear-gradient(135deg, #fef3f2, #fff);
  border-bottom:2px solid var(--border);
}
body.page-pest-control .pest-icon{
  width:60px;
  height:72px;
  border-radius:50%;
  background:linear-gradient(135deg, #e8f5e9, #c8e6c9);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  flex-shrink:0;
  border:2px solid #a5d6a7;
}
body.page-pest-control .pest-info{ flex:1; }
body.page-pest-control .pest-category{
  display:inline-block;
  padding:4px 12px;
  background:#f1f5f9;
  border-radius:12px;
  font-size:0.75rem;
  font-weight:600;
}
body.page-pest-control .pest-card-body{ padding:20px; }
body.page-pest-control .pest-severity{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
  padding:12px;
  background:#fef3f2;
  border-radius:8px;
  border-left:4px solid var(--danger);
}
body.page-pest-control .severity-label{ font-size:0.875rem; font-weight:600; color:var(--danger); }
body.page-pest-control .pest-description{
  font-size:0.938rem;
  line-height:1.6;
  color:var(--muted);
  margin-bottom:20px;
}
body.page-pest-control .pest-symptoms{ margin-bottom:20px; }
body.page-pest-control .symptoms-title{
  font-size:0.938rem;
  font-weight:700;
  margin-bottom:8px;
  color:var(--text);
}
body.page-pest-control .symptoms-list{ list-style:none; padding:0; margin:0; }
body.page-pest-control .symptoms-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:8px;
  font-size:0.875rem;
  color:var(--text);
  line-height:1.5;
}
body.page-pest-control .symptoms-list li::before{
  content:'';
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
  margin-top:6px;
}
body.page-pest-control .pest-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:20px;
}
body.page-pest-control .action-tag{
  padding:8px 16px;
  background:#f0fdf4;
  border-radius:999px;
  font-size:0.813rem;
  font-weight:600;
  color:#059669;
}
body.page-pest-control .detail-btn{
  display:block;
  width:100%;
  padding:14px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  text-align:center;
  border-radius:8px;
  font-weight:600;
  transition:transform 0.2s;
}
body.page-pest-control .detail-btn:hover{ transform:translateY(-1px); }

@media (max-width:768px){
  body.page-pest-control .pest-grid{ grid-template-columns:1fr; }
}

/* Table section (simple diagnosis) */
body.page-pest-control .diagnosis-card{
  background:#fff;
  border:2px solid var(--border);
  border-radius:16px;
  padding:32px;
}
@media (max-width:768px){
  body.page-pest-control .diagnosis-card{ padding:20px 16px; }
}
body.page-pest-control .diagnosis-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:12px;
  border:2px solid var(--border);
}
body.page-pest-control .diagnosis-table thead th{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  padding:16px;
  font-weight:700;
  text-align:left;
  font-size:0.875rem;
}
body.page-pest-control .diagnosis-table tbody td{
  padding:16px;
  border-top:1px solid var(--border);
  font-size:0.875rem;
  color:var(--text);
  vertical-align:top;
}
body.page-pest-control .importance-high{ color:var(--danger); font-weight:700; }
body.page-pest-control .importance-mid{ color:var(--warning); font-weight:700; }
body.page-pest-control .importance-low{ color:var(--success); font-weight:700; }


/* ===============================
   Pest Control page - table & detection styles (from TOMATO_PESTDISEASE_20260122.html)
   Scoped to .page-pest-control to avoid affecting other pages
   =============================== */
.page-pest-control .reference-table-section{
    background:#fafafa;
    padding:40px;
    border-radius:16px;
    margin-bottom:60px;
  }.page-pest-control .table-container{
    background:#fff;
    border-radius:12px;
    overflow-x:auto;
    border:2px solid var(--border);
  }.page-pest-control table{
    width:100%;
    border-collapse:collapse;
  }.page-pest-control th{
    background:linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
    color:#fff;
    padding:16px;
    text-align:left;
    font-weight:600;
    font-size:0.938rem;
  }.page-pest-control .pest-table th, .page-pest-control .disease-table th, .page-pest-control .detection-table th{
    background:linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  }.page-pest-control td{
    padding:14px 16px;
    border-bottom:1px solid var(--border);
    font-size:0.875rem;
  }.page-pest-control tr:last-child td{ border-bottom:none }.page-pest-control tr:hover{ background:#fef3f2 }.page-pest-control .severity-high{ color:var(--danger); font-weight:600 }.page-pest-control .severity-medium{ color:var(--warning); font-weight:600 }.page-pest-control .severity-low{ color:var(--success); font-weight:600 }.page-pest-control .icon-inline{
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    color: var(--accent);
  }.page-pest-control .section-title .icon-inline{
    margin-bottom: -4px;
  }.page-pest-control .hero-title .icon-inline{
    margin-bottom: -6px;
    color: var(--accent);
  }.page-pest-control .tab-icon svg{
    display: block;
  }.page-pest-control .detection-tab.active .tab-icon svg{
    stroke: currentColor;
  }.page-pest-control .pest-icon svg{
    color: #2e7d32;
  }.page-pest-control .detailed-detection-section{
    margin-bottom: 80px;
  }.page-pest-control .section-description{
    font-size: 1rem;
    line-height: 1.8;
    color: var(--muted);
    margin-bottom: 40px;
    text-align: center;
  }.page-pest-control .detection-tabs{
    display: flex;
    justify-content: center;
    border-radius: 999px !important;
    gap: 16px;
    margin-bottom: 40px;
  }.page-pest-control .detection-tab{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 12px;
    font-size: 1.125rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
  }.page-pest-control .detection-tab:hover{
    border-color: var(--accent);
    transform: translateY(-2px);
  }.page-pest-control .detection-tab.active{
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    border-color: transparent;
    box-shadow: var(--shadow);
  }.page-pest-control .tab-icon{
    font-size: 1.5rem;
  }.page-pest-control .detection-content{
    display: none;
  }.page-pest-control .detection-content.active{
    display: block;
  }.page-pest-control .detection-note{
    background: #fffbf0;
    border-left: 4px solid var(--warning);
    padding: 16px 20px;
    margin-bottom: 24px;
    border-radius: 8px;
  }.page-pest-control .detection-note p{
    margin: 0;
    font-size: 0.875rem;
    color: #856404;
    line-height: 1.6;
  }.page-pest-control .detection-note p + p{
    margin-top: 8px;
  }.page-pest-control .detailed-table{
    margin-top: 24px;
  }.page-pest-control .detailed-table table{
    font-size: 0.875rem;
  }.page-pest-control .detailed-table th, .page-pest-control .detailed-table td{
    padding: 20px 16px;
    vertical-align: top;
    line-height: 1.7;
  }.page-pest-control .pest-table .col-pest-name{ 
    width: 15%; 
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    font-weight: 700;
  }.page-pest-control .pest-table .col-characteristics{ width: 28%; }.page-pest-control .pest-table .col-trap{ width: 28%; background: #fafafa; }.page-pest-control .pest-table .col-chemicals{ width: 29%; }.page-pest-control .disease-table .col-disease-name{ 
    width: 12%; 
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    font-weight: 700;
  }.page-pest-control .disease-table .col-leaf{ width: 28%; }.page-pest-control .disease-table .col-fruit{ width: 18%; background: #fafafa; }.page-pest-control .disease-table .col-other{ width: 12%; background: #fafafa; }.page-pest-control .disease-table .col-chemicals{ width: 30%; }.page-pest-control .pest-name, .page-pest-control .disease-name{
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
  }.page-pest-control .pest-table .pest-name{
    color: #1565c0;
  }.page-pest-control .disease-table .disease-name{
    color: #1565c0;
  }.page-pest-control .characteristics, .page-pest-control .trap-info, .page-pest-control .leaf-symptom, .page-pest-control .fruit-symptom, .page-pest-control .other-info{
    font-size: 0.875rem;
    line-height: 1.8;
  }.page-pest-control .chemicals{
    font-size: 0.813rem;
    line-height: 1.7;
    color: #555;
  }
  
  
  @media (max-width: 768px){.page-pest-control .detection-tabs{
      flex-direction: column;
      gap: 12px;
    }.page-pest-control .detection-tab{
      width: 100%;
      justify-content: center;
    border-radius: 999px !important;
      padding: 14px 24px;
      font-size: 1rem;
    }.page-pest-control .tab-icon{
      font-size: 1.25rem;
    }.page-pest-control .section-description{
      font-size: 0.938rem;
      text-align: left;
    }.page-pest-control .detailed-table table{
      font-size: 0.75rem;
    }.page-pest-control .detailed-table th, .page-pest-control .detailed-table td{
      padding: 12px 8px;
    }.page-pest-control .pest-name, .page-pest-control .disease-name{
      font-size: 0.875rem;
    }.page-pest-control .characteristics, .page-pest-control .trap-info, .page-pest-control .leaf-symptom, .page-pest-control .fruit-symptom, .page-pest-control .other-info{
      font-size: 0.75rem;
    }.page-pest-control .chemicals{
      font-size: 0.688rem;
    }
  }
  
  
  @media print{.page-pest-control .detection-tabs{
      display: none;
    }.page-pest-control .detection-content{
      display: block !important;
      page-break-before: always;
    }.page-pest-control .detection-content:first-child{
      page-break-before: auto;
    }.page-pest-control .detailed-table table{
      font-size: 10pt;
    }.page-pest-control .pest-table, .page-pest-control .disease-table{
      page-break-inside: avoid;
    }.page-pest-control .pest-table tbody tr, .page-pest-control .disease-table tbody tr{
      page-break-inside: avoid;
    }
  }
  .page-pest-control .footer-brand{ display:flex; flex-direction:column }.page-pest-control .social-icon{
    width:36px; height:36px; border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    color:var(--muted); transition:all 0.2s;
  }.page-pest-control .social-icon:hover{ background:var(--accent); color:#fff; border-color:var(--accent) }.page-pest-control .footer-heading{ font-size:0.75rem; font-weight:700; margin:0 0 15px; text-transform:uppercase; letter-spacing:0.1em }.page-pest-control .footer-links{ list-style:none; padding:0; margin:0 }.page-pest-control .footer-links li{ margin-bottom:10px }.page-pest-control .footer-links a{ color:var(--muted); font-size:0.875rem; transition:color 0.2s }.page-pest-control .footer-links a:hover{ color:var(--accent) }.page-pest-control .newsletter-box{ background:#f8f9fa; padding:25px }.page-pest-control .newsletter-form{ display:flex; gap:8px }.page-pest-control .newsletter-input{ flex:1; padding:8px 12px; border:1px solid var(--border); background:#fff; font-size:0.875rem }.page-pest-control .newsletter-btn{ padding:8px 20px; background:var(--accent); color:#fff; border:none; font-weight:600; cursor:pointer; white-space:nowrap }.page-pest-control .footer-bottom{ padding-top:30px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; gap:20px }.page-pest-control .footer-bottom-links{ display:flex; gap:25px }.page-pest-control .footer-bottom-links a{ color:var(--muted); font-size:0.813rem }
  
  @media (max-width:768px){.page-pest-control .footer-wrapper{ padding:40px 15px 30px !important }.page-pest-control .footer-grid{ display:flex !important; flex-direction:column; gap:0; margin-bottom:0 }.page-pest-control .footer-brand{ padding-bottom:30px; border-bottom:1px solid var(--border); margin-bottom:20px }.page-pest-control .footer-column{ border-bottom:1px solid var(--border); padding-bottom:0; margin-bottom:0 }.page-pest-control .footer-heading{ margin:0; padding:15px 0; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:0.875rem; text-transform:none; letter-spacing:normal }.page-pest-control .footer-heading::after{ content:'+'; font-size:1.25rem; color:var(--muted); transition:transform 0.3s }.page-pest-control .footer-column.active .footer-heading::after{ transform:rotate(45deg) }.page-pest-control .footer-links{ max-height:0; overflow:hidden; transition:max-height 0.3s ease-out }.page-pest-control .footer-column.active .footer-links{ max-height:300px; padding-bottom:15px }.page-pest-control .newsletter-box{ background:transparent; padding:30px 0; margin-bottom:20px }.page-pest-control .newsletter-form{ flex-direction:column; gap:12px }.page-pest-control .newsletter-input{ padding:12px; font-size:1rem }.page-pest-control .newsletter-btn{ padding:12px; font-size:1rem; width:100% }.page-pest-control .footer-bottom{ padding-top:20px; border-top:none; flex-direction:column; text-align:center }.page-pest-control .footer-bottom-links{ display:grid; grid-template-columns:1fr 1fr; gap:8px 4px; width:100%; text-align:center }.page-pest-control .footer-bottom-links span{ display:none }.page-pest-control .footer-bottom-links a{ padding:6px 4px; font-size:0.65rem; white-space:nowrap; line-height:1.2 }.page-pest-control .copyright{ font-size:0.75rem !important }
  }.page-pest-control .mobile-menu{
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: #fff;
    z-index: 1100;
    transition: right 0.3s ease;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
  }.page-pest-control .mobile-menu.active{
    right: 0;
  }.page-pest-control .mobile-menu-header{
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }.page-pest-control .mobile-menu-close{
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
  }.page-pest-control .mobile-menu-content{
    padding: 20px;
    overflow-y: auto;
    height: calc(100vh - 80px);
  }.page-pest-control .mobile-menu-content ul{
    list-style: none;
    padding: 0;
    margin: 0;
  }.page-pest-control .mobile-menu-content li{
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
  }.page-pest-control .mobile-menu-content a{
    display: block;
    color: #0f172a;
    text-decoration: none;
  }.page-pest-control .mobile-menu-buttons{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }.page-pest-control .mobile-menu-buttons .btn{
    font-size: 1rem !important;
    padding: 12px 16px !important;
    text-align: center;
    justify-content: center;
    border-radius: 999px !important;
  }.page-pest-control .mobile-menu-overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1050;
    display: none;
  }.page-pest-control .mobile-menu-overlay.active{
    display: block;
  }.page-pest-control .detailed-detection-section{
    margin-bottom: 80px;
  }.page-pest-control .section-description{
    font-size: 1rem;
    line-height: 1.8;
    color: var(--muted);
    margin-bottom: 40px;
    text-align: center;
  }.page-pest-control .detection-tabs{
    display: flex;
    justify-content: center;
    border-radius: 999px !important;
    gap: 16px;
    margin-bottom: 40px;
  }.page-pest-control .detection-tab{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 12px;
    font-size: 1.125rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
  }.page-pest-control .detection-tab:hover{
    border-color: var(--accent);
    transform: translateY(-2px);
  }.page-pest-control .detection-tab.active{
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    border-color: transparent;
    box-shadow: var(--shadow);
  }.page-pest-control .tab-icon{
    font-size: 1.5rem;
  }.page-pest-control .detection-content{
    display: none;
  }.page-pest-control .detection-content.active{
    display: block;
  }.page-pest-control .detection-note{
    background: #fffbf0;
    border-left: 4px solid var(--warning);
    padding: 16px 20px;
    margin-bottom: 24px;
    border-radius: 8px;
  }.page-pest-control .detection-note p{
    margin: 0;
    font-size: 0.875rem;
    color: #856404;
    line-height: 1.6;
  }.page-pest-control .detection-note p + p{
    margin-top: 8px;
  }.page-pest-control .detailed-table{
    margin-top: 24px;
  }.page-pest-control .detailed-table table{
    font-size: 0.875rem;
  }.page-pest-control .detailed-table th, .page-pest-control .detailed-table td{
    padding: 20px 16px;
    vertical-align: top;
    line-height: 1.7;
  }.page-pest-control .pest-table .col-pest-name{ 
    width: 15%; 
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    font-weight: 700;
  }.page-pest-control .pest-table .col-characteristics{ width: 28%; }.page-pest-control .pest-table .col-trap{ width: 28%; background: #fafafa; }.page-pest-control .pest-table .col-chemicals{ width: 29%; }.page-pest-control .disease-table .col-disease-name{ 
    width: 12%; 
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    font-weight: 700;
  }.page-pest-control .disease-table .col-leaf{ width: 28%; }.page-pest-control .disease-table .col-fruit{ width: 18%; background: #fafafa; }.page-pest-control .disease-table .col-other{ width: 12%; background: #fafafa; }.page-pest-control .disease-table .col-chemicals{ width: 30%; }.page-pest-control .pest-name, .page-pest-control .disease-name{
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
  }.page-pest-control .pest-table .pest-name{
    color: #1565c0;
  }.page-pest-control .disease-table .disease-name{
    color: #1565c0;
  }.page-pest-control .characteristics, .page-pest-control .trap-info, .page-pest-control .leaf-symptom, .page-pest-control .fruit-symptom, .page-pest-control .other-info{
    font-size: 0.875rem;
    line-height: 1.8;
  }.page-pest-control .chemicals{
    font-size: 0.813rem;
    line-height: 1.7;
    color: #555;
  }
  
  
  @media (max-width: 768px){.page-pest-control .detection-tabs{
      flex-direction: column;
      gap: 12px;
    }.page-pest-control .detection-tab{
      width: 100%;
      justify-content: center;
    border-radius: 999px !important;
      padding: 14px 24px;
      font-size: 1rem;
    }.page-pest-control .tab-icon{
      font-size: 1.25rem;
    }.page-pest-control .section-description{
      font-size: 0.938rem;
      text-align: left;
    }.page-pest-control .detailed-table table{
      font-size: 0.75rem;
    }.page-pest-control .detailed-table th, .page-pest-control .detailed-table td{
      padding: 12px 8px;
    }.page-pest-control .pest-name, .page-pest-control .disease-name{
      font-size: 0.875rem;
    }.page-pest-control .characteristics, .page-pest-control .trap-info, .page-pest-control .leaf-symptom, .page-pest-control .fruit-symptom, .page-pest-control .other-info{
      font-size: 0.75rem;
    }.page-pest-control .chemicals{
      font-size: 0.688rem;
    }
  }
  
  
  @media print{.page-pest-control .detection-tabs{
      display: none;
    }.page-pest-control .detection-content{
      display: block !important;
      page-break-before: always;
    }.page-pest-control .detection-content:first-child{
      page-break-before: auto;
    }.page-pest-control .detailed-table table{
      font-size: 10pt;
    }.page-pest-control .pest-table, .page-pest-control .disease-table{
      page-break-inside: avoid;
    }.page-pest-control .pest-table tbody tr, .page-pest-control .disease-table tbody tr{
      page-break-inside: avoid;
    }
  }
  .page-pest-control .footer-brand{ display:flex; flex-direction:column }.page-pest-control .social-icon{
    width:36px; height:36px; border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    color:var(--muted); transition:all 0.2s;
  }.page-pest-control .social-icon:hover{ background:var(--accent); color:#fff; border-color:var(--accent) }.page-pest-control .footer-heading{ font-size:0.75rem; font-weight:700; margin:0 0 15px; text-transform:uppercase; letter-spacing:0.1em }.page-pest-control .footer-links{ list-style:none; padding:0; margin:0 }.page-pest-control .footer-links li{ margin-bottom:10px }.page-pest-control .footer-links a{ color:var(--muted); font-size:0.875rem; transition:color 0.2s }.page-pest-control .footer-links a:hover{ color:var(--accent) }.page-pest-control .newsletter-box{ background:#f8f9fa; padding:25px }.page-pest-control .newsletter-form{ display:flex; gap:8px }.page-pest-control .newsletter-input{ flex:1; padding:8px 12px; border:1px solid var(--border); background:#fff; font-size:0.875rem }.page-pest-control .newsletter-btn{ padding:8px 20px; background:var(--accent); color:#fff; border:none; font-weight:600; cursor:pointer; white-space:nowrap }.page-pest-control .footer-bottom{ padding-top:30px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; gap:20px }.page-pest-control .footer-bottom-links{ display:flex; gap:25px }.page-pest-control .footer-bottom-links a{ color:var(--muted); font-size:0.813rem }
  
  @media (max-width:768px){.page-pest-control .footer-wrapper{ padding:40px 15px 30px !important }.page-pest-control .footer-grid{ display:flex !important; flex-direction:column; gap:0; margin-bottom:0 }.page-pest-control .footer-brand{ padding-bottom:30px; border-bottom:1px solid var(--border); margin-bottom:20px }.page-pest-control .footer-column{ border-bottom:1px solid var(--border); padding-bottom:0; margin-bottom:0 }.page-pest-control .footer-heading{ margin:0; padding:15px 0; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:0.875rem; text-transform:none; letter-spacing:normal }.page-pest-control .footer-heading::after{ content:'+'; font-size:1.25rem; color:var(--muted); transition:transform 0.3s }.page-pest-control .footer-column.active .footer-heading::after{ transform:rotate(45deg) }.page-pest-control .footer-links{ max-height:0; overflow:hidden; transition:max-height 0.3s ease-out }.page-pest-control .footer-column.active .footer-links{ max-height:300px; padding-bottom:15px }.page-pest-control .newsletter-box{ background:transparent; padding:30px 0; margin-bottom:20px }.page-pest-control .newsletter-form{ flex-direction:column; gap:12px }.page-pest-control .newsletter-input{ padding:12px; font-size:1rem }.page-pest-control .newsletter-btn{ padding:12px; font-size:1rem; width:100% }.page-pest-control .footer-bottom{ padding-top:20px; border-top:none; flex-direction:column; text-align:center }.page-pest-control .footer-bottom-links{ display:grid; grid-template-columns:1fr 1fr; gap:8px 4px; width:100%; text-align:center }.page-pest-control .footer-bottom-links span{ display:none }.page-pest-control .footer-bottom-links a{ padding:6px 4px; font-size:0.65rem; white-space:nowrap; line-height:1.2 }.page-pest-control .copyright{ font-size:0.75rem !important }
  }.page-pest-control .mobile-menu{
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: #fff;
    z-index: 1100;
    transition: right 0.3s ease;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
  }.page-pest-control .mobile-menu.active{
    right: 0;
  }.page-pest-control .mobile-menu-header{
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }.page-pest-control .mobile-menu-close{
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
  }.page-pest-control .mobile-menu-content{
    padding: 20px;
    overflow-y: auto;
    height: calc(100vh - 80px);
  }.page-pest-control .mobile-menu-content ul{
    list-style: none;
    padding: 0;
    margin: 0;
  }.page-pest-control .mobile-menu-content li{
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
  }.page-pest-control .mobile-menu-content a{
    display: block;
    color: #0f172a;
    text-decoration: none;
  }.page-pest-control .mobile-menu-buttons{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }.page-pest-control .mobile-menu-buttons .btn{
    font-size: 1rem !important;
    padding: 12px 16px !important;
    text-align: center;
    justify-content: center;
    border-radius: 999px !important;
  }.page-pest-control .mobile-menu-overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1050;
    display: none;
  }.page-pest-control .mobile-menu-overlay.active{
    display: block;
  }



/* ===============================
   Detail page: Article tags (match mockup TOMATO_COLUMN_DETAIL_20260125.html)
   - Scoped so other pages are unaffected
   =============================== */
.detail-tags{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--border);
}
.detail-tags .tags-label{
  font-weight:700;
  color:var(--accent);
}
/* If app.js renders tags without .tag class, still style them like pills */
.detail-tags #article-tags > *{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#f3f4f6;
  color:#6b7280;
  padding:6px 14px;
  border-radius:16px;
  font-size:0.85rem;
  line-height:1.2;
  transition:all 0.2s;
}
.detail-tags #article-tags > *:hover{
  background:var(--accent);
  color:#fff;
}
.hdr-actions {
  display:flex; gap:.5rem
}


/* =====================================================
   Member-only gate (detail.html)
   - Shows teaser + login/register box when post.free_viewable is OFF
   ===================================================== */
.article-content.is-paywalled{
  position: relative;
}

/* Fade-out at bottom of teaser */
.article-content.is-paywalled::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:120px;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,1));
}

.paywall-gate{
  max-width: 900px;
  margin: 28px auto 0;
  padding: 34px 20px;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  text-align: center;
}

.paywall-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.paywall-lock{
  font-size: 28px;
  line-height: 1;
}

.paywall-title{
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.paywall-subtitle{
  font-size: 0.9rem;
  color: var(--muted, #64748b);
}

.paywall-actions{
  width: min(520px, 100%);
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top: 10px;
}

.paywall-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px 18px;
  font-weight: 700;
  border-radius: 0;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}

.paywall-btn-register{
  background: #e0523d;
  color: #fff;
  box-shadow:var(--shadow)
}

.paywall-btn-login{
  background: #ffffff;
  color: #000;
  box-shadow:var(--shadow)
}

/* ===============================
   Detail page: remove top border on PC
   =============================== */
@media (min-width:1180px){
  .page-detail nav{
    border-top: none !important;
  }
}

@media (max-width:768px){
  .paywall-gate{
    margin: 18px 15px 0;
    padding: 26px 16px;
  }
  .paywall-btn{
    padding: 14px 14px;
    font-size: 0.95rem;
  }
  .page-web-seminar #videoModal #paywall-gate{
    bottom:88px;
    padding:20px 14px;
  }
  .page-web-seminar #videoModal #paywall-gate .paywall-inner{
    padding:24px 16px;
  }
}

/* =====================================================
   Market carousel styles (synced from TOMATO_TOP_20260122_modified.html)
   - Only affects .tomato-market-data / .market-carousel and child elements
   ===================================================== */

/* ========================================
   トマト市況データ - 4品種カードデザイン
   ======================================== */

.tomato-market-data {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  padding: 0;
  position: relative;
}

.market-carousel {
  position: relative;
  overflow: visible;
}

.market-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #cbd5e1;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  color: #475569;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.market-carousel-nav:hover {
  background: rgba(224, 82, 61, 0.1);
  border-color: #e0523d;
  color: #e0523d;
}

/* ページインジケーター（ドット） */
.market-indicators {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 4px;
}

.indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
}

.indicator-dot:hover {
  background: #94a3b8;
  transform: scale(1.2);
}

.indicator-dot.active {
  background: #e0523d;
  width: 24px;
  border-radius: 4px;
}

.market-carousel-nav.prev {
  left: 4px;
}

.market-carousel-nav.next {
  right: 4px;
}

.market-header {
  text-align: center;
  margin-bottom: 4px;
}

.market-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px 0;
  letter-spacing: 0.02em;
}

.market-date {
  font-size: 0.8rem;
  color: #64748b;
  margin: 0;
}

.market-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 2px;
  transition: transform 0.3s ease-out;
}

.market-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* 品種別の背景カラー（薄いオレンジ/ピンク系） */
.market-card[data-variety="large"] {
  background: linear-gradient(135deg, #fff5f5 0%, #fef2f2 100%);
}

.market-card[data-variety="medium"] {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
}

.market-card[data-variety="mini"] {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.market-card[data-variety="first"] {
  background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
}

.market-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  transition: opacity 0.2s ease;
}

/* 品種別のアクセントカラー */
.market-card[data-variety="large"]::before {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}

.market-card[data-variety="medium"]::before {
  background: linear-gradient(90deg, #f97316, #ea580c);
}

.market-card[data-variety="mini"]::before {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}

.market-card[data-variety="first"]::before {
  background: linear-gradient(90deg, #eab308, #ca8a04);
}

.market-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #d1d5db;
}

/* Fix: prevent global .card-header/.card-body overlay styles (used on variety cards) from affecting market cards */
.market-carousel .market-card .card-header{
  margin-top: 0 !important;
  position: static !important;
  z-index: auto !important;
  background: transparent !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.market-carousel .market-card .card-body{
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  z-index: auto !important;
  background: transparent !important;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
}

.variety-info {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.variety-name {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 2px 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* 品種別のテキストカラー */
.market-card[data-variety="large"] .variety-name {
  color: #dc2626;
}

.market-card[data-variety="medium"] .variety-name {
  color: #ea580c;
}

.market-card[data-variety="mini"] .variety-name {
  color: #d97706;
}

.market-card[data-variety="first"] .variety-name {
  color: #ca8a04;
}

.variety-code {
  font-size: 0.7rem;
  color: #9ca3af;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.price-section {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.price-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.price-display {
  display: flex;
  align-items: baseline;
  gap: 3px;
  white-space: nowrap;
}

.current-price {
  font-size: 1.75rem;
  font-weight: 800;
  color: #111827;
  line-height: 1;
  letter-spacing: -0.02em;
}

.price-unit {
  font-size: 0.85rem;
  color: #6b7280;
  font-weight: 600;
}

.price-change {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: #f3f4f6;
  width: fit-content;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.price-change.trend-up {
  color: #dc2626;
  background: #ffffff;
  border-color: #fecaca;
}

.price-change.trend-down {
  color: #2563eb;
  background: #ffffff;
  border-color: #bfdbfe;
}

.change-icon {
  font-size: 1rem;
  font-weight: 700;
}

.change-value {
  font-weight: 700;
}

.change-label {
  font-size: 0.8rem;
  opacity: 0.9;
}

.volume-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 12px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  width: 90px;
  flex-shrink: 0;
}

.volume-label {
  font-size: 0.65rem;
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.volume-display {
  display: flex;
  align-items: baseline;
  gap: 3px;
  white-space: nowrap;
}

.volume-value {
  font-size: 1.3rem;
  font-weight: 800;
  color: #111827;
  line-height: 1;
}

.volume-unit {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 600;
}


.market-footer {
  text-align: center;
  padding-top: 2px;
  border-top: 1px solid #e2e8f0;
}

.data-source {
  font-size: 0.75rem;
  color: #94a3b8;
  margin: 0;
  font-weight: 500;
}

/* PC版での配置調整 */
@media (min-width: 1180px) {
  .tomato-market-data {
    position: absolute;
    top: 200px;
    left: 0;
    right: auto;
    width: 450px;
    z-index: 10;
  }
  
  #highlight .left-hero > .hero-actions {
    margin-top: 340px !important;
    margin-bottom: 8px !important;
  }
}

/* タブレット版 */
@media (min-width: 768px) and (max-width: 1179px) {
  .tomato-market-data {
    max-width: 100%;
  }
  
  .market-grid {
    gap: 14px;
  }
  
  .market-card {
    padding: 16px;
  }
  
  .variety-name {
    font-size: 1.05rem;
  }
  
  .current-price {
    font-size: 1.9rem;
  }
  
  .volume-area {
    width: 95px;
    padding: 10px 14px;
    align-items: center;
  }
  
  .volume-value {
    font-size: 1.4rem;
  }
}

/* SP版 */
.sp-hero-copy{
  display:none;
}

@media (max-width: 767px) {
  .sp-hero-copy{
    display:block;
    width:100%;
    padding:12px 24px 0;
    box-sizing:border-box;
  }

  .sp-hero-copy .mark{
    font-size: clamp(0.92rem, 3.2vw, 1.08rem);
    letter-spacing:.02em;
    margin-bottom:12px;
    text-align:center;
    line-height:1.5;
    white-space:nowrap;
    text-wrap:balance;
  }

  .sp-hero-copy .pill{
    background:#fff;
    border:1px solid var(--border);
    padding:8px 14px;
    border-radius:999px;
    color:#334155;
    margin:0 0 30px;
    box-shadow: var(--shadow);
    text-align:center;
  }

  #highlight .left-hero > .mark,
  #highlight .left-hero > .pill{
    display:none !important;
  }

  .tomato-market-data.sp-only-market {
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 12px 6px;
    background: #fafafa;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  
  .market-header {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    padding: 0 8px;
  }
  
  .market-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 1.3;
  }
  
  .market-date {
    font-size: 0.65rem;
    color: #64748b;
    line-height: 1.4;
  }
  
  /* 2列グリッド（カルーセル用に固定） */
  .market-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  
  /* カルーセル用に常に2列表示を維持 */
  @media (min-width: 520px) {
    .sp-only-market .market-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;
    }
  }
  
  @media (min-width: 700px) {
    .sp-only-market .market-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }
  }
  
  .market-footer {
    width: 100%;
    text-align: center;
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid #e2e8f0;
  }
  
  /* SP版：カルーセル矢印をさらに小さく、控えめに */
  .market-carousel-nav {
    width: 24px;
    height: 24px;
    font-size: 0.9rem;
  }
  
  .market-carousel-nav.prev {
    left: 2px;
  }
  
  .market-carousel-nav.next {
    right: 2px;
  }
  
  @media (max-width: 400px) {
    .market-carousel-nav.prev {
      left: 2px;
    }
    
    .market-carousel-nav.next {
      right: 2px;
    }
  }
  
  .data-source {
    font-size: 0.65rem;
    color: #94a3b8;
  }
  
  .market-card {
    display: block;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: visible;
  }
  
  /* SP版：品種別の背景カラーを継承 */
  .market-card[data-variety="large"] {
    background: linear-gradient(135deg, #fff5f5 0%, #fef2f2 100%);
  }
  
  .market-card[data-variety="medium"] {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  }
  
  .market-card[data-variety="mini"] {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  }
  
  .market-card[data-variety="first"] {
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
  }
  
  .card-header {
    display: flex;
    margin-bottom: 6px;
    padding-bottom: 5px;
  }
  
  .variety-info {
    display: block;
    text-align: center;
  }
  
  .variety-name {
    font-size: 0.9rem;
    display: block;
    margin-bottom: 2px;
  }
  
  .variety-code {
    font-size: 0.65rem;
    display: block;
  }
  
  .card-body {
    display: block;
  }
  
  .price-section {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }
  
  .price-area {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
  }
  
  .price-display {
    display: flex;
    align-items: baseline;
    gap: 3px;
    white-space: nowrap;
  }
  
  .current-price {
    font-size: 1.6rem;
  }
  
  .price-unit {
    font-size: 0.7rem;
  }
  
  .price-change {
    display: inline-flex;
    font-size: 0.7rem;
    padding: 2px 6px;
  }
  
  .volume-area {
    padding: 6px 10px;
    width: auto;
    min-width: 55px;
    flex-shrink: 0;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border-radius: 6px;
  }
  
  .volume-label {
    font-size: 0.6rem;
    color: #64748b;
    font-weight: 700;
  }
  
  .volume-value {
    font-size: 1.2rem;
  }
  
  .volume-unit {
    font-size: 0.7rem;
  }
}

/* SP版：hero領域内での表示調整 */
@media (max-width: 1179px) {
  #highlight .tomato-market-data {
    display: none !important;
  }
}

@media (min-width: 1180px) {
  body > .tomato-market-data {
    display: none !important;
  }
  
  .sp-only-market {
    display: none !important;
  }
  
  #highlight .tomato-market-data {
    display: block !important;
  }
}

/* =====================================================
   Feature page (feature.html)
   - Moved from TOMATO_TOKUSHU_MODAL版_20260122.html
   - Scoped to body.page-feature to avoid affecting other pages
   ===================================================== */
body.page-feature *, body.page-feature *::before, body.page-feature *::after{ box-sizing:border-box }
body.page-feature{
    --bg:#fff; 
    --border:#e5e7eb; 
    --muted:#64748b; 
    --text:#0f172a;
    --accent:#e0523d; 
    --accent-2:#ff9a7d;
    --pad:clamp(14px,4.5vw,24px);
    --shadow:0 20px 50px rgba(16,24,40,.10);
  }
body.page-feature{ 
    margin:0; 
    background:var(--bg); 
    color:var(--text);
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI",sans-serif;
  }

body.page-feature body.modal-open{
    overflow: hidden;
  }
@media (min-width:1180px){body.page-feature .hdr{ 
      flex-direction:column; 
      padding:1rem 0 0;
      gap:0;
      position:relative;
    }
}
@media (min-width:1180px){}
@media (min-width:768px) and (max-width:1179px) {}
@media (min-width:1180px){}
body.page-feature .logo{ width:40px; height:40px; border-radius:0; background:radial-gradient(120% 120% at 20% 20%, var(--accent-2), var(--accent)); box-shadow:var(--shadow) }
body.page-feature .tit{ font-weight:700 }
@media (min-width:1180px){}
@media (max-width: 768px) {body.page-feature .hero-actions .btn, body.page-feature #search .btn{
      font-size: 14px !important;
      padding: 0.65rem 1.2rem !important;
      letter-spacing: 0 !important;
    }
body.page-feature .hero-actions .btn.accent, body.page-feature #search .btn.accent{
      font-size: 14px !important;
      padding: 0.65rem 1.2rem !important;
      letter-spacing: 0 !important;
    }
}
@media (max-width:900px){}
@media (min-width:1180px){body.page-feature .hdr > div:last-child{
      position:absolute;
      top:calc(1rem + 50px);
      transform:translateY(-50%);
      right:0;
    }
}
body.page-feature .kw-inner{ width:min(1280px,96vw); margin:0 auto; padding:8px 16px; }
body.page-feature .kw-track{
    display:flex; gap:12px; align-items:center; white-space:nowrap;
    will-change:transform;
    animation:kw-marquee 24s linear infinite;
  }
body.page-feature .kw-pill{
    flex:0 0 auto; font-size:.92rem; color:#1f2937;
    background:#f6f7f9; border:1px solid #e5e7eb; border-radius:999px;
    padding:8px 14px; line-height:1; text-decoration:none;
  }
@keyframes kw-marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (max-width:768px){body.page-feature .kw-inner{ padding:8px 12px; }
body.page-feature .kw-pill{ font-size:.9rem; padding:8px 12px; }
}
@media (min-width:1180px){}
body.page-feature .article-container{
    max-width:1400px;
    margin:0 auto;
    padding:24px 20px 24px;
  }
@media (max-width:768px){body.page-feature .article-container{ padding:20px 16px 20px; }
}
body.page-feature .article-header{
    text-align:center;
    margin-bottom:32px;
    padding:20px 0 16px;
    border-bottom:2px solid var(--border);
    background:#fff;
  }
body.page-feature .article-category{
    display:inline-block;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    color:#fff;
    padding:4px 16px;
    border-radius:20px;
    font-size:0.75rem;
    font-weight:600;
    margin-bottom:12px;
    letter-spacing:0.05em;
  }
body.page-feature .article-title{
    font-size:24px;
    font-weight:700;
    line-height:1.3;
    margin:0 0 8px;
    color:var(--text);
  }
body.page-feature .article-subtitle{
    font-size:clamp(0.875rem, 2vw, 1rem);
    color:var(--muted);
    font-weight:500;
    line-height:1.5;
  }
body.page-feature .selector-container,
body.page-variety .selector-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
  }
@media (min-width: 768px) {body.page-feature .selector-container,
body.page-variety .selector-container{
      flex-direction: row;
      justify-content: center;
    border-radius: 999px !important;
      gap: 20px;
    }
}
body.page-feature .selector-group,
body.page-variety .selector-group{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
body.page-feature .selector-label,
body.page-variety .selector-label{
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }
body.page-feature .selector-buttons,
body.page-variety .selector-buttons{
    display: flex;
    gap: 0;
    border: 1px solid var(--border);
  }
body.page-feature .selector-btn,
body.page-variety .selector-btn{
    padding: 8px 14px;
    background: #fff;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    transition: all 0.3s ease;
  }
@media (max-width: 768px) {body.page-feature .selector-btn,
body.page-variety .selector-btn{
      padding: 6px 12px;
      font-size: 0.7rem;
    }
}
body.page-feature .selector-btn:not(:last-child),
body.page-variety .selector-btn:not(:last-child){
    border-right: 1px solid var(--border);
  }
body.page-feature .selector-btn:hover:not(.disabled):not(.active),
body.page-variety .selector-btn:hover:not(.disabled):not(.active){
    background: #f8f9fa;
    color: var(--text);
  }
body.page-feature .selector-btn.active,
body.page-variety .selector-btn.active{
    background: var(--text);
    color: #fff;
  }
body.page-feature .selector-btn:focus,
body.page-variety .selector-btn:focus{
    outline: none;
    box-shadow: inset 0 0 0 2px var(--accent);
  }
body.page-feature .selector-btn.disabled,
body.page-variety .selector-btn.disabled{
    opacity: 0.4;
    cursor: not-allowed;
  }
body.page-feature .content-panel{
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px 40px;
    background: #fff;
  }
body.page-variety .variety-season-selector{
    margin-top: 16px;
  }
body.page-variety [data-season-panel][hidden]{
    display:none !important;
  }
@media (max-width: 768px) {body.page-feature .content-panel{
      padding: 0 16px 32px;
    }
}
body.page-feature .content-panel.hidden{
    display: none;
  }
body.page-feature .articles-section{
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px 40px;
    background: #fff;
    border-top: none;
  }
@media (max-width: 768px) {body.page-feature .articles-section{
      padding: 0 16px 32px;
    }
}
body.page-feature .articles-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
@media (min-width: 768px) {body.page-feature .articles-grid{
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
}
@media (min-width: 1200px) {body.page-feature .articles-grid{
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
}
body.page-feature .article-card{
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    cursor: pointer;
    background: #f8f9fa;
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
  }
@media (min-width: 1200px) {body.page-feature .article-card{
      aspect-ratio: 4/5;
    }
}
body.page-feature a.article-card{
    display: block;
  }
body.page-feature .article-card-image{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
body.page-feature .article-card-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
  }
body.page-feature .article-card:hover .article-card-image img{
    transform: scale(1.05);
  }
body.page-feature .article-card-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.05) 100%);
    transition: background 0.3s ease;
  }
body.page-feature .article-card:hover .article-card-overlay{
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0.1) 100%);
  }
body.page-feature .article-card-content{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    color: #fff;
    transform: translateY(5px);
    transition: transform 0.3s ease;
  }
body.page-feature .article-card:hover .article-card-content{
    transform: translateY(0);
  }
@media (min-width: 768px) {body.page-feature .article-card-content{
      padding: 20px;
    }
}
@media (min-width: 1200px) {body.page-feature .article-card-content{
      padding: 16px;
    }
}
body.page-feature .article-card-number{
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: var(--accent-2);
  }
body.page-feature .article-card-title{
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 4px;
  }
body.page-feature .article-card-subtitle{
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
body.page-feature .article-card-arrow{
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px !important;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
  }
body.page-feature .article-card:hover .article-card-arrow{
    opacity: 1;
    transform: translateX(0);
  }
body.page-feature .article-card-arrow svg{
    width: 14px;
    height: 14px;
    stroke: #fff;
  }
body.page-feature .article-card.featured{
    aspect-ratio: 1;
  }
@media (min-width: 1200px) {body.page-feature .article-card.featured{
      aspect-ratio: 4/5;
    }
}
body.page-feature .article-card.featured .article-card-title{
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  }
body.page-feature .survey-section{
    margin: 40px 0 0;
    padding: 40px 0;
    background: #fff;
  }
@media (max-width: 768px) {body.page-feature .survey-section{
      margin: 32px 0 0;
      padding: 32px 0;
    }
}
body.page-feature .survey-container{
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
  }
body.page-feature .survey-badge{
    display: inline-block;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
  }
body.page-feature .survey-title{
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 8px;
    color: var(--text);
  }
body.page-feature .survey-subtitle{
    font-size: clamp(0.875rem, 2vw, 1rem);
    color: var(--muted);
    margin: 0 auto 24px;
    max-width: 600px;
    line-height: 1.5;
    font-weight: 500;
  }
body.page-feature .survey-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 400px;
    margin: 0 auto;
    background: #f8f9fa;
    overflow: hidden;
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
  }
body.page-feature a.survey-card{
    display: flex;
  }
body.page-feature .survey-card:hover{
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    transform: translateY(-2px);
  }
body.page-feature .survey-card-image{
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
  }
body.page-feature .survey-card-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
  }
body.page-feature .survey-card:hover .survey-card-image img{
    transform: scale(1.05);
  }
body.page-feature .survey-card-content{
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 999px !important;
  }
body.page-feature .survey-card-label{
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
  }
body.page-feature .survey-card-title{
    font-size: clamp(1rem, 2.5vw, 1.1rem);
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 8px;
  }
body.page-feature .survey-card-excerpt{
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--muted);
    margin: 0 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
body.page-feature .survey-card-button{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--text);
    color: #fff;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 0.8rem;
    border-radius: 4px;
    transition: all 0.3s ease;
  }
body.page-feature .survey-card-button:hover{
    background: var(--accent);
  }
body.page-feature .survey-card-button svg{
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
  }
body.page-feature .survey-card-button:hover svg{
    transform: translateX(4px);
  }
body.page-feature .no-content{
    padding: 120px 20px;
    text-align: center;
    color: var(--muted);
  }
body.page-feature .no-content-icon{
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.3;
  }
body.page-feature .no-content-title{
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--text);
  }
body.page-feature .no-content-text{
    font-size: 1rem;
    margin: 0;
  }
body.page-feature .modal-overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.95);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
body.page-feature .modal-overlay.active{
    opacity: 1;
    visibility: visible;
  }
body.page-feature .modal-close{
    position: fixed;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 72px;
    background: #fff;
    border: none;
    cursor: pointer;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px !important;
    transition: all 0.3s ease;
  }
body.page-feature .modal-close:hover{
    background: var(--accent);
  }
body.page-feature .modal-close:hover svg{
    stroke: #fff;
  }
body.page-feature .modal-close svg{
    width: 24px;
    height: 24px;
    stroke: var(--text);
    stroke-width: 2;
  }
@media (min-width: 768px) {body.page-feature .modal-close{
      top: 40px;
      right: 40px;
      width: 60px;
      height: 72px;
    }
}
body.page-feature .modal-content{
    background: #fff;
    min-height: 100vh;
    transform: translateY(30px);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
  }
body.page-feature .modal-overlay.active .modal-content{
    transform: translateY(0);
    opacity: 1;
  }
body.page-feature .modal-panel{
    display: none;
  }
body.page-feature .modal-panel.active{
    display: block;
  }
body.page-feature .modal-article-header{
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 20px 24px;
    text-align: center;
    border-bottom: 2px solid var(--border);
    background: #fff;
  }
@media (min-width: 768px) {body.page-feature .modal-article-header{
      padding: 100px 40px 32px;
    }
}
body.page-feature .modal-category{
    display: inline-block;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    padding: 5px 18px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 16px;
    letter-spacing: 0.05em;
  }
body.page-feature .modal-article-title{
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 12px;
    color: var(--text);
  }
body.page-feature .modal-article-subtitle{
    font-size: clamp(0.9rem, 2vw, 1.05rem);
    color: var(--muted);
    margin: 0;
    font-weight: 500;
    line-height: 1.5;
  }
body.page-feature .modal-hero-image{
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }
body.page-feature .modal-hero-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
@media (min-width: 768px) {body.page-feature .modal-hero-image{
      max-width: 800px;
      margin: 0 auto;
    }
}
body.page-feature .modal-article-body{
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 20px 100px;
  }
@media (min-width: 768px) {body.page-feature .modal-article-body{
      padding: 80px 40px 120px;
    }
}
body.page-feature .modal-article-body h2{
    font-size: 1.5rem;
    font-weight: 700;
    margin: 3rem 0 1.5rem;
    padding-left: 16px;
    border-left: 4px solid var(--accent);
  }
body.page-feature .modal-article-body h2:first-child{
    margin-top: 0;
  }
body.page-feature .modal-article-body p{
    font-size: 1.1rem;
    line-height: 2;
    margin: 0 0 1.5em;
    color: #374151;
  }
body.page-feature .modal-highlight{
    background: linear-gradient(135deg, rgba(224,82,61,0.08), rgba(255,154,125,0.08));
    border-left: 4px solid var(--accent);
    padding: 24px 28px;
    margin: 2rem 0;
  }
body.page-feature .modal-highlight strong{
    color: var(--accent);
  }
body.page-feature .modal-stat{
    
  }
body.page-feature .modal-image-block{
    margin: 3rem 0;
  }
body.page-feature .modal-image-block img{
    width: 100%;
    border-radius: 8px;
  }
body.page-feature .modal-image-caption{
    font-size: 0.9rem;
    color: var(--muted);
    text-align: center;
    margin-top: 12px;
    line-height: 1.6;
  }
body.page-feature .modal-variety-header{
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 20px 24px;
    text-align: center;
    border-bottom: 2px solid var(--border);
    background: #fff;
  }
@media (min-width: 768px) {body.page-feature .modal-variety-header{
      padding: 100px 40px 32px;
    }
}
body.page-feature .modal-variety-category{
    display: inline-block;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    padding: 5px 18px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 16px;
    letter-spacing: 0.05em;
  }
body.page-feature .modal-variety-title{
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 12px;
    color: var(--text);
  }
body.page-feature .modal-variety-subtitle{
    font-size: clamp(0.9rem, 2vw, 1.05rem);
    color: var(--muted);
    font-weight: 500;
    line-height: 1.5;
  }
body.page-feature .modal-variety-body{
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 100px;
  }
@media (min-width: 768px) {body.page-feature .modal-variety-body{
      padding: 60px 40px 120px;
    }
}
body.page-feature .variety-tabs{
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    justify-content: center;
    border-radius: 999px !important;
    margin-bottom: 40px;
    flex-wrap: wrap;
  }
body.page-feature .variety-tab{
    padding: 16px 32px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 1rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    bottom: -2px;
  }
body.page-feature .variety-tab.active{
    color: var(--accent);
    border-bottom-color: var(--accent);
  }
body.page-feature .variety-content-panel{
    display: none;
  }
body.page-feature .variety-content-panel.active{
    display: block;
  }
body.page-feature .variety-table-image{
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-bottom: 24px;
  }
body.page-feature .variety-accordion{
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    margin-top: 40px;
  }
body.page-feature .variety-item{
    border-bottom: 1px solid var(--border);
  }
body.page-feature .variety-item:last-child{
    border-bottom: none;
  }
body.page-feature .variety-item-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    cursor: pointer;
    background: #fff;
    transition: all 0.2s;
  }
body.page-feature .variety-item-header:hover{
    background: #f9fafb;
  }
body.page-feature .variety-item.open .variety-item-header{
    background: linear-gradient(135deg, #fff5f2, #fff);
  }
body.page-feature .variety-name{
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent);
  }
body.page-feature .variety-company{
    font-size: 0.85rem;
    color: var(--muted);
    background: #f3f4f6;
    padding: 4px 12px;
    border-radius: 12px;
    margin-left: 12px;
  }
body.page-feature .variety-toggle-icon{
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px !important;
    border: 2px solid var(--border);
    border-radius: 50%;
    font-size: 1rem;
    color: var(--accent);
    transition: all 0.3s;
  }
body.page-feature .variety-item.open .variety-toggle-icon{
    transform: rotate(180deg);
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }
body.page-feature .variety-item-details{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
body.page-feature .variety-item.open .variety-item-details{
    max-height: 600px;
  }
body.page-feature .variety-item-content{
    padding: 0 24px 24px;
    background: #fafafa;
  }
body.page-feature .detail-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
  }
body.page-feature .detail-card{
    background: #fff;
    padding: 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
  }
body.page-feature .detail-label{
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
  }
body.page-feature .detail-value{
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
  }
body.page-feature .detail-description{
    background: #fff;
    padding: 16px;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.7;
  }
body.page-feature .modal-pest-header{
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 20px 24px;
    text-align: center;
    border-bottom: 2px solid var(--border);
    background: linear-gradient(135deg, #fff5f2 0%, #fff 100%);
  }
@media (min-width: 768px) {body.page-feature .modal-pest-header{
      padding: 100px 40px 32px;
    }
}
body.page-feature .modal-pest-category{
    display: inline-block;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    padding: 5px 18px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 16px;
    letter-spacing: 0.05em;
  }
body.page-feature .modal-pest-title{
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 12px;
    color: var(--text);
  }
body.page-feature .modal-pest-subtitle{
    font-size: clamp(0.9rem, 2vw, 1.05rem);
    color: var(--muted);
    max-width: 600px;
    margin: 0 auto;
    font-weight: 500;
    line-height: 1.5;
  }
body.page-feature .modal-pest-body{
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 100px;
  }
@media (min-width: 768px) {body.page-feature .modal-pest-body{
      padding: 60px 40px 120px;
    }
}
body.page-feature .pest-search-section{
    background: #fafafa;
    padding: 32px;
    border-radius: 12px;
    margin-bottom: 40px;
  }
body.page-feature .pest-search-title{
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 20px;
  }
body.page-feature .pest-search-tabs{
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border);
    flex-wrap: wrap;
  }
body.page-feature .pest-search-tab{
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    position: relative;
    bottom: -2px;
  }
body.page-feature .pest-search-tab.active{
    color: var(--accent);
    border-bottom-color: var(--accent);
  }
body.page-feature .pest-search-input{
    display: flex;
    gap: 12px;
  }
body.page-feature .pest-search-input input{
    flex: 1;
    padding: 14px 16px;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
  }
body.page-feature .pest-search-input input:focus{
    outline: none;
    border-color: var(--accent);
  }
body.page-feature .pest-search-input button{
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }
body.page-feature .pest-table-section{
    margin-top: 40px;
  }
body.page-feature .pest-table-title{
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
body.page-feature .pest-table-title::before{
    content: "";
    width: 4px;
    height: 24px;
    background: var(--accent);
  }
body.page-feature .pest-table-wrapper{
    overflow-x: auto;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  }
body.page-feature .pest-table{
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    min-width: 800px;
  }
body.page-feature .pest-table th{
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    padding: 16px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
  }
body.page-feature .pest-table td{
    padding: 16px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    line-height: 1.6;
    vertical-align: top;
  }
body.page-feature .pest-table tr:last-child td{
    border-bottom: none;
  }
body.page-feature .pest-table tr:hover td{
    background: #f9fafb;
  }
body.page-feature .pest-name{
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
  }
@media (max-width: 768px) {
  body.page-feature{ --chipsH: 48px; }
  body.page-feature{ padding-top: var(--hdrH); }
}

/* ===============================
   Survey page styles (moved from TOMATO_JASURVEY_TOP_20251222.html)
   - Scoped to .page-survey so other pages are unaffected
   =============================== */
.page-survey img{ max-width:100%; display:block }
.page-survey .container{ width:min(1200px,92vw); margin:0 auto }
.page-survey .band{ width:min(1400px,96vw); margin:0 auto; display:grid; grid-template-columns:1fr; gap:24px;
         padding: clamp(12px,4vw,28px) var(--pad) }@media (min-width:1180px){.page-survey .band{ 
      display:grid; 
      grid-template-columns: 450px 1fr; 
      grid-template-rows: 1fr;
      align-items:stretch; 
      gap:24px;
    }}
.page-survey .left-hero{ padding:28px 24px; display:flex; flex-direction:column; justify-content:center; min-height:500px;
              border-radius:0; box-shadow: var(--shadow); background:linear-gradient(180deg,#fafafa,#fff); position:relative }
.page-survey .left-hero .mark{ font-size:2rem; letter-spacing:.2em; margin-bottom:12px; text-align:center }
.page-survey .left-hero h1{ font-size: clamp(1.8rem,2.8vw,2.4rem); margin:.2rem 0 .6rem; line-height:1.15 }
.page-survey .left-hero p{ color:#6b7280; margin:0 0 12px }
.page-survey .hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:10px }
.page-survey .pill{ background:#fff; border:1px solid var(--border); padding:.38rem .8rem; border-radius:999px; color:#334155; margin-right:8px; box-shadow: var(--shadow); text-align:center }
.page-survey .right-gallery{ display:none }@media (max-width: 768px) {.page-survey .right-gallery{
      display: block !important;
      width: 100vw !important;
      overflow: visible !important;
      height: auto !important;
      margin: 0 !important;
      padding: 0 !important;
    }
.page-survey .vcol{
      width: 100vw !important;
      height: auto !important;
      overflow: visible !important;
      position: relative !important;
    }
.page-survey .v-track{
      position: relative !important;
      inset: auto !important;
      height: auto !important;
      gap: 0 !important;
    }
.page-survey #vcolB{
      display: none !important;
    }
.page-survey .vtile:not(.ad-half-vertical):not(.ad-rect-vertical){
      position: relative !important;
      width: 100vw !important;
      height: 100vw !important;
      aspect-ratio: 1/1 !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      display: block !important;
    }
.page-survey .vtile:not(.ad-half-vertical):not(.ad-rect-vertical) .thumb{
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      background: #eee !important;
      border-radius: 0 !important;
    }
.page-survey .vtile:not(.ad-half-vertical):not(.ad-rect-vertical) .thumb img{
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      object-position: center !important;
      display: block !important;
      border-radius: 0 !important;
    }
.page-survey .vtile:not(.ad-half-vertical):not(.ad-rect-vertical) .cap{
      position: absolute !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      background: rgba(0,0,0,0.6) !important;
      color: #fff !important;
      padding: 12px !important;
      margin: 0 !important;
      z-index: 2 !important;
      border-radius: 0 !important;
    }
.page-survey .vtile:not(.ad-half-vertical):not(.ad-rect-vertical) .cap .meta{
      font-size: 0.7rem !important;
      margin-bottom: 4px !important;
      color: #fff !important;
      opacity: 0.9 !important;
    }
.page-survey .vtile:not(.ad-half-vertical):not(.ad-rect-vertical) .cap > div:last-child{
      font-size: 0.8rem !important;
      font-weight: 600 !important;
      line-height: 1.3 !important;
      color: #fff !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
    }}@media (min-width:1180px){.page-survey .right-gallery{ 
      display:grid; 
      grid-template-columns: 400px 400px; 
      gap:24px; 
      align-items:start; 
      height:100%;
      overflow:visible;
    }}
.page-survey .vcol{ position:relative; width:400px; height:100%; overflow:hidden }
.page-survey .v-track{ position:absolute; inset:0; display:flex; flex-direction:column; gap:2px; padding:0; will-change:transform }
.page-survey .vtile{ border:none; border-radius:0; overflow:hidden; background:#fff; box-shadow: none; width:400px; }
.page-survey .vtile .thumb{ width:400px; height:400px; aspect-ratio:1/1; background:#f3f4f6; overflow:hidden; border-radius:0 }
.page-survey .vtile .thumb img{ width:100%; height:100%; object-fit:cover; object-position:center }
.page-survey .vtile .cap{ padding:12px 14px }
.page-survey .meta{ color:#64748b; font-size:.9rem }
.page-survey .sp-lanes{ display:grid; gap:14px; margin-top:22px }@media (min-width:769px){.page-survey .sp-lanes{ display:block; overflow:visible; min-height:auto }}@media (max-width:768px){.page-survey .sp-lanes{ 
      display:block !important; 
      overflow-x:auto !important;
      overflow-y:hidden !important;
      width:100vw !important; 
      margin:0 !important;
      padding:0 !important;
      -webkit-overflow-scrolling:touch !important;
    }}
.page-survey .lane{ overflow:hidden; user-select:none; -webkit-user-select:none; touch-action:pan-y; background:transparent }
.page-survey .lane-track{ display:flex; gap:14px; padding:2px }@media (max-width:768px){.page-survey .lane-track{ gap:1px; padding:0 }}
.page-survey .tile{ flex:0 0 auto; width: clamp(180px,48vw,260px); border:none; border-radius:0; background:#fff; overflow:hidden; box-shadow: var(--shadow) }@media (max-width:768px){.page-survey .tile{ width:calc(100vw / 3) !important; box-shadow:none !important }}
.page-survey .tile .thumb{ aspect-ratio:1/1 !important; background:#eee }
.page-survey .tile .thumb img{ width:100% !important; height:100% !important; object-fit:cover !important }
.page-survey .tile .cap{ padding:10px 12px }@media (max-width:768px){.page-survey .tile .cap{ padding:6px; font-size:0.75rem }}
.page-survey .animate-x{ animation: slideX 28s linear infinite }
.page-survey .animate-x.reverse{ animation-direction: reverse; animation-duration: 34s }@keyframes slideX{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.page-survey section{ border-top:1px solid var(--border) }
.page-survey .cat{ width:min(1320px,96vw); margin:0 auto; padding:32px var(--pad) }@media (max-width:768px){.page-survey .cat{ width:100vw; padding:20px 0 }}
.page-survey .cat h2{ margin:0 0 18px; font-size:1.3rem }@media (max-width:768px){.page-survey .cat h2{ padding:0 10px }}
.page-survey .grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:18px }@media (max-width:768px){.page-survey .grid{ 
      grid-template-columns:1fr !important; 
      gap:1px !important;
      padding:0 !important;
    }}
.page-survey .card{ grid-column:span 3; border:none; border-radius:0; overflow:hidden; background:#fff; box-shadow: var(--shadow) }@media (max-width:768px){.page-survey .card{ grid-column:span 1 !important; box-shadow:none !important }}
.page-survey .card .image{ aspect-ratio:1/1; background:#eee; border-radius:0 !important; }
.page-survey .card .image img{ width:100%; height:100%; object-fit:cover; border-radius:0 !important; }
.page-survey .card .body{ padding:12px 14px }@media (max-width:768px){.page-survey .card .body{ padding:10px 12px }}@media (min-width:769px) and (max-width:1024px){.page-survey .card{ grid-column:span 6 }}
.page-survey .ad-slot{ display:flex; align-items:center; justify-content:center;
            background:transparent; border:none; color:#475569;
            border-radius:0; box-shadow:none; position:relative; overflow:hidden }
.page-survey .ad-slot[data-hidden="true"]{ display:none !important }
.page-survey .ad-badge{ position:absolute; top:10px; left:10px; font-size:12px; color:#fff;
             background:#334155; padding:4px 8px; border-radius:999px; letter-spacing:.01em;
             width:auto; height:auto; max-width:60px; max-height:30px; 
             white-space:nowrap; overflow:hidden; z-index:10; }@media (min-width: 1180px) {.page-survey .ad-rect-vertical{ width:400px !important; height:200px !important; }
.page-survey .ad-slot.ad-rect-vertical.pc-only-ad{ 
      width:400px !important; 
      height:200px !important;
      display:block !important;
      visibility: visible !important;
    }}@media (max-width: 1179px) {.page-survey .ad-slot.ad-rect-vertical.pc-only-ad{ 
      display: none !important; 
      visibility: hidden !important; 
    }}@media (max-width: 768px) {.page-survey .ad-rect-vertical:not(.mpu-ad-wrapper){ display: none !important; }
.page-survey .ad-slot.ad-rect-vertical.pc-only-ad{ display: none !important; visibility: hidden !important; }}@media (min-width: 1180px) {.page-survey .ad-half-vertical{ width:400px !important; height:600px !important; }
.page-survey .ad-slot.ad-half-vertical.pc-only-ad{ 
      width:400px !important; 
      height:600px !important;
      display:block !important;
      visibility: visible !important;
    }}@media (max-width: 1179px) {.page-survey .ad-slot.ad-half-vertical.pc-only-ad{ 
      display: none !important; 
      visibility: hidden !important; 
    }}@media (max-width: 768px) {.page-survey .ad-half-vertical:not(.halfpage-ad-wrapper){ display: none !important; }
.page-survey .ad-slot.ad-half-vertical.pc-only-ad{ display: none !important; visibility: hidden !important; }}@media (min-width:1180px){.page-survey .right-gallery .ad-slot.ad-rect-vertical, .page-survey .vcol .ad-slot.ad-rect-vertical{ 
      width:400px !important; 
      height:200px !important; 
      min-width:400px !important;
      max-width:400px !important;
      min-height:200px !important;
      max-height:200px !important;
    }
.page-survey .right-gallery .ad-slot.ad-half-vertical, .page-survey .vcol .ad-slot.ad-half-vertical{ 
      width:400px !important; 
      height:600px !important; 
      min-width:400px !important;
      max-width:400px !important;
      min-height:600px !important;
      max-height:600px !important;
    }
.page-survey .right-gallery .ad-slot.ad-rect-vertical img, .page-survey .vcol .ad-slot.ad-rect-vertical img{
      max-width:100% !important;
      max-height:200px !important;
      object-fit: contain !important;
    }
.page-survey .right-gallery .ad-slot.ad-half-vertical img, .page-survey .vcol .ad-slot.ad-half-vertical img{
      max-width:100% !important;
      max-height:600px !important;
      object-fit: contain !important;
    }}
.page-survey .ad-rect{ width:300px; max-width:100%; height:250px }
.page-survey .ad-half{ width:300px; max-width:100%; height:600px }
.page-survey .ad-leader{ width:100%; height: 120px }@media (max-width:768px){.page-survey .ad-leader{ height: 100px }}
.page-survey .native-card{ grid-column:span 3; border-radius:0; background:#fff; box-shadow:var(--shadow); overflow:hidden; position:relative }@media (max-width:768px){.page-survey .ad-slot{
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      border-radius: 0 !important;
    }
.page-survey .ad-half-vertical{ 
      width:100vw !important; 
      height:calc(100vw * 1.5) !important;
      min-height:calc(100vw * 1.5) !important;
      max-height:calc(100vw * 1.5) !important;
      border: none !important;
      background: transparent !important;
    }
.page-survey .ad-rect-vertical{ 
      width:100vw !important; 
      height:calc(100vw * 0.5) !important;
      border: none !important;
      background: transparent !important;
    }}@media (max-width:768px){.page-survey .native-card{ grid-column:span 1 !important; box-shadow:none !important }}
.page-survey .native-card .badge{ position:absolute; top:10px; left:10px; padding:4px 8px; border-radius:999px; font-size:12px; color:#fff; background:#ef4444 }
.page-survey .native-card .image{ aspect-ratio:1/1; background:#eee; border-radius:0 !important; }@media (min-width:769px) and (max-width:1024px){.page-survey .native-card{ grid-column:span 6 }}@media (max-width: 768px) {.page-survey .sticky-banner{ position:fixed; z-index:80; left:12px; right:12px; bottom:12px; display:none }
.page-survey .sticky-banner.active{ display:block }
.page-survey .sticky-inner{ background:#fff; border:1px solid var(--border); border-radius:0; box-shadow:var(--shadow); padding:8px; display:flex; gap:10px; align-items:center }
.page-survey .sticky-close{ margin-left:auto; border:none; background:#f1f5f9; border-radius:0; padding:6px 10px; cursor:pointer }
.page-survey .sticky-thumb{ width:64px; height:40px; border-radius:0; overflow:hidden }
.page-survey .sticky-thumb img{ width:100%; height:100%; object-fit:cover }}@media (min-width: 769px) {.page-survey .sticky-banner{ display:none !important }}
.page-survey .foot{ 
    width:min(1320px,96vw); 
    margin:0 auto; 
    padding:60px var(--pad) 40px;
  }
.page-survey .social-link{
    width:36px;
    height:36px;
    border:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--muted);
    transition:all 0.2s;
  }
.page-survey .social-link:hover{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
  }
@media (max-width:768px){}





@media (max-width:768px){.page-survey .copyright{
      font-size:0.7rem !important;
    }}
.page-survey .copyright{
    font-size:0.875rem;
    color:var(--muted);
  }
.page-survey .lang-selector{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 12px;
    border:1px solid var(--border);
    font-size:0.875rem;
    cursor:pointer;
    transition:border-color 0.2s;
  }
.page-survey .lang-selector:hover{
    border-color:var(--accent);
  }@media (max-width: 768px){.page-survey .sp-lanes .tile .thumb, .page-survey .lane .tile .thumb, .page-survey .lane-track .tile .thumb{
    aspect-ratio: 1/1 !important;
    width: 100% !important;
    height: auto !important;
  }
.page-survey .sp-lanes .tile .thumb img, .page-survey .lane .tile .thumb img, .page-survey .lane-track .tile .thumb img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }}@media (max-width: 768px){.page-survey div.sp-lanes div.tile div.thumb, .page-survey div.lane div.tile div.thumb, .page-survey div.lane-track div.tile div.thumb, .page-survey section div.sp-lanes div.tile div.thumb{
    aspect-ratio: 1/1 !important;
    width: calc(100vw / 3) !important;
    height: calc(100vw / 3) !important;
    max-height: calc(100vw / 3) !important;
    min-height: calc(100vw / 3) !important;
  }
.page-survey div.sp-lanes div.tile div.thumb img, .page-survey div.lane div.tile div.thumb img, .page-survey div.lane-track div.tile div.thumb img, .page-survey section div.sp-lanes div.tile div.thumb img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    aspect-ratio: 1/1 !important;
  }}@media (max-width: 768px){.page-survey .left-hero{ 
    min-height:auto !important;
    padding:20px !important;
  }
.page-survey .left-hero h1{ font-size:1.5rem !important }
.page-survey .band{ padding:0 !important; gap:10px !important }
.page-survey .container{ 
    width: 100vw !important; 
    padding:0 !important;
  }
.page-survey .grid, .page-survey .masonry{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1px !important;
    padding:0 !important;
  }
.page-survey .card, .page-survey .native-card, .page-survey .news-card{
    grid-column: span 1 !important;
    width: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
.page-survey .card .image, .page-survey .native-card .image{
    aspect-ratio: 1/1 !important;
    height: auto !important;
    border-radius: 0 !important;
  }
.page-survey .card .image img, .page-survey .native-card .image img{
    border-radius: 0 !important;
  }
.page-survey .sp-lanes .tile{
    flex: 0 0 auto !important;
    width: calc(100vw / 3) !important;
  }
.page-survey .sp-lanes .tile .thumb{
    aspect-ratio: 1/1 !important;
  }
.page-survey .ad-slot{ 
    width: 100% !important;
    margin: 10px 0 !important;
  }}@media (min-width:1180px){.page-survey .right-gallery{ grid-template-columns: 1fr 1fr; gap:2px; }
.page-survey .vtile .thumb{ aspect-ratio:1/1 !important; height:auto !important; }
.page-survey .card .image{ aspect-ratio:1/1 !important; height:auto !important; }
.page-survey .vtile .thumb img, .page-survey .card .image img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; }}@media (max-width: 768px){.page-survey .band{ padding:0 !important; width:100vw !important; }
.page-survey .left-hero{ 
    padding:20px !important; 
    box-shadow:none !important; 
    border-radius:0 !important; 
    min-height:auto !important;
  }
.page-survey .sp-lanes{ 
    margin:20px 0 !important; 
    padding:0 !important; 
    width:100vw !important;
  }
.page-survey .lane-track{ padding:0 !important; gap:1px !important; }
.page-survey .tile{ margin:0 !important; }}@media (min-width: 1180px){.page-survey .right-gallery{
    grid-template-columns: 1fr 1fr !important;
    gap: 2px !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }
.page-survey .vcol{ 
    width: 100% !important; 
    height: 100% !important;
    overflow: hidden !important;
  }
.page-survey .vtile{ 
    width: 100% !important;
    display: block !important;
  }
.page-survey .vtile .thumb{
    width: 100% !important;
    aspect-ratio: 1/1 !important;
    height: auto !important;
    min-height: unset !important;
    overflow: hidden !important;
    background: #eee !important;
  }
.page-survey .vtile .thumb img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    aspect-ratio: 1 / 1 !important;
    display: block !important;
  }}@media (max-width: 768px){.page-survey #highlight, .page-survey #highlight .band, .page-survey .left-hero, .page-survey .sp-lanes, .page-survey .sp-lanes .lane, .page-survey .sp-lanes .lane-track{
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }
.page-survey .sp-lanes .lane-track{ gap: 0 !important; padding: 0 !important; }
.page-survey .sp-lanes .tile{
    width: 100vw !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
.page-survey .sp-lanes .tile .thumb{
    width: 100vw !important;
    height: auto !important;
    overflow: hidden !important;
  }}
.page-survey img, .page-survey .ad-slot, .page-survey .ad-slot img, .page-survey .tile img, .page-survey .card img, .page-survey .vtile img, .page-survey .thumb, .page-survey .vtile .thumb, .page-survey .tile .thumb{ border-radius: 0 !important; }@media (min-width:1180px){.page-survey .right-gallery{
    grid-template-columns: 400px 400px !important;
    column-gap: 24px !important;
  }
.page-survey .vcol{ width: 400px !important; }
.page-survey .vcol .vtile, .page-survey .vcol .card, .page-survey .vcol .ad-slot{
    width: 400px !important;
  }
.page-survey .vcol .vtile .thumb, .page-survey .vcol .card .thumb, .page-survey .vcol .ad-slot{
    width: 400px !important;
    height: 400px !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 400px !important;
  }
.page-survey .vcol .vtile .thumb img, .page-survey .vcol .card .thumb img, .page-survey .vcol .ad-slot img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
.page-survey .vcol{ overflow: hidden !important; }
.page-survey .vcol .v-track{ gap: 22px !important; }}@media (max-width:768px){.page-survey .band{ padding-left:0 !important; padding-right:0 !important; }
.page-survey .left-hero{
    margin-left:0 !important; margin-right:0 !important;
    padding-left:0 !important; padding-right:0 !important;
    border-radius:0 !important;
  }
.page-survey .sp-lanes, .page-survey .lane, .page-survey .lane-track, .page-survey .tile{
    margin-left:0 !important; margin-right:0 !important;
  }}
.page-survey img, .page-survey .ad-slot, .page-survey .ad-slot img, .page-survey .vcol .vtile, .page-survey .vcol .vtile img, .page-survey .vcol .card, .page-survey .vcol .card img{
  border-radius:0 !important;
}@media (min-width:1180px){.page-survey .right-gallery{
    grid-template-columns: 400px 400px !important;
    column-gap: 24px !important;
  }
.page-survey .vcol{ width:400px !important; overflow:hidden !important; }
.page-survey .vcol .vtile, .page-survey .vcol .card{ width:400px !important; }
.page-survey .vcol .vtile .thumb, .page-survey .vcol .card .thumb{
    width:400px !important;
    height:400px !important;
    min-height:400px !important;
    aspect-ratio: 1 / 1 !important;
  }
.page-survey .vcol .card .image{
    width:400px !important;
    height:400px !important;
    min-height:400px !important;
    aspect-ratio: 1 / 1 !important;
  }
.page-survey #news .card .image, .page-survey #newspaper-ads .card .image{
    width:100% !important;
    height:auto !important;
    min-height:auto !important;
    aspect-ratio: 1 / 1 !important;
  }
.page-survey .vcol .vtile .thumb img, .page-survey .vcol .card .thumb img, .page-survey .vcol .card .image img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
  }
.page-survey #news .card .image img, .page-survey #newspaper-ads .card .image img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
  }
.page-survey .vcol .v-track{ gap:22px !important; }}
.page-survey .vtile .thumb{ min-height:400px !important; }@media (max-width:768px){.page-survey .band{ padding-left:0 !important; padding-right:0 !important; }
.page-survey .left-hero{
    margin-left:0 !important; margin-right:0 !important;
    padding-left:0 !important; padding-right:0 !important;
    border-radius:0 !important;
  }
.page-survey .sp-lanes, .page-survey .lane, .page-survey .lane-track{ padding-left:0 !important; padding-right:0 !important; }}@media (max-width: 768px){.page-survey .sp-lanes .tile{
    width: 100vw !important;
  }
.page-survey .sp-lanes .tile .thumb{
    width: 100vw !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;     
    overflow: hidden !important;
    background: #eee !important;
  }
.page-survey .sp-lanes .tile .thumb img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }}@media (min-width:1180px){.page-survey .right-gallery{ 
    grid-template-columns:400px 400px !important; 
    column-gap:24px !important; 
    width:824px !important;
    max-width:100% !important;
  }
.page-survey .vcol{ width:400px !important; overflow:hidden !important; }
.page-survey .vtile, .page-survey .vcol .card{ width:400px !important; }
.page-survey .vtile .thumb, .page-survey .vcol .card .thumb{
    width:400px !important; height:400px !important; min-height:400px !important; aspect-ratio: 1 / 1 !important;
  }
.page-survey .vcol .card .image{
    width:400px !important; height:400px !important; min-height:400px !important; aspect-ratio: 1 / 1 !important;
  }
.page-survey #news .card .image, .page-survey #newspaper-ads .card .image{
    width:100% !important;
    height:auto !important;
    min-height:auto !important;
    aspect-ratio: 1 / 1 !important;
  }
.page-survey .vtile .thumb img, .page-survey .vcol .card .thumb img, .page-survey .vcol .card .image img{
    width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; display:block !important;
  }
.page-survey #news .card .image img, .page-survey #newspaper-ads .card .image img{
    width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; display:block !important;
  }}@media (max-width:768px){.page-survey #highlight, .page-survey #highlight .band, .page-survey .left-hero, .page-survey .sp-lanes, .page-survey .lane, .page-survey .lane-track{ width:100vw !important; max-width:100vw !important; margin:0 !important; padding:0 !important; }
.page-survey .sp-lanes .lane-track{ gap:0 !important; padding:0 !important; }
.page-survey .sp-lanes .tile{ width:100vw !important; border-radius:0 !important; box-shadow:none !important; }
.page-survey .sp-lanes .tile .thumb{ width:100vw !important; height:auto !important; aspect-ratio:16/9 !important; overflow:hidden !important; }
.page-survey .sp-lanes .tile .thumb img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; display:block !important; }}@media (min-width:1180px){.page-survey .right-gallery{
    grid-template-columns: 400px 400px !important;
    column-gap: 24px !important;
  }
.page-survey .vcol{ width: 400px !important; overflow: hidden !important; }
.page-survey .vcol .v-track{ gap: 22px !important; }
.page-survey .vcol .vtile{ width: 400px !important; }
.page-survey .vcol .vtile .thumb{
    width: 400px !important;
    height: 400px !important;
    min-height: 400px !important;
    
    aspect-ratio: unset !important;
  }
.page-survey .vcol .vtile .thumb img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
.page-survey .vcol .ad-rect{ height: 250px !important; }
.page-survey .vcol .ad-half{ height: 600px !important; }
.page-survey .vcol .ad-slot img{
    width: 100% !important; height: 100% !important; object-fit: cover !important;
  }}@media (min-width:1180px){.page-survey .right-gallery{ 
    grid-template-columns:400px 400px !important; 
    column-gap:24px !important; 
    width:824px !important;
    max-width:100% !important;
  }
.page-survey .right-gallery .vcol{ width:400px !important; overflow:hidden !important; }
.page-survey .right-gallery .vcol .v-track{ gap:22px !important; }
.page-survey .right-gallery .vtile{ width:400px !important; }
.page-survey .right-gallery .vtile .thumb{ width:400px !important; height:400px !important; min-height:400px !important; aspect-ratio:unset !important; }
.page-survey .right-gallery .vtile .thumb img{
    display:block !important;
    inline-size:100% !important; 
    block-size:100% !important;  
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center !important;
  }
.page-survey .right-gallery img{ aspect-ratio:auto !important; }}@media (min-width:1180px){.page-survey .right-gallery .vtile{ display:block !important; width:400px !important; }
.page-survey .right-gallery .vtile .thumb{ display:block !important; position:relative !important; width:400px !important; height:400px !important; min-height:400px !important; overflow:hidden !important; }
.page-survey .right-gallery .vtile .thumb img{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; max-width:none !important; max-height:none !important; aspect-ratio:auto !important; }
.page-survey .right-gallery{ 
    grid-template-columns:400px 400px !important; 
    column-gap:24px !important; 
    width:824px !important;
    max-width:100% !important;
  }}@media (min-width:1180px){.page-survey .right-gallery{ grid-template-columns:400px 400px !important; column-gap:24px !important; width:824px !important; max-width:100% !important; }
.page-survey .right-gallery .vcol{ width:400px !important; overflow:hidden !important; }
.page-survey .right-gallery .vcol .v-track{ gap:22px !important; }
.page-survey .right-gallery .vtile{ width:400px !important; display:block !important; }
.page-survey .right-gallery .vtile .thumb{ position:relative !important; width:400px !important; height:400px !important; min-height:400px !important; aspect-ratio:auto !important; overflow:hidden !important; }
.page-survey .right-gallery .vtile .thumb img{
    position:absolute !important; inset:0 !important;
    width:100% !important; height:100% !important;
    max-width:none !important; max-height:none !important;
    object-fit:cover !important; object-position:center !important;
    transform:none !important;
  }}@media (min-width:1180px){.page-survey .right-gallery{ grid-template-columns:400px 400px !important; column-gap:24px !important; width:824px !important; max-width:100% !important; }
.page-survey .right-gallery .vcol{ width:400px !important; overflow:hidden !important; }
.page-survey .right-gallery .vcol *{ max-width:none !important; }
.page-survey .right-gallery .vtile{ width:400px !important; display:block !important; }
.page-survey .right-gallery .vtile .thumb{ position:relative !important; display:block !important; inline-size:400px !important; block-size:400px !important; width:400px !important; height:400px !important; min-height:400px !important; overflow:hidden !important; }
.page-survey .right-gallery .vtile .thumb img{ position:absolute !important; inset:0 !important; inline-size:100% !important; block-size:100% !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; }}@media (min-width:1180px){.page-survey .right-gallery .vtile .thumb{
    display:block !important;
    position:relative !important;
    width:400px !important;
    height:400px  !important;
    min-height:400px !important;
    line-height:0 !important;
    padding:0 !important; margin:0 !important; border:0 !important;
    overflow:hidden !important;
  }
.page-survey .right-gallery .vtile .thumb img{
    position:absolute !important; inset:0 !important;
    width:100% !important; height:100% !important;
    max-width:none !important; max-height:none !important;
    object-fit:cover !important; object-position:center !important;
    aspect-ratio:auto !important; transform:none !important;
    display:block !important;
  }
.page-survey .right-gallery{ grid-template-columns:400px 400px !important; column-gap:24px !important; width:824px !important; max-width:100% !important; }
.page-survey .right-gallery .vcol{ width:400px !important; overflow:hidden !important; }
.page-survey .right-gallery .vcol .v-track{ gap:22px !important; padding:0 !important; }}@media (max-width:768px){.page-survey .band{
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
.page-survey #vcolA{
    order: 1 !important;
    display: block !important;
    width: 100vw !important;
    height: auto !important;
    position: static !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: white !important;
  }
.page-survey .left-hero{ 
    order: 2 !important;
    display: flex !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 20px 24px !important;
    background: white !important;
  }
.page-survey .sp-lanes{ 
    order: 3 !important;
    display: block !important;
    background: white !important;
  }
.page-survey #vcolB{
    order: 4 !important;
    display: block !important;
    width: 100vw !important;
    height: auto !important;
    position: static !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: white !important;
  }
.page-survey .right-gallery{
    display: contents !important;
  }
.page-survey #vcolA .v-track, .page-survey #vcolB .v-track{
    animation: none !important;
    animation-play-state: paused !important;
    position: static !important;
    transform: none !important;
    display: block !important;
    gap: 0 !important;
    background: white !important;
    padding: 0 !important;
    margin: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
  }
.page-survey #vcolA .v-track > *, .page-survey #vcolB .v-track > *{
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }
.page-survey #vcolA .vtile:not(.ad-half-vertical):not(.ad-rect-vertical), .page-survey #vcolB .vtile:not(.ad-half-vertical):not(.ad-rect-vertical){
    width: 100vw !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    background: white !important;
    border: none !important;
    box-shadow: none !important;
  }
.page-survey .vtile + *, .page-survey a.vtile + *{
    margin-top: 0 !important;
  }
.page-survey #vcolA .vtile:not(.ad-half-vertical):not(.ad-rect-vertical) .thumb, .page-survey #vcolB .vtile:not(.ad-half-vertical):not(.ad-rect-vertical) .thumb{
    width: 100vw !important;
    height: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
  }
.page-survey #vcolA .vtile:not(.ad-half-vertical):not(.ad-rect-vertical) .cap, .page-survey #vcolB .vtile:not(.ad-half-vertical):not(.ad-rect-vertical) .cap{
    padding: 4px 8px !important;
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
  }
.page-survey #vcolA .vtile:not(.ad-half-vertical):not(.ad-rect-vertical) .meta, .page-survey #vcolB .vtile:not(.ad-half-vertical):not(.ad-rect-vertical) .meta{
    font-size: 0.7rem !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
  }
.page-survey #vcolA .vtile.ad-half-vertical, .page-survey #vcolB .vtile.ad-half-vertical{
    width: 100vw !important;
    height: calc(100vw * 1.5) !important; 
    margin-bottom: 1px !important;
    display: block !important;
  }
.page-survey #vcolA .vtile.ad-rect-vertical, .page-survey #vcolB .vtile.ad-rect-vertical{
    width: 100vw !important;
    height: calc(100vw * 0.5) !important; 
    margin-bottom: 1px !important;
    display: block !important;
  }
.page-survey #vcolA .ad-rect-vertical, .page-survey #vcolB .ad-rect-vertical, .page-survey #vcolA .ad-slot.ad-rect-vertical, .page-survey #vcolB .ad-slot.ad-rect-vertical{
    width: 100vw !important;
    height: calc(100vw * 0.5) !important; 
    min-width: 100vw !important;
    min-height: calc(100vw * 0.5) !important;
    max-width: 100vw !important;
    max-height: calc(100vw * 0.5) !important;
    display: flex !important;
  }
.page-survey #vcolA .ad-half-vertical, .page-survey #vcolB .ad-half-vertical, .page-survey #vcolA .ad-slot.ad-half-vertical, .page-survey #vcolB .ad-slot.ad-half-vertical{
    width: 100vw !important;
    height: calc(100vw * 1.5) !important; 
    min-width: 100vw !important;
    min-height: calc(100vw * 1.5) !important;
    max-width: 100vw !important;
    max-height: calc(100vw * 1.5) !important;
    display: flex !important;
  }
.page-survey #vcolA .ad-half-vertical img, .page-survey #vcolB .ad-half-vertical img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; 
    background: #f8fafc; 
  }
.page-survey #vcolA .ad-rect-vertical img, .page-survey #vcolB .ad-rect-vertical img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; 
    background: #f8fafc; 
  }
.page-survey #vcolB{
    visibility: visible !important;
    opacity: 1 !important;
  }
.page-survey #vcolA, .page-survey #vcolB{
    border-top: 1px solid var(--border);
    padding-top: 10px;
    padding-bottom: 10px;
  }
.page-survey .band ~ section{
    order: 6 !important;
  }
.page-survey .ad-half-vertical, .page-survey .vtile.ad-half-vertical, .page-survey .ad-slot.ad-half-vertical{
    width: 100vw !important;
    height: calc(100vw * 1.5) !important;
    min-height: calc(100vw * 1.5) !important;
    max-height: calc(100vw * 1.5) !important;
  }
.page-survey .vcol .vtile.ad-half-vertical, .page-survey .v-track .vtile.ad-half-vertical, .page-survey .band .vtile.ad-half-vertical{
    width: 100vw !important;
    height: calc(100vw * 1.5) !important;
  }
.page-survey .ad-half-vertical > *, .page-survey .vtile.ad-half-vertical > *:not(.ad-badge){
    width: 100% !important;
    height: 100% !important;
  }
.page-survey .halfpage-ad-wrapper, .page-survey .mpu-ad-wrapper{
    width: 100vw !important;
    overflow: hidden !important;
    position: relative !important;
  }}@media screen and (max-width:768px){.page-survey .ad-slot{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
  }
.page-survey .ad-half-vertical, .page-survey .vtile.ad-half-vertical, .page-survey .ad-slot.ad-half-vertical, .page-survey div.ad-half-vertical, .page-survey div.vtile.ad-half-vertical, .page-survey #vcolA .ad-half-vertical, .page-survey #vcolB .ad-half-vertical, .page-survey #vcolA .vtile.ad-half-vertical, .page-survey #vcolB .vtile.ad-half-vertical, .page-survey #vcolA .ad-slot.ad-half-vertical, .page-survey #vcolB .ad-slot.ad-half-vertical{
    width: 100vw !important;
    height: calc(100vw * 1.5) !important;
    min-width: 100vw !important;
    min-height: calc(100vw * 1.5) !important;
    max-width: 100vw !important;
    max-height: calc(100vw * 1.5) !important;
    aspect-ratio: 2/3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8fafc !important;
    overflow: hidden !important;
    position: relative !important;
    margin-bottom: 1px !important;
  }
.page-survey .vtile.ad-half-vertical .thumb, .page-survey .ad-half-vertical .thumb{
    display: none !important;
  }
.page-survey .vtile:not(.ad-half-vertical):not(.ad-rect-vertical){
    
  }@media (max-width: 768px) {.page-survey .halfpage-ad-wrapper, .page-survey .mpu-ad-wrapper{
      
      aspect-ratio: unset !important;
      border-radius: 0 !important;
      width: 100vw !important;
      height: auto !important;
      overflow: hidden !important;
      position: relative !important;
    }
.page-survey .halfpage-ad-wrapper > *, .page-survey .mpu-ad-wrapper > *{
      border-radius: 0 !important;
      overflow: hidden !important;
    }
.page-survey .halfpage-ad-wrapper div[style*="position:absolute"], .page-survey .mpu-ad-wrapper div[style*="position:absolute"]{
      width: auto !important;
      height: auto !important;
      max-width: 60px !important;
      max-height: 30px !important;
      white-space: nowrap !important;
      overflow: hidden !important;
    }}
.page-survey .ad-slot[data-ad-type="halfpage"]:not(:has(img)), .page-survey .ad-slot[data-ad-type="mpu"]:not(:has(img)){
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
  }
.page-survey .ad-slot[data-ad-type="halfpage"]::after, .page-survey .ad-slot[data-ad-type="mpu"]::after{
    content: attr(data-ad-type) " 広告スペース" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
  }
.page-survey .ad-half-vertical img, .page-survey .vtile.ad-half-vertical img, .page-survey .ad-half-vertical > img, .page-survey .ad-half-vertical a img, .page-survey .vtile.ad-half-vertical a img, .page-survey .ad-slot.ad-half-vertical img, .page-survey .ad-slot.ad-half-vertical a img, .page-survey #vcolA .ad-half-vertical img, .page-survey #vcolB .ad-half-vertical img{
    width: 100% !important;
    height: 100% !important;
    min-width: auto !important;
    min-height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 auto !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
.page-survey .ad-half-vertical a, .page-survey .vtile.ad-half-vertical a, .page-survey .ad-slot.ad-half-vertical a{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
  }
.page-survey .ad-badge{
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 10 !important;
    width: auto !important;
    height: auto !important;
    max-width: 60px !important;
    max-height: 30px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
.page-survey .ad-half-vertical > *:not(.ad-badge), .page-survey .vtile.ad-half-vertical > *:not(.ad-badge){
    max-width: 100% !important;
    max-height: 100% !important;
  }
.page-survey .ad-half-vertical svg, .page-survey .vtile.ad-half-vertical svg, .page-survey .ad-half-vertical canvas, .page-survey .vtile.ad-half-vertical canvas, .page-survey .ad-half-vertical video, .page-survey .vtile.ad-half-vertical video{
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }
.page-survey .ad-half-vertical::before, .page-survey .vtile.ad-half-vertical::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  }
.page-survey .ad-rect-vertical img, .page-survey .vtile.ad-rect-vertical img, .page-survey .ad-slot.ad-rect-vertical img{
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
  }}@media (min-width:1180px){.page-survey .right-gallery a.vtile{
    display:block !important;
    min-height:400px !important;    
  }
.page-survey .right-gallery .vtile .thumb, .page-survey .right-gallery .ad-slot{
    height:400px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
  }
.page-survey .right-gallery .vtile .thumb img, .page-survey .right-gallery .ad-slot img{
    width:auto !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    max-width:none !important;
    aspect-ratio:auto !important;
    display:block !important;
  }
.page-survey .right-gallery .vtile .thumb > *{ position:static !important; }
.page-survey .right-gallery .vtile .thumb::before, .page-survey .right-gallery .vtile .thumb::after{ content:none !important; }}
.page-survey .kw-bar{
  position:relative;
  z-index:90;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);
  overflow:hidden;
  min-height:48px;
}
.page-survey .kw-inner{ width:min(1280px,96vw); margin:0 auto; padding:8px 16px; }
.page-survey .kw-track{
  display:flex; gap:12px; align-items:center; white-space:nowrap;
  will-change:transform;
  animation:kw-marquee 24s linear infinite;
}
.page-survey .kw-pill{
  flex:0 0 auto; font-size:.92rem; color:#1f2937;
  background:#f6f7f9; border:1px solid #e5e7eb; border-radius:999px;
  padding:8px 14px; line-height:1; text-decoration:none;
}
.page-survey .kw-bar:hover .kw-track{ animation-play-state:paused; }@keyframes kw-marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }@media (max-width:768px){.page-survey .kw-inner{ padding:8px 12px; }
.page-survey .kw-pill{ font-size:.9rem; padding:8px 12px; }}@media (min-width:1180px){.page-survey .kw-bar{ display:none !important; }}
.page-survey .sp-only-market{
  display:block;
}@media (min-width:1180px){.page-survey .sp-only-market{
    display:none !important;
  }}@media (max-width:1179px){.page-survey #highlight .tomato-market-data{
    display:none !important;
  }}@media (min-width:1180px){.page-survey #highlight .tomato-market-data{
    display:block !important;
  }
.page-survey #highlight .band{
    position:relative;
  }}
.page-survey .tomato-market-data{
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  padding: 0;
}
.page-survey .market-title{
  font-size: 1.3rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px 0;
  letter-spacing: 0.02em;
}
.page-survey .market-date{
  font-size: 0.8rem;
  color: #64748b;
  margin: 0;
}
.page-survey .market-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.page-survey .market-card{
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.page-survey .market-card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  transition: opacity 0.2s ease;
}
.page-survey .market-card[data-variety="large"]::before{
  background: linear-gradient(90deg, #ef4444, #dc2626);
}
.page-survey .market-card[data-variety="medium"]::before{
  background: linear-gradient(90deg, #f97316, #ea580c);
}
.page-survey .market-card[data-variety="mini"]::before{
  background: linear-gradient(90deg, #f59e0b, #d97706);
}
.page-survey .market-card[data-variety="first"]::before{
  background: linear-gradient(90deg, #eab308, #ca8a04);
}
.page-survey .market-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #d1d5db;
}
.page-survey .variety-info{
  flex: 1;
  min-width: 0;
  text-align: center;
}
.page-survey .variety-name{
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 2px 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.page-survey .market-card[data-variety="large"] .variety-name{
  color: #dc2626;
}
.page-survey .market-card[data-variety="medium"] .variety-name{
  color: #ea580c;
}
.page-survey .market-card[data-variety="mini"] .variety-name{
  color: #d97706;
}
.page-survey .market-card[data-variety="first"] .variety-name{
  color: #ca8a04;
}
.page-survey .variety-code{
  font-size: 0.7rem;
  color: #9ca3af;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.page-survey .card-body{
  display: flex;
  flex-direction: column;
  gap: 0;
}
.page-survey .price-section{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.page-survey .price-area{
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.page-survey .price-display{
  display: flex;
  align-items: baseline;
  gap: 3px;
  white-space: nowrap;
}
.page-survey .current-price{
  font-size: 1.75rem;
  font-weight: 800;
  color: #111827;
  line-height: 1;
  letter-spacing: -0.02em;
}
.page-survey .price-unit{
  font-size: 0.85rem;
  color: #6b7280;
  font-weight: 600;
}
.page-survey .price-change{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: #f3f4f6;
  width: fit-content;
}
.page-survey .price-change.trend-up{
  color: #ef4444;
  background: #fef2f2;
}
.page-survey .price-change.trend-down{
  color: #3b82f6;
  background: #eff6ff;
}
.page-survey .change-icon{
  font-size: 1rem;
  font-weight: 700;
}
.page-survey .change-value{
  font-weight: 700;
}
.page-survey .change-label{
  font-size: 0.8rem;
  opacity: 0.9;
}
.page-survey .volume-area{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 12px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #f3f4f6;
  width: 90px;
  flex-shrink: 0;
}
.page-survey .volume-label{
  font-size: 0.65rem;
  color: #9ca3af;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.page-survey .volume-display{
  display: flex;
  align-items: baseline;
  gap: 3px;
  white-space: nowrap;
}
.page-survey .volume-value{
  font-size: 1.3rem;
  font-weight: 800;
  color: #111827;
  line-height: 1;
}
.page-survey .volume-unit{
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 600;
}
.page-survey .data-source{
  font-size: 0.75rem;
  color: #94a3b8;
  margin: 0;
  font-weight: 500;
}@media (min-width: 1180px) {.page-survey .tomato-market-data{
    position: absolute;
    top: 200px;
    left: 0;
    right: auto;
    width: 450px;
    z-index: 10;
  }
.page-survey #highlight .left-hero > p{
    margin-top: 580px !important;
  }}@media (min-width: 768px) and (max-width: 1179px) {.page-survey .tomato-market-data{
    max-width: 100%;
  }
.page-survey .market-grid{
    gap: 14px;
  }
.page-survey .market-card{
    padding: 16px;
  }
.page-survey .variety-name{
    font-size: 1.05rem;
  }
.page-survey .current-price{
    font-size: 1.9rem;
  }
.page-survey .volume-area{
    width: 95px;
    padding: 10px 14px;
    align-items: center;
  }
.page-survey .volume-value{
    font-size: 1.4rem;
  }}@media (max-width: 767px) {.page-survey .tomato-market-data.sp-only-market{
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 12px 6px;
    background: #fafafa;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
.page-survey .market-title{
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 1.3;
  }
.page-survey .market-date{
    font-size: 0.65rem;
    color: #64748b;
    line-height: 1.4;
  }
.page-survey .market-grid{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }@media (min-width: 520px) {.page-survey .market-grid{
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }}@media (min-width: 700px) {.page-survey .market-grid{
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }}
.page-survey .data-source{
    font-size: 0.65rem;
    color: #94a3b8;
  }
.page-survey .market-card{
    display: block;
    padding: 10px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: visible;
  }
.page-survey .variety-info{
    display: block;
    text-align: center;
  }
.page-survey .variety-name{
    font-size: 0.9rem;
    display: block;
    margin-bottom: 2px;
  }
.page-survey .variety-code{
    font-size: 0.65rem;
    display: block;
  }
.page-survey .card-body{
    display: block;
  }
.page-survey .price-section{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }
.page-survey .price-area{
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
  }
.page-survey .price-display{
    display: flex;
    align-items: baseline;
    gap: 3px;
    white-space: nowrap;
  }
.page-survey .current-price{
    font-size: 1.6rem;
  }
.page-survey .price-unit{
    font-size: 0.7rem;
  }
.page-survey .price-change{
    display: inline-flex;
    font-size: 0.7rem;
    padding: 2px 6px;
  }
.page-survey .volume-area{
    padding: 6px 10px;
    width: auto;
    min-width: 55px;
    flex-shrink: 0;
    align-items: center;
  }
.page-survey .volume-label{
    font-size: 0.6rem;
  }
.page-survey .volume-value{
    font-size: 1.2rem;
  }
.page-survey .volume-unit{
    font-size: 0.7rem;
  }}@media (max-width: 1179px) {.page-survey #highlight .tomato-market-data{
    display: none !important;
  }}@media (min-width: 1180px) {.page-survey .sp-only-market{
    display: none !important;
  }
.page-survey #highlight .tomato-market-data{
    display: block !important;
  }}@keyframes kw-marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }@media (max-width:768px){.page-survey .kw-inner{ padding:8px 12px; }
.page-survey .kw-pill{ font-size:.9rem; padding:8px 12px; }}
.page-survey main img, .page-survey section img, .page-survey .article img, .page-survey .card img, .page-survey .list img, .page-survey .slider img, .page-survey .ad img, .page-survey .ads img, .page-survey .paper img, .page-survey .feature img, .page-survey .column img, .page-survey .video img, .page-survey .news img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}
.page-survey main figure, .page-survey main .thumb, .page-survey main .image, .page-survey main .media, .page-survey section figure, .page-survey section .thumb, .page-survey section .image, .page-survey section .media, .page-survey .card .thumb, .page-survey .card .image, .page-survey .card .media, .page-survey .list .thumb, .page-survey .list .image, .page-survey .list .media, .page-survey .slider .thumb, .page-survey .slider .image, .page-survey .slider .media, .page-survey .ad .thumb, .page-survey .ad .image, .page-survey .ad .media, .page-survey .ads .thumb, .page-survey .ads .image, .page-survey .ads .media, .page-survey .paper .thumb, .page-survey .paper .image, .page-survey .paper .media, .page-survey .feature .thumb, .page-survey .feature .image, .page-survey .feature .media, .page-survey .column .thumb, .page-survey .column .image, .page-survey .column .media, .page-survey .video .thumb, .page-survey .video .image, .page-survey .video .media, .page-survey .news .thumb, .page-survey .news .image, .page-survey .news .media{
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
}
.page-survey img{ max-width:100%; display:block }
.page-survey .container{ width:min(1200px,92vw); margin:0 auto }
.page-survey .kw-bar{
    position:relative;
    z-index:90;
    background:rgba(255,255,255,.9);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid var(--border);
    overflow:hidden;
    min-height:48px;
  }
.page-survey .kw-inner{ width:min(1280px,96vw); margin:0 auto; padding:8px 16px; }
.page-survey .kw-track{
    display:flex; gap:12px; align-items:center; white-space:nowrap;
    will-change:transform;
    animation:kw-marquee 24s linear infinite;
  }
.page-survey .kw-pill{
    flex:0 0 auto; font-size:.92rem; color:#1f2937;
    background:#f6f7f9; border:1px solid #e5e7eb; border-radius:999px;
    padding:8px 14px; line-height:1; text-decoration:none;
  }
.page-survey .kw-bar:hover .kw-track{ animation-play-state:paused; }@keyframes kw-marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }@media (max-width:768px){.page-survey .kw-inner{ padding:8px 12px; }
.page-survey .kw-pill{ font-size:.9rem; padding:8px 12px; }}@media (min-width:1180px){.page-survey .kw-bar{ display:none !important; }}
.page-survey main{ max-width:1400px; margin:0 auto; }
.page-survey .page-title{ font-size:2.5rem; font-weight:700; margin-bottom:16px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.page-survey .page-subtitle{ font-size:1.125rem; color:var(--muted); line-height:1.6; max-width:800px; margin:0 auto }
.page-survey .article-container{
    max-width:1400px;
    margin:0 auto;
    padding:24px 20px 40px;
  }@media (max-width:768px){.page-survey .article-container{ padding:20px 16px 32px; }}
.page-survey .article-category{
    display:inline-block;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    color:#fff;
    padding:4px 16px;
    border-radius:20px;
    font-size:0.75rem;
    font-weight:600;
    margin-bottom:12px;
    letter-spacing:0.05em;
  }
.page-survey .article-title{
    font-size:24px;
    font-weight:700;
    line-height:1.3;
    margin:0 0 8px;
    color:var(--text);
  }
.page-survey .article-subtitle{
    font-size:clamp(0.875rem, 2vw, 1rem);
    color:var(--muted);
    font-weight:500;
    line-height:1.5;
  }
.page-survey .hero-banner{
    background:linear-gradient(135deg, #fff5f2 0%, #ffe8e0 100%);
    border-radius:16px;
    padding:40px;
    margin-bottom:40px;
    box-shadow:0 4px 12px rgba(224, 82, 61, 0.1);
  }
.page-survey .hero-content h2{ font-size:1.5rem; font-weight:700; margin-bottom:12px; color:var(--text) }
.page-survey .hero-content p{ font-size:1rem; line-height:1.8; color:var(--muted); margin-bottom:0 }@media (max-width: 768px) {.page-survey .hero-banner{ padding:30px 20px; text-align:center }}
.page-survey .stats-overview{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:24px;
    margin-bottom:40px;
  }
.page-survey .stat-card{
    background:#fff;
    border:2px solid var(--border);
    border-radius:12px;
    padding:24px;
    text-align:center;
    transition:all 0.3s;
  }
.page-survey .stat-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--accent) }
.page-survey .stat-icon{
    width:48px;
    height:48px;
    margin:0 auto 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    border-radius:12px;
  }
.page-survey .stat-icon svg{
    width:24px;
    height:24px;
    fill:#fff;
  }
.page-survey .stat-value{ font-size:2rem; font-weight:700; color:var(--accent); margin-bottom:8px }
.page-survey .stat-label{ font-size:0.938rem; color:var(--muted); font-weight:500 }
.page-survey .sample-section{
    background:#fafafa;
    padding:40px;
    border-radius:16px;
    margin:0 auto 40px;
    box-shadow:0 2px 8px rgba(0,0,0,0.05);
    display:none;
  }
.page-survey .sample-title{
    font-size:1.5rem;
    font-weight:700;
    margin:0 0 8px;
    display:flex;
    align-items:center;
    gap:12px;
    line-height:1.3;
    color:var(--text);
  }
.page-survey .sample-icon{
    width:32px;
    height:32px;
    min-width:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--accent);
    border-radius:8px;
    flex-shrink:0;
  }
.page-survey .sample-icon svg{
    width:18px;
    height:18px;
    fill:#fff;
  }
.page-survey .sample-description{
    font-size:0.938rem;
    color:var(--muted);
    margin:0 0 16px;
    line-height:1.7;
  }
.page-survey .sample-image-wrap{
    text-align:center;
    line-height:0;
    aspect-ratio:auto !important;
    overflow:visible !important;
    margin:0;
    padding:0;
    cursor:pointer;
  }
.page-survey .sample-image-wrap:focus{
    outline:2px solid var(--accent);
    outline-offset:4px;
  }
.page-survey .sample-image-wrap img{
    display:inline-block !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
    aspect-ratio:auto !important;
    max-height:240px;
    max-width:340px;
    margin:0;
    padding:0;
    border-radius:10px;
    border:1px solid var(--border);
    box-shadow:0 2px 12px rgba(0,0,0,0.08);
    cursor:pointer;
    transition:transform .2s ease, box-shadow .2s ease;
  }
.page-survey .sample-image-wrap:hover img,
.page-survey .sample-image-wrap:focus img{
    transform:scale(1.03);
    box-shadow:0 6px 20px rgba(0,0,0,0.12);
  }
.page-survey .sample-image-hint{
    text-align:center;
    margin:6px 0 0;
    font-size:0.813rem;
    color:var(--muted);
  }
.page-survey .sample-lightbox{
    display:none;
    position:fixed;
    inset:0;
    z-index:9999;
    background:rgba(0,0,0,0.75);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    align-items:center;
    justify-content:center;
    padding:24px;
    cursor:zoom-out;
  }
.page-survey .sample-lightbox.is-open{
    display:flex;
  }
.page-survey .sample-lightbox img{
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
    aspect-ratio:auto !important;
    max-width:90vw;
    max-height:88vh;
    border-radius:12px;
    box-shadow:0 8px 40px rgba(0,0,0,0.35);
  }
.page-survey .sample-lightbox-close{
    position:absolute;
    top:16px;
    right:20px;
    width:40px;
    height:40px;
    border:none;
    background:rgba(255,255,255,0.15);
    color:#fff;
    font-size:24px;
    line-height:40px;
    text-align:center;
    border-radius:50%;
    cursor:pointer;
    transition:background .2s;
  }
.page-survey .sample-lightbox-close:hover{
    background:rgba(255,255,255,0.3);
  }
.page-survey .search-section{
    background:#fafafa;
    padding:40px;
    border-radius:16px;
    margin:0 auto 40px;
    box-shadow:0 2px 8px rgba(0,0,0,0.05);
  }
.page-survey .search-title{
    font-size:1.5rem;
    font-weight:700;
    margin:0 0 8px;
    display:flex;
    align-items:center;
    gap:12px;
    line-height:1.3;
    color:var(--text);
  }
.page-survey .search-icon{
    width:32px;
    height:32px;
    min-width:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--accent);
    border-radius:8px;
    flex-shrink:0;
  }
.page-survey .search-icon svg{
    width:18px;
    height:18px;
    fill:#fff;
  }
.page-survey .search-subtitle{
    font-size:0.938rem;
    color:var(--muted);
    margin:0 0 24px;
    line-height:1.7;
  }
.page-survey .filter-group{ margin-bottom:24px }
.page-survey .filter-label{
    font-size:0.938rem;
    font-weight:600;
    margin-bottom:8px;
    display:block;
    color:var(--text);
  }
.page-survey .filter-select{
    width:100%;
    min-height:52px;
    padding:14px;
    border:2px solid var(--border);
    border-radius:8px;
    font-size:1rem;
    line-height:1.5;
    color:var(--text);
    background:#fff;
    transition:all 0.2s;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
  }
.page-survey .filter-select:focus{
    outline:none;
    border-color:var(--accent);
  }
.page-survey .btn-search{
    width:100%;
    padding:16px;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    color:#fff;
    border:none;
    border-radius:8px;
    font-size:1.125rem;
    font-weight:600;
    line-height:1.4;
    cursor:pointer;
    transition:transform 0.2s;
    box-shadow:none;
  }
.page-survey .btn-search:hover{
    transform:translateY(-2px);
  }
@media (max-width: 768px) {
  .page-survey .sample-section{
      padding:24px;
      margin-left:16px;
      margin-right:16px;
      border-radius:12px;
    }
  .page-survey .sample-title{
      font-size:1.25rem;
    }
  .page-survey .sample-image-wrap img{
      max-height:220px;
      max-width:80%;
      border-radius:8px;
    }
  .page-survey .sample-lightbox img{
      max-width:95vw;
      max-height:85vh;
      border-radius:8px;
    }
}
@media (max-width: 768px) {
  .page-survey .search-section{
      padding:24px;
    }
}
.page-survey .survey-section{ margin-bottom:60px }
.page-survey .association-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2px;
    margin-top: 32px;
  }@media (max-width: 768px) {.page-survey .association-grid{
      gap: 1px;
    }}
.page-survey .association-tile{
    aspect-ratio: 1 / 1;
    position: relative;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s;
  }
.page-survey .association-tile:hover{
    transform: translateY(-2px);
  }
.page-survey .association-tile-img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #eee;
    overflow: hidden;
  }
.page-survey .association-tile-img.is-blurred::after{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
  }
.page-survey .association-tile-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
.page-survey .association-tile-img.is-blurred img{
    filter: blur(6px) brightness(0.9);
    transform: scale(1.06);
  }
.page-survey .association-tile-overlay{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    background: rgba(0,0,0,0.6);
    color: #fff;
  }
.page-survey .association-tile-prefecture{
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--accent-2);
    margin-bottom: 4px;
  }
.page-survey .association-tile-name{
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
  }@media (max-width: 768px) {.page-survey .association-tile-overlay{
      padding: 8px;
    }
.page-survey .association-tile-name{
      font-size: 0.7rem;
    }}
.page-survey .survey-detail{ background: linear-gradient(135deg, #fff5f5 0%, #fff8f0 100%); padding: 60px 0; margin-bottom: 60px; }
.page-survey .survey-detail .container{ max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.page-survey .survey-detail-title{ font-size: 2rem; font-weight: 800; color: var(--primary); margin-bottom: 16px; }
.page-survey .survey-detail-subtitle{ font-size: 1.25rem; font-weight: 700; color: #333; margin-bottom: 8px; }
.page-survey .survey-detail-description{ font-size: 1rem; color: var(--muted); }
.page-survey .detail-section{ background: white; border-radius: 12px; padding: 32px; margin-bottom: 32px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.page-survey .detail-section-icon{ width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; align-items: center; justify-content: center; margin-right: 16px; flex-shrink: 0; }
.page-survey .detail-section-icon svg{ width: 28px; height: 28px; fill: white; }
.page-survey .detail-section-title{ font-size: 1.5rem; font-weight: 700; color: #333; }
.page-survey .detail-content{ display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.page-survey .detail-text{ line-height: 1.8; color: #555; }
.page-survey .detail-text p{ margin-bottom: 16px; }
.page-survey .detail-highlight{ background: #fff9f0; padding: 16px; border-left: 4px solid var(--accent); border-radius: 4px; margin: 16px 0; }
.page-survey .detail-chart{ background: #f8f9fa; padding: 24px; border-radius: 8px; }
.page-survey .chart-title-small{ font-size: 0.875rem; font-weight: 700; color: #666; margin-bottom: 16px; text-align: center; }
.page-survey .simple-bar-chart{ display: flex; flex-direction: column; gap: 12px; }
.page-survey .simple-bar-item{ display: flex; align-items: center; gap: 12px; }
.page-survey .simple-bar-label{ min-width: 120px; font-size: 0.875rem; color: #555; }
.page-survey .simple-bar-track{ flex: 1; height: 32px; background: #e0e0e0; border-radius: 4px; position: relative; overflow: hidden; }
.page-survey .simple-bar-fill{ height: 100%; background: linear-gradient(90deg, #4CAF50, #66BB6A); display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; color: white; font-weight: 700; font-size: 0.875rem; transition: width 0.6s ease; }@media (max-width: 768px) {.page-survey .survey-detail{ padding: 40px 0; }
.page-survey .survey-detail-title{ font-size: 1.5rem; }
.page-survey .survey-detail-subtitle{ font-size: 1.125rem; }
.page-survey .detail-section{ padding: 24px 16px; margin-bottom: 24px; }
.page-survey .detail-section-title{ font-size: 1.25rem; }
.page-survey .detail-content{ grid-template-columns: 1fr; gap: 24px; }
.page-survey .detail-section-icon{ width: 40px; height: 40px; }
.page-survey .detail-section-icon svg{ width: 24px; height: 24px; }}
.page-survey .section-title{
    font-size:1.75rem;
    font-weight:700;
    margin-bottom:32px;
    padding-bottom:16px;
    border-bottom:3px solid var(--accent);
  }
.page-survey .chart-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(400px, 1fr));
    gap:32px;
    margin-bottom:40px;
  }
.page-survey .chart-card{
    background:#fff;
    border:2px solid var(--border);
    border-radius:12px;
    padding:24px;
    box-shadow:0 2px 8px rgba(0,0,0,0.05);
  }
.page-survey .chart-title{ font-size:1.25rem; font-weight:700; margin-bottom:20px; color:var(--text) }@media (max-width: 768px) {.page-survey .chart-grid{ grid-template-columns:1fr }}
.page-survey .prefecture-list{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    gap:16px;
    margin-bottom:40px;
  }
.page-survey .prefecture-card{
    background:#fff;
    border:2px solid var(--border);
    border-radius:8px;
    padding:20px;
    text-align:center;
    cursor:pointer;
    transition:all 0.2s;
  }
.page-survey .prefecture-card:hover{
    transform:translateY(-2px);
    border-color:var(--accent);
    box-shadow:0 4px 12px rgba(224, 82, 61, 0.15);
  }
.page-survey .prefecture-card.selected{
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    color:#fff;
    border-color:transparent;
  }
.page-survey .prefecture-name{ font-size:1.125rem; font-weight:600; margin-bottom:8px }
.page-survey .prefecture-count{ font-size:0.875rem; opacity:0.8 }
.page-survey .association-list{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
    gap:24px;
  }
.page-survey .association-card{
    background:#fff;
    border:2px solid var(--border);
    border-radius:12px;
    padding:24px;
    cursor:pointer;
    transition:all 0.3s;
  }
.page-survey .association-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow);
    border-color:var(--accent);
  }
.page-survey .association-icon{
    width:40px;
    height:40px;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
.page-survey .association-icon svg{
    width:20px;
    height:20px;
    fill:#fff;
  }
.page-survey .association-name{ font-size:1.125rem; font-weight:700; color:var(--text); line-height:1.3 }
.page-survey .view-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 20px;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    color:#fff;
    border-radius:6px;
    font-weight:600;
    font-size:0.938rem;
    transition:transform 0.2s;
  }
.page-survey .view-btn:hover{ transform:translateX(4px) }
.page-survey .modal{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    z-index:1000;
    padding:20px;
    overflow-y:auto;
  }
.page-survey .modal.active{ display:flex; align-items:center; justify-content:center }
.page-survey .modal-content{
    background:#fff;
    border-radius:16px;
    max-width:900px;
    width:100%;
    max-height:90vh;
    overflow-y:auto;
    position:relative;
  }
.page-survey .modal-title-group{
    display:flex;
    align-items:flex-start;
    gap:16px;
  }
.page-survey .modal-icon{
    width:48px;
    height:48px;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
.page-survey .modal-icon svg{
    width:24px;
    height:24px;
    fill:#fff;
  }
.page-survey .modal-title{ font-size:1.5rem; font-weight:700; margin:0; line-height:1.3 }
.page-survey .modal-subtitle{ font-size:0.875rem; color:var(--muted); margin-top:4px }
.page-survey .modal-close{
    position:absolute;
    top:24px;
    right:24px;
    width:32px;
    height:32px;
    border:none;
    background:transparent;
    font-size:1.5rem;
    cursor:pointer;
    color:var(--muted);
    transition:color 0.2s;
  }
.page-survey .modal-close:hover{ color:var(--accent) }
.page-survey .modal-body{ padding:24px }
.page-survey .survey-image-section{
    margin-bottom:0;
  }
.page-survey .survey-image-container{
    background:#fff;
    border:2px solid var(--border);
    border-radius:8px;
    overflow:hidden;
  }
.page-survey .survey-image-container img{
    width:100%;
    height:auto;
    display:block;
  }
.page-survey .lightbox{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.95);
    z-index:2000;
    padding:20px;
    overflow:auto;
  }
.page-survey .lightbox.active{ display:flex; flex-direction:column; align-items:center; justify-content:center }
.page-survey .lightbox-title{
    color: #fff;
    text-align: center;
    margin-bottom: 16px;
    padding: 0 20px;
  }
.page-survey .lightbox-title h3{
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 8px 0;
  }
.page-survey .lightbox-title p{
    font-size: 1rem;
    color: var(--accent-2);
    margin: 0;
  }
.page-survey .lightbox-image-container{
    max-width: 100%;
    max-height: calc(90vh - 100px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px !important;
  }
.page-survey .lightbox img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
  }
.page-survey .lightbox-close{
    position:fixed;
    top:20px;
    right:20px;
    width:48px;
    height:48px;
    background:#fff;
    border:none;
    border-radius:50%;
    font-size:1.5rem;
    cursor:pointer;
    z-index:2001;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
  }
.page-survey .lightbox-close:hover{ background:#f1f1f1 }@media (max-width: 768px) {.page-survey .lightbox-title h3{
      font-size: 1.125rem;
    }
.page-survey .lightbox-title p{
      font-size: 0.875rem;
    }}
.page-survey .bar-chart{
    display:flex;
    flex-direction:column;
    gap:16px;
  }
.page-survey .bar-item{
    display:flex;
    align-items:center;
    gap:12px;
  }
.page-survey .bar-label{
    width:120px;
    font-size:0.875rem;
    font-weight:500;
    flex-shrink:0;
  }
.page-survey .bar-track{
    flex:1;
    height:32px;
    background:#f1f5f9;
    border-radius:16px;
    overflow:hidden;
    position:relative;
  }
.page-survey .bar-fill{
    height:100%;
    background:linear-gradient(90deg, var(--accent), var(--accent-2));
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding-right:12px;
    color:#fff;
    font-weight:600;
    font-size:0.875rem;
    transition:width 0.6s ease-out;
  }
.page-survey .social-icon{
    width:36px; height:36px; border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    color:var(--muted); transition:all 0.2s;
  }
.page-survey .social-icon:hover{ background:var(--accent); color:#fff; border-color:var(--accent) }



@media (max-width:768px) {



.page-survey .copyright{ font-size:0.75rem !important }}
.page-survey .kw-bar{
  position: fixed !important; top: var(--hdrH); left:0; right:0;
  z-index: 900;
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.page-survey .social-icon{
  width:36px;
  height:36px;
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  transition:all 0.2s;
}
.page-survey .social-icon:hover{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}



@media (max-width:768px) {



.page-survey .copyright{
    font-size:0.75rem !important;
  }}@media (min-width:1180px){.page-survey .right-gallery .ad-slot{ position:relative; }
.page-survey .right-gallery .ad-slot::before{
    content:"";
    position:absolute;
    inset:0;
    background-position:center;
    background-repeat:no-repeat;
    background-size:contain; 
    background-image: var(--ad-img, none);
    pointer-events:none;
  }}@media (min-width:1180px){.page-survey .right-gallery .vtile .thumb, .page-survey .right-gallery .ad-slot{
    height:400px !important;
    overflow:hidden !important;
    position:relative !important;
  }
.page-survey .right-gallery .vtile .thumb img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    display:block !important;
  }
.page-survey .right-gallery .ad-slot::before{
    background-size:cover !important;
    background-position:center !important;
  }}@media (min-width:1180px){.page-survey .latest-news img, .page-survey .paper-ad img, .page-survey .preview-paper img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    display:block !important;
  }}@media (max-width: 768px){.page-survey .sp-lanes .tile, .page-survey .lane .tile, .page-survey .lane-track .tile{
    width: calc(100vw / 3) !important;
    height: auto !important;
  }}@media (min-width: 769px) {.page-survey .halfpage-ad-wrapper, .page-survey .mpu-ad-wrapper{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
.page-survey .pc-only-ad{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
.page-survey .ad-slot.ad-rect-vertical.pc-only-ad{
    display: block !important;
  }
.page-survey .ad-slot.ad-half-vertical.pc-only-ad{
    display: block !important;
  }}@media (max-width: 768px) {.page-survey .ad-slot.ad-half-vertical.pc-only-ad, .page-survey .ad-slot.ad-rect-vertical.pc-only-ad, .page-survey div.ad-slot.ad-half-vertical.pc-only-ad, .page-survey div.ad-slot.ad-rect-vertical.pc-only-ad, .page-survey .vcol .ad-slot.ad-half-vertical.pc-only-ad, .page-survey .vcol .ad-slot.ad-rect-vertical.pc-only-ad, .page-survey .v-track .ad-slot.ad-half-vertical.pc-only-ad, .page-survey .v-track .ad-slot.ad-rect-vertical.pc-only-ad, .page-survey .ad-slot.pc-only-ad, .page-survey .pc-only-ad{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    pointer-events: none !important;
    line-height: 0 !important;
    flex: 0 0 0 !important;
    flex-basis: 0 !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    grid-row: 0 !important;
    grid-column: 0 !important;
  }
.page-survey .ad-slot.ad-half-vertical.pc-only-ad *, .page-survey .ad-slot.ad-rect-vertical.pc-only-ad *, .page-survey .pc-only-ad *{
    display: none !important;
    height: 0 !important;
    width: 0 !important;
  }
.page-survey .ad-slot.ad-half-vertical.pc-only-ad, .page-survey .ad-slot.ad-rect-vertical.pc-only-ad{
    background: transparent !important;
  }
.page-survey .halfpage-ad-wrapper{
    display: block !important;
    width: 100vw !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
.page-survey .mpu-ad-wrapper{
    display: block !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
.page-survey .halfpage-ad-wrapper img, .page-survey .mpu-ad-wrapper img{
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
.page-survey img{
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
  }
.page-survey .ad-slot.ad-rect-vertical[data-ad-type="mpu"] .ad-badge{
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 10 !important;
  }}@media (max-width: 768px) {.page-survey .halfpage-ad-wrapper{
    display: block !important;
    width: 100vw !important;
    height: auto !important;
    margin: 0 !important;
    margin-top: -1px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }
.page-survey .v-track .halfpage-ad-wrapper, .page-survey #vcolA .halfpage-ad-wrapper, .page-survey #vcolB .halfpage-ad-wrapper, .page-survey #vcolA .v-track .halfpage-ad-wrapper, .page-survey #vcolB .v-track .halfpage-ad-wrapper{
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: translateY(0) !important;
    position: relative !important;
    top: 0 !important;
  }
.page-survey .ad-slot.ad-half-vertical.pc-only-ad + .halfpage-ad-wrapper{
    margin-top: 0 !important;
    position: relative !important;
  }
.page-survey .ad-slot + .halfpage-ad-wrapper, .page-survey .ad-slot.ad-half-vertical.pc-only-ad + .halfpage-ad-wrapper, .page-survey .pc-only-ad + .halfpage-ad-wrapper, .page-survey .vtile + .ad-slot + .halfpage-ad-wrapper, .page-survey * + .halfpage-ad-wrapper{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
.page-survey .vtile + .ad-slot.ad-half-vertical.pc-only-ad, .page-survey a.vtile + .ad-slot.ad-half-vertical.pc-only-ad{
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
.page-survey .ad-slot.ad-half-vertical.pc-only-ad + .halfpage-ad-wrapper, .page-survey .pc-only-ad + .halfpage-ad-wrapper{
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative !important;
    top: 0 !important;
  }
.page-survey .vtile + .ad-slot.ad-half-vertical.pc-only-ad + .halfpage-ad-wrapper{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
.page-survey .vtile + .halfpage-ad-wrapper, .page-survey a.vtile + .halfpage-ad-wrapper{
    margin-top: 0 !important;
  }
.page-survey .halfpage-ad-wrapper .halfpage-inner{
    position: relative !important;
    width: 100vw !important;
    height: calc(100vw * 1.5) !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    display: block !important;
  }
.page-survey .halfpage-ad-wrapper img{
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
.page-survey .mpu-ad-wrapper{
    display: block !important;
    width: 100vw !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }
.page-survey .mpu-ad-wrapper .mpu-inner{
    position: relative !important;
    width: 100vw !important;
    height: calc(100vw * 0.5) !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    display: block !important;
  }
.page-survey .mpu-ad-wrapper img{
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
.page-survey .halfpage-ad-wrapper .ad-badge, .page-survey .mpu-ad-wrapper .ad-badge{
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 10 !important;
    background: #334155 !important;
    color: white !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
  }}@media (max-width: 768px) {.page-survey div.ad-slot.ad-half-vertical.pc-only-ad, .page-survey .v-track > div.ad-slot.ad-half-vertical.pc-only-ad, .page-survey #vcolA div.ad-slot.ad-half-vertical.pc-only-ad, .page-survey #vcolB div.ad-slot.ad-half-vertical.pc-only-ad, .page-survey a.vtile + div.ad-slot.ad-half-vertical.pc-only-ad{
    display: none !important;
    visibility: collapse !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    line-height: 0 !important;
    font-size: 0 !important;
    flex: none !important;
  }}


/* =========================================================
   Detail sidebar: 人気記事 (match TOMATO_COLUMN_DETAIL_20260125.html)
   ========================================================= */
#sidebar-popular .sidebar-heading{
  margin:0 0 14px;
  font-size:1rem;
  font-weight:700;
  padding-bottom:10px;
  border-bottom:2px solid var(--accent);
}
#sidebar-popular .popular-list{
  display:flex;
  flex-direction:column;
}
#sidebar-popular .popular-article{
  display:flex;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid #e5e7eb;
}
#sidebar-popular .popular-article:last-child{
  border-bottom:none;
}
#sidebar-popular .popular-rank{
  flex:0 0 auto;
  width:26px;
  font-size:1.5rem;
  font-weight:800;
  line-height:1;
  color:var(--accent);
}
#sidebar-popular .popular-content{
  flex:1;
  min-width:0;
}
#sidebar-popular .popular-title{
  font-size:0.9rem;
  font-weight:700;
  line-height:1.45;
  color:#0f172a;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
#sidebar-popular .popular-meta{
  margin-top:6px;
  font-size:0.78rem;
  color:var(--muted);
}
#sidebar-popular .popular-article:hover .popular-title{
  color:var(--accent);
}

@media (max-width:768px){
  #sidebar-popular .popular-article{ padding:12px 0; }
  #sidebar-popular .popular-rank{ font-size:1.35rem; }
  #sidebar-popular .popular-title{ font-size:0.92rem; }
}

/* =====================================
   Detail Sidebar - Related Links
   ===================================== */

.related-links {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
}

.related-links > div {
  margin-bottom: 12px;
}

.related-links > div:last-child {
  margin-bottom: 0;
}

.related-links a {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
  transition: opacity 0.2s ease;
}

.related-links a:hover {
  opacity: 0.7;
}

/* =====================================================
   FIX: SP market cards - prevent global .card-header overlay styles
   from collapsing .market-card content on small screens
   ===================================================== */
@media (max-width: 767px){
  .tomato-market-data.sp-only-market .market-card .card-header{
    margin-top: 0 !important;
    padding: 0 0 8px 0 !important;
    position: static !important;
    z-index: auto !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
    padding-bottom: 5px !important;
    border-bottom: 1px solid #f3f4f6 !important;
  }
  .tomato-market-data.sp-only-market .market-card .card-body{
    margin-top: 0 !important;
  }
}
/* =====================================================
   Columnists responsive override (ensure SP layout wins)
   - The file contains multiple duplicated blocks, so we
     place this at the end to guarantee cascade order.
   ===================================================== */
@media (max-width: 768px){
  .columnists-section{
    margin: 40px 0 30px 0 !important;
    padding: 40px 15px !important;
  }

  .columnists-title{
    font-size: 1.5rem !important;
    margin-bottom: 32px !important;
    padding: 0 0 16px 0 !important;
  }

  .columnists-title::after{
    width: 80px !important;
    height: 3px !important;
  }

  .columnists-grid{
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 0 !important;
  }

  .columnist-card{
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 24px !important;
  }

  .columnist-icon{
    width: 80px !important;
    height: 80px !important;
  }

  .columnist-name{ font-size: 1.15rem !important; }
  .columnist-affiliation{ font-size: 0.9rem !important; }
  .columnist-bio{ font-size: 0.85rem !important; }
}


/* =====================================================
   FIX: list.html SP grid must match mockup (TOMATO_LIST_20260123.html)
   - Scope to list controls + grid only (avoid affecting other pages)
   ===================================================== */
@media (max-width:768px){
  /* grid container */
  .page-list .main .controls + .grid{
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 2px !important;
    margin-bottom: 20px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* remove any forced tile width rules on mobile (use grid spans like mockup) */
  .main .controls + .grid .tile{
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  /* size mapping (same as mockup) */
  .main .controls + .grid .large{
    grid-column: span 12 !important;
    grid-row: span 1 !important;
  }
  .main .controls + .grid .medium{ grid-column: span 6 !important; }
  .main .controls + .grid .small{ grid-column: span 4 !important; }
}


/* =====================================================
   DETAIL PAGE – Center CTA buttons on larger screens
   ===================================================== */
@media (min-width: 769px){
  .cta-section{
    text-align: center;
  }

  .hero-actions{
    display: flex;
    justify-content: center;   /* Center horizontally */
    align-items: center;
    gap: 16px;
  }
}
/* ===============================
   JA部会アンケート dynamic states
   =============================== */
.page-survey .prefecture-card {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  text-align: center;
  background:#fff;
  border:2px solid var(--border);
  border-radius:8px;
  padding:20px;
  cursor:pointer;
  transition:all 0.2s;
}

.page-survey .prefecture-card:hover {
  transform:translateY(-2px);
  border-color:var(--accent);
  box-shadow:0 4px 12px rgba(224, 82, 61, 0.15);
}

.page-survey .prefecture-card.selected,
.page-survey .prefecture-card.is-active {
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  border-color:transparent;
  box-shadow:none;
}

.page-survey .association-tile-placeholder {
  width: 100%;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f8fafc, #e5e7eb);
  color: var(--muted);
  font-weight: 700;
  font-size: 1.1rem;
}

.page-survey .survey-empty-message {
  margin-top: 24px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
}


/* ===============================
   JA部会アンケート region groups
   =============================== */
.page-survey .survey-region-groups{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:16px;
  margin-bottom:40px;
}

.page-survey .survey-region-group{
  display:contents;
}

.page-survey .survey-region-title{
  display:none;
}

.page-survey .association-tile-excerpt{
  margin:6px 0 0;
  font-size:0.72rem;
  line-height:1.4;
  opacity:0.92;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

@media (max-width:768px){
  .page-survey .survey-region-groups{
    gap:22px;
  }

  .page-survey .survey-region-title{
    font-size:1rem;
    margin-bottom:10px;
  }
}


/* ===== JA survey dynamic top data ===== */
.page-survey .detail-section-header{ display:flex; align-items:center; margin-bottom:24px; }
.page-survey .detail-content.is-two-column{ grid-template-columns:1fr 1fr; gap:24px; }
.page-survey .survey-top-empty{ background:#fff; border:1px dashed var(--border); padding:20px; color:var(--muted); border-radius:8px; }
.page-survey .simple-bar-fill.is-zero{ justify-content:flex-start; padding-left:8px; padding-right:0; min-width:48px; }
@media (max-width:768px){ .page-survey .detail-content.is-two-column{ grid-template-columns:1fr; } }

/* ======================================
JA Survey Year Season Selector
====================================== */

body.page-survey .selector-container{
display:flex;
gap:40px;
justify-content:center;
margin:40px 0;
flex-wrap:wrap;
}

body.page-survey .selector-group{
text-align:center;
}

body.page-survey .selector-label{
font-size:12px;
color:#64748b;
margin-bottom:8px;
letter-spacing:.1em;
}

body.page-survey .selector-tabs{
display:flex;
}

body.page-survey .selector-tab{
padding:8px 16px;
border:1px solid #e5e7eb;
background:#fff;
cursor:pointer;
font-size:14px;
}

body.page-survey .selector-tab.active{
background:#0f172a;
color:#fff;
border-color:#0f172a;
}

/* =====================================================
   JA部会アンケートページ専用
   Add border-bottom to match mockup
   This is scoped so other pages are NOT affected
   ===================================================== */

.page-survey .article-header{
    border-bottom: 2px solid var(--border);
}
/* =====================================================
   Survey page: search section icon position fix
   - Keeps the mockup layout and neutralizes generic .search-icon rules
   - Scoped to .page-survey so other pages are unaffected
   ===================================================== */
.page-survey .search-title{
  display:flex;
  align-items:center;
  gap:12px;
}

.page-survey .search-title .search-icon{
  position:relative;
  left:auto;
  top:auto;
  transform:none;
  margin:0;
  flex:0 0 32px;
  width:32px;
  height:32px;
  min-width:32px;
  min-height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:inherit;
  font-size:0;
  line-height:1;
  pointer-events:none;
}

.page-survey .search-title .search-icon svg{
  display:block;
  width:18px;
  height:18px;
  fill:#fff;
}

.page-survey .filter-group{
  position:relative;
}

.page-survey .filter-select{
  padding-left:20px;
}

@media (max-width:768px){
  .page-survey .search-title{
    align-items:flex-start;
  }

  .page-survey .search-title .search-icon{
    margin-top:2px;
  }
}


/* =====================================================
   JA部会アンケート: prefecture list match mockup
   - flatten region wrappers so prefecture cards align in one grid
   - hide region headings
   - scoped to .page-survey only
   ===================================================== */
.page-survey .survey-region-group > .prefecture-list{
  display: contents;
  margin-bottom: 0;
}

.page-survey .prefecture-list{
  display: contents;
}

.page-survey .prefecture-card{
  width: 100%;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.page-survey .prefecture-name{
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 8px;
}

.page-survey .prefecture-count{
  font-size: 0.875rem;
  line-height: 1.2;
  opacity: 0.8;
}

@media (max-width:768px){
  .page-survey .survey-region-groups{
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 32px;
  }

  .page-survey .prefecture-card{
    min-height: 102px;
    padding: 20px 16px;
  }
}

/* =====================================================
   TOP page NEW badge (.vtile only)
   ===================================================== */
.vtile{
  position: relative;
}

.vtile-badge-new{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background: linear-gradient(135deg,var(--accent),var(--accent-2));
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  letter-spacing: .01em;
  white-space: nowrap;
  pointer-events: none;
}

.vtile-badge-new::after{
  display: none;
}

@media (max-width: 768px){
  .vtile-badge-new{
    top: 10px;
    left: 10px;
    padding: 4px 8px;
    font-size: 12px;
  }
}

/* =====================================================
   REGISTER PAGE MOBILE HEADER ACTION BUTTON OVERRIDES
   - Match TOMATO_REGISTRATION_20260122.html mockup
   - Mobile only
   ===================================================== */
@media (max-width:768px){
  .page-register .page-actions{
    display:flex;
    justify-content:flex-end;
    gap:12px;
    margin:0 0 12px;
  }

  .page-register .page-actions .btn,
  .page-register .page-actions button.btn,
  .page-register .registration-container .page-actions .btn{
    border:1px solid var(--border) !important;
    background:#fff !important;
    color:#0f172a !important;
    padding:.55rem 1rem !important;
    border-radius:20px !important;
    cursor:pointer !important;
    font-size:0.9rem !important;
    font-weight:400 !important;
    line-height:1.2 !important;
    letter-spacing:0 !important;
    transition:all 0.3s ease !important;
    text-decoration:none !important;
    display:inline-block !important;
    white-space:nowrap !important;
    min-height:auto !important;
    box-shadow:none !important;
    appearance:none !important;
    -webkit-appearance:none !important;
  }

  .page-register .page-actions .btn:first-child,
  .page-register .page-actions button.btn:first-child,
  .page-register .registration-container .page-actions .btn:first-child{
    background:#f8f9fa !important;
    color:#6c757d !important;
    border-color:#dee2e6 !important;
  }

  .page-register .page-actions .btn:first-child:hover,
  .page-register .page-actions button.btn:first-child:hover,
  .page-register .registration-container .page-actions .btn:first-child:hover{
    background:#e9ecef !important;
    color:#495057 !important;
    transform:none !important;
  }

  .page-register .page-actions .btn:last-child:hover,
  .page-register .page-actions button.btn:last-child:hover,
  .page-register .registration-container .page-actions .btn:last-child:hover{
    background:#f8f9fa !important;
    transform:none !important;
  }
}


/* =====================================================
   Privacy Policy Page
   ===================================================== */
.page-hero{
  background:linear-gradient(135deg, #fff5f4 0%, #fff8f7 50%, #fff 100%);
  border-bottom:1px solid var(--border);
  padding:48px 0 36px;
}
.page-hero-inner{
  width:min(900px,92vw);
  margin:0 auto;
}
.page-hero h1{
  font-size:clamp(1.6rem,3vw,2.2rem);
  margin:0 0 8px;
  font-weight:700;
}
.page-content{
  max-width:min(900px,92vw);
  margin:0 auto;
  padding:56px var(--pad) 80px;
}
.page-policy-subtitle{
  font-size:0.813rem;
  color:var(--muted);
  margin-top:8px;
}

.privacy-intro{
  font-size:0.938rem;
  line-height:1.8;
  color:#334155;
  margin-bottom:48px;
  padding:28px 32px;
  background:linear-gradient(135deg,#fff5f4,#fff8f7);
  border:1px solid #fecaca;
  border-radius:2px;
}
.privacy-intro p{
  margin:0;
}

.privacy-link-card{
  display:flex;
  align-items:center;
  gap:32px;
  padding:32px 36px;
  border:2px solid var(--accent);
  background:#fff;
  margin:40px 0;
  transition:box-shadow 0.2s;
}
.privacy-link-card:hover{
  box-shadow:var(--shadow);
}
.privacy-link-card .card-left{
  flex:1;
  min-width:0;
}
.privacy-link-card .card-left h2{
  font-size:1.05rem;
  font-weight:700;
  margin:0 0 10px;
  color:var(--text);
}
.privacy-link-card .card-left p{
  font-size:0.875rem;
  color:var(--muted);
  margin:0;
  line-height:1.7;
}
.privacy-link-card .card-right{
  flex-shrink:0;
}
.privacy-link-card .card-right a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 28px;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  font-size:0.938rem;
  white-space:nowrap;
  transition:opacity 0.2s;
}
.privacy-link-card .card-right a:hover{
  opacity:0.88;
  color:#fff;
}
.privacy-link-icon{
  font-size:0.8em;
}

.privacy-note{
  margin-top:48px;
  padding:24px;
  border-left:3px solid var(--border);
  background:#f8f9fa;
  font-size:0.875rem;
  color:var(--muted);
  line-height:1.8;
}
.privacy-note p{
  margin:0 0 8px;
}
.privacy-note p:last-child{
  margin:0;
}
.privacy-note a{
  color:var(--accent);
  text-decoration:underline;
}

@media (max-width:768px){
  .page-content{
    padding:36px 16px 60px;
  }
  .privacy-intro{
    padding:20px;
  }
  .privacy-link-card{
    flex-direction:column;
    gap:20px;
    padding:24px;
    align-items:stretch;
  }
  .privacy-link-card .card-right a{
    display:block;
    text-align:center;
  }
}

/* =====================================================
   Terms Page
   ===================================================== */
.page-terms-update-date{
  font-size:0.813rem;
  color:var(--muted);
  margin-top:8px;
}

.page-terms-content a{
  color:var(--accent);
  text-decoration:underline;
}

.terms-preamble{
  font-size:0.938rem;
  line-height:1.8;
  color:#334155;
  margin-bottom:40px;
  padding:24px;
  background:#f8f9fa;
  border-left:3px solid var(--accent);
}

.terms-section{
  margin-bottom:40px;
}

.terms-section h2{
  font-size:1.05rem;
  font-weight:700;
  color:var(--text);
  border-left:4px solid var(--accent);
  padding-left:12px;
  margin:0 0 16px;
  line-height:1.5;
}

.terms-section p{
  font-size:0.938rem;
  line-height:1.8;
  color:#334155;
  margin:0 0 12px;
}

.terms-section ol,
.terms-section ul{
  padding-left:1.4em;
  margin:0 0 12px;
}

.terms-section li{
  font-size:0.938rem;
  line-height:1.8;
  color:#334155;
  margin-bottom:6px;
}

.terms-footer-note{
  margin-top:48px;
  padding-top:24px;
  border-top:1px solid var(--border);
  font-size:0.813rem;
  color:var(--muted);
}

.terms-footer-note p{
  margin:0 0 8px;
}

.terms-footer-note p:last-child{
  margin:0;
}

/* =====================================================
   Company Page
   ===================================================== */
.page-company-subtitle{
  font-size:0.813rem;
  color:var(--muted);
  margin-top:8px;
}

.page-company-content{
  max-width:min(900px,92vw);
}

.company-section{
  margin-bottom:56px;
  border-top: none;
}

.company-section h2{
  font-size:1.05rem;
  font-weight:700;
  color:var(--text);
  border-left:4px solid var(--accent);
  padding-left:12px;
  margin:0 0 24px;
  line-height:1.5;
}

.company-table{
  width:100%;
  border-collapse:collapse;
}

.company-table tr{
  border-bottom:1px solid var(--border);
}

.company-table tr:first-child{
  border-top:1px solid var(--border);
}

.company-table th{
  width:160px;
  padding:16px 20px 16px 0;
  font-size:0.875rem;
  font-weight:700;
  color:var(--text);
  vertical-align:top;
  white-space:nowrap;
  text-align:left;
}

.company-table td{
  padding:16px 0 16px 20px;
  font-size:0.875rem;
  line-height:1.8;
  color:#334155;
  vertical-align:top;
}

.company-subtext{
  font-size:0.813rem;
  color:var(--muted);
}

.company-list,
.company-offices-list{
  margin:0;
  padding-left:1.2em;
}

.company-list li,
.company-offices-list li{
  margin-bottom:6px;
}

.company-list li:last-child,
.company-offices-list li:last-child{
  margin-bottom:0;
}

.company-address-block{
  font-size:0.875rem;
  line-height:1.8;
  color:#334155;
}

.company-address-note{
  margin-top:4px;
  font-size:0.813rem;
  color:var(--muted);
}

.company-detail-link-box{
  margin-top:48px;
  padding:28px 32px;
  border:1px solid var(--border);
  background:#f8f9fa;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.company-detail-link-box p{
  margin:0;
  font-size:0.875rem;
  color:var(--muted);
  line-height:1.7;
}

.company-detail-link-box a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 24px;
  border:2px solid var(--accent);
  color:var(--accent);
  font-weight:700;
  font-size:0.875rem;
  white-space:nowrap;
  transition:all 0.2s;
}

.company-detail-link-box a:hover{
  background:var(--accent);
  color:#fff;
}

@media (max-width:768px){
  .company-table th{
    width:110px;
    padding:14px 12px 14px 0;
  }

  .company-table td{
    padding:14px 0 14px 12px;
  }

  .company-detail-link-box{
    flex-direction:column;
    align-items:stretch;
    gap:16px;
    padding:20px;
  }

  .company-detail-link-box a{
    justify-content:center;
  }
}


/* =====================================================
   Contact Page
   ===================================================== */
.page-contact-subtitle{
  font-size:0.938rem;
  color:var(--muted);
  margin:8px 0 0;
  line-height:1.7;
}

.page-contact .contact-grid{
  max-width:640px;
  margin:0 auto;
}

.page-contact .contact-form-wrap h2{
  font-size:1.1rem;
  font-weight:700;
  border-left:4px solid var(--accent);
  padding-left:12px;
  margin:0 0 28px;
}

.page-contact .form-group{
  margin-bottom:24px;
}

.page-contact .form-group label{
  display:block;
  font-size:0.875rem;
  font-weight:600;
  margin-bottom:8px;
  color:var(--text);
}

.page-contact .form-group label .required{
  display:inline-block;
  font-size:0.75rem;
  background:var(--accent);
  color:#fff;
  padding:2px 6px;
  margin-left:6px;
  vertical-align:middle;
}

.page-contact .form-group label .optional{
  display:inline-block;
  font-size:0.75rem;
  color:var(--muted);
  border:1px solid var(--border);
  padding:2px 6px;
  margin-left:6px;
  vertical-align:middle;
}

.page-contact .form-control{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--border);
  background:#fff;
  font-size:0.938rem;
  font-family:inherit;
  color:var(--text);
  outline:none;
  transition:border-color 0.2s;
  -webkit-appearance:none;
  border-radius:0;
}

.page-contact .form-control:focus{
  border-color:var(--accent);
}

.page-contact textarea.form-control{
  resize:vertical;
  min-height:160px;
}

.page-contact select.form-control{
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px;
}

.page-contact .form-note{
  font-size:0.813rem;
  color:var(--muted);
  margin-top:6px;
  line-height:1.5;
}

.page-contact .form-agreement label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-weight:400;
  cursor:pointer;
}

.page-contact .form-agreement input[type="checkbox"]{
  margin-top:3px;
  width:16px;
  height:16px;
  flex-shrink:0;
  accent-color:var(--accent);
}

.page-contact .form-agreement span{
  font-size:0.875rem;
  line-height:1.7;
}

.page-contact .form-agreement a{
  color:var(--accent);
  text-decoration:underline;
}

.page-contact .form-submit{
  width:100%;
  padding:16px;
  background:var(--accent);
  color:#fff;
  border:none;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  letter-spacing:0.04em;
  transition:opacity 0.2s;
  margin-top:8px;
}

.page-contact .form-submit:hover{
  opacity:0.88;
}

.page-contact .form-success{
  padding:32px;
  background:#f0fdf4;
  border:1px solid #bbf7d0;
  text-align:center;
}

.page-contact .form-success[hidden]{
  display:none !important;
}

.page-contact .form-success h3{
  color:#15803d;
  font-size:1.1rem;
  margin:0 0 8px;
}

.page-contact .form-success p{
  color:#166534;
  font-size:0.875rem;
  margin:0;
  line-height:1.7;
}

@media (max-width:768px){
  .page-contact .contact-grid{
    max-width:none;
  }
}

/* ===============================
   Login page password reset styles
   - Moved from login.html
   - Scoped to .page-login so other pages are unaffected
   =============================== */
.page-login .account-panel[hidden]{
  display:none !important;
}

.page-login section {
  border-top: none;
}

.page-login .reset-back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:24px;
  color:inherit;
  text-decoration:none;
  font-weight:700;
}

.page-login .reset-back-link .arrow{
  font-size:24px;
  line-height:1;
}

.page-login .reset-screen-title{
  margin:0 0 20px;
  text-align:center;
}

.page-login .reset-screen-subtitle,
.page-login .reset-screen-note,
.page-login .reset-screen-email{
  text-align:center;
}

.page-login .reset-screen-subtitle,
.page-login .reset-screen-note{
  line-height:1.9;
}

.page-login .reset-screen-email{
  font-weight:700;
  word-break:break-all;
}

.page-login .reset-screen-actions{
  margin-top:24px;
}


/* =========================================================
   TOP mobile: make .sp-lanes flush with viewport
   - keeps .left-hero text padding intact
   - removes the visible left gap on mobile only
   ========================================================= */
@media (max-width:768px){
  #highlight .left-hero > .sp-lanes{
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* ==============================
   Sponsor ad popup (#newspaper-ads)
   ============================== */
body.sponsor-ad-popup-open{
  overflow:hidden;
}

.sponsor-ad-popup{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(15,23,42,.5);
}

.sponsor-ad-popup.active{
  display:flex;
}

.sponsor-ad-popup__dialog{
  position:relative;
  width:min(100%, 640px);
  background:#f3f4f6;
  border:1px solid rgba(15,23,42,.12);
  box-shadow:0 18px 40px rgba(15,23,42,.28);
  padding:18px 18px 22px;
}

.sponsor-ad-popup__close{
  position:absolute;
  top:8px;
  right:8px;
  width:36px;
  height:36px;
  border:0;
  background:rgba(255,255,255,.9);
  color:#334155;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.sponsor-ad-popup__image-wrap{
  background:#fff;
  border:1px solid rgba(15,23,42,.1);
  overflow:hidden;
}

.sponsor-ad-popup__image{
  display:block;
  width:100%;
  height:auto;
  max-height:min(70vh, 760px);
  object-fit:contain;
  background:#fff;
}

.sponsor-ad-popup__actions{
  display:flex;
  justify-content:center;
  margin-top:16px;
}

.sponsor-ad-popup__link.btn.accent{
  min-width:260px;
  min-height:54px;
  padding:0 28px;
  border:0 !important;
  border-radius:999px !important;
  background:linear-gradient(135deg, var(--accent,#e0523d), var(--accent-2,#ff9a7d)) !important;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(16,24,40,.10) !important;
  font-size:clamp(1rem, 2.6vw, 1.15rem);
  font-weight:700;
}

@media (max-width:768px){
  .sponsor-ad-popup{
    padding:16px;
  }

  .sponsor-ad-popup__dialog{
    width:min(100%, 520px);
    padding:14px 14px 18px;
  }

  .sponsor-ad-popup__close{
    top:6px;
    right:6px;
    width:32px;
    height:32px;
    font-size:24px;
  }

  .sponsor-ad-popup__actions{
    margin-top:14px;
  }

  .sponsor-ad-popup__link.btn.accent{
    width:60%;
    min-width:0;
    min-height:40px;
    padding:0 20px;
  }
}


/* =====================================================
   Sponsors Page
   ===================================================== */
.page-sponsors .article-container{
  max-width:none;
  width:100%;
}

.sponsor-page-header{
  max-width:none;
  margin:0 0 20px;
  padding:0;
  text-align:left;
  background:transparent;
}

.page-sponsors .article-category{
  display:block;
  padding:0;
  margin:0 0 24px;
  border-radius:0;
  background:none;
  color:var(--text);
  font-size:1rem;
  font-weight:700;
  letter-spacing:0;
}

.page-sponsors section {
    border-top: none;
}

.page-sponsors .article-title{
  margin:0 0 32px;
  font-size:clamp(2.25rem, 4.8vw, 2.3rem);
  line-height:1.2;
}

.sponsor-page-subtitle{
  max-width:none;
  margin:0;
  color:var(--text);
  font-size:clamp(1rem, 2vw, 1.125rem);
  font-weight:500;
}

.sponsor-legend-section{
  margin-bottom:24px;
}

.sponsor-page-section{
  margin-top:0;
}

.sponsor-legend{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:16px 20px;
  background:#f3f4f6;
  border-radius:8px;
}

.sponsor-legend-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#6b7280;
  font-size:0.875rem;
  font-weight:600;
}

.sponsor-legend-dot{
  width:14px;
  height:14px;
  border-radius:50%;
  flex:0 0 auto;
}

.sponsor-legend-dot.dot-seedling{ background:#78bc25; }
.sponsor-legend-dot.dot-fertilizer{ background:#cc4624; }
.sponsor-legend-dot.dot-service{ background:#12b7d1; }

.sponsor-tabs{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-bottom:28px;
}

.sponsor-tab-btn{
  appearance:none;
  border:2px solid var(--border);
  background:#fff;
  color:#64748b;
  border-radius:999px;
  padding:8px 18px;
  font-size:0.875rem;
  font-weight:700;
  line-height:1.3;
  cursor:pointer;
  transition:all .2s ease;
}

.sponsor-tab-btn:hover,
.sponsor-tab-btn:focus-visible{
  border-color:var(--accent);
  color:var(--accent);
  outline:none;
}

.sponsor-tab-btn.active{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg, var(--accent,#e0523d), var(--accent-2,#ff9a7d));
  box-shadow:0 10px 24px rgba(16,24,40,.10);
}

.sponsor-results{
  text-align:right;
  margin-bottom:20px;
  font-size:0.875rem;
  color:var(--muted);
}

.sponsor-loading[hidden],
.sponsor-grid[hidden],
.sponsor-empty[hidden],
.sponsor-card[hidden]{
  display:none !important;
}

.sponsor-results strong{
  color:var(--text);
  font-weight:700;
}

.sponsor-loading,
.sponsor-empty{
  text-align:center;
  padding:56px 20px;
}

.sponsor-loading p,
.sponsor-empty p{
  margin:0;
  color:var(--muted);
}

.sponsor-loading-spinner{
  width:42px;
  height:42px;
  margin:0 auto 16px;
  border:4px solid #e5e7eb;
  border-top-color:var(--accent,#e0523d);
  border-radius:50%;
  animation:sponsor-spin .8s linear infinite;
}

@keyframes sponsor-spin{
  to{ transform:rotate(360deg); }
}

.sponsor-empty-icon{
  font-size:2.5rem;
  line-height:1;
  margin-bottom:12px;
}

.sponsor-empty-title{
  font-size:1.05rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:6px;
}

.sponsor-empty-text{
  font-size:0.875rem;
}

.sponsor-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
}

.sponsor-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(16,24,40,.06);
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}

.sponsor-card:hover,
.sponsor-card:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 16px 32px rgba(16,24,40,.12);
  outline:none;
}

.sponsor-card-img{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  background:#f8fafc;
  overflow:hidden;
}

.sponsor-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.sponsor-card-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  color:#94a3b8;
  font-size:0.813rem;
  text-align:center;
}

.sponsor-card-body{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px;
  flex:1;
}

.sponsor-category-label{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  max-width:100%;
  padding:2px 10px;
  border-radius:999px;
  font-size:0.688rem;
  font-weight:700;
  color:#fff;
  align-self:flex-start;
}

.sponsor-category-label.cat-seedling{ background:#78bc25; }
.sponsor-category-label.cat-fertilizer{ background:#cc4624; }
.sponsor-category-label.cat-service{ background:#12b7d1; }
.sponsor-category-label.cat-uncategorized{ background:#64748b; }

.sponsor-card-name{
  margin:0;
  font-size:0.938rem;
  line-height:1.5;
  font-weight:700;
  color:var(--text);
  word-break:break-word;
}

@media (max-width:1024px){
  .sponsor-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media (max-width:768px){
  .page-sponsors .article-container{
    max-width:none;
    width:100%;
  }

  .sponsor-page-header{
    margin-bottom:16px;
  }

  .page-sponsors .article-category{
    margin-bottom:16px;
    font-size:0.938rem;
  }

  .page-sponsors .article-title{
    margin-bottom:20px;
    font-size:clamp(2rem, 8vw, 2.5rem);
  }

  .sponsor-page-subtitle{
    font-size:0.938rem;
  }

  .sponsor-legend-section{
    margin-bottom:16px;
  }

  .sponsor-legend{
    gap:12px 16px;
    padding:14px 16px;
  }

  .sponsor-legend-item{
    font-size:0.813rem;
  }

  .sponsor-page-section{
    margin-top:0;
  }

  .sponsor-tabs{
    justify-content:flex-start;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:4px;
    margin-bottom:16px;
    scrollbar-width:none;
  }

  .sponsor-tabs::-webkit-scrollbar{
    display:none;
  }

  .sponsor-tab-btn{
    flex:0 0 auto;
    font-size:0.813rem;
    padding:7px 14px;
  }

  .sponsor-results{
    text-align:left;
    margin-bottom:14px;
  }

  .sponsor-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
  }

  .sponsor-card{
    border-radius:12px;
  }

  .sponsor-card-body{
    padding:12px;
  }

  .sponsor-card-name{
    font-size:0.875rem;
  }
}

/* =====================================================
   TOP mobile: tighten gap above hero-actions on index only
   - keeps global .hero-actions behavior unchanged
   - only affects the highlight area on small screens
   ===================================================== */
@media (max-width:768px){
  .sp-only-market + #highlight .left-hero{
    justify-content:flex-start !important;
    gap:10px !important;
    padding-top:0px !important;
    padding-bottom:16px !important;
  }

  .sp-only-market + #highlight .left-hero > .hero-actions{
    order:2 !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    width:100% !important;
  }

  .sp-only-market + #highlight .left-hero > .sp-lanes{
    order:3 !important;
    margin-top:0 !important;
  }
}


/* =========================================================
   記事本文内画像（Gutenberg wp-block-image）
   - 小さい画面でも画像を縮ませすぎない
   - 投稿設定で有効な場合はタップで拡大表示
   ========================================================= */
.article-content figure.wp-block-image,
.article-content .wp-block-image {
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: 0 !important;
  margin: 24px 0;
}

.article-content figure.wp-block-image > img,
.article-content figure.wp-block-image > a,
.article-content figure.wp-block-image > a > img,
.article-content .wp-block-image > img,
.article-content .wp-block-image > a,
.article-content .wp-block-image > a > img,
.article-content img.article-body-image {
  display: block;
  max-width: 100%;
  min-width: 0;
  max-height: none;
  margin: 0;
}

.article-content figure.wp-block-image > a,
.article-content .wp-block-image > a {
  display: block;
}

.article-content figure.wp-block-image.is-tappable,
.article-content figure.wp-block-image.is-tappable img {
  cursor: zoom-in;
}

.article-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(17, 24, 39, 0.9);
}

.article-image-lightbox.is-open {
  display: flex;
}

.article-image-lightbox__dialog {
  position: relative;
  width: 100%;
  max-width: 1100px;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.article-image-lightbox__img {
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 64px);
  height: auto;
  object-fit: contain;
}

.article-image-lightbox__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

body.article-image-lightbox-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .article-content figure.wp-block-image,
  .article-content .wp-block-image {
    margin: 20px 0;
  }

  .article-image-lightbox {
    padding: 20px 12px;
  }

  .article-image-lightbox__img {
    max-height: calc(100vh - 48px);
  }
}