/***********************************************************************
/ article settings
/ Copyright (C) Logic Lovers Inc.
/ Released under the MIT License, https://opensource.org/licenses/MIT
/***********************************************************************/

/***********************************************************************
/ color settings
/***********************************************************************/
:root {
    --sBgColorGrid: rgba(0,0,0,0);
    --sBgColorGridItem: #e2f6f5;
    --sBgColorGridHead: #04283f;
}

/***********************************************************************
/ div settings
/***********************************************************************/
/* align */
div.center {
    display: block;
    text-align: center;
    margin: 0 auto;
}

/* main article */
div#mainarticle {
    font-family: sans-serif;
    color: black;
    margin: 0px;
    padding: 1.2em;
    line-height: 1.9em;
}

/***********************************************************************
/ paragraph settings
/***********************************************************************/
/* main title */
h1 {
    margin: 0em;
    padding: 0.3em 0.9em;
    padding-top: 0.6em;
    color: white;
    font-family: sans-serif;
    font-size: 200%;
    line-height: 0.7em;
    text-shadow: 1px 1px 1px #9F3F4F;
    background-color: #0C0B37;
}

/* sub title */
h2 {
    clear: both;
    margin: 2.5em 0em 0em 0em;
    padding: 0.3em 0.8em 0em 0.8em;
    color: #02041d;
    font-family: sans-serif;
    font-size: 150%;
    //line-height: 0.7em;
    //background: linear-gradient(rgba(0,0,0,0) 0%, rgba(255,0,0,0.3) 100%);
    line-height: 1.0em;
    background-color: #ea7618;
}
h2:hover, div.h2arrow:hover {
    cursor: pointer;
}
div.h2arrow {
    color: #151372;
    text-align: right;
    margin-top: -2.0em;
    padding-right: 0.5em;
}
div.subtitletext {
    margin-top: 8px;
    padding-left: 1.7em;
}

/* sub sub title */
h3 {
    clear: both;
    margin: 0.2em;
    margin-top: 48px;
    margin-bottom: 1.2em;
    padding: 0em;
    padding-left: 1.2em;
    padding-right: 1.2em;
    color: #151372;
    font-size: 125%;
    background: linear-gradient(rgba(0,0,0,0) 30%, rgba(0,255,0,0.45) 100%);
}
div.philosophycontent {
    padding-left: 2.1em;
}

/* for director introduction */
h4 {
    padding-left: 2.1em;
    margin-top: 1.9em;
    margin-bottom: 0.5em;
}
div.directorcontent {
    padding: 0.2em 3.0em;
}

/* paragraph */
p {
    clear: both;
}
p.indent {
    padding-left: 3em;
}

/* title sub text */
h1 span, h2 span {
    white-space: nowrap;
}
span.subtext {
    font-size: 50%;
}


/***********************************************************************
/ anchor settings
/***********************************************************************/
a.hover:hover {
    background: rgba(255,127,127,0.1);
}

/***********************************************************************
/ for log
/***********************************************************************/
div#logiframe {
    display: none;
}

/***********************************************************************
/ text setting
/***********************************************************************/
span.nowrap {
    white-space: nowrap;
}

/***********************************************************************
/ image settings
/***********************************************************************/
img {
    max-width: 100%;
}
img.none {
    display: none;
}
img.left {
    display: block;
    float: left;
}
img.right {
    display: block;
    float: right;
}
img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
img.left, img.right {
    margin: 0.9em;
    max-width: calc( 100% - 1.8em );
}
img.inline {
}
img.inline-block {
    display: inline-block;
}
/* profile */
img.profile {
    display: block;
    float: right;
    margin: 0px 0.8em 1.8em 1.8em;
    max-width: 288px;
}

/***********************************************************************
/ for background
/***********************************************************************/
canvas#backgroundcanvas {
    margin: 0px;
    padding: 0px;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    /*min-height: 100%;*/
    object-position: top;
    object-fit: cover;
    background-color: transparent;
    z-index: -511;
}
img#backgroundimg {
    display: none;
    margin: 0px;
    padding: 0px;
}
div#backgrounddivbg {
    margin: 0px;
    padding: 0px;
    min-width: 100%;
    min-height: 100%;
}
div#backgrounddivfg {
    margin: 0px;
    padding: 0px;
    //background-image: url("../img/bgtile.png");
    //background-attachment: fixed;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -512;
    //min-width: 100%;
    //min-height: 100%;
    //background-color: #edfce9;
    background-color: #f9fff5;
    width: 100%;
    height: 100%;
}

/***********************************************************************
/ for menu
/***********************************************************************/
/* whole */
div#menumaindiv {
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-wrap: wrap;
}
/* each */
div.menu {
    font-size: 85%;
    width: calc( ( 100% - 14px ) / 6 );
    height: 1.9em;
    margin: 1px;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: #0c0b37;
}
@media (max-width: 720px) {
    div.menu {
        width: calc( ( 100% - 8px ) / 3 );
    }
    div#mainarticle {
        padding: 1.2em 0.5em;
    }
}
div.menu:hover {
    color: #2f0c5f;
    background-color: #8c92a9;
    cursor: pointer;
}
/* to top */
div.totop {
    clear: both;
    font-size: 85%;
    text-align: right;
}

/***********************************************************************
/ company logo
/***********************************************************************/
#titleblock {
    width: fit-content;
    margin: 32px auto;
    padding: 0px;
    height: 360px;
}
#titlecontainer {
    width: fit-content;
    margin: 0px;
    padding: 0px;
    transition: height 0.3s ease-in-out;
    overflow: hidden;
    cursor: pointer;
}
#mainlogo {
    padding: 0px;
    margin: 0px;
    position: relative;
    top: 0px;
    width: 640px;
    max-width: 100%;
}
#mainlogo.mainlogoanimation {
    --iAnimStopPx: calc( min( 95vw , 640px ) * 1140 / 640 * (-1) );
    animation-name: anm-mainlogo-img;
    animation-duration: 60s;
}
#mainlogocontainer {
    display: block;
    padding: 0px;
    margin: 0px;
    max-height: min( 56vw , 360px );
    overflow: hidden;
}
#mainlogocontainer.mainlogoanimation {
    animation-name: anm-mainlogo-container;
    animation-duration: 60s;
}
#titlecontainer video {
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px;
    max-width: min( 95vw , 640px );
    max-height: min( 95vh , 360px );
}
/* override from index.js */
@keyframes anm-mainlogo-img {
    0% {
        top: 0px;
    }
    13% {
        top: 0px;
    }
    90% {
        top: var(--iAnimStopPx);
    }
    100% {
        top: var(--iAnimStopPx);
    }
}
@keyframes anm-mainlogo-container {
    0% {
        transform: matrix3d( 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1 );
    }
    5% {
        transform: matrix3d( 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1 );
    }
    15% {
        transform: perspective(288px) translateY(144px) rotateX(45deg) translateY(-144px);
    }
    90% {
        transform: perspective(288px) translateY(144px) rotateX(45deg) translateY(-144px);
    }
    100% {
        transform: matrix3d( 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1 );
    }
}

/***********************************************************************
/ section div
/***********************************************************************/
.section {
    padding-top: 0.9em;
    transition: height 0.3s ease-out;
    height: 0px;
    overflow: hidden;
}
.sectionopen {
    height: var(--section-height);
}
.sectionpreopen {
    height: auto;
}

/***********************************************************************
/ top update
/***********************************************************************/
div#topupdatemain {
    display: block;
    width: min( 100% , 640px );
    height: 144px;
    margin: 48px auto;
    overflow: hidden;
}
div#topupdatemain:hover {
    cursor: pointer;
}
div.topupdatediv {
    display: block;
    position: relative;        /* for z-index */
    width: 250px;
    height: 144px;
    margin: 0px auto;
    margin-bottom: -144px;
    overflow: hidden;
    border-left: 6px solid #ea7618;;
    background-color: #faf2eb;
}
img.topupdateimg {
    display: block;
    position: relative;
    top: 0px;                  /* each setting */
    left: 0px;                 /* each setting */
    max-width: 256px;          /* each setting */
    margin: 0px;
    padding: 0px;
}

/***********************************************************************
/ main content
/***********************************************************************/
div.content {
    display: block;
    margin: 8px 8px;
    width: min(calc(100% - 14px - 0.4em) , 400px );
    float: left;
    border-left: 6px solid #ea7618;
    background-color: #faf2eb;
    transition: background-color 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}
div.content:hover {
    cursor: pointer;
    background-color: #f4e4d7;
    transform: scale(1.05);
}
div.content:active {
    background-color: #d3e7ff;
}
div.content img {
    margin: 10px;
    width: 144px;
    height: 144px;
}
div.content div.flexbox {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
}
div.content div.flexbox div.contenttext {
    margin: 1.2em;
    text-align: center;
}
div.contenttext span.comment {
    display: inline-block;
    color: #7f9070;
    font-size: 85%;
    line-height: 1.2em;
}
@media (max-width: 720px) {
    div.content {
        margin: 4px;
    }
    div.content img {
        margin: 6px;
    }
    div.content div.flexbox div.contenttext {
        margin: 0.5em;
    }
}

/* contentbg */
div#contentbg {
    text-align: center;
}
div#contentinlineblock {
    display: inline-block;
    margin: 32px auto;
    width: calc(100% - 1.0em);
}
@media (min-width: calc(848px + 2.4em)) {
    div#contentinlineblock {
        width: 848px;
}
}
@media (min-width: calc(1696px + 2.4em)) {
    div#contentinlineblock {
        width: 1696px;
    }
}


/***********************************************************************
/ footer
/***********************************************************************/
.footernote {
    display: block;
    width: 100%;
    margin: 2.5em 0px;
    padding: 0.2em;
    text-align: center;
    color: gray;
    font-size: 80%;
}