@media screen and (min-width: 768px) { /* PC・タブレット */

 #bbs {
  position:relative;
  width:100%;
  min-width:1100px;
  min-height:calc(100vh - 130px);
  padding-bottom:30px;
  background:white;
 }
 #bbs .container {
  width:1060px;
  min-width:1060px;
  padding:10px;
  margin:0 auto;
  text-align:left;
  font-size:16px;
 }
 #bbs .header {
  padding:10px 0 5px 0;
  font-size:60px;
  font-weight:bold;
 }
 #bbs .new_thread_container {
  padding:5px 0;
 }
 #bbs .new_thread {
  position:relative;
  display:inline-block;
  top:0;left:0;
  width:477px;
  padding:15px;
  border-radius:15px;
  border:solid 4px royalblue;
  background:linear-gradient(0.25turn, royalblue, rgb(128, 151, 221), rgb(190, 198, 221));
  transition: transform 0.3s ease;
  color:white;
  font-weight:bold;
 }
 #bbs .new_thread:hover {
  transform:scale(1.05);
 }
 #bbs .new_thread a {
  width:100%;
 }
 #bbs .thread_container {
  position:relative;
  display:inline-block;
  width:515px;
  height:172px;
  margin:5px 10px 5px 0;
 }
 #bbs .thread_card {
  position:relative;
  top:0;left:0;
  width:477px;
  padding:15px;
  border-radius:15px;
  transition: transform 0.3s ease;
  text-shadow: 
    1px 1px 0 #999,
   -1px 1px 0 #999,
    1px -1px 0 #999,
   -1px -1px 0 #999;
 }
 #bbs .thread_card.room {
  border:solid 4px royalblue;
  background:linear-gradient(0.25turn, royalblue, rgb(128, 151, 221), rgb(190, 198, 221));
 }
 #bbs .thread_card.master.room {
  border:solid 4px violet!important;
  background:linear-gradient(0.25turn, violet, royalblue);
 }
 #bbs .thread_card.team {
  border:solid 4px orange;
  background:linear-gradient(0.25turn, orange, rgb(248, 200, 112), rgb(252, 232, 195));
 }
 #bbs .thread_card.master.team {
  border:solid 4px violet!important;
  background:linear-gradient(0.25turn, violet, orange);
 }
 #bbs .thread_card.share {
  border:solid 4px silver;
  background:linear-gradient(0.25turn, royalblue, orange);
 }
 #bbs .thread_card:hover {
  transform:scale(1.05);
 }
 #bbs .thread_card img {
  display:inline-block;
  vertical-align:middle;
  width:100px;
 }
 #bbs .thread_card .contents {
  display:inline-block;
  vertical-align:middle;
  padding:0 10px;
  width:351px;
  text-align:left;
  color:white;
  font-weight:bold;
 }
 #bbs .thread_card .contents .title {
  font-size:20px;
  border-bottom:2px solid;
  margin-bottom:5px;
 }
 @keyframes blink-border-royalblue {
  0%   { border: 4px solid gold; }
  50%  { border: 4px solid royalblue; }
  100% { border: 4px solid gold; }
}
 @keyframes blink-border-violet {
  0%   { border: 4px solid gold; }
  50%  { border: 4px solid violet; }
  100% { border: 4px solid gold; }
}
 @keyframes blink-border-orange {
  0%   { border: 4px solid gold; }
  50%  { border: 4px solid orange; }
  100% { border: 4px solid gold; }
}
.blinking-border {
  animation: blink-border-royalblue 3s infinite;
}
.blinking-border.team {
  animation: blink-border-orange 3s infinite;
}
.blinking-border.master {
  animation: blink-border-violet 3s infinite!important;
}


 #bbs .back {
  width:200px;
  margin-top:10px;
  margin-left:5%;
  border-radius:20px;
  background:tomato;
  text-align:center;
  font-weight:bold;
 }
 #bbs .back a {
  display:block;
  color:white;
  padding:5px 20px 5px 0;
  border-radius:20px;
 }
 #bbs .post_container {
  position:relative;
  width:90%;
  margin:0 5%;
 }
 #bbs .post_container.first_post {
  padding-top:20px;
 }
 #bbs .post_container.reply_post {
  position:relative;
  width:85%;
  margin:10px 5%;
  padding-left:5%;
 }
 #bbs .post_container.deleted_post {
  position:relative;
  width:85%;
  margin:10px 5%;
  padding-left:5%;
 }
 #bbs .post_card {
  position:relative;
  top:0;left:0;
  width:100%;
  padding:15px;
  border-radius:15px;
  word-break: break-all;
  text-shadow: 
    1px 1px 0 #999,
   -1px 1px 0 #999,
    1px -1px 0 #999,
   -1px -1px 0 #999;
 }
 #bbs .post_card.room {
  border:solid 4px royalblue;
  background:linear-gradient(0.25turn, royalblue, rgb(128, 151, 221), rgb(190, 198, 221));
 }
 #bbs .post_card.master.room {
  border:solid 4px violet!important;
  background:linear-gradient(0.25turn, violet, royalblue);
 }
 #bbs .post_card.team {
  border:solid 4px orange;
  background:linear-gradient(0.25turn, orange, rgb(248, 200, 112), rgb(252, 232, 195));
 }
 #bbs .post_card.master.team {
  border:solid 4px violet!important;
  background:linear-gradient(0.25turn, violet, orange);
 }
 #bbs .post_card.share {
  border:solid 4px silver;
  background:linear-gradient(0.25turn, royalblue, orange);
 }
 #bbs .reply_post .post_card {
  border:solid 4px mediumseagreen;
  background:linear-gradient(0.25turn, mediumseagreen, rgb(114, 182, 145), rgb(164, 184, 173));
 }
 #bbs .deleted_post .post_card {
  height:20px;
  border:solid 4px tomato;
  background:linear-gradient(0.25turn, tomato, rgb(253, 152, 134), rgb(255, 211, 203));
 }
 #bbs .post_card img {
  display:inline-block;
  vertical-align:middle;
  width:100px;
 }
 #bbs .post_card .contents {
  display:inline-block;
  vertical-align:top;
  padding:0 10px;
  width:calc(100% - 130px);
  text-align:left;
  color:white;
  font-weight:bold;
 }
 #bbs .post_card .contents .title {
  font-size:20px;
  border-bottom:2px solid;
  margin-bottom:5px;
 }
 #bbs .post_card .contents .name {
  margin-bottom:5px;
 }
 #bbs .post_card .contents .body {
  min-height:40px;
  padding-left:10px;
 }
 #bbs .post_card .contents .body a {
  color:gold;
  text-decoration:underline;
 }
 #bbs .post_card .contents .date {
  margin-top:15px;
  margin-bottom:-20px;
  text-align:right;
  font-size:14px;
 }
 #bbs .first_post .contents .date{
  margin-bottom:0px;
 }
 #bbs .like-button {
  cursor: pointer;
  display: inline;
  align-items: center;
  margin-right:20px;
 }
 #bbs .like-button.liked .like-icon {
  color:rgb(235, 45, 235);
  font-weight:bold;
  font-size:24px;
  vertical-align:middle;
 }
 #bbs .like-button.not-liked .like-icon {
  color:rgb(235, 45, 235);
  font-weight:bold;
  font-size:24px;
  vertical-align:middle;
 }
 #bbs .post_card .contents .delete_button {
  position:absolute;
  top:10px;right:10px;
  width:25px;
  background:red;
  border:solid 2px white;
  border-radius:10px;
  text-align:center;
 }
 #bbs .post_card .contents .delete_button a { color:white; }
 #bbs .post_card .contents .new_reply {
  width:200px;
  margin:0 auto;
  padding:5px 0;
  border-radius:20px;
  background:orange;
  text-align:center;
  transition: transform 0.3s ease;
 }
 #bbs .post_card .contents .new_reply:hover {
  transform:scale(1.1);
 }
 #bbs .post_card .contents .new_reply a {
  color:white;
 }
 
 #bbs .text {
  margin:20px 0 10px 0;
  padding-left:60px;
  line-height:30px;
  font-size:14px;
  font-weight:bold;
 }
 #bbs .form_container {
  padding-left:60px;
 }
 #bbs form .item {
  font-weight:bold;
  margin-top:10px;
 }
 #bbs form input {
  border-radius:20px;
  border:solid 2px #111111;
  padding:5px 10px;
 }
 #bbs form input.button {
  width:150px;
  font-size:14px;
  font-weight:bold;
 }
 #bbs form input.button:hover {
  cursor:pointer;
 }
 #bbs form .id {
  width:40px;
 }
 #bbs form textarea {
  width:700px;
  height:200px;
  padding:5px 10px;
  border-radius:10px;
  border:solid 2px #111111;
 }

} @media screen and (max-width: 767px) {  /* スマホ */

 #bbs {
  position:relative;
  width:100%;
  min-height:calc(100vh - 130px);
  padding-bottom:30px;
  background:white;
 }
 #bbs .container {
  width:calc(100% - 20px);
  padding:15px 10px;
  margin:0 auto;
  text-align:center;
  font-size:12px;
 }
 #bbs .header {
  padding:0 0 5px 0;
  font-size:30px;
  font-weight:bold;
  text-align:left;
 }
 #bbs .new_thread_container {
  padding:10px 0;
 }
 #bbs .new_thread {
  position:relative;
  display:inline-block;
  top:0;left:0;
  width:calc(90% - 10px);
  padding:5px 10px;
  border-radius:15px;
  border:solid 4px royalblue;
  background:linear-gradient(0.25turn, royalblue, rgb(128, 151, 221), rgb(190, 198, 221));
  color:white;
  font-weight:bold;
 }
 #bbs .new_thread a {
  width:100%;
 }
 #bbs .thread_container {
  position:relative;
  display:inline-block;
  width:calc(100% - 20px);
  margin-bottom:10px;
 }
 #bbs .thread_card {
  position:relative;
  top:0;left:0;
  width:calc(100% - 38px);
  padding:15px;
  border-radius:15px;
  text-shadow: 
    1px 1px 0 #999,
   -1px 1px 0 #999,
    1px -1px 0 #999,
   -1px -1px 0 #999;
 }
 #bbs .thread_card.room {
  border:solid 4px royalblue;
  background:linear-gradient(0.25turn, royalblue, rgb(128, 151, 221), rgb(190, 198, 221));
 }
 #bbs .thread_card.master.room {
  border:solid 4px violet!important;
  background:linear-gradient(0.25turn, violet, royalblue);
 }
 #bbs .thread_card.team {
  border:solid 4px orange;
  background:linear-gradient(0.25turn, orange, rgb(248, 200, 112), rgb(252, 232, 195));
 }
 #bbs .thread_card.master.team {
  border:solid 4px violet!important;
  background:linear-gradient(0.25turn, violet, orange);
 }
 #bbs .thread_card.share {
  border:solid 4px silver;
  background:linear-gradient(0.25turn, royalblue, orange);
 }
 #bbs .thread_card img {
  display:inline-block;
  vertical-align:middle;
  width:18%;
 }
 #bbs .thread_card .contents {
  display:inline-block;
  vertical-align:middle;
  padding-left:10px;
  width:calc(82% - 20px);
  text-align:left;
  color:white;
  font-weight:bold;
 }
 #bbs .thread_card .contents .title {
  font-size:14px;
  border-bottom:2px solid;
  margin-bottom:5px;
 }
 @keyframes blink-border-royalblue {
  0%   { border: 4px solid gold; }
  50%  { border: 4px solid royalblue; }
  100% { border: 4px solid gold; }
}
 @keyframes blink-border-violet {
  0%   { border: 4px solid gold; }
  50%  { border: 4px solid violet; }
  100% { border: 4px solid gold; }
}
 @keyframes blink-border-orange {
  0%   { border: 4px solid gold; }
  50%  { border: 4px solid orange; }
  100% { border: 4px solid gold; }
}
.blinking-border {
  animation: blink-border-royalblue 3s infinite;
}
.blinking-border.team {
  animation: blink-border-orange 3s infinite;
}
.blinking-border.master {
  animation: blink-border-violet 3s infinite!important;
}

 #bbs .back {
  width:100px;
  margin-left:10px;
  border-radius:20px;
  background:tomato;
  text-align:center;
  font-weight:bold;
 }
 #bbs .back a {
  display:block;
  color:white;
  padding:5px 10px 5px 0;
  border-radius:20px;
 }
 #bbs .post_container {
  position:relative;
  display:inline-block;
  width:calc(100% - 20px);
  margin-bottom:10px;
 }
 #bbs .post_container.first_post {
  padding-top:20px;
 }
 #bbs .post_card {
  position:relative;
  top:0;left:0;
  width:calc(100% - 18px);
  padding:5px;
  border-radius:15px;
  border:solid 4px royalblue;
  background:linear-gradient(0.25turn, royalblue, rgb(128, 151, 221), rgb(190, 198, 221));
  word-break: break-all;
  text-shadow: 
    1px 1px 0 #999,
   -1px 1px 0 #999,
    1px -1px 0 #999,
   -1px -1px 0 #999;
 }
 #bbs .post_card.room {
  border:solid 4px royalblue;
  background:linear-gradient(0.25turn, royalblue, rgb(128, 151, 221), rgb(190, 198, 221));
 }
 #bbs .post_card.master.room {
  border:solid 4px violet!important;
  background:linear-gradient(0.25turn, violet, royalblue);
 }
 #bbs .post_card.team {
  border:solid 4px orange;
  background:linear-gradient(0.25turn, orange, rgb(248, 200, 112), rgb(252, 232, 195));
 }
 #bbs .post_card.master.team {
  border:solid 4px violet!important;
  background:linear-gradient(0.25turn, violet, orange);
 }
 #bbs .post_card.share {
  border:solid 4px silver;
  background:linear-gradient(0.25turn, royalblue, orange);
 }
 #bbs .reply_post .post_card {
  border:solid 4px mediumseagreen;
  background:linear-gradient(0.25turn, mediumseagreen, rgb(114, 182, 145), rgb(164, 184, 173));
 }
 #bbs .deleted_post .post_card {
  height:20px;
  border:solid 4px tomato;
  background:linear-gradient(0.25turn, tomato, rgb(253, 152, 134), rgb(255, 211, 203));
 }
 #bbs .post_card img {
  display:inline;
  vertical-align:middle;
  width:15%;
 }
 #bbs .post_card .contents {
  display:inline-block;
  vertical-align:top;
  padding:0 5px;
  width:calc(85% - 14px);
  text-align:left;
  color:white;
  font-weight:bold;
 }
 #bbs .post_card .contents .title {
  width:100%;
  display:inline-block;
  font-size:16px;
  border-bottom:2px solid;
  margin-bottom:5px;
 }
 #bbs .post_card .contents .name {
  margin-bottom:5px;
 }
 #bbs .post_card .contents .body {
  min-height:25px;
 }
 #bbs .post_card .contents .body a {
  color:gold;
  text-decoration:underline;
 }
 #bbs .post_card .contents .date {
  margin-top:15px;
  margin-bottom:-7px;
  text-align:right;
  font-size:10px;
 }
 #bbs .first_post .contents .date{
  margin-bottom:0px;
 }
 #bbs .like-button {
 cursor: pointer;
 display: inline;
 align-items: center;
 margin-right:10px;
}
 #bbs .like-button.liked .like-icon {
 position:relative;
 top:-1px;
 color:rgb(235, 45, 235);
 font-weight:bold;
 font-size:20px;
 vertical-align:middle;
}
 #bbs .like-button.not-liked .like-icon {
 position:relative;
 top:-1px;
 color:rgb(235, 45, 235);
 font-weight:bold;
 font-size:20px;
 vertical-align:middle;
}
 #bbs .post_card .contents .delete_button {
  position:absolute;
  top:5px;right:5px;
  width:25px;
  background:red;
  border:solid 2px white;
  border-radius:10px;
  text-align:center;
 }
 #bbs .post_card .contents .delete_button a { color:white; }
 #bbs .post_card .contents .new_reply {
  width:200px;
  margin-top:10px;
  padding:5px 0;
  border-radius:20px;
  background:orange;
  text-align:center;
 }
 #bbs .post_card .contents .new_reply a { color:white; }
 #bbs .post_container.reply_post {
  position:relative;
  width:calc(100% - 38px);
  padding-left:5%;
 }
 #bbs .post_container.deleted_post {
  position:relative;
  width:calc(100% - 38px);
  padding-left:5%;
 }
 
 #bbs .text {
  margin:20px 0 20px 0;
  padding-left:20px;
  text-align:left;
  line-height:30px;
  font-size:14px;
  font-weight:bold;
 }
 #bbs .form_container {
  padding-left:10px;
  text-align:left;
 }
 #bbs form .item {
  font-weight:bold;
  margin-top:10px;
 }
 #bbs form input {
  border-radius:20px;
  border:solid 2px #111111;
  padding:5px 10px;
 }
 #bbs form input[name="title"] {
  width:90%;
 }
 #bbs form input.button {
  width:150px;
  font-size:14px;
  font-weight:bold;
 }
 #bbs form input.button:hover {
  cursor:pointer;
 }
 #bbs form .id {
  width:40px;
 }
 #bbs form textarea {
  width:90%;
  height:200px;
  padding:5px 10px;
  border-radius:10px;
  border:solid 2px #111111;
 }

}