@charset "utf-8";

article{
width:100%;
margin:0 auto;
padding:0 0 4rem;
}

.main_img{
margin:0 auto 2rem;
padding:0;
text-align:center;
}

/* h -------------------------------------*/
h2 {
margin:0 auto 2.5rem;
padding: 1.4rem 0 1.2rem;
color:#1B435D;
font-size:2.6rem;
text-align:center;
border-top:2px solid #1B435D;
border-bottom:1px dotted #1B435D;
}
@media screen and (max-width: 750px){
h2{ margin:3rem auto 4rem; padding: 1rem 0 .8rem; font-size:2.3rem;}
}

h3 {
  position: relative;
  color: #1B435D;
  margin:4rem 0 4rem;
  padding:0 0 0 .5rem;
  font-size:2.3rem;
}
h3:before {
  content: "";
  position: absolute;
  background:rgba(213,238,255,.5);
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  top: 50%;
  left: -15px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -1;
}
@media screen and (max-width: 750px){
h3 { margin:2rem auto 4rem; font-size:2rem;}
h3:before {width: 3.5rem; height: 3.5rem;}
}

h4{
	position: relative;
	margin:3rem 0 2rem 0;
	padding:0 0 .3rem 0;
	font-size:2rem;
	color: #3967C4;
	border-bottom:#3967C4 dotted 2px;
}
h4:first-letter{ font-size:128%;}
@media screen and (max-width: 750px){
h4 { padding: 0 0 0 .2rem; font-size:1.7rem;}
}
h5{
	position: relative;
	overflow: hidden;
	padding: 0 0 .5rem .5rem;
	font-size:1.85rem;
	color: #1B435D;
}
h5:before,h5:after{
	content: "";
	position: absolute;
	bottom: 0;
}
h5:before{
	border-bottom: 3px solid #3967C4;
	width: 100%;
}
h5:after{
	border-bottom: 3px solid #efefef;
	width: 100%;
}

h6{
font-size:1.7rem;
color: #3967C4;
padding: 0 0 0 1.5rem;
margin:0 0 1rem 0;
}
@media screen and (max-width: 750px){
h6{ font-size:1.5rem;}
}

/* case -----------------------------------*/
.case_bg{ background:url(/images/top/case_bg.jpg) no-repeat center bottom;}
@media screen and (max-width: 750px){ 
.case_bg{ background:none; background:#f5faff;}
}
.case_txt{ font-size:85%;}
.case_txt > span{ font-size:120%; font-weight:bold;}


/* card ---------------------------------------------------------------*/
.card{
padding:0;
box-shadow:0 3px 6px rgba(0,0,0,.16);
border: 2px solid transparent;
}
@media screen and (max-width: 750px){ 
.card{ box-shadow:0 3px 6px rgba(0,0,0,.16);}
}
.card img{
width:100%;
text-align:center;
margin:0 auto;
}
.card p{
margin:2rem auto 1.5rem;
padding:0 1rem 0;
text-align:center;
}
@media screen and (max-width: 750px){ 
.card p{ margin:1.5rem auto 1.2rem; padding:0 .6rem 0;}
}
.card p:hover{ color:#78BBE6;}
.card:hover{ border: 2px solid #78BBE6;}

/* banner area -------------------------------------------------------------*/
.top_bannerarea,.mini_bannerarea{
display:block;
width:1280px;
margin:0 auto;
padding:1rem 1rem 0 1rem;
}
@media screen and (max-width: 1279px){
.top_bannerarea,.mini_bannerarea{
width:97%;
margin:0 auto;
}
}
@media screen and (max-width: 750px){
.top_bannerarea,.mini_bannerarea{
width:100%;
margin:0 auto;
padding:1rem;
}
}
.top_bannerarea > ul{
display:flex;
flex-wrap:wrap;
align-items:flex-start;
align-content:flex-start;
margin:1.2rem 0;
list-style:none;
}
@media screen and (max-width: 1279px){
.top_bannerarea > ul{ justify-content: center;}
}

.top_bannerarea > ul > li{ margin:0 1rem .5rem 0;}
.top_bannerarea > ul > li a{ text-decoration:none;}
.top_bannerarea > hr{
border-bottom:1px dotted #1B435D;
border-top:none;
border-right:none;
border-left:none;
}
.top_bannerarea > hr.sm{ border-bottom:1px dotted #F99F48;}
.top_bannerarea > hr.ev{ border-bottom:1px dotted #78BBE6;}
@media screen and (max-width: 750px){
.top_bannerarea > ul > li{ width: 16rem; margin:0 .5rem .5rem 0;}
}
.mini_bannerarea > ul{
display:flex;
flex-wrap:wrap;
justify-content:center;
margin:1.2rem 0;
list-style:none;
}
.mini_bannerarea > ul > li{ margin:0 1rem .5rem 0;}
@media screen and (max-width: 750px){
.mini_bannerarea > ul > li{ width: 16rem; margin:0 .5rem .5rem 0;}
}

/* news event ----------------------------------------------------------*/
dl.news{ margin:0 0 .5rem 0; padding:0; border-bottom:1px dotted #ccc; font-size:98%;}
dl.news > dt{ margin:0; padding:0;}
dl.news > dd{ margin:0; padding:0;}

/* news event label -------------------------------------------------------------*/
.top_important{ background:#e74c3c; color:#FFF; font-size:1.1rem; padding:0 .5rem; margin:0 0 0 .2rem;}
.top_label_press{ background:#5cbdaa; color:#FFF; font-size:1.1rem; padding:0 .5rem; margin:0 0 0 .2rem;}
.top_label_support{ background:#6aa6ce; color:#FFF; font-size:1.1rem; padding:0 .5rem; margin:0 0 0 .2rem;}
.top_label_whatsnew{ background:#f7ba5a; color:#FFF; font-size:1.1rem; padding:0 .5rem; margin:0 0 0 .2rem;}
.top_label_event{ border:1px solid #4D5AAF!important; color:#4D5AAF; font-size:1.1rem; padding:0 .5rem; margin:0 0 0 .2rem;}
@media screen and (max-width: 750px){
.top_important,.top_label_press,.top_label_support,.top_label_whatsnew,.top_label_event{ font-size:.8rem;}
}

/* news link ------------------------------------------------------*/
.news_category{
display:flex;
justify-content:space-around;
align-items: center;
width:80%;
margin:0 auto 3rem;
padding:0;
}
.top_label_press02 a{ background:#5cbdaa; padding:.5rem .8rem .4rem; font-weight:bold; color:#fff;}
.top_label_support02 a{ background:#6aa6ce; padding:.5rem .8rem .4rem; font-weight:bold; color:#fff;}
.top_label_whatsnew02 a{ background:#f7ba5a; padding:.5rem .8rem .4rem; font-weight:bold; color:#fff;}
.top_label_press02 a:hover{ color:#fff; background:#64d2bd;}
.top_label_support02 a:hover{ color:#fff; background:#73b4e0;}
.top_label_whatsnew02 a:hover{ color:#fff; background:#ffc364;}
@media screen and (max-width: 750px){
.news_category{ width:95%;}
}


/* button -------------------------------------------------------------*/
.top_btn{
  display: inline-block;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  border: 2px solid #ff6f61;
  background-color: #ff6f61;
  color: #fff!important;
  white-space: nowrap;
  padding: .8rem 2.5rem;
  margin:1.5rem 1rem;
  font-size: 1.6rem;
  line-height: 1.5;
  border-radius: 50px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-shadow: 0 3px 6px rgba(0,0,0,.16);
  transition: all .3s;
}
.top_btn a{color: #ff6f61!important;}
.top_btn:hover { text-decoration:none; background-color:#fff; border: 2px solid #ff6f61; color: #ff6f61!important;}