/* ==========================================================
   ppc-like-b.css (v3)
   Goal: Logo & CTAs = A (mahana.jp) / Layout & decoration = B
   Add AFTER your current CSS on /ppc.html
   ========================================================== */

/* -----------------------------
   0) Design tokens (B-like body)
   ----------------------------- */
:root{
  /* Typography & layout (B) */
  --text: #222;
  --muted: #5c6b7a;
  --navy: #123c66;
  --blue: #1b68b3;
  --bg: #fff;
  --bg-subtle: #f6f8fb;
  --border: #e0e6ef;
  --maxw: 880px;        /* B uses narrow readable column */
  --radius: 6px;
  --elev-1: 0 1px 0 rgba(10,30,60,.03);
  --elev-2: 0 6px 16px rgba(10,30,60,.06), 0 1px 0 rgba(10,30,60,.05);

  /* CTA & header (A) */
  --ctaA: #0f62fe;
  --ctaA-hover: #0b53d6;
  --ctaA-press: #0946b5;
  --ctaA-text: #fff;
  --ctaA-ring: rgba(15,98,254,.35);
  --ctaA-shadow: 0 6px 14px rgba(15,98,254,.18), 0 2px 4px rgba(0,0,0,.06);

  --logo-height: 44px;
  --header-padY: 10px;
  --header-gap: 18px;
}

/* -----------------------------
   1) Base reset-ish polish
   ----------------------------- */
html, body { margin: 0; padding: 0; }
*,
*::before,
*::after { box-sizing: border-box; }
img, picture, video { max-width: 100%; height: auto; display: block; }

/* -----------------------------
   2) Typography (B-like)
   ----------------------------- */
body{
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",
               "Hiragino Kaku Gothic ProN","Hiragino Sans",
               "Noto Sans JP","Yu Gothic",Meiryo,Arial,sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.78;
  font-size: 20px;
}
h1, h2, h3, h4{
  color: var(--navy);
  font-weight: 700;
  line-height: 1.35;
  margin: 1.2em 0 .6em;
}
h1{
  font-color: black;
  font-size: 2.2rem;
  padding-bottom: .5em;
  padding-top: 50px;
}
h2{ font-size: 1.8rem;
	margin-top: 50px;
	background: linear-gradient(transparent 70%, #ffa500 30%);
}
.pp-container h1{ font-size: 1.8rem;
	margin-top: 30px;
	background: none;
}
.pp-container h2{ font-size: 1.4rem;
	margin-top: 30px;
	border-bottom: solid 3px black;
	background: none;
}
h3{ font-size: 1.22rem; }
h4{ font-size: 1.32rem; color: var(--text); }
p{ margin: .9em 0; }
ul, ol{ margin: .6em 0 1.1em 1.4em; padding-left: 1em; }
li{ 
	margin: .35em 0; 
	font-size: 105%;
	font-weight: 500;
}
a{ color: var(--blue); text-decoration: none; }
a:hover, a:focus{ text-decoration: underline; }

body > header,
body > nav,
body > main,
body > footer,
.container, .wrapper, #main, #content, .contents, .inner, .row, .full, .wide{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 18px;
}

/* Optional: ensure sections read as discrete blocks */
section, article, .section, .card, .box, .panel{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 18px;
  margin: 18px 0;
  box-shadow: var(--elev-1);
}
.section > h2:first-child,
.card > h2:first-child { margin-top: 0; }

/* Hero/top banner as a soft card (B’s vibe) */
.hero, .page-visual, .page-header-img, .banner{
  display: block;
  max-width: var(--maxw);
  margin: 16px auto;
  padding: 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  box-shadow: var(--elev-2);
}

/* First feature list under H1 pops as a card (B) */
h1 + ul{
  list-style: disc;
  background: #E1EAF7;
  border: 1px solid var(--border);
  padding: 16px 20px 16px 34px;
  box-shadow: var(--elev-1);
  margin-top: 16px;
}
h1 + ul li{ margin: .5em 0; }

/* Subhead highlight strip (B-like) */
h4, .subhead, .lede, .highlight-line{
  background: var(--bg-subtle);
  border-left: 4px solid var(--blue);
  padding: .6em .8em;
  border-radius: 4px;
  margin-top: 1.4em;
}

/* Inline bottom links styled as simple internal nav (B) */
p:has(a[href*="Japanese SEO"], a[href*="Web Design"], a[href*="Translation"]) {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  margin-top: 22px;
}
p:has(a[href*="Japanese SEO"] ) a,
p:has(a[href*="Web Design"] ) a,
p:has(a[href*="Translation"]) a{
  font-weight: 600; color: var(--navy);
  text-decoration: none;
}
p:has(a[href*="Japanese SEO"] ) a::after,
p:has(a[href*="Web Design"] ) a::after{
  content: "・"; margin-left: 10px; color: var(--muted);
}
p:has(a[href*="Translation"]) a::after{ content: ""; }

/* Tables (classic tidy) */
table{ width:100%; border-collapse: collapse; margin: 14px 0; background:#fff; }
th, td{ border:1px solid var(--border); padding:10px 12px; text-align:left; }
th{ background:#f0f4fa; color:var(--navy); }

/* -----------------------------
   4) Header / Logo like A
   ----------------------------- */
 header {
            display: flex;
            padding: 0px 0;
	 		margin: 30px 0;
        }

        .logo {
            display: flex;
         
        }

        .logo img {
            height: 60px;
        }
    

        .header-button {
          	font-weight: bold;
			font-size: 120%;
			background-color: #007bff;
            color: white;
			width: 160px;
            padding: 5px 10px;
			text-align: center;
            text-decoration: none;
          	box-shadow: 0 0 30px rgba(0,0,0,0.1);
        }
/* -----------------------------
   5) CTA buttons like A
   ----------------------------- */
a[href*="inquiry"],
a[href*="contact"],
a[href*="Inquiry"],
a.button.primary,
button.primary,
.cta,
#inquiry,
#contact {
  --btn-bg: var(--ctaA);
  --btn-fg: var(--ctaA-text);

  display: inline-block;
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--btn-bg) 94%, #fff 6%),
      var(--btn-bg)
  );
  color: var(--btn-fg) !important;
  padding: .72em 1.15em;
  border-radius: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .2px;
  border: 1px solid color-mix(in srgb, var(--btn-bg) 82%, #000 18%);
  box-shadow: var(--ctaA-shadow);
  text-decoration: none !important;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
a[href*="inquiry"]:hover,
a[href*="contact"]:hover,
a.button.primary:hover,
button.primary:hover,
.cta:hover{
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--ctaA-hover) 96%, #fff 4%),
      var(--ctaA-hover)
  );
  border-color: color-mix(in srgb, var(--ctaA-hover) 82%, #000 18%);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(15,98,254,.22), 0 3px 6px rgba(0,0,0,.08);
}
a[href*="inquiry"]:active,
a[href*="contact"]:active,
a.button.primary:active,
button.primary:active,
.cta:active{
  background: var(--ctaA-press);
  border-color: color-mix(in srgb, var(--ctaA-press) 80%, #000 20%);
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(15,98,254,.18), 0 2px 4px rgba(0,0,0,.08);
}
a[href*="inquiry"]:focus-visible,
a[href*="contact"]:focus-visible,
a.button.primary:focus-visible,
button.primary:focus-visible,
.cta:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--ctaA-ring), var(--ctaA-shadow);
}

/* Secondary/outline variant if you show two CTAs side-by-side */
.button.outline,
a.button.outline,
button.outline{
  --btn-fg: var(--ctaA);
  background: transparent;
  color: var(--btn-fg) !important;
  border: 1.5px solid var(--ctaA);
  box-shadow: none;
}
.button.outline:hover,
a.button.outline:hover,
button.outline:hover{
  background: color-mix(in srgb, var(--ctaA) 10%, #fff 90%);
}

/* Ensure A-style CTAs override any previous orange rules */
a[href*="inquiry"],
a[href*="contact"],
.cta{
  background-color: var(--ctaA) !important;
  color: var(--ctaA-text) !important;
  border-color: color-mix(in srgb, var(--ctaA) 82%, #000 18%) !important;
}

/* -----------------------------
   6) Small decorative touches like B
   ----------------------------- */
/* Gentle dividers between logical blocks */
hr{
  border: 0;
  border-top: 1px solid var(--border);
  margin: 26px 0;
}

/* Numbered “reasons/steps” look tidy if you add class="numbered" */
ol.reasons, ol.steps{ counter-reset: item; }
ol.reasons li, ol.steps li{
  position: relative; padding-left: 1.6em;
}
ol.reasons li::before, ol.steps li::before{
  counter-increment: item;
  content: counter(item) ".";
  position: absolute; left: 0; top: 0;
  color: var(--navy); font-weight: 700;
}

/* Standalone images centered nicely */
p > img:only-child, figure img{
  margin-left: auto; margin-right: auto;
}

/* Footer (muted, tidy) */
footer, .site-footer, #footer{
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .92rem;
  padding: 18px 0 24px;
  margin: 50px;
}
header,
.site-header,
#header,
.global-header {
  display: flex;
align-items: center;
  justify-content: space-between;
}

}

header .nav {
  margin-left: auto; /* pushes nav items and CTA to the right */
  display: flex;

  gap: 16px; /* adjust spacing between nav links and button */
}

/* Ensure the CTA button specifically sits at the right end */
header .nav .cta,
header .nav a[href*="inquiry"],
header .nav a[href*="contact"] {
  margin-left: auto;
}

/* -----------------------------
   7) Responsive polish
   ----------------------------- */
@media (max-width: 900px){
  :root{ --maxw: 760px; }
  h1{ font-size: 1.7rem; }
  h2{ font-size: 1.3rem; }
}
@media (max-width: 720px){
  :root{ --logo-height: 38px; }
  .site-header .nav a, header nav a{ font-size: 15px; }
}
@media (max-width: 600px){
  :root{ --maxw: 94vw; }
  body{ font-size: 15.5px; }
  h1{ font-size: 1.5rem; }
  .hero, .page-visual, .page-header-img, .banner{ padding: 10px; }
}
@media (max-width: 768px) {
  header,
  .site-header,
  #header,
  .global-header {
    flex-direction: column;
    align-items: center;   /* center logo horizontally */
  }

  header .nav {
    margin-left: 0;
    width: 100%;
    margin-top: 10px;       /* spacing under logo */
    display: flex;
    justify-content: center; /* center CTA button */
  }

  header .nav .cta,
  header .nav a[href*="inquiry"],
  header .nav a[href*="contact"] {
    margin-left: 0; /* reset auto margin */
  }
}
/* -----------------------------
   8) Utilities
   ----------------------------- */
.border { border: 1px solid var(--border); border-radius: var(--radius); }
.bg-subtle { background: var(--bg-subtle); }
.shadow-none { box-shadow: none !important; }