@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css");

#commonHeader{
    margin-bottom: 0;
}


header.masthead   {
    background-image: url(../images/title_bg.jpg);
    background-image: image-set(url(../images/title_bg.jpg) 1x, url(../images/title_bg@2x.jpg) 2x);
    background-image: -webkit-image-set(url(../images/title_bg.jpg) 1x, url(../images/title_bg@2x.jpg) 2x);
    background-size: cover;
    background-position: top center;
}
@media (min-width: 768px){
    header.masthead   {
        background-position: center center;
    }
}

.bg-title {
    background-color: rgba(58,100,173,.7);
    margin-top: 40vh;
}



#headspa,
#headspa h1,
#headspa h2,
#headspa h3,
#headspa h4,
#headspa h5,
#headspa h6{
    font-family: 'Klee One', cursive ,'Noto Sans JP', sans-serif;
}

#headspa p,
#headspa dt,
#headspa dd,
#headspa li,
#headspa a{
    font-size: 16px;
    text-align: justify;
}

#headspa h1,
#headspa h2,
#headspa h3,
#headspa h4,
#headspa h5,
#headspa h6,
#headspa strong{
    font-weight: 600;
}

#headspa h2 {
    font-size: clamp(25px, 4vw, 40px);
}

#headspa h3 {
    font-size: 21px;
}

#headspa h2:after,
#headspa h3:after   {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    background-color: #5E7DB4;
}

#headspa h2:after{
    margin: 10px auto 50px auto;
}

#headspa h2.no-line{
    font-size: clamp(25px, 4vw, 35px);
}

#headspa h2.no-line:after{
    display: none;
}

#headspa h3:after {
    margin: 10px auto;
}

#headspa header.masthead h2{
    color:#fff;
    font-size: clamp(20px, 4vw, 30px);
    font-weight: normal;
}

#headspa header.masthead h2:after{
    display: none;
}

#headspa .row{
    align-items: center;
    justify-content: center;
}

#headspa .row img {
    width: fill-available;
    width: -webkit-fill-available;
    height: auto;
}

@media (min-width: 768px){
    .d-grid{
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, auto);
        gap:3rem;
    }
}

.g-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.bg-primary {
  background: linear-gradient(90deg,rgb(204,223,255), rgb(239,243,250)) !important;
}

.d-flex {
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    gap: 3rem;
}

a.btn {
    background: #D73E3E;
    color: #fff;
    border-radius: 100vh;
}

a.btn:hover{
    color:#fff;
    background: #E68D90;
}
@media (max-width: 767px){
    #headspa .cv.row {
        display: flex;
        flex-direction: column;
    }

    #headspa .cv.row a{
        width: 100%;
    }
}