@charset "utf-8";


/* ****************************************************************************

　目次
　01. 基本
　02. MV
　03. コンテンツ

-------------------------------------------------------------------------------

*/
/* ==

　01. 基本

=============================================================================== */
h1,h2,h3,
.sConnection p,
.sCommunity p,
.sCase p,
.sRelation p {
	color: #333333;
	margin: 0;
	padding: 0;
	background-color: transparent;
	border: none;
}

#topicPath .baseIn {
	max-width: 1240px;
	width: auto;
	margin: 0 auto;
	padding: 0 15px;
}
/* ==

　02. MV

=============================================================================== */
/* MV
----------------------------------------------- */
.sMv01 {
	padding-top: 70px;
	height: calc(100vh - 249px);
}
.sMv01_in {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
}
.sMv01_in .sMv01_tit {
	font-size: 48px;
	font-weight: bold;
	opacity: 0;
	transition: all 1s ease-out;
}
.sMv01_in .sMv01_tit-show {
	opacity: 1;
}
.sMv01_in .sBtn {
	position: absolute;
	top: 0;
	right: 20px;
	width: 320px;
	opacity: 0;
	transition: all 1s ease-out;
}
.sMv01_in .sBtn-show {
	opacity: 1;
}
@media only screen and (max-width: 1000px) {
	.sMv01_tit br {
		display: block;
	}
}

.sMv01_stick {
	position: fixed;
  bottom: -100px;
  left: 50%;
  margin-left: -432px;
  width: 865px;
  height: 50vh;
  z-index: -1;
  opacity: 1;
}
.sMv01_stick-hide {
  opacity: 0;
}

.sBar {
	position: relative;
	height: calc(50vh + 50px);
	width: 32px;
	position: absolute;
	bottom: -50px;
	border-radius: 20px 20px 0 0;

}
.sBar::after {
	content: "";
	width: 32px;
	height: 32px;
	border-radius: 20px;
	position: absolute;
	top: -40px;
}

.sBar-1 {
	background-color: #E5001D;
	left: 0;
}
.sBar-1::after {
	background-color: #E5001D;
}
.sBar-2 {
	background-color: #D7A600;
	left: 52px;
}
.sBar-2::after {
	background-color: #D7A600;
}
.sBar-3 {
	background-color: #19973B;
	left: 104px;
}
.sBar-3::after {
	background-color: #19973B;
}
.sBar-4 {
	background-color: #C61027;
	left: 156px;
}
.sBar-4::after {
	background-color: #C61027;
}
.sBar-5 {
	background-color: #E83317;
	left: 208px;
}
.sBar-5::after {
	background-color: #E83317;
}
.sBar-6 {
	background-color: #07A6D9;
	left: 260px;
}
.sBar-6::after {
	background-color: #07A6D9;
}
.sBar-7 {
	background-color: #FABE00;
	left: 312px;
}
.sBar-7::after {
	background-color: #FABE00;
}
.sBar-8 {
	background-color: #970C31;
	left: 364px;
}
.sBar-8::after {
	background-color: #970C31;
}
.sBar-9 {
	background-color: #EC6B07;
	left: 416px;
}
.sBar-9::after {
	background-color: #EC6B07;
}
.sBar-10 {
	background-color: #DD067B;
	left: 468px;
}
.sBar-10::after {
	background-color: #DD067B;
}
.sBar-11 {
	background-color: #F5A309;
	left: 520px;
}
.sBar-11::after {
	background-color: #F5A309;
}
.sBar-12 {
	background-color: #D29208;
	left: 572px;
}
.sBar-12::after {
	background-color: #D29208;
}
.sBar-13 {
	background-color: #749A6A;
	left: 624px;
}
.sBar-13::after {
	background-color: #749A6A;
}
.sBar-14 {
	background-color: #0075B8;
	left: 676px;
}
.sBar-14::after {
	background-color: #0075B8;
}
.sBar-15 {
	background-color: #29A839;
	left: 728px;
}
.sBar-15::after {
	background-color: #29A839;
}
.sBar-16 {
	background-color: #014D89;
	left: 780px;
}
.sBar-16::after {
	background-color: #014D89;
}
.sBar-17 {
	background-color: #033067;
	left: 832px;
}
.sBar-17::after {
	background-color: #033067;
}


/* ==

　03. コンテンツ

=============================================================================== */

/* テキスト
----------------------------------------------- */
.sHead01 {
	text-align: left;
}
.sHead01 h2 {
	margin-bottom: 20px;
	font-size: 42px;
	font-weight: bold;
}
.sHead01 h2 + p {
	font-size: 16px;
	font-weight: bold;
	color: #F90046;
}

/* 私たちの目指す社会は
----------------------------------------------- */
.sConnection {
	padding: 80px 0;
	background: url(/sustainable/sdgs/images/rn01/index_bg01.jpg) no-repeat center center;
	background-size: cover;
}
.sConnection_in {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
	text-align: center;
}
.sConnection_in h2 {
	margin-bottom: 50px;
	font-size: 40px;
	font-weight: bold;
	color: #fff;
	line-height: 1.5;
	letter-spacing: 3px;
}
.sConnection_in p {
	margin-bottom: 30px;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
}
.sMovie {
	margin: 100px auto 30px;
}
.sMovie p {
	margin: 10px auto;
	font-size: 18px;
	letter-spacing: 1.5px;
	font-weight: bold;
}
.sMovie_btn {
	color: #fff;
}

/* 私たちが注力するSDGs
----------------------------------------------- */
.sCommunity {
	position: relative;
	padding: 150px 0 80px 0;
	background: url(/sustainable/sdgs/images/rn01/index_bg02.png) no-repeat center top;
}
.sCommunity::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100px;
	background-color: rgba(255, 255, 255, 0.9);
	z-index: -1;
}
.sCommunity_in {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
	text-align: center;
}
.sCommunity_img {
	margin-bottom: 30px;
}
.sCommunity_txt {
	padding: 0 20px;
}
.sCommunity_img img {
	width: 100%;
	height: auto;
}
.sCommunity .sHead01 {
	margin-bottom: 100px;
}
.sCommunity h3 {
	margin-bottom: 30px;
	font-size: 28px;
	font-weight: bold;
}
.sCommunity p {
	margin-bottom: 30px;
	font-size: 16px;
	font-weight: 500;
}
.sCol01 {
	max-width: 980px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
.sCol01_item {
	max-width: 100px;
	width: 10.2%;
}
.sCol01_item img {
	width: 100%;
	height: auto;
}
.sCommunity .sCol01 {
	margin-bottom: 40px;
}
.sCommunity_block {
	background-color: #fff;
	box-shadow: 35px 35px 25px 1px rgba(0, 0, 0, .2);
	padding: 60px 0;
}

/* 私たちの取り組みについて
----------------------------------------------- */
.sCase {
	position: relative;
	padding: 80px 0;
	overflow: hidden;
	background-color: rgba(255, 255, 255, 0.9);
}
.sCase_in {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
	text-align: center;
}
.sCase_in p {
	margin: 30px  0;
	font-size: 16px;
	font-weight: bold;
}

.sCase_list {
	position: relative;
	height: 680px;
	left: -300px;
  animation-name: animation;
  animation-duration: 40s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes animation {
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(-2300px);
  }
}
.sCase_list_in {
	position: absolute;
	top: 0;
	left: 0;
}
.sCase_list_in-02 {
	left: 2300px;
}
.sCase_list_item {
	position: absolute;
}
.sCase_list_item .sCase_list_icon {
	position: absolute;
	top: -30px;
	left: -30px;
}
.sCase_list_icon {
	width: 100px;
	height: auto;
}
.sCase_list_item-11 {
	top: 77px;
	left: 20px;
}
.sCase_list_item-5 {
	top: 60px;
	left: 510px;
}
.sCase_list_item-5 .sCase_list_icon {
	top: -20px;
	left: -30px;
}
.sCase_list_item-3 {
	top: 160px;
	left: 800px;
}
.sCase_list_item-7 {
	top: 15px;
	left: 1036px;
}
.sCase_list_item-7 .sCase_list_icon {
	top: -20px;
	left: -20px;
}
.sCase_list_item-4 {
	top: 105px;
	left: 1495px;
}
.sCase_list_item-4 .sCase_list_icon {
	top: -50px;
	left: -60px;
}
.sCase_list_item-9 {
	top: 30px;
	left: 1825px;
}
.sCase_list_item-9 .sCase_list_icon {
	top: -25px;
	left: -28px;
}
.sCase_list_item-8 {
	top: 440px;
	left: 40px;
}
.sCase_list_item-8 .sCase_list_icon {
	top: -40px;
	left: -40px;
}
.sCase_list_item-12 {
	top: 420px;
	left: 350px;
}
.sCase_list_item-12 .sCase_list_icon {
	top: -20px;
	left: -20px;
}
.sCase_list_item-13 {
	top: 345px;
	left: 600px;
}
.sCase_list_item-13 .sCase_list_icon {
	top: -20px;
	left: -20px;
}
.sCase_list_item-17 {
	top: 380px;
	left: 1010px;
}
.sCase_list_item-17 .sCase_list_icon {
	top: -20px;
	left: -30px;
}
.sCase_list_item-15 {
	top: 340px;
	left: 1275px;
}
.sCase_list_item-15 .sCase_list_icon {
	top: -65px;
	left: -30px;
}
.sCase_list_item-14 {
	top: 540px;
	left: 1305px;
}
.sCase_list_item-14 .sCase_list_icon {
	top: -55px;
	left: -40px;
}
.sCase_list_item-2 {
	top: 370px;
	left: 1525px;
}
.sCase_list_item-2 .sCase_list_icon {
	top: -50px;
	left: -50px;
}
.sCase_list_item-10 {
	top: 450px;
	left: 1965px;
}
.sCase_list_item-10 .sCase_list_icon {
	top: -60px;
	left: -20px;
}

/* コミュニケーション活動のご紹介
----------------------------------------------- */
.sCommunication {
	position: relative;
	padding: 40px 0 80px;
	background-color: rgba(255, 255, 255, 0.9);
}
.sCommunication_in {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
}
.sCommunication_in h3 {
	margin-bottom: 20px;
	font-size: 24px;
	font-weight: bold;
}
.sCommunication_in p {
	margin-bottom: 50px;
	font-size: 16px;
	font-weight: bold;
}
.sCommunication_list {
	max-width: 1020px;
	margin: 0 auto;
	padding: 0 10px 0 30px;
}
.sCommunication_list .slick-track {
	display: flex;
	align-items: stretch;
}
.sCommunication_item {
	position: relative;
	width: 320px;
	height: 100%;
	margin: 0 20px 50px 0;
	padding-top: 10px;
	box-shadow: 10px 10px 10px 1px rgba(0, 0, 0, .14);
	display: flex;
	align-items: stretch;
}
.sCommunication_date {
	position: absolute;
	top: 0;
	left: 10px;
  background-color: #000;
  color: #fff;
  padding: 3px 10px 5px;
  line-height: 1;
  font-size: 11px;
}
.sCommunication_img img {
	width: 100%;
	height: auto;
}
.sCommunication_txt {
	padding: 30px 30px 60px;
	font-weight: bold;
	background-color: #fff;
}
.sCommunication_txt p {
	font-size: 14px;
}
.sCommunication_txt span {
	display: block;
	position: absolute;
	bottom: 30px;
	right: 40px;
  padding-right: 20px;
}
.sCommunication_txt span::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0%;
	margin-top: -5px;
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 7px;
	border-color: transparent transparent transparent #f90047;
}
a[target=_blank] .sCommunication_txt span::after {
	content: "";
	width: 15px;
	height: 15px;
	right: -10px;
	background: url(/common/images/ico_arw03.gif) 0 0 no-repeat;
	background-size: 15px;
	border: none;
}
.sCommunication_item a {
	text-decoration: none;
	color: #333;
}

.slick-loading .slick-list {
	background: none;
}
.slick-arrow {
	width: 60px;
	height: 60px;
	border: 2px solid #F90046;
	border-radius: 50px;
	margin-top: -60px;
	background-color: #fff;
	z-index: 1;
}
.slick-arrow::after {
	
}
.slick-prev {
  left: -75px;
	background: none;
}
.slick-next {
  right: -75px;
	background: none;
}
.slick-arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 50%;
	margin: -8px;
	display: block;
	width: 0;
	height: 0;
  border-style: solid;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid #F90046;
  border-right: 0;
}
.slick-prev::after {
	transform: rotateZ(180deg);
	margin-right: -6px;
}
.slick-prev:focus, .slick-next:focus {
	opacity: 1;
}
@media only screen and (max-width: 1200px) {
	.slick-arrow {
	  margin-top: -70px;
	}
	.slick-prev {
	  left: 0;
	}
	.slick-next {
	  right: 0px;
	}
}
@media only screen and (max-width: 1050px) {
	.slick-arrow {
	  margin-top: -80px;
	  width: 50px;
	  height: 50px;
	}
	.slick-prev {
	  left: 20px;
	}
	.slick-next {
	  right: 20px;
	}
}

/* 関連コンテンツ
----------------------------------------------- */
.sRelation {
	position: relative;
	padding: 80px 0;
	background-color: rgba(255, 255, 255, 0.9);
}
.sRelation_in {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	justify-content: space-between;
}
.sRelation_in .sHead01 {
	padding-top: 50px;
}
.sRelation_list {
	display: flex;
	justify-content: space-between;
	width: 780px;
}
.sRelation_item {
	max-width: 240px;
	width: 30.7%;
}
.sRelation_item a {
	text-decoration: none;
}
.sRelation_item p {
	font-size: 15px;
	font-weight: bold;
}
.sRelation_txt {
	position: relative;
	padding-bottom: 30px;
}
.sRelation_txt span {
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  padding-right: 20px;
  font-weight: bold;
}
.sRelation_txt span::after {
	content: "";
	position: absolute;
	top: 0%;
	right: 0%;
	margin-top: 6px;
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 7px;
	border-color: transparent transparent transparent #f90047;
}
.sRelation_img {
	margin-bottom: 10px;
}
.sRelation_img img {
	width: 100%;
	height: auto;
}

/* ボタン
----------------------------------------------- */
.sBtn {
	position: relative;
	width: 460px;
	min-height: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	font-size: 16px;
	font-weight: bold;
	background-color: #fff;
	border: 2px solid #F90046;
	border-radius: 50px;
	text-decoration: none;
	cursor: pointer;
	color: #333333;
	letter-spacing: 1.5px;
}
.sBtn::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 10%;
	margin-top: -3px;
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 9px;
	border-color: transparent transparent transparent #f90047;
}
.sBtn-v1 {
	background-color: transparent;
	border: 2px solid #ffffff;
	color: #ffffff;
}
.sBtn-v1::after {
	border-color: transparent transparent transparent #ffffff;
}
.sBtn:hover {
	text-decoration: underline;
}

/* pageTop
----------------------------------------------- */
.sPageTop {
	background: url(/sustainable/sdgs/images/index_icon03.png) no-repeat center center;
	background-size: 48px;
	width: 48px;
	height: 48px;
	display: block;
	position: fixed;
	bottom: 10px;
	right: 10px;
	cursor: pointer;
	transition: opacity .5s;
	opacity: 0;
	pointer-events: none;
}
.sPageTop-show {
	opacity: 1;
	pointer-events: auto;
}