@charset "UTF-8";
/* --------------------------------------------------------
	main image
-------------------------------------------------------- */
.page-head {
    z-index: 1;
    margin-bottom: auto;
}
.page-head > div{
    height: 500px;
}
.whatis .page-head > div > div:first-child {
    background: url("../img/main_whatis.jpg");
    background-position: inherit;
    background-size: cover;
    width: 65%;
}
.whatis .page-head > div > div:last-child {
    background: #004098;
    width: 35%;
}
.page-head h1 {
    font-size: 3em;
    position: inherit;
}
.page-head p, .page-head ul {
    padding: 0 30px 30px;
}
.page-head p, .page-head ul li{
    width: auto;
    min-width: inherit;
    position: inherit;
    font-size: 19px;
    color: #fff;
}
.whatis .page-head p{
    max-width: 650px;
}
.page-head a{
    font-size: 19px;
    color: #fff;
}

@media screen and (max-width: 768px) {
    .page-head > div > div:last-child {
        min-width: 100%;
    }
}

/* whatis */
.whatis div.top-contents{
    margin: 0 auto;
    max-width: 1000px;
    padding-bottom: 3em;
}
.whatis div.w_area{
    background: #fff;
}
.whatis div.lb_area{
    background: #c7d2e5;
}

.whatis .top-contents h2, .whatis .top-contents p, .whatis .top-contents span {
    color: #4d4d4d;    
}
.whatis .top-contents h2{
    font-size: 1.75em;
    font-weight: 500;
    letter-spacing: 0.09em;
    display: inline-block;
    margin: 3em 0 2em 0;
}
.whatis .top-contents h3, .whatis #area03.b_area .top-contents h3{
    font-size: 1.25em;
    font-weight: 500;
    padding: 0;
    margin-top: 0;
}
.whatis #area01 h2, .whatis #area01 p {
    color: #004098;
}
.whatis #area01 p {
    margin-bottom: 1.5em;
}
.whatis #area02 h3{
    color: #004098;
}
.whatis #area03 h2, .whatis #area03 h3, .whatis #area03 p{
    color: #fff;
}
.whatis .top-contents ul.box-flex, div.b_area .top-contents ul.box-flex {
    align-items: flex-start;
    flex-wrap: wrap;
    padding-bottom: 3em;
}
.whatis .top-contents ul li:first-child{
    max-width: 60%;
}
.whatis #area03.b_area .top-contents {
    text-align: left;
}
.whatis #area03.b_area .top-contents p{
    width: auto;
    padding: 0;
}
.whatis #area03.b_area .top-contents ul li {
    background: none;
}
@media screen and (max-width: 768px) {
    .page-head h1 {
        font-size: 2em;
        margin: auto;
    padding-bottom: 1em;
        background: rgb(0 64 152 / 70%);
    }
    .page-head > div {
        height: 80vw;
    }
    .whatis .page-head > div > div:first-child {
        display: none;
    }
    .whatis .page-head > div > div:last-child {
        background: url(../img/main_whatis.jpg);
        background-position: right;
        background-size: cover;
        width: 100%;
    }
    .whatis .top-contents h2{
        margin: 0.5em auto 1em;
    }
    .whatis .top-contents ul li:first-child{
        max-width: 100%;
    }
    .whatis .top-contents ul li:last-child{
        margin: auto;
    }
    
}