@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;}

.bnrLink{ display: block; max-width: 468px; margin:0px auto 20px;}
.bnrLink img{ width: 100%;}

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

.invalid{ max-width:720px; margin:0 auto;}
.invalid h1{ text-align: center;}
.invalid h1 img{ display: block; width: 242px; margin:0 auto 30px;}
.invalid h1 p{ font-size: 26px;}

.invalid p{ letter-spacing: 1px;}
.invalid > div{ display: table; margin:36px auto 0;}

.invalid .txt01{ margin:0 auto 23px; font-size: 16px; line-height: 1.8;}
.invalid .txt01,
.invalid .txt01 a{ color: #333; }
.invalid .txt01 span{ font-size: 18px;}

.invalid .txt02,
.invalid .txt02 a{ font-size: 16px; color: #929292}

.invalid .txt01 a,
.invalid .txt02 a{ text-decoration: underline;}

.rakko_area{ margin-top: 30px;}
.rakko_area dl{ text-align: center;}
.rakko_area dt{ color: red; font-size: 20px; font-weight: bold;}
.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 (min-width:640px) {
  body{ padding:100px 10px 60px;}

  .bnrLink{ display: block; max-width: 468px; margin:-60px auto 50px;}
  .invalid h1 p{ font-size: 30px;}

  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;}

  .invalid .txt01 a:hover,
  .invalid .txt02 a:hover{ text-decoration: none;}

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