@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;700&display=swap');

/* common */
body {
    font-family: 'Noto Sans JP', sans-serif;
}
.text-primary {
    color: #22AEE6 !important;   
}
.bg-primary {
    background: #22AEE6 !important;
}
.border {
    border-color: #ccc;
}
a img {
    transition: all .55s ease-in-out;
}
a img:hover {
    box-shadow: 0 8px 10px 0 rgba(0,0,0,.2), 0 6px 20px 0 rgba(0,0,0,.2);
}

/* header */
h1, h2, h3, h4 {
    font-family: 'Noto Serif JP', sans-serif;
}
h1 img {
    width: 2.5rem;
    filter: drop-shadow( .1rem .1rem .3rem rgba(0,0,0,.5));
}
h3::before {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: .5rem;
    border: 1px solid #6c757d;
    transform: rotate(45deg);
    content: "";
}
h3::after {
    position: absolute;
    right: 0;
    bottom: 0;
    color: #ccc;
    font-size: 1rem;
    content: attr(data-title);
}

.jumbotron {
    background: url(../img/main.jpg) no-repeat center;
    background-size: cover;
    text-shadow: .1rem .1rem .5rem rgba(0,0,0,1);
}
.jumbotron::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    content: "";
}
.header-text {
    z-index: 1;
}

/* footer */
footer img {
    width: 10rem;
    filter: brightness(0) invert(1);
}