@charset "utf-8";
/* history.css */

#history{
	padding: 115px 0 0;
}

@media screen and (max-width:1000px) {
#history{
	padding: 75px 0 0;
}	
}

div.fluid_2 {
    width: 500px;
	position: absolute;
	z-index: -1;
	top: 3600px;
	right: -200px;
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 65% 35% 55% 45% / 55% 50% 55% 45%; /* 初期形状 */
    animation: fluid-anim 30s linear infinite, wave-anim 12s ease-in-out infinite;
    background: #DD606D;
	opacity: 0.2;
	}


@media screen and (max-width:1000px) {
div.fluid_2 {
    width: 400px;
	position: absolute;
	z-index: -1;
	top: 1300px;
	right: -300px;
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 65% 35% 55% 45% / 55% 50% 55% 45%; /* 初期形状 */
    animation: fluid-anim 30s linear infinite, wave-anim 12s ease-in-out infinite;
    background: #DD606D;
	opacity: 0.2;
	}
}

@media screen and (max-width:1000px) {
div.fluid_3 {
    width: 300px;
	position: absolute;
	z-index: -1;
	top: 2200px;
	right: -200px;
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 65% 35% 55% 45% / 55% 50% 55% 45%; /* 初期形状 */
    animation: fluid-anim 30s linear infinite, wave-anim 12s ease-in-out infinite;
    background: #DD606D;
	opacity: 0.2;
	}
}

div.fluid_4 {
    width: 500px;
	position: absolute;
	z-index: -1;
	top: 1800px;
	left: -200px;
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 65% 35% 55% 45% / 55% 50% 55% 45%; /* 初期形状 */
    animation: fluid-anim 30s linear infinite, wave-anim 12s ease-in-out infinite;
    background: #DD606D;
	opacity: 0.2;
	}


@media screen and (max-width:1000px) {
div.fluid_4 {
    width: 300px;
	position: absolute;
	z-index: -1;
	top: 2700px;
	left: -200px;
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 65% 35% 55% 45% / 55% 50% 55% 45%; /* 初期形状 */
    animation: fluid-anim 30s linear infinite, wave-anim 12s ease-in-out infinite;
    background: #DD606D;
	opacity: 0.2;
	}
}

.green_2 {
    width: 400px;
	position: absolute;
	z-index: -1;
    top: 3200px;
    left: -200px;
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    animation: fluid-green 24s ease-in-out infinite, bounce-green 4s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
    background: #81AF2D;
    opacity: 0.2;
	}

@media screen and (max-width:1000px) {
.green_2 {
    width: 300px;
	position: absolute;
	z-index: -1;
    top: 900px;
    left: -200px;
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    animation: fluid-green 24s ease-in-out infinite, bounce-green 4s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
    background: #81AF2D;
    opacity: 0.2;
	}
}

@media screen and (max-width:1000px) {
.green_3 {
    width: 300px;
	position: absolute;
	z-index: -1;
    top: 3400px;
    right: -150px;
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    animation: fluid-green 24s ease-in-out infinite, bounce-green 4s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
    background: #81AF2D;
    opacity: 0.2;
	}
}

@media screen and (max-width:1000px) {
.green_4 {
    width: 200px;
	position: absolute;
	z-index: -1;
    top: 4400px;
    right: -120px;
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    animation: fluid-green 24s ease-in-out infinite, bounce-green 4s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
    background: #81AF2D;
    opacity: 0.2;
	}
}

.yellow_2 {
    width: 300px;
    position: absolute;
    z-index: -1;
    top: 4800px;
    left: -200px;
    aspect-ratio: 1 / 1; /* 横長の比率 */
    margin: 0 auto;
    border-radius: 80% 20% 70% 30% / 40% 60% 50% 50%; /* 初期の楕円形状 */
    animation: fluid-dynamic 24s ease-in-out infinite, float-dynamic 18s linear infinite;
    background: #F6B83A;
    opacity: 0.2;
	}


@media screen and (max-width:1000px) {
.yellow_2 {
    width: 300px;
    position: absolute;
    z-index: -1;
    top: 4000px;
    left: -200px;
    aspect-ratio: 1 / 1; /* 横長の比率 */
    margin: 0 auto;
    border-radius: 80% 20% 70% 30% / 40% 60% 50% 50%; /* 初期の楕円形状 */
    animation: fluid-dynamic 24s ease-in-out infinite, float-dynamic 18s linear infinite;
    background: #F6B83A;
    opacity: 0.2;
	}
}

@media screen and (max-width:1000px) {
.yellow_3 {
    width: 300px;
    position: absolute;
    z-index: -1;
    top: 4800px;
    left: -200px;
    aspect-ratio: 1 / 1; /* 横長の比率 */
    margin: 0 auto;
    border-radius: 80% 20% 70% 30% / 40% 60% 50% 50%; /* 初期の楕円形状 */
    animation: fluid-dynamic 24s ease-in-out infinite, float-dynamic 18s linear infinite;
    background: #F6B83A;
    opacity: 0.2;
	}
}

.yellow_4 {
    width: 300px;
    position: absolute;
    z-index: -1;
    top: 2500px;
    right: -200px;
    aspect-ratio: 1 / 1; /* 横長の比率 */
    margin: 0 auto;
    border-radius: 80% 20% 70% 30% / 40% 60% 50% 50%; /* 初期の楕円形状 */
    animation: fluid-dynamic 24s ease-in-out infinite, float-dynamic 18s linear infinite;
    background: #F6B83A;
    opacity: 0.2;
	}


@media screen and (max-width:1000px) {
.yellow_4 {
    width: 300px;
    position: absolute;
    z-index: -1;
    top: 5500px;
    right: -200px;
    aspect-ratio: 1 / 1; /* 横長の比率 */
    margin: 0 auto;
    border-radius: 80% 20% 70% 30% / 40% 60% 50% 50%; /* 初期の楕円形状 */
    animation: fluid-dynamic 24s ease-in-out infinite, float-dynamic 18s linear infinite;
    background: #F6B83A;
    opacity: 0.2;
	}
}

.page_ttl {
	padding: 70px 0;
}

@media screen and (max-width:1000px) {
.page_ttl {
	padding: 50px 0 40px;
}	 
}

.page_ttl h2 {
	font-size: 40px;
	text-align: center;
	color: #9B9B9B;
	margin: 0 0 15px;
}

@media screen and (max-width:1000px) {
.page_ttl h2 {
	font-size: 24px;
	margin: 0 0 10px;
}	
}

@media screen and (max-width:500px) {
.page_ttl h2 {
	font-size: 21px;
	margin: 0 0 10px;
}	
}


.page_ttl h2 span {
	font-size: 20px;

}

@media screen and (max-width:1000px) {
.page_ttl h2 span {
	font-size: 13px;	
}	
}

@media screen and (max-width:500px) {
.page_ttl h2 span {
	font-size: 11px;	
}	
}


.page_ttl p {
	display: flex;
	justify-content: space-between;
	width: 62px;
	margin: 0 auto;
}

@media screen and (max-width:768px) {
.page_ttl p {
	width: 50px;
	margin: 0 auto;
}	
}

.page_ttl p span {
	width: 12px;
	height: 12px;
	border-radius: 50%;
}

@media screen and (max-width:768px) {
.page_ttl p span {
	width: 9px;
	height: 9px;
}	
}

.page_ttl p span:first-child {
	background-color: #F6B83A;
}

.page_ttl p span:nth-child(2) {
	background-color: #81AF2D;
}

.page_ttl p span:nth-child(3) {
	background-color: #DD606D;
}

#history_container {
	width: 95%;
	max-width: 1450px;
	margin: 0 auto 80px;
}

@media screen and (max-width:1000px) {
#history_container {
	margin: 0 auto 20px;
}	
}

#history_container > p {
	font-size: 19px;
	text-align: center;
	line-height: 2;
	color: #8E8E8E;
}

@media screen and (max-width:1670px) {
#history_container > p {
	font-size: 17px;
}	
}

@media screen and (max-width:1400px) {
#history_container > p {
	font-size: 16px;
}	
}

@media screen and (max-width:1000px) {
#history_container > p {
	text-align: left;
}	
}


#history_container ul {
	padding: 0 0 10px 150px;
	margin: 100px 0;
	position: relative;
}

@media screen and (max-width:1000px) {
#history_container ul {
	padding: 0 0 5px 15px;
	margin: 70px 0;
}	
}


#history_container ul::before {
	content: "";
	position: absolute;
	width: 5px;
	top: 0;
	bottom: 0;
	left: 150px;
	background-color: #AEAEAE;
}

@media screen and (max-width:1000px) {
#history_container ul::before {
	width: 2px;
	left: 15px;
	top: 15px;
}	
}

#history_container ul li {
	padding: 0 0 0 45px;
	position: relative;
	margin: 0 0 140px;
}

@media screen and (max-width:1000px) {
#history_container ul li {
	padding: 0 0 0 25px;
	margin: 0 0 120px;
}	
}

#history_container ul li:last-child {
	margin: 0 0 100px;
}

@media screen and (max-width:1000px) {
#history_container ul li:last-child {
	margin: 0 0 50px;
}	
}

#history_container ul li::before {
	content: "";
	position: absolute;
	height: 36px;
	width: 36px;
	border-radius: 50%;
	background-color: #AEAEAE;
	left: -15px;
	top: 0;
}

@media screen and (max-width:1000px) {
#history_container ul li::before {
	height: 20px;
	width: 20px;
	left: -9px;
	top: 5px;
}	
}

#history_container ul li .date {
	position: absolute;
	top: 0;
	left: -150px;
	text-align: right;
	font-size: 40px;
	color: #9B9B9B;
	line-height: 1;
}

@media screen and (max-width:1000px) {
#history_container ul li .date {
	position: relative;
	top: auto;
	left: auto;
	text-align: left;
	font-size: 30px;
	line-height: 1;
	
}	
}


.date span {
	display: block;
	font-size: 22px;
	margin: 10px 0 0;
}

@media screen and (max-width:1000px) {
.date span {
	display: inline-block;
	font-size: 14px;
	margin: 0 0 0 10px;
}	
}

#history_container ul li h3 {
	font-size: 30px;
	margin: 0 0 30px;
	color: #9B9B9B;
}

@media screen and (max-width:1000px) {
#history_container ul li h3 {
	font-size: 23px;
	margin: 0 0 25px;
}	
}

@media screen and (max-width:500px) {
#history_container ul li h3 {
	font-size: 20px;
	padding: 10px 0 0;

}	
}

@media screen and (max-width:400px) {
#history_container ul li h3 {
	font-size: 18px;

}	
}

#history_container ul li p {
	color: #9B9B9B;
	font-size: 18px;
	line-height: 1.8;
	margin: 0 0 20px;
}

@media screen and (max-width:1000px) {
#history_container ul li p {
	font-size: 16px;
	margin: 0 0 20px;
}	
}

@media screen and (max-width:500px) {
#history_container ul li p {
	font-size: 15px;
	margin: 0 0 20px;
}	
}

#history_container li figure {
	width: 260px;
	margin: 0 25px 20px 0;
}

@media screen and (max-width:500px) {
#history_container li figure {
	width: 90%;
	max-width: 360px;
	margin: 0 25px 20px 0;
}	
}

#history_container li .m_img {
	width: 90%;
	max-width: 360px;
	margin: 0 25px 20px 0;
}


.history_img {
	display: flex;
}

@media screen and (max-width:550px) {
	.history_img {
	display: block;
}
}