/* grand style sheet 2.0 by Kenji */
/* accessibility */
.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* text size in JA */
/* Kenji TODO: change size between JA & EN */

/* headings */
h1 {
    font-size: 46px;
    line-height: 60px;
} 
@media (max-width: 430px){
    h1 {
        font-size: 32px;
        line-height: 48px;
    }
} 
h1.cate-title, h1.cate-title-side, h1.cate-title-side2 {
    color: #14415A;
    border-bottom: 5px solid #FFFF00;
    display: table;
    margin: 0 auto;
    padding: 0; }
/* Just in case the under score version is still used somewhere... */
h1.cate_title, h1.cate_title_side, h1.cate_title_side2 {
    font-size: 3.6rem;
    border-bottom: 5px solid #FFFF00;
    display: table;
    margin: 50px auto;
    padding: 0; }

h2 {
    font-size: 38px;
    line-height: 52px;
} 
@media (max-width: 430px){
    h2 {
        font-size: 21px;
        line-height: 28px;
    }
} 
h3 {
    font-size: 30px;
    line-height: 42px;
} 
@media (max-width: 430px){
    h3 {
        font-size: 20px;
        line-height: 28px;
    }
} 
/* h4 {
    font-size: 46px;
    line-height: 60px;
} 
@media (max-width: 430px){
    h4 {
        font-size: 32px;
        line-height: 48px;
    }
}  */

/* paragraph */
p {
    font-size: 16px;
    line-height: 28px;
}
@media (max-width: 430px){
    p {
        font-size: 14px;
        line-height: 25px;
    }
} 

/* background */
.bg-white {
background-color: #fff; }

.bg-gray, .bg_gray {
background-color: #C4CFD5; }
section.bg-gray{
    width: 100vw;
}

.bg-gray_half {
background: linear-gradient(180deg,white 0%,white 300px,#C4CFD5 300px,#C4CFD5 100%);
}


/* anchor tag (link, button) */
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    text-decoration:none;
    cursor: pointer;
    color: #000000; 
    }
.red-link {
    color: #BB3784 !important;
    text-decoration: underline;
}

/* positioning */
.center-children-stack-vertically {
    display: flex;
    justify-content: center; /* Horizontal centering */
    align-items: center;
    flex-direction: column; 
}

/* shadow-rounded-cards for PDF DL or link to blog posts etc */
.shadow-rounded-card { height: 282px; width: 360px; margin: auto; }
.shadow-rounded-card.ultra-wide { 
    width: auto;
    height: auto;
    max-height: 336px; 
    max-width: 948px;
    margin: auto;
}
@media (max-width: 380px) {
    .shadow-rounded-card { height: 260px; width: auto; margin: auto 10px; }
}
.shadow-rounded-card > a > div {
    box-shadow: 4px 4px 15px 2px rgba(0, 0, 0, 0.1);
    transition: 0.1s;
    border-radius: 0 0 16px 16px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
/* .shadow-rounded-card > a > div:hover { box-shadow: 8px 8px 30px 4px rgba(0, 0, 0, 0.1); } */
.rounded-card-grow {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 0 0 16px 16px;
}

.rounded-card-grow:hover {
    transform: scale(1.02);
    box-shadow: 6px 6px 16px 3px rgba(0, 0, 0, 0.1);
}

.shadow-rounded-card img {
    height: 200px;
    width: 100%;
    object-fit: cover;
}

.shadow-rounded-card.ultra-wide img {
    max-height: 282px;
    height: auto;
    margin-bottom: 10px;
}

.shadow-rounded-card p {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.shadow-rounded-card.ultra-wide p {
    margin-bottom: 16px;
}

.shadow-rounded-card span {
    color: var(--Pink, #BB3784);
    text-align: center;
    font-family: "Noto Sans JP" !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 24px !important; /* 150% */
    letter-spacing: 0.8px !important;
    text-decoration-line: underline;
    padding: 0 16px;
}

/* white paper */
.three-column-box {
    display: flex;
    flex-wrap: wrap;
    row-gap: 16px;
}