@charset "UTF-8";

/* =========================================================
  streamers studio LP
  - 人が後から改修しやすいように、LP専用の薄いCSSにしています。
  - ベース接頭辞は .s / .s-inner 系。
  - HTML側が studio-* のままでも当たりやすいよう、一部は互換セレクタを併記しています。
========================================================= */

/* ---------------------------------------------------------
  01. Tokens
--------------------------------------------------------- */
:root {
  --s-color-base: #ffffff;
  --s-color-bg: #f7f8fa;
  --s-color-bg-soft: #f1f4f8;
  --s-color-text: #1f2933;
  --s-color-muted: #667085;
  --s-color-line: #e5e9f0;
  --s-color-primary: #006fc9;
  --s-color-primary-dark: #0057a8;
  --s-color-accent: #00a6d6;

  --s-font-sans: "Roboto", "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, sans-serif;

  --s-width: 1080px;
  --s-width-narrow: 840px;

  --s-radius-sm: 6px;
  --s-radius-md: 10px;
  --s-radius-lg: 16px;

  --s-shadow-soft: 0 14px 40px rgba(16, 24, 40, 0.08);

  --s-space-section: 40px;
  --s-space-section-sm: 30px;

  @media (max-width: 768px) {
    --s-space-section: 20px;
    --s-space-section-sm: 10px;
  }
}

/* ---------------------------------------------------------
  02. Reset / Base
--------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--s-color-text); font-family: var(--s-font-sans); font-size: 15px; line-height: 1.85; letter-spacing: 0.03em; background: var(--s-color-base); }
img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; text-decoration: none; }
button, summary { font: inherit; }
main { display: block; }
section { scroll-margin-top: 120px; }

/* ---------------------------------------------------------
  03. Layout
--------------------------------------------------------- */
.s, .studio-main { overflow: hidden; background: var(--s-color-base); }
.s { padding: var(--s-space-section) 0; }
.s-inner { width: min(100% - 40px, var(--s-width)); margin-inline: auto; }
.s-inner-narrow { width: min(90% - 40px, var(--s-width-narrow)); margin-inline: auto; }

.s-head {  }
.s-title { margin: 0; font-size: clamp(18px, 3vw, 21px); font-weight:500; line-height: 1.5; }
.s-lead { margin: 1.5em auto 2.0em; color: var(--s-color-muted); }
.s-note { margin: 1.0em 0 2.0em; color: var(--s-color-muted); font-size:13px; }
.s-button-outline { color: var(--s-color-primary); background: #fff; border-color: var(--s-color-primary); }
.s-button-outline:hover { color: #fff; background: var(--s-color-primary); }

.center { text-align: center; }

@media (max-width: 768px) {
  .s, .studio-main { overflow: hidden; background: var(--s-color-base); }
  .s { padding: var(--s-space-section) 0; }
  .s-inner { width: min(100% - 10%, var(--s-width)); margin-inline: auto; }
  .s-inner-narrow { width: min(100% - 10%, var(--s-width-narrow)); margin-inline: auto; }
  
  .s-head {  }
  .s-title { margin: 0; font-size: clamp(16px, 3vw, 18px); font-weight:500; line-height: 1.5; }
  .s-lead { margin: 1.5em auto 2.0em; color: var(--s-color-muted); }
  .s-note { margin: 1.0em 0 2.0em; color: var(--s-color-muted); font-size:12px; }
  .s-button-outline { color: var(--s-color-primary); background: #fff; border-color: var(--s-color-primary); }
  .s-button-outline:hover { color: #fff; background: var(--s-color-primary); }
}


/* ---------------------------------------------------------
  04. Header / Footer
--------------------------------------------------------- */
.h { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.94); border-bottom: 1px solid var(--s-color-line); backdrop-filter: blur(6px); }
.h-inner { width: min(100% - 32px, 1180px); min-height: 80px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.h-name { dipslay:flex; flex-direction:row; }
.h-name h1 { font-size:11px; font-weight:normal; }
.h-logo { display: inline-flex; align-items: center; }
.h-logo small { padding-left:10px; transform:translate(0,6px); }
.h-nav { display: flex; align-items: center; gap: 20px; }
.h-link { color: var(--s-color-muted); font-size: 12px; }
.h-link:hover { color: var(--s-color-primary); }
.h-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 25px; color: #fff; font-size:16px; font-weight: 500; background: var(--s-color-primary); border-radius: 4px; }

.f { padding: 80px 0 0; }
.f-inner { text-align: center; }
.f-logo { display: inline-flex; margin-bottom: 22px; }
.f-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px 28px; margin-bottom: 20px; font-size: 12px; }
.f-copyright { margin: 0; padding:20px 0; color: rgba(255, 255, 255, 0.7); font-size: 12px; background: #111827; }

@media (max-width: 768px) {
  .h { position: sticky; top: 0; z-index: 50; padding-bottom:5px; background: rgba(255, 255, 255, 0.94); border-bottom: 1px solid var(--s-color-line); backdrop-filter: blur(6px); }
  .h-inner { width: min(100% - 10%, 1180px); min-height: auto; margin-inline: auto; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px; }
  
  .h-name { dipslay:flex; flex-direction:column; }
  .h-name h1 { font-size:9px; font-weight:normal; }
  .h-logo { display: inline-flex; align-items: center; }
  .h-logo small { padding-left:10px; transform:translate(0,6px); }
  .h-nav { display: none; align-items: center; gap: 20px; }
  .h-link { color: var(--s-color-muted); font-size: 12px; }
  .h-link:hover { color: var(--s-color-primary); }
  .h-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 25px; color: #fff; font-size:16px; font-weight: 500; background: var(--s-color-primary); border-radius: 4px; }
  
  .f { padding: 40px 0 0; }
  .f-inner { text-align: center; }
  .f-logo { display: inline-flex; margin-bottom: 22px; }
  .f-logo img { width:80px; height:auto; }
  .f-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 10px; margin-bottom: 20px; font-size: 10px; }
  .f-copyright { margin: 0; padding:20px 0; color: rgba(255, 255, 255, 0.7); font-size: 12px; background: #111827; }
}

/* ---------------------------------------------------------
  05. Breadcrumb
--------------------------------------------------------- */
.b { display:none; width: min(100% - 40px, var(--s-width)); margin: 18px auto; font-size: 12px; color: var(--s-color-muted); }
.b-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.b-item:not(:last-child)::after { content: "/"; margin-left: 8px; color: #b4bdc9; }


/* ---------------------------------------------------------
  06. CTA
--------------------------------------------------------- */
.cta { text-align:center; }
.cta > * { padding: 30px 0 20px; background: var(--s-color-bg); }
.s-button { display: inline-flex; align-items: center; justify-content: center; min-width: 220px; min-height: 56px; padding: 0 30px; border-radius: 4px; border: 1px solid transparent; font-size: 18px; font-weight: 500; line-height: 1.4; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.s-button:hover { transform: translateY(-1px); }
.s-button-primary { color: #fff; background: var(--s-color-primary); border-color: var(--s-color-primary); }
.s-button-primary:hover { background: var(--s-color-primary-dark); border-color: var(--s-color-primary-dark); }


/* ---------------------------------------------------------
  07. Hero
--------------------------------------------------------- */
.hero { width:100%; margin: 0; padding:0 0 var(--s-space-section) 0; }
.hero-media { position: relative; margin:0; }
.hero-media img { width: 100%; height:auto; object-fit: cover; }


/* ---------------------------------------------------------
  08. intro
--------------------------------------------------------- */
.intro {  }
.intro .s-inner { display:flex; align-items:center; gap:30px; }
.s-tags { display: flex; flex-wrap: wrap; gap: 10px 10px; padding: 0; margin: 30px 0 0; list-style: none; }
.s-tags-item { display: inline-flex; align-items: center; justify-content: center; padding: 7px 10px; color: #006fc9; font-size: 11px; line-height: 1.0; letter-spacing: 0.04em; background: #fff; border: 1px solid #006fc9; border-radius: 4px; }

@media (max-width: 640px) {
  .intro .s-inner { display:flex; flex-direction: column; align-items:center; gap:30px; }
  .s-tags { gap: 10px; margin-top: 18px; }
  .s-tags-item { min-height: 32px; padding: 0 12px; font-size: 13px; }
}


/* ---------------------------------------------------------
  09. Feature
--------------------------------------------------------- */
.feature { margin-block-start:40px; }
.feature-item-reverse { justify-items:end; }
.feature-item { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding-top:40px; }
.feature-item-reverse .feature-image { order: 2; }
.feature-image img { width: 100%; object-fit: cover; box-shadow: var(--s-shadow-soft); }
.feature-body { max-width:480px; }
.feature-title { margin: 0; font-size: clamp(18px, 2.4vw, 24px); line-height: 1.5; }
.feature-text { margin: 18px 0 0; color: var(--s-color-muted); }

@media (max-width: 640px) {
  .feature-item { display: flex; flex-direction: column; gap: 20px; align-items: center; padding-top:40px; }
  .feature-item-reverse { justify-items:inherit; }
  .feature-item-reverse .feature-image { order: inherit; }
  .feature-body { max-width:90%; margib-inline:auto; }
}

/* ---------------------------------------------------------
  10. Access
--------------------------------------------------------- */
.access-panel { display: grid; grid-template-columns: 1.5fr 0.8fr; gap:40px; align-items: center; padding:20px; background: #fff; border: 1px solid var(--s-color-line); }
.access-map { margin:0; }
.access-map iframe { width: 100%; height:450px; border:0; object-fit: cover; }
.access-list { margin: 30px 0 0; }
.access-row { padding: 10px 0; border-top: 1px solid var(--s-color-line); }
.access-row dt { margin: 0; font-size: 16px; font-weight:500; }
.access-row dd { margin: 0; color: var(--s-color-muted); }

@media (max-width: 640px) {
  .access-panel { display: flex; flex-direction: column; gap:20px; align-items: center; padding:20px; background: #fff; border: 1px solid var(--s-color-line); }
  .access-map { width:100%; margin:0; }
  .access-map iframe { width: 100%; height:230px; border:0; object-fit: cover; }
}

/* ---------------------------------------------------------
  11. Price
--------------------------------------------------------- */
.price { margin-block-end:40px; }
.studio-layout { background: #fff; margin:24px 0 0; border: 1px solid var(--s-color-line); text-align: center; }
.studio-layout img { width: 100%; object-fit: cover; }
.price-cards { margin-top: 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.price-card { padding: 20px; background: #fff; border: 1px solid var(--s-color-line); }
.price-card-title { min-height: 2em; margin: 0; font-size: 16px; font-weight:500; line-height: 1.4; }
.price-card-price { margin: 16px 0 0; color: var(--s-color-primary); font-size: 28px; font-weight: 900; line-height: 1.2; }
.price-card-price b { font-family:'Roboto', sans-serif; font-size:27px; }
.price-card-price span { display:inline-flex; font-size: 14px; transform:translate(0,-.125em); }
.price-card-note { margin: 12px 0 0; color: var(--s-color-muted); font-size: 13px; line-height: 1.7; }
.price-card-note.time {  }
.price-card-note.day { margin-top:4px; }
.price-actions { margin-top: 34px; text-align: center; }

@media (max-width: 640px) {
  .price-cards { margin-top: 28px; display: grid; grid-template-columns: repeat(1, 1fr); gap: 16px; }
}

/* ---------------------------------------------------------
  12. Spec
--------------------------------------------------------- */
.spec { margin-top: 20px; }
.spec-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.spec-card { display: flex; gap:20px; min-height: 110px; padding: 20px; background: #fff; border: 1px solid var(--s-color-line); }
.spec-icon { display: block; width: 80px; height: 80px; margin:0; }
.spec-icon img { max-width:100%; height:auto; object-fit:cover; }
.spec-body { width:calc(100% - 100px); }
.spec-card-title { margin: 0; font-size: 16px; font-weight: 500; }
.spec-card-text { margin: 0; color: var(--s-color-muted); font-size: 12px; line-height: 1.7; }

@media (max-width: 640px) {
  .spec-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(1, 1fr); gap: 16px; }
}

/* ---------------------------------------------------------
  13. Usecase
--------------------------------------------------------- */
.usecase-slider { margin-top: 40px; padding: 100px; background: var(--s-color-bg-soft); }
.usecase-card { max-width: 760px; margin-inline: auto; padding: 24px; background: #fff; text-align: center; }
.usecase-card-text { margin: 0; color: #e5484d; font-weight: 800; }


/* ---------------------------------------------------------
  14. Flow
--------------------------------------------------------- */
.flow-list { margin: 40px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; }
.flow-item { position: relative; }
.flow-img { display: block; width:100%; aspect-ratio:4/3; margin:0 0 15px; border: 1px solid var(--s-color-line); text-align:center; }
.flow-body {  }
.flow-title { margin: 0; font-size: 16px; font-weight:500; }
.flow-text { margin: 10px 0 0; color: var(--s-color-muted); font-size: 13px; line-height: 1.5; }

@media (max-width: 640px) {
  .flow-list { margin: 40px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(1, 1fr); gap: 20px; }
  .flow-item { display:flex; gap:20px; position: relative; }
  .flow-img { display: block; width:30%; aspect-ratio:1/1; margin:0 0 0; border: 1px solid var(--s-color-line); text-align:center; }
  .flow-img img { width:100%; height:auto; object-fit:cover; }
}

/* ---------------------------------------------------------
  15. FAQ
--------------------------------------------------------- */
.faq-list { margin-block: 40px; display: grid; gap: 10px; }
.faq-item { background: #fff; border: 1px solid var(--s-color-line); overflow: hidden; }
.faq-question { position: relative; padding: 18px 48px 18px 20px; cursor: pointer; font-size:18px; font-weight: 500; list-style: none; }
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--s-color-primary); line-height:1; font-size:20px; font-weight: 100; }
.faq-item[open] .faq-question::after { content: "−"; }
.faq-answer { padding: 0 20px 20px; color: var(--s-color-muted); }
.faq-answer p { margin: 0; font-size:13px; }

@media (max-width: 640px) {
  .faq-question { position: relative; padding: 18px 48px 18px 20px; cursor: pointer; font-size:16px; font-weight: 500; list-style: none; }
}

/* ---------------------------------------------------------
  16. Calendar
--------------------------------------------------------- */
.calendar { margin-block-end: 80px; padding: 100px; background: var(--s-color-bg-soft); }
.calendar iframe { width:100%; max-width:1080px; margin:32px auto 0; }
@media (max-width: 640px) {
  .calendar { margin-block-end: 80px; padding: 40px 5%; background: var(--s-color-bg-soft); }
  .calendar iframe { width:100%; max-width:1080px; margin:32px auto 0; }
}

/* ---------------------------------------------------------
  17. Corp
--------------------------------------------------------- */
.s.corp { margin-block-start: 40px; }
.corp-list { display: flex; margin-block: 20px; padding:20px 0; border-bottom:var(--s-color-line) 1px solid; }
.corp-list dt { flex: 0 0 7em; }
.corp-list dd { flex: 1; min-width: 0; }
.corp-list ul { padding-inline-start:24px; list-style-type: circle; }

/* ---------------------------------------------------------
  18. Usage
--------------------------------------------------------- */
.s.usage .s-title { margin-block-end: 20px; }
.scrollbox { overflow-y: auto; overflow-x: hidden; width: 100%; max-height: 400px; border:var(--s-color-line) 1px solid; -webkit-overflow-scrolling: touch; }
.scrollbox-inner { padding: 20px; }

.policy-tabs { display: flex; }
.policy-tab { flex: 1; appearance: none; border: 0; border-right: 1px solid var(--s-color-line); padding: 16px 20px; background: var(--s-color-bg); color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.policy-tab:last-child { border-right: 0; }
.policy-tab:hover { background: var(--s-color-line); }
.policy-tab.is-active { background: var(--s-color-white); }
.policy-panel[hidden] { display: none; }

.joint-use { margin-block: 30px; }
.joint-use-item { margin: 0; border: 1px solid var(--s-color-line); }
.joint-use-item + .joint-use-item { margin-top: 20px; }
.joint-use-row { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; border-bottom: 1px solid var(--s-color-line); }
.joint-use-row:last-child { border-bottom: 0; }
.joint-use-row dt, .joint-use-row dd { margin: 0; padding: 16px 20px; }
.joint-use-row dt { font-weight: 700; background: var(--s-color-bg); }
.joint-use-row dd { min-width: 0; }

@media (max-width: 640px) {
  .policy-tabs { flex-direction: column; overflow: visible; }
  .policy-tab { flex: none; width: 100%; min-width: 0; padding: 14px 16px; border-right: 0; border-bottom: 1px solid var(--s-color-line); white-space: normal; }
  .policy-tab:last-child { border-bottom: 0; }
  .joint-use-row { grid-template-columns: 1fr; }
  .joint-use-row dt, .joint-use-row dd { padding: 14px 16px; }
  .joint-use-row dt { border-bottom: 1px solid var(--s-color-line); }
}

.center { text-align:center; }
.align-right { text-align:right; }