@charset "utf-8";

/* ────────────────────────────────────────────

min-width: 970px 

──────────────────────────────────────────── */

html {
	font-size: 62.5%; /* font-sizeは16pxの62.5%の10px */
}
body {
	font-size: 1.6rem; /*font-size : 16px と同等*/
}
@media screen and (min-width:1236px) {
	body {
		overflow-x: hidden;
	}
}
p a {
  text-decoration: underline;
}
p a:hover {
  text-decoration: none;
}

/* general framework */
.wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
	background-image: url(/blue-carbon/assets/img/subpage/common/bg_seaweed1.png), 
  url(/blue-carbon/assets/img/subpage/common/bg_seaweed2.png), 
  url(/blue-carbon/assets/img/subpage/common/bg_seaweed3.png), 
  url(/blue-carbon/assets/img/subpage/common/bg_seaweed4.png), 
  url(/blue-carbon/assets/img/subpage/common/bg_seaweed5.png);
	background-repeat: no-repeat;
	background-position: -250px 1067px, calc(100% + 164px) 2500px, left 3500px, calc(100% + 255px) 5421px, left 6720px;
  background-color: rgba(0, 143, 205, 0.95);
  background-blend-mode: hue;
}
.content {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1220px;
	padding: 0 10px;
	margin: 0 auto;
}
.container {
	max-width: 1200px;
	margin: 0 auto 150px;
}
.subpagesHeadWrap {
  margin: 0 auto 50px;
}
.subpagesHeadImg {
  position: relative;
  width: 100%;
  height: 160px;
  background: #C9F1FF;
  z-index: 1;
  overflow: hidden;
}
.subpagesHeadImg::before {
  content:"";
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 80px;
  background: #9BE3FD;
  z-index: 1;
}
.subpagesHeadImg:after {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: -30px;
  background: url(/blue-carbon/assets/img/subpage/common/corals.png) center center no-repeat;
  background-size: contain;
  height: 108px;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
/* 魚 */
.fish {
	position: absolute;
	opacity: 0;
  z-index: 1;
}
.fish img {
	animation: dance1 3s ease-in-out infinite;
}

.fish.move1 { bottom: 100px; left: 100px; animation: swim1 10s ease-in-out 3s infinite;}
.fish.move2 { top: 100px; left: 300px; animation: swim2 12s ease-in-out 2s infinite;}
@keyframes swim1 {
	0% {transform: translate(50vw, 0); opacity: 0;}
	100% {transform: translate(-50vw, 0); opacity: 1;}
}
@keyframes swim2 {
	0% {transform: translate(50vw, 0); opacity: 0;}
	100% {transform: translate(-50vw, 0); opacity: 1;}
}
@keyframes dance1 {
	50% {transform: translate(0, -20px);}
	0%, 100% {transform: translate(0, 0);}
}

.bubble {
	position: absolute;
  opacity: 0;
	z-index: 1;
}
.bubble.move1 { bottom: -100px; left: 40%; animation: rise1 5s ease-in-out 2s infinite;}
@keyframes rise1 {
	0% {transform: translate(-50%, 0); opacity: 0;}
	100% {transform: translate(-50%, -300px); opacity: 1;}
}

.subpagesContents {
  width: 100%;
  background: #D9F5FF;
  border-radius: 60px;
  padding: 80px 100px;
  margin-bottom: 120px;
}
.subpagesContents.report {
  padding: 0 100px 80px;
}
.subpagesBlock {
  margin-bottom: 80px;
}
.subpagesContents .subpagesBlock:last-child {
  margin: 0;
}
.subpagesBottomLink {
  width: fit-content;
  margin: 0 auto 120px;
}
.subpagesBottomLink:not(:has(+ .subpagesSnsLinks)) {
  margin: 0 auto 360px;
}
.subpagesBottomLink a {
  display: block;
  position: relative;
  font-size: 20px;
  font-weight: 900;
  color: #015D84;
  line-height: 150%;
  background: #D9F5FF;
  border: 3px solid #015D84;
  border-radius: 12px 40px 40px 40px;
  padding: 20px 123px 20px 57px;
  overflow: hidden;
  transition: all .2s ease;
}
.subpagesBottomLink a::after {
  content: "";
  position: absolute;
  right: 23px;
  bottom: -15px;
  width: 60px;
  height: 70px;
  background: url(/blue-carbon/assets/img/subpage/common/subpages_link.svg) no-repeat;
}
.subpagesBottomLink a:hover {
  color: #D9F5FF;
  background: #015D84;
  border: 3px solid #D9F5FF;
}
.subpagesSnsLinks {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-bottom: 360px;
}
.subpagesSnsLinks > div {
  width: 50px;
  height: 50px;
}
.subpagesLeadImg {
  margin: 40px 0 0;
}


/* テキスト */
.subpagesContents p {
  font-size: 16px;
  color: #015D84;
  line-height: 180%;
  margin-bottom: 60px;
  font-weight: 500;
}
.subpagesContents p.mb0 {
  margin-bottom: 0;
}
.subpagesContents p.mb30 {
  margin-bottom: 30px;
}
.subpagesContents p.bold {
  font-weight: 600;
}
.subpagesContents p.center {
  text-align: center;
}
.subpagesContents p.subpagesCaption {
  margin-top: 20px;
}
.subpagesContents p.subpagesTxtA {
  font-size: 20px;
}
.subpagesContents p.subpagesTxtB {
  font-size: 14px;
}
.subpagesContents p.subpagesTxtC {
  font-size: 24px;
  margin: 23px 0;
}
.subpagesContents p.subpagesTxtD {
  font-size: 16px;
  text-align: center;
}
.subpagesContents p.subpagesTxtE {
  font-size: 24px;
  font-weight: 900;
  line-height: 150%;
  color: #008FCD;
  text-align: center;
  margin: 0;
}
.subpagesContents p.subpagesLinkTxt {
  width: fit-content;
  margin: 60px auto 0;
}
.subpagesContents p.subpagesLinkTxt a {
  display: block;
  position: relative;
  font-size: 18px;
  font-weight: 900;
  color: #015D84;
  line-height: 150%;
  background: #D9F5FF;
  border: 3px solid #015D84;
  border-radius: 999px;
  padding: 15px 80px 15px 30px;
  overflow: hidden;
  text-decoration: none;
  transition: all .2s ease;
}
.subpagesContents p.subpagesLinkTxt a::after {
  content: "";
  position: absolute;
  right: 27px;
  bottom: -11px;
  width: 44px;
  height: 51px;
  background: url(/blue-carbon/assets/img/subpage/common/subpages_link.svg) no-repeat;
  background-size: contain;
}
.subpagesContents p.subpagesLinkTxt a:hover {
  color: #D9F5FF;
  background: #015D84;
}
.subpagesContents p.subpagesLeadTxt {
  font-size: 20px;
  font-weight: 600;
  line-height: 180%;
  text-align: center;
  margin: 0;
}


/* タイトル */
.subpagesMainTtl {
  position: relative;
  font-size: 42px;
  font-weight: 900;
  color: #fff;
  line-height: 150%;
  text-align: center;
  z-index: 1;
  margin-top: 80px;
}
.subpagesMainTtl span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  font-size: 96px;
  font-weight: 900;
  color: #0085BE;
  z-index: -1;
  white-space: nowrap;
}
.subpagesLeadTtl {
  width: 100%;
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  text-align: center;
  background: #015D84;
  padding: 25px;
  margin: 0 auto 40px;
}
.subpagesTtlA {
  font-size: 32px;
  font-weight: 900;
  line-height: 145%;
  color: #015D84;
  text-align: center;
  margin-bottom: 50px;
}
.subpagesTtlA span {
  font-size: 24px;
  font-weight: 600;
  line-height: 200%;
}
.subpagesTtlB {
  font-size: 24px;
  font-weight: 900;
  line-height: 150%;
  color: #015D84;
  text-align: center;
  margin-bottom: 30px;
}
.subpagesTtlC {
  font-size: 24px;
  font-weight: 900;
  line-height: 150%;
  color: #015D84;
  text-align: left;
  margin-top: 60px;
  margin-bottom: 20px;
}
.subpagesTtlD {
  color: #008FCD;
  font-size: 20px;
  font-weight: 900;
  line-height: 150%;
  margin-bottom: 1em;
}
.subpagesFaqTtl {
  font-size: 36px;
  font-weight: 900;
  color: #015D84;
  line-height: 145%;
  text-align: center;
  margin: 0 auto 50px;
}


/* 下層ページ共通レイアウト */
.subpagesFlexA {
  display: flex;
  justify-content: space-between;
  gap: 5%;
}
.subpagesFlexA .txtColumn {
  width: 55%;
}
.subpagesFlexA .imgColumn {
  position: relative;
  width: 36%;
}
.subpagesFlexA .imgColumn .subImg {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateX(-43%);
  max-width: 100%;
}
.subpagesFlexB {
  display: flex;
  border: 2px solid #015D84;
  margin: 20px 0;
}
.subpagesFlexB > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 32px 26px 38px;
}
.subpagesFlexB > div:not(:last-child) {
  border-right: 2px solid #015D84;
}
.subpagesFlexB .boxTtl {
  font-size: 24px;
  font-weight: 900;
  line-height: 150%;
  color: #015D84;
}
.subpagesFlexB p {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 0;
}
.subpagesFlexC {
  display: flex;
  gap: 55px;
}
.subpagesFlexC > div:first-child {
  width: 50%;
}
.subpagesFlexC  > div:last-child {
  width: 50%;
}
.subpagesFlexC .txtColumn p {
  margin-bottom: 30px;
}

.subpagesImgFlexA {
  display: flex;
  gap: 40px;
  margin: 30px 0;
}
.subpagesImgFlexA .imgColumn .columnCaption {
  font-size: 20px;
  font-weight: 900;
  line-height: 150%;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 0;
}
.subpagesImgFlexB {
  display: flex;
  gap: 70px;
  margin: 40px 0;
}
.subpagesImgFlexB > div {
  position: relative;
  border: 2px solid #015D84;
  border-radius: 21px;
}
.subpagesImgFlexB > div img {
  border-radius: 20px 20px 0 0;
}
.subpagesImgFlexB > div figcaption {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 77px;
  font-size: 24px;
  font-weight: 600;
  color: #015D84;
  background: #fff;
  border-radius: 0 0 21px 21px;
}
.subpagesImgFlexB.separatorPlus > div:not(:last-child)::after,
.subpagesImgFlexB.separatorPlus > div:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -39px;
  width: 5px;
  height: 28px;
  background: #015D84;
}
.subpagesImgFlexB.separatorPlus > div:not(:last-child)::before {
  transform: translateY(-50%) rotate(90deg);
}
.subpagesImgFlexB.separatorPlus > div:not(:last-child)::after {
  transform: translateY(-50%);
}
.subpagesImgFlexB.separatorArrow > div:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -51px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
  border-left: 25px solid #008FCD;
  border-right: 0;
}
.subpagesImgFlexB.separatorArrow > div:not(:last-child)::after {
  transform: translateY(-50%);
}

.subpagesFlowWrap {
  display: flex;
  border: 2px solid #015D84;
  margin-bottom: 50px;
}
.subpagesFlowWrap > div {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 25px;
  font-size: 20px;
  font-weight: 600;
  color: #015D84;
  line-height: 150%;
}
.subpagesFlowWrap > div br {
  display: none;
}
.subpagesFlowWrap > div:not(:last-child)::before,
.subpagesFlowWrap > div:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -15px;
  width: 2px;
  height: 63%;
  background: #015D84;
}
.subpagesFlowWrap > div:not(:last-child)::before {
  transform-origin: bottom;
  bottom: 49%;
  transform: rotate(-35deg);
}
.subpagesFlowWrap > div:not(:last-child)::after {
  transform-origin: top;
  top: 50%;
  transform: rotate(35deg);
}
.subpagesFaqList {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.subpagesFaqList li {
  padding: 38px 43px;
  background: #fff;
  border-radius: 20px;
}
.subpagesFaqList li p {
  display: flex;
  gap: 15px;
  width: 100%;
  margin: 0;
}
.subpagesFaqList li p.q {
  align-items: flex-start;
  font-weight: 900;
  padding-bottom: 23px;
  border-bottom: 2px dotted #015D84;
}
.subpagesFaqList li p.q::before {
  content: "Q";
  font-size: 32px;
  font-weight: 900;
  color: #008FCD;
}
.subpagesFaqList li p.a {
  align-items: flex-start;
  font-weight: 900;
  padding-top: 23px;
}
.subpagesFaqList li p.a::before {
  content: "A";
  font-size: 32px;
  font-weight: 900;
  color: #FFA3A8;
}
.subpagesImgWrap {
  position: relative;
  margin: 50px 0;
}
.subpagesImgWhiteBox {
  position: relative;
  background: #fff;
  margin: 60px 0;
  padding: 42px 50px;
  border-radius: 30px;
}
.subpagesImgWhiteBox:has(.whiteBoxTtlA) {
  padding: 95px 42px 50px;
}
.subpagesImgWhiteBox .flexA {
  display: flex;
  gap: 50px;
}
.subpagesImgWhiteBox .flexA > div:first-child {
  width: calc(61% - 25px);
}
.subpagesImgWhiteBox .flexA > div:last-child {
  width: calc(39% - 25px);
}
.subpagesImgWhiteBox .flexB {
  display: flex;
  gap: 82px;
}
.subpagesImgWhiteBox .flexB > div {
  width: 50%;
  text-align: center;
}
.subpagesImgWhiteBox .flexC {
  display: flex;
  justify-content: center;
  gap: 50px;
}
.subpagesImgWhiteBox .flexC > div:first-child {
  width: 45%;
}
.subpagesImgWhiteBox .flexC > div:last-child {
  width: 55%;
}
.subpagesImgWhiteBox .flexD {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 82px;
}
.subpagesImgWhiteBox .flexD > div {
  width: fit-content;
  text-align: center;
}
.subpagesImgWhiteBox .whiteBoxTtlA {
  position: absolute;
  top: 25px;
  font-size: 24px;
  font-weight: 900;
  color: #015D84;
  line-height: 150%;
  margin: 0;
}
.subpagesImgWhiteBox .whiteBoxTtlA::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -12px;
  width: 100%;
  height: 6px;
  border-radius: 100vmax;
  background: #008FCD;
}
.subpagesImgWhiteBox .whiteBoxTtlB {
  position: absolute;
  top: 0;
  left: 45px;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  line-height: 150%;
  text-align: center;
  margin: 0;
  padding: 15px 0;
  width: 305px;
  background: #015D84;
  border-radius: 0 0 30px 30px;
}
.subpagesImgWhiteBox .imgTxtA {
  font-size: 24px;
  font-weight: 600;
  color: #008FCD;
  line-height: 150%;
  text-align: center;
  margin-bottom: 25px;
}
.subpagesImgWhiteBox .flexA .imgTxtA,
.subpagesImgWhiteBox .flexB .imgTxtA,
.subpagesImgWhiteBox .flexC .imgTxtA {
  font-size: 20px;
  text-align: left;
}
.subpagesImgWhiteBox .imgTxtB {
  width: fit-content;
  min-width: 385px;
  font-size: 20px;
  font-weight: 600;
  color: #FFF;
  line-height: 150%;
  text-align: center;
  margin: 0 auto 25px;
  padding: 5px 52px;
  background: #008FCD;
  border-radius: 100vmax;
}
.subpagesImgWhiteBox .flexA .imgTxtB,
.subpagesImgWhiteBox .flexB .imgTxtB,
.subpagesImgWhiteBox .flexC .imgTxtB {
  min-width: 135px;
  font-size: 20px;
  margin: 0 auto 25px 0;
  padding: 5px 28px;
}
.subpagesImgWhiteBox .imgTxtC {
  font-size: 24px;
  font-weight: 600;
  line-height: 150%;
  text-align: center;
  margin-bottom: 25px;
}
.subpagesImgWhiteBox .flexA .imgTxtC,
.subpagesImgWhiteBox .flexB .imgTxtC,
.subpagesImgWhiteBox .flexC .imgTxtC,
.subpagesImgWhiteBox .flexD .imgTxtC {
  margin-bottom: 12px;
}
.subpagesImgWhiteBox .imgTxtD {
  font-size: 20px;
  font-weight: 600;
  line-height: 150%;
  text-align: center;
  margin-bottom: 25px;
}

.subpagesImgWhiteBox .flowColumn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 46px;
}
.subpagesImgWhiteBox .flowColumn > div {
  position: relative;
  width: 100%;
  max-width: 300px;
  border: 1px solid #008FCD;
  font-size: 24px;
  font-weight: 900;
  color: #015D84;
  line-height: 150%;
  text-align: center;
  padding: 6px 0;
}
.subpagesImgWhiteBox .flowColumn > div:not(:last-child)::after {
  content:"";
  position: absolute;
  left: 50%;
  bottom: -38px;
  transform: translateX(-50%);
  display: inline-block;
  width: 0;
  height: 0;
  border-right: 16px solid transparent;
  border-left: 16px solid transparent;
  border-top: 28px solid #008FCD;
  border-bottom: 0;
}
.subpagesImgWhiteBox .flowColumn > div.last {
  font-size: 20px;
  line-height: 180%;
  font-weight: 600;
  color: #fff;
  margin-top: 17px;
  background: #015D84;
  border-radius: 8px;
}


/* 活動一覧 */
.activityWrap {
  width: 100%;
  max-width: 875px;
  margin: 50px auto;
}
.activityList {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.activityList li {
  display: flex;
  justify-content: space-between;
  background: #fff;
  border-radius: 20px;
}
.activityList li .paddingArea {
  width: 480px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px 40px;
}
.activityList li .paddingArea p {
  margin-bottom: 0;
}
.activityList li .paddingArea p.date {
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 180%;
}
.activityList li .activityImg {
  width: calc(100% - 480px);
}
.activityList li.new .paddingArea p.date::before {
  content: "NEW";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 24px;
  font-size: 14px;
  color: #fff;
  line-height: 150%;
  background: #ED6067;
  margin-right: 10px;
}
.activityList li .paddingArea p.cityName {
  font-size: 24px;
  font-weight: 900;
  line-height: 150%;
  margin-bottom: 10px;
}
.activityList li .paddingArea p.activities {
  font-size: 16px;
  font-weight: 600;
  line-height: 180%;
}
.activityList li .paddingArea .activityLink {
  width: 100%;
  max-width: 225px;
  margin: 0 auto 0 0;
}
.activityList li .paddingArea .activityLink a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-weight: 600;
  line-height: 180%;
  color: #015D84;
  padding: 6px 0;
  border: 1px solid #015D84;
  border-radius: 100vmax;
  transition: all .2s ease;
}
.activityList li .paddingArea .activityLink a:hover {
  color: #FFF;
  background: #015D84;
}
.activityList li img {
  border-radius: 0 20px 20px 0;
}
.activityList li .paddingArea .activityLink .comingSoon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-weight: 600;
  line-height: 180%;
  color: #fff;
  padding: 6px 0;
  border: 1px solid #683C18;
  background: #F79646;
  border-radius: 100vmax;
  transition: all .2s ease;
}


/* 取り組みレポート */
.subpagesReportHeadBlock {
  width: calc(100% + 200px);
  border: 8px solid #D9F5FF;
  background: #015D84;
  border-radius: 60px 60px 0 0;
  margin-left: -100px;
  margin-bottom: 80px;
  padding: 40px 0;
}
.subpagesReportHeadBlock .reportHeadTtl {
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  line-height: 150%;
  text-align: center;
  margin-bottom: 15px;
}
.subpagesReportHeadBlock p.reportHeadTxt {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  line-height: 180%;
  text-align: center;
  margin-bottom: 0;
}

.subpagesActivityData {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px;
  border: 2px solid #015D84;
  padding: 30px;
}
.subpagesActivityData dt {
  width: 120px;
  font-size: 14px;
  color: #fff;
  line-height: 180%;
  text-align: center;
  background: #015D84;
  padding: 4px 0;
}
.subpagesActivityData dd {
  width: calc(100% - 120px - 18px);
  font-size: 16px;
  font-weight: 500;
  color: #015D84;
  line-height: 180%;
  padding: 2px 0;
}
.subpagesFieldVoices {
  display: flex;
  align-items: center;
}
.subpagesFieldVoices + .subpagesFieldVoices {
  margin-top: 30px;
}
.subpagesFieldVoices .icon {
  width: 100px;
}
.subpagesFieldVoices .icon figcaption {
  font-size: 16px;
  font-weight: 900;
  color: #008FCD;
  line-height: 150%;
  text-align: center;
  margin-top: 7px;
}
.subpagesFieldVoices .voiceBubble {
  display: flex;
  flex-direction: column;
  position: relative;
  width: calc(100% - 122px);
  min-height: 125px;
  background: #fff;
  border-radius: 30px;
  margin-left: 22px;
  padding: 33px;
}
.subpagesFieldVoices .voiceBubble::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -20px;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-right: 28px solid #fff;
  border-left: 0;
  border-radius: 18px;
}
.subpagesFieldVoices .voiceBubble h4 {
  font-size: 16px;
  font-weight: 900;
  color: #008FCD;
  line-height: 1.5;
  margin-bottom: 1.5em;
}
.subpagesFieldVoices .voiceBubble p {
  margin: 0 0 1em 0;
}
.subpagesFieldVoices .voiceBubble p.name {
  font-weight: 900;
  color: #008FCD;
}
.subpagesFieldVoices .voiceBubble p:last-child {
  margin: 0 0 0 0;
}
.pcNone {
  display: none;
}