@charset "utf-8";

.inner { width: min(1300px,95%); margin: 0 auto; padding: 0 50px;}
.PC { display: block;}
.SP { display: none;}

.main-column { padding: 0;}
.main-column > div { padding: 0;}

/*-- fv --*/
#fv { color: #fff; background: url(../product/category/other/co-creation/co-creation-04.jpg) no-repeat center top / cover; padding: 150px 0 230px; position: relative;}
#fv h2 { font-size: 50px; font-weight: bold; margin-bottom: 25px;}
#fv h2 span { display: block; font-size: 20px; margin-bottom: 5px;}
#fv p { display: block; font-size: 20px; line-height: 160%; font-weight: bold;}
#fv .map { position: absolute; top: 20px; left: calc(50% + -20px); z-index: 0; pointer-events: none;}
@media screen and (max-width: 1200px) {
	#fv .map { left: 600px;}
}

/*-- about --*/
#about { padding: 105px 0 130px; background: url(../product/category/other/co-creation/co-creation-08.jpg) no-repeat center bottom / cover;}
#about .whitebox { width: min(1050px,95%); background-color: rgb(255 255 255/ .39); margin: 0 auto 70px; padding: 65px 10px 65px; text-align: center;}
#about .whitebox h3 { font-size: 50px; margin-bottom: 55px;}
#about .whitebox h3::after { content: ""; display: block; width: 58px; height: 8px; background: #009C93; margin: 11px auto 0;}
#about .whitebox h4 { font-size: 33px; letter-spacing: 0.11em; margin-bottom: 20px;}
#about .whitebox p { font-size: 18px; letter-spacing: 0.11em; margin-bottom: 60px; line-height: 200%;}
#about .whitebox img { margin: 0 auto;}

#about .slider { overflow: hidden; width: 100%;}
#about .slider-track { display: flex; animation: scrollLeft 40s linear infinite;}
#about .slider-track img { width: 300px; height: 300px; object-fit: cover; flex-shrink: 0;}
@keyframes scrollLeft {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}


/*-- activity --*/
#activity { }
#activity .title { display: inline-block; background: #009C93; color: #fff; font-weight: bold; font-size: 30px; line-height: 100%; width: 425px; padding: 18px 0; position: relative; clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%); text-align: center;}

#activity .sec01 { padding: 80px 0 95px; background: url(../product/category/other/co-creation/co-creation-19.jpg) no-repeat center top / cover; text-align: center;}
#activity .sec01 .s_inner { width: min(950px,95%); margin: 0 auto;}
#activity .sec01 h3 { font-size: 50px; margin-bottom: 55px;}
#activity .sec01 h3::after { content: ""; display: block; width: 58px; height: 8px; background: #009C93; margin: 11px auto 0;}
#activity .sec01 p { font-size: 18px; margin-bottom: 40px;}
#activity .sec01 .title { font-size: 30px; margin-bottom: 40px;}
#activity .sec01 .item_list { display: flex; flex-wrap: wrap; justify-content: space-between; }
#activity .sec01 .item { width: 300px; padding: 28px 28px 34px; margin-bottom: 30px; background: #fff;  border: 1px solid #D5D5D5; text-align: center; }
#activity .sec01 .item img { margin-bottom: 16px; }
#activity .sec01 .item h5 { font-size: 24px; line-height: 100%; margin: 0 0 22px;}
#activity .sec01 .item ul { list-style: none; padding: 0; margin: 0 0 22px; text-align: left; }
#activity .sec01 .item ul li { font-size: 16px; font-weight: bold; line-height: 160%; padding-left: 16px; margin-top: 5px; position: relative; }
#activity .sec01 .item ul li::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; position: absolute; left: 0; top: 0.6em; background: #009C93;  }
#activity .sec01 .item p { font-size: 14px; font-weight: bold; margin: 0; text-align: right;}

#activity .sec02 { padding: 100px 0 70px; text-align: center;}
#activity .sec02 .title { margin-bottom: 40px;}
#activity .sec02 .theme-list { width: 100%; border: 1px solid #009C93; margin: 0 0 50px;}
#activity .sec02 .theme-list dt { font-size: 30px; font-weight: bold; color: #009C93; background: #E8F4F6; padding: 12px 0;}
#activity .sec02 .theme-list dd { padding: 15px 85px 60px; margin: 0;}
#activity .sec02 .theme-list dd ul { display: flex; justify-content: space-between; flex-wrap: wrap;}
#activity .sec02 .theme-list dd ul li { position: relative; width: 45%; text-align: left; padding-left: 46px; margin-top: 40px; font-size: 18px; font-weight: bold;}
#activity .sec02 .theme-list dd ul li::before { position: absolute; left: 0; top: 0; content: ""; display: block; width: 32px; height: 28px; background: url(../product/category/other/co-creation/co-creation-16.svg) no-repeat left top / 100%;}

#activity .sec03 { background: #F2FCFD; text-align: center; padding: 86px 0 100px;}
#activity .sec03 .title { margin-bottom: 40px;}
#activity .sec03 .flex { display: flex; justify-content: space-between;}
#activity .sec03 .flex .card-link { display: block; width: 580px; text-decoration: none; color: inherit; padding: 40px; background: #fff; transition: box-shadow 0.3s; text-align: left;}
#activity .sec03 .flex .card-link:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);}
#activity .sec03 .flex .card-link figure { margin: 0 0 12px;}
#activity .sec03 .flex .card-content h5 { font-size: 30px; margin: 0 0 8px;}
#activity .sec03 .flex .card-content p { font-size: 18px; font-weight: bold; margin: 0 0 25px;}
#activity .sec03 .flex .card-link .tags { list-style: none; display: flex; flex-wrap: wrap; padding: 0; margin: 0 0 15px;}
#activity .sec03 .flex .card-link .tags li { font-size: 14px; padding: 5px 15px; margin-right: 15px; margin-bottom: 10px; color: #009C93; border: 1px solid #009C93;}
#activity .sec03 .flex .card-link .more { position: relative; color: #009C93; font-size: 18px; font-weight: bold; text-align: right; padding-right: 1.5em;}
#activity .sec03 .flex .card-link .more::after { display: block; content: ""; position: absolute; width: 9.5px; height: 9.5px; border-top: 1px solid #009C93; border-right: 1px solid #009C93; right: 15px; top: 50%; transform: translateY(-50%) rotate(45deg); -webkit-transform: translateY(-50%)  rotate(45deg);}


#partner { background: url(../product/category/other/co-creation/co-creation-23.jpg) no-repeat center center; background-size: cover; padding: 80px 0; color: #fff; }
#partner h3 { font-size: 50px; margin-bottom: 55px; text-align: center;}
#partner h3::after { content: ""; display: block; width: 58px; height: 8px; background: #fff; margin: 11px auto 0;}

#partner .wrap { display: flex; align-items: stretch; position: relative; }

#partner .text { width: 41%; }
#partner .text p { font-size: 18px; color: #fff; font-weight: bold; margin-bottom: 40px;}

#partner .partner-button { display: inline-block; text-align: center; width: 480px; background: #fff url(../product/category/other/co-creation/co-creation-22.svg) no-repeat left 50px center / 40px; font-size: 24px; color: #000; padding: 26px 0 26px 25px; border-radius: 50px; font-weight: bold; text-decoration: none; }
#partner .partner-button::hover { color: #000;}
#partner .image-area { width: 50vw; height: 489px; position: absolute; right: 0; top: 0; bottom: 0; z-index: 0; }
#partner .image-area img { width: 100%; height: 100%; object-fit: cover; }



@media only screen and (max-width: 768px) {
	.inner { width: 90%; margin: 0 auto; padding: 0;}
	.PC { display: none;}
	.SP { display: block;}
	
	
	/*-- fv --*/
	#fv { color: #fff; background: url(../product/category/other/co-creation/co-creation-05.jpg) no-repeat center top / cover; padding: 45px 0 56px;}
	#fv h2 { font-size: 28px; margin-bottom: 15px;}
	#fv h2 span { font-size: 13px; margin-bottom: 5px;}
	#fv p { font-size: 13px; line-height: 160%; margin-bottom: 10px;}
	#fv .map { width: 95%; height: auto; margin: 0 0 0 auto;  position: relative; top: auto; left: auto;}
	
	/*-- about --*/
	#about { padding: 45px 0 50px; background: url(../product/category/other/co-creation/co-creation-09.jpg) no-repeat center top / cover;}
	#about .whitebox { width: 90%; background-color: transparent; margin: 0 auto; padding: 0 0 25px; }
	#about .whitebox h3 { font-size: 21px; margin-bottom: 15px;}
	#about .whitebox h3::after { content: ""; display: block; width: 40px; height: 3px; background: #009C93; margin: 7px auto 0;}
	#about .whitebox h4 { font-size: 17px; margin-bottom: 20px;}
	#about .whitebox p { font-size: 12px; margin-bottom: 60px; text-align: left;}
	#about .whitebox img { margin: 0 auto;}
	#about .slider-track { animation-duration: 10s; }
	#about .slider-track img { width: 120px; height: auto; }
	
	/*-- activity --*/
	#activity { }
	#activity .title { font-size: 17px; width: 250px; padding: 9px 0 10px;clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);}
	
	#activity .sec01 { padding: 58px 0 36px; background: url(../product/category/other/co-creation/co-creation-20.jpg) no-repeat center top / cover;}
	#activity .sec01 .s_inner { width: 90%; margin: 0 auto;}
	#activity .sec01 h3 { font-size: 21px; margin-bottom: 27px;}
	#activity .sec01 h3::after { content: ""; display: block; width: 40px; height: 3px; background: #009C93; margin: 7px auto 0;}
	#activity .sec01 p { font-size: 13px; margin-bottom: 30px; text-align: left;}
	#activity .sec01 .title { font-size: 17px; margin-bottom: 30px; text-align: center;}
	#activity .sec01 .item_list { display: block;}
	#activity .sec01 .item { width: 100%; padding: 28px 24px 34px; margin-bottom: 14px;}
	#activity .sec01 .item img { width: 120px; height: auto; margin-bottom: 16px; }
	#activity .sec01 .item h5 { font-size: 23px; line-height: 100%; margin: 0 0 30px;}
	#activity .sec01 .item .flex { display: flex; justify-content: space-between; align-items: flex-end;}
	#activity .sec01 .item ul { list-style: none; padding: 0; margin: 0 0; text-align: left; }
	#activity .sec01 .item ul li { font-size: 13px; font-weight: bold; line-height: 100%; padding-left: 16px; margin-top: 15px; position: relative; }
	#activity .sec01 .item ul li::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); background: #009C93;  }
	#activity .sec01 .item p { font-size: 15px; font-weight: bold; margin: 0; line-height: 100%; text-align: right;}
	
	
	#activity .sec02 { padding: 40px 0;}
	#activity .sec02 .title { margin-bottom: 20px;}
	#activity .sec02 .theme-list { margin: 0 0 20px;}
	#activity .sec02 .theme-list dt { font-size: 19px;  padding: 16px 0;}
	#activity .sec02 .theme-list dd { padding: 15px 15px 30px; margin: 0;}
	#activity .sec02 .theme-list dd ul { display: block; }
	#activity .sec02 .theme-list dd ul li { width: 100%; font-size: 16px; font-weight: bold; padding-left: 30px; margin-top: 15px;}
	#activity .sec02 .theme-list dd ul li::before { position: absolute; left: 0; top: 0; content: ""; display: block; width: 22px; height: 20px; background: url(../product/category/other/co-creation/co-creation-16.svg) no-repeat left top / 100%;}
	
	#activity .sec03 { padding: 30px 0 40px;}
	#activity .sec03 .title { margin-bottom: 30px;}
	#activity .sec03 .flex { display: block;}
	#activity .sec03 .flex .card-link { width: 100%; padding: 14px 16px 20px; margin-bottom: 20px;}
	#activity .sec03 .flex .card-link figure { margin: 0 0 12px;}
	#activity .sec03 .flex .card-content h5 { font-size: 20px; margin: 0 0 20px; text-align: center;}
	#activity .sec03 .flex .card-content p { font-size: 15px; margin: 0 0 20px;}
	#activity .sec03 .flex .card-link .tags { list-style: none; display: flex; flex-wrap: wrap; padding: 0; margin: 0 0 5px;}
	#activity .sec03 .flex .card-link .tags li { font-size: 13px; padding: 5px 15px; margin-right: 10px; margin-bottom: 10px; color: #009C93; border: 1px solid #009C93;}
	#activity .sec03 .flex .card-link .more { font-size: 13px; padding-right: 2em;}
	#activity .sec03 .flex .card-link .more::after { width: 6.5px; height: 6.5px; right: 15px;}
	
	#partner { background: url(../product/category/other/co-creation/co-creation-24.jpg) no-repeat center center; background-size: cover; padding: 60px 0 50px;}
	#partner h3 { font-size: 20px; margin-bottom: 30px;}
	#partner h3::after { width: 40px; height: 3px; margin: 12px auto 0;}
	#partner .wrap { flex-direction: column-reverse; }
	#partner .text { width: 100%; }
	#partner .text p { font-size: 13px; margin-bottom: 40px;}
	#partner .partner-button { width: 100%; background: #fff url(../product/category/other/co-creation/co-creation-22.svg) no-repeat left 30px center / 28px; font-size: 16px; padding: 20px 0 20px 20px;}

	#partner .image-area { position: static; width: 90%; height: auto; margin: 0 auto 30px;}
	
}