.style1{background-color:#fff;color:#000}
.style2{background-color:#f2ece8;color:#414042}
.style3{background-color:#384d9d;color:#f6f3ec}
.style4{background-color:#38728d;color:#e9b563}
.style5{background-color:#a31b00;color:#ece3bf}
.style6{background-color:#384d9d;color:#fff}
.style7{background-color:#f9f7e8;color:#61bfad}
.style8{background-color:#f2f6fa;color:#2a2e59}
.style9{background-color:#055a5b;color:#e6e6e6}
.style1 header ul li a:hover, .style1 .index-container.visual .item:hover .link, .style1 .item:hover .name{color:#fff;background-color:#000}
.style2 header ul li a:hover, .style2 .index-container.visual .item:hover .link, .style2 .item:hover .name{color:#f2ece8;background-color:#414042}
.style3 header ul li a:hover, .style3 .index-container.visual .item:hover .link, .style3 .item:hover .name{color:#384d9d;background-color:#f6f3ec}
.style4 header ul li a:hover, .style4 .index-container.visual .item:hover .link, .style4 .item:hover .name{color:#38728d;background-color:#e9b563}
.style5 header ul li a:hover, .style5 .index-container.visual .item:hover .link, .style5 .item:hover .name{color:#a31b00;background-color:#ece3bf}
.style6 header ul li a:hover, .style6 .index-container.visual .item:hover .link, .style6 .item:hover .name{color:#384d9d;background-color:#fff}
.style7 header ul li a:hover, .style7 .index-container.visual .item:hover .link, .style7 .item:hover .name{color:#f9f7e8;background-color:#61bfad}
.style8 header ul li a:hover, .style8 .index-container.visual .item:hover .link, .style8 .item:hover .name{color:#f2f6fa;background-color:#2a2e59}
.style9 header ul li a:hover, .style9 .index-container.visual .item:hover .link, .style9 .item:hover .name{color:#055a5b;background-color:#e6e6e6}
p,ul{margin:0;padding:0}
p{margin-bottom:1rem}
html { overflow-y: scroll; min-height: 100%; margin: 0; font-size: 100.01%; -webkit-tap-highlight-color: transparent; -moz-osx-font-smoothing: grayscale; -webkit-overflow-scrolling: touch; -ms-content-zooming: none; -ms-overflow-style: scrollbar; scroll-behavior: smooth;}
body{margin:0;font-family:NeuzeitSLTStd-Book,arial,sans-serif;line-height:1.4;font-size:18px; -webkit-touch-callout: none;  -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
.td-u { text-decoration: underline;}
#container{max-width:100%;padding:1.25rem 2rem;min-height:calc(100vh - 40px);height:100%}
a{color:inherit;text-decoration:none;cursor:pointer}
.link{content:"\250C";-webkit-transform:rotate(90deg);transform:rotate(90deg);margin:0 1.5rem;display:inline-block;padding:8px}
.container{-webkit-display:flex;display:flex;flex-flow:row wrap;position:relative}
.index-container{display:inline-block;padding-top:4rem}
.index-container.hidden,.index-container.visual.hidden{display:none}
.index-container .screen{display:none}
.index-container .screen img{width:100%;height:100%;object-fit:cover; object-position: top; aspect-ratio: 16/9; }
.index-container.visual{-webkit-display:flex;display:flex;flex-flow:row wrap;padding-top:calc(3rem+8px)}
.index-container.visual .screen{display:block;height:100%;background-position:center;background-repeat:no-repeat;background-size:cover;background-blend-mode:multiply;transition:all .5s ease-in-out}
.index-container.visual .screen:hover{background-blend-mode:initial}
.index-container.visual .item{flex-basis:calc(50% - 16px);font-size:18px;margin:8px;position:relative}
.index-container.visual .data { display: none !important;}
.index-container.visual .item:hover .link{display:block;position:absolute;left:0;bottom:0;height:calc(100% - 16px);width:calc(100% - 16px);font-size:20px;margin:0;z-index:2;transform:rotate(0);background:#fff;opacity:.95;top:0}
.index-container.visual .item:hover .link a{position:absolute;top:50%;left:50%;width:100%;transform:translate(-50%,-50%);text-align:center;font-size:56px}
.index-container.visual .item .link,.index-container.visual .item span{display:none}
.info-box{width:calc(33% - 2rem);padding:1rem;display:inline-block}
.info-box a:hover{text-decoration:underline}
#info-container.visible,#visual.visible{-webkit-display:flex!important;display:flex!important}
#info-container{display:none;width:100%;left:0;top:4rem;z-index:2;justify-content:center;align-items:flex-start}
header{text-align:center;z-index:3;position:fixed;width:100%;left:0;padding:1.5rem 0;top:0;font-size:24px}
header h1{font-size:24px;margin:0;display: inline-block;line-height: 1;vertical-align: middle; font-weight: 700;}
header ul{list-style:none;margin:0 auto}
header ul li{display:inline-block;}
header ul li:first-of-type{margin:0 .5rem 0 0}
header ul li a { padding: 6px; }
.info{margin:0 1rem -12px;font-size:16px;display:inline-block}
.item{display:inline;word-break:break-word;font-size:5.7vw;line-height:1.4;opacity:1}
.item .name{transition:opacity .2s ease-out, background-color .1s ease-out; padding: 8px 8px 0 4px;word-break:break-word;cursor:pointer}
.item .data {display: none;font-size: 32px;max-width: 1200px; margin: 1rem auto;line-height: 1.4;}
.item .data.visible { display: block;}
.index-container.text { max-width: 900px; margin-right: auto;}
.index-container.text ul { margin-left: 1em; margin-bottom: 1em;}
@media screen and (max-width:1440px) {
.index-container.visual .item{flex-basis:calc(50% - 16px)}
header{font-size:20px}
}
@media screen and (max-width:1280px) {
#container{padding:1rem}
.item{font-size:7vw}
}
@media screen and (max-width:1024px) {
.item{font-size:8vw}
.link{margin:0 .5rem}
.info{font-size:16px;margin:0 .5rem}
.info-box{width:50%}
.index-container.visual .item{flex-basis:100%;margin:8px 0}
}
@media screen and (max-width:760px) {
body{font-size:14px}
.info-box{width:100%;padding:1rem 0}
#info-container{flex-flow:row wrap;justify-content:flex-start;align-items:flex-start}
#info-container.visible{display:block!important}
.index-container{width:100%}
header{text-align:left;padding-left:1rem;font-size:14px}
header h1{font-size:16px}
header ul li{margin:0 2px}
header ul li a{padding: 0}
.item{font-size:32px;display:block;margin-bottom:1rem;position:relative;width:100%}
.name{display:block}
.link{position:absolute;right:0;top:-12px;margin:0}
.info{margin:8px 0;font-size:14px}
.info-box{width:100%;padding-bottom:0;display:block}
.index-container.visual .item:hover .link a{font-size:32px}
}