@charset "UTF-8";
/* ===================================================================
   おやゆびQR 3兄弟 — 機能比較・特徴・デモQRコード セクション
   すべてのクラス名・変数名は "oyq" 接頭辞でユニーク化
   PC: 横幅1200px固定 / スマートフォン対応レスポンシブ / JSなし
   =================================================================== */

:root {
  --oyq-orange:        #ff8c00;  /* サイト共通アクセント */
  --oyq-orange-deep:   #f57c00;  /* for Stand */
  --oyq-line-green:    #3cab48;  /* for LINE */
  --oyq-web-blue:      #1565c0;  /* for Web */
  --oyq-navy:          #16244e;  /* 見出し列ダークネイビー */
  --oyq-navy-soft:     #223464;
  --oyq-ink:           #1a2b4a;  /* 本文テキスト */
  --oyq-ink-soft:      #231815;
  --oyq-line-color:    #e3e7ee;
  --oyq-bg:            #ffffff;
  --oyq-bg-tint:       #f5f7fb;
  --oyq-bg-sky:        #eaf3fb;
  --oyq-radius:        14px;
  --oyq-radius-sm:     10px;
  --oyq-shadow:        0 6px 22px rgba(20,36,78,.08);
  --oyq-container:     1200px;
}

/* ---- リセット（このセクション内のみ影響を抑える） ---- */
.oyq-section *,
.oyq-section *::before,
.oyq-section *::after { box-sizing: border-box; }

.oyq-section {
  margin: 0;
  padding: 56px 0 0px;
  background: var(--oyq-bg);
  color: var(--oyq-ink);
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.oyq-container {
  width: var(--oyq-container);
  max-width: 100%;
  margin: 0 auto;
  padding: 0px 0px 0px 0px;
}

.oyq-container2 {
  width: var(--oyq-container);
  max-width: 100%;
  margin: 0 auto;
  padding: 0px 0px 0px 0px;
}

/* ===================== 見出し（サイト準拠） ===================== */
.oyq-heading {
  margin: 0 0 6px;
  padding-bottom: 5px;
  border-bottom: 4px solid var(--oyq-orange);
  color: var(--oyq-orange);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.2;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
}
.oyq-heading .oyq-thumb {
  display: inline-flex;
  width: auto; height: 26px;
  color: var(--oyq-orange);
}
.oyq-lead {
  margin: 14px 0 28px;
  color: var(--oyq-ink-soft);
  font-size: 16px;
  line-height: 1.6;
  font-weight: bold;
 font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
}

/* ===================== 比較表 ===================== */
.oyq-table-scroll {
  width: 100%;
  border-radius: var(--oyq-radius);
  box-shadow: var(--oyq-shadow);
  overflow: hidden;
}
.oyq-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--oyq-bg);
  table-layout: fixed;
  overflow: hidden;
}
.oyq-val { display: block; }
.oyq-table col.oyq-col-label { width: 19%; }
.oyq-table col.oyq-col-svc   { width: 27%; }

/* --- ヘッダー行 --- */
.oyq-th-corner {
  background: var(--oyq-navy);
  border-bottom: 3px solid rgba(255,255,255,.12);
}
.oyq-th-corner .oyq-brandmark {
  display: flex; align-items: center; gap: 8px;
  color: #fff; font-weight: bold; font-size: 16px;
  padding: 18px 16px;
}
.oyq-th-corner .oyq-brandmark .oyq-thumb { width: 20px; height: 20px; color: var(--oyq-orange); }

.oyq-th-svc {
  padding: 16px 12px;
  text-align: center;
  color: #fff;
}
.oyq-th-svc .oyq-svc-sub { display:block; font-size: 16px; font-weight: 600; opacity: .9; letter-spacing:.06em; }
.oyq-th-svc .oyq-svc-name { display:block; font-size: 24px; font-weight: 800; line-height:1.25; }
.oyq-th-svc .oyq-svc-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  margin-bottom: 8px;
}

.oyq-th-svc .oyq-svc-icon img { width: auto; height: 22px; }

.oyq-th-svc .oyq-svc-icon svg { width: 22px; height: 22px; color:#fff; }
.oyq-th-line  { background: var(--oyq-line-green); }
.oyq-th-web   { background: var(--oyq-web-blue); }
.oyq-th-stand { background: var(--oyq-orange-deep); }

/* --- ボディ行 --- */
.oyq-table tbody th {
  background: var(--oyq-navy);
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  text-align: left;
  padding: 16px 14px;
  vertical-align: middle;
  white-space: nowrap;
}
.oyq-table tbody th .oyq-rowlabel { display:flex; align-items:center; gap:10px; }

.oyq-table tbody th .oyq-rowlabel img { width: auto; height: 16px; }

.oyq-table tbody th .oyq-thumb { width:18px; height:18px; color: var(--oyq-orange); flex:0 0 auto; }

.oyq-table tbody td {
  padding: 16px 14px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--oyq-line-color);
  font-size: 16px;
}
.oyq-table tbody tr:nth-child(even) td { background: var(--oyq-bg-tint); }

.oyq-cell-main  { font-weight: 700; color: var(--oyq-ink); display:block; }
.oyq-cell-note  { display:block; font-size: 14px; color: var(--oyq-ink-soft); margin-top: 2px; }

/* 対応状況アイコン */
.oyq-badge {
  display:inline-flex; align-items:center; justify-content:center;
  width: 30px; height: 30px; border-radius: 50%;
  margin-bottom: 4px;
}

.oyq-badge img { width: 30px; height: 30px; }

.oyq-badge svg { width: 18px; height: 18px; color:#fff; }
.oyq-badge-ok { background: var(--oyq-web-blue); }
.oyq-badge-no { background: #b9c0cc; }

/* おすすめ設置場所（写真風グラデセル） */
.oyq-place {
  display:block;
  border-radius: var(--oyq-radius-sm);
  padding: 0px 0px;
  box-sizing: border-box;
  text-align:center;
  min-height: 78px;
}
.oyq-place .oyq-place-name {
  width: calc(100% - 100px);
  display:block;
  font-weight:bold;
  font-size: 18px;
  float: left;
  margin: 0px;
  padding: 0.8em 0px 0px 0px;
  box-sizing: border-box;
  line-height: 1.2;
}

.oyq-place .oyq-place-name-line {
color: #3cab48;
}

.oyq-place .oyq-place-name-web {
color: #1565c0;
}

.oyq-place .oyq-place-name-stand {
color: #f57c00;
}


.oyq-place .oyq-place-desc {
  width: calc(100% - 100px);
  display: block;
  margin: 0px;
  padding: 0.7em 0px 0px 10px;
  box-sizing: border-box;
  float: left;
  font-size: 14px;
  line-height: 1.6;
}

.oyq-place .oyq-place-img {
  display:block;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  background-image: url('oyayubi-img/oyayubi-qr-photo01.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 100px;
  float: left;
}

.oyq-place .oyq-place-img2 {
  display:block;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  background-image: url('oyayubi-img/oyayubi-qr-photo02.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 100px;
  float: left;
}

.oyq-place .oyq-place-img3 {
  display:block;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  background-image: url('oyayubi-img/oyayubi-qr-photo03.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 100px;
  float: left;
}




/* 表下のタグライン帯 */
.oyq-tagline {
  margin-top: 22px;
margin-bottom: 50px;    
  background: var(--oyq-bg-sky);
  border-radius: var(--oyq-radius);
  padding: 18px 24px;
  text-align: center;
  color: var(--oyq-navy);
  font-weight: 800;
  font-size: 24px;
  display:flex; align-items:center; justify-content:center; gap: 10px;
}

.oyq-tagline u {
margin: 0px;
padding: 0px;
box-sizing: border-box;
display: inline;
text-decoration: none;
border-bottom-style: solid;
border-bottom-color: #fdb73e;
border-bottom-width: 4px;
}

.oyq-tagline u em {
margin: 0px;
padding: 0px;
box-sizing: border-box;
display: inline;
font-style: normal;
color: #1565c0;
font-size: 30px;
}

@media (max-width: 900px) {
    
.oyq-tagline {
margin-bottom: 30px;
}

}




.oyq-tagline .oyq-thumb { width: 22px; height: 22px; color: var(--oyq-orange); }

/* ===================== 各サービスの特徴 フロー ===================== */
.oyq-flow-services {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 24px;
}

.oyq-flow-service {
  border: 1px solid var(--oyq-line-color);
  border-radius: var(--oyq-radius);
  background: var(--oyq-bg);
  box-shadow: var(--oyq-shadow);
  overflow: hidden;
}

.oyq-flow-header {
  padding: 18px 20px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
}
.oyq-flow-header .oyq-flow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  flex: 0 0 auto;
}
.oyq-flow-header .oyq-flow-icon img { width: auto; height: 42px; }
.oyq-flow-header .oyq-flow-sub  { display: block; font-size: 16px; font-weight: 600; opacity: .92; letter-spacing: .06em; }
.oyq-flow-header .oyq-flow-name { display: block; font-size: 24px; font-weight: 800; }

.oyq-flow-body {
  padding: 24px 20px 28px;
}

.oyq-flow-desc {
  margin: 0 0 24px;
  font-size: 20px;
  color: var(--oyq-ink);
  line-height: 1.85;
  font-weight: bold;
}

.oyq-flow-desc em{
margin: 0px;
padding: 0px;
box-sizing: border-box;
display: inline;
font-style: normal;
color: #e30025;
}

.oyq-flow-desc .oyq-kw { font-weight: bold; display: inline;}





/* フロー横並び */
.oyq-flow-steps {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 8px;
  gap: 0;
}
.oyq-flow-steps::-webkit-scrollbar { height: 4px; }
.oyq-flow-steps::-webkit-scrollbar-track { background: var(--oyq-bg-tint); border-radius: 2px; }
.oyq-flow-steps::-webkit-scrollbar-thumb { background: var(--oyq-line-color); border-radius: 2px; }



/* フロー横並び */
.oyq-flow-steps2 {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 8px;
  gap: 0;
}
.oyq-flow-steps2::-webkit-scrollbar { height: 4px; }
.oyq-flow-steps2::-webkit-scrollbar-track { background: var(--oyq-bg-tint); border-radius: 2px; }
.oyq-flow-steps2::-webkit-scrollbar-thumb { background: var(--oyq-line-color); border-radius: 2px; }



.oyq-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  width: 140px;
}


.oyq-flow-step2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  width: 340px;
}



.oyq-flow-arrow {
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: 700;
  color: var(--oyq-orange);
  padding: 0 10px;
  margin-top: 48px; /* 画像中央付近に揃える */
}

.oyq-flow-arrow img {
width: auto;
height: 40px;
}



.oyq-flow-taxi {
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: 700;
  color: var(--oyq-orange);
  padding: 0 10px;
  margin-top: 48px; /* 画像中央付近に揃える */
}

.oyq-flow-taxi img {
width: auto;
height: 100px;
}






/* おやゆびQRサービスの画像 */

.oyq-img {
width: 90%;
margin: 0px auto;
padding: 0px 0px 20px 0px;
box-sizing: border-box;
display: block;
position: relative;
}

.oyq-img span {
width: 100%;
margin: 0px;
padding: 0px;
box-sizing: border-box;
display: inline-block;
position: relative;
}

.oyq-img span img {
width: 100%;
height: auto;
}


/* --------------------  おやゆびQRサービスの画像 */






















/* QR読み込みスタートボックス */
.oyq-flow-start {
  width: 130px;
  min-height: 126px;
  background: var(--oyq-bg-tint);
  border: 2px dashed var(--oyq-line-color);
  border-radius: var(--oyq-radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px 10px;
  gap: 8px;
  box-sizing: border-box;
}
.oyq-flow-start .oyq-flow-qr-img {
  width: auto; height: 68px;
  object-fit: contain;
}
.oyq-flow-start-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--oyq-ink);
  line-height: 1.75;
  text-align: left;
}

/* スマホ画面枠 */
.oyq-flow-phone-frame {
  width: 130px;
  border-radius: 14px;
  border: 2px solid #dde1ea;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(20,36,78,.10);
  background: #fff;
}
.oyq-flow-phone-frame img {
  width: 100%;
  display: block;
}


/* スマホ画面枠 */
.oyq-flow-phone-frame2 {
  width: 330px;
  border-radius: 14px;
  border: 2px solid #dde1ea;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(20,36,78,.10);
  background: #fff;
}
.oyq-flow-phone-frame2 img {
  width: 100%;
  display: block;
}





.oyq-flow-cap {
  font-size: 14px;
  color: var(--oyq-ink-soft);
  text-align: center;
  margin-top: 20px;
  line-height: 1.75;
  padding: 0 4px;
  max-width: 140px;
  text-align: left;
}


.oyq-flow-cap2 {
  font-size: 14px;
  color: var(--oyq-ink-soft);
  text-align: center;
  margin-top: 20px;
  line-height: 1.75;
  padding: 0 4px;
  max-width: 340px;
  text-align: left;
}


/* ===================== 特徴 + デモQR ===================== */
.oyq-feature-wrap { margin-top: 64px; }

.oyq-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 28px;
}
.oyq-card {
  border: 1px solid var(--oyq-line-color);
  border-radius: var(--oyq-radius);
  background: var(--oyq-bg);
  box-shadow: var(--oyq-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.oyq-card-top {
  padding: 18px 20px;
  color:#fff;
  display:flex; align-items:center; gap: 12px;
}
.oyq-card-top .oyq-card-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(255,255,255,.22); flex:0 0 auto;
}

.oyq-card-top .oyq-card-icon img { width: auto; height: 42px; }

.oyq-card-top .oyq-card-icon svg { width: 24px; height: 24px; color:#fff; }
.oyq-card-top .oyq-card-sub  { display:block; font-size: 16px; font-weight:600; opacity:.92; letter-spacing:.06em; }
.oyq-card-top .oyq-card-name { display:block; font-size: 24px; font-weight: 800; }
.oyq-top-line  { background: var(--oyq-line-green); }
.oyq-top-web   { background: var(--oyq-web-blue); }
.oyq-top-stand { background: var(--oyq-orange-deep); }

.oyq-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
}
.oyq-card-desc {
  margin: 0;
  font-size: 16px;
  color: var(--oyq-ink);
  line-height: 1.85;
}
.oyq-card-desc .oyq-kw { font-weight: 700; display: inline;}
.oyq-kw-line  { color: var(--oyq-line-green); }
.oyq-kw-web   { color: var(--oyq-web-blue); }
.oyq-kw-stand { color: var(--oyq-orange-deep); }

/* デモQRコード枠 */
.oyq-qr {
  margin-top: auto;
  border-top: 1px solid #ddd;
  padding-top: 30px;
  padding-bottom: 10px;
  display:flex; flex-direction:column; align-items:center; gap: 10px;
}

.oyq-qr-frame {
  position: relative;
  width: 182px; height: 182px;
  padding: 2px;
  box-sizing: border-box;
  background:#fff;
  border: 2px solid #ddd;
}

.oyq-qr-frame img,
.oyq-qr-frame svg { width: 100%; height: 100%; display:block; }
/* コーナーガイド（サンプル感の演出） */
.oyq-qr-frame::before,
.oyq-qr-frame::after {
  content:""; position:absolute; width:14px; height:14px;
  border: 2px solid var(--oyq-orange);
}
.oyq-qr-frame::before { top:-2px; left:-2px; border-right:0; border-bottom:0; }
.oyq-qr-frame::after  { bottom:-2px; right:-2px; border-left:0; border-top:0; }

.oyq-qr-cap {
  font-size: 14px; font-weight: 700; color: var(--oyq-ink-soft);
  display:flex; align-items:center; gap: 6px;
  padding-top: 10px;
}
.oyq-qr-cap .oyq-sample-tag {
  background: var(--oyq-orange); color:#fff;
  font-size: 12px; font-weight: 800; letter-spacing:.05em;
  padding: 2px 7px; border-radius: 999px;
}

/* ===================== レスポンシブ ===================== */
@media (max-width: 1240px) {
  .oyq-container { width: 100%; }
  .oyq-container2 { width: 100%; }
}

/* ----------- スマートフォン：横スクロールせず縦積みカード化 ----------- */
@media (max-width: 820px) {
  /* フロー — 縦並び */
  .oyq-flow-services { gap: 24px; margin-bottom: 0px; }
  .oyq-flow-steps {
    flex-direction: column;
    align-items: center;
    overflow-x: visible;
  }

  .oyq-flow-steps2 {
    flex-direction: column;
    align-items: center;
    overflow-x: visible;
  }


  .oyq-flow-step { width: 100%; max-width: 320px; flex-direction: row; align-items: center; gap: 14px; }
  .oyq-flow-start {
    width: 90px; min-width: 90px; min-height: 110px;
  }
  .oyq-flow-start .oyq-flow-qr-img { width: 54px; height: 54px; }
  .oyq-flow-start-label { font-size: 14px; }
  .oyq-flow-phone-frame { width: 90px; min-width: 90px; border-radius: 10px; }


/* スマホ画面枠 */
.oyq-flow-phone-frame2 {
width: 80%; min-width: 80%; border-radius: 10px;
}

  .oyq-flow-cap { max-width: none; flex: 1; font-size: 14px; text-align: left; margin-top: 0; }

 .oyq-flow-cap2 { max-width: 80%; flex: 1; font-size: 14px; text-align: left; margin-top: 2em; }


  .oyq-flow-arrow {
    margin-top: 0;
    padding: 6px 0;
    font-size: 20px;
    transform: rotate(90deg);
    align-self: center;
  }


.oyq-flow-taxi {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 6px 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--oyq-orange);
}


  .oyq-flow-header .oyq-flow-icon { width: 50px; height: 50px; }
  .oyq-flow-header .oyq-flow-icon img { height: 34px; }
  .oyq-flow-header .oyq-flow-sub { font-size: 14px; }
  .oyq-flow-header .oyq-flow-name { font-size: 20px; }
  .oyq-flow-body { padding: 18px 16px 22px; }
  .oyq-flow-desc { font-size: 15px; margin-bottom: 18px; }

  .oyq-section { padding: 30px 0 20px; }
  .oyq-container { padding: 0px 0px 0px 0px; }
  .oyq-container2 { padding: 0 16px; }
  .oyq-heading {
padding: 0px 4% 5px 4%;
box-sizing: border-box;
font-size: 21px; }

.oyq-lead {
  padding: 0px 4% 0px 4%;
  box-sizing: border-box;
}

  .oyq-cards { grid-template-columns: 1fr; gap: 20px; }
  .oyq-feature-wrap { margin-top: 48px; }
  .oyq-tagline { font-size: 15px; padding: 16px; }


/* 表下のタグライン帯 */
.oyq-tagline {
  margin-top: 18px;
  background: var(--oyq-bg-sky);
  border-radius: var(--oyq-radius);
  padding: 16px 16px;
  text-align: center;
  color: var(--oyq-navy);
  font-weight: 800;
  font-size: 20px;
  display: block; align-items:center; justify-content:center; gap: 10px;
  text-align: left;
}

.oyq-tagline u {
margin: 0px;
padding: 0px;
box-sizing: border-box;
display: inline;
text-decoration: none;
border-bottom-style: solid;
border-bottom-color: #fdb73e;
border-bottom-width: 4px;
}

.oyq-tagline u em {
margin: 0px;
padding: 0px;
box-sizing: border-box;
display: inline;
font-style: normal;
color: #1565c0;
font-size: 24px;
}






  /* 表ラッパーの影・角丸は各カードへ移すため解除 */
  .oyq-table-scroll {
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  /* テーブル要素をすべてブロック化 */
  .oyq-table { display: block; width: 100%; table-layout: auto; }
  .oyq-table colgroup,
  .oyq-table thead { display: none; }
  .oyq-table tbody { display: block; }

  /* 1行（＝1属性）を1枚のカードに */
  .oyq-table tbody tr {
    display: block;
    background: var(--oyq-bg);
    border: 1px solid var(--oyq-line-color);
    border-radius: var(--oyq-radius);
    box-shadow: var(--oyq-shadow);
    overflow: hidden;
    margin-bottom: 18px;
  }
  .oyq-table tbody tr:last-child { margin-bottom: 0; }

  /* 属性名をカード見出しに */
  .oyq-table tbody th {
    display: block;
    width: auto;
    white-space: normal;
    padding: 13px 16px;
    font-size: 15px;
  }

  /* 各サービスの値を「ラベル：値」の横並びに */
  .oyq-table tbody td {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    text-align: right;
    padding: 13px 16px;
    border-bottom: 1px solid var(--oyq-line-color);
  }
  .oyq-table tbody tr td:last-child { border-bottom: 0; }
  .oyq-table tbody tr:nth-child(even) td { background: var(--oyq-bg); }

  /* ::before にサービス名を表示（左寄せ・色分け） */
  .oyq-table tbody td::before {
    content: attr(data-oyq-svc);
    flex: 0 0 auto;
    margin-right: auto;          /* 値を右側へまとめる */
    text-align: left;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .02em;
  }
  .oyq-table tbody td[data-oyq-svc="for LINE"]::before  { color: var(--oyq-line-green); }
  .oyq-table tbody td[data-oyq-svc="for Web"]::before   { color: var(--oyq-web-blue); }
  .oyq-table tbody td[data-oyq-svc="for Stand"]::before { color: var(--oyq-orange-deep); }

  /* 値ブロックを右寄せで縦積み */
  .oyq-val {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }
  .oyq-cell-main,
  .oyq-cell-note { text-align: right; }
  .oyq-badge { margin: 0 0 2px; }

  /* おすすめ設置場所セルはラベルを上に、写真風ブロックを全幅で */
  .oyq-table tbody td.oyq-td-place { display: block; }
  .oyq-table tbody td.oyq-td-place::before {
    display: block;
    margin: 0 0 8px;
    text-align: left;
  }
  .oyq-td-place .oyq-val { align-items: stretch; }
  .oyq-td-place .oyq-place { width: 100%; }
}

@media (max-width: 480px) {
  .oyq-heading {
padding: 0px 4% 5px 4%;
box-sizing: border-box;
font-size: 21px; }

.oyq-lead {
  padding: 0px 4% 0px 4%;
  box-sizing: border-box;
}

  .oyq-qr-frame { width: 160px; height: 160px; }

  /* フロー（極小画面） */
  .oyq-flow-step { max-width: 280px; gap: 10px; }
  .oyq-flow-start { width: 100%; min-width: 80px; min-height: 96px; }
  .oyq-flow-start .oyq-flow-qr-img { width: 44px; height: 44px; }
  .oyq-flow-phone-frame { width: 80px; min-width: 80px; border-radius: 8px; }
 .oyq-flow-phone-frame2 { width: 70%; min-width: 70%; border-radius: 8px; }


  .oyq-flow-cap { font-size: 14px; }

  .oyq-flow-cap2 { max-width: 70%; font-size: 14px; margin-top: 1em; }

  .oyq-flow-arrow { font-size: 17px; }


.oyq-flow-taxi {
font-size: 17px;
}

  
}