@charset "UTF-8";

.common-table-typeB {
          max-width: 860px;
          margin: 30px;
      }

      .common-table-typeB thead {
          background-color: #eee;
      }

      .common-table-typeB td {}

      .common-table-typeB td p {
          padding: 0;
          margin: 0;
          margin-bottom: 10px;
          text-align: left;
      }

      .common-table-typeB thead td {
          vertical-align: middle;
          text-align: center;
      }

      .common-table-typeB thead p {
          padding: 0;
          margin: 0;
          text-align: center;
          vertical-align: middle;
          white-space: nowrap;
      }

      p.sample-code,
      p.sample-html {
          font-family: monospace;
          max-width: 100%;
          margin: 30px 30px;
          padding: 1.6em;
          background-color: #222;
          color: #fff;
          text-align: left;
      }
      h1.center {
        display: block;
        text-align: center;
        padding-top:60px;
      }

      .common-contents-navi-top {
        width:auto;
        display: inline-block;
        /* max-width: 800px; */
        margin:0 auto;
        padding: 0;
        /* background-color: rgb(var(--image-color-light)); */
        height: auto;
      }
      .common-contents-navi-top .common-pagePrev {
        padding: 0;
        margin: 0;
      }

      .common-contents-navi-top .common-pagePrev a {
        /* border:1px solid rgb(var(--image-color)); */
        border:0;
        background-color:#eee;
        margin:0;
        color:rgb(var(--image-color));
        margin-bottom: 3px;
        padding-left: 4px;
        padding-right: 10px;
        padding-bottom: 6px;
        border-radius: 6px;
      }
      .common-contents-navi-top .common-pagePrev a:hover {
        /* border:1px solid rgb(var(--image-color)); */
        border:0;
        background-color:rgb(var(--image-color-light));
        margin:0;
        margin-bottom: 3px;
      }

      section.common-article-area {
        margin-top: 4px;
      }
      .infotable {
        margin:30px 0 30px;
        background-color: transparent;
        border:0 !important;
      }
      .infotable td {
        border:0 !important;
      }
      
      .infotable ul {
        border:1px dotted #666;
        background-color: #fff;
        border-radius: 6px;
        padding:20px;
        list-style-type: none;
      
      }
      .infotable ul li {
        font-size: 17px;
        margin:10px 30px 10px 20px;
        padding-left: 40px;
        /* white-space: nowrap; */
        background-image: url(http://www.antenna.co.jp/img/common_img/common-icon-list-onlineman.png);
        background-repeat: no-repeat;
        background-position: 3px 40%;
        background-size: 30px;
        max-width: 100%;
      
      }
      .infotable ul li img {
        margin:0 5px;
      }
      
      
      
      
      .infotable-hint,.infotable-caution {
        margin:60px auto 60px;
        background-color: #fafafa;
        max-width:800px;
        border-spacing: 0;
        border-collapse: separate;
        border-radius: 10px;
        border: 3px solid rgb(111, 131, 168) ;
      
      }
      .infotable-hint thead,
      .infotable-caution thead {
        background-color: transparent;
        border:0;
      }
      
      .infotable-hint td,
      .infotable-caution td {
        margin:0;
        padding:0 2.0em;
        background-color: transparent;
        border:0;
      }
      .infotable-hint thead td,
      .infotable-caution thead td {
        font-weight: 700;
        margin:0;
        padding:14px 2.0em 0 60px;
        background-color: transparent;
        border:0;
        background-image: url(https://www.antenna.co.jp/img/common_img/common-icon-hint.png);
        background-repeat: no-repeat;
        background-position: 23px 40%;
        background-size: 30px;
      }
      .infotable-caution thead td {
        background-image: url(https://www.antenna.co.jp/img/common_img/common-icon-notice.png);
      }
        
      .infotable-hint td p,
      .infotable-caution td p {
        padding:0;
        margin:10px 0;
      }
      .infotable-hint thead td p,
      .infotable-caution thead td p {
        margin-top:0;
      }
      
      section {
        margin-bottom: 100px;
      }
      
      
      section section {
        margin-bottom: 50px;
      }
      section section:last-of-type {
        margin-bottom: 100px;
      }
      
      .sample-code,
      .sample-html {
        /* color: #000; */
        text-align: left;
        padding:2.0em;
        /* border:1px solid #666; */
        /* background-color: rgb(253, 252, 244);
        box-shadow: 4px 4px 4px 1px rgba(0, 0, 0, .2);  */
        border-radius: 4px;
        width:auto;
        color: #ffffff;
        background-color: #222;
        white-space: pre-wrap;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
      }
      
      .sample-tag-table {
        color: #ffffff;
        border-radius: 4px;
        border:3px solid #000;
        background-color: #333;
      }
      .sample-tag-table td {
        border:0;
      }
      
      #toc p {
        text-align: left;
      }

      .code-toolbar {
        max-width: 800px;
        margin-left:auto !important;
        margin-right:auto !important;
      }
      code[class*="language-"],
      pre[class*="language-"] {
        white-space: pre-wrap !important;
      }



      /* ------------------------ prism ----------------------------------------------------------*/

      div.code-toolbar > .toolbar > .toolbar-item > a,
div.code-toolbar > .toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar > .toolbar-item > span {
	color: #fff !important;
	font-size: .9em !important;
	padding: 0.6em 1em !important;
	background: #f5f2f0;
	background: rgba(255, 255, 255, 0.2) !important;
	box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
	border-radius: 99999px !important;
}


      /* ------------------------ QR CODE ----------------------------------------------------------*/

.common-qrcode {
  color:#000;
  margin:30px;
  background-color: #fff;
  padding:0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  display: flex;
  border: 1px solid #ccc;
}
.common-qrcode p {
  margin:20px;
  padding:0;
}
.common-qrcode img {
  margin:10px;
  border:#333 1px solid;
  padding:20px;
  width:180px;
  max-width: none;
}




      /*-------------------------- レスポンシブ用CSS ここから -----------------------------------------*/
      @media screen and (max-width:640px) {
          /* ↓ここに個別のスマホ用スタイルを指定 */

          section {
            overflow-x: auto;
            margin: 0 10px;
          }
          .common-article-area section {
            margin-left: 0;
            margin-right: 0;

          }
          .common-table-typeB {
            width:100%;
            max-width: 100%;
            margin: 30px 0;
        }
        .common-table-typeB thead p {
          white-space: wrap;
        }
          p.sample-code,
          p.sample-html {
              margin: 30px 10px;
          }
          .infotable ul {
            padding:10px;
        
          }
          .infotable ul li {
            font-size: 17px;
            margin:10px 10px 10px 10px;
          }
        
          .infotable-hint td,
          .infotable-caution td {
            margin:0;
            padding:0 10px;
            background-color: transparent;
            border:0;
          }
          
          #mobile-side-btn {
            display: inline-block;
        
          }

      /* ------------------------ QR CODE ----------------------------------------------------------*/

          .common-qrcode {
            color:#000;
            margin:30px auto;
            background-color: #fff;
            padding:0;
            display: flex;
            flex-direction:column;
          }
          .common-qrcode img {
            margin:10px auto;
            border:#333 1px solid;
            padding:20px;
            width:180px;
            max-width: none;
          }
          
          

          /* ↑ここまでに個別のスマホ用スタイルを指定 */
      }


      /*-------------------------- レスポンシブ用CSS ここまで ----------------------*/