.topSection, .topSubSection { padding: 30px 20px; } .topSection__heading, .topSubSection__heading { color: #231815; font-size: 18px; font-weight: bold; } .topSection__heading__inner { display: inline-block; border-left: 5px solid #8AD1EB; padding: 0 0 0 7px; } .topSection__heading__sub { font-size: 12px; display: block; } .topSection__more, .topSubSection__more { text-align: center; font-weight: bold; } .topSection__more a, .topSubSection__more a { color: #2F2725; display: block; background: #FFF100; position: relative; padding: 10px; } /* IE表示用のCSS */ _:-ms-input-placeholder, :root .topSection__more a, .topSubSection__more a{ font-family: Meiryo, sans-serif; padding:12px 10px 8px; } .topSection__more a:before, .topSubSection__more a:before { content: ""; display: inline-block; width: 9px; height: 17px; margin: 0 10px 0 0; background-image: url(../img/arrow_more.png); background-repeat: no-repeat; background-size: contain; vertical-align: bottom; } .columnArea { background: #EDEFF0; } .columnList { margin: 15px auto; } .columnList__item img { width: 100%; height: auto; } .caseArea { background: #EDEFF0; } .caseList { margin: 15px auto; } .caseList__item:not(:last-child) { margin: 0 0 15px; } .caseList__item img { width: 100%; height: auto; } .documentArea { background: #F9F4D4; } .documentList { margin: 15px auto; } .documentList__item:not(:last-child) { margin: 0 0 15px; } .documentList__item img { width: 100%; height: auto; } .topSubSection__heading { font-size: 17px; } .lineUp { background: #fff; } .lineUp__list { margin: 15px auto 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .lineUp__item { width: 48%; margin: 0 0 4%; } .lineUp__item img { width: 100%; height: auto; } .news { background: #F5F6F7; } .news__list { margin: 0 0 30px; } .news__item { padding: 20px 0; border-bottom: 1px solid #C7C8C8; } .news__header { margin: 0 0 10px; } .news__date { display: inline-block; } .news__category { display: inline-block; color: #58C3E5; } /*イベント用追記*/ .link-list{ text-align: center; font-size: 0; } .link-list li{ width: 268px; display: inline-block; border-right:1px solid #DCDDDD; padding-top: 20px; } .link-list li:last-child{ border-right:none; } .link-list li .list-img{ width: 70%; max-width: 196px; margin-left: auto; margin-right: auto; margin-bottom: 30px; } .link-list li .list-img img,.link-list li .list-btn img{ max-width: 100%; } .link-list li .list-txt{ font-size: 12px; line-height: 1.5; margin-bottom: 20px; } .link-list li .list-btn{ width: 76%; max-width: 216px; margin-left: auto; margin-right: auto; } @media screen and (min-width: 641px) { .main { width: 885px; } .topSection, .topSubSection { padding: 30px 37px; } .seminer-box{ padding: 30px 37px 30px; } .seminer-box .main-img img{ width: 100%; } .seminer-box .main-img{ margin-top: 20px; margin-bottom: 20px; } .topSection.seminer-box .topSection__heading__inner{ background: #fff; } .topSection__heading, .topSubSection__heading { background: inherit; position: relative; } .topSection__heading::before, .topSubSection__heading::before { content: ""; display: block; width: 100%; height: 1px; background: #575554; position: absolute; top: 50%; left: 0; } .topSection__heading__inner { background: inherit; display: inline-block; padding: 0 10px; position: relative; } .topSection__more, .topSubSection__more { width: 362px; margin: auto; line-height: 17px; } .topSection__more a, .topSubSection__more a { padding: 12px; } .topSection__more a:before, .topSubSection__more a:before { position: absolute; top: 12px; left: 17px; } .columnList { margin: 30px auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .columnList::after { content: ""; display: block; width: 257px; } .columnList__item { width: 257px; } .caseList { margin: 30px auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .caseList::after { content: ""; display: block; width: 257px; } .caseList__item { width: 257px; } .documentList { margin: 30px auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .documentList::after { content: ""; display: block; width: 257px; } .documentList__item { width: 257px; } .topSubSection__heading__inner { background: inherit; position: relative; display: inline-block; padding: 0 10px 0 0; } .lineUp__list { margin: 30px auto 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .lineUp__item { width: 192px; margin: 0; } .news__item { padding: 25px 0; } .modal-content .detailClose { bottom: 15px; right: 15px; } } @media screen and (max-width: 640px) { .topSection__heading, .topSubSection__heading { color: #231815; font-size:5.3vw; font-weight: bold; } .topSection__heading__inner { display: inline-block; border-left: 5px solid #8AD1EB; padding: 0 0 0 12px; } .topSection__heading__sub { font-size: 16px; display: block; } /*イベント用追記*/ .seminer-box .main-img img{ width: 100%; } .seminer-box .main-img{ margin-top: 20px; margin-bottom: 20px; } .link-list{ text-align: center; font-size: 0; } .link-list li{ width: 100%; max-width: none; display: inline-block; border-right:none; padding-top: 5%; margin-bottom: 12%; } .link-list li:last-child{ border-right:none; margin-bottom: 5%; } .link-list li .list-img{ width: 70%; max-width: 196px; margin-left: auto; margin-right: auto; margin-bottom: 30px; } .link-list li .list-img img,.link-list li .list-btn img{ max-width: 100%; } .link-list li .list-txt{ font-size: 12px; line-height: 1.5; margin-bottom: 20px; } .link-list li .list-btn{ width: 76%; max-width: 216px; margin-left: auto; margin-right: auto; } } /*202101追記*/ .columnList.new .columnList__item{ background: #fff; } .columnList.new .columnList__item .text-box{ padding: 10px 10px 15px; position: relative; } .columnList.new .columnList__item .icon{ position: absolute; bottom: 15px; right: 15px; width: 22px; } .columnList.new .columnList__item .name-box{ overflow: hidden; height: calc(1.3em * 3); position: relative; line-height: 1.3em; margin-top: 10px; } .columnList.new .columnList__item .name-box p{ font-size: 14px; color: #4C4948; /*position: absolute; width: 100%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);*/ font-weight: 700; } .columnList.new .columnList__item .info-box{ overflow: hidden; height: calc(1.3em * 4); position: relative; line-height: 1.3em; margin-top: 5px; } .columnList__item { margin: 0 0 15px; } .columnList.new .columnList__item .info-box p{ font-size: 12px; } .columnList.new .columnList__item .day-box{ margin-top: 12px; } .columnList.new .columnList__item .day-box p{ color:#ADADAD; font-size: 11px; } .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: 15px; margin-bottom: 5px; } .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.9); position: relative; line-height: 1.3em; /*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; } .caseList.new .caseList__item .day-box p{ color:#ADADAD; font-size: 11px; } .caseList__item { margin: 0 0 15px; } .taglist{ font-size: 0; } .taglist li{ display: inline-block; margin-right: 1.5%; border-radius: 3px; padding:3px 5px 2px; color:#fff; font-size: 11px; text-align: center; font-weight: 700; box-sizing: border-box; } .caseList.new .taglist li,.columnList.new .taglist li{ width: 49%; } .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; } .caseList.new .taglist li.genre{ background:#fff; color: #60A3CC; border: 1px solid #60A3CC; } .taglist li.end{ background:#C9CACA; color: #231815; } .list-img.ex{ margin-bottom: -6px; } .documentList.new .documentList__item{ background: #fff; } .documentList.new .documentList__item.pickup{ background: #ffffff url("../document/img/pickup.png") no-repeat right top; background-size:100%; } .documentList.new .documentList__item a{ display: block; width: 100%; height: 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 10px 15px; position: relative; } .documentList.new .documentList__item .name-box{ overflow: hidden; height: calc(1.3em * 2); position: relative; line-height: 1.3em; margin-top: 15px; } .documentList.new .documentList__item .name-box p{ font-size: 14px; 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(1.3em * 3); 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 .taglist{ font-size: 0; white-space:nowrap; } .documentList.new .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; } .documentList__item { margin: 0 0 15px; } .documentList.new .taglist li:last-child{ margin-right: 0; } .documentList.new .taglist li.medical{ background:#DD6F91; } .documentList.new .taglist li.product{ background:#D19713; } .documentList.new .taglist li.logistics{ background:#B06F2B; } .documentList.new .taglist li.shop{ background:#539435; } .documentList.new .taglist li.financial{ background:#834F9C; } .documentList.new .taglist li.other{ background:#3D97D3; } .documentList.new .taglist li.maintenance{ background:#58C3E5; } .documentList.new .taglist li.brother{ background:#004898; } .documentList.new .taglist li.genre{ background:#7D7D7E; } .documentList.new .taglist li.end{ background:#C9CACA; color: #231815; } .documentList.new .documentList__item .day-box{ margin-top: 12px; } .documentList.new .documentList__item .day-box p{ color:#ADADAD; font-size: 11px; } .top-txt{ padding:30px 30px; text-align: center; font-size: 16px; line-height: 1.5; color: #0d2ea1; } .top-txt h2{ font-weight: bold; } .topSection.guideArea{ padding:30px 37px; } .topSection.guideArea .topSection__heading__inner{ background: #fff; } .guideList__item span{ font-size: 13px; margin-top: 5px; display: block; } .guideList__item img{ width: 100%; } .guideList__item span::before { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 6px; height: 6px; border-top: 2px solid #000; border-right: 2px solid #000; -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); margin-top: -.25em; margin-right: 3px; } @media screen and (max-width: 640px) { /*202101追記*/ .columnList.new .columnList__item .text-box{ padding: 16px 16px 25px; } .columnList.new .columnList__item .icon{ position: absolute; bottom: 15px; right: 15px; width: 10%; } .columnList.new .columnList__item .name-box{ overflow: hidden; height: calc(1.8em * 3); position: relative; line-height: 1.8em; margin-top: 15px; } .columnList.new .columnList__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; } .columnList.new .columnList__item .info-box{ overflow: hidden; height: calc(2.0em * 4); position: relative; line-height: 2.0em; margin-top: 10px; } .columnList.new .columnList__item .info-box p{ font-size: 4.4vw; } .columnList.new .columnList__item .day-box{ margin-top: 12px; } .columnList.new .columnList__item .day-box p{ color:#ADADAD; font-size: 3.9vw; } .taglist{ font-size: 0; } .taglist li{ display: inline-block; margin-right: 1.5%; border-radius: 3px; padding:3px 5px; color:#fff; font-size: 5.0vw; text-align: center; font-weight: 700; box-sizing: border-box; } .caseList.new .caseList__item{ background: #fff; } .caseList.new .caseList__item .text-box{ padding: 16px 16px 25px; position: relative; } .caseList.new .caseList__item .icon{ position: absolute; bottom: 15px; right: 15px; width: 10%; } .caseList.new .caseList__item .name-box{ overflow: hidden; height: calc(1.8em * 2); position: relative; line-height: 1.8em; margin-top: 15px; margin-bottom: 5px; } .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; /*margin-top: 5px;*/ } .caseList.new .caseList__item .info-box p{ font-size: 4.4vw; } .caseList.new .caseList__item .cat-box{ margin-top: 12px; height: calc(1.8em * 2); 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; } .caseList.new .caseList__item .day-box p{ color:#ADADAD; font-size: 3.9vw; } .list-img.ex{ margin-bottom: -2%; } .documentList.new .documentList__item{ background: #fff; } .documentList.new .documentList__item .text-box{ padding: 16px 16px 25px; position: relative; } .documentList.new .documentList__item .icon{ position: absolute; bottom: 15px; right: 15px; width: 10%; } .documentList.new .documentList__item .name-box{ overflow: hidden; height: calc(1.8em * 2); 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 .taglist li{ display: inline-block; font-size: 4.2vw; } .documentList.new .documentList__item .day-box{ margin-top: 12px; } .documentList.new .documentList__item .day-box p{ color:#ADADAD; font-size: 3.9vw; } .documentList.new .documentList__item .img-box{ padding: 50px 0 6px; } .top-txt{ padding:30px 20px; text-align: center; font-size: 3.9vw; line-height: 1.5; } .guideList__item{ margin-top: 30px; } .topSection.guideArea{ padding:30px 20px; } .guideList__item span{ font-size: 3.3vw; margin-top: 5px; display: block; } } @media screen and (min-width: 641px) { .guideList { margin: 30px auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .guideList::after { content: ""; display: block; width: 257px; } .guideList__item { width: 257px; } } /*202202追記*/ .link-list li .list-name{ text-align: center; color: #1f2a66; font-size: 17px; font-weight: 700; } .link-list li .list-btn a{ position: relative; background: url("../img/gr_bg.jpg") no-repeat left center; padding: 6px 8px; display: block; width: 100%; background-size: cover; line-height: 1; font-size: 14px; text-align: center; color: #231815; font-weight: 600; } .link-list li .list-btn a::after{ position: absolute; top: 25%; right:3%; content: ""; display: inline-block; width: 8px; height: 12px; margin: 0 10px 0 0; background-image:url("../img/yajirushi.png"); background-repeat: no-repeat; background-size: contain; vertical-align: bottom; } @media screen and (max-width: 640px) { .link-list li .list-name{ font-size: 4.4vw; } .link-list li .list-btn a{ font-size: 3.9vw; } }