@charset "utf-8"; .c-video-fv { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); tap-highlight-color: rgba(0, 0, 0, 0); position: relative; width: 100%; color: white; background: #005eb8; overflow: hidden; } .c-video-fv:before { content: ""; display: block; padding-top: 41.46025%; padding-top: calc( 530/1280 * 100%); } @media only screen and (max-width: 768px) { .c-video-fv:before { padding-top: 66.6666%; padding-top: calc( 500/750 * 100%); } } .c-video-fv.is-preload { transition: none !important; } .c-video-fv img { vertical-align: middle; } .c-video-fv__wrap, .c-video-fv__link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .c-video-fv__wrap.is-black-bg { background: #000; } .c-video-fv__single, .c-video-fv__mv-wrap { width: 100%; height: 100%; position: absolute; } .c-video-fv__single { opacity: 0; cursor: pointer; background-size: cover; } .c-video-fv__single.is-active { opacity: 1; } .c-video-fv__single.is-active .c-video-fv__link { pointer-events: auto; } .c-video-fv__single.is-transition-left { transition: left 0.5s !important; } .c-video-fv__single.is-playing { z-index: 1; } .c-video-fv__single--visible { opacity: 1; } .c-video-fv__link { pointer-events: none; cursor: pointer; z-index: 3; } .c-video-fv__mv-bg { z-index: 1; transition: background 0.5s; position: absolute; width: 100%; height: 100%; } .c-video-fv__mv-wrap { z-index: 0; display: block; } .c-video-fv__mv-wrap.is-hide { opacity: 0; } .c-video-fv__mv-wrap video { width: 100%; height: 100%; object-fit:cover; opacity: 0; } .c-video-fv__mv-wrap video::-webkit-media-controls { display:none !important; } .c-video-fv__mv-wrap video::-webkit-media-controls, .c-video-fv__mv-wrap video::-webkit-media-controls-start-playback-button, .c-video-fv__mv-wrap video::-webkit-media-controls-play-button, .c-video-fv__mv-wrap video::-webkit-media-controls-panel, .c-video-fv__mv-wrap video::-webkit-media-controls-container, .c-video-fv__mv-wrap video::-webkit-media-controls-overlay-play-button, .c-video-fv__mv-wrap video::-webkit-media-controls-enclosure { display: none !important; -webkit-appearance: none; opacity: 0 !important; } .c-video-fv__mv-wrap video.is-active { opacity: 1; } .c-video-fv__mv-wrap video.is-no-transition { transition: opacity 0s !important; } .c-video-fv__mv-wrap--visible video { opacity: 1; } .c-video-fv--sensory-analysis { color: #333333; } .c-video-slider { position: absolute; left: 50%; bottom: 80px; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); display: -webkit-flex; display: flex; padding: 10px 0; z-index: 3; cursor: pointer; } @media only screen and (max-width: 768px) { .c-video-slider { padding: 20px 0; bottom: 4px; cursor: auto; } } .c-video-slider__bg { width: 80px; height: 3px; background: rgba(255, 255, 255, 0.3); overflow: hidden; position: relative; z-index: 4; transition: height 0.2s, margin 0.2s; } @media only screen and (max-width: 768px) { .c-video-slider__bg { width: 40px; } } .c-video-slider__bg:not(:first-child) { margin-left: 16px; } .c-video-slider__bg.is-hover { height: 5px; margin-top: -2px; margin-bottom: -2px; } @media only screen and (max-width: 768px) { .c-video-slider__bg.is-hover { height: 1px; margin-top: 0; margin-bottom: 0; } } .c-video-slider__bg.is-hover .c-video-slider__shader, .c-video-slider__bg.is-hover .c-video-slider__loader { height: 5px; } @media only screen and (max-width: 768px) { .c-video-slider__bg.is-hover .c-video-slider__shader, .c-video-slider__bg.is-hover .c-video-slider__loader { height: 1px; } } .c-video-slider__shader { position: absolute; top: 0; left: 0; width: 0px; height: 3px; background: #ffffff; opacity: 0; transition: opacity 0.5s, height 0.2s, margin 0.2s; } .c-video-slider__shader.is-active { opacity: 1; } .c-video-slider__loader { position: absolute; top: 0; left: 0; transition: opacity 0.5s, width 0s, height 0.2s, margin 0.2s; width: 10px; height: 1px; opacity: 0; background: #fff; left: -10px; } .c-video-slider__loader.is-loading { opacity: 1.0; -webkit-animation: loading 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) infinite; animation: loading 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) infinite; } @-webkit-keyframes loading { 0% { margin-left: 0px; } 100% { margin-left: 110%; } } @keyframes loading { 0% { margin-left: 0px; } 100% { margin-left: 110%; } } .c-video-caption { z-index: 2; display: block; position: absolute; top: 50%; right: 0; left: 0; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } .c-video-caption.is-active .c-video-caption__info-list, .c-video-caption.is-active .c-video-caption__logo-sub-txt, .c-video-caption.is-active .c-video-caption__logo, .c-video-caption.is-active .c-video-caption__preface, .c-video-caption.is-active .c-video-caption__title, .c-video-caption.is-active .c-video-caption__txt, .c-video-caption.is-active .c-video-caption__subtxt { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); } .c-video-caption.is-active .c-video-caption__vm-btn { opacity: 1; } .c-video-caption.is-no-transition .c-video-caption__info-list, .c-video-caption.is-no-transition .c-video-caption__logo-sub-txt, .c-video-caption.is-no-transition .c-video-caption__logo, .c-video-caption.is-no-transition .c-video-caption__preface, .c-video-caption.is-no-transition .c-video-caption__title, .c-video-caption.is-no-transition .c-video-caption__txt, .c-video-caption.is-no-transition .c-video-caption__subtxt, .c-video-caption.is-no-transition .c-video-caption__vm-btn { transition: none; transition-delay: 0s; } .c-video-caption__info-list, .c-video-caption__logo-sub-txt, .c-video-caption__logo, .c-video-caption__preface, .c-video-caption__title, .c-video-caption__txt, .c-video-caption__subtxt { opacity: 0; transition: opacity 1s, -webkit-transform 2s cubic-bezier(0.19, 1, 0.22, 1); transition: transform 2s cubic-bezier(0.19, 1, 0.22, 1), opacity 1s; transition: transform 2s cubic-bezier(0.19, 1, 0.22, 1), opacity 1s, -webkit-transform 2s cubic-bezier(0.19, 1, 0.22, 1); transition-delay: 0.5s; -webkit-transform: translate(-16px, 0); transform: translate(-16px, 0); } .c-video-caption__logo { width: auto; height: 40px; margin-bottom: 8px; } @media only screen and (max-width: 768px) { .c-video-caption__logo { height: 24px; } } .c-video-caption__logo img { height: 100%; width: auto; } .c-video-caption__logo-sub-txt { font-size: 14px; line-height: 1; letter-spacing: 0.04em; margin-bottom: 40px; } @media only screen and (max-width: 768px) { .c-video-caption__logo-sub-txt { margin-bottom: 24px; } } .c-video-caption__preface { font-size: 14px; line-height: 1; letter-spacing: 0.04em; margin-bottom: 24px; } @media only screen and (max-width: 768px) { .c-video-caption__preface { font-size: 12px; line-height: 1; letter-spacing: 0.04em; } } @media only screen and (max-width: 768px) and (max-width: 359px) { .c-video-caption__preface { margin-bottom: 16px; } } .c-video-caption__vm-btn { opacity: 0; transition: opacity 1.0s; transition-delay: 1.2s; } .c-video-caption__title { font-family: "Noto Sans SC",'Source Han Sans CN','arial','microsoft yahei',sans-serif; font-size: 14px; line-height: 14px; letter-spacing: 0.12em; margin-bottom: 32px; } @media only screen and (max-width: 768px) { .c-video-caption__title { font-size: 13px; line-height: 13px; letter-spacing: 0.12em; margin-bottom: 20px; } } .c-video-caption__title span { font-weight: bold; text-shadow: 0 0 9px rgba(0, 0, 0, 0.3); } .c-video-caption__title img { width: auto; height: 96px; -webkit-filter: drop-shadow(0 0 9px rgba(0, 0, 0, 0.3)); filter: drop-shadow(0 0 9px rgba(0, 0, 0, 0.3)); } @media only screen and (max-width: 768px) { .c-video-caption__title img { height: 60px; } } .c-video-caption__title--fooma img { width: auto; height: 40px; -webkit-filter: drop-shadow(0 0 9px rgba(0, 0, 0, 0.3)); filter: drop-shadow(0 0 9px rgba(0, 0, 0, 0.3)); } @media only screen and (max-width: 768px) { .c-video-caption__title--fooma img { height: 28px; } } .c-video-caption__title--covid { font-size: 14px; line-height: 22px; letter-spacing: 0.12em; margin-top: -0.4px; margin-bottom: 28px; text-shadow: 0 0 9px rgba(0, 0, 0, 0.3); } @media only screen and (max-width: 768px) { .c-video-caption__title--covid { font-size: 13px; line-height: 19px; letter-spacing: 0.12em; margin-top: -0.3px; margin-bottom: 17px; } } @media only screen and (max-width: 768px) and (max-width: 359px) { .c-video-caption__title--covid { font-size: 11px; line-height: 16px; letter-spacing: 0.12em; margin-top: -0.25px; margin-bottom: 17.75px; } } .c-video-caption__txt { margin-top: -5px; margin-left: -2px; margin-bottom: 27px; font-size: 24px; line-height: 34px; letter-spacing: 0.12em; text-shadow: 0 0 9px rgba(0, 0, 0, 0.3); } @media only screen and (max-width: 768px) { .c-video-caption__txt { margin-top: -3px; margin-bottom: 17px; font-size: 18px; line-height: 24px; letter-spacing: 0.1em; } } @media only screen and (max-width: 768px) and (max-width: 359px) { .c-video-caption__txt { font-size: 16px; line-height: 22px; letter-spacing: 0.1em; } } .c-video-caption__txt--two-times-img { height: 54px; margin-top: 0px; margin-bottom: 32px; } @media only screen and (max-width: 768px) { .c-video-caption__txt--two-times-img { height: 42px; margin-top: 0px; margin-bottom: 20px; } } .c-video-caption__txt--two-times-img img { width: auto; height: 100%; -webkit-filter: drop-shadow(0 0 9px rgba(0, 0, 0, 0.3)); filter: drop-shadow(0 0 9px rgba(0, 0, 0, 0.3)); } .c-video-caption__txt--three-times-img { height: 93px; margin-top: 0px; margin-bottom: 32px; } @media only screen and (max-width: 768px) { .c-video-caption__txt--three-times-img { height: 71px; margin-top: 0px; margin-bottom: 20px; } } .c-video-caption__txt--three-times-img img { width: auto; height: 100%; -webkit-filter: drop-shadow(0 0 9px rgba(0, 0, 0, 0.3)); filter: drop-shadow(0 0 9px rgba(0, 0, 0, 0.3)); } .c-video-caption__subtxt { font-size: 14px; line-height: calc(22/14); letter-spacing: 0.04em; margin-top: calc( -1 * (16px - 4px)); margin-left: -2px; margin-bottom: 36px; text-shadow: 0 0 9px rgba(0, 0, 0, 0.3); } @media only screen and (max-width: 768px) { .c-video-caption__subtxt { font-size: 13px; line-height: calc(38/26); letter-spacing: 0.04em; margin-top: calc( -1 * (10px - 3px)); margin-bottom: 17px; } } .c-video-caption__info { font-size: 18px; line-height: calc(52/36); letter-spacing: 0.04em; margin-top: -4px; display: -webkit-flex; display: flex; } @media only screen and (max-width: 768px) { .c-video-caption__info { font-size: 13px; line-height: calc(38/26); letter-spacing: 0.04em; margin-top: -3px; } } .c-video-caption__info:not(:last-child) { margin-bottom: 12px; } @media only screen and (max-width: 768px) { .c-video-caption__info:not(:last-child) { margin-bottom: 5px; } } .c-video-caption__info-ttl { white-space: nowrap; } .c-video-caption__info-content { padding-left: 5px; } .c-video-caption__vm-btn { font-size: 16px; letter-spacing: 1px; -webkit-filter: drop-shadow(0 0 9px rgba(0, 0, 0, 0.3)); filter: drop-shadow(0 0 9px rgba(0, 0, 0, 0.3));} .c-video-caption__vm-btn img { width: auto; height: 12px; -webkit-filter: drop-shadow(0 0 9px rgba(0, 0, 0, 0.3)); filter: drop-shadow(0 0 9px rgba(0, 0, 0, 0.3)); } @media only screen and (max-width: 768px) { .c-video-caption__vm-btn img { height: 10px; } } .c-video-caption--black .c-video-caption__title, .c-video-caption--black .c-video-caption__txt, .c-video-caption--black .c-video-caption__subtxt, .c-video-caption--black .c-video-caption__vm-btn { text-shadow: none; -webkit-filter: none; filter: none; color: #333333; } .c-video-caption--black .c-video-caption__vm-btn img { -webkit-filter: none; filter: none; } .c-video-caption--sensory-inspection .c-video-caption__title, .c-video-caption--sensory-inspection .c-video-caption__txt, .c-video-caption--sensory-inspection .c-video-caption__subtxt, .c-video-caption--sensory-inspection .c-video-caption__vm-btn { text-shadow: none; -webkit-filter: none; filter: none; color: #333333; } .c-video-caption--sensory-inspection .c-video-caption__vm-btn { height: 16px; } @media only screen and (max-width: 768px) { .c-video-caption--sensory-inspection .c-video-caption__vm-btn { height: 13px; } } .c-video-caption--sensory-inspection .c-video-caption__vm-btn img { height: 100%; -webkit-filter: none; filter: none; } .u-maxw-960 { width: calc(100% - 40px); max-width: 960px; margin-left: auto; margin-right: auto; }