#main .top .main-visual{height: 861px;position: relative;} #main .top .main-visual__block{position: relative;height: 817px;} #main .top .main-visual__block::after{position: absolute;content: "";background: #f1f1f1;background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #f1f1f1 85%, #f1f1f1 100%);height: 100%;width: 8%;top: 0;right: 0;z-index: 1;} #main .top .scroll-down{position: absolute;top: calc(50% - 100px);right: 1%;z-index: 2;} #main .top .scroll-down__txt {position: relative;top: 0;display: inline-block;z-index: 999;} #main .top .scroll-down__txt span {font-size: 0.75em;font-weight: 300;letter-spacing: 0.24em;font-family: 'Manrope', sans-serif;color: #4a4a4a;transform-origin: top left;transform: rotate(90deg);top: -20px;right: -60px;position: absolute;} #main .top .scroll-down__txt:before {content: '';position: absolute;bottom: -117px;left: calc(50% - 10px);width: 1px;height: 60px;background: #4a4a4a;animation: 2s cubic-bezier(1,0,0,1) infinite sdl;} @keyframes sdl{0%{transform:scale(1,0);transform-origin:0 0}50%{transform:scale(1,1);transform-origin:0 0}50.1%{transform:scale(1,1);transform-origin:0 100%}100%{transform:scale(1,0);transform-origin:0 100%}} #main .top .global-navi .global-navi__menu{padding: 0;} #main .top .global-navi .global-navi__menu li + li {margin-left: 6px;} #main .top .global-navi .global-navi__menu li a{color: #4a4a4a;padding: 12px 20px;} #main .top .global-navi .global-navi__menu .underline::before{border-image: linear-gradient(to right, #4a4a4a 0%, #4a4a4a 100% ) 2/0 0 2px 0;} #main .top .global-navi .global-navi__menu li.current{font-weight: 700;border-bottom: 2px solid #4a4a4a;margin-bottom: -1px;} #main .top .top-block{display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #c8c8c8;padding-top: 32px;align-items: end;} #main .top .top-block__title{font-size: 1.625em;font-weight: 700;letter-spacing: 0.08em;padding-bottom: 10px;} #main .top .underline::before{bottom: -1px;} #main .top .main-visual__column{display: flex;justify-content: space-between;} #main .top .main-visual__content{margin-top: 160px;} #main .top .main-visual__copy{font-size: 2.75em;letter-spacing: 0.08em;line-height: 1.5454;} #main .top .main-visual__label{font-size: 1.125em;letter-spacing: 0.14em;font-weight: 700;color: #066cc7;background: -webkit-linear-gradient(0deg, #066cc7, #2ab2ba);-webkit-background-clip: text;-webkit-text-fill-color: transparent;margin-top: 21px;display: inline-block;} #main .top .section-title{text-align: left;} #main .top .section-title--en{font-size: 2.8846153846154em;display: block;letter-spacing: 0.16em;font-family: 'Manrope', sans-serif;font-weight: 400;display: inline-block;} #main .top .section-title--ja{font-size: 1.0683760683761em;display: block;letter-spacing: 0.10em;font-weight: 300;} #main .top .section-title--gd {color: #066cc7;background: -webkit-linear-gradient(0deg, #066cc7, #2ab2ba);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} #main .top .section-title--wh{color: #fff;} #main .top .slide-img{position: relative;max-width: 610px;flex: 1;margin-left: 26px;margin-top: 6.388%;width: 58.9559%;} #main .top .slide-img .slide-img__wrap {margin-right: calc(-200% - 100px);overflow: hidden;padding: 20px;margin-top: -20px;margin-left: -20px;margin-bottom: -20px;} #main .top .slide-img .swiper-container {overflow: visible;} #main .top .slide-img .randd-top-controlWrap{display: flex;justify-content: center;align-items: center;flex-wrap: wrap;margin-top: 18px;} #main .top .slide-img .swiper-pagination {font-family: 'Manrope', sans-serif;color: #4a4a4a;letter-spacing: 0.12em;position: static;display: flex;align-items: center;margin-top: 0;width: 27%;min-width: 120px;} #main .top .slide-img .stopbtn{position: static;margin-top: 0; margin-left: 0;margin-right: 22px;transform: none;} #main .top .slide-img .progress{width: 100%;} #main .top .slide-img .randd-top-next, #main .top .slide-img .randd-top-prev{width: 30px;height: 30px;bottom: 0;background: url(/corporate/randd/img/icon_slider_control.png) 0 0 no-repeat;background-size: 100%;margin-left: 0;margin-right: 0;transition: filter .2s ease;} #main .top .slide-img .randd-top-next:hover, #main .top .slide-img .randd-top-prev:hover{filter: brightness(1.1);} #main .top .slide-img .randd-top-prev{margin-right: 20px;} #main .top .slide-img .randd-top-next{margin-left: 20px;transform: scale(-1,1);} #main .top .slide-img .swiper-slide{box-shadow: 0 2px 20px 0 rgb(0 0 0 / 13%);border-radius: 10px;width: 100%;} #main .top .slide-img{display: none;} #main .top .slide-img img {width: 100%;height: auto;border-radius: 10px;} #main .top .progress {width: 13.1147%;height: 1px;display: block;background: #c5c5c5;margin-left: 20px;margin-right: 20px;} #main .top .progress-bar {background-color: #28afbb;width: 100%;height: 100%;display: block;transform-origin: left center;} #main .top .stopbtn {cursor: pointer;margin-top: 3px;width: 10px;height: 10px;position: absolute;z-index: 1;bottom: 1.7%;left: 0;right: 0;margin-left: auto;margin-right: auto;transform: translateX(-100px);} #main .top .stopbtn.stop {background: url(../img/img_stop_icon.png) no-repeat left center;} #main .top .stopbtn.start {background: url(../img/img_start_icon.png) no-repeat left center;} #main .top .search-list .pdf-icon {background: url(../common/img/img_pdf_blue_icon.png) center /contain no-repeat;} @media print,screen and (max-width:1600px){ #main .top .main-visual{height:53.8125vw} #main .top .main-visual__block{height: 51.3125vw;} } @media print,screen and (max-width:1400px){ #main .top .main-visual__content{margin-top: 11.4285vw;} #main .top .main-visual__copy{font-size:3.1428vw;} #main .top .slide-img {width: 42.5714vw;margin-top: 30px;flex: initial;} #main .top .slide-img .randd-top-controlWrap{margin-top: 10px;} #main .top .main-visual__block::after{display: none;} #main .top .scroll-down__txt{display:none;} #main .top .stopbtn {bottom: 8px;} } @media print,screen and (max-width:767px){ #main .top .main-visual{height: 566px;} #main .top .main-visual__block{height: 566px;} #main .top .global-navi{border-top: none;} #main .top .top-block {padding-top: 0;display: block;} #main .top .top-block__title{background-color: #fff;padding:5px 13px 8px;font-size: 1.2142em;} #main .top .global-navi .global-navi__menu .underline::before{border-bottom: none;padding-bottom: 0;border-image: unset;border-width: 0;} #main .top .global-navi .global-navi__menu li{flex: 1;} #main .top .global-navi .global-navi__menu li + li{margin-left: 0;} #main .top .global-navi .global-navi__menu li a{padding: 10px 7px 9px;height: 51px;display: flex;align-items: center;justify-content: center;} #main .top .main-visual__column{display: block;} #main .top .main-visual__content{margin-top: 28px;padding-right: 30px;padding-left: 30px;} #main .top .main-visual__copy {font-size: 1.7142857142857em;line-height: 1.590909;} #main .top .main-visual__label{font-size: 1em;margin-top: 14px;} #main .top .section-title--en{font-size: 2.1367521367521em;font-weight: 300;line-height: 1.2;} #main .top .section-title--ja{font-size: 0.9768em;} #main .top .layout-column.layout-column--3 .layout-cell{margin-top: 9.9222%;} #main .top .slide-img{margin-right: 20px;margin-left: 20px;width: 85.1111%;margin-top: 25px;max-width: 305px;} #main .top .slide-img .slide-img__wrap{margin-right: calc(-200% - 60px);padding-left: 20px;margin-left: -20px;} #main .top .slide-img .randd-top-next, #main .top .slide-img .randd-top-prev{width: 20px;height: 20px;} #main .top .slide-img .randd-top-prev{margin-right: 15px;} #main .top .slide-img .randd-top-next{margin-left: 15px;} #main .top .slide-img .swiper-pagination{font-size: 0.7857em;} #main .top .main-visual__block::after{display: none;} #main .top .progress {width: 45px;margin-left: 6px;margin-right: 6px;} #main .top .stopbtn {left: 64.5%;top: 96.5%;bottom: auto;} } @media print,screen and (max-width:350px){ #main .top .stopbtn {left: 64%;} } /* ****************************************************************************** top-about ****************************************************************************** */ #main .top .top-about__wrap{overflow: hidden;display: block;position: relative;} #main .top .top-about__bg{background: url(../img/img_about_bg.jpg) center top/cover no-repeat;height: 400px;display: block;-webkit-transition: .5s;transition: .5s;} #main .top .top-about__column{display: flex;} #main .top .top-about__title {width: 34.6678%;} #main .top .top-about__content{padding-left: 110px;} #main .top .top-about__bg-inner {position: absolute;text-align: center;top: 52%;left: 50%;-webkit-transform: translate(-50%,-52%);transform: translate(-50%,-52%);width: 100%;} #main .top .top-about__copy{font-size: 2em;line-height: 1.78;letter-spacing: 0.08em;color: #fff;font-weight: 300;text-align: left;} #main .top .top-about__link{margin-top: 40px;text-align: left;} #main .top .top-about__link .arrow-btn__link{color: #fff;background: none;-webkit-text-fill-color: #fff;} #main .top .top-about__link .underline::before {border-bottom: 1px solid #fff;bottom: 0;content: '';display: block;height: 1px;left: 0;position: absolute;transition: .5s all;width: 100%;transform: scale(0, 1);transform-origin:left; border-image: linear-gradient(to right, #fff 0%, #fff 100% ) 1/0 0 1px 0;border-style: solid;border-width: 0;} #main .top .top-about__link .arrow-btn__link span::before {border-top: 2px solid #fff;border-right: 2px solid #fff;} #main .top .top-about__link .arrow-btn__link span::after {background: #fff;} @media print, screen and (min-width: 768px){ #main .top .top-about__wrap:hover .top-about__bg{-webkit-transform: scale(1.1);transform: scale(1.1);} #main .top .h-link:hover .arrow-btn__link::after {right: -7%;} } @media print,screen and (max-width:767px){ #main .top .top-about__bg{background: url(../img/img_about_bg_sp.jpg) center top/cover no-repeat;height: 295px;display: block;} #main .top .top-about__column{display: block;} #main .top .top-about__title{width: 100%;} #main .top .top-about__content {padding-left: 0;} #main .top .top-about__copy {font-size: 1.3571428571429em;line-height: 1.4736;margin-top: 16px;} #main .top .top-about__link{margin-top: 20px;text-align: right;} #main .top .top-about__link .underline::before{width: 100%;border-width: medium;transform: scale(1, 1);} #main .top .top-about__link .arrow-btn__link span::before{border-top: 1px solid #fff;border-right: 1px solid #fff;} } /* ****************************************************************************** top-lab ****************************************************************************** */ #main .top .top-lab{background: -moz-linear-gradient(130deg, #0f5391, #1c7fa8);background: -webkit-linear-gradient(130deg, #0f5391, #1c7fa8);background: linear-gradient(130deg, #0f5391, #1c7fa8);} #main .top .top-lab .top-lab__inner{padding: 94px 0 130px;} #main .top .top-lab__txt{font-weight: 300;margin-top: 50px;color: #fff;line-height: 2.25;letter-spacing: 0.08em;} #main .top .top-lab__list {margin-top: 62px;} #main .top .top-lab__list .lab-list__item a{color: #fff;text-decoration: none;} #main .layout-column .lab-list__item-title{color: #fff;} #main .layout-column .lab-list__item-txt{color: #fff;} @media print,screen and (max-width:767px){ #main .top .top-lab .top-lab__inner{padding: 62px 0 66px;} #main .top .top-lab__txt{margin-top: 26px;line-height: 1.714;} #main .top .top-lab__list{margin-top: 34px;} } /* ****************************************************************************** top-pickup ****************************************************************************** */ #main .top .top-pickup__list{margin-top: 60px;} #main .top .top-pickup__list .blank-icon{margin-left: 20px;} #main .top .top-pickup__list .pdf-icon{margin-left: 20px;} #main .top .top-pickup__item:hover a{text-decoration: none;} #main .top .top-pickup__inner{padding: 96px 0 0;} #main .top .top-pickup__label{font-size: 0.875em;color: #5e5e5e;letter-spacing: 0.08em;margin-top: 28px;} #main .top .top-pickup__head{font-size: 1.25em;letter-spacing: 0.05em;margin-top: 16px;transition: all 0.3s ease-out;} #main .top .top-pickup__head:first-of-type{margin-top: 68px;} #main .top .top-pickup__head .pdf-icon{display: inline-block;margin: 0 0 0 10px;width: 33px;vertical-align: middle;} #main .top .top-pickup__txt{font-size: 0.875em;color: #5e5e5e;letter-spacing: 0.08em;line-height: 1.92;margin-top: 8px;} #main .top .top-pickup__data{font-size: 0.8125em;color: #5e5e5e;letter-spacing: 0.08em;line-height: 1.92;} #main .top .top-pickup__data{margin-top: 10px;} #main .top .view-more {margin: 63px auto 0;} @media print, screen and (min-width: 768px){ #main .top .top-pickup__item:hover .top-pickup__head {color: #066cc7;} #main .top .top-pickup__item:hover > span > .top-pickup__head {color: #222;} } @media print,screen and (max-width:767px){ #main .top .top-pickup__inner{padding: 62px 0 0;} #main .top .top-pickup__list{margin-top: 34px;} #main .top .top-pickup__label{font-size: 0.92857142857143em;} #main .top .top-pickup__head{font-size: 1.3571428571429em;margin-top: 6px;line-height: 1.4736;} #main .top .top-pickup__head:first-of-type{margin-top: 28px;} #main .top .top-pickup__txt{font-size: 1em;line-height: 1.5714;} #main .top .top-pickup__data{font-size: 0.92857142857143em;} #main .top .view-more{margin: 33px auto 0;} #main .top .top-pickup__item__thumb img{height: auto;} } /* ****************************************************************************** top-technology ****************************************************************************** */ #main .top .top-technology {margin-top: 94px;} #main .top .top-technology .top-technology__content {margin-top: 52px;} @media print,screen and (max-width:767px){ #main .top .top-technology{margin-top: 82px;} #main .top .top-technology .top-technology__content{margin-top: 34px;} } /* ****************************************************************************** top-news ****************************************************************************** */ #main .top .top-news{background: -moz-linear-gradient(130deg, #0f5391, #1c7fa8);background: -webkit-linear-gradient(130deg, #0f5391, #1c7fa8);background: linear-gradient(130deg, #0f5391, #1c7fa8);} #main .top .top-news{margin-top: 102px;} #main .top .top-news .top-news__inner{padding:75px 0 100px;} #main .top .top-news .info_list {margin-top: 42px;border-bottom: 1px solid rgba(255,255,255,0.3);} #main .top .top-news .info_list li {border-top: 1px solid rgba(255,255,255,0.3);padding: 25px 0;} #main .top .top-news .info_list li:nth-of-type(n + 4){display: none;} #main .top .top-news .info_list li .info_date {display: inline-block;color: #fff;font-family: 'Manrope', sans-serif;font-weight: 300;font-size: 0.875em;letter-spacing: 0.08em;line-height: 1.8875;padding-top: 2px;} #main .top .top-news .info_list li .info_title {line-height: 1.6875;color: #fff;letter-spacing: 0.08em;transition: opacity .3s;} #main .top .top-news .info_list li a {transition: opacity .3s;} #main .top .top-news .info_list li a:hover {text-decoration: none;} #main .top .top-news .more{display: flex;justify-content: flex-end;} #main .top .top-news .more a{display: block;position: relative;font-size: 1rem;letter-spacing: .08em;color: #fff;line-height: 1;padding: 0 21px 0 0;text-decoration: none;transition: opacity .3s;} #main .top .top-news .more a::before {content: "";display:block;margin: auto;position: absolute;top: calc(50% - 4px);right: 1px;width: 8px;height: 8px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(45deg);transition: 500ms;} #main .top .top-news .more a::after {content: "";display:block;margin: auto;position: absolute;top: calc(50% - 1px);right: 1px;width: 11px;height: 2px;background: #fff;transition: 500ms;} #main .top .top-news .more a span{display: flex;justify-content: flex-end;} @media print,screen and (min-width: 768px) { #main .top .top-news .info_list li .info_date {flex-basis: 105px;} #main .top .top-news .info_list li .info_title {width: calc(100% - 105px);} #main .top .top-news .info_list li a {display: flex; align-items: flex-start; transition: opacity .3s;} #main .top .top-news .info_list li a:hover{opacity: .3;} #main .top .top-news .more a{margin: 50px 0 0;} #main .top .top-news .more a:hover{opacity: .3;} } @media print,screen and (max-width: 767px) { #main .top .top-news {display: block;} #main .top .top-news .top-news__inner{padding:60px 0;} #main .top .top-news .info_list {margin-top: 20px;} #main .top .top-news .info_list li {padding: 8px 0 11px;} #main .top .top-news .info_list li .info_date {font-size: 0.9285em;} #main .top .top-news .info_list li .info_title {line-height: 1.35714;margin-top: 0;} #main .top .top-news .more a{margin: 30px 0 0;} } /* ****************************************************************************** top-information ****************************************************************************** */ #main .top .top-information .top-information__inner{padding:75px 0 160px;} #main .top .top-information .info_list {margin-top: 42px;border-bottom: 1px solid rgba(74,74,74,0.3);} #main .top .top-information .info_list li {border-top: 1px solid rgba(74,74,74,0.3);padding: 25px 0;} #main .top .top-information .info_list li .info_date {display: inline-block;color: rgba(74,74,74,1);font-family: 'Manrope', sans-serif;font-weight: 300;font-size: 0.875em;letter-spacing: 0.08em;line-height: 1.8875;padding-top: 2px;} #main .top .top-information .info_list li .info_title {line-height: 1.6875;color: rgba(74,74,74,1);letter-spacing: 0.08em;transition: opacity .3s;} #main .top .top-information .info_list li a {transition: opacity .3s;} #main .top .top-information .info_list li a:hover {text-decoration: none;} @media print,screen and (min-width: 768px) { #main .top .top-information .info_list li .info_date {flex-basis: 105px;} #main .top .top-information .info_list li .info_title {width: calc(100% - 105px);} #main .top .top-information .info_list li a {display: flex; align-items: flex-start; transition: opacity .3s;} #main .top .top-information .info_list li a:hover{opacity: .3;} } @media print,screen and (max-width: 767px) { #main .top .top-information {display: block;} #main .top .top-information .top-information__inner{padding:60px 0 100px;} #main .top .top-information .info_list {margin-top: 20px;} #main .top .top-information .info_list li {padding: 8px 0 11px;} #main .top .top-information .info_list li .info_date {font-size: 0.9285em;} #main .top .top-information .info_list li .info_title {line-height: 1.35714;margin-top: 0;} } /* ****************************************************************************** top-lab - r&d organization ****************************************************************************** */ #main .top .top-lab__inner{padding: 100px 0;background-color: #f2f2f2;} #main .top .top-lab__inner .lab-map{position: relative;margin-top: 83px;} #main .top .top-lab__inner .lab-map .lab-map--pc{display: block;} #main .top .top-lab__inner .lab-map .lab-map--pc img{padding-top: 22px} #main .top .top-lab__inner .lab-map .lab-map--sp{display: none;} #main .top .top-lab__inner .lab-map > img {padding-top: 22px;} #main .top .top-lab__inner .lab-item{background-color: #fff;padding: 14px;position: absolute;} #main .top .top-lab__inner .lab-item--01{width: 27.6831%;top:0;right: 1.3%;height: 195px} #main .top .top-lab__inner .lab-item--01 .lab-item__img {width: 38.8513%;} #main .top .top-lab__inner .lab-item--02{width: 35.51959%;top:0;right:12%;height: 195px} #main .top .top-lab__inner .lab-item--02 .lab-item___column{align-items: flex-start;} #main .top .top-lab__inner .lab-item--02 .lab-item__img {width: 54.1628%;} #main .top .top-lab__inner .lab-item--03{width: 35.51959%;top:0;height: 195px;left: 12%;} #main .top .top-lab__inner .lab-item--03 .lab-item__img {width: 77.8513%;} #main .top .top-lab__inner .lab-item--04{left: 12%;} #main .top .top-lab__inner .lab-item--04,#main .top .top-lab__inner .lab-item--05{width: 32.7938%;height: 157px;bottom: 1.6%;} #main .top .top-lab__inner .lab-item--04 .lab-item__img,#main .top .top-lab__inner .lab-item--05 .lab-item__img {width: 49.8513%;} #main .top .top-lab__inner .lab-item--05{right: 12%;} #main .top .top-lab__inner .lab-item___column{display: flex;align-items: center;} #main .top .top-lab__inner .lab-item___column .lab-item__img {max-width: 115px;} #main .top .top-lab__inner .lab-item___column .lab-item__img img {width: 100%;height: auto;} #main .top .top-lab__inner .lab-item___column .lab-item__content {padding-left: 10px;} #main .top .top-lab__inner .lab-item___column.flex-start {align-items: start;} #main .top .top-lab__inner .lab-item___column.flex-start + .lab-item___column.flex-start {margin-top: 10px;} #main .top .top-lab__inner .lab-item___column.flex-start .lab-item__img {width: calc((115/388)*100%);} #main .top .top-lab__inner .lab-item___column.flex-start .lab-item__content {width: calc((276/388)*100%);} #main .top .top-lab__inner .lab-map img {width: 100%;height: auto;} #main .top .top-lab__inner .lab-item__title.mt0 {margin-top: -2px;} #main .top .top-lab__inner .lab-item__title{font-size: 0.875em;font-weight: 700;display: block;color: #4a4a4a;transition: all 0.3s ease-out;} #main .top .top-lab__inner .lab-item__title:hover {text-decoration: none;} #main .top .top-lab__inner .lab-item__title span {position: relative;padding-right: 1em;display: inline-block;} #main .top .top-lab__inner .lab-item__title span::before{position: absolute;width: 8px;height: 8px;border-top: 2px solid #257ecd;border-right: 2px solid #257ecd;-webkit-transform: rotate(45deg);transform: rotate(45deg);top: calc(50% - 10px);bottom: 0;right: 0;margin: auto;content: "";vertical-align: middle;} #main .top .top-lab__inner .lab-item__txt + .lab-item__title{margin-top: 10px;} #main .top .top-lab__inner .lab-item__title + .lab-item__txt{margin-top: 3px;} #main .top .top-lab__inner .lab-item__txt{font-size: 0.6875em;margin-top: 8px;} #main .top .top-lab__inner .lab-item__inner{position: relative;height: 100%;} #main .top .top-lab__inner .lab-item__label{background-color: #4a4a4a;color: #fff;font-size: 0.6875em;display: inline-block;padding: 3px 11px;position: absolute;right: 0;bottom: -25px;} #main .top .lab-list {margin-top: 80px;padding-top: 70px;border-top: 1px solid #c5c5c5;} #main .top .lab-list .lab-list__item:hover a {text-decoration: none;} @media print,screen and (min-width:768px){ #main .top .top-lab__inner .lab-item__title:hover{color: #257ecd;} } @media print,screen and (max-width:1080px){ #main .top .top-lab__inner .lab-map{max-width: 820px;margin: 24px auto 0;} #main .top .top-lab__inner .lab-map .lab-map--pc{display: none;} #main .top .top-lab__inner .lab-map .lab-map--sp{display: block;} #main .top .top-lab__inner .lab-item{position: static;margin-top: 10px;} #main .top .top-lab__inner .lab-map__title{font-size: 1.14285em;margin-top: 32px;} #main .top .top-lab__inner .lab-item--01,#main .top .top-lab__inner .lab-item--02,#main .top .top-lab__inner .lab-item--03,#main .top .top-lab__inner .lab-item--04,#main .top .top-lab__inner .lab-item--05,#main .top .top-lab__inner .lab-item--06{width: 100%;height: auto;} #main .top .top-lab__inner .lab-item__label{display: none;} #main .top .top-lab__inner .lab-item {padding: 10px;} #main .top .top-lab__inner .lab-item .lab-item__img{width: 33.8983%;} #main .top .top-lab__inner .lab-item___column .lab-item__content {flex: 1;padding-left: 20px;} #main .top .top-lab__inner .lab-item__title {font-size: 1em;margin-top: 4px;} #main .top .top-lab__inner .lab-item__title.mt0 {margin-top: -4px;} #main .top .top-lab__inner .lab-item__txt{font-size: 0.85714285714286em;margin-top: 5px;} #main .top .top-lab__inner .lab-item__txt > .spOnly{display: inline-block;} #main .top .top-lab__inner .lab-item__label.lab-map--sp{display: inline-block;position: static;font-size: 0.78571428571429em;font-weight: 300;padding: 3px 6px;} } @media print,screen and (max-width:767px){ #main .top .top-lab__inner{padding: 54px 0 66px;} #main .top .lab-list {margin-top: 44px;padding-top: 38px;} #main .top .top-lab__inner .lab-item__title span{padding-right: 1.2em;} #main .top .top-lab__inner .lab-item__title span::before{top: calc(50% - 11px);} } /* ****************************************************************************** top-interview ****************************************************************************** */ #main .top .top-interview{background: -moz-linear-gradient(130deg, #0f5391, #1c7fa8);background: -webkit-linear-gradient(130deg, #0f5391, #1c7fa8);background: linear-gradient(130deg, #0f5391, #1c7fa8);} #main .top .top-interview .top-interview__inner{padding:75px 0 100px;overflow: hidden;} #main .top .top-interview .slide-interview{margin: 60px auto 0;} #main .top .top-interview .slide-interview *{box-sizing: border-box;} #main .top .top-interview .slide-interview__controls{display: flex;justify-content: center; align-items: center;margin: 40px auto 0;} /* ページネーション */ #main .top .top-interview .swiper-pagination-iv {font-family: 'Manrope', sans-serif;color: #fff;letter-spacing: 0.12em;position: static;display: flex;justify-content: center;align-items: center;width: 140px;order: 3;} /* プログレスバー */ #main .top .top-interview .progress-iv {width: 140px;height: 1px;display: block;background: #fff;margin-left: 12px;margin-right: 12px;display: flex;align-items: center;justify-content: center;} #main .top .top-interview .progress-bar-iv {background-color: #28afbb;width: 100%;height: 100%;display: block;transform-origin: left center;} /* 停止ボタン */ #main .top .top-interview .stopbtn-iv {cursor: pointer;margin-right: 15px;width: 10px;height: 10px;position: relative;z-index: 1;order: 2;} #main .top .top-interview .stopbtn-iv.stop {background: url(../img/img_stop_icon_w.png) no-repeat left center;} #main .top .top-interview .stopbtn-iv.start {background: url(../img/img_start_icon_w.png) no-repeat left center;} /* 進む戻るボタン */ #main .top .top-interview .swiper-button-iv-prev, #main .top .top-interview .swiper-button-iv-next {position: relative;background-image: none;border-radius: 50%;width: 65px;height: 65px;box-shadow: 0 10px 26px 0 rgb(0 0 0 / 20%);} #main .top .top-interview .swiper-button-iv-prev{order: 1;margin-right: 25px;} #main .top .top-interview .swiper-button-iv-next{order: 4;margin-left: 25px;} #main .top .top-interview .swiper-button-iv-prev, #main .top .top-interview .swiper-button-iv-next {background: #fff;} #main .top .top-interview .swiper-button-iv-prev span, #main .top .top-interview .swiper-button-iv-next span {position: relative;display: block;width: 100%;height: 100%;border-radius: 50%;} #main .top .top-interview .swiper-button-iv-prev span::after, #main .top .top-interview .swiper-button-iv-next span::after {content: "";width: 100%;height: 100%;display: block;position: absolute;top: 0;left: 0;z-index: -1;opacity: 1;transition: .3s;border-radius: 50%;background: #fff;} #main .top .top-interview .swiper-button-iv-next::before {content: "";margin: auto;position: absolute;top: 0;bottom: 0;left: calc(50% - 4px);width: 8px;height: 8px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(45deg);} #main .top .top-interview .swiper-button-iv-next::after {content: "";margin: auto;position: absolute;top: 0;bottom: 0;left: 27px;width: 11px;height: 2px;background: #fff;} #main .top .top-interview .swiper-button-iv-prev::before {content: "";margin: auto;position: absolute;top: 0;bottom: 0;left: calc(50% - 4px);width: 8px;height: 8px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(-135deg);} #main .top .top-interview .swiper-button-iv-prev::after {content: "";margin: auto;position: absolute;top: 0;bottom: 0;right: 27px;width: 11px;height: 2px;background: #fff;} #main .top .top-interview .swiper-button-iv-next::before {border-top: 2px solid #0571c8;border-right: 2px solid #0571c8;} #main .top .top-interview .swiper-button-iv-next::after {background: #0571c8;} #main .top .top-interview .swiper-button-iv-prev::before {border-top: 2px solid #0571c8;border-right: 2px solid #0571c8;} #main .top .top-interview .swiper-button-iv-prev::after {background: #0571c8;} /* スライダー */ #main .top .top-interview .swiper-container{overflow: visible;} #main .top .top-interview .slide-interview__block{overflow: visible;} #main .top .top-interview .swiper-slide > a{display: block;} #main .top .top-interview .swiper-slide__txt{opacity: 0; transition: all .2s ease;letter-spacing: 0.08em;} #main .top .top-interview .swiper-slider__img--wrap{position: relative;border-radius: 5px; overflow: hidden; padding-top:calc((265/440) * 100%);} #main .top .top-interview .swiper-slider__img--wrap > div{position: absolute;left: 50%;top: 0;transform: translateX(-50%);overflow: hidden;transition: width .5s cubic-bezier(.31,.71,.29,1);} #main .top .top-interview .swiper-slider__img--wrap > div::before{content: ''; width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; opacity: 0; background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 50%);z-index: 1;} #main .top .top-interview .swiper-slider__img--wrap img{width: 100%;height: auto;} #main .top .top-interview .swiper-slider__img--wrap .swiper-slide__label{display: none;position: absolute;z-index: 2;width: 100%;} /* active */ #main .top .top-interview .swiper-slide.swiper-slide-active:hover .swiper-slider__img--wrap > div::before, #main .top .top-interview .swiper-slide.swiper-slide-active .swiper-slider__img--wrap > div::before{opacity: 1;} #main .top .top-interview .swiper-slide.swiper-slide-active .swiper-slide__txt{opacity: 1;} #main .top .top-interview .swiper-slide.swiper-slide-active .swiper-slide__label{display: block;} /* PC */ @media print,screen and (min-width:768px){ /* 進む戻るボタン */ #main .top .top-interview .swiper-button-iv-prev, #main .top .top-interview .swiper-button-iv-next{transition: filter .2s ease;} #main .top .top-interview .swiper-button-iv-prev:hover, #main .top .top-interview .swiper-button-iv-next:hover{filter: brightness(1.3);} /* スライダー */ #main .top .top-interview .swiper-container{width: 290px; margin: 0 auto;transform: translateX(-100px);height: 395px;} #main .top .top-interview .swiper-slide{width: 270px; padding: 0 10px;} #main .top .top-interview .swiper-slider__img--wrap > div{width: 270px;} #main .top .top-interview .swiper-slide .swiper-slide__txt{margin-top: 23px; color: #fff; font-weight: 400; line-height: calc(30/18);filter: drop-shadow(0 0 20px rgba(0,0,0,.8));} #main .top .top-interview .swiper-slider__img--wrap .swiper-slide__label{left: 0;bottom: 25px; padding-left: 27px; color: #fff;font-size: 0.938rem; line-height: 1; letter-spacing: .1em; filter: drop-shadow(0 0 20px rgba(0,0,0,.8));} /* active */ #main .top .top-interview .swiper-slide.swiper-slide-active{width: 500px!important;padding: 0 30px;} #main .top .top-interview .swiper-slide.swiper-slide-active .swiper-slider__img--wrap > div{width: 440px;} #main .top .top-interview .swiper-slide.swiper-slide-active .swiper-slide__txt{font-size: 1.125rem;} } /* SP */ @media print,screen and (max-width:767px){ #main .top .top-interview .top-interview__inner{padding: 50px 0 60px;} #main .top .top-interview .slide-interview__controls{width: 240px;flex-wrap: wrap;margin-top: 40px;} /* ページネーション */ #main .top .top-interview .swiper-pagination-iv{width: 96px;font-size: 0.688rem;} #main .top .top-interview .slide-img .swiper-pagination-iv {position: absolute;right: 0;bottom: auto;left: auto;width: auto;right: 0;} #main .top .top-interview .slide-img .swiper-pagination-iv {font-size: 0.7857em;} #main .top .top-interview .progress-iv {width: 45px;margin-left: 6px;margin-right: 6px;} /* 停止ボタン */ #main .top .top-interview .stopbtn-iv {left: 0;top: 96.5%;bottom: auto;margin-right: 7px;} /* 進む戻るボタン */ #main .top .top-interview .swiper-button-iv-prev, #main .top .top-interview .swiper-button-iv-next{width: 37px; height: 37px;margin: 0;} #main .top .top-interview .swiper-button-iv-prev{margin-right: 15px;} #main .top .top-interview .swiper-button-iv-next{margin-left: 15px;} #main .top .top-interview .swiper-button-iv-prev::before, #main .top .top-interview .swiper-button-iv-next::before{border-top: 1px solid #0571c8;border-right: 1px solid #0571c8;width: 7px;height: 7px;} #main .top .top-interview .swiper-button-iv-prev::after{width: 8px;height: 1px;right: 14px;} #main .top .top-interview .swiper-button-iv-next::after{width: 8px;height: 1px;left: 14px;} /* スライダー */ #main .top .top-interview .slide-interview{margin-top: 25px;} #main .top .top-interview .swiper-container{overflow: visible;width: 220px; margin: 0 auto;transform: translateX(-50px);height: 260px;} #main .top .top-interview .swiper-slide{width: 210px;padding: 0 5px;} #main .top .top-interview .swiper-slide .swiper-slide__txt{margin-top: 23px; color: #fff; font-weight: 400; font-size: 0;line-height: calc(30/18);filter: drop-shadow(0 0 10px rgba(0,0,0,.8));} #main .top .top-interview .swiper-slider__img--wrap > div{width: 210px;} #main .top .top-interview .swiper-slider__img--wrap .swiper-slide__label{left: 18px;bottom: 16px;color: #fff;font-size: 0.688rem; line-height: 1; letter-spacing: .1em; filter: drop-shadow(0 0 10px rgba(0,0,0,.8));} /* active */ #main .top .top-interview .swiper-slide.swiper-slide-active{padding: 0 15px;width: 315px!important;} #main .top .top-interview .swiper-slide.swiper-slide-active .swiper-slider__img--wrap > div{width: 285px;} #main .top .top-interview .swiper-slide.swiper-slide-active .swiper-slide__txt{font-size: 0.875rem;margin-top: 15px;} }