:root{
  --bg:#f1f2f4;
  --ink:#292b32;
  --soft:#858991;
  --line:#d8dbe2;
  --primary:#2745a3;
  --primary-rgb:39,69,163;
  --accent-yellow:#e5c52a;
  --accent-red:#d93a45;
  --ease:cubic-bezier(.65,0,.05,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Zen Maru Gothic",sans-serif;
  font-weight:500;
  line-height:2.1;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--primary);color:#fff}
a{color:inherit;text-decoration:none}

.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:50;
  background:linear-gradient(var(--bg),rgba(241,242,244,0));
}
.site-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:38px 7vw;
}
.site-logo{display:flex;align-items:center}
.site-logo img{height:64px;width:auto;display:block}
.site-menu{display:flex;gap:46px}
.site-menu a{
  position:relative;
  font-family:"Quicksand",sans-serif;
  font-weight:500;
  font-size:.82rem;
  letter-spacing:.16em;
  color:var(--soft);
  transition:color .4s var(--ease);
}
.site-menu a:hover,.site-menu a[aria-current="page"]{color:var(--ink)}
.site-menu a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-7px;
  height:2px;
  border-radius:2px;
  background:var(--primary);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s var(--ease),background .4s var(--ease);
}
.site-menu a[aria-current="page"]::after{transform:scaleX(1)}
.site-menu a:hover::after{background:var(--accent-yellow);transform:scaleX(1)}

.page{
  max-width:840px;
  margin:0 auto;
  padding:230px 7vw 200px;
}
.lead-tag{
  margin-bottom:50px;
  font-family:"Quicksand",sans-serif;
  font-weight:500;
  font-size:.76rem;
  letter-spacing:.32em;
  color:var(--soft);
  text-transform:uppercase;
}
h1{
  margin-bottom:90px;
  font-family:"Zen Maru Gothic",sans-serif;
  font-weight:700;
  font-size:clamp(1.7rem,4.4vw,2.9rem);
  line-height:1.85;
  letter-spacing:.04em;
}
h1 em{font-style:normal;color:var(--primary)}

.mailform-section,.thanks-section{border-top:1px solid var(--line)}
.section-copy{padding:42px 0;border-bottom:1px solid var(--line)}
.section-copy h2,.thanks-section h2{
  margin-bottom:18px;
  font-family:"Quicksand",sans-serif;
  font-weight:600;
  font-size:.84rem;
  letter-spacing:.22em;
  color:var(--primary);
}
.section-copy p,.thanks-section p{font-size:.92rem;color:var(--soft);line-height:1.9}
.thanks-section{padding-top:42px}
.thanks-section .sub{margin:20px 0 34px}
.form-error{
  padding-top:24px;
  font-size:.92rem;
  font-weight:700;
  color:var(--accent-red);
}
.form-error:empty{display:none}
.mailform-panel{padding-top:18px}

.mailform-panel table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 24px;
  border-top:0;
}
.mailform-panel tr{
  border-bottom:0;
  background:transparent;
}
.mailform-panel th,
.mailform-panel td{
  display:block;
  width:100%;
  padding:0;
  border:0!important;
  background:transparent!important;
  text-align:left;
}
.mailform-panel th{
  font-family:"Quicksand",sans-serif;
  font-weight:600;
  font-size:.78rem;
  line-height:1.7;
  letter-spacing:.16em;
  color:var(--primary);
}
.mailform-panel td{padding-top:10px}
.mailform-panel input[type="text"],
.mailform-panel input[type="email"],
.mailform-panel input[type="tel"],
.mailform-panel input[type="url"],
.mailform-panel input[type="number"],
.mailform-panel input[type="password"],
.mailform-panel select,
.mailform-panel textarea{
  width:100%;
  min-height:44px;
  padding:10px 14px;
  border:1px solid rgba(216,219,226,.9);
  border-radius:6px;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:1.02rem;
  transition:border-color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);
}
.mailform-panel textarea{min-height:120px;resize:vertical;line-height:1.9}
.mailform-panel input:focus,
.mailform-panel select:focus,
.mailform-panel textarea:focus{
  outline:0;
  border-color:var(--primary);
  background:rgba(255,255,255,.5);
  box-shadow:0 0 0 3px rgba(var(--primary-rgb),.09);
}
.mailform-panel input[type="radio"],
.mailform-panel input[type="checkbox"]{
  width:auto;
  margin-right:8px;
  accent-color:var(--primary);
}
.mailform-panel label{margin-right:18px;color:var(--ink)}
.mailform-panel .must,
.mailform-panel .required,
.mailform-panel .error,
.mailform-panel .red_txt{color:var(--accent-red)!important}

.form-actions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding-top:18px;
}
.mailform-panel input[type="submit"],
.mailform-panel input[type="button"],
.mailform-panel input[type="reset"],
.mailform-panel button,
.send{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:180px;
  margin:28px 14px 0 0;
  padding:18px 44px;
  border:0;
  border-radius:100px;
  background:var(--ink);
  color:var(--bg)!important;
  cursor:pointer;
  font-family:"Quicksand",sans-serif;
  font-weight:500;
  font-size:.9rem;
  line-height:1.4;
  letter-spacing:.14em;
  transition:background .4s var(--ease),transform .4s var(--ease);
}
.mailform-panel input[type="submit"]:hover,
.mailform-panel input[type="button"]:hover,
.mailform-panel input[type="reset"]:hover,
.mailform-panel button:hover,
.send:hover{
  background:var(--primary);
  transform:translateY(-3px);
}
.mailform-panel input[type="reset"],
.mailform-panel input[value*="戻"],
.mailform-panel input[value*="修正"]{
  background:transparent;
  color:var(--ink)!important;
  box-shadow:inset 0 0 0 1px var(--line);
}
.mailform-panel--confirm th{color:var(--primary)}

.site-footer{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:18px;
  border-top:1px solid var(--line);
  padding:60px 7vw;
}
.site-footer span,.site-footer a{
  font-family:"Quicksand",sans-serif;
  font-size:.74rem;
  letter-spacing:.16em;
  color:var(--soft);
}
.site-footer a:hover{color:var(--primary)}

@media(max-width:760px){
  .site-nav{align-items:flex-start;padding:24px 7vw}
  .site-logo img{height:52px}
  .site-menu{flex-wrap:wrap;justify-content:flex-end;gap:18px 26px}
  .site-menu a{font-size:.72rem}
  .page{padding:190px 7vw 140px}
  h1{margin-bottom:70px}
}

@media(max-width:600px){
  .site-menu{display:none}
  .page{padding:170px 7vw 120px}
  .lead-tag{margin-bottom:42px}
  h1{font-size:1.85rem;line-height:1.75}
  .section-copy{padding:34px 0}
  .mailform-panel table{border-spacing:0 20px}
  .mailform-panel td{padding-top:8px}
  .form-actions{padding-top:10px}
  .mailform-panel input[type="submit"],
  .mailform-panel input[type="button"],
  .mailform-panel input[type="reset"],
  .mailform-panel button,
  .send{
    width:100%;
    margin:28px 0 0;
  }
}