@charset "UTF-8"; /*** The new CSS reset - version 1.7.2 (last updated 23.6.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, select):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { -webkit-box-sizing: border-box; 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 */ figure { padding: 0; margin: 0; } img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::-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; } /* ファイル名: _base.scss 配置内容: HTML要素、標準スタイル接頭辞: なし参考元: https://qiita.com/kum44/items/117b32a4e5bdf102b1cf */ /* ファイル名: _variables.scss 配置内容: テーマごとに変えたい変数を定義参考元: https://qiita.com/kum44/items/117b32a4e5bdf102b1cf */ /**-------------------------- * Foundation * - Media Query "PC to SP" --------------------------*/ :root { --col-black: #414141; --col-gray: #888; --col-white: #fff; --col-org: #EA6001; --col-dark-white: #fafafa; --col-light-org: #EF8F4C; --grad-org: linear-gradient(270deg, #EA6001 31.64%, #F7B712 100%); --grad-org2: linear-gradient(332.64deg, #EF8E4C 32.08%, #F7C457 99.4%); --grad-org-bend: -webkit-linear-gradient(-180deg, #EA6001 31.64%, #F7B712 100%); --grad-org2-bend: -webkit-linear-gradient(-242.64deg, #EF8E4C 32.08%, #F7C457 99.4%); --fluid-px: clamp(8px, .69vw, 10px); --max-inner: 1200px; --mq-md: 768px; --col-icon-time: #888; } html { scroll-behavior: smooth; background: var(--col-dark-white); font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-size: 17px; font-weight: 500; color: var(--col-black); } figure img { vertical-align: bottom; } .svg-def { display: none; } ::-webkit-input-placeholder { color: var(--col-gray); } ::-moz-placeholder { color: var(--col-gray); } :-ms-input-placeholder { color: var(--col-gray); } ::-ms-input-placeholder { color: var(--col-gray); } ::placeholder { color: var(--col-gray); } a { -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; cursor: pointer; } a:hover { opacity: 0.7; } a img { vertical-align: bottom; } span { display: inline-block; } @media screen and (max-width: 769px) { html { font-size: clamp(10px, 3.73vw, 14px); } } /* ファイル名: _layout.scss 配置内容: ヘッダー、メインエリアなどの大きなレイアウトを形成する要素接頭辞: ly_ 参考元: https://qiita.com/kum44/items/117b32a4e5bdf102b1cf */ .ly_main { padding-top: min(35px, 2.43vw); z-index: initial; } @media screen and (max-width: 768px) { .ly_main { padding-top: 0; margin-top: 0; } } .ly_nav { z-index: 4; } .ly_container { max-width: 1440px; margin: 0 auto; } .ly_inner { max-width: 1200px; width: 90%; margin: 0 auto; } .ly_page-inner { max-width: 1100px; width: 90%; margin: 0 auto; } .ly_single_column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 5%; } @media screen and (max-width: 768px) { .ly_single_column { grid-template-columns: repeat(1, minmax(0, 1fr)); } } /* ファイル名: _module.scss 配置内容: 再利用性のあるコンテンツ接頭辞: なし命名規則: BEM Block：どこでも使い回せるパーツ Element：Blockの構成要素、Blockの中でしか機能しないもの Modifier：BlockやElementの修飾を定義するもの記法: Elementはアンダースコア2つ(__)、Modifierはハイフン2つ(--)で連結 block block__element block__element--modifier block--modifier block--modifier__element 参考元: https://qiita.com/kum44/items/117b32a4e5bdf102b1cf */ /**------------------------- * Common -------------------------*/ .bl_btn { display: inline-block; width: var(--btn-width, auto); font-size: 1rem; line-height: 1; border-radius: 9999px; line-height: 1; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; text-align: center; cursor: pointer; padding: 0.7em 1em; font-size: 0.8em; } .bl_btn.has_icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; justify-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; align-items: center; gap: 0.3em; } .bl_btn.has_icon svg { width: 1.2em; vertical-align: bottom; } .bl_btn.hp_shadow:hover { -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.25); } .bl_section-desc { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 5%; } @media screen and (max-width: 768px) { .bl_section-desc { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .bl_section-desc.is_rev .bl_section-heading { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .bl_section-desc.is_rev .bl_section-detail { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } } .bl_section-heading .el_en { font-size: clamp(36px, 6.94vw, 100px); letter-spacing: 0.1em; margin-right: -0.1em; line-height: 1; font-weight: 700; opacity: 0.5; text-align: right; } .bl_section-heading .el_ja { font-size: clamp(24px, 2.43vw, 35px); letter-spacing: 0.1em; line-height: 1; font-weight: 700; text-align: right; } .bl_section-detail { display: inline-block; padding-right: 1rem; } @media screen and (max-width: 768px) { .bl_section-detail { padding-right: 0; } } .bl_section-detail .el_heading { font-size: 1.5rem; } /**------------------------- * Top -------------------------*/ .mv { position: relative; margin: min(40px, 2.1vw) auto 0; width: min(1760px, 94.44vw); } @media screen and (max-width: 768px) { .page .mv { height: 200px; } .home.page .mv { height: 100vh; } } .mv__bg { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; border-radius: 40px; overflow: hidden; max-height: 500px; } .mv__bg.is_front { max-height: calc(100vh - 65px); } .mv__bg video { width: 100%; } .mv__bg .is_single { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 500px; } .mv__bg .is_single img { z-index: 3; } .mv__bg.is_video { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 500px; background: no-repeat center/cover url("../images/page/mv.png"); } .mv__bg.is_video video { height: 100%; width: auto; } @media screen and (max-width: 768px) { .page .mv__bg, .single .mv__bg { height: 200px; border-radius: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .page .mv__bg img, .single .mv__bg img { height: 100%; width: auto; max-width: unset; } .home.page .mv__bg { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: calc(100vh - 55px); max-height: unset; } .home.page .mv__bg img { height: 100%; width: auto; max-width: unset; } } .mv__catch { position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: min(50px, 3.47vw); width: 32%; z-index: 4; } .mv__catch.is_page { width: 90%; } .is_single .mv__catch { position: unset; -webkit-transform: unset; transform: unset; height: 100%; width: 100%; background-color: rgba(255, 255, 255, 0.5); background-blend-mode: lighten; } .is_single .mv__catch img { width: unset; height: 100%; } @media screen and (max-width: 768px) { .mv__catch { width: 70%; } } .mv__heading { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.5em; font-size: min(22px, 1.52vw); letter-spacing: 0; text-align: center; } .mv__heading span { display: inline-block; } .mv__heading.is_page { font-size: clamp(24px, 3vw, 35px); background: rgba(0, 0, 0, 0.2); border-radius: 0.3em; padding: 0.2em 1em; } .mv__sub { text-align: center; font-size: clamp(18px, 1.25vw, 12px); } .mv__news { width: 100%; padding: 0.5rem; border-radius: 10px; } .mv__news-list .slick-track > * + * { margin-left: 20px; } .mv__news-list .slick-dots li { background: unset; } .mv__news-list .slick-prev:before, .mv__news-list .slick-next:before { color: var(--col-black); } .mv__news-list figure { overflow: hidden; width: 100%; aspect-ratio: 16/9; } .mv__news-list figure img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; } .mv__news-list li { padding: 10px; background: rgba(255, 255, 255, 0.7); } .mv__news-list li > * + * { margin-top: 20px; } .mv__news-list li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 10px; padding: 10px 0; font-size: 0.9em; color: var(--col-black); border-top: 1px dotted var(--col-org); } @media screen and (max-width: 768px) { .mv__news-list li a { display: block; } .mv__news-list li a p { font-weight: 700; } } .mv__news-list li time { font-size: 11px; } .global-nav { position: sticky; top: 15px; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 90%; height: 70px; max-width: var(--max-inner); margin: max(-35px, -2.43vw) auto; padding: 0 30px; border-radius: 70px; background: var(--col-white); -webkit-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15); box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15); } @media screen and (max-width: 768px) { .global-nav { position: fixed; top: unset; bottom: 25px; left: 50%; -webkit-transform: translate(-50%); transform: translate(-50%); } } .global-nav__logo { width: min(200px, 16%); } @media screen and (max-width: 768px) { .global-nav__logo { width: 40%; z-index: 1; } } .global-nav__list { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 1em; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .global-nav__inner input { display: none; } .global-nav__btn { display: none; } /** * Drawer */ @media screen and (max-width: 768px) { .global-nav__inner { z-index: 0; } .global-nav__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } .drawer { position: fixed; bottom: 35px; left: 50%; -webkit-transform: translate(-50%); transform: translate(-50%); display: block; width: 90vw; margin: 0 auto; padding: 30px 5% 60px; background: var(--col-white); border-radius: 15px 15px 0 0; -webkit-box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.1); pointer-events: none; opacity: 0; z-index: -1; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } #drawer-btn:checked ~ .drawer { pointer-events: all; opacity: 1; } .drawer__title { font-size: 1.2rem; font-weight: 700; } .drawer li { text-align: center; } .global-nav__btn { position: relative; display: block; background: var(--grad-org); background: var(--grad-org-bend); aspect-ratio: 1; width: 50px; border-radius: 100%; } .global-nav__btn span { position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); display: block; width: 50%; height: 3px; border-radius: 3px; background: var(--col-white); -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .global-nav__btn span:nth-child(1) { margin-top: -10px; } .global-nav__btn span:nth-child(3) { margin-top: 10px; } #drawer-btn:checked ~ .global-nav__btn span:nth-child(1) { margin-top: 0; -webkit-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 315deg); transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 315deg); } #drawer-btn:checked ~ .global-nav__btn span:nth-child(2) { opacity: 0; } #drawer-btn:checked ~ .global-nav__btn span:nth-child(3) { margin-top: 0; -webkit-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -315deg); transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -315deg); } } .banner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 30px; } .banner img { width: 100%; } @media screen and (max-width: 768px) { .banner { grid-template-columns: unset; gap: 15px; } } .program__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2%; padding-left: 1rem; padding-right: 1rem; } @media screen and (max-width: 768px) { .program__list { gap: 15px; } } @media screen and (max-width: 500px) { .program__list { grid-template-columns: 1fr; padding-left: 0; padding-right: 0; } } .program__list li { border-radius: 10px; overflow: hidden; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .program__list li.hp_shadow:hover { -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.25); } .program__list__desc { 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; padding: 1em; } @media screen and (max-width: 768px) { .program__list__desc { display: grid; grid-template-columns: 1fr; gap: 1rem; } .program__list__desc .bl_btn { display: block; width: 100%; text-align: center; } } .program__list__heading { font-size: 1.2rem; } @media screen and (max-width: 768px) { .program__list__heading { text-align: center; } } .campuses__img > img { width: 100%; } .feature { padding-left: 5%; padding-right: 5%; } .feature__article { max-width: var(--max-inner); margin: 0 auto; padding: 40px 5% 60px; border-radius: 20px; } .feature__heading { position: relative; font-size: min(21px, 2rem); padding-bottom: 1em; } .feature__heading::after { position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: block; content: ""; width: 3em; height: 3px; background: var(--col-white); } .feature__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; gap: 60px; } .feature__list li { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } @media screen and (max-width: 768px) { .feature__list li { grid-template-columns: repeat(1, minmax(0, 1fr)); } } .feature__list li figure { border-radius: 10px; overflow: hidden; } .feature__list li .el_num { text-align: right; line-height: 1; font-size: 6.25em; font-weight: 900; opacity: 0.6; } @media screen and (max-width: 768px) { .feature__list li .el_num { font-size: 4em; } } .feature__list li:nth-of-type(even) .el_num { text-align: left; } @media screen and (max-width: 768px) { .feature__list li:nth-child(odd) figure { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .feature__list li:nth-child(odd) .fature__list__detail { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } .feature__list__lead { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.5em; } .supporter__inner { max-width: var(--max-inner); padding-left: 5%; padding-right: 5%; margin: 0 auto; } .supporter__heading { font-size: 2rem; font-weight: 700; } .supporter__detail { font-size: 1.2rem; } .supporter__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5%; } @media screen and (max-width: 768px) { .supporter__list { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; gap: 2rem; } } .supporter__list li { width: 25%; } @media screen and (max-width: 768px) { .supporter__list li { width: calc(50% - 1rem); } } .supporter__list li img { width: 100%; } .footer { display: grid; grid-template-columns: 60% 1fr; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 5%; } @media screen and (max-width: 768px) { .footer { grid-template-columns: 80%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 2rem; } } .footer__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 5%; } @media screen and (max-width: 768px) { .footer__list { grid-template-columns: 1fr; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .footer__list li { color: var(--col-white); } .footer__list li li { list-style: "・"; margin-left: 1.2em; } .footer__list li h3 { font-size: 1.2rem; font-weight: 700; padding-bottom: 0.5em; border-bottom: 2px solid var(--col-white); } .footer__list li ul { padding-top: 1em; line-height: 2; } .footer figure figcaption { text-align: right; } .copyright { padding: 1em 0; font-size: clamp(10px, 3vw, 12px); text-align: center; } @media screen and (max-width: 768px) { .copyright { padding-bottom: 90px; } } .em.em-grid.em-locations-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 2rem 2%; -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } @media screen and (max-width: 900px) { .em.em-grid.em-locations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media screen and (max-width: 600px) { .em.em-grid.em-locations-grid { grid-template-columns: 1fr !important; max-width: 375px; margin-left: auto; margin-right: auto; } } .em.em-list.em-grid > :not(.em-item) { grid-column: unset !important; } /** * page */ .bl_card__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 2%; } @media screen and (max-width: 900px) { .bl_card__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media screen and (max-width: 600px) { .bl_card__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; max-width: 375px; margin-left: auto; margin-right: auto; } } .bl_card__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; width: 100%; border-radius: 0.5em; overflow: hidden; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } @media screen and (max-width: 768px) { .bl_card__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } } .bl_card__item:hover img { -webkit-transform: scale(120%); transform: scale(120%); } @media screen and (max-width: 768px) { .bl_card__item:hover img { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } .bl_card__item.is_pilot { grid-template-rows: unset; } .bl_card__item.is_pilot:hover img { -webkit-transform: unset; transform: unset; } .bl_card__item__img { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; aspect-ratio: 16/9; width: 100%; align-items: center; overflow: hidden; } @media screen and (max-width: 768px) { .bl_card__item__img { display: block; } } .bl_card__item__img .el_note { font-size: 0.8rem; position: absolute; top: 0; left: 0; padding: 0.2em 0.5em; opacity: 0.8; pointer-events: none; } .bl_card__item__img a { display: block; overflow: hidden; height: 100%; } @media screen and (max-width: 768px) { .bl_card__item__img a::before { width: 100%; height: 100%; content: ""; display: block; padding-top: 55%; } } .bl_card__item__img img { width: 100%; height: 100%; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; vertical-align: baseline; } @media screen and (max-width: 768px) { .bl_card__item__img img { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; display: block; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } .bl_card__item__img.is_pilot_thumb { aspect-ratio: 4/3; border-radius: 0.5em; } .bl_card__item__info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; padding: 0.5rem 1rem; } @media screen and (max-width: 768px) { .bl_card__item__info { gap: 0.5rem; height: unset; } } .bl_card__item__info span { display: inline-block; } .bl_card__item__info .el_info-title { font-size: 1.2rem; } .bl_card__item__info .el_info-sub { padding: 0.3em 0; font-size: 0.9rem; font-weight: 400; border-top: 1px dashed var(--col-gray); color: var(--col-gray); } .page_cat__list li:nth-child(1) { padding-top: 0; } .page_cat__list .el_detail { padding: 1em 1.5em; font-weight: 400; background: var(--col-white); margin-left: auto; margin-right: auto; border-radius: 0.5em; border: 2px solid var(--col-org); } .page_cat__list .el_heading { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 1em; font-size: 1.6rem; letter-spacing: 0.1em; } .page_cat__list .el_heading::after, .page_cat__list .el_heading::before { content: ""; height: 3px; width: 4em; background: var(--col-org); } .page_cat__list .el_cat_name { font-size: 1.2rem; } .page_cat__list .el_price-time { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 1rem; opacity: 0.7; } .page_cat__list .el_time, .page_cat__list .el_price { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 0.1em; padding: 0.5em; line-height: 1; font-size: 0.8rem; vertical-align: baseline; color: var(--col-black); border: 1px dashed var(--col-black); border-radius: 0.2em; } .page_cat__list .el_time i { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 1em; fill: var(--col-black); stroke: var(--col-black); } .page_cat__list .el_time i svg { vertical-align: baseline; width: 100%; } .page_cat__list .el_price i { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 1em; fill: none; } .page_cat__list .el_price i svg { vertical-align: baseline; } .page_document h2 { font-size: 1.6rem; margin-bottom: 1rem; } .page_document h3 { font-size: 1.4rem; margin-bottom: 1rem; } .page_document p { font-size: 1rem; margin-bottom: 1rem; } /** * single */ .bl_single_heading { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 1em; font-size: 1.6rem !important; letter-spacing: 0.1em; color: var(--col-org); } .bl_single_heading::after, .bl_single_heading::before { content: ""; height: 3px; width: 4em; background: var(--col-org); } .bl_single__detail .el_heading { font-size: 1.6rem !important; } .bl_single__detail__content { padding: 1em 1.5em; font-weight: 400; background: var(--col-white); margin-left: auto; margin-right: auto; border-radius: 0.5em; border: 2px solid var(--col-org); } .bl_single__detail__content p { word-break: break-all; margin-bottom: 1em; } .campus_course__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; gap: 1rem; } .campus_course__list li { padding: 0.3em 0.5em; font-size: 1rem; border-radius: 0.2em; } .bl_location__calendar { max-width: 1400px; margin: 0 auto; } /** * events */ .bl_list__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; border-radius: 10px; overflow: hidden; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .bl_list__item.hp_shadow:hover { -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.25); box-shadow: 0 0 0 rgba(0, 0, 0, 0.25); } .bl_table { padding: 1rem 1rem; margin: 0 auto; width: 100%; border-radius: 0.2em; text-align: left; } .bl_table tr:last-child { border-top: none; border-bottom: none; border-right: none; } .bl_table tr { display: grid; grid-template-columns: 25% 1fr 20%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; word-break: break-all; } .bl_table tr.has_campus { grid-template-columns: 25% 40% 20% 15%; } @media screen and (max-width: 768px) { .bl_table tr { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .bl_table__heading { border-bottom: 1px solid var(--col-black); padding-left: 10px; } .bl_table__heading th { color: var(--col-org); font-weight: 700; padding: 0.5em; } .bl_table__title { background: var(--col-white); } .bl_table__item { border-left: 10px solid var(--col-categry, #a8a8a8); border-bottom: 1px dashed var(--col-gray); } .bl_table__item th, .bl_table__item td { padding: 1em 0.5em; vertical-align: center; } /************************************************************ 講師陣詳細ページ ************************************************************/ .pilot { width: 100%; } .pilot__gray { background-color: rgba(199, 199, 199, 0.24); } .pilot__kv { position: relative; } .pilot__kvBg img { width: 100%; } .pilot__kvTextArea { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 60px; } .pilot__kvBox { padding: 0 15px 10px; border-bottom: 5px solid #EA6001; } .pilot__kvText { margin-right: -16px; font-size: 32px; font-weight: bold; letter-spacing: 16px; } .pilot__section { width: 100%; max-width: 1120px; margin: auto; padding-left: 30px; padding-right: 30px; padding-top: 60px; padding-bottom: 60px; } .pilot__title { font-size: 24px; font-weight: bold; text-align: center; } .pilot__profile { margin-top: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .pilot__profileImg { width: 500px; height: 0; position: relative; padding-bottom: 333.3333333333px; } .pilot__profileImg img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .pilot__profileText { width: calc(100% - 500px); } .pilot__nameArea { padding-bottom: 15px; border-bottom: 1px solid #000; } .pilot__nameJapanese { font-size: 24px; font-weight: 500; text-align: center; letter-spacing: 5px; } .pilot__nameEnglish { margin-top: 5px; font-size: 18px; text-align: center; letter-spacing: 2px; } .pilot__qualification { padding: 18px 40px 0; line-height: 1.8; } .pilot__contentsText { line-height: 1.8; } .pilot__imgItema { margin-top: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .pilot__imgItem { width: 33.3333333333%; } .pilot__imgItem figure { width: 100%; height: 0; position: relative; padding-bottom: 66.6666666667%; } .pilot__imgItem figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .pilot__imgText { padding: 10px 15px 0; } .pilot__toList { margin-top: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 18px; font-weight: 500; } .pilot__arrow { color: #EA6001; } @media (max-width: 1023px) { .pilot__profileImg { width: 380px; height: 0; position: relative; padding-bottom: 253.3333333333px; } .pilot__profileText { width: calc(100% - 300px); } .pilot__qualification { padding: 18px 20px 0; line-height: 1.6; } } @media (max-width: 767px) { .pilot__section { /* TODO: CSS修正 padding: 30px 15px;*/ padding-top: 30px; padding-right: 15px; padding-bottom: 30px; padding-left: 15px; } .pilot__br--pc { display: none; } .pilot__kvBox { padding: 0 10px 5px; border-bottom: 3px solid #EA6001; } .pilot__kvText { margin-right: -10px; font-size: 22px; letter-spacing: 10px; } .pilot__title { font-size: 18px; font-weight: 500; text-align: left; } .pilot__profile { margin-top: 30px; display: block; } .pilot__profileImg { width: 100vw; margin: 0 calc(50% - 50vw); padding-bottom: 66.6666666667%; } .pilot__profileText { margin-top: 20px; width: 100%; } .pilot__nameArea { padding-bottom: 10px; } .pilot__nameJapanese { font-size: 20px; } .pilot__nameEnglish { margin-top: 3px; font-size: 16px; } .pilot__qualification { padding: 18px 0 0; line-height: 1.6; } .pilot__imgItema { margin-top: 30px; display: block; } .pilot__imgItem { width: 100%; } .pilot__imgItem:not(:first-of-type) { margin-top: 20px; } .pilot__imgText { padding: 5px 0 0; } .pilot__toList { margin-top: 40px; } } /**------------------------- * Toast (共通) -------------------------*/ .bl_logout_state, .bl_login_state { position: fixed; bottom: 50px; right: 50px; z-index: 9999; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .bl_logout_state.is_show, .bl_login_state.is_show { opacity: 1; visibility: visible; } .bl_logout_state__inner, .bl_login_state__inner { background: rgba(5, 159, 10, 0.9); border-radius: 10px; padding: 20px 40px; -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .bl_logout_state__content, .bl_login_state__content { color: var(--col-white); text-align: center; font-size: 1rem; font-weight: 500; margin: 0; } @media screen and (max-width: 768px) { .bl_logout_state, .bl_login_state { top: 10px; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); bottom: unset; right: unset; width: calc(100% - 20px); } .bl_logout_state__inner, .bl_login_state__inner { padding: 15px 30px; } .bl_logout_state__content h2, .bl_login_state__content h2 { font-size: 1rem; } } .em-my-bookings .table-wrap { width: 100%; overflow-x: auto; margin: 20px 0; border-radius: 8px; -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .em-my-bookings #dbem-bookings-table { width: 100%; border-collapse: collapse; background: var(--col-white); border-radius: 8px; overflow: hidden; } .em-my-bookings #dbem-bookings-table thead tr { background: rgb(242, 242, 242); display: table-row; } .em-my-bookings #dbem-bookings-table thead tr th { font-weight: 600; font-size: 1rem; text-align: center; border: 1px solid #fff; padding: 16px 12px; color: var(--col-black); vertical-align: middle; position: relative; } .em-my-bookings #dbem-bookings-table thead tr th:nth-child(1) { width: 30%; min-width: 200px; } .em-my-bookings #dbem-bookings-table thead tr th:nth-child(2) { width: 20%; min-width: 120px; } .em-my-bookings #dbem-bookings-table thead tr th:nth-child(3) { width: 15%; min-width: 80px; } .em-my-bookings #dbem-bookings-table thead tr th:nth-child(4) { width: 25%; min-width: 120px; } .em-my-bookings #dbem-bookings-table thead tr th:nth-child(5) { width: 10%; min-width: 60px; } .em-my-bookings #dbem-bookings-table tbody tr { display: table-row; border-bottom: 1px solid #e0e0e0; -webkit-transition: background-color 0.2s ease; transition: background-color 0.2s ease; } .em-my-bookings #dbem-bookings-table tbody tr:last-child { border-bottom: none; } .em-my-bookings #dbem-bookings-table tbody tr td { padding: 16px 12px; vertical-align: middle; border-right: 1px solid #f0f0f0; } .em-my-bookings #dbem-bookings-table tbody tr td:last-child { border-right: none; } .em-my-bookings #dbem-bookings-table tbody tr td:nth-child(1) { text-align: left; font-weight: 500; } .em-my-bookings #dbem-bookings-table tbody tr td:nth-child(1) a { color: var(--col-org); text-decoration: none; -webkit-transition: color 0.2s ease; transition: color 0.2s ease; } .em-my-bookings #dbem-bookings-table tbody tr td:nth-child(1) a:hover { color: var(--col-light-org); text-decoration: underline; } .em-my-bookings #dbem-bookings-table tbody tr td:nth-child(2) { text-align: center; font-size: 0.95rem; color: var(--col-gray); } .em-my-bookings #dbem-bookings-table tbody tr td:nth-child(3) { text-align: center; font-weight: 600; color: var(--col-black); } .em-my-bookings #dbem-bookings-table tbody tr td:nth-child(4) { text-align: center; } .em-my-bookings #dbem-bookings-table tbody tr td:nth-child(4) span { display: inline-block; padding: 6px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 500; background: #f0f0f0; color: var(--col-black); } .em-my-bookings #dbem-bookings-table tbody tr td:nth-child(4) span.status-pending { background: #fff3cd; color: #856404; border: 1px solid #ffeaa7; } .em-my-bookings #dbem-bookings-table tbody tr td:nth-child(4) span.status-confirmed { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .em-my-bookings #dbem-bookings-table tbody tr td:nth-child(4) span.status-cancelled { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .em-my-bookings #dbem-bookings-table tbody tr td:nth-child(5) { text-align: center; } @media screen and (max-width: 768px) { .em-my-bookings #dbem-bookings-table thead tr th { padding: 12px 8px; font-size: 0.9rem; } .em-my-bookings #dbem-bookings-table thead tr th:nth-child(1) { min-width: 150px; } .em-my-bookings #dbem-bookings-table thead tr th:nth-child(2) { min-width: 100px; } .em-my-bookings #dbem-bookings-table thead tr th:nth-child(3) { min-width: 60px; } .em-my-bookings #dbem-bookings-table thead tr th:nth-child(4) { min-width: 100px; } .em-my-bookings #dbem-bookings-table thead tr th:nth-child(5) { min-width: 50px; } .em-my-bookings #dbem-bookings-table tbody tr td { padding: 12px 8px; font-size: 0.9rem; } .em-my-bookings #dbem-bookings-table tbody tr td:nth-child(4) span { padding: 4px 8px; font-size: 0.8rem; } } @media screen and (max-width: 480px) { .em-my-bookings #dbem-bookings-table .table-wrap { margin: 15px -15px; } .em-my-bookings #dbem-bookings-table thead tr th, .em-my-bookings #dbem-bookings-table tbody tr td { padding: 10px 6px; } .em-my-bookings #dbem-bookings-table thead tr th:nth-child(1), .em-my-bookings #dbem-bookings-table tbody tr td:nth-child(1) { min-width: 120px; } .em-my-bookings #dbem-bookings-table thead tr th:nth-child(2), .em-my-bookings #dbem-bookings-table tbody tr td:nth-child(2) { min-width: 80px; } .em-my-bookings #dbem-bookings-table thead tr th:nth-child(3), .em-my-bookings #dbem-bookings-table tbody tr td:nth-child(3) { min-width: 50px; } .em-my-bookings #dbem-bookings-table thead tr th:nth-child(4), .em-my-bookings #dbem-bookings-table tbody tr td:nth-child(4) { min-width: 80px; } .em-my-bookings #dbem-bookings-table thead tr th:nth-child(5), .em-my-bookings #dbem-bookings-table tbody tr td:nth-child(5) { min-width: 40px; } } /* ファイル名: _helper.scss 配置内容: margin、padding、colorある部分だけを調節したいとなった場合に適用するスタイル接頭辞: mt_, mb_, pt_, pb_, cl_ 参考元: https://qiita.com/kum44/items/117b32a4e5bdf102b1cf */ .bg_white { background: var(--col-white); } .bg_dark_white { background: var(--col-dark-white); } .bg_light_org { background: var(--col-light-org); } .bg_org { background: var(--col-org); } .bg_grad_org { background: var(--grad-org); background: var(--grad-org-bend); } .bg_grad_org2 { background: var(--grad-org2); background: var(--grad-org2-bend); } .col_black { color: var(--col-black); fill: var(--col-black); } .col_white { color: var(--col-white); fill: var(--col-white); } .col_org { color: var(--col-org); fill: var(--col-org); } .col_dark_white { color: var(--col-dark-white); fill: var(--col-dark-white); } .col_grad_org { display: inline-block; background: var(--grad-org); background: var(--grad-org-bend); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .fw_400 { font-weight: 400; } .fw_500 { font-weight: 500; } .fw_600 { font-weight: 600; } .fw_700 { font-weight: 700; } .text_center { text-align: center; } .text_right { text-align: right; } .mt_0 { margin-top: 0; } .mt_10 { margin-top: calc(var(--fluid-px) * 1); } .mt_20 { margin-top: calc(var(--fluid-px) * 2); } .mt_30 { margin-top: calc(var(--fluid-px) * 3); } .mt_40 { margin-top: calc(var(--fluid-px) * 4); } .mt_50 { margin-top: calc(var(--fluid-px) * 5); } .mt_60 { margin-top: calc(var(--fluid-px) * 6); } .mt_70 { margin-top: calc(var(--fluid-px) * 7); } .mt_80 { margin-top: calc(var(--fluid-px) * 8); } .mt_90 { margin-top: calc(var(--fluid-px) * 9); } .mt_100 { margin-top: calc(var(--fluid-px) * 10); } @media screen and (max-width: 768px) { .mt_0_md { margin-top: 0; } } .mb_10 { margin-bottom: calc(var(--fluid-px) * 1); } .mb_20 { margin-bottom: calc(var(--fluid-px) * 2); } .mb_30 { margin-bottom: calc(var(--fluid-px) * 3); } .mb_40 { margin-bottom: calc(var(--fluid-px) * 4); } .mb_50 { margin-bottom: calc(var(--fluid-px) * 5); } .mb_60 { margin-bottom: calc(var(--fluid-px) * 6); } .mb_70 { margin-bottom: calc(var(--fluid-px) * 7); } .mb_80 { margin-bottom: calc(var(--fluid-px) * 8); } .mb_90 { margin-bottom: calc(var(--fluid-px) * 9); } .mb_100 { margin-bottom: calc(var(--fluid-px) * 10); } @media screen and (max-width: 768px) { .mb_0_md { margin-bottom: 0; } } .pt_0 { padding-top: 0; } .pt_10 { padding-top: calc(var(--fluid-px) * 1); } .pt_20 { padding-top: calc(var(--fluid-px) * 2); } .pt_30 { padding-top: calc(var(--fluid-px) * 3); } .pt_40 { padding-top: calc(var(--fluid-px) * 4); } .pt_50 { padding-top: calc(var(--fluid-px) * 5); } .pt_60 { padding-top: calc(var(--fluid-px) * 6); } .pt_70 { padding-top: calc(var(--fluid-px) * 7); } .pt_80 { padding-top: calc(var(--fluid-px) * 8); } .pt_90 { padding-top: calc(var(--fluid-px) * 9); } .pt_100 { padding-top: calc(var(--fluid-px) * 10); } .pb_0 { padding-bottom: 0; } .pb_10 { padding-bottom: calc(min(10px, 0.69vw) * 1); } .pb_20 { padding-bottom: calc(min(10px, 0.69vw) * 2); } .pb_30 { padding-bottom: calc(min(10px, 0.69vw) * 3); } .pb_40 { padding-bottom: calc(min(10px, 0.69vw) * 4); } .pb_50 { padding-bottom: calc(min(10px, 0.69vw) * 5); } .pb_60 { padding-bottom: calc(min(10px, 0.69vw) * 6); } .pb_70 { padding-bottom: calc(min(10px, 0.69vw) * 7); } .pb_80 { padding-bottom: calc(min(10px, 0.69vw) * 8); } .pb_90 { padding-bottom: calc(min(10px, 0.69vw) * 9); } .pb_100 { padding-bottom: calc(min(10px, 0.69vw) * 10); } .d_flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .d_flex.column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .d_flex.jc_between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .d_block { display: block; } .d_block_inline { display: inline-block; } .hp_shadow { -webkit-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15); box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15); } .hp_relative { position: relative; } .hp_small { font-size: 0.7em; font-weight: 400; } .w_full { width: 100%; } .border-r_full { border-radius: 1em; } .border { border: 1px solid currentColor; } /* ファイル名: _unique.scss 配置内容: ある特定の場所でしか使用していないスタイル ※どの画面で使用しているかそれぞれコメントを残す接頭辞: un_ 参考元: https://qiita.com/kum44/items/117b32a4e5bdf102b1cf */ /************************************************************ 問い合わせフォーム ************************************************************/ form input, form textarea { font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-size: 16px; padding: 5px 10px; background: #f7f7f7; border: 1px solid #ececec !important; width: 100%; } .contact_form { margin-bottom: 40px; } .contact_form li { padding: 15px 0; border-bottom: 1px dashed #d0cece; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } .contact_form li:last-child { border-bottom: none; } .contact_form .label { width: 35%; text-align: right; padding-right: 20px; } .contact_form .form-item { width: 65%; padding-left: 20px; border-left: 1px solid #d0cece; } .required:before { content: "必須"; display: inline-block; font-size: 12px; color: var(--col-white); background: var(--col-org); position: absolute; left: 0; top: 17px; padding: 0 5px 1px; } #mail_form h2 { color: var(--col-white); background: var(--col-mid-gry); padding-left: 10px; } input[type=submit] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 280px; height: 60px; text-decoration: none; color: var(--col-white); font-size: 16px; font-weight: 500; background: var(--grad-org); background: var(--grad-org-bend); letter-spacing: 0; z-index: 10; margin: 0 auto; cursor: pointer; border: none !important; border-radius: 30px; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25); box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25); } input[type=submit]:hover { opacity: 0.7; -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.25); box-shadow: 0 0 0 rgba(0, 0, 0, 0.25); } input[type=submit].back { margin-bottom: 20px; } @media (max-width: 767px) { .contact_form .label { width: 100%; text-align: left; margin-bottom: 10px; } .required { padding-left: 40px; } .contact_form .form-item { width: 100%; border-left: none; padding: 0 0 0 0; } } /************************************************************ Events Manager ************************************************************/ .em.pixelbones blockquote .bl_btn, .em.pixelbones dl .bl_btn, .em.pixelbones figure .bl_btn, .em.pixelbones ol .bl_btn, .em.pixelbones p .bl_btn, .em.pixelbones pre .bl_btn, .em.pixelbones table .bl_btn, .em.pixelbones ul .bl_btn { display: inline-block; font-size: 1rem; line-height: 1; border-radius: 9999px; line-height: 1; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; cursor: pointer; padding: 0.7em 1em; font-size: 0.8em; } .em.pixelbones blockquote .bl_btn.has_icon, .em.pixelbones dl .bl_btn.has_icon, .em.pixelbones figure .bl_btn.has_icon, .em.pixelbones ol .bl_btn.has_icon, .em.pixelbones p .bl_btn.has_icon, .em.pixelbones pre .bl_btn.has_icon, .em.pixelbones table .bl_btn.has_icon, .em.pixelbones ul .bl_btn.has_icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; justify-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; align-items: center; gap: 0.3em; } .em.pixelbones blockquote .bl_btn.has_icon svg, .em.pixelbones dl .bl_btn.has_icon svg, .em.pixelbones figure .bl_btn.has_icon svg, .em.pixelbones ol .bl_btn.has_icon svg, .em.pixelbones p .bl_btn.has_icon svg, .em.pixelbones pre .bl_btn.has_icon svg, .em.pixelbones table .bl_btn.has_icon svg, .em.pixelbones ul .bl_btn.has_icon svg { width: 1.2em; vertical-align: bottom; } .em.pixelbones blockquote .bl_btn.hp_shadow:hover, .em.pixelbones dl .bl_btn.hp_shadow:hover, .em.pixelbones figure .bl_btn.hp_shadow:hover, .em.pixelbones ol .bl_btn.hp_shadow:hover, .em.pixelbones p .bl_btn.hp_shadow:hover, .em.pixelbones pre .bl_btn.hp_shadow:hover, .em.pixelbones table .bl_btn.hp_shadow:hover, .em.pixelbones ul .bl_btn.hp_shadow:hover { -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.25); } .em.pixelbones blockquote .bl_section-desc, .em.pixelbones dl .bl_section-desc, .em.pixelbones figure .bl_section-desc, .em.pixelbones ol .bl_section-desc, .em.pixelbones p .bl_section-desc, .em.pixelbones pre .bl_section-desc, .em.pixelbones table .bl_section-desc, .em.pixelbones ul .bl_section-desc { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 5%; } @media screen and (max-width: 768px) { .em.pixelbones blockquote .bl_section-desc, .em.pixelbones dl .bl_section-desc, .em.pixelbones figure .bl_section-desc, .em.pixelbones ol .bl_section-desc, .em.pixelbones p .bl_section-desc, .em.pixelbones pre .bl_section-desc, .em.pixelbones table .bl_section-desc, .em.pixelbones ul .bl_section-desc { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .em.pixelbones blockquote .bl_section-desc.is_rev .bl_section-heading, .em.pixelbones dl .bl_section-desc.is_rev .bl_section-heading, .em.pixelbones figure .bl_section-desc.is_rev .bl_section-heading, .em.pixelbones ol .bl_section-desc.is_rev .bl_section-heading, .em.pixelbones p .bl_section-desc.is_rev .bl_section-heading, .em.pixelbones pre .bl_section-desc.is_rev .bl_section-heading, .em.pixelbones table .bl_section-desc.is_rev .bl_section-heading, .em.pixelbones ul .bl_section-desc.is_rev .bl_section-heading { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .em.pixelbones blockquote .bl_section-desc.is_rev .bl_section-detail, .em.pixelbones dl .bl_section-desc.is_rev .bl_section-detail, .em.pixelbones figure .bl_section-desc.is_rev .bl_section-detail, .em.pixelbones ol .bl_section-desc.is_rev .bl_section-detail, .em.pixelbones p .bl_section-desc.is_rev .bl_section-detail, .em.pixelbones pre .bl_section-desc.is_rev .bl_section-detail, .em.pixelbones table .bl_section-desc.is_rev .bl_section-detail, .em.pixelbones ul .bl_section-desc.is_rev .bl_section-detail { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } } .em.pixelbones blockquote .bl_section-heading .el_en, .em.pixelbones dl .bl_section-heading .el_en, .em.pixelbones figure .bl_section-heading .el_en, .em.pixelbones ol .bl_section-heading .el_en, .em.pixelbones p .bl_section-heading .el_en, .em.pixelbones pre .bl_section-heading .el_en, .em.pixelbones table .bl_section-heading .el_en, .em.pixelbones ul .bl_section-heading .el_en { font-size: clamp(36px, 6.94vw, 100px); letter-spacing: 0.1em; margin-right: -0.1em; line-height: 1; font-weight: 700; opacity: 0.5; text-align: right; } .em.pixelbones blockquote .bl_section-heading .el_ja, .em.pixelbones dl .bl_section-heading .el_ja, .em.pixelbones figure .bl_section-heading .el_ja, .em.pixelbones ol .bl_section-heading .el_ja, .em.pixelbones p .bl_section-heading .el_ja, .em.pixelbones pre .bl_section-heading .el_ja, .em.pixelbones table .bl_section-heading .el_ja, .em.pixelbones ul .bl_section-heading .el_ja { font-size: clamp(24px, 2.43vw, 35px); letter-spacing: 0.1em; line-height: 1; font-weight: 700; text-align: right; } .em.pixelbones blockquote .bl_section-detail, .em.pixelbones dl .bl_section-detail, .em.pixelbones figure .bl_section-detail, .em.pixelbones ol .bl_section-detail, .em.pixelbones p .bl_section-detail, .em.pixelbones pre .bl_section-detail, .em.pixelbones table .bl_section-detail, .em.pixelbones ul .bl_section-detail { display: inline-block; padding-right: 1rem; } @media screen and (max-width: 768px) { .em.pixelbones blockquote .bl_section-detail, .em.pixelbones dl .bl_section-detail, .em.pixelbones figure .bl_section-detail, .em.pixelbones ol .bl_section-detail, .em.pixelbones p .bl_section-detail, .em.pixelbones pre .bl_section-detail, .em.pixelbones table .bl_section-detail, .em.pixelbones ul .bl_section-detail { padding-right: 0; } } .em.pixelbones blockquote .bl_section-detail .el_heading, .em.pixelbones dl .bl_section-detail .el_heading, .em.pixelbones figure .bl_section-detail .el_heading, .em.pixelbones ol .bl_section-detail .el_heading, .em.pixelbones p .bl_section-detail .el_heading, .em.pixelbones pre .bl_section-detail .el_heading, .em.pixelbones table .bl_section-detail .el_heading, .em.pixelbones ul .bl_section-detail .el_heading { font-size: 1.5rem; } .em.pixelbones a { color: inherit; background-color: inherit; -webkit-box-shadow: inherit; box-shadow: inherit; } .em.pixelbones a.bl_btn { display: inline-block; font-size: 1rem; line-height: 1; border-radius: 9999px; line-height: 1; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; cursor: pointer; padding: 0.7em 1em; font-size: 0.8em; } .em.pixelbones a.bl_btn.has_icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; justify-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; align-items: center; gap: 0.3em; } .em.pixelbones a.bl_btn.has_icon svg { width: 1.2em; vertical-align: bottom; } .em.pixelbones a.bl_btn.hp_shadow:hover { -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.25) !important; box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.25) !important; } .em.pixelbones a.col_black { color: var(--col-black) !important; fill: var(--col-black) !important; } .em.pixelbones a.col_white { color: var(--col-white) !important; fill: var(--col-white) !important; } .em.pixelbones a.col_org { color: var(--col-org) !important; fill: var(--col-org) !important; } .em.pixelbones a.col_dark_white { color: var(--col-dark-white) !important; fill: var(--col-dark-white) !important; } .em.pixelbones a.col_grad_org { display: inline-block !important; background: var(--grad-org) !important; background: var(--grad-org-bend) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } .em.pixelbones a.bg_white { background: var(--col-white) !important; } .em.pixelbones a.bg_dark_white { background: var(--col-dark-white) !important; } .em.pixelbones a.bg_light_org { background: var(--col-light-org) !important; } .em.pixelbones a.bg_org { background: var(--col-org) !important; } .em.pixelbones a.bg_grad_org { background: var(--grad-org) !important; background: var(--grad-org-bend) !important; } .em.pixelbones a.bg_grad_org2 { background: var(--grad-org2) !important; background: var(--grad-org2-bend) !important; } .em.pixelbones a.fw_400 { font-weight: 400; } .em.pixelbones a.fw_500 { font-weight: 500; } .em.pixelbones a.fw_600 { font-weight: 600; } .em.pixelbones a.fw_700 { font-weight: 700; } .em.pixelbones a.text_center { text-align: center; } .em.pixelbones a.text_right { text-align: right; } .em.pixelbones a.mt_0 { margin-top: 0; } .em.pixelbones a.mt_10 { margin-top: calc(var(--fluid-px) * 1); } .em.pixelbones a.mt_20 { margin-top: calc(var(--fluid-px) * 2); } .em.pixelbones a.mt_30 { margin-top: calc(var(--fluid-px) * 3); } .em.pixelbones a.mt_40 { margin-top: calc(var(--fluid-px) * 4); } .em.pixelbones a.mt_50 { margin-top: calc(var(--fluid-px) * 5); } .em.pixelbones a.mt_60 { margin-top: calc(var(--fluid-px) * 6); } .em.pixelbones a.mt_70 { margin-top: calc(var(--fluid-px) * 7); } .em.pixelbones a.mt_80 { margin-top: calc(var(--fluid-px) * 8); } .em.pixelbones a.mt_90 { margin-top: calc(var(--fluid-px) * 9); } .em.pixelbones a.mt_100 { margin-top: calc(var(--fluid-px) * 10); } @media screen and (max-width: 768px) { .em.pixelbones a.mt_0_md { margin-top: 0; } } .em.pixelbones a.pt_0 { padding-top: 0; } .em.pixelbones a.pt_10 { padding-top: calc(var(--fluid-px) * 1); } .em.pixelbones a.pt_20 { padding-top: calc(var(--fluid-px) * 2); } .em.pixelbones a.pt_30 { padding-top: calc(var(--fluid-px) * 3); } .em.pixelbones a.pt_40 { padding-top: calc(var(--fluid-px) * 4); } .em.pixelbones a.pt_50 { padding-top: calc(var(--fluid-px) * 5); } .em.pixelbones a.pt_60 { padding-top: calc(var(--fluid-px) * 6); } .em.pixelbones a.pt_70 { padding-top: calc(var(--fluid-px) * 7); } .em.pixelbones a.pt_80 { padding-top: calc(var(--fluid-px) * 8); } .em.pixelbones a.pt_90 { padding-top: calc(var(--fluid-px) * 9); } .em.pixelbones a.pt_100 { padding-top: calc(var(--fluid-px) * 10); } .em.pixelbones a.pb_0 { padding-bottom: 0; } .em.pixelbones a.pb_10 { padding-bottom: calc(min(10px, 0.69vw) * 1); } .em.pixelbones a.pb_20 { padding-bottom: calc(min(10px, 0.69vw) * 2); } .em.pixelbones a.pb_30 { padding-bottom: calc(min(10px, 0.69vw) * 3); } .em.pixelbones a.pb_40 { padding-bottom: calc(min(10px, 0.69vw) * 4); } .em.pixelbones a.pb_50 { padding-bottom: calc(min(10px, 0.69vw) * 5); } .em.pixelbones a.pb_60 { padding-bottom: calc(min(10px, 0.69vw) * 6); } .em.pixelbones a.pb_70 { padding-bottom: calc(min(10px, 0.69vw) * 7); } .em.pixelbones a.pb_80 { padding-bottom: calc(min(10px, 0.69vw) * 8); } .em.pixelbones a.pb_90 { padding-bottom: calc(min(10px, 0.69vw) * 9); } .em.pixelbones a.pb_100 { padding-bottom: calc(min(10px, 0.69vw) * 10); } .em.pixelbones a.d_flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .em.pixelbones a.d_flex.column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .em.pixelbones a.d_flex.jc_between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .em.pixelbones a.hp_shadow { -webkit-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15) !important; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15) !important; } .em.pixelbones a.hp_relative { position: relative; } .em.pixelbones a.hp_small { font-size: 0.7em; font-weight: 400; } #em-wrapper div:nth-of-type(n+3) { display: none; } .em.pixelbones.input input[type=submit] { color: var(--col-white) !important; font-size: 1.2rem !important; padding: 0.5em 0 !important; height: unset !important; border: none !important; } .em.pixelbones.input input[type=submit]:hover { color: var(--col-white) !important; } .em.pixelbones .input label, .em.pixelbones .input legend, .em.pixelbones.input label, .em.pixelbones.input legend　 { color: var(--col-org) !important; } @media screen and (min-width: 769px) { .em.em-event-booking-form .em-booking-section　 { margin: 0; } } @media screen and (min-width: 769px) { .em.em-event-booking-form .em-booking-form .input-group, .em.em-event-booking-form .em-booking-form .input-user-field { display: grid !important; grid-template-columns: 30% 1fr; gap: 1rem; border-top: 1px dotted var(--col-gray); padding-top: 1rem; margin-bottom: 1rem !important; } .em.em-event-booking-form .em-booking-form .input-group label, .em.em-event-booking-form .em-booking-form .input-user-field label { border-right: 1px dotted var(--col-gray); padding-right: 1rem; } .em.em-event-booking-form .em-booking-form .input-group .input-group, .em.em-event-booking-form .em-booking-form .input-group .form_half .input-group, .em.em-event-booking-form .em-booking-form .input-group .form_half .input-user-field, .em.em-event-booking-form .em-booking-form .input-group.input-field-data_privacy_consent, .em.em-event-booking-form .em-booking-form .input-user-field .input-group, .em.em-event-booking-form .em-booking-form .input-user-field .form_half .input-group, .em.em-event-booking-form .em-booking-form .input-user-field .form_half .input-user-field, .em.em-event-booking-form .em-booking-form .input-user-field.input-field-data_privacy_consent { display: block !important; border-top: none; padding-top: 0; } .em.em-event-booking-form .em-booking-form .input-group .input-group label, .em.em-event-booking-form .em-booking-form .input-group .form_half .input-group label, .em.em-event-booking-form .em-booking-form .input-group .form_half .input-user-field label, .em.em-event-booking-form .em-booking-form .input-group.input-field-data_privacy_consent label, .em.em-event-booking-form .em-booking-form .input-user-field .input-group label, .em.em-event-booking-form .em-booking-form .input-user-field .form_half .input-group label, .em.em-event-booking-form .em-booking-form .input-user-field .form_half .input-user-field label, .em.em-event-booking-form .em-booking-form .input-user-field.input-field-data_privacy_consent label { border-right: none; padding-right: 0; } } .em.em-event-booking-form .em-booking-form .form_half { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; } .em.em-event-booking-form .em-booking-form .form_half p { display: block !important; border-top: none; padding-top: 0; } .em.em-event-booking-form .em-booking-form .form_half p label { border-right: none; padding-right: 0; } @media screen and (min-width: 769px) { .em.em-event-booking-form .em-booking-section　 { margin: 0; } }/*# sourceMappingURL=style.css.map */