


@charset "utf-8";
/* 
======== CONTENTS ==========================================
	Site Name: casesトップ
    2023.5.10
 =========================================================
*/

/* 既存レイアウト調整 */
#fc img, #fb img, #fs img { width: initial;}div#fc {width:100%;}.hs-container,div#fb,.JS #Contents {max-width:100%;width:100% !important;padding:0;}
.case-list__item, .case-list { position: inherit !important;}.case .case-list  {height: inherit !important;width: 100% !important;flex-wrap: wrap;}.hs-headline{display:none;}

/* ページ用スタイル */
.search .search__container{margin:0 auto;padding:8vw 5.3333333333vw 0;width:100%}@media (min-width:768px){.search .search__container{padding:46px 20px 0;max-width:1060px}}@media (min-width:1100px){.search .search__container{padding:46px 0 0}}.search .search__text{margin-top:4vw;font-weight:700}@media (min-width:768px){.search .search__text{margin-top:25px;letter-spacing:.0625rem;font-size:1.125rem;line-height:1.95}}.search .search__input{display:flex;justify-content:center;margin-top:10.6666666667vw;padding-bottom:10.6666666667vw}@media (min-width:768px){.search .search__input{margin-top:50px;padding-bottom:60px}}.search .search__form{max-width:844px}.search .search-tabs{background-color:#f2f2f2}.search .search-tabs__buttons{display:flex;width:100%}.search .search__tab{display:flex;align-items:center;justify-content:center;padding:2.6666666667vw;width:50%;transition:background-color .22s cubic-bezier(.39,.575,.565,1),color .22s cubic-bezier(.39,.575,.565,1);background-color:#ddd;text-align:center;color:#000;font-size:3.2vw;font-weight:400}.search .search__tab.search__tab--current{position:relative;background-color:#c02;color:#fff}.search .search__tab.search__tab--current:before{content:"";position:absolute;bottom:-10px;left:50%;margin-left:-5px;border-top:10px solid #c02;border-right:10px solid transparent;border-left:10px solid transparent;width:0;height:0}@media (min-width:768px){.search .search__tab{padding:25px;font-size:1rem}}@media (hover:hover){.search .search__tab:hover{background-color:#707070;text-decoration:none;color:#fff}.search .search__tab.search__tab--current:hover{background-color:#c02}}.search .search-tabs__container{display:flex;flex-flow:column;padding:13.3333333333vw 8vw}@media (min-width:768px){.search .search-tabs__container{flex-flow:row;justify-content:space-between;padding:40px}}.search .select2{width:100%!important}.search .select2:not(:first-of-type){margin-top:5.3333333333vw}@media (min-width:768px){.search .select2{width:50%!important;max-width:474px}.search .select2:not(:first-of-type){margin-top:0;margin-left:30px}}.search .select2 .select2-selection{padding:4vw;border:1px solid #ddd;height:auto}@media (min-width:768px){.search .select2 .select2-selection{padding:20px}}.search .select2 .select2-selection__rendered{font-size:3.4666666667vw}@media (min-width:768px){.search .select2 .select2-selection__rendered{font-size:1rem}}.search .select2 .select2-selection__arrow{position:absolute;top:50%;right:7px;height:auto;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.search .select2 .select2-selection__arrow b{margin:0;border:none;width:11px;height:6px;background-image:url(/r22res/image/common/icon_select.svg);background-repeat:no-repeat;background-position:50%;background-size:cover}.select2-results .select2-dropdown{border:1px solid #ddd}.select2-results .select2-results__options{min-height:215px}.case{background-color:#f2f2f2}.case .case__container{margin:10.6666666667vw auto 0;padding:17.3333333333vw 5.3333333333vw 21.3333333333vw;width:100%}@media (min-width:768px){.case .case__container{margin:60px auto 0;padding:110px 20px 120px;max-width:1060px}}@media (min-width:1100px){.case .case__container{padding:110px 0 120px}}.case .case__heading{letter-spacing:.15625rem;font-size:1.5rem;font-weight:700}@media (min-width:768px){.case .case__heading{font-size:1.875rem}}.case .case__result{font-size:3.7333333333vw}@media (min-width:768px){.case .case__result{font-size:.875rem}}.case .case-list{display:flex;flex-flow:wrap}.case .case-list__item{margin-top:8vw;width:100%;background-color:#fff}.case .case-list__item:not(:first-child){margin-top:5.3333333333vw}@media (min-width:768px){.case .case-list__item{margin-top:30px;margin-right:20px;width:calc(33.33333% - 20px)}.case .case-list__item:nth-of-type(3n){margin-right:0}.case .case-list__item:not(:first-child){margin-top:30px}}@media (min-width:768px) and (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__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:0 5.3333333333vw 5.3333333333vw;border-top:2px solid #f2f2f2}@media (min-width:768px){.case .case-list__detail{padding:0 20px 15px}}.case .case-list__company{padding-top:5.3333333333vw;font-size:3.7333333333vw;font-weight:700}@media (min-width:768px){.case .case-list__company{padding-top:15px;font-size:.875rem}}.case .case-list__heading{margin-top:2.6666666667vw;letter-spacing:.15625rem;font-size:4.2666666667vw;font-weight:700}@media (min-width:768px){.case .case-list__heading{margin-top:10px;letter-spacing:.0625rem;font-size:1rem}}.case .case-list__description{margin-top:2.6666666667vw;padding:5.3333333333vw 0 0;border-top:2px solid #f2f2f2}@media (min-width:768px){.case .case-list__description{margin-top:10px;padding:16px 0 0}}.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:.8125rem}.case .case-list__point:not(:first-child){padding-top:2px}}.case .case__link{margin-top:8vw;text-align:center}@media (min-width:768px){.case .case__link{margin-top:40px}.case .case__link .c-button{font-size:1rem}}

/* NEWアイコン
    更新日～30日間アイコン付与
*/
a.hs-case-cart-iconNew {
    position: relative;
}
a.hs-case-cart-iconNew::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 60px;
    height: 54px;
    background: url(/-/media/B97D204C0D97474DA56982366EFC43A5.ashx) left top no-repeat;
    background-size: 100% auto;
}
a.hs-case-cart-iconNew::after {
    content: "NEW";
    position: absolute;
    top: 10px;
    left: 4px;
    z-index: 11;
    font-weight: bold;
    font-size: 12px;
    color: #fff;
    line-height: 100%;
}

/*--------------------
検索窓
--------------------*/
.c-form-search {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%
}
@media (min-width:768px) {
    .c-form-search {
        max-width: 844px
    }
}
.c-form-search .c-form-search__input {
    padding: 4vw 14.6666666667vw 4vw 5.3333333333vw;
    border: 2px solid #ddd;
    border-radius: 35px;
    width: 100%;
    font-size: 3.7333333333vw;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}
@media (min-width:768px) {
    .c-form-search .c-form-search__input {
        padding: 15px 70px 15px 20px;
        letter-spacing: .0625rem;
        font-size: 1rem
    }
}
.c-form-search .c-form-search__input::-webkit-input-placeholder {
    opacity: .8
}
.c-form-search .c-form-search__input::-moz-placeholder {
    opacity: .8
}
.c-form-search .c-form-search__input::placeholder {
    opacity: .8
}
.c-form-search .c-form-search__button {
    position: absolute;
    top: 50%;
    right: 4vw;
    width: 9.6vw;
    height: 9.6vw;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-image: url(/r22res/image/common/icon_search.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 8vw 8vw
}
@media (min-width:768px) {
    .c-form-search .c-form-search__button {
        right: 20px;
        width: 48px;
        height: 48px;
        background-size: 34px 34px
    }
}

