@charset "utf-8";
/* CSS Document */
/*** BEMベース ***/
/**********************/
/******** 共通 ********/
/**********************/
body { background:#fffdf0; font-family:"ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic",  Quicksand, '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic,, sans-serif; color:#464646; }
body p { word-break:break-all; }
.main{ width:100%; padding:60px 0; background:linear-gradient(#cf010d 25%, #fffdf0 50%); }
.banner{ max-width:959px; width:95%; margin:0 auto; }
.banner img{ width:100%; }
.textcenter{ font-size:18px; text-align:center; margin:40px 0 0; }
.buttonArea{ display:flex; justify-content:center; align-items:stretch; flex-wrap:wrap; margin:40px 0 0; }
.buttonArea a{ position:relative; display:flex; justify-content:center; align-items:center; width:40%; padding:10px 20px 10px 10px; text-decoration:none; color:#FFF; font-weight:bold; text-align:center; line-height:1.6; border-radius:10px; box-sizing:border-box; }
.buttonArea a:hover{ opacity:0.8; }
.buttonArea a:after{ content:'▲'; font-size:18px; position:absolute; top:0; bottom:0; right:35px; transform:rotate(90deg); }
.buttonArea a:first-of-type{ margin:0 30px 0 0; }
.buttonHama{ font-size:24px; background:linear-gradient(#F97906 70%, #D36400 80%); border:3px double #D36400;  }
.buttonHama span{ font-size:12px; margin:0 0 0 10px; }
.buttonOther{ font-size:18px; background:linear-gradient(#0296e0, 70%, #0289b6 80%); border:3px double #0289b6;   }
.footer{ text-align:center; font-size:14px; background:#fffdf0; padding:10px 0; }
/* SP */
@media only screen and (max-width:768px){
  .main{ padding:10px 0; background:linear-gradient(#cf010d 10%, #fffdf0 30%); }
  .buttonArea{ margin:20px 0 0; }
  .buttonArea a{ width:90%; margin:0 auto; }
  .buttonArea a:first-of-type{ margin:0 0 20px 0; }
  .buttonHama{ flex-wrap:wrap; }
  .buttonOther{ font-size:18px; background:linear-gradient(#0296e0, 70%, #0289b6 80%); border:3px double #0289b6;   }

}