/* HTMLの高さを規定する */
html, body {
  margin: 0;
  padding: 0;
}

/* 以下, 背景設定 + 雲描画のため足した部分 */
body {
    margin: 0;
    min-height: 100vh;
    background: linear-gradient(
    to bottom,
    #A7C7E7 0%,
    #DAD3EB 30%,
    #F6E8EE 60%,
    #FFF7F0 100%
  ); 
  background-repeat: no-repeat; /* 描画が足りなくなっても繰り返ししない */
  background-size: 100% 100%;       /* ← 画面に合わせて背景をfitさせる */
  position: relative; 
}

/* 画面全体に固定された雲レイヤー */
.cloud-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;       /* ← ここまで雲を許す範囲 */
  pointer-events: none;
  z-index: 0;         /* コンテンツの奥に配置 */
}

/* 雲の形 */
.cloud {
  position: absolute;
  z-index: 0;         /* コンテンツの奥に配置 */
  width: 300px;
  height: 120px;
  background:
    radial-gradient(circle at 30% 30%,
        rgba(220, 200, 240, 0.4) 0%,
        rgba(220, 200, 240, 0.0) 60%
    ),
    radial-gradient(circle at 60% 50%,
        rgba(255, 210, 230, 0.45) 0%,
        rgba(255, 210, 230, 0.0) 60%
    ),
    radial-gradient(circle,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.0) 75%
    );
  filter: blur(8px);
  opacity: 0.85;
}

/* コンテンツは必ず雲より前へ */
.chcc-section {
  position: relative;
  z-index: 1;
}

/* 雲の位置（例） */
.cloud-1 { top: 10%; left: -3%; }
.cloud-2 { top: 19%; left: 6%; }
.cloud-3 { top: 27%; left: 12%; }
.cloud-4 { top: 17%; left: 5%; }
.cloud-5 { top: 15%; left: 0%; }
.cloud-6 { top: 23%; left: 0%; }
.cloud-7 { top: 24%; left: 52%; }
.cloud-8 { top: 8%; left: 59%; }
.cloud-9 { top: 13%; left: 65%; }
.cloud-10 { top: 20%; left: 65%; }
.cloud-11 { top: 19%; left: 58%; }
.cloud-12 { top: 17%; left: 60%; }
.cloud-13 { top: 7%; left: -5%; }
.cloud-14 { top: -3%; left: 95%; }
.cloud-15 { top: 3%; left: 61%; }
.cloud-16 { top: 21%; left: 70%; }
.cloud-17 { top: -3%; left: 63%; }
.cloud-18 { top: 27%; left: 48%; }
.cloud-19 { top: 0%; left: 90%; }
.cloud-20 { top: -5%; left: 30%; }
.cloud-21 { top: -3%; left: 85%; }

/* ここまで背景設定 + 雲描画 */

/* 独自タイトルの設定 */
.db-title {
  font-size: 32px;
  font-weight: bold;
  color: #50499e;
  position: relative;
  z-index: 1;
}



#togodb-table-view {
    font-family: "Questrial", sans-serif;
    font-size: 14px;
}

#togodb-table-banner {
    display: none; /*added for delete description area*/
    max-width: 800px;
}

#togodb-table-view a {
    text-decoration: none;
    color: #8391ce;
    font-weight: bold;
    transition: color 0.3s;
}


#togodb-table-view a:hover {
    display: none; /*added for delete description area*/
    color: #6457ff; 
}

#togodb-table-view .togodb_title {}

#togodb-table-view .togodb_title h1 {
    display: none; /*added for delete description area*/
    position: relative;
    padding: 0.6em;
    background: #4f4c61;
    color: #fff;
    font-size: 12px;
}

#togodb-table-view .togodb_title h1:after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 10px solid transparent;
    border-top: 10px solid #4f4c61;
    width: 0;
    height: 0;
}

#togodb-table-view .togodb_title h2 {
    display: none; /*added for delete description area*/
    color: #50499e;
    font-size: 25px;
    position: relative;
    z-index: 1;
}

#togodb-table-view .togodb_description {
    display: none; /*added for delete description area*/
    font-size: 12px;
    margin-top: 10px;
    margin-bottom: 20px;
    color: #808080;
    position: relative; /* z-indexを有効にする */
    z-index: 1;         /* 雲より前に配置 */
}

#togodb-table-view .togodb_table a::before {
    font-family: "FontAwesome";
    content: "\f0c5";
    padding-right: 3px;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

#togodb-table-view .togodb_table_wrapper {}

#togodb-table-view .togodb_table_wrapper th {
    border-collapse: collapse;
    background-color: #6A7BB0; /*#50499e;*/
    padding-left: 1px;
    color: #fff;
    border-right-color: #6A7BB0; /*#50499e;*/
    border-left-color: #e3dfeb;
}

#togodb-table-view .togodb_table_wrapper td {
    border-bottom: 1px solid #dcdcdc;
    color: #808080;
    padding: 1px;
}

#togodb-table-view .togodb_table_wrapper td i.fas {
    margin-right: 5px;
}

#togodb-table-view .togodb_footer {
    color: #808080;
    /*background-color: #4f4c61;*/
    text-align: center;
    font-size: 10px;
    padding: 20px 0;
    margin-top: 10px;
}