@charset "utf-8";
/*****************************************************************************
CSS only for /ew/index.html
*****************************************************************************/

/* H2
-----------------------------------------*/
.H2{
  margin-top: 30px;
  padding-bottom: 26px;
  display: flex;
  align-items: center;
  font-size: 27px;
  font-weight: bold;
  color:#000;
  border-bottom: solid 1px #b4b4b4;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.H2{
  font-size: 24px;
}
}
.H2 span{
  margin-left: 27px;
  font-size: 13px;
  color:#4c4c4c;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.H2 span{
  font-size: 12px;
  margin-left: 15px;
}
}
/* H3
-----------------------------------------*/
.H3{
  margin-top: 60px;
  font-size: 20px;
  font-weight: bold;
  color: #191919;
}


/* Key
-----------------------------------------*/
.Key{
}
h1.Key__title{
  margin: 0;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
h1.Key__title{

}
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.Key__pc{
  display: none;
}
}
.Key__sp{
  display: none;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.Key__sp{
  display: block;
  width: 100%;
  height: auto;
}
}
.Key__link{
  display: none;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.Key__link{
  position: relative;
  margin: -60px 20px 0 20px;
  display: block;
}
.Key__link ul{
  display: flex;
  justify-content: space-between;
}
.Key__link ul li{
  width: 48%;
}
.Key__link ul li a{
  display: flex;
  font-size: 18px;
  font-weight: normal;
  justify-content:center;
  align-items: center;
  background-color:#024282;
  height: 50px;
}
.Key__link ul li a:link    {color:#FFF; text-decoration: none;}
.Key__link ul li a:visited {color:#FFF; text-decoration: none;}
.Key__link ul li a:hover   {color:#FFF; text-decoration: none;}
.Key__link ul li a:focus   {color:#FFF; text-decoration: none;}
.Key__link ul li a:active  {color:#FFF; text-decoration: none;}

}

/* BnrArea
-----------------------------------------*/
.BnrArea {
  text-align: center;
  margin: 65px 0 55px;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .BnrArea {
    margin: 50px 20px 30px;
  }
}
.BnrArea a:hover   { opacity: 0.8; }
.BnrArea a:focus   { opacity: 0.8; }
.BnrArea a:active  { opacity: 0.8; }

/* Pagelink
-----------------------------------------*/
.Pagelink{
  margin: 55px 0;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.Pagelink{
  margin:30px 20px 20px 20px;
}
}
.Pagelink ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.Pagelink ul{
  display: block;
}
}
.Pagelink ul li{
  width: 49%;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.Pagelink ul li{
  width: auto;
  margin-top: 15px;
}
}
.Pagelink ul li a{
  position: relative;
  display: flex;
  height: 100px;
  justify-content: center;
  align-items: center;
  background-color:#707176;
  font-size: 24px;
  font-weight: bold;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.Pagelink ul li a{
  padding:20px;
  display: block;
  height: auto;
  font-size: 18px;
}
}
.Pagelink ul li a:link    {color:#FFF; text-decoration: none;}
.Pagelink ul li a:visited {color:#FFF; text-decoration: none;}
.Pagelink ul li a:hover   {color:#FFF; text-decoration: none;}
.Pagelink ul li a:focus   {color:#FFF; text-decoration: none;}
.Pagelink ul li a:active  {color:#FFF; text-decoration: none;}

.Pagelink ul li a::after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 17px;
    width: 10px;
    height: 10px;
    margin: -6px 0 0 0;
    border-top: solid 2px #FFF;
    border-right: solid 2px #FFF;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* News
-----------------------------------------*/
.News{
  margin-bottom: 30px;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.News{
  margin:50px 20px 30px 20px;
}
}
.News dl{
  margin-top: 15px;
  padding-bottom: 10px;
  display: flex;
  font-weight: bold;
  line-height: 1.5;
  border-bottom: solid 1px #b4b4b4;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.News dl{
  display: block;
}
}
.News dl dt{
  width: 140px;
  font-size: 15px;
  color:#000;
}
.News dl dd{
  font-size: 16px;
  flex: 1;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.News dl dd{
  font-size: 14px;
}
}
.News dl dd a:link    {color:#191919; text-decoration: none;}
.News dl dd a:visited {color:#191919; text-decoration: none;}
.News dl dd a:hover   {color:#191919; text-decoration: none;}
.News dl dd a:focus   {color:#191919; text-decoration: none;}
.News dl dd a:active  {color:#191919; text-decoration: none;}

.News p.pagelink{
  margin-top: 23px;
  text-align: right;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.News p.pagelink{
  margin-top: 15px;
  font-weight: bold;
}
}
.News p.pagelink span{
  margin-right: 9px;
}
.News p.pagelink a:link    {color:#505050; text-decoration: none;}
.News p.pagelink a:visited {color:#505050; text-decoration: none;}
.News p.pagelink a:hover   {color:#505050; text-decoration: underline;}
.News p.pagelink a:focus   {color:#505050; text-decoration: underline;}
.News p.pagelink a:active  {color:#505050; text-decoration: underline;}

/* Caution
-----------------------------------------*/
.Caution{
  margin-bottom: 40px;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.Caution{
  margin:0 20px 40px 20px;
}
}
.Caution p{
  font-size: 17px;
  text-align:center;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.Caution p{
  text-align:left;
  font-size: 16px;
}
}
.Caution p a{
  width:423px;
  position: relative;
  box-sizing:border-box;
  padding:16px 0 14px 0;
  display:inline-block;
  background-color:#FFF;
  color: #000;
  border:solid 2px #b4b4b4;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.Caution p a{
  display: block;
  width:auto;
  padding:16px 14px 14px 20px;
}
}
.Caution p a::after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 17px;
    width: 10px;
    height: 10px;
    margin: -6px 0 0 0;
    border-top: solid 1px #333;
    border-right: solid 1px #333;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.Caution p a::after {
    margin: -5px 0 0 0;
}
}

.Caution p a:link    {color:#000; text-decoration: none;}
.Caution p a:hover   {color:#000; text-decoration: none;}
.Caution p a:active  {color:#000; text-decoration: none;}

.Caution p a span{
  padding:0 0 0 25px;
  position: relative;
}
.Caution p a span::before {
  position: absolute;
  top:-3px;
  left: 0;
  content: url('/ew/common/img/icon_message.gif');
}


/* Activelink
-----------------------------------------*/
.Activelink{
  margin-bottom: 70px;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.Activelink{
  display: none;
}
}
.Activelink ul{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  font-size: 16px;
}
.Activelink ul:nth-child(1){
  margin-top: 20px;
}
.Activelink ul li{
  margin: 10px 15px 0 0;
  width: 315px;
}
.Activelink ul li:nth-child(3n){
  margin-right: 0;
}
.Activelink ul li a{
  position: relative;
  display: flex;
  height: 70px;
  justify-content: center;
  align-items: center;
  background-color:#f1f1f1;
  font-weight: bold;
}
.Activelink ul li.Activelink__nocolor a{
  background-color:#FFF;
  font-weight: normal;
}
.Activelink ul li a:link    {color:#323232; text-decoration: none;}
.Activelink ul li a:visited {color:#323232; text-decoration: none;}
.Activelink ul li a:hover   {color:#323232; text-decoration: none;}
.Activelink ul li a:focus   {color:#323232; text-decoration: none;}
.Activelink ul li a:active  {color:#323232; text-decoration: none;}

.Activelink ul li a::after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 13px;
    width: 10px;
    height: 10px;
    margin: -6px 0 0 0;
    border-top: solid 1px #323232;
    border-right: solid 1px #323232;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* SpMenu
-----------------------------------------*/
.SpMenu{
  display: none;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.SpMenu{
  display: block;
  margin: 0 20px;
}
}
.SpMenu>ul>li{
  border:none;
  margin-bottom: 15px;
}
.SpMenu ul li a{
  position: relative;
  padding:20px;
  display: block;
  height: auto;
  font-size: 18px;
  border:solid 1px #b4b4b4;
  border-top: none;
}
.SpMenu>ul>li>a{
  border:none;
  font-weight: bold;
  background-color:#707176;
}
.SpMenu ul li a:link    {color:#323232; text-decoration: none;}
.SpMenu ul li a:visited {color:#323232; text-decoration: none;}
.SpMenu ul li a:hover   {color:#323232; text-decoration: none;}
.SpMenu ul li a:focus   {color:#323232; text-decoration: none;}
.SpMenu ul li a:active  {color:#323232; text-decoration: none;}

.SpMenu>ul>li>a:link    {color:#FFF;}
.SpMenu>ul>li>a:visited {color:#FFF;}
.SpMenu>ul>li>a:hover   {color:#FFF;}
.SpMenu>ul>li>a:focus   {color:#FFF;}
.SpMenu>ul>li>a:active  {color:#FFF;}

.SpMenu ul li a::after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 17px;
    width: 10px;
    height: 10px;
    margin: -6px 0 0 0;
    border-top: solid 1px #333333;
    border-right: solid 1px #333333;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.SpMenu>ul>li>a::after {
    border-top: solid 1px #FFF;
    border-right: solid 1px #FFF;
}
/* SpMenu__parent */
.SpMenu__parent>ul.close{
  display: none;
}
ul li.SpMenu__parent>a::after,
ul li.SpMenu__parent>a.close::after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 20px;
    height: 1px;
    margin: 0;
    background-color:#666;
    border: none;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
ul li.SpMenu__parent>a::before,
ul li.SpMenu__parent>a.close::before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 19px;
    width: 1px;
    height: 20px;
    margin: -9px 0 0 0;
    background-color:#666;
}
ul li.SpMenu__parent>a.open::before {
    display: none;
}
.SpMenu>ul>li.SpMenu__parent>a::after {
    background-color:#FFF;
}
.SpMenu>ul>li.SpMenu__parent>a::before {
    background-color:#FFF;
}