@charset "UTF-8";
/*
Description: トップページ専用スタイル
*/

/*================================================
トップイメージ
================================================*/
:root { --top-height: 500px; }

main section.top-image { height: var(--top-height); border-bottom: 2px solid #a8a8a8; }
main section.top-image > img { width: 100vw; max-width: 100%; height: var(--top-height); object-fit: cover; }
main section.top-image > .container { position: relative; top: -320px; color: #ffffff; }
main section.top-image h1 { margin-bottom: 10px; font-size: 34px; font-weight: bold; }
main section.top-image p { font-size: 18px; }

@media (max-width: 768px) {
main section.top-image, main section.top-image > img { height: 200px; }
main section.top-image > .container { top: -175px; }
main section.top-image p { font-size: 15px; }
}


/*================================================
製品概要
================================================*/

.overview { padding: 15px; background-color: #ffffff; border: 1px solid #ebebeb; }
.overview h3 { font-size: 20px; font-weight: bold; line-height: 2em; text-align: center; text-decoration: underline; }
.overview .explanation { font-size: 14px; color: #666666; }
@media (max-width: 992px) {
.overview h3 { font-size: 16px; }
}


/*================================================
製品概要
================================================*/

.technology img { width:100%; max-width: 100vw; height: auto; }


/*================================================
新着情報
================================================*/
.news-block {
    display: block;
    width: 100%;
}

.news-block .news {
    margin: 0 auto;
    max-width: 100%;
}

.news dl {
    font-size: 15px;
}

.news dl dt {
    margin-bottom: 5px;
    font-size: 13px;
}

.news dl dd {
    margin-bottom: 25px;
    border-bottom: 1px dashed #a8a8a8;
}

.news dl dd:last-child {
    margin-bottom: 0;
}

/* タグのスタイル */
.news dl dt .tag {
    display: inline-block;
    margin-left: 15px;
    padding: 2px 0;
    width: 65px;
    font-size: 0.8em;
    vertical-align: middle;
    text-align: center;
    color: #fff;
}

.news dl dt .tag-news { background-color: #7283b3; }
.news dl dt .tag-release { background-color: #888888; }

/* PCサイズ (992px以上) */
@media (min-width: 992px) {
    .news-block .news {
        padding: 0 40px;
    }
    .news dl dt {
        float: left;
        padding-right: 30px;
        font-size: 15px;
    }
    .news dl dt, 
    .news dl dd {
        padding-bottom: 10px;
    }
}

/* スマホサイズ (991px以下) */
@media (max-width: 991px) {
    .news-block .news {
        padding: 0 10px;
    }
    /* ボタンなど中央寄せを維持 */
    .news-block .center {
        text-align: center !important;
    }
}

/*================================================
導入事例
================================================*/

.case-study { max-width: 100%; margin: 10px; border-radius: 5px; }
.case-study a { height: 200px; position: relative; overflow: hidden; display: block; border: 1px solid #e3e3e3; }
.case-study h3 { position: absolute; top: 160px; padding-left: 15px; font-weight: bold; color: #ffffff; z-index: 10;}
.case-study img { height: 200px; width: 100%; object-fit: cover; }
.case-study a:hover > img { opacity: 0.8; transition: 1.0s; transform:scale(1.1,1.1); }
@media (max-width: 768px) {
.case-study { margin: 0 0 10px 0; }
}