@charset "UTF-8"; /* # easing variables */ /** * Web Fonts */ /* Mixins ref: http://sass-lang.com/documentation/file.SASS_REFERENCE.html */ /* # メディアクエリ ## 600 <= screen <= 800 ``` @include screen('~', 600, 800) {} ``` ## 640 < screen ``` @include screen('<') {} ``` ## screen >= 640 ``` @include screen('>=') {} ``` */ /* # hover ``` @include hover() {} ``` */ /* # フォントベースサイズ（画面幅による可変） - 追加場所: - 単位：px - ref: https://websemantics.uk/tools/responsive-font-calculator/ */ /* # フォントサイズ - remでのフォントサイズ指定 ``` text-size(14) // = (14 / 14) em ``` */ /* # transtion - transitionのduration, easingを共通化 ``` @include transition(opacity, .6s); ``` */ /* # line clamp */ /** * カラーパレット */ /** * outlineスタイル */ /* Functions ref: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#function_directives */ /* # calc number - 余白などをem単位に計算 ``` @include unit(100, 14); ``` */ /*! sanitize.css v5.0.0 | CC0 License | github.com/jonathantneal/sanitize.css */ /* Document (https://html.spec.whatwg.org/multipage/semantics.html#semantics) ========================================================================== */ /** * 1. Remove repeating backgrounds in all browsers (opinionated). * 2. Add box sizing inheritence in all browsers (opinionated). */ *, ::before, ::after { background-repeat: no-repeat; box-sizing: border-box; } /** * 1. Add text decoration inheritance in all browsers (opinionated). * 2. Add vertical alignment inheritence in all browsers (opinionated). */ ::before, ::after { text-decoration: inherit; /* 1 */ vertical-align: inherit; /* 2 */ } /** * 1. Add border box sizing in all browsers (opinionated). * 2. Add the default cursor in all browsers (opinionated). * 3. Prevent font size adjustments after orientation changes in IE and iOS. */ html { font-family: "fot-tsukuardgothic-std", sans-serif; font-feature-settings: "kern"; font-size: 18px; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; line-height: 1.6; margin: 0; padding: 0; text-rendering: optimizeLegibility; visibility: hidden; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } html.wf-active { visibility: visible; } body { background-color: var(--theme-background-color); margin: 0; padding: 0; position: relative; } body.is-transitionDisabled * { transition: none !important; } article, aside, footer, header, nav, section { display: block; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: normal; margin: 0; padding: 0; } p { margin: 0; padding: 0; } figcaption, figure, main { /* 1 */ display: block; } pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } hr { border: 0; height: 1px; margin: 0; overflow: visible; /* 2 */ } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -.25em; } sup { top: -.5em; } img { border-style: none; height: auto; max-width: 100%; } svg { fill: currentColor; } svg:not(:root) { overflow: hidden; } table { border-collapse: collapse; } summary { display: list-item; } audio, canvas, iframe, img, svg, video { max-width: 100%; vertical-align: middle; } audio, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } progress { vertical-align: baseline; } canvas { display: inline-block; } button, input, optgroup, select, textarea { margin: 0; padding: 0; } button, input, select, textarea { color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } a { color: inherit; text-decoration: none; } a:link { text-decoration: none; } a:visited { text-decoration: none; } @media (hover: hover) { a:hover { text-decoration: none; } } a:focus, button:focus, input:focus, select:focus, textarea:focus { outline: 0; } a, area, button, input, label, select, summary, textarea, [tabindex] { /* 1 */ touch-action: manipulation; } ::-moz-selection { background-color: #b3d4fc; color: #000000; text-shadow: none; } ::selection { background-color: #b3d4fc; color: #000000; text-shadow: none; } [aria-busy="true"] { cursor: progress; } [aria-controls] { cursor: pointer; } [aria-hidden="false"][hidden]:not(:focus) { clip: rect(0, 0, 0, 0); display: inherit; position: absolute; } [aria-disabled] { cursor: default; } .wpcf7-form { position: relative; } .wpcf7-form-control-wrap { position: static !important; } .wpcf7-not-valid-tip { bottom: -1.5em; color: red !important; font-family: "courier-prime", "fot-tsukuardgothic-std", sans-serif; font-size: 0.70233rem !important; font-weight: bold !important; left: 0; position: absolute; } .wpcf7 form .wpcf7-response-output { align-items: center; animation-delay: 2.7s; animation-duration: 0.3s; animation-fill-mode: forwards; animation-name: wpcf7_output_fadeout; animation-timing-function: ease-out; border: 0 !important; color: #FFFFFF; display: flex; font-size: 1rem; font-weight: bold; height: 100%; justify-content: center; margin: 0 !important; padding: 1rem !important; pointer-events: none; position: absolute; text-align: center; top: 0; width: 100%; } .wpcf7 form.aborted .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output { background-color: rgba(255, 0, 0, 0.8); } .wpcf7 form.sent .wpcf7-response-output { background-color: rgba(0, 128, 0, 0.8); } div.wpcf7 .ajax-loader { background-color: rgba(255, 255, 255, 0.8); background-image: url("/assets/images/svg/loading.svg") !important; background-position: center; background-repeat: no-repeat; background-size: 34px 34px; display: block; height: 100% !important; left: 0; margin: 0 !important; pointer-events: none; position: absolute; top: 0; width: 100% !important; } div.wpcf7 .ajax-loader.is-active { animation-duration: 0.3s; animation-fill-mode: forwards; animation-name: wpcf7_output_fadein; animation-timing-function: ease-out; } @keyframes wpcf7_output_fadein { 0% { opacity: 0; pointer-events: none; } 100% { opacity: 1; pointer-events: auto; } } @keyframes wpcf7_output_fadeout { 0% { opacity: 1; pointer-events: auto; } 100% { opacity: 0; pointer-events: none; } } .u-debugger { display: block; font-size: 0.7rem; height: 60vh; margin-left: auto; margin-right: auto; margin-top: 50px; padding: 50px; width: calc(100% - 40px); } @media (min-width: 1281px) { .u-debugger { font-size: 1rem; } } @media (max-width: 640px) { .u-display-only-pc { display: none; } } @media (min-width: 641px) { .u-display-only-sp { display: none; } } .u-font-default { font-family: "fot-tsukuardgothic-std", sans-serif; } .u-font-monospace { font-family: "courier-prime", sans-serif; } .u-font-complex { font-family: "courier-prime", "fot-tsukuardgothic-std", sans-serif; } .u-font-size-default { font-size: 1rem; } .u-font-size-smaller-1 { font-size: 0.88889rem; } .u-font-size-smaller-2 { font-size: 0.79012rem; } .u-font-size-smaller-3 { font-size: 0.70233rem; } .u-font-size-larger-1 { font-size: 1.22rem; } .u-font-size-larger-2 { font-size: 1.4884rem; } .u-font-size-larger-3 { font-size: 1.81585rem; } .u-font-size-extra-large-0 { font-size: 1.33333rem; } .u-font-size-extra-large-1 { font-size: 2rem; } .u-font-size-extra-large-2 { font-size: 2.33333rem; } .u-font-size-extra-large-3 { font-size: 2.88889rem; } .u-font-size-extra-large-4 { font-size: 3.55556rem; } .icon-blank_window { stroke: #000000; } .icon-logo { fill: #FFFFFF; } #wpadminbar { position: fixed !important; } .l-aboutContent { margin-top: 2rem; } .l-aboutContent.is-team { margin-top: 1.5rem; } @media (min-width: 769px) { .l-aboutContent.is-team { margin-top: 2.222rem; } } .l-aboutHistoryArea { margin-top: 2rem; } .l-aboutMainArea__columns { align-items: flex-start; display: flex; justify-content: flex-end; padding-left: 10px; padding-right: 10px; } @media (min-width: 461px) { .l-aboutMainArea__columns { padding-left: 30px; padding-right: 30px; } } @media (min-width: 782px) { .l-aboutMainArea__columns { margin-left: auto; margin-right: auto; max-width: 1280px; } } @media (max-width: 599px) { .l-aboutMainArea__column { width: 100%; } } @media (min-width: 600px) and (max-width: 781px) { .l-aboutMainArea__column { width: calc(50% - 16px) !important; } } @media (min-width: 782px) { .l-aboutMainArea__column { width: 66.66%; padding-left: 16px; } } .l-aboutMainArea .c-editorArea > .wp-block-columns { padding-top: 3.6317em; position: relative; } @media (max-width: 768px) { .l-aboutMainArea .c-editorArea > .wp-block-columns { padding-top: 1.81585em; } } .l-aboutMainArea .c-expansionPanel__content .c-editorArea > .wp-block-columns:first-child { color: #FFFFFF; } .l-aboutMainArea .c-expansionPanel__content .c-editorArea > .wp-block-columns:first-child .icon { fill: #FFFFFF !important; } @media (hover: hover) { .l-aboutMainArea .c-expansionPanel__content .c-editorArea > .wp-block-columns:first-child a:hover { color: #000000; } } .l-aboutMainArea .c-expansionPanel__content .c-editorArea > .wp-block-columns:first-child:before, .l-aboutMainArea .c-expansionPanel__content .c-editorArea > .wp-block-columns:first-child:after { background-color: var(--theme-key-color); content: ''; display: block; height: calc(100% + 3.6317rem); position: absolute; top: 0; width: 50vw; z-index: -1; } .l-aboutMainArea .c-expansionPanel__content .c-editorArea > .wp-block-columns:first-child:before { left: 50%; } .l-aboutMainArea .c-expansionPanel__content .c-editorArea > .wp-block-columns:first-child:after { right: 50%; } .l-aboutSection:not(:first-child) { padding-top: 3.888rem; } .l-aboutTitle.has-main-content + .l-aboutSection { padding-top: 0; } .l-aboutTeamArea { margin-top: 2rem; } .l-aboutTitle { padding: 3.555rem 0 0; } .l-aboutTitle.has-main-content { background-color: var(--theme-key-color); } .l-aboutTitle.has-main-content .c-pageTitle { color: #FFFFFF; } .l-columns { align-items: flex-start; display: flex; flex-wrap: wrap; justify-content: flex-start; margin-left: -10px; margin-right: -10px; margin-bottom: -1.111rem; } @media (min-width: 769px) { .l-columns { margin-bottom: -1.444rem; margin-left: -1.111rem; margin-right: -1.111rem; } } @media (min-width: 769px) { .l-columns[data-columns-desktop="4"], .l-columns[data-columns-desktop="5"], .l-columns[data-columns-desktop="6"] { margin-left: -0.444rem; margin-right: -0.444rem; } } .l-columns[data-columns-mode="stretch"] { align-items: stretch; } .l-columns__item { margin-bottom: 1.111rem; padding: 0 10px; } @media (min-width: 769px) { .l-columns__item { margin-bottom: 1.444rem; padding: 0 1.111rem; } } @media (min-width: 769px) { [data-columns-desktop="4"] .l-columns__item, [data-columns-desktop="5"] .l-columns__item, [data-columns-desktop="6"] .l-columns__item { padding: 0 0.444rem 0; } } @media (max-width: 460px) { [data-columns-mobile="1"] .l-columns__item { width: 100%; } [data-columns-mobile="2"] .l-columns__item { width: 50%; } [data-columns-mobile="3"] .l-columns__item { width: 33.333%; } [data-columns-mobile="4"] .l-columns__item { width: 25%; } [data-columns-mobile="5"] .l-columns__item { width: 20%; } [data-columns-mobile="6"] .l-columns__item { width: 16.666%; } } @media (min-width: 461px) and (max-width: 1280px) { [data-columns-tablet="1"] .l-columns__item { width: 100%; } [data-columns-tablet="2"] .l-columns__item { width: 50%; } [data-columns-tablet="3"] .l-columns__item { width: 33.333%; } [data-columns-tablet="4"] .l-columns__item { width: 25%; } [data-columns-tablet="5"] .l-columns__item { width: 20%; } [data-columns-tablet="6"] .l-columns__item { width: 16.666%; } } @media (min-width: 1281px) { [data-columns-desktop="1"] .l-columns__item { width: 100%; } [data-columns-desktop="2"] .l-columns__item { width: 50%; } [data-columns-desktop="3"] .l-columns__item { width: 33.333%; } [data-columns-desktop="4"] .l-columns__item { width: 25%; } [data-columns-desktop="5"] .l-columns__item { width: 20%; } [data-columns-desktop="6"] .l-columns__item { width: 16.666%; } } .l-contactContainer { padding-top: 3.555rem; } .l-contactInformation { margin-top: 1.111rem; } @media (max-width: 460px) { .l-contactInformation { margin-top: 1.777rem; } } .c-contactMapLink + .l-contactInformation { margin-top: -0.5rem; } @media (max-width: 460px) { .c-contactMapLink + .l-contactInformation { margin-top: 1.777rem; } } .l-container, .l-aboutMainArea .c-editorArea > .wp-block-columns { padding-left: 10px; padding-right: 10px; width: 100%; } @media (min-width: 461px) { .l-container, .l-aboutMainArea .c-editorArea > .wp-block-columns { padding-left: 30px; padding-right: 30px; } } @media (min-width: 769px) { .l-container, .l-aboutMainArea .c-editorArea > .wp-block-columns { margin-left: auto; margin-right: auto; max-width: 1280px; } } .l-cookieArea { background-color: #000000; border: 1px solid #000000; bottom: 0; left: 0; pointer-events: none; position: fixed; transform: translateY(4rem); transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); width: 100%; z-index: 200; } @media (max-width: 460px) { .l-cookieArea { transform: translateY(8rem); } } .l-cookieArea.is-visible { pointer-events: auto; transform: translateY(0); transition: unset; } .l-footer { background-color: var(--theme-key-color); color: #FFFFFF; display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(5, auto); padding: 30px 10px; } @media (min-width: 769px) { .l-footer { grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: repeat(3, auto); padding: 35px 30px; } } .l-footer a { color: #FFFFFF; } .l-footer a:focus-visible { outline: 2px dashed var(--theme-sub-color); } .l-footer__headroom { grid-area: 1 / 1 / 2 / 2; } @media (min-width: 769px) { .l-footer__headroom { grid-area: 1 / 1 / 2 / 5; } } .l-footer__logo { display: inline-block; } @media (max-width: 460px) { .l-footer__logo { width: calc(50% - 10px); } } .l-footer__logo a { display: inline-block; } @media (hover: hover) { .l-footer__logo a:hover .icon-logo { fill: #000000; } } .l-footer__logo .icon-logo { height: 2rem; width: 6.666rem; } @media (min-width: 769px) { .l-footer__logo .icon-logo { height: 2.277rem; width: 7.611rem; } } .l-footer__language { display: inline-block; } @media (min-width: 461px) { .l-footer__language { padding-left: 1rem; } } @media (min-width: 769px) { .l-footer__language { padding-left: 2rem; } } .l-footer__language select { color: #000000; } .l-footer__mainLinks { align-items: flex-start; display: flex; font-family: "courier-prime", sans-serif; font-weight: bold; font-size: 0.88889rem; flex-wrap: wrap; grid-area: 2 / 1 / 3 / 2; justify-content: flex-start; padding-top: 3.6317rem; } @media (min-width: 769px) { .l-footer__mainLinks { grid-area: 2 / 1 / 3 / 4; padding-right: 0.79012rem; padding-top: 3rem; } } .l-footer__mainLinks ul { margin: 0; padding: 0; } @media (max-width: 768px) { .l-footer__mainLinks ul { width: 50%; } } @media (max-width: 768px) { .l-footer__mainLinks ul:nth-child(n + 3) { margin-top: 2.5rem; } } @media (min-width: 461px) { .l-footer__mainLinks ul:not(:last-child) { padding-right: 2.9768rem; } } @media (max-width: 768px) { .l-footer__mainLinks ul:nth-child(odd) { padding-right: 1rem; } } .l-footer__mainLinks li { list-style: none; margin-bottom: 0.79012rem; } @media (hover: hover) { .l-footer__mainLinks li a:hover { color: #000000; } } .l-footer__externalLinks { grid-area: 3 / 1 / 4 / 2; padding-top: 3.125rem; } @media (min-width: 769px) { .l-footer__externalLinks { grid-area: 2 / 4 / 3 / 5; padding-top: 3rem; } } .l-footer__copyright { font-family: "courier-prime", sans-serif; font-size: 0.70233rem; grid-area: 5 / 1 / 6 / 2; padding-top: 2.777rem; } @media (min-width: 769px) { .l-footer__copyright { grid-area: 3 / 1 / 4 / 4; line-height: 1.5; padding-right: 0.79012rem; padding-top: 3.333rem; } } @media (min-width: 769px) { .l-footer__copyright p { display: inline; } } .l-footer__pages { font-family: "courier-prime", sans-serif; font-size: 0.79012rem; font-weight: bold; grid-area: 4 / 1 / 5 / 2; margin: 0; padding: 2.9375rem 0 0; } @media (min-width: 769px) { .l-footer__pages { grid-area: 3 / 4 / 4 / 5; } } .l-footer__pages li { display: inline; list-style: none; } .l-footer__pages li:first-child { margin-right: 1rem; } @media (hover: hover) { .l-footer__pages li a:hover { color: #000000; } } .l-friendsFilters { margin-top: 1.5rem; } @media (min-width: 1281px) { .l-friendsFilters { align-items: center; display: flex; justify-content: space-between; } } @media (min-width: 1281px) { .l-friendsFilters__item { align-items: center; display: flex; justify-content: flex-start; } } @media (min-width: 1281px) { .l-friendsFilters__item.is-friends_projects { flex-grow: 1; } } @media (max-width: 1280px) { .l-friendsFilters__item:not(:first-child) { margin-top: 1rem; } } @media (min-width: 1281px) { .l-friendsFilters__item:not(:first-child) { padding-left: 2.222rem; } } .l-friendsList { margin-top: 2.777rem; min-height: 71.84vw; position: relative; } @media (min-width: 1281px) { .l-friendsList { margin-top: 3.888rem; min-height: 50vh; } } .l-friendsList__loading { align-items: center; display: flex; height: 100%; justify-content: center; left: 0; opacity: 0; pointer-events: none; position: absolute; top: 0; transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); width: 100%; z-index: 1; } .is-filterLoading .l-friendsList__loading { opacity: 1; } .l-friendsList__loading .icon-loading { fill: var(--theme-key-color); height: 40px; width: 40px; } .l-friendsList__noResult { align-items: center; background-color: #FFFFFF; display: flex; height: 100%; justify-content: center; left: 0; opacity: 0; pointer-events: none; position: absolute; top: 0; transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); width: 100%; z-index: 1; } .l-friendsList__noResult.is-visible { opacity: 1; } .l-friendsList__content { opacity: 1; transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .is-filterLoading .l-friendsList__content { opacity: 0; } .l-friendsList__content .l-columns__item { display: none; opacity: 0; } .l-friendsList__content .l-columns__item.is-filteredItemVisible.is-loadItemVisible { animation-name: fadeInLoadItem; animation-delay: 0.2s; animation-duration: 0.2s; animation-fill-mode: forwards; animation-timing-function: ease-out; display: block; } @keyframes fadeInLoadItem { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } .l-friendsLoadMore { display: none; text-align: center; } .l-friendsLoadMore.is-loadButtonVisible { display: block; } .l-friendsLoadMore .c-button { pointer-events: auto; position: relative; transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .l-friendsLoadMore .c-button::before { color: var(--theme-key-color); content: 'Loading…'; left: 0; opacity: 0; position: absolute; transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); width: 100%; } .is-moreLoading .l-friendsLoadMore .c-button { color: transparent; pointer-events: none; } .is-moreLoading .l-friendsLoadMore .c-button::before { opacity: 1; } .l-friendsPost { margin-top: 1rem; } .l-friendsPost__thumbnail { height: 0; margin: 1rem auto 0; overflow: hidden; padding-bottom: 65.25%; position: relative; } .l-friendsPost__thumbnail img { height: 100%; left: 0; -o-object-fit: cover; font-family: "object-fit:cover"; object-fit: cover; position: absolute; top: 0; width: 100%; } .l-header { align-items: center; background-color: #FFFFFF; display: flex; font-family: "courier-prime", sans-serif; font-weight: bold; justify-content: space-between; left: 0; padding: 10px 10px; /* autoprefixer: ignore next */ position: -webkit-sticky; position: sticky; top: 0; width: 100%; z-index: 100; } @media (min-width: 769px) { .l-header { padding: 20px 30px; } } .l-header__logo a { display: inline-block; } .l-header__logo a:focus-visible { outline: 2px dashed var(--theme-sub-color); } @media (hover: hover) { .l-header__logo a:hover .icon-logo { fill: var(--theme-key-color); } } .l-header__logo .icon-logo { fill: #BDBEBF; height: 2rem; width: 6.666rem; } @media (min-width: 769px) { .l-header__logo .icon-logo { height: 2.277rem; width: 7.611rem; } } .l-header__logo .icon-logo .is-adjustable { fill: #000000; } .l-header__language { flex-grow: 1; padding-left: 1rem; } @media (min-width: 769px) { .l-header__language { padding-left: 2rem; } } @media (min-width: 1281px) { .l-header__language { flex-grow: unset; width: calc(25% - 7.611rem); } } .l-header__mainLinks { align-items: center; display: flex; flex-grow: 1; font-size: 1.22rem; justify-content: center; margin: 0; padding: 0; } @media (max-width: 1060px) { .l-header__mainLinks { display: none; } } .l-header__mainLinks li { list-style: none; } .l-header__mainLinks li:not(:last-child) { margin-right: 2.44rem; } .l-header__mainLinks li a { display: inline-block; } .l-header__mainLinks li a:focus-visible { outline: 2px dashed var(--theme-sub-color); } @media (hover: hover) { .l-header__mainLinks li a:hover { color: var(--theme-key-color); } } .l-header__subLinks { align-items: center; display: flex; font-size: 0.88889rem; justify-content: flex-end; margin: 0; padding: 0; } @media (min-width: 769px) { .l-header__subLinks { width: 25%; } } .l-header__subLinks li { list-style: none; } .l-header__subLinks li:not(:last-child) { margin-right: 1.58025rem; } @media (max-width: 768px) { .l-header__subLinks li.is-about { display: none; } } .l-header__subLinks li button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; background-color: transparent; cursor: pointer; display: block; font-weight: bold; padding: 0; } .l-header__subLinks li a:focus-visible, .l-header__subLinks li button:focus-visible { outline: 2px dashed var(--theme-sub-color); } @media (hover: hover) { .l-header__subLinks li a:hover, .l-header__subLinks li button:hover { color: var(--theme-key-color); } } .l-header__subLinks li button svg { display: inline-block; height: 0.5rem; margin-left: 0.3125rem; vertical-align: baseline; width: 0.5rem; } .l-mainVisual { position: relative; } @media (min-width: 769px) { .l-mainVisual { height: 50.54vw; } } .l-mainVisual .swiper-slide { height: 82.66vw; width: 100%; } @media (min-width: 769px) { .l-mainVisual .swiper-slide { height: 100%; } } .l-mainVisualContent { align-items: stretch; background-color: var(--theme-key-color); display: flex; flex-direction: column; height: 100%; justify-content: space-between; width: 100%; } .l-main { min-height: 50vh; padding-bottom: 3.61rem; padding-top: 3.88rem; width: 100%; } html.home .l-main, html.about .l-main, html.single-projects .l-main, html.contact .l-main { padding-top: 0; } html.error404 .l-main { min-height: 75vh; } .l-mainSection:not(:first-child) { margin-top: 3.333rem; } .home .l-mainSection:first-child { margin-top: 3.333rem; } .l-navigation { color: #FFFFFF; font-family: "courier-prime", sans-serif; height: 100%; left: 0; pointer-events: none; position: fixed; top: 0; width: 100%; z-index: 101; } .l-navigation.is-open { pointer-events: auto; } .l-navigation:before { background-color: rgba(255, 255, 255, 0.5); content: ''; cursor: pointer; display: block; height: 100%; left: 0; position: fixed; top: 0; opacity: 0; transition: opacity cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s; width: 100%; } .l-navigation.is-open:before { opacity: 1; } .l-navigation a { color: #FFFFFF; } @media (hover: hover) { .l-navigation a:hover { color: #000000; } } .l-navigation__drawer { background-color: var(--theme-key-color); height: 100%; overflow-y: auto; padding: 0 10px 2rem; position: absolute; right: 0; top: 0; transform: translateX(75vw); transition: transform cubic-bezier(0.23, 1, 0.32, 1) 0.5s; width: 75vw; } @media (min-width: 769px) { .l-navigation__drawer { padding: 0 30px 2rem; transform: translateX(64vw); width: 64vw; } } .l-navigation.is-open .l-navigation__drawer { transform: translateX(0); transition-delay: 0.3s; } .l-navigation.is-open .l-navigation__headroom, .l-navigation.is-open .l-navigation__menu { opacity: 1; transition-delay: 0.7s; } .l-navigation__headroom, .l-navigation__menu { opacity: 0; transition: opacity cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; } .l-navigation__headroom { align-items: center; border-bottom: 1px solid #FFFFFF; display: flex; justify-content: space-between; padding: 1.111rem 0; } @media (min-width: 769px) { .l-navigation__headroom { padding: 1.444rem 0; } } .l-navigation__subLinks { align-items: center; display: flex; font-family: "courier-prime", sans-serif; font-size: 0.79012rem; font-weight: bold; justify-content: flex-end; margin: 0; padding: 0; } .l-navigation__subLinks li { list-style: none; } .l-navigation__subLinks li:not(:last-child) { margin-right: 1.666rem; } @media (min-width: 769px) { .l-navigation__subLinks li.is-about { display: none; } } .l-navigation__subLinks li button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; background-color: transparent; cursor: pointer; display: block; font-weight: bold; padding: 0; } .l-navigation__subLinks li a:focus-visible, .l-navigation__subLinks li button:focus-visible { outline: 2px dashed var(--theme-sub-color); } @media (hover: hover) { .l-navigation__subLinks li a:hover, .l-navigation__subLinks li button:hover { color: #000000; } .l-navigation__subLinks li a:hover svg, .l-navigation__subLinks li button:hover svg { fill: #000000; } } .l-navigation__subLinks li button svg { display: inline-block; fill: #FFFFFF; height: 0.5rem; margin-left: 0.3125rem; vertical-align: baseline; width: 0.5rem; } .l-navigation__searchForm { display: none; margin-top: 1em; } .l-navigation__searchForm.is-visible { display: block; } .l-navigation__menu { margin-top: 1.444rem; } @media (min-width: 769px) { .l-navigation__menu { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; margin-top: 1.666rem; } } .l-navigation__menu > ul { margin: 0; padding: 0; } .l-navigation__menu > ul.is-level1 { font-size: 1.33333rem; font-weight: bold; } @media (min-width: 769px) { .l-navigation__menu > ul.is-level1 { grid-area: 1 / 1 / 2 / 2; } } .l-navigation__menu > ul.is-level2 { font-size: 1rem; font-weight: bold; } @media (max-width: 768px) { .l-navigation__menu > ul.is-level2 { margin-top: 1.444rem; } } @media (min-width: 769px) { .l-navigation__menu > ul.is-level2 { grid-area: 2 / 1 / 3 / 2; padding-top: 2.8125rem; } } .l-navigation__menu > ul.is-level3 { font-size: 0.88889rem; } @media (max-width: 768px) { .l-navigation__menu > ul.is-level3 { margin-top: 1.888rem; } } @media (min-width: 769px) { .l-navigation__menu > ul.is-level3 { grid-area: 1 / 2 / 2 / 3; padding-left: 1rem; } } .l-navigation__menu > ul li { line-height: 1; list-style: none; } .l-navigation__menu > ul li:not(:first-child) { margin-top: 1.111rem; } .l-navigation__menu > ul li a:focus-visible { outline: 2px dashed var(--theme-sub-color); } .l-navigation__externalLinks { margin-top: 3rem; } @media (min-width: 769px) { .l-navigation__externalLinks { grid-area: 2 / 2 / 3 / 3; margin-top: 2.5rem; padding-left: 1rem; } } .l-navigation__externalLinks > div { align-items: stretch; display: flex; flex-direction: column; height: 100%; justify-content: flex-end; } .l-noPost { margin-top: 1rem; } .l-pageDescription { font-size: 1rem; } .l-pageDescription:not(:first-child) { margin-top: 1.666rem; } .l-pinnedNews { background-color: #FFFFFF; padding: 0 10px; width: 100%; } @media (min-width: 769px) { .l-pinnedNews { padding: 0 30px; } } .l-postCategories { margin-top: 2.777rem; } @media (min-width: 461px) { .l-postCategories { margin-top: 3.333rem; } } .l-postCategories > .c-pageTitle { margin-top: 3.333rem; } .l-postCategories .c-pageTitle:first-child { margin-top: 0; } .l-postCategories .c-horizontalPanel { margin-top: 1.777rem; } .l-postCategories .c-horizontalPanel .c-horizontalPanel__title { font-size: 2.33333rem; } @media (max-width: 460px) { .l-postCategories .c-horizontalPanel .c-horizontalPanel__title { font-size: 2rem; } } .l-postCategories .c-horizontalPanel .c-horizontalPanel__excerpt { font-size: 1rem; } @media (min-width: 769px) { .l-postColumn { align-items: flex-start; display: flex; justify-content: space-between; } } .c-pageTitle + .l-postColumn { margin-top: 1.777rem; } @media (min-width: 769px) { .c-pageTitle + .l-postColumn { margin-top: 2.722rem; } } @media (min-width: 769px) { .l-postColumn > aside:first-child { padding-right: 2.222rem; width: 10.555rem; } } @media (max-width: 768px) { .l-postColumn > *:last-child { margin-top: 1.777rem; } } @media (min-width: 769px) { .l-postColumn > *:last-child { width: calc(100% - 10.555rem); } } .l-postHeader__meta { width: 100%; } .l-postHeader__overview { margin-top: 1.111rem; } @media (min-width: 1281px) { .l-postHeader__overview { align-items: flex-start; display: flex; justify-content: space-between; } } @media (min-width: 1281px) { .l-postHeader__overview > *:nth-child(1) { flex-grow: 1; width: 76%; } } @media (max-width: 1280px) { .l-postHeader__overview > *:nth-child(2) { align-items: center; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 1rem; } } @media (max-width: 460px) { .l-postHeader__overview > *:nth-child(2) { align-items: flex-start; } } @media (min-width: 1281px) { .l-postHeader__overview > *:nth-child(2) { padding-left: 1.111rem; width: 24%; } } @media (max-width: 1280px) { .l-postHeader__overview > *:nth-child(2) .c-externalInfo { width: 50%; } } @media (max-width: 1280px) { .l-postHeader__overview > *:nth-child(2) .c-postAuthor { width: 50%; } } @media (min-width: 1281px) { .l-postHeader__overview > *:nth-child(2) .c-externalInfo + .c-postAuthor { border-top: 1px solid rgba(0, 0, 0, 0.1); margin-top: 1.444rem; padding-top: 1.111rem; } } @media (max-width: 1280px) { .l-postHeader__overview > *:nth-child(2) .c-postExcerpt { margin-top: 1.666rem; width: 100%; } } @media (min-width: 1281px) { .l-postHeader__overview > *:nth-child(2) .c-postExcerpt { margin-top: 1.22rem; } } @media (min-width: 1281px) { .l-postHeader__overview > *:nth-child(2) .c-externalInfo + .c-postExcerpt { border-top: 1px solid rgba(0, 0, 0, 0.1); padding-top: 1.111rem; } } .l-postRelativeContent { margin-left: calc((10.555rem + (100vw - 1220px) / 2) * -1); margin-right: calc((100vw - 1220px) / 2 * -1); } @media (max-width: 1280px) { .l-postRelativeContent { margin-left: -30px; margin-right: -30px; } } @media (max-width: 460px) { .l-postRelativeContent { margin-left: -10px; margin-right: -10px; } } .l-projectsContent + .l-projectArchive { margin-top: 3.333rem; } .l-projectArchive [data-columns-mode="stretch"] .c-verticalPanel { height: 100%; } @media (min-width: 769px) { .l-projectArchive .c-verticalPanel__content { padding: 1.388rem 1.666rem; } } .l-projectArchive .c-verticalPanel__title { font-family: "courier-prime", "fot-tsukuardgothic-std", sans-serif; font-size: 1.81585rem; line-height: 1.24; } @media (max-width: 768px) { .l-projectArchive .c-verticalPanel__title { font-size: 1.4884rem; } } .l-projectArchive .c-verticalPanel__excerpt { font-size: 1rem; } .l-projectsContent { margin-top: 1.111rem; } @media (min-width: 769px) { .l-projectsContent { align-items: flex-start; display: flex; justify-content: space-between; margin-top: 2.222rem; } } @media (min-width: 769px) { .l-projectsContent.has-aside > *:first-child { width: 100%; } } @media (min-width: 769px) { .l-projectsContent.has-aside > *:first-child { padding-right: 1.666rem; width: 80%; } } @media (max-width: 768px) { .l-projectsContent > aside:last-child { margin-top: 1.666rem; padding-left: 23.66%; padding-right: 23.66%; } } @media (min-width: 769px) { .l-projectsContent > aside:last-child { width: 20%; } } .l-projectsMainimage { height: 50.54vw; max-height: 35.94rem; position: relative; width: 100%; } @media (max-width: 768px) { .l-projectsMainimage .swiper-pagination { display: none; } } .l-searchForm { display: none; left: 0; position: sticky; top: 80px; z-index: 100; } @media (max-width: 768px) { .l-searchForm { top: 56px; } } .l-searchForm.is-visible { display: block; } .c-historyBlock__year { font-family: "courier-prime", sans-serif; font-size: 2rem; font-weight: bold; line-height: 1; } .c-historyBlock__lists { align-items: flex-start; display: flex; justify-content: flex-start; margin-top: 1.25rem; } .c-historyBlock__list { margin: 0; padding: 0; } .c-historyBlock__list + .c-historyBlock__list { margin-left: 1.125rem; } @media (min-width: 769px) { .c-historyBlock__list + .c-historyBlock__list { margin-left: 2.277rem; } } .c-historyBlock__listItem { align-items: stretch; display: flex; height: 5.111rem; justify-content: flex-start; list-style: none; width: 21.833rem; } .c-historyBlock__listItem:not(:first-child) { margin-top: 1.111rem; } .c-historyBlock__date { display: inline-block; font-family: "courier-prime", sans-serif; font-size: 1.33333rem; font-weight: bold; padding-right: 0.416em; } .c-historyBlock__content { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; border-left: 1px solid #000000; font-size: 0.79012rem; padding-left: 1em; padding-right: 0.571em; white-space: normal; width: 57.44%; word-break: break-all; } @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { .c-historyBlock__content { background: #fff; height: 5em; padding-right: 1em; position: relative; } .c-historyBlock__content:before { content: "..."; position: absolute; right: 0; bottom: 0; display: inline-block; width: 1em; } .c-historyBlock__content:after { content: ""; position: relative; right: -1em; float: right; width: 1em; height: 100%; background-color: inherit; } } .c-historyBlock__image { height: 100%; margin: 0; overflow: hidden; position: relative; width: 34.35%; } .c-historyBlock__image img { height: 100%; left: 0; -o-object-fit: cover; font-family: "object-fit:cover"; object-fit: cover; position: absolute; top: 0; width: 100%; } .c-backLink { display: inline-block; font-size: 0.79012rem; line-height: 1; margin-left: 2.777rem; vertical-align: middle; } .c-backLink:focus-visible { outline: 2px dashed var(--theme-sub-color); } @media (hover: hover) { .c-backLink:hover { color: var(--theme-key-color); } .c-backLink:hover .icon-arrow { fill: var(--theme-key-color); } } .c-backLink .icon-arrow { display: inline-block; height: 10px; margin-right: 0.5em; margin-top: -0.1em; width: 5px; } .c-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #FFFFFF; border: 1px solid var(--theme-key-color); border-radius: 2rem; color: var(--theme-key-color); cursor: pointer; display: inline-block; font-size: 0.79012rem; font-weight: bold; min-width: 7.777rem; padding: 0.75em 1em; text-align: center; } .c-button:focus-visible { outline: 2px dashed var(--theme-sub-color); } @media (hover: hover) { .c-button:hover { background-color: var(--theme-key-color); border-color: var(--theme-key-color); color: #FFFFFF; } } .c-button.is-transparent { background-color: transparent; } .c-button.is-filled { background-color: var(--theme-key-color); color: #FFFFFF; } @media (hover: hover) { .c-button.is-filled:hover { background-color: #FFFFFF; color: var(--theme-key-color); } } .c-button.is-white { border-color: #FFFFFF; color: #FFFFFF; } .c-button > img, .c-button > svg { display: inline-block; height: auto; margin-right: 5px; width: 1.888rem; } .c-button > .icon-arrow_finger_right { height: 1rem; margin-top: -1px; } .c-categoryFilter { margin: 0; padding: 0; } .c-categoryFilter > li { list-style: none; margin-top: 1rem; } @media (max-width: 768px) { .c-categoryFilter > li { align-items: center; display: flex; flex-wrap: wrap; justify-content: flex-start; } } @media (min-width: 769px) { .c-categoryFilter > li { margin-top: 1.666rem; } } .c-categoryFilter > li:first-child { margin-top: 0; } .c-categoryFilter label { display: block; font-family: "courier-prime", sans-serif; font-size: 1rem; line-height: 1; } @media (max-width: 768px) { .c-categoryFilter label { padding-right: 10px; white-space: nowrap; } } @media (max-width: 768px) { .c-categoryFilter .c-selectForm { flex-grow: 1; } } @media (min-width: 769px) { .c-categoryFilter .c-selectForm { margin-top: 0.888rem; width: 100%; } } .c-categoryFilter .c-selectForm > p { font-family: "courier-prime", "fot-tsukuardgothic-std", sans-serif; font-weight: bold; } .c-contactMapLink { color: var(--theme-key-color); font-size: 0.88889rem; margin-top: 0.5rem; text-align: right; } .c-contactMapLink:focus-visible { outline: 2px dashed var(--theme-sub-color); } @media (max-width: 460px) { .c-contactMapLink { margin-top: 1.111rem; } } .c-formArea { background-color: #FFFFFF; padding: 1.5rem 20px 1.777rem; position: relative; } @media (min-width: 769px) { .c-formArea { align-items: stretch; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 2.333rem 2.777rem; } } .c-formArea:not(:first-child) { margin-top: 1.5rem; } @media (min-width: 769px) { .c-formArea:not(:first-child) { margin-top: 2.222rem; } } @media (min-width: 769px) { .c-formArea__column { align-items: center; display: flex; flex-wrap: wrap; justify-content: flex-start; width: 48.2%; } } @media (max-width: 768px) { .c-formArea__column:not(:first-child) { margin-top: 1.5rem; } } .c-formArea__label { display: block; font-size: 1rem; font-weight: bold; margin-top: 1.111rem; } @media (min-width: 769px) { .c-formArea__label { width: 30%; } } .c-formArea__label:nth-of-type(1) { margin-top: 0; } .c-formArea__label.is-contact-type { height: 0; left: 0; overflow: hidden; pointer-events: none; position: absolute; top: 0; width: 0; } .c-formArea__content { flex-grow: 1; margin-top: 1.111rem; position: relative; } @media (min-width: 769px) { .c-formArea__content { width: 70%; } } @media (min-width: 769px) { .c-formArea__content:nth-of-type(1) { margin-top: 0; } } .c-formArea__button { margin-top: 2.222rem; text-align: center; width: 100%; } .c-formArea__content textarea { height: 10.75rem; width: 100%; } .c-googleMaps { padding-bottom: 40%; position: relative; } @media (max-width: 460px) { .c-googleMaps { padding-bottom: 100%; } } .c-googleMaps iframe { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .c-cookieArea { align-items: center; display: flex; justify-content: space-between; } .c-cookieArea__description { color: #FFFFFF; flex-shrink: 20; font-size: 0.70233rem; font-weight: bold; padding: 0.7em 1.666em 0.8em 0; } @media (min-width: 461px) { .c-cookieArea__description { padding: 0.5em 1.666em 0.5em 0; } } .c-cookieArea__button { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #FFFFFF; border: 1px solid #000000; border-radius: 0; color: #000000; cursor: pointer; font-family: "courier-prime", sans-serif; font-size: 0.79012rem; font-weight: bold; height: 1.666rem; text-align: center; width: 3.611rem; } .c-cookieArea__button:focus-visible { outline: 2px dashed var(--theme-sub-color); } @media (min-width: 461px) { .c-cookieArea__button { width: 5.388rem; } } @media (hover: hover) { .c-cookieArea__button:hover { background-color: var(--theme-key-color); color: #FFFFFF; } } .c-editorArea:not(:first-child) { margin-top: 50px; } .c-expansionPanel__content { overflow: hidden; } .c-expansionPanel.is-open .c-expansionPanel__content { overflow: initial; } .c-expansionPanel__button { display: none; margin-top: 4.1rem; } @media (max-width: 768px) { .c-expansionPanel__button { margin-top: 2rem; } } .c-expansionPanel.is-active .c-expansionPanel__button { display: block; } .c-expansionPanel__button .c-button > span:last-child { display: none; } .c-expansionPanel.is-open .c-expansionPanel__button .c-button > span:first-child { display: none; } .c-expansionPanel.is-open .c-expansionPanel__button .c-button > span:last-child { display: block; } .c-externalInfo figure { margin: 0 auto; padding-bottom: 62.25%; position: relative; } .c-externalInfo figure img { height: 100%; left: 0; -o-object-fit: cover; font-family: "object-fit:cover"; object-fit: cover; position: absolute; top: 0; width: 100%; } .c-externalInfo p { font-size: 0.70233rem; margin-top: 0.5em; text-align: center; } .c-externalInfo p a { color: var(--theme-key-color); } .c-externalInfo p a:focus-visible { outline: 2px dashed var(--theme-sub-color); } .c-inputForm { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 3px; display: inline-block; font-size: 0.88889rem; min-width: 2rem; padding: 0.5rem 2rem 0.5rem 0.5rem; } .c-inputForm:focus { outline: 2px dashed var(--theme-sub-color); } .c-inputForm.is-width-100 { width: 100%; } .c-selectForm { display: inline-block; min-width: 2rem; position: relative; vertical-align: middle; } .c-selectForm.has-border { border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 3px; } .c-selectForm.is-width-100 { width: 100%; } .c-selectForm.is-background-white { background-color: #FFFFFF; } .c-selectForm:after { align-items: center; content: '▼'; display: flex; font-size: 0.5rem; height: 100%; justify-content: center; pointer-events: none; position: absolute; right: 0; top: 0; vertical-align: middle; width: 1rem; z-index: 0; } .c-selectForm.has-border:after { width: 2rem; } .c-selectForm select { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; height: 100%; opacity: 0; position: absolute; left: 0; top: 0; width: 100%; } .c-selectForm select:focus-visible { outline: 2px dashed var(--theme-sub-color); } .c-selectForm select::-ms-expand { display: none; } .c-selectForm > p { font-size: 0.79012rem; white-space: nowrap; overflow: hidden; padding: 0 1rem 0 0; text-overflow: ellipsis; text-align: left; } .c-selectForm > p:empty:after { content: ''; display: inline-block; } .c-selectForm.has-border > p { padding: 0.65rem 2rem 0.65rem 0.5rem; } .c-textareaForm { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 3px; display: inline-block; font-size: 0.88889rem; padding: 0.5rem 2rem 0.5rem 0.5rem; width: 100%; } .c-textareaForm:focus { outline: 2px dashed var(--theme-sub-color); } .c-friendsCount { border: 1px solid #000000; border-radius: 1em; color: #000000; display: inline-block; font-family: "courier-prime", sans-serif; font-size: 1rem; font-weight: bold; margin-left: 1em; padding: 0 0.4em; vertical-align: middle; } @media (min-width: 1281px) { .c-friendsFilter { align-items: center; display: flex; flex-grow: 1; justify-content: flex-start; } } @media (min-width: 1281px) { .c-friendsFilter:not(:last-child) { padding-right: 0.5rem; } } .c-friendsFilter label { display: block; font-family: "courier-prime", sans-serif; font-size: 1rem; line-height: 1; } @media (min-width: 1281px) { .c-friendsFilter label { display: inline-block; margin-right: 1rem; } } .c-friendsFilter .c-selectForm { display: block; font-family: "courier-prime", "fot-tsukuardgothic-std", sans-serif; } @media (max-width: 1280px) { .c-friendsFilter .c-selectForm { margin-top: 1rem; } } @media (min-width: 1281px) { .c-friendsFilter .c-selectForm { display: inline-block; flex-grow: 1; } } .c-friendsFilter .c-selectForm.is-hidden { pointer-events: none; visibility: hidden; } .c-friendsFilter .c-selectForm > p { font-weight: bold; } @media (min-width: 1281px) { .c-friendsFilter .c-selectForm > p { max-width: 27.777rem; min-width: 13.888rem; } } .c-friendsModal { align-items: center; background-color: rgba(255, 255, 255, 0.5); display: flex; cursor: pointer; height: 100%; justify-content: center; left: 0; opacity: 0; pointer-events: none; position: fixed; top: 0; visibility: hidden; width: 100%; z-index: 15; } .c-friendsModal.is-visible { opacity: 1; pointer-events: auto; visibility: visible; } .c-friendsModal__wrapper { background-color: var(--theme-key-color); cursor: default; max-height: 75vh; max-width: calc(1280px - 30px * 2); padding: 3.333rem 6.666rem; width: 100%; } @media (max-width: 1280px) { .c-friendsModal__wrapper { max-width: calc(100% - 30px * 2); } } @media (max-width: 768px) { .c-friendsModal__wrapper { max-width: calc(100% - 20px); padding: 1.3rem 20px 2.5rem; position: relative; } } .c-friendsModal__content { max-height: calc(75vh - 5rem); overflow-x: hidden; overflow-y: auto; } @media (min-width: 769px) { .c-friendsModal__content { max-height: calc(75vh - 6.666rem); } } @media (max-width: 768px) and (hover: hover) { .c-friendsModal__content:hover .c-friendsModal__prev, .c-friendsModal__content:hover .c-friendsModal__next { opacity: 1; } } .c-friendsModal__prev, .c-friendsModal__next { cursor: pointer; height: 17px; line-height: 0; margin-top: -8px; opacity: 0; pointer-events: none; position: absolute; top: 50%; transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); width: 34px; z-index: 1; } .c-friendsModal__prev:focus-visible, .c-friendsModal__next:focus-visible { outline: 2px dashed var(--theme-sub-color); } .c-friendsModal__prev .icon-arrow_finger_right, .c-friendsModal__next .icon-arrow_finger_right { fill: #FFFFFF; filter: drop-shadow(0px 0px 2px var(--theme-key-color)); height: 17px; } .c-friendsModal__prev.is-visible, .c-friendsModal__next.is-visible { opacity: 0.5; pointer-events: auto; } @media (max-width: 768px) { .is-modal-content-scrolled .c-friendsModal__prev, .is-modal-content-scrolled .c-friendsModal__next { opacity: 0; pointer-events: none; } } @media (max-width: 768px) { .c-friendsModal__prev, .c-friendsModal__next { top: 33vw; } } @media (max-width: 460px) { .c-friendsModal__prev, .c-friendsModal__next { top: 38vw; } } @media (hover: hover) { .c-friendsModal__prev:hover, .c-friendsModal__next:hover { opacity: 1; } } .c-friendsModal__prev { left: calc(50% - 1280px / 2 + 30px + 1.111rem); transform: scale(-1, 1); } @media (max-width: 1280px) { .c-friendsModal__prev { left: 60px; } } @media (max-width: 768px) { .c-friendsModal__prev { left: 10px; } } .c-friendsModal__next { right: calc(50% - 1280px / 2 + 30px + 1.111rem); } @media (max-width: 1280px) { .c-friendsModal__next { right: 60px; } } @media (max-width: 768px) { .c-friendsModal__next { right: 10px; } } .c-friendsModal__close { color: #FFFFFF; cursor: pointer; font-family: "courier-prime", sans-serif; font-size: 0.88889rem; font-weight: bold; position: absolute; right: 1.111rem; top: 1.111rem; } .c-friendsModal__close:focus-visible { outline: 2px dashed var(--theme-sub-color); } .c-friendsModal__close svg { display: inline-block; fill: #FFFFFF; height: 0.5rem; margin-left: 0.3125rem; vertical-align: baseline; width: 0.5rem; } .c-friendsPanel { cursor: pointer; position: relative; } .c-friendsPanel:focus-visible { outline: 2px dashed var(--theme-sub-color); } @media (hover: hover) { .c-friendsPanel:hover .c-friendsPanel__title, .c-friendsPanel:hover .c-friendsPanel__titleAnotherLang { color: var(--theme-key-color); } .c-friendsPanel:hover .c-friendsPanel__image img { opacity: 0.5; } } .c-friendsPanel__status { align-items: flex-end; display: flex; flex-direction: column; justify-content: flex-start; position: absolute; right: 0; top: 0; z-index: 1; } .c-friendsPanel__statusName { background-color: var(--theme-key-color); border-radius: 1em; color: #FFFFFF; display: inline-block; font-family: "courier-prime", sans-serif; font-size: 0.70233rem; font-weight: bold; padding: 0 0.75em; } @media (max-width: 460px) { .c-friendsPanel__statusName { font-size: 0.6243rem; } } .c-friendsPanel__statusName:not(:first-child) { margin-top: 0.25em; } .c-friendsPanel__image { background-color: var(--theme-key-color); border-radius: 50%; height: 0; margin: 0 auto; overflow: hidden; padding-bottom: 100%; position: relative; } .c-friendsPanel__image img { height: 100%; left: 0; -o-object-fit: cover; font-family: "object-fit:cover"; object-fit: cover; position: absolute; top: 0; width: 100%; } .c-friendsPanel__content { background-color: #FFFFFF; margin-top: -1rem; padding: 0.79012rem 0.88889rem; position: relative; text-align: center; } .c-friendsPanel__content:before { border-style: solid; border-width: 0 7.5px 13px 7.5px; border-color: transparent transparent #FFFFFF transparent; content: ''; display: block; height: 0; left: 50%; margin-left: -5px; position: absolute; top: -10px; width: 0; z-index: 1; } .c-friendsPanel__title { font-size: 0.70233rem; font-weight: bold; line-height: 1.24; word-break: keep-all; } .c-friendsPanel__titleAnotherLang { font-family: "courier-prime", "fot-tsukuardgothic-std", sans-serif; font-size: 0.79012rem; font-weight: bold; margin-top: 0.5em; } @media (max-width: 460px) { .c-friendsPanel__titleAnotherLang { margin-top: 0.2em; } } .c-friendsPanel__subInfo { font-size: 0.70233rem; margin-top: 0.4em; } @media (max-width: 460px) { .c-friendsPanel__subInfo { margin-top: 0.2em; } } .c-friendsPanel__caption { font-family: "courier-prime", "fot-tsukuardgothic-std", sans-serif; font-size: 0.6243rem; line-height: 1.24; margin-top: 1.5em; } .c-friendsPostContent { color: #FFFFFF; position: relative; } @media (min-width: 769px) { .c-friendsPostContent { align-items: flex-start; display: flex; flex-wrap: wrap; justify-content: space-between; } } @media (max-width: 768px) { .c-friendsPostContent { padding-top: 1.5rem; } } .single-friends .c-friendsPostContent, .single-team .c-friendsPostContent { color: #000000; } .c-friendsPostContent [data-friends-content]:not(.is-visible) { display: none; } .c-friendsPostContent__status { line-height: 0; width: 100%; } @media (max-width: 768px) { .c-friendsPostContent__status { left: 2rem; position: absolute; top: 0; } } @media (max-width: 460px) { .c-friendsPostContent__status { left: 0; } } .c-friendsPostContent__status.is-visible { margin-bottom: 0.5rem; } .c-friendsPostContent__status > * { background-color: #FFFFFF; border-radius: 1em; color: var(--theme-key-color); display: inline-block; font-family: "courier-prime", sans-serif; font-size: 0.70233rem; font-weight: bold; line-height: 1.6; padding: 0 0.75em; } @media (max-width: 460px) { .c-friendsPostContent__status > * { font-size: 0.6243rem; } } .c-friendsPostContent__status > *:not(:first-child) { margin-left: 0.5em; } .c-friendsPostContent__image { margin: 0; width: 31.2%; } @media (max-width: 768px) { .c-friendsPostContent__image { margin-left: auto; margin-right: auto; padding-bottom: calc((100% - 4rem) * 0.6525); position: relative; width: calc(100% - 4rem); } } @media (max-width: 460px) { .c-friendsPostContent__image { padding-bottom: calc(100% * 0.6525); width: 100%; } } .c-friendsPostContent__image img { background-color: rgba(0, 0, 0, 0.1); height: auto; width: 100%; } @media (max-width: 768px) { .c-friendsPostContent__image img { height: 100%; left: 0; -o-object-fit: cover; font-family: "object-fit:cover"; object-fit: cover; position: absolute; top: 0; } } .c-friendsPostContent__image figcaption { font-family: "courier-prime", "fot-tsukuardgothic-std", sans-serif; font-size: 0.70233rem; margin-top: 0.5em; } @media (max-width: 768px) { .c-friendsPostContent__image figcaption { background-color: rgba(0, 0, 0, 0.5); bottom: 0; color: #FFFFFF; font-size: 0.6243rem; font-weight: bold; left: 0; padding: 0 0.5em; position: absolute; width: 100%; } } @media (min-width: 769px) { .c-friendsPostContent__contents { width: 64.9%; } } .c-friendsPostContent__title { font-size: 1rem; font-weight: bold; line-height: 1.5; } @media (max-width: 768px) { .c-friendsPostContent__title { margin-top: 1.111rem; text-align: center; } } @media (min-width: 769px) { .c-friendsPostContent__title { font-size: 1.4884rem; } } .c-friendsPostContent__titleAnotherLang { font-family: "courier-prime", "fot-tsukuardgothic-std", sans-serif; font-size: 0.79012rem; font-weight: bold; } @media (max-width: 768px) { .c-friendsPostContent__titleAnotherLang { margin-top: 0.2em; text-align: center; } } .c-friendsPostContent__subInfo { font-size: 0.70233rem; font-weight: bold; margin-top: 1.2em; } @media (max-width: 768px) { .c-friendsPostContent__subInfo { text-align: center; } } .c-friendsPostContent__content { font-weight: bold; margin-top: 0.777rem; } .c-friendsPostContent__urls { align-items: flex-start; display: flex; flex-direction: column; justify-content: flex-start; } .c-friendsPostContent__urls a { font-size: 0.70233rem; font-weight: bold; line-height: 1; } .c-friendsPostContent__urls a:focus-visible { outline: 2px dashed var(--theme-sub-color); } .c-friendsPostContent__urls a:first-child { margin-top: 1rem; } .c-friendsPostContent__urls a:not(:first-child) { margin-top: 1em; } .c-friendsPostContent__urls a[href="#"] { display: none; } .c-friendsPostContent__urls [data-friends-content]:not(.is-visible):after { content: none; } .c-friendsPostContent__urls a[target="_blank"]:after { content: none; } .c-friendsPostContent__urls a[target="_blank"] > span:after { content: ''; display: inline-block; height: 0.8em; margin-left: 0.3em; width: 0.8em; background-color: #FFFFFF; -webkit-mask-image: url("/assets/images/svg/blank_window.svg"); mask-image: url("/assets/images/svg/blank_window.svg"); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: cover; mask-size: cover; } .single-friends .c-friendsPostContent__urls a[target="_blank"] > span:after, .single-team .c-friendsPostContent__urls a[target="_blank"] > span:after { background-color: #000000; } .c-friendsPostContent__readmore { font-size: 0.70233rem; font-weight: bold; margin-top: 1rem; text-align: right; } .c-friendsPostContent__readmore a:focus-visible { outline: 2px dashed var(--theme-sub-color); } .c-friendsPostContent__worksHeading { font-size: 1rem; font-weight: bold; } .c-friendsPostContent__works { margin-top: 2.777rem; width: 100%; } .c-friendsPostContent__works ul { display: flex; flex-wrap: wrap; margin: 1.111rem 0 0; padding: 0; } @media (max-width: 460px) { .c-friendsPostContent__works ul { display: block; margin-bottom: -1.777rem; } } .c-friendsPostContent__works li { display: flex; flex-grow: 1; flex-direction: column; justify-content: center; list-style: none; margin: 0 0.79012rem 0.79012rem 0; width: calc(25% - 0.79012rem * 3 / 4); } @media (max-width: 460px) { .c-friendsPostContent__works li { display: block; margin: 0 0 1.777rem 0; width: 100%; } } .c-friendsPostContent__works li:nth-of-type(4n) { margin-right: 0; } .c-friendsPostContent__works figure { align-items: flex-end; display: flex; flex-direction: column; height: 100%; justify-content: flex-start; margin: 0; } @media (max-width: 460px) { .c-friendsPostContent__works figure { display: block; } } .c-friendsPostContent__works figure img { background-color: rgba(255, 255, 255, 0.5); flex: 1; height: 100%; -o-object-fit: contain; font-family: "object-fit:contain"; object-fit: contain; width: 100%; } .c-friendsPostContent__works figure figcaption { font-size: 0.6243rem; font-weight: bold; margin-top: 0.5em; width: 100%; } .c-friendsPostContent__works figure + div { font-size: 0.79012rem; font-weight: bold; margin-top: 1em; } .c-noResult { font-size: 1.22rem; font-weight: bold; text-align: center; } .c-noResult br { display: none; } @media (max-width: 768px) { .c-noResult br { display: block; } } /** NOTE: モバイル幅はc-verticalPanelと同じく縦レイアウト */ .c-horizontalPanel { background-color: #FFFFFF; display: flex; min-height: 9.888rem; position: relative; } .c-horizontalPanel:focus-visible { outline: 2px dashed var(--theme-sub-color); } @media (max-width: 768px) { .c-horizontalPanel { flex-direction: column; } } @media (min-width: 769px) { .c-horizontalPanel { align-items: stretch; justify-content: space-between; } } @media (hover: hover) { .c-horizontalPanel:hover .c-horizontalPanel__title { color: var(--theme-key-color); } .c-horizontalPanel:hover .c-horizontalPanel__image img { opacity: 0.5; } } .c-horizontalPanel + .c-horizontalPanel { margin-top: 1.555rem; } .c-horizontalPanel__label { align-items: flex-start; display: flex; justify-content: flex-start; left: 0; position: absolute; top: 0; z-index: 1; } .c-horizontalPanel__label .c-label:first-child { max-width: 12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .c-horizontalPanel__image { background-color: var(--theme-key-color); margin: 0; overflow: hidden; padding-bottom: 67.5%; position: relative; } @media (min-width: 769px) { .c-horizontalPanel__image { padding-bottom: 18.75%; width: 25%; } } .c-horizontalPanel__image > img { height: 100%; left: 0; -o-object-fit: cover; font-family: "object-fit:cover"; object-fit: cover; position: absolute; top: 0; width: 100%; } @media (min-width: 769px) { .c-horizontalPanel[data-panel-column="1:1"] .c-horizontalPanel__image { padding-bottom: 33.333%; width: 50%; } } @media (min-width: 769px) { .c-horizontalPanel[data-panel-column="1:3"] .c-horizontalPanel__image { padding-bottom: 18.75%; width: 25%; } } @media (min-width: 769px) { .c-horizontalPanel[data-panel-column="2:3"] .c-horizontalPanel__image { padding-bottom: 26.664%; width: 40%; } } .c-horizontalPanel__content { flex-grow: 1; padding: 0.88889rem; position: relative; } @media (max-width: 768px) { .c-horizontalPanel__content { padding: 0.88889rem 0.88889rem 2.66667rem; } } @media (min-width: 769px) { .c-horizontalPanel__content { width: 75%; } } @media (min-width: 769px) { .c-horizontalPanel[data-panel-column="1:1"] .c-horizontalPanel__content { width: 50%; } } @media (min-width: 769px) { .c-horizontalPanel[data-panel-column="1:3"] .c-horizontalPanel__content { width: 75%; } } @media (min-width: 769px) { .c-horizontalPanel[data-panel-column="2:3"] .c-horizontalPanel__content { width: 60%; } } .c-horizontalPanel__date { color: var(--theme-sub-color); font-family: "courier-prime", sans-serif; font-size: 0.79012rem; font-weight: bold; } .c-horizontalPanel__title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 1rem; font-weight: bold; } @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { .c-horizontalPanel__title { background: #fff; height: 3em; padding-right: 1em; position: relative; } .c-horizontalPanel__title:before { content: "..."; position: absolute; right: 0; bottom: 0; display: inline-block; width: 1em; } .c-horizontalPanel__title:after { content: ""; position: relative; right: -1em; float: right; width: 1em; height: 100%; background-color: inherit; } } .c-horizontalPanel__excerpt { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 0.79012rem; margin-top: 0.5rem; } @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { .c-horizontalPanel__excerpt { background: #fff; height: 3em; padding-right: 1em; position: relative; } .c-horizontalPanel__excerpt:before { content: "..."; position: absolute; right: 0; bottom: 0; display: inline-block; width: 1em; } .c-horizontalPanel__excerpt:after { content: ""; position: relative; right: -1em; float: right; width: 1em; height: 100%; background-color: inherit; } } @media (min-width: 769px) { .c-horizontalPanel__excerpt { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } } @media screen and (min-width: 769px) and (-ms-high-contrast: active), screen and (min-width: 769px) and (-ms-high-contrast: none) { .c-horizontalPanel__excerpt { background: #fff; height: 4em; padding-right: 1em; position: relative; } .c-horizontalPanel__excerpt:before { content: "..."; position: absolute; right: 0; bottom: 0; display: inline-block; width: 1em; } .c-horizontalPanel__excerpt:after { content: ""; position: relative; right: -1em; float: right; width: 1em; height: 100%; background-color: inherit; } } .c-horizontalPanel__modestDate { bottom: 0.88889rem; font-family: "courier-prime", sans-serif; font-size: 0.79012rem; line-height: 1; position: absolute; right: 0.88889rem; text-align: right; width: calc(50% - 1.77778rem); } .c-horizontalPanel__categories { bottom: 0.88889rem; font-family: "courier-prime", "fot-tsukuardgothic-std", sans-serif; font-size: 0.79012rem; font-weight: bold; left: 0.88889rem; line-height: 1; position: absolute; width: calc(100% - 1.77778rem); } .c-horizontalPanel__modestDate + .c-horizontalPanel__categories { width: calc(50% - 1.77778rem); } .c-horizontalPanel.is-image-right > .c-horizontalPanel__image { order: 2; } @media (max-width: 768px) { .c-horizontalPanel.is-image-right > .c-horizontalPanel__image { padding-bottom: 56.25%; } } .c-horizontalPanel.is-image-right > .c-horizontalPanel__content { order: 1; } .c-indexContent:not(:first-child) { margin-top: 1.388rem; } @media (min-width: 769px) { .c-indexContent:not(:first-child) { margin-top: 2.111rem; } } .c-indexProjectContent { font-size: calc(1rem * 1.125); margin-top: 1rem; } @media (min-width: 769px) { .c-indexProjectContent { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } } @media screen and (min-width: 769px) and (-ms-high-contrast: active), screen and (min-width: 769px) and (-ms-high-contrast: none) { .c-indexProjectContent { background: #fff; height: 4em; padding-right: 1em; position: relative; } .c-indexProjectContent:before { content: "..."; position: absolute; right: 0; bottom: 0; display: inline-block; width: 1em; } .c-indexProjectContent:after { content: ""; position: relative; right: -1em; float: right; width: 1em; height: 100%; background-color: inherit; } } @media (min-width: 1281px) { .c-indexProjectContent { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 7; } } @media screen and (min-width: 1281px) and (-ms-high-contrast: active), screen and (min-width: 1281px) and (-ms-high-contrast: none) { .c-indexProjectContent { background: #fff; height: 8em; padding-right: 1em; position: relative; } .c-indexProjectContent:before { content: "..."; position: absolute; right: 0; bottom: 0; display: inline-block; width: 1em; } .c-indexProjectContent:after { content: ""; position: relative; right: -1em; float: right; width: 1em; height: 100%; background-color: inherit; } } @media (hover: hover) { .c-horizontalPanel:hover .c-indexProjectContent { color: var(--theme-key-color); } } .c-mainVisualImage { flex-grow: 1; margin: 0; position: relative; } .c-mainVisualImage img { height: 100%; left: 0; -o-object-fit: cover; font-family: "object-fit:cover"; object-fit: cover; position: absolute; top: 0; width: 100%; } .c-mainVisualImage figcaption { height: 0; left: 0; overflow: hidden; pointer-events: none; position: absolute; top: 0; visibility: hidden; width: 0; } .c-mainVisualPost { align-items: center; color: #FFFFFF; display: flex; justify-content: space-between; padding: 1rem 1.111rem; } .c-mainVisualPost:focus-visible { outline: 2px dashed var(--theme-sub-color); } @media (max-width: 768px) { .c-mainVisualPost { padding: 0.833rem 10px; } } @media (hover: hover) { .c-mainVisualPost:hover { background-color: #000000; } .c-mainVisualPost:hover .icon-arrow_finger_right { transform: translateX(0.5rem); } } .c-mainVisualPost__icon { width: 3.055rem; } @media (max-width: 768px) { .c-mainVisualPost__icon { width: 2.5rem; } } .c-mainVisualPost__icon .icon-arrow_finger_right { fill: #FFFFFF; height: 1.888rem; transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94); width: 1.888rem; } .c-mainVisualPost__content { width: calc(100% - 3.055rem); } @media (max-width: 768px) { .c-mainVisualPost__content { width: calc(100% - 2.5rem); } } .c-mainVisualPost__title { font-family: "courier-prime", "fot-tsukuardgothic-std", sans-serif; font-size: 1.33333rem; font-weight: bold; line-height: 1.24; } @media (max-width: 768px) { .c-mainVisualPost__title { font-size: 1rem; } } .c-mainVisualPost__title .icon-blank_window { display: inline-block; height: 0.75em; margin-left: 0.5em; margin-top: -0.2em; stroke: #FFFFFF; width: 0.75em; } .c-mainVisualPost__description { font-family: "courier-prime", "fot-tsukuardgothic-std", sans-serif; font-size: 0.88889rem; font-weight: bold; } @media (max-width: 460px) { .c-mainVisualPost__description { font-size: 0.70233rem; } } .c-mainVisualPost__title + .c-mainVisualPost__description { margin-top: 0.25rem; } @media (max-width: 460px) { .c-mainVisualPost__title + .c-mainVisualPost__description { margin-top: 0.5rem; } } .c-mainVisualTitle { height: 0; left: 0; overflow: hidden; pointer-events: none; position: absolute; top: 0; visibility: hidden; width: 0; } .c-scrollIcon { bottom: 2.222rem; left: 0; position: absolute; text-align: center; width: 100%; z-index: 1; } @media (max-width: 768px) { .c-scrollIcon { display: none; } } .c-scrollIcon__label { color: #FFFFFF; font-family: "courier-prime", sans-serif; font-size: 0.88889rem; font-weight: bold; } .c-scrollIcon a { display: inline-block; } @media (hover: hover) { .c-scrollIcon a:hover { opacity: 0.5; } } .c-scrollIcon .icon-cloud { cursor: pointer; fill: #FFFFFF; height: 56px; width: 34px; } .c-sliderProcessBar { bottom: 0; height: 5px; left: 0; position: absolute; width: 100%; z-index: 2; } @media (max-width: 768px) { .c-sliderProcessBar { height: 3px; margin-top: -3px; position: relative; } } .c-sliderProcessBar:before { background-color: var(--theme-sub-color); content: ''; display: block; height: 100%; opacity: 0; pointer-events: none; transform: scaleX(0); transition: opacity linear 0.3s; width: 100%; } .c-sliderProcessBar.is-active:before { opacity: 1; transform: scaleX(1); transform-origin: left center; transition: transform linear 7s; } .c-label { display: inline-block; font-size: 0.79012rem; font-weight: bold; padding: 0.43em 0.714em; } .c-label.is-inverted { background-color: var(--theme-sub-color); color: #FFFFFF; } .c-label.is-white { background-color: #FFFFFF; color: var(--theme-sub-color); } .c-languageSelector { font-family: "courier-prime", sans-serif; font-weight: bold; position: relative; } .c-languageSelector label { display: inline-block; height: 0; left: 0; opacity: 0; overflow: hidden; pointer-events: none; position: absolute; top: 0; width: 0; } .c-languageSelector .c-selectForm { display: inline-block; text-transform: uppercase; } @media (hover: hover) { .c-languageSelector .c-selectForm:hover p { color: #000000; } .c-languageSelector .c-selectForm:hover:after { color: #000000; } } @media (hover: hover) { .l-header .c-languageSelector .c-selectForm:hover p { color: var(--theme-key-color); } .l-header .c-languageSelector .c-selectForm:hover:after { color: var(--theme-key-color); } } .c-mailSubscription { max-width: 15.625rem; } .c-mailSubscription a { background: transparent; border: 1px solid #FFFFFF; color: #FFFFFF; display: block; font-family: "courier-prime", "fot-tsukuardgothic-std", sans-serif; font-size: 0.79012rem; font-weight: bold; padding: 0.714em 0 0.428em; text-align: center; width: 100%; } @media (hover: hover) { .c-mailSubscription a:hover { background: #FFFFFF; color: #000000; } .c-mailSubscription a:hover .icon-mail { stroke: #FFFFFF; } } .c-mailSubscription a .icon-mail { display: inline-block; stroke: #FFFFFF; height: 0.571em; margin-left: 0.42em; margin-top: -0.2em; width: 0.857em; } .c-multiplePagenation { text-align: center; } .c-multiplePagenation:not(:first-child) { margin-top: 3.333rem; } .c-multiplePagenation .page-numbers { background-color: transparent; border-radius: 50%; display: inline-block; font-family: "courier-prime", sans-serif; font-size: 1.33333rem; font-weight: bold; height: 1.166em; line-height: 1.3; margin: 0 0.25em; width: 1.166em; } .c-multiplePagenation a { cursor: pointer; } .c-multiplePagenation a:focus-visible { outline: 2px dashed var(--theme-sub-color); } @media (hover: hover) { .c-multiplePagenation a:hover { background-color: var(--theme-key-color); color: #FFFFFF; } .c-multiplePagenation a:hover .icon-arrow { fill: #FFFFFF; } } .c-multiplePagenation .current { background-color: var(--theme-key-color); color: #FFFFFF; } .c-multiplePagenation .next .icon-arrow { transform: scale(-1, 1); } .c-multiplePagenation .icon-arrow { fill: #000000; height: 10px; margin: 0 auto 0.1em; width: 5px; } .c-notFoundLinks { margin-top: 2rem; } .c-notFoundLinks p:not(:first-child) { margin-top: 2rem; } .c-notFoundLinks a { border-bottom: 1px solid transparent; font-family: "courier-prime", "fot-tsukuardgothic-std", sans-serif; font-size: 0.88889rem; font-weight: bold; padding-bottom: 1px; text-decoration: none; } .c-notFoundLinks a:focus-visible { outline: 2px dashed var(--theme-sub-color); } @media (hover: hover) { .c-notFoundLinks a:hover { border-bottom: 1px solid var(--theme-key-color); color: var(--theme-key-color); } } .c-notFoundLinks .icon-arrow { display: inline-block; height: 1em; margin-top: -0.2em; transform: rotate(180deg); width: 1em; } .c-pageNavigation { background-color: #FFFFFF; padding: 0 30px; } @media (max-width: 768px) { .c-pageNavigation { padding: 0 10px; } } .c-pageNavigation.has-background-color { background-color: var(--theme-key-color); } .c-pageNavigation.is-sticky { /* autoprefixer: ignore next */ position: -webkit-sticky; position: sticky; top: 81px; z-index: 5; } @media (max-width: 768px) { .c-pageNavigation.is-sticky { top: 56px; } } .c-pageNavigation__wrapper { border-top: 1px solid #BDBEBF; overflow: auto; position: relative; -webkit-overflow-scrolling: touch; } .c-pageNavigation.has-background-color .c-pageNavigation__wrapper { border-top: 0; } .c-pageNavigation ul { margin: 0; padding: 5px; text-align: center; } @media (max-width: 768px) { .c-pageNavigation ul { white-space: nowrap; } } .c-pageNavigation li { display: inline-block; list-style: none; } .c-pageNavigation a { background-color: transparent; border-radius: 3em; color: #000000; display: inline-block; font-family: "courier-prime", "fot-tsukuardgothic-std", sans-serif; font-size: 0.88889rem; font-weight: bold; line-height: 1.24; padding: 0.5em 1em; pointer-events: auto; } .c-pageNavigation a:focus-visible { outline: 2px dashed var(--theme-sub-color); } @media (hover: hover) { .c-pageNavigation a:hover { background-color: var(--theme-key-color); color: #FFFFFF; } .c-pageNavigation a:hover .icon-double_arrow_down { fill: #FFFFFF; } } .c-pageNavigation.has-background-color a { color: #FFFFFF; } @media (hover: hover) { .c-pageNavigation.has-background-color a:hover { background-color: #FFFFFF; color: var(--theme-key-color); } .c-pageNavigation.has-background-color a:hover .icon-double_arrow_down { fill: var(--theme-key-color); } } .c-pageNavigation a.is-current { background-color: var(--theme-key-color); color: #FFFFFF; pointer-events: none; } .c-pageNavigation.has-background-color a.is-current { background-color: #FFFFFF; color: var(--theme-key-color); } .c-pageNavigation .icon-double_arrow_down { display: inline-block; fill: #000000; height: 0.5em; margin-right: 0.3125em; width: 0.5em; } .c-pageNavigation.has-background-color .icon-double_arrow_down { fill: #FFFFFF; } .c-pageNavigation .is-current .icon-double_arrow_down { fill: #FFFFFF; } .c-pageNavigation.has-background-color .is-current .icon-double_arrow_down { fill: var(--theme-key-color); } .c-pageTitle { font-family: "courier-prime", "fot-tsukuardgothic-std", sans-serif; font-size: 2.33333rem; font-weight: bold !important; line-height: 1.24; text-transform: uppercase; } @media (max-width: 768px) { .c-pageTitle { line-height: 1; } } .c-pageTitle a:focus-visible { outline: 2px dashed var(--theme-sub-color); } .c-pageTitle.has-icon { padding-left: 1.23em; padding-top: 0.1em; position: relative; } .c-pageTitle.is-large { font-size: 3.55556rem; } @media (max-width: 768px) { .c-pageTitle.is-large { font-size: 2.33333rem; } } .c-pageTitle.is-small { font-size: 1.4884em; } .c-pageTitle.has-icon figure { display: block; height: 1em; left: 0; margin: 0; position: absolute; top: 0; width: 1em; } .c-pageTitle.has-icon figure > .icon { fill: var(--theme-key-color); height: 1em; -o-object-fit: contain; font-family: "object-fit:contain"; object-fit: contain; width: 1em; } @media (hover: hover) { .c-pageTitle a:hover { color: var(--theme-key-color); } } .c-pinnedNews { background-color: #FFFFFF; border-top: 1px solid #BDBEBF; } .l-searchForm.is-visible + .l-pinnedNews .c-pinnedNews { border-top: 0; } .c-pinnedNews .swiper-slide { background-color: #FFFFFF; } .c-pinnedNews a { align-items: flex-start; display: flex; font-size: 0.79012rem; justify-content: flex-start; padding: 0.36em 0; width: 100%; } .c-pinnedNews a:focus-visible { outline: 2px dashed var(--theme-sub-color); } @media (min-width: 769px) { .c-pinnedNews a { padding: 0.64em 0; } } @media (hover: hover) { .c-pinnedNews a:hover { color: var(--theme-key-color); } } .c-pinnedNews__date { font-family: "courier-prime", sans-serif; padding-right: 1.111rem; white-space: nowrap; } .c-pinnedNews__date time { display: inline-block; } .c-pinnedNews__title { flex-grow: 1; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 1281px) { .c-postAuthor { align-items: center; display: flex; justify-content: space-between; } } .c-postAuthor figure { border-radius: 50%; height: 3.888rem; margin: 0; overflow: hidden; width: 3.888rem; } @media (max-width: 1280px) { .c-postAuthor figure { height: 4.277rem; margin: 0 auto; width: 4.277rem; } } .c-postAuthor figure img { height: 100%; -o-object-fit: cover; font-family: "object-fit:cover"; object-fit: cover; width: 100%; } @media (min-width: 1281px) { .c-postAuthor__profile { width: calc(100% - 5rem); } } @media (max-width: 1280px) { .c-postAuthor__profile { margin-top: 1em; text-align: center; } } .c-postAuthor__name { font-size: 0.70233rem; font-weight: bold; } .c-postAuthor__description { font-size: 0.6243rem; margin-top: 0.3em; } .c-postExcerpt { font-size: 0.79012rem; } .c-postMainimage { margin: 0; } .c-postMainimage img { width: 100%; } .c-postMeta { font-family: "courier-prime", sans-serif; font-size: 0.79012rem; } .c-postMeta__categories { font-weight: bold; } .c-projectsArchiveHeader { align-items: center; display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; } @media (min-width: 769px) { .c-projectsArchiveHeader { height: 27.73vw; padding-left: 30px; padding-right: 30px; } } .c-projectsArchiveHeader__image { height: 27.73vw; position: relative; width: 100%; } @media (min-width: 769px) { .c-projectsArchiveHeader__image { height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; } } .c-projectsArchiveHeader__image .swiper-slide:after { background-color: rgba(0, 0, 0, 0.5); content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; } @media (max-width: 768px) { .c-projectsArchiveHeader__image .swiper-pagination { display: none; } } .c-projectsArchiveHeader__image img { height: 100%; -o-object-fit: cover; font-family: "object-fit:cover"; object-fit: cover; width: 100%; } .c-projectsArchiveHeader__title { color: #FFFFFF; font-family: "courier-prime", "fot-tsukuardgothic-std", sans-serif; font-size: 2.33333rem; font-weight: bold; line-height: 1; width: 100%; } @media (max-width: 768px) { .c-projectsArchiveHeader__title { align-items: center; display: flex; height: 27.73vw; left: 0; padding-left: 10px; padding-right: 10px; pointer-events: none; position: absolute; top: 0; z-index: 1; } } @media (min-width: 769px) { .c-projectsArchiveHeader__title { display: inline-block; font-size: 2.33333rem; width: 50%; z-index: 1; } } .c-projectsArchiveHeader__excerpt { color: #000000; font-size: 1rem; font-weight: bold; width: 100%; } @media (max-width: 768px) { .c-projectsArchiveHeader__excerpt { padding-left: 10px; padding-right: 10px; padding-top: 1.111rem; } } @media (min-width: 769px) { .c-projectsArchiveHeader__excerpt { color: #FFFFFF; width: 50%; z-index: 1; } } .c-projectsMainimage { color: #FFFFFF; height: 100%; left: 0; overflow: hidden; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 1; } .c-projectsMainimage .l-container, .c-projectsMainimage .l-aboutMainArea .c-editorArea > .wp-block-columns, .l-aboutMainArea .c-projectsMainimage .c-editorArea > .wp-block-columns { height: 100%; } .c-projectsMainimage__wrapper { align-items: stretch; display: flex; flex-direction: column; height: 100%; justify-content: center; } .c-projectsMainimage__parent { font-family: "courier-prime", sans-serif; font-size: 0.79012rem; font-weight: bold; padding-bottom: 0.5em; } .c-projectsMainimage__title { font-family: "courier-prime", "fot-tsukuardgothic-std", sans-serif; font-size: 2.33333rem; font-weight: bold; line-height: 1; } @media (max-width: 768px) { .c-projectsMainimage__title { font-size: 2.33333rem; } } .c-projectsMainPlaceholder { height: 100%; position: relative; width: 100%; } .c-projectsMainPlaceholder img { height: 100%; left: 0; -o-object-fit: cover; font-family: "object-fit:cover"; object-fit: cover; position: absolute; top: 0; width: 100%; } .c-readmoreArea { margin-top: 1.666rem; text-align: center; } @media (min-width: 769px) { .c-readmoreArea { margin-top: 2.111rem; } } .c-recaptchaDescription { width: 100%; } @media (min-width: 769px) { .c-recaptchaDescription { text-align: center; } } .grecaptcha-badge { visibility: hidden; } .c-searchForm { align-items: stretch; border: 2px solid var(--theme-key-color); display: flex; font-family: "fot-tsukuardgothic-std", sans-serif; justify-content: space-between; } .l-navigation__searchForm .c-searchForm { border-color: #FFFFFF; } .c-searchForm__input { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #FFFFFF; border: 0; border-radius: 0; color: #000000; flex-grow: 1; font-size: 0.79012rem; font-weight: bold; padding: 1.2em 30px; } .c-searchForm__input:focus { outline: 2px dashed var(--theme-sub-color); } @media (max-width: 768px) { .c-searchForm__input { font-size: 0.70233rem; padding: 0.6em 10px; } } .c-searchForm__input::-moz-placeholder { color: rgba(0, 0, 0, 0.5); } .c-searchForm__input::placeholder { color: rgba(0, 0, 0, 0.5); } .c-searchForm__button { background: var(--theme-key-color); border: 0; color: #FFFFFF; cursor: pointer; font-size: 0.88889rem; font-weight: bold; padding: 0 30px; text-align: center; } .c-searchForm__button:focus-visible { outline: 2px dashed var(--theme-sub-color); } @media (max-width: 768px) { .c-searchForm__button { font-size: 0.79012rem; padding: 0 10px; } } @media (hover: hover) { .c-searchForm__button:hover { background: #000000; } } .c-searchResult .gsc-control-cse { background-color: transparent !important; border: 0 !important; font-family: "fot-tsukuardgothic-std", sans-serif !important; padding: 0 !important; } .c-searchResult .gsc-above-wrapper-area { border-bottom: 0 !important; } .c-searchResult .gsc-result-info { color: #000000 !important; } .c-searchResult .gsc-orderby-label { color: #000000 !important; } .c-searchResult .gsc-adBlock { border-bottom: none !important; margin-bottom: 1em !important; padding-bottom: 0 !important; } .c-searchResult .gsc-results { background-color: transparent !important; } .c-searchResult .gsc-webResult.gsc-result { border: 0 !important; padding: 2em; } @media (max-width: 460px) { .c-searchResult .gsc-webResult.gsc-result { padding: 1em 10px; } } .c-searchResult .gsc-webResult.gsc-result:not(:first-child) { margin-top: 1em; } .c-searchResult .gsc-control-cse .gs-spelling, .c-searchResult .gsc-control-cse .gs-result .gs-title, .c-searchResult .gsc-control-cse .gs-result .gs-title * { font-size: 1rem; } .c-searchResult .gs-result .gs-title { font-weight: bold; } .c-searchResult .gs-result .gs-title, .c-searchResult .gs-result .gs-title * { color: #000000 !important; } @media (hover: hover) { .c-searchResult a.gs-title:hover { color: var(--theme-key-color) !important; } } .c-searchResult .gs-web-image-box, .c-searchResult .gs-promotion-image-box { box-sizing: content-box; } .c-searchResult .gsc-results .gsc-cursor-box { border: 0 !important; margin: 1em 0; } .c-searchResult .gsc-results .gsc-cursor-box .gsc-cursor-page { background-color: transparent !important; font-size: 0.79012rem !important; } .c-searchResult .gsc-cursor-numbered-page { font-weight: bold; } .c-searchResult .gcsc-find-more-on-google { margin-left: 0 !important; padding-top: 0 !important; } .c-searchResult .gcsc-more-maybe-branding-box { border: 0 !important; margin: 0 !important; padding: 0 !important; } .c-searchResult .gsc-branding, .c-searchResult .gcsc-branding { padding: 0 !important; } :root { --swiper-navigation-size: 1.888rem; --swiper-theme-color: $color-white; } .swiper-container { overflow-x: hidden; } .is-mainvisual.swiper-container, .is-projects.swiper-container { width: 100%; height: 100%; } .is-projects .swiper-slide { position: relative; } .is-projects .swiper-slide img { height: 100%; left: 0; -o-object-fit: cover; font-family: "object-fit:cover"; object-fit: cover; position: absolute; top: 0; width: 100%; } .is-projects .swiper-pagination { padding-right: 1.666rem; text-align: right; } @media (max-width: 460px) { .is-projects .swiper-pagination { line-height: 1; padding-right: 0.555rem; } } .c-projectsSlideCaption { -webkit-box-orient: vertical; -webkit-line-clamp: 2; bottom: 1rem; color: #FFFFFF; display: -webkit-box; font-size: 0.70233rem; left: 0; max-width: 70%; overflow: hidden; padding-left: 1.666rem; pointer-events: none; position: absolute; z-index: 1; } @media (max-width: 460px) { .c-projectsSlideCaption { -webkit-line-clamp: 1; bottom: 0.555rem; padding-left: 0.555rem; } } .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 1rem; } @media (max-width: 460px) { .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 0.555rem; } } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px; } .swiper-pagination-bullet { background: #FFFFFF; cursor: pointer; height: 10px; opacity: 1; width: 10px; } .swiper-pagination-bullet:focus-visible { outline: 2px dashed var(--theme-sub-color); } .swiper-pagination-bullet-active { background: var(--theme-key-color); } .swiper-container.is-carousel { padding-left: calc((100% - 1220px) / 2 - 0.88889rem); padding-right: calc((100% - 1220px) / 2 - 0.88889rem); position: relative; } @media (max-width: 1280px) { .swiper-container.is-carousel { padding-left: calc(30px - 0.88889rem); padding-right: calc(30px - 0.88889rem); } } @media (max-width: 460px) { .swiper-container.is-carousel { padding-left: calc(10px - 10px); padding-right: calc(10px - 10px); } } .single-blog .swiper-container.is-carousel { padding-left: calc(10.555rem + (100% - 1220px) / 2 - 0.88889rem); padding-right: calc((100% - 1220px) / 2 - 0.88889rem); } @media (max-width: 1280px) { .single-blog .swiper-container.is-carousel { padding-left: calc(30px - 0.88889rem); padding-right: calc(30px - 0.88889rem); } } @media (max-width: 460px) { .single-blog .swiper-container.is-carousel { padding-left: calc(10px - 10px); padding-right: calc(10px - 10px); } } .swiper-container.is-carousel .swiper-slide { padding: 0 0.88889rem; } @media (max-width: 460px) { .swiper-container.is-carousel .swiper-slide { padding: 0 10px; } } .swiper-container.is-carousel.is-blog .swiper-slide { width: 15.555rem; } @media (min-width: 769px) { .swiper-container.is-carousel.is-blog .swiper-slide { width: 37rem; } } .swiper-container.is-carousel.is-blog .swiper-slide > * { height: 20.388rem; } @media (min-width: 769px) { .swiper-container.is-carousel.is-blog .swiper-slide > * { height: 12.444rem; } } .swiper-container.is-carousel.is-events .swiper-slide { width: 15.555rem; } @media (min-width: 769px) { .swiper-container.is-carousel.is-events .swiper-slide { width: 18.5rem; } } .swiper-container.is-carousel.is-events .swiper-slide > * { height: 20.388rem; width: 100%; } @media (min-width: 769px) { .swiper-container.is-carousel.is-events .swiper-slide > * { height: 23.111rem; } } .swiper-container.is-carousel.is-friends .swiper-slide { width: 10.666rem; } .swiper-container.is-carousel.is-friends .swiper-slide > * { width: 100%; } .swiper-container.is-history { padding-left: 10px; padding-right: 10px; position: relative; } @media (min-width: 769px) { .swiper-container.is-history { padding-left: calc((100% - 1220px) / 2 - 1.4884rem); padding-right: calc((100% - 1220px) / 2 - 1.4884rem); } } @media (min-width: 769px) { .swiper-container.is-history .swiper-slide { padding: 0 1.4884rem; width: auto !important; } } .swiper-container.is-carousel.is-team .swiper-slide { width: 10.666rem; } .swiper-container.is-carousel.is-team .swiper-slide > * { width: 100%; } .is-mainvisual .swiper-button-prev, .is-mainvisual .swiper-button-next { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: 0; height: var(--swiper-navigation-size); width: var(--swiper-navigation-size); } @media (hover: hover) { .is-mainvisual .swiper-button-prev:hover img, .is-mainvisual .swiper-button-next:hover img { opacity: 1; } } .is-mainvisual .swiper-button-prev .icon-arrow_finger_right, .is-mainvisual .swiper-button-next .icon-arrow_finger_right { fill: #FFFFFF; height: 100%; opacity: 0.5; width: 100%; } @media (hover: hover) { .is-mainvisual .swiper-button-prev .icon-arrow_finger_right:hover, .is-mainvisual .swiper-button-next .icon-arrow_finger_right:hover { opacity: 1; } } .is-mainvisual .swiper-button-prev:after, .is-mainvisual .swiper-button-next:after { content: none; } .is-mainvisual .swiper-button-prev { left: 10px; } @media (min-width: 461px) { .is-mainvisual .swiper-button-prev { left: 1.111rem; } } .is-mainvisual .swiper-button-prev .icon-arrow_finger_right { transform: scale(-1, 1); } .is-mainvisual .swiper-button-next { right: 10px; } @media (min-width: 461px) { .is-mainvisual .swiper-button-next { right: 1.111rem; } } .is-carousel .swiper-button-prev, .is-carousel .swiper-button-next, .is-history .swiper-button-prev, .is-history .swiper-button-next { align-items: center; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--theme-key-color); border: 0; border-radius: 50%; cursor: pointer; display: flex; height: 30px; justify-content: center; margin-top: -15px; opacity: 0.5; top: 50%; transition: opacity 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94); width: 30px; } @media (hover: hover) { .is-carousel .swiper-button-prev:hover, .is-carousel .swiper-button-next:hover, .is-history .swiper-button-prev:hover, .is-history .swiper-button-next:hover { opacity: 1; } } .is-carousel .swiper-button-prev:before, .is-carousel .swiper-button-prev:after, .is-carousel .swiper-button-next:before, .is-carousel .swiper-button-next:after, .is-history .swiper-button-prev:before, .is-history .swiper-button-prev:after, .is-history .swiper-button-next:before, .is-history .swiper-button-next:after { content: none; } .is-carousel .swiper-button-prev.swiper-button-disabled, .is-carousel .swiper-button-next.swiper-button-disabled, .is-history .swiper-button-prev.swiper-button-disabled, .is-history .swiper-button-next.swiper-button-disabled { cursor: not-allowed; opacity: 0.5; pointer-events: auto; } .is-carousel .swiper-button-prev .icon, .is-carousel .swiper-button-next .icon, .is-history .swiper-button-prev .icon, .is-history .swiper-button-next .icon { fill: #FFFFFF; height: 20px; width: 20px; } @media (max-width: 460px) { .is-carousel.is-slider-changing .swiper-button-prev, .is-carousel.is-slider-changing .swiper-button-next, .is-history.is-slider-changing .swiper-button-prev, .is-history.is-slider-changing .swiper-button-next { opacity: 1; } } .is-carousel .swiper-button-prev, .is-history .swiper-button-prev { left: calc((100% - 1220px) / 2 - 0.88889rem); margin-left: -5px; } @media (max-width: 1280px) { .is-carousel .swiper-button-prev, .is-history .swiper-button-prev { left: calc(30px - 0.88889rem); margin-left: 0; } } @media (max-width: 460px) { .is-carousel .swiper-button-prev, .is-history .swiper-button-prev { left: 10px; } } .is-carousel .swiper-button-next, .is-history .swiper-button-next { left: auto !important; right: calc((100% - 1220px) / 2 - 0.88889rem); margin-right: -5px; } @media (max-width: 1280px) { .is-carousel .swiper-button-next, .is-history .swiper-button-next { left: calc(10px - 0.88889rem); margin-right: 0; } } @media (max-width: 460px) { .is-carousel .swiper-button-next, .is-history .swiper-button-next { right: 10px; } } .c-snsLinks { align-items: center; display: flex; justify-content: flex-start; } .c-mailSubscription + .c-snsLinks { margin-top: 2.4375rem; } @media (min-width: 1281px) { .c-mailSubscription + .c-snsLinks { margin-top: 2.6875rem; } } .c-snsLinks label { font-family: "courier-prime", sans-serif; font-size: 0.88889rem; padding-right: 1.5rem; } .c-snsLinks ul { align-items: center; display: flex; justify-content: flex-start; margin: 0; padding: 0; } .c-snsLinks li { line-height: 1; list-style: none; } .c-snsLinks li:not(:last-child) { margin-right: 0.75rem; } .c-snsLinks a { display: inline-block; } .c-snsLinks a:focus-visible { outline: 2px dashed var(--theme-sub-color); } @media (hover: hover) { .c-snsLinks a:hover .icon { fill: #000000; } } .c-snsLinks .icon { fill: #FFFFFF; } .c-snsLinks .icon-facebook { height: 1.33rem; width: 1.33rem; } .c-snsLinks .icon-twitter { height: 1.22rem; width: 1.5rem; } .c-snsLinks .icon-vimeo { height: 1.22rem; width: 1.5rem; } .c-snsLinks .icon-youtube { height: 1.22rem; width: 1.72rem; } .c-textLink { border-bottom: 1px solid; padding-bottom: 0.2em; } .c-textLink:focus-visible { outline: 2px dashed var(--theme-sub-color); } @media (hover: hover) { .c-textLink:hover { border-color: transparent; } } .c-textLink[target="_blank"]:after { content: ''; display: inline-block; height: 0.8em; margin-left: 0.3em; width: 0.8em; background-color: var(--theme-key-color); -webkit-mask-image: url("/assets/images/svg/blank_window.svg"); mask-image: url("/assets/images/svg/blank_window.svg"); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: cover; mask-size: cover; } .c-verticalPanel { background-color: #FFFFFF; display: flex; flex-direction: column; position: relative; } .c-verticalPanel:focus-visible { outline: 2px dashed var(--theme-sub-color); } @media (hover: hover) { .c-verticalPanel:hover .c-verticalPanel__title { color: var(--theme-key-color); } .c-verticalPanel:hover .c-verticalPanel__image img { opacity: 0.5; } } @media (max-width: 460px) { .c-verticalPanel + .c-verticalPanel { margin-top: 1.555rem; } } .c-verticalPanel__label { align-items: flex-start; display: flex; justify-content: flex-start; left: 0; position: absolute; top: 0; z-index: 1; } .c-verticalPanel__label .c-label:first-child { max-width: 15em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 460px) { .c-verticalPanel__label .c-label:first-child { max-width: 10em; } } .c-verticalPanel__image { background-color: var(--theme-key-color); margin: 0; overflow: hidden; padding-bottom: 67.5%; position: relative; } [data-image-height="low"] .c-verticalPanel__image { padding-bottom: 46.79%; } .c-verticalPanel__image > img { height: 100%; left: 0; -o-object-fit: cover; font-family: "object-fit:cover"; object-fit: cover; position: absolute; top: 0; width: 100%; } .c-verticalPanel__content { flex-grow: 1; min-height: 9.5rem; padding: 0.88889rem; position: relative; } .c-verticalPanel__eventDate { color: var(--theme-sub-color); font-family: "courier-prime", "fot-tsukuardgothic-std", sans-serif; font-size: 0.79012rem; font-weight: bold; } .c-verticalPanel__title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 1rem; font-weight: bold; } @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { .c-verticalPanel__title { background: #fff; height: 3em; padding-right: 1em; position: relative; } .c-verticalPanel__title:before { content: "..."; position: absolute; right: 0; bottom: 0; display: inline-block; width: 1em; } .c-verticalPanel__title:after { content: ""; position: relative; right: -1em; float: right; width: 1em; height: 100%; background-color: inherit; } } .c-verticalPanel__excerpt { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 0.79012rem; margin-top: 0.79012rem; } @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { .c-verticalPanel__excerpt { background: #fff; height: 3em; padding-right: 1em; position: relative; } .c-verticalPanel__excerpt:before { content: "..."; position: absolute; right: 0; bottom: 0; display: inline-block; width: 1em; } .c-verticalPanel__excerpt:after { content: ""; position: relative; right: -1em; float: right; width: 1em; height: 100%; background-color: inherit; } } [data-excerpt-line="6"] .c-verticalPanel__excerpt { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 6; } @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { [data-excerpt-line="6"] .c-verticalPanel__excerpt { background: #fff; height: 7em; padding-right: 1em; position: relative; } [data-excerpt-line="6"] .c-verticalPanel__excerpt:before { content: "..."; position: absolute; right: 0; bottom: 0; display: inline-block; width: 1em; } [data-excerpt-line="6"] .c-verticalPanel__excerpt:after { content: ""; position: relative; right: -1em; float: right; width: 1em; height: 100%; background-color: inherit; } } .c-verticalPanel__categories { bottom: 0.88889rem; font-family: "courier-prime", "fot-tsukuardgothic-std", sans-serif; font-size: 0.79012rem; font-weight: bold; left: 0.88889rem; position: absolute; width: calc(50% - 0.88889rem); word-break: keep-all; } @media (max-width: 460px) { .c-verticalPanel__categories span:not(:first-child) { display: none; } } .c-verticalPanel__date { bottom: 0.88889rem; font-family: "courier-prime", sans-serif; font-size: 0.79012rem; position: absolute; right: 0.88889rem; text-align: right; width: calc(50% - 0.88889rem); } .c-editorArea .wp-block-audio { margin: 0; } .c-editorArea .wp-block-audio:not(:first-child) { margin-top: 3.6317em; } .c-editorArea .wp-block-audio + .wp-block-audio { margin-top: 1.81585em; } .c-editorArea .wp-block-audio figcaption { font-size: 0.79012em; line-height: 1.24; margin-bottom: 0; margin-top: 0.5em; text-align: center; } .c-editorArea { font-size: 1rem; } .c-editorArea.is-small { font-size: 0.79012rem; } .c-editorArea .wp-block-buttons { margin-bottom: -0.88889em; } .c-editorArea .wp-block-buttons .has-black-color { color: #000000; } .c-editorArea .wp-block-buttons .has-black-background-color { background-color: #000000; } .c-editorArea .wp-block-buttons .has-white-color { color: #FFFFFF; } .c-editorArea .wp-block-buttons .has-white-background-color { background-color: #FFFFFF; } .c-editorArea .wp-block-buttons .has-gray-color { color: #BDBEBF; } .c-editorArea .wp-block-buttons .has-gray-background-color { background-color: #BDBEBF; } .c-editorArea .wp-block-buttons:not(:first-child) { margin-top: 3.6317em; } .c-editorArea .wp-block-buttons .wp-block-button { display: inline-block; margin-right: 0.44444em; margin-bottom: 0.88889em; } .c-editorArea .wp-block-button__link { border: none; border-radius: 1em; box-shadow: none; cursor: pointer; display: inline-block; font-size: 1em; padding: 0.5rem 1em; text-align: center; text-decoration: none; overflow-wrap: break-word; } .c-editorArea .wp-block-button.is-style-outline .wp-block-button__link, .c-editorArea .wp-block-button__link.is-style-outline { border: 1px solid; } .c-editorArea .wp-block-columns { margin-bottom: 0; } .c-editorArea .wp-block-columns:not(:first-child) { margin-top: 3.6317em; } .c-editorArea h1 + .wp-block-columns, .c-editorArea h2 + .wp-block-columns, .c-editorArea h3 + .wp-block-columns, .c-editorArea h4 + .wp-block-columns, .c-editorArea h5 + .wp-block-columns, .c-editorArea h6 + .wp-block-columns { margin-top: 1.81585em !important; } .c-editorArea .wp-block-column { flex-grow: 1; min-width: 0; word-break: break-word; overflow-wrap: break-word; } @media (max-width: 599px) { .c-editorArea .wp-block-column:not(:first-child) { margin-top: 1.81585em; } } .c-editorArea .wp-block-column .wp-block-gallery:not(:first-child) { margin-top: 1.81585em; } .c-editorArea .wp-block-column .wp-block-gallery:not(:last-child) { margin-bottom: calc(3.6317em - 1rem); } .c-editorArea .wp-block-embed { margin-bottom: 0; margin-left: auto; margin-right: auto; } .c-editorArea .wp-block-embed.is-type-video { max-width: 720px; } .c-editorArea .wp-block-embed:not(:first-child) { margin-top: 3.6317em; } .c-editorArea .wp-block-embed + .wp-block-embed { margin-top: 1.81585em; } .c-editorArea .wp-block-embed figcaption { font-size: 0.79012em; line-height: 1.24; margin-bottom: 0; margin-top: 0.5em; } .c-editorArea .wp-block-file { align-items: center; background-color: #FFFFFF; display: flex; justify-content: center; margin: 0; padding: 1em; } @media (max-width: 460px) { .c-editorArea .wp-block-file { flex-direction: column; } } .c-editorArea .wp-block-file:not(:first-child) { margin-top: 3.6317em; } .c-editorArea .wp-block-file + .wp-block-file { margin-top: 1.81585em; } .c-editorArea .wp-block-file > a:first-child { font-weight: bold; word-break: break-word; } .c-editorArea .wp-block-file > a:first-child:hover { color: var(--theme-key-color); } .c-editorArea .wp-block-file .wp-block-file__button { background: var(--theme-key-color); border: 1px solid var(--theme-key-color); border-radius: 2em; color: #FFFFFF; font-size: 0.88889em; font-weight: bold; padding: 0.44444em 0.88889em; white-space: nowrap; } .c-editorArea .wp-block-file * + .wp-block-file__button { margin-left: 1em; } @media (max-width: 460px) { .c-editorArea .wp-block-file * + .wp-block-file__button { margin-left: 0 !important; margin-top: 1em; } } .c-editorArea .wp-block-file a.wp-block-file__button:active, .c-editorArea .wp-block-file a.wp-block-file__button:focus, .c-editorArea .wp-block-file a.wp-block-file__button:hover, .c-editorArea .wp-block-file a.wp-block-file__button:visited { background-color: #FFFFFF; box-shadow: none; color: var(--theme-key-color); opacity: 1; text-decoration: none; } @media (max-width: 768px) { .c-editorArea .wp-block-file * + .wp-block-file__button { margin-left: 1em; } } .wp-block-gallery { display: flex; flex-wrap: wrap; list-style-type: none; padding: 0; margin: 0; } .wp-block-gallery:not(:first-child) { margin-top: 3.6317em; } .wp-block-gallery:not(:last-child) { margin-bottom: 2.6317em; } .blocks-gallery-grid, .wp-block-gallery { width: 100%; } .blocks-gallery-grid { margin-bottom: -1em; padding-left: 0; } .blocks-gallery-grid .blocks-gallery-image, .blocks-gallery-grid .blocks-gallery-item, .wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item { margin: 0 1em 1em 0; display: flex; flex-grow: 1; flex-direction: column; justify-content: center; position: relative; width: calc(50% - 1em); } .blocks-gallery-grid .blocks-gallery-item figure { flex-direction: column; } .blocks-gallery-grid .blocks-gallery-image img, .blocks-gallery-grid .blocks-gallery-item img, .wp-block-gallery .blocks-gallery-image img, .wp-block-gallery .blocks-gallery-item img { width: 100%; } .blocks-gallery-grid .blocks-gallery-image figcaption, .blocks-gallery-grid .blocks-gallery-item figcaption, .wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption { background: none; color: rgba(0, 0, 0, 0.5); font-size: 0.70233em; font-weight: bold; margin-top: 0.5em; padding: 0; position: static; text-align: center; width: 100%; } @media (max-width: 460px) { .blocks-gallery-grid .blocks-gallery-image figcaption, .blocks-gallery-grid .blocks-gallery-item figcaption, .wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption { text-align: left; } } .blocks-gallery-grid > figcaption, .wp-block-gallery > figcaption { font-size: 0.79012em; margin-top: 0.5em; width: 100%; } .c-editorArea .wp-block-group { margin: 0; } .c-editorArea .wp-block-group:not(:first-child) { margin-top: 3.6317em; } .c-editorArea .wp-block-column .has-extra-large-font-size, .c-editorArea .wp-block-column .has-large-font-size, .c-editorArea .wp-block-column .has-medium-font-size, .c-editorArea .wp-block-column .has-regular-font-size, .c-editorArea .wp-block-column .has-small-font-size { line-height: 1.6; } .c-editorArea .wp-block-column .has-extra-large-font-size:not(:first-child), .c-editorArea .wp-block-column .has-large-font-size:not(:first-child), .c-editorArea .wp-block-column .has-medium-font-size:not(:first-child), .c-editorArea .wp-block-column .has-regular-font-size:not(:first-child), .c-editorArea .wp-block-column .has-small-font-size:not(:first-child) { margin-top: 1.4884em; } .c-editorArea .has-extra-large-font-size { font-size: 2.33333em; } .c-editorArea .has-large-font-size { font-size: 1.4884em; } .c-editorArea .has-medium-font-size { font-size: 1.22em; } .c-editorArea .has-regular-font-size { font-size: 1em; } .c-editorArea .has-small-font-size { font-size: 1em; } .c-editorArea h1, .c-editorArea h2, .c-editorArea h3, .c-editorArea h4, .c-editorArea h5, .c-editorArea h6 { font-weight: inherit; } .c-editorArea h1:not(:first-child), .c-editorArea h2:not(:first-child), .c-editorArea h3:not(:first-child), .c-editorArea h4:not(:first-child), .c-editorArea h5:not(:first-child), .c-editorArea h6:not(:first-child) { margin-top: 3.6317em; } .c-editorArea .wp-block-image { margin: 0; margin-bottom: 1em; text-align: center; } .c-editorArea .wp-block-column .wp-block-image { margin-top: 0; } .c-editorArea .wp-block-image:not(:first-child) { margin-top: 3.6317em; } .c-editorArea .wp-block-image + .wp-block-image { margin-top: 1.81585em; } .c-editorArea .wp-block-image img { height: auto; max-width: 100%; } .c-editorArea .wp-block-image figcaption { font-size: 0.79012em; line-height: 1.24; margin-bottom: 0; margin-top: 0.5em; text-align: left; } .c-editorArea .c-editorCaption { margin: 0 0 1em; max-width: 100%; } .c-editorArea .c-editorCaption img { display: block; height: auto; width: 100%; } @media (max-width: 460px) { .c-editorArea .c-editorCaption { float: none !important; margin-right: 0 !important; margin-left: 0 !important; width: 100% !important; } } .c-editorArea .c-editorCaption__text { font-size: 0.79012em; line-height: 1.24; margin-top: 0.5em; } .c-editorArea > ul:not(:first-child), .c-editorArea > ol:not(:first-child) { margin-top: 1.81585em; } .c-editorArea > ul:not(:last-child), .c-editorArea > ol:not(:last-child) { margin-bottom: 1.81585em; } .wp-block-column .c-editorArea > ul:not(:first-child), .wp-block-column .c-editorArea > ol:not(:first-child) { margin-top: 0.90792em; } .wp-block-column .c-editorArea > ul:not(:last-child), .wp-block-column .c-editorArea > ol:not(:last-child) { margin-bottom: 0.90792em; } .c-editorArea > ul li:not(:first-child), .c-editorArea > ol li:not(:first-child) { margin-top: 0.2em; } .c-editorArea li > ul:first-child, .c-editorArea li > ol:first-child { margin-top: 0; } .c-editorArea > ul { padding-left: 1.5em; } .c-editorArea > ul li { list-style: disc; } .c-editorArea > ol { padding-left: 1.5m; } .c-editorArea > ol li { list-style: decimal; } .c-editorArea .wp-block-media-text { background-color: #FFFFFF; padding: 1.666em; } @media (max-width: 460px) { .c-editorArea .wp-block-media-text { padding: 1.111em; } } .c-editorArea .wp-block-media-text:not(:first-child) { margin-top: 3.6317em; } .c-editorArea .wp-block-media-text .wp-block-media-text__media { margin: 0; } @media (max-width: 460px) { .c-editorArea .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__media { margin-top: 1.111em; } } .c-editorArea .wp-block-media-text .wp-block-media-text__media a { display: block; } .c-editorArea .wp-block-media-text .wp-block-media-text__media img { max-height: 500px; -o-object-fit: contain; font-family: "object-fit:contain"; object-fit: contain; } .c-editorArea .wp-block-media-text.is-image-fill .wp-block-media-text__media img { opacity: 0; pointer-events: none; visibility: hidden; } .c-editorArea .wp-block-media-text:not(.has-media-on-the-right) .wp-block-media-text__content { padding-right: 0; } @media (max-width: 460px) { .c-editorArea .wp-block-media-text:not(.has-media-on-the-right) .wp-block-media-text__content { padding-left: 0; } } .c-editorArea .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { padding-left: 0; } @media (max-width: 460px) { .c-editorArea .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { padding-right: 0; } } @media (max-width: 460px) { .c-editorArea .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media + .wp-block-media-text__content { margin-top: 1.111em; } } .c-editorArea > p { font-size: 1em; line-height: 1.6; margin-top: 2em; } .c-editorArea p.has-large-font-size { font-size: 1.4884em; } .c-editorArea p.has-medium-font-size { font-size: 1.22em; } .c-editorArea p.has-regular-font-size { font-size: 1em; } .c-editorArea p.has-small-font-size { font-size: 0.88889em; } .c-editorArea > p + p { margin-top: 1em; } .c-editorArea .wp-block-columns p:not(:first-child) { margin-top: 1em; } .c-editorArea .has-extra-large-font-size + p { margin-top: 1.4884em; } .c-editorArea .has-large-font-size + p { margin-top: 1.4884em; } .c-editorArea .has-medium-font-size + p { margin-top: 1.22em; } .c-editorArea .has-regular-font-size + p { margin-top: 1em; } .c-editorArea .has-small-font-size + p { margin-top: 1em; } .c-editorArea p a { border-bottom: 1px solid; padding-bottom: 1px; } .c-editorArea p a:focus-visible { outline: 2px dashed var(--theme-sub-color); } @media (hover: hover) { .c-editorArea p a:hover { border-bottom: 1px solid transparent; color: var(--theme-key-color); } } .c-editorArea .has-drop-cap:not(:focus):first-letter { font-size: 3em; margin: .15em .1em 0 0; } .c-editorArea .wp-block-pullquote { padding: 0; } @media (max-width: 768px) { .c-editorArea .wp-block-pullquote { padding: 0 1em; } } .c-editorArea .wp-block-pullquote:not(:first-child) { margin-top: 3.6317em; } .c-editorArea .wp-block-pullquote:not(:last-child) { margin-bottom: 3.6317em; } .c-editorArea .wp-block-pullquote > blockquote { display: inline-block; margin: 0; position: relative; } .c-editorArea .wp-block-pullquote > blockquote:before { background-image: url("/assets/images/svg/quotation.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; content: ''; display: inline-block; height: 0.70233em; left: -1.2em; position: absolute; top: 0; width: 0.88889em; } .c-editorArea .wp-block-pullquote > blockquote:after { background-image: url("/assets/images/svg/quotation.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; content: ''; display: inline-block; height: 0.70233em; position: absolute; right: -1.2em; top: 0; transform: scale(-1, 1); width: 0.88889em; } .c-editorArea .wp-block-pullquote > blockquote > p { font-size: 1.22em; font-weight: bold; line-height: 1.6; } .c-editorArea .wp-block-pullquote > blockquote > p + p { margin-top: 0.5em; } .c-editorArea .wp-block-pullquote > blockquote > cite { display: block; font-size: 0.79012em; font-style: normal; margin-top: 1em; } .c-editorArea .wp-block-quote { border-left: 2px solid rgba(0, 0, 0, 0.5); margin: 0; padding-left: 1em; } .c-editorArea .wp-block-quote:not(:first-child) { margin-top: 3.6317em; } .c-editorArea .wp-block-quote:not(:last-child) { margin-bottom: 3.6317em; } .c-editorArea .wp-block-quote p { font-weight: bold; } .c-editorArea .wp-block-quote p + p { margin-top: 0.5em; } .c-editorArea .wp-block-quote cite { display: block; font-size: 0.70233em; font-style: normal; margin-top: 0.555rem; } .c-editorArea .wp-block-separator { background-color: #000000; border-radius: 0; height: 1px; margin: 3.6317em auto; width: 100%; } .c-editorArea .wp-block-separator.is-style-dots { border-radius: 0; height: auto; max-width: none; width: 100%; } .c-editorArea .wp-block-table { margin-left: auto; margin-right: auto; overflow: hidden; } @media (max-width: 460px) { .c-editorArea .wp-block-table { overflow: auto; -webkit-overflow-scrolling: touch; } } .c-editorArea .wp-block-table:not(:first-child) { margin-top: 3.6317em; } .c-editorArea .wp-block-table:not(:last-child) { margin-bottom: 3.6317em; } .c-editorArea .wp-block-table table { border-collapse: collapse; font-size: 0.88889em; margin: 0 -0.625em; } @media (max-width: 460px) { .c-editorArea .wp-block-table table { width: auto; } } .c-editorArea .wp-block-table thead th { word-break: keep-all; } .c-editorArea .wp-block-table thead th:before { content: none; } .c-editorArea .wp-block-table td, .c-editorArea .wp-block-table th { font-weight: inherit; padding: 0.5em 0.625em; position: relative; vertical-align: top; } @media (max-width: 460px) { .c-editorArea .wp-block-table td, .c-editorArea .wp-block-table th { white-space: nowrap; } } .c-editorArea .wp-block-table td:before, .c-editorArea .wp-block-table th:before { background-color: rgba(0, 0, 0, 0.5); content: ''; display: block; height: 1px; left: 0.625em; position: absolute; top: 0; width: calc(100% - 1.25em); } .c-editorArea .wp-block-table > figcaption { font-size: 0.79012em; } @media (max-width: 460px) { .c-editorArea .wp-block-table > figcaption { white-space: nowrap; } } .c-editorArea .wp-block-video { margin-left: auto; margin-right: auto; max-width: 1920px; width: 100%; } .c-editorArea .wp-block-video:not(:first-child) { margin-top: 3.6317em; } .c-editorArea .wp-block-video:not(:last-child) { margin-bottom: 3.6317em; } .c-editorArea .wp-block-video + .wp-block-video { margin-top: 1.81585em; } .c-editorArea .wp-block-video video { max-width: 100%; } .c-editorArea .wp-block-video figcaption { font-size: 0.88889em; margin-top: 0.44444em; margin-bottom: 0; }