@charset "utf-8";

/* ==================== */
/* base */
/* ==================== */

:root {
    /* color */
    --base-white: #fcfcfc;
    --base-black: #282540;
    --base-gray: #f7efe6;
    --base-red: #FF3B2F;
    --base-green: #67bc5e;
}

html {
    /* remの基準 */
    font-size: 10px;

    color: #333;
    font-family: "Noto Sans JP", "sans-serif";
}

body {
    overflow-x: hidden;
    font-size: 1.5rem;
    background-color: var(--base-white);
}

main {
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

li {
    list-style: none;
}

a {
    display: block;
    text-decoration: none;
    color: #333;
}

/* SP */
.sp-none {
    display: none;
}

/* PC */
@media screen and (min-width:1060px) {
    .sp-none {
        display: block;
    }

    .pc-none {
        display: none;
    }
}

/* ==================== */
/* header */
/* ==================== */

header {
    position: fixed;
    top: 10px;
    left: 50%;
    width: 95%;
    transform: translateX(-50%);
    background-color: var(--base-white);
    box-shadow: 4px 4px 4px 0 #14354D33;
    /* 最上層レイヤーにおいで */
    z-index: 1000;
}

/* ロゴ対navかハンバーガーを横並びにして両端に配置 */
header .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 20px;
    height: 50px;
}

header li {
    font-family: "kiwi maru", "Noto sans JP", "sans-serif";
}

header a {
    color: var(--base-green);
}

.logo {
    width: 200px;
}

.ooo {
    color: var(--base-green);
}

.hamburger span {
    display: block;

    background-color: var(--base-green);
    height: 1.5px;
    width: 20px;
}

.hamburger span+span {
    margin-top: 6px;
}

/* ---------- */
/* pc */
@media screen and (min-width: 1060px) {
    header .inner {
        height: 70px;
        padding: 0 30px;
    }

    .logo {
        width: 350px;
    }

    .h-nav ul {
        display: flex;
        gap: 37px;
    }
}

/* =========================================== */
/* footer */
/* ======================================== */

footer {
    height: 10vh;
    background-color: var(--base-green);
    text-align: center;
}


/* =========================================== */
/* TOPに戻るボタン */
/* ======================================== */

.scrollTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;

    height: 50px;
    background-color: var(--base-red);
    color: var(--base-green);
    font-size: 24px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    cursor: pointer;

    opacity: 0;
    /* visibility: hidden; */
    pointer-events: none;
    transition: opacity 0.5s;
}

.scrollTop.show {
    opacity: 1;
    /* visibility: visible; */
    pointer-events: auto;
    transition: 0.5s;
}