<!-- start Simple Custom CSS and JS -->
<style type="text/css">
/* =========================
   Print Maker LP (lineocean)
   Structure: keep as-is
   ========================= */

/* ---- Base ---- */
:root{
  --bg0:#f6f9ff;
  --bg1:#eef4ff;
  --bg2:#f6fbff;

  --ink:#0b1220;
  --muted:#4b5565;

  --card:rgba(255,255,255,.72);
  --card-strong:rgba(255,255,255,.86);
  --stroke:rgba(15, 23, 42, .10);

  --shadow: 0 18px 50px rgba(15,23,42,.10);
  --shadow2: 0 10px 24px rgba(15,23,42,.08);

  --r:24px;
  --r2:18px;

  --accent:#2f6bff;
  --accent2:#5aa8ff;
}

/* WP側の背景/余白に勝つ */
html, body{
  background: transparent !important;
}
body{
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Page background ---- */
.lp-wrap{
  min-height: 100vh;
  padding: 28px 16px 56px;
  background:
    radial-gradient(1000px 520px at 18% 10%, rgba(90,168,255,.26), transparent 60%),
    radial-gradient(900px 520px at 82% 14%, rgba(47,107,255,.16), transparent 62%),
    radial-gradient(900px 700px at 50% 92%, rgba(120,210,255,.16), transparent 65%),
    linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 38%, var(--bg2) 100%);
}

/* lp本体は“白い箱”にしない（浮きの原因） */
.lp{
  max-width: 1220px;
  margin: 0 auto;
  background: transparent !important;
}

/* ---- Topbar ---- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(15,23,42,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(15,23,42,.08);
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: .2px;
}

.brand-mark{
  width: 36px;
  height: 36px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(47,107,255,.14), rgba(90,168,255,.10));
  border: 1px solid rgba(47,107,255,.18);
  color: #14306a;
  font-weight: 800;
}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.78);
  color: var(--ink);
  font-weight: 700;
  text-decoration:none;
  box-shadow: 0 8px 18px rgba(15,23,42,.06);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(15,23,42,.10);
  background: rgba(255,255,255,.88);
  border-color: rgba(15,23,42,.14);
}
.btn.primary{
  border-color: rgba(47,107,255,.22);
  background: linear-gradient(180deg, rgba(47,107,255,.16), rgba(90,168,255,.10));
}
.btn.mini{
  padding: 8px 12px;
  border-radius: 12px;
  font-weight: 700;
}
.btn.disabled{
  opacity: .55;
  pointer-events: none;
  box-shadow: none;
}

/* ---- Hero ---- */
.hero{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
}
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
}

/* “白い四角が浮く”の解決：半透明＋ぼかし＋境界 */
.panel{
  border-radius: var(--r);
  background: var(--card);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 28px;
}

/* 見出し/リードの空気感 */
.h1{
  margin: 0 0 12px;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.8px;
}
.lead{
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.8;
}

/* ---- Chips ---- */
.chips{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 18px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.10);
  color: #1f2a3a;
  box-shadow: 0 8px 18px rgba(15,23,42,.06);
  font-weight: 700;
  font-size: 13px;
}
.chip svg{ opacity:.85; }

/* ---- CTA ---- */
.hero-cta{
  display:flex;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* ---- Screenshot area ---- */
.ss-grid{
  display:grid;
  gap: 14px;
}
.ss-grid--2fixed{
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 560px){
  .ss-grid--2fixed{ grid-template-columns: 1fr; }
}

/* phoneカードを“AppStore風”に */
.phone{
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.62));
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--shadow2);
  padding: 12px;
}
.phone-inner{
  border-radius: 16px;
  overflow:hidden;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(15,23,42,.08);
}

/* 画像は切らない（縦長スクショ対応） */
.phone-inner img,
.icon img,
.pair img{
  width: 100%;
  height: auto;
  display:block;
  object-fit: contain;
}

/* ---- Sections ---- */
.section{
  margin-top: 26px;
  padding: 22px 0 0;
}

/* アプリ一覧の “詰まり感” を解消 */
.section h2{
  margin: 8px 0 10px;
  font-size: 26px;
  letter-spacing: -0.2px;
}
.section > p{
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.7;
}

/* セクション全体を薄いカードにして背景と馴染ませる（白ベタ回避） */
#apps, #faq{
  padding: 22px;
  border-radius: var(--r);
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 16px 40px rgba(15,23,42,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ---- Grid / Cards ---- */
.grid{
  display:grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1060px){
  .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .grid{ grid-template-columns: 1fr; }
}

.card{
  border-radius: var(--r2);
  background: var(--card-strong);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--shadow2);
  padding: 18px;
}
.card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.title .t{
  font-weight: 800;
  letter-spacing: -0.2px;
  margin-bottom: 4px;
  line-height: 1.25;
}
.title .s{
  color: var(--muted);
  font-weight: 650;
  font-size: 13px;
}

.desc{
  margin: 10px 0 14px;
  color: var(--muted);
  line-height: 1.7;
  font-size: 14px;
}

/* アプリカード内の2枚並び */
.pair{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 10px 0 14px;
}
@media (max-width: 520px){
  .pair{ grid-template-columns: 1fr; }
}

/* AppStore badge */
.actions{
  margin-top: 6px;
}
.actions img{
  height: 44px;
  width: auto;
  display:block;
}

/* ---- Footer ---- */
.foot{
  margin-top: 26px;
  text-align:center;
  color: rgba(75,85,101,.85);
  font-size: 12.5px;
  padding: 18px 0 0;
}

/* ---- Small tidy-ups ---- */
br{ line-height: 0; }

/* =========================
   Mobile First View Boost
   (structure unchanged)
   ========================= */

/* iOS Safariでの見え方安定 */
.lp-wrap{
  min-height: 100svh;
}

/* Hero: スマホだけ“画像→文章”に並べ替え */
@media (max-width: 980px){
  .hero{
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* 右パネル（スクショ）を先頭へ */
  .hero > .panel:last-child{
    order: -1;
  }

  /* 左パネル（コピー）は後ろ */
  .hero > .panel:first-child{
    order: 0;
  }
}

/* スマホ時：スクショは横スワイプの1段にして“暗さ”を消す */
@media (max-width: 980px){
  /* スクショパネル自体の圧を減らす */
  .hero > .panel{
    padding: 18px;
  }

  /* 2枚固定グリッド → 横スクロールへ */
  .ss-grid--2fixed{
    display: flex !important;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .ss-grid--2fixed .phone{
    flex: 0 0 78%;
    scroll-snap-align: start;
  }

  /* ちょい見切れを作って“続きがある感” */
  .ss-grid--2fixed:after{
    content:"";
    flex: 0 0 10%;
  }

  /* 画像パネルを軽く“絵”っぽく見せる */
  .phone{
    box-shadow: 0 14px 34px rgba(15,23,42,.12);
  }
}

/* スマホ時：コピーをファーストビューに収める（暗さ対策） */
@media (max-width: 560px){
  .h1{
    font-size: clamp(30px, 8.2vw, 40px);
    line-height: 1.10;
    margin-bottom: 10px;
    letter-spacing: -0.6px;
  }

  .lead{
    font-size: 14.5px;
    line-height: 1.75;
    margin-bottom: 12px;
  }

  .chips{
    gap: 8px;
    margin: 12px 0 12px;
  }
  .chip{
    padding: 9px 11px;
    font-size: 12.5px;
  }

  .hero-cta{
    gap: 10px;
    margin-top: 8px;
  }
  .btn{
    padding: 10px 12px;
  }
}

/* （任意）スマホだけコピー側に“薄い絵”を足して暗さを軽減 */
@media (max-width: 560px){
  .hero > .panel:first-child{
    position: relative;
    overflow: hidden;
  }
  .hero > .panel:first-child:before{
    content:"";
    position:absolute;
    inset: -20px -40px auto auto;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle at 30% 30%,
      rgba(90,168,255,.25),
      rgba(150,120,255,.14) 45%,
      transparent 70%);
    filter: blur(2px);
    pointer-events:none;
  }
}</style>
<!-- end Simple Custom CSS and JS -->
