/* =========================================================
   Contact page : page-id-378
   Theme: Lightning / Builder: SiteOrigin
========================================================= */

/* =========================================================
   1) Cover（Row-1）
   Row Class: page-cover contact-cover
   Background image: Row側で設定
========================================================= */
.page-id-378 .page-cover.contact-cover{
  position: relative;
  overflow: hidden;
}

/* Row背景の上に暗幕＋横ラインを重ねる（226/300系の流儀） */
.page-id-378 .page-cover.contact-cover::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.22) 0px,
      rgba(0,0,0,.22) 2px,
      rgba(0,0,0,0) 4px,
      rgba(0,0,0,0) 7px
    ),
    linear-gradient(
      90deg,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.38) 55%,
      rgba(0,0,0,.18) 100%
    );
}

.page-id-378 .page-cover.contact-cover .pageCover{
  position: relative;
  z-index: 1;
  background: transparent;
}

.page-id-378 .page-cover.contact-cover .pageCover__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 62px 20px 58px; /* 226と揃える */
}

.page-id-378 .page-cover.contact-cover .pageCover__ja{
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 2px 0 rgba(0,0,0,.45);
}

.page-id-378 .page-cover.contact-cover .pageCover__en{
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #ffffff;
  font-family: "Times New Roman", Georgia, serif;
  text-shadow: 0 2px 0 rgba(0,0,0,.55);
}

@media (max-width: 767px){
  .page-id-378 .page-cover.contact-cover .pageCover__inner{
    padding: 46px 16px 42px;
  }
  .page-id-378 .page-cover.contact-cover .pageCover__ja{
    font-size: 26px;
  }
  .page-id-378 .page-cover.contact-cover .pageCover__en{
    font-size: 14px;
  }
}

/* =========================================================
   2) Layout（このページのみ：サイドバー非表示）
========================================================= */
.page-id-378 .sub-section{
  display: none !important;
}
.page-id-378 .main-section,
.page-id-378 .main-section--col--two{
  width: 100% !important;
  float: none !important;
}
.page-id-378 .site-body-container.container{
  max-width: none;
}

/* =========================================================
   3) Fullwidth背景が左だけになる対策（念のため）
   ※Lightningの .siteContent > .container の左右paddingを消す
========================================================= */
.page-id-378 .siteContent > .container{
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* =========================================================
   Contact : Cover spacing fix
   page-id-378
========================================================= */

/* 1) パンくず直下の余白を詰める */
.page-id-378 .breadSection{
  margin: 0 !important;
  padding: 0 !important;
}
.page-id-378 .breadSection .container{
  padding-top: 10px;   /* 必要なら微調整 */
  padding-bottom: 10px;
}

/* 2) SiteOriginの最初のRowが落ちるのを防ぐ（Row-1の上余白を殺す） */
.page-id-378 #pl-378 > .panel-grid:first-child{
  margin-top: 0 !important;
}
.page-id-378 #pl-378 > .panel-grid:first-child .panel-row-style{
  margin-top: 0 !important;
}

/* 3) Contactカバーは businessより少し低いので高さを詰める */
.page-id-378 .page-cover.contact-cover .pageCover__inner{
  padding: 48px 20px 42px;  /* ← 62/58 から Contact用に短く */
}

@media (max-width: 767px){
  .page-id-378 .page-cover.contact-cover .pageCover__inner{
    padding: 36px 16px 30px;
  }
}

/* =========================================================
   Contact : Lead + Form（Row-2 / Row-3）
========================================================= */

/* ---------- Row-2: 説明文 ---------- */
.page-id-378 .contact-lead-row{
  background: #fff;
}

.page-id-378 .contact-lead{
  max-width: 1200px;
  margin: 0 auto;
  padding: 66px 20px 34px;
}

/* お手本：文章は中央寄せ＆細め */
.page-id-378 .contact-lead p{
  max-width: 720px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 2.1;
  color: #222;
}

/* ---------- Row-3: フォーム ---------- */
.page-id-378 .contact-form-row{
  background: #fff;
}

.page-id-378 .contact-form{
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 20px 86px;
}

/* CF7 ベース（お手本は p > label 構造） */
.page-id-378 .contact-form .wpcf7{
  max-width: 720px;
  margin: 0 auto;
}

.page-id-378 .contact-form .wpcf7 form > p{
  margin: 0 0 26px;
}

/* label（見出し） */
.page-id-378 .contact-form .wpcf7 label{
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: #111;
}

/* 入力共通（Lightning/Bootstrapの影を排除） */
.page-id-378 .contact-form .wpcf7 .wpcf7-form-control{
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.4;
  color: #111;
  background: #fff;
  border: 1px solid #cfd8e3;
  border-radius: 3px;
  box-shadow: none;
  appearance: none;
}

/* input 高さ */
.page-id-378 .contact-form .wpcf7 input[type="text"],
.page-id-378 .contact-form .wpcf7 input[type="email"],
.page-id-378 .contact-form .wpcf7 input[type="tel"]{
  height: 42px;
}

/* textarea 高さ（お手本の大きさ寄せ） */
.page-id-378 .contact-form .wpcf7 textarea{
  min-height: 230px;
  resize: vertical;
}

/* 送信ボタン（お手本：赤・中央・大きめ） */
.page-id-378 .contact-form .wpcf7 .wpcf7-submit{
  display: block;
  width: 220px;
  height: 60px;
  margin: 26px auto 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #e60012;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: none;
}

.page-id-378 .contact-form .wpcf7 .wpcf7-submit:hover{
  filter: brightness(.92);
}

/* 送信中ローダー（CF7のspan.ajax-loaderが右に出るので整える） */
.page-id-378 .contact-form .wpcf7 .ajax-loader{
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}

/* エラー/完了メッセージの幅揃え */
.page-id-378 .contact-form .wpcf7 .wpcf7-response-output{
  margin: 16px auto 0;
  max-width: 720px;
}

.page-id-378 .contact-form .wpcf7 .wpcf7-not-valid-tip{
  margin-top: 8px;
  font-size: 12px;
}

/* ---------- SP ---------- */
@media (max-width: 767px){
  .page-id-378 .contact-lead{
    padding: 44px 16px 26px;
  }

  .page-id-378 .contact-form{
    padding: 18px 16px 64px;
  }

  .page-id-378 .contact-form .wpcf7 form > p{
    margin-bottom: 22px;
  }

  .page-id-378 .contact-form .wpcf7 .wpcf7-submit{
    width: 200px;
    height: 56px;
  }
}

/* =========================================================
   Contact : Lead + Form（page-id-378）
========================================================= */

/* ---------- 説明文（Row-2想定） ---------- */
.page-id-378 .contact-lead-row{ background:#fff; }
.page-id-378 .contact-lead{
  max-width: 1200px;
  margin: 0 auto;
  padding: 66px 20px 34px;
}
.page-id-378 .contact-lead p{
  max-width: 720px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 2.1;
  color: #222;
}

/* ---------- フォーム（Row-3想定） ---------- */
.page-id-378 .contact-form-row{ background:#fff; }
.page-id-378 .contact-form{
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 20px 86px;
}

/* CF7のフォーム幅を固定して中央寄せ */
.page-id-378 .contact-form .wpcf7{
  max-width: 720px;
  margin: 0 auto;
}

/* CF7はpが段落余白を作るのでこちらで管理 */
.page-id-378 .contact-form .wpcf7 form > p{
  margin: 0 0 26px;
}

/* label（項目名） */
.page-id-378 .contact-form .wpcf7 label{
  display:block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color:#111;
}

/* 入力共通 */
.page-id-378 .contact-form .wpcf7 .wpcf7-form-control,
.page-id-378 .contact-form .wpcf7 .form-control{
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.4;
  color:#111;
  background:#fff;
  border: 1px solid #cfd8e3;
  border-radius: 3px;
  box-shadow: none;
  appearance: none;
}

/* input高さ */
.page-id-378 .contact-form .wpcf7 input[type="text"],
.page-id-378 .contact-form .wpcf7 input[type="email"],
.page-id-378 .contact-form .wpcf7 input[type="tel"]{
  height: 42px;
}

/* textarea（お手本の大きさ） */
.page-id-378 .contact-form .wpcf7 textarea{
  min-height: 230px;
  resize: vertical;
}

/* 送信ボタン（お手本：赤・中央・大きめ） */
.page-id-378 .contact-form .wpcf7 input[type="submit"],
.page-id-378 .contact-form .wpcf7 .wpcf7-submit{
  display:block;
  width: 220px;
  height: 60px;
  margin: 26px auto 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #e60012;
  color:#fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
  cursor:pointer;
  box-shadow:none;
}
.page-id-378 .contact-form .wpcf7 input[type="submit"]:hover{
  filter: brightness(.92);
}

/* CF7メッセージ */
.page-id-378 .contact-form .wpcf7 .wpcf7-response-output{
  margin: 16px auto 0;
  max-width: 720px;
}
.page-id-378 .contact-form .wpcf7 .wpcf7-not-valid-tip{
  margin-top: 8px;
  font-size: 12px;
}

/* ---------- SP ---------- */
@media (max-width: 767px){
  .page-id-378 .contact-lead{
    padding: 44px 16px 26px;
  }
  .page-id-378 .contact-form{
    padding: 18px 16px 64px;
  }
  .page-id-378 .contact-form .wpcf7 form > p{
    margin-bottom: 22px;
  }
  .page-id-378 .contact-form .wpcf7 input[type="submit"],
  .page-id-378 .contact-form .wpcf7 .wpcf7-submit{
    width: 200px;
    height: 56px;
  }
}

/* =========================================================
   Contact : Form Section（CF7）
   page-id-378
========================================================= */

/* フォーム全体の最大幅を固定して中央寄せ（お手本：720px） */
.page-id-378 .contact-form-shortcode{
  max-width: 720px;
  margin: 0 auto;
}

/* CF7本体も念のため幅固定 */
.page-id-378 .contact-form-shortcode .wpcf7{
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

/* CF7のp余白をコントロール（お手本の縦リズム） */
.page-id-378 .contact-form-shortcode .wpcf7 form > p{
  margin: 0 0 26px;
}

/* ラベル（項目名） */
.page-id-378 .contact-form-shortcode .wpcf7 label{
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: #111;
}

/* 入力共通（Lightning/Bootstrap由来の影を排除） */
.page-id-378 .contact-form-shortcode .wpcf7 .wpcf7-form-control,
.page-id-378 .contact-form-shortcode .wpcf7 .form-control{
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.4;
  color: #111;
  background: #fff;
  border: 1px solid #cfd8e3;
  border-radius: 3px;
  box-shadow: none;
  appearance: none;
}

/* input高さ */
.page-id-378 .contact-form-shortcode .wpcf7 input[type="text"],
.page-id-378 .contact-form-shortcode .wpcf7 input[type="email"],
.page-id-378 .contact-form-shortcode .wpcf7 input[type="tel"]{
  height: 42px;
}

/* textarea高さ（お手本寄せ） */
.page-id-378 .contact-form-shortcode .wpcf7 textarea{
  min-height: 230px;
  resize: vertical;
}

/* 送信ボタン（お手本：赤・中央・大きめ） */
.page-id-378 .contact-form-shortcode .wpcf7 input[type="submit"],
.page-id-378 .contact-form-shortcode .wpcf7 .wpcf7-submit{
  display: block;
  width: 220px;
  height: 60px;
  margin: 26px auto 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #e60012;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: none;
}

.page-id-378 .contact-form-shortcode .wpcf7 input[type="submit"]:hover{
  filter: brightness(.92);
}

/* スピナーの位置（ボタン横に出るので整える） */
.page-id-378 .contact-form-shortcode .wpcf7 .wpcf7-spinner{
  margin-left: 10px;
  vertical-align: middle;
}

/* 完了/エラーメッセージ幅 */
.page-id-378 .contact-form-shortcode .wpcf7 .wpcf7-response-output{
  margin: 16px auto 0;
  max-width: 720px;
}

.page-id-378 .contact-form-shortcode .wpcf7 .wpcf7-not-valid-tip{
  margin-top: 8px;
  font-size: 12px;
}

/* ---------- SP ---------- */
@media (max-width: 767px){
  .page-id-378 .contact-form-shortcode{
    max-width: none;
    padding-left: 16px;
    padding-right: 16px;
  }

  .page-id-378 .contact-form-shortcode .wpcf7 form > p{
    margin-bottom: 22px;
  }

  .page-id-378 .contact-form-shortcode .wpcf7 input[type="submit"],
  .page-id-378 .contact-form-shortcode .wpcf7 .wpcf7-submit{
    width: 200px;
    height: 56px;
  }
}