/*
Theme Name: COFFEE RESPECT LP
Theme URI: https://coffee-respect.github.io/coffee-respect/
Author: COFFEE RESPECT (株式会社ティアンドティ企画)
Description: 業務用コーヒー豆卸売 COFFEE RESPECT のランディングページ専用WordPressテーマ。既存の静的HTML版デザインをそのまま完全再現しています。
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: 見た。私的利用のみ
Text Domain: coffee-respect
*/

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --n:#1B2456;--n2:#13193E;--n3:#2C3A7A;--n4:#3D4E96;
  --g:#E0C090;--g2:#C8A870;--g3:#F0D8A8;--gl:#FDF8EE;
  --dark:#0E1428;--mid:#3A4870;--mu:#7A8AB0;--fa:#B0BCDA;
  --bg:#F4F6FC;--wh:#FFFFFF;--off:#F8F9FD;--bd:#D8DEF0;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--dark);font-family:'Noto Sans JP',sans-serif;font-weight:300;line-height:1.8;overflow-x:hidden}

nav{background:var(--wh);border-bottom:2px solid var(--n);padding:1rem 2.5rem;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100}
.logo{font-family:'Cormorant Garamond',serif;font-size:1.2rem;letter-spacing:.28em;color:var(--n);font-weight:300}
.logo small{display:block;font-size:.53rem;letter-spacing:.4em;color:var(--mu);margin-top:2px}
nav ul{list-style:none;display:flex;gap:1.6rem;align-items:center}
nav ul a{text-decoration:none;font-size:.72rem;letter-spacing:.1em;color:var(--mid);transition:color .2s}
nav ul a:hover{color:var(--n)}
.ncta{background:var(--n);color:var(--g);padding:.5rem 1.3rem;font-size:.72rem;letter-spacing:.15em;border:none;cursor:pointer;font-family:inherit;transition:background .2s;text-decoration:none;display:inline-block;font-weight:500}
.ncta:hover{background:var(--n2)}

.hero{background:var(--wh);display:flex;min-height:500px}
.hl{background:var(--n2);flex:1.1;padding:4rem 3rem;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.hl::before{content:'RESPECT';position:absolute;right:-2rem;bottom:-1rem;font-family:'Cormorant Garamond',serif;font-size:7rem;font-weight:300;color:rgba(255,255,255,.03);letter-spacing:.3em;white-space:nowrap;pointer-events:none}
.hlabel{font-size:.57rem;letter-spacing:.5em;color:rgba(255,255,255,.38);margin-bottom:1.1rem;text-transform:uppercase}
.hh1{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,4vw,3.2rem);font-weight:300;color:#fff;line-height:1.2;margin-bottom:1.1rem}
.hh1 em{font-style:italic;color:var(--g)}
.hbody{font-size:.82rem;color:rgba(255,255,255,.62);line-height:2;margin-bottom:1.8rem;max-width:380px}
.hbtns{display:flex;gap:.7rem;flex-wrap:wrap}
.bmain{background:var(--g);color:var(--n2);padding:.82rem 1.8rem;font-size:.76rem;letter-spacing:.18em;border:none;cursor:pointer;font-family:inherit;font-weight:500;transition:background .2s;text-decoration:none;display:inline-block}
.bmain:hover{background:var(--g3)}
.bsub{background:transparent;color:rgba(255,255,255,.8);padding:.82rem 1.8rem;font-size:.76rem;letter-spacing:.18em;border:1.5px solid rgba(255,255,255,.25);cursor:pointer;font-family:inherit;transition:all .2s;text-decoration:none;display:inline-block}
.bsub:hover{border-color:rgba(255,255,255,.6);color:#fff}
.hr{flex:1;background:var(--bg);padding:2.5rem 2rem;display:flex;flex-direction:column;justify-content:center;border-left:1px solid var(--bd)}
.hstat{background:var(--wh);border-left:3px solid var(--n);padding:1.1rem 1.3rem;margin-bottom:1px}
.hstat .num{font-family:'Cormorant Garamond',serif;font-size:1.8rem;font-weight:300;color:var(--n);line-height:1}
.hstat .lbl{font-size:.7rem;color:var(--mid);margin-top:.25rem}
.hstat .rsn{font-size:.67rem;color:var(--mu);margin-top:.4rem;border-top:1px solid var(--bd);padding-top:.4rem;line-height:1.7}

.sec{padding:4.5rem 2.5rem}
.slbl{font-size:.57rem;letter-spacing:.45em;color:var(--n3);text-transform:uppercase;margin-bottom:.7rem}
.sh2{font-family:'Cormorant Garamond',serif;font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:300;line-height:1.3;margin-bottom:.9rem;color:var(--dark)}
.sh2 em{font-style:italic;color:var(--n)}
.dvd{width:38px;height:2px;background:var(--n);margin-bottom:1.6rem;opacity:.6}
.sbody{font-size:.82rem;color:var(--mid);line-height:2.2;max-width:520px}

/* VALUES */
.valsec{background:var(--wh)}
.valgrid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;max-width:960px;margin:0 auto;align-items:start}
.vallist{display:grid;gap:.7rem;margin-top:1.4rem}
.vitem{display:flex;gap:.9rem;align-items:flex-start;padding:1rem 1.1rem;border:1px solid var(--bd);background:var(--off)}
.vi{width:30px;height:30px;background:var(--n);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vi span{width:9px;height:9px;background:var(--g);display:block}
.vt h4{font-size:.8rem;font-weight:500;color:var(--dark);margin-bottom:.2rem}
.vt p{font-size:.72rem;color:var(--mid);line-height:1.85}

/* B2B */
.b2bsec{background:var(--bg)}
.b2bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--bd);margin-top:2rem;border:1px solid var(--bd)}
.b2bc{background:var(--wh);padding:1.6rem 1.3rem;transition:background .2s}
.b2bc:hover{background:var(--off)}
.b2bn{font-family:'Cormorant Garamond',serif;font-size:2rem;color:var(--bd);font-weight:300;display:block;margin-bottom:.4rem}
.b2bc h3{font-size:.86rem;font-weight:500;color:var(--n);margin-bottom:.45rem}
.b2bc p{font-size:.72rem;color:var(--mid);line-height:1.9}

/* AREA LIMIT */
.areasec{background:var(--n2);color:#fff;position:relative;overflow:hidden}
.areasec::before{content:'LIMITED';position:absolute;right:-2rem;top:50%;transform:translateY(-50%) rotate(90deg);font-family:'Cormorant Garamond',serif;font-size:8rem;font-weight:300;color:rgba(255,255,255,.03);letter-spacing:.4em;white-space:nowrap;pointer-events:none}
.areainner{max-width:960px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;position:relative;z-index:1}
.areasec .slbl{color:rgba(255,255,255,.38)}
.areasec .sh2{color:#fff}
.areasec .sh2 em{color:var(--g)}
.areasec .dvd{background:var(--g)}
.areasec .sbody{color:rgba(255,255,255,.65)}
.area-policy{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-left:3px solid var(--g);padding:1.8rem 1.6rem}
.area-policy p{font-size:.8rem;color:rgba(255,255,255,.75);line-height:2.2;margin-bottom:1rem}
.area-policy p:last-child{margin-bottom:0}
.area-policy strong{color:var(--g);font-weight:500}
.area-points{display:grid;gap:.8rem;margin-top:1.6rem}
.ap{display:flex;gap:.9rem;align-items:flex-start;background:rgba(255,255,255,.05);padding:1rem 1.1rem;border-left:2px solid var(--g2)}
.ap-icon{width:28px;height:28px;background:rgba(224,192,144,.15);border:1px solid rgba(224,192,144,.3);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ap-icon span{width:8px;height:8px;background:var(--g);display:block}
.ap-text h4{font-size:.78rem;font-weight:500;color:var(--g3);margin-bottom:.2rem}
.ap-text p{font-size:.71rem;color:rgba(255,255,255,.6);line-height:1.85}
.area-note{background:rgba(224,192,144,.08);border:1px solid rgba(224,192,144,.2);padding:1.1rem 1.3rem;margin-top:1rem;font-size:.74rem;color:rgba(255,255,255,.58);line-height:1.95}
.area-note strong{color:var(--g2)}

/* FLOW */
.flowsec{background:var(--wh)}
.flowwrap{max-width:960px;margin:0 auto}
.steps{display:grid;gap:1px;background:var(--bd);margin-top:1.8rem;border:1px solid var(--bd)}
.step{background:var(--wh);display:grid;grid-template-columns:52px 1fr auto;align-items:start;gap:1rem;padding:1.2rem 1.3rem;transition:background .2s}
.step:hover{background:var(--off)}
.snum{width:40px;height:40px;background:var(--n);color:var(--g);display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:300;flex-shrink:0}
.stxt h4{font-size:.82rem;font-weight:500;color:var(--dark);margin-bottom:.22rem}
.stxt p{font-size:.72rem;color:var(--mid);line-height:1.85}
.sbadge{font-size:.58rem;letter-spacing:.1em;padding:.25rem .7rem;white-space:nowrap;align-self:center;flex-shrink:0}
.bmail{background:#EAF2FF;color:#1B4B8A;border:1px solid #B5D0F0}
.bsq{background:var(--gl);color:#7A5800;border:1px solid #D8B870}
.bday{background:var(--off);color:var(--n);border:1px solid var(--bd)}
.bship{background:#E8F5E4;color:#2A6020;border:1px solid #B0D8A8}

/* SQUARE */
.sqsec{background:var(--n)}
.sqinner{max-width:960px;margin:0 auto}
.sqsec .slbl{color:rgba(255,255,255,.38)}
.sqsec .sh2{color:#fff}
.sqsec .sh2 em{color:var(--g)}
.sqsec .dvd{background:var(--g)}
.sqsec .sbody{color:rgba(255,255,255,.62);max-width:600px}
.sqgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);margin-top:1.8rem}
.sqc{background:rgba(255,255,255,.04);padding:1.4rem 1.3rem}
.sqc h4{font-size:.8rem;font-weight:500;color:var(--g);margin-bottom:.5rem}
.sqpt{display:flex;gap:.65rem;align-items:flex-start;margin-bottom:.5rem}
.sqpt:last-child{margin-bottom:0}
.sqd{width:7px;height:7px;background:var(--g2);flex-shrink:0;margin-top:.55em}
.sqpt p{font-size:.72rem;color:rgba(255,255,255,.62);line-height:1.85}
.sqnote{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-left:3px solid var(--g);padding:1.1rem 1.3rem;margin-top:1.3rem;font-size:.76rem;color:rgba(255,255,255,.62);line-height:2}

/* NOKI */
.nokisec{background:var(--bg)}
.nokiinner{max-width:960px;margin:0 auto}
.ntl{margin-top:1.8rem;display:grid;gap:1px;background:var(--bd);border:1px solid var(--bd)}
.nrow{background:var(--wh);display:grid;grid-template-columns:96px 1fr;align-items:start;gap:1rem;padding:1rem 1.3rem}
.nday{font-family:'Cormorant Garamond',serif;font-size:.95rem;color:var(--n);font-weight:300;line-height:1.4}
.nday small{display:block;font-size:.6rem;font-family:'Noto Sans JP',sans-serif;color:var(--mu);letter-spacing:.05em}
.ndet h4{font-size:.78rem;font-weight:500;color:var(--dark);margin-bottom:.2rem}
.ndet p{font-size:.71rem;color:var(--mid);line-height:1.85}
.nnote{background:var(--off);border:1px solid var(--bd);border-left:3px solid var(--n);padding:1.1rem 1.3rem;margin-top:1rem;font-size:.74rem;color:var(--mid);line-height:1.95}

/* COSPA */
.cpsec{background:var(--n2)}
.cpinner{max-width:960px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.cpsec .slbl{color:rgba(255,255,255,.38)}
.cpsec .sh2{color:#fff}
.cpsec .sh2 em{color:var(--g)}
.cpsec .dvd{background:var(--g)}
.cpsec .sbody{color:rgba(255,255,255,.62)}
.cplist{display:grid;gap:.7rem;margin-top:1.4rem}
.cp{background:rgba(255,255,255,.05);border-left:3px solid var(--g2);padding:1rem 1.1rem;display:flex;gap:.9rem;align-items:flex-start}
.cpn{font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:rgba(255,255,255,.15);font-weight:300;flex-shrink:0;line-height:1}
.cp h4{font-size:.8rem;font-weight:500;color:var(--g3);margin-bottom:.2rem}
.cp p{font-size:.71rem;color:rgba(255,255,255,.58);line-height:1.9}
.cpbox{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);padding:1.8rem}
.cpbox blockquote{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.1rem;color:var(--g);line-height:1.75;margin-bottom:1rem;font-weight:300}
.cpbox p{font-size:.73rem;color:rgba(255,255,255,.55);line-height:2.1}
.cw{display:inline-block;background:var(--g);color:var(--n2);padding:.8rem 1.6rem;font-size:.74rem;letter-spacing:.2em;font-weight:500;text-decoration:none;margin-top:1.4rem;cursor:pointer;border:none;font-family:inherit;transition:background .2s}
.cw:hover{background:var(--g3)}

/* LOT */
.lotsec{background:var(--wh)}
.lotinner{max-width:960px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
.lotbox{border:2px solid var(--n);padding:1.8rem}
.lotbox h3{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:300;color:var(--n);margin-bottom:.9rem}
.lrow{display:flex;justify-content:space-between;align-items:baseline;padding:.6rem 0;border-bottom:1px solid var(--bd);font-size:.78rem}
.lrow:last-child{border-bottom:none}
.lrow .k{color:var(--mu)}
.lrow .v{color:var(--dark)}
.lrow .v em{color:var(--n);font-style:normal;font-weight:500}
.rbox{background:var(--off);border:1px solid var(--bd);border-left:3px solid var(--n);padding:1.3rem 1.4rem;margin-bottom:.8rem}
.rbox h4{font-size:.8rem;font-weight:500;color:var(--n);margin-bottom:.7rem}
.rbox ul{list-style:none;display:grid;gap:.45rem}
.rbox li{font-size:.72rem;color:var(--mid);line-height:1.85;padding-left:.9rem;position:relative}
.rbox li::before{content:'';position:absolute;left:0;top:.68em;width:5px;height:5px;background:var(--n);display:block}

/* PKG */
.pkgsec{background:var(--bg)}
.pkginner{max-width:960px;margin:0 auto}
.pkggrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-top:1.8rem}
.pkgc{background:var(--wh);border:1px solid var(--bd);padding:1.4rem}
.pkgc .ico{width:32px;height:32px;background:var(--n);display:flex;align-items:center;justify-content:center;margin-bottom:.7rem}
.pkgc .ico span{width:12px;height:12px;border:2px solid var(--g);display:block}
.pkgc h4{font-size:.8rem;font-weight:500;color:var(--n);margin-bottom:.45rem}
.pkgc p{font-size:.71rem;color:var(--mid);line-height:1.9}

/* PAY */
.paysec{background:var(--wh)}
.payinner{max-width:960px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}
.paybox{background:var(--off);border:1px solid var(--bd);padding:1.5rem}
.ptag{display:inline-block;background:var(--n);color:var(--g);font-size:.58rem;letter-spacing:.18em;padding:.26rem .8rem;margin-bottom:.8rem;font-weight:500}
.paybox h3{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:300;color:var(--n);margin-bottom:.9rem}
.prow{display:flex;justify-content:space-between;align-items:baseline;padding:.55rem 0;border-bottom:1px solid var(--bd);font-size:.76rem}
.prow:last-child{border-bottom:none}
.prow .k{color:var(--mu)}
.prow .v{color:var(--dark);text-align:right}
.prow .v em{color:var(--n);font-style:normal;font-weight:500}
.paywhy{background:var(--off);border:1px solid var(--bd);border-left:3px solid var(--n);padding:1.4rem}
.paywhy h4{font-size:.8rem;font-weight:500;color:var(--n);margin-bottom:.7rem}
.paywhy ul{list-style:none;display:grid;gap:.45rem}
.paywhy li{font-size:.72rem;color:var(--mid);line-height:1.85;padding-left:.9rem;position:relative}
.paywhy li::before{content:'';position:absolute;left:0;top:.68em;width:5px;height:5px;background:var(--n);display:block}

/* ORIG */
.origsec{background:var(--bg)}
.originner{max-width:900px;margin:0 auto;display:flex;gap:3.5rem;align-items:center}
.origctabox{flex-shrink:0;text-align:center;background:var(--wh);border:2px solid var(--n);padding:2.2rem 1.8rem;min-width:210px}
.origctabox p{font-size:.72rem;color:var(--mid);margin-bottom:1.3rem;line-height:1.9}
.bigcta{display:block;background:var(--n);color:var(--g);padding:.95rem 1.4rem;font-size:.78rem;letter-spacing:.18em;font-weight:500;text-align:center;text-decoration:none;transition:background .2s;border:none;cursor:pointer;font-family:inherit;width:100%}
.bigcta:hover{background:var(--n2)}
.origctabox small{display:block;margin-top:.7rem;font-size:.63rem;color:var(--fa);letter-spacing:.1em}

/* WHY */
.whysec{background:var(--wh);text-align:center;padding:4.5rem 2.5rem}
.whysec .dvd{margin:0 auto 1.6rem}
.whyq{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.2rem,2.4vw,1.65rem);color:var(--n);font-weight:300;max-width:580px;margin:0 auto 1.4rem;line-height:1.75}
.whybody{font-size:.8rem;color:var(--mid);max-width:520px;margin:0 auto;line-height:2.3}

/* CONTACT */
.ctsec{background:var(--n2);color:#fff;text-align:center;padding:4.5rem 2.5rem}
.ctsec .slbl{color:rgba(255,255,255,.38)}
.ctsec .sh2{color:#fff}
.ctsec .sh2 em{color:var(--g)}
.ctsec .dvd{background:var(--g);margin:0 auto 1.4rem}
.ctemail{font-size:.8rem;letter-spacing:.2em;color:var(--g);display:block;margin-bottom:2.2rem;text-decoration:none}
.ctemail:hover{text-decoration:underline}
.fwrap{max-width:460px;margin:0 auto;text-align:left}
.fr{margin-bottom:.7rem}
.fr input,.fr select,.fr textarea{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);padding:.82rem .95rem;color:#fff;font-family:inherit;font-size:.77rem;outline:none;transition:border-color .2s}
.fr input::placeholder,.fr textarea::placeholder{color:rgba(255,255,255,.3)}
.fr input:focus,.fr select:focus,.fr textarea:focus{border-color:rgba(224,192,144,.6)}
.fr select{color:rgba(255,255,255,.7)}
.fr select option{background:var(--n2);color:#fff}
.fr textarea{height:96px;resize:vertical}
.subm{width:100%;background:var(--g);color:var(--n2);border:none;padding:.95rem;font-size:.78rem;letter-spacing:.22em;font-family:inherit;font-weight:500;cursor:pointer;margin-top:.3rem;transition:background .2s}
.subm:hover{background:var(--g3)}

.sbar{background:var(--n);color:#fff;text-align:center;padding:1rem 2rem}
.sbar p{font-size:.72rem;color:rgba(255,255,255,.65);margin-bottom:.55rem}
.sbar a{display:inline-block;background:var(--g);color:var(--n2);padding:.58rem 2.2rem;font-size:.74rem;letter-spacing:.18em;font-weight:500;text-decoration:none;transition:background .2s}
.sbar a:hover{background:var(--g3)}

footer{background:var(--dark);color:rgba(255,255,255,.4);padding:1.4rem 2.5rem;display:flex;justify-content:space-between;align-items:center;font-size:.64rem;letter-spacing:.1em}
.flogo{font-family:'Cormorant Garamond',serif;font-size:.88rem;letter-spacing:.3em;color:var(--g2)}

.rev{opacity:0;transform:translateY(14px);transition:opacity .7s,transform .7s}
.revealed{opacity:1;transform:none}

@media(max-width:720px){
  .valgrid,.cpinner,.lotinner,.payinner,.originner,.pkggrid,.sqgrid,.areainner{grid-template-columns:1fr;gap:2rem}
  .hero{flex-direction:column}
  .hl,.hr{padding:2.5rem 1.5rem}
  nav ul{display:none}
  .sec{padding:3.5rem 1.5rem}
  footer{flex-direction:column;gap:.5rem;text-align:center}
  .step{grid-template-columns:44px 1fr}
  .sbadge{display:none}
  /* About・Sample・FAQ・Tokusho スマホ対応 */
  div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important;gap:2rem !important}
  div[style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr !important;gap:1rem !important}
  table{font-size:.68rem !important}
  table td{padding:.6rem .8rem !important}
  .faq-item h4{font-size:.76rem !important}
  nav{padding:.8rem 1rem}
  .logo{font-size:.95rem}
}