@charset "utf-8"; *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg*, symbol*)) { all: unset; display: revert } *, *::before, *::after { box-sizing: border-box } html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none } a, button { cursor: revert } div, p, ol:not(.wp-block-list), ul:not(.wp-block-list), menu, summary { list-style: none; padding: 0; margin: 0; } img { max-inline-size: 100%; max-block-size: 100% } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; padding: 0; margin: 0; margin-block-start: 0; margin-block-end: 0; } body { margin: 0; padding: 0; } table { border-collapse: collapse } input, textarea { -webkit-user-select: auto; user-select: auto; } textarea { white-space: revert } meter { -webkit-appearance: revert; appearance: revert } :where(pre) { all: revert; box-sizing: border-box } ::placeholder { color: unset } :where([hidden]) { display: none } :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; line-break:auto; -webkit-user-select: auto; user-select: auto; } :where([draggable="true"]) { -webkit-user-drag: element } :where(dialog:modal) { all: revert; box-sizing: border-box }:root { --color-primary: #A9894B; --color-on-primary: #fff; --color-secondary: #E8D8AB; --color-on-secondary: #fff; --color-tertiary: #ABB8C3; --color-on-tertiary: #000; --color-background: #fff; --color-on-background: #000; --color-link: #000; --max-width_pc: 1300px; --max-width_pc_middle: 1000px; --max-width_pc_content: 700px; --font-family-primary: 'Noto Sans JP', sans-serif; --space-xxs: 0.25rem; --space-xs: 0.5rem; --space-s: 1rem; --space-m: 2rem; --space-l: 3rem; --space-xl: 4rem; --font-size-xxs: 0.5rem; --font-size-xs: 0.70rem; --font-size-s: 0.75rem; --font-size-m: 1rem; --font-size-ml: 1.4rem; --font-size-l: 1.6rem; --font-size-xl: 2rem; --font-size-xxl: 3rem; --border-radius-s: 10px; --border-radius: 40px; --letter-spacing-s: 0.05em; --letter-spacing-m: 0.15em; --letter-spacing-l: 0.2em; --letter-spacing-xl: 0.25em; --line-height-s: 1.2; --line-height-m: 1.6; --line-height-l: 2; --font-weight-normal: 400; --font-weight-bold: 700; --font-weight-black: 900; --box-shadow-card: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; --box-shadow-content: rgba(0, 0, 0, 0.16) 0px 1px 4px; --white-stripe: linear-gradient(0deg, #0000, #0000 16.67%, #ffffffb3 0, #ffffffb3 33.33%, #0000 0, #0000 50%, #ffffff66 0, #ffffff66 66.67%, #0000 0, #0000 83.33%, #ffffff26 0), #ffffff26 100%; } @font-face { font-family: 'Noto Sans JP'; src: url('../../fonts/Noto_Sans_JP/NotoSansJP-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } html { font-size: min(16px, 4vw); } html, body { scrollbar-width: none; -ms-overflow-style: none; overflow-y: scroll; } html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; } body { font-family: var(--font-family-primary); font-size: var(--font-size-m); line-height: 1.7; letter-spacing: var(--letter-spacing-m); color: var(--color-on-background); background-color: var(--color-background); } body.modal-open { overflow: hidden; } p { padding-bottom: var(--space-s); } h2 { font-size: var(--font-size-xl); padding: var(--space-s) 0; font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-l); text-decoration: underline; text-underline-offset: 0.2em; } @media screen and (min-width: 768px) { h2 { font-size: var(--font-size-xxl); } } h3 { font-size: var(--font-size-l); padding: var(--space-s) 0; font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-l); } h4 { font-size: var(--font-size-m); padding: var(--space-s) 0; font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-l); } h5 { font-size: var(--font-size-m); padding: var(--space-s) 0; font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-l); } h6 { font-size: var(--font-size-m); padding: var(--space-s) 0; font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-l); } a { color: var(--color-link); transition: opacity 0.5s ease; cursor: pointer; } a:hover { opacity: 0.8; } a:active { opacity: 0.6; } a:visited { opacity: 0.6; } @media screen and (max-width: 768px) { .fixed-sns-icons { display: none; } } .sns-icons a { display: block; line-height: 1; } .sns-icons .youtube svg { width: 22px; height: 22px; } .fixed-sns-icons .sns-icons { position: fixed; bottom: 50%; transform: translateY(50%); left: 0; z-index: 1000; } .mobile-sns-icons .sns-icons { position: relative; } .sns-icons ul { padding: var(--space-s); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-s); } .fixed-sns-icons .sns-icons ul { flex-direction: column; } .mobile-sns-icons .sns-icons ul { flex-direction: row; width: 100%; } .mobile-sns-icons-title { text-align: center; font-size: var(--font-size-m); font-weight: var(--font-weight-bold); color: var(--color-on-background); padding: var(--space-m) 0 0 0; } .sns-icons ul li { width: 40px; height: 40px; background: var(--color-on-background); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); border: 1px solid var(--color-on-primary); } .sns-icons ul li svg { width: 24px; height: 24px; } header { position: fixed; width: 100%; z-index: 1000; } .header-container { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--space-m); max-width: var(--max-width_pc); margin: 0 auto; gap: var(--space-xs); } .header-logo-color { fill: #A5864A; } .header-logo { width: min(300px, 70vw); } .header-logo a { text-decoration: none; color: var(--color-on-background); } .header-logo img { width: 100%; } .header-text { font-size: var(--font-size-xxs); font-weight: var(--font-weight-bold); color: var(--color-on-background); } @media screen and (min-width: 768px) { .header-logo { width: min(300px, 60vw); } .header-text { font-size: var(--font-size-s); } } .interview-items { width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; gap: var(--space-xl); } .interview-items li a { text-decoration: none; } .interview-items li { width: 100%; } .interview-item-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--border-radius) var(--border-radius) 0 0; overflow: hidden; } .interview-item-thumb img { width: 100%; height: 100%; object-fit: cover; } .interview-item-title { font-weight: var(--font-weight-bold); box-shadow: var(--box-shadow-content); border-radius: 0 0 var(--border-radius) var(--border-radius); padding: var(--space-xs) var(--space-s) var(--space-s) var(--space-m); display: flex; flex-direction: row; align-items: center; justify-content: space-between; background: var(--color-background); color: var(--color-on-background); } .interview-item-title-text { font-size: var(--font-size-s); } .interview-item-title-icon { font-size: var(--font-size-s); background: var(--color-on-background); color: var(--color-background); background: var(--color-background); color: var(--color-on-background); border: 1px solid var(--color-on-background); padding: var(--space-xs); border-radius: 50%; width: 1.6rem; height: 1.6rem; display: flex; align-items: center; justify-content: center; margin: 0; line-height: 1; letter-spacing: 0; transition: all 0.3s ease; } .interview-items li:hover .interview-item-title-icon { background: var(--color-on-background); color: var(--color-background); border: 1px solid var(--color-background); } @media screen and (min-width: 768px) { .interview-section h2 { font-size: var(--font-size-xxl); } .interview-items { width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; gap: var(--space-s); } .interview-items li { padding: var(--space-xs); width: calc((100% - var(--space-s)) / 2); } } @media screen and (min-width: 1000px) { .interview-items { gap: var(--space-m); } .interview-items li { width: calc((100% - 2 * var(--space-m)) / 3); } } .lead-form-wrapper, .misasaru-wrapper { position: fixed; inset: 0; z-index: 9000; } .lead-form-overlay, .misasaru-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .lead-form, .misasaru { position: absolute; top: 50%; left: 50%; transform-origin: center center; transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; transition: none; background: var(--color-background); border-radius: var(--border-radius); padding: var(--space-m) var(--space-s) var(--space-s) var(--space-s); width: 90vw; max-width: var(--max-width_pc_middle); height: auto; max-height: 90vh; max-height: calc(var(--vh, 1vh) * 90); overflow-y: auto; -webkit-overflow-scrolling: touch; } .lead-form-wrapper.is-visible .lead-form-overlay, .misasaru-wrapper.is-visible .misasaru-overlay { opacity: 1; pointer-events: auto; } .lead-form-wrapper.is-visible .lead-form, .misasaru-wrapper.is-visible .misasaru { pointer-events: auto; } .lead-form-img { display: none; width: 100%; padding: var(--space-s); } .lead-form-img img { width: 100%; height: 100%; object-fit: cover; } .lead-form-detail { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-s); padding: var(--space-m) var(--space-s); width: 100%; aspect-ratio: 16/9; border-radius: 10px; box-shadow: var(--box-shadow-content); } .lead-form-detail-title { font-size: var(--font-size-m); font-weight: var(--font-weight-bold); text-align: center; } .lead-form-detail-title .attention { color: var(--color-primary); } .lead-form-detail-title .attention.big { font-size: var(--font-size-l); } .lead-form-detail-list-title { font-size: var(--font-size-m); font-weight: var(--font-weight-bold); color: var(--color-primary); padding: var(--space-s) 0 var(--space-xs) var(--space-s); } ul.lead-form-detail-list { padding: 0 0 var(--space-s) var(--space-m) !important; font-weight: var(--font-weight-bold); font-size: var(--font-size-m); } .lead-form-detail-list li { list-style: disc; } .lead-form-close, .misasaru-close { position: absolute; top: 1rem; right: 1rem; border-radius: 50%; width: 1.6rem; height: 1.6rem; border: 1px solid var(--color-tertiary); padding: 0.5rem; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); background: var(--color-on-background); color: var(--color-background); line-height: 1; margin: 0; letter-spacing: 0; cursor: pointer; } @media screen and (min-width: 768px) { .lead-form, .misasaru { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: var(--space-s); } .lead-form-header { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--space-s); flex: 1; } .lead-form-content { flex: 1; } .lead-form-img { display: block; border-radius: var(--border-radius); overflow: hidden; } } .misasaru-btn { cursor: pointer; } .misasaru { overflow: visible; width: 340px; max-width: 95%; height: 350px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; } .misasaru-container { position: relative; width: 100%; overflow: visible; } .misasaru-img { position: absolute; bottom: calc(50% - 200px); right: calc(50% - 160px); width: 70px; height: auto; transform: rotate(10deg); z-index: 9999; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; } .misasaru-img img { width: 100%; height: 100%; object-fit: cover; } .misasaru-text { font-size: var(--font-size-m); font-weight: var(--font-weight-bold); color: var(--color-on-background); } .misasaru-text span { font-size: var(--font-size-l); font-weight: var(--font-weight-bold); color: var(--color-primary); display: block; padding-bottom: var(--space-s); } footer { position: relative; z-index: 900; } .front-page-footer-container { display: flex; flex-direction: row; justify-content: space-around; align-items: center; width: 100%; background: var(--color-background); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); gap: var(--space-s); padding: var(--space-xs); } .front-page-footer-container a { text-decoration: underline; font-size: var(--font-size-xs); } .front-page-footer-container .footer-copyright { padding: 0; } @media screen and (min-width: 1025px) { .front-page-footer-container { justify-content: flex-end; } } .footer-container { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; background: var(--color-primary); color: var(--color-on-primary); font-size: var(--font-size-s); font-weight: var(--font-weight-bold); gap: var(--space-m); padding: var(--space-m) var(--space-s); } .footer-container .header-logo-color { fill: var(--color-on-primary); } .footer-container a { color: var(--color-on-primary); text-decoration: none; } .footer-container .footer-description { max-width: 500px; margin: 0 auto; } .footer-container .footer-description p { padding: 0; margin: 0; } .footer-container-inner { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; gap: var(--space-xs); flex-wrap: wrap; } .footer-container-inner .application::before, .footer-container-inner .company::before, .footer-container-inner .privacy::before { content: "|"; padding-right: var(--space-xs); } .footer-container .footer-copyright { font-size: var(--font-size-xs); text-align: right; width: 100%; } @media screen and (min-width: 768px) { .footer-sns-icons { display: none; } } .footer-container .footer-sns-icons svg polygon, .footer-container .footer-sns-icons svg path { fill: #000 !important; } .footer-container .sns-icons ul { padding: 0; } .footer-container .footer-sns-icons ul li { width: 32px; height: 32px; background: var(--color-on-primary); } .simple-btn { margin: 2rem auto 0 auto; padding: 0.5rem 1.5rem; background-color: var(--color-primary); color: var(--color-on-primary); font-weight: 700; max-width: 250px; } .simple-btn a { color: var(--color-on-primary); text-decoration: none; font-size: 1rem; } .simple-btn:hover { opacity: 0.8; } .simple-btn:active { opacity: 0.6; } .simple-btn:visited { opacity: 0.6; } .articles-list { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .articles-list a { text-decoration: none; color: var(--color-text); } .article-list-item { display: flex; flex-direction: column; justify-content: center; padding: 0 0 2rem 0; } .article-list-thumbnail { aspect-ratio: 16/9; width: 100%; padding: 0 0.5rem; } .article-list-thumbnail a img { aspect-ratio: 16/9; object-fit: cover; width: 100%; height: 100%; border: 1px solid var(--color-tertiary); } .article-list-title { font-size: 1.1rem; font-weight: 700; padding: 0.5rem 1rem; } .article-list-meta-container { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; padding-right: 1rem; } .article-list-meta-container .article-list-category { border: 1px solid var(--color-tertiary); padding: 0 0.5rem; font-size: 0.8rem; } .article-list-meta-container .article-list-date { padding-left: 1rem; font-size: 0.9rem; } .article-author-container { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; padding: 0.5rem 1rem 0 0; } .article-author-container .author-avatar { aspect-ratio: 1/1; height: 1.4rem; } .article-author-container .author-avatar img { object-fit: cover; width: 100%; height: 100%; border-radius: 50%; } .article-author-container .author-name { padding: 0 0 0 0.5rem; font-size: 1.1rem; letter-spacing: 0.1rem; } @media screen and (min-width: 768px) and (max-width: 1024px) { .articles-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; padding: 1rem 1rem 2rem 1rem; } .article-list-item { padding: 0 0 1rem 0; } .article-list-thumbnail { padding: 0; } } @media screen and (min-width: 1025px) { .articles-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 1rem; max-width: 1200px; margin: 0 auto; } .article-list-item { padding: 0 0 1rem 0; } .article-list-thumbnail { padding: 0; } .article-list-title { font-size: 1rem; font-weight: 700; padding: 0.5rem 0; } .article-list-meta-container .article-list-category { font-size: 0.6rem; } .article-list-meta-container .article-list-date { padding-left: 0.5rem; font-size: 0.7rem; } .article-author-container .author-name { font-size: 0.8rem; } } .pagination { display: flex; padding: 0; margin: 0 auto 1rem auto; justify-content: center; align-items: center; } .page-numbers { display: inline-block; padding: 0.3rem 0.6rem; margin: 0 0.2rem; font-size: 1rem; color: var(--color-text); text-decoration: none; transition: background-color 0.3s; } .page-numbers:hover { background-color: var(--color-secondary); } .page-numbers.current { background-color: var(--color-primary); color: var(--color-on-primary); font-weight: bold; } .page-numbers.dots { color: var(--color-text); } .page-numbers.dots:hover { background-color: inherit; } .next.page-numbers, .prev.page-numbers { background-color: none; color: var(--color-text); padding: 0; font-size: 0.9rem; padding: 0 0.2rem; } .next.page-numbers:hover, .prev.page-numbers:hover { background-color: inherit; } .sns-list-share { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 0.5rem; font-size: 1.8rem; } .sns-list-share li a { text-decoration: none; color: var(--color-text); } .breadcrumbs-container { font-size: var(--font-size-s); font-weight: var(--font-weight-bold); } .breadcrumbs { padding: 1rem 0.7rem; } .breadcrumbs::-webkit-scrollbar { display: none; } .breadcrumbs a, .breadcrumbs .current { color: var(--color-text); padding: 0 0.5rem; } @media screen and (min-width: 768px) { .breadcrumbs-container { max-width: var(--max-width_pc_content); margin: 0 auto; } } .searchform div { display: flex; width: 100%; margin-bottom: 1.5rem; } .searchform input[type="text"] { border: 1px solid var(--color-tertiary); padding: 0.5rem; letter-spacing: 0.05rem; height: 2.5rem; flex: 0 1 80%; } .searchform input[type="submit"] { font-size: 1rem; border: none; background-color: var(--color-primary); color: var(--color-on-primary); padding: 0.5rem; letter-spacing: 0.05rem; height: 2.5rem; flex: 0 1 20%; } .widget_title { font-size: 1rem; font-weight: 700; padding: 0 0 0.5rem 0; } .widget_categories ul, .widget_archive ul, .widget_pages ul { list-style-type: none; margin: 0; padding: 0; } .widget_categories .cat-item:not(.children .cat-item), .widget_archive li, .widget_pages li { margin-bottom: 0.5rem; } .widget_categories .cat-item:not(.children .cat-item)::before, .widget_pages li::before, .widget_archive li::before { content: "-"; padding-right: 0.5rem; } .widget_categories .cat-item a, .widget_archive li a { text-decoration: none; color: var(--color-text); font-weight: 500; } .widget_categories .cat-item a:hover, .widget_archive li a:hover { opacity: 0.8; } .widget_categories .cat-item .children { padding-left: 1rem; list-style-type: none; margin-top: 0.3rem; } .widget_categories .cat-item .children .cat-item a { font-weight: normal; color: var(--color-text); } .widget_categories .cat-item .children .cat-item a:hover { color: var(--color-primary); } .widget_categories .postform { border: 1px solid var(--color-tertiary); padding: 0.5rem; letter-spacing: 0.05rem; margin-bottom: 0.5rem; } .widget_archive select { border: 1px solid var(--color-tertiary); padding: 0.5rem; letter-spacing: 0.05rem; margin-bottom: 0.5rem; } .widget_calendar .calendar_wrap { border: 1px solid var(--color-tertiary); margin-bottom: 0.5rem; } .widget_calendar .calendar_wrap .wp-calendar-table { width: 100%; } .widget_calendar .calendar_wrap .wp-calendar-table caption { padding: 0.5rem 0; font-weight: 700; } .widget_calendar .calendar_wrap .wp-calendar-table tr { vertical-align: middle; text-align: center; line-height: 2.5; } .widget_calendar .calendar_wrap .wp-calendar-table tr a { text-decoration: underline; } .wp-calendar-nav { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; } .wp-calendar-nav a { text-decoration: none; } .widget_tag_cloud .tagcloud { margin-bottom: 0.5rem; } .wp-video { margin-bottom: 0.5rem; } .snow-monkey-form .smf-form { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--space-s); width: 100%; padding-bottom: var(--space-s); } .wp-block-snow-monkey-forms-item { width: 100%; } .smf-item__label { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--color-on-background); } .smf-item__description { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--color-tertiary); } .smf-text-control, .smf-text-control input { width: 100%; } .smf-item__controls, .smf-radio-buttons-control { padding: var(--space-xs) 0 0 0; } .smf-checkbox-control__label, .smf-radio-button-control__label { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--color-on-background); } .smf-action { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--space-s); width: 100%; } .smf-error-messages { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); } .smf-button-control__control { background: var(--color-primary) !important; color: var(--color-on-primary) !important; border: none !important; transition: background-color 0.3s ease !important; border-radius: var(--border-radius) !important; } .smf-button-control__control[data-action="back"] { background: transparent !important; color: #333 !important; text-decoration: underline !important; } .smf-button-control__control:not([data-action="back"]):hover, .smf-button-control__control:not([data-action="back"]):focus { background: var(--color-primary) !important; } .smf-complete-content {} .smf-complete-content .thanks-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); padding: 0 0 0.5rem 0; } .smf-complete-content .thanks-caution { font-size: var(--font-size-s); font-weight: var(--font-weight-bold); color: var(--color-tertiary); } .smf-complete-content a { text-decoration: underline; } .smf-progress-tracker__item { margin: var(--space-m) 0; } .smf-form .smf-checkbox-control__control:checked, .smf-form .smf-radio-button-control__control:checked { background-color: var(--color-primary); border-color: var(--color-primary); } .wp-block-quote, .wp-block-pullquote{ background-color: var(--color-secondary); padding: 1rem; margin:0.5rem auto 1.5rem auto; width: 100%; position: relative; line-height: 1.5; font-style: italic; text-align: left; font-size:1em; } .wp-block-quote::before, .wp-block-pullquote::before{ content: "‘‘"; color: var(--color-tertiary); font-size: 4.5rem; position: absolute; top: -0.5em; left: 0; } .wp-block-pullquote cite{ display:flex; justify-content: flex-end; font-style: italic; font-size: 0.8em; } .wp-block-pullquote cite a{ color: var(--color-text); } .wp-block-image{ margin: 1rem 1rem 2rem 1rem; } ul.wp-block-list, ol.wp-block-list{ margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; padding-inline-start: 0; margin: 0 0 1rem 1.5rem; }.front-page { position: relative; overflow: hidden; } section { margin: 0; padding: 0; overflow: hidden; } section>* { margin: 0; padding: 0; } .first-bg-back { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: calc(var(--vh, 1vh) * 100); z-index: 1; pointer-events: none; overflow: hidden; transition: filter 0.3s ease, opacity 0.3s ease; } .first-bg-front { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: calc(var(--vh, 1vh) * 100); z-index: 9; pointer-events: none; overflow: hidden; transition: filter 0.3s ease, opacity 0.3s ease; } .fv-img-section { position: relative; z-index: 2; height: 100vh; height: calc(var(--vh, 1vh) * 100); display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: var(--max-width_pc); margin: 0 auto; } .fv-img-container { position: relative; width: 60%; aspect-ratio: 3/4; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--border-radius); } .fv-img { position: absolute; width: 100%; height: 100%; transform: rotate(0deg) scale(1); opacity: 0; transition: none; pointer-events: none; z-index: 3; border: 4px solid var(--color-on-background); border-radius: var(--border-radius); overflow: hidden; } .fv-img.exiting { z-index: 9; } .fv-img.active { z-index: 4; opacity: 1; transform: rotate(0deg); } .fv-img.behind { z-index: 3; opacity: 1; transform: rotate(7deg); } .fv-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .sp-copy-back { position: absolute; top: 25%; left: 0; } .sp-copy-front { position: absolute; bottom: 25%; left: 0; } .pc-copy { position: absolute; top: 50%; transform: translateY(-50%); visibility: hidden; left: 0; width: 100%; } .marquee-track { display: flex; white-space: nowrap; } .marquee-track span { padding-right: 2rem; font-size: 7rem; font-weight: var(--font-weight-bold); } @media screen and (min-width: 1000px) { .sp-copy-back, .sp-copy-front { visibility: hidden; } .pc-copy { visibility: visible; } .fv-img-container { max-width: 300px; } } @media screen and (max-width: 999px) { .fv-item-section .header-weather { display: none; } .fv-item-section { position: fixed; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .fv-clocktower, .fv-clerk, .fv-tvtower, .fv-whitebear { position: absolute; width: 24vw; height: auto; opacity: 0; transform: scale(0.2); } .fv-clocktower { top: 12%; right: 0; width: 36vw; } .fv-clerk { bottom: 10%; right: 3%; width: 28vw; transform: rotate(3deg); } .fv-tvtower { bottom: 10%; left: 2%; transform: rotate(-5deg); } .fv-whitebear { top: 14%; left: -2%; width: 40vw; } } @media screen and (min-width: 1000px) { .fv-item-section { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; max-width: var(--max-width_pc); overflow: visible; pointer-events: none; } .fv-item-section .header-weather { position: absolute; top: 2rem; left: 50%; transform: translateX(-50%); width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-s); font-size: var(--font-size-l); font-weight: var(--font-weight-bold); color: var(--color-on-background); padding: 0 var(--space-s); } .fv-clocktower, .fv-clerk, .fv-tvtower, .fv-whitebear { position: absolute; width: 260px; height: auto; opacity: 0; transform: scale(0.2); } .fv-clocktower { top: 40%; right: 0; transform: translateY(-60%); } .fv-clerk { bottom: 6%; right: 3%; transform: rotate(3deg); } .fv-tvtower { bottom: 5%; left: 2%; transform: rotate(-5deg); } .fv-whitebear { top: 40%; transform: translateY(-60%); left: -5%; } } .bottom-menu-section { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--max-width_pc_content); z-index: 9000; padding: 0 var(--space-xs); } .bottom-menu-inner { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-s); background: var(--color-primary); border-radius: var(--border-radius); padding: var(--space-s) var(--space-xs); border: 2px solid var(--color-on-primary); } .bottom-menu-inner a { text-decoration: none; } .bottom-menu-item { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--space-xs); flex: 1; } .bottom-menu-item-icon { display: flex; align-items: center; justify-content: center; flex-direction: column; } .bottom-menu-item-icon svg { width: 1.2rem; height: 1.2rem; } .bottom-menu-item-text { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--color-on-primary); text-align: center; line-height: 1; } #lead-btn, #recommended-btn { cursor: pointer; } @media screen and (min-width: 1000px) { .bottom-menu-inner { padding: var(--space-s); } .bottom-menu-item-icon svg { width: 1.4rem; height: 1.4rem; } .bottom-menu-item-text { font-size: var(--font-size-s); } } .about { z-index: 10; padding-bottom: 8rem; } .about-inner { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--space-s); padding: var(--space-s); } .about-title-container { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; width: 100%; } .about-title {} .about-img { border-radius: var(--border-radius); overflow: hidden; } .about-content-container { font-size: var(--font-size-l); font-weight: var(--font-weight-bold); } .about .attention { color: var(--color-primary); } @media screen and (min-width: 768px) { .about {} .about-inner { max-width: var(--max-width_pc_content); margin: 0 auto; height: 100%; } .about-content-container { font-size: var(--font-size-xl); } } .horizontal-scroll-wrapper { z-index: 20; position: relative; display: flex; width: max-content; background: var(--color-background); height: 100vh; height: calc(var(--vh, 1vh) * 100); } .slide-section { position: relative; height: 100vh; height: calc(var(--vh, 1vh) * 100); display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; } .numbers-title { height: 100%; flex: 0 0 100vw; width: 100vw; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--color-primary); color: var(--color-on-primary); margin: 0; padding: 0; } .numbers-title-content { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-s); } .numbers-title-inner { position: relative; display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; gap: var(--space-l); width: 100%; height: 100%; } .numbers-title-text { text-align: center; font-size: var(--font-size-xxl); font-weight: var(--font-weight-bold); } .numbers-title-img { width: 120px; height: auto; } .numbers-title-img img { width: 100%; height: 100%; object-fit: cover; } .numbers-title-logo { width: 100%; } @media screen and (min-width: 1000px) { .numbers-title { flex: 0 0 1400px; width: 1400px; } .numbers-title-inner { flex-direction: row; } } .numbers-info { background: var(--color-background); flex: 0 0 160vw; width: 160vw; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 20; margin: 0; padding: 0; } .numbers-info.first { z-index: 25; } .numbers-info.second { z-index: 24; } .numbers-info.third { z-index: 23; } .numbers-info.fourth { z-index: 22; } .numbers-info-inner { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--space-m); margin: 0; padding: 0; width: 100%; height: 100%; padding: 0 0 0 var(--space-m); overflow: visible; } .numbers-info-content { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--space-s); width: 100%; position: relative; height: 100%; overflow: visible; } .numbers-info-count { color: var(--color-primary); font-size: 10rem; font-weight: var(--font-weight-bold); z-index: 1; position: absolute; top: 0; left: 0; opacity: 0.2; } .numbers-info-number { color: var(--color-on-background); font-size: 2.6rem; font-weight: var(--font-weight-bold); z-index: 5; position: absolute; top: 20%; left: 0; white-space: nowrap; } .numbers-info-number span { position: relative; font-size: 1.6em; font-weight: var(--font-weight-bold); z-index: 5; } .numbers-info-text { color: var(--color-background); font-size: 1rem; font-weight: var(--font-weight-bold); background: rgba(0, 0, 0, 0.8); padding: var(--space-s); z-index: 5; position: absolute; top: 55%; right: 15%; width: 50%; } .numbers-info-img { position: absolute; width: 50%; height: 80%; aspect-ratio: 9/16; z-index: 3; overflow: hidden; flex: 2; right: 0; bottom: 50%; transform: translateY(50%); } .numbers-info-img img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 3; } @media screen and (min-width: 768px) { .numbers-info { flex: 0 0 120vw; width: 120vw; } .numbers-info-count { font-size: 20rem; top: 0; left: -2%; } .numbers-info-number { font-size: 4rem; } .numbers-info-text { font-size: 1.4rem; top: 55%; right: 5%; width: 60%; } } @media screen and (min-width: 1000px) { .numbers-info { flex: 0 0 1400px; width: 1400px; } .numbers-info-count { font-size: 30rem; top: 0; left: -20%; } .numbers-info-content { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--space-s); width: 100%; position: relative; height: 100%; overflow: visible; flex: 3; } .numbers-info-img { position: relative; width: 100%; height: 100%; aspect-ratio: 9/16; overflow: hidden; flex: 2; } .numbers-info-text { color: var(--color-on-background); font-size: 1.2rem; font-weight: var(--font-weight-bold); background: inherit; position: absolute; top: 60%; right: 0; width: 60%; } } .interview-section { z-index: 40; position: relative; padding: 10rem 0 5rem 0; background: var(--color-background); display: block; margin: 0; } .interview-section::before { content: ''; position: absolute; top: -3rem; left: 0; height: 3rem; width: 100%; background: var(--white-stripe); } .interview-section h2 { font-size: var(--font-size-xl); padding: 0 0 var(--space-l) 0; color: var(--color-on-background); } .interview-inner { position: relative; z-index: 41; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-s); padding: var(--space-s); width: 100%; max-width: var(--max-width_pc); margin: 0 auto; overflow: hidden; } .interview-map { position: absolute; top: -10%; right: -10%; width: 100%; height: 100%; opacity: 0.2; z-index: 42; } .interview-list { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-s); width: 100%; z-index: 45; } .interview-section .read-more { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; z-index: 45; padding: 1rem 0 2rem 0; } .interview-section .read-more a { position: relative; display: inline-block; font-size: var(--font-size-m); font-weight: var(--font-weight-bold); color: var(--color-primary); padding: 0.5rem 1rem; border-radius: var(--border-radius); overflow: hidden; z-index: 1; } .interview-section .read-more a::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; z-index: -1; } .interview-section .read-more a:hover::before { transform: scaleX(1); } .interview-section .read-more a:hover { color: var(--color-on-primary); text-decoration: none; } .ad-section { z-index: 50; position: relative; display: block; margin: 0; } .ad-section h2 { font-size: var(--font-size-xl); padding: 0 0 var(--space-l) 0; text-align: center; } .ad-view { display: none; } .ad-inner { position: relative; z-index: 51; width: 100%; padding: 5rem 0; background: var(--color-background); color: var(--color-on-background); transition: background 0.4s ease, color 0.4s ease; } .ad-inner.is-color-inverted { background: var(--color-on-background); color: var(--color-background); } .ad-list { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-m); padding: var(--space-s); } .ad-item { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--space-s); } .ad-item-img { width: 100%; aspect-ratio: 1/1; border-radius: var(--border-radius); overflow: hidden; } .ad-item-img img { width: 100%; height: 100%; object-fit: cover; } .ad-item-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--space-xs); width: 100%; } .ad-item-text-title { margin: 0; padding: 0; font-size: var(--font-size-l); font-weight: var(--font-weight-bold); } .ad-item-text-description { font-weight: var(--font-weight-bold); } @media screen and (min-width: 768px) { .ad-section h2 { font-size: var(--font-size-xxl); } .ad-list { flex-direction: row; flex-wrap: wrap; } .ad-item { width: calc((100% - 2 * var(--space-s)) / 2); } } @media screen and (min-width: 1100px) { .ad-section h2 { padding: 0 0 var(--space-s) 0; } .ad-detail { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; } .ad-view { width: 40vw; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; margin: 0; padding: 0; } .ad-view-video { position: relative; margin: 0; padding: 0; display: block; overflow: hidden; aspect-ratio: 9/16; height: 60vh; height: calc(var(--vh, 1vh) * 60); background: var(--color-on-background); } .ad-view-video::before { content: 'loading...'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; color: var(--color-tertiary); z-index: 58; text-align: center; font-size: var(--font-size-s); font-weight: var(--font-weight-bold); animation: fadeBlink 2s ease-in-out infinite; opacity: 1; } @keyframes fadeBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } #ad-video { position: relative; transition: opacity 0.5s ease; opacity: 1; z-index: 59; } .ad-view-video video { width: 100%; height: 100%; object-fit: cover; } .ad-list { width: 60vw; flex-direction: column; flex-wrap: wrap; padding: 0 var(--space-xl) 0 0; } .ad-item { position: relative; flex-direction: row; width: 100%; cursor: pointer; } .ad-item-img { position: relative; width: 16rem; } .ad-item-img-inner { filter: grayscale(100%) brightness(0.7); transition: filter 0.3s ease; } .ad-item.is-active .ad-item-img-inner { filter: none; } .ad-item-play-icon { position: absolute; z-index: 59; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; color: var(--color-background); opacity: 1; pointer-events: none; transition: opacity 0.3s ease; } .ad-item.is-active .ad-item-play-icon { display: none; } .ad-item.is-active .ad-item-img { filter: none; } .ad-item.is-active::after { display: none; } } .flow-section { z-index: 60; position: relative; background: var(--color-background); padding: var(--space-xl) 0 0 0; } .flow-section h2 { font-size: var(--font-size-xl); padding: 0 0 var(--space-l) 0; color: var(--color-on-background); text-align: center; } .flow-list-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-s); padding: var(--space-s) var(--space-s) 0 var(--space-s); } .flow-list { width: 100%; max-width: var(--max-width_pc_content); margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5rem; } .flow-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; } .flow-item:not(:last-child)::after { content: ""; position: absolute; top: 120%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 14px solid #ccc; } .limit-date { font-size: var(--font-size-s); font-weight: var(--font-weight-bold); color: var(--color-primary); padding: 0 0 var(--space-s) 0; } .action-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-s); flex: 4; } h3.flow-item-title { font-size: var(--font-size-l); font-weight: var(--font-weight-bold); line-height: 1; margin: 0; padding: 0; } .flow-item-text { font-size: var(--font-size-m); font-weight: var(--font-weight-bold); text-align: center; max-width: 500px; } @media screen and (min-width: 768px) { .flow-section h2 { font-size: var(--font-size-xxl); } .flow-list-toggle { font-size: var(--font-size-l); } .flow-list { gap: 5rem; } .limit-date { font-size: var(--font-size-m); } h3.flow-item-title { font-size: var(--font-size-xl); } .flow-item-text { font-size: var(--font-size-m); } } .lead-section { z-index: 70; position: relative; background: var(--color-background); height: calc(100vh - 2rem); height: calc(var(--vh, 1vh) * 100 - 2rem); width: 100%; } .lead-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; width: 100%; max-width: var(--max-width_pc_middle); margin: 0 auto; padding-top: 5rem; } .lead-title {} h2.lead-title-text { font-size: 1.25rem; padding: var(--space-s); line-height: 2; text-align: center; } .lead-text { padding: var(--space-s) var(--space-m); font-size: 1.2rem; font-weight: var(--font-weight-bold); text-align: center; } @media screen and (min-width: 768px) { h2.lead-title-text { font-size: var(--font-size-xxl); } .lead-text { font-size: var(--font-size-l); } } @media screen and (min-width: 1000px) { h2.lead-title-text { line-height: 1.7; } .lead-text { font-size: var(--font-size-ml); } .lead-text span { display: block; } }