@charset "UTF-8";
/* 
======== CONTENTS ==========================================
	Site Name: 商品ページトップ
    2023.4.8
 =========================================================
/*----------------------------------
 商品トップ用Custom
----------------------------------*/
:root {
  --base-color: #c02;
  --hover-color: #666;
  --bg-color: #f2f2f2;
  --heading-color: #000;
}

/*----------------------------------
  既存レイアウト調整 
 ----------------------------------*/
.hs-container {max-width:100%;width:100% !important; padding: 0;}
.hs-headline.hs-container,ul li a .baseBg + img{ display: none;}
#Contents { padding:0;}

/*----------------------------------
  hero 
 ----------------------------------*/
.mv {
    background-image: url(/-/media/7031FE53516D4D1391D93FB202B9AA8B.ashx);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover
}
@media (min-width: 768px) {
    .mv {
        background-image:url(/-/media/15D8706F8F2E4A37B10CE9F59D8944AA.ashx);
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: cover
    }
}
.mv .mv__container {
    margin: 0 auto;
    padding: 21.3333333333vw 5.3333333333vw 24vw;
    width: 100%
}
@media (min-width: 768px) {
    .mv .mv__container {
        padding:110px 20px 125px;
        max-width: 1060px
    }
}
@media (min-width: 1100px) {
    .mv .mv__container {
        padding:110px 0 125px
    }
}
.mv .mv__heading {
    color: #fff
}
.mv .mv__text {
    margin-top: 4vw;
    color: #fff;
    font-size: 3.7333333333vw;
    font-weight: 700
}
@media (min-width: 768px) {
    .mv .mv__text {
        margin-top:25px;
        letter-spacing: 1px;
        font-size: 18px;
        line-height: 1.95
    }
}


/*----------------------------------
  ～探す　カード調整
 ----------------------------------*/
.global-cards .global-cards-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
    grid-gap: 1.5rem;
}
@container (min-width: 767px) {
    .global-cards .global-cards-list  {
        display: flex;
        flex-wrap: wrap;
    }
}
.global-cards .global-cards-list__item{
    position: relative;
    container: layout inline-size;
    margin: 0 !important;
    width:auto;
}
.global-cards .global-cards-list__item:hover .global-cards-list__image::before {
    background-color:rgb(0 0 0 / 40%);
    backdrop-filter: blur(1px);
}
.global-cards .global-cards-list__image:before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    height:100%;
    transition: height 0.3s linear;
    background-color:#001d6670;
    backdrop-filter: blur(2px);
}
.global-cards .global-cards-list__item:hover .global-cards-list__image:before {
        transition: background-color .2s cubic-bezier(.39,.575,.565,1);
        height: 48%;
        margin:auto;
        transition: height 0.3s linear;        
}
.global-cards .global-cards-list__image img {
    object-fit: cover;
    max-height: 20vh;
}


/*----------------------------------
  事例紹介
 ----------------------------------*/
.case {
    background-color: #f2f2f2
}

.case .case__container {
    margin: 21.3333333333vw auto 0;
    padding: 18.1333333333vw 5.3333333333vw 20vw;
    width: 100%
}
@media (min-width: 768px) {
    .case .case__container {
        margin:120px auto 0;
        padding: 96px 20px;
        max-width: 1060px
    }
}
@media (min-width: 1100px) {
    .case .case__container {
        padding:96px 0
    }
}
.case .case__heading {
    letter-spacing: 2.5px;
    font-size: 24px;
    font-weight: 700
}
@media (min-width: 768px) {
    .case .case__heading {
        font-size:36px
    }
}
.case .case-list {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between
}
.case .case-list__item {
    margin-top: 6.9333333333vw;
    width: 100%;
    background-color: #fff
}
@media (hover: hover) {
    .case .case-list__item:hover .case-list__image:before {
        opacity:1;
        transition: opacity .2s cubic-bezier(.39,.575,.565,1)
    }
}
.case .case-list__item:not(:first-child) {
    margin-top: 5.3333333333vw
}
@media (min-width: 768px) {
    .case .case-list__item {
        margin-top:30px;
        width: calc(33.33333% - 20px)
    }
    .case .case-list__item:not(:first-child) {
        margin-top: 30px
    }
}
/*リンク*/
html .case-list__item a{
    color:#333;
    text-decoration:none;    
}
.case .case-list__image {
    position: relative
}
.case .case-list__image:before {
    content: "";
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity .2s cubic-bezier(.39,.575,.565,1);
    background-color: rgba(0,0,0,.3);
    pointer-events: none
}
.case .case-list__image img {
    width: 100%;
    height: 38.4vw;
    -o-object-fit: cover;
    object-fit: cover
}
@media (min-width: 768px) {
    .case .case-list__image img {
        height:144px
    }
}
.case .case-list__detail {
    padding: 5.3333333333vw
}
@media (min-width: 768px) {
    .case .case-list__detail {
        padding:15px 20px
    }
}
.case .case-list__company {
    font-size: 3.7333333333vw;
    font-weight: 700
}

@media (min-width: 768px) {
    .case .case-list__company {
        font-size:14px
    }
}
.case .case-list__heading {
    margin-top: 2.6666666667vw;
    letter-spacing: 2.5px;
    font-size: 4.2666666667vw;
    font-weight: 700
}
@media (min-width: 768px) {
    .case .case-list__heading {
        margin-top:10px;
        letter-spacing: 1px;
        font-size: 16px
    }
}
.case .case-list__point {
    font-size: 3.4666666667vw
}
.case .case-list__point:not(:first-child) {
    padding-top: 1.0666666667vw
}
@media (min-width: 768px) {
    .case .case-list__point {
        font-size:13px
    }

    .case .case-list__point:not(:first-child) {
        padding-top: 2px
    }
}
.case .case__link {
    margin-top: 6.9333333333vw;
    text-align: right
}
@media (min-width: 768px) {
    .case .case__link {
        margin-top:38px
    }
}


/*----------------------------------
  セミナー・展示会
 ----------------------------------*/
.event {
    background-image: url(/-/media/9ECBD147678B4A64B7921F860D16277E.ashx);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover
}
@media (min-width: 768px) {
    .event {
        background-image:url(/-/media/AC1FB4946F304871A006D48BBFD2086C.ashx);
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: cover
    }
}
.event .event__container {
    margin: 0 auto;
    padding: 28vw 5.3333333333vw 36vw;
    width: 100%
}
@media (min-width: 768px) {
    .event .event__container {
        margin:0 auto;
        padding: 128px 20px 138px;
        max-width: 1060px
    }
}
@media (min-width: 1100px) {
    .event .event__container {
        padding:128px 0 138px
    }
}
.event .event__heading {
    letter-spacing: 2.5px;
    font-size: 24px;
    font-weight: 700
}
@media (min-width: 768px) {
    .event .event__heading {
        font-size:36px
    }
}
.event .event__text {
    margin-top: 4vw
}
@media (min-width: 768px) {
    .event .event__text {
        margin-top:15px
    }
}
.event .event__link {
    margin-top: 5.3333333333vw
}
@media (min-width: 768px) {
    .event .event__link {
        margin-top:30px
    }
}

/*----------------------------------
  技術から探す
 ----------------------------------*/
/*共通スタイルを調整*/
@media(max-width: 767.98px) {
    .org-l-contents--gutters-md{
        padding-right: 5.3333333333vw;
        padding-left: 5.3333333333vw;
    }
}
@media(min-width: 767px) {
    .global-cards .global-cards-list__image img {
        max-height: 197px !important;
    }
}

/*----------------------------------
  お知らせ
 ----------------------------------*/

html a.global-news-list__link{
    color:#333;
    text-decoration:none;
}
html a.global-news-list__link:hover .global-news-list__date{
    color:#c02;    
}


/*----------------------------------
  ユーティリティ
 ----------------------------------*/
/* マウスイベント無効 */
.u-noevents ,
a.u-noevents {
    pointer-events: none;
    text-decoration:none !important;
    color:inherit;
}

/*----------------------------------
  リンク
 ----------------------------------*/
html a.c-button {
    text-decoration:none !important;
}