diff --git a/README.md b/README.md
index 635c1b0..e16bb46 100644
--- a/README.md
+++ b/README.md
@@ -14,23 +14,11 @@ npm i -g yarn
 
 ``` bash
 # install dependencies
-$ yarn install
+$ yarn
 
 # serve with hot reload at localhost:4321
 $ yarn dev
 # 開くURLは http://localhost:4321/web/
-
-# how to deploy
-$ yarn deploy
-# or npm run deploy
 ```
 
-For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org).
-
-## 今回は使用しないが、Nodeサーバーを立てて動かすときにやること
-
-``` bash
-# build for production and launch server
-$ yarn run build
-$ yarn start
-```
+コンテンツの追加はそのファイルごとにコメントで記述する。
diff --git a/docs/index.html b/docs/index.html
index 72084e6..16625b5 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="ja"> <head><meta charset="utf-8"><link rel="icon" type="image/x-icon" href="/web/_astro/favicon.D9qzZsoc.ico"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v5.3.0"><meta name="description" content="Trinity Trio's Web site"><title>Trinity Trio</title><link rel="stylesheet" href="/web/_astro/index.DS11iKqU.css"></head> <body> <div id="topView" data-astro-cid-o7gv43vw> <img src="/web/_astro/motionlogo.Co5YtV1R_175Rls.gif" alt="Motion Logo" data-astro-cid-o7gv43vw="true" width="500" height="500" loading="lazy" decoding="async" class="logo"> <img src="/web/_astro/loading.CJeyvbqM_Z1gf9Lw.svg" alt="Loading" data-astro-cid-o7gv43vw="true" width="500" height="500" loading="lazy" decoding="async" class="guide"> </div>  <div id="member" data-astro-cid-exjcnk3b> <div id="CHARLII_k" class="item" data-astro-cid-exjcnk3b> <img src="/web/_astro/memberCHARLII_k.DhTwacoi_2on6rS.svg" alt="CHARLII_k" data-astro-cid-exjcnk3b="true" width="1684" height="2384" loading="lazy" decoding="async"> <p data-astro-cid-exjcnk3b>CHARLII_k</p> </div> <div id="ryu-g" class="item" data-astro-cid-exjcnk3b> <img src="/web/_astro/memberryu-g.DMDts7_6_Z1pOMeR.svg" alt="ryu-g" data-astro-cid-exjcnk3b="true" width="1684" height="2384" loading="lazy" decoding="async"> <p data-astro-cid-exjcnk3b>ryu-g</p> </div> <div id="by_sK" class="item" data-astro-cid-exjcnk3b> <img src="/web/_astro/memberby_sK.CvuYHBts_G0FFh.svg" alt="by_sK" data-astro-cid-exjcnk3b="true" width="1684" height="2384" loading="lazy" decoding="async"> <p data-astro-cid-exjcnk3b>by_sK</p> </div> </div>  <div id="about" data-astro-cid-v2cbyr3p> <h2 data-astro-cid-v2cbyr3p>私達は<br data-astro-cid-v2cbyr3p>函館に<br data-astro-cid-v2cbyr3p>いま<span class="up" data-astro-cid-v2cbyr3p>せ</span><span data-astro-cid-v2cbyr3p>ん</span></h2> <section data-astro-cid-v2cbyr3p> <h3 data-astro-cid-v2cbyr3p> <span data-astro-cid-v2cbyr3p>T</span><span data-astro-cid-v2cbyr3p>r</span><span data-astro-cid-v2cbyr3p>i</span><span data-astro-cid-v2cbyr3p>n</span><span data-astro-cid-v2cbyr3p>i</span><span data-astro-cid-v2cbyr3p>t</span><span data-astro-cid-v2cbyr3p>y</span> <span data-astro-cid-v2cbyr3p>T</span><span data-astro-cid-v2cbyr3p>r</span><span data-astro-cid-v2cbyr3p>i</span><span data-astro-cid-v2cbyr3p>o</span> </h3> <div class="verb" data-astro-cid-v2cbyr3p> <p data-astro-cid-v2cbyr3p>は３人である。</p> <p data-astro-cid-v2cbyr3p>は情報機器を媒介として心の奥底に眠る思想や感情を表出する活動である。</p> <p data-astro-cid-v2cbyr3p>はそれぞれの思考を融合した結果創出される結果である。</p> <p data-astro-cid-v2cbyr3p>は共通の敵を持つ。</p> <p data-astro-cid-v2cbyr3p>は音楽を扱う。</p> <p data-astro-cid-v2cbyr3p>はテキストを扱う。</p> <p data-astro-cid-v2cbyr3p>は空間を扱う。</p> <p data-astro-cid-v2cbyr3p>は情報空間を扱う。</p> <p data-astro-cid-v2cbyr3p>は函館の自分たちではどうにもならない憂鬱な雰囲気に対抗すべく、小さく抗う希望の灯火であった。</p> <p data-astro-cid-v2cbyr3p>は時間に制約されない。</p> <p data-astro-cid-v2cbyr3p>は空間に制約されない。</p> </div> </section> </div>  <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&family=Sawarabi+Mincho&display=swap" rel="stylesheet"> <div id="works" data-astro-cid-ibztcaso> <div class="box" data-astro-cid-ibztcaso> <iframe class="song" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/494605326&color=%2300615b&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true" data-astro-cid-ibztcaso></iframe> <img src="/web/_astro/loading.CJeyvbqM_19nIN2.svg" alt="loading" data-astro-cid-ibztcaso="true" width="200" height="200" loading="lazy" decoding="async" class="loading"> </div> <div class="box" data-astro-cid-ibztcaso> <iframe class="song" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/493911225&color=%2300615b&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true" data-astro-cid-ibztcaso></iframe> <img src="/web/_astro/loading.CJeyvbqM_19nIN2.svg" alt="loading" data-astro-cid-ibztcaso="true" width="200" height="200" loading="lazy" decoding="async" class="loading"> </div> <div class="box" data-astro-cid-ibztcaso> <iframe class="song" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/493910787&color=%2300615b&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true" data-astro-cid-ibztcaso></iframe> <img src="/web/_astro/loading.CJeyvbqM_19nIN2.svg" alt="loading" data-astro-cid-ibztcaso="true" width="200" height="200" loading="lazy" decoding="async" class="loading"> </div> <div class="box" data-astro-cid-ibztcaso> <iframe class="song" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/493910124&color=%2300615b&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true" data-astro-cid-ibztcaso></iframe> <img src="/web/_astro/loading.CJeyvbqM_19nIN2.svg" alt="loading" data-astro-cid-ibztcaso="true" width="200" height="200" loading="lazy" decoding="async" class="loading"> </div> <div class="box" data-astro-cid-ibztcaso> <iframe class="song" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/493909863&color=%2300615b&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true" data-astro-cid-ibztcaso></iframe> <img src="/web/_astro/loading.CJeyvbqM_19nIN2.svg" alt="loading" data-astro-cid-ibztcaso="true" width="200" height="200" loading="lazy" decoding="async" class="loading"> </div> <div class="box" data-astro-cid-ibztcaso> <iframe class="song" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/493909692&color=%2300615b&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true" data-astro-cid-ibztcaso></iframe> <img src="/web/_astro/loading.CJeyvbqM_19nIN2.svg" alt="loading" data-astro-cid-ibztcaso="true" width="200" height="200" loading="lazy" decoding="async" class="loading"> </div> <div class="box" data-astro-cid-ibztcaso> <iframe class="song" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/493909566&color=%2300615b&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true" data-astro-cid-ibztcaso></iframe> <img src="/web/_astro/loading.CJeyvbqM_19nIN2.svg" alt="loading" data-astro-cid-ibztcaso="true" width="200" height="200" loading="lazy" decoding="async" class="loading"> </div> </div>  </body></html>
\ No newline at end of file
+<!DOCTYPE html><html lang="ja"> <head><meta charset="utf-8"><link rel="icon" type="image/x-icon" href="/web/_astro/favicon.D9qzZsoc.ico"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v5.3.0"><meta name="description" content="Trinity Trio's Web site"><title>Trinity Trio</title><link rel="stylesheet" href="/web/_astro/index.DS11iKqU.css"></head> <body> <div id="topView" data-astro-cid-o7gv43vw> <img src="/web/_astro/motionlogo.Co5YtV1R_175Rls.gif" alt="Motion Logo" data-astro-cid-o7gv43vw="true" width="500" height="500" loading="lazy" decoding="async" class="logo"> <img src="/web/_astro/loading.CJeyvbqM_Z1gf9Lw.svg" alt="Loading" data-astro-cid-o7gv43vw="true" width="500" height="500" loading="lazy" decoding="async" class="guide"> </div>  <div id="member" data-astro-cid-exjcnk3b> <div id="CHARLII_k" class="item" data-astro-cid-exjcnk3b> <img src="/web/_astro/memberCHARLII_k.DhTwacoi_2on6rS.svg" alt="CHARLII_k" data-astro-cid-exjcnk3b="true" width="1684" height="2384" loading="lazy" decoding="async"> <p data-astro-cid-exjcnk3b>CHARLII_k</p> </div> <div id="ryu-g" class="item" data-astro-cid-exjcnk3b> <img src="/web/_astro/memberryu-g.DMDts7_6_Z1pOMeR.svg" alt="ryu-g" data-astro-cid-exjcnk3b="true" width="1684" height="2384" loading="lazy" decoding="async"> <p data-astro-cid-exjcnk3b>ryu-g</p> </div> <div id="by_sK" class="item" data-astro-cid-exjcnk3b> <img src="/web/_astro/memberby_sK.CvuYHBts_G0FFh.svg" alt="by_sK" data-astro-cid-exjcnk3b="true" width="1684" height="2384" loading="lazy" decoding="async"> <p data-astro-cid-exjcnk3b>by_sK</p> </div> </div>  <div id="about" data-astro-cid-v2cbyr3p> <h2 data-astro-cid-v2cbyr3p>私達は<br data-astro-cid-v2cbyr3p>函館に<br data-astro-cid-v2cbyr3p>いま<span class="up" data-astro-cid-v2cbyr3p>せ</span><span data-astro-cid-v2cbyr3p>ん</span></h2> <section data-astro-cid-v2cbyr3p> <h3 data-astro-cid-v2cbyr3p> <span data-astro-cid-v2cbyr3p>T</span><span data-astro-cid-v2cbyr3p>r</span><span data-astro-cid-v2cbyr3p>i</span><span data-astro-cid-v2cbyr3p>n</span><span data-astro-cid-v2cbyr3p>i</span><span data-astro-cid-v2cbyr3p>t</span><span data-astro-cid-v2cbyr3p>y</span> <span data-astro-cid-v2cbyr3p>T</span><span data-astro-cid-v2cbyr3p>r</span><span data-astro-cid-v2cbyr3p>i</span><span data-astro-cid-v2cbyr3p>o</span> </h3> <div class="verb" data-astro-cid-v2cbyr3p> <p data-astro-cid-v2cbyr3p>は３人である。</p> <p data-astro-cid-v2cbyr3p>は情報機器を媒介として心の奥底に眠る思想や感情を表出する活動である。</p> <p data-astro-cid-v2cbyr3p>はそれぞれの思考を融合した結果創出される結果である。</p> <p data-astro-cid-v2cbyr3p>は共通の敵を持つ。</p> <p data-astro-cid-v2cbyr3p>は音楽を扱う。</p> <p data-astro-cid-v2cbyr3p>はテキストを扱う。</p> <p data-astro-cid-v2cbyr3p>は空間を扱う。</p> <p data-astro-cid-v2cbyr3p>は情報空間を扱う。</p> <p data-astro-cid-v2cbyr3p>は函館の自分たちではどうにもならない憂鬱な雰囲気に対抗すべく、小さく抗う希望の灯火であった。</p> <p data-astro-cid-v2cbyr3p>は時間に制約されない。</p> <p data-astro-cid-v2cbyr3p>は空間に制約されない。</p> </div> </section> </div>  <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&family=Sawarabi+Mincho&display=swap" rel="stylesheet"> <div id="works" data-astro-cid-ibztcaso> <div class="box" data-astro-cid-ibztcaso> <iframe class="song" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/494605326&color=%2300615b&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true" data-astro-cid-ibztcaso></iframe> <img src="/web/_astro/loading.CJeyvbqM_19nIN2.svg" alt="loading" data-astro-cid-ibztcaso="true" width="200" height="200" loading="lazy" decoding="async" class="loading"> </div><div class="box" data-astro-cid-ibztcaso> <iframe class="song" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/493911225&color=%2300615b&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true" data-astro-cid-ibztcaso></iframe> <img src="/web/_astro/loading.CJeyvbqM_19nIN2.svg" alt="loading" data-astro-cid-ibztcaso="true" width="200" height="200" loading="lazy" decoding="async" class="loading"> </div><div class="box" data-astro-cid-ibztcaso> <iframe class="song" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/493910787&color=%2300615b&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true" data-astro-cid-ibztcaso></iframe> <img src="/web/_astro/loading.CJeyvbqM_19nIN2.svg" alt="loading" data-astro-cid-ibztcaso="true" width="200" height="200" loading="lazy" decoding="async" class="loading"> </div><div class="box" data-astro-cid-ibztcaso> <iframe class="song" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/493910124&color=%2300615b&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true" data-astro-cid-ibztcaso></iframe> <img src="/web/_astro/loading.CJeyvbqM_19nIN2.svg" alt="loading" data-astro-cid-ibztcaso="true" width="200" height="200" loading="lazy" decoding="async" class="loading"> </div><div class="box" data-astro-cid-ibztcaso> <iframe class="song" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/493909863&color=%2300615b&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true" data-astro-cid-ibztcaso></iframe> <img src="/web/_astro/loading.CJeyvbqM_19nIN2.svg" alt="loading" data-astro-cid-ibztcaso="true" width="200" height="200" loading="lazy" decoding="async" class="loading"> </div><div class="box" data-astro-cid-ibztcaso> <iframe class="song" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/493909692&color=%2300615b&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true" data-astro-cid-ibztcaso></iframe> <img src="/web/_astro/loading.CJeyvbqM_19nIN2.svg" alt="loading" data-astro-cid-ibztcaso="true" width="200" height="200" loading="lazy" decoding="async" class="loading"> </div><div class="box" data-astro-cid-ibztcaso> <iframe class="song" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/493909566&color=%2300615b&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true" data-astro-cid-ibztcaso></iframe> <img src="/web/_astro/loading.CJeyvbqM_19nIN2.svg" alt="loading" data-astro-cid-ibztcaso="true" width="200" height="200" loading="lazy" decoding="async" class="loading"> </div> </div>  </body></html>
\ No newline at end of file
diff --git a/src/components/Works.astro b/src/components/Works.astro
index 1a94aed..105ad89 100644
--- a/src/components/Works.astro
+++ b/src/components/Works.astro
@@ -1,98 +1,107 @@
 ---
 import { Image } from 'astro:assets'
 import loading from '../assets/loading.svg'
+
+/**
+ * 更新方法
+ * SoundCloud の楽曲ページでShare > Embed >  Code を取得し、traks/ 直後の数字をworks配列に追加する。
+ * 新しいものほど**下**に追加する。
+ * 例：
+ * <iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/493911225&color=%236f725e&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/trinity-trio" title="Trinity Trio" target="_blank" style="color: #cccccc; text-decoration: none;">Trinity Trio</a> · <a href="https://soundcloud.com/trinity-trio/grenada" title="grenada" target="_blank" style="color: #cccccc; text-decoration: none;">grenada</a></div>
+ * この場合、works配列に'493911225'を追加する。
+ */
+
+const works = [
+  '493909566',
+  '493909692',
+  '493909863',
+  '493910124',
+  '493910787',
+  '493911225',
+  '494605326',
+]
 ---
 
 <div id="works">
-  <div class="box">
-    <iframe class="song" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/494605326&color=%2300615b&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
-    <Image class="loading" src={loading} alt="loading" width="200" height="200" />
-  </div>
-  <div class="box">
-    <iframe class="song" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/493911225&color=%2300615b&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
-    <Image class="loading" src={loading} alt="loading" width="200" height="200" />
-  </div>
-  <div class="box">
-    <iframe class="song" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/493910787&color=%2300615b&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
-    <Image class="loading" src={loading} alt="loading" width="200" height="200" />
-  </div>
-  <div class="box">
-    <iframe class="song" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/493910124&color=%2300615b&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
-    <Image class="loading" src={loading} alt="loading" width="200" height="200" />
-  </div>
-  <div class="box">
-    <iframe class="song" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/493909863&color=%2300615b&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
-    <Image class="loading" src={loading} alt="loading" width="200" height="200" />
-  </div>
-  <div class="box">
-    <iframe class="song" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/493909692&color=%2300615b&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
-    <Image class="loading" src={loading} alt="loading" width="200" height="200" />
-  </div>
-  <div class="box">
-    <iframe class="song" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/493909566&color=%2300615b&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
-    <Image class="loading" src={loading} alt="loading" width="200" height="200" />
-  </div>
+	{
+		works.toReversed().map((trackId) => (
+			<div class="box">
+				<iframe
+					class="song"
+					allow="autoplay"
+					src={`https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/${trackId}&color=%2300615b&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true`}
+				/>
+				<Image
+					class="loading"
+					src={loading}
+					alt="loading"
+					width="200"
+					height="200"
+				/>
+			</div>
+		))
+	}
 </div>
 
 <style lang="scss">
-#works {
-  display: flex;
-  flex-wrap: wrap;
+	#works {
+		display: flex;
+		flex-wrap: wrap;
 
-  .box:nth-child(3n+1) {
-    background-color: #FFCC00;
-  }
-  .box:nth-child(3n+2) {
-    background-color: #e95513;
-  }
-  .box:nth-child(3n) {
-    background-color: #9A35CD;
-  }
+		.box:nth-child(3n + 1) {
+			background-color: #ffcc00;
+		}
+		.box:nth-child(3n + 2) {
+			background-color: #e95513;
+		}
+		.box:nth-child(3n) {
+			background-color: #9a35cd;
+		}
 
-  .song {
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-  }
+		.song {
+			z-index: 1;
+			width: 100%;
+			height: 100%;
+		}
 
-  .box {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex: 1;
-    min-width: 30vw;
-    max-width: calc(100vw / 3);
-    height: calc(100vw / 3);
-    position: relative;
+		.box {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			flex: 1;
+			min-width: 30vw;
+			max-width: calc(100vw / 3);
+			height: calc(100vw / 3);
+			position: relative;
 
-    @media screen and (max-width: 768px) {
-      min-width: 45vw;
-      max-width: calc(100vw / 2);
-      height: calc(100vw / 2);
-    }
+			@media screen and (max-width: 768px) {
+				min-width: 45vw;
+				max-width: calc(100vw / 2);
+				height: calc(100vw / 2);
+			}
 
-    @media screen and (max-width: 411px) {
-      min-width: 90vw;
-      max-width: 100vw;
-      height: 100vw;
-    }
+			@media screen and (max-width: 411px) {
+				min-width: 90vw;
+				max-width: 100vw;
+				height: 100vw;
+			}
 
-    .loading {
-      position: absolute;
-      z-index: 0;
-      width: 150px;
-      height: 150px;
-      animation: rotation 1s infinite ease-in-out;
-    }
-  }
-}
+			.loading {
+				position: absolute;
+				z-index: 0;
+				width: 150px;
+				height: 150px;
+				animation: rotation 1s infinite ease-in-out;
+			}
+		}
+	}
 
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(358deg);
-  }
-}
+	@keyframes rotation {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(358deg);
+		}
+	}
 </style>
