/* =========================
   Base
========================= */

body{
  background:silver;
  font-family:"MS P明朝",serif;
  margin:0;
  padding:0;
}

.container{
  max-width:100%;
  width:800px;
  margin:0 auto;
  background:#fff;
  border:1px solid #666;
  padding:10px 20px 30px;
  box-sizing:border-box;
}

/* =========================
   Site Title
========================= */

.site-title{
  background:#036;
  color:#fff;
  text-align:center;
  font-size:24px;
  padding:10px 0;
  margin:0 -20px 10px;
}

/* =========================
   Tabs
========================= */

.tabs{
  display:flex;
  flex-wrap:wrap;
  background:#ddd;
  border-bottom:2px solid #666;
  margin:0 -20px 20px;
}

.tabs a{
  flex:1;
  text-align:center;
  padding:10px 0;
  text-decoration:none;
  color:#000;
  border-right:1px solid #aaa;
  background:#e0e0e0;
}

.tabs a:hover{
  background:#ccc;
}

.tabs a.active{
  background:#fff;
  font-weight:700;
  border-bottom:2px solid #fff;
}

/* =========================
   Breadcrumb
========================= */

.breadcrumb{
  font-size:.9em;
  margin-bottom:20px;
  color:#444;
}

/* =========================
   Main Content
========================= */

.main-content{
  line-height:1.2;
  font-size:6px;
}

/* Headings */

.main-content h1{
  font-size:22px;
  border-bottom:2px solid #036;
  padding-bottom:5px;
  margin-top:9px;
}

.main-content h2{
  font-size:18px;
  border-left:5px solid #036;
  padding-left:8px;
  margin-top:8px;
}

.main-content h3{
  font-size:16px;
  margin-top:7px;
}

/* Paragraph */

.main-content p{
  margin:6px 0;
}

/* =========================
   Lists
========================= */

.main-content ul,
.main-content ol{
  margin:8px 0 8px 25px;
  padding-left:20px;
}

.main-content li{
  margin:6px 0;
}

.main-content li ul,
.main-content li ol{
  margin-top:5px;
}

/* =========================
   Tables
========================= */

.main-content table{
  border-collapse:collapse;
  width:100%;
  margin:15px 0;
  font-size:14px;
  border:2px solid #444; /* 外枠を明確化 */
  background:#fff;
}

.main-content th,
.main-content td{
  border:1px solid #666; /* 見える色に */
  padding:8px;
  text-align:left;
}

.main-content th{
  background:#003366;
  color:#fff;
  font-weight:normal;
}

.main-content tr:nth-child(even){
  background:#f5f5f5;
}

/* =========================
   Blockquote
========================= */

.main-content blockquote{
  border-left:6px solid #003366;
  background:#f0f4f8;
  margin:20px 0;
  padding:12px 6px;
  color:#333;
  font-style:italic;
}

.main-content blockquote p{
  margin:0;
}

/* =========================
   Code
========================= */

/* Inline */
.main-content code{
  background:#f4f4f4;
  border:1px solid #ccc;
  padding:2px 4px;
  font-family:"Courier New",monospace;
  font-size:13px;
}

/* Block */
pre{
  position:relative;
  background:#2d2d2d;
  color:#f8f8f2;
  padding:15px;
  overflow:auto;
  margin:15px 0;
  border-radius:4px;
}

pre code{
  background:none;
  border:none;
  padding:0;
  color:inherit;
}

/* Copy Button */

.copy-btn{
  position:absolute;
  top:8px;
  right:8px;
  background:#444;         /* 黒系に */
  color:#fff;
  border:1px solid #777;
  padding:4px 10px;
  font-size:12px;
  cursor:pointer;
  border-radius:4px;
  transition:0.2s;
}

.copy-btn:hover{
  background:#666;
}

/* =========================
   Notice / Warning
========================= */

.notice{
  border-left:5px solid #007acc;
  background:#eef6fb;
  padding:10px;
  margin:15px 0;
  color:#036;
  font-size:.95em;
}

.warning{
  border-left:5px solid #cc0000;
  background:#ffecec;
  padding:10px;
  margin:15px 0;
  color:#900;
  font-size:.95em;
}

/* =========================
   Box
========================= */

.gray-box{
  background:#f0f0f0;
  border:1px solid #999;
  padding:10px;
  margin-bottom:20px;
}

/* =========================
   Footer
========================= */

footer{
  text-align:center;
  font-size:12px;
  color:#666;
  margin-top:40px;
  border-top:1px dotted #999;
  padding-top:10px;
}

/* =========================
   Responsive
========================= */

@media screen and (max-width:820px){
  .container{
    width:100%;
    padding:10px;
  }

  .site-title,
  .tabs{
    margin:0 -10px 10px;
  }
}