@charset "UTF-8"; /* ======================================= このCSSファイルはSassにて生成されています。 This file is created by Sass Files. =========================================*/ /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) 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 - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *: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; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; height: auto; } /* 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; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* 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; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /* --------------------------------------- Basic Settings -----------------------------------------*/ :root { --cl-main: #162f7c; --cl-bg: #fff; --cl-cta: #ef5b3e; --cl-bg: #fff; --cl-text: #2a2a2a; --cl-text2: #000; --cl-link: #2a2a2a; --cl-link-hover: #2a2a2a; --cl-gray: #888; --cl-white: #fff; --cl-white_rgb: 255 255 255; --font-sans: "Noto Sans JP", YuGothic, "游ゴシック", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; --font-zenmaru: "Zen Maru Gothic", YuGothic, "游ゴシック", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; --font-en: "M PLUS Rounded 1c", sans-serif; --opacity: 0.6; --root-font-size: 16; --scale: 1.1; --trim-leading: calc((1em - 1lh) / 2); --transition: 0.2s ease-in-out; --cl-graph1: #EA6182; --cl-graph2: #C3D94E; --cl-graph3: #3AB997; --cl-graph4: #428BD2; --cl-graph5: #8361E8; --cl-graph6: #F06454; --cl-graph7: #F6AD3A; --cl-graph8: #FFEA47; --cl-graph9: #FFFFFF; --cl-graph10: #ff6f61; --cl-graph11: #ffe4b5; --tab-movie: #eea32e; --tab-graph: #38beef; --tab-point: #4fbaa1; } html body { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; font-family: var(--font-sans); font-size: calc(16 / var(--root-font-size) * 1rem); background-color: var(--cl-bg); color: var(--cl-text); line-height: 1.5; display: grid; grid-template: "header" auto "contents" 1fr "footer" auto/1fr; min-height: 100dvh; } @media screen and (width <= 749px) { html body { font-size: 16px; font-size: 4.2666666667vw; } } html body *, html body *::before, html body *::after { box-sizing: border-box; font-feature-settings: "palt"; } html body img { vertical-align: bottom; font-size: 0; line-height: 0; } html body a { color: var(--cl-link); text-decoration: none; word-break: break-all; transition: var(--transition); } html body a:hover, html body a:link, html body a:visited, html body a:active { text-decoration: none; } html body a:hover { color: var(--cl-link-hover); } html body textarea, html body input, html body select { background-color: var(--cl-white); border: var(--cl-border) 1px solid; border-radius: 6px; padding: 8px 10px; box-sizing: border-box; } /* --------------------------------------- Header -----------------------------------------*/ .mv { position: relative; background-color: #c3d94e; padding-bottom: min(58px, 4.0277777778vw); text-align: center; } @media screen and (width <= 749px) { .mv { overflow: hidden; padding-bottom: 0; } } .mv * { position: relative; z-index: 1; } .mv__logo { margin-inline: auto; width: min(741px, 51.4583333333vw); } @media screen and (width <= 749px) { .mv__logo { margin: 0; position: absolute; left: 0; width: 100%; z-index: 2; } } .mv__img { margin-top: max(-103px, -7.1527777778vw); margin-inline: auto; width: min(1205px, 83.6805555556vw); } @media screen and (width <= 749px) { .mv__img { margin: 0; width: 100%; } } .mv__btn { position: absolute; right: max(16.4583333333vw, (100% - 960px) / 2 - 3px); bottom: min(46px, 3.1944444444vw); transition-delay: 0.7s !important; } @media screen and (width <= 749px) { .mv__btn { right: 3.8666666667vw; bottom: 9.2vw; } } .mv__btn a { padding: min(36px, 2.5vw) 0 0 min(22px, 1.5277777778vw); display: block; position: relative; width: min(160.5px, 11.1458333333vw); height: min(164px, 11.3888888889vw); transition: var(--transition); } @media screen and (width <= 749px) { .mv__btn a { padding: 5.0666666667vw 0 0 3.2vw; width: 21.4666666667vw; height: 21.4666666667vw; } } .mv__btn a::before { background: url(../img/page/mv_btn_bg.png) 0 0 no-repeat; background: -webkit-image-set(url(../img/page/mv_btn_bg.webp) type("image/webp"), url(../img/page/mv_btn_bg.png) type("image/png")) 0 0 no-repeat; background: image-set(url(../img/page/mv_btn_bg.webp) type("image/webp"), url(../img/page/mv_btn_bg.png) type("image/png")) 0 0 no-repeat; background-size: contain; content: ""; display: block; position: absolute; top: 0; left: 0; animation: 6s linear btnLoop infinite; width: min(157px, 10.9027777778vw); height: min(157px, 10.9027777778vw); z-index: 1; } @media screen and (width <= 749px) { .mv__btn a::before { width: 21.3333333333vw; height: 21.3333333333vw; } } .mv__btn a::after { background: url(../img/page/mv_btn_bg_shadow.png) 0 0 no-repeat; background: -webkit-image-set(url(../img/page/mv_btn_bg_shadow.webp) type("image/webp"), url(../img/page/mv_btn_bg_shadow.png) type("image/png")) 0 0 no-repeat; background: image-set(url(../img/page/mv_btn_bg_shadow.webp) type("image/webp"), url(../img/page/mv_btn_bg_shadow.png) type("image/png")) 0 0 no-repeat; background-size: contain; content: ""; display: block; position: absolute; top: min(19px, 1.3194444444vw); left: min(14px, 0.9722222222vw); animation: 6s linear btnLoop infinite; width: min(146px, 10.1388888889vw); height: min(144px, 10vw); } @media screen and (width <= 749px) { .mv__btn a::after { top: 0.8vw; left: 1.0666666667vw; width: 21.3333333333vw; height: 21.3333333333vw; } } @keyframes btnLoop { 0% { rotate: 0deg; } 100% { rotate: 360deg; } } @media (any-hover: hover) { .mv__btn a:hover { scale: 1.15; } } .mv__btn img { display: block; width: min(108px, 7.5vw); } @media screen and (width <= 749px) { .mv__btn img { width: 14.4vw; } } .mv::before { background-color: rgb(234, 97, 130); content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: min(212px, 14.7222222222vw); } @media screen and (width <= 749px) { .mv::before { content: none; display: none; } } .mv::after { border-width: 2px 0; border-color: #000; border-style: solid; content: ""; display: block; position: absolute; left: 0; bottom: min(212px, 14.7222222222vw); width: 100%; height: min(15px, 1.0416666667vw); } @media screen and (width <= 749px) { .mv::after { content: none; display: none; } } /* --------------------------------------- Global Navigation -----------------------------------------*/ .nav { background-color: #ea6182; position: relative; } @media screen and (width <= 749px) { .nav { z-index: 999; } } .nav__outer { background-color: #ea6182; } .nav__inner { display: flex; justify-content: space-between; } .nav li { width: 32.2916666667%; } @media screen and (width <= 749px) { .nav li { padding-inline: 1.6vw; width: 33.3333333333vw; } } .nav__btn { background-color: transparent; border: 0 none; cursor: pointer; outline: none; padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #ccc; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: calc(20 / var(--root-font-size) * 1rem); font-weight: 700; line-height: 1.5; text-align: center; width: 100%; height: 80px; } @media screen and (width > 749px) and (width <= 960px) { .nav__btn { font-size: 20px; font-size: 2.0833333333vw; } } @media screen and (width <= 749px) { .nav__btn { border-radius: 2.6666666667vw; font-size: 13px; font-size: 3.4666666667vw; height: 14.6666666667vw; line-height: 1.5; position: relative; } } .nav__btn:hover { color: var(--cl-text); } .nav__btn-icon { display: none; margin-right: 14px; } @media screen and (width <= 749px) { .nav__btn-icon { margin-right: 0; position: absolute; left: 50%; translate: -50% 0; } } .nav__btn--movie { background: var(--tab-movie); color: #8c5d13; } .nav__btn--movie .nav__btn-icon { width: min(86px, 27.7419354839%); } @media screen and (width <= 749px) { .nav__btn--movie .nav__btn-icon { top: -4.9333333333vw; width: 12.2666666667vw; } } .nav__btn--graph { background: var(--tab-graph); color: #02759f; } .nav__btn--graph .nav__btn-icon { width: min(57px, 18.3870967742%); } @media screen and (width <= 749px) { .nav__btn--graph .nav__btn-icon { top: -4.9333333333vw; width: 9.8666666667vw; } } .nav__btn--point { background: var(--tab-point); color: #15745e; } @media screen and (width <= 749px) { .nav__btn--point { letter-spacing: -0.2666666667vw; } } .nav__btn--point .nav__btn-icon { width: min(59px, 19.0322580645%); } @media screen and (width <= 749px) { .nav__btn--point .nav__btn-icon { top: -5.2vw; width: 9.2vw; } } @media screen and (width <= 749px) { .js-tab-btn .-on { padding-inline: 0; } } .js-tab-btn .-on .nav__btn { border-radius: 20px 20px 0 0; color: var(--cl-text); cursor: default; padding-bottom: 10px; height: 90px; } @media screen and (width <= 749px) { .js-tab-btn .-on .nav__btn { border-radius: 2.6666666667vw 2.6666666667vw 0 0; padding-block: 5.3333333333vw 2.6666666667vw; height: 16vw; } } .js-tab-btn .-on .nav__btn .nav__btn-icon { display: block; } /* --------------------------------------- Main -----------------------------------------*/ .l-main { grid-area: contents; } /* --------------------------------------- Footer -----------------------------------------*/ .l-footer { background-color: #f2f2f2; } .l-footer__wrapper { height: 60px; font-size: calc(13 / var(--root-font-size) * 1rem); display: grid; place-items: center; text-align: center; } @media screen and (width <= 749px) { .l-footer__wrapper { height: 12vw; font-size: 12px; font-size: 3.2vw; } } /* --------------------------------------- Button -----------------------------------------*/ @keyframes btn_animation { 0% { transform: scale(1, 1); } 87% { transform: scale(1, 1); } 88% { transform: scale(1, 0.9); } 92% { transform: scale(0.9, 1); } 96% { transform: scale(1.1, 1.1); } 100% { transform: scale(1, 1); } } .button__movie { width: 100%; max-width: 408px; background-color: var(--cl-white); border-radius: 40px; box-shadow: 5px 6px 0 0 var(--cl-text); display: block; transition: var(--transition) all; padding: 4px; position: relative; cursor: pointer; animation: btn_animation 2.4s infinite; animation-delay: 0s; animation-timing-function: linear; } @media screen and (width <= 749px) { .button__movie { border-radius: 6.6666666667vw; box-shadow: 0.6666666667vw 0.8vw 0 0 var(--cl-text); margin-inline: auto; max-width: 80vw; padding: 0.5333333333vw; } } @media (any-hover: hover) { .button__movie:hover { animation: none; translate: 5px 6px; box-shadow: none; } } .button__movie-inner { border-radius: 34px; border: 1px solid var(--cl-text); display: block; font-size: calc(18 / var(--root-font-size) * 1rem); font-weight: 700; display: flex; align-items: center; justify-content: center; height: 70px; } @media screen and (width <= 749px) { .button__movie-inner { border-radius: 6.6666666667vw; font-size: 16px; font-size: 4.2666666667vw; line-height: 1.375; height: 13.3333333333vw; } } .button__movie::before { background: url(../img/page/btn_icon_movie.svg) 0 0 no-repeat; background-size: contain; content: ""; display: block; position: absolute; top: -5px; left: -6px; width: 49px; height: 33px; } @media screen and (width <= 749px) { .button__movie::before { top: -1.3333333333vw; left: -1.3333333333vw; width: 10.1333333333vw; height: 6.6666666667vw; } } .button__movie--col2 { display: flex; justify-content: center; -moz-column-gap: 28px; column-gap: 28px; width: 100%; } @media screen and (width <= 749px) { .button__movie--col2 { -moz-column-gap: 2.6666666667vw; column-gap: 2.6666666667vw; } } .button__movie--col2 .button__movie { max-width: 188px; } @media screen and (width <= 749px) { .button__movie--col2 .button__movie { max-width: 33.0666666667vw; } } .button__external-outer { margin-inline: auto; max-width: 412px; position: relative; width: 100%; } @media screen and (width <= 749px) { .button__external-outer { max-width: 85.3333333333vw; margin-top: 14.6666666667vw; } } .button__external-inner { animation: btn_animation 2.4s infinite; animation-delay: 0s; animation-timing-function: linear; border: 1px solid var(--cl-text); border-radius: 42px; box-shadow: 5px 6px 0px 0px rgba(42, 42, 42, 0.9); display: block; padding: 5px; transition: var(--transition); } @media screen and (width <= 749px) { .button__external-inner { border-radius: 9.0666666667vw; box-shadow: 0.6666666667vw 0.8vw 0px 0px rgba(42, 42, 42, 0.9); padding: 1.3333333333vw; } } @media (any-hover: hover) { .button__external-inner:hover { animation: none; box-shadow: none; translate: 5px 6px; } } .button__external-inner2 { background-color: #FFFFFF; border: 1px solid var(--cl-text); border-radius: 35px; display: block; padding: 15px; position: relative; width: 100%; } @media screen and (width <= 749px) { .button__external-inner2 { border-radius: 8vw; padding: 4.5333333333vw 11.4666666667vw 4.5333333333vw 0vw; position: relative; } } .button__external-balloon { background: url(../img/page/more_bg_baloon_pc.svg) 0 0 no-repeat; background-size: contain; font-size: calc(14 / var(--root-font-size) * 1rem); font-weight: 700; padding-top: 11px; position: absolute; top: -36px; left: -20px; z-index: 1; transition: var(--transition); } @media screen and (width <= 749px) { .button__external-balloon { font-size: 14px; font-size: 3.7333333333vw; padding-top: 2.6666666667vw; top: -8.2666666667vw; left: -0.9333333333vw; } } .button__external-text { display: flex; align-items: center; justify-content: flex-end; font-size: calc(18 / var(--root-font-size) * 1rem); font-weight: 700; } @media screen and (width <= 749px) { .button__external-text { font-size: 16px; font-size: 4.2666666667vw; } } .button__external-text::after { content: ""; display: block; margin-left: 20px; width: 40.25px; height: 40.25px; } @media screen and (width <= 749px) { .button__external-text::after { margin-left: 0; position: absolute; top: 50%; right: 2.1333333333vw; translate: 0 -50%; width: 8vw; height: 8vw; } } .button__external.button__external--blue .button__external-inner { background-color: var(--tab-graph); } .button__external.button__external--blue .button__external-balloon { background: url(../img/page/more_bg_baloon_pc.svg) 0 0 no-repeat; background-size: contain; width: 244px; height: 59px; } @media screen and (width <= 749px) { .button__external.button__external--blue .button__external-balloon { background: url(../img/page/more_bg_baloon_sp.svg) 0 0 no-repeat; background-size: contain; width: 62.6666666667vw; height: 11.7333333333vw; } } .button__external.button__external--blue .button__external-text::after { background: url(../img/page/more_icon_window.svg) 0 0 no-repeat; background-size: contain; } .button__external.button__external--red .button__external-inner { background-color: var(--cl-graph1); } .button__external.button__external--red .button__external-balloon { background: url(../img/page/point03_baloon_01_pc.svg) 0 0 no-repeat; background-size: contain; line-height: 1.2857142857; text-align: left; padding: 11px 10px 0 16px; width: 269px; height: 70px; } @media screen and (width <= 749px) { .button__external.button__external--red .button__external-balloon { padding: 2.6666666667vw 0 0 2.6666666667vw; width: 69.3333333333vw; height: 17.6vw; } } .button__external.button__external--red .button__external-text::after { background: url(../img/page/point03_icon_window.svg) 0 0 no-repeat; background-size: contain; } @media screen and (width <= 749px) { .pointBox--point03 .pointBox__read .button__external .button__external-inner2 { padding-right: 12.8vw; } } @media screen and (width <= 749px) { .pointBox--point03 .pointBox__read .button__external .button__external-balloon { background: url(../img/page/point03_baloon_02_sp.svg) 0 0 no-repeat; background-size: contain; letter-spacing: -0.2666666667vw; padding-top: 2.6666666667vw; top: -11.4666666667vw; left: -3.3333333333vw; width: 69.3333333333vw; height: 16.2666666667vw; } } .pointBox--point03 .pointAbout .button__external .button__external-balloon { background: url(../img/page/point03_baloon_02_pc.svg) 0 0 no-repeat; background-size: contain; width: 284px; height: 70px; } @media screen and (width <= 749px) { .pointBox--point03 .pointAbout .button__external .button__external-balloon { background: url(../img/page/point03_baloon_02_sp.svg) 0 0 no-repeat; background-size: contain; letter-spacing: -0.2666666667vw; padding-top: 2.6666666667vw; top: -11.4666666667vw; left: -2.1333333333vw; width: 73.3333333333vw; height: 16.2666666667vw; } } /* --------------------------------------- Container -----------------------------------------*/ .container { max-width: 960px; margin-inline: auto; width: calc(100% - 30px); } @media screen and (width <= 749px) { .container { width: calc(100% - 10.6666666667vw); } } @media screen and (width <= 749px) { .container--spNone { width: 100%; } } /* --------------------------------------- Hide -----------------------------------------*/ .hide { display: none; } @media screen and (width <= 749px) { .-pc { display: none; } } .-sp { display: none; } @media screen and (width <= 749px) { .-sp { display: initial; } } /* --------------------------------------- indent -----------------------------------------*/ .indent { text-indent: -1em; padding-left: 1em; } /* --------------------------------------- Tab みんなの資産形成の本音 -----------------------------------------*/ #graph { background-color: var(--tab-graph); padding-block: 60px 80px; } @media screen and (width <= 749px) { #graph { padding-block: 8vw 16vw; } } .graphNav { display: flex; justify-content: center; } .graphNav li + li { margin-left: 38px; } @media screen and (width <= 749px) { .graphNav li + li { margin-left: 4.6666666667vw; } } .graphNav a { display: flex; align-items: center; justify-content: center; font-size: calc(20 / var(--root-font-size) * 1rem); font-weight: 700; transition: opacity 0.3s ease-in-out; } @media screen and (width <= 749px) { .graphNav a { font-size: 16px; font-size: 4.2666666667vw; } } @media (any-hover: hover) { .graphNav a:hover { opacity: var(--opacity); } } .graphNav a::after { background: url(../img/page/graph_icon_anc.svg) 0 0 no-repeat; background-size: contain; content: ""; display: block; margin-left: 5px; width: 25px; height: 25px; } @media screen and (width <= 749px) { .graphNav a::after { margin-left: 1.8666666667vw; width: 5.3333333333vw; height: 5.3333333333vw; } } .survey__wrapper { padding-block: 45px; } @media screen and (width <= 749px) { .survey__wrapper { padding-block: 13.3333333333vw 16vw; } } .survey__head .title { display: flex; align-items: center; justify-content: center; text-align: center; margin-bottom: 4px; } @media screen and (width <= 749px) { .survey__head .title { margin-bottom: 8vw; } } .survey__head .title::before { background: url(../img/page/graph_title_icon.svg) 0 0 no-repeat; content: ""; display: block; margin-right: 12px; width: 72px; height: 82px; } @media screen and (width <= 749px) { .survey__head .title::before { margin-right: 1.8666666667vw; width: 13.8666666667vw; height: 15.6vw; } } .survey__head .title img { display: block; } @media screen and (width <= 749px) { .survey__head .title img { width: 53.8666666667vw; } } .survey__head .text { font-size: calc(16 / var(--root-font-size) * 1rem); text-align: center; line-height: 1.8; } @media screen and (width <= 749px) { .survey__head .text { font-size: 16px; font-size: 4.2666666667vw; } } .survey__head .supplement { text-align: center; } .survey__head .supplement::before { content: "※"; } .survey__list { display: flex; flex-direction: column; row-gap: 88px; margin-top: 80px; width: 100%; } @media screen and (width <= 749px) { .survey__list { row-gap: 12.4vw; max-width: 100%; margin-top: 13.7333333333vw; } } .survey .surveyBox { background-color: #fff; border: 1px solid #2b2b2b; border-radius: 40px; padding-top: 56px; position: relative; } @media screen and (width <= 749px) { .survey .surveyBox { border-radius: 5.3333333333vw; padding-top: 9.6vw; } } .survey .surveyBox__num { width: 80px; height: 80px; background-color: #f3d261; border: 1px solid var(--cl-text); border-radius: 50%; display: grid; place-items: center; font-family: var(--font-en); font-size: calc(24 / var(--root-font-size) * 1rem); font-weight: 800; color: var(--cl-text); position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); } @media screen and (width <= 749px) { .survey .surveyBox__num { font-size: 16px; font-size: 4.2666666667vw; width: 13.3333333333vw; height: 13.3333333333vw; } } .survey .surveyBox__title { border-bottom: 1px solid var(--cl-text); color: var(--cl-text); font-size: calc(28 / var(--root-font-size) * 1rem); font-weight: 700; margin-inline: 60px; padding-bottom: 20px; text-align: center; } @media screen and (width <= 749px) { .survey .surveyBox__title { font-size: 18px; font-size: 4.8vw; margin-inline: 4.6666666667vw; padding-bottom: 5.3333333333vw; } } .survey .surveyBox__title br { display: none; } @media screen and (width <= 749px) { .survey .surveyBox__title br { display: block; } } .survey .surveyBox__bottom { background-color: #f3d261; border-radius: 0 0 40px 40px; border-top: 1px solid var(--cl-text); padding-block: 46px 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 16px; } @media screen and (width <= 749px) { .survey .surveyBox__bottom { border-radius: 0 0 5.3333333333vw 5.3333333333vw; padding: 8vw 0 9.7333333333vw; row-gap: 4vw; } } .survey .surveyBox__bottom .text { font-size: calc(18 / var(--root-font-size) * 1rem); font-weight: 700; text-align: center; } @media screen and (width <= 749px) { .survey .surveyBox__bottom .text { font-size: 16px; font-size: 4.2666666667vw; } } .survey .surveyBox__bottom .balloon { display: flex; justify-content: center; align-items: flex-end; text-align: center; line-height: 1.4; font-size: calc(18 / var(--root-font-size) * 1rem); font-weight: 700; } @media screen and (width <= 749px) { .survey .surveyBox__bottom .balloon { font-size: 16px; font-size: 4.2666666667vw; } } .survey .surveyBox__bottom .balloon::before, .survey .surveyBox__bottom .balloon::after { background-color: var(--cl-text); content: ""; display: block; margin-inline: 10px; width: 2px; height: 27px; } @media screen and (width <= 749px) { .survey .surveyBox__bottom .balloon::before, .survey .surveyBox__bottom .balloon::after { margin-inline: 2.1333333333vw; width: 0.8vw; height: 4.8vw; } } .survey .surveyBox__bottom .balloon::before { rotate: -30deg; } .survey .surveyBox__bottom .balloon::after { rotate: 30deg; } @media screen and (width <= 749px) { .survey .surveyBox__bottom .button__movie { max-width: 67.7333333333vw; } } .survey .surveyBox .inner { padding: 0 64px 60px; margin-top: 50px; } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner { padding-inline: 6.6666666667vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner { padding: 0 6.9333333333vw 8vw; margin-top: 5.3333333333vw; } } .survey .surveyBox .inner__comment { display: flex; align-items: center; justify-content: center; } .survey .surveyBox .inner__comment .balloon { background-color: #f3d261; border-radius: 20px; padding: 24px 22px 24px 26px; position: relative; font-size: calc(18 / var(--root-font-size) * 1rem); font-weight: 700; } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner__comment .balloon { padding: 2.5vw 2.2916666667vw 2.5vw 2.7083333333vw; font-size: 18px; font-size: 1.875vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner__comment .balloon { font-size: 14px; font-size: 3.7333333333vw; padding: 4vw 0 4.2666666667vw 3.4666666667vw; } } .survey .surveyBox .inner__comment .balloon::before { background: url(../img/page/graph_q1_bg_balloon.svg) 0 0 no-repeat; content: ""; width: 28px; height: 29px; position: absolute; bottom: -29px; left: 50%; translate: -50% 0; } @media screen and (width <= 749px) { .survey .surveyBox .inner__comment .balloon::before { left: auto; right: 9.2vw; translate: none; width: 3.7333333333vw; height: 3.8666666667vw; bottom: -3.8666666667vw; } } .survey .surveyBox .inner__comment .balloon strong { color: var(--cl-graph1); font-size: calc(24 / var(--root-font-size) * 1rem); font-weight: 700; } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner__comment .balloon strong { font-size: 24px; font-size: 2.5vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner__comment .balloon strong { font-size: 18px; font-size: 4.8vw; letter-spacing: -0.2666666667vw; } } .survey .surveyBox .inner__comment .balloon strong.num { font-family: var(--font-en); font-weight: 500; } .survey .surveyBox .inner__comment .balloon--left::before { background: url(../img/page/graph_q1_bg_balloon.svg) 0 0 no-repeat; background-size: contain; top: 50%; left: -21px; right: auto; translate: 0 -50%; width: 40px; height: 29px; } .survey .surveyBox .inner__comment .balloon--right::before { background: url(../img/page/graph_q4_bg_balloon.svg) 0 0 no-repeat; background-size: contain; top: 57%; bottom: auto; left: auto; right: -21px; translate: 0 -50%; width: 40px; height: 29px; } .survey .surveyBox .inner__comment .img img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } @media screen and (width <= 749px) { .survey .surveyBox .inner .inner__caption { font-size: 12px; font-size: 3.2vw; } .survey .surveyBox .inner .inner__caption .caption__list { position: relative; } .survey .surveyBox .inner .inner__caption .caption__list-item { display: flex; line-height: 1.4; margin-bottom: 2.6666666667vw; } .survey .surveyBox .inner .inner__caption .caption__list-item::before { border: 1px solid var(--cl-text); content: ""; display: block; flex-shrink: 0; margin-right: 1.3333333333vw; width: 4.4vw; height: 4.4vw; } } .survey .surveyBox .inner--q1 { display: flex; align-items: center; margin-top: 56px; } @media screen and (width <= 749px) { .survey .surveyBox .inner--q1 { display: block; margin-top: 6.4vw; } } .survey .surveyBox .inner--q1 .inner__graph { width: 323px; margin-inline: auto 37px; position: relative; } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner--q1 .inner__graph { margin-inline: auto 3.8541666667vw; width: 33.6458333333vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q1 .inner__graph { margin-inline: auto 0; width: 100%; } } .survey .surveyBox .inner--q1 .inner__graph .graph-wrap { position: relative; } @media screen and (width <= 749px) { .survey .surveyBox .inner--q1 .inner__graph .graph-wrap { display: flex; justify-content: flex-end; } } .survey .surveyBox .inner--q1 .inner__graph .graph-wrap .graph svg { display: block; } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner--q1 .inner__graph .graph-wrap .graph svg { width: 33.6458333333vw; height: auto; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q1 .inner__graph .graph-wrap .graph svg { width: 53.7333333333vw; height: auto; } } .survey .surveyBox .inner--q1 .inner__graph .labels { font-size: calc(21 / var(--root-font-size) * 1rem); color: var(--cl-text); line-height: 1; } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner--q1 .inner__graph .labels { font-size: 21px; font-size: 2.1875vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q1 .inner__graph .labels { font-size: 10px; font-size: 2.6666666667vw; } } .survey .surveyBox .inner--q1 .inner__graph .labels .text { font-family: var(--font-zen); font-weight: 900; } .survey .surveyBox .inner--q1 .inner__graph .labels .num { font-family: var(--font-en); font-size: calc(30 / var(--root-font-size) * 1rem); font-weight: 500; } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner--q1 .inner__graph .labels .num { font-size: 30px; font-size: 3.125vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q1 .inner__graph .labels .num { font-size: 18.75px; font-size: 5vw; } } .survey .surveyBox .inner--q1 .inner__graph .labels .num-per { font-family: var(--font-zen); font-size: calc(20 / var(--root-font-size) * 1rem); font-weight: 900; } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner--q1 .inner__graph .labels .num-per { font-size: 20px; font-size: 2.0833333333vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q1 .inner__graph .labels .num-per { font-size: 14.5px; font-size: 3.8666666667vw; margin-bottom: 0.2666666667vw; } } .survey .surveyBox .inner--q1 .inner__graph .labels .label01 { -webkit-text-fill-color: var(--cl-text); -webkit-text-stroke: 8px var(--cl-white); position: absolute; top: 95px; right: 23px; } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner--q1 .inner__graph .labels .label01 { top: 9.8958333333vw; right: 2.3958333333vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q1 .inner__graph .labels .label01 { -webkit-text-stroke-width: 1.0666666667vw; top: 15.0666666667vw; right: 3.8666666667vw; } } .survey .surveyBox .inner--q1 .inner__graph .labels .label01 [data-text] { position: relative; } .survey .surveyBox .inner--q1 .inner__graph .labels .label01 [data-text]::after { content: attr(data-text); display: block; -webkit-text-stroke: 0; position: absolute; top: 0; left: 0; } .survey .surveyBox .inner--q1 .inner__graph .labels .label01 .text { display: block; font-size: calc(24 / var(--root-font-size) * 1rem); } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner--q1 .inner__graph .labels .label01 .text { font-size: 24px; font-size: 2.5vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q1 .inner__graph .labels .label01 .text { font-size: 15px; font-size: 4vw; } } .survey .surveyBox .inner--q1 .inner__graph .labels .label01 .num-outer { display: flex; justify-content: center; align-items: flex-end; margin-top: 10px; } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner--q1 .inner__graph .labels .label01 .num-outer { margin-top: 1.0416666667vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q1 .inner__graph .labels .label01 .num-outer { margin-top: 1.6vw; } } .survey .surveyBox .inner--q1 .inner__graph .labels .label01 .num { font-size: calc(40 / var(--root-font-size) * 1rem); } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner--q1 .inner__graph .labels .label01 .num { font-size: 40px; font-size: 4.1666666667vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q1 .inner__graph .labels .label01 .num { font-size: 25px; font-size: 6.6666666667vw; } } .survey .surveyBox .inner--q1 .inner__graph .labels .label01 .num-per { font-size: calc(30 / var(--root-font-size) * 1rem); margin-bottom: 5px; } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner--q1 .inner__graph .labels .label01 .num-per { font-size: 30px; font-size: 3.125vw; margin-bottom: 0.5208333333vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q1 .inner__graph .labels .label01 .num-per { font-size: 18.75px; font-size: 5vw; margin-bottom: 0.2666666667vw; } } .survey .surveyBox .inner--q1 .inner__graph .labels .label02 { position: absolute; top: 202px; left: 59px; text-align: center; } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner--q1 .inner__graph .labels .label02 { top: 21.0416666667vw; left: 6.1458333333vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q1 .inner__graph .labels .label02 { top: 33.6vw; left: auto; right: 28.5333333333vw; } } .survey .surveyBox .inner--q1 .inner__graph .labels .label02 .num { margin-top: 4px; } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner--q1 .inner__graph .labels .label02 .num { margin-top: 0.4166666667vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q1 .inner__graph .labels .label02 .num { margin-top: 1.0666666667vw; } } .survey .surveyBox .inner--q1 .inner__graph .labels .label03 { position: absolute; top: 61px; left: 83px; } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner--q1 .inner__graph .labels .label03 { top: 6.3541666667vw; left: 8.6458333333vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q1 .inner__graph .labels .label03 { top: 10vw; left: auto; right: 30.9333333333vw; } } .survey .surveyBox .inner--q1 .inner__graph .labels .label03-text { font-size: calc(14 / var(--root-font-size) * 1rem); line-height: 1.5; position: absolute; top: -4px; left: -87px; } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner--q1 .inner__graph .labels .label03-text { top: -0.4166666667vw; left: -9.0625vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q1 .inner__graph .labels .label03-text { font-size: 10px; font-size: 2.6666666667vw; top: -0.8vw; left: 0vw; } } .survey .surveyBox .inner--q1 .inner__graph .labels .label03-text::after { background: url(../img/page/graph_q1_graphborder.svg) 0 0 no-repeat; background-size: contain; content: ""; display: block; position: absolute; top: 31px; right: -54px; width: 47px; height: 22px; } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner--q1 .inner__graph .labels .label03-text::after { top: 3.2291666667vw; right: -5.625vw; width: 4.8958333333vw; height: 2.2916666667vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q1 .inner__graph .labels .label03-text::after { top: 4vw; right: -10vw; width: 8vw; height: 4vw; } } .survey .surveyBox .inner--q1 .inner__graph .labels .label01 .text { opacity: 0; transition: opacity 0.3s ease-in-out 1.2s; transform: scale(0); } .survey .surveyBox .inner--q1 .inner__graph .graph-wrap.effect .labels .label01 .text { animation: bound_in 0.8s ease-in 1.2s; opacity: 1; transform: scale(1); } .survey .surveyBox .inner--q1 .inner__graph .labels .label01 .num-outer { transition: opacity 0.3s ease-in-out 1.6s; opacity: 0; transform: scale(0); } .survey .surveyBox .inner--q1 .inner__graph .graph-wrap.effect .labels .label01 .num-outer { animation: bound_in 0.8s ease-in 1.6s; opacity: 1; transform: scale(1); } .survey .surveyBox .inner--q1 .inner__graph .labels .label02, .survey .surveyBox .inner--q1 .inner__graph .labels .label03, .survey .surveyBox .inner--q1 .inner__graph .labels .label03-text { opacity: 0; transition: opacity 0.3s ease-in-out 0.6s; } .survey .surveyBox .inner--q1 .inner__graph .graph-wrap.effect .labels .label02, .survey .surveyBox .inner--q1 .inner__graph .graph-wrap.effect .labels .label03, .survey .surveyBox .inner--q1 .inner__graph .graph-wrap.effect .labels .label03-text { opacity: 1; animation: bound_in_s 0.8s ease-in 0.6s; } .survey .surveyBox .inner--q1 .inner__comment { align-items: flex-start; } @media screen and (width <= 749px) { .survey .surveyBox .inner--q1 .inner__comment { margin-top: 4vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q1 .inner__comment .balloon { width: 54.9333333333vw; } } .survey .surveyBox .inner--q1 .inner__comment .img { margin-top: 63px; margin-left: -113px; position: relative; } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner--q1 .inner__comment .img { width: 20.5208333333vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q1 .inner__comment .img { margin-top: 5.8666666667vw; margin-left: -4.2666666667vw; width: 25.8666666667vw; } } .survey .surveyBox .inner--q2 { grid-template-columns: 1fr; grid-template-areas: "graph" "caption" "comment"; row-gap: 24px; } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner--q2 { row-gap: 2.5vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q2 { row-gap: 4.2666666667vw; } } .survey .surveyBox .inner--q2 .inner__graph { width: 701px; height: 146px; margin-inline: auto; background: url(../img/page/graph02_bg_pc.svg?250418) 0 0 no-repeat; background-size: contain; } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner--q2 .inner__graph { width: 73.0208333333vw; height: 15.2083333333vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q2 .inner__graph { background: url(../img/page/graph02_bg_sp.svg?250418) 0 0 no-repeat; background-size: contain; width: 74.8vw; height: 27.8666666667vw; } } .survey .surveyBox .inner--q2 .inner__graph .barchart { padding: 10px 20px 0 33px; display: flex; flex-direction: column; justify-content: center; } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner--q2 .inner__graph .barchart { padding: 1.0416666667vw 2.0833333333vw 0 3.4375vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q2 .inner__graph .barchart { padding: 1.2vw 2.8vw 0 7.4666666667vw; } } .survey .surveyBox .inner--q2 .inner__graph .barchart .barWrap .bar { border: 2px solid var(--cl-text); border-left: 0 none; display: flex; align-items: center; justify-content: flex-end; padding-right: 5px; height: 26px; margin-block: 4px; width: 0; position: relative; } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner--q2 .inner__graph .barchart .barWrap .bar { padding-right: 0.5208333333vw; height: 2.7083333333vw; margin-block: 0.4166666667vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q2 .inner__graph .barchart .barWrap .bar { padding-right: 1.0666666667vw; height: 5.8666666667vw; margin-block: 0.5333333333vw; } } .survey .surveyBox .inner--q2 .inner__graph .barchart .barWrap .bar.bar1 { background: var(--cl-graph7); } .survey .surveyBox .inner--q2 .inner__graph .barchart .barWrap .bar.bar2 { background: var(--cl-graph1); } .survey .surveyBox .inner--q2 .inner__graph .barchart .barWrap .bar.bar3 { background: var(--cl-graph2); } .survey .surveyBox .inner--q2 .inner__graph .barchart .barWrap .text { font-family: var(--font-en); font-size: calc(16 / var(--root-font-size) * 1rem); font-weight: bold; opacity: 0; transition: opacity 0.3s ease-in 1s; } @media screen and (width <= 749px) { .survey .surveyBox .inner--q2 .inner__graph .barchart .barWrap .text { font-size: calc(12 / var(--root-font-size) * 1rem); } } .survey .surveyBox .inner--q2 .inner__graph .barchart.effect .barWrap .bar1 { animation: graph2_bar1 1s; width: 11.6666666667%; } .survey .surveyBox .inner--q2 .inner__graph .barchart.effect .barWrap .bar2 { animation: graph2_bar2 1s; width: 91.6666666667%; } .survey .surveyBox .inner--q2 .inner__graph .barchart.effect .barWrap .bar3 { animation: graph2_bar3 1s; width: 63.3333333333%; } .survey .surveyBox .inner--q2 .inner__graph .barchart.effect .barWrap .text { opacity: 1; } @keyframes graph2_bar1 { 0% { width: 0%; } 100% { width: 11.6666666667%; } } @keyframes graph2_bar2 { 0% { width: 0%; } 100% { width: 91.6666666667%; } } @keyframes graph2_bar3 { 0% { width: 0%; } 100% { width: 63.3333333333%; } } .survey .surveyBox .inner--q2 .inner__comment { display: flex; align-items: center; -moz-column-gap: 30px; column-gap: 30px; margin-top: 40px; } @media screen and (width <= 749px) { .survey .surveyBox .inner--q2 .inner__comment { align-items: flex-start; -moz-column-gap: 0; column-gap: 0; margin-top: 5.3333333333vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q2 .inner__comment .balloon { -moz-column-gap: 0; column-gap: 0; margin-left: -4.8vw; width: 56.5333333333vw; } .survey .surveyBox .inner--q2 .inner__comment .balloon::before { background: url(../img/page/graph_q1_bg_balloon.svg) 0 0 no-repeat; background-size: contain; width: 3.7333333333vw; height: 3.8666666667vw; transform: scaleX(-1); top: auto; bottom: -5.6vw; left: 9.2vw; } } .survey .surveyBox .inner--q2 .inner__comment .img { width: 121px; } @media screen and (width <= 749px) { .survey .surveyBox .inner--q2 .inner__comment .img { margin-top: 10.5333333333vw; position: relative; z-index: 1; width: 23.0666666667vw; } } .survey .surveyBox .inner--q3 .inner__graph { width: 731px; height: 457px; margin-inline: auto; background: url(../img/page/graph03_bg_pc.svg?250418) 0 0 no-repeat; } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner--q3 .inner__graph { width: 76.1458333333vw; height: 47.6041666667vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q3 .inner__graph { width: 74.1333333333vw; height: 87.2vw; background: url(../img/page/graph03_bg_sp.svg?250418) 0 0 no-repeat; background-size: contain; } } .survey .surveyBox .inner--q3 .inner__graph .barchart { padding: 20px 20px 0 261.5px; } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner--q3 .inner__graph .barchart { padding: 2.0833333333vw 2.0833333333vw 0 27.2395833333vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q3 .inner__graph .barchart { padding: 2.6666666667vw 2.9333333333vw 0 2.1333333333vw; } } .survey .surveyBox .inner--q3 .inner__graph .barchart .barWrap .bar { border: 2px solid var(--cl-text); border-left: 0 none; display: flex; align-items: center; justify-content: flex-end; height: 30px; margin-bottom: 16px; padding-right: 5px; width: 0; } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner--q3 .inner__graph .barchart .barWrap .bar { height: 3.125vw; margin-bottom: 1.6666666667vw; padding-right: 0.5208333333vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q3 .inner__graph .barchart .barWrap .bar { border: 0.5333333333vw solid var(--cl-text); border-left: 0 none; height: 6.1333333333vw; margin-bottom: 2.9333333333vw; padding-right: 1.3333333333vw; } } .survey .surveyBox .inner--q3 .inner__graph .barchart .barWrap .bar.bar1 { background: var(--cl-graph1); } .survey .surveyBox .inner--q3 .inner__graph .barchart .barWrap .bar.bar2 { background: var(--cl-graph2); } .survey .surveyBox .inner--q3 .inner__graph .barchart .barWrap .bar.bar3 { background: var(--cl-graph3); } .survey .surveyBox .inner--q3 .inner__graph .barchart .barWrap .bar.bar4 { background: var(--cl-graph4); } .survey .surveyBox .inner--q3 .inner__graph .barchart .barWrap .bar.bar5 { background: var(--cl-graph5); } .survey .surveyBox .inner--q3 .inner__graph .barchart .barWrap .bar.bar6 { background: var(--cl-graph6); } .survey .surveyBox .inner--q3 .inner__graph .barchart .barWrap .bar.bar7 { background: var(--cl-graph7); } .survey .surveyBox .inner--q3 .inner__graph .barchart .barWrap .bar.bar8 { background: var(--cl-graph8); } .survey .surveyBox .inner--q3 .inner__graph .barchart .barWrap .bar.bar9 { background: var(--cl-graph12); } .survey .surveyBox .inner--q3 .inner__graph .barchart .barWrap .text { font-family: var(--font-en); font-size: calc(16 / var(--root-font-size) * 1rem); font-weight: bold; opacity: 0; transition: opacity 0.3s ease-in 1s; } @media screen and (width <= 749px) { .survey .surveyBox .inner--q3 .inner__graph .barchart .barWrap .text { font-size: 12px; font-size: 3.2vw; } } .survey .surveyBox .inner--q3 .inner__graph .barchart.effect .barWrap .bar1 { animation: graph3_bar1 1s; width: 86.6666666667%; } .survey .surveyBox .inner--q3 .inner__graph .barchart.effect .barWrap .bar2 { animation: graph3_bar2 1s; width: 56.6666666667%; } .survey .surveyBox .inner--q3 .inner__graph .barchart.effect .barWrap .bar3 { animation: graph3_bar3 1s; width: 36.6666666667%; } .survey .surveyBox .inner--q3 .inner__graph .barchart.effect .barWrap .bar4 { animation: graph3_bar4 1s; width: 30%; } .survey .surveyBox .inner--q3 .inner__graph .barchart.effect .barWrap .bar5 { animation: graph3_bar5 1s; width: 30%; } .survey .surveyBox .inner--q3 .inner__graph .barchart.effect .barWrap .bar6 { animation: graph3_bar6 1s; width: 30%; } .survey .surveyBox .inner--q3 .inner__graph .barchart.effect .barWrap .bar7 { animation: graph3_bar7 1s; width: 26.6666666667%; } .survey .surveyBox .inner--q3 .inner__graph .barchart.effect .barWrap .bar8 { animation: graph3_bar8 1s; width: 20%; } .survey .surveyBox .inner--q3 .inner__graph .barchart.effect .barWrap .bar9 { animation: graph3_bar9 1s; width: 16.6666666667%; } .survey .surveyBox .inner--q3 .inner__graph .barchart.effect .barWrap .text { opacity: 1; } @keyframes graph3_bar1 { 0% { width: 0%; } 100% { width: 86.6666666667%; } } @keyframes graph3_bar2 { 0% { width: 0%; } 100% { width: 56.6666666667%; } } @keyframes graph3_bar3 { 0% { width: 0%; } 100% { width: 36.6666666667%; } } @keyframes graph3_bar4 { 0% { width: 0%; } 100% { width: 30%; } } @keyframes graph3_bar5 { 0% { width: 0%; } 100% { width: 30%; } } @keyframes graph3_bar6 { 0% { width: 0%; } 100% { width: 30%; } } @keyframes graph3_bar7 { 0% { width: 0%; } 100% { width: 26.6666666667%; } } @keyframes graph3_bar8 { 0% { width: 0%; } 100% { width: 20%; } } @keyframes graph3_bar9 { 0% { width: 0%; } 100% { width: 16.6666666667%; } } .survey .surveyBox .inner--q3 .inner__bottom-outer { display: flex; justify-content: center; align-items: flex-start; -moz-column-gap: 50px; column-gap: 50px; margin-top: 40px; } @media screen and (width <= 749px) { .survey .surveyBox .inner--q3 .inner__bottom-outer { flex-direction: column; margin-top: 5.3333333333vw; } } .survey .surveyBox .inner--q3 .inner__comment { display: flex; justify-content: flex-end; align-items: flex-start; -moz-column-gap: 28px; column-gap: 28px; } @media screen and (width <= 749px) { .survey .surveyBox .inner--q3 .inner__comment { order: 1; justify-content: center; margin-top: 5.8666666667vw; margin-inline: auto; -moz-column-gap: 0; column-gap: 0; } } .survey .surveyBox .inner--q3 .inner__comment .img { width: 94px; } @media screen and (width <= 749px) { .survey .surveyBox .inner--q3 .inner__comment .img { margin-top: 1.8666666667vw; margin-right: -1.3333333333vw; margin-left: 2.4vw; position: relative; width: 14.9333333333vw; z-index: 1; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q3 .inner__comment .balloon { width: 55.2vw; } } .survey .surveyBox .inner--q3 .inner__comment .balloon::before { top: auto; bottom: 17px; translate: 0; } @media screen and (width <= 749px) { .survey .surveyBox .inner--q3 .inner__comment .balloon::before { left: -2.1333333333vw; top: 8.2666666667vw; bottom: auto; width: 3.7333333333vw; height: 3.8666666667vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q3 .inner__comment .balloon strong { letter-spacing: -0.5333333333vw; } } .survey .surveyBox .inner--q3 .other { font-size: calc(14 / var(--root-font-size) * 1rem); line-height: 1.9285714286; margin-top: 15px; } @media screen and (width <= 749px) { .survey .surveyBox .inner--q3 .other { font-size: 12px; font-size: 3.2vw; margin-inline: -1.3333333333vw -2.6666666667vw; } } .survey .surveyBox .inner--q3 .other__list { padding-left: 1em; } .survey .surveyBox .inner--q3 .other__list-item { text-indent: -1em; padding-left: 1em; } .survey .surveyBox .inner--q3 .other__list-item::before { content: "・"; } @media screen and (width <= 749px) { .survey .surveyBox .inner--q3 .inner__caption .caption__list { display: flex; justify-content: space-between; flex-wrap: wrap; position: relative; } .survey .surveyBox .inner--q3 .inner__caption .caption__list-item { width: 38.9333333333vw; } .survey .surveyBox .inner--q3 .inner__caption .caption__list-item.graph01::before { background-color: var(--cl-graph1); } .survey .surveyBox .inner--q3 .inner__caption .caption__list-item.graph02::before { background-color: var(--cl-graph2); } .survey .surveyBox .inner--q3 .inner__caption .caption__list-item.graph03::before { background-color: var(--cl-graph3); } .survey .surveyBox .inner--q3 .inner__caption .caption__list-item.graph04::before { background-color: var(--cl-graph4); } .survey .surveyBox .inner--q3 .inner__caption .caption__list-item.graph05::before { background-color: var(--cl-graph5); } .survey .surveyBox .inner--q3 .inner__caption .caption__list-item.graph06::before { background-color: var(--cl-graph6); } .survey .surveyBox .inner--q3 .inner__caption .caption__list-item.graph07::before { background-color: var(--cl-graph7); } .survey .surveyBox .inner--q3 .inner__caption .caption__list-item.graph08::before { background-color: var(--cl-graph8); } .survey .surveyBox .inner--q3 .inner__caption .caption__list-item.graph09::before { background-color: var(--cl-graph9); } } .survey .surveyBox .inner--q4 .inner__graph { width: min(723px, 75.3125vw); height: min(252px, 26.25vw); margin-inline: auto; background: url(../img/page/graph04_bg_pc.svg?250418) 0 0 no-repeat; } @media screen and (width <= 749px) { .survey .surveyBox .inner--q4 .inner__graph { background: url(../img/page/graph04_bg_sp.svg?250418) 0 0 no-repeat; background-size: contain; width: 75.3333333333vw; height: 44.5333333333vw; } } .survey .surveyBox .inner--q4 .inner__graph .barchart { padding: 20px 21px 0 227px; } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner--q4 .inner__graph .barchart { padding: 2.0833333333vw 2.1875vw 0 23.6458333333vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q4 .inner__graph .barchart { padding: 1.6vw 0 0 1.6vw; } } .survey .surveyBox .inner--q4 .inner__graph .barchart .barWrap .bar { border: 2px solid var(--cl-text); border-left: 0 none; display: flex; align-items: center; justify-content: flex-end; height: 27px; margin-bottom: 15px; padding-right: 5px; width: 0; } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner--q4 .inner__graph .barchart .barWrap .bar { height: 2.8125vw; margin-bottom: 1.5625vw; padding-right: 0.5208333333vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q4 .inner__graph .barchart .barWrap .bar { height: 5.3333333333vw; margin-bottom: 2.1333333333vw; padding-right: 1.3333333333vw; } } .survey .surveyBox .inner--q4 .inner__graph .barchart .barWrap .bar.bar1 { background: var(--cl-graph1); } .survey .surveyBox .inner--q4 .inner__graph .barchart .barWrap .bar.bar1.is_on { animation: graph4_bar1 1s; width: 88.5714285714%; } .survey .surveyBox .inner--q4 .inner__graph .barchart .barWrap .bar.bar2 { background: var(--cl-graph2); } .survey .surveyBox .inner--q4 .inner__graph .barchart .barWrap .bar.bar2.is_on { animation: graph4_bar2 1s; width: 82.8571428571%; } .survey .surveyBox .inner--q4 .inner__graph .barchart .barWrap .bar.bar3 { background: var(--cl-graph3); } .survey .surveyBox .inner--q4 .inner__graph .barchart .barWrap .bar.bar3.is_on { animation: graph4_bar3 1s; width: 48.5714285714%; } .survey .surveyBox .inner--q4 .inner__graph .barchart .barWrap .bar.bar4 { background: var(--cl-graph4); } .survey .surveyBox .inner--q4 .inner__graph .barchart .barWrap .bar.bar4.is_on { animation: graph4_bar4 1s; width: 45.7142857143%; } .survey .surveyBox .inner--q4 .inner__graph .barchart .barWrap .bar.bar5 { background: var(--cl-graph7); } .survey .surveyBox .inner--q4 .inner__graph .barchart .barWrap .bar.bar5.is_on { animation: graph4_bar5 1s; width: 20%; } .survey .surveyBox .inner--q4 .inner__graph .barchart .barWrap .text { font-family: var(--font-en); font-size: calc(16 / var(--root-font-size) * 1rem); font-weight: 700; opacity: 0; transition: opacity 0.3s ease-in 1s; } @media screen and (width <= 749px) { .survey .surveyBox .inner--q4 .inner__graph .barchart .barWrap .text { font-size: 12px; font-size: 3.2vw; } } .survey .surveyBox .inner--q4 .inner__graph .barchart.effect .barWrap .bar1 { animation: graph4_bar1 1s; width: 88.5714285714%; } .survey .surveyBox .inner--q4 .inner__graph .barchart.effect .barWrap .bar2 { animation: graph4_bar2 1s; width: 82.8571428571%; } .survey .surveyBox .inner--q4 .inner__graph .barchart.effect .barWrap .bar3 { animation: graph4_bar3 1s; width: 48.5714285714%; } .survey .surveyBox .inner--q4 .inner__graph .barchart.effect .barWrap .bar4 { animation: graph4_bar4 1s; width: 45.7142857143%; } .survey .surveyBox .inner--q4 .inner__graph .barchart.effect .barWrap .bar5 { animation: graph4_bar5 1s; width: 20%; } .survey .surveyBox .inner--q4 .inner__graph .barchart.effect .barWrap .text { opacity: 1; } @keyframes graph4_bar1 { 0% { width: 0%; } 100% { width: 88.5714285714%; } } @keyframes graph4_bar2 { 0% { width: 0%; } 100% { width: 82.8571428571%; } } @keyframes graph4_bar3 { 0% { width: 0%; } 100% { width: 48.5714285714%; } } @keyframes graph4_bar4 { 0% { width: 0%; } 100% { width: 45.7142857143%; } } @keyframes graph4_bar5 { 0% { width: 0%; } 100% { width: 20%; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q4 .caption__list { margin-top: 6.6666666667vw; } .survey .surveyBox .inner--q4 .caption__list-item.graph01::before { background-color: var(--cl-graph1); } .survey .surveyBox .inner--q4 .caption__list-item.graph02::before { background-color: var(--cl-graph2); } .survey .surveyBox .inner--q4 .caption__list-item.graph03::before { background-color: var(--cl-graph3); } .survey .surveyBox .inner--q4 .caption__list-item.graph04::before { background-color: var(--cl-graph4); } .survey .surveyBox .inner--q4 .caption__list-item.graph05::before { background-color: var(--cl-graph7); } } .survey .surveyBox .inner--q4 .inner__comment { display: flex; align-items: center; -moz-column-gap: 30px; column-gap: 30px; margin-top: 38px; } @media screen and (width <= 749px) { .survey .surveyBox .inner--q4 .inner__comment { -moz-column-gap: 3.6vw; column-gap: 3.6vw; margin-top: 6.6666666667vw; } } .survey .surveyBox .inner--q4 .inner__comment .img { width: 121px; } @media screen and (width <= 749px) { .survey .surveyBox .inner--q4 .inner__comment .img { width: 23.0666666667vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q4 .inner__comment .balloon { width: 44vw; } .survey .surveyBox .inner--q4 .inner__comment .balloon::before { top: 10.9333333333vw; translate: none; right: -2.9333333333vw; width: 5.3333333333vw; height: 4vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q4 .inner__comment .balloon strong { display: block; } } .survey .surveyBox .inner--q5 .inner__graph { width: min(711px, 74.0625vw); height: min(355px, 36.9791666667vw); margin-inline: auto; background: url(../img/page/graph05_bg_pc.svg?250418) 0 0 no-repeat; } @media screen and (width <= 749px) { .survey .surveyBox .inner--q5 .inner__graph { width: 75.4666666667vw; height: 60.2666666667vw; background: url(../img/page/graph05_bg_sp.svg?250418) 0 0 no-repeat; background-size: contain; } } .survey .surveyBox .inner--q5 .inner__graph .barchart { padding: 18px 15px 0 322.5px; } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner--q5 .inner__graph .barchart { padding: 1.875vw 1.5625vw 0 33.59375vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q5 .inner__graph .barchart { padding: 2.1333333333vw 2.6666666667vw 0 1.6vw; } } .survey .surveyBox .inner--q5 .inner__graph .barchart .barWrap .bar { border: 2px solid var(--cl-text); border-left: 0 none; display: flex; align-items: center; justify-content: flex-end; height: 29px; margin-bottom: 15px; padding-right: 5px; width: 0; } @media screen and (width > 749px) and (width <= 960px) { .survey .surveyBox .inner--q5 .inner__graph .barchart .barWrap .bar { height: 3.0208333333vw; margin-bottom: 1.5625vw; padding-right: 0.5208333333vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q5 .inner__graph .barchart .barWrap .bar { height: 5.6vw; margin-bottom: 2.1333333333vw; padding-right: 1.3333333333vw; } } .survey .surveyBox .inner--q5 .inner__graph .barchart .barWrap .bar.bar1 { background: var(--cl-graph1); } .survey .surveyBox .inner--q5 .inner__graph .barchart .barWrap .bar.bar2 { background: var(--cl-graph2); } .survey .surveyBox .inner--q5 .inner__graph .barchart .barWrap .bar.bar3 { background: var(--cl-graph3); } .survey .surveyBox .inner--q5 .inner__graph .barchart .barWrap .bar.bar4 { background: var(--cl-graph4); } .survey .surveyBox .inner--q5 .inner__graph .barchart .barWrap .bar.bar5 { background: var(--cl-graph5); } .survey .surveyBox .inner--q5 .inner__graph .barchart .barWrap .bar.bar6 { background: var(--cl-graph6); } .survey .surveyBox .inner--q5 .inner__graph .barchart .barWrap .bar.bar7 { background: var(--cl-graph7); } .survey .surveyBox .inner--q5 .inner__graph .barchart .barWrap .text { font-family: var(--font-en); font-size: calc(16 / var(--root-font-size) * 1rem); font-weight: bold; opacity: 0; transition: opacity 0.3s ease-in 1s; } @media screen and (width <= 749px) { .survey .surveyBox .inner--q5 .inner__graph .barchart .barWrap .text { font-size: 12px; font-size: 3.2vw; } } .survey .surveyBox .inner--q5 .inner__graph .barchart.effect .barWrap .bar1 { animation: graph5_bar1 1s; width: 76%; } .survey .surveyBox .inner--q5 .inner__graph .barchart.effect .barWrap .bar2 { animation: graph5_bar2 1s; width: 60%; } .survey .surveyBox .inner--q5 .inner__graph .barchart.effect .barWrap .bar3 { animation: graph5_bar3 1s; width: 48%; } .survey .surveyBox .inner--q5 .inner__graph .barchart.effect .barWrap .bar4 { animation: graph5_bar4 1s; width: 46%; } .survey .surveyBox .inner--q5 .inner__graph .barchart.effect .barWrap .bar5 { animation: graph5_bar5 1s; width: 44%; } .survey .surveyBox .inner--q5 .inner__graph .barchart.effect .barWrap .bar6 { animation: graph5_bar6 1s; width: 32%; } .survey .surveyBox .inner--q5 .inner__graph .barchart.effect .barWrap .bar7 { animation: graph5_bar7 1s; width: 30%; } .survey .surveyBox .inner--q5 .inner__graph .barchart.effect .barWrap .text { opacity: 1; } @keyframes graph5_bar1 { 0% { width: 0%; } 100% { width: 76%; } } @keyframes graph5_bar2 { 0% { width: 0%; } 100% { width: 60%; } } @keyframes graph5_bar3 { 0% { width: 0%; } 100% { width: 48%; } } @keyframes graph5_bar4 { 0% { width: 0%; } 100% { width: 46%; } } @keyframes graph5_bar5 { 0% { width: 0%; } 100% { width: 44%; } } @keyframes graph5_bar6 { 0% { width: 0%; } 100% { width: 32%; } } @keyframes graph5_bar7 { 0% { width: 0%; } 100% { width: 30%; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q5 .caption__list { margin-top: 6.6666666667vw; } .survey .surveyBox .inner--q5 .caption__list-item.graph01::before { background-color: var(--cl-graph1); } .survey .surveyBox .inner--q5 .caption__list-item.graph02::before { background-color: var(--cl-graph2); } .survey .surveyBox .inner--q5 .caption__list-item.graph03::before { background-color: var(--cl-graph3); } .survey .surveyBox .inner--q5 .caption__list-item.graph04::before { background-color: var(--cl-graph4); } .survey .surveyBox .inner--q5 .caption__list-item.graph05::before { background-color: var(--cl-graph5); } .survey .surveyBox .inner--q5 .caption__list-item.graph06::before { background-color: var(--cl-graph6); } .survey .surveyBox .inner--q5 .caption__list-item.graph07::before { background-color: var(--cl-graph7); } } .survey .surveyBox .inner--q5 .inner__comment { display: flex; justify-content: flex-end; align-items: center; -moz-column-gap: 30px; column-gap: 30px; } @media screen and (width <= 749px) { .survey .surveyBox .inner--q5 .inner__comment { -moz-column-gap: 1.6vw; column-gap: 1.6vw; margin-top: 6.6666666667vw; } } @media screen and (width <= 749px) { .survey .surveyBox .inner--q5 .inner__comment .img { width: 14.9333333333vw; } } .survey .surveyBox .inner--q5 .inner__comment .balloon strong { letter-spacing: -1px; } @media screen and (width <= 749px) { .survey .surveyBox .inner--q5 .inner__comment .balloon { width: 57.6vw; } .survey .surveyBox .inner--q5 .inner__comment .balloon::before { right: -2.6666666667vw; top: auto; bottom: 2.4vw; width: 5.6vw; height: 4vw; } .survey .surveyBox .inner--q5 .inner__comment .balloon strong { letter-spacing: -0.5333333333vw; } } .survey .surveyBox::before, .survey .surveyBox::after { animation: floating_icon 1.2s ease-in-out infinite alternate-reverse; } .survey .surveyBox.q1::before { background: url(../img/page/graph_bg_img01.svg) 0 0 no-repeat; content: ""; display: block; position: absolute; top: 140px; right: -38px; width: 102px; height: 66px; } @media screen and (width <= 749px) { .survey .surveyBox.q1::before { top: 26.2666666667vw; right: -3.6vw; width: 13.6vw; height: 8.8vw; } } .survey .surveyBox.q1::after { background: url(../img/page/graph_bg_img02.svg) 0 0 no-repeat; content: ""; display: block; position: absolute; bottom: 55px; left: -38px; width: 123px; height: 84px; } @media screen and (width <= 749px) { .survey .surveyBox.q1::after { bottom: 41.6vw; left: -2.9333333333vw; width: 16.8vw; height: 12.2666666667vw; } } .survey .surveyBox.q1 .inner__comment .balloon { opacity: 0; transition: all 0.8s ease-out 3.2s; translate: 0 20%; } .survey .surveyBox.q1.effect .inner__comment .balloon { opacity: 1; translate: 0 0; } .survey .surveyBox.q2::before { background: url(../img/page/graph_bg_img03.svg) 0 0 no-repeat; content: ""; display: block; position: absolute; top: -47px; right: 130px; width: 89px; height: 102px; } @media screen and (width <= 749px) { .survey .surveyBox.q2::before { top: -7.3333333333vw; right: 12.4vw; width: 11.8666666667vw; height: 13.6vw; } } .survey .surveyBox.q2::after { background: url(../img/page/graph_bg_img04.svg) 0 0 no-repeat; content: ""; display: block; position: absolute; bottom: 45px; right: -19px; width: 63px; height: 98px; } @media screen and (width <= 749px) { .survey .surveyBox.q2::after { bottom: 6.4vw; right: -2vw; width: 8.4vw; height: 13.0666666667vw; } } .survey .surveyBox.q2 .surveyBox__title::before { background: url(../img/page/graph_bg_img05.svg) 0 0 no-repeat; content: ""; display: block; position: absolute; bottom: 177px; left: -34px; width: 69px; height: 65px; animation: floating_icon 1.2s ease-in-out infinite alternate-reverse; } @media screen and (width <= 749px) { .survey .surveyBox.q2 .surveyBox__title::before { bottom: 32.8vw; left: -3.6vw; width: 9.2vw; height: 8.6666666667vw; } } .survey .surveyBox.q2 .inner__comment .balloon { opacity: 0; transition: all 0.8s ease-out 1.2s; translate: 10% 0; } .survey .surveyBox.q2.effect .inner__comment .balloon { opacity: 1; translate: 0 0; } .survey .surveyBox.q3::before { background: url(../img/page/graph_bg_img06.svg) 0 0 no-repeat; content: ""; display: block; position: absolute; bottom: 384px; left: -33px; width: 101px; height: 66px; } @media screen and (width <= 749px) { .survey .surveyBox.q3::before { bottom: 30.4vw; left: -4.4vw; width: 13.4666666667vw; height: 8.8vw; } } .survey .surveyBox.q3::after { background: url(../img/page/graph_bg_img07.svg) 0 0 no-repeat; content: ""; display: block; position: absolute; top: 241px; right: -49px; width: 97px; height: 124px; } @media screen and (width <= 749px) { .survey .surveyBox.q3::after { top: 4.4vw; right: -4.2666666667vw; width: 12.9333333333vw; height: 16.5333333333vw; } } .survey .surveyBox.q3 .inner__comment .balloon { opacity: 0; transition: all 0.8s ease-out 1.2s; translate: 10% 0; } .survey .surveyBox.q3.effect .inner__comment .balloon { opacity: 1; translate: 0 0; } .survey .surveyBox.q4::before { background: url(../img/page/graph_bg_img08.svg) 0 0 no-repeat; content: ""; display: block; position: absolute; top: -45px; left: 55px; width: 120px; height: 90px; } @media screen and (width <= 749px) { .survey .surveyBox.q4::before { top: -5.0666666667vw; left: 8.8vw; width: 16vw; height: 12vw; } } .survey .surveyBox.q4::after { background: url(../img/page/graph_bg_img09.svg) 0 0 no-repeat; content: ""; display: block; position: absolute; top: 389px; right: -43px; width: 84px; height: 149px; } @media screen and (width <= 749px) { .survey .surveyBox.q4::after { top: 113.4666666667vw; right: -4.2666666667vw; width: 11.2vw; height: 19.8666666667vw; } } .survey .surveyBox.q4 .inner__comment .balloon { opacity: 0; transition: all 0.8s ease-out 1.2s; translate: -10% 0; } .survey .surveyBox.q4.effect .inner__comment .balloon { opacity: 1; translate: 0 0; } .survey .surveyBox.q5::before { background: url(../img/page/graph_bg_img10.svg) 0 0 no-repeat; content: ""; display: block; position: absolute; top: 140px; right: -35px; width: 69px; height: 65px; } @media screen and (width <= 749px) { .survey .surveyBox.q5::before { top: 15.4666666667vw; right: -2.6666666667vw; width: 9.2vw; height: 9.2vw; } } .survey .surveyBox.q5::after { background: url(../img/page/graph_bg_img11.svg) 0 0 no-repeat; content: ""; display: block; position: absolute; top: 407px; left: -38px; width: 123px; height: 84px; } @media screen and (width <= 749px) { .survey .surveyBox.q5::after { top: auto; bottom: 48.8vw; left: -4.4vw; width: 16.4vw; height: 11.2vw; } } @media screen and (width <= 749px) { .survey .surveyBox.q5 .button__movie--col2 { max-width: 69.3333333333vw; } } .survey .surveyBox.q5 .inner__comment .balloon { opacity: 0; transition: all 0.8s ease-out 1.2s; translate: -10% 0; } .survey .surveyBox.q5.effect .inner__comment .balloon { opacity: 1; translate: 0 0; } .voice { position: relative; } .voice__head .title { display: flex; align-items: center; justify-content: center; text-align: center; color: var(--cl-main); margin-bottom: 20px; } @media screen and (width <= 749px) { .voice__head .title { font-size: 16px; font-size: 4.2666666667vw; margin-bottom: 6.6666666667vw; } } .voice__head .title::before { background: url(../img/page/voice_title_icon.svg) 0 0 no-repeat; content: ""; display: block; margin-right: 12px; width: 68px; height: 62px; } @media screen and (width <= 749px) { .voice__head .title::before { margin-right: 1.8666666667vw; width: 12.8vw; height: 11.4666666667vw; } } .voice__head .title img { display: block; } .voice__head .text { font-size: calc(16 / var(--root-font-size) * 1rem); text-align: center; line-height: 1.8; } @media screen and (width <= 749px) { .voice__head .text { font-size: 14px; font-size: 3.7333333333vw; text-align: center; } } .voice__head .supplement { text-align: center; } @media screen and (width <= 749px) { .voice__head .supplement { font-size: 16px; font-size: 4.2666666667vw; text-align: left; } } .voice__head .supplement::before { content: "※"; } .voice__list { display: grid; grid-template-columns: repeat(3, 1fr); -moz-column-gap: 30px; column-gap: 30px; margin-top: 48px; } @media screen and (width > 749px) and (width <= 960px) { .voice__list { grid-template-columns: repeat(2, 1fr); } } @media screen and (width <= 749px) { .voice__list { grid-template-columns: 1fr; -moz-column-gap: 0; column-gap: 0; row-gap: 2.6666666667vw; margin-top: 6.6666666667vw; margin-inline: auto; max-width: 84vw; } } @media screen and (width > 749px) and (width <= 960px) { .voice .voiceCard:nth-child(3) { grid-column: span 2; margin-right: 80px; } } .voice .voiceCard:nth-child(2) .voiceCard__balloon { animation-delay: 0.4s; animation-duration: 3s; } .voice .voiceCard:nth-child(3) .voiceCard__balloon { animation-delay: 0.2s; animation-duration: 2.1s; } .voice .voiceCard__balloon { background: url(../img/page/voice_bg_baloon.png) 50% 50% no-repeat; background: -webkit-image-set(url(../img/page/voice_bg_baloon.webp) type("image/webp"), url(../img/page/voice_bg_baloon.png) type("image/png")) 0 0 no-repeat; background: image-set(url(../img/page/voice_bg_baloon.webp) type("image/webp"), url(../img/page/voice_bg_baloon.png) type("image/png")) 0 0 no-repeat; background-size: contain; color: var(--cl-text); display: flex; justify-content: center; align-items: center; flex-direction: column; font-size: calc(16 / var(--root-font-size) * 1rem); font-weight: 700; padding: 14px 10px 0 29px; position: relative; text-align: center; width: 294px; height: 238px; animation: floating 1.2s ease-in-out infinite alternate-reverse; } @media screen and (width > 749px) and (width <= 960px) { .voice .voiceCard__balloon { margin-inline: auto; } } @media screen and (width <= 749px) { .voice .voiceCard__balloon { font-size: 16px; font-size: 4.2666666667vw; padding: 4vw 2.6666666667vw 0 5.3333333333vw; width: 69.6vw; height: 56vw; } } .voice .voiceCard__balloon .text { position: relative; } @media screen and (width <= 749px) { .voice .voiceCard__balloon .text { font-size: 16px; font-size: 4.2666666667vw; letter-spacing: -0.2666666667vw; } } .voice .voiceCard__balloon .text--em { color: var(--cl-graph1); } .voice .voiceCard__balloon .voiceCard__user { margin-top: 20px; } @media screen and (width <= 749px) { .voice .voiceCard__balloon .voiceCard__user { font-size: 14px; font-size: 3.7333333333vw; margin-top: 6.1333333333vw; } } .voice .voiceCard:first-child .voiceCard__user { margin-top: 10px; } @media screen and (width <= 749px) { .voice .voiceCard:first-child .voiceCard__user { margin-top: 4.5333333333vw; } } .voice .voiceCard:nth-child(2n) { margin-top: 43px; } @media screen and (width <= 749px) { .voice .voiceCard:nth-child(2n) { margin-top: 0; margin-left: auto; } } /* --------------------------------------- Tab アニメでわかる資産形成の魅力 -----------------------------------------*/ #movie { background-color: var(--tab-movie); padding-block: 60px 80px; } @media screen and (width <= 749px) { #movie { padding-block: 8vw 10.6666666667vw; } } .youtube { width: 100%; aspect-ratio: 16/9; } .youtube img, .youtube iframe { width: 100%; height: 100%; } .youtube__thumbnail { background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; overflow: hidden; position: relative; } .youtube__thumbnail::before { background-color: #fff; content: ""; display: block; opacity: 0; position: absolute; top: 0; left: 0; transition: var(--transition) opacity; width: 100%; height: 100%; z-index: 1; } .youtube__thumbnail::after { background: url(../img/page/icon_play.svg) 0 0 no-repeat; background-size: contain; content: ""; display: block; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 80px; height: 80px; } @media screen and (width <= 749px) { .youtube__thumbnail::after { width: 13.3333333333vw; height: 13.3333333333vw; } } .youtube__thumbnail img { transition: var(--transition) scale; } .youtube__thumbnail:hover::before { opacity: 0.2; } .youtube__thumbnail:hover img { scale: 1.05; } .tab__movie { display: flex; justify-content: space-between; } @media screen and (width > 749px) and (width <= 960px) { .tab__movie { flex-direction: column; } } @media screen and (width <= 749px) { .tab__movie { display: block; } } .tab__movie-contents { position: relative; width: 68.2291666667%; } @media screen and (width > 749px) and (width <= 960px) { .tab__movie-contents { width: 100%; } } @media screen and (width <= 749px) { .tab__movie-contents { width: 100%; } } .tab__movie-contents > li { display: none; } .tab__movie-title { background-color: #F3D261; border-radius: 28px; font-weight: 700; font-size: calc(20 / var(--root-font-size) * 1rem); margin-bottom: 21px; padding: 13px 30px; } @media screen and (width <= 749px) { .tab__movie-title { border-radius: 3.7333333333vw; font-size: 16px; font-size: 4.2666666667vw; margin-bottom: 2.6666666667vw; padding: 2.6666666667vw; } } .movie__nav { font-size: calc(14 / var(--root-font-size) * 1rem); width: 30.2083333333%; } @media screen and (width > 749px) and (width <= 960px) { .movie__nav { font-size: calc(16 / var(--root-font-size) * 1rem); margin-top: 30px; width: 100%; } } @media screen and (width <= 749px) { .movie__nav { font-size: 14px; font-size: 3.7333333333vw; margin-top: 8vw; width: 100%; } } .movie__nav-title { display: flex; align-items: center; } @media screen and (width <= 749px) { .movie__nav-title { margin-bottom: 2.6666666667vw; } } .movie__nav-title::before { background: url(../img/page/icon_movie.svg) 0 0 no-repeat; background-size: contain; content: ""; display: block; margin-right: 4px; width: 24px; height: 15px; } @media screen and (width <= 749px) { .movie__nav-title::before { margin-right: 1.0666666667vw; width: 4vw; height: 2.6666666667vw; } } .movie__nav-inner { background-color: #f9c26b; border-radius: 10px; overflow: hidden; height: 425px; overflow-y: scroll; -webkit-overflow-scrolling: touch; scrollbar-color: var(--tab-movie) #fbd18e; scrollbar-width: thin; } @media screen and (width <= 749px) { .movie__nav-inner { border-radius: 2.6666666667vw; height: 118.6666666667vw; } } .movie__nav-button { background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: flex; justify-content: space-between; padding: 8px 10px; transition: var(--transition); width: 100%; } @media screen and (width <= 749px) { .movie__nav-button { border-radius: 2.6666666667vw; padding: 2.6666666667vw; } } .movie__nav-thumbnail { width: 110px; } @media screen and (width <= 749px) { .movie__nav-thumbnail { width: 36.5079365079%; } } .movie__nav-thumbnail img { transition: var(--transition); } .movie__nav-text { width: calc(100% - 119px); } @media screen and (width <= 749px) { .movie__nav-text { width: 58.7301587302%; } } .movie__nav .movie__nav-button:hover, .movie__nav .-on .movie__nav-button { background-color: #fbd18e; color: #8c5d13; } .movie__nav .movie__nav-button:hover img, .movie__nav .-on .movie__nav-button img { opacity: 0.6; } .movie__nav .-on .movie__nav-button { cursor: default; } .movie__annotation { font-size: calc(14 / var(--root-font-size) * 1rem); line-height: 1.5; margin-top: 40px; } @media screen and (width <= 749px) { .movie__annotation { font-size: 14px; font-size: 3.7333333333vw; margin-top: 8vw; } } /* --------------------------------------- Tab 知っておきたい！資産形成のポイント -----------------------------------------*/ .pointBox { padding-top: 72px; } @media screen and (width <= 749px) { .pointBox { padding-top: 10.2666666667vw; } } .pointBox__header { margin-bottom: 50px; text-align: center; } @media screen and (width <= 749px) { .pointBox__header { margin-bottom: 8vw; } } .pointBox__header-title { display: flex; align-items: center; justify-content: center; margin-top: 8px; } @media screen and (width <= 749px) { .pointBox__header-title { margin-top: 2.1333333333vw; } } .pointBox__header-icon { border: 1px solid var(--cl-text); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; font-family: var(--font-en); line-height: 1; margin-right: 10px; width: 60px; height: 60px; } @media screen and (width <= 749px) { .pointBox__header-icon { margin-right: 2.6666666667vw; width: 12vw; height: 12vw; } } .pointBox__header-icon-text { font-size: calc(12 / var(--root-font-size) * 1rem); font-weight: 900; margin-top: 4px; } @media screen and (width <= 749px) { .pointBox__header-icon-text { font-size: 10px; font-size: 2.6666666667vw; margin-top: 0.2666666667vw; } } .pointBox__header-icon-num { font-size: calc(24 / var(--root-font-size) * 1rem); font-weight: 700; } @media screen and (width <= 749px) { .pointBox__header-icon-num { font-size: 16px; font-size: 4.2666666667vw; } } .pointBox__read { font-size: calc(18 / var(--root-font-size) * 1rem); font-weight: 700; line-height: 2.2222222222; position: relative; text-align: center; } @media screen and (width <= 749px) { .pointBox__read { font-size: 16px; font-size: 4.2666666667vw; line-height: 1.625; } } .pointBox__read::before, .pointBox__read::after { content: ""; display: block; position: absolute; animation: floating_icon 1.2s ease-in-out infinite alternate-reverse; } .pointBox__read p + p { margin-top: 40px; } @media screen and (width <= 749px) { .pointBox__read p + p { margin-top: 8vw; } } .pointBox__read strong { padding: 2px; } @media screen and (width <= 749px) { .pointBox__read strong { padding: 0 0.5333333333vw; } } .pointBox__read--large { font-size: calc(22 / var(--root-font-size) * 1rem); } @media screen and (width <= 749px) { .pointBox__read--large { font-size: 18px; font-size: 4.8vw; } } .pointBox__movie { display: flex; justify-content: center; margin-top: 64px; position: relative; z-index: 1; } @media screen and (width <= 749px) { .pointBox__movie { flex-wrap: wrap; align-items: flex-end; margin-top: 13.3333333333vw; } } .pointBox__movie-title { display: flex; justify-content: center; align-items: flex-end; text-align: center; line-height: 1.4; margin-bottom: 20px; } @media screen and (width <= 749px) { .pointBox__movie-title { margin-bottom: 4.9333333333vw; } } .pointBox__movie-title::before, .pointBox__movie-title::after { background-color: var(--cl-text); content: ""; display: block; margin-inline: 10px; width: 2px; height: 27px; } @media screen and (width <= 749px) { .pointBox__movie-title::before, .pointBox__movie-title::after { margin-inline: 2.1333333333vw; width: 0.8vw; height: 9.0666666667vw; } } .pointBox__movie-title::before { rotate: -30deg; } .pointBox__movie-title::after { rotate: 30deg; } .pointBox__img { margin-top: 50px; position: relative; z-index: 1; } @media screen and (width <= 749px) { .pointBox__img { margin-top: 10.1333333333vw; } } .pointBox__info { font-size: calc(12 / var(--root-font-size) * 1rem); margin-top: 40px; } @media screen and (width <= 749px) { .pointBox__info { margin-top: 11.7333333333vw; } } .pointAbout { background-color: var(--cl-graph1); margin-top: 7.5694444444vw; padding-bottom: 125px; position: relative; } @media screen and (width <= 749px) { .pointAbout { margin-top: 10.9333333333vw; padding-bottom: 35.6vw; } } .pointAbout::before, .pointAbout::after { border-radius: 48%; content: ""; display: block; position: absolute; top: -13.3333333333vw; left: 50%; translate: -50% 0; width: 104.2361111111vw; height: 26.6666666667vw; } @media screen and (width <= 749px) { .pointAbout::before, .pointAbout::after { top: -19.3333333333vw; width: 200.1333333333vw; height: 51.2vw; } } .pointAbout::before { background-color: var(--cl-text); top: calc(-13.3333333333vw - 2px); } @media screen and (width <= 749px) { .pointAbout::before { top: -19.8666666667vw; } } .pointAbout__inner { background: var(--tab-graph); border: 1px solid var(--cl-text); border-radius: 40px; line-height: 1.6875; max-width: 840px; margin-inline: auto; padding: 60px 70px 45px; position: relative; text-align: center; z-index: 1; } @media screen and (width <= 749px) { .pointAbout__inner { border-radius: 5.3333333333vw; padding: 12vw 4vw 12.2666666667vw; } } .pointAbout__header { position: absolute; top: -30px; left: 50%; translate: -50% 0; } @media screen and (width <= 749px) { .pointAbout__header { top: -5.0666666667vw; } } @media screen and (width <= 749px) { .pointAbout__header-title { width: 78.6666666667vw; } } .pointAbout__subtitle { border-top: 1px solid var(--cl-text); border-bottom: 1px solid var(--cl-text); font-size: calc(20 / var(--root-font-size) * 1rem); font-weight: 700; margin-block: 50px 30px; padding-block: 10px; } @media screen and (width <= 749px) { .pointAbout__subtitle { font-size: 20px; font-size: 5.3333333333vw; line-height: 1.5; margin-block: 4vw 5.3333333333vw; padding-block: 4vw; } } .pointAbout__info { font-size: calc(12 / var(--root-font-size) * 1rem); margin-bottom: 35px; text-align: right; } @media screen and (width <= 749px) { .pointAbout__info { margin-bottom: 7.7333333333vw; text-align: left; } } .pointAbout__button { display: flex; justify-content: center; position: relative; } .pointAbout__charactor { position: absolute; } .pointBox--point01 { background-color: var(--tab-point); } .pointBox--point01 .js-acc-morebtn-outer { background: linear-gradient(0deg, var(--tab-point) 0%, var(--tab-point) 50%, rgba(255, 255, 255, 0) 100%); } .pointBox--point01 .pointBox__read--large { transition: opacity 1s ease-in-out 2.1s; opacity: 0; } .pointBox--point01 .js-acc-content.is-open .pointBox__read--large { opacity: 1; } @media screen and (width <= 749px) { .pointBox--point01 .pointBox__header-balloon img { width: 61.0666666667vw; } .pointBox--point01 .pointBox__header-title img { width: 54.1333333333vw; } } .pointBox--point01 .pointBox__header-icon { background: var(--cl-graph1); } .pointBox--point01 .pointBox__read::before { background: url(../img/page/point01_bg_01.svg) 0 0 no-repeat; background-size: contain; top: 147px; left: calc(50% - 412px); width: 96px; height: 110px; } @media screen and (width <= 749px) { .pointBox--point01 .pointBox__read::before { top: 90.6666666667vw; left: -2.6666666667vw; width: 16vw; height: 18.2666666667vw; } } .pointBox--point01 .pointBox__read::after { background: url(../img/page/point01_bg_02.svg) 0 0 no-repeat; background-size: contain; top: -10px; right: calc(50% - 398px); width: 108px; height: 155px; } @media screen and (width <= 749px) { .pointBox--point01 .pointBox__read::after { top: 25.3333333333vw; right: -4vw; width: 17.6vw; height: 25.4666666667vw; } } .pointBox--point01 .pointBox__read strong { background-image: linear-gradient(90deg, var(--cl-graph1) 50%, rgba(255, 255, 255, 0) 50%); background-position: 0 0; background-repeat: no-repeat; } @media screen and (width <= 749px) { .pointBox--point01 .pointBox__movie-inner { margin-bottom: 6vw; } } .pointBox--point01 .pointBox__movie-img1 { margin-top: -45px; } @media screen and (width <= 749px) { .pointBox--point01 .pointBox__movie-img1 { order: 1; margin-top: 0; margin-inline: -5.3333333333vw 10.6666666667vw; width: 31.2vw; } } @media screen and (width <= 749px) { .pointBox--point01 .pointBox__movie-img2 { order: 2; width: 27.4666666667vw; } } .pointBox--point01 .pointAbout { background-color: var(--cl-graph1); } .pointBox--point01 .pointAbout::after { background-color: var(--cl-graph1); } .pointBox--point01 .pointAbout__inner { background: var(--tab-graph) url(../img/page/point01_bg_about_pc.png) 50% 50% no-repeat; background: var(--tab-graph) -webkit-image-set(url(../img/page/point01_bg_about_pc.webp) type("image/webp"), url(../img/page/point01_bg_about_pc.png) type("image/png")) 0 0 no-repeat; background: var(--tab-graph) image-set(url(../img/page/point01_bg_about_pc.webp) type("image/webp"), url(../img/page/point01_bg_about_pc.png) type("image/png")) 0 0 no-repeat; background-size: cover; } .pointBox--point01 .pointAbout__img { margin-block: 30px; } @media screen and (width <= 749px) { .pointBox--point01 .pointAbout__img { margin: 4vw auto 8vw; width: 55.4666666667vw; } } .pointBox--point01 .pointAbout__charactor { bottom: -52px; left: -146px; } @media screen and (width > 749px) and (width <= 960px) { .pointBox--point01 .pointAbout__charactor { bottom: -5.4166666667vw; left: -1.0416666667vw; width: 16.6666666667vw; } } @media screen and (width <= 749px) { .pointBox--point01 .pointAbout__charactor { bottom: -25.2vw; left: -2.1333333333vw; width: 58.6666666667vw; } } .pointBox--point02 { background-color: #f3d261; } .pointBox--point02 .js-acc-morebtn-outer { background: linear-gradient(0deg, #f3d261 0%, #f3d261 50%, rgba(255, 255, 255, 0) 100%); } @media screen and (width <= 749px) { .pointBox--point02 .pointBox__header-balloon img { width: 52.4vw; } .pointBox--point02 .pointBox__header-title img { width: 61.7333333333vw; } } .pointBox--point02 .pointBox__header-icon { background: var(--tab-point); } .pointBox--point02 .pointBox__read::before { background: url(../img/page/point02_bg_01.svg) 0 0 no-repeat; background-size: contain; top: 225px; left: calc(50% - 405px); width: 69px; height: 65px; } @media screen and (width <= 749px) { .pointBox--point02 .pointBox__read::before { top: 66.6666666667vw; left: 0; width: 10.9333333333vw; height: 10.4vw; } } .pointBox--point02 .pointBox__read::after { background: url(../img/page/point02_bg_02.svg) 0 0 no-repeat; background-size: contain; top: 8px; right: calc(50% - 398px); width: 89px; height: 102px; } @media screen and (width <= 749px) { .pointBox--point02 .pointBox__read::after { top: -0.4vw; right: -0.6666666667vw; width: 13.4666666667vw; height: 15.4666666667vw; } } .pointBox--point02 .pointBox__read strong { background-image: linear-gradient(90deg, var(--tab-point) 50%, rgba(255, 255, 255, 0) 50%); background-position: 0 0; background-repeat: no-repeat; } .pointBox--point02 .pointBox__movie-img1 { margin-top: -45px; } .pointBox--point02 .pointAbout { background-color: var(--tab-point); } @media screen and (width <= 749px) { .pointBox--point02 .pointAbout { padding-bottom: 42vw; } } .pointBox--point02 .pointAbout::after { background-color: var(--tab-point); } .pointBox--point02 .pointAbout__inner { background: var(--cl-graph7) url(../img/page/point02_bg_about_pc.png) 50% 50% no-repeat; background: var(--cl-graph7) -webkit-image-set(url(../img/page/point02_bg_about_pc.webp) type("image/webp"), url(../img/page/point02_bg_about_pc.png) type("image/png")) 50% 50% no-repeat; background: var(--cl-graph7) image-set(url(../img/page/point02_bg_about_pc.webp) type("image/webp"), url(../img/page/point02_bg_about_pc.png) type("image/png")) 50% 50% no-repeat; background-size: cover; } .pointBox--point02 .pointAbout__img { margin-left: 9px; margin-bottom: 10px; text-align: right; } @media screen and (width <= 749px) { .pointBox--point02 .pointAbout__img { margin-left: 0.8vw; margin-bottom: 2.6666666667vw; } } .pointBox--point02 .pointAbout__info { margin-inline: 7.1633237822% 13.7535816619%; } @media screen and (width > 749px) and (width <= 960px) { .pointBox--point02 .pointAbout__info { font-size: 12px; font-size: 1.25vw; } } @media screen and (width <= 749px) { .pointBox--point02 .pointAbout__info { margin-inline: 0; } } .pointBox--point02 .pointAbout__charactor { bottom: 73px; left: -88px; } @media screen and (width > 749px) and (width <= 960px) { .pointBox--point02 .pointAbout__charactor { bottom: -7.6041666667vw; left: -1.0416666667vw; width: 16.9791666667vw; } } @media screen and (width <= 749px) { .pointBox--point02 .pointAbout__charactor { bottom: -31.0666666667vw; left: -4.6666666667vw; width: 55.7333333333vw; } } .pointBox--point03 { background-color: var(--tab-graph); } .pointBox--point03 .js-acc-morebtn-outer { background: linear-gradient(0deg, var(--tab-graph) 0%, var(--tab-graph) 50%, rgba(255, 255, 255, 0) 100%); } @media screen and (width <= 749px) { .pointBox--point03 .pointBox__header-balloon img { width: 56.2666666667vw; } .pointBox--point03 .pointBox__header-title img { width: 63.0666666667vw; } } .pointBox--point03 .pointBox__header-icon { background: var(--cl-graph7); } .pointBox--point03 .pointBox__read::before { background: url(../img/page/point03_bg_01.svg) 0 0 no-repeat; background-size: contain; top: 24px; left: calc(50% - 382px); width: 123px; height: 84px; } .pointBox--point03 .pointBox__read::after { background: url(../img/page/point03_bg_02.svg) 0 0 no-repeat; background-size: contain; top: 94px; right: calc(50% - 400px); width: 84px; height: 149px; } .pointBox--point03 .pointBox__read strong { background-image: linear-gradient(90deg, var(--cl-graph7) 50%, rgba(255, 255, 255, 0) 50%); background-position: 0 0; background-repeat: no-repeat; } .pointBox--point03 .pointBox__pointlist { display: flex; align-items: start; justify-content: center; margin-top: 40px; } @media screen and (width <= 749px) { .pointBox--point03 .pointBox__pointlist { flex-wrap: wrap; -moz-column-gap: 3.2vw; column-gap: 3.2vw; } } .pointBox--point03 .pointBox__pointlist-list { background-color: var(--tab-point); border: 1px solid var(--cl-text); border-radius: 50%; margin-inline: 9px; padding: 10px; position: relative; animation: floating 1.8s ease-in-out infinite alternate-reverse; } .pointBox--point03 .pointBox__pointlist-list:nth-child(2) { animation-delay: 0.4s; animation-duration: 3s; } .pointBox--point03 .pointBox__pointlist-list:nth-child(3) { animation-delay: 0.2s; animation-duration: 2.1s; } @media screen and (width <= 749px) { .pointBox--point03 .pointBox__pointlist-list { margin-inline: 0; padding: 1.6vw; } } .pointBox--point03 .pointBox__pointlist-list:nth-child(2n) { margin-top: 28px; } @media screen and (width <= 749px) { .pointBox--point03 .pointBox__pointlist-list:nth-child(2n) { margin-top: 0; } } .pointBox--point03 .pointBox__pointlist-list-inner { background-color: #f3d261; border: 1px solid var(--cl-text); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 20px; width: 200px; height: 200px; } @media screen and (width <= 749px) { .pointBox--point03 .pointBox__pointlist-list-inner { padding-top: 0; width: 38.6666666667vw; height: 38.6666666667vw; } } .pointBox--point03 .pointBox__pointlist-icon { position: absolute; left: 50%; translate: -50% 0; } .pointBox--point03 .pointBox__pointlist-strong { display: block; text-align: center; margin-bottom: 10px; } @media screen and (width <= 749px) { .pointBox--point03 .pointBox__pointlist-strong { margin-bottom: 2.6666666667vw; } } .pointBox--point03 .pointBox__pointlist-text { font-size: calc(16 / var(--root-font-size) * 1rem); font-weight: 700; line-height: 1.3125; } @media screen and (width <= 749px) { .pointBox--point03 .pointBox__pointlist-text { font-size: 14px; font-size: 3.7333333333vw; } } .pointBox--point03 .pointBox__pointlist .pointBox__pointlist-list--history .pointBox__pointlist-icon { top: -18px; } @media screen and (width <= 749px) { .pointBox--point03 .pointBox__pointlist .pointBox__pointlist-list--history .pointBox__pointlist-icon { top: -4.8vw; width: 18.4vw; } } @media screen and (width <= 749px) { .pointBox--point03 .pointBox__pointlist .pointBox__pointlist-list--history .pointBox__pointlist-strong img { width: 24.4vw; } } .pointBox--point03 .pointBox__pointlist .pointBox__pointlist-list--achievement .pointBox__pointlist-icon { top: -11px; } @media screen and (width <= 749px) { .pointBox--point03 .pointBox__pointlist .pointBox__pointlist-list--achievement .pointBox__pointlist-icon { top: -6.1333333333vw; width: 22vw; } } @media screen and (width <= 749px) { .pointBox--point03 .pointBox__pointlist .pointBox__pointlist-list--achievement .pointBox__pointlist-strong img { width: 31.6vw; } } .pointBox--point03 .pointBox__pointlist .pointBox__pointlist-list--professional .pointBox__pointlist-list-inner { padding-top: 27px; } @media screen and (width <= 749px) { .pointBox--point03 .pointBox__pointlist .pointBox__pointlist-list--professional .pointBox__pointlist-list-inner { justify-content: flex-start; padding-top: 9.8666666667vw; } } .pointBox--point03 .pointBox__pointlist .pointBox__pointlist-list--professional .pointBox__pointlist-icon { top: -31px; } @media screen and (width <= 749px) { .pointBox--point03 .pointBox__pointlist .pointBox__pointlist-list--professional .pointBox__pointlist-icon { top: -7.3333333333vw; width: 14.1333333333vw; } } @media screen and (width <= 749px) { .pointBox--point03 .pointBox__pointlist .pointBox__pointlist-list--professional .pointBox__pointlist-text { letter-spacing: -0.2666666667vw; } .pointBox--point03 .pointBox__pointlist .pointBox__pointlist-list--professional .pointBox__pointlist-strong { margin-bottom: 2.1333333333vw; } .pointBox--point03 .pointBox__pointlist .pointBox__pointlist-list--professional .pointBox__pointlist-strong img { width: 29.6vw; } } @media screen and (width <= 749px) { .pointBox--point03 .pointBox__info { font-size: 14px; font-size: 3.7333333333vw; font-weight: 500; text-align: left; } } .pointBox--point03 .pointBox__movie { display: block; margin-bottom: 240px; } @media screen and (width <= 749px) { .pointBox--point03 .pointBox__movie { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; -moz-column-gap: 8.2666666667vw; column-gap: 8.2666666667vw; margin-top: 19.3333333333vw; margin-bottom: 10.6666666667vw; } .pointBox--point03 .pointBox__movie .button__external-outer { margin-block: 0 4.6666666667vw; } } .pointBox--point03 .pointBox__movie-img1 { position: absolute; top: -51px; left: calc(50% - 473px); } @media screen and (width > 749px) and (width <= 960px) { .pointBox--point03 .pointBox__movie-img1 { top: -5.3125vw; left: -3.125vw; width: 26.1458333333vw; } } @media screen and (width <= 749px) { .pointBox--point03 .pointBox__movie-img1 { order: 1; position: static; width: 34.4vw; } } .pointBox--point03 .pointBox__movie-img2 { position: absolute; top: -26px; right: calc(50% - 388px); } @media screen and (width > 749px) and (width <= 960px) { .pointBox--point03 .pointBox__movie-img2 { top: -2.7083333333vw; right: 2.0833333333vw; width: 14.7916666667vw; } } @media screen and (width <= 749px) { .pointBox--point03 .pointBox__movie-img2 { order: 2; margin-right: 12.8vw; position: static; width: 21.3333333333vw; } } .pointBox--point03 .pointAbout { background-color: var(--cl-graph7); } @media screen and (width <= 749px) { .pointBox--point03 .pointAbout { padding-bottom: 42.8vw; } } .pointBox--point03 .pointAbout::after { background-color: var(--cl-graph7); } .pointBox--point03 .pointAbout__inner { background: var(--tab-point) url(../img/page/point03_bg_about_pc.png) 50% 50% no-repeat; background: var(--tab-point) -webkit-image-set(url(../img/page/point03_bg_about_pc.webp) type("image/webp"), url(../img/page/point03_bg_about_pc.png) type("image/png")) 50% 50% no-repeat; background: var(--tab-point) image-set(url(../img/page/point03_bg_about_pc.webp) type("image/webp"), url(../img/page/point03_bg_about_pc.png) type("image/png")) 50% 50% no-repeat; background-size: cover; } @media screen and (width <= 749px) { .pointBox--point03 .pointAbout__inner { background: var(--tab-point) url(../img/page/point03_bg_about_sp.png) 50% 50% no-repeat; background: var(--tab-point) -webkit-image-set(url(../img/page/point03_bg_about_sp.webp) type("image/webp"), url(../img/page/point03_bg_about_sp.png) type("image/png")) 50% 50% no-repeat; background: var(--tab-point) image-set(url(../img/page/point03_bg_about_sp.webp) type("image/webp"), url(../img/page/point03_bg_about_sp.png) type("image/png")) 50% 50% no-repeat; background-size: cover; } } .pointBox--point03 .pointAbout__inner strong { font-size: calc(24 / var(--root-font-size) * 1rem); } @media screen and (width <= 749px) { .pointBox--point03 .pointAbout__inner strong { font-size: 16px; font-size: 4.2666666667vw; } } .pointBox--point03 .pointAbout__img { margin-block: 30px; } @media screen and (width <= 749px) { .pointBox--point03 .pointAbout__img { margin-block: 5.3333333333vw 8vw; } } .pointBox--point03 .pointAbout__info { max-width: 590px; margin-inline: auto; margin-bottom: 78px; text-align: left; } @media screen and (width <= 749px) { .pointBox--point03 .pointAbout__info { margin-bottom: 16.6666666667vw; } } .pointBox--point03 .pointAbout__charactor { bottom: -43px; right: -88px; } @media screen and (width > 749px) and (width <= 960px) { .pointBox--point03 .pointAbout__charactor { bottom: -4.4791666667vw; right: -3.125vw; width: 22.2916666667vw; } } @media screen and (width <= 749px) { .pointBox--point03 .pointAbout__charactor { bottom: -33.8666666667vw; right: -2.6666666667vw; width: 59.4666666667vw; } } .pointBox__read strong { transition: 1s; background-size: 0 2em; } .js-acc-content.is-open .pointBox__read strong { background-size: 200% 2em; } .main { font-family: var(--font-zenmaru); font-weight: 500; } @media screen and (width <= 749px) { .main img { width: 100%; } } .tab__contents { overflow: hidden; } .more { background: url(../img/page/more_bg.png) 50% 50% no-repeat; background: -webkit-image-set(url(../img/page/more_bg.webp) type("image/webp"), url(../img/page/more_bg.png) type("image/png")) 50% 50% no-repeat; background: image-set(url(../img/page/more_bg.webp) type("image/webp"), url(../img/page/more_bg.png) type("image/png")) 50% 50% no-repeat; background-size: cover; padding-block: 60px 70px; text-align: center; } @media screen and (width <= 749px) { .more { padding-block: 10.6666666667vw 8.9333333333vw; } } .more__outer { border: 1px solid var(--cl-text); border-radius: 40px; background-color: #F3D261; box-shadow: 8px 10px 0 0 rgba(53, 60, 69, 0.9); max-width: 840px; padding-block: 38px 48px; position: relative; } @media screen and (width <= 749px) { .more__outer { border-radius: 5.3333333333vw; box-shadow: 1.0666666667vw 1.3333333333vw 0 0 rgba(53, 60, 69, 0.9); padding: 8vw 3.7333333333vw 9.3333333333vw; } } .more__inner { display: flex; justify-content: center; } @media screen and (width <= 749px) { .more__inner { display: block; text-align: center; } } .more__title-wrap { margin-top: 19px; margin-inline: 5.7279236277% 4.5346062053%; } @media screen and (width <= 749px) { .more__title-wrap { margin-top: 0; margin-inline: 0; } } @media screen and (width <= 749px) { .more__title { margin-inline: auto; width: 62.8vw; } } .more__img-1 { margin-top: 42px; } @media screen and (width <= 749px) { .more__img-1 { margin-top: 0; position: absolute; top: -5.3333333333vw; left: 2.6666666667vw; width: 21.7333333333vw; } } @media screen and (width <= 749px) { .more__img-2 { position: absolute; top: -10.1333333333vw; right: -3.4666666667vw; width: 25.8666666667vw; } } .more__text { margin-top: 20px; text-align: center; } @media screen and (width <= 749px) { .more__text { font-size: 16px; font-size: 4.2666666667vw; margin-top: 4.2666666667vw; margin-left: 4.2666666667vw; } } .note { font-family: var(--font-sans); font-size: calc(12 / var(--root-font-size) * 1rem); font-weight: 400; color: #888; padding-block: 40px; } @media screen and (width <= 749px) { .note { font-size: 14px; font-size: 3.7333333333vw; padding-block: 9.3333333333vw; } } .note__list dt { display: block; } .note__list dt::before { content: "【"; } .note__list dt::after { content: "】"; } .note__list dd { margin-bottom: 1em; } .cta { position: relative; } .cta__bg { width: 100%; transform: translateY(-1px); } .cta__bg svg { width: 100%; } @media screen and (width <= 749px) { .cta__bg--pc { display: none; } } .cta__bg--sp { display: none; } @media screen and (width <= 749px) { .cta__bg--sp { display: block; } } .cta__wrapper { width: calc(100% - 30px); margin-inline: auto; padding-block: 80px; display: grid; justify-content: center; align-items: center; grid-template-areas: "imgLeft text imgRight" "button button button"; grid-template-columns: repeat(3, auto); row-gap: 37px; } @media screen and (width > 749px) and (width <= 960px) { .cta__wrapper { padding-block: 8.3333333333vw; row-gap: 3.8541666667vw; } } @media screen and (width <= 749px) { .cta__wrapper { padding-block: 21.3333333333vw; justify-content: space-between; row-gap: 2.6666666667vw; } } .cta__img img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .cta__img--left { grid-area: imgLeft; width: 120px; } @media screen and (width > 749px) and (width <= 960px) { .cta__img--left { width: 12.5vw; } } @media screen and (width <= 749px) { .cta__img--left { width: 21.3333333333vw; } } .cta__img--right { grid-area: imgRight; width: 109px; } @media screen and (width > 749px) and (width <= 960px) { .cta__img--right { width: 11.3541666667vw; } } @media screen and (width <= 749px) { .cta__img--right { width: 19.4666666667vw; } } .cta__text { grid-area: text; font-size: calc(28 / var(--root-font-size) * 1rem); font-weight: bold; text-align: center; line-height: 1.9; -webkit-text-decoration: underline dashed; text-decoration: underline dashed; text-decoration-color: var(--cl-main); text-underline-offset: 0.5em; } @media screen and (width > 749px) and (width <= 960px) { .cta__text { font-size: 28px; font-size: 2.9166666667vw; } } @media screen and (width <= 749px) { .cta__text { font-size: 16px; font-size: 4.2666666667vw; } } .cta__button { grid-area: button; display: grid; place-items: center; background: var(--cl-cta); background: linear-gradient(-45deg, var(--cl-cta) 50%, #f9e9e6 60%, var(--cl-cta) 70%); background-size: 600% 100%; border-radius: 0.5em; width: 460px; height: 72px; box-shadow: 0 6px 0 #b4432c; margin-inline: auto; font-size: calc(18 / var(--root-font-size) * 1rem); color: var(--cl-white); font-weight: bold; position: relative; animation: shine 20s infinite; animation-delay: 0s; animation-timing-function: linear; } @media screen and (width > 749px) and (width <= 960px) { .cta__button { width: 47.9166666667vw; height: 7.5vw; box-shadow: 0 0.625vw 0 #b4432c; font-size: 18px; font-size: 1.875vw; } } @media screen and (width <= 749px) { .cta__button { width: 81.8666666667vw; height: 12.8vw; box-shadow: 0 1.6vw 0 #b4432c; font-size: 14px; font-size: 3.7333333333vw; } } .cta__button::after { content: "\f144"; font-size: calc(20 / var(--root-font-size) * 1rem); font-weight: 900; position: absolute; right: 16px; } @media screen and (width > 749px) and (width <= 960px) { .cta__button::after { font-size: 20px; font-size: 2.0833333333vw; right: 1.6666666667vw; } } @media screen and (width <= 749px) { .cta__button::after { font-size: 14px; font-size: 3.7333333333vw; right: 4.2666666667vw; } } @media (any-hover: hover) { .cta__button:hover { color: var(--cl-white); transform: translateY(6px); box-shadow: 0 0 0 #b4432c; } } @media screen and (any-hover: hover) and (width > 749px) and (width <= 960px) { .cta__button:hover { transform: translateY(0.625vw); } } /* --------------------------------------- CSS Animation ----------------------------------------*/ [data-effect=line] { transition: 2s; background-size: 0 2em; } [data-effect=line].effect { background-size: 200% 2em; } [data-effect=slideIn] { transition: opacity 0.55s ease-in-out, translate 0.55s ease-in-out; opacity: 0; translate: 0 50px; } [data-effect=slideIn].effect { opacity: 1; translate: 0; } [data-effect=slideIn_after_x]::after { transition: opacity 0.8s ease-in-out 0.55s, translate 0.8s ease-in-out 0.55s; opacity: 0; translate: -50px 0; } [data-effect=slideIn_after_x].effect::after { opacity: 1; translate: 0; } [data-effect=slideIn_y] { transition: opacity 0.4s ease-in-out, translate 0.4s ease-in-out; opacity: 0; translate: 0 10px; } [data-effect=slideIn_y].effect { opacity: 1; translate: 0; } [data-effect=slideIn_before_y]::before { transition: opacity 0.4s ease-in-out, translate 0.4s ease-in-out; opacity: 0; translate: 0 300px; } [data-effect=slideIn_before_y].effect::before { opacity: 1; translate: 0; } [data-effect=shake] { transition-delay: 3s; transform-origin: center center; } [data-effect=shake].effect { animation: shake 2.2s linear 0s infinite; } @keyframes shake { from { rotate: 0deg; } 50% { rotate: 0deg; } 51% { rotate: -40deg; } 99% { rotate: -40deg; } to { rotate: 0deg; } } [data-effect=fadeIn] { transition: opacity 1s ease-in-out 0s; opacity: 0; } [data-effect=fadeIn].effect { opacity: 1; } [data-effect=SP_mvFadeIn_after]::after { transition: opacity 1s ease-in-out 2.7s; opacity: 0; } [data-effect=SP_mvFadeIn_after].effect::after { opacity: 1; } [data-effect=bound] { transition: opacity 1s ease-in-out 0s; opacity: 0; transform: scale(0); } [data-effect=bound].effect { animation: bound 0.3s ease-in; opacity: 1; transform: scale(1); } @keyframes bound { from { transform: scale(0); } 25% { transform: scale(1.2); } 50% { transform: scale(0.8); } 75% { transform: scale(1.1); } to { transform: scale(1); } } @keyframes bound_in { from { transform: scale(0); } 40% { transform: scale(2); } 70% { transform: scale(0.8); } 90% { transform: scale(1.1); } to { transform: scale(1); } } @keyframes bound_in_s { from { transform: scale(0); } 40% { transform: scale(1.4); } 70% { transform: scale(0.8); } 90% { transform: scale(1.1); } to { transform: scale(1); } } [data-effect=mvSvgText].effect > * { animation: mvSvgText 0.5s ease-in; } [data-effect=mvSvgText].effect > *:nth-child(1) { animation-delay: 0s; } [data-effect=mvSvgText].effect > *:nth-child(2) { animation-delay: 0.05s; } [data-effect=mvSvgText].effect > *:nth-child(3) { animation-delay: 0.1s; } [data-effect=mvSvgText].effect > *:nth-child(4) { animation-delay: 0.15s; } [data-effect=mvSvgText].effect > *:nth-child(5) { animation-delay: 0.2s; } [data-effect=mvSvgText].effect > *:nth-child(6) { animation-delay: 0.25s; } [data-effect=mvSvgText].effect > *:nth-child(7) { animation-delay: 0.3s; } [data-effect=mvSvgText].effect > *:nth-child(8) { animation-delay: 0.35s; } [data-effect=mvSvgText].effect > *:nth-child(9) { animation-delay: 0.4s; } [data-effect=mvSvgText].effect > *:nth-child(10) { animation-delay: 0.45s; } [data-effect=mvSvgText].effect > *:nth-child(11) { animation-delay: 0.5s; } [data-effect=mvSvgText].effect > *:nth-child(12) { animation-delay: 0.55s; } [data-effect=mvSvgText].effect > *:nth-child(13) { animation-delay: 0.6s; } [data-effect=mvSvgText].effect > *:nth-child(14) { animation-delay: 0.65s; } [data-effect=mvSvgText].effect > *:nth-child(15) { animation-delay: 0.7s; } @keyframes mvSvgText { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } [data-effect=mvBound].effect { animation: mvBound 0.7s ease-in 1.25s; } [data-effect=mvBound2] { opacity: 0; transition: opacity 0.3s ease-in 2s; } [data-effect=mvBound2].effect { animation: mvBound 0.7s ease-in 2s; opacity: 1; } @keyframes mvBound { from { transform: scale(1); } 25% { transform: scale(1.2); } 50% { transform: scale(0.7); } 75% { transform: scale(1.08); } to { transform: scale(1); } } [data-effect=svg_textFadeInUp_2] path { transition: transform 0.55s ease-in-out, opacity 0.55s ease-in-out; opacity: 0; transform: translateY(50px); } [data-effect=svg_textFadeInUp_2].effect path { opacity: 1; transform: translateY(0); } [data-effect=svg_textFadeInUp_2].effect path:nth-child(1) { transition-delay: 1.2s; } [data-effect=svg_textFadeInUp_2].effect path:nth-child(2) { transition-delay: 1.25s; } [data-effect=svg_textFadeInUp_2].effect path:nth-child(3) { transition-delay: 1.3s; } [data-effect=svg_textFadeInUp_2].effect path:nth-child(4) { transition-delay: 1.35s; } [data-effect=svg_textFadeInUp_2].effect path:nth-child(5) { transition-delay: 1.4s; } [data-effect=svg_textFadeInUp_2].effect path:nth-child(6) { transition-delay: 1.45s; } [data-effect=svg_textFadeInUp_2].effect path:nth-child(7) { transition-delay: 1.5s; } [data-effect=svg_textFadeInUp_2].effect path:nth-child(8) { transition-delay: 1.55s; } [data-effect=svg_textFadeInUp_2].effect path:nth-child(9) { transition-delay: 1.6s; } [data-effect=kakukaku] { transform-origin: center center; } [data-effect=kakukaku].effect { animation: kakukaku 2.2s linear 0s infinite; } [data-effect=kakukaku2] { transform-origin: center center; } [data-effect=kakukaku2].effect { animation: kakukaku 2.2s linear 0s infinite reverse; } @keyframes kakukaku { from { rotate: 0deg; } 25% { rotate: 0deg; } 26% { rotate: 20deg; } 50% { rotate: 20deg; } 51% { rotate: 0deg; } 75% { rotate: 0deg; } 76% { rotate: -20deg; } to { rotate: -20deg; } } [data-effect=fuwa], [data-effect=fuwa_after]::after { animation: fuwa 1.8s ease-in-out 0s infinite alternate both; } @keyframes fuwa { from { translate: 0 -5px; } to { translate: 0 5px; } } @keyframes rotate { from { rotate: 0deg; } to { rotate: 360deg; } } @keyframes textRipple { 0% { transform: translateY(0); } 25% { transform: translateY(-10px); } 75% { transform: translateY(10px); } 100% { transform: translateY(0); } } [data-effect=lineAnimation] svg g { stroke-dasharray: 50; stroke-dashoffset: 50; transition: stroke-dashoffset 0.25s linear; } [data-effect=lineAnimation].effect svg g { stroke-dashoffset: 0; } [data-effect=roundPlus] { rotate: -125deg; opacity: 0; transition: rotate 0.25s linear 1.5s, opacity 0.25s linear 1.5s; } [data-effect=roundPlus].effect { opacity: 1; rotate: 0deg; } [data-effect=bound] { transition: opacity 1s ease-in-out 0s; opacity: 0; transform: scale(0); } [data-effect=bound].effect { animation: bound 0.8s ease-in; opacity: 1; transform: scale(1); } [data-effect=bound].effect.-mvlogo { animation-delay: 2.05s; } @keyframes bound { from { transform: scale(0); } 25% { transform: scale(1.5); } 50% { transform: scale(0.7); } 75% { transform: scale(1.2); } to { transform: scale(1); } } [data-effect=boundMoisture] { opacity: 0; transition: opacity 0.25s linear 1.8s; } [data-effect=boundMoisture].effect { opacity: 1; animation: boundMoisture 0.8s ease-in 1.8s; } @keyframes boundMoisture { from { transform: scale(0); } 25% { transform: scale(1.1); } 50% { transform: scale(0.9); } 75% { transform: scale(1.05); } to { transform: scale(1); } } @keyframes floating { 0% { transform: translateY(-2%); } 100% { transform: translateY(2%); } } @keyframes floating_icon { 0% { transform: translateY(-10%); } 100% { transform: translateY(10%); } } @keyframes flash { 0% { opacity: 1; } 10% { opacity: 0; } 20% { opacity: 1; } 30% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 1; } } [data-effect=graph] { transition: translate 2s ease-in-out; translate: 0 60%; } [data-effect=graph].effect { translate: 0; } .logo .logo__balloon { opacity: 0; transform-origin: bottom center; } .logo.effect .logo__balloon { opacity: 1; animation: dropAndSquish 0.8s ease-in-out forwards; } .logo .logo__main-1 { opacity: 0; transition: 0.3s opacity ease-in 0.8s; transform-origin: 10% 100%; } .logo.effect .logo__main-1 { opacity: 1; animation: popUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.8s; } .logo .logo__main-2 { opacity: 0; transition: 0.3s opacity ease-in 1.1s; transform-origin: bottom center; } .logo.effect .logo__main-2 { opacity: 1; animation: popUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 1.1s; } .logo .logo__main-3 { opacity: 0; transition: 0.3s opacity ease-in 1.4s; transform-origin: 60% 100%; } .logo.effect .logo__main-3 { opacity: 1; animation: popUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 1.4s; } .logo .logo__sponsored { opacity: 0; transition: 1s opacity ease-in 1.7s; } .logo.effect .logo__sponsored { opacity: 1; } @keyframes dropAndSquish { 0% { transform: translateY(-100vh) scaleY(1); } 60% { transform: translateY(0) scaleY(0.7) scaleX(1.3); } 70% { transform: translateY(-20px) scaleY(1.1) scaleX(0.9); } 90% { transform: translateY(0) scaleY(0.95) scaleX(1.05); } 100% { transform: translateY(0) scaleY(1) scaleX(1); } } @keyframes popUp { 0% { transform: translateY(100%) scaleY(0.3); } 40% { transform: translateY(-15px) scaleY(1.1) scaleX(0.9); } 70% { transform: translateY(7px) scaleY(0.95) scaleX(1.05); } 100% { transform: translateY(0) scaleY(1) scaleX(1); } } /* --------------------------------------- JS_accordion ----------------------------------------*/ .accordion-container { position: relative; } .js-acc-content { height: 492px; overflow: hidden; position: relative; } @media screen and (width <= 749px) { .js-acc-content { height: 100.5333333333vw; } } .js-acc-morebtn { background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: flex; align-items: center; position: relative; text-align: center; height: 36px; transition: var(--transition); } @media screen and (width <= 749px) { .js-acc-morebtn { height: 10.6666666667vw; } } @media (any-hover: hover) { .js-acc-morebtn:hover { scale: 1.1; } } .js-acc-morebtn::before { background-color: var(--cl-white); border: 1px solid var(--cl-text); border-radius: 50%; content: ""; display: block; position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 36px; height: 36px; } @media screen and (width <= 749px) { .js-acc-morebtn::before { width: 8vw; height: 8vw; } } .js-acc-morebtn span { display: block; padding: 10px 53px 10px 10px; position: relative; } @media screen and (width <= 749px) { .js-acc-morebtn span { padding: 2.6666666667vw 10.1333333333vw 2.6666666667vw 2.6666666667vw; } } .js-acc-morebtn span::before, .js-acc-morebtn span::after { background-color: var(--cl-text); content: ""; display: block; position: absolute; right: 8px; top: 50%; translate: 0 -50%; width: 20px; height: 2px; } @media screen and (width <= 749px) { .js-acc-morebtn span::before, .js-acc-morebtn span::after { right: 1.92vw; width: 4vw; height: 0.5333333333vw; } } .js-acc-morebtn span::after { transition: var(--transition); rotate: -90deg; } .js-acc-morebtn-outer { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 40px; position: absolute; bottom: 0; height: 167px; background: linear-gradient(0deg, var(--cl-white) 0%, var(--cl-white) 50%, rgba(255, 255, 255, 0) 100%); width: 100%; transition: var(--transition); z-index: 1; } @media screen and (width <= 749px) { .js-acc-morebtn-outer { height: 42.6666666667vw; } } .is-open { background: none !important; } .is-open .js-acc-morebtn span::after { rotate: 0deg; } /* --------------------------------------- JS_navi floating ----------------------------------------*/ .nav { height: 90px; } @media screen and (width <= 749px) { .nav { height: 16vw; } } .js-nav-floating { transform-origin: 50% 0; height: 90px; } @media screen and (width <= 749px) { .js-nav-floating { height: 16vw; } } .js-nav-floating.-fixed { display: flex; align-items: center; position: fixed; top: 0; left: 50%; translate: -50% 0; width: 100%; z-index: 999; } @media screen and (width <= 749px) { .js-nav-floating.-fixed { padding-inline: 1.0666666667vw; } } .js-nav-floating.-fixed .nav__btn { font-size: calc(16 / var(--root-font-size) * 1rem); height: 60px; transition: 0.3s font-size, 0.3s height; } @media screen and (width <= 749px) { .js-nav-floating.-fixed .nav__btn { font-size: 12px; font-size: 3.2vw; height: 12vw; } } .js-nav-floating.-fixed .nav__btn br { display: none; } @media screen and (width > 749px) and (width <= 960px) { .js-nav-floating.-fixed .nav__btn br { display: inline; } } @media screen and (width <= 749px) { .js-nav-floating.-fixed .nav__btn br { display: inline; } } @media screen and (width <= 749px) { .js-nav-floating.-fixed .-on { padding-inline: 1.6vw; } } .js-nav-floating.-fixed .-on .nav__btn { border-radius: 20px; padding-bottom: 0; } @media screen and (width <= 749px) { .js-nav-floating.-fixed .-on .nav__btn { border-radius: 2.6666666667vw; padding: 0; } } .js-nav-floating.-fixed .-on .nav__btn-icon { display: none; } /* --------------------------------------- JS_tab ----------------------------------------*/ .js-tab-contents, .js-tab-movie-contents { display: none; } /* --------------------------------------- Margin -----------------------------------------*/ .u-mt00 { margin-top: 0px !important; } .u-mt01 { margin-top: 1px !important; } .u-mt02 { margin-top: 2px !important; } .u-mt03 { margin-top: 3px !important; } .u-mt04 { margin-top: 4px !important; } .u-mt05 { margin-top: 5px !important; } .u-mt06 { margin-top: 6px !important; } .u-mt07 { margin-top: 7px !important; } .u-mt08 { margin-top: 8px !important; } .u-mt09 { margin-top: 9px !important; } .u-mt10 { margin-top: 10px !important; } .u-mt11 { margin-top: 11px !important; } .u-mt12 { margin-top: 12px !important; } .u-mt13 { margin-top: 13px !important; } .u-mt14 { margin-top: 14px !important; } .u-mt15 { margin-top: 15px !important; } .u-mt16 { margin-top: 16px !important; } .u-mt17 { margin-top: 17px !important; } .u-mt18 { margin-top: 18px !important; } .u-mt19 { margin-top: 19px !important; } .u-mt20 { margin-top: 20px !important; } .u-mt25 { margin-top: 25px !important; } .u-mt30 { margin-top: 30px !important; } .u-mt35 { margin-top: 35px !important; } .u-mt40 { margin-top: 40px !important; } .u-mt45 { margin-top: 45px !important; } .u-mt50 { margin-top: 50px !important; } .u-mt55 { margin-top: 55px !important; } .u-mt60 { margin-top: 60px !important; } .u-mt65 { margin-top: 65px !important; } .u-mt70 { margin-top: 70px !important; } .u-mt75 { margin-top: 75px !important; } .u-mt80 { margin-top: 80px !important; } .u-mt85 { margin-top: 85px !important; } .u-mt90 { margin-top: 90px !important; } .u-mt95 { margin-top: 95px !important; } .u-mt100 { margin-top: 100px !important; } .u-mr00 { margin-right: 0 !important; } .u-mr01 { margin-right: 1px !important; } .u-mr02 { margin-right: 2px !important; } .u-mr03 { margin-right: 3px !important; } .u-mr04 { margin-right: 4px !important; } .u-mr05 { margin-right: 5px !important; } .u-mr06 { margin-right: 6px !important; } .u-mr07 { margin-right: 7px !important; } .u-mr08 { margin-right: 8px !important; } .u-mr09 { margin-right: 9px !important; } .u-mr10 { margin-right: 10px !important; } .u-mr11 { margin-right: 11px !important; } .u-mr12 { margin-right: 12px !important; } .u-mr13 { margin-right: 13px !important; } .u-mr14 { margin-right: 14px !important; } .u-mr15 { margin-right: 15px !important; } .u-mr16 { margin-right: 16px !important; } .u-mr17 { margin-right: 17px !important; } .u-mr18 { margin-right: 18px !important; } .u-mr19 { margin-right: 19px !important; } .u-mr20 { margin-right: 20px !important; } .u-mr25 { margin-right: 25px !important; } .u-mr30 { margin-right: 30px !important; } .u-mr35 { margin-right: 35px !important; } .u-mr40 { margin-right: 40px !important; } .u-mr45 { margin-right: 45px !important; } .u-mr50 { margin-right: 50px !important; } .u-mr55 { margin-right: 55px !important; } .u-mr60 { margin-right: 60px !important; } .u-mr65 { margin-right: 65px !important; } .u-mr70 { margin-right: 70px !important; } .u-mr75 { margin-right: 75px !important; } .u-mr80 { margin-right: 80px !important; } .u-mr85 { margin-right: 85px !important; } .u-mr90 { margin-right: 90px !important; } .u-mr95 { margin-right: 95px !important; } .u-mr100 { margin-right: 100px !important; } .u-mb00 { margin-bottom: 0px !important; } .u-mb01 { margin-bottom: 1px !important; } .u-mb02 { margin-bottom: 2px !important; } .u-mb03 { margin-bottom: 3px !important; } .u-mb04 { margin-bottom: 4px !important; } .u-mb05 { margin-bottom: 5px !important; } .u-mb06 { margin-bottom: 6px !important; } .u-mb07 { margin-bottom: 7px !important; } .u-mb08 { margin-bottom: 8px !important; } .u-mb09 { margin-bottom: 9px !important; } .u-mb10 { margin-bottom: 10px !important; } .u-mb11 { margin-bottom: 11px !important; } .u-mb12 { margin-bottom: 12px !important; } .u-mb13 { margin-bottom: 13px !important; } .u-mb14 { margin-bottom: 14px !important; } .u-mb15 { margin-bottom: 15px !important; } .u-mb16 { margin-bottom: 16px !important; } .u-mb17 { margin-bottom: 17px !important; } .u-mb18 { margin-bottom: 18px !important; } .u-mb19 { margin-bottom: 19px !important; } .u-mb20 { margin-bottom: 20px !important; } .u-mb25 { margin-bottom: 25px !important; } .u-mb30 { margin-bottom: 30px !important; } .u-mb35 { margin-bottom: 35px !important; } .u-mb40 { margin-bottom: 40px !important; } .u-mb45 { margin-bottom: 45px !important; } .u-mb50 { margin-bottom: 50px !important; } .u-mb55 { margin-bottom: 55px !important; } .u-mb60 { margin-bottom: 60px !important; } .u-mb65 { margin-bottom: 65px !important; } .u-mb70 { margin-bottom: 70px !important; } .u-mb75 { margin-bottom: 75px !important; } .u-mb80 { margin-bottom: 80px !important; } .u-mb85 { margin-bottom: 85px !important; } .u-mb90 { margin-bottom: 90px !important; } .u-mb95 { margin-bottom: 95px !important; } .u-mb100 { margin-bottom: 100px !important; } .u-mb150 { margin-bottom: 150px !important; } .u-ml00 { margin-left: 0px !important; } .u-ml01 { margin-left: 1px !important; } .u-ml02 { margin-left: 2px !important; } .u-ml03 { margin-left: 3px !important; } .u-ml04 { margin-left: 4px !important; } .u-ml05 { margin-left: 5px !important; } .u-ml06 { margin-left: 6px !important; } .u-ml07 { margin-left: 7px !important; } .u-ml08 { margin-left: 8px !important; } .u-ml09 { margin-left: 9px !important; } .u-ml10 { margin-left: 10px !important; } .u-ml11 { margin-left: 11px !important; } .u-ml12 { margin-left: 12px !important; } .u-ml13 { margin-left: 13px !important; } .u-ml14 { margin-left: 14px !important; } .u-ml15 { margin-left: 15px !important; } .u-ml16 { margin-left: 16px !important; } .u-ml17 { margin-left: 17px !important; } .u-ml18 { margin-left: 18px !important; } .u-ml19 { margin-left: 19px !important; } .u-ml20 { margin-left: 20px !important; } .u-ml25 { margin-left: 25px !important; } .u-ml30 { margin-left: 30px !important; } .u-ml35 { margin-left: 35px !important; } .u-ml40 { margin-left: 40px !important; } .u-ml45 { margin-left: 45px !important; } .u-ml50 { margin-left: 50px !important; } .u-ml55 { margin-left: 55px !important; } .u-ml60 { margin-left: 60px !important; } .u-ml65 { margin-left: 65px !important; } .u-ml70 { margin-left: 70px !important; } .u-ml75 { margin-left: 75px !important; } .u-ml80 { margin-left: 80px !important; } .u-ml85 { margin-left: 85px !important; } .u-ml90 { margin-left: 90px !important; } .u-ml95 { margin-left: 95px !important; } .u-ml100 { margin-left: 100px !important; } .u-ma00 { margin: 0px !important; } .u-ma01 { margin: 1px !important; } .u-ma02 { margin: 2px !important; } .u-ma03 { margin: 3px !important; } .u-ma04 { margin: 4px !important; } .u-ma05 { margin: 5px !important; } .u-ma06 { margin: 6px !important; } .u-ma07 { margin: 7px !important; } .u-ma08 { margin: 8px !important; } .u-ma09 { margin: 9px !important; } .u-ma10 { margin: 10px !important; } .u-ma11 { margin: 11px !important; } .u-ma12 { margin: 12px !important; } .u-ma13 { margin: 13px !important; } .u-ma14 { margin: 14px !important; } .u-ma15 { margin: 15px !important; } .u-ma16 { margin: 16px !important; } .u-ma17 { margin: 17px !important; } .u-ma18 { margin: 18px !important; } .u-ma19 { margin: 19px !important; } .u-ma20 { margin: 20px !important; } .u-ma25 { margin: 25px !important; } .u-ma30 { margin: 30px !important; } .u-ma35 { margin: 35px !important; } .u-ma40 { margin: 40px !important; } .u-ma45 { margin: 45px !important; } .u-ma50 { margin: 50px !important; } .u-ma55 { margin: 55px !important; } .u-ma60 { margin: 60px !important; } .u-ma65 { margin: 65px !important; } .u-ma70 { margin: 70px !important; } .u-ma75 { margin: 75px !important; } .u-ma80 { margin: 80px !important; } .u-ma85 { margin: 85px !important; } .u-ma90 { margin: 90px !important; } .u-ma95 { margin: 95px !important; } .u-ma100 { margin: 100px !important; } /* --------------------------------------- modal style overwriting -----------------------------------------*/ .modal-video { background-color: rgba(0, 0, 0, 0.8); } .modal-video .modal-video-body { max-width: 1560px; } /* --------------------------------------- Padding -----------------------------------------*/ .u-pt00 { padding-top: 0px !important; } .u-pt01 { padding-top: 1px !important; } .u-pt02 { padding-top: 2px !important; } .u-pt03 { padding-top: 3px !important; } .u-pt04 { padding-top: 4px !important; } .u-pt05 { padding-top: 5px !important; } .u-pt06 { padding-top: 6px !important; } .u-pt07 { padding-top: 7px !important; } .u-pt08 { padding-top: 8px !important; } .u-pt09 { padding-top: 9px !important; } .u-pt10 { padding-top: 10px !important; } .u-pt11 { padding-top: 11px !important; } .u-pt12 { padding-top: 12px !important; } .u-pt13 { padding-top: 13px !important; } .u-pt14 { padding-top: 14px !important; } .u-pt15 { padding-top: 15px !important; } .u-pt16 { padding-top: 16px !important; } .u-pt17 { padding-top: 17px !important; } .u-pt18 { padding-top: 18px !important; } .u-pt19 { padding-top: 19px !important; } .u-pt20 { padding-top: 20px !important; } .u-pt25 { padding-top: 25px !important; } .u-pt30 { padding-top: 30px !important; } .u-pt35 { padding-top: 35px !important; } .u-pt40 { padding-top: 40px !important; } .u-pt45 { padding-top: 45px !important; } .u-pt50 { padding-top: 50px !important; } .u-pt55 { padding-top: 55px !important; } .u-pt60 { padding-top: 60px !important; } .u-pt65 { padding-top: 65px !important; } .u-pt70 { padding-top: 70px !important; } .u-pt75 { padding-top: 75px !important; } .u-pt80 { padding-top: 80px !important; } .u-pt85 { padding-top: 85px !important; } .u-pt90 { padding-top: 90px !important; } .u-pt95 { padding-top: 95px !important; } .u-pt100 { padding-top: 100px !important; } .u-pr00 { padding-right: 0px !important; } .u-pr01 { padding-right: 1px !important; } .u-pr02 { padding-right: 2px !important; } .u-pr03 { padding-right: 3px !important; } .u-pr04 { padding-right: 4px !important; } .u-pr05 { padding-right: 5px !important; } .u-pr06 { padding-right: 6px !important; } .u-pr07 { padding-right: 7px !important; } .u-pr08 { padding-right: 8px !important; } .u-pr09 { padding-right: 9px !important; } .u-pr10 { padding-right: 10px !important; } .u-pr11 { padding-right: 11px !important; } .u-pr12 { padding-right: 12px !important; } .u-pr13 { padding-right: 13px !important; } .u-pr14 { padding-right: 14px !important; } .u-pr15 { padding-right: 15px !important; } .u-pr16 { padding-right: 16px !important; } .u-pr17 { padding-right: 17px !important; } .u-pr18 { padding-right: 18px !important; } .u-pr19 { padding-right: 19px !important; } .u-pr20 { padding-right: 20px !important; } .u-pr25 { padding-right: 25px !important; } .u-pr30 { padding-right: 30px !important; } .u-pr35 { padding-right: 35px !important; } .u-pr40 { padding-right: 40px !important; } .u-pr45 { padding-right: 45px !important; } .u-pr50 { padding-right: 50px !important; } .u-pr55 { padding-right: 55px !important; } .u-pr60 { padding-right: 60px !important; } .u-pr65 { padding-right: 65px !important; } .u-pr70 { padding-right: 70px !important; } .u-pr75 { padding-right: 75px !important; } .u-pr80 { padding-right: 80px !important; } .u-pr85 { padding-right: 85px !important; } .u-pr90 { padding-right: 90px !important; } .u-pr95 { padding-right: 95px !important; } .u-pr100 { padding-right: 100px !important; } .u-pb00 { padding-bottom: 0px !important; } .u-pb01 { padding-bottom: 1px !important; } .u-pb02 { padding-bottom: 2px !important; } .u-pb03 { padding-bottom: 3px !important; } .u-pb04 { padding-bottom: 4px !important; } .u-pb05 { padding-bottom: 5px !important; } .u-pb06 { padding-bottom: 6px !important; } .u-pb07 { padding-bottom: 7px !important; } .u-pb08 { padding-bottom: 8px !important; } .u-pb09 { padding-bottom: 9px !important; } .u-pb10 { padding-bottom: 10px !important; } .u-pb11 { padding-bottom: 11px !important; } .u-pb12 { padding-bottom: 12px !important; } .u-pb13 { padding-bottom: 13px !important; } .u-pb14 { padding-bottom: 14px !important; } .u-pb15 { padding-bottom: 15px !important; } .u-pb16 { padding-bottom: 16px !important; } .u-pb17 { padding-bottom: 17px !important; } .u-pb18 { padding-bottom: 18px !important; } .u-pb19 { padding-bottom: 19px !important; } .u-pb20 { padding-bottom: 20px !important; } .u-pb25 { padding-bottom: 25px !important; } .u-pb30 { padding-bottom: 30px !important; } .u-pb35 { padding-bottom: 35px !important; } .u-pb40 { padding-bottom: 40px !important; } .u-pb45 { padding-bottom: 45px !important; } .u-pb50 { padding-bottom: 50px !important; } .u-pb55 { padding-bottom: 55px !important; } .u-pb60 { padding-bottom: 60px !important; } .u-pb65 { padding-bottom: 65px !important; } .u-pb70 { padding-bottom: 70px !important; } .u-pb75 { padding-bottom: 75px !important; } .u-pb80 { padding-bottom: 80px !important; } .u-pb85 { padding-bottom: 85px !important; } .u-pb90 { padding-bottom: 90px !important; } .u-pb95 { padding-bottom: 95px !important; } .u-pb100 { padding-bottom: 100px !important; } .u-pl00 { padding-left: 0px !important; } .u-pl01 { padding-left: 1px !important; } .u-pl02 { padding-left: 2px !important; } .u-pl03 { padding-left: 3px !important; } .u-pl04 { padding-left: 4px !important; } .u-pl05 { padding-left: 5px !important; } .u-pl06 { padding-left: 6px !important; } .u-pl07 { padding-left: 7px !important; } .u-pl08 { padding-left: 8px !important; } .u-pl09 { padding-left: 9px !important; } .u-pl10 { padding-left: 10px !important; } .u-pl11 { padding-left: 11px !important; } .u-pl12 { padding-left: 12px !important; } .u-pl13 { padding-left: 13px !important; } .u-pl14 { padding-left: 14px !important; } .u-pl15 { padding-left: 15px !important; } .u-pl16 { padding-left: 16px !important; } .u-pl17 { padding-left: 17px !important; } .u-pl18 { padding-left: 18px !important; } .u-pl19 { padding-left: 19px !important; } .u-pl20 { padding-left: 20px !important; } .u-pl25 { padding-left: 25px !important; } .u-pl30 { padding-left: 30px !important; } .u-pl35 { padding-left: 35px !important; } .u-pl40 { padding-left: 40px !important; } .u-pl45 { padding-left: 45px !important; } .u-pl50 { padding-left: 50px !important; } .u-pl55 { padding-left: 55px !important; } .u-pl60 { padding-left: 60px !important; } .u-pl65 { padding-left: 65px !important; } .u-pl70 { padding-left: 70px !important; } .u-pl75 { padding-left: 75px !important; } .u-pl80 { padding-left: 80px !important; } .u-pl85 { padding-left: 85px !important; } .u-pl90 { padding-left: 90px !important; } .u-pl95 { padding-left: 95px !important; } .u-pl100 { padding-left: 100px !important; } .u-pa00 { padding: 0px !important; } .u-pa01 { padding: 1px !important; } .u-pa02 { padding: 2px !important; } .u-pa03 { padding: 3px !important; } .u-pa04 { padding: 4px !important; } .u-pa05 { padding: 5px !important; } .u-pa06 { padding: 6px !important; } .u-pa07 { padding: 7px !important; } .u-pa08 { padding: 8px !important; } .u-pa09 { padding: 9px !important; } .u-pa10 { padding: 10px !important; } .u-pa11 { padding: 11px !important; } .u-pa12 { padding: 12px !important; } .u-pa13 { padding: 13px !important; } .u-pa14 { padding: 14px !important; } .u-pa15 { padding: 15px !important; } .u-pa16 { padding: 16px !important; } .u-pa17 { padding: 17px !important; } .u-pa18 { padding: 18px !important; } .u-pa19 { padding: 19px !important; } .u-pa20 { padding: 20px !important; } .u-pa25 { padding: 25px !important; } .u-pa30 { padding: 30px !important; } .u-pa35 { padding: 35px !important; } .u-pa40 { padding: 40px !important; } .u-pa45 { padding: 45px !important; } .u-pa50 { padding: 50px !important; } .u-pa55 { padding: 55px !important; } .u-pa60 { padding: 60px !important; } .u-pa65 { padding: 65px !important; } .u-pa70 { padding: 70px !important; } .u-pa75 { padding: 75px !important; } .u-pa80 { padding: 80px !important; } .u-pa85 { padding: 85px !important; } .u-pa90 { padding: 90px !important; } .u-pa95 { padding: 95px !important; } .u-pa100 { padding: 100px !important; } /*# sourceMappingURL=maps/style.css.map */