レスポンシブイメージの切り替え方 <picture>

前提・実現したいこと

<picture>を使って、同じ画像を、デフォルトサイズはPC版、タブレット版にあて、SPのときのみspサイズの画像に切り替えたいです。
しかし、どうも検証ツールで確認する限り、<source>タグのheightが0になっていて、sp版でも表示されているのは<img>タグになっているようです。
どうしたらうまくきりかえられるでしょうか？

ご教授いただけましたら幸いです。
どうぞよろしくお願い致します。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5 <meta charset="UTF-8">
6 <!-- <meta name="viewport" content="width=device-width,initial-scal=1">-->
7 <meta name="viewport" content="width=device-width,initial-scale=1">
8 <link rel="preconnect" href="https://fonts.gstatic.com">
9 <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;800&family=Noto+Sans+JP&display=swap" rel="stylesheet">
10 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
11 <link rel="stylesheet" href="../css/reset.css">
12 <link rel="stylesheet" href="../css/contact.css">
13
14
15 <title>コンタクトページ</title>
16</head>
17
18<body>
19 <header>
20  <div class="header-wrapper">
21   <div class="header-log">
22    <img src="../img/site-logo.svg" alt="" class="site-log">
23   </div>
24
25   <ul class="header-nav">
26    <li class="header-list">
27     <a href="#">
28      <i class="fas fa-bars"></i>
29     </a>
30    </li>
31    <li class="header-list">
32     <a href="#">MENU</a>
33    </li>
34   </ul>
35  </div>
36 </header>
37 <main>
38
39
40  <section id="fv">
41
42   <div class="wrapper">
43    <div class="scroll-bar">
44     <p class="message">SCROLL</p>
45    </div>
46    <div class="fv-wrapper">
47     <picture>
48      <source srcset="../img/contact-page@2x.png" media="(max-width:767px)">
49      <img src="../img/contact-page.png" class="fv-img">
50     </picture>
51
52    </div>
53
54    <div class="fv-black"></div>
55    <div class="copy">
56     <p class="main-copy">CONTACT</p>
57     <p class="sub-copy">お問い合わせ</p>
58    </div>
59
60   </div>
61  </section>
62
63 </main>
64 <footer><small>©2018 DIGSMILE INC.</small></footer>
65</body>
66
67</html>
68

該当のソースコード

CSS
1@charset "UTF-8";
2/*カラーコード*/
3/*mixin*/
4html {
5  font-size: 62.5%;
6}
7html * {
8  box-sizing: border-box;
9}
10html body {
11  line-height: 1.8;
12  font-size: 16px;
13  font-family: "Montserrat", "Noto Sans JP", sans-serif;
14  width: 100%;
15}
16html body img {
17  max-width: 100%;
18  vertical-align: bottom;
19}
20html body h2 {
21  font-size: 3.2rem;
22  font-weight: bold;
23}
24html body h3 {
25  font-size: 2.4rem;
26  font-weight: bold;
27}
28html body a {
29  text-decoration: none;
30  color: #FFFFFF;
31}
32html body section {
33  margin: 0 auto;
34  text-align: center;
35}
36/*ヘッダー*/
37header {
38  position: absolute;
39  width: 100%;
40  /*共通部とここでwidth:100pxで広がる*/
41  z-index: 10;
42}
43header .header-wrapper {
44  padding: 30px 58px;
45  display: flex;
46  justify-content: space-between;
47}
48header .header-wrapper .header-nav {
49  display: flex;
50}
51header .header-wrapper .header-nav .header-list {
52  padding-right: 7px;
53}
54
55/*fv*/
56#fv {
57  height: 464px;
58}
59#fv .wrapper {
60  display: flex;
61}
62#fv .wrapper .scroll-bar {
63  display: none;
64}
65#fv .fv-wrapper {
66  position: relative;
67  overflow: hidden;
68  width: 96.3vw;
69  height: 387px;
70  text-align: left;
71  z-index: 2;
72}
73#fv .fv-wrapper .fv-img {
74  position: absolute;
75  top: -40%;
76  object-position: right;
77  filter: brightness(60%);
78  height: 100vh;
79}
80#fv .fv-black {
81  width: 780px;
82  height: 464px;
83  background-color: #333333;
84  z-index: 1;
85  position: absolute;
86  right: 0;
87}
88#fv .copy {
89  z-index: 5;
90  color: #FFFFFF;
91  font-weight: bold;
92  margin-top: 157px;
93  position: absolute;
94  right: 17%;
95  text-align: left;
96}
97#fv .copy .sub-copy,
98#fv .copy .company {
99  font-size: 20px;
100}
101#fv .copy .main-copy {
102  font-size: 7.2rem;
103}
104#fv .copy .sub-copy {
105  font-weight: normal;
106}
107
108/*footer*/
109footer {
110  background-color: #333333;
111  text-align: center;
112  color: #FFFFFF;
113  padding: 18px;
114  font-size: 10px;
115}
116
117/*レスポンシブ*/
118/*タブレット版*/
119@media screen and (max-width: 1000px) {
120  html body {
121    font-size: 1.4rem;
122    width: 100%;
123  }
124  html body h2 {
125    font-size: 3.2rem;
126  }
127
128  /*ヘッダー　タブレット*/
129  header {
130    /*ここでheaderのpaddingを設定してしまうと画面の外まで飛び出してしまう*/
131  }
132  header .header-wrapper {
133    display: flex;
134    height: 20px;
135    padding: 30px;
136    /*ヘッダー全体がはみ出さないようにする*/
137  }
138  header .header-wrapper .header-log .site-log {
139    height: 20px;
140  }
141  header .header-wrapper .header-nav {
142    display: flex;
143  }
144  header .header-wrapper .header-nav .header-list {
145    padding-right: 7px;
146  }
147
148  /*fv　タブレット*/
149  #fv {
150    height: 615px;
151  }
152  #fv .wrapper {
153    display: flex;
154    width: 100%;
155  }
156  #fv .fv-wrapper {
157    position: absolute;
158    top: 0;
159    text-align: left;
160    width: 578px;
161    height: 529px;
162    position: relative;
163  }
164  #fv .fv-wrapper .fv-img {
165    position: absolute;
166    object-position: 45% 50%;
167    object-fit: cover;
168  }
169  #fv .fv-black {
170    width: 52.86vw;
171    height: 60.06vh;
172    background-color: #333333;
173    z-index: 0;
174    position: absolute;
175    right: 0;
176    /*margin-bottom: 80px;*/
177    /* margin-bottom: 120px;*/
178  }
179  #fv .copy {
180    z-index: 5;
181    color: #FFFFFF;
182    font-weight: bold;
183    margin-top: 330px;
184    position: absolute;
185    right: 12%;
186    text-align: left;
187  }
188  #fv .copy .sub-copy,
189#fv .copy .company {
190    font-size: 16px;
191  }
192  #fv .copy .main-copy {
193    font-size: 5.6rem;
194    line-height: 53px;
195    margin-top: 10px;
196  }
197}
198/*スマホ版*/
199@media screen and (max-width: 767px) {
200  * {
201    box-sizing: border-box;
202  }
203
204  html body {
205    font-size: 1.4rem;
206  }
207  html body h2 {
208    font-size: 2.8rem;
209    width: 44.8vw;
210  }
211  html body h3 {
212    font-size: 2.4rem;
213    font-weight: normal;
214  }
215  html body section .wrapper {
216    padding: 0 15px;
217  }
218  html body .section-title {
219    font-size: 2.8rem;
220  }
221
222  /*ヘッダー*/
223  header .header-wrapper {
224    padding: 15px 19px;
225    display: flex;
226    justify-content: space-between;
227    z-index: 10;
228  }
229  header .header-wrapper .header-log {
230    width: 189px;
231    height: 20px;
232  }
233  header .header-wrapper .header-nav {
234    display: flex;
235  }
236  header .header-wrapper .header-nav a {
237    font-size: 1.2rem;
238  }
239  header .header-wrapper .header-nav .header-list {
240    padding-right: 7px;
241  }
242
243  /*fv*/
244  #fv {
245    height: 445px;
246  }
247  #fv .wrapper {
248    display: flex;
249    width: 100%;
250    padding: 0;
251  }
252  #fv .wrapper .scroll-bar {
253    display: block;
254    position: absolute;
255    z-index: 10;
256    top: 35%;
257    left: -26%;
258  }
259  #fv .wrapper .scroll-bar .message {
260    color: #FFFFFF;
261    transform: rotate(-90deg);
262    font-weight: bold;
263  }
264  #fv .wrapper .scroll-bar .message::after {
265    content: "";
266    background-color: #333333;
267    display: inline-block;
268    vertical-align: middle;
269    width: 178.5px;
270    height: 0.15rem;
271  }
272  #fv .fv-wrapper {
273    text-align: left;
274    z-index: 1;
275    width: 76.53vw;
276    height: 270px;
277    /*overflow: hidden;*/
278    position: relative;
279  }
280  #fv .fv-wrapper .fv-img {
281    object-position: top;
282  }
283  #fv .fv-black {
284    width: 75.47vw;
285    height: 365px;
286    background-color: #333333;
287    z-index: 0;
288    position: absolute;
289    right: 0;
290  }
291  #fv .copy {
292    z-index: 5;
293    color: #FFFFFF;
294    font-weight: bold;
295    margin-top: 175px;
296    position: absolute;
297    right: 6%;
298    text-align: right;
299  }
300  #fv .copy .sub-copy,
301#fv .copy .company {
302    font-size: 16px;
303  }
304  #fv .copy .main-copy {
305    font-size: 5.6rem;
306    line-height: 53px;
307    margin-top: 10px;
308  }
309}
310

試したこと

①HTMLでimg(デフォルト版/SP版)を二つ入れて、SP版では前者を非表示に、後者を表示して上書きする
→結果としてうまくいきませんでした。しかし、記事によるとこの手法はロード自体は2枚読み込んでいるため重くなるとのことで控えたいと考えています。

②今までfv-img(デフォルト版)につけていた「fv-img」を<picture>につけてみる
→それまでは正常に表示されていたタブレット版の画像位置がずれてしまいました。
一方で、sp版画像は表示されなくなってしまいます。

補足情報（FW/ツールのバージョンなど）

参考記事
OS:Windows
エディタ:Brackets
ブラウザ:クローム

※本来の投稿機能の使い方から外れますが、全コードの掲示にあたり、上記を消すわけにもいかないため、自己解決投稿欄を使用させて頂いております。ご容赦ください。

追記

以上の状態から、<sorce>タグの画像が読み込まれず、<image>タグが読み込まれているのではないかと推測しました。

Lhankor_Mhy

2021/03/19 06:09

問題が再現しませんでした。ご提示いただいていない部分に原因があると思われます。

mitrasi

2021/03/19 06:24

>Lhankor_Mhy様いつもありがとうございます。大変申し訳ありませんが、現在の状態が最小限状態でして、逆にコードを全部乗せるとなると今度は文字量オーバーしてしまうので手詰まりです。どうしたらよいでしょうか？ ※以前、作り直すとアドバイス頂きましたが、作り直したとしてもその状態が現在です。

Lhankor_Mhy

2021/03/19 06:29

その前に、ご提示のコードだけで問題が再現することを、mitrasiさんの環境でご確認いただきたいのですが。（たぶん、SCSSコンパイルエラーが出ます）

mitrasi

2021/03/19 06:43

改めて確認したところ、私の方では特に問題はなかったようです???? 一応念のため再添付致しましたので、どうぞよろしくお願い致します。

Lhankor_Mhy

2021/03/19 06:47

「問題はなかった」とは、問題が再現しなかったということですか？それとも、「問題が再現しない」という問題が発生しなかったということですか？

Lhankor_Mhy

2021/03/19 06:50

推測ですが、mitrasiさんの勘違いではないかな、と思っています。検証ツール以外の方法で、現象を確認しましたでしょうか。

mitrasi

2021/03/19 06:53

言葉足らずで申し訳ありません。問題なかったというのは「コンパイルエラーは発生しなかった」という意味です。コンパイラーでコンパイルしているのですが、コンパイルエラーは発生しませんでした。

Lhankor_Mhy

2021/03/19 06:55

では、私とmitrasiさんが見ているものが違う、ということですね。がんばってすり合わせていきましょう。

mitrasi

2021/03/19 07:11

ブラウザ等の違いなのでしょうか？お手数お掛け致しますが、よろしくお願いいたします。 Lhankor_Mhy様の画面でどう見えているかわかりませんので、ひとまず私の方の問題場面のスクショを掲示させて頂きます。

Lhankor_Mhy

2021/03/19 07:29

繰り返しになって申し訳ないのですが、画像を差し替えるなど、検証ツール以外の方法で、現象を確認しましたでしょうか？

mitrasi

2021/03/19 07:37

画像の差し替えに関しては上記の方法以外確認できておりません。

Lhankor_Mhy

2021/03/19 07:38

いえ、そうではなくて、↓のページのように目視できるようにして確認しましたか、ということです。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/picture

mitrasi

2021/03/19 07:44

理解力不足ですみません???? ご共有頂いたページのように、該当の画像部分の箇所のみで検証しましたか？ということでしょうか？

Lhankor_Mhy

2021/03/19 07:50

うーん、そうではなくて。 contact-page@2x.png と contact-page.png は似た画像なのではないかと思うのです。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/picture こちらのページの場合、全然違う画像なのです。この状態でスクリーンサイズを変化させると、明らかに画像が変わるので、目視で動作確認できるのです。

mitrasi

2021/03/19 08:17 編集

早速切り替わったときは全く異なる画像にて検証をしてみました。お付き合いいただいておいて申し訳ないのですが、違う画像で確認したところ問題なく切り替わっていました???? つきましては、おかげさまでこれにて解決とさせていただきたく思います。今後の確認方法として、肝に銘じておきます。本当にありがとうございました！一応確認方法の手段としてベストアンサーとさせていただきたく思いますので、お手数ですが、解答欄に改めて投稿頂けますと幸いです。

Lhankor_Mhy

2021/03/19 08:21

予想したとおりでよかったです。自己解決でご対応いただけますか？

mitrasi

2021/03/19 08:24

かしこまりました。ありがとうございました！

行動規範の内容に同意します

回答3件

自己解決

こんにちは。

解決致しましたので、ご報告いたします。

解決方法：異なる画像をはめ込んでみて目視で確認する。

原因：画像がサイズ違いの同じ画像だったため、変化に気づけなかった。

つまり、最初からエラーはなかったようです????

以上、ご報告でした。

ご協力いただきました皆様、ありがとうございました。

投稿2021/03/19 08:27

mitrasi

総合スコア49

css
1@charset "UTF-8";
2/*カラーコード*/
3/*mixin*/
4* {
5  box-sizing: border-box;
6}
7
8html {
9  font-size: 62.5%;
10}
11html body {
12  line-height: 1.8;
13  width: 100%;
14  font-size: 1.6rem;
15  font-family: "Montserrat", "YuGothic", sans-serif;
16}
17html body img {
18  max-width: 100%;
19  vertical-align: bottom;
20}
21html body h2 {
22  font-size: 3.9rem;
23  font-weight: bold;
24}
25html body a {
26  text-decoration: none;
27  color: #FFFFFF;
28}
29html body section .wrapper {
30  text-align: center;
31  margin: 0 auto;
32}
33
34/*ヘッダー*/
35header {
36  width: 100%;
37  position: absolute;
38  z-index: 10;
39}
40header .header-wrapper {
41  display: flex;
42  justify-content: space-between;
43  padding: 30px;
44}
45header .header-nav {
46  display: flex;
47}
48header .header-nav .header-list {
49  padding-right: 7px;
50}
51
52#fv {
53  height: 1367px;
54  /*fv-brackではきかないがここならきく*/
55  /*幅いっぱいに広がらないときはこれを*/
56  top: 0;
57  z-index: 5;
58}
59#fv .wrapper {
60  display: flex;
61}
62#fv .fv-img {
63  filter: brightness(60%);
64  height: 100vh;
65}
66#fv .fv-wrapper {
67  width: 76.39vw;
68  height: 640px;
69  position: absolute;
70  z-index: 3;
71}
72#fv .fv-black {
73  position: absolute;
74  top: 0;
75  right: 0;
76  z-index: 1;
77  height: 54.13vw;
78  width: 54.17vw;
79  background-color: #333333;
80}
81#fv .copy {
82  text-align: left;
83  position: absolute;
84  left: 65%;
85  top: 157px;
86  font-size: 2.2rem;
87  z-index: 10;
88  color: #FFFFFF;
89  font-weight: normal;
90}
91#fv .copy .main-copy {
92  font-size: 7.2rem;
93  letter-spacing: 0;
94  line-height: 1.2;
95  font-weight: bold;
96}
97
98#about .about-wrapper {
99  position: absolute;
100  top: 860px;
101  left: 10%;
102  height: 607px;
103  width: 1100px;
104  margin: 0 auto;
105  background-image: url(../img/about-img.png);
106  background-repeat: no-repeat;
107}
108#about .text-wrapper {
109  position: absolute;
110  background-color: #FFFFFF;
111  width: 590px;
112  top: 110px;
113  left: 0px;
114  text-align: left;
115  padding-left: 30px;
116  margin-left: 50px;
117}
118#about .text-wrapper .section-title {
119  padding-top: 50px;
120  padding-bottom: 30px;
121}
122#about .text-wrapper .btn {
123  font-size: 12px;
124  background-color: #333333;
125  padding: 10px 48px;
126  color: #FFFFFF;
127  margin-bottom: 50px;
128}
129#about .text-wrapper .sub-text {
130  width: 530px;
131  height: 152px;
132  padding-bottom: 30px;
133}
134
135#main-content {
136  background-color: #F2F2F2;
137}
138#main-content .main-list {
139  display: flex;
140  justify-content: center;
141  padding-top: 180px;
142  padding-bottom: 71px;
143}
144#main-content .main-list .main-card {
145  text-align: left;
146}
147#main-content .main-list .main-card .main-img {
148  width: 520px;
149  height: 350px;
150  padding-bottom: 27px;
151}
152#main-content .main-list .main-card .btn {
153  margin-top: 27px;
154  font-size: 12px;
155  background-color: #333333;
156  padding: 10px 48px;
157  color: #FFFFFF;
158}
159#main-content .main-list .main-card:first-of-type {
160  margin-right: 60px;
161}
162
163#topics {
164  margin: 0 170px;
165}
166#topics .wrapper {
167  margin: 60px auto;
168  display: flex;
169  justify-content: space-between;
170}
171#topics .section-title {
172  text-align: left;
173}
174#topics .topics-list {
175  margin-top: 128px;
176  text-align: right;
177}
178#topics .topics-list .topics-item {
179  text-align: left;
180}
181#topics .topics-list .topics-item .top-title {
182  padding-bottom: 10px;
183  border-bottom: 1px solid #CECECE;
184  font-weight: bold;
185  font-size: 1.4rem;
186  width: 700px;
187  /*ここでwidthを広げておけば線が伸びつつ、*/
188}
189#topics .topics-list .topics-item .top-date {
190  font-size: 0.015rem;
191  color: #CECECE;
192}
193#topics .topics-list .btn {
194  font-size: 12px;
195  background-color: #333333;
196  padding: 10px 48px;
197  color: #FFFFFF;
198  margin-top: 30px;
199  margin-bottom: 60px;
200}
201
202#contact {
203  width: 100%;
204  background-color: #F2F2F2;
205}
206#contact .text-wrapper {
207  text-align: left;
208  width: 440px;
209}
210#contact .text-wrapper .contact-text {
211  padding-top: 30px;
212  padding-bottom: 39px;
213}
214#contact .text-wrapper .btn {
215  font-size: 12px;
216  background-color: #333333;
217  padding: 10px 48px;
218  color: #FFFFFF;
219}
220#contact .contact-text {
221  text-align: left;
222}
223#contact .wrapper {
224  display: flex;
225  justify-content: center;
226  align-items: center;
227}
228#contact .contact-img {
229  height: 390px;
230  width: 580px;
231  object-fit: contain;
232  padding-top: 60px;
233  padding-bottom: 120px;
234}
235
236footer {
237  background-color: #333333;
238  color: #FFFFFF;
239  font-size: 1rem;
240  padding: 14px;
241  text-align: center;
242}
243
244@media screen and (max-width: 1000px) {
245  * {
246    box-sizing: border-box;
247  }
248
249  html body h2 {
250    font-size: 3.2rem;
251  }
252  html body section .wrapper {
253    padding: 0 30px;
254  }
255
256  #fv {
257    height: 1503px;
258  }
259  #fv .wrapper {
260    padding: 0;
261  }
262  #fv .fv-wrapper {
263    width: 600px;
264    height: 890px;
265    overflow: hidden;
266  }
267  #fv .fv-img {
268    object-position: 53% 0;
269    transform: scale(1.1);
270    object-fit: cover;
271  }
272  #fv .fv-black {
273    height: 1024px;
274  }
275  #fv .copy {
276    left: 55%;
277    top: 330px;
278  }
279
280  #about {
281    height: 0;
282  }
283  #about .about-wrapper {
284    width: 100%;
285    top: 1104px;
286    left: 0;
287    height: 399px;
288  }
289  #about .text-wrapper {
290    margin-left: 0;
291    left: 10%;
292    top: 5%;
293    height: 359px;
294  }
295  #about .text-wrapper .section-title {
296    padding-top: 40px;
297  }
298
299  #topics {
300    margin: 0;
301  }
302  #topics .wrapper {
303    width: 100%;
304    margin: 40px 0;
305    display: block;
306  }
307  #topics .topics-list {
308    text-align: left;
309    margin-top: 29px;
310  }
311  #topics .topics-list .btn {
312    margin-bottom: 0;
313  }
314  #main-content .section-title {
315    padding-bottom: 30px;
316  }
317  #main-content .main-list {
318    display: block;
319    padding-top: 60px;
320  }
321  #main-content .main-list .main-card:last-of-type {
322    margin-top: 40px;
323  }
324
325  #contact .contact-img {
326    padding: 0;
327    margin-top: 40px;
328    margin-bottom: 30px;
329    width: 520px;
330    height: 350px;
331  }
332  #contact .wrapper {
333    flex-direction: column-reverse;
334    align-items: flex-start;
335  }
336  #contact .btn {
337    margin-bottom: 80px;
338  }
339}
340/*スマホ版*/
341@media screen and (max-width: 767px) {
342  html body {
343    font-size: 1.4rem;
344  }
345  html body section .wrapper {
346    padding: 0 15px;
347  }
348
349  header .header-wrapper {
350    padding: 15px;
351    line-height: 20px;
352  }
353  header .header-wrapper .site-log {
354    height: 20px;
355  }
356  header .header-wrapper .header-nav {
357    font-size: 0.5rem;
358  }
359
360  #fv {
361    height: 1286px;
362  }
363  #fv .fv-wrapper {
364    width: 287px;
365    height: 587px;
366  }
367  #fv .fv-img {
368    transform: scale(1);
369  }
370  #fv .fv-black {
371    height: 667px;
372  }
373  #fv .copy {
374    left: 35%;
375    top: 175px;
376    font-size: 1.4rem;
377  }
378  #fv .copy .main-copy {
379    font-size: 5.6rem;
380  }
381
382  #about {
383    height: 0;
384  }
385  #about .about-wrapper {
386    top: 745px;
387    width: 375px;
388    height: 541px;
389  }
390  #about .text-wrapper {
391    width: 345px;
392    height: 441px;
393    left: 15px;
394    top: 50px;
395  }
396  #about .text-wrapper .sub-text {
397    width: 300px;
398    height: 211px;
399  }
400  #about .text-wrapper .btn {
401    margin-top: 30px;
402  }
403
404  #main-content {
405    top: 1286px;
406  }
407  #main-content .main-list .main-card:first-of-type {
408    margin-right: 0;
409  }
410
411  #topics .topics-list .topics-item .top-title {
412    width: 345px;
413    font-size: 1rem;
414    white-space: nowrap;
415  }
416  #topics .topics-list .top-title:first-of-type {
417    font-size: 0.5rem;
418  }
419
420  #contact .text-wrapper {
421    width: 345px;
422  }
423  #contact .text-wrapper .contact-text {
424    width: 345px;
425  }
426}

投稿2021/03/19 06:27

mitrasi

総合スコア49

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5 <meta charset="UTF-8">
6 <!-- <meta name="viewport" content="width=device-width,initial-scal=1">-->
7 <meta name="viewport" content="width=device-width,initial-scale=1">
8 <link rel="preconnect" href="https://fonts.gstatic.com">
9 <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;800&family=Noto+Sans+JP&display=swap" rel="stylesheet">
10 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
11 <link rel="stylesheet" href="../css/reset.css">
12 <link rel="stylesheet" href="../css/contact.css">
13
14
15 <title>コンタクトページ</title>
16</head>
17
18<body>
19 <header>
20  <div class="header-wrapper">
21   <div class="header-log">
22    <img src="../img/site-logo.svg" alt="" class="site-log">
23   </div>
24
25   <ul class="header-nav">
26    <li class="header-list">
27     <a href="#">
28      <i class="fas fa-bars"></i>
29     </a>
30    </li>
31    <li class="header-list">
32     <a href="#">MENU</a>
33    </li>
34   </ul>
35  </div>
36 </header>
37 <main>
38
39
40  <section id="fv">
41
42   <div class="wrapper">
43    <div class="scroll-bar">
44     <p class="message">SCROLL</p>
45    </div>
46    <div class="fv-wrapper">
47     <picture>
48      <source srcset="../img/contact-page@2x.png" media="(max-width:767px)">
49      <img src="../img/contact-page.png" class="fv-img">
50     </picture>
51
52    </div>
53
54    <div class="fv-black"></div>
55    <div class="copy">
56     <p class="main-copy">CONTACT</p>
57     <p class="sub-copy">お問い合わせ</p>
58    </div>
59
60   </div>
61  </section>
62  <section id="contact-form">
63
64   <form>
65    <ul class="contact-list">
66     <p class="contact-text">
67      ご依頼やご相談についてのご質問やご要望がございましたら、下記フォームよりお気軽にお問い合わせください。送付いただいた内容を確認の上、担当者からご連絡させていただきます。
68     </p>
69     <li class="contact-item">
70      <label class="list-label">お問い合わせ種別</label>
71      <ul class="radio-list">
72       <li class="radio-item">
73        <input type="radio" class="radio-btn">
74        <label class="list-label">
75         制作</label>
76       </li>
77       <li class="radio-item">
78        <input type="radio" class="radio-btn">
79        <label class="list-label">
80         採用</label>
81
82       </li>
83       <li class="radio-item">
84        <input type="radio" class="radio-btn">
85        <label class="list-label">
86         IR</label>
87
88       </li>
89       <li class="radio-item">
90        <input type="radio" class="radio-btn">
91        <label class="list-label">
92         その他</label>
93
94       </li>
95
96
97      </ul>
98
99     </li>
100     <li class="contact-item">
101
102      <label>会社名・団体名</label>
103      <input type="text">
104     </li>
105     <li class="contact-item">
106      <label>お名前</label>
107      <input type="text">
108     </li>
109     <li class="contact-item">
110      <label>メールアドレス</label>
111      <input type="text">
112     </li>
113     <li class="contact-item">
114      <label>電話番号</label>
115      <input type="text">
116     </li>
117     <li class="contact-item">
118      <label>お問い合わせ内容</label>
119      <input type="text">
120     </li>
121     <li class="contact-item">
122      <label>PRIVACY POLICY</label>
123      <p>個人情報保護方針<br>  株式会社ファイアープレイス<br> 044-589-4333</p>
124      <div class="check">
125       <div class="check-label">
126        <input class="check-box" type="checkbox">
127        <label class="contact-label">個人情報の取り扱いについて同意のうえ送信します。</label>
128       </div>
129
130
131
132       <div class="btn-wrapper">
133        <input type="submit" true="送信" class="btn">
134       </div>
135      </div>
136
137     </li>
138    </ul>
139   </form>
140  </section>
141
142 </main>
143 <footer><small>©2018 DIGSMILE INC.</small></footer>
144</body>
145
146</html>
147