@charset "UTF-8";

/* =========================================
   そらいろラボ｜CONTACT
   トップページと同じデザインに統一
========================================= */

:root{
  --blue:#4d93d8;
  --dark-blue:#214a78;
  --text:#333b47;
  --muted:#687383;
  --line:#e1e7ee;
  --pale:#f4f9ff;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  color:var(--text);
  background:#fff;
  font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  line-height:1.8;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  display:block;
}

/* ---------- ヘッダー ---------- */

.site-header{
  height:88px;
  padding:0 6vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(77,147,216,.16);
  background:rgba(255,255,255,.97);
}

.site-logo{
  display:block;
  width:180px;
  margin-right:auto;
}

.site-logo img{
  width:100%;
  height:auto;
}

.nav{
  display:flex;
  gap:34px;
  font-size:14px;
  font-weight:600;
}

.nav a{
  padding-bottom:5px;
  border-bottom:1px solid transparent;
  color:#4f5d6c;
}

.nav a:hover{
  color:var(--blue);
  border-bottom-color:var(--blue);
}

.menu-btn{
  display:none;
  background:none;
  border:1px solid #b8cfe4;
  color:#4f6680;
  padding:8px 12px;
  border-radius:6px;
  font:inherit;
}

/* ---------- ページ ---------- */

.contact-page{
  min-height:calc(100vh - 88px);
}

/* ページタイトル */

.contact-intro{
  padding:70px 20px 55px;
  text-align:center;
  background:linear-gradient(180deg,#f4f9ff 0%,#fff 100%);
  border-bottom:1px solid var(--line);
}

.contact-intro:before{
  content:"···";
  display:block;
  color:#a9cfee;
  letter-spacing:15px;
  font-size:22px;
  line-height:1;
  margin-bottom:8px;
}

.contact-intro .section-label{
  margin:0 0 2px;
  color:var(--blue);
  font-size:11px;
  font-weight:700;
  letter-spacing:.25em;
}

.contact-intro h1{
  margin:0;
  color:#263f60;
  font-size:34px;
  font-weight:600;
  letter-spacing:.12em;
}

.contact-intro > p:last-child{
  margin:7px 0 0;
  color:#606b78;
  font-size:13px;
}

/* ---------- フォーム ---------- */

.contact-form-wrap{
  width:min(760px,92%);
  margin:0 auto;
  padding:65px 0 85px;
}

.contact-form{
  padding:42px 48px;
  border:1px solid #e1e7ee;
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 28px rgba(40,75,110,.05);
}

.form-item{
  margin-bottom:28px;
}

.form-item label,
.form-label{
  display:block;
  margin:0 0 9px;
  color:#2d4f70;
  font-size:13px;
  font-weight:700;
}

.form-item label span{
  display:inline-block;
  margin-left:6px;
  padding:2px 7px;
  border-radius:4px;
  background:#eaf4fd;
  color:#4d93d8;
  font-size:9px;
  font-weight:600;
  vertical-align:2px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  width:100%;
  border:1px solid #d8e2ea;
  border-radius:8px;
  background:#fbfdff;
  color:#333b47;
  font:inherit;
  font-size:14px;
  padding:12px 14px;
  outline:none;
  transition:.2s;
}

.contact-form input[type="text"],
.contact-form input[type="email"]{
  height:48px;
}

.contact-form textarea{
  min-height:190px;
  resize:vertical;
  line-height:1.8;
}

.contact-form input:focus,
.contact-form textarea:focus{
  border-color:#8dbce4;
  background:#fff;
  box-shadow:0 0 0 3px rgba(77,147,216,.08);
}

/* チェック項目 */

.form-label{
  margin-bottom:12px;
}

.check-item{
  display:flex !important;
  align-items:flex-start;
  gap:10px;
  margin:9px 0;
  padding:9px 12px;
  border:1px solid #edf1f4;
  border-radius:8px;
  background:#fbfcfd;
  color:#536474 !important;
  font-size:12px !important;
  font-weight:500 !important;
  cursor:pointer;
}

.check-item:hover{
  background:#f4f9ff;
  border-color:#d8e9f7;
}

.check-item input[type="checkbox"]{
  width:16px;
  height:16px;
  margin:3px 0 0;
  flex-shrink:0;
  accent-color:var(--blue);
}

.check-item span{
  margin:0 !important;
  padding:0 !important;
  background:none !important;
  color:inherit !important;
  font-size:inherit !important;
  font-weight:inherit !important;
  vertical-align:baseline !important;
}

/* 注意書き・エラー */

.form-note{
  margin:0 0 18px;
  color:#7a8997;
  font-size:11px;
  text-align:center;
}

.form-error{
  margin:15px 0;
  color:#c44;
  font-size:12px;
  text-align:center;
}

/* 送信ボタン */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:0;
  border-radius:999px;
  padding:11px 28px;
  font-weight:700;
  font-size:14px;
  font-family:inherit;
  cursor:pointer;
  transition:.2s;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-blue{
  display:flex;
  width:max-content;
  margin:0 auto;
  background:#438bd3;
  color:#fff;
  box-shadow:0 7px 18px rgba(67,139,211,.2);
}

.form-honeypot{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
}

/* ---------- フッター ---------- */

.site-footer{
  margin-top:0;
  padding:35px 6vw 20px;
  background:#edf5fc;
  color:#4b79a4;
  text-align:center;
}

.site-footer p{
  margin:0;
  font-size:10px;
}

/* ---------- 完了ページ用 ---------- */

.thanks-page{
  width:min(900px,92%);
  margin:0 auto;
  padding:90px 0 100px;
}

.thanks-card{
  padding:60px 30px;
  text-align:center;
  background:#fffaf1;
  border:1px solid #eadfcf;
  border-radius:18px;
}

.thanks-card h1{
  margin:15px 0 25px;
  color:#23466d;
}

.thanks-card p{
  line-height:2;
  margin-bottom:30px;
}

/* ---------- スマホ ---------- */

@media(max-width:760px){

  .site-header{
    height:74px;
    padding:0 5vw;
  }

  .site-logo{
    width:135px;
  }

  .nav{
    display:none;
  }

  .menu-btn{
    display:block;
    font-size:11px;
    letter-spacing:.08em;
  }

  .contact-page{
    min-height:calc(100vh - 74px);
  }

  .contact-intro{
    padding:52px 18px 40px;
  }

  .contact-intro:before{
    font-size:20px;
    letter-spacing:12px;
  }

  .contact-intro h1{
    font-size:30px;
  }

  .contact-intro > p:last-child{
    font-size:12px;
    line-height:1.8;
  }

  .contact-form-wrap{
    width:92%;
    padding:45px 0 60px;
  }

  .contact-form{
    padding:30px 20px;
    border-radius:14px;
  }

  .form-item{
    margin-bottom:24px;
  }

  .form-item label,
  .form-label{
    font-size:12px;
  }

  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form textarea{
    font-size:13px;
  }

  .check-item{
    font-size:11px !important;
    padding:9px 10px;
  }

  .contact-form textarea{
    min-height:170px;
  }

  .form-note{
    font-size:10px;
  }

  .btn-blue{
    width:100%;
    max-width:300px;
  }

  .site-footer{
    padding:30px 5vw 18px;
  }

  .thanks-page{
    padding:60px 0 70px;
  }

  .thanks-card{
    padding:45px 20px;
  }

  .thanks-card h1{
    font-size:24px;
  }
}