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

/* -------------------------------------------------- ** 

   Exastro

** -------------------------------------------------- */

.loadStart body { overflow: hidden; }
.loadStart #container { overflow-y: scroll; }
.loadStart header,
.loadStart #topMove {
opacity: 0;
}
.loadWait main,
.loadStart #backgroundFull{
opacity: 0;
}

/* Background Canvas */
#backgroundFull {
display: block;
position: fixed;
top: 0; left: 0;
z-index: -1;
overflow: hidden;
width: 100%; height: 100%;
background-color: #000;
}
.loadCompleat #startArea {
animation: startAreaLoadingEndShow 1.2s linear forwards !important;
}
@keyframes startAreaLoadingEndShow {
  0% { opacity: 0; }
 60% { opacity: 0; transform: skewX( 180deg ); filter: hue-rotate( -90deg ); }
 70% { transform: skewX( -45deg ); }
 80% { transform: skewX( 5deg ); }
 85% { transform: skewX( -5deg ); }
 90% { transform: skewX( 0 ); }
100% { opacity: 1; transform: skewX( 0 );  filter: hue-rotate( 0 ); }
}
#backgroundCanvas {
width: 100%; height: 100%;
background: url("../img/main_image_back.jpg") center center no-repeat #000;
background-size: cover;
transition-duration: 0.3s;
}
.loadEnd #backgroundFull {
animation: backgroundFullloadingEnd 0.3s linear;
}
@keyframes backgroundFullloadingEnd {
0% { opacity: 0; }
100% { opacity: 1; }
}

#container {
overflow: hidden;
}
/* Start Area */
#startArea {
position: relative;
height: 100vh;
overflow: hidden;
}
#startArea #title {
position: absolute;
left: 0; top: 0;
z-index: 100;
width: 100%; height: 35%;
}
#startArea h1 {
padding: 0 64px;
}
#startArea h1 img {
width: 100%; height: auto;
max-width: 480px;
margin-bottom: 16px;
}
#startArea p {
line-height: 1.5;
letter-spacing: 0.1em;
font-size: 16px;
font-weight: 400;
color: #FFF;
text-shadow: 0 0 4px rgba( 0, 0, 0, 0.3 );
}
#startArea #startMenu {
position: absolute;
left: 0; bottom: 0;
z-index: 100;
width: 100%; height: 35%;
letter-spacing: -0.4em;
}
#startArea #startMenu li {
display: inline-block;
width: 100%;
max-width: 240px;
padding: 8px;
letter-spacing: 0;
text-align: left;
}
#startArea #startMenu li.sub {
max-width: none;
text-align: center;
width: 100%;
margin-top: 16px;
}
#startArea #startMenu .main a {
position: relative;
overflow: hidden;
display: inline-block;
width: 100%;
padding: 16px 0;
background-color: rgba( 0,0,0,0.3 );
border: 2px solid #FFF;
text-decoration: none;
letter-spacing: 0.1em;
text-align: center;
font-size: 20px;
color: #FFF;
transition-duration: 0.3s;
}
#startArea #startMenu .main a::before {
content: '';
position: absolute;
width: 30%; height: 6px;
background-color: #FFF;
border: border solid #FFF;
}
#startArea #startMenu .main a::before {
left: -8px; top: -2px;
transform: skewX(-45deg);
}
#startArea #startMenu .sub a {
display: inline-block;
width: 100%; max-width: 400px;
padding: 8px;
background-color: rgba( 0,0,0,0.3 );
border: 1px solid #FFF;
font-size: 16px;
color: #FFF;
text-decoration: none;
transition-duration: 0.3s;
}
#startArea #startMenu .title,
#startArea #startMenu .update {
padding: 0 4px;
}
#startArea #startMenu .title i {
color: #DDD;
}
#startArea #startMenu .update {
display: inline-block;
white-space: nowrap;
font-size: 12px;
font-weight: normal;
color: #CCC;
}
#startArea #startMenu a.hover,
#startArea #startMenu a.hover .title i,
#startArea #startMenu a.hover .update {
background-color: #FFF;
color: #000;
}
#startArea #title .titleInner,
#startArea #startMenu ul {
position: absolute;
left: 0; top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
font-family: 'Roboto', sans-serif;
font-weight: 900;
}
#startArea #startLogo {
position: absolute;
left: 50%; top: 35%;
z-index: 90;
transform: translateX(-50%);
width: auto; height: 30%;
text-align: center;
}
@keyframes startLogoAnimation {
  0% { transform: rotate( 0deg ); }
100% { transform: rotate( -360deg ); }
}
#startArea #startLogo .startLogoInner {
height: 100%;
transition-duration: 0.3s;
}
#startArea #startLogo .startLogoInner::before,
#startArea #startLogo .startLogoInner::after {
content: '';
position: absolute;
left: 0; top: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
background: url("../img/start_logo2.png") center center no-repeat;
background-size: contain;
}
#startArea #startLogo .startLogoInner::before {
z-index: 2;
background-image: url("../img/start_logo3.png");
animation: startLogoGearAnimation 30s linear infinite;
}
@keyframes startLogoGearAnimation {
  0% { transform: rotate( 0deg ); }
100% { transform: rotate( 360deg ); }
}
#startArea #startLogo img {
width: auto; height: 100%;
transition-duration: 0.3s;
animation: startLogoAnimation 30s linear infinite;
}

/* Terminal Body */
#terminalBody {
background: url(../img/content_back.png);
}
#terminalBody section {
padding: 96px 0;
border-bottom: 1px solid #CCD5E0;
text-align: center;
}
#terminalBody section#why .sectionInner {
max-width: 1280px;
margin: 0 auto;
}
#terminalBody section::after {
content: '';
display: block;
clear: both;
}
#terminalBody section:nth-of-type( even ) {
background-color: rgba( 0, 43, 98, 0.05 );
}
#terminalBody section:last-child {
margin-bottom: 0;
border-bottom: none;
}
#terminalBody h2 {
font-size: 40px;
}
#terminalBody h2 span {
display: inline-block;
margin-bottom: 32px; padding: 0 4px 16px;
border-bottom: 4px solid #8095B0;
text-align: center;
line-height: 1;
color: #002B62;
}
#terminalBody h2 em {
font-size: 130%;
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-style: normal;
}
#terminalBody .whyContent {
display: flex;
align-items: center;
justify-content: center;
}
#terminalBody .whyContent > div {
width: 50%;
}
#terminalBody .systemLifeCycle img {
width: 100%; height: auto;
}
#terminalBody .systemLifeCycleInner {
position: relative;
visibility: hidden;
width: 80%;
margin: 0 auto;
padding-bottom: 80%;
}
#terminalBody .systemLifeCycle.show .systemLifeCycleInner {
visibility: visible;
animation: systemLifeCycleShow 0.9s linear forwards;
}
@keyframes systemLifeCycleShow {
  0% { opacity: 0; transform: scale( 1.5 ); }
100% { opacity: 1; transform: scale( 1 ); }
}
#terminalBody .systemLifeCycleCircle,
#terminalBody .systemLifeCycleText,
#terminalBody .systemLifeCycleSystem {
position: absolute;
top: 0; left: 0;
z-index: 2;
width: 100%; height: 100%;
}
#terminalBody .systemLifeCycleText > div {
position: absolute;
z-index: 3;
}
#terminalBody .systemLifeCycleText .design { width: 28.125%; left: 4%; top: 38%; }
#terminalBody .systemLifeCycleText .development { width: 52.083%; left: 32%; top: 9%; }
#terminalBody .systemLifeCycleText .setting { width: 39.583%; left: 62%; top: 40%; }
#terminalBody .systemLifeCycleText .operation { width: 67.708%; left: 8%; top: 72%; }

.ja #terminalBody .systemLifeCycleText .design { width: 19.741%; left: 9%; top: 38%; }
.ja #terminalBody .systemLifeCycleText .development { width: 39.583%; left: 36%; top: 9%; }

.en #terminalBody .systemLifeCycleText .development a { padding: 0 13%; }

#terminalBody .systemLifeCycleSystem > div {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
z-index: 0;
width: 31.25%;
}
#terminalBody .systemLifeCycleSystem .gear {
animation: gearAnimation 30s linear infinite;
}
@keyframes gearAnimation {
  0% { transform: translate(-50%,-50%) rotate( 0 ); }
100% { transform: translate(-50%,-50%) rotate( 360deg ); }
}

#terminalBody .systemLifeCycle.show .systemLifeCycleCircle,
#terminalBody .systemLifeCycle.show .systemLifeCycleText {
animation: systemLifeCycleCircle 1s ease-in;
}
#terminalBody .systemLifeCycle.show .systemLifeCycleText > div {
animation: systemLifeCycleText 1s ease-in;
}
@keyframes systemLifeCycleCircle {
  0% { transform: rotate( 0 ); }
 90% { transform: rotate( 365deg ); }
 92% { transform: rotate( 358deg ); }
 96% { transform: rotate( 362deg ); }
100% { transform: rotate( 360deg ); }
}
@keyframes systemLifeCycleText {
  0% { transform: rotate( 0 ); }
 90% { transform: rotate( -365deg ); }
 92% { transform: rotate( -358deg ); }
 96% { transform: rotate( -362deg ); }
100% { transform: rotate( -360deg ); }
}

#terminalBody .systemLifeCycleInner::before {
content: '';
display: block;
position: absolute;
top: 0; left: 0;
z-index: 0;
width: 100%;
background-color: #FFFFDD;
padding-bottom: 100%;
border-radius: 50%;
animation: 2s systemLifeCycle infinite;
filter: blur(5px);
}
@keyframes systemLifeCycle {
0% { transform: scale(0.5); opacity: 0; }
50% { transform: scale(1.05); opacity: 1; }
100% { transform: scale(1.15); opacity: 0; }
}

#terminalBody .systemLifeCycle a {
display: inline-block;
padding: 1% 4%;
transition-duration: 0.2s;
}
#terminalBody .systemLifeCycle a:hover {
opacity: 0.8;
}

#terminalBody p {
text-align: center;
line-height: 1.75;
font-size: 24px;
color: #444;
}
#terminalBody #why p {
margin: 48px 0 ;
text-align: center;
}
#terminalBody #why p.link a {
display: inline-block;
min-width: 240px;
padding: 8px 32px;
background-color: #60C60D;
border-radius: 8px;
box-shadow: 0 0 0 rgba( 0,0,0,0 );
text-align: center;
text-decoration: none;
color: #FFF;
transition-duration: 0.1s;
}
#terminalBody #why p.link a:hover {
opacity: 0.8;
}
#terminalBody #suite {
overflow: hidden;
}
#terminalBody ul {
max-width: 1280px;
margin: 0 auto;
list-style: none;
}
#terminalBody .suiteList {
width: 100%; max-width: none;
}
#terminalBody .suiteList li {
margin: 24px 0 48px; padding: 16px 0;
background-color: rgba( 255,255,250,0.8 );
transition-duration: 0.8s;
transition-timing-function: linear;
backface-visibility: hidden;
transform: translateZ(0);
}
#terminalBody .suiteItemLink {
display: block;
max-width: 1152px;
margin: 0 auto; padding: 48px;
background: right bottom no-repeat #FFF;
border: 4px solid #F9F9F9;
border-radius: 4px;
box-shadow: 0 0 16px rgba( 0,0,0,0.1 );
text-decoration: none;
opacity: 0;
transition-duration: 0.4s;
transition-timing-function: linear;
transform-origin: left center;
transform: translateX( -640px ) translateZ(0);
}
#terminalBody li:nth-of-type(even) .suiteItemLink {
transform-origin: right center;
transform: translateX( 640px ) translateZ(0);
}
#terminalBody li:last-child {
margin-bottom: 0!important;
}
#terminalBody dl::after {
content: '';
display: block;
clear: both;
}
#terminalBody .suiteList li.show#itAutomation { background-color: rgba( 0,43,98,.05 ); }
#terminalBody .suiteList li.show#playbookCollection { background-color: rgba( 200,0,0,.05 ); }
#terminalBody .suiteList li.show#OASE { background-color: rgba( 0,169,172,.05 ); }
#terminalBody .suiteList li.show#epoch { background-color: rgba( 96,198,13,.05 ); }
#terminalBody .suiteList li.show#andMore { background-color: rgba( 0,0,0,.05 ); }

#terminalBody .suiteList li.show .suiteItemLink {
opacity: 1;
transform: translateX( -64px ) translateZ(0);
}
#terminalBody .suiteList li.show:nth-of-type(even) .suiteItemLink {
transform: translateX( 64px ) translateZ(0);
}

#terminalBody #itAutomation .suiteItemLink { background-image: url("../img/series_back_setting.png"), linear-gradient( -45deg, #F9F9F9 50%, rgba(0,43,98,.1) 50% ); }
#terminalBody #playbookCollection .suiteItemLink { background-image: url("../img/series_back_setting.png"), linear-gradient( -45deg, #F9F9F9 50%, rgba(200,0,0,.1) 50% ); }
#terminalBody #OASE .suiteItemLink { background-image: url("../img/series_back_operation.png"), linear-gradient( -45deg, #F9F9F9 50%, rgba(0,169,172,.1) 50% ); }
#terminalBody #epoch .suiteItemLink { background-image: url("../img/series_back_development.png"), linear-gradient( -45deg, #F9F9F9 50%, rgba(96,198,13,.1) 50% ); }

#terminalBody dt {
position: relative;
margin-bottom: 32px; padding: 12px 200px 12px 32px;
text-align: left;
line-height: 1.3;
letter-spacing: 0.05em;
font-size: 24px;
font-weight: bold;
color: #F2F4F7;
}
#terminalBody #itAutomation dt { background-color: #002B62; background-image: linear-gradient( #264B7A 50%, #002B62 50% ); }
#terminalBody #playbookCollection dt { background-color: #C80000; background-image: linear-gradient( #D02626 50%, #C80000 50% ); }
#terminalBody #OASE dt { background-color: #00B5B8; background-image: linear-gradient( #00BBBE 50%, #00A9AC 50% ); }
#terminalBody #epoch dt { background-color: #00B5B8; background-image: linear-gradient( #79CF34 50%, #60C60D 50% ); }

#terminalBody dt em {
font-size: 32px;
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-style: normal;
}
#terminalBody dt span.series {
position: absolute;
right: 32px; top: 50%;
transform: translateY(-50%);
display: block;
width: 160px; height: 40px;
}
#terminalBody dt span.series span {
position: absolute;
left: 0; top: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 100%; height: 100%;
text-align: center;
font-size: 16px;
}
#terminalBody dt span.series::before {
content: '';
position: absolute;
left: 0; top: 0;
z-index: 1;
width: 100%; height: 100%;
background-color: #333;
border: 2px solid #EEE;
box-shadow: 4px 4px 4px rgba( 0,0,0,0.6 );
transform: skewX(-10deg);
}
#terminalBody dt span.series.setting::before { background-color: #172E57; }
#terminalBody dt span.series.operation::before { background-color: #19ABAD; }
#terminalBody dt span.series.development::before { background-color: #60C60D; }

#terminalBody dd.image {
float: left;
overflow: hidden;
width: 48%;
}
#terminalBody dd.image img {
width: 100%; height: auto;
vertical-align: top;
}
#terminalBody dd.text {
padding-top: 1em;
/*
text-shadow: 1px 1px 2px #FFF,
 1px  1px 0 #FFF,
-1px -1px 0 #FFF,
-1px  1px 0 #FFF,
 1px -1px 0 #FFF;
 */
}
#terminalBody dd.text,
#terminalBody dd.link {
margin: 0 0 32px 52%;
text-align: justify;
line-height: 1.8;
letter-spacing: 0.05em;
font-size: 1rem;
color: #333;
}
.en #terminalBody dd.text,
.en #terminalBody dd.link {
text-align: left;
}
#terminalBody dd.link {
margin-bottom: 0;
}
#terminalBody dd.link .link-a,
#terminalBody dd.link .nolink {
position: relative;
display: inline-block;
min-width: 240px; height: 40px;
background-color: #666;
background-image: linear-gradient( #666 50%, #606060 50% );
background-size: 4px 4px;
box-shadow: 0 0 16px rgba( 0,0,0,0.8 ) inset;
border-radius: 2px;
transform-style: preserve-3d;
perspective: 960px;
color: #FFF;
text-align: center;
text-decoration: none;
white-space: nowrap;
line-height: 40px;
font-size: 0.8rem;
animation: linkBackAnimation 1s linear infinite;
}
@keyframes linkBackAnimation {
  0% { background-position: 0 0; }
100% { background-position: 0 4px; }
}
#terminalBody dd.link .nolink span {
color: #CCC;
animation: UnderConstructionText 1s linear infinite;
}
@keyframes UnderConstructionText {
  0% { opacity: 1; }
 50% { opacity: 0.75; }
100% { opacity: 1; }
}
#terminalBody dd.link .link-a::before {
content: attr(data-text)'';
display: block;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
text-shadow: 0 0 2px #000;
color: #EEE;
}
#terminalBody dd.link .link-a span {
display: block;
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: #FF640A;
border-radius: 2px;
pointer-events: none;
transition-duration: 0.3s;
transform-origin: bottom;
}
#terminalBody .suiteList li.show .suiteItemLink > .suiteContent {
opacity: 1;
transition-duration: .2s;
}
#terminalBody .suiteList li.show .suiteItemLink.hover > .suiteContent {
opacity: .75;
}
#terminalBody .suiteItemLink.hover dd.link .link-a span,
#terminalBody .suiteItemLinkdd:active .link .link-a span {
box-shadow: 0 -8px 24px rgba( 0,0,0,0.3 );
transform: rotateX( -120deg );
}

#terminalBody #andMore .suiteContent {
background-color: rgba( 255,255,255,0.1 );
}
#terminalBody #andMore dt {
background: linear-gradient( #6C6C6C 50%, #606060 50%);
color: #EEE;
}
#terminalBody #andMore dd.text {
display: flex;
margin-bottom: 0; padding-top: 0;
align-items: center;
justify-content: center;
background: url("../img/and_more_back.png") center center no-repeat rgba( 0,59,95,0.05 );
background-size: contain;
border: 1px solid #CCC;
text-align: center;
font-size: 20px;
color: #666;
}
#terminalBody #andMore dd em {
display: inline;
font-weight: bold;
font-style: normal;
}
.en #terminalBody #andMore dd em {
margin-left: 0.3em;
}
#terminalBody #andMore dd.text span::after {
content: '';
display: inline-block;
width: 8px; height: 1em;
border-right: 1px solid #999;
vertical-align: middle;
animation: andmore 1s infinite;
}
@keyframes andmore {
  0% { opacity: 1; }
 45% { opacity: 1; }
 50% { opacity: 0; }
 95% { opacity: 0; }
100% { opacity: 1; }
}
#terminalBody .handoutList {
margin: 0 auto; padding: 8px 0 0 0;
letter-spacing: -0.4em;
list-style: none;
text-align: center;
}
#terminalBody .handoutList li {
display: inline-block;
width: 31.333%;
margin: 1%; padding: 0;
background-color: #FFF;
box-shadow: 0 0 16px rgba( 0,0,0,0.1 );
border: 1px solid #CCC;
border-radius: 4px;
letter-spacing: normal;
text-align: center;
}
#terminalBody .handoutList li a {
display: block;
padding: 16px;
text-decoration: none;
color: #333;
}
#terminalBody .handoutList li a:hover {
background-color: #E5EAEF;
}
#terminalBody .handoutList li img {
width: calc( 50% - 16px ); height: auto;
margin: 0 8px;
box-shadow: 0 0 12px rgba( 0,0,0,0.3 );
vertical-align: bottom;
}
#terminalBody .handoutList li a:hover img {
opacity: 0.8;
}
#snsArea {
max-width: 980px;
margin: 0 auto;
}
#snsArea::after {
content: '';
display: block;
clear: both;
}
#twitterTimeline,
#facebookTimeline {
width: 50%;
float: left;
}
#twitterTimeline {
padding-right: 16px;
}
#facebookTimeline {
padding-left: 16px;
}

@media screen and ( max-width: 1280px ){

#terminalBody p {
font-size: 2vw;
}
#terminalBody .suiteList li,
#terminalBody .suiteList li:nth-of-type(even) {
margin-bottom: 16px;
}
#terminalBody .suiteList li.show .suiteItemLink,
#terminalBody .suiteList li.show:nth-of-type(even) .suiteItemLink {
transform: translateX( 0 );
}

}/* /1280px */

@media screen and ( max-width: 960px ){

#terminalBody section {
padding: 64px 16px;
}
#terminalBody dt {
font-size: 2.8vw;
}
#terminalBody dt em {
font-size: 3.3vw;
}
#terminalBody dd.text {
font-size: 2vw;
}
#terminalBody #andMore dd.text {
font-size: 2vw;
}
#terminalBody .handoutList li {
width: 48%;
}
#terminalBody #why p.link a {
min-width: 140px;
}

}

@media screen and ( max-width: 640px ){

#terminalBody .systemLifeCycle {
float: none;
width: 100%;
}
#terminalBody #why p {
margin-left: 0; padding: 0 16px;
font-size: 3.2vw;
}
#terminalBody #why .whyContent {
display: block;
}
#terminalBody #why .whyContent > div {
width: 100%;
}
#terminalBody #why p br {
display: none;
}
#terminalBody #why p.link {
text-align: center;
}
#terminalBody .handoutList {
padding: 0 16px;
}
#startArea p {
font-size: 3vw;
}
#startArea #startMenu a {
font-size: 4vw;
}
#terminalBody section {
padding: 48px 0;
}
#terminalBody h2 {
margin-bottom: 16px;
font-size: 5vw;
}
#terminalBody .suiteList li {
padding: 24px; margin-top: 0;
background-color: transparent;
}
#terminalBody .suiteList li.show {
background-color: transparent;
}
#terminalBody .suiteItemLink,
.en #terminalBody .suiteItemLink {
transition-duration: 0.3s;
background-size: 45% auto, 100% 100%;
}
#terminalBody .suiteItemLink {
padding: 24px;
}
#terminalBody dt {
padding: 16px 140px 16px 24px;
}
#terminalBody dt span.series {
right: 20px;
width: 100px; height: 28px;
}
#terminalBody dt span.series span {
font-size: 12px;
}
#terminalBody dt span.series::before {
border-width: 1px;
}
#terminalBody dd.image {
float: none;
width: 100%;
margin: 0 0 16px;
}
#terminalBody dd.text {
margin: 0 0 16px;
font-size: 3vw;
}
#terminalBody #andMore dd.text {
font-size: 3.5vw;
}
#terminalBody dd.link {
margin: 0;
}
#terminalBody dd.link a,
#terminalBody dd.link span.nolink {
margin: 0;
min-width: 50%;
font-size: 3vw;
}
#twitterTimeline {
margin-bottom: 16px;
}
#twitterTimeline,
#facebookTimeline {
width: 100%;
float: none;
padding: 0;
}
#snsArea {
padding: 0 16px;
}
#terminalBody a.download {
font-size: 120%;
}
#terminalBody section#overview {
padding: 48px 16px;
}

}/* /640px */

@media screen and ( max-width: 480px ){

#startArea h1 {
padding: 0 32px;
}
#startArea #startMenu ul {
padding: 8px;
}
#startArea #startMenu li {
width: 50%;
max-width: none;
padding: 2vw;
text-align: center!important;
}
#startArea #startMenu li.sub {
margin: 2vw 0 0!important;
}
#startArea #startMenu .main a,
#startArea #startMenu .sub a {
font-size: 4vw;
}
#startArea #startMenu .sub a {
width: auto;
}
#terminalBody dt {
padding: 12px 100px 12px 16px;
}
#terminalBody dt span.series {
right: 16px;
width: 80px; height: 24px;
}
#terminalBody dt span.series span {
font-size: 10px;
}
#terminalBody dt span.series::before {
border-width: 1px;
}
#terminalBody dd.link a,
#terminalBody dd.link span.nolink {
min-width: 55%;
}
#terminalBody .suiteList li {
padding: 16px;
}
#terminalBody .handoutList li {
width: 100%;
}
#terminalBody .suiteItemLink {
padding: 12px;
}

}/* /480px */





/* -------------------------------------------------- **

   Asset

** -------------------------------------------------- */

#article.asset #articleTitle .background {
  background-image: url("../img/header_asset.jpg");
}

#articleBody .sectionInner ul.exastroLogoList {
  margin: 0; padding: 0;
  list-style: none;
  letter-spacing: -0.4em;
}
#articleBody .sectionInner ul.exastroLogoList li {
  display: inline-block;
  width: 25%;
  vertical-align: top;
  letter-spacing: normal;
}
#articleBody .sectionInner ul.exastroLogoList dl {
  margin: 0 8px; padding: 8px;
  background-color: #FFF;
  box-shadow: 0 0 8px rgba( 0,0,0,0.1);
}
#articleBody .sectionInner ul.exastroLogoList dt {
  position: relative;
  background-color: #F2F2F2;
  background-image: linear-gradient( 45deg, #FFF 25%, transparent 25%, transparent 75%, #FFF 75%),
  linear-gradient( 45deg, #FFF 25%, transparent 25%, transparent 75%, #FFF 75%);
  background-size: 32px 32px;
  background-position: 0 0, 16px 16px;
  box-shadow: 0 0 16px rgba( 0,0,0,0.1) inset;
}
#articleBody .sectionInner ul.exastroLogoList dt.white {
  background-color: #555;
  background-image: linear-gradient( 45deg, #666 25%, transparent 25%, transparent 75%, #666 75%),
  linear-gradient( 45deg, #666 25%, transparent 25%, transparent 75%, #666 75%);
  background-size: 32px 32px;
  background-position: 0 0, 16px 16px;
  box-shadow: 0 0 16px rgba( 0,0,0,0.3) inset;
}
#articleBody .sectionInner ul.exastroLogoList dt::after {
  content: '';
  display: block;
  padding-top: 75%;
}
#articleBody .sectionInner ul.exastroLogoList dt img {
  max-width: 95%;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  vertical-align: bottom;
}
#articleBody .sectionInner ul.exastroLogoList dd {
  padding: 8px 0 0;
}
#articleBody .sectionInner ul.exastroLogoList dd ul {
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  margin: 0; padding: 0;
  list-style: none;
  letter-spacing: -0.4em;
  text-align: center;
}
#articleBody .sectionInner ul.exastroLogoList dd li {
  display: table-cell;
  border: 1px solid #DDD;
}
#articleBody .sectionInner ul.exastroLogoList a {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 4px;
  background-color: #FFF;
  text-decoration: none;
  font-size: 0.84rem;
  color: #666;
  transition-duration: 0.3s;
}
#articleBody .sectionInner ul.exastroLogoList a::after {
  content: '\f019';
  position: absolute;
  top: -100%; left: 0;
  width: 100%; height: 100%;
  padding: 4px;
  background-color: #F2F2F2;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 0.84rem;
  color: #666;
  transition-duration: 0.3s;
}
#articleBody .sectionInner ul.exastroLogoList a.hover {
  color: #FFF;
}
#articleBody .sectionInner ul.exastroLogoList a.hover::after {
  top: 0;
}

@media screen and (max-width: 640px) {

  #articleBody .sectionInner ul.exastroLogoList li {
    width: 50%;
  }

}/* /640px */



/* -------------------------------------------------- **

   Event

** -------------------------------------------------- */

#article.event #articleTitle .background {
  background-image: url("../img/header_event.jpg");
}
#articleBody .sectionInner .eventList {
  margin: 0; padding: 0;
  list-style: none;
}
#articleBody .sectionInner .eventListItem {
  margin: 32px 0; padding: 16px;
  background-color: #FFF;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba( 0,0,0,0.2 );
}
#articleBody .sectionInner .eventListItem:last-child {
  margin-bottom: 0;
}
.eventListData::after {
  content: '';
  display: table;
  clear: both;
}
.eventListMainImage {
  float: left;
  overflow: hidden;
  width: 30%;
  margin-bottom: 56px;
}
.eventListImage {
  width: 100%; height: auto;
  vertical-align: top;
}
.eventListOverview {
margin-left: calc( 30% + 24px );
}
.eventListData {
position: relative;
z-index: 1;
}
.eventListDate {
margin: 0 0 16px;
padding: 0 16px 0 0;
background-color: #D6E4F4;
text-align: right;
line-height: 40px;
font-size: 20px;
font-weight: bold;
color: #002B62;
}
.eventListType {
display: block;
float: left;
padding: 0 16px;
background-color: #002B62;
color: #FFF;
}
.eventListTitle {
margin-bottom: 4px;
line-height: 1.5;
font-size: 24px;
font-weight: bold;
color: #333;
}
.eventListTitle .popularity {
color: #EE0000;
}
.eventListSubTitle {
margin-bottom: 12px;
line-height: 1.5;
font-size: 20px;
font-weight: bold;
color: #666;
}
.eventListSummary {
margin-bottom: 16px; padding-top: 16px;
border-top: 4px solid #DDD;
line-height: 1.75;
font-size: 12px;
}

.eventListTag {
  margin-bottom: 12px;
}
.eventListTag i {
  display: block;
  float: left;
  padding-top: 5px;
  font-size: 1rem;
  color: #CCC;
}
#articleBody .sectionInner .eventListTagList {
  margin: 0 0 0 1.5em; padding: 0;
  line-height: 1;
}
#articleBody .sectionInner .eventListTagItem {
  display: inline-block;
  margin: 4px 0; padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  vertical-align: top;
}
.eventTag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  vertical-align: top;
  font-size: 10px;
  font-family: "Lucida Console", Monaco, "monospace";
  color: #FFF;
}
.eventTag.ita { background-color: #002B62; }
.eventTag.pc { background-color: #C80000; }
.eventTag.oase { background-color: #00B5B8; }
.eventTag.epoch { background-color: #1F8C78; }
.eventTag.other { background-color: #BBB; }

#articleBody .sectionInner .eventListMetaList {
margin: 0; padding: 0;
list-style: none;
}
#articleBody .sectionInner .eventListMetaItem {
display: inline-block;
margin: 2px 0; padding: 4px 8px;
background-color: #F8F8F8;
border: 1px solid #CCC;
font-size: 12px;
color: #333;
}
.eventListDetail {
position: absolute;
left: 0; bottom: 0;
width: 30%; height: 48px;
}
.eventListLink {
display: block;
width: 100%;
text-decoration: none;
}
.eventListLink span {
overflow: hidden;
position: relative;
z-index: 1;
display: block;
width: 100%;
background-color: #FF821E;
background-image: linear-gradient( rgba( 255,255,255,0 ), rgba( 255,255,255,.2 ) );
border-bottom: 2px solid #B25B15;
border-radius: 4px;
line-height: 48px;
text-align: center;
font-size: 16px;
font-weight: bold;
color: #FFF;
}
.eventListLink span::before,
.eventListLink span::after {
content: '';
position: absolute;
top: 50%;
display: block;
width: 96px; height: 96px;
transform: translateY(-50%) rotate(45deg);
transition-duration: .2s;
border: 8px solid rgba( 255,255,255,.2 );
}
.eventListLink span::before {
left: -72px;
}
.eventListLink span::after {
right: -72px;
}
.eventListLink.hover {
padding-top: 1px;
}
.eventListLink.hover span {
background-color: #FF640A;
border-bottom: 1px solid #B24607;
}
.eventListLink.hover span::before {
left: -64px;
}
.eventListLink.hover span::after {
right: -64px;
}
.eventListLink:active {
padding-top: 2px;
}
.eventListLink.active span {
background-color: #FF640A;
border-bottom: none;
}

@media screen and ( max-width: 1040px ){
#articleBody .sectionInner .eventList {
max-width: 680px;
margin: 0 auto;
}
.eventListMainImage {
float: none;
width: 100%;
margin-bottom: 16px;
text-align: center;
}
#articleBody .eventListImage {
max-width: 480px;
}
.eventListOverview {
margin: 0;
}
.eventListDetail {
position: static;
width: 90%;
margin: 24px auto 0;
}
}
@media screen and ( max-width: 480px ){
.eventListDate {
font-size: 3.5vw;
}
.eventListTitle {
font-size: 4vw;
}
.eventListSubTitle {
font-size: 3.2vw;
}
.eventListSummary,
#articleBody .sectionInner .eventListMetaItem {
font-size: 10px;
}
}
/* -------------------------------------------------- **

   News Room

** -------------------------------------------------- */

#article.newsroom #articleTitle .background {
  background-image: url("../img/header_newsroom.jpg");
}

#article.newsroom #newsList ul {
  margin: 0; padding: 0;
  list-style: none;
}
#article.newsroom #newsList li {
  margin: 32px 0; padding: 24px;
  background-color: #FFF;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba( 0,0,0,0.2 );
}
#article.newsroom #newsList li:last-child {
  margin-bottom: 0;
}
#article.newsroom #newsList a {
  text-decoration: none;
  color: #333;
}
#article.newsroom #newsList a:hover {
  text-decoration: underline;
  color: #444;
}
#article.newsroom #newsList dl::after {
  content: '';
  display: block;
  clear: both;
}
#article.newsroom #newsList dt {
  float: left;
  overflow: hidden;
  width: 30%;
}
#article.newsroom #newsList small {
font-size: 80%;
font-weight: normal;
}
#article.newsroom #newsList dt a {
  display: block;
  background-color: #000;
}
#article.newsroom #newsList dt img {
  max-width: 100%;
  transition-duration: 0.3s;
  vertical-align: middle;
}
#article.newsroom #newsList dt a.hover img {
  opacity: 0.8;
}
#article.newsroom #newsList dt > .newsRoomVideo {
display: block;
}
#article.newsroom #newsList dd {
  margin-left: 33%;
}
#article.newsroom #newsList dd:last-child {
  margin-bottom: 0!important;
}
#article.newsroom #newsList dd.tag {
  margin-bottom: 12px;
}
#article.newsroom #newsList dd.tag i {
  display: block;
  float: left;
  padding-top: 3px;
  font-size: 1rem;
  color: #CCC;
}
#article.newsroom #newsList dd.tag ul {
  margin-left: 1.5em;
  line-height: 1;
}
#article.newsroom #newsList dd.tag li {
  display: inline-block;
  margin: 2px 0; padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  vertical-align: top;
}
#article.newsroom #newsList dd.tag li span {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  vertical-align: top;
  font-size: 0.7rem;
  font-family: "Lucida Console", Monaco, "monospace";
  color: #FFF;
}
#article.newsroom #newsList dd.tag li .ita { background-color: #002B62; }
#article.newsroom #newsList dd.tag li .pc { background-color: #C80000; }
#article.newsroom #newsList dd.tag li .oase { background-color: #00B5B8; }
#article.newsroom #newsList dd.tag li .epoch { background-color: #1F8C78; }
#article.newsroom #newsList dd.tag li .other { background-color: #BBB; }


#article.newsroom #newsList dd.title {
  padding-bottom: 12px;
  line-height: 1.3;
  font-size: 1.4rem;
  font-weight: bold;
}
#article.newsroom #newsList dd.title::after {
  content: '';
  display: block;
  width: 100%; height: 4px;
  margin-top: 8px;
  background-color: #EFEFEF;
}
#article.newsroom #newsList dd.title i {
vertical-align: 1px;
font-size: 80%;
color: #666;
}
#article.newsroom #newsList dd.meta {
  margin-bottom: 16px;
  font-size: 0.84rem;
  color: #666;
}
#article.newsroom #newsList div.media {
  display: inline-block;
}
#article.newsroom #newsList div.date {
  float: right;
}
#article.newsroom #newsList dd.text {
  font-size: 0.9rem;
  color: #444;
}
#article.newsroom #newsList dd.document {
  margin-top: 4px;
  font-size: 0.84rem;
}
#article.newsroom #newsList dd.document a {
  display: block;
  padding: 4px 8px;
  border: 1px solid #DDD;
  color: #666;
}
#article.newsroom #newsList dd.document a:hover {
  background-color: #F9F9F9;
  border-color: #BBB;
  text-decoration: none;
  color: #333;
}
#article.newsroom #newsList dd.document .fa-file-pdf { color: #FF0000; }

#article.newsroom #newsList dd.note {
  margin-top: -16px;
  text-align: right;
  font-size: 0.6rem;
  color: #999;
}




#article.newsroom #newsList .documentSet {
clear: both;
margin: 0;
padding-top: 16px;
}
#article.newsroom #newsList .documentSetInner {
}
#article.newsroom #newsList .documentSetMenu {
border-bottom: 1px solid #CCC;
}
#article.newsroom #newsList .documentSetMenuList {
display: inline-block;
margin: 0; padding: 0;
letter-spacing: -0.4em;
list-style: none;
}
#article.newsroom #newsList .documentSetMenuItem {
display: inline-block;
margin: 0; padding: 0;
border: none;
box-shadow: none;
letter-spacing: normal;
}
#article.newsroom #newsList .documentSetMenuLink {
display: block;
margin-bottom: -1px; padding: 0 16px;
background-color: #F2F2F2;
border: 1px solid #CCC;
text-decoration: none;
line-height: 32px;
font-size: 14px;
font-family: Consolas, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
color: #333;
}
#article.newsroom #newsList .tabOpen .documentSetMenuLink {
background-color: #FFF;
border-bottom-color: #FFF;
}
#article.newsroom #newsList .documentSetMenuLink:hover {
background-color: #FFF;
text-decoration: none;
}
#article.newsroom #newsList .tabOpen .documentSetMenuLink:hover {
cursor: default;
}
#article.newsroom #newsList .documentSet .title {
padding-top: 8px;
line-height: 1.5;
font-weight: normal;
font-size: 1.1rem;
}
#article.newsroom #newsList .documentSet .title::after {
display: none;
}
#article.newsroom #newsList .documentSet .title a {
font-size: 1.1rem;
}
#article.newsroom #newsList .documentSetContent {
display: none;
padding: 16px;
background-color: #FFF;
border: 1px solid #CCC;
border-top: none;
}
#article.newsroom #newsList .documentSetContent.tabOpen {
display: block;
}
#article.newsroom #newsList .documentSet dt {

}
#article.newsroom #newsList .documentSet dd {

}


@media screen and (max-width: 640px) {

  #article.newsroom #newsList li {
    padding: 16px;
  }
  #article.newsroom #newsList dt,
  #article.newsroom #newsList .documentSet dt {
    float: none;
    width: 100%;
    margin-bottom: 16px;
  }
  #article.newsroom #newsList dd,
  #article.newsroom #newsList .documentSet dd{
    margin-left: 0;
  }
  #article.newsroom #newsList dd.tag i {
    font-size: 2.8vw;
  }
  #article.newsroom #newsList dd.tag li div {
    font-size: 2vw;
  }
  #article.newsroom #newsList .documentSetMenuList {
    padding-bottom: 4px;
  }
  #article.newsroom #newsList .documentSetMenuItem {
    margin: 2px;
  }
  #article.newsroom #newsList .tabOpen .documentSetMenuLink {
    border-color: #AAA;
  }
  #article.newsroom #newsList dd.title {
    font-size: 3.5vw;
  }
  #article.newsroom #newsList .documentSet .title a {
    font-size: 3.2vw;
  }
  #article.newsroom #newsList .documentSetMenuLink {
    padding: 0 8px;
  }
  #article.newsroom #newsList .documentSet .title {
    padding-top: 0;
    font-size: 3.2vw;
  }
  
  #article.newsroom #newsList dd.meta,
  #article.newsroom #newsList dd.document {
    font-size: 2.3vw;
  }

}/* /640px */