@charset "UTF-8";
body{
  margin: 0;
  padding: 0;
}
div#container{
  width: 360px;
  margin-left:auto;
  margin-right:auto;
  background: #efefef;
  font-family : メイリオ, "ＭＳ Ｐゴシック", "ＭＳ ゴシック";
}
div#pochi{
  width: 300px;
  height:100px;
  border-radius: 10px;
  font-size: 30px;
  line-height: 100px;
  font-weight: bold;
  text-align: center;
  color:white;
  margin: 30px auto 30px;
  background-color: blue;
  box-shadow:0 20px 0 navy;
  border:3px solid  navy;
  user-select:none;
  }
  div#pochi.pressed{
    /* box-shadow:0 10px navy; */
    box-shadow:none;
    margin-top: 40px;
    margin-bottom: 20px;
}
div#food_e{
  text-align: center;
  margin: auto;
  width: 390px;
  padding: 5px;
}
div#ans{
  width: 340px;
  min-height:300px;
  font-size: 25px;
  padding: 10px;
  margin: 0 auto;
  border:3px solid  #D1483E;
  background: white;
}

div.cma8{
  margin: 20px 10px 10px 10px;
  font-size: 20px;
  text-align: center;
  background-color: white;
}

p.top_a a{
  display: block;
  text-align: center;
  text-decoration: none;  /* リンクの下線を消す */
  font-size: 35px;
  line-height: 80px;
  color:white;
  font-weight: bold;
  /* 影 */
  text-shadow: 1px 3px 0px #b2a98f,
               2px 6px 10px rgba(0,0,0,0.15),
               4px 12px 2px rgba(0,0,0,0.1),
               8px 24px 30px rgba(0,0,0,0.1);
}
/* div.top a:hover{
opacity: 0.5;
} */

div.top{
  width: 360px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

p.top_a{
  position: absolute;
  top: 140px;
  right: 30px;
}

div.center{
  font-size: 24px;
  background-color: white;
  text-align: center;
  margin: 0 auto;
}
div.mozi_cm{
  text-align: center;
  font-size: 18px;
  background-color: rgb(241, 250, 241);
  text-decoration: none;
  color: black;
  padding: 10px 5px 10px 8px;
  width: 320px;
  margin: 10px auto;
  line-height: 1.5em;
}
div.mozi_cm a{
  text-decoration: none;
  color: black;
}

span.red{
  font-weight: bold;
  color: #FF8000;
}
span.blue{
  font-weight: bold;
  color: blue;
}
span.bold{
  font-weight: bold;
}

h1{
  font-size: 26px;
  font-weight: bold;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
}
p{
  font-size: 20px;
  margin: 5px 15px;
  text-align: left;
}
p.red{
  font-size: 24px;
  font-weight: bold;
  margin: 5px 15px;
  text-align: left;
  color: red;
}
p.bold{
  font-size: 24px;
  font-weight: bold;
  margin: 5px 15px;
  text-align: left;
}
p.s{
  font-size: 18px;
  padding-left: 15px;
  padding-right: 15px;
  text-align: left;
}
div.cm{
  line-height : 20px;
  font-size: 12px;
  text-align: center;
  margin: 10px 5px;
}
table.link{
  width: 340px;
  margin: 9px;
  border-collapse: collapse;
  border: solid 2px;
  border-color: #c0c0c0;
  font-size: 20px;
  text-align: left;
}
table.link td.ue{
  border: solid 2px;
  border-color: #c0c0c0;
  background-color: #EEE8AA;
}
table.link td.sita{
  border: solid 2px;
  border-color: #c0c0c0;
  background-color: #99FF99;
}
table.link a{
  display: block;
  /* padding: 0.6em 1em; */
  padding: 5px;
  text-decoration: none;
}
footer{
  line-height : 30px;
  font-size: 18px;
  text-align: center;
  color: black;
  margin-bottom: 50px;
}
.cp_cssslider {
width: 360px;
height: 100px;
overflow: hidden;
margin: 2em auto;
}
.cp_slide_item {
width: 360px;
height: 100px;
float: left;
position: relative;
}
.cp_slidewrapper {
width: 500%;/* slideの枚数×100% */
position: relative;
left: 0;
animation: slider 20s infinite ease;/* スピード */
}
@-webkit-keyframes slider {
/* 100%を枚数で割った%に割り振る */
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
20% {
-webkit-transform: translateX(-360px);
transform: translateX(-360px);
}
40% {
-webkit-transform: translateX(-720px);
transform: translateX(-720px);
}
60% {
-webkit-transform: translateX(-1080px);
transform: translateX(-1080px);
}
80% {
-webkit-transform: translateX(-1440px);
transform: translateX(-1440px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slider {
/* 100%を枚数で割った%に割り振る */
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
20% {
-webkit-transform: translateX(-360px);
transform: translateX(-360px);
}
40% {
-webkit-transform: translateX(-720px);
transform: translateX(-720px);
}
60% {
-webkit-transform: translateX(-1080px);
transform: translateX(-1080px);
}
80% {
-webkit-transform: translateX(-1440px);
transform: translateX(-1440px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}

div.photo{
  position: relative;
}
div.photo p{
  position: absolute;
  color:white;
  top:0;
  left:0;
}
div.photo img{
  width: 100%;
}




.up {
margin : 0 auto 0px;
width : 100%;
/* height:4em; */
height: 6em;
font-size : 30px;
letter-spacing: 0.05em;
font-weight: bold;
overflow : hidden;
}
.up ul{
/* display : inline-block; */
/* white-space : nowrap; */
line-height : 1.5em;
list-style-type: none;
animation : up01 13s linear infinite;
/* animation : up01 17s linear infinite; */
/* animation : up01 20s linear infinite; */
}
.up ul li{
margin:0;
}
@keyframes up01{
0% { transform: translateY(0.5em)}
100% { transform: translateY(-22em)}
/* 100% { transform: translateY(-45em)} */
/* 100% { transform: translateY(-37.5em)} */
}
/* ＳＮＳ */
/*---SNSシェアボタン---*/
/* ボタン上の文字 */
.fa-twitter:before, .fa-hatena:before, .fa-line:before, .fa-pocket:before
{
  font-family: helvetica neue,helvetica,arial,sans-serif;
  font-weight: bold;
  /* font-size:14px */
}
.fa-facebook:before {
  content: "f";
  font-family: Verdana;
  font-size:25px;
  font-weight: bold
}
.fa-twitter:before {
  content: "twitter";
  font-size:25px;
}

.fa-hatena:before {
  content: "B!";
  font-family: Verdana;
}
.fa-line:before {
  content: "Line";
  font-size:25px;
}
.fa-pocket:before {
  content: "pocket";
}

/* ボタン表示位置の調整 */
.button-area {
  text-align: center;
  overflow:hidden;
  /* clear:left; */
  margin-top:15px;
  margin-left: 8px;
  margin-bottom: 15px;
}

/* タイトルの表示設定 */
.button-area-title {
  text-align: center;
  padding:.7em;
}

/* ボタンブロックのデザイン */
.button-area li a {
  padding: 2px;
  display: block;
  text-align: center;
  text-decoration: none;
  color: #fff;
  border-radius: 4px; 
}

/* SNSごとの背景色 */
.twitter a {
  background-color: #55acee;
}
.facebook a{
  background-color: #3b5998;
}
.hatena a{
  background-color: #008fde;
}
.line a{
  background-color: #1dcd00;
}
.pocket a{
  background-color: #ea5a6c;
}

/* リスト「・」の削除 */
.button-area ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ボタン幅と余白の設定 */
.button-area li {
  float: left;
  /* width: 19%; */
  width: 32%;
/* 追加 */
  line-height: 38px;
  margin: 0 .3%;

}

.button-area  ul:after {
  display: block;
  clear: both;
}

/* ボタンにカーソルを合わせた時の表示設定 */
.button-area li a:hover {
  -ms-transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}
/* ＳＮＳボタンここまで */