@charset "utf-8";
/* ===================================================
	Concept CSS
====================================================== */



/* ---------------------------------------------------
	sec01
------------------------------------------------------ */
#sec01 { display: flex; justify-content: space-between; flex-wrap: wrap; }
#sec01 .r_block { padding: 415px max(calc(50vw - 580px), 5%) 165px max(9vw, 108px); position: relative; }
#sec01 .r_block .txt { margin-top: 70px;}
#sec01 .r_block .txt + .txt { margin-top: 1em;}
#sec01 .r_block a.txt  { display: inline-block; color: #ececec; text-decoration: underline; }
#sec01 .l_block { margin-top: 150px; position: relative; z-index: 1; }
#sec01 .b_block { width: 100%; margin-top: -115px; position: relative; z-index: 0; }

@media screen and (hover: hover) {
}

@media screen and (min-width: 601px) {
	#sec01 .r_block { width: 50%; }
	#sec01 .r_block .photo { position: absolute; top: 30px; right: max(calc(50vw - 720px), 2%); }
	#sec01 .l_block { width: 50%; }
}

@media screen and (max-width: 600px) {
	#sec01 { flex-direction: column; padding: 20px 0 0; }
	#sec01 .r_block { order: 1; padding: 0 7%; }
	#sec01 .r_block .photo { width: 59vw; margin: 0 0 35px auto; }
	#sec01 .r_block .txt { margin-top: 20px; }
	#sec01 .l_block { order: 2; margin: 50px auto 0 0; width: 66.6vw; }
	#sec01 .b_block { order: 3; margin-top: -12vw;}
}

/* ---------------------------------------------------
	sec02
------------------------------------------------------ */
#sec02 { padding: 165px 0 0; }
#sec02 .txt { display: flex; padding-bottom: 50px; }
#sec02 .txt h2 { font-size: 22px; }
#sec02 .txt p { padding-right: 4%; }

#sec02 .ticker,
#sec02 .ticker ul { display: flex; }
#sec02 .ticker { width: 100%; position: relative; z-index: 0; overflow: hidden; }
#sec02 .ticker ul { animation: loop 175s -87s linear infinite; backface-visibility: hidden; will-change: transform; }
#sec02 .ticker ul + ul { animation: loop2 175s -175s linear infinite; margin: 0 10px; }
#sec02 .ticker li { width: 530px; position: relative; z-index: 0; margin: 0 10px; }
#sec02 .ticker li .ofi { width: 100%; }

@keyframes loop {
	0% {
		-webkit-transform: translateX(100%);
		-ms-transform: translateX(100%);
		transform: translateX(100%);
	}
	100% {
		-webkit-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		transform: translateX(-100%);
	}
}
@keyframes loop2 {
	0% {
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}
	100% {
		-webkit-transform: translateX(-200%);
		-ms-transform: translateX(-200%);
		transform: translateX(-200%);
	}
}

@media screen and (hover: hover) {
}

@media screen and (min-width: 601px) {
	#sec02 .txt h2 { width: 40%; }
	#sec02 .txt p { width: 59%; }
}

@media screen and (max-width: 600px) {
	#sec02 { padding: 50px 0 0; }
	#sec02 .txt { flex-direction: column; padding-bottom: 60px; }
	#sec02 .txt h2 { font-size: 20px; padding: 0; }
	#sec02 .txt p { padding: 20px 0 0; }

	#sec02 .ticker li { width: 45vw; margin: 0 1vw; }
}


/* ---------------------------------------------------
	Sec03
------------------------------------------------------ */
#sec03 { display: flex; justify-content: space-between; padding: 155px 0 0; }
#sec03 .r_block { padding: 60px max(calc(50vw - 560px), 6%) 350px max(8vw, 96px); position: relative; }
#sec03 .r_block .txt { margin-top: 40px;}

@media screen and (hover: hover) {
}

@media screen and (min-width: 601px) {
	#sec03 { padding-bottom: 35px;}
	#sec03 .r_block { width: 57%; }
	#sec03 .l_block { width: 43%; }
	#sec03 .r_block .photo { position: absolute; bottom: -35px; right: max(calc(50vw - 665px), 5.5%); }
}

@media screen and (max-width: 600px) {
	#sec03 { flex-direction: column-reverse; padding: 60px 0 0; }
	#sec03 .r_block { padding: 0 7% 0; }
	#sec03 .r_block .photo { width: 70vw; margin: 30px 0 30px auto; }
	#sec03 .r_block .txt { margin-top: 20px;}
	#sec03 .l_block { width: 87vw; }
}


/* ---------------------------------------------------
	Sec04
------------------------------------------------------ */
#sec04 { display: flex; flex-wrap: wrap; padding: 200px 0 0; }
#sec04 .r_block { padding: 0 max(calc(50vw - 560px), 6%) 0 max(4vw, 48px); position: relative; }
#sec04 .r_block .txt { margin-top: 30px; }
#sec04 .r_block .cmn_btn03 { display: block; color: #f2f2f2; width: fit-content; margin: 50px 0 0 auto;}
#sec04 .r_block .cmn_btn03::after { background: #596269; }
#sec04 .l_block { display: flex; justify-content: space-between; align-items: flex-start; }
#sec04 .l_block div:nth-child(1) { width: 57%; margin-top: -75px; }
#sec04 .l_block div:nth-child(2) { width: 38%; }
#sec04 .b_block { width: 100%; margin-top: 190px; }

@media screen and (hover: hover) {
}

@media screen and (min-width: 601px) {
	#sec04 .r_block { width: 48.5%; }
	#sec04 .l_block { width: 51.5%; }
}

@media screen and (max-width: 600px) {
	#sec04 { flex-direction: column; padding: 60px 0 0; }
	#sec04 .r_block { padding: 0 7%; order: 1; }
	#sec04 .r_block .txt { margin-top: 20px; }
	#sec04 .r_block .cmn_btn03 { margin: 20px 0 0 auto;}
	#sec04 .l_block { order: 2; margin-top: 40px; padding-right: 7%; }
	#sec04 .l_block div:nth-child(1) { width: 57%; margin-top: 0; }
	#sec04 .l_block div:nth-child(2) { width: 38%; margin-top: 8vw; }
	#sec04 .b_block { margin-top: 60px; order: 3; }
}