H-ymt

AI エージェント設定

設計作業ルール

設計作業を依頼された場合は、以下のルールに従ってファイルを作成すること：

• ファイル名: YYYYMMDD_HHMM_{日本語の作業内容}.md
• 保存場所: docs/ 以下
• フォーマット: Markdown

H-ymt

import clsx from "clsx";
import styles from "./index.module.css";
import Link from "next/link";

type ButtonProps = {
  children: React.ReactNode;
  className?: string;
  visual?: "primary" | "secondary";
  size?: "sm" | "md" | "lg";

H-ymt

<div class="loop">
  <p aria-hidden="true">A Future of Smiles and Growth</p>
  <p aria-hidden="true">A Future of Smiles and Growth</p>
</div>

.loop {
 position: absolute;

H-ymt

<button type="button" class="openModal js-modalTrigger" data-modal-id="dialog1">Open Modal</button>
<dialog id="dialog1" aria-label="Modal name" class="dialog scrollControl js-modal">
  <div class="modal__inner js-modalContent">
    <h1 class="modal__title">Lorem ipsum dolor sit.</h1>
    <p class="modal__text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa cumque odit quaerat libero, facere tempora placeat molestias eum sed
      error rerum quisquam veritatis. Excepturi beatae ut vitae autem saepe expedita!
    </p>
    <button type="button" class="closeModal js-modalClose">Close Modal</button>
  </div>

H-ymt

document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(".js-details").forEach((el) => {
    const summary = el.querySelector(".js-summary")
    const content = el.querySelector(".js-content")

    summary.addEventListener("click", (event) => toggleContent(el, content, event))
  })
})

const animTiming = {

H-ymt

// ビューポートのサイズを取得する
const viewportSize = () => {
  const vw = window.innerWidth * 0.01
  const vh = window.innerHeight * 0.01

  document.documentElement.style.setProperty("--vw", `${vw}px`)
  document.documentElement.style.setProperty("--vh", `${vh}px`)
}

// 375px以下のビューポートを固定

H-ymt

// 三点リーダー
@mixin line-clamp($num, $num-sp: null) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $num;
  overflow: hidden;

  @if $num-sp {
    @include sp {
      -webkit-line-clamp: $num-sp;

H-ymt

*,
::before,
::after {
  --clamp-root-font-size: 16;
  --clamp-slope: calc(
    (var(--clamp-max) - var(--clamp-min)) /
      (var(--clamp-viewport-max) - var(--clamp-viewport-min))
  );
  --clamp-y-axis-intersection: calc(
    var(--clamp-min) - (var(--clamp-slope) * var(--clamp-viewport-min))

H-ymt

   <div class="tabs-container">
        <div class="tabs-list" role="tablist" aria-label="サンプルタブ">
            <button class="tab" role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1" tabindex="0">
                タブ1
            </button>
            <button class="tab" role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">
                タブ2
            </button>
            <button class="tab" role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3" tabindex="-1">
                タブ3

H-ymt

document.addEventListener("DOMContentLoaded", () => {
  const handleInternalLink = (e) => {
    e.preventDefault()
    const targetId = e.currentTarget.getAttribute("href").slice(1)
    const targetElement = document.getElementById(targetId)
    if (targetElement) {
      const headerHeight = document.querySelector("header")?.offsetHeight || 0
      const scrollToPosition = targetElement.offsetTop - headerHeight
      window.scrollTo({
        top: scrollToPosition,