.content{
    position: relative;
    min-height: 100vh;
    text-align: center;
    width: min(100%, 1400px);
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 3rem) clamp(0.75rem, 4vw, 3rem) 4rem;
    overflow-x: hidden;
}

.font-h2{
    font-size: clamp(2rem, 5vw, 4.5rem);
    font-family: 'HG行書体';
    font-weight:bold;
}

.plan-title{
    margin: 0 0 clamp(1.5rem, 4vw, 3.5rem);
}

.plan-name{
    z-index: 1;
    position: relative;
}


.plan-content{
    display: flex;
    position: relative;
    flex-direction:column;
    gap: clamp(2.5rem, 6vw, 5rem);
}

.plan-card-container{
    display: grid;
    position:relative;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: clamp(1.5rem, 3vw, 3rem);
    width:100%;
}

.plan-card{
    display:grid;
    position:relative;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    width: 100%;
    min-width: 0;
    align-items: center;
    text-align: center;
}

.plan-card:hover {
  opacity: 0.8;
  transition: background 0.3s ease;
}

.plan-label{
    grid-row: 1;
    width: 100%;
    margin: 0 0 0.35rem;
    line-height: 1.2;
}

.plan-haikei{
    grid-row: 2;
    grid-column: 1;
    position:relative;
    display:block;
    width:100%;
    height:auto;
    object-fit:cover;
    pointer-events:none;
    z-index:0;
}

.plan-img{
    grid-row: 2;
    grid-column: 1;
    position:relative;
    align-self:center;
    justify-self:center;
    width: clamp(5rem, 10vw, 9rem);
    max-width: 45%;
    aspect-ratio: 1 / 1;
    object-fit:cover;
    z-index:1;
    box-shadow:
        1vh 1vh 0px #656665, 0px 0px 0px #ffffff,
        0px 0px 0px #ffffff,  0px 0px 0px #ffffff,
        0px 0px 0px #ffffff, 0px 0px 0px #ffffff,
        0px 0px 0px #ffffff,  0px 0px 0px #ffffff;
}

.plan-name{
    grid-row: 3;
    position:relative;
    z-index:2;
    margin: 0.5rem 0 0;
    width: 100%;
    padding: 0 0.25rem;
    font-family: 'HG行書体';
    font-weight:bold;
    font-size: clamp(0.85rem, 1.8vw, 1.6rem);
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
}

@media (max-width: 800px){
    .plan-card-container{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .plan-img{
        width: clamp(4.5rem, 18vw, 7rem);
    }
}

@media (max-width: 520px){
    .plan-card-container{
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .plan-card{
        width: min(100%, 22rem);
        justify-self: center;
    }

    .plan-img{
        width: clamp(6rem, 32vw, 8rem);
    }
}