@charset "utf-8";
/* CSS Document */
body,html { height: 100%;}
body { background-color: #192022; color: rgba(255,255,255,.8); line-height: 2;font-family: "Noto Sans", sans-serif;}
p,.acWrap table { font-size: 85%;}
.acWrap table { font-size: 100%;}
body:before { content: ""; display: block; width: 100%; height: 100svh; background-image:url("../img/bg2.png"); background-size: cover; background-position: center; position: fixed; top:0; left: 0; z-index: -1;transition: all 1s ease 0s;}
.intro body:before { opacity: 0;}
body:after { content: ""; display: block; width: 100%; height: 100svh; background-image:url("../img/footer.png"); background-size: cover; background-position: center; position: fixed; top:0; left: 0; z-index: -1;transition: all 1s ease 0s;}
.intro body:after { opacity: 0;}

.acWrap table a { color: #B50013; text-decoration: none;}
.acWrap table a:hover { text-decoration: underline;}

header { height: 60px; width: 100%; position: fixed; top:0; left: 0; background-color: #B50013; z-index: 2;}
header h1 { text-indent: -9999px; width: 71px; height: 100%; background-image: url("../img/20th.png"); background-repeat: no-repeat; background-position: center; background-size: auto 40px; position: absolute; top:0; left: 11px;}
header h1 a { display: block; width: 100%; height: 100%;}
#wrapper { padding-top: 60px; }
#main { position: relative; overflow: hidden; height:50svh;}
#main:before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top:0; left: 0; background-image: url("../img/black.svg"); background-repeat: repeat; z-index: 1;transition: all .6s ease .4s;}
.intro #main:before { opacity: 0;}
#logo { width: 100%; height: 100%; position: absolute; top:0; left: 0; background-image: url("../img/20th.png"); background-size: 238px auto; background-position: center; background-repeat: no-repeat; z-index: 1;opacity: 1; transform: translateY(0);transition: all 1.5s ease 8s;}
.intro #logo { opacity: 0; transform: translateY(2vh);}

#th10 { width: 100%; height: 100%; position: absolute; top:0; left: 0; background-image: url("../img/10th.png"); background-size: 238px auto; background-position: center; background-repeat: no-repeat; z-index: 1;opacity: 1; transform: translateY(0);transition: all 1.5s ease 1s;}

#th15 { width: 100%; height: 100%; position: absolute; top:0; left: 0; background-image: url("../img/15th.png"); background-size: 238px auto; background-position: center; background-repeat: no-repeat; z-index: 1;opacity: 1; transform: translateY(0);transition: all 1.5s ease 4.5s;}

.intro #th10,.intro #th15,.th10 #th10,.th15 #th15 { opacity: 0; transform: translateY(2vh);}
.th10 #th10,.th15 #th15 { transition: all 1.5s ease 0s;}


canvas { transition: all .6s ease .4s; position: relative;}
.intro canvas { opacity: 0; transform: scale(1.2);}

section.box { padding: 60px 0px; }
section.box .inner { padding: 0 15px;}

section.box h2,section.historyArea h2 { text-align: center; color: #FFF; font-size: 24px; text-shadow: 0 0 20px #FFF; margin-bottom: 20px; line-height: 1.4;}
section.box.black { background-color: rgba(0,0,0,.5);}
section.box.his { padding-top: 0;}

#overlay { width: 100%; height: 100svh; background-color: rgba(0,0,0,.6); position: fixed; top:0; left: 0; z-index:2; transform: scale(0);}
.open #overlay { opacity: 1; transition: opacity .4s ease 0s; transform: scale(1); }
#modal { width: 100%; height: 100svh; position: fixed; top:0; left: 0; z-index: 2; background-color: #354043; transform: translateY(100%); 
transition: transform .4s ease -.2s,opacity .4s ease 0s; opacity: 0;}
.open #modal { transform: translateY(0); opacity: 1;}

.commentBox,#modal .group,#modal .group2,#modal .modal iframe {transform: translateY(100%);opacity: 0;}
.open .commentBox,.open #modal .modal iframe { animation: comment .4s ease .3s both;}
.open #modal .group { animation: comment .4s ease .3s both;}
.open #modal .group2 { animation: comment .4s ease .3s both;}

section#pre {
	background-image: url("../img/black.svg"); padding: 50px 20px;
}
section#pre h2 { text-align: center; color: #FFF; font-size: 32px; font-weight: bold; text-shadow: 0 0 20px #FFFF01; line-height: 1.5;}

@keyframes comment
{
from {transform: translateY(2vh); opacity: 0;}
to {transform: translateY(0); opacity: 1;}
}

#header { height: 60px; background-color: rgba(25,32,34,.38); position: relative;}
#header #close { width: 60px; height: 60px; background-color: #B50013; cursor: pointer; background-image: url("../img/back.svg"); background-position: center; background-repeat: no-repeat; position: relative;}
#header p { position: absolute; top:0; left: 0; width: 100%; box-sizing: border-box; padding: 0 80px 0 80px; height: 100%; line-height: 60px;color: #FFF; font-size: 24px; text-shadow: 0 0 20px #FFF; text-align: center; font-weight: bold;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
#modal figure img { width: 100%; height: auto;}
#modal .group { background-color: #2A3437; padding: 20px; position: relative;}
#modal .group2 {  padding: 20px;}
#modal .group h3 { font-size: 24px; color: #FFF; margin-bottom: .2em; line-height: 1.4;}
#modal .group span { display: block; font-size: 14px; line-height: 1.4;}
#modal .group:after { content: ""; display: block; width: calc( 100% - 40px); height: 4px; background-color: #B50013; position: absolute; left: 20px; bottom: -2px;}
#modal figure { line-height: 0;}
#modal .modal { height: calc( 100svh - 60px); overflow-y: auto;}
#modal .modal iframe { width: 100%; height: calc( 100svh - 60px);}

.open body,.navOpen body { width: 100%; position: fixed; left: 0;}

.slick-slide { width: 34vw; padding: 0 0px 0 10px;}
#comment .slick-slide { cursor: pointer;}
.slick-slide img { width: 100%; height: auto; transition: all .4s ease 0s;}
#comment .slick-slide:hover img { opacity: .5;}
.slick-slide figure { border-radius: 6px; overflow: hidden; margin-bottom: 15px; background-color: #000;}
.slick-slide h3 { color: #FFF; margin-bottom: .2em; line-height: 1.4;}
.slick-slide h3 span { font-size: 60%; font-weight: normal; display: block;}
.slick-slide p { font-size: 10px; line-height: 1.4;}
.arrows { text-align: center; margin-top: 30px;}
.arrows button { appearance:none; width: 37px; height: 37px; background: none; border:none; text-indent: -9999px; background-position: center; background-repeat: no-repeat; cursor: pointer;}
.arrows .slick-prev { background-image: url("../img/prev.svg");}
.arrows .slick-next { background-image: url("../img/next.svg");}

.acWrap .arrows { display: flex;justify-content: center; margin: 40px 0;}

section.historyArea { height: 72.09302325581395vw;  position: relative;}
section.historyArea:before { content: ""; display: block; width: 100%; height: 100%;background-image: url("../img/his.jpg"); background-repeat: no-repeat; background-size: cover;}
section.historyArea:after { content: ""; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,.7); position: absolute; top:0; left: 0;}
.hisInner { position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); width: 100%; z-index: 1;}


a.bt { height: 44px; line-height: 44px; text-align: center; color: #FFF; font-weight: bold; padding: 0 2em; border-radius: 22px; display: inline-block; background-color: #B50013; text-decoration: none; transition: all .4s ease 0s;}
.btBox { text-align: center;}


.news ul li { background-color: #222222; margin-bottom: 10px;}

.news ul li figure { width: 127px; line-height: 0;}
.news ul li figure img { width: 100%; height: auto;}
.news ul li a { display: block; color: #FFF; text-decoration: none; display: flex; transition: all .4s ease 0s;}
.news ul li a:hover { background-color: #333;}
.news ul li div { width: calc( 100% - 127px); box-sizing: border-box; padding: 0 20px; display: flex;align-items: center; font-weight: bold; line-height: 1.4;}
.news ul li.nextnews { padding: 20px; text-align: center; color: rgba(255,255,255,.18); font-weight: bold;}
p a { color: #B50013; text-decoration: none;}
p a:hover { text-decoration: underline;}
.tag { display: flex;flex-wrap: wrap; padding-top: 30px;justify-content: center;}
.tag li a {height: 44px; line-height: 44px; text-align: center; color: #FFF; font-weight: bold; padding: 0 2em; border-radius: 22px; display: inline-block; background-color: #B50013; text-decoration: none; font-size: 90%;transition: all .4s ease 0s;}
.tag li { margin: 0 10px 10px 0px;}
 
.x {  max-width: 1000px; margin: 30px auto 40px auto;}


footer { background-color: #B50013; padding: 30px 20px;}
footer figure { width: 158px; margin: 0 auto 20px auto;}
footer figure img { width: 100%; height: auto;}
footer p { font-size: 10px;}

.ac { background-color: rgba(0,0,0,.46); display: flex; padding: 10px; font-size: 20px; color: #FFF; text-shadow: 0 0 20px #FFF; font-weight: bold; position: relative; cursor: pointer; transition: all .4s ease 0s;align-items: center;}
.ac:hover {background-color: rgba(0,0,0,.26); /*box-shadow: 0 0 10px rgba(255,255,255,.5);*/}
.ac:before { content: ""; display: block;  width: 80px;height: 100%; background-image: url("../img/arrow2.svg"); background-repeat: no-repeat; background-position: center; position: absolute; top:0; right: 0px;}
.opens .ac:before { transform:rotate(180deg);}

.ac figure { width: 135px;background-color: rgba(255, 255, 255, .5); line-height: 0;
    border-radius: .3em;}
.ac figure img { width: 100%; height: auto;}
.ac p { font-size: 12px; font-weight: normal; text-shadow: none; color: rgba(255,255,255,.8); line-height: 1.4;}
.ac > div { padding: 0 50px 0 10px; width: calc( 100% - 135px );}

.slick-dots { display: flex;justify-content: center; margin-top: 0px; margin-bottom: 0px;}
.hisSlide { position: relative;margin: 0 20px;}
.hisSlide .slick-arrow { appearance:none; width: 37px; height: 37px; background: none; border:none; text-indent: -9999px; background-position: center; background-repeat: no-repeat; cursor: pointer; position: absolute; bottom: 0;}
.hisSlide .slick-prev { background-image: url("../img/prev.svg"); left: 20px;}
.hisSlide .slick-next { background-image: url("../img/next.svg"); right: 20px;}
.slick-dots button {appearance:none; width: 7px; height: 7px; border-radius: 50%; background: none; border:none; text-indent: -9999px; background-color: rgba(255,255,255,.47); padding: 0; margin: 0 10px;}
.slick-active button { background-color: #FFF;}
.hisSlide .slick-slide { padding: 0; height: 500px;}
.slick-dots li { display: flex;justify-content: center;align-items: center;}

.hisSlide .slick-slide img {width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;}
.hisSlide .slick-track { align-items: center; }

.acSection { background-color: rgba(0,0,0,.35); padding: 30px 0;}
.acSection.grey { background-color: rgba(0,0,0,.18);}
.acSection.sections {padding: 30px 20px;}

.acWrap table th { background-color: rgba(255,255,255,.23); text-align: left; padding: .7em; width: 12em; border-right: 1px solid #000; min-width: 6em;}
.acWrap table td { background-color: rgba(255,255,255,.08); padding: .7em; line-height: 1.4;word-break: break-all;}
.acWrap table { margin-bottom: 30px;width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;}
.acWrap table tr { border-bottom: 1px solid #000;}

.acWrap h3 { color: #FFF; text-align: center; font-size: 18px; text-shadow: 0 0 20px #FFF; margin-bottom: 1em;}
.acWrap .pd { display: flex;align-items: flex-start;}
.acWrap .pd figure { width: 98px; border-radius: 6px; overflow: hidden; line-height: 0;}
.acWrap .pd figure img { width: 100%; height: auto;}
.acWrap .pd > div { width: calc( 100% - 98px); padding-left: 20px; box-sizing: border-box;}
.acWrap .pd h4 { color: #FFF; margin-bottom: 1em; border-left: 4px solid #B50013; padding-left: 1em;}
.acWrap .pd h4 span { display: block; font-weight: normal; font-size: 70%;}
#history .acWrap .pd p { margin-bottom: 2em;}

.hisWraper { margin-bottom: 10px;border: 1px solid #000; transition: all .4s ease 0s;
    box-sizing: border-box;
border-radius: .6em;
    overflow: hidden;}
.hisWraper.opens,.hisWraper:hover {border: 1px solid rgba(255, 255, 255, .4);}

.acWrap { max-height: 0; overflow: hidden;}
.opens .acWrap { max-height: 1000svh; transition: all .7s ease 0s; }

#title { height: 120px; background-image: url("../img/title.jpg"); background-repeat: no-repeat; background-size: 100%; background-position: center; display: flex;justify-content: center;align-items: center; color: #FFF; font-size: 24px; text-shadow: 0 0 20px #FFF; font-weight: bold; position: relative; transition: all .4s ease 0s;border-bottom: 1px solid #000;}
.intro #title { background-size:105%; opacity: 0; }
#title:before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top:0; left: 0; background-image:url("../img/black.svg"); transition: all .4s ease 0s; opacity: .85;}
.intro #title:before { background-size:105%; opacity: 0; }
#history { padding-top: 20px;}
#title p { position: relative;}

#history p { margin-bottom: 1em;}

#menu { width: 60px; height: 100%; background-color: #2A3437; position: absolute; right:0; top:0; cursor: pointer; background-image: url("../img/menu.svg"); background-repeat: no-repeat; background-position: center;}

nav { width: 100%; height: 100svh; background-color: #B50013; position: fixed; top:0; right:0; z-index: 2; opacity: 0; transform: scale(0); transform-origin: 100% 0; transition: all .4s ease 0s;}
#closes { width: 60px; height: 60px;  background-color: #2A3437; position: absolute; right:0; top:0; cursor: pointer; background-image: url("../img/close.svg"); background-size: 18px; background-repeat: no-repeat; background-position: center;}
nav ul { margin-top: 70px; }
nav ul li a { display: block; height: 80px; line-height: 80px; color: #FFF; text-decoration: none; font-size: 20px; padding: 0 20px; transition: all .4s ease 0s;}
nav ul li a:hover { background-color: rgba(0,0,0,.1);}

#language { height: 60px; width: 100%; position:absolute; bottom: 0; left: 0; background-color: rgba(0,0,0,.12); display: flex;}
#language div.language { width: 126px; color: #FFF; font-weight: bold; background-color: rgba(0,0,0,.12); text-align: center; line-height: 60px;}
#language div:nth-child(2){ width:calc( 100% - 126px);}
nav select { appearance:none; width: 100%; height: 100%; border: none; background: none; border-radius: 0; background-color: transparent; color: #FFF;font-family: "Noto Sans JP", sans-serif; padding:0  20px; box-sizing: border-box; background-image: url("../img/arro_f.svg"); background-position: right 20px center; background-repeat: no-repeat; font-size: 100%;}
nav select option { background-color: #2A3437; }

.navOpen nav {opacity: 1; transform: scale(1);}

.slick-track { display: flex;}
.slick-slide { float: none;}
.slick-list { height: auto!important;}
.pc { display: none;}

::-webkit-scrollbar { background-color:#192022; width:15px;}
::-webkit-scrollbar-thumb { background-color:#999;}

html {
scrollbar-color: #999 #192022;
scrollbar-width: thin;
}
html { overflow-x: hidden;}


.fade, section.historyArea.fade:before, section.historyArea.fade:after { transform: translateY(2vh); opacity: 0;transition: all .4s ease .2s;}
.his.fade {transition: all .4s ease .6s;}

.fade.fades,section.historyArea.fade.fades:before, section.historyArea.fade.fades:after {transform: translateY(0%); opacity: 1;}
.news ul li div p { font-size: 95%;}

#MESSAGE { min-height: 200px;}

a.hash.bt:before { content: ""; display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; margin-right: .3em; background-image: url("../img/add.svg"); background-repeat: no-repeat; background-size: contain; background-position: center;}

@media screen and (max-width: 999px) {
	.x > div { margin: 10px auto;}
	#comment {/*width: calc(64vw + 40px);width: calc(68vw + 30px);*/ padding-left: 15px;
    margin: 0 auto;}
	
	.acWrap .pd { flex-direction: column;}
	.acWrap .pd > div { padding-left: 0; width: auto;}
	.acWrap .pd figure {margin: 0 auto 20px auto;width: 150px;}
}

@media screen and (min-width: 1000px) {
	p,.news ul li div p,.acWrap table { font-size: 100%;}
	.pc { display: block;}
	.ac:hover {background-color: rgba(0,0,0,.26); /*box-shadow: 0 0 10px rgba(255,255,255,.5);*/}
	a.bt:hover { box-shadow: 0 0 20px #fff;}
	.tag li a:hover { box-shadow: 0 0 20px #fff;}
	
	nav ul li a{ font-weight: bold;}
	
	#main { height:70svh;}
	
#logo { background-size: 390px auto;}
section.box h2, section.historyArea h2 { font-size: 30px; margin-bottom: 40px;}
.slick-slide { width: 148px;}
	#comment { /*width: 652px;*/ width: 484px; margin: 0 auto;}
	section.historyArea { height: 45.53440702781845vw;}
	.news ul { width: 820px; margin: 0 auto;}
	#COMMENT p {  text-align: center;}
	
	.commentBox { width: 860px; margin: 0 auto; display: flex; background-color: #3C484B; margin-top: 40px;}
	.commentBox > * { width: 50%;}
	#modal .modal iframe {margin: 0 auto;
    display: block; width: 500px;
	}
	
	#history { width: 1000px; margin: 0 auto;}
	.acWrap { display: flex; }
	.acWrap .left { width: 70%;}
	.acWrap .right { width: 30%;background-color: rgba(27, 32, 34, .67);}
	.acWrap .right .acSection.grey { background-color: transparent;}
	#title { height: 195px;}
	
	body:after { background-size: 30%;}
	section.box { padding: 100px 0px; }
	
	#menu { display: none;}
	
	nav { width: calc( 100% - 100px); height: 60px; background-color:transparent;; position: fixed; top:0; right:0; z-index: 2; opacity: 1; transform: scale(1); transform-origin: 100% 0; transition: none;}
	nav ul { margin-top: 0; display: flex; position: absolute; right: 166px; top:0; height: 100%;background-color: #B50013;}
	#language { height: 60px; width: 166px; position:absolute; bottom: auto; left: auto; top:0; right:0; background-color: rgba(0,0,0,.12); display: block;}
	#language select { opacity: 0; position: absolute; top:0; left: 0; width: 100%; cursor: pointer;}
	#language div.language { position: absolute; top:0; left: 0; width: 100%; background-color: #2A3437; transition: all .4s ease 0s;}
	#closes { display: none;}
	#language:hover div.language { background-color: #111;}
	
nav ul li a {
    height: 60px;
    line-height: 60px;
    font-size: 100%;
    padding: 0 20px;
}
	header {background-color: #2A3437;}
	nav ul:before { content: ""; display: block; width: 118px; height: 60px; background-image: url("../img/sankaku.svg"); background-repeat: no-repeat; position: absolute; top:0; left: -117px; }
	footer p { text-align: center;}
	
	#modal .group,#modal .group2 {transform: translateY(0%);opacity: 1; font-size: 85%;}
.open #modal .group { animation: none;}
.open #modal .group2 { animation: none;}
	
	.fade, section.historyArea.fade:before, section.historyArea.fade:after { transform: translateY(4vh);}
	
	#modal .modal { display: flex;
    align-items: center;}
	.commentBox { margin-top: 0;
	        border-radius: .3em;
        overflow: hidden;}
	
	section#pre {
	padding: 70px 20px;
}
section#pre h2 {  font-size: 53px; }
	
	.x {  display: flex;flex-wrap: wrap;justify-content: space-around;}
.x > div { width: 31.5%!important;}
	.hisSlide .slick-slide { height: 500px;}
	
	.acWrap .right h3 { text-align: left;}
	
	}

.acWrap .right p:before { content: ""; display: inline-block; vertical-align: middle; width: .5em; height: 2px; background-color: #B50013; margin-right: .5em;}
.acWrap .right p:empty:before { display: none;}
.acWrap .right p { text-indent: -1em; margin-left: 1em;}

@media screen and (min-width: 1000px) and (max-height: 600px) {
	#modal .modal { display: block;}
	.commentBox { margin-top: 40px;}
}

@media screen and (min-width: 500px) and (max-width: 999px) {
	#COMMENT p {
        text-align: center;
    }
	.open .commentBox, .open #modal .modal iframe {
    width: 500px;
    margin: 0 auto; display: block;
}
}