@charset "UTF-8";

body {
    margin:0;
    text-size-adjust: none;
}

ul, li {
    list-style: none;
    padding: 0px;
}

a {
    color:  #076eff;
    text-decoration: none;
}

a:hover {
    color:  #076eff;
    text-decoration: underline;
}

header {
    background-color: #acdfff;
    color: #076eff;
    padding: 20px 20px 20px 20px;
}

footer {
    background-color: #acdfff;
    color: #076eff;
    font-size:small;
    padding: 20px;
}

.header {
    display: flex;
    position: relative;
    font-family: 'Yusei Magic', sans-serif;
}

.header p {
    font-size:large;
    margin: 0px 0px 0px 10px;
}

.time {
    color: #076eff;
    font-size:small;
    text-align: right;
    width:99%;
    margin: 2px 2px 2px 2px;
}

h1 {
    background-color: #076eff;
    color: #ffffff;
    font-size:16px;
    padding: 10px 10px 10px 10px ;
    margin: 5px 0px 5px 0px ;
}

h2 {
    background-color:rgba(98, 189, 255, 1);
    color: #ffffff;
    font-size:16px;
    padding: 5px 10px 5px 10px ;
    margin: 0px;
}

article {
    background-color: #ffffff;
    color: #000000;
    padding: 5px 0px 5px 0px ;
}

section {
    background-color: #ffffff;
    color: #000000;
    padding: 5px 0px 5px 0px ;
}

p {
    margin: 0px;
}

table {
    border-collapse: collapse;
}

th,td {
    border: solid 1px #cccccc;
    text-align: left;
    padding: 2px;
}

th {
    background-color: #00c2e5;
    color: #ffffff;
}

td {
    background-color: #eeeeee;
    color: #000000;
}

/* ハンバーガーメニューここから */
/* 参考元：https://maipyon.net/hamburger-menu-jquery/ */
#nav-icon {
    display: inline-block;
    width: 30px;
    height: 22px;
    vertical-align: middle;
}
#nav-icon span, #nav-icon span:before, #nav-icon span:after {
    position: absolute;
    transition: all 0.4s;
    height: 3px;/*線の太さ*/
    width: 25px;/*長さ*/
    border-radius: 3px;
    background: #fff;
    display: block;
    content: '';
    cursor: pointer;
    z-index: 9999;/*最前面*/
}
#nav-icon span:before {
    bottom: -8px;
}
#nav-icon span:after {
    bottom: -16px;
}
#nav-menu ul {
    margin: 0;
}
#nav-menu {
    display: none;
    position: absolute;
    width: 100%;
    height: auto;
    top: 0px;
    left: 0px;
    transition: .2s ease-in-out;
}
#nav-menu.open {
    display: block;
    opacity: 1;
    overflow: auto;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 9998;
    width: 100%;
    height: auto;
    background: rgba(55, 152, 242, 0.8);/*背景色*/
    overflow: hidden;/*ブラー効果でボヤけた部分を非表示*/
}
#nav-menu.open:before {
    content: '';
    overflow: hidden;
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
    z-index: -1;/*重なり順序を一番下にしておく*/
}
.menu-top {
    text-align: left;
    margin-left: 30px;
    color: #ffffff;
}
.menu {
    text-align: left;
    padding-left: 0px;
}
.menu-item {
    background: -moz-linear-gradient(top, rgba(48, 167, 253, 0.9), rgba(02, 135, 231, 0.7));
    background: -webkit-linear-gradient(top,rgba(48, 167, 253, 0.9), rgba(02, 135, 231, 0.7));
    background: linear-gradient(to bottom, rgba(48, 167, 253, 0.9), rgba(02, 135, 231, 0.7));
    padding: 0.5rem;
    padding-left: 1rem;
    margin-left: 0px;
    list-style: none;
}
.menu-item a {
    color: #ffffff;
}
#nav-icon.active span {
    -webkit-transform: translateY(8px) rotate(-45deg);
    transform: translateY(8px) rotate(-45deg);
    background-color: #ffffff;
}
#nav-icon.active span:before {
    -webkit-transform: translateY(-8px) rotate(45deg);
    transform: translateY(-8px) rotate(45deg);
    opacity: 0;
}
#nav-icon.active span:after {
    -webkit-transform: translateY(-16px) rotate(45deg);
    transform: translateY(-16px) rotate(90deg);
    background-color: #ffffff;
}
/* ハンバーガーメニューここまで */

/* スマホ */
@media (max-width:600px) {
    
    .clSubTitle {
        display:none;
    }

    .clPCOnly {
        display:none;
    }
    
    .tooltip .tooltiptext {
        display: none !important;
    }

}
/* PC */
@media (min-width:600px) {
    
    .clSubTitle {
        display:inline;
    }
    
    .clPCOnly {
        display:inline;
    }

    article {
        padding: 5px 10px 5px 10px ;
    }

    section {
        padding: 5px 10px 5px 10px ;
    }

    /* ツールチップここから */
    .tooltip {
        position: relative;
        display: inline-block;
    }

    .tooltip .tooltiptext {
        visibility: hidden;
        width: max-content;
        max-height: 80vh;      /* 高さ制限を追加 */
        overflow-y: auto;      /* 縦スクロールバーを表示 */
        background-color: #333;
        color: #fff;
        text-align: left;
        padding: 8px;
        border-radius: 6px;
        position: absolute;
        z-index: 1;
        top: calc(100% - 2px); /* マウスポインタのぎりぎり下に重なるように表示 */
        left: 50%;
        transform: translateX(-50%);
        white-space: pre-line; /* 複数行表示 */
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
    }
    /* ツールチップここまで */

    /* モーダル(画像を手前にポップアップ表示するようなもの)ここから */
    /* ボタン背景 */
    button.showImage {
    all: unset; /* ← まず全部リセット */
    font-size: 10px; /* ← 小さめの文字サイズ */
    color: #0078D4; /* ← 任意の文字色（リンク風） */
    cursor: pointer; /* ← クリックできる感を残す */
    }
    /* モーダル背景 */
    .overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 999;
    }

    /* 表示する画像 */
    .overlay img {
      max-width: 800px;
      max-height: 500px;
      border: 4px solid white;
      box-shadow: 0 0 10px black;
    }

    /* 閉じるときのクリック領域 */
    .overlay.active {
      display: flex;
    }
    /* モーダルここまで */

    /* ハンバーガーメニューここから */
    #nav-menu {
        display: none;
        position: absolute;
        width: auto;
        height: auto;
        top: 0px;
        left: 0px;
        transition: .2s ease-in-out;
    }
    #nav-menu.open {
        display: block;
        opacity: 1;
        overflow: auto;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 9998;
        width: auto;
        height: auto;
        background: rgba(55, 152, 242, 0.8);/*背景色*/
        overflow: hidden;/*ブラー効果でボヤけた部分を非表示*/
    }
    /* ハンバーガーメニューここまで */
}