@charset "UTF-8"; :root { --hide-y: 40px; --innerW: 90%; --program-left: 5%; --color-white: #FFFFFF; --color-black: #000000; --color-red: #D82888; --color-gray: #A3A3A3; --color-purple: #451565; --color-purple2: #880E8E; --color-yellow: #FFFF00; --header-height: 60px; --fs-kv-info: clamp(24px, 6.14vw, 53px); --fs-kv-date: clamp(34px, 8.8vw, 76px); --fs-kv-youbi: clamp(20px, 4.634vw, 40px); --fs-kv-time: clamp(28px, 7.415vw, 64px); --fs-ttl-section: min(14vw,56px); --fs-ttl-section-ja: min(3.5vw,14px); --fs-accordion-button: min(5vw,20px); --fs-40-56: min(10vw,40px); --fs-40-64: min(10vw,40px); --fs-36-18: min(9vw,36px); --fs-22-28: min(5.5vw,22px); --fs-22: min(5.5vw,22px); --fs-18-20: min(4.5vw,18px); --fs-18-24: min(4.5vw,18px); --fs-18: min(4.5vw,18px); --fs-16-24: min(4vw,16px); --fs-16-18: min(4vw,16px); --fs-15-18: min(3.75vw,15px); --fs-16: min(4vw,16px); --fs-15-16: min(3.75vw,15px); --fs-15: min(3.75vw,15px); --fs-14-15: min(3.5vw,14px); --fs-13: min(3.25vw,13px); --fs-10-13: min(2.5vw,10px); } @media all and (min-width: 864px) { :root { --innerW: 87.22%; --max-width: 1280px; --program-left: 6.39%; --color-white: #FFFFFF; --fs-kv-info: 4.2rem; --fs-kv-date: 6.4rem; --fs-kv-youbi: 3.2rem; --fs-kv-time: 5.2rem; --fs-ttl-section: 7.2rem; --fs-ttl-section-ja: 1.6rem; --fs-accordion-button: 2.8rem; --fs-40-56: 5.6rem; --fs-40-64: 6.4rem; --fs-36-18: 1.8rem; --fs-22-28: 2.8rem; --fs-22: 2.2rem; --fs-18-24: 2.4rem; --fs-18-20: 2.0rem; --fs-16-24: 2.4rem; --fs-16-18: 1.8rem; --fs-15-18: 1.8rem; --fs-15-16: 1.6rem; --fs-18: 1.8rem; --fs-16: 1.6rem; --fs-15: 1.5rem; --fs-13: 1.3rem; --fs-14-15: 1.5rem; --fs-10-13: 1.3rem; } } /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* 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; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* 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; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } html { font-size: 3.125vw; } body { font-size: 14px; font-size: 1.4rem; } /* Small Devices, Tablets */ @media all and (min-width: 768px) { html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } } /* PC */ :root { --vh: 100vh; } body { color: #000; font-family: "hiragino-kaku-gothic-pron", "Helvetica Neue", "Segoe UI", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ＭＳＰゴシック", sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: "palt" 1; font-feature-settings: "palt" 1; overscroll-behavior-y: none; touch-action: manipulation; overflow-wrap: anywhere; word-break: normal; line-break: strict; line-height: 1.6; letter-spacing: 0.04em; } .sofia_r { font-family: "sofia-pro", sans-serif; font-weight: 400; letter-spacing: 0em; } .sofia_b { font-family: "sofia-pro", sans-serif; font-weight: 900; letter-spacing: 0em; } .sofia_sb { font-family: "sofia-pro", sans-serif; font-weight: 700; letter-spacing: 0em; } .bold { font-family: "hiragino-kaku-gothic-pron", sans-serif; font-weight: 600; } a { color: #000; text-decoration: none; text-decoration-thickness: 1px; } li { list-style: none; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } img { vertical-align: top; } header#c-header { width: 100%; position: fixed; left: 0px; top: 0px; background: rgba(255, 255, 255, 0.5); z-index: 10; } #b-btn { position: absolute; width: 100%; background: rgba(255, 255, 255, 0.5); z-index: 2; } .c-ttl_section { margin-bottom: min(12vw,48px); } .c-ttl_section p { margin-top: min(2vw,8px); } a.c-btn { display: grid; place-content: center; } a.c-btn span { line-height: 1; display: block; } a.c-btn.round { border-radius: 100vmax; } a.c-btn.bdr_black { border: 1px solid var(--color-black); } a.c-btn.bdr_black span { color: var(--color-black); position: relative; top: 1px; } a.c-btn.bdr_white { border: 1px solid var(--color-white); } a.c-btn.bdr_white span { color: var(--color-white); position: relative; top: 1px; } a.c-btn.gradient_yellow { background: linear-gradient(90deg, rgb(255, 255, 0) 6%, rgb(143, 255, 127) 50%, rgb(31, 245, 255) 94%); height: 74px; box-sizing: border-box; padding: 8px; display: block; } a.c-btn.gradient_yellow .inr { width: 100%; position: relative; height: 56px; border-radius: 100vmax; overflow: hidden; display: grid; place-content: center; } a.c-btn.gradient_yellow .inr:before { content: ""; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: var(--color-white); } a.c-btn.gradient_yellow .inr span { position: relative; font-family: "hiragino-kaku-gothic-pron", sans-serif; font-weight: 600; font-size: var(--fs-16-24); } footer#page_footer { background: var(--color-purple); position: relative; width: 100%; } footer#page_footer .footer_inner { padding: min(12vw,48px) 0; } footer#page_footer p.logo { width: 194px; margin-inline: auto; } footer#page_footer .copy { margin-top: 0.7em; } .accordion { width: 100%; border-top: 1px solid var(--color-black); } .accordion button[data-toggle-accordion] { display: flex; width: 100%; padding: 32px 16px; align-items: center; cursor: pointer; } .accordion button[data-toggle-accordion] .icon { width: 19px; height: 19px; position: relative; margin-right: 32px; } .accordion button[data-toggle-accordion] .icon svg { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } .accordion button[data-toggle-accordion] .icon .st0 { transition: rotate 0.3s ease; transform-origin: center; } .accordion .c-accordion_content { height: 0px; overflow: hidden; transition: height 0.6s ease; } .accordion.open button[data-toggle-accordion] .st0 { rotate: 90deg; } a.c-btn_entry, header#page_header { transition: transform 0.6s ease; } #b-glbnav { transition: transform 0.6s ease 0s, opacity 0.5s ease 0s; } .disable_nav #b-glbnav, .disable_nav a.c-btn_entry, .disable_nav header#page_header { transform: translate3d(0, -140%, 0); } header#page_header { width: 100%; height: var(--header-height); background: var(--color-white); z-index: 10; position: fixed; top: 0px; left: 0px; } button[data-menu] { width: 84px; position: fixed; left: 0px; top: 0px; height: var(--header-height); display: block; } button[data-menu] .inr { width: 36px; height: 12px; position: absolute; top: 50%; left: 50%; margin: -6px 0 0 -18px; } button[data-menu] span.bar { height: 3px; background: var(--color-black); display: block; position: absolute; left: 0px; transition: rotate 0.2s ease; } button[data-menu] span.bar:nth-of-type(1) { width: 100%; top: 0px; } button[data-menu] span.bar:nth-of-type(2) { width: 24px; top: 9px; } a.c-btn_entry { position: fixed; z-index: 10; top: 12px; color: var(--color-white); display: flex; align-items: center; right: 16px; } a.c-btn_entry span.inr { width: 160px; height: 36px; display: grid; place-content: center; background: var(--color-purple2); border-radius: 100vmax; } a.c-btn_entry span.inr span.txt { color: var(--color-whtie); font-size: var(--fs-22); position: relative; top: -2px; } a.c-btn_entry span.icon { width: 23px; height: 21px; position: relative; margin-left: 6px; } a.c-btn_entry span.icon svg { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; fill: var(--color-purple2); } #b-glbnav { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background: var(--color-purple); z-index: 10; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } #b-glbnav .c-inner { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; overflow: auto; display: grid; place-content: center; } .show_menu #b-glbnav { opacity: 1; pointer-events: auto; } .show_menu button[data-menu] span.bar:nth-of-type(1) { rotate: 45deg; top: 6px; } .show_menu button[data-menu] span.bar:nth-of-type(2) { width: 36px; rotate: -45deg; top: 6px; } section[data-block], footer { transform: translateZ(1px); z-index: 2; } .scrolled #kv { opacity: 0; } @media all and (min-width: 864px) { body { line-height: 1.8; letter-spacing: 0.04em; } header#page_header { filter: drop-shadow(0 6px 32px rgba(160, 160, 160, 0.12)); z-index: 10; position: fixed; top: 0px; left: 0px; } #b-glbnav { height: var(--header-height); background: none; opacity: 1; pointer-events: auto; transition: transform 0.6s ease 0s, opacity 0s ease 0s; } #b-glbnav .c-inner { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; overflow: auto; display: block; place-content: revert; } #b-glbnav ul { height: var(--header-height); display: flex; align-items: center; column-gap: 24px; } #b-glbnav ul li a { transition: color 0.15s linear; } #b-glbnav ul li a:hover { color: var(--color-purple2); } .c-ttl_section p { margin-top: 14px; } a.c-btn.bdr_black span { top: -1px; } a.c-btn.bdr_white span { top: -2px; } a.c-btn.gradient_yellow .inr:before { transition: opacity 0.15s linear; } a.c-btn.gradient_yellow:hover .inr:before { opacity: 0.6; } a.c-btn_entry { z-index: 12; } a.c-btn_entry:hover span.inr span.txt { color: var(--color-yellow); } a.c-btn_entry:hover span.icon { transform: translate3d(4px, 0, 0); } a.c-btn_entry span.inr { width: 200px; height: 36px; } a.c-btn_entry span.inr span.txt { transition: color 0.15s linear; top: -1px; } a.c-btn_entry span.icon { transition: transform 0.2s ease; } button[data-menu] { display: none; } footer#page_footer .footer_inner { padding: 48px 0; } footer#page_footer p.logo { width: 194px; margin-inline: auto; margin-bottom: 16px; } .accordion button[data-toggle-accordion] { padding: 22px 16px; } } @media all and (min-width: 960px) { #b-glbnav ul { column-gap: 40px; } } #b-glbnav ul li { text-align: center; line-height: 1; margin-bottom: 40px; } #b-glbnav ul li:last-child { margin-bottom: 0px; } #b-glbnav ul li a { font-size: var(--fs-36-18); font-family: "sofia-pro", sans-serif; font-weight: 900; letter-spacing: 0em; color: var(--color-white); } #b-glbnav ul li a.active { color: var(--color-purple2); } footer#page_footer .copy { text-align: center; } footer#page_footer .copy p { font-size: var(--fs-13); color: var(--color-white); } #c-kv .c-info p.place { font-size: var(--fs-kv-info); color: var(--color-white); } #c-kv .c-info p.date { color: var(--color-white); } #c-kv .c-info p.date span.d { font-size: var(--fs-kv-date); } #c-kv .c-info p.date span.youbi { font-size: var(--fs-kv-youbi); } #c-kv .c-info p.date span.time { font-size: var(--fs-kv-time); } .c-ttl_section h3 { font-size: var(--fs-ttl-section); background: linear-gradient(90deg, rgb(46, 142, 254) 4%, rgb(193, 68, 174) 50%, rgb(146, 66, 178) 96%); background: linear-gradient(90deg, rgb(46, 142, 254) 4%, rgb(193, 68, 174) 50%, rgb(146, 66, 178) 96%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; display: inline-block; line-height: 1.1; } .c-ttl_section p { font-size: var(--fs-ttl-section-ja); font-family: "hiragino-kaku-gothic-pron", sans-serif; font-weight: 600; letter-spacing: 2.8px; line-height: 1.1; } .c-ttl_section.center { text-align: center; } .c-ttl_section.white h3 { -webkit-background-clip: revert; -webkit-text-fill-color: revert; color: var(--color-white); background: none; } .c-ttl_section.white p { color: var(--color-white); } .c-ttl_content h4 { font-family: "hiragino-kaku-gothic-pron", sans-serif; font-weight: 600; font-size: var(--fs-18-20); line-height: 1.4; } #concept h5 { font-size: var(--fs-18-20); line-height: 1.6; font-family: "hiragino-kaku-gothic-pron", sans-serif; font-weight: 600; } #concept .txt p { font-size: var(--fs-15-18); line-height: 1.6; } #concept .c-list_mc .mc_info { text-align: center; } #concept .c-list_mc .mc_info p { font-size: var(--fs-18-20); font-family: "hiragino-kaku-gothic-pron", sans-serif; font-weight: 600; } #concept .c-list_mc .c-round_box { margin-top: min(4vw,16px); } #concept .c-list_mc .c-round_box span { font-size: var(--fs-15-18); } .c-table dt, .c-table dd { font-size: var(--fs-15-18); line-height: 1.6; } .c-list_links h4 { text-align: center; color: var(--color-gray); line-height: 1.1; } .c-list_links .lead p { font-size: var(--fs-15-16); line-height: 1.8; } .accordion .c-ttl_line span.name_line { font-family: "hiragino-kaku-gothic-pron", sans-serif; font-weight: 600; font-size: var(--fs-15-18); } .accordion p.txt_place { font-family: "hiragino-kaku-gothic-pron", sans-serif; font-weight: 600; font-size: var(--fs-22); } .accordion p.txt_access { font-size: var(--fs-18); } .accordion button .txt { font-size: var(--fs-accordion-button); font-family: "hiragino-kaku-gothic-pron", sans-serif; font-weight: 600; } .accordion .lead p { font-size: var(--fs-18); } #program :is(.num span, h4, .txt p) { color: var(--color-white); } #program .num span { font-size: var(--fs-40-64); } #program h4 { font-family: "hiragino-kaku-gothic-pron", sans-serif; font-weight: 600; font-size: var(--fs-22-28); } #program .txt p { font-size: var(--fs-16-18); } #program .c-col2_r dl dt { font-size: var(--fs-18-20); color: var(--color-white); } #program .c-col2_r dl dd a.c-btn { height: 25px; } #program .c-col2_r dl dd a.c-btn .inr { height: 25px; } #program .c-col2_r dl dd span { font-size: var(--fs-15-16); line-height: 1; position: relative; } #program .c-list_guest h4 { font-size: var(--fs-18-20); } #program .c-list_guest p { color: var(--color-white); font-size: var(--fs-15); } #program .c-list_guest .btn_wrap span { font-size: var(--fs-15-16); } #overview .c-table dt { font-family: "hiragino-kaku-gothic-pron", sans-serif; font-weight: 600; font-size: var(--fs-16-18); } #overview .c-table dd { font-size: var(--fs-16-18); } #overview .c-table p:has(small) { position: relative; padding-left: 1.2em; margin-top: min(2vw,8px); } #overview .c-table p:has(small):before { content: "※"; position: absolute; top: 0px; left: 0px; } #overview .c-table p:has(var) { position: relative; padding-left: 1.2em; margin-top: min(2vw,8px); } #overview .c-table p:has(var):before { content: "※"; position: absolute; top: 0px; left: 0px; color:#ff0000; } #access .info_access dl dt { font-family: "hiragino-kaku-gothic-pron", sans-serif; font-weight: 600; font-size: var(--fs-16-18); line-height: 1.8; } #access .info_access dl dd { font-size: var(--fs-15); } #access .c-btn_wrap span { font-size: var(--fs-16); } #entry .c-apply p { font-family: "hiragino-kaku-gothic-pron", sans-serif; font-weight: 600; font-size: var(--fs-16-18); } #entry .c-apply .c-period dt { font-size: var(--fs-16-18); line-height: 1.1; background: var(--color-red); color: var(--color-white); font-family: "hiragino-kaku-gothic-pron", sans-serif; font-weight: 600; } #entry .c-apply .c-period dd { color: var(--color-red); font-family: "hiragino-kaku-gothic-pron", sans-serif; font-weight: 600; font-size: var(--fs-18-24); } #entry .c-apply a.c-btn span { font-size: var(--fs-18-24); } .c-list_links h4 { font-size: var(--fs-40-56); } .c-list_links .lead p { font-size: var(--fs-16); } @media all and (min-width: 864px) { #b-glbnav { z-index: 11; } #b-glbnav ul { padding-left: 56px; } #b-glbnav ul li { margin-bottom: 0px; } #b-glbnav ul li a { font-size: var(--fs-36-18); font-family: "sofia-pro", sans-serif; font-weight: 900; letter-spacing: 0em; color: var(--color-black); } #concept h5 { line-height: 1.8; } #concept .txt p { line-height: 1.8; } } /*# sourceMappingURL=common.css.map */