@charset "UTF-8";
:root {
}
.content{
    border-top: none;
}
@media ( width <= 640px ) {
    #timetable {
        padding: 0vw 0vw 10.0vw 0vw;
    }
}
h2.blue{
    background: #11366E;
    border-radius: 400px;
}
#lede .inner {
    margin-top: -60px;
    padding-top: 0px; 
}
.wrap-anim1 {
    position: absolute;
    width: 20%;
    top: 70%;
    left: 28%;
    z-index: 200;
}
@media (max-width: 640px) {
    .wrap-anim1 {
        display: none;
    }
}
.wrap-anim2 {
    position: absolute;
    width: 20%;
    top: 26%;
    left: 65%;
    z-index: 200;
}
@media (max-width: 640px) {
    .wrap-anim2 {
        display: none;
    }
}
.swing {
    max-width: 20%;
    animation-name: my-floating;
    animation-duration: 4000ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.swing1 {
    max-width: 20%;
    animation-name: my-floating;
    animation-duration: 4000ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.swing2 {
    max-width: 20%;
    animation-name: my-floating2;
    animation-duration: 4000ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes my-swing {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(25deg);
    }
}
.fuwafuwa {  
    max-width: 30%;
    animation-name: my-floating;
    animation-duration: 5000ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.fuwafuwa1 {  
    max-width: 30%;
    animation-name: my-floating;
    animation-duration: 5000ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.fuwafuwa2 {  
    max-width: 30%;
    animation-name: my-floating2;
    animation-duration: 5000ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/*旧
.fuwafuwa2 {
    width: 150px;
    animation-name: my-floating;
    animation-duration: 3000ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.fuwafuwa3 {
    width: 100px;
    animation-name: my-floating;
    animation-duration: 3000ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
*/
@keyframes my-floating {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}
@keyframes my-floating2 {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(20px);
    }
    100% {
        transform: translateX(0);
    }
}
/* トップ画像をPC画面でも左右いっぱいに広げる */
@media ( width > 980px ) {
    #top_ga_img img {
        margin: 0 calc(50% - 50vw);
        width: 100vw;
        /* max-width: 100vw; */
    }
    #mv .switch {
        margin: 0 calc(50% - 50vw);
        /* margin-top: 70px; */
        width: 100vw;
        max-width: 100vw;
    }
}
@media ( width <= 980px ) {
    #top_ga_img img {
        margin: 0;
        width: 100%;
        max-width: 100%;
    }
    #mv .switch {
        margin: 0;
        width: 100%;
        max-width: 100%;
    }
}
@media ( width >= 640px ) {
    #top_ga_img img {
        margin-top: 0;
    }
    #mv {
        height:0
    }
    #lede .inner {
        margin-top: 0px;
        padding-top: 0px; 
    }
}
.oshirase{
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;  /* 四角の高さ */
    background-color: grey; /* 四角の色 */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
:root {
    --header-btn-height: 48px;
    --header-btn-width: 130px;
    --hukidashi-color: var(--main-color);
    --TableHeads-height: 46px;
    --TableItems-height: 90px;
    --hybrid: #9D9E9C;
    --notHybrid: #5F5F5F;
}
body.index {
    background-color: white;
}
.sp-none {
    display: none;
}
.pc-none {
    display: inline;
}
@media (min-width: 640px) {
    .sp-none {
        display: inline;
    }
    .pc-none {
        display: none;
    }
}
.br-sp {
    display: inline;
}
@media (min-width: 640px) {
    .br-sp {
        display: none;
    }
}
/* OF nav base on MT */
#header2 {
    width: 100%;
    position: -webkit-sticky;
    position: fixed;
    top: 0px;
    padding-top:10px
        z-index: 99;
    z-index: 100;
    background: white;
}
@media (min-width: 640px) and (max-width:980px) {
    #header2 {
        display: flex;
        position: fixed;
        top: 0;
        width: 980px;
        z-index: 300;
        line-height: 1;
        overflow: hidden;
        box-shadow: 0px 1px 11px -5px var(--sub-color1);
    }
}
@media (min-width: 980px) {
    #header2 {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 300;
        line-height: 1;
        overflow: hidden;
        box-shadow: 0px 1px 11px -5px var(--sub-color1);
        display: flex;
        align-items: center;
        zoom: 1;
        max-width: none;
    }
}
@media (min-width: 640px) {
    #header2 .inner {
        display: flex;
        padding: 10px 20px;
        justify-content: space-between;
        text-align: center;
        align-items: center;
        width: 980px;
        height: var(--header-height);      
        margin: 0 auto;
    }
}
@media (min-width: 640px) {
    #header2 a:hover {
        opacity: 0.7;
    }
    #header2 a.disactive:hover {
        opacity: 1;
    }
}
#header2 .anchors {
    position: fixed;
    z-index: 998;
    top: 0;
    right: -120%;
    width: 100dvw;
    height: calc(100dvh - var(--of-nav-sp-height));
    background: var(--accent-color);
    opacity: 0.9;
    transition: all 0.6s;
    display: flex;
    flex-direction: column;
    border-radius: 50% 0 0 50%;
    justify-content: center;
    align-items: flex-start;
    /* display: flex;
    justify-content: center;
    align-items: center;
    margin: 0vw 0vw 3.125vw 0vw; */
}
@media screen and (min-width: 640px),
    print {
        #header2 .anchors {
            margin: 0 10px 0 0;
            flex-wrap: wrap;
            position: unset;
            width: 70%;
            height: unset;
            background: unset;
            flex-direction: unset;
        }
}
#header2 .anchors.panelactive {
    right: -44dvw;
}
#header2 .anchors ul {
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#header2 .anchors li {
    float: unset;
    /* margin: 5px 2px 5px 6%; */
    margin: 5px 2px 5px 8px;
    padding: 5px 4px;
    line-height: 1.4;
    background: unset;
    box-shadow: none;
    width: 50%;
}
@media screen and (min-width: 640px),
    print {
        #header2 .anchors li {
            width: auto;
        }
}
#header2 .anchors li:last-child a:after {
    content: none;
}
#header2 .anchors li a {
    display: block;
    font-size: 4.375vw;
    line-height: 1.2;
    position: relative;
    text-align: center;
    text-decoration: none;
    /* padding: 1.5625vw 0vw 1.5625vw 0vw; */
    padding: 0px;
    color: #FFFFFF;
    letter-spacing: 0.2rem;
}
#header2 .anchors li.pc-none a {
    color: #f38708;    
}

@media (min-width: 640px) {
    #header2 .anchors li a {
        font-size: 1.4rem;
        padding: 0.5em 0.8em;
        display: block;
        color: unset;
        font-size: 1.4rem;
        line-height: 1;
        position: relative;
        text-align: center;
        letter-spacing: unset;
    }
}
#header2 .anchors li a:after {
    position: absolute;
    display: block;
    width: 1px;
    top: 1.5625vw;
    bottom: 1.5625vw;
    right: 0;
    background: unset;
    content: '';
    @media (min-width: 640px) {
        background: #999;
    }
}
#header2 ul.btns {
    display: none;
}
div.apply_mypage {
    display: none;
    a:link,
        a:visited,
        a:hover,
        a:active,
        a:focus {
            color: #606060;
    }
}
@media (min-width: 640px) {
    div.apply_mypage {
        display: inline-block;
    }
}
div.apply_mypage a {
    display: inline-block;
}
@media (min-width: 640px) {
    div.apply_mypage a {
        display: inline-block;
        width: var(--header-btn-width);
        /* height: var(--header-btn-height); */
        font-size: 1.8rem;
        margin: 4px;
        /* padding: 8px 4px; */
        padding: 12px 4px;
        z-index: 999;
        letter-spacing: 0.1rem;
        color: #606060;
        font-weight: 1000;
        border: solid 0.5px #B7B7B7;
        border-radius: 999px;
        background-color: white;
        box-shadow: 10px 10px 10px -10px;
    }
}
div.apply_mypage:last-of-type a {
    background: ;
}
div.apply_mypage a:hover {
    @media (hover: hover) {
        opacity: 0.8;
        text-decoration: none;
    }
}
.content:nth-of-type(2) {
    border-top: none;
}
.index #mv .inner {
    padding: 0 0;
}
/* navi - sp */
#of-nav-sp {
    display: flex;
    width: 100%;
    height: var(--of-nav-sp-height);
    justify-content: space-evenly;
    position: fixed;
    box-sizing: border-box;
    bottom: 0;
    left: 0;
    background: white;
    cursor: pointer;
    z-index: 99;
}
@media (min-width: 640px) {
    #of-nav-sp {
        display: none;
    }
}
#of-nav-sp a {
    display: grid;
    grid-template-areas: "pict span";
    width: 50%;
    height: 80%;
    font-size: 4dvw;
    letter-spacing: 0.6dvw;
    border-radius: 0pt;
    place-items: center center;
    justify-content: center;   
    font-weight: 1000;
    border: solid 0.5px #B7B7B7;
    border-radius: 999px;
    background-color: white;
    box-shadow: 10px 10px 10px -10px;
    margin: 5px;
    color: #272727;
}
#of-nav-sp img {
    width: 40pt;
    height: 40pt;
    margin: 0px 1px;
}
/* navi hamburger menu - sp */
#nav-openbtn {
    display: flex;
    position: fixed;
    top: 10px;
    right: 2dvw;
    background: var(--accent-color);
    cursor: pointer;
    width: 50px;
    height: 50px;
    z-index: 999;
    @media (min-width: 640px) {
        display: none;
    }
    span {
        display: inline-block;
        transition: all .3s;
        position: absolute;
        left: 14px;
        height: 3px;
        border-radius: 2px;
        background: #fff;
        width: 45%;
    }
    span:nth-of-type(1) {
        top: 15px;
    }
    span:nth-of-type(2) {
        top: 23px;
    }
    span:nth-of-type(3) {
        top: 31px;
    }
}
#nav-openbtn.active {
    span:nth-of-type(1) {
        top: 18px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;
    }
    span:nth-of-type(2) {
        opacity: 0;
    }
    span:nth-of-type(3) {
        top: 30px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;
    }
}
/* NII-logo */
/*
div.logo_nii{
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
@media (min-width: 640px) {
#nii-logo {
display: flex;
justify-content: flex-end;
margin-left: 20px;
}
}
*/
div.logo_nii {
    display: flex;
    justify-content: flex-end;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}
@media ( width <= 640px ) {
    div.logo_nii {
        /* display: none; */
        position: absolute;
        top: 8px;
        left: 0;
    }
    div.logo_nii.logo_hide {
        display: none;
    }
}
/* About */
div#overview {
    color: white;
    width: 98dvw;
    margin: 5vw auto;
    display: grid;
    grid-template-areas:
        "subtitle"
        "message"
        "pict";
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    gap: 5vw;
    justify-items: center;
}
@media (min-width: 640px) {
    div#overview {
        /* tmp */
        width: 660px;
        margin: 0px auto;
        gap: var(--TimeTable-gap) var(--TimeTable-gap);
    }
}
div#subtitle p {
    font-family: nitalagoruika, "Noto Sans JP", sans-serif;
    font-weight: 600;
    display: inline-block;
    font-size: 5vw;
    margin: 0 auto;
    color: white;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
}
@media (min-width: 640px) {
    div#subtitle p {
        font-size: 2.4rem;
    }
}
div#pict {
    grid-area: pict;
    img {
        min-width: 330px;
        width: 100%; 
        height: auto;
    }
}
div#subtitle {
    grid-area: subtitle;
    display: grid;
    align-items: center;
}
div#message {
    grid-area: message;
    display: grid;
    text-align: center;
    position: relative;
    border-radius: 12px;
    padding: 20px;
    min-width: 50dvw;
    max-width: 96dvw;
    @media (min-width: 640px) {
        min-width: 45%;
    }
    p {
        span {
            color: var(--sub-color4);
        }
    }
}
#lede {
    background: linear-gradient(#103568, #b0c4de);
    h2.blue {
        font-size: 5.625vw;
        margin: 0vw auto 12.5vw auto;
        width: 78.125vw;
        line-height: 2.4;
        letter-spacing: 0.1em;
        color: #fff;
        font-weight: 400;
        text-align: center;
        background: var(--accent-color);
    }
    @media (min-width: 640px) {
        font-size: 2rem;
        /*width: 300px;*/
        margin: 0 auto 50px;
    }
    p {
        font-size: 4vw;
        @media (min-width: 640px) {
            font-size: 1.6rem;
        }
    }
}
h3 {
    display: inline-block;
    font-size: 5vw;
    margin: 0 auto;
    color: #314299;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
}
@media (min-width: 640px) {
    h3 {
        font-size: 2.4rem;
    }
}
/* Services */
#services .inner {
    /* padding: 0 0 60px; */
    display: grid;
    justify-items: center;
}
#serviceLogo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 95%;
    gap: 20px;
    margin-bottom: 50px;
    img {
        width: 120px;
        max-height: 40px;
        aspect-ratio: 4 / 3;
        margin: 10px;
    }
}
@media ( width <= 640px ) {
    #serviceLogo {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 95%;
        gap: 10px;
        margin-bottom: 20px;
        img {
/*            width: 100px;*/
            width: 29vw;
            max-height: 30px;
            aspect-ratio: 4 / 3;
            margin: 10px;
        }
    }  
}
p.map {
    text-align: left;
    font-size: 4.375vw;
    margin-bottom: 1em;
}
@media (min-width: 640px) {
    p.map {
        padding-left: 146px;
        font-size: 1.6rem;
    }
}
/* Openhouse banner */
.flow_bnr_wrap {
    display: none;
}
@media (min-width: 640px) {
    .flow_bnr_wrap {
        display: block;
        position: fixed;
        bottom: 10rem;
        right: 0;
        width: 5rem;
        font-family: "Noto Sans JP", sans-serif;
        z-index: 999;
    }
    .flow_bnr {
        display: flex;
        writing-mode: vertical-rl;
        flex-direction: row;
    }
    .flow_bnr a {
        background-color: #103568;
        border: 1px solid #103568;
        padding: 1.5rem 2rem 1.5rem 1rem;
        border-radius: 1rem 0 0 1rem;
        color: #ffffff;
        display: block;
        text-align: center;
        font-size: 1.4rem;
        -webkit-text-decoration-skip: objects;
    }
}
@media (hover: hover) {
    .flow_bnr a:hover {
        opacity: 0.8;
        text-decoration: none;
    }
}
/*  tmp start */
#top_ga {
    visibility: hidden;
}
#lede .inner {
    padding: 60px 0 0 0;
}
#header2 a {
    transition-duration: 300ms;
    transition-timing-function:cubic-bezier(0.4,0,0.2,1);
}
#header2 a:hover {
    opacity: 0.5;
}
/*
.schedule-tab .day-tab:hover {
text-decoration: none;
background-color: rgb(148 163 184);
}
.schedule-tab .active {
background-color: rgb(148 163 184);
}
.c1, .c2, .c3,
.c4, .c5, .c6,
.c7, .c8, .c9,
.day-tab {
transition-duration: 300ms;
transition-timing-function:cubic-bezier(0.4,0,0.2,1);
}
*/
#of-nav-sp a {
    transition-duration: 300ms;
    transition-timing-function:cubic-bezier(0.4,0,0.2,1);
}
#of-nav-sp a:hover {
    opacity: 0.5;
}
.nii_logo_img {
    min-width: 187px;
    min-height: 37px;
}
@media (min-width: 640px) {
    #top_ga {
        width: 100%;
        visibility: visible;
        position: relative;
        /* margin-top: 100px; */
        margin-bottom: 50px;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    .nii_logo_img {
        min-width: 187px;
        min-height: 37px;
    }
    .inner.cf {
        min-width:640px;
    }
    #header2 {
        display:flex;
        align-items:center;
    }
}
@media screen and (max-width:640px) {
    #about {padding-top:50px;}
    .spdn{
        display: none;
    }
}
/* tmp end */
/* platform begin */
@media screen and (max-width:640px) {
    .platform-model{
        display: none;
    }
}
@media screen and (min-width:640px) { 
    .platform-model-sp {
        display:none;
    }
    .platform-model{
        font-family: 'Noto Sans JP', sans-serif;
        position: relative;
        width: 660px;
    }
    .rocket-step-inner{
        color: #11366e;
        position:absolute;
        top: 0pt;
        font-size:11pt;
        font-weight: 800;  
    }
    .rocket-top {
        position: relative;
        top:20pt;
        left:9pt;
    }
    .rocket-3 {
        position: relative;
        top:54pt;
        left:5pt;
    }
    .rocket-2 {
        position: relative;
        top:87pt;
        left:5pt;
    }
    .rocket-1 {
        position: relative;
        top:118pt;
        left:-7pt;
    }
    .flip-card {
        background-color: transparent;
        width: 300px;
        height: 200px;
        perspective: 1000px; /* Remove this if you don't want the 3D effect */
        position: absolute;
    }
    .knowledge-card {
        width: 125px;
        height: 50px;
        top: 12px;
        left:435px;
    }
    .public-card {
        font-size: 8px;
        width: 55px;
        height: 50px;
        top: 80px;
        left:340px;
    }
    .management-card {
        font-size: 8px;
        width: 55px;
        height: 50px;
        top: 80px;
        left:404px;
    }
    .search-card {
        font-size: 8px;
        width: 55px;
        height: 50px;
        top: 80px;
        left:468px;
    }
    .list-card {
        font-size: 8px;
        width: 55px;
        height: 50px;
        top: 80px;
        left:532px;
    }
    .learning-card {
        font-size: 8px;
        width: 55px;
        height: 50px;
        top: 80px;
        left:596px;
    }
    .learning-card {
        font-size: 8px;
        width: 55px;
        height: 50px;
        top: 80px;
        left:596px;
    }
    .cloud-card {
        font-size: 8px;
        width: 86px;
        height: 50px;
        top: 150px;
        left:360px;
    }
    .datadriven-card {
        font-size: 8px;
        width: 86px;
        height: 50px;
        top: 150px;
        left:456px;
    }
    .governance-card {
        font-size: 8px;
        width: 86px;
        height: 50px;
        top: 150px;
        left:550px;
    }
    .network-card {
        font-size: 8px;
        width: 86px;
        height: 50px;
        top: 220px;
        left:360px;
    }
    .security-card {
        font-size: 8px;
        width: 86px;
        height: 50px;
        top: 220px;
        left:456px;
    }
    .certification-card {
        font-size: 8px;
        width: 86px;
        height: 50px;
        top: 220px;
        left:550px;
    }
    /* This container is needed to position the front and back side */
    .flip-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.8s;
        transform-style: preserve-3d;
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4);
    }
    /* Do an horizontal flip when you move the mouse over the flip box container */
    .flip-card:hover .flip-card-inner {
        transform: rotateY(180deg);
    }
    /* Position the front and back side */
    .flip-card-front, .flip-card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden; /* Safari */
        backface-visibility: hidden;
    }
    /* Style the front side (fallback if image is missing) */
    .knowledge-card>.flip-card-inner>.flip-card-front {
        font-size: 14px;
        font-weight: bold;
        background-color:#ee8585;
        color: #11366e
    }
    .knowledge-card>.flip-card-inner>.flip-card-front>.text {
        position:absolute;
        top:12pt;
        left:30pt;
    }
    /* Style the back side */
    .knowledge-card>.flip-card-inner>.flip-card-back {
        font-size: 14px;
        font-weight: bold;
        background-color: #ee8590;
        color: #11366e;
        transform: rotateY(180deg);
    }
    .knowledge-card>.flip-card-inner>.flip-card-back>.text {
        position:absolute;
        top:12pt;
        left:30pt;
    }
    .public-card>.flip-card-inner>.flip-card-front {
        background-color:#f4da70;
        color: #11366e;
    }
    .public-card>.flip-card-inner>.flip-card-front>.text {
        font-size: 10px;
        font-weight: bold;
        line-height: 13px;
        position:absolute;
        top:12pt;
        left:5pt;
    }
    /* Style the back side */
    .public-card>.flip-card-inner>.flip-card-back {
        background-color: #f2c611;
        color: #11366e;
        transform: rotateY(180deg);
    }
    .public-card>.flip-card-inner>.flip-card-back>.text {
        font-size: 12px;
        font-weight: bold;
        line-height: 12px;
        position:absolute;
        top:15pt;
        left:7pt;
    }
    .management-card>.flip-card-inner>.flip-card-front {
        background-color:#f4da70;
        color: #11366e;
    }
    .management-card>.flip-card-inner>.flip-card-front>.text {
        font-size: 10px;
        font-weight: bold;
        line-height: 13px;
        position:absolute;
        top:12pt;
        left:5pt;
    }
    /* Style the back side */
    .management-card>.flip-card-inner>.flip-card-back {
        background-color: #f2c611;
        color: #11366e;
        transform: rotateY(180deg);
    }
    .management-card>.flip-card-inner>.flip-card-back>.text {
        font-size: 11px;
        font-weight: bold;
        line-height: 12px;
        position:absolute;
        top:15pt;
        left:3pt;
    }
    .search-card>.flip-card-inner>.flip-card-front {
        background-color:#f4da70;
        color: #11366e;
    }
    .search-card>.flip-card-inner>.flip-card-front>.text {
        font-size: 10px;
        font-weight: bold;
        line-height: 13px;
        position:absolute;
        top:12pt;
        left:5pt;
    }
    /* Style the back side */
    .search-card>.flip-card-inner>.flip-card-back {
        background-color: #f2c611;
        color: #11366e;
        transform: rotateY(180deg);
    }
    .search-card>.flip-card-inner>.flip-card-back>.text {
        font-size: 15px;
        font-weight: bold;
        position:absolute;
        top:13pt;
        left:7pt;
    }
    /* list */
    .list-card>.flip-card-inner>.flip-card-front {
        background-color:#f4da70;
        color: #11366e;
    }
    .list-card>.flip-card-inner>.flip-card-front>.text {
        font-size: 10px;
        font-weight: bold;
        position:absolute;
        top:15pt;
        left:5pt;
    }
    /* Style the back side */
    .list-card>.flip-card-inner>.flip-card-back {
        background-color: #f2c611;
        color: #11366e;
        transform: rotateY(180deg);
    }
    .list-card>.flip-card-inner>.flip-card-back>.text {
        font-size: 8px;
        font-weight: bold;
        line-height: 12px;
        position:absolute;
        top:16pt;
        left:3pt;
    }
    /* learning */
    .learning-card>.flip-card-inner>.flip-card-front {
        background-color:#f4da70;
        color: #11366e;
    }
    .learning-card>.flip-card-inner>.flip-card-front>.text {
        font-size: 10px;
        font-weight: bold;
        line-height: 13px;
        position:absolute;
        top:12pt;
        left:5pt;
    }
    /* Style the back side */
    .learning-card>.flip-card-inner>.flip-card-back {
        background-color: #f2c611;
        color: #11366e;
        transform: rotateY(180deg);
    }
    .learning-card>.flip-card-inner>.flip-card-back>.text {
        font-size: 11px;
        font-weight: bold;
        line-height: 12px;
        position:absolute;
        top:15pt;
        left:3pt;
    }
    /* cloud */
    .cloud-card>.flip-card-inner>.flip-card-front {
        background-color:#6ec09e;
        color: #11366e;
    }
    .cloud-card>.flip-card-inner>.flip-card-front>.text {
        font-size: 10px;
        font-weight: bold;
        position:absolute;
        top:15pt;
        left:3pt;
    }
    /* Style the back side */
    .cloud-card>.flip-card-inner>.flip-card-back {
        background-color: #36bf81;
        color: #11366e;
        transform: rotateY(180deg);
    }
    .cloud-card>.flip-card-inner>.flip-card-back>.text {
        font-size: 10px;
        font-weight: bold;
        line-height: 12px;
        position:absolute;
        top:15pt;
        left:5pt;
    }
    /* datadriven */
    .datadriven-card>.flip-card-inner>.flip-card-front {
        background-color:#6ec09e;
        color: #11366e;
    }
    .datadriven-card>.flip-card-inner>.flip-card-front>.text {
        font-size: 10px;
        font-weight: bold;
        position:absolute;
        top:15pt;
        left:7pt;
    }
    /* Style the back side */
    .datadriven-card>.flip-card-inner>.flip-card-back {
        background-color: #36bf81;
        color: #11366e;
        transform: rotateY(180deg);
    }
    .datadriven-card>.flip-card-inner>.flip-card-back>.text {
        font-size: 10px;
        font-weight: bold;
        line-height: 12px;
        position:absolute;
        top:10pt;
        left:5pt;
    }
    /* governance */
    .governance-card>.flip-card-inner>.flip-card-front {
        background-color:#6ec09e;
        color: #11366e;
    }
    .governance-card>.flip-card-inner>.flip-card-front>.text {
        font-size: 10px;
        font-weight: bold;
        position:absolute;
        top:15pt;
        left:3pt;
    }
    /* Style the back side */
    .governance-card>.flip-card-inner>.flip-card-back {
        background-color: #36bf81;
        color: #11366e;
        transform: rotateY(180deg);
    }
    .governance-card>.flip-card-inner>.flip-card-back>.text {
        font-size: 10px;
        font-weight: bold;
        position:absolute;
        top:15pt;
        left:3pt;
    }
    /* network */
    .network-card>.flip-card-inner>.flip-card-front {
        background-color:#56b8e2;
        color: #11366e;
    }
    .network-card>.flip-card-inner>.flip-card-front>.text {
        font-size: 12px;
        font-weight: bold;
        position:absolute;
        top:13pt;
        left:7pt;
    }
    /* Style the back side */
    .network-card>.flip-card-inner>.flip-card-back {
        background-color: #00a6e0;        ;
        color: #11366e;
        transform: rotateY(180deg);
    }
    .network-card>.flip-card-inner>.flip-card-back>.text {
        font-size: 15px;
        font-weight: bold;
        position:absolute;
        top:12pt;
        left:15pt;
    }
    /* security */
    .security-card>.flip-card-inner>.flip-card-front {
        background-color:#56b8e2;
        color: #11366e;
    }
    .security-card>.flip-card-inner>.flip-card-front>.text {
        font-size: 12px;
        font-weight: bold;
        position:absolute;
        top:13pt;
        left:8pt;
    }
    /* Style the back side */
    .security-card>.flip-card-inner>.flip-card-back {
        background-color: #00a6e0;        ;
        color: #11366e;
        transform: rotateY(180deg);
    }
    .security-card>.flip-card-inner>.flip-card-back>.text {
        font-size: 13px;
        font-weight: bold;
        position:absolute;
        top:14pt;
        left:10pt;
    }
    /* certification */
    .certification-card>.flip-card-inner>.flip-card-front {
        background-color:#56b8e2;
        color: #11366e;
    }
    .certification-card>.flip-card-inner>.flip-card-front>.text {
        font-size: 12px;
        font-weight: bold;
        position:absolute;
        top:13pt;
        left:23pt;
    }
    /* Style the back side */
    .certification-card>.flip-card-inner>.flip-card-back {
        background-color: #00a6e0;        ;
        color: #11366e;
        transform: rotateY(180deg);
    }
    .certification-card>.flip-card-inner>.flip-card-back>.text {
        font-size: 10px;
        font-weight: bold;
        line-height: 10px;
        position:absolute;
        top:10pt;
        left:16pt;
    }
    .icon {
        position:absolute;
        top:1px;
        left:1px;
        height: 18px;
    }
    .icon1 {
        position:absolute;
        top:1px;
        left:1px;
        height: 30px;
    }   
}


.map span {
    display: inline-block;
}
h2.blue {
    width: 300px;
}
@media ( width <= 640px ) {
    h2.blue {
        width: 70vw;
    }
}


#privacy_policy.content {
    margin-bottom: 50px;
}
#privacy_policy.content div.inner > div > div {
    width: 750px;
    margin: auto;
    text-align: center;
}
@media ( width <= 640px ) {
    #privacy_policy.content div.inner > div > div {
        width: 100%;
    }
}
#privacy_policy.content div.inner > div > div p {
    margin-inline: 0;
    font-size: 1.4rem;
    text-align: left;
}
@media ( width <= 640px ) {
    #privacy_policy.content div.inner > div > div p {
        margin-inline: 0;
        /* font-size: 3.75vw; */
        font-size: 3.0vw;
    }
}
#privacy_policy.content div.inner > div > div div.list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 8px;
    place-content: start start;
    margin: 8px 24px 4px 24px;
    font-size: 1.4rem;
    text-align: left;
}
@media ( width <= 640px ) {
    #privacy_policy.content div.inner > div > div div.list {
        /* font-size: 3.75vw; */
        font-size: 3.0vw;
    }
}
#privacy_policy.content div.inner > div > div span {
    display: inline-block;
}


/* pagetop */

.pagetop {
    display: none;
}

@media screen and (min-width: 640px),
    print {
        .pagetop {
            position: fixed;
            right: 10%;
            bottom: 35px;
            z-index: 99999;
            display: flex;
            opacity: 1;
        }
}




/*data_status*/
.smzpreview-article_data_status {
    display: contents !important;
    font-size: 0.7em;
}
span.smzpreview-article_data_baroon_s {
    display: none !important;
}