@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):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-pcace' property for textarea elements on Safari */ textarea { white-pcace: 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 */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-pcace; -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要素、標準スタイル、リセットCSS 接頭辞: なし参考元: https://qiita.com/kum44/items/117b32a4e5bdf102b1cf */ /* ファイル名: _function.scss 配置内容: 関数指定参考元: https://jajaaan.co.jp/css/responsive-font-size/ (font-sizeのvw指定) */ /* ファイル名: _variables.scss 配置内容: テーマごとに変えたい変数を定義参考元: https://qiita.com/kum44/items/117b32a4e5bdf102b1cf */ /* ファイル名: _base.scss 配置内容: HTML要素、標準スタイル、リセットCSS 接頭辞: なし参考元: https://qiita.com/kum44/items/117b32a4e5bdf102b1cf */ /* ファイル名: _mixins.scss 配置内容: コンポーネント化された使いまわし可能なスタイルの定義等参考元: https://itokoba.com/archives/2332#toc4 */ :root { --col-white: #fff; --col-text-main: #565656; --col-text-white: #fff; --col-text-gray: #858585; --col-text-light-gray: #c2c2c2; --col-text-accent: #529f8c; --col-accent: #63BEA8; --col-text-dark: #2F2F2F; --col-light-gray: #EEEEEE; --col-ex-light-gray: #F9F9F9; --col-orange: #BA666B; --col-yellow: #C4B876; --col-purple: #7B63BE; --col-dark-gray: #565656; --ff-sans: "Zen Kaku Gothic New", sans-serif; --fw-light: 300; --fw-midium: 400; --fw-bold: 600; --size-width: 89%; --space-y: 60px; --swiper-navigation-size: 1.2rem; } @media screen and (min-width: 769px) { :root { --size-width: 100%; } } html { font-size: min(16px, 3.7vw); font-family: var(--ff-sans); font-weight: var(--fw-midium); color: var(--col-text-main); background-color: var(--col-ex-light-gray); scroll-behavior: smooth; } @media screen and (min-width: 769px) { html { font-size: 16px; } } body { scroll-behavior: smooth; } body.is_open { overflow: hidden; } a { opacity: 1; transition: all 0.25s ease-in-out; } a:hover, a:active, a:focus { opacity: 0.8; text-decoration: none; } img { vertical-align: bottom; } figure { display: block; margin-bottom: 0; } picture { display: block; } @media screen and (min-width: 769px) { body.is_open { overflow: inherit; } #app { margin-top: 0; } #main, #footer { width: 100%; padding-left: 88px; overflow: unset; } } summary { display: block; list-style: none; cursor: pointer; } summary::-webkit-details-marker { display: none; } @media screen and (min-width: 1201px) { #app::-webkit-scrollbar { display: none; } } /* ファイル名: _layout.scss 配置内容: ヘッダー、メインエリアなどの大きなレイアウトを形成する要素。あくまでコンテンツが入る「枠」を定義するだけ。レイアウトに関わるスタイリング（gridやflex、width、margin、padding、float、positionなど）接頭辞: ly_ 参考元: https://qiita.com/kum44/items/117b32a4e5bdf102b1cf */ .ly_size { max-width: 1600px; margin-left: auto; margin-right: auto; margin-top: 100px; padding: 0 20px; } .ly_size__inner { width: 100%; margin-left: auto; margin-right: auto; } .ly_x-space { padding-left: 20px; padding-right: 20px; } .ly_bg { width: 100%; padding: 40px 20px; margin-top: 100px; } .ly_present-form > * + * { margin-top: 30px; } @media screen and (min-width: 769px) { .ly_size { max-width: 1040px; } .ly_size__inner { max-width: 940px; } .ly_2col { display: grid; grid-template-columns: 1fr 1fr; } .ly_2col > * + * { margin-top: 0; } .ly_2col > * { margin-top: 0 !important; } .columns_4\/6 { grid-template-columns: 40% 1fr; } .columns_6\/4 { grid-template-columns: 1fr 40%; } .ly_menu-content { display: grid; grid-template-columns: 30% 1fr; } .ly_menu-content > * { margin-top: 0 !important; } .ly_sticky-area { position: sticky; top: 60px; align-self: start; } } /* ファイル名: _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 */ .site_header { position: fixed; top: 0; left: 0; z-index: 3; display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center; justify-content: space-between; width: 100%; height: 98px; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); background-color: var(--col-white-opacity8); } .site_header > * { text-align: center; } .site_header img { width: 80%; max-width: 115px; } .site_heading { gap: 10px; padding: 5px 0; text-align: center; color: var(--col-white); background-color: var(--col-dark-pink); font-family: var(--ff-kiwi); font-size: 5.6vw; } .site_heading img { display: inline-block; width: 4em; padding: 0 0 0.4em 0.5em; } .site_navBtn { position: relative; width: 40px; height: 40px; display: block; } .site_navBtn span { position: absolute; left: 50%; display: block; width: 30px; height: 2px; background-color: var(--col-black); opacity: 1; transition: all 0.25s ease-in-out; } .site_navBtn span:nth-of-type(1) { top: 10px; transform: translate3d(-50%, 0, 0); } .site_navBtn span:nth-of-type(2) { top: 50%; transform: translate3d(-50%, -50%, 0); } .site_navBtn span:nth-of-type(3) { bottom: 10px; transform: translate3d(-50%, 0, 0); } .site_navBtn.is_open span:nth-of-type(1) { top: 50%; transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 315deg); } .site_navBtn.is_open span:nth-of-type(2) { opacity: 0; } .site_navBtn.is_open span:nth-of-type(3) { bottom: 50%; transform: translate3d(-50%, 50%, 0) rotate3d(0, 0, 1, -315deg); } .site_nav { position: fixed; bottom: 0; left: 0; display: block; width: 100%; padding: 10px 10px calc(env(safe-area-inset-bottom, 0) + 10px) 10px; z-index: 4; transition: all 0.25s ease-in-out; } .site_nav ul { background: #fff; border-radius: 100px; overflow: hidden; height: 50px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 10px 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); } .site_nav li .nav-ja { display: none; } .site_nav li a { display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; } .site_nav li a:hover, .site_nav li a:active { color: var(--col-accent); } .site_nav li span { font-size: clamp(10px, 3.1vw, 12px); line-height: 1; text-align: center; } .site_nav li svg { display: block; } .site_nav__icon { width: 21px; height: 21px; } .site_nav.is_open { left: unset; right: 0; width: -moz-fit-content; width: fit-content; } .site_nav.is_open ul { display: block; margin-left: auto; } .site_nav.is_open li:nth-of-type(1), .site_nav.is_open li:nth-of-type(2), .site_nav.is_open li:nth-of-type(3), .site_nav.is_open li:nth-of-type(4) { display: none; } .site_footer { background: var(--col-dark-gray); padding-bottom: 70px; } .site_footer__logo { width: 60%; margin: 0 auto; } .site_footer__inner { padding: 30px 20px 30px; } .site_footer__inner > * + * { margin-top: 15px; } .site_footer__content { font-weight: 400; color: var(--col-white); text-align: center; } .site_footer__content > * + * { margin-top: 10px; } .site_footer__name { font-size: 1.4rem; } .fv { position: relative; background-color: var(--col-beige); height: 100vh; max-height: 100svh; transition: all 0.35s ease-in-out; } .fv_bg::after { content: ""; position: absolute; background-color: rgba(35, 35, 35, 0.6); display: block; width: 100%; height: 100%; } .fv_hero { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: 100%; color: var(--col-text-white); text-align: center; } .fv_hero__logo { width: min(250px, 44.5%); margin-left: auto; margin-right: auto; } .fv_hero__message .ja { margin-top: 0.5em; font-size: min(24px, 4.2vw); } .fv_hero__message .en { margin-top: 0.2em; font-size: min(18px, 3.7vw); } .fv_catch { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); display: flex; align-items: center; justify-content: center; height: 70%; color: var(--col-white); writing-mode: vertical-rl; letter-spacing: 0.5em; line-height: 1.5; font-family: var(--ff-kiwi); font-size: 1.3rem; } .fv_timer { position: absolute; bottom: 80px; left: 20px; color: var(--col-text-white); } .fv_timer__time { letter-spacing: 0.1em; font-size: min(36px, 7.5vw); font-weight: 600; line-height: 1; } .fv_timer__date { line-height: 1; } /* Pages */ #main.under { padding-top: 50px; } .page_heading { position: fixed; top: 0; display: flex; justify-content: flex-start; align-items: center; width: 100%; height: 50px; background-color: var(--col-white); box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.15); padding: 0 50px 0 20px; z-index: 2; } .page_heading span { font-size: 1.2rem; font-weight: var(--fw-bold); } .pricing { margin-top: 60px; padding: 0 20px; } .pricing_list > * + * { margin-top: 30px; } .pricing_detail { display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: 1rem; padding: 1rem; color: var(--col-black); background: var(--col-white); } .pricing_detail__heading { font-size: 1.5rem; font-weight: var(--fw-bold); } .pricing_detail__amount { display: inline-block; text-align: right; } .pricing_detail__amount strong { font-size: 1.5rem; font-weight: var(--fw-bold); color: var(--col-orange); } .company { margin-top: 60px; } .company_table dl { border-top: 1px solid var(--col-accent); padding: 10px 10px; } .company_table dl:last-of-type { border-bottom: 1px solid var(--col-accent); } .company_table dt { font-weight: var(--fw-bold); } .company_table dd { margin-top: 10px; } .company_gallery { margin-top: 60px; } .company_gallery > * + * { margin-top: 30px; } .company_gallery figure { background-color: var(--col-fff); } .company_gallery figure img { width: 100%; } .company_gallery figcaption { padding: 1rem; text-align: center; color: var(--col-dark-brown); font-weight: var(--fw-bold); } .company_message { margin-top: 60px; color: var(--col-dark-brown); background-color: var(--col-fff); } .company_message strong { font-weight: var(--fw-bold); } .contact { margin-top: 60px; padding: 0 20px; } .contact_form-group { border-bottom: 2px solid var(--col-dark-brown); } .contact_form-group > * + * { margin-top: 0.5rem; } .contact_form-group label { font-size: 1.2rem; font-weight: var(--fw-bold); color: var(--col-dark-brown); } .contact_form-group strong { font-weight: var(--fw-bold); color: var(--col-red); } .contact_form-group input, .contact_form-group textarea { width: 100%; display: block; background-color: rgba(255, 255, 255, 0.7019607843); padding: 5px; } .contact_form-group input::-moz-placeholder, .contact_form-group textarea::-moz-placeholder { opacity: 0.7; } .contact_form-group input::placeholder, .contact_form-group textarea::placeholder { opacity: 0.7; } .contact_form-group textarea { height: 10em; line-height: 1.5; } .contact_submit { display: block; width: -moz-fit-content; width: fit-content; margin-left: auto; margin-right: auto; background-color: var(--col-green); padding: 0.5rem 1rem; font-weight: var(--fw-bold); color: var(--col-white); transition: all 0.25s ease-in-out; } .contact_submit:hover, .contact_submit:active { cursor: pointer; background-color: var(--col-dark-green); } .post_article { margin-top: 40px; } .schedule { margin-top: 60px; padding: 0 20px; } .schedule_nav { display: flex; flex-flow: row; gap: 1rem; } @media screen and (min-width: 1201px) { .schedule_nav { justify-content: flex-end; } } .schedule_list table { display: table; width: 100%; } .schedule_list > * + * { margin-top: 20px; } .schedule_list__days { position: sticky; top: 50px; z-index: 1; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; background-color: var(--col-accent); color: var(--col-white); font-weight: var(--fw-bold); border-bottom: 1px solid var(--col-white); border-right: 1px solid var(--col-accent); } .schedule_list__days::after { content: url("../img/icon_arrow.svg"); display: inline-block; transition: all 0.15s ease-in-out; } .schedule_list details[open] .schedule_list__days::after { transform: rotate3d(0, 0, 1, 90deg); } .schedule_list__airtime { display: table-row; width: 100%; } .schedule_list__airtime__label { display: table-cell; vertical-align: middle; width: 10%; padding: 1rem 0; background-color: var(--col-accent); color: var(--col-white); text-align: center; font-weight: 400; border-bottom: 1px solid var(--col-white); } .schedule_list__item-list { display: table-cell; vertical-align: middle; width: 100%; min-height: 4rem; border-bottom: 1px solid var(--col-text-gray); } .schedule_list__item-list > * + * { margin-top: 5px; border-top: 1px dashed var(--col-text-light-gray); } .schedule-weekly { margin-top: 60px; padding: 0 20px; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; overflow-x: scroll; } .schedule-weekly table { table-layout: fixed; border-collapse: collapse; width: 1160px; } .schedule-weekly table th { background: var(--col-accent); color: var(--col-white); text-align: center; border: 1px solid var(--col-ex-light-gray); } .schedule-weekly table th.el_airtime { width: 3em; vertical-align: middle; } .schedule-weekly table .el_days { width: calc(14.2857142857% - 0.4285714286em); width: calc((100% - 3em) / 7); } .schedule-weekly table .el_empty-th { width: 3em; } .schedule-weekly table td { border-right: 1px solid var(--col-text-gray); border-bottom: 1px solid var(--col-text-gray); } .schedule-weekly table td > * { display: block; padding: 10px 5px; } .schedule-weekly table td > * + * { border-top: 1px dashed var(--col-text-gray); } .schedule-weekly table .program_title { font-size: 14px; color: var(--col-text-main); font-weight: 500; } .program { width: 100%; } .program:has(.is_long-program) { z-index: 1; } .program:has(.is_long-program) .is_long-program { height: 100%; } .program_item { display: grid; grid-template-columns: 30% 1fr; gap: 1rem; padding: 10px; } .program_thumb { width: 100%; aspect-ratio: 1; overflow: hidden; } .program_thumb img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; -o-object-position: top; object-position: top; } .program_detail > * + * { margin-top: 10px; } .program_airtime { display: block; font-size: 0.85rem; color: var(--col-text-gray); } .program_title { display: block; font-size: 1rem; font-weight: 400; color: var(--col-text-accent); } .program_info { display: block; font-size: 0.85rem; color: var(--col-text-gray); } .program_info > * + * { margin-top: 0.3em; } .program_has-label { display: grid; grid-template-columns: 3em 1fr; gap: 0.5rem; } /* Singles */ .single_post { margin-top: 60px; padding: 0 15px; } .single_post__heading { padding-left: 10px; border-left: 3px solid currentColor; font-size: 1.7rem; font-weight: var(--fw-bold); color: currentColor; } .single_post__date-list { display: flex; width: -moz-fit-content; width: fit-content; padding: 0.3rem 0.5rem; background-color: var(--col-light-blue); color: var(--col-white); } .single_post__thumb { position: relative; width: 100%; aspect-ratio: 16/8; background-position: top left; background-size: 10%; } .single_post__thumb:before { content: ""; position: absolute; display: block; background: #fff; opacity: 0.4; width: 100%; height: 100%; z-index: 0; } .single_post__thumb img { position: relative; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; z-index: 1; } .single_post__content { font-size: 1rem; line-height: 1.5; } .single_post__content > * + * { margin-top: 0.5em; } .single_post__content h1 { font-size: 1.8em; } .single_post__content h2 { font-size: 1.5em; } .single_post__content h3 { font-size: 1.2em; } .single_post__content strong { font-weight: var(--fw-bold); } .single_post__content em { font-style: italic; } .single_post__content li { margin-left: 1.5em; } .single_post__content li::marker { unicode-bidi: isolate; font-variant-numeric: tabular-nums; text-transform: none; text-indent: 0 !important; text-align: start !important; -moz-text-align-last: start !important; text-align-last: start !important; } .single_post__content ul li { list-style: initial; } .single_post__content ul li ul li { list-style: circle; } .single_post__content ol li { list-style: decimal; } .single_post__content blockquote { padding: 1em 1em 1em 1.5em; background-color: var(--col-light-gray); color: var(--col-gray); border-left: 0.5em solid var(--col-dark-brown); } .single_post__content a { color: var(--col-accent); text-decoration: underline; text-underline-offset: 0.3em; } .single_post__content hr { height: 2px; background: var(--col-dark-brown); } .single_post__content del { text-decoration: line-through; } .single_post__video { padding: 10px; margin-top: 2rem; background-color: var(--col-accent); } .single_post__video iframe { margin-top: 10px; width: 100%; height: auto; aspect-ratio: 16/9; } .single_post__program-info { margin-top: 2rem; } .single_post__program-info dl { display: grid; grid-template-columns: 25% 1fr; } .single_post__program-info dl:first-of-type dd { border-top: 1px solid var(--col-dark-brown); } .single_post__program-info dl:last-of-type dt { border-bottom: 1px solid var(--col-green); } .single_post__program-info dt { display: flex; justify-content: center; align-items: center; padding: 0.5rem 0; background-color: var(--col-green); color: var(--col-white); font-weight: var(--fw-bold); text-align: center; border-bottom: 1px solid var(--col-white); } .single_post__program-info dd { border-bottom: 1px solid var(--col-dark-brown); border-right: 1px solid var(--col-dark-brown); padding: 0.5rem; font-size: 0.9rem; } /* Elements / Blocks */ .el_ico-heading { display: grid; grid-template-columns: 1em 1fr; align-items: center; align-content: center; gap: 0.5em; color: var(--col-dark-brown); font-weight: var(--fw-bold); font-size: 1.5rem; } .el_ico-heading i { display: flex; align-items: center; } .el_section-heading { display: flex; flex-flow: row nowrap; gap: 0.5rem; align-items: flex-end; line-height: 1; } .el_section-heading .en { font-size: 2rem; font-weight: 500; } .el_section-heading .ja { font-size: 0.85rem; } .el_page-heading { display: flex; flex-flow: row nowrap; gap: 0.5rem; justify-content: flex-start; align-items: flex-end; line-height: 1; } .el_page-heading .en { font-size: 2rem; font-weight: 500; } .el_page-heading .ja { font-size: 0.85rem; } .el_link-text { font-size: 0.85rem; color: var(--col-accent); line-height: 1; } .bl_heading--link { display: flex; flex-flow: row nowrap; align-items: flex-end; justify-content: space-between; } .bl_breadCrumbs { display: flex; flex-flow: row nowrap; width: 100%; padding: 0 20px; margin-top: 20px; font-size: 0.9rem; color: var(--col-dark-brown-opacity7); } .bl_breadCrumbs a { color: var(--col-dark-brown); text-decoration: underline; text-underline-offset: 0.2em; } .bl_thumb-list { position: relative; display: grid; grid-template-columns: 30% 1fr; gap: 12%; padding: 15px 0; border-top: 2px solid var(--col-light-gray); } .bl_thumb-list:hover img { transform: scale(120%); } .bl_thumb-list:last-of-type { border-bottom: 2px solid var(--col-light-gray); } .bl_thumb-list__img { width: 100%; aspect-ratio: 1; overflow: hidden; } .bl_thumb-list__img img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; transition: all 0.25s ease-in-out; } .bl_thumb-list__link { display: block; } .bl_thumb-list__link:after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: block; width: 100%; height: 100%; } .bl_thumb-list__heading { color: var(--col-accent); } .bl_thumb-list__detail > * + * { margin-top: 0.35rem; } .bl_thumb-list__time-tag { display: flex; flex-flow: row; justify-content: space-between; align-items: center; } .bl_thumb-list__date { color: var(--col-text-gray); } .bl_thumb-list__excerpt { font-size: 0.85rem; } @media only screen and (min-width: 769px) { .bl_thumb-list { position: relative; grid-template-columns: 1fr; grid-template-rows: subgrid; grid-row: span 2; gap: 10px; border: unset; padding: 0; } .bl_thumb-list:last-of-type { border-bottom: unset; } } .bl_card-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; width: 100%; margin-top: 30px; } .bl_card-wrapper--swiper { position: relative; margin-top: 30px; overflow: hidden; } @media screen and (min-width: 769px) { .bl_card-wrapper { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .bl_card { position: relative; display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: 10px; } .bl_card * { transition: all 0.25s ease-in-out; } .bl_card a:hover img { transform: scale(120%); } .bl_card a:before { display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .bl_card__thumb { display: block; width: 100%; height: 100%; aspect-ratio: 1; overflow: hidden; border-radius: min(15px, 2.1vw); } .bl_card__thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .bl_card__thumb.is_bnr { aspect-ratio: unset; border-radius: unset; } .bl_card__info { display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; } .bl_card__info time { font-size: 1rem; color: var(--col-text-gray); } .bl_line-table dl { border-top: 1px solid var(--col-accent); padding: 10px 10px; } .bl_line-table dl:last-of-type { border-bottom: 1px solid var(--col-accent); } .bl_line-table dt { font-weight: var(--fw-bold); } .bl_line-table dd { margin-top: 10px; } .el_info-tag { padding: 0.5em 1em; line-height: 1; color: var(--col-text-white); font-size: 0.7em; border-radius: 100px; } .el_info-tag.tag-present { background: var(--col-orange); } .el_copy { text-align: center; padding: 8px 0; font-size: 12px; font-weight: 400; color: var(--col-text-white); } .el_btn, .el_btn--primary, .el_btn--primary--outline, .el_btn--enable { display: block; width: 100%; padding: 0.5em 1em; font-size: min(14px, 3.7vw); line-height: 1; text-align: center; border: 1px solid var(--col-accent); border-radius: 100px; color: var(--col-text-white); cursor: pointer; transition: all 0.25s ease-in-out; } .el_btn--enable { background: var(--col-text-gray); border: var(--col-text-gray); } .el_btn--enable:hover, .el_btn--enable:active, .el_btn--enable:focus { opacity: 1; } .el_btn--primary, .el_btn--primary--outline { background: var(--col-accent); } .el_btn--primary:hover, .el_btn--primary--outline:hover, .el_btn--primary:active, .el_btn--primary--outline:active, .el_btn--primary:focus, .el_btn--primary--outline:focus { background: rgba(0, 0, 0, 0); color: var(--col-accent); } .el_btn--primary--outline { background: unset; color: var(--col-accent); } .el_btn--primary--outline:hover { background: var(--col-accent); color: var(--col-text-white); opacity: 1; } @media screen and (min-width: 769px) { .el_btn, .el_btn--primary, .el_btn--primary--outline, .el_btn--enable { font-size: 1rem; } } .el_submit-btn { padding: 1em 0; } .el_badge, .el_badge--gray, .el_badge--orange, .el_badge--green { display: inline-block; padding: 0.5em 1em; font-size: 12px; line-height: 1; text-align: center; border: 1px solid var(--col-accent); border-radius: 100px; color: var(--col-text-white); } .el_badge--green { background: var(--col-accent); } .el_badge--orange { background: var(--col-orange); border-color: var(--col-orange); } .el_badge--gray { background: var(--col-text-gray); border-color: var(--col-text-gray); } .el_form-group > * + * { margin-top: 10px; } .el_form-group dt { display: flex; flex-flow: row nowrap; align-items: center; gap: 10px; } .el_form-group dt label { font-weight: 700; } .el_form-group input, .el_form-group textarea { display: block; width: 100%; padding: 5px 10px; border: 1px solid var(--col-text-gray); border-radius: 3px; line-height: 1.7; } .el_form-group input::-moz-placeholder, .el_form-group textarea::-moz-placeholder { color: var(--col-text-gray); } .el_form-group input::placeholder, .el_form-group textarea::placeholder { color: var(--col-text-gray); } .el_form-group input:focus, .el_form-group textarea:focus { border-color: var(--col-accent); box-shadow: 0 0 4px var(--col-accent); } .el_form-group input[type=number]::-webkit-outer-spin-button, .el_form-group input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .el_form-group input[type=number] { -moz-appearance: textfield; } .el_form-group textarea { resize: vertical; } .el_form-group.input-double dd, .el_form-group.input-triple dd { display: flex; flex-flow: row nowrap; align-items: center; } .el_form-group.input-double input, .el_form-group.input-triple input { width: calc(3rem + 20px); letter-spacing: 0.1em; } .el_form-group .min-input { display: inline-block; width: 4rem; } .input_disabled { pointer-events: none; color: var(--col-text-gray); } .bl_btn-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: min(10px, 1.6vw); margin-top: 40px; } .bl_btn-list.is_schedule { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media only screen and (min-width: 769px) { .bl_btn-list { display: flex; flex-flow: column nowrap; padding: 0 20px 0 0; } } .bl_print-btn { display: flex; justify-content: center; align-items: center; margin-top: 60px; width: 100%; max-width: 900px; margin-left: auto; margin-right: auto; padding: 0 20px; } .bl_print-btn button, .bl_print-btn a { display: flex; justify-content: center; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0; background-color: var(--col-orange); color: var(--col-white); line-height: 1.7; font-size: 1rem; letter-spacing: 0.05em; font-weight: 600; transition: 0.25s; } .bl_print-btn button:hover, .bl_print-btn a:hover { opacity: 0.7; cursor: pointer; } .bl_print-btn button:not(:focus), .bl_print-btn a:not(:focus) { opacity: 1; } .bl_print-btn button span, .bl_print-btn a span { width: 1.5rem; display: flex; } .bl_print-btn button span img, .bl_print-btn a span img { width: 100%; } #playBtn { display: flex; flex-flow: column nowrap; align-items: center; justify-content: space-evenly; width: 100%; height: 100%; cursor: pointer; color: var(--col-white); } #playBtn svg { display: block; width: 60%; color: var(--col-white); } #playBtn span { display: block; font-size: 10px; color: var(--col-white); line-height: 1; } .bl_playRadio { position: fixed; top: 0; right: 0; width: 50px; height: 50px; padding: 5px; background-color: var(--col-accent); z-index: 3; border: 2px solid var(--col-black); } .bl_playRadio__btn { display: grid; place-items: center; font-size: min(14px, 1rem); height: 100%; color: var(--col-white); } .bl_playRadio--fixed { position: fixed; width: 95%; bottom: 20px; right: 50%; transform: translateX(50%); background-color: rgba(255, 255, 255, 0.7); border-radius: 10px; z-index: 1; border: 2px solid var(--col-black); } .bl_playRadio--fixed #playBtn { width: 40px; transition: all 0.25s; } .bl_alert { background: #FBF0F0; color: #DC3944; padding: 1em; font-size: 1rem; width: 90%; max-width: 1000px; margin-left: auto; margin-right: auto; border: 1px solid #E7A2A3; border-radius: 8px; font-weight: 600; } .el_drawer-btn { position: relative; display: block; } .el_drawer-btn span { position: absolute; height: 2px; width: 100%; background: currentColor; border-radius: 100px; transition: transform 0.55s ease-in-out, top 0.55s ease-in-out, bottom 0.55s ease-in-out, opacity 0.55s ease-in-out; } .el_drawer-btn span:nth-of-type(1) { top: 15%; } .el_drawer-btn span:nth-of-type(2) { top: 50%; transform: translateY(-65%); } .el_drawer-btn span:nth-of-type(3) { bottom: 15%; } .is_open .el_drawer-btn span:nth-of-type(1) { top: 50%; transform: translateY(-50%) rotate3d(0, 0, 1, -315deg); } .is_open .el_drawer-btn span:nth-of-type(2) { opacity: 0; } .is_open .el_drawer-btn span:nth-of-type(3) { bottom: 50%; transform: translateY(50%) rotate3d(0, 0, 1, 315deg); } .bl_drawer-body { position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; display: block; padding: 0 20px 20px 20px; z-index: 3; background: var(--col-white); transition: all 0.25s ease-in-out; opacity: 0; pointer-events: none; } .bl_drawer-body.is_open { opacity: 1; pointer-events: all; } .bl_drawer-body__inner { position: relative; width: 100%; height: 100%; } .bl_drawer-body__heading { position: absolute; bottom: 0; left: 0; margin: 0 auto; font-size: 4.8vw; } .bl_drawer-body__list { display: flex; flex-flow: column nowrap; align-items: flex-start; justify-content: center; gap: 2rem; height: 100%; width: 80%; margin-left: auto; } .bl_drawer-body__list li { font-size: 1rem; } .bl_drawer-body__list li a:hover, .bl_drawer-body__list li a:active { color: var(--col-accent); } .bl_drawer-body__copy { position: absolute; left: 0; bottom: 50%; writing-mode: vertical-lr; text-orientation: sideways; transform: translateY(50%); letter-spacing: 0.2em; font-size: 10px; } @media only screen and (min-width: 769px) { .bl_drawer-body.is_open { display: none; } } /* Swiper */ .swiper .swiper-wrapper { transition-timing-function: linear; } .swiper-wrapper { z-index: 0; } .swiper-slide { position: relative; height: 100%; background: no-repeat center/cover; } .swiper-button-prev, .swiper-button-next { display: none; } .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: 0; } .bl_card-wrapper--swiper .swiper-wrapper { padding-bottom: 20px; } .bl_card.swiper-slide { display: flex; flex-flow: column nowrap; align-items: flex-start; justify-content: space-between; } .swiper-scrollbar { z-index: 1 !important; width: 100% !important; left: 0 !important; } .bl_banner-swiper { position: relative; padding-bottom: 20px; overflow: hidden; } .bl_banner-swiper .banner { display: block; overflow: hidden; aspect-ratio: 16/5; background: #fff; } .bl_banner-swiper .banner img { -o-object-fit: contain; object-fit: contain; width: 100%; height: 100%; } .bl_banner-swiper .swiper-pagination { z-index: 1 !important; } .bl_banner-swiper .swiper-pagination-bullet-active { background-color: var(--col-text-main) !important; } @media only screen and (min-width: 769px) { .bl_banner-swiper { padding-bottom: 20px; } } @media only screen and (min-width: 769px) { .site_heading { gap: 10px; padding: 5px 0; text-align: center; color: var(--col-white); background-color: var(--col-dark-pink); font-family: var(--ff-kiwi); font-size: 5.6vw; } .site_heading img { display: inline-block; width: 4em; padding: 0 0 0.4em 0.5em; } .site_navBtn { position: relative; width: 40px; height: 40px; display: block; } .site_nav { width: 88px; height: 100vh; padding: 20px 0 30px 0; background: #fff; display: grid; grid-auto-rows: 88px 1fr; overflow-x: hidden; } .site_nav .logo { width: min(88px, 100%); aspect-ratio: 1; } .site_nav .logo a { display: grid; grid-template-columns: 88px 1fr; gap: 20px; width: 300px; align-items: center; font-size: 1.1rem; font-weight: 500; line-height: 1.5; } .site_nav .logo span { opacity: 0; transition: all 0.25s ease-in-out; } .site_nav ul { background: unset; border-radius: unset; width: 100%; height: 100%; display: flex; flex-flow: column nowrap; justify-content: flex-end; align-items: flex-start; padding: 10px 10px 0 10px; box-shadow: unset; gap: 30px; } .site_nav li { width: 250px; margin-left: 20px; } .site_nav li .nav-label { opacity: 0; transition: opacity 0.25s ease-in-out; } .site_nav li .nav-ja { display: inline; } .site_nav li span { font-size: 14px; line-height: 1; text-align: center; } .site_nav li svg { display: block; } .site_nav li a { flex-flow: row nowrap; align-items: center; justify-content: flex-start; gap: 20px; width: 100%; } .site_nav__copy { bottom: 30px; left: 5px; transform: unset; transition: all 0.25s ease-in-out; opacity: 0; } .site_nav__icon { width: 28px; height: 28px; } .site_nav:hover { width: 300px; } .site_nav:hover .logo span { opacity: 1; } .site_nav:hover .site_nav__copy { opacity: 1; } .site_nav:hover ul { align-items: flex-start; } .site_nav:hover li .nav-label { opacity: 1; } .site_nav:hover li a { gap: 20px; } .site_nav.is_open { top: 0; left: 0; right: unset; width: 88px; height: auto; } .site_nav.is_open:hover { width: 300px; } .site_nav.is_open ul { display: flex; flex-flow: column nowrap; align-items: flex-start; justify-content: flex-end; z-index: 3; } .site_nav.is_open li { width: 200px; margin-left: 20px; } .site_nav.is_open li:nth-of-type(1), .site_nav.is_open li:nth-of-type(2), .site_nav.is_open li:nth-of-type(3), .site_nav.is_open li:nth-of-type(4) { display: block !important; } .site_footer { background: var(--col-dark-gray); padding-bottom: 10px; } .site_footer .ly_bg { padding: 20px 20px 0; } .site_footer__logo { width: 100%; } .site_footer__inner { padding: 30px 20px 30px; display: grid; grid-template-columns: 25% 1fr; gap: 10%; } .site_footer__inner > * + * { margin-top: 15px; } .site_footer__content { font-weight: 400; color: var(--col-white); text-align: left; } .site_footer__content > * + * { margin-top: 10px; } .site_footer__name { font-size: 1.4rem; } .fv { position: relative; background-color: var(--col-beige); max-height: 920px; } .fv_bg::after { content: ""; position: absolute; background-color: rgba(35, 35, 35, 0.6); display: block; width: 100%; height: 100%; } .fv_hero { top: unset; right: unset; bottom: 80px; left: 0; transform: unset; } .fv_hero__logo { width: min(200px, 44.5%); } .fv_hero__logo--pc { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(300px, 30%); opacity: 0; } .fv_hero__message .ja { margin-top: 0.5em; font-size: 21px; font-weight: 400; opacity: 0.9; text-align: right; padding: 0 30px 0 0; } .fv_timer { left: 30px; } .fv_timer__time { letter-spacing: 0.16em; font-size: min(36px, 7.5vw); font-weight: 600; opacity: 0.9; } .fv_timer__date { line-height: 1; } .internet-radio { padding: 0 20px; } .internet-radio .bl_card-wrapper { grid-template-columns: 1fr 1fr; } /* Pages */ #main.under { padding-top: 50px; } .page_heading { padding: 0 0 0 88px; box-shadow: unset; } .page_heading .el_page-heading { width: 1040px; padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; } .pricing { margin-top: 60px; padding: 0 20px; } .pricing_list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .pricing_list > * + * { margin-top: 0; } .pricing_detail { display: grid; grid-template-columns: 100%; grid-template-rows: subgrid; grid-row: span 3; } .pricing_detail__heading { font-size: 1.5rem; font-weight: var(--fw-bold); } .pricing_detail__amount { display: inline-block; text-align: right; } .pricing_detail__amount strong { font-size: 1.5rem; font-weight: var(--fw-bold); color: var(--col-orange); } .company { margin-top: 60px; } .company_table dl { border-top: 1px solid var(--col-accent); padding: 10px 10px; } .company_table dl:last-of-type { border-bottom: 1px solid var(--col-accent); } .company_table dt { font-weight: var(--fw-bold); } .company_table dd { margin-top: 10px; } .company_gallery { margin-top: 60px; } .company_gallery > * + * { margin-top: 30px; } .company_gallery figure { background-color: var(--col-fff); } .company_gallery figure img { width: 100%; } .company_gallery figcaption { padding: 1rem; text-align: center; color: var(--col-dark-brown); font-weight: var(--fw-bold); } .company_message { margin-top: 60px; color: var(--col-dark-brown); background-color: var(--col-fff); } .company_message strong { font-weight: var(--fw-bold); } .contact { margin-top: 60px; padding: 0 20px; } .contact_form-group { border-bottom: 2px solid var(--col-dark-brown); } .contact_form-group > * + * { margin-top: 0.5rem; } .contact_form-group label { font-size: 1.2rem; font-weight: var(--fw-bold); color: var(--col-dark-brown); } .contact_form-group strong { font-weight: var(--fw-bold); color: var(--col-red); } .contact_form-group input, .contact_form-group textarea { width: 100%; display: block; background-color: rgba(255, 255, 255, 0.7019607843); padding: 5px; } .contact_form-group input::-moz-placeholder, .contact_form-group textarea::-moz-placeholder { opacity: 0.7; } .contact_form-group input::placeholder, .contact_form-group textarea::placeholder { opacity: 0.7; } .contact_form-group textarea { height: 10em; line-height: 1.5; } .contact_submit { display: block; width: -moz-fit-content; width: fit-content; margin-left: auto; margin-right: auto; background-color: var(--col-green); padding: 0.5rem 1rem; font-weight: var(--fw-bold); color: var(--col-white); transition: all 0.25s ease-in-out; } .contact_submit:hover, .contact_submit:active { cursor: pointer; background-color: var(--col-dark-green); } .post_article { margin-top: 40px; } .post_list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .schedule { margin-top: 60px; padding: 0 20px; } .schedule_list table { display: table; width: 100%; } .schedule_list > * + * { margin-top: 20px; } .schedule_list__days { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; background-color: var(--col-accent); color: var(--col-white); font-weight: var(--fw-bold); border-bottom: 1px solid var(--col-white); border-right: 1px solid var(--col-accent); } .schedule_list__days::after { content: url("../img/icon_arrow.svg"); display: inline-block; transition: all 0.15s ease-in-out; } .schedule_list details[open] .schedule_list__days::after { transform: rotate3d(0, 0, 1, 90deg); } .schedule_list__airtime { display: table-row; width: 100%; } .schedule_list__airtime__label { display: table-cell; vertical-align: middle; width: 10%; padding: 1rem 0; background-color: var(--col-accent); color: var(--col-white); text-align: center; font-weight: 400; border-bottom: 1px solid var(--col-white); } .schedule_list__item-list { display: table-cell; vertical-align: middle; width: 100%; min-height: 4rem; border-bottom: 1px solid var(--col-text-gray); } .schedule_list__item-list > * + * { margin-top: 5px; border-top: 1px dashed var(--col-text-light-gray); } .schedule_studio { padding: 0 20px; } .schedule_studio__item { display: flex; align-items: center; gap: 0.5rem; font-weight: var(--fw-bold); } .schedule_studio__item .el_box { border-left: 3px solid currentColor; display: inline-block; width: 0.5rem; height: 1rem; } .program { width: 100%; } .program:has(.is_long-program) { z-index: 1; } .program:has(.is_long-program) .is_long-program { height: 100%; } .program_item { display: grid; grid-template-columns: 20% 1fr; gap: 1rem; padding: 10px; } .program_thumb { width: 100%; aspect-ratio: 1; overflow: hidden; } .program_detail > * + * { margin-top: 10px; } .program_airtime { display: block; font-size: 0.85rem; color: var(--col-text-gray); } .program_info { display: block; font-size: 0.85rem; color: var(--col-text-gray); } .program_info > * + * { margin-top: 0.3em; } .program_has-label { display: grid; grid-template-columns: 3em 1fr; gap: 0.5rem; } /* Singles */ .single_post { margin-top: 60px; padding: 0 20px; } .single_post__heading { padding-left: 10px; border-left: 3px solid currentColor; font-size: 1.7rem; font-weight: var(--fw-bold); color: currentColor; } .single_post__date-list { display: flex; width: -moz-fit-content; width: fit-content; padding: 0.3rem 0.5rem; background-color: var(--col-light-blue); color: var(--col-white); } .single_post__thumb { position: relative; width: 100%; aspect-ratio: 16/6; background-position: top left; background-size: 10%; } .single_post__thumb.is_program { position: sticky; top: 50px; aspect-ratio: 1; } .single_post__thumb:before { content: ""; position: absolute; display: block; background: #fff; opacity: 0.4; width: 100%; height: 100%; z-index: 0; } .single_post__thumb img { position: relative; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; z-index: 1; } .single_post__content { font-size: 1rem; line-height: 1.5; } .single_post__content > * + * { margin-top: 0.5em; } .single_post__content h1 { font-size: 1.8em; } .single_post__content h2 { font-size: 1.5em; } .single_post__content h3 { font-size: 1.2em; } .single_post__content strong { font-weight: var(--fw-bold); } .single_post__content em { font-style: italic; } .single_post__content li { margin-left: 1.5em; } .single_post__content li::marker { unicode-bidi: isolate; font-variant-numeric: tabular-nums; text-transform: none; text-indent: 0 !important; text-align: start !important; -moz-text-align-last: start !important; text-align-last: start !important; } .single_post__content ul li { list-style: initial; } .single_post__content ul li ul li { list-style: circle; } .single_post__content ol li { list-style: decimal; } .single_post__content blockquote { padding: 1em 1em 1em 1.5em; background-color: var(--col-light-gray); color: var(--col-gray); border-left: 0.5em solid var(--col-dark-brown); } .single_post__content a { color: var(--col-accent); text-decoration: underline; text-underline-offset: 0.3em; } .single_post__content hr { height: 2px; background: var(--col-dark-brown); } .single_post__content del { text-decoration: line-through; } .single_post__video { padding: 10px; margin-top: 2rem; background-color: var(--col-accent); } .single_post__video iframe { margin-top: 10px; width: 100%; height: auto; aspect-ratio: 16/9; } .single_post__program-info { margin-top: 2rem; } .single_post__program-info dl { display: grid; grid-template-columns: 25% 1fr; } .single_post__program-info dl:first-of-type dd { border-top: 1px solid var(--col-dark-brown); } .single_post__program-info dl:last-of-type dt { border-bottom: 1px solid var(--col-green); } .single_post__program-info dt { display: flex; justify-content: center; align-items: center; padding: 0.5rem 0; background-color: var(--col-green); color: var(--col-white); font-weight: var(--fw-bold); text-align: center; border-bottom: 1px solid var(--col-white); } .single_post__program-info dd { border-bottom: 1px solid var(--col-dark-brown); border-right: 1px solid var(--col-dark-brown); padding: 0.5rem; font-size: 0.9rem; } .single_present__howto { border: 2px solid var(--col-green); } .single_present__howto__heading { padding: 0.5em 0; background-color: var(--col-green); color: var(--col-white); font-weight: var(--fw-bold); text-align: center; font-size: 1.2rem; } .single_present__howto__detail { font-size: 1rem; padding: 1rem; font-weight: var(--fw-bold); } #app.type_post .el_page-heading, #app.type_post .ly_size { max-width: 620px !important; } /* swiper */ .swiper-button-prev, .swiper-button-next { display: flex; color: var(--col-text-white); z-index: 1; background-color: var(--col-text-gray); border-radius: 8px; width: 35px; height: 35px; } .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: 0; } } /* ファイル名: _unique.scss 配置内容: ある特定の場所でしか使用していないスタイル ※どの画面で使用しているかそれぞれコメントを残す接頭辞: un_ 参考元: https://qiita.com/kum44/items/117b32a4e5bdf102b1cf */ .un_hz { padding-left: 2rem; } /* HTML:

*/ .loader { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4; width: 45px; aspect-ratio: 1; --c: no-repeat linear-gradient(var(--col-white) 0 0); background: var(--c) 0% 100%, var(--c) 50% 100%, var(--c) 100% 100%; animation: l2 1s infinite linear; } @keyframes l2 { 0% { background-size: 20% 100%, 20% 100%, 20% 100%; } 20% { background-size: 20% 60%, 20% 100%, 20% 100%; } 40% { background-size: 20% 80%, 20% 60%, 20% 100%; } 60% { background-size: 20% 100%, 20% 80%, 20% 60%; } 80% { background-size: 20% 100%, 20% 100%, 20% 80%; } 100% { background-size: 20% 100%, 20% 100%, 20% 100%; } } #js_loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--col-accent); z-index: 10; transition: all 0.25s ease-in-out; } /** waveCanvas */ /*========= レイアウトのためのCSS ===============*/ .wave { position: relative; height: 100px; /*何も表示されない場合は各波の親要素に高さを持たせましょう。*/ /*========= waveを描画するエリア設定 ===============*/ } .wave canvas { position: absolute; bottom: 100px; left: 0; width: 100%; } @keyframes dot { 0% { opacity: 1; } 25% { opacity: 1; } 50% { opacity: 0; } 75% { opacity: 0.5; } 100% { opacity: 1; } } .grecaptcha-badge { bottom: 70px !important; } /* ファイル名: _helper.scss 配置内容: margin、padding、colorある部分だけを調節したいとなった場合に適用するスタイル接頭辞: mt_, mb_, pt_, pb_, cl_ 参考元: https://qiita.com/kum44/items/117b32a4e5bdf102b1cf */ .hp_shadow { box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3); } .overflowX-scroll { overflow-x: scroll; } .overflowX-scroll::-webkit-scrollbar { display: none; } .fw-bold { font-weight: 700; } .d-sp { display: block; } .d-none { display: none; } .grid-sp { display: grid; } .d-pc { display: none; } .flex-pc { display: none; } .grid-pc { display: none; } inline-block-pc { display: none; } .mt-1 { margin-top: 1rem; } .p-1 { padding: 1rem; } .pt-1 { padding-top: 1rem; } .pb-1 { padding-bottom: 1rem; } .py-1 { padding-top: 1rem; padding-bottom: 1rem; } .pl-1 { padding-left: 1rem; } .pr-1 { padding-right: 1rem; } .px-1 { padding-left: 1rem; padding-right: 1rem; } .gap-1 { gap: 1rem; } .lh-1 { line-height: 1; } .mt-2 { margin-top: 2rem; } .p-2 { padding: 2rem; } .pt-2 { padding-top: 2rem; } .pb-2 { padding-bottom: 2rem; } .py-2 { padding-top: 2rem; padding-bottom: 2rem; } .pl-2 { padding-left: 2rem; } .pr-2 { padding-right: 2rem; } .px-2 { padding-left: 2rem; padding-right: 2rem; } .gap-2 { gap: 2rem; } .lh-2 { line-height: 2; } .mt-3 { margin-top: 3rem; } .p-3 { padding: 3rem; } .pt-3 { padding-top: 3rem; } .pb-3 { padding-bottom: 3rem; } .py-3 { padding-top: 3rem; padding-bottom: 3rem; } .pl-3 { padding-left: 3rem; } .pr-3 { padding-right: 3rem; } .px-3 { padding-left: 3rem; padding-right: 3rem; } .gap-3 { gap: 3rem; } .lh-3 { line-height: 3; } .mt-4 { margin-top: 4rem; } .p-4 { padding: 4rem; } .pt-4 { padding-top: 4rem; } .pb-4 { padding-bottom: 4rem; } .py-4 { padding-top: 4rem; padding-bottom: 4rem; } .pl-4 { padding-left: 4rem; } .pr-4 { padding-right: 4rem; } .px-4 { padding-left: 4rem; padding-right: 4rem; } .gap-4 { gap: 4rem; } .lh-4 { line-height: 4; } .mt-5 { margin-top: 5rem; } .p-5 { padding: 5rem; } .pt-5 { padding-top: 5rem; } .pb-5 { padding-bottom: 5rem; } .py-5 { padding-top: 5rem; padding-bottom: 5rem; } .pl-5 { padding-left: 5rem; } .pr-5 { padding-right: 5rem; } .px-5 { padding-left: 5rem; padding-right: 5rem; } .gap-5 { gap: 5rem; } .lh-5 { line-height: 5; } .mt-6 { margin-top: 6rem; } .p-6 { padding: 6rem; } .pt-6 { padding-top: 6rem; } .pb-6 { padding-bottom: 6rem; } .py-6 { padding-top: 6rem; padding-bottom: 6rem; } .pl-6 { padding-left: 6rem; } .pr-6 { padding-right: 6rem; } .px-6 { padding-left: 6rem; padding-right: 6rem; } .gap-6 { gap: 6rem; } .lh-6 { line-height: 6; } .mt-7 { margin-top: 7rem; } .p-7 { padding: 7rem; } .pt-7 { padding-top: 7rem; } .pb-7 { padding-bottom: 7rem; } .py-7 { padding-top: 7rem; padding-bottom: 7rem; } .pl-7 { padding-left: 7rem; } .pr-7 { padding-right: 7rem; } .px-7 { padding-left: 7rem; padding-right: 7rem; } .gap-7 { gap: 7rem; } .lh-7 { line-height: 7; } .mt-8 { margin-top: 8rem; } .p-8 { padding: 8rem; } .pt-8 { padding-top: 8rem; } .pb-8 { padding-bottom: 8rem; } .py-8 { padding-top: 8rem; padding-bottom: 8rem; } .pl-8 { padding-left: 8rem; } .pr-8 { padding-right: 8rem; } .px-8 { padding-left: 8rem; padding-right: 8rem; } .gap-8 { gap: 8rem; } .lh-8 { line-height: 8; } .mt-9 { margin-top: 9rem; } .p-9 { padding: 9rem; } .pt-9 { padding-top: 9rem; } .pb-9 { padding-bottom: 9rem; } .py-9 { padding-top: 9rem; padding-bottom: 9rem; } .pl-9 { padding-left: 9rem; } .pr-9 { padding-right: 9rem; } .px-9 { padding-left: 9rem; padding-right: 9rem; } .gap-9 { gap: 9rem; } .lh-9 { line-height: 9; } .mt-10 { margin-top: 10rem; } .p-10 { padding: 10rem; } .pt-10 { padding-top: 10rem; } .pb-10 { padding-bottom: 10rem; } .py-10 { padding-top: 10rem; padding-bottom: 10rem; } .pl-10 { padding-left: 10rem; } .pr-10 { padding-right: 10rem; } .px-10 { padding-left: 10rem; padding-right: 10rem; } .gap-10 { gap: 10rem; } .lh-10 { line-height: 10; } .mt-0 { margin-top: 0; } .bg_gray { background-color: var(--col-light-gray); } .hp_strong { color: var(--col-org); font-weight: bold; } .rounded { border-radius: 0.3rem; } .text-center { text-align: center; } .text-right { text-align: right; } .text-left { text-align: left; } .text-2rem { font-size: 2rem; } .text-1_5rem { font-size: 1.5rem; } .text-1_2rem { font-size: 1.2rem; } .text-white { color: var(--col-white); } .text-fff { color: var(--col-fff); } .text-green { color: var(--col-green); } .text-dark-green { color: var(--col-dark-green); } .text-light-dark-green { color: var(--col-light-dark-green); } .text-dark-brown { color: var(--col-dark-brown); } .text-red { color: var(--col-red); } .text-dark-red { color: var(--col-dark-red); } .text-light-dark-red { color: var(--col-light-dark-red); } .text-org { color: var(--col-org); } .text-blue { color: var(--col-blue); } .text-yellow { color: var(--col-yellow); } .border { border: 1px solid; } .border-width-2 { border: 2px solid; } .border-green { border-color: var(--col-green); } .border-dark-green { border-color: var(--col-dark-green); } .border-light-dark-green { border-color: var(--col-light-dark-green); } .border-light-green { border-color: var(--col-light-green); } .border-dark-brown { border-color: var(--col-dark-brown); } .border-red { border-color: var(--col-red); } .border-dark-red { border-color: var(--col-dark-red); } .border-light-dark-red { border-color: var(--col-light-dark-red); } .border-light-red { border-color: var(--col-light-red); } .border-org { border-color: var(--col-org); } .border-light-org { border-color: var(--col-light-org); } .border-blue { border-color: var(--col-blue); } .border-light-blue { border-color: var(--col-light-blue); } .border-yellow { border-color: var(--col-yellow); } .border-light-yellow { border-color: var(--col-light-yellow); } .bg-gray { background-color: var(--col-gray); } .bg-light-gray { background-color: var(--col-light-gray); } .bg-fff { background-color: var(--col-fff); } .bg-white { background-color: var(--col-white); } .bg-beige { background-color: var(--col-beige); } .bg-green { background-color: var(--col-green); } .bg-dark-green { background-color: var(--col-dark-green); } .bg-light-dark-green { background-color: var(--col-light-dark-green); } .bg-light-green { background-color: var(--col-light-green); } .bg-dark-brown { background-color: var(--col-dark-brown); } .bg-pink { background-color: var(--col-pink); } .bg-dark-pink { background-color: var(--col-dark-pink); } .bg-red { background-color: var(--col-red); } .bg-dark-red { background-color: var(--col-dark-red); } .bg-light-dark-red { background-color: var(--col-light-dark-red); } .bg-light-red { background-color: var(--col-light-red); } .bg-org { background-color: var(--col-org); } .bg-light-org { background-color: var(--col-light-org); } .bg-blue { background-color: var(--col-blue); } .bg-light-blue { background-color: var(--col-light-blue); } .bg-yellow { background-color: var(--col-yellow); } .bg-light-yellow { background-color: var(--col-light-yellow); } .flex { display: flex; } .flex-sp { display: flex !important; } .flex-pc { display: none !important; } .inline-block { display: inline-block; } .text-deco-none { text-decoration: unset; } .hover\:opacity { opacity: 1; transition: all 0.25s ease-in-out; } .hover\:opacity:hover { opacity: 0.7; } .ai-center { align-items: center; } .jc-center { justify-content: center; } .jc-between { justify-content: space-between; } .jc-end { justify-content: flex-end; } .text-right { text-align: right; } .w-full { width: 100%; } .w-fit { width: -moz-fit-content; width: fit-content; } .block { display: block; } .d-flex { display: flex; } .owl-2 > * + * { margin-top: 2rem; } .d-pc { display: none !important; } @media screen and (min-width: 769px) { .text-center-pc { text-align: center; } .mt-0-pc { margin-top: 0; } .d-sp { display: none; } .grid-sp { display: none; } .grid-pc { display: grid; } .d-pc { display: block !important; } inline-block-pc { display: inline-block; } .block-pc { display: block; } .flex-column-pc { flex-flow: column nowrap; } .flex-wrap-pc { flex-wrap: wrap; } .flex-sp { display: none !important; } .flex-pc { display: flex !important; } .gap-30-pc { gap: 30px; } .gap-60-pc { gap: 60px; } .mt-1-pc { margin-top: 1rem; } .p-1-pc { padding: 1rem; } .pt-1-pc { padding-top: 1rem; } .pb-1-pc { padding-bottom: 1rem; } .py-1-pc { padding-top: 1rem; padding-bottom: 1rem; } .pl-1-pc { padding-left: 1rem; } .pr-1-pc { padding-right: 1rem; } .mt-2-pc { margin-top: 2rem; } .p-2-pc { padding: 2rem; } .pt-2-pc { padding-top: 2rem; } .pb-2-pc { padding-bottom: 2rem; } .py-2-pc { padding-top: 2rem; padding-bottom: 2rem; } .pl-2-pc { padding-left: 2rem; } .pr-2-pc { padding-right: 2rem; } .mt-3-pc { margin-top: 3rem; } .p-3-pc { padding: 3rem; } .pt-3-pc { padding-top: 3rem; } .pb-3-pc { padding-bottom: 3rem; } .py-3-pc { padding-top: 3rem; padding-bottom: 3rem; } .pl-3-pc { padding-left: 3rem; } .pr-3-pc { padding-right: 3rem; } .mt-4-pc { margin-top: 4rem; } .p-4-pc { padding: 4rem; } .pt-4-pc { padding-top: 4rem; } .pb-4-pc { padding-bottom: 4rem; } .py-4-pc { padding-top: 4rem; padding-bottom: 4rem; } .pl-4-pc { padding-left: 4rem; } .pr-4-pc { padding-right: 4rem; } .mt-5-pc { margin-top: 5rem; } .p-5-pc { padding: 5rem; } .pt-5-pc { padding-top: 5rem; } .pb-5-pc { padding-bottom: 5rem; } .py-5-pc { padding-top: 5rem; padding-bottom: 5rem; } .pl-5-pc { padding-left: 5rem; } .pr-5-pc { padding-right: 5rem; } .mt-6-pc { margin-top: 6rem; } .p-6-pc { padding: 6rem; } .pt-6-pc { padding-top: 6rem; } .pb-6-pc { padding-bottom: 6rem; } .py-6-pc { padding-top: 6rem; padding-bottom: 6rem; } .pl-6-pc { padding-left: 6rem; } .pr-6-pc { padding-right: 6rem; } .mt-7-pc { margin-top: 7rem; } .p-7-pc { padding: 7rem; } .pt-7-pc { padding-top: 7rem; } .pb-7-pc { padding-bottom: 7rem; } .py-7-pc { padding-top: 7rem; padding-bottom: 7rem; } .pl-7-pc { padding-left: 7rem; } .pr-7-pc { padding-right: 7rem; } .mt-8-pc { margin-top: 8rem; } .p-8-pc { padding: 8rem; } .pt-8-pc { padding-top: 8rem; } .pb-8-pc { padding-bottom: 8rem; } .py-8-pc { padding-top: 8rem; padding-bottom: 8rem; } .pl-8-pc { padding-left: 8rem; } .pr-8-pc { padding-right: 8rem; } .mt-9-pc { margin-top: 9rem; } .p-9-pc { padding: 9rem; } .pt-9-pc { padding-top: 9rem; } .pb-9-pc { padding-bottom: 9rem; } .py-9-pc { padding-top: 9rem; padding-bottom: 9rem; } .pl-9-pc { padding-left: 9rem; } .pr-9-pc { padding-right: 9rem; } .mt-10-pc { margin-top: 10rem; } .p-10-pc { padding: 10rem; } .pt-10-pc { padding-top: 10rem; } .pb-10-pc { padding-bottom: 10rem; } .py-10-pc { padding-top: 10rem; padding-bottom: 10rem; } .pl-10-pc { padding-left: 10rem; } .pr-10-pc { padding-right: 10rem; } .hp_sticky { position: sticky; } .top-50 { top: 50px; } .h-fit { height: -moz-fit-content; height: fit-content; } .is_wide { width: 1200px !important; } .order1-pc { order: 1; } .order2-pc { order: 2; } } @keyframes fuwafuwa { 0% { transform: translate(0, 0); } 50% { transform: translate(0, 0); } 80% { transform: translate(0, -5px); } 100% { transform: translate(0, 0); } } /* ファイル名: _program.scss 配置内容: JSなどでHTML要素を取得する際にセレクタとなるクラス、状態を管理するクラスなど接頭辞: js_ または is_ 参考元: https://qiita.com/kum44/items/117b32a4e5bdf102b1cf */ /* @ pagination // ------------------------------------------------------------ */ .pagination { display: flex; flex-flow: row wrap; align-items: center; justify-content: center; width: 100%; margin: 0; padding: 20px 0; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; } .page-grenier .pagination { padding: 30px 0 80px; } .pagination span, .pagination a { display: inline-flex; flex-flow: row wrap; align-items: center; justify-content: center; width: 50px; height: 50px; margin: 0 2px; text-align: center; letter-spacing: 0; outline: none; text-decoration: none; color: var(--col-black); background: transparent; } .page-grenier .pagination span, .page-grenier .pagination a { background: var(--col-accent); border: 1px solid var(--col-accent); } .pagination span svg, .pagination a svg { width: 15px; height: 15px; fill: transparent; vertical-align: bottom; } .pagination span.next, .pagination a.next { background: none; border-color: transparent; } .pagination span.next:hover, .pagination a.next:hover { color: var(--col-white); background: var(--col-accent); } .page-grenier .pagination span.next:hover, .page-grenier .pagination a.next:hover { background: var(--col-accent); border: 1px solid var(--col-accent); } .page-grenier .page-grenier .pagination span.next:hover, .page-grenier .page-grenier .pagination a.next:hover { background: var(--col-accent); border: 1px solid var(--col-accent); } .pagination span.prev, .pagination a.prev { background: none; } .pagination span.prev svg, .pagination a.prev svg { transform: rotate(180deg); } .pagination span.prev:hover, .pagination a.prev:hover { color: var(--col-white); background: var(--col-accent); } .page-grenier .pagination span.prev:hover, .page-grenier .pagination a.prev:hover { background: var(--col-accent); border: 1px solid var(--col-accent); } .pagination span:hover, .pagination a:hover { color: var(--col-white); background: var(--col-accent); } .page-grenier .pagination span:hover, .page-grenier .pagination a:hover { background: var(--col-accent); border: 1px solid var(--col-white); } .pagination span.is-current, .pagination span.current, .pagination a.is-current, .pagination a.current { color: var(--col-white); background: var(--col-accent); } .pagination span.is-current:hover, .pagination span.current:hover, .pagination a.is-current:hover, .pagination a.current:hover { opacity: 1; } .page-grenier .pagination span.is-current, .page-grenier .pagination span.current, .page-grenier .pagination a.is-current, .page-grenier .pagination a.current { background: var(--col-accent); border: 1px solid var(--col-accent); } .pagination.page-links span, .pagination.page-links a { width: auto; padding: 0 0.6em; } html:has(.is_schedule-for-pdf) { background-color: #fff; } #app.is_schedule-for-pdf { background: #fff; font-size: 10px; } #app.is_schedule-for-pdf .el_page-heading, #app.is_schedule-for-pdf .bl_breadCrumbs { width: 100%; max-width: 1200px; } #app.is_schedule-for-pdf .bl_print-btn button:disabled { opacity: 0.3; } #app.is_schedule-for-pdf .page_nav { font-size: 1rem; } #app.is_schedule-for-pdf .bl_print-btn { font-size: 1rem; padding: 0; } #app.is_schedule-for-pdf .bl_alert { width: calc(100% - 40px); max-width: 900px; } #app.is_schedule-for-pdf #main-print { overflow-x: scroll; } #app.is_schedule-for-pdf .program_title { font-size: 1.7em; font-weight: bold; color: #000; } #app.is_schedule-for-pdf .program_airtime { font-size: 1.5em; color: #000; line-height: 1.2; font-weight: 500; } #app.is_schedule-for-pdf .schedule-pdf { margin-top: 60px; padding: 5px; width: 3000px; height: auto; aspect-ratio: 1.4142/1; margin-left: auto; margin-right: auto; color: #000; } #app.is_schedule-for-pdf .schedule-pdf_heading { display: grid; grid-template-columns: 8% 1fr; justify-content: center; align-items: center; gap: 10px; } #app.is_schedule-for-pdf .schedule-pdf_heading hgroup { display: flex; flex-flow: column nowrap; justify-content: space-between; } #app.is_schedule-for-pdf .schedule-pdf_heading .sub { font-size: 1.7em; font-weight: 600; } #app.is_schedule-for-pdf .schedule-pdf_heading .catch { font-size: 2.5em; font-weight: 600; } #app.is_schedule-for-pdf .schedule-pdf_heading .note { font-size: 1.7em; display: flex; justify-content: space-between; } #app.is_schedule-for-pdf .schedule-pdf_table { display: table; table-layout: fixed; width: 100%; border-left: 2px solid currentColor; color: #000; } #app.is_schedule-for-pdf .schedule-pdf_table tr { display: table-row; } #app.is_schedule-for-pdf .schedule-pdf_table th { display: table-cell; vertical-align: middle; text-align: center; background-color: #fff; border-right: 2px solid currentColor; color: #000; width: calc(14.2857142857% - 7.1428571429px); width: calc((100% - 50px) / 7); } #app.is_schedule-for-pdf .schedule-pdf_table th.el_days { font-size: 1.5em; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; font-weight: 600; } #app.is_schedule-for-pdf .schedule-pdf_table th.el_airtime { font-size: 1.5em; border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; padding: 0.5em 0; font-weight: 600; } #app.is_schedule-for-pdf .schedule-pdf_table th.el_empty-th { width: 50px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; } #app.is_schedule-for-pdf .schedule-pdf_table td { display: table-cell; vertical-align: top; padding: 1mm; border-bottom: 2px solid #000; border-right: 2px solid #000; background-color: #fff; width: calc(14.2857142857% - 7.1428571429px); width: calc((100% - 50px) / 7); } #app.is_schedule-for-pdf .schedule-pdf_table td a { display: block; } #app.is_schedule-for-pdf .schedule-pdf_table td > * + * { border-top: 2px dotted var(--col-text-gray); margin-top: 5px; } .on-print { display: none; }