@charset "UTF-8";
/* =====================================================================
   BARKEDGE — contact.css (contact.html)
   Loaded after common.css + sub.css. PC follows the 1440px comp,
   SP (≤860px) follows the 375px rules of the other sub pages.
   ===================================================================== */
.ct{position:relative;padding-bottom:calc(170 * var(--v))}
.ct-form{margin:calc(160 * var(--v)) 0 0;padding:0 calc(160 * var(--v)) 0 calc(162 * var(--v))}
.ct-fields{display:grid;gap:calc(41 * var(--v));margin:0;padding:0;border:0}
.ct-row{display:grid;grid-template-columns:calc(278 * var(--v)) minmax(0,1fr);align-items:center;column-gap:0}
.ct-row.is-top{align-items:start;margin-top:calc(5 * var(--v))}
.ct-row.is-top .ct-lbl{padding-top:calc(20 * var(--v))}
.ct-lbl{display:flex;align-items:center;gap:16px;font:500 max(15px,calc(17 * var(--v)))/1.4 var(--f-jp);letter-spacing:.02em}
.ct-lbl .req{flex:none;display:grid;place-items:center;width:39px;height:20px;border-radius:2px;background:#f00;color:#fff;font:400 12px/1 var(--f-jp);letter-spacing:.04em}
.ct-lbl.opt{margin-left:-2px}
.ct-ctrl{position:relative;min-width:0}
.ct-in{display:block;width:100%;height:59px;padding:0 27px;border:1px solid transparent;border-radius:5px;background:#f2f2f2;color:var(--ink);
  font:300 15px/1.5 var(--f-jp);letter-spacing:.02em;box-sizing:border-box;appearance:none;-webkit-appearance:none;outline:0;
  transition:background-color .4s,border-color .4s,box-shadow .4s}
.ct-in::placeholder{color:var(--ink);opacity:.4}
.ct-in:hover{background:#ececec}
.ct-in:focus{background:#fff;border-color:var(--ink);box-shadow:0 0 0 3px rgba(252,217,1,.55)}
textarea.ct-in{height:254px;padding-top:18px;padding-bottom:18px;resize:vertical;min-height:160px}
select.ct-in{padding-right:64px;cursor:pointer}
.ct-sel::after{content:"";position:absolute;right:27px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);
  transform:rotate(45deg);pointer-events:none;transition:transform .4s var(--ease)}
.ct-sel:focus-within::after{transform:translateY(3px) rotate(225deg)}
.ct-err{display:block;margin:8px 0 0 4px;color:#e60000;font:400 12px/1.4 var(--f-jp);min-height:0}
.ct-err:empty{display:none}
.ct-in[aria-invalid="true"]{border-color:#e60000;background:#fff6f6}

/* consent */
.ct-agree{display:flex;justify-content:center;margin-top:calc(49 * var(--v))}
.ct-check{position:relative;display:inline-flex;align-items:center;gap:16px;cursor:pointer;font:500 max(15px,calc(17 * var(--v)))/1.4 var(--f-jp)}
.ct-check input{position:absolute;opacity:0;width:30px;height:30px;margin:0;cursor:pointer}
.ct-box{flex:none;display:grid;place-items:center;width:30px;height:30px;background:#e3e3e3;transition:background-color .3s}
.ct-box svg{width:15px;height:11px;overflow:visible}
.ct-box path{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .45s var(--ease)}
.ct-check input:checked + .ct-box path{stroke-dashoffset:0}
.ct-check input:checked + .ct-box{background:var(--sun)}
.ct-check input:focus-visible + .ct-box{outline:2px solid var(--ink);outline-offset:3px}
.ct-check a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;transition:color .3s}
.ct-check a:hover{color:#8a7400}
.ct-agree-wrap .ct-err{text-align:center;margin-left:0}

/* submit */
.ct-send{display:flex;justify-content:center;margin-top:calc(105 * var(--v))}
.ct-btn{position:relative;display:grid;place-items:center;width:max(280px,calc(360 * var(--v)));height:max(68px,calc(88 * var(--v)));border:0;border-radius:2px;background:#000;color:#fff;
  font:500 max(17px,calc(20 * var(--v)))/1 var(--f-jp);letter-spacing:.08em;cursor:pointer;overflow:hidden;isolation:isolate;transition:color .5s var(--ease)}
.ct-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sun);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.ct-btn:hover{color:var(--ink)}
.ct-btn:hover::before{transform:scaleX(1);transform-origin:left}
.ct-btn:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.ct-btn[disabled]{cursor:wait}
.ct-btn .arw{position:absolute;right:28px;top:50%;width:14px;height:14px;margin-top:-7px}

/* sent */
.ct-done{margin:calc(160 * var(--v)) 0 0;padding:0 calc(160 * var(--v)) 0 calc(162 * var(--v));text-align:center}
.ct-done h2{margin:0;font:500 max(20px,calc(26 * var(--v)))/1.6 var(--f-jp)}
.ct-done p{margin:24px 0 0;font:400 15px/2 var(--f-jp)}
.ct-done .more-wrap{margin-top:48px;display:flex;justify-content:center}

@media (max-width:860px){
  .ct{padding-bottom:90px}
  .ct-form,.ct-done{margin-top:56px;padding:0 calc(15 * var(--s))}
  .ct-fields{gap:26px}
  .ct-row,.ct-row.is-top{grid-template-columns:1fr;row-gap:10px;margin-top:0}
  .ct-row.is-top .ct-lbl{padding-top:0}
  .ct-lbl{font-size:15px;gap:10px}
  .ct-lbl .req{width:36px;height:19px;font-size:11px}
  .ct-in{height:52px;padding:0 18px;font-size:16px}       /* 16px: no iOS zoom on focus */
  textarea.ct-in{height:200px;padding-top:14px}
  select.ct-in{padding-right:48px}
  .ct-sel::after{right:20px}
  .ct-agree{margin-top:36px}
  .ct-check{font-size:14px;gap:12px}
  .ct-send{margin-top:48px}
  .ct-btn{width:100%;height:64px;font-size:17px}
}