@charset "UTF-8";

:root {
    --beige: #fafbe6;
    --white: #fcfcef;
    --skyblue: #98d2c0;
    --emeraldgreen: #03aa9d;
    --navy: #215881;
}

body {
    background-color: var(--beige);
    font-family: Zen Kaku Gothic New;
}

.panel {
    width: 100%;
    max-width: 375px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
    padding: 0 35px;
    box-sizing: border-box;
    margin: 0 auto;
}

.panel-card {
    background: var(--white);
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    text-decoration: none;
    box-sizing: border-box;
    padding: 10px;
    transition: transform 0.15s;
    margin-top: 20px;
}

.panel-card:hover {
    opacity: 0.7;
    transform: translateY(3px) translateX(3px);
    box-shadow: 0 0 0 var(--emeraldgreen);
}

.type-A {
    border: 10px solid var(--skyblue);
    box-shadow: 4px 4px 0px var(--navy);
}

.type-A::before {
    content: '';
    position: absolute;
    top: -18px;
    left: -18px;
    width: 50%;
    height: 50%;
    border-top: 3px solid var(--emeraldgreen);
    border-left: 3px solid var(--emeraldgreen);
}

.type-A::after {
    content: '';
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 50%;
    height: 50%;
    border-bottom: 3px solid var(--emeraldgreen);
    border-right: 3px solid var(--emeraldgreen);
}

.type-B {
    border: 10px solid var(--emeraldgreen);
    box-shadow: 4px 4px 0px var(--navy);
}

.type-B::before {
    content: '';
    position: absolute;
    top: -18px;
    left: -18px;
    width: 50%;
    height: 50%;
    border-top: 3px solid var(--skyblue);
    border-left: 3px solid var(--skyblue);
}

.type-B::after {
    content: '';
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 50%;
    height: 50%;
    border-bottom: 3px solid var(--skyblue);
    border-right: 3px solid var(--skyblue);
}

.panel-title {
    font-size: 14px;
    color: var(--black);
    letter-spacing: 0.08px;
    text-align: center;
}

.img-toujitsu_info {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

footer,
.footer,
[class*="footer"] {
    display: block !important;
    width: 100% !important;
}