@charset "utf-8";
/* /////////////////////////////////////////////////////////
header
///////////////////////////////////////////////////////// */
header {
    background: url("../img/bg_main.webp") 50% 0 repeat;
    padding: 30px;
    color: #FFF;
}
.header_inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 1400px;
    max-width: 100%;
    margin: 0 auto;
}
.header_inner_text {
    width: 62%;
}
.header_inner_logo {
    margin-bottom: 60px;
}
.logo_top {
    display: flex;
    align-items: flex-end;
}
.logo_ncb {
    margin-right: 50px;
}
.header_inner_logo h1 {
    background: url("../img/logo.webp") 50% 50% no-repeat;
    background-size: contain;
    width: 875px;
    max-width: 100%;
    height: 102px;
    text-indent: -9999px;
    overflow: hidden;
    margin: 20px 0;
}
.header_inner_logo h3 {
    font-size: 16px;
    letter-spacing: 1.4em;
}

.header_inner_img {
    width: 38%;
}
.header_inner_img img {
    width: 100%;
}
.logo_sub_text {
    padding: 10px;
    justify-content: center;
    border-top: 2px solid #FFF;
    border-bottom: 2px solid #FFF;
}
.logo_sub_text ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.logo_sub_text ul li {
    margin: 0 10px;
    font-size: 20px;
    letter-spacing: 0.2em;
}
.logo_catch {
    text-align: right;
    font-size: 40px;
    letter-spacing: 0.2em;
}
.logo_catch span {
    color: #FFA041;
}
@media only screen and (max-width: 1399.9px){
    .header_inner_text {
        width: 70%;
    }
    .header_inner_img {
        width: 30%;
    }
    .header_inner_logo h3 {
        font-size: 16px;
        letter-spacing: 1.2em;
    }
}
@media only screen and (max-width: 1199.9px){
    .logo_catch {
        font-size: 32px;
    }
    .header_inner_logo h3 {
        font-size: 14px;
        letter-spacing: 0.8em;
    }
    .header_inner_logo {
        margin-bottom: 30px;
    }
}
@media only screen and (max-width: 979.9px){
    header {
        padding: 30px 10px;
    }
    .header_inner {
        display: block;
    }
    .header_inner_text {
        width: 100%;
        margin: 0 auto;
    }
    .header_inner_img {
        display: none;
    }
    .header_inner_logo {
        background: url("../img/img_main.webp?") 50% 50% no-repeat;
        background-size: 300px;
    }
    .header_inner_logo h1 {
        height: 90px;
    }
    .logo_top {
        display: inline;
        text-align: center;
    }
    .logo_ncb {
        margin: 0 auto 20px;
    }
    .header_inner_logo h1 {
        margin-bottom: 260px;
        margin-top: 10px;
    }
    .logo_catch {
        text-align: center;
    }
}
@media only screen and (max-width: 767.9px){
    .logo_ncb {
        width: 200px;
    }
    .header_inner_logo h1 {
        height: 78px;
    }
    .header_inner_logo {
        background-size: 270px;
        margin-bottom: 10px;
    }
    .logo_catch {
        font-size: 24px;
    }
}
@media only screen and (max-width: 539.9px){
    .logo_sub_text ul li {
        font-size: 16px;
    }
    .logo_catch {
        font-size: 18px;
    }
    .header_inner_logo {
        background-size: 200px;
    }
    .header_inner_logo h1 {
        height: 50px;
        margin-bottom: 220px;
    }
}
@media only screen and (max-width: 399.9px){
    .logo_ncb {
        width: 160px;
    }
    .header_inner_logo h3 {
        font-size: 12px;
        letter-spacing: 0.5em;
    }
    .header_inner_logo h1 {
        height: 38px;
        margin-bottom: 180px;
    }
    .logo_catch {
        font-size: 16px;
    }
    .header_inner_logo {
        background-size: 160px;
    }
}

/* /////////////////////////////////////////////////////////
main
///////////////////////////////////////////////////////// */
main {
    background: url("../img/icon_leaf.webp") 50% 100% no-repeat;
    padding-bottom: 80px;
}

/* /////////////////////////////////////////////////////////
point
///////////////////////////////////////////////////////// */
.point {
    background: #F8F4EF url("../img/bg_blue.webp") 50% 0 no-repeat;
    background-size: cover;
    text-align: center;
    padding-top: 30px;
}
.ttl_point {
    font-size: 40px;
    font-weight: bold;
    color: #005D28;
    margin-bottom: 50px;
}
.ttl_point span {
    color: #EE7700;
}
.ttl_point::before {
    content: "";
    width: 56px;
    height: 40px;
    background: url("../img/icon_leaf.webp") 50% 50% no-repeat;
    background-size: contain;
    display: block;
    margin: 0 auto;
}
.point_inner {
    background: url("../img/bg_green.webp") 50% 200px no-repeat;
    padding-bottom: 30px;
}
.point_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 1300px;
    max-width: 100%;
    margin: 0 auto;
    padding-bottom: 30px;
    background: url("../img/arrow_white_down.webp") 50% 100% no-repeat;
    margin-bottom: 30px;
}
.point_list li {
    width: 31%;
    margin: 0 1% 30px;
}
.point_list > li > h4 {
    font-size: 30px;
}
.point_detail {
    background: rgba(255,255,255,0.95);
    border-radius: 500px;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.1);
    aspect-ratio: 1;
    padding-top: 18px;
    margin-bottom: 10px;
}
.point_detail h3 {
    font-size: 74px;
    width: 100%;
    line-height: 1;
}
.point_detail p {
    font-size: 18px;
    margin-bottom: 5px;
}
.point_detail h2 {
    margin-bottom: 12px;
    line-height: 1.2;
}
.point_caution {
    color: #FFF;
    text-align: left;
}
/* point01 */
.point_item_01 h4,
.point_item_01 .point_detail h3,
.point_item_01 .point_detail h2 {
    color: #415BA9;
}
.point_item_01 .point_detail h2 {
    font-size: 34px;
}
.catch-why {
    color: #FFF;
    font-size: 40px;
}
/* point02 */
.point_item_02 h4,
.point_item_02 .point_detail h3,
.point_item_02 .point_detail h2 {
    color: #EE7700;
}
.point_item_02 .point_detail  h2 {
    font-size: 26px;
}
/* point03 */
.point_item_03 h4,
.point_item_03 .point_detail h3,
.point_item_03 .point_detail h2 {
    color: #415BA9;
}
.point_item_03 .point_detail h2 {
    font-size: 26px;
}
.point_item_03 .point_detail p {
    font-size: 14px;
}
.point_text_sp {
    display: none;
}
.point_br_sp {
    display: none;
}
@media only screen and (max-width: 1199.9px){
    .point_detail h3 {
        font-size: 60px;
    }
    .point_item_01 .point_detail .point_img img {
        width: 50%;
    }
    .point_item_02 .point_detail .point_img img {
        width: 40%;
    }
    .point_item_03 .point_detail .point_img img {
        width: 38%;
    }
}
@media only screen and (max-width: 1099.9px){
    .point_item_01 .point_detail h2 {
        font-size: 28px;
    }
    .point_item_01 .point_detail .point_img img {
        width: 46%;
    }
     .point_item_02 .point_detail h2 {
        font-size: 24px;
    }
    .point_item_02 .point_detail .point_img img {
        width: 36%;
    }
     .point_item_03 .point_detail h2 {
        font-size: 24px;
    }
    .point_item_03 .point_detail .point_img img {
        width: 32%;
    }
}
@media only screen and (max-width: 979.9px){
    .ttl_point{
        font-size: 34px;
        margin-bottom: 30px;
        line-height: 1.4;
    }
    .point_list {
        display: block;
    }
    .point_list li {
        width: 96%;
        margin: 0 auto 20px;
        background: rgba(255,255,255,0.95);
        border-radius: 10px;
        box-shadow: 5px 5px 5px rgba(0,0,0,0.1);
        padding: 10px 20px;
    }
    .point_detail {
        background: none;
        aspect-ratio: auto;
        box-shadow: none;
        display: flex;
        flex-direction:row-reverse;
        justify-content: flex-start;
    }
    .point_sp {
        display: inherit;
    }
    .point_list {
        background: url("../img/arrow_white_down_sp.webp") 50% 100% no-repeat;
        margin-bottom: 20px;
    }
    .point_list > li > h4 {
        display: none;
    }
    .point_img {
        width: 20%;
        text-align: center;
    }
    .point_item_01 .point_detail .point_img img {
        width: 100%;
    }
    .point_item_02 .point_detail .point_img img,
    .point_item_03 .point_detail .point_img img {
        width: 90%;
    }
    .point_text {
        width: 76%;
        margin-left: 4%;
        text-align: left;
    }
    .point_detail h3 {
        font-size: 32px;
        margin-bottom: 16px;
        padding: 5px 10px;
        color: #FFF !important;
        border-radius: 5px;
    }
    .point_item_01 .point_detail h3 {
        background: #415BA9;
    }
    .point_item_01 .point_detail h2 {
        font-size: 32px;
        margin-bottom: 0;
    }
    .point_item_02 .point_detail h3 {
        background: #EE7700;
    }
    .point_item_02 .point_detail h2 {
        font-size: 28px;
        margin-bottom: 0;
    }
    .point_item_03 .point_detail h3 {
        background: #415BA9;
    }
    .point_item_03 .point_detail h2 {
        font-size: 32px;
        margin-bottom: 0;
    }
    .point_item_03 .point_detail p {
        font-size: 18px;
    }
    .point_caution {
        color: #333;
        font-size: 12px;
    }
    .point_br_pc {
        display: none;
    }
    .point_br_sp {
        display: inline;
    }
    .point_text_sp {
        display: inline;
    }
}
@media only screen and (max-width: 767.9px){
    .point_item_03 .point_detail h2 {
        font-size: 28px;
    }
    .catch-why {
        font-size: 32px;
    }
}
@media only screen and (max-width: 539.9px){
    .point {
        background-size: 800px;
    }
    .ttl_point {
        font-size: 22px;
    }
    .point_detail h3 {
        font-size: 22px;
    }
    .point_item_01 .point_detail h2 {
        font-size: 22px;
    }
    .point_item_02 .point_detail h2 {
        font-size: 22px;
    }
    .point_item_03 .point_detail h2 {
        font-size: 22px;
    }
    .point_detail p,
    .point_item_03 .point_detail p {
        font-size: 16px;
    }
    .catch-why {
        font-size: 22px;
    }
    .ttl_point::before {
        width: 40px;
        height: 26px;
    }
}
@media only screen and (max-width: 399.9px){
    .ttl_point {
        font-size: 18px;
    }
    .point_detail p, .point_item_03 .point_detail p {
        font-size: 14px;
    }
    .point_detail {
        align-items: center;
    }
    .point_item_01 .point_detail h2,
    .point_item_02 .point_detail h2,
    .point_item_03 .point_detail h2 {
        font-size: 18px;
    }
}
/* /////////////////////////////////////////////////////////
about
///////////////////////////////////////////////////////// */
.about {
    text-align: center;
    padding: 50px 0 80px;
    background: url("../img/bg_city.webp") 50% 100% no-repeat;
}
.ttl_about {
    font-size: 30px;
    color: #005D28;
    margin-bottom: 40px;
}
.about_img_right,
.about_img_left {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.about_img_right {
}
.about_img_left {
    flex-direction: row-reverse;
}
.about_text {
    width: 58%;
    border-radius: 10px;
    background: url("../img/bg_text_green.webp") 50% 50% no-repeat;
    padding: 24px;
    display: flex;
}
.about_text p {
    width: 60%;
    text-align: left;
    font-size: 18px;
    line-height: 1.8;
    font-weight: bold;
}
.about_img {
    width: 40%;
    margin: 0 1%;
}
.about_img img {
    max-width: 340px;
}
.about_img_right .about_text {
    justify-content: flex-end;
    align-items: center;
}
.about_img_right .about_img {
    text-align: left;
}
.about_img_left .about_text {
    align-items: center;
}
.about_img_left .about_img {
    text-align: right;
}
@media only screen and (max-width: 1399.9px){
   .about_text p {
       width: 76%;
   }
}
@media only screen and (max-width: 979.9px){
   .about_text p {
       width: 90%;
   }
   .about_img_right .about_text {
       justify-content: center;
   }
}
@media only screen and (max-width: 767.9px){
    .ttl_about {
        font-size: 24px;
    }
    .about_img_right,
    .about_img_left {
        display: block;
    }
    .about_text{
       width: auto;
       margin-bottom: 20px;
       padding: 24px 32px;
   }
   .about_img {
       width: 70%;
       margin: 0 auto;
   }
   .about_img img {
       max-width: none;
   }
   .about_img_right .about_text{
       margin-right: 30px;
   }
   .about_img_left .about_text{
       margin-left: 30px;
   }
   .about_text p {
       width: 100%;
       font-weight: normal;
   }
}
@media only screen and (max-width: 539.9px){
    .about {
        background-size: 700px;
    }
    .ttl_about {
        font-size: 20px;
    }
    .about_text p {
        font-size: 16px;
    }
}
/* /////////////////////////////////////////////////////////
outline
///////////////////////////////////////////////////////// */
.outline {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    padding: 30px 0;
}
@media only screen and (max-width: 1199.9px){
   .outline {
       width: 96%;
   }
}
@media only screen and (max-width: 539.9px){
   .outline {
       width: 90%;
   }
}
/* /////////////////////////////////////////////////////////
introduction
///////////////////////////////////////////////////////// */
.introduction {
    padding: 30px 0 200px;
    background: url("../img/bg_messages.webp") 50% 100% no-repeat;
    background-size: 100%;
}
.introduction_inner {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
}
.introduction_catch {
    font-size: 24px;
    color: #415BA9;
}
.messages {
    text-align: center;
}
.messages h4 {
    font-size: 22px;
    margin-bottom: 40px;
    color: #666;
}
.messages h3 {
    font-size: 24px;
    font-weight: bold;
    color: #EE7700;
}
@media only screen and (max-width: 1199.9px){
   .introduction_inner {
       width: 96%;
   }
}
@media only screen and (max-width: 767.9px){
    .arrow_blue_down img {
        max-width: 127px;
    }
    .introduction {
        padding: 30px 0 120px;
    }
}
@media only screen and (max-width: 539.9px){
    .introduction_inner {
       width: 90%;
    }
    .introduction {
        background-size: 800px;
        padding-bottom: 60px;
    }
    .introduction_catch {
       font-size: 20px;
    }
    .messages h4 {
       font-size: 16px;
    }
    .messages h3 {
       font-size: 17px;
    }
}
/* /////////////////////////////////////////////////////////
caution
///////////////////////////////////////////////////////// */
.caution {
    padding: 50px 0;
    background: url("../img/bg_caution.webp") 50% 0 no-repeat;
    background-size: 100%;
}
.caution_inner {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
}
@media only screen and (max-width: 1199.9px){
   .caution_inner {
       width: 96%;
   }
}
@media only screen and (max-width: 539.9px){
   .caution_inner {
       width: 90%;
   }
   .caution {
       background-size: 800px;
   }
}
/* /////////////////////////////////////////////////////////
notes
///////////////////////////////////////////////////////// */
.notes_inner {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
}
@media only screen and (max-width: 1199.9px){
   .notes_inner {
       width: 96%;
   }
}
@media only screen and (max-width: 539.9px){
    .notes_inner {
       width: 90%;
   }
}
/* /////////////////////////////////////////////////////////
module
///////////////////////////////////////////////////////// */
.p-text--bold-under {
    font-weight: bold;
    text-decoration: underline;
}
.p-text--bold {
    font-weight: bold;
}
.c-btn-cv.p-btn-wide,
.p-btn-wide {
    width: 340px;
}
.p-table--sp02 {
    table-layout: auto;
}
.p-table--sp02 th {
    width: 30%;
}
@media only screen and (max-width: 767.9px){
    .p-table--th th {
        display: table-cell!important;
        width: 30% !important;
    }
    .p-table--th td {
        display: table-cell!important;
    }
}
/* footer */
.footer {
    font-size: 14px;
    padding: 40px 0 20px;
    background: url("../img/bg_main.webp") 50% 0 repeat;
}
.footer .ncb_logo {
    width: 240px;
    margin: 0 auto 10px;
}
.footer .ncb_logo img {
    width: 100%;
}
.ncb_address {
    text-align: center;
    font-size: 16px;
    margin-bottom: 29px;
    color: #FFF;
}
.copyright {
    font-size: 12px;
    text-align: center;
    color: #FFF;
}

@media only screen and (max-width: 767.9px){
    .footer .ncb_logo {
        width: 200px;
    }
}
@media only screen and (max-width: 399.9px){
    .footer .ncb_logo {
        width: 180px;
    }
}