@charset "UTF-8";
/* CSS Document */

html{font-size: 6.25%; scroll-behavior: smooth;}
body{ font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif; background-color: #000}
.show-pc {display: inline}
.show-sp {display: none}
img.show-pc {display: block}
img.show-sp {display: none!important}
@media screen and (max-width: 960px) {
	.show-pc {display: none}
	.show-sp {display: inline}
	img.show-pc {display: none!important}
	img.show-sp {display: block!important}
}

#container{ width: 100%; height: 100%; box-sizing: border-box; }
div,section{ box-sizing: border-box; }
p{ font-size: 15rem;}
#container a{text-decoration: none; transition: 0.3s;}
#container a:hover{opacity: 0.5;}
small {font-size: 12px; color: #333;}
hr { display: block; border: none; background-color: #333; height: 1px; margin: 10px auto;}
sup {font-size: 50%; vertical-align: text-top}
.text-en {font-family:"Charis SIL", serif;}

@media screen and (max-width: 960px) {
	.h3-eye strong::after {content: none}
}

/* header */
#header{ width: 300px; height: 100vh; position: fixed; z-index: 999; top:0; left: 0; background-color: rgba(0,0,0,0); }

h1.head-left{ display: block; width: 100%; padding-top: 20px; }
h1.head-left a{ display: block; margin: 0 auto 4vw auto; box-sizing: border-box; position: relative}
.head-oitlogo{ width: 100%; height: 48px; padding: 5px 5px 10px 10%;  }
.head-oitlogo::before{ content: ''; width: 70%; height: 1px; background-color: #fff; position: absolute; left: 0; bottom: 0;}
.head-dxlogo{ width: 80%; height: 200px; }
h1.head-left a img { display: block; max-width: 100%; max-height: 100%; }

@media screen and (max-width: 960px) {
	#header{ width: 100%; height: 46px; margin: 0; border-width: 0 0 2px 0; background-color: rgba(0,0,0,0.5); }
	h1.head-left{ display: flex; width: 85%; height: 42px; justify-content: flex-start; padding-top: 4px; padding-left: 1%;}
	h1.head-left a{ text-align: left; margin: 0 1% 0 0}
	.head-oitlogo{ width: 36%; height: 100%; padding: 8px; margin: 0}
	.head-oitlogo::before{ content: none}
	.head-dxlogo{ width: 64%; height: 100%; padding: 6px 8px 8px 5px; }
}

nav {display: block; width: 80%; margin: 1vw auto 0 auto;  }
nav ul {display: block;}
nav ul li {display: block; }
nav ul li a {display: block; color: #fff; font-size: 14rem; padding: 10px 0 8px 0; margin-bottom: 8px; position: relative}
nav ul li a::before { content: ''; display: block; width: 10%; height: 1px; position: absolute; left: 0; bottom: 0; background-color: #FFF; transition: 0.3s}
nav ul li a:hover {}
nav ul li a:hover::before {width: 100%}
nav ul li ol{display: block; }
nav ul li ol li{}
nav ul li ol li a{ padding: 8px 10px 4px 7%; margin-bottom: 5px; width: 94%; margin-left: 4%}
nav ul li ol li a::before{ width: 5%; height: 1px; position: absolute; left: 0; bottom: calc(50% - 1px); }
nav ul li ol li a:hover{ padding: 8px 0 4px 30px; }
nav ul li ol li a:hover::before{ width: 10%; }

#navibtn {display: none}

@media screen and (max-width: 960px) {
	
	#navibtn {display: none; /*display: block;*/ padding: 26px 3px 3px 3px; line-height: 1; font-size: 10rem; font-weight: bold; color: #fff; text-align: center; position: fixed; top: 0.5%; right: 2%; z-index: 9999}
	#navibtn::before { content: ''; display: block; width: 80%; height: 4px; position: absolute; top: 12%; left: 10%; background-color: #fff; border: 1px solid #111; border-radius: 10px; transition: 0.3s}
	#navibtn::after { content: ''; display: block; width: 80%; height: 4px; position: absolute; top: 38%; left: 10%; background-color: #fff; border: 1px solid #111; border-radius: 10px; transition: 0.3s}

	nav {display: block; width: 0; height: 100vh; background-color: rgba(0,0,0,0.8); margin: 0 0 0 auto; overflow: hidden; transition: 0.3s}
	nav ul {display: block; width: 90vw; margin: 20px auto 0 auto; }
	nav ul li {display: block; }
	nav ul li a {display: block; color: #fff; font-size: 15rem; margin-bottom: 8px;  }
	nav ul li a:hover {background-color: #fff; color: #111; opacity: 1!important}

	/* menu open */
	nav.menuopen {width: 100%;}
	#navibtn.navibtn-open {color: #fff;}
	#navibtn.navibtn-open::before { width: 80%; height: 4px; top: 0%; left: 25%; border: 1px solid #fff; transform-origin: top left; transform: rotate(45deg)}
	#navibtn.navibtn-open::after { width: 80%; height: 4px; top: 50%; left: 25%; border: 1px solid #fff; transform-origin: bottom left; transform: rotate(-45deg)}
}

/* bg-movie */
.fix-bg { position: fixed; height: 100vh; width: 100vw; z-index: -1}

/* contents */
#contents{width: calc(100% - 300px); margin: 0 0 0 auto;}
.box-inner {width: 90%; max-width: 1260px; margin: 0 auto;}

@media screen and (max-width: 960px) {
	#contents{width: 100%; margin: 0 auto;}
	.box-inner {width: 90%; }
}

/* Main */
#contents_main{position: relative}
#contents_main::after{position: absolute; content: ''; background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 80%); display: block; width: 100%; height: 60px; bottom: 0; left: 0}


/* Contents read */
#contents_read{}
#contents_read article{ }
#contents_read article .box-inner{height: 100vh;  display: flex; flex-wrap: wrap; align-items: center}
#contents_read article h2{ font-size: 30rem; text-shadow: 0 0 6px rgba(0,0,0,1); color: #fff; font-family: serif; font-weight: normal;letter-spacing: 5px; line-height: 2; padding-bottom: 40px; padding-left: 3vw}
#contents_read article h2 span.main-kasyo{ font-size: 14rem; vertical-align: baseline; letter-spacing: 0}
#contents_read article h2 span.main-en{ font-size: 14rem; display: block; letter-spacing: 2px; margin-top: 20px;}

@media screen and (max-width: 960px) {
	#contents_read{ padding: 40px 0;}
	#contents_read article .box-inner{height: 90vh;}
	#contents_read article h2{ margin-bottom: 10px; font-size: 20rem}
	#contents_read article h2 span.main-en{ letter-spacing: 1px; }
	#contents_read article p{ margin-bottom: 20px; text-align: left; font-size: 14rem;}
}

/* Contents1 */
#contents1{ margin-bottom: 60px; padding: 0 0 10vw 34vw; color: #fff; text-align: left; position: relative; background: rgba(0,0,0,0.4) url( "../img/space-img01.png") center center / cover no-repeat;}
#contents1 article{ }
#contents1 article h4{ font-size: 30rem; display: block; padding: 8vw 0 30px 0; max-width: 900px;}
#contents1 article p{ margin-bottom: 40px; line-height: 2.5; text-shadow: 0 0 6px rgba(0,0,0,1);}

@media screen and (max-width: 960px) {
	#contents1{ margin-bottom: 0; padding: 40px 0 40px 0; background: rgba(0,0,0,0.4) url( "../img/space-img01.png") center left / cover no-repeat;}
	#contents1 article h4{ font-size: 22rem; padding: 20px 0 30px 0; }
	#contents1 article p{ margin-bottom: 20px; line-height: 2.0; }
}

/* Contents2 */

#contents2{ padding: 60px 0 40px 0; color: #fff; background: url( "../img/space-img02.png") right -2vw top / 60% auto no-repeat;}
#contents2 h3{ text-align: center; display: block; font-size: 24rem; background-color: rgba(230,230,240,1); color: #111; font-family: serif; padding: 5px 30px 5px 30px; box-sizing: border-box; margin: 0 auto; max-width: 240px;}

#contents2 article{ position: relative; }
#contents2 article h4{ font-size: 30rem; display: block; margin:40px auto 80px auto; text-align: center; text-shadow: 0 0 6px rgba(0,0,0,1);}

ul.block-theme { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 4vw}
ul.block-theme li { position: relative; display: block; width: 47%; padding: 40px 30px 30px 30px; margin-bottom: 5vw; box-sizing: border-box;  background-color: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.4)}
ul.block-theme li:nth-child(even){ transform: translateY(6vw);}

ul.block-theme li::before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0%; left: 0%; pointer-events: none; z-index: 2; box-sizing: border-box; background-repeat: no-repeat; 
	background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(122,222,255,1) 40%, rgba(122,222,255,1) 60%, rgba(255,255,255,0) 100%), linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(122,222,255,1) 40%, rgba(122,222,255,1) 60%, rgba(255,255,255,0) 100%), linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(122,222,255,1) 40%, rgba(122,222,255,1) 60%, rgba(255,255,255,0) 100%), linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(122,222,255,1) 40%, rgba(122,222,255,1) 60%, rgba(255,255,255,0) 100%); 
	background-size: 24% 1px, 1px 34%, 24% 1px, 1px 34%; 
	background-position: -30% 0, 100% -45%, 130% 100%, 0 145%; 
	animation: borderFlow 6s linear infinite; }

@keyframes borderFlow { 
	0% { background-position: -30% 0, 100% -45%, 130% 100%, 0 145%; } 
	29.99% { background-position: 130% 0, 100% -45%, 130% 100%, 0 145%; } 
	30% { background-position: -30% 0, 100% -45%, 130% 100%, 0 140%; } 
	49.99% { background-position: -30% 0, 100% 145%, 130% 100%, 0 145%; } 
	50% { background-position: -30% 0, 100% -45%, 130% 100%, 0 145%; } 
	79.99% { background-position: -30% 0, 100% -45%, -30% 100%, 0 145%; } 
	80% { background-position: -30% 0, 100% -45%, 130% 100%, 0 145%; } 
	100% { background-position: -30% 0, 100% -45%, 130% 100%, 0 -45%; } 
}

ul.block-theme li h5{ font-size: 20rem; display: block; margin-bottom: 10px;}
ul.block-theme li h5 img{ display: block; margin-bottom: 5px;}
ul.block-theme li p{ font-size: 14rem; display: block; margin-bottom: 10px; line-height: 1.8}

@media screen and (max-width: 960px) {
	#contents2{ padding: 100px 0 40px 0; background: url( "../img/space-img02.png") right -2vw top / 60% auto no-repeat;}
	
	ul.block-theme { display: block; }
	ul.block-theme li { display: block; width: 100%; padding: 30px 25px 20px 25px;  }
	ul.block-theme li:nth-child(even){ transform: translateY(0);}
	
	#contents2 article h4{ font-size: 20rem; margin:30px auto 50px auto; }
	ul.block-theme li h5{ font-size: 17rem; margin-bottom: 5px;}
}

/* Contents3 */

#contents3{ padding: 60px 0 40px 0; color: #fff; margin-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.3); }
#contents3 h3{ text-align: center; display: block; font-size: 24rem; background-color: rgba(230,230,240,1); color: #111; font-family: serif; padding: 5px 30px 5px 30px; box-sizing: border-box; margin: 20px auto 40px auto; max-width: 240px;}

#contents3 article{ position: relative; }
#contents3 article h4{ font-size: 30rem; display: block; padding: 30px 0; margin-bottom: 40px; }

/* 外部読み込みNEwS */
.news-json { display: flex; justify-content: space-between; flex-wrap: wrap}
.news-json a{ display: block; color: #fff; text-decoration: none; width: 30%}
.news-json a dl{}
.news-json a dl dt{}
.news-json a dl dt img{ display: block; width: 100%; margin-bottom: 10px;}
.news-json a dl dd{}
.news-json a dl dd span{ display: block; font-size: 11rem; margin-bottom: 5px; color: #ccc;}
.news-json a dl dd p{ display: block; font-size: 14rem}

.news-link {display: block}
.news-link a {display: inline-block; color: #fff; border-bottom: 1px solid #ccc; padding: 5px 10px 5px 0; font-size: 14rem}
.news-link a:hover {padding: 5px 20px 5px 0;}

@media screen and (max-width: 960px) {
	.news-json { display: block; }
	.news-json a{ width: 90%; margin: 20px auto}
}

/* Footer */
#footer{padding: 5vw 0 25vw 0; background: url( "../img/space-img04.png") center bottom / 100% auto no-repeat;}
#footer .box-inner{display: flex; flex-wrap: wrap; justify-content: flex-start; width: calc(100% - 300px); margin: 0 0 0 auto;}
.foot-left {width: 25%}
.foot-left img {width: 80%; margin-bottom: 10px}
.foot-right {width: 40%}
.foot-right p{ display: block; width: 100%; font-size: 13rem; margin-bottom: 40px; color: #fff}
.foot-right p strong{ font-size: 14rem; }
p#copy {display: block;  padding: 5px 0; color: #fff; font-size: 11rem; text-align: center}

@media screen and (max-width: 960px) {
	#footer{padding: 5vw 0 35vw 0; background: url( "../img/space-img04.png") right bottom / 140% auto no-repeat;}
	#footer .box-inner{display: block; width: 90%; margin: 0 auto;}
	.foot-left {width: 100%}
	.foot-left img { width: 50%; margin: 20px auto}
	.foot-right {width: 100%}
}




/* 視覚的に非表示（スクリーンリーダーには残す） */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
}
@media screen and (max-width: 960px) {
	.welcome_dialog { width: 70vw;}
}

/* スクロール時のアニメーション　*/
.fadein {opacity: 0; transition: 1s 0.25s;}
.fade_action {opacity: 1;}


/* 右側スクロールインジケータ　*/
.section-block {
  min-height: 100vh;
  padding: 80px;
  box-sizing: border-box;
  color: #fff;
  font-size: 40px;
}

.scroll-indicator {
  position: fixed;
  top: 50%;
  right: 1.5vw;
  transform: translateY(-50%);
  width: 2px;
  height: 40vh;
  border-radius: 999px;
  background: linear-gradient(
    0deg,
    rgba(255,255,255,0.6) 0%,
    rgba(255,255,255,0.3) 100%
  );
  background-size: 100% 200%;
  background-position: 0 -100%;
  animation: indicatorFlow 3s linear infinite;
  z-index: 9999;
}

@keyframes indicatorFlow {
  0% {
    background-position: 0 100%;
  }
  100% {
    background-position: 0 -100%;
  }
}

.scroll-indicator span {
  display: block;
	position: absolute;
	left: -5px;
	top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #111;
	border: 1px solid #aaa;
  transition: 0.4s ease;
}

.scroll-indicator.scroll-contents_read span {
	top: 0%;
}

.scroll-indicator.scroll-contents1 span {
	top: 33%;
}

.scroll-indicator.scroll-contents2 span {
	top: 66%;
}

.scroll-indicator.scroll-contents3 span {
	top: 99%;
}