body {
    color: #323232;
    height: 100vh;
    font-family: "noto-sans-cjk-jp", sans-serif;
    font-weight: 400;
    margin: 0 auto !important;
    max-width: 700px;
}

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

p {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

button {
    cursor: pointer;
    color: #323232;
    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%;
}

section {
    position: relative;
}

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

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

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

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

.block {
    display: block;
}

.cw-20 {
    width: calc(100% - (20px * 2));
    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: 40px 0;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.gap-10 {
    gap: 10px !important;
}
.gap-15 {
    gap: 15px !important;
}

.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 / 393)* 100vw);
}

/* フォント */
.c-white {
    color: white;
}

.c-water {
    color: #55A8E8;
}

.lh-12 {
    line-height: 1.2;
}

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

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

.f-bd {
    font-weight: bold;
}

.no-li {
    font-family: "noto-sans-cjk-jp", sans-serif;
    font-weight: 200;
}
.no-re {
    font-family: "noto-sans-cjk-jp", sans-serif;
    font-weight: 400;
}
.no-me {
    font-family: "noto-sans-cjk-jp", sans-serif;
    font-weight: 500;
}
.no-bo {
    font-family: "noto-sans-cjk-jp", sans-serif;
    font-weight: 700;
}
.no-bl {
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
}

.f-10 { font-size: clamp(10px, calc((10 / 700) * 100vw), 10px); }
.f-12 { font-size: clamp(12px, calc((12 / 700) * 100vw), 12px); }
.f-14 { font-size: clamp(14px, calc((14 / 700) * 100vw), 14px); }
.f-16 { font-size: clamp(16px, calc((16 / 700) * 100vw), 16px); }
.f-18 { font-size: clamp(18px, calc((18 / 700) * 100vw), 18px); }
.f-20 { font-size: clamp(20px, calc((20 / 700) * 100vw), 20px); }
.f-22 { font-size: clamp(22px, calc((22 / 700) * 100vw), 22px); }
.f-24 { font-size: clamp(24px, calc((24 / 700) * 100vw), 24px); }
.f-26 { font-size: clamp(26px, calc((26 / 700) * 100vw), 26px); }
.f-28 { font-size: clamp(28px, calc((28 / 700) * 100vw), 28px); }
.f-30 { font-size: clamp(30px, calc((30 / 700) * 100vw), 30px); }
.f-32 { font-size: clamp(32px, calc((32 / 700) * 100vw), 32px); }
.f-34 { font-size: clamp(34px, calc((34 / 700) * 100vw), 34px); }
.f-36 { font-size: clamp(36px, calc((36 / 700) * 100vw), 36px); }
.f-38 { font-size: clamp(38px, calc((38 / 700) * 100vw), 38px); }
.f-40 { font-size: clamp(40px, calc((40 / 700) * 100vw), 40px); }
.f-42 { font-size: clamp(42px, calc((42 / 700) * 100vw), 42px); }
.f-44 { font-size: clamp(44px, calc((44 / 700) * 100vw), 44px); }
.f-46 { font-size: clamp(46px, calc((46 / 700) * 100vw), 46px); }
.f-48 { font-size: clamp(48px, calc((48 / 700) * 100vw), 48px); }
.f-50 { font-size: clamp(50px, calc((50 / 700) * 100vw), 50px); }




/* マージン */

.mb-5 { margin-bottom: clamp(5px, calc((5 / 700) * 100vw), 5px) !important;}
.mb-10 { margin-bottom: clamp(10px, calc((10 / 700) * 100vw), 10px) !important;}
.mb-15 { margin-bottom: clamp(15px, calc((15 / 700) * 100vw), 15px) !important;}
.mb-20 { margin-bottom: clamp(20px, calc((20 / 700) * 100vw), 20px) !important;}
.mb-25 { margin-bottom: clamp(25px, calc((25 / 700) * 100vw), 25px) !important;}
.mb-30 { margin-bottom: clamp(30px, calc((30 / 700) * 100vw), 30px) !important;}
.mb-35 { margin-bottom: clamp(35px, calc((35 / 700) * 100vw), 35px) !important;}
.mb-40 { margin-bottom: clamp(40px, calc((40 / 700) * 100vw), 40px) !important;}
.mb-45 { margin-bottom: clamp(45px, calc((45 / 700) * 100vw), 45px) !important;}
.mb-50 { margin-bottom: clamp(50px, calc((50 / 700) * 100vw), 50px) !important;}
.mb-55 { margin-bottom: clamp(55px, calc((55 / 700) * 100vw), 55px) !important;}
.mb-60 { margin-bottom: clamp(60px, calc((60 / 700) * 100vw), 60px) !important;}
.mb-65 { margin-bottom: clamp(65px, calc((65 / 700) * 100vw), 65px) !important;}
.mb-70 { margin-bottom: clamp(70px, calc((70 / 700) * 100vw), 70px) !important;}
.mb-75 { margin-bottom: clamp(75px, calc((75 / 700) * 100vw), 75px) !important;}
.mb-80 { margin-bottom: clamp(80px, calc((80 / 700) * 100vw), 80px) !important;}
.mb-85 { margin-bottom: clamp(85px, calc((85 / 700) * 100vw), 85px) !important;}
.mb-90 { margin-bottom: clamp(90px, calc((90 / 700) * 100vw), 90px) !important;}
.mb-95 { margin-bottom: clamp(95px, calc((95 / 700) * 100vw), 95px) !important;}
.mb-100 { margin-bottom: clamp(100px, calc((100 / 700) * 100vw), 100px) !important;}