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

/*
##################################################
   Header
##################################################
*/
#header {
position: relative;
z-index: 0;
background-color: #333;
background-image: url("../img/header_background.jpg");
background-position: center center;
background-size: cover;
}
#header::before {
content: '';
position: absolute;
left: 0; top: 0;
z-index: -1;
width: 100%; height: 100%;
background-image: linear-gradient(-90deg, #001127 50%, transparent 50%),
linear-gradient(#001127 50%, transparent 50%);
background-size: 4px 4px;
}
#header::after {
content: '';
position: absolute;
left: 0; top: 0;
z-index: -1;
width: 100%; height: 100%;
background-image: radial-gradient(#555,#000);
opacity: .2;
}

/*
##################################################
   Article
##################################################
*/
.article-Container {
max-width: 1232px;
margin: 0 auto; padding: 0 16px;
}
.article-Body {
position: relative;
z-index: 0;
margin: -64px auto 64px; padding: 64px;
background-color: #FFF;
border-radius: 8px;
box-shadow: 0 0 32px rgba(0,0,0,.3);
}
/*
   topicPath
*/
.topicPath {
margin: -32px auto 56px;
}
.topicPath-List {
display: flex;
width: 100%;
}
.topicPath-Item {
display: flex;
align-items: center;
}
.topicPath-Item::after {
content: '>';
display: block;
padding: 0 16px;
color: #AAA;
}
.topicPath-Item:last-child::after {
display: none;
}
.topicPath-Link {
display: block;
}
/*
   section
*/
.section-Title {
padding: 0 16px 80px;
text-align: center;
letter-spacing: .75px;
font-size: 40px;
}
.section-SubTitle {
margin: 0 auto 32px; padding: 16px;
border-left: 4px solid #002B62;
font-size: 32px;
letter-spacing: .75px;
}
/*
   section-FooterMenu
*/
.section-FooterMenu {
margin-top: 80px;
}
.section-FooterMenu-List {
display: flex;
justify-content: center;
align-items: stretch;
gap: 32px;
width: 100%;
list-style: none!important;
}
.section-FooterMenu-Item {
width: 50%;
}
.section-FooterMenu-Link {
overflow: hidden;
display: block;
height: 100%;
margin: 0 auto; padding: 0 0 4px;
border-radius: 4px;
text-decoration: none;
text-align: center;
font-size: 28px;
color: #FFF;
}
.section-FooterMenu-Link > span {
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
height: 100%;
padding: 16px;
border-radius: 4px;
background-color: #60C60D;
box-shadow: 0 2px 0 2px #438B09;
transition-duration: .2s;
line-height: 1.3;
font-size: 16px;
color: #FFF;
}
.section-FooterMenu-Link.hover > span {
transform: translateY(2px);
}
/*
   article-Footer
*/
.article-Footer {
max-width: 1200px;
margin: 64px auto;
}

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

.article-Container {
padding: 0 8px;
}
.article-Body {
margin: -32px auto 32px;
padding: 32px;
}
.topicPath {
margin: -16px auto 56px;
}
.section-Title {
font-size: 3.4vw;
}
.section-SubTitle {
font-size: 3vw;
}

}

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

.article-Body {
margin: -24px auto 24px;
padding: 24px;
}
.topicPath {
margin: -12px auto 56px;
font-size: 12px;
}
.section-Title {
font-size: 24px;
}
.section-SubTitle {
font-size: 20px;
}
.section-FooterMenu-List {
gap: 16px;
}
.section-FooterMenu-Link > span {
font-size: 12px;
}

}


/*
##################################################
   Home : Header
##################################################
*/
.homeHeader {
display: flex;
width: 100%; max-width: 1232px;
margin: 0 auto; padding: 0 16px 32px;
background: url("../img/home_earth.png") center bottom no-repeat;
background-size: contain;
}
.homeHeader > div {
display: flex;
flex-direction: column;
justify-content: center;
flex: 0 0 auto;
}
.homeHeader-Main {
width: 60%;
}
.homeHeader-LifeCycle {
width: 40%;
}
.homeHeader-Title {
margin-bottom: 32px;
line-height: 1.75;
font-size: 28px;
color: #FFF;
}
.homeHeader-News {
position: relative;
background-color: rgba(0,0,0,.5);
border: 6px double rgba(255,255,255,.2);
font-size: 12px;
}
.homeHeader-News-List {
padding: 8px 0;
line-height: 1.5;
letter-spacing: 0.025em;
color: #FFF;
}
.homeHeader-News-List::before,
.homeHeader-News-List::after,
.homeHeader-News::before,
.homeHeader-News::after {
content: '';
display: block;
position: absolute;
width: 16px; height: 16px;
border: 2px solid #888;
}
.homeHeader-News::before {
left: -6px; top: -6px;
border-bottom: none;
border-right: none;
}
.homeHeader-News-List::before {
right: -6px; top: -6px;
border-bottom: none;
border-left: none;
}
.homeHeader-News::after {
right: -6px; bottom: -6px;
border-top: none;
border-left: none;
}
.homeHeader-News-List::after {
left: -6px; bottom: -6px;
border-top: none;
border-right: none;
}
.homeHeader-News-Date {
float: left;
width: 10em;
padding: 4px;
text-align: center;
}
.homeHeader-News-Date:before {
content: '';
display: inline-block;
width: 4px; height: 11px;
margin-right: 8px;
background-color: #FFA500;
}
.homeHeader-News-Item {
margin-bottom: 8px; padding: 4px 16px 4px 10em;
border-bottom: 1px solid rgba(255,255,255,.2);
}
.homeHeader-News-Item:last-child {
margin-bottom: 0;
}
.homeHeader-News-Link         { color: #60C60D; }
.homeHeader-News-Link:visited { color: #306307; }
.homeHeader-News-Link:hover   { color: #B0E386; }

.homeHeader-News-Goto {
padding: 4px 16px 8px;
text-align: right;
}

.swiper-button-next, .swiper-button-prev {
color: #FFF;
}


/*
##################################################
   Home : Common
##################################################
*/
.homeSection {
position: relative;
padding: 96px 0 120px;
}
.homeSection-Container {
width: 100%; max-width: 1400px;
margin: 0 auto;
}
.homeSection-Title {
padding: 0 16px 80px;
text-align: center;
letter-spacing: .75px;
font-size: 40px;
}
.homeSection-SubTitle {
margin: 0 auto 32px; padding: 16px;
border-left: 4px solid #002B62;
font-size: 32px;
letter-spacing: .75px;
}
.goto-Link,
.goto-nolink {
overflow: hidden;
display: block;
width: 80%;
margin: 0 auto; padding: 0 0 4px;
border-radius: 4px;
text-decoration: none;
text-align: center;
font-size: 16px;
color: #FFF;
}
.goto-nolink {
color: #AAAAAA;
}
.goto-Link  > span {
display: block;
padding: 32px;
border-radius: 4px;
background-color: #60C60D;
box-shadow: 0 2px 0 2px #438B09;
transition-duration: .2s;
}
.goto-nolink  > span {
display: block;
padding: 32px;
border-radius: 4px;
background-color: #666;
box-shadow: 0 2px 0 2px #5b5b5b;
}
.goto-nolink-coming-soon {
display: block;
position: absolute;
color: #FFF;
right: 68px; bottom: 8px;
font-size: 14px;
}
#faq .faq-Ditail-Item {
position: relative;
}
.goto-Link > span,
.goto-nolink > span {
padding: 8px 16px;
}
.goto-Link.hover > span {
transform: translateY(2px);
}


@media screen and ( max-width: 640px ) {
.homeSection-Title {
font-size: 6vw;
}
.homeSection-SubTitle {
font-size: 4vw;
}
}

/*
##################################################
   Home : Banner
##################################################
*/
#banner {
overflow: hidden;
position: relative;
background-color: #000;
}
.banner {
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 0;
width: 100%; height: 400px;
background-size: cover;
}
.banner-Body {
display: flex;
width: 100%;
max-width: 1328px;
margin: 0 auto; padding: 0 64px;
letter-spacing: .75px;
color: #FFF;
}
.banner-Text,
.banner-Image {
display: flex;
flex-direction: column;
justify-content: center;
width: 60%;
}
#slide-Overview .banner-Text,
#slide-Exastro .banner-Text {
width: 100%;
text-align: center;
}
.banner-Image {
width: 40%;
}
.banner-Title {
margin-bottom: 16px;
line-height: 1.3;
font-weight: bold;
font-size: 40px;
}
.banner-Title > span {
display: inline-block;
font-size: 16px;
}
.banner-Par {
margin-bottom: 32px;
line-height: 1.5;
font-size: 24px;
}
.banner-List {
display: flex;
gap: 24px;
margin: 0 auto;
}
#slide-Exastro .banner-List {
margin-bottom: 32px;
}
.banner-Item {
display: flex;
padding: 16px;
background-color: rgba(0,43,98,.5);
border: 1px solid #335581;
border-radius: 8px;
box-shadow: 0 0 16px rgba(179,191,208,.2);
text-align: left;
line-height: 1.3;
font-size: 20px;
}
#slide-Exastro .banner-Item {
border: 1px solid #8A2BE2;
background-color: rgba(138,43,226,.5);
box-shadow: 0 0 16px rgba(220,191,246,.5)
}
.banner-Item > i {
margin-right: 8px;
color: #FFA500;
}
#slide-Overview {
background: url("../img/home_earth.png") center bottom no-repeat,
linear-gradient(-90deg, #001127 50%, transparent 50%),
linear-gradient(#000 50%, transparent 50%),
url("../img/header_background.jpg") center center;
background-size: auto, 4px 4px, 4px 4px, cover;
}
#slide-Exastro {
background: linear-gradient(rgba(0,0,0,.5) 50%, rgba(0,0,0,0) 50%),
url("../img/home_banner_exastro.jpg") center center;
background-size: 4px 4px, cover;
}
#slide-Overview .banner-Title,
#slide-Overview .banner-Par,
#slide-Exastro .banner-Title,
#slide-Exastro .banner-Par {
text-shadow: 0 0 8px #000, 0 0 8px #000, 0 0 8px #000;
}
#slide-ITA {
background-image: url("../img/home_banner_ita.jpg");
}
#slide-OASE {
background-image: url("../img/home_banner_oase.jpg");
}
#slide-EPOCH {
background-image: url("../img/home_banner_epoch.jpg");
}
#information {
background-image: linear-gradient( -45deg, rgba(0,0,0,0) 25%, rgba(0,0,0,.1) 25%, rgba(0,0,0,.1) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgba(0,0,0,.1) 75% ), radial-gradient( #333, #111 );
background-size: 256px 256px, 100% 100%;
}
#information .banner-Title {
color: #FFA500;
}
.banner-Detail-Link {
position: relative;
overflow: hidden;
display: inline-block;
width: 100%; max-width: 200px;
margin: 0 auto; padding: 16px 0;
background-color: rgba( 0,0,0,0.3 );
border: 2px solid #90D756;
text-decoration: none;
letter-spacing: 0.1em;
text-align: center;
font-size: 16px;
color: #90D756;
transition-duration: 0.3s;
}
.banner-Detail-Link::before {
content: '';
position: absolute;
width: 30%; height: 6px;
background-color: #90D756;
border: border solid #90D756;
}
.banner-Detail-Link::before {
left: -8px; top: -2px;
transform: skewX(-45deg);
}
.banner-Detail-Link.hover {
background-color: #90D756;
color: #000;
}
.swiper-pagination-bullet {
background-color: #FFF;
}
#information .banner-Title {
font-size: 24px;
}
.banner-New {
width: 100%; height: 100%;
overflow: auto;
}
.banner-New-List {
display: flex;
padding: 16px 0;
border-top: 1px solid #666;
line-height: 1.5;
}
.banner-New-List:last-child {
border-bottom: 1px solid #666;
}
.banner-New-Date {
white-space: nowrap;
font-weight: bold;
color: #999;
}
.banner-New-Cat {
padding: 0 16px;
white-space: nowrap;
}
.banner-Cat-txt {
display: block;
padding: 2px 8px 1px;
background-color: #CCC;
border: 1px solid rgba( 255,255,255,.5 );
border-radius: 4px;
font-size: 80%;
color: #FFF;
}
.banner-Cat-ita {
background-color: #002B62;
}
.banner-New-Item {
font-size: 14px;
}
.banner-New-Link {
color: #00AAFF;
}
.banner-New-Link:hover {
text-decoration: underline;
}
#newsroom {
    background-image: url(/assets/img/header_newsroom.jpg);
    background-position: center;
}
#newsroom .banner-Title {
    text-align: center;
    font-size: 32px;
    color: #FFF;
}
.banner-Newsroom-Image {
    margin-bottom: 8px;
}
.banner-Newsroom-List {
    display: flex;
    gap: 32px;
}
.banner-Newsroom-Item {
    flex: 1 1 100%;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 4px;
    padding: 16px;
}
.banner-Newsroom-Link {
    text-decoration: none;
    color: #FFF;
    transition-duration: .3s;
}
.banner-Newsroom-Title {
    height: 42px;
    margin-bottom: 8px;
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 14px;
}
.banner-Newsroom-Link:hover {
    opacity: .8;
}
.banner-Newsroom-Date {
    text-align: right;
    font-size: 12px;
    opacity: .8;
}

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

.banner-Title > em {
display: block;
font-size: 75%;
}
.banner-Newsroom-List {
    gap: 16px;
}

}

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

.banner {
height: 640px;
}
.banner-Body {
position: relative;
z-index: 0;
flex-direction: column;
justify-content: center;
align-items: center;
padding-bottom: 112px;
}
.banner-Body > div {
max-width: 480px;
width: 100%;
}
#slide-Overview .banner-Body {
padding-bottom: 48px;
}
.banner-List {
width: 100%;
flex-direction: column;
gap: 16px;
}
#slide-Exastro .banner-List {
margin-bottom: 16px;
}
.banner-Item {
width: 90%;
margin: 0 auto;
padding: 12px;
}
.banner-Image > img {
display: block;
width: 85%;
margin: 0 auto;
}
.banner-Detail {
position: absolute;
left: 50%; bottom: 32px;
transform: translateX(-50%);
width: 100%;
max-width: 480px;
}
.banner-Detail-Link {
display: block;
margin: 0 auto; padding: 12px;
}
.banner-New-List {
flex-wrap: wrap;
}
.banner-New-Date,
.banner-New-Cat {
width: 50%;
text-align: center;
}
.banner-New-Item {
margin-top: 8px;
}
#information .banner-Body,
#newsroom .banner-Body {
    padding-bottom: 0;
}
.banner-Newsroom-List {
    flex-flow: column;
    gap: 8px;
}
.banner-Newsroom-Item {
    padding: 8px;
}
.banner-Newsroom-Item::after {
    content: '';
    display: block;
    clear: both;
}
.banner-Newsroom-Image {
    float: left;
    width: 30%;
}
.banner-Newsroom-Title,
.banner-Newsroom-Date {
    margin-left: calc( 30% + 16px );
    font-size: 16px;
}
.banner-Newsroom-Title {
    margin-bottom: 12px;
}

}

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

.banner-Title {
font-size: 6.5vw;
}
.banner-Title > span {
font-size: 50%;
}
.banner-Par {
margin-bottom: 16px;
font-size: 3.5vw;
}
.banner-Item {
font-size: 3vw;
}
.banner-Detail-Link {
font-size: 3vw;
}
.banner-New-Item {
font-size: 2.4vw;
}

}

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

.banner {
height: 480px;
}
.banner-Body {
max-width: 400px;
padding: 0 32px 96px;
}
#information .banner-Body {
padding: 32px;
}
.swiper-button-prev {
left: 0;
}
.swiper-button-next {
right: 0;
}
.swiper-button-prev:after,
.swiper-button-next:after {
font-size: 20px;
}
#slide-Exastro .banner-List {
margin-bottom: 8px;
}
.banner-Item {
padding: 8px;
}

}

/*
##################################################
   Home : First of all
##################################################
*/
#firstContents {
padding: 32px;
}
.firstContents-List {
display: flex;
justify-content: space-between;
gap: 32px;
margin: 0 auto;
}
.firstContents-Item {
width: 100%;
background-color: #FFF;
border: 1px solid #DDD;
border-radius: 4px;
box-shadow: 0 0 16px rgba(0,0,0,.1);
}
.firstContents-Card {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.firstContents-Image {
width: 100%;
padding: 16px;
}
.firstContents-Text {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
padding: 16px 16px 8px;
background-color: #FFEEE0;
text-align: center;
line-height: 1.8;
font-size: 16px;font-weight: bold;
color: #CC5008;
}
.firstContents-Goto {
padding: 8px 16px 16px;
background-color: #FFEEE0;
}
.firstContents-message .firstContents-Text,
.firstContents-message .firstContents-Goto {
background-color: #E5EAEF;
}
.firstContents-message .firstContents-Text {
color: #002B62;
}


@media screen and ( max-width: 1200px ) {
.firstContents-List {
max-width: 960px;
gap: 16px;
flex-wrap: wrap;
justify-content: center;
}
.firstContents-Item {
width: calc( 33% - 16px );
}
}

@media screen and ( max-width: 960px ) {
#firstContents {
padding: 16px;
}
.firstContents-List {
max-width: 640px;
gap: 16px;
flex-wrap: wrap;
}
.firstContents-Item {
width: calc( 50% - 8px );
}
}

@media screen and ( max-width: 640px ) {
#firstContents {
padding: 16px 8px;
}
.firstContents-List {
gap: 8px;
}
.firstContents-Item {
width: calc( 50% - 4px );
}
.firstContents-Text {
font-size: 3vw;
}

}

/*
##################################################
   Home : Message, Column
##################################################
*/
.homeArticle {
}
#homeMessage {
background-color: #E5EAEF;
background-image: linear-gradient( 45deg, rgba(255,255,255,.3) 50%, rgba(255,255,255,0) 50% );
}
#homeColumn {
background-color: #FFF3EB;
background-image: linear-gradient( -45deg, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 50% );
}
.homeArticle-Header {
display: flex;
padding: 96px 0 80px;
}
#homeColumn .homeArticle-Header {
flex-flow: row-reverse;
}
.homeArticle-Header > * {
width: 50%;
}
.homeArticle-Type {
overflow: hidden;
position: relative;
height: 128px;
font-size: 128px;
font-weight: bold;
font-family: 'Roboto';
color: #FFF;
}
.homeArticle-Type > span {
position: absolute;
display: block;
top: 50%;
transform: translateY(-50%);
opacity: .2;
}
#homeMessage .homeArticle-Type {
background-color: #002B62;
}
#homeColumn .homeArticle-Type {
background-color: #FF640A;
}
#homeMessage .homeArticle-Type > span {
right: 16px;
}
#homeColumn .homeArticle-Type > span {
left: 16px;
}

.homeArticle-Body {
padding: 0 16px 96px;
}

.homeArticle-Title {
display: flex;
padding: 0 32px;
align-items: center;
text-align: center;
letter-spacing: .75px;
font-size: 64px;
font-weight: bold;
}
#homeMessage .homeArticle-Title {
justify-content: flex-start;
background-image: linear-gradient( 45deg, rgba(127,149,177,0) 25%, rgba(127,149,177,.1) 25%, rgba(127,149,177,.1) 50%, rgba(127,149,177,0) 50%, rgba(127,149,177,0) 75%, rgba(127,149,177,.1) 75% );
background-size: 16px 16px;
color: #002B62;
}
#homeColumn .homeArticle-Title {
justify-content: flex-end;
background-image: linear-gradient( -45deg, rgba(255,100,10,0) 25%, rgba(255,100,10,.1) 25%, rgba(255,100,10,.1) 50%, rgba(255,100,10,0) 50%, rgba(255,100,10,0) 75%, rgba(255,100,10,.1) 75% );
background-size: 16px 16px;
color: #FF640A;
}
.homeMessage-Main {
display: flex;
gap: 48px;
max-width: 1400px;
margin: 0 auto 32px; padding: 32px;
background-color: #FFF;
border-radius: 4px;
box-shadow: 0 0 8px 2px rgba(0,0,0,.1);
}
.homeColumn-Body {
max-width: 1400px;
margin: 0 auto 32px; padding: 32px;
}
.homeMessage-Body {
width: 70%;
}
.homeMessage-Image {
width: 30%;
}
.homeMessage-Body-Title {
margin-bottom: 16px;
line-height: 1.3;
letter-spacing: .75px;
font-size: 32px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
font-feature-settings: 'palt';
color: #333;
}
.homeMessage-Body-Title > span {
margin-left: 24px;
font-size: 16px;
font-weight: 400;
}
.homeMessage-Body-SubTitle {
position: relative;
margin: 24px 0 8px; padding-left: 16px;
line-height: 1.3;
letter-spacing: .75px;
font-size: 20px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
font-feature-settings: 'palt';
color: #002B62;
}
.homeMessage-Body-SubTitle::before {
position: absolute;
left: -16px;
content: '─';
opacity: .5;
}
.homeMessage-Body-Par {
margin: 24px 0;
line-height: 1.5;
letter-spacing: .75px;
text-indent: 1em;
text-align: justify;
font-size: 16px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
color: #555;
}
.homeMessage-Body-SubTitle ~ .homeMessage-Body-Par {
margin-top: 0;
}
.homeMessage-Body-Link {
text-decoration: none;
}
.homeMessage-Body-Link.hover {
text-decoration: underline;
}
.homeMessage-Suite {
margin: 0 auto; padding: 32px 0 0;
}
.homeMessage-Suite-Other {
max-width: 1400px;
margin: 0 auto 32px; padding: 16px;
border-left: 4px solid #002B62;
font-size: 32px;
letter-spacing: .75px;
}
.homeMessage-Suite-List,
.homeColumn-List,
.handout-List {
display: flex;
flex-wrap: wrap;
gap: 24px;
max-width: 1400px;
margin: 0 auto;
}
.homeColumn-List {
position: relative;
z-index: 1;
justify-content: center;
}
.homeMessage-Suite-Item,
.homeColumn-Item,
.handout-Item {
width: calc( 33.33333% - 16px );
}
.homeMessage-Suite-Link {
display: flex;
gap: 24px;
height: 100%;
padding: 16px;
background-color: #FFF;
border-radius: 4px;
box-shadow: 0 0 8px 2px rgba(0,0,0,.1);
text-decoration: none;
transition-duration: .1s;
color: #333;
}
.homeColumn-Link,
.handout-Link {
overflow: hidden;
display: block;
height: 100%;
padding: 0;
background-color: #FFF;
border-radius: 4px;
box-shadow: 0 0 8px 2px rgba(0,0,0,.1);
text-decoration: none;
}
.homeColumn-Photo,
.handout-Photo {
overflow: hidden;
}
.homeColumn-SubTitle {
padding: 16px; margin-bottom: -20px;
color: #666;
font-size: 16px;
}
.handout-SubTitle {
color: #666;
font-size: 12px;
}
.homeColumn-Title,
.handout-Title {
padding: 16px;
line-height: 1.5;
font-weight: bold;
font-size: 20px;
color: #002B62;
}
.homeColumn-Date,
.handout-Date {
padding: 0 16px 16px;
text-align: right;
line-height: 1;
color: #666;
}
.homeMessage-Suite-Link.hover {
transform: scale(1.03);
}
.homeColumn-Img,
.handout-Img {
transition-duration: .2s;
}
.homeColumn-Link.hover .homeColumn-Img,
.handout-Link.hover .handout-Img {
transform: scale(1.04);
}
.homeMessage-Suite-Photo {
width: 40%;
}
.homeMessage-Suite-Img {
display: block;
max-width: 100%;
}
.homeMessage-Suite-Text {
display: flex;
flex-direction: column;
justify-content: center;
width: calc( 70% - 16px );
line-height: 1.2;
}
.homeMessage-Suite-Title {
margin-bottom: 16px;
font-size: 20px;
}
.homeMessage-Suite-Title > span {
display: block;
margin-bottom: 4px;
font-size: 75%;
}
.homeMessage-Suite-SubTitle {
line-height: 1.5;
font-weight: bold;
font-size: 16px;
color: #002B62;
}
.homeMessage-Suite-Posi {
margin-bottom: 6px;
font-size: 10px;
}
.homeMessage-Suite-Name {
font-size: 16px;
line-height: 1;
}
.column-author-header {
position: relative;
z-index: 0;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 280px;
max-width: 1400px;
margin: 0 auto; padding: 16px 200px 16px 360px
}
.column-position {
display: block;
line-height: 1.5;
font-size: 20px;
}
.column-name {
display: block;
margin: 16px 0;
line-height: 1;
font-size: 32px;
}
.column-profile {
line-height: 1.75;
font-size: 16px;
}
.column-photo {
position: absolute;
left: 0; top: -16px;
z-index: -1;
width: 360px;
}


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

.homeMessage-Body-Title > span {
display: block;
margin: 8px 0 0;
}
.homeMessage-Suite-Item,
.homeColumn-Item,
.handout-Item {
width: calc( 50% - 16px );
}
.homeArticle-Header {
flex-direction: column!important;
}
.homeArticle-Header > * {
width: 100%;
}
.homeArticle-Type {
height: 24px;
font-size: 24px;
}
.homeArticle-Type > span {
left: 50%!important; right: auto!important;
transform: translate(-50%,-50%);
}
.homeArticle-Title {
padding: 32px 16px;
justify-content: center!important;
font-size: 48px;
}
.column-author-header {
overflow: hidden;
margin-bottom: 32px;
padding: 16px 0 16px 360px;
}
.column-photo {
top: 0;
}

}

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

.homeMessage-Main {
display: block;
max-width: 640px;
margin: 0 auto; padding: 24px;
}
.homeMessage-Body {
width: 100%;
margin-bottom: 32px;
}
.homeMessage-Image {
width: 80%;
margin: 0 auto;
}
.homeMessage-Suite,
.homeArticle-Body {
max-width: 640px;
margin: 0 auto; padding-bottom: 0;
}
.homeMessage-Suite-Item,
.homeColumn-Item,
.handout-Item {
width: 100%;
}
.homeArticle-Header {
padding: 48px 0 40px;
}
.homeArticle-Body {
padding-bottom: 32px;
}
.homeArticle-Title {
font-size: 6vw;
}
.column-photo {
width: calc( 50% - 16px );
}
.column-author-header {
padding-left: 50%;
}

}

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

.homeMessage-Header {
padding: 64px 0 32px;
}
.homeMessage-Title {
font-size: 6.4vw;
}
.homeMessage-Body-Title > span {
font-size: 2.6vw;
}
.homeMessage-Body-Title {
font-size: 5vw;
}
.homeMessage-Body-SubTitle {
padding-left: 8px;
font-size: 3.2vw;
}
.homeMessage-Body-SubTitle::before {
left: -8px;
}
.homeMessage-Body-Par,
.homeMessage-Body-Goto {
font-size: 12px;
}
.homeMessage-Suite-Other {
font-size: 5vw;
}
.homeMessage-Suite-Link {
gap: 16px;
}
.homeMessage-Suite-Title {
font-size: 3.2vw;
}
.homeMessage-Suite-Name {
font-size: 12px;
}

.column-position {
font-size: 3vw;
}
.column-name {
font-size: 4vw;
}
.column-profile {
font-size: 12px;
}


}

/*
##################################################
   Home : お困りごと
##################################################
*/
#trouble {
position: relative;
padding-bottom: 64px;
background-color: #F8F8F8;
}
#trouble .section-Title {
color: #FF821E;
}
.trouble-List {
letter-spacing: -0.4em;
}
.trouble-Item {
display: inline-block;
width: 33.333%;
padding: 32px;
vertical-align: top;
letter-spacing: normal;
}
.trouble-Image {
width: 256px; height: 256px;
margin: 0 auto 32px;
background-color: #CCC;
border-radius: 50%;
}
.trouble-Title {
margin-bottom: 16px;
line-height: 1.5;
font-weight: bold;
font-size: 20px;
color: #FF9B4B;
}
.trouble-Text {
line-height: 1.75;
font-size: 16px;
}

/*
##################################################
   Home : 解決
##################################################
*/
#resolve {
padding: 64px 0 16px;
background-color: #FF821E;
text-align: center;
font-size: 48px;
font-weight: bold;
color: #FFF;
}
#resolve::before,
#resolve::after {
content: '';
position: absolute;
left: 0;
width: 100%; height: 64px;
background-repeat: no-repeat;
background-size: 100% 64px;
}
#resolve::before {
top: -64px;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%20128%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%3E.d%7Bfill%3A%23ff821e%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22a%22%2F%3E%3Cg%20id%3D%22b%22%3E%3Cg%20id%3D%22c%22%3E%3Cg%3E%3Cpolygon%20class%3D%22d%22%20points%3D%220%20128%2064%20128%200%200%200%20128%22%2F%3E%3Cpolygon%20class%3D%22d%22%20points%3D%2264%20128%20128%20128%20128%200%2064%20128%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
#resolve::after {
bottom: -64px;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%20128%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%3E.d%7Bfill%3A%23ff821e%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22a%22%2F%3E%3Cg%20id%3D%22b%22%3E%3Cg%20id%3D%22c%22%3E%3Cpolygon%20class%3D%22d%22%20points%3D%2264%200%200%200%2064%20128%20128%200%2064%200%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

/*
##################################################
   Home : 導入事例
##################################################
*/
#case {
padding-top: 120px;
}
#case .homeSection-Title {
color: #FFF;
}
.caseBlock {
position: relative;
margin-bottom: 64px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 4px;
box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
}
.caseBlock-Inner {
position: relative;
height: 100%;
padding: 64px 32px 32px;
}
.caseBlock-Title {
position: absolute;
left: 16px; top: -32px;
z-index: 2;
min-width: 150px;
margin: 0; padding: 24px 48px 16px;
background-image: none;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 0 0 8px 8px;
box-shadow: 0 2px 2px rgba( 0,0,0,0.2 );
text-align: center;
line-height: 40px;
letter-spacing: .75px;
font-weight: bold;
font-size: 24px;
color: #333;
}
.caseBlock-Title { background-image: linear-gradient( #FFF, #F2F2F2 ) }

.caseBlock-Title::before {
content: '';
display: block;
position: absolute;
left: 0; top: 0;
width: 100%; height: 4px;
background-image: repeating-linear-gradient( 45deg, #707070, #707070 12px, #CCCCCC 12px, #CCCCCC 16px );
}
.caseBlock-Text {
text-align: center;
line-height: 1.75;
font-size: 28px;
}
#case .goto-Link > span {
padding: 24px;
font-size: 24px;
}

/*
##################################################
   Home : 概要
##################################################
*/
#overvire {
position: relative;
z-index: 0;
background-color: #001E45;
}
.overview-Background {
overflow: hidden;
position: sticky;
top: 0;
z-index: -10;
width: 100%; height: 100vh;
background-image: url("../img/header_background.jpg");
background-size: cover;
background-position: center center;
opacity: .5;
}
.overview-Background::after {
content: '';
display: block;
width: 100%; height: 100%;
background-image: linear-gradient(-90deg, #001127 50%, transparent 50%), linear-gradient(#000 50%, transparent 50%);
background-size: 6px 6px;
}
#overview-Canvas {
position: absolute;
left: 0; top: 0;
z-index: -1;
width: 25%; height: 25%;
transform-origin: left top;
transform: scale(4);
opacity: .5;
}
.overview-Exastro {
margin-top: -100vh;
}
.overview-Exastro-Header {
padding: 96px 0 16px;
}
.overview-Exastro-Title {
display: flex;
flex: 1 1 auto;
position: relative;
text-align: center;
white-space: nowrap;
font-size: 96px;
font-family: 'Roboto', sans-serif;
font-weight: 900;
color: #FFF;
}
.overview-Exastro-Title > span {
padding: 0 32px;
}
.overview-Exastro-Title::before,
.overview-Exastro-Title::after {
content: '';
width: 100%;
background-size: 32px 32px;
}
.overview-Exastro-Title::before {
background-image: linear-gradient( 45deg, rgba(127,149,177,0) 25%, rgba(127,149,177,.5) 25%, rgba(127,149,177,.5) 50%,
rgba(127,149,177,0) 50%, rgba(127,149,177,0) 75%, rgba(127,149,177,.5) 75% );
}
.overview-Exastro-Title::after {
background-image: linear-gradient( -45deg, rgba(127,149,177,0) 25%, rgba(127,149,177,.5) 25%, rgba(127,149,177,.5) 50%,
rgba(127,149,177,0) 50%, rgba(127,149,177,0) 75%, rgba(127,149,177,.5) 75% );
}
.overview-Exastro-Main {
display: flex;
width: 100%; max-width: 1400px;
margin: 0 auto;
}
.overview-Exastro-Text {
display: flex;
align-items: center;
width: 60%;
padding-right: 32px;
line-height: 1.8;
letter-spacing: .75px;
font-size: 40px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
font-feature-settings: 'palt';
color: #FFF;
}
.overview-Exastro-Exp > span {
display: inline-block;
padding: 0 8px;
line-height: 1.3;
font-size: 16px;
}
.overview-Exastro-Image {
width: 40%;
}
.overview-Exastro-Eff {
position: relative;
z-index: -1;
margin: -64px auto 64px; padding: 64px 0 16px;
background-color: #BFCAD8;
text-align: center;
font-size: 40px;
font-weight: bold;
color: #002B62;
opacity: .5;
}
.overview-Exastro-Eff::before,
.overview-Exastro-Eff::after {
content: '';
position: absolute;
left: 0;
z-index: 0;
width: 100%; height: 64px;
background-repeat: no-repeat;
background-size: 100% 64px;
}
.overview-Exastro-Eff::before {
top: -64px;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%20128%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%3E.d%7Bfill%3A%23BFCAD8%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22a%22%2F%3E%3Cg%20id%3D%22b%22%3E%3Cg%20id%3D%22c%22%3E%3Cg%3E%3Cpolygon%20class%3D%22d%22%20points%3D%220%20128%2064%20128%200%200%200%20128%22%2F%3E%3Cpolygon%20class%3D%22d%22%20points%3D%2264%20128%20128%20128%20128%200%2064%20128%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
.overview-Exastro-Eff::after {
bottom: -64px;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%20128%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%3E.d%7Bfill%3A%23BFCAD8%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22a%22%2F%3E%3Cg%20id%3D%22b%22%3E%3Cg%20id%3D%22c%22%3E%3Cpolygon%20class%3D%22d%22%20points%3D%2264%200%200%200%2064%20128%20128%200%2064%200%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
.overview-Exastro-Eff.suite {
margin: -48px auto 64px; padding: 48px 0 16px;
font-size: 56px;
}
.overview-Exastro-Resolve {
max-width: 1600px;
margin: 0 auto; padding: 64px 0 96px;
line-height: 1.5;
font-size: 24px;
color: #FFF;
}
.resolve-Container {
display: flex;
padding-left: 24px;
}
.resolve-Container > div {
display: flex;
flex-direction: column;
justify-content: center;
width: 50%;
}
.resolve-Title {
margin-bottom: 48px;
text-align: center;
font-size: 40px;
text-shadow: 0 0 8px #7F95B1, 0 0 16px #7F95B1, 0 0 24px #7F95B1, 0 0 32px #7F95B1;
}
.resolve-List {
display: flex;
margin-bottom: 48px;
}
.resolve-Name {
width: 140px;
text-align: center;
font-size: 16px;
}
.resolve-Name-Img {
margin-bottom: 8px;
}
.resolve-Item {
width: calc( 100% - 160px );
padding-left: 32px;
font-size: 18px;
}
.resolve-Detail-List {
}
.resolve-Detail-Item {
display: flex;
align-items: center;
margin-bottom: 16px; padding: 8px 16px;
background-color: rgba(138,43,226,.5);
border: 1px solid rgba(138,43,226,.8);
border-radius: 4px;
letter-spacing: .75px;
}
.resolve-Detail-Item > i {
width: 32px;
color: #FFA500;
}
.resolve-List:last-child,
.resolve-Detail-Item:last-child {
margin-bottom: 0;
}
.overview-Suite {
padding: 32px 16px; 
}
.overview-Suite-Container {
margin: 0 auto; padding: 32px;
background-image: linear-gradient( 45deg, transparent 50%, rgba(0,0,0,.3) 50% );
border-radius: 4px;
color: #FFF;
}
.overview-Suite-Container > div {
max-width: 1432px;
margin: 0 auto;
}
#overview-ita .overview-Suite-Container {
background-color: rgba(127,149,177,.4);
}
#overview-SimpleMode .overview-Suite-Container {
background-color: rgba(127,149,177,.4);
}
#overview-oase .overview-Suite-Container {
background-color: rgba(127,212,214,.4);
}
#overview-epoch .overview-Suite-Container {
background-color: rgba(143,197,188,.4);
}
.overview-Suite-Title {
position: relative;
margin-bottom: 32px;
padding: 24px 380px 24px 32px;
border: 1px solid #FFF;
text-align: left;
line-height: 1.3;
letter-spacing: 0.05em;
font-size: 28px;
font-weight: bold;
color: #F2F4F7;
}
.overview-Suite-Title > span.detail {
display: inline-block;
font-size: 50%;
}
.overview-Suite-Type em {
color: #FF0;
}
#overview-ita .overview-Suite-Title {
background-color: #002B62;
background-image: linear-gradient( #264B7A 50%, #002B62 50% );
}
#overview-SimpleMode .overview-Suite-Title {
background-color: #002B62;
background-image: linear-gradient( #264B7A 50%, #002B62 50% );
}
#overview-oase .overview-Suite-Title {
background-color: #00A9AC;
background-image: linear-gradient( #26B6B8 50%, #00A9AC 50% );
}
#overview-epoch .overview-Suite-Title {
background-color: #1F8C78;
background-image: linear-gradient( #419D8C 50%, #1F8C78 50% );
}
.overview-Suite-Type {
position: absolute;
right: 32px;
top: 50%;
transform: translateY(-50%);
display: block;
width: 40%; height: 48px;
white-space: nowrap;
}
.overview-Suite-Type::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 rgb(0 0 0 / 60%);
transform: skewX(-10deg);
}
.overview-Suite-Type > 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: 24px;
}
#overview-ita .overview-Suite-Type::before {
background-color: #001E45;
}
#overview-oase .overview-Suite-Type::before {
background-color: #007678;
}
#overview-epoch .overview-Suite-Type::before {
background-color: #166254;
}
.overview-Suite-Body {
display: flex;
margin-bottom: 32px;
}
.overview-Suite-Body-en {
display: flex;
gap: 64px;
margin-bottom: 32px;
}
.overview-Suite-Body > div {
margin: 0px 32px 0px 32px;
width: 50%;
}
.overview-Suite-Body-en > div {
width: 50%;
}
.overview-Suite-Desc {
display: flex;
align-items: center;
}
.overview-Suite-Desc-Par {
margin: 24px 0;
line-height: 1.8;
font-size: 16px;
text-shadow: 0 0 8px #000000;
}
.overview-Suite-Desc-Hed {
margin: 48px 0px 24px 0px;
line-height: 1.5;
font-size: 24px;
font-weight: bold;
color: #FFA500;
text-shadow: 0 0 8px #000000;
text-align: center;
}
.overview-Suite-Desc-Hed-en {
margin: 24px 0;
line-height: 1.5;
font-size: 20px;
font-weight: bold;
color: #FFA500;
text-shadow: 0 0 8px #000000;
}
/* h5追加 */
.overview-Suite-Desc-Hed-h5 {
margin: 40px 0px 16px 0px;
line-height: 1.5;
font-size: 16px;
color: #FFFFFF;
text-shadow: 0 0 8px #000000;
text-align: center;
}
/* h5追加 end */
/* 注釈追加 */
.overview-Suite-Desc-Hed-note {
margin: 32px 0px 0px 0px;
line-height: 1.5;
font-size: 14px;
color: #FFFFFF;
text-shadow: 0 0 4px #000000;
text-align: center;
}
/* 注釈追加 end */
.overview-Suite-MainImage {
display: flex;
align-items: center;
}
/* 画像のアニメーション追加 */
#overvire .overview-Suite-MainImage ul {
position: relative;
width: 100%;
height: 100%;
}
#overvire .overview-Suite-MainImage li {
position: absolute;
display: block;
top: 0;
margin: 0;
animation: 9s linear infinite;
}
#overvire .overview-Suite-MainImage li:nth-child(1) {
animation-name: slideImage1;
z-index: 5;
position: relative;
}
#overvire .overview-Suite-MainImage li:nth-child(2) {
animation-name: slideImage2;
z-index: 4;
}
#overvire .overview-Suite-MainImage li:nth-child(3) {
z-index: 3;
}
@keyframes slideImage1 { 25% { opacity: 1; } 33.33333% { opacity: 0; } 91.66666% { opacity: 0; } 100% { opacity: 1; } }
@keyframes slideImage2 { 58.33333% { opacity: 1; } 66.66666% { opacity: 0; } 100% { opacity: 0; } }
/* 画像のアニメーション追加 end */
.overview-Suite-Footer {
padding: 32px 16px;
}
#overview-ita .overview-Suite-Footer {
padding-top: 48px;
}
.overview-Suite-Images-List {
display: flex;
gap: 32px;
width: 90%;
margin: 0 auto 64px;
}
.overview-Suite-Images-Item {
width: 100%;
border: 4px solid #F2F2f2;
box-shadow: 2px 2px 4px rgba(0,0,0,.5);
}
.overview-Suite-Detail-Link {
word-break: break-all;
letter-spacing: .025em;
line-height: 1.5;
text-align: center;
text-decoration: none;
font-family: 'Roboto', sans-serif;
color: #FFF;
}
.overview-Suite-Detail-Link > span {
position: relative;
z-index: 0;
overflow: hidden;
display: flex;
gap: 4px;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
padding: 12px;
background-color: #FFA500;
background-image: linear-gradient( rgba(0,0,0,0), rgba(0,0,0,.25) );
border-radius: 4px;
box-shadow: 0 2px 1px rgb(255 255 255 / 30%) inset, 8px 8px 4px rgb(0 0 0 / 40%);
transition-duration: .2s;
}
.overview-Suite-Detail-Link.hover > span {
transform: scale(.98);
background-image: linear-gradient( rgba(0,0,0,0), rgba(0,0,0,.2) );
}
.overview-Suite-Detail-List {
display: flex;
gap: 32px;
justify-content: space-around;
}
.overview-Suite-Detail-Item {
flex: 1 1 100%;
max-width: 50%;
}
.overview-Suite-Detail-Name {
font-size: 28px;
font-weight: bold;
}
.overview-Suite-Detail-Version {
font-weight: normal;
font-size: 70%;
}
.overview-Suite-Detail-Note {
display: block;
width: 100%;
border-top: 1px solid rgba( 255,255,255,.5 );
padding-top: 8px;
margin-top: 4px;
font-size: 16px;
}
/* 旧バージョンへのリンクボタンを追加 */
.overview-Suite-Detail-old-Link {
word-break: break-all;
letter-spacing: .025em;
line-height: 1.5;
text-align: center;
text-decoration: none;
font-family: 'Roboto', sans-serif;
color: #FFF;
}
.overview-Suite-Detail-old-Link > span {
position: relative;
z-index: 0;
overflow: hidden;
display: flex;
gap: 8px;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
padding: 12px;
border: 1px solid #FFF;
border-radius: 4px;
box-shadow: 0 2px 1px rgb(255 255 255 / 30%) inset, 4px 4px 2px rgb(0 0 0 / 40%);
transition-duration: .2s;
}
.overview-Suite-Detail-old-Link.hover > span {
transform: scale(.98);
 background-image: linear-gradient( rgba(0,0,0,0), rgba(0,0,0,.2) );
}
.overview-Suite-Detail-old-List {
display: flex;
gap: 24px;
justify-content: center;
}
.overview-Suite-Detail-old-Item {
flex: 1 1 100%;
max-width: 22%;
}
.overview-Suite-Detail-old-Note {
display: block;
width: 100%;
margin-top: 4px;
font-size: 16px;
}
/* 旧バージョンへのリンクボタンを追加　end */

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

.overview-Exastro-Title {
font-size: 6vw;
}
.overview-Exastro-Text {
font-size: 4vw;
}
.overview-Exastro-Exp > span {
font-size: 10px;
transform: translateY(2px);
}
.overview-Exastro-Eff {
margin-top: -48px;
padding: 48px 0 16px;
font-size: 3.6vw;
}
.overview-Exastro-Eff.suite {
font-size: 48px;;
}
.resolve-Title {
font-size: 32px;
}
.resolve-Container {
display: block;
max-width: 640px;
margin: 0 auto; padding: 0 16px;
}
.resolve-Container > div {
width: 100%;
}
.resolve-Desc {
margin-bottom: 32px;
}
.overview-Suite {
padding: 32px 0;
}
.overview-Suite-Container {
padding: 24px;
border-radius: 0;
}
.overview-Suite-Title {
padding: 16px 50% 16px 24px;
font-size: 3vw;
}
.overview-Suite-Title > em {
display: block;
font-size: 75%;
}
.overview-Suite-Type {
height: 40px;
}
.overview-Suite-Type > span {
font-size: 2.8vw;
}
.overview-Suite-Body {
display: block;
}
.overview-Suite-Body > div {
width: 100%;
}
.overview-Suite-MainImage-Img {
display: block;
width: 100%;
max-width: 640px;
margin: 0 auto;
}
.overview-Suite-Footer {
padding: 0 0 24px;
}
.overview-Suite-Images-List {
flex-wrap: wrap;
justify-content: center;
}
.overview-Suite-Images-Item {
width: calc( 50% - 16px );
border-width: 2px;
}
.overview-Suite-Detail-List {
display: flex;
flex-direction: column;
}
.overview-Suite-Detail-Item {
max-width: none;
}
.overview-Suite-Detail-Br {
display: none;
}

}

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

.overview-Exastro-Header {
padding: 64px 0 16px;
}
.overview-Exastro-Main {
display: block;
}
.overview-Exastro-Main > div {
width: 100%;
text-align: center;
}
.overview-Exastro-Image-Img {
width: 80%;
}
.overview-Exastro-Text {
padding: 0 16px 24px;
}
.resolve-Title {
font-size: 5vw;
}
.resolve-Name {
width: 25%;
font-size: 2.8vw;
}
.resolve-List {
margin-bottom: 32px;
}
.resolve-Item {
width: 75%;
padding-left: 16px;
font-size: 2.8vw;
}
.overview-Exastro-Eff.suite {
font-size: 6vw;
}
.overview-Suite {
padding: 24px 0;
}
.overview-Suite-Title {
padding: 16px 40% 16px 16px;
font-size: 4vw;
}
.overview-Suite-Type {
right: 16px;
height: 32px;
top: 30%;
transform-origin: right center;
transform: scale(.9);
}
.overview-Suite-Type::before {
border-width: 1px;
}
.overview-Suite-Desc-Par {
font-size: 2.6vw;
}
.overview-Suite-Desc-Hed {
font-size: 3vw;
}
.overview-Suite-Images-List {
width: 100%;
gap: 24px;
}
.overview-Suite-Images-Item {
width: calc( 50% - 12px );
}
.overview-Suite-Detail-Link {
font-size: 3vw;
}

}

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

.overview-Suite-Title {
padding-right: 30%;
}
.overview-Suite-Type {
top: 25%;
transform-origin: right center;
transform: scale(.7);
}
.overview-Suite-Detail-Link,
.overview-Suite-Desc-Par {
font-size: 12px;
}

}

/*
##################################################
   Home : 導入手順
##################################################
*/
.installation {
padding: 64px 16px 96px;
}
.installation-Container {
max-width: 1632px;
margin: 0 auto;
}
.installation-Title {
margin-bottom: 48px;
text-align: center;
font-size: 40px;
text-shadow: 0 0 8px #7F95B1, 0 0 16px #7F95B1, 0 0 24px #7F95B1, 0 0 32px #7F95B1;
color: #FFF;
}
.installation-List {
display: flex;
gap: 48px;
margin-bottom: 64px;
}
.installation-Item {
position: relative;
width: 100%;
padding: 0 16px 16px;
background-color: #6680A1;
background-image: linear-gradient( 45deg, transparent 50%, rgba(0,0,0,.12) 50% );
border: 4px solid #CCD5E0;
border-radius: 8px;
}
.installation-Item::after {
content: '';
display: block;
position: absolute;
right: -32px; top: 50%;
border: 16px solid #FFA500;
border-left-color: transparent;
border-bottom-color: transparent;
transform: translateY(-50%) rotate(45deg);
}
.installation-Item:last-child::after {
display: none;
}
.stepNumber {
width: 120px;
transform: translateY(-4px);
margin: 0 auto 32px; padding: 16px;
background-color: #002B62;
background-image: linear-gradient(#335581,#002B62);
text-align: center;
font-weight: bold;
font-size: 16px;
color: #FFF;
}
.stepTitle {
display: flex;
align-items: center;
justify-content: center;
min-height: 96px;
margin-bottom: 16px;
line-height: 1.5;
text-align: center;
font-weight: bold;
font-size: 20px;
color: #FFF;
}
.stepBody {
position: relative;
z-index: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 160px;
margin-bottom: 16px;
}
.stepImage::after {
content: '';
position: absolute;
left: 50%; top: 50%;
z-index: -1;
transform: translate(-50%,-50%);
width: 144px; height: 144px;
border: 4px solid rgba(255,255,255,.4);
border-radius: 50%;
background: #D4D6D8;
box-shadow: 4px 4px 0 2px rgba(0,0,0,.2);
}
.stepBody-Img {
display: block;
width: 80px;
margin: 0 auto;
opacity: .7;
}
.stepRemark {
display: flex;
align-items: center;
justify-content: center;
min-height: 64px;
padding: 0 16px;
background-color: rgba(299,230,71,1);
line-height: 1.5;
text-align: center;
font-weight: bold;
color: #002B62;
}
.stepDocList {
width: 100%;
}
.stepDocItem {
margin-bottom: 8px;
}
.stepDocLink {
display: flex;
padding: 8px 16px;
border-radius: 80px;
background-color: #28343B;
text-decoration: none;
letter-spacing: .75px;
color: #FFF;
}
.stepDocLink > i {
margin-left: auto;
transition-duration: .2s;
}
.stepDocLink.hover {
background-color: #394753;
}
.stepDocLink.hover > i {
transform: translateX(2px);
}
.opinion-Text {
margin-bottom: 24px;
line-height: 1.8;
text-align: center;
font-size: 32px;
color: #FFF;
}
.opinion-Link > span {
padding: 16px;
font-size: 32px;
}
.opinion-Ditail-List {
display: flex;
margin-bottom: 64px;
}
.opinion-Ditail-Item {
width: calc( 100% / 3 );
}

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

.installation-List {
flex-wrap: wrap;
justify-content: center;
max-width: 880px;
margin: 0 auto 64px; padding: 0 48px;
}
.installation-Item {
width: calc(100% / 3 - 32px );
}

}

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

.installation-List {
gap: 24px;
max-width: 640px;
margin: 0 auto 64px; padding: 0;
}
.installation-Item {
width: calc(100% / 2 - 24px );
}
.installation-Item::after {
display: none;
}
.opinion {
max-width: 640px;
margin: 0 auto;
}
.opinion-Text {
font-size: 22px;
}

}

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

.installation-Title {
font-size: 5.6vw;
}
.stepTitle {
min-height: 64px;
font-size: 3vw;
}
.stepDocLink,
.stepRemark {
font-size: 12px;
}
.stepDocLink {
padding-right: 8px;
}
.stepRemark {
min-height: 48px;
}
.opinion-Text {
font-size: 3.4vw;
}
.opinion-Link > span {
font-size: 5vw;
}
.opinion-Ditail-List {
flex-wrap: wrap;
gap: 8px;
}
.opinion-Ditail-Item {
width: 100%;
}

}

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

.stepTitle {
height: 48px;
}
.installation {
padding: 48px 0 64px;
}
.installation-List {
gap: 8px;
padding: 0 8px;
}
.installation-Item {
width: calc( 50% - 4px );
padding: 0 8px 8px;
}
.stepImage::after {
width: 120px; height: 120px;
}

}

/*
##################################################
   Home : FAQ
##################################################
*/
#faq {
padding: 96px 16px 120px;
background-color: #FFF;
}
#faq .homeSection-Title {
color: #001631;
}
.faq-Search {
display: flex;
width: 100%;
margin-bottom: 64px;
}
.faq-Search > div {
width: 50%;
padding: 16px;
}
.faq-Search-Category-Select {
width: 100%; height: 48px;
padding: 0 16px;
border: 1px solid #AAA;
font-size: 24px;
}
.faq-Search-Keyword-Input {
width: calc( 100% - 64px ); height: 48px;
padding: 0 16px;
border: 1px solid #AAA;
font-size: 24px;
}
.faq-Search-Keyword-Button {
display: inline-block;
width: 64px; height: 48px;
border: 1px solid #AAA;
border-left: none;
vertical-align: top;
cursor: pointer;
}
.faq-Q-List {
display: flex;
flex-wrap: wrap;
}
.faq-Q-Item {
width: calc( 100% / 3 );
padding: 32px;
}
.faq-Q-Link {
position: relative;
display: block;
height: 100%;
padding: 16px 16px 16px 32px;
background-color: #F2F2F2;
border-radius: 4px;
text-decoration: none;
line-height: 1.75;
font-size: 14px;
color: #002B62;
}
.faq-Q-Link:before {
content: 'Q';
display: block;
position: absolute;
left: -24px; top: -24px;
width: 48px; height: 48px;
background-color: #FF821E;
border-radius: 50%;
text-align: center;
line-height: 46px;
font-size: 24px;
font-weight: bold;
font-family: Arial, Helvetica, "sans-serif";
color: #FFF;
}
.faq-Ditail-List {
display: flex;
margin-bottom: 64px;
}
.faq-Ditail-Item {
width: calc( 100% / 2 );
}
#faq .goto-Link > span,
.goto-nolink > span {
padding: 24px;
font-size: 24px;
}

.faq-New {
margin-bottom: 64px;
}
.faq-New-List {
display: flex;
padding: 16px 0;
border-top: 1px solid #DDD;
line-height: 1.5;
}
.faq-New-List:last-child {
border-bottom: 1px solid #DDD;
}
.faq-New-Date {
white-space: nowrap;
font-weight: bold;
color: #666;
}
.faq-New-Cat {
padding: 0 16px;
white-space: nowrap;
}
.faq-Cat-txt {
display: block;
padding: 2px 8px 1px;
background-color: #CCC;
border-radius: 4px;
font-size: 80%;
color: #FFF;
}
.faq-Cat-ita {
background-color: #002B62;
}
.faq-New-Item {

}
.faq-Cat {
position: absolute;
left: 32px; top: -32px;
}

@media screen and ( max-width: 1200px ) {
.faq-Q-Item {
    width: calc( 100% / 2 );
}
}

@media screen and ( max-width: 640px ) {
#faq {
padding: 32px 8px;
}
.faq-Ditail-List {
flex-wrap: wrap;
gap: 8px;
}
.faq-Ditail-Item {
width: 100%;
}
.faq-New-List {
flex-wrap: wrap;
}
.faq-New-Date,
.faq-New-Cat {
width: 50%;
text-align: center;
}
.faq-New-Item {
margin-top: 8px;
}
.faq-Q-Item {
    width: 100%
}
}

@media screen and ( max-width: 480px ) {
}
/*
##################################################
   Home : Hand out
##################################################
*/
#handout {
background-color: #808080;
}
#handout::before,
#handout::after {
content: '';
position: absolute;
left: 0;
display: block;
width: 100%; height: 32px;
background-image: linear-gradient( 45deg,
rgba(0,0,0,0) 25%, rgba(0,0,0,.05) 25%, rgba(0,0,0,.05) 50%,
rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgba(0,0,0,.05) 75% );
background-size: 32px 32px;
}
#handout::before {
top: 0;
}
#handout::after {
bottom: 0;
}
#handout .homeSection-Title {
color: #FFF;
}
.handout-List {
display: flex;
justify-content: center;
width: 100%; max-width: 1080px;
margin: 0 auto;
}
.handout-Link {
display: flex;
flex-direction: column;
color: #333;
}
.handout-Link > div {
min-height: 0;
}
.handout-Text {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.handout-Title {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.handout-Download {
padding: 16px 24px;
background-color: rgba(0,0,0,.1);
text-align: center;
font-size: 12px;
}

/*
##################################################
   Message
##################################################
*/
.messageHeader,
.columnHeader {
display: flex;
max-width: 1200px;
margin: 0 auto; padding-bottom: 64px;
}
.messageHeader-Photo {
width: 50%;
padding: 32px 0 0;
text-align: center;
}
.messageHeader-Img {
max-width: 100%;
max-height: 400px;
}
.messageHeader-Text,
.columnHeader-Text {
display: flex;
flex-direction: column;
justify-content: center;
width: 50%;
padding: 32px;
font-family: 'Noto Sans JP', sans-serif;
}
.columnHeader-Text {
width: 100%;
padding: 96px 32px;
}
.messageHeader-Title,
.columnHeader-Title {
margin-bottom: 32px;
text-shadow: 2px 2px 2px rgba(0,0,0,1);
line-height: 1.3;
font-size: 40px;
font-weight: 700;
color: #FFF;
}
.columnHeader-Title {
margin: 0;
}
.messageHeader-Title > span {
display: block;
margin-bottom: 8px;
font-size: 70%;
}
.messageHeader-Posi {
margin-bottom: 12px;
line-height: 1.3;
font-size: 12px;
font-weight: 400;
color: #FFF;
}
.messageHeader-Name {
line-height: 1.3;
font-size: 24px;
font-weight: 400;
color: #FFF;
}
.messageHeader-Title,
.messageHeader-Posi,
.messageHeader-Name,
.columnHeader-Title {
text-shadow: 0 0 8px #7f95b1, 0 0 16px #7f95b1, 0 0 24px #7f95b1, 0 0 32px #7f95b1;
}

/*
   article
*/
#article .article-Body h2 {
clear: both;
position: relative;
margin: 2.5em 0 1.33em; padding-left: 16px;
line-height: 1.3;
letter-spacing: .75px;
font-size: 32px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
font-feature-settings: 'palt';
color: #002B62;
}
#article .article-Body h2:first-child {
margin-top: 0;
}
#article .article-Body h2::before {
position: absolute;
left: -32px;
content: '─';
opacity: .5;
}
#article .article-Body h3 {
margin: 2em 0 .33em;
line-height: 1.3;
letter-spacing: .75px;
font-size: 24px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
font-feature-settings: 'palt';
color: #FF640A;
}
#article .article-Body p {
margin: 1.6em 0;
line-height: 1.8;
letter-spacing: .75px;
text-indent: 1em;
text-align: justify;
font-size: 20px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
color: #555;
}
#article .article-Body h3 ~ p {
margin-top: 0;
}
#article .image img {
overflow: hidden;
padding: 8px;
background-color: #F2F2F2;
border: 1px solid #CCC;
border-radius: 4px;
box-shadow: 2px 2px 4px rgba(0,0,0,.3);
}
#article .article-Body .image {
width: 45%;
}
#article .article-Body .right {
float: right;
padding: 0 0 32px 32px;
}
#article .article-Body ul {
margin: 1.6em 0;
padding-left: 1.5em;
list-style: disc;
}
#article .article-Body li {
margin-bottom: .25em;
line-height: 1.8;
letter-spacing: .75px;
text-align: justify;
font-size: 20px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
color: #555;
}
#article .article-Body small {
font-size: 80%;
}

/*
   messageMenu-List
*/
.messageMenu-List {
display: flex;
flex-wrap: wrap;
gap: 32px;
}
.messageMenu-Item {
width: calc( 50% - 16px );
}
.messageMenu-Link {
display: flex;
gap: 24px;
height: 100%;
padding: 16px;
background-color: #FFF;
border-radius: 4px;
box-shadow: 0 0 8px 2px rgba(0,0,0,.1);
text-decoration: none;
transition-duration: .1s;
color: #333;
}
.messageMenu-Link.hover {
transform: scale(1.03);
}
.type-Exastro .messageMenu-Link.exastro,
.type-ITA .messageMenu-Link.ita,
.type-OASE .messageMenu-Link.oase,
.type-EPOCH .messageMenu-Link.epoch {
pointer-events: none;
transform: none!important;
cursor: default;
opacity: .3;
}
.messageMenu-Photo {
width: 30%;
}
.messageMenu-Img {
display: block;
max-width: 100%;
}
.messageMenu-Text {
display: flex;
flex-direction: column;
justify-content: center;
width: calc( 70% - 16px );
line-height: 1.2;
}
.messageMenu-Title {
margin-bottom: 16px;
font-size: 20px;
}
.messageMenu-Title > span {
display: block;
margin-bottom: 4px;
font-size: 75%;
}
.messageMenu-Posi {
margin-bottom: 6px;
font-size: 12px;
}
.messageMenu-Name {
font-size: 16px;
line-height: 1;
}

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

}

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

.messageHeader {
padding-bottom: 32px;
}
.messageHeader-Photo {
width: 40%;
}
.messageHeader-Text {
width: 60%;
padding: 0 24px;
}
.messageHeader-Title {
font-size: 4vw;
}
.messageHeader-Posi {
font-size: 10px;
}
.messageHeader-Name {
font-size: 2.6vw;
}
#article .article-Body h2 {
font-size: 3.2vw;
}
#article .article-Body h2::before {
left: -24px;
}
#article .article-Body h3 {
font-size: 2.6vw;
}
#article .article-Body p,
#article .article-Body li {
font-size: 2vw;
}
.messageMenu {
max-width: 640px;
margin: 0 auto;
}
.messageMenu-List {
gap: 24px;
}
.messageMenu-Item {
width: 100%;
}

}

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

.messageHeader {
padding-bottom: 24px;
}
.messageHeader-Title {
margin-bottom: 24px;
}
.messageHeader-Posi {
margin-bottom: 8px;
}
#article .article-Body h2 {
font-size: 18px;
}
#article .article-Body h2::before {
left: -12px;
}
#article .article-Body h3 {
font-size: 16px;
}
#article .article-Body p,
#article .article-Body li {
font-size: 12px;
}
#article .article-Body .right {
width: 100%;
float: none;
padding: 0;
}

}

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

.messageHeader-Title {
margin-bottom: 16px;
}
.messageMenu-Title {
font-size: 18px;
}
.messageMenu-Name {
font-size: 14px;
}

}

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

.messageMenu-Link {
gap: 12px;
}

}


/*
##################################################
   SNS area
##################################################
*/
#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: 960px ) {

#snsArea {
max-width: 640px;
margin: 0 auto;
padding: 16px;
}
#twitterTimeline {
margin-bottom: 16px;
}
#twitterTimeline,
#facebookTimeline {
width: 100%;
float: none;
padding: 0;
}
#twitterTimeline > div,
#facebookTimeline > div {
margin: 0 auto;
}

}

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

   Asset

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

.page-asset #articleTitle .background {
  background-image: url("/assets/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

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

.page-event #articleTitle .background {
  background-image: url("/assets/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

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

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

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


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

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




.page-newsroom #newsList .documentSet {
clear: both;
margin: 0;
padding-top: 16px;
}
.page-newsroom #newsList .documentSetInner {
}
.page-newsroom #newsList .documentSetMenu {
border-bottom: 1px solid #CCC;
}
.page-newsroom #newsList .documentSetMenuList {
display: inline-block;
margin: 0; padding: 0;
letter-spacing: -0.4em;
list-style: none;
}
.page-newsroom #newsList .documentSetMenuItem {
display: inline-block;
margin: 0; padding: 0;
border: none;
box-shadow: none;
letter-spacing: normal;
}
.page-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;
}
.page-newsroom #newsList .tabOpen .documentSetMenuLink {
background-color: #FFF;
border-bottom-color: #FFF;
}
.page-newsroom #newsList .documentSetMenuLink:hover {
background-color: #FFF;
text-decoration: none;
}
.page-newsroom #newsList .tabOpen .documentSetMenuLink:hover {
cursor: default;
}
.page-newsroom #newsList .documentSet .title {
padding-top: 8px;
line-height: 1.5;
font-weight: normal;
font-size: 1.1rem;
}
.page-newsroom #newsList .documentSet .title::after {
display: none;
}
.page-newsroom #newsList .documentSet .title a {
font-size: 1.1rem;
}
.page-newsroom #newsList .documentSetContent {
display: none;
padding: 16px;
background-color: #FFF;
border: 1px solid #CCC;
border-top: none;
}
.page-newsroom #newsList .documentSetContent.tabOpen {
display: block;
}
.page-newsroom #newsList .documentSet dt {

}
.page-newsroom #newsList .documentSet dd {

}


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

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

}/* /640px */




/*
column, message
*/
.columnAuthor,
.messageAuthor {
position: relative;
z-index: 0;
margin-bottom: 32px; padding: 16px;
background-color: #F2F2F2;
font-size: 16px;
}
.columnAuthor::after,
.messageAuthor::after {
content: '';
display: block;
clear: both;
}
.columnAuthor-Photo,
.messageAuthor-Photo {
float: left;
width: 180px; height: 180px;
}
.columnAuthor-Position,
.columnAuthor-Name,
.columnAuthor-Profile,
.messageAuthor-Position,
.messageAuthor-Name,
.messageAuthor-Profile {
margin-left: 196px;
line-height: 1.75;
}
.columnAuthor-Name,
.messageAuthor-Name {
margin: 8px 0 8px 196px;
font-size: 120%;
}


@media screen and (max-width: 960px) {
.columnMenu {
max-width: 640px;
margin: 0 auto;
}
}

@media screen and (max-width: 640px) {
.columnAuthor,
.messageAuthor {
font-size: 2.4vw;
}
.columnAuthor-Photo,
.messageAuthor-Photo {
width: 20%;
}
.columnAuthor-Position,
.columnAuthor-Name,
.columnAuthor-Profile,
.messageAuthor-Position,
.messageAuthor-Name,
.messageAuthor-Profile {
margin-left: calc( 20% + 16px );
}
.columnAuthor-Name,
.messageAuthor-Name {
margin: 8px 0;
margin-left: calc( 20% + 16px );
}

}







.supportList {
display: flex;
flex-wrap: wrap;
justify-content: right;
margin-top: -32px;
margin-bottom: 64px;
}
.supportItem {
width: calc( 100% / 4 );
padding: 16px;
}
.supportLink {
display: block;
padding: 12px 16px 16px;
background-color: #000;
background-image: url("../img/supportImage.png"),
linear-gradient( rgba( 255,255,255,.3 ), rgba( 255,255,255,.0 ) 50% ),
radial-gradient( at 50% 100%, #333A44, #123 );
background-position: right 4px, center, center;
background-size: contain;
background-repeat: no-repeat;
border: 4px solid #FFF;
box-shadow: 4px 4px 8px rgba( 0,0,0,.8 );
border-radius: 8px;
text-decoration: none;
font-weight: bold;
color: #FFF;
transition-duration: .2s;
}
.supportLink.hover {
background-position: right 0, center, center;
}
.supportName {
display: block;
width: 70%; height: 35px;
margin-bottom: 12px;
}
.supportText {
width: 70%;
text-align: center;
font-size: 16px;
color: rgba(299,230,71,.8);
}
.detailWrap {
display: inline-block;
margin-left: 8px;
padding: 4px 8px 3px;
background-color: rgba(299,230,71,.8);
border-radius: 4px;
vertical-align: 1px;
font-size: 80%;
font-weight: normal;
color: #28343B;
}
.supportLink.hover .supportText {
color: rgba(299,230,71,1);
}
.supportLink.hover .detailWrap {
background-color: rgba(299,230,71,1);
}

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

.supportList {
width: 800px;
margin-left: auto;
margin-right: auto;
}
.supportItem {
width: calc( 100% / 2 );
}

}

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

.supportList {
width: 100%;
max-width: 400px;
}
.supportItem {
width: 100%;
}

}


.youtubeEmbed {
overflow: hidden;
display: block;
position: relative;
z-index: 1;
width: 100%;
padding-bottom: 56.25%;
background-color: #000;
background-size: cover;
background-position: center center;
}
.youtubeEmbed.ready::after {
content: '';
display: block;
position: absolute;
z-index: 2;
width: 100%; height: 100%;
background-color: rgba( 0,0,0,.4 );
transition-duration: .2s;
}
.youtubeEmbed.ready::before {
content: '\f04b';
display: block;
position: absolute;
left: 50%; top: 50%;
z-index: 3;
transform: translate(-50%,-50%);
width: 80px; height: 80px;
background-color: rgba( 0,0,0,.4 );
border-radius: 50%;
text-align: center;
line-height: 80px;
font-family: 'Font Awesome 5 Free';
font-weight: bold;
font-size: 28px;
color: #FFF;
transition-duration: .2s;
}
.youtubeEmbed.ready:hover {
cursor: pointer;
}
.youtubeEmbed.ready:hover::after {
  opacity: .5;
}
.youtubeEmbed.ready:hover::before {
  transform: translate(-50%,-50%) scale(1.2);
}
.youtubeEmbed.loading:hover,
.youtubeEmbed.done:hover {
cursor: default;
}
.youtubeEmbed > div {
width: 100%; height: 100%;
}
.youtubeEmbed.loading {
background-image: none!important;
}
.youtubeEmbed > iframe {
position: absolute;
left: 0; top: 0;
z-index: 10;
}