@charset "UTF-8";

/*-----------------------------------------------
__Common, Layout
-----------------------------------------------*/
html{
	overflow-y: scroll;
}
body,header,main,footer,div,dl,dt,dd,ul,ol,li,h2,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,select,label,p,blockquote,th,td,dl,dt,dd,section,article,a,figure{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body{
	background:white;
	font-family: Arial, "游ゴシック", "Yu Gothic", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
	line-height:1.7;
	font-size: 1.1rem;
    font-weight: 500;
	letter-spacing: 0.05em;
	color:#192C55;
}
address,caption,cite,code,dfn,em,strong,th,var{
	font-style: normal;
}
li,h2,h2,h3,h4,h5,h6{
	line-height: 1.2;
}
table{
	border-collapse: collapse;
	border-spacing: 0;
}
caption,th{
	text-align: left;
}
q:before,q:after{
	content: '';
}
object,embed{
	vertical-align: top;
}
legend{
	display: none;
}
hr{
	border:none;
	border-top:1px solid #ddd;
	margin:60px auto;
}
hr.b_none{
	border-top:none;
}
h2,h2,h3,h4,h5,h6{
	font-size: 100%;
}
img,abbr,acronym,fieldset{
	border: 0;
}
img{
	vertical-align: bottom;
	max-width: 100%;
	height: auto;
	width:auto;
}
a img{
	transition: all ease .3s;
}
li{
	list-style-type: none;
}
p{
	margin-bottom: 1.4em;
}
a{
	text-decoration:none;
	transition: all ease .3s;
}
em{
	font-style: normal;
	font-weight: bold;
}
.red{
	color: #ca1a23;
}
#container,
header,
main,
footer{
	width: 100%;
	margin: 0 auto;
}
#container{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
footer{
    margin-top: auto;
    margin-bottom: 0;
}
.wrap{
	width: 90%;
	max-width: 1100px;
	margin:0 auto;
}
.fl_box{
	display: flex;
}
.fl_box.wrap{
	width: 90%;
}
.fl_box.w_wrap{
	width: 90%;
}

/*-----------------------------------------------
__Design
-----------------------------------------------*/
main a{
	color:#00A7EA;
	text-decoration:underline;
}
main a:hover{
	text-decoration:none;
}
main a[href$=".pdf"]::after,
main a[href$=".doc"]::after,
main a[href$=".docx"]::after,
main a[href$=".xls"]::after,
main a[href$=".xlsx"]::after{
	margin-left: 0.5em;
	vertical-align: middle;
	display: inline-block;
	text-align: center;
	font-size: 0.5em;
	padding: 1px 5px;
	border-radius: 0;
	background: #192C55;
	color: #fff;
	line-height: 2;
	white-space: nowrap;
}
main a[href$=".pdf"]::after{
	content:"PDF";
}
main a[href$=".doc"]::after,
main a[href$=".docx"]::after{
	content:"Word";
}
main a[href$=".xls"]::after,
main a[href$=".xlsx"]::after{
	content: "Excel";
}
main a[href$=".pdf"].none::after,
main a[href$=".doc"].none::after,
main a[href$=".docx"].none::after,
main a[href$=".xls"].none::after,
main a[href$=".xlsx"].none::after{
	display: none;
}

header{
	text-align: center;
	padding: 25px 0;
	border-bottom: 2px solid #d9d9d9;
}
header #logo img{
	height: 32px;
	width: auto;
}
#notice{
	background: #F2F7FA;
	padding: 80px 0;
}
#notice section{
	border: 1px solid #00608D;	
}
h1{
	margin: 0;
	line-height: 1;
}
h2{
	color: #fff;
	background: #00608D;
	padding: 20px;
	font-size: 2rem;
	gap: 16px 12px;
	display: flex;
    justify-content: center;
}
h2 img{
	width: 36px;
}
#notice section .txt_box{
	padding: 36px;
	background: #fff;
}
.contents{
	padding: 100px 0;
}
h3{
    display: flex;
    justify-content: center;
	border-bottom: 3px solid #004777;
}
h3 .fl_box{
    display: inline-flex;
    min-width: 300px;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 14px 14px 0 0;
    background: #004777;
    color: #fff;
    min-height: 80px;
    gap: 0 20px;
    padding: 10px 20px;
}
h3 i img{
    height: 40px;
}
#ib h3{
	border-color:#00739E;
}
#ib h3 .fl_box{
    background-color: #00739E;
}
.contents #ib{
	margin-bottom: 100px;
}
.contents .fl_box.sm_bl{
	justify-content: space-between;
}
.contents .fl_box > div{
	width: 49%;
	background: #F2F7FA;
	padding: 36px;
}
.contents dl{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 20px 0;
	font-weight: bold;
}
.contents dt{
	font-size: 1.3rem;
}
.contents dd{
	width: 100%;
}
.btn a{
	display: block;
	text-decoration: none;
	color: #fff;
	font-size: 1.4rem;
	border-radius: 6px;
	background: #00608D;
	padding: 20px 25px;
	position: relative;
	filter: drop-shadow(0 3px 0 rgba(0,0,0,0.2));
	text-shadow: 0 2px 0 rgba(0,0,0,0.2);
}
.btn a:hover{
	transform: translateY(5px);
	filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}
.btn a::after{
	content: "";
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	border: 2px solid #fff;
	border-radius: 50%;
	background-image: url('./images/icon_arrow.svg');
	background-repeat: no-repeat;
	background-size: 30%;
	background-position: center;
}
.web_bk .btn a{
	background: #ef6b23 ;
}
.trade .btn a{
	background: #ea9712;
}
.web_fb .btn a{
	background: #00A7EA;
}

footer > small{
	font-size: 0.7rem;
	background: #00608D;
	display:block;
	clear: both;
	color:rgba(255,255,255,0.6);
	text-align:center;
	padding: 30px 0;
}

@media screen and (min-width: 0px) and (max-width: 600px){
	h2{
		font-size: 1.6rem;
		flex-direction: column;
		align-items: center;
		gap: 16px 0;
	}
	.fl_box.sm_bl{
		flex-direction: column;
	}
	.contents .fl_box.sm_bl{
		gap: 16px 0;
	}
	.contents .fl_box > div{
		width: 100%;
	}
}