@charset "UTF-8";

/*=============================================================
localMenu
=============================================================*/
.container[data-sidebar="true"] > .sidebar{z-index: 997;}
.container[data-sidebar="true"] {
  min-height: 2000px;
}
#localMenu a{
  display: block;
  position: relative;
  padding: 18px 42px 17px 22px;
  color: #3061ac;
  font-size: 1.4rem;
  line-height: 1.5;
  text-decoration: none;
}
#localMenu a {}
#localMenu a:hover {
  color: #666!important;
  text-decoration: underline;
}
#localMenu .a-pdf .txt{
  position: relative;
}
#localMenu .a-pdf .txt::after{
  content: "";
  top: -2px;
  margin: 0 0 0 10px;
  width: 16px;
  height: 15px;
  background-position: 0px -200px;
  display: inline-block;
  background-image: url(/jsr_e/common/img/cmn_sprite_ic01.png);
  background-repeat: no-repeat;
  vertical-align: middle;
}
#localMenu #mainArea > ul li{border-bottom: 1px solid #dee1e5;}
#localMenu #mainArea > ul li a.levelFirst:hover {background: #FFFDCE;color: #333;}
#localMenu #mainArea > ul li.open > a{color: #333;}
#localMenu #mainArea > ul li.open > a.levelFirst{}
#localMenu #mainArea > ul li.act{color: #333;background: #FEF303;}
#localMenu #mainArea > ul li.open{background-color: transparent;}
#localMenu #mainArea > ul li.open li.act{background: #FFFDCE;}
#localMenu #mainArea > ul li.act > a.levelFirst {}
#localMenu #mainArea > ul li a.levelFirst .mark {
  display: block;
  width: 22px;
  height: 22px;
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
}
#localMenu #mainArea > ul li a.levelFirst .markBox {
  display: block;
  width: 22px;
  height: 22px;
  position: relative;
}
#localMenu #mainArea > ul li a.levelFirst .markBox:before{
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  position: absolute;
  top: calc(0.7em - 4px);
  left: 6.5px;
  transform: rotate(45deg);
}
#localMenu #mainArea > ul li a.levelFirst .markBox:after{
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #3061AC;
}
#localMenu #mainArea > ul li.open a.levelFirst .markBox:before {
  transform: translate(-50%, -50%) rotate(-135deg);
  left: 10.5px;
  top: 12.5px;
}


#localMenu #mainArea > ul li ul {
  display: none;
  /*padding: 10px 0 30px 18px;*/
}
#localMenu #mainArea > ul li.open ul,
#localMenu #mainArea > ul li.act ul {
  display: block;
}
#localMenu #mainArea > ul li li a {
  display: block;
  padding: 10px 40px 10px 18px;
  font-size: 13px;
  color: #333;
  /*background: #FEF303;*/
}
#localMenu #mainArea > ul li.open li.act a{background: #FEF303;}
#localMenu #mainArea > ul li.open li:first-child{border-top: 1px solid #dee1e5;}
#localMenu #mainArea > ul li.open li:last-child{border-bottom: none;}
#localMenu #mainArea > ul li li .txt{
  display: block;
  padding-left: 20px;
  margin-right: 4px;
}
#localMenu #subArea ul {}
#localMenu #subArea ul li {
  padding: 18px 0 0;
}
#localMenu #subArea ul li a {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 93%;
}
#localMenu #subArea ul li a span.icn {
  width: 36px;
  height: 36px;
  border-radius: 100px;
  overflow: hidden;
  margin: 0 10px 0 0;
  background-color: #da3633;
}
#localMenu #subArea ul li a span.txt {
  flex: 1;
}
#localMenu #bnrArea ul {
  padding: 20px 0 0;
}
#localMenu #bnrArea ul li {
  padding: 10px 0 0;
}
#localMenu #bnrArea ul li a {
  display: block;
  opacity: 1;
}
#localMenu #bnrArea ul li a:hover {
  opacity: 0.7;
}

#localMenu .link-arw{
  background: url("/jsr_e/common/sustainability/images/sp_navi_arrow.png") no-repeat right;
  background-position: right 19px center;
}
#localMenu .link-arw:hover{
  background: #FFFDCE url("/jsr_e/common/sustainability/images/sp_navi_arrow.png") no-repeat right!important;
  background-position: right 19px center!important;
}

/*=============================================================
overOpc
=============================================================*/
/* overOpc
--------------------------------------------------------------*/
.overOpc{
  transition:opacity .3s;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
html:not(.touchDevice) .overOpc:hover,
html:not(.touchDevice) a:hover .overOpc{opacity:0.7;}

/* overImgMv
--------------------------------------------------------------*/
a.overImgMv,
a.overImgMv>.frame{
  display:block;
  overflow:hidden;
}
html:not(.touchDevice) a.overImgMv>img,
html:not(.touchDevice) a.overImgMv>.frame>img{transition:.5s;}
html:not(.touchDevice) a.overImgMv:hover>img,
html:not(.touchDevice) a.overImgMv:hover>.frame>img{
  opacity:0.7;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  -webkit-transform:scale(1.06);
  transform:scale(1.06);
  transition:.8s;
}
a.overImgMv>.frame+.link-arw{margin-top:10px;}

/* breadcrumbs */
.breadcrumbs > li,
.breadcrumbs > li a{color: #fff;}

/*=============================================================
contentsInner / minInner
=============================================================*/
.contentsInner{
  width: 1200px;
  margin: 0 auto;
}
.minInner{
  width: 980px;
  margin: 0 auto
}
/*=============================================================
heading
=============================================================*/
#sustainability .heading-lv1-v3 {background-image: url(/jsr_e/sustainability/images/pageTtl.jpg);}
#sustainability.management.sdgs .heading-lv1-v3 {background-image: url(/jsr_e/sustainability/images/pageImg.jpg);}
#sustainability.top .heading-lv1-v3{
  height: 275px;
  background-image: url(/jsr_e/sustainability/images/pageTtl.jpg);
}

/*=============================================================
heading
=============================================================*/
#sustainability .heading-title .block .title {
  position: relative;
  font-size: 2.4rem;
  line-height: 1.5;
  margin-bottom: .75em;
}

/*=============================================================
.column_block
=============================================================*/
.column_block .block{
  padding: 40px;
  background-color: #fff;
  box-shadow: 1px 1px 0px 0px rgb(222 225 229 / 90%);
}
.column_block .block .index_title{
  font-size: 2.4rem;
  line-height: 1.5;
  color: #3061ac;
}
.column_block .block .index_title+p{margin-top: 1.25em;}

/*=============================================================
text
=============================================================*/
.mT1em{margin-top: 1em;}
.frame-layout > section p,
.frame-layout > p{
  margin-bottom: 1em;
}
a.a-text:link,
a.a-text:visited{
  color: #284f8e !important;
}
a.a-text:hover{
  color: #000 !important;
}

p a.a-blank{
  position: relative;
}
p a.a-blank::after {
  position: relative;
  top: -2px;
  margin: 0 0 0 10px;
  width: 10px;
  height: 10px;
  background-position: 0px -160px;
  display: inline-block;
  background-image: url("/jsr_e/common/img/cmn_sprite_ic01.png");
  background-repeat: no-repeat;
  vertical-align: middle;
  content: "";
}

/*=============================================================
.list-order
=============================================================*/
.frame-layout > .list-order > li {
    padding-left: 2.4em;
}
.frame-layout > .list-order > li span{
    width: 2em;
    text-align: right;
}

/*=============================================================
.link-button
=============================================================*/
.link-button a.s_eirDLButton {
  background-color: #3061ac;
  color: #fff;
}
/*=============================================================
.table-layout
=============================================================*/
.table-layout caption{
    margin-bottom: 5px;
}
.table-layout table.table_inner caption div.text-title{
    text-align: left;
    font-weight: 700;
}
.table-layout table.table_inner caption.table_unit{
    text-align: right;
    font-size: 90%;
}


/*=============================================================
common parts
=============================================================*/
.text-atn{
  font-size:1.3rem;
  line-height:1.6;
  margin-top:20px;
}
.text-atn:not(ul):not(ol),
.text-atn li{
  text-indent:-1em;
  margin-left:1em;
}
.image-ttl{
    font-weight: 700;
    margin-bottom: 0.5em;
    text-align: left;
}
.image-caption{
    width: 100%;
  font-size: 14px;
  text-align: left;
  margin: 10px 0;
}


.col-2-1,
.col-1-2,
.col-3-1,
.col-1-3,
.col-4-1,
.col-1-4{
  display: flex;
  column-gap: 36px;
  flex-wrap: wrap;
}
.col-2-1>*{margin-top: 20px;}
.col-2-1>*:nth-child(odd){width: calc((100% - 72px) / 3 * 2 + 36px);}
.col-2-1>*:nth-child(even){width: calc((100% - 72px) / 3);}
.col-2-1>*:nth-child(-n+2){margin-top: 0;}

.col-1-2>*{margin-top: 20px;}
.col-1-2>*:nth-child(even){width: calc((100% - 72px) / 3 * 2 + 36px);}
.col-1-2>*:nth-child(odd){width: calc((100% - 72px) / 3);}
.col-1-2>*:nth-child(-n+2){margin-top: 0;}

.col-3-1>*{margin-top: 20px;}
.col-3-1>*:nth-child(odd){width: calc((100% - 108px) / 4 * 3 + 72px);}
.col-3-1>*:nth-child(even){width: calc((100% - 108px) / 4);}
.col-3-1>*:nth-child(-n+2){margin-top: 0;}

.col-1-3>*{margin-top: 20px;}
.col-1-3>*:nth-child(even){width: calc((100% - 108px) / 4 * 3 + 72px);}
.col-1-3>*:nth-child(odd){width: calc((100% - 108px) / 4);}
.col-1-3>*:nth-child(-n+2){margin-top: 0;}

.col-4-1>*{margin-top: 20px;}
.col-4-1>*:nth-child(odd){width: calc((100% - 144px) / 5 * 4 + 108px);}
.col-4-1>*:nth-child(even){width: calc((100% - 144px) / 5);}
.col-4-1>*:nth-child(-n+2){margin-top: 0;}

.col-1-4>*{margin-top: 20px;}
.col-1-4>*:nth-child(even){width: calc((100% - 144px) / 5 * 4 + 108px);}
.col-1-4>*:nth-child(odd){width: calc((100% - 144px) / 5);}
.col-1-4>*:nth-child(-n+2){margin-top: 0;}


.lineBox {
    background-color: #fff;
    border: 1px solid #d7d7d7;
    padding: 20px;
}
.lineBox h4{
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1em;
}

@media screen and (min-width: 768px) and (max-width: 1480px) {
  .container[data-sidebar="true"] {
    min-height: 100%;
  }
}

@media only screen and (max-width: 767px) {
/*=============================================================
container
=============================================================*/
  .container[data-sidebar="true"] {
    min-height: 100%;
  }
/*=============================================================
contentsInner
=============================================================*/
    .contentsInner,
    .minInner{
      width: 100%;
      padding: 0;
    }
/*=============================================================
common parts
=============================================================*/
    .col-2-1,
    .col-1-2,
    .col-3-1,
    .col-1-3,
    .col-4-1,
    .col-1-4{display: block;}

    .col-2-1>*:nth-child(odd),
    .col-2-1>*:nth-child(even),
    .col-1-2>*:nth-child(odd),
    .col-1-2>*:nth-child(even),
    .col-3-1>*:nth-child(odd),
    .col-3-1>*:nth-child(even),
    .col-1-3>*:nth-child(odd),
    .col-1-3>*:nth-child(even),
    .col-4-1>*:nth-child(odd),
    .col-4-1>*:nth-child(even),
    .col-1-4>*:nth-child(odd),
    .col-1-4>*:nth-child(even){width: 100%;}

    .col-2-1>*:nth-child(-n+2),
    .col-1-2>*:nth-child(-n+2),
    .col-3-1>*:nth-child(-n+2),
    .col-1-3>*:nth-child(-n+2),
    .col-4-1>*:nth-child(-n+2),
    .col-1-4>*:nth-child(-n+2){margin-top: 20px;}

  #sustainability .heading-lv1-v3 {background-position: 67% 50%;}
}