@charset "utf-8";


/*全体の設定
---------------------------------------------------------------------------*/
body{
	color: #333;	/*全体の文字色*/
	background: #eee; /* ★ここに「;」を足しました */
	margin: 0px;
	padding: 0px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-size: 14px;	/*文字サイズ*/
	line-height: 2;		/*行間*/
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;}
ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
img:not(.banner) {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 90%;border-spacing: 0;}
iframe {width: 100%;}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #333;	/*リンクテキストの色*/
	transition: 0.2s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
	text-decoration-color: #bbbbbb;
	text-underline-offset: 0.2em;

}

a:visited{
	color: #a668e0;
	text-decoration-color: #e4e4e4;
}
a:hover {
	color: #001ada;			/*マウスオン時の文字色（全体）*/
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}



/*メインコンテンツ
---------------------------------------------------------------------------*/
#main {
	margin: 60px auto 30px auto;
	max-width: 900px;		/*メインコンテンツ幅*/
	background: #FFF;	/*背景色*/
	padding: 15px;	/*ボックス内の余白*/
	border: 1px solid #CCC;	/*枠線の幅、線種、色*/
}
/*mainコンテンツのh2タグの設定*/
#main h2 {
	clear: both;
	margin-bottom: 0px;	/*見出しの下にとるスペース*/
	color: #FFF;		/*文字色*/
	padding: 7px 20px;	/*上下、左右への余白*/
	background: #b6273f;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background: no-repeat right center, linear-gradient(#d14159, #99182e);		/*背景画像の読み込み,グラデーション*/
	box-shadow: 1px 2px 5px #ccc;	/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
}
/*mainコンテンツのh3タグの設定*/
#main h3 {
	clear: both;
	margin-bottom: 10px;	/*見出しの下にとるスペース*/
	background: #FFF;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background:linear-gradient(#FFF, #f4f4f4 49%, #e8e8e8 50%, #FFF 100%);	/*グラデーション*/
	box-shadow: 1px 2px 5px #e2e2e2;	/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
	padding: 4px 20px 4px 10px;	/*上、右、下、左へのボックス内の余白*/
	border: 1px solid #CCC;	/*枠線の幅、線種、色*/
}




/*フッター設定
---------------------------------------------------------------------------*/
footer {
	clear: both;
	margin-bottom: 30px;
	text-align: center;
	color: #777777;			/*文字色*/
	background: #DDDDDD;	/*背景色（古いブラウザだとここの色のみが出ます）*/
}
footer a {
	text-decoration: none;
	color: #777777;
}
footer a:hover {
	color: #FFF;
}
footer .pr {display: block;font-size: 80%;}




/*入力欄サイズ・装飾
---------------------------------------------------------------------------*/
/* 日付が未選択（初期状態）のときだけ文字色をグレーにする */
/* 1. 初期状態はすべてグレーにする */
input[type="date"],
input[type="month"] {
  color: #b6b6b6;
}

/* 2. フォーカスされた時、または値が選択されている時は黒に戻す */
input[type="date"]:focus,
input[type="date"]:valid,
input[type="month"]:focus,
input[type="month"]:valid {
  color: inherit; /* または #333333 などの文字色 */
}


/* プレースホルダー色*/
::placeholder{
	color: #b6b6b6;
}

/* テキストボックス*/
.wss,.ws,.wm,.wl{
    padding: 0.5em;          /* 内側の余白量 */
    height: 18px;           /* 高さ */
    font-size: 16px;          /* 文字サイズ */
}
.wss{
	width: 80px;
}

.ws{
	width: 150px;
}
.wm{
	width: 300px;
}
.wl{
	width: 350px;
}

input[type="date"],input[type="month"]
{
    padding: 0.5em;          /* 内側の余白量 */
    height: 18px;           /* 高さ */
    font-size: 16px;          /* 文字サイズ */
}
/* セレクトボックス*/
.se{
height: 40px;
font-size: 16px;          /* 文字サイズ */
}

textarea
{
    padding: 0.5em;          /* 内側の余白量 */
    font-size: 16px;          /* 文字サイズ */
	width: 100%;
	box-sizing: border-box;
	max-width: 100%;

}

/* フォーカス*/
input,textarea,select{
border:1px #818181 solid;
outline: 0;
	}
	
input:focus,textarea:focus,select:focus{
background-color: rgb(255, 243, 243);
border: 2px rgb(252, 90, 130)solid;

}




/*テーブル１
---------------------------------------------------------------------------*/
.ta1 {
	width: 100%;
	margin: 0 auto 20px;
}
.ta1, .ta1 td, .ta1 th{
	
	border: 1px solid #CCC;	/*テーブルの枠線の幅、線種、色*/
	padding: 10px 15px;	/*ボックス内の余白*/
	word-break: break-all;
}
/*テーブル１行目に入った見出し部分*/
.ta1 th.tamidashi{
	width: auto;
	text-align: center;
	color: #181818;	/*文字色*/
	border: 0px ;	/*テーブルの枠線の幅、線種、色*/
	padding: 5px 5px;	/*ボックス内の余白*/
	background: #fc5176;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background: linear-gradient(#f8becd9c, #fc518a75);	/*グラデーション*/
}
/*テーブル内の左側の見出し部分*/
.ta1 th{
	width: 20%;
	text-align: center;
	background: #e2e2e3;	/*背景色*/
}
/*左側ボックスに画像を入れた場合の設定*/
.ta1 th img {
	width: 100%;
}

@media (max-width: 768px) {
    .ta1 th, .ta1 td {
        display: block;
        width: 100%;
        box-sizing: border-box;
		border:1px;	/*テーブルの枠線の幅、線種、色*/
    }


    .ta1 th {
        text-align: left;
    }


	.wss,.ws,.wm,.wl{
		padding: 0.5em;          /* 内側の余白量 */
		height: 18px;           /* 高さ */
		font-size: 14px;          /* 文字サイズ */
	}
	.wss{
		width: 80px;
	}

	.ws{
		width: 150px;
	}
	.wm{
		width: 280px;
	}
	.wl{
		width: 280px;
	}


}

/*submitボタンの設定
---------------------------------------------------------------------------*/
input[type="submit"],
input[type="button"],
input[type="reset"] {
	padding: 10px 20px;	/*ボタン内の余白*/
	margin-bottom: 20px;
	border: none;
	border-radius: 30px;	/*角丸のサイズ*/
	background: linear-gradient(#e497ab, #da6085);	/*グラデーション*/
	font-size: 12px;	/*文字サイズ*/
	border: 1px solid #af0049;
	font-weight:bold;
}
/*マウスオン時の設定*/
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover{
	background: linear-gradient(#aa0025, #800011);	/*背景色*/
	border: 1px solid #800006;
	color:#fff;
}

/* ===================================================
   共通設定：枠線へのめり込みと、文字の回り込みを防止
   =================================================== */
.ta1 ul.table-list,
.ta1 ol.table-list {
  margin: 0;
  padding-left: 1.5em;            /* 枠線からのめり込みを防ぐ左余白（少し広めに確保） */
padding-right: 1.5em;            /* 枠線からのめり込みを防ぐ左余白（少し広めに確保） */

  list-style-position: outside; /* 改行時にマークの下へ回り込むのを防ぐ（最重要） */
}


.ta1 .table-list li:last-child {
  margin-bottom: 0;
}

/* ===================================================
   種類別の設定
   =================================================== */
/* 1. 黒丸（ul）の指定 */
.ta1 ul.table-list {
  list-style-type: disc; /* 通常の黒丸 */
}

/* 2. 数字＋カッコ（ol）の指定 */
.ta1 ol.num-bracket {
  list-style-type: decimal; /* 1, 2, 3... の標準数字 */
}

/* ★モダンブラウザ限定：数字の後ろを「.」から「)」に変更する魔法の記述 */
.ta1 ol.num-bracket li::marker {
  content: counter(list-item) ") "; /* 数字の後に閉じカッコと半角スペースを付与 */
}


.ta1 ul.kome-list {
  list-style-type: "※ "; /* 行頭のマークを「※」とスペースにする */
  padding-left: 1.5em;  /* 1 2行目全体の左側に「※ 」分の余白を作る */
padding-right: 1.5em;  /* 1 2行目全体の左側に「※ 」分の余白を作る */

}

.required-badge::after {
  content: "必須";
  background-color: #e53e3e; /* 濃い赤色 */
  color: white;
  font-size: 0.65rem;        /* 1 さらに文字サイズを小さく（10px相当） */
  font-weight: bold;
  padding: 1px 4px;          /* 2 上下左右の余白を極限まで狭く */
  border-radius: 3px;        /* 角丸も少し控えめに */
  margin-left: 6px;          /* 見出し文字との間隔 */
  vertical-align: 1px;       /* 3 文字の高さ中央にぴったり合わせる調整 */
  display: inline-block;     /* 崩れ防止 */
  line-height: 1.2;
}

.required-badge2::after {
  content: "必須";
  background-color: #e53e3e; /* 濃い赤色 */
  color: white;
  font-size: 0.65rem;        /* 1 さらに文字サイズを小さく（10px相当） */
  font-weight: bold;
  padding: 1px 4px;          /* 2 上下左右の余白を極限まで狭く */
  border-radius: 3px;        /* 角丸も少し控えめに */
  margin-left: 6px;          /* 見出し文字との間隔 */
  vertical-align: 1px;       /* 3 文字の高さ中央にぴったり合わせる調整 */
  display: inline-block;     /* 崩れ防止 */
  line-height: 1.2;
}


/* 任意アイコン（薄いグレーの極小版） */
.optional-badge::after {
  content: "任意";
  background-color: #718096; /* 1 上品で落ち着いた薄いグレー */
  color: white;
  font-size: 0.65rem;        /* 必須アイコンと全く同じ極小サイズ */
  font-weight: bold;
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: 1px;       /* 必須アイコンと高さを揃える */
  display: inline-block;
  line-height: 1.2;
}

/*テーブル2
---------------------------------------------------------------------------*/
.ta2 {
	width: 100%;
	margin: 0 auto 20px;
}
.ta2, .ta2 td, .ta2 th{
	
	border: 1px solid #CCC;	/*テーブルの枠線の幅、線種、色*/
	padding: 10px 15px;	/*ボックス内の余白*/
	word-break: break-all;
}
/*テーブル１行目に入った見出し部分*/
.ta2 th.tamidashi{
	width: auto;
	text-align: center;
	color: #181818;	/*文字色*/
	border: 0px ;	/*テーブルの枠線の幅、線種、色*/
	padding: 5px 5px;	/*ボックス内の余白*/
	background: #fcd451;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background: linear-gradient(#f8f2be9c, #fcd45175);	/*グラデーション*/
}
/*テーブル内の左側の見出し部分*/
.ta2 th{
	width: 30%;
	text-align: left;
	background: #e2e2e3;	/*背景色*/
}
/*左側ボックスに画像を入れた場合の設定*/
.ta2 th img {
	width: 100%;
}

@media (max-width: 768px) {
    .ta2 th, .ta2 td {
        display: block;
        width: 100%;
        box-sizing: border-box;
		border:0px;	/*テーブルの枠線の幅、線種、色*/
    }


    .ta2 th {
        text-align: left;
    }


	.ws,.wm,.wl{
		padding: 0.5em;          /* 内側の余白量 */
		height: 18px;           /* 高さ */
		font-size: 16px;          /* 文字サイズ */
	}
	.ws{
		width: 150px;
	}
	.wm{
		width: 280px;
	}
	.wl{
		width: 350px;
	}


}

/*submitボタンの設定
---------------------------------------------------------------------------*/

/*インフレームの設定（プライバシーポリシー部分）*/

.iframeWrap {
	position: relative;
	padding-bottom: 35%;
	height: 0;
	overflow: hidden;
	border: 1px solid #CCC;	/*テーブルの枠線の幅、線種、色*/
}

.iframeWrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



.form-error {
	display: block;
	color: red;
	font-size: 14PX;
	margin-top: 4px;
	margin-bottom: 4px;
	background-color: #fff7d5;
  white-space: nowrap; /* 折り返しを防ぐ */
}

/* エラー時のinputの枠線 */
input[aria-invalid="true"],
textarea[aria-invalid="true"] {
	border: 2px solid red;
	background: #fff5f5;
}

.form-error {
  white-space: pre-line; /* 改行コードを反映 */
}