@charset "utf-8";

.mt200 {
    margin-top:200px;
}

.text-center {
    text-align:center;
}

.header {
    margin:15px auto;
    text-align:center;
}

@media screen and (min-width:900px) {

.header {
    width:80%;
}

}

form p .btn {
  display: inline-block;
  padding: 0.5em 1.2em 0.7em;
  font-size: 1rem;
  color: #fff;
  background-color: #777;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

form .btn:hover {
  background-color: #999;
}

form .btn:disabled,
form .btn.disabled {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {

    .list-half .list .w20p {
        width:20%;
    }
    .list-half .list .w80p {
        width:80%;
    }
}

.bg_img {
    background-size: cover;       /* 拡大して枠にフィット */
    background-position: center;
    background-repeat: no-repeat;

    min-height:16rem;
    max-width:100%;
}

/*2列タイプのボックス
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.list-container2 .list {
    margin-bottom: 30px;  /*ボックス同士の上下間に空けるスペース*/
    padding: 20px;      /*ボックス内の余白*/
    background: #fff;    /*背景色*/
    box-shadow: 5px 5px 20px rgba(0,0,0,0.1);  /*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
}

/*ボックス内のh4タグ*/
.list-container2 .list h4 {
  margin: 0;
}

/*ボックス内のpタグ*/
.list-container2 .list p {
  margin: 0;
  font-size: 0.8rem;  /*文字サイズを80%に*/
  line-height: 1.5;  /*行間を少し狭く*/
}

/*ボックス内のfigure画像*/
.list-container2 .list figure {
  margin-bottom: 1rem;  /*下に空けるスペース*/
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {

    /*listブロック全体を囲むブロック*/
    .list-container2 {
    display: flex;    /*flexボックスを使う指定*/
    flex-wrap: wrap;  /*折り返す指定*/
    }

    /*１個あたりのボックス設定*/
    .list-container2 .list {
    width: 49%;      /*幅。2列になります。*/
    margin-right: 2%;  /*右側へのマージン。ボックス同士の左右の余白です。*/
    }

    /*2の倍数目のボックスの右側のマージンをなくす*/
    .list-container2 .list:nth-of-type(2n) {
    margin-right: 0;
    }

    /*ボックス内のtextブロック*/
    .list-container2 .list .text {
    flex: 1;
    }

}/*画面幅900px以上の追加指定ここまで*/

.horizontal {
  margin: 0;
  padding: 0;
}

.horizontal .row {
  display: flex;
  align-items: baseline; /* ベースラインで揃える */
  margin-left: 1.5em;
  margin-bottom: 1em;
}

.horizontal dt {
  flex: 0 0 2em; /* 固定幅（調整可） */
  font-weight: bold;
  margin: 0;
}

.horizontal dd {
  margin: 0;
  flex: 1; /* 残りを全部使う */
  word-break: break-word;
  line-height: 1.5;
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {
    .ta1.w60p {
        max-width:60%;
    }
}

.ta1.contract_fee th {
    text-align:center;
}

.ta1.contract_fee td {
    text-align:right;
}

/* 2025-07-14 */
.list.box_shadow_none {
    box-shadow:none !important;
}

.text_red {
    color:#b22222;
}

.text_bold {
    font-weight:bold;
}

.big {
    font-size: 20px !important;
    line-height:2.5 !important;
}
.bg_orange {
    background-color:#ff6701;
    padding:8px 10px 8px !important;
    border-radius:10%;
}
/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {
    .big {
        font-size: 24px !important;
        line-height:3 !important;
    }
    .bg_orange {
        padding:8px 10px 3px !important;
    }
}

.text_white {
    color:#fff;
}

.width_auto {
    width:auto !important;
}

.text_right {
    text-align:right;
}

.visible_sm {
    display:block;
}
.visible_lg {
    display:none;
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {
    .visible_sm {
        display:none;
    }
    .visible_lg {
        display:block;
    }

}

/* 2025-07-25 */
.banner-row {
  display: flex;
  justify-content: flex-start;
  gap: 2%;
  align-items: flex-start; /* 高さ圧縮防止 */
}

.banner {
  width: 23%;
  box-sizing: border-box;
}

.banner a {
  display: block;          /* aタグをブロックに */
  text-decoration: none;   /* 画像の下線を防止（任意） */
}

.banner img {
  width: auto;
  height: auto;
  display: block;
  max-width: 100%;
  max-height: 100%;
}

@media screen and (min-width:900px) {
    /*画像ブロック共通*/
    .list-half .image-l, .list-half .image-r {
        width: 40%; /*幅。下のテキストブロックのwidthと調整して下さい。*/
    }

    /*テキストブロック*/
    .list-half .text{
        width: 58%; /*幅。上の「画像ブロック共通」のwidthと調整して下さい。*/
    }
}

/* 2025-07-30 */
html,body {
    font-size: 18px; /*基準となるフォントサイズ。*/
}
header {
    padding: 0px var(--global-space);	/*上下、左右へのボックス内の余白。左右はcss冒頭で指定しているglobal-spaceを読み込みます*/
}
#logo {
    max-width: 600px;	/*ロゴの幅*/
}

/* 2025-07-31 */
/*4列タイプのボックス
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.list-container4 .list {
    margin-bottom: 30px;  /*ボックス同士の上下間に空けるスペース*/
    padding: 20px;      /*ボックス内の余白*/
    background: #fff;    /*背景色*/
    box-shadow: 5px 5px 20px rgba(0,0,0,0.1);  /*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
}

/*ボックス内のh4タグ*/
.list-container4 .list h4 {
  margin: 0;
}

/*ボックス内のpタグ*/
.list-container4 .list p {
  margin: 0;
  font-size: 0.8rem; /*文字サイズを80%に*/
  line-height: 1.5;  /*行間を少し狭く*/
}

/*ボックス内のfigure画像*/
.list-container4 .list figure {
  margin-bottom: 1rem;  /*下に空けるスペース*/
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {

    /*listブロック全体を囲むブロック*/
    .list-container4 {
      display: flex;    /*flexボックスを使う指定*/
      flex-wrap: wrap;  /*折り返す指定*/
    }

    /*１個あたりのボックス設定*/
    .list-container4 .list {
      width: 23.5%;      /*幅。4列になります。*/
      margin-right: 2%;  /*右側へのマージン。ボックス同士の左右の余白です。*/
    }

    /*4の倍数目のボックスの右側のマージンをなくす*/
    .list-container4 .list:nth-of-type(4n) {
      margin-right: 0;
    }

    /*ボックス内のtextブロック*/
    .list-container4 .list .text {
      flex: 1;
    }

}/*画面幅900px以上の追加指定ここまで*/

.table_striped tr:nth-child(even) {
    background-color: #f2f2f2; /* 薄いグレー */
}

.list.rounded_blue {
    background-color: #e6f3ff;
    border-radius: 12px;
    padding: 15px;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* 柔らかい影 */
}

/* 2025-08-05 */
.list-half .image-r.no_border_radius img {
    border-radius:0;
    box-shadow:none;
}
p.alert {
    position: relative;
    padding: 30px 40px 30px 100px;
    border: 2px solid #f4a1a1;
    border-radius: 10px;
    background-color: #fff;
    color: #333;
    box-sizing: border-box;
}
p.alert::before {
    content: "！";
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #f4a1a1;
    color: #fff;
    font-weight: bold;
    width: 48px;       /* ← 2倍に拡大 */
    height: 48px;      /* ← 2倍に拡大 */
    line-height: 48px; /* ← 縦位置合わせ */
    text-align: center;
    border-radius: 50%;
    font-size: 32px;   /* ← フォントサイズも2倍に */
}
.circle-list {
    list-style: none; /* デフォルトの黒丸を消す */
}
.circle-list li {
    position: relative;
    padding: 20px 20px 20px 4em;
    text-indent: -3em;
    margin-bottom: 30px;
    line-height: 1.6;
    background-color: #e6f3ff;  /* 背景を薄い青 */
    border-radius: 12px;        /* 角丸 */
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* 柔らかい影 */
}

.circle-list li span {
    display: inline-block;
    width: 2em;          /* 丸数字の固定幅 */
    text-align: center;
    margin: 0 -.75em 0 1em;
    font-weight: bold;
    color: #004080;      /* 濃いめの青 */
    font-size: 1.3em;    /* フォントを1.3倍 */
    line-height: 1em;    /* 縦のバランスを保つ */
}

@media screen and (min-width:900px) {
  p.alert {
    width: 60%;
    margin: 0 auto;
  }

  .circle-list {
    width: 70%;
    margin: 0 auto;
  }
}