@charset "utf-8";

/* 
    KozGoPr6N Regular-regular
MyriadPro Regular-regular
YuGo Bold-bold
YuGo Medium
*/

html,
body {
    overflow-x: hidden;
    overflow-y: visible;
}

* {
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.6;
    color: #384169;
    box-sizing: border-box;
}

.subline1200 {
    margin: 0 auto;
}

.img_sp{
    display: none;
}
/*ヘッダー------------------*/
.header_title{
    background-color: #E1EFF0;
    letter-spacing: 2px;
    font-weight: bold;
    padding: 15px;
}
.header_title p{
    border: 1.5px solid #384169;
    display: inline;
    color: #384169;
    padding: 2px 17px;
    font-size: 1.2em;
}

@media (max-width: 500px) {
    .header_title{
        text-align: center;
    }
}
/* メイン----------------------- */


/*-------------------------------------------Global CSS start-------------------------------------*/
.title-jp-lang {
    font-weight: 700;
    font-size: 30px;
    font-family: "Yu Gothic UI";
    color: #384169;
    text-align: center;
    margin-top: 25px;
    letter-spacing: 3px;
}

.title-eng-lang {
    font-family: Arial;
    font-size: 18px;
    color: #67B3B5;
    text-align: center;
    margin: -10px 0 20px 0;
    padding-top: 5px;
}

.usual-p {
    font-size: 1.3rem;
    color: #384169;
    font-family: Arial;

}

/*-------------------------------------------Global CSS end-------------------------------------*/


/*-------------------------------------------main picture start-------------------------------------*/
.top_global_image {
    position: relative;
}

.top_global_image .big_bg {
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.people-img {
    height: 40%;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translate(100%, 50%);
}

.text-picture {
    width: 45%;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translate(0, 50%);
}

@media (max-width: 767.99px) {
    .people-img {
        display: none;
    }

    .text-picture {
        width: 70%;
    }
}

@media (max-width: 767.99px) {
    .text-picture {
        width: 95%;
        right: 50%;
        transform: translate(50%, 50%);
    }
}
@media (max-width: 500px){
    .img_pc{
        display: none;
    }
    .img_sp{
        display: block;
    }
} 

/*-------------------------------------------main picture end------------------------------------*/


/* ---------------------------------------------new start  ---------------------------------------*/
.news {
    padding: 100px 0;
}

.news div {
    max-width: 600px;
    display: flex;
    width: 75%;
    margin: 10px auto;
    justify-content: left;
}

.news div p:nth-child(1) {
    padding: 0 50px;
}


.news button {
    display: flex;
    align-items: center;
    justify-content: end;
    width: 150px;
    height: 40px;
    background-color: #67B3B5;
    border: none;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    font-family: "Arial";
    letter-spacing: 3px;
    margin: auto;
    margin-top: 50px;
}

.news button img {
    width: 15px;
    margin-left: 25%;
}

.news button:hover {
    cursor: pointer;
    background-color: #487b7c;
    border-radius: 2px;
}

@media (max-width: 767.99px) {
    .news {
        padding: 50px 0;
    }

    .news div {
        width: 80%;
        padding-inline-start: 0;
        margin: 10px auto;
        justify-content: start;
    }

    .news div p:nth-child(1) {
        padding: 0 30px 0 0;
    }
}

@media (max-width: 575.99px) {
    .news div {
        width: 100%;
        padding: 0 15px;
        flex-wrap: wrap;
        margin: 10px auto;
        justify-content: start;
    }

    .news div p:nth-child(1) {
        width: 100%;
        font-weight: 500;
    }

    .news div p:nth-child(2) {
        font-weight: 700;
    }
}

/* -----------------------------------------------new end ----------------------------------------*/


/* -----------------------------------------------message start ----------------------------------------*/
.message {
    padding: 80px 0;
}

.message-container {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    position: relative;
    /* padding-top: 45px; */
}

.message-content {
    /* max-width: 500px; */
    width: 100%;
    margin: 0 auto;
    font-size: 1.2rem;
}

.message-content{
    text-align: center;
    /* max-width: 550px; */
}
.message-context{
    line-height: 2;
}
.message-leftImage {
    width: 156px;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
}

.message-rightImage {
    width: 156px;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translate(50%, 50%);
}

@media (max-width: 767.99px) {
    .message {
        padding: 60px 0;
    }

    .message-leftImage {
        transform: translate(-60%, 0);
    }

    .message-rightImage {
        transform: translate(60%, 0);
    }
}

/* -----------------------------------------------message end ------------------------------------------*/






/* -----------------------------------------------profile start ------------------------------------------*/
.profile {
    margin: 10%;
}
.text-indent{
    text-indent: 3.4em;
    display: block;
}
.profile dl{
    display: flex;
}
.profile dl dd{
    width: 65px;
}
.profile dl dt{
    flex: 1;
}

.profile-content {
    max-width: 1200px;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 70px;
    margin: 50px auto 150px;
}

.profile-left {
    position: relative;
    display: grid;
    align-self: center;
}

.profile-left-big {
    max-width: 100%;
    object-fit: fill;
}

.profile-left-small {
    max-width: 40%;
    position: absolute;
    left: -24px;
    bottom: -20px;
}

.profile-info {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section-title {
    font-weight: 700;
    font-size: 30px;
    font-family: "Yu Gothic UI";
    color: #384169;
    text-align: center;
    letter-spacing: 3px;
}

.profil-link {
    font-family: Arial;
    font-size: 15px;
    color: #67B3B5;
    text-decoration: none;
    text-transform: uppercase;
}

.profile-box {
    padding: 25px 0 35px;
    border-bottom: 2px solid #67B3B5;
    position: relative;
}


.profile-box::after {
    content: '';
    width: 100px;
    height: 7px;
    position: absolute;
    left: 0;
    bottom: -4px;
    background-color: #67B3B5;
}

.profile-right .profile-box:last-child {
    border: none;
}

.profile-right .profile-box:last-child::after {
    width: 0;
    height: 0;
}

.profile-box-title,
.profile-box-title-secondary {
    /* font-weight: 700; */
    font-size: 18px;
    font-family: "Yu Gothic UI";
    color: #384169;
    margin-bottom: 20px;
}

.profile-box-title-secondary {
    margin-bottom: 12px;
    font-weight: bold;
}

.profile-box-text {
    font-weight: 400;

    line-height: 1.5;
    font-family: "Yu Gothic UI";
    color: #384169;
    margin-bottom: 8px;
}

.test{
    display: inline;
    font-size: 20px;
}
.test p:first-child{
    text-align: left;
}
.test p:last-child{
    text-align-last: right;
}


.profile-text-two-line{
    display: flex;
}

.profile-box ul {
    padding-inline-start: 20px;
}

li.profile-box-text {
    list-style-type: disc;
}

.profile-right-bottom-image {
    width: 130px;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(90%, 0);
}

@media (max-width: 1199.99px) {
    .profile-content {
        grid-template-columns: 1fr 1fr;
        gap: 50px;
    }
}

@media (max-width: 991.99px) {
    .profile-content {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .profile-right-bottom-image {
        width: 120px;
        transform: translate(75%, 0);
    }
}

@media (max-width: 575.99px) {
    .profile {
        margin: 4%;
    }

    .profile-content {
        gap: 30px;
        margin: 40px auto 60px;
    }

    .profile-box:last-child {
        padding-right: 0;
    }

    .profile-right-bottom-image {
        width: 100px;
        transform: translate(0, 0);
    }
}
@media (max-width: 500px){
    .profile-right-bottom-image{
        width: 60px;
    }
} 

/* -----------------------------------------------profile end ------------------------------------------*/



/* -----------------------------------------------messengers start ------------------------------------------*/
.messengers {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 0 200px;
}

.messenger-parent {
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    margin: 40px 0;
}

.messenger-box {
    display: flex;
    align-items: center;
    font-weight: 700;
    text-decoration: none;
    color: #1877F0;
    font-size: 22px;
}

.facebook-title {
    color: #1877F0;
}

.twitter-title {
    color: #3FA2F7;
}

.instagram-title {
    color: #D2145A;
}

.line-title {
    color: #00B800;
}

.messenger-box img {
    width: 63px;
    height: 63px;
    margin-right: 20px;
}

.messenger-text {
    color: #384169;
    font-weight: 500;
    font-size: 18px;
    text-align: center;
}

@media (max-width: 991.99px) {
    .messengers {
        padding: 0 4% 100px;
    }

    .messenger-parent {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
        margin: 30px 0 0;
    }

    .messenger-box {
        margin-bottom: 30px;
    }
}

@media (max-width: 767.99px) {
    .messengers {
        padding: 0 4% 60px;
    }

    .messenger-box {
        font-size: 16px;
    }

    .messenger-box img {
        width: 45px;
        height: 45px;
        margin-right: 10px;
    }
}

@media (max-width: 575.99px) {
    .messenger-parent {
        grid-template-columns: repeat(2, 50%);
        margin: 30px 0 0;
    }

    .messenger-box {
        font-size: 15px;
        margin-bottom: 20px;
    }
}

/* -----------------------------------------------messengers end ------------------------------------------*/


/* -----------------------------------------------tasks start ------------------------------------------*/
.tasks {
    background-color: #E0EFEF;
    padding: 100px 0;
}
.tasks .title-eng-lang{
    padding-top: 0;
}

.picture-text {
    font-size: 16px;
}

.picture-text img {
    max-width: 100%;
    max-height: 60px;
}

.tasks .title-eng-lang {
    margin-bottom: 60px;
}

.task-box {
    max-width: 1200px;
    width: 90%;
    display: flex;
    align-items: center;
    margin: 0 auto 50px;
}

.task-box:nth-child(even) {
    flex-direction: row-reverse;
}

.task-img {
    width: 60%;
}

.task-content {
    font-family: "Yu Gothic UI";
    width: 40%;
    padding: 4%;
    background-color: #fff;
    position: relative;
}

.task-title {
    font-size: 22px;
    line-height: 24px;
    color: #67B3B5;
    text-align: center;
    margin-bottom: 25px;
    font-weight: bold;
}

.task-text {
    color: #384169;
    font-size: 18px;
    line-height: 30px;
    /* font-weight: 600; */
}

.task-content-number {
    height: 55px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

.task-box:nth-child(odd) .task-content-img {
    width: 85px;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translate(50%, 30%);
}

.task-box:nth-child(even) .task-content-img {
    width: 85px;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translate(-50%, 30%);
}

.task-box:last-child .task-content {
    width: 100%;
    margin-top: 50px;
}

.grid-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 25px;
}

@media (max-width: 900px) {
    .task-box {
        width: 80%;
        flex-wrap: wrap;
        margin-bottom: 5em;
    }

    .task-img {
        width: 100%;
        margin-bottom: 50px;
    }

    .task-content {
        width: 100%;
    }

    .grid-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.99px) {
    .tasks {
        padding: 60px 0;
    }

    .task-box {
        width: 100%;
    }

    .task-content,
    .task-box:last-child .task-content {
        width: calc(100% - 30px);
        padding: 7%;
        margin: 0 auto;
    }

    .task-content-number {
        height: 35px;
    }

    .task-box:nth-child(odd) .task-content-img {
        width: 60px;
        transform: translate(20px, 30%);
    }

    .task-box:nth-child(even) .task-content-img {
        width: 60px;
        transform: translate(-20px, 30%);
    }
}

/* -----------------------------------------------tasks end ------------------------------------------*/



/* ----------------------------------------------- info start ------------------------------------------*/
.info {
    padding: 110px 0 250px;
}

.mark-box {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto 150px;
    background: #E7E8ED;
    padding: 80px 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mark-top {
    font-family: 'YuGo Bold';
    font-size: 30px;
    font-weight: 700;
    color: #384169;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mark-bottom {
    height: 200px;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translate(40%, 30%);
}

.mark-img-text {
    width: 50%;
    text-align: center;
}

.mark-img-text img {
    width: 240px;
}

.mark-texts {
    width: 50%;
}

.mark-text {
    color: #384169;
    font-size: 15px;
    font-size: 18px;
    vertical-align: middle;
}

.mark-text img {
    height: 14px;
}

.info .title-eng-lang {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.trees-img {
    text-align: center;
    margin: 50px auto 85px;
}

.trees-img img {
    height: 55px;
}

.polygons {
    max-width: 1200px;
    margin: 0 auto 300px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.polygon-box {
    width: calc(100% / 3);
    position: relative;
}

.polygon-box:nth-child(4),
.polygon-box:nth-child(5) {
    top: -45px;
}

.polygon-img {
    max-width: 100%;
}

.trollebus-img {
    width: 104px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
}

.home-img {
    width: 80px;
    position: absolute;
    top: 40%;
    left: 0;
    transform: translate(-40%, -100%);
}

.church-img {
    width: 70px;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(-40%, 50%);
}

.family-img {
    width: 85px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, 0);
}

.children-img {
    width: 120px;
    position: absolute;
    top: 0;
    right: 0;
}

.school-img {
    width: 70px;
    position: absolute;
    top: 40%;
    left: 0;
    transform: translate(-40%, -80%);
}

.workers-img {
    width: 170px;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(-50%, 50%);
}

.lesson-img {
    width: 120px;
    position: absolute;
    top: 40%;
    right: 0;
    transform: translate(70%, -100%);
}

.child-img {
    width: 70px;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(-100%, 50%);
}

.info-bottom {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    text-align: center;
}

.mark-logo {
    width: 240px;
}

.info-bottom-leftImg {
    width: 150px;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translate(50%, 100%);
}

.info-bottom-rightImg {
    width: 150px;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(-50%, -100%);
}

@media (max-width: 1100px) {

    .polygon-box:nth-child(4),
    .polygon-box:nth-child(5) {
        top: -40px;
    }
}

@media (max-width: 991.99px) {

    .polygon-box:nth-child(4),
    .polygon-box:nth-child(5) {
        top: -35px;
    }
}

@media (max-width: 767.99px) {
    .picture-text {
        width: 80%;
        margin: 0 auto;
    }

    .mark-box {
        width: 90%;
        flex-wrap: wrap;
        padding: 50px 20px;
        margin: 0 auto 100px;

    }

    .mark-img-text {
        width: 100%;
        margin-bottom: 2rem;
    }

    .mark-texts {
        width: 100%;
    }

    .mark-bottom {
        height: 143px;
        transform: translate(0, 10%);
    }

    .trees-img {
        margin: 30px auto;
    }

    .polygons {
        margin: 0 auto 200px;
    }

    .polygon-box {
        width: 80%;
        margin: 0 auto;
    }

    .trollebus-img {
        width: 20%;
        width: 80px;
        left: 0;
        top: 0;
        transform: translate(0, 0);
    }

    .home-img {
        width: 20%;
        top: 0;
        left: unset;
        right: 0;
        transform: translate(0, 0);
    }

    .church-img {
        width: 20%;
        top: 0;
        right: unset;
        left: 0;
        transform: translate(0, 50%);
    }

    .family-img {
        width: 20%;
        top: 30%;
        left: 0;
        transform: translate(0, -50%);
    }

    .children-img {
        width: 30%;
    }

    .school-img {
        width: 20%;
        transform: translate(0, -100%);
    }

    .workers-img {
        width: 35%;
        bottom: unset;
        top: 0;
        transform: translate(0, -30%);
    }

    .lesson-img {
        width: 40%;
        top: 0;
        transform: translate(0, -50%);
    }

    .child-img {
        width: 15%;
        transform: translate(-10%, -10%);
    }

    .polygon-box:nth-child(4),
    .polygon-box:nth-child(5) {
        top: 0;
    }

    .info-bottom-leftImg {
        transform: translate(-50%, 100%);
    }

    .info-bottom-rightImg {
        transform: translate(50%, -100%);
    }
}

@media (max-width: 575.99px) {
    .mark-top {
        width: 100%;
        text-align: center;
        transform: translate(-50%, -50%);
    }
    .mark-text{
        font-size: 16px;

    }
    .footer .footer-contact-link, .footer .footer-contact-link a{
        font-size: 1rem;
    }
    .message-context{
        text-align: left; 
        font-size: 1rem;
        line-height: 1.5;       
    }
    .d-none{
        display: none;
    }
    .info .title-eng-lang{
        text-align: left;
    }
    .contact .contact-desc-jp{
        text-align: left;
    }
}

/* ----------------------------------------------- info end ------------------------------------------*/



/* ----------------------------------------------- contact start ------------------------------------------*/
.contact {
    background-color: #67B3B5;
    padding: 100px 0;
    position: relative;
}

.contact-container {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
}

.contact-title {
    text-align: center;
    font-family: 'MS Gothic';
    font-size: 30px;
    line-height: 36px;
    color: #fff;
    margin-bottom: 5px;
}

.contact-desc-eng {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 18px;
    color: #384169;
    text-align: center;
    margin-bottom: 45px;
}

.contact-desc-jp {
    /* font-family: 'MS Gothic'; */
    font-size: 16px;
    line-height: 19px;
    color: #384169;
    text-align: center;
    margin-bottom: 12px;
}

.has-margin {
    margin: 35px 0 75px;
}

.contact-form {
    transform-origin: 0 100%;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    height: 0;
    transform: scaleY(0);
    transition: height 0.5s;
}

.contact-form.show {
    height: auto;
    transform: scaleY(1);
    transition: all 0.7s;
}

.contact-form-box {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.contact-label {
    width: 166px;
    font-family: 'MS Gothic';
    font-size: 1.3rem;
    line-height: 19px;
    color: #fff;
    margin-right: 25px;
}

.required {
    color: #EB1C24;
    margin-right: 14px;
}

.contact-form input {
    width: 550px;
    border: none;
    padding: 15px 5px;
    outline: none;
}

.align-items-start {
    align-items: flex-start;
    margin-bottom: 60px;
}

#thirty-input,
#index {
    width: 230px;
}

textarea#message {
    width: 550px;
    height: 200px;
    border: none;
    padding: 15px 5px;
    outline: none;
    resize: vertical;
}

.contact-check-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 70px;
}

#check {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.check-label {
    color: #fff;
}

.contact-submit {
    width: 200px;
    height: 50px;
    background-color: #384169;
    display: flex;
    align-items: center;
    justify-content: end;
    color: #fff;
    border: none;
    margin: 0 auto;
    cursor: pointer;
    text-decoration: none;
}

.contact-submit img {
    width: 15px;
    margin-left: 40%;
}

.contact-submit[type=button] img {
    margin-left: 15%;
}

.contact-image {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 67px;
    transform: translate(0, 50%);
}

@media (max-width: 767.99px) {
    .contact-form-box {
        flex-wrap: wrap;
    }

    .contact-label {
        width: 100%;
        margin-bottom: 10px;
    }

    .contact-form input,
    textarea#message {
        width: 100%;
    }

    .contact-image {
        width: 100%;
        height: auto;
    }
}

/* ----------------------------------------------- contact end ------------------------------------------*/


/* ----------------------------------------------- footer start ------------------------------------------*/
footer {
    padding: 110px 0 7px;
}

.footer-content {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto 110px;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    align-items: center;
    gap: 25px;
}

.footer-logo {
    display: block;
    text-decoration: none;
    text-align: center;
}

.footer-logo img {
    height: 80px;
    text-align: center;
}

.footer-contact-title {
    color: #67B3B5;
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 22px;
}

.footer-contact-link,
.footer-contact-link a {
    color: #384169;
    /* font-size: 1.3rem; */
    line-height: 19px;
    margin-bottom: 9px;
    text-decoration: none;
}

.footer-map {
    height: 240px;
}

.footer-map>* {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.footer-map iframe{
    width: 100%;
}
.footer-end {
    text-align: center;
    font-size: 10px;
    line-height: 12px;
    color: #67B3B5;
    margin-bottom: 5px;
}

@media (max-width: 767.99px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 25px 0;
    }

    .footer-logo {
        grid-column: 1/3;
    }
}

@media (max-width: 575.99px) {
    .footer-content {
        grid-template-columns: 1fr;
        margin-bottom: 60px;
    }

    .footer-contact {
        grid-column: span 2;
    }
}

/* ----------------------------------------------- footer end ------------------------------------------*/


/*フッター----------------------*/

/* ブログページ用スタイル */
.article, .archives {
    padding: 40px 20px;
}

.article-container, .archives-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ヘッダーサイズ調整 - ブログページのみ */
body.blog-page .top_global_image .big_bg {
    max-height: 300px;
    object-fit: cover;
}

body.blog-page .people-img,
body.blog-page .text-picture {
    display: none;
}