@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap"); .font-en { font-family: 'Roboto Condensed', sans-serif; font-weight: 400; } .font-en.t-bold { font-weight: 700; } .btn a { display: block; color: #fff; padding: 21px 0; text-decoration: none; font-weight: bold; display: flex; align-items: center; position: relative; overflow: hidden; background-image: -moz-linear-gradient(0deg, #d70016 0%, #dd5007 100%); background-image: -webkit-linear-gradient(0deg, #d70016 0%, #dd5007 100%); background-image: -ms-linear-gradient(0deg, #d70016 0%, #dd5007 100%); line-height: 1; transition: all ease .5s; } .btn a:hover:after { opacity: 0; } .btn a:hover .icon-plane { background-image: url("../images/shared/icon-plane.svg"); background-size: 27px auto; } .btn a:after { content: ""; display: block; width: 100%; height: 100%; position: absolute; background: #000; left: 0; top: 0; transition: opacity 0.5s ease; } .btn a .btn-text { z-index: 2; position: relative; } .btn a .icon { z-index: 2; position: relative; background-repeat: no-repeat; background-position: 0 0; } .btn a .icon-plane { width: 27px; height: 25px; background-image: url("../images/shared/icon-plane-rl.svg"); background-size: 27px auto; } .btn a .icon-arrow { width: 25px; height: 8px; position: absolute; top: 50%; transform: translateY(-50%); right: 10px; background-image: url("../images/shared/arrow.svg"); background-size: 25px 8px; z-index: 4; } .btn-movie a { background: #000; transition: all .5s ease; } .btn-movie a:hover { color: #000; background: #fff; } .btn-movie a:hover .icon-movie { background-image: url("../images/shared/icon-movie-b.svg"); } .btn-movie:after { content: none; } .btn-movie .icon-movie { width: 26px; height: 20px; background-image: url("../images/shared/icon-movie.svg"); background-size: 26px auto; } .btn-more a { text-decoration: none; background: none; position: relative; justify-content: center; } .btn-more a:after { content: none; } .btn-more a:hover { background: #fff; color: #d70116; } .btn-more a:hover .icon-arrow { background-image: url("../images/shared/arrow-r.svg"); } .tab-only { display: none; } .sp-only { display: none; } .st-GlobalFooter_PageTop { z-index: 99; } .contact { background: #000; padding: 70px 0 75px; } .contact-inner { width: 1000px; margin: 0 auto; } .contact-textarea { display: flex; color: #fff; justify-content: space-between; padding-right: 30px; margin-bottom: 30px; } .contact-title { line-height: 1; width: 38%; } .contact-title .font-en { color: #d70016; font-size: 3.15rem; letter-spacing: 0.06em; } .contact-title .font-jp { font-size: 0.875rem; display: block; margin-top: 10px; } .contact .text { font-size: 0.95rem; width: 49%; } .contact .btn { font-size: 1.6rem; } .contact .btn a { background: #fff; justify-content: center; } .contact .btn a:hover { color: #d70116; } .contact .btn a:hover .icon-plane { background-image: url("../images/shared/icon-plane-r.svg"); } .contact .btn a:hover .icon-arrow { background-image: url("../images/shared/arrow-r.svg"); } .contact .btn a:after { background: -moz-linear-gradient(left, #d70016 0%, #dd5007 100%); background: -webkit-linear-gradient(left, #d70016 0%, #dd5007 100%); background: linear-gradient(to right, #d70016 0%, #dd5007 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d70016', endColorstr='#dd5007',GradientType=1 ); } .contact .btn .icon-plane { margin-right: 20px; background-image: url("../images/shared/icon-plane-w.svg"); } .contact .btn .icon-arrow { width: 32px; position: relative; top: auto; background-size: 32px 11px; transform: none; right: auto; display: inline-block; margin-left: 30px; } .contact-btnarea{ color: #FFF; } @media screen and (max-width: 768px){ .contact-btnarea{ padding: 0 10px; } } @media screen and ( max-width:1024px) { .contact-btnarea{ padding: 0 10px; } } .contact-btnarea:after{ content: "";display: block;clear: both; } .contact-btnarea-left{ float: left; width: 440px; min-height: 150px; padding: 10px 20px 0 20px; margin-right: 20px; background: -moz-linear-gradient(left, #d70016 0%, #dd5007 100%); background: -webkit-linear-gradient(left, #d70016 0%, #dd5007 100%); background: linear-gradient(to right, #d70016 0%, #dd5007 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d70016', endColorstr='#dd5007',GradientType=1 ); } @media screen and (max-width: 768px){ .contact-btnarea-left{ float: none; width: 100%; min-height: auto; padding: 10px 20px; margin: 0 0 10px 0; } } @media screen and ( max-width:1024px) { .contact-btnarea-left{ float: none; width: 100%; min-height: auto; padding: 10px 20px; margin: 0 0 10px 0; } } .contact-btnarea-left p.contact-btnarea-left-text01{ font-size: 0.8em; margin-bottom: 5px; } @media screen and (max-width: 768px){ .contact-btnarea-left p.contact-btnarea-left-text01{ text-align: center; } } .contact-btnarea-left p.contact-btnarea-left-text01 span{ font-size: 1.2rem; font-weight: bold; display: block; } .contact-btnarea-left p.contact-btnarea-left-text02{ background: #000; text-align: center; font-size: 0.8em; margin-bottom: 5px; } @media screen and (max-width: 768px){ .contact-btnarea-left p.contact-btnarea-left-text02{ text-align: center; padding: 10px 0; } } .contact-btnarea-left p.contact-btnarea-left-text02 span{ font-size: 1.6rem; font-weight: bold; } @media screen and (max-width: 768px){ .contact-btnarea-left p.contact-btnarea-left-text02 span{ text-align: center; display: block; } } .contact-btnarea-left p.contact-btnarea-left-text03{ font-size: 0.8em; } @media screen and (max-width: 768px){ .contact-btnarea-left p.contact-btnarea-left-text03{ text-align: center; } } .contact-btnarea-center{ float: left; width: 370px; min-height: 150px; padding: 40px 20px 0 20px; margin-right: 20px; background: -moz-linear-gradient(left, #d70016 0%, #dd5007 100%); background: -webkit-linear-gradient(left, #d70016 0%, #dd5007 100%); background: linear-gradient(to right, #d70016 0%, #dd5007 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d70016', endColorstr='#dd5007',GradientType=1 ); } @media screen and (max-width: 768px){ .contact-btnarea-center{ float: none; width: 100%; min-height: auto; padding: 10px 20px; margin: 0 0 10px 0; } } .contact-btnarea-center .btn.btn-contact a:after{ background: #000; } @media screen and (max-width: 768px){ .contact-btnarea-center .btn.btn-contact a{ background: #000; } } .contact-btnarea-center .btn.btn-contact a .btn-text{ font-size: 1.2em; } .contact-btnarea-right{ float: left; width: 150px; } @media screen and (max-width: 768px){ .contact-btnarea-right{ float: none; width: 100%; margin: 0; padding-bottom: 20px; } } .contact-btnarea-right div{ width: 150px; padding: 5px; background: -moz-linear-gradient(left, #d70016 0%, #dd5007 100%); background: -webkit-linear-gradient(left, #d70016 0%, #dd5007 100%); background: linear-gradient(to right, #d70016 0%, #dd5007 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d70016', endColorstr='#dd5007',GradientType=1 ); } @media screen and (max-width: 768px){ .contact-btnarea-right div{ margin: 0 auto; } } .contact-btnarea-right p{ text-align: center; font-size: 0.8em; letter-spacing: -0.05em; } .btn-fix { background: #000; position: fixed; right: 0; bottom: 0; width: 104px; height: 104px; display: none; } .btn-fix a { display: block; position: relative; background-image: -moz-linear-gradient(0deg, #d70016 0%, #dd5007 100%); background-image: -webkit-linear-gradient(0deg, #d70016 0%, #dd5007 100%); background-image: -ms-linear-gradient(0deg, #d70016 0%, #dd5007 100%); } .btn-fix a:after { content: ""; width: 100%; height: 100%; position: absolute; transition: opacity ease 0.5s; background: #000; left: 0; top: 0; opacity: 1; } .btn-fix a img { vertical-align: top; z-index: 2; position: relative; } .btn-fix a:hover:after { opacity: 0; } .overray-bg { display: none; width: 100%; height: 100%; background: #000; opacity: 0.7; position: fixed; top: 0; left: 0; z-index: 1000; cursor: pointer; } @media screen and (max-width: 1024px) { .pc-only { display: none; } .tab-only { display: inline; } a:hover { opacity: 1; } .btn a { background: #000; transition: none; justify-content: center; } .btn a:hover:after { opacity: 0; } .btn a:hover .icon-plane { background-image: url("../images/shared/icon-plane-rl.svg"); } .btn a:after { content: none; } .btn-movie a { background: #000; transition: none; } .btn-movie a:hover { color: #fff; background: #000; } .btn-movie a:hover .icon-movie { background-image: url("../images/shared/icon-movie.svg"); } .btn-more a { background: none; } .btn-more a:hover { background: none; color: #fff; } .btn-more a:hover .icon-arrow { background-image: url("../images/shared/arrow.svg"); } .btn a { font-weight: bold; transition: none; } .btn a:hover { opacity: 1; } .contact-inner { width: 100%; margin: 0 auto; } .contact-textarea { width: 84%; flex-direction: column; padding-right: 0; margin: 0 auto; } .contact-title { line-height: 1; text-align: center; margin-bottom: 25px; width: 100%; } .contact-title .font-en { letter-spacing: 0.02em; text-indent: 0.02em; color: #d70016; background: #d70016; background: -moz-linear-gradient(left, #d70016 0%, #dd5007 100%); background: -webkit-linear-gradient(left, #d70016 0%, #dd5007 100%); background: linear-gradient(to right, #d70016 0%, #dd5007 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .contact .text { width: 100%; margin-bottom: 60px; } .contact .text br { display: none; } .contact .btn { width: 92.682926829%; margin: 0 auto 0; } .contact .btn a { background: -moz-linear-gradient(left, #d70016 0%, #dd5007 100%); background: -webkit-linear-gradient(left, #d70016 0%, #dd5007 100%); background: linear-gradient(to right, #d70016 0%, #dd5007 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d70016', endColorstr='#dd5007',GradientType=1 ); justify-content: center; } .contact .btn a:hover { color: #fff; } .contact .btn a:hover .icon-plane { background-image: url("../images/shared/icon-plane-w.svg"); background-size: 30px auto; } .contact .btn a:hover .icon-arrow { background-image: url("../images/shared/arrow.svg"); } } @media screen and (max-width: 768px) { a:hover { opacity: 1; } .btn a { background: #000; transition: none; justify-content: center; } .btn a:hover:after { opacity: 0; } .btn a:hover .icon-plane { background-image: url("../images/shared/icon-plane-rl.svg"); background-size: 22px auto; } .btn a:after { content: none; } .btn a .icon-plane { width: 22px; height: 21px; background-size: 22px auto; } .btn-movie a { background: #000; transition: none; } .btn-movie a:hover { color: #fff; background: #000; } .btn-movie a:hover .icon-movie { background-image: url("../images/shared/icon-movie.svg"); } .btn-movie .icon-movie { width: 22px; height: 18px; background-size: 22px auto; } .btn-more a { background: none; } .btn-more a:hover { background: none; color: #fff; } .btn-more a:hover .icon-arrow { background-image: url("../images/shared/arrow.svg"); } .btn a { padding: 21px 0; font-weight: bold; transition: none; } .btn a:hover { opacity: 1; } .btn a .icon-plane { width: 27px; } .btn a .icon-movie { width: 26px; } .btn a .icon-arrow { width: 22px; position: absolute; top: 50%; transform: translateY(-50%); right: 15px; } .tab-only { display: none; } .sp-only { display: inline; } .contact { padding-bottom: 0; } .contact-title .font-en { font-size: 2.5rem; } .contact-title .font-jp { margin-top: 10px; } .contact .text { font-size: 0.8rem; } .contact .text br { display: none; } .contact .btn { width: 100%; font-size: 1.15rem; } .contact .btn a { background: -moz-linear-gradient(left, #d70016 0%, #dd5007 100%); background: -webkit-linear-gradient(left, #d70016 0%, #dd5007 100%); background: linear-gradient(to right, #d70016 0%, #dd5007 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d70016', endColorstr='#dd5007',GradientType=1 ); justify-content: center; } .contact .btn a:hover { color: #fff; } .contact .btn a:hover .icon-plane { background-image: url("../images/shared/icon-plane-w.svg"); background-size: 30px; } .contact .btn a:hover .icon-arrow { background-image: url("../images/shared/arrow.svg"); } .contact .btn .icon-plane { width: 30px; height: 25px; margin-right: 15px; background-size: 30px 25px; } .contact .btn .icon-arrow { width: 32px; position: absolute; top: 50%; transform: translateY(-50%); right: 15px; margin-left: 0; } } @font-face { font-family: 'fontello'; src: url("../fonts/icon/fontello.eot?32483"); src: url("../fonts/icon/fontello.eot?32483#iefix") format("embedded-opentype"), url("../fonts/icon/fontello.woff2?32483") format("woff2"), url("../fonts/icon/fontello.woff?32483") format("woff"), url("../fonts/icon/fontello.ttf?32483") format("truetype"), url("../fonts/icon/fontello.svg?32483#fontello") format("svg"); font-weight: normal; font-style: normal; } [class^="icon-"]:before, [class*=" icon-"]:before { font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; text-align: center; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-key:before { content: '\e800'; } /* '' */ .icon-globe:before { content: '\e801'; } /* '' */ .icon-person:before { content: '\e802'; } /* '' */ .icon-phone-circled:before { content: '\e803'; } /* '' */ .icon-document:before { content: '\e819'; } /* '' */ .icon-graph:before { content: '\e81a'; } /* '' */ .icon-atom:before { content: '\e81b'; } /* '' */ .icon-cancel:before { content: '\e81c'; } /* '' */ .icon-pdf_file:before { content: '\e82b'; } /* '' */ .icon-search:before { content: '\e82f'; } /* '' */ .icon-download:before { content: '\e830'; } /* '' */ .icon-circle_exclamation_mark:before { content: '\e835'; } /* '' */ .icon-search_question:before { content: '\e836'; } /* '' */ .icon-exclamation:before { content: '\e83e'; } /* '' */ .icon-settings:before { content: '\e843'; } /* '' */ .icon-folder:before { content: '\e845'; } /* '' */ .icon-line-chart:before { content: '\e848'; } /* '' */ .icon-website_link:before { content: '\e84c'; } /* '' */ .icon-icn_electrical:before { content: '\e8ba'; } /* '' */ .icon-icn_mechanical:before { content: '\e8bb'; } /* '' */ .icon-icn_thermal:before { content: '\e8bc'; } /* '' */ .icon-icn_chemical:before { content: '\e8bd'; } /* '' */ .icon-mail-alt:before { content: '\f0e0'; } /* '' */ .icon-angle-double-down:before { content: '\f103'; } /* '' */ .icon-angle-left:before { content: '\f104'; } /* '' */ .icon-angle-right:before { content: '\f105'; } /* '' */ .icon-angle-up:before { content: '\f106'; } /* '' */ .icon-angle-down:before { content: '\f107'; } /* '' */ .icon-angle-circled-down:before { content: '\f13a'; } /* '' */ .icon-building-filled:before { content: '\f1ad'; } /* '' */ .icon-youtube-play:before { content: '\f16a'; } /*-------------------------- header ---------------------------*/ #header_wrapper { width: 100%; position: absolute; top: 0; left: 0; z-index: 1000; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } #header_wrapper.fixed { position: fixed; top: -126px; left: 0; } #header_wrapper.fixed2 { position: fixed; top: -126px; left: 0; transition: top 0.3s ease-in-out 0s; } #header_wrapper.fixed3 { position: fixed; top: -300px; left: 0; } #header_wrapper.fixed3 .gnavi > ul > li { transition: none; } #header_wrapper.fixed3 .gnavi > ul > li:first-child { margin-right: 30px; } #header_wrapper.fixed3 .gnavi > ul > li:first-child > a { height: 40px; line-height: 42px; width: 120px; text-align: center; padding: 0; background: #F6F7F7; border-radius: 8px 8px 0 0; background-size: 106px 13px; text-decoration: none; } #header_wrapper.fixed3 .gnavi > ul > li.nav-contact a { color: #fff; font-size: 16px; font-weight: 500; text-align: center; background: #e20226; border-radius: 5px 5px 0 0; width: auto; padding: 0 25px 0 10px; display: inline-block; position: relative; transition: all 0.3s ease-in-out 0s; } #header_wrapper.fixed3 .gnavi > ul > li.nav-contact a.headercontact1 { display: none; } #header_wrapper.fixed3 .gnavi > ul > li.nav-contact a.headercontact2 { display: block; } #header_wrapper.fixed3 .gnavi > ul > li.nav-contact a:hover { background: #960119; } #header_wrapper.fixed3 .gnavi > ul > li.nav-contact a::after { font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: auto; margin: 0; text-align: center; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); transition: all 0.3s ease-in-out 0s; content: "\f105"; } #header_wrapper.fixed3 .gnavi > ul > li.nav-contact a > span:before { font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: auto; margin: 0; text-align: center; display: inline-block; content: "\F0E0"; margin-right: 6px; } #header_wrapper.fixed4 { top: -168px; transition: top 0.3s ease-in-out 0s; } #header_wrapper.fixed4 .gnavi > ul > li { transition: none; } #header_wrapper.fixed5 { top: -300px; transition: top 0.3s ease-in-out 0s; } @media only screen and (max-width: 1023px) { #header_wrapper { position: static; box-shadow: none; } #header_wrapper.fixed, #header_wrapper.fixed2, #header_wrapper.fixed3 { position: static; } } .st-GlobalHeader, .layout-Top_ContentsHeader { background: #fff; } @media only screen and (max-width: 1023px) { .st-GlobalHeader { position: fixed; top: 0; left: 0; width: 100%; z-index: 200; } #fc_header .header_nav .header_top_nav .link_gsn { display: none; } } .st-Breadcrumb { margin: 0; padding: 10px 0; } .st-Breadcrumb_Item a { color: #666; text-decoration: none; transition-duration: 0.3s; } .st-Breadcrumb_Item a:hover { color: #df0523; text-decoration: underline; } .st-Title span { font-size: 16px; } @media only screen and (max-width: 1023px) { .st-Title { margin: 7px 0 0 0; float: left; } } @media only screen and (max-width: 768px) { .st-Title { margin-top: 10px; line-height: 1; float: left; } .st-Title span { font-size: 12px; } } #fc_header { color: #555; background: #fff; width: 100%; margin-top: -10px; transition: all 0.3s ease-in-out 0s; /*-------------------------- gnavi ---------------------------*/ /*-------------------------- languagenavi ---------------------------*/ } #fc_header .header_inner { position: relative; } #fc_header .header_content { max-width: 1200px; padding: 0 15px; margin: 0 auto; } #fc_header .header_top { background: #fff; /*-------------------------- hamburger menu ---------------------------*/ } #fc_header .header_top_inner { max-width: 1200px; margin: 0 auto; padding: 0 15px; } #fc_header .header_top .header_nav-sp { display: none; } #fc_header .header_nav .header_search { margin-top: 5px; float: right; } #fc_header .header_nav .header_search input { -webkit-appearance: none; -moz-appearance: none; appearance: none; } #fc_header .header_nav .header_search #fc_search { position: relative; } #fc_header .header_nav .header_search #fc_search::before { font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: auto; margin: 0; text-align: center; color: #e20226; font-size: 14px; position: absolute; top: 50%; left: 10px; z-index: 10; transform: translateY(-50%); content: "\e82f"; } #fc_header .header_nav .header_search .fc_search_input { line-height: 24px; font-size: 14px; background: #fff; border-radius: 5px; border: 1px solid #c1c1c1; width: 260px; height: 28px; padding: 0 10px 0 35px; margin: 0; outline: none; transition: all 0.3s ease-in-out 0s; } #fc_header .header_nav .header_search .fc_search_input:focus { background: #fff; border-color: #e20226; } #fc_header .header_nav .header_search .fc_search_submit { display: none; } #fc_header .header_nav_inner { max-width: 1200px; margin: 0 auto; padding: 0 15px; display: flex; justify-content: space-between; } #fc_header .header_nav .header_top_nav { display: flex; justify-content: space-between; align-items: center; } #fc_header .header_nav .header_top_nav .link_gsn { padding-right: 20px; } #fc_header .header_nav .header_top_nav .link_gsn a { color: #666; font-size: 14px; transition: all 0.3s ease-in-out 0s; text-decoration: none; } #fc_header .header_nav .header_top_nav .link_gsn a::after { font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: auto; margin: 0; text-align: center; color: #e20226; margin-left: 10px; content: "\f105"; } #fc_header .header_nav .header_top_nav .link_gsn a:hover { color: #e20226; } #fc_header .gnavi { font-weight: 400; } #fc_header .gnavi ul { list-style-type: none; display: flex; margin: 0; padding: 0; } #fc_header .gnavi > ul > li > a { color: #000; font-size: 16px; font-weight: 500; line-height: 40px; padding: 0 40px 0 0; display: block; transition: all 0.3s ease-in-out 0s; text-decoration: none; } #fc_header .gnavi > ul > li > a:hover { color: #e20226; } #fc_header .gnavi > ul > li > a.has-child { position: relative; } #fc_header .gnavi > ul > li > a.has-child::after { font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: auto; margin: 0; text-align: center; color: #666; position: static; transform: none; margin-left: 4px; color: #e20226; content: "\f107"; transition: all 0.3s ease-in-out 0s; } #fc_header .gnavi > ul > li:first-child a { transition: none; } #fc_header .gnavi > ul > li:last-child a { transition: none; } #fc_header .gnavi > ul > li:last-child a.headercontact2 { display: none; } #fc_header .gnavi > ul > li.current::before { content: ""; width: 100%; height: 4px; background: #e20226; position: absolute; top: 0; left: 0; } #fc_header .gnavi > ul > li .has-child.is-open ~ div, #fc_header .gnavi > ul > li .has-child.is-open ~ ul { max-height: 100vh; } #fc_header .gnavi > ul > li .accordion_menu { background-color: rgba(79, 79, 79, 0.75); padding: 0; width: 100%; overflow: hidden; position: absolute; top: 81px; left: 0; display: none; z-index: 99; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) inset; } #fc_header .gnavi > ul > li .accordion_menu .container { max-width: 1200px; margin: 0 auto; padding: 20px 15px; position: relative; text-align: left; display: flex; } #fc_header .gnavi > ul > li .accordion_menu .container .row { margin-right: 110px; } #fc_header .gnavi > ul > li .accordion_menu .container .row:last-child { margin-right: 0; } #fc_header .gnavi > ul > li .accordion_menu ul { display: block; } #fc_header .gnavi > ul > li .accordion_menu ul li a { color: #fff; padding: 5px 0; display: inline-block; transition: all 0.3s ease-in-out 0s; font-size: 1.4rem; text-decoration: none; } #fc_header .gnavi > ul > li .accordion_menu ul li a::before { font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: auto; margin: 0; text-align: center; margin-right: 6px; content: "\f105"; } #fc_header .gnavi > ul > li .accordion_menu ul li a:hover { opacity: 0.6; } #fc_header .gnavi > ul > li .accordion_menu ul li a sub { font-size: 8px; bottom: 0; } #fc_header .gnavi > ul > li .accordion_menu.about_us ul:not(:last-child) { margin-right: 120px; } #fc_header .gnavi > ul > li .accordion_menu.about_us ul:first-child li:not(:first-child) { padding-left: 20px; } #fc_header .gnavi > ul > li .accordion_menu.about_us figure { float: right; } #fc_header .gnavi > ul > li .accordion_menu.products ul:not(:last-child) { margin-right: 60px; } #fc_header .gnavi > ul > li .accordion_menu.products ul li a { padding: 0; line-height: 42px; margin-bottom: 4px; } #fc_header .gnavi > ul > li .accordion_menu.products .banners { float: right; } #fc_header .gnavi > ul > li .accordion_menu.products .btn_block { margin-top: 20px; } #fc_header .gnavi > ul > li .accordion_menu.products .btn_block a { color: #e20226; line-height: 45px; text-align: center; background: #f9f9f9; border-radius: 5px; width: 320px; height: 45px; border: 1px solid #d0d0d0; position: relative; display: inline-block; transition: all 0.3s ease-in-out 0s; } #fc_header .gnavi > ul > li .accordion_menu.products .btn_block a span::before { font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: auto; margin: 0; text-align: center; margin-right: 10px; content: "\e82f"; } #fc_header .gnavi > ul > li .accordion_menu.products .btn_block a::before, #fc_header .gnavi > ul > li .accordion_menu.products .btn_block a::after { font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: auto; margin: 0; text-align: center; position: absolute; top: 50%; transform: translateY(-50%); } #fc_header .gnavi > ul > li .accordion_menu.products .btn_block a::before { color: #dcb3b3; font-size: 22px; left: 20px; } #fc_header .gnavi > ul > li .accordion_menu.products .btn_block a::after { right: 10px; } #fc_header .gnavi > ul > li .accordion_menu.products .btn_block a:nth-child(2) { margin: 0 10px; } #fc_header .gnavi > ul > li .accordion_menu.products .btn_block a.btn_search::after { content: "\f105"; } #fc_header .gnavi > ul > li .accordion_menu.products .btn_block a.btn_search_material::before { content: "\e81b"; } #fc_header .gnavi > ul > li .accordion_menu.products .btn_block a.btn_search_property::before { content: "\e81a"; } #fc_header .gnavi > ul > li .accordion_menu.products .btn_block a.btn_catalogue { float: right; } #fc_header .gnavi > ul > li .accordion_menu.products .btn_block a.btn_catalogue::before { content: "\e819"; } #fc_header .gnavi > ul > li .accordion_menu.products .btn_block a:hover { color: #fff; background: #e20226; } #fc_header .gnavi > ul > li .accordion_menu.products .btn_block a:hover::before { color: #fff; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder { float: left; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder dl dt { color: #fff; font-size: 24px; font-weight: 700; margin-bottom: 5px; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder dl dt::before { font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: auto; margin: 0; text-align: center; margin-right: 10px; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder dl dt::after { /*@include media(tabL){ @include fontSet_icon; font-size: 22px; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); content: "\f107"; }*/ } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder dl dt.heading_property::before { content: "\e81a"; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder dl dt.heading_material::before { content: "\e81b"; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder dl dt.heading_catalogs::before { content: "\e819"; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder dl dt.heading_videos::before { content: "\F16A"; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder dl dd .btn_block { margin-top: 0; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder dl dd .btn_block a { color: #000; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder dl dd .btn_block a.btn_catalogue { color: #e20226; line-height: 45px; text-align: center; background: #f9f9f9; border-radius: 5px; width: 300px; height: 45px; border: 1px solid #d0d0d0; position: relative; display: inline-block; transition: all 0.3s ease-in-out 0s; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder dl dd .btn_block a.btn_catalogue::before { font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; text-align: center; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); font-size: 22px; color: #dcb3b3; content: "\e819"; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder dl dd .btn_block a.btn_catalogue span::before { font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; text-align: center; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-right: 10px; content: "\e82f"; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder dl dd .btn_block a.btn_catalogue:hover { color: #fff; background: #e20226; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder dl dd .btn_block a.btn_catalogue:hover::before { color: #fff; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder dl dd .btn_block a.btn_videos { color: #e20226; line-height: 45px; text-align: center; background: #f9f9f9; border-radius: 5px; width: 300px; height: 45px; border: 1px solid #d0d0d0; position: relative; display: inline-block; transition: all 0.3s ease-in-out 0s; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder dl dd .btn_block a.btn_videos:hover { color: #fff; background: #e20226; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder dl dd .btn_block a.btn_videos:hover::before { color: #fff; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder dl + dl { margin-top: 30px; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder .col { float: left; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder .col:not(:last-child) { margin-right: 30px; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder .sub_ctg { color: #fff; font-size: 18px; font-style: italic; position: relative; padding-left: 26px; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder .sub_ctg::before { position: absolute; top: 50%; left: -2px; transform: translateY(-50%); display: block; font-family: "fontello"; font-size: 24px; font-style: normal; font-weight: normal; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder .sub_ctg.mechanical::before { content: "\E8BB"; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder .sub_ctg.electrical::before { content: "\E8BA"; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder .sub_ctg.thermal::before { content: "\E8BC"; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder .sub_ctg.chemical::before { content: "\E8BD"; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder .sub_ctg:not(:first-child) { margin-top: 20px; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder ul { float: none; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder:not(:last-child) { margin-right: 45px; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder .btn_block { margin-top: 30px; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder .btn_block .btn_download { color: #e20226; line-height: 45px; background: #f6f6f6; border: 1px solid #b9b9b9; border-radius: 5px; width: 300px; height: 45px; padding: 0 10px; display: inline-block; position: relative; transition: all 0.3s ease-in-out 0s; /*&::after { @include fontSet_icon; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); content: "\e830"; }*/ } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder .btn_block .btn_download .st-Icon-Pdf:before { margin-top: -5px; font-size: 28px; transition: all 0.3s ease-in-out 0s; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder .btn_block .btn_download:hover { color: #fff; background: #e20226; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder .btn_block .btn_download:hover .st-Icon-Pdf:before { color: #fff; } #fc_header .languagenavi { position: relative; transition: left .5s; width: 130px; z-index: 1; } #fc_header .languagenavi .languagenavi_txt { color: #666; font-size: 14px; position: relative; background: #fff; text-align: center; border: 1px solid #ddd; border-radius: 5px; padding: 4px 14px 4px 0px; cursor: pointer; transition: all 0.3s ease-in-out 0s; } #fc_header .languagenavi .languagenavi_txt:after { font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: auto; margin: 0; text-align: center; position: absolute; top: 4px; right: 10px; color: #e20226; content: '\f107'; transition: all .2s; } #fc_header .languagenavi .languagenavi_txt:hover { background: #e20226; color: #fff; } #fc_header .languagenavi .languagenavi_txt:hover:after { color: #fff; } #fc_header .languagenavi .languagenavi_txt.is-open { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } #fc_header .languagenavi .languagenavi_txt.is-open:after { transform: rotate(180deg); } #fc_header .languagenavi .languagenavi_txt.is-open ~ ul { max-height: 100vh; } #fc_header .languagenavi ul { transition: max-height .5s; position: absolute; z-index: 10000; top: auto; left: auto; width: 100%; max-height: 0; overflow: hidden; border-left: 1px solid #ccc; border-right: 1px solid #ccc; background-color: #fff; border-radius: 5px; border-top-right-radius: 0; border-top-left-radius: 0; list-style-type: none; padding: 0; } #fc_header .languagenavi ul li { border-bottom: 1px solid #ccc; } #fc_header .languagenavi ul li a { color: #666; font-size: 14px; position: relative; text-align: center; padding: 4px 14px 4px 0px; display: block; transition: all 0.5s; position: relative; text-decoration: none; } #fc_header .languagenavi ul li a:after { font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: auto; margin: 0; text-align: center; position: absolute; top: 4px; right: 10px; color: #e20226; content: '\f105'; margin-left: 10px; } #fc_header .languagenavi ul li a:hover { color: #fff; background: #e20226; } #fc_header .languagenavi ul li a:hover:after { color: #fff; } @media only screen and (max-width: 1023px) { #fc_header { margin-top: 65px; background: #fff; width: 100%; left: 0 !important; border-bottom: 1px solid #e6e6e6; } #fc_header .header_content { background: #fff; width: 100%; margin: 0; padding: 0; position: relative; } #fc_header .header_top { float: none; width: 100%; height: 40px; padding: 0 15px 0 10px; position: relative; z-index: 101; } #fc_header .header_top .header_top_nav .link_gsn { display: none; } #fc_header .header_top_inner { padding: 0; } #fc_header .header_top .header_nav-sp { display: block; float: right; position: relative; top: 0; padding-left: 0; } #fc_header .header_top .header_nav-sp li { display: inline-block; cursor: pointer; margin-left: 8px; vertical-align: middle; } #fc_header .header_top .header_nav-sp li.is-open .btnSpMenu_content .bar span:nth-child(1), #fc_header .header_top .header_nav-sp li.is-open .btnSpMenu_content .bar span:nth-child(4) { top: 12px; opacity: 0; } #fc_header .header_top .header_nav-sp li.is-open .btnSpMenu_content .bar span:nth-child(2) { transform: rotate(-135deg); } #fc_header .header_top .header_nav-sp li.is-open .btnSpMenu_content .bar span:nth-child(3) { transform: rotate(135deg); } #fc_header .header_top .header_nav-sp li .btnSpMenu_content { font-size: 8px; padding: 0 5px 3px 5px; border: 1px solid #ddd; background-color: #eee; height: 40px; border-radius: 3px; } #fc_header .header_top .header_nav-sp li .btnSpMenu_content .bar { display: block; text-align: center; position: relative; width: 28px; height: 25px; margin: 0 auto; } #fc_header .header_top .header_nav-sp li .btnSpMenu_content .bar span { position: absolute; top: 12px; left: 3px; display: block; width: 22px; height: 2px; background-color: #777; } #fc_header .header_top .header_nav-sp li .btnSpMenu_content .bar span:nth-child(1) { top: 7px; transition: .25s ease-in-out; } #fc_header .header_top .header_nav-sp li .btnSpMenu_content .bar span:nth-child(2), #fc_header .header_top .header_nav-sp li .btnSpMenu_content .bar span:nth-child(3) { top: 12px; transition: .5s ease-in-out; } #fc_header .header_top .header_nav-sp li .btnSpMenu_content .bar span:nth-child(4) { top: 17px; transition: .25s ease-in-out; } #fc_header .header_top .header_nav-sp li .btnSpMenu_content .bar p { text-align: center; } #fc_header .header_top .header_nav-sp li .icon { font-size: 22px; margin-top: 3px; } #fc_header .header_nav .header_search { display: none; } #fc_header .header_nav_inner { padding: 0; } #fc_header .gnavi { float: none; width: 100%; margin: 0; position: absolute; top: -100vh; left: 0; height: 100vh; z-index: 100; overflow: auto; transition: top .5s; -webkit-overflow-scrolling: touch; } #fc_header .gnavi.is-open { top: 0; padding-top: 58px; } #fc_header .gnavi > ul { height: 100%; } #fc_header .gnavi > ul > li { float: none; display: block; margin: 0; border-bottom: 1px solid #ccc; background-color: #f8f8f8; } #fc_header .gnavi > ul > li > a { font-size: 16px; width: 100%; height: auto; padding: 0 15px; position: relative; } #fc_header .gnavi > ul > li > a.has-child::after { color: #e20226; } #fc_header .gnavi > ul > li > a.has-child.is-open2::after { transform: rotate(180deg); } #fc_header .gnavi > ul > li.current::before { display: none; } #fc_header .gnavi > ul > li .has-child.is-open ~ div, #fc_header .gnavi > ul > li .has-child.is-open ~ ul { max-height: 100%; padding: 0; border-bottom: none; } #fc_header .gnavi > ul > li .accordion_menu { position: static; } #fc_header .gnavi > ul > li .accordion_menu .container { padding: 0; } #fc_header .gnavi > ul > li .accordion_menu ul { float: none; } #fc_header .gnavi > ul > li .accordion_menu ul li a { padding: 8px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.3); display: block; position: relative; } #fc_header .gnavi > ul > li .accordion_menu ul li a::before { font-size: 22px; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); } #fc_header .gnavi > ul > li .accordion_menu.about_us ul:not(:last-child) { margin-right: 0; } #fc_header .gnavi > ul > li .accordion_menu.about_us ul:first-child li:not(:first-child) { padding: 0; } #fc_header .gnavi > ul > li .accordion_menu.about_us ul:first-child li:not(:first-child) a { background: #c02532; padding-left: 20px; } #fc_header .gnavi > ul > li .accordion_menu.about_us figure { display: none; } #fc_header .gnavi > ul > li .accordion_menu.products ul:not(:last-child) { margin-right: 0; } #fc_header .gnavi > ul > li .accordion_menu.products ul li a.prd { padding-left: 12px; } #fc_header .gnavi > ul > li .accordion_menu.products .banners { display: none; } #fc_header .gnavi > ul > li .accordion_menu.products .btn_block { margin: 0; padding: 15px; } #fc_header .gnavi > ul > li .accordion_menu.products .btn_block a { width: 100%; } #fc_header .gnavi > ul > li .accordion_menu.products .btn_block a:nth-child(2) { margin: 10px 0; } #fc_header .gnavi > ul > li .accordion_menu.products .btn_block a.btn_catalogue { float: none; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder { float: none; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder dl dt { font-size: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.3); margin: 0; padding: 10px; position: relative; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder dl dt.heading_catalogs { display: none; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder dl dt.heading_videos { display: none; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder dl dd ul a { background: #bf3b47; padding: 8px 10px 8px 30px; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder dl dd .btn_block a.btn_catalogue { width: 100%; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder dl dd .btn_block a.btn_videos { width: 100%; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder dl + dl { margin-top: 0; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder .col { float: none; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder .col:not(:last-child) { margin-right: 0; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder .sub_ctg { font-size: 16px; background: #c02532; border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding: 10px; cursor: pointer; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder .sub_ctg:not(:first-child) { margin-top: 0; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder:not(:last-child) { margin-right: 0; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder .btn_block { margin-top: 0; padding: 15px; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder .btn_block.btn_block_catalogue { padding-bottom: 0; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder .btn_block .btn_download { text-align: center; width: 100%; } #fc_header .gnavi { /*.has-child + dd, .has-child + ul{ max-height: 0; overflow: hidden; }*/ } #fc_header .gnavi li .has-child.is-open + ul, #fc_header .gnavi li .has-child.is-open + dd { max-height: 100vh; position: relative; top: inherit; left: inherit; padding: 0; } #fc_header .languagenavi { margin: 0; position: absolute; padding: 0; top: 41px; left: -60%; bottom: 0; width: 60%; margin-top: 0; background-color: #f8f8f8; border-right: 1px solid #ccc; } #fc_header .languagenavi.is-open { left: 0; } #fc_header .languagenavi .languagenavi_txt { display: none; } #fc_header .languagenavi ul { border-radius: 0; } #fc_header .languagenavi ul li a { text-align: center; } #fc_header .languagenavi ul li a:after { top: 15px; right: 10px; } #fc_header .languagenavi ul { display: block; max-height: inherit; overflow: inherit; } #fc_header .languagenavi ul li { display: block; border-bottom: 1px solid #ccc; } #fc_header .languagenavi ul li a { display: block; padding: 15px 10px; } } .body_toppage .header_nav { background: rgba(255, 255, 255, 0.8); } @media only screen and (max-width: 1023px) and (max-width: 1023px) { #fc_header .header_top .header_nav-sp li.sp_hidden { display: none; } } @media only screen and (min-width: 1025px) { #fc_header .gnavi > ul > li:first-child > a { padding-left: 0; } } @media only screen and (max-width: 768px) { #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder dl dt { font-size: 14px; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder .sub_ctg { font-size: 14px; padding: 6px 10px 6px 38px; } #fc_header .gnavi > ul > li .accordion_menu.technical_data .holder .sub_ctg::before { left: 20px; font-size: 16px; } } .is-anime, .mv-anime { opacity: 0; will-change: opacity, transform; } @keyframes opacity { 0% { opacity: 0; } 100% { opacity: 1; } } .is-animated.fade-opacity { animation: opacity 0.75s cubic-bezier(0.15, 0.77, 0.25, 1); animation-fill-mode: backwards; } @keyframes fade-top { 0% { transform: translateY(50px); opacity: 0; } 100% { transform: translateY(0px); opacity: 1; } } .is-animated.fade-top, .mv-animated.fade-top { animation: fade-top 0.75s cubic-bezier(0.15, 0.77, 0.25, 1); animation-fill-mode: backwards; } @keyframes fade-slide1 { 0% { opacity: 0; transform: translateX(50px); } 5% { opacity: 1; transform: translateX(0); } 20% { opacity: 1; transform: translateX(0); } 25% { opacity: 0; transform: translateX(-50px); } 99.9% { opacity: 0; transform: translateX(-50px); } 100% { opacity: 0; transform: translateX(50px); } } .mv-animated.fade-slide { animation: fade-slide1 24s cubic-bezier(0.15, 0.77, 0.25, 1) infinite; } @keyframes fade-slide-heater { 0% { opacity: 0; transform: translateX(50px); } 3% { opacity: 1; transform: translateX(0); } 30% { opacity: 1; transform: translateX(0); } 33% { opacity: 0; transform: translateX(-50px); } 99.9% { opacity: 0; transform: translateX(-50px); } 100% { opacity: 0; transform: translateX(50px); } } .heater .mv-animated.fade-slide { animation: fade-slide-heater 18s cubic-bezier(0.15, 0.77, 0.25, 1) infinite; } @keyframes fade-top2 { 0% { transform: translateY(110px); opacity: 0; } 100% { transform: translateY(60px); opacity: 1; } } .is-animated.fade-top2 { animation: fade-top2 0.75s cubic-bezier(0.15, 0.77, 0.25, 1); animation-fill-mode: backwards; } @media only screen and (max-width: 1024px) { .is-animated.fade-top2 { animation: fade-top 0.75s cubic-bezier(0.15, 0.77, 0.25, 1); animation-fill-mode: backwards; } } @keyframes fade-top3 { 0% { transform: translateY(50%); opacity: 0; } 100% { transform: translateY(-50%); opacity: 1; } } .mv-animated.fade-top3 { animation: fade-top3 0.75s cubic-bezier(0.15, 0.77, 0.25, 1); animation-fill-mode: backwards; } @media only screen and (max-width: 1024px) { .mv-animated.fade-top3 { animation: fade-top 0.75s cubic-bezier(0.15, 0.77, 0.25, 1); animation-fill-mode: backwards; } } @keyframes modal-video { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-video-inner { from { transform: translate(0); } to { transform: translate(0, 0); } } .modal-video { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); z-index: 1000000; cursor: pointer; opacity: 1; animation-timing-function: ease-out; animation-duration: 0.3s; animation-name: modal-video; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; -ms-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } .modal-video-close { opacity: 0; } .modal-video-body { max-width: 940px; width: 100%; height: 100%; margin: 0 auto; display: table; } .modal-video-inner { display: table-cell; vertical-align: middle; width: 100%; height: 100%; } .modal-video-movie-wrap { width: 100%; height: 0; position: relative; padding-bottom: 56.25%; background-color: #333; animation-timing-function: ease-out; animation-duration: 0.3s; animation-name: modal-video-inner; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform 0.3s ease-out; -moz-transition: -moz-transform 0.3s ease-out; -ms-transition: -ms-transform 0.3s ease-out; -o-transition: -o-transform 0.3s ease-out; transition: transform 0.3s ease-out; } .modal-video-movie-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .modal-video-close-btn { position: absolute; z-index: 2; top: -48px; right: 0; display: inline-block; width: 48px; height: 48px; overflow: hidden; border: none; background: transparent; } .modal-video-close-btn:before { transform: rotate(45deg); } .modal-video-close-btn:after { transform: rotate(-45deg); } .modal-video-close-btn:before, .modal-video-close-btn:after { content: ''; position: absolute; height: 2px; width: 100%; top: 50%; left: 0; margin-top: -1px; background: #fff; border-radius: 5px; margin-top: -6px; } .main.case-main { position: relative; padding-top: 215px; } .main.case-main img { width: 100%; height: auto; } .main.case-main ul { list-style: none; margin: 0; padding: 0; } .main.case-main .btn-mv { background: #000; position: absolute; right: 0; bottom: -104px; position: fixed; bottom: 0; z-index: 999; } .main.case-main .btn-mv.is-fixed { position: fixed; bottom: 165px; z-index: 999; } .main.case-main .btn-mv a { display: block; position: relative; background-image: -moz-linear-gradient(0deg, #d70016 0%, #dd5007 100%); background-image: -webkit-linear-gradient(0deg, #d70016 0%, #dd5007 100%); background-image: -ms-linear-gradient(0deg, #d70016 0%, #dd5007 100%); } .main.case-main .btn-mv a:after { content: ""; width: 100%; height: 100%; position: absolute; transition: opacity ease 0.5s; background: #000; left: 0; top: 0; opacity: 1; } .main.case-main .btn-mv a img { vertical-align: top; z-index: 2; position: relative; } .main.case-main .btn-mv a:hover:after { opacity: 0; } /************************** mv **************************/ .mv { position: relative; width: 100%; max-width: 1920px; margin: 0 auto; background: url("../images/casestudy/bg-mv-pc.jpg") no-repeat center 100%; line-height: 1; } .mv-inner { position: relative; z-index: 2; width: 92.19%; max-width: 1180px; margin: 0 auto; padding-top: 50px; padding-bottom: 50px; padding-bottom: 680px; } .mv-info { -webkit-display: flex; -moz-display: flex; -ms-display: flex; -o-display: flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; display: table; width: 100%; margin-bottom: 40px; color: #fff; } .mv-info-tag-tit { display: table-cell; vertical-align: bottom; width: 67.8%; } @media only screen and (max-width: 1200px) { .mv-info-tag-tit { width: 59.33%; } } .header_top_nav { z-index: 100; } .mv-info-tag { margin-bottom: 12px; } .mv-info-tag span { display: inline-block; background: #fff; color: #d70016; font-size: 14px; padding: 6px 10px 4px; margin-left: 14px; } .mv-info-tit { font-size: 38px; line-height: 1.4; position: relative; width: 110%; } @media only screen and (max-width: 1200px) { .mv-info-tit .mv-info-tit { width: 100%; } } .mv-info-department { display: table-cell; vertical-align: bottom; width: 23.73%; text-align: right; padding-top: 15px; padding-top: 0; position: relative; top: -8px; } @media only screen and (max-width: 1200px) { .mv-info-department { width: 32.21%; } } .mv-info-department-tit { font-size: 14px; margin-bottom: 14px; } .mv-info-department-items li { font-size: 20px; margin-bottom: 14px; line-height: 1.2; } .mv-info-department-items li:last-child { margin-bottom: 0; } /************************** contents **************************/ .contents { position: relative; margin-top: -630px; } .contents-article { width: 92.19%; max-width: 1180px; margin: 0 auto; padding-top: 100px; padding-bottom: 90px; } .case-article-overview-txt { position: relative; margin-bottom: 80px; padding: 40px 40px; } .case-article-overview-txt:after { display: block; position: absolute; top: 0; left: 0; content: ''; width: 138px; height: 67px; background: url("../images/casestudy/txt-waku-tl.png") no-repeat 0 0; background-size: 100% auto; } .case-article-overview-txt:before { display: block; position: absolute; bottom: 0; right: 0; content: ''; width: 138px; height: 67px; background: url("../images/casestudy/txt-waku-br.png") no-repeat 0 0; background-size: 100% auto; } .case-article-overview-txt p { font-size: 20px; line-height: 2.0; font-weight: 700; text-align: center; } @media only screen and (max-width: 1200px) { .case-article-overview-txt p { text-align: left; } } .case-article-con { width: 89.84%; max-width: 1060px; margin: 0 auto; } .case-article-con img { display: block; } .case-article-con h2 { font-size: 32px; font-weight: 700; line-height: 2.0; width: 88.68%; margin-left: auto; margin-right: auto; margin-bottom: 40px; } .case-article-con img + h2 { margin-top: 120px; } .case-article-con img + h3 { margin-top: 75px; } .case-article-con p + h3 { margin-top: 50px; } .case-article-con p + img { margin-top: 75px; } .case-article-con img + img { margin-top: 75px; } .case-article-con h3 + img { margin-top: 30px; } .case-article-con h3 { position: relative; font-size: 18px; font-weight: 700; line-height: 2.0; width: 88.68%; margin-left: auto; margin-right: auto; margin-bottom: 12px; padding-left: 22px; } .case-article-con h3:after { display: block; position: absolute; top: 17px; left: 0; content: ''; width: 14px; height: 2px; background: #ca0000; } .case-article-con p { font-size: 16px; line-height: 2.0; width: 88.68%; margin-left: auto; margin-right: auto; margin-bottom: 12px; } .case-btn-dateil { width: 560px; margin: 90px auto 0; } .case-btn-dateil a { display: block; font-size: 16px; font-size: 1.15rem; font-weight: 700; text-align: center; padding: 28px 0; text-decoration: none; background: -moz-linear-gradient(left, #d70016 0%, #dd5007 100%); background: -webkit-linear-gradient(left, #d70016 0%, #dd5007 100%); background: linear-gradient(to right, #d70016 0%, #dd5007 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d70016', endColorstr='#dd5007',GradientType=1); color: #000; position: relative; border: 1px solid #000; } .case-btn-dateil a span { position: relative; z-index: 2; padding-right: 32px; } .case-btn-dateil a span i { position: absolute; display: block; width: 25px; height: 8px; top: 50%; margin-top: -4px; right: 0; background-image: url("../images/shared/arrow-b.svg"); background-size: 25px 8px; } .case-btn-dateil a:after { content: ""; width: 100%; height: 100%; position: absolute; z-index: 1; transition: opacity ease 0.5s; background: #fff; left: 0; top: 0; opacity: 1; transition: opacity .5s ease; } .case-btn-dateil a:hover { color: #fff; border: 1px solid #d70016; } .case-btn-dateil a:hover:after { opacity: 0; } .case-btn-dateil a:hover span i { background-image: url("../images/shared/arrow.svg"); background-size: 25px 8px; } .case-article-btn { padding-bottom: 90px; } .case-article-btn-inner { position: relative; width: 92.19%; max-width: 1180px; margin: 0 auto; height: 68px; } .case-article-btn-inner .hack-a, .case-article-btn-inner a { display: block; font-size: 16px; font-weight: 700; text-align: center; padding: 20px 0; text-decoration: none; background: -moz-linear-gradient(left, #d70016 0%, #dd5007 100%); background: -webkit-linear-gradient(left, #d70016 0%, #dd5007 100%); background: linear-gradient(to right, #d70016 0%, #dd5007 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d70016', endColorstr='#dd5007',GradientType=1); color: #000; position: relative; border: 1px solid #000; } .case-article-btn-inner .hack-a span, .case-article-btn-inner a span { position: relative; z-index: 2; } .case-article-btn-inner a:after { content: ""; width: 100%; height: 100%; position: absolute; z-index: 1; transition: opacity ease 0.5s; background: #fff; left: 0; top: 0; opacity: 1; transition: opacity .5s ease; } .case-article-btn-inner a:hover { color: #fff; border: 1px solid #d70016; } .case-article-btn-inner a:hover:after { opacity: 0; } .case-article-btn-inner .hack-a { background: #ccc; opacity: 0.2; } .case-article-btn-list { position: absolute; width: 280px; left: 50%; margin-left: -140px; z-index: 2; } .case-article-btn-list a span { padding-left: 29px; } .case-article-btn-list a span i { position: absolute; display: block; width: 15px; height: 12px; top: 50%; margin-top: -6px; left: 0; background: url("../images/shared/icon-list.png") no-repeat 0 0; background-size: 15px 24px; } .case-article-btn-list a:hover span i { background: url("../images/shared/icon-list.png") no-repeat 0 -12px; background-size: 15px 24px; } .case-article-btn-next-prev { position: absolute; width: 100%; top: 0; left: 0; z-index: 1; -webkit-display: flex; -moz-display: flex; -ms-display: flex; -o-display: flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; } .case-article-btn-next-prev .case-article-btn-prev, .case-article-btn-next-prev .case-article-btn-next { width: 280px; } .case-article-btn-next-prev .case-article-btn-prev .hack-a span i, .case-article-btn-next-prev .case-article-btn-prev a span i, .case-article-btn-next-prev .case-article-btn-next .hack-a span i, .case-article-btn-next-prev .case-article-btn-next a span i { position: absolute; display: block; width: 25px; height: 8px; top: 50%; margin-top: -4px; } .case-article-btn-next-prev .case-article-btn-prev.case-article-btn-next .hack-a span, .case-article-btn-next-prev .case-article-btn-prev.case-article-btn-next a span, .case-article-btn-next-prev .case-article-btn-next.case-article-btn-next .hack-a span, .case-article-btn-next-prev .case-article-btn-next.case-article-btn-next a span { padding-right: 32px; } .case-article-btn-next-prev .case-article-btn-prev.case-article-btn-next .hack-a span i, .case-article-btn-next-prev .case-article-btn-prev.case-article-btn-next a span i, .case-article-btn-next-prev .case-article-btn-next.case-article-btn-next .hack-a span i, .case-article-btn-next-prev .case-article-btn-next.case-article-btn-next a span i { right: 0; background-image: url("../images/shared/arrow-b.svg"); background-size: 25px 8px; } .case-article-btn-next-prev .case-article-btn-prev.case-article-btn-next a:hover span i, .case-article-btn-next-prev .case-article-btn-next.case-article-btn-next a:hover span i { background-image: url("../images/shared/arrow.svg"); background-size: 25px 8px; } .case-article-btn-next-prev .case-article-btn-prev.case-article-btn-prev .hack-a span, .case-article-btn-next-prev .case-article-btn-prev.case-article-btn-prev a span, .case-article-btn-next-prev .case-article-btn-next.case-article-btn-prev .hack-a span, .case-article-btn-next-prev .case-article-btn-next.case-article-btn-prev a span { padding-left: 32px; } .case-article-btn-next-prev .case-article-btn-prev.case-article-btn-prev .hack-a span i, .case-article-btn-next-prev .case-article-btn-prev.case-article-btn-prev a span i, .case-article-btn-next-prev .case-article-btn-next.case-article-btn-prev .hack-a span i, .case-article-btn-next-prev .case-article-btn-next.case-article-btn-prev a span i { left: 0; background-image: url("../images/shared/arrow-b.svg"); background-size: 25px 8px; -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); } .case-article-btn-next-prev .case-article-btn-prev.case-article-btn-prev a:hover span i, .case-article-btn-next-prev .case-article-btn-next.case-article-btn-prev a:hover span i { background: url("../images/shared/arrow.svg") no-repeat 0 0; background-size: 25px 8px; -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); } .pc-disp { display: inline; } .sp-disp { display: none; } @media only screen and (max-width: 1200px) { .pc-disp { display: none; } } @media only screen and (max-width: 1200px) and (max-width: 767px) { .sp-disp { display: inline; } } @media only screen and (max-width: 1023px) { .main.case-main { padding-top: 0; } .main.case-main .btn-mv { display: none; } .mv { background: url("../images/casestudy/bg-mv-tab.jpg") no-repeat center 100%; background-size: cover; } } @media only screen and (max-width: 1023px) and (max-width: 767px) { .mv { background: url("../images/casestudy/bg-mv-sp.jpg") no-repeat center 100%; background-size: cover; } } @media only screen and (max-width: 1023px) { .mv-inner { width: 92%; max-width: 100%; margin: 0 auto; padding-top: 30px; } } @media only screen and (max-width: 1023px) and (max-width: 812px) { .mv-inner { padding-bottom: 65.34%; } } @media only screen and (max-width: 1023px) and (max-width: 767px) { .mv-inner { padding-bottom: 69.34%; } } @media only screen and (max-width: 1023px) { .contents { position: relative; margin-top: -77.33%; padding-top: 35px; } } @media only screen and (max-width: 1023px) and (max-width: 900px) { .contents { margin-top: -71.33%; } } @media only screen and (max-width: 1023px) and (max-width: 820px) { .contents { margin-top: -74%; } } @media only screen and (max-width: 1023px) and (max-width: 767px) { .contents { margin-top: -74.26%; } } @media only screen and (max-width: 1023px) and (max-width: 736px) { .contents { margin-top: -74.26%; } } @media only screen and (max-width: 1023px) and (max-width: 667px) { .contents { margin-top: -76%; } } @media only screen and (max-width: 1023px) and (max-width: 568px) { .contents { margin-top: -78.66%; } } @media only screen and (max-width: 1023px) and (max-width: 414px) { .contents { margin-top: -84.66%; } } @media only screen and (max-width: 1023px) and (max-width: 375px) { .contents { margin-top: -87.33%; } } @media only screen and (max-width: 1023px) and (max-width: 320px) { .contents { margin-top: -92%; } } @media only screen and (max-width: 1023px) { .mv-info { margin-bottom: 20px; } .mv-info-tag-tit { display: block; width: 100%; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .mv-info-department { display: block; width: 100%; text-align: left; padding-top: 30px; top: 0; } .mv-info-tag { margin-bottom: 12px; } .mv-info-tag span { font-size: 14px; padding: 6px 10px 4px; } } @media only screen and (max-width: 1023px) and (max-width: 767px) { .mv-info-tag span { font-size: 12px; } } @media only screen and (max-width: 1023px) { .mv-info-tit { width: 100%; font-size: 26px; line-height: 1.4; } } @media only screen and (max-width: 1023px) and (max-width: 767px) { .mv-info-tit { font-size: 22px; } } @media only screen and (max-width: 1023px) { .mv-info-department-tit { font-size: 14px; margin-bottom: 14px; } } @media only screen and (max-width: 1023px) and (max-width: 767px) { .mv-info-department-tit { font-size: 12px; } } @media only screen and (max-width: 1023px) { .mv-info-department-items li { font-size: 18px; margin-bottom: 10px; } } @media only screen and (max-width: 1023px) and (max-width: 767px) { .mv-info-department-items li { font-size: 15px; } } @media only screen and (max-width: 1023px) { .contents-article { width: 92.19%; max-width: 1180px; margin: 0 auto; padding-bottom: 60px; } } @media only screen and (max-width: 1023px) and (max-width: 767px) { .contents-article { width: 92%; max-width: none; } } @media only screen and (max-width: 1023px) { .case-article-overview-txt { margin-bottom: 40px; padding: 30px 20px; } } @media only screen and (max-width: 1023px) and (max-width: 767px) { .case-article-overview-txt { margin-bottom: 30px; } } @media only screen and (max-width: 1023px) { .case-article-overview-txt:after { width: 69px; height: 34px; } .case-article-overview-txt:before { width: 69px; height: 34px; } .case-article-overview-txt p { font-size: 18px; line-height: 2.2; text-align: left; } } @media only screen and (max-width: 1023px) and (max-width: 767px) { .case-article-overview-txt p { font-size: 15px; line-height: 2.0; } } @media only screen and (max-width: 1023px) { .case-article-con { width: 92%; max-width: none; margin: 0 auto; } } @media only screen and (max-width: 1023px) and (max-width: 767px) { .case-article-con { width: 100%; } } @media only screen and (max-width: 1023px) { .case-article-con img { display: block; } .case-article-con h2 { font-size: 26px; line-height: 1.6; width: 92.76%; margin-bottom: 26px; } } @media only screen and (max-width: 1023px) and (max-width: 767px) { .case-article-con h2 { font-size: 21px; } } @media only screen and (max-width: 1023px) and (max-width: 767px) { .case-article-con h2 { margin-bottom: 20px; } } @media only screen and (max-width: 1023px) { .case-article-con img + h2 { margin-top: 80px; } } @media only screen and (max-width: 1023px) and (max-width: 767px) { .case-article-con img + h2 { margin-top: 60px; } } @media only screen and (max-width: 1023px) { .case-article-con img + h3 { margin-top: 50px; } } @media only screen and (max-width: 1023px) and (max-width: 767px) { .case-article-con img + h3 { margin-top: 40px; } } @media only screen and (max-width: 1023px) { .case-article-con p + h3 { margin-top: 40px; } } @media only screen and (max-width: 1023px) and (max-width: 767px) { .case-article-con p + h3 { margin-top: 35px; } } @media only screen and (max-width: 1023px) { .case-article-con p + img { margin-top: 36px; } } @media only screen and (max-width: 1023px) and (max-width: 767px) { .case-article-con p + img { margin-top: 30px; } } @media only screen and (max-width: 1023px) { .case-article-con img + img { margin-top: 36px; } } @media only screen and (max-width: 1023px) and (max-width: 767px) { .case-article-con img + img { margin-top: 30px; } } @media only screen and (max-width: 1023px) { .case-article-con h3 + img { margin-top: 36px; } } @media only screen and (max-width: 1023px) and (max-width: 767px) { .case-article-con h3 + img { margin-top: 30px; } } @media only screen and (max-width: 1023px) { .case-article-con h3 { font-size: 16px; line-height: 1.8; width: 92.76%; margin-bottom: 12px; padding-left: 20px; } } @media only screen and (max-width: 1023px) and (max-width: 767px) { .case-article-con h3 { font-size: 14px; } } @media only screen and (max-width: 1023px) and (max-width: 767px) { .case-article-con h3 { padding-left: 18px; } } @media only screen and (max-width: 1023px) { .case-article-con h3:after { display: block; position: absolute; top: 12px; width: 14px; left: 0; content: ''; height: 2px; background: #ca0000; } } @media only screen and (max-width: 1023px) and (max-width: 767px) { .case-article-con h3:after { top: 10px; width: 12px; } } @media only screen and (max-width: 1023px) { .case-article-con p { font-size: 15px; line-height: 2.0; width: 92.76%; margin-left: auto; margin-right: auto; margin-bottom: 12px; } } @media only screen and (max-width: 1023px) and (max-width: 767px) { .case-article-con p { font-size: 13px; } } @media only screen and (max-width: 1023px) { .case-article-btn { padding-bottom: 60px; } .case-article-btn-inner { position: relative; width: 92%; max-width: 690px; margin: 0 auto; height: auto; } .case-article-btn-inner .hack-a, .case-article-btn-inner a { font-size: 15px; padding: 16px 0; } } @media only screen and (max-width: 1023px) and (max-width: 768px) { .case-article-btn-inner .hack-a, .case-article-btn-inner a { font-size: 13px; } } @media only screen and (max-width: 1023px) { .case-article-btn-inner .hack-a:hover, .case-article-btn-inner a:hover { color: #000; border: 1px solid #000; } .case-article-btn-inner .hack-a:hover:after, .case-article-btn-inner a:hover:after { opacity: 1; } .case-article-btn-list { position: relative; width: 47.83%; margin-left: 0; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); margin-bottom: 25px; } .case-article-btn-list .hack-a span, .case-article-btn-list a span { padding-left: 25px; } .case-article-btn-list .hack-a span i, .case-article-btn-list a span i { width: 17px; height: 14px; top: 50%; margin-top: -7px; left: 0; background: url("../images/shared/icon-list.png") no-repeat 0 0; background-size: 17px 28px; } .case-article-btn-list a:hover span i { background: url("../images/shared/icon-list.png") no-repeat 0 0; background-size: 17px 28px; } .case-article-btn-next-prev { position: relative; width: 100%; top: 0; left: 0; z-index: 1; -webkit-display: flex; -moz-display: flex; -ms-display: flex; -o-display: flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; } .case-article-btn-next-prev .case-article-btn-prev, .case-article-btn-next-prev .case-article-btn-next { width: 280px; width: 47.83%; } .case-article-btn-next-prev .case-article-btn-prev .hack-a span i, .case-article-btn-next-prev .case-article-btn-prev a span i, .case-article-btn-next-prev .case-article-btn-next .hack-a span i, .case-article-btn-next-prev .case-article-btn-next a span i { position: absolute; display: block; width: 25px; height: 14px; top: 50%; margin-top: -7px; } .case-article-btn-next-prev .case-article-btn-prev.case-article-btn-next .hack-a span, .case-article-btn-next-prev .case-article-btn-prev.case-article-btn-next a span, .case-article-btn-next-prev .case-article-btn-next.case-article-btn-next .hack-a span, .case-article-btn-next-prev .case-article-btn-next.case-article-btn-next a span { padding-right: 30px; } .case-article-btn-next-prev .case-article-btn-prev.case-article-btn-next .hack-a span i, .case-article-btn-next-prev .case-article-btn-prev.case-article-btn-next a span i, .case-article-btn-next-prev .case-article-btn-next.case-article-btn-next .hack-a span i, .case-article-btn-next-prev .case-article-btn-next.case-article-btn-next a span i { right: 0; background-image: url("../images/shared/arrow-b.svg"); background-size: 25px 14px; } .case-article-btn-next-prev .case-article-btn-prev.case-article-btn-next a:hover span i, .case-article-btn-next-prev .case-article-btn-next.case-article-btn-next a:hover span i { background-image: url("../images/shared/arrow-b.svg"); background-size: 25px 14px; } .case-article-btn-next-prev .case-article-btn-prev.case-article-btn-prev .hack-a span, .case-article-btn-next-prev .case-article-btn-prev.case-article-btn-prev a span, .case-article-btn-next-prev .case-article-btn-next.case-article-btn-prev .hack-a span, .case-article-btn-next-prev .case-article-btn-next.case-article-btn-prev a span { padding-left: 30px; } .case-article-btn-next-prev .case-article-btn-prev.case-article-btn-prev .hack-a span i, .case-article-btn-next-prev .case-article-btn-prev.case-article-btn-prev a span i, .case-article-btn-next-prev .case-article-btn-next.case-article-btn-prev .hack-a span i, .case-article-btn-next-prev .case-article-btn-next.case-article-btn-prev a span i { left: 0; background-image: url("../images/shared/arrow-b.svg"); background-size: 25px 14px; -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); } .case-article-btn-next-prev .case-article-btn-prev.case-article-btn-prev a:hover span i, .case-article-btn-next-prev .case-article-btn-next.case-article-btn-prev a:hover span i { background-image: url("../images/shared/arrow-b.svg"); background-size: 25px 14px; -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); } .case-btn-dateil { width: 91.304347826%; margin: 60px auto 0; } .case-btn-dateil a { font-size: 1rem; font-weight: 700; text-align: center; padding: 18px 0; } .case-btn-dateil a span { position: relative; z-index: 2; padding-right: 32px; } .case-btn-dateil a:hover { color: #000; border: 1px solid #000; } .case-btn-dateil a:hover:after { opacity: 1; } .case-btn-dateil a:hover span i { background-image: url("../images/shared/arrow-b.svg"); background-size: 25px 8px; } } html[lang="zh-cn"] .st-GlobalHeader_StatementImage.st-GlobalHeader_StatementImage { width: 273px; height: 12px; }