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

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

   common.css for [ Exastro Community Site ]

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





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

   Reset Stylesheet

html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark

** -------------------------------------------------- */
article,aside,details,figcaption,figure,footer,header,hgroup,hr,menu,nav,section{display:block}a,hr{padding:0}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,summary,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}ins,mark{background-color:#ff9;color:#000}body{line-height:1}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;font-size:100%;vertical-align:baseline;background:0 0}ins{text-decoration:none}mark{font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{height:1px;border:0;border-top:1px solid #ccc;margin:1em 0}input,select{vertical-align:middle}*,::after,::before{box-sizing:border-box}
/* -------------------------------------------------- **

   Initialized

** -------------------------------------------------- */
html,body {
min-height: 100vh;
}
body {
background-color: #000;
font-size: 10px;
font-family: 'メイリオ', Meiryo,'Osaka','ＭＳ Ｐゴシック','MS PGothic','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
}
#container {
position: relative;
min-width: 320px; min-height: 100vh;
}
main {
display: block;
transition-duration: 0.3s;
}
/* タッチ時のハイライトを消す */
.touch {
-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
cursor: pointer;
}

.loadWait *,
.loadWait *::after,
.loadWait *::before {
  animation: none!important;
  transition-duration: 0s!important;
}
.loadWait body { overflow: hidden; }
.loadWait header,
.loadWait #contentsMenu,
.loadWait #topMove { opacity: 0; }

#loading {
overflow-y: hidden;
display: none;
position: fixed;
left: 0; top: 0;
z-index: 29999;
width: 100%; height: 100%;
background-color: rgba( 255,255,255,1 );
background-image: linear-gradient( rgba( 0,0,0,0.9 ) 50%, transparent 50% ),radial-gradient( #666, #000 );
background-size: 2px 2px, 100% 100%;
will-change: transform opacity;
}
@keyframes loading {
0% { opacity: 0; }
100% { opacity: 1; }
}
#loading::before {
content: 'Loading Exastro';
white-space: nowrap;
display: block;
position: fixed;
left: 50%; top: 50%;
z-index: 2;
transform: translate(-50%,-50%);
margin-top: -48px;
margin-right: -0.8em;
letter-spacing: 0.8em;
text-shadow: 0 0 16px #000;
font-family: Consolas, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
font-size: 14px;
color: #FFF;
animation: loadingText 0.2s linear infinite !important;
}
@keyframes loadingText {
0% { opacity: 0.5; transform: translate(-50%,-50%) skewX(10deg); }
25% { transform: translate(-50%,-50%) skewX(-10deg); }
50% { opacity: 1; transform: translate(-50%,-50%) skewX(10deg); }
75% { transform: translate(-50%,-50%) skewX(-10deg); }
100% { opacity: 0.5; transform: translate(-50%,-50%) skewX(10deg); }
}
#loading::after {
content: '';
display: block;
position: fixed;
left: 50%; top: 50%;
z-index: 1;
transform: translate(-50%,-50%);
width: 50%; height: 16px;
max-width: 640px;
background-color: #111;
background-image: linear-gradient( 90deg, transparent, #111 25%, #111 75%, transparent ),
linear-gradient( 90deg, #8599B4 50%, transparent 50% );
background-position: 200% 0, 0 0;
background-size: 200% 32px, 4px 4px;
border: 2px solid #000;
border-radius: 32px;
box-shadow: 0 0 0 2px #3D5E88, 0 0 32px rgba( 0,0,0,0.9 );
animation: loadingBarBack 1s linear infinite !important;
}
@keyframes loadingBarBack {
0% { background-position: 200% 0, 0 0; }
50% { background-position: 100% 0, 0 0; }
100% { background-position: 200% 0, 0 0; }
}
.loadStart #loading {
display: block;
}
.loadCompleat #loading {
animation: loadingCompleat 0.8s linear forwards !important;
}
.loadCompleat #loading::before {
content: 'Complete!';
animation: none!important;
color: #60C60D;
}
@keyframes loadingCompleat {
0% { opacity: 1; }
50% { opacity: 1; transform: scale(1); filter: blur( 0 ); }
100% { opacity: 0; transform: scale(2); filter: blur( 10px ); }
}

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

   Go to TOP

** -------------------------------------------------- */
#topMove {
position: fixed;
bottom: -64px; right: 8px;
z-index: 9999;
width: 48px; height: 48px;
line-height: 48px;
transition-duration: 0.3s;
}
#topMove a {
display: block;
width: 100%; height: 100%;
background-color: #333;
border-radius: 4px;
box-shadow: 0 0 1px 2px rgba( 255,255,255,0.8 );
text-align: center;
vertical-align: bottom;
font-size: 24px;
color: #FFF;
}
#topMove a.hover {
background-color: #4D4D4D;
}
#topMove a span {
display: none;
}
#topMove a i {
transition-duration: 0.3s;
line-height: inherit;
}
#topMove a.hover i {
transform: translateY(-2px);
}
/* -------------------------------------------------- **

   Header

** -------------------------------------------------- */
header {
position: fixed;
top: 0; left: 0;
z-index: 9999;
width: 100%; max-height: 100vh;
padding: 0 16px 0 0;
background-color: #333;
font-family: 'Roboto', sans-serif;
transition-duration: 0.3s;
}
#header::after {
content: '';
display: block;
clear: both;
}
#titleArea {
float: left;
height: 40px;
display: table;
}
#logo,
#mainTitle {
display: table-cell;
padding: 0 4px 0 16px;
vertical-align: middle;
}
#mainTitle {
padding: 1px 16px 0 4px;
}
#mainTitle img {
height: 18px;
vertical-align: -2px;
}
#logo a {
transition-duration: 0.3s;
}
#mainTitle a {
letter-spacing: 0.05em;
text-decoration: none;
font-size: 20px;
font-weight: 900;
color: #FFF;
transition-duration: 0.3s;
}
#logo a:hover,
#mainTitle a:hover {
opacity: 0.7;
}
#logo img {
width: auto; height: 28px;
margin: 2px 0;
vertical-align: bottom;
}
#suiteList {
overflow: hidden;
display: none;
position: fixed;
top: 48px; left: 8px;
z-index: 100;
border: 1px solid #CCC;
border-radius: 4px;
box-shadow: 0 2px 8px rgba( 0,0,0,0.2 );
}
#suiteList li {
border-bottom: 1px solid #CCC;
}
#suiteList li:last-child {
border-bottom: none;
}
#suiteList a,
#suiteList span {
display: block;
position: relative;
padding: 16px 48px 16px 24px;
background-color: #FFF;
text-decoration: none;
white-space: nowrap;
font-size: 150%;
color: #333;
letter-spacing: 0.05em;
line-height: 1;
transition-duration: 0.3s;
}
#suiteList span {
background-color: #EFEFEF;
color: #999;
cursor: default;
}
#suiteList a:hover {
background-color: #F8F8F8;
}
#suiteList a::after {
content: '\f138';
position: absolute;
display: inline-block;
right: 24px;
font-family: 'Font Awesome 5 Free';
font-weight: bold;
color: #002B62;
transition-duration: 0.3s;
}
#suiteList a:hover::after {
right: 20px;
}
.exastro #suiteList .exastro a,
.ita #suiteList .ita a,
.oase #suiteList .oase a,
.epoch #suiteList .epoch a {
color: #666;
cursor: default;
}
.exastro #suiteList .exastro a::after,
.ita #suiteList .ita a::after,
.oase #suiteList .oase a::after,
.epoch #suiteList .epoch a::after {
content: '\f00c';
color: #60C60D;
}
.exastro #suiteList .exastro a:hover,
.ita #suiteList .ita a:hover,
.oase #suiteList .oase a:hover,
.epoch #suiteList .epoch a:hover {
background-color: #FFF;
}
.exastro #suiteList .exastro a:hover::after,
.ita #suiteList .ita a:hover::after,
.oase #suiteList .oase a:hover::after,
.epoch #suiteList .epoch a:hover::after {
right: 24px;
}


/* Main Menu */
nav {
white-space: nowrap;
}
#mainMenu {
display: inline-block;
letter-spacing: -0.4em;
border-left: 1px solid #262626;
border-right: 1px solid #404040;
}
#mainMenu li {
letter-spacing: normal;
display: inline-block;
border-right: 1px solid #262626;
border-left: 1px solid #404040;
line-height: 32px;
font-size: 16px;
}
#mainMenu li.sp {
display: none;
}
#mainMenu a {
display: block;
padding: 4px 16px;
text-decoration: none;
color: #FFF;
font-weight: 900;
}
#mainMenu a:hover {
background-color: #4D4D4D;
}
#article.newsroom #mainMenu a.newsroom,
#article.asset #mainMenu a.asset,
#website.home #mainMenu a.home,
#article.overview #mainMenu a.overview,
#article.learn #mainMenu a.learn,
#article.webinar #mainMenu a.webinar,
#article.case #mainMenu a.case,
#article.documents #mainMenu a.documents,
#article.reference #mainMenu a.reference,
#article.downloads #mainMenu a.downloads,
#article.install #mainMenu a.install,
#article.faq #mainMenu a.faq {
background-color: #000;
text-shadow: none;
}
#article.newsroom #mainMenu a.newsroom:hover,
#article.asset #mainMenu a.asset:hover,
#website.home #mainMenu a.home:hover,
#article.overview #mainMenu a.overview:hover,
#article.learn #mainMenu a.learn:hover,
#article.webinar #mainMenu a.webinar:hover,
#article.case #mainMenu a.case:hover,
#article.documents #mainMenu a.documents:hover,
#article.reference #mainMenu a.reference:hover,
#article.downloads #mainMenu a.downloads:hover,
#article.install #mainMenu a.install:hover,
#article.faq #mainMenu a.faq:hover {
cursor: default;
box-shadow: none;
}
#mainMenu a i {
display: inline-block;
width: 20px;
text-align: center;
margin-right: 0.5em;
color: #AAA;
}
#mainMenu a span {
font-size: 90%;
}
/* SNS Menu */
#subMenu {
float: right;
border-left: 1px solid #262626;
border-right: 1px solid #404040;
letter-spacing: -0.4em;
}
#subMenu li {
position: relative;
letter-spacing: normal;
display: inline-block;
border-right: 1px solid #262626;
border-left: 1px solid #404040;
line-height: 32px;
font-size: 24px;
}
#subMenu a,
#subMenu span.subMenuPlus {
display: block;
padding: 4px 12px;
text-align: center;
text-decoration: none;
color: #FFF;
text-shadow: 0 0 4px #000;
cursor: pointer;
transition-duration: 0.3s;
}
#subMenu a:hover,
#subMenu span.subMenuPlus.hover {
background-color: #4D4D4D;
box-shadow: 0 0 4px 0 #000 inset;
}
#subMenu a i,
#subMenu span i {
display: inline-block;
width: 22px;
text-align: center;
}
#subMenu a + span,
#subMenu span.subMenuPlus + span {
display: block;
position: absolute;
left: 50%; top: 100%;
transform: translateX(-50%);
padding: 4px 16px;
background-color: #FFF;
border-radius: 4px;
color: #333;
opacity: 0;
pointer-events: none;
transition-duration: 0.3s;
line-height: 1.1;
font-size: 14px;
box-shadow: 0 0 8px rgba( 0, 0, 0, 0.3 );
font-weight: 900;
}
#subMenu a:hover + span,
#subMenu span.subMenuPlus.hover + span {
top: 110%;
opacity: 1;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#subMenu a + span:before,
#subMenu span.subMenuPlus + span:before {
content: '';
position: absolute;
left: 50%; top: -8px;
margin-left: -4px;
border: 4px solid transparent;
border-bottom: 4px solid #FFF;
}
#subMenu span.subMenuPlus.open {
color: #FF833B;
text-shadow: none;
}
#subMenu span.subMenuPlus.open + span,
#subMenu span.subMenuPlus.open + span:before {
display: none;
}
#menuBtn {
display: none;
}
/* language menu */
#shareMenu,
#languageMenu{
display: none;
padding: 8px;
text-align: right;
}
#shareMenu.open,
#languageMenu.open {
display: block;
border-top: 1px solid #262626;
}
#shareMenu li,
#languageMenu li {
display: inline-block;
padding: 4px 0 3px;
line-height: 1.2;
font-size: 12px;
}
#shareMenu li::after,
#languageMenu li::after {
content: '|';
display: inline-block;
padding: 0 1em;
color: #CCC;
}
#shareMenu li:last-child::after,
#languageMenu li:last-child::after {
display: none;
}
#shareMenu span {
padding-left: 0.5em;
}
#languageMenu span {
font-weight: bold;
color: #FF833B;
}
#shareMenu a,
#languageMenu a {
color: #FFF;
text-decoration: none;
}
#shareMenu a:hover,
#languageMenu a:hover {
color: #CCC;
}

header.snsHide {
padding: 0;
}
header.snsHide #header {
position: relative;
}
header.snsHide #menuBtn {
display: block;
position: absolute;
right: 0; top: 0;
width: 40px; height: 40px;
background-color: #333;
cursor: pointer;
overflow: hidden;
transition-duration: 0.3s;
}
header.snsHide #menuBtn span,
header.snsHide #menuBtn::after,
header.snsHide #menuBtn::before {
display: block;
position: absolute;
left: 8px; top: 19px;
width: 24px; height: 1px;
background-color: #EFEFEF;
transition-duration: 0.3s;
}
header.snsHide #menuBtn.hover,
.open #menuBtn.hover {
background-color: #404040;
box-shadow: 0 0 4px 0 rgba(0,0,0,0.6) inset;
}
header.snsHide #menuBtn.hover span,
header.snsHide #menuBtn.hover::after,
header.snsHide #menuBtn.hover::before {
opacity: 0.65;
}
header.snsHide #menuBtn::after,
header.snsHide #menuBtn::before {
content: '';
top: 11px;
transform-origin: left top;
}
header.snsHide #menuBtn::before {
top: auto; bottom: 12px;
transform-origin: left bottom;
}
header.snsHide.open #menuBtn {
background-color: #4D4D4D;
box-shadow: 0 0 4px 0 rgba(0,0,0,0.6) inset;
}
header.snsHide.open #menuBtn span {
left: -100%;
opacity: 0;
}
header.snsHide.open #menuBtn::after,
header.snsHide.open #menuBtn::before {
left: 12px;
}
header.snsHide.open #menuBtn::after {
top: 12px;
transform: rotate( 45deg );
}
header.snsHide.open #menuBtn::before {
bottom: 11px;
transform: rotate( -45deg );
}
header.snsHide #shareMenu.open,
header.snsHide #languageMenu.open {
display: none;
}
header.snsHide.open #shareMenu.open,
header.snsHide.open #languageMenu.open {
display: block;
}
header.snsHide #subMenu {
float: none;
display: none;
clear: both;
width: 100%;
padding-top: 8px;
border: none;
border-top: 1px solid #262626;
text-align: right;
}
header.snsHide #subMenu li {
border: none;
padding: 4px 8px 8px;
text-align: center;
}
header.snsHide #subMenu a,
header.snsHide #subMenu span.subMenuPlus {
padding: 4px;
line-height: 1.1;
}
header.snsHide #subMenu span.subMenuPlus.open + span {
display: block;
position: relative;
color: #FF833B;
}
header.snsHide #subMenu span.subMenuPlus.open + span::after {
display: block;
content: '';
position: absolute;
left: 50%; bottom: -16px;
margin-left: -4px;
border: 4px solid transparent;
border-top: 4px solid #FF833B;
}
header.snsHide #subMenu a.hover,
header.snsHide #subMenu a.hover + span,
header.snsHide #subMenu span.subMenuPlus.hover,
header.snsHide #subMenu span.subMenuPlus.hover + span,
header.snsHide #subMenu span.subMenuPlus.open.hover + span {
background: none;
box-shadow: none;
color: #CCC;
}
header.snsHide #subMenu a + span,
header.snsHide #subMenu span.subMenuPlus + span {
position: static;
top: auto; left: auto;
opacity: 1;
transform: none;
padding: 0;
background: none;
box-shadow: none;
color: #FFF;
font-weight: 400;
font-size: 10px;
}
header.snsHide #subMenu span::before,
header.snsHide #subMenu span::after {
display: none;
}
header.snsHide.open #subMenu {
display: block;
}
header.snsHide.open #shareMenu,
header.snsHide.open #languageMenu {
border: none;
}

header.menuHide {
padding: 0;
overflow: auto;
}
header.menuHide #header nav {
clear: both;
}
header.menuHide #mainMenu {
float: none;
display: none;
width: 100%;
border: none;
border-bottom: 1px solid #404040;
border-top: 1px solid #262626;
}
header.menuHide #mainMenu li {
display: block;
width: 100%;
border: none;
border-bottom: 1px solid #262626;
border-top: 1px solid #404040;
}
header.menuHide #mainMenu li.sp {
display: block;
}
header.menuHide #mainMenu a {
padding: 4px 16px;
}
header.menuHide #mainMenu a i {
display: inline-block;
width: 2em;
text-align: center;
}
header.menuHide #mainMenu a span {
font-size: 100%;
letter-spacing: 0.05em;
}
header.menuHide.open #mainMenu {
display: block;
}
header.menuHide #subMenu {
padding: 8px 0;
border: none;
text-align: center;
}
header.menuHide #shareMenu,
header.menuHide #languageMenu {
padding: 0 24px 8px;
}

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

#loading::before {
font-size: 11px;
}
#loading::after {
width: 75%; height: 16px;
}

}/* /640px */

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

#logo {
padding: 0 4px 0 8px;
}
#logo img {
height: 24px;
}
#suiteList {
width: calc( 100% - 16px );
}
#suiteList a,
#suiteList span {
font-size: 4vw;
}
#mainTitle a {
font-size: 18px;
}

}

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

   Footer

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

footer {
width: 100%;
background: url("../img/footer_background.png") right center no-repeat #333;
background-size: contain;
}
#footerInner {
display: table;
width: 100%;
max-width: 980px;
margin: 0 auto; padding: 16px 0;
border-bottom: 1px solid #262626;
}
#footerMenu {
display: table-cell;
width: 70%;
padding: 32px 16px;
border-left: 1px solid #404040;
vertical-align: middle;
text-align: center;
}
#footerMenu a {
display: inline-block;
text-decoration: none;
font-size: 16px;
font-family: 'Roboto', sans-serif;
color: #FFF;
}
#footerMainMenu {
display: inline-block;
text-align: left;
list-style: none;
}
#footerMainMenu > li {
padding: 8px 16px;
border-top: 1px solid #404040;
border-bottom: 1px solid #262626;
}
#footerMainMenu > li:first-child {
padding-top: 0;
border-top: none;
}
#footerMainMenu > li:last-child {
padding-bottom: 0;
border-bottom: none;
}
#footerMainMenu .footerMainMenuChildren {
list-style: none;
}
#footerSubMenu {
letter-spacing: -0.4em;
text-align: center;
}
#footerMainMenu {
margin-bottom: 32px;
}
#footerMainMenu .footerMainMenuHome {
margin-bottom: 12px;
}
#footerMainMenu .footerMainMenuChildren,
#footerMainMenu .footerMainMenuChildren li,
#footerSubMenu li {
letter-spacing: normal;
display: inline-block;
}
#footerMainMenu .footerMainMenuChildren li {
margin: 8px 0;
}
#footerMainMenu a {
text-shadow: 1px 1px 1px #000;
letter-spacing: 0.05em;
}
#footerMainMenu .footerMainMenuHome a {
padding-right: 0.5em;
border-right: 1px solid #666;
font-weight: 900;
}
#footerMainMenu .footerMainMenuChildren a {
margin-left: 1em;
}
#footerMenu a:hover {
color: #CCC;
}
#footerSubMenu li {
padding: 0 16px;
}
#footerSubMenu a {
padding: 0;
font-size: 48px;
font-weight: normal;
}
#footerSubMenu span {
display: none;
}
#footerMainMenu a img {
width: auto; height: 16px;
vertical-align: middle;
}
#footerMainMenu a:hover img {
opacity: 0.8;
}
#footerAbout {
display: table-cell;
width: 30%;
padding: 16px 32px;
border-right: 1px solid #262626;
vertical-align: top;
}
#footerLogo {
margin-bottom: 24px;
text-align: center;
}
#footerLogo img {
width: 200px; height: auto;
}
#footerAbout p {
line-height: 2;
text-align: left;
font-size: 13px;
color: #FFF;
}
#footerAbout p br {
display: none;
}
#footerShareMenu {
margin: 16px 0 0;
text-align: center;
font-family: 'Roboto', sans-serif;
}
#footerShareMenu dl {
display: inline-block;
margin: 0 auto;
border: 1px solid #AAA;
border-radius: 80px;
overflow: hidden;
}
#footerShareMenu dt,
#footerShareMenu dd,
#footerShareMenu li {
display: inline-block;
padding: 0 1em;
font-size: 14px;
}
#footerShareMenu dt {
padding: 8px 16px;
background-color: #AAA;
color: #333;
}
#footerShareMenu a {
color: #FFF;
text-decoration: none;
letter-spacing: 0.05em;
font-size: 14px;
}
#footerShareMenu a:hover {
color: #CCC;
}
#footerShareMenu i {
padding-right: 0.5em;
}
#copyright {
width: 100%;
max-width: 980px;
margin: 0 auto; padding: 8px 16px;
border-top: 1px solid #404040;
}
#copyright p {
line-height: 2.5;
text-align: center;
font-size: 12px;
color: #FFF;
}

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

footer #footerInner {
display: block;
}
footer #footerAbout {
display: block;
width: 100%; max-width: 480px;
margin: 0 auto; padding: 0 16px 16px;
border: none;
text-align: center;
}

#footerMenu {
display: block;
width: 100%;
border: none;
}
#footerMainMenu {
width: 100%;
max-width: 560px;
margin: 0 auto 48px;
}
#footerMainMenu .footerMainMenuHome {
padding: 8px 0;
}

} /* / 1024px */

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

footer #footerAbout p {
text-align: center;
}
footer #footerAbout p br,
footer #officialName br {
display: block;
}
footer #copyright p {
padding-right: 60px;
line-height: 1.5;
}
#footerSubMenu a {
font-size: 10vw;
}
footer #officialName {
text-align: center;
}
footer #officialName strong {
display: inline-block;
}
footer #footerShareMenu a span {
display: none;
}
#footerMainMenu > li {
text-align: center;
}
#footerMainMenu .footerMainMenuHome {
display: block;
padding-bottom: 12px;
}
#footerMainMenu .footerMainMenuHome a {
border: none;
}
#footerMainMenu .footerMainMenuChildren a {
margin: 0; padding: 0 4px;
font-size: 2.8vw;
}

} /* /640px */

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

   Other

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


#articleBody h3.toggleHeading {
position: relative;
margin: 16px 0;
padding-right: 48px;
}
#articleBody h3.toggleHeading::after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f078";
position: absolute;
right: 16px; top: 50%;
transform: translateY(-50%);
transition-duration: 0.2s;
font-size: 60%;
color: #FFEE00;
}
#articleBody h3.toggleHeading:hover {
cursor: pointer;
background-color: #194072;
background-image: none;
}
#articleBody h3.toggleHeading:hover::after {
transform: translateY(-35%);
}
#articleBody h3.toggleHeading.open::after {
transform:  translateY(-50%) scaleY(-1);
color: #FFFFFF;
}
#articleBody h3.toggleHeading.open:hover::after {
transform:  translateY(-65%) scaleY(-1);
}
#articleBody div.toggleText {
display: none;
margin: 24px 0 0;
}
#articleBody div.toggleText p:first-of-type {
margin-top: 0;
}
#articleBody div.toggleText p:last-child {
margin-bottom: 0;
}
#articleBody div.toggleText::after {
content: '';
clear: both;
display: block;
}
#overlay {
display: none;
}

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

.overlay {
overflow: hidden;
}
#overlay {
display: block;
opacity: 0;
position: fixed;
left: 0; top: 0;
z-index: -1;
width: 100vw; height: 100vh;
background-color: rgba( 0, 0, 0, 0.6 );
transition-duration: 0.2s;
}
.overlay #overlay {
opacity: 1;
z-index: 999;
}

} /* /640px */

@media screen and (max-width: 896px) and (max-height: 414px) and (orientation: landscape) {

#startArea h1 {
max-width: 320px;
margin: 0 auto;
}
#startArea p {
font-size: 10px;
}
#startArea #startMenu a {
padding: 8px 16px;
font-size: 10px;
}

}

@media screen and (max-width: 640px) and (max-height: 320px) and (orientation: landscape) {
.open #mainMenu {
white-space: normal;
}
.open #mainMenu li {
display: inline-block;
width: 50%;
}

}


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

   Content

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

/* #articleTitle */
#articleTitle {
position: relative;
padding-top: 40px;
height: 360px;
}
.loadWait #articleTitle .background {
opacity: 0;
}
#articleTitle .background {
content: attr(backgroundimage);
display: block;
width: 100%; height: calc( 100% - 40px );
position: absolute;
top: 40px; left: 0;
z-index: -1;
background: center center no-repeat #000;
background-size: cover;
transform: translate3d(0,0,0);
animation: titleBackground 0.5s;
}
@keyframes titleBackground {
  0% { opacity: 0; }
100% { opacity: 1; }
}

#website.index #articleTitle .background::before {
content: '';
position: absolute;
top: 0; left: 0;
display: block;
width: 100%; height: 100%;
background: center center no-repeat;
background-size: cover;
}
#website.index #articleTitle .backgroundMonitor {
display: block;
width: 100%;
height: calc( 100% - 40px );
position: absolute;
top: 40px;
left: 0;
z-index: -1;
}
#website.index #articleTitle .backgroundMonitor .monitor {
display: block;
position: absolute;
left: 52.447%; top: 0;
width: 41.666%; height: 100%;
background: center center no-repeat;
}
#website.index #articleTitle .backgroundMonitor .monitor div {
position: relative;
width: 100%; height: 100%;
}
#website.index #articleTitle .backgroundMonitor .monitor ul {
position: absolute;
left: 0; top: calc( 50% + 20px );
width: 100%;
margin: 0;
padding-bottom: 75%;
transform: translateY(-50%);
}
#website.index #articleTitle .backgroundMonitor .monitor ul::after {
content: '';
display: block;
overflow: hidden;
position: absolute;
top: 0; left: 0;
z-index: 10;
width: 100%; height: 100%;
background-size: cover;
}
#website.index #articleTitle .backgroundMonitor .monitor li {
position: absolute;
display: block;
top: 4.5%; left: 3.1875%;
width: 93.625%; height: 71.5%;
margin: 0;
animation: 9s linear infinite;
background: center center no-repeat;
background-size: contain;
box-shadow: 0 0 64px rgba( 0,0,0,0.3 ) inset; 
}

#website.index #articleTitle .backgroundMonitor .monitor ul::before {
content: '';
position: absolute;
display: block;
top: 4.5%; left: 3.1875%;
z-index: 20;
width: 93.625%; height: 71.5%;
background: linear-gradient( #000 50%, #333 50%);
background-size: 4px 4px;
opacity: 0.1;
animation: monitorAnimation 0.1s linear infinite;
}
@keyframes monitorAnimation {
0% { background-position: 0 0; }
100% { background-position: 0 -4px; }
}

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

  #website.index #articleTitle .background::before,
  #website.index #articleTitle .backgroundMonitor {
    display: none;
  }

}

#articleTitle section {
display: table;
width: 100%; height: 100%;
max-width: 1200px;
margin: 0 auto;
}
#articleTitle section .sectionInner {
display: table-cell;
padding: 0 24px;
vertical-align: middle;
}
#articleTitle h1 {
font-size: 48px;
font-weight: 900;
color: #FFF;
font-family: 'Roboto', sans-serif;
text-shadow: 0 0 8px rgba( 0, 0, 0, 0.6 );
}
#articleTitle h1 small {
display: block;
font-size: 60%;
}
#articleTitle h1 small ~ br {
display: none;
}
#articleTitle p {
margin-top: 0.8em;
line-height: 1.5;
font-size: 16px;
color: #FFF;
text-shadow: 0 0 3px rgba( 0, 0, 0, 0.8 );
}
#articleTitle ul {
margin-top: 32px;
letter-spacing: -0.4em;
}
#articleTitle li {
display: inline-block;
margin-right: 16px;
min-width: 200px;
letter-spacing: normal;
}
#articleTitle li:last-child {
margin-right: 0;
}
#articleTitle li a {
display: block;
padding: 8px;
background-color: rgba( 0,0,0,0.2 );
border: 1px solid #FFF;
text-align: center;
text-decoration: none;
font-size: 16px;
color: #FFF;
transition-duration: 0.3s;
}
#articleTitle li:first-child a {
background-color: #002B62;
border-color: #002B62;
}
#articleTitle li a.hover {
background-color: rgba( 0,0,0,0.4 );
}
#articleTitle li:first-child a.hover {
background-color: #194072;
}

/* #articleBody */
#articleBody nav {
position: sticky;
top: 40px;
z-index: 9998;
background-color: #FFF;
box-shadow: 0 0 8px rgba( 0,0,0,.2 );
text-align: center;
transition-duration: 0.3s;
transition-property: opacity;
}
#articleBody nav ul {
display: inline-block;
min-width: 980px;
margin: 0 auto; padding: 0;
text-align: left;
vertical-align: top;
letter-spacing: -0.4em;
white-space: normal;
}
#articleBody nav ul li {
display: inline-block;
margin: 0;
letter-spacing: normal;
text-align: center;
}
#articleBody nav ul li:first-child {
border-left: 1px solid #EFEFEF;
}
#articleBody nav a,
#articleBody nav span {
display: block;
padding: 16px 32px;
border-right: 1px solid #EFEFEF;
vertical-align: bottom;
text-decoration: none;
font-size: 12px;
color: #888;
}
#articleBody nav a.hover,
#articleBody nav span.hover {
background-color: #EFEFEF;
}
#articleBody nav a i,
#articleBody nav span i {
width: 1.2em;
display: inline-block;
text-align: center;
transition-duration: 0.3s;
}
#articleBody nav a.hover i {
transform: translateY( 2px );
}
#articleBody nav span.hover i {
opacity: 0.5;
}
#articleBody nav .toggleMenu {
position: relative;
}
#articleBody nav .toggleMenu ul {
display: none;
}
#articleBody nav .toggleMenu ul.open {
position: fixed;
top: 0; left: 0;
z-index: 10000;
width: auto; min-width: auto;
padding: 8px 0;
background-color: #FFF;
background-size: 8px 8px;
border: 1px solid #DDD;
border-radius: 4px;
box-shadow: 0 0 8px rgba( 0,0,0,0.1 );
}
#articleBody nav .toggleMenu ul.open.over {
left: auto!important;
right: 4px;
}
#articleBody nav .toggleMenu ul.open li {
display: block;
border: none;
background-color: #FFF;
}
#articleBody nav .toggleMenu ul.open li a {
padding: 12px 24px;
border: none;
border-top: 1px solid #EFEFEF;
white-space: nowrap;
text-align: left;
}
#articleBody nav .toggleMenu ul.open li:last-child a {
border-bottom: 1px solid #EFEFEF;
}




#articleBody {
background: url("../img/content_back.png");
font-size: 16px;
line-height: 1.75;
}
#articleBody::after {
content: '';
display: block;
clear: both;
}
#articleBody section {
padding: 48px 16px;
}
#articleBody section.iframe {
padding: 0;
}
#articleBody section:nth-of-type( even ) {
background-color: rgba( 0, 43, 98, 0.05 );
}
#articleBody .sectionInner {
max-width: 980px;
margin: 0 auto;
}
#articleBody section.iframe .sectionInner {
max-width: none;
}
#articleBody iframe {
width: 100%;
vertical-align: bottom;
}
#articleBody .sectionInner::after {
content: '';
display: block;
clear: both;
}
#articleBody h2 {
clear: both;
margin: 64px 0 24px; padding: 16px 8px 8px;
border-bottom: 1px solid #8095B0;
line-height: 1.3;
font-size: 30px;
font-weight: bold;
color: #002B62;
}
#articleBody h2:first-child {
margin-top: 0;
}
#articleBody h3 {
clear: both;
margin: 48px 0 24px; padding: 8px 16px 7px;
line-height: 1.3;
font-size: 24px;
font-weight: bold;
background-color: #8095B0;
background-image: linear-gradient( 90deg, #002B62, #8095B0 );
border-left: 8px solid #FF833B;
letter-spacing: 0.05em;
color: #FFF;
}
#articleBody h3 strong {
color: #FD0;
}
.en #articleBody h3 {
letter-spacing: 0.03em;
}
#articleBody h4 {
margin: 24px 0 24px; padding: 8px 16px;
background-image: linear-gradient( #FFF, #EEE );
border: 1px solid #BBB;
border-top: 4px solid #002B62;
border-radius: 0 0 8px 8px;
line-height: 32px;
font-size: 20px;
font-weight: bold;
color: #002B62;
}
#articleBody h5 {
margin: 24px 0 0; 
line-height: 1.75;
font-weight: bold;
color: #666;
}
#articleBody h6 {
margin: 24px 0 0;
line-height: 1.75;
font-weight: normal;
color: #333;
}
#articleBody h2 em,
#articleBody h3 em,
#articleBody h4 em {
font-size: 110%;
display: inline-block;
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-style: normal;
}
#articleBody p {
margin: 24px 0 24px 24px;
}
#articleBody p.image {
margin: 24px 0;
}
#articleBody p.center {
margin: 24px 0;
text-align: center!important;
}
.ja #articleBody p {
text-align: justify;
}
#articleBody p em,
#articleBody li em {
margin: 0 -0.5em; padding: 0 0.5em;
font-style: normal;
color: #C00;
}
#articleBody pre {
overflow: auto;
margin: 24px 0; padding: 16px 16px 16px 48px;
background-color: #111;
border-radius: 4px;
color: #EEE;
}
#articleBody pre:last-child {
margin-bottom: 0;
}
#articleBody h5 + p,
#articleBody h6 + p {
margin-top: 0;
}
#articleBody hr {
clear: both;
margin: 24px 0;
border: none;
border-top: 1px solid #CCC;
}
#articleBody ul,
#articleBody ol {
margin: 24px 0;
padding-left: 1.5em;
line-height: 1.5;
}
#articleBody .sectionInner ul {
padding-left: 48px;
margin-top: -24px;
}
#articleBody .sectionInner ul li {
margin-bottom: 0;
}
#articleBody ul li,
#articleBody ol li {
margin-bottom: 0.25em;
}
#articleBody .sectionInner p:last-child,
#articleBody .sectionInner ul:last-child {
margin-bottom: 0!important;
}
#articleBody p.linkArea {
clear: both;
text-align: right;
}
#articleBody a.move {
position: relative;
display: inline-block;
overflow: hidden;
min-width: 280px; height: 32px;
padding: 0 32px;
background-color: #FF821E;
text-decoration: none;
line-height: 32px;
text-align: center;
font-size: 14px;
color: #FFF;
}
#articleBody a.move span {
display: block;
width: 100%; height: 100%;
position: absolute;
left: 0; top: 0;
z-index: 2;
line-height: 32px;
}
#articleBody a.move i {
transition-duration: 0.3s;
}
#articleBody a.move:hover i {
transform: translateX( 2px );
}
#articleBody a.move::after {
content: '';
display: block;
position: absolute;
left: -100%; top: 0;
width: 100%; height: 100%;
background-color: #FF640A;
transition-duration: 0.3s;
}
#articleBody a.move:hover::after {
left: -10px;
}
#articleBody a.move:active::after {
left: 0;
}
#articleBody img {
max-width: 100%; height: auto;
}
#articleBody .rightImage {
float: right;
width: 50%;
margin: 0 0 32px 48px;
}
#articleBody .leftImage {
float: left;
width: 50%;
margin: 0 48px 32px 0;
}
#articleBody .rightImage.image33,
#articleBody .leftImage.image33 {
width: 33.33333%;
}
#articleBody .rightImage.image25,
#articleBody .leftImage.image25 {
width: 25%;
}
#articleBody .rightImage img,
#articleBody .leftImage img {
width: 100%; height: auto;
vertical-align: bottom;
}
#articleBody .video {
position: relative;
width: 100%;
padding-bottom: 56.25%;
}
#articleBody .video iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
}
#articleBody .rightImage dt,
#articleBody .leftImage dt {
margin-bottom: 8px;
font-weight: bold;
color: #002B62;
}
#articleBody .rightImage .note,
#articleBody .leftImage .note {
display: block;
margin: 8px 0; padding-left: 1em;
text-indent: -1em;
line-height: 1.5;
font-size: 0.8rem;
}
#articleBody .loupe {
display: block;
position: relative;
cursor: pointer;
}
#articleBody .loupe.hover::before {
content: '';
display: block;
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba( 0,0,0,0.1 );
pointer-events: none;
}
#articleBody .loupe.hover::after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: '\f00e';
display: block;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
text-shadow: 0 0 8px rgba( 0,0,0,0.75 );
font-size: 48px;
color: #FFF;
}
.imageOpen {
overflow: hidden;
}
.imageOpen header,
.imageOpen #topMove {
display: none!important;
}
.imageOpen #container,
.imageOpen.caseOpen .caseContentWrap {
filter: blur( 2px );
}
.imageOpen.caseOpen #container {
filter: none;
}

.imageOpen #container {
overflow-y: scroll;
}
#imageBox {
overflow: auto;
display: none;
position: fixed;
top: 0; left: 0;
z-index: 19999;
width: 100%; height: 100%;
background-color: rgba( 0,0,0,0.75 );
background-image: repeating-linear-gradient( 0deg, rgba( 0,0,0,0.05 ), rgba( 0,0,0,0.05 ) 2px, transparent 2px, transparent 4px );
animation: fadeInImage 0.2s linear forwards;
}
.imageOpen #imageBox {
display: block;
}
@keyframes fadeInImage {
0% { opacity: 0; }
100% { opacity:  1; }
}
#imageBox .imageBoxInner {
display: table;
width: 100%; height: 100%;
margin: 0 auto;
}
#imageBox .imageBoxMenu {
position: fixed;
right: 24px; top: 16px;
z-index: 10;
letter-spacing: -0.4em;
line-height: 1;
}
#imageBox .imageBoxMenu li {
display: inline-block;
padding: 0 8px;
letter-spacing: normal;
vertical-align: top;
}
#articleBody .sectionInner #imageBox ul.imageBoxMenu {
margin: 0; padding: 0;
}
#imageBox .imageBoxMenu button {
background: none;
border: none;
margin: 0; padding: 0;
background-color: #FFF;
border-radius: 50%;
box-shadow: 0 0 0 2px #FFF,0 0 6px 2px rgba( 0,0,0,0.5 );;
line-height: 1;
font-size: 24px;
color: #666;
cursor: pointer;
transition-duration: 0.2s;
}
#imageBox .imageBoxMenu button.zoomIn,
#imageBox .imageBoxMenu button.zoomOut {
color: #111;
}
#imageBox .imageBoxMenu i {
vertical-align: bottom;
}
#imageBox .imageBoxMenu button.hover {
color: #900;
}
#imageBox .scale {
width: 4em; height: 100%;
padding: 0 8px;
background-color: #FFF;
border-radius: 4px;
box-shadow: 0 0 4px rgba( 0,0,0,0.5 );
text-align: center;
line-height: 24px;
font-size: 12px;
color: #111;
}
#imageBox .image {
display: table-cell;
text-align: center;
vertical-align: middle;
color: #FFF;
font-size: 1rem;
}
#imageBox img {
width: auto; height: auto;
max-width: 200%; max-height: 200%;
margin: 16px; padding: 16px;
background-color: #FFF;
box-shadow: 0 0 16px #000;
vertical-align: bottom;
}

#terminalBody a.download {
font-size: 90%;
}
#terminalBody a.download,
#articleBody a.download,
#articleBody a.githubLink,
#articleBody span.download {
display: inline-block;
padding: 4px 32px;
background-color: #C00;
border-radius: 80px;
text-align: center;
text-decoration: none;
color: #FFF;
transition-duration: 0.3s;
}
#articleBody span.download {
background-color: #CCC;
}
#terminalBody a.download:hover,
#articleBody a.download:hover {
background-color: #A30000;
}
#articleBody a.githubLink {
margin-bottom: 12px;
background-color: #4183C4;
}
#articleBody a.githubLink:hover {
background-color: #34699D;
}
#terminalBody a.download i.note,
#articleBody a.download i.note,
#articleBody a.githubLink i.note {
padding-left: 0.5em;
font-size: 80%;
font-style: normal;
}



/*

Tab contents

*/
.tabContents {
padding-top: 8px;
}
p + .tabContents {
padding-top: 24px;
}
.tabContents::after {
content: '';
display: block;
clear: both;
}
#articleBody .sectionInner .tabMenuList {
display: table;
table-layout: fixed;
width: 100%;
margin: 0; padding: 0;
}
#articleBody .sectionInner .tabMenuItem {
display: table-cell;
position: relative;
z-index: 1;
padding: 0 8px 32px;
vertical-align: bottom;
}
.tabMenuLink {
overflow: hidden;
display: block;
position: relative;
padding: 16px 8px;
background-color: rgba( 255,255,255,.3 );
border: 1px solid #FFB589;
border-radius: 4px;
text-decoration: none;
text-align: center;
transition-duration: 0.6s;
color: #FF833B;
font-weight: bold;
font-size: 16px;
}
.tabMenuLink.hover {
background-color: #FFF;
}
.tabOpen > .tabMenuLink {
transform: translateY( 16px );
background-color: #FF833B;
border-color: #FF833B;
color: #FFF;
cursor: default;
}
.tabMenuItem::after {
opacity: 0;
animation: tabOpenContentArrow 0.6s;
}
.tabMenuItem.tabOpen::after {
opacity: 1;
content: '';
position: absolute;
left: 50%; bottom: 0;
margin-left: -8px;
border: 8px solid transparent;
border-top: 8px solid #FF833B;
}
.tabMenuLink::before {
box-sizing: content-box;
content: '';
display: block;
position: absolute;
left: 50%; top: 50%;
z-index: -1;
transform: translate(-50%,-50%) rotate(45deg);
width: 100%; padding-bottom: 100%;
border: 10px solid #FFF;
opacity: .2;
transition-duration: .2s;
}
.tabOpen > .tabMenuLink::before {
width: 60%; padding-bottom: 60%;
}
.subTabContents .tabMenuLink {
border-color: #93B8E2;
color: #4B88CF;
}
.subTabContents .tabOpen > .tabMenuLink {
background-color: #4B88CF;
border-color: #4B88CF;
color: #FFF;
}
.subTabContents .tabOpen::after {
border-top-color: #4B88CF;
}
.tabContents .tabContent {
display: none;
}
.tabContents .tabContent.tabOpen {
display: block;
animation: tabOpenContent 0.6s;
}
@keyframes tabOpenContent {
  0% { transform: translateY( 16px ); opacity: 0; }
100% { transform: translateY(  0   ); opacity: 1; }
}
@keyframes tabOpenContentArrow {
  0% { transform: translateY( -16px ); opacity: 0; }
100% { transform: translateY( 0 ); opacity: 1; }
}
#articleBody .tabContents .tabContent h3:first-child,
#articleBody .tabContents .tabContent h4:first-child {
margin-top: 0;
}
.stepContents {
clear: both;
padding: 16px;
background-color: #FFF;
border: 1px solid #CCC;
}
.stepContentItem {
padding-top: 32px;
}
.stepContentItem:first-child {
padding-top: 0;
}
.stepContentTitle {
padding: 8px 16px;
background-color: #D6DDE6;
}
#articleBody .stepContentBody pre {
padding: 16px 24px;
}
#articleBody p.stepContentBodyHeading {
font-weight: bold;
margin: 24px 0 0; padding: 6px 24px 2px;
background-image: linear-gradient( #F2F2F2, #FFF 75% );
border: 1px solid #DDD;
border-bottom: none;
border-radius: 4px 4px 0 0;
color: #333;
}
#articleBody p.stepContentBodyHeading + pre {
margin-top: 8px;
}
.stepContentNumber {
font-weight: bold;
color: #666;
}
.dummyVariable {
padding: 0 .5em;
background-color: #EEE;
color: #666;
}

#articleBody .stepContensList {
list-style: none;
margin: 0; padding: 0;
}

#articleBody .floatContents {
letter-spacing: -0.4em;
}
#articleBody .halfContent {
display: inline-block;
width: 50%;
letter-spacing: normal;
vertical-align: top;
}
#articleBody .halfContent:nth-child(odd) {
padding-right: 16px;
}
#articleBody .halfContent:nth-child(even) {
padding-left: 16px;
}
#articleBody .floatContents .slide {
float: none;
width: 100%;
margin-left: 0;
}
#articleBody .floatContents p {
text-align: center;
margin-left: 0;
}

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

#articleBody nav {
position: static;
top: 0;
}

}

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

#articleBody nav ul {
min-width: auto;
}

#articleBody .halfContent {
display: block;
width: 100%;
}
#articleBody .halfContent:nth-child(odd),
#articleBody .halfContent:nth-child(even) {
padding: 0;
}
#articleBody .floatContents .slide {
width: 50%;
margin: 0 auto;
}

} /* /1024px */

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

#articleBody .exTable {
overflow: auto;
}
#articleBody .exTable table {
width: 960px;
}
.tabMenuLink {
font-size: 12px;
}

} /* /880px */

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

#articleTitle {
height: 200px;
}
#articleTitle h1 {
font-size: 10vw;
}
#articleTitle ul {
margin-top: 16px;
}
#articleTitle li {
min-width: 45%;
}
#articleTitle p,
#articleTitle li a {
font-size: 3.5vw;
}
#articleBody pre {
font-size: 3vw;
}
#articleBody nav::after {
content: '';
display: table;
clear: both;
}
#articleBody nav ul {
width: 100%;
padding: 0;
text-align: left;
overflow: hidden;
}
#articleBody nav ul li {
float: left;
width: 50%;
margin-bottom: -1px;
border: none;
border-bottom: 1px solid #EFEFEF;
vertical-align: bottom;
}
#articleBody nav ul li:nth-of-type( odd ) {
border-right: 1px solid #EFEFEF;
}
#articleBody nav a,
#articleBody nav span {
padding: 8px 16px;
border: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#articleBody nav .toggleMenu ul {
overflow: visible;
}
#articleBody nav .toggleMenu li {
width: 100%;
}


#articleBody h2 {
font-size: 4vw;
}
#articleBody h3 {
margin: 32px 0 16px;
font-size: 3.5vw;
}
#articleBody h4 {
font-size: 3.5vw;
}
#articleBody h5 {
font-size: 3vw;
}
#articleBody h6 {
font-size: 3vw;
}
#articleBody p,
#articleBody .floatContents p {
margin: 16px 0 16px 1em;
text-align: left;
font-size: 3vw;
}
#articleBody ul,
#articleBody ol {
font-size: 3vw;
}
#articleBody .sectionInner ul {
padding-left: 3em;
margin-top: -16px;
}
#articleBody .sectionInner ul li {
margin-bottom: 0;
}
#articleBody a.move {
font-size: 3.2vw;
}
#articleBody .rightImage,
#articleBody .leftImage {
float: none;
width: 100%;
margin: 24px auto;
}
#articleBody .rightImage .note,
#articleBody .leftImage .note {
font-size: 2.8vw;
}
#articleBody .rightImage.image25,
#articleBody .leftImage.image25 {
width: 50%;
}
#articleBody .exImage {
display: block;
overflow: auto;
}
#articleBody .exImage img {
width: 150%; height: auto;
max-width: none;
}
#articleBody .exTable {
overflow: auto;
}
#articleBody .exTable table {
width: 960px;
}
#articleBody .exTable table th,
#articleBody .exTable table td {
padding: 8px;
font-size: 12px;
}
#articleBody .sectionInner .tabMenuItem {
padding: 0 4px 32px;
}
.tabMenuLink {
font-size: 2.5vw;
}
#articleBody .floatContents .slide {
width: 100%;
}
.imageOpen #imageBox img {
margin: 8px; padding: 8px;
}

} /* /640px */


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

   Home

** -------------------------------------------------- */
#website.index #articleTitle {
max-width: 1920px; max-height: 100vh;
height: 640px;
margin: 0 auto;
}
#website.index #articleBody section {
padding: 96px 16px;
}
#website.index #articleBody h2 {
margin-bottom: 64px; padding: 16px 32px;
background-color: rgba( 255, 255, 255, 0.5 );
border: 1px solid #8095B0;
font-size: 26px;
font-weight: bold;

color: #002B62;
}
#website.index #articleBody p {
margin: 64px 0;
}
#website.index #articleBody #why h2 {
margin-bottom: 48px;
}
#articleBody #why ul {
width: 1108px;
letter-spacing: -0.4em;
margin-left: -64px; padding: 0;
text-align: center;
}
#articleBody #why li {
letter-spacing: normal;
display: inline-block;
width: 33.33333%;
margin: 0 0 36px; padding: 0 16px;
vertical-align: top;
text-align: left;
}
#articleBody #why dt {
border-bottom: 1px solid #CCC;
font-weight: bold;
color: #333;
}
#articleBody #why dl i {
position: absolute;
left: 0; top: 50%;
transform: translateY(-50%);
font-size: 40px;
}
#articleBody #why dt,
#articleBody #why dd.text {
display: flex;
align-items: center;
position: relative;
min-height: 5em;
padding: 1em 0 1em 56px;
font-size: 20px;
line-height: 1.5;
}
#articleBody #why dd.text {
margin-bottom: 16px;
font-size: 16px;
}
#articleBody #why dd.image {
padding: 8px;
border: 1px solid #CCC;
border-radius: 8px;
background-color: #FFF;
box-shadow: 0 0 4px rgba( 0, 0, 0, 0.3 );
}
#articleBody #why dd.image img {
vertical-align: bottom;
border: 1px solid #DDD;
}
#articleBody #why dt i {
color: #F00;
}
#articleBody #why dd.text i {
color: #60c60d;
}
/* Features */
#articleBody #features #featuresList {
position: relative;
}
#articleBody #features #featuresList svg {
position: absolute;
top: 0; left: 0;
transition-duration: 1s;
stroke-width: 3;
fill: transparent;
}
#articleBody #features #featuresList svg path.pathBack {
stroke: #999;
}
#articleBody #features #featuresList svg path.pathDotted {
stroke: #002B62;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 10;
stroke-dashoffset: 80;
/* animation: featuresLine 2s linear 0s infinite; */
}
/* IE11 not support !!!
@keyframes featuresLine {
0% { stroke-dashoffset: 80; }
100% { stroke-dashoffset: 0; }
}
*/
#articleBody #features #featuresList svg path.pathBack.hover {
stroke: #FFB285!important;
}
#articleBody #features #featuresList svg path.pathDotted.hover {
stroke: #FF640A!important;
}
#articleBody #features ol {
width: 100%;
margin: 0 0 0 auto; padding: 0 0 0 20%;
}
#articleBody #features ol::after {
content: '';
display: block;
width: 240px; height: 180px;
position: absolute;
z-index: 0;
top: 50%; left: 0;
transform: translate(-30%,-50%);
background: url("../img/features_exastro.png") no-repeat;
background-size: contain;
}
#articleBody #features li {
margin: 0 0 16px;
list-style: none;
}
#articleBody #features li:nth-child(1),
#articleBody #features li:nth-child(7) { transform: translateX(-10%); }
#articleBody #features li:nth-child(2),
#articleBody #features li:nth-child(6) { transform: translateX(-5%); }
#articleBody #features li:nth-child(3),
#articleBody #features li:nth-child(5) { transform: translateX( 0 ); }
#articleBody #features li:nth-child(4) { transform: translateX( 5% ); }
#articleBody #features li a {
overflow: hidden;
display: block;
padding: 12px 16px;
background-image: linear-gradient( #FFF, #EBEEF2 );
box-shadow: 2px 2px 4px rgba( 0,0,0,0.3 );
border: 2px solid #002B62;
border-radius: 100px;
line-height: 1.5;
font-size: 1.4rem;
font-weight: bold;
text-decoration: none;
color: #555;
transition-duration: 0.2s;
white-space: nowrap;
text-overflow: ellipsis;
}
.en #articleBody #features li a {
font-size: 1.3rem;
}
#articleBody #features li a:hover {
padding-left: 24px;
background-image: linear-gradient( #FFF, #FFF7F3 );
border-color: #FF640A;
color: #FF640A;
}
#articleBody #features li i {
color: #002B62;
animation: gearAnimation 4s linear infinite;
}
@keyframes gearAnimation {
  0% { transform: scale(1.2) rotate(0deg); }
100% { transform: scale(1.2) rotate(360deg); }
}
#articleBody #features li a:hover i {
color: #FF640A;
}

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

#website.index #articleTitle {
height: 480px;
}
#articleBody #why ul {
width: 100%;
margin-left: 0;
}

} /* /1260px */

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

#website.index #articleTitle {
height: 400px;
}
#articleBody #why li {
width: 50%;
}
#articleBody #features li:nth-child(1),
#articleBody #features li:nth-child(7) { transform: translateX( 0 ); }
#articleBody #features li:nth-child(2),
#articleBody #features li:nth-child(6) { transform: translateX( 0 ); }
#articleBody #features li:nth-child(3),
#articleBody #features li:nth-child(5) { transform: translateX( 0 ); }
#articleBody #features li:nth-child(4) { transform: translateX( 0 ); }
.en #articleBody #features li a {
font-size: 1.1rem;
}

} /* /1024px */

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

#website.index #articleTitle section .sectionInner {
padding-top: 24px;
}
#articleBody #features ol {
padding-left: 96px;
}
#articleBody #features ol::after {
width: 80px; height: 60px; 
transform: translate(0,-50%);
}
#articleBody #features li a {
padding: 8px 12px;
font-size: 2.8vw;
}
.en #articleBody #features li a {
font-size: 2.2vw;
}

} /* /768px */

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

#website.index #articleTitle {
height: auto;
padding: 64px 0 80px;
}
#website.index #articleTitle .background,
#website.en.index #articleTitle .background {
background-image: url("../img/header_home_sp.jpg");
}
#website.index #articleBody section {
padding: 48px 16px;
}
#website.index #articleBody h2 {
margin-bottom: 32px; padding:  8px 16px;
font-size: 4vw;
}
#website.index #articleBody #why h2 {
margin-bottom: 16px;
}
#articleBody #why ul {
width: 100%; margin-left: 0;
}
#articleBody #why li {
width: 100%;
margin: 0; padding: 0 0 4em;
}
#articleBody #why li:last-child {
padding-bottom: 2em;
}
#articleBody #why dl i {
font-size: 8vw;
}
#articleBody #why dt,
#articleBody #why dd.text {
min-height: auto;
padding-left: 12vw;
font-size: 4vw;
}
#articleBody #why dd.text {
margin-bottom: 8px;
}
#articleBody #why dt br {
display: none;
}
#website.index #articleBody p {
margin: 32px 0;
font-size: 3vw;
}
#twitterTimeline,
#facebookTimeline {
width: 100%;
float: none;
padding: 0;
}
#articleBody #features ol {
padding-left: 0;
}
#articleBody #features svg,
#articleBody #features ol::after {
display: none;
}
#articleBody #features li {
margin-bottom: 8px;
}

} /* /640px */

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


} /* /480px */

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

   Article Page

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

/* Documents */
#article.documents h3 {
float: left;
width: 40%;
margin: 0;
font-family: 'Roboto', sans-serif;
}
#article.documents .documentsDownloadsList {
margin: 0 0 32px; padding: 8px 0 0 40%;
border-top: 1px solid #8095B0;
list-style: none;
}
#article.documents .documentsDownloadsList li {
margin: 0 0 8px 8px;
}
#article.documents .documentsDownloadsList li a {
display: block;
padding: 8px 16px;
background-color: #FFF;
border: 1px solid #CCC;
text-decoration: none;
color: #333;
}
#article.documents .documentsDownloadsList li a:hover {
background-color: #E5EAEF;
}
#article.documents .documentsDownloadsList i.fa-file-pdf { color: #CE1923; }
#article.documents .documentsDownloadsList i.fa-file-excel { color: #1F7246; }

#article.documents .documentsDownloadsList li i {
padding-right: 0.5em;
}

/* Slide Image */
.viewDocument {
float: right;
width: 50%;
margin: 0 0 32px 32px; padding: 8px;
border: 1px solid #CCC;
border-radius: 4px;
background-color: #FFF;
box-shadow: 0 0 4px rgba( 0, 0, 0, 0.3 );
}
.viewDocument.only {
float: none;
width: 100%; max-width: 800px;
margin: 0 auto 32px;
}
.viewDocumentBody {
position: relative;
z-index: 0;
padding-bottom: 75%;
background-color: #444;
cursor: pointer;
}
.none .viewDocumentBody {
cursor: default;
}
.wide .viewDocumentBody {
padding-bottom: 56.25%;
}
.viewDocumentBody.loading {
cursor: default;
}
.viewToolBar {
display: none;
position: relative;
width: 100%; height: 32px;
background-color: #474747;
background-image: linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95));
border-top: 1px solid #111;
border-bottom: 1px solid #111;
}
#terminalBody .sectionInner .viewToolBar ul,
#articleBody .sectionInner .viewToolBar ul {
width: 100%; height: 30px;
margin: 0; padding: 0 8px;
list-style: none;
letter-spacing: -0.4em;
}
#terminalBody .sectionInner .viewToolBar li,
#articleBody .sectionInner .viewToolBar li {
display: inline-block;
height: 24px;
margin: 3px 2px 0; padding: 0;
vertical-align: top;
letter-spacing: normal;
line-height: 1;
}
#terminalBody .sectionInner .viewToolBar button,
#articleBody .sectionInner .viewToolBar button {
display: block;
height: 24px;
padding: 0 8px;
background-color: transparent;
border: 1px solid transparent;
border-radius: 2px;
vertical-align: middle;
line-height: 22px;
font-size: 11px;
text-decoration: none;
color: hsla(0,0%,100%,.8);
}
#terminalBody .sectionInner .viewToolBar button.hover,
#terminalBody .sectionInner .viewToolBar button:focus,
#articleBody .sectionInner .viewToolBar button.hover,
#articleBody .sectionInner .viewToolBar button:focus {
background-color: hsla(0,0%,0%,.12);
background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
border: 1px solid hsla(0,0%,0%,.35);
border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, 0 0 1px hsla(0,0%,100%,.15) inset, 0 1px 0 hsla(0,0%,100%,.05);
outline: none;
}
#terminalBody .sectionInner .viewToolBar button.hover:active,
#articleBody .sectionInner .viewToolBar button.hover:active {
background-color: hsla(0,0%,0%,.2);
background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
border-color: hsla(0,0%,0%,.35) hsla(0,0%,0%,.4) hsla(0,0%,0%,.45);
box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset, 0 0 1px hsla(0,0%,0%,.2) inset, 0 1px 0 hsla(0,0%,100%,.05);
outline: none;
}
#terminalBody .sectionInner .viewToolBar button:disabled,
#articleBody .sectionInner .viewToolBar button:disabled {
opacity: .5;
pointer-events: none;
}
.slide .viewDocumentBody.done {
padding-bottom: calc( 75% + 61px );
cursor: default;
}
.slide.wide .viewDocumentBody.done {
padding-bottom: calc( 56.25% + 61px );
}
.pdf .viewDocumentBody.done {
padding-bottom: calc( 75% + 32px );
cursor: default;
}
.pdf.wide .viewDocumentBody.done {
padding-bottom: calc( 56.25% + 32px );
}
.viewDocumentBody.done .viewToolBar {
position: absolute;
bottom: 0;
display: block;
}
.viewDocumentBody iframe,
.viewDocumentBody img {
position: absolute;
top: 0; left: 0;
z-index: 0;
width: 100%; height: 100%;
margin: 0; padding: 0;
}
.viewDocumentBody.done iframe {
height: calc( 100% - 32px );
}
.viewDocumentBody img {
vertical-align: middle;
border: 1px solid #002B62;
transition-duration: 0.3s;
}
.viewDocumentBody:hover img {
opacity: 0.8;
}
.none .viewDocumentBody:hover img {
opacity: 1;
}
.viewDocumentBody.loading::after,
.youtubeEmbed.loading::after {
content: '';
display: block;
position: absolute;
top: 50%; left: 10%;
z-index: 10;
width: 80%; height: 28px;
margin-top: -14px;
background-image: linear-gradient( 90deg, #002B62, #002B62 8px, #194072  8px, #194072  16px );
background-size: 16px 16px;
border: 1px solid #002B62;
border-radius: 4px;
animation: slideLoading 0.3s linear infinite;
}
.viewDocumentBody.loading::before ,
.youtubeEmbed.loading::before {
content: 'Now Loading...';
display: block;
position: absolute;
top: 50%; left: 0;
z-index: 11;
width: 100%; height: 16px;
margin: -6px;
line-height: 1;
text-shadow: 1px 1px 1px #000;
font-size: 12px;
font-weight: bold;
color: #FFF;
text-align: center;
animation: slideLoadingText 1s linear infinite;
}
@keyframes slideLoading {
0% { background-position: 0 0; }
100% { background-position: 16px 0; }
}
@keyframes slideLoadingText {
0% { opacity: 1; }
50% { opacity: 0.6; }
100% { opacity: 1; }
}
.viewDocumentBody.loading img {
opacity: 0.2;
}
.viewDocumentBody iframe {
position: absolute;
left: -9999px;
}
.viewDocumentBody.done img {
display: none;
}
.viewDocumentBody.done iframe {
left: 0;
}

#articleBody .slideMenu ul {
display: table;
table-layout: fixed;
border-collapse: collapse;
width: 100%; height: 16px;
margin: 4px 0 0 0; padding: 0;
}
#articleBody .slideMenu li {
display: table-cell;
padding: 4px;
background-color: #F8F8F8;
background-image: linear-gradient(#F8F8F8, #EEE);
border: 1px solid #AAA;
text-align: center;
vertical-align: middle;
font-size: 0.84rem;color: #555;
}
#articleBody .slideMenu li.hover {
background-color: #EEE;
background-image: linear-gradient(#EEE, #DFDFDF);
}
#articleBody .slideMenu li.on {
border-top: none;
background-color: #FFF;
background-image: linear-gradient(#FFF 25%, #F8F8F8);
}
#articleBody .slideMenu li.on.hover {
background-color: #FFF;
cursor: default;
}
#articleBody .slideCode {
overflow: auto;
display: none;
padding: 8px;
border: 1px solid #CCC;
}
#articleBody .slideCode dt {
margin-bottom: 8px; padding: 4px 8px;
border-left: 10px solid #002B62;
}
#articleBody .slideCode dd {
margin: 8px 0;
}
#articleBody .slideCode dd.note {
font-size: 11px;
padding-left: 1em;
text-indent: -1em;
}
#articleBody .slideCode pre.playbook {
margin: 0; padding: 8px;
background-color: #333;
border-radius: 0;
font-family: Consolas, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
color: #DDD;
font-size: 0.9rem;
}
#articleBody .slideCode .any {
color: #F33;
}
.fullscreen .viewDocument {
float: none;
width: 100%; height: 100%;
margin: 0; padding: 0;
border: none;
border-radius: 0;
box-shadow: none;
}
.fullscreen .viewDocumentBody {
position: static;
padding: 0;
}
.viewToolBar .fullscreen-off {
display: none!important;
}
.fullscreen .viewToolBar .fullscreen-on {
display: none!important;
}
.fullscreen .viewToolBar .fullscreen-off {
display: block!important;
}

.clipboard-copy {
  cursor: copy;
  transition-duration: 0.2s;
}
.clipboard-copy:hover {
  color: #888;
}
.clipboard-copy.copy {
  display: block;
  position: relative;
  animation: clipboardCopy 0.3s;
}
.clipboard-copy::after {
content: '';
display: inline-block;
position: absolute;
left: 0; top: 0;
padding: 4px 16px;
background-color: rgba( 0,0,0,0.8 );
text-align: center;
transition-duration: 0.1s;
font-size: 10px;
color: #FFF;
opacity: 0;
}
.clipboard-copy.copy::after {
content: 'Copied to clipboard.';
opacity: 1;
}
@keyframes clipboardCopy {
  0% { transform: scale( 0.97 ); opacity: 0.8; }
  100% { transform: scale( 1 ); opacity: 1; }
}


@media screen and ( max-width: 1024px ) {
} /* /1024px */


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

#article.documents h3 {
float: none;
width: 100%;
margin-bottom: 8px;
}
#article.documents .documentsDownloadsList {
padding: 0;
border: none;
}
#article.documents .documentsDownloadsList li {
margin: 0 0 8px;
}
.viewDocument {
float: none;
width: 100%;
margin: 0 0 16px;
}
#articleBody .slideMenu li {
font-size: 2vw;
}
#articleBody .slideCode dt {
font-size: 3vw;
}
#articleBody .slideCode dd {
font-size: 2vw;
}
#articleBody .slideCode dd.note {
font-size: 10px;
}
#articleBody .slideCode pre.playbook {
font-size: 2.5vw;
}

} /* /640px */







.caseOpen {
overflow: hidden;
}
.caseOpen #container {
overflow-y: scroll;
}
.caseOpen header,
.caseOpen #topMove {
opacity: 0;
}

#articleBody .sectionInner #caseList {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 0 -64px 0; padding: 0;
list-style: none;
animation: caseListShow 0.3s linear forwards;
transform-origin: center top;
}
.loadWait #articleBody .sectionInner #caseList {
visibility: hidden;
}
@keyframes caseListShow {
0% { opacity: 0; }
100% { opacity: 1; }
}
#articleBody .sectionInner #caseList > li {
width: calc( 33.333% - 24px );
max-width: 350px;
margin: 24px 0; padding: 0;
}

/* justify-content: Align last row left. */
#articleBody .sectionInner #caseList::after {
content: '';
display: block;
width: calc( 33.333% - 24px ); height: 0;
max-width: 350px;
}
#articleBody .sectionInner #caseList > li > a {
display: block;
height: 100%;
background-color: #FFF;
background-image: linear-gradient( #FFF 75%, #F2F2F2 );
border-bottom: 4px solid #8095B0;
box-shadow: 0 0 8px rgba( 0,0,0,0.1);
transition-duration: 0.3s;
text-decoration: none;
color: #333;
cursor: pointer;
}
#articleBody .sectionInner #caseList > li > a:focus,
#articleBody .sectionInner #caseList > li > a.hover {
box-shadow: 0 8px 32px rgba( 0,0,0,0.3 );
outline: none;
}
#articleBody .sectionInner #caseList > li > a.show {
animation: centerMoveTwo 0.2s linear forwards;
}
@keyframes centerMoveTwo {
  0% { transform: scale( 1 ) rotateX( 0 ); opacity: 1; }
100% { transform: scale( 2 ) rotateX( 90deg ); opacity: 0.75; }
}
@keyframes centerMoveOne {
  0% { transform: scale( 1 ) rotateX( 0 ); opacity: 1; }
100% { transform: scale( 1 ) rotateX( 90deg ); opacity: 0.75; }
}
.caseClose #articleBody .sectionInner #caseList > li > a.show {
animation: caseListFadeIn 0.6s linear forwards;
}
@keyframes caseListFadeIn {
  0% { transform: scale(0.9); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
#articleBody .sectionInner #caseList dt {
overflow: hidden;
}
#articleBody .sectionInner #caseList dt img,
#articleBody .sectionInner #caseList dd.name img {
width: 100%; height: auto;
vertical-align: top;
transition-duration: 0.3s;
}
#articleBody .sectionInner #caseList .hover dt img {
transform: scale(1.05);
}
#articleBody .sectionInner #caseList dd.title {
padding: 16px 24px;
font-size: 15px;
line-height: 1.75;
letter-spacing: 0.05em;
color: #2B2B2B;
}
.ja #articleBody .sectionInner #caseList dd.title {
text-align: justify;
}
#articleBody .sectionInner #caseList dd.tag,
#articleBody .sectionInner #caseList dd.name {
padding: 0 24px 16px;
}
#articleBody .sectionInner #caseList dd .subTitle {
padding-top: 8px;
border-bottom: 1px solid #BBB;
font-family: Consolas, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
font-size: 10px;
}
#articleBody .sectionInner #caseList dd.tag ul,
#articleBody .caseContentHeader .title ul {
margin: 0; padding: 4px 0 0;
list-style: none;
letter-spacing: -0.4em;
line-height: 1;
}
#articleBody .sectionInner #caseList dd.tag li,
#articleBody .caseContentHeader .title li {
display: inline-block;
margin: 4px 4px 0 0; padding: 4px 8px;
background-color: #FFF;
border: 1px solid #CCC;
letter-spacing: normal;
vertical-align: top;
font-family: Consolas, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
font-size: 11px;
color: #555;
}
#articleBody .sectionInner #caseList dd.tag li.function {
background-color: #E5EAEF;
border-color: #8095B0;
color: #002B62;
}
#articleBody .sectionInner #caseList dd.tag li.cooperation {
background-color: #F9E6E6;
border-color: #E37F7F;
color: #C80000;
}
#articleBody .sectionInner #caseList dd.tag li.other {
background-color: #EBEBEB;
border-color: #707070;
color: #707070;
}
#articleBody .sectionInner #caseList dd.name ul {
margin: 0; padding: 8px 0 0 0;
list-style: none;
color: #CCC;
}
#articleBody .sectionInner #caseList dd.name li {
line-height: 1.5;
font-size: 12px;
color: #2B2B2B;
}
#articleBody .sectionInner #caseList dd.name li::before {
content: '';
display: inline-block;
width: 1em; height: 1em;
transform: translateY(1px);
margin-right: 0.5em;
background-color: #CCC;
border-radius: 50%;
vertical-align: baseline;
}
#articleBody .sectionInner #caseList dd:last-child {
padding-bottom: 24px;
}
#articleBody section.caseContent {
display: none;
position: fixed;
left: 0; top: 0;
z-index: 10000;
width: 100%; height: 100%;
padding: 0;
opacity: 1;
transition-duration: 0.6s;
}
#articleBody section.caseContent.show {
display: block;
animation: caseContentBack 0.6s linear forwards;
}
@keyframes caseContentBack {
  0% { background-color: rgba( 0,0,0,0 ); }
100% { background-color: rgba( 0,0,0,0.5 ); }
}
.caseClose #articleBody section.caseContent.show {
animation: caseContentBackClose 0.3s linear forwards;
}
@keyframes caseContentBackClose {
  0% { background-color: rgba( 0,0,0,0.5 ); }
100% { background-color: rgba( 0,0,0,0 ); }
}
#articleBody section.caseContent .sectionInner {
overflow: hidden;
width: 100%; height: 100%;
max-width: none;
transform-style: preserve-3d;
perspective: 960px;
transition-duration: 0.6s;
}
.caseClose #articleBody section.caseContent .sectionInner {
opacity: 0;
transform: scale(0.9);
}

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

#articleBody .sectionInner #caseList {
justify-content: space-around;
margin: 0;
}
#articleBody .sectionInner #caseList > li,
#articleBody .sectionInner #caseList::after {
width: calc( 50% - 16px );
}

} /* /1116px */

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

#articleBody .sectionInner #caseList {
justify-content: space-between;
}
#articleBody .sectionInner #caseList dd.title {
font-size: 2vw;
}

}

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

#articleBody .sectionInner #caseList {
justify-content: center;
}
#articleBody .sectionInner #caseList > li {
width: 100%;
}
#articleBody .sectionInner #caseList dd.title {
font-size: 3.5vw;
}
#articleBody .sectionInner #caseList::after {
content: none;
}
#articleBody .sectionInner #caseList > li > a.show {
animation: centerMoveOne 0.2s linear forwards;
}

} /* /640px */

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















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

   Case content modal window

** -------------------------------------------------- */
.caseContentWrap {
width: calc( 100% - 48px ); height: calc( 100% - 48px );
margin: 24px;
background-color: #333;
border-radius: 4px;
animation: caseContentShow 0.8s ease forwards;
}
.fullscreen .caseContentWrap {
width: 100%; height: 100%;
margin: 0;
}
@keyframes caseContentShow {
  0% { opacity: 0; }
  20% { opacity: 0; }
  21% {
    opacity: 1;
    transform: scale( 0.5 ) rotateX( 90deg );
    box-shadow: 0 0 64px rgba( 0,0,0,0 ); }
  100% {
    transform: scale( 1 ) rotateX( 0 );
    box-shadow: 0 0 64px rgba( 0,0,0,0.8 );
  }
}

/* Content Bar */
.caseContentBar {
overflow: hidden;
position: relative;
height: 24px;
background: linear-gradient( #3A3A3A, #333 );
border-radius: 3px 3px 0 0;
}
#articleBody .sectionInner .caseContentBar ul {
position: absolute;
right: 0; top: 0;
z-index: 2;
margin: 0; padding: 0 4px;
background: linear-gradient( #3A3A3A, #333 );
list-style: none;
letter-spacing: -0.4em;
}
#articleBody .sectionInner .caseContentBar li {
display: inline-block;
margin: 0; padding: 0;
letter-spacing: normal;
}
#articleBody .sectionInner .caseContentBar button {
width: 64px; height: 24px;
background-color: transparent;
border: none;
text-align: center;
line-height: 24px;
font-size: 16px;
color: #DDD;
cursor: pointer;
transition-duration: 0.2s;
}
#articleBody .sectionInner .caseContentBar button.hover {
background-color: #444;
}
#articleBody .sectionInner .caseContentBar button.closeButton.hover {
background-color: #CC0000;
}
.caseContentBar::before {
content: '';
display: block;
position: absolute;
top: 4px; left: 8px;
z-index: 1;
width: calc( 100% - 16px ); height: 16px;
background: linear-gradient( #111 1px, #444 1px, #444 2px , transparent 2px );
background-size: 6px 6px;
}

/* Case layout*/
.caseContentMain {
overflow-y: scroll;
height: calc( 100% - 28px );
margin: 0 4px 4px;
background: url(../img/content_back.png);
border: 1px solid #222;
border-radius: 2px;
}
.caseContentBody {
position: relative;
margin: 0 auto; padding: 64px 16px;
background-image: linear-gradient( 90deg, rgba( 255,255,255,0 ), rgba( 255,255,255,0 ) 10%, #FFF 20%, #FFF 80%, rgba( 255,255,255,0 ) 90% );
}
.caseContentBody::before,
.caseContentBody::after {
content: '';
display: block;
position: absolute;
left: 0;
width: 100%; height: 8px;
}
.caseContentBody::before {
top: 0;
background-image: repeating-linear-gradient( 45deg, #DDD, #DDD 12px, rgba( 255,255,255,0 ) 12px, rgba( 255,255,255,0 ) 16px );
}
.caseContentBody::after {
bottom: 0;
background-image: repeating-linear-gradient( 45deg, #EBEBEB, #EBEBEB 12px, rgba( 255,255,255,0 ) 12px, rgba( 255,255,255,0 ) 16px );
}
.caseContentBodyInner,
.caseContentBodyInner01 {
margin-bottom: 64px;
}
.caseContentBodyBlock,
.caseContentBodyBlock01 {
max-width: 1280px;
margin: 0 auto;
}
.caseOutline {
display: flex;
align-items: top;
}
.caseOutlineText {
width: 55%;
padding: 16px 16px 0;
}
.caseContentBodyBlock .caseOutlineText {
width: 100%;
}
.caseOutlineText.space {
background: url("../../../it-automation-docs/asset/case/common/building_t.png") center bottom no-repeat;
background-size: contain;
}
.caseOutlineImage {
width: 45%;
padding-left: 32px;
}
.caseContentBodyInner02 {
display: flex;
max-width: 1280px;
margin: 0 auto;
}
.caseContentBodyBlock02 {
width: 55%;
padding-right: 16px;
}
.caseContentBodyBlock02.full {
width: 100%;
}
.caseResult {
padding-left: 16px;
}
.caseContentBodyBlock03 {
width: 45%;
padding-left: 16px;
}
.caseInstall {
padding-left: 16px;
}
.none .caseResult,
.none .caseInstall,
.none .caseContentTitle {
display: none;
}
.caseContentBodyBlock02.none {
background: url("../../../it-automation-docs/asset/case/common/building.png") center bottom no-repeat;
background-size: contain;
opacity: 0.1;
}
.caseContentBodyBlock03.none {
background: url("../../../it-automation-docs/asset/case/common/gear.png") right bottom no-repeat;
background-size: contain;
opacity: 0.3;
}

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

  .caseContentBodyBlock,
  .caseContentBodyBlock01 {
  max-width: 672px;
  }
  .caseOutline {
  display: block;
  }
  .caseOutlineText,
  .caseOutlineImage {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  }
  .caseOutlineImage {
  max-width: 576px;
  margin-top: 64px;
  }
  .caseContentBodyInner02 {
  display: block;
  max-width: 672px;
  }
  .caseContentBodyBlock02,
  .caseContentBodyBlock03 {
  width: 100%;
  padding: 0;
  }
  .caseContentBodyBlock03 {
  margin-top: 64px;
  }
  .caseResult,
  .caseInstall {
  padding: 0;
  }
  .caseContentBodyBlock02.none,
  .caseContentBodyBlock03.none {
  display: none;
  }

}


/* Case header */
.caseContentHeader {
position: relative;
background-image: linear-gradient( rgba( 0,0,0,0.2 ) 34%, transparent 34% ),
  linear-gradient( 90deg, rgba( 0,0,0,0.2 ) 34%, transparent 34% ),
  url("../../../it-automation-docs/asset/case/common/header_back.jpg");
background-size: 3px 3px, 3px 3px, cover;
animation: caseContentHeaderBack 0.2s linear infinite;
}
@keyframes caseContentHeaderBack {
  0% { background-position: 0 0, 0 0, center; }
100% { background-position: 0 -3px, 0 0 ,center; }
}
#articleBody .caseContentHeader .title {
margin: 0 auto; padding: 32px 0 0;
text-align: center;
}
#articleBody .caseContentHeader .title h2 {
width: 100%;
margin: 0 auto 24px; padding: 0 16px;
border: none;
line-height: 1.75;
letter-spacing: 0.1em;
font-weight: bold;
font-size: 2rem;
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
font-feature-settings: "palt";
text-shadow: 2px 2px 4px #000;
color: #EEE;
}
#articleBody .caseContentHeader .title h2 strong {
font-size: 120%;
color: #EC0;
}
#articleBody .caseContentHeader .title .caseStatus {
background-color: rgba( 0,0,0,0.15 );
}
#articleBody .caseContentHeader .title .caseStatusInner {
display: inline-block;
padding: 24px 16px;
vertical-align: bottom;
}
#articleBody .caseContentHeader .title dl {
display: table;
margin-bottom: 8px;
}
#articleBody .caseContentHeader .title dl:last-child {
margin-bottom: 0;
}
#articleBody .caseContentHeader .title dt,
#articleBody .caseContentHeader .title dd {
display: table-cell;
vertical-align: middle;
}
#articleBody .caseContentHeader .title dt {
padding-left: 8px;
border-left: 4px solid #7088A7;
white-space: nowrap;
font-size: 14px;
color: #DDD;
}
#articleBody .caseContentHeader .title .cooperation dt {
border-color: #E07070;
}
#articleBody .caseContentHeader .title .other dt {
border-color: #A6DF77;
font-size: 12px;
}
#articleBody .caseContentHeader .title dt::after {
content: ' :';
opacity: 0.5;
}
#articleBody .caseContentHeader .title ul {
margin: 0; padding: 0;
text-align: left;
}
#articleBody .caseContentHeader .title li {
margin: 2px 4px; padding: 3px 8px;
background-color: #555;
border: none;
box-shadow: 0 0 2px rgba( 0,0,0,0.3 );
line-height: 1;
white-space: nowrap;
font-size: 12px;
opacity: 0.7;
color: #888;
}
#articleBody .caseContentHeader .title li.on {
border: 1px solid #525252;
box-shadow: 0 0 2px #000;
opacity: 1;
color: #EEE;
}
#articleBody .caseContentHeader .title .function li.on {
background-color: #002B62;
border-color: #335581;
}
#articleBody .caseContentHeader .title .cooperation li.on {
background-color: #CC0000;
border-color: #DC5C5C;
}
#articleBody .caseContentHeader .title .other li.on {
background-color: #54AE0B;
border-color: #6DCB20;
}

/* Case body */
.caseContentTitle {
margin-bottom: 48px;
border-bottom: 1px solid #7088A7;
}
.caseContentBodyBlock03 .caseContentTitle {
margin-bottom: 32px;
}
#articleBody .caseContentTitle h3 span {
display: inline-block;
padding: 0 8px 4px;
border-bottom: 4px solid #7088A7;
}
#articleBody .caseContentTitle h3 {
margin: 0 auto; padding: 0;
background: none;
border: none;
font-weight: normal;
font-size: 1.6rem;
color: #333;
}
#articleBody .caseContentBody h3 i {
color: #999;
}
.caseInnerTitle {
margin: 0 0 64px; padding: 0 16px;
border-bottom: 1px solid #CCC;
}
.caseContentBody .problem,
.caseContentBody .solve,
.caseContentBody .result {
padding: 4px;
background-color: #CCC;
border: 2px solid #7A7A7A;
border-radius: 4px;
box-shadow: 0 0 4px rgba( 0,0,0,0.3 );
}
.caseContentBody .problem .inner,
.caseContentBody .solve .inner,
.caseContentBody .result .inner {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 160px;
background-color: #FFF;
box-shadow: 0 0 16px rgba( 0,0,0,0.1 ) inset;
}
.caseContentBody .problem .inner::before,
.caseContentBody .solve .inner::before,
.caseContentBody .result .inner::before {
content: '';
display: block;
width: 180px;
padding-bottom: 27.5%;
background: url("../../../it-automation-docs/asset/case/common/problem.svg") center center no-repeat;
background-size: 80% 80%;
opacity: 0.5;
}
.caseContentBody .caseContentBodyBlock .problem .inner::before,
.caseContentBody .caseContentBodyBlock .solve .inner::before,
.caseContentBody .caseContentBodyBlock .result .inner::before {
width: 240px;
padding-bottom: 16%;
}
.caseContentBody .solve .inner::before {
background-image: url("../../../it-automation-docs/asset/case/common/solve.svg");
}
.caseContentBody .result .inner::before {
background-image: url("../../../it-automation-docs/asset/case/common/result.svg");
}
.caseContentBody .solve {
background-color: #FFE0CE;
border-color: #FFA876;
}
.caseContentBody .solve .inner {
background-color: #FFF;
box-shadow: 0 0 16px rgba( 255,100,10,0.1 ) inset;
}
.caseContentBody .result {
background-color: #CCD5E0;
border-color: #7088A7;
}
.caseContentBody .result .inner {
background-color: #FFF;
box-shadow: 0 0 16px rgba( 0,43,98,0.1 ) inset;
}
#articleBody .caseContentBody h4 {
position: absolute;
left: 16px; top: -28px;
z-index: 2;
min-width: 150px;
margin: 0; padding: 12px 16px 8px;
background-image: none;
background-color: #FFF;
border: 1px solid #CC0000;
border-radius: 0 0 8px 8px;
box-shadow: 0 2px 2px rgba( 0,0,0,0.2 );
text-align: center;
letter-spacing: 0.1em;
font-size: 1.2rem;
color: #333;
}
#articleBody .caseContentBody .problem h4 { background-image: linear-gradient( #FFF, #EBEBEB ); border-color: #707070; }
#articleBody .caseContentBody .problem h4 i { color: #707070; }
#articleBody .caseContentBody .solve h4 { background-image: linear-gradient( #FFF, #FFF5ED ); border-color: #FFA876; }
#articleBody .caseContentBody .solve h4 i { color: #FF640A; }
#articleBody .caseContentBody .result h4 { background-image: linear-gradient( #FFF, #EBEEF2 ); border-color: #7088A7; }
#articleBody .caseContentBody .result h4 i { color: #002B62; }

#articleBody .caseContentBody .problem h4::before,
#articleBody .caseContentBody .solve h4::before,
#articleBody .caseContentBody .result h4::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 );
}
#articleBody .caseContentBody .solve h4::before {
background-image: repeating-linear-gradient( 45deg, #FFA876, #FFA876 12px, #FFE6D2 12px, #FFE6D2 16px );
}
#articleBody .caseContentBody .result h4::before {
background-image: repeating-linear-gradient( 45deg, #7088A7, #7088A7 12px, #CCD5E0 12px, #CCD5E0 16px );
}

.caseContentBody .solveTheProblem {
margin: 0 0 8px; padding: 8px 0 40px;
background: url("../../../it-automation-docs/asset/case/common/arrow.png") center bottom no-repeat;
text-align: center;
}
.caseContentBody .solveTheProblem span {
padding: 2px 16px;
background-color: #FFF;
border: 1px solid #707070;
line-height: 1;
font-weight: bold;
font-size: 0.8rem;
color: #707070;
}
#articleBody .caseContentBody .caseContentText {
width: calc( 100% - 180px );
margin: 0; padding: 32px 32px 32px 8px;
letter-spacing: 0.05em;
line-height: 1.75;
font-size: 1rem;
color: #2B2B2B;
}
#articleBody .caseContentBody .caseContentBodyBlock .caseContentText {
width: calc( 100% - 240px );
font-size: 1.3rem;
}
#articleBody .caseContentBody .caseContentText h5 {
margin: 2em 0 1em; padding-bottom: 4px;
border-bottom: 2px solid #CCC;
font-weight: normal;
font-size: 1.2rem;
color: #2B2B2B;
}
#articleBody .caseContentBody .caseContentText h5:first-child {
margin-top: 0!important;
}
#articleBody .caseContentBody .caseContentText h6 {
display: inline-block;
margin: 0 0 0.6em;; padding: 6px 12px 4px;
background-color: #BBB;
line-height: 1;
font-size: 1rem;
color: #FFF;
}
#articleBody .caseContentBody .caseContentText p {
margin: 0 0 1.5em; padding: 0;
}
#articleBody .caseContentBody .caseContentText ul {
margin: -1.5em 0 1.5em; padding: 0 0 0 1.5em;
}
#articleBody .caseContentBody .caseContentText li {
margin-bottom: 0.35em;
line-height: 1.4;
}

#articleBody .caseContentBody .caseContentText em {
background-image: linear-gradient( transparent 60%, #FFFF99 60% );
font-style: normal;
color: #2B2B2B;
}
#articleBody .caseContentBody table {
width: 100%;
}
#articleBody .caseContentBody th,
#articleBody .caseContentBody td {
padding: 8px 16px;
background-color: #FFF;
border: 1px solid #CCC;
font-size: 12px;
vertical-align: middle;
}
#articleBody .caseContentBody th {
background-color: #EEE;
white-space: nowrap;
}
#articleBody .caseContentBody table img {
vertical-align: bottom;
}
#articleBody .caseOutlineImage .note {
display: block;
text-align: center;
font-size: 12px;
}

/* Case footer */
.caseContentFooter {
background-color: #EEE;
}
#articleBody .caseContentFooter ul {
max-width: 980px;
margin: 0 auto; padding: 32px;
list-style: none;
}
#articleBody .caseContentFooter li {
text-align: center;
}
#articleBody .caseContentFooter .closeButton {
padding: 8px 24px;
background-color: #F8F8F8;
border: 1px solid #CCC;
font-size: 0.9rem;
color: #333;
transition-duration: 0.3s;
}
#articleBody .caseContentFooter .closeButton i {
color: #999;
}
#articleBody .caseContentFooter .closeButton.hover {
background-color: #EBEBEB;
}


@media screen and ( max-width: 1280px ) {
  .caseContentBody .caseContentBodyBlock .problem .inner::before,
  .caseContentBody .caseContentBodyBlock .solve .inner::before,
  .caseContentBody .caseContentBodyBlock .result .inner::before {
  width: 180px;padding-bottom: 27.5%;
  }
  #articleBody .caseContentBody .caseContentBodyBlock .caseContentText {
  width: calc( 100% - 180px );
  font-size: 1rem;
  }
  .caseContentBody .caseContentBodyBlock .imageNone .inner::before {
  display: none;
  }
  #articleBody .caseContentBody .caseContentBodyBlock .imageNone .caseContentText {
  width: 100%;
  padding: 40px 24px 24px;
  }
}
  
@media screen and ( max-width: 740px ) {

#articleBody .caseContentHeader .title h2 {
font-size: 4vw;
}

.caseContentBody .problem .inner, .caseContentBody .solve .inner, .caseContentBody .result .inner {
min-height: inherit;
}
#articleBody .caseContentTitle h3 {
font-size: 3.7vw;
}
#articleBody .caseContentBody h4 {
min-width: inherit;
line-height: 1;
font-size: 2.8vw;
}
#articleBody .caseContentBody .caseContentText h5 {
font-size: 2.7vw;
}
#articleBody .caseContentBody .caseContentText h6 {
font-size: 2.6vw;
}
#articleBody .caseContentBody p,
#articleBody .caseContentBody ul {
font-size: 2.4vw;
}

}

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

.caseContentBody {
padding: 48px 16px;
}
.caseContentTitle {
margin-bottom: 32px;
}
#articleBody .caseContentBody h4 {
left: 8px; top: -24px;
}
.caseContentWrap {
width: calc( 100% - 32px ); height: calc( 100% - 32px );
margin: 16px;
}
.caseOutlineImage {
margin-top: 48px;
}
#articleBody .caseContentHeader .title dt {
font-size: 10px;
}
#articleBody .caseContentHeader .title li {
font-size: 2vw;
}
#articleBody .caseContentBody .caseContentText {
padding: 24px 24px 24px 0;
}
#articleBody .caseContentBody th, #articleBody .caseContentBody td {
font-size: 2.5vw;
}
#articleBody .caseOutlineImage .note {
font-size: 2.3vw;
}
.caseContentBody .solveTheProblem {
padding: 4px 0 20px;
background-size: auto 250%;
}
.caseContentBody .solveTheProblem span {
font-size: 2vw;
}

}

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

.caseContentBody {
padding: 32px 8px;
}
.caseContentWrap {
width: calc( 100% - 8px ); height: calc( 100% - 8px );
margin: 4px;
}

#articleBody .caseContentBody .caseContentText {
width: 100%!important;
padding: 24px 16px 16px 0;
}
.caseContentBody .problem .inner::before,
.caseContentBody .solve .inner::before,
.caseContentBody .result .inner::before {
width: 120px!important;
padding-bottom: 27.5% !important;
}
.caseContentBody .full .result .inner::before {
display: none;
}
#articleBody .caseContentBody .full .caseContentText {
width: 100%;
padding: 24px 16px 16px;
}
#articleBody .rightImage.image33, #articleBody .leftImage.image33 {
width: 80%;
}

}




/* FAQ */

#faqNavi {
float: left;
position: relative;
z-index: 1;
width: 280px;
margin-bottom: 24px;
padding: 24px 8px 8px;
background-color: #FFF;
background-image: linear-gradient( #FFF 75%, #F2F2F2 );
border-bottom: 4px solid #8095B0;
box-shadow: 0 0 8px rgba( 0,0,0,0.1);
}
.faqNaviTitle {
margin-bottom: 8px;
border-bottom: 1px solid #8095B0;
text-align: left;
font-family: Consolas, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
font-size: 10px;
font-weight: bold;
color: #002B62;
}
#articleBody p.faqLead {
max-width: 980px;
margin: 24px auto;
}
#articleBody #faqNavi::before {
content: '';
display: block;
position: absolute;
left: 0; top: 0;
z-index: 2;
width: 100%; height: 16px;
background-image: linear-gradient( -45deg, #EEE 25%, #DDD 25%, #DDD 50%, #EEE 50%, #EEE 75%, #DDD 75%);
background-size: 8px 8px;
}

#articleBody #faqNavi ul {
overflow: hidden;
display: none;
max-width: none; min-width: auto;
margin: 0; padding: 0;
letter-spacing: normal;
}
#articleBody #faqNavi ul li {
display: block;
margin: 0 0 4px; padding: 0;
border: none;
text-align: left;
}
#articleBody #faqNavi a {
overflow: hidden;
position: relative;
z-index: 1;
padding: 8px 32px 8px 12px;
background-color: #FFF;
border: 1px solid #DDD;
font-size: 14px;
color: #555;
white-space: nowrap;
text-overflow: ellipsis;
}
#articleBody #faqNavi a:focus {
outline: none;
border-color: #4F80FF;
}
#articleBody #faqNavi a i {
display: inline-block;
width: 1.5em;
margin-right: .5em;
text-align: center;
color: #FF833B;
opacity: .75;
}
#articleBody #faqNavi a.hover {
background-color: #F2F2F2;
color: #002B62;
}
#articleBody #faqNavi a.hover i {
transform: none;
}
#articleBody #faqNavi a::after {
content: '\f138';
position: absolute;
display: inline-block;
right: 16px;
font-family: 'Font Awesome 5 Free';
font-weight: bold;
color: #002B62;
transition-duration: 0.3s;
}
#articleBody #faqNavi a:hover::after {
right: 12px;
}
#articleBody #faqNavi a.open:hover {
background-color: #FFF;
cursor: default;
}
#articleBody #faqNavi a.open::after {
content: '\f00c';
color: #60C60D;
}
#articleBody #faqNavi a.open:hover::after {
right: 16px;
}

#articleBody h2,
#articleBody h3 {
clear: none;
}
#article.faq .sectionInner {
max-width: none;
}
#article.faq h2 {
max-width: 980px;
margin: 0 auto 48px;
}



#faqContent {
max-width: 1200px;
margin: 0 auto; padding-top: 1px;
}
#faqContent::after {
content: '';
display: block;
clear: both;
}
#articleBody #faqContent h3 {
margin-top: 0;
}
#faqList {
margin: 0 0 0 320px; 
}
#faqList .loading {
position: relative;
z-index: 1;
width: 100%; height: 128px;
background-color: #FFF;
border-radius: 8px;
box-shadow: 0 0 8px rgba( 0,0,0,0.1);
}
#faqList .loading::before {
content: '';
display: block;
position: absolute;
left: 50%; top: 50%;
z-index: 2;
transform: translate(-50%,-50%);
width: 80%; height: 16px;
background-color: #CCC;
background-image: linear-gradient( 90deg, #CCC 50%, #DDD 50% );
background-size: 32px 16px;
border: 1px solid #CCC;
box-shadow: 0 0 4px rgba( 0,0,0,.5 ) inset;
border-radius: 8px;
animation: faqLoadingBar .3s linear infinite;
}
@keyframes faqLoadingBar {
to { background-position: 32px 0; }
}



#faqContent .faqItem {
display: none;
opacity: 0;
transition-duration: .5s;
transform: translateX(30px);
}
#faqContent .faqItem.open {
display: block;
animation: faqShow 1s forwards;
}
@keyframes faqShow {
to { transform: translateX(0); opacity: 1; }
}


#articleBody .sectionInner #faqList ul {
margin: 0; padding: 0;
list-style: none;
}
#faqContent .faqBody dt:focus {
border-radius: 4px;
box-shadow: 0 0 0 1px #4F80FF;
}
#faqContent .q {
display: flex;
margin-bottom: 8px;
cursor: pointer;
}
#faqContent .q .mark {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
background-color: #002B62;
border: 1px solid #002B62;
border-radius: 4px 0 0 4px;
text-align: center;
font-weight: bold;
font-size: 16px;
color: #FFF;
}
#faqContent .q .mark .num {
padding-left: .3em;
font-weight: normal;
font-size: 14px;
}
#faqContent .a {
display: none;
margin: 8px 0 32px; padding: 12px 16px;
background-color: #F8F8F8;
border: 1px solid #CCC;
border-radius: 4px;
}
#faqContent .a .mark {
float: left;
display: block;
width: 48px;
padding: 0 16px 0 0;
border-right: 1px solid #CCC;
text-align: right;
font-weight: bold;
color: #002B62;
}

#faqContent .text {
line-height: 1.75;
letter-spacing: .05em;
font-size: 14px;
}
#faqContent .category {
display: inline-block;
margin-right: 8px; padding: 4px 8px 3px;
background-color: #AFAFAF;
border-radius: 2px;
vertical-align: 1px;
line-height: 1;
font-size: 10px;
color: #FFF;
}
#faqContent .q .text {
position: relative;
z-index: 1;
width: calc( 100% - 64px );
padding: 8px 32px 8px 16px;
background-color: #FFF;
border: 1px solid #002B62;
border-left: none;
border-radius: 0 4px 4px 0;
}
#faqContent .q:hover .text {
background-color: #F0F2F6;
}
#faqContent .q .text::after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f078";
display: block;
position: absolute;
right: 0; top: 50%;
z-index: 2;
transform: translateY(-50%);
width: 32px;
text-align: center;
transition-duration: .2s;
}
#faqContent .q.toggleHeading:hover .text::after  {
transform: translateY(-35%);
}
#faqContent .q.toggleHeading.open .text::after {
transform:  translateY(-50%) rotateX(-180deg);
}
#faqContent .q.toggleHeading.open:hover .text::after {
transform:  translateY(-65%) rotateX(-180deg);
}
#faqContent .a {
overflow: auto;
max-height: 640px;
}
#faqContent .a .text {
display: block;
margin-left: 64px;
}
#faqContent .a pre {
margin: 0;
padding: 8px;
background-color: #333;
border-radius: 2px;
font-family: Consolas, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
color: #DDD;
font-size: 0.9rem;
}

/* 検索 */
#faqContent .search-box {
margin-bottom: 24px;
}
#search-input {
width: calc( 100% - 64px ); height: 32px;
padding: 0 4px;
border: 1px solid #CCC;
vertical-align: top;
color: #333;
outline: none;
}
#search-button {
width: 64px; height: 32px;
margin: 0; padding: 0;
background-color: #DDD;
border: 1px solid #CCC;                      
border-left-color: transparent;
vertical-align: top;
line-height: 30px;
font-size: 11px;
color: #333;
cursor: pointer;
outline: none;
}
#search-button.hover {
background-color: #E0E0E0;
}
#search-button:active {
padding-top: 1px;
background-color: #DDD;
}
#search-input:focus,
#search-button:focus {
border-color: #4F80FF;
}

#faqContent .text .match {
padding: 0 .25em;
background-color: #FF0;
color: #555;
}
#search-result .error {
padding: 24px;
background-color: #FFEEAA;
border: 2px solid #FFCC33;
border-radius: 4px;
animation: faqErrorMessage 1s forwards;
opacity: 0;
}
#search-result .error i {
color: #FFAA00;
}
#faqContent a:hover {
text-decoration: none;
color: #FF833B;
}
@keyframes faqErrorMessage {
to { opacity: 1; }
}

@media screen and ( max-width: 980px ) {
  #faqNavi {
    width: 240px;
  }
  #articleBody #faqNavi a {
    padding: 6px 32px 6px 12px;
    font-size: 12px;
  }
  #faqList {
    margin-left: 260px;
  }
} /* /980px */

@media screen and ( max-width: 800px ) {
  #article.faq h2 {
    margin-bottom: 16px;
  }
  #faqNavi {
    float: none;
    width: 100%;
  }
  #articleBody #faqNavi ul {
    letter-spacing: -0.4em;
  }
  #articleBody #faqNavi ul li {
    display: inline-block;
    width: 50%;
    letter-spacing: normal;
  }
  #articleBody #faqNavi a {
    width: 100%;
  }
  #articleBody #faqNavi ul li:nth-child(odd) {
    padding-right: 4px;
  }
  #articleBody #faqNavi ul li:nth-child(even) {
    padding-left: 4px;
  }
  #faqList {
    margin-left: 0;
  }
} /* /800px */

@media screen and ( max-width: 480px ) {
  #articleBody #faqNavi ul li {
    display: block;
    width: 100%;
  }
  #articleBody #faqNavi ul li:nth-child(odd),
  #articleBody #faqNavi ul li:nth-child(even) {
    padding: 0;
  }
} /* /480px */















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

   Webinar

** -------------------------------------------------- */
#articleBody #webinarList .sectionInner {
max-width: 1200px;
}
#articleBody #webinarList .sectionInner h2 {
border: none;
text-align: center;
font-size: 40px;
}
.webinarTable {
  table-layout: fixed;
}
.webinarTable th,
.webinarTable td {
  padding: 16px;
  border: 1px solid #002B62;
}
.webinarTable th {
text-align: center;
vertical-align: middle;
color: #FFF;
}
.webinarTable thead th {
width: 22.5%;
background-color: #002B62;
border-right-color: #FFF;
line-height: 1.5;
font-size: 1.1rem;
}
.webinarTable thead th:last-child {
border-right-color: #002B62;
}
.webinarTable thead th.blank {
width: 10%;
background-color: transparent;
border: none;
}
.webinarTable tbody th {
background-color: #CCD5E0;
color: #335581;
}
.webinarTable a,
.webinarTable .webinarComingSoon {
display: block;
margin-bottom: 8px; padding: 8px 16px;
background-color: #FFFF99;
text-decoration: none;
line-height: 1;
text-align: center;
font-weight: bold;
font-size: 1.2rem;
font-family: Consolas, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
color: #FFF;
}
.webinarTable a {
transition-duration: .2s;
}
.webinarTable .webinarTableLevel1 a {
background-color: #8CC63F;
}
.webinarTable .webinarTableLevel2 a {
background-color: #FBB03B;
}
.webinarTable .webinarTableLevel3 a {
background-color: #DD0000;
}
.webinarTable a:hover {
opacity: .8;
}
.webinarTable .webinarComingSoon {
background-color: #DDD;
color: #666;
}
.webinarTable tbody th strong {
font-size: 1.5rem;
color: #FFF;
}
.webinarTable td {
background-color: #FFF;
line-height: 1.5;
font-size: 1rem;
}
.webinarNumber {
color: #FFA500;
}
#articleBody .sectionInner .webinarList {
margin: 0; padding: 0;
list-style: none;
}
#articleBody .sectionInner .webinarItem {
    margin: 32px 0;
}
#articleBody .sectionInner .webinarItem::after {
content: '';
display: table;
clear: both;
}
.webinarContainer {
}




.webinarVersionSelect {
z-index: 1;
overflow: auto;
letter-spacing: -0.4em;
white-space: nowrap;
}
.webinarVersionSelectTitle {
display: inline-block;
padding: 0 16px 0 8px;
line-height: 48px;
font-size: 12px;
font-weight: bold;
color: #002B62;
letter-spacing: normal;
white-space: nowrap;
}
#articleBody .sectionInner .webinarVersionList {
display: inline-block;
table-layout: fixed;
height: 48px;
margin: 0; padding: 0;
list-style: none;
white-space: nowrap;
}
#articleBody .sectionInner .webinarVersionItem {
display: inline-block;
margin: 0; padding: 0;
letter-spacing: normal;
vertical-align: middle;
}
.webinarVersionLink {
overflow: hidden;
text-overflow: ellipsis;
display: block;
padding: 0 24px; margin-bottom: -1px;
background-color: #EEE;
background-image: linear-gradient( #EEE 90%, #E2E2E2 );
border: 1px solid #CCC;
border-right: none;
text-decoration: none;
line-height: 46px;
font-family: Consolas, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
font-size: 16px;
color: #333;
}
.webinarVersionLink:hover {
background-image: linear-gradient( #F2F2F2 80%, #EEE );
}
.webinarVersionItem:last-child .webinarVersionLink {
border-right: 1px solid #CCC;
}
.webinarVersionItem.tabOpen .webinarVersionLink {
border-bottom-color: #FFF;
background-image: linear-gradient( #EEE, #FFF );
background-color: #FFF;
box-shadow: 0 0 0 1px #FFF inset;
color: #002B62;
cursor: default;
}
.webinarContent {
display: none;
padding: 24px;
background-color: #FFF;
border-radius: 4px;
box-shadow: 0 2px 8px rgba( 0,0,0,0.2 );
}
.webinarContent.tabOpen {
display: block;
}
.webinarVideo {
float: left;
width: 50%;
padding-right: 16px;
}
.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;
}
.webinarOverview {
float: right;
width: 50%;
padding-left: 16px;
}
.webinarMeta {
display: table;
margin-bottom: 16px;
}
.webinarLevel,
.webinarCode {
display: table-cell;
}
.webinarLevel1,
.webinarLevel2,
.webinarLevel3 {
display: inline-block;
margin-right: 16px; padding: 0 16px;
background-color: #EFEFEF;
border: 1px solid #EFEFEF;
border-radius: 4px;
line-height: 32px;
white-space: nowrap;
color: #FFF;
}
.webinarLevel1 {
background-color: #8CC63F;
border-color: #8CC63F;
}
.webinarLevel2 {
background-color: #FBB03B;
border-color: #FBB03B;
}
.webinarLevel3 {
background-color: #DD0000;
border-color: #DD0000;
}
.webinarTable .webinarLevel1,
.webinarTable .webinarLevel2,
.webinarTable .webinarLevel3 {
margin: 0; padding: 0 8px;
border: 1px solid #FFF;
}
.webinarCodeText {
display: inline-block;
padding: 0 16px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 4px;
line-height: 32px;
white-space: nowrap;
font-weight: bold;
font-family: Consolas, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
color: #002B62;
}
#articleBody .webinarTitle {
margin: 0 0 16px; padding: 0 0 8px;
background: none;
border: none;
border-bottom: 4px solid #DDD;
line-height: 1.5;
font-size: 1.3rem;
font-weight: bold;
color: #000;
}
#articleBody .webinarText {
margin: 0; padding: 0;
line-height: 1.95;
font-size: 1rem;
color: #333;
}
.webinarDocument {
clear: both;
padding-top: 24px;
}
.webinarDocumentVersionSelect {
margin-bottom: 16px;
border-bottom: 1px solid #CCC;
}
.webinarDocumentVersionSelectTitle {
display: inline-block;
padding-right: 16px;
font-size: 16px;
font-weight: bold;
font-family: Consolas, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
color: #AAA;
}
#articleBody .sectionInner .webinarDocumentVersionList {
display: inline-block;
margin: 0; padding: 0;
letter-spacing: -0.4em;
list-style: none;
}
.webinarDocumentVersionItem {
display: inline-block;
letter-spacing: normal;
}
.webinarDocumentVersionItem a {
display: block;
margin-bottom: -1px; padding: 0 16px;
background-color: #EEE;
border: 1px solid #CCC;
border-right: none;
text-decoration: none;
line-height: 32px;
font-family: Consolas, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
color: #333;
}
.webinarDocumentVersionItem:last-child a {
border-right: 1px solid #CCC;
}
.webinarDocumentVersionItem.tabOpen a {
border-bottom-color: #FFF;
background-color: #FFF;
cursor: default;
}
.webinarVideoBody {
  display: none;
}
.webinarVideoBody.tabOpen {
  display: block;
}
.webinarDocumentBody {
  display: none;
}
.webinarDocumentBody.tabOpen {
  display: block;
}
.webinarDocumentTable {
width: 100%;
}
.webinarDocumentTable th,
.webinarDocumentTable td {
padding: 8px 16px;
border: 1px solid #AAA;
font-size: .9rem;
color: #333;
}
.webinarDocumentTable th {
width: 16px;
background-color: #EFEFEF;
white-space: nowrap;
}
.webinarDocumentTable a {
text-decoration: none;
}
.webinarDocumentTable a:hover {
text-decoration: underline;
color: #FF833B;
}
@media screen and ( max-width: 960px ) {
#articleBody #webinarList .sectionInner h2 {
  font-size: 4vw;
}
} /* /980px */

@media screen and ( max-width: 800px ) {
.webinarOverview,
.webinarVideo {
float: none;
width: 100%;
margin: 0 0 16px; padding: 0;
}
.webinarTable a,
.webinarTable .webinarComingSoon {
font-size: 14px;
}
.webinarTable tbody th strong {
font-size: 20px;
}
} /* /800px */

@media screen and ( max-width: 480px ) {
.webinarDocumentTable th {
width: auto;
white-space: normal;
}
#articleBody .webinarTitle {
font-size: 14px;
}
#articleBody .webinarText {
font-size: 11px;
}
.webinarDocumentVersionSelectTitle {
font-size: 12px;
}
.webinarDocumentTable th, .webinarDocumentTable td {
font-size: 11px;
}
.webinarDocumentTable {
border-bottom: 1px solid #CCC;
}
.webinarDocumentTable th,
.webinarDocumentTable td {
display: block;
border-bottom: none;
}
} /* /480px */


/*

Banner

*/
#announceArea {
position: fixed;
bottom: -100%; left: 0;
z-index: 9998;
width: 100%;
background-color: rgba( 0,0,0,.4 );
transition-duration: 1s;
}
#announceArea.open {
bottom: 0;
}
.announceAreaInner {
position: relative;
z-index: 1;
max-width: 824px;
margin: 0 auto; padding: 8px 0;
}
.bannerClose {
position: absolute;
left: 8px; top: 8px;
font-size: 24px;
color: #FFF;
cursor: pointer;
}
.bannerClose.hover {
opacity: .8;
}
.bannerPC {
max-width: 728px;
margin: 0 auto;
}
.bannerSP { display: none; }
.bannerImage {
width: 100%; height: auto;
border: 1px solid transparent;
vertical-align: top;
transition-duration: .2s;
}
.bannerLink.hover .bannerImage {
border-color: #FFF;
}
@media screen and ( max-width: 824px ){
.announceAreaInner {
padding: 4px 64px 4px 32px;
}
.bannerClose {
left: 4px; top: 4px;
}
}
@media screen and ( max-width: 640px ){
.bannerPC { display: none; }
.bannerSP { display: block; }
}




/*

Setting samples

*/
.settingSamplesList {
width: 100%;
margin-bottom: 16px;
border: 1px solid #AAA;
}
.settingSamplesList:last-child {
margin-bottom: 0;
}
.settingSamplesListTitle,
.settingSamplesListData {
background-color: #FFF;
border: 1px solid #AAA;
}
.settingSamplesListTitle {
width: 30%;
vertical-align: top;
}
.settingSamplesListData {
padding: 4px;
background-color: #F2F2F2;
border-right: none;
border-left: none;
vertical-align: middle;
}
.settingSamplesListData.fit {
width: 4px;
}
.settingSamplesSectionLink {
display: block;
text-decoration: none;
color: #111;
}
.settingSamplesSection {
text-align: left;
}
.settingSamplesSectionTitle {
padding: 8px 16px;
background-color: #002B62;
line-height: 1.5;
font-size: 16px;
color: #FFF;
}
.settingSamplesSectionTitle i {
color: #FFA500;
}
.settingSamplesSectionText {
padding: 8px 16px;
line-height: 1.5;
font-weight: normal;
font-size: 14px;
}
.settingSamplesItemLink,
.settingSamplesItemNoLink {
display: block;
position: relative;
z-index: 1;
background-color: #002B62;
border: 1px solid #002B62;
border-left-width: 4px;
text-decoration: none;
color: #333;
}
.settingSamplesItemLink:hover {
border-color: #FF640A;
color:#FF640A;
}
.settingSamplesItem {
background-color: #FFF;
}
.settingSamplesItemLink:hover .settingSamplesItem {
background-color: #FFF9F5;
}
.settingSamplesItemTitle {
padding: 4px 8px 2px;
border-bottom: 1px dotted #DDD;
line-height: 1.5;
font-size: 14px;
}
.settingSamplesItemTitle i {
font-size: 120%;
color: #60C60D;
}
.settingSamplesItemText {
padding: 4px 8px;
line-height: 1.5;
font-size: 12px;
}
.settingSamplesItemNoLink {
background-color: #F8F8F8;
border-color: #CCC;
}
.underConstruction .settingSamplesItemTitle i {
color: #CCC;
}
.settingSamplesKymLink {
display: block;
padding: 0 8px;
background-color: #4183C4;
border-radius: 4px;
text-align: center;
text-decoration: none;
line-height: 32px;
white-space: nowrap;
font-size: 12px;
color: #FFF;
}
.settingSamplesKymLink:hover {
background-color: #34699D;
}
.settingSamplesSubTitle {
display: block;
margin-bottom: 8px;
border-bottom: 1px solid rgba( 255,255,255,.3 );
font-weight: normal;
font-size: 80%;
}
.settingSamplesComingSoon {
position: relative;
z-index: 1;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.settingSamplesComingSoon::after {
content: 'Coming Soon.';
display: block;
position: absolute;
left: 50%; top: 50%;
z-index: 2;
transform: translate(-50%,-50%);
width: 80%;
background-color: rgba( 200,0,0,.7 );
border: 2px solid rgba( 255,255,255,.7 );
border-radius: 8px;
text-align: center;
text-shadow: 0 0 4px rgba( 0,0,0,.5 );
line-height: 64px;
font-size: 24px;
font-weight: bold;
color: #FFF;
}

@media screen and ( max-width: 980px ){
.settingSamplesList,
.settingSamplesComingSoon {
max-width: 640px;
margin: 0 auto 16px;
}
.settingSamplesComingSoon {
margin-bottom: 0;
}
.settingSamplesListTitle,
.settingSamplesListData {
display: block;
width: 100%;
border: none;
border-bottom: 1px solid #CCC;
}
.settingSamplesListData.fit {
width: 100%;
}
.settingSamplesKymLink {
max-width: 60%;
margin: 0 auto;
}
}
@media screen and ( max-width: 640px ){
.settingSamplesSectionTitle {
font-size: 2.8vw;
}
.settingSamplesSectionText,
.settingSamplesItemTitle {
font-size: 2.3vw;
}
.settingSamplesItemText {
font-size: 2vw;
}
.settingSamplesComingSoon::after {
font-size: 4vw;
}
}