/*
* ============================================================
* 東京調剤センター デザインシステム
* design-system.css v1.1
*
* v1.1 変更点：シャドウをブランドカラーなし・薄い黒に変更
*
* 使い方：
* 全ページの で最初に読み込む
*
* ============================================================
*/
/* ============================================================
* Google Fonts 読み込み（HTML側 に追記すること）
*
*
*
*
* ============================================================ */
:root {
/* ============================================================
* 1. カラーパレット
* ============================================================ */
/* --- ブランドカラー --- */
--color-brand-primary: #50becb;
--color-brand-primary-dark: #3aa4b0;
--color-brand-primary-light: #d6f2f5;
--color-brand-primary-pale: #eef9fa;
--color-brand-yellow: #f8f7cf;
--color-brand-yellow-dark: #e8e6a0;
/* --- テキストカラー --- */
--color-text-primary: #333333;
--color-text-secondary: #666666;
--color-text-tertiary: #999999;
--color-text-inverse: #ffffff;
--color-text-link: #3aa4b0;
--color-text-link-hover: #2d8a96;
/* --- 背景カラー --- */
--color-bg-white: #ffffff;
--color-bg-light: #f7f9f9;
--color-bg-pale: #eef9fa;
/* --- UI カラー --- */
--color-border: #e0e8e8;
--color-border-light: #edf3f3;
--color-divider: #d8e4e4;
/* --- ステータスカラー --- */
--color-success: #4caf7d;
--color-success-light: #e8f8ef;
--color-warning: #f5a623;
--color-warning-light: #fef6e4;
--color-error: #e05555;
--color-error-light: #fdeaea;
--color-info: #50becb;
--color-info-light: #eef9fa;
/* --- オーバーレイ --- */
--color-overlay: rgba(0, 0, 0, 0.45);
--color-overlay-light: rgba(0, 0, 0, 0.18);
/* ============================================================
* 2. タイポグラフィ
* ============================================================ */
--font-base: "M PLUS 1", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Meiryo", sans-serif;
--font-heading: "M PLUS Rounded 1c", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Meiryo", sans-serif;
--font-mono: "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
/* フォントサイズスケール（モバイルファースト） */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-md: 1.0625rem; /* 17px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.75rem; /* 28px */
--text-4xl: 2rem; /* 32px */
--text-5xl: 2.5rem; /* 40px */
--text-6xl: 3rem; /* 48px */
--leading-tight: 1.4;
--leading-normal: 1.7;
--leading-loose: 2.0;
--tracking-normal: 0.02em;
--tracking-wide: 0.05em;
--tracking-wider: 0.1em;
/* ============================================================
* 3. スペーシング
* ============================================================ */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
--section-py-sm: var(--space-12);
--section-py-md: var(--space-16);
--section-py-lg: var(--space-20);
--container-max: 1080px;
--container-px: var(--space-5);
/* ============================================================
* 4. ボーダー・角丸・シャドウ
* ============================================================ */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;
--border-width: 1px;
--border-width-thick: 2px;
/* --- シャドウ（色なし・薄い黒） --- */
--shadow-xs: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
--shadow-sm: 0 2px 6px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.05);
--shadow-md: 0 4px 16px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.07);
--shadow-xl: 0 16px 48px rgba(0,0,0,0.14), 0 8px 24px rgba(0,0,0,0.08);
--shadow-hover: 0 6px 24px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.07);
/* ============================================================
* 5. ブレークポイント（メモ）
*
* SP: 〜 767px → モバイルファースト（デフォルト）
* PC: 768px 〜 → @media (min-width: 768px)
* ============================================================ */
/* ============================================================
* 6. アニメーション
* ============================================================ */
--duration-fast: 150ms;
--duration-normal: 250ms;
--duration-slow: 400ms;
--ease-default: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
--transition-base: all var(--duration-normal) var(--ease-default);
--transition-color: color var(--duration-fast) var(--ease-default),
background-color var(--duration-fast) var(--ease-default),
border-color var(--duration-fast) var(--ease-default);
--transition-shadow: box-shadow var(--duration-normal) var(--ease-default),
transform var(--duration-normal) var(--ease-default);
/* ============================================================
* 7. z-index
* ============================================================ */
--z-base: 0;
--z-raised: 10;
--z-dropdown: 100;
--z-sticky: 200;
--z-overlay: 300;
--z-modal: 400;
--z-toast: 500;
}
/* ============================================================
* PC時の変数オーバーライド
* ============================================================ */
@media (min-width: 768px) {
:root {
--section-py-sm: var(--space-16);
--section-py-md: var(--space-20);
--section-py-lg: var(--space-24);
--text-3xl: 2rem;
--text-4xl: 2.5rem;
--text-5xl: 3rem;
--text-6xl: 3.75rem;
--container-px: var(--space-8);
}
}
/* ============================================================
* ベースリセット・基本スタイル
* ============================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-base);
font-weight: var(--font-weight-regular);
font-size: var(--text-base);
line-height: var(--leading-normal);
letter-spacing: var(--tracking-normal);
color: var(--color-text-primary);
background-color: var(--color-bg-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility; /* 追加 */
}
img, video, svg {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--color-text-link);
text-decoration: none;
transition: var(--transition-color);
}
a:hover {
color: var(--color-text-link-hover);
}
ul, ol {
list-style: none;
}
.section-header__title,/* 見出しに --font-heading を適用*/
h1, h2, h3 {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
}
/* ============================================================
* レイアウト：コンテナ
* ============================================================ */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-px);
}
.container--narrow { max-width: 720px; }
.container--wide { max-width: 1200px; }
/* ============================================================
* タイポグラフィユーティリティ
* ============================================================ */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.font-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-bold { font-weight: var(--font-weight-bold); }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-brand { color: var(--color-brand-primary); }
.text-inverse { color: var(--color-text-inverse); }
/* ============================================================
* 共通コンポーネント：ボタン
* ============================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
font-family: var(--font-base);
font-size: var(--text-base);
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-normal);
line-height: 1.5;
border-radius: var(--radius-sm);
border: var(--border-width) solid transparent;
cursor: pointer;
transition: var(--transition-base);
text-decoration: none;
white-space: nowrap;
}
.btn--primary {
background-color: var(--color-brand-primary);
color: var(--color-text-inverse);
border-color: var(--color-brand-primary);
}
.btn--primary:hover {
background-color: var(--color-brand-primary-dark);
border-color: var(--color-brand-primary-dark);
color: var(--color-text-inverse);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.btn--outline {
background-color: transparent;
color: var(--color-brand-primary);
border-color: var(--color-brand-primary);
}
.btn--outline:hover {
background-color: var(--color-brand-primary-pale);
color: var(--color-brand-primary-dark);
}
.btn--line {
background-color: #06c755;
color: #ffffff;
border-color: #06c755;
font-weight: var(--font-weight-medium);
}
.btn--line:hover {
background-color: #05b34c;
border-color: #05b34c;
color: #ffffff;
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-lg); }
.btn--full { width: 100%; }
/* ============================================================
* 共通コンポーネント：カード
* ============================================================ */
.card {
background-color: var(--color-bg-white);
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
transition: var(--transition-shadow);
}
.card--hover:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-2px);
}
.card__body { padding: var(--space-6); }
.card__body--sm { padding: var(--space-4); }
/* ============================================================
* 共通コンポーネント：バッジ
* ============================================================ */
.badge {
display: inline-flex;
align-items: center;
padding: var(--space-1) var(--space-3);
font-size: var(--text-xs);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-sm);
letter-spacing: var(--tracking-wide);
}
.badge--brand { background-color: var(--color-brand-primary-light); color: var(--color-brand-primary-dark); }
.badge--yellow { background-color: var(--color-brand-yellow); color: #6b6200; }
.badge--success { background-color: var(--color-success-light); color: var(--color-success); }
.badge--new { background-color: var(--color-brand-primary); color: var(--color-text-inverse); }
/* ============================================================
* 共通コンポーネント：セクション見出し
* ============================================================ */
.section-header {
text-align: center;
margin-bottom: var(--space-10);
}
.section-header__label {
display: inline-block;
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
color: var(--color-brand-primary);
letter-spacing: var(--tracking-wider);
margin-bottom: var(--space-3);
}
.section-header__title {
font-size: var(--text-3xl);
font-weight: var(--font-weight-bold);
color: var(--color-text-primary);
line-height: var(--leading-tight);
margin-bottom: var(--space-4);
}
.section-header__desc {
font-size: var(--text-base);
color: var(--color-text-secondary);
line-height: var(--leading-loose);
text-align: left;
max-width: 580px;
margin-inline: auto;
}
@media (min-width: 768px) {
.section-header__title { font-size: var(--text-4xl); }
}
/* ============================================================
* 共通コンポーネント：フォーム
* ============================================================ */
.form-group {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-bottom: var(--space-5);
}
.form-label {
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
}
.form-label--required::after {
content: "必須";
display: inline-block;
margin-left: var(--space-2);
padding: 1px 6px;
font-size: 0.7rem;
font-weight: var(--font-weight-medium);
background-color: var(--color-error);
color: #ffffff;
border-radius: var(--radius-sm);
vertical-align: middle;
}
.form-input,
.form-select,
.form-textarea {
width: 100%;
padding: var(--space-3) var(--space-4);
font-family: var(--font-base);
font-size: var(--text-base);
color: var(--color-text-primary);
background-color: var(--color-bg-white);
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius-sm);
transition: border-color var(--duration-fast) var(--ease-default),
box-shadow var(--duration-fast) var(--ease-default);
appearance: none;
-webkit-appearance: none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
outline: none;
border-color: var(--color-brand-primary);
box-shadow: 0 0 0 3px var(--color-brand-primary-light);
}
.form-textarea {
resize: vertical;
min-height: 120px;
}
/* ============================================================
* 共通コンポーネント：アラート
* ============================================================ */
.alert {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
line-height: var(--leading-normal);
}
.alert--info { background-color: var(--color-info-light); border: 1px solid var(--color-brand-primary); }
.alert--warning { background-color: var(--color-warning-light); border: 2px solid var(--color-warning); }
/* ============================================================
* 共通コンポーネント：パンくずリスト
* ============================================================ */
.breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--color-text-secondary);
padding: var(--space-3) 0;
}
.breadcrumb__item { display: flex; align-items: center; gap: var(--space-2); }
.breadcrumb__item:not(:last-child)::after {
content: "›";
color: var(--color-border);
font-size: var(--text-base);
}
.breadcrumb__link {
color: var(--color-text-secondary);
transition: color var(--duration-fast) var(--ease-default);
}
.breadcrumb__link:hover { color: var(--color-brand-primary); }
.breadcrumb__current { color: var(--color-text-tertiary); }
/* ============================================================
* ユーティリティ
* ============================================================ */
.hidden { display: none !important; }
.sp-only { display: block; }
.pc-only { display: none; }
@media (min-width: 768px) {
.sp-only { display: none; }
.pc-only { display: block; }
}
.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }
.mx-auto { margin-inline: auto; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
/* ============================================================
* アクセシビリティ
* ============================================================ */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border-width: 0;
}
:focus-visible {
outline: 2px solid var(--color-brand-primary);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}