* {
    margin: 0;
    padding: 0;
}

div {
    text-align: center;
}

img {
    vertical-align: top;
}

html,
body {
    font-family: 'Noto Sans JP', sans-serif;
}

.w-fit {
    width: fit-content;
}

.static {
    position: static;
}

.fixed {
    position: fixed;
}

.text-center {
    text-align: center;
}

.w-75 {
    width: 75%;
}

.w-full {
    width: 100%;
    height: auto;
    max-width: 100%; /* 親要素の幅を超えないようにする */
}

.hero-banner {
    overflow-x: hidden;
}

img {
    width: 100%;
    height: auto;
}

.w-screen {
    width: 100vw;
}

.w {
    width: 48rem;
}

.mx-auto {
    margin: auto;
}

.mx-4 {
    margin-left: 1rem;
    /* 16px */
    margin-right: 1rem;
    /* 16px */
}

.mx-0 {
    margin-left: 0px;
    margin-right: 0px;
}

.block {
    display: block;
}

.flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.justify-center {
    justify-content: center;
}

.items-center {
    align-items: center;
}

.hidden {
    display: none;
}

.border-r {
    border-right: 1px;
}

.border-x {
    border-right: 1px;
    border-left: 1px;
}

.border-black {
    --tw-border-opacity: 1;
    border-color: rgb(0 0 0 / var(--tw-border-opacity));
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

ul {
    list-style: none;
}

.mt-4 {
    margin-top: 1rem;
}

.my-1 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.mt-8 {
    margin-top: 2rem;
}

.mt-12 {
    margin-top: 12rem;
}

.mt-2 {
    margin-top: 2rem;
}

.my-8-footer {
    margin-top: 2rem;
    margin-bottom: 7rem;
}

.p-0 {
    padding: 0;
}

.py-\[50px\] {
    padding-top: 50px;
    padding-bottom: 50px;
}

.text-\[12px\] {
    font-size: 12px;
}

.position-static {
    position: static;
}

.position-relative {
    position: relative;
}

.top-0 {
    top: 0
}

.mx-6 {
    margin-left: 1.5rem;
    /* 24px */
    margin-right: 1.5rem;
    /* 24px */
}

/* Animations */
@keyframes anime_cvbtn01 {
    from {
        transform: scale(0.9, 0.9);
    }

    to {
        transform: scale(1, 1);
    }
}

@keyframes zoomEffect {
    0%, 100% {
        transform: scale(1); /* 元のサイズ */
    }
    50% {
        transform: scale(1.1); /* 10%拡大 */
    }
}
.image-btn {
    display: block; /* 画像の余白問題を解決 */
    overflow: hidden;
}



@keyframes purupuru2 {
    0% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(0.98, 0.95)
    }
}





.button-animation {
    display: inline-block; /* 必要に応じて調整 */
    animation: purupuru2 1s infinite;
    transform-origin: center; /* 拡大縮小の基点を中央に指定 */

    /* 中央揃えや位置調整が必要な場合は以下を追加 */
    /* position: relative; */
    /* その他のスタイル */
    width: 100%;
    margin: auto;
    overflow: hidden;
}




.image-btn-wrapper {
    box-sizing: border-box;
    width: 97%;
    justify-content: center; /* 水平中央揃え */
    align-items: center; /* 垂直中央揃えが必要なら追加 */
    display: flex;
    position: absolute;
    top: 28%;
    left: 50%;
    transform: translateX(-50%); /* 左寄りになるのを防ぐ */
}





/* End Animation */

.cursor-pointer {
    cursor: pointer;
}

.w-64 {
    width: 16rem;
}

.w-auto {
    width: auto;
}

.cta-btn {
    position: fixed;
}

.left {
    left: 1rem;
}

.right {
    right: 1rem;
}

.bottom {
    bottom: 0rem;
}

.mb-1 {
    margin-bottom: 1rem;
}

.mt-1 {
    margin-top: 1rem;
}

.mb-\[0px\] {
    margin-bottom: 0px;
}

.mb-\[100px\] {
    margin-bottom: 100px;
}

.py-\[20px\] {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-\[30px\] {
    padding-top: 30px;
    padding-bottom: 30px;
}

.pt-100 {
    padding-top: 100px;
}

.pb-30 {
    padding-bottom: 30px;
}

footer ul li {
    font-weight: bold;
}

.mt-0 {
    margin-top: 0px;
}

.pt-1 {
    padding-top: 1rem;
}

.pb-0 {
    padding-bottom: 0rem;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.static {
    position: static;
}

.footer {
    padding: 2em 0;
    text-align: center;
    color: #666;
    line-height: 1.2;
    background-color: #f4f4f4;
    font-size: 12px;
}

.footer ul {
    padding: 0 0 1.5em 0;
    list-style: none;
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 5%;
}

footer ul li {
    padding: 0;
    border-right: 1px solid #666;
    display: inline-block;
}

.footer ul a {
    color: #666;
}

@media (min-width: 800px) {
    /* PC画面で幅を390pxに固定 */
    .w-390 {
        width: 390px;
        margin: auto;
    }
}

@media (min-width: 768px) {
    .md\:py-\[20px\] {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    

    .md\:mt-0 {
        margin-top: 0px;
    }

    .md\:my-8-footer {
        margin-top: 6rem;
        margin-bottom: 4rem;
    }

    .md\:py-\[50px\] {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .md\:fixed {
        position: fixed;
    }

    .md\:hidden {
        display: none
    }

    .md\:flex {
        display: flex !important;
    }

    .md\:block {
        display: block;
    }

    .md\:w-full {
        width: 100%;
    }

    .md\:w {
        width: 48rem;
    }

    .md\:w-64 {
        width: 16rem;
    }

    .md\:text-\[16px\] {
        font-size: 16px;
    }

    .md\:right {
        right: 1rem;
    }

    .md\:left {
        left: 1rem;
    }

    .md\:left-0 {
        left: unset;
    }

    .md\:mx-4 {
        margin-left: 1rem;
        /* 16px */
        margin-right: 1rem;
        /* 16px */
    }

    .md\:mx-0 {
        margin-left: 0px;
        margin-right: 0px;
    }

    .md\:mb-\[0px\] {
        margin-bottom: 0px;
    }

    .md\:w-64 {
        width: 16rem;
    }
}

@media (min-width: 640px) {
    .sm\:mx-0 {
        margin-left: 0rem;
        margin-right: 0rem;
    }

    .sm\:py-\[30px\] {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .sm\:hidden {
        display: none;
    }

    .sm\:flex {
        display: flex;
    }

    .sm\:w-full {
        width: 100%;
    }

    .sm\:w {
        width: 48rem;
    }

    .sm\:w-full {
        width: 100%;
    }

    .sm\:min-w-48 {
        min-width: 48rem;
    }

    .sm\:left {
        left: 1rem;
    }

    .sm\:left-0 {
        left: unset;
    }

    .sm\:right {
        right: 1rem;
    }

    .sm\:mx-4 {
        margin-left: 1rem;
        /* 16px */
        margin-right: 1rem;
        /* 16px */
    }

    .sm\:mx-0 {
        margin-left: 0px;
        margin-right: 0px;
    }
}