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

 #howto {
  position:relative;
  width:100%;
  min-width:1100px;
  min-height:calc(100vh - 130px);
  padding-bottom:30px;
  background:white;
 }
 #howto .container {
  width:1060px;
  min-width:1060px;
  padding:20px;
  margin:0 auto;
  text-align:left;
  font-size:16px;
 }
 #howto .header {
  font-size:60px;
  font-weight:bold;
 }
 #howto .text {
  margin-bottom:20px;
  padding-left:20px;
  line-height:30px;
  font-size:14px;
  font-weight:bold;
 }
 #howto .description {
  padding-left:20px;
  line-height:20px;
  font-size:14px;
  font-weight:bold;
 }
 #howto .description span {
  color:red;
 }
 #howto .series {
  margin:10px 0;
  padding-left:10px;
 }
 #howto .series div {
  display:inline-block;
  width:280px;
  padding:5px 20px;
  border-radius:20px;
  background:#1e90ff;
  box-shadow: 2px 2px 12px 1px rgba(0, 0, 0, 0.2);
  text-align:center;
  font-weight:bold;
  color:white;
 }
 #howto .content_container {
  position:relative;
  display:inline-block;
  width:280px;
  margin:10px;
  padding:16px 16px 6px 16px;
  border-radius:30px;
  border:solid 4px transparent;
  box-shadow: 2px 2px 25px 5px rgba(0, 0, 0, 0.2);
  transition:0.3s;
  text-align:center;
  font-size:14px;
  font-weight:bold;
 }
 #howto .content_container.lock::after {
  content: "";
  position:absolute;
  top:22px;left:22px;
  display: block;
  width: 35px;
  height: 35px;
  background-image: url("../common/membership.png");
  background-size: contain;
  background-repeat: no-repeat;
 }
 #howto .content_container.wip {
  opacity:0.5;
  box-shadow: 2px 2px 25px 5px rgba(0, 0, 0, 0.4);
 }
 #howto .content_container.wip::after {
  content:"Coming soon";
  position:absolute;
  top:70px;left:55px;
  opacity:0.5;
  font-size:30px;
  color:white;
  opacity:1;
  transform:rotate(15deg);
 }
 #howto .content_container:hover {
  border:solid 4px lime;
  transform:scale(1.05);
 }
 #howto .content_container.wip:hover {
  border:solid 4px transparent;
  transform:scale(1);
  background:gray;
  cursor:not-allowed;
 }
 #howto .content_container div {
  display:inline;
 }
 #howto .content_container img {
  width:100%;
  border-radius:10px;
 }

 #howto .back {
  width:200px;
  margin-top:10px;
  margin-left:10px;
  border-radius:20px;
  background:tomato;
  text-align:center;
  font-weight:bold;
 }
 #howto .back a {
  display:block;
  padding:5px 20px 5px 0;
  color:white; }
 #howto .body {
  width:calc(100% - 80px);
  min-height:80vh;
  margin:20px auto 0 auto;
  padding:40px 30px;
  border-radius:30px;
  box-shadow: 0 0 15px 15px rgba(0, 0, 0, 0.2);  
 }
 #howto .title {
  margin-bottom:30px;
  font-size:40px;
  font-weight:bold;
 }
 #howto .image {
  width:100%;
 }
 #howto .body .header {
  margin:20px 0 5px 0;
  padding:5px 20px 0 20px;
  font-size:24px;
  border-left:solid 10px #1e90ff;
 }
 #howto ul,#howto ol {
  margin:0;
  padding-left:20px;
 }
 #howto .advanced {
  position:relative;
  top:-1px;
  display:inline-block;
  margin-left:3px;
  padding:2px 5px;
  vertical-align:middle;
  background:tomato;
  border-radius:10px;
  color:white;
  font-size:10px;
 }
 #howto .beginner {
  position:relative;
  top:-1px;
  display:inline-block;
  margin-left:3px;
  padding:2px 5px;
  vertical-align:middle;
  background:violet;
  border-radius:10px;
  color:white;
  font-size:10px;
 }
 #howto .formation {
  width:400px;
  margin-top:10px;
 }
 #howto .skill {
  margin-top:10px;
  font-weight:bold;
  color:red;
 }
 #howto .table td.left {
  padding:0 5px;
  border-top:solid 1px silver;
  border-left:solid 1px silver;
  border-bottom:solid 2px ;
  border-right:solid 2px gray;
  vertical-align:top;
  text-align:center;
 }
 #howto .comment {
  margin:20px 0;
 }
 #howto .comment img {
  display:inline-block;
  vertical-align:middle;
  width:80px;
 }
 #howto .comment .fukidashi {
  display:inline-block;
  position:relative;
  vertical-align:middle;
  width:calc(100% - 300px);
  padding:20px;
  border-radius:20px;
  font-weight:bold;
 }
 #howto .comment .fukidashi.tama {
  background:#c2dffc;
 }
 #howto .fukidashi.tama::before{
  content: "";
  position: absolute;
  top: 50%;   /* 縦軸をセンタリングする */ 
  left: -13px;
  transform: translateY(-50%);
  transform:rotate(180deg);   /* 縦軸をセンタリングする */
  border: 5px solid transparent;
  border-left: 8px solid #c2dffc;
 }
 #howto .comment .fukidashi.milk {
  margin-left:150px;
  background:rgb(252, 215, 221);
 }
 #howto .fukidashi.milk::before{
  content: "";
  position: absolute;
  top: 50%;   /* 縦軸をセンタリングする */ 
  right: -13px;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left: 8px solid rgb(252, 215, 221);
 }
 #howto .comment .fukidashi div {
  height:100%;
  display:flex;
  align-items:center;
 }
 #howto .movie {
  width:560px;
  height:315px;
  margin:20px 0;
  padding-left:20px;
 }
 #howto .annotation {
  margin:10px 0;
  border:dashed 2px orange;
  padding:10px;
  font-size:12px;
 }
 #howto .gif { width:400px; }
 #howto .monster { height:200px; }
 #howto .crossfade {
  display:inline-block;
  position: relative;
  vertical-align:top;
  margin:0 10px;
  width:240px;
  height:240px;
  overflow:hidden;
 }
 #howto .crossfade img {
  position: absolute;
  top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;
}
 #howto .crossfade .before-img { animation-delay: 0s; }
 #howto .crossfade .after-img { animation: crossfade 5s infinite;animation-delay: 2s;opacity:0; }
 @keyframes crossfade {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  50%  { opacity: 1; }
  70%  { opacity: 0; }
  100% { opacity: 0; }
}
 #howto .icon_sumple {
  display:inline;
  width:20px;
  vertical-align:middle;
 }
 #howto .condition  {
  border-collapse: collapse;
  margin:0;
  font-size:16px;
  font-weight:bold;
 }
 #howto .condition td {
  border:solid 1px black;
  min-width:35px;
  height:30px;
  text-align:center;
 }
 #howto .condition tr.item td {
  background:silver;
 }
 #howto .condition td.name {
  background:silver;
  font-size:12px;
 }
 #howto .condition td:has(img[src="howto/careful.png"]) {
  background-color:rgb(255, 245, 191);
 }
 #howto .condition td:has(img[src="howto/danger.png"]) {
  background-color:rgb(255, 201, 192);
 }
 #howto .condition td:has(img[src="howto/shield.png"]) {
  background-color:rgb(196, 232, 255);
 }
 #howto .condition img {
  display:block;
  margin:0 auto;
  width:20px;
 }
 
} @media screen and (max-width: 767px) {  /* スマホ */

 #howto {
  position:relative;
  width:100%;
  padding-bottom:30px;
  background:white;
 }
 #howto .container {
  position:relative;
  padding:15px 10px;
  margin:0 auto;
  text-align:left;
  font-size:14px;
 }
 #howto .header {
  padding:0 0 5px 0;
  font-size:30px;
  font-weight:bold;
  text-align:left;
 }
 #howto .text {
  margin-bottom:10px;
  padding:0 10px;
  font-size:14px;
  font-weight:bold;
 }
 #howto .description {
  padding-left:10px;
  font-size:14px;
  font-weight:bold;
 }
 #howto .description span {
  color:red;
 }
 #howto .series {
  margin:10px 0;
  padding-left:10px;
 }
 #howto .series div {
  display:inline-block;
  width:calc(90% - 40px + 20px);
  padding:5px 20px;
  border-radius:20px;
  background:#1e90ff;
  box-shadow: 2px 2px 12px 1px rgba(0, 0, 0, 0.2);
  text-align:center;
  font-weight:bold;
  color:white;
 }
 #howto .content_container {
  position:relative;
  display:inline-block;
  width:150px;
  margin:5px;
  padding:6px 6px 2px 6px;
  border-radius:5px;
  border:solid 4px transparent;
  box-shadow: 2px 2px 12px 1px rgba(0, 0, 0, 0.2);
  text-align:center;
  line-height:18px;
  font-size:10px;
  font-weight:bold;
 }
 #howto .content_container.lock::after {
  content: "";
  position:absolute;
  top:12px;left:12px;
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("../common/membership.png");
  background-size: contain;
  background-repeat: no-repeat;
 }
 #howto .content_container.wip {
  opacity:0.5;
 }
 #howto .content_container.wip::after {
  content:"Coming soon";
  position:absolute;
  top:35px;left:27px;
  opacity:0.5;
  font-size:16px;
  color:white;
  opacity:1;
  transform:rotate(15deg);
 }
 #howto .content_container div {
  position:relative;
  top:3px;
  display:inline-block;
  margin-top:-6px;
  line-height:10px;
 }
 #howto .content_container img {
  width:100%;
  border-radius:5px;
 }


 #howto .back {
  width:100px;
  margin-top:10px;
  margin-left:10px;
  padding:5px 15px 5px 0;
  border-radius:20px;
  background:tomato;
  text-align:center;
  font-weight:bold;
 }
 #howto .back a { color:white; }
 #howto .body {
  width:calc(100% - 60px);
  min-height:80vh;
  margin:20px auto 0 auto;
  padding:30px 20px;
  border-radius:30px;
  box-shadow: 2px 2px 12px 1px rgba(0, 0, 0, 0.2);  
 }
 #howto .title {
  margin-bottom:10px;
  font-size:20px;
  font-weight:bold;
 }
 #howto .image {
  width:100%;
 }
 #howto .body .header {
  margin:20px 0 5px 0;
  padding:2px 0 0 5px;
  font-size:18px;
  border-left:solid 10px #1e90ff;
 }
 #howto ul,#howto ol {
  margin:0;
  padding-left:20px;
 }
 #howto .advanced {
  position:relative;
  top:-1px;
  display:inline-block;
  margin-left:3px;
  padding:2px 5px 1px 5px;
  vertical-align:middle;
  background:tomato;
  border-radius:10px;
  color:white;
  font-size:10px;
 }
 #howto .beginner {
  position:relative;
  top:-1px;
  display:inline-block;
  margin-left:3px;
  padding:2px 5px 1px 5px;
  vertical-align:middle;
  background:violet;
  border-radius:10px;
  color:white;
  font-size:10px;
 }
 #howto .formation {
  width:100%;
  margin-top:10px;
 }
 #howto .skill {
  margin-top:10px;
  font-weight:bold;
  color:red;
 }
 #howto .table td.left {
  padding:0 5px;
  border-top:solid 1px silver;
  border-left:solid 1px silver;
  border-bottom:solid 2px ;
  border-right:solid 2px gray;
  vertical-align:top;
  text-align:center;
 }
 #howto .comment {
  margin:20px 0;
 }
 #howto .comment img {
  display:inline-block;
  vertical-align:middle;
  width:50px;
 }
 #howto .comment .fukidashi {
  display:inline-block;
  position:relative;
  vertical-align:middle;
  width:calc(100% - 80px);
  padding:10px;
  border-radius:10px;
  font-weight:bold;
 }
 #howto .comment .fukidashi.tama {
  background:#c2dffc; 
 }
 #howto .fukidashi.tama::before{
  content: "";
  position: absolute;
  top: 50%;   /* 縦軸をセンタリングする */ 
  left: -13px;
  transform: translateY(-50%);
  transform:rotate(180deg);   /* 縦軸をセンタリングする */
  border: 5px solid transparent;
  border-left: 8px solid #c2dffc;
 }
 #howto .comment .fukidashi.milk {
  background:rgb(252, 215, 221)
  ; 
 }
 #howto .fukidashi.milk::before{
  content: "";
  position: absolute;
  top: 50%;   /* 縦軸をセンタリングする */ 
  right: -13px;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left: 8px solid rgb(252, 215, 221);
 }
 #howto .comment .fukidashi div {
  height:100%;
  display:flex;
  align-items:center;
 }
 #howto .movie {
  max-width:90vw;
  height:calc(0.495 * 90vw);
  margin:20px 0;
 }
 #howto .annotation {
  margin:10px 0;
  border:dashed 2px orange;
  padding:10px;
  font-size:12px;
 }
 #howto .gif {
  width:100%;
 }
 #howto .monster {
  height:100px;
 }
 #howto .crossfade {
  position: relative;
  width:200px;
  height:200px;
  overflow:hidden;
 }
 #howto .crossfade img {
  position: absolute;
  top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;
}
 #howto .crossfade .before-img { animation-delay: 0s; }
 #howto .crossfade .after-img { animation: crossfade 5s infinite;animation-delay: 2s;opacity:0; }
 @keyframes crossfade {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  50%  { opacity: 1; }
  70%  { opacity: 0; }
  100% { opacity: 0; }
}
 #howto .icon_sumple {
  display:inline;
  width:20px;
  vertical-align:middle;
 }
 #howto .condition  {
  border-collapse: collapse;
  margin:0 -15px;
  font-size:6px;
  font-weight:bold;
 }
 #howto .condition td {
  height:12px;
  border:solid 1px black;
  min-width:12px;
  text-align:center;
 }
 #howto .condition tr.item td {
  background:silver;
 }
 #howto .condition td.name {
  background:silver;
  font-size:4px;
 }
 #howto .condition td:has(img[src="howto/careful.png"]) {
  background-color:rgb(255, 245, 191);
 }
 #howto .condition td:has(img[src="howto/danger.png"]) {
  background-color:rgb(255, 201, 192);
 }
 #howto .condition td:has(img[src="howto/shield.png"]) {
  background-color:rgb(196, 232, 255);
 }
 #howto .condition img {
  display:block;
  margin:0 auto;
  width:10px;
 }


 #howto .secret_button {
  margin:10px 0;
  padding-left:10px;
 }
 #howto .secret_button div {
  display:block;
  width:calc(90% - 40px + 20px);
  padding:5px 20px;
  border-radius:20px;
  background:red;
  box-shadow: 2px 2px 12px 1px rgba(0, 0, 0, 0.2);
  text-align:center;
  font-weight:bold;
  color:white;
  background: linear-gradient(90deg, red, orange, yellow, green, cyan, blue, magenta);
  background-size: 100% 100%;
  animation: hue 1s linear infinite;
 }
 @keyframes hue {
  to { filter: hue-rotate(360deg); }
 }

#sw {
  display:none;
  position:fixed;
  width:300px;
  height:400px;
  top:100px;
  left:calc(50% - 150px);
  background:#000;
  overflow:hidden;
}
#sw img {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  opacity:1;
}
@keyframes tremble2 {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}
.tremble2 {
  animation: tremble2 0.2s;
}

}