@charset "utf-8";

/* device-width: 599px ～  for PC */
@media only screen and (min-width: 600px) {
  /* ============================================
        display none
  ============================================ */
  #contentsArea .pcHide,
  #contentsArea .tableScroll .scrollBtnOuter {
    display: none !important;
  }
}

/* device-width: 320px ～ 599px  for Smartphone */
@media only screen and (max-width: 599px) {

  /* ============================================
        display none
  ============================================
   {
    display: none;
  }*/


  /* ============================================
        width
  ============================================ */
  #contentsArea.column article .size1of2 .textBox,
  #contentsArea .verRow01 li {
    width: auto;
  }

  #contentsArea article .unitImages {
    display: block;
  }
  #contentsArea article .unitImages .size379 {
    width: 66%;
  }
  #contentsArea article .unitImages .size195 {
    display: inline-block;
    width: 34%;
  }


  /* ============================================
        float
  ============================================ */
  #contentsArea article .line.paperkraft .clearfix .unit {
    float: none;
  }


  /* ============================================
        movieArea
  ============================================ */
  #contentsArea .movieArea {
      position: relative;
      padding-bottom: 56.25%;
      padding-top: 25px;
      height: 0;
  }
  #contentsArea .movieArea div,
  #contentsArea .movieArea iframe,
  #contentsArea .movieArea object,
  #contentsArea .movieArea embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100% !important;
      height: 100% !important;
  }


  /* ============================================
        word break
  ============================================ */
  .breakWord {
    word-break: break-all;
  }


  /* ============================================
        paperkraft
  ============================================ */
  #contentsArea article .line.paperkraft .clearfix .unit {
    margin: 0;
  }


  /* ==========================================
    tableScroll
  ========================================== */
  #contentsArea .tableScroll,
  #contentsArea .tableScroll02{
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;
    position: relative;
    /*
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
    */
    padding-right: 1px;

  }

  #contentsArea .tableScroll02{
  }

  #contentsArea .tableScroll::-webkit-scrollbar,
  #contentsArea .tableScroll02::-webkit-scrollbar{
    width: 10px;
    background: #eee;
    border-radius: 8px;
  }
  #contentsArea .tableScroll::-webkit-scrollbar:horizontal,
  #contentsArea .tableScroll02::-webkit-scrollbar:horizontal{
    height: 10px;
    background: #eee;
    border-radius: 8px;
  }
  #contentsArea .tableScroll::-webkit-scrollbar-thumb,
  #contentsArea .tableScroll02::-webkit-scrollbar-thumb{
    background: #bbb;
    border-radius: 5px;
  }
  #contentsArea .tableScroll::-webkit-scrollbar-thumb:horizontal,
  #contentsArea .tableScroll02::-webkit-scrollbar-thumb:horizontal{
    background: #bbb;
    border-radius: 5px;
  }

  #contentsArea .tableScroll table{
    min-width: 250%;
      display: inline-table;
  }

  #contentsArea .tableScroll .scrollBtnOuter,
  #contentsArea .tableScroll02 .scrollBtnOuter{
      position: absolute;
      display: block;
      box-sizing: border-box;
      right: 0;
      top: 0;
  }

  #contentsArea .tableScroll .scrollBtnOuter .scrollBtn,
  #contentsArea .tableScroll02 .scrollBtnOuter .scrollBtn{
      display: inline-block;
    -webkit-animation: btnScrollAn 1.0s ease-out infinite alternate;
      animation: btnScrollAn 1.0s ease-in-out infinite alternate;
      margin-top: 8px;
      padding: 0 8px;
  }

  #contentsArea .tableScroll .scrollBtn span,
  #contentsArea .tableScroll02 .scrollBtn span{
    display: inline-block;
    height: 100%;
    /*padding: 2px 6px 0px 10px;*/
    border-radius: 3px;
    background-color: #0265cc;
    color: #fff;
    line-height: 1.9;
    vertical-align: middle;
    padding: 4px 8px 4px 8px;
  }

  #contentsArea .tableScroll .scrollBtn span:before,
  #contentsArea .tableScroll02 .scrollBtn span:before{
    display: inline-block;
    margin-top: 6px;
    padding-right: 6px;
    border-left: solid #fff 4px;
    border-top: solid transparent 3px;
    border-bottom: solid transparent 3px;
    content: "";
    vertical-align: top;
  }
  #contentsArea .tableScroll .scrollBtn:hover,
  #contentsArea .tableScroll02 .scrollBtn:hover{
    filter: alpha(opacity=80);
    opacity: 0.8;
  }

  #contentsArea .tableScroll02{
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
  }

  #contentsArea .tableScroll02 .sctWrapper{
    min-width: 250%;
  }

  #contentsArea .tableScroll02 table{
    min-width: 100%;
      display: inline-table;
  }
  #contentsArea .tableScroll02 .thData,
  #contentsArea .tableScroll02 .tdData{
    width: 100%;
  }
  #contentsArea .tableScroll02 .tdData{
    overflow-y: scroll;
    max-height: 400px;
  }
  #contentsArea .tableScroll02 .thData table,
  #contentsArea .tableScroll02 .tdData table{
      border-spacing: 0px 0px !important;
      border-collapse: collapse !important;
      table-layout: fixed !important;
    width: 100%;
  }
  #contentsArea .tableScroll02 .tdData table{
    margin-top: -0.05em;
  }
}


/* ============================================
      component
============================================ */
/* notation */
#contentsArea article dl.notation dd {
/* margin-left: 2.5em; */
  margin-left: 2.5em;
  padding: 0.2em 15px 0.2em 0;
}
#contentsArea article dl.notation.notation-wide dt {
  width: 80px;
}
#contentsArea article dl.notation.notation-wide dd {
  margin-left: 90px;
}

/* link panel */
#contentsArea article .link-panel {
  display: block;
  margin-top: 20px;
  border: 1px solid #bebebe;
  text-decoration: none;
}
#contentsArea article .link-panel:hover {
  border: 1px solid #06c;
}
#contentsArea article .link-panel .link-panel-img,
#contentsArea article .unit .link-panel .link-panel-img {
  max-width: 100%;
  margin: 0;
}
#contentsArea article .link-panel .link-panel-title,
#contentsArea.column #sideEnclosingArea article .size1of2 .link-panel .link-panel-title {
  padding: 20px 15px 20px 29px;
  margin: 0;
  font-size: 16px;
  font-weight: normal;
  color: #4b4b4b;
  background-color: transparent;
  background-image: url(/about/csr/img/link_arrow_001.gif);
  background-repeat: no-repeat;
  background-position: 15px center;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}


/* link title */
#contentsArea article .link-title,
#contentsArea.column #sideEnclosingArea article .link-title,
#contentsArea.column #sideEnclosingArea article .size1of3 .link-title {
  padding: 0;
  margin: 30px 0 0;
  font-size: 21px;
  font-weight: bold;
  border: 0;
  background: none;
  box-shadow: none;
}
#contentsArea article .link-title a {
  padding-left: 29px;
  color: #4b4b4b;
  background-image: url(/about/csr/img/link_arrow_002.gif);
  background-repeat: no-repeat;
  background-position: 10px center;
  text-decoration: none;
}
#contentsArea article .link-title a:hover {
  text-decoration: underline;
}


/* link button */
#contentsArea article .link-btn {
  display: inline-block;
  width: 100%;
  margin-top: 30px;
  padding: 15px 10px 15px 24px;
  font-size: 16px;
  color: #4b4b4b;
  background-image: url(/about/csr/img/link_arrow_001.gif);
  background-repeat: no-repeat;
  background-position: 10px center;
  background-color: #fbfbfb;
  text-decoration: none;
  border: 1px solid #bebebe;
  box-sizing: border-box;
}
#contentsArea article .link-title .link-btn {
  margin-top: 0;
}
#contentsArea article .link-btn:hover {
  border: 1px solid #0066cc;
}

@media only screen and (max-width: 599px) {
  #contentsArea article .link-btn:hover {
    border: 1px solid #bebebe;
  }
}

/* line Separator */
#contentsArea article .lineTopSeparator {
  margin-top: 50px;
  border-top: 4px solid #e8e8e8;
}

/* line title */
#contentsArea article .line-title,
#contentsArea.column #sideEnclosingArea article .line-title {
  margin-top: 50px;
  padding: 10px 20px;
  font-size: 21px;
  color: #fff;
  border: 0;
  border-radius: 0;
  background: none;
  background-color: #1975d1;
  box-shadow: none;
}

/* mainvisual */
#contentsArea article .mainvisual .slider a img {
  opacity: 1;
}
#contentsArea article .mainvisual .slider a:hover img {
  opacity: .5;
}

/* index link list */
#contentsArea article .index-linklist {
  margin-right: -20px;
  overflow: hidden;
}
#contentsArea article .index-linklist .index-linklist-item {
  display: block;
  float: left;
  width: 244px;
  padding: 0;
  margin: 30px 20px 0 0;
  border-bottom: 0;
}

@media only screen and (max-width: 599px) {
  #contentsArea article .index-linklist {
    padding: 0 20px;
    margin: 30px auto 0;
  }
  #contentsArea article .index-linklist .index-linklist-item {
    float: none;
    width: 100%;
    margin: 0;
  }
}

/* index link button */
#contentsArea article .link-btn.link-btn-environment {
  padding-left: 34px;
  background-image: url(/about/csr/img/icon_hexa_001.gif);
  background-repeat: no-repeat;
  background-position: 10px center;
}
#contentsArea article .link-btn.link-btn-environment:hover {
  border: 1px solid #00a73b;
}
#contentsArea article .link-btn.link-btn-socialinnovation {
  padding-left: 34px;
  background-image: url(/about/csr/img/icon_hexa_002.gif);
  background-repeat: no-repeat;
  background-position: 10px center;
}
#contentsArea article .link-btn.link-btn-socialinnovation:hover {
  border: 1px solid #92539d;
}
#contentsArea article .link-btn.link-btn-customers {
  padding-left: 34px;
  background-image: url(/about/csr/img/icon_hexa_003.gif);
  background-repeat: no-repeat;
  background-position: 10px center;
}
#contentsArea article .link-btn.link-btn-customers:hover {
  border: 1px solid #eb6100;
}
#contentsArea article .link-btn.link-btn-suppliers {
  padding-left: 34px;
  background-image: url(/about/csr/img/icon_hexa_004.gif);
  background-repeat: no-repeat;
  background-position: 10px center;
}
#contentsArea article .link-btn.link-btn-suppliers:hover {
  border: 1px solid #e73c84;
}
#contentsArea article .link-btn.link-btn-humancapital {
  padding-left: 34px;
  background-image: url(/about/csr/img/icon_hexa_005.gif);
  background-repeat: no-repeat;
  background-position: 10px center;
}
#contentsArea article .link-btn.link-btn-humancapital:hover {
  border: 1px solid #004990;
}
#contentsArea article .link-btn.link-btn-diversity {
  padding-left: 34px;
  background-image: url(/about/csr/img/icon_hexa_006.gif);
  background-repeat: no-repeat;
  background-position: 10px center;
}
#contentsArea article .link-btn.link-btn-diversity:hover {
  border: 1px solid #5db6cb;
}
#contentsArea article .index-linklist .index-linklist-item .link-btn {
  margin-top: 0;
}
@media only screen and (max-width: 599px) {
  #contentsArea article .link-btn.link-btn-environment:hover,
  #contentsArea article .link-btn.link-btn-socialinnovation:hover,
  #contentsArea article .link-btn.link-btn-customers:hover,
  #contentsArea article .link-btn.link-btn-suppliers:hover,
  #contentsArea article .link-btn.link-btn-humancapital:hover,
  #contentsArea article .link-btn.link-btn-diversity:hover {
    border: 1px solid #bebebe;
  }
  #contentsArea article .index-linklist .index-linklist-item:not(:last-child) .link-btn {
    border-bottom: 0;
  }
	
	#contentsArea article .page-heading-environment .page-heading-title,
	#contentsArea article .page-heading-socialinnovation .page-heading-title,
	#contentsArea article .page-heading-customers .page-heading-title,
	#contentsArea article .page-heading-suppliers .page-heading-title,
	#contentsArea article .page-heading-humancapital .page-heading-title,
	#contentsArea article .page-heading-diversity .page-heading-title {
	  color: black !important;
		font-weight: bold !important;
		font-size: 24px !important;
	}
}

/* category top page heading */
#contentsArea article .page-heading {
  position: relative;
  width: 574px;
  /*padding-top: 42%;*/
  height: 240px;
  margin-top: 7px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
/* #contentsArea article .page-heading-environment {
  background-image: url(/about/csr/environment/img/bg_index_001.jpg);
}
#contentsArea article .page-heading-socialinnovation {
  background-image: url(/about/csr/social-innovation/img/bg_index_001.jpg);
}
#contentsArea article .page-heading-customers {
  background-image: url(/about/csr/csr/customers/img/bg_index_001.jpg);
}
#contentsArea article .page-heading-suppliers {
  background-image: url(/about/csr/csr/suppliers/img/bg_index_001.jpg);
}
#contentsArea article .page-heading-humancapital {
  background-image: url(/about/csr/human-capital/img/bg_index_001.jpg);
}
#contentsArea article .page-heading-diversity {
  background-image: url(/about/csr/csr/diversity/img/bg_index_001.jpg);
} */
#contentsArea article .page-heading .page-heading-inner {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}
#contentsArea article .page-heading .page-heading-title {
  margin: 0;
  line-height: 1.2;
  font-size:28px;
  font-weight: bold;/*
  text-shadow: 1px 1px 0px #fff,-1px -1px 0px #fff,2px 2px 0px #fff,-2px -2px 0px #fff;*/
  letter-spacing:-0.7px;
}
#contentsArea article .page-heading-environment .page-heading-title,
#contentsArea article .page-heading-socialinnovation .page-heading-title,
#contentsArea article .page-heading-customers .page-heading-title,
#contentsArea article .page-heading-suppliers .page-heading-title,
#contentsArea article .page-heading-humancapital .page-heading-title,
#contentsArea article .page-heading-diversity .page-heading-title {
  color: #fff;
	font-weight: normal;
	 letter-spacing:1px;
}
#contentsArea article .page-heading .page-heading-eng {
  margin: 10px 0 0;
  line-height: 1.2;
  font-size: 18px;
  letter-spacing: .1em;/*
  text-shadow: 1px 1px 1px #fff;*/
  word-break: break-word;
	color: #fff;
}
.color-green {
  color: #009f3a !important;
}
.color-blue {
  color: #153767 !important;
}
.color-diversity {
  color: #087071 !important;
}
.color-ssocialinnovation{
  color: #36215a !important;
}
.color-suppliers{
  color: #a2204e !important;
}
#contentsArea article .page-heading figure {
  display: none;
}
@media only screen and (max-width: 599px) {
  #contentsArea article .page-heading {
    width: 100%;
    height: auto;
    margin-bottom: 5px;
    background-image: none;
  }
  #contentsArea article .page-heading .page-heading-inner {
    position: static;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(0);
  }
  #contentsArea article .page-heading .page-heading-subcontainer {
    position: relative;
  }
  #contentsArea article .page-heading .page-heading-eng {
    position: absolute;
    top: 50%;
    left: 20px;
    margin-top: 0;
    transform: translateY(-50%);
  }
  #contentsArea article .page-heading figure  {
    display: block;
  }
  #contentsArea article .page-heading figure img  {
    width: 100%;
    height: auto;
  }
}

/* flow chart */
#contentsArea article .chart .chartBox {
  position: relative;
  width: 100%;
  padding: 0 20px 20px;
  margin-top: 20px;
  border-top: 10px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  box-sizing: border-box;
}
#contentsArea article .chart-environment .chartBox {
  border-top: 10px solid #00a73b;
  border-right: 1px solid #00a73b;
  border-bottom: 1px solid #00a73b;
  border-left: 1px solid #00a73b;
}
#contentsArea article .chart-socialinnovation .chartBox {
  border-top: 10px solid #92539d;
  border-right: 1px solid #92539d;
  border-bottom: 1px solid #92539d;
  border-left: 1px solid #92539d;
}
#contentsArea article .chart-customers .chartBox {
  border-top: 10px solid #eb6100;
  border-right: 1px solid #eb6100;
  border-bottom: 1px solid #eb6100;
  border-left: 1px solid #eb6100;
}
#contentsArea article .chart-suppliers .chartBox {
  border-top: 10px solid #e73c84;
  border-right: 1px solid #e73c83;
  border-bottom: 1px solid #e73c84;
  border-left: 1px solid #e73c84;
}
#contentsArea article .chart-humancapital .chartBox {
  border-top: 10px solid #004990;
  border-right: 1px solid #004990;
  border-bottom: 1px solid #004990;
  border-left: 1px solid #004990;
}
#contentsArea article .chart-diversity .chartBox {
  border-top: 10px solid #5db6cb;
  border-right: 1px solid #5db6cb;
  border-bottom: 1px solid #5db6cb;
  border-left: 1px solid #5db6cb;
}
#contentsArea article .chart-0062c2 .chartBox {
  border-top: 10px solid #0062c2;
  border-right: 1px solid #0062c2;
  border-bottom: 1px solid #0062c2;
  border-left: 1px solid #0062c2;
}
#contentsArea article .chart .chartBox:nth-child(n+2) {
  margin-top: 62px;
}
#contentsArea article .chart .chartBox:not(:last-child):after {
  position: absolute;
  left: 50%;
  bottom: -43px;
  display: block;
  content: "";
  width: 56px;
  height: 22px;
  margin-left: -28px;
  background-image: url(/about/csr/img/chart_arrow_001.gif);
  background-repeat:  no-repeat;
}
#contentsArea article .chart .chartTitle {
  margin-top: 20px;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 0;
}
#contentsArea article .chart ul li {
  position: relative;
  padding-left: 15px;
  background: none;
}
#contentsArea article .chart ul li:before {
  position: absolute;
  top: 3px;
  left: 0;
  display: inline-block;
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
}
#contentsArea article .chart-environment ul li:before {
  background-color: #00a73b;
}
#contentsArea article .chart-socialinnovation ul li:before {
  background-color: #92539d;
}
#contentsArea article .chart-customers ul li:before {
  background-color: #eb6100;
}
#contentsArea article .chart-suppliers ul li:before {
  background-color: #e73c84;
}
#contentsArea article .chart-humancapital ul li:before {
  background-color: #004990;
}
#contentsArea article .chart-diversity ul li:before {
  background-color: #5db6cb;
}
#contentsArea article .chart dl {
  margin-top: 11px;
}


/* ============================================
      utility
============================================ */
@media only screen and (min-width: 600px) {
  .hidden-sp {
    display: block !important;
  }
  .hidden-pc {
    display: none !important;
  }
}

@media only screen and (max-width: 599px) {
  .hidden-sp {
    display: none !important;
  }
  .hidden-pc {
    display: block !important;
  }
}

/* ============================================
      animation keyframe
============================================ */
@-webkit-keyframes btnScrollAn {
  0% {
    -webkit-transform: translateX(-6px);
  }
  100% {
    -webkit-transform: translateX(0);
  }
}
@keyframes btnScrollAn {
  0% {
    transform: translateX(-6px);
  }
  100% {
    transform: translateX(0);
  }
}

a:hover img.link-panel-img{
	opacity: 0.5;
}

.csr-top-column{
	margin-top: 20px !important;
}

.csr-top-column > a{
	text-decoration: none !important;
}

.csr-top-column > a:hover{
	opacity: 0.5;
}

.csr-top-column > a > img{
	width: 100% !important;
}

.csr-top-column > a > strong{
	font-size: 16px !important;
	display: block !important;
	margin-top: 10px !important
}

.csr-top-column > a > span{
	display: block !important;
	margin-top: 10px !important
}