@charset "UTF-8";

/*==============================================================
メイン画像
==============================================================*/
#mainimage {
    position: relative;
}

#mainimage > img {
    width: 100%;
    height: 720px;
    object-fit: cover;
    object-position: bottom;
}

#mainimage > div {
    width: 50%;
    padding: 60px 45px;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

#mainimage > div > p.catch {
    margin-bottom: 18px;
    font-family: "Noto Serif JP", serif;
    font-size: 45px;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    color: rgb(60, 90, 200);
}

#mainimage > div > p.sub {
    font-size: 21px;
    letter-spacing: 3px;
    color: rgb(120, 120, 120);
}

@media screen and (max-width: 1024px) {
    #mainimage > img {
        height: 630px;
    }
}

@media screen and (max-width: 896px) {
    #mainimage > img {
        height: 500px;
    }

    #mainimage > div {
        padding: 45px 30px 40px;
        background-color: rgb(60, 90, 200);
    }

    #mainimage > div > p.catch {
        font-size: 31px;
        color: #fff;
    }

    #mainimage > div > p.sub {
        font-size: 15px;
        line-height: 1;
        color: #fff;
    }
}

@media screen and (max-width: 480px) {
    #mainimage > img {
        height: 285px;
    }

    #mainimage > div {
        width: 100%;
        padding: 35px 5% 40px;
        position: static;
    }

    #mainimage > div > p.catch {
        margin-bottom: 20px;
        font-size: 32px;
        line-height: 1.5;
    }

    #mainimage > div > p.sub {
        font-size: 17px;
        font-weight: 500;
        letter-spacing: 0.15em;
    }
}

/*==============================================================
熊本メスキュードについて
==============================================================*/
#about {
    background-color: #fff;
    position: relative;
}

#about > div {
    width: 50%;
    padding: 70px 75px 90px;
    float: right;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

#about > div > h1 {
    margin-bottom: 30px;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.9;
    color: rgb(63, 171, 81);
}

#about > div > p {
    color: rgb(100, 100, 100);
}

#about > div > p:nth-child(2) {
    margin-bottom: 21px;
}

#about > div > a {
    width: 100px;
    font-size: 10px;
    text-align: center;
    line-height: 1.4;
    color: rgb(60, 90, 200);
    position: absolute;
    right: 60px;
    bottom: 60px;
}

#about > div > a > img {
    margin-bottom: 9px;
}

#about > p {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#about > p > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}

@media screen and (max-width: 1024px) {
    #about > div {
        padding: 60px 55px;
    }

    #about > div > h1 {
        font-size: 18px;
    }

    #about > div > p:nth-child(2) {
        margin-bottom: 24px;
        font-size: 14px;
        line-height: 1.6;
    }

    #about > div > p {
        font-size: 14px;
    }

    #about > div > a {
        width: 95px;
    }
}

@media screen and (max-width: 896px) {
    #about > div {
        width: 100%;
        padding: 65px 30px 75px;
        float: none;
    }

    #about > div > h1 {
        margin-bottom: 21px;
        font-size: 20px;
        line-height: 2.1;
    }

    #about > div > p:nth-child(2) {
        margin-bottom: 30px;
    }

    #about > div > a {
        right: 30px;
        bottom: 50px;
    }

    #about > p {
        width: 100%;
        position: static;
    }

    #about > p > img {
        height: 360px;
    }
}

@media screen and (max-width: 480px) {
    #about > div {
        padding: 40px 5% 75px;
    }

    #about > div > h1 {
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: 500;
        line-height: 2;
        text-align: justify;
        letter-spacing: 0.15em;
    }

    #about > div > h1 > br {
        display: none;
    }

    #about > div > a {
        right: 5%;
        bottom: 75px;
    }

    #about > div > p:nth-child(2) {
        margin-bottom: 40px;
        font-size: 15px;
        line-height: 1.9;
    }

    #about > div > p:nth-child(3) {
        margin-bottom: 40px;
        font-size: 15px;
        line-height: 1.9;
    }

    #about > p > img {
        height: 200px;
    }

    #about > div > a {
        width: 120px;
        margin: 0 auto;
        display: block;
        position: static;
    }
}

/*==============================================================
業務内容
==============================================================*/
#service {
    width: 90%;
    max-width: 1280px;
    padding: 180px 0;
    margin: 0 auto;
}

#service > ul {
    margin-bottom: 120px;
}

#service > ul > li {
    width: 30%;
    margin-right: 5%;
    float: left;
}

#service > ul > li:last-child {
    margin-right: 0;
}

#service > ul > li > a:hover {
    opacity: 0.7;
}

#service > h2 {
    margin-bottom: 40px;
    font-family: "Noto Serif JP", serif;
    font-size: 36px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    color: rgb(90, 90, 90);
}

#service > p {
    margin-bottom: 120px;
    font-size: 16px;
    text-align: center;
    line-height: 2.5;
    color: rgb(90, 90, 90);
}

#service > div.citrus,
#service > div.shokushin {
    margin-bottom: 20px;
}

#service > div.citrus > p.link_header {
    margin-bottom: 20px;
}

#service > div.citrus a,
#service > div.shokushin a,
#service > div.jidou a {
    cursor: pointer;
    display: block;
    transition: 0.3s;
}

#service > div.citrus a:hover,
#service > div.shokushin a:hover,
#service > div.jidou a:hover {
    opacity: 0.7;
    transition: 0.3s;
}

#service > div.jidou {
    margin-bottom: 90px;
}

#service > div.sdg > h3 {
    padding: 35px 0;
    margin-bottom: 60px;
    font-size: 20px;
    line-height: 1;
    text-align: center;
    color: #fff;
    background-color: rgb(153, 108, 63);
}

#service > div.sdg > p {
    width: 100%;
    max-width: 768px;
    margin: 0 auto 60px;
}

#service > div.sdg > ul {
    width: 100%;
    max-width: 768px;
    margin: 0 auto 90px;
}

#service > div.sdg > ul > li {
    margin-bottom: 40px;
}

#service > div.sdg > ul > li:last-child {
    margin-bottom: 0;
}

#service > div.sdg > ul > li > h4 {
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.6;
    color: rgb(60, 90, 200);
}

#service > div.sdg > ul > li > ul {
    width: 100%;
    max-width: 480px;
    margin-bottom: 20px;
    line-height: 1;
}

#service > div.sdg > ul > li > ul > li {
    width: 15%;
    margin-right: 2%;
    float: left;
}

#service > div.sdg > ul > li > ul > li:last-child {
    margin-right: 0;
}

#service > div.sdg > ul > li > p {
    color: rgb(72, 72, 72);
}

@media screen and (max-width: 1024px) {
    #service {
        padding: 90px 0 120px;
    }

    #service > ul {
        margin-bottom: 90px;
    }

    #service > h2 {
        margin-bottom: 25px;
        font-size: 30px;
        font-weight: 400;
        letter-spacing: 3px;
    }

    #service > p {
        margin-bottom: 75px;
        font-size: 15px;
        line-height: 2.1;
    }
}

@media screen and (max-width: 896px) {
    #service {
        padding: 80px 0 90px;
    }

    #service > ul {
        margin-bottom: 85px;
    }

    #service > ul > li {
        width: 32%;
        margin-right: 2%;
    }

    #service > h2 {
        margin-bottom: 25px;
        font-size: 26px;
        color: rgb(90, 90, 90);
    }

    #service > p {
        margin-bottom: 75px;
        font-size: 15px;
        line-height: 2.1;
    }

    #service > div.sdg > h3 {
        padding: 40px 0;
        margin-bottom: 75px;
        font-size: 18px;
    }
}

@media screen and (max-width: 480px) {
    #service {
        padding: 75px 0 60px;
    }

    #service > ul {
        width: 75%;
        margin: 0 auto 75px;
    }

    #service > ul > li {
        width: 100%;
        margin-right: 0;
        margin-bottom: 30px;
    }

    #service > ul > li:last-child {
        margin-bottom: 0;
    }

    #service > h2 {
        margin-bottom: 40px;
        font-size: 20px;
        letter-spacing: 0.15em;
    }

    #service > p {
        margin-bottom: 45px;
        font-size: 16px;
        line-height: 2.1;
        text-align: justify;
        letter-spacing: 0.06em;
    }

    #service > p > br {
        display: none;
    }

    #service > div.jidou {
        margin-bottom: 45px;
    }

    #service > div.sdg > h3 {
        padding: 35px 0;
        margin-bottom: 50px;
        font-size: 16px;
    }

    #service > div.sdg > ul {
        margin-bottom: 45px;
    }

    #service > div.sdg > ul > li > h4 {
        margin-bottom: 25px;
        font-size: 18px;
        line-height: 1.7;
    }

    #service > div.sdg > ul > li > ul {
        margin-bottom: 10px;
    }

    #service > div.sdg > ul > li > ul > li {
        width: 30%;
        margin-right: 5%;
        margin-bottom: 20px;
    }

    #service > div.sdg > ul > li > ul > li:nth-child(3n) {
        margin-right: 0;
    }
}

/*==============================================================
メスキュードシステムとは
==============================================================*/
#system {
    padding: 150px 0;
    background-color: rgb(243, 245, 251);
}

#system > div {
    width: 93%;
    max-width: 896px;
    margin: 0 auto;
}

#system > div > p:first-child {
    margin-bottom: 30px;
    font-size: 18px;
    text-align: center;
    color: rgb(63, 153, 90);
}

#system > div > p:first-child > br {
    display: none;
}

#system > div > h2 {
    padding: 40px 0;
    margin-bottom: 50px;
    font-size: 20px;
    line-height: 1;
    text-align: center;
    color: #fff;
    background-color: rgb(63, 153, 90);
}

#system > div > img {
    margin-bottom: 45px;
}

#system > div > p {
    color: rgb(90, 90, 90);
}

@media screen and (max-width: 1024px) {
    #system {
        padding: 75px 0;
    }

    #system > div > h2 {
        margin-bottom: 45px;
    }

    #system > div > img {
        margin-bottom: 35px;
    }

    #system > div > p {
        font-size: 14px;
    }
}

@media screen and (max-width: 896px) {
    #system > div {
        width: 90%;
    }

    #system > div > p:first-child {
        margin-bottom: 25px;
        font-size: 16px;
    }

    #system > div > h2 {
        padding: 40px 0;
        margin-bottom: 45px;
        font-size: 18px;
    }
}

@media screen and (max-width: 480px) {
    #system {
        padding: 60px 0 75px;
    }

    #system > div > p:first-child > br {
        display: block;
    }

    #system > div > h2 {
        padding: 35px 0;
        margin-bottom: 35px;
        font-size: 16px;
    }

    #system > div > h2 > span {
        padding: 20px;
        font-size: 17px;
        font-weight: 500;
    }

    #system > div > p {
        font-size: 15px;
    }
}

/*==============================================================
社会貢献活動
==============================================================*/
#contribution {
    position: relative;
}

#contribution > div {
    width: 50%;
    padding: 120px 75px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

#contribution > div > h2 {
    margin-bottom: 20px;
    font-family: "Noto Serif JP", serif;
    font-size: 20px;
    color: rgb(90, 90, 90);
}

#contribution > div > p {
    margin-bottom: 45px;
    color: rgb(90, 90, 90);
}

#contribution > div > a {
    width: 100%;
    max-width: 210px;
    padding: 20px 0;
    text-align: center;
    line-height: 1;
    color: #fff;
    background-color: rgb(153, 90, 72);
    display: block;
}

#contribution > div > a:hover {
    opacity: 0.7;
}

#contribution > p {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
}

#contribution > p > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 1024px) {
    #contribution > div {
        padding: 65px 50px;
    }

    #contribution > div > h2 {
        margin-bottom: 20px;
        font-size: 19px;
    }

    #contribution > div > p {
        margin-bottom: 35px;
        font-size: 14px;
    }
}

@media screen and (max-width: 896px) {
    #contribution > div {
        width: 100%;
        padding: 65px 5% 70px;
    }

    #contribution > div > p {
        margin-bottom: 40px;
    }

    #contribution > p {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    #contribution > div > h2 {
        margin-bottom: 15px;
        font-size: 19px;
        font-weight: 500;
    }

    #contribution > div > p {
        font-size: 15px;
        line-height: 2;
        color: rgb(90, 90, 90);
    }

    #contribution > div > a {
        max-width: 100%;
        padding: 35px 0;
        font-size: 18px;
        line-height: 1;
    }
}