@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@600;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

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

　目次

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

　00. 
　01. 基本
　02. モジュール

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



/* ==

　01. 基本

=============================================================================== */
body {
	min-width: 950px;
	color: #000;
}
#topicPath {
	background-color: #fff;
}

/* ==

　02. モジュール

=============================================================================== */
/* MV
------------------------------------------------------------------------------- */
.ceMv {
	position: relative;
	height: auto;
	background: url(../images/mv.jpg) no-repeat center center;
	background-size: cover;
}
.ceMv_in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	width: calc(100% - 40px);
	max-width: 1240px;
	height: calc(100vh - 184px);
	margin: 0 auto;
	padding: 0 20px;
	overflow: hidden;
	z-index: 1;
}
.ceMv_txt {
	margin-top: -90px;
	text-shadow: 0px 0px 16px rgba(0,70,110,0.3);
}
.ceMv_img {
	margin-top: -60px;
	filter: drop-shadow(0px 0px 16px rgba(0,70,110,0.3));
}
.ceMv_tit h1 {
	margin-bottom: 0;
	border-bottom: none;
	line-height: 1;
	padding: 0;
}
.ceMv_tit .ceMv_tit01 {
	position: relative;
	font-size: 48px;
	font-size: clamp(2.5rem, 0.7455rem + 2.9091vw, 3rem);
	color: #fff;
	font-weight: 700;
	margin-bottom: 40px;
	padding-bottom: 10px;
	display: inline-block;
	color: #fff;
	line-height: 1;
}
.ceMv_tit .ceMv_tit01 .ceMv_tit01_in {
	position: relative;
	z-index: 1;
}
.ceMv_tit .ceMv_tit01::before {
	content: "";
	width: 100%;
	height: 20px;
	background-color: #195E9E;
	position: absolute;
	bottom: 0;
	left: 0;
}
.ceMv_tit .ceMv_tit02 {
	margin-bottom: 15px;
	white-space: nowrap;
	font-weight: 500;
	font-size: 12px;
	line-height: 1;
	color: #fff;
	display: block;
	letter-spacing: 0.12em;
}
.ceMv_lead p {
	font-size: 16px;
	color: #fff;
	margin-bottom: 15px;
	font-weight: 500;
	line-height: 1.8125;
}
.ceMv_lead p span {
	font-size: 24px;
	font-size: clamp(1.375rem, 0.9364rem + 0.7273vw, 1.5rem);
	color: #fff;
	margin-bottom: 20px;
	font-weight: 700;
	line-height: 1.5;
}
.ceMv_lead br.wMin {
	display: none;
}
.ceMv_tit .ceMv_tit01 .ceMv_tit_col {
	color: #146F5A;
}
@media only screen and (max-width: 1240px) {
	.ceMv_in {
		width: calc(100% - 60px);
		padding: 0 30px;
	}
	.ceMv_lead br.wMin {
		display: block;
	}
}
.ceScroll {
	position: absolute;
	bottom: -100px;
	right: 20px;
	z-index: 1;
}
@media only screen and (max-width: 1350px) {
	.ceScroll {
		bottom: -60px;
	}
}

/* コンテンツ
------------------------------------------------------------------------------- */
.ceSection {
	position: relative;
	padding: 90px 20px;
}
.ceSection_in {
	max-width: 1240px;
	margin: 0 auto;
}
.ceSection_in-L {
	max-width: 1600px;
}
.ceSection-nav {
	background-color: #48A5D4;
}
.ceSection-01 {
	background: linear-gradient(120deg,rgba(240, 252, 255, 1) 0%, rgba(204, 239, 254, 1) 50%, rgba(167, 225, 252, 1) 100%);
}
.ceSection-02 {
	background-color: #fff;
}
.ceSection-03 {
	background: #A1DCF7;
	background: linear-gradient(180deg,rgba(161, 220, 247, 1) 0%, rgba(238, 249, 252, 1) 100%);
	padding-bottom: 0;
}
.ceSection-04 {
	background: #EEF9FC;
	background: linear-gradient(180deg,rgba(238, 249, 252, 1) 0%, rgba(189, 242, 225, 1) 100%);
}

/* 1.私たちの役割
------------------------------------------------------------------------------- */
.ceCol01 {
	display: flex;
	justify-content: space-between;
}
.ceCol01 .ceCol01_txt {
	width: 58%;
}
.ceCol01 .ceCol01_txt p {
	margin-bottom: 10px;
}
.ceCol01 .ceCol01_img {
	width: 31.5%;
	padding-top: 75px;
}
.ceCol01 .ceCol01_img_item {
	aspect-ratio: 390 / 280;
	max-width: 390px;
	background: linear-gradient(120deg,rgba(83, 232, 185, 1) 0%, rgba(100, 201, 217, 1) 50%, rgba(90, 156, 234, 1) 100%);
	border-radius: 20px;
	padding: 30px;
}
.ceCol01 .ceCol01_img_item_in {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.ceCol01 .ceCol01_img_item_in::before,
.ceCol01 .ceCol01_img_item_in::after {
	content: "";
	width: 45px;
	height: 45px;
	background: url(../images/svg/img_line.svg) no-repeat 0 0;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
}
.ceCol01 .ceCol01_img_item_in::after {
	border-top: none;
	border-left: none;
	top: auto;
	left: auto;
	bottom: 0;
	right: 0;
	transform: rotateZ(180deg);
}
.ceCol01 .ceCol01_img_item_in p {
	margin-top: 10px;
	/* font-size: 33px; */
	font-size: clamp(1.625rem, 0.2847rem + 2.2222vw, 2.0625rem);
	font-weight: 700;
	color: #fff;
	margin: 0 !important;
	line-height: 1.454545;
}
.ceList01 {
	font-size: 18px;
	margin-bottom: 15px;
}
.ceList01 li {
	position: relative;
	margin-left: 20px;
	text-indent: -15px;
	margin-bottom: 13px;
}
.ceList01 li::before {
	content: "・";
	display: inline-block;
	color: #48A5D4;
	width: 15px;
	height: 15px;
	font-size: 30px;
	line-height: 1;
	position: relative;
	top: 5px;
}

/* 2.目指す将来像
------------------------------------------------------------------------------- */
.ceSection_img01 {
	width: 100%;
	margin: 35px auto 0;
	border-radius: 20px;
	overflow: hidden;
}
.ceSection_img01 img {
	width: 100%;
	height: auto;
}

/* 3.サーキュラーエコノミー
------------------------------------------------------------------------------- */
.ceSection-03 {
	padding-bottom: 30px;
}
.ceSection_bg {
	background-color: #fff;
	padding: 60px 80px;
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}
.ceSection_col {
	display: flex;
	justify-content: space-between;
	margin-bottom: 35px;
}
.ceSection_col .ceSection_col_item {
	max-width: 240px;
	width: 22.2222222%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	text-align: center;
}
.ceSection_col .ceSection_col_item:first-child {
	margin-right: 30px;
}
.ceSection_col .ceSection_col_item:last-child {
	max-width: 300px;
	width: 28.222222%;
}
.ceSection_col .ceSection_col_item img {
	width: 100%;
	height: auto;
}
.ceSection_col .ceSection_col_item h3 {
	/* font-size: 52px; */
	font-size: clamp(2.375rem, -0.3056rem + 4.4444vw, 3.25rem);
	font-weight: 900;
	border: none;
	width: 100%;
	margin-bottom: 0;
}
.ceSection_col .ceSection_col_item-make h3 {
	color: #F0AD1D;
}
.ceSection_col .ceSection_col_item-use h3 {
	color: #31A882;
}
.ceSection_col .ceSection_col_item-reproduction h3 {
	color: #48A5D4;
}
.ceSection_col .ceSection_col_item p {
	/* font-size: 18px; */
	font-size: clamp(0.75rem, -0.3988rem + 1.9048vw, 1.125rem);
	font-weight: 500;
	width: 100%;
	margin: -70px 0 0;
	line-height: 1.5555;
}
.ceSection_img02 {
	margin: 70px 0 0;
	padding-bottom: 120px;
	text-align: center;
}
.ceSection_img02 img {
	max-width: 740px;
	width: 68.5185185%;
	height: auto;
}
.ceSection_btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: absolute;
	top: 100px;
	left: 0;
    padding: 13px 15px 15px 25px;
    border: 5px solid #333;
    border-radius: 60px;
	background-color: #fff;
    text-align: left;
    /* font-size: 20px; */
	font-size: clamp(1rem, 0.2341rem + 1.2698vw, 1.25rem);
    font-weight: 700;
	color: #000;
    text-decoration: none;
	line-height: 1.5;
}
.ceSection_btn:hover {
	text-decoration: underline;
}
.ceSection_btn span {
	display: inline-block;
	margin-right: 18px;
}
.ceSection_btn span b {
	display: block;
	/* font-size: 16px; */
	font-size: clamp(0.75rem, -0.0159rem + 1.2698vw, 1rem);
	font-weight: 600;
}
.ceSection_btn-reproduction {
	border-color: #48A5D4;
}
.ceSection_btn-reproduction svg {
	fill: #48A5D4;
}
.ceSection_btn-reproduction span b {
	color: #48A5D4;
}
.ceSection_btn-make {
	border-color: #F0AD1D;
	left: auto;
	right: 0;
}
.ceSection_btn-make svg {
	fill: #F0AD1D;
}
.ceSection_btn-make span b {
	color: #F0AD1D;
}
.ceSection_btn-use {
	border-color: #31A882;
	top: auto;
	bottom: 0;
	left: calc(50% - 100px);
}
.ceSection_btn-use svg {
	fill: #31A882;
}
.ceSection_btn-use span b {
	color: #31A882;
}
.ceSection_btn-make::before {
	background-color: #F0AD1D;
}
.ceSection_btn-use::before {
	background-color: #31A882;
}
.ceSection_btn-reproduction::before {
	background-color: #48A5D4;
}
@media only screen and (max-width: 1240px) {
	.ceSection_btn {
		top: 120px;
		padding: 10px 10px 12px 20px;
	}
	.ceSection_btn-reproduction {
		left: -50px;
	}
	.ceSection_btn-make {
		right: -50px;
		left: auto;
	}
	.ceSection_btn-use {
		top: auto
	}
}

/* 4.具体的な取り組み
------------------------------------------------------------------------------- */
.ceBlock01 {
	padding-top: 40px;
}
.ceBlock01_in {
	overflow: hidden;
	border-radius: 20px;
	box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.1);
	display: flex;
	justify-content: space-between;
}
.ceBlock01_head {
	width: 115px;
	display: flex;
	align-items: center;
	justify-content: center;
	writing-mode: vertical-rl;
	text-orientation: upright;
}
.ceBlock01_body_icon {
	padding: 10px 20px;
}
.ceBlock01-make .ceBlock01_in {
	border: 4px solid #F0AD1D;
}
.ceBlock01-make .ceBlock01_in .ceBlock01_head {
	background-color: #F0AD1D;
}
.ceBlock01-make .ceBlock01_in .ceBlock01_body_icon {
	background-color: #FBE8BE;
}
.ceBlock01-use .ceBlock01_in {
	border: 4px solid #31A882;
}
.ceBlock01-use .ceBlock01_in .ceBlock01_head {
	background-color: #31A882;
}
.ceBlock01-use .ceBlock01_in .ceBlock01_body_icon {
	background-color: #CAEBE0;
}
.ceBlock01-reproduction .ceBlock01_in {
	border: 4px solid #48A5D4;
}
.ceBlock01-reproduction .ceBlock01_in .ceBlock01_head {
	background-color: #48A5D4;
}
.ceBlock01-reproduction .ceBlock01_in .ceBlock01_body_icon {
	background-color: #CEE8F5;
}
.ceBlock01_body {
	width: calc(100% - 115px);
	background-color: #fff;
}
.ceBlock01_body_in {
	max-width: 960px;
	margin: 0 auto;
	padding: 50px 20px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.ceBlock01_body_in .ceBlock01_body_item01 {
	max-width: 320px;
    width: calc(33.3333% - 20px);
    padding: 30px 10px;
	background-color: #F4F4F4;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	border-radius: 8px;
}
.ceBlock01_body_in .ceBlock01_body_item01 p {
	width: 100%;
	margin-bottom: 0;
	text-align: center;
}
.ceBlock01_body_in .ceBlock01_body_item01 .amount {
	/* font-size: 20px; */
	font-size: clamp(1rem, 0.2341rem + 1.2698vw, 1.25rem);
	font-weight: bold;
	line-height: 1.4;
	margin-bottom: 15px;
}
.ceBlock01_body_in .ceBlock01_body_item01 .amount span {
	font-size: 16px;
}
.ceBlock01_body_in .ceBlock01_body_item01 .kpi {
	font-size: 13px;
	font-weight: 500;
	color: #666666;
	margin-bottom: 10px;
}
.ceBlock01_body_in .ceBlock01_body_item01 .note {
	font-size: 14px;
	font-weight: 500;
}
.ceBlock01_body_in .ceBlock01_body_item01 .data {
	font-size: 16px;
	font-weight: bold;
	line-height: 1;
}
.ceBlock01_body_in .ceBlock01_body_item01 .data span {
	font-size: 32px;
	font-weight: 800;
	display: inline-block;
	margin-top: 5px;
}
.ceBlock01_body_in .ceBlock01_body_item01 .data span b {
	/* font-size: 52px; */
	font-size: clamp(3rem, 2.2341rem + 1.2698vw, 3.25rem);
	font-weight: 700;
	font-family: "Roboto", sans-serif;
	margin-right: 10px;
}
.ceBlock01-make .ceBlock01_body_in .ceBlock01_body_item01 .data span {
	color: #F0AD1D;
}
.ceBlock01-make .ceBlock01_body_in .ceBtn01 {
	outline-color: #FBE8BE;
}
.ceBlock01-use .ceBlock01_body_in .ceBlock01_body_item01 .data span {
	color: #31A882;
}
.ceBlock01-use .ceBlock01_body_in .ceBtn01 {
	outline-color: #CAEBE0;
}
.ceBlock01-reproduction .ceBlock01_body_in .ceBlock01_body_item01 .data span {
	color: #48A5D4;
}
.ceBlock01-reproduction .ceBlock01_body_in .ceBtn01 {
	outline-color: #CEE8F5;
}
.ceBlock01_body_in .ceBlock01_body_item02 {
	width: 62.5%;
	max-width: 600px;
}
.ceBlock01_body_in .ceBlock01_body_item02 p {
    margin-bottom: 25px;
}
.ceBlock01_body_in .ceBlock01_body_item03 {
	width: 67.4%;
}
.ceSection .ceBlock01_body_in .ceBlock01_more {
	display: flex;
	align-items: center;
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 20px;
}
.ceBlock01_more svg {
	margin-right: 10px;
}
.ceBlock01-make .ceBlock01_more svg path {
	fill: #F0AD1D;
}
.ceBlock01-use .ceBlock01_more svg path {
	fill: #31A882;
}
.ceBlock01-reproduction .ceBlock01_more svg path {
	fill: #48A5D4;
}

/* テキスト
------------------------------------------------------------------------------- */
.ceTit01 {
	background-color: transparent;
	font-size: 36px;
	margin-bottom: 30px;
	padding: 0;
	color: #1B333C;
	display: flex;
	align-items: center;
	line-height: 1;
}
.ceTit01 span {
	font-family: "Roboto", sans-serif;
	font-size: 72px;
	font-weight: 700;
	color: #195E9E;
	margin-right: 23px;
}
.ceTit02 {
	font-size: 40px;
	font-weight: 900;
	color: #fff;
	border-bottom: none;
	margin: 0;
	letter-spacing: 0.1em;
}
.ceSection p {
	font-size: 18px;
	margin-bottom: 30px;
	color: #1B333C;
	line-height: 1.8;
}
.ceSection .ceNote01 {
	font-size: 14px;
	color: #666666;
	margin:  10px 0 0;
}

/* アンカーナビ
------------------------------------------------------------------------------- */
.ceNav {
	display: flex;
	margin: 0 auto;
}
.ceNav li {
	width: 25%;
	background-color: #fff;
	border-right: 1px solid #48A5D4;
}
.ceNav li:first-child {
	border-radius: 20px 0 0 20px;
}
.ceNav li:last-child {
	border-radius: 0 20px 20px 0;
}
.ceNav li a {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #1B333C;
	text-decoration: none;
	text-align: center;
	height: 80px;
	font-size: 18px;
	font-weight: 700;
}
.ceNav li a:hover .ceNav_txt {
	text-decoration: underline;
}
.ceNav li a span.ceNav_num {
	font-family: "Roboto", sans-serif;
	font-size: 38px;
	color: #195E9E;
	margin-right: 10px;
	text-decoration: none !important;
}
@media only screen and (max-width: 1240px) {
	.ceNav li a {
		font-size: 16px;
	}
}

/* ボタン
------------------------------------------------------------------------------- */
.ceBtn01 {
	width: calc(100% - 70px);
	position: relative;
	display: block;
	margin: 0 auto;
	padding: 10px 30px;
	color: #000;
	outline: 5px solid #000;
	border-radius: 50px;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	transition: opacity 0.3s;
}
.ceBtn01 + .ceBtn01 {
	margin-top: 20px;
}
.ceBtn01:hover {
	opacity: 0.6 !important;
	text-decoration: underline;
}
.ceBtn01::after {
    content: '';
    display: inline-block;
	position: absolute;
	top: calc(50% - 6px);
	right: 25px;
    width: 22px;
    height: 12px;
    margin: 0 0 0 15px;
    background: url(/common/images/rn04/svg/arw_ico02.svg) left top no-repeat;
    background-size: contain;
    vertical-align: -0.05em;
}

/* スクロールアニメーション
------------------------------------------------------------------------------- */
.fnPkbFadeIn,
.fnPkbSlideIn {
	opacity: 0;
}