@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

body {
    font-size: 1rem;
    font-family: 'Noto Serif JP', serif;
    text-align: center;
}
a {
    text-decoration: none;
}
/*--- header ---*/
.header {
    background: url(../img/bg-head.png) #000000 center top no-repeat;
    background-size: auto 648px;
    width: 100%;
}
.header-inner {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    flex-flow: column;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
}
.head-title img {
    margin: 5% 35% 0 5%;
    width: 60%;
    height: auto;
}
.head-text {
    margin: 0 auto 5% auto;
    width: 96%;
    max-width: 880px;
}
.head-text p {
    font-size: 1.5em;
    line-height: 1.8em;
    text-align: left;
    color: #ffffff;
}
/*--- sec01 ---*/
.sec01 {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    flex-flow: column;
    background: #aac4e2;
    box-shadow: 0 5px 0 0px rgba(0, 52, 99, 1);
    position: relative;
}
.sec01::after {
    background: url(../img/arrow-blue.svg) center no-repeat;
    background-size: 10em 2.8em;
    content: "";
    width: 10em;
    height: 2.8em;
    position: absolute;
    bottom: -2.5em;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.sec01-title  {
    background: #003463;
    padding: 5% 0;
}
.sec01-title h1 {
    background: linear-gradient(90deg, #ddb357 0%, #ddb357 45%, #f9e1af 90% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 0.6em 0;
    font-size: 2.5em;
    line-height: 1em;
    font-weight: 600;
}
.sec01-title h2 {
    background: linear-gradient(90deg, #ddb357 0%, #ddb357 45%, #f9e1af 90% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 0.6em 0;
    font-size: 1.25em;
    line-height: 1em;
}
.sec01-text {
    background: #eff6f9;
    margin: -2% auto 5% auto;
    width: 96%;
    max-width: 1000px;
    box-shadow: 0 0 1.25em 0px rgba(0, 0, 0, 0.2);
}
.sec01-text p {
    padding: 1.5em;
    font-size: 1.5em;
    line-height: 1.8em;
    text-align: left;
    color: #1c1c1c;
}
.sec01-text p span {
    background: linear-gradient(transparent 65%, #c6ddf4 65%);
}
/*--- sec02 ---*/
.sec02 {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    flex-flow: column;
    background: linear-gradient(-181deg, #ddb357 0%, #fff8e9 17%, #f9e1af 100%);
    padding: 5% 0 0 0;
    box-shadow: 0 5px 0 0px rgba(216, 196, 153, 1);
    position: relative;
}
.sec02::after {
    background: url(../img/arrow-orange.svg) center no-repeat;
    background-size: 10em 2.8em;
    content: "";
    width: 10em;
    height: 2.8em;
    position: absolute;
    bottom: -2.5em;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.sec02 h1 {
    margin: 0 0 0.6em 0;
    font-size: 2.5em;
    line-height: 1em;
    font-weight: 600;
    color: #940000;
}
.sec02 h2 {
    margin: 0 0 3% 0;
    font-size: 1.25em;
    line-height: 1em;
    font-weight: 600;
    color: #940000;
}
ul.sec02-list {
    margin: 0 auto 2% auto;
    width: 96%;
    max-width: 860px;
}
ul.sec02-list li {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #ffffff;
    margin: 0 auto 3% auto;
    width: 100%;
    border: 1px solid #940000;
    box-shadow: 0.6em 0.6em 0 0px rgba(216, 196, 153, 1);
}
ul.sec02-list li .flow-head {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(-225deg, #ddb357 0%, #ddb357 55%, #f9e1af 100%);
    margin: 1px;
    width: 8em;
    height: 6em;
}
ul.sec02-list li .flow-head p {
    font-size: 1.75em;
    color: #ffffff;
}
ul.sec02-list li .flow-body dl {
    margin: 1em;
    width: auto;
    text-align: left;
}
ul.sec02-list li .flow-body dl dt {
    margin: 0 0 0.5em 0;
    font-size: 1.25em;
    font-weight: 600;
    color: #940000;
}
ul.sec02-list li .flow-body dl dd {
    font-size: 1.25em;
}
.sec02-contract {
    background: #fff8e9;
    margin: 0 auto 5% auto;
    padding: 3em 0;
    width: 96%;
    max-width: 860px;
    border: 1px solid #ffffff;
    box-shadow: 0 0 1.25em 0px rgba(0, 0, 0, 0.2);
}
.sec02-contract h3 {
    margin: 0 0 1em 0;
    font-size: 1.5em;
    line-height: 1em;
    font-weight: 700;
    color: #940000;
}
.sec02-contract ol.contract-list {
    list-style: decimal;
    margin: 0 2.5em 1em 3em;
    text-align: left;
}
.sec02-contract ol.contract-list li {
    margin-left: 1.25em;
    font-size: 1.25em;
    line-height: 1.8em;
}
.sec02-contract p {
    margin: 0 2.5em 0 2.5em;
    font-size: 1.25em;
    line-height: 1.8em;
    text-align: left;
}
/*--- sec03 ---*/
.sec03 {
    background: linear-gradient(0deg, #003463 0%, #001423 100%);
    padding: 7% 0;
}
.sec03-inner {
    display:-webkit-box;
    display:-ms-flexbox;
    display: flex;
    flex-direction: row;
    align-items: start;
    margin: 0 auto 0 auto;
    width: 96%;
    max-width: 896px;
}
.sec03-inner .sec03-img {
    width: 54%;
    max-width: 169px;
}
.sec03-inner .sec03-img img {
    width: 100%;
    height: auto;
}
.sec03-inner .sec03-text {
    background: #ffffff;
    margin: 0 0 0 3.375em;
    padding: 2em;
    width: auto;
    max-width: auto;
    box-shadow: 0 0 1.25em 0px rgba(0, 0, 0, 0.2);
    position: relative;
}
.sec03-inner .sec03-text::before {
    background: url(../img/arrow-white.svg) center no-repeat;
    background-size: 1.875em 3.375em;
    content: "";
    width: 1.875em;
    height: 3.375em;
    position: absolute;
    top: 3em;
    left: -1.8em;
}
.sec03-inner .sec03-text h4 {
    margin: 0 0 0.5em 0;
    font-size: 1.5em;
    line-height: 1em;
    font-weight: 700;
    text-align: left;
}
.sec03-inner .sec03-text p {
    margin: 0 0 0 0;
    font-size: 1.25em;
    line-height: 1.6em;
    text-align: left;
}
.sec03-inner .sec03-text p i {
    font-weight: 600;
    font-style: normal;
}
.sec03-inner .sec03-text p span {
    background: linear-gradient(transparent 65%, #c6ddf4 65%);
    font-weight: 600;
}
.sec03-inner .sec03-text p strong {
    color: #ff0000;
}
/*--- sec04 ---*/
.sec04 {
    background: #f5f3e8;
    padding: 7% 0;
}
.sec04-inner {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    flex-flow: column;
    background: #ffffff;
    margin: 0 auto 0 auto;
    padding: 3.6em 0;
    width: 96%;
    max-width: 896px;
    box-shadow: 0.6em 0.6em 0 0px rgba(216, 196, 153, 1);
}
.sec04-inner h1 {
    margin: 0 2em 0.6em 2em;
    font-size: 2.5em;
    line-height: 1em;
    font-weight: 600;
    color: #222222;
}
.sec04-inner h1 span {
    background: linear-gradient(transparent 65%, #f9e1af 65%);
}
.sec04-inner p {
    margin: 0 3.6em 0 3.6em;
    font-size: 1.5em;
    line-height: 1.6em;
    font-weight: 500;
    text-align: left;
    color: #222222;
}
/*--- footer ---*/
footer {
    background: #222222;
    padding: 2% 0;
    width: 100%;
}
.footer-inner {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    flex-direction: row-reverse;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    align-items: center;
    margin: 0 auto;
    width: 96%;
    max-width: 900px;
}
.footer-inner dl {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    flex-direction: column;
    text-align: left;
    color: #ffffff;
}
.footer-inner dl dt {
    font-size: 1.125em;
    line-height: 1.6em;
}
.footer-inner dl dd {
    font-size: 1.5em;
    line-height: 1.6em;
}
.footer-inner dl dd a {
    background: url(../img/icon-link.svg) right center no-repeat;
    background-size: 1em 1em;
    padding-right: 1.5em;
}
.footer-inner dl dd a:hover {
    opacity: 0.9;
}
/*--- btn ---*/
.area-btn {
    width: 100%;
}
.bg-sec01 {
    background: #001423;
}
.bg-sec02 {
    background: #222222;
}
.area-btn a {
    display: inline-block;
    margin: 5% auto;
    padding: 1px;
    border-radius: 18px;
    border: 1px solid #ffffff;
}
.area-btn a:hover {
    opacity: 0.95;
}
.area-btn .btn-inner {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
}
.area-btn .btn-inner .btn-main {
    display: inline-block;
    background: url(../img/icon-line.svg) #ffffff no-repeat;
    background-size: 2em 2em;
    background-position: 0.3em center;
    padding: 0.3em 0.5em 0.3em 0.3em;
    font-size: 1.6em;
    line-height: 2em;
    font-weight: 700;
    text-indent: 2.2em;
    color: #06c755;
    border-radius: 16px 16px 0 0;
}
.area-btn .btn-inner .btn-sub {
    background: #d89a1e;
    font-size: 1.2em;
    line-height: 1.3em;
    font-weight: 500;
    text-indent: 1em;
    letter-spacing: 1em;
    color: #ffffff;
    border-radius: 0 0 16px 16px;
}
.area-btn.f-btn {
    width: auto;
}
@media screen and (max-width: 960px) {
    body {
        font-size: 1.6vw;
    }
}
@media screen and (max-width: 430px) {
    body {
        font-size: 3.2vw;
    }
    /*--- header ---*/
    .header {
        background-size: auto 424px;
    }
    .head-title img {
        margin: 5% 5% 10% 5%;
        width: 90%;
        height: auto;
    }
    .head-text {
        margin: 10% auto 5% auto;
        width: 90%;
    }
    .head-text p {
        font-size: 1.5em;
        line-height: 1.8em;
        text-align: left;
        color: #ffffff;
    }
    /*--- sec01 ---*/
    .sec01-title  {
        background: #003463;
        padding: 7% 0;
    }
    .sec01-title h1 {
        margin: 0 5% 0.6em 5%;
        font-size: 2.8em;
        line-height: 1.4em;
    }
    .sec01-title h2 {
        margin: 0 0 1em 0;
        font-size: 1.5em;
        line-height: 1em;
    }
    .sec01-text {
        margin: -7% auto 5% auto;
        width: 90%;
    }
    .sec01-text p {
        font-size: 1.5em;
        line-height: 1.6em;
    }
    /*--- sec02 ---*/
    .sec02 {
        padding: 7% 0 0 0;
    }
    .sec02 h1 {
        margin: 0 7% 0.6em 7%;
        font-size: 2.8em;
        line-height: 1.4em;
    }
    .sec02 h2 {
        margin: 0 0 1em 0;
        font-size: 1.5em;
        line-height: 1em;
    }
    ul.sec02-list {
        margin: 0 auto 5% auto;
        width: 90%;
    }
    ul.sec02-list li {
        display: flex;
        flex-direction: column;
        margin: 0 auto 5% auto;
        width: 100%;
    }
    ul.sec02-list li .flow-head {
        margin: 1%;
        width: 98%;
        height: 3em;
    }
    ul.sec02-list li .flow-head p {
        font-size: 1.75em;
        color: #ffffff;
    }
    ul.sec02-list li .flow-body {
        width: 100%;
    }
    ul.sec02-list li .flow-body dl {
        margin: 3% 5% 5% 5%;
    }
    ul.sec02-list li .flow-body dl dt {
        margin: 0 0 0.5em 0;
        font-size: 1.5em;
    }
    ul.sec02-list li .flow-body dl dd {
        font-size: 1.5em;
    }
    .sec02-contract {
        background: #fff8e9;
        margin: 0 auto 5% auto;
        padding: 3em 0;
        width: 96%;
        max-width: 860px;
        border: 1px solid #ffffff;
        box-shadow: 0 0 1.25em 0px rgba(0, 0, 0, 0.2);
    }
    .sec02-contract h3 {
        margin: 0 0 1em 0;
        font-size: 1.5em;
        line-height: 1em;
        font-weight: 700;
        color: #940000;
    }
    .sec02-contract ol.contract-list {
        list-style: decimal;
        margin: 0 2.5em 1em 3em;
        text-align: left;
    }
    .sec02-contract ol.contract-list li {
        margin-left: 1.25em;
        font-size: 1.25em;
        line-height: 1.8em;
    }
    .sec02-contract p {
        margin: 0 2.5em 0 2.5em;
        font-size: 1.25em;
        line-height: 1.8em;
        text-align: left;
    }
    /*--- sec03 ---*/
    .sec03 {
        background: linear-gradient(0deg, #003463 0%, #001423 100%);
        padding: 7% 0;
    }
    .sec03-inner {
        display:-webkit-box;
        display:-ms-flexbox;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 auto 0 auto;
        width: 90%;
        max-width: auto;
    }
    .sec03-inner .sec03-img {
        width: 100%;
        max-width: auto;
    }
    .sec03-inner .sec03-img img {
        width: 100%;
        height: auto;
    }
    .sec03-inner .sec03-text {
        margin: 0 0 0 0;
        padding: 1.5em;
        width: 100%;
        max-width: auto;
        box-shadow: 0 0 1.25em 0px rgba(0, 0, 0, 0.2);
        position: relative;
    }
    .sec03-inner .sec03-text::before {
        display: none;
    }
    .sec03-inner .sec03-text h4 {
        margin: 0 0 0.5em 0;
        font-size: 2.0em;
        text-align: center;
    }
    .sec03-inner .sec03-text p {
        margin: 0 0 0 0;
        font-size: 1.5em;
        line-height: 1.6em;
        text-align: left;
    }
    /*--- sec04 ---*/
    .sec04 {
        background: #f5f3e8;
        padding: 7% 0;
    }
    .sec04-inner {
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        flex-flow: column;
        background: #ffffff;
        margin: 0 auto 0 auto;
        padding: 3.0em 0;
        width: 90%;
        max-width: auto;
        box-shadow: 0.6em 0.6em 0 0px rgba(216, 196, 153, 1);
    }
    .sec04-inner h1 {
        margin: 0 0 0.6em 0;
        font-size: 2.5em;
        line-height: 1em;
    }
    .sec04-inner p {
        margin: 0 1.5em 0 1.5em;
    }
    /*--- footer ---*/
    footer {
        background: #222222;
        padding: 2% 0;
        width: 100%;
    }
    .footer-inner {
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        flex-direction: column;
        -webkit-box-pack:justify;
        -ms-flex-pack:justify;
        justify-content:space-between;
        align-items: center;
        margin: 0 auto;
        width: 90%;
        max-width: auto;
    }
    .footer-inner dl {
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        flex-direction: row;
        text-align: center;
    }
    .footer-inner dl dt {
        font-size: 1.5em;
        line-height: 3em;
    }
    .footer-inner dl dd {
        font-size: 1.5em;
        line-height: 3em;
    }
    .footer-inner dl dd a {
        background: url(../img/icon-link.svg) right 0.2em no-repeat;
        background-size: 1em 1em;
        padding-right: 1.5em;
    }
    /*--- btn ---*/
    .area-btn a {
        display: inline-block;
        margin: 10% auto;
        padding: 1px;
        border-radius: 18px;
        border: 1px solid #ffffff;
    }
    .area-btn .btn-inner {
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        flex-flow: column;
        width: 100%;
        height: 100%;
    }
}