#main{
	width:95%;
	margin:30px auto;
}
.readonly{
	background:#f0f0f0;
}
.pointer{
	cursor:pointer;
}
td {
	vertical-align: middle;
}
.width_10px{width:10px !important;}
.width_20px{width:20px !important;}
.width_30px{width:30px !important;}
.width_40px{width:40px !important;}
.width_50px{width:50px !important;}
.width_60px{width:60px !important;}
.width_70px{width:70px !important;}
.width_80px{width:80px !important;}
.width_90px{width:90px !important;}
.width_100px{width:100px !important;}
.width_110px{width:110px !important;}
.width_120px{width:120px !important;}
.width_130px{width:130px !important;}
.width_140px{width:140px !important;}
.width_150px{width:150px !important;}
.width_180px{width:180px !important;}
.width_200px{width:200px !important;}
.width_250px{width:250px !important;}
.width_300px{width:300px !important;}
.width_720px{width:720px !important;}
.width_800px{width:800px !important;}
.width_1000px{width:1000px !important;}
.width_10per{width:10% !important;}
.width_25per{width:25% !important;}
.width_30per{width:30% !important;}
.width_50per{width:50% !important;}
.width_75per{width:75% !important;}
.width_80per{width:80% !important;}
.width_90per{width:90% !important;}
.width_100per{width:100% !important;}

input[type="checkbox"] {
    vertical-align: middle;
}
#userForm .form_text_num{
	width: 60px;
}
#userForm .form_text_num2{
	width: 30px;
	padding:10px 5px;
}
#userForm .form_text{
	width: 250px;
}
#userForm .form_text2{
	width: 150px;
}
#userForm .form_text3{
	width: 80px;
}
#userForm .form_text4{
	width: 120px;
}
#userForm .form_text5{
	width: 228px;
	padding: 5px;
}
#error_info{
	display: none;
}
.center{
	text-align:center;
}
.left{
	text-align:left;
}
.m_center{
	margin-left:auto !important;
	margin-right:auto !important;
}
.other_div{
	display: flex;
	align-items: center;
	justify-content: center;
}
.red{
	color:#ff0000;
}
.white{
	color:#ffffff;
}
.bg_white{
	background:#fff !important;
}
.bg_gray{
	background:gray !important;
}
.tr_bg_color{
	background:#fff !important;
}
.tr_bg_color2{
	background:#CAE5CD  !important;
}
#contact_div{
	/* width:90%; */
	width: 900px;
	text-align: center;
	margin: 30px auto 15px;
	background: #fff;
	padding: 5px 0px 25px;
	border-radius: 10px;
	border: 3px solid #ccc;
}
#content_01 table{
	width: 720px;
	margin:0px;
}
#content_01 table th{
	background:#ddd !important;
}
table tr .th_title{
	padding-top:15px !important;
	padding-bottom:15px !important;
}
#main table tr .error{
	color:#ff0000 !important;
}
#main table tr .error_bg{
	background:#ffff00 !important;
}
form {
	margin: 0 auto;
	padding: 20px;
	background-color: #f9f9f9;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="text"] , input[type="number"] , select{
	width: 100%;
	padding: 10px;
	margin: 3px 0;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-sizing: border-box;
}
input[type="text"]:focus , input[type="number"]:focus{
	border-color: #007BFF;
	box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
	outline: none;
}
textarea{
	width: 100%;
	padding: 10px;
	margin: 3px 0;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-sizing: border-box;
}
textarea:focus{
	border-color: #007BFF;
	box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
	outline: none;
}
input[type="radio"] {
	appearance: none;
	width: 20px;
	height: 20px;
	border: 2px solid #007BFF;
	border-radius: 50%;
	outline: none;
	cursor: pointer;
	margin-right: 10px;
}
input[type="checkbox"] {
	appearance: none;
	width: 20px;
	height: 20px;
	border: 2px solid #007BFF;
	border-radius: 5%;
	outline: none;
	cursor: pointer;
	margin-right: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
}
input[type="radio"]:checked , input[type="checkbox"]:checked {
	background-color: #007BFF;
	border-color: #007BFF;
}
button , input[type="submit"] , input[type="button"] {
	background-color: #28a745;
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
	width: 300px;
	display: block;
	margin: 0 auto;
}
body .wid100px{width: 100px;}
body .wid150px{width: 150px;}
body .wid200px{width: 200px;}
body .wid250px{width: 250px;}
body .wid300px{width: 300px;}
h1{
	max-width: 920px;
	width: 920px;
	margin: auto;
	text-align:left;
}
#send_mess{
	width: 920px;
	margin: auto;
}
.content_div{
	margin-top:25px;
	padding:10px 5px 25px;
	border-bottom:3px dotted #f0f0f0;
	max-width: 1600px;
	width: 1600px;
	max-width: 100%;
	margin: auto;
}
.content_div h2{
	border-bottom:5px solid #0070c0;
}
.content_div p{
	padding:5px;
}
.content_div table{
	border-collapse:  collapse;
	width: 100%;
	margin: auto;
}
.content_div th,td{
	border: solid 1px;
	padding: 3px; 
}
.content_div td{
	text-align:center;
}
.content_div table tr:nth-child(odd) {
	/* background-color: #ddd; */
}
/*
.content_div table tr:nth-child(1) {
	background-color: #ddd;
}
.content_div table tr:last-child{
	background-color: #ddd;
}
*/
.toi_th{
	background-color: #ddd;
}
.no_list li{
	list-style:none
}
.td_readonly{
	background-color: #ddd !important;
	border:1px solid #000 !important;
}
.td_left{
	text-align:left !important;
	padding-left:10px !important;
	padding-right:10px !important;
}
.td_right{
	text-align:right !important;
	padding-left:10px !important;
	padding-right:10px !important;
}
.th_left{
	text-align:left !important;
	padding-left:10px !important;
	padding-right:10px !important;
}
.th_right{
	text-align:right !important;
	padding-left:10px !important;
	padding-right:10px !important;
}
.border_bottom_bold{
	border-bottom:3px solid #000 !important;
}
#submit_area{
	margin:25px auto;
}
.smooth_div{
	margin:25px auto 10px;
	text-align:center;
}
.smooth_div a.inline-text{
    border: 2px solid #009999;
    border-radius: 50%;
    padding: 5px 0px;
    margin: 3px;
    text-decoration: none;
    text-decoration-line: none;
    text-decoration-thickness: initial;
    text-decoration-style: initial;
    text-decoration-color: initial;
    width: 36px;
    text-align: center;
}
.link_up , .link_down{
	width:20px;
}
table .pc{
	display:revert;
}
.pc{
	display:block;
}
.pc2{
	display:inline-block;
}
.smp{
	display:none !important;
}
.hidden{
	display:none;
}
.block{
	display:block !important;
}
.nodisp{
	display: none !important;
}
.inline-container {
	font-size: 0; /* 余計な隙間を消す */
}
.div_style_1{
	width: 600px !important;
	margin:0px !important;
}
.div_style_2{
	width: 1200px !important;
	margin:0px !important;
}
.inline-img,
.inline-text {
	display: inline-block;
	vertical-align: middle; /* 高さを揃える */
	padding: 0px 5px;
}
.inline-text {
	font-size: 18px;
}
.inline-img {
	max-height: 100px; /* 必要に応じて調整 */
	width: 41px;
	height: auto;
}
#completed{
	text-align:center;
	font-weight:bold;
	max-width:80%;
	margin:15px auto;
	padding:35px;
	background:#fff;
	border:5px dotted #0070c0;
}
#user_url_p{
	font-weight:bold;
	max-width:920px;
	width:920px;
	margin:15px auto;
	padding:5px 35px 35px;
	/*
	text-align:center;
	background:#fff;
	border:5px dotted #0070c0;
	*/
}
#sent_mess{
	/*
	display:none;
	*/
}
.count_icon{
	width:18px;
	display: inline-block;
	vertical-align: middle; /* 高さを揃える */
	cursor: pointer;
	margin: 0px 5px;
}
.nowrap{
	white-space: nowrap;
}
.clipboard_icon{
	width:20px;
	display: inline-block;
	vertical-align: middle; /* 高さを揃える */
}

/* 印刷時に表示される内容を制御 */
.print-only , .print-only2{
	display: none; /* 通常時は非表示 */
}
#error_info{
	padding:3px 10px;
	border:2px dotted #cc0000;
	margin: 50px auto 20px;
}
#error_info h3{
	color:#cc0000;
	font-weight:bold;
}
#error_list{
	
}
#error_list li{
	margin:2px 0px;
	color:#cc0000;
}
#error_list li a{
	color:#cc0000;
}
@media print {
	body , form {
		margin: 0;
		padding: 2px;
		width: 100%;
		max-width: 100%;
		/* 
		width: 172mm;
		height: 251mm;
		page-break-after: always;
		 */
	}
	
	.content_div{
		/* width: 100% !important; */
		width: 1050px !important;
	}
	.print-only {
		display: block; /* 印刷時に表示 */
	}
	.print-only2 {
		display: inline-block; /* 印刷時に表示 */
	}
	.no-print , body table .no-print{
		display: none !important; /* 印刷時に非表示 */
	}
	body {
		margin: 0; /* 印刷時の余白を削除 */
	}
	#main{
		width: 100%; /* 横幅いっぱいに調整 */
		max-width: none; /* 制限を解除 */
		margin: 0; /* 自動余白を削除 */
		padding: 0; /* 内側の余白も削除 */
	}
	.content_div table{
		max-width: 99%;
		width: 99%;
		margin:auto;
	}
	.width_300px{
		width:150px !important;
	}
	.width_140px{
		width:80px !important;
	}
	.width_120px{
		width:60px !important;
	}
	.width_90px{
		width:60px !important;
	}
	.width_80px{
		width:60px !important;
	}
	.div_style_3{
		font-size:12px;
	}
	.width_75per{
		width:80% !important;
	}
	.div_style_3 .form_text{
		width:150px !important;
	}
	.form_text3{
		width:60px !important;
	}
	#userForm .form_text5{
		width:150px !important;
	}
	form .print_width_50px{width:50px !important;}
	form .print_width_80px{width:80px !important;}
	form .print_width_100px{width:100px !important;}
	form .print_width_150px{width:150px !important;}
	form .print_width_200px{width:200px !important;}
	form .print_width_5per{width:5% !important;}
	form .print_width_6per{width:6% !important;}
	form .print_width_7per{width:7% !important;}
	form .print_width_8per{width:8% !important;}
	form .print_width_10per{width:10% !important;}
	form .print_width_20per{width:20% !important;}
	form .print_width_30per{width:30% !important;}
	form .print_width_40per{width:40% !important;}
	form .print_width_50per{width:50% !important;}
	form .print_width_60per{width:60% !important;}
	form .print_width_70per{width:70% !important;}
	form .print_width_80per{width:80% !important;}
	form .print_width_90per{width:90% !important;}
	form .print_width_100per{width:100% !important;}
	.custom-select{
		width:200px !important;
	}
	.selected-options span{
		padding: 3px 7px;
	}
	.printable-input {
		border: none;
		background: none;
		font-family: inherit;
		font-size: inherit;
		width: auto;
	}
	
	.printable-input::before {
		content: attr(value);
		display: inline;
	}
	
	.printable-input {
		color: transparent; /* 入力文字を隠す */
	}
	.nowrap{
		white-space: normal;
	}
	.td_readonly{
		border:1.5px solid #000 !important;
	}
	.span_br{
		display:block;
	}
}

.Tooltip {
  --_bg: #000;
  --_color: #fff;
  --_triangle-size: 5px;
  --_gap: 3px;

  position: absolute;
  z-index: 1;
  display: block;

  /* ツールチップのみため */
  width: max-content;
  max-width: 500px;
  padding: 10px;
  background-color: var(--_bg);
  color: var(--_color);
  text-align: left;
  border-radius: 8px;
  font-size: 12px;

  /* 表示・非表示の指定 */
  visibility: hidden;
  opacity: 0;
}

/* ツールチップが上に表示される場合 */
.Tooltip.-top {
  bottom: calc(100% + var(--_triangle-size) + var(--_gap));
  left: 50%;
  translate: -50% var(--_y, 0);
}

/* ツールチップが下に表示される場合 */
.Tooltip.-bottom {
  top: calc(100% + var(--_triangle-size) + var(--_gap));
  left: 50%;
  translate: -50% var(--_y, 0);
}

/* ツールチップが右に表示される場合 */
.Tooltip.-right {
  bottom: 50%;
  left: calc(100% + var(--_triangle-size) + var(--_gap));
  translate: var(--_x, 0) 50%;
}

/* ツールチップが左に表示される場合 */
.Tooltip.-left {
  bottom: 50%;
  right: calc(100% + var(--_triangle-size) + var(--_gap));
  translate: var(--_x, 0) 50%;
}

/*
  △を擬似要素で作成
*/
.Tooltip::before {
  position: absolute;
  margin: auto;
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
}

/* ツールチップが上に表示される場合の△ */
.Tooltip.-top::before {
  bottom: calc(var(--_triangle-size) * -1);
  right: 0;
  left: 0;
  border-width: var(--_triangle-size) var(--_triangle-size) 0 var(--_triangle-size);
  border-color: var(--_bg) transparent transparent transparent;
}

/* ツールチップが下に表示される場合の△ */
.Tooltip.-bottom::before {
  top: calc(var(--_triangle-size) * -1);
  right: 0;
  left: 0;
  border-width: 0 var(--_triangle-size) var(--_triangle-size) var(--_triangle-size);
  border-color: transparent transparent var(--_bg) transparent;
}

/* ツールチップが左に表示される場合の△ */
.Tooltip.-left::before {
  top: 0;
  bottom: 0;
  right: calc(var(--_triangle-size) * -1);
  border-width: var(--_triangle-size) 0 var(--_triangle-size) var(--_triangle-size);
  border-color: transparent transparent transparent var(--_bg);
}

/* ツールチップが右に表示される場合の△ */
.Tooltip.-right::before {
  top: 0;
  bottom: 0;
  left: calc(var(--_triangle-size) * -1);
  border-width: var(--_triangle-size) var(--_triangle-size) var(--_triangle-size) 0;
  border-color: transparent var(--_bg) transparent transparent;
}

/* 透明な要素を背面に敷くことでツールチップにマウスをのせやすくする */
.Tooltip::after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* ツールチップが上に表示される場合 */
.Tooltip.-top::after {
  top: 100%;
  left: 0;
  height: calc(var(--_triangle-size) + var(--_gap));
}

/* ツールチップが下に表示される場合 */
.Tooltip.-bottom::after {
  bottom: 100%;
  left: 0;
  height: calc(var(--_triangle-size) + var(--_gap));
}

/* ツールチップが左に表示される場合 */
.Tooltip.-left::after {
  top: 0;
  left: 100%;
  width: calc(var(--_triangle-size) + var(--_gap));
}

/* ツールチップが右に表示される場合 */
.Tooltip.-right::after {
  top: 0;
  right: 100%;
  width: calc(var(--_triangle-size) + var(--_gap));
}

/*
  ツールチップがあることを、支援技術に伝えるための非表示テキスト
*/
.Tooltip_Body {
  display: block;
}
.Tooltip_Body::before {
  content: "。ツールチップあり：";
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
}

/*
  対象の要素の周囲に表示されるツールチップを上下左右に配置するために親要素をrelativeにする
  ※親要素のpositionの値を自身で調整したい場合は不要
*/
.TooltipContainer {
  position: relative;
  /* display: inline-block; */
}

/*
  ホバー、フォーカス、アクティブ時にツールチップを表示する
*/
.TooltipContainer:is(:hover, :focus-visible, :focus-within, :active) > .Tooltip {
  visibility: visible;
  opacity: 1;
}

/*
  no-preferenceはprefers-reduced-motionの設定を行なっていない場合
  アニメーションさせる
*/
@media (prefers-reduced-motion: no-preference) {
  /* フェードアウト用の指定 */
  .Tooltip {
    transition: visibility 0s linear 0.1s, opacity 0.1s, translate 0.1s;
  }
  /* フェードイン用の指定 */
  .TooltipContainer:is(:hover, :focus-visible, :focus-within, :active) > .Tooltip {
    transition: visibility 0s linear 0s, opacity 0.3s, translate 0.3s;
  }
  /*
    ホバー・フォーカス・アクティブ時にツールチップをCSS Transitionさせるため
    ホバー・フォーカス・アクティブ時でないときに、初期位置を指定する
  */
  .TooltipContainer:not(:is(:hover, :focus-visible, :focus-within, :active)) > .Tooltip.-top {
    --_y: var(--_gap);
  }
  .TooltipContainer:not(:is(:hover, :focus-visible, :focus-within, :active)) > .Tooltip.-bottom   {
    --_y: calc( var(--_gap) * -1);
  }
  .TooltipContainer:not(:is(:hover, :focus-visible, :focus-within, :active)) > .Tooltip.-left {
    --_x: var(--_gap);
  }
  .TooltipContainer:not(:is(:hover, :focus-visible, :focus-within, :active)) > .Tooltip.-right {
    --_x: calc(var(--_gap) * -1);
  }  
}
.protected {
    pointer-events: none;
}
.custom-select {
    width: 230px;
    position: relative;
}

.selected-options {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px;
    border: 2px solid #000;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
}

.selected-options span {
    background: #000;
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 10px;
}

.options-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
}

.options-list label {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.2s;
    font-size:13px;
}

.options-list label:hover {
    background: #f1f1f1;
}

.options-list input {
    margin-right: 10px;
}
body form .content_div #f3_toi8{
	width:720px;
	height:100px;
}
@media screen and (max-width:1300px) {
	#main{
		width:95%;
	}
}
.word-wrap {
	word-break: break-word;
	overflow-wrap: break-word;
}
.parent {
	overflow-x: auto; /* or hidden */
}
@media screen and (max-width:480px) {
	#main{
		width:98%;
	}
	form {
		padding: 20px 5px;
	}
	#contact_div{
		/* text-align:left; */
		width: 100%;
		padding:5px 5px 15px;
	}
	#send_mess{
		width: 100%;
		padding:0px 5px;
	}
	.pc , .pc2{
		display:none !important;
	}
	table .smp{
		display:revert !important;
	}
	.smp{
		display:block !important;
	}
	.table_tr{
		margin-bottom:10px;
		border-top:5px solid #000;
		/*display:block !important;*/
	}
	#main{
		width:100%;
		margin:10px auto;
		padding:0px;
		font-size:12px;
	}
	.smp_tategaki{
		/* writing-mode: vertical-rl; */
		font-size: 12px;
	}
	h1{
		max-width: 100%;
		width: 100%;
	}
	.content_div{
		max-width: 100%;
		width: 100%;
	}
	#content_01 table{
		width: 100%;
		margin:0px;
	}
	#userForm .form_text_num{
		width: 45px;
	}
	.smooth_div{
		font-size:15px;
	}
	.smp th{
		color:#fff;
		background:#0070c0;
		border: 1px solid #666;
	}
	.smooth_div a.inline-text{
		margin: 1px;
	}
	.count_icon{
		width:25px;
		margin: 5px auto;
		display: block;
	}
	.count_icon2{
		margin: 5px 5px;
		display: inline-block;
	}
	td,th{
		display:block;
	}
	body form .content_div #f3_toi8{
		width:100%;
		height:100px;
	}
	#user_url_p{
		font-weight:bold;
		max-width:100%;
		width:100%;
	}
	.div_style_1{
		width: 100% !important;
		margin:0px !important;
	}
	#user_url_p{
		padding:5px 0px 20px;
	}
	.width_75per{
		width:100% !important;
	}
	.width_300px{
		width:100% !important;
	}
	#userForm .form_text{
		width:80% !important;
		display:block;
	}
	.form_select{
		width:80% !important;
		margin:auto;
	}
	img, video {
		max-width: 100%;
		height: auto;
		display: block;
	}
	.container {
		overflow-x: hidden;
	}
	#content_04 textarea{
		width: 180px;
	}
	#userForm .form_text3{
		width: 110px;
	}
	#userForm .form_text4{
		/* width: 180px; */
		width: 237px !important;
	}
	#userForm .form_text2{
		width: 237px !important;
	}
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}
	.count_icon{
		display: inline-block !important;
	}
	.Tooltip{
		display:none !important;
	}
	#completed{
		max-width: 100%;
		padding: 35px 0px;
	}
	.custom-select{
		display: inline-block;
		width: 80%;
	}
	input,textarea{
		font-size: 16px;
	}
	select{
		padding-top:10px;
		padding-bottom:10px;
		font-size: 16px;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
	}
	input,select,textarea{
		background:#fff;
	}
	input.td_readonly ,select.td_readonly ,textarea.td_readonly {
		background: #ddd !important;
	}
}