@charset "UTF-8";
body{
  margin: 0;
  padding: 0;
  background-color: #dcdcdc;
}
div.container{
  margin: 0 auto;
  width: 1000px;
  background-color: white;
}
div.right_link_mozi{
  font-size: 20px;
  text-decoration: none;
  color: rgb(34, 34, 34);
  text-align: center;
  margin: 30px auto 0px auto;
}
a.none{
  text-decoration: none;
  color: rgb(34, 34, 34);
}
span.red{
  font-weight: bold;
  color: #FF8000;
}
span.blue{
  font-weight: bold;
  color: blue;
}
span.bold{
  font-weight: bold;
}

  
hr.red{
  border-style: none;
  border-top: 2px solid red;
  width: 80%;
}
h1{
  width: 600px;
  font-size: 35px;
  font-weight: bold;
  color: red;
  margin: 0 auto 40px auto;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
}
table.column{
  width: 1000px;
}
p.bun{
  font-size: 20px;
}

td.left{
  width: 640px;
  vertical-align: top;
}

td.right{
  width: 360px;
  vertical-align: top;
  text-align: center;
}

div.top{
  width: 1000px;
  margin: 0 auto;
  text-align: center;
  font-size: 30px;
  position: relative;
}
div.cm{
  text-align: center;
  font-size: 20px;
  margin: 10px auto 20px auto;
}
p.top_a{
  position: absolute;
  top: 100px;
  right: 400px;
font-size: 50px;
color:white;
}

div.up {
  margin : 0 auto 0px;
  width : 100%;
  height:6em;
  font-size : 30px;
  text-align: center;
  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 17s linear infinite;
  /* animation : up01 20s linear infinite; */
  }
  .up ul li{
  margin:0;
  }
  @keyframes up01{
  0% { transform: translateY(0.5em)}
  100% { transform: translateY(-50em)}
  /* 100% { transform: translateY(-37.5em)} */
  }


  .cp_cssslider {
      width: 600px;
      height: 150px;
      overflow: hidden;
      margin: 2em auto;
    }
    .cp_slide_item {
      width: 600px;
      height: 150px;
      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(-600px);
      transform: translateX(-600px);
      }
      40% {
      -webkit-transform: translateX(-1200px);
      transform: translateX(-1200px);
      }
      60% {
      -webkit-transform: translateX(-1800px);
      transform: translateX(-1800px);
      }
      80% {
      -webkit-transform: translateX(-2400px);
      transform: translateX(-2400px);
      }
      100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      }
    }

    @keyframes slider {
      /* 100%を枚数で割った%に割り振る */
      0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      }
      20% {
      -webkit-transform: translateX(-600px);
      transform: translateX(-600px);
      }
      40% {
      -webkit-transform: translateX(-1200px);
      transform: translateX(-1200px);
      }
      60% {
      -webkit-transform: translateX(-1800px);
      transform: translateX(-1800px);
      }
      80% {
      -webkit-transform: translateX(-2400px);
      transform: translateX(-2400px);
      }
      100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      }
    }

    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: 500px;
      min-height:300px;
      font-size: 30px;
      padding: 10px;
      margin: 0 auto;
      border:3px solid  #D1483E;
      background: white;
    }

    p{
      font-size: 24px;
      margin: 5px 15px;
      padding: 5px 10px 10px 20px;
      text-align: left;
    }
footer{
  line-height : 30px;
  font-size: 18px;
  text-align: center;
margin-top: 50px;
margin-bottom: 50px;
}
    /* ＳＮＳ */
/*---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: 15px;
  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);
}
/* ＳＮＳボタンここまで */