@charset "UTF-8";

/*--------------------------------------------------------------*/
/* CSS and Graphics are released under Creative Commons Licence */
/* https://www.webplus.jp/                                      */
/* Copyright (C) Kiyonobu Horita @ WEBPLUS Inc.                 */
/*--------------------------------------------------------------*/


/* ========================================================

　header

=========================================================== */

#masthead {
    margin-top: 7.0rem;
}

#masthead img {
    width: 100%;
    height: auto;
}

#masthead h1 {
    padding: 2.0rem;
    color: rgba(0, 120, 200, 1.0);
    font-size: 1.8rem;
    font-weight: 500;
    text-align: justify;
    line-height: 2.4rem;
}

#masthead h1 span:first-child {
    color: rgba(255, 170, 0, 1.0);
    font-weight: 700;
}

#masthead h1 span:last-child {
    color: rgba(230, 0, 20, 1.0);
    font-weight: 700;
}

#masthead h1 br {
    display: none;
}

@media only screen and (min-width: 576px) {

    #masthead h1 {
        font-size: 2.4rem;
        text-align: center;
        line-height: 3.0rem;
    }

    #masthead h1 br {
        display: block;
    }

}

@media only screen and (min-width: 768px) {

    #masthead {
        margin-top: 5.0rem;
    }

    #masthead h1 {
        padding: 1.0rem;
        font-size: 2.0rem;
    }

    #masthead h1 span {
        font-size: 125%;
    }

}

@media only screen and (min-width: 992px) {

    #masthead {
        position: relative;
        margin-top: 8.0rem;
    }

    #masthead h1 {
        position: absolute;
        top: 0;
        padding: 1.25rem 0;
        width: 100%;
        height: 5.0rem;
        background-color: rgba(255, 255, 255, 0.9);
        line-height: inherit;
    }

    #masthead h1 br {
        display: none;
    }

}

@media only screen and (min-width: 1200px) {

    #masthead {
        margin-top: 10.0rem;
    }

    #masthead h1 {
        padding: 1.75rem 0;
        height: 6.0rem;
        font-size: 2.4rem;
    }

}


/* ========================================================

　feature / bottom

=========================================================== */

#feature,
#bottom {
    padding: 3.0rem 0;
    background-color: rgba(0, 60, 110, 1.0);
}

#feature .row,
#bottom .row {
    text-align: center;
}

#feature .row > div,
#bottom .row > div {
    margin-bottom: 1.5rem;
}

#feature .row > div:last-child,
#bottom .row > div:last-child {
    margin-bottom: 0;
}

#feature a,
#bottom a {
    display: block;
    position: relative;
}

#feature .photo img,
#bottom .photo img {
    border-radius: 1.0rem;
}

#feature .layer,
#bottom .layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1.0rem;
    background-color: rgba(0, 120, 200, 0.7);
    opacity: 1.0;
    -webkit-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

#feature a:hover .layer,
#bottom a:hover .layer {
    opacity: 0;
}

#feature .icons img,
#bottom .icons img {
    position: absolute;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-animation: scaleIn 2.0s infinite ease-in-out;
    animation: scaleIn 2.0s infinite ease-in-out;
}

#feature .icons img:nth-child(1),
#bottom .icons img:nth-child(1) {
    top: 1.0rem;
    left: 1.0rem;
}

#feature a:hover .icons img:nth-child(1),
#bottom a:hover .icons img:nth-child(1) {
    top: 2.0rem;
    left: 2.0rem;
}

#feature .icons img:nth-child(2),
#bottom .icons img:nth-child(2) {
    top: 1.0rem;
    right: 1.0rem;
}

#feature a:hover .icons img:nth-child(2),
#bottom a:hover .icons img:nth-child(2) {
    top: 2.0rem;
    right: 2.0rem;
}

#feature .icons img:nth-child(3),
#bottom .icons img:nth-child(3) {
    bottom: 1.0rem;
    left: 1.0rem;
}

#feature a:hover .icons img:nth-child(3),
#bottom a:hover .icons img:nth-child(3) {
    bottom: 2.0rem;
    left: 2.0rem;
}

#feature .icons img:nth-child(4),
#bottom .icons img:nth-child(4) {
    bottom: 1.0rem;
    right: 1.0rem;
}

#feature a:hover .icons img:nth-child(4),
#bottom a:hover .icons img:nth-child(4) {
    bottom: 2.0rem;
    right: 2.0rem;
}

#feature h2 {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    color: rgba(255, 255, 255, 1.0);
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1.0);
}

#feature a[href*="service01"] h2 {
    line-height: 3.6rem;
}

#bottom .text {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    color: rgba(255, 255, 255, 1.0);
    text-align: center;
}

#bottom h2 {
    font-size: 2.4rem;
    font-weight: 700;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1.0);
}

#bottom p {
    margin-top: 1.0rem;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.8rem;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1.0);
}

@media only screen and (min-width: 576px) {

    #feature .row > div,
    #bottom .row > div {
        margin-bottom: 3.0rem;
    }

    #feature h2,
    #bottom h2 {
        font-size: 3.0rem;
    }

    #feature a[href*="service01"] h2 {
        line-height: 4.2rem;
    }

    #bottom p {
        font-size: 1.8rem;
        line-height: 2.4rem;
    }

}

@media only screen and (min-width: 768px) {

    #feature,
    #bottom {
        padding: 3.0rem 0;
    }

    #feature .row > div,
    #bottom .row > div {
        margin-bottom: 0;
    }

    #feature h2,
    #bottom h2 {
        font-size: 1.8rem;
    }

    #feature a[href*="service01"] h2 {
        line-height: 3.0rem;
    }

    #bottom p {
        font-size: 0.8rem;
        line-height: 1.4rem;
    }

}

@media only screen and (min-width: 992px) {

    #feature,
    #bottom {
        padding: 5.0rem 0;
    }

    #feature h2,
    #bottom h2 {
        font-size: 2.4rem;
    }

    #feature a[href*="service01"] h2 {
        line-height: 3.6rem;
    }

    #bottom .row > div:last-child h2 {
        letter-spacing: 0.15rem;
    }

    #bottom p {
        font-size: 1.4rem;
        line-height: 1.8rem;
    }

}

@media only screen and (min-width: 1200px) {

    #feature h2,
    #bottom h2 {
        font-size: 3.0rem;
    }

    #feature a[href*="service01"] h2 {
        line-height: 4.2rem;
    }

    #bottom p {
        font-size: 1.6rem;
        line-height: 2.0rem;
    }

}

@-webkit-keyframes scaleIn {

    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    50% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }

    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

}

@keyframes scaleIn {

    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    50% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }

    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

}


/* ========================================================

　points

=========================================================== */

#points .heading {
    color: rgba(205, 70, 40, 1.0);
}

#points .heading aside {
    background-color: rgba(205, 70, 40, 1.0);
}

#points .more a {
    color: rgba(205, 70, 40, 1.0);
    -webkit-transition: color 0.3s ease-in-out;
    -o-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

#points .more a:hover {
    color: rgba(255, 255, 255, 1.0);
}

#points .more a::after {
    background-color: rgba(205, 70, 40, 1.0);
}


/* ========================================================

　news

=========================================================== */

#news {
    background-color: rgba(230, 240, 250, 1.0);
}

#news .heading {
    color: rgba(0, 120, 200, 1.0);
}

#news .heading aside {
    background-color: rgba(0, 120, 200, 1.0);
}

#news .more a {
    color: rgba(0, 120, 200, 1.0);
    -webkit-transition: color 0.3s ease-in-out;
    -o-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

#news .more a:hover {
    color: rgba(255, 255, 255, 1.0);
}

#news .more a::after {
    background-color: rgba(0, 120, 200, 1.0);
}



/* ---- End of file --------------------------------------- */