function MainComponent() { const [showTitle, setShowTitle] = React.useState(true); const handleClick = ()=>{ setShowTitle(false); }; return /*#__PURE__*/ React.createElement("div", { className: "w-screen h-screen relative overflow-hidden", onClick: handleClick, __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-cover bg-center grayscale contrast-[1.75]", style: { backgroundImage: "url('https://ucarecdn.com/62021824-9de0-4af7-a36c-49fbb8712bcb/-/format/auto/')" }, __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }), showTitle && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-center text-white space-y-4 animate-fade-in", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl sm:text-5xl uppercase tracking-wider animate-pixelated-fade-in animate-delay-[0.5s]", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, "持続可能な未来へ"), /*#__PURE__*/ React.createElement("h2", { className: "text-xl sm:text-2xl animate-pixelated-fade-in animate-delay-[1.5s]", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, "中小企業の脱炭素経営をサポート")), !showTitle && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-between animate-fade-in", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white text-lg sm:text-xl ml-8 sm:ml-16", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "menu"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-6 sm:space-y-8 text-white text-base sm:text-lg mr-8 sm:mr-16", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "hover:scale-110 transition-transform duration-300 hover:mb-2 sm:hover:mb-3", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "持続可能な未来に向けて"), /*#__PURE__*/ React.createElement("div", { className: "hover:scale-110 transition-transform duration-300 hover:my-2 sm:hover:my-3", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "事業内容と対象者"), /*#__PURE__*/ React.createElement("div", { className: "hover:scale-110 transition-transform duration-300 hover:my-2 sm:hover:my-3", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, "一般社団法人カーボンニュートラル・ウェルビーイング・ラボについて"), /*#__PURE__*/ React.createElement("div", { className: "hover:scale-110 transition-transform duration-300 hover:mt-2 sm:hover:mt-3", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "お問い合わせ・お申し込み"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, ` @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .animate-fade-in { animation: fade-in 1s ease-out; } @keyframes pixelated-fade-in { 0% { opacity: 0; filter: blur(8px); } 100% { opacity: 1; filter: blur(0); } } .animate-pixelated-fade-in { animation: pixelated-fade-in 2s ease-out; } @keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } .animate-fade-out { animation: fade-out 1s ease-in forwards; } `)); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this })); }