@charset "UTF-8"; /* argument */ @import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap"); .blue { color: #f39700; } .ffRb { font-family: 'Roboto', sans-serif; } /* font style */ /* site style */ /* [ opacity ] -------------------------------------------------*/ /* [ display style ] -------------------------------------------------*/ /* [ background-image ] -------------------------------------------------*/ /* [ writing-mode ] -------------------------------------------------*/ /* [ illustrator & photoshop letter spacing ] -------------------------------------------------*/ /* [ easy breakpoint ] -------------------------------------------------*/ /* [ easy transform ] -------------------------------------------------*/ .imgScale, .img_ef img, .top__bl02__box2 img, .top__bl03__item img, .top__bl04__item img { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition-duration: 4s; transition-duration: 4s; -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform,-webkit-transform; } .imgScaleHv { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .img_ef { position: relative; overflow: hidden; display: block; } .top { -webkit-font-feature-settings: "palt"; -moz-font-feature-settings: "palt"; -ms-font-feature-settings: "palt"; -o-font-feature-settings: "palt"; font-feature-settings: "palt"; } .top.noplay .top__main__video video { opacity: 0; } .top__main { position: relative; height: 100vh; overflow: hidden; } @media (max-width: 896px) and (orientation: landscape), (max-width: 767px) and (orientation: portrait) { .top__main { height: 100vh; } } .top__main:before, .top__main:after { content: ""; position: absolute; left: 0; top: 0; z-index: 1; } @media only screen and (max-width: 767px) { .top__main:before, .top__main:after { display: none; } } .top__main:before { width: 0; height: 0; border-style: solid; border-width: 100vh 380px 0 0; border-color: #f39700 transparent transparent transparent; opacity: 0.9; } .top__main:after { width: 0; height: 0; border-style: solid; border-width: 100vh 0 0 380px; border-color: transparent transparent transparent #ff6600; opacity: 0.58; } .top__main__video { height: 100vh; position: relative; z-index: 0; } @media (min-width: 897px) and (orientation: landscape), (min-width: 768px) and (orientation: portrait) { .top__main__video { background: url("../../img/top/load.jpeg") center/cover no-repeat; } } @media (max-width: 896px) and (orientation: landscape), (max-width: 767px) and (orientation: portrait) { .top__main__video { height: 100vh; } } .top__main__video:before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: #000; opacity: 0.4; z-index: 1; } .top__main__video video { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); right: 0; bottom: 0; } @media (min-width: 897px) and (orientation: landscape), (min-width: 768px) and (orientation: portrait) { .top__main__video video { width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .top__main__video video { width: auto; height: 100%; } } @media only screen and (max-width: 767px) { .top__main__video video { width: 100%; height: 100%; left: 0; top: 0; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; object-fit: cover; } } .top__main__txt { text-align: center; position: absolute; width: 100%; left: 0; top: 50%; margin-top: -67px; } @media only screen and (max-width: 767px) { .top__main__txt { left: 20px; top: 57%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); text-align: left; width: auto; } } .top__main__txt img { width: 398px; margin-bottom: 16px; } @media only screen and (max-width: 767px) { .top__main__txt img { width: 263px; margin-bottom: 10px; } } .top__main__txt .txth1 { font-size: 15px; font-size: 1.5rem; line-height: 26px; letter-spacing: 0.12em; color: #fff; } @media only screen and (max-width: 767px) { .top__main__txt .txth1 { font-weight: bold; line-height: 28px; letter-spacing: 0.22em; } } @keyframes arrow_down { 0% { height: 70px; } 100% { height: 0; } } @keyframes arrow_down_sp { 0% { height: 70px; } 100% { height: 0; } } .top__main .ar_scroll { position: absolute; bottom: 0; z-index: 3; left: 70px; display: inline-block; padding-bottom: 80px; visibility: hidden; } @media only screen and (max-width: 767px) { .top__main .ar_scroll { bottom: 0; height: 70px; } } .top__main .ar_scroll:before { content: ""; width: 1px; height: 70px; position: absolute; top: 115px; left: 50%; background: #fff; animation-name: arrow_down; animation-duration: 1.7s; animation-timing-function: ease-in; animation-iteration-count: infinite; animation-direction: reverse; } @media only screen and (max-width: 767px) { .top__main .ar_scroll:before { animation-name: arrow_down_sp; height: 70px; } } .top__main__news { position: absolute; right: 0; bottom: 0; background: #fff; padding: 28px; width: 50%; color: #f39700; } .top__main__news:before, .top__main__news:after { content: " "; display: table; } .top__main__news:after { clear: both; } @media only screen and (max-width: 767px) { .top__main__news { width: auto; left: 20px; background: #f39700; color: #fff; padding: 10px 20px; } } .top__main__news__title { font-size: 18px; font-size: 1.8rem; letter-spacing: 0.14em; font-weight: bold; font-family: "Roboto", sans-serif; position: relative; padding-right: 18px; float: left; width: 95px; } @media only screen and (max-width: 767px) { .top__main__news__title { font-size: 16px; font-size: 1.6rem; line-height: 28px; letter-spacing: 0.08em; width: 70px; padding: 14px 0; padding-right: 10px; } } .top__main__news__title:after { content: ""; width: 1px; height: 15px; background: #BACCE4; position: absolute; right: 15px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } @media only screen and (max-width: 767px) { .top__main__news__title:after { right: 10px; height: auto; top: 4px; bottom: 4px; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } .top__main__news ul { float: left; width: calc(100% - 95px); } @media only screen and (max-width: 767px) { .top__main__news ul { width: calc(100% - 70px); } } .top__main__news ul li { display: block; margin-right: 2px; } .top__main__news ul li a { display: block; color: #f39700; padding-right: 30px; position: relative; background: url("../../img/common/ar_orange.svg") right center no-repeat; background-size: 18px; color: #f39700; } .top__main__news ul li a:before, .top__main__news ul li a:after { content: " "; display: table; } .top__main__news ul li a:after { clear: both; } @media only screen and (max-width: 767px) { .top__main__news ul li a { background: none; padding: 0; color: #fff; } } .top__main__news ul li a span { display: block; vertical-align: bottom; } .top__main__news ul li a .txtDate { font-size: 15px; font-size: 1.5rem; line-height: 26px; letter-spacing: 0.02em; font-family: "Roboto", sans-serif; padding-right: 15px; float: left; width: 100px; position: relative; top: 2px; } @media only screen and (max-width: 767px) { .top__main__news ul li a .txtDate { font-size: 11px; font-size: 1.1rem; line-height: 19px; padding-right: 0; float: none; width: 100%; top: 0; } } .top__main__news ul li a .txtTitle { font-weight: bold; font-size: 16px; font-size: 1.6rem; line-height: 26px; letter-spacing: 0.02em; display: block; width: calc(100% - 100px); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } @media only screen and (max-width: 767px) { .top__main__news ul li a .txtTitle { font-size: 16px; font-size: 1.6rem; line-height: 19px; letter-spacing: 0.02em; width: 100%; white-space: normal; position: relative; overflow: hidden; position: relative; line-height: 19px; max-height: 38px; text-align: justify; margin-right: -1.15em; padding-right: 1.15em; } .top__main__news ul li a .txtTitle:before { content: '…'; position: absolute; right: 0; bottom: 0; } .top__main__news ul li a .txtTitle:after { content: ''; position: absolute; right: 0; width: 1.15em; height: 1em; margin-top: 0.2em; background: #f39700; } } @media only screen and (max-width: 767px) and (-ms-high-contrast: active), only screen and (max-width: 767px) and (-ms-high-contrast: none) { .top__main__news ul li a .txtTitle { text-justify: inter-cluster; } } .top__main__news__single { float: left; width: calc(100% - 95px); } @media only screen and (max-width: 767px) { .top__main__news__single { width: calc(100% - 70px); } } .top__main__news__single a { display: block; color: #f39700; padding-right: 30px; position: relative; background: url("../../img/common/ar_orange.svg") right center no-repeat; background-size: 18px; } .top__main__news__single a:before, .top__main__news__single a:after { content: " "; display: table; } .top__main__news__single a:after { clear: both; } @media only screen and (max-width: 767px) { .top__main__news__single a { background: none; padding: 0; color: #fff; } } .top__main__news__single a span { display: block; vertical-align: bottom; } .top__main__news__single a .txtDate { font-size: 15px; font-size: 1.5rem; line-height: 26px; letter-spacing: 0.02em; font-family: "Roboto", sans-serif; padding-right: 0; float: none; width: 100%; display: block; margin-bottom: 5px; } @media only screen and (max-width: 767px) { .top__main__news__single a .txtDate { font-size: 11px; font-size: 1.1rem; line-height: 19px; padding-right: 0; float: none; width: 100%; top: 0; } } .top__main__news__single a .txtTitle { font-weight: bold; font-size: 16px; font-size: 1.6rem; line-height: 26px; letter-spacing: 0.02em; display: block; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; float: none; } @media only screen and (max-width: 767px) { .top__main__news__single a .txtTitle { font-size: 16px; font-size: 1.6rem; line-height: 19px; letter-spacing: 0.02em; width: 100%; white-space: normal; position: relative; overflow: hidden; line-height: 19px; max-height: 38px; text-align: justify; margin-right: -1.15em; padding-right: 1.15em; } .top__main__news__single a .txtTitle:before { content: '…'; position: absolute; right: 0; bottom: 0; } .top__main__news__single a .txtTitle:after { content: ''; position: absolute; right: 0; width: 1.15em; height: 1em; margin-top: 0.2em; background: #f39700; } } .top__main.animated:before, .top__main.animated:after, .top__main.animated .top__main__txt, .top__main.animated .ar_scroll { visibility: visible; -webkit-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-duration: 1s; animation-duration: 1s; } .top__main.animated .top__main__news { visibility: visible; -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-duration: 1s; animation-duration: 1s; } .top__bl01 { position: relative; padding: 111px 0 120px; text-align: center; } @media only screen and (max-width: 767px) { .top__bl01 { padding: 75px 0 86px; } } .top__bl01:after { background: #F7F7F7; content: ""; width: 0%; position: absolute; right: 0; top: 0; bottom: 0; z-index: -1; } @media only screen and (max-width: 767px) { .top__bl01:after { background: url("../../img/top/bg_01.png") center bottom/100% no-repeat; width: 100%; } } .top__bl01__title { margin-bottom: 44px; } @media only screen and (max-width: 767px) { .top__bl01__title { margin-bottom: 40px; padding: 0 20px; } } .top__bl01__title .txtEn { font-size: 27px; font-size: 2.7rem; line-height: 47px; letter-spacing: 0em; font-family: "Roboto", sans-serif; font-weight: 100; display: block; margin-bottom: 5px; } @media only screen and (max-width: 767px) { .top__bl01__title .txtEn { font-size: 24px; font-size: 2.4rem; line-height: 42px; letter-spacing: 0.02em; } } .top__bl01__title .txtTitle { font-size: 40px; font-size: 4.0rem; line-height: 75px; letter-spacing: 0em; font-weight: 500; margin-bottom: 11px; } @media only screen and (max-width: 767px) { .top__bl01__title .txtTitle { font-size: 31px; font-size: 3.1rem; line-height: 40px; letter-spacing: 0em; margin-bottom: 18px; } } .top__bl01__title .txtSub { font-size: 16px; font-size: 1.6rem; line-height: 26px; letter-spacing: 0.12em; } @media only screen and (max-width: 767px) { .top__bl01__title .txtSub { font-size: 15px; font-size: 1.5rem; line-height: 26px; letter-spacing: 0em; } } @media only screen and (max-width: 320px) { .top__bl01__title .txtSub { font-size: 12px; font-size: 1.2rem; } } @media only screen and (max-width: 767px) { .top__bl01 .container { padding: 0; } } .top__bl01__list { margin: 0 -16px 57px; } .top__bl01__list:before, .top__bl01__list:after { content: " "; display: table; } .top__bl01__list:after { clear: both; } @media only screen and (min-width: 768px) { .top__bl01__list { display: block; width: auto; } } @media only screen and (max-width: 767px) { .top__bl01__list { margin: 0 0 55px; } .top__bl01__list.owl-carousel .owl-dots .owl-dot { width: 10px; height: 10px; margin: 0 8px; } .top__bl01__list.owl-carousel .owl-dots .owl-dot.active { width: 10px; height: 10px; } } .top__bl01__item { float: left; width: 25%; padding: 0 16px; position: relative; visibility: hidden; } .top__bl01__item.animated { visibility: visible; -webkit-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-duration: 1s; animation-duration: 1s; } .top__bl01__item.it2 { animation-delay: 0.2s; -webkit-animation-duration: 1.3s; animation-duration: 1.3s; } .top__bl01__item.it3 { animation-delay: 0.6s; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; } .top__bl01__item.it4 { animation-delay: 0.9s; -webkit-animation-duration: 1.7s; animation-duration: 1.7s; } .top__bl01__item.it5 { animation-delay: 1.2s; -webkit-animation-duration: 1.9s; animation-duration: 1.9s; } @media only screen and (max-width: 767px) { .top__bl01__item { width: 100%; } } .top__bl01__item__title { font-size: 14px; font-size: 1.4rem; line-height: 20px; letter-spacing: 0.04em; font-weight: bold; } @media only screen and (max-width: 767px) { .top__bl01__item__title { font-size: 17px; font-size: 1.7rem; line-height: 23px; letter-spacing: 0.12em; } } .top__bl01__item__en { font-size: 30px; font-size: 3rem; line-height: 52px; letter-spacing: 0.02em; font-weight: 100; font-family: "Roboto", sans-serif; display: block; } @media only screen and (max-width: 767px) { .top__bl01__item__en { font-size: 36px; font-size: 3.6rem; } } .top__bl01__btn { text-align: center; } .top__bl02 { position: relative; overflow: hidden; } .top__bl02:before, .top__bl02:after { content: ""; position: absolute; top: 0; left: 0; width: 43.5%; height: 100%; opacity: 0.14; z-index: -1; } @media only screen and (max-width: 767px) { .top__bl02:before, .top__bl02:after { width: 100%; } } .top__bl02:before { background: url("../../img/top/bg_before.svg") bottom right no-repeat; background-size: cover; } .top__bl02:after { background: url("../../img/top/bg_after.svg") top right no-repeat; background-size: cover; } .top__bl02__inner { position: relative; padding: 112px 0; } @media only screen and (max-width: 767px) { .top__bl02__inner { padding: 85px 0 88px; } } .top__bl02__inner:before { content: ""; position: absolute; right: 0; bottom: 0; width: 290px; height: 56%; z-index: -1; background: url("../../img/top/bg_after2.svg") top/cover no-repeat; } @media only screen and (max-width: 767px) { .top__bl02__inner:before { display: none; } } @media only screen and (min-width: 768px) { .top__bl02__inner .title_cm { margin-bottom: 10px; } .top__bl02__inner .title_cm__jp { position: relative; top: -3px; } } .top__bl02 .txtSub { font-size: 15px; font-size: 1.5rem; line-height: 27px; letter-spacing: 0.08em; font-weight: 500; text-align: center; margin-bottom: 50px; } @media only screen and (max-width: 767px) { .top__bl02 .txtSub { line-height: 26px; text-align: left; letter-spacing: 0; margin-bottom: 18px; } } .top__bl02__box1 { margin: 0 -10px 35px; } .top__bl02__box1:before, .top__bl02__box1:after { content: " "; display: table; } .top__bl02__box1:after { clear: both; } @media only screen and (max-width: 767px) { .top__bl02__box1 { margin: 0 -5px 18px; } } .top__bl02__box1__item { text-align: center; padding: 0 10px 20px; width: 25%; float: left; visibility: hidden; } .top__bl02__box1__item.animated { visibility: visible; -webkit-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-duration: 1s; animation-duration: 1s; } .top__bl02__box1__item.it2 { animation-delay: 0.3s; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; } .top__bl02__box1__item.it3 { animation-delay: 0.5s; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; } .top__bl02__box1__item.it4 { animation-delay: 0.7s; -webkit-animation-duration: 1.4s; animation-duration: 1.4s; } .top__bl02__box1__item.it5 { animation-delay: 0.9s; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; } .top__bl02__box1__item.it6 { animation-delay: 1.1s; -webkit-animation-duration: 1.6s; animation-duration: 1.6s; } .top__bl02__box1__item.it7 { animation-delay: 1.3s; -webkit-animation-duration: 1.7s; animation-duration: 1.7s; } .top__bl02__box1__item.it8 { animation-delay: 1.5s; -webkit-animation-duration: 1.9s; animation-duration: 1.9s; } .top__bl02__box1__item.it9 { animation-delay: 1.6s; -webkit-animation-duration: 2s; animation-duration: 2s; } @media only screen and (max-width: 767px) { .top__bl02__box1__item.it9 .txtTitle { font-size: 11px; font-size: 1.1rem; } } @media only screen and (max-width: 767px) { .top__bl02__box1__item { width: 33.333%; padding: 0 5px 10px; } } .top__bl02__box1__inner { border: 2px dotted #E1E9F3; background: #fff; padding: 46px 15px 30px; } @media only screen and (max-width: 767px) { .top__bl02__box1__inner { border-width: 2px; padding: 20px 3px 10px; border-radius: 3px; } } .top__bl02__box1__img { margin-bottom: 26px; position: relative; display: table; width: 100%; } @media only screen and (max-width: 767px) { .top__bl02__box1__img { margin-bottom: 5px; } } .top__bl02__box1__img .imgInner { display: table-cell; vertical-align: middle; } @media only screen and (max-width: 767px) { .top__bl02__box1__img .ico_car { max-width: 58px; } .top__bl02__box1__img .ico_fly { max-width: 60px; } .top__bl02__box1__img .ico_cel { max-width: 21px; } .top__bl02__box1__img .ico_book { max-width: 25px; } .top__bl02__box1__img .ico_more { max-width: 15px; } .top__bl02__box1__img .ico_01 { max-width: 33px; } .top__bl02__box1__img .ico_02 { max-width: 36px; } .top__bl02__box1__img .ico_03 { max-width: 21px; } .top__bl02__box1__img .ico_04 { max-width: 36px; } .top__bl02__box1__img .ico_06 { max-width: 23px; } .top__bl02__box1__img .ico_07 { max-width: 48px; } } .top__bl02__box1 .txtTitle { display: block; font-size: 18px; font-size: 1.8rem; letter-spacing: 0.14em; color: #f39700; } @media only screen and (max-width: 767px) { .top__bl02__box1 .txtTitle { font-size: 16px; font-size: 1.6rem; line-height: 21px; letter-spacing: 0.04em; } } @media only screen and (max-width: 767px) { .top__bl02 .pddsp { padding: 0; margin-left: -25px; max-width: none; } } .top__bl02__box2 { margin: 0 0 88px; padding: 0 35%; } .top__bl02__box2:before, .top__bl02__box2:after { content: " "; display: table; } .top__bl02__box2:after { clear: both; } @media only screen and (min-width: 768px) { .top__bl02__box2 { display: block; width: auto; } } .top__bl02__box2 .owl-stage-outer { overflow: visible; } @media only screen and (max-width: 767px) { .top__bl02__box2 { margin: 0 0 88px; padding: 0; padding-right: 45%; } } .top__bl02__box2.owl-carousel .owl-dots { bottom: -50px; right: -15px; } .top__bl02__box2__item { float: left; width: 100%; padding: 0 22px; } @media only screen and (max-width: 767px) { .top__bl02__box2__item { width: 100%; padding: 0; border-right: 1px solid #E5E5E5; padding: 0 15px; } } .top__bl02__box2__img { display: block; margin-bottom: 25px; position: relative; overflow: hidden; } @media only screen and (max-width: 767px) { .top__bl02__box2__img { margin-bottom: 10px; } } .top__bl02__box2 img { width: 100%; border-radius: 2px; } @media only screen and (max-width: 767px) { .top__bl02__box2 img { border-radius: 0; } } .top__bl02__box2 a { display: block; line-height: 0; position: relative; } @media only screen and (min-width: 768px) { .top__bl02__box2 a { opacity: 1; } .top__bl02__box2 a:hover .imagetb { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } } .top__bl02__box2 .meta { display: block; margin-top: 15px; padding-left: 2px; } .top__bl02__box2 .txtCate { display: inline-block; vertical-align: middle; font-size: 10px; font-size: 1rem; line-height: 20px; letter-spacing: 0.05em; font-weight: bold; color: #fff; background: #f39700; padding: 0 18px; margin-right: 0; margin-bottom: 5px; } @media only screen and (max-width: 767px) { .top__bl02__box2 .txtCate { font-size: 11px; font-size: 1.1rem; line-height: 14px; letter-spacing: 0; padding: 3px 6px; margin-bottom: 5px; min-width: 0; text-align: center; } .top__bl02__box2 .txtCate:not(.txtcateFirst) { background: none; color: #f39700; padding: 0; font-size: 10px; font-size: 1rem; line-height: 12px; display: none; min-width: 0; } } .top__bl02__box2 .txtCatesp { color: #f39700; padding: 0; font-size: 10px; font-size: 1rem; line-height: 12px; font-weight: bold; display: inline-block; margin-top: 3px; } .top__bl02__box2 .txtTitle { font-size: 18px; font-size: 1.8rem; line-height: 28px; letter-spacing: 0.02em; font-weight: bold; margin-bottom: 10px; display: block; } @media only screen and (max-width: 767px) { .top__bl02__box2 .txtTitle { font-size: 17px; font-size: 1.7rem; line-height: 26px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } } .top__bl02__box2 .txtDes { font-size: 14px; font-size: 1.4rem; line-height: 26px; letter-spacing: 0.02em; font-weight: 500; color: #4D4D4D; } .top__bl03 { padding: 118px 70px 125px; background: #F7F7F7; position: relative; overflow: hidden; } @media only screen and (max-width: 767px) { .top__bl03 { padding: 70px 0; background: #fff; } } .top__bl03:before { content: ""; width: 1px; height: 360px; background: #808080; position: absolute; left: 255px; top: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); transform-origin: top; } @media only screen and (max-width: 767px) { .top__bl03:before { height: 155px; left: 109px; } } .top__bl03 .container { max-width: 100%; padding: 0; } .top__bl03 .title_cm { margin-bottom: 40px; } @media only screen and (max-width: 767px) { .top__bl03 .title_cm { margin-bottom: 25px; } .top__bl03 .title_cm__en { font-size: 37px; font-size: 3.7rem; } } .top__bl03__tabTitle { text-align: center; } @media only screen and (max-width: 767px) { .top__bl03__tabTitle { padding: 0 15px; border-bottom: 1px solid #f39700; } .top__bl03__tabTitle:before, .top__bl03__tabTitle:after { content: " "; display: table; } .top__bl03__tabTitle:after { clear: both; } } .top__bl03__tabTitle li { display: inline-block; margin: 0 5px; min-width: 232px; } @media only screen and (max-width: 767px) { .top__bl03__tabTitle li { width: 33.333%; margin: 0; min-width: 0; padding: 0 2px; } } .top__bl03__tabTitle li span { text-align: center; background: #92AFD4; color: #fff; padding: 15px; font-size: 15px; font-size: 1.5rem; line-height: 26px; letter-spacing: 0.02em; font-weight: bold; cursor: pointer; display: block; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } @media only screen and (max-width: 767px) { .top__bl03__tabTitle li span { padding: 10px 8px; font-size: 14px; font-size: 1.4rem; line-height: 18px; letter-spacing: 0em; } } .top__bl03__tabTitle li.active span, .top__bl03__tabTitle li:hover span { background: #f39700; } .top__bl03__contentT { display: none; } .top__bl03__contentT.active { display: block; } .top__bl03__contentT .noBox { text-align: center; padding: 0 0 30px; } .top__bl03__tabContent { background: #fff; margin-bottom: 56px; display: none; } @media only screen and (max-width: 767px) { .top__bl03__tabContent { background: none; margin-left: -30px; margin-bottom: 95px; } } .top__bl03__tabContent.active { display: block; } .top__bl03__inner { width: calc(70% + 140px); padding: 43px 0 10px; margin: 0 auto; } @media only screen and (max-width: 767px) { .top__bl03__inner { padding: 20px 0 0; width: 100%; } } .top__bl03__cate { text-align: center; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; padding-bottom: 35px; margin-bottom: 36px; border-bottom: 1px dotted #E5E5E5; } @media only screen and (max-width: 767px) { .top__bl03__cate { padding: 0 20px 30px; margin-left: 30px; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; justify-content: flex-start; } } .top__bl03__cate li { padding: 0 17px; } @media (max-width: 896px) and (orientation: landscape), (max-width: 767px) and (orientation: portrait) { .top__bl03__cate li { width: 50%; padding: 0; text-align: left; } } .top__bl03__cate li a { font-size: 15px; font-size: 1.5rem; line-height: 26px; letter-spacing: 0.02em; display: block; position: relative; padding-left: 18px; } @media (max-width: 896px) and (orientation: landscape), (max-width: 767px) and (orientation: portrait) { .top__bl03__cate li a { padding-right: 10px; } } @media only screen and (max-width: 350px) { .top__bl03__cate li a { font-size: 16px; font-size: 1.6rem; } } .top__bl03__cate li a:before { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border: 1px solid #000; } .top__bl03__cate li.active a:before { content: ""; background: url("../../img/common/ico_check.svg") left bottom no-repeat; width: 25px; height: 17px; top: 2px; border: none; } .top__bl03__list { margin: 0 -23px; } .top__bl03__list:before, .top__bl03__list:after { content: " "; display: table; } .top__bl03__list:after { clear: both; } @media only screen and (min-width: 768px) { .top__bl03__list { display: block; width: auto; } } @media only screen and (max-width: 767px) { .top__bl03__list { margin: 0; padding-right: 45%; } .top__bl03__list.owl-carousel .owl-dots { bottom: -50px; right: -15px; } .top__bl03__list .owl-stage-outer { overflow: visible; } } .top__bl03__item { float: left; width: 33.333%; padding: 0 23px 53px; } @media only screen and (max-width: 767px) { .top__bl03__item { width: 100%; padding: 0 15px; border-right: 1px solid #E5E5E5; } } .top__bl03__item a { display: block; } @media only screen and (min-width: 768px) { .top__bl03__item a:hover { opacity: 1; } .top__bl03__item a:hover img, .top__bl03__item a:hover .imagetb { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } } .top__bl03__item .img_ef { margin-bottom: 10px; } @media only screen and (max-width: 767px) { .top__bl03__item .img_ef { margin-bottom: 10px; } } .top__bl03__item img { width: 100%; } .top__bl03__item .txtTitle { display: block; font-size: 17px; font-size: 1.7rem; line-height: 30px; letter-spacing: 0.02em; font-weight: 500; font-family: "Roboto", sans-serif; color: #f39700; margin-bottom: 2px; } @media only screen and (max-width: 767px) { .top__bl03__item .txtTitle { font-size: 20px; font-size: 2rem; line-height: 26px; letter-spacing: 0em; margin-bottom: 8px; } } .top__bl03__item .txtCate { font-size: 16px; font-size: 1.6rem; line-height: 18px; letter-spacing: 0.02em; color: #4D4D4D; } @media only screen and (max-width: 767px) { .top__bl03__item .txtCate { letter-spacing: 0.05em; } } .top__bl03__item .txtCate span { display: block; } .top__bl04 { padding: 118px 0 0; position: relative; overflow: hidden; margin-bottom: 65px; } @media only screen and (max-width: 767px) { .top__bl04 { padding: 70px 0 0; background: #F7F7F7; margin-bottom: 0; } } .top__bl04:before { content: ""; width: 1px; height: 360px; background: #808080; position: absolute; left: 0; top: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); left: 255px; transform-origin: top; } @media only screen and (max-width: 767px) { .top__bl04:before { height: 155px; left: 109px; } } .top__bl04 .container { max-width: 100%; padding: 0; } .top__bl04 .title_cm { margin-bottom: 60px; } @media only screen and (max-width: 767px) { .top__bl04 .title_cm { margin: 0 0 35px; } .top__bl04 .title_cm__en { font-size: 37px; font-size: 3.7rem; } } @media only screen and (min-width: 1025px) { .top__bl04__box { margin-left: -90px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .top__bl04__box { margin-left: 0; } } @media only screen and (max-width: 767px) { .top__bl04__box { margin-left: 0; } } .top__bl04__list { padding-right: 60%; position: relative; } @media only screen and (min-width: 1025px) { .top__bl04__list:before { content: ""; width: 70px; height: 100%; position: absolute; top: 0; left: 90px; bottom: 0; background: #fff; z-index: 10; } } @media only screen and (min-width: 1810px) { .top__bl04__list { padding-right: 65%; } } @media only screen and (min-width: 1100px) and (max-width: 1200px) { .top__bl04__list { padding-right: 50%; } } @media only screen and (min-width: 1200px) and (max-width: 1400px) { .top__bl04__list { padding-right: 55%; } } @media only screen and (max-width: 767px) { .top__bl04__list { padding: 0 50px; } } .top__bl04__list.owl-carousel { margin-bottom: 60px; } .top__bl04__list.owl-carousel .owl-dots { bottom: -57px; } @media only screen and (min-width: 1025px) { .top__bl04__list.owl-carousel .owl-dots { padding-left: 70px; } } @media only screen and (min-width: 1025px) { .top__bl04__list.owl-carousel .owl-nav .owl-prev { left: 90px; } } @media only screen and (max-width: 767px) { .top__bl04__list.owl-carousel { padding-bottom: 0; margin-bottom: 108px; } .top__bl04__list.owl-carousel .owl-nav .owl-prev { left: 0; } .top__bl04__list.owl-carousel .owl-dots { bottom: -58px; right: 0; } } .top__bl04__list.owl-carousel .owl-stage-outer { overflow: visible; } .top__bl04__list .owl-stage { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .top__bl04__list .owl-stage .owl-item { border: 1px solid #CCC; background: #fff; } .top__bl04__item { padding: 0 0 20px; width: 100%; } @media only screen and (max-width: 767px) { .top__bl04__item { background: #fff; } } .top__bl04__item a { display: block; } @media only screen and (min-width: 768px) { .top__bl04__item a:hover { opacity: 1; } .top__bl04__item a:hover img, .top__bl04__item a:hover .imagetb { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } } .top__bl04__item .img_ef { margin-bottom: 25px; } .top__bl04__item img { width: 100%; } .top__bl04__item .txtCate { position: absolute; bottom: 0; right: 0; } @media only screen and (max-width: 767px) { .top__bl04__item .txtCate { font-size: 10px; font-size: 1rem; } } .top__bl04__item .txtCate span { font-size: 11px; font-size: 1.1rem; line-height: 24px; letter-spacing: 0.04em; font-weight: bold; color: #fff; display: inline-block; padding: 0 15px; background: rgba(0, 0, 0, 0.7); } .top__bl04__item .txtTitle { font-size: 16px; font-size: 1.6rem; line-height: 25px; letter-spacing: 0.05em; font-weight: bold; padding: 0 20px; margin-bottom: 20px; display: block; } @media only screen and (max-width: 767px) { .top__bl04__item .txtTitle { font-size: 17px; font-size: 1.7rem; line-height: 26px; letter-spacing: 0.02em; margin-bottom: 10px; } } .top__bl04__item .txtDate { text-align: right; display: block; padding: 0 20px; font-size: 16px; font-size: 1.6rem; letter-spacing: 0.02em; } .top__bl04__item .txtDate img { display: inline-block; max-width: 15px; margin-right: 2px; } .top__bl04__item .txtDate span { display: inline-block; vertical-align: middle; color: #4D4D4D; } .top__bl05 { margin-bottom: 130px; } @media only screen and (max-width: 767px) { .top__bl05 { background: #F7F7F7; margin-bottom: 0; padding-bottom: 90px; } } @media only screen and (max-width: 767px) { .top__bl05 .container { padding: 0; } } @media (max-width: 896px) and (orientation: landscape), (max-width: 767px) and (orientation: portrait) { .top__bl05 .boxSelect { position: relative; } } @media only screen and (max-width: 767px) { .top__bl05__title { font-size: 17px; font-size: 1.7rem; line-height: 60px; letter-spacing: 0.08em; font-weight: bold; background: #808080 url("../../img/common/ar_down_w.svg") right 12px center no-repeat; color: #fff; text-align: center; position: relative; margin: 0 20px 20px; } } @media only screen and (max-width: 320px) { .top__bl05__title { font-size: 14px; font-size: 1.4rem; } } .top__bl05__tabTitle { text-align: center; position: relative; border-bottom: 1px solid #f39700; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 38px; } @media only screen and (max-width: 767px) { .top__bl05__tabTitle { margin-bottom: 0; display: none; position: absolute; background: #fff; left: 20px; right: 20px; top: 50px; } } .top__bl05__tabTitle li { display: block; padding: 0 5px; } @media only screen and (max-width: 767px) { .top__bl05__tabTitle li { width: 100%; padding: 0; } } .top__bl05__tabTitle li span { display: block; border: 1px solid #f39700; border-bottom: none; font-size: 16px; font-size: 1.6rem; line-height: 22px; letter-spacing: 0.02em; text-align: center; min-width: 125px; color: #f39700; font-weight: 500; padding: 11px 10px; cursor: pointer; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } @media only screen and (min-width: 768px) and (max-width: 850px) { .top__bl05__tabTitle li span { min-width: 0; } } .top__bl05__tabTitle li.active span { background: #f39700; color: #fff; font-weight: bold; } @media only screen and (min-width: 1025px) { .top__bl05__tabTitle li:hover span { background: #f39700; color: #fff; font-weight: bold; } } .top__bl05__tabContent { display: none; text-align: center; } .top__bl05__tabContent.active { display: block; } .top__bl05__tabContent ul { margin-bottom: 62px; } @media only screen and (max-width: 767px) { .top__bl05__tabContent ul { border-top: 1px solid #E7E9ED; margin-bottom: 36px; } } .top__bl05__tabContent ul li { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #E7E9ED; } @media only screen and (max-width: 767px) { .top__bl05__tabContent ul li { padding: 20px 20px 14px; margin: 0; } } .top__bl05__tabContent ul li a { display: block; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: left; -moz-justify-content: left; -ms-justify-content: left; -o-justify-content: left; justify-content: left; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; background: url("../../img/top/ar_gr.svg") right center no-repeat; } .top__bl05__tabContent ul li a span { display: inline-block; vertical-align: middle; } .top__bl05__tabContent ul li a .txtCate { width: 83px; margin-right: 20px; display: inline-block; text-align: center; } @media only screen and (max-width: 767px) { .top__bl05__tabContent ul li a .txtCate { width: 76px; margin-right: 10px; } } .top__bl05__tabContent ul li a .txtCate span { display: block; font-size: 11px; font-size: 1.1rem; line-height: 20px; letter-spacing: 0.020em; font-weight: 500; background: #f39700; color: #fff; padding: 0 5px; } @media only screen and (max-width: 767px) { .top__bl05__tabContent ul li a .txtCate span { font-size: 10px; font-size: 1rem; } } .top__bl05__tabContent ul li a .txtDate { color: #4D4D4D; font-size: 15px; font-size: 1.5rem; line-height: 26px; letter-spacing: 0.02em; display: inline-block; margin-right: 20px; } @media only screen and (max-width: 767px) { .top__bl05__tabContent ul li a .txtDate { font-size: 12px; font-size: 1.2rem; line-height: 21px; margin-right: 0; } } .top__bl05__tabContent ul li a .txtTitle { font-size: 15px; font-size: 1.5rem; line-height: 26px; letter-spacing: 0.02em; font-weight: bold; } @media (min-width: 897px) and (orientation: landscape), (min-width: 768px) and (orientation: portrait) { .top__bl05__tabContent ul li a .txtTitle { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: calc(100% - 250px); } } @media only screen and (max-width: 767px) { .top__bl05__tabContent ul li a .txtTitle { display: block; width: 100%; padding-right: 15px; margin-top: 5px; text-align: left; } } @media only screen and (min-width: 768px) { .top__bl05__tabContent ul li a:hover { opacity: 1; } .top__bl05__tabContent ul li a:hover .txtTitle { text-decoration: underline; } } .top__bl05 .top__bl01__btn { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; margin-top: 38px; } @media only screen and (max-width: 767px) { .top__bl05 .top__bl01__btn { padding: 0 20px; margin-top: 20px; } } .top__bl05 .top__bl01__btn a { max-width: 246px; margin: 0 16px; } @media only screen and (max-width: 767px) { .top__bl05 .top__bl01__btn a { max-width: 296px; margin: 0 0 10px; } .top__bl05 .top__bl01__btn a:last-child { margin-bottom: 0; } } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .top__main__news ul li a { background-size: 20px; } .top__bl02__box2 .txtCate { padding-top: 2px; } .top__bl04__item .txtCate { padding-top: 3px; } .top__bl05__tabContent ul li a .txtCate span { padding-top: 4px; } } /*# sourceMappingURL=maps/top.min.css.map */ /* ▼白帯ヘッダーを最初から表示させる強制CSS */ header.header { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; top: 0 !important; pointer-events: auto !important; } /* =================================================================== NEWS CATEGORIES SECTION - Added 2025-11-13 4-column grid displaying Press Releases, Topics, Exhibition, Seminar =================================================================== */ .top__news__categories { padding: 60px 0; background: #f5f5f5; } @media only screen and (max-width: 767px) { .top__news__categories { padding: 40px 0; } } .top__news__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; } /* Old: 4 columns on desktop */ /* .top__news__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } */ @media only screen and (max-width: 1024px) { .top__news__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media only screen and (max-width: 767px) { .top__news__grid { grid-template-columns: 1fr; gap: 30px; } } .top__news__column { background: #fff; padding: 30px 20px; border-radius: 8px; } .top__news__column__title { margin-bottom: 20px; border-bottom: 2px solid #f39700; padding-bottom: 15px; } .top__news__column__title .en { display: block; font-family: "Roboto", sans-serif; font-size: 20px; font-size: 2rem; font-weight: bold; color: #f39700; margin-bottom: 5px; } .top__news__column__title .ja { display: block; font-size: 14px; font-size: 1.4rem; color: #4D4D4D; } .top__news__list { list-style: none; margin: 0; padding: 0; } .top__news__list li { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #e0e0e0; } .top__news__list li:last-child { margin-bottom: 0; border-bottom: none; padding-bottom: 0; } .top__news__list li a { display: block; text-decoration: none; color: #4D4D4D; transition: opacity 0.3s; } .top__news__list li a:hover { opacity: 0.7; } .top__news__list li a .date { display: block; font-family: "Roboto", sans-serif; font-size: 12px; font-size: 1.2rem; color: #999; margin-bottom: 5px; } .top__news__list li a .title { display: block; font-size: 14px; font-size: 1.4rem; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .top__news__view-all { display: inline-block; margin-top: 20px; padding: 10px 30px; background: #fff; border: 2px solid #f39700; border-radius: 30px; color: #f39700; font-size: 14px; font-size: 1.4rem; font-weight: bold; text-decoration: none; text-align: center; transition: all 0.3s; } .top__news__view-all:hover { background: #f39700; color: #fff; } /* ========================================================= TOPヒーロー動画：PC/タブレット & スマホ 最終統一設定 置き場所：top.min.css の末尾（既存 .top__main__video の後） ========================================================= */ /* ---------- PC/タブレット：100vhヒーローを全面フィット（cover） ---------- */ /* 既存の高さ100vh設計を維持しつつ、videoを全面に安定配置します */ @media (min-width: 897px) and (orientation: landscape), (min-width: 768px) and (orientation: portrait) { .top__main__video { position: relative; height: 100vh; /* 既存設計を維持 */ overflow: hidden; } .top__main__video video { position: absolute; inset: 0; /* 上下左右0で枠いっぱい */ width: 100%; height: 100%; object-fit: cover; /* 全面表示（上下左右のトリミング許容） */ /* object-fit: contain; にすると欠けない代わりに余白が出る */ -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; left: auto; top: auto; } } /* ========================================================= TOPヒーロー動画：PC/タブレット & スマホ 統一パッチ 置き場所：top.min.css の末尾（既存 .top__main / .top__main__video より後） ========================================================= */ /* ---------- PC/タブレット：16:9 を維持しつつ、常に幅にフィット（トリミングなし） ---------- */ /* 768px 以上は 16:9 の枠を作り、video を中で contain させて比率維持＋幅に合わせる */ @media (min-width: 768px) { .top__main__video { position: relative; aspect-ratio: 16 / 9; /* ← PC/タブレットは 16:9 を固定（必要なら他比率に変更可） */ height: auto; /* 比率が高さを決める */ max-height: 100vh; /* 画面より高くなりすぎない保護（任意） */ overflow: hidden; margin: 0; /* 余計な隙間が出ないように念のため */ } .top__main__video video { position: absolute; inset: 0; /* 上下左右0で枠いっぱい（containでも枠いっぱいの領域を使える） */ width: 100%; height: 100%; object-fit: contain; /* ← トリミングせずに比率維持で幅にフィット（黒帯が出てもOKならこれ） */ /* object-fit: cover; ← 幅・高さとも枠いっぱいにしたい（トリミング許容）ならこちらへ変更 */ -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; left: auto; top: auto; } } /* ========================================================= PC：三角形が出ない＆幅を狭めた時の下側余白を同時に解消するパッチ 置き場所：top.min.css の末尾（既存ルールの後勝ちで適用） ========================================================= */ /* 1) PCのとき、ヒーロー全体(.top__main)の高さを動画枠の高さに合わせる → 下側の白余白を解消 */ @media (min-width: 768px) { .top__main { height: auto !important; /* 既存の 100vh を上書きして、動画に追従 */ position: relative; overflow: hidden; /* 念のため、はみ出し防止 */ margin: 0; padding: 0; background: transparent; /* 余白が見えないように保護（任意） */ } } /* 4) 768–1024px 帯に残っている旧ルール（width:auto; height:100%）を後勝ちで統一上書き */ @media only screen and (min-width: 768px) and (max-width: 1024px) { .top__main__video video { width: 100% !important; height: 100% !important; object-fit: cover !important; } } /* 5) ヒーローテキスト等を三角より前面に出したい場合は z-index を 4+ に（必要時のみ） */ /* .top__main__txt { position: relative; z-index: 4; } */ /* ========================================================= スマホの見え方の強制リセット（以前の“完璧”状態を後勝ちで再適用） ========================================================= */ @media only screen and (max-width: 767px) { .top__main { height: auto !important; /* SPは比率優先で高さ自動 */ position: relative; overflow: hidden; margin: 0; padding: 0; } /* SPでは三角形は非表示（元の仕様に合わせる） */ .top__main::before, .top__main::after { display: none !important; content: "" !important; /* 念のため */ } .top__main__video { position: relative; aspect-ratio: 9 / 16; /* SPは 720x1280 (9:16) を維持 */ height: auto; max-height: 100vh; overflow: hidden; } .top__main__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* ヒーロー用途は空白を出さない cover */ transform: none; left: auto; top: auto; display: block; } /* もし過去に .tri-set を入れていた場合はSPでは無効化 */ .top__main__video .tri-set { display: none !important; } } /* ========================================================= タブレット帯（768–1024px）での旧ルール“width:auto; height:100%”を後勝ちで無効化 ========================================================= */ @media only screen and (min-width: 768px) and (max-width: 1024px) { .top__main__video video { width: 100% !important; height: 100% !important; object-fit: cover !important; } } 　 /* 0) 端末共通で、ブラウザデフォルト余白をゼロに */ html, body { margin: 0 !important; padding: 0 !important; } /* 1) ヘッダーは前面で固定・上位置を明示 */ header.header { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 1000 !important; } /* 2) SPの上余白を完全に打ち消す */ @media only screen and (max-width: 767px) { body { padding-top: 0 !important; } } /* 3) ヒーロー領域を“背景化せず”先頭に配置（ズレ無） */ .top__main { position: relative !important; /* fixedは使わない */ margin: 0 !important; padding: 0 !important; width: 100% !important; height: auto !important; z-index: 0 !important; overflow: hidden !important; } /* 4) 動画枠はページ左上からぴったり（親枠いっぱい） */ .top__main__video { position: relative !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* 5)