/*
Theme Name: おくってPC Cocoon Child
Template: cocoon-master
Version: 2.0.0
*/
:root{
  --opc-blue:#086fba;
  --opc-dark:#0d2945;
  --opc-orange:#f45116;
  --opc-green:#159447;
  --opc-yellow:#fff04b;
  --opc-pale:#eaf7fc;
  --opc-border:#d8e0e7;
}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--opc-dark);font-family:-apple-system,BlinkMacSystemFont,"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;line-height:1.65}
a{color:inherit;text-decoration:none}
.opc-site{width:100%;max-width:1180px;margin:0 auto;background:#fff}
.opc-header{display:flex;align-items:center;justify-content:space-between;padding:14px 24px 12px;border-bottom:1px solid #e4e8eb;background:#fff}
.opc-brand{display:flex;align-items:center;gap:10px}
.opc-brand img{width:54px;height:54px;object-fit:contain;border-radius:6px}
.opc-brand-name{font-size:30px;font-weight:900;line-height:1;color:#0870b8;letter-spacing:-1px}
.opc-brand-name span{color:#172d43}
.opc-brand-sub{font-size:10px;font-weight:700;margin-top:5px;color:#374957}
.opc-header-right{display:flex;align-items:center;gap:22px}
.opc-header-links{font-size:13px;font-weight:700;align-self:flex-start;margin-top:2px}
.opc-tel{font-size:24px;font-weight:900;color:#075fa7;line-height:1.15}
.opc-tel small{display:block;font-size:11px;color:#333;text-align:center;font-weight:600;margin-top:3px}
.opc-mail{background:var(--opc-orange);color:#fff;padding:13px 20px;border-radius:5px;font-weight:900;white-space:nowrap}
.opc-nav{display:flex;background:var(--opc-blue);color:#fff}
.opc-nav a{flex:1;text-align:center;padding:12px 5px;font-weight:800;font-size:14px;border-right:1px solid rgba(255,255,255,.28)}
.opc-nav a:last-child{border-right:0}

.opc-hero{position:relative;min-height:380px;overflow:hidden;background:#f5ead7;border-top:3px solid #e7c58d;border-bottom:3px dotted #e7c58d}
.opc-hero-bg{position:absolute;inset:0;background:
 linear-gradient(90deg,rgba(255,249,237,.98) 0%,rgba(255,249,237,.96) 47%,rgba(255,249,237,.30) 63%,rgba(255,249,237,0) 100%),
 url("assets/hero.jpg") right center/55% 100% no-repeat;
}
.opc-hero-inner{position:relative;z-index:2;padding:28px 42px 30px;width:55%;box-sizing:border-box}
.opc-kicker{display:inline-block;background:var(--opc-yellow);font-weight:900;padding:3px 12px;font-size:16px}
.opc-hero h1{font-size:44px;line-height:1.12;letter-spacing:-2px;margin:11px 0 9px;font-weight:900;text-shadow:0 1px 0 #fff}
.opc-hero h1 strong{color:#075fa8}
.opc-hero-lead{font-size:18px;font-weight:800;margin:0 0 14px}
.opc-benefits{display:flex;gap:16px;margin-top:8px}
.opc-circle{width:108px;height:108px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-weight:900;text-align:center}
.opc-circle b{font-size:28px;line-height:1.1}
.opc-circle small{font-size:13px;margin-top:5px}
.opc-red{background:var(--opc-orange)}
.opc-blue{background:#087fc4}
.opc-green{background:var(--opc-green)}
.opc-hero-note{font-weight:800;font-size:14px;margin-top:14px;max-width:590px}
.opc-check{position:absolute;right:25px;top:25px;width:215px;padding:13px 15px;background:rgba(255,253,245,.96);border:1px solid #d8cdb4;box-shadow:0 2px 8px rgba(0,0,0,.08);font-weight:800;z-index:3}
.opc-check div{margin:4px 0}
.opc-check div:before{content:"✓";color:#ef4d24;font-weight:900;margin-right:8px}

.opc-services{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;padding:15px 18px;background:#fff}
.opc-card{border:1px solid var(--opc-border);border-radius:4px;overflow:hidden;box-shadow:0 1px 5px rgba(0,0,0,.10);background:#fff}
.opc-card img{display:block;width:100%;height:145px;object-fit:cover}
.opc-card-body{position:relative;padding:8px 14px 12px;min-height:82px}
.opc-card h2{font-size:20px;color:#075ca4;margin:0 25px 2px 0;line-height:1.3}
.opc-card p{font-size:13px;line-height:1.5;margin:0;color:#333}
.opc-arrow{position:absolute;right:12px;top:31px;color:#075ca4;font-size:28px;font-weight:900}

.opc-flow{background:var(--opc-pale);padding:20px 18px}
.opc-section-title{text-align:center;color:#075ca4;font-size:27px;margin:0 0 14px;font-weight:900}
.opc-flow-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.opc-step{position:relative;background:#fff;border-radius:6px;min-height:150px;padding:10px 10px 12px;text-align:center}
.opc-num{display:inline-flex;width:34px;height:34px;border-radius:50%;background:#0875bd;color:#fff;align-items:center;justify-content:center;font-weight:900;font-size:18px}

.opc-step h3{font-size:16px;color:#17364f;margin:5px 0}
.opc-step-icon{font-size:0;line-height:1;margin:10px auto;width:54px;height:54px;border-radius:50%;background:#eef6fa;position:relative}
.opc-step p{font-size:12px;margin:0;color:#333}
.opc-step:not(:last-child):after{content:"›";position:absolute;right:-17px;top:53px;font-size:32px;color:#6d9fc0;z-index:2}

.opc-results{padding:22px 24px 25px}
.opc-results-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.opc-results-head h2{font-size:27px;margin:0;color:#0a365b}
.opc-badge{background:var(--opc-orange);color:#fff;border-radius:18px;padding:4px 12px;font-size:12px;font-weight:900}
.opc-more{margin-left:auto;background:#0876bd;color:#fff;border-radius:18px;padding:7px 18px;font-weight:800;font-size:13px}
.opc-cases{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.opc-case{border:1px solid var(--opc-border);border-radius:4px;overflow:hidden;background:#fff}
.opc-case img{display:block;width:100%;height:145px;object-fit:cover}
.opc-case-body{padding:8px 10px 10px}
.opc-case b{display:block;color:#0a4f8d;font-size:14px;line-height:1.4}
.opc-case small{display:block;margin-top:4px;font-size:11px;color:#555}

.opc-final{background:#fff6ef;text-align:center;padding:24px 18px 30px;border-top:1px solid #f3ddd0}
.opc-final h2{margin:0 0 5px;color:#0b5e9e;font-size:26px}
.opc-final p{margin:0 0 13px}
.opc-final .opc-mail{display:inline-block}

.opc-footer{border-top:1px solid #ddd;padding:16px 22px;font-size:12px;color:#666;text-align:center}
.opc-footer-nav{margin-bottom:7px}

@media(max-width:900px){
 .opc-header{padding:10px 14px}
 .opc-brand-name{font-size:27px}
 .opc-brand img{width:46px;height:46px}
 .opc-header-links{display:none}
 .opc-header-right{gap:8px}
 .opc-tel{font-size:16px}
 .opc-tel small{font-size:9px}
 .opc-mail{padding:9px 11px;font-size:12px}
 .opc-nav a{font-size:12px;padding:10px 3px}
 .opc-hero{min-height:475px}
 .opc-hero-bg{background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.94) 48%,rgba(255,255,255,.15) 70%,rgba(255,255,255,0) 100%),url("assets/hero.jpg") center bottom/100% 56% no-repeat}
 .opc-hero-inner{padding:22px 18px;width:100%}
 .opc-hero h1{font-size:36px}
 .opc-kicker{font-size:13px}
 .opc-benefits{gap:8px}
 .opc-circle{width:88px;height:88px}
 .opc-circle b{font-size:22px}
 .opc-circle small{font-size:10px}
 .opc-check{right:12px;top:auto;bottom:13px;width:calc(100% - 24px);font-size:12px;padding:7px 10px}
 .opc-services{grid-template-columns:1fr 1fr;padding:10px}
 .opc-card img{height:95px}
 .opc-flow-grid{grid-template-columns:1fr}
 .opc-step{min-height:54px;text-align:left;padding:7px 12px 7px 52px}
 .opc-step .opc-num{position:absolute;left:10px;top:10px}
 .opc-step-icon{display:none}
 .opc-step p{font-size:11px}
 .opc-step:not(:last-child):after{content:"↓";right:14px;top:auto;bottom:-25px;font-size:23px}
 .opc-results{padding:18px 10px}
 .opc-results-head{flex-wrap:wrap}
 .opc-results-head h2{font-size:23px}
 .opc-more{margin-left:0}
 .opc-cases{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
 .opc-brand-sub{font-size:9px}
 .opc-header-right{flex-direction:column;align-items:flex-end}
 .opc-tel{display:none}
 .opc-nav{display:none}
 .opc-hero{min-height:525px}
 .opc-hero h1{font-size:31px;letter-spacing:-1px}
 .opc-hero-lead{font-size:15px}
 .opc-circle{width:78px;height:78px}
 .opc-circle b{font-size:19px}
 .opc-circle small{font-size:9px}
 .opc-services{grid-template-columns:1fr}
 .opc-card{display:grid;grid-template-columns:105px 1fr}
 .opc-card img{height:100%;min-height:82px}
 .opc-card-body{min-height:82px}
 .opc-card h2{font-size:17px}
 .opc-card p{font-size:11px}
 .opc-section-title{font-size:23px}
 .opc-cases{grid-template-columns:1fr}
 .opc-case img{height:145px}
}

/* v9: restore the five flow icons and increase the eight image areas */
.opc-step-icon{
  width:82px!important;
  height:70px!important;
  margin:8px auto 6px!important;
  border-radius:0!important;
  background:transparent!important;
  position:relative!important;
  overflow:hidden!important;
}
.opc-step-icon img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}
@media(max-width:900px){
  .opc-card img{height:130px!important}
  .opc-case img{height:130px!important}
}
@media(max-width:600px){
  .opc-card img{height:110px!important}
  .opc-case img{height:145px!important}
  .opc-step-icon{display:block!important;width:70px!important;height:58px!important;margin:4px 0!important}
}

/* v10: enlarge the top-left company/site logo */
.opc-brand-name{
  font-size:36px!important;
  line-height:1!important;
  letter-spacing:-1.5px!important;
}
.opc-brand-sub{
  font-size:11px!important;
  margin-top:5px!important;
}
.opc-brand{
  min-width:350px!important;
}
@media(max-width:900px){
  .opc-brand-name{font-size:30px!important}
  .opc-brand{min-width:0!important}
}

/* =========================================================
   v11 — approved completion mock is the sole visual reference
   ========================================================= */
.opc-site{
  max-width:1100px!important;
  margin:0 auto!important;
  background:#fff;
}
.opc-header{
  height:100px!important;
  box-sizing:border-box!important;
  padding:10px 28px 8px!important;
  align-items:center!important;
}
.opc-brand{
  min-width:0!important;
  gap:0!important;
}
.opc-brand img{
  display:none!important;
}
.opc-brand-name{
  display:block!important;
  font-size:39px!important;
  line-height:.95!important;
  letter-spacing:-2px!important;
}
.opc-brand-sub{
  display:block!important;
  font-size:10px!important;
  margin-top:5px!important;
}
.opc-header-right{
  gap:18px!important;
  align-items:center!important;
}
.opc-header-links{
  position:absolute!important;
  right:28px!important;
  top:13px!important;
  font-size:12px!important;
}
.opc-tel{
  font-size:23px!important;
  padding-top:18px!important;
}
.opc-tel small{
  font-size:10px!important;
}
.opc-mail{
  margin-top:16px!important;
  padding:11px 18px!important;
}

.opc-nav a{
  padding:11px 4px!important;
  font-size:14px!important;
}

.opc-hero{
  min-height:310px!important;
  border:0!important;
  background:#fff!important;
  overflow:hidden!important;
}
.opc-hero-bg{
  background:
    linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.99) 45%,rgba(255,255,255,.15) 60%,rgba(255,255,255,0) 70%),
    url("assets/hero.jpg") right center/55% 100% no-repeat!important;
}
.opc-hero-inner{
  width:53%!important;
  padding:30px 48px 24px!important;
}
.opc-hero h1{
  font-size:46px!important;
  line-height:1.08!important;
  letter-spacing:-2.5px!important;
  margin:0 0 10px!important;
}
.opc-kicker{
  display:inline-block!important;
  background:var(--opc-yellow)!important;
  padding:2px 8px!important;
  font-size:16px!important;
  font-weight:900!important;
}
.opc-benefits{
  gap:14px!important;
  margin-top:12px!important;
}
.opc-circle{
  width:105px!important;
  height:105px!important;
}
.opc-circle b{font-size:27px!important}
.opc-circle small{font-size:12px!important}
.opc-hero-lead{display:none!important}
.opc-check{display:none!important}

.opc-services{
  gap:14px!important;
  padding:14px 18px!important;
}
.opc-card img{
  height:92px!important;
  object-fit:cover!important;
}
.opc-card-body{
  min-height:82px!important;
  padding:7px 13px 10px!important;
}
.opc-card h2{
  font-size:19px!important;
}
.opc-card p{
  font-size:12px!important;
}

.opc-flow{
  padding:18px 24px 20px!important;
}
.opc-section-title{
  font-size:25px!important;
  margin-bottom:12px!important;
}
.opc-flow-grid{
  gap:9px!important;
}
.opc-step{
  min-height:135px!important;
  padding:8px 7px 10px!important;
}
.opc-step-icon{
  width:92px!important;
  height:62px!important;
  margin:5px auto!important;
  overflow:hidden!important;
}
.opc-step-icon img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center bottom!important;
}
.opc-step h3{
  font-size:14px!important;
  margin:3px 0!important;
}
.opc-step p{
  font-size:10px!important;
  line-height:1.4!important;
}

.opc-results{
  padding:20px 26px 22px!important;
}
.opc-results-head{
  margin-bottom:10px!important;
}
.opc-results-head h2{
  font-size:25px!important;
}
.opc-cases{
  gap:12px!important;
}
.opc-case img{
  height:82px!important;
  object-fit:cover!important;
}
.opc-case-body{
  padding:6px 8px 8px!important;
}
.opc-case b{
  font-size:12px!important;
}
.opc-case small{
  font-size:9px!important;
}

.opc-final{
  display:none!important;
}

@media(max-width:900px){
  .opc-header{height:82px!important;padding:8px 14px!important}
  .opc-brand-name{font-size:30px!important}
  .opc-header-links{display:none!important}
  .opc-tel{font-size:16px!important;padding-top:0!important}
  .opc-mail{margin-top:0!important;padding:8px 10px!important}
  .opc-hero{min-height:500px!important}
  .opc-hero-bg{
    background:
      linear-gradient(180deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.97) 43%,rgba(255,255,255,.25) 70%,rgba(255,255,255,0) 100%),
      url("assets/hero.jpg") center bottom/100% 62% no-repeat!important;
  }
  .opc-hero-inner{width:100%!important;padding:22px 22px!important}
  .opc-hero h1{font-size:37px!important}
  .opc-kicker{font-size:13px!important}
  .opc-circle{width:82px!important;height:82px!important}
  .opc-circle b{font-size:21px!important}
  .opc-services{grid-template-columns:1fr!important;padding:8px 10px!important}
  .opc-card{display:grid!important;grid-template-columns:105px 1fr!important}
  .opc-card img{height:92px!important}
  .opc-flow{padding:18px 10px!important}
  .opc-flow-grid{grid-template-columns:1fr!important}
  .opc-step{min-height:58px!important;text-align:left!important;padding:7px 10px 7px 54px!important}
  .opc-step .opc-num{position:absolute;left:10px;top:10px}
  .opc-step-icon{display:block!important;width:72px!important;height:50px!important;margin:0!important}
  .opc-step h3{font-size:13px!important}
  .opc-step p{font-size:10px!important}
  .opc-step:not(:last-child):after{content:"↓"!important;right:14px!important;top:auto!important;bottom:-24px!important}
  .opc-results{padding:18px 10px!important}
  .opc-cases{grid-template-columns:1fr 1fr!important}
  .opc-case img{height:95px!important}
}
@media(max-width:600px){
  .opc-header{height:70px!important}
  .opc-brand-name{font-size:27px!important}
  .opc-brand-sub{font-size:8px!important}
  .opc-tel{display:none!important}
  .opc-mail{font-size:11px!important}
  .opc-hero{min-height:470px!important}
  .opc-hero h1{font-size:31px!important}
  .opc-circle{width:75px!important;height:75px!important}
  .opc-circle b{font-size:18px!important}
  .opc-circle small{font-size:8px!important}
  .opc-card img{height:82px!important}
  .opc-cases{grid-template-columns:1fr!important}
  .opc-case img{height:125px!important}
}