@charset "UTF-8";
/* CSS Document */
.sp{ display: block;}

html,body{  -webkit-text-size-adjust: 100%;background: url(../img/bg.jpg) top center; font-size: 20px; }
#container{ width: calc(100% - 20px); margin: 0 auto; }
.contents{background: #fff; padding-bottom: 10px; }
h1{ font-size: 2.2rem;  text-align: center; margin: 0px 0 10px ; background: hotpink; padding: 20px 0; color: #fff;}
h1 span{ color: yellow;font-weight: bold;}
.image{ text-align: center;}
.image img{ max-width: 100%; height: auto;}
.text{ text-align: center; margin: 20px 0;}
h2{ font-size: 2rem;margin: 5px 0 10px;  }
h2 span{ color: hotpink; font-weight: bold;}
h4{ font-size: 1.6rem;  }
h3{ font-size: 1.8rem; color: red;}
p{ font-size: 1.1rem; line-height: 140%; margin: 16px 0;}
ul.paper{ display: flex; flex-wrap: wrap; justify-content: space-around;width: 100%; margin: 0 auto; font-size: 1em; }
ul.paper li{ width: 45%; text-align: center; margin-bottom: 40px;}
    
ul.paper li img{ width: 100%;}
    ul.paper li a{ display: block; border-radius: 5px; background: hotpink; padding: 10px 0; margin-top: 5px; color: #fff; text-decoration: none;}
    ul.paper li a{ border-bottom: 2px solid #ff359a;}

    ul.alert{ text-align: left; font-size: 0.9rem; width: calc(100% - 20px); margin: 0 auto;}
    footer {  text-align: center; padding: 10px 0; }
    footer p{font-size: 0.6rem;}
@media (min-width: 769px) {
   /* (C)PC以上向けスタイル */
    .sp{ display: none;;}
    html,body{font-size: 16px;}
    #container{ width: 860px; margin: 0 auto;}
    .contents{padding-bottom: 20px; }
    h1{font-size: 2.6rem; }
    ul.paper{ width: 760px;}
    ul.paper li{ width: 30%;}
    ul.alert li{ display: inline-block; }
    ul.alert li:last-child{ display: block;}
    ul.alert{ width: 500px;}
    footer a{ color: inherit;}
    footer {width: 860px;}
}