/*
Theme Name: Shopping Douko Custom CSS
Description: 整形済みCSS / TOP画像・余白・最終CTA配置調整込み
*/

:root {
  --bg:#fbf7f2;
  --lpbg:#f7f5f0;
  --text:#222;
  --orange:#f08a24;
  --gold:#d8b987;
  --navy:#163d6b;
  --line:#e5e0d6;
}


* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Hiragino Mincho ProN','Yu Mincho','YuMincho','Noto Serif JP',serif;
  line-height:1.9;
  letter-spacing:.04em
}

img {
  max-width:100%;
  height:auto
}

a {
  color:inherit
}

.sdt-main {
  background:var(--bg)
}


.sdt-header {
  background:#fffaf7;
  border-bottom:1px solid #eadfd2;
  position:sticky;
  top:0;
  z-index:1000
}

.sdt-header-inner {
  max-width:1000px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:12px 14px
}

.sdt-logo img {
  display:block;
  max-width:430px;
  width:70vw;
  height:auto
}

.sdt-drawer-toggle {
  display:none;
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border:0;
  background:transparent;
  padding:8px;
  cursor:pointer
}

.sdt-drawer-toggle span {
  display:block;
  height:3px;
  background:#111;
  margin:6px 0;
  border-radius:4px
}

.sdt-pc-nav {
  border-top:1px solid #eadfd2;
  background:#fff
}

.sdt-menu {
  max-width:1000px;
  margin:0 auto;
  padding:0;
  list-style:none;
  display:flex;
  justify-content:center;
  gap:0
}

.sdt-menu li {
  border-left:1px solid #eee
}

.sdt-menu li:last-child {
  border-right:1px solid #eee
}

.sdt-menu a {
  display:block;
  padding:12px 18px;
  text-decoration:none;
  font-size:13px
}

.sdt-menu a:hover {
  color:var(--orange)
}


.sdt-drawer-overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:1998;
  opacity:0;
  visibility:hidden;
  transition:.25s
}

.sdt-drawer {
  position:fixed;
  top:0;
  right:0;
  width:min(78vw,360px);
  height:100vh;
  background:#fbf7f2;
  z-index:1999;
  transform:translateX(100%);
  transition:.25s;
  box-shadow:-10px 0 30px rgba(0,0,0,.18);
  overflow:auto
}

.drawer-open .sdt-drawer {
  transform:translateX(0)
}

.drawer-open .sdt-drawer-overlay {
  opacity:1;
  visibility:visible
}

.sdt-drawer-close {
  position:absolute;
  right:12px;
  top:8px;
  background:transparent;
  border:0;
  font-size:34px;
  line-height:1;
  cursor:pointer;
  color:#111
}

.sdt-drawer-menu,.sdt-drawer .sdt-menu {
  list-style:none;
  margin:58px 0 0;
  padding:0;
  display:block
}

.sdt-drawer-menu li,.sdt-drawer .sdt-menu li {
  border-bottom:1px solid #222
}

.sdt-drawer-menu a,.sdt-drawer .sdt-menu a {
  display:block;
  padding:20px 32px;
  text-decoration:none;
  font-size:17px;
  background:#fbf7f2
}

.sdt-drawer-menu a:hover,.sdt-drawer .sdt-menu a:hover {
  background:var(--orange);
  color:#000
}


.sdt-footer {
  background:#f4d7ae;
  text-align:center;
  padding:55px 16px 20px
}

.sdt-footer-logo img {
  width:120px
}

.sdt-footer-menu {
  display:flex;
  gap:20px;
  justify-content:center;
  list-style:none;
  padding:18px 0;
  margin:0;
  flex-wrap:wrap
}

.sdt-footer-menu a {
  text-decoration:none;
  color:#fff;
  font-size:13px
}

.sdt-copy {
  font-size:11px;
  margin:20px 0 0;
  color:#333
}


.lp4-wrap {
  background:#f7f5f0;
  color:#222;
  font-family:'Hiragino Mincho ProN','Yu Mincho','YuMincho','Noto Serif JP',serif;
  font-size:14px;
  line-height:1.9;
  letter-spacing:.04em
}

.lp4-inner {
  max-width:960px;
  margin:0 auto;
  padding:0 14px 50px
}

.lp4-section {
  padding:38px 0;
  scroll-margin-top:120px
}

.lp4-headline-wrap,.lp4-note,.lp4-intro,.lp4-cta-wrap,.lp4-price-card,.lp4-last {
  text-align:center
}

.lp4-headline-wrap {
  margin-bottom:24px
}

.lp4-heading-img {
  margin:0 0 22px
}

.lp4-heading-img img,.lp4-fv-head img,.lp4-flow2-image img,.lp4-plan-image-item img {
  display:block;
  width:100%;
  height:auto
}

.lp4-fv {
  text-align:center;
  padding-top:50px
}

.lp4-fv-head {
  margin-bottom:24px
}

.lp4-fv-box,.lp4-text-card,.lp4-price-card,.lp4-check-box,.lp4-compare-card,.lp4-voice-scroll-item,.lp4-flow2-item,.lp4-faq-list {
  background:#fff;
  border:1px solid #e5e0d6;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.04)
}

.lp4-fv-box,.lp4-text-card,.lp4-price-card {
  padding:26px 24px
}

.lp4-fv-box {
  text-align:left;
  white-space:pre-line
}

.lp4-text-card {
  white-space:pre-line
}

.lp4-cta-wrap {
  margin-top:24px
}

.lp4-btn {
  display:inline-block;
  min-width:260px;
  padding:16px 24px;
  background:#f08a24;
  color:#fff!important;
  border-radius:999px;
  text-decoration:none!important;
  font-weight:700;
  margin:6px
}

.lp4-voice-scroll {
  overflow-x:auto;
  padding-bottom:8px
}

.lp4-voice-scroll-track {
  display:flex;
  gap:16px
}

.lp4-voice-scroll-item {
  flex:0 0 85%;
  padding:14px;
  border-radius:20px
}

.lp4-voice-thumb-link img {
  display:block;
  width:100%;
  height:auto;
  border-radius:12px
}

.lp4-voice-caption {
  text-align:center;
  margin-top:12px;
  font-size:13px
}

.lp4-flow2 {
  display:grid;
  gap:24px
}

.lp4-flow2-item {
  padding:20px 18px 22px;
  border-radius:18px
}

.lp4-flow2-step {
  display:inline-block;
  margin-bottom:14px;
  padding:8px 14px;
  background:#d59b96;
  color:#fff;
  border-radius:999px;
  font-size:13px
}

.lp4-flow2-image {
  margin-bottom:16px
}

.lp4-flow2-title {
  margin:0 0 10px;
  font-size:20px;
  color:#163d6b;
  font-weight:700
}

.lp4-plan-images {
  display:grid;
  gap:18px;
  margin-top:6px
}

.lp4-faq-list {
  margin-top:8px;
  padding:4px 20px
}

.lp4-faq-item {
  border-bottom:1px solid #e2ddd4
}

.lp4-faq-item:last-child {
  border-bottom:none
}

.lp4-faq-item summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 46px 18px 0;
  position:relative
}

.lp4-faq-item summary::-webkit-details-marker {
  display:none
}

.lp4-faq-qicon {
  flex:0 0 48px;
  width:48px;
  height:48px;
  border-radius:50%;
  background:linear-gradient(135deg,#d8b36a 0%,#b8892f 45%,#f1ddb0 100%);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  font-weight:700;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.35),0 2px 6px rgba(0,0,0,.08)
}

.lp4-faq-question {
  flex:1;
  font-size:14px;
  line-height:1.6;
  color:#163d6b;
  font-weight:700
}

.lp4-faq-answer {
  padding:0 0 18px 62px;
  font-size:14px;
  line-height:1.9
}

.lp4-last-wrap {
  position:relative
}

.lp4-last-wrap .lp4-text-card {
  padding:26px 24px!important;
  min-height:430px;
  text-align:left!important
}

.lp4-profile-sign {
  position:absolute;
  left:-120px;
  bottom:65px;
  width:150px;
  z-index:4
}

.lp4-profile-sign img {
  display:block;
  width:100%;
  height:auto
}

.lp4-profile-image {
  position:absolute!important;
  right:0!important;
  bottom:0!important;
  width:200px;
  z-index:3;
  pointer-events:none;
  background:none!important;
  border:none!important;
  box-shadow:none!important;
  padding:0!important
}

.lp4-profile-image img {
  display:block;
  width:100%;
  height:auto;
  border-radius:0!important;
  box-shadow:none!important;
  background:none!important;
  border:none!important
}

.lp4-inline-image {
  margin:24px auto;
  text-align:center
}

.lp4-inline-image img {
  display:block;
  width:100%;
  max-width:360px;
  height:auto;
  margin:0 auto
}

.lp4-list-card {
  margin:0;
  padding-left:1.2em
}

.lp4-slot-box {
  margin:30px auto;
  padding:26px 20px 24px;
  max-width:620px;
  background:linear-gradient(135deg,#fffaf3,#f6efe5);
  border:1px solid #d8b987;
  border-radius:28px;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  text-align:center
}

.lp4-slot-label {
  display:inline-block;
  padding:10px 34px;
  margin-bottom:22px;
  border:1px solid #c8a46b;
  border-radius:999px;
  color:#8a6a34;
  font-weight:700;
  font-size:18px;
  background:rgba(255,255,255,.7)
}

.lp4-slot-main {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  color:#222;
  font-weight:700
}

.lp4-slot-text {
  font-size:22px
}

.lp4-slot-number {
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:76px;
  height:76px;
  border-radius:22px;
  background:#fff;
  border:1px solid #d8b987;
  color:#f08a24;
  font-size:52px;
  line-height:1;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.06);
  text-shadow:0 0 4px rgba(240,138,36,.25),0 0 12px rgba(240,138,36,.15)
}

.lp4-slot-number::after {
  content:"";
  position:absolute;
  top:-40%;
  left:-120%;
  width:40%;
  height:180%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  transform:rotate(25deg);
  animation:slotShine 2s infinite
}


@keyframes slotShine {
  0% {
    left:-120%;
    opacity:0
  }

5% {
    opacity:1
  }

20% {
    left:140%;
    opacity:1
  }

21% {
    opacity:0
  }

100% {
    left:140%;
    opacity:0
  }

}

.lp4-slot-line {
  width:70%;
  height:4px;
  margin:22px auto 14px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#d8b987,transparent)
}

.lp4-slot-note {
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:#555;
  font-weight:700
}


.sdt-page,.sdt-archive,.sdt-single {
  max-width:1000px;
  margin:0 auto;
  padding:42px 14px
}

.sdt-card {
  background:#fff;
  border:1px solid #e5e0d6;
  border-radius:18px;
  box-shadow:0 8px 24px rgba(0,0,0,.04);
  padding:28px
}

.sdt-entry-title {
  font-size:26px;
  line-height:1.5;
  margin:0 0 18px;
  color:#222
}

.sdt-meta {
  font-size:12px;
  color:#777;
  margin-bottom:18px
}

.sdt-featured {
  margin:0 0 24px
}

.sdt-featured img {
  border-radius:12px;
  width:100%;
  display:block
}

.sdt-content {
  font-size:15px;
  line-height:2
}

.sdt-content h2,.sdt-content h3 {
  background:#f7fbff;
  border-left:4px solid var(--orange);
  border-radius:10px;
  padding:14px 16px;
  color:#163d6b
}

.sdt-post-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}

.sdt-post-card {
  background:#fff;
  border:1px solid #e5e0d6;
  border-radius:16px;
  overflow:hidden;
  text-decoration:none;
  box-shadow:0 8px 20px rgba(0,0,0,.04)
}

.sdt-post-card img {
  width:100%;
  height:150px;
  object-fit:cover
}

.sdt-post-card-body {
  padding:14px
}

.sdt-post-card-title {
  font-size:14px;
  font-weight:700;
  line-height:1.6;
  margin:0
}

.sdt-post-cta {
  margin-top:36px;
  padding:24px;
  background:#102b5c;
  border-radius:12px;
  text-align:center
}

.sdt-post-cta .lp4-btn {
  background:#fff;
  color:#102b5c!important
}

.profile-hero {
  background:linear-gradient(90deg,#fff 0%,#fff7ef 100%);
  padding:60px 16px
}

.profile-hero-inner {
  max-width:1000px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:30px
}

.profile-kicker {
  color:#f08a24;
  font-family:serif
}

.profile-title {
  font-size:36px;
  line-height:1.7;
  margin:0 0 16px
}

.profile-image img {
  border-radius:24px
}

.profile-section {
  max-width:1000px;
  margin:0 auto;
  padding:42px 14px
}

.profile-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px
}

.profile-qual {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px
}

.profile-qual-item {
  background:#fff;
  border:1px solid #e5e0d6;
  border-radius:16px;
  padding:20px;
  text-align:center
}

.profile-message {
  display:grid;
  grid-template-columns:220px 1fr;
  gap:24px;
  align-items:center
}

.profile-sign {
  text-align:right;
  font-size:28px;
  color:#8a6a34
}


@media (min-width:801px) {
  .lp4-voice-scroll-item {
    flex:0 0 42%
  }

.lp4-plan-images {
    grid-template-columns:1fr 1fr;
    gap:20px
  }

}


@media (max-width:800px) {
  .sdt-header-inner {
    justify-content:flex-start
  }

.sdt-logo img {
    max-width:260px;
    width:72vw
  }

.sdt-drawer-toggle {
    display:block
  }

.sdt-pc-nav {
    display:none
  }

.lp4-inner {
    padding:0 10px 42px
  }

.lp4-section {
    padding:28px 0;
    scroll-margin-top:86px
  }

.lp4-fv {
    padding-top:34px
  }

.lp4-fv-box,.lp4-text-card,.lp4-price-card,.lp4-check-box {
    padding:20px 16px
  }

.lp4-btn {
    display:block;
    width:100%;
    min-width:0;
    margin:8px 0
  }

.lp4-faq-list {
    padding:2px 14px
  }

.lp4-faq-qicon {
    width:42px;
    height:42px;
    font-size:24px;
    flex:0 0 42px
  }

.lp4-faq-answer {
    padding:0 0 16px 54px
  }

.lp4-last-wrap .lp4-text-card {
    padding:20px 18px!important;
    min-height:500px
  }

.lp4-profile-sign {
    width:180px;
    left:10px;
    bottom:50px
  }

.lp4-profile-image {
    width:160px;
    right:0!important;
    bottom:0!important
  }

.lp4-slot-box {
    margin:24px auto;
    padding:22px 14px 20px;
    border-radius:22px
  }

.lp4-slot-label {
    font-size:16px;
    padding:8px 24px
  }

.lp4-slot-text {
    font-size:18px
  }

.lp4-slot-number {
    width:64px;
    height:64px;
    font-size:44px;
    border-radius:18px
  }

.sdt-post-grid {
    grid-template-columns:1fr 1fr
  }

.profile-hero-inner,.profile-grid,.profile-message {
    grid-template-columns:1fr
  }

.profile-qual {
    grid-template-columns:1fr 1fr
  }

.profile-title {
    font-size:27px
  }

.sdt-card {
    padding:20px
  }

.sdt-entry-title {
    font-size:22px
  }

}




/* =========================================================
   追加調整（TOPメイン画像）
   ・front-page.php の <?php get_header(); ?> の直下に
     <section class="sd-top-mainvisual">...</section> を追加して使用します。
========================================================= */

.sd-top-mainvisual {
  max-width: 960px;
  margin: 0 auto 28px;
  padding: 0 20px;
}

.sd-top-mainvisual img {
  display: block;
  width: 100%;
  height: auto;
}


/* =========================================================
   追加調整（PC幅・余白調整）
========================================================= */

.lp4-inner {
  padding-left: 20px;
  padding-right: 20px;
}


/* =========================================================
   追加調整（最終CTA プロフィール画像・サイン位置）
========================================================= */

.lp4-last-wrap {
  position: relative;
}

.lp4-last-wrap .lp4-text-card {
  min-height: 460px !important;
}

.lp4-profile-sign {
  position: absolute !important;
  left: 20px !important;
  bottom: 95px !important;
  width: 180px !important;
  z-index: 4 !important;
}

.lp4-profile-sign img {
  display: block;
  width: 100%;
  height: auto;
}

.lp4-profile-image {
  position: absolute !important;
  right: 20px !important;
  bottom: 0 !important;
  width: 210px !important;
  z-index: 3 !important;
}

.lp4-profile-image img {
  display: block;
  width: 100%;
  height: auto;
}


/* =========================================================
   追加調整（スマホ表示）
========================================================= */

@media screen and (max-width: 800px) {

  .sd-top-mainvisual {
    padding-left: 18px;
    padding-right: 18px;
    margin-bottom: 24px;
  }

  .lp4-inner {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .lp4-last-wrap .lp4-text-card {
    min-height: 520px !important;
  }

  .lp4-profile-sign {
    left: 18px !important;
    bottom: 75px !important;
    width: 160px !important;
  }

  .lp4-profile-image {
    right: 0 !important;
    bottom: 0 !important;
    width: 160px !important;
  }

}