/* ========================================================== アプリM&A（Astra 子テーマ）main.css カラー：ネイビー #092850 / 深いネイビー #061A37 / ゴールド #B77A0B / 白 本文は16px以上・白地は濃紺文字・濃紺地は白文字 1. 共通（フォント・Astra ヘッダー） 2. 部品（商品一覧・商品詳細・フォームなど .appma-main / .appma-ui 内） 3. スマホ下部メニュー・フッター 4. トップページ（.fp） 5. 共通の追加・調整 ========================================================== */ :root { --navy: #092850; --navy-deep: #061A37; --navy-mid: #0B3470; --blue: #1556B0; --gold: #B77A0B; --gold-dark: #9C6B08; --gold-grad: linear-gradient(180deg, #D8A743 0%, #C38B18 50%, #B27809 100%); --gold-grad-hover: linear-gradient(180deg, #CD9B37 0%, #B98010 50%, #A66F07 100%); --gold-light: #E2B24C; --gold-pale: #FBF4E6; --ink: #0B1F3F; --text: #1A2B47; --muted: #3E4F6B; --line: #D8E0EC; --bg-soft: #F3F6FB; --bg-cream: #FBF7EF; --danger: #B3261E; --radius: 14px; --radius-lg: 20px; --shadow: 0 14px 34px rgba(6, 26, 55, .12); --shadow-sm: 0 4px 14px rgba(6, 26, 55, .07); --container: 1200px; --gutter: 20px; --header-h: 80px; --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif; --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; } @media (max-width: 1199px) { :root { --header-h: 68px; } } @media (max-width: 600px) { :root { --gutter: 16px; --header-h: 62px; } } /* ---------- 1. 共通 ---------- */ html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 64px); } body.appma-site { font-family: var(--font-sans); font-size: 16px; line-height: 1.85; color: var(--text); background: #fff; letter-spacing: .02em; -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; line-break: strict; } body.appma-site button, body.appma-site input, body.appma-site select, body.appma-site textarea { font-family: var(--font-sans); } body.appma-site :focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; } /* テーマのテンプレートで表示するページ：Astra のコンテナ幅・余白を解除 */ .appma-full .site-content > .ast-container, .appma-view .site-content > .ast-container, .ast-page-builder-template .site-content > .ast-container { max-width: 100%; padding: 0; display: block; } .appma-view #primary, .appma-view .site-main { margin: 0; padding: 0; width: 100%; } .appma-main { display: block; width: 100%; } /* ---------- Astra ヘッダー ---------- */ .appma-site #masthead { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid #E8EDF5; transition: box-shadow .2s ease; } .appma-site #masthead.is-scrolled { box-shadow: 0 8px 24px rgba(6, 26, 55, .08); } .admin-bar.appma-site #masthead { top: 32px; } @media (max-width: 782px) { .admin-bar.appma-site #masthead { top: 46px; } } @media (max-width: 600px) { .admin-bar.appma-site #masthead { top: 0; } } .appma-site #masthead .main-header-bar, .appma-site #masthead .ast-primary-header-bar { background: transparent; border-bottom: 0; } .appma-site #masthead .site-primary-header-wrap { min-height: var(--header-h); } .appma-site #masthead .ast-container { max-width: calc(1320px + var(--gutter) * 2); padding-inline: var(--gutter); } .appma-site #masthead .site-title, .appma-site #masthead .site-description { display: none; } .appma-site #masthead .custom-logo-link img { width: auto; max-height: 52px; } @media (max-width: 1199px) { .appma-site #masthead .custom-logo-link img { max-height: 44px; } } @media (max-width: 600px) { .appma-site #masthead .custom-logo-link img { max-height: 40px; } } /* PC ヘッダー／スマホヘッダーの切り替え（1200px 未満はメニューボタン。Astra の判定クラスに合わせる） */ .appma-site.ast-header-break-point #ast-desktop-header { display: none; } .appma-site.ast-header-break-point #ast-mobile-header { display: block; } .appma-site.ast-desktop #ast-mobile-header { display: none; } @media (min-width: 922px) and (max-width: 1199.98px) { .appma-site:not(.ast-desktop) #ast-desktop-header { display: none; } .appma-site:not(.ast-desktop) #ast-mobile-header { display: block; } } /* PC メニュー */ .appma-site #masthead .main-header-menu > .menu-item > .menu-link { position: relative; padding: 0 10px; color: var(--ink); font-size: 15px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; } .appma-site #masthead .main-header-menu > .menu-item > .menu-link::before { content: ""; position: absolute; left: 10px; right: 10px; bottom: 18px; height: 2px; background: var(--gold); transform: scaleX(0); transition: transform .2s ease; } .appma-site #masthead .main-header-menu > .menu-item:hover > .menu-link::before, .appma-site #masthead .main-header-menu > .current-menu-item > .menu-link::before, .appma-site #masthead .main-header-menu > .current-menu-ancestor > .menu-link::before { transform: scaleX(1); } .appma-site #masthead .main-header-menu .menu-item:hover > .menu-link, .appma-site #masthead .main-header-menu .current-menu-item > .menu-link, .appma-site #masthead .main-header-menu .current-menu-ancestor > .menu-link { color: var(--navy); } .appma-site #masthead .main-header-menu .sub-menu { padding: 8px; border: 1px solid #E6ECF4; border-radius: 14px; background: #fff; box-shadow: var(--shadow); } .appma-site #masthead .main-header-menu .sub-menu .menu-link { padding: 10px 14px; border-radius: 8px; color: var(--ink); font-size: 15px; font-weight: 500; border: 0; } .appma-site #masthead .main-header-menu .sub-menu .menu-link:hover { background: var(--bg-soft); color: var(--navy); } .appma-site #masthead .main-header-menu .sub-menu .menu-item { border: 0; } /* メニュー内の CTA ボタン（CSSクラス appma-menu-cta） */ .appma-site #masthead .main-header-menu > .appma-menu-cta { margin-left: 10px; display: flex; align-items: center; } .appma-site #masthead .main-header-menu > .appma-menu-cta > .menu-link { display: inline-flex; align-items: center; align-self: center; height: auto; min-height: 48px; padding: 0 1.2em; border-radius: 10px; color: #fff; background: var(--gold-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 18px rgba(183, 122, 11, .3); line-height: 1.4; transition: transform .2s ease, background .2s ease; } .appma-site #masthead .main-header-menu > .appma-menu-cta > .menu-link::before { display: none; } .appma-site #masthead .main-header-menu > .appma-menu-cta > .menu-link:hover { color: #fff; background: var(--gold-grad-hover); transform: translateY(-2px); } @media (max-width: 1279px) { .appma-site #masthead .main-header-menu > .menu-item > .menu-link { padding: 0 7px; font-size: 14.5px; } .appma-site #masthead .main-header-menu > .menu-item > .menu-link::before { left: 7px; right: 7px; } .appma-site #masthead .main-header-menu > .appma-menu-cta > .menu-link { padding: 0 1em; } } /* スマホ・タブレット：メニューボタンと開いたメニュー */ .appma-site #masthead .ast-mobile-header-wrap .menu-toggle, .appma-site .ast-mobile-popup-drawer .menu-toggle-close { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 46px; min-height: 46px; padding: 8px 12px; border: 2px solid var(--navy); border-radius: 10px; background: #fff; color: var(--navy); } .appma-site #masthead .ast-mobile-header-wrap .menu-toggle .ahfb-svg-iconset svg, .appma-site #masthead .ast-mobile-header-wrap .menu-toggle .mobile-menu-toggle-icon svg { fill: var(--navy); } .appma-site #masthead .ast-mobile-header-wrap .menu-toggle:hover, .appma-site #masthead .ast-mobile-header-wrap .menu-toggle:focus { background: var(--bg-soft); } .appma-site .ast-mobile-popup-drawer .ast-mobile-popup-inner { background: #fff; } .appma-site .ast-mobile-popup-drawer .menu-toggle-close { border: 0; background: var(--bg-soft); border-radius: 50%; padding: 0; } .appma-site .ast-mobile-popup-drawer .menu-toggle-close svg { fill: var(--navy); } .appma-site .ast-mobile-popup-drawer .ast-mobile-popup-header { padding: 12px 16px 0; } .appma-site .ast-mobile-popup-drawer .ast-mobile-popup-content { padding: 4px 22px 40px; } .appma-site .ast-mobile-popup-drawer .main-header-menu .menu-item > .menu-link { padding: 14px 4px; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 17px; font-weight: 700; line-height: 1.5; } .appma-site .ast-mobile-popup-drawer .main-header-menu .current-menu-item > .menu-link, .appma-site .ast-mobile-popup-drawer .main-header-menu .current-menu-ancestor > .menu-link { background: transparent; color: var(--navy); box-shadow: inset 3px 0 0 var(--gold); padding-left: 12px; } .appma-site .ast-mobile-popup-drawer .main-header-menu .sub-menu .menu-link { padding: 10px 4px 10px 16px; font-size: 16px; font-weight: 500; } .appma-site .ast-mobile-popup-drawer .main-header-menu .menu-item { border: 0; } .appma-site .ast-mobile-popup-drawer .main-header-menu .ast-menu-toggle { color: var(--navy); } .appma-site .ast-mobile-popup-drawer .main-header-menu > .appma-menu-cta > .menu-link, .appma-site .ast-mobile-popup-drawer .main-header-menu > .appma-menu-cta.current-menu-item > .menu-link { display: flex; align-items: center; justify-content: center; margin-top: 20px; min-height: 56px; padding: 0 16px; border: 0; border-radius: 10px; box-shadow: none; text-align: center; color: #fff; background: var(--gold-grad); } /* ---------- 2. 部品 ---------- */ /* 基本 */ :is(.appma-main, .appma-ui) img, :is(.appma-main, .appma-ui) svg { max-width: 100%; height: auto; } :is(.appma-main, .appma-ui) img { display: block; } :is(.appma-main, .appma-ui) a { color: var(--blue); text-underline-offset: .2em; } :is(.appma-main, .appma-ui) h1, :is(.appma-main, .appma-ui) h2, :is(.appma-main, .appma-ui) h3, :is(.appma-main, .appma-ui) h4 { color: var(--ink); line-height: 1.45; margin: 0 0 .6em; font-weight: 900; letter-spacing: .03em; } :is(.appma-main, .appma-ui) p { margin: 0 0 1em; } :is(.appma-main, .appma-ui) p:last-child { margin-bottom: 0; } :is(.appma-main, .appma-ui) button, :is(.appma-main, .appma-ui) input, :is(.appma-main, .appma-ui) select, :is(.appma-main, .appma-ui) textarea { font: inherit; } :is(.appma-main, .appma-ui) :focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; } :is(.appma-main, .appma-ui) .icon { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: middle; } :is(.appma-main, .appma-ui) .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } :is(.appma-main, .appma-ui) .container--wide { max-width: calc(1320px + var(--gutter) * 2); } :is(.appma-main, .appma-ui) .container--narrow { max-width: calc(900px + var(--gutter) * 2); } :is(.appma-main, .appma-ui) .sp-only { display: none; } @media (max-width: 600px) { :is(.appma-main, .appma-ui) .sp-only { display: inline; } } :is(.appma-main, .appma-ui) .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ボタン */ /* ---------- buttons ---------- */ :is(.appma-main, .appma-ui) .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 52px; padding: .7em 1.5em; border-radius: 10px; border: 2px solid transparent; font-size: 16px; font-weight: 700; line-height: 1.4; letter-spacing: .04em; text-decoration: none; text-align: center; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; } :is(.appma-main, .appma-ui) .btn .icon { width: 20px; height: 20px; } :is(.appma-main, .appma-ui) .btn .btn__arrow { width: 16px; height: 16px; margin-left: .1em; margin-right: -.3em; } :is(.appma-main, .appma-ui) .btn:hover { transform: translateY(-2px); } :is(.appma-main, .appma-ui) .btn:active { transform: none; } :is(.appma-main, .appma-ui) .btn-gold { color: #fff; background: var(--gold-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 18px rgba(183, 122, 11, .3); } :is(.appma-main, .appma-ui) .btn-gold:hover { background: var(--gold-grad-hover); color: #fff; } :is(.appma-main, .appma-ui) .btn-navy { color: #fff; background: var(--navy); box-shadow: 0 8px 18px rgba(9, 40, 80, .22); } :is(.appma-main, .appma-ui) .btn-navy:hover { background: var(--navy-deep); color: #fff; } :is(.appma-main, .appma-ui) .btn-white { color: var(--navy); background: #fff; box-shadow: 0 8px 20px rgba(6, 26, 55, .2); } :is(.appma-main, .appma-ui) .btn-white:hover { color: var(--navy-deep); background: #F4F7FC; } :is(.appma-main, .appma-ui) .btn-outline { color: var(--navy); background: #fff; border-color: var(--navy); } :is(.appma-main, .appma-ui) .btn-outline:hover { background: var(--navy); color: #fff; } :is(.appma-main, .appma-ui) .btn-lg { min-height: 60px; font-size: 17px; padding-inline: 1.8em; } :is(.appma-main, .appma-ui) .btn-sm { min-height: 46px; font-size: 15px; padding: .5em 1em; } :is(.appma-main, .appma-ui) .btn--pill { border-radius: 999px; } :is(.appma-main, .appma-ui) .btn--block { display: flex; width: 100%; } :is(.appma-main, .appma-ui) .btn.is-loading { opacity: .7; pointer-events: none; } :is(.appma-main, .appma-ui) .btn-row { display: flex; flex-wrap: wrap; gap: 14px; } :is(.appma-main, .appma-ui) .btn-row--center { justify-content: center; } :is(.appma-main, .appma-ui) .text-link { display: inline-flex; align-items: center; gap: 4px; color: var(--navy); font-weight: 700; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; } :is(.appma-main, .appma-ui) .text-link .icon { width: 18px; height: 18px; } :is(.appma-main, .appma-ui) .center-link { text-align: center; margin-top: 24px; } /* セクション共通 */ /* ---------- section common ---------- */ :is(.appma-main, .appma-ui) .section { padding-block: clamp(56px, 7vw, 100px); } :is(.appma-main, .appma-ui) .section--soft { background: var(--bg-soft); } :is(.appma-main, .appma-ui) .section--cream { background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-cream) 100%); } :is(.appma-main, .appma-ui) .sec-head { text-align: center; margin-bottom: clamp(28px, 4vw, 52px); } :is(.appma-main, .appma-ui) .sec-head__en { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; letter-spacing: .2em; color: var(--gold-dark); } :is(.appma-main, .appma-ui) .sec-title { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 24px); margin: 0; font-size: clamp(24px, 3vw, 38px); line-height: 1.4; } :is(.appma-main, .appma-ui) .sec-title::before, :is(.appma-main, .appma-ui) .sec-title::after { content: ""; flex: 0 1 110px; min-width: 24px; height: 2px; background: linear-gradient(90deg, rgba(183, 122, 11, 0), var(--gold)); } :is(.appma-main, .appma-ui) .sec-title::after { transform: scaleX(-1); } :is(.appma-main, .appma-ui) .sec-title > span { flex: 0 1 auto; } :is(.appma-main, .appma-ui) .sec-title .num { font-family: var(--font-serif); font-size: 1.6em; line-height: 1; color: var(--gold); margin-inline: .04em; font-style: italic; vertical-align: -.06em; } @media (max-width: 600px) { :is(.appma-main, .appma-ui) .sec-title { display: block; font-size: 24px; } :is(.appma-main, .appma-ui) .sec-title::before { display: none; } :is(.appma-main, .appma-ui) .sec-title::after { display: block; width: 56px; height: 2px; margin: 14px auto 0; transform: none; background: var(--gold); } } :is(.appma-main, .appma-ui) .sec-lead { max-width: 46em; margin: 14px auto 0; font-size: 17px; color: var(--muted); } :is(.appma-main, .appma-ui) .sec-foot { margin-top: clamp(28px, 4vw, 44px); } :is(.appma-main, .appma-ui) .note { margin-top: 12px; font-size: 16px; color: var(--muted); } :is(.appma-main, .appma-ui) .notice { display: flex; gap: 12px; align-items: flex-start; margin: 28px 0 0; padding: 18px 22px; background: var(--gold-pale); border: 1px solid #EAD7AE; border-left: 5px solid var(--gold); border-radius: 12px; color: var(--ink); font-size: 16px; font-weight: 500; } :is(.appma-main, .appma-ui) .notice .icon { width: 24px; height: 24px; color: var(--gold-dark); margin-top: 3px; } :is(.appma-main, .appma-ui) .notice--navy { background: #EEF3FA; border-color: #C9D6EA; border-left-color: var(--navy); } :is(.appma-main, .appma-ui) .notice--navy .icon { color: var(--navy); } /* 流れ・相談エリア・下層ページ見出し・カード・手順・FAQ・料金・表・商品一覧・商品詳細・フォーム・本文 */ /* ---------- flow ---------- */ :is(.appma-main, .appma-ui) .flow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } :is(.appma-main, .appma-ui) .flow__item { position: relative; display: flex; flex-direction: column; align-items: center; padding: 20px 10px 22px; background: #fff; border: 1px solid #E3E9F2; border-radius: 16px; box-shadow: var(--shadow-sm); text-align: center; } :is(.appma-main, .appma-ui) .flow__item:not(:last-child)::after { content: ""; position: absolute; right: -13px; top: 50%; width: 10px; height: 10px; border-top: 2.5px solid var(--gold); border-right: 2.5px solid var(--gold); transform: translateY(-50%) rotate(45deg); } :is(.appma-main, .appma-ui) .flow__num { display: block; margin-bottom: 8px; font-family: var(--font-serif); font-size: 26px; font-weight: 900; line-height: 1; color: var(--gold); } :is(.appma-main, .appma-ui) .flow__icon { width: 40px; height: 40px; margin-bottom: 10px; color: var(--navy); } :is(.appma-main, .appma-ui) .flow__label { font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--ink); } :is(.appma-main, .appma-ui) .flow--compact .flow__item { padding: 16px 8px; } @media (max-width: 1023px) { :is(.appma-main, .appma-ui) .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } :is(.appma-main, .appma-ui) .flow__item::after { display: none; } } @media (max-width: 600px) { :is(.appma-main, .appma-ui) .flow { grid-template-columns: minmax(0, 1fr); gap: 10px; } :is(.appma-main, .appma-ui) .flow__item { flex-direction: row; gap: 14px; padding: 12px 16px; text-align: left; } :is(.appma-main, .appma-ui) .flow__num { margin: 0; width: 34px; font-size: 22px; } :is(.appma-main, .appma-ui) .flow__icon { margin: 0; width: 28px; height: 28px; } :is(.appma-main, .appma-ui) .flow__item:not(:last-child)::after { display: block; right: auto; left: 31px; top: auto; bottom: -9px; width: 8px; height: 8px; transform: rotate(135deg); } } :is(.appma-main, .appma-ui) /* ---------- CTA ---------- */ .cta { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(64px, 8vw, 100px); color: #fff; text-align: center; background: linear-gradient(110deg, #061A37 0%, #0A2F66 55%, #0E4791 100%); } :is(.appma-main, .appma-ui) .cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, rgba(226, 178, 76, 0), var(--gold-light), rgba(226, 178, 76, 0)); } :is(.appma-main, .appma-ui) .cta__city { position: absolute; bottom: 0; height: 100%; width: auto; max-width: none; z-index: -1; opacity: .5; } :is(.appma-main, .appma-ui) .cta__city--l { left: 0; -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent); mask-image: linear-gradient(90deg, #000 30%, transparent); } :is(.appma-main, .appma-ui) .cta__city--r { right: 0; -webkit-mask-image: linear-gradient(270deg, #000 30%, transparent); mask-image: linear-gradient(270deg, #000 30%, transparent); } :is(.appma-main, .appma-ui) .cta__title { margin-bottom: 12px; color: #fff; font-family: var(--font-serif); font-size: clamp(26px, 3.4vw, 44px); } :is(.appma-main, .appma-ui) .cta__text { margin-bottom: 30px; font-size: 17px; color: #EAF0FA; } @media (max-width: 600px) { :is(.appma-main, .appma-ui) .cta__city { opacity: .25; } :is(.appma-main, .appma-ui) .cta .btn-row { flex-direction: column; } :is(.appma-main, .appma-ui) .cta .btn { width: 100%; } } :is(.appma-main, .appma-ui) /* ---------- page hero ---------- */ .phero { position: relative; overflow: hidden; isolation: isolate; color: #fff; background: radial-gradient(70% 120% at 90% 0%, rgba(64, 132, 222, .45), rgba(64, 132, 222, 0) 60%), linear-gradient(112deg, #061A37 0%, #0A2F66 60%, #1556B0 100%); } :is(.appma-main, .appma-ui) .phero--gold { background: radial-gradient(70% 120% at 90% 0%, rgba(226, 178, 76, .42), rgba(226, 178, 76, 0) 60%), linear-gradient(112deg, #061A37 0%, #0A2F66 58%, #134586 100%); } :is(.appma-main, .appma-ui) .phero__swoosh { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 110px; z-index: -1; pointer-events: none; } :is(.appma-main, .appma-ui) .phero__inner { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(24px, 4vw, 56px); align-items: center; min-height: 0; padding-block: 28px 48px; } :is(.appma-main, .appma-ui) .phero__inner--solo { grid-template-columns: minmax(0, 1fr); } :is(.appma-main, .appma-ui) .phero__en { margin: 0 0 4px; font-size: 14px; font-weight: 700; letter-spacing: .22em; color: var(--gold-light); } :is(.appma-main, .appma-ui) .phero__title { margin: 0 0 14px; color: #fff; font-family: var(--font-serif); font-size: clamp(26px, 3.1vw, 42px); line-height: 1.35; text-wrap: balance; overflow-wrap: anywhere; } :is(.appma-main, .appma-ui) .phero__lead { max-width: 42em; margin: 0; font-size: 17px; color: #EAF0FA; } :is(.appma-main, .appma-ui) .phero__img { overflow: hidden; border-radius: 16px; box-shadow: 0 14px 30px rgba(0, 0, 0, .24); aspect-ratio: 16 / 10; } :is(.appma-main, .appma-ui) .phero__img img { width: 100%; height: 100%; object-fit: cover; } .appma-main .phero--company .phero__img { aspect-ratio: 3 / 2; } .appma-main .phero--company .phero__img img { object-fit: contain; } :is(.appma-main, .appma-ui) .phero--list .phero__inner { padding-bottom: 80px; } .appma-main .section--intro { padding-top: clamp(32px, 4vw, 56px); } @media (max-width: 899px) { :is(.appma-main, .appma-ui) .phero__inner { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-block: 20px 28px; } :is(.appma-main, .appma-ui) .phero__img { width: 100%; max-width: 420px; justify-self: end; aspect-ratio: 2 / 1; } :is(.appma-main, .appma-ui) .phero--list .phero__img, .appma-main .phero--cutout .phero__img { display: none; } :is(.appma-main, .appma-ui) .phero--list .phero__inner { padding-bottom: 64px; } } :is(.appma-main, .appma-ui) /* breadcrumb */ .breadcrumb { margin-bottom: 18px; font-size: 14px; } :is(.appma-main, .appma-ui) .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; list-style: none; } :is(.appma-main, .appma-ui) .breadcrumb li { display: inline-flex; align-items: center; } :is(.appma-main, .appma-ui) .breadcrumb li + li::before { content: "›"; margin: 0 8px; opacity: .8; } :is(.appma-main, .appma-ui) .breadcrumb--light { color: #D7E1F0; } :is(.appma-main, .appma-ui) .breadcrumb--light a { color: #fff; } :is(.appma-main, .appma-ui) .breadcrumb--dark { color: var(--muted); } :is(.appma-main, .appma-ui) .breadcrumb--dark a { color: var(--navy); } :is(.appma-main, .appma-ui) /* ---------- feature cards ---------- */ .fcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } :is(.appma-main, .appma-ui) .fcard { position: relative; padding: 28px 26px; background: #fff; border: 1px solid #E3E9F2; border-radius: 18px; box-shadow: var(--shadow-sm); } :is(.appma-main, .appma-ui) .fcard__icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 14px; border-radius: 16px; color: var(--gold-dark); background: linear-gradient(135deg, #FCF3DE, #F1DCAA); } :is(.appma-main, .appma-ui) .fcard__icon .icon { width: 28px; height: 28px; } :is(.appma-main, .appma-ui) .fcard--navy .fcard__icon { color: #fff; background: linear-gradient(135deg, var(--navy), var(--blue)); } :is(.appma-main, .appma-ui) .fcard__title { font-size: 19px; margin-bottom: 8px; } :is(.appma-main, .appma-ui) .fcard p { margin: 0; font-size: 16px; } :is(.appma-main, .appma-ui) .fcard__num { position: absolute; right: 22px; top: 18px; font-family: var(--font-serif); font-size: 30px; font-weight: 900; color: #EFE3C6; line-height: 1; } @media (max-width: 899px) { :is(.appma-main, .appma-ui) .fcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { :is(.appma-main, .appma-ui) .fcards { grid-template-columns: minmax(0, 1fr); gap: 12px; } :is(.appma-main, .appma-ui) .fcard { padding: 22px 20px; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 14px; } :is(.appma-main, .appma-ui) .fcard__icon { width: 52px; height: 52px; grid-row: span 2; margin: 0; } :is(.appma-main, .appma-ui) .fcard__title { margin-bottom: 4px; } } .appma-main .fcards--sale { display: flex; flex-wrap: wrap; justify-content: center; } .appma-main .fcards--sale .fcard { flex: 0 0 calc((100% - 40px) / 3); min-width: 0; text-align: left; } .appma-main .fcards--sale .fcard__title { text-wrap: balance; } @media (max-width: 899px) { .appma-main .fcards--sale .fcard { flex-basis: calc((100% - 20px) / 2); } } @media (max-width: 600px) { .appma-main .fcards--sale .fcard { flex-basis: 100%; } } :is(.appma-main, .appma-ui) .caution { margin-top: 32px; padding: 24px 26px; background: #fff; border: 2px solid #E7C6C2; border-radius: 16px; } :is(.appma-main, .appma-ui) .caution__title { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 19px; color: var(--danger); } :is(.appma-main, .appma-ui) .caution__title .icon { width: 24px; height: 24px; } :is(.appma-main, .appma-ui) .caution p { margin: 0; font-size: 16px; color: var(--ink); } :is(.appma-main, .appma-ui) /* ---------- steps (guide) ---------- */ .steps { position: relative; max-width: 920px; margin: 0 auto; padding: 0; list-style: none; } :is(.appma-main, .appma-ui) .steps::before { content: ""; position: absolute; left: 37px; top: 30px; bottom: 50px; width: 3px; background: linear-gradient(var(--gold), var(--navy)); border-radius: 3px; } :is(.appma-main, .appma-ui) .step { position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 22px; padding-bottom: 22px; } :is(.appma-main, .appma-ui) .step__badge { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 28px; font-weight: 900; line-height: 1; box-shadow: 0 0 0 6px #fff, 0 10px 22px rgba(9, 40, 80, .28); } :is(.appma-main, .appma-ui) .step__badge small { margin-bottom: 4px; font-size: 11px; letter-spacing: .14em; color: var(--gold-light); } :is(.appma-main, .appma-ui) .step__card { display: flex; gap: 18px; align-items: flex-start; padding: 22px 26px; background: #fff; border: 1px solid #E3E9F2; border-radius: 16px; box-shadow: var(--shadow-sm); } :is(.appma-main, .appma-ui) .step__icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--gold-pale); color: var(--gold-dark); } :is(.appma-main, .appma-ui) .step__icon .icon { width: 28px; height: 28px; } :is(.appma-main, .appma-ui) .step__title { margin: 4px 0 4px; font-size: 20px; } :is(.appma-main, .appma-ui) .step__card p { margin: 0; font-size: 16px; } @media (max-width: 600px) { :is(.appma-main, .appma-ui) .steps::before { left: 27px; } :is(.appma-main, .appma-ui) .step { grid-template-columns: 56px 1fr; gap: 12px; } :is(.appma-main, .appma-ui) .step__badge { width: 56px; height: 56px; font-size: 22px; box-shadow: 0 0 0 4px #fff, 0 8px 18px rgba(9, 40, 80, .25); } :is(.appma-main, .appma-ui) .step__badge small { font-size: 9px; } :is(.appma-main, .appma-ui) .step__card { padding: 16px 16px; gap: 12px; } :is(.appma-main, .appma-ui) .step__icon { width: 42px; height: 42px; } :is(.appma-main, .appma-ui) .step__icon .icon { width: 22px; height: 22px; } :is(.appma-main, .appma-ui) .step__title { font-size: 18px; margin-top: 2px; } } :is(.appma-main, .appma-ui) /* ---------- FAQ ---------- */ .faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 920px; margin: 0 auto; } :is(.appma-main, .appma-ui) .faq details { background: #fff; border: 1px solid #DCE4EF; border-radius: 16px; box-shadow: var(--shadow-sm); } :is(.appma-main, .appma-ui) .faq details[open] { border-color: #C4D2E6; } :is(.appma-main, .appma-ui) .faq summary { display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; gap: 14px; align-items: center; padding: 18px 22px; cursor: pointer; list-style: none; color: var(--ink); font-size: 17px; font-weight: 700; } :is(.appma-main, .appma-ui) .faq summary::-webkit-details-marker { display: none; } :is(.appma-main, .appma-ui) .faq__q, :is(.appma-main, .appma-ui) .faq__a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-family: var(--font-serif); font-size: 18px; font-weight: 900; color: #fff; background: var(--navy); } :is(.appma-main, .appma-ui) .faq__a { background: var(--gold-grad); } :is(.appma-main, .appma-ui) .faq__chev { width: 22px; height: 22px; color: var(--navy); transition: transform .2s ease; } :is(.appma-main, .appma-ui) .faq details[open] .faq__chev { transform: rotate(180deg); } :is(.appma-main, .appma-ui) .faq__answer { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 0 22px 22px; } :is(.appma-main, .appma-ui) .faq__answer p { margin: 6px 0 0; font-size: 16px; } :is(.appma-main, .appma-ui) /* ---------- plans ---------- */ .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } :is(.appma-main, .appma-ui) .plan { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #E3E9F2; border-radius: 22px; box-shadow: var(--shadow); } :is(.appma-main, .appma-ui) .plan__head { padding: 28px 28px 24px; color: #fff; } :is(.appma-main, .appma-ui) .plan--gold .plan__head { background: linear-gradient(120deg, #A86F08 0%, #BC8212 55%, #D3A140 100%); } :is(.appma-main, .appma-ui) .plan--navy .plan__head { background: linear-gradient(120deg, #061A37, #0A2F66 60%, #1556B0); } :is(.appma-main, .appma-ui) .plan--light .plan__head { background: linear-gradient(120deg, #EEF3FA, #DCE6F4); color: var(--ink); } :is(.appma-main, .appma-ui) .plan__icon { width: 38px; height: 38px; margin-bottom: 8px; } :is(.appma-main, .appma-ui) .plan--gold .plan__icon { color: #FCE6B0; } :is(.appma-main, .appma-ui) .plan--light .plan__icon { color: var(--navy); } :is(.appma-main, .appma-ui) .plan__name { margin: 0 0 4px; color: inherit; font-family: var(--font-serif); font-size: 28px; } :is(.appma-main, .appma-ui) .plan__target { margin: 0; font-size: 16px; font-weight: 700; } :is(.appma-main, .appma-ui) .plan__body { display: flex; flex-direction: column; gap: 18px; flex: 1; padding: 24px 28px 28px; } :is(.appma-main, .appma-ui) .plan__body .btn { margin-top: auto; } :is(.appma-main, .appma-ui) .checklist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; } :is(.appma-main, .appma-ui) .checklist li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 16px; font-weight: 500; color: var(--ink); } :is(.appma-main, .appma-ui) .checklist .icon { width: 22px; height: 22px; margin-top: 4px; color: var(--gold-dark); } @media (max-width: 1023px) { :is(.appma-main, .appma-ui) .plans { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; } } :is(.appma-main, .appma-ui) /* ---------- table ---------- */ .dtable { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; background: #fff; border: 1px solid #DCE4EF; border-radius: 16px; box-shadow: var(--shadow-sm); } :is(.appma-main, .appma-ui) .dtable th, :is(.appma-main, .appma-ui) .dtable td { padding: 18px 22px; border-bottom: 1px solid #E6ECF4; text-align: left; vertical-align: top; font-size: 16px; } :is(.appma-main, .appma-ui) .dtable tr:last-child th, :is(.appma-main, .appma-ui) .dtable tr:last-child td { border-bottom: 0; } :is(.appma-main, .appma-ui) .dtable th { width: 28%; background: #F3F6FB; color: var(--ink); font-weight: 700; } :is(.appma-main, .appma-ui) .dtable a { word-break: break-all; } :is(.appma-main, .appma-ui) .td-note { display: block; margin-top: 4px; font-size: 16px; color: var(--muted); } :is(.appma-main, .appma-ui) .price-strong { font-size: 22px; font-weight: 900; color: var(--gold-dark); margin-right: 4px; } :is(.appma-main, .appma-ui) .inline-icon { width: 16px; height: 16px; margin-left: 4px; vertical-align: -2px; } @media (max-width: 600px) { :is(.appma-main, .appma-ui) .dtable th, :is(.appma-main, .appma-ui) .dtable td { display: block; width: 100%; } :is(.appma-main, .appma-ui) .dtable th { padding: 14px 18px 6px; border-bottom: 0; } :is(.appma-main, .appma-ui) .dtable td { padding: 4px 18px 16px; background: #fff; } } :is(.appma-main, .appma-ui) /* ---------- product list ---------- */ .section--list { padding-top: 0; background: var(--bg-soft); } :is(.appma-main, .appma-ui) .pfilter { position: relative; z-index: 2; margin-top: -56px; padding: 24px; background: #fff; border: 1px solid #DCE4EF; border-radius: 20px; box-shadow: var(--shadow); } :is(.appma-main, .appma-ui) .pfilter__kw { position: relative; display: flex; gap: 10px; } :is(.appma-main, .appma-ui) .pfilter__kw-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } :is(.appma-main, .appma-ui) .pfilter__kw-icon .icon { width: 22px; height: 22px; } :is(.appma-main, .appma-ui) .pfilter__kw input { flex: 1; min-width: 0; height: 56px; padding: 0 16px 0 48px; border: 2px solid #C7D3E3; border-radius: 12px; background: #FBFCFE; color: var(--ink); font-size: 16px; } :is(.appma-main, .appma-ui) .pfilter__kw input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(9, 40, 80, .12); } :is(.appma-main, .appma-ui) .pfilter__kw .btn { min-height: 56px; padding-inline: 1.6em; } :is(.appma-main, .appma-ui) .pfilter__kw .btn .btn__arrow { display: none; } :is(.appma-main, .appma-ui) .pfilter__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } :is(.appma-main, .appma-ui) .chip { position: relative; } :is(.appma-main, .appma-ui) .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; } :is(.appma-main, .appma-ui) .chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border: 1.5px solid #C7D3E3; border-radius: 999px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; } :is(.appma-main, .appma-ui) .chip span:hover { border-color: var(--navy); } :is(.appma-main, .appma-ui) .chip input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; } :is(.appma-main, .appma-ui) .chip input:focus-visible + span { outline: 3px solid var(--gold-light); outline-offset: 2px; } :is(.appma-main, .appma-ui) .pfilter__more { margin-top: 14px; border-top: 1px solid #E6ECF4; padding-top: 6px; } :is(.appma-main, .appma-ui) .pfilter__more summary { display: inline-flex; align-items: center; gap: 8px; padding: 8px 2px; color: var(--navy); font-weight: 700; cursor: pointer; list-style: none; } :is(.appma-main, .appma-ui) .pfilter__more summary::-webkit-details-marker { display: none; } :is(.appma-main, .appma-ui) .pfilter__more summary .icon { width: 20px; height: 20px; } :is(.appma-main, .appma-ui) .pfilter__chev { transition: transform .2s; } :is(.appma-main, .appma-ui) .pfilter__more[open] .pfilter__chev { transform: rotate(180deg); } :is(.appma-main, .appma-ui) .pfilter__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px; margin-top: 12px; } :is(.appma-main, .appma-ui) .pfilter fieldset { min-width: 0; margin: 0; padding: 0; border: 0; } :is(.appma-main, .appma-ui) .pfilter legend { margin-bottom: 8px; padding: 0; color: var(--ink); font-size: 15px; font-weight: 700; } :is(.appma-main, .appma-ui) .pfilter select, :is(.appma-main, .appma-ui) .results-bar select { width: 100%; height: 48px; padding: 0 12px; border: 2px solid #C7D3E3; border-radius: 10px; background: #FBFCFE; color: var(--ink); font-size: 16px; } :is(.appma-main, .appma-ui) .pfilter .wide { grid-column: 1 / -1; } :is(.appma-main, .appma-ui) .checks { display: flex; flex-wrap: wrap; gap: 8px 18px; } :is(.appma-main, .appma-ui) .checks label { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; color: var(--ink); cursor: pointer; } :is(.appma-main, .appma-ui) .checks input { width: 20px; height: 20px; accent-color: var(--navy); } :is(.appma-main, .appma-ui) .checks--tags { gap: 8px; } :is(.appma-main, .appma-ui) .tagcheck input { position: absolute; opacity: 0; width: 1px; height: 1px; } :is(.appma-main, .appma-ui) .tagcheck span { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 999px; background: #F1F4F9; border: 1.5px solid transparent; font-size: 15px; font-weight: 500; } :is(.appma-main, .appma-ui) .tagcheck input:checked + span { background: var(--gold-pale); border-color: var(--gold); color: #87590A; font-weight: 700; } :is(.appma-main, .appma-ui) .tagcheck input:focus-visible + span { outline: 3px solid var(--gold-light); outline-offset: 2px; } :is(.appma-main, .appma-ui) .pfilter__actions { display: flex; align-items: center; gap: 18px; margin-top: 18px; flex-wrap: wrap; } :is(.appma-main, .appma-ui) .pfilter__actions .btn__arrow { display: none; } :is(.appma-main, .appma-ui) .pfilter__clear { color: var(--navy); font-weight: 700; } :is(.appma-main, .appma-ui) .results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 34px 0 18px; } :is(.appma-main, .appma-ui) .results-bar__count { margin: 0; color: var(--ink); font-weight: 700; } :is(.appma-main, .appma-ui) .results-bar__count strong { margin-right: 2px; font-size: 26px; color: var(--navy); } :is(.appma-main, .appma-ui) .results-bar__sort { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); } :is(.appma-main, .appma-ui) .results-bar__sort select { width: auto; min-width: 170px; } @media (max-width: 899px) { :is(.appma-main, .appma-ui) .pfilter__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { :is(.appma-main, .appma-ui) .pfilter { padding: 16px; border-radius: 16px; margin-top: -48px; } :is(.appma-main, .appma-ui) .pfilter__kw .btn { padding-inline: 1em; } :is(.appma-main, .appma-ui) .pfilter__chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 2px 16px 6px; scrollbar-width: none; } :is(.appma-main, .appma-ui) .pfilter__chips::-webkit-scrollbar { display: none; } :is(.appma-main, .appma-ui) .pfilter__grid { grid-template-columns: minmax(0, 1fr); } } :is(.appma-main, .appma-ui) .pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } @media (max-width: 1023px) { :is(.appma-main, .appma-ui) .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { :is(.appma-main, .appma-ui) .pgrid { grid-template-columns: minmax(0, 1fr); gap: 18px; } } :is(.appma-main, .appma-ui) .pcard { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #E1E8F2; border-radius: 20px; box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .2s ease; } :is(.appma-main, .appma-ui) .pcard:hover { box-shadow: var(--shadow); transform: translateY(-3px); } :is(.appma-main, .appma-ui) .pcard__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #EEF2F8; text-decoration: none; } :is(.appma-main, .appma-ui) .pcard__media img { width: 100%; height: 100%; object-fit: contain; } :is(.appma-main, .appma-ui) .pcard__status { position: absolute; left: 14px; top: 14px; z-index: 2; padding: 4px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; background: #fff; color: var(--ink); box-shadow: 0 4px 10px rgba(0, 0, 0, .12); } :is(.appma-main, .appma-ui) .pcard__status--negotiating { background: #FFF1CC; color: #87590A; } :is(.appma-main, .appma-ui) .pcard__status--sold { background: #2E3A50; color: #fff; } :is(.appma-main, .appma-ui) .pcard.is-sold .pcard__media img, :is(.appma-main, .appma-ui) .pcard.is-sold .pthumb { filter: grayscale(.65); } :is(.appma-main, .appma-ui) .pcard__body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 22px; } :is(.appma-main, .appma-ui) .badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } :is(.appma-main, .appma-ui) .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 6px; font-size: 14px; font-weight: 700; line-height: 1.5; text-decoration: none; } :is(.appma-main, .appma-ui) .badge .icon { width: 15px; height: 15px; } :is(.appma-main, .appma-ui) .badge--exclusive { background: #FBF1DC; color: #87590A; border: 1px solid #E5C988; } :is(.appma-main, .appma-ui) .badge--license { background: #E8EFFA; color: #0A2F66; border: 1px solid #BFD0EB; } :is(.appma-main, .appma-ui) .badge--cat { background: #F1F4F9; color: var(--ink); border: 1px solid #DCE4EF; } :is(.appma-main, .appma-ui) a.badge--cat:hover { border-color: var(--navy); } :is(.appma-main, .appma-ui) .pcard__title { margin: 0 0 6px; font-size: 20px; line-height: 1.45; } :is(.appma-main, .appma-ui) .pcard__title a { color: var(--ink); text-decoration: none; } :is(.appma-main, .appma-ui) .pcard__title a:hover { text-decoration: underline; text-decoration-color: var(--gold); } :is(.appma-main, .appma-ui) .pcard__desc { margin-bottom: 12px; font-size: 16px; line-height: 1.75; color: var(--muted); } :is(.appma-main, .appma-ui) .pcard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; } :is(.appma-main, .appma-ui) .pcard__tags li { padding: 2px 10px; border-radius: 999px; background: #F1F4F9; color: #2B3D5C; font-size: 14px; } :is(.appma-main, .appma-ui) .pcard__price { display: grid; gap: 2px; margin: auto 0 16px; padding-top: 12px; border-top: 1px dashed var(--line); } :is(.appma-main, .appma-ui) .pcard__price div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } :is(.appma-main, .appma-ui) .pcard__price dt { color: var(--muted); font-size: 15px; font-weight: 700; } :is(.appma-main, .appma-ui) .pcard__price dd { margin: 0; color: var(--gold-dark); font-size: 22px; font-weight: 900; letter-spacing: .01em; } :is(.appma-main, .appma-ui) .pcard__price dd.is-ask { color: var(--ink); font-size: 16px; font-weight: 700; } :is(.appma-main, .appma-ui) .pcard__price .is-monthly dd { font-size: 17px; color: var(--ink); } :is(.appma-main, .appma-ui) .pcard__price small { font-size: 14px; font-weight: 700; margin-left: 2px; } :is(.appma-main, .appma-ui) .pcard__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 164px), 1fr)); gap: 8px; } :is(.appma-main, .appma-ui) .pcard__actions .btn { padding-inline: 5px; letter-spacing: 0; white-space: nowrap; } :is(.appma-main, .appma-ui) .pcard__actions .btn__arrow { display: none; } :is(.appma-main, .appma-ui) /* placeholder thumb */ .pthumb { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 100%; overflow: hidden; color: #fff; background: linear-gradient(135deg, #2C6FD1, #0A2F66); } :is(.appma-main, .appma-ui) .pthumb::before, :is(.appma-main, .appma-ui) .pthumb::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .12); } :is(.appma-main, .appma-ui) .pthumb::before { right: -12%; bottom: -36%; width: 62%; aspect-ratio: 1; } :is(.appma-main, .appma-ui) .pthumb::after { left: -10%; top: -30%; width: 40%; aspect-ratio: 1; background: rgba(255, 255, 255, .08); } :is(.appma-main, .appma-ui) .pthumb__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 24px; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45), 0 10px 24px rgba(0, 0, 0, .15); } :is(.appma-main, .appma-ui) .pthumb__icon .icon { width: 46px; height: 46px; } :is(.appma-main, .appma-ui) .pthumb__name { position: relative; z-index: 1; padding: 0 18px; font-size: 17px; font-weight: 900; line-height: 1.4; text-align: center; text-shadow: 0 1px 4px rgba(0, 0, 0, .25); } :is(.appma-main, .appma-ui) .pthumb--matching { background: linear-gradient(135deg, #EC5B96 0%, #9B2FB5 100%); } :is(.appma-main, .appma-ui) .pthumb--member { background: linear-gradient(135deg, #DDB052 0%, #B27809 100%); } :is(.appma-main, .appma-ui) .pthumb--reserve { background: linear-gradient(135deg, #F59E2B 0%, #D3540E 100%); } :is(.appma-main, .appma-ui) .pthumb--ec { background: linear-gradient(135deg, #2F8BEA 0%, #123C9C 100%); } :is(.appma-main, .appma-ui) .pthumb--community { background: linear-gradient(135deg, #1FB5C9 0%, #155E9E 100%); } :is(.appma-main, .appma-ui) .pthumb--business { background: linear-gradient(135deg, #2FA36B 0%, #135A3B 100%); } :is(.appma-main, .appma-ui) /* empty */ .empty { margin-top: 40px; padding: clamp(28px, 4vw, 48px) 24px; text-align: center; background: #fff; border: 2px dashed #C7D3E3; border-radius: 20px; } :is(.appma-main, .appma-ui) .empty--after { background: linear-gradient(180deg, #fff, var(--gold-pale)); border-color: #E5C988; } :is(.appma-main, .appma-ui) .empty__icon { width: 40px; height: 40px; color: var(--gold); margin-bottom: 8px; } :is(.appma-main, .appma-ui) .empty__title { font-size: 22px; margin-bottom: 8px; } :is(.appma-main, .appma-ui) .empty p { font-size: 16px; margin-bottom: 20px; } :is(.appma-main, .appma-ui) /* pagination */ .pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 40px; } :is(.appma-main, .appma-ui) .page-numbers { display: grid; place-items: center; min-width: 48px; height: 48px; padding: 0 14px; border: 1px solid #C7D3E3; border-radius: 10px; background: #fff; color: var(--ink); font-weight: 700; text-decoration: none; } :is(.appma-main, .appma-ui) .page-numbers.current { background: var(--navy); border-color: var(--navy); color: #fff; } :is(.appma-main, .appma-ui) .page-numbers.dots { border: 0; background: none; } :is(.appma-main, .appma-ui) /* ---------- product detail ---------- */ .pd-hero { padding: 24px 0 56px; background: linear-gradient(180deg, var(--bg-soft) 0%, #fff 100%); } :is(.appma-main, .appma-ui) .pd-hero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(28px, 4vw, 52px); align-items: start; } :is(.appma-main, .appma-ui) .pd-gallery__main { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 22px; background: #EEF2F8; box-shadow: var(--shadow); } .appma-main .pd-gallery__main:has(> img) { aspect-ratio: 4 / 3; } @media (max-width: 600px) { .appma-main .pd-gallery__main:has(> img) { aspect-ratio: 1; } } :is(.appma-main, .appma-ui) .pd-gallery__main > img { width: 100%; height: 100%; object-fit: contain; } :is(.appma-main, .appma-ui) .pd-gallery__main .pthumb__icon { width: 120px; height: 120px; border-radius: 30px; } :is(.appma-main, .appma-ui) .pd-gallery__main .pthumb__icon .icon { width: 62px; height: 62px; } :is(.appma-main, .appma-ui) .pd-gallery__main .pthumb__name { font-size: 24px; } :is(.appma-main, .appma-ui) .pd-gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; } :is(.appma-main, .appma-ui) .pd-gallery__thumbs button { flex: 0 0 96px; height: 64px; padding: 0; overflow: hidden; border: 3px solid transparent; border-radius: 12px; background: #E9EEF6; cursor: pointer; } :is(.appma-main, .appma-ui) .pd-gallery__thumbs button[aria-pressed="true"] { border-color: var(--gold); } :is(.appma-main, .appma-ui) .pd-gallery__thumbs img { width: 100%; height: 100%; object-fit: contain; } :is(.appma-main, .appma-ui) .pd-title { margin: 6px 0 10px; font-size: clamp(26px, 3vw, 38px); line-height: 1.35; } :is(.appma-main, .appma-ui) .pd-title__main { display: block; } :is(.appma-main, .appma-ui) .pd-title__sub { display: block; margin-top: 4px; font-size: 16px; font-weight: 700; letter-spacing: .1em; color: var(--gold-dark); } :is(.appma-main, .appma-ui) .pd-catch { margin-bottom: 14px; font-size: 18px; font-weight: 700; line-height: 1.7; color: var(--ink); } :is(.appma-main, .appma-ui) .pd-pricebox { margin: 18px 0; padding: 8px 24px 16px; background: #fff; border: 1px solid #E1E8F2; border-radius: 18px; box-shadow: var(--shadow-sm); } :is(.appma-main, .appma-ui) .pd-pricebox__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 14px 0; border-bottom: 1px dashed var(--line); } :is(.appma-main, .appma-ui) .pd-pricebox__row:last-of-type { border-bottom: 0; } :is(.appma-main, .appma-ui) .pd-pricebox__label { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; } :is(.appma-main, .appma-ui) .pd-pricebox__label .icon { width: 20px; height: 20px; color: var(--gold-dark); } :is(.appma-main, .appma-ui) .pd-pricebox__value { color: var(--gold-dark); font-size: clamp(26px, 2.6vw, 32px); font-weight: 900; line-height: 1.2; } :is(.appma-main, .appma-ui) .pd-pricebox__value.is-ask { color: var(--ink); font-size: 20px; } :is(.appma-main, .appma-ui) .pd-pricebox__value.is-sub { color: var(--ink); font-size: 22px; } :is(.appma-main, .appma-ui) .pd-pricebox__value small { font-size: 15px; margin-left: 2px; } :is(.appma-main, .appma-ui) .pd-pricebox__note { margin: 4px 0 0; font-size: 16px; color: var(--muted); } :is(.appma-main, .appma-ui) .pd-actions { display: grid; gap: 10px; } :is(.appma-main, .appma-ui) .pd-actions .btn { width: 100%; } :is(.appma-main, .appma-ui) .pd-actions--row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); max-width: 960px; margin-inline: auto; } .appma-main .pd-actions .pd-actions__contact { gap: 8px; padding-inline: 8px; white-space: nowrap; } .appma-main .pd-actions__contact .btn__arrow { display: none; } @media (max-width: 600px) { .appma-main .pd-actions .pd-actions__contact { font-size: 15px; } } @media (max-width: 360px) { .appma-main .pd-actions .pd-actions__contact { font-size: 14px; } } :is(.appma-main, .appma-ui) .pd-spec { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 22px 0 0; padding: 18px 20px; background: var(--bg-soft); border-radius: 14px; font-size: 16px; } :is(.appma-main, .appma-ui) .pd-spec:empty { display: none; } :is(.appma-main, .appma-ui) .pd-spec dt { color: var(--ink); font-weight: 700; } :is(.appma-main, .appma-ui) .pd-spec dd { margin: 0; } :is(.appma-main, .appma-ui) .pd-summary .notice { margin: 0 0 8px; } @media (max-width: 899px) { :is(.appma-main, .appma-ui) .pd-hero__grid { grid-template-columns: minmax(0, 1fr); } } :is(.appma-main, .appma-ui) .pd-tabs { position: sticky; top: var(--header-h); z-index: 50; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--line); box-shadow: 0 6px 14px rgba(6, 26, 55, .04); } .admin-bar :is(.appma-main, .appma-ui) .pd-tabs { top: calc(var(--header-h) + 32px); } @media (max-width: 782px) { .admin-bar :is(.appma-main, .appma-ui) .pd-tabs { top: calc(var(--header-h) + 46px); } } @media (max-width: 600px) { .admin-bar :is(.appma-main, .appma-ui) .pd-tabs { top: var(--header-h); } } :is(.appma-main, .appma-ui) .pd-tabs ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; } :is(.appma-main, .appma-ui) .pd-tabs ul::-webkit-scrollbar { display: none; } :is(.appma-main, .appma-ui) .pd-tabs a { display: block; padding: 14px 14px 12px; border-bottom: 3px solid transparent; color: var(--ink); font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; } :is(.appma-main, .appma-ui) .pd-tabs a:hover { border-color: var(--gold); color: var(--navy); } :is(.appma-main, .appma-ui) .pd-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 6vw, 72px); padding-block: clamp(40px, 5vw, 64px) clamp(56px, 7vw, 88px); } :is(.appma-main, .appma-ui) .pd-sec { scroll-margin-top: calc(var(--header-h) + 64px); } :is(.appma-main, .appma-ui) .pd-sec h2 { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 22px; padding-bottom: 12px; border-bottom: 2px solid var(--line); font-size: clamp(22px, 2.4vw, 28px); } :is(.appma-main, .appma-ui) .pd-sec h2::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 88px; height: 2px; background: var(--gold); } :is(.appma-main, .appma-ui) .pd-sec h2 .icon { width: 30px; height: 30px; color: var(--gold-dark); } :is(.appma-main, .appma-ui) .pd-sec > p { font-size: 17px; } :is(.appma-main, .appma-ui) .points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; } :is(.appma-main, .appma-ui) .points li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; background: var(--bg-soft); border: 1px solid #E3E9F2; border-radius: 14px; color: var(--ink); font-size: 17px; font-weight: 700; } :is(.appma-main, .appma-ui) .points__num { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gold-dark); color: #fff; font-size: 16px; font-weight: 900; } :is(.appma-main, .appma-ui) .funcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; } :is(.appma-main, .appma-ui) .funcs li { padding: 18px 20px; background: #fff; border: 1px solid #E3E9F2; border-radius: 14px; box-shadow: var(--shadow-sm); } :is(.appma-main, .appma-ui) .funcs strong { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 17px; } :is(.appma-main, .appma-ui) .funcs strong .icon { width: 22px; height: 22px; color: var(--gold-dark); } :is(.appma-main, .appma-ui) .funcs p { margin: 6px 0 0 30px; font-size: 16px; } :is(.appma-main, .appma-ui) .tag-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; } :is(.appma-main, .appma-ui) .tag-links a { display: inline-flex; min-height: 40px; align-items: center; padding: 4px 14px; border-radius: 999px; background: #F1F4F9; color: var(--ink); font-size: 15px; text-decoration: none; } :is(.appma-main, .appma-ui) .tag-links a:hover { background: var(--gold-pale); } :is(.appma-main, .appma-ui) .gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } :is(.appma-main, .appma-ui) .gallery-grid a { display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 14px; background: #EEF2F8; } :is(.appma-main, .appma-ui) .gallery-grid img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s; } :is(.appma-main, .appma-ui) .gallery-grid a:hover img { transform: scale(1.04); } :is(.appma-main, .appma-ui) .video { margin-top: 18px; overflow: hidden; border-radius: 18px; background: #000; aspect-ratio: 16 / 9; } :is(.appma-main, .appma-ui) .video iframe { width: 100%; height: 100%; border: 0; } :is(.appma-main, .appma-ui) .video__link { display: flex; align-items: center; justify-content: center; gap: 10px; height: 100%; color: #fff; font-size: 18px; font-weight: 700; } :is(.appma-main, .appma-ui) .video__link .icon { width: 40px; height: 40px; } :is(.appma-main, .appma-ui) .preview-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 20px 24px; background: #EEF3FA; border-radius: 16px; } :is(.appma-main, .appma-ui) .preview-box strong { color: var(--ink); font-size: 18px; } :is(.appma-main, .appma-ui) .preview-box p { margin: 2px 0 0; } :is(.appma-main, .appma-ui) .muted-box { padding: 20px 22px; background: var(--bg-soft); border-radius: 14px; } :is(.appma-main, .appma-ui) .pd-admin { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; } :is(.appma-main, .appma-ui) .pd-admin.has-img { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } :is(.appma-main, .appma-ui) .pd-admin p { font-size: 17px; } :is(.appma-main, .appma-ui) .pd-admin figure { margin: 0; overflow: hidden; border-radius: 16px; box-shadow: var(--shadow); } :is(.appma-main, .appma-ui) .pd-cta { padding: clamp(28px, 4vw, 44px); text-align: center; background: linear-gradient(180deg, var(--gold-pale), #fff); border: 1px solid #EAD7AE; border-radius: 22px; } @media (max-width: 420px) { .appma-main .pd-cta { padding-inline: 12px; } } :is(.appma-main, .appma-ui) .pd-cta__title { margin-bottom: 20px; color: var(--ink); font-size: clamp(19px, 2vw, 23px); font-weight: 900; } @media (max-width: 767px) { :is(.appma-main, .appma-ui) .points, :is(.appma-main, .appma-ui) .funcs { grid-template-columns: minmax(0, 1fr); } :is(.appma-main, .appma-ui) .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } :is(.appma-main, .appma-ui) .pd-admin.has-img { grid-template-columns: minmax(0, 1fr); } } :is(.appma-main, .appma-ui) /* ---------- forms ---------- */ .form { max-width: 900px; margin: 0 auto; padding: clamp(22px, 4vw, 48px); background: #fff; border: 1px solid #DCE4EF; border-radius: 22px; box-shadow: var(--shadow); } :is(.appma-main, .appma-ui) .form-row { display: grid; grid-template-columns: 230px 1fr; gap: 18px; margin: 0; padding: 18px 0; border: 0; border-bottom: 1px solid #EDF1F7; min-width: 0; } :is(.appma-main, .appma-ui) .form-label { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 8px; padding: 10px 0 0; color: var(--ink); font-size: 16px; font-weight: 700; float: left; } :is(.appma-main, .appma-ui) fieldset.form-row > .form-label { width: 100%; } :is(.appma-main, .appma-ui) .req, :is(.appma-main, .appma-ui) .opt { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 13px; font-weight: 700; line-height: 1.6; } :is(.appma-main, .appma-ui) .req { background: var(--danger); color: #fff; margin-left: 6px; } :is(.appma-main, .appma-ui) .opt { background: #E7ECF3; color: #34445E; } :is(.appma-main, .appma-ui) .form input[type="text"], :is(.appma-main, .appma-ui) .form input[type="email"], :is(.appma-main, .appma-ui) .form input[type="tel"], :is(.appma-main, .appma-ui) .form select, :is(.appma-main, .appma-ui) .form textarea { width: 100%; padding: 12px 14px; border: 2px solid #C7D3E3; border-radius: 10px; background: #FBFCFE; color: var(--ink); font-size: 16px; line-height: 1.6; } :is(.appma-main, .appma-ui) .form select { height: 52px; } :is(.appma-main, .appma-ui) .form input:focus, :is(.appma-main, .appma-ui) .form select:focus, :is(.appma-main, .appma-ui) .form textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(9, 40, 80, .12); background: #fff; } :is(.appma-main, .appma-ui) .form .has-error input, :is(.appma-main, .appma-ui) .form .has-error textarea, :is(.appma-main, .appma-ui) .form [aria-invalid="true"] { border-color: var(--danger); background: #FFF8F7; } :is(.appma-main, .appma-ui) .form-help { margin: 8px 0 0; font-size: 16px; color: var(--muted); } :is(.appma-main, .appma-ui) .choices { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 10px; } :is(.appma-main, .appma-ui) .choices label { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; color: var(--ink); cursor: pointer; } :is(.appma-main, .appma-ui) .form input[type="radio"], :is(.appma-main, .appma-ui) .form input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--navy); flex: none; } :is(.appma-main, .appma-ui) .field-error { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; color: var(--danger); font-size: 16px; font-weight: 700; } :is(.appma-main, .appma-ui) .field-error .icon { width: 18px; height: 18px; } :is(.appma-main, .appma-ui) .form-alert { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; padding: 16px 18px; background: #FDECEA; border: 1px solid #F3B6B0; border-radius: 12px; color: #8A1C14; font-weight: 700; } :is(.appma-main, .appma-ui) .form-alert .icon { width: 22px; height: 22px; margin-top: 3px; } :is(.appma-main, .appma-ui) .form-agree { padding: 26px 0 6px; text-align: center; } :is(.appma-main, .appma-ui) .form-agree label { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; color: var(--ink); cursor: pointer; } :is(.appma-main, .appma-ui) .form-agree .field-error { justify-content: center; } :is(.appma-main, .appma-ui) .form-submit { margin-top: 14px; text-align: center; } :is(.appma-main, .appma-ui) .form-submit .btn { min-width: min(100%, 380px); } :is(.appma-main, .appma-ui) .form--custom { max-width: 900px; } :is(.appma-main, .appma-ui) .contact-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin: 28px auto 0; padding: 0; list-style: none; } :is(.appma-main, .appma-ui) .contact-points li { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; } :is(.appma-main, .appma-ui) .contact-points .icon { width: 22px; height: 22px; color: var(--gold-dark); } :is(.appma-main, .appma-ui) .thanks { max-width: 760px; margin: 0 auto; padding: clamp(32px, 5vw, 56px) 24px; text-align: center; background: #fff; border-radius: 22px; box-shadow: var(--shadow); } :is(.appma-main, .appma-ui) .thanks__icon { width: 72px; height: 72px; margin-bottom: 10px; color: var(--gold); } :is(.appma-main, .appma-ui) .thanks__title { font-size: 26px; } :is(.appma-main, .appma-ui) .thanks p { font-size: 17px; } :is(.appma-main, .appma-ui) .thanks__note { color: var(--muted); } :is(.appma-main, .appma-ui) .thanks .btn-row { margin-top: 24px; } @media (max-width: 767px) { :is(.appma-main, .appma-ui) .form-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 0; } :is(.appma-main, .appma-ui) .form-label { padding-top: 0; } :is(.appma-main, .appma-ui) .form-agree label { font-size: 16px; text-align: left; } } :is(.appma-main, .appma-ui) /* ---------- entry (block content) ---------- */ .entry { max-width: 880px; margin-inline: auto; font-size: 17px; } :is(.appma-main, .appma-ui) .entry--spaced { margin-top: 40px; } :is(.appma-main, .appma-ui) .entry h2 { margin: 2em 0 .8em; padding-bottom: 10px; border-bottom: 2px solid var(--line); font-size: 24px; } :is(.appma-main, .appma-ui) .entry h3 { margin: 1.6em 0 .6em; font-size: 20px; } :is(.appma-main, .appma-ui) .entry ul, :is(.appma-main, .appma-ui) .entry ol { padding-left: 1.4em; } :is(.appma-main, .appma-ui) .entry img { border-radius: 12px; } :is(.appma-main, .appma-ui) .entry table { width: 100%; border-collapse: collapse; } :is(.appma-main, .appma-ui) .entry th, :is(.appma-main, .appma-ui) .entry td { padding: 12px; border: 1px solid var(--line); } :is(.appma-main, .appma-ui) .pd-sec .entry { max-width: none; margin: 0; } :is(.appma-main, .appma-ui) .entry__date { color: var(--muted); } :is(.appma-main, .appma-ui) .post-list { max-width: 880px; margin: 0 auto; padding: 0; list-style: none; } :is(.appma-main, .appma-ui) .post-list a { display: flex; gap: 20px; padding: 18px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; } :is(.appma-main, .appma-ui) .post-list time { flex: none; color: var(--muted); } /* ---------- 3. スマホ下部メニュー ---------- */ nav.bottom-nav.appma-ui { display: none; } @media (max-width: 899px) { body.appma-site { padding-bottom: calc(66px + env(safe-area-inset-bottom)); } nav.bottom-nav.appma-ui { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; background: rgba(255, 255, 255, .98); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(6, 26, 55, .08); padding-bottom: env(safe-area-inset-bottom); font-family: var(--font-sans); } nav.bottom-nav.appma-ui ul { display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; margin: 0; padding: 0; } nav.bottom-nav.appma-ui li { margin: 0; } nav.bottom-nav.appma-ui a, nav.bottom-nav.appma-ui button, nav.bottom-nav.appma-ui button:hover, nav.bottom-nav.appma-ui button:focus { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-height: 64px; margin: 0; padding: 6px 2px; border: 0; border-radius: 0; background: none; box-shadow: none; cursor: pointer; color: var(--ink); font-family: var(--font-sans); font-size: min(12px, 3.1vw); font-weight: 700; line-height: 1.3; text-decoration: none; letter-spacing: 0; white-space: nowrap; } nav.bottom-nav.appma-ui .icon { width: 24px; height: 24px; flex: none; } nav.bottom-nav.appma-ui a[aria-current="page"] { color: var(--blue); } nav.bottom-nav.appma-ui .bottom-nav__circle { display: grid; place-items: center; width: 44px; height: 44px; margin-top: -18px; border-radius: 50%; color: #fff; background: var(--gold-grad); box-shadow: 0 6px 14px rgba(183, 122, 11, .35), 0 0 0 4px #fff; } nav.bottom-nav.appma-ui .bottom-nav__cta a { color: var(--gold-dark); } } /* ---------- 3. フッター ---------- */ footer.appma-footer { position: relative; margin: 0; padding: 64px 0 28px; background: var(--navy-deep); color: #DCE5F2; font-size: 16px; line-height: 1.85; } footer.appma-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, rgba(226, 178, 76, 0), var(--gold-light), rgba(226, 178, 76, 0)); } footer.appma-footer .footer-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; } footer.appma-footer .footer-logo img { display: block; height: 60px; width: auto; } footer.appma-footer .footer-tag { margin: 20px 0 6px; color: #fff; font-size: 16px; font-weight: 700; } footer.appma-footer .footer-desc { margin: 0; font-size: 16px; line-height: 1.9; } footer.appma-footer .footer-cta { margin-top: 22px; } footer.appma-footer .footer-nav__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 28px; margin: 0; padding: 0; list-style: none; } footer.appma-footer .footer-nav__list li { margin: 0; } footer.appma-footer .footer-nav__list a { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); color: #fff; font-size: 16px; text-decoration: none; } footer.appma-footer .footer-nav__list a::before { content: ""; width: 7px; height: 7px; border-top: 2px solid var(--gold-light); border-right: 2px solid var(--gold-light); transform: rotate(45deg); flex: none; } footer.appma-footer .footer-nav__list a:hover { color: var(--gold-light); } footer.appma-footer .footer-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 14px; } footer.appma-footer .footer-legal ul { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; } footer.appma-footer .footer-legal a { color: #DCE5F2; } footer.appma-footer .copyright { margin: 0; color: #C3CFE1; } @media (max-width: 899px) { footer.appma-footer { padding-top: 48px; } footer.appma-footer .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; } } /* Astra「トップへ戻る」ボタン */ .appma-site #ast-scroll-top { background-color: var(--navy); color: #fff; border-radius: 10px; } .appma-site #ast-scroll-top:hover { background-color: var(--navy-deep); } @media (max-width: 899px) { .appma-site #ast-scroll-top { bottom: calc(80px + env(safe-area-inset-bottom)); } } /* ========================================================== トップページ（.fp） ========================================================== */ .fp .section { padding-block: clamp(52px, 5.6vw, 84px); } .fp .sec-head { margin-bottom: clamp(26px, 3vw, 40px); } /* ---------- メインビジュアル ---------- */ .fp .fp-hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; background: radial-gradient(30% 62% at 86% 40%, rgba(196, 220, 252, .62) 0%, rgba(140, 182, 240, .26) 46%, rgba(80, 135, 220, 0) 78%), radial-gradient(55% 85% at 68% 0%, rgba(38, 108, 210, .5), rgba(38, 108, 210, 0) 70%), linear-gradient(104deg, #061A37 0%, #092850 36%, #0C3A7A 66%, #15589F 100%); } .fp .fp-hero__inner { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: 20px; align-items: center; min-height: clamp(560px, 44vw, 660px); padding-block: 44px 60px; } .fp .fp-hero__text { position: relative; z-index: 2; container-type: inline-size; } .fp .fp-hero__label { margin: 0 0 22px; } .fp .fp-hero__label span { display: inline-block; padding: 7px 34px 7px 24px; background: #fff; color: var(--navy); font-size: 15px; font-weight: 700; line-height: 1.6; letter-spacing: .06em; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); } .fp .fp-hero__title { margin: 0 0 20px; color: #fff; font-size: clamp(30px, 3.25vw, 48px); font-weight: 900; line-height: 1.34; letter-spacing: .02em; text-shadow: 0 4px 18px rgba(0, 10, 30, .3); } .fp .fp-hero__accent { display: inline-block; margin-top: .08em; font-size: 1em; font-size: min(1.14em, 7.5cqi); line-height: 1.25; white-space: nowrap; background: linear-gradient(180deg, #FFF2CC 0%, #F8D683 46%, #E8B44A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 3px 10px rgba(0, 10, 30, .35)); } .fp .fp-hero__sub { margin: 0 0 12px; color: #fff; font-size: clamp(18px, 1.55vw, 22px); font-weight: 700; line-height: 1.6; } .fp .fp-hero__lead { max-width: 35em; margin: 0 0 30px; color: #E4ECF8; font-size: 16px; line-height: 1.95; } .fp .fp-hero__lead--sp { display: none; } .fp .fp-hero__btns { gap: 14px; } .fp .fp-hero__btns .btn { min-width: 248px; } /* 画像：正方形の枠（stage）の中に、左＝スマホ画像とカテゴリー、右＝人物を重ならない比率で配置 */ .fp .fp-hero__visual { position: relative; align-self: stretch; display: flex; align-items: flex-end; margin-block: -44px -60px; } .fp .fp-hero__stage { position: relative; flex: none; width: 100%; aspect-ratio: 1 / 1; } .fp .fp-hero__arcs { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; } .fp .fp-hero__glow { position: absolute; right: -2%; top: 4%; width: 60%; aspect-ratio: 1; border-radius: 50%; z-index: 0; background: radial-gradient(circle, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .1) 45%, rgba(255, 255, 255, 0) 70%); } .fp .fp-hero__woman { position: absolute; right: -7%; bottom: 0; z-index: 1; width: 57%; height: auto; max-width: none; } .fp .fp-hero__apps { position: absolute; left: 0; bottom: 5%; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 50%; } .fp .fp-hero__phones { display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 30px rgba(0, 8, 28, .45)); } .fp .fp-hero__cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 76%; margin: 4% 0 0; padding: 0; list-style: none; } .fp .fp-hero__cats li { margin: 0; } .fp .fp-hero__cats a { display: block; border-radius: 50%; transition: transform .2s ease; filter: drop-shadow(0 8px 14px rgba(0, 8, 28, .4)); } .fp .fp-hero__cats a:hover { transform: translateY(-4px); } .fp .fp-hero__cats img { display: block; width: 100%; height: auto; } @media (max-width: 1199px) { .fp .fp-hero__btns .btn { min-width: 0; } .fp .fp-hero__cats { gap: 8px; width: 84%; } } @media (max-width: 1023px) { .fp .fp-hero { background: radial-gradient(60% 40% at 78% 74%, rgba(196, 220, 252, .5) 0%, rgba(140, 182, 240, .2) 50%, rgba(80, 135, 220, 0) 80%), linear-gradient(160deg, #061A37 0%, #092850 40%, #0C3A7A 75%, #15589F 100%); } .fp .fp-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 8px; min-height: 0; padding-block: 36px 0; } .fp .fp-hero__visual { display: block; width: 100%; max-width: 560px; margin: 0 auto; } .fp .fp-hero__woman { right: -16%; width: 58%; } .fp .fp-hero__apps { bottom: 3%; width: 54%; } .fp .fp-hero__cats { gap: 6px; width: 96%; } .fp .fp-hero__glow { right: -8%; top: 0; width: 66%; } } @media (max-width: 600px) { .fp .fp-hero__label span { padding: 6px 26px 6px 18px; font-size: 13px; } .fp .fp-hero__label { margin-bottom: 16px; } .fp .fp-hero__title { font-size: clamp(27px, 8vw, 32px); margin-bottom: 14px; } .fp .fp-hero__accent { font-size: 1.14em; } .fp .fp-hero__sub { font-size: 17px; } .fp .fp-hero__lead { margin-bottom: 22px; } .fp .fp-hero__lead--pc { display: none; } .fp .fp-hero__lead--sp { display: block; } .fp .fp-hero__btns { flex-direction: column; } .fp .fp-hero__btns .btn { width: 100%; } } /* ---------- 5つのメリット ---------- */ .fp .fp-merits { background: linear-gradient(180deg, #F4F7FC 0%, #FFFFFF 100%); } .fp .fp-merits__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } .fp .fp-merit { display: flex; flex-direction: column; align-items: center; padding: 10px 10px 24px; background: #fff; border: 1px solid #E3E9F2; border-radius: 18px; box-shadow: var(--shadow-sm); text-align: center; } .fp .fp-merit__img { width: 100%; overflow: hidden; border-radius: 12px; aspect-ratio: 16 / 10; } .fp .fp-merit__img img { width: 100%; height: 100%; object-fit: cover; } .fp .fp-merit__icon { position: relative; display: grid; place-items: center; align-self: flex-start; width: 58px; height: 58px; margin: -30px 0 8px 14px; border-radius: 50%; background: #fff; color: var(--gold); border: 2px solid #EED7A6; box-shadow: 0 6px 16px rgba(6, 26, 55, .14); } .fp .fp-merit__icon .icon { width: 28px; height: 28px; } .fp .fp-merit__title { margin: 0 0 8px; padding-inline: 6px; color: var(--navy); font-size: 19px; font-weight: 900; line-height: 1.45; } .fp .fp-merit p { text-align: left; margin: 0; padding-inline: 8px; font-size: 16px; line-height: 1.8; color: var(--text); } @media (max-width: 1199px) { .fp .fp-merits__grid { display: flex; flex-wrap: wrap; justify-content: center; } .fp .fp-merit { flex: 0 1 calc((100% - 36px) / 3); } } @media (max-width: 767px) { .fp .fp-merit { flex-basis: calc((100% - 18px) / 2); } } @media (max-width: 600px) { .fp .fp-merits__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .fp .fp-merit { display: grid; grid-template-columns: 100px minmax(0, 1fr); grid-template-areas: "img title" "img text"; align-items: start; gap: 4px 14px; padding: 12px 14px 12px 12px; text-align: left; } .fp .fp-merit__img { grid-area: img; aspect-ratio: 1; align-self: stretch; height: 100%; min-height: 100px; } .fp .fp-merit__icon { display: none; } .fp .fp-merit__title { grid-area: title; margin: 2px 0 0; padding: 0; font-size: 17px; } .fp .fp-merit p { grid-area: text; padding: 0; } } /* ---------- 2つの販売方式 ---------- */ .fp .fp-sales { padding-top: 0; } .fp .fp-sales__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .fp .fp-sale { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; min-height: 300px; border-radius: 22px; color: #fff; box-shadow: var(--shadow); } .fp .fp-sale__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: right center; } .fp .fp-sale::before { content: ""; position: absolute; inset: 0; z-index: -1; } .fp .fp-sale--gold::before { background: linear-gradient(90deg, rgba(166, 108, 6, .97) 0%, rgba(186, 128, 18, .86) 44%, rgba(205, 150, 40, 0) 76%); } .fp .fp-sale--navy::before { background: linear-gradient(90deg, rgba(6, 26, 55, .95) 0%, rgba(10, 47, 102, .78) 44%, rgba(10, 47, 102, 0) 74%); } .fp .fp-sale__body { width: 64%; padding: 34px 20px 34px 38px; } .fp .fp-sale__title { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; color: #fff; font-size: clamp(26px, 2.3vw, 34px); font-weight: 900; line-height: 1.3; } .fp .fp-sale__title .icon { width: 40px; height: 40px; stroke-width: 1.8; } .fp .fp-sale--gold .fp-sale__title .icon { color: #FFE3A0; } .fp .fp-sale--navy .fp-sale__title .icon { color: #BFD7FF; } .fp .fp-sale__text { margin: 0 0 22px; color: #fff; font-size: 16px; line-height: 1.85; text-shadow: 0 1px 2px rgba(20, 14, 0, .28); } .fp .fp-sale__text strong { display: block; font-size: 17px; } .fp .fp-sale .btn { min-height: 50px; padding-inline: 1.6em; } .fp .fp-sale--gold .btn { color: #8A5A06; } @media (max-width: 1023px) { .fp .fp-sales__grid { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; } } @media (max-width: 600px) { /* スマホ：画像の上にタイトル、その下に説明とボタン */ .fp .fp-sales__grid { gap: 18px; } .fp .fp-sale { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; min-height: 0; } .fp .fp-sale__bg { position: relative; z-index: -2; grid-area: 1 / 1; height: 176px; object-position: 70% center; } .fp .fp-sale::before { inset: 0 0 auto; height: 176px; } .fp .fp-sale--gold { background: linear-gradient(160deg, #AE7408 0%, #C08616 100%); } .fp .fp-sale--navy { background: linear-gradient(160deg, #0A2F66 0%, #0F3F86 100%); } .fp .fp-sale--gold::before { background: linear-gradient(90deg, rgba(118, 72, 0, .85) 0%, rgba(118, 72, 0, .28) 85%); } .fp .fp-sale--navy::before { background: linear-gradient(90deg, rgba(6, 26, 55, .92) 0%, rgba(6, 26, 55, .22) 85%); } .fp .fp-sale__body { display: contents; } .fp .fp-sale__title { grid-area: 1 / 1; align-self: center; margin: 0; padding: 0 20px; text-align: left; font-size: 26px; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); } .fp .fp-sale__title .icon { width: 32px; height: 32px; } .fp .fp-sale__text { margin: 0; padding: 16px 20px 18px; } .fp .fp-sale .btn { width: auto; margin: 0 20px 22px; } } /* ---------- カテゴリー ---------- */ .fp .fp-cats { background: linear-gradient(180deg, #FFFFFF 0%, #F3F6FB 100%); padding-top: 0; } .fp .fp-cats__hint { margin: 0 0 8px; color: var(--muted); font-size: 14px; text-align: right; } .fp .fp-cats__grid { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(240px, 26%, 340px); gap: 16px; overflow-x: auto; margin: 0; padding: 6px 4px 16px; list-style: none; scroll-snap-type: x proximity; scroll-padding-inline: 4px; scrollbar-color: var(--navy) #E3E9F2; } .fp .fp-cats__grid:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; } .fp .fp-cats__grid li { margin: 0; scroll-snap-align: start; } .fp .fp-cat { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #fff; border: 1px solid #E3E9F2; border-radius: 16px; box-shadow: var(--shadow-sm); color: var(--text); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; } .fp .fp-cat:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: var(--text); } .fp .fp-cat__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; } .fp .fp-cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .fp .fp-cat:hover .fp-cat__img img { transform: scale(1.05); } .fp .fp-cat__body { display: block; padding: 14px 14px 18px; } .fp .fp-cat__name { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; color: var(--ink); font-size: 16px; font-weight: 900; line-height: 1.4; } .fp .fp-cat__name .icon { width: 20px; height: 20px; stroke-width: 2.2; } .fp .fp-cat--matching .icon { color: #E0457B; } .fp .fp-cat--member .icon { color: #C98A12; } .fp .fp-cat--reserve .icon { color: #1F6FD1; } .fp .fp-cat--ec .icon { color: #E07B12; } .fp .fp-cat--community .icon { color: #1F86D1; } .fp .fp-cat--business .icon { color: var(--navy); } .fp .fp-cat__desc { display: block; font-size: 16px; line-height: 1.7; color: var(--muted); } @media (max-width: 600px) { .fp .fp-cats__grid { grid-auto-columns: 85%; gap: 12px; } } /* ---------- 購入前の確認・購入から運営まで ---------- */ .fp .fp-before-section { background: #fff; } .fp .fp-flow-section { background: #F4F7FC; } .fp .fp-eyebrow { margin: 0 0 4px; color: var(--gold-dark); font-size: 14px; font-weight: 700; letter-spacing: .16em; } .fp .fp-h2 { margin: 0 0 12px; color: var(--navy); font-size: clamp(22px, 1.75vw, 26px); font-weight: 900; line-height: 1.45; } .fp .fp-before { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 68px); align-items: center; } .fp .fp-before__img { overflow: hidden; border-radius: 16px; box-shadow: var(--shadow-sm); aspect-ratio: 3 / 2; } .fp .fp-before__img img { width: 100%; height: 100%; object-fit: cover; } .fp .fp-before__body p { margin: 0 0 16px; font-size: 16px; } .fp .fp-before__tags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .fp .fp-before__tags li { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 10px 4px; background: #EEF3FA; border-radius: 12px; color: var(--navy); font-size: 15px; font-weight: 700; line-height: 1.4; text-align: center; } .fp .fp-before__tags .icon { width: 26px; height: 26px; color: var(--blue); } .fp .fp-flow > p { margin: 0 0 18px; font-size: 16px; } .fp .fp-flow__list { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: none; } .fp .fp-flow__item { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0; padding: 14px 2px 12px; background: #fff; border: 1px solid #E3E9F2; border-radius: 14px; box-shadow: var(--shadow-sm); text-align: center; } .fp .fp-flow__item:not(:last-child)::after { content: ""; position: absolute; right: -7px; top: 50%; width: 7px; height: 7px; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); transform: translateY(-50%) rotate(45deg); } .fp .fp-flow__icon { width: 28px; height: 28px; margin-bottom: 4px; color: var(--gold); } .fp .fp-flow__num { display: block; color: var(--navy); font-family: var(--font-serif); font-size: 20px; font-weight: 900; line-height: 1.1; } .fp .fp-flow__label { display: block; margin-top: 4px; color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.4; } .fp .fp-flow__link { margin: 18px 0 0; } .fp .fp-flow__label br { display: none; } @media (max-width: 1023px) { .fp .fp-flow__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fp .fp-flow__item::after { display: none; } } @media (max-width: 767px) { .fp .fp-before { grid-template-columns: minmax(0, 1fr); gap: 20px; } } @media (max-width: 600px) { .fp .fp-flow__list { grid-template-columns: minmax(0, 1fr); gap: 10px; } .fp .fp-flow__item { flex-direction: row; gap: 12px; padding: 12px 16px; text-align: left; } .fp .fp-flow__icon { order: 2; margin: 0; width: 26px; height: 26px; } .fp .fp-flow__num { order: 1; width: 30px; font-size: 20px; } .fp .fp-flow__label { order: 3; margin: 0; } .fp .fp-flow__item:not(:last-child)::after { display: block; right: auto; left: 27px; top: auto; bottom: -8px; transform: rotate(135deg); } } /* ========================================================== 共通の追加・調整 ========================================================== */ .appma-main .pc-only { display: inline; } @media (max-width: 600px) { .appma-main .pc-only { display: none; } } /* ロゴ横のサイト説明（広い画面のみ） */ .appma-site #masthead .appma-tagline { display: none; } @media (min-width: 1400px) { .appma-site #ast-desktop-header .site-branding, .appma-site #ast-desktop-header .ast-site-identity { display: flex; align-items: center; } .appma-site #ast-desktop-header .appma-tagline { display: inline-block; margin-left: 16px; padding-left: 16px; border-left: 1px solid #D5DCE8; color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: .04em; white-space: nowrap; } } /* 下層ページの見出し：背景を切り抜いた画像（運営会社） */ .appma-main .phero--cutout .phero__img { align-self: end; overflow: visible; width: 100%; max-width: 340px; justify-self: end; margin-bottom: -48px; border: 0; border-radius: 0; box-shadow: none; aspect-ratio: auto; } .appma-main .phero--cutout .phero__img img { height: auto; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0, 8, 28, .35)); } /* 相談エリア（デザイン案に合わせてビルをはっきり表示） */ .appma-main .cta { background: linear-gradient(105deg, #061A37 0%, #0A2F66 48%, #0E4791 100%); } .appma-main .cta::before { content: ""; position: absolute; z-index: -1; right: -8%; bottom: calc(100% - 48px); width: 62%; height: 640px; border-radius: 50%; border-bottom: 3px solid rgba(233, 196, 111, .75); pointer-events: none; } .appma-main .cta__city { height: 92%; opacity: .92; } .appma-main .cta__city--l { left: -2%; -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent); mask-image: linear-gradient(90deg, #000 55%, transparent); } .appma-main .cta__city--r { right: -2%; -webkit-mask-image: linear-gradient(270deg, #000 55%, transparent); mask-image: linear-gradient(270deg, #000 55%, transparent); } .appma-main .cta__inner { position: relative; } .appma-main .cta__title { text-shadow: 0 4px 18px rgba(0, 10, 30, .4); } .appma-main .cta__text { text-shadow: 0 2px 10px rgba(0, 10, 30, .4); } @media (max-width: 1199px) { .appma-main .cta__city { height: 70%; opacity: .55; } } @media (max-width: 600px) { .appma-main .cta__city { height: 46%; opacity: .4; } .appma-main .cta::before { right: -30%; width: 160%; height: 420px; bottom: calc(100% - 36px); } } /* 金色のボタン：白い文字が読みやすいよう、ごく薄い影を付ける */ :is(.appma-main, .appma-ui) .btn-gold, .appma-site #masthead .main-header-menu > .appma-menu-cta > .menu-link, .appma-site .ast-mobile-popup-drawer .main-header-menu > .appma-menu-cta > .menu-link { text-shadow: 0 1px 1px rgba(110, 70, 0, .35); }