@charset "UTF-8"; .main.ex { width: 883px; margin-right: 2px; } .caseList { padding: 15px; background: #EDEFF0; } .caseList__item { margin: 0 0 15px; } .caseList__item img { width: 100%; height: auto; } .no_result { } /*202101追記*/ .caseList.new .caseList__item{ background: #fff; } .caseList.new .caseList__item a{ display: block; width: 100%; height: 100%; } .caseList.new .caseList__item .text-box{ padding: 10px 10px 15px; position: relative; } .caseList.new .caseList__item .icon{ position: absolute; bottom: 15px; right: 15px; width: 22px; } .caseList.new .caseList__item .name-box{ overflow: hidden; height: calc(1.3em * 2); position: relative; line-height: 1.3em; margin-top: 10px; margin-bottom: 10px; } .caseList.new .caseList__item .name-box p{ font-size: 13px; /*position: absolute; width: 100%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);*/ font-weight: 700; } .caseList.new .caseList__item.medical .name-box p{ color:#DD6F91; } .caseList.new .caseList__item.product .name-box p{ color:#D19811; } .caseList.new .caseList__item.logistics .name-box p{ color:#B06F2B; } .caseList.new .caseList__item.shop .name-box p{ color:#539435; } .caseList.new .caseList__item.financial .name-box p{ color:#834F9C; } .caseList.new .caseList__item.maintenance .name-box p{ color:#3D97D3; } .caseList.new .caseList__item.other .name-box p{ color:#5AB9D9; } .caseList.new .caseList__item .info-box{ overflow: hidden; height: calc(1.3em * 2.1); position: relative; line-height: 1.3em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /*margin-top: 5px;*/ } .caseList.new .caseList__item .info-box p{ font-size: 12px; color: #4C4948; } .caseList.new .caseList__item .cat-box{ margin-top: 12px; height: calc(1.3em * 2); line-height: 1.3em; } .caseList.new .caseList__item .cat-box p{ color:#ADADAD; font-size: 11px; } .caseList.new .caseList__item .cat-box p::before{ content: "● "; } .caseList.new .caseList__item.medical .cat-box p::before{ color:#DD6F91; } .caseList.new .caseList__item.product .cat-box p::before{ color:#D19811; } .caseList.new .caseList__item.logistics .cat-box p::before{ color:#B06F2B; } .caseList.new .caseList__item.shop .cat-box p::before{ color:#539435; } .caseList.new .caseList__item.financial .cat-box p::before{ color:#834F9C; } .caseList.new .caseList__item.maintenance .cat-box p::before{ color:#3D97D3; } .caseList.new .caseList__item.other .cat-box p::before{ color:#5AB9D9; } .caseList.new .caseList__item .day-box{ margin-top: 12px; min-height: 14px; } .caseList.new .caseList__item .day-box p{ color:#ADADAD; font-size: 11px; } .taglist{ font-size: 0; } .taglist li{ display: inline-block; width: 49%; margin-right: 1.5%; border-radius: 3px; padding:3px 0px; color:#fff; font-size: 11px; text-align: center; font-weight: 700; box-sizing: border-box; } .taglist li:last-child{ margin-right: 0; } .taglist li.medical{ background:#DD6F91; } .taglist li.product{ background:#D19713; } .taglist li.logistics{ background:#B06F2B; } .taglist li.logistic{ background:#B06F2B; } .taglist li.shop{ background:#539435; } .taglist li.financial{ background:#834F9C; } .taglist li.maintenance{ background:#3D97D3; /*width: 60%;*/ } .taglist li.other{ background:#5AB9D9; } .taglist li.brother{ background:#004898; } .taglist li.genre{ background:#fff; color: #60A3CC; border: 1px solid #60A3CC; } .taglist li.end{ background:#C9CACA; color: #231815; } @media screen and (max-width: 640px) { .main.ex { width: 100%; margin-right: 0; } /*202101追記*/ .caseList.new .caseList__item{ background: #fff; } .caseList.new .caseList__item .text-box{ padding: 16px 16px 16px; position: relative; } .caseList.new .caseList__item .icon{ position: absolute; bottom: 15px; right: 15px; width: 10%; display: none; } .caseList.new .caseList__item .name-box{ overflow: hidden; height: auto; position: relative; line-height: 1.8em; margin-top: 10px; margin-bottom: 0px; } .caseList.new .caseList__item .name-box p{ font-size: 5.0vw; /*position: absolute; width: 100%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);*/ font-weight: 700; } .caseList.new .caseList__item .info-box{ overflow: hidden; height: calc(2.0em * 2.9); position: relative; line-height: 2.0em; display: none; /*margin-top: 5px;*/ } .caseList.new .caseList__item .info-box p{ font-size: 4.4vw; font-size: 4.4vw; } .caseList.new .caseList__item .cat-box{ margin-top: 12px; height: auto; line-height: 1.8em; } .caseList.new .caseList__item .cat-box p{ color:#ADADAD; font-size: 3.9vw; } .caseList.new .caseList__item .day-box{ margin-top: 12px; display: none; } .caseList.new .caseList__item .day-box p{ color:#ADADAD; font-size: 3.9vw; } .taglist{ font-size: 0; } .taglist li{ display: inline-block; width: 49%; margin-right: 1.5%; border-radius: 3px; padding:3px 5px; color:#fff; font-size: 3.9vw; text-align: center; font-weight: 700; box-sizing: border-box; } } @media screen and (min-width: 641px) { .caseList { padding: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-sizing: border-box; box-sizing: border-box; } .caseList__item { width: 254px; background:#fff; } .caseList::after { content: ""; display: block; width: 254px; } } /*202311追記*/ /*.slick-wrap .slick-list .slick-list{ opacity: 0; transition: opacity .3s linear; } .slick-wrap .slick-list.slick-initialized .slick-list{ opacity: 1!important; }*/ .cp_tab { margin: 1em auto; font-size:0; display: flex; justify-content: space-between; } .cp_tab a { font-size: 21px; font-weight: bold; } .cp_tab .cp_tabpanel { display: none; } .cp_tab > a { position: relative; width: 32.9%; display: block; /*display: inline-block;*/ padding: 15px 0; box-sizing: border-box; cursor: pointer; border: 1px solid transparent; border-bottom: 0; vertical-align: bottom; opacity: 1!important; } .cp_tab > a:hover{ opacity: 0.7; } .cp_tab > a span{ padding-right:25px ; background: url(../img/arrow_bg.png) no-repeat right center; background-size:13px; } .cp_tab > a.active span{ background: url(../img/arrow_bg_02.png) no-repeat right center; background-size:13px; } .cp_tab > a { text-align: center; } .tab1_1{ background: #1B2D5A; color:#fff; } .tab1_2{ background: #89A8CE; color:#fff; } .tab1_3{ background: #5f9bc1; color:#fff; margin-right: 0%; } .case-sub_nav{ font-size: 0; } .case-sub_nav li{ display: inline-block; margin-right: 3px; margin-top: 3px; width: 194px; color:#fff; text-align: center; cursor: pointer; font-size: 15px; background: #657D9B; position: relative; font-weight: 600; opacity: 0.5; } .case-sub_nav li.active{ opacity: 1; } .case-sub_nav-2 li{ display: inline-block; margin-right: 3px; margin-top: 3px; width: 194px; color:#fff; text-align: center; cursor: pointer; font-size: 15px; background: #1B2D5A; position: relative; font-weight: 600; } .case-sub_nav-2 li.hide{ opacity: 0.5; pointer-events: none; } .case-sub_nav-2 li.active{ background: #f1bd19; } .case-sub_nav li a,.case-sub_nav-2 li a{ color: #fff; padding:16px 0; display: block; width: 100%; } .case-sub_nav li::after, .case-sub_nav-2 li::after{ content: ""; background: url(../img/yajirushi.png) no-repeat right top; background-size: 100%; width: 6px; height: 11px; right: 12px; position: absolute; top: 40%; } .topSection, .topSubSection { padding: 37px 37px 37px; } .topSection.ex{ padding: 37px 37px 37px; } .tab1Area { background: #1B2D5A; display: none; } .tab2Area { background: #89A8CE; display: none; } .tab3Area { background: #5f9bc1; display: none; } .topSection__heading, .topSubSection__heading { color: #231815; font-size: 20px; font-weight: bold; } .topSection__heading__inner { display: inline-block; border-left: 5px solid #8AD1EB; padding: 0 0 0 7px; } .caseListArea2{ padding: 40px 36px 30px; background: #f9f4d4; } .caseListArea{ padding: 40px 36px; background: #edeff0; } .slick-slide{ position: relative; } .caseList.new.ex{ padding-left: 0; padding-right: 0; } .caseList.new.ex2{ background: none; padding-left: 0; padding-right: 0; } .slick-wrap{ margin-top: 20px; width: calc(100% + 24px); margin-left: -12px; margin-right: -12px; position: relative; } .slick-list .slick-slide{ margin-left: 12px; margin-right: 12px; } .slick-list .slick-slide .caseList__item{ margin-bottom: 0; } .slick-prevex{ position: absolute; top: 51%; left: -24px; width: 25px; height: 66px; background: url("../img/left.png") no-repeat center center/100%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); cursor: pointer; } .slick-nextex { position: absolute; top: 51%; right: -24px; width: 25px; height: 66px; background: url("../img/right.png") no-repeat center center/100%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); cursor: pointer; } .caseList.new .caseList__item.no_result{ background: none; display: none; } .caseList.new.ex2 .name-box p{ color: #4c4948!important; } .ex-link{ text-align: right; font-size: 12px; } .ex-link a{ display: inline-block; background: #fff; padding: 3px 8px; } .ex-link .icon{ width: 12px; margin-left: 5px; display: inline-block; vertical-align: middle; } .ex-link .icon img{ width: 100%; } .top-txt{ padding:30px 30px 0; margin-bottom: -10px; text-align: center; font-size: 16px; line-height: 1.5; color: #0d2ea1; } .top-txt h2{ font-weight: bold; } @media screen and (max-width: 640px) { .cp_tab { width: 92%; margin-left: auto; margin-right: auto; font-size: 0; } .cp_tab label { padding:0.8em 0.5em; font-size:4.2vw; text-align: center; } .cp_tab > label span{ display: block; padding-right:0% ; background-position: center bottom; padding-bottom: 8%; } .case-sub_nav li,.case-sub_nav-2 li{ width: calc(50% - 2px); margin-right: 2px; margin-top: 2px; padding:4% 0; color:#fff; text-align: center; cursor: pointer; font-size: 3.9vw; background: #657D9B; position: relative; } .case-sub_nav li a,.case-sub_nav2 li a{ color: #fff; padding:4% 0; display: block; width: 100%; } .case-sub_nav li:nth-child(2n),.case-sub_nav li:nth-child(4n){ margin-right: 0; border-right:none; } .case-sub_nav-2 li:nth-child(2n),.case-sub_nav-2 li:nth-child(4n){ margin-right: 0; } .case-sub_nav li:nth-child(-n+2),.case-sub_nav-2 li:nth-child(-n+2){ margin-top: 0; } .topSection, .topSubSection{ padding: 0px 20px 30px; width: 92%; margin-left: auto; margin-right: auto; box-sizing: border-box; } .topSection__heading, .topSubSection__heading { color: #231815; font-size: 24px; font-weight: bold; } .topSection__heading__inner { display: inline-block; border-left: 5px solid #8AD1EB; padding: 0 0 0 12px; } .caseListArea2{ padding: 40px 40px; background: #f9f4d4; } .caseListArea{ padding: 40px 40px; background: #edeff0; } .slick-prevex { position: absolute; top: auto; bottom: -11vw; left: 33%; width: 8.5vw; height: 8.5vw; background: url("../img/left_sp.png") no-repeat center center/100%; transform: translateY(0%); -webkit-transform: translateY(0%); -ms-transform: translateY(0%); cursor: pointer; } .slick-nextex { position: absolute; top: auto; bottom: -11vw; right: 33%; width: 8.5vw; height: 8.5vw; background: url("../img/right_sp.png") no-repeat center center/100%; transform: translateY(0%); -webkit-transform: translateY(0%); -ms-transform: translateY(0%); cursor: pointer; } .caseListArea2{ padding: 8.9vw 4.1vw 22.6vw; background: #f9f4d4; } .caseListArea{ padding: 8.9vw 4.1vw; background: #edeff0; } .cp_tab > a{ width: 100%; } .ex-link{ font-size: 3.3vw; } .ex-link a{ display: inline-block; background: #fff; padding: 1vw 3vw; } .ex-link .icon{ width: 3.0vw; margin-left: 1vw; } .top-txt{ padding:0px 20px 5vw; margin-bottom: 0; text-align: center; font-size: 3.9vw; line-height: 1.5; } }