@charset "UTF-8"; /** * base * ========================== */ /*** 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 { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; -ms-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%; } /* 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; -webkit-box-sizing: border-box; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-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; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } @-webkit-keyframes fluidanimationS { 0%, 100% { border-radius: 63% 37% 54% 46%/55% 48% 52% 45%; } 14% { border-radius: 40% 60% 54% 46%/49% 60% 40% 51%; } 28% { border-radius: 54% 46% 38% 62%/49% 70% 30% 51%; } 42% { border-radius: 61% 39% 55% 45%/61% 38% 62% 39%; } 56% { border-radius: 61% 39% 67% 33%/70% 50% 50% 30%; } 70% { border-radius: 50% 50% 34% 66%/56% 68% 32% 44%; } 84% { border-radius: 46% 54% 50% 50%/35% 61% 39% 65%; } } @keyframes fluidanimationS { 0%, 100% { border-radius: 63% 37% 54% 46%/55% 48% 52% 45%; } 14% { border-radius: 40% 60% 54% 46%/49% 60% 40% 51%; } 28% { border-radius: 54% 46% 38% 62%/49% 70% 30% 51%; } 42% { border-radius: 61% 39% 55% 45%/61% 38% 62% 39%; } 56% { border-radius: 61% 39% 67% 33%/70% 50% 50% 30%; } 70% { border-radius: 50% 50% 34% 66%/56% 68% 32% 44%; } 84% { border-radius: 46% 54% 50% 50%/35% 61% 39% 65%; } } @-webkit-keyframes fluidanimationM { 0%, 100% { border-radius: 68% 32% 48% 52%/60% 43% 57% 40%; } 7% { border-radius: 30% 70% 60% 40%/42% 75% 25% 58%; } 14% { border-radius: 20% 80% 58% 42%/30% 68% 32% 70%; } 21% { border-radius: 35% 65% 55% 45%/65% 55% 45% 35%; } 28% { border-radius: 75% 25% 25% 75%/40% 84% 16% 60%; } 35% { border-radius: 50% 50% 33% 67%/75% 45% 55% 25%; } 42% { border-radius: 65% 35% 70% 30%/80% 20% 80% 20%; } 49% { border-radius: 45% 55% 30% 70%/55% 65% 35% 45%; } 56% { border-radius: 33% 67% 77% 23%/70% 50% 50% 30%; } 63% { border-radius: 57% 43% 73% 27%/66% 44% 56% 34%; } 70% { border-radius: 40% 60% 30% 70%/56% 76% 24% 44%; } 77% { border-radius: 30% 70% 70% 30%/42% 58% 42% 58%; } 84% { border-radius: 50% 50% 50% 50%/35% 65% 35% 65%; } 91% { border-radius: 60% 40% 40% 60%/50% 30% 70% 50%; } } @keyframes fluidanimationM { 0%, 100% { border-radius: 68% 32% 48% 52%/60% 43% 57% 40%; } 7% { border-radius: 30% 70% 60% 40%/42% 75% 25% 58%; } 14% { border-radius: 20% 80% 58% 42%/30% 68% 32% 70%; } 21% { border-radius: 35% 65% 55% 45%/65% 55% 45% 35%; } 28% { border-radius: 75% 25% 25% 75%/40% 84% 16% 60%; } 35% { border-radius: 50% 50% 33% 67%/75% 45% 55% 25%; } 42% { border-radius: 65% 35% 70% 30%/80% 20% 80% 20%; } 49% { border-radius: 45% 55% 30% 70%/55% 65% 35% 45%; } 56% { border-radius: 33% 67% 77% 23%/70% 50% 50% 30%; } 63% { border-radius: 57% 43% 73% 27%/66% 44% 56% 34%; } 70% { border-radius: 40% 60% 30% 70%/56% 76% 24% 44%; } 77% { border-radius: 30% 70% 70% 30%/42% 58% 42% 58%; } 84% { border-radius: 50% 50% 50% 50%/35% 65% 35% 65%; } 91% { border-radius: 60% 40% 40% 60%/50% 30% 70% 50%; } } @-webkit-keyframes fluidanimationM2 { 0%, 100% { border-radius: 55% 45% 60% 40%/45% 55% 45% 55%; } 10% { border-radius: 45% 55% 30% 70%/55% 65% 35% 45%; } 20% { border-radius: 60% 40% 40% 60%/40% 30% 70% 60%; } 30% { border-radius: 35% 65% 65% 35%/75% 25% 75% 25%; } 40% { border-radius: 50% 50% 50% 50%/30% 70% 30% 70%; } 50% { border-radius: 40% 60% 60% 40%/70% 40% 60% 40%; } 60% { border-radius: 70% 30% 30% 70%/60% 50% 50% 40%; } 70% { border-radius: 30% 70% 70% 30%/40% 60% 40% 60%; } 80% { border-radius: 65% 35% 35% 65%/55% 45% 55% 45%; } 90% { border-radius: 55% 45% 45% 55%/65% 35% 65% 35%; } } @keyframes fluidanimationM2 { 0%, 100% { border-radius: 55% 45% 60% 40%/45% 55% 45% 55%; } 10% { border-radius: 45% 55% 30% 70%/55% 65% 35% 45%; } 20% { border-radius: 60% 40% 40% 60%/40% 30% 70% 60%; } 30% { border-radius: 35% 65% 65% 35%/75% 25% 75% 25%; } 40% { border-radius: 50% 50% 50% 50%/30% 70% 30% 70%; } 50% { border-radius: 40% 60% 60% 40%/70% 40% 60% 40%; } 60% { border-radius: 70% 30% 30% 70%/60% 50% 50% 40%; } 70% { border-radius: 30% 70% 70% 30%/40% 60% 40% 60%; } 80% { border-radius: 65% 35% 35% 65%/55% 45% 55% 45%; } 90% { border-radius: 55% 45% 45% 55%/65% 35% 65% 35%; } } @-webkit-keyframes fluidanimationL { 0%, 100% { border-radius: 60% 40% 50% 50%/50% 50% 50% 50%; } 10% { border-radius: 58% 42% 75% 25%/55% 45% 55% 45%; } 20% { border-radius: 50% 50% 58% 42%/40% 60% 40% 60%; } 30% { border-radius: 42% 58% 60% 40%/45% 55% 45% 55%; } 40% { border-radius: 75% 25% 67% 33%/55% 65% 35% 45%; } 50% { border-radius: 30% 70% 70% 30%/60% 40% 60% 40%; } 60% { border-radius: 25% 75% 75% 25%/65% 35% 65% 35%; } 70% { border-radius: 70% 30% 30% 70%/40% 60% 40% 60%; } 80% { border-radius: 67% 33% 58% 42%/45% 75% 25% 55%; } 90% { border-radius: 50% 50% 50% 50%/50% 30% 70% 50%; } } @keyframes fluidanimationL { 0%, 100% { border-radius: 60% 40% 50% 50%/50% 50% 50% 50%; } 10% { border-radius: 58% 42% 75% 25%/55% 45% 55% 45%; } 20% { border-radius: 50% 50% 58% 42%/40% 60% 40% 60%; } 30% { border-radius: 42% 58% 60% 40%/45% 55% 45% 55%; } 40% { border-radius: 75% 25% 67% 33%/55% 65% 35% 45%; } 50% { border-radius: 30% 70% 70% 30%/60% 40% 60% 40%; } 60% { border-radius: 25% 75% 75% 25%/65% 35% 65% 35%; } 70% { border-radius: 70% 30% 30% 70%/40% 60% 40% 60%; } 80% { border-radius: 67% 33% 58% 42%/45% 75% 25% 55%; } 90% { border-radius: 50% 50% 50% 50%/50% 30% 70% 50%; } } .fade_out { -webkit-animation: fadeOut 1s ease-out forwards; animation: fadeOut 1s ease-out forwards; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .bl_videoBlock_link { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .bl_videoBlock_link:hover { scale: 1.01; } .bl_videoModal { position: fixed; top: 0; left: 0; z-index: 2000; display: none; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.2); } .bl_videoModal_content { position: absolute; top: 50%; left: 50%; -webkit-box-sizing: content-box; box-sizing: content-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 85%; max-width: 1200px; height: auto; max-height: 80vh; aspect-ratio: 16/9; padding: 3vw 2vw; background-color: #fefefe; background-color: #7BADEF; border: 1px solid #888; border-radius: 20px; -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-animation-name: animatetop; animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-duration: 0.4s; } @media screen and (max-width: 768px) { .bl_videoModal_content { width: 100%; padding-top: 21px; } } .bl_videoModal_video { display: block; width: 100%; height: 100%; max-height: 60vh; -webkit-filter: drop-shadow(0 0 rgba(0, 0, 0, 0)); filter: drop-shadow(0 0 rgba(0, 0, 0, 0)); border: none; outline: none; } @media screen and (max-width: 1024px) { .bl_videoModal_video { max-height: 50vh; } } @media screen and (max-width: 768px) { .bl_videoModal_video { max-height: 50vh; } } .bl_videoModal_closeBtn { position: absolute; top: 0; right: 0; width: 90px; height: 90px; cursor: pointer; background-color: #3F679B; border-radius: 50%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); } @media screen and (max-width: 768px) { .bl_videoModal_closeBtn { right: 50px; width: 60px; height: 60px; } } .bl_videoModal_closeBtn:focus, .bl_videoModal_closeBtn:hover { background-color: #fff; border: 1px solid #3F679B; } .bl_videoModal_closeBtn:focus .bl_videoModal_closeLine > span, .bl_videoModal_closeBtn:focus .bl_videoModal_closeLine > span::before, .bl_videoModal_closeBtn:hover .bl_videoModal_closeLine > span, .bl_videoModal_closeBtn:hover .bl_videoModal_closeLine > span::before { background-color: #3F679B; } .bl_videoModal_closeLine { position: relative; -webkit-box-sizing: content-box; box-sizing: content-box; display: inline-block; width: 100%; height: 100%; line-height: 1; color: #fff; vertical-align: middle; border-radius: 50%; } .bl_videoModal_closeLine > span { position: relative; position: absolute; inset: 0; width: 40%; height: 0.3em; margin: auto; background: currentcolor; border-radius: 0.1em; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .bl_videoModal_closeLine > span::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: inherit; border-radius: inherit; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .bl_videoModal { opacity: 0; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; } .bl_videoModal.is_show { display: block; opacity: 1; } .js_bodyNoScroll { height: 100%; overflow: hidden; } /* fv　アニメーション --------------------------------------------- */ /* スライドの設定 */ .slideshow { position: relative; } .slides { position: relative; width: 100%; height: 100vh; padding: 0; margin: 0; overflow: hidden; list-style: none; } .no-js .slides { height: auto; } .slides > li { position: absolute; width: 100%; height: 100%; visibility: hidden; -webkit-perspective: 1600px; perspective: 1600px; } .no-js .slides > li { position: relative; visibility: visible; } .description { position: relative; z-index: 1000; width: 50%; opacity: 0; } .no-js .description { opacity: 1; } .tiltview { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .slides > li.current, .slides > li.show { visibility: visible; } .description { -webkit-transition: opacity 1s; transition: opacity 1s; } .current .description, .show .description { opacity: 1; } .hide .description { opacity: 0; } .hide[data-effect-out=slideRightOut] .tiltview { -webkit-animation: slideRightOut 0.5s both; animation: slideRightOut 0.5s both; } @-webkit-keyframes slideRightOut { 25% { -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translate(1500px, -500px); transform: translate(1500px, -500px); } } @keyframes slideRightOut { 25% { -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translate(1500px, -500px); transform: translate(1500px, -500px); } } .show[data-effect-in=slideRightIn] .tiltview { -webkit-animation: slideRightIn 0.5s both; animation: slideRightIn 0.5s both; } @-webkit-keyframes slideRightIn { 0% { -webkit-transform: translate(-1250px, 625px); transform: translate(-1250px, 625px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @keyframes slideRightIn { 0% { -webkit-transform: translate(-1250px, 625px); transform: translate(-1250px, 625px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } .no-csstransforms3d .tiltview.col { top: -50%; } .no-csstransforms3d .tiltview.row { top: 20px; } @-webkit-keyframes fadeOutAnimation { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOutAnimation { from { opacity: 1; } to { opacity: 0; } } .fvFade-out { -webkit-animation: fadeOutAnimation 0.8s forwards; animation: fadeOutAnimation 0.8s forwards; } .hp_pl5 { padding-left: 5%; } .hp_bcLB { background-color: #D2E6FF; } .hp_bcSB { background-color: #9EDCFE; } .hp_bcIW { background-color: #FDFDFE; } .hp_OP50 { opacity: 0.5; } .hp_bcPY { background-color: #FAF7D5; } .hp_bcSTB { background-color: #3F679B; } .hp_bcCream { background-color: #FBF7C7; } .hp_cWhite { color: #fff !important; } .hp_bcCB { background-color: #7BADEF; } .hp_characterGray { color: #505050 !important; } @media screen and (max-width: 768px) { .hp_pc { display: none !important; } } .hp_sp { display: none !important; } @media screen and (max-width: 768px) { .hp_sp { display: block !important; } } @media screen and (max-width: 630px) { .hp_sp2 { display: none !important; } } .hp_fsz textpath { font-size: 16px; } @media screen and (max-width: 768px) { .hp_disInline { display: inline !important; } } @media screen and (max-width: 768px) { .hp_spFsz22 { font-size: 1.375rem; } } @media screen and (max-width: 1025px) and (min-height: 800px) { .hp_tb { display: block; } } .hp_indent { display: block; padding-left: 1.5em; } .hp_indent_2 { display: block; padding-left: 1em; text-indent: -1em; } .hp_indent_3 { display: block; padding-left: 1.5em; text-indent: -1.5em; } .hp_indent_4 { display: block; padding-left: 1em; } .hp_mbless { margin-bottom: initial !important; } .hp_underline { text-decoration: underline; } .p_top { opacity: 0; } .hp_visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .bl_globalNavi { position: fixed; top: 0; left: 0; } body { overflow-x: hidden; font-family: Inter, "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", Meiryo, sans-serif; font-size: 1rem; color: #505050; } .container { overflow-x: hidden; } img { max-width: 100%; vertical-align: bottom; } a { color: #505050; text-decoration: none; -webkit-transition: opacity 0.35s linear; transition: opacity 0.35s linear; } a:hover { opacity: 0.6; } /* Top Menu Bar for Desktop */ .bl_topMenuBar { display: flex; align-items: center; justify-content: space-between; /* Space between logo and menu items */ background-color: rgb(246, 244, 238); padding: 10px 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); position: fixed; top: 0; left: 0; right: 0; z-index: 1000; } .bl_topMenuBar_logo { flex-shrink: 0; /* Prevent the logo from shrinking */ } .bl_topMenuBar_logo img { height: 40px; /* Adjust logo height */ width: auto; } .bl_topMenuBar_links { display: flex; justify-content: flex-end; /* Align menu items to the right */ align-items: center; list-style: none; margin: 0; padding: 0; flex-grow: 1; /* Push menu items to the right */ } .bl_topMenuBar_links li { margin: 0 15px; } .bl_topMenuBar_links a { text-decoration: none; color: #333; font-weight: bold; font-size: 16px; } .bl_topMenuBar_links .el_snsLink { display: flex; align-items: center; } .bl_topMenuBar_links .el_snsLink img { margin-right: 10px; } /** * helpers * ========================== */ /** * Layout * ========================== */ /* Media Query for Desktop */ @media (min-width: 1024px) { .bl_topMenuBar { display: flex; /* Show top menu bar on desktop */ } .el_headerLogo, .bl_globalNavi, .el_hamburger { display: none; /* Hide the existing logo */ } .el_hamburger > span { display: none; transition: all 0.3s ease-in-out; } } /* Media Query for Mobile */ @media (max-width: 1022px) { .bl_topMenuBar { display: none; /* Hide top menu bar on mobile */ } .el_hamburger { display: -webkit-box; display: -ms-flexbox; display: flex; } .el_hamburger > span { display: block; transition: all 0.3s ease-in-out; } .bl_globalNavi { display: block; /* Show mobile menu on mobile */ } } @media screen and (max-width: 630px) { .ly_content_feature { margin-top: 0%; } } @media screen and (max-width: 470px) { .ly_content_feature { margin-top: 33%; } } @media screen and (max-width: 630px) { .ly_content_feature_app3 { margin-top: initial; } } @media screen and (max-width: 630px) { .ly_content_feature_app4 { margin-top: initial; } } .ly_footer_inner { max-width: 1200px; padding: 0 20px 30px; margin: 0 auto; } .ly_header_about { position: relative; height: 0vh; } .ly_header { position: relative; height: 100vh; } .ly_header_video { position: relative; top: 0; padding-top: 0px; left: 0; z-index: -1; width: 100%; } .ly_header_video video { width: 100%; height: 100vh; -o-object-fit: cover; object-fit: cover; } .ly_header_scrollDrag { position: absolute; bottom: 19%; left: 50%; z-index: 2; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .ly_header_appLink { position: fixed; right: 3.5%; bottom: 15%; z-index: 600; } @media screen and (max-width: 768px) { .ly_header_appLink { right: initial; bottom: 4%; left: 15px; } } .ly_header .ly_header_wave { position: absolute; bottom: -5px; left: 0; } @media screen and (max-width: 768px) { .ly_header .ly_header_wave_fv { bottom: -74px; } } .ly_header_fv { height: initial; } .ly_header_documents { height: 160px; } .ly_fv { position: relative; height: 100vh; background-color: #f5f6fa; } .ly_fv_scrollDrag { position: absolute; top: 75%; left: 50%; z-index: 2; -webkit-transform: translateX(-50%); transform: translateX(-50%); } @media screen and (max-width: 1024px) and (min-height: 800px) { .ly_fv_scrollDrag { top: 80%; } } .ly_fv_wave { position: absolute; bottom: -5px; z-index: 1; } @media screen and (max-width: 768px) { .ly_fv_wave { height: 130px; } } .ly_fv_skipIcon { position: absolute; right: 45px; bottom: 30px; z-index: 10; pointer-events: auto; } @media screen and (max-width: 630px) { .ly_fv_skipIcon { right: 20px; } } .ly_fv_skipIcon a { color: #fff; } .ly_fvWrapper { overflow: hidden; } .ly_container_document { background-color: #F5F6FA; } /** * module * ========================== */ .bl_topVideo_mobile { -webkit-filter: drop-shadow(0 0 rgba(0, 0, 0, 0)); filter: drop-shadow(0 0 rgba(0, 0, 0, 0)); } .bl_concept { position: relative; margin-top: -1px; background-color: #7BADEF; } .bl_concept_ttl { margin-bottom: 29px; } @media screen and (max-width: 768px) { .bl_concept_ttl { margin-bottom: initial; } } .bl_sideBySide_wrapper { position: relative; z-index: 5; padding-left: 13%; } @media screen and (max-width: 768px) { .bl_sideBySide_wrapper { padding: 0 5%; margin: 0 auto; } } .bl_concept_wave2 { margin-top: -23%; } @media screen and (max-width: 768px) { .bl_concept_wave1 { margin-top: -28%; } .bl_concept_wave2 { margin-top: -28%; } } .bl_sideBySide { position: relative; margin-bottom: 70px; } @media screen and (max-width: 768px) { .bl_sideBySide { margin-bottom: 420px; } } .bl_sideBySide_ttl { position: relative; z-index: 5; -webkit-transform: scale(1.1); transform: scale(1.1); } @media screen and (max-width: 768px) { .bl_sideBySide_ttl { margin-bottom: 11px; } } @media screen and (max-width: 768px) { .bl_sideBySide_ttl_sp_2 { margin-top: -40px; margin-left: 83px; } } .bl_sideBySide_txtBox { font-size: 1.25rem; } @media screen and (max-width: 470px) { .bl_sideBySide_txtBox { font-size: 1rem; } } .bl_sideBySide_txt { font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", Meiryo, sans-serif; font-weight: 700; line-height: 1.88; color: #fff; } .bl_sideBySide_bottomTxt { margin-top: 32px; } .bl_sideBySide_imgBox { position: absolute; top: 60px; right: 0; z-index: 3; width: clamp(23.438rem, -8.501rem + 66.54vw, 44.938rem); } @media screen and (max-width: 1280px) { .bl_sideBySide_imgBox { top: 406px; right: 0; width: 460px; } } @media screen and (max-width: 1024px) { .bl_sideBySide_imgBox { top: 456px; right: 0; width: 460px; } } @media screen and (max-width: 768px) { .bl_sideBySide_imgBox { top: 506px; right: 0; width: 480px; } } @media screen and (max-width: 470px) { .bl_sideBySide_imgBox { top: 485px; margin-right: -50px; } } .bl_sideBySide_mainHeading { font-size: 36px; font-weight: bold; color: #505050; margin-bottom: 16px; padding-top: 60px; margin-top: 20px; line-height: 1.4; } .bl_sideBySide_subHeading { font-size: 24px; font-weight: bold; color: #FAF7D5; /* Adjust color to match the design */ margin-bottom: 24px; line-height: 1.4; } .bl_sideBySide_txt { font-size: 16px; color: #FFFFFF; line-height: 1.8; margin-bottom: 16px; } .bl_sideBySide_bottomTxt { font-size: 16px; color: #FFFFFF; line-height: 1.8; } .bl_sideBySide_imgBox img { height: auto; } .bl_app { margin-top: -100px; background-color: #FAF7D5; } .bl_app_wrapper { max-width: 1138px; padding: 0px 15px; margin: -100px auto 0; } @media screen and (max-width: 768px) { .bl_app_wrapper { width: 100%; padding: 0 5%; margin-top: 0; } } .bl_app_ttl { position: relative; z-index: 3; margin-top: 20px; } .bl_app2_wrapper { max-width: 1112px; padding: 0px 15px; margin: -150px auto; } @media screen and (max-width: 768px) { .bl_app2_wrapper { padding-top: initial; padding-bottom: 100px; } } .bl_app_ttl_sp { margin-left: -76px; } .bl_app_ttl_sp_2 { margin-top: -50px; margin-right: -48px; } .bl_appVideo_wrapper { position: relative; width: 235px; height: 468px; margin-bottom: 20%; margin-left: 10%; overflow: hidden; border: 10px solid black; border-radius: 25px; } @media screen and (max-width: 1025px) { .bl_appVideo_wrapper { width: 182px; height: 343px; margin-top: 62%; } } @media screen and (max-width: 768px) { .bl_appVideo_wrapper { width: 234px; height: 454px; margin-top: initial; } } @media screen and (max-width: 630px) { .bl_appVideo_wrapper { width: 163px; height: 306px; border: 7px solid black; } } .bl_appVideo { position: absolute; top: -18px; left: 0; width: 100%; height: auto; } @media screen and (max-width: 1025px) { .bl_appVideo { width: 100%; } } .bl_appVideo_app2 { top: -18px; } @media screen and (max-width: 768px) { .bl_appVideo_app2 { top: -18px; } } .bl_appVideo_app3 { top: -18px; } @media screen and (max-width: 768px) { .bl_appVideo_app3 { top: -28px; } } @media screen and (max-width: 470px) { .bl_appVideo_app3 { top: -18px; } } .bl_spVideo { width: 200px; height: auto; margin-bottom: 20%; margin-left: 10%; border: 10px solid black; border-radius: 20px; } @media screen and (max-width: 1025px) { .bl_spVideo { width: 140px; margin-top: 20%; } } @media screen and (max-width: 768px) { .bl_spVideo { width: 170px; } } @media screen and (max-width: 630px) { .bl_spVideo { width: 143px; } } .bl_shapeWrapper { position: relative; z-index: 2; } .bl_shapeWrapper_item { position: absolute; right: 153px; bottom: -85px; } @media screen and (max-width: 768px) { .bl_shapeWrapper_item { right: 34px; bottom: -145px; } } .bl_shapeWrapper_item_2 { right: -70px; bottom: -216px; z-index: 2; } .bl_featureBlockTxt_left { position: relative; -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; padding: 0px; border-radius: 8px; display: block; align-items: flex-start; justify-content: space-between; margin-top: 10%; } .bl_featureBlockTxt_left ul { position: relative; -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; padding: 0px; border-radius: 8px; display: block; align-items: flex-start; justify-content: space-between; margin-top: 10%; list-style: disc; } .bl_featureBlockTxt { position: relative; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 40px; border-radius: 8px; display: block; align-items: flex-start; justify-content: space-between; margin-top: 20%; } @media screen and (max-width: 768px) { .bl_featureBlockTxt { padding: 0px; } } .bl_featureBlock_ttl { position: relative; z-index: 5; font-size: 24px; font-weight: bold; color: #7BADEF; /* Light blue color */ margin-bottom: 16px; padding: 0px; margin-left: 28%; -webkit-transform: scale(1.1); transform: scale(1.1); } .bl_featureBlock_ttl_yellow { position: relative; z-index: 5; font-size: 24px; font-weight: bold; color: #FAF7D5; /* Light blue color */ margin-bottom: 6px; padding: 0px; margin-left: 10%; -webkit-transform: scale(1.1); transform: scale(1.1); } @media screen and (max-width: 1025px) { .bl_featureBlock_ttl { margin-left: 25%; -webkit-transform: initial; transform: initial; } } @media screen and (max-width: 768px) { .bl_featureBlock_ttl { margin-bottom: 0; margin-left: 0; -webkit-transform: initial; transform: initial; } } .bl_featureBlock_ttl_app1 { margin-left: clamp(-11.563rem, -28.739rem + 35.78vw, 0rem); } @media screen and (max-width: 768px) { .bl_featureBlock_ttl_app1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 47px; margin-left: initial; } } .bl_featureBlock_ttl_app2 { margin-top: -50px; margin-left: 170px; } @media screen and (max-width: 768px) { .bl_featureBlock_ttl_app2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: initial; margin-left: initial; } } .bl_featureBlock_ttl_app3 { margin-top: -50px; margin-bottom: 50px; margin-left: clamp(-17rem, -34.826rem + 37.14vw, -5rem); } @media screen and (max-width: 1025px) { .bl_featureBlock_ttl_app3 { margin-left: clamp(-18rem, -36.826rem + 37.14vw, -5rem); -webkit-transform: initial; transform: initial; } } @media screen and (max-width: 768px) { .bl_featureBlock_ttl_app3 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 5%; margin-left: initial; -webkit-transform: scale(1.1); transform: scale(1.1); } } .bl_featureBlock_ttl_app4 { margin-top: -40px; margin-left: 24%; } @media screen and (max-width: 768px) { .bl_featureBlock_ttl_app4 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 5%; margin-left: initial; } } .bl_app3_ttl_sp { margin-left: -170px; } @media screen and (max-width: 630px) { .bl_app3_ttl_sp { margin-left: -94px; } } .bl_app3_ttl_sp_2 { margin-top: -33px; margin-right: -110px; } @media screen and (max-width: 630px) { .bl_app3_ttl_sp_2 { margin-right: -80px; } } .bl_featureBlock { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 5%; -moz-column-gap: 5%; column-gap: 5%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media screen and (max-width: 768px) { .bl_featureBlock { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: clamp(-6.25rem, -12.214rem + 25.45vw, 0rem); } } .bl_featureBlock_reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media screen and (max-width: 768px) { .bl_featureBlock_reverse { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: 7%; } } .bl_featureBlock_num { position: absolute; bottom: 121px; left: 0; z-index: 3; font-family: "Work Sans", sans-serif; font-size: 199px; font-weight: 500; color: #7BADEF; } @media screen and (max-width: 768px) { .bl_featureBlock_num { top: 17%; left: 6%; font-size: 120px; } } @media screen and (max-width: 470px) { .bl_featureBlock_num { left: 5%; } } .bl_featureBlock_num_2 { top: -31%; color: #9EDCFE; } @media screen and (max-width: 768px) { .bl_featureBlock_num_2 { top: 0; left: 8%; } } @media screen and (max-width: 630px) { .bl_featureBlock_num_2 { left: 5%; } } .bl_featureBlock_num_3 { top: 60%; left: 45%; color: #D2E6FF; } @media screen and (max-width: 768px) { .bl_featureBlock_num_3 { top: 5%; bottom: initial; left: 80%; } } .bl_featureBlock_num_4 { top: -80px; color: #D2E6FF; } @media screen and (max-width: 630px) { .bl_featureBlock_num_4 { left: 0; } } .bl_featureBlock_imgWrapper { position: relative; z-index: 2; width: 30%; margin-left: 73px; } /* Add the pseudo-element for the disclaimer text */ .bl_featureBlock_imgWrapper::after { content: "画像はイメージです。"; display: block; position: absolute; bottom: 35px; left: 0; width: 100%; font-size: 12px; color: #666666; text-align: center; } .bl_featureBlock_imgWrapper img { -o-object-fit: contain; object-fit: contain; } @media screen and (max-width: 768px) { .bl_featureBlock_imgWrapper { width: clamp(10.875rem, 5.448rem + 23.16vw, 16.563rem); margin-left: initial; text-align: center; } } @media screen and (max-width: 768px) { .bl_featureBlock_imgWrapper_app3 { margin-top: 12%; } } @media screen and (max-width: 630px) { .bl_featureBlock_imgWrapper_app3 { margin-top: 25%; } } .bl_featureBlock_imgWrapper_reverse { margin-left: initial; } .bl_featureBlock_imgWrapper_4 { margin-left: initial; } .bl_featureBlock_spShape { position: absolute; top: 30px; left: -70px; z-index: -1; } @media screen and (max-width: 768px) { .bl_featureBlock_spShape { top: 110px; left: -40px; } } @media screen and (max-width: 630px) { .bl_featureBlock_spShape { top: 65px; } } .bl_featureBlock_spShape_2 { position: absolute; top: initial; bottom: 65px; left: 80px; z-index: -1; } @media screen and (max-width: 768px) { .bl_featureBlock_spShape_2 { left: 105px; } } @media screen and (max-width: 630px) { .bl_featureBlock_spShape_2 { bottom: 50px; left: 50px; } } .bl_featureBlock_body { width: 65%; margin-top: -10%; } @media screen and (max-width: 768px) { .bl_featureBlock_body { width: 100%; padding-top: initial; } } .bl_featureBlock_body_app1 { padding-top: initial; } .bl_featureBlock_body_app4 { margin-top: initial; } .bl_featureBlock_shape_3 { position: absolute; top: 10%; right: -20%; z-index: -2; } @media screen and (max-width: 768px) { .bl_featureBlock_shape_3 { top: 31%; right: -20%; } } .bl_featureBlock_shape_4 { position: absolute; bottom: 14%; left: -24%; z-index: -1; } @media screen and (max-width: 768px) { .bl_featureBlock_shape_4 { bottom: 14%; left: -24%; } } .bl_featureBlock_shape_5 { position: absolute; top: 12%; right: -18%; z-index: -1; } @media screen and (max-width: 768px) { .bl_featureBlock_shape_5 { top: 28%; right: -42%; } } .bl_featureBlock_txt { position: relative; z-index: 10; margin-left: clamp(1.75rem, -10.134rem + 24.76vw, 9.75rem); font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", Meiryo, sans-serif; font-size: 1.25rem; font-weight: 700; line-height: 2.2; color: #505050; font-size: 16px; } .bl_featureBlock_txt li { margin-bottom: 8px; list-style: none; position: relative; padding-left: 1.5em; } .bl_featureBlock_txt li::before { content: "・"; position: absolute; left: 0; color: #505050; /* Matches text color */ } .bl_featureBlock_txt_white { position: relative; z-index: 10; margin-left: clamp(1.75rem, -10.134rem + 24.76vw, 9.75rem); font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", Meiryo, sans-serif; font-size: 1.25rem; font-weight: 700; line-height: 2.2; color: #FFFFFF; font-size: 16px; margin-left: 7%; padding-top: 15%; } .bl_featureBlock_txt_white ul { padding-top: 0%; } .bl_featureBlock_txt_white li { margin-bottom: 8px; list-style: none; position: relative; padding-left: 1.5em; } .bl_featureBlock_txt_white li::before { content: "・"; position: absolute; left: 0; color: #FFFFFF; /* Matches text color */ } @media screen and (max-width: 768px) { .bl_featureBlock_txt { width: 70%; margin: 0 auto; } } @media screen and (max-width: 630px) { .bl_featureBlock_txt, .bl_featureBlock_txt_white { width: 95%; } } @media screen and (max-width: 470px) { .bl_featureBlock_txt, .bl_featureBlock_txt_white { font-size: 0.875rem; margin: auto; } .bl_featureBlock_ttl_yellow { font-size: 1.2rem; margin-left: 10px; } .bl_featureBlock_txt_white li { font-size: 0.875rem; margin-left: 5px; line-height: normal; } .bl_featureBlockTxt_left { margin:15px; } } .bl_featureBlock_txt_reverse { margin-left: 70px; } @media screen and (max-width: 768px) { .bl_featureBlock_txt_reverse { width: 70%; margin: -12% auto 0; } } @media screen and (max-width: 630px) { .bl_featureBlock_txt_reverse { width: 95%; } } @media screen and (max-width: 470px) { .bl_featureBlock_txt_reverse { margin-top: -22%; } } @media screen and (max-width: 470px) { .bl_featureBlock { font-size: 0.875rem; } } @media screen and (max-width: 768px) { .bl_featureBlock_4 { margin-top: -30px; } } .bl_featureBlock li { padding-left: 1em; text-indent: -1em; letter-spacing: 0.8px; } @media screen and (max-width: 630px) { .bl_featureBlock li { letter-spacing: 0.2px; } } .bl_featureBlock_illust { position: absolute; bottom: 0; left: 33%; z-index: 3; } @media screen and (max-width: 768px) { .bl_featureBlock_illust { top: 260px; right: -3px; bottom: initial; left: initial; width: 66px; height: 105px; } } .bl_featureBlock_illust img { height: auto; } .bl_featureBlock_illust_2 { bottom: 8%; left: -13%; } @media screen and (max-width: 1025px) { .bl_featureBlock_illust_2 { left: -20%; } } @media screen and (max-width: 768px) { .bl_featureBlock_illust_2 { top: initial; left: -38px; } } .bl_featureBlock_illust_3 { z-index: 2; } @media screen and (max-width: 768px) { .bl_featureBlock_illust_3 { right: 15%; left: initial; width: 38px; height: 75px; } } .bl_featureBlock_illust_4 { right: 32%; bottom: 50px; left: initial; } @media screen and (max-width: 768px) { .bl_featureBlock_illust_4 { top: 37%; right: initial; bottom: initial; left: 12%; width: 31px; height: 84px; } } .bl_app { position: relative; margin-top: -25px; } .bl_app .bl_app_wave { margin-top: -30px; } @media screen and (max-width: 768px) { .bl_app .bl_app_wave { margin-top: 90px; } } .bl_app .bl_app_wave2 { margin-top: -38%; } .bl_app2 { position: relative; } @media screen and (max-width: 768px) { .bl_app2_ttl_1 { margin-left: -188px; } } @media screen and (max-width: 768px) { .bl_app2_ttl_2 { margin-top: -110px; margin-left: 42px; } } .bl_app2 .bl_app2_wave { margin-top: 55px; } @media screen and (max-width: 768px) { .bl_app2 .bl_app2_wave { margin-top: 22%; } } @media screen and (max-width: 630px) { .bl_app2 .bl_app2_wave { margin-top: 34%; } } @media screen and (max-width: 470px) { .bl_app2 .bl_app2_wave { margin-top: 40%; margin-bottom: 60px; } } .bl_app2_shape1 { position: absolute; bottom: 11%; left: -3%; z-index: 2; } @media screen and (max-width: 768px) { .bl_app2_shape1 { bottom: 4%; } } @media screen and (max-width: 630px) { .bl_app2_shape1 { bottom: 1%; } } .bl_app2_shape2 { position: absolute; bottom: 23%; left: 10%; z-index: 2; } @media screen and (max-width: 768px) { .bl_app2_shape2 { bottom: 8%; } } .bl_app2_shape3 { position: absolute; right: 3%; bottom: 38%; z-index: 1; } .bl_app3 { position: relative; z-index: 1; margin-top: -50px; background-color: #7BADEF; } .bl_app3_wrapper { max-width: 1250px; /* padding: 8% 5px 9%; */ margin: 0 auto; } @media screen and (max-width: 1025px) { .bl_app3_wrapper { padding-top: 0%; } } @media screen and (max-width: 768px) { .bl_app3_wrapper { padding-top: 8%; margin-bottom: 250px; } } @media screen and (max-width: 630px) { .bl_app3_wrapper { padding: 0 15px; } } .bl_app3 .bl_app3_wave { margin-top: -198px; } .bl_app3_wave img { height: 500px !important; } .bl_app3_shape1 { position: relative; margin-left: -50px; } .bl_app3_shape2 { position: absolute; right: 240px; bottom: 34%; z-index: 2 !important; } @media screen and (max-width: 768px) { .bl_app3_shape2 { right: 116px; bottom: 26% !important; left: initial !important; } } .bl_app3_shape3 { position: absolute; right: 80px; bottom: 33%; z-index: 1; } @media screen and (max-width: 768px) { .bl_app3_shape3 { right: 48px; bottom: 26%; } } .bl_app3_shape4 { position: absolute; bottom: 43%; left: 7%; z-index: 1; } .bl_app3_shape5 { position: absolute; right: -70px; bottom: 30%; } @media screen and (max-width: 768px) { .bl_app3_shape5 { right: -60px; bottom: 26%; } } .bl_app4 { position: relative; z-index: 2; background-image: linear-gradient(to bottom, #FAF7D5 0%, #FAF7D5 calc(100% - 300px), rgb(250, 251, 253) 100%); } .bl_app4_wrapper { max-width: 980px; /* padding: 0 15px; */ margin: -220px auto 0; } @media screen and (max-width: 768px) { .bl_app4_wrapper { margin-bottom: 50px; } } .bl_app4_shape1 { position: absolute; right: -28px; bottom: 62%; } @media screen and (max-width: 768px) { .bl_app4_shape1 { display: none; } } .bl_app4_wave2 { margin-top: -21%; } @media screen and (max-width: 768px) { .bl_spVideo_wrapper_app2 { margin-top: 25%; } } .bl_spVideo_wrapper_app3, .bl_spVideo_wrapper_app4 { margin-top: -15%; } .bl_videoSection { position: relative; min-height: 925px; margin-top: 0%; /* background-color: rgb(250, 251, 253); */ background-color: #FFFFFF; } @media screen and (max-width: 768px) { .bl_videoSection { min-height: 510px; } } @media screen and (max-width: 630px) { .bl_videoSection { min-height: 400px; } } @media screen and (max-width: 470px) { .bl_videoSection { min-height: 300px; } } .bl_videoSection .bl_videoSection_wave1 { margin-top: -12%; } .bl_videoSection .bl_videoSection_wave2 { margin-top: -14%; } .bl_videoSection .bl_videoSection_wave3 { margin-top: -14%; } .bl_videoSection_illust { position: absolute; bottom: 35%; left: 6.5%; z-index: 501; } @media screen and (max-width: 768px) { .bl_videoSection_illust { display: none; } } .bl_videoBlock { position: relative; z-index: 500; max-width: 947px; padding: 0 15px; margin: 0 auto; } @media screen and (max-width: 768px) { .bl_videoBlock { max-height: 430px; padding-top: 8%; padding-bottom: 8%; } } .bl_videoBlock_inner { position: relative; padding: 60px 33px 58px; margin: 0 auto; background-color: #7BADEF; border-radius: 17px; -webkit-box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.0509803922); box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.0509803922); } @media screen and (max-width: 768px) { .bl_videoBlock_inner { padding: 41px 20px 38px; } } @media screen and (max-width: 630px) { .bl_videoBlock_inner { padding: 25px 11px; border-radius: 6px; } } .bl_videoBlock_inner video { position: relative; max-width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .bl_videoBlock_title { position: absolute; top: 31px; left: 50%; width: 167px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } @media screen and (max-width: 768px) { .bl_videoBlock_title { top: -20px; width: 92px; } } @media screen and (max-width: 630px) { .bl_videoBlock_title { top: -11px; } } .bl_videoBlock_title_modal { top: 13px; } .bl_videoBlock_link { position: relative; z-index: 2; display: block; padding-top: 56.25%; } .bl_videoBlock_link img { position: absolute; top: 0; left: 0; width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; } .bl_videoBlock_startBtn { position: absolute; top: 50%; left: 50%; width: 78px; height: 78px; cursor: pointer; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media screen and (max-width: 630px) { .bl_videoBlock_startBtn { width: 28.5px; height: 28.5px; } } .bl_about { position: relative; z-index: 1; background-color: rgb(246, 244, 238); } .bl_about_wrapper { padding: 0 20px 150px; } @media screen and (max-width: 768px) { .bl_about_wrapper .news-container { padding-top: 14%; } } .bl_about .bl_about_wave { margin-top: -5%; } .bl_about_title { margin-bottom: 45px; } .bl_about_bc { position: absolute; top: 20%; z-index: -1; width: 100%; height: 500px; background-color: #d2e6ff; } .bl_about_tableArea { max-width: 946px; padding: 112px 69px; margin: 0 auto 80px; background-color: #fff; border-radius: 17px; -webkit-box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.0509803922); box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.0509803922); } @media screen and (max-width: 630px) { .bl_about_tableArea { padding: 69px 18px 49px; } } .bl_horizTable table { width: 100%; padding: 112px 69px; } .bl_horizTable tr { font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", Meiryo, sans-serif; font-weight: 700; line-height: 2.2; } @media screen and (max-width: 630px) { .bl_horizTable tr { font-size: 0.8125rem; } } @media screen and (max-width: 470px) { .bl_horizTable tr { font-size: 0.6875rem; } } .bl_horizTable th { position: relative; width: 20%; padding: 20px 20px 20px 0; color: #7BADEF; vertical-align: middle; } @media screen and (max-width: 630px) { .bl_horizTable th { padding-right: 10px; } } .bl_horizTable th::before { position: absolute; top: 0; display: inline-block; width: 80%; height: 1px; content: ""; background-color: #505050; } .bl_horizTable td { position: relative; padding: 20px; } @media screen and (max-width: 630px) { .bl_horizTable td { padding: 10px; vertical-align: middle; } } .bl_horizTable td::before { position: absolute; top: 0; display: inline-block; width: 95%; height: 1px; content: ""; background-color: #D2E6FF; } .bl_horizTable_borderBottom { position: relative; } .bl_horizTable_borderBottom::after { position: absolute; bottom: 0; left: 0; display: inline-block; width: 80%; height: 1px; content: ""; background-color: #505050; } .bl_horizTable_borderBottom_LightBlue-BordeBottom::after { left: initial; width: 95%; background-color: #D2E6FF; } .bl_spthanks_wrapper { max-width: 946px; padding: 30px 69px; margin: 0 auto; font-weight: bold; background-color: #fff; border-radius: 17px; -webkit-box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.0509803922); box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.0509803922); } @media screen and (max-width: 630px) { .bl_spthanks_wrapper { padding-right: 18px; padding-left: 18px; } } .bl_spthanks { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 30px; font-size: 1rem; } @media screen and (max-width: 630px) { .bl_spthanks { font-size: 0.8125rem; } } .bl_spthanks_title { margin-bottom: 10px; font-size: 3.125rem; color: #FFE144; } @media screen and (max-width: 768px) { .bl_spthanks_title { font-size: 2.375rem; } } @media screen and (max-width: 470px) { .bl_spthanks_title { font-size: 1.75rem; } } .bl_nameBox { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px; font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", Meiryo, sans-serif; } .bl_nameBox span { padding: 10px 0; } .bl_nameBox_withSmall { display: initial; padding: 10px 0; } .bl_nameBox_withSmall span { display: inline-block; margin-left: 3px; font-size: 9px; } .bl_crowdSapporter { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: 0.875rem; } @media screen and (max-width: 630px) { .bl_crowdSapporter { font-size: 0.8125rem; } } .bl_crowdSapporter_title { margin-bottom: 7.5px; font-size: 2.375rem; color: #FFE144; } @media screen and (max-width: 768px) { .bl_crowdSapporter_title { font-size: 1.75rem; } } @media screen and (max-width: 470px) { .bl_crowdSapporter_title { font-size: 1.25rem; } } .bl_crowdSapporter span { padding: 7.5px 0; } .bl_crowdNameBox { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px; font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", Meiryo, sans-serif; } .bl_footer { position: relative; z-index: 1; margin-top: -2px; background-color: #7BADEF; } .bl_footer .bl_footer_wave { position: absolute; top: -199px; z-index: -1; min-width: 2000px; -webkit-transform: scale(1) rotate(3deg) translate(-130px, 0); transform: scale(1) rotate(3deg) translate(-130px, 0); } .bl_footerInfo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; font-family: Roboto, sans-serif; color: #fff; } .bl_footerInfo_link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 23px; -moz-column-gap: 23px; column-gap: 23px; font-size: 0.875rem; } @media screen and (max-width: 630px) { .bl_footerInfo_link { font-size: 0.75rem; } } .bl_footerInfo_copyright { font-size: 8px; } .bl_footerInfo_link a { color: #fff; } .bl_globalNavi { position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100vh; min-height: 100vh; overflow-y: auto; background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #f5f6fa), color-stop(50%, #7badef)); background: linear-gradient(to bottom, #f5f6fa 50%, #7badef 50%); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; /* アニメーション効果 */ -webkit-transform: translateY(120%); transform: translateY(120%); } .bl_globalNavi.active { z-index: 900; overflow-x: hidden; -webkit-transform: translateY(0); transform: translateY(0); /* 画面内にスライド */ } .bl_globalNavi_shape1 { position: absolute; top: -70px; left: 25%; } .bl_globalNavi_shape2 { position: absolute; top: -20px; right: 12%; } .bl_globalNavi .bl_globalNavi_wave1 { margin-top: 0px; } .bl_globalNavi .bl_globalNavi_wave2 { margin-top: -28%; } @media screen and (max-width: 768px) { .bl_globalNavi .bl_globalNavi_wave2 { margin-top: -30%; } } @media screen and (max-width: 630px) { .bl_globalNavi .bl_globalNavi_wave2 { margin-top: -37%; } } .bl_globalNavi .bl_globalNavi_wave2 img { min-width: 1285px; } .bl_globalNavi_inner { -webkit-box-sizing: content-box; box-sizing: content-box; max-width: 986px; padding: 0 68px; margin: 0 auto; } @media screen and (max-width: 768px) { .bl_globalNavi_inner { padding-top: 0%; } } .bl_globalNavi_link { position: absolute; top: 30%; left: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 77%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } @media screen and (max-width: 1025px) { .bl_globalNavi_link { top: 17%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media screen and (max-width: 630px) { .bl_globalNavi_link { top: 10%; } } .bl_globalNavi_link ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 15px; font-size: 2.3125rem; font-weight: 700; line-height: 1.5; letter-spacing: 1.5px; } @media screen and (max-width: 1025px) { .bl_globalNavi_link ul { row-gap: 13px; margin-bottom: 41px; font-size: 2.125rem; } } .bl_globalNavi_link ul li a { color: #fff; } .bl_globalNavi_wave1.active, .bl_globalNavi_wave2.active { display: block; } .bl_bubble_box { position: absolute; top: 7vh; right: -15%; z-index: 500; width: 530px; height: 530px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } @media screen and (min-width: 1800px) { .bl_bubble_box { right: -10%; } } @media screen and (max-width: 1025px) { .bl_bubble_box { right: initial; left: 72%; width: 500px; height: 500px; } } @media screen and (max-width: 1024px) and (min-height: 900px) { .bl_bubble_box { top: 3vh; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @media screen and (max-width: 768px) { .bl_bubble_box { top: 6vh; left: 50%; width: 450px; height: 450px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @media screen and (max-width: 768px) and (max-height: 749px) { .bl_bubble_box { top: 1vh; left: 50%; width: 350px; height: 350px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @media screen and (max-width: 768px) and (min-height: 750px) { .bl_bubble_box { top: 3vh; left: 50%; width: 450px; height: 450px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @media screen and (max-width: 630px) { .bl_bubble_box { top: 6vh; width: 65%; height: auto; } } @media screen and (max-width: 470px) { .bl_bubble_box { top: 6vh; width: 90%; height: auto; } } .bl_bubble { width: 530px; height: 530px; overflow: hidden; background-color: rgba(255, 255, 255, 0.5); border: 30px solid rgba(255, 255, 255, 0.1); border-radius: 50%; -webkit-transition: border-width 0.2s ease; transition: border-width 0.2s ease; } @media screen and (max-width: 1025px) { .bl_bubble { width: 500px; height: 500px; } } @media screen and (max-width: 768px) { .bl_bubble { width: 450px; height: 450px; } } @media screen and (max-width: 768px) and (max-height: 749px) { .bl_bubble { width: 100%; height: 100%; } } @media screen and (max-width: 768px) and (min-height: 750px) { .bl_bubble { width: 100%; height: 100%; } } @media screen and (max-width: 630px) { .bl_bubble { width: 100%; height: 100%; } } @media screen and (max-width: 470px) { .bl_bubble { width: 100%; height: 100%; } } .bl_bubble_img { width: 530px; height: auto; margin-top: 45px; -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 1025px) { .bl_bubble_img { width: 500px; height: auto; } } @media screen and (max-width: 768px) { .bl_bubble_img { width: 450px; height: auto; } } @media screen and (max-width: 768px) and (max-height: 749px) { .bl_bubble_img { width: 100%; height: auto; } } @media screen and (max-width: 768px) and (min-height: 750px) { .bl_bubble_img { width: 100%; height: 100%; } } @media screen and (max-width: 630px) { .bl_bubble_img { width: 100%; height: auto; } } @media screen and (max-width: 470px) { .bl_bubble_img { width: 100%; height: auto; } } .bl_bubble_img_2, .bl_bubble_img_3 { margin-top: initial; } .bl_bubble_img_3 { margin-left: 30px; } .bl_fvShape { position: absolute; top: 0; left: 0; } .bl_fvShape_1 { top: 10%; left: -15px; } @media screen and (max-width: 768px) { .bl_fvShape_1 { top: 12% !important; left: 3% !important; width: 17px !important; height: 17px !important; } } .bl_fvShape_2 { top: -60px; left: 30%; } @media screen and (max-width: 768px) { .bl_fvShape_2 { top: -52px; right: -6%; left: initial; width: 119px !important; height: 118px !important; } } .bl_fvShape_3 { top: 20%; left: 50%; } @media screen and (max-width: 768px) { .bl_fvShape_3 { top: 38%; left: 23%; } } .bl_fvShape_4 { top: -15px; left: 85%; } @media screen and (max-width: 768px) { .bl_fvShape_4 { top: initial !important; right: -15px !important; bottom: 18% !important; left: initial !important; } } .bl_fvShape_5 { top: 60%; right: 15px; left: initial; } @media screen and (max-width: 768px) { .bl_fvShape_5 { top: 45%; } } .bl_fvShape_6 { top: 60%; left: 2%; } @media screen and (max-width: 768px) { .bl_fvShape_6 { top: 70%; left: 5%; width: 15px; height: 15px; } } .bl_fvShape_7 { top: 20%; left: 1%; } .bl_fvShape_8 { top: -119px; left: 23%; } @media screen and (max-width: 768px) { .bl_fvShape_8 { top: 10%; left: -117px; } } .bl_fvShape_9 { top: 20%; left: 39%; } @media screen and (max-width: 768px) { .bl_fvShape_9 { top: -25px; right: 15%; left: initial; width: 61px !important; height: 60px !important; } } .bl_fvShape_10 { top: -25px; left: 60%; } @media screen and (max-width: 768px) { .bl_fvShape_10 { display: none; } } .bl_fvShape_11 { top: 18%; right: 2%; left: initial; } .bl_fvShape_12 { top: 38%; right: 3%; left: initial; } @media screen and (max-width: 768px) { .bl_fvShape_12 { right: 22%; } } .bl_fvShape_13 { top: 57%; left: 51%; } @media screen and (max-width: 768px) { .bl_fvShape_13 { top: 5%; width: 13px; height: 13px; } } .bl_fvShape_14 { top: 30%; left: -190px; } .bl_fvShape_15 { top: 4%; left: 15%; } @media screen and (max-width: 768px) { .bl_fvShape_15 { top: 10% !important; left: 5% !important; width: 15px !important; height: 15px !important; } } .bl_fvShape_16 { top: -15px; left: 74%; } .bl_fvShape_17 { top: 8%; left: 55%; } @media screen and (max-width: 768px) { .bl_fvShape_17 { top: 33%; } } .bl_fvShape_18 { top: 20%; right: 2%; left: initial; } @media screen and (max-width: 768px) { .bl_fvShape_18 { top: -15px !important; right: 10% !important; bottom: initial !important; left: initial !important; } } .bl_fvShape_19 { top: 40%; right: -1%; left: initial; } @media screen and (max-width: 768px) { .bl_fvShape_19 { top: 60% !important; right: 5% !important; width: 20px !important; height: 20px !important; } } @media screen and (max-width: 768px) { .bl_fvShape_20 { bottom: 23% !important; left: 5% !important; width: 18px !important; height: 18px !important; } } .bl_fvHeader { background-color: #f5f6fa; } .bl_fvTxtArea { position: absolute; top: 25%; left: 8%; z-index: 500; font-weight: 700; } @media screen and (max-width: 1024px) and (min-height: 900px) { .bl_fvTxtArea { top: 52vh; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @media screen and (max-width: 768px) { .bl_fvTxtArea { top: 57%; left: 50%; min-width: 302px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } .bl_fvTxtArea_2 { left: 10%; } @media screen and (max-width: 1024px) and (min-height: 850px) { .bl_fvTxtArea_2 { top: 52vh; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @media screen and (max-width: 768px) { .bl_fvTxtArea_2 { top: 57%; left: 50%; min-width: 302px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } .bl_fvTxtArea_3 { top: 26%; max-width: 486px; -webkit-transform: translateY(0); transform: translateY(0); } @media screen and (max-width: 1024px) and (min-height: 850px) { .bl_fvTxtArea_3 { top: 52vh; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @media screen and (max-width: 768px) { .bl_fvTxtArea_3 { top: 53%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } .bl_fvTxtArea_tagline { display: block; height: 2.5; font-size: clamp(1.563rem, 0.727rem + 1.74vw, 2.125rem); letter-spacing: 2.3; } @media screen and (max-width: 768px) { .bl_fvTxtArea_tagline { min-width: 302px; font-size: 1.375rem; } } .bl_fvTxtArea_tagline_small { font-size: 30px; } .bl_fvTxtArea_tagline_fv3Small { margin-bottom: 30px; font-size: 20px; line-height: 1.4; text-align: center; } .bl_fvTxtArea_message { display: block; font-size: clamp(2.375rem, 1.447rem + 1.93vw, 3rem); line-height: 1.73; letter-spacing: 2.3; } .bl_fvTxtArea_message strong { color: #3F679B; } @media screen and (max-width: 768px) { .bl_fvTxtArea_message { font-size: 1.9375rem; } } .bl_fvTxtArea_message_3 { font-size: 40px; } @media screen and (max-width: 768px) { .bl_fvTxtArea_message_3 { font-size: 1.9375rem; } } @media screen and (max-width: 630px) { .bl_fv_appLink { right: 15px; width: 250px; } } .bl_document { padding: 0 20px; margin-bottom: 40px; } .bl_document_inner { max-width: 946px; padding: 112px 69px; margin: 0 auto; font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", Meiryo, sans-serif; background-color: #fff; border-radius: 17px; -webkit-box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.0509803922); box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.0509803922); } @media screen and (max-width: 630px) { .bl_document_inner { padding: 69px 18px 49px; } } .bl_document_ttl { margin-bottom: 50px; font-size: 2.5rem; font-weight: bold; text-align: center; } @media screen and (max-width: 768px) { .bl_document_ttl { font-size: 1.875rem; } } @media screen and (max-width: 630px) { .bl_document_ttl { font-size: 1.375rem; } } .bl_document_txt { margin-bottom: 20px; font-size: 1.25rem; line-height: 1.8; } @media screen and (max-width: 768px) { .bl_document_txt { font-size: 1rem; } } @media screen and (max-width: 630px) { .bl_document_txt { font-size: 0.875rem; } } .bl_document_ulist { margin-bottom: 20px; font-size: 1.25rem; line-height: 1.8; } @media screen and (max-width: 768px) { .bl_document_ulist { font-size: 1rem; } } @media screen and (max-width: 630px) { .bl_document_ulist { font-size: 0.875rem; } } .bl_document_olist { margin-bottom: 20px; font-size: 1.25rem; line-height: 1.8; } @media screen and (max-width: 768px) { .bl_document_olist { font-size: 1rem; } } @media screen and (max-width: 630px) { .bl_document_olist { font-size: 0.875rem; } } .el_headerLogo { position: fixed; top: 40px; left: 40px; z-index: 1000; } @media screen and (max-width: 768px) { .el_headerLogo { top: 29px; left: 27px; } } .el_hamburger { position: fixed; top: 40px; right: 45px; z-index: 1000; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 48px; height: 48px; line-height: 1; color: #7BADEF; vertical-align: middle; cursor: pointer; background-color: #fff; border-radius: 50%; -webkit-box-shadow: 4px 16px 40px 0 rgba(30, 103, 64, 0.1607843137); box-shadow: 4px 16px 40px 0 rgba(30, 103, 64, 0.1607843137); } @media screen and (max-width: 768px) { .el_hamburger { top: 29px; right: 17px; } } .el_hamburger span { -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, -webkit-transform 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease; } .el_hamburger > span { display: block; width: 14px; height: 0.1em; background: currentcolor; border-radius: 0.1em; } .el_hamburger > span + span { margin-top: 6px; } .el_hamburger.active span:nth-child(1) { -webkit-transform: rotate(45deg) translate(-1px, -1px); transform: rotate(45deg) translate(-1px, -1px); } .el_hamburger.active span:nth-child(2) { margin-top: -6px; -webkit-transform: rotate(-45deg) translate(-2px, 2px); transform: rotate(-45deg) translate(-2px, 2px); } .el_scrollDrag { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .el_scrollDrag_character { font-size: 0.6875rem; font-weight: 700; line-height: 3.27; color: #3F679B; letter-spacing: 1px; } .el_appLink { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 41px; -moz-column-gap: 41px; column-gap: 41px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 768px) { .el_appLink { -webkit-column-gap: 15px; -moz-column-gap: 15px; column-gap: 15px; } } @media screen and (max-width: 630px) { .el_appLink { -webkit-column-gap: 8px; -moz-column-gap: 8px; column-gap: 8px; } } .el_appLink_noActive { pointer-events: none; } @media screen and (max-width: 768px) { .el_appLink_noActive { width: 119px; height: 38px; } } .el_appLink_noActive img { height: 49px; vertical-align: initial; } @media screen and (max-width: 768px) { .el_appLink_GNavi { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .el_appLink_pop { position: absolute; top: -60px; left: -10px; display: -webkit-box; display: -ms-flexbox; display: flex; display: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 183px; height: 100px; } @media screen and (max-width: 768px) { .el_appLink_pop { top: -48px; left: -14px; width: 152px; } } .el_appLink_fv { position: absolute; bottom: 3%; left: 5%; z-index: 800; } @media screen and (max-width: 768px) { .el_appLink_noActive_GNavi { width: 235px; height: 76px; margin-top: 10px; } .el_appLink_noActive_GNavi img { width: 100%; height: auto; } } .el_appLink_pop_GNavi img { -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 768px) { .el_appLink_pop_GNavi { top: -88px; left: -18px; width: 280px; height: 150px; } } .el_appLink_pop.active { display: block; } .el_appleLink_wrapper { position: relative; display: inline-block; width: 163px; height: 55px; } @media screen and (max-width: 768px) { .el_appleLink_wrapper { width: 120px; height: 40.5px; } } @media screen and (max-width: 768px) { .el_appleLink_wrapper_GNavi { width: 238px; height: 80px; } } .el_appleLink_wrapper a { display: block; width: 100%; height: 100%; } .el_appleLink_wrapper img { display: block; width: 100%; height: auto; } .el_snsLink { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } .el_snsLink a img { vertical-align: middle; } .el_snsLink_Corp { width: 200px; font-size: 30px; line-height: 2; color: #424242 !important; text-align: center; background: #D9D9D9; border-radius: 14px; } @media screen and (max-width: 768px) { .el_snsLink_Corp { width: 150px; font-size: 20px; line-height: 1.5; } } .el_wave3_WhiteOp50 { fill: rgba(255, 255, 255, 0.5); stroke: rgba(255, 255, 255, 0.5); stroke-miterlimit: 10; } .el_waveStatic img { width: 100%; height: auto; } @media screen and (max-width: 768px) { .el_waveStatic img { -o-object-fit: cover; object-fit: cover; } } .el_lv2Heading { position: relative; font-size: 3.125rem; font-weight: 600; line-height: 1.75; } @media screen and (max-width: 768px) { .el_lv2Heading { font-size: 2.375rem; } } @media screen and (max-width: 470px) { .el_lv2Heading { font-size: 1.75rem; } } .el_lv2Heading_white { top: 70px; position: relative; color: #fff; } .el_lv2Heading_white::before { position: absolute; top: -40px; left: 0; width: 17px; height: 22px; content: url("../img/title_icon_white.svg"); } @media screen and (max-width: 768px) { .el_lv2Heading_white::before { top: -5px; width: 14px; height: 18px; content: ""; background-image: url("../img/title_icon_white.svg"); background-repeat: no-repeat; background-size: cover; } } @media screen and (max-width: 470px) { .el_lv2Heading_white::before { top: -24px; content: url("../img/title_icon_white_s.svg"); background-image: none; } } .el_lv2Heading_white_movie { top: 0px; position: relative; color: #fff; } .el_lv2Heading_white_movie::before { position: absolute; top: -40px; left: 0; width: 17px; height: 22px; content: url("../img/title_icon_white.svg"); } @media screen and (max-width: 768px) { .el_lv2Heading_white_movie::before { top: -5px; width: 14px; height: 18px; content: ""; background-image: url("../img/title_icon_white.svg"); background-repeat: no-repeat; background-size: cover; } } @media screen and (max-width: 470px) { .el_lv2Heading_white_movie::before { top: -24px; content: url("../img/title_icon_white_s.svg"); background-image: none; } } .el_lv2Heading_LB { position: relative; color: #D2E6FF; } .el_lv2Heading_LB::before { position: absolute; top: -40px; left: 0; width: 17px; height: 22px; content: url("../img/title_icon_LB.svg"); } @media screen and (max-width: 768px) { .el_lv2Heading_LB::before { top: -28px; content: url("../img/title_icon_LB_s.svg"); } } @media screen and (max-width: 470px) { .el_lv2Heading_LB::before { top: -22px; content: url("../img/title_icon_LB_s.svg"); } } .el_lv2Heading_CB { position: relative; color: #D2E6FF; } .el_lv2Heading_CB::before { position: absolute; top: -40px; left: 0; width: 17px; height: 22px; content: url("../img/title_icon_CB.svg"); } @media screen and (max-width: 768px) { .el_lv2Heading_CB::before { top: -28px; content: url("../img/title_icon_CB_s.svg"); } } @media screen and (max-width: 470px) { .el_lv2Heading_CB::before { top: -22px; } } .el_fluidShapeMiddle { width: 248px; height: 246px; -webkit-animation: fluidanimationM 30s ease 0s infinite; animation: fluidanimationM 30s ease 0s infinite; } @media screen and (max-width: 768px) { .el_fluidShapeMiddle { width: 161px; height: 160px; } } .el_fluidShapeMiddle2 { width: 290px; height: 263px; -webkit-animation: fluidanimationM2 30s ease 0s infinite; animation: fluidanimationM2 30s ease 0s infinite; } @media screen and (max-width: 768px) { .el_fluidShapeMiddle2 { width: 145.5px; height: 132px; } } .el_fluidShapeMiddle3 { width: 197px; height: 167px; -webkit-animation: fluidanimationM 30s ease 0s infinite; animation: fluidanimationM 30s ease 0s infinite; } @media screen and (max-width: 768px) { .el_fluidShapeMiddle3 { width: 94px; height: 79px; } } .el_fluidShapeLarge { width: 308px; height: 306px; -webkit-animation: fluidanimationL 30s ease 0s infinite; animation: fluidanimationL 30s ease 0s infinite; } @media screen and (max-width: 768px) { .el_fluidShapeLarge { width: 200px; height: 198px; } } .el_fluidShapeSmall { width: 153px; height: 152px; -webkit-animation: fluidanimationS 30s ease 0s infinite; animation: fluidanimationS 30s ease 0s infinite; } @media screen and (max-width: 768px) { .el_fluidShapeSmall { width: 76px; height: 76px; } } .el_fluidShapeSmall2 { width: 39px; height: 40px; -webkit-animation: fluidanimationS 30s ease 0s infinite; animation: fluidanimationS 30s ease 0s infinite; } @media screen and (max-width: 768px) { .el_fluidShapeSmall2 { top: initial; bottom: 63px; left: -24%; z-index: 1; } } .el_fluidShapeSmall3 { width: 56px; height: 58px; -webkit-animation: fluidanimationS 30s ease 0s infinite; animation: fluidanimationS 30s ease 0s infinite; } .el_fluidShapeSmall4 { width: 30px; height: 31px; -webkit-animation: fluidanimationS 30s ease 0s infinite; animation: fluidanimationS 30s ease 0s infinite; } .el_fluidShapeSmall5 { width: 109px; height: 108px; -webkit-animation: fluidanimationS 30s ease 0s infinite; animation: fluidanimationS 30s ease 0s infinite; } .el_btn { position: relative; padding-right: 2em; padding-left: 1.38em; font-size: 0.8125rem; font-weight: 700; color: #fff; cursor: pointer; } .el_btn::after { position: absolute; top: 60%; right: 0.83em; font-family: "Font Awesome 5 Free"; font-weight: 900; content: url("../../assets/img/arrow.svg"); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .el_footerLogo { text-align: center; } .el_fvIllust { position: absolute; top: 38%; right: 19%; z-index: -1; } @media screen and (max-width: 1024px) and (min-height: 800px) { .el_fvIllust { right: 0; } } @media screen and (max-width: 768px) { .el_fvIllust { right: -28px; width: 132px; height: 113px; } } .el_fvIllust_2 { top: 34%; right: initial; left: 39%; z-index: 501; } @media screen and (max-width: 1024px) and (min-height: 800px) { .el_fvIllust_2 { top: 58%; left: 65%; } } @media screen and (max-width: 768px) { .el_fvIllust_2 { top: 63%; left: 62%; width: 58px; height: 95px; } } .el_fvIllust_3 { top: 24%; left: 41%; z-index: 2; } @media screen and (max-width: 1024px) and (min-height: 800px) { .el_fvIllust_3 { top: 71%; left: 63%; } } @media screen and (max-width: 768px) { .el_fvIllust_3 { top: 63%; right: initial; left: 62%; width: 124px; height: 64px; } } @media screen and (max-width: 470px) { .el_fvIllust_3 { right: 3%; } } .el_spScroll { position: absolute; bottom: 8%; left: 47%; height: 50px; } .el_spScroll span { position: absolute; top: -15px; left: -15px; font-size: 0.8125rem; font-weight: 700; color: #5999e8; letter-spacing: 0.05em; } .el_spScroll span::before { position: absolute; top: 0; left: 50%; width: 2px; height: 30px; content: ""; background: #5999e8; opacity: 0; -webkit-animation: scrollMove 1.4s ease-in-out infinite; animation: scrollMove 1.4s ease-in-out infinite; } @-webkit-keyframes scrollMove { 0% { top: -60px; height: 0; opacity: 0; } 30% { height: 30px; opacity: 1; } 100% { top: -15px; height: 0; opacity: 0; } } @keyframes scrollMove { 0% { top: -60px; height: 0; opacity: 0; } 30% { height: 30px; opacity: 1; } 100% { top: -15px; height: 0; opacity: 0; } }/*# sourceMappingURL=style.css.map */ .news-container { background-color: #ffffff; border-radius: 20px; padding: 20px; max-height: 15%; margin: 0 auto; text-align: left; } .news-container-main { background-color: #ffffff; border-radius: 20px; padding: 30px; max-height: 550px; max-width: 80%; margin: 0 auto; text-align: left; } @media screen and (max-width: 768px) { .news-container-main { padding: 20px; max-width: 98%; max-height: 580px; } } @media screen and (max-width: 420px) { .news-container-main { padding: 5px; max-width: 98%; max-height: 680px; } } .news-title-main { font-size: 24px; font-weight: bold; margin-bottom: 0px; color: #505050; } .news-list { list-style: none; padding: 0; margin: 0; } .news-item { display: flex; align-items: center; border-bottom: 1px solid #ccc; padding: 8px 0; } .news-item:last-child { border-bottom: none; } .news-image { width: 150px; height: 80px; border-radius: 10px; margin-right: 15px; } .news-content-main { flex: 1; padding: 20px; } .news-date { font-size: 14px; color: #666; margin-right: 10px; } .news-tag { font-size: 12px; color: #fff; background-color: #4a90e2; padding: 2px 8px; border-radius: 5px; margin-right: 10px; } .news-description { font-size: 16px; color: #333; margin: 3px 0 0; } .news-pagination { display: flex; justify-content: center; align-items: center; margin-top: 10px; } .page-number, .page-next { font-size: 14px; color: #121315; margin: 0 5px; cursor: pointer; } .page-number.active { text-decoration: underline; font-weight: bold; color: #121315; } .bl_news { position: relative; padding: 100px; margin-top: 0px; background-color: #7BADEF; } @media screen and (max-width: 768px) { .bl_news { padding: 10px; } } .bl_news_about { position: relative; padding: 100px; margin-top: 0px; background-color: rgb(246, 244, 238); } @media screen and (max-width: 768px) { .bl_news_about { padding: 20px; padding-top: 95px; padding-bottom: 75px; } } /* General styles for the news article */ .news-article { padding: 20px; padding-top: 60px; background-color: rgb(246, 244, 238); } .news-title { font-size: 24px; font-weight: bold; color: #505050; margin-bottom: 5px; padding: 20px; padding-left: 10%; } .news-content { display: block; overflow: hidden; padding: 50px; background-color: #FFFFFF; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-sizing: border-box; max-width: 80%; margin: 0 auto; } .news-content p { margin: 0 0 20px; padding: 0; font-size: 16px; line-height: 1.8; color: #505050; text-align: left; box-sizing: border-box; max-width: 100%; line-break: anywhere; } .news-content img { max-width: 100%; height: auto; display: block; margin: 20px auto; border-radius: 8px; } .news-date { font-size: 14px; color: #7BADEF; display: block; margin-bottom: 4px; } .news-tag-1 { font-size: 12px; color: #FFFFFF; background-color: #7badef; padding: 2px 8px; border-radius: 4px; display: inline-block; margin-bottom: 16px; } .news-tag-2 { font-size: 12px; color: #FFFFFF; background-color: #004380; padding: 2px 5px; border-radius: 4px; display: inline-block; margin-bottom: 16px; } .news-tag-3 { font-size: 12px; color: #FFFFFF; background-color: #65686b; padding: 2px 8px; border-radius: 4px; display: inline-block; margin-bottom: 16px; } .news-heading { font-size: 20px; font-weight: bold; color: #505050; margin-bottom: 12px; text-align: left; } .news-image { text-align: center; margin: 20px 0; } /* Responsive styles */ @media screen and (max-width: 768px) { .news-content-main { padding: 20px; } .news-heading { font-size: 18px; } .news-paragraph { font-size: 14px; } } @media screen and (max-width: 480px) { .news-content-main { padding: 10px; } .news-heading { font-size: 16px; } .news-paragraph { font-size: 14px; } } .error-message { text-align: center; padding: 2rem; } .error-message h3 { color: #333; margin-bottom: 1rem; } .back-to-news { display: inline-block; margin-top: 1rem; padding: 0.5rem 1rem; background-color: #f6f4ee; color: #333; text-decoration: none; border-radius: 4px; transition: background-color 0.3s ease; } .back-to-news:hover { background-color: #e6e4de; }