@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: 900px) { .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{ margin-bottom: 32px; text-align: center; font-size: 28px; color: #0d2ea1; } .top-txt h2{ font-weight: bold; } @media screen and (max-width: 900px) { .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{ margin-bottom:8.53vw; text-align: center; font-size: 5.8vw; 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{ width: 100%; padding-top: 32px; padding-bottom: 22px; margin-bottom: 114px; text-align: center; background:#F5F6F7 ; } .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; } .link-list { text-align: center; } .link-list li{ display: inline-block; margin-right: 24px; margin-bottom: 10px; position: relative; } .link-list li a{ font-size: 16px; color: #333; font-weight: 700; } .link-list li .icon{ width: 20px; margin-left: 6px; display: inline-block; vertical-align: middle; margin-top: -3px; line-height: 1; } .link-list li .icon img{ display: block; width: 100%; } .list-box{ margin-bottom: 134px; } .list-box li{ display: flex; justify-content: space-between; margin-bottom: 80px; padding-left: 0; padding-right: 0; flex-wrap: wrap; } .list-box li:last-child{ margin-bottom: 0; } .list-box li .text-box{ width: 75%; } .list-box li .h3-txt{ margin-bottom: 34px; } .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{ font-size: 15px; line-height: 1.66; margin-bottom: 20px; } .list-box li .link-btn a{ display: inline-block; color: #0D2EA1; font-size: 18px; line-height: 1; font-weight: 600; } .list-box li .link-btn a .icon{ width: 20px; margin-left: 8px; display: inline-block; vertical-align: middle; margin-top: -4px; line-height: 1; } .list-box li .link-btn a .icon img{ width: 100%; } .list-box li .img-box{ width: 23.8%; padding-top: 67px; } .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: -90px; padding-top: 90px; } .notes{ font-size: 14px; } .sample-box{ padding-top: 114px; margin-bottom: 80px; } .sample-box .sample-flex{ display: flex; justify-content: space-between; align-items: center; } .sample-box .sample-flex .img-box{ width: 23.8%; } .sample-box .sample-flex .img-box img{ max-width: 100%; } .sample-box .sample-flex .text-box{ width: 72.4%; font-size: 16px; line-height: 1.6em; } .sample-box .ttl-text{ margin-bottom: 10px; font-size: 18px; line-height: 1.6em;; color: #333; font-weight: 700; } .sample-box .sample-flex .text-box .notes{ margin-top: 14px; } .icon-list{ text-align: left; font-size: 0; } .icon-list li{ margin-bottom: 5px; margin-right: 12px; border-radius: 5px; background: #E6E6E6; padding-top: 4px; padding-bottom: 4px; padding-left: 20px; padding-right: 20px; color: #333; font-size: 14px; line-height: 1; justify-content: center; text-align: center; display: inline-block; } /*.icon-list li.ex{ padding-top: 6px; padding-bottom: 6px; }*/ .icon-list li:last-child{ margin-bottom: 5px; } .dl-text{ display: flex; padding-bottom: 15px; border-bottom: 2px dotted #CCCCCC; margin-bottom: 16px; justify-content: space-between; } .dl-text dt{ width: 140px; font-size: 16px; } .dl-text dd{ width: calc(100% - 140px); font-size: 16px; line-height: 1.6em; } .notes.center{ text-align: center; } .list-ttl2{ text-align: center; line-height: 1.62; color: #1B2D5A; font-size: 24px; font-weight: 700; } .list-box .h2-txt{ margin-bottom: 32px; }f .toku-text{ font-size: 16px; line-height: 1.6em; margin-top: 11px; } .head-img-in .contents{ /*padding-top:87px; padding-bottom: 87px;*/ } @media screen and (max-width: 900px) { .head-img-in .contents{ /*padding-top:8.5vw; padding-bottom: 8.5vw;*/ } .list-box .h2-txt{ margin-bottom: 8.5vw; } .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; } .link-list{ padding-top: 8.5vw; padding-bottom: 2.6vw; width: 100%; margin-bottom: 26.6vw; } .link-list li{ display:inline-block; margin-right: 3.2vw; margin-left: 3.2vw; margin-bottom:5.3vw; position: relative; } .link-list li a{ font-size: 4.6vw; } .link-list li .icon{ width: 5.3vw; margin-left:1.6vw; display: inline-block; vertical-align: middle; margin-top: -3px; line-height: 1; } .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: 26vw; } .list-box li{ display: block; justify-content: space-between; margin-bottom: 13.8vw; } .list-box li:last-child{ margin-bottom: 0; } .list-box li .text-box{ width: 100%; margin-bottom: 8.3vw; } .list-box li .h3-txt{ margin-bottom:8.5vw; } .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{ font-size: 3.6vw; line-height: 1.66; margin-bottom: 3.5vw; } .list-box li .link-btn a{ display: inline-block; font-size:4.2vw; } .list-box li .link-btn a .icon{ width: 5.33vw; margin-left: 2vw; margin-top: -0.5vw; } .list-box li .link-btn a .icon img{ width: 100%; } .list-box li .img-box{ width: 100%; padding-top: 0vw; } .link-area{ margin-top: -26vw; padding-top: 26vw; } .link-area.ex{ margin-top: -14vw; padding-top: 14vw; } .link-area2.ex{ margin-top: -10vw; padding-top: 10vw; } .sample-box{ padding-top: 13vw; margin-bottom: 18vw; width: 100%; margin-left: auto; margin-right: auto; } .sample-box .sample-flex{ display:block; margin-bottom: 4vw; } .sample-box .sample-flex .img-box{ width: 100%; margin-bottom: 8.5vw; text-align: center; } .sample-box .sample-flex .img-box img{ max-width: 100%; } .sample-box .sample-flex .text-box{ width: 100%; font-size: 4.2vw; line-height: 1.66; text-align: justify; } .sample-box .sample-flex .text-box .notes{ margin-top: 3.7vw; } .sample-box .ttl-text{ margin-bottom: 3.7vw; font-size: 4.2vw; text-align: left; } .icon-list{ display: flex; flex-wrap: wrap; } .icon-list li{ margin-bottom:3vw; margin-right:3.2vw; border-radius: 1vw; padding-top: 1vw; padding-bottom: 1vw; padding-left: 5.3vw; padding-right: 5.3vw; } .icon-list li:last-child{ margin-right: 0; margin-bottom:3vw; } .dl-text{ padding-bottom: 4.2vw; margin-bottom: 4.2vw; } .dl-text dt{ width: 30%; font-size: 4.2vw; } .dl-text dd{ width:63.5%; font-size: 4.2vw; padding-top: 0.8vw;; } .list-ttl2{ text-align: center; line-height: 1.62; font-size: 4.88vw; } .notes{ font-size: 3.7vw; margin-top: 1vw; } .toku-text{ font-size: 4.2vw; line-height: 1.6em; margin-top: 2vw; } .kento-box{ margin-top: 0; } }