section[id^="future-"] {
	position: relative;
	background-image: url(/assets/image/jp/ja/company/group/hfd/60th/future/sub/p-future-sub-bg.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	padding: 0 1rem;
  }
  section#future-04 {
	background-image: url(/assets/image/jp/ja/company/group/hfd/60th/future/sub/p-future-sub-bg02.png);
	background-position: center;
  }
  div.bg + div {
	position: relative;
	z-index: 1;
  }
  section[id^="future-"] div.Container {
	padding: 100px 0 !important;
  }
  section[id^="future-"] div:has( > h3) {
	text-align: center;
  }
  section[id^="future-"] h3 {
	text-align: center;
	color: #000000;
	font-weight: 500;
	font-size: 2.5rem;
	line-height: 150%;
	margin-bottom: 60px !important;
	display: inline-block;
  }
  span.marker {
	text-decoration: underline;
	text-decoration-thickness: .5em;
	text-decoration-color: #FFF799;
	text-underline-offset: -.2em;
	text-decoration-skip-ink: none;
  }
  
  div.contents-box {
	position: relative;
  }
  div.contents-box p {
	line-height: 200%;
	font-weight: 500;
	max-width: 744px;
	margin-inline: auto;
	background: #fff;
	padding: 46px 54px;
	filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.07));
	border-radius: 10px;
  position: relative;
  }
  div.contents-box p:after {
	content: '';
	position: absolute;
	width: 66px;
	height: 58px;
	clip-path: polygon(0% 30%, 0% 100%, 50% 30%);
	background-color: #FFF;
	bottom: -35px;
	left: 30%;
	z-index: 10;
	border-radius: 9%;
  }
  #future-03 div.contents-box p:after {
	clip-path: polygon(0% 30%, 90% 100%, 70% 30%);
	right: 30%;
	left: unset;
  }
  #future-04 div.contents-box p:after {
	bottom: 60px;
	left: -16px;
	transform: rotate(45deg);
  }
  #future-06 div.contents-box p:after {
	clip-path: polygon(0% 30%, 90% 100%, 70% 30%);
	right: 30%;
	left: unset;
  }
  
  div.contents-box .grid.--pic {
	display: grid;
	grid-template-columns: 1fr 2fr;
		justify-items: center;
		align-items: flex-start;
  }
  #future-03 div.contents-box .grid.--pic,
  #future-06 div.contents-box .grid.--pic {
	grid-template-columns: 2fr 1fr;
		grid-template-areas:
		"l r";
  }
  #future-03 .pic-l,
  #future-06 .pic-l { 
	grid-area: r; }
  
  #future-03 .pic-r, 
  #future-06 .pic-r { 
	grid-area: l; 
  }
  
  div.contents-box .grid.--pic .pic-l {
	margin-left: auto;
	padding-top: 2rem;
  }
  #future-03 div.contents-box .grid.--pic .pic-l,
  #future-06 div.contents-box .grid.--pic .pic-l {
	margin-right: auto;
	margin-left: unset;
  }
  .pic-r {
	max-width: 100%;
	width: min(600px);
  }
  
  div.contents-box > img {
	position: absolute;
	z-index: -1;
	position: absolute;
	width: min(800px, 65%);
	right: 0;
	transform: translate(0px, 0px);
  }
  section#future-03 div.contents-box > img {
	width: min(660px, 65%);
	left: clamp(0rem, -18.935rem + 39.45vw, 12.5rem);
  }
	section#future-06 div.contents-box > img {
	  width: min(660px, 60%);
	  left: clamp(0rem, -18.935rem + 39.45vw, 12.5rem);
  
  }
  div.contents-box .flex {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: clamp(0.5rem, -2.814rem + 6.9vw, 2.688rem);
  }
  div.contents-box .flex img {
	min-width: 0;
  }
  div.contents-box .flex p {
	margin: 0;
	position: relative;
	flex-basis: 52%;
  }
  div.contents-box .flex p > span {
	display: block;
	max-width: min(551px, 86%);
  }
  div.contents-box .flex p::before {
	content: "";
	position: absolute;
	background-image: url(/assets/image/jp/ja/company/group/hfd/60th/future/sub/p-future-04-pic02.png);
	background-repeat: no-repeat;
	background-size: contain;
	width: clamp(6.25rem, 1.516rem + 9.86vw, 9.375rem);
	padding-top: 24%;
	right: 0;
	bottom: 0;
  }
  div:has( > img.comic) {
	text-align: center;
	margin: 0 1rem;
  }
  img.comic {
	max-width: 100%;
  }
  
  section#future-02.--en {
	min-height: 1250px;
  }
  section#future-02.--en div.contents-box::before {
	top: 300px;
  }
  section#future-03.--en {
	min-height: 1200px;
  }
  section#future-03.--en div.contents-box::before {
	top: 300px;
  }
  
  section#future-05.--en div.contents-box::before {
	top: 450px;
  }
  section#future-06.--en {
	min-height: 1500px;
  }
  section#future-06.--en div.contents-box::before {
	top: 650px;
  }
  
  @media screen and (max-width: 767px) {
	:root {
	  font-size: 14px;
	}
	section[id^="future-"] h3 {
	  font-size: 1.5rem;
	}
	div.contents-box::before {
	  width: 30vw;
	  left: 3%;
  }
  div.contents-box p {
	padding: 8px;
  }
  section[id^="future-"] div.Container {
	padding: 80px 0 !important;
  }
  section[id^="future-"] div.contents-box > img {
	width: 100vw !important;
	bottom: 0rem;
	transform: translate(0, 100vw);
	right: unset;
  }
  section[id^="future-01"] div.contents-box > img {
	bottom: -2rem;
  }
  section[id^="future-02"] div.contents-box > img,
  section[id^="future-03"] div.contents-box > img {
	bottom: -5rem;
  }
  section[id^="future-06"] div.contents-box > img {
	bottom: -6rem;
  }
  section[id^="future-"] div.contents-box::before {
	bottom: 0;
	left: unset !important;
	top: unset !important;
	transform: translate(50px, 300px);
  }
  div.contents-box .grid.--pic {
	grid-template-columns: 1fr;
  }
  #future-03 div.contents-box .grid.--pic,
  #future-06 div.contents-box .grid.--pic {
	grid-template-columns: 1fr;
	grid-template-areas: 
	  "r"
	  "l" ;
  }
  div.contents-box .grid.--pic .pic-l {
	margin-right: auto;
	margin-left: unset;
  }
  #future-03 div.contents-box .grid.--pic .pic-l,
  #future-06 div.contents-box .grid.--pic .pic-l {
	margin-right: unset;
	margin-left: auto;
  }
  div.contents-box .grid.--pic .pic-l img {
	width: 30vw;
  }
  div:has( > img.comic) {
	/* text-align: center; */
	margin: 0;
  }
  div.contents-box .flex img {
	width: 30vw;
  }
  div.contents-box .flex p {
	flex-basis: 67%;
  }
  div.contents-box .flex {
	align-items: flex-end;
  }
  div.contents-box .flex p > span {
	max-width: 100%;
  }
  section#future-04.--en div.contents-box p {
	flex-basis: 100%;
  }
  }