@charset "utf-8"; body { font-family: 'Noto Sans JP', sans-serif; font-size: 12px; color: #292724; line-height: 1.5; } @font-face { font-family: 'Noto Sans JP'; src: url("../fonts/NotoSansJP-Bold.woff2") format("woff2"); font-weight: 700; } @font-face { font-family: 'Noto Sans JP'; src: url("../fonts/NotoSansJP-Black.woff2") format("woff2"); font-weight: 900; } /* -----reset.css----- */ /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::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; } /* -----reset.css終わり----- */ /* 共通パーツCSS */ .e-bo { overflow: hidden; line-height: 1; color: #292724; } img { max-width: 100%; } .e-bo__section { position: relative; padding: 120px 0; z-index: 0; } .e-bo__difference, .e-bo__select, .e-bo__news { background-color: #F4F2F0; } .e-bo__entertainment { background-color: #FDE8E0; } .e-bo__section__wrapper { max-width: 1450px; margin: 0 auto; padding: 0 80px; } .e-bo__title { margin-bottom: 60px; text-align: center; } .e-bo__title h2 { margin-bottom: 40px; color: #FA6A00; font-size: 68px; font-weight: 900; line-height: 1.456; } .e-bo__title p { font-size: 24px; font-weight: 400; line-height: 1.563; } .e-bo__change { padding-top: 131px; padding-bottom: 0; } .e-bo__change .e-bo__title { margin-bottom: 44px; } .e-bo__change .e-bo__title h2 { margin-bottom: 60px; } .e-bo__change .e-bo__title h2 img { width: 80.8%; } .e-bo__change .e-bo__title p { font-size: 30px; font-weight: 700; line-height: 2.67; } .e-bo__change .e-bo__change__bg { padding-top: 44.0104167%; width: 100%; background-image: url(../img/e-bo/e-bo_change_bg-pc.jpg); background-repeat: no-repeat; background-size: 100% 100%; } .e-bo__flex__items { display: flex; justify-content: space-between; align-items: center; flex-direction: row-reverse; } .e-bo__flex__items:not(:last-child) { margin-bottom: 58px; } .e-bo__fv picture source, .e-bo__fv picture img { width: 100%; max-width: none; } .e-bo__fv h1 { background-color: #F96A02; } .e-bo__fv__bottom { margin-top: -1px; padding-top: 52px; padding-bottom: 120px; background-color: #F96A02; } .e-bo__fv__bottom .e-bo__fv__wrapper { max-width: 1450px; margin: 0 auto; padding: 0 80px; } .e-bo__fv__bottom .e-bo__title { margin-bottom: 78px; } .e-bo__fv__bottom .e-bo__title h2 { margin-bottom: 0; font-size: 71px; color: #ffffff; } .e-bo__fv__bottom .e-bo__title .e-bo__title__br { display: none; } .e-bo__fv__bottom .e-bo__title .e-bo__title__txt-under-line { font-size: 50px; text-decoration: none; position: relative; display: inline; z-index: 1; line-height: 1.1; } .e-bo__fv__bottom .e-bo__title .e-bo__title__txt-under-line::after { content: ""; position: absolute; bottom: 2px; left: 26px; width: 92%; border-bottom: 10px solid #FFFFFF; border-radius: 5px; z-index: -1; } .e-bo__fv__bottom__img { display: flex; justify-content: center; } .e-bo__fv__bottom__img a{ max-width: 470px; display: block; } .e-bo__select .e-bo__flex__items:not(:last-child) { margin-bottom: 63px; } .e-bo__select .e-bo__flex__items:first-child { margin-bottom: 58px; } .e-bo__flex__items:nth-child(2n) { flex-direction: row; } .e-bo__select .e-bo__flex__items:nth-child(2n) { flex-direction: row-reverse; margin-bottom: 48px; } .e-bo__function .e-bo__section__wrapper { max-width: 1200px; } .e-bo__function .e-bo__flex__items:last-child { margin-bottom: 108px; } .e-bo__flex__items__img { width: 49%; } .e-bo__flex__items__txt { width: 53%; } .e-bo__flex__items__txt h3 { width: 100%; margin-bottom: 40px; padding: 12px 16px; background: #FA6A00; color: #fff; font-size: 24px; font-weight: 700; } .e-bo__flex__items__txt p { font-size: 20px; font-weight: 500; line-height: 1.525; } .e-bo__experience { position: relative; padding-top: 0; margin-top: 123px; } .e-bo__experience::before { content: ""; position: absolute; top: -17px; left: 100px; width: 363.04px; height: 100%; background-image: url(../img/e-bo/e-bo_experience_bg.svg); background-repeat: no-repeat; background-size: contain; z-index: -10; } .e-bo__experience .e-bo__section__wrapper { max-width: 1180px; padding: 0 68px; } .e-bo__experience .e-bo__title { text-align: left; margin-bottom: 75px; } .e-bo__experience .e-bo__title h2 { margin-bottom: 36px; } .e-bo__experience .e-bo__title p { line-height: 1.7; } .e-bo__experience .e-bo__flex__items { margin-bottom: 0; padding-right: 95px; padding-left: 60px; gap: 20px; } .e-bo__experience .e-bo__flex__items__txt { width: 42.65%; } .e-bo__experience .e-bo__flex__items__txt h3 { margin-top: 3px; margin-bottom: 26px; padding: 0; background-color: unset; color: #000; font-size: 24px; font-weight: 900; } .e-bo__experience .e-bo__flex__items__txt h3 .e-bo__flex__items__title__num { display: block; margin-bottom: 19px; padding: 0; color: #FA6A00; font-size: 68px; font-weight: 900; line-height: 1.3383; } .e-bo__experience .e-bo__flex__items__txt h3 .e-bo__flex__items__title__num::after { content: ""; display: block; width: 37px; height: 8px; margin-top: 12px; background-color: #FA6A00; border-radius: 15px; } .e-bo__experience .e-bo__flex__items__txt h3 .e-bo__flex__items__lead { line-height: 1.6; padding-left: 5px; } .e-bo__experience .e-bo__flex__items__img { width: 49.383%; } .e-bo__select .e-bo__title, .e-bo__app .e-bo__title { margin-bottom: 40px; } .e-bo__title .e-bo__title__txt-block { display: inline-block; margin-bottom: 12px; padding: 8px 14px; background: #FA6A00; color: #fff; font-size: 28px; font-weight: 900; line-height: 1.3215; } .e-bo__title h2 span { font-size: 96px; font-weight: 900; } .e-bo__title .e-bo__title__txt-under-line { position: relative; font-size: 28px; font-weight: 900; line-height: 1.429; text-decoration: underline; text-decoration-color: #FA6A00; text-underline-offset: -0.08em; text-decoration-thickness: 6px; } .e-bo__title__txt-under-line:has(+ .e-bo__title__txt-attention) { margin-bottom: 4px; } .e-bo__title .e-bo__title__txt-attention { font-size: 16px; line-height: 1.5; } .e-bo__difference { padding: 117px 0 100px; } .e-bo__difference .e-bo__section__wrapper { max-width: 1202px; } .e-bo__difference .e-bo__title { margin-bottom: 58px; text-align: left; } .e-bo__difference .e-bo__title h2 { margin-bottom: 38px; } .e-bo__difference .e-bo__title p { line-height: 1.65; } .e-bo__difference__container { text-align: center; } .e-bo__difference__flex { display: flex; gap: 1.92%; font-weight: 900; } .e-bo__difference__flex--head { justify-content: flex-end; margin-bottom: 11px; font-size: 26px; line-height: 1.462; } .e-bo__difference__flex__items { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; width: 42.50%; } .e-bo__difference__flex__items--label { width: 11.15%; } .e-bo__difference__flex--head .e-bo__difference__flex__items { padding-top: 10.9%; background-image: url(../img/e-bo/e-bo_difference_table_balloon.svg); background-repeat: no-repeat; background-size: 100% 100%; color: #fff; } .e-bo__difference__flex--head .e-bo__difference__flex__items--normal { background-image: url(../img/e-bo/e-bo_difference_table_balloon_normal.svg); } .e-bo__difference__flex--body .e-bo__difference__flex__items { position: relative; padding: 40px 20px; background-color: #FFDCD0; color: #FA6A00; font-size: 24px; line-height: 1.63; } .e-bo__difference__flex--body .e-bo__difference__flex__items::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: calc(100% - 112px); border-bottom: 1px solid #707070; } .e-bo__difference__flex--body:last-child .e-bo__difference__flex__items::after { content:unset } .e-bo__difference__flex--body .e-bo__difference__flex__items--label { padding: 70px 10px; background-color: #B1B1B1; color: #fff; font-size: 26px; line-height: 1.462; } .e-bo__difference__flex--body .e-bo__difference__flex__items--label::after { width: calc(100% - 44px); border-bottom: 1px solid #fff; } .e-bo__difference__flex--body .e-bo__difference__flex__items--normal { background-color: #DBDBDB; color: #000; font-weight: 700; } .e-bo__difference .e-bo__difference__recochoku { margin-top: 76px; text-align: center; font-size: 25px; font-weight: 900; letter-spacing: -0.045rem; } .e-bo__difference .e-bo__difference__recochoku span { color: #D2006E; } .e-bo__entertainment { padding: 86px 0 97px; } .e-bo__entertainment .e-bo__section__wrapper { max-width: 1081px; } .e-bo__entertainment .e-bo__title { margin-bottom: 79px } .e-bo__entertainment .e-bo__title h2 { margin-bottom: 18px } .e-bo__entertainment .e-bo__title__txt-under-line { text-decoration: none; position: relative; display: inline-block; } .e-bo__entertainment .e-bo__title__txt-under-line::after { content: ""; position: absolute; bottom: 2.7px; left: 0; width: 98%; border-bottom: 6px solid #FA6A00; z-index: -10; } .e-bo__entertainment .e-bo__flex__items { gap: 41px; flex-direction: row; align-items: flex-start; } .e-bo__entertainment .e-bo__flex__items:first-child { margin-bottom: 77px; } .e-bo__entertainment .e-bo__flex__items .e-bo__flex__items__txt { width: 53.8%; max-width: 480px; } .e-bo__entertainment .e-bo__flex__items__txt h3 { padding: 10px 10px 9px 15px; } .e-bo__entertainment .e-bo__flex__items:first-child h3 { margin-bottom: 24px; } .e-bo__entertainment .e-bo__flex__items__txt span { font-size: 16px; } .e-bo__entertainment .e-bo__entertainment__detail { margin-top: 20px; font-size: 20px; } .e-bo__entertainment .e-bo__entertainment__detail-sub { font-size: 16px; } .e-bo__entertainment .e-bo__entertainment__button { margin-top: 30px; display: flex; } .e-bo__entertainment .e-bo__flex__items:nth-child(2) .e-bo__entertainment__button { margin-top: 74px; } .e-bo__entertainment .e-bo__entertainment__button a { background-color: #ffffff; color: #F96A02; border-radius: 23px; padding: 16px 20px 14px 26px; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 700; } .e-bo__entertainment__button span { background: url(../img/icon/e-bo_entertainment_arrow-right.svg); background-size: contain; background-repeat: no-repeat; background-position: center; display: inline-block; width: 6.57px; height: 12.19px; } .e-bo__entertainment .e-bo__flex__items__img { width: 43.43%; max-width: 400px; position: relative; } .e-bo__entertainment .e-bo__flex__items__img::after { position: absolute; content: ""; width: 102.5%; height: 103.75%; background-color: #FA6A00; opacity: 0.09; top: 7px; right: -19px; z-index: -1; } .e-bo__function { padding: 121px 0 120px; } .e-bo__function::after { content: ""; position: absolute; top: 49.3%; right: 100px; transform: translateY(-50%); width: 388.8px; height: 1041.81px; background-image: url(../img/e-bo/e-bo_function_bg.svg); background-repeat: no-repeat; background-size: contain; z-index: -10; } .e-bo__function .e-bo__section__wrapper{ max-width: 1081px; } .e-bo__function .e-bo__title { margin-bottom: 36px; } .e-bo__function .e-bo__title h2 { margin-bottom: 47px; padding-left: 5px; font-size: 56px; line-height: 0.8; } .e-bo__function .e-bo__title h2 span { padding-right: 5px; } .e-bo__function .e-bo__flex__items__txt { padding-top: 12px; width: 52.2%; } .e-bo__function .e-bo__flex__items__img { width: 46%; } .e-bo__function__expectation__wrapper { position: relative; padding: 15px 24px; outline: 3px solid #FA6A00;; text-align: center; background: url(../img/e-bo/e-bo_paws.webp); background-repeat: no-repeat; background-size: 12%; background-position: center; } .e-bo__function__expectation__wrapper::after { position: absolute; top: 53.5%; transform: translateY(-50%); right: 3.6%; content: ""; background: url(../img/e-bo/e-bo_cat.svg); width: 8vw; max-width: 95px; height: 8vw; max-width: 95px; background-size: contain; background-repeat: no-repeat; background-position: center; } .e-bo__function .e-bo__flex__items__txt p { padding-right: 53px; } .e-bo__function__expectation__strong-txt { position: relative; display: inline-block; padding-left: 75px; } .e-bo__function__expectation__strong-txt h3 { margin-bottom: 5px; color: #FA6A00; font-size: 40px; font-weight: 900; line-height: 1.45; } .e-bo__function__expectation__strong-txt p { position: absolute; left: -20px; bottom: 7px; display: flex; justify-content: center; align-items: center; width: 80px; height: 80px; background: #FA6A00; color: #fff; font-size: 24px; font-weight: 900; border-radius: 50%; } .e-bo__function__expectation__strong-txt p span { font-size: 18px; display: flex; align-items: flex-end; height: 24px; } .e-bo__function__expectation__description { color: #FA6A00; font-size: 20px; line-height: 1.45; } .e-bo__select { padding: 127px 0 104px; } .e-bo__select .e-bo__section__wrapper { max-width: 1080px; } .e-bo__select .e-bo__title { margin-bottom: 14px; } .e-bo__select .e-bo__title .e-bo__title__txt-block { margin-bottom: 35px; padding: 6px 28px 10px; } .e-bo__select .e-bo__title h2 { margin-bottom: 35px; line-height: 1.1912; font-size: 56px; } .e-bo__select .e-bo__title .e-bo__title__txt-under-line::after { width: 98%; } .e-bo__select .e-bo__flex__items__txt p { padding-right: 53px; } .e-bo__app .e-bo__title { margin-bottom: 50px; } .e-bo__app .e-bo__title h2 { position: relative; display: inline-block; margin-bottom: 20px; color: #000; font-size: 40px; } .e-bo__app .e-bo__title h2::after { content: ""; position: absolute; bottom: 6px; left: 0; width: 100%; border-bottom: 10px solid #FA6A00; z-index: -10; } .e-bo__title__txt-arrow { position: relative; font-size: 24px; font-weight: 800; } .e-bo__title__txt-arrow::after { position: absolute; top: 50%; transform: translateY(-50%); content: ""; width: 24px; height: 24px; margin-left: 4px; background: url(../img/icon/e-bo_arrow.svg); background-position: center; background-size: contain; background-repeat: no-repeat; } .e-bo__app .e-bo__section__wrapper { max-width: 1080px; } .e-bo__app .e-bo__title .e-bo__title__txt-arrow { font-weight: 900; } .e-bo__app__block { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 127px; } .e-bo__app__block .e-bo__app__block__capcha { width: 41%; } .e-bo__app__block .e-bo__app__block__qr { width: 53%; } .e-bo__app__block__link { text-align: center; } .e-bo__app__block__link img { height: 44px; text-align: center; } .e-bo__app__block__qr { display: flex; } .e-bo__app__block__qr > div { width: 44%; } .e-bo__app__block__qr__items { margin-bottom: 16px; } .e-bo__app__block__capcha { position: relative; } .e-bo__app__under-txt { padding-right: 50px; text-align: center; } .e-bo__app__under-txt p { position: relative; display: inline-block; padding: 16px 12px 16px 22px; background: #0982C8; color: #fff; font-size: 28px; font-weight: 700; } .e-bo__app__under-txt p::after { position: absolute; left: -78px; top: -43px; content: ""; width: 98px; height: 98px; background: url(../img/e-bo/e-bo_app_speech.svg); background-size: contain; background-position: center; background-repeat: no-repeat; } .e-bo__app__under-txt span { color: #FFE55F; } .e-bo__serch { background: #FA6A00; color: #fff; text-align: center; margin: 0; padding: 33px 0 40px; } .e-bo__serch__title { margin-bottom: 32px; font-size: 56px; font-weight: 900; } .e-bo__serch__item__sub-txt { margin-bottom: 12px; } .e-bo__serch__item__sub-txt { font-size: 22px; font-weight: 800; } .e-bo__serch__item__link { margin-bottom: 24px; padding: 16px 32px; display: inline-block; border-radius: 40px; background: #FFF; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); color: #FA6A00; font-size: 28px; font-weight: 800; } .e-bo__serch__item__link span img { vertical-align: middle; } /* ▼▼ お知らせ ▼▼ ----------------------------------------------*/ .e-bo__news { background: #F4F2F0; } .e-bo__news .e-bo__section__wrapper { max-width: 1081px; } .e-bo__news .e-bo__title h2 { margin-bottom: 80px; } .e-bo__news__item { display: flex; flex-direction: column; margin-bottom: 60px; } .e-bo__news__text { display: flex; gap: 18px; border-bottom: 1px solid #707070; padding-bottom: 16px; margin-bottom: 16px; font-size: 16px; line-height: 1.4; } .e-bo__news__text p { display: flex; align-items: center; gap: 19px; } .e-bo__news__text a { display: flex; align-items: center; } .e-bo__news__text:last-child { margin-bottom: 0; } .e-bo__news__item a:hover { text-decoration: underline; } .e-bo__news__button { display: flex; justify-content: center; align-items: center; } .e-bo__news__button a { background: #FA6A00; color: #fff; border-radius: 24px; padding: 16px 40px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 700; } .e-bo__news__button a:hover { text-decoration: none; opacity: 0.8; } .e-bo__news__button span { background: url(../img/icon/e-bo_news_arrow-right.svg); background-size: contain; background-repeat: no-repeat; background-position: center; display: inline-block; width: 6.57px; height: 12.19px; } /* ---- お知らせ共通カテゴリーラベル ---- */ .e-bo__news__label { color: #ffffff; width: 80px; text-align: center; white-space: nowrap; font-size : 12px; padding: 2px 4px; } /*アップデート*/ .e-bo__news__label.update { background: #0982C8; } /*イベント*/ .e-bo__news__label.event { background: #FAB700; } /*メンテナンス*/ .e-bo__news__label.maintenance { background: #FC7100; } /*重要*/ .e-bo__news__label.campaign { background: #E7212A; } /*その他*/ .e-bo__news__label.other { background: #777777; } /* ▲▲ お知らせ ▲▲ ----------------------------------------------*/ @media screen and (min-width: 768px) { .hidden-pc { display: none !important; } .e-bo__experience .e-bo__flex__items:nth-child(2n) { padding-right: 60px; padding-left: 90px; } .e-bo__function__expectation__description { width: 71%; margin: 0 auto; color: #000; font-size: 14px; line-height: 1.572; } } @media screen and (max-width: 1084px) { .e-bo__app__block__capcha::after { width: 170px; left: -5%; } } @media screen and (max-width: 988px) { .e-bo__app__block__capcha::after { width: 150px; left: -3%; } } @media screen and (max-width: 976px) { .e-bo__fv__txt__sub { line-height: 1.4; } } @media screen and (min-width: 768px) and (max-width: 1160px) { .e-bo__fv__bottom .e-bo__title .e-bo__title__txt-under-line { display: inline-flex; flex-direction: column; } .e-bo__fv__bottom .e-bo__title .e-bo__title__txt-under-line::after { border: none; } .e-bo__fv .e-bo__fv__bottom .e-bo__fv__line { display: inline-block; position: relative; } .e-bo__fv .e-bo__fv__bottom .e-bo__fv__line::after { content: ""; position: absolute; bottom: -3px; left: 47%; transform: translateX(-50%); width: 92%; border-bottom: 10px solid #FFFFFF; border-radius: 5px; z-index: -1; } .e-bo__fv .e-bo__fv__bottom .e-bo__fv__line:nth-of-type(2):after { content: ""; position: absolute; bottom: -3px; left: 49%; width: 63%; border-bottom: 10px solid #FFFFFF; border-radius: 5px; z-index: -1; } } @media screen and (min-width: 768px) and (max-width: 896px) { .e-bo__entertainment .e-bo__title__txt-under-line::after { border: none; } .e-bo__entertainment .e-bo__title__txt-under-line .e-bo__entertainment__br { display: inline-block; position: relative; } .e-bo__entertainment .e-bo__title__txt-under-line .e-bo__entertainment__br::after { content: ""; position: absolute; bottom: 2.7px; left: 0; width: 97%; border-bottom: 6px solid #FA6A00; z-index: -10; } } @media screen and (max-width: 860px) { .e-bo__function__expectation__wrapper::after { right: 2px; } .e-bo__app__block__capcha::after { width: 130px; left: -3%; } } @media screen and (min-width: 768px) and (max-width: 817px) { .e-bo__function__expectation__wrapper::after { right: 2%; bottom: 0; transform: translateY(0px); } } @media screen and (max-width: 767.9px) { .hidden-sp { display: none !important; } .e-bo__section { padding: 38px 0 40px; text-align: left; } .e-bo__section > div { padding: 0; } .e-bo__section .e-bo__section__wrapper { max-width: 100%; padding: 0 24px; } .e-bo__title { margin-bottom: 40px; text-align: left; } .e-bo__section .e-bo__title p { font-size: 15px; } .e-bo__section .e-bo__title p { font-size: 15px; font-weight: 400; } .e-bo__experience .e-bo__title p, .e-bo__difference .e-bo__title p { font-size: 18px; line-height: 1.741; } .e-bo__app .e-bo__title { margin-bottom: 40px; } .e-bo__title__txt-block { margin-bottom: 10px; font-size: 22px; line-height: 0.7275; } .e-bo__section .e-bo__title h2 { margin-bottom: 40px; font-size: 35px; line-height: 1.486; } .e-bo__title h2 span { font-size: 48px; } .e-bo__section .e-bo__title .e-bo__title__txt-block { display: inline-block; margin-bottom: 10px; padding: 6px 7px 6px; background: #FA6A00; color: #fff; font-size: 22px; font-weight: 900; line-height: 1.273; } .e-bo__fv__txt { width: 100%; bottom: 1.5%; } .e-bo__fv__txt__sub { margin-bottom: 0; font-size: clamp(0px, 30 / 750 * 100vw, 30px); line-height: 1.5; } .e-bo__fv__txt__attention { font-size: 12px; font-size: clamp(0px, 24 / 750 * 100vw, 24px); text-align: right; padding-right: 12px; } .e-bo__fv__bottom { padding-top: 20px; padding-bottom: 41px; } .e-bo__fv__bottom .e-bo__fv__wrapper { padding: 0 24px; } .e-bo__fv__bottom .e-bo__title { margin-bottom: 34px; text-align: center; } .e-bo__fv__bottom .e-bo__title .e-bo__title__br { display: block; } .e-bo__fv__bottom .e-bo__title h2 { font-size: 23px; } .e-bo__fv__bottom .e-bo__title .e-bo__title__txt-under-line { font-size: 16px; } .e-bo__fv__bottom .e-bo__title .e-bo__title__txt-under-line::after { left: 6px; width: 98%; border-bottom: 4px solid #FFFFFF; border-radius: 2px; } .e-bo__section .e-bo__title .e-bo__title__txt-under-line { position: relative; display: inline-block; font-size: 20px; font-weight: 900; line-height: 1.35; text-decoration: none; } .e-bo__title .e-bo__title__txt-under-line::after { content: ""; position: absolute; bottom: 1px; left: 0; width: 100%; border-bottom: 6px solid #FA6A00; z-index: -10; } .e-bo__title .e-bo__title__txt-under-line--short::after { width: 96%; } .e-bo__flex__items:not(:last-child) { margin-bottom: 38px; } .e-bo__change { padding-top: 30px; padding-bottom: 0; } .e-bo__change .e-bo__title { margin-bottom: 37px; } .e-bo__change .e-bo__title h2 { margin-bottom: 35.5px; } .e-bo__change .e-bo__title h2 img { width: 100%; } .e-bo__change .e-bo__title p { font-size: 16px; font-weight: 700; line-height: 2.24; } .e-bo__change .e-bo__change__bg { padding-top: 201.0666666666667%; background-image: url(../img/e-bo/e-bo_change_bg-sp.jpg); } .e-bo__experience::before { top: 48.7%; left: 7px; transform: translateY(-50%); width: 182.66px; height: 1055.54px; background-image: url(../img/e-bo/e-bo_experience_bg.svg); } .e-bo__experience { margin-top: 42px; padding-top: 0; } .e-bo__experience .e-bo__section__wrapper { padding: 0; } .e-bo__experience .e-bo__title { margin-bottom: 41px; } .e-bo__experience .e-bo__title h2 { margin-bottom: 36px; padding-left: 25px; } .e-bo__experience .e-bo__title p { padding-left: 24px; padding-right: 24px; line-height: 1.9; } .e-bo__experience .e-bo__flex__items { margin-bottom: 15px; padding: 0 24px; } .e-bo__experience .e-bo__flex__items:last-child { margin-bottom: 0; } .e-bo__experience .e-bo__flex__items__txt { width: 100%; margin-bottom: 18px; } .e-bo__experience .e-bo__flex__items__txt h3 { margin-bottom: 19px; padding: 0; font-size: 18px; } .e-bo__experience .e-bo__flex__items__txt h3 .e-bo__flex__items__title__num { margin-bottom: 16px; font-size: 40px; line-height: 1; } .e-bo__experience .e-bo__flex__items__txt h3 .e-bo__flex__items__title__num::after { width: 20px; height: 6px; margin-top: 18px; border-radius: 7.5px; } .e-bo__experience .e-bo__flex__items__txt .e-bo__flex__items__lead { line-height: 1.7; } .e-bo__experience .e-bo__flex__items__img { width: 100%; } .e-bo__difference .e-bo__title { margin-bottom: 38px; } .e-bo__difference .e-bo__title h2 { margin-bottom: 36px; letter-spacing: 0.08rem; } .e-bo__difference .e-bo__title p { padding-left: 3px; font-size: 18px; line-height: 1.87; } .e-bo__difference .e-bo__difference__container__inr { margin-bottom: 19px; font-size: 20px; color: #fff; font-weight: 900; line-height: 1.45; } .e-bo__difference .e-bo__difference__container__inr--normal { margin-bottom: 0; } .e-bo__difference .e-bo__difference__container__head { padding-top: 25.6%; margin-bottom: 8px; background-image: url(../img/e-bo/e-bo_difference_table_balloon.svg); background-repeat: no-repeat; background-size: 100% 100%; } .e-bo__difference .e-bo__difference__container__head--normal { background-image: url(../img/e-bo/e-bo_difference_table_balloon_normal.svg); } .e-bo__difference .e-bo__difference__container__items { display: flex; justify-content: center; align-items: center; margin-bottom: 5px; min-height: 110px; padding: 28.4px 18px; background-color: #FFDCD0; color: #FA6A00; font-size: 18px; line-height: 1.5; } .e-bo__difference .e-bo__difference__container__items:last-child { margin-bottom: 0; } .e-bo__difference .e-bo__difference__container__items--normal { background-color: #DBDBDB; color: #000; font-weight: 700; } .e-bo__difference .e-bo__difference__container__items--label { min-height: unset; padding: 10px 44px; background-color: #B1B1B1; color: #fff; font-size: 20px; line-height: 1.7; } .e-bo__difference .e-bo__difference__recochoku { margin-top: 21px; font-size: 16px; letter-spacing: 0rem; line-height: 1.5; } .e-bo__difference .e-bo__difference__recochoku span { color: #D2006E; } .e-bo__entertainment .e-bo__flex__items { display: flex; flex-direction: column-reverse; align-items: center; gap: 0; } .e-bo__entertainment .e-bo__flex__items:first-child { margin-bottom: 57px; } .e-bo__entertainment .e-bo__flex__items__img { width: 100%; max-width: none; margin-bottom: 20px; } .e-bo__entertainment .e-bo__flex__items__img::after { width: 0; height: 0; background: none; } .e-bo__entertainment .e-bo__title { margin-bottom: 39px; } .e-bo__entertainment .e-bo__title h2 { margin-bottom: 15px; font-size: 24px; } .e-bo__entertainment .e-bo__title .e-bo__title__txt-under-line { font-size: 18px; line-height: 1.5; } .e-bo__entertainment .e-bo__title .e-bo__title__txt-under-line::before { content: ""; position: absolute; bottom: 28px; left: 0; width: 71%; border-bottom: 6px solid #FA6A00; z-index: -10; } .e-bo__entertainment .e-bo__flex__items .e-bo__flex__items__txt { width: 100%; max-width: none; margin-bottom: 0; } .e-bo__entertainment .e-bo__flex__items__txt h3 { margin-bottom: 14px; padding: 6px 13px 6px 13px; max-width: 233px; width: 100%; text-align: center; } .e-bo__entertainment .e-bo__flex__items__txt:first-child h3 { margin-bottom: 14px; } .e-bo__entertainment .e-bo__flex__items__txt p { line-height: 1.7; } .e-bo__entertainment .e-bo__flex__items__txt span { margin-top: 2px; display: block; font-size: 12px; } .e-bo__entertainment .e-bo__entertainment__detail { margin-top: 20px; font-size: 15px; } .e-bo__entertainment .e-bo__entertainment__detail-sub { font-size: 12px; } .e-bo__entertainment .e-bo__entertainment__button { margin-top: 12px; } .e-bo__entertainment .e-bo__flex__items:nth-child(2) .e-bo__entertainment__button { margin-top: 12px; } .e-bo__entertainment .e-bo__entertainment__button a { padding: 14px 16px 12px 22px; font-size: 14px; } .e-bo__function { padding: 38px 0 42px; } .e-bo__function::after { content: unset; } .e-bo__function .e-bo__title { margin-bottom: 40px; } .e-bo__function .e-bo__title h2 { margin-bottom: 6px; padding-left: 0; line-height: 1.4585; font-size: 32px; } .e-bo__function p .e-bo__title__txt-under-line { font-size: 18px; line-height: 1.349; letter-spacing: -0.13rem; } .e-bo__function .e-bo__title__txt-under-line span:not(:last-child) { margin-bottom: 13px; } .e-bo__function .e-bo__flex__items__txt p { padding-right: 0; } .e-bo__flex__items { display: block; } .e-bo__flex__items__img, .e-bo__function .e-bo__flex__items__img { width: 100%; } .e-bo__flex__items__txt, .e-bo__function .e-bo__flex__items__txt { width: 100%; } .e-bo__flex__items__txt h3 { display: inline-block; width: auto; margin-bottom: 16px; font-size: 20px; } .e-bo__function .e-bo__flex__items__txt h3, .e-bo__select .e-bo__flex__items__txt h3 { line-height: 1.25; padding: 3px 17.78px; } .e-bo__flex__items__txt p { font-size: 15px; line-height: 1.6; } .e-bo__function .e-bo__flex__items:last-child { margin-bottom: 75px; } .e-bo__function__expectation__wrapper { padding: 10px 16px; background-size: 24%; } .e-bo__function__expectation__wrapper::after { top: 70%; right: 4%; width: 51px; height: 51px; } .e-bo__function .e-bo__flex__items__txt h3 { min-width: 233px; } .e-bo__function .e-bo__flex__items:nth-child(2) .e-bo__flex__items__txt h3 { padding: 3px 27.78px; } .e-bo__function .e-bo__flex__items__img { margin-bottom: 8px; } .e-bo__function .e-bo__flex__items:last-child .e-bo__flex__items__txt h3 { padding: 2px 25px; } .e-bo__function .e-bo__flex__items:last-child .e-bo__flex__items__img { width: 106%; margin-bottom: 12px; } .e-bo__function__expectation__description { color: #000; font-size: 14px; line-height: 1.572; } .e-bo__function__expectation__strong-txt { display: block; } .e-bo__function__expectation__strong-txt h3 { margin-bottom: 5.9px; font-size: 20px; line-height: 1.45; } .e-bo__function__expectation__strong-txt { padding: 0; } .e-bo__function__expectation__strong-txt p { left: -29px; top: -50px; width: 60px; height: 60px; font-size: 18px; text-align: center; } .e-bo__function__expectation__strong-txt p span { font-size: 14px; height: 18px; } .e-bo__select { padding: 42px 0 38px; } .e-bo__select .e-bo__title .e-bo__title__txt-block { margin-bottom: 27px; padding: 7px 19px; } .e-bo__select .e-bo__title h2 { margin-bottom: 11px; font-size: 32px; } .e-bo__select .e-bo__title .e-bo__title__txt-under-line { margin-bottom: 8px; letter-spacing: -0.13rem; } .e-bo__select .e-bo__select__block { margin-bottom: 62px; } .e-bo__select .e-bo__select__block:last-child { margin-bottom: 0; } .e-bo__select .e-bo__flex__items__txt p { padding-right: 0; } .e-bo__select .e-bo__flex__items:not(:last-child) { margin-bottom: 25px; } .e-bo__select .e-bo__flex__items__img { margin-bottom: 14px; } .e-bo__select .e-bo__flex__items__txt h3 { padding: 3px 45px; } .e-bo__select .e-bo__flex__items:nth-child(2) .e-bo__flex__items__txt h3 { padding: 4px 25px; } .e-bo__select .e-bo__flex__items:last-child .e-bo__flex__items__txt h3 { padding-right: 10px; padding-left: 20px; } .e-bo__select .e-bo__select__recochoku { font-size: 16px; letter-spacing: unset; } .e-bo__app__block__sp-only { display: flex; justify-content: center; gap: 24px; } .e-bo__app .e-bo__title { text-align: center; } .e-bo__app .e-bo__title h2 { margin-bottom: 8px; font-size: 22px; } .e-bo__app .e-bo__title h2::after { bottom: 4px; border-bottom: 6px solid #FA6A00; } .e-bo__title .e-bo__title__txt-arrow { font-size: 18px; font-weight: 900; } .e-bo__title__txt-arrow::after { width: 20px; height: 20px; } .e-bo__app .e-bo__title .e-bo__title__txt-arrow { letter-spacing: 0.2rem; } .e-bo__app__under-txt { padding: 0; } .e-bo__app__under-txt p { margin-bottom: 20px; padding: 8px 12px; font-size: 16px; } .e-bo__app__under-txt p::after { top: -34px; left: -34px; width: 48px; height: 48px; } .e-bo__app__block { display: block; margin-bottom: 54px; } .e-bo__app__block .e-bo__app__block__capcha { margin: 0 auto; width: 278px; } /* ▼▼ お知らせ SP ▼▼ ----------------------------------------------*/ .e-bo__news { padding: 34px 27px 40px; background: #F4F2F0; font-size: 16px; } .e-bo__news .e-bo__section__wrapper { padding: 0; } .e-bo__news .e-bo__title { margin-bottom: 40px; text-align: center; } .e-bo__news .e-bo__title h2 { margin-bottom: 0; font-size: 26px; } .e-bo__news__item { display: flex; flex-direction: column; margin-bottom: 52px; } .e-bo__news__text { display: flex; gap: 14px; border-bottom: 1px solid #E6E5E4; padding-bottom: 12px; margin-bottom: 12px; line-height: 1.4; flex-direction: column; } .e-bo__news__text p { display: flex; align-items: center; gap: 16px; } .e-bo__news__text a { display: flex; align-items: center; font-size: 14px; line-height: 1.572; } .e-bo__news__text:last-child { border: none; padding-bottom: 0; margin-bottom: 0; } .e-bo__news__text span.date { font-size: 14px; } .e-bo__news__item a:hover { text-decoration: underline; } .e-bo__news__button a { padding: 16px 29px 16px 40px; } .e-bo__news__button span { margin-left: 3px; } /* ▲▲ お知らせ ▲▲ ----------------------------------------------*/ .e-bo__serch { margin: 0; padding-top: 24px; text-align: center; } .e-bo__serch .e-bo__section__wrapper { padding: 0; } .e-bo__serch__title { margin-bottom: 22px; padding: 0 24px; font-size: 22px; } .e-bo__serch .e-bo__serch__title h2 { letter-spacing: 0rem; } .e-bo__serch .e-bo__serch__item { padding: 0 24px; } .e-bo__serch__item__sub-txt { margin-bottom: 7px; font-size: 16px; } .e-bo__serch__item__link { padding: 12px 14px; font-size: 15px; line-height: 0.8; letter-spacing: 0rem; } .e-bo__serch__item__link span img { width: 30px; height: 30px; } .map { position: relative; width: 100%; padding-top: 75%; /* 16:9のアスペクト比 */ height: 0; } .map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } @media screen and (max-width: 640px) { .e-bo__function__expectation__description { width: 85%; text-align: left; } } @media screen and (min-width: 585px) and (max-width: 767px) { .e-bo__function__expectation__wrapper::after { top: 60%; } } @media screen and (max-width: 368px) { .e-bo__fv__bottom .e-bo__title .e-bo__title__txt-under-line { display: inline-flex; flex-direction: column; } .e-bo__fv__bottom .e-bo__title .e-bo__title__txt-under-line::after { border: none; } .e-bo__fv .e-bo__fv__bottom .e-bo__fv__line { display: inline-block; position: relative; } .e-bo__fv .e-bo__fv__bottom .e-bo__fv__line::after { content: ""; position: absolute; bottom: 0; left: 47%; transform: translateX(-50%); width: 92%; border-bottom: 3px solid #FFFFFF; border-radius: 1.5px; z-index: -1; } .e-bo__fv .e-bo__fv__bottom .e-bo__fv__line:nth-of-type(2):after { content: ""; position: absolute; bottom: 0; left: 49%; width: 63%; border-bottom: 3px solid #FFFFFF; border-radius: 1.5px; z-index: -1; } } @media screen and (max-width: 324px) { .e-bo__entertainment .e-bo__title .e-bo__title__txt-under-line { font-size: 16px; } }