@charset "UTF-8"; /* ========================================================= RESET ========================================================= */ * { margin: 0; padding: 0; border: none; box-sizing: border-box !important; list-style-type: none; } html { scroll-behavior: smooth; } body { font-family: "Noto Serif JP", serif; color: var(--c-text); background: var(--c-bg-outer); line-height: 1.9; -webkit-font-smoothing: antialiased; } /* background-attachment:fixed on body is unreliable across browsers (notably iOS Safari), so use a dedicated fixed backdrop layer instead. */ .bg_backdrop { position: fixed; inset: 0; z-index: -1; background: var(--c-bg-outer) url("../img/rose.jpg") center / cover no-repeat; } /* ========================================================= INTRO SPLASH Full-screen rose background with the catch copy fading in, then the whole overlay fades out to reveal the site. ========================================================= */ body.is_intro_lock { overflow: hidden; height: 100%; } .intro { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 40px; background: var(--c-bg-outer) url("../img/rose.jpg") center / cover no-repeat; animation: intro_fade_out 1.1s ease forwards; animation-delay: 3.4s; } /* EN copy is longer, so it needs more time to fully reveal before the overlay fades out (double the JA delay). */ .intro.intro--en { animation-delay: 6.8s; } .intro_catch { color: #fff; text-align: center; font-family: "Noto Serif JP", serif; font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.9; letter-spacing: 0.08em; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5); } .sp_break { display: none; } .sp_only { display: none; } /* Each character is wrapped in a .ch span by scripts.js and staggered via an inline animation-delay for a "flowing in" reveal, rather than a single fade for the whole line. */ .intro_catch .ch { display: inline-block; opacity: 0; transform: translateY(14px); animation: intro_char_in 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; } @keyframes intro_char_in { to { opacity: 1; transform: translateY(0); } } @keyframes intro_fade_out { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .intro { display: none; } } /* ========================================================= SCROLL REVEAL Section titles & images fade/slide in the first time they enter the viewport (triggered via IntersectionObserver in scripts.js, which toggles the .is_visible class). ========================================================= */ .js_reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s ease, transform 0.9s ease; transition-delay: 0.5s; } .js_reveal.is_visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js_reveal { opacity: 1; transform: none; transition: none; } } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } a { color: inherit; text-decoration: none; } button { background: none; font-family: inherit; color: inherit; cursor: pointer; } img { max-width: 100%; height: auto; display: block; } .text-center { text-align: center !important; } .serif_en { font-family: "Cormorant Garamond", serif; } /* ========================================================= VARIABLES ========================================================= */ :root { --content-w: 480px; --c-bg-outer: #2b0f10; --c-bg: #ffffff; --c-text: #3a281f; --c-text-body: #434343; --c-black: #1a1512; --c-gold: #c8a15a; --c-line: #e2d6c6; --font-sans: "Noto Sans JP", -apple-system, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; } /* ---- Body copy: paragraph text uses the sans-serif font & color, headings/logo keep the serif family set on /.serif_en. ---- */ p { font-family: var(--font-sans); color: var(--c-text-body); } /* ========================================================= IMAGE PLACEHOLDER (temporary, until real assets are supplied) ========================================================= */ .ph { position: relative; width: 100%; aspect-ratio: 4 / 3; background: repeating-linear-gradient(45deg, #e7dccb, #e7dccb 10px, #f1e9dc 10px, #f1e9dc 20px); border: 1px solid var(--c-line); display: flex; align-items: center; justify-content: center; overflow: hidden; } .ph::after { content: attr(data-ph); font-family: sans-serif; font-size: 0.75rem; color: #8a7a63; background: rgba(255, 255, 255, 0.7); padding: 4px 10px; border-radius: 4px; } /* ========================================================= ICONS ========================================================= */ .icon_cart { display: inline-block; width: 18px; height: auto; vertical-align: middle; } /* ========================================================= LAYOUT / CONTENT COLUMN Same design is shared by PC and SP: a fixed-width column centered on the viewport. ========================================================= */ .lp_wrap { max-width: var(--content-w); margin: 0 auto; background: var(--c-bg); position: relative; overflow: hidden; } /* ---- MV ---- */ .mv { position: relative; } .mv_media { aspect-ratio: 3 / 4; overflow: hidden; } .mv_media img { width: 100%; height: 100%; object-fit: cover; } .mv_logo { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); width: 96px; } /* ---- Section common ---- */ .sec { padding: 64px 0; } .sec_inner { padding: 0 32px; } .sec_label { text-align: center; font-size: 0.85rem; letter-spacing: 0.2em; color: var(--c-gold); margin-bottom: 12px; } .sec_ttl { text-align: center; font-size: 1.5rem; font-weight: 500; line-height: 1.7; margin-bottom: 28px; } .sec_lead { font-size: 0.9rem; line-height: 2.1; text-align: center; margin-bottom: 32px; } /* ---- Concept ---- */ .award_row { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; } .award_badge { flex: none; width: 110px; } .award_badge img { width: 100%; height: auto; } .award_text { flex: 1; font-size: 0.82rem; line-height: 1.9; } .concept_img { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; } .concept_img::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 30%; background: linear-gradient(to bottom, var(--c-bg) 0%, rgba(255, 255, 255, 0) 100%); z-index: 1; } .concept_img img { width: 100%; height: 100%; object-fit: cover; } /* ---- Feature ---- */ .feature_item { margin-bottom: 72px; } .feature_img { margin-bottom: 20px; aspect-ratio: 3 / 2; overflow: hidden; } .feature_img img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .feature_img--face img { object-position: center 78%; transform: scale(1.2); } .feature_subttl { font-size: 0.95rem; font-weight: 500; text-align: center; margin-bottom: 12px; } .feature_ttl { font-size: 1.15rem; font-weight: 500; text-align: center; margin-bottom: 3px; } .feature_txt { font-size: 0.88rem; line-height: 2; } .feature_diagram { display: flex; align-items: center; gap: 16px; padding: 24px 32px; margin-bottom: 40px; } .feature_diagram_img { flex: none; width: 110px; } .feature_diagram_txt { flex: 1; font-size: 0.85rem; line-height: 1.9; } /* ---- Series ---- */ .sec_series { background: #8a3a16; color: #fff; padding-bottom: 40px; } .sec_series .sec_label, .sec_series .sec_ttl { color: #fff; } .series_slider { padding: 0 32px; } .series_slide { padding: 0 8px; } .series_slide a { display: block; color: inherit; text-decoration: none; } .series_slide img { aspect-ratio: 4 / 3; object-fit: cover; background: #fff; } .series_caption { margin-top: 20px; font-size: 0.85rem; letter-spacing: 0.05em; color: #fff; } .series_arrows { display: flex; justify-content: center; gap: 24px; margin-top: 16px; } .series_prev, .series_next { width: 40px; height: 40px; border: 1px solid #fff; border-radius: 50%; color: #fff; } /* ---- FAQ ---- */ .faq_item { border-bottom: 1px solid var(--c-line); } .faq_q { width: 100%; text-align: left; padding: 20px 36px 20px 4px; font-size: 0.9rem; position: relative; } .faq_q::before { content: "Q"; font-family: "Cormorant Garamond", serif; color: var(--c-gold); margin-right: 10px; } .faq_q::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.2rem; transition: transform 0.2s ease; } .faq_item.is_open .faq_q::after { transform: translateY(-50%) rotate(45deg); } .faq_a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; } .faq_a p { overflow: hidden; font-size: 0.85rem; line-height: 1.9; padding: 0 4px; } .faq_item.is_open .faq_a { grid-template-rows: 1fr; } .faq_item.is_open .faq_a p { padding-bottom: 20px; } /* ---- Company Profile ---- */ .company_subttl { font-family: "Noto Serif JP", serif; font-weight: 500; font-size: 1.1rem; text-align: center; margin-bottom: 16px; } .company_lead { font-size: 0.88rem; line-height: 2; text-align: center; margin-bottom: 32px; } .company_box { display: flex; align-items: center; gap: 20px; border: 1px solid var(--c-line); padding: 20px; } .company_logo { flex: none; width: 84px; } .company_info { flex: 1; } .company_name { font-family: "Noto Serif JP", serif; font-weight: 500; font-size: 1rem; margin-bottom: 8px; } .company_txt { font-size: 0.78rem; line-height: 1.8; } /* ---- Footer ---- */ .footer { padding: 56px 32px 40px; text-align: center; } .footer_banner { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 32px; } .footer_banner img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #fff; } .footer_logo { font-size: 1.3rem; letter-spacing: 0.1em; margin-bottom: 8px; } .footer_copyright { font-size: 0.7rem; color: #8a7a63; } /* ========================================================= Fixed chrome shared base (visibility toggled per breakpoint in pc.css / sp.css) ========================================================= */ .l_side_left, .l_side_cta, .l_copyright, .sp_header, .sp_nav, .sp_nav_overlay, .sp_bottom_cta { position: fixed; z-index: 100; }