@charset "utf-8";



/* ----------------

  Sustainability

---------------- */



#main_box {

  background-color: rgb(230,230,230);

  background-image: url(../images/main_visual.jpg);

  background-repeat: no-repeat;

  background-size: contain;

  background-position: center top;

}







/* ----------------

  Index

---------------- */



.secondary_main_visual {

  position: relative;

  padding-top: 47px;

}

.secondary_main_visual > span {

  display: block;

  height: 1px;

}

.secondary_main_visual > .text {

  background-repeat: no-repeat;

  background-size: contain;

  opacity: 0;

}

._csstrans .secondary_main_visual > .text.text01 {

  transition: opacity .5s .3s cubic-bezier(0.52, 0.16, 0.86, 0.49);

}

._csstrans .secondary_main_visual > .text.text02 {

  transition: opacity .5s 1.2s cubic-bezier(0.52, 0.16, 0.86, 0.49);

}

.secondary_main_visual._start > .text {

  opacity: 1;

}

.secondary_main_visual > .text.text01 {

  margin-top: 26px;

  padding-top: 161px;

  background-image: url(../images/top_text01.svg);

}

.secondary_main_visual > .text.text02 {

  margin-top: 32px;

  margin-bottom: 24px;

  padding-top: 182px;

  background-image: url(../images/top_text02.svg);

}

.secondary_main_visual .link_box {

  display: flex;

  justify-content: space-between;

  align-items: center;

  width: 794px;

  margin-top: 6px;

  margin-right: auto;

  margin-left: auto;

}

.secondary_main_visual .link {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 322px;

  height: 48px;

  border-radius: 4px;

  background-color: rgb(114,113,113);

  color: rgb(255,255,255);

  font-size: 23px;

  opacity: 0;

}

.secondary_main_visual .link.link2 {

  width: 400px;

}

._csstrans .secondary_main_visual .link {

  transition: opacity .8s 1.5s cubic-bezier(0.52, 0.16, 0.86, 0.49),

    background-color .4s cubic-bezier(.165, .84, .44, 1);

}

.secondary_main_visual._start .link {

  opacity: 1;

}

.secondary_main_visual .link:hover {

  background-color: rgb(66,66,66);

}



@media screen and (max-width:1254px) {

  .secondary_main_visual {

    padding-top: calc(47 / 1254 * 100%);

  }

  .secondary_main_visual > .text.text01 {

    margin-top: calc(26 / 1254 * 100%);

    padding-top: calc(161 / 1254 * 100%);

  }

  .secondary_main_visual > .text.text02 {

    margin-top: calc(32 / 1254 * 100%);

    margin-bottom: calc(24 / 1254 * 100%);

    padding-top: calc(182 / 1254 * 100%);

  }

}

@media screen and (max-width:767px) {

  .secondary_main_visual {

    padding-top: calc(26 / 1254 * 100%);

  }

  .secondary_main_visual > .text.text01 {

    margin-top: 0;

    padding-top: calc((161 + 47) / 1254 * 100%);

  }

  .secondary_main_visual > .text.text02 {

    margin-top: 0;

    margin-bottom: calc(24 / 1254 * 100%);

    padding-top: calc((182 + 32) / 1254 * 100%);

  }

  .secondary_main_visual .link_box {

    width: 240px;

    flex-wrap: wrap;

  }

  .secondary_main_visual .link {

    width: 240px;

    height: 28px;

    font-size: 13px;

  }

  .secondary_main_visual .link.link2 {

    margin-top: 8px;

    width: 240px;

  }

}



/* ---- box01 ---- */

.box01 {

  padding-top: calc(60 /1550 * 100%);

}

.contents_navi_box {

  display: flex;

  flex-wrap: nowrap;

  justify-content: space-between;

  position: relative;

}

.contents_navi_box > ul {

  display: flex;

  flex-wrap: nowrap;

  align-items: baseline; /* for IE11 */

  align-items: start;

  justify-content: space-between;

  width: calc(590 / 1190 * 100%);

}

.contents_navi_box > ul > li {

  width: calc(290 / 590 * 100%);

  border-radius: 4px;

  border-top: 6px rgb(255,255,255) solid;

  border-right: 6px rgb(255,255,255) solid;

  border-left: 6px rgb(255,255,255) solid;

  background-color: rgb(255,255,255);

  position: relative;

  top: 200px;

  opacity: 0;

}

._csstrans .contents_navi_box > ul:nth-child(1) > li:nth-child(1) {

  transition: top .4s cubic-bezier(.165, .84, .44, 1),

          opacity .4s cubic-bezier(.165, .84, .44, 1);

}

._csstrans .contents_navi_box > ul:nth-child(1) > li:nth-child(2) {

  transition: top .4s .2s cubic-bezier(.165, .84, .44, 1),

          opacity .4s .2s cubic-bezier(.165, .84, .44, 1);

}

._csstrans .contents_navi_box > ul:nth-child(2) > li:nth-child(1) {

  transition: top .4s .4s cubic-bezier(.165, .84, .44, 1),

          opacity .4s .4s cubic-bezier(.165, .84, .44, 1);

}

._csstrans .contents_navi_box > ul:nth-child(2) > li:nth-child(2) {

  transition: top .4s .6s cubic-bezier(.165, .84, .44, 1),

          opacity .4s .6s cubic-bezier(.165, .84, .44, 1);

}

.contents_navi_box._start > ul > li {

  top: 0;

  opacity: 1;

}



.contents_navi_box > ul > li._open {

  position: static;

  padding-bottom: calc(6px + (35 / 590 * 100%));

}

.contents_navi_box > ul > li.health:hover {

  border-color: rgb(253,237,233);

  background-color: rgb(253,237,233);

}

.contents_navi_box > ul > li.innovation:hover {

  border-color: rgb(229,240,250);

  background-color: rgb(229,240,250);

}

.contents_navi_box > ul > li.society:hover {

  border-color: rgb(229,246,238);

  background-color: rgb(229,246,238);

}

.contents_navi_box > ul > li.people:hover {

  border-color: rgb(255,242,235);

  background-color: rgb(255,242,235);

}

.contents_navi_box > ul > li._open.health {

  border-color: rgb(238,110,78);

  background-color: rgb(253,237,233);

}

.contents_navi_box > ul > li._open.innovation {

  border-color: rgb(51,134,217);

  background-color: rgb(229,240,250);

}

.contents_navi_box > ul > li._open.society {

  border-color: rgb(51,183,122);

  background-color: rgb(229,246,238);

}

.contents_navi_box > ul > li._open.people {

  border-color: rgb(255,148,96);

  background-color: rgb(255,242,235);

}

.contents_navi_box > ul > li > .contents_navi {

  position: relative;

  padding-bottom: calc(166 / 290 * 100% + 60px);

  text-align: center;

  cursor: pointer;

}

.contents_navi_box > ul > li > .contents_navi::before {

  position: absolute;

  left: 50%;

  background-repeat: no-repeat;

  background-size: contain;

  background-position: center center;

  transform: translate3d(-50%, 0, 0);

  content: '';

}

.contents_navi_box > ul > li.health > .contents_navi::before {

  top: calc(82 / 226 * 100%);

  background-image: url(../images/icon_health.svg);

  width: calc(64 / 290 * 100%);

  height: calc(64 / 226 * 100%);

}

.contents_navi_box > ul > li.innovation > .contents_navi::before {

  top: calc(77 / 226 * 100%);

  background-image: url(../images/icon_innovation.svg);

  width: calc(52 / 290 * 100%);

  height: calc(63 / 226 * 100%);

}

.contents_navi_box > ul > li.society > .contents_navi::before {

  top: calc(78 / 226 * 100%);

  background-image: url(../images/icon_society.svg);

  width: calc(71 / 290 * 100%);

  height: calc(56 / 226 * 100%);

}

.contents_navi_box > ul > li.people > .contents_navi::before {

  top: calc(86 / 226 * 100%);

  background-image: url(../images/icon_people.svg);

  width: calc(68 / 290 * 100%);

  height: calc(50 / 226 * 100%);

}

.contents_navi_box > ul > li > .contents_navi::after {

  position: absolute;

  bottom: -17px;

  left: 50%;

  width: 34px;

  height: 34px;

  border-radius: 50%;

  background-color: rgb(114,113,113);

  background-image: url(../../common/images/arrow_bottom_w.svg);

  background-repeat: no-repeat;

  background-size: 18px 14px;

  background-position: center center;

  transform: translate3d(-50%, 0, 0);

  content: '';

}

.contents_navi_box > ul > li._open > .contents_navi::after {

  transform: translate3d(-50%, 0, 0) rotate(180deg);

}

.contents_navi_box > ul > li.health > .contents_navi::after {

  background-color: rgb(233,74,34);

}

.contents_navi_box > ul > li.innovation > .contents_navi::after {

  background-color: rgb(0,104,207);

}

.contents_navi_box > ul > li.society > .contents_navi::after {

  background-color: rgb(0,165,89);

}

.contents_navi_box > ul > li.people > .contents_navi::after {

  background-color: rgb(255,121,56);

}

.contents_navi_box > ul > li > .contents_navi > .title,

.contents_navi_box > ul > li > .contents_navi > .lede {

  display: block;

  position: absolute;

  left: 0;

  width: 100%;

  height: auto;

  line-height: 1;

}

.contents_navi_box > ul > li > .contents_navi > .mark {

  display: block;

  padding-top: 11px;

  padding-bottom: 3px;

  line-height: 1;

}

.contents_navi_box > ul > li > .contents_navi > .title {

  top: 0;

  padding-top: calc(45 / 290 * 100%);

  font-size: 22px;

}

.contents_navi_box > ul > li > .contents_navi > .lede {

  top: 0;

  margin-top: calc(200 / 290 * 100%);

  font-size: 13.4px;

  text-decoration: underline;

}

.contents_navi_box > ul > li.health > .contents_navi {

  color: rgb(233,74,34);

}

.contents_navi_box > ul > li.innovation > .contents_navi {

  color: rgb(0,104,207);

}

.contents_navi_box > ul > li.society > .contents_navi {

  color: rgb(0,165,89);

}

.contents_navi_box > ul > li.people > .contents_navi {

  color: rgb(255,121,56);

}



.contents_navi_box > ul > li > .navi_items {

  color: rgb(77,77,77);

}

.contents_navi_box > ul > li > .navi_items > p {

  text-align: center;

  font-size: 18.5px;

}

.contents_navi_box > ul > li > .navi_items {

  display: none;

}

.contents_navi_box > ul > li._open > .navi_items {

  display: block;

  position: absolute;

  top: 100%;

  left: 0;

  width: 100%;

  margin-top: -6px;

  border-radius: 0 4px 4px 4px;

  border: 6px rgb(255,255,255) solid;

  padding-top: calc(37 / 1190 * 100%);

  padding-right: calc(62 / 1190 * 100%);

  padding-bottom: calc(37 / 1190 * 100%);

  padding-left: calc(62 / 1190 * 100%);

  background-color: rgb(255,255,255);

}

.contents_navi_box > ul > li > .navi_items::after {

  display: block;

  position: absolute;

  top: -6px;

  left: 0;

  width: calc(((290 / 1190 * 100%) - 11px) / 1178 * 1190);

  height: 6px;

  content: '';

}

.contents_navi_box > ul > li.innovation > .navi_items::after {

  left: auto;

  right: calc(300 / 1178 * 100%);

}

.contents_navi_box > ul > li.society > .navi_items::after {

  left: calc(300 / 1178 * 100%);

}

.contents_navi_box > ul > li.people > .navi_items::after {

  left: auto;

  right: 0;

}

.contents_navi_box > ul > li.health > .navi_items {

  border-color: rgb(238,110,78);

  background-color: rgb(253,237,233);

}

.contents_navi_box > ul > li.health > .navi_items::after {

  background-color: rgb(253,237,233);

}

.contents_navi_box > ul > li.innovation > .navi_items {

  border-color: rgb(51,134,217);

  background-color: rgb(229,240,250);

}

.contents_navi_box > ul > li.innovation > .navi_items::after {

  background-color: rgb(229,240,250);

}

.contents_navi_box > ul > li.society > .navi_items {

  border-color: rgb(51,183,122);

  background-color: rgb(229,246,238);

}

.contents_navi_box > ul > li.society > .navi_items::after {

  background-color: rgb(229,246,238);

}

.contents_navi_box > ul > li.people > .navi_items {

  border-color: rgb(255,148,96);

  background-color: rgb(255,242,235);

}

.contents_navi_box > ul > li.people > .navi_items::after {

  background-color: rgb(255,242,235);

}

.contents_navi_box > ul > li > .navi_items > ul {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  margin-top: calc(36 / 1190 * 100%);

}

.contents_navi_box > ul > li > .navi_items > ul > li {

  display: flex;

  justify-content: center;

  align-items: center;

  width: calc(517 / 1054 * 100%);

  background-color: rgb(255,255,255);

  margin-bottom: calc(15 / 1054 * 100%);

}

.contents_navi_box > ul > li > .navi_items > ul > li > a {

  display: block;

  width: 100%;

  padding-top: calc(30 / 517 * 100%);

  padding-right: 8px;

  padding-bottom: calc(29 / 517 * 100%);

  padding-left: 8px;

  font-size: 20px;

  text-align: center;

  font-weight: 700;

}

._csstrans .contents_navi_box > ul > li > .navi_items > ul > li > a {

  transition: color .2s cubic-bezier(.165, .84, .44, 1);

}

.contents_navi_box > ul > li > .navi_items > ul > li > a:hover {

  color: rgb(195,39,44);

}

.contents_navi_box > ul > li > .navi_items > ul > li > a > span {

  display: inline-block;

  position: relative;

  padding-right: 30px;

}

.contents_navi_box > ul > li > .navi_items > ul > li > a > span::after {

  display: block;

  position: absolute;

  right: 0;

  top: calc(50% + 2px);

  width: 15.4px;

  height: 20px;

  background-image: url(../../common/images/arrow_right_lg.svg);

  background-repeat: no-repeat;

  background-size: contain;

  transform: translate3d(0, -50%, 0);

  content: '';

}

.contents_navi_box > ul > li > .navi_items > ul > li > a:hover > span::after {

  background-image: url(../../common/images/arrow_right_r.svg);

}

.contents_navi_box > ul > li > .navi_items  .btn_close_box {

  display: flex;

  align-items: center;

  justify-content: center;

}

.contents_navi_box > ul > li > .navi_items  .btn_close_box > span {

  display: block;

  position: relative;

  border-radius: 16px;

  font-size: 16px;

  line-height: 2;

  padding-right: 16px;

  padding-left: 32px;

  background-color: rgb(255,255,255);

  cursor: pointer;

}

.contents_navi_box > ul > li > .navi_items  .btn_close_box > span::before,

.contents_navi_box > ul > li > .navi_items  .btn_close_box > span::after {

  position: absolute;

  top: 50%;

  left: 8px;

  width: 16px;

  height: 1px;

  background-color: rgb(77,77,77);

  content: '';

}

.contents_navi_box > ul > li > .navi_items  .btn_close_box > span::before {

  transform: translate3d(0, -50%, 0) rotate(45deg);

}

.contents_navi_box > ul > li > .navi_items  .btn_close_box > span::after {

  transform: translate3d(0, -50%, 0) rotate(-45deg);

}





@media screen and (max-width:767px) {

  .contents_navi_box {

    flex-wrap: wrap;

  }

  .contents_navi_box > ul {

    width: 100%;

    position: relative;

  }

  .contents_navi_box > ul:nth-child(2) {

    margin-top: 24px;

  }

  .contents_navi_box > ul > li {

    border-width: 3px;

  }

  .contents_navi_box > ul > li > .contents_navi > .mark {

    padding-top: 4px;

  }

  .contents_navi_box > ul > li > .contents_navi > .title {

    font-size: 15px;

    font-weight: 700;

  }

  .contents_navi_box > ul > li > .contents_navi::after {

    bottom: -12px;

    width: 24px;

    height: 24px;

    background-size: 12px 9.33px;

  }

  .contents_navi_box > ul > li.health > .contents_navi::before {

    top: calc(74 / 226 * 100%);

  }

  .contents_navi_box > ul > li.innovation > .contents_navi::before {

    top: calc(69 / 226 * 100%);

  }

  .contents_navi_box > ul > li.society > .contents_navi::before {

    top: calc(70 / 226 * 100%);

  }

  .contents_navi_box > ul > li.people > .contents_navi::before {

    top: calc(78 / 226 * 100%);

  }

  .contents_navi_box > ul > li._open > .navi_items {

    border-width: 3px;

  }

  .contents_navi_box > ul > li > .navi_items > p {

    text-align: left;

    font-size: 14px;

  }

  .contents_navi_box > ul > li > .navi_items > ul > li {

    width: 100%;

  }

  .contents_navi_box > ul > li > .navi_items > ul > li > a {

    padding-top: 8px;

    padding-bottom: 8px;

    font-size: 16px;

    text-align: left;

    line-height: 1.2;

  }

  .contents_navi_box > ul > li > .navi_items > ul > li > a > span::after {

    top: 50%;

    height: 16px;

  }

  .contents_navi_box > ul > li > .navi_items::after {

    width: calc(((290 / 590 * 100%) - 5px) / 584 * 590);

  }

  .contents_navi_box > ul > li.innovation > .navi_items::after {

    left: 0;

    right: auto;

  }

  .contents_navi_box > ul > li.society > .navi_items::after {

    left: auto;

    right: 0;

  }



}







/* ---- box02 ---- */

.box02 {

  padding-bottom: calc(61 / 1550 * 100%);

}

.box02 .pick_up_box {

  padding-top: calc(105 /1550 * 100%);

}



.pick_up_items {

  width: 100%;

  margin-top: 21px;

  padding-bottom: 46px;

}

.pick_up_items > ul > li {

  padding-right: 5px;

  padding-left: 5px;

  box-sizing: border-box;

}

.pick_up_items > ul > li > a {

  display: block;

  position: relative;

  width: 100%;

  padding-top: calc(267 / 389 * 100%);

  background-color: rgb(180,180,180);

  background-position: center top;

  background-repeat: no-repeat;

  background-size: cover;

}

.pick_up_items > ul > li > a > span {

  display: flex;

  align-items: center;

  justify-content: center;

  position: absolute;

  bottom: 0;

  width: 100%;

  height: 50px;

  background-color: rgba(0,0,0,.5);

  text-align: center;

  color: rgb(255,255,255);

  font-size: 20px;

  line-height: 1.2;

}

.pick_up_items > ul > li.pickup01 > a { background-image: url(../images/pickup_01.jpg?ud=240605);}

.pick_up_items > ul > li.pickup02 > a { background-image: url(../images/pickup_02.jpg);}

.pick_up_items > ul > li.pickup03 > a { background-image: url(../images/pickup_03b.jpg);}

.pick_up_items > ul > li.pickup04 > a { background-image: url(../images/pickup_04.jpg);}

.pick_up_items > ul > li.pickup05 > a { background-image: url(../images/pickup_05.jpg);}

.pick_up_items > ul > li.pickup06 > a { background-image: url(../images/pickup_06.png);}

.pick_up_items > ul > li.pickup07 > a { background-image: url(../images/pickup_07.jpg);}

.pick_up_items > ul > li.pickup08 > a { background-image: url(../images/pickup_08.png);}

.pick_up_items > ul > li.pickup09 > a { background-image: url(../images/pickup_09.jpg);}

.pick_up_items > ul > li.pickup10 > a { background-image: url(../images/pickup_10.jpg);}



.swiper-button-next, .swiper-button-prev {

  margin-top: calc(-1 * var(--swiper-navigation-size)/ 2 - 23px);

}

@media screen and (max-width:1550px) {

  html[lang="en"] .pick_up_items > ul > li > a > span._text_s {

    font-size: calc(1.5789vw - 4.4737px); /* 20 -> 10 */

  }

  html[lang="en"] .pick_up_items > ul > li > a > span._text_m {

    font-size: calc(1.023vw + 4.1432px); /* 20 -> 12 */

  }

}

@media screen and (max-width:980px) {

  html[lang="en"] .pick_up_items > ul > li > a > span._text_s {

    font-size: 11px; /* 20 -> 10 */

  }

}

@media screen and (max-width:1254px) {

  .pick_up_items > ul > li > a > span {

    height: calc(2.4691vw + 19.037px); /* 50 -> 38 */

    font-size: calc(1.2346vw + 4.5185px); /* 20 -> 14 */

  }

}

@media screen and (max-width:767px) {

  html[lang="en"] .pick_up_items > ul > li > a > span._text_s {

    font-size: 10px;

    line-height: 1;

  }

}

.swiper-button-prev::after,

.swiper-button-next::after {

  display: block;

  width: 22.5px;

  height: 29px;

  background-image: url(../../common/images/arrow_right_w.svg);

  background-size: contain;

  content: '';

}

.swiper-button-prev::after {

  transform: rotate(180deg);

}



.maturi_box {

  margin-top: calc(114/ 1190 * 100%);

  display: block;

}

.maturi_box .main {

  position: relative;

  padding-top: calc(137 / 1190 * 100%);

}

.maturi_box .image {

  position: absolute;

  top: 0;

  left: 0;

  display: block;

  width: 100%;

  height: 100%;

  overflow: hidden;

}

.maturi_box .image > span {

  display: block;

  width: 100%;

  height: 100%;

  background-repeat: no-repeat;

  background-position: center;

  background-size: cover;

  background-image: url(../images/banner_matsuri.jpg);

}

.maturi_box .main_info {

  position: absolute;

  left: 50%;

  top: 50%;

  width: calc(336 / 1190 * 100%);

  min-width: 270px;

  padding: calc(20 / 1190 * 100%) 0;

  background-color: rgb(255,255,255);

  text-align: center;

  font-size: 18.5px;

  transform: translate3d(-50%, -50% ,0);

}

.maturi_box .main_info .title {

  font-weight: 700;

}



.box02 .pickup_text_navibox {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}

.box02 .pickup_text_navibox > li {

  display: block;

  width: calc(50% - 13px);

  margin-bottom: 26px;

}

.box02 .pickup_text_navibox > li > a {

  position: relative;

  display: flex;

  height: 100%;

  padding-top: 12px;

  padding-right: 80px;

  padding-bottom: 12px;

  padding-left: 80px;

  border: 1px rgb(158, 164, 164) solid;

  border-radius: 4px;

  background-color: rgb(213,233,227);

}

.box02 .pickup_text_navibox > li.pt_navi05 > a,

.box02 .pickup_text_navibox > li.pt_navi06 > a {

  background-color: rgb(213,218,233);

}

.box02 .pickup_text_navibox > li > a:hover {

  text-decoration: underline;

}

.box02 .pickup_text_navibox > li > a::before {

  position: absolute;

  left: 9px;

  top: 0;

  width: 72px;

  height: 100%;

  background-position: center center;

  background-repeat: no-repeat;

  content: '';

}

.box02 .pickup_text_navibox > li.pt_navi01 > a::before {

  background-image: url(../images/navi_icon_01.png);

}

.box02 .pickup_text_navibox > li.pt_navi02 > a::before {

  background-image: url(../images/navi_icon_02.png);

}

.box02 .pickup_text_navibox > li.pt_navi03 > a::before {

  background-image: url(../images/navi_icon_03.png);

}

.box02 .pickup_text_navibox > li.pt_navi04 > a::before {

  background-image: url(../images/navi_icon_04.png);

}

.box02 .pickup_text_navibox > li.pt_navi05 > a::before {

  top: 50%;

  transform: translate3d(0,-50%,0);

  height: 50px;

  background-size: contain;

  background-image: url(/ir/images/top/icon_03.svg);

}

.box02 .pickup_text_navibox > li.pt_navi06 > a::before {

  top: 50%;

  transform: translate3d(0,-50%,0);

  height: 50px;

  background-size: contain;

  background-image: url(../images/navi_icon_06.svg);

}

.box02 .pickup_text_navibox > li > a::after {

  display: block;

  position: absolute;

  top: 50%;

  right: 40px;

  width: 16px;

  height: 20px;

  background-image: url(../../common/images/arrow_right_g.svg);

  background-repeat: no-repeat;

  background-size: contain;

  transform: translate3d(0, -50%, 0);

  content: '';

}

.box02 .pickup_text_navibox > li > a > span {

  display: flex;

  justify-content: center;

  align-items: center;

  min-height: 56px;

}

.box02 .pickup_text_navibox > li > a > span > span {

  display: block;

  font-size: 19px;

  font-weight: 700;

  color: rgb(77,77,77);

  line-height: 1.4;

}

  



@media screen and (max-width:767px) {

  .box02 {

    padding-bottom: 48px;

  }

  .box02 .pick_up_box {

    padding-top: 54px;

  }

  .maturi_box .main {

    padding-top: calc(130 / 355 * 100%);

  }

  .maturi_box .image > span {

    background-position: left top;

  }

  

  .box02 .pickup_text_navibox > li {

    width: 100%;

    margin-bottom: 16px;

  }

  .box02 .pickup_text_navibox > li > a {

    padding-right: 40px;

    padding-left: 48px;

  }

  .box02 .pickup_text_navibox > li > a::before {

    left: 6px;

    width: 36px;

  }

  .box02 .pickup_text_navibox > li.pt_navi01 > a::before {

    background-size: 21px 26px;

  }

  .box02 .pickup_text_navibox > li.pt_navi02 > a::before {

    background-size: 27.5px 18.5px;

  }

  .box02 .pickup_text_navibox > li.pt_navi03 > a::before {

    background-size: 28px 23.5px;

  }

  .box02 .pickup_text_navibox > li.pt_navi04 > a::before {

    background-size: 19.5px 27.5px;

  }

  .box02 .pickup_text_navibox > li.pt_navi05 > a::before {

    background-size: 27.5px 27.5px;

  }

  .box02 .pickup_text_navibox > li.pt_navi06 > a::before {

    background-size: 27.5px 27.5px;

  }

  .box02 .pickup_text_navibox > li > a::after {

    right: 12px;

    width: 16px;

    height: 15px;

  }

  .box02 .pickup_text_navibox > li > a > span {

    min-height: 26px;

  }

  .box02 .pickup_text_navibox > li > a > span > span {

    font-size: 14px;

  }

}





/* ---- box03 ---- */

.box03 {

  background-color: rgb(255,255,255);

  padding-top: calc(61 / 1550 * 100%);

  padding-bottom: calc(89 / 1550 * 100%);

}



.priority_issues_box {

}

.priority_issues_box .lede {

  margin-top: calc(14 / 1190 * 100%);

  font-size: 20px;

  line-height: 35px;

  color: rgb(114,113,113);

  text-align: center;

}



.priority_issues .ttls01 > span {

  display: block;

}

.priority_issues .ttls01 > .subtext {

  position: absolute;

  top: 6px;

  font-weight: 700;

  font-size: 20px;

}

html[lang="en"] .priority_issues .ttls01 > .subtext {

  position: relative;

  display: inline;

  padding-left: 1em;

  font-size: 18px;

  left: 0 !important;

  top: 0 !important;

}

.priority_issues.health .ttls01 > .subtext {

  color: rgb(233,74,34);

  left: 144px;

}

.priority_issues.society .ttls01 > .subtext {

  color: rgb(0,165,89);

  left: 144px;

}

.priority_issues.innovation .ttls01 > .subtext {

  color: rgb(0,104,207);

  left: 280px;

}

.priority_issues.people .ttls01 > .subtext {

  color: rgb(255,121,56);

  left: 114px;

}



@media screen and (max-width:767px) {

  .priority_issues .ttls01 > .subtext {

    font-size: 14px;

  }

  html[lang="en"] .priority_issues .ttls01 {

    line-height: .8;

  }

  html[lang="en"] .priority_issues .ttls01 > .subtext {

    font-size: 12px;

  }

  .priority_issues.health .ttls01 > .subtext {

    left: 108px;

  }

  .priority_issues.society .ttls01 > .subtext {

    left: 108px;

  }

  .priority_issues.innovation .ttls01 > .subtext {

    left: 50px;

    top: 18px;

  }

  .priority_issues.innovation .ttls01::after {

    bottom: 34px;

  }

  .priority_issues.people .ttls01 > .subtext {

    left: 82px;

  }

}





.priority_issues {

  margin-top: calc(66 / 1190 * 100%);

}

.priority_issues:first-child {

  margin-top: calc(36 / 1190 * 100%);

}



.priority_issues > ul {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}

.priority_issues > ul > li {

  position: relative;

  width: calc((1190 - 6) / 2 / 1190 * 100%);

  margin-bottom: 6px;

  padding-top: calc(206 / 1190 * 100%);

  background-repeat: no-repeat;

  background-position: center top;

  background-size: cover;

}

.priority_issues .pi_h_1 { background-image: url(../images/img01_01.jpg);}

.priority_issues .pi_h_2 { background-image: url(../images/img01_02.jpg?ud=230517);}

.priority_issues .pi_h_3 { background-image: url(../images/img01_03.jpg);}

.priority_issues .pi_h_4 { background-image: url(../images/img01_04.jpg);}

.priority_issues .pi_i_4 { background-image: url(../images/img02_04.jpg?ud=230308);}

.priority_issues .pi_i_2 { background-image: url(../images/img02_02.jpg);}

.priority_issues .pi_i_3 { background-image: url(../images/img02_03.jpg);}

.priority_issues .pi_i_1 { background-image: url(../images/img02_01.jpg);}

.priority_issues .pi_s_1 { background-image: url(../images/img03_01.jpg);}

.priority_issues .pi_s_2 { background-image: url(../images/img03_02.jpg);}

.priority_issues .pi_s_3 { background-image: url(../images/img03_03.jpg);}

.priority_issues .pi_s_4 { background-image: url(../images/img03_04.jpg);}

.priority_issues .pi_s_5 { background-image: url(../images/img03_05.jpg);}

.priority_issues .pi_s_6 { background-image: url(../images/img03_06.jpg);}

.priority_issues .pi_p_1 { background-image: url(../images/img04_01.jpg);}

.priority_issues .pi_p_2 { background-image: url(../images/img04_02.jpg);}

.priority_issues .pi_p_3 { background-image: url(../images/img04_03.jpg);}

.priority_issues .pi_p_4 { background-image: url(../images/img04_04.jpg?ud=240418);}

.priority_issues .pi_p_5 { background-image: url(../images/img04_05.jpg);}



.priority_issues > ul > li.col1 {

  width: 100%;

}

.priority_issues > ul > li.col3 {

  width: calc((1190 - 12) / 3 / 1190 * 100%);

}

.priority_issues > ul > li > .item {

  display: block;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0,12,24,0.33);

}

.priority_issues > ul > li.pi_h_3 > .item,

.priority_issues > ul > li.pi_h_4 > .item {

  background-color: rgba(0,12,24,0.38);

}

.priority_issues > ul > li.pi_i_1 > .item,

.priority_issues > ul > li.pi_i_2 > .item,

.priority_issues > ul > li.pi_p_2 > .item,

.priority_issues > ul > li.pi_p_3 > .item {

  background-color: rgba(0,12,24,0.23);

}



._csstrans .priority_issues > ul > li > a.item {

  transition: background-color .6s cubic-bezier(.165, .84, .44, 1);

}

.priority_issues > ul > li > a.item:hover {

  background-color: rgba(0,12,24,0.66) !important;

}

.priority_issues > ul > li > .item > span {

  display: block;

  position: absolute;

  bottom: 0;

  right: 0;

  padding-top: 19px;

  padding-right: 48px;

  padding-bottom: 19px;

  padding-left: 19px;

  line-height: 1.2;

  font-size: 20px;

  color: rgb(255,255,255);

  text-align: right;

}



.priority_issues > ul > li > .item > span::after {

  display: block;

  position: absolute;

  top: 50%;

  right: 20px;

  width: 15.4px;

  height: 20px;

  background-image: url(../../common/images/arrow_right_w.svg);

  background-repeat: no-repeat;

  background-size: contain;

  transform: translate3d(0, -50%, 0);

  content: '';

}

.priority_issues > ul > li._blank > .item {

  background-color: rgba(0,12,24,0.77);

}

.priority_issues > ul > li._blank > .item::before {

  position: absolute;

  font-size: 125%;

  color: rgb(255,255,255);

  top: 50%;

  left: 50%;

  transform: translate3d(-50%,-50%,0);

  content: 'Coming Soon';

}

.priority_issues > ul > li._blank > .item > span {

  padding-right: 20px;

  color: rgb(181,181,181);

}

.priority_issues > ul > li._blank > .item > span::after {

  display: none;

}



@media screen and (max-width:767px) {

  .box03 {

    padding-top: 48px;

    padding-bottom: 64px;

  }

  .priority_issues_box .lede {

    margin-top: 14px;

    font-size: 16px;

    line-height: 28px;

    text-align: left;

  }

  .priority_issues {

    margin-top: 36px;

  }

  .priority_issues > ul > li {

    width: 100%;

    padding-top: calc(206 / 592 * 100%);

  }

  .priority_issues > ul > li._blank {

    display: none;

  }

  .priority_issues > ul > li.col3 {

    width: 100%;

  }

  .priority_issues > ul > li > .item > span {

    padding-top: 10px;

    padding-right: 32px;

    padding-bottom: 10px;

    font-size: 13px;

  }

  .priority_issues > ul > li > .item > span::after {

    right: 8px;

    height: 13px;

  }

}





/* ---- box04 ---- */

.box04 {

  background-color: rgb(230,230,230);

  padding-top: calc(80 /1550 * 100%);

  padding-bottom: calc(80 /1550 * 100%);

}

.box04 .ttl_m {

  color: rgb(89,87,87);

}



.news_box.date_list_box .date_list_box_i {

  padding-top: calc(32 / 1254 * 100%);

}



.box04 .group_link {

  margin-top: calc(60 / 1550 * 100%);

}

.box04 .group_link > ul {

  display: flex;

  flex-direction: row;

  justify-content: flex-start;

  margin-top: 15px;

}

.box04 .group_link > ul > li {

  position: relative;

  width: 231px;

  margin-right: 9px;

  padding-top: calc(160 / 1190 * 100%);

}

.box04 .group_link > ul > li > a {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgb(255,255,255);

}

.box04 .group_link > ul > li > a::before {

  position: absolute;

  left: 50%;

  background-repeat: no-repeat;

  background-size: contain;

  transform: translate3d(-50%, 0, 0);

  content: '';

}

.box04 .group_link > ul > li > a.dydo::before {

  top: calc(56 / 160 * 100%);

  width: 98px;

  height: 37px;

  background-image: url(../../common/images/logo_dydo.svg);

}

.box04 .group_link > ul > li > a.tarami::before {

  top: calc(43 / 160 * 100%);

  width: 105px;

  height: 53px;

  background-image: url(../../common/images/logo_tarami.svg);

}

.box04 .group_link > ul > li > a > span {

  position: absolute;

  top: calc(123 / 160 * 100%);

  width: 100%;

  text-align: center;

  font-size: 13.8px;

  text-decoration: underline;

  line-height: 1;

}



@media screen and (max-width:767px) {

  .box04 {

    padding-top: 44px;

    padding-bottom: 72px;

  }

  .box04 .group_link {

    margin-top: 56px;

  }

  .box04 .group_link > ul > li {

    padding-top: 110px;

  }

  .box04 .group_link > ul > li > a.dydo::before {

    top: calc(30 / 110 * 100%);

  }

  .box04 .group_link > ul > li > a.tarami::before {

    top: calc(13 / 110 * 100%);

  }

  .box04 .group_link > ul > li > a > span {

    font-size: 12px;

  }

}









.box03-2 {

  padding-top: 15px;

  padding-bottom: 90px;

  background-color: rgb(255,255,255);

}

.box03-2 .esg_ranking_box {

  border-top: 1px rgb(205,205,205) dotted;

  border-bottom: 1px rgb(205,205,205) dotted;

  padding-top: 32px;

  padding-bottom: 28px;

}





@media screen and (max-width:767px) {

.box03-2 {

  padding-top: 8px;

  padding-bottom: 40px;

}

.box03-2 .esg_ranking_box {

  border-top: 1px rgb(205,205,205) dotted;

  border-bottom: 1px rgb(205,205,205) dotted;

  padding-top: 16px;

  padding-bottom: 14px;

}

}