@charset "utf-8";
/* Desktop First */
.visual_wrap { padding:35px 0; background:#f6f7f9;}
.visual_wrap .container { display:flex; flex-wrap: wrap; justify-content: space-between; }
#contents.main_contents { padding:0;}
#mVisual {  width:63%; border:1px solid #e6e9ed;border-radius:10px; background:#fff url("../images/visual_bg.png") no-repeat right top; background-size:cover;}
#mVisual a { display:block; width:100%; }
#mVisual a img { width:100%;}
#mVisual .visual01{ font-size:30px; background:url("../images/visual_img01.png") no-repeat 35px center; line-height:1.3; text-align:center; padding:100px 0 0 35%; height:350px; }
#mVisual .visual01 .vtext01{ font-size:40px; color:#1647aa; letter-spacing:-3px; }
#mVisual .visual01 .vtext02{ color:#333; letter-spacing:-2px; }
#mVisual .visual01 .vtext03{ color:#e4062b;  letter-spacing:-2px; }
#myIncident { width:calc(37% - 14px); margin-left:14px; border:1px solid #e6e9ed;border-radius:10px; padding:25px; background:#fff;}
#myIncident h4 { font-size:20px; color:#333; font-weight:bold; margin-bottom:10px; letter-spacing:-1px;}
#myIncident .inci_btn { display:flex; flex-wrap: wrap; justify-content: space-between;margin-bottom:17px;}
#myIncident .inci_btn a { width: calc(25% - 3px ); display:inline-block; color:#fff; padding: 10px 0; font-weight:500; border:1px solid; text-align:center; }
#myIncident .inci_btn a:nth-child(2){width:calc(35% - 3px);}
#myIncident .inci_btn a:last-child{width:calc(40% - 3px );}
#myIncident .inci_btn .btn01{ background:#ff4060; border-color:#ea1c3e; }
#myIncident .inci_btn .btn02{ background:#0f4c81; border-color:#154772}
#myIncident .inci_infor  { border:1px solid  #e6e9ed;  padding:10px 15px;}
#myIncident .inci_infor h5 { font-weight: bold; color:#0f4c81;  border-bottom:0; font-size:16px; margin-bottom:10px;}
#myIncident .inci_infor ul {  border-top:0; word-break:keep-all; font-size:15px; min-height:100px;}
#myIncident .inci_infor ul dl { margin-bottom:10px; font-size:20px}
#myIncident .inci_infor ul dt { background:#8289a1; color:#fff; display:inline-block; padding:0 10px; border-radius:15px;}
#myIncident .inci_banner  { padding:20px 0 0 0; }
#qLink01 { background:#0087c6; padding:35px 0; margin-bottom:30px;}
#qLink01 ul { display:flex; flex-wrap: wrap; justify-content: space-between; text-align:center;}
#qLink01 ul li { width:25%;}
#qLink01 ul li a { position:relative; display:inline-block; width:100%; color:#fff; border-right:1px solid rgba(0,0,0,0.2);border-left:1px solid rgba(255,255,255,0.2); font-weight:500;}
#qLink01 ul li:first-child a{ border-left:0;}
#qLink01 ul li:last-child a{ border-right:0;}
#qLink01 ul li a:before{ position:relative; content:""; display:block; width:83px; margin:0 auto 10px auto; height:83px; background:#fff; border-radius:50%; background-position:center; background-repeat:no-repeat;}
#qLink01 ul li:first-child a:before { background-image:url("../images/qlink01_icon01.png"); }
#qLink01 ul li:nth-child(2) a:before { background-image:url("../images/qlink01_icon02.png"); }
#qLink01 ul li:nth-child(3) a:before { background-image:url("../images/qlink01_icon03.png"); }
#qLink01 ul li:nth-child(4) a:before { background-image:url("../images/qlink01_icon04.png"); }
#qLink01 ul li:last-child a:before { background-image:url("../images/qlink01_icon05.png"); }

.main_contents h4.botit { font-size:18px; font-weight:bold; color:#333; height:52px; line-height:52px; padding:0 52px 0 20px;}
.main_contents a.more { position:absolute; display:inline-block; width:52px; height:52px; right:0; top:0; background:url("../images/icon_more.png") no-repeat center; text-indent:-999em; border-left:1px solid #e6e9ed}
.main_contents ul.bolist { border-top: 1px solid #e6e9ed; padding:20px;}
.main_contents ul.bolist li { position:relative; clear:both; float:none; margin-bottom:5px; padding-left:7px;}
.main_contents ul.bolist li:before { content:""; display:block; position:absolute; width:3px; height:3px; background:#777; left:0; top:12px;}
.main_contents ul.bolist li:after { content:""; display:block; clear:both;}
.main_contents ul.bolist li a { float:left; width:calc(100% - 100px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:15px;}
.main_contents ul.bolist li span{ float:right; width:75px; font-size:15px; color:#b7b7b7;}
#boNotice { position:relative; width:calc(39% - 30px); float:left;border:1px solid #e6e9ed; border-radius:10px; }
#boData { position:relative; width:calc(39% - 30px); margin-left:30px; float:left;border:1px solid #e6e9ed; border-radius:10px; }
#qLink02 {  width:calc(22% - 15px);  float:left; margin-left:30px;}
#qLink02 li { border:1px solid #e6e9ed; border-radius:10px;}
#qLink02 li a { display:block; padding:30px 20px;}
#qLink02 li:nth-child(1) { background:url("../images/qlink02_icon01.png") no-repeat calc(100% - 20px) center; margin-bottom:30px;}
#qLink02 li:nth-child(2) { background:url("../images/qlink02_icon02.png") no-repeat calc(100% - 20px) center;}
#qLink02 li strong { font-size:18px; color:#333; display:block; line-height:1;}
#qLink02 li span { font-size:12px; display:inline-block; padding-right:10px; background:url("../images/icon_arrow.png") no-repeat right center;}
#banner { width:100%; border-top:1px solid #ccc; border-bottom:1px solid #ccc; margin-top:30px;}
#banner ul li { text-align:center; }
#banner ul li a { display:block; height:70px; line-height:70px;}
#banner .bx-wrapper img { margin:0 auto; vertical-align:middle; display:inline-block;}
#banner .bx-prev { background:url("../images/bn_prev.png") no-repeat center; width:15px; height:70px; left:0; top:16px; z-index:1;}
#banner .bx-next { background:url("../images/bn_next.png") no-repeat center; width:15px; height:70px; right:0; top:16px; z-index:1;}
#banner .bx-viewport { max-width:calc(100% - 100px); margin:0 auto;}


/* Tablet */
@media screen and (max-width:1024px){
	.container { padding:0 20px; box-sizing:border-box;}
	#mVisual { width:60%;}
	#mVisual .visual01{ font-size:20px; background-size:230px;padding-top:90px; background-position:20px center;height:100%;}
	#mVisual .visual01 .vtext01{ font-size:28px; letter-spacing:-2px; }
	#mVisual .visual01 .vtext02{ letter-spacing:-1px; }
	#mVisual .visual01 .vtext03{ letter-spacing:-1px; }
	#myIncident {width: calc(40% - 14px); padding:15px;}
	#myIncident h4 { font-size:17px; margin-bottom:5px;}
	#myIncident .inci_btn a { font-size:15px;}
	.main_contents h4.botit { font-size:17px; padding:0 40px 0 15px; line-height:40px; height:40px;}
	.main_contents a.more { width:40px; height:40px;}
	.main_contents ul.bolist { padding:15px;}
	#boNotice{ width:calc(39% - 20px);}
	#boData { width: calc(39% - 20px); margin-left:20px;}
	#qLink02 { width: calc(22% - 10px);margin-left:20px;}
	#qLink02 li a { padding:27px 15px;}	
	#qLink02 li:nth-child(1) { margin-bottom:20px;}
	#qLink02 li strong { font-size:17px;}

}
/* Moblie */
@media screen and (max-width:768px){
	.visual_wrap { padding:20px 0;}
	#mVisual { width:100%; margin-bottom:10px;}
	#mVisual .visual01 { height:200px; padding-top:60px; background-size:200px;}
	#myIncident { width:100%; margin-left:0;}
	#myIncident .inci_btn a { height:auto; }
	#qLink01 { padding:20px 0; margin-bottom:20px; font-size:13px;}
	#qLink01 ul li a:before { width:65px; height:65px; background-size:50%;}
	#qLink01 ul li a { word-break:keep-all; line-height:1.2;}
	#qLink01 ul li a span { display:block;}
	#boNotice { width:calc(50% - 10px);}
	#boData {width:calc(50% - 10px); margin-left:20px;}
	#qLink02 { margin-top:20px; width:100%; margin-left:0;display:flex; flex-wrap: wrap; justify-content: space-between; }
	#qLink02 li {width:calc(50% - 10px);}
	#qLink02 li:nth-child(1) { margin-bottom:0;}
}
@media screen and (max-width:640px){
	#mVisual .visual01 { padding:30px 20px; height:auto;  background-size:25%; background-position:10px center;}
	#qLink01 ul li a:before {  height:55px; width:55px; }
	.main_contents h4.botit, #qLink02 li strong{ font-size:16px;}
	#boNotice, #boData { width:100%; margin:0 0 20px 0;}
	#qLink02 { margin-top: 0px;}
	#qLink02 li:nth-child(1), #qLink02 li:nth-child(2) { background-size:50px; background-position:calc( 100% - 15px ) center;}
	#qLink02 li a{ padding: 20px 15px;}
}
@media screen and (max-width:400px){
	#mVisual .visual01 { font-size:14px;}
	#mVisual .visual01 .vtext01 { font-size:22px;}
	#mVisual .visual01 .vtext02, #mVisual .visual01 .vtext03 { letter-spacing:0; }
	#myIncident .inci_btn { margin-bottom:10px;}
	#myIncident .inci_btn a { font-size:13px; margin-bottom:4px; padding:5px 0;}
	#myIncident .inci_infor h5{ margin-bottom:5px; font-size:14px;}
	#myIncident .inci_infor dt { font-size:13px;}
	#myIncident .inci_infor ul dl dd { font-size:13px;}
	#qLink01 { padding:20px 0 10px 0;}
	#qLink01 ul li { margin-bottom:10px;}
	#qLink01 ul li a { border:0; }
	#qLink02 li:nth-child(1) { width:100%;margin-bottom:10px;}
	#qLink02 li:nth-child(2) { width:100%;}
}