:root{
  --bg:#ffffff;
  --fg:#0b0b0b;
  --muted:#666;
  --accent:#15b5CD;
  --max:1040px;

  /* spacing scale (polished / consistent) */
  --s-1:8px;
  --s-2:12px;
  --s-3:18px;
  --s-4:28px;
  --s-5:42px;
  --s-6:64px;
}

*{box-sizing:border-box;}
html,body{height:100%;}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Arial, sans-serif;
  font-size:16px;
  line-height:1.75;
  letter-spacing:0.01em;
}

a{color:inherit; text-decoration:none;}
a:hover{color:var(--accent); text-decoration:underline;}

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 clamp(16px, 3vw, 24px);
}

/* Header */
header{
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--fg);
}

.header-inner{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:12px;
  padding:clamp(12px, 2vw, 18px) 0;
}

.header-tagline{
  font-size:13px;
  font-weight:700;
  letter-spacing:0.02em;
  line-height:1.25;
  white-space:normal;
  max-width:24ch;
}

.brand{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* PC: a bit bigger */
.brand-logo{height:120px; width:auto; display:block;}

@media (max-width: 920px){
  .brand-logo{height:96px;}
  .header-tagline{display:none;}
}

/* Mobile: logo left aligned */
@media (max-width: 620px){
  .header-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 0;
  }
  .header-spacer{display:none;}
  .header-tagline{display:none;}
  .brand{justify-content:flex-start;}
  .brand-logo{height:56px;}
}

nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 16px;
  border:1px solid var(--fg);
  border-radius:0;
  font-weight:700;
  background:var(--fg);
  color:#fff;
  letter-spacing:0.02em;
}
.btn:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  text-decoration:none;
}

main{
  padding:var(--s-3) 0 var(--s-6);
}

/* Headings */
h1{font-size:28px; line-height:1.2; margin:0 0 var(--s-2);}

/* Default h2 for non-home pages (keep plain) */
h2{font-size:20px; margin:var(--s-5) 0 var(--s-2); line-height:1.25;}

.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-top:var(--s-5);
}

.section-head h2{
  margin:0;
}

.section-head-page{
  margin-top:var(--s-3);
}

.btn.btn-minor{
  padding:8px 12px;
  font-size:13px;
  background:transparent;
  color:var(--fg);
}

.btn.btn-minor:hover{
  background:var(--fg);
  border-color:var(--fg);
  color:#fff;
}

/* Home section titles: keep plain (no accent square) */
.home main h2{margin:var(--s-5) 0 var(--s-2);}

/* Pitch title should not have the marker */
.pitch-title{display:block;}
.pitch-title::before{display:none !important; content:none !important;}

p.lead{color:var(--muted); margin:0 0 var(--s-3); max-width:72ch;}

/* Responsive line-break helper */
br.br-sp{display:none;}

@media (max-width: 620px){
  h1{font-size:24px;}
  br.br-sp{display:block;}
}

/* Visually hidden (for semantics / a11y) */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Home: Our news (list, no boxes/lines) */
.news-list{
  list-style:none;
  margin:0;
  padding:0;
}

/* Home: actions under latest */
.home-actions{
  margin:var(--s-3) 0 var(--s-5);
  display:flex;
  justify-content:flex-end;
}

/* Home: search (top-right of video grid) */
.video-tools{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  margin:var(--s-2) 0;
}

.search-field{
  position:relative;
  width:min(360px, 100%);
}

.search-icon{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:16px;
  height:16px;
  color:var(--fg);
  opacity:.55;
  pointer-events:none;
}

.video-search{
  width:100%;
  padding:10px 12px 10px 38px;
  border:1px solid var(--fg);
  border-radius:0;
  background:#fff;
  color:var(--fg);
  font-size:14px;
  line-height:1.2;
}

.video-search:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

@media (max-width: 620px){
  .video-tools{justify-content:flex-start;}
  .video-search{width:100%;}
}

.page-title{
  font-size:22px;
  margin:0 0 var(--s-3);
}
.news-item{
  padding:14px 0;
}

.news-head{
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
}
.news-date{font-size:13px; color:var(--muted);}
.news-title{font-size:16px; font-weight:800; margin:0;}
.news-body{margin:6px 0 0; color:var(--muted); max-width:85ch;}
.news-link{display:inline-block; margin-top:10px; font-weight:700; color:var(--accent);}
.news-link:hover{color:var(--accent); text-decoration:underline;}

/* Video grid */
.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(14px, 2vw, 22px);
}

.more-wrap{
  margin-top:var(--s-4);
  display:flex;
  justify-content:center;
}

/* Comfortable separation between News and the full list (without a heading) */
#more-grid{margin-top:var(--s-4);}

@media (max-width: 920px){
  .grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width: 620px){
  .grid{grid-template-columns:1fr; gap:22px;}
}

.card{
  border:none;
  background:#fff;
  display:flex;
  flex-direction:column;
  min-height:100%;
}

.thumb{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  background:#f1f1f1;
}

.card-body{
  padding:var(--s-1) 0 0 0;
  display:flex;
  flex-direction:column;
  gap:1px;
}

.title{
  font-size:16px;
  line-height:1.35;
  font-weight:800;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.meta{font-size:12px; line-height:1.15; color:var(--muted);}

a.card:hover .title{color:var(--accent);}


/* Home: pitch section (no boxes / no lines) */
.pitch{
  margin-top:var(--s-5);
  padding-top:var(--s-4);
  border-top:1px solid var(--fg);
}

.pitch-title{
  margin:0 0 var(--s-2);
  font-size:22px;
  line-height:1.25;
}

.pitch-lead{
  margin:0 0 var(--s-3);
  color:var(--muted);
  max-width:none;
}

.pitch-points{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}

.pitch-points li{display:flex; gap:10px; align-items:flex-start;}
.pitch-points .dot{font-size:12px; margin-top:5px; color:var(--accent);}

.pitch-cta{margin-top:var(--s-3);}

.pitch-note{
  margin:10px 0 0;
  color:var(--muted);
  font-size:13px;
  max-width:none;
}

/* Detail */
.detail{max-width:820px;}
.detail h1{font-size:30px; margin:0 0 var(--s-2);}
.detail .meta{margin-bottom:var(--s-3);}

.player{
  width:100%;
  aspect-ratio:16/9;
  border:none;
  background:#000;
}

.summary{
  margin-top:var(--s-4);
  padding-top:0;
}

.summary h2{margin:0 0 10px; font-size:18px;}
.summary p{margin:0; white-space:pre-wrap;}

.related{margin-top:var(--s-5);}

.share{margin-top:var(--s-3);}
.share-row{display:flex; align-items:center; justify-content:flex-start; gap:12px; flex-wrap:wrap;}
.share-label{font-size:13px; letter-spacing:.02em; color:#111;}
.share-actions{display:flex; gap:10px; flex-wrap:wrap;}
.share-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border:1px solid #000;
  color:#fff;
  text-decoration:none;
  background:#000;
  font-size:13px;
  line-height:1;
}
.share-btn svg{width:16px; height:16px; display:block; fill:currentColor;}
.share-btn:hover{opacity:.9;}
.share-btn:hover svg{fill:currentColor;}
.share-btn svg{fill:currentColor;}
.share-note{margin-top:8px; font-size:12px; color:#111;}
@media (max-width: 640px){
  .share-row{justify-content:flex-start;}
}

/* Contact form: minimal (no box), controls use bottom line only */
.contact-form{border:none; padding:0; margin-top:var(--s-3);}
.contact-form .fields{display:grid; gap:16px;}

.ctrl{
  width:100%;
  padding:10px 0;
  border:none;
  border-bottom:1px solid var(--fg);
  border-radius:0;
  background:transparent;
  color:var(--fg);
  font:inherit;
}

.ctrl:focus{outline:none; border-bottom-color:var(--accent);}
.contact-form textarea.ctrl{resize:vertical;}

/* FAQ (list style, no box) */
.faq-list{
  list-style:none;
  margin:0;
  padding:0;
}

.faq-item{padding:14px 0;}

.faq-q{
  margin:0;
  font-weight:800;
  font-size:16px;
}

.faq-a{
  margin:8px 0 0;
  color:var(--muted);
  white-space:pre-wrap;
  max-width:none;
}

footer{
  padding:var(--s-4) 0;
  background:#000;
  color:#fff;
  font-size:13px;
}

footer a{color:#fff;}
footer a:hover{color:var(--accent);}


footer .footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
footer .footer-icons{display:flex;align-items:center;gap:10px;}
footer .footer-icon-link{display:inline-flex;align-items:center;justify-content:center;line-height:1;}
footer .footer-icon-link svg{width:18px;height:18px;fill:currentColor;opacity:.92;}

/* ---------------------------------------
   Contact form embed (Form Mailer)
   Keep the hard media tone: no rounded corners, no card borders.
---------------------------------------- */
.contact-form-embed{
  margin-top: 16px;
}
.contact-form-embed .formmailer-embed{
  width: 100%;
}
.contact-form-embed iframe{
  width: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
}
/* Some embed UIs add rounding/shadows; neutralize where possible */
.contact-form-embed *{
  border-radius: 0 !important;
  box-shadow: none !important;
}
@media (max-width: 640px){
  .contact-form-embed{ margin-top: 20px; }
}



.footer-links{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.footer-links a{
  color:#fff;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.35);
}
.footer-links a:hover{ border-bottom-color:#fff; }


/* gno_v4_15: make embedded video iframe fill the player box */
.player iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}