@charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Outfit:wght@400..600&display=swap"); /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* メディアクエリー */ /* クリアフィックス */ /*フォントフェイス*/ /*フォントサイズ(rem)*/ /*アスペクト比*/ /*要素内のテキストを非表示にする*/ /*天地左右に中央配置*/ /* パーセント */ /* px→vw */ /* px→vh */ /* px1/2 */ .header { pointer-events: none; } .header, .is-navi-open .header, .is-scroll.is-navi-open .header { position: fixed; top: 0; left: 0; width: 100%; height: 6.25vw; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; padding: 0 1.7361111111vw; box-shadow: 0px 0px 1.1111111111vw -0.4166666667vw rgba(0, 0, 0, 0.6); background-color: #fff; z-index: 1000; transition: all 0.5s; } @media all and (max-width: 750px) { .header, .is-navi-open .header, .is-scroll.is-navi-open .header { height: 14.6666666667vw; padding: 0 2.6666666667vw; box-shadow: 0px 0px 2.1333333333vw -0.8vw rgba(0, 0, 0, 0.6); } } .header .header-small, .is-navi-open .header .header-small, .is-scroll.is-navi-open .header .header-small { display: none; } .is-scroll .header { height: 4.5138888889vw; } @media all and (max-width: 750px) { .is-scroll .header { height: 12vw; } } .is-scroll .header .header-big { display: none; } .is-scroll .header .header-btn__menu { height: 3.4027777778vw; } @media all and (max-width: 750px) { .is-scroll .header .header-btn__menu { height: 9.3333333333vw; } .is-scroll .header .header-btn__menu::after { top: 5.3333333333vw; } } .is-scroll .header .header-small { display: block; } .is-scroll .header .header-small.header-link { width: 19.1666666667vw; height: auto; } @media all and (max-width: 750px) { .is-scroll .header .header-small.header-link { width: 52.6666666667vw; } } .header-logo__block { display: block; position: relative; box-sizing: border-box; } .header-logo__block.pipe { padding-right: 2.4305555556vw; } @media all and (max-width: 750px) { .header-logo__block.pipe { padding-right: 2.6666666667vw; } } .header-link { display: flex; width: auto; height: 4.5138888889vw; } @media all and (max-width: 750px) { .header-link { height: auto; } } .header-logo__corp, .header-logo__anniversary { pointer-events: auto; } .header-logo__corp img, .footer-logo__corp img { width: 14.5833333333vw; } @media all and (max-width: 750px) { .header-logo__corp img, .footer-logo__corp img { width: 31.8666666667vw; } } .header-logo__anniversary { height: 100%; } @media all and (max-width: 750px) { .header-logo__anniversary { width: 8.4vw; height: auto; } } .header-contents { display: flex; justify-content: space-between; align-items: center; } @media all and (max-width: 750px) { .header-navi { display: none; } } .header-navi .aside-navi__mark--level1::before { width: 0.625vw; height: 0.625vw; min-width: 0.625vw; min-height: 0.625vw; top: 0.9722222222vw; } @media all and (max-width: 750px) { .header-navi .aside-navi__mark--level1::before { width: 1.3333333333vw; height: 1.3333333333vw; min-width: 1.3333333333vw; min-height: 1.3333333333vw; top: 2.6666666667vw; } } .header-navi__ul { display: flex; } .header-navi__li { font-size: 1.1805555556vw; margin-left: 2.4305555556vw; } .header-navi__link { position: relative; height: 6.25vw; display: block; box-sizing: border-box; padding-top: 4.1666666667vw; } .header-navi__link:hover, .header-navi__link.is-active { color: #0060af; } .header-navi__link:hover::after, .header-navi__link.is-active::after { content: ""; display: block; width: 100%; height: 0.2083333333vw; background-color: #0060af; position: absolute; left: 0; bottom: 0; } .header-btn__menu { pointer-events: auto; } .header-btn__menu, .is-navi-open .header .header-btn__menu, .is-scroll.is-navi-open .header .header-btn__menu { width: 7.6388888889vw; height: 3.8194444444vw; background-color: #0060af; border-radius: 3.4722222222vw; margin-left: 2.0833333333vw; box-sizing: border-box; text-align: right; cursor: pointer; position: relative; } @media all and (max-width: 750px) { .header-btn__menu, .is-navi-open .header .header-btn__menu, .is-scroll.is-navi-open .header .header-btn__menu { width: 21.4666666667vw; height: 11.0666666667vw; border-radius: 6.6666666667vw; } } .header-btn__menu::before, .is-navi-open .header .header-btn__menu::before, .is-scroll.is-navi-open .header .header-btn__menu::before { content: ""; display: block; background-image: url(../images/common/menu_line.png); background-repeat: no-repeat; background-size: contain; width: 1.25vw; height: 0.6944444444vw; position: absolute; top: 50%; left: 1.3888888889vw; transform: translate(0, -50%); } @media all and (max-width: 750px) { .header-btn__menu::before, .is-navi-open .header .header-btn__menu::before, .is-scroll.is-navi-open .header .header-btn__menu::before { width: 3.6vw; height: 2.1333333333vw; left: 3.3333333333vw; } } .header-btn__menu--close::before, .is-navi-open .header .header-btn__menu--close::before, .is-scroll.is-navi-open .header .header-btn__menu--close::before { content: ""; display: block; background-image: url(../images/common/menu_close.png); background-repeat: no-repeat; background-size: contain; width: 0.9027777778vw; height: 0.9027777778vw; position: absolute; top: 50%; left: 1.3888888889vw; transform: translate(0, -50%); } @media all and (max-width: 750px) { .header-btn__menu--close::before, .is-navi-open .header .header-btn__menu--close::before, .is-scroll.is-navi-open .header .header-btn__menu--close::before { width: 2.6666666667vw; height: 2.6666666667vw; left: 3.3333333333vw; } } .header-btn__menu--text { font-size: 0.8333333333vw; line-height: 1; color: #fff; font-weight: bold; padding-right: 1.1111111111vw; box-sizing: border-box; } @media all and (max-width: 750px) { .header-btn__menu--text { font-size: 2.6666666667vw; padding-right: 3.4666666667vw; } } .header-home .header { opacity: 0; } .header-navi { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 500; } @media all and (max-width: 750px) { .header-navi { background-color: #ecf2f6; } } .header-navi__mv { width: 34.4444444444vw; background-color: #fff; display: flex; align-items: flex-end; justify-content: center; } @media all and (max-width: 750px) { .header-navi__mv { display: none; } } .header-navi__mv.is-top { align-items: flex-start; } .header-navi__baloon { font-size: 0; } .header-navi__contents { width: 65.5555555556vw; height: 100vh; background-color: #ecf2f6; display: flex; align-items: center; box-sizing: border-box; position: relative; overflow: none; } @media all and (max-width: 750px) { .header-navi__contents { width: 100%; max-height: calc(100vh - 30.6666666667vw); display: block; padding-bottom: 0; margin-top: 30.6666666667vw; overflow: auto; } } .header-navi__contents .aside-navi { display: block; width: 76.2711864407%; margin: 0 auto; } @media all and (max-width: 750px) { .header-navi__contents .aside-navi { width: 100%; box-sizing: border-box; padding: 0 3.3333333333vw; } } .header-navi__contents .aside-navi__ul { max-width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 0; } @media all and (max-width: 750px) { .header-navi__contents .aside-navi__ul { display: block; } } .header-navi__contents .aside-navi__li { width: 50%; max-width: 50%; margin-right: 0; margin-bottom: 2.7777777778vw; } @media all and (max-width: 750px) { .header-navi__contents .aside-navi__li { width: 100%; max-width: 100%; margin-bottom: 8vw; } } .header-navi__contents .aside-navi__li .ico { width: 2.5694444444vw; min-width: 2.5694444444vw; height: 2.5694444444vw; min-height: 2.5694444444vw; margin-right: 0.6944444444vw; } @media all and (max-width: 750px) { .header-navi__contents .aside-navi__li .ico { width: 6.6666666667vw; min-width: 6.6666666667vw; height: 6.6666666667vw; min-height: 6.6666666667vw; margin-right: 0; } } .header-navi__contents .aside-navi__li .ico-arrow { width: 1.25vw; height: 0.7638888889vw; } @media all and (max-width: 750px) { .header-navi__contents .aside-navi__li .ico-arrow { width: 3.3333333333vw; height: 2vw; } } .header-navi__contents .aside-navi__li .aside-navi__text--en { font-size: 1.875vw; } @media all and (max-width: 750px) { .header-navi__contents .aside-navi__li .aside-navi__text--en { font-size: 6.4vw; line-height: 1; } } .header-navi__contents .aside-navi__li .aside-navi__text--ja { font-size: 1.0416666667vw; } @media all and (max-width: 750px) { .header-navi__contents .aside-navi__li .aside-navi__text--ja { margin-top: 0.5em; font-size: 3.4666666667vw; } } .header-navi__contents .aside-navi__sub { display: flex; align-items: center; margin-top: 1.0416666667vw; font-weight: normal; } @media all and (max-width: 750px) { .header-navi__contents .aside-navi__sub { margin-top: 2vw; } } .header-navi__contents .aside-navi__sub .aside-navi__sub--ja { font-size: 1.0416666667vw; } @media all and (max-width: 750px) { .header-navi__contents .aside-navi__sub .aside-navi__sub--ja { font-size: 3.4666666667vw; } } .header-navi__contents .aside-navi__sub .aside-navi__sub--ja.aside-navi__mark--level2 { font-size: 0.9027777778vw; } @media all and (max-width: 750px) { .header-navi__contents .aside-navi__sub .aside-navi__sub--ja.aside-navi__mark--level2 { font-size: 3.7333333333vw; } } .header-navi__contents .aside-navi__sub .ico { width: 1.8055555556vw; min-width: 1.8055555556vw; height: 1.8055555556vw; min-height: 1.8055555556vw; margin-right: 0.6944444444vw; } @media all and (max-width: 750px) { .header-navi__contents .aside-navi__sub .ico { width: 5.4666666667vw; min-width: 5.4666666667vw; height: 5.4666666667vw; min-height: 5.4666666667vw; margin-right: 2.6666666667vw; } } .header-navi__contents .aside-navi__sub .ico-arrow { width: 0.9027777778vw; height: 0.5555555556vw; } @media all and (max-width: 750px) { .header-navi__contents .aside-navi__sub .ico-arrow { width: 2.6666666667vw; height: 1.6vw; } } .header-navi__contents .aside-sns { width: 100%; max-width: 100%; margin-top: 3.4722222222vw; } @media all and (max-width: 750px) { .header-navi__contents .aside-sns { margin-top: 12vw; } } .header-btn__menu--open { display: block; } .header-btn__menu--close { display: none; } .is-navi-open .header { background-color: transparent !important; box-shadow: none !important; } @media all and (max-width: 750px) { .is-navi-open .header { background-color: #fff !important; } } .is-navi-open .header-navi { display: flex; } .is-navi-open .header-btn__menu--open { display: none; } .is-navi-open .header-btn__menu--close { display: block; } .is-navi-open .header-big { display: flex !important; } .is-navi-open .header-small { display: none !important; } footer { position: relative; z-index: 100; } .footer { width: 100%; height: 8.6805555556vw; box-sizing: border-box; padding: 0 1.7361111111vw; display: flex; align-items: center; justify-content: space-between; } @media all and (max-width: 750px) { .footer { display: block; padding: 6.6666666667vw 0; height: auto; } } .footer-link { display: flex; width: auto; height: 4.5138888889vw; } @media all and (max-width: 750px) { .footer-link { height: auto; align-items: center; } } @media all and (max-width: 750px) { .footer-logo { display: flex; justify-content: center; } } .footer-logo__anniversary { width: 7.6388888889vw; margin-left: 2.4305555556vw; } @media all and (max-width: 750px) { .footer-logo__anniversary { width: 23.3333333333vw; margin-left: 2.6666666667vw; } } .fotter-copyright { font-size: 0.7638888889vw; } @media all and (max-width: 750px) { .fotter-copyright { font-size: 2.6666666667vw; text-align: center; display: block; margin: 3.3333333333vw auto 0; } } .aside { position: relative; background-color: #ecf2f6; box-sizing: border-box; padding: 6.25vw 8.3333333333vw 2.4305555556vw; } @media all and (max-width: 750px) { .aside { padding: 16vw 4vw 23.3333333333vw; } } .aside .aside-navi__sub { display: flex; align-items: center; margin-top: 1.0416666667vw; font-weight: normal; } @media all and (max-width: 750px) { .aside .aside-navi__sub { margin-top: 2.6666666667vw; } } .aside .aside-navi__sub .aside-navi__sub--ja { font-size: 0.9027777778vw; white-space: nowrap; } @media all and (max-width: 750px) { .aside .aside-navi__sub .aside-navi__sub--ja { font-size: 3.2vw; } } .aside .aside-navi__sub .ico { width: 1.8055555556vw; min-width: 1.8055555556vw; height: 1.8055555556vw; min-height: 1.8055555556vw; margin-right: 0.6944444444vw; } @media all and (max-width: 750px) { .aside .aside-navi__sub .ico { width: 5.4666666667vw; min-width: 5.4666666667vw; height: 5.4666666667vw; min-height: 5.4666666667vw; margin-right: 2.6666666667vw; } } .aside .aside-navi__sub .ico-arrow { width: 0.9027777778vw; height: 0.5555555556vw; } @media all and (max-width: 750px) { .aside .aside-navi__sub .ico-arrow { width: 2.6666666667vw; height: 1.6vw; } } .aside-wrap { display: flex; width: 100%; justify-content: center; } .aside-navi { display: flex; width: 100%; justify-content: space-around; } @media all and (max-width: 750px) { .aside-navi { display: block; } } .aside-navi__ul { display: flex; flex-wrap: wrap; width: 100%; max-width: 47.2222222222vw; } @media all and (max-width: 750px) { .aside-navi__ul { max-width: 100%; display: block; margin-bottom: 10.6666666667vw; } } .aside-navi__li { display: inline-block; min-width: 9.7222222222vw; margin-right: 2.0833333333vw; margin-bottom: 2.0833333333vw; } @media all and (max-width: 750px) { .aside-navi__li { display: block; width: 100%; min-width: auto; margin-right: auto; margin-bottom: 6.6666666667vw; } } .aside-navi__block { position: relative; } .aside-navi__text { display: block; } .aside-navi__text.is-padding-left-none { padding-left: 0; } .aside-navi__text--en { font-size: 1.4583333333vw; } @media all and (max-width: 750px) { .aside-navi__text--en { font-size: 5.3333333333vw; } } .aside-navi__text--ja { font-size: 0.9027777778vw; font-weight: normal; } @media all and (max-width: 750px) { .aside-navi__text--ja { font-size: 3.2vw; } } .aside-chi { top: 3.4722222222vw; left: 0; position: absolute; } @media all and (max-width: 750px) { .aside-chi { position: relative; top: 0; } } .aside-navi__link { display: flex; } .aside-sns__wrap { display: flex; } .aside-sns__ico { display: block; width: 3.2638888889vw; height: 3.2638888889vw; margin-right: 0.6944444444vw; display: black; } @media all and (max-width: 750px) { .aside-sns__ico { width: 10.4vw; height: 10.4vw; margin-right: 2.6666666667vw; } } .aside-sns__ico--black { background-color: #000; border-radius: 50%; overflow: hidden; display: flex; justify-content: center; align-items: center; } .aside-sns__ico--x img { width: 48.9361702128%; display: block; } .aside-sns__text { font-size: 1.0416666667vw; word-break: keep-all; font-weight: normal; } @media all and (max-width: 750px) { .aside-sns__text { font-size: 3.4666666667vw; } } .aside-sns { position: relative; box-sizing: border-box; width: 100%; max-width: 28.8194444444vw; max-height: 6.5972222222vw; padding: 1.3888888889vw 0; display: flex; justify-content: space-around; align-items: center; } @media all and (max-width: 750px) { .aside-sns { max-width: 100%; max-height: 100%; padding: 5.3333333333vw 0; } } .aside-sns::before, .aside-sns::after { content: ""; display: block; width: 100%; height: 1px; background-color: #888; position: absolute; left: 0; } @media all and (max-width: 750px) { .aside-sns::before, .aside-sns::after { height: 0.2666666667vw; } } .aside-sns::before { top: 0; } .aside-sns::after { bottom: 0; } .aside .ico { display: inline-block; background-color: #fff; width: 2.0833333333vw; min-width: 2.0833333333vw; height: 2.0833333333vw; min-height: 2.0833333333vw; display: flex; justify-content: center; align-items: center; border-radius: 50%; overflow: hidden; margin-right: 0.6944444444vw; } @media all and (max-width: 750px) { .aside .ico { width: 6vw; min-width: 6vw; height: 6vw; min-height: 6vw; } } .aside .ico-arrow { width: 1.0416666667vw; height: 0.625vw; } @media all and (max-width: 750px) { .aside .ico-arrow { width: 3.0666666667vw; height: 1.8666666667vw; } } .aside .arrow-svg { -webkit-mask: url("../images/common/ico_arrow.svg") no-repeat center center/contain; -webkit-mask-image: url("../images/common/ico_arrow.svg"); mask-image: url("../images/common/ico_arrow.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; background-color: #0060af; } .aside-menu { display: flex; justify-content: center; } @media all and (max-width: 750px) { .aside-menu { display: block; } } .aside-menu__ul.aside-menu__ul--first { width: 21.4583333333vw; } @media all and (max-width: 750px) { .aside-menu__ul.aside-menu__ul--first { width: 100%; } } .aside-menu__li { font-size: 0.9722222222vw; margin-bottom: 1.0416666667vw; } @media all and (max-width: 750px) { .aside-menu__li { font-size: 3.2vw; margin-bottom: 4vw; } } .aside-menu__link { font-weight: normal; } .aside-navi__mark--level1 { position: relative; box-sizing: border-box; box-sizing: border-box; padding-left: 1.3888888889vw; overflow: hidden; } @media all and (max-width: 750px) { .aside-navi__mark--level1 { padding-left: 4vw; } } .aside-navi__mark--level1::before { content: ""; display: block; background-color: #0060af; border-radius: 50%; width: 0.4861111111vw; height: 0.4861111111vw; min-width: 0.4861111111vw; min-height: 0.4861111111vw; top: 0.8333333333vw; position: absolute; left: 0; } @media all and (max-width: 750px) { .aside-navi__mark--level1::before { width: 1.3333333333vw; height: 1.3333333333vw; min-width: 1.3333333333vw; min-height: 1.3333333333vw; top: 1.3333333333vw; } } .aside-navi__mark--level2 { position: relative; box-sizing: border-box; box-sizing: border-box; padding-left: 1.0416666667vw; } @media all and (max-width: 750px) { .aside-navi__mark--level2 { padding-left: 4vw; } } .aside-navi__mark--level2::before { content: ""; display: block; width: 0.6944444444vw; border: solid 0.0694444444vw #0060af; top: 50%; left: 0; transform: translate(0, -50%); position: absolute; } @media all and (max-width: 750px) { .aside-navi__mark--level2::before { width: 2.6666666667vw; border: solid 0.2666666667vw #0060af; top: 2.4vw; } } .bottom-aside .aside-navi { flex-wrap: wrap; justify-content: space-between; } .bottom-aside .aside-navi__ul { width: 40.4166666667vw; max-width: 100%; justify-content: flex-start; } @media all and (max-width: 750px) { .bottom-aside .aside-navi__ul { width: 100%; } } .bottom-aside .aside-navi__box { box-sizing: border-box; padding-left: 1.3888888889vw; } .bottom-aside .aside-navi__other { margin-top: 4.1666666667vw; display: flex; width: 100%; justify-content: space-between; flex-direction: row-reverse; } @media all and (max-width: 750px) { .bottom-aside .aside-navi__other { display: block; } } @media all and (max-width: 750px) { .bottom-aside .aside-navi__mark--level1::before { top: 3.3333333333vw; } } .bottom-aside .aside-navi__mark--level2::before { top: 0.625vw; } @media all and (max-width: 750px) { .bottom-aside .aside-navi__mark--level2::before { top: 2.4vw; } } @media all and (max-width: 750px) { .bottom-aside .aside-navi__text--en { margin-bottom: 1.3333333333vw; } } @media all and (max-width: 750px) { .bottom-aside .aside-navi__text--ja { margin-bottom: 2vw; } } .bottom-aside .top-top { margin-right: 9.7222222222vw; } @media all and (max-width: 750px) { .bottom-aside .top-top { margin-right: 0; } } .bottom-aside .top-message .aside-navi__block { display: flex; } @media all and (max-width: 750px) { .bottom-aside .top-message .aside-navi__block { display: block; } } .bottom-aside .top-message .aside-navi__sub { margin-top: 0; margin-bottom: 1.0416666667vw; } @media all and (max-width: 750px) { .bottom-aside .top-message .aside-navi__sub { margin-bottom: 2.6666666667vw; } } .bottom-aside .top-history { margin-right: 9.7222222222vw; } @media all and (max-width: 750px) { .bottom-aside .top-history { margin-right: 0; } } .bottom-aside .aside-sns { width: 100%; max-width: 100%; } .bottom-aside .aside-sns__box { display: flex; justify-content: center; align-items: center; width: 100%; } .bottom-aside .aside-sns__text { margin-right: 2.0833333333vw; } .bnr { background-color: #0060af; box-sizing: border-box; padding: 7.6388888889vw 0; } @media all and (max-width: 750px) { .bnr { padding: 20vw 4vw; } } .bnr-wrap { width: 83.3333333333vw; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; } @media all and (max-width: 750px) { .bnr-wrap { width: 100%; } } .bnr-set { background-color: #fff; margin-bottom: 2.0833333333vw; } @media all and (max-width: 750px) { .bnr-set { margin-bottom: 4vw; } } .bnr-set__001 { width: 40.625vw; } @media all and (max-width: 750px) { .bnr-set__001 { width: 100%; } } @media all and (max-width: 750px) { .bnr-set__001 { width: 100%; } } .bnr-set__001 .bnr-set_ja { width: 16.3194444444vw; } @media all and (max-width: 750px) { .bnr-set__001 .bnr-set_ja { width: 82.0289855072%; } } .bnr-set__001 .bnr-ph { width: 20.1388888889vw; aspect-ratio: 580/596; } .bnr-set__001 .bnr-ph img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media all and (max-width: 750px) { .bnr-set__001 .bnr-ph { width: 50%; } } .bnr-set__002 { width: 40.625vw; } @media all and (max-width: 750px) { .bnr-set__002 { width: 100%; } } @media all and (max-width: 750px) { .bnr-set__002 { width: 100%; } } .bnr-set__002 .bnr-set_ja { width: 9.375vw; } @media all and (max-width: 750px) { .bnr-set__002 .bnr-set_ja { width: 48.6956521739%; } } .bnr-set__002 .bnr-ph { width: 20.1388888889vw; } @media all and (max-width: 750px) { .bnr-set__002 .bnr-ph { width: 50%; } } .bnr-set__003 { width: 40.625vw; } @media all and (max-width: 750px) { .bnr-set__003 { width: 100%; } } .bnr-set__003 .bnr-set_ja { width: 15.9722222222vw; } @media all and (max-width: 750px) { .bnr-set__003 .bnr-set_ja { width: 81.1594202899%; } } .bnr-set__003 .bnr-ph { width: 20.1388888889vw; } @media all and (max-width: 750px) { .bnr-set__003 .bnr-ph { width: 50%; } } .bnr-set__004 { width: 40.625vw; } @media all and (max-width: 750px) { .bnr-set__004 { width: 100%; } } @media all and (max-width: 750px) { .bnr-set__004 { width: 100%; } } .bnr-set__004 .bnr-set_ja { width: 13.125vw; } @media all and (max-width: 750px) { .bnr-set__004 .bnr-set_ja { width: 67.2463768116%; } } .bnr-set__004 .bnr-ph { width: 20.1388888889vw; } @media all and (max-width: 750px) { .bnr-set__004 .bnr-ph { width: 50%; } } .bnr-set__005 { width: 40.625vw; } @media all and (max-width: 750px) { .bnr-set__005 { width: 100%; } } @media all and (max-width: 750px) { .bnr-set__005 { width: 100%; } } .bnr-set__005 .bnr-set_ja { width: 11.8055555556vw; } @media all and (max-width: 750px) { .bnr-set__005 .bnr-set_ja { width: 59.4202898551%; } } .bnr-set__005 .bnr-ph { width: 20.1388888889vw; } @media all and (max-width: 750px) { .bnr-set__005 .bnr-ph { width: 50%; } } .bnr-set__006 { width: 40.625vw; } @media all and (max-width: 750px) { .bnr-set__006 { width: 100%; } } @media all and (max-width: 750px) { .bnr-set__006 { width: 100%; } } .bnr-set__006 .bnr-set_ja { width: 15.2777777778vw; } @media all and (max-width: 750px) { .bnr-set__006 .bnr-set_ja { width: 76.5217391304%; } } .bnr-set__006 .bnr-ph { width: 20.1388888889vw; } @media all and (max-width: 750px) { .bnr-set__006 .bnr-ph { width: 50%; } } .bnr-set__007 { width: 40.625vw; } @media all and (max-width: 750px) { .bnr-set__007 { width: 100%; } } @media all and (max-width: 750px) { .bnr-set__007 { width: 100%; } } .bnr-set__007 .bnr-set_ja { width: 13.125vw; } @media all and (max-width: 750px) { .bnr-set__007 .bnr-set_ja { width: 73.3333333333%; } } .bnr-set__007 .bnr-ph { width: 20.1388888889vw; } @media all and (max-width: 750px) { .bnr-set__007 .bnr-ph { width: 50%; } } .bnr-ph { font-size: 0; } @media all and (max-width: 750px) { .bnr-ph { width: 50%; } } .bnr-set_link { display: flex; justify-content: space-between; align-items: center; } .bnr-set_contents { box-sizing: border-box; padding-left: 3vw; } @media all and (max-width: 750px) { .bnr-set_contents { width: 50%; padding-left: 4.6666666667vw; } } .bnr-set_en { color: #0060af; font-size: 1.25vw; font-weight: bold; } @media all and (max-width: 750px) { .bnr-set_en { font-size: 3.2vw; } } .bnr-set_ja { margin: 1.3333333333vw 0; } .release { background-color: #fff; box-sizing: border-box; padding: 8.3333333333vw 0; } @media all and (max-width: 750px) { .release { padding: 20vw 4vw; } } .release .baloon-01 { width: 29.7916666667vw; left: -19.4444444444vw; top: -10.9722222222vw; } @media all and (max-width: 750px) { .release .baloon-01 { width: 45.7333333333vw; left: -38.5333333333vw; top: -7.3333333333vw; } } .release .baloon-02 { width: 8.3333333333vw; left: 79.0972222222vw; top: 5.9027777778vw; } @media all and (max-width: 750px) { .release .baloon-02 { width: 13.3333333333vw; left: 67.2vw; top: 4vw; } } .release .baloon-03 { width: 15.2083333333vw; left: 89.5138888889vw; top: -7.2222222222vw; } @media all and (max-width: 750px) { .release .baloon-03 { width: 22.8vw; left: 83.8666666667vw; top: -4vw; } } .release-title__en { font-size: 1.3888888889vw; text-align: center; color: #0060af; font-weight: 600; } @media all and (max-width: 750px) { .release-title__en { font-size: 4vw; } } .release-title__ja { width: 20.6944444444vw; margin: 2.0833333333vw auto 2.7777777778vw; } @media all and (max-width: 750px) { .release-title__ja { width: 55.6vw; margin: 5.3333333333vw auto 10.6666666667vw; } } .release-ul { width: 83.3333333333vw; font-weight: bold; display: flex; justify-content: space-between; margin: 0 auto; } @media all and (max-width: 750px) { .release-ul { width: 100%; display: block; } } @media all and (max-width: 750px) { .release-li { margin-bottom: 7.3333333333vw; } } .release-li:last-child { margin-bottom: 0; } .release-link { display: block; width: 26.1111111111vw; } @media all and (max-width: 750px) { .release-link { width: 100%; } } .release-box { box-sizing: border-box; padding: 1.7361111111vw; border-left: solid 1px #dadada; border-right: solid 1px #dadada; border-bottom: solid 1px #dadada; } @media all and (max-width: 750px) { .release-box { padding: 6.6666666667vw; } } .release-day { font-size: 0.9722222222vw; margin-bottom: 1.0416666667vw; } @media all and (max-width: 750px) { .release-day { font-size: 3.4666666667vw; margin-bottom: 4vw; } } .btn-link { font-size: 1.25vw; margin-top: 1.0416666667vw; } @media all and (max-width: 750px) { .btn-link { font-size: 4.5333333333vw; margin-top: 4vw; } } .release-ph { font-size: 0; aspect-ratio: 860/575; } .release-ph img { height: 100%; -o-object-fit: cover; object-fit: cover; } .motion-baloon--1 { animation: balloon1 6s ease-in-out infinite; } .motion-baloon--2 { animation: balloon2 6s ease-in-out infinite; } .motion-baloon--3 { animation: balloon3 5s ease-in-out infinite; } .motion-baloon--4 { animation: balloon4 6s ease-in-out infinite; } @keyframes balloon1 { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(4deg); } } @keyframes balloon2 { 0%, 100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(-15px) rotate(-4deg); } } @keyframes balloon3 { 0%, 100% { transform: translate(0, -5px) rotate(2deg); } 50% { transform: translate(-10px, 15px) rotate(-4deg); } } @keyframes balloon4 { 0%, 100% { transform: translate(5px, -5px) rotate(-4deg); } 50% { transform: translate(-7px, 5px) rotate(5deg); } } html.is-modal { width: 100%; overflow: hidden; } html.is-modal body { width: 100%; } html.is-modal body.is-bodyBar { overflow-y: scroll; } .btn-modal { width: 100px; height: 100px; z-index: 0; position: fixed; top: 0; right: 0; text-align: center; } .btn-modal__close { display: none; } .is-modal .btn-modal__close { display: flex; align-items: center; justify-content: center; background-color: #fff; width: 4.8611111111vw; min-width: 4.8611111111vw; height: 4.8611111111vw; min-height: 4.8611111111vw; border-radius: 50%; overflow: hidden; cursor: pointer; } @media all and (max-width: 750px) { .is-modal .btn-modal__close { width: 9.3333333333vw; min-width: 9.3333333333vw; height: 9.3333333333vw; min-height: 9.3333333333vw; } } .is-modal .btn-modal__close--ico { font-size: 0; width: 0.9722222222vw; min-width: 0.9722222222vw; height: 0.9722222222vw; min-height: 0.9722222222vw; } @media all and (max-width: 750px) { .is-modal .btn-modal__close--ico { width: 1.8666666667vw; min-width: 1.8666666667vw; height: 1.8666666667vw; min-height: 1.8666666667vw; } } .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; overflow-y: auto; background-color: rgba(0, 96, 175, 0.8); overscroll-behavior-y: contain; /* スクロール可能な要素に付与する必要有り */ z-index: 1000; } .is-modal .modal { display: block; } .is-movie .modal-wrap { width: 100%; height: 100%; display: flex; align-items: center; } .is-movie .modal-wrap .modal-movie { width: 100%; } .is-movie .modal-wrap .btn-modal__close { position: relative; margin: 0 -2.7777777778vw 0.6944444444vw auto; } @media all and (max-width: 750px) { .is-movie .modal-wrap .btn-modal__close { margin: 0 0 1.3333333333vw auto; } } .is-movie .modal-wrap .modal-movie__wrap { width: 62.5vw; margin: 0 auto; } @media all and (max-width: 750px) { .is-movie .modal-wrap .modal-movie__wrap { width: 93.3333333333vw; } } .is-movie .modal-wrap .movie-contents { position: relative; top: 0; left: 0; width: 100%; } .is-movie .modal-wrap .youtube-ratio { width: 100%; aspect-ratio: 16/9; } .is-movie .modal-wrap .youtube-ratio iframe { width: 100%; height: 100%; } .op { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background-color: #fff; z-index: 1001; } .op_anniversary { position: absolute; width: 100%; z-index: 100; top: 50%; transform: translate(0, -50%); display: none; } .op_anniversary .end-text { position: relative; margin: 0 auto 3.4722222222vw !important; } @media all and (max-width: 750px) { .op_anniversary .end-text { margin: 0 auto 8vw !important; } } .op_anniversary .op_anniversary__logo { width: 20.8333333333vw; margin: 0 auto; display: block; } @media all and (max-width: 750px) { .op_anniversary .op_anniversary__logo { width: 40vw; } } .op_balloon, .op_balloon2 { position: relative; z-index: 50; display: none; aspect-ratio: 1440/810; } .op_balloon.is-active, .op_balloon2.is-active { display: block; } .op_balloon2 { position: absolute; top: 0; left: 0; aspect-ratio: auto; } @media all and (max-width: 750px) { .op_balloon2 { display: none !important; } } .op_balloon__obj { position: absolute; top: 0; } .op_balloon--01 { left: 55.3472222222vw; width: 79.5833333333vw; top: 19.3055555556vw; } .op_balloon--02 { left: -12.3611111111vw; width: 67.0138888889vw; top: 14.375vw; } .op_balloon--03 { left: -5.1388888889vw; width: 91.25vw; top: 21.6666666667vw; } .op_balloon--04 { left: 73.5416666667vw; width: 55.2777777778vw; top: -2.5vw; } .op_balloon--05 { left: 2.0138888889vw; width: 68.3333333333vw; top: -31.1805555556vw; } .op_balloon--06 { left: 5.2777777778vw; width: 54.6527777778vw; top: 5.2777777778vw; } .op_balloon--07 { left: 75.2777777778vw; width: 25.7638888889vw; top: 17.2222222222vw; } .op_balloon--08 { left: -31.1111111111vw; width: 55.2777777778vw; top: 1.875vw; } .op_balloon--09 { left: 30.4166666667vw; width: 23.3333333333vw; top: 14.9305555556vw; } .op_balloon--10 { left: 48.8194444444vw; width: 84.6527777778vw; top: -25.8333333333vw; } .op_balloon--11 { left: -3.4027777778vw; width: 48.4722222222vw; top: 2.4305555556vw; } .op_balloon--12 { left: 25vw; width: 93.75vw; top: -10.2083333333vw; } .op_balloon--13 { left: 40.5555555556vw; width: 48.4722222222vw; top: -7.2916666667vw; } .op_balloon--14 { left: 44.7916666667vw; width: 37.9166666667vw; top: 24.7222222222vw; } .op_balloon--15 { left: 39.9305555556vw; width: 30.4861111111vw; top: 6.3888888889vw; } .op_balloon--16 { left: 55.625vw; width: 30.4861111111vw; top: -7.8472222222vw; } .op_balloon--17 { left: -15.3472222222vw; width: 72.9861111111vw; top: 21.3194444444vw; } .op_balloon--18 { left: 56.1805555556vw; width: 42.2916666667vw; top: -26.6666666667vw; } .op_balloon--19 { left: 48.4027777778vw; width: 58.9583333333vw; top: 25.9722222222vw; } .op_balloon--20 { left: 54.0277777778vw; width: 68.6805555556vw; top: 2.8472222222vw; } .op_balloon--21 { left: -32.1527777778vw; width: 77.2916666667vw; top: 11.3194444444vw; } .op_balloon--22 { left: -3.4027777778vw; width: 119.6527777778vw; top: -10.3472222222vw; } .op_balloon--23 { left: -53.9583333333vw; width: 119.6527777778vw; top: -34.375vw; } .op_balloon--24 { left: 3.9583333333vw; width: 57.5694444444vw; top: -5.7638888889vw; } .op_balloon--25 { left: 20.2777777778vw; width: 52.9861111111vw; top: -11.3194444444vw; } .mv_balloon__wrap { position: absolute; top: 0; left: 0; width: 100%; height: calc(4860px + 100vh); } @media all and (max-width: 750px) { .mv_balloon__wrap { height: auto; } } .mv_balloon__box { position: relative; width: 100%; height: 100%; left: 0; top: 50vh; } @media all and (max-width: 750px) { .mv_balloon__box { top: 0; } } .mv_balloon__title { position: absolute; top: 0; } .mv_balloon__title--01 { left: 47.3611111111vw; width: 109.7222222222vw; top: 95.1388888889vw; } @media all and (max-width: 750px) { .mv_balloon__title--01 { width: 35.4666666667vw; left: 73.3333333333vw; top: -3.8666666667vw; } } .mv_balloon__title--02 { left: 61.1111111111vw; width: 50.5555555556vw; top: 100.2083333333vw; } @media all and (max-width: 750px) { .mv_balloon__title--02 { display: none; width: 23.0666666667vw; left: 71.4666666667vw; top: 106.2666666667vw; } } .mv_balloon__title--03 { left: -23.6111111111vw; width: 52.9861111111vw; top: 52.9861111111vw; } @media all and (max-width: 750px) { .mv_balloon__title--03 { width: 23.2vw; left: -4.1333333333vw; top: 16.6666666667vw; } } .mv_balloon__title--04 { left: 52.1527777778vw; width: 85.4166666667vw; top: 35vw; } @media all and (max-width: 750px) { .mv_balloon__title--04 { display: none; width: 46.1333333333vw; left: 80.4vw; top: 103.6vw; } } .mv_balloon__title--05 { left: -12.8472222222vw; width: 46.9444444444vw; top: 139.2361111111vw; } @media all and (max-width: 750px) { .mv_balloon__title--05 { display: none; width: 21.0666666667vw; left: -14.6666666667vw; top: 170.8vw; } } .mv_balloon__title--06 { left: -47.0138888889vw; width: 88.8194444444vw; top: 102.3611111111vw; } @media all and (max-width: 750px) { .mv_balloon__title--06 { display: none; width: 42.2666666667vw; left: -24.5333333333vw; top: 107.4666666667vw; } } .mv_balloon__title--07 { left: -13.6805555556vw; width: 47.6388888889vw; top: 92.5vw; } @media all and (max-width: 750px) { .mv_balloon__title--07 { display: none; width: 22vw; left: 9.2vw; top: 117.0666666667vw; } } .mv_balloon__title--08 { left: 66.7361111111vw; width: 58.6111111111vw; top: 153.1944444444vw; } @media all and (max-width: 750px) { .mv_balloon__title--08 { display: none; } } .mv_balloon__title--09 { left: 80.3472222222vw; width: 17.8472222222vw; top: 90.8333333333vw; } @media all and (max-width: 750px) { .mv_balloon__title--09 { width: 10.5333333333vw; left: 86.8vw; top: 43.3333333333vw; } } .mv_balloon__title--10 { left: 14.0277777778vw; width: 19.1666666667vw; top: 201.6666666667vw; } @media all and (max-width: 750px) { .mv_balloon__title--10 { display: none; } } .mv_balloon__title--11 { left: 85.2777777778vw; width: 25.7638888889vw; top: 226.6666666667vw; } @media all and (max-width: 750px) { .mv_balloon__title--11 { display: none; } } .mv_balloon__title--12 { left: -0.9722222222vw; width: 35.1388888889vw; top: 204.375vw; } @media all and (max-width: 750px) { .mv_balloon__title--12 { display: none; } } .mv_balloon__title--13 { left: 69.4444444444vw; width: 43.125vw; top: 136.4583333333vw; } @media all and (max-width: 750px) { .mv_balloon__title--13 { display: none; } } .mv_balloon__title--14 { left: -63.5416666667vw; width: 112.9166666667vw; top: 179.8611111111vw; } @media all and (max-width: 750px) { .mv_balloon__title--14 { display: none; } } .mv_balloon__title--15 { left: 50.2083333333vw; width: 106.4583333333vw; top: 171.3194444444vw; } @media all and (max-width: 750px) { .mv_balloon__title--15 { display: none; } } .mv_balloon__title--16 { left: 54.0972222222vw; width: 62.9166666667vw; top: 197.2222222222vw; } @media all and (max-width: 750px) { .mv_balloon__title--16 { display: none; } } .mv_balloon__title--17 { left: -1.5972222222vw; width: 37.8472222222vw; top: 218.1944444444vw; } @media all and (max-width: 750px) { .mv_balloon__title--17 { display: none; } } .mv_balloon__title--18 { left: -8.125vw; width: 40.2777777778vw; top: 197.1527777778vw; } @media all and (max-width: 750px) { .mv_balloon__title--18 { display: none; } } .mv_balloon__title--19 { left: 73.1944444444vw; width: 24.6527777778vw; top: 177.2916666667vw; } @media all and (max-width: 750px) { .mv_balloon__title--19 { display: none; } } .mv_balloon__title--20 { left: 67.3611111111vw; width: 18.4722222222vw; top: 201.5972222222vw; } @media all and (max-width: 750px) { .mv_balloon__title--20 { display: none; } } .mv_balloon__title--21 { left: -11.25vw; width: 41.3888888889vw; top: 169.0972222222vw; } @media all and (max-width: 750px) { .mv_balloon__title--21 { display: none; } } .mv_balloon__title--22 { left: -35.3472222222vw; width: 68.1944444444vw; top: 152.3611111111vw; } @media all and (max-width: 750px) { .mv_balloon__title--22 { display: none; } } .mv_balloon__lead { position: absolute; } .mv_balloon__lead--01 { left: 47.3611111111vw; width: 109.7222222222vw; top: 9.8611111111vw; } @media all and (max-width: 750px) { .mv_balloon__lead--01 { width: 48.5333333333vw; left: 80.4vw; top: -54.6666666667vw; } } .mv_balloon__lead--02 { left: 61.1111111111vw; width: 50.5555555556vw; top: 0vw; } @media all and (max-width: 750px) { .mv_balloon__lead--02 { width: 23.0666666667vw; left: 71.4666666667vw; top: -55.0666666667vw; } } .mv_balloon__lead--03 { left: -12.8472222222vw; width: 46.9444444444vw; top: 40.0694444444vw; } @media all and (max-width: 750px) { .mv_balloon__lead--03 { width: 22vw; left: 9.2vw; top: -46.4vw; } } .mv_balloon__lead--04 { left: -47.0138888889vw; width: 88.8194444444vw; top: 10.1388888889vw; } @media all and (max-width: 750px) { .mv_balloon__lead--04 { width: 42.2666666667vw; left: -24.5333333333vw; top: -47.4666666667vw; } } .mv_balloon__lead--05 { left: 66.7361111111vw; width: 58.6111111111vw; top: 81.8055555556vw; } @media all and (max-width: 750px) { .mv_balloon__lead--05 { width: 25.4666666667vw; left: 89.8666666667vw; top: 77.3333333333vw; } } .mv_balloon__lead--06 { left: 69.4444444444vw; width: 43.125vw; top: 65.0694444444vw; } @media all and (max-width: 750px) { .mv_balloon__lead--06 { width: 17.8666666667vw; left: 90.1333333333vw; top: -4vw; } } .mv_balloon__lead--07 { left: 73.1944444444vw; width: 24.6527777778vw; top: 105.9027777778vw; } @media all and (max-width: 750px) { .mv_balloon__lead--07 { width: 13.0666666667vw; left: 91.4666666667vw; top: 106.4vw; } } .mv_balloon__lead--08 { left: -11.25vw; width: 41.3888888889vw; top: 97.7083333333vw; } @media all and (max-width: 750px) { .mv_balloon__lead--08 { width: 18.9333333333vw; left: -11.0666666667vw; top: 116vw; } } .mv_balloon__lead--09 { left: -35.3472222222vw; width: 68.1944444444vw; top: 67.0833333333vw; } @media all and (max-width: 750px) { .mv_balloon__lead--09 { width: 30.5333333333vw; left: -22.4vw; top: 72vw; } } .mv_balloon__line { position: absolute; } .mv_balloon__lined--01 { left: 85.2777777778vw; width: 25.7638888889vw; top: 35.0694444444vw; } @media all and (max-width: 750px) { .mv_balloon__lined--01 { width: 13.6vw; left: 92.4vw; top: -58.9333333333vw; } } .mv_balloon__lined--02 { left: 12.6388888889vw; width: 60.9722222222vw; top: 14.5138888889vw; } @media all and (max-width: 750px) { .mv_balloon__lined--02 { width: 26.5333333333vw; left: 34.6666666667vw; top: 0; } } .mv_balloon__lined--03 { left: -9.7222222222vw; width: 35.1388888889vw; top: 16.3194444444vw; } @media all and (max-width: 750px) { .mv_balloon__lined--03 { width: 21.7333333333vw; left: 66.6666666667vw; top: -5.3333333333vw; } } .mv_balloon__lined--04 { left: 5.625vw; width: 48.4722222222vw; top: 10.0694444444vw; } @media all and (max-width: 750px) { .mv_balloon__lined--04 { width: 30.1333333333vw; left: -17.0666666667vw; top: 4.6666666667vw; } } .mv_balloon__lined--05 { left: 29.8611111111vw; width: 60.9027777778vw; top: 3.2638888889vw; } @media all and (max-width: 750px) { .mv_balloon__lined--05 { width: 26.1333333333vw; left: 60.5333333333vw; top: -14.6666666667vw; } } .mv_balloon__lined--06 { left: -63.5416666667vw; width: 112.9166666667vw; top: -11.5972222222vw; } @media all and (max-width: 750px) { .mv_balloon__lined--06 { width: 52.2666666667vw; left: -38.1333333333vw; top: -91.3333333333vw; } } .mv_balloon__lined--07 { left: 50.2083333333vw; width: 106.4583333333vw; top: -20.1388888889vw; z-index: 10 !important; } @media all and (max-width: 750px) { .mv_balloon__lined--07 { width: 46.5333333333vw; left: 89.0666666667vw; top: -125.6vw; } } .mv_balloon__lined--08 { left: 54.0972222222vw; width: 62.9166666667vw; top: 5.6944444444vw; } @media all and (max-width: 750px) { .mv_balloon__lined--08 { width: 28vw; left: 96.8vw; top: -6.6666666667vw; } } .mv_balloon__lined--09 { left: -1.5972222222vw; width: 37.8472222222vw; top: 26.6666666667vw; } @media all and (max-width: 750px) { .mv_balloon__lined--09 { width: 17.0666666667vw; left: -0.1333333333vw; top: 16.6666666667vw; } } .mv_balloon__lined--10 { left: -8.125vw; width: 40.2777777778vw; top: -12.5694444444vw; } @media all and (max-width: 750px) { .mv_balloon__lined--10 { width: 18.5333333333vw; left: -9.0666666667vw; top: -20.6666666667vw; } } .mv_balloon__lined--11 { left: 50vw; width: 37.0833333333vw; top: 16.7361111111vw; } @media all and (max-width: 750px) { .mv_balloon__lined--11 { width: 16.2666666667vw; left: 77.0666666667vw; top: -4.1333333333vw; } } .mv_balloon__lined--12 { left: 14.0277777778vw; width: 19.1666666667vw; top: 10.0694444444vw; } @media all and (max-width: 750px) { .mv_balloon__lined--12 { width: 10.9333333333vw; left: 12.2666666667vw; top: 10.6666666667vw; } } .mv_balloon__lined--13 { left: 67.3611111111vw; width: 18.4722222222vw; top: 10.0694444444vw; } @media all and (max-width: 750px) { .mv_balloon__lined--13 { width: 9.8666666667vw; left: 91.2vw; top: 17.3333333333vw; } } .mv-top .mv_balloon__wrap { position: fixed; top: 0; left: 0; } @media all and (max-width: 750px) { .mv-top .mv_balloon__wrap { display: none; } } .mv-top .mv_balloon__wrap .mv_balloon__title { position: fixed; top: 100vh; } .mv_balloon__02 { display: none; } @media all and (max-width: 750px) { .mv_balloon__02 { opacity: 1 !important; display: block; } } .mv { width: 100%; height: auto; box-sizing: border-box; background-image: url(../images/top/mv/op_bg.png); background-repeat: no-repeat; background-position: center bottom; background-size: cover; pointer-events: none; } @media all and (max-width: 750px) { .mv { position: relative; } } .cat-home .mv { overflow: hidden; } .mv-wrap { z-index: 100; } .mv-flex { top: 0; width: 100%; display: flex; justify-content: center; } .mv-sticky { position: relative; top: 0; } @media all and (max-width: 750px) { .mv-sticky { position: relative; } } .mv-area__title { height: 100vh; } @media all and (max-width: 750px) { .mv-area__title { height: 100vh; height: 100dvh; } } .mv-title { width: 53.6805555556vw; height: 100vh; height: 100dvh; display: flex; align-items: center; } @media all and (max-width: 750px) { .mv-title { width: 80vw; } } .mv-title.is-motion { opacity: 1; } .mv-lead { position: relative; } .mv-lead__text { width: 52.7777777778vw; margin: 0 auto; box-sizing: border-box; padding-top: 17.3611111111vw; padding-bottom: 0; } @media all and (max-width: 750px) { .mv-lead__text { width: 69.3333333333vw; padding-top: 0; padding-bottom: 0; } } .mv-lead_line { position: relative; width: 100%; aspect-ratio: 1440/300; } @media all and (max-width: 750px) { .mv-lead_line { aspect-ratio: 750/100; } } .mv-area__main { position: relative; height: 100vh; } @media all and (max-width: 750px) { .mv-area__main { height: auto; } } .mv-main { width: 100%; height: 100vh; display: flex; align-items: flex-end; } @media all and (max-width: 750px) { .mv-main { height: auto; overflow: visible; } } .mv-side { position: absolute; height: calc(100% - 13.8888888889vw); bottom: 0; } .mv-side__left { left: 10.4166666667vw; z-index: 10; } .mv-side__right { right: 10.4166666667vw; z-index: 10; } @media all and (max-width: 750px) { .mv-side__sp { width: 69.4666666667vw; margin: 0 auto 5.3333333333vw; } } .mv-place__city, .mv-place__city_small, .mv-place__city_big, .mv-place__city_center { width: 100%; top: 0; left: 0; font-size: 0; } @media all and (max-width: 750px) { .mv-place__city, .mv-place__city_small, .mv-place__city_big, .mv-place__city_center { width: 100%; height: auto; top: 0; left: 0; } } .mv-base { position: relative; width: 100%; aspect-ratio: 1440/950; z-index: 0; } @media all and (max-width: 750px) { .mv-base { aspect-ratio: auto; height: 114.6666666667vw; } } .mv-place { position: absolute; width: 100%; aspect-ratio: 3000/3047; bottom: -12.6666666667vw; left: 50%; transform: translate(-50%, 0); } @media all and (max-width: 750px) { .mv-place { position: relative; top: auto; bottom: 30%; width: 179%; height: auto; } } .mv-scroll { position: absolute; right: 1.3888888889vw; bottom: 1.3888888889vw; } @media all and (max-width: 750px) { .mv-scroll { right: 4vw; bottom: 4vw; } } .mv-scroll__text { font-size: 1.25vw; color: #0060af; font-weight: 500; display: flex; align-items: center; transform: rotate(90deg); transform-origin: right center; } @media all and (max-width: 750px) { .mv-scroll__text { font-size: 4.2666666667vw; } } .mv-scroll__text::after { content: ""; display: inline-block; background: #0060af; width: 4.8611111111vw; height: 0.0694444444vw; margin-left: 0.6944444444vw; margin-top: 0.2vw; } @media all and (max-width: 750px) { .mv-scroll__text::after { width: 19.2vw; height: 0.2666666667vw; margin-left: 2.6666666667vw; margin-top: 0.4vw; } } .cat-home .special .special-wrap { width: 100%; display: flex; flex-wrap: wrap; } @media all and (max-width: 750px) { .cat-home .special .special-wrap { aspect-ratio: auto; display: block; } } .cat-home .special .special-wrap.is-reverse { flex-direction: row-reverse; } @media all and (max-width: 750px) { .cat-home .special .special-wrap.is-reverse { flex-direction: row; } } .cat-home .special .special-ph { width: 50%; font-size: 0; background-color: #0060af; } @media all and (max-width: 750px) { .cat-home .special .special-ph { width: 100%; } } .cat-home .special .special-contents { width: 50%; background-color: #0060af; color: #fff; display: flex; align-items: center; justify-content: center; } @media all and (max-width: 750px) { .cat-home .special .special-contents { width: 100%; display: block; box-sizing: border-box; padding: 10.6666666667vw 0 10.6666666667vw 10.6666666667vw; } } .cat-home .special .special-box__title--en, .cat-home .special .special-box__title--img { display: block; } .cat-home .special .special-box__title--en { color: #fff; font-size: 1.875vw; margin-bottom: 2.0833333333vw; } @media all and (max-width: 750px) { .cat-home .special .special-box__title--en { font-size: 4.5333333333vw; margin-bottom: 4vw; } } .cat-home .special .special-box__title--img { width: 30.5555555556vw; } @media all and (max-width: 750px) { .cat-home .special .special-box__title--img { width: 78.1333333333vw; } } .cat-home .special .special-box__text { font-size: 1.1111111111vw; margin: 1.7361111111vw 0; } @media all and (max-width: 750px) { .cat-home .special .special-box__text { font-size: 4.2666666667vw; margin: 4.6666666667vw 0; } } .cat-home .special2 { box-sizing: border-box; padding: 9.0277777778vw 0 9.7222222222vw; } @media all and (max-width: 750px) { .cat-home .special2 { padding: 20vw 0 20vw; } } .cat-home .special2.bg { background-image: url(../images/top/special2/bg.png); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; } @media all and (max-width: 750px) { .cat-home .special2.bg { background-image: url(../images/top/special2/bg_sp.png); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; } } .cat-home .special2 .top-special2-title__sub { font-size: 1.875vw; margin-bottom: 1.3888888889vw; line-height: 1; font-weight: bold; color: #0060af; } @media all and (max-width: 750px) { .cat-home .special2 .top-special2-title__sub { font-size: 4.5333333333vw; margin-bottom: 3.3333333333vw; } } .cat-home .special2 .top-special2-title__main { width: 48.5416666667vw; margin: 0 auto; font-size: 0; } @media all and (max-width: 750px) { .cat-home .special2 .top-special2-title__main { width: 61.2vw; } } .cat-home .special2 .special2-text { font-size: 1.1111111111vw; margin: 2.7777777778vw auto 2.7777777778vw; text-align: center; } @media all and (max-width: 750px) { .cat-home .special2 .special2-text { font-size: 4.2666666667vw; box-sizing: border-box; padding: 0 4vw; margin: 6.6666666667vw auto 2vw; text-align: left; } } .cat-home .special2 .special2-contents { position: relative; display: block; width: 100%; height: 34.7222222222vw; } @media all and (max-width: 750px) { .cat-home .special2 .special2-contents { height: 118.6666666667vw; } } .cat-home .special2 .special2-baloon__item--01 { width: 17.8472222222vw; left: 6.3194444444vw; top: 2.7777777778vw; z-index: 1; } @media all and (max-width: 750px) { .cat-home .special2 .special2-baloon__item--01 { width: 33.7333333333vw; left: 0; top: 6.6666666667vw; } } .cat-home .special2 .special2-baloon__item--02 { width: 20.7638888889vw; left: 22.0138888889vw; top: 6.3194444444vw; z-index: 5; } @media all and (max-width: 750px) { .cat-home .special2 .special2-baloon__item--02 { width: 39.8666666667vw; left: 30.1333333333vw; top: 12vw; } } .cat-home .special2 .special2-baloon__item--03 { width: 22.2222222222vw; left: 38.8888888889vw; top: 0; z-index: 4; } @media all and (max-width: 750px) { .cat-home .special2 .special2-baloon__item--03 { width: 42.6666666667vw; left: 62.5333333333vw; top: 0; } } .cat-home .special2 .special2-baloon__item--04 { width: 16.3194444444vw; left: 55vw; top: 13.8888888889vw; z-index: 3; } @media all and (max-width: 750px) { .cat-home .special2 .special2-baloon__item--04 { width: 31.3333333333vw; left: 10vw; top: 60vw; } } .cat-home .special2 .special2-baloon__item--05 { width: 19.5833333333vw; left: 72.6388888889vw; top: 4.4444444444vw; } @media all and (max-width: 750px) { .cat-home .special2 .special2-baloon__item--05 { width: 37.6vw; left: 54.6666666667vw; top: 57.3333333333vw; } } .cat-home .special2 .special2-baloon__item--06 { width: 11.875vw; left: 17.2916666667vw; top: 13.8888888889vw; z-index: 0; } @media all and (max-width: 750px) { .cat-home .special2 .special2-baloon__item--06 { width: 22.8vw; left: 19.6vw; top: 28vw; } } .cat-home .special2 .special2-baloon__item--07 { width: 11.5972222222vw; left: 63.125vw; top: 6.9444444444vw; z-index: 0; } @media all and (max-width: 750px) { .cat-home .special2 .special2-baloon__item--07 { width: 22vw; left: 37.3333333333vw; top: 69.3333333333vw; } } .cat-home .special2 .special2-baloon__normal--01 { width: 13.0555555556vw; left: 3.4027777778vw; top: -4.1666666667vw; } @media all and (max-width: 750px) { .cat-home .special2 .special2-baloon__normal--01 { width: 25.0666666667vw; left: -9.7333333333vw; top: -6.6666666667vw; } } .cat-home .special2 .special2-baloon__normal--02 { width: 25.625vw; left: 91.8055555556vw; top: -4.1666666667vw; } @media all and (max-width: 750px) { .cat-home .special2 .special2-baloon__normal--02 { width: 49.2vw; left: 87.4666666667vw; top: -13.3333333333vw; } } .cat-home .special2 .special2-baloon__normal--03 { width: 7.2222222222vw; left: 17.5694444444vw; top: 5.5555555556vw; } @media all and (max-width: 750px) { .cat-home .special2 .special2-baloon__normal--03 { width: 13.8666666667vw; left: 3.8666666667vw; top: 22.6666666667vw; } } .message-wrap { width: 100%; display: flex; flex-wrap: wrap; } @media all and (max-width: 750px) { .message-wrap { aspect-ratio: auto; display: block; } } .message-wrap.is-reverse { flex-direction: row-reverse; } @media all and (max-width: 750px) { .message-wrap.is-reverse { flex-direction: row; } } .top-message-title { font-size: 3.2638888889vw; margin-bottom: 2.7777777778vw; line-height: 1.8; } @media all and (max-width: 750px) { .top-message-title { font-size: 8.2666666667vw; margin-bottom: 6.6666666667vw; } } .top-message-title__sub { font-size: 1.875vw; margin-bottom: 1.3888888889vw; line-height: 1; font-weight: bold; color: #0060af; } @media all and (max-width: 750px) { .top-message-title__sub { font-size: 4.5333333333vw; margin-bottom: 3.3333333333vw; } } .top-message-title__main { width: 25.2777777778vw; margin: 0 auto; font-size: 0; } @media all and (max-width: 750px) { .top-message-title__main { width: 64vw; } } .message-ph { width: 50%; font-size: 0; background-color: #0060af; } @media all and (max-width: 750px) { .message-ph { width: 100%; font-size: 0; line-height: 0; } } .message-contents { width: 50%; background-color: #0060af; color: #fff; display: flex; align-items: center; justify-content: center; } @media all and (max-width: 750px) { .message-contents { width: 100%; display: block; box-sizing: border-box; padding: 10.6666666667vw 0 10.6666666667vw 10.6666666667vw; } } .message-name__dl { margin-bottom: 2.0833333333vw; display: flex; align-items: center; } @media all and (max-width: 750px) { .message-name__dl { margin-bottom: 6vw; } } .message-name__dt { font-size: 0.9722222222vw; line-height: 1; margin-right: 1.3888888889vw; } @media all and (max-width: 750px) { .message-name__dt { font-size: 3.2vw; margin-right: 4vw; } } .message-name__dd { font-size: 1.6666666667vw; } @media all and (max-width: 750px) { .message-name__dd { font-size: 4.5333333333vw; } } .top-message-chairperson .message-title__main { width: 28.2638888889vw; } @media all and (max-width: 750px) { .top-message-chairperson .message-title__main { width: 70.2666666667vw; } } .top-message-president .message-title { width: 30.3472222222vw; } @media all and (max-width: 750px) { .top-message-president .message-title { width: 76vw; } } .history { position: relative; box-sizing: border-box; padding-top: 6.25vw; z-index: 10; } @media all and (max-width: 750px) { .history { padding-top: 20vw; } } .history-head { display: flex; } .history-head__wrap { margin-left: 8.3333333333vw; font-weight: bold; } @media all and (max-width: 750px) { .history-head__wrap { margin-left: 12vw; } } .history-head__title--en { font-size: 1.875vw; color: #0060af; margin-bottom: 1.3888888889vw; } @media all and (max-width: 750px) { .history-head__title--en { font-size: 4.6666666667vw; margin-bottom: 5.3333333333vw; } } .history-head__title--ja { width: 28.125vw; margin-bottom: 1.3888888889vw; } @media all and (max-width: 750px) { .history-head__title--ja { width: 71.2vw; margin-bottom: 5.3333333333vw; } } .history-head__title--text { font-size: 1.1111111111vw; } @media all and (max-width: 750px) { .history-head__title--text { font-size: 4.2666666667vw; } } .history-head__box { display: flex; align-items: flex-end; } @media all and (max-width: 750px) { .history-head__box { display: block; } } .history-head__box .ico { background-color: #0060af; } .history-head__box .arrow-svg { background-color: #fff; } .history-head__box .btn-link { margin-left: 2.7777777778vw; } @media all and (max-width: 750px) { .history-head__box .btn-link { margin-top: 3.3333333333vw; margin-left: 0; } } .history-timeline { font-size: 0; line-height: 1; margin-top: 4.1666666667vw; display: flex; width: 825.4166666667vw; overflow: hidden; } @media all and (max-width: 750px) { .history-timeline { margin-top: 8vw; width: 2072vw; background-color: #0060af; } } @keyframes loop_animation_right_double { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .loop_right_double { animation: loop_animation_right_double 60s linear infinite; width: 412.7083333333vw; } @media all and (max-width: 750px) { .loop_right_double { width: 1036vw; } } .loop_right_double img { width: 412.7083333333vw; } @media all and (max-width: 750px) { .loop_right_double img { width: 1036vw; } } .number { z-index: 10; } .number-wrap { color: #fff; background-color: #0060af; aspect-ratio: 1440/765; display: flex; align-items: center; } @media all and (max-width: 750px) { .number-wrap { aspect-ratio: auto; display: block; } } .number-head { width: 50%; font-weight: bold; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } @media all and (max-width: 750px) { .number-head { width: 100%; display: block; box-sizing: border-box; padding: 14.6666666667vw 10vw; } } .number-head__title--en { font-size: 1.875vw; line-height: 1; margin-bottom: 2.0833333333vw; } @media all and (max-width: 750px) { .number-head__title--en { font-size: 4.6666666667vw; margin-bottom: 1em; } } .number-head__title--ja { width: 25.625vw; margin-bottom: 2.0833333333vw; } @media all and (max-width: 750px) { .number-head__title--ja { width: 64.4vw; margin-bottom: 6vw; } } .number-contents { width: 50%; height: 100%; border-left: solid 0.1388888889vw #fff; } @media all and (max-width: 750px) { .number-contents { width: 100%; border-left: none; } } .number-box { display: flex; border-top: solid 0.1388888889vw #fff; height: 50%; } @media all and (max-width: 750px) { .number-box { border-top: solid 0.2666666667vw #fff; height: auto; } } .number-founding, .number-design, .number-houses { width: 100%; display: flex; justify-content: center; align-items: center; box-sizing: border-box; padding: 1.7361111111vw; font-size: 0; } @media all and (max-width: 750px) { .number-founding, .number-design, .number-houses { height: auto; padding: 4.6666666667vw 4vw; } } .number-design, .number-houses { width: 50%; } .number-founding { height: 50%; } @media all and (max-width: 750px) { .number-founding { border-top: solid 0.2666666667vw #fff; height: auto; } } .number-design { border-right: solid 0.1388888889vw #fff; } @media all and (max-width: 750px) { .number-design { border-right: solid 0.2666666667vw #fff; } } .news { box-sizing: border-box; width: 100%; padding: 6.25vw 0 0; } @media all and (max-width: 750px) { .news { padding: 0vw 3.3333333333vw 0; } } .btn-news { position: relative; font-weight: bold; display: flex; justify-content: center; align-items: center; width: 22.9166666667vw; height: 4.1666666667vw; background-color: #0060af; color: #fff; margin: 2.7777777778vw auto 0; text-align: center; border-radius: 2.0833333333vw; overflow: hidden; } @media all and (max-width: 750px) { .btn-news { width: 82vw; height: 13.8666666667vw; border-radius: 8vw; margin: 9.3333333333vw auto 0; } } .btn-news__contents { display: flex; align-items: center; } .btn-news__contents::before { content: ""; display: inline-block; width: 2.0833333333vw; height: 1.25vw; background-image: url(../images/common/ico_arrow.svg); background-repeat: no-repeat; background-size: contain; margin-right: 1.3888888889vw; } @media all and (max-width: 750px) { .btn-news__contents::before { width: 6.9333333333vw; height: 4vw; margin-right: 4vw; } } .btn-news__contents--ja { font-size: 0.9722222222vw; } @media all and (max-width: 750px) { .btn-news__contents--ja { font-size: 4vw; } } .cat-home .release { padding-bottom: 0; } @media all and (max-width: 750px) { .cat-home .release { padding-bottom: 0; } } .cat-home .end-text { margin: 6.9444444444vw auto; width: 30.8333333333vw; } @media all and (max-width: 750px) { .cat-home .end-text { width: 80.8vw; margin: 17.3333333333vw auto; } } .content-baloon { pointer-events: none; z-index: 100; } .special-baloon__item--01 { width: 20.6944444444vw; left: -10.625vw; top: 4.5138888889vw; } @media all and (max-width: 750px) { .special-baloon__item--01 { width: 30.1333333333vw; left: -23.7333333333vw; top: 4.6666666667vw; } } .special-baloon__item--02 { width: 7.0138888889vw; left: 80.2083333333vw; top: 4.8611111111vw; } @media all and (max-width: 750px) { .special-baloon__item--02 { width: 10.9333333333vw; left: 74.4vw; top: 4vw; } } .special-baloon__item--03 { width: 14.0277777778vw; left: 88.4722222222vw; top: 6.9444444444vw; } @media all and (max-width: 750px) { .special-baloon__item--03 { width: 21.0666666667vw; left: 91.4666666667vw; top: 10vw; } } .special-baloon__item--04 { width: 24.6527777778vw; left: -20.4861111111vw; bottom: -14.5833333333vw; } @media all and (max-width: 750px) { .special-baloon__item--04 { width: 35.7333333333vw; left: -26.6666666667vw; bottom: -36vw; } } .special-baloon__item--05 { width: 17.5694444444vw; left: 78.125vw; bottom: -6.9444444444vw; } .message-baloon__item--00 { width: 17.5694444444vw; left: -12.5vw; top: -8.3333333333vw; } @media all and (max-width: 750px) { .message-baloon__item--00 { width: 37.8666666667vw; left: -26.6666666667vw; top: -20vw; } } .message-baloon__item--01 { width: 17.5694444444vw; left: 76.3194444444vw; top: -5.5555555556vw; } @media all and (max-width: 750px) { .message-baloon__item--01 { width: 29.2vw; left: 86.5333333333vw; top: -8vw; } } .message-baloon__item--02 { width: 7.2222222222vw; left: 82.2916666667vw; top: 51.3888888889vw; opacity: 0.8; } @media all and (max-width: 750px) { .message-baloon__item--02 { width: 11.6vw; left: 77.6vw; top: auto; bottom: 17.3333333333vw; } } .message-baloon__item--03 { width: 12.6388888889vw; left: 91.6666666667vw; bottom: 0vw; } @media all and (max-width: 750px) { .message-baloon__item--03 { width: 18.9333333333vw; left: 91.6vw; } } .message-baloon__item--04 { width: 10.4861111111vw; left: 65.625vw; bottom: -20.8333333333vw; } @media all and (max-width: 750px) { .message-baloon__item--04 { width: 20.8vw; left: 55.3333333333vw; bottom: -21.3333333333vw; } } .message-baloon__item--05 { display: none; } @media all and (max-width: 750px) { .message-baloon__item--05 { display: block; width: 26.2666666667vw; left: 68.2666666667vw; top: 124vw; } } .number-baloon__item--01 { width: 9.5833333333vw; left: 2.4305555556vw; top: -3.4722222222vw; } .number-baloon__item--02 { width: 16.875vw; left: 93.0555555556vw; top: -9.0277777778vw; } .news-baloon__item--01 { width: 33.1944444444vw; left: -20.9027777778vw; top: -5.5555555556vw; } @media all and (max-width: 750px) { .news-baloon__item--01 { width: 45.7333333333vw; left: -33.2vw; top: 43.7333333333vw; } } .news-baloon__item--02 { width: 8.4027777778vw; left: 79.0972222222vw; top: 11.8055555556vw; } @media all and (max-width: 750px) { .news-baloon__item--02 { width: 13.3333333333vw; left: 65.8666666667vw; top: 60vw; } } .news-baloon__item--03 { width: 15.2083333333vw; left: 89.5138888889vw; top: 0; } @media all and (max-width: 750px) { .news-baloon__item--03 { width: 22.8vw; left: 81.8666666667vw; top: 50.6666666667vw; } } .cat-home .movie { width: 100%; box-sizing: border-box; padding: 9.0277777778vw 8.3333333333vw; } @media all and (max-width: 750px) { .cat-home .movie { padding: 20vw 4vw 26.6666666667vw; } } .cat-home .movie .movie-wrap { position: relative; margin: 0 auto; width: 83.3333333333vw; aspect-ratio: 16/9; } @media all and (max-width: 750px) { .cat-home .movie .movie-wrap { width: 100%; aspect-ratio: auto; } } .cat-home .movie .movie-btn { position: relative; width: 100%; height: 100%; cursor: pointer; font-size: 0; } @media all and (max-width: 750px) { .cat-home .movie .movie-btn { width: 100%; aspect-ratio: 16/9; } } .cat-home .movie .movie-btn:hover { opacity: 1; } .cat-home .movie .movie-title { position: absolute; top: 4.1666666667vw; left: 4.1666666667vw; z-index: 10; } @media all and (max-width: 750px) { .cat-home .movie .movie-title { position: relative; top: 0; left: 0; } } .cat-home .movie .movie-title__en, .cat-home .movie .movie-title__ja, .cat-home .movie .movie-title__sub { display: block; } .cat-home .movie .movie-title__en, .cat-home .movie .movie-title__sub { color: #fff; position: relative; left: 0.3472222222vw; text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2); } @media all and (max-width: 750px) { .cat-home .movie .movie-title__en, .cat-home .movie .movie-title__sub { color: #000; text-shadow: none; } } .cat-home .movie .movie-title__en { font-size: 1.875vw; font-weight: bold; margin-bottom: 1.3888888889vw; } @media all and (max-width: 750px) { .cat-home .movie .movie-title__en { font-size: 4.5333333333vw; text-align: center; color: #0060af; margin-bottom: 5.3333333333vw; } } .cat-home .movie .movie-title__ja { width: 39.7916666667vw; } @media all and (max-width: 750px) { .cat-home .movie .movie-title__ja { width: 64.6666666667vw; margin: 0 auto; } } .cat-home .movie .movie-title__sub { font-size: 1.1111111111vw; margin-top: 1.3888888889vw; } @media all and (max-width: 750px) { .cat-home .movie .movie-title__sub { font-size: 4.2666666667vw; margin-top: 4vw; margin-bottom: 4vw; text-align: center; } } .cat-home .movie .movie-arrow { position: absolute; width: 6.8055555556vw; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media all and (max-width: 750px) { .cat-home .movie .movie-arrow { width: 15.2vw; } } .cat-message .mv { position: relative; font-size: 0; } .cat-message .kv-title__lead { display: block; font-size: 1.6666666667vw; margin-bottom: 2.4305555556vw; } @media all and (max-width: 750px) { .cat-message .kv-title__lead { font-size: 3.7333333333vw; margin-bottom: 5.3333333333vw; } } .cat-message .kv-plate { position: absolute; bottom: -3.125vw; right: 0; background-color: rgba(0, 95, 175, 0.95); width: 41.6666666667vw; aspect-ratio: 600/364; box-sizing: border-box; display: flex; justify-content: center; align-items: center; font-weight: bold; } @media all and (max-width: 750px) { .cat-message .kv-plate { bottom: -4vw; width: 96vw; aspect-ratio: 720/402; } } .cat-message .kv-contents { color: #fff; } .cat-message .kv-title { width: 31.9444444444vw; margin-bottom: 1.3888888889vw; } @media all and (max-width: 750px) { .cat-message .kv-title { width: 71.3333333333vw; margin-bottom: 5.3333333333vw; } } .cat-message .kv-dl { display: flex; align-items: center; } .cat-message .kv-dt { position: relative; font-size: 1.0416666667vw; padding-right: 1.4285714286vw; margin-right: 1.4285714286vw; font-weight: normal; } @media all and (max-width: 750px) { .cat-message .kv-dt { font-size: 2.9333333333vw; padding-right: 2.6666666667vw; margin-right: 2.6666666667vw; } } .cat-message .kv-dt::after { content: ""; display: block; background-color: #fff; width: 0.1388888889vw; height: 1.7361111111vw; position: absolute; top: 0; right: 0; } @media all and (max-width: 750px) { .cat-message .kv-dt::after { width: 0.2666666667vw; height: 4vw; } } .cat-message .kv-dd { font-size: 1.3194444444vw; } @media all and (max-width: 750px) { .cat-message .kv-dd { font-size: 4.1333333333vw; } } .cat-message .kv-note { font-size: 1.3194444444vw; margin-top: 1.3888888889vw; font-weight: bold; } @media all and (max-width: 750px) { .cat-message .kv-note { font-size: 3.4666666667vw; margin-top: 3.3333333333vw; } } .cat-message .message-content { width: 100%; display: flex; box-sizing: border-box; justify-content: space-between; margin-top: 9.0277777778vw; } @media all and (max-width: 750px) { .cat-message .message-content { display: block; margin-top: 33.3333333333vw; } } .cat-message .message-content .message-block { box-sizing: border-box; } @media all and (max-width: 750px) { .cat-message .message-content .message-block { padding: 0 4vw; margin-bottom: 10.6666666667vw; } } .cat-message .message-content__001 { padding-left: 8.3333333333vw; } @media all and (max-width: 750px) { .cat-message .message-content__001 { padding-left: 0; } } .cat-message .message-content__001 .message-block { width: 40.2777777778vw; } @media all and (max-width: 750px) { .cat-message .message-content__001 .message-block { width: 100%; } } .cat-message .message-content__001 .message-title { width: 28.1944444444vw; } @media all and (max-width: 750px) { .cat-message .message-content__001 .message-title { width: 75.7333333333vw; } } .cat-message .message-content__001 .message-ph { width: 44.0972222222vw; } @media all and (max-width: 750px) { .cat-message .message-content__001 .message-ph { width: 96vw; margin: 0 0 0 auto; } } .cat-message .message-content__001 .message-ph::before { width: 41.3194444444vw; height: 45.2777777778vw; right: 0; bottom: -2.3611111111vw; } @media all and (max-width: 750px) { .cat-message .message-content__001 .message-ph::before { width: 90vw; height: 98.8vw; bottom: -5.3333333333vw; } } .cat-message .message-content__002 { margin-bottom: 14.9305555556vw; } @media all and (max-width: 750px) { .cat-message .message-content__002 { margin-bottom: 0; } } .cat-message .message-content__002 .message-block { width: 40.2777777778vw; position: relative; right: 8.3333333333vw; top: 14.9305555556vw; } @media all and (max-width: 750px) { .cat-message .message-content__002 .message-block { width: 100%; position: static; } } .cat-message .message-content__002 .message-block::before { content: ""; display: block; position: absolute; width: 23.9583333333vw; height: 41.4583333333vw; top: -7.1527777778vw; left: -7.1527777778vw; background-color: #fff; z-index: 5; } @media all and (max-width: 750px) { .cat-message .message-content__002 .message-block::before { content: none; display: none; } } @media all and (max-width: 750px) { .cat-message .message-content__002 .message-block { width: 100%; } } .cat-message .message-content__002 .message-title { width: 36.3194444444vw; position: relative; z-index: 5; } @media all and (max-width: 750px) { .cat-message .message-content__002 .message-title { width: 82.5333333333vw; } } .cat-message .message-content__002 .message-ph { width: 61.6666666667vw; } @media all and (max-width: 750px) { .cat-message .message-content__002 .message-ph { width: 96vw; } } .cat-message .message-content__003 { width: 100vw; padding-left: 8.3333333333vw; } @media all and (max-width: 750px) { .cat-message .message-content__003 { width: 100%; padding-left: 0; } } .cat-message .message-content__003 .message-block { width: 40.2777777778vw; } @media all and (max-width: 750px) { .cat-message .message-content__003 .message-block { width: 100%; } } .cat-message .message-content__003 .message-title { width: 31.5972222222vw; } @media all and (max-width: 750px) { .cat-message .message-content__003 .message-title { width: 84.9333333333vw; } } .cat-message .message-content__003 .message-ph { width: 44.0972222222vw; } @media all and (max-width: 750px) { .cat-message .message-content__003 .message-ph { width: 96vw; margin: 0 0 0 auto; } } .cat-message .message-content__003 .message-ph::before { width: 36.9444444444vw; height: 48.1944444444vw; right: 0; top: -2.7777777778vw; } @media all and (max-width: 750px) { .cat-message .message-content__003 .message-ph::before { width: 85.3333333333vw; height: 111.3333333333vw; top: -5.3333333333vw; } } .cat-message .message-content__003--sub { position: relative; box-sizing: border-box; padding-left: 27.0833333333vw; margin-top: 4.8611111111vw; width: 93.4027777778vw; } .cat-message .message-content__003--sub::before { content: ""; display: block; width: 15.4861111111vw; height: 18.9583333333vw; background-color: #0060af; position: absolute; top: 0; left: 0; z-index: 0; } @media all and (max-width: 750px) { .cat-message .message-content__003--sub { padding-left: 0; width: 100%; padding: 0 4vw; margin-top: 6.6666666667vw; display: none; } } .cat-message .message-content__004 { box-sizing: border-box; padding: 0 8.3333333333vw; } @media all and (max-width: 750px) { .cat-message .message-content__004 { padding: 0; margin-top: 80vw; } .cat-message .message-content__004::before { content: ""; display: block; width: 50vw; height: 48.2666666667vw; background-color: #0060af; position: absolute; top: -69.3333333333vw; left: 0; } } .cat-message .message-content__004 .message-block { width: 40.2777777778vw; } @media all and (max-width: 750px) { .cat-message .message-content__004 .message-block { width: 100%; } } @media all and (max-width: 750px) { .cat-message .message-content__004 .message-block { width: 100%; } } .cat-message .message-content__004 .message-title { width: 37.0138888889vw; position: relative; z-index: 5; } @media all and (max-width: 750px) { .cat-message .message-content__004 .message-title { width: 82.5333333333vw; } } .cat-message .message-content__004 .message-ph { width: 36.8055555556vw; } @media all and (max-width: 750px) { .cat-message .message-content__004 .message-ph { width: 85.6vw; left: 8.6666666667vw; } } .cat-message .message-content__004 .message-ph::before { width: 24.2361111111vw; height: 24.2361111111vw; left: -2.4305555556vw; top: 14.9305555556vw; } @media all and (max-width: 750px) { .cat-message .message-content__004 .message-ph::before { width: 56.4vw; height: 56.4vw; left: -4.6666666667vw; bottom: -4.6666666667vw; top: auto; } } .cat-message .message-content__005 { padding-left: 8.3333333333vw; } @media all and (max-width: 750px) { .cat-message .message-content__005 { padding-left: 0; } } .cat-message .message-content__005 .message-block { width: 40.2777777778vw; } @media all and (max-width: 750px) { .cat-message .message-content__005 .message-block { width: 100%; } } .cat-message .message-content__005 .message-title { width: 38.0555555556vw; } @media all and (max-width: 750px) { .cat-message .message-content__005 .message-title { width: 83.3333333333vw; } } .cat-message .message-content__005 .message-ph { width: 44.0972222222vw; } @media all and (max-width: 750px) { .cat-message .message-content__005 .message-ph { width: 96vw; margin: 0 0 0 auto; } } .cat-message .message-content__005 .message-ph::before { width: 41.5972222222vw; height: 19.3055555556vw; right: 0; bottom: -2.7777777778vw; } @media all and (max-width: 750px) { .cat-message .message-content__005 .message-ph::before { width: 90.6666666667vw; height: 42.1333333333vw; bottom: -5.3333333333vw; } } .cat-message .message-title { position: relative; z-index: 5; padding-top: 2.7777777778vw; margin-bottom: 3.125vw; } @media all and (max-width: 750px) { .cat-message .message-title { padding-top: 6vw; margin-bottom: 9.3333333333vw; } } .cat-message .message-title::before { content: ""; display: block; width: 2.7777777778vw; height: 0.2083333333vw; background-color: #0060af; position: absolute; top: 0; left: 0; box-sizing: border-box; } @media all and (max-width: 750px) { .cat-message .message-title::before { width: 8.6666666667vw; height: 0.4vw; } } .cat-message .message-text { position: relative; z-index: 5; color: #000033; font-size: 1.1111111111vw; } @media all and (max-width: 750px) { .cat-message .message-text { font-size: 4.2666666667vw; } } .cat-message .message-last { position: relative; width: 100%; aspect-ratio: 1440/820; font-size: 0; } @media all and (max-width: 750px) { .cat-message .message-last { aspect-ratio: 750/1200; } } .cat-message .message-last__ph { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); width: 47.0138888889vw; overflow: hidden; } @media all and (max-width: 750px) { .cat-message .message-last__ph { width: 95.3333333333vw; } } .cat-message .message-ph { position: relative; z-index: 1; } .cat-message .message-ph img { display: block; position: relative; z-index: 10; } .cat-message .message-ph::before { content: ""; display: block; background: #0060af; position: absolute; z-index: 0; } .cat-message .baloon-00__01 { width: 18.9583333333vw; left: 88.5416666667vw; top: -2.2916666667vw; } @media all and (max-width: 750px) { .cat-message .baloon-00__01 { width: 36.4vw; left: 81.3333333333vw; top: 6.4vw; } } .cat-message .baloon-00__02 { width: 30.2777777778vw; left: -17.0833333333vw; top: 21.3194444444vw; } @media all and (max-width: 750px) { .cat-message .baloon-00__02 { width: 58.1333333333vw; left: -44.9333333333vw; top: 15.2vw; } } .cat-message .baloon-00__03 { width: 14.7916666667vw; left: 14.0277777778vw; top: 41.6666666667vw; } @media all and (max-width: 750px) { .cat-message .baloon-00__03 { width: 28.4vw; left: -16.6666666667vw; top: 134.6666666667vw; } } .cat-message .baloon-00__04 { width: 11.5277777778vw; left: 78.8888888889vw; top: 21.1111111111vw; } @media all and (max-width: 750px) { .cat-message .baloon-00__04 { width: 22.1333333333vw; left: 81.6vw; top: 84vw; } } .cat-message .baloon-01__01 { width: 7.9861111111vw; left: 71.3194444444vw; bottom: -16.6666666667vw; } @media all and (max-width: 750px) { .cat-message .baloon-01__01 { width: 15.3333333333vw; left: 44.1333333333vw; top: auto; bottom: -24.8vw; } } .cat-message .baloon-01__02 { width: 19.375vw; left: 82.8472222222vw; bottom: -22.9861111111vw; } @media all and (max-width: 750px) { .cat-message .baloon-01__02 { width: 39.6vw; left: 66.2666666667vw; bottom: -26.6666666667vw; } } .cat-message .baloon-02__01 { width: 22.7777777778vw; left: -14.8611111111vw; top: -19.0972222222vw; } @media all and (max-width: 750px) { .cat-message .baloon-02__01 { width: 42.6666666667vw; left: -32.9333333333vw; top: auto; bottom: 66.6666666667vw; } } .cat-message .baloon-02__02 { width: 15.9027777778vw; left: 4.8611111111vw; bottom: -12.1527777778vw; } @media all and (max-width: 750px) { .cat-message .baloon-02__02 { width: 30.5333333333vw; left: 17.4666666667vw; bottom: -12vw; } } .cat-message .baloon-03__01 { width: 7.2222222222vw; left: 12.7777777778vw; bottom: 13.1944444444vw; } @media all and (max-width: 750px) { .cat-message .baloon-03__01 { width: 13.8666666667vw; left: 24.5333333333vw; bottom: -33.3333333333vw; } } .cat-message .baloon-03__02 { width: 19.3055555556vw; left: -9.2361111111vw; bottom: -2.3611111111vw; } @media all and (max-width: 750px) { .cat-message .baloon-03__02 { width: 37.0666666667vw; left: -17.7333333333vw; bottom: -64vw; } } .cat-message .baloon-04__01 { width: 21.4583333333vw; left: 93.8888888889vw; top: 21.5277777778vw; } @media all and (max-width: 750px) { .cat-message .baloon-04__01 { width: 41.8666666667vw; left: 87.4666666667vw; top: auto; bottom: -13.3333333333vw; } } .cat-message .baloon-last__01 { width: 30.2777777778vw; left: -17.9166666667vw; top: -8.75vw; } @media all and (max-width: 750px) { .cat-message .baloon-last__01 { width: 60.8vw; left: -45.0666666667vw; top: 6.9333333333vw; } } .cat-message .baloon-last__02 { width: 10.4166666667vw; left: 13.0555555556vw; top: 13.1944444444vw; } @media all and (max-width: 750px) { .cat-message .baloon-last__02 { width: 20vw; left: 20vw; top: 48.6666666667vw; } } .cat-message .baloon-last__03 { width: 8.125vw; left: 77.9166666667vw; top: 15.6944444444vw; } @media all and (max-width: 750px) { .cat-message .baloon-last__03 { width: 14.8vw; left: 82.8vw; top: 71.4666666667vw; } } .cat-message .baloon-last__04 { width: 15.9722222222vw; left: 91.875vw; top: -5.6944444444vw; } @media all and (max-width: 750px) { .cat-message .baloon-last__04 { width: 30.6666666667vw; left: 86.6666666667vw; top: 8vw; } } .cat-message .baloon-last__05 { width: 6.5277777778vw; left: -1.5972222222vw; top: 38.2638888889vw; } @media all and (max-width: 750px) { .cat-message .baloon-last__05 { width: 13.4666666667vw; left: -4.9333333333vw; top: 118vw; } } .cat-message .baloon-last__06 { width: 15.4166666667vw; left: 10.2777777778vw; top: 39.5138888889vw; } @media all and (max-width: 750px) { .cat-message .baloon-last__06 { width: 29.0666666667vw; left: 4.8vw; top: 128vw; } } .cat-message .baloon-last__07 { width: 15.4166666667vw; left: 79.5833333333vw; top: 36.8055555556vw; } @media all and (max-width: 750px) { .cat-message .baloon-last__07 { width: 29.6vw; left: 78.6666666667vw; top: 118.6666666667vw; } } .cat-chairperson .kv-title { width: 28.9583333333vw; } @media all and (max-width: 750px) { .cat-chairperson .kv-title { width: 66.2666666667vw; } } .cat-chairperson .kv-title .kv-title__lead { display: block; font-size: 1.6666666667vw; margin-bottom: 2.4305555556vw; } @media all and (max-width: 750px) { .cat-chairperson .kv-title .kv-title__lead { font-size: 3.7333333333vw; margin-bottom: 5.3333333333vw; } } .cat-chairperson .kv-note { font-size: 1.3194444444vw; } @media all and (max-width: 750px) { .cat-chairperson .kv-note { font-size: 3.4666666667vw; } } .cat-chairperson .message-content__001 .message-title { width: 26.1111111111vw; } @media all and (max-width: 750px) { .cat-chairperson .message-content__001 .message-title { width: 70vw; } } .cat-chairperson .message-content__002 { margin-bottom: 3.4722222222vw; } .cat-chairperson .message-content__002 .message-block::before { width: 100vw; } .cat-chairperson .message-content__002 .message-title { width: 34.7916666667vw; } @media all and (max-width: 750px) { .cat-chairperson .message-content__002 .message-title { width: 55.6vw; } } .cat-chairperson .message-content__003 { display: flex; align-items: center; } @media all and (max-width: 750px) { .cat-chairperson .message-content__003 { display: block; } } .cat-chairperson .message-content__003 .message-title { width: 19.5138888889vw; } @media all and (max-width: 750px) { .cat-chairperson .message-content__003 .message-title { width: 52.6666666667vw; } } .cat-chairperson .message-content__004 { margin-bottom: 8.3333333333vw; } @media all and (max-width: 750px) { .cat-chairperson .message-content__004 { margin-top: 33.3333333333vw; } } @media all and (max-width: 750px) { .cat-chairperson .message-content__004::before { top: auto; bottom: -7.5vw; left: 4vw; width: 56.4vw; height: 56.4vw; background-color: #0060af; } } .cat-chairperson .message-content__004 .message-title { width: 23.6111111111vw; position: relative; z-index: 5; } @media all and (max-width: 750px) { .cat-chairperson .message-content__004 .message-title { width: 63.2vw; } } @media all and (max-width: 750px) { .cat-chairperson .message-content__004 .message-ph { width: 85.6vw; left: 10.6666666667vw; } .cat-chairperson .message-content__004 .message-ph::before { content: none; display: none; } } .cat-chairperson .message-last { position: relative; width: 100%; aspect-ratio: 1440/820; font-size: 0; } @media all and (max-width: 750px) { .cat-chairperson .message-last { aspect-ratio: 750/1200; } } .cat-chairperson .message-last__ph { position: absolute; left: 50%; transform: translate(-50%, 0); width: 46.3888888889vw; } @media all and (max-width: 750px) { .cat-chairperson .message-last__ph { width: 70vw; } } .cat-chairperson .baloon-00__01 { width: 18.9583333333vw; left: 88.5416666667vw; top: -2.2916666667vw; } @media all and (max-width: 750px) { .cat-chairperson .baloon-00__01 { width: 36.4vw; left: 81.3333333333vw; top: 6.4vw; } } .cat-chairperson .baloon-00__02 { width: 30.2777777778vw; left: -17.0833333333vw; top: 21.3194444444vw; } @media all and (max-width: 750px) { .cat-chairperson .baloon-00__02 { width: 58.1333333333vw; left: -44.9333333333vw; top: 15.2vw; } } .cat-chairperson .baloon-00__03 { width: 14.7916666667vw; left: 14.0277777778vw; top: 41.6666666667vw; } @media all and (max-width: 750px) { .cat-chairperson .baloon-00__03 { width: 28.4vw; left: -20vw; top: 106.6666666667vw; } } .cat-chairperson .baloon-00__04 { width: 11.5277777778vw; left: 78.8888888889vw; top: 17.6388888889vw; } @media all and (max-width: 750px) { .cat-chairperson .baloon-00__04 { width: 22.1333333333vw; left: 81.6vw; top: 80vw; } } .cat-chairperson .baloon-01__01 { width: 7.9861111111vw; left: 71.3194444444vw; bottom: -16.6666666667vw; } @media all and (max-width: 750px) { .cat-chairperson .baloon-01__01 { width: 15.3333333333vw; left: 44.1333333333vw; top: auto; bottom: -24.8vw; } } .cat-chairperson .baloon-01__02 { width: 19.375vw; left: 82.8472222222vw; bottom: -22.9861111111vw; } @media all and (max-width: 750px) { .cat-chairperson .baloon-01__02 { width: 39.6vw; left: 66.2666666667vw; bottom: -26.6666666667vw; } } .cat-chairperson .baloon-02__01 { width: 22.7777777778vw; left: -14.8611111111vw; top: -19.0972222222vw; } @media all and (max-width: 750px) { .cat-chairperson .baloon-02__01 { width: 42.6666666667vw; left: -32.9333333333vw; top: auto; bottom: 60vw; } } .cat-chairperson .baloon-02__02 { width: 15.9027777778vw; left: 4.8611111111vw; bottom: -12.1527777778vw; } @media all and (max-width: 750px) { .cat-chairperson .baloon-02__02 { width: 30.5333333333vw; left: 17.4666666667vw; bottom: -20vw; } } .cat-chairperson .baloon-03__01 { width: 7.2222222222vw; left: 12.7777777778vw; bottom: 13.1944444444vw; } @media all and (max-width: 750px) { .cat-chairperson .baloon-03__01 { width: 13.8666666667vw; left: 24.5333333333vw; bottom: -33.3333333333vw; } } .cat-chairperson .baloon-03__02 { width: 19.3055555556vw; left: -9.2361111111vw; bottom: -2.3611111111vw; } @media all and (max-width: 750px) { .cat-chairperson .baloon-03__02 { width: 37.0666666667vw; left: -17.7333333333vw; bottom: -64vw; } } .cat-chairperson .baloon-04__01 { width: 21.4583333333vw; left: 93.8888888889vw; top: 21.5277777778vw; } @media all and (max-width: 750px) { .cat-chairperson .baloon-04__01 { width: 41.8666666667vw; left: 87.4666666667vw; top: auto; bottom: -13.3333333333vw; } } .cat-chairperson .baloon-last__01 { width: 30.2777777778vw; left: -17.9166666667vw; top: -8.75vw; } @media all and (max-width: 750px) { .cat-chairperson .baloon-last__01 { width: 60.8vw; left: -45.0666666667vw; top: 6.9333333333vw; } } .cat-chairperson .baloon-last__02 { width: 10.4166666667vw; left: 13.0555555556vw; top: 13.1944444444vw; } @media all and (max-width: 750px) { .cat-chairperson .baloon-last__02 { width: 20vw; left: 20vw; top: 32.6666666667vw; } } .cat-chairperson .baloon-last__03 { width: 8.125vw; left: 77.9166666667vw; top: 15.6944444444vw; } @media all and (max-width: 750px) { .cat-chairperson .baloon-last__03 { width: 14.8vw; left: 82.8vw; top: 71.4666666667vw; } } .cat-chairperson .baloon-last__04 { width: 15.9722222222vw; left: 91.875vw; top: -5.6944444444vw; } @media all and (max-width: 750px) { .cat-chairperson .baloon-last__04 { width: 30.6666666667vw; left: 86.6666666667vw; top: 8vw; } } .cat-chairperson .baloon-last__05 { width: 6.5277777778vw; left: -1.5972222222vw; top: 38.2638888889vw; } @media all and (max-width: 750px) { .cat-chairperson .baloon-last__05 { width: 13.4666666667vw; left: -4.9333333333vw; top: 118vw; } } .cat-chairperson .baloon-last__06 { width: 15.4166666667vw; left: 10.2777777778vw; top: 39.5138888889vw; } @media all and (max-width: 750px) { .cat-chairperson .baloon-last__06 { width: 29.0666666667vw; left: 4.8vw; top: 130.6666666667vw; } } .cat-chairperson .baloon-last__07 { width: 15.4166666667vw; left: 79.5833333333vw; top: 36.8055555556vw; } @media all and (max-width: 750px) { .cat-chairperson .baloon-last__07 { width: 29.6vw; left: 78.6666666667vw; top: 118.6666666667vw; } } .cat-number .number-title { position: relative; text-align: center; width: 54.375vw; margin: 0 auto 9.375vw; /* padding-top: 15.9722222222vw; */ padding-top: 8.972222vw; padding-bottom: 3.2142857143vw; box-sizing: border-box; } @media all and (max-width: 750px) { .cat-number .number-title { width: 67.2vw; margin: 0 auto 23.3333333333vw; padding-top: 37.3333333333vw; padding-bottom: 8vw; } } .cat-number .number-title::after { content: ""; display: block; width: 4.7222222222vw; height: 0.2083333333vw; background-color: #0060af; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); } @media all and (max-width: 750px) { .cat-number .number-title::after { width: 9.0666666667vw; height: 0.5333333333vw; } } .cat-number .number-title .number-title__en { color: #0060af; font-size: 2.3611111111vw; margin-bottom: 3.125vw; font-weight: 600; } @media all and (max-width: 750px) { .cat-number .number-title .number-title__en { font-size: 4.5333333333vw; margin-bottom: 5.0666666667vw; } } .cat-number .number-data { width: 85.7142857143vw; margin: 0 auto; box-sizing: border-box; } @media all and (max-width: 750px) { .cat-number .number-data { width: 100%; padding: 0 4vw; } } .cat-number .number-note { box-sizing: border-box; padding: 3.4722222222vw 0 8.3333333333vw; } @media all and (max-width: 750px) { .cat-number .number-note { padding: 8vw 0 28.6666666667vw; } } .cat-number .number-note__text { text-align: center; font-size: 1.25vw; } @media all and (max-width: 750px) { .cat-number .number-note__text { font-size: 4vw; } } .cat-number .baloon-00__01 { width: 15.2083333333vw; left: -5vw; top: 2.3611111111vw; } @media all and (max-width: 750px) { .cat-number .baloon-00__01 { width: 29.2vw; left: -17.4666666667vw; top: 5.0666666667vw; } } .cat-number .baloon-00__02 { width: 7.0138888889vw; left: 12.2916666667vw; top: 10.9722222222vw; } @media all and (max-width: 750px) { .cat-number .baloon-00__02 { width: 13.4666666667vw; left: 5.0666666667vw; top: 42.1333333333vw; } } .cat-number .baloon-00__03 { width: 27.5694444444vw; left: 81.875vw; top: -12.8472222222vw; } @media all and (max-width: 750px) { .cat-number .baloon-00__03 { width: 54.9333333333vw; left: 67.2vw; top: -16.8vw; } } .cat-number .baloon-00__04 { width: 6.5972222222vw; left: 78.6111111111vw; top: 26.5277777778vw; } @media all and (max-width: 750px) { .cat-number .baloon-00__04 { width: 12.6666666667vw; left: 58.6666666667vw; top: 79.7333333333vw; } } .cat-number .baloon-00__05 { width: 15.1388888889vw; left: 88.8888888889vw; top: 22.9861111111vw; } @media all and (max-width: 750px) { .cat-number .baloon-00__05 { width: 29.0666666667vw; left: 78.4vw; top: 72.9333333333vw; } } .cat-number .baloon-00__06 { width: 11.875vw; left: 3.1944444444vw; top: 29.7222222222vw; } @media all and (max-width: 750px) { .cat-number .baloon-00__06 { width: 22.8vw; left: -2.6666666667vw; top: 81.3333333333vw; } } .cat-number .baloon-00__07 { width: 18.125vw; left: -12.7777777778vw; top: 69.5138888889vw; } @media all and (max-width: 750px) { .cat-number .baloon-00__07 { display: none; } } .cat-number .baloon-00__08 { width: 6.7361111111vw; left: 2.0138888889vw; top: 89.375vw; } @media all and (max-width: 750px) { .cat-number .baloon-00__08 { display: none; } } .cat-number .baloon-00__09 { width: 17.5694444444vw; left: 93.8888888889vw; top: 122.2222222222vw; } @media all and (max-width: 750px) { .cat-number .baloon-00__09 { display: none; } } .cat-number .baloon-00__10 { width: 7.2222222222vw; left: 92.5vw; top: 142.7777777778vw; } @media all and (max-width: 750px) { .cat-number .baloon-00__10 { display: none; } } .cat-number .baloon-00__11 { width: 17.2222222222vw; left: -12.7777777778vw; top: 151.1805555556vw; } @media all and (max-width: 750px) { .cat-number .baloon-00__11 { display: none; } } .cat-number .baloon-00__12 { width: 8.8194444444vw; left: -3.4722222222vw; top: 217.4305555556vw; } @media all and (max-width: 750px) { .cat-number .baloon-00__12 { width: 16.9333333333vw; left: -11.8666666667vw; top: 857.2vw; } } .cat-number .baloon-00__13 { width: 15.6944444444vw; left: -1.875vw; top: 231.1111111111vw; } @media all and (max-width: 750px) { .cat-number .baloon-00__13 { width: 30.1333333333vw; left: -8.6666666667vw; top: 884.9333333333vw; } } .cat-number .baloon-00__14 { width: 17.4305555556vw; left: 88.8888888889vw; top: 222.7777777778vw; } @media all and (max-width: 750px) { .cat-number .baloon-00__14 { width: 33.4666666667vw; left: 85.0666666667vw; top: 875.4666666667vw; } } .cat-history .history-title { position: relative; text-align: center; width: 35.2083333333vw; margin: 0 auto 9.375vw; /* padding-top: 15.9722222222vw; */ padding-top: 8.972222vw; padding-bottom: 3.2142857143vw; box-sizing: border-box; } @media all and (max-width: 750px) { .cat-history .history-title { width: 72.9333333333vw; margin: 0 auto 23.3333333333vw; padding-top: 37.3333333333vw; padding-bottom: 8vw; } } .cat-history .history-title::after { content: ""; display: block; width: 4.7222222222vw; height: 0.2083333333vw; background-color: #0060af; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); } @media all and (max-width: 750px) { .cat-history .history-title::after { width: 9.0666666667vw; height: 0.5333333333vw; } } .cat-history .history-title .history-title__en { color: #0060af; font-weight: 600; font-size: 2.3611111111vw; margin-bottom: 3.125vw; } @media all and (max-width: 750px) { .cat-history .history-title .history-title__en { font-size: 4.5333333333vw; margin-bottom: 5.0666666667vw; } } .cat-history .history-title__note { text-align: center; font-size: 1.3888888889vw; padding: 0 0 4.8611111111vw; box-sizing: border-box; font-weight: bold; } @media all and (max-width: 750px) { .cat-history .history-title__note { font-size: 4.5333333333vw; padding: 6.6666666667vw 0 9.3333333333vw; } } .cat-history .table { position: relative; box-sizing: border-box; } .cat-history .table-last { position: relative; box-sizing: border-box; width: 100%; height: 25vw; } @media all and (max-width: 750px) { .cat-history .table-last { height: 36.9444444444vw; } } .cat-history .table-last::before { content: ""; display: block; position: absolute; width: 0.8333333333vw; height: 16.6666666667vw; background-image: url(../img/company/history/bar_last.png); background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto; top: 0; left: 50%; transform: translate(-50%, 0); } @media all and (max-width: 750px) { .cat-history .table-last::before { width: 1.6vw; height: 28.6666666667vw; left: 5.3333333333vw; transform: none; top: -28.6666666667vw; } } .cat-history .table-wrap { position: relative; width: 100%; /* コンテンツ部分の長さ */ aspect-ratio: 1440/10700; } @media all and (max-width: 750px) { .cat-history .table-wrap { aspect-ratio: auto; } } .cat-history .table-wrap::before { content: ""; display: block; position: absolute; width: 0.8333333333vw; height: 100%; background-color: #b5cfe4; top: 0; left: 50%; transform: translate(-50%, 0); border-radius: 2vw; overflow: hidden; } @media all and (max-width: 750px) { .cat-history .table-wrap::before { width: 1.6vw; left: 5.3333333333vw; transform: none; height: calc(100% - 28.6666666667vw); } } .cat-history .table-block { position: absolute; z-index: 10; } @media all and (max-width: 750px) { .cat-history .table-block { position: relative; } } @media all and (max-width: 750px) and (max-width: 750px) { .cat-history .table-block { top: auto !important; bottom: auto !important; margin-bottom: 13.3333333333vw; } } .cat-history .table-block:last-child { margin-bottom: 0; } .cat-history .table-block.is-none { display: none; } /* right 1974年環境開発への商号変更とマンションの販売開始ネオコーポ行徳のイメージ画像 */ .cat-history .table-block__002 { top: calc(58 / 1440 * 100vw); } /* left 1977-83年⽀社の拡⼤と⼥性スタッフの活躍 */ .cat-history .table-block__003 { top: calc(317 / 1440 * 100vw); } /* left 宅地建物取引業者免許※を取得し、分譲マンションの販売事業を開始 ※東京都知事（1）第27494号宅地建物取引業者免許※を取得 ※建設大臣（1）第2361号 */ .cat-history .table-block__004 { top: calc(643 / 1440 * 100vw); } /* left 1984年マンションの販売拡大と品質管理の向上コスモ西葛西のイメージ画像 */ .cat-history .table-block__005 { top: calc(1062 / 1440 * 100vw); } .cat-history .table-block__005 .table-ph { position: relative; width: calc(300 / 1440 * 100vw); left: calc(300 / 1440 * 100vw); } @media all and (max-width: 750px) { .cat-history .table-block__005 .table-ph { width: 60vw; left: 0; } } /* right 1985年リクルートコスモスへの商号変更と新たな決意 */ .cat-history .table-block__006 { top: calc(1100 / 1440 * 100vw); } .cat-history .table-block__006 .table-contents { position: static; } @media all and (max-width: 750px) { .cat-history .table-block__006 .table-contents { position: relative; } } .cat-history .table-block__006 .table-text { width: calc(310 / 1440 * 100vw); margin-left: calc(140 / 1440 * 100vw); } @media all and (max-width: 750px) { .cat-history .table-block__006 .table-text { width: 78.6666666667vw; margin-left: 0; } } .cat-history .table-block__006 .table-ph { position: absolute; width: calc(240 / 1440 * 100vw); right: 0; top: calc(200 / 1440 * 100vw); margin-top: 0; } @media all and (max-width: 750px) { .cat-history .table-block__006 .table-ph { left: 0; position: static; width: 80%; margin: 4.6666666667vw 0 0 auto; } } /* right 日環建物株式会社を吸収合併 */ .cat-history .table-block__007 { top: calc(1680 / 1440 * 100vw); } /* left 1986年不動産賃貸事業を本格的に開始さらに当社株式を店頭登録 */ .cat-history .table-block__008 { top: calc(1740 / 1440 * 100vw); } /* right 1987年株式会社コスモスライフ※の全株式を取得し、不動産管理事業に進出 ※現大和ライフネクスト株式会社 */ .cat-history .table-block__009 { top: calc(1800 / 1440 * 100vw); } /* left 1990年海外事業の取り組みを開始オーストラリアに現地法人を設立時のイメージ */ .cat-history .table-block__010 { top: calc(2030 / 1440 * 100vw); } /* left 一級建築士事務所を設置 */ .cat-history .table-block__011 { top: calc(2820 / 1440 * 100vw); } /* right 1991年カスタマーファーストの追求 */ .cat-history .table-block__012 { top: calc(2220 / 1440 * 100vw); } /* right 1993年将来を見据えたマンション「長期修繕計画」の導入 */ .cat-history .table-block__013 { top: calc(2630 / 1440 * 100vw); } /* right 東京都港区に本社移転 */ .cat-history .table-block__014 { top: calc(2980 / 1440 * 100vw); } /* left 1995年社員がよりよい形を主体的に考える */ .cat-history .table-block__015 { top: calc(2990 / 1440 * 100vw); } /* right 1996年再開発プロジェクトなど新たな事業も始動 1996年のラムザタワー現在のラムザタワーのイメージ画像 */ .cat-history .table-block__016 { top: calc(3110 / 1440 * 100vw); } /* left 1998年もう一度光をあてる大規模建替え事業物件販売開始フォルム千里中央のイメージ画像 */ .cat-history .table-block__017 { top: calc(3410 / 1440 * 100vw); } .cat-history .table-block__017 .table-contents { position: static; } @media all and (max-width: 750px) { .cat-history .table-block__017 .table-contents { position: relative; } } .cat-history .table-block__017 .table-text { width: calc(273 / 1440 * 100vw); margin-left: calc(205 / 1440 * 100vw); z-index: 10; text-align: right; } @media all and (max-width: 750px) { .cat-history .table-block__017 .table-text { width: 78.6666666667vw; margin-left: 0; text-align: left; } } .cat-history .table-block__017 .table-ph { position: absolute; width: calc(285 / 1440 * 100vw); left: 0; top: calc(150 / 1440 * 100vw); margin-top: 0; } @media all and (max-width: 750px) { .cat-history .table-block__017 .table-ph { width: 60vw; left: 0; position: static; width: 80%; margin: 4.6666666667vw 0 0 auto; } } /* left お客さま相談窓口「コスモスホットライン」設置 */ .cat-history .table-block__018 { top: calc(3960 / 1440 * 100vw); } /* right 2002年 GOOD DESIGN賞初受賞グランフォルム横浜白楽のイメージ画像 */ .cat-history .table-block__019 { top: calc(3900 / 1440 * 100vw); } /* left 2003年より安全に、より高品質に、より快適に */ .cat-history .table-block__020 { top: calc(4220 / 1440 * 100vw); } /* left 2004年利用者ニーズを反映した収益不動産事業の本格化コスモグラシア四谷外苑東のイメージ画像 */ .cat-history .table-block__021 { top: calc(4620 / 1440 * 100vw); } .cat-history .table-block__021 .table-text { width: calc(242 / 1440 * 100vw); } @media all and (max-width: 750px) { .cat-history .table-block__021 .table-text { width: 78.6666666667vw; margin-left: 0; text-align: left; } } .cat-history .table-block__021 .table-ph { position: absolute; width: calc(242 / 1440 * 100vw); left: calc(393 / 1440 * 100vw); } @media all and (max-width: 750px) { .cat-history .table-block__021 .table-ph { width: 46.6666666667vw; left: 0; position: static; margin: 4.6666666667vw 0 0 0; } } /* left 日本証券業協会への店頭登録を取消し、ジャスダック証券取引所に株式を上場 */ .cat-history .table-block__022 { top: calc(5330 / 1440 * 100vw); } /* right 2005年 MBO※の手法により、リクルートグループから独立 ※マネジメント・バイアウト */ .cat-history .table-block__023 { top: calc(4820 / 1440 * 100vw); } /* right 2006年商号変更によりコスモスイニシアがスタート */ .cat-history .table-block__024 { top: calc(5160 / 1440 * 100vw); } /* left 2007年マンションブランドINITIAの開始イニシア蒲田のイメージ画像 */ .cat-history .table-block__025 { top: calc(5640 / 1440 * 100vw); } .cat-history .table-block__025 .table-text { width: calc(480 / 1440 * 100vw); } @media all and (max-width: 750px) { .cat-history .table-block__025 .table-text { width: 78.6666666667vw; } } .cat-history .table-block__025 .table-ph { width: calc(300 / 1440 * 100vw); position: relative; left: calc(350 / 1440 * 100vw); margin-top: calc(-30 / 1440 * 100vw); } @media all and (max-width: 750px) { .cat-history .table-block__025 .table-ph { width: 66.6666666667vw; left: 0; position: static; margin: 4.6666666667vw 0 0 0; } } /* right 2009年首都圏各支社※を統合し、本社に集約 ※横浜支社・北関東支社・千葉支社株式会社コスモスライフ※の全株式を大和ハウス工業株式会社へ譲渡 ※現大和ライフネクスト株式会社 */ .cat-history .table-block__026 { top: calc(5750 / 1440 * 100vw); } /* left 2010年ジャスダック証券取引所と大阪証券取引所の合併に伴い大阪証券取引所JASDAQに上場 */ .cat-history .table-block__027 { top: calc(6360 / 1440 * 100vw); } /* right 2011年さまざまな住宅提案を加速ザ・ロアハウス西荻窪のイメージ画像 */ .cat-history .table-block__028 { top: calc(6420 / 1440 * 100vw); } .cat-history .table-block__028 .table-text { width: calc(232 / 1440 * 100vw); } @media all and (max-width: 750px) { .cat-history .table-block__028 .table-text { width: 78.6666666667vw; } } .cat-history .table-block__028 .table-ph { width: calc(596 / 1440 * 100vw); position: absolute; left: 0; top: calc(-120 / 1440 * 100vw); margin-top: 0; } @media all and (max-width: 750px) { .cat-history .table-block__028 .table-ph { width: 82.6666666667vw; left: 0; position: static; margin: 4.6666666667vw 0 0 0; } } /* right 東京都港区に本社移転 */ .cat-history .table-block__029 { top: calc(7100 / 1440 * 100vw); } /* left 2012年リノベーション事業への本格参入リノマークス津田沼のイメージ画像 */ .cat-history .table-block__030 { top: calc(6780 / 1440 * 100vw); } .cat-history .table-block__030 .table-ph { width: calc(515 / 1440 * 100vw); position: relative; left: calc(120 / 1440 * 100vw); } @media all and (max-width: 750px) { .cat-history .table-block__030 .table-ph { width: 78.6666666667vw; left: 0; position: static; margin: 4.6666666667vw 0 0 0; } } /* right 2013年 2013年大和ハウスグループの一員へ東京証券取引所と大阪証券取引所の統合に伴い、東京証券取引所JASDAQに上場（スタンダード） */ .cat-history .table-block__031 { top: calc(7230 / 1440 * 100vw); } /* right 2014年株式会社コスモスライフサポート(現連結子会社)の設立 */ .cat-history .table-block__032 { top: calc(7680 / 1440 * 100vw); } /* left 2015年社員の働く環境を整える */ .cat-history .table-block__033 { top: calc(7780 / 1440 * 100vw); } /* right 2016年収益不動産に新しい価値を見出す */ .cat-history .table-block__034 { top: calc(8100 / 1440 * 100vw); } /* right Cosmos Australia Holdings Pty Ltd※を設立 */ .cat-history .table-block__035 { top: calc(8510 / 1440 * 100vw); } /* left 株式会社コスモスホテルマネジメント※を設立 ※現連結子会社株式会社WOOCと資本業務提携契約を締結 */ .cat-history .table-block__036 { top: calc(8180 / 1440 * 100vw); } /* left 2018年宿泊事業・シェアオフィス事業の始動 MIMARU東京上野 NORTH MID POINT目黒不動前のイメージ画像 */ .cat-history .table-block__037 { top: calc(8720 / 1440 * 100vw); } /* left Cosmos Australia Pty Ltdが保有するKBRV Resort Operations Pty Ltdの全株式を譲渡し、海外ホテル・リゾート運営事業から撤退 */ .cat-history .table-block__038 { top: calc(9500 / 1440 * 100vw); } /* right 2019-2022年新事業へのさらなら挑戦 ETOWA nearsのイメージ画像 */ .cat-history .table-block__039 { top: calc(8900 / 1440 * 100vw); } /* right Cosmos USA Holdings, Inc.※を設立 ※現連結子会社中期経営計画2026を策定 Cosmos AustraliaPty Ltdの不動産事業等をCosmos Australia Holdings Pty Ltdへ移管し、Cosmos Australia Pty Ltdを解散及び清算 */ .cat-history .table-block__040 { top: calc(9600 / 1440 * 100vw); } /* left 2024年創業50周年 50th Anniversary */ .cat-history .table-block__041 { top: calc(10000 / 1440 * 100vw); } .cat-history .table-block__041 .table-ph { width: calc(249 / 1440 * 100vw); position: relative; left: calc(168 / 1440 * 100vw); } @media all and (max-width: 750px) { .cat-history .table-block__041 .table-ph { width: 40vw; left: 12vw; position: relative; margin: 4.6666666667vw 0 0 0; } } /* right 株式会社UPBONDと資本業務提携基本契約を締結 */ .cat-history .table-block__042 { top: calc(10350 / 1440 * 100vw); } .cat-history .table-block__left { left: calc(50% + 0.8vw); transform: translate(-100%, 0); } @media all and (max-width: 750px) { .cat-history .table-block__left { left: 3.3333333333vw; transform: none; } } @media all and (max-width: 750px) { .cat-history .table-block__left .table-contents { left: 14vw; } } .cat-history .table-block__left .table-text { position: relative; box-sizing: border-box; left: 8.3333333333vw; } @media all and (max-width: 750px) { .cat-history .table-block__left .table-text { left: 0; } } .cat-history .table-block__right { right: calc(50% + 0.8vw); transform: translate(100%, 0); } @media all and (max-width: 750px) { .cat-history .table-block__right { left: 3.3333333333vw; transform: none; } } .cat-history .table-block__right .table-contents { left: 9.375vw; } @media all and (max-width: 750px) { .cat-history .table-block__right .table-contents { left: 14vw; } } .cat-history .table-year { position: relative; width: 51.0416666667vw; position: relative; } @media all and (max-width: 750px) { .cat-history .table-year { width: 96.6666666667vw; } } .cat-history .table-text { position: relative; font-size: 1.1111111111vw; width: 33.3333333333vw; margin-top: 2.0833333333vw; line-height: 1.4; } @media all and (max-width: 750px) { .cat-history .table-text { font-size: 4vw; width: 78.6666666667vw; margin-top: 4.6666666667vw; } } .cat-history .table-contents { position: relative; } .cat-history .table-ph { margin-top: 2.0833333333vw; } @media all and (max-width: 750px) { .cat-history .table-ph { margin-top: 4.6666666667vw; } } .cat-history .table-ph__w100 { width: 41.6666666667vw; } @media all and (max-width: 750px) { .cat-history .table-ph__w100 { width: 82.6666666667vw; } } .cat-history .table-flex { display: flex; } @media all and (max-width: 750px) { .cat-history .table-flex { display: block; } } .cat-history .baloon-sp__pink { display: none; } @media all and (max-width: 750px) { .cat-history .baloon-sp__pink { display: block; width: 27.6vw; left: -6.6666666667vw; top: 71.7333333333vw; } } .cat-special_01 .main { position: relative; box-sizing: border-box; padding-bottom: 16.6666666667vw; } @media all and (max-width: 750px) { .cat-special_01 .main { padding-bottom: 27.7777777778vw; } } .cat-special_01 .title { position: relative; text-align: center; width: 45.5555555556vw; margin: 0 auto 4.8611111111vw; padding-top: 15.9722222222vw; padding-bottom: 3.2142857143vw; box-sizing: border-box; } @media all and (max-width: 750px) { .cat-special_01 .title { width: 76.2666666667vw; margin: 0 auto 32vw; padding-top: 37.3333333333vw; padding-bottom: 8vw; } } .cat-special_01 .title::after { content: ""; display: block; width: 4.7222222222vw; height: 0.2083333333vw; background-color: #0060af; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); } @media all and (max-width: 750px) { .cat-special_01 .title::after { width: 9.0666666667vw; height: 0.5333333333vw; } } .cat-special_01 .title .title__en { color: #0060af; font-weight: 600; font-size: 2.3611111111vw; margin-bottom: 3.125vw; } @media all and (max-width: 750px) { .cat-special_01 .title .title__en { font-size: 4.5333333333vw; margin-bottom: 5.0666666667vw; } } .cat-special_01 .title__note { text-align: center; font-size: 1.1111111111vw; box-sizing: border-box; font-weight: normal; } @media all and (max-width: 750px) { .cat-special_01 .title__note { font-size: 4.2666666667vw; padding: 0 4vw; text-align: left; } } .cat-special_01 .special { box-sizing: border-box; padding-top: 8.6805555556vw; padding-bottom: 10.0694444444vw; } @media all and (max-width: 750px) { .cat-special_01 .special { padding: 20vw 4vw 13.3333333333vw; } } .cat-special_01 .special .padding-lr { box-sizing: border-box; padding: 0 0.6944444444vw; } .cat-special_01 .special-title__sub { font-size: 1.875vw; color: #0060af; margin-bottom: 1.3888888889vw; line-height: 1; } @media all and (max-width: 750px) { .cat-special_01 .special-title__sub { font-size: 4.6666666667vw; margin-bottom: 4.6666666667vw; } } .cat-special_01 .special-title__main { width: 37.6388888889vw; margin: 0 auto; font-size: 0; } @media all and (max-width: 750px) { .cat-special_01 .special-title__main { width: 76.5333333333vw; } } .cat-special_01 .special-title { font-size: 3.2638888889vw; margin-bottom: 2.0833333333vw; line-height: 1.8; } @media all and (max-width: 750px) { .cat-special_01 .special-title { font-size: 8.2666666667vw; margin-bottom: 6.6666666667vw; } } .cat-special_01 .special-title_text { font-size: 1.1111111111vw; text-align: center; margin-bottom: 1.7361111111vw; } @media all and (max-width: 750px) { .cat-special_01 .special-title_text { font-size: 4vw; margin-bottom: 3.3333333333vw; text-align: left; } } @media all and (max-width: 750px) { .cat-special_01 .special-box { box-sizing: border-box; padding: 0 4vw; } } .cat-special_01 .special-member { width: 84.7222222222vw; margin: 0 auto; display: flex; flex-wrap: wrap; } @media all and (max-width: 750px) { .cat-special_01 .special-member { width: 100%; } } .cat-special_01 .special-member__li { width: 20%; } @media all and (max-width: 750px) { .cat-special_01 .special-member__li { width: 50%; } } .cat-special_01 .special-member__th { position: relative; font-size: 0; aspect-ratio: 1/1; width: 100%; overflow: hidden; } .cat-special_01 .special-member__th img { font-size: 0; line-height: 1; } .cat-special_01 .special-member__th .is-after { transition: all 0.5s; } .cat-special_01 .special-member__th:hover .is-after { opacity: 0; } @media all and (max-width: 750px) { .cat-special_01 .special-member__th:hover .is-after { opacity: 1; } } .cat-special_01 .is-MobileOS .special-member__th .is-after.is-none { opacity: 0; } .cat-special_01 .special-member__image { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; } .cat-special_01 .special-member__image.is-after { z-index: 1; } .cat-special_01 .special-member__dl { box-sizing: border-box; margin-top: 1.3888888889vw; margin-bottom: 4.8611111111vw; padding: 0 1.3888888889vw; } @media all and (max-width: 750px) { .cat-special_01 .special-member__dl { margin-top: 4vw; margin-bottom: 11.3333333333vw; padding: 0 3.3333333333vw; } } .cat-special_01 .special-member__name { font-size: 1.25vw; margin-bottom: 0.5em; font-weight: bold; } @media all and (max-width: 750px) { .cat-special_01 .special-member__name { font-size: 4.2666666667vw; } } .cat-special_01 .special-member__year { font-size: 0.9027777778vw; margin-bottom: 1.5em; line-height: 1.5; font-weight: normal; } @media all and (max-width: 750px) { .cat-special_01 .special-member__year { font-size: 3.2vw; } } .cat-special_01 .special-member__dt { font-size: 1.0416666667vw; line-height: 1.7; font-weight: normal; } @media all and (max-width: 750px) { .cat-special_01 .special-member__dt { font-size: 3.7333333333vw; } } .cat-special_01 .special-member__dt--dl { display: inline; } .cat-special_01 .special-member__dt--dt { background-color: #e5eff7; color: #0060af; display: inline; box-sizing: border-box; padding: 0 0.3472222222vw; font-weight: bold; } @media all and (max-width: 750px) { .cat-special_01 .special-member__dt--dt { padding: 0 0.6666666667vw; } } .cat-special_01 .special-member__dt--dt.a2 { color: #0095d1; } .cat-special_01 .special-member__dt--dd { display: inline; } .cat-special_01 .special-q__area { margin: 2.7777777778vw auto 4.8611111111vw; display: flex; justify-content: center; font-weight: bold; } @media all and (max-width: 750px) { .cat-special_01 .special-q__area { display: block; margin-bottom: 4vw; box-sizing: border-box; padding: 0 4vw; margin: 7.3333333333vw 0; } } .cat-special_01 .special-q__area--block { display: flex; align-items: center; margin: 0 1.0416666667vw; } @media all and (max-width: 750px) { .cat-special_01 .special-q__area--block { margin: 0; align-items: flex-start; } .cat-special_01 .special-q__area--block:last-child { align-items: center; } } .cat-special_01 .special-q__area--ico { width: 3.125vw; height: 3.125vw; min-width: 3.125vw; min-height: 3.125vw; border-radius: 50%; overflow: hidden; color: #fff; font-size: 1.3194444444vw; line-height: 1; display: flex; justify-content: center; align-items: center; margin-right: 1.0416666667vw; } @media all and (max-width: 750px) { .cat-special_01 .special-q__area--ico { width: 10.2666666667vw; height: 10.2666666667vw; min-width: 10.2666666667vw; min-height: 10.2666666667vw; font-size: 4.2666666667vw; margin-right: 3.3333333333vw; margin-top: 0; } } .cat-special_01 .special-q__area--text { font-size: 1.3888888889vw; } @media all and (max-width: 750px) { .cat-special_01 .special-q__area--text { font-size: 4.8vw; } } .cat-special_01 .special-q__area--01 .special-q__area--ico { background-color: #0060af; } .cat-special_01 .special-q__area--02 .special-q__area--ico { background-color: #0095d1; } .cat-special_01 .table { position: relative; box-sizing: border-box; } .cat-special_01 .table-last { position: relative; box-sizing: border-box; width: 100%; height: 25vw; } @media all and (max-width: 750px) { .cat-special_01 .table-last { height: 36.9444444444vw; } } .cat-special_01 .table-last::before { content: ""; display: block; position: absolute; width: 0.8333333333vw; height: 16.6666666667vw; background-image: url(../img/company/history/bar_last.png); background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto; top: 0; left: 50%; transform: translate(-50%, 0); } @media all and (max-width: 750px) { .cat-special_01 .table-last::before { width: 1.6vw; height: 28.6666666667vw; left: 5.3333333333vw; transform: none; top: -28.6666666667vw; } } .cat-special_01 .table-wrap { position: relative; width: 100%; aspect-ratio: 1440/7622; } @media all and (max-width: 750px) { .cat-special_01 .table-wrap { aspect-ratio: auto; } } .cat-special_01 .table-wrap::before { content: ""; display: block; position: absolute; width: 0.8333333333vw; height: 100%; background-color: #b5cfe4; top: 0; left: 50%; transform: translate(-50%, 0); border-radius: 2vw; overflow: hidden; } @media all and (max-width: 750px) { .cat-special_01 .table-wrap::before { width: 1.6vw; left: 5.3333333333vw; transform: none; height: calc(100% - 28.6666666667vw); } } .cat-special_01 .table-block { position: absolute; z-index: 10; } @media all and (max-width: 750px) { .cat-special_01 .table-block { position: relative; } } @media all and (max-width: 750px) and (max-width: 750px) { .cat-special_01 .table-block { top: auto !important; bottom: auto !important; margin-bottom: 13.3333333333vw; } } .cat-special_01 .table-block:last-child { margin-bottom: 0; } .cat-special_01 .table-block.is-none { display: none; } .cat-special_01 .table-block__002 { top: 4.0277777778vw; } .cat-special_01 .table-block__003 { top: 22.0138888889vw; } .cat-special_01 .table-block__004 { top: 49.1666666667vw; } .cat-special_01 .table-block__004 .table-ph { position: relative; width: 20.8333333333vw; left: 20.8333333333vw; } @media all and (max-width: 750px) { .cat-special_01 .table-block__004 .table-ph { width: 60vw; left: 0; } } .cat-special_01 .table-block__005 { top: 71.3194444444vw; } .cat-special_01 .table-block__005 .table-contents { position: static; } @media all and (max-width: 750px) { .cat-special_01 .table-block__005 .table-contents { position: relative; } } .cat-special_01 .table-block__005 .table-text { width: 21.5277777778vw; margin-left: 9.7222222222vw; } @media all and (max-width: 750px) { .cat-special_01 .table-block__005 .table-text { width: 78.6666666667vw; margin-left: 0; } } .cat-special_01 .table-block__005 .table-ph { position: absolute; width: 16.6666666667vw; right: 0; top: 13.8888888889vw; margin-top: 0; } @media all and (max-width: 750px) { .cat-special_01 .table-block__005 .table-ph { left: 0; position: static; width: 80%; margin: 4.6666666667vw 0 0 auto; } } .cat-special_01 .table-block__006 { top: 99.0972222222vw; } .cat-special_01 .table-block__007 { top: 106.3888888889vw; } .cat-special_01 .table-block__008 { top: 134.7222222222vw; } .cat-special_01 .table-block__009 { top: 155.2083333333vw; } .cat-special_01 .table-block__010 { top: 162.0833333333vw; } .cat-special_01 .table-block__011 { top: 182.5vw; } .cat-special_01 .table-block__011 .table-contents { position: static; } @media all and (max-width: 750px) { .cat-special_01 .table-block__011 .table-contents { position: relative; } } .cat-special_01 .table-block__011 .table-text { width: 18.9583333333vw; margin-left: 14.2361111111vw; z-index: 10; text-align: right; } @media all and (max-width: 750px) { .cat-special_01 .table-block__011 .table-text { width: 78.6666666667vw; margin-left: 0; text-align: left; } } .cat-special_01 .table-block__011 .table-ph { position: absolute; width: 19.7916666667vw; left: 0; top: 10.4166666667vw; margin-top: 0; } @media all and (max-width: 750px) { .cat-special_01 .table-block__011 .table-ph { width: 60vw; left: 0; position: static; width: 80%; margin: 4.6666666667vw 0 0 auto; } } .cat-special_01 .table-block__012 { top: 216.5277777778vw; } .cat-special_01 .table-block__013 { top: 225.8333333333vw; } .cat-special_01 .table-block__014 { top: 255.2083333333vw; } .cat-special_01 .table-block__014 .table-text { width: 16.8055555556vw; } @media all and (max-width: 750px) { .cat-special_01 .table-block__014 .table-text { width: 78.6666666667vw; margin-left: 0; text-align: left; } } .cat-special_01 .table-block__014 .table-ph { position: absolute; width: 16.8055555556vw; left: 27.2916666667vw; } @media all and (max-width: 750px) { .cat-special_01 .table-block__014 .table-ph { width: 46.6666666667vw; left: 0; position: static; margin: 4.6666666667vw 0 0 0; } } .cat-special_01 .table-block__015 { top: 279.6527777778vw; } .cat-special_01 .table-block__016 { top: 304.7916666667vw; } .cat-special_01 .table-block__016 .table-text { width: 33.3333333333vw; } @media all and (max-width: 750px) { .cat-special_01 .table-block__016 .table-text { width: 78.6666666667vw; } } .cat-special_01 .table-block__016 .table-ph { width: 20.8333333333vw; position: relative; left: 24.3055555556vw; margin-top: -2.0833333333vw; } @media all and (max-width: 750px) { .cat-special_01 .table-block__016 .table-ph { width: 66.6666666667vw; left: 0; position: static; margin: 4.6666666667vw 0 0 0; } } .cat-special_01 .table-block__017 { top: 316.3194444444vw; } .cat-special_01 .table-block__017 .table-text { width: 16.1111111111vw; } @media all and (max-width: 750px) { .cat-special_01 .table-block__017 .table-text { width: 78.6666666667vw; } } .cat-special_01 .table-block__017 .table-ph { width: 41.3888888889vw; position: absolute; left: 0; top: -8.3333333333vw; margin-top: 0; } @media all and (max-width: 750px) { .cat-special_01 .table-block__017 .table-ph { width: 82.6666666667vw; left: 0; position: static; margin: 4.6666666667vw 0 0 0; } } .cat-special_01 .table-block__018 { top: 354.0277777778vw; } .cat-special_01 .table-block__018 .table-ph { width: 35.7638888889vw; position: relative; left: 8.3333333333vw; } @media all and (max-width: 750px) { .cat-special_01 .table-block__018 .table-ph { width: 78.6666666667vw; left: 0; position: static; margin: 4.6666666667vw 0 0 0; } } .cat-special_01 .table-block__019 { top: 363.2638888889vw; } .cat-special_01 .table-block__020 { top: 383.0555555556vw; } .cat-special_01 .table-block__021 { top: 411.3194444444vw; } .cat-special_01 .table-block__022 { top: 414.7916666667vw; } .cat-special_01 .table-block__023 { top: 436.5972222222vw; } .cat-special_01 .table-block__024 { top: 447.5vw; } .cat-special_01 .table-block__025 { top: 493.125vw; } .cat-special_01 .table-block__025 .table-ph { width: 17.2916666667vw; position: relative; left: 11.6666666667vw; } @media all and (max-width: 750px) { .cat-special_01 .table-block__025 .table-ph { width: 40vw; left: 12vw; position: relative; margin: 4.6666666667vw 0 0 0; } } .cat-special_01 .table-block__left { left: calc(50% + 0.8vw); transform: translate(-100%, 0); } @media all and (max-width: 750px) { .cat-special_01 .table-block__left { left: 3.3333333333vw; transform: none; } } @media all and (max-width: 750px) { .cat-special_01 .table-block__left .table-contents { left: 14vw; } } .cat-special_01 .table-block__left .table-text { position: relative; box-sizing: border-box; left: 8.3333333333vw; } @media all and (max-width: 750px) { .cat-special_01 .table-block__left .table-text { left: 0; } } .cat-special_01 .table-block__right { right: calc(50% + 0.8vw); transform: translate(100%, 0); } @media all and (max-width: 750px) { .cat-special_01 .table-block__right { left: 3.3333333333vw; transform: none; } } .cat-special_01 .table-block__right .table-contents { left: 9.375vw; } @media all and (max-width: 750px) { .cat-special_01 .table-block__right .table-contents { left: 14vw; } } .cat-special_01 .table-year { position: relative; width: 51.0416666667vw; position: relative; } @media all and (max-width: 750px) { .cat-special_01 .table-year { width: 96.6666666667vw; } } .cat-special_01 .table-text { position: relative; font-size: 1.1111111111vw; width: 33.3333333333vw; margin-top: 2.0833333333vw; line-height: 1.4; } @media all and (max-width: 750px) { .cat-special_01 .table-text { font-size: 4vw; width: 78.6666666667vw; margin-top: 4.6666666667vw; } } .cat-special_01 .table-contents { position: relative; } .cat-special_01 .table-ph { margin-top: 2.0833333333vw; } @media all and (max-width: 750px) { .cat-special_01 .table-ph { margin-top: 4.6666666667vw; } } .cat-special_01 .table-ph__w100 { width: 41.6666666667vw; } @media all and (max-width: 750px) { .cat-special_01 .table-ph__w100 { width: 82.6666666667vw; } } .cat-special_01 .table-flex { display: flex; } @media all and (max-width: 750px) { .cat-special_01 .table-flex { display: block; } } .cat-special_01 .baloon-00__01 { width: 17.2222222222vw; left: -6.1111111111vw; top: 0.1388888889vw; } @media all and (max-width: 750px) { .cat-special_01 .baloon-00__01 { width: 33.0666666667vw; left: -15.0666666667vw; top: 6.4vw; } } .cat-special_01 .baloon-00__02 { width: 29.9305555556vw; left: 85.7638888889vw; top: -14.6527777778vw; } @media all and (max-width: 750px) { .cat-special_01 .baloon-00__02 { width: 59.4666666667vw; left: 71.8666666667vw; top: -28vw; } } .cat-special_01 .baloon-00__03 { width: 12.4305555556vw; left: 5.6944444444vw; top: 20.0694444444vw; } @media all and (max-width: 750px) { .cat-special_01 .baloon-00__03 { width: 22vw; left: 7.2vw; top: 63.6vw; } } .cat-special_01 .baloon-00__04 { width: 7.6388888889vw; left: 79.9305555556vw; top: 20.9722222222vw; } @media all and (max-width: 750px) { .cat-special_01 .baloon-00__04 { width: 13.4666666667vw; left: 66.1333333333vw; top: 63.7333333333vw; } } .cat-special_01 .baloon-00__05 { width: 7.0833333333vw; left: -1.4583333333vw; top: 37.6388888889vw; } @media all and (max-width: 750px) { .cat-special_01 .baloon-00__05 { width: 12.4vw; left: -4.4vw; top: 87.0666666667vw; } } .cat-special_01 .baloon-00__06 { width: 14.0277777778vw; left: 88.2638888889vw; top: 30.4861111111vw; } @media all and (max-width: 750px) { .cat-special_01 .baloon-00__06 { width: 26.9333333333vw; left: 79.7333333333vw; top: 69.3333333333vw; } } .cat-special_01 .baloon-contents__01 { width: 18.125vw; left: -13.8888888889vw; top: 70.625vw; } @media all and (max-width: 750px) { .cat-special_01 .baloon-contents__01 { display: none; } } .cat-special_01 .baloon-contents__02 { width: 6.7361111111vw; left: -2.0833333333vw; top: 94.7916666667vw; } @media all and (max-width: 750px) { .cat-special_01 .baloon-contents__02 { display: none; } } .cat-special_01 .baloon-contents__03 { width: 17.5694444444vw; left: 93.8888888889vw; top: 122.2222222222vw; } @media all and (max-width: 750px) { .cat-special_01 .baloon-contents__03 { display: none; } } .cat-special_01 .baloon-contents__04 { width: 7.2222222222vw; left: 93.0555555556vw; top: 142.2222222222vw; } @media all and (max-width: 750px) { .cat-special_01 .baloon-contents__04 { display: none; } } .cat-special_01 .baloon-contents__05 { width: 17.2222222222vw; left: -13.8888888889vw; top: 152.7777777778vw; } @media all and (max-width: 750px) { .cat-special_01 .baloon-contents__05 { display: none; } } .cat-special_01 .baloon-bottom__01 { width: 13.3333333333vw; left: -1.3888888889vw; bottom: -2.7777777778vw; } @media all and (max-width: 750px) { .cat-special_01 .baloon-bottom__01 { width: 25.6vw; left: 6vw; bottom: -4.6666666667vw; } } .cat-special_01 .baloon-bottom__02 { width: 7.7777777778vw; left: 71.4583333333vw; bottom: 1.7361111111vw; } @media all and (max-width: 750px) { .cat-special_01 .baloon-bottom__02 { width: 14.9333333333vw; left: 54.9333333333vw; bottom: 4.6666666667vw; } } .cat-special_01 .baloon-bottom__03 { width: 16.0416666667vw; left: 86.1805555556vw; bottom: 0.3472222222vw; } @media all and (max-width: 750px) { .cat-special_01 .baloon-bottom__03 { width: 30.8vw; left: 74.4vw; bottom: 2.6666666667vw; } } .cat-special_02 .title { position: relative; text-align: center; width: 57.4305555556vw; margin: 0 auto 4.8611111111vw; padding-top: 15.9722222222vw; padding-bottom: 3.2142857143vw; box-sizing: border-box; } @media all and (max-width: 750px) { .cat-special_02 .title { width: 59.3333333333vw; margin: 0 auto 17vw; padding-top: 37.3333333333vw; padding-bottom: 8vw; } } .cat-special_02 .title::after { content: ""; display: block; width: 4.7222222222vw; height: 0.2083333333vw; background-color: #0060af; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); } @media all and (max-width: 750px) { .cat-special_02 .title::after { width: 9.0666666667vw; height: 0.5333333333vw; } } .cat-special_02 .title .title__en { color: #0060af; font-weight: 600; font-size: 2.3611111111vw; margin-bottom: 3.125vw; } @media all and (max-width: 750px) { .cat-special_02 .title .title__en { font-size: 4.5333333333vw; margin-bottom: 5.0666666667vw; } } .cat-special_02 .title__note { text-align: center; font-size: 1.1111111111vw; box-sizing: border-box; } @media all and (max-width: 750px) { .cat-special_02 .title__note { font-size: 4.2666666667vw; padding: 0 4vw; text-align: left; } } .cat-special_02 .main { position: relative; } .balloon__item-before--01 { width: 5.6944444444vw; left: -1.4583333333vw; top: 27.4305555556vw; } @media all and (max-width: 750px) { .balloon__item-before--01 { width: 13.6vw; left: -4.8vw; top: 75.7333333333vw; } } .balloon__item-before--02 { width: 9.7222222222vw; left: 90.2777777778vw; top: 16.6666666667vw; } @media all and (max-width: 750px) { .balloon__item-before--02 { width: 26.5333333333vw; left: 86vw; top: 56.5333333333vw; } } .special-box .balloon__item--01 { width: 25.8333333333vw; height: 28.6805555556vw; left: -9.2%; top: -5.2%; } @media all and (max-width: 750px) { .special-box .balloon__item--01 { width: 49.6vw; height: 55.0666666667vw; left: -19%; top: -23.0666666667vw; } } .special-box .balloon__item--02 { width: 16.4583333333vw; height: 18.2638888889vw; left: 87%; top: -1%; } @media all and (max-width: 750px) { .special-box .balloon__item--02 { width: 31.6vw; height: 35.0666666667vw; left: 78%; top: -0.2%; } } .special-box .balloon__item--03 { width: 12.2916666667vw; height: 18.2638888889vw; left: 5%; top: 18.0555555556vw; } @media all and (max-width: 750px) { .special-box .balloon__item--03 { width: 22.2666666667vw; height: 24vw; left: -4.1333333333vw; top: 40vw; } } .special-box .balloon__item--04 { width: 5.9027777778vw; height: 6.5277777778vw; left: 81.5%; top: 19.0972222222vw; } @media all and (max-width: 750px) { .special-box .balloon__item--04 { width: 11.3333333333vw; left: 81.7333333333vw; top: 39.8666666667vw; } } .special-box .balloon__item--05 { width: 6.3888888889vw; height: 7.0138888889vw; left: -1%; top: 14.1%; } @media all and (max-width: 750px) { .special-box .balloon__item--05 { width: 12.2666666667vw; height: 13.4666666667vw; left: -4%; top: 10.5%; } } .special-box .balloon__item--06 { width: 15.3472222222vw; height: 20.9722222222vw; left: 90.2%; top: 9.6%; } @media all and (max-width: 750px) { .special-box .balloon__item--06 { width: 26.5333333333vw; height: 36.4vw; left: 87%; top: 7.8%; display: none; } } .special-box .balloon__item--07 { width: 26.5972222222vw; height: 37.2916666667vw; left: -28%; top: 24%; } @media all and (max-width: 750px) { .special-box .balloon__item--07 { width: 51.0666666667vw; height: 71.6vw; left: -30%; top: 21%; z-index: 102; display: none; } } .special-box .balloon__item--08 { width: 26.5972222222vw; height: 37.2916666667vw; left: 92.7%; top: 36.3%; z-index: 4; } @media all and (max-width: 750px) { .special-box .balloon__item--08 { width: 51.0666666667vw; height: 71.6vw; left: 85%; top: 38%; display: none; } } .special-box .balloon__item--09 { width: 31.3194444444vw; height: 42.2916666667vw; left: -35%; top: 53.3%; z-index: 4; } @media all and (max-width: 750px) { .special-box .balloon__item--09 { width: 60.1333333333vw; height: 81.2vw; left: -50%; top: 300vw; } } .special-box .balloon__item--10 { width: 26.5972222222vw; height: 37.2916666667vw; left: 100%; top: 64.2%; z-index: 4; } @media all and (max-width: 750px) { .special-box .balloon__item--10 { width: 51.0666666667vw; height: 71.6vw; left: 86.2%; top: 69.3%; } } .special-box .balloon__item--11 { width: 16.1111111111vw; height: 22.0833333333vw; left: -3.8%; top: 92.1%; } @media all and (max-width: 750px) { .special-box .balloon__item--11 { width: 25.6vw; height: 35.0666666667vw; left: -4%; top: 96.2%; } } .special-box .balloon__item--12 { width: 9.5833333333vw; height: 10.625vw; left: 17.5%; top: 96.9%; } @media all and (max-width: 750px) { .special-box .balloon__item--12 { width: 18.4vw; height: 20.4vw; left: 34%; top: 96.7%; } } .special-box .balloon__item--13 { width: 14.375vw; height: 16.0416666667vw; left: 90%; top: 92.7%; } @media all and (max-width: 750px) { .special-box .balloon__item--13 { width: 27.6vw; height: 30.8vw; left: 78.8%; top: 96.4%; } } .special-box__list { width: 100%; position: relative; max-width: 87.5vw; width: 100%; margin-left: auto; margin-right: auto; height: 196.6666666667vw; margin-top: 6.25vw; } @media all and (max-width: 750px) { .special-box__list { height: 593.8666666667vw; margin-top: 8.6666666667vw; max-width: 100%; } } .special-box__img01 { width: 17.8472222222vw; height: 24.375vw; left: 0.5555555556vw; top: 0; } @media all and (max-width: 750px) { .special-box__img01 { width: 34.2666666667vw; height: 48.1333333333vw; left: 0; } } .special-box__img02 { width: 20.7638888889vw; height: 28.4722222222vw; left: 17.8%; top: 2.7%; z-index: 3; } @media all and (max-width: 750px) { .special-box__img02 { width: 39.8666666667vw; height: 54.6666666667vw; left: 30%; top: 2%; } } .special-box__img03 { width: 22.2222222222vw; height: 24.7222222222vw; left: 38%; top: 0.2083333333vw; z-index: 2; } @media all and (max-width: 750px) { .special-box__img03 { width: 42.6666666667vw; height: 48.6666666667vw; left: 61%; top: -0.8%; } } .special-box__img04 { width: 16.3194444444vw; height: 18.1944444444vw; left: 59.4%; top: 5.4%; } @media all and (max-width: 750px) { .special-box__img04 { width: 31.3333333333vw; height: 34.9333333333vw; left: 34.4%; top: 12.6%; z-index: 101; } } .special-box__img05 { width: 19.5833333333vw; height: 26.875vw; left: 78%; top: -0.9%; } @media all and (max-width: 750px) { .special-box__img05 { width: 37.6vw; height: 51.6vw; left: 65.2%; top: 8.8%; } } .special-box__img06 { width: 19.7916666667vw; height: 22.0138888889vw; top: 16.7%; left: 1.5%; } @media all and (max-width: 750px) { .special-box__img06 { width: 38vw; height: 42.2666666667vw; top: 18.9%; left: 0.5%; z-index: 101; } } .special-box__img07 { width: 20.8333333333vw; height: 28.4722222222vw; top: 17.8%; left: 22.2%; z-index: 3; } @media all and (max-width: 750px) { .special-box__img07 { width: 40vw; height: 54.6666666667vw; top: 20.5%; left: 33.2%; z-index: 102; } } .special-box__img08 { width: 16.5972222222vw; height: 22.8472222222vw; top: 14.6%; left: 42%; } @media all and (max-width: 750px) { .special-box__img08 { width: 31.8666666667vw; height: 43.8666666667vw; top: 18.3%; left: 66.2%; } } .special-box__img09 { width: 21.4583333333vw; height: 23.8194444444vw; top: 14.6%; left: 75.6%; z-index: 101; } @media all and (max-width: 750px) { .special-box__img09 { width: 40.5333333333vw; height: 45.7333333333vw; top: 9.4%; left: -0.4%; } } .special-box__img10 { width: 17.2222222222vw; height: 19.1666666667vw; top: 29.5%; left: -0.2083333333vw; } @media all and (max-width: 750px) { .special-box__img10 { width: 33.0666666667vw; height: 36.8vw; top: 37.7%; left: 1.8%; } } .special-box__img11 { width: 17.6388888889vw; height: 19.5833333333vw; top: 32.9%; left: 24%; } @media all and (max-width: 750px) { .special-box__img11 { width: 33.8666666667vw; height: 37.6vw; top: 40.5%; left: 33%; z-index: 2; } } .special-box__img12 { width: 22.0138888889vw; height: 30.2083333333vw; top: 26.6%; left: 48.5%; z-index: 101; } @media all and (max-width: 750px) { .special-box__img12 { width: 42.2666666667vw; height: 58vw; top: 27.5%; left: 5.5%; } } .special-box__img13 { width: 21.4583333333vw; height: 23.8194444444vw; top: 28.6%; left: 77.5%; z-index: 3; } @media all and (max-width: 750px) { .special-box__img13 { width: 41.2vw; height: 45.7333333333vw; top: 29.6%; left: 54.5%; } } .special-box__img14 { width: 22.2222222222vw; height: 24.7916666667vw; top: 39.5%; left: 9.2%; } @media all and (max-width: 750px) { .special-box__img14 { width: 42.6666666667vw; height: 47.6vw; top: 44.3%; left: 4%; z-index: 3; } } .special-box__img15 { width: 17.7777777778vw; height: 19.7916666667vw; top: 37.6%; left: 67.7%; } @media all and (max-width: 750px) { .special-box__img15 { width: 34.1333333333vw; height: 38vw; top: 34.8%; left: 35.6%; } } .special-box__img16 { width: 16.3888888889vw; height: 18.1944444444vw; top: 44.7%; left: 61%; } @media all and (max-width: 750px) { .special-box__img16 { width: 31.4666666667vw; height: 34.9333333333vw; top: 39.7%; left: 70.5%; } } .special-box__img17 { width: 17.7777777778vw; height: 24.4444444444vw; top: 50%; left: -0.8%; } @media all and (max-width: 750px) { .special-box__img17 { width: 34.1333333333vw; height: 46.9333333333vw; top: 53.6%; left: 9.5%; } } .special-box__img18 { width: 20.7638888889vw; height: 28.4722222222vw; top: 53.4%; left: 17%; z-index: 3; } @media all and (max-width: 750px) { .special-box__img18 { width: 39.8666666667vw; height: 54.6666666667vw; top: 59.2%; left: 31%; } } .special-box__img19 { width: 22.2222222222vw; height: 24.7916666667vw; top: 47.4%; left: 34.4%; } @media all and (max-width: 750px) { .special-box__img19 { width: 42.6666666667vw; height: 47.6vw; top: 55.3%; left: 61.4%; } } .special-box__img20 { width: 16.6666666667vw; height: 22.7777777778vw; top: 56.2%; left: 57.4%; } @media all and (max-width: 750px) { .special-box__img20 { width: 32vw; height: 43.7333333333vw; top: 48.7%; left: 36.4%; z-index: 2; } } .special-box__img21 { width: 19.7916666667vw; height: 22.0138888889vw; top: 48.7%; left: 75%; } @media all and (max-width: 750px) { .special-box__img21 { width: 38vw; height: 42.2666666667vw; top: 45.9%; left: 64%; } } .special-box__img22 { width: 19.7916666667vw; height: 22.0138888889vw; top: 65%; left: 1%; z-index: 101; } @media all and (max-width: 750px) { .special-box__img22 { width: 38vw; height: 42.2666666667vw; top: 76%; left: -1%; } } .special-box__img23 { width: 17.1527777778vw; height: 19.0972222222vw; top: 67.7%; left: 31%; } @media all and (max-width: 750px) { .special-box__img23 { width: 32.9333333333vw; height: 36.6666666667vw; top: 75.1%; left: 60.8%; } } .special-box__img24 { width: 20.7638888889vw; height: 28.4722222222vw; top: 66.2%; left: 54.2%; } @media all and (max-width: 750px) { .special-box__img24 { width: 39.8666666667vw; height: 54.6666666667vw; top: 61.1%; left: -3.8%; z-index: 3; } } .special-box__img25 { width: 20.8333333333vw; height: 28.4722222222vw; top: 64%; left: 79.2%; } @media all and (max-width: 750px) { .special-box__img25 { width: 40vw; height: 54.6666666667vw; top: 65.2%; left: 52.2%; z-index: 3; } } .special-box__img26 { width: 17.2222222222vw; height: 19.1666666667vw; top: 79.4%; left: 1.3%; } @media all and (max-width: 750px) { .special-box__img26 { width: 33.0666666667vw; height: 36.8vw; top: 86%; left: -3.7%; z-index: 101; } } .special-box__img27 { width: 21.4583333333vw; height: 24.1666666667vw; top: 82.6%; left: 17%; } @media all and (max-width: 750px) { .special-box__img27 { width: 41.2vw; height: 46.4vw; top: 87.6%; left: 24%; z-index: 102; } } .special-box__img28 { width: 22.7777777778vw; height: 25.3472222222vw; top: 77.7%; left: 37%; } @media all and (max-width: 750px) { .special-box__img28 { width: 43.7333333333vw; height: 48.6666666667vw; top: 86.3%; left: 58.7%; z-index: 103; } } .special-box__img29 { width: 17.2222222222vw; height: 19.1666666667vw; top: 86%; left: 64%; } @media all and (max-width: 750px) { .special-box__img29 { width: 33.0666666667vw; height: 36.8vw; top: 80.8%; left: 30%; } } .special-box__img30 { width: 21.4583333333vw; height: 23.8194444444vw; top: 78.2%; left: 76%; } @media all and (max-width: 750px) { .special-box__img30 { width: 41.2vw; height: 45.7333333333vw; top: 70.2%; left: 24%; z-index: 4; } } .special-box__img31 { display: none; } @media all and (max-width: 750px) { .special-box__img31 { display: block; width: 41.2vw; height: 45.7333333333vw; top: 80%; left: 59%; } } .special-box__balloon01 { width: 6.25vw; height: 7.0138888889vw; top: 16.3%; left: 63%; } @media all and (max-width: 750px) { .special-box__balloon01 { width: 12vw; height: 13.4666666667vw; top: 18.2%; left: 5.3%; } } .special-box__balloon02 { width: 12.3611111111vw; height: 16.9444444444vw; top: 20.3%; left: 66%; } @media all and (max-width: 750px) { .special-box__balloon02 { width: 23.7333333333vw; height: 32.5333333333vw; top: 14.1%; left: 23%; } } .special-box__balloon03 { width: 11.5277777778vw; height: 15.6944444444vw; top: 37.2%; left: 45%; } @media all and (max-width: 750px) { .special-box__balloon03 { width: 22.1333333333vw; height: 30.1333333333vw; top: 32.3%; left: 1.3%; } } .special-box__balloon04 { width: 6.25vw; height: 7.0138888889vw; top: 63.5%; left: 46.5%; } @media all and (max-width: 750px) { .special-box__balloon04 { width: 12vw; height: 13.4666666667vw; top: 71.3%; left: 6.8%; } } .special-box__balloon05 { width: 11.5972222222vw; height: 19.3055555556vw; top: 72.5%; left: 16.2%; } @media all and (max-width: 750px) { .special-box__balloon05 { width: 22.2666666667vw; height: 30.4vw; top: 81.6%; left: 7%; } } .image-balloon__scale--307 { width: 21.3194444444vw; } @media all and (max-width: 750px) { .image-balloon__scale--307 { width: 40.8vw; } } .image-balloon__scale--365 { width: 25.3472222222vw; } @media all and (max-width: 750px) { .image-balloon__scale--365 { width: 45.8666666667vw; } } .image-balloon__scale--297 { width: 20.625vw; } @media all and (max-width: 750px) { .image-balloon__scale--297 { width: 35.0666666667vw; } } .special-box__list_02 { width: 100%; height: auto; aspect-ratio: 1440/2192; } @media all and (max-width: 750px) { .special-box__list_02 { aspect-ratio: 750/3393; } } .special-box__list_02 .balloon__add--01 { width: 19.6527777778vw; left: 0; top: 18.0555555556vw; transform: translate(-50%, 0); z-index: 0; } @media all and (max-width: 750px) { .special-box__list_02 .balloon__add--01 { width: 49.6vw; left: -38.4vw; top: 104.4vw; transform: none; } } .special-box__list_02 .balloon__add--02 { width: 27.2916666667vw; left: auto; right: -13.8888888889vw; top: 36.3194444444vw; transform: translate(50%, 0); z-index: 0; } @media all and (max-width: 750px) { .special-box__list_02 .balloon__add--02 { display: none; } } .special-box__list_02 .balloon__add--03 { width: 32.0138888889vw; left: -22.2222222222vw; top: 106.5277777778vw; z-index: 0; } @media all and (max-width: 750px) { .special-box__list_02 .balloon__add--03 { width: 61.4666666667vw; left: -42.6666666667vw; top: 226.6666666667vw; } } .special-box__list_02 .balloon__add--04 { width: 7.0138888889vw; left: 48.9583333333vw; top: 36.8055555556vw; z-index: 0; } @media all and (max-width: 750px) { .special-box__list_02 .balloon__add--04 { width: 13.4666666667vw; left: 48vw; top: 80vw; } } .special-box__list_02 .balloon__add--05 { width: 7.0138888889vw; left: 42.0138888889vw; top: 60.7638888889vw; z-index: 0; } @media all and (max-width: 750px) { .special-box__list_02 .balloon__add--05 { width: 22.1333333333vw; left: 33.3333333333vw; top: 140.5333333333vw; } } .special-box__list_02 .balloon__add--06 { width: 7.0138888889vw; left: 48.6111111111vw; top: 95.9027777778vw; z-index: 0; } @media all and (max-width: 750px) { .special-box__list_02 .balloon__add--06 { display: none; } } .special-box__list_02 .balloon__add--07 { width: 28.3333333333vw; left: 89.4444444444vw; top: 82.6388888889vw; z-index: 0; } @media all and (max-width: 750px) { .special-box__list_02 .balloon__add--07 { display: none; } } .special-box__list_02 .balloon__add--08 { width: 16.1111111111vw; left: 88.6111111111vw; top: 124.7222222222vw; z-index: 0; } @media all and (max-width: 750px) { .special-box__list_02 .balloon__add--08 { display: none; } } .special-box__list_02 .balloon__add--09 { width: 11.5972222222vw; left: 59.0277777778vw; top: 110.3472222222vw; z-index: 0; } @media all and (max-width: 750px) { .special-box__list_02 .balloon__add--09 { display: none; } } .special-box__list_02 .balloon__add--10 { width: 9.9305555556vw; left: 10.4166666667vw; top: 128.4722222222vw; z-index: 0; } @media all and (max-width: 750px) { .special-box__list_02 .balloon__add--10 { display: none; } } .special-box__list_02 .balloon__add-sp--01 { display: none; } @media all and (max-width: 750px) { .special-box__list_02 .balloon__add-sp--01 { display: block; width: 22.9333333333vw; left: auto; right: 0; top: 49.7333333333vw; z-index: 0; } } .special-box__list_02 .balloon__add-sp--02 { display: none; } @media all and (max-width: 750px) { .special-box__list_02 .balloon__add-sp--02 { display: block; width: 61.4666666667vw; left: 84.5333333333vw; top: 343.7333333333vw; z-index: 0; } } .special-box__list_02 .balloon__add-sp--03 { display: none; } @media all and (max-width: 750px) { .special-box__list_02 .balloon__add-sp--03 { display: block; width: 23.8666666667vw; left: 42.4vw; top: 368.5333333333vw; z-index: 0; } } .special-box__list_02 .balloon__add-sp--04 { display: none; } @media all and (max-width: 750px) { .special-box__list_02 .balloon__add-sp--04 { display: block; width: 13.4666666667vw; left: 20vw; top: 420vw; z-index: 0; } } .special-box__list_02 .special-box__img_02_01 { top: 0; left: 0; } @media all and (max-width: 750px) { .special-box__list_02 .special-box__img_02_01 { top: 0vw; left: 2vw; } } .special-box__list_02 .special-box__img_02_02 { top: 3.125vw; left: 31.7361111111vw; z-index: 1; } @media all and (max-width: 750px) { .special-box__list_02 .special-box__img_02_02 { top: 5.4666666667vw; left: 63.0666666667vw; } } .special-box__list_02 .special-box__img_02_03 { top: 0; left: 68.9583333333vw; } @media all and (max-width: 750px) { .special-box__list_02 .special-box__img_02_03 { top: 75.0666666667vw; left: 65.4666666667vw; } } .special-box__list_02 .special-box__img_02_04 { top: 15.625vw; left: 16.0416666667vw; z-index: 0; } @media all and (max-width: 750px) { .special-box__list_02 .special-box__img_02_04 { top: 31.4666666667vw; left: 34.2666666667vw; } } .special-box__list_02 .special-box__img_02_05 { top: 14.375vw; left: 50.0694444444vw; } @media all and (max-width: 750px) { .special-box__list_02 .special-box__img_02_05 { top: 57.0666666667vw; left: 2.6666666667vw; } } .special-box__list_02 .special-box__img_02_06 { top: 40.4861111111vw; left: 0; z-index: 1; } @media all and (max-width: 750px) { .special-box__list_02 .special-box__img_02_06 { top: 133.3333333333vw; left: 2.6666666667vw; } } .special-box__list_02 .special-box__img_02_07 { top: 52.8472222222vw; left: 14.9305555556vw; } @media all and (max-width: 750px) { .special-box__list_02 .special-box__img_02_07 { top: 98.6666666667vw; left: 30vw; } } .special-box__list_02 .special-box__img_02_08 { top: 39.0972222222vw; left: 30.5555555556vw; } @media all and (max-width: 750px) { .special-box__list_02 .special-box__img_02_08 { top: 140vw; left: 66.5333333333vw; } } .special-box__list_02 .special-box__img_02_09 { top: 47.7083333333vw; left: 51.7361111111vw; } @media all and (max-width: 750px) { .special-box__list_02 .special-box__img_02_09 { top: 196.8vw; left: 63.4666666667vw; } } .special-box__list_02 .special-box__img_02_10 { top: 36.5972222222vw; left: 68.4027777778vw; } @media all and (max-width: 750px) { .special-box__list_02 .special-box__img_02_10 { top: 168.4vw; left: 35.4666666667vw; } } .special-box__list_02 .special-box__img_02_11 { top: 75vw; left: -2.7777777778vw; } @media all and (max-width: 750px) { .special-box__list_02 .special-box__img_02_11 { top: 252.6666666667vw; left: 67.7333333333vw; } } .special-box__list_02 .special-box__img_02_12 { top: 80.2083333333vw; left: 15.4861111111vw; z-index: 1; } @media all and (max-width: 750px) { .special-box__list_02 .special-box__img_02_12 { top: 203.3333333333vw; left: 0.6666666667vw; } } .special-box__list_02 .special-box__img_02_13 { top: 72.9861111111vw; left: 31.9444444444vw; } @media all and (max-width: 750px) { .special-box__list_02 .special-box__img_02_13 { top: 232.6666666667vw; left: 32.2666666667vw; } } .special-box__list_02 .special-box__img_02_14 { top: 82.5694444444vw; left: 52.2916666667vw; } @media all and (max-width: 750px) { .special-box__list_02 .special-box__img_02_14 { top: 275.6vw; left: 4vw; } } .special-box__list_02 .special-box__img_02_15 { top: 71.1805555556vw; left: 68.6805555556vw; } @media all and (max-width: 750px) { .special-box__list_02 .special-box__img_02_15 { top: 288.5333333333vw; left: 42.9333333333vw; } } .special-box__list_02 .special-box__img_02_16 { top: 102.7083333333vw; left: 3.8194444444vw; } @media all and (max-width: 750px) { .special-box__list_02 .special-box__img_02_16 { top: 330.8vw; left: 2.6666666667vw; } } .special-box__list_02 .special-box__img_02_17 { top: 122.2916666667vw; left: 18.6805555556vw; } @media all and (max-width: 750px) { .special-box__list_02 .special-box__img_02_17 { top: 334.6666666667vw; left: 48vw; } } .special-box__list_02 .special-box__img_02_18 { top: 104.6527777778vw; left: 32.0138888889vw; } @media all and (max-width: 750px) { .special-box__list_02 .special-box__img_02_18 { top: 380.6666666667vw; left: -1.3333333333vw; } } .special-box__list_02 .special-box__img_02_19 { top: 124.7916666667vw; left: 49.375vw; } @media all and (max-width: 750px) { .special-box__list_02 .special-box__img_02_19 { top: 378.6666666667vw; left: 64vw; } } .special-box__list_02 .special-box__img_02_20 { top: 106.5972222222vw; left: 65.2777777778vw; } @media all and (max-width: 750px) { .special-box__list_02 .special-box__img_02_20 { top: 415.0666666667vw; left: 34.6666666667vw; } } html { font-size: 62.5%; touch-action: manipulation; color: #333; } /* body */ .l-container { width: 100%; overflow-x: hidden; font-family: "Outfit", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Helvetica Neue", Arial, Meiryo, sans-serif; font-weight: 400; letter-spacing: 0.06em; font-feature-settings: "palt"; } .l-container p { font-size: 16px; font-size: 1.6rem; } .l-container a, .l-container button { transition: opacity 0.5s; } .l-container a:hover, .l-container button:hover { opacity: 0.7; } .display-none { display: none !important; } .w-100per { width: 100%; height: auto; } .h-100per { width: auto; height: 100%; } .size-100per { width: 100%; height: 100%; } .display-block { display: block; } .block-pc { display: block; } @media all and (max-width: 750px) { .block-pc { display: none; } } .block-sp { display: none; } @media all and (max-width: 750px) { .block-sp { display: block; } } .flex-pc { display: block; } @media all and (max-width: 750px) { .flex-pc { display: none; } } .flex-sp { display: none; } @media all and (max-width: 750px) { .flex-sp { display: block; } } .text-align-center { text-align: center; } @media all and (max-width: 750px) { .main { position: relative; } } @media all and (max-width: 750px) { .wrap { overflow: hidden; } } .wrap .op { display: none; } .wrap.is-OP { position: relative; width: 100%; height: 100vh; overflow: hidden; } .wrap.is-OP .tag-header { display: none; } .wrap.is-OP .mv-top .mv_balloon__title { display: none; } .wrap.is-op_001 .op { display: block; } .wrap.is-last-OP .op { background: transparent; } .header-padding__top { padding-top: 6.25vw; } @media all and (max-width: 750px) { .header-padding__top { padding-top: 14.6666666667vw; } } .pos-relative { position: relative; } .pos-abslute { position: absolute; } .contents-baloon { position: absolute; width: 100%; height: 100%; } .overfllow { overflow: hidden; } .overfllow-x { overflow-x: hidden; } .ico { display: inline-block; background-color: #fff; width: 4.3055555556vw; min-width: 4.3055555556vw; height: 4.3055555556vw; min-height: 4.3055555556vw; display: flex; justify-content: center; align-items: center; border-radius: 50%; overflow: hidden; } @media all and (max-width: 750px) { .ico { width: 14vw; min-width: 14vw; height: 14vw; min-height: 14vw; } } .ico__bnr { width: 3.4722222222vw; min-width: 3.4722222222vw; height: 3.4722222222vw; min-height: 3.4722222222vw; } @media all and (max-width: 750px) { .ico__bnr { width: 8vw; min-width: 8vw; height: 8vw; min-height: 8vw; } } .ico__bnr.big { width: 3.6111111111vw; min-width: 3.6111111111vw; height: 3.6111111111vw; min-height: 3.6111111111vw; } @media all and (max-width: 750px) { .ico__bnr.big { width: 9.3333333333vw; min-width: 9.3333333333vw; height: 9.3333333333vw; min-height: 9.3333333333vw; } } .ico__blue { background-color: #0060af; } .ico-arrow { width: 2.0138888889vw; height: 1.1805555556vw; } @media all and (max-width: 750px) { .ico-arrow { width: 6.5333333333vw; height: 3.3333333333vw; } } .ico-arrow__bnr { width: 1.5972222222vw; height: 0.9722222222vw; } @media all and (max-width: 750px) { .ico-arrow__bnr { width: 3.6vw; height: 2.2666666667vw; } } .ico-arrow__bnr.big { width: 1.7361111111vw; height: 1.1111111111vw; } @media all and (max-width: 750px) { .ico-arrow__bnr.big { width: 5.6vw; height: 3.4666666667vw; } } .arrow-svg { -webkit-mask: url("../images/common/ico_arrow.svg") no-repeat center center/contain; -webkit-mask-image: url("../images/common/ico_arrow.svg"); mask-image: url("../images/common/ico_arrow.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; background-color: #0060af; } .arrow-svg__white { background-color: #fff; } .btn-link { display: flex; align-items: center; } .btn-link__text { display: block; font-size: 1.1805555556vw; margin-left: 0.6944444444vw; font-weight: normal; } @media all and (max-width: 750px) { .btn-link__text { font-size: 3.7333333333vw; margin-left: 3.3333333333vw; } } .btn-link__text--bnr { font-size: 1.1111111111vw; margin-left: 1.0416666667vw; } @media all and (max-width: 750px) { .btn-link__text--bnr { font-size: 3.7333333333vw; margin-left: 2vw; } } .blur-1 { filter: blur(6px); } .blur-2-5 { filter: blur(2.5px); } @media all and (max-width: 750px) { .blur-2-5 { filter: blur(3.5px); } } .alpha-1 { opacity: 0.8; } .font-weight { font-weight: bold; } @keyframes loop_animation_rotate_1 { 0% { transform: rotate(-15deg); } 50% { transform: rotate(15deg); } 100% { transform: rotate(-15deg); } } @keyframes loop_animation_rotate_2 { 0% { transform: rotate(15deg); } 50% { transform: rotate(-15deg); } 100% { transform: rotate(15deg); } } @keyframes loop_animation_rotate_3-1 { 0% { transform: rotate(10deg); } 100% { transform: rotate(-10deg); } } @keyframes loop_animation_rotate_3-2 { 0% { transform: rotate(-10deg); } 100% { transform: rotate(10deg); } } .loop_rotate_1 { animation: loop_animation_rotate_1 1s infinite; animation-direction: alternate; animation-timing-function: ease-in-out; } .loop_rotate_2 { animation: loop_animation_rotate_2 1s infinite; animation-direction: alternate; animation-timing-function: ease-in-out; } .loop_rotate_3-1 { animation: loop_animation_rotate_3-1 8s infinite; animation-direction: alternate; animation-timing-function: ease-in-out; } .loop_rotate_3-2 { animation: loop_animation_rotate_3-2 8s infinite; animation-direction: alternate; animation-timing-function: ease-in-out; } .flex-reverse { flex-direction: row-reverse; } .base-hidden { overflow: hidden; } .base-wrap__pos--top { margin-top: 6.25vw; transition: margin-top 0.5s; } @media all and (max-width: 750px) { .base-wrap__pos--top { margin-top: 14.6666666667vw; } } .is-scroll .base-wrap__pos--top { margin-top: 4.5138888889vw; } @media all and (max-width: 750px) { .is-scroll .base-wrap__pos--top { margin-top: 12vw; } } .bg-set { background-image: url(../img/company/history/bg.png); background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto; } @media all and (max-width: 750px) { .bg-set { background-image: url(../img/company/history/bg_sp.png); background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto; } } .base-under { position: relative; } .base-under .content-baloon { opacity: 0; transition: opacity 0.5s; } .base-under .is-none { display: none; } .loaded .content-baloon { opacity: 1; } .alpha_60 img { opacity: 0.6; } .alpha_30 img { opacity: 0.3; } .btn-top { text-align: center; position: absolute; top: 2.0833333333vw; right: 2.0833333333vw; cursor: pointer; } @media all and (max-width: 750px) { .btn-top { top: auto; bottom: 6.6666666667vw; right: 4vw; } } .btn-top__arrow { position: relative; width: 3.6805555556vw; min-width: 3.6805555556vw; height: 3.6805555556vw; min-height: 3.6805555556vw; background-color: #0060af; border-radius: 50%; overflow: hidden; margin: 0 auto; } @media all and (max-width: 750px) { .btn-top__arrow { width: 13.3333333333vw; min-width: 13.3333333333vw; height: 13.3333333333vw; min-height: 13.3333333333vw; } } .btn-top__arrow img { display: block; width: 1.3888888889vw; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media all and (max-width: 750px) { .btn-top__arrow img { width: 4.6666666667vw; } } .btn-top__text { font-size: 0.8333333333vw; margin-top: 1.0416666667vw; color: #0060af; } @media all and (max-width: 750px) { .btn-top__text { font-size: 2.9333333333vw; margin-top: 2.6666666667vw; } } .motion-target { opacity: 0; } .text-link { color: #0060af; text-decoration: underline; } .text-link:hover { text-decoration: none; } .font-weight-bold { font-weight: bold; } .font-weight-normal { font-weight: normal; } .is-none-ef-hover:hover { opacity: 1; } .js-random { display: none; } .js-random.is-active { display: block; }