@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.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:7vw 3vw 3vw; margin-bottom: 0; text-align: left; font-size: 3.9vw; line-height: 1.5; } } .mod-link6013_button li{ max-width: 448px; width: 90%!important; margin-left: auto!important; margin-right: auto!important; } .con__btn a, .mod-link6013_button li .con__btn a{ /*display: block;*/ padding: 25px 4px 25px 48px; background: #f18d00; color: #fff; margin-left: auto; margin-right: auto; position: relative; text-align: center; font-size: 23px; width: 100%; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 86px; } .con__btn a::before, .mod-link6013_button li .con__btn a::before{ content: ""; background: url("../img/mail_icon.png") no-repeat left center/100%; width: 50px; height: 50px; position: absolute; left: 38px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .con__btn a::after, .mod-link6013_button li .con__btn a::after{ content: ""; background: url("../img/yajirushi_new.png") no-repeat left center/100%; width: 16px; height: 24px; position: absolute; right:32px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .link-list{ margin-top: 42px; margin-bottom: 35px; display: flex; flex-wrap: wrap; } .list-ttl{ text-align: center; line-height: 1; margin-bottom: 50px; color: #fff; font-weight: 700; font-size: 23px; padding-top: 10px; padding-bottom: 10px; } .list-ttl.ptn1{ background: #448B28; } .list-ttl.ptn2{ background: #B6712A; } .list-ttl.ptn3{ background: #1B2D5A; margin-bottom: 35px; } .list-ttl.ptn4{ background: #D19811; margin-bottom: 35px; } .link-list li{ width: 150px; margin-right: 20px; margin-bottom: 10px; position: relative; } .link-list li a{ padding-left: 12px; font-size: 15px; color: #1B2D5A; font-weight: 700; } .link-list li::before{ content: ""; width: 8px; height: 14px; position: absolute; top:20%; left: 0; background: url("../img/sankaku.png") no-repeat left center / 100%; } .list-box{ margin-bottom: 105px; } .list-box li{ display: flex; justify-content: space-between; margin-bottom: 50px; padding-left: 0; padding-right: 0; flex-wrap: wrap; } .list-box li:last-child{ margin-bottom: 0; } .list-box li .text-box{ width: 64%; } .list-box li .text-box .name-ttl{ padding-left: 13px; margin-bottom: 16px; font-size: 29px; color: #1B2D5A; font-weight: 700; } .list-box li .text-box .name-ttl.ptn1{ border-left: 7px solid #448B28; } .list-box li .text-box .name-ttl.ptn2{ border-left: 7px solid #B6712A; } .list-box li .text-box .name-ttl.ptn3{ border-left: 7px solid #1B2D5A; } .list-box li .text-box .name-ttl.ptn4{ border-left: 7px solid #D19811; } .list-box li .text{ font-size: 15px; line-height: 1.66; margin-bottom: 20px; } .list-box li .link-btn a{ display: inline-block; padding: 8px 34px 8px 12px; color: #fff; font-size: 16px; background: #F08C00; line-height: 1; font-weight: 600; } .list-box li .link-btn a .icon{ width: 16px; margin-right: 12px; display: inline-block; vertical-align: middle; margin-top: -3px; line-height: 1; } .list-box li .link-btn a .icon img{ width: 100%; } .list-box li .img-box{ width: 31.6%; } .list-box li .img-box img{ max-width: 100%; } .link-area{ margin-top: -135px; padding-top: 135px; width: 100%; pointer-events: none; } .link-area.ex{ margin-top: -80px; padding-top: 80px; } .notes{ margin-top: 5px; font-size: 10px; } .sample-box{ padding-top: 20px; padding-bottom: 20px; border-top: 1px solid #3B3838; border-bottom: 1px solid #3B3838; margin-bottom: 80px; } .sample-box .sample-flex{ display: flex; justify-content: space-between; align-content: center; } .sample-box .sample-flex .img-box{ width: 23.4%; } .sample-box .sample-flex .img-box img{ max-width: 100%; } .sample-box .sample-flex .text-box{ width: 72.6%; font-size: 15px; line-height: 1.66; } .sample-box .ttl-text{ margin-bottom: 10px; font-size: 24px; color: #1B2D5A; font-weight: 700; } .icon-list{ display: flex; flex-wrap: wrap; } .icon-list li{ margin-bottom: 5px; margin-right: 8px; border-radius: 5px; background: #1B2D5A; padding-top: 5px; padding-bottom: 5px; color: #fff; width: 94px; justify-content: center; text-align: center; } /*.icon-list li.ex{ padding-top: 6px; padding-bottom: 6px; }*/ .icon-list li:last-child{ margin-bottom: 5px; } .dl-text{ display: flex; } .dl-text dt{ width: 140px; text-indent: -0.5em; } .dl-text dd{ width: calc(100% - 140px); } .notes.center{ text-align: center; } .list-ttl2{ text-align: center; line-height: 1.62; color: #1B2D5A; font-size: 24px; font-weight: 700; } @media screen and (max-width: 640px) { .pdf__btn a,.mod-link6013_button li .pdf__btn a { padding:3%; box-sizing: border-box; font-size: 4.1vw; margin-bottom: 12vw; } .pdf__btn a::before { background-size:55%; background-position: 5% 30%; } .pdf__btn .text{ display: inline-block; vertical-align: middle; padding-top: 0.5%; font-size:4.7vw; } .con__btn a, .mod-link6013_button li .con__btn a{ /*display: block;*/ padding: 5vw 1vw 5vw 8vw; background: #f18d00; font-size: 4.8vw; width: 100%; font-weight: 700; letter-spacing: 0.1em; } .con__btn a::before, .mod-link6013_button li .con__btn a::before{ content: ""; background: url("../img/mail_icon.png") no-repeat left center/100%; width:11vw; height: 11vw; position: absolute; left: 5vw; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .con__btn a::after, .mod-link6013_button li .con__btn a::after{ content: ""; background: url("../img/yajirushi_new.png") no-repeat left center/100%; width: 4vw; height:5vw; position: absolute; right:5vw; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .link-list{ margin-top: 7.5vw; margin-bottom: 3.5vw; display: flex; flex-wrap: wrap; width: 90%; margin-left: auto; margin-right: auto; } .link-list li{ width: 48%; margin-right: 2%; margin-bottom: 3.5vw; position: relative; } .link-list li a{ padding-left: 3vw; font-size: 3.6vw; font-weight: 700; } .link-list li::before{ content: ""; width: 2vw; height: 4vw; position: absolute; top:10%; left: 0; background: url("../img/sankaku.png") no-repeat left center / 100%; } .list-ttl{ margin-bottom: 8.5vw; font-size: 4.5vw; padding-top: 2.4vw; padding-bottom: 2.4vw; } .list-ttl.ptn3{ margin-bottom: 8.5vw; } .list-box{ margin-bottom: 20vw; width: 90%; margin-left: auto; margin-right: auto; } .list-box li{ display: block; justify-content: space-between; margin-bottom: 12vw; } .list-box li:last-child{ margin-bottom: 0; } .list-box li .text-box{ width: 100%; margin-bottom: 4.8vw; } .list-box li .text-box .name-ttl{ padding-left: 3.6vw; margin-bottom:3.6vw; font-size: 5.6vw; line-height: 1.34; } .list-box li .text-box .name-ttl.ptn1{ border-left: 6px solid #448B28; } .list-box li .text-box .name-ttl.ptn2{ border-left: 6px solid #B6712A; } .list-box li .text-box .name-ttl.ptn3{ border-left: 6px solid #1B2D5A; } .list-box li .text-box .name-ttl.ptn4{ border-left: 6px solid #D19811; } .list-box li .text{ font-size: 3.6vw; line-height: 1.66; margin-bottom: 3.5vw; } .list-box li .link-btn a{ display: inline-block; padding: 2vw 7vw 2vw 2vw; font-size:3.8vw; } .list-box li .link-btn a .icon{ width: 3.8vw; margin-right: 3vw; margin-top: -0.5vw; } .list-box li .link-btn a .icon img{ width: 100%; } .list-box li .img-box{ width: 100%; } .link-area{ margin-top: -26vw; padding-top: 26vw; } .link-area2.ex{ margin-top: -10vw; padding-top: 10vw; } .sample-box{ padding-top: 6vw; padding-bottom: 3vw; border-top: 1px solid #999; border-bottom: 1px solid #999; margin-bottom: 15vw; width: 90%; margin-left: auto; margin-right: auto; } .sample-box .sample-flex{ display: flex; justify-content: space-between; align-content: center; margin-bottom: 4vw; } .sample-box .sample-flex .img-box{ width: 43.2%; } .sample-box .sample-flex .img-box img{ max-width: 100%; } .sample-box .sample-flex .text-box{ width:54.5%; font-size: 3.2vw; line-height: 1.66; text-align: justify; } .sample-box .ttl-text{ margin-bottom: 3vw; font-size: 4.8vw; text-align: center; } .icon-list{ display: flex; flex-wrap: wrap; } .icon-list li{ margin-bottom:3vw; margin-right: 2%; border-radius: 1vw; padding-top: 1vw; padding-bottom: 1vw; width: 23.5%; } .icon-list li:last-child{ margin-right: 0; margin-bottom:3vw; } .dl-text{ display: block; } .dl-text dt{ width: 100%; } .dl-text dd{ width: 100%; } .list-ttl2{ text-align: center; line-height: 1.62; font-size: 4.88vw; } .notes{ font-size: 2.3vw; margin-top: 1vw; } }