@charset "utf-8";
:root {
  --main-color: #20A74A;
}


.head-ttl-wrap, .head-ttl-wrap-slim {
	display: none;
}

/* FV */
.balance-concept-mv {
	padding-block: 60px;
}
@media all and (min-width: 576px) {

}
@media all and (min-width: 768px) {
}
@media all and (min-width: 992px) {
	.balance-concept-mv {
		padding-block: 90px;
	}
}
@media all and (min-width: 1200px) {
}
@media all and (min-width: 1400px) {
}
/* //FV */


/* コンテンツ */
.balance-concept-contents {
	padding-bottom: 120px;
}
.balance-concept-contents__container {
	position: relative;
}
.balance-concept-contents__box:last-child {
	padding-bottom: 40px;
}
.balance-concept-contents__box:not(:last-of-type) {
	margin-bottom: 80px;
}
.balance-concept-contents__ttl-wrap {
	margin-bottom: 2rem;
	color: var(--main-color);
}
.balance-concept-contents__ttl-jp {
	font-size: 1.5rem;
	font-weight: 900;
	line-height: 1.4;
	margin-bottom: .2rem;
}
@media all and (min-width: 400px) {
	.balance-concept-contents__ttl-jp {
		font-size: 1.75rem;
	}
}

.balance-concept-contents__ttl-eng {
	font-weight: 700;
}
.balance-concept-contents__text {
	line-height: 1.8;
}
.balance-concept-contents__text--separator {
	position: relative;
	padding-bottom: 20px;
	margin-bottom: 20px;
}
.balance-concept-contents__text--separator::after {
	content: '';
	position: absolute;
	bottom: 0;
  left: 50%;
  transform: translateX(-50%);  
	-webkit-transform: translateX(-50%);  
	width: 180px;
	height: 1px;
	background-color: #231815;
}
@media all and (min-width: 576px) {

}
@media all and (min-width: 768px) {
}
@media all and (min-width: 992px) {
	.balance-concept-contents {
		padding-top: 80px;
		padding-bottom: 147px;
		
	}
	.balance-concept-contents__box:last-child {
		padding-bottom: 147px;
	}
	.balance-concept-contents__box:not(:last-of-type) {
		margin-bottom: 150px;
	}
	.balance-concept-contents__ttl-wrap {
		margin-bottom: 4rem;
	}
	.balance-concept-contents__ttl-jp {
		font-size: 2.7777rem;
	}
	.balance-concept-contents__ttl-eng {
		font-size: 1.166rem;
	}
	.balance-concept-contents__text {
		font-size: 1.1111rem;
		line-height: calc(49 / 20);
	}
	.balance-concept-contents__text--separator {
		padding-bottom: 2.22222rem;
		margin-bottom: 2.22222rem;
	}
	.balance-concept-contents__text--separator::after {
		width: 280px;
	}
}
@media all and (min-width: 1200px) {
}
@media all and (min-width: 1400px) {
	.balance-concept-contents__box:not(:last-of-type) {
		margin-bottom: 300px;
	}
}
/* //コンテンツ */

/* イラスト類 */
.balance-concept-contents__box:last-child {
	position: relative;
}
.balance-concept-contents__tombow {
	position: sticky;
	top: 100px;
	left: 100%;
	width: 80px;
	z-index: 20;
	transform: translateZ(0);/* GPU処理するための処理 */
	aspect-ratio: 120 / 106;
}
@media all and (min-width: 992px) {
	.balance-concept-contents__tombow {
		width: 120px;
	}
}
.balance-concept-contents__text {
	position: relative;
	z-index: 10;
	width: max-content;
	max-width: 100%;
	margin-inline: auto;
}
.balance-concept-contents__img {
	position: absolute;
	z-index: 1;
	display: block;
}
.balance-concept-contents__momo {
	width: 50px;
	top: 27%;
	right: 0;
}
.balance-concept-contents__support {
	width: 40px;
	top: 36%;
  left: 0;
}
.balance-concept-contents__drink-tower {
	width: 60px;
	top: 77%;
	right: 0;
}
.balance-concept-contents__earth {
	width: 40px;
	top: 79%;
	left: 0;
}
.balance-concept-contents__shake {
	width: 60px;
	top: 35%;
	right: 0;
}
.balance-concept-contents__flask {
	width: 30px;
	top: 42%;
	left: 0;
}
.balance-concept-contents__banana {
	width: 50px;
	top: 82%;
  right: 0;
}
.balance-concept-contents__walk {
	width: 42px;
	top: 94%;
	left: 0;
}
.balance-concept-contents__chanmery {
	width: 60px;
	top: 17%;
	right: 0;
}
.balance-concept-contents__party {
	width: 40px;
	top: 50%;
  left: 0;
}
.balance-concept-contents__enguard {
	width: 50px;
	top: 60%;
	right: 0;
}
.balance-concept-contents__box {
	position: relative;
	padding-inline: 22px;
}
@media all and (min-width: 400px) {
	.balance-concept-contents__box {
		padding-inline: 60px;
	}
}
@media all and (min-width: 768px) {
	.balance-concept-contents__momo {
		width: 76px;
	}
	.balance-concept-contents__support {
		width: 61px;
	}
	.balance-concept-contents__drink-tower {
		width: 109px;
	}
	.balance-concept-contents__earth {
		width: 59px;
	}
	.balance-concept-contents__shake {
		width: 119px;
	}
	.balance-concept-contents__flask {
		width: 60px;
	}
	.balance-concept-contents__banana {
		width: 100px;
	}
	.balance-concept-contents__walk {
		width: 70px;
	}
	.balance-concept-contents__chanmery {
		width: 135px;
	}
	.balance-concept-contents__party {
		width: 100px;
	}
	.balance-concept-contents__enguard {
		width: 66px;
	}
}
@media all and (min-width: 992px) {
	.balance-concept-contents__momo {
		width: 120px;
	}
	.balance-concept-contents__support {
		width: 100px;
	}
	.balance-concept-contents__drink-tower {
		width: 180px;
	}
	.balance-concept-contents__earth {
		width: 100px;
	}
	.balance-concept-contents__shake {
		width: 180px;
	}
	.balance-concept-contents__flask {
		width: 120px;
	}
	.balance-concept-contents__banana {
		width: 180px;
	}
	.balance-concept-contents__walk {
		width: 140px;
	}
	.balance-concept-contents__chanmery {
		width: 200px;
	}
	.balance-concept-contents__party {
		width: 180px;
	}
	.balance-concept-contents__enguard {
		width: 120px;
	}
}
@media all and (min-width: 1400px) {
	.balance-concept-contents__momo {
		width: 180px;
		right: -4%;
	}
	.balance-concept-contents__support {
		width: 145px;
	  left: -3%;
	}
	.balance-concept-contents__drink-tower {
		width: 280px;
	}
	.balance-concept-contents__earth {
		width: 150px;
	}
	.balance-concept-contents__shake {
		width: 300px;
		right: -12%;
	}
	.balance-concept-contents__flask {
		width: 150px;
		left: -1%;
	}
	.balance-concept-contents__banana {
		width: 280px;
	  right: -7%;
	}
	.balance-concept-contents__walk {
		width: 180px;
	}
	.balance-concept-contents__chanmery {
		width: 280px;
		right: -12%;
	}
	.balance-concept-contents__party {
		width: 280px;
	  left: -11%;
	}
	.balance-concept-contents__enguard {
		width: 140px;
	}

}
@media all and (min-width: 1500px) {
	.balance-concept-contents__momo {
		width: 228px;
	}
	.balance-concept-contents__support {
		width: 185px;
	}
	.balance-concept-contents__drink-tower {
		width: 329px;
	}
	.balance-concept-contents__earth {
		width: 179px;
	}
	.balance-concept-contents__shake {
		width: 359px;
		right: -14%;
	}
	.balance-concept-contents__flask {
		width: 181px;
	}
	.balance-concept-contents__banana {
		width: 318px;
	}
	.balance-concept-contents__walk {
		width: 189px;
	}
	.balance-concept-contents__chanmery {
		width: 407px;
		right: -16%;
	}
	.balance-concept-contents__party {
		width: 316px;
	}
	.balance-concept-contents__enguard {
		width: 198px;
	}
}
/* //イラスト類 */

/* イラストのエフェクト */
.balance-concept-contents__momo.is-scrolled {
	animation: yurayurajouge 1.5s ease 0s 3 backwards;
}
@keyframes yurayurahidarishita {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-.75rem, 1.5rem);
  }
  100% {
    transform: translate(0, 0);
  }
}
.balance-concept-contents__momo:hover {
	animation: yurayurajouge2 1.5s ease 0s 3 backwards;
}
@keyframes yurayurahidarishita2 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-.75rem, 1.5rem);
  }
  100% {
    transform: translate(0, 0);
  }
}


.balance-concept-contents__support.is-scrolled {
	animation: timeflow 2s ease .5s 3 backwards;
}
@keyframes timeflow {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(.5rem, .75rem);
  }
  100% {
    transform: translate(0, 0);
  }
}
.balance-concept-contents__support:hover {
	animation: timeflow2 2s ease 0s 3 backwards;
}
@keyframes timeflow2 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(.5rem, .75rem);
  }
  100% {
    transform: translate(0, 0);
  }
}

.balance-concept-contents__drink-tower.is-scrolled {
	animation: yurayura 5s ease 0s 2 backwards;
	transform-origin: center top;
}
@keyframes yurayura {
  0% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(12deg);
  }
  40% {
    transform: rotate(-12deg);
  }
  60% {
    transform: rotate(12deg);
  }
  80% {
    transform: rotate(-12deg);
  }
  100% {
    transform: rotate(0);
  }
}
.balance-concept-contents__drink-tower:hover {
	animation: yurayura2 5s ease 0s 1 backwards;
	transform-origin: center top;
}
@keyframes yurayura2 {
  0% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(12deg);
  }
  40% {
    transform: rotate(-12deg);
  }
  60% {
    transform: rotate(12deg);
  }
  80% {
    transform: rotate(-12deg);
  }
  100% {
    transform: rotate(0);
  }
}
.balance-concept-contents__earth.is-scrolled {
	animation: yurayurajouge 2s ease 0s 3 backwards;
}
@keyframes yurayurajouge {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, .75rem);
  }
  100% {
    transform: translate(0, 0);
  }
}
.balance-concept-contents__earth:hover {
	animation: yurayurajouge2 2s ease 0s 3 backwards;
}
@keyframes yurayurajouge2 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, .75rem);
  }
  100% {
    transform: translate(0, 0);
  }
}
.balance-concept-contents__shake.is-scrolled {
	animation: yurayurasayu 2s ease 0s 2 backwards;
}
@keyframes yurayurasayu {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(1rem, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
.balance-concept-contents__shake:hover {
	animation: yurayurasayu2 2s ease 0s 2 backwards;
}
@keyframes yurayurasayu2 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(1rem, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
.balance-concept-contents__flask.is-scrolled {
	animation: yurayura 5s ease .5s 1 backwards;
	transform-origin: center top;
}
.balance-concept-contents__flask:hover {
	animation: yurayura2 5s ease 0s 1 backwards;
	transform-origin: center top;
}
.balance-concept-contents__banana.is-scrolled{
	animation: yurayurajouge 2s ease 0s 3 backwards;
}
.balance-concept-contents__banana:hover {
	animation: yurayurajouge2 2s ease 0s 3 backwards;
}
.balance-concept-contents__walk.is-scrolled {
	animation: timeflow 2s ease .5s 3 backwards;
}
.balance-concept-contents__walk:hover {
	animation: timeflow2 2s ease 0s 3 backwards;
}
.balance-concept-contents__chanmery.is-scrolled {
	animation: kakukaku 1.75s ease 0s 3 backwards;
	animation-timing-function: steps(2, end);
}
@keyframes kakukaku {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-.75rem, 0);
  }
}
.balance-concept-contents__chanmery:hover {
	animation: kakukaku2 1.75s ease 0s 3 backwards;
	animation-timing-function: steps(2, end);
}
@keyframes kakukaku2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-.75rem, 0);
  }
}
.balance-concept-contents__party.is-scrolled {
	animation: yurayurajouge 2s ease 0s 2 backwards;
}
.balance-concept-contents__party:hover {
	animation: yurayurajouge2 2s ease 0s 2 backwards;
}
.balance-concept-contents__enguard.is-scrolled {
	animation: yurayurahidarishita 1.5s ease 0s 3 backwards;
}
.balance-concept-contents__enguard:hover {
	animation: yurayurahidarishita2 1.5s ease 0s 3 backwards;
}
/* //イラストのエフェクト */

/* トンボ */
.balance-concept-contents__tombow {
	transform: scale(-1, 1);
}
.balance-concept-contents__tombow-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: block;
	opacity: 0;
	transition: opacity .3s;
	animation: tombow-fuwafuwa 4s ease 0s infinite;
}
.balance-concept-contents__tombow-img.is-active {
	opacity: 1;
}
@keyframes tombow-fuwafuwa {
	0% {
	  transform: translate(0, 0);
	}
	50% {
	  transform: translate(0, 1rem);
	}
	100% {
	  transform: translate(0, 0);
	}
}
/* //トンボ */

/*デスクトップ*/
@media all and (min-width: 992px) and (max-width: 1199px) {
}
/*中デバイス*/
@media all and (min-width: 768px) and (max-width: 991px) {
  
}
/*小デバイス*/
@media all and (min-width: 576px) and (max-width: 767px) {

}

@media all and (max-width: 400px) {
 
}

/*iPhone5:SE*/
@media all and (max-width: 320px) {

}