@font-face {
    font-family: 'DINCondensed';
    src: url('../fonts/DIN-Bold.eot');
    src: url('../fonts/DIN-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/DIN-Bold.woff2') format('woff2'), url('../fonts/DIN-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.en {
    font-family: 'DINCondensed';
    line-height: 1;
}

.sp-show {
    display: none;
}

@media screen and (max-width: 480px) {
    .sp-show {
        display: block;
    }
    .sp-hide {
        display: none;
    }
}


/*** 位置設定 ================================================== */

.ma_to05 {
    margin-top: 0.5em !important;
}

.ma_to10 {
    margin-top: 1em !important;
}

.ma_to15 {
    margin-top: 1.5em !important;
}

.ma_to20 {
    margin-top: 2em !important;
}

.ma_to30 {
    margin-top: 3em !important;
}

.ma_to40 {
    margin-top: 4em !important;
}

.ma_to50 {
    margin-top: 5em !important;
}

.ma_bo05 {
    margin-bottom: 0.5em !important;
}

.ma_bo10 {
    margin-bottom: 1em !important;
}

.ma_bo15 {
    margin-bottom: 1.5em !important;
}

.ma_bo20 {
    margin-bottom: 2em !important;
}

.ma_bo30 {
    margin-bottom: 3em !important;
}

.ma_bo40 {
    margin-bottom: 4em !important;
}

.pa_to60 {
    padding-top: 6em !important;
}

.pa_to50 {
    padding-top: 5em !important;
}

.pa_to40 {
    padding-top: 4em !important;
}

.pa_to30 {
    padding-top: 3em !important;
}

.pa_to10 {
    padding-top: 1em !important;
}

.pa_bo50 {
    padding-bottom: 5em !important;
}

.pa_bo40 {
    padding-bottom: 4em !important;
}

.pa_bo10 {
    padding-bottom: 1em !important;
}

.pa_bo05 {
    padding-bottom: 0.5em !important;
}

.w_100 {
    width: 100% !important;
}

.f-18 {
    font-size: 1.8rem !important;
}

.f-20 {
    font-size: 2rem !important;
}

.f-22 {
    font-size: 2.2rem !important;
}

.f-24 {
    font-size: 2.4rem !important;
}

.f-26 {
    font-size: 2.6rem !important;
}

.f-30 {
    font-size: 3rem !important;
}

.f-34 {
    font-size: 3.4rem !important;
}

.f-36 {
    font-size: 3.6rem !important;
}

.f-40 {
    font-size: 4rem !important;
}

.f-50 {
    font-size: 5rem !important;
}

.f-60 {
    font-size: 6rem !important;
}

.font-weight-bold {
    font-weight: bold !important;
}

@media screen and (max-width: 767px) {
    body {
        font-size: 13px;
    }
    .ma_to30 {
        margin-top: calc(3em * .65) !important;
    }
    .ma_to40 {
        margin-top: calc(4em * .65) !important;
    }
    .ma_to50 {
        margin-top: calc(5em * .65) !important;
    }
    .ma_bo30 {
        margin-bottom: calc(3em * .65) !important;
    }
    .ma_bo40 {
        margin-bottom: calc(4em * .65) !important;
    }
    .pa_to60 {
        padding-top: calc(6em * .65) !important;
    }
    .pa_to50 {
        padding-top: calc(5em * .65) !important;
    }
    .pa_bo50 {
        padding-bottom: calc(5em * .65) !important;
    }
    .pa_to40 {
        padding-top: calc(4em * .65) !important;
    }
    .pa_bo40 {
        padding-bottom: calc(4em * .65) !important;
    }
    .pa_to30 {
        padding-top: calc(3em * .65) !important;
    }
    .f-18 {
        font-size: 1.4rem !important;
    }
    .f-20 {
        font-size: 1.5rem !important;
    }
    .f-22 {
        font-size: 1.6rem !important;
    }
    .f-24 {
        font-size: 1.7rem !important;
    }
    .f-26 {
        font-size: 1.8rem !important;
    }
    .f-30 {
        font-size: 2rem !important;
    }
    .f-34 {
        font-size: 2.1rem !important;
    }
    .f-36 {
        font-size: 2.2rem !important;
    }
    .f-40 {
        font-size: 2.4rem !important;
    }
    .f-50 {
        font-size: 2.7rem !important;
    }
    .f-60 {
        font-size: 3rem !important;
    }
}

.col-white {
    color: #fff !important;
}

.col-green {
    color: #5B9900 !important;
}

.col-darkgreen {
    color: #003300 !important;
}

.col-red {
    color: #990000 !important;
}

.col-yel {
    color: #FFD900 !important;
}

.bg-white {
    background: #fff !important;
}

.bg-grey {
    background: #F4F4F4 !important;
}

.bg-darkgreen {
    background: #003300 !important;
}

.bg-green {
    background: #5B9900 !important;
}

.bg-lightgreen {
    background: #E3F2CE !important;
}

.position-relative {
    position: relative;
}

.d-flex {
    display: flex;
}

.flex-1 {
    flex: 1;
}

.flex-wrap {
    flex-wrap: wrap;
}

.justify-content-between {
    justify-content: space-between;
}

.justify-content-center {
    justify-content: center;
}

.align-items-center {
    align-items: center;
}

.align-items-end {
    align-items: flex-end;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.inner {
    width: 100%;
    max-width: 1230px;
    margin: 0 auto;
    padding: 0 15px;
}

main {
    min-width: 1020px;
}

@media screen and (max-width: 767px) {
    main {
        min-width: initial;
    }
}


/*********** mv ************/

.mv::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 70%;
    background: rgba(255, 255, 255, .28);
}

.mv::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30%;
    background: rgba(255, 255, 255, .76);
}

.mv {
    background: url(../images/mv_bg.jpg) no-repeat center / cover;
}

.mv_img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 55%;
    text-align: right;
    z-index: 1;
}

.mv ul li {
    width: 285px;
    height: 285px;
    border-radius: 50%;
}

.mv ul li+li {
    margin-left: 10px;
}

.mv h1 {
    position: relative;
    font-size: 5.4rem;
    text-shadow: 3px 3px 0 #000;
    z-index: 2;
}

.mv_copy {
    position: relative;
    z-index: 2;
    text-shadow: 0 0 20px #fff;
}

@media screen and (max-width: 767px) {
    .mv ul li {
        width: 200px;
        height: 200px;
    }
    .mv ul li figure img {
        width: 50%;
    }
    .mv h1 {
        font-size: 4.5vw;
    }
}

@media screen and (max-width: 480px) {
    .mv ul {
        justify-content: space-between;
    }
    .mv ul li {
        width: 33%;
        height: 31vw;
        margin-left: 0 !important;
    }
    .mv ul li .f-24 {
        font-size: 1rem !important;
    }
    .mv ul li .f-34 {
        font-size: 1.2rem !important;
    }
    .mv h1 {
        font-size: 6.25vw;
    }
    .mv_img {
        position: relative;
        width: 100%;
    }
}


/*************** reason *************/

.reason h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(67% - 5px);
    width: 100%;
    height: 0;
    border-bottom: 10px dotted #5B9900;
}

.reason h2 .bg-grey {
    position: relative;
    padding: 0 15px;
}

.reason h2 .num {
    font-size: 185%;
}

.reason_header {
    line-height: 1.2;
}

.reason_header .en {
    margin-right: 5px;
    font-size: 10rem;
}

.reason_header h3 {
    padding-bottom: 5px;
}

.reason .w_50 {
    width: 49%;
    max-width: 570px;
}

@media screen and (max-width: 767px) {
    .reason_header .en {
        font-size: 7rem;
    }
}

@media screen and (max-width: 480px) {
    .reason .w_50 {
        width: 100%;
    }
}


/************ grant *************/

.grant {
    background: url(../images/grant_bg.jpg) no-repeat center / cover;
}

.grant_list li {
    width: 32%;
    padding: 40px 10px;
}

.grant_differ ul li {
    width: 92.5%;
    padding: 25px 70px;
    border-radius: 150px;
    border: 3px dashed #5B9900;
}

.grant_differ ul li::before {
    content: '\f00c';
    position: absolute;
    left: 25px;
    top: 50%;
    color: #990000;
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    font-size: 150%;
    transform: translateY(-50%);
}

.grant_differ ul li p {
    width: 92%;
}

.grant_differ figure {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 25%;
    text-align: right;
}

@media screen and (max-width: 767px) {
    .grant_differ ul li {
        padding: 20px 55px;
    }
    .grant_differ ul li::before {
        left: 18px;
    }
}

@media screen and (max-width: 480px) {
    .grant_list li {
        padding: 20px 10px;
    }
    .grant_list li img {
        max-width: 50%;
    }
    .grant_list li p {
        margin-top: 15px !important;
    }
    .grant_differ ul li,
    .grant_differ ul li p {
        width: 100%;
    }
    .grant_differ ul li:not(:last-child) {
        padding-right: 15px;
    }
}


/************* trouble **********/

.sec_ttl {
    position: relative;
    margin-bottom: 60px;
    padding: 30px 10px;
}

.sec_ttl::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 53px 66.5px 0 66.5px;
    border-color: #003300 transparent transparent transparent;
    transform: translateX(-50%);
}

.trouble_list {
    padding: 150px 4% 45px;
    background: url(../images/trouble_bg.png) no-repeat center top / auto;
    box-shadow: 6px 6px 0 #D9BA8D;
}

.trouble_list ul {
    width: 70%;
}

.trouble_list ul li {
    position: relative;
    margin-top: 20px;
    padding-left: 50px;
}

.trouble_list ul li::before {
    content: '\f00c';
    position: absolute;
    left: 0;
    top: 50%;
    color: #5B9900;
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    transform: translateY(-50%);
}

.trouble_list figure {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 30%;
    text-align: right;
}

.solution h3::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    margin: 20px auto;
    border-style: solid;
    border-width: 53px 66.5px 0 66.5px;
    border-color: #fefe00 transparent transparent transparent;
}

.solution ul li {
    position: relative;
    width: calc(100% - 53px);
    padding: 40px 10px 40px 48%;
}

.solution ul li::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 0;
    width: 53px;
    height: 100%;
    background: url(../images/triangle.png) no-repeat center / 100% 100%;
}

.solution ul li figure {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48%;
}

.solution ul li .en {
    font-size: 10.9rem;
    margin-right: 5px;
}

@media screen and (max-width: 767px) {
    .trouble_list {
        padding-top: 100px;
    }
    .trouble_list ul li {
        padding-left: 30px;
    }
    .solution ul li {
        padding: 0 10px 20px;
    }
    .solution ul li figure {
        position: relative;
        width: 100%;
        top: -15px;
    }
    .solution ul li .en {
        font-size: 7.5rem;
    }
}

@media screen and (max-width: 480px) {
    .trouble_list {
        padding-bottom: 0;
    }
    .trouble_list ul {
        width: 100%;
    }
    .trouble_list figure {
        position: relative;
        width: 100%;
    }
    .solution ul li {
        width: 100%;
    }
    .solution ul li::after {
        display: none;
    }
}


/************* recommend *************/

.recommend ul li {
    width: 32%;
    max-width: 380px;
    overflow: hidden;
    border-radius: 50%;
}

.recommend ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 190px;
    background: #003300;
    z-index: -1;
}

.recommend ul li::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 190px;
    background: #E3F2CE;
    z-index: -1;
}

.recommend_txt {
    height: 190px;
    padding-top: 40px;
}

.recommend_price {
    height: 190px;
    padding-bottom: 45px;
}

.recommend_price span.en {
    margin-left: -10px;
    color: #B49800;
    font-size: 250%;
    letter-spacing: -.1em;
}

@media screen and (max-width: 767px) {
    .recommend ul li {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    .recommend ul li::before,
    .recommend ul li::after {
        height: 150px;
    }
    .recommend_txt {
        height: 150px;
    }
    .recommend_price {
        height: 150px;
    }
}


/************** case **************/

.case ul li {
    width: 32%;
    max-width: 380px;
}

.case_num {
    padding: 10px;
    margin-bottom: 20px;
}

.case_num::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 18px 13.5px 0 13.5px;
    border-color: #003300 transparent transparent transparent;
    transform: translateX(-50%);
}

.case_cont {
    padding: 20px;
}

.case_cont dl {
    padding: 10px 0;
    border-bottom: 1px dashed #707070;
}

.case_cont dl dt {
    margin-bottom: 5px;
    line-height: 1.2;
}

.case_cont dl dt span {
    font-size: 1.4rem;
    font-weight: 400;
}

.case_cont dl dd span {
    color: #B49800;
}

.max_grant {
    max-width: 395px;
    margin: 0 auto;
    padding: 15px 20px;
    overflow: hidden;
}

.max_grant::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(91, 153, 0, .18);
    transform-origin: left bottom;
    transform: skewX(-65.5deg);
}

@media screen and (max-width: 767px) {
    .max_grant::before {
        transform: skewX( -73deg);
    }
}

@media screen and (max-width: 480px) {
    .case ul li {
        width: 100%;
        max-width: none;
    }
    .max_grant {
        max-width: 270px;
    }
    .max_grant::before {
        transform: skewX( -65.5deg);
    }
}


/************ condition ***********/

.condition .sec_ttl::after {
    border-color: #5B9900 transparent transparent transparent;
}

.condition h3 span {
    background: linear-gradient(to top, #FEFE00 9px, transparent 9px);
}

.condition ul {
    margin: 0 -.5%;
}

.condition ul li {
    width: 19%;
    margin: 0 .5%;
    padding: 20px 10px;
}

.f-12 {
    font-size: 1.2rem;
}

.condition_img::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 15%;
    background: linear-gradient(to top, rgba(255, 255, 255), rgba(255, 255, 255, 0));
}

.condition_flag {
    position: relative;
    margin-top: -50px;
}

.condition_flag span {
    background: linear-gradient(to top, #FEFE00 12px, #fff 12px);
}

.condition_flag::after {
    content: '';
    display: block;
    margin: 50px auto 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 53px 282.5px 0 282.5px;
    border-color: #5c9900 transparent transparent transparent;
}

@media screen and (max-width: 767px) {
    .condition ul li {
        width: 32.33%;
    }
    .condition_flag::after {
        border-width: 30px 140px 0 140px;
    }
}

@media screen and (max-width: 480px) {
    .condition ul li {
        width: 49%;
    }
}


/************** info ***************/

.info h3 span {
    font-size: 160%;
}

.owner_message figure {
    width: 35%;
}

.owner_message ul {
    padding-left: 38px;
}

.owner_message ul li {
    padding: 30px 15px;
    border-radius: 20px;
}

.owner_message ul li::before {
    content: url(../images/pin.png);
    position: absolute;
    left: -38px;
    top: 50%;
    transform: translateY(-50%) rotate(116deg);
}

.owner_message ul li:first-child:before {
    top: 100%;
    transform: translateY(-37%) rotate(75deg);
}

.owner_message ul li:last-child:before {
    top: 0;
    transform: translateY(-67%) rotate(152deg);
}

.company_recommend .ttl::before {
    content: '';
    position: absolute;
    right: 0;
    top: calc(50% - 5px);
    width: 100%;
    height: 0;
    border-bottom: 10px dotted #5B9900;
}

.company_recommend .ttl h3 {
    display: inline-block;
    padding-right: 5%;
}

.company_recommend .ttl h3 span.num {
    font-size: 200%;
}

.company_recommend .ttl h3 .f-30 {
    position: absolute;
    bottom: 78px;
    left: 65px;
    color: #000;
}

.company_recommend ul li {
    width: 32%;
    max-width: 380px;
    min-height: 120px;
    padding: 10px;
    background: #BED59F;
    border: 8px solid #003300;
}

@media screen and (max-width: 767px) {
    .owner_message figure {
        width: 100%;
        text-align: center;
    }
    .owner_message {
        flex: none;
        width: 100%;
    }
    .owner_message ul {
        padding-left: 0;
    }
    .owner_message ul li::before {
        display: none !important;
    }
    .company_recommend .ttl h3 .f-30 {
        bottom: 38px;
        left: 35px;
        width: 290px;
    }
    .company_recommend ul li {
        width: 49%;
        min-height: 95px;
        border-width: 3px;
    }
}

.contact {
    background: url(../images/contact_bg.jpg) no-repeat center / cover;
}

.contact h2 {
    display: inline-block;
    padding: 0 45px;
}

.contact h2::before,
.contact h2::after {
    content: url(../images/pin.png);
    position: absolute;
    top: 50%;
    left: 0;
    line-height: 0;
    transform: translateY(-40%);
}

.contact h2::after {
    left: auto;
    right: 0;
    transform: rotateY(180deg) translateY(-40%);
}

.contact_btn a {
    display: inline-block;
    width: 100%;
    max-width: 800px;
    padding: 20px;
    border-radius: 150px;
}

.contact_btn a::after {
    content: '\f105';
    position: absolute;
    right: 5%;
    top: 50%;
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    transform: translateY(-50%);
}

.contact_cont {
    padding: 40px 10px;
}

.contact_cont .w_50 {
    width: 50%;
}

@media screen and (max-width: 480px) {
    .contact_cont .w_50 {
        width: 100%;
    }
}