@charset "utf-8";
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
	ファイル名: design_01global.css
	説明: 全体デザイン用
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/*
  クリアフィックス
*/
.clearfix {
	zoom: 1;
}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

/*
	見出しのベーシックスタイル
	<h1></h1>
	<h1></h1>
	<h1></h1>
	<h1></h1>
	<h1></h1>
	<h1></h1>
*/
.entrybody h1,
.entrybody h2,
.entrybody h3,
.entrybody h4,
.entrybody h5,
.entrybody h6 {
	letter-spacing: 0.05em;
	padding: 0.5em 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	color: #111;
	font-weight: bold;
}

#Contents h1,#Contents_Top h1 {
	color: #FFF;
	background: rgb(12, 94, 162);
	background: linear-gradient(90deg, rgb(14 88 156) 25%, rgba(95, 179, 228, 1) 78%, rgba(30, 119, 191, 1) 100%);
	font-size: 16px;
	padding: 11px 16px 7px;
	margin-bottom: 14px;
	border-radius: 5px 5px 0 0;
	border-bottom: #004384 4px solid;
}

#MainConts>h1.has-subtitle{
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	position: relative;
}


#MainConts>h1 .h1-subtitle {
	@font-face {
		font-family: 'MyYuMinchoC';
		src: local('YuMincho-Demibold'),
			/* for Win */
			local('YuMincho Demibold');
		/* for Mac */
	}
	font-family :'Yu Mincho',
	'YuMincho',
	sans-serif;
	color: #111;
	font-style: italic;
	background-color: rgba(255, 255, 255, 0.6);
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	clip-path: polygon(10% 0%, 100% 0, 100% 100%, 0 100%);
	padding:2px .5em 0 1em;
}
@media (max-width: 768px){
#MainConts>h1.has-subtitle{
	flex-direction: column;
}
	#MainConts>h1 .h1-subtitle{
		position: relative;
		transform: translateY(0);
		top:0;
		display: inline-block;
  max-width: 100%;
  word-break: break-all;
	clip-path: none;
	padding:2px .5em 0 .5em;
  vertical-align: middle;
  box-sizing: border-box;
	margin-top: 5px;
	}

}
.entrybody h2 {
	font-size: 15px;
	background: rgb(255, 255, 255);
	background: linear-gradient(180deg, rgba(255, 255, 255, 1) 36%, rgba(242, 242, 242, 1) 100%);
	margin-bottom: 5px;
	padding: 9px 22px 6px;
	font-weight: normal;
	border: 1px solid #d3d3d5;
	border-radius: 3px;
	position: relative;
}
.entrybody h2::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 11px;
	bottom: 0;
	width: 3px;
	height: 17px;
	background-color: rgb(12, 94, 162);
}
.entrybody h3 {
	color: #004384;
	background: url(../images/common/h3common.gif) 0 2px no-repeat;
	font-size: 13px;
	margin: 10px 0 0;
	padding: 0 5px 0 14px;
	zoom: 1;
}
.entrybody h3.read {
	background: none;
	margin: 0;
	color: #0DA6C6;
	font-size: 117%;
	font-weight: bold;
	padding: 0;
}
.entrybody h4 {
	background: url(../images/common/h4common.gif) 2px 10px no-repeat;
	border-bottom: 1px solid #AAA;
	font-size: 13px;
	margin: 10px 0 5px;
	padding: 5px 14px 2px;
	zoom: 1;
}
h4 {
	font-size: 13px;
}

/*
	リンクスタイル
*/
a {
	color: #3899BE;
}
a:hover {
	color: #B160BD;
}

/*#Show a span.e-color{
	color:#3899BE;
}
#Show a:hover span.e-color{
	color:#B160BD;
}*/

/*
	段落
*/
#Contents p,#Contents_Top p {
	padding: 0.5em 0.2em;
}

/* 強調文用　青字 */
#Contents .read,#Contents_Top .read {
	color: #0DA6C6;
	font-size: 117%;
	/* 14px指定 */
	font-weight: bold;
	padding: 5px 0;
}

/* ※印 補足強調用　赤字 */
#Contents .attention,#Contents_Top .attention {
	color: #CC0000;
	font-weight: bold;
	font-size: 92%;
}
#Contents p.attention,#Contents_Top p.attention {
	padding: 0.02em 0 0.2em 1em;
	text-indent: -1em;
	overflow: hidden;
}

/* 補足用　黒字 */
#Contents .small-attention,#Contents_Top .small-attention {
	color: #5A5A5A;
	font-weight: bold;
	font-size: 92%;
}
#Contents p.small-attention,#Contents_Top p.small-attention {
	padding: 0.02em 0 0.2em 1em;
	text-indent: -1em;
	overflow: hidden;
}

/* 補足用　文字右寄せ */
#Contents p.memo,#Contents_Top p.memo {
	text-align: right;
	font-size: 92%;
	padding: 0;
}

/* 文字真ん中寄せ */
#Contents p.read-center,#Contents_Top p.read-center {
	text-align: center;
}

.conts_image img {
	padding: 10px 0.2em;
}

/* インデント */
#Contents .attention_txt,#Contents_Top .attention_txt {
	margin-left: 1em;
	text-indent: -1em;
}

/*
	テーブルのベーシックスタイル
	<table>
		<tr>
			<th></th>
			<td></td>
		</tr>
	</table>
*/

.entrybody table {
	background: none;
	border-collapse: collapse;
	margin: 10px 0;
}
.entrybody table th,
.entrybody table td {
	border: 1px solid #C3C3C3;
	padding: 0.6em 0.8em;
	vertical-align: top;
}
.entrybody table th {
	background: #D2E6E8;
	font-weight: bold;
	text-align: left;
	/*	letter-spacing:0.15em;
*/
}
.entrybody table td {}

.entrybody table thead th {
	color: #FFF;
	background: #319BD2;
	text-align: center;
}
.entrybody table thead th a {
	color: #FFF;
}

/* テーブル　レイアウト01 */
table.table-layout01 {
	width: 100%;
	margin: 10px auto;
}
table.table-layout01 th,
table.table-layout01 td {
	border: 1px solid #C3C3C3;
	vertical-align: middle;
}
table.table-layout01 th {
	background-color: #fff;
	background-image: linear-gradient(to bottom, #FFFFFF 1px, #E2E7EB 1px, #FFFFFF 40px);
	color: #0F66A9;
	white-space: normal;
}

/* th内のリスト配色 */
table.table-layout01 th ul {
	color: #333;
}

/* テーブル　レイアウト02 */
table.table-layout02 {
	width: 100%;
	margin: 2px auto 10px;
}
table.table-layout02 th,
table.table-layout02 td {
	border: none;
	border-bottom: 1px solid #C3C3C3;
	padding: 0.8em 1.5em;
	vertical-align: middle;
}
table.table-layout02 th {
	background: none;
	color: #0F66A9;
}

/* テーブル　レイアウト03 */
table.table-layout03 {
	width: 100%;
	margin: 2px auto 10px;
}
table.table-layout03 th,
table.table-layout03 td {
	border: none;
	border-bottom: 1px solid #D9E3E6;
	padding: 0.8em 1.5em;
	vertical-align: middle;
}
table.table-layout03 th {
	background: none;
	color: #0F66A9;
	white-space: nowrap;
}
table.table-layout03 .even th,
table.table-layout03 .even td {
	background: #E6EEF0;
}

/* テーブル　横幅100% */
table.max {
	width: 100%;
}
/* テーブル　縦中央寄せ */
table.va-mid th,
table.va-mid td {
	vertical-align: middle;
}
/* テーブル　横スクロール */
.table-container-scroll {
	width: 100%;
	overflow-x: auto;
	scrollbar-width: thin;
	/* Firefox用：スクロールバーを細くする */
	scrollbar-color: #5c5c5c #f2f2f2;
	/* Firefox用：つまみの色とトラックの色 */
	margin-bottom: 10px;
}
/* WebKit系ブラウザ用：スクロールバーのカスタマイズ */
.table-container-scroll::-webkit-scrollbar {
	height: 10px;
	/* 横スクロールバーの高さ */
}

.table-container-scroll::-webkit-scrollbar-track {
	background: #f2f2f2;
	/* トラック部分の背景 */
	border-radius: 10px;
	/* トラックの角を丸く */
}

.table-container-scroll::-webkit-scrollbar-thumb {
	background-color: #5c5c5c;
	/* つまみ部分の色 */
	border-radius: 10px;
	/* つまみの角を丸く */
	border: 2px solid #f2f2f2;
	/* つまみの周囲にトラックの色を追加 */
}

.table-container-scroll::-webkit-scrollbar-thumb:hover {
	background-color: #777;
	/* ホバー時に色を変更 */
}
.table-container-scroll table {
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
}

/*
	定義リストのベーシックスタイル
	<dl>
		<dt></dt>
		<dd></dd>
	</dl>
*/

.entrybody dl {
	width: 100%;
	margin: 0 auto;
}
.entrybody dt {
	padding: 10px 0 0;
}
.entrybody dd {
	padding: 4px 0 10px;
}

/* 定義リスト　レイアウト01 */
dl.dl-layout01 dt {
	color: #004384;
	padding: 5px 0 0;
	font-weight: bold;
	font-size: 13px;
}

/*
	通常リスト
	<ul>
		<li></li>
	</ul>
*/
.entrybody ul {
	margin: 6px 8px;
	list-style: none;
}
.entrybody li {
	list-style: none;
	background: url(../images/common/list_mark1.gif) 0 8px no-repeat;
	padding: 2px 0 2px 12px;
}

/*
	ナンバリングリスト
	<ol>
		<li></li>
	</ol>
*/
.entrybody ol {
	margin: 0;
	padding: 5px 10px 5px 28px;
	overflow: hidden;
}
.entrybody ol li {
	line-height: 1.5;
	list-style: decimal;
	background: none;
	padding: 2px 0;
}
.entrybody ol li li {
	list-style: katakana-iroha;
}

.entrybody ol li ul li {
	list-style-type: disc;
}

/* 強調 */
em {
	font-weight: bold;
}
strong {
	font-weight: bold;
}

/* 取り消し */
del {
	text-decoration: overline;
}

/* コード */
code {}

/* 引用 */
blockquote {
	width: 80%;
	margin: 0 auto;
	padding: 1em;
	border: 1px dashed #ccc;
	background: #f6f6f6;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
cite {
	font-style: normal;
}
cite:before {
	content: "“";
}
cite:after {
	content: "”";
}

/* 上付き・下付き */
sup {
	font-size: 70%;
	vertical-align: text-top;
}
sub {
	font-size: 70%;
	vertical-align: text-bottom;
}

/* 文字色定義 */
.red {
	color: #cc0000;
}

/* ページトップ */
.page-top {
	clear: both;
	text-align: right;
	padding-top: 20px;
}
@media (max-width: 768px) {
	.page-top {
		padding-right: 10px;
	}
}
.page-top-list {
	clear: both;
	text-align: right;
	padding-top: 10px;
}

/* 詳細ページリンク */
/*#EventBody a.external,*/
.newslist a,
/*#InvestorBody a.external,*/
a.external-page {
	/* background:url(../images/icon/page.gif) no-repeat scroll 1px 0; */
	padding-left: 20px;
	display: block;
}
a.external-page {
	background: url(../images/icon/page.gif) no-repeat scroll 1px 0 !important;
}
/* 外部リンク */
a.external[href^="http://"],
a.external[href^="https://"],
a.external-link {
	padding-left: 20px;
	display: block;
	position: relative;
}
a.external[href^="http://"]::before,
a.external[href^="https://"]::before,
a.external-link::before {
	content: "\f35d";
	font: var(--fa-font-solid);
	font-size: 13px;
	margin-right: 5px;
	position: absolute;
	left: 1px;
	top: 2px;
	color: #3899BE;
}
a.external-link {
	position: relative;
}
a.external-link::before {
	content: "\f35d";
	font: var(--fa-font-solid);
	font-size: 13px;
	margin-right: 5px;
	position: absolute;
	left: 1px;
	top: 2px;
}

/* 空リンク時にアイコンが表示されないよう対策 */
a[href=""].external-link::before {
	content: "";
}

#EventBody a.external[href^="http://"],
#EventBody a.external[href^="https://"],
.newslist a.external[href^="http://"],
.newslist a.external[href^="https://"],
#InvestorBody a.external[href^="http://"],
#InvestorBody a.external[href^="https://"] {
	background: url(../images/icon/external.gif) no-repeat scroll 0 4px;
	padding-left: 20px;
}

/* メール */
a.external[href^="mailto:"],
a.external-mail {
	padding-right: 20px;
	background: url(icon_mailto.gif) no-repeat center right;
	display: block;
}
#EventBody a.external[href^="mailto:"],
.newslist a.external[href^="mailto:"],
#InvestorBody a.external[href^="mailto:"] {
	padding-right: 20px;
	background: url(icon_mailto.gif) no-repeat center right;
}
/* PDF */
a.external[href$=".pdf"],
a.external-pdf {
	background: url(../images/icon/pdf.gif) no-repeat scroll 0 1px;
	padding-left: 20px;
	display: block;
}
a.external-pdf {
	background: url(../images/icon/pdf.gif) no-repeat scroll 0 1px !important;
}
#EventBody a.external[href$=".pdf"],
.newslist a.external[href$=".pdf"],
#InvestorBody a.external[href$=".pdf"] {
	background: url(../images/icon/pdf.gif) no-repeat scroll 0 1px;
	padding-left: 20px;
}

/*Word*/
a.external[href$='.doc'] {
	padding-right: 20px;
	background: transparent url(icon_doc.gif) no-repeat center right;
}
#EventBody a.external[href$='.doc'],
.newslist a.external[href$='.doc'],
#InvestorBody a.external[href$='.doc'] {
	padding-right: 20px;
	background: transparent url(icon_doc.gif) no-repeat center right;
}
/*Exile*/
a.external[href$='.xls'] {
	padding-right: 20px;
	background: transparent url(icon_xls.gif) no-repeat center right;
}
#EventBody a.external[href$='.xls'],
.newslist a.external[href$='.xls'],
#InvestorBody a.external[href$='.xls'] {
	padding-right: 20px;
	background: transparent url(icon_xls.gif) no-repeat center right;
}

/* 画像全体 */
img {
	max-width: 100%;
	box-sizing: border-box;
}
img:not([src$=".svg"]) {
	height: auto;
}
/* 画像回り込み */
.colmun-left {
	float: left;
	padding-top: 8px;
	padding-right: 15px;
	font-size: 94%;
	text-align: center;
}
.colmun-right {
	float: right;
	padding-top: 8px;
	padding-left: 15px;
	font-size: 94%;
	text-align: center;
}
.colmun-center {
	padding-top: 8px;
	font-size: 94%;
	text-align: center;
}
.colmun-left img,
.colmun-right img,
.colmun-center img {
	padding-bottom: 5px;
}
#Contents .colmun-left p,#Contents_Top .colmun-left p,
#Contents .colmun-right p,#Contents_Top .colmun-right p {
	padding-top: 0;
	padding-bottom: 10px;
}

.colmun-center-border {
	border: 1px solid #CCC;
	margin: 10px 0;
	text-align: center;
	padding: 15px;
}
.colmun-center-border img {}


/* Googlemap */
#map {
	margin: 15px auto 20px
}
#map2 {
	margin: 15px auto 20px
}
/* 地図が正しく表示されたときのスタイル */
.map {
	clear: both;
	width: 534px;
	height: 400px;
	background: #DDD;
	margin: 0 auto;
}
/* 地図が正しく表示されなかったときのスタイル */
.mapError {
	color: #FF0000;
	background: none !important;
}

/* 印刷関連スタイル */
.print-box {
	display: none
}



/* =======================================================
  ボタンスタイル
  ======================================================= */

.btn-link {


	border: 1px solid #999;
	padding: 0.5em 1em;
	border-radius: 5px;


	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;

	background: #014f8f;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.16, #10a7d5), color-stop(0.91, #014f84));
	background: -webkit-linear-gradient(top, #10a7d5 16%, #014f84 91%);
	background: -moz-linear-gradient(top, #10a7d5 16%, #014f84 91%);
	background: -o-linear-gradient(top, #10a7d5 16%, #014f84 91%);
	background: -ms-linear-gradient(top, #10a7d5 16%, #014f84 91%);
	background: linear-gradient(to bottom, #10a7d5 16%, #014f84 91%);

}
.btn-link:hover {

	background: #16a0fe;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.91, #16a0fe), color-stop(0.16, #aae6f8));
	background: -webkit-linear-gradient(top, #aae6f8 16%, #16a0fe 91%);
	background: -moz-linear-gradient(top, #aae6f8 16%, #16a0fe 91%);
	background: -o-linear-gradient(top, #aae6f8 16%, #16a0fe 91%);
	background: -ms-linear-gradient(top, #aae6f8 16%, #16a0fe 91%);
	background: linear-gradient(to bottom, #aae6f8 16%, #16a0fe 91%);

}
.btn-link:active {
	background: #737373;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #cfcfcf), color-stop(0.14, #737373));
	background: -webkit-linear-gradient(top, #737373 14%, #cfcfcf 100%);
	background: -moz-linear-gradient(top, #737373 14%, #cfcfcf 100%);
	background: -o-linear-gradient(top, #737373 14%, #cfcfcf 100%);
	background: -ms-linear-gradient(top, #737373 14%, #cfcfcf 100%);
	background: linear-gradient(to bottom, #737373 14%, #cfcfcf 100%);

	-webkit-box-shadow: 0 2px 2px #666 inset, 2px 0 2px #666 inset;
	-ms-box-shadow: 0 2px 2px #666 inset, 2px 0 2px #666 inset;
	-o-box-shadow: 0 2px 2px #666 inset, 2px 0 2px #666 inset;
	-moz-box-shadow: 0 2px 2px #666 inset, 2px 0 2px #666 inset;

}
a.btn-link {
	color: #ffffff;
	text-decoration: none;
}



.wf-table-moderate td {
	width: 140px;
}


/* サポートページ */

#guide div.flow-image {
	float: right;
	margin-left: 20px;
}

#voice .clearfix div.image-dummy {
	background: #666;
	float: left;
	height: 150px;
	margin-top: 5px;
	margin-right: 20px;
	margin-bottom: 20px;
	width: 150px;
}
#voice .clearfix p {
	float: right;
	width: 565px;
}

#voice .clearfix p.arrow {
	float: right;
	width: 565px;
	text-align: center;
}
#voice .clearfix p.before {
	color: #666;
}
#voice .clearfix p.after {
	color: #000;
	font-weight: bold;
}

#ContactInfo .info_area {
	width: 100% !important;
	margin: 0 !important;
	padding: 0px !important;
	border: none !important;
	box-sizing: border-box;
}

#ContactInfo .info_area h3 {
	margin-bottom: 10px;
	@media (max-width: 768px) {
		margin-bottom: 5px;
	}
}
#ContactInfo .info_area .contact_button_style {
	display: block;
	padding: 12px 0px 12px 10px;
	color: #FFFFFF;
	font-size: 13.5px;
	font-weight: bold;
	text-decoration: none;
	border-radius: 5px;
	background-color: #004485;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.16, #0D6298), color-stop(0.91, #004485));
	background: -webkit-linear-gradient(top, #0D6298, #004485);
	background: -moz-linear-gradient(top, #0D6298, #004485);
	background: -o-linear-gradient(top, #0D6298, #004485);
	background: -ms-linear-gradient(top, #0D6298, #004485);
	background: linear-gradient(to bottom, #0D6298, #004485);
	@media (max-width: 768px) {
		font-size: 13px;
		padding: 6px 0px 6px 10px;
	}
}

#ContactInfo .info_area .faq_button_style {
	background-color: #b33fb3;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.16, #b33fb3), color-stop(0.91, #8d2e8d));
	background: -webkit-linear-gradient(top, #b33fb3, #8d2e8d);
	background: -moz-linear-gradient(top, #b33fb3, #8d2e8d);
	background: -o-linear-gradient(top, #b33fb3, #8d2e8d);
	background: -ms-linear-gradient(top, #b33fb3, #8d2e8d);
	background: linear-gradient(to bottom, #b33fb3, #8d2e8d);
}

#ContactInfo .info_area .manual_button_style {
	background-color: #cd5c5c;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.16, #cd5c5c), color-stop(0.91, #9f4242));
	background: -webkit-linear-gradient(top, #cd5c5c, #9f4242);
	background: -moz-linear-gradient(top, #cd5c5c, #9f4242);
	background: -o-linear-gradient(top, #cd5c5c, #9f4242);
	background: -ms-linear-gradient(top, #cd5c5c, #9f4242);
	background: linear-gradient(to bottom, #cd5c5c, #9f4242);
}

#ContactInfo .info_area .contact_button_style:hover {
	opacity: 0.8;
	color: #FFFFFF;
}

.youtube {
	width: 100%;
	aspect-ratio: 16 / 9;
}
.youtube iframe {
	width: 100%;
	height: 100%;
}

#Contents .grid-container,#Contents_Top .grid-container {
	overflow: hidden;
	margin: 10px 0;
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(234px, 1fr));
}
#Contents .grid-item .img,#Contents_Top .grid-item .img {
	text-align: center;
}
#Contents .grid-container.items-2,#Contents_Top .grid-container.items-2 {
	grid-template-columns: repeat(2, 1fr);
}
/* 3つの場合は33.33%ずつ */
#Contents .grid-container.items-3,#Contents_Top .grid-container.items-3 {
	grid-template-columns: repeat(3, 1fr);
}

/* 4つの場合は25%ずつ */
#Contents .grid-container.items-4,#Contents_Top .grid-container.items-4 {
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
	#Contents .grid-container,#Contents_Top .grid-container,
	#Contents .grid-container.items-2,#Contents_Top .grid-container.items-2,
	#Contents .grid-container.items-3,#Contents_Top .grid-container.items-3,
	#Contents .grid-container.items-4,#Contents_Top .grid-container.items-4 {
		grid-template-columns: 1fr !important;
		/* 全てのグリッドを1列に */
		margin-bottom: 20px;
	}
}
#Contents .grid-item-header,#Contents_Top .grid-item-header {
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	padding: 5px 10px;
	margin-bottom: 10px;
	/* 他、必要なスタイルがあれば追加 */
}
#Contents .grid-item-header.read,#Contents_Top .grid-item-header.read {
	color: #fff;
	background-color: #0DA6C6;
	font-weight: bold;
}

#Contents .grid-item-desc,#Contents_Top .grid-item-desc {
	font-size: 1em;
	line-height: 1.5;
}

	/* YouTube動画のスタイル */
.youtube {
  width: 100%;
  max-width:560px;
  max-height:315px;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
  max-width:560px;
  max-height:315px;
}