/* 
====================================================*/
.home-top {
    width: 100%;
}
.home-line {
    width: 90%;
}

.home-top-button-wrap {
    background: url("./img/button/button-bg.png") center/cover no-repeat;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 auto;
    justify-content: center;
    padding: 20px 0;
    align-items: stretch;
}
.home-top-button-wrap a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45%;
    padding: 6%;
    background-color: #000000aa;
    border-radius: 12px;
    font-size: clamp(0.875rem, 0.5114rem + 1.8182vw, 1.875rem);
    border: 4px solid #fff;
    color: #fff;
}
.home-top-button-wrap a::before {
    content: "▶";
    margin-right: clamp(0.4375rem, 0.2784rem + 0.7955vw, 0.875rem);
    font-size: clamp(0.4375rem, 0.2784rem + 0.7955vw, 0.875rem);
}
.home-top-button-wrap .on {
    filter: drop-shadow(0px 0px 4px #fff);
    background-color: #000;
    color: #fff;
}
.home-top-button-wrap .on::before {
    content: "▼";
    margin-right: clamp(0.4375rem, 0.2784rem + 0.7955vw, 0.875rem);
    font-size: clamp(0.4375rem, 0.2784rem + 0.7955vw, 0.875rem);
}
.home-top-button-wrap a:hover {
    filter: brightness(1.3);
    opacity: 1;
    background-color: #000000eb;
}

.home-register-text {
    position: relative;
    border-radius: 12px;
    padding: clamp(1.25rem, 1.0227rem + 1.1364vw, 1.875rem)
        clamp(1.25rem, 0.7955rem + 2.2727vw, 2.5rem)
        clamp(1.25rem, 0.7955rem + 2.2727vw, 2.5rem);
    display: inline-block;
    background: #3a3a3ad3;
    color: white;
    overflow: hidden;
    width: 90%;
    margin: 20px 0;
    line-height: 1.5;
    text-align: left;
    box-shadow: inset 0 0 30px rgb(175, 175, 175), 0 0 40px rgb(73, 73, 73);
}
.home-register-text p {
    font-size: clamp(1.375rem, 0.7386rem + 3.1818vw, 3.125rem);
    text-align: center;
    position: relative;
}
.home-register-text p::before,
.home-register-text p::after {
    content: "─";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: inherit;
}
.home-register-text p::before {
    right: 25%;
}
.home-register-text p::after {
    left: 25%;
}
.home-register-text li {
    font-size: clamp(0.875rem, 0.625rem + 1.25vw, 1.5625rem);
    margin: 15px 0;
    padding: 0 2%;
    list-style: inside;
}
.home-register-text::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 6px;
    background: linear-gradient(45deg, #888, #bbb, #ddd, #bbb, #888);
    -webkit-mask: linear-gradient(white 0 0) content-box,
        linear-gradient(white 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    z-index: -1;
}

/* home1
  ====================================================*/
.home1 {
    /* background: url("./img/home1/home1.png") center/cover no-repeat; */
    background: #0000008d;
    padding: clamp(1.125rem, 0.5114rem + 3.0682vw, 2.8125rem) 0;
}
@media screen and (max-width: 500px) {
    .home1 {
        background: #00000094;
    }
}
.home1-title {
    color: #fff;
    font-size: clamp(1.375rem, 0.7386rem + 3.1818vw, 3.125rem);
    width: fit-content;
    margin: auto;
    padding: 0.5em 1em;
    text-align: center;
    position: relative;
}
.home1-title::before,
.home1-title::after {
    content: "";
    background-color: #fff;
    width: 50%;
    height: 3px;
    position: absolute;
}
.home1-title::before {
    top: 0;
    left: 0;
}
.home1-title::after {
    bottom: 0;
    right: 0;
}
.home1-description {
    font-size: clamp(0.875rem, 0.5114rem + 1.8182vw, 1.875rem);
    color: #fff;
    padding: 5%;
    text-align: left;
}
/* ステップ */
.home1-text {
    padding: 3% 0;
}
.home1-step {
    padding: 3% 7%;
    text-align: left;
    position: relative;
    font-size: clamp(0.875rem, 0.5114rem + 1.8182vw, 1.875rem);
    color: #fff;
}
.home1-step::before {
    content: attr(data-number);
    display: inline-block;
    margin-right: clamp(0.4375rem, 0.142rem + 1.4773vw, 1.25rem);
    color: #000;
    font-size: clamp(0.875rem, 0.5114rem + 1.8182vw, 1.875rem);
    background-color: #fff;
    padding: clamp(0.125rem, 0.0795rem + 0.2273vw, 0.25rem)
        clamp(0.75rem, 0.5682rem + 0.9091vw, 1.25rem);
    border-radius: 3px;
}
.home1-register-text {
    position: relative;
    border-radius: 12px;
    padding: 20px;
    display: inline-block;
    background: #3a3a3ad3;
    color: white;
    overflow: hidden;
    width: 90%;
    margin: 20px 0;
    line-height: 1.5;
    text-align: left;
    box-shadow: inset 0 0 30px rgb(175, 175, 175), 0 0 40px rgb(73, 73, 73);
}
.home1-register-text p {
    font-size: clamp(1rem, 0.2875rem + 3.8vw, 2.1875rem);
    text-align: center;
    position: relative;
}
.home1-register-text p::before,
.home1-register-text p::after {
    content: "─";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: inherit;
}
.home1-register-text p::before {
    right: 32%;
}
.home1-register-text p::after {
    left: 32%;
}
@media screen and (max-width: 500px) {
    .home1-register-text p::before {
        right: 22%;
    }
    .home1-register-text p::after {
        left: 22%;
    }
}
.home1-register-text li {
    font-size: clamp(0.875rem, 0.625rem + 1.25vw, 1.5625rem);
    margin: 15px 0;
    list-style: inside;
    padding: 0 2%;
}
.home1-register-text::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 6px;
    background: linear-gradient(45deg, #222, #444, #666, #444, #222);
    -webkit-mask: linear-gradient(white 0 0) content-box,
        linear-gradient(white 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}

/* home2
  ====================================================*/
/* ステップ */
.home2-step-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5%;
}

.home2-step {
    padding-left: 0;
}

.home2-step > li {
    list-style-type: none;
    border: 4px solid #fff;
    filter: drop-shadow(0px 0px 4px #fff);
    padding: 4%;
    border-radius: 4%;
    background-color: #000000ea;
    color: #fff;
}

.home2-step > li:not(:last-child) {
    margin-bottom: 40px;
    position: relative;
}

.home2-step > li:not(:last-child)::after {
    content: "";
    position: absolute;
    border: 20px solid transparent;
    width: 0;
    height: 0;
    bottom: -53px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    border-top-color: #fff;
}

.home2-step > li dl dt {
    font-size: clamp(0.875rem, 0.625rem + 1.25vw, 1.5625rem);
    font-weight: bold;
    border-bottom: 2pt dashed #ccc;
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
}

.home2-step > li p {
    color: #fff;
    padding-top: 0.5em;
}

.home2-step > li dl dd {
    margin: 0;
}

/* home3
  ====================================================*/
.home3-card-wrap {
    padding: 4%;
}
.home3-card-wrap .card {
    margin: 70px 0;
    position: relative;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-basis: 48%;
    word-wrap: break-word;
    background-color: #000000aa;
    background-clip: border-box;
    border: 0;
    border-radius: 0.25rem;
    box-shadow: 0 0px 20px #ccc;
    text-decoration: none;
    border: 3px solid #949494;
}
.home3-card-wrap .card-image {
    position: absolute;
    top: -2rem;
    width: 30%;
    box-sizing: border-box;
    border: 5px solid #fefefe;
    border-radius: 5px;
    object-fit: cover;
}
.home3-card-wrap .card-box {
    padding: 30% 1rem 1rem;
    color: white;
}
.home3-card-wrap .card-title {
    margin-bottom: 0.5rem;
    width: 50%;
    margin: clamp(0.4375rem, 0.142rem + 1.4773vw, 1.25rem) auto
        clamp(0.875rem, 0.625rem + 1.25vw, 1.5625rem);
    display: block;
}
.home3-card-wrap .card-description {
    margin-bottom: 0.5rem;
    line-height: 1.5;
    font-size: clamp(0.875rem, 0.625rem + 1.25vw, 1.5625rem);
}
@media screen and (max-width: 500px) {
    .home3-card-wrap .card-image {
        width: 50%;
    }
    .home3-card-wrap .card-box {
        padding: 45% 1rem 1rem;
    }
    .home3-card-wrap .card-title {
        width: 80%;
    }
}