/* ===================================================== Tochoji Base CSS (共通レイアウト & コンポーネント) - 依存: /css/tochoji-colors.css （カラーパレット） - ページ側でまたはを付与 ===================================================== */ /* -------------------- 1) Semantic tokens -------------------- */ :root { /* 内部ページ（会員サイト内）をデフォルトとする */ --bg: var(--gray-100); --surface: var(--white); --text: var(--gray-500); --muted: #6b7a88; --border: var(--gray-300); --primary: var(--purple-300); --primary-hover: var(--purple-400); --link: var(--purple-300); --accent: var(--gold-400); --radius-sm: 10px; --radius: 14px; --radius-pill: 28px; --shadow-sm: 0 4px 14px rgba(0,0,0,.06); --shadow: 0 8px 24px rgba(10,52,84,.12); /* タイポ & スペーシングスケール */ --fz-12: 12px; --fz-13: 13px; --fz-14: 14px; --fz-16: 16px; --fz-18: 18px; --fz-20: 20px; --fz-24: 24px; --fz-28: 28px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-14: 14px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-28: 28px; --space-32: 32px; --space-40: 40px; --container: 960px; } /* ログイン画面（外側世界）テーマ */ body.theme-login { --bg: var(--blue-100); --surface: var(--white); --text: var(--gray-500); --border: var(--gray-300); --primary: var(--blue-500); --primary-hover: var(--blue-400); --link: var(--blue-400); } /* 内部テーマ（明示したい場合） */ body.theme-inner { --bg: var(--gray-100); --surface: var(--white); --text: var(--gray-500); --border: var(--gray-300); --primary: var(--purple-300); --primary-hover: var(--purple-400); --link: var(--purple-300); } /* -------------------- 2) Base reset & typography -------------------- */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; letter-spacing: .02em; line-height: 1.7; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { margin: 0 0 var(--space-12); font-weight: 700; } h1 { font-size: clamp(22px, 4vw, var(--fz-28)); } h2 { font-size: clamp(18px, 3.2vw, var(--fz-24)); } h3 { font-size: clamp(16px, 3vw, var(--fz-20)); } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-16); } .section { margin: var(--space-24) 0; } /* -------------------- 3) Card & panel -------------------- */ .card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-16); } .card--soft { box-shadow: var(--shadow-sm); } .section-title { display: flex; align-items: center; gap: var(--space-8); font-weight: 700; font-size: var(--fz-16); } .section-title::before { content: ""; width: 8px; height: 16px; border-radius: 2px; background: var(--accent); } /* -------------------- 4) Buttons -------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; border: 0; text-decoration: none; height: 48px; padding: 0 var(--space-16); border-radius: var(--radius-pill); font-weight: 700; letter-spacing: .04em; transition: background-color .2s ease, box-shadow .2s ease, opacity .2s ease; } /* aタグでも下線を消す */ a.btn, a.btn:link, a.btn:visited, a.btn:hover, a.btn:active { text-decoration: none; } .btn--primary { background: var(--primary); color: #fff; box-shadow: var(--shadow); } .btn--primary:hover { background: var(--primary-hover); } a.btn--primary, a.btn--primary:link, a.btn--primary:visited, a.btn--primary:hover, a.btn--primary:active { color: #fff; } .btn--secondary { background: var(--gray-200); color: var(--gray-400); } a.btn--secondary, a.btn--secondary:link, a.btn--secondary:visited, a.btn--secondary:hover, a.btn--secondary:active { color: var(--gray-400); } .btn--ghost { background: transparent; color: var(--link); } a.btn--ghost, a.btn--ghost:link, a.btn--ghost:visited, a.btn--ghost:hover, a.btn--ghost:active { color: var(--link); } .btn--block { display: flex; width: 100%; } /* -------------------- 5) Forms -------------------- */ .field { margin: var(--space-16) 0; } .label { display:block; font-size: var(--fz-14); font-weight: 700; color: var(--primary); margin-bottom: var(--space-8); } .input, select, textarea { width: 100%; height: 48px; padding: 0 var(--space-16); border-radius: var(--radius-pill); border: 1.2px solid var(--border); background: var(--white); color: var(--text); outline: none; transition: border-color .15s ease, box-shadow .15s ease; box-shadow: inset 0 1px 0 rgba(0,0,0,.03); font-size: 16px; margin-bottom: 10px; } textarea { height: auto; padding: var(--space-12) var(--space-16); border-radius: var(--radius); min-height: 110px; resize: vertical; } .input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(133, 51, 255, .18); border-color: var(--purple-200); } .hint { color: var(--muted); font-size: var(--fz-12); margin-top: var(--space-6); } .badge-required { display:inline-block; padding: 2px 8px; border-radius: 999px; background: var(--purple-100); color: var(--purple-400); font-size: var(--fz-12); font-weight: 700; } .badge-optional { display:inline-block; padding: 2px 8px; border-radius: 999px; background: var(--gold-100); color: var(--gold-500); font-size: var(--fz-12); font-weight: 700; } .checkline { display:flex; align-items:center; gap: 10px; } .radio-list, .check-list { display:grid; gap: var(--space-10); } .field select { appearance: none; /* 矢印を消す */ -webkit-appearance: none; -moz-appearance: none; padding-right: 44px; /* 矢印用の余白 */ box-sizing: border-box; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; /* ここで “右から12px” を調整 */ } /* セレクトや数値のスリム版 */ .select-slim, .input-slim { height: 40px; border-radius: 12px; } /* エラー */ .form-error { display:none; background:#fff3f3; border:1px solid #f2c0c0; color:#a12828; padding:10px 12px; border-radius:12px; font-size:14px; } /* -------------------- 6) Stepper (1→4) -------------------- */ .stepper { display:flex; gap: var(--space-16); align-items:center; font-size: var(--fz-14); } .stepper__item { display:flex; align-items:center; gap: var(--space-8); color: var(--muted); } .stepper__num { width: 28px; height: 28px; border-radius: 999px; display:grid; place-items:center; border:1px solid var(--border); background: var(--white); } .stepper__item.is-active { color: var(--primary); } .stepper__item.is-active .stepper__num { background: var(--primary); color:#fff; border-color: transparent; } /* -------------------- 7) Tiles (人物/檀家などのリスト項目) -------------------- */ .tile { display:flex; align-items:center; gap: var(--space-12); padding: var(--space-12); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .tile + .tile { margin-top: var(--space-10); } .tile__avatar { width: 40px; height: 40px; border-radius: 999px; background: var(--gold-100); display:grid; place-items:center; color: var(--gold-500); font-weight: 700; } .tile__title { font-weight: 700; } .tile__sub { color: var(--muted); font-size: var(--fz-13); } /* -------------------- 8) Hero / banner -------------------- */ .hero { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .hero__img { width: 100%; height: auto; display:block; } .hero__body { background: var(--surface); padding: var(--space-16); } /* -------------------- 9) Utility -------------------- */ .mt-0{margin-top:0}.mt-8{margin-top:var(--space-8)}.mt-12{margin-top:var(--space-12)}.mt-16{margin-top:var(--space-16)}.mt-24{margin-top:var(--space-24)}.mt-32{margin-top:var(--space-32)} .mb-0{margin-bottom:0}.mb-8{margin-bottom:var(--space-8)}.mb-12{margin-bottom:var(--space-12)}.mb-16{margin-bottom:var(--space-16)}.mb-24{margin-bottom:var(--space-24)}.mb-32{margin-bottom:var(--space-32)} .p-16{padding:var(--space-16)}.p-20{padding:var(--space-20)}.p-24{padding:var(--space-24)} .grid{display:grid; gap: var(--space-16)} .center{display:grid; place-items:center} .hide{display:none} .show{display:block} /* -------------------- 10) Responsive tweaks -------------------- */ @media (min-width: 960px) { :root { --container: 1080px; } .btn{ height: 52px; } .container { max-width: 1080px; margin-left: auto; margin-right: auto; } } /* -------------------- 11) icon -------------------- */ .menu-icon { width: 36px; height: 36px; flex-shrink: 0; } @media (min-width: 960px) { .menu-icon { width: 40px; height: 40px; } } /* -------------------- 12) header -------------------- */ /* ページヘッダー（ログイン前）水色 */ header.page-header { padding: 16px 16px 6px; background: var(--blue-100); } .logo { display:flex; justify-content:center; align-items:center; } .logo__img { width:180px; height:auto; } @media (min-width:720px){ .logo__img { width:220px; } } /* サイトヘッダー（ログイン後）ベージュ色 */ .site-header { position: sticky; top: 0; z-index: 10; background: var(--gold-100); border-bottom: none; } .site-header__inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 10px 16px; max-width: var(--container); margin: 0 auto; } .site-logo { display:flex; align-items:center; gap: 12px; } .site-logo img { width: 140px; height: auto; } .user-tools { display:flex; align-items:center; gap: 12px; } .user-name { font-weight:700; font-size: var(--fz-14); color: var(--gray-500); } .btn-logout { height: 36px; padding: 0 14px; border-radius: 18px; background: var(--gold-500); color: var(--white); text-decoration: none; display:flex; align-items:center; font-weight:700; transition: background .25s ease; } .btn-logout:hover { background: var(--gold-400); } @media (min-width: 960px) { .site-logo img { width: 170px; } } /* -------------------- 13) footer -------------------- */ .site-footer { color: var(--muted); font-size: var(--fz-12); padding: 28px 16px; text-align: center; } .site-footer a { color: var(--muted); text-decoration: underline; }