/* CSS layout */
html {
  scroll-padding-top: 60px;
}

body {
  margin: 0;
  padding: 0;
  scroll-padding-top: 60px;
}

#masthead {
  color: white;
  font-size: xx-large;
  padding: 10px 10px 10px;
  /* background-image: url(images/bgimage2.jpg); */
  /* background-color: #1E90FF; */
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7abcff+0,60abf8+44,4096ee+100;Blue+3D+%2314 */
  background: #7abcff;
  /* Old browsers */
  background: -moz-linear-gradient(top,
      #7abcff 0%,
      #60abf8 44%,
      #4096ee 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top,
      #7abcff 0%,
      #60abf8 44%,
      #4096ee 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,
      #7abcff 0%,
      #60abf8 44%,
      #4096ee 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7abcff', endColorstr='#4096ee', GradientType=0);
  /* IE6-9 */
  /* position: sticky; */
  width: 100%;
  height: 60px;
}

.header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

#top_nav {
  margin: 20px 500px 5px;
  /* padding: 80px 200px 5px ;*/
  position: fixed;
}

@media screen and (min-width: 769px) {
  #container {
    min-width: 600px;
    max-width: 800px;
  }

  .navi {
    position: sticky;
    top: 60px;
  }

  #left_col {
    /* margin: 70px 0; */
    width: 180px;
    height: 80%;
    float: left;
    border: solid 2px #000000;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
  }

  #left_body {
    display: flex;
    flex-direction: column;
    margin: 10px 10px;
    line-height: 130%;
  }

  #left_body a.gap {
    margin-top: 16px;
  }

  #left_list {
    padding-left: 20px;
  }

  #page_content {
    /*padding: 70px 0 80px 200px; /*左コンテンツがある場合*/
    padding: 0 0 80px 200px;
    /*左コンテンツがある場合*/
  }

}

@media screen and (max-width: 768px) {
  #container {
    min-width: unset;
    max-width: 100%;
    margin: 0 auto;
  }

  .navi {
    position: static;
    top: 60px;
  }

  /* 左側のナビを画面いっぱいに広げて、横並び(float)を解除 */
  #left_col {
    width: 95%;
    /* 画面幅に合わせる */
    float: none;
    /* 横並び解除 */
    height: auto;
    /* 高さを中身に合わせる */
    margin: 10px auto;
    /* 中央寄せ */
    background-color: #f9f9f9;
    /* 少し色をつけて区別しやすく */
  }

  /* ナビの中身を少しスッキリさせる（リンクの間隔など） */
  #left_body {
    display: flex;
    flex-wrap: wrap;
    /* リンクを横に並べて折り返す（お好みで） */
    gap: 10px;
    padding: 10px;
  }

  /* ナビの中身を少しスッキリさせる（リンクの間隔など） */
  #left_body {
    display: flex;
    flex-wrap: wrap;
    /* リンクを横に並べて折り返す（お好みで） */
    gap: 10px;
    padding: 10px;
  }

  /* スマホの時はリンクをボタンっぽくして押しやすくする場合 */
  #left_body a {
    line-height: 1;
    display: inline-block;
    padding: 8px 12px;
    background: #4a90e2;
    border-radius: 6px;
    text-decoration: none;
    font-size: 12px;
    color: #fff;
    font-weight: 500;
    transition: all 0.2s ease;
  }

  #left_list {
    padding-left: 10px;
  }

  #page_content {
    /*padding: 70px 0 80px 200px; /*左コンテンツがある場合*/
    padding: 0 0 0 10px;
    /*左コンテンツがある場合*/
  }
}





/*
#footer {
  clear: both;
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 80px;
  background: -webkit-gradient(linear,
      left top,
      left bottom,
      color-stop(0, #fff),
      color-stop(1, #cecece));
  background: -webkit-linear-gradient(#fff, #cecece);
  background: -moz-linear-gradient(#fff, #cecece);
  background: -o-linear-gradient(#fff, #cecece);
  background: -ms-linear-gradient(#fff, #cecece);
  background: linear-gradient(#fff, #cecece);
}
*/
.title_link {
  text-decoration: none;
  color: white;
}

/* 角を丸くしたボタン */
.btn {
  width: 120px;
  text-align: center;
  display: block;
  text-decoration: none;

  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 5px 0 5px;
  color: #111;

  background: -webkit-gradient(linear,
      left top,
      left bottom,
      color-stop(0, #b6e2fd),
      color-stop(0.2, #91bae4),
      color-stop(0.5, #8fbff0),
      color-stop(0.51, #6ba8e4),
      color-stop(0.75, #87c2fb),
      color-stop(1, #bcf4fd));
  background: -webkit-linear-gradient(top,
      #b6e2fd 0%,
      #91bae4 20%,
      #8fbff0 50%,
      #6ba8e4 51%,
      #87c2fb 75%,
      #bcf4fd 100%);
  background: -moz-linear-gradient(top,
      #b6e2fd 0%,
      #91bae4 20%,
      #8fbff0 50%,
      #6ba8e4 51%,
      #87c2fb 75%,
      #bcf4fd 100%);
  background: -o-linear-gradient(top,
      #b6e2fd 0%,
      #91bae4 20%,
      #8fbff0 50%,
      #6ba8e4 51%,
      #87c2fb 75%,
      #bcf4fd 100%);
  background: -ms-linear-gradient(top,
      #b6e2fd 0%,
      #91bae4 20%,
      #8fbff0 50%,
      #6ba8e4 51%,
      #87c2fb 75%,
      #bcf4fd 100%);
  background: linear-gradient(to bottom,
      #b6e2fd 0%,
      #91bae4 20%,
      #8fbff0 50%,
      #6ba8e4 51%,
      #87c2fb 75%,
      #bcf4fd 100%);
}

.btn:hover {
  color: white;
}

.large_btn {
  width: 320px;
  text-decoration: none;
  display: block;
  text-align: center;
  padding: 8px 0 10px;
  color: #111;
  background-color: #49a9d4;
  border-radius: 5px;
  font-weight: bold;

  background: -webkit-gradient(linear,
      left top,
      left bottom,
      color-stop(0, #b6e2fd),
      color-stop(0.2, #91bae4),
      color-stop(0.5, #8fbff0),
      color-stop(0.51, #6ba8e4),
      color-stop(0.75, #87c2fb),
      color-stop(1, #bcf4fd));
  background: -webkit-linear-gradient(top,
      #b6e2fd 0%,
      #91bae4 20%,
      #8fbff0 50%,
      #6ba8e4 51%,
      #87c2fb 75%,
      #bcf4fd 100%);
  background: -moz-linear-gradient(top,
      #b6e2fd 0%,
      #91bae4 20%,
      #8fbff0 50%,
      #6ba8e4 51%,
      #87c2fb 75%,
      #bcf4fd 100%);
  background: -o-linear-gradient(top,
      #b6e2fd 0%,
      #91bae4 20%,
      #8fbff0 50%,
      #6ba8e4 51%,
      #87c2fb 75%,
      #bcf4fd 100%);
  background: -ms-linear-gradient(top,
      #b6e2fd 0%,
      #91bae4 20%,
      #8fbff0 50%,
      #6ba8e4 51%,
      #87c2fb 75%,
      #bcf4fd 100%);
  background: linear-gradient(to bottom,
      #b6e2fd 0%,
      #91bae4 20%,
      #8fbff0 50%,
      #6ba8e4 51%,
      #87c2fb 75%,
      #bcf4fd 100%);
}

.large_btn:hover {
  color: white;
}

.big_btn {
  width: 200px;
  text-align: center;
  background: #3d94f6;
  background-image: -webkit-linear-gradient(top, #3d94f6, #1e62d0);
  background-image: -moz-linear-gradient(top, #3d94f6, #1e62d0);
  background-image: -ms-linear-gradient(top, #3d94f6, #1e62d0);
  background-image: -o-linear-gradient(top, #3d94f6, #1e62d0);
  background-image: linear-gradient(to bottom, #3d94f6, #1e62d0);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  color: #ffffff;
  font-size: 30px;
  font-weight: 100;
  padding: 30px;
  box-shadow: 1px 1px 20px 0px #000000;
  -webkit-box-shadow: 1px 1px 20px 0px #000000;
  -moz-box-shadow: 1px 1px 20px 0px #000000;
  text-shadow: 1px 1px 20px #000000;
  border: solid #337fed 1px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.big_btn:hover {
  background: #1e62d0;
  background-image: -webkit-linear-gradient(top, #1e62d0, #3d94f6);
  background-image: -moz-linear-gradient(top, #1e62d0, #3d94f6);
  background-image: -ms-linear-gradient(top, #1e62d0, #3d94f6);
  background-image: -o-linear-gradient(top, #1e62d0, #3d94f6);
  background-image: linear-gradient(to bottom, #1e62d0, #3d94f6);
  text-decoration: none;
}

h1 {
  font-size: x-large;
}

h3 {
  font-size: large;
  color: rgb(51, 51, 204);
  padding: 0px 0px 0px 12px;
  text-align: left;
  border-left-color: rgb(70, 70, 200);
  border-left-style: solid;
  border-left-width: 10px;
  background-color: rgb(255, 255, 255);
}

.indent {
  padding-left: 1em;
}

.bg_background {
  background: #a0a0a0;
}

/*カスタム検索窓の余白を消す*/
.gsc-control-cse {
  padding: 0em !important;
}

.toc1 {
  margin-left: 15px;
  list-style: none;
}

.toc2 {
  margin-left: 5px;
  list-style: none;
}

.toc3 {
  margin-left: 15px;
  list-style: none;
}

.inner-image {
  margin-left: 20px;
}

.tag-label {
  font-weight: bold;
  margin-left: 10px;
}

.tag-table {
  margin-left: 20px;
  border: 1px #000000 solid;
}

.tag-innner {
  margin-left: 20px;
}

.table-color {
  margin-left: 20px;
  border: 1px #000000 solid;
}

.td-border {
  border: 1px #000000 solid;
}

.color-sample {
  width: 60px;
  table-layout: fixed;
  border: 1px #000000 solid;
}

img {
  max-width: 100%;
  /* 親要素からはみ出さない */
  height: auto;
  /* アスペクト比を維持する */
}

th {
  text-align: left;
  font-weight: normal;
  /* 太字をやめる場合 */
}


.step-box {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.note {
  background-color: #fff3cd;
  border-left: 5px solid #ffecb5;
  padding: 15px;
  margin: 20px 0;
}

.tip {
  background-color: #d1ecf1;
  border-left: 5px solid #bee5eb;
  padding: 15px;
  margin: 20px 0;
}

code {
  background-color: #eee;
  padding: 2px 5px;
  border-radius: 4px;
  font-weight: bold;
}

ul {
  padding-left: 20px;
}

li {
  margin-bottom: 8px;
}

.manual-table {
  border-collapse: collapse;
  border: 1px solid #000000;
}

.manual-table td {
  border: 1px solid #000000;
  padding: 4px 8px;
  vertical-align: top;
}

.manual-table td:first-child {
  width: 200px;
}