From bc0b18f6e74dcf77d34659e281fd732357dfac2d Mon Sep 17 00:00:00 2001
From: Marukome0743 <akio.muto@bnt.benextgroup.jp>
Date: Tue, 1 Oct 2024 11:27:17 +0900
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8Frefactor:=20remove=20collapse?=
 =?UTF-8?q?=20classname?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/history/page.tsx             |  8 ++++----
 app/history/styles.module.css    | 21 +++++++++++++++++++++
 app/kanto_event/qAndA.module.css | 20 ++++++++++++++++++++
 app/kanto_event/qAndA.tsx        |  5 +++--
 4 files changed, 48 insertions(+), 6 deletions(-)
 create mode 100644 app/kanto_event/qAndA.module.css

diff --git a/app/history/page.tsx b/app/history/page.tsx
index e06935ff..776f5267 100644
--- a/app/history/page.tsx
+++ b/app/history/page.tsx
@@ -27,14 +27,14 @@ export default function History(): JSX.Element {
       </h2>
       {HIROSHIMA_HISTORY.map((history) => (
         <section key={history.date} className="space-y-4">
-          <details className="collapse collapse-arrow">
-            <summary className="bg-amber-50 collapse-title font-bold font-zenMaruGothic text-2xl">
+          <details className={`rounded-2xl w-full ${styles.details}`}>
+            <summary className="block bg-amber-50 font-bold font-zenMaruGothic p-4 relative text-2xl w-full">
               <p className="absolute outline outline-offset-2 rounded text-rose-400 text-xs -rotate-45">
                 大好評で
                 <br />
                 開催終了
               </p>
-              <span className="ml-12">{history.title}</span>
+              <span className="ml-4 sm:ml-0">{history.title}</span>
             </summary>
             <Programs programs={history.programs} />
             <PictureTile
@@ -44,7 +44,7 @@ export default function History(): JSX.Element {
             />
             <Link
               href={`${HISTORY.pathname}/movie${HIROSHIMA.pathname}/${history.date}`}
-              className={`bg-sky-400 btn mt-2 mx-auto rounded-2xl shadow-lg text-lg text-white w-max ${styles.blueShine}`}
+              className={`bg-sky-400 btn mt-2 mx-auto rounded-2xl shadow-lg text-lg text-white w-fit ${styles.blueShine}`}
             >
               イベントの様子はこちら！
               <ArrowTopRightOnSquareIcon
diff --git a/app/history/styles.module.css b/app/history/styles.module.css
index bc178aaf..8ebebf28 100644
--- a/app/history/styles.module.css
+++ b/app/history/styles.module.css
@@ -8,6 +8,27 @@
   animation: shine 20s infinite linear;
 }
 
+.details summary {
+  transition: background-color 0.2s ease-out;
+  &::after {
+    position: absolute;
+    display: block;
+    height: .5rem;
+    width: .5rem;
+    transition: all .2s ease-out;
+    top: 1.9rem;
+    inset-inline-end: 1.4rem;
+    content: "";
+    transform: translateY(-100%) rotate(45deg);
+    transform-origin: 75% 75%;
+    box-shadow: 2px 2px;
+    pointer-events: none;
+  }
+}
+.details[open] summary::after {
+  transform: translateY(-50%) rotate(225deg);
+}
+
 @keyframes arrow-top-right {
   0%,
   40% {
diff --git a/app/kanto_event/qAndA.module.css b/app/kanto_event/qAndA.module.css
new file mode 100644
index 00000000..3fe4de3b
--- /dev/null
+++ b/app/kanto_event/qAndA.module.css
@@ -0,0 +1,20 @@
+.details summary {
+  transition: background-color 0.2s ease-out;
+  &::after {
+    position: absolute;
+    display: block;
+    height: .5rem;
+    width: .5rem;
+    transition: all .2s ease-out;
+    top: 1.2rem;
+    inset-inline-end: 1.4rem;
+    content: "";
+    transform: translateY(-100%) rotate(45deg);
+    transform-origin: 75% 75%;
+    box-shadow: 2px 2px;
+    pointer-events: none;
+  }
+}
+.details[open] summary::after {
+  transform: translateY(-50%) rotate(225deg);
+}
diff --git a/app/kanto_event/qAndA.tsx b/app/kanto_event/qAndA.tsx
index f2b1f91b..29ca1298 100644
--- a/app/kanto_event/qAndA.tsx
+++ b/app/kanto_event/qAndA.tsx
@@ -5,6 +5,7 @@ import type { QandA } from "@/app/interfaces/qAndA"
 import { Q_AND_A } from "@/app/lib/constant"
 import Image from "next/image"
 import type { JSX } from "react"
+import styles from "./qAndA.module.css"
 
 export function QA({
   qAndAs,
@@ -23,9 +24,9 @@ export function QA({
           <details
             key={qAndA.title}
             open={index === 0}
-            className="collapse collapse-arrow"
+            className={`rounded-2xl w-full ${styles.details}`}
           >
-            <summary className="bg-sky-50 collapse-title min-h-0 pl-16 rounded-2xl text-center">
+            <summary className="block bg-sky-50 p-2 relative rounded-2xl text-base text-center">
               {qAndA.title}
             </summary>
             <div className="bg-sky-50 chat chat-start flex items-center mt-2 rounded-t-2xl">