@charset "UTF-8";

/* =================================================
   TEAM OG LP – CLEAN MASTER CSS (rewrite)
   - keep serif/mono system
   - keep sections centered
   - fix hero phone crop
   - fix pricing table CTA alignment (UNIFIED)
   - rewrite voices for mobile (shorter cards)
================================================= */

/* =========================
   GLOBAL FONT OVERRIDE
========================= */
/* Base text */
body,
.pog-wrap,
.pog-card,
.og-usage,
.nyt-benefits,
.og-voices,
.og-price,
.og-steps,
.og-faq,
.nyt-hero{
  font-family: Georgia, "Times New Roman", Times, serif;
  color:#111;
}


/* Strong headings */
h1, h2, h3,
.pog-name,
.nyt-hero__title,
.nyt-benefits__title,
.og-usage__title,
.nyt-card__heading,
.og-voices__title,
.og-price__title,
.og-steps__title,
.og-faq__title{
  font-family: Georgia, "Times New Roman", Times, serif;
  letter-spacing:-0.02em;
}

/* =========================
   TOKENS / VARIABLES
========================= */
:root{
  --bg:#fff;
  --ink:#111;
  --muted:#2b2b2b;
  --sub:#6b7280;
  --hair:#d8d8d8;
  --wash:#f2f2f2;
  --line:#e5e7eb;

  --container:980px;
  --pad:16px;
  --gap:16px;

  --shadow-soft:0 6px 18px rgba(0,0,0,.06);

  --og-header-h:56px;
  --og-pad-x:16px;
  --og-rule:1px;
  --og-rule-color:rgba(0,0,0,.12);
  --og-header-bg:#fff;
  --og-text:#111;
  --og-muted:#2b2b2b;

  /* hero phone bg (optional) */
  --nyt-hero-phone-image:url("http://pokeog555.com/temaog/wp-content/uploads/2026/02/iphone.jpg");
}

/* container helper */
.nyt-hero__inner,
.nyt-benefits__rail,
.og-usage,
.og-voices,
.og-price,
.og-steps,
.og-faq{
  max-width:var(--container);
  margin:0 auto;
}

/* =========================
   BASIC
========================= */
body{ background:var(--bg); }
*{ box-sizing:border-box; }

/* =================================================
   POG CARD
================================================= */
.pog-wrap{
  max-width:430px;
  margin:24px auto;
  padding:0 14px;
  color:var(--ink);
}

.pog-card{
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  overflow:hidden;
}

/* Header */
.pog-head{
  display:grid;
  grid-template-columns:60px 1fr;
  gap:14px;
  padding:16px;
  border-bottom:1px solid var(--line);
}

.pog-avatar{
  width:56px;
  height:56px;
  border-radius:12px;
  overflow:hidden;
}

.pog-avatarImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.pog-name{
  margin:0;
  font-size:22px;
  font-weight:700;
}

.pog-meta{
  margin:4px 0 10px;
  color:var(--sub);
  font-size:13px;
}

/* SNS Icons */
.pog-social{
  display:flex;
  gap:10px;
}

.pog-socialLink{
  width:30px;
  height:30px;
  border-radius:50%;
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#555;
  text-decoration:none;
  transition:.15s;
}

.pog-socialLink:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}

.pog-icon{
  width:16px !important;
  height:16px !important;
  display:block !important;
  fill:currentColor !important;
}

/* Tabs */
.pog-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:10px;
  border-bottom:1px solid var(--line);
}

.pog-tab{
  padding:10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#f9fafb;
  font-weight:600;
  cursor:pointer;
}

.pog-tab.is-active{
  background:#111;
  color:#fff;
}

/* Body / Panels */
.pog-body{ padding:16px; }
.pog-panel{ display:none; }
.pog-panel.is-active{ display:block; }

/* Banner Buttons */
.pog-banners{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:6px 0 14px;
}
.pog-bannerLink{
  display:block;
  width:100%;
  text-decoration:none;
}
.pog-banner{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(15,23,42,.02);
  font-size:13px;
  letter-spacing:.12em;
  font-weight:700;
  color:#000;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.pog-banner:hover{
  transform:translateY(-1px);
  background:rgba(15,23,42,.04);
  box-shadow:var(--shadow-soft);
  border-color:rgba(0,0,0,.14);
}
.pog-banner:active{
  transform:translateY(0) scale(.99);
}
.pog-bannerIcon{
  width:18px;
  height:18px;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  color:rgba(15,23,42,.7);
  flex:0 0 auto;
}
.pog-bannerSvg{
  width:14px !important;
  height:14px !important;
  display:block !important;
  fill:currentColor !important;
}
.pog-bannerText{ line-height:1; }

/* Slider */
.pog-slider{
  position:relative;
  overflow:hidden;
}
.pog-sliderTrack{
  display:flex;
  gap:12px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-right:60px;
}
.pog-slider::after{
  content:"";
  position:absolute;
  right:0; top:0;
  width:60px; height:100%;
  pointer-events:none;
  background:linear-gradient(to left,#fff,rgba(255,255,255,0));
}
.pog-slider::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:24px; height:100%;
  pointer-events:none;
  background:linear-gradient(to right,#fff,rgba(255,255,255,0));
}

/* Slide Card */
.pog-slideLink{
  display:block;
  min-width:75%;
  color:inherit;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.pog-slide{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  display:flex;
  flex-direction:column;
  background:#fff;
}
.pog-slideTitle{
  margin:0 0 6px;
  font-size:16px;
  font-weight:700;
}
.pog-slideText{
  margin:0 0 10px;
  font-size:12px;
  line-height:1.2;
  color:#777;
}
.pog-slideMore{
  margin-top:auto;
  align-self:flex-end;
  font-size:13px;
  color:#9d9d9d;
}
.pog-slideTitle,
.pog-slideText{
  white-space:normal;
  word-break:break-word;
  overflow-wrap:break-word;
}

.pog-banners-p{
    font-size: 13px;
    width: 95%;
    margin: 0 auto 20px;
    line-height: 1.3;
}

.pog-banners-p strong{
	font-weight: bold;
}

/* LINE Share */
.pog-lineWrap{
  width:90%;
  margin:20px auto 6px;
}
.pog-lineShare{
  display:block;
  text-align:center;
  padding:14px;
  border-radius:999px;
  background:#06c755;
  color:#fff;
  font-weight:700;
  text-decoration:none;
}

/* Footer */
.copyright {
    font-size: 11px;
    text-align: center;
    margin: 20px 0;
    display: block;
    overflow: hidden;
    padding-bottom: 30px;
}



/* =================================================
   HEADER
================================================= */
.og-header{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--og-header-h);
  background:var(--og-header-bg);
  z-index:9999;
  transform:translateY(0);
  transition:transform .22s ease;
  will-change:transform;
  border-bottom:1px solid rgba(0,0,0,.06);
}

.og-header.is-hidden{ transform:translateY(-100%); }

.og-header__inner{
  height:100%;
  display:flex;
  align-items:center;
  padding:0 var(--og-pad-x);
}

.og-header__brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  text-decoration:none;
  color:var(--og-text);
}

.og-header__logo{
  display:block;
  height:40px;
  width:auto;
}

.og-header__tagline{
  font-size:12px;
  line-height:1.25;
  color:var(--og-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:calc(100vw - 132px);
}

.og-header__rule{
  position:absolute;
  left:0; right:0; bottom:0;
  height:var(--og-rule);
  background:var(--og-rule-color);
  pointer-events:none;
}

.og-header-spacer{ height:var(--og-header-h); }

/* =================================================
   HERO (base)
================================================= */
.nyt-hero{
  background:var(--bg);
  color:var(--ink);
  padding:40px 0 0;
  overflow:hidden;
}

.nyt-hero__inner{
  padding:0 var(--pad);
  max-width:var(--container);
  margin:0 auto;
}

.nyt-hero__title{
  margin:0 0 14px;
  font-weight:700;
  line-height:1.02;
  font-size:clamp(44px, 9.5vw, 72px);
}

.nyt-hero__dek{
  margin:0 0 22px;
  font-weight:400;
  color:var(--muted);
  line-height:1.8;
  font-size:14px;
}

/* =================================================
   HERO – phone variant (mobile order)
   phone → TOP / text → BOTTOM
================================================= */
.nyt-hero--phone .nyt-hero__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  align-items:start;
}
.nyt-hero--phone .nyt-hero__phone{ order:1; }
.nyt-hero--phone .nyt-hero__content{ order:2; }
.nyt-hero__content{ min-width:0; }

/* =================================================
   HERO – phone image area (default)
================================================= */
.nyt-hero__phone{
  width:100%;
  max-width:520px;
  margin:0 auto;

  background-image:url("http://pokeog555.com/temaog/wp-content/uploads/2026/02/photo12.jpg");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;

  background-color:rgba(0,0,0,.02);
  border:1px solid rgba(0,0,0,.10);

  aspect-ratio:10 / 16;
  min-height:280px;
}

.nyt-hero__phone1{
  width:100%;
  max-width:520px;
  margin:0 auto;

  background-image:url("http://pokeog555.com/temaog/wp-content/uploads/2026/02/cbd-top0.jpg");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  aspect-ratio:10 / 16;
  min-height:280px;
}

/* =================================================
   HERO KEY MESSAGE – editorial note style
================================================= */
.nyt-hero__box{
  position:relative;
  max-width:560px;
  padding:18px;

  background:#fbfbfb;
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;

  box-shadow:
    0 1px 0 rgba(0,0,0,.04),
    0 10px 26px rgba(0,0,0,.05);

  overflow:hidden;
}
.nyt-hero__box::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background:rgba(0,0,0,.78);
}
.nyt-hero__box::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:13px;
  pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
.nyt-hero__box p{
  margin:0;
  padding-left:10px;
  font-size:14px;
  line-height:1.9;
  color:rgba(17,17,17,.92);
  letter-spacing:.02em;
}

/* =================================================
   BENEFITS
================================================= */
.nyt-benefits{
  background:var(--bg);
  padding:0 0 12px;
  width:68%;
  margin:0 auto;
}
.nyt-benefits__head{ padding:0 0 30px 0; }
.nyt-benefits__title{
  margin:0 0 8px;
  font-size:20px;
  font-weight:700;
}
.nyt-benefits__rule{
  width:160px;
  height:4px;
  background:var(--ink);
}
.nyt-benefits__rail{
  display:flex;
  gap:var(--gap);
  padding:0 var(--pad) 10px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.nyt-benefits__rail::-webkit-scrollbar{ display:none; }

.nyt-card{
  flex:0 0 88%;
  max-width:88%;
  border:1px solid var(--hair);
  background:var(--bg);
  scroll-snap-align:start;
}
.nyt-card__heading{
  margin:0;
  padding:14px 14px 12px;
  font-size:18px;
  font-weight:700;
  border-bottom:1px solid var(--hair);
}
.nyt-card__body{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  padding:14px;
}
.nyt-card__media{ width:100%; }
.nyt-card__media img{ width:100%; height:auto; }
.nyt-card__text h4{
  margin:0 0 4px;
  font-size:13px;
  letter-spacing:.02em;
}
.nyt-card__text p{
  margin:0 0 12px;
  font-size:12px;
  line-height:1.7;
  color:#333;
}

/* =================================================
   USAGE
================================================= */
.og-usage{ padding:32px 0; }
.og-usage__title{
  font-size:20px;
  margin:0 0 8px;
  font-weight:700;
}
.og-usage__rule{
  width:160px;
  height:4px;
  background:var(--ink);
  margin-bottom:20px;
}
.og-tabs{
  display:flex;
  border:1px solid var(--hair);
  margin-bottom:20px;
}
.og-tab{
  flex:1;
  padding:12px 8px;
  font-size:13px;
  background:#e6e6e6;
  border:none;
  cursor:pointer;
}
.og-tab.is-active{
  background:var(--wash);
  font-weight:600;
}
.og-panel{ display:none; }
.og-panel.is-active{ display:block; }

.og-panel__grid{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.og-panel__media{
  width: 95%;
  margin:0 auto;
}
.og-panel__media img{ width:100%; height:auto; }
.og-panel__text h3{
  font-size:21px;
  font-weight:700;
  line-height:1.4;
  margin:0 0 10px;
  text-decoration:underline;
}
.og-panel__text p{
  font-size:16px;
  line-height:1.4;
  color:#333;
  margin:0 0 14px;
}

/* =================================================
   VOICES (base)
================================================= */
.og-voices{
  padding:32px 0 12px;
}
.og-voices__head{ padding:0 0 20px 0; }
.og-voices__title{
  margin:0 0 8px;
  font-size:20px;
  font-weight:700;
}
.og-voices__rule{
  width:160px;
  height:4px;
  background:#111;
}
.og-voices__rail{
  display:flex;
  gap:16px;
  padding:0 var(--pad) 10px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.og-voices__rail::-webkit-scrollbar{ display:none; }

.og-voice{
  flex:0 0 88%;
  max-width:88%;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  scroll-snap-align:start;
}
.og-voice__label{
  padding:12px 14px;
  font-size:14px;
  font-weight:700;
  background:#f3f3f3;
  border-bottom:1px solid rgba(0,0,0,.12);
}
.og-voice__body{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:16px;
  padding:16px;
  align-items:start;
}
.og-voice__avatar{
  width:80px;
  height:80px;
}
.og-voice__avatar img{
  width:100%;
  height:auto;
  border-radius:100px;
}
.og-voice__text h3{
  margin:0 0 6px;
  font-size:16px;
  font-weight:700;
  line-height:1.2;
}
.og-voice__text p{
  margin:0;
  font-size:13px;
  line-height:1.2;
  color:#333;
}

/* =================================================
   PRICE TABLE
================================================= */
.og-price{ padding:20px 0; }
.og-price__title{
  font-size:28px;
  font-weight:600;
  margin:0 0 24px;
}

.og-tableWrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.og-table{
  width:100%;
  min-width:720px;
  border-collapse:collapse;
  background:#fff;
}

.og-table thead th{
  font-size:13px;
  font-weight:600 show;
  color:#666;
  background:#f3f3f3;
  border-bottom:1px solid rgba(0,0,0,.08);
  text-align:center;

  /* ✅ header layout fix */
  padding:18px 12px 22px;
  vertical-align:top;
  line-height:1.15;
}

/* th children flow: title line + buttons */
.og-table thead th > :not(.og-planBtnGroup){
  display:block;
}

/* body rows */
.og-table tbody tr{ border-top:1px solid rgba(0,0,0,.06); }
.og-table tbody tr:first-child{ border-top:none; }

.og-table tbody th{
  width:180px;
  padding:18px 12px 18px 0;
  font-size:13px;
  font-weight:500;
  color:#777;
  vertical-align:top;
  white-space:nowrap;
}

.og-table td{
  padding:18px 12px;
  font-size:15px;
  line-height:1.7;
  color:#111;
  vertical-align:top;
}

.og-table td:nth-child(3){ font-weight:600; }
.og-table tbody tr:nth-child(2) td:nth-child(3){ font-size:16px; }

.og-table small{
  display:block;
  margin-top:4px;
  font-size:12px;
  color:#666;
  font-weight:400;
}

/* =================================================
   PROCESS (steps)
================================================= */
.og-steps{ padding:20px 0; }
.og-steps__head{ margin-bottom:18px; }
.og-steps__title{
  margin:0 0 6px;
  font-size:20px;
  font-weight:700;
}
.og-steps__lead{
  margin:0 0 14px;
  font-size:13px;
  line-height:1.7;
  color:#555;
}
.og-steps__rule{
  width:160px;
  height:4px;
  background:#111;
}
.og-steps__list{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:grid;
  gap:12px;
}
.og-step{
  position:relative;
  display:flex;
  gap:14px;
  padding:16px 14px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
}
.og-step__badge{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(0,0,0,.14);
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  background:#f5f5f5;
}
.og-step__title{
  margin:0 0 4px;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
}
.og-step__text{
  margin:10px 0 0;
  font-size:13px;
  color:#333;
  line-height:1.2;
}
.og-step::after{
  content:"";
  position:absolute;
  left:31px;
  top:54px;
  bottom:-12px;
  width:1px;
  background:rgba(0,0,0,.10);
}
.og-step:last-child::after{ display:none; }
.og-step--final{ background:#fafafa; }

/* =================================================
   FAQ
================================================= */
.og-faq{ padding:20px 0; }
.og-faq__head{ margin-bottom:18px; }
.og-faq__title{
  margin:0 0 8px;
  font-size:20px;
  font-weight:700;
}
.og-faq__rule{
  width:160px;
  height:4px;
  background:#111;
}
.og-faq__list{ border-top:1px solid rgba(0,0,0,.10); }
.og-faq__item{
  border-bottom:1px solid rgba(0,0,0,.10);
  background:#fff;
}
.og-faq__q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 0;
  background:transparent;
  border:0;
  text-align:left;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:opacity .15s ease;
}
@media (hover:hover){
  .og-faq__q:hover{ opacity:.72; }
}
.og-faq__q:focus{ outline:none; }
.og-faq__q:focus-visible{
  outline:2px solid rgba(0,0,0,.18);
  outline-offset:6px;
}
.og-faq__a{
  padding:0 0 18px;
  color:#333;
  font-size:13px;
  line-height:1.85;
}
.og-faq__item.is-open .og-faq__q{ padding-bottom:10px; }

.og-faq__icon{
  width:18px;
  height:18px;
  position:relative;
  flex:0 0 18px;
  opacity:.85;
}
.og-faq__icon::before,
.og-faq__icon::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:2px;
  background:#111;
  transform:translate(-50%,-50%);
}
.og-faq__icon::after{
  transform:translate(-50%,-50%) rotate(90deg);
  transition:transform .18s ease, opacity .18s ease;
}
.og-faq__item.is-open .og-faq__icon::after{
  transform:translate(-50%,-50%) rotate(0deg);
  opacity:0;
}

/* =================================================
   NOTICE
================================================= */
.og-note{
  padding:18px var(--pad);
  width:60%;
  margin:0 auto 40px;
}
.og-note__inner{
  max-width:var(--container);
  margin:0 auto;
  position:relative;
  background:#f3ebd7;
  border:1px solid rgb(94 80 33 / 10%);
  border-radius:14px;
  padding:16px;
  box-shadow:
    0 1px 0 rgba(0,0,0,.04),
    0 10px 26px rgba(0,0,0,.05);
  overflow:hidden;
}
.og-note__inner::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background:rgba(0,0,0,.80);
}
.og-note__title{
  margin:0 0 6px;
  padding-left:10px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(0,0,0,.65);
}
.og-note__text{
  margin:0;
  padding-left:10px;
  font-size:14px;
  line-height:1.85;
  color:rgba(17,17,17,.92);
}
.og-note__text strong{
  font-weight:700;
  color:#111;
}
@media (hover:hover){
  .og-note__inner:hover{
    border-color:rgba(0,0,0,.14);
    box-shadow:
      0 1px 0 rgba(0,0,0,.04),
      0 14px 34px rgba(0,0,0,.06);
  }
}
@media (max-width:480px){
  .og-note{
    padding:16px var(--pad);
    width:100%;
    margin:0 0 4%;
  }
  .og-note__inner{
    border-radius:12px;
    padding:14px;
  }
  .og-note__text{
    font-size:13px;
    line-height:1.95;
  }
}

/* =================================================
   BUTTON (orange legacy)
================================================= */
.btn,
a.btn,
button.btn{
  font-size:14px;
  font-weight:700;
  line-height:1.5;
  position:relative;
  display:inline-block;
  padding:10px 20px;
  cursor:pointer;
  user-select:none;
  transition:all .3s;
  text-align:center;
  vertical-align:middle;
  text-decoration:none;
  margin-top:15px;
  border-radius:.5rem;
}
.btn--orange,
a.btn--orange{
  color:#fff;
  background-color:#eb6100;
}
.btn--orange:hover,
a.btn--orange:hover{
  color:#fff;
  background:#f56500;
}

/* =================================================
   PLAN BUTTONS (Pricing table CTA) – UNIFIED
   ✅ One-TimeもOngoingも同じ見た目/同じ並び方
================================================= */
.og-planBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:10px 16px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;

  border-radius:999px;
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  color:#111;

  line-height:1;
  white-space:nowrap;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background .15s ease,
    border-color .15s ease,
    color .15s ease;
}

.og-planBtn--spot{
  background:#f6f6f6;
  border-color:rgba(0,0,0,.16);
  font-weight:500;
  color:#111;
}

.og-planBtn--monthly{
  background:#111;
  border-color:#111;
  color:#fff;
  font-weight:600;
}

@media (hover:hover){
  .og-planBtn:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 18px rgba(0,0,0,.08);
  }
  .og-planBtn--spot:hover{ background:#f0f0f0; }
  .og-planBtn--monthly:hover{ background:#000; }
}

/* ✅ thead内だけ：リンクを強制的にinline-flexに戻す（テーマの a{display:block} 対策） */
.og-table thead .og-planBtnGroup a.og-planBtn{
  display:inline-flex !important;
}

/* ✅ IMPORTANT: theadのボタングループは横並び固定 */
.og-table thead .og-planBtnGroup{
  display:flex !important;
  flex-direction:row !important;
  justify-content:center;
  align-items:center;
  gap:12px;

  margin-top:12px;
  min-height:44px;

  flex-wrap:nowrap !important; /* ← まずは絶対に横 */
}

/* ✅ ボタンが長い場合に折り返しじゃなく縮めて収める */
.og-table thead .og-planBtn{
  padding:9px 14px;
  font-size:11px;
  max-width:100%;
}

/* ✅ それでも幅が足りない時だけ2段にする（狭い画面用） */
@media (max-width: 980px){
  .og-table thead .og-planBtnGroup{
    flex-wrap:wrap !important; /* ← 足りない時だけ自然に2段 */
  }
}

/* mobile table readability */
@media (max-width:768px){
  .og-table{ min-width:680px; }
  .og-price__title{ font-size:22px; }

  /* header buttons: mobileは縦のほうが美しい */
  .og-table thead .og-planBtnGroup{
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    gap:8px;
  }

  .og-table thead .og-planBtn{
    width:100%;
    max-width:260px;
    text-align:center;
  }
}

/* =================================================
   RESPONSIVE
================================================= */
@media (min-width:768px){
  :root{
    --pad:24px;
    --og-header-h:64px;
    --og-pad-x:24px;
  }

  .og-header__logo{
    height:44px;
    margin-bottom:5px;
  }
  .og-header__tagline{
    font-size:12px;
    max-width:none;
    margin-top:28px;
  }

  .nyt-hero{ padding:5px 0 10px; }
  .nyt-hero__dek{ font-size:15px; }
  .nyt-hero__box{ padding:22px 20px; }
  .nyt-hero__box p{ font-size:15px; }

  .nyt-card{
    flex:0 0 62%;
    max-width:62%;
  }
  .nyt-card__body{
    grid-template-columns:1fr 1.2fr;
    gap:20px;
  }
  .nyt-card__text h4{ font-size:14px; }
  .nyt-card__text p{
    font-size:14px;
    line-height: 1.1em;
  }

  .og-panel__grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:32px;
    align-items:start;
  }
  .og-panel__text{ order:1; }
  .og-panel__media{ order:2; }

  .og-voice{
    flex:0 0 62%;
    max-width:62%;
  }
  .og-voices__rail{
    max-width:var(--container);
    margin:0 auto;
  }
}

/* hero phone desktop layout */
@media (min-width:900px){
  .nyt-hero{ padding:26px 0 10px; }

  .nyt-hero--phone .nyt-hero__inner{
    grid-template-columns:1.05fr .95fr;
    gap:48px;
    align-items:center;
    height:510px;
  }

  .nyt-hero__phone{
    border:0;
    background-color:transparent;
    max-width:none;
    justify-self:stretch;
    transform:translateX(6px);
    min-height:520px;
  }

  /* steps: horizontal timeline */
  .og-steps__list{
    grid-template-columns:repeat(6, 1fr);
    gap:14px;
  }
  .og-step{
    flex-direction:column;
    gap:10px;
    padding:16px 14px 18px;
    min-height:170px;
  }
  .og-step__badge{
    width:36px;
    height:36px;
    flex:0 0 36px;
  }
  .og-step::after{ display:none; }
  .og-step::before{
    content:"";
    position:absolute;
    right:-14px;
    top:34px;
    width:14px;
    height:1px;
    background:rgba(0,0,0,.14);
  }
  .og-step:last-child::before{ display:none; }
}

/* mobile table readability */
@media (max-width:768px){
  .og-table{ min-width:680px; }
  .og-price__title{ font-size:22px; }

  /* header buttons: vertical feels cleaner on narrow */
  .og-table thead .og-planBtnGroup{
    flex-direction:column;
    gap:8px;
  }

  .og-table thead .og-planBtn{
    width:100%;
    max-width:260px;
    text-align:center;
  }
}

/* very small phones */
@media (max-width:360px){
  .nyt-hero__phone{ min-height:240px; }
}

/* =================================================
   MOBILE TUNING (≤480)
================================================= */
@media (max-width:480px){

  /* unify width */
  .nyt-benefits,
  .og-usage,
  .og-voices,
  .og-price,
  .og-steps,
  .og-faq{
    width:92%;
    margin:0 auto;
  }

  /* --- HERO PHONE BACKGROUND (crop tighter) --- */
  .nyt-hero__phone{
    width:100%;
    max-width: 520px;
    margin:0 auto;
    height:0;
    padding-top: 0;
    background-image:url("http://pokeog555.com/temaog/wp-content/uploads/2026/02/photo10.jpg");
    background-repeat:no-repeat;
    background-position:top center;
    background-size:100% auto;
    background-color:transparent;
    border:none;
    overflow:hidden;
  }

  /* ================================
     VOICES – MOBILE REWRITE
  ================================= */
  .og-voices{
    padding:28px 0 10px;
  }
  .og-voices__head{
    padding:0 0 16px 0;
  }
  .og-voices__rail{
    gap:12px;
    padding:0 var(--pad) 12px;
  }
  .og-voice{
    flex:0 0 86%;
    max-width:86%;
    border:1px solid rgba(0,0,0,.10);
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 10px 26px rgba(0,0,0,.04);
  }
  .og-voice__label{
    padding:10px 12px;
    font-size:13px;
    background:#f6f6f6;
    border-bottom:1px solid rgba(0,0,0,.08);
  }
  .og-voice__body{
    grid-template-columns:56px 1fr;
    gap:12px;
    padding:12px;
  }
  .og-voice__avatar{
    width:56px;
    height:56px;
  }
  .og-voice__avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:999px;
    display:block;
  }
  .og-voice__text h3{
    margin:0 0 6px;
    font-size:15px;
    line-height:1.25;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
  }
  .og-voice__text p{
    margin:0;
    font-size:12.5px;
    line-height:1.55;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:5;
    overflow:hidden;
  }
}

/* tablet+ voices keep wider rhythm */
@media (min-width:768px){
  .og-voice__text p{
    font-size:13px;
    -webkit-line-clamp:6;
  }
}

/* CSS */
.teamog-ctrNote{
  width: 100%;
}

.teamog-ctrNote__title{
  margin: 0 0 8px;
  font-size: 14px;
  letter-spacing: .02em;
  font-weight: 700;
}

.teamog-ctrNote__text{
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: #111;
}

.teamog-ctrNote__text strong{
  font-weight: 700;
}

.og-voices__p{
	margin: 20px 0;
	font-size: 14px;
}

/* =========================
   GTranslate Floating Button
========================= */
.gt-float{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
}

/* 中身がはみ出す/改行するのを防ぐ */
.gt-float *{
  max-width: 100%;
}

/* クリックしやすく（スマホ） */
@media (max-width: 640px){
  .gt-float{
    right: 12px;
    bottom: 12px;
    padding: 10px 10px;
    box-shadow: 0 10px 26px rgba(0,0,0,.14);
  }
}

/* iPhoneのホームバー回避（対応ブラウザのみ効く） */
@supports (padding: max(0px)){
  .gt-float{
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }

/* =====================================
   OG Tabs A/B (Unique Namespace)
   Mobile-first, no theme collision
===================================== */

.ogtab420{
  max-width: 550px;
  margin: 18px auto 26px;
  padding: 0 12px;
}

/* Tabs */
.ogtab420__tabs{
  display: inline-flex;
  gap: 10px;
  padding: 6px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  background: #fff;
}

.ogtab420__tab{
  appearance: none;
  border: 0;
  background: transparent;
  color: #111;
  font-weight: 800;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, opacity .15s ease;
}

.ogtab420__tab:hover{
  background: rgba(0,0,0,.04);
}

.ogtab420__tab:active{
  transform: scale(.98);
}

.ogtab420__tab.is-active{
  background: #111;
  color: #fff;
}

/* Panels */
.ogtab420__panels{
  margin-top: 14px;
}

.ogtab420__panel{
  width: 100%;
}

/* Content card */
.ogtab420__card{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  background: #fff;
  padding: 14px 14px;
}

.ogtab420__label{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  color: rgba(0,0,0,.55);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.ogtab420__body{
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 18px;
  line-height: 1.6;
  color: #111;
}
	
	.ogtab420__body img{
		width: 100%;
		margin: 0 auto;
	}

/* Mobile tuning */
@media (max-width: 560px){
  .ogtab420{
    padding: 0 10px;
  }
  .ogtab420__tabs{
    width: 100%;
    justify-content: space-between;
  }
  .ogtab420__tab{
    flex: 1;
    text-align: center;
  }
  .ogtab420__body{
    font-size: 17px;
  }
}	
	
}

.pog-panel img{
	width: 100%;
	height: auto;
	margin-bottom: 4%;
}

.teamog-market {
  max-width: 900px;
  margin: 60px auto;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
}

.teamog-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
}

.teamog-lead {
  font-size: 18px;
  margin-bottom: 30px;
  color: #333;
}

.teamog-box {
  background: #f8f8f8;
  padding: 25px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.teamog-box.highlight {
  background: #8a8a8a;
  color: #fff;
}

.teamog-box.highlight h3 {
  color: #fff;
}

.teamog-list {
  list-style: none;
  padding: 0;
  margin: 15px 0;
}

.teamog-list li {
  padding-left: 20px;
  position: relative;
  margin-bottom: 12px;
}

.teamog-list li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: #2ecc71;
  font-weight: bold;
}

.teamog-result {
  margin-top: 15px;
  font-weight: 600;
}

.teamog-note {
  margin-top: 15px;
  font-weight: 500;
  opacity: 0.9;
}

.teamog-values {
  max-width: 1250px;
  margin: 80px auto;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.teamog-title {
  font-size: 30px;
  font-weight: 700;
  margin: 40px auto;
  border-left: 7px solid #686868de;
  padding-left: 1%;
}

.teamog-value-box {
  background: #f5f5f5;
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 10px;
}

.teamog-value-box.highlight {
  background: #111;
  color: #fff;
}

.teamog-value-box.highlight h3 {
  color: #fff;
}

.teamog-value-box h3 {
  margin-bottom: 15px;
  font-size: 20px;
}

.teamog-value-box ul {
  list-style: none;
  padding: 0;
  margin: 0 0 15px 0;
}

.teamog-value-box ul li {
  margin-bottom: 10px;
  padding-left: 18px;
  position: relative;
}

.teamog-value-box ul li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: #2ecc71;
  font-weight: bold;
}

.teamog-desc {
  font-size: 15px;
  line-height: 1.6;
  opacity: 0.9;
}

.teamog-pr-home{
	width: 1250px;
	margin: 0 auto;
}

/* Mobile tuning */
@media (max-width: 560px){
.teamog-pr-home{
	width: 96%;
	margin: 0 auto;
}
}	
	
.teamog-results-section {
  max-width: 1000px;
  margin: 60px auto;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.teamog-results-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 25px;
}

.teamog-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.teamog-table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  background: #fff;
}

.teamog-table thead {
  background: #111;
  color: #fff;
}

.teamog-table th,
.teamog-table td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid #e5e5e5;
  font-size: 15px;
}

.teamog-table tbody tr:hover {
  background: #f5f5f5;
}

.teamog-table th {
  font-weight: 600;
}

@media (max-width: 768px) {
  .teamog-results-title {
    font-size: 22px;
  }
  .teamog-table th,
  .teamog-table td {
    padding: 12px;
    font-size: 14px;
  }
}