@charset "UTF-8";
/* CSS Document */
/*
 * Copylight 2020 Cross-Engineering Co., Ltd.
 */
/********************************
 Main Setup
 ********************************/
* {
    padding:    0px;
    margin:     0px;
    font-family: "ヒラギノ丸ゴ ProN W4", "Meiryo";
}

body {
    background-color:   #303030;
}

a:hover {
    color: #0080FF;
}
a {
    color: white;
    text-decoration: none;
}
/********************************
 Main and Wrapper
 ********************************/
#wrapper {
    color:          white;
}
#main {
    display:            flex;
    width:              100%;
    justify-content:    center;
    background-image :      url('../svg/ce-bg.svg');
    background-repeat :     no-repeat;
    background-position:    center center;
    background-size:        contain;
    background-attachment:  fixed;
}
@media (max-width: 960px) {
    #main {
        flex-wrap: wrap;
    }
}
#header-space {
    width: 100%;
}
#content-wrap {
    width: 100%;
}
.content {
    min-width: 256px;
    margin-left:  16px;
    margin-right: 16px;
}
.headline {
    display: flex;
    justify-content:    start;
    width:              100%;
    margin-top:         16px;
    margin-bottom:      16px;
}
.headline-icon {
    background-image :      url('../svg/headline-icon.svg');
    background-repeat :     no-repeat;
    background-position:    center center;
    background-size:        contain;
    min-width:          16px;
    min-height:         32px;
}
.headline-bg {
    width:                  100%;
    height:                 32px; /*iPhoneSE2Fixed 32px->36px*/
    background-image :      url('../svg/headline.svg');
    background-repeat :     no-repeat;
    background-position:    right center;
    background-size:        contain;
    border-bottom:          1px solid rgba(255,255,255,0.1);
}
.headline-text {
    font-size:      14px;
    line-height:    32px;
    font-style:     normal;
    font-weight:    normal;
    padding-left:   16px;
    padding-right:  32px;
}
.content-outer {
    display:                flex;
    justify-content:        center;
    align-items:            center;
    flex-direction:         column;
    
    border:                 1px solid rgba(255,255,255,0.1);
    
    width:                  100%;
    height:                 auto;
    
    margin-top:             16px;
    margin-bottom:          16px;
    padding-left:           16px;
    padding-right:          16px;
    
    box-sizing:             border-box;
}
.content-inner {
    width:                  100%;
    height:                 auto;
    
    margin-top:             16px;
    margin-bottom:          16px;
    padding:                16px;
    
    box-sizing: border-box;
    
    background-color:       rgba(0,0,0,0.2);
    
    font-size:              11pt;
    font-style:             normal;
    font-weight:            normal;
}
.caption {
    width:                  100%;
    background-image :      url('../svg/caption.svg');
    background-repeat :     no-repeat;
    background-position:    left bottom;
    background-size:        auto 1.5px;
    padding-bottom:         8px;
    padding-top:            8px;
    font-size:              14px;
    font-style:             normal;
    font-weight:            normal;
}
.caption-content {
    padding-top:    8px;
    padding-bottom: 8px;
}
.news-title-wrap {
    margin-bottom:          16px;
}

.news-title {

    padding-left:           32px;
    padding-right:          8px;



    font-size:              16px;
    font-style:             normal;
    font-weight:            normal;
    
    border-bottom:          1px solid rgba(255,255,255,0.1);
    box-sizing:             border-box;
    
    width:                  100%;
    height:                 auto;
    
    background-image :      url('../svg/news-title.svg');
    background-repeat :     no-repeat;
    background-position:    left center;
    background-size:        contain;
    line-height: 32px;
}
.news-date {
    padding-left:           8px;
    padding-right:          8px;
    margin-top:             4px;
    margin-bottom:          4px;
    
    text-align:             right;
    font-size:              14px;
    font-style:             normal;
    font-weight:            normal;
    
    background-image :      url('../svg/news-date.svg');
    background-repeat :     no-repeat;
    background-position:    right center;
    background-size:        auto;
    
    width:                  auto;
    height:                 24px;
    line-height:24px;
}
.news-outer {
    display:                flex;
    justify-content:        center;
    align-items:            center;
    flex-direction:         column;
    
    border:                 1px solid rgba(255,255,255,0.1);

    width:                  100%;
    height:                 auto;
    
    margin-top:             16px;
    margin-bottom:          16px;
    padding-left:           16px;
    padding-right:          16px;
    
    box-sizing:             border-box;
}
.news-inner {
    width:                  100%;
    height:                 auto;

    margin-top:             16px;
    margin-bottom:          16px;
    padding:                16px;
    
    box-sizing: border-box;
        
    background-color:       rgba(0,0,0,0.2);
    
    font-size:              11pt;
    font-style:             normal;
    font-weight:            normal;
}
.news-article {

}
.news-info-wrap {
    display:    none;
}
.news-info {
    width:      100%;
    text-align: left;
}
.news-details {
    width:      100%;
    text-align: right;
}

@media (min-width: 481px) {
    .news-img {
        width:                  320px;
        margin-right:           16px;
    }
}
@media (max-width: 480px) {
    .news-img {
        width:                  100%;
        margin-bottom:           16px;
    }
}
#business-genre {
    width:          100%;
    height:         auto;
    max-width:      640px;
    margin-top:     16px;
    margin-bottom:  16px;
}
/********************************
 Header
 ********************************/
#header-outer {
    position:           relative;
    width:              100%;
    height:             auto;
}
#header-inner {
    position:           absolute;
    top: 0;
    left 0;
    width:              100%;
    height:             auto;
}
@media (max-width: 480px) {
    #header-outer:before {
        padding-bottom: 220px;
    }
}
#header-outer:before {
    content:            "";
    display:            block;
    padding-top:        50%;
}
#header-wrap {
    display:            flex;
    background-color:   rgba(0, 0, 0, 1.0);
}
#logo-wrap {
    width:              320px;
    height:             100%;
    z-index:            100;
    position:           relative;
    background-color:   rgba(0, 0, 0, 0.5);
}
#logo {
    width:          288px;
    height:         24px;
    padding-left:   16px;
    padding-right:  16px;
    padding-top:    8px;
    padding-bottom: 8px;
}
#logo img {
    width:          240px;
    height:         24px;
}
#logo-ja {
    width:          256px;
    height:         20px;
    padding-left:   24px;
    padding-right:  24px;
    display:        table;
}
#logo-ja h1 {
    font-size:      12px;
    font-style:     normal;
    font-weight:    100;
    
    text-align:     left;
    display:        table-cell;
    vertical-align: middle;
}
#accent-line {
    left:                   16px;
    top:                    40px;
    width:                  288px;
    height:                 16px;
    position:               absolute;
    background-image :      url('../svg/accent-line1.svg');
    background-repeat :     no-repeat;
    background-position:    center center;
    background-size:        contain;
}
#menu-wrap {
    z-index:            99;
    position:           relative;
    width:              100%;
    background-color:   rgba(0, 0, 0, 0.5);
}
#menu-wrap ul {
    display:            flex;
    list-style-type:    none;
    height:             64px;
    justify-content:    space-around;
    align-items:        center;
}
#menu-wrap li {
    line-height:        120%;
    padding-top:        0.25em;
    padding-bottom:     0.25em;
    font-size:          10pt;
}
.menu-item {
    text-align:         center;
    width:              100%;
    height:             100%;
    box-sizing:         border-box;
    display:            flex;
    justify-content:    center;
    align-items:        center;
}

@media (min-width: 481px) {
    #header-wrap {
        flex-wrap:      nowrap;
    }
    #field-image {
        position:       relative;
        overflow:       hidden;
        padding-top:    50%;
        z-index:        1;
        top:            -64px;
        width:          100%;
    }
    #field-image-img img {
        position:       absolute;
        top:            50%;
        left:           50%;
        transform:      translate(-50%, -50%);
        width:          100%;
        height:         100%;
        object-fit:     cover;
    }
    #field-image-img .sp {
        display:            none;
    }
    #field-image-img .pc {
        display:            inline;
    }
    /* Fixed Offset */
    #field-message-wrap {
        bottom:             0px;
        background-color:   rgba(0, 0, 0, 0.5);
    }
}
@media (max-width: 480px) {
    #header-wrap {
        flex-wrap:      wrap;
    }
    #field-image {
        position:       relative;
        overflow:       hidden;
        padding-top:    50%;
        z-index:        1;
        top:            0px;
        width:          100%;
        height:         96px;
    }
    
    #field-image-img img {
        position:       absolute;
        top:            50%;
        left:           50%;
        transform:      translate(-50%, -50%);
        width:          100%;
        height:         340px;
        object-fit:     cover;
    }
    #field-image-img .sp {
        display:            inline;
    }
    #field-image-img .pc {
        display:            none;
    }
    /* Fixed Offset */
    #field-message-wrap {
        bottom:             0px;
        background-color:   rgba(0, 0, 0, 0.25);
    }

}
@media (min-width: 1280px) {
    #field-message-wrap {
        height:         64px;
    }
}
#field-message-wrap {
    display:            flex;
    justify-content:    space-around;
    align-items:        center;
    flex-wrap:          wrap;
    position:           absolute;
    width:              100%;
    z-index:            100;
}


#field-title {
    padding:            8px;
    font-size:          16px;
    font-style:         normal;
    font-weight:        100;
    width:              144px;
    text-align:         center;
}
#field-allow {

}
#field-allow img {
    width:              128px;
    height:             16px;
}
#field-message {
    padding:            8px;
    font-size:          14px;
    font-style:         normal;
    font-weight:        100;
}
#field-detail {
    display:            table;
}
#field-detail span {
    display:            table-cell;
    text-align:         center;
    vertical-align:     middle;
    font-size:          14px;
    font-style:         normal;
    font-weight:        100;
}
#field-detail img {
    display:            table-cell;
    text-align:         center;
    vertical-align:     middle;
    width:              24px;
    height:             24px;
    margin-top:         8px;
    margin-bottom:      8px
}

.fl {
    float:  left;
}
.cr {
    clear:      both;
    display:    none;
}
.menu-line {
    height:         24px;
    border-left:    1px solid white;
}
/********************************
 Footer
 ********************************/
#footer {
    width:  100%;
    height: auto;

}
#footer-wrap {
    margin: auto 0;
    width:100%
}
#footer-wrap ul {
    background-image :      url('../img/footer-bg.jpg');
    background-repeat :     no-repeat;
    background-position:    center center;
    background-size:        cover;
    
    display:            flex;
    flex-wrap:          wrap;
    list-style-type:    none;
    min-width:          320px;
    height:             auto;
    
    padding-top:         16px;
    padding-bottom:      16px;
    
    justify-content:    space-around;
    align-items:        center;
}
#footer-wrap li {
    line-height:        120%;
    padding-top:        0.25em;
    padding-bottom:     0.25em;
    font-size:          10pt;
    
}
#logo-white-wrap {
    padding-left:   32px;
    padding-right:  32px;
    text-align:     center;
}
#logo-white {
    width:          240px;
    height:         auto;
}
#logo-white-ja {
    font-size:          14px;
    font-style:         normal;
    font-weight:        100;
    
}
#copylight {
    font-size:          14px;
    font-style:         normal;
    font-weight:        100;
    padding-left:       8px;
    padding-right:      8px;
    text-align: center;
}
#social-icons {
    display: flex;
    list-style-type:    none;
    justify-content:    space-between;
    align-items:        center;
    padding-left:       8px;
    padding-right:      8px;
}
#social-icons img {
    width: 24px;
    height: 24px;
    margin-left: 8px;
    margin-right: 8px;
    
}
#return-to {
    display:            flex;
    justify-content:    center;
    align-items:        center;
    padding-left:       16px;
    padding-right:      16px;
}
#return-to-icon {
    width:              32px;
    height:             32px;
    
}
#return-to-text {
    padding-left:       8px;
    padding-right:      8px;
}
.footer-line {
    height:         24px;
    display:        none;
}
@media (min-width:1144px) {
    .footer-line {
        border-left:    1px solid white;
        display:        inline;
    }
}
/********************************
 Side Bar
 ********************************/
.sidebar-frame {
    border:             1px solid rgba(255,255,255,0.1);
    margin-top:         16px;
    margin-bottom:      16px;
    margin-left:        16px;
    margin-right:       16px;
    padding:            16px;
    
    height:             auto;
    box-sizing:         border-box;
}
@media (min-width:960px) {
    .sidebar-frame {
        min-width:  256px;
        max-width:  480px;
        box-sizing: border-box;
    }
}
@media (max-width:959px) {
    #sidebar {
        width: 100%;
    }
}
/********************************
 Page
 ********************************/
.headline-icon-software {
    background-image :      url('../svg/icon-software.svg');
    background-repeat :     no-repeat;
    background-position:    center center;
    background-size:        contain;
    min-width:              80px;
    min-height:             64px;
}
.headline-icon-hardware {
    background-image :      url('../svg/icon-hardware.svg');
    background-repeat :     no-repeat;
    background-position:    center center;
    background-size:        contain;
    min-width:              80px;
    min-height:             64px;
}
.headline-icon-eco {
    background-image :      url('../svg/icon-eco.svg');
    background-repeat :     no-repeat;
    background-position:    center center;
    background-size:        contain;
    min-width:              80px;
    min-height:             64px;
}
.headline-icon-bousai {
    background-image :      url('../svg/icon-bousai.svg');
    background-repeat :     no-repeat;
    background-position:    center center;
    background-size:        contain;
    min-width:              80px;
    min-height:             64px;
}
.headline-icon-earth {
    background-image :      url('../svg/icon-earth.svg');
    background-repeat :     no-repeat;
    background-position:    center center;
    background-size:        contain;
    min-width:              80px;
    min-height:             64px;
}
.headline-icon-enter {
    background-image :      url('../svg/icon-enter.svg');
    background-repeat :     no-repeat;
    background-position:    center center;
    background-size:        contain;
    min-width:              80px;
    min-height:             64px;
}

.caption-wide {
    width:                  100%;
    background-image :      url('../svg/caption-wide.svg');
    background-repeat :     no-repeat;
    background-position:    left bottom;
    background-size:        auto 1.5px;
    padding-bottom:         8px;
    padding-top:            8px;
    margin-bottom:          8px;
    margin-top:             8px;
    font-size:              14px;
    font-style:             normal;
    font-weight:            normal;
}
@media (min-width: 481px) {
    .genre-img {
        width:              300px;
        margin-right:       16px;
    }
    .genre-img .sp {
        
    }
}
@media (max-width: 480px) {
    .genre-img {
        width:              100%;
        margin-bottom:      16px;
    }
}
.about-layout {
    text-align:             center;
}
.about-layout ul {
    list-style-type:        none;
}

.table-style {
    text-align:             center;
}
.table-style img {
    width:                  75%;
    margin-bottom:          32px;
}
.table-style address {
    font-style:             normal;
}
.table-style table{
    width:                  100%;
    box-sizing:             border-box;
    border-collapse:        collapse;
}
.table-style table tr {
    border-bottom:          solid 1px rgba(255,255,255,0.5);
}
.table-style table tr:last-child{
    border-bottom:          none;
}
.table-style table th {
    position:               relative;
    text-align:             left;
    width:                  35%;
    background-color:       rgba(64,192,255,0.5);
    color:                  white;
    text-align:             center;
    padding:                10px 0;
    font-weight:            normal;
}
.table-style table td {
    text-align:             left;
    width:                  65%;
    text-align:             center;
    background-color:       rgba(255,255,255,0);
    padding:                8px 8px;
}
.genre-select {
    width:                  100%;
    display:                flex;
    justify-content:        space-around;
    align-items:            center;
}
.genre-select-img {
    margin:                 16px;
    text-align:             center;
}
.genre-select-img img {
    width:                  256px;
}
.genre-select-headline {
    display:                flex;
    flex-wrap:              wrap;
}
.genre-select-headline-sub {
    display:                flex;
    width: 100%;
}
.genre-description {
    text-align:             center;
    width:                  100%;
}
.genre-description p {
    padding:                16px;
    font-size:              11pt;
}
.genre-link {
    display:                flex;
    align-items:            center;
    justify-content:        center;
    flex-wrap:              nowrap;
    font-size:              11pt;
    background-color:       rgba(0,0,0,0.25);
}
.genre-link img {
    height:                 32px;
    padding:                8px;
}
@media (min-width:960px) {
    .genre-select {
        flex-wrap:          nowrap;
    }
    
}
@media (max-width:959px) {
    .genre-select {
        flex-wrap:          wrap;
    }
}
.contact-send {
    display:                flex;
    align-items:            center;
    color:                  rgba(255,255,176,1.0);
    text-shadow:            0px 0px 2px black;
    font-weight:            900;
    font-size:              24px;
    text-align:             center;
    background-color:       transparent;
    border:                 none;
    background-image :      url('../svg/mail-send.svg');
    background-repeat :     no-repeat;
    background-position:    center center;
    background-size:        auto 128px;
    width:                  160px;
    height:                 128px;
    margin:                 0 auto;
}
.form-input {
    width:      90%;
}
.form-name {
    display: flex;
    flex-wrap:  wrap;
}
.form-name-sub {
    margin:     auto;
}
/********************************
 Animatin
 ********************************/
.fade img {
    z-index:    9;
    opacity:    0;
    animation:  fadeInOut 35s 0s infinite;
    position:   absolute;
}
.fade img:nth-of-type(1) {
    animation-delay: 0s;
}
.fade img:nth-of-type(2) {
    animation-delay: 0s;
}
.fade img:nth-of-type(3) {
    animation-delay: 5s;
}
.fade img:nth-of-type(4) {
    animation-delay: 10s;
}
.fade img:nth-of-type(5) {
    animation-delay: 15s;
}
.fade img:nth-of-type(6) {
    animation-delay: 20s;
}
.fade img:nth-of-type(7) {
    animation-delay: 25s;
}
.fade img:nth-of-type(8) {
    animation-delay: 30s;
}
@keyframes fadeInOut {
    0% {
        opacity:    0;
    }
    8% {
        opacity:    1;
    }
    17% {
        opacity:    1;
    }
    25% {
        opacity:    0;
        z-index:    9;
    }
    100% {
        opacity:    0;
    }
}