body {
    color: black;
    height: 100vh;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    letter-spacing: 0.05em;
}

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

p {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

button {
    cursor: pointer;
    color: black;
    border: none;
    background-color: white;
}

img {
    max-width: 100%;
    vertical-align: bottom;
    object-fit: cover;
}

.img > img {
    width: 100%;
    height: 100%;
}

input {
    padding: 0;
}

dl {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.sp {
    display: none !important;
}
@media (max-width: 768px) {
    .sp {
        display: block !important;
    }
}

@media (max-width: 768px) {
    .pc {
        display: none;
    }
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.posi-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.block {
    display: block;
}

.cw-150 {
    width: calc(100% - calc((300 / 1400) * 100vw));
    margin: 0 auto;
}

.ma-auto {
    margin-right: auto;
    margin-left: auto;
}

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

.w-100 {
    width: 100%;
}

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

.o-hov, .o-hov-w a {
    opacity: 1;
    transition: all 0.3s;
}
.o-hov:hover, .o-hov-w a:hover {
    opacity: 0.5;
}

.se-pd {
    padding: calc((90 / 1400)* 100vw) 0;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.gap-50 {
    gap: calc((50 / 1400)* 100vw);
}
.gap-100 {
    gap: calc((100 / 1400)* 100vw);
}

.posi-re {
    position: relative;
}

.posi-ab {
    position: absolute;
}

.x-50 {
    left: 50%;
    transform: translateX(-50%);
}

.y-50 {
    top: 50%;
    transform: translateY(-50%);
}

.z--1 {
    z-index: -1;
}

.rad-50 {
    border-radius: calc((50 / 1400)* 100vw);
}

.c-white {
    color: white;
}

@media (max-width: 768px) {
    .cw-300 {
        width: calc(100% - 40px);
    }

    .se-pd {
        padding: 70px 0;
    }

    .grid-3 {
        grid-template-columns: repeat(1, 1fr);
    }
    .grid-2 {
        grid-template-columns: repeat(1, 1fr);
    }
    .gap-50 {
        gap: 50px;
    }
    .gap-100 {
        gap: 50px;
    }

    .rad-50 {
        border-radius: 50px;
    }
}


.lh-15 {
    line-height: 1.5;
}

.lh-2 {
    line-height: 2;
}

.f-500 {
    font-weight: 500;
}
.f-700 {
    font-weight: 700;
}
.f-900 {
    font-weight: 900;
}

.f-2 { font-size: calc((2 / 1400) * 100vw); }
.f-4 { font-size: calc((4 / 1400) * 100vw); }
.f-6 { font-size: calc((6 / 1400) * 100vw); }
.f-8 { font-size: calc((8 / 1400) * 100vw); }
.f-10 { font-size: calc((10 / 1400) * 100vw); }
.f-12 { font-size: calc((12 / 1400) * 100vw); }
.f-14 { font-size: calc((14 / 1400) * 100vw); }
.f-16 { font-size: calc((16 / 1400) * 100vw); }
.f-18 { font-size: calc((18 / 1400) * 100vw); }
.f-20 { font-size: calc((20 / 1400) * 100vw); }
.f-22 { font-size: calc((22 / 1400) * 100vw); }
.f-24 { font-size: calc((24 / 1400) * 100vw); }
.f-26 { font-size: calc((26 / 1400) * 100vw); }
.f-28 { font-size: calc((28 / 1400) * 100vw); }
.f-30 { font-size: calc((30 / 1400) * 100vw); }
.f-32 { font-size: calc((32 / 1400) * 100vw); }
.f-34 { font-size: calc((34 / 1400) * 100vw); }
.f-36 { font-size: calc((36 / 1400) * 100vw); }
.f-38 { font-size: calc((38 / 1400) * 100vw); }
.f-40 { font-size: calc((40 / 1400) * 100vw); }
.f-42 { font-size: calc((42 / 1400) * 100vw); }
.f-44 { font-size: calc((44 / 1400) * 100vw); }
.f-46 { font-size: calc((46 / 1400) * 100vw); }
.f-48 { font-size: calc((48 / 1400) * 100vw); }
.f-50 { font-size: calc((50 / 1400) * 100vw); }
.f-52 { font-size: calc((52 / 1400) * 100vw); }
.f-54 { font-size: calc((54 / 1400) * 100vw); }
.f-56 { font-size: calc((56 / 1400) * 100vw); }
.f-58 { font-size: calc((58 / 1400) * 100vw); }
.f-60 { font-size: calc((60 / 1400) * 100vw); }
.f-62 { font-size: calc((62 / 1400) * 100vw); }
.f-64 { font-size: calc((64 / 1400) * 100vw); }
.f-66 { font-size: calc((66 / 1400) * 100vw); }
.f-68 { font-size: calc((68 / 1400) * 100vw); }
.f-70 { font-size: calc((70 / 1400) * 100vw); }
.f-72 { font-size: calc((72 / 1400) * 100vw); }
.f-74 { font-size: calc((74 / 1400) * 100vw); }
.f-76 { font-size: calc((76 / 1400) * 100vw); }
.f-78 { font-size: calc((78 / 1400) * 100vw); }
.f-80 { font-size: calc((80 / 1400) * 100vw); }
.f-82 { font-size: calc((82 / 1400) * 100vw); }
.f-84 { font-size: calc((84 / 1400) * 100vw); }
.f-86 { font-size: calc((86 / 1400) * 100vw); }
.f-88 { font-size: calc((88 / 1400) * 100vw); }
.f-90 { font-size: calc((90 / 1400) * 100vw); }
.f-92 { font-size: calc((92 / 1400) * 100vw); }
.f-94 { font-size: calc((94 / 1400) * 100vw); }
.f-96 { font-size: calc((96 / 1400) * 100vw); }
.f-98 { font-size: calc((98 / 1400) * 100vw); }
.f-100 { font-size: calc((100 / 1400) * 100vw); }

@media (max-width: 768px) {
  .f-2 { font-size: 2px; }
  .f-4 { font-size: 4px; }
  .f-6 { font-size: 6px; }
  .f-8 { font-size: 8px; }
  .f-10 { font-size: 10px; }
  .f-12 { font-size: 12px; }
  .f-14 { font-size: 14px; }
  .f-16 { font-size: 16px; }
  .f-18 { font-size: 18px; }
  .f-20 { font-size: 20px; }
  .f-22,
  .f-24,
  .f-26,
  .f-28 { font-size: 22px; }
  .f-30,
  .f-32,
  .f-34,
  .f-36,
  .f-38,
  .f-40 { font-size: 24px; }
  .f-42,
  .f-44,
  .f-46,
  .f-48,
  .f-50 { font-size: 26px; }
  .f-52,
  .f-54,
  .f-56,
  .f-58,
  .f-60 { font-size: 30px; }
  .f-62,
  .f-64,
  .f-66,
  .f-68,
  .f-70 { font-size: 34px; }
  .f-72,
  .f-74,
  .f-76,
  .f-78,
  .f-80 { font-size: 38px; }
  .f-82,
  .f-84,
  .f-86,
  .f-88,
  .f-90 { font-size: 42px; }
  .f-92,
  .f-94,
  .f-96,
  .f-98,
  .f-100 { font-size: 46px; }
}



/* マージン */

.mb-5 { margin-bottom: calc((5 / 1400) * 100vw); }
.mb-10 { margin-bottom: calc((10 / 1400) * 100vw); }
.mb-15 { margin-bottom: calc((15 / 1400) * 100vw); }
.mb-20 { margin-bottom: calc((20 / 1400) * 100vw); }
.mb-25 { margin-bottom: calc((25 / 1400) * 100vw); }
.mb-30 { margin-bottom: calc((30 / 1400) * 100vw); }
.mb-35 { margin-bottom: calc((35 / 1400) * 100vw); }
.mb-40 { margin-bottom: calc((40 / 1400) * 100vw); }
.mb-45 { margin-bottom: calc((45 / 1400) * 100vw); }
.mb-50 { margin-bottom: calc((50 / 1400) * 100vw); }
.mb-55 { margin-bottom: calc((55 / 1400) * 100vw); }
.mb-60 { margin-bottom: calc((60 / 1400) * 100vw); }
.mb-65 { margin-bottom: calc((65 / 1400) * 100vw); }
.mb-70 { margin-bottom: calc((70 / 1400) * 100vw); }
.mb-75 { margin-bottom: calc((75 / 1400) * 100vw); }
.mb-80 { margin-bottom: calc((80 / 1400) * 100vw); }
.mb-85 { margin-bottom: calc((85 / 1400) * 100vw); }
.mb-90 { margin-bottom: calc((90 / 1400) * 100vw); }
.mb-95 { margin-bottom: calc((95 / 1400) * 100vw); }
.mb-100 { margin-bottom: calc((100 / 1400) * 100vw); }
.mb-105 { margin-bottom: calc((105 / 1400) * 100vw); }
.mb-110 { margin-bottom: calc((110 / 1400) * 100vw); }
.mb-115 { margin-bottom: calc((115 / 1400) * 100vw); }
.mb-120 { margin-bottom: calc((120 / 1400) * 100vw); }
.mb-125 { margin-bottom: calc((125 / 1400) * 100vw); }
.mb-130 { margin-bottom: calc((130 / 1400) * 100vw); }
.mb-135 { margin-bottom: calc((135 / 1400) * 100vw); }
.mb-140 { margin-bottom: calc((140 / 1400) * 100vw); }
.mb-145 { margin-bottom: calc((145 / 1400) * 100vw); }
.mb-150 { margin-bottom: calc((150 / 1400) * 100vw); }
.mb-155 { margin-bottom: calc((155 / 1400) * 100vw); }
.mb-160 { margin-bottom: calc((160 / 1400) * 100vw); }
.mb-165 { margin-bottom: calc((165 / 1400) * 100vw); }
.mb-170 { margin-bottom: calc((170 / 1400) * 100vw); }
.mb-175 { margin-bottom: calc((175 / 1400) * 100vw); }
.mb-180 { margin-bottom: calc((180 / 1400) * 100vw); }
.mb-185 { margin-bottom: calc((185 / 1400) * 100vw); }
.mb-190 { margin-bottom: calc((190 / 1400) * 100vw); }
.mb-195 { margin-bottom: calc((195 / 1400) * 100vw); }
.mb-200 { margin-bottom: calc((200 / 1400) * 100vw); }
.mb-205 { margin-bottom: calc((205 / 1400) * 100vw); }
.mb-210 { margin-bottom: calc((210 / 1400) * 100vw); }
.mb-215 { margin-bottom: calc((215 / 1400) * 100vw); }
.mb-220 { margin-bottom: calc((220 / 1400) * 100vw); }
.mb-225 { margin-bottom: calc((225 / 1400) * 100vw); }
.mb-230 { margin-bottom: calc((230 / 1400) * 100vw); }
.mb-235 { margin-bottom: calc((235 / 1400) * 100vw); }
.mb-240 { margin-bottom: calc((240 / 1400) * 100vw); }
.mb-245 { margin-bottom: calc((245 / 1400) * 100vw); }
.mb-250 { margin-bottom: calc((250 / 1400) * 100vw); }
.mb-255 { margin-bottom: calc((255 / 1400) * 100vw); }
.mb-260 { margin-bottom: calc((260 / 1400) * 100vw); }
.mb-265 { margin-bottom: calc((265 / 1400) * 100vw); }
.mb-270 { margin-bottom: calc((270 / 1400) * 100vw); }
.mb-275 { margin-bottom: calc((275 / 1400) * 100vw); }
.mb-280 { margin-bottom: calc((280 / 1400) * 100vw); }
.mb-285 { margin-bottom: calc((285 / 1400) * 100vw); }
.mb-290 { margin-bottom: calc((290 / 1400) * 100vw); }
.mb-295 { margin-bottom: calc((295 / 1400) * 100vw); }
.mb-300 { margin-bottom: calc((300 / 1400) * 100vw); }


@media (max-width: 768px) {
  .mb-5 { margin-bottom: 5px; }
  .mb-10 { margin-bottom: 12px; }
  .mb-15,
  .mb-20,
  .mb-25,
  .mb-30 { margin-bottom: 15px; }

  .mb-35,
  .mb-40 { margin-bottom: 30px; }

  .mb-45,
  .mb-50,
  .mb-55,
  .mb-60 { margin-bottom: 35px; }

  .mb-65,
  .mb-70 { margin-bottom: 45px; }

  .mb-75,
  .mb-80,
  .mb-85,
  .mb-90,
  .mb-95,
  .mb-100,
  .mb-105,
  .mb-110,
  .mb-115,
  .mb-120 { margin-bottom: 50px; }

  .mb-125,
  .mb-130,
  .mb-135,
  .mb-140,
  .mb-145,
  .mb-150 { margin-bottom: 60px; }

  .mb-155,
  .mb-160,
  .mb-165,
  .mb-170,
  .mb-175,
  .mb-180,
  .mb-185,
  .mb-190,
  .mb-195,
  .mb-200 { margin-bottom: 80px; }

  .mb-205,
  .mb-210,
  .mb-215,
  .mb-220,
  .mb-225,
  .mb-230,
  .mb-235,
  .mb-240,
  .mb-245,
  .mb-250 { margin-bottom: 100px; }

  .mb-255,
  .mb-260,
  .mb-265,
  .mb-270,
  .mb-275,
  .mb-280,
  .mb-285,
  .mb-290,
  .mb-295,
  .mb-300 { margin-bottom: 120px; }
}