@charset "UTF-8";
body.modal-open {
  overflow: hidden;
}
#wrapper {
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
	padding-top: 0;
}
main {
	padding-top: 60px;
}
@media screen and (min-width: 767.99px) {
	main {
		padding-top: 80px;
	}
}	
.contents-body {
	max-width: 90%;
	padding: 0;
	box-sizing: border-box;
}
h2 {
	font-size: 2.6rem;
	font-weight: 400;
	letter-spacing: .1em;
	padding: 20px 0;
	text-align: center;
}
h3 {
	opacity: 0;
	font-size: 2rem;
	font-weight: 400;
	font-feature-settings: "palt";
	line-height: 1.6;
	letter-spacing: .1em;
	text-align: center;
	animation: .4s ease-in 1s forwards fadein;
}
@media screen and (min-width: 767.99px) {
	.contents-body {
		max-width: 1260px;
	}
	h2 {
		font-size: 3.6rem;
	}
	h3 {
		font-size: 3.0rem;
		line-height: 1.4;
		letter-spacing: .15em;
		margin-top: 32px;
		margin-bottom: 80px;
	}
}
@media screen and (min-width: 1259.99px) {
	.contents-body {
		max-width: 1260px;
	}
	h2 {
		font-size: 5.0rem;
	}
	h3 {
		font-size: 4.0rem;
	}
}
.fadein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1s;
}
.fadein-left{
		transform: translate(-80px,0);
}
.fadein-right{
		transform: translate(80px,0);
}
.fadein-bottom{
		transform: translate(0,40px);
}
.scrollin{
	opacity: 1 !important;
	transform: translate(0, 0) !important;
}
@media screen and (min-width: 767.99px) {
	.fadein-bottom{
			transform: translate(0,80px);
	}
}

.video {
	position: relative;
}
.video video {
	display: block;
	width: 100%;
	z-index: 1;
}
.video h1 img {
	filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1));
	animation: 0.6s 0ms video_txt;
}
.video .txt {
	position: absolute;
	bottom: -15%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 80%;
	z-index: 70;
}
.video_btn {
	position: relative;
	display: block;
	background: #ffe100;
	background-image: url("/share/img/arrow-link-gy.svg");
  background-repeat: no-repeat;
  background-position: center right 10%;
  background-size: 10px;
	border-radius: 60px;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .05em;
	margin-top: 8px;
	padding: 16px 40px;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 4px 0 0 #e5bd02;
	overflow: hidden;
}
.video_btn:before {
	position: absolute;
	content: '';
	display: inline-block;
	top: -180px;
	left: 0;
	width: 30px;
	height: 100%;
	background-color: #ffffff;
	transition: 150ms;
	animation: shine 8.5s ease-in-out infinite;
}
.video_btn:hover {
	text-decoration: none;
	color: #000;
	box-shadow: none;
	transform: translateY(4px);
}
@keyframes video_txt {
	0%   { opacity: 0; transform: scale(0.5, 0.5) translate(0%, 0%);}
	50%  { opacity: 1; transform: scale(1.2, 1.2) translate(0%, 0%);}
	70%  { opacity: 1; transform: scale(1.0, 1.0) translate(0%, 0%);}
	80%  { opacity: 1; transform: scale(1.1, 1.1) translate(0%, 0%);}
	100% { opacity: 1; transform: scale(1, 1) translate(0%, 0%);}
}
@keyframes shine {
	0%   { transform: scale(0) rotate(45deg); opacity: 0;}
	10%  { transform: scale(0) rotate(45deg); opacity: 0.5;}
	11%  { transform: scale(4) rotate(45deg); opacity: 1;}
	20%  { transform: scale(50) rotate(45deg); opacity: 0;}
	100% { transform: scale(0) rotate(45deg); opacity: 0;}
}
.video_gradation {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
}
.modal-iframe-contents {
	border-radius: 0;
	padding: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	overflow: visible;
}
.modal-iframe-contents > iframe {
	display: block;
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
	max-width: 960px;
}
.modal-close {
  position: absolute;
  right: 0;
  top: -40px;
  line-height: 0;
  pointer-events: auto;
  cursor: pointer;
  z-index: 100;
  width: 30px;
}
@media screen and (min-width: 767.99px) {
	.video {
		height: auto;
	}
	.video video {
		height: 100%;
	}
	.video .txt {
		bottom: -15%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: auto;
	}
	.video_btn {
		font-size: 2.2rem;
		padding: 24px 80px;
	}
}
@media screen and (min-width: 1179.99px) {
	.video .txt {
		bottom: 0%;
	}
}
@media screen and (min-width: 1999.99px) {
	.video .txt {
		bottom: 10%;
	}
}

/* eoは考える。*/
.contents-section.think {
	padding-top: 80px;
}
.think_intro {
	background-image: url(../img/bg_o.svg),url(../img/bg_think.svg);
	background-position: top 4% right -70%,bottom 0 left 0;
	background-size: 55%,100%;
	background-repeat: no-repeat,no-repeat;
}
.think_ttl_bg {
	background: url("../img/bg_think_ttl.png") 0 0 no-repeat;
	background-size: 80px;
	padding: 30px 40px;
}
.think_ill {
	margin-top: 40px;
	overflow: hidden;
}
.think_ill1 {
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-top: 40px;
	width: 60%;
	text-align: center;
}
.think_ill1_particle {
	position: absolute;
	top: 20%;
	left: 20%;
}
.think_ill2 {
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-top: 40px;
	width: 60%;
	text-align: center;
}
.think_ill2_particle {
	position: absolute;
	top: 20%;
	right: 10%;
}
.think_ill3 {
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-top: 20px;
	max-width: 85%;
	text-align: center;
}
.think_ill3_particle {
	position: absolute;
	top: 0%;
	left: 0%;
}
.think_msg {
	font-size: 2.4rem;
	font-weight: 400;
	font-feature-settings: "palt";
	letter-spacing: .1em;
	text-align: center;
}
.brandvision_ttl {
	padding-top: 40px;
	letter-spacing: 0;
}
.brandvision_ttl_bg {
	background: url("/brand/img/bg_brandvision_ttl.png") 0 0 no-repeat;
	background-size: 80px;
	padding: 30px 40px;
}
.brandstory {
	background: #ffe100;
	margin-top: -10px;
	padding-top: 40px;
	padding-bottom: 40px;
}
.brandstory_img {
	position: relative;
}
.brandstory_img:before {
    content: "";
    display: block;
    padding-top: 120%;
}
.brandstory_img1 {
	position: absolute;
	top: 0;
	left: 0;
	max-width: 45%;
	transition-delay: 0ms;
}
.brandstory_img2 {
	position: absolute;
	top: 0;
	right: 0;
	max-width: 45%;
	transition-delay: 100ms;
}
.brandstory_img3 {
	position: absolute;
	bottom: 0;
	left: 0;
	max-width: 45%;
	transition-delay: 200ms;
}
.brandstory_img4 {
	position: absolute;
	bottom: 0;
	right: 0;
	max-width: 45%;
	transition-delay: 300ms;
}
.brandstory_logo {
	opacity: 0;
	position: absolute;
	top: 44%;
	left: 32%;
	max-width: 40%;
	animation: .6s ease-out .2s forwards brandstory_logo;
}
@keyframes brandstory_logo {
	0%   { opacity: 0; transform: scale(0.5, 0.5);}
	50%  { opacity: 1; transform: scale(1.2, 1.2);}
	70%  { opacity: 1; transform: scale(1.0, 1.0);}
	80%  { opacity: 1; transform: scale(1.1, 1.1);}
	100% { opacity: 1; transform: scale(1.0, 1.0);}
}
.brandstory_particle {
	position: absolute;
	top: 50%;
	left: 44%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	max-width: 100%;
}
.brandstory_msg {
	padding-top: 40px;
	text-align: center;
}
@media screen and (min-width: 767.99px) {
	.contents-section.think {
		padding-top: 80px;
	}
	.think_ttl_bg {
		background-size: 108px;
		padding: 30px 60px;
	}
	.think_ill {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 0;
	}
	.think_ill1 {
		margin-left: 0;
		margin-right: 0;
		max-width: 24%;
	}
	.think_ill2 {
		margin-left: 0;
		margin-right: 0;
		max-width: 24%;
	}
	.think_ill:nth-of-type(2) img {
		order: 1;
	}
	.think_ill:nth-of-type(2) p {
		order: 2;
	}
	.think_ill3 {
		margin-left: 0;
		margin-right: 0;
		width: 40%;
	}
	.think_msg {
		font-size: 3.2rem;
		line-height: 1.4;
		margin-right: 40px;
		text-align: left;
	}
	.brandvision_ttl {
		margin: 0 auto;
		padding-top: 80px;
	}
	.brandvision_ttl_bg {
		background-size: 108px;
		padding: 30px 60px;
	}
	.brandstory .contents-body {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40px 20px;
	}
	.brandstory_img {
		flex-basis: 58%;
	}
	.brandstory_img:before {
    padding-top: 100%;
	}
	.brandstory_img1 {
		top: 0; left: 0; width: 40%;
	}
	.brandstory_img2 {
		top: 0; left: 50%; width: 40%;
	}
	.brandstory_img3 {
		top: 60%; left: 0; width: 40%;
	}
	.brandstory_img4 {
		top: 58%; left: 50%; width: 40%;
	}
	.brandstory_logo {
		top: 42%; left: 32%; max-width: 30%;
	}
	.brandstory_msg {
		font-size: 1.8rem;
		padding-top: 0;
		text-align: left;
	}
}

/* eoは変わる。*/
.change {
	background-image: url(../img/bg_o.svg);
	background-repeat: no-repeat;
	background-position: top 50% right 280%;
	background-size: 120%;
	overflow: hidden;
}
.change_ttl_bg {
	background: url("../img/bg_change_ttl.png") 0 0 no-repeat;
	background-size: 80px;
	padding: 30px 40px;
}
.change_logo {
	margin-top: 40px;
	overflow: hidden;
}
.change_logo-container {
	position: relative;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	width: 220px;
}
.change_logo-container:before {
	content: "";
	display: block;
	padding-top: 86%;
}
.change_logo_tagline1 {
	position: absolute;
	top: 31%; left: 14.6%; width: 15px;
	transition-delay: 0ms;
	animation: 6s 0ms infinite bounce;
}
.change_logo_tagline2 {
	position: absolute;
	top: 31%; left: 25.2%; width: 15px;
	transition-delay: 100ms;
	animation: 6s 100ms infinite bounce;
}
.change_logo_tagline3 {
	position: absolute;
	top: 30%; left: 36.2%; width: 16px;
	transition-delay: 200ms;
	animation: 6s 200ms infinite bounce;
}
.change_logo_tagline4 {
	position: absolute;
	top: 37.2%; left: 46%; width: 6px;
	transition-delay: 300ms;
	animation: 6s 300ms infinite bounce;
}
.change_logo_tagline5 {
	position: absolute;
	top: 30.2%; left: 53.5%; width: 19px;
	transition-delay: 400ms;
	animation: 6s 400ms infinite bounce;
}
.change_logo_tagline6 {
	position: absolute;
	top: 29.1%; left: 65.4%; width: 20px;
	transition-delay: 500ms;
	animation: 6s 500ms infinite bounce;
}
.change_logo_tagline7 {
	position: absolute;
	top: 30.2%; left: 76.8%; width: 18px;
	transition-delay: 600ms;
	animation: 6s 600ms infinite bounce;
}
.change_logo_tagline8 {
	position: absolute;
	top: 36.8%; left: 86.9%; width: 7px;
	transition-delay: 700ms;
	animation: 6s 700ms infinite bounce;
}
.change_logo_e {
	position: absolute;
	top: 48%; left: 19%; width: 62px;
	transition-delay: 1100ms;
}
.change_logo_o {
	position: absolute;
	top: 48%; left: 51.4%; width: 62px;
	transition-delay: 1300ms;
}
.change_logo-window {
	position: absolute;
	top: 0;
	left: 0;
}
.change_txt {
	position: relative;
	font-size: 1.4rem;
	text-align: left;
	z-index: 10;
}
.change_txt:first-of-type:after {
	content: "";
	display: block;
	position: absolute;
	top: 160px;
	left: 10%;
	border-top:1px solid #000000;
	width: 70px;
	transform: rotate(225deg);
}
.change_txt:last-of-type:before {
	content: "";
	display: block;
	position: absolute;
	top: -25px;
	right: 20%;
	border-top:1px solid #000000;
	width: 70px;
	transform: rotate(225deg);
}
.change_txt:last-of-type {
	text-align: right;
  transition-delay: 1s;
}
.change_txt:last-of-type p{
  display:inline-block;
  text-align:left;
}
.change_txt p span{
	font-size: 1.6rem;
  font-weight: 600;
}
.bg_change_window1 {
	position: absolute;
	top: 55%;
	left: -10%;
	width: 20%;
	animation: 8s 0.5ms alternate infinite windows;
}
.bg_change_window2 {
	position: absolute;
	top: 70%;
	left: -10%;
	width: 34%;
	animation: 10s 0ms alternate infinite windows;
}
.bg_change_window3 {
	position: absolute;
	top: 30%;
	right: 5%;
	width: 20%;
	animation: 6s 2ms alternate infinite windows;
}
.bg_change_window4 {
	position: absolute;
	top: 50%;
	right: -20%;
	width: 30%;
	animation: 8s 1ms alternate infinite windows;
}
@media screen and (min-width: 767.99px) {
	.change {
		background-position: top 55% right -80%;
		background-size: 60%;
	}
	.change_logo {
		margin-left: auto;
		margin-right: auto;
		padding: 0 20px;
		width: 90%;
	}
	.change_ttl_bg {
		background-size: 108px;
		padding: 30px 60px;
	}
	.change_logo-container {
		margin-top: 10px;
		width: 400px;
	}
	.change_logo_tagline1 {
		top: 35.6%; left: 24.8%; width: 20px;
	}
	.change_logo_tagline2 {
		top: 35.6%; left: 32.5%; width: 20px;
	}
	.change_logo_tagline3 {
		top: 34.9%; left: 40.5%; width: 21px;
	}
	.change_logo_tagline4 {
		top: 40%; left: 47.8%; width: 8px;
	}
	.change_logo_tagline5 {
		top: 35%; left: 53.6%; width: 25px;
	}
	.change_logo_tagline6 {
		top: 34.2%; left: 62.3%; width: 27px;
	}
	.change_logo_tagline7 {
		top: 34.8%; left: 70.9%; width: 24px;
	}
	.change_logo_tagline8 {
		top: 39.7%; left: 78.5%; width: 9px;
	}
	.change_logo_e  {
		top: 48%; left: 28%; width: 84px;
	}
	.change_logo_o {
		top: 47.9%; left: 51.9%; width: 84px;
	}
	.change_txt {
		font-size: 1.6rem;
		line-height: 2;
	}
	.change_txt:first-of-type:after {
		top: 225px;
		left: 12%;
		width: 100px;
	}
	.change_txt:last-of-type:before {
		top: -60px;
		left: 59%;
		width: 100px;
	}
	.change_txt p span {
		font-size: 1.8rem;
	}
	.bg_change_window1 {
		top: 55%;
		left: 13%;
		width: 10%;
	}
	.bg_change_window2 {
		top: 70%;
		left: 10%;
		width: 20%;
	}
	.bg_change_window3 {
		top: 36%;
		right: 30%;
		width: 8%;
	}
	.bg_change_window4 {
		top: 50%;
		right: 5%;
		width: 20%;
	}
}
@media screen and (min-width: 1179.99px) {
	.change_logo {
		width: 70%;
	}
	.change_txt:first-of-type:after {
		left: 26%;
	}
}	
@keyframes bounce {
	0%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
	2%  { transform: scale(1.5, 0.8) translate(0%, 0%); }
	4% { transform: scale(1.0, 1.0) translate(0%, 0%); }
	6% { transform: scale(0.8, 1.3) translate(0%, -70%); }
	8% { transform: scale(1.0, 1.0) translate(0%, -100%); }
	10% { transform: scale(1.0, 1.0) translate(0%, 0%); }
	100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
@keyframes windows {
	0%  { transform: scale(0.8, 0.8) translate(0%, 0%); }
	80% { transform: scale(1.0, 1.0) translate(0%, 0%); }
	100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

/* eoは進化する。*/
.evolve {
	position: relative;
	background: #f5f5f5;
}
.evolve_ttl_bg {
	background: url("../img/bg_evolve_ttl.png") 0 0 no-repeat;
	background-size: 80px;
	padding: 30px 40px;
}
.evolve_service {
	margin-top: 0;
	text-align: center;
	overflow: hidden;
}
.evolve_service-item {
	background: #ffffff url("../img/bg_evolve_simple.png") top -16% left -90% no-repeat;
	background-size: 70%;
	border-radius: 10px;
	margin-top: 32px;
	padding: 24px 16px;
}
.evolve_service-item:last-child {
	background: #ffffff url("../img/bg_evolve_eopointtank.png") top 70% right -150% no-repeat;
	background-size: 70%;
}
.evolve_service-item a {
	color: #000000;
	text-decoration: none;
}
.evolve_service-name {
	font-size: 2.6rem;
	font-weight: 400;
}
.evolve_simple,.evolve_eopointtank {
	width: 80%;
}
.evolve_simple-particle {
	position: absolute;
	top: 20%;
	left: 20%;
	z-index: 100;
}
.evolve_eopointtank-particle {
	position: absolute;
	top: 20%;
	left: 20%;
	z-index: 100;
}
.evolve_service-item p:last-of-type {
	margin-top: 24px;
	text-align: left;
}
.evolve_btn {
	display: block;
	background: #ffe100;
	background-image: url("/share/img/arrow-link-gy.svg");
  background-repeat: no-repeat;
  background-position: center right 16px;
  background-size: 10px;
	border-radius: 40px;
	font-weight: 600;
	margin-top: 16px;
	margin-left: auto;
	margin-right: auto;
	padding: 16px 32px;
	text-decoration: none;
	width: 100%;
}
.evolve_btn:hover {
	background: #fff07f;
	background-image: url("/share/img/arrow-link-gy.svg");
  background-repeat: no-repeat;
  background-position: center right 16px;
  background-size: 10px;
	color: #000000;
}
@media screen and (min-width: 767.99px) {
	.evolve_ttl_bg {
		background-size: 108px;
		padding: 30px 60px;
	}
	.evolve_service {
		display: flex;
		justify-content: center;
		margin-top: 40px;
		margin-left: 20px;
		margin-right: 20px;
	}
	.evolve_service-item {
		position: relative;
		margin-top: 0;
		margin-left: 3%;
		margin-right: 3%;
		padding: 40px 3%;
		flex-basis: 44%;
		max-width: 44%;
	}
	.evolve_service-name {
		font-size: 3.0rem;
	}
	.evolve_simple,.evolve_eopointtank {
		width: 60%;
	}
	.evolve_simple-particle {
		top: 20%;
		left: 20%;
	}
	.evolve_eopointtank-particle {
		top: 20%;
		left: 20%;
	}
	.evolve_btn {
		background-position: center right 8%;
		margin-top: 32px;
		padding: 16px 32px;
		width: 100%;
	}
	.evolve_btn:hover {
		background-position: center right 8%;
	}
}
@media screen and (min-width: 1259.99px) {
	.evolve_service-name {
		font-size: 3.6rem;
	}
	.evolve_btn {
		width: 80%;
	}
}


.inherit_ttl_bg {
	background: url("../img/bg_inherit_ttl.png") 0 0 no-repeat;
	background-size: 80px;
	padding: 30px 40px;
}
.inherit_service-bg {
	border: 2px solid #ffe100;
	border-radius: 10px;
	margin-top: 16px;
}
.inherit_service-logo {
	background: #ffe100;
	display: flex;
	align-items: center;
	min-height: 60px;
	margin-left: auto;
	margin-right: auto;
}
.inherit_service-logo picture {
	width: 100%;
}
.inherit_service-logo img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 30%;
}
.inherit_service-bg:nth-of-type(2) img {
	max-width: 40%;
}
.inherit_service-bg:nth-of-type(3) img {
	max-width: 54%;
}
.inherit_service-txt {
	padding: 16px 16px;
}
.inherit_btn-list {
	display: flex;
	flex-wrap: wrap;
}
.inherit_btn {
	position: relative;
	display: inline-block;
	background-image: url("/share/img/arrow-link-gy.svg");
  background-repeat: no-repeat;
  background-position: center right 12px;
  background-size: 8px;
	font-size: 1.4rem;
	font-weight: 600;
	padding: 0 24px 0 0;
	text-decoration: none;
}
.inherit_btn::after {
	position: absolute;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background: #000000;
	bottom: -1px;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform 0.3s;
}
.inherit_btn:hover {
	color: #000000;
}
.inherit_btn:hover::after {
	transform: scale(1, 1);
}
@media screen and (min-width: 767.99px) {
	.inherit_ttl_bg {
		background-size: 108px;
		padding: 30px 60px;
	}
	.inherit_service-bg {
		margin-top: 20px;
		margin-left: 20px;
		margin-right: 20px;
	}
	.inherit_service {
		display: flex;
	}
	.inherit_service-logo {
		border-top-left-radius: 6px;
		border-bottom-left-radius: 6px;
		display: flex;
		flex-basis: 30%;
		max-width: 30%;
		padding: 24px 0;
	}
	.inherit_service-logo img {
		align-items: center;
		max-width: 40%;
	}
	.inherit_service-bg:nth-of-type(2) img {
		max-width: 51%;
	}
	.inherit_service-bg:nth-of-type(3) img {
		max-width: 40%;
	}
	.inherit_service-txt {
		align-content: center;
		flex-basis: 70%;
		max-width: 70%;
		padding: 24px 24px;
	}
	.inherit_btn-list {
		display: flex;
		flex-wrap: wrap;
	}
	.inherit_btn {
		font-size: 1.6rem;
		margin-right: 20px;
	}
}