/* sus__container
******************************************************* */
.main-content .sus__container { max-width: 1020px; }
@media only screen and (max-width:767px) {
.main-content .sus__container { max-width: none; }
}

/* sus__heading
******************************************************* */
.sus__heading { font-size: 1.3333em; font-weight: 700; line-height: 1.5; text-align: center; position: relative; padding-bottom: 15px; }
.sus__heading::after { content: ""; position: absolute; bottom: 0px; left: calc(50% - 1200px); width: 2400px; height: 5px; }
@media only screen and (max-width:767px) {
.sus__heading { font-size: 1.1764em; padding-bottom: 10px; }
}

/* sus__arw--A
******************************************************* */
.sus__arw--A { width: 21px; height: 21px; border: 1px solid #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; right: 10px; bottom: 0; margin: auto; }
.sus__arw--A .inner { position: relative; }
.sus__arw--A .inner:after,
.sus__arw--A .inner:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; }
.sus__arw--A .inner:before { left: -6px; width: 12px; height: 1px; background-color: #fff; }
.sus__arw--A .inner:after { left: 0px; width: 4px; height: 4px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); }
.sus__arw--B { width: 21px; height: 21px; border: 1px solid #D93924; border-radius: 50%; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; right: 10px; bottom: 0; margin: auto; }
.sus__arw--B .inner { position: relative; }
.sus__arw--B .inner:after,
.sus__arw--B .inner:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; }
.sus__arw--B .inner:before { left: -6px; width: 12px; height: 1px; background-color: #D93924; }
.sus__arw--B .inner:after { left: 0px; width: 4px; height: 4px; border-top: 1px solid #D93924; border-right: 1px solid #D93924; transform: rotate(45deg); }
@media only screen and (min-width:768px){
a .sus__arw--A { transition: border .3s ease-in-out; }
a:hover .sus__arw--A { border: 1px solid #D93924; }
a .sus__arw--A .inner:before { transition: background-color .3s ease-in-out; }
a:hover .sus__arw--A .inner:before { background-color: #D93924; }
a .sus__arw--A .inner:after { transition: border .3s ease-in-out; }
a:hover .sus__arw--A .inner:after { border-top: 1px solid #D93924; border-right: 1px solid #D93924; }
a .sus__arw--B { transition: border .3s ease-in-out; }
a:hover .sus__arw--B { border: 1px solid #fff; }
a .sus__arw--B .inner:before { transition: background-color .3s ease-in-out; }
a:hover .sus__arw--B .inner:before { background-color: #fff; }
a .sus__arw--B .inner:after { transition: border .3s ease-in-out; }
a:hover .sus__arw--B .inner:after { border-top: 1px solid #fff; border-right: 1px solid #fff; }
}

/* sus__title
******************************************************* */
.sus__title { background: url("/sustainable/shared/img/bg_city_black.png") left bottom/auto 70px repeat-x; position: relative; padding-bottom: 98px; }
.sus__title::before { background: url("/sustainable/shared/img/icon_truck.png") left top/cover no-repeat; content: ""; position: absolute; bottom: -28px; left: calc(50% - 188px); width: 88px; height: 43px; }
.sus__title-line { position: absolute; top: 0px; left: calc(50% - 1200px); width: 2400px; }
.sus__title-icon { position: absolute; top: -50px; left: calc(50% - 50px); width: 217px; }
.sus__title-heading { margin: 0 auto; width: 628px; }
.sus__title-heading small { display: block; font-size: 1.6666em; font-weight: 700; }
.sus__title-heading span { display: block; margin-top: 5px; }
.sus__title-sdgs { text-align: center; margin-top: 25px; }
@media only screen and (max-width:767px){
.sus__title {background: url("/sustainable/shared/img/bg_city_black.png") center bottom/auto 70px no-repeat; padding-bottom: 70px; }
.sus__title::before { bottom: -18px; left: 30px; }
.sus__title-icon { top: -20px; left: calc(50% - 40px); width: 147px; }
.sus__title-heading { margin: 0 auto; padding-top: 15px; width: 260px; }
.sus__title-heading small { font-size: 0.8235em; }
.sus__title-heading span { margin-top: 15px; }
.sus__title-sdgs { margin-top: 15px; }
.sus__title-sdgs img { width: 255px; height: 3px; }
}

/* sus__town
******************************************************* */
.sus__town-link { text-align: center; margin-left: auto; margin-right: auto; width: 1020px; max-width: 100%; }
.sus__town-link a { display: block; overflow: hidden; position: relative; padding-bottom: 35.2941%; }
.sus__town-link a::before { background: url("/sustainable/img/bg_town.png") center center/cover no-repeat; content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
.sus__town-link a img { position: absolute; top: 10%; left: calc(50% - 10%); width: 20.098%; }
.main-content a.sus__town-reason { box-sizing: border-box; background: url("/sustainable/img/bg_reason.png") left top/336px 280px; display: flex; text-align: center; position: relative; margin: 30px auto 0 auto; padding: 0 20px; width: 1020px; max-width: 100%; height: 102px;text-decoration: none;color:#333; }
.main-content a.sus__town-reason:hover { color:#333;text-decoration: none;}
.sus__town-reason p { position: relative; width: 22.549%; }
.sus__town-reason p img { position: absolute; top: 50%; left: 0px; width: 100%; transform: translateY(-46%); }
.sus__town-reason dl { flex: 1; align-self: center; display: flex; align-items: center; width: 100%; }
.sus__town-reason dl dt { flex: 1; font-size: 1.25em; font-weight: 700; line-height: 1.25; padding: 0 13px; }
.sus__town-reason dl dt strong { color: #D93924; font-weight: 700; }
.sus__town-reason dl dd { width: 34.2105%; }
.sus__town-reason dl dd a.m-link--B { width: 100%; }
@media only screen and (min-width:768px){
.sus__town-link a::before { transition: transform 1s cubic-bezier(.165,.84,.44,1); }
.sus__town-link a:hover::before { transform: scale(1.08) rotate(.1deg); }
}
@media only screen and (max-width:767px){
.sus__town-link { margin-left: 0; margin-right: 0; width: auto; max-width: none; }
.main-content .section.sus__town { margin-top: 50px; }
.sus__town-link { margin-left: -20px; margin-right: -20px; }
.sus__town-link a { padding-bottom: 87.5%; }
.sus__town-link a::before { background: url("/sustainable/shared/img/bg_town_sp.png") center center/cover no-repeat; }
.sus__town-link a img { position: absolute; top: 5%; left: calc(50% - 29.8%); width: 59.6875%; }
.main-content a.sus__town-reason { display: block; margin: 30px -20px 0 -20px; padding: 20px 30px 15px 30px; width: auto; max-width: none; height: auto; }
.sus__town-reason p { text-align: center; width: auto; }
.sus__town-reason p img { position: relative; top: auto; left: auto; width: 71.875vw; transform: translateY(0); }
.sus__town-reason dl { flex: initial; display: block; margin-top: 5px; width: auto; }
.sus__town-reason dl dt { flex: initial; font-size: 0.9411em; line-height: 1.5; padding: 0; }
.sus__town-reason dl dd { margin-top: 10px; width: auto; }
}

/* sus__pickup
******************************************************* */
.sus__pickup { overflow: hidden; }
.sus__pickup .sus__heading { color: #D93924; }
.sus__pickup .sus__heading::after { background: url("/sustainable/shared/img/line_red.png") left top/cover no-repeat; }
.sus__pickup-column { display: flex; flex-wrap: wrap; margin: 10px -2.9411% 0 0; }
.sus__pickup-cell { margin: 30px 2.8571% 0 0; width: 30.4761%; }
.sus__pickup-cell a { display: block; position: relative; overflow: hidden; }
.sus__pickup-cell:nth-of-type(1) a img:nth-of-type(2) { position: absolute; top: 0px; right: 0px; margin: 3.125% 9.375% 0 0; width: 39.0625%; }
.sus__pickup-cell:nth-of-type(2) a img:nth-of-type(2) { position: absolute; top: 10px; left: 0px; margin: 3.125% 0 0 6.25%; width: 48.75%; }
.sus__pickup-cell:nth-of-type(3) a img:nth-of-type(2) { position: absolute; top: 10px; right: 0px; margin: 3.125% 9.375% 0 0; width: 46.25%; }
@media only screen and (min-width:768px){
.sus__pickup-cell a img:nth-of-type(1) { transition: transform 1s cubic-bezier(.165,.84,.44,1); }
.sus__pickup-cell a:hover img:nth-of-type(1) { transform: scale(1.08) rotate(.1deg); }
}
@media only screen and (max-width:767px){
.sus__pickup-column { display: block; margin: 15px -20px 0 -20px; }
.sus__pickup-cell { margin: 0; width: auto; }
.sus__pickup-cell + .sus__pickup-cell { margin-top:20px;}
}

/* sus__attempt
******************************************************* */
.sus__attempt { overflow: hidden; }
.sus__attempt .sus__heading { color: #3C7DBE; }
.sus__attempt .sus__heading::after { background: url("/sustainable/shared/img/line_blue.png") left top/cover no-repeat; }
.sus__attempt-heading { font-size: 1.1111em; font-weight: 700; text-align: center; margin-top: 40px; }
.sus__attempt-column { display: flex; flex-wrap: wrap; margin-right: -2.9411%; }
.sus__attempt-cell { margin-right: 2.8571%; width: 30.4761%; }
.sus__attempt-cell:nth-of-type(n+4) { margin-top: 60px; }
.sus__attempt-cell.worldwide-cell figcaption{position: absolute;}
.sus__attempt-cell.worldwide-cell {position: relative;}
.sus__attempt-cell ul { margin-top: 40px; padding: 0 6.25%; }
.sus__attempt-cell ul li a { display: inline-block; line-height: 1.3; vertical-align: baseline; }
@media only screen and (max-width:767px){
.sus__attempt-heading { font-size: 1.1764em; line-height: 1.5; }
.sus__attempt-column { display: block; margin-right: 0; }
.sus__attempt-cell { margin-right: 0; margin-top: 60px; width: auto; }
.sus__attempt-cell:nth-of-type(n+2) { margin-top: 60px; }
.sus__attempt-cell p { margin: 0 -20px; }
.sus__attempt-cell ul { margin-top: 30px; padding: 0 10px; }
.sus__attempt-cell ul li + li{ margin-top: 5px;}
.sus__attempt-anchor { display: flex; flex-wrap: wrap; margin: 40px auto 0 auto;}
.sus__attempt-anchor li { width: 49.311%; }
.sus__attempt-anchor li:nth-of-type(odd) { margin-right: 1.377%; }
.sus__attempt-anchor li:nth-of-type(n+3) { margin-top: 10px; }
.sus__attempt a.sus__attempt-link { background: #0E9ACC url("/sustainable/img/bg_anchor.png") left top/cover no-repeat;background-size: 100% 100%;border-radius: 4px; color: #fff; display: flex; align-items: center;font-size: 0.8235em; font-weight: 700; line-height: 1.3076; text-decoration: none; position: relative; padding: 0 8px; height: 56px; }
.sus__attempt a.sus__attempt-link:hover { color: #fff; text-decoration: none; }
.sus__attempt a.sus__attempt-link .arw { width: 21px; height: 21px; border: 1px solid #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; right: 8px; bottom: 0; margin: auto; }
.sus__attempt a.sus__attempt-link .arw  .inner { position: relative; }
.sus__attempt a.sus__attempt-link .arw  .inner:after, .sus__attempt a.sus__attempt-link .arw .inner:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; }
.sus__attempt a.sus__attempt-link .arw  .inner:before { left: 0px; width: 1px; height: 12px; background-color: #fff; }
.sus__attempt a.sus__attempt-link .arw  .inner:after { bottom: -5px; left: -2px; width: 4px; height: 4px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(135deg); }
}

/* sus__link
******************************************************* */
.sus__link .sus__link-btn { display: flex; justify-content: center; }
.sus__link .sus__link-btn a.sus__link-report { background-color: #D93924; box-sizing: border-box; border: 1px solid #D93924; border-radius: 5px; color: #fff; display: flex; align-items: center; text-decoration: none; overflow: hidden; position: relative; padding: 0 40px 0 10px; width: 260px; height: 56px; }
.sus__link .sus__link-btn a.sus__link-report::before { background-color: #fff; border-radius: 3px; content: ""; position: absolute; top: 0px; left: 0px; width: 0%; height: 100%; }
.sus__link .sus__link-btn a.sus__link-report::after { background: url("/sustainable/img/img_btn_01.png") center top/cover no-repeat; content: ""; position: absolute; top: 0px; left: calc(50% - 23px); width: 46px; height: 46px; }
.sus__link .sus__link-btn a.sus__link-report > span:nth-of-type(1) { position: relative; z-index: +1; }
.sus__link .sus__link-btn a.sus__link-food { box-sizing: border-box; border: 1px solid #D93924; border-radius: 5px; color: #D93924; display: flex; align-items: center; text-decoration: none; overflow: hidden; position: relative; margin-left: 30px; padding: 0 40px 0 10px; width: 260px; height: 56px; }
.sus__link .sus__link-btn a.sus__link-food::before { background-color: #D93924; border-radius: 3px; content: ""; position: absolute; top: 0px; left: 0px; width: 0%; height: 100%; }
.sus__link .sus__link-btn a.sus__link-food::after { background: url("/sustainable/img/img_btn_02.png") center top/cover no-repeat; content: ""; position: absolute; top: calc(50% - 23px); left: calc(50% - 20px); width: 80px; height: 46px; }
.sus__link .sus__link-btn a.sus__link-food > span:nth-of-type(1) { position: relative; z-index: +1; }
@media only screen and (min-width:768px){
.sus__link .sus__link-btn a.sus__link-report { transition: color .3s ease-in-out; }
.sus__link .sus__link-btn a.sus__link-report:hover { color: #D93924; }
.sus__link .sus__link-btn a.sus__link-report::before { transition: width .3s ease-in-out; }
.sus__link .sus__link-btn a.sus__link-report:hover::before { width: 100%; }
.sus__link .sus__link-btn a.sus__link-food { transition: color .3s ease-in-out; }
.sus__link .sus__link-btn a.sus__link-food:hover { color: #fff; }
.sus__link .sus__link-btn a.sus__link-food::before { transition: width .3s ease-in-out; }
.sus__link .sus__link-btn a.sus__link-food:hover::before { width: 100%; }
}
@media only screen and (max-width:767px){
.sus__link .sus__link-btn { display: block; padding: 0 10px; }
.sus__link .sus__link-btn a.sus__link-report { width: 100%; }
.sus__link .sus__link-btn a.sus__link-food { margin: 10px 0 0 0; width: 100%; }
}

/* sus__document
******************************************************* */
.sus__document { background-color: #D7F1F8; margin-bottom: -80px; padding: 40px 0; }
.sus__document .container { max-width: 670px; }
.sus__document-supplement dt { font-weight: 700; }
.sus__document-supplement dd { margin-top: 5px; }
@media only screen and (max-width:767px){
.sus__document { margin-bottom: -50px; padding: 40px 10px; }
.sus__document .container { max-width: none; }
}



/*m-link--img
******************************************************* */
.sus__town-reason dl dd .m-link--img.m-link--B {width: 100%;}
.main-content .m-link--img.m-link--B {box-sizing: border-box;background-color: #D93924;border: 1px solid #D93924;border-radius: 5px;color: #fff;display: inline-flex;align-items: center;font-size: 0.7222em;font-weight: 700;line-height: 1.16666;text-align: left;text-decoration: none;vertical-align: top;position: relative;padding: 0 50px 0 10px;width: 260px;max-width: 100%;height: 39px;}
.main-content .m-link--img.m-link--B::before {background-color: #fff;border-radius: 3px;content: "";position: absolute;top: 0px;left: 0px;width: 0%;height: 100%;}
.main-content .m-link--img.m-link--B > span:nth-of-type(1) {display: block;position: relative;width: 100%;z-index: +1;}
@media only screen and (min-width: 768px){
.main-content .m-link--img.m-link--B {transition: color .3s ease-in-out;}
.main-content .m-link--img.m-link--B::before {transition: width .3s ease-in-out;}
.main-content .m-link--img.m-arw--B {transition: border .3s ease-in-out;}
.main-content .sus__town-reason:hover .m-link--img.m-link--B {color: #D93924;}
.main-content .sus__town-reason:hover .m-link--img.m-link--B::before {width: 100%;}
.main-content a .m-arw--B .inner:before {transition: background-color .3s ease-in-out, border .3s ease-in-out;}
}