@charset "UTF-8";

html,
body{ background: #f8f8f8; margin: 0; padding: 0; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color: #000000;}
body{ padding:20px 10px 50px;}
p{ margin:0; padding:0;}

.bnrArea,
.bnrArea *,
.invalid,
.invalid *{ box-sizing: border-box;}

.bnrArea p{ margin-bottom: 6px; color: #0F7BC3; font-size: 21px; font-weight: bold; text-align: center; letter-spacing: 1px;}
.bnrArea p span{ display: block; margin-bottom: 4px; color: #F2984F; font-size: 15px;}
.bnrLink{ display: block; max-width: 468px; margin:0px auto 20px;}
.bnrLink img{ width: 100%;}

.invalid{ background: white; max-width:468px; padding: 30px 24px 40px; margin:0 auto;}
.invalid h1{ margin: 0; text-align: center;}
.invalid h1 img{ display: block; width: 55px; margin:0 auto 12px;}
.invalid h1 p{ font-size: 22px; letter-spacing: 1px;}

.invalid .txt{ padding-top: 20px; margin: 20px 0 0; text-align: center; border-top: #0F7BC3 1px solid; }
.invalid .txt dt{ color: #005BAC; font-size: 18px; font-weight: bold; }
.invalid .txt dt span{ color: #FF494A;}
.invalid .txt dd{ margin: 14px 0 0; font-size: 14px; }
.invalid .txt dd br.sp{display: none;}

.rakko_area{ margin-top: 30px;}
.rakko_area dl{ text-align: center;}
.rakko_area dt{ color: red; font-size: 20px; font-weight: bold; letter-spacing: 1px;}
.rakko_area dd{ margin: 18px 0 22px; font-size: 14px;}

.rakko_area .img_area{ width: 300px; margin: 0 auto;}
.rakko_area .img_area a{ display: none; transition: opacity 0.3s ease-in-out 0s;}
.rakko_area .img_area a:hover{ opacity: .8;}
.rakko_area .img_area img{ width: 100%;}

.rakko_area .attention_list{ width: 300px; margin: 4px auto 0; padding: 0; font-size: 11px; color: #aaa; list-style: none; text-align: right;}
.rakko_area .attention_list li span{ display: inline-block; padding-left: 14px; position: relative;}
.rakko_area .attention_list li span::before{ content: "※"; position: absolute; top: 0; left: 0;}


footer{ margin:50px 0 0; text-align: center;}
footer img{ width: 225px;}

@media print, screen and (max-width:640px) {
  .bnrArea p{ font-size: 16px; letter-spacing: 0;}
  .bnrArea p span{ font-size: 13px;}

  .invalid{ padding: 30px 20px; }
  .invalid .txt dt{ font-size: 16px;}
  .invalid .txt dd{ font-size: 13px; }
  .invalid .txt dd br.sp{display: block;}
  .rakko_area dt{ font-size: 16px;}
}

@media print, screen and (min-width:640px) {
  body{ padding:60px 10px;}
  .bnrLink{ margin:0 auto 30px;}
  .rakko_area{ margin-top: 50px;}
  footer{ margin:70px 0 0;}
}

@media print, screen and (min-width:960px) {
  .bnrLink{ transition: opacity 0.3s ease-in-out 0s;}
  .bnrLink:hover{ opacity:0.8;}

  footer a{ transition: opacity 0.3s ease-in-out 0s;}
  footer a:hover{ opacity:0.8;}
}