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


/************** 全体のフォントサイズを変更するには以下を調整 *************/
body, html {font-size: 14px;}
/************************************************************************/

.bgimg-1, .bgimg-2, .bgimg-3 {
  position: relative;
  background-attachment: fixed;
  background-position: center -15em;
  background-repeat: no-repeat;
  background-size: cover;
}
@media only screen and (max-device-width: 1024px) {
    .bgimg-1, .bgimg-2, .bgimg-3 {background-attachment: scroll;}
}
.bgimg-1 {
    background-image: url("../images/index_bg.png");
    min-height: 220px;
    background-color: #EBEBEB;
}
/************ headerロゴの設定 ************/
#Logo {
    position: absolute;
    width: 100%;
    text-align: center;
}
#Logo img {
    width: 40%;
    max-width: 420px;
    opacity: 0.75;
}

.content{
    background-color:#fff;
    padding:10vh 0px 10vh;
    text-align:center;
}
.content h1 {
    font-size: 4vw;
    line-height: 1.1;
    letter-spacing: 0.3em;
    color: #222;
    margin-bottom: 0.5em;
}
.content p {
    font-size: 1.2rem;
    line-height: 2.0;
    margin-bottom: 2em;
}
@media screen and (min-width: 1200px) {
    .content h1 {font-size: 2.8rem;}
}
.content figure {
    position: relative;
    margin: 0 auto 0;
    max-width: 1000px;
}
.content figure img {
    width: 90%;
    max-width: 1000px;
}

.content1 {padding-top: 0;}
.content1 h1 {margin-top: 7vh;}
#h1en {font-size: 2rem}

#flowchart {
    background-color: #EBEBEB;
    border: 1px #CCCCCC solid;
    margin: 0 auto;
    width: 90%;
    max-width: 900px;
    padding: 1%;
}
#flowchart h2{font-size: 1.7vw;}
#flowchart h2 + p {
    font-size: 1.3vw;
    line-height: 1.1;
    margin-bottom: 1em;
}
#flowchart dl {
    font-size: 1.2vw;
    font-weight: 600;
    text-align: center;
    list-style: none;
    margin: 0 1.4em 0 0;
    padding: 0;
    display: inline-block;
    width: 22%;
    vertical-align: top;
}
#flowchart dl dt, #flowchart dl dd {
    margin: 0;
    padding: 0;
}
#flowchart dt+dd {
    background-color: #bcbcbc;
    color: #fff;
    position: relative;
    height: 2em;
    line-height: 2.1em;
}
#flowchart dt+dd::after {
    content: "";
    position: absolute;
    top: 0;
    right: -2em;
    border: 1em solid transparent;
    border-left: 1em solid #bcbcbc;
}
#flowchart dl#flow1 {color:#8D7B9A;}
#flowchart dl#flow2 {color:#5D9EDD;}
#flowchart dl#flow3 {
    width: 44%;
    color:#5C8373;
}
#flowchart dl#flow1 dt+dd {background-color:#8D7B9A;}
#flowchart dl#flow1 dt+dd::after {border-left-color: #8D7B9A;}
#flowchart dl#flow2 dt+dd {background-color:#5D9EDD;}
#flowchart dl#flow2 dt+dd::after {border-left-color: #5D9EDD;}
#flowchart dl#flow3 dt+dd {background-color:#5C8373;}
#flowchart dl#flow3 dt+dd::after {border-left-color: #5C8373;}
#flowchart dd#flowArrow {
    margin-right: -0.8em;
    margin-left: -0.1em;
    margin-top: 0.2em;
    background-image: url(../images/flow_arrow.png);
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 0.3em;
    min-height: 25px;
}
#flowchart dd#flowArrow_en {
    margin-right: -0.8em;
    margin-left: -0.1em;
    margin-top: 0.2em;
    background-image: url(../images/flow_arrow_en.png);
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 0.3em;
    min-height: 25px;
    font-size: 1.0vw;
}

@media screen and (min-width: 1200px) {
    #flowchart h2{font-size: 1.4rem;}
    #flowchart h2 + p {font-size: 1rem;}
    #flowchart dl {font-size: 1.2rem;}
}

.content1 figure {margin-top: -1vw;}

.content2 {background-color: #ebebeb;}
#Docker {
    display: inline-block;
    text-align: left;
    max-width: 1000px;
    margin: 0 auto;
    padding: 1%;
}
#Docker h1 {
    font-size: 3.5vw;
    letter-spacing: 0em;
    margin-bottom: 0.1em;
}
#Docker p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 0;
}
@media screen and (min-width: 1200px) {
    #Docker h1 {font-size: 3rem;}
    #Docker p {font-size: 1.2rem;}
}

#TopMessage {
    display: inline-block;
    text-align: left;
    max-width: 1000px;
    margin: 0 auto;
    padding: 1%;
}
#TopMessage h1 {
    font-size: 3.5vw;
    letter-spacing: 0em;
    margin-bottom: 0.1em;
}
#TopMessage p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 0;
}
@media screen and (min-width: 1200px) {
    #TopMessage h1 {font-size: 3rem;}
    #TopMessage p {font-size: 1.2rem;}
}
.content3 {margin: 1vh auto;}
.Button {
    display: inline-block;
    margin: 0.5em;
    padding: 0.6em;
}
.Button p {
    line-height: 1;
    margin: 0;
}
.Button a {
    color: #fff;
    font-size: 1.1rem;
    padding: 0.8em 2em 0.7em;
    background-color: #0082FF;
    border-radius: 4px;
    display: block;
    width: 15em;
}
.Button a img {
    width: 1em;
    margin-right: 0.5em;
}
.sticky {
    background-color: #ebebeb;
    margin: 0vh auto;
    padding: 0;
    position: sticky;
    top: -1px;
    z-index: 10;
    border-bottom: solid 1px #ccc;
}

.bgimg-2 {}
.bgimg-3 {}

/************ 簡易フォーマットブロックの設定 ************/
#SimpleFormat.accordion {
    position: relative;
    margin: -1em auto 5em;
    width: 75%;
    max-width: 900px;
    min-width: 880px;
}
.toggle {display: none;}
.title,
.detail {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: all 0.3s;
    border: solid 1px #777;
}
.title {
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1;
    padding: 0.7em 1em;
    display: block;
    width: 30em;
    margin: 0 auto;
    border-radius: 10em;
    background-color: #fff;
    position: relative;
    z-index: 9;
}
.title:hover {cursor: pointer;}
.title::after,
.title::before {
    content: "";
    position: absolute;
    right: 1.5em;
    top: 0.8em;
    width: 2px;
    height: 0.75em;
    background-color: #999;
    transition: all 0.3s;
}
.title::after {
    transform: rotate(90deg);
}
.detail {
    height: 0px;
    overflow: hidden;
    margin: -1.5em 0;
    border-bottom: none;
}
/********** ブロック内の左右の隙間 *********/
/** ※detailのpadding使うと挙動が変なので **/
.detail h2,
.detail h3,
.detail p,
.detail ul {
    margin-right: 2em;
    margin-left: 2em;
}
.detail h2 {
    font-size: 1.4rem;
    margin-top: 3em;
}
.detail h3 {
    font-size: 1.4rem;
    border-top: solid 1px #666;
    border-bottom: solid 1px #666;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    margin-top: 2em;
}
.detail p {
    margin-top: 0.5em;
    margin-bottom: 0em;
    font-size: 1.1rem;
    text-align: left;
    line-height: 1.55;
}
.detail ul {
    font-size: 1.1rem;
    text-align: left;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 2em;
    font-weight: 600;
}
.detail ul li {margin-bottom: 0.5em;}
.detail p + ul {margin-top: 0.5em;}
.toggle:checked + .title + .detail {
    height: auto;
    transition: all 1s;
    border-bottom: solid 1px #ccc;
    border-radius: 1em;
    padding-bottom: 1em;
}
.toggle:checked + .title::before {
    transform: rotate(90deg) !important;
}

#SimpleFormat .Button a {
    font-size: 1.1rem;
    font-weight: 600;
    background-color: #fff;
    color: #444;
    width: auto;
    border: solid 2px #666;
}

/************ 統制語彙編集とSVDブロックの設定 ************/
#HelpContent{
    width: 90%;
    max-width: 900px;
    margin: 100px auto 70px;
}
#Overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(100, 100, 100, .8);
    z-index: 999;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: all 0.1;
    visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media (max-height: 520px) {
    #Overlay {align-items: start;}
}
.HelpTitle {
    font-size: 1.5em;
    font-weight: bold;
    color: #0082FF;
    width: 26em;
    margin: 0 auto;
    padding: 0.8em;
    display: block;
    background-color: #fff;
    position: relative;
    z-index: 9;
    border: solid 3px #0082FF;
    border-radius: 4px;
}
.HelpTitle:hover{cursor: pointer;}
#OverlaySW:checked + .HelpTitle + #Overlay {visibility: visible;}
/****** オーバーレイで初期表示のために ******/
#OverlaySW:checked + .HelpTitle + #Overlay #Section01 {
    height: auto;
    visibility: visible;
    display: block;
}
#Overlay #Contents {
    background-color: #fff;
    min-height: 520px;
    height: 85%;
    width: 70%;
    min-width: 870px;
    border-radius: 1em;
    position: relative;
    overflow: auto;
}
.Label {
    display: inline-block;
    float: right;           /*** 順序を逆に ***/
    padding: 0.5em;
    font-weight: bold;
    width: 10em;
    margin: 1em 0.5em;
    border-radius: 0.5em;
    background-color: #fff;
    border: solid 1px #ccc;
}
.close {
    border: solid 3px #666;
    background-color: #f4f4f4;
    padding: calc(0.5em - 3px) calc(1em - 3px) ;
    bottom: 10px;
    margin-right: calc(50% - 21.5em);
}
.Label:hover{cursor: pointer;}
.section {
    padding: 1% 3% 0;
    min-height: auto;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    height: 0px;
    overflow: hidden;
    visibility: hidden;
    display: none;
    margin: 0 auto;
    position: relative;
}
.section p {
    line-height: 1.7;
}
.section p em {
    font-size: 1.3rem;
}
.section p em em{
    font-size: 1.6rem;
    line-height: 1;
}
.section .Img {
    margin: 0 auto;
    width: 90%;
    margin-top: 1%;
}
.section .Emp {
    font-size: 1.2rem;
}
#Section02.section .Emp {
    display: inline-block;
    margin-top: -2em;
}
#Section02.section #Point {
    display: inline-block;
    padding: 2em 1.6em 1.4em;
    margin: -3.3em 0 0 3em;
    background-color: #009700;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    position: absolute;
    top: 6em;
}
#Section03.section .Emp li {
    float: left;
    margin-right: 3em;
}

.button:checked + .Label {
    background-color: #999;
    color: #fff;
}
#OverlaySW:checked + .HelpTitle + #Overlay .block01 {
    background-color: #999;
    color: #fff;
}
#block-01.button:checked ~ #Section01,
#block-02.button:checked ~ #Section02,
#block-03.button:checked ~ #Section03 {
    height: auto;
    visibility: visible;
    display: block;
}
/****** 初期表示を消す ******/
#block-02.button:checked ~ #Section01,
#block-03.button:checked ~ #Section01 {
    height: 0px !important ;
    visibility: hidden !important ;
    display: none !important;
}
#block-02.button:checked ~ .block01,
#block-03.button:checked ~ .block01 {
    background-color: #fff !important;
    color: #444 !important;
}

/************ footerブロックの設定 ************/
footer {
    padding: 70px 0;
    clear: both;
}
#footerArea {
    background-color: rgba(255, 255, 255, 0.7);
    padding: 40px 0;
}
#FooterContent {
    width: 70%;
    margin: 0 auto;
    text-align: center;
}
footer h1 {
    font-size: 1rem;
    line-height: 1.1;
    font-weight: 500;
    color: #000;
    margin-top: 0.2em;
    margin-bottom: 0;
}
footer p {
    color: #000;
    font-size: 1rem;
    line-height: 1.1;
    margin: 0.2em 0 1em;
}
footer img {
    width: 35%;
    max-width: 300px;
}
footer ul {
    list-style: none;
    margin: 5em auto 0;
    padding: 0;
    display: inline;
}
footer ul li {
    display: inline;
    margin: 0 0.5em;
    white-space: nowrap;
}
footer ul li a {color: #0082FF;}
footer ul li a:before {
    content: "";
    margin: -0.2em 0.3em 0.2em;
    width: 0.4em;
    height: 0.4em;
    display: inline-block;
    border-top: 2px solid #0082FF;
    border-right: 2px solid #0082FF;
    transform: rotate(45deg);
}