@charset 'UTF-8';
/* ==========================================================================
   company
   ========================================================================== */
/* p-message
-------------------------------------------------------------------------- */
.p-message {
    position: relative;
    background-color: #f8f1e3;
}

@media screen and (min-width: 768px) {
    .p-message {
        padding-top: 60px;
    }
}

@media screen and (min-width: 768px) {
    .p-message__inner {
        width: 100%;
    }
}

.p-message__container {
    position: relative;
    z-index: 2;
}

@media screen and (max-width: 767px) {
    .p-message__container {
        padding: 16vw 0vw 8vw 0vw;
    }
}

@media screen and (min-width: 768px) {
    .p-message__container {
        width: 100%;
        padding: 40px 0;
    }
}
/*
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .p-message__container {
        margin-left: auto;
        margin-right: auto;
    }
}
*/

@media screen and (max-width: 767px) {
    .p-message__body {
        padding-top: 5.33vw;
    }
}

@media screen and (min-width: 768px) {
    .p-message__body {
        padding-top: 20px;
        padding-bottom: 40px;
    }
}

@media screen and (max-width: 767px) {
    .p-message__title {
        margin-top: 5.33vw;
        font-size: 40px;
        font-size: 5.33vw;
        line-height: 1.6;
    }
}

@media screen and (min-width: 768px) {
    .p-message__title {
        margin-top: 30px;
        font-size: 30px;
        font-size: 3rem;
        line-height: 1.6;
    }
}

.p-message__text {
    margin-bottom: 1.5em;
}

.p-message__author {
    text-align: right;
    font-weight: 700;
}

@media screen and (min-width: 768px) {
    .p-message__author {
        margin-top: 30px;
        font-size: 20px;
        font-size: 2rem;
    }
}

@media screen and (max-width: 767px) {
    .p-message__visual {
        margin-top: -13.33vw;
        height: 66.66667vw;
    }
}

@media screen and (min-width: 768px) {
    .p-message__visual {
        height: 500px;
    }
}
/*
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .p-message__visual {
        margin-top: -120px;
    }
}
*/

@media screen and (min-width:768px) {
    .p-message__visual {
        position: absolute;
        top: 0;
        right: 0;
        width: 54.68%;
        height: 620px;
    }
}

@media screen and (min-width: 768px) {
    .p-message__image {
        width: 100%;
        height: 100%;
    }
}

/* p-tpoint
-------------------------------------------------------------------------- */
.p-tpoint {
    position: relative;
    padding-top: 40px;
    padding-bottom: 40px;
}

.p-tpoint:after {
    content: '';
    background-color: #f8f1e3;
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    z-index: -1;
}

.p-tpoint__bold {
    font-weight: bold;
}

@media screen and (max-width: 767px) {
    .p-tpoint {
        padding-top: 30px;
    }
}

.p-tpoint__inner {
    position: relative;
}

@media screen and (min-width: 768px) {
    .p-tpoint__inner {
        width: 100%;
    }
}

.p-tpoint__container {
    position: relative;
    z-index: 2;
}

@media screen and (max-width: 767px) {
    .p-tpoint__container {
        padding: 4vw 0vw 8vw 0vw;
    }
}

@media screen and (min-width: 768px) {
    .p-tpoint__container {
        width: 100%;
        max-width: 615px;
    }
}
/*
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .p-tpoint__container {
        margin-left: auto;
        margin-right: auto;
        padding: 0vw 0vw 4vw 0vw;
    }
}
*/

@media screen and (max-width: 767px) {
    .p-tpoint__body {
        padding-top: 5.33vw;
    }
}

@media screen and (min-width: 768px) {
    .p-tpoint__body {
        padding-top: 20px;
    }
}

@media screen and (max-width: 767px) {
    .p-tpoint__title {
        margin-top: 5.33vw;
        font-size: 40px;
        font-size: 5.33vw;
        line-height: 1.6;
    }
}

@media screen and (min-width: 768px) {
    .p-tpoint__title {
        margin-top: 30px;
        font-size: 30px;
        font-size: 3rem;
        line-height: 1.6;
    }
}

.p-tpoint__flow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 10px;
}

@media screen and (max-width: 767px) {
    .p-tpoint__flow {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: start;
    }
}

@media screen and (max-width: 767px) {
    .p-tpoint__flowtitle {
        margin-top: 10.67vw;
        font-size: 36px;
        font-size: 4.8vw;
        line-height: 1.4;
    }
}

@media screen and (min-width: 768px) {
    .p-tpoint__flowtitle {
        margin-top: 20px;
        font-size: 20px;
        font-size: 2rem;
    }
}

.p-tpoint__flowitem {
    background: #9e856e;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 50px;
    padding: 0 20px;
    font-size: 20px;
}

@media screen and (max-width: 767px) {
    .p-tpoint__flowitem {
        width: 27%;
        margin: 10px 5px;
    }
}

@media screen and (max-width: 767px) {
    .p-tpoint__flowitem {
        width: 100%;
        height: 60px;
        text-align: center;
    }
}

.p-tpoint__flowarrow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 30px;
}

.p-tpoint__flowarrow img {
    width: 100%;
}

@media screen and (max-width: 767px) {
    .p-tpoint__flowarrow {
        width: 100%;
        padding: 0;
        margin: 15px 0;
    }
    .p-tpoint__flowarrow img {
        width: 30px;
        -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
    }
}

@media screen and (max-width: 767px) {
    .p-tpoint__title2 {
        font-size: 40px;
        font-size: 5.33vw;
        line-height: 1.6;
    }
}

@media screen and (min-width: 768px) {
    .p-tpoint__title2 {
        font-size: 30px;
        font-size: 3rem;
        line-height: 1.6;
    }
}

.p-tpoint__title2 .color1 {
    font-weight: bold;
    color: #9e856e;
}

.p-tpoint__title2 .color2 {
    font-weight: bold;
    color: #5d330d;
}

.p-tpoint__title2 .arrow_image {
    width: 80px;
    margin: 0 30px;
    display: inline-block;
}

@media screen and (max-width: 767px) {
    .p-tpoint__title2 .arrow_image {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        padding: 0;
        margin: 15px 0;
    }
    .p-tpoint__title2 .arrow_image img {
        width: 30px;
        -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
    }
}

.p-tpoint__text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 20px 0;
    background: #fff;
}

.p-tpoint__text span {
    color: #27b561;
}

@media screen and (max-width: 767px) {
    .p-tpoint__text span {
        padding-bottom: 2.67vw;
        font-size: 25px;
        font-size: 2.5rem;
        margin-top: 10px;
    }
}

@media screen and (min-width: 768px) {
    .p-tpoint__text span {
        font-size: 30px;
        font-size: 3rem;
        padding-bottom: 10px;
    }
}

.p-tpoint__author {
    text-align: left;
    margin-bottom: 10px;
    font-weight: 700;
}

@media screen and (min-width: 768px) {
    .p-tpoint__author {
        margin-top: 20px;
        font-size: 20px;
        font-size: 2rem;
    }
}

.p-tpoint__visual {
    border: 1px solid #dac292;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    overflow: hidden;
}

@media screen and (max-width: 767px) {
    .p-tpoint__visual {
        height: 89.33333vw;
        width: 89.33333vw;
        margin: 0 auto;
    }
    .p-tpoint__visual img {
        height: 89.33333vw;
        width: 89.33333vw;
    }
}

@media screen and (min-width: 768px) {
    .p-tpoint__visual {
        width: 85%;
        height: 75vw;
    }
    .p-tpoint__visual img {
        width: 100%;
        height: 75vw;
    }
}
/*
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .p-tpoint__visual {
        margin: 0 auto;
    }
}
*/
@media screen and (min-width:768px) {
    .p-tpoint__visual {
        position: absolute;
        top: -70px;
        right: 0;
        width: 580px;
        height: 600px;
        overflow: hidden;
    }
    .p-tpoint__visual img {
        width: 580px;
        height: 600px;
    }
}

@media screen and (min-width: 768px) {
    .p-tpoint__image {
        width: 100%;
        height: 100%;
    }
}

.p-tpoint__list li {
    position: relative;
    padding-left: 2.27vw;
    margin-bottom: 10px;
}

@media screen and (max-width: 767px) {
    .p-tpoint__list li {
        padding-left: 4vw;
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 767px) {
    .p-tpoint__list li {
        padding-left: 8vw;
        margin-bottom: 20px;
    }
}

.p-tpoint__list li:before {
    position: absolute;
    top: 15px;
    bottom: 0;
    left: 0;
    margin: auto;
    content: '■';
    line-height: 1;
    display: inline-block;
    font-size: 20px;
    font-size: 2rem;
    color: #5d330d;
}

@media screen and (max-width: 767px) {
    .p-tpoint__list li:before {
        top: 18px;
    }
}

@media screen and (max-width: 767px) {
    .p-tpoint__list li:before {
        top: 8px;
    }
}

@media screen and (max-width: 767px) {
    .p-tpoint__list {
        font-size: 40px;
        font-size: 5.33vw;
        line-height: 1.6;
    }
}

@media screen and (min-width: 768px) {
    .p-tpoint__list {
        font-size: 30px;
        font-size: 3rem;
        line-height: 1.6;
    }
}

.sdg_img__area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.sdg_img__area::before {
    content: '';
    display: block;
    width: 15%;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
}

.sdg_img__area::after {
    content: '';
    display: block;
    width: 15%;
}

@media screen and (max-width: 767px) {
    .sdg_img__area::before {
        content: '';
        display: block;
        width: 23%;
        -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
                order: 1;
    }
    .sdg_img__area::after {
        content: '';
        display: block;
        width: 23%;
    }
}

.sdg_img__title {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
}

.sdg_img__title img {
    width: 80%;
    display: block;
    margin: 0 auto 3vw;
}

.sdg_img__logo {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
}

.sdg_img__logo img {
    width: 100%;
    display: block;
    margin: 3vw auto 3vw;
}

@media screen and (max-width: 767px) {
    .sdg_img__title img {
        width: 95%;
    }
}

.sdg_img__item {
    width: 15%;
    margin-bottom: 1.4vw;
}

@media screen and (max-width: 767px) {
    .sdg_img__item {
        width: 23%;
        margin-bottom: 1.4vw;
    }
}

.sdg_img2__area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.sdg_img2__area:after {
    content: '';
    width: 15%;
    display: block;
}

@media screen and (max-width: 767px) {
    .sdg_img2__area:after {
        width: 32%;
    }
}

.sdg_img2__area:before {
    content: '';
    width: 15%;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    display: block;
}

@media screen and (max-width: 767px) {
    .sdg_img2__area:before {
        width: 32%;
    }
}

.sdg_img2__title {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
}

.sdg_img2__title img {
    width: 80%;
    display: block;
    margin: 0 auto 3vw;
}

@media screen and (max-width: 767px) {
    .sdg_img2__title img {
        width: 95%;
    }
}

.sdg_img2__item {
    width: 15%;
    margin-bottom: 1.4vw;
}

@media screen and (max-width: 767px) {
    .sdg_img2__item {
        width: 32%;
        margin-bottom: 1.4vw;
    }
}

.csrPage__heading {
    font-size: 36px;
    font-size: 3.6rem;
    margin-top: 77px;
    font-weight: 400;
    letter-spacing: 2px;
    -webkit-font-feature-settings: 'palt' 1;
            font-feature-settings: 'palt' 1;
}

@media screen and (max-width: 767px) {
    .csrPage__heading {
        font-size: 50px;
        font-size: 6.67vw;
        margin: 13.33vw 0vw 0vw 0vw;
    }
}

.csrPage-intro__container {
    position: relative;
}

.csrPage-intro__container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20.3%;
    width: 601px;
    height: 450px;
    z-index: 1;
}

@media screen and (max-width: 767px) {
    .csrPage-intro__container::before {
        width: 80vw;
        height: 52vw;
    }
}

.csrPage-intro__wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding-top: 40px;
    position: relative;
    z-index: 2;
}

@media screen and (max-width: 767px) {
    .csrPage-intro__wrapper {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        padding-top: 40px;
    }
}

.csrPage-intro__text-box {
    width: 50%;
    margin-bottom: 40px;
}

@media screen and (max-width: 767px) {
    .csrPage-intro__text-box {
        width: 100%;
    }
}

.csrPage-intro__heading {
    position: relative;
}

.csrPage-intro__heading::before {
    content: '';
    position: absolute;
    top: -21px;
    left: 3px;
    width: 8px;
    height: 8px;
}

.csrPage-intro__en {
    display: block;
    font-weight: 600;
    position: relative;
    letter-spacing: .3rem;
}

.csrPage-intro__jp {
    display: block;
    letter-spacing: 1.5px;
    font-weight: 400;
    margin-top: 13px;
    font-size: 35px;
    font-size: 3.5rem;
}

@media screen and (max-width: 767px) {
    .csrPage-intro__jp {
        font-size: 60px;
        font-size: 8vw;
        margin: 1.73vw 0vw 0vw 0vw;
    }
}

.csrPage-intro__lead {
    display: block;
    letter-spacing: 1.6px;
    line-height: 1.6;
    font-weight: 400;
    margin-top: 30px;
    width: 95%;
}

@media screen and (max-width: 767px) {
    .csrPage-intro__lead {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .csrPage-intro__lead {
        margin: 4vw 0vw 10.67vw 0vw;
    }
}

.csrPage-intro__text {
    display: block;
    letter-spacing: .9px;
    font-weight: 400;
    margin-top: 19px;
    line-height: 1.49;
    width: 95%;
}

@media screen and (max-width: 767px) {
    .csrPage-intro__text {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .csrPage-intro__text {
        width: 100%;
        font-size: 32px;
        font-size: 4.27vw;
    }
}

.csrPage-intro__text + .csrPage-intro__text {
    margin-top: 20px;
}

.csrPage-intro__name {
    display: block;
    letter-spacing: .4px;
    font-weight: 400;
    margin-top: 14px;
    margin-right: 67px;
    font-size: 20px;
    font-size: 2rem;
    text-align: right;
}

@media screen and (max-width: 767px) {
    .csrPage-intro__name {
        font-size: 32px;
        font-size: 4.27vw;
        margin: 4.8vw 0vw 0vw 0vw;
    }
}

.csrPage-intro__name-big {
    font-size: 24px;
    font-size: 2.4rem;
    margin-left: 10px;
}

@media screen and (max-width: 767px) {
    .csrPage-intro__name-big {
        margin: 0vw 0vw 0vw 1.33vw;
    }
}

.csrPage-outline {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(1.3%, #fff), color-stop(1.3%, #ebebeb), color-stop(25.1%, #ebebeb), color-stop(25.1%, #fff), to(#fff));
    background-image: linear-gradient(#fff 0%, #fff 1.3%, #ebebeb 1.3%, #ebebeb 25.1%, #fff 25.1%, #fff 100%);
}

@media screen and (max-width: 767px) {
    .csrPage-outline {
        background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(1%, #fff), color-stop(1%, #ebebeb), color-stop(16.3%, #ebebeb), color-stop(16.3%, #fff), to(#fff));
        background-image: linear-gradient(#fff 0%, #fff 1%, #ebebeb 1%, #ebebeb 16.3%, #fff 16.3%, #fff 100%);
    }
}

@media screen and (max-width: 767px) {
    .csrPage-outline {
        background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(11vw, #fff), color-stop(11vw, #ebebeb), color-stop(84.3vw, #ebebeb), color-stop(84.3vw, #fff), to(#fff));
        background-image: linear-gradient(#fff 0%, #fff 11vw, #ebebeb 11vw, #ebebeb 84.3vw, #fff 84.3vw, #fff 100%);
    }
}

.csrPage-outline__img-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 59px;
}

@media screen and (max-width: 767px) {
    .csrPage-outline__img-box {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
}

@media screen and (max-width: 767px) {
    .csrPage-outline__img-box {
        margin: 12vw 0vw 0vw 0vw;
    }
}

.csrPage-outline__img {
    width: calc(100% / 3 - 25px * 2 / 3);
    height: 384px;
}

@media screen and (max-width: 767px) {
    .csrPage-outline__img {
        width: calc(100% / 2 - 20px * 1 / 2);
        height: 45.9vw;
    }
}

@media screen and (max-width: 767px) {
    .csrPage-outline__img {
        width: 100%;
        height: 89vw;
    }
}

.csrPage-outline__img + .csrPage-outline__img {
    margin-left: 25px;
}

@media screen and (max-width: 767px) {
    .csrPage-outline__img + .csrPage-outline__img {
        margin-left: 0;
    }
}

@media screen and (max-width: 767px) {
    .csrPage-outline__img + .csrPage-outline__img {
        margin: 5.33vw 0vw 0vw 0vw;
    }
}

@media screen and (max-width: 767px) {
    .csrPage-outline__img:nth-of-type(2) {
        margin-left: 20px;
    }
}

@media screen and (max-width: 767px) {
    .csrPage-outline__img:nth-of-type(2) {
        margin-left: 0;
    }
}

@media screen and (max-width: 767px) {
    .csrPage-outline__img:nth-of-type(3) {
        margin-top: 20px;
    }
}

@media screen and (max-width: 767px) {
    .csrPage-outline__img:nth-of-type(3) {
        margin: 5.33vw 0vw 0vw 0vw;
    }
}

.csrPage-outline__img.one {
    background: transparent url(./../image/csr-page_4.jpg) no-repeat top 42% center/cover;
}

.csrPage-outline__img.two {
    background: transparent url(./../image/csr-page_5.jpg) no-repeat top center/cover;
}

.csrPage-outline__img.three {
    background: transparent url(./../image/csr-page_6.jpg) no-repeat top 58% center/cover;
}

.csrPage-access__map {
    height: 510px;
    margin-top: 57px;
}

@media screen and (max-width: 767px) {
    .csrPage-access__map {
        height: 117.33333vw;
        margin: 12vw 0vw 0vw 0vw;
    }
}

.csrPage-privacy__wrapper {
    margin-top: 56px;
    margin-bottom: 98px;
}

@media screen and (max-width: 767px) {
    .csrPage-privacy__wrapper {
        margin: 7.47vw 0vw 20vw 0vw;
    }
}

@media screen and (max-width: 767px) {
    .csrPage-privacy__lead {
        font-size: 32px;
        font-size: 4.27vw;
    }
}

.csrPage-privacy__text {
    margin-top: 1em;
    line-height: 1.5;
}

@media screen and (max-width: 767px) {
    .csrPage-privacy__text {
        margin: 4vw 0vw 0vw 0vw;
        font-size: 32px;
        font-size: 4.27vw;
    }
}