@charset "utf-8";

/* ------------------------------------------------------------------------ */
/* --- Font --------------------------------------------------------------- */
/* ------------------------------------------------------------------------ */

@font-face {
  font-family: "NotoSansJP-R";
  font-weight: 400;
  src: local("Noto Sans CJK JP Regular"), local("Noto Sans CJK JP");
}

@font-face {
  font-family: "YuGothic-M";
  font-weight: 500;
  src: local("Yu Gothic Medium"), local("Yu Gothic"), local("YuGothic");
}

/* ------------------------------------------------------------------------ */
/* --- Common ------------------------------------------------------------- */
/* ------------------------------------------------------------------------ */

body {
  margin: 8px;
  padding: 0;
  background: #F2F2F2 url(/images/front/exception/body_bg.png) left top repeat-x;
  font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic ProN", NotoSansJP-R, YuGothic-M, sans-serif;
  color: #142426;
  font-size: 14px;
}

img {
  border: none;
  margin: 0;
  vertical-align: middle;
  -ms-interpolation-mode: bicubic;
}

a {
  text-decoration: underline;
}

a:link {
  color: #0044CC;
}

a:visited {
  color: #663399;
}

a:active {
  color: #d14836;
}

a:hover {
  color: #3366FF;
}

/* ------------------------------------------------------------------------ */
/* --- Page layout -------------------------------------------------------- */
/* ------------------------------------------------------------------------ */

#base {
  max-width: 960px;
  margin: 150px auto 0;
  padding: 0;
}

.bubble {
  position: relative;
  width: 100%;
}

.bubble .contents {
  background-color: #4FC2E3;
  border-radius: 6px;
  color: #ffffff;
  text-shadow: 0 1px 0 #222222;
  margin: 0;
  padding: 15px;
}

.bubble .contents::after {
  content: "";
  position: absolute;
  bottom: -23px;
  right: 320px;
  border-top: 23px solid #4FC2E3;
  border-left: 34px solid transparent; 
  width: 0;
  height: 0;
  clear: both;
}

.bubble .contents h1,
.bubble .contents h2 {
  font-size: 28px;
  color: #1f3696;
  margin-top: 0;
  text-shadow: none;
}

.bubble .contents a {
  text-shadow: none;
}

.bubble .contents dl.message_info {
  margin: 0;
}

.bubble .contents ul.icon_list {
  list-style-type: none;
  margin: 5px 0 0;
  padding: 0;
}

.bubble .contents .exception p {
  font-size: 12px;
  font-weight: bold;
}

#site_logo {
  float: right;
  margin: 24px 5px 0 0;
  padding: 0;
}

#footer {
  background: #1F3696 url(/images/front/exception/body_footer_back.png) repeat-x;
  border-top: 1px solid #FFFFFF;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 5px 0;
}

#footer .footer_info {
  margin-bottom: 5px;
  font-weight: normal;
  color: #FFFFFF;
}

#footer a {
  color: #FFFFFF;
}

#copyright {
  font-size: 12px;
  text-align: center;
  color: #FFFFFF;
}

/* --- for small display ----------------------------------------------- */
@media (max-width: 380px) {

.bubble .contents::after {
  right: auto;
  left: 10px;
}

}