Skip to content

Commit ab3134b

Browse files
nisimura1996nisimura1996
authored
カラフルx太線
1 parent 2576c5a commit ab3134b

11 files changed

Lines changed: 1781 additions & 0 deletions

File tree

‎docs/dm-05/assets/atmosphere.png‎

975 KB
Loading

‎docs/dm-05/assets/gyoza.png‎

812 KB
Loading

‎docs/dm-05/assets/hero.png‎

845 KB
Loading

‎docs/dm-05/assets/sour.png‎

913 KB
Loading

‎docs/dm-05/assets/yakiton.png‎

876 KB
Loading

‎docs/dm-05/css/base/component.css‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
/*===============================================================================
2+
タイトル
3+
================================================================================*/
4+
5+
/*===============================================================================
6+
自動折り返しテキスト
7+
================================================================================*/
8+
.c-autoWrap>* {
9+
display: inline-block;
10+
}
11+
12+
/*===============================================================================
13+
注釈テキスト
14+
================================================================================*/
15+
.c-note {
16+
display: flex;
17+
}
18+
19+
.c-note::before {
20+
content: "※";
21+
}
22+
23+
.c-note.--inline {
24+
display: inline-flex;
25+
}
26+
27+
/*===============================================================================
28+
縦書きテキスト
29+
================================================================================*/
30+
.c-vertical {
31+
min-height: max-content;
32+
writing-mode: vertical-rl;
33+
text-orientation: mixed;
34+
}
35+
36+
/*===============================================================================
37+
ネオブロータリズム用共通パーツ
38+
================================================================================*/
39+
40+
/* 共通カード */
41+
.c-card {
42+
background-color: var(--c-light);
43+
border: var(--bd-w--md) solid var(--c-dark);
44+
border-radius: var(--bd-r--lg);
45+
box-shadow: var(--shdw);
46+
padding: var(--g-sec--xs);
47+
transition: transform var(--ani-t--normal) ease, box-shadow var(--ani-t--normal) ease;
48+
}
49+
50+
.c-card:hover {
51+
transform: translate(-2px, -2px);
52+
box-shadow: var(--shdw--blur);
53+
}
54+
55+
/* 共通ボタン */
56+
.c-btn {
57+
display: inline-block;
58+
font-family: var(--ff-g);
59+
font-weight: var(--fw-lg);
60+
text-align: center;
61+
color: var(--c-text);
62+
border: var(--bd-w--md) solid var(--c-dark);
63+
border-radius: var(--bd-r--md);
64+
box-shadow: var(--shdw);
65+
cursor: pointer;
66+
transition: transform var(--ani-t--fast) ease, box-shadow var(--ani-t--fast) ease;
67+
}
68+
69+
.c-btn:hover {
70+
transform: translate(2px, 2px);
71+
box-shadow: var(--shdw--ani);
72+
}
73+
74+
.c-btn.--pink {
75+
background-color: var(--c-act01);
76+
}
77+
78+
.c-btn.--cyan {
79+
background-color: var(--c-main);
80+
}
81+
82+
.c-btn.--yellow {
83+
background-color: var(--c-act03);
84+
}
85+
86+
/* 共通バッジ */
87+
.c-badge {
88+
display: inline-block;
89+
padding: 0.25rem 0.75rem;
90+
font-size: 0.875rem;
91+
font-weight: var(--fw-lg);
92+
border: var(--bd-w--sm) solid var(--c-dark);
93+
border-radius: 9999px;
94+
}
95+
96+
.c-badge.--pink {
97+
background-color: var(--c-act01);
98+
}
99+
100+
.c-badge.--green {
101+
background-color: var(--c-act02);
102+
}
103+
104+
.c-badge.--yellow {
105+
background-color: var(--c-act03);
106+
}
107+
108+
.c-badge.--cyan {
109+
background-color: var(--c-main);
110+
}
111+
112+
/* セクションタイトル */
113+
.c-sec-title {
114+
font-family: var(--ff-g);
115+
font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem);
116+
font-weight: var(--fw-xl);
117+
line-height: var(--lh-sm);
118+
color: var(--c-text);
119+
margin-bottom: var(--g-sec--sm);
120+
text-transform: uppercase;
121+
}

‎docs/dm-05/css/base/content.css‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
/*===============================
2+
ベースコンテンツ
3+
=================================*/
4+
* {
5+
box-sizing: border-box;
6+
margin: 0;
7+
padding: 0;
8+
}
9+
10+
html {
11+
font-size: var(--ft-size-base);
12+
scroll-behavior: smooth;
13+
}
14+
15+
body {
16+
position: relative;
17+
max-width: 100%;
18+
min-width: 100%;
19+
background-color: var(--c-bg);
20+
line-height: var(--lh-lg);
21+
overflow-wrap: break-word;
22+
overflow-x: clip;
23+
word-wrap: break-word;
24+
-webkit-text-size-adjust: 100%;
25+
color: var(--c-text);
26+
font-family: var(--ff-m);
27+
font-size: 1rem;
28+
}
29+
30+
#body_wrap {
31+
position: relative;
32+
z-index: 1;
33+
max-width: 100%;
34+
overflow-x: clip;
35+
}
36+
37+
.l-container {
38+
max-width: calc(var(--ark-width--container) + var(--ark-padding--container) * 2);
39+
margin-left: auto;
40+
margin-right: auto;
41+
padding-left: var(--ark-padding--container);
42+
padding-right: var(--ark-padding--container);
43+
}
44+
45+
.l-content {
46+
position: relative;
47+
z-index: 1;
48+
margin: 0 auto 6em;
49+
padding-top: 2em;
50+
}
51+
52+
/*===============================
53+
デフォルトのCSS
54+
=================================*/
55+
picture {
56+
display: block;
57+
}
58+
59+
img {
60+
max-width: 100%;
61+
height: auto;
62+
vertical-align: middle;
63+
}
64+
65+
svg {
66+
width: inherit;
67+
height: auto;
68+
vertical-align: middle;
69+
color: currentColor;
70+
}
71+
72+
path {
73+
fill: currentColor;
74+
}
75+
76+
77+
a {
78+
text-decoration: none;
79+
color: inherit;
80+
transition: opacity 0.3s ease;
81+
}

‎docs/dm-05/css/base/variable.css‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
:root {
2+
--c-main: #8be5ff;
3+
--c-sub: #b08cff;
4+
--c-text: #1a1a1a;
5+
--c-bg: #faf8f5;
6+
7+
/* アクセント */
8+
--c-act01: #ff7bb0;
9+
/* ネオンピンク：主要なCTAボタン、強調テキスト、バッジ */
10+
--c-act01--dark: #e04e8b;
11+
/* ネオンピンクのホバー時のダークトーン */
12+
--c-act01--light: #ffa4c7;
13+
/* ネオンピンクのソフトトーン */
14+
--c-act01--lightest: #fff0f5;
15+
/* ネオンピンクの極薄背景 */
16+
--c-act02: #8effa8;
17+
/* ピスタチオグリーン：セカンダリバッジ、ハイライトカード */
18+
--c-act03: #ffe58e;
19+
/* パステルイエロー：メニューバッジ、オファーカード */
20+
21+
/* 黒・白 */
22+
--c-dark: #000000;
23+
--c-light: #ffffff;
24+
25+
/* 灰色 */
26+
--c-gray: #9a9a9a;
27+
--c-gray--dark: #707070;
28+
--c-gray--light: #f3f3f3;
29+
30+
--c-header_bg: rgba(250, 248, 245, 0.95);
31+
--c-header_text: #1a1a1a;
32+
--c-footer_bg: #1a1a1a;
33+
--c-footer_text: #ffffff;
34+
35+
/* セクション切替用背景色 */
36+
--c-section_bg_alt: #f0ede6;
37+
--c-section_bg_dark: #1a1a1a;
38+
39+
--ark-width--container: 1200px;
40+
--ark-padding--container: min(32px, 4vw);
41+
--width-sm: 960px;
42+
--width-xs: 800px;
43+
44+
--g-sec--xl: clamp(6rem, 4.5rem + 3.75vw, 8rem);
45+
--g-sec--lg: clamp(4rem, 3rem + 2.5vw, 5rem);
46+
--g-sec--md: clamp(2.5rem, 1.875rem + 1.56vw, 3.5rem);
47+
--g-sec--sm: clamp(1.75rem, 1.25rem + 1.25vw, 2.5rem);
48+
--g-sec--xs: clamp(1.25rem, 0.938rem + 0.78vw, 1.75rem);
49+
50+
/* フォントファミリー */
51+
--ff-m-base: "Hiragino Mincho ProN", serif;
52+
--ff-g-base: "Outfit", "Noto Sans JP", "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
53+
--ff-m: var(--ff-g-base); /* ネオ大衆デザインのため、明朝ではなくゴシックを共通化 */
54+
--ff-g: var(--ff-g-base);
55+
56+
--ft-size-base: 3.6vw;
57+
58+
/* 太さ */
59+
--fw-xl: 900;
60+
/* Extra Bold */
61+
--fw-lg: 700;
62+
/* Bold */
63+
--fw-md: 500;
64+
/* Medium */
65+
--fw-sm: 400;
66+
/* Normal */
67+
--fw-xs: 300;
68+
/* Light */
69+
70+
/* 行間 */
71+
--lh-xl: 2;
72+
--lh-lg: 1.8;
73+
--lh-md: 1.5;
74+
--lh-sm: 1.2;
75+
--lh-xs: 1;
76+
77+
/* ボーダー (ネオブロータリズム：極太) */
78+
--bd-w--lg: 4px;
79+
--bd-w--md: 3px;
80+
--bd-w--sm: 2px;
81+
--bd-w--xs: 1px;
82+
83+
/* 角丸 (控えめで平面的な丸み) */
84+
--bd-r--xl: 0.75rem;
85+
--bd-r--lg: 0.5rem;
86+
--bd-r--md: 0.375rem;
87+
--bd-r--sm: 0.25rem;
88+
--bd-r--xs: 0.125rem;
89+
90+
/* 影 (ネオブロータリズム用：ぼかさないソリッドシャドウ) */
91+
--shdw: 4px 4px 0px #000000;
92+
--shdw--blur: 6px 6px 0px #000000;
93+
--shdw--ani: 0px 0px 0px #000000;
94+
95+
/* アニメーション速度 */
96+
--ani-t--late: 0.4s;
97+
--ani-t--normal: 0.2s;
98+
--ani-t--fast: 0.08s;
99+
}
100+
101+
@media (min-width: 600px) {
102+
:root {
103+
--ft-size-base: 16px;
104+
}
105+
}
106+

0 commit comments

Comments
 (0)