/* ===== Marketoフォーム共通スタイル ===== */
.mktoForm label.mktoLabel,
.mktoForm .mktoLabel span {
    font-family: "Noto Sans JP", sans-serif;
}
 

/* Marketoフォーム全体の横幅をリセットし、親要素の幅に合わせる */
.mktoForm {
    /* インラインスタイルを上書きし、幅の異常な引き伸ばしを解消 */
    width: auto !important; 
    max-width: 100% !important; /* 画面からはみ出さないように制限 */
}




.mktoForm .mktoFormRow {
  display: block; /* 1カラムに統一 */
  width: 100%;
  margin-bottom: 16px;
}


.mktoForm .mktoFormCol {
  width: 100% ;
  display: block !important;
}


.mktoForm label.mktoLabel {
  font-size: 14px;
  font-weight: 600;
  color: #262626;
  display: block;
  margin-bottom: 6px;
}


.mktoForm input.mktoField,
.mktoForm select.mktoField,
.mktoForm textarea.mktoField {
　display: block !important;
  width: 600px;
  border: 1px solid #acacac;
  border-radius: 4px;
  padding: 10px 12px !important;
  font-size: 14px;
  transition: border-color 0.2s;
}






.mktoForm select.mktoField {
  color: #898989; 
}


.mktoForm input.mktoField:focus,
.mktoForm select.mktoField:focus,
.mktoForm textarea.mktoField:focus {
  border-color: #5793F1; /* MBブルー */
  outline: none;
  
}


/* チェックボックスやラジオの整形 */


.mktoForm .mktoCheckboxList {
  display: flex;           /* 横並び */
  align-items: center;     /* チェックボックスと文字を縦中央 */
  margin-bottom: 8px;      /* 下に長文との余白 */
  width: auto;
}


/* チェックボックス行専用：左のオフセットを削除 */
.mktoForm .mktoCheckboxList label {
  margin-left: 4px !important; 
}


.mktoForm .mktoCheckboxList {
  padding-left: 0 !important; /* ← チェックボックスリスト全体の左余白を削除 */
  margin-left: 0 !important;  /* ← 念のためmarginも削除 */
}


.mktoForm .mktoCheckboxList input[type="checkbox"] {
  margin-left: 0 !important; /* ← 個別のinputにも左余白があれば削除 */
}


.mktoForm .mktoCheckboxList input[type="checkbox"] {
  margin-right: 6px !important; 
}


.mktoForm .mktoCheckboxList input[type="checkbox"] {
  border: 1px solid #898989 !important; /* ← チェックボックスの枠線色を指定 */
   border-radius: 3px;
  background-color: #fff;
  transform: scale(1.4); /* ← チェックボックスのサイズを1.4倍に */
}
















.mktoForm #Lblsend_approval {
  margin-top: 0;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.6;
    display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
}








/* ※マークの位置を修正 */
.mktoForm #Lblsend_approval .mktoAsterix {
  position: static !important;
  display: inline-block !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  margin: 0 !important;
}


.mktoForm .mktoFormRow:has(#send_approval) {
  margin-bottom: 1px !important;
}




/* ボタン */
.mktoForm .mktoButtonRow {
  text-align: center;
  margin-top: 10px;
}


.mktoForm .mktoButtonWrap {
  display: inline-block;
}


.mktoForm button.mktoButton {
  background-color: #0044a3; /* MBブルー */
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  padding: 12px 32px;
  cursor: pointer;
  transition: background-color 0.3s;
}


.mktoForm button.mktoButton:hover {
  background-color: #002252;
}


.mktoForm .mktoButtonRow .mktoButton {
  width: 200px ; 
}






/* リンク部分も合わせて調整 */
.mktoForm .mktoLabel span a {
  font-weight: 400;
  color: #0044a3;
}






/* ツールチップアイコン */
.mktoForm .tooltip-icon {
  display: inline-block;          /* 横並び */
  margin-left: 6px;               /* ラベルとの間隔 */
  cursor: pointer;
  position: relative;
  background-color: #F2F2F2;      /* 丸い背景色 */
  color: #333;                     /* 文字色を白に */
  border-radius: 50%;              /* 丸くする */
  font-size: 12px;
  vertical-align: middle;          /* ラベルと中央揃え */
  border: none;                    /* 枠線をなくす */
  font-weight: bold;               /* 文字を少し強調 */
  text-align: center;              /* 丸の中で中央揃え */
  width: 18px;                     /* 丸の幅 */
  height: 18px;                    /* 丸の高さ */
  position: relative;
}


.mktoLabel {
  width: auto !important;
  display: block; /* もしくは inline-block */
}


/* ラベルをブロック表示に */
.mktoFormRow .mktoLabel {
  display: block;
  margin-bottom: 4px;
  font-weight: 400;
  font-size: 7px;
}




/* ツールチップテキスト */
.mktoForm .tooltip-icon .tooltip-text {
  visibility: hidden;
  width: 360px;
  background-color: #F2F2F2 ;
  color: #262626 ;
  text-align: left;
  border-radius: 6px;
  padding: 10px;
  font-size: 10px ;
  position: absolute;
  z-index: 10;
  bottom: 150%;
  left: 50%;
  margin-left: -125px;
  opacity: 0;
  transition: opacity 0.3s;
  font-weight: normal;
  white-space: normal; /* 改行可能に */
  line-height: 1.4;
}

/* SP（スマホサイズ）でツールチップ幅変更 */
@media screen and (max-width: 767px) {
  .mktoForm .tooltip-icon .tooltip-text {
    width: 320px !important;
    margin-left: -240px; /* 50%位置から中央寄せするため半分の数値に調整 */
  }
}


/* ホバーで表示 */
.mktoForm .tooltip-icon:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}


/* ツールチップの矢印 */
.mktoForm .tooltip-icon .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 75%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #F2F2F2 transparent transparent transparent;
}


/* 上部のスペースの削除 */
.mktoForm .mktoFormRow:has(input[type="hidden"]) {
  margin-bottom: 0 !important;
  padding: 0 !important;
}




/* width/height/font-size をゼロにし、文字として表示されるのを防ぐ */
.mktoForm .mktoAsterix {
    display: inline-block !important;
    visibility: hidden !important; 
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    font-size: 0 !important; /* 文字を非表示にするための決定的な指示 */
    margin: 0 !important;
    padding: 0 !important;
}


/* .mktoRequiredField クラスは必須フィールドの行全体につきます */
.mktoForm .mktoRequiredField label.mktoLabel {
    display: inline-block !important; /* ラベルと「必須」マークを横並びにする */
    width: 100% !important; 
}


.mktoForm .mktoRequiredField label.mktoLabel::after {
    content: "必須"; 
    
    /* 装飾と配置 */
    display: inline-block;
    vertical-align: top;
    margin-left: 8px; 
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 500;
    color: #B52723;
    line-height: 1.2;
}




/* チェックボックスやラジオの整形 */
.mktoForm .mktoCheckboxList {
  flex-direction: row-reverse; /* 順序を逆転 */
  justify-content: flex-start; /* 左寄せを維持（お好みで調整） */
}
/* チェックボックスと「同意する」の間隔を縮める */
.mktoForm .mktoLogicalField.mktoCheckboxList {
     margin-top: 8px !important; 
  width: auto !important;
}


.mktoForm .mktoLabel {
  margin-left: 0 !important;
}




.mktoForm .mktoFieldWrap:has(#Lblsend_approval){
    display: flex;
    align-items: center;
    width: auto;
    flex-direction: row-reverse;
    justify-content: flex-start;
}




.mktoForm .mktoFieldWrap:has(#Lblsend_approval) {
  display: flex !important;
  flex-direction: row-reverse !important; /* 順序はそのまま維持 */
  align-items: center !important;
  justify-content: left !important; 
  margin-left: 0 !important;
  padding-left: 0 !important;
}








/* ガターの非表示 */
.mktoForm .mktoGutter {
    display: none !important;
}




/* ===== 項目名をテキストボックス上に表示 ===== */
.mktoForm label.mktoLabel {
  display: block;       /* ボックスの上に積む */
  margin-bottom: 6px;   /* テキストボックスとの間隔 */
  font-weight: 600;
  font-size: 14px;
  color: #333;
}






/* テキストボックス自体のスタイル */
.mktoForm input.mktoField,
.mktoForm textarea.mktoField,
.mktoForm select.mktoField {
  width: 100%;          /* ラベル幅に合わせる */
  border: 1px solid #acacac;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 14px;
  box-sizing: border-box;
}




/* 個人情報のテキストのスタイル */
.mktoForm .mktoHtmlText p {
  line-height: 1.4; 
}


.mktoForm .mktoHtmlText a {
  color: #0044a3;
}


.mktoForm .mktoHtmlText a:hover {
  color: #002252; 
}






/* 送信ボタンのスタイル */
.mktoForm  button.mktoButton {
  background-color: #0044a3; 
  color: #fff;
  font-weight: 800;
  border: none;
  transition: background-color 0.3s ease;
}




.mktoForm .mktoButton:hover {
  background-color: #002252; /*  ホバー時の色 */
}

/* ===== 左余白の調整 ===== */
.mktoForm .mktoOffset {
  display: none ;
  width: 0;
  margin: 0 ;
  padding: 0 ;
}



/* エラーを入力欄のすぐ下に固定表示（枠の高さを崩さない） */
.mktoForm .mktoError {
    position: absolute !important;  /* 相対位置は残す */
    left: 0 !important;             /* 左揃え */
    top: 100% !important;           /* 入力欄の真下 */
    right: auto !important;
    bottom: auto !important;
    margin: 4px 0 0 0;              /* 少し間隔を空ける */
    display: block !important;
    z-index: 10;                     /* 他の要素より前面に表示 */
}



/*SP*/
@media screen and (max-width: 768px) {
  .mktoForm select.mktoField{
  font-size: 14px !important; 
    box-sizing: border-box !important;
    padding: 8px 8px !important;
  }
  .mktoForm input.mktoField,
  .mktoForm textarea.mktoField {
    padding: 16px 10px !important;
    font-size: 14px !important;


    box-sizing: border-box !important;
  }
}