/* CSS Document */ @-ms-viewport { width: device-width; } .mod-headingLv1{ border-bottom: none!important; } body{ font-family: "Meiryo", "メイリオ", "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif; font-weight: 500; } .csr_title { margin-bottom: 0; } .bg1.ptn1{ background: url("/-/media/cojp/corporate/bsl/topic-new/img/bg_01.jpg") no-repeat center top; background-size:1440px; padding-top: 56px; } @media screen and (min-width: 1441px) { .bg1.ptn1{ background-size:contain; } } .bg2{ background: url("/-/media/cojp/corporate/bsl/topic-new/img/bg_02.jpg") no-repeat center top; background-size:cover; padding-top: 60px; padding-bottom: 180px; } .bg1.ptn3{ background: url("/-/media/cojp/corporate/bsl/topic-new/img/bg_03.jpg") no-repeat center top; background-size:cover; padding-top: 56px; } .wrap{ max-width: 1050px; margin-left: auto; margin-right: auto; } .tab_nav{ display: flex; margin-bottom: 60px; } .tab_nav li{ width: 19%; margin-right: 1.25%; cursor: pointer; text-align: center; line-height: 1; } .tab_nav li:last-child{ margin-right: 0; } .tab_nav li a{ display: block; width: 100%; padding-top: 12px; padding-bottom: 12px; background: #fff; border-radius: 5px; } .tab_nav li.all a{ border: 2px solid #0D2E8C; color: #0D2E8C; } .tab_nav li.regional a{ border: 2px solid #1789C6; color: #1789C6; } .tab_nav li.international a{ border: 2px solid #7F1F82; color: #7F1F82; } .tab_nav li.society a{ border: 2px solid #C10E70; color: #C10E70; } .tab_nav li.problem a{ border: 2px solid #D98200; color: #D98200; } .tab_nav li.environment a{ border: 2px solid #0B8940; color: #0B8940; } .tab_nav li.all.active a{ background:#0D2E8C; color: #fff; } .tab_nav li.regional.active a{ background:#1789C6; color: #fff; } .tab_nav li.international.active a{ background:#7F1F82; color: #fff; } .tab_nav li.society.active a{ background:#C10E70; color: #fff; } .tab_nav li.problem.active a{ background:#D98200; color: #fff; } .tab_nav li.environment.active a{ background:#0B8940; color: #fff; } .mini-ttl{ line-height: 1; border-left: 5px solid #0D2E8C; padding-left: 15px; font-size: 20px; margin-bottom: 20px; font-weight: 500; padding-top: 4px; padding-bottom: 4px; } .mainlist{ display: flex; flex-wrap: wrap; } .mainlist.ptn1{ padding-bottom: 50px; } .mainlist.ptn1.ex{ padding-bottom: 0px; } .mainlist li{ padding: 14px; background: rgba(255,255,255,0.7); width: 32%; margin-right: 2%; margin-top: 20px; } .mainlist li:nth-child(3n){ margin-right: 0; } .mainlist.ptn1 li:nth-child(3n){ margin-right: 2%; } .mainlist.ptn1 li:nth-child(3n+1){ margin-right: 0; } .mainlist.ptn1 li:nth-child(1){ width: 100%; margin-top: 0; margin-right: 0; } .mainlist.ptn1 li:nth-child(1) .list-wrap{ display: flex; justify-content: space-between; align-items: center; } .mainlist li .list-wrap .pic{ width: 100%; margin-bottom: 20px; } .mainlist.ptn1 li:nth-child(1) .list-wrap .pic{ width: 42%; margin-bottom: 0; } .mainlist li .list-wrap .pic .pic-wrap{ width: 100%; height: 100%; overflow: hidden; } .mainlist li .list-wrap .pic .pic-wrap{ position: relative; overflow: hidden; } .mainlist li .list-wrap .pic .pic-wrap::before { display: block; content: ""; padding-top: 58%; } .mainlist.ptn1 li:nth-child(1) .list-wrap .pic .pic-wrap::before { display: block; content: ""; padding-top: 60%; } .mainlist li .list-wrap .pic .pic-wrap a img { position: absolute; top: 50%; left: 50%; max-width: none; height: auto; width: 100%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .mainlist li .tex-wrap{ padding-left: 8px; padding-right: 8px; } .mainlist.ptn1 li:nth-child(1) .list-wrap .tex-wrap{ width: 50%; margin-right: 4%; padding-left: 0; padding-right: 0; } .mainlist li .tex-wrap .top-flex{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-weight: 500; } .mainlist li .tex-wrap .cat-tex{ width: 46%; padding-top: 6px; padding-bottom: 6px; line-height: 1; text-align: center; border-radius: 5px; max-width: 160px; } .mainlist li .tex-wrap .cat-tex.regional{ border: 2px solid #1789C6; color: #1789C6; } .mainlist li .tex-wrap .cat-tex.international{ border: 2px solid #7F1F82; color: #7F1F82; } .mainlist li .tex-wrap .cat-tex.society{ border: 2px solid #C10E70; color: #C10E70; } .mainlist li .tex-wrap .cat-tex.problem{ border: 2px solid #D98200; color: #D98200; } .mainlist li .tex-wrap .cat-tex.environment{ border: 2px solid #0B8940; color: #0B8940; } .mainlist li .tex-wrap .day{ width: 40%; font-size: 14px; color:#8D8D8D; text-align: right; margin-right: 1%; font-weight: 500; } .mainlist li .tex-wrap .ttl-text{ font-size: 16px; line-height: 1.5; height: calc(1.5em * 3); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; width: 100%; margin-bottom: 20px; font-weight: 500; } .mainlist.ptn1 li:nth-child(1) .tex-wrap .ttl-text{ font-size: 20px; height: calc(1.5em * 2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .mainlist li .tex-wrap .copy-text{ font-size: 14px; line-height: 1.64; height: calc(1.64em * 2); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; width: 100%; margin-bottom: 20px; } .mainlist li .tex-wrap .link-text{ padding-bottom: 10px; } .mainlist li .tex-wrap .link-text a .link-textspan{ display: inline-block; font-size: 15px; color: #0D2E8C; line-height: 1; vertical-align: middle; font-weight: 500; } .mainlist li .tex-wrap .link-text a .yajirushi{ width: 6px; margin-left: 8px; display: inline-block; line-height: 1; vertical-align: middle; } .mainlist li .tex-wrap .link-text .yajirushi img{ display: block; } .mainlist li .tex-wrap.sp{ display: none; } .pick-box{ padding-top: 50px; padding-bottom: 64px; background: #F5F2E1; } .cat-list{ padding-bottom: 173px; } /*202212修正*/ .pager { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 60px; } #paging ul{ text-align: center; margin-top: 60px; } .pager a.num,.pager a.page-numbers, .pager span,#paging ul li { display: inline-block; font-weight: bold; text-decoration: none; vertical-align: middle; margin-right: 4px; margin-left: 4px; line-height: 1; color: #fff; background: #909090; cursor: pointer; border-radius: 5px; } .pager a.num:hover, .pager span.current,#paging ul li.active,#paging ul li.disabled,#paging ul li:hover{ color: #fff; background: #0C3AA8; transition: all .3s; } #paging ul li.disabled{ background: #909090; } #paging ul li a,#paging ul li span,#paging ul li a,.pager a{ padding: 12px 13px 12px; display: block; line-height: 1; font-weight: 500; } #paging ul li span.ex{ display: inline-block; padding: 0; transform: scale(-1, 1); } #paging ul li a{ color: #fff; } #paging ul li.active,#paging ul li.disabled{ cursor: auto; } /*202212修正ここまで*/ .pager a.prev, .pager a.next { /*border: none; margin-top: 5px;*/ } /*.pager a.prev { margin-right: 15px; } .pager a.next { margin-left: 15px; }*/ .csr-btn{ margin-top: 120px; width: 100%; max-width: 680px; margin-left: auto; margin-right: auto; } .csr-btn a{ padding-top: 66px; padding-bottom: 66px; background: #0D2E8C; text-align: center; color: #fff; display: block; width: 100%; } .csr-btn a .sm{ display: block; margin-bottom: 20px; font-size: 17px; line-height: 1; } .csr-btn a .big{ font-size: 24px; line-height: 1; color: #fff; display: block; } .main-box.dummy{ height: 350px; background: #343434; } .top-txt { padding: 0px 30px 70px; text-align: center; font-size: 17px; line-height: 1.88; color: #000; } .mod-headingLv1 p { font-size: 36px; line-height: 1.25; margin: 0; font-weight: normal; } /*202212修正*/ .bottom-btnbox{ margin-top: 47px; } .bottom-btnbox .btn-wrap{ width: 90%; margin-left: auto; margin-right: auto; max-width: 510px; margin-bottom: 0; } .bottom-btnbox .btn-wrap a{ display: block; width: 100%; border-radius: 50px; padding-top: 20px; padding-bottom: 20px; text-align: center; color: #fff; background: #595959; position: relative; font-size: 18px; } .bottom-btnbox .btn-wrap.ptn1 a .yajirushi{ position: absolute; top: 50%; left: 5%; content: "»"; transform: translateY(-50%) scale(-1, 1); -webkit-transform: translateY(-50%) scale(-1, 1); -ms-transform: translateY(-50%) scale(-1, 1); font-size: 26px; line-height: 1; display: block; } .bottom-btnbox .btn-wrap.ptn2 a .yajirushi{ position: absolute; top: 50%; right: 5%; content: "»"; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); font-size: 26px; line-height: 1; display: block; } .bottom-btnbox .btn-wrap + .btn-wrap{ margin-top: 20px; } /*202212修正ここまで*/ @media print, screen and (min-width : 769px) { .mainlist.ptn1 li{ margin-top: 22px; } .mainlist.ptn1 li:nth-child(1) .tex-wrap .link-text{ padding-bottom: 0; } } @media screen and (max-width: 1024px){ .mod-headingLv1 p { font-size: 24px; } } @media print, screen and (max-width: 768px) { .mod-headingLv2 h2 { font-size: 22px; } .top-txt { padding: 0px 0vw 12vw; text-align:left; font-size: 4.1vw; line-height: 1.5; } .bg1.ptn1{ background: url("/-/media/cojp/corporate/bsl/topic-new/img/bg_sp_01.jpg") no-repeat center top; background-size:cover; padding-top: 8vw; } .bg2{ background: url("/-/media/cojp/corporate/bsl/topic-new/img/bg_sp_02.jpg") no-repeat center top; background-size:cover; padding-top: 8vw; padding-bottom: 12vw; } .bg1.ptn3{ background: url("/-/media/cojp/corporate/bsl/topic-new/img/bg_sp_03.jpg") no-repeat center top; background-size:cover; padding-top: 8vw; } .wrap{ max-width: none; width: 91%; margin-left: auto; margin-right: auto; } /*2022修正箇所*/ .tab_nav{ display: flex; margin-bottom: 10vw; flex-wrap: wrap; } .tab_nav li{ width: 32%; margin-right: 2%; line-height: 1; margin-bottom: 3vw; font-size: 3.0vw; } .tab_nav li:nth-child(3n){ margin-right: 0; } /*2022修正箇所ここまで*/ .mini-ttl{ line-height: 1; border-left: 3px solid #0D2E8C; padding-left: 3vw; font-size: 5.0vw; margin-bottom: 5vw; } .mainlist{ display: block; } .mainlist.ptn1{ padding-bottom: 7vw; } .mainlist.ptn1.ex{ padding-bottom: 0px; } .mainlist li{ padding: 3vw 3vw; width: 100%; margin-top: 5vw; } .mainlist.ptn1 li:nth-child(1) .list-wrap{ display: block; } .mainlist.ptn1 li:nth-child(1){ width: 100%; margin-top: 0; } .mainlist.ptn1 li:nth-child(1) .list-wrap{ display: block; } .mainlist li .list-wrap .pic{ width: 100%; margin-bottom: 3vw; } .mainlist.ptn1 li:nth-child(1) .list-wrap .pic{ width: 100%; margin-bottom: 5vw; } .mainlist li .list-wrap .pic .pic-box{ display: flex; justify-content: space-between; } .mainlist li .list-wrap .pic .pic-box .pic-wrap{ width: 36%; } .mainlist li .list-wrap .pic .pic-box .tex-wrap{ width: 58%; } .mainlist.ptn1 li:nth-child(1) .list-wrap .pic .pic-box .pic-wrap{ display: block; } .mainlist.ptn1 li:nth-child(1) .list-wrap .pic .pic-box .pic-wrap{ width: 100%; } .mainlist li .list-wrap .pic .pic-wrap{ width: 100%; height: 100%; overflow: hidden; } .mainlist li .list-wrap .pic .pic-wrap{ position: relative; overflow: hidden; } .mainlist li .list-wrap .pic .pic-wrap::before { display: block; content: ""; padding-top: 86%; } .mainlist.ptn1 li:nth-child(1) .list-wrap .pic .pic-wrap::before { display: block; content: ""; padding-top: 58%; } .mainlist li .list-wrap .pic .pic-wrap a img { position: absolute; top: 50%; left: 50%; max-width: none; height: 100%; width: auto; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .mainlist.ptn1 li:nth-child(1) .list-wrap .pic .pic-wrap a img { width: 100%; height: auto; } .mainlist li .tex-wrap{ padding-left: 8px; padding-right: 8px; } .mainlist li .tex-wrap{ padding-left: 0px; padding-right: 0px; } .mainlist.ptn1 li:nth-child(1) .list-wrap .tex-wrap{ width: 100%; margin-right: 0%; padding-left: 8px; padding-right: 8px; } .mainlist li .tex-wrap .top-flex{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 2vw; } .mainlist li .tex-wrap .cat-tex{ width: 62%; padding-top: 1.5vw; padding-bottom: 1.5vw; line-height: 1; text-align: center; border-radius: 5px; max-width: none; font-size: 3.0vw; } .mainlist li .tex-wrap .day{ width: 35%; font-size: 3.0vw; color:#8D8D8D; text-align: right; margin-right: 1%; } .mainlist.ptn1 li:nth-child(1) .tex-wrap .cat-tex{ width: 50%; } .mainlist.ptn1 li:nth-child(1) .tex-wrap .day{ width: 40%; } .mainlist li .tex-wrap .ttl-text{ font-size: 3.5vw; line-height: 1.5; height: calc(1.5em * 3); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; width: 100%; margin-bottom: 0px; } .mainlist.ptn1 li:nth-child(1) .tex-wrap .ttl-text{ font-size: 4.4vw; height: calc(1.5em * 3); margin-bottom: 2vw; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .mainlist li .tex-wrap .copy-text{ font-size: 14px; line-height: 1.64; height: calc(1.64em * 2); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; width: 100%; margin-bottom: 2vw; } .mainlist li .tex-wrap .link-text{ padding-bottom: 3vw; } .mainlist li .tex-wrap.sp{ display: block; } .mainlist.ptn1 li:nth-child(1) .tex-wrap.sp{ display: none; } .mainlist li .top-flex.pc{ display: none; } .mainlist.ptn1 li:nth-child(1) .top-flex.pc{ display: flex; } .mainlist li .ttl-text.pc{ display: none; } .mainlist.ptn1 li:nth-child(1) .ttl-text.pc{ /*display: block;*/ } .mainlist li .tex-wrap .link-text a .link-textspan{ display: inline-block; font-size: 3.9vw; color: #0D2E8C; line-height: 1; vertical-align: middle; } .mainlist li .tex-wrap .link-text a .yajirushi{ width: 6px; margin-left: 8px; display: inline-block; line-height: 1; vertical-align: middle; } .mainlist li .tex-wrap .link-text .yajirushi img{ display: block; } /*.mainlist li .tex-wrap .cat-tex.regional{ border: 1px solid #1789C6; } .mainlist li .tex-wrap .cat-tex.international{ border: 1px solid #7F1F82; } .mainlist li .tex-wrap .cat-tex.society{ border: 1px solid #C10E70; } .mainlist li .tex-wrap .cat-tex.problem{ border: 1px solid #D98200; } .mainlist li .tex-wrap .cat-tex.environment{ border: 1px solid #0B8940; }*/ .pick-box{ padding-top: 8vw; padding-bottom: 10vw; } .cat-list{ padding-bottom: 10vw; } .mainlist li:nth-child(3n){ margin-right: 0; } .mainlist.ptn1 li:nth-child(3n){ margin-right: 0; } .mainlist.ptn1 li:nth-child(3n+1){ margin-right: 0; } /*202212修正*/ .pager { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 10vw; } #paging ul{ text-align: center; margin-top: 10vw; } .pager a.num,.pager a.page-numbers, .pager span,#paging ul li { display: inline-block; font-weight: bold; text-decoration: none; vertical-align: middle; margin-right: 4px; margin-left: 4px; line-height: 1; } #paging ul li a{ color: #fff; } #paging ul li a,#paging ul li span,#paging ul li a,.pager a{ padding: 7px 9px 7px; } .pager a.num:hover, .pager span.current,#paging ul li.active { transition: all .3s; border: 1px solid transparent; } /*202212修正ここまで*/ .pager a.prev, .pager a.next { /*border: none; margin-top: 5px;*/ } /*.pager a.prev { margin-right: 15px; } .pager a.next { margin-left: 15px; }*/ .csr-btn{ margin-top: 11vw; width: 100%; max-width: 680px; margin-left: auto; margin-right: auto; } .csr-btn a{ padding-top: 8vw; padding-bottom: 8vw; } .csr-btn a .sm{ display: block; margin-bottom: 3vw; font-size: 3.0vw; line-height: 1; } .csr-btn a .big{ font-size: 4.4vw; line-height: 1; color: #fff; display: block; } /*202212修正*/ .bottom-btnbox{ margin-top: 6vw; } .bottom-btnbox .btn-wrap{ width: 90%; margin-left: auto; margin-right: auto; max-width: 510px; margin-bottom: 0; } .bottom-btnbox .btn-wrap a{ display: block; width: 100%; border-radius: 50px; padding-top: 4vw; padding-bottom: 4vw; font-size: 3.9vw; } .bottom-btnbox .btn-wrap.ptn1 a .yajirushi{ position: absolute; top: 50%; left: 5%; font-size: 4.4vw; line-height: 1; display: block; } .bottom-btnbox .btn-wrap.ptn2 a .yajirushi{ position: absolute; top: 50%; left: 5%; font-size: 4.4vw; line-height: 1; display: block; } .bottom-btnbox .btn-wrap + .btn-wrap{ margin-top: 4vw; } /*202212修正ここまで*/ } /*シングルページ*/ .bg4{ background: url("/-/media/cojp/corporate/bsl/topic-new/img/bg_04.jpg") no-repeat center top; background-size:cover; padding-top: 60px; padding-bottom: 130px; } .single-box{ padding-top: 70px; padding-bottom: 70px; background: rgba(255,255,255,0.7); margin-bottom: 55px; } .single-box a{ color: #0D2E8C; text-decoration: underline; } .single-box .single-wrap{ width: 90%; max-width: 696px; margin-left: auto; margin-right: auto; } .single-box .top-flex{ margin-bottom: 30px; font-weight: 500; padding-bottom: 30px; border-bottom: 1px solid #858585; position: relative; } .single-box .top-flex .cat-tex{ width: 46%; padding-top: 6px; padding-bottom: 6px; line-height: 1; text-align: center; border-radius: 5px; max-width: 160px; margin-left: auto; margin-right: auto; } .single-box .top-flex .cat-tex.regional{ border: 2px solid #1789C6; color: #1789C6; } .single-box .top-flex .cat-tex.international{ border: 2px solid #7F1F82; color: #7F1F82; } .single-box .top-flex .cat-tex.society{ border: 2px solid #C10E70; color: #C10E70; } .single-box .top-flex .cat-tex.problem{ border: 2px solid #D98200; color: #D98200; } .single-box .top-flex .cat-tex.environment{ border: 2px solid #0B8940; color: #0B8940; } .single-box .top-flex .day{ width: 30%; position: absolute; font-size: 14px; color:#8D8D8D; text-align: right; font-weight: 500; margin-right: 1%; right:0; top:30%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .single-box .single-ttl h1{ text-align: center; margin-bottom: 35px; font-size: 26px; line-height: 1.42; font-weight: 500; } .single-box .single-text{ font-size: 16px; line-height: 1.81; } .single-box .single-text .strong{ font-weight: bold; background: linear-gradient(transparent 80%, #58c3e5 0%); } .single-box .single-text ul,.single-box .single-text ol{ margin-bottom: 48px; } .single-box .single-text ul li{ font-size: 16px; line-height: 1.81; list-style: disc; list-style-position: inside; } .single-box .single-text ol li{ font-size: 16px; line-height: 1.81; list-style: decimal; list-style-position: inside; } @media screen and (max-width: 767px) { .single-box .single-text { line-height: 1.6; } } .single-box .single-text .u-mB48 { margin-bottom: 48px; } .single-box .single-text .u-mB49 { margin-top: 45px; margin-bottom: 12px; } .single-box .single-text h2{ font-size: 24px; border-bottom: 2px solid #0d2ea1; margin-bottom: 10px; } .single-box .single-text h3{ font-size: 21px; border-left: 5px solid #0d2ea1; padding-left: 5px; margin-bottom: 10px; line-height: 1; } .single-box .single-text h4{ font-size: 18px; margin-bottom: 10px; padding-left: 1em; text-indent: -1em; } .single-box .single-text h4::before{ content: "●"; color: #0d2ea1;; } .ex-linkicon{ height: 16px; display: inline-block; margin-left: 1px; vertical-align: top; margin-top: 5px; line-height: 1; } @media screen and (max-width: 767px) { .single-box .single-text .u-mB48 { margin-bottom: 6vw; } .single-box .single-text h2{ font-size: 5.4vw; border-bottom: 2px solid #0d2ea1; margin-bottom: 10px; } .single-box .single-text h3{ font-size: 4.8vw; border-left: 5px solid #0d2ea1; padding-left: 5px; margin-bottom: 10px; } .single-box .single-text h4{ font-size: 4.1vw; margin-bottom: 10px; } } @media screen and (max-width: 767px) { .single-box .single-text .u-mB49 { margin-top: 3vw; } } @media screen and (min-width: 768px) { .single-box .single-text .p-imgBox { margin-bottom: 20px; } } @media screen and (max-width: 767px) { .single-box .single-text .p-imgBox { margin-bottom: 1.3333333333vw; } } .single-box .single-text .p-imgBox img { width: 100%; } .single-box .main-img{ margin-bottom: 44px; } .single-box .main-img img{ width: 100%; } .btn-wrap{ display: flex; max-width: 570px; margin-left: auto; margin-right: auto; margin-bottom: 130px; justify-content: space-between; } .btn-wrap .btn1,.btn-wrap .btn2{ width: 49%; } .btn-wrap .btn1 a{ padding-top: 8px; padding-bottom: 8px; color: #fff; display: block; width: 100%; font-size: 17px; background: #0D2E8C; position: relative; text-align: center; } .btn-wrap .btn1 a::after{ content: "»"; position: absolute; font-size: 20px; color:#fff; right:15px; line-height: 1; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .btn-wrap .btn2 a{ padding-top: 8px; padding-bottom: 8px; color: #fff; display: block; width: 100%; font-size: 17px; position: relative; text-align: center; } .btn-wrap .btn2 a::after{ content: "»"; position: absolute; font-size: 20px; color:#fff; right:15px; line-height: 1; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .mini-ttl.ex{ margin-bottom: 0; } .btn-wrap .btn2.regional a{ background:#1789C6; } .btn-wrap .btn2.international a{ background:#7F1F82; } .btn-wrap .btn2.society a{ background:#C10E70; } .btn-wrap .btn2.problem a{ background:#D98200; } .btn-wrap .btn2.environment a{ background:#0B8940; } .top-ttlbox{ background: url("/-/media/cojp/corporate/bsl/topic-new/img/pc_bg.jpg") no-repeat center center; background-size:100%; padding-top: 6%; padding-bottom: 15%; } .top-ttlbox .ttl-name{ font-size: 3.7vw; text-align: center; color: #0D2E8C; line-height: 1; margin-bottom: 25px; } .top-ttlbox .ttl-tex{ margin-bottom: 1.0vw; text-align: center; line-height: 1; font-size: 3.3vw; color: #0D2E8C; font-weight: 500; } .top-ttlbox .ttl-copy{ text-align: center; font-size: 1.5vw; line-height: 1; letter-spacing: 0.1em; } /*.top-ttlbox{ background: url("../img/pc_bg.jpg") no-repeat center center; background-size:100%; padding-top: 80px; padding-bottom: 197px; } .top-ttlbox .ttl-name{ font-size: 25px; text-align: center; color: #0D2E8C; line-height: 1; margin-bottom: 25px; } .top-ttlbox .ttl-tex{ margin-bottom: 15px; text-align: center; line-height: 1; font-size: 45px; color: #0D2E8C; font-weight: 500; } */ .question{ font-weight: bold; color: #0d2ea1; } .question::before{ content: "─"; } @media print, screen and (max-width: 768px) { .bg4{ padding-top: 8vw; padding-bottom: 15vw; } .single-box{ padding-top: 6vw; padding-bottom: 6vw; margin-bottom: 8vw; } .single-box .single-wrap{ width: 90%; max-width: 696px; margin-left: auto; margin-right: auto; } .single-box .top-flex{ margin-bottom: 5vw; padding-bottom: 5vw; border-bottom: 1px solid #858585; position: relative; } .single-box .top-flex .cat-tex{ width: 46%; padding-top: 1.5vw; padding-bottom: 1.5vw; line-height: 1; text-align: center; border-radius: 5px; max-width:none; margin-left: 0; margin-right: auto; } .single-box .top-flex .day{ width: 30%; position: absolute; font-size: 14px; color:#8D8D8D; text-align: right; margin-right: 1%; right:0; top:30%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .single-box .single-ttl h1{ text-align: center; margin-bottom: 5vw; font-size: 4.8vw; line-height: 1.42; } .single-box .single-text{ font-size: 3.3vw; line-height: 1.81; } .single-box .single-text ul,.single-box .single-text ol{ margin-bottom: 6vw; } .single-box .single-text ul li{ font-size: 3.3vw; line-height: 1.81; list-style: circle; } .single-box .single-text ol{ font-size: 3.3vw; line-height: 1.81; list-style: decimal; } .btn-wrap{ display: block; max-width: 63%; margin-left: auto; margin-right: auto; margin-bottom: 15vw; justify-content: space-between; } .btn-wrap .btn1,.btn-wrap .btn2{ width: 100%; margin-bottom: 5vw; } .btn-wrap .btn1 a{ padding-top: 1vw; padding-bottom: 1vw; font-size: 3.9vw; } .btn-wrap .btn1 a::after{ content: "»"; position: absolute; font-size: 3.3vw; color:#fff; right:3vw; line-height: 1; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .btn-wrap .btn2 a{ padding-top: 1vw; padding-bottom: 1vw; font-size: 3.9vw; } .btn-wrap .btn2 a::after{ content: "»"; position: absolute; font-size: 3.3vw; color:#fff; right:3vw; line-height: 1; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .main-box.dummy{ height: 50vw; } .top-ttlbox{ background: url("/-/media/cojp/corporate/bsl/topic-new/img/sp_bg.jpg") no-repeat center center; background-size:cover; padding-top: 10vw; padding-bottom: 37vw; } .top-ttlbox .ttl-name{ font-size: 4.8vw; margin-bottom:4vw; } .top-ttlbox .ttl-tex{ margin-bottom: 2vw; font-size: 6.6vw; line-height: 1.3; } .top-ttlbox .ttl-copy{ text-align: center; font-size: 3.9vw; line-height: 1.4; } }