.main { } .documentArea { padding-bottom: 114px; } .documentArea__heading { text-align: center; } .documentArea__heading img { max-width: 100%; height: auto; } .documentArea__heading .pc { display: none; } .documentList { margin: 15px auto; } .documentList__item:not(:last-child) { margin: 0 0 15px; } .documentList__item .list-img{ text-align: center; } .documentList.new .list-img { height: 240px; } .documentList.new.ptn2 .list-img { height: 300px; } .documentList.new .list-img img { width: auto; height: 100%; } .no_result { padding: 15px; background: #EDEFF0; } .kento-box { margin-top: 0; } @media screen and (min-width: 901px) { .documentArea__heading .sp { display: none; } .documentArea__heading .pc { display: inline; } .documentList { margin: 30px auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1.3%; } .documentList__item { width: 24%; } .documentList::after { content: ""; display: block; width: 24%; } .documentList.new.ptn2 .documentList__item { width: 32%; } .documentList.new.ptn2::after { content: ""; display: none; } .documentList__item:last-child{ margin-bottom:15px; } } /*202101追記*/ .documentList.new .documentList__item.pickup{ background: #ffffff url("../img/pickup.png") no-repeat right top; background-size:100%; } .documentList.new .documentList__item a{ display: block; width: 100%; position: relative; } .documentList.new .documentList__item .icon{ position: absolute; bottom: 10px; right: 15px; width: 22px; } .documentList.new .documentList__item .img-box{ padding: 32px 0 6px; width: 70%; margin-left: auto; margin-right: auto; } .documentList.new .documentList__item .text-box{ padding: 10px 0px 15px; position: relative; } .documentList.new .documentList__item .name-box{ position: relative; line-height: 1.3em; margin-top: 15px; } .documentList.new .documentList__item .name-box p{ font-weight: 700; } .documentList.new .documentList__item .info-box{ position: relative; line-height: 1.3em; margin-top: 5px; padding-bottom: 18px; } .documentList.new .documentList__item .info-box p{ font-size: 12px; letter-spacing: -0.04em; } .documentList.new .documentList__item .day-box{ margin-top: 12px; } .documentList.new .documentList__item .day-box p{ color:#ADADAD; font-size: 11px; } .taglist{ font-size: 0; white-space:nowrap; } .taglist li{ display: inline-block; margin-right: 1.8%; border-radius: 2px; padding:0.5% 2%; color:#fff; font-size: 12px; 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.other{ background:#3D97D3; } .taglist li.maintenance{ background:#3D97D3; } .taglist li.brother{ background:#004898; } .taglist li.genre{ background:#7D7D7E; } .taglist li.end{ background:#C9CACA; color: #231815; } @media screen and (max-width: 900px) { /*202101追記*/ .documentList.new .list-img { height: 70vw; } .documentList.new.ptn2 .list-img { height: 70vw; } .documentList.new .documentList__item{ background: #fff; } .documentList.new .documentList__item .text-box{ padding: 16px 0px 25px; position: relative; } .documentList.new .documentList__item .img-box{ padding: 50px 0 6px; } .documentList.new .documentList__item .icon{ position: absolute; bottom: 15px; right: 15px; width: 10%; } .documentList.new .documentList__item .name-box{ position: relative; line-height: 1.8em; margin-top: 15px; } .documentList.new .documentList__item .name-box p{ font-size: 5.0vw; color: #4C4948; /*position: absolute; width: 100%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);*/ font-weight: 700; } .documentList.new .documentList__item .info-box{ overflow: hidden; height: calc(2.0em * 3); position: relative; line-height: 2.0em; margin-top: 10px; padding-bottom: 28px; } .documentList.new .documentList__item .info-box p{ font-size: 4.0vw; } .documentList.new .documentList__item .day-box{ margin-top: 12px; } .documentList.new .documentList__item .day-box p{ color:#ADADAD; font-size: 3.9vw; } .taglist li{ display: inline-block; font-size: 4.2vw; } } .open-box{ text-align: center; margin-top: 24px; cursor: pointer; } .open-box a { display: inline-flex; align-items: center; font-size: 16px; font-weight: 600; color: #0D2EA1; } .open-box a::after { content: "+"; display: flex; align-items: center; justify-content: center; margin-left: 0.5em; border-radius: 50%; width: 20px; height: 19px; padding-bottom: 1px; cursor: pointer; color: #fff; background: #0D2EA1; font-size: 14px; line-height:0.1; } .open-box.active a::after { content: "-"; line-height:0.1; height: 18px; padding-bottom: 2px; } .fade-box{ display: none; } .is-hidden{ display: none!important; } .btn-box{ position: relative; } .btn-box .more.none{ opacity: 0; pointer-events: none; } .btn-box .close{ position: absolute; z-index: 2; top:0; left: 0; right:0; margin-left: auto; margin-right: auto; } .documentArea .close{ display: none; } .documentArea2 .close{ display: none; } .link-btn{ max-width: 300px; margin-left: auto; margin-right: auto; width: 80%; } .link-btn button{ display: block; padding: 14px 20px 13px; text-align: center; width: 100%; line-height: 1; border: 1px solid #0D2EA1; display: inline-block; background: #fff; color: #0D2EA1; border-radius: 3px; position: relative; font-weight: 700; font-size: 16px;; cursor: pointer; text-align: left; } .link-btn button:hover{ opacity: 0.6; } .link-btn button .sankaku{ position: absolute; top: 50%; right:12px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); display: flex; align-items: center; justify-content: center; margin-left: 0.5em; border-radius: 50%; width: 20px; height: 20px; cursor: pointer; color: #fff; background: #0D2EA1; font-size: 14px; line-height: 1; } .documentList.new.ptn2{ margin-top: 0; margin-bottom: 0; padding-bottom: 0px; } .ex-headbox{ padding-top: 60px; margin-bottom: 80px; padding-bottom: 55px; border-bottom: 1px solid #0D2EA1; } .ex-headbox .ex-headtext{ font-size: 28px; font-weight: 700; color: #0D2EA1; margin-bottom: 32px; text-align: center; } .kento-list li .newlink-btn{ max-width: 300px; margin-left: auto; margin-right: auto; } @media screen and (max-width: 900px) { .documentArea { padding-bottom: 26vw; } .fade-box{ display: block; } .link-btn{ max-width: none; margin-left: auto; margin-right: auto; width: 100%; } .link-btn button{ display: block; padding: 4.2vw 5.7vw; width: 100%; line-height: 1; position: relative; font-weight: 700; font-size: 4.2vw; border-radius: 1vw; } .link-btn button .sankaku{ position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); position: absolute; right:3.2vw; display: flex; align-items: center; justify-content: center; margin-left: 0.5em; border-radius: 50%; width: 5.3vw; height: 5.3vw; cursor: pointer; font-size: 3.9vw; line-height: 1; } .ex-headbox{ padding-top: 18vw; margin-bottom: 18vw; padding-bottom: 11vw; border-bottom: 1px solid #0D2EA1; } .ex-headbox .ex-headtext{ font-size: 5.8vw; font-weight: 700; margin-bottom: 8vw; text-align: center; } } @media screen and (max-width: 900px) { .multiple-item { width: 110%; margin-left: -5%; margin-right: -5%; } .documentList .slide-item { padding-left: 2vw; padding-right: 2vw; box-sizing: border-box; } .slick-dots li.slick-active button{ background: none; pointer-events: none; } .slick-dots{ bottom: -3vw; } .slick-dots li button:hover, .slick-dots li button:focus{ background: none; } .slick-dots li button:before{ font-size: 12vw; } }