body {/*background: url(../img/csr/bg.jpg) 50% 50% no-repeat; background-attachment: fixed; background-size: cover;*/ color: #171919; background-color: #eff2f2;}

.backlink {margin-top: 60px;}

.strong-char {font-size: 1.1em; font-weight: bold;}
.csr-list-wrapper {max-width: 1200px; margin: 0 auto;background-color: #fff; transition: all .8s ease-out .5s;}
.__translate-y-wrapper {overflow: hidden;}
.translate-y {transform: translateY(-250px); margin-bottom: -250px;}

.csr-header {padding: 1.5rem 0 1rem; margin: 0 auto; text-align: center;}
.csr-header a {text-decoration: none; color: inherit;}
.csr-header-home {padding: 5rem 1rem; text-align: center;}
.csr-header-home-tagline {margin-bottom: 1rem; font-size: 1.1rem; color: #171919;}
.csr-header-flex {display: flex; justify-content: space-between; margin: 0 1rem;}
.csr-header-logo {white-space: nowrap;}
.csr-header-img {width: 100%;}

.csr-header-tagline {margin-bottom: 1rem; font-size: 1rem; color: #171919; font-weight: bold;}
.csr-header-branding {width: 100%; margin: 0 5px 1.5rem; font-size: 1.3rem; font-weight: normal;}
.csr-header-branding img {opacity: 87%;}

.csr-header-nav {width: calc(100% - 50%); text-align: right;}
.csr-header-nav-ul {margin: 0 0 1rem 2rem;}
.csr-header-nav-ul li {display: inline-block; width: auto; padding: .6rem 1rem .3rem; font-size: .98rem; color: #3b4040; line-height: 1em; position: relative; white-space: nowrap;}
.csr-header-nav-ul li i {margin-left: 5px}

.csr-grid {display: flex; flex-wrap: wrap; margin: 0 auto 5rem; background: rgba(255,255,255,0.8);}
.csr-grid-item {overflow: hidden;}
.csr-grid-item-link {display: flex; flex-wrap: wrap; align-items: center; text-decoration: none; color: #000;}
.csr-grid-item-link:hover {opacity: 0.8;}
.csr-grid-item-image img {width: 100%; height: 100%; object-fit: cover;}
.csr-grid-item-body {padding: 1rem;}
.csr-grid-item-title {position: relative; padding-bottom: 0.5rem; color: #171919; text-align: center; font-size: 1.2rem; font-weight: bold;}
.csr-grid-item-title span {display: inline-block;}
.csr-grid-item-title span::after {content: ""; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 1.2rem; height: 0.2rem; background: #171919;}
.csr-grid-item-icon {width: 1.3rem; height: 1.3rem; margin: 0 5px 0 0; line-height: 1.3rem; text-align: center; border-radius: 1rem; background: #a3aebc; color: #FFF; display: inline-block; }
.csr-grid-item-subtitle {margin-bottom: 0.4rem; text-align: center; font-size: 0.8rem; letter-spacing: 0.2rem; color: #a3aebc;}
.csr-grid-item-category {margin-bottom: 0.4rem; text-align: center; font-size: 0.8rem; color: #a3aebc; font-weight: normal;}
.csr-grid-more, .csr-grid-back {width: 100%;}
.csr-grid-back {margin: -50px 0 50px; }
.csr-grid-more a, .csr-grid-back a {display: block; padding: 1.5rem; text-align: center; font-size: 1.2rem; color: #000; text-decoration: none;}
.csr-grid-more a:hover, .csr-grid-back a:hover {opacity: 0.8;}

.csr-article {margin: 0 auto 5rem; padding: 3rem; background: rgba(255,255,255,0.8);}
.csr-article-title {position: relative; margin-bottom: 3rem; padding-bottom: 1rem; text-align: center; font-size: 1.8rem; font-weight: bold;}
.csr-article-title::after {content: ""; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 2rem; height: 0.2rem; background: #000;}
.csr-article-subtitle {margin-bottom: 0.5rem; text-align: center; font-size: 1rem; letter-spacing: 0.2rem; color: #CCC;}
.csr-article-content {line-height: 2;}
.csr-article-content p {margin: 1rem;}
.csr-article-content h3 {margin: 2rem 1rem 1rem;}
.csr-article-content img {margin: 1rem;}

.csr-list-title {font-weight: normal; font-size: 1.3rem; letter-spacing: 0.2rem; margin: 0 1rem 1rem; padding: 0.5rem; border-bottom: 1px solid #ccc; }
.csr-list-item {padding: 2rem 1.2rem; background: rgba(255,255,255,0.8); border: 1px solid #DDD;}
.csr-list-item-upperwrap {height: 450px;}
.csr-list-item-head {width: 100%; margin-bottom: 2rem; text-align: center;}
.csr-list-item-title {margin-bottom: 1rem; color: #171919; font-size: 1.3em;}
.csr-list-item-category {color: #a3aebc; margin-bottom: 0.4rem; text-align: center; font-size: 1rem; font-weight: normal;}
.csr-list-item-icon {width: 1.8rem; height: 1.8rem; margin: 0 5px .5rem; font-size: 0.8rem; line-height: 1.8rem; text-align: center; border-radius: 1.5rem; color: #FFF; background: #a3aebc; display: inline-block;}
.csr-list-item-image {height: 400px; display: flex; align-items: center; justify-content: center; position: relative;}
.csr-list-item-image img {max-width: 100%; max-height: 100%; object-fit: cover; width: auto; height: auto;}
.csr-list-item-image a {height: 100%;}
.csr-list-item-image a::after {content: "\f00e"; font-family: FontAwesome; position: absolute; bottom: 0; right: 0; color: #bbb; font-size: 1.1rem; background: rgb(255 255 255 / 80%); padding: .2rem; border-radius: 50%;}
.csr-list-item-body {line-height: 2; border-top: 1px solid #ccc; margin-top: 30px;}
.csr-list-item-body p {margin: .7rem 1rem 1rem; line-height: 1.6em;}
.csr-list-item-body h3 {margin: 2rem 1rem 1rem;}

.csr-article-title {position: relative; margin-bottom: 3rem; padding-bottom: 1rem; text-align: center; font-size: 1.8rem; font-weight: bold;}
.csr-article-title::after {content: ""; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 2rem; height: 0.2rem; background: #000;}

.csr-comitment-box {display: flex; justify-content: end; align-items: flex-end;}
.csr-comitment-box-img {width: calc(50% - 2rem);}
.csr-comitment-box-text {text-align: right;}
.csr-article-content .csr-comitment-box-text img {padding: 0; margin: 10px -3px -10px 0;}

.csr-footer {padding: 2rem; text-align: center; border-top: 1px solid #EEE; background: #FFF;}
.csr-footer-label {margin-bottom: 1.5rem; font-size: 1.3rem;}
.csr-footer-nav {display: flex; flex-wrap: wrap; margin: 0 auto 2rem;}
.csr-footer-nav-item {margin-bottom: 1rem;}
.csr-footer-nav-item img {width: 100%;}

@media (min-width: 1201px) {
    html {font-size: 18px;}
    .csr-header-img {object-fit: cover;}
    .csr-header-branding {font-size: 1.7rem; text-align: left;}
    .csr-grid {width: 1200px;}
    .csr-grid-item {width: 600px; height: 300px;}
    .csr-grid-item-image {width: 300px; height: 300px;}
    .csr-grid-item-body {width: 300px;}
    .csr-grid-item:nth-child(4n+3) .csr-grid-item-link {flex-direction: row-reverse;}
    .csr-grid-item:nth-child(4n) .csr-grid-item-link {flex-direction: row-reverse;}
    .csr-article {width: 1200px;}
    .csr-article-content img {width: calc(70% - 2rem)}
    .csr-list {display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 1.5rem; margin: 0 1.5rem;}
    .csr-list-item {/* display: flex; flex-wrap: wrap; justify-content: space-between; */ width: 48%; padding: 3rem;}
    .csr-list-item-head {display: flex; justify-content: space-between; margin-bottom: 0;}
    .csr-list-item-category {text-align: left; margin-right: 1em; white-space: nowrap;}
    .csr-list-item-title {text-align: right; font-size: 1.1em;}
    .csr-list-item-body {width: 100%;}
    /* .csr-list-item:nth-child(2n) {flex-direction: row-reverse;} */
    .csr-footer-nav {width: 1140px;}
    .csr-footer-nav-item {width: 33.3%;}
}
@media (min-width: 751px) and (max-width: 1200px) {
    html {font-size: 1.5vw;}
    .translate-y {transform: translateY(-15rem); margin-bottom: -15rem;}
    .csr-header-img {object-fit: cover;}
    .csr-header-branding {width: 100%; font-size: 1.7rem; text-align: left;}
    .csr-grid {width: 100%;}
    .csr-grid-item {width: 50%; height: 25vw;}
    .csr-grid-item-image {width: 50%; height: 25vw;}
    .csr-grid-item-body {width: 50%;}
    .csr-grid-item:nth-child(4n+3) .csr-grid-item-link {flex-direction: row-reverse;}
    .csr-grid-item:nth-child(4n) .csr-grid-item-link {flex-direction: row-reverse;}
    .csr-article {width: 100%;}
    .csr-article-content img {width: calc(70% - 2rem)}
    .csr-list {display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 1.5rem; margin: 0 1.5rem;}
    .csr-list-item { /*display: flex; flex-wrap: wrap; justify-content: space-between; */ width: 48%; padding: 3rem;}
    .csr-list-item-head {display: flex; justify-content: space-between; margin-bottom: 0;}
    .csr-list-item-category {text-align: left; margin-right: 1em; white-space: nowrap;}
    .csr-list-item-title {text-align: right; font-size: 1.1em;}
    .csr-list-item-image {width: 100%; text-align: center;}
    .csr-list-item-body {width: 100%;}
    .csr-list-item:nth-child(2n) {flex-direction: row-reverse;}
    .csr-header-nav-ul {display: flex; flex-wrap: nowrap; justify-content: space-between; margin: 0 0 1rem;}
    .csr-footer-nav {width: 95%;}
    .csr-footer-nav-item {width: 33.3%;}
}
@media (min-width: 441px) and (max-width: 750px) {
    html {font-size: 3vw;}
    .translate-y {transform: translateY(-7rem); margin-bottom: -7rem;}
    .csr-grid {width: 100%;}
    .csr-grid-item {width: 100%; height: 50vw;}
    .csr-grid-item-image {width: 50%; height: 50vw;}
    .csr-grid-item-body {width: 50%;}
    .csr-grid-item:nth-child(2n+1) .csr-grid-item-link {flex-direction: row-reverse;}
    .csr-list-title {background: none; margin: 0 .5rem 1rem;}
    .csr-header {margin: 0;}
    .csr-header-flex {flex-wrap: wrap;}
    .csr-header-nav { width: 100%; }
    .csr-header-nav-ul {margin: 0 .3rem .5rem; display: flex; flex-wrap: nowrap; justify-content: space-between;}
    .csr-header-nav-ul li {font-size: .8rem; display: flex; align-items: center; justify-content: center; padding: .3rem;}
    .csr-list-item {margin: 0 1rem 1rem;}
    .csr-list-item-image { height: 360px;  }
    .csr-article {width: 100%; padding: 3rem 2rem;}
    .csr-article-content img {width: calc(100% - 2rem)}
    .csr-comitment-box {display: block; margin-bottom: 35px;}
    img.csr-sign-img {width: 30%;}
    .csr-footer-nav {width: 95%;}
    .csr-footer-nav-item {width: 50%;}
}
@media (max-width: 440px) {
    html {font-size: 5vw;}
    /* body {background: url(../img/csr/bg.jpg) 50% 0 repeat-y; background-attachment: none; background-size: 120%;} */
    .translate-y {transform: translateY(-85px); margin-bottom: -85px;}
    .csr-header {margin: 0;}
    .csr-grid {width: 100%;}
    .csr-grid-item {width: 100%;}
    .csr-grid-item-image {width: 100%; height: 100vw;}
    .csr-grid-item-body {width: 100%;}
    .csr-list-title {background: none; margin: 0 .5rem 1rem;}
    .csr-header-flex {flex-wrap: wrap; margin: 0;}
    .csr-header-nav { width: 100%; }
    .csr-header-nav-ul {margin: 0 .3rem .5rem; display: flex; flex-wrap: nowrap; justify-content: space-between;}
    .csr-header-nav-ul li {font-size: .8rem; display: flex; align-items: center; justify-content: center; padding: .3rem; white-space: pre-wrap;}
    .csr-list-item {margin: 0 1rem 2rem;}
    .csr-list-item-upperwrap {height: auto;}
    .csr-list-item-title {margin-bottom: 0;}
    .csr-list-item-head {margin-bottom: 1rem;}
    .csr-list-item-image {width: 100%; height: auto;}
    .csr-list-item-image img {display: block;}
    .csr-article {width: 100%; padding: 3rem .5rem;}
    .csr-article-content img {width: 100%; margin: 0;}
    p.csr-comitment-box-text {margin: .2rem 0 0;}
    .csr-comitment-box {display: block; margin-bottom: 35px;}
    img.csr-sign-img {width: 140px;}
    .csr-article-content .csr-comitment-box-text img {margin: 0;}
    .csr-footer-nav {width: 95%;}
    .csr-footer-nav-item {width: 100%;}
}