@charset "utf-8";
/* fr-0023 wide photo layout as bg-image */

.fr-0023 {
  position: relative;
}

.fr-0023 .res-wrap-alpha {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#78000000', endColorstr='#78000000');/*IE8ˆÈ‰º—p*/
  padding:18px 0 15px;
}

.fr-0023 .res-wrap-beta{
  position: absolute;
  top: 0;
  right: calc((100% - 950px)/2);
  width: auto;
  background-color: #535353;
  padding:10px;
  margin: 8px 10px;
  
  border-style: solid;
  border-color: #000000;
  border-width: thin;
}

  .fr-0023 a:link    { text-decoration:none; color:#FFFFFF; }
  .fr-0023 a:visited { text-decoration:none; color:#FFFFFF; }
  .fr-0023 a:active  { text-decoration:none; color:#FFFFFF; }
  .fr-0023 a:hover   { text-decoration:underline; color:#FFFFFF; }
  
.fr-0023 .res-country-areaname{
  color: #fff;
  font-size: 28px;
  font-size: 2.8rem;
  line-height: 1.3;
}

/* ********************************************************* SP ********************************************************* */

@media (min-width: 0px) and (max-width: 570px) {
.fr-0023 .res-wrap-alpha {
  position: static;
  background: #eeeeee;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  padding: 16px 14px 14px;
  filter:none;
}

.fr-0023 .res-wrap-beta{
  position: static;
  width: auto;
  float: none;
  background-image: none;
  background-color: #FFFFFF;
  border-top: 1px solid #cccccc;
  border-bottom: 0;
  border-right: 0;
  border-left: 0;
  padding: 16px 14px 14px;
  margin: 0px;
  filter:none;
}

  .fr-0023 a:link    { text-decoration:none; color:#093568; }
  .fr-0023 a:visited { text-decoration:none; color:#093568; }
  .fr-0023 a:active  { text-decoration:none; color:#093568; }
  .fr-0023 a:hover   { text-decoration:underline; color:#093568; }


.fr-0023 .res-country-areaname{
  color: #093568;
}
}

/* ********************************************************* TAB ********************************************************* */

@media (min-width: 571px) and (max-width: 1024px) {

.fr-0023 .res-wrap-beta{
  right: 0;
}

.fr-0023 .res-country-areaname{
  padding-left: 10px;
  padding-right: 10px;
}
}