@charset "utf-8";
/* ------------------------------------------------------------ common */

/* ------------------------------------------------------------ firstview */
#firstview { 
    height: 300px; 
}
.webp #firstview { 
    background: url(../../images/commitment/kankyousekkei/fv.webp) no-repeat center center; 
    background-size: cover; 
}
.no-webp #firstview { 
    background: url(../../images/commitment/kankyousekkei/fv.jpg) no-repeat center center; 
    background-size: cover; 
}
#firstview h1,
#firstview h2 { 
    font-size: 50px; 
    text-align: center; 
    color: #fff; 
    line-height: 140%; 
}
#firstview h1 span,
#firstview h2 span { 
    display: block; 
    color: #b09866; 
    font-size: 20px; 
    line-height: 150%; 
}

/* ------------------------------------------------------------ container */
#container { 
    padding: 30px; 
}

#homeplanet { 
    width: 100%; 
    background: #fff; 
    padding: 112px 0 60px; 
    text-align: center; 
    margin-bottom: 30px; 
}

#hp_detail { 
    width: 100%; 
    background: #dce7ed; 
    text-align: center; 
    padding: 135px 0 160px; 
    margin-bottom: 30px; 
}
#hp_detail p { 
    width: 100%; 
    line-height: 305%; 
    font-size: 18px;  
}

.thoughts { 
    background: #fff; 
    margin: 0 auto 30px; 
    text-align: center; 
    padding: 0 0 90px; 
    width: 100%;
    max-width: 1320px;
}
.thoughts img { 
    min-width: 1323px; 
    width: 100%; 
    min-height: 460px; 
    height: auto; 
}
.thoughts .col-1 { 
    width: 100%; 
    text-align: center; 
    padding: 80px 0 10px; 
}
.thoughts .col-1 .heading,
.thoughts .col-1 h3 { 
    width: 100%; 
    font-size: 40px; 
    padding: 0 0 20px; 
}
.thoughts .col-1 p { 
    width: 100%; 
    font-size: 18px; 
    line-height: 270%; 
}
.thoughts .col-2 { 
    width: 42%; 
    max-width: 550px; 
    padding: 50px 3% 0; 
    text-align: left; 
    vertical-align: top;
    display: inline-block; 
    *display: inline; 
    *zoom: 1;
}
.thoughts .col-2 .heading,
.thoughts .col-2 h3 { 
    font-size: 30px; 
    padding: 30px 0; 
}
.thoughts .col-2 .heading span,
.thoughts .col-2 h3 span { 
    display: inline-block; 
    *display: inline; 
    *zoom: 1; 
}
.thoughts .col-2 small { 
    display: inline-block; 
    *display: inline; 
    *zoom: 1; 
    width: 86px; 
    height: 32px; 
    line-height: 32px; 
    background: #000; 
    color: #fff; 
    text-align: center; 
    font-size: 16px; 
}
.thoughts .col-2 p { 
    line-height: 270%; 
    padding: 0 3% 0 0; 
}
.thoughts .col-2 p span { 
    display: block; 
    font-size: 12px; 
    padding: 25px 0 0; 
}

.purpose,
.philosophy {
    margin-top: 80px;
    margin-bottom: 80px;
    text-align: center;
}
.purpose h2.heading,
.philosophy h2.heading {
    font-size: 40px;
    padding: 0 0 20px;
}
.purpose p,
.philosophy p {
    font-size: 20px;
}

#continue { 
    padding: 120px 0; 
    background: #faf9f7;  
    text-align: center;
    margin-bottom: 120px;
}
#continue h3,
#continue .heading { 
    font-size: 40px;
    margin-bottom: 80px;
}
#continue p { 
    padding: 0 0 40px 0; 
    font-size: 20px; 
    line-height: 1.8;
    max-width: 1320px;
    margin: 0 auto;
}
#continue div { 
    padding: 30px 0 0; 
}
#continue div img { 
    vertical-align: top; 
}
#continue div p { 
    padding: 0; 
    display: inline-block; 
    *display: inline; 
    *zoom: 1; 
    text-align: center; 
    line-height: 150%; 
    padding: 25px 0 0 25px; 
}
#continue div p span { 
    display: block; 
    font-size: 26px; 
}

/* ------------------------------------------------------------ mobile */
@media only screen and (max-width: 640px) {

    /* ------------------------------------------------------------ firstview */
    #firstview { 
        height: 100px; 
    }
    #firstview h1,
    #firstview h2 { 
        font-size: 26px; 
        line-height: 140%; 
    }
    #firstview h1 span,
    #firstview h2 span { 
        font-size: 12px; 
        line-height: 150%; 
    }

    /* ------------------------------------------------------------ container */
    #container { 
        padding: 3%; 
    }

    #homeplanet { 
        width: 88%; 
        padding: 30px 6%; 
        margin-bottom: 3%; 
    }
    #homeplanet img { 
        width: 100%; 
        height: auto; 
    }

    #hp_detail { 
        width: 88%; 
        padding: 50px 6%; 
        margin-bottom: 3%; 
    }
    #hp_detail p { 
        width: 100%; 
        line-height: 220%; 
        font-size: 14px; 
        text-align: left; 
    }

    .thoughts { 
        margin-bottom: 3%; 
        padding: 0 0 45px; 
    }
    .thoughts img { 
        min-width: 100%; 
        width: 100%; 
        min-height: auto; 
        height: auto; 
    }
    .thoughts .col-1 { 
        padding: 30px 0 0; 
    }
    .thoughts .col-1 h3,
    .thoughts .col-1 .heading { 
        font-size: 26px; 
    }
    .thoughts .col-1 p { 
        width: 88%; 
        line-height: 200%; 
        font-size: 14px; 
        padding: 0 6%; 
        text-align: left; 
    }
    .thoughts .col-2 { 
        display: block; 
        width: 88%; 
        padding: 25px 6% 0; 
    }
    .thoughts .col-2 small { 
        width: 70px; 
        height: 25px; 
        line-height: 25px; 
        font-size: 13px; 
    }
    .thoughts .col-2 .heading,
    .thoughts .col-2 h3 { 
        font-size: 24px; 
        padding: 15px 0 10px; 
        line-height: 130%; 
    }
    .thoughts .col-2 p { 
        font-size: 14px; 
        padding: 0 0 20px; 
        line-height: 200%; 
    }
    .thoughts .col-2 p span { 
        padding: 12px 0 0; 
    }

    .purpose,
    .philosophy {
        margin-top: 40px;
        margin-bottom: 60px;
        text-align: center;
    }
    .purpose h2.heading,
    .philosophy h2.heading {
        font-size: 26px;
        padding: 0 0 20px;
    }
    .purpose p,
    .philosophy p {
        font-size: 16px;
    }

    #continue { 
        padding: 60px 6%; 
    }
    #continue h3,
    #continue .heading { 
        font-size: 26px;
        margin-bottom: 24px;
    }
    #continue h3 span,
    #continue .heading span { 
        display: inline-block; 
        *display: inline; 
        *zoom: 1; 
    }
    #continue p { 
        padding: 15px 0; 
        font-size: 16px; 
        line-height: 210%; 
        text-align: left; 
    }
    #continue div { 
        padding: 15px 0 0; 
    }
    #continue div img { 
        width: 40%; 
        height: auto; 
    }
    #continue div p { 
        padding: 15px 0 0 0;  
        display: block; 
    }
    #continue div p span { 
        font-size: 24px; 
    }
}