@charset "UTF-8";
/* tips.css - tipsページ個別スタイル */

: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-tips {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.img-tips-club {
    width: 40px;
    height: 40px; 
    object-fit: contain;
}

.img-tips-heart {
    width: 40px;
    height: 40px; 
    object-fit: contain;
}

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