@charset "UTF-8";

/* CSS Document */

.wrapper100 {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    float: left;
}

.wrapper95 {
    margin-left: 2.5%;
    margin-right: 2.55%;
    padding-left: 0;
    padding-right: 0;
    width: 95%;
    float: left;
}

.wrapper90 {
    margin-left: 5%;
    margin-right: 5%;
    padding-left: 0;
    padding-right: 0;
    width: 90%;
    float: left;
}

.wrapper80 {
    margin-left: 10%;
    margin-right: 10%;
    padding-left: 0;
    padding-right: 0;
    width: 80%;
    float: left;
}

.wrapper70 {
    margin-left: 15%;
    margin-right: 15%;
    padding-left: 0;
    padding-right: 0;
    width: 70%;
    float: left;
}

.wrapper60 {
    margin-left: 20%;
    margin-right: 20%;
    padding-left: 0;
    padding-right: 0;
    width: 60%;
    float: left;
}

.wrapper50 {
    margin-left: 25%;
    margin-right: 25%;
    padding-left: 0;
    padding-right: 0;
    width: 50%;
    float: left;
}

.inner {
    margin: 0 auto;
    padding: 0;
    width: 960px;
}

.height-adjust {
    width: 100%;
    margin: 0;
    height: 1px;
    float: left;
}

.glid-left {
    width: 50%;
    margin: 0;
    padding: 0;
    float: left;
}

.glid-right {
    width: 50%;
    margin: 0;
    padding: 0;
    float: right;
}

.glid-90 {
    width: 90%;
    margin-left: 0%;
    margin-right: 0%;
}

.glid-80 {
    width: 80%;
    margin-left: 0%;
    margin-right: 0%;
}

.glid-70 {
    width: 70%;
    margin-left: 0%;
    margin-right: 0%;
}

.glid-60 {
    width: 60%;
    margin-left: 0%;
    margin-right: 0%;
}

.glid-50 {
    width: 50%;
    margin-left: 0%;
    margin-right: 0%;
}

.glid-40 {
    width: 40%;
    margin-left: 0%;
    margin-right: 0%;
}

.glid-30 {
    width: 30%;
    margin-left: 0%;
    margin-right: 0%;
}

.glid-20 {
    width: 20%;
    margin-left: 0%;
    margin-right: 0%;
}

.glid-10 {
    width: 10%;
    margin-left: 0%;
    margin-right: 0%;
}

.glid-70-text {
    width: 66%;
    margin-left: 2%;
    margin-right: 2%;
}

.glid-60-text {
    width: 56%;
    margin-left: 2%;
    margin-right: 2%;
}

.glid-50-text {
    width: 46%;
    margin-left: 2%;
    margin-right: 2%;
}

.glid-40-text {
    width: 36%;
    margin-left: 2%;
    margin-right: 2%;
}

.glid-30-text {
    width: 26%;
    margin-left: 2%;
    margin-right: 2%;
}

.flo_left { float: left; }
.flo_right { float: right; }

.tx_left { text-align: left; }
.tx_center { text-align: center; }
.tx_right { text-align: right; }

.small-font { font-size: 85%; }

.margin-top100 { margin-top: 100px; }
.margin-top90 { margin-top: 90px; }
.margin-top80 { margin-top: 80px; }
.margin-top70 { margin-top: 70px; }
.margin-top60 { margin-top: 60px; }
.margin-top50 { margin-top: 50px; }
.margin-top40 { margin-top: 40px; }
.margin-top30 { margin-top: 30px; }
.margin-top20 { margin-top: 20px; }
.margin-top10 { margin-top: 10px; }
.margin-top5 { margin-top: 5px; }

.margin-bottom100 {
    margin-bottom: 100px;
}

.margin-bottom90 {
    margin-bottom: 90px;
}

.margin-bottom80 {
    margin-bottom: 80px;
}

.margin-bottom70 {
    margin-bottom: 70px;
}

.margin-bottom60 {
    margin-bottom: 60px;
}

.margin-bottom50 {
    margin-bottom: 50px;
}

.margin-bottom40 {
    margin-bottom: 40px;
}

.margin-bottom30 {
    margin-bottom: 30px;
}

.margin-bottom20 {
    margin-bottom: 20px;
}

.margin-bottom10 {
    margin-bottom: 10px;
}

.margin-bottom5 {
    margin-bottom: 5px;
}

.margin-right10 {
    margin-right: 10%;
}

.margin-right5 {
    margin-right: 5%;
}

.linheight-30 {
    line-height: 30px;
}

.linheight-35 {
    line-height: 35px;
}

.linheight-40 {
    line-height: 40px;
}

.linheight-45 {
    line-height: 45px;
}

.linheight-50 {
    line-height: 50px;
}

.linheight-60 {
    line-height: 60px;
}

.linheight-70 {
    line-height: 70px;
}

.linheight-80 {
    line-height: 80px;
}

.linheight-90 {
    line-height: 90px;
}

.linheight-100 {
    line-height: 100px;
}

.letterspace-0 {
    letter-spacing: 0;
}

.letterspace-03 {
    letter-spacing: 0.3em;
}

.list_disc li {
    list-style: disc;
}

.list_out li {
    list-style: outside;
}

.list_square li {
    list-style: square;
}

.list_circle li {
    list-style: circle;
}

.list_dec li {
    list-style: decimal;
}

.border_box-black80 {
    width: 80%;
    margin-left: 5%;
    margin-right: 5%;
    float: left;
    padding: 1em 5%;
    border: 1px solid #000;
    box-sizing: border-box;
}

.border_box-black70 {
    width: 70%;
    margin-left: 10%;
    margin-right: 10%;
    float: left;
    padding: 1em 5%;
    border: 1px solid #000;
    box-sizing: border-box;
}

.reset {
    clear: both;
}

.letter0 {
    letter-spacing: 0;
}

.text_col { color: #0C509B; }

h2.border_btm {
    width: 410px;
    margin: 0 auto;
    padding: 0;
    line-height: 1.7em;
    text-align: center;
    font-size: 170%;
    background-image: url("../images/common/title_border.png");
    background-repeat: no-repeat;
    background-position: bottom;
    float: none;
}

h3.bg_set {
    width: auto;
    height: 50px;
    line-height: 50px;
    margin: 0;
    padding: 0 70px 0 1em;
    font-size: 150%;
    color: #FFF;
    font-weight: 500;
    background-color: #23819e;
    border-radius: 0 25px 25px 0;
    background-image: url("../images/common/circle.png");
    background-repeat: no-repeat;
    background-position: center right 19px;
    float: left;
}


/*-- 共通ブロック ------------------------------------------------------------------------------*/

.top_tit_box {
    padding: 12px 0 20px 65px;
    position: relative;
    border-bottom: 1px solid #0A509C;
}

.top_tit_box:before {
    width: 50px;
    height: 87px;
    background: #0A509C;
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
}

.white {
    color: #fff!important;
}

.txt01 {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.75em;
}

.sub_tit01 {
    letter-spacing: 0.1em;
    font-size: 14px;
    color: #FF7F00;
}

.tit01 {
    font-size: 24px;
    letter-spacing: 0.1em;
    color: #0A509C;
    font-weight: 300;
}

.btn01 {
    display: flex;
    align-items: center;
    width: 172px;
    height: 52px;
	transition: all .5s ease;
	background-image: url("../img/btn_arrow_navy.png");
	background-repeat: no-repeat;
}

.btn01:hover {
    background-image: url("../img/btn_arrow_blue.png");
}

.btn01 p {
    margin: 0 6px 0 0;
}

.btn02 {
    display: flex;
    align-items: center;
    max-width: 193px;
    width: 100%;
    color: #fff;
}

.btn02:hover {
    opacity: .7;
}

.btn02 p {
    margin: 0 6px 0 0;
}

.btn03 {
    max-width: 300px;
    width: 100%;
    padding: 15px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0A509C;
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
	transition: all .5s ease;
}

.btn03:hover {
    background: #67c6dd;
}

.btn03 p {
    margin: 0 6px 0 0;
}


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width: 768px) {
    /* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
    /* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
    .top_tit_box {
        padding: 12px 0 20px 115px;
    }
    .txt01 {
        font-size: 100%;
    }
    .sub_tit01 {
        font-size: 100%;
    }
    .tit01 {
        font-size: 200%;
    }
    .top_tit_box:before {
        width: 100px;
        height: 100px;
    }
    /* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
}


/* min-width: 768px ここまで */


/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */


/* ************************************************** */


/*       RESPONSIV  LAYOUT
/* ************************************************** */

@media screen and (max-width:1100px) {
    .inner {
        margin: 0 5%;
        width: 90%;
    }
}


/* **************************************************************** */


/*  RESPONSIVE  RAYOUT  MAX-WIDTH 640px */


/* **************************************************************** */

@media screen and (max-width:640px) {
    .glid-70 {
        width: 100%;
    }
    .glid-60 {
        width: 100%;
    }
    .glid-50 {
        width: 100%;
    }
    .glid-40 {
        width: 100%;
    }
    .glid-30 {
        width: 100%;
    }
    .glid-70-text {
        width: 96%;
        margin-left: 2%;
        margin-right: 2%;
    }
    .glid-60-text {
        width: 96%;
        margin-left: 2%;
        margin-right: 2%;
    }
    .glid-50-text {
        width: 96%;
        margin-left: 2%;
        margin-right: 2%;
    }
    .glid-40-text {
        width: 96%;
        margin-left: 2%;
        margin-right: 2%;
    }
    .glid-30-text {
        width: 96%;
        margin-left: 2%;
        margin-right: 2%;
    }
    .glid-left,
    .glid-right {
        width: 90%;
        margin: 0 5%;
    }
}