@charset "utf-8";

    .calculation_tool_body *,
    .calculation_tool_body *::before,
    .calculation_tool_body *::after {
        box-sizing: content-box; /* デフォルト値に戻す */
    }

 .consolation_tool_options button:focus {
  outline: 0; }
    
    .calculation_tool_body {
      text-align: center;
      margin: 0;
      padding: 0;
      line-height: 1em;
      justify-content: center; /* 左右中央に揃える */
      font-family: noto sans-serif;
      font-size: 20px; }
      
      .calculation_tool_tool_main_form {
        margin: 0 auto; /* 左右の中央に配置 */
        max-width: 800px; /* コンテンツの最大幅を指定 */
        padding: 20px;
        display: grid;
        justify-content: center; /* 左右中央に配置 */
        align-items: center; /* 上下中央に配置 */
        text-align: center; /* テキスト中央揃え */
      }


.consolation_tool_form_wrapper form input[type="date"] {
  width: 140px; /* 幅を100%に設定して揃える */
  height: 25px;
  margin-bottom: 20px; /* 下部にスペースを追加 */
  display: inline-flex;
  padding: 0px 10px;
}

/* ラベルと入力フィールドを縦に並べる */
.consolation_tool_form_wrapper form label {
  display: block;
  margin-bottom: 20px;
}

.consolation_tool_form_wrapper form input[type="number"] {
  margin: 0 auto 20px; /* 下にスペースを設け、中央揃えにする */
  width: 140px;        /* 幅を調整 */
  height: 25px;
  font-size: 16px;
  display: inline-block !important;
}

.consolation_tool_form_wrapper form input[type="button"] {
  background-color: #ff9c46;
  color: white;
  font-size: 16px;
  font-family: noto sans-serif;
  border: none;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 50px;
  margin: 15px 0 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* 立体感を出すための影 */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* ホバー時のアニメーション */
}

.consolation_tool_form_wrapper form input[type="button"]:hover {
  background-color: #fa8e2f; /* ホバー時に少し濃い色に */
  transform: translateY(-2px); /* ホバー時に少し浮く効果 */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4); /* ホバー時の影を深く */
}

.consolation_tool_form_wrapper form input[type="button"]:active {
  transform: translateY(2px); /* クリック時に押し込まれる効果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* クリック時の影を浅く */
}

/* ラベルのスタイル */
.consolation_tool_form_wrapper label {
  font-size: 20px;
  font-family: noto sans-serif;
  margin: 0;
  display: block;
  color: #707070 !important;
  background-color: #F3F3F3;
  padding: 10px;
  border-top: 1px solid #707070;
  border-bottom: 1px solid #707070;
}

/* フォームのスタイル */
.consolation_tool_form_wrapper form {
  background-color: white;
  border: 1px solid #707070;
  margin: 0 auto;
  max-width: 350px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 0;
  box-sizing: border-box;
}

.custom-tool-image {
  width: calc(100% - 4px);
  max-width: 370px;
  border: 2px solid #ccc;
  margin-bottom: -2px;
}

.consolation_tool_form_wrapper {
    display: flex;
    flex-direction: column; /* 縦方向に並べる */
    align-items: center; /* 中身を左右中央に配置 */
    justify-content: center; /* 上下中央に配置 */
    margin: 0 auto; /* 外側の左右中央揃え */
    padding: 20px; /* 内側に余白を追加 */
  background-color: #FEFFC2; /* 四角い背景の色 */
  padding: 10px; /* フォームとの間に余白を作成 */
  border: 1px solid #707070; /* 四角い背景の境界線 */
  max-width: 380px; /* 内側のフォームよりも少し大きく */
  margin: 0 10px; /* 親要素を中央揃え */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* 外側のボックスシャドウ */
  box-sizing: border-box; /* パディングとボーダーを幅に含める */
}

/* フォームの説明文のスタイル */
.consolation_tool_form_wrapper form p {
  font-size: 15px; /* 説明文のフォントサイズ */
  font-family: noto sans-serif;
  color: #707070; /* 説明文の文字色 */
  margin: 10px 10px; /* 下部の余白を追加 */
  text-align: left; /* 文字を左詰めにする */
}

.consolation_tool_space p {
  font-size: 15px; /* 説明文のフォントサイズ */
  font-family: noto sans-serif;
  line-height: 27px;
  margin: 10px 10px 5px; /* 下部の余白を追加 */
  text-align: left;
  max-width: 380px;
  display: inline-flex;
}

/* 2つの長方形を横並びに配置 */
.consolation_tool_options {
  display: flex; /* Flexboxを使用して横並びに配置 */
  max-width: 400px;
}

/* 各ボックスのスタイル */
.consolation_tool_option_box1 {
  background-color: #FEFFC2 !important; /* ボックスの背景色 */
  padding: 20px; /* ボックス内の余白 */
  border: 2px solid #707070 !important;
  margin: 0 0 -2px 10px;
  width: 50%; /* 各ボックスの幅を50%未満にして並べる */
  text-align: center; /* テキストを中央揃え */
}

.consolation_tool_option_box2 {
  background-color: #DAE3F4 !important; /* ボックスの背景色 */
  padding: 20px; /* ボックス内の余白 */
  width:50%; /* 各ボックスの幅を50%未満にして並べる */
  border: 2px solid #707070 !important;
  margin: 0 10px -2px 0;
  text-align: center; /* テキストを中央揃え */
}

/* ボックス内のテキストスタイル */
.consolation_tool_option_button1 p {
  font-size: 25px;
  font-family: noto sans-serif;
  text-align: center;
  color:#707070 !important;
  margin: 0;
}

.consolation_tool_option_button2 p {
  font-size: 25px;
  font-family: noto sans-serif;
  text-align: center;
  color:#707070 !important;
  margin: 0;
}

.consolation_tool_option_button1 {
  background-color: #FEFFC2 !important; /* ボックスの背景色 */
  padding: 10px 20px; /* ボックス内の余白 */
  border: 3px groove #f7f7f7 !important;
  color: #000000 !important;
  margin: 0px -3px -1px 10px;
  width: 50%; /* 各ボックスの幅を50%未満にして並べる */
  text-align: center; /* テキストを中央揃え */
  font-size: large;
}

.consolation_tool_option_button2 {
  background-color: #DAE3F4 !important; /* ボックスの背景色 */
  padding: 10px 20px; /* ボックス内の余白 */
  border: 3px groove #f7f7f7 !important;
  color: #000000 !important;
  margin: 0px 9px -1px 0px;
  width: 50%; /* 各ボックスの幅を50%未満にして並べる */
  text-align: center; /* テキストを中央揃え */
  font-size: large;
}
/* ラジオボタンを四角いボックスに囲む */
.gender-box {
  display: flex;
  justify-content: center; /* 全体を中央揃え */
  margin: 20px auto; /* 水平に中央に配置 */
  width: fit-content; /* 内容に合わせた幅 */
}

/* 各ラベルのスタイル */
.gender-box label {
  display: flex;
  align-items: center;
  padding: 10px 0px;
  background-color: white;
  border: 1px solid #707070;
  cursor: pointer;
  margin-left: 10px; /* 左側に10pxの余白を追加 */
  margin-right: 10px; /* 右側に10pxの余白を追加 */
}

.wrap .calculation_tool_tool_main_form  {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ラジオボタンを隠す */
.gender-box input[type="radio"] {
  display: none;
}

/* ラジオボタンが選択されたときのスタイル */
.gender-box input[type="radio"]:checked + .gender-label {
  background-color: #FFB56A; /* 選択されたときの背景色 */
  color: white;
  padding: 10px 25px; /* パディングが変わらないように統一 */
  box-sizing: border-box; /* ボックスサイズを固定 */
}

/* ラベルテキストのスタイル */
.gender-label {
  padding: 7px 25px;
}


.options-box {
  display: flex;
  justify-content: center; /* 全体を中央揃え */
  margin: 20px auto; /* 水平に中央に配置 */
  width: fit-content; /* 内容に合わせた幅 */
}

/* 各ラベルのスタイル */
.options-box label {
  display: flex;
  align-items: center;
  background-color: white;
  border: 1px solid #707070;
  padding: 10px 0px;
  cursor: pointer;
  margin: 5px; 
  font-size: 20px;
  line-height: 1em;
  padding: 10px 0px;
}

/* ラジオボタンを隠す */
.options-box input[type="radio"] {
  display: none;
}

.option-label {
  padding: 10px 5px;
}

/* ラジオボタンが選択されたときのスタイル */
.options-box input[type="radio"]:checked + .option-label {
  background-color: #FFB56A; /* 選択されたときの背景色 */
  color: white;
}

/* プルダウンメニューの横幅を調整 */
#grade_detailed {
  justify-content: center; /* 全体を中央揃え */
  margin: 0 auto 20px;; /* 水平に中央に配置 */
  align-items: center;
  padding: 0 10px;
  width: 140px; /* 必要な横幅に調整 */
  height: 25px;
  font-size: 16px; /* フォントサイズも調整可能 */
  border: 1px solid #707070; /* ボーダーのスタイル */
}

.simple-form input[type="date"] {
  appearance: none; /* ブラウザのデフォルトスタイルを無効化 */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: white;
  position: relative;
  padding: 0 10px;
  width: 200px;
  height: 36px;
  border: 0;
  background: transparent;
  box-sizing: border-box;
  font-size: 14px;
  color: #000000;
  border: 1px solid #000000;
  /* その他のスタイル指定 */
}

.simple-form input[type=date]::-webkit-calendar-picker-indicator {
  position: absolute;
  width: 100%;
  height: 100%;
}

.simple-form input[type=date]::-webkit-calendar-picker-indicator {
  /*省略*/
  opacity: 0;
}

/* プルダウンメニューの横幅を調整 */
#blunder_detailed {
  justify-content: center; /* 全体を中央揃え */
  margin: 0 auto 20px;; /* 水平に中央に配置 */
  align-items: center;
  padding: 0 10px;
  width: 140px; /* 必要な横幅に調整 */
  height: 25px;
  font-size: 16px; /* フォントサイズも調整可能 */
  border: 1px solid #707070; /* ボーダーのスタイル */
}

/* プルダウンメニューの横幅を調整 */
#Attendant_detailed {
  margin: 0 auto 20px;; /* 水平に中央に配置 */
  display: flex;
  width: 25px; /* 必要な横幅に調整 */
  height: 25px;
  outline: none;
}
/* テーブル全体のスタイル */
#compensationTable {
  border-collapse: collapse;
  width: 100%;
}

/* ヘッダー部分のスタイル */
#compensationTable th {
  border: 1px solid black;
  text-align: center;
  padding: 8px;
}

/* テーブルのデータセル部分 */
#compensationTable td {
  border: 1px solid black;
  text-align: center;
  padding: 8px;
}

.result-wrapper h2 {
  font-size: 24px; /* 見出しのフォントサイズ */
  margin: 10px; /* 下に余白 */
  color: #333; /* 濃い灰色の文字色 */
  font-family: noto sans-serif;
}

/* 初期は非表示にしておく */
#result, #resultDetailed {
  display: none;
}

/* 慰謝料結果のスタイリング */
.result-wrapper {
  background-color: #f9f9f9;
  padding: 20px;
  border: 12px solid #449646; /* 緑色の縁と太さを指定 */
  max-width: 310px;
  margin: 20px auto;
}

.mwform-checkbox-field span {
  outline: none;
  box-shadow: none;
}


/* 画面幅が400px以下の場合のスタイリング */
@media (max-width: 400px) {
  .result-wrapper {
    padding: 0px;
    margin: 20px 10px;
  }
}

.result-title {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
  padding:10px;
}

@media (max-width: 400px) {
  .result-title {
    padding:20px ;
  }
}


.gender-box label {
  margin-bottom: auto !important; /* 無効化して適切な値に */
  margin-top: auto !important; /* デフォルト値にリセット */
}
.gender-box label:last-child {
  margin-bottom: auto !important; /* 無効化して適切な値に */
  margin-top: auto !important; /* デフォルト値にリセット */
}

.options-box label {
  margin-bottom: auto !important; /* 無効化して適切な値に */
  margin-top: auto !important; /* デフォルト値にリセット */
}
.options-box label:last-child {
  margin-bottom: auto !important; /* 無効化して適切な値に */
  margin-top: auto !important; /* デフォルト値にリセット */
}

#initialResult div {
  margin-bottom: auto !important; /* 無効化して適切な値に */
  margin-top: auto !important; /* デフォルト値にリセット */
}
#initialResult div:first-child {
  margin-bottom: auto !important; /* 無効化して適切な値に */
  margin-top: auto !important; /* デフォルト値にリセット */
}

#resultFormSection {
  margin-top:30px
}


.result-total {
  font-size: 28px;
  font-weight: bold;
  color: #FF5733;
  padding-bottom: 10px;
  font-family: noto sans-serif;
}

.result-details {
  list-style-type: none;
  padding: 15px;
  margin: 10px;
  border-top: 1px solid #449646;
  font-family: noto sans-serif;
}

.result-details li {
  font-size: 18px;
  margin-bottom: 15px;
  color: #333;
}

.result-details li strong {
  color: #555;
  font-weight: 300;
  font-family: noto sans-serif;
}

.result-item {
  display: flex;
  justify-content: space-between; /* 左右に揃える */
  margin: 10px; /* 各項目の間にスペースを追加 */
}

.result-item strong {
  flex: 1; /* 左側の文字をフレックスで左揃え */
  text-align: left;
}

.result-item .amount {
  text-align: right; /* 右側の金額を右揃え */
  min-width: 80px; /* 金額部分の最小幅を設定して右揃えを保つ */
}

.result-subtitle {
  padding-bottom: 20px; /* 内訳の下に10pxのスペースを追加 */
}

.lead_look {
  margin: 50px auto 30px;
  padding: 10px;
  font-size: medium;
  color: #449646;
  border: 2px solid #449646; /* 黒い線で囲む */
  background-color: #f9f9f9; /* 背景色を追加（任意） */
  max-width: 310px;
  text-align: center;
  font-family: noto sans-serif;
}
.calculation_tool_main-container {
  max-width: 330px;
  margin: -24px auto 20px;
  padding: 20px;
  background: url("assets/images/form/tool.png");
  background-size: cover;
  background-position: center;
  border: 2px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.calculation_tool_main_tool_title {
  text-align: center; /* 画像を中央に揃える */
  margin-bottom: 20px;
}

.tool-title-image {
  width: 100%; /* 親要素に合わせて横幅を調整 */
  max-width: 370px; /* 最大幅を330pxに制限 */
  height: auto; /* 画像のアスペクト比を維持 */
  border: 2px solid #ccc;
}

.calculation_tool_body, 
.calculation_tool_body *:before, 
.calculation_tool_body *:after {
    box-sizing: initial !important;
    -webkit-box-sizing: initial !important; /* Webkit用 */
}

.calculation_tool_body {
  min-width: 375px; /* 最小幅を375pxに固定 */
}


/* ボタンコンテナ（簡易版と詳細版の2つの四角を横並びにする） */
.calculation_tool_button-container {
  display: flex;
  justify-content: space-between;
  gap: 10px; /* ボタン間のスペースを10pxに設定 */
}

/* 各ボタンのスタイル */
.calculation_tool_button-box {
  width: 145px; /* ボタンのサイズを少し大きく調整 */
  height: 125px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8); /* シャドウを強く */
  background-color: #ffffff;
  border: 1px solid #ccc;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 上から順に表示する */
}

/* ボタンの上部の帯（簡易版・詳細版のタイトル部分） */
.calculation_tool_button-header {
  background-color: #449646;
  padding: 9px;
  font-size: 20px;
  color: white;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px; /* 帯の下に余白を追加して説明文と分ける */
  font-family: noto sans-serif;
  border: 2px outset;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* ボタンの説明文部分 */
.calculation_tool_button-description {
  padding: 20px 0px 20px;
  margin: -10px 0px;
  font-size: 17px;
  color: #333;
  font-weight: 400; 
  text-align: center; /* 中央揃え */
  font-family: noto sans-serif;
  border: 2px outset;
}

.scroll-to-form {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background-color: #449646;
  color: white;
  font-size: 24px;
  text-align: center;
  line-height: 40px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-image: linear-gradient(145deg, #56b956, #398d3a); /* グラデーションで立体感 */
  box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.3),  /* ハイライト */
              5px 5px 15px rgba(0, 0, 0, 0.4);  /* 外側の影 */
  border: none;
}

.scroll-to-form:hover {
  background-image: linear-gradient(145deg, #61c861, #2f7732); /* ホバー時の色の変化 */
  box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.5), /* ハイライトを強調 */
              8px 8px 20px rgba(0, 0, 0, 0.5); /* 影を強調 */
  transform: translateY(-3px); /* 少し浮かせる */
}

.scroll-to-form:active {
  background-image: linear-gradient(145deg, #398d3a, #56b956); /* 押した時の逆グラデーション */
  transform: translateY(2px); /* クリック時に押し込む */
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.2), 
              3px 3px 10px rgba(0, 0, 0, 0.3); /* 影を弱める */
}



a.btn--green {
  color: #fff;
  background-color: #094;
}

a.btn--green:hover {
  color: #fff;
  background-color: #00a349;
}

a.btn--green.btn--cubic {
  border-bottom: 5px solid #00662d;
}

a.btn--green.btn--cubic:hover {
  margin-top: 3px;
  border-bottom: 2px solid #00662d;
}

/* 丸みを帯びたボタンスタイル */
a.btn-c {
  font-size: 2rem;
  position: relative;
  padding: 1.5rem 3rem 1.5rem 2rem;
  border-radius: 100vh; /* 完全に丸みを持たせる */
}

a.btn-c i.fa {
  margin-right: 1rem; /* アイコンとテキストの間にスペースを追加 */
}

/* ボタンの右にFont Awesomeアイコンを追加 */
a.btn-c:before {
  font-family: 'Font Awesome 5 Free';
  font-size: 1.6rem;
  line-height: 1;
  position: absolute;
  top: calc(50% - .8rem);
  right: 1rem;
  margin: 0;
  padding: 0;
  content: '\f054'; /* アイコン（矢印） */
}
.form-table th {
  vertical-align: top;
  text-align: left;
  padding: 20px 10px 20px 0;
  width: 200px;
  line-height: 1.3;
  font-weight: 600;
}

.form-table th, .form-wrap label {
  color: #1d2327;
  font-weight: 400;
  text-shadow: none;
  vertical-align: baseline;
}


@media (max-width: 400px) {
  .entry-content.wp-block-post-content.has-global-padding.is-layout-constrained.wp-block-post-content-is-layout-constrained {
      padding-right: initial !important;
      padding-left: initial !important;
  }
}

.form-table td {
  margin-bottom: 9px;
  padding: 15px 10px;
  line-height: 1.3;
  vertical-align: middle;
}

.form-table, .form-table td, .form-table td p, .form-table th {
  font-size: 14px;
}

.alimony-section {
  display: flex;
  align-items: center;
  margin-top: 5px;
  width: 50%;
  border-top: 2px solid #999999;
}

.vertical-label {
  writing-mode: vertical-rl;
  text-align: center;
  font-size: 1.5em;
  padding: 5px;
  margin-right: 20px;
}

.calendar-header {
  text-align: center;
  font-size: 1.5em;
  margin-bottom: 10px;
}

.alimony-form-table {
  border-collapse: collapse;
  margin-top: .5em;
  width: 100%;
  clear: both;
  border-top: 2px solid #999999;
  border-collapse: collapse;
}

.empty-cell {
  text-align: center;
  border: 1px solid #999999;
  padding: 5px;
  width: 60px;
}

.month-header {
  text-align: center;
  border: 1px solid #999999;
  padding: 5px;
  font-weight: bold;
}

.input-cell {
  border: 1px solid #999999;
  padding: 5px;
}

.input-field {
  width: 60px;
  text-align: center;
}

#detailed-form {
  display: none;
}

#management-form {
  display: block;
}