:root{
    --a1:#333;
    --a2:#666;
    --a3:#999;
    --a4:#eee;
    --a5:#fff;
    --b1:#0073E6;
}
@keyframes fadein{from{ opacity: 0;}to{ opacity: 1;}}
    html,body,h1,h2,ul{
    margin:0;
    padding:0;
}
body img{
    border: none;
    max-width: 100%;
    height: auto;
    vertical-align:bottom;
}
#header,#footer{
    background:var(--a1);
    color: var(--a5);
}
#header{
    display: grid;
    grid-template-columns: 1fr 1.2fr 0.8fr;
}
#header>div{padding:1rem;}
#contents{
    width: 90%;
    margin:0 auto;
    padding: 1rem;
}
#footer {
    text-align: center;
    padding: .2rem 1rem;
}
h1{
    padding-top:1rem;
    font-size: min(5vw, 2rem);
}
h2{
    font-size: min(5vw, 2rem);
}
    p{margin: 1rem 0;}
    a:link{text-decoration: none;}
    a:hover{text-decoration: underline;}
.tabWrap{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1rem 1vw;
    color: var(--a2);
    text-shadow: .5px .5px var(--a5);
    text-align: center;
}
.tabs{
    background: var(--a4);
    box-shadow: 0 0 1px var(--a2);
    cursor: pointer;
    padding: .5rem;
    color: var(--a2);
}
.tabs.in,.tabs:hover{
    background: var(--b1);
    color: var(--a5);
}
#footer a{
    color:var(--a5);
}
/* ポリシー */
.sml{
    font-size: .8rem;
    margin: 0 auto;
}
.sml a:link{text-decoration: underline;}
/* バナー周り */
.banner{
    grid-auto-flow: column;
    display: grid;
    margin: 2rem auto;
    grid-gap: .5rem;
}
/* バナー */
.banner img{
    width:auto;
    height: 100%;
    background: var(--a5);
}
.fCtg{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem 1vw;
    color: var(--a2);
    text-shadow: .5px .5px var(--a5);
    text-align: center;
}
.fCtg{
    border-bottom:.1rem solid var(--a2);
    border-top:.1rem solid var(--a2);
    margin: 1rem auto;
    padding:2rem .5rem;
    font-size: min(3.5vw, 1rem);
}
#nav{
    margin: 0 0 0 auto;
}
#nav ul{
    display: none;
    list-style: none;
}
#nav.in{
    position:fixed; /* 固定 */
    top: 100px; /* calc使う？ #navs.in 100+16(1rem) */
    width: calc(100% - 2rem); /* デバイスによっては表示怪しいかも 両端に1rem */
    z-index: 10; /* plotlyより表面に */
}
#nav.in ul{
    display:block; /* 表示 gird 外す */
    animation: fadein 0.5s;
    background:rgb(9, 132, 227, 0.9);
    text-align:center;
    padding:2rem 1rem;
}
#nav.in li{
    padding:1rem .5rem;
    margin:1.5rem;
    background:#999;
    box-shadow: -1px -1px 3px #eee, 1px 1px 3px #fff;
}
#nav.in a{
    color:#fff;
    display:block;
}
/* 3rem限定 怪しい 16px*3 */
#navs{
    width: 3rem;
    height: 3rem;
}
#navs.in{
    position:fixed;
    top: 116px; /* calc使う？ #nav.in top 100+16(1rem) */
    right: 1rem; /* 右寄せ */
}
#navs svg{width: 100%;height: 100%;}
.tl{
    margin: 0 auto;
}
.gt{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem 1vw;
    color: var(--a2);
    text-shadow: .5px .5px var(--a5);
    text-align: center;
}
.gt h2{
    font-size: min(4vw, 1rem);
    color: var(--a2);
}
.gt img:hover{
    transform:scale(1.05,1.05);
}@media screen and (min-width: 600px) {
    .gt{grid-template-columns: repeat(3, 1fr);}
}
@media screen and (min-width: 834px) {
    .gt{grid-template-columns: repeat(4, 1fr);}
}

.t{
    width:100%;
    border-collapse: collapse;
    font-size: min(4vw, 1rem);
    text-align: center;
    margin-bottom:1rem;
}
.t td:first-child{
    background: #eee;
    font-weight: 500;
}
tr:nth-child(even){
    background: #f9f9f9;
}
.t th{
    background-image: linear-gradient(to right, #999 0%, #333 50%, #999 100%);
    color: #fff;
}
.t th,.t td{
    border: solid 1px #999;
    padding:.2rem;
}