/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/
/* フォーム全体のベースフォント */
   .hs-form,.hs-form * { 
font-family: "Noto Sans JP",
"Yu Gothic",               
"游ゴシック体",               
system-ui,               
-apple-system,               
BlinkMacSystemFont,               
"Segoe UI",               
sans-serif; 
box-sizing: border-box;
line-height: 1.5; 
}

/* 各フィールドのラッパー行 */
.hs-form .hs-form-field {
  margin-bottom: 16px;
}

/* ラベル */
.hs-form .hs-form-field label {
  display: block;
  margin-bottom: 4px;
  font-size: 18px;
}

/* 入力欄*/
.hs-fieldtype-textarea.hs-input {
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 20px;
  line-height: 1.4;
}

/* ▼ ヘルプテキスト（説明文）を読みやすくする部分 ▼ */
/* ここをメインで調整してください */
.hs-form .hs-field-desc {
  display: block; 　/* インライン要素でも確実に改行させる */
  margin-top: 10px;  /* フィールドとの間に余白 */
  font-size: 12px;  /* 少し小さめの説明テキスト */
  line-height: 1.8;  /* 行間を広めに */
  color: #666;  /* 本文よりやや薄いグレー */
  white-space: normal;  /* 折り返しを有効にして「詰まり」を防ぐ */
}

/* エラー文言も読みやすく */
.hs-form .hs-error-msgs,.hs-form .hs-error-msg {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: #c0392b;}

/* 送信ボタン 
.hs-form .hs-button {
  display: inline-block;
  padding: 10px 18px;
  background-color: #0052cc;
  color: #fff;
  border-radius: 4px;
  border: none;
  font-size: 14px;
  cursor: pointer;
} */

/* 送信ボタン
[data-hsfc-id=Renderer] .hsfc-Button {
  font-size: none !impotant;　font-weight: bold;
}*/

/*チェックボックスを大きく*/
input[type="checkbox"]{
  transform:scale(1.5);
}


/*本文入力画面を大きく*/
.hs-fieldtype-textarea.hs-input {
  min-height: 200px;
 height: 300px; /* Adjust height as needed, e.g., 20px per line */
  max-height: 350px; 
}



/*ドロップダウンの選択肢の文字の大きさを大きく
[data-hsfc-id=Renderer] .hsfc-DropdownOptions__List__ListItem{
  font-size: 20px;
}

/*文字を大きくする
abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, pre, q, samp, section, small, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
  font-size:100% !important;
}


/*ファイルを選択ボタン
[data-hsfc-id=Renderer] .hsfc-FileInput{
  font-size:100% !important;
}*/


 /* フォーム内リッチテキストの白いハイライト背景を透明にする */
form span[style*="background-color"],form mark {  
  background-color: transparent !important;
} 
 
/* PC表示時：このフォーム内の説明画像だけを少し小さくする */
@media (min-width: 992px) {  #hs_form_target_widget_1770971973118-3056783693941.hsfc-LinkImage img { max-width: 600px;  height: auto;  margin: 0 auto;  }
}

/* フォーム送信ボタンの色を変更 */
.hs-form input[type="submit"] {  background-color: #0075bd;  color: #ffffff; border: none;      /* 枠線を完全になしにする */
  outline: none;     /* フォーカス時のアウトラインも消したい場合 */　}
.hs-form input[type="submit"]:hover {background-color: #0E5680;}
.hs-form input[type="submit"],.hs-form .hs-button.primary {  font-weight: bold; margin-top: 16px;}  


/*2026.06.23add ファイルアップロードボタンの改修*/
/* ==========================================================================
   1. ファイル入力（input）本体を任意のデザインに変形させる
   ========================================================================== */
.hs-form .hs-field, 
.hs-form .hs-input:not([type="checkbox"]):not([type="radio"]) {
  height: auto !important; /* 高さを自動調整にして潰れるのを防ぐ */
}

.hs-form .hs-field.hs_file_upload { /* ファイルアップロードの親要素ピンポイント */
  overflow: visible !important;   /* はみ出た文字や影を隠さない */
  margin-bottom: 24px !important;  /* 下の項目との間に余裕を持たせる */
}

input[type="file"].hs-input {
  /* 1. ブラウザの標準スタイルを完全にリセット */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  border: none;
  outline: none;

  /* 2. ボタン全体のサイズと配置の調整 */
  display: inline-flex !important; /* 文字を上下左右の中央に寄せるため flex に変更 */
  align-items: center;
  justify-content: center;
  width: 320px !important;         /* 画面いっぱいから、任意のサイズ（例: 320px）に制限 */
  max-width: 100%;                 /* スマホなどの画面幅からはみ出さないように安全策 */
  padding: 16px 32px;              /* しっかり大きく見せるための上下左右の余白 */
  cursor: pointer;

  /* 3. 背景と文字（白）の設定 */
  background-color: #FF7C80;       /* コーポレートカラーベースの場合は#003D6D */ 
  color: #ffffff;
  font-size: 1.25rem;              /* 文字を大きく */
  font-weight: bold;               /* 太字 */
  text-align: center;              /* 文字を中央寄せ */
  border-radius: 8px;              /* 角丸 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 軽い影 */

  /* 4. 元のブラウザ標準テキスト（「選択されていません」等）を隠す設定 */
  overflow: hidden;
  white-space: nowrap;
  
  /* アニメーションを滑らかにする設定 */
  transition: background-color 0.2s, transform 0.1s;
}

/* ==========================================================================
   2. 【追加】ボタンの内部に「ファイルを選択してください」という文字を表示
   ========================================================================== */

/* 補足：ブラウザ標準のテキスト（「選択されていません」等）を完全に非表示化 */
input[type="file"].hs-input {
  position: relative;
  color: transparent !important;
  font-size: 0 !important;
}

/* 初期表示：ファイルが選択されていないとき */
input[type="file"].hs-input::before {
  content: "写真を選択する";
  color: #ffffff;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: 2.0rem !important;
  font-weight: bold;
  
  /* ★文字の開始位置を調整 */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);    /* 上下中央揃え */
  left: 36px;                     /* 左端からの距離を設定（ここで開始位置を調整できます） */
  text-align: left;               /* 左詰めに変更 */
  width: calc(100% - 72px);       /* 右側の余白も確保 */
  
  text-indent: 0;
}

/* アップロード後：JavaScriptで「has-file」クラスがついたとき */
input[type="file"].hs-input.has-file::before {
  content: attr(data-file-name);
}

/* ==========================================================================
   3. ブラウザ標準の「ファイル選択ボタン」自体を非表示にする
   ========================================================================== */
/* ChromeやEdgeなど用 */
input[type="file"].hs-input::-webkit-file-upload-button {
  display: none !important;
}
/* Firefoxや新しいブラウザ用 */
input[type="file"].hs-input::file-selector-button {
  display: none !important;
}

/* ==========================================================================
   4. マウス操作時の演出（ホバー・クリック）
   ========================================================================== */
/* マウスを乗せた時の演出 */
input[type="file"].hs-input:hover {
  background-color: #B00004;  /* コーポレートカラーベースの場合は#003D6D */ 
}

/* クリックした時の演出 */
input[type="file"].hs-input:active {
  transform: scale(0.98);
}

/* デフォルト画像のサンプル表示用（初期表示は非表示。リッチテキストのdiv IDをここに定義します） */
#hs_cos_wrapper_widget_1783248780556 img {
  display: none !important;
}

/*****************************************/
/* Start your style declarations here    */
/*****************************************/