/* ==========================================================
   ピークキューブLP  V-CUBE サイト準拠の指定
   ----------------------------------------------------------
   jp.vcube.com（コーポレートHP・現行ピークキューブLP）から取り込んだ
   ブランド色・本文の基本・リンク色・アイコン・「Q.」・フッター。
   LPのデザインは styles.css。このファイルは styles.css の後に読み込む。
   ========================================================== */


/* ---- ブランド色 ---- */
:root{
 --text:#494949;            /* 本文：HP準拠 */
 --ink:#333;                /* 見出し・強調：本文より一段濃く */
 --muted:#6b6b6b;           /* 補足：本文より一段淡く（#f6f6f6上でも4.5:1以上） */
 --orange:#e86800;          /* 白地の文字・リンク */
 --brand:#f49008;           /* ブランドオレンジ：線・アイコン */
 --brand-deep:#e86800;      /* ボタン・強調 */
 --brand-soft:#fff4e6;
}


/* ---- 本文の基本 ---- */
/* HPの body 指定を適用。min-width:980px / padding:0 10px はPC専用サイト前提のため不採用 */
body{
 -webkit-text-size-adjust:100%;text-size-adjust:100%;
 background-color:#fff;color:var(--text);
 font-family:"Hiragino Sans","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS P Gothic",sans-serif;
 line-height:var(--lh-body);letter-spacing:.04em;
 font-size:var(--fs-base)
}

/* テキストリンク */
.text-link{color:var(--orange)}
.text-link:hover{color:#9e4700}

/* アイコン：HPの白丸＋線画 */
.icon-box{border-radius:50%;background:#fff;color:var(--brand);box-shadow:0 4px 14px #f4900826;border:1px solid #fbe3c4}


/* ==========================================================
   FAQ：HPの「Q.」
   ========================================================== */
.faq-q{color:var(--brand)}
.faq-q:after{content:"."}


/* ==========================================================
   フッター：現行ピークキューブLP準拠（V-CUBEロゴ＋社名／右にSNS／右下にコピーライト）
   ========================================================== */
.site-footer{padding:28px 0 24px;border-top:1px solid var(--line);background:#fff}
.footer-inner{display:block}
.footer-main{display:flex;align-items:center;gap:28px}
.footer-vcube{display:block;flex-shrink:0}
.footer-vcube img{display:block;width:140px;height:auto}
.footer-company{margin:0;padding:0;border:0;font-size:var(--fs-sm);font-weight:400;color:var(--text)}
.footer-sns{display:flex;gap:12px;margin:0 0 0 auto;padding:0;list-style:none}
.footer-sns a{display:block;border-radius:50%;transition:opacity .2s}
.footer-sns a:hover{opacity:.7}
.footer-sns img{display:block;width:30px;height:30px}
.footer-bottom{display:flex;justify-content:flex-end;align-items:center;gap:20px;margin-top:14px}
.footer-copy{font-size:var(--fs-sm);color:var(--text)}
.footer-bottom .plain-btn{font-size:var(--fs-xs);color:var(--muted)}
@media(max-width:760px){
 .site-footer{padding:24px 0 90px}
 .footer-main{flex-wrap:wrap;gap:12px 18px}
 .footer-vcube img{width:120px}
 .footer-sns{margin-left:auto}
 .footer-company{order:3;width:100%}
 .footer-bottom{justify-content:flex-start;flex-wrap:wrap;gap:8px 16px}
}

/* ==========================================================
   HubSpot テンプレート部品（フォーム・フッター）
   ----------------------------------------------------------
   編集領域の外にあるテンプレートのフォームモジュール（#lp_promotion_form_settings）と
   フッター（#lp_promotion_footer）用。旧 load-test/css/style.css のフォーム指定を移植し、
   色・ボタンを今回のデザインに合わせた。
   ========================================================== */
  

#hs_cos_wrapper_lp_promotion_form_settings{
  display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
}
  #lp_promotion_form_settings h2{
   color: var(--ink);
   font-size: var(--fs-2xl);
  font-weight: 700;   
  margin-bottom: 16px;
  }
  #lp_promotion_form_settings{
      padding: 56px 40px 0;   /* 上：お問い合わせの帯との間をあける */
  padding-bottom: 80px;
  width: 100%;
  max-width: 1280px;
}

#lp_promotion_form_settings header{
  margin-bottom: 24px;
}

#lp_promotion_form_settings .hbspt-form{
  max-width: 800px;
  width: 100%;
}
#contactform,
#contactform label{
  background-color: transparent!important;
}
#contactform .container{
  display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}

#lp_promotion_form_settings span#hs_cos_wrapper_lp_promotion_form_settings_{
  display:block;
  max-width: 800px;
  width: 100%;
  font-size: 14px;
}
#lp_promotion_form_settings span#hs_cos_wrapper_lp_promotion_form_settings_ form fieldset{
  margin-bottom: 16px;
  max-width: none;
}
#lp_promotion_form_settings span#hs_cos_wrapper_lp_promotion_form_settings_ form  fieldset input, 
#lp_promotion_form_settings span#hs_cos_wrapper_lp_promotion_form_settings_ form  fieldset select, 
#lp_promotion_form_settings span#hs_cos_wrapper_lp_promotion_form_settings_ form  fieldset textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #666;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 14px;
}
#lp_promotion_form_settings span#hs_cos_wrapper_lp_promotion_form_settings_ form  fieldset input:focus, 
#lp_promotion_form_settings span#hs_cos_wrapper_lp_promotion_form_settings_ form  fieldset select:focus, 
#lp_promotion_form_settings span#hs_cos_wrapper_lp_promotion_form_settings_ form  fieldset textarea:focus {
  border-color: var(--brand); /* フォーカス時のカラー強調 */
  box-shadow: 0 0 0 3px rgba(244, 144, 8, .2);
  outline: none;
}
.hs-fieldtype-select .input{
  position: relative;
}

.hs-fieldtype-booleancheckbox .input label{
  display: flex;
  align-items: center;
}
#lp_promotion_form_settings span#hs_cos_wrapper_lp_promotion_form_settings_ form  fieldset select{
  -webkit-appearance: none; /* SafariのデフォルトUIを無効化 */
  -moz-appearance: none; /* FirefoxのデフォルトUIを無効化 */
  appearance: none; /* モダンブラウザ向け */
  padding: 10px;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}
.hs-fieldtype-select .input::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 5px solid #666666;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  pointer-events: none;
}

#lp_promotion_form_settings span#hs_cos_wrapper_lp_promotion_form_settings_ form fieldset textarea {
  resize: none;
  height: 80px;
}

#lp_promotion_form_settings span#hs_cos_wrapper_lp_promotion_form_settings_ form fieldset input[type="checkbox"] {
  margin-right: 5px;
  position: relative;
  width: 12px;
  height: 12px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
#lp_promotion_form_settings span#hs_cos_wrapper_lp_promotion_form_settings_ form fieldset input[type="checkbox"]:checked{
    background-color:var(--brand-deep)!important;
}
#lp_promotion_form_settings span#hs_cos_wrapper_lp_promotion_form_settings_ form fieldset input[type="checkbox"]:checked:before {
  position: absolute;
  top: 1px;
  left: 5px;
  transform: rotate(50deg);
  width: 6px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  content: '';
}


#lp_promotion_form_settings .hs_submit .actions{
  background-color: transparent !important;
  text-align: center;
}
.hs-button{
  display: inline-block;
  min-height: 55px;
  padding: 14px 40px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: linear-gradient(96.84deg,#f5841c 0%,#ea6a00 50%,#d45a00 100%) 0 0/200% 100% no-repeat border-box;
  box-shadow: 0 6px 14px rgba(234,106,0,.2);
  color: #fff;
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.6;
  text-decoration: none;
  transition: background-position .4s ease, box-shadow .2s ease, transform .2s ease;
}
.hs-button:hover,
.hs-button:focus-visible{
  background-position: 100% 0;
  box-shadow: 0 2px 6px rgba(234,106,0,.26);
  transform: translateY(2px);
  cursor: pointer;
}
.hs-error-msgs{
  font-size: 12px;
}

.submitted-message{
  text-align: center;
    font-weight: bold;
    margin: 20px 0;
}

/* フッター：SNS のリストに黒丸が出ないように（旧 reset.css が担っていた指定） */
#lp_promotion_footer ul{margin:0;padding:0;list-style:none}
@media(max-width:760px){#lp_promotion_form_settings{padding:40px 20px 56px}}

/* ---- お問い合わせの右枠に移したとき（app.js が #contact-form-slot へ移動）：確認用フォームと同じ見た目に ---- */
#contact-form-slot #hs_cos_wrapper_lp_promotion_form_settings{display:block}
#contact-form-slot #lp_promotion_form_settings{max-width:none;padding:0}
#contact-form-slot #lp_promotion_form_settings #contactform .container{display:block}
#contact-form-slot #lp_promotion_form_settings #contactform header{display:none}   /* 見出しは左の「そのアクセス集中、…」で足りる */
#contact-form-slot #lp_promotion_form_settings .hbspt-form,
#contact-form-slot #lp_promotion_form_settings span#hs_cos_wrapper_lp_promotion_form_settings_{max-width:none;width:100%;font-size:var(--fs-base)}
/* 項目：ラベルは太字、右に「必須」バッジ */
#contact-form-slot #lp_promotion_form_settings .hs-form-field{margin-bottom:17px}
#contact-form-slot #lp_promotion_form_settings .hs-form-field>label{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px;
 color:var(--ink);font-size:var(--fs-base);font-weight:700;line-height:1.5}
#contact-form-slot #lp_promotion_form_settings .hs-form-required{font-size:0;color:transparent}
#contact-form-slot #lp_promotion_form_settings .hs-form-required:before{content:"必須";display:inline-block;padding:6px 4px;border-radius:3px;
 background:var(--brand-deep);color:#fff;font-size:var(--fs-xs);font-weight:700;line-height:1;letter-spacing:.08em;white-space:nowrap}
#contact-form-slot #lp_promotion_form_settings .hs-field-desc{margin:0 0 6px;color:var(--muted);font-size:var(--fs-xs)}
/* 入力欄 */
#contact-form-slot #lp_promotion_form_settings span#hs_cos_wrapper_lp_promotion_form_settings_ form fieldset{max-width:none;margin-bottom:0}
#contact-form-slot #lp_promotion_form_settings span#hs_cos_wrapper_lp_promotion_form_settings_ form fieldset.form-columns-2{display:grid;grid-template-columns:1fr 1fr;gap:0 17px}
#contact-form-slot #lp_promotion_form_settings form fieldset.form-columns-2 .hs-form-field{float:none;width:auto}
#contact-form-slot #lp_promotion_form_settings form fieldset .input{margin-right:0}
#contact-form-slot #lp_promotion_form_settings span#hs_cos_wrapper_lp_promotion_form_settings_ form fieldset input:not([type="checkbox"]):not([type="radio"]),
#contact-form-slot #lp_promotion_form_settings span#hs_cos_wrapper_lp_promotion_form_settings_ form fieldset select,
#contact-form-slot #lp_promotion_form_settings span#hs_cos_wrapper_lp_promotion_form_settings_ form fieldset textarea{
 width:100%;min-height:44px;padding:10px 11px;border:1px solid #bcc8d0;border-radius:5px;background:#fff;color:var(--ink);font-size:var(--fs-base);line-height:1.7}
#contact-form-slot #lp_promotion_form_settings span#hs_cos_wrapper_lp_promotion_form_settings_ form fieldset textarea{height:auto;min-height:105px;resize:vertical}
#contact-form-slot #lp_promotion_form_settings span#hs_cos_wrapper_lp_promotion_form_settings_ form fieldset input:focus,
#contact-form-slot #lp_promotion_form_settings span#hs_cos_wrapper_lp_promotion_form_settings_ form fieldset select:focus,
#contact-form-slot #lp_promotion_form_settings span#hs_cos_wrapper_lp_promotion_form_settings_ form fieldset textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(244,144,8,.2);outline:none}
#contact-form-slot #lp_promotion_form_settings .hs-input::placeholder{color:#8c8c8c}
/* 同意・注記・エラー */
#contact-form-slot #lp_promotion_form_settings .legal-consent-container,
#contact-form-slot #lp_promotion_form_settings .hs-richtext{color:var(--text);font-size:var(--fs-sm);line-height:1.7}
#contact-form-slot #lp_promotion_form_settings .legal-consent-container a,
#contact-form-slot #lp_promotion_form_settings .hs-richtext a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
#contact-form-slot #lp_promotion_form_settings .hs-form-booleancheckbox-display{display:flex;align-items:center;gap:10px;font-weight:500;color:var(--ink)}
#contact-form-slot #lp_promotion_form_settings span#hs_cos_wrapper_lp_promotion_form_settings_ form fieldset input[type="checkbox"]{flex-shrink:0;width:20px;height:20px;margin:0;border:1px solid #bcc8d0;border-radius:4px;background:#fff}
#contact-form-slot #lp_promotion_form_settings span#hs_cos_wrapper_lp_promotion_form_settings_ form fieldset input[type="checkbox"]:checked:before{top:2px;left:6px}
#contact-form-slot #lp_promotion_form_settings .hs-error-msgs{margin:6px 0 0;padding:0;list-style:none;font-size:var(--fs-xs)}
#contact-form-slot #lp_promotion_form_settings .hs-error-msgs label{color:#d93025;font-weight:500}
/* 送信ボタン：枠いっぱい */
#contact-form-slot #lp_promotion_form_settings .hs_submit{margin-top:8px}
#contact-form-slot #lp_promotion_form_settings .hs_submit .actions{padding:0;margin:0}
#contact-form-slot #lp_promotion_form_settings .hs-button{width:100%}
#contact-form-slot #lp_promotion_form_settings .submitted-message{margin:0;padding:24px 0;color:var(--ink)}
/* フィールドセットの既定の枠・余白（旧 reset.css が消していたもの）と、同意欄のリスト記号を消す */
#contact-form-slot #lp_promotion_form_settings form fieldset{border:0;padding:0;margin:0;min-width:0}
#contact-form-slot #lp_promotion_form_settings .inputs-list{margin:0;padding:0;list-style:none}
/* HubSpot の項目にも .field が付き、確認用フォームの指定（ラベルの左右寄せ・入力欄の高さ）が掛かるため同意欄だけ戻す */
#contact-form-slot #lp_promotion_form_settings label.hs-form-booleancheckbox-display{justify-content:flex-start;margin:0;cursor:pointer}
#contact-form-slot #lp_promotion_form_settings span#hs_cos_wrapper_lp_promotion_form_settings_ form fieldset input[type="checkbox"]{min-height:0;padding:0}
#contact-form-slot #lp_promotion_form_settings .hs-form-booleancheckbox-display .hs-form-required:before{margin-left:8px}
#contact-form-slot #lp_promotion_form_settings .legal-consent-container .hs-richtext{margin-bottom:10px}
@media(max-width:760px){
 #contact-form-slot #lp_promotion_form_settings span#hs_cos_wrapper_lp_promotion_form_settings_ form fieldset.form-columns-2{gap:0 12px}
}