.section { position: relative; } .section__header { position: relative; } @media screen and (min-width: 768px) { .section__header { padding-bottom: 2.75em; } .txtalign-c .section__header { text-align: center; } } @media screen and (max-width: 767px) { .section__header { padding-bottom: 2em; } } .section__title { font-weight: 600; } @media screen and (min-width: 768px) { .section__title { font-size: 3.2rem;font-size: 2rem; } } @media screen and (max-width: 767px) { .section__title { font-size: 2.7rem;font-size: 1.6875rem; } } @media screen and (max-width: 320px) { .section__title { font-size: 2.4rem;font-size: 1.5rem; } } @media screen and (min-width: 768px) { .section__summary { padding-top: 0.75em; } } @media screen and (max-width: 767px) { .section__summary { padding-top: 0.57143em; } } @media screen and (min-width: 768px) { .about .section__summary, .splitEl .section__summary { padding-right: 4.375em; } } @media screen and (max-width: 767px) { .about .section__summary, .splitEl .section__summary { line-height: 1.2; } } .-flex .section__summary { position: relative; } @media screen and (min-width: 768px) { .-flex .section__summary { margin-left: 1.875em; padding-top: 0; padding-left: 1.875em; } .-flex .section__summary:before { position: absolute; top: 50%; left: 0; display: block; width: 1px; height: 1em; background: rgba(0, 0, 0, 0.08); content: ""; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } } .txtalign-c, .-align-c { text-align: center; } .global { position: relative; } @media screen and (max-width: 767px) { .global { padding-right: 0 !important; padding-left: 0 !important; } } .global__inner { position: relative; } @media screen and (min-width: 768px) { .global__inner { padding: 6.25em 0; } } @media screen and (max-width: 767px) { .global__inner { padding: 4.375em 0; } } .global__inner:before { position: absolute; top: 0; left: 50%; display: block; max-width: 1500px; height: 100%; background: #f0f4f7; content: ""; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } @media screen and (min-width: 768px) { .global__inner:before { width: 88%; } } @media screen and (max-width: 767px) { .global__inner:before { width: calc( 100% - 0.71429em * 2); } } .global__content { position: relative; } .global__slider { visibility: hidden; opacity: 0; -webkit-transition: opacity 0.5s ease-out, visibility 0.5s ease-out; transition: opacity 0.5s ease-out, visibility 0.5s ease-out; } @media screen and (min-width: 768px) { .global__slider { margin-bottom: 3.125em; } } @media screen and (max-width: 767px) { .global__slider { margin-bottom: 1.42857em; } } .global__slider.-loaded { visibility: visible; opacity: 1; } @media screen and (max-width: 767px) { .global__sliderItem { padding: 0 0.35714em; } } @media screen and (min-width: 768px) { .global__sliderImg { max-width: 45vw; } } @media screen and (max-width: 767px) { .global__sliderImg { max-width: 76vw; } } .global__sliderCaption { text-align: center; } @media screen and (min-width: 768px) { .global__sliderCaption { margin-top: 0.75em; } } @media screen and (max-width: 767px) { .global__sliderCaption { margin-top: 1em; font-size: 1.2rem; } } .global__slider .slick-track { margin: 0; -webkit-transition: margin 0.5s ease-out; transition: margin 0.5s ease-out; } .global__slider .slick-slide { -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); transition: -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); } @media screen and (min-width: 768px) { .global__slider .slick-slide { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } } @media screen and (min-width: 768px) { .global__slider .slick-active, .global__slider .currentItem { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } .global__thumbs { visibility: hidden; margin: 0 auto; opacity: 0; -webkit-transition: opacity 0.5s ease-out, visibility 0.5s ease-out; transition: opacity 0.5s ease-out, visibility 0.5s ease-out; } @media screen and (min-width: 768px) { .global__thumbs { max-width: 1498px; width: calc( 88% - 2px); } } @media screen and (min-width: 1500px) { .global__thumbs { width: calc( 88% - 2px); } } .global__thumbs:before, .global__thumbs:after { position: absolute; top: 0; z-index: 1; height: 100%; content: ""; } @media screen and (min-width: 768px) { .global__thumbs:before, .global__thumbs:after { width: calc( 8.75em * 1.4); background: -webkit-gradient(linear, left top, right top, color-stop(5%, #f0f4f7), color-stop(50%, rgba(240, 244, 247, 0.8)), color-stop(70%, rgba(240, 244, 247, 0.4)), to(rgba(240, 244, 247, 0))); background: -webkit-linear-gradient(left, #f0f4f7 5%, rgba(240, 244, 247, 0.8) 50%, rgba(240, 244, 247, 0.4) 70%, rgba(240, 244, 247, 0)); background: linear-gradient(90deg, #f0f4f7 5%, rgba(240, 244, 247, 0.8) 50%, rgba(240, 244, 247, 0.4) 70%, rgba(240, 244, 247, 0)); } } @media screen and (max-width: 767px) { .global__thumbs:before, .global__thumbs:after { width: calc( 4.14286em - 2.1875em * 1.3); background: -webkit-gradient(linear, left top, right top, color-stop(5%, white), color-stop(rgba(255, 255, 255, 0.8)), to(rgba(255, 255, 255, 0))); background: -webkit-linear-gradient(left, white 5%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)); background: linear-gradient(90deg, white 5%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)); } } .global__thumbs:before { left: -1px; } .global__thumbs:after { right: -1px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .global__thumbs.-loaded { visibility: visible; opacity: 1; } .global__thumbsItem { position: relative; text-align: center; line-height: 1; cursor: pointer; } .global__thumbsItem:before { position: absolute; top: 0; left: 50%; display: block; height: 2px; background: #000; content: ""; opacity: 0; -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform: translateX(-50%) scale(0, 1); -moz-transform: translateX(-50%) scale(0, 1); -ms-transform: translateX(-50%) scale(0, 1); -o-transform: translateX(-50%) scale(0, 1); transform: translateX(-50%) scale(0, 1); -webkit-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; moz-transform-origin: center center; } @media screen and (min-width: 768px) { .global__thumbsItem { padding: 0 0.625em; min-width: 8.75em; max-width: 8.75em; } .global__thumbsItem:before { width: calc( 100% - 0.625em * 2); } } @media screen and (max-width: 767px) { .global__thumbsItem { padding: 0 0.28571em; min-width: 4.14286em; max-width: 4.14286em; } .global__thumbsItem:before { width: calc( 100% - 0.28571em * 2); } } .global__thumbsItem span { position: relative; display: block; } @media screen and (min-width: 768px) { .global__thumbsItem span { margin-top: 1.875em; } } @media screen and (max-width: 767px) { .global__thumbsItem span { margin-top: 0.85714em; } } .slick-current .global__thumbsItem { color: red; } .slick-current .global__thumbsItem:before { opacity: 1; -webkit-transition: opacity 0.6s linear, -webkit-transform 0.5s 0.1s cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 0.6s linear, -webkit-transform 0.5s 0.1s cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 0.6s linear, transform 0.5s 0.1s cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 0.6s linear, transform 0.5s 0.1s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.5s 0.1s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform: translateX(-50%) scale(1); -moz-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); -o-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); } .global__more { text-align: center; } @media screen and (min-width: 768px) { .global__more { padding-top: 3.125em; } } @media screen and (max-width: 767px) { .global__more { padding-top: 1.875em; } } .global__arw:before { display: none; } .global__arw.slick-arrow { z-index: 1; width: 100px; width: calc( ( 100vw - 56vw ) / 2); height: 100%; } .global__arw .arw { position: absolute; display: block; visibility: hidden; margin-top: -30px; margin-left: -30px; width: 60px; height: 60px; border-radius: 50%; background: #fff; -webkit-box-shadow: 0 0.3rem 0.75rem rgba(0, 0, 0, 0.1); box-shadow: 0 0.3rem 0.75rem rgba(0, 0, 0, 0.1); opacity: 0; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } .global__arw .arw:before { position: absolute; top: 50%; left: 50%; display: block; width: 100%; height: 1em; color: #000; text-indent: center; font-size: 1.6rem; line-height: 1; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media screen and (max-width: 767px) { .global__arw .arw { display: none; } } .global__arw.slick-next { right: 0; } .global__arw.slick-next .arw:before { content: "→"; } .global__arw.slick-prev { left: 0; } .global__arw.slick-prev .arw:before { content: "←"; } .global__arw.-on .arw { visibility: visible; width: 60px; height: 60px; opacity: 1; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .regAlign{ font-style: normal; } .panels { overflow: hidden; width: 100%; } .panels__frame { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: start; justify-content: flex-start; flex-wrap: wrap; -ms-flex-wrap: wrap; -webkit-box-pack: start; } @media screen and (min-width: 768px) { .panels__frame { width: calc( 100% + 2.5em); } } @media screen and (max-width: 767px) { .panels__frame { width: calc( 100% + 0.71429em); } } .-outer .panels__frame { -ms-flex-pack: justify; justify-content: space-between; width: 100%; -webkit-box-pack: justify; } @media screen and (min-width: 768px) { .panels__item { margin-right: 2.5em; margin-bottom: 2.5em; } } @media screen and (max-width: 767px) { .panels__item { margin-right: 0.71429em; margin-bottom: 1.25em; } } .panels__item a { display: block; } .panels__item img { width: 100%; } .panels__item.-hidden { visibility: hidden; margin-bottom: 0; height: 0; opacity: 0; } .panels__item.-visible { visibility: visible; opacity: 1; } @media screen and (min-width: 768px) { .panels__item.-visible { -webkit-animation: fadeIn 0.6s ease-out; animation: fadeIn 0.6s ease-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; } } @media screen and (max-width: 767px) { .panels__item.-visible { -webkit-animation: fadeIn 0.3s ease-out; animation: fadeIn 0.3s ease-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; } } .panels__item.-full { margin-right: 0; } @media screen and (min-width: 768px) { .panels__item.-full { width: calc( 100% - 2.5em); } } @media screen and (max-width: 767px) { .panels__item.-full { width: calc( 100% - 0.71429em); } } @media screen and (min-width: 768px) { .panels__item.-col2 { width: calc( ( 100% - 2.5em * 2 ) / 2); } } @media screen and (max-width: 767px) { .panels__item.-col2 { width: calc( 100% - 0.71429em); } } .splitEl .panels__item.-col2:nth-last-child(-n+2) { margin-bottom: 0; } @media screen and (max-width: 767px) { .splitEl .panels__item.-col2 { width: calc( ( 100% - 0.71429em * 2 ) / 2); } } @media screen and (min-width: 768px) { .panels__item.-col3 { width: calc( ( 100% - 2.5em * 3 - 1px ) / 3); } } @media screen and (max-width: 767px) { .panels__item.-col3 { width: calc( ( 100% - 0.71429em * 2 ) / 2); } } @media screen and (min-width: 768px) { .panels__item.-col4 { width: calc( ( 100% - 2.5em * 4 ) / 4); } } @media screen and (max-width: 767px) { .panels__item.-col4 { width: calc( ( 100% - 0.71429em * 2 ) / 2); } } .-fit .panels__item { margin-right: 0; } @media screen and (max-width: 767px) { .-fit .panels__item { margin-bottom: 0; text-align: left; } } @media screen and (min-width: 768px) { .-fit .panels__item.-col2 { width: calc( ( 100% - 2.5em ) / 2); } } @media screen and (max-width: 767px) { .-fit .panels__item.-col2 { width: calc( ( 100% - 0.71429em ) / 2); } } @media screen and (min-width: 768px) { .-fit .panels__item.-col3 { width: calc( ( 100% - 2.5em ) / 3); } } @media screen and (max-width: 767px) { .-fit .panels__item.-col3 { width: calc( ( 100% - 0.71429em ) / 2); } } @media screen and (min-width: 768px) { .-fit .panels__item.-col4 { width: calc( ( 100% - 2.5em ) / 4); } } @media screen and (max-width: 767px) { .-fit .panels__item.-col4 { width: calc( ( 100% - 0.71429em ) / 2); } } @media screen and (max-width: 767px) { .-fit .panels__item.-cat { width: calc( ( 100% - 0.71429em * 2 ) / 2); border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .-fit .panels__item.-cat:nth-of-type(2n) { margin-left: 0.71429em; } .-fit .panels__item.-cat:nth-of-type(-n+2) { border-top: 1px solid rgba(0, 0, 0, 0.08); } } .-outer > .panels__frame > .panels__item { margin-bottom: 0; } @media screen and (max-width: 767px) { .-outer > .panels__frame > .panels__item:first-child { margin-bottom: 2.14286em; padding-bottom: 1.42857em; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } } .-outer > .panels__frame > .panels__item.-col2 { position: relative; margin-right: 0; } @media screen and (min-width: 768px) { .-outer > .panels__frame > .panels__item.-col2 { width: calc( ( 100% - 2.5em * 2 ) / 2); } .-outer > .panels__frame > .panels__item.-col2:nth-of-type(2n):before { position: absolute; top: 0; left: -2.5em; display: block; width: 1px; height: 100%; background-color: rgba(0, 0, 0, 0.08); content: ""; } } @media screen and (max-width: 767px) { .-outer > .panels__frame > .panels__item.-col2 { width: 100%; } } .-inner > .panels__frame > .panels__item { margin-right: 0; margin-bottom: 0; } @media screen and (min-width: 768px) { .-inner > .panels__frame > .panels__item.-col2 { width: calc( ( 100% - 2.5em ) / 2); } } @media screen and (max-width: 767px) { .-inner > .panels__frame > .panels__item.-col2 { width: calc( ( 100% - 0.71429em ) / 2); } } @media screen and (max-width: 767px) { .-cat .panels__img img { display: none; } } @media screen and (min-width: 768px) { .panels__caption { margin-top: 0.75em; font-weight: 600; } } @media screen and (max-width: 767px) { .panels__caption { position: absolute; top: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 0.71429em 0.57143em; width: 100%; height: 100%; background: -webkit-gradient(linear, left top, left bottom, color-stop(40%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.5))); background: -webkit-linear-gradient(rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5)); background: linear-gradient(rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5)); color: #fff; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-box-pack: end; } .-cat .panels__caption { position: relative; top: inherit; left: inherit; display: inline-block; padding: 1.85714em 0; width: auto; background: none; color: #222; font-weight: 600; } } @media screen and (max-width: 320px) { .panels__caption { padding: 0.66667em; font-size: 1.2rem; } } @media screen and (max-width: 767px) { .-cat .panels__caption .lineout { position: relative; display: inline-block; padding-right: 10px; width: auto; background-image: url("../images/arw.svg"); background-position: center right; background-size: 5px auto; background-repeat: no-repeat; vertical-align: middle; word-break: break-all; } } @media screen and (min-width: 768px) { .panels__img + .panels__detail { margin-top: 1.5em; } } @media screen and (max-width: 767px) { .panels__img + .panels__detail { margin-top: 1.14286em; } } @media screen and (min-width: 768px) { .panels__detail:first-child { padding: 3.5em 0 1em; border-top: 1px solid rgba(0, 0, 0, 0.08); } } @media screen and (max-width: 767px) { .panels__detail:first-child { margin-top: 1.14286em; } } .panels__title { font-weight: 600; } @media screen and (min-width: 768px) { .panels__summary { margin-top: 0.75em; } } @media screen and (max-width: 767px) { .panels__summary { margin-top: 0.57143em; line-height: 1.3; } } @media screen and (min-width: 768px) { .panels__more { margin-top: 0.75em; } } @media screen and (max-width: 767px) { .panels__more { margin-top: 0.57143em; } } @media screen and (min-width: 768px) { .panels__img + .panels__links { margin-top: 1.25em; } } @media screen and (max-width: 767px) { .panels__img + .panels__links { margin-top: 1.14286em; } } @media screen and (min-width: 768px) { .panels__links:first-child { padding: 3.5em 0 1em; border-top: 1px solid rgba(0, 0, 0, 0.08); } } @media screen and (max-width: 767px) { .panels__links:first-child { margin-top: 1.14286em; } } .panels__linksTitle { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-align: end; align-items: flex-end; border-bottom: 1px solid rgba(0, 0, 0, 0.08); line-height: 1.3; -webkit-box-align: end; } @media screen and (min-width: 768px) { .panels__linksTitle { padding-bottom: 0.75em; font-size: 2.4rem; } } @media screen and (max-width: 767px) { .panels__linksTitle { padding-bottom: 0.70588em; font-size: 1.7rem; } } @media screen and (max-width: 320px) { .panels__linksTitle { padding-bottom: 0.85714em; font-size: 1.4rem; } } .panels__linksTitleStr { display: inline-block; vertical-align: bottom; } .panels__linksList { margin-top: 1.625em; } .panels__linksItem { line-height: 1; } @media screen and (min-width: 768px) { .panels__linksItem { margin-top: 1.25em; } } @media screen and (max-width: 767px) { .panels__linksItem { margin-top: 1.28571em; } } @media screen and (min-width: 768px) { .panels__linksItem.-with-margin, .panels__linksItem.-top { margin-bottom: 2.1875em; } } @media screen and (max-width: 767px) { .panels__linksItem.-with-margin, .panels__linksItem.-top { margin-bottom: 2.14286em; } } @media screen and (min-width: 768px) { .panels__linksItem p { padding-top: 1.25em; } } @media screen and (max-width: 767px) { .panels__linksItem p { padding-top: 1.28571em; } } .panels__linksItem p:first-child { padding-top: 0; } .panels__linksItem a { display: inline-block; } .panels__linksItem span { padding-bottom: 4px; vertical-align: middle; } @media screen and (max-width: 320px) { .panels__linksItem { font-size: 1.2rem; } } .zoom { display: block; -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); transition: -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform: scale(1.01); -moz-transform: scale(1.01); -ms-transform: scale(1.01); -o-transform: scale(1.01); transform: scale(1.01); backface-visibility: hidden; -webkit-backface-visibility: hidden; } @media screen and (min-width: 768px) { button:hover .zoom, button:focus .zoom, a:hover .zoom, a:focus .zoom, .zoom:hover, .zoom:focus { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } } .zoomPanel { display: block; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .zoomPanel img { -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; -webkit-transform: scale(1.01); -moz-transform: scale(1.01); -ms-transform: scale(1.01); -o-transform: scale(1.01); transform: scale(1.01); backface-visibility: hidden; -webkit-backface-visibility: hidden; } @media screen and (min-width: 768px) { button:hover .zoomPanel img, button:focus .zoomPanel img, a:hover .zoomPanel img, a:focus .zoomPanel img, .zoomPanel:hover img, .zoomPanel:focus img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } } .lineout { position: relative; display: inline-block; overflow: hidden; } .lineout:before, .lineout:after { position: absolute; right: 0; bottom: 0; width: 100%; height: 1px; background: rgba(34, 34, 34, 0.7); content: ""; } .lineout:before { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .lineout:after { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } @media screen and (min-width: 768px) { button:hover .lineout:before, button:focus .lineout:before, .lineout:hover:before, a:hover .lineout:before, .lineout:focus:before, a:focus .lineout:before { -webkit-transition: -webkit-transform 0.5s 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: -webkit-transform 0.5s 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: transform 0.5s 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: transform 0.5s 0.1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.5s 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } button:hover .lineout:after, button:focus .lineout:after, .lineout:hover:after, a:hover .lineout:after, .lineout:focus:after, a:focus .lineout:after { -webkit-transition: -webkit-transform 0.5s 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); transition: -webkit-transform 0.5s 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); transition: transform 0.5s 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); transition: transform 0.5s 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.5s 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } .lineout.-dib { padding-bottom: 6px; } .lineout.-none:before { width: 0; -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .lineout.-none:after { display: none; } @media screen and (min-width: 768px) { button:hover .lineout.-none:before, button:focus .lineout.-none:before, a:hover .lineout.-none:before, .lineout.-none:focus:before, a:focus .lineout.-none:before { left: 0; width: 100%; -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } .lineout.-blue { color: #3088ce; } .lineout.-blue:before, .lineout.-blue:after { background: #3088ce; } .lineout.-hover_blue { -webkit-transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); } .lineout.-hover_blue:before, .lineout.-hover_blue:after { background: #3088ce; } @media screen and (min-width: 768px) { button:hover .lineout.-hover_blue, button:focus .lineout.-hover_blue, .lineout.-hover_blue:hover, a:hover .lineout.-hover_blue, .lineout.-hover_blue:focus, a:focus .lineout.-hover_blue { color: #3088ce; } } .lineout.-white:before, .lineout.-white:after { background: #fff; } @-webkit-keyframes arw { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } 50.01% { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @keyframes arw { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } 50.01% { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } .arwout { position: relative; display: inline-block; overflow: hidden; } .arwout.-blue { color: #3088ce; } .arwout.-flex { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; -ms-flex-align: center; justify-content: space-between; align-items: center; -webkit-box-align: center; -webkit-box-pack: justify; } .arwout__icn { position: relative; top: 1px; right: 1px; display: inline-block; overflow: hidden; margin-left: 0.375em; width: 6px; height: 9px; vertical-align: middle; } @media screen and (max-width: 767px) { .arwout__icn { margin-left: 8px; } } .-ex .arwout__icn { width: 8px; height: 8px; } .arwout__icn:after { position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; background-image: url("../images/arw.svg"); background-position: center center; background-size: contain; background-repeat: no-repeat; content: ""; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .arwout .lineout { vertical-align: middle; } @media screen and (min-width: 768px) { button:hover .arwout .arwout__icn:after, button:focus .arwout .arwout__icn:after, .arwout:hover .arwout__icn:after, a:hover .arwout .arwout__icn:after, .arwout:focus .arwout__icn:after, a:focus .arwout .arwout__icn:after { -webkit-animation: arw 1s cubic-bezier(0.78, 0.07, 0, 1) normal; animation: arw 1s cubic-bezier(0.78, 0.07, 0, 1) normal; -webkit-animation-fill-mode: both; animation-fill-mode: both; } } @media screen and (min-width: 768px) { .products { padding-top: 5em; padding-bottom: 6.25em; } } @media screen and (max-width: 767px) { .products { padding-top: 3.57143em; padding-bottom: 2.85714em; } } .page{ font-size:1rem; background-color: #fff; position: relative; left: 0; overflow: hidden; -webkit-transition: left 0.4s 0.1s cubic-bezier(0.215, 0.61, 0.355, 1); transition: left 0.4s 0.1s cubic-bezier(0.215, 0.61, 0.355, 1); } .page a { position: relative; outline: none; color: #222; text-decoration: none; -webkit-touch-callout: none; } .page ::before, .page ::after { vertical-align: inherit; text-decoration: inherit; } .page a:hover img{ opacity:1 !important; filter: alpha(opacity=100) !important; -ms-filter: "alpha( opacity=100 )" !important; } @media screen and (min-width: 768px) { .innerEl, .innerEl-tight, .innerEl-wide, .innerEl-huge, .innerEl-full, .innerEl-max { -webkit-box-sizing: content-box; box-sizing: content-box; margin-right: auto; margin-left: auto; padding-right: 1.5625em; padding-left: 1.5625em; max-width: 1320px; } } @media screen and (min-width: 1500px) { .innerEl, .innerEl-tight, .innerEl-wide, .innerEl-huge, .innerEl-full, .innerEl-max { max-width: 1500px; } } @media screen and (max-width: 767px) { .innerEl, .innerEl-tight, .innerEl-wide, .innerEl-huge, .innerEl-full, .innerEl-max { -webkit-box-sizing: border-box; box-sizing: border-box; padding-right: 0.71429em; padding-left: 0.71429em; } } @media screen and (min-width: 768px) { .innerEl-tight { max-width: 62.5em; } } @media screen and (min-width: 768px) { .innerEl-wide { max-width: 75em; } } @media screen and (min-width: 768px) { .innerEl-full { -webkit-box-sizing: border-box; box-sizing: border-box; padding-right: 0.625em; padding-left: 0.625em; max-width: inherit; } } @media screen and (min-width: 1500px) { .innerEl-full { max-width: 1500px; } } @media screen and (max-width: 767px) { .innerEl-full { padding-right: 0; padding-left: 0; } } @media screen and (min-width: 768px) { .innerEl-max { padding-right: 0; padding-left: 0; max-width: inherit; } } @media screen and (min-width: 1500px) { .innerEl-max { max-width: calc( 1500px - 0.625em * 2); } } @media screen and (max-width: 767px) { .innerEl-max { padding-right: 0; padding-left: 0; } } .m_grid { display: block; width: 100%; height: 100%; max-width: 1440px; margin: 0 auto; padding-left: 89px; padding-right: 115px } @media print, screen and (min-width: 768px) and (max-width: 1024px) { .m_grid { padding-left: 35px; padding-right: 45px } } @media print, screen and (max-width: 767px) { .m_grid { padding: 0 4vw } } .m_grid--row { left: 10px; display: block; width: 100%; height: 100%; max-width: 1440px } @media print, screen and (max-width: 767px) { .m_grid--row { left: 0 } } .m_grid--col { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative } .m_grid--col.lg-5 { width: 30.83333% } @media print, screen and (max-width: 767px) { .m_grid--col.lg-5 { width: 0 } } .is-maxW600 { max-width: 600px } .gsap-marker-scroller-start,.gsap-marker-scroller-end,.gsap-marker-start,.gsap-marker-end { opacity: 0 } .is-cleanovation .page { overflow: unset } @media print, screen and (min-width: 768px) { .is-cleanovation .kv { background: #fff; padding-top: 35px; margin-top: 0 } } .is-cleanovation .uq_cleanovation__kv { padding-top: 0; background: #fff } .is-cleanovation .sec-product { margin: 0 auto; padding: 11.90476vw 0; padding-top: 50px; background: #fff } .movie,.movie2 { background: #fff } @media print, screen and (min-width: 768px) { .movie,.movie2 { /*position:sticky;*/ top: 35px } } @media print, screen and (max-width: 767px) { .movie,.movie2 { position: /*sticky;*/top:0 } } .movie__inner,.movie2__inner { max-width: 800px; margin-left: auto; margin-right: auto } .movie__inner.is-padding_btm,.movie2__inner.is-padding_btm { padding-bottom: 11.90476vw } @media (max-width: 1200px) { .movie__inner,.movie2__inner { max-width: 66.66vw } .movie__inner img,.movie2__inner img { width: 66.66vw } } @media print, screen and (max-width: 767px) { .movie__inner,.movie2__inner { max-width: 81.52vw } .movie__inner img,.movie2__inner img { width: 100% } } .movie__inner a,.movie2__inner a { display: block } .movie__inner a::before,.movie2__inner a::before { content: ""; width: 100%; height: 100%; background-color: #000; position: absolute; opacity: 0.3 } .movie__inner a::after,.movie2__inner a::after { position: absolute; content: ""; display: inline-block; width: 3.3rem; height: 4rem; background: url(../images/icon_play_btn.svg) no-repeat center center; background-size: cover; top: 0; left: 0; right: 0; margin: auto; bottom: 0; z-index: 2 } @media print, screen and (min-width: 1025px) { .movie__inner a::after,.movie2__inner a::after { cursor: pointer } } .movie { padding-top: 96.4px; padding-bottom: 40px } @media print, screen and (max-width: 767px) { .movie { padding-top: 5.33vw; padding-bottom: .85vw } } .movie2 { padding-top: 100px; padding-bottom: 100px } @media print, screen and (max-width: 767px) { .movie2 { padding-top: 5.33vw; padding-bottom: 5.33vw } } #mv_movie { z-index: 0 } #link { z-index: 2; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } #wachlet { z-index: 3; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } #wachlet_movie { z-index: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } #texhnology_design { z-index: 5; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } #texhnology_movie { z-index: 6; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); position: relative; margin-top: -4rem; margin-top: -2rem } @media print, screen and (max-width: 767px) { #texhnology_movie { margin-top: 0 } } #how-it-works { display: none } #how-it-works,.uq_cleanovation__clean_synergy_sp { z-index: 7 } #security_touchless { z-index: 8; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } #security_touchless_movie { z-index: 9; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } #product { z-index: 10; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .gb-common-2019_footer { z-index: 10; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .uq_cleanovation--link { padding-top: 60px; padding-bottom: 60px; position: relative; background-color: #fff; z-index: 1 } @media print, screen and (max-width: 767px) { .uq_cleanovation--link { padding-top: 5.6vw; padding-bottom: 5.33vw } } .uq_cleanovation--link__inner { max-width: 1400px; margin-left: auto; margin-right: auto; padding: 0 40px } @media print, screen and (max-width: 767px) { .uq_cleanovation--link__inner { padding: 0 4vw } } @media print, screen and (min-width: 768px) { .uq_cleanovation--link__inner ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } } @media print, screen and (min-width: 1025px) { .uq_cleanovation--link__inner ul li { margin-left: 12px } .uq_cleanovation--link__inner ul li:first-child { margin-left: 0 } } @media print, screen and (min-width: 768px) and (max-width: 1024px) { .uq_cleanovation--link__inner ul li { margin-left: 12px } .uq_cleanovation--link__inner ul li:first-child { margin-left: 0 } } @media print, screen and (max-width: 767px) { .uq_cleanovation--link__inner ul li { margin-top: 1rem } .uq_cleanovation--link__inner ul li:first-child { margin-top: 0 } } .uq_cleanovation--link__inner ul li a { display: block; -webkit-transition: 0.35s; transition: 0.35s } .uq_cleanovation--link__inner ul li a::before { position: absolute; content: ""; display: inline-block; width: 3.3rem; height: 2rem; background: url(../images/icon_down_arrow.svg) no-repeat center center; background-size: 2.5rem; top: 28%; left: 0; right: 0; margin: auto; bottom: 0; -webkit-transition: 0.35s; transition: 0.35s } @media print, screen and (max-width: 767px) { .uq_cleanovation--link__inner ul li a::before { content: none } } @media print, screen and (min-width: 1025px) { .uq_cleanovation--link__inner ul li a:hover { opacity: .7 } .uq_cleanovation--link__inner ul li a:hover::before { -webkit-transform: translateY(20%); transform: translateY(20%) } } .uq_cleanovation--link__inner ul li a.is-wachlet::before { top: 38% } @media print, screen and (max-width: 767px) { .uq_cleanovation--link__inner ul li a.is-wachlet::before { content: none } } @media print, screen and (min-width: 768px) { .uq_cleanovation__clean_synergy { background-color: #fff; position: sticky; position: relative; top: 35px; bottom: 0; width: 100% } } @media print, screen and (max-width: 767px) { .uq_cleanovation__clean_synergy { display: none } } .scrollmagic-pin-spacer { margin: 0px; display: table; position: relative; -webkit-box-sizing: content-box; box-sizing: content-box; width: 100%; min-height: 884px; height: auto; padding-top: 0px } _::-webkit-full-page-media,_:future,:root .scrollmagic-pin-spacer { padding-bottom: 0 } .uq_cleanovation__clean_synergy--steps__container { min-height: 884px; position: relative; margin: auto; inset: 0px auto auto 0px; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100% } .uq_cleanovation__clean_synergy--steps__container__middle { height: 100% } .uq_cleanovation__clean_synergy--steps { position: relative } .uq_cleanovation__clean_synergy--steps__container { display: table-cell; vertical-align: middle; background-color: #E4E4E4 } .uq_cleanovation__clean_synergy--steps__indicator { z-index: 1; position: relative; width: 100%; height: 100%; margin-top: 100% } @media print, screen and (max-width: 767px) { .uq_cleanovation__clean_synergy--steps__indicator { display: none } } .uq_cleanovation__clean_synergy--steps__sidebar { position: absolute; left: 15px; top: 0; height: 100%; width: 100% } .uq_cleanovation-steps_bar__fixed { position: absolute; height: calc(100vh - 35px); top: 0 } .uq_cleanovation-steps_bar__fixed.is-fixed { position: fixed; height: calc(100vh - 35px); top: -65px } .uq_cleanovation-steps_bar__fixed.is-hidden { bottom: 200px; top: inherit } @media (max-width: 1200px) { .uq_cleanovation-steps_bar__fixed.is-hidden { bottom: 16.66vw } } .uq_cleanovation-steps_text { width: calc( 100% - 33.3%); margin-left: 33.3% } .uq_cleanovation__clean_synergy--underLink { display: none } .is-fixed .uq_cleanovation__clean_synergy--underLink { position: fixed; bottom: 2rem; right: 4rem; z-index: 6; display: block } .uq_cleanovation__clean_synergy--underLink a { display: block } .uq_cleanovation__clean_synergy--underLink a span { display: inline-block; width: 3.3rem; height: 4rem; background: url(../images/icon_down_arrow_gray.svg) no-repeat center center; background-size: 2.5rem } .uq_cleanovation__clean_synergy--steps__indicator_bar { z-index: 1; position: relative; width: 100%; height: 100% } .uq_cleanovation__clean_synergy--steps__indicator_bar:before { z-index: 1; content: ""; display: block; position: absolute; left: -15px; top: 0; width: 1px; height: 100%; background-color: #000000 } .uq_cleanovation__clean_synergy--steps__indicator_bar__progress { z-index: 2; position: absolute; left: -16px; top: 0; width: 3px; height: 0%; background-color: #000000 } .uq_cleanovation__clean_synergy--steps__bar li { position: absolute; left: 0 } .uq_cleanovation__clean_synergy--steps__bar li:before,.uq_cleanovation__clean_synergy--steps__bar li:after { content: ""; display: block; position: absolute } .uq_cleanovation__clean_synergy--steps__bar li:before { left: -19px; top: 0; width: 9px; height: 9px; border-radius: 50%; background-color: #000 } .uq_cleanovation__clean_synergy--steps__bar li:nth-child(1) { top: 0 } .uq_cleanovation__clean_synergy--steps__bar li:nth-child(2) { top: 16.6666667% } .uq_cleanovation__clean_synergy--steps__bar li:nth-child(3) { top: 33.33333333% } .uq_cleanovation__clean_synergy--steps__bar li:nth-child(4) { top: 49.33333333% } .uq_cleanovation__clean_synergy--steps__bar li:nth-child(5) { top: 65.6666667% } .uq_cleanovation__clean_synergy--steps__bar li :after { left: 0; top: -15px; width: 100%; height: 100%; border-radius: 50%; border: 1px solid #fff; opacity: 0; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transition-property: opacity,-webkit-transform; transition-property: opacity,-webkit-transform; transition-property: opacity,transform; transition-property: opacity,transform,-webkit-transform; -webkit-transition-duration: .4s; transition-duration: .4s } .uq_cleanovation__clean_synergy--steps__bar li.is-active a { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); padding-left: 0.7rem } .uq_cleanovation__clean_synergy--steps__bar li.is-active a img { max-height: 100% } @media (max-width: 1200px) { .uq_cleanovation__clean_synergy--steps__bar li.is-active a img { max-height: 4vw } } .uq_cleanovation__clean_synergy--steps__bar li span,.uq_cleanovation__clean_synergy--steps__bar li a { -webkit-transition: 0.35s; transition: 0.35s; display: block; height: 100%; min-width: 145px; position: relative; top: -20px; opacity: .25; z-index: 5 } .uq_cleanovation__clean_synergy--steps__bar li span img,.uq_cleanovation__clean_synergy--steps__bar li a img { max-height: 2.483vw } @media (max-width: 1200px) { .uq_cleanovation__clean_synergy--steps__bar li span img,.uq_cleanovation__clean_synergy--steps__bar li a img { max-height: 3.33vw } } @media (max-width: 940px) { .uq_cleanovation__clean_synergy--steps__bar li span,.uq_cleanovation__clean_synergy--steps__bar li a { top: -1.18vw } .uq_cleanovation__clean_synergy--steps__bar li span img,.uq_cleanovation__clean_synergy--steps__bar li a img { max-height: 3.19vw } } .uq_cleanovation__clean_synergy--steps__box { padding-top: 150px; padding-bottom: 150px; width: 70vw; max-width: 860px } @media (max-width: 1200px) { .uq_cleanovation__clean_synergy--steps__box { padding-top: 12.5vw; padding-bottom: 12.5vw } } .uq_cleanovation__clean_synergy--steps__images { position: relative; width: 100% } .uq_cleanovation__clean_synergy--steps__images li { top: 0; left: 0; width: 100%; opacity: 0; -webkit-transform: scale(0.7); transform: scale(0.7); -webkit-transition-property: opacity,-webkit-transform; transition-property: opacity,-webkit-transform; transition-property: opacity,transform; transition-property: opacity,transform,-webkit-transform; -webkit-transition-timing-function: cubic-bezier(0.15, 0, 0, 1); transition-timing-function: cubic-bezier(0.15, 0, 0, 1); -webkit-transition-duration: .4s; transition-duration: .4s; -webkit-transition-delay: 0s; transition-delay: 0s; padding-top: 150px; padding-bottom: 100px } @media (max-width: 1200px) { .uq_cleanovation__clean_synergy--steps__images li { padding-top: 12.5vw; padding-bottom: 8.33vw } } .uq_cleanovation__clean_synergy--steps__images li.is-active_first,.uq_cleanovation__clean_synergy--steps__images li.is-active { opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition-delay: .2s; transition-delay: .2s; z-index: 5 } .uq_cleanovation__clean_synergy--steps__images li.is-hidden { top: 0%; left: 0; opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition-delay: 0s; transition-delay: 0s } .uq_cleanovation__clean_synergy__movie.introduction__movie { background: url(../images/bg_tornado_flush.jpg) 50% 0 no-repeat } @media print, screen and (min-width: 1025px) { .uq_cleanovation__clean_synergy__movie.introduction__movie { background-size: contain !important } } @media print, screen and (min-width: 768px) { .uq_cleanovation__clean_synergy__area { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-top: 2rem } } @media print, screen and (max-width: 767px) { .uq_cleanovation__clean_synergy__area { display: block; padding-top: 2rem } } .uq_cleanovation__clean_synergy__area.is-one { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column } @media print, screen and (min-width: 768px) { .uq_cleanovation__clean_synergy__txtImg { width: 49% } } @media print, screen and (max-width: 767px) { .uq_cleanovation__clean_synergy__txtImg { width: 100% } } .is-one .uq_cleanovation__clean_synergy__txtImg { width: 100% } @media print, screen and (min-width: 768px) { .uq_cleanovation__clean_synergy__txtArea { width: 49% } } @media print, screen and (max-width: 767px) { .uq_cleanovation__clean_synergy__txtArea { width: 100% } } .is-one .uq_cleanovation__clean_synergy__txtArea { width: 100% } .uq_cleanovation__clean_synergy__txtArea--ttl { font-weight: bold; font-size: 20px; line-height: 2; font-size: 1.49048vw; padding-bottom: 2rem } @media print, screen and (max-width: 767px) { .uq_cleanovation__clean_synergy__txtArea--ttl { font-size: 16px; font-size: 4.26667vw; line-height: 1.3; padding-top: 2rem; padding-bottom: 0 } } .uq_cleanovation__clean_synergy__txtArea--ttl-img { max-width: 153px; padding-bottom: 2rem } .uq_cleanovation__clean_synergy__txtArea--lead { font-size: 20px; line-height: 1.75; font-size: 14px } .uq_cleanovation__clean_synergy__txtArea--lead.is-p2 { padding-top: 2rem } @media print, screen and (max-width: 767px) { .uq_cleanovation__clean_synergy__txtArea--lead { padding-top: 2rem } } @media print, screen and (min-width: 1025px) { .uq_cleanovation__clean_synergy .introduction__lead { font-size: 1.38095vw } .uq_cleanovation__clean_synergy .introduction__movie { padding: 2.19048vw 50px; height: 100% } .uq_cleanovation__clean_synergy .introduction__point__lead { font-size: 20px; line-height: 1.7 } } @media (max-width: 1070px) { .uq_cleanovation__clean_synergy .introduction__title .svg-tornado-flush,.uq_cleanovation__clean_synergy .introduction__title .svg-premist,.uq_cleanovation__clean_synergy .introduction__title .svg-cefiontect,.uq_cleanovation__clean_synergy .introduction__title .svg-ewater { width: 5.09762vw; height: 5.09762vw } } @media print, screen and (min-width: 768px) and (max-width: 1024px) { .uq_cleanovation__clean_synergy .introduction__point__lead { font-size: 32px; font-size: 2rem; line-height: 1.7 } .uq_cleanovation__clean_synergy .uq_cleanovation__clean_synergy__txtArea--ttl { font-size: 1.69048vw } .uq_cleanovation__clean_synergy .uq_cleanovation__clean_synergy__movie { padding: 4.66667vw 8vw; height: 49vw; background-size: cover } .uq_cleanovation__clean_synergy .uq_cleanovation__clean_synergy__movie .introduction__lead { font-size: 18px; font-size: 1.125rem } .uq_cleanovation__clean_synergy .uq_cleanovation__clean_synergy__movie .introduction__title { font-size: 3.33333vw } .uq_cleanovation__clean_synergy .uq_cleanovation__clean_synergy__movie .introduction__title .svg-premist,.uq_cleanovation__clean_synergy .uq_cleanovation__clean_synergy__movie .introduction__title .svg-tornado-flush,.uq_cleanovation__clean_synergy .uq_cleanovation__clean_synergy__movie .introduction__title .svg-cefiontect,.uq_cleanovation__clean_synergy .uq_cleanovation__clean_synergy__movie .introduction__title .svg-ewater { width: 6vw; height: 6vw } .uq_cleanovation__clean_synergy .uq_cleanovation__clean_synergy__movie .introduction__txt { font-size: 2.03333vw } } @media print, screen and (max-width: 767px) { body::after { content: none } } .uq_cleanovation__clean_synergy_sp { background-color: #E4E4E4; position: relative } .uq_cleanovation__clean_synergy_sp__inner { margin-left: auto; margin-right: auto; padding: 2rem 4vw } .uq_cleanovation__clean_synergy_sp__list { padding: 1rem 0 } .uq_cleanovation__clean_synergy_sp__list>.borderList { border-top: 1px solid #000; width: 100%; padding: 1.5rem; cursor: pointer; position: sticky; background-color: #E4E4E4; z-index: 11 } @media print, screen and (min-width: 768px) { .uq_cleanovation__clean_synergy_sp__list>.borderList { top: 35px } } @media print, screen and (max-width: 767px) { .uq_cleanovation__clean_synergy_sp__list>.borderList { top: 0 } } .uq_cleanovation__clean_synergy_sp__list>.borderList::before,.uq_cleanovation__clean_synergy_sp__list>.borderList::after { background-repeat: no-repeat; background-position: center; background-size: cover; content: ""; display: inline-block; vertical-align: middle; background-color: #333; bottom: 0; height: 1px; right: 1rem; margin: auto; position: absolute; top: .5rem; width: 20px; -webkit-transition: -webkit-transform 200ms; transition: -webkit-transform 200ms; transition: transform 200ms; transition: transform 200ms, -webkit-transform 200ms } @media print, screen and (max-width: 767px) { .uq_cleanovation__clean_synergy_sp__list>.borderList::before,.uq_cleanovation__clean_synergy_sp__list>.borderList::after { top: .6rem } } .uq_cleanovation__clean_synergy_sp__list>.borderList::after { -webkit-transform: rotate(90deg); transform: rotate(90deg) } .uq_cleanovation__clean_synergy_sp__list>.borderList.is-nonIcon { padding: 0 } .uq_cleanovation__clean_synergy_sp__list>.borderList.is-nonIcon::before,.uq_cleanovation__clean_synergy_sp__list>.borderList.is-nonIcon::after { content: none } .uq_cleanovation__clean_synergy_sp__list>.borderList.is-accoOpen::before,.uq_cleanovation__clean_synergy_sp__list>.borderList.is-accoOpen::after { -webkit-transform: rotate(180deg); transform: rotate(180deg) } .uq_cleanovation__clean_synergy_sp__list>.borderList.is-accoOpen::after { -webkit-transform: rotate(-180deg); transform: rotate(-180deg) } .uq_cleanovation__clean_synergy_sp__dital { display: none } .uq_cleanovation__clean_synergy_sp__dital__inner { padding: 2rem 1rem } @media print, screen and (min-width: 768px) { .uq_cleanovation__clean_synergy_sp__dital__inner { max-width: 1000px; margin-left: auto; margin-right: auto } .uq_cleanovation__clean_synergy_sp__dital__inner>div { padding: 3rem 0 } } @media print, screen and (min-width: 1025px) { .uq_cleanovation__clean_synergy_sp__dital .introduction__lead { font-size: 1.38095vw } .uq_cleanovation__clean_synergy_sp__dital .introduction__movie { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center } .uq_cleanovation__clean_synergy_sp__dital .introduction__point__lead { font-size: 20px; line-height: 1.7 } .uq_cleanovation__clean_synergy_sp__dital .uq_cleanovation__clean_synergy__txtArea--ttl { font-size: 20px; line-height: 1.7 } } @media (max-width: 1070px) { .uq_cleanovation__clean_synergy_sp__dital .introduction__title .svg-tornado-flush,.uq_cleanovation__clean_synergy_sp__dital .introduction__title .svg-premist,.uq_cleanovation__clean_synergy_sp__dital .introduction__title .svg-cefiontect,.uq_cleanovation__clean_synergy_sp__dital .introduction__title .svg-ewater { width: 5.09762vw; height: 5.09762vw } } @media print, screen and (min-width: 768px) and (max-width: 1024px) { .uq_cleanovation__clean_synergy_sp__dital .introduction__point__lead { font-size: 32px; font-size: 2rem; line-height: 1.7 } .uq_cleanovation__clean_synergy_sp__dital .uq_cleanovation__clean_synergy__txtArea--ttl { font-size: 1.69048vw; font-size: 2rem; line-height: 1.7 } .uq_cleanovation__clean_synergy_sp__dital .uq_cleanovation__clean_synergy__movie { padding: 4.66667vw 8vw; padding-top: 4.68vw; padding-bottom: 4.68vw; height: 49vw; height: 36rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .uq_cleanovation__clean_synergy_sp__dital .uq_cleanovation__clean_synergy__movie .introduction__lead { font-size: 18px; font-size: 1.125rem } .uq_cleanovation__clean_synergy_sp__dital .uq_cleanovation__clean_synergy__movie .introduction__title { font-size: 3.33333vw } .uq_cleanovation__clean_synergy_sp__dital .uq_cleanovation__clean_synergy__movie .introduction__title .svg-premist,.uq_cleanovation__clean_synergy_sp__dital .uq_cleanovation__clean_synergy__movie .introduction__title .svg-tornado-flush,.uq_cleanovation__clean_synergy_sp__dital .uq_cleanovation__clean_synergy__movie .introduction__title .svg-cefiontect,.uq_cleanovation__clean_synergy_sp__dital .uq_cleanovation__clean_synergy__movie .introduction__title .svg-ewater { width: 6vw; height: 6vw } .uq_cleanovation__clean_synergy_sp__dital .uq_cleanovation__clean_synergy__movie .introduction__txt { font-size: 2.03333vw } } @media print, screen and (max-width: 767px) { .uq_cleanovation__clean_synergy_sp__dital .introduction__movie { height: 100%; max-width: 100%; max-height: 100%; padding: 2rem 1rem; background-size: 100% } .uq_cleanovation__clean_synergy_sp__dital .introduction__lead { font-size: 13px; font-size: 3.46667vw } .uq_cleanovation__clean_synergy_sp__dital .introduction__title { margin-top: 2vw; font-size: 16px; font-size: 4.26667vw; line-height: 1 } .uq_cleanovation__clean_synergy_sp__dital .introduction__title .svg-premist,.uq_cleanovation__clean_synergy_sp__dital .introduction__title .svg-tornado-flush,.uq_cleanovation__clean_synergy_sp__dital .introduction__title .svg-ewater { width: 7vw; height: 7vw; margin: 0 auto 2vw } .uq_cleanovation__clean_synergy_sp__dital #premist .introduction__movie { background: url(../images/bg_premist.jpg) 50% 0 no-repeat; background-size: cover } .uq_cleanovation__clean_synergy_sp__dital #cefiontect .introduction__movie { background: url(../images/bg_cefiontect.jpg) 50% 0 no-repeat; background-size: cover } .uq_cleanovation__clean_synergy_sp__dital #ewater-wand .introduction__movie { background: url(../images/bg_ewater-wand.jpg) 50% 0 no-repeat; background-size: cover } .uq_cleanovation__clean_synergy_sp__dital #ewater-bowl .introduction__movie { background: url(../images/bg_ewater-bowl.jpg) 50% 0 no-repeat; background-size: cover } .uq_cleanovation__clean_synergy_sp__dital #ewater-underseat .introduction__movie { background: url(../images/bg_ewater-underseat.jpg) 50% 0 no-repeat; background-size: cover } .uq_cleanovation__clean_synergy_sp__dital .introduction__txt { margin-top: 3.2vw; font-size: 11px; font-size: 2.93333vw; line-height: 1.42 } .uq_cleanovation__clean_synergy_sp__dital .uq_cleanovation__clean_synergy__txtArea--ttl-img { max-width: 32vw; padding-bottom: 0; margin: 0 auto; margin-top: 2rem } .uq_cleanovation__clean_synergy_sp__dital .btn-play a { width: 10.06667vw; height: 6.66667vw; margin-top: 3.86667vw } .uq_cleanovation__clean_synergy_sp__dital .introduction__point__lead { font-size: 16px; font-size: 4.26667vw; padding-top: 1.5rem } } .gb-common-2019_footer { overflow: hidden } .sec-bg-product { background: #fff } .tech-icon-container{ height: 48px; font-weight: bold; } .tech-icon-list{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-content: space-around; align-items: center; width: auto; margin: auto; } .tech-icon-list .tech-icon{ margin:0; margin-right: 1vw; } .tech-icon-list .tech-icon:last-of-type{ margin-right: 0; } .left-right{ display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; align-items: flex-start; margin-top: 58px; } .left-right .text{ margin-right: 26px; } .left-right .text .title{ margin-top: 0; margin-bottom: 25px; } .left-right .pic{ width: 49%; } @media screen and (min-width: 0) and (max-width: 640px) { .left-right{ flex-direction: column; } .left-right .text{ margin-right: auto; } .left-right .pic { width: auto; margin-top: 24px; } } #menu { position: fixed; z-index: 100; left: 0; top: 0; pointer-events: none; width: 100%; height: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } #menu .menuContent { pointer-events: auto; background: black; visibility: hidden; opacity: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } #menu .menuContent .menu_shoulder { position: absolute; letter-spacing: 0.025em; font-weight: bold; color: #fff; line-height: 1; } @media (min-width: 768px) { #menu .menuContent .menu_shoulder { left: 4.16667vw; top: calc(4.16667vw + 34px); font-size: 1.25vw; } } @media (max-width: 767px) { #menu .menuContent .menu_shoulder { left: 5.33333vw; top: 8vw; top: calc(8vw + 50px); font-size: 4.13333vw; } } @media (max-width: 767px) { #menu .menuContent .list { padding: 5.33333vw; } } @media (min-width: 768px) { #menu .menuContent .list { padding-top: 40px; } } @media (min-width: 768px) { #menu .menuContent .list .item + .item { margin-top: 2.5vw; } } @media (max-width: 767px) { #menu .menuContent .list .item + .item { margin-top: 6.66667vw; } } #menu .menuContent .list .item a { color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (min-width: 768px) { #menu .menuContent .list .item a { -webkit-transition: opacity 0.3s linear; transition: opacity 0.3s linear; } #menu .menuContent .list .item a:hover { opacity: 0.7; } } @media (min-width: 768px) { #menu .menuContent .list .item.top { font-size: 1.94444vw; line-height: 1.94444vw; } } @media (max-width: 767px) { #menu .menuContent .list .item.top { font-size: 4.8vw; line-height: 4.8vw; } } #menu .menuContent .list .item.lower { padding-left: 1em; } @media (min-width: 768px) { #menu .menuContent .list .item.lower { font-size: 1.94444vw; line-height: 1.94444vw; } } @media (max-width: 767px) { #menu .menuContent .list .item.lower { font-size: 4.8vw; line-height: 4.8vw; } } #menu .menuContent .list .item.lower a:before { content: ''; display: block; background: url("../images/common/icn_arrow_right_white.svg") no-repeat center/contain; } @media (min-width: 768px) { #menu .menuContent .list .item.lower a:before { width: 1.80556vw; height: 1.38889vw; margin-right: 0.34722vw; } } @media (max-width: 767px) { #menu .menuContent .list .item.lower a:before { width: 4.8vw; height: 3.73333vw; margin-right: 1.06667vw; } } #menu .menuContent .list .item.blank { padding-left: 1em; } @media (min-width: 768px) { #menu .menuContent .list .item.blank { font-size: 1.94444vw; line-height: 1.94444vw; } } @media (max-width: 767px) { #menu .menuContent .list .item.blank { font-size: 4.8vw; line-height: 4.8vw; } } #menu .menuContent .list .item.blank a:after { content: ''; display: block; background: url("../images/common/icn_arrow_right_white.svg") no-repeat center/contain; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } @media (min-width: 768px) { #menu .menuContent .list .item.blank a:after { width: 1.80556vw; height: 1.38889vw; margin-right: 0.34722vw; } } @media (max-width: 767px) { #menu .menuContent .list .item.blank a:after { width: 4.8vw; height: 3.73333vw; margin-right: 1.06667vw; } } #menu .triggerWrap { position: absolute; left: 0; top: 0; width: 100%; -webkit-mask-image: url("../images/common/mask.png"); mask-image: url("../images/common/mask.png"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } #menu .triggerWrap.white { -webkit-mask-position: 0 0; mask-position: 0 0; } #menu .triggerWrap.black { -webkit-mask-position: 0 10000px; mask-position: 0 10000px; } @media (min-width: 768px) { #purposeLower #menu .triggerWrap { height: 36.11111vw; } } @media (max-width: 767px) { #purposeLower #menu .triggerWrap { height: calc(72vw + 50px); } } #menu .triggerWrap .menuTrigger { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; pointer-events: auto; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } @media (min-width: 768px) { #menu .triggerWrap .menuTrigger { cursor: pointer; right: 4.16667vw; top: 5.06944vw; width: 9.72222vw; height: 3.47222vw; border-radius: 1.73611vw; padding: 0 1.73611vw; } } @media (max-width: 767px) { #menu .triggerWrap .menuTrigger { right: 3.33333vw; top: 18vw; width: 28vw; height: 9.33333vw; border-radius: 4.66667vw; padding: 0 5.86667vw; } } #menu .triggerWrap .menuTrigger .menuTrigger_text { position: relative; } @media (min-width: 768px) { #menu .triggerWrap .menuTrigger .menuTrigger_text { font-size: 1.11111vw; line-height: 0.97222vw; margin-top: 0.13889vw; } } @media (max-width: 767px) { #menu .triggerWrap .menuTrigger .menuTrigger_text { font-size: 3.2vw; line-height: 3.2vw; margin-top: 0.26667vw; } } #menu .triggerWrap .menuTrigger .menuTrigger_text span { -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } #menu .triggerWrap .menuTrigger .menuTrigger_text span:nth-child(2) { position: absolute; left: 0; top: 0; opacity: 0; } #menu .triggerWrap .menuTrigger .menuTrigger_icon { position: relative; } @media (min-width: 768px) { #menu .triggerWrap .menuTrigger .menuTrigger_icon { width: 1.38889vw; height: 0.625vw; } } @media (max-width: 767px) { #menu .triggerWrap .menuTrigger .menuTrigger_icon { width: 4vw; height: 1.86667vw; } } #menu .triggerWrap .menuTrigger .menuTrigger_icon span { display: block; width: 100%; background: #353535; position: absolute; left: 0; top: 50%; -webkit-transition: margin 0.1s 0.1s ease-out, background-color 0.2s linear, -webkit-transform 0.1s 0s ease-in; transition: margin 0.1s 0.1s ease-out, background-color 0.2s linear, -webkit-transform 0.1s 0s ease-in; transition: margin 0.1s 0.1s ease-out, transform 0.1s 0s ease-in, background-color 0.2s linear; transition: margin 0.1s 0.1s ease-out, transform 0.1s 0s ease-in, background-color 0.2s linear, -webkit-transform 0.1s 0s ease-in; } @media (min-width: 768px) { #menu .triggerWrap .menuTrigger .menuTrigger_icon span { height: 0.13889vw; } #menu .triggerWrap .menuTrigger .menuTrigger_icon span:nth-child(1) { margin-top: -0.27778vw; } #menu .triggerWrap .menuTrigger .menuTrigger_icon span:nth-child(2) { margin-top: 0.20833vw; } } @media (max-width: 767px) { #menu .triggerWrap .menuTrigger .menuTrigger_icon span { height: 0.4vw; } #menu .triggerWrap .menuTrigger .menuTrigger_icon span:nth-child(1) { margin-top: -0.93333vw; } #menu .triggerWrap .menuTrigger .menuTrigger_icon span:nth-child(2) { margin-top: 0.53333vw; } } #menu .triggerWrap .menuTrigger.black { background: #3e4042; color: #fff; } #menu .triggerWrap .menuTrigger.black .menuTrigger_icon span { background: #fff; } #menu .triggerWrap .menuTrigger.white { background: #fff; } #menu .triggerWrap .menuTrigger.open { background: #fff; color: #000; } #menu .triggerWrap .menuTrigger.open .menuTrigger_text span:nth-child(1) { opacity: 0; } #menu .triggerWrap .menuTrigger.open .menuTrigger_text span:nth-child(2) { opacity: 1; } #menu .triggerWrap .menuTrigger.open .menuTrigger_icon span { background: #000; -webkit-transition: margin 0.1s 0s ease-out, background-color 0.2s linear, -webkit-transform 0.1s 0.1s ease-in; transition: margin 0.1s 0s ease-out, background-color 0.2s linear, -webkit-transform 0.1s 0.1s ease-in; transition: margin 0.1s 0s ease-out, transform 0.1s 0.1s ease-in, background-color 0.2s linear; transition: margin 0.1s 0s ease-out, transform 0.1s 0.1s ease-in, background-color 0.2s linear, -webkit-transform 0.1s 0.1s ease-in; margin-top: -0.06944vw; } #menu .triggerWrap .menuTrigger.open .menuTrigger_icon span:nth-child(1) { -webkit-transform: rotate(45deg); transform: rotate(45deg); } #menu .triggerWrap .menuTrigger.open .menuTrigger_icon span:nth-child(2) { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }