@charset "UTF-8";

#mv { position: relative; }
#mv .mvImg { width: 100%; height: 100vh; }

@media screen and (max-width: 599px) {
	.mvImg  { background-image:url("../img/common/main_sp.png"); background-size: cover; background-position: center; }
	.mainCopy { position: absolute; top: 35%; left: 50%; transform: translate(-50%,-50%); width: 100%;}
	.mainCopy h2 { color: #fff; font-size: 1.8rem; font-weight: bold; text-align: center; line-height: 1.5; margin-bottom: 20px; }
	.mainCopy h3 { color: #fff; font-size: 1.0rem; font-weight: bold; text-align: center; margin-bottom: 20px; }
	.mainCopy h4 { color: #fff; font-size: 0.8rem; font-weight: bold; text-align: center; }
}
@media screen and (min-width: 600px) {
	.mvImg  { background-image:url("../img/common/main.png"); background-size: cover; background-position: center; }
	.mainCopy { position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%); width: 100%;}
	.mainCopy h2 { color: #fff; font-size: 4.5rem; font-weight: bold; text-align: center; line-height: 1.2; margin-bottom: 40px; }
	.mainCopy h3 { color: #fff; font-size: 1.8rem; font-weight: bold; text-align: center; margin-bottom: 20px; }
	.mainCopy h4 { color: #fff; font-size: 1.5rem; font-weight: bold; text-align: center; }
}
@media screen and (min-width: 600px) and (max-width: 899px)  {
	.mvImg  { background-image:url("../img/common/main_sp.png"); background-size: cover; background-position: center; }
	.mainCopy h2 { font-size: 3.8rem; }
	.mainCopy h3 { font-size: 1.3rem; }
	.mainCopy h4 { font-size: 1.0rem; }
}
@media screen and (min-width: 900px) and (max-width: 1079px)  {
	.mainCopy h2 { font-size: 4.0rem; }
	.mainCopy h3 { font-size: 1.4rem; }
	.mainCopy h4 { font-size: 1.1rem; }
}
@media screen and (min-width: 1080px) and (max-width: 1179px)  {
	.mainCopy h2 { font-size: 4.2rem; }
	.mainCopy h3 { font-size: 1.5rem; }
	.mainCopy h4 { font-size: 1.2rem; }
}
@media screen and (min-width: 1180px) and (max-width: 1279px)  {
	.mainCopy { position: absolute; top: 45%; left: 50%; }
	.mainCopy h2 { font-size: 4.3rem; }
	.mainCopy h3 { font-size: 1.6rem; }
	.mainCopy h4 { font-size: 1.3rem; }
}
@media screen and (min-width: 1280px) and (max-width: 1379px)  {
	.mainCopy { position: absolute; top: 50%; left: 50%; }
	.mainCopy h2 { font-size: 4.4rem; }
	.mainCopy h3 { font-size: 1.7rem; }
	.mainCopy h4 { font-size: 1.4rem; }
}
@media screen and (min-width: 1380px) {
}

/* swiper card */
.guideLine .swiper-button-prev-card:after {
    content: 'prev';
    color: rgba(155,155,155,0.9);
    border-radius: 25px;
    font-size: 1rem;
}
.guideLine .swiper-button-next-card:after {
    content: 'next';
    color: rgba(155,155,155,0.9);
    border-radius: 25px;
    font-size: 1rem;
}

.guideLine .swiper-button-prev-card,.guideLine .swiper-button-next-card {
    width: 50px;
	height: 50px;
	border-radius: 25px;
	background: rgba(187,187,187,0.5);
}

.cardWraper .swiper-button-prev:after {
    content: 'prev';
    color: rgba(155,155,155,0.9);
    border-radius: 25px;
    font-size: 1rem;
}
.cardWraper .swiper-button-next:after {
    content: 'next';
    color: rgba(155,155,155,0.9);
    border-radius: 25px;
    font-size: 1rem;
}

.cardWraper .swiper-button-prev,.cardWraper .swiper-button-next {
    width: 50px;
	height: 50px;
	border-radius: 25px;
	background: rgba(187,187,187,0.5);
}

.worksSwiper .swiper-button-prev:after {
    content: 'prev';
    color: rgba(155,155,155,0.9);
    border-radius: 25px;
    font-size: 1rem;
}
.worksSwiper .swiper-button-next:after {
    content: 'next';
    color: rgba(155,155,155,0.9);
    border-radius: 25px;
    font-size: 1rem;
}

.worksSwiper .swiper-button-prev,.worksSwiper .swiper-button-next {
    width: 50px;
	height: 50px;
	border-radius: 25px;
	background: rgba(187,187,187,0.5);
}

.voiceSwiper .swiper-button-prev:after {
    content: 'prev';
    color: rgba(155,155,155,0.9);
    border-radius: 25px;
    font-size: 1rem;
}
.voiceSwiper .swiper-button-next:after {
    content: 'next';
    color: rgba(155,155,155,0.9);
    border-radius: 25px;
    font-size: 1rem;
}

.voiceSwiper .swiper-button-prev,.voiceSwiper .swiper-button-next {
    width: 50px;
	height: 50px;
	border-radius: 25px;
	background: rgba(187,187,187,0.5);
}


@media screen and (max-width: 599px) {
	.guideLine .swiper-button-prev-card,.guideLine .swiper-button-next-card { width: 30px; height: 30px; border-radius: 15px; }
	.guideLine .swiper-button-prev-card:after,.guideLine .swiper-button-next-card:after { font-size: 0.7rem; }	
	.guideLine .swiper-button-prev-card { left: -10px;}
	.guideLine .swiper-button-next-card { right: -10px;}
	
	.cardWraper .swiper-button-prev,.cardWraper .swiper-button-next { width: 30px; height: 30px; border-radius: 15px; }
	.cardWraper .swiper-button-prev:after,.cardWraper .swiper-button-next:after { font-size: 0.7rem; }	
	.cardWraper .swiper-button-prev { left: -10px;}
	.cardWraper .swiper-button-next { right: -10px;}
	
	.worksSwiper .swiper-button-prev,.worksSwiper .swiper-button-next { width: 30px; height: 30px; border-radius: 15px; }
	.worksSwiper .swiper-button-prev:after,.worksSwiper .swiper-button-next:after { font-size: 0.7rem; }	
	.worksSwiper .swiper-button-prev { left: -10px;}
	.worksSwiper .swiper-button-next { right: -10px;}
	
	.voiceSwiper .swiper-button-prev,.voiceSwiper .swiper-button-next { width: 30px; height: 30px; border-radius: 15px; }
	.voiceSwiper .swiper-button-prev:after,.voiceSwiper .swiper-button-next:after { font-size: 0.7rem; }	
	.voiceSwiper .swiper-button-prev { left: -10px;}
	.voiceSwiper .swiper-button-next { right: -10px;}
	
	.guideLine { position: absolute; left: 6%; bottom: 2%; z-index: 1; width: 86%; background: rgba(255,255,255,0.90); padding: 0.5% 1% 1%; border-radius: 6px; }
	.guideLine h3 { text-align: center; position: relative; top: -10px; font-size: 1.0rem; font-weight: bold; line-height: 1.5; color: #1181a1; }
	.guideLine h3 span.xsmall { display: block; font-size: 1.2rem; }
	
	.glTopList h4 { background: #1181a1; color: #fff; padding: 5px 10px; margin-bottom: 10px; } 
	
	/*.swiper-card { max-height: 300px; }*/
	.swiper-card div { margin-bottom: 10px; }
	.swiper-card div img { border: 1px solid #dedede;}
	.swiper-card p.date { font-size: 0.7rem; margin-bottom: 5px; }
	.swiper-card h4 { font-size: 0.8rem; color: #1181a1; }
	
	.top-safty01 { margin-bottom: 40px; }
	
	.in-flex { margin: 4%; }
	.in-flex .in-flex-L { margin-bottom: 10px; }
	.in-flex .in-flex-R { width: 50%; margin: 0 auto; }
	.ttlFlex {  }
	.ttlFlexL { text-align: center;}
	.ttlFlexR { width: 120px; margin: 0 auto; }
	
	.top-sdgs .in-flex { border: 3px solid #dedede; padding: 4%; }
	.top-sdgs h2 { font-size: 1.5rem; line-height: 1.0; margin-bottom: 0px; }
	.top-sdgs h2 .roboto { font-size: 1.5em; }
	.top-sdgs h3 { margin-bottom: 10px;}
	
	.top-about { background: #fff8ec; padding: 6%; }
	
	.cardWraper { position: relative; }
	.top-safty01 h3,.top-safty02 h3 { margin-bottom: 0px; }
	.cardWraper .swiper div { margin-bottom: 10px;}
	.cardWraper .swiper p { font-size: 0.9rem; margin-bottom: 0px;}
	.cardWraper .swiper h4 { font-weight: bold; margin-bottom: 10px;}
	
	.safelist { display: flex; justify-content: flex-start; flex-wrap: wrap; max-width: 580px; }
	.safelist li { width: 48%; margin-right: 4%; margin-bottom: 20px; max-width: 275px;}
	.safelist li:nth-child(2n) { margin-right: 0px;}
	.safelist li:nth-child(3),.safelist li:nth-child(4) { margin-bottom: 0px;}
	.safelist li div { margin-bottom: 10px; }
	.safelist li p { font-size: 0.9rem; margin-bottom: 0px;}

	.top-safty01 { padding-bottom: 6%;}
	.top-safty02 { background: #fff8ec; }
	.top-safty02 .safelist { display: flex; justify-content: flex-end; flex-wrap: wrap; max-width: 580px; float: right; }
	.top-safty02 .safelist li { width: 48%; margin-right: 0%; margin-left: 4%; margin-bottom: 20px; max-width: 275px;}
	.top-safty02 .safelist li:nth-child(1),.top-safty02 .safelist li:nth-child(3) { margin-left: 0px;}
	.top-safty01 h2,.top-safty02 h2 { margin-bottom: 20px; }
	
	.top-works { padding: 6%; }
	.worksSwiper { position: relative; margin-bottom: 40px; }
	.worksSwiper .swiper div { margin-bottom: 10px;}
	.worksSwiper .swiper p { font-size: 0.9rem; margin-bottom: 0px;}
	.worksSwiper .swiper h4 { font-weight: bold; margin-bottom: 10px; font-size: 0.9rem;}
	
	.voiceSwiper { position: relative; margin-bottom: 40px; }
	.voiceSwiper .swiper div { margin-bottom: 10px;}
	.voiceSwiper .swiper p { font-size: 0.9rem; margin-bottom: 0px;}
	.voiceSwiper .swiper h4 { font-weight: bold; margin-bottom: 10px; font-size: 0.9rem;}
	
	.top-flow { padding: 6%; background: #fff8ec; }
	.top-news { padding: 6%; }
	#content #contact .in { padding: 4%; }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	.guideLine .swiper-button-prev-card,.guideLine .swiper-button-next-card { width: 30px; height: 30px; border-radius: 15px; }
	.guideLine .swiper-button-prev-card:after,.guideLine .swiper-button-next-card:after { font-size: 0.7rem; }	
	.guideLine .swiper-button-prev-card { left: -15px;}
	.guideLine .swiper-button-next-card { right: -25px;}
	
	.cardWraper .swiper-button-prev,.cardWraper .swiper-button-next { width: 30px; height: 30px; border-radius: 15px; }
	.cardWraper .swiper-button-prev:after,.cardWraper .swiper-button-next:after { font-size: 0.7rem; }	
	.cardWraper .swiper-button-prev { left: -15px;}
	.cardWraper .swiper-button-next { right: -25px;}
	
	.worksSwiper .swiper-button-prev,.worksSwiper .swiper-button-next { width: 30px; height: 30px; border-radius: 15px; }
	.worksSwiper .swiper-button-prev:after,.worksSwiper .swiper-button-next:after { font-size: 0.7rem; }	
	.worksSwiper .swiper-button-prev { left: 25px;}
	.worksSwiper .swiper-button-next { right: 25px;}
	
	.voiceSwiper .swiper-button-prev,.voiceSwiper .swiper-button-next { width: 30px; height: 30px; border-radius: 15px; }
	.voiceSwiper .swiper-button-prev:after,.voiceSwiper .swiper-button-next:after { font-size: 0.7rem; }	
	.voiceSwiper .swiper-button-prev { left: 25px;}
	.voiceSwiper .swiper-button-next { right: 25px;}
	
	.guideLine { position: absolute; left: 6%; bottom: 2%; z-index: 1; width: 86%; background: rgba(255,255,255,0.90); padding: 0.5% 1% 1%; border-radius: 6px; }
	.guideLine h3 { text-align: center; position: relative; top: -20px; font-size: 1.2rem; font-weight: bold; line-height: 1.5; color: #1181a1; }
	.guideLine h3 span.xsmall { display: block; font-size: 1.2rem; }
	
	.glTopList h4 { background: #1181a1; color: #fff; padding: 5px 10px; margin-bottom: 10px; } 
	
	/*.swiper-card { max-height: 380px; }*/
	.swiper-card div { margin-bottom: 10px; }
	.swiper-card div img { border: 1px solid #dedede;}
	.swiper-card p.date { font-size: 0.8rem; margin-bottom: 5px; }
	.swiper-card h4 { font-size: 0.9rem; color: #1181a1; }
	
	.in-flex { display: flex; justify-content: space-between; align-items: center; }
	.in-flex .in-flex-L { width: 60%; }
	.in-flex .in-flex-R { width: 36%; }
	.ttlFlex { display: flex; justify-content: flex-start; align-items: center; }
	.ttlFlexL { margin-right: 6%; }
	.ttlFlexR { width: 180px; }
	.top-sdgs { margin: 40px 0; }
	.top-sdgs .in-flex { border: 3px solid #dedede; padding: 2% 4%; }
	.top-sdgs h2 { font-size: 1.8rem; line-height: 1.0; margin-bottom: 20px; }
	.top-sdgs h2 .roboto { font-size: 1.5em; }
	.top-sdgs h3 { margin-bottom: 10px;}
	
	.top-about { background: #fff8ec; padding: 40px 0; }
	
	.cardWraper { position: relative; }
	.top-safty01 h3,.top-safty02 h3 { margin-bottom: 0px; }
	.cardWraper .swiper div { margin-bottom: 10px;}
	.cardWraper .swiper p { font-size: 0.9rem; margin-bottom: 0px;}
	.cardWraper .swiper h4 { font-weight: bold; margin-bottom: 10px;}
	
	.safelist { display: flex; justify-content: flex-start; flex-wrap: wrap; max-width: 580px; }
	.safelist li { width: 48%; margin-right: 4%; margin-bottom: 20px; max-width: 275px;}
	.safelist li:nth-child(2n) { margin-right: 0px;}
	.safelist li:nth-child(3),.safelist li:nth-child(4) { margin-bottom: 0px;}
	.safelist li div { margin-bottom: 10px; }
	.safelist li p { font-size: 0.9rem; margin-bottom: 0px;}

	.top-safty01 .flexImg,.top-safty02 .flexImg { width: 45%; }
	.top-safty01 .flexTxt,.top-safty02 .flexTxt { width: 47%; padding: 4%; }
	.top-safty02 .safelist { display: flex; justify-content: flex-end; flex-wrap: wrap; max-width: 580px; float: right; }
	.top-safty02 .safelist li { width: 48%; margin-right: 0%; margin-left: 4%; margin-bottom: 20px; max-width: 275px;}
	.top-safty02 .safelist li:nth-child(1),.top-safty02 .safelist li:nth-child(3) { margin-left: 0px;}
	.top-safty01 h2,.top-safty02 h2 { margin-bottom: 20px; }
	
	.top-works { padding: 40px 0; }
	.worksSwiper { position: relative; margin-bottom: 40px; }
	.worksSwiper .swiper div { margin-bottom: 10px;}
	.worksSwiper .swiper p { font-size: 0.9rem; margin-bottom: 0px;}
	.worksSwiper .swiper h4 { font-weight: bold; margin-bottom: 10px; font-size: 0.9rem;}
	
	.voiceSwiper { position: relative; margin-bottom: 40px; }
	.voiceSwiper .swiper div { margin-bottom: 10px;}
	.voiceSwiper .swiper p { font-size: 0.9rem; margin-bottom: 0px;}
	.voiceSwiper .swiper h4 { font-weight: bold; margin-bottom: 10px; font-size: 0.9rem;}
	
	.top-flow { padding: 40px 0; background: #fff8ec; }	
	.top-news { padding: 40px 0; }	
	#content #contact .in { padding: 4%; }
}
@media screen and (min-width: 900px) {
	.guideLine { position: absolute; left: 8%; bottom: 2%; z-index: 1; width: 82%; background: rgba(255,255,255,0.95); padding: 0.5% 1% 1%; border-radius: 6px; }
	.guideLine h3 { text-align: center; position: relative; top: -20px; font-size: 1.5rem; font-weight: bold; line-height: 1.5; color: #1181a1; }
	.guideLine h3 span.xsmall { display: block; font-size: 1.2rem; }
	
	.guideLine .scroll { max-height: 30vh; }
	.glTopList li { display: flex; justify-content: space-between; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dotted #ccc; }
	.glTopListL { width: 30%; }
	.glTopListR { width: 66%; }
	.glTopListR .date { font-size: 0.9rem; }
	.glTopListR h4 { background: #1181a1; color: #fff; padding: 5px 10px; margin-bottom: 10px; } 
	.glTopList li .wp-block-list li { border-bottom: none; margin: 0; padding: 5px 0 5px 1.0em; display: block; }
	
	/*.swiper-card { max-height: 380px; }*/
	.swiper-card div { margin-bottom: 10px; }
	.swiper-card div img { border: 1px solid #dedede;}
	.swiper-card p.date { font-size: 0.8rem; margin-bottom: 5px; }
	.swiper-card h4 { font-size: 0.9rem; color: #1181a1; }
		
	.guideLine .swiper-button-prev-card { left: -22.5px;}
	.guideLine .swiper-button-next-card { right: -22.5px;}
	.cardWraper .swiper-button-prev { left: -22.5px;}
	.cardWraper .swiper-button-next { right: -22.5px;}
	.worksSwiper .swiper-button-prev { left: 22.5px;}
	.worksSwiper .swiper-button-next { right: 22.5px;}
	.voiceSwiper .swiper-button-prev { left: 22.5px;}
	.voiceSwiper .swiper-button-next { right: 22.5px;}
	
	.in-flex { display: flex; justify-content: space-between; align-items: center; }
	.in-flex .in-flex-L { width: 68%; }
	.in-flex .in-flex-R { width: 24%; }
	.ttlFlex { display: flex; justify-content: flex-start; align-items: center; }
	.ttlFlexL { margin-right: 6%; }
	.ttlFlexR { width: 200px; }
	.top-sdgs { margin: 40px 0; }
	.top-sdgs .in-flex { border: 3px solid #dedede; padding: 2% 4%; }
	.top-sdgs h2 { font-size: 3.0rem; line-height: 1.0; margin-bottom: 20px; }
	.top-sdgs h2 .roboto { font-size: 1.5em; }
	.top-sdgs h3 { margin-bottom: 10px;}
	
	.top-about { background: #fff8ec; padding: 40px 0; }
	
	.cardWraper { position: relative; }
	.top-safty01 h3,.top-safty02 h3 { margin-bottom: 0px; }
	.cardWraper .swiper div { margin-bottom: 10px;}
	.cardWraper .swiper p { font-size: 0.9rem; margin-bottom: 0px;}
	.cardWraper .swiper h4 { font-weight: bold; margin-bottom: 10px;}
	
	.safelist { display: flex; justify-content: flex-start; flex-wrap: wrap; max-width: 580px; }
	.safelist li { width: 48%; margin-right: 4%; margin-bottom: 20px; max-width: 275px;}
	.safelist li:nth-child(2n) { margin-right: 0px;}
	.safelist li:nth-child(3),.safelist li:nth-child(4) { margin-bottom: 0px;}
	.safelist li div { margin-bottom: 10px; }
	.safelist li p { font-size: 0.9rem; margin-bottom: 0px;}

	.top-safty01 .flexImg,.top-safty02 .flexImg { width: 42%; }
	.top-safty01 .flexTxt,.top-safty02 .flexTxt { width: 58%; padding: 4%; }
	.top-safty02 .safelist { display: flex; justify-content: flex-end; flex-wrap: wrap; max-width: 580px; float: right; }
	.top-safty02 .safelist li { width: 48%; margin-right: 0%; margin-left: 4%; margin-bottom: 20px; max-width: 275px;}
	.top-safty02 .safelist li:nth-child(1),.top-safty02 .safelist li:nth-child(3) { margin-left: 0px;}
	.top-safty01 h2,.top-safty02 h2 { margin-bottom: 20px; }
	
	.top-works { padding: 40px 0; }
	.worksSwiper { position: relative; margin-bottom: 40px; }
	.worksSwiper .swiper div { margin-bottom: 10px;}
	.worksSwiper .swiper p { font-size: 0.9rem; margin-bottom: 0px;}
	.worksSwiper .swiper h4 { font-weight: bold; margin-bottom: 10px; font-size: 0.9rem;}
	
	.voiceSwiper { position: relative; margin-bottom: 40px; }
	.voiceSwiper .swiper div { margin-bottom: 10px;}
	.voiceSwiper .swiper p { font-size: 0.9rem; margin-bottom: 0px;}
	.voiceSwiper .swiper h4 { font-weight: bold; margin-bottom: 10px; font-size: 0.9rem;}
	
	.top-flow { padding: 40px 0; background: #fff8ec; }
	
	.top-news { padding: 40px 0; }
	
	#contact { padding: 40px 0; }
}
@media screen and (min-width: 900px) and (max-width: 1079px) {
	/*.swiper-card { max-height: 380px; }*/
	.guideLine .swiper-button-prev-card,.guideLine .swiper-button-next-card { width: 45px; height: 45px; border-radius: 22.5px;}
	.guideLine .swiper-button-prev-card { left: -22.5px;}
	.guideLine .swiper-button-next-card { right: -22.5px;}
	
	.cardWraper .swiper-button-prev,.cardWraper .swiper-button-next { width: 45px; height: 45px; border-radius: 22.5px;}
	.cardWraper .swiper-button-prev{ left: -22.5px;}
	.cardWraper .swiper-button-next { right: -22.5px;}
	
	.workSwiper .swiper-button-prev,.workSwiper .swiper-button-next { width: 45px; height: 45px; border-radius: 22.5px;}
	.workSwiper .swiper-button-prev{ left: 22.5px;}
	.workSwiper .swiper-button-next { right: 22.5px;}
	
	.voiceSwiper .swiper-button-prev,.voiceSwiper .swiper-button-next { width: 45px; height: 45px; border-radius: 22.5px;}
	.voiceSwiper .swiper-button-prev{ left: 22.5px;}
	.voiceSwiper .swiper-button-next { right: 22.5px;}
}
@media screen and (min-width: 1080px) and (max-width: 1199px) {
	/*.swiper-card { max-height: 320px; }*/
	.guideLine .swiper-button-prev-card,.guideLine .swiper-button-next-card { width: 45px; height: 45px; border-radius: 22.5px;}
	.guideLine .swiper-button-prev-card { left: -22.5px;}
	.guideLine .swiper-button-next-card { right: -22.5px;}
	
	.cardWraper .swiper-button-prev,.cardWraper .swiper-button-next { width: 45px; height: 45px; border-radius: 22.5px;}
	.cardWraper .swiper-button-prev { left: -22.5px;}
	.cardWraper .swiper-button-next { right: -22.5px;}
	
	.worksSwiper .swiper-button-prev,.worksSwiper .swiper-button-next { width: 45px; height: 45px; border-radius: 22.5px;}
	.worksSwiper .swiper-button-prev { left: 22.5px;}
	.worksSwiper .swiper-button-next { right: 22.5px;}
	
	.voiceSwiper .swiper-button-prev,.voiceSwiper .swiper-button-next { width: 45px; height: 45px; border-radius: 22.5px;}
	.voiceSwiper .swiper-button-prev { left: 22.5px;}
	.voiceSwiper .swiper-button-next { right: 22.5px;}
}
@media screen and (min-width: 1200px) {
	.guideLine { max-width: 1100px; width: 100%; margin: 0 auto; left: 0; right: 0; }
	.guideLine .swiper-button-prev-card { left: -20px;}
	.guideLine .swiper-button-next-card { right: -20px;}
	
	.cardWraper .swiper-button-prev { left: -20px;}
	.cardWraper .swiper-button-next { right: -20px;}
	
	.worksSwiper .swiper-button-prev { left: 20px;}
	.worksSwiper .swiper-button-next { right: 20px;}
	
	.voiceSwiper .swiper-button-prev { left: 20px;}
	.voiceSwiper .swiper-button-next { right: 20px;}
}

	.top-concept01 .flexImg { background: url("../img/common/img01.jpg") center center no-repeat; background-size: cover; }
	.top-concept02 .flexImg { background: url("../img/common/img02.jpg") center center no-repeat; background-size: cover; }
	.top-safty01 .flexImg { background: url("../img/common/safe01.jpg") center center no-repeat; background-size: cover; }
	.top-safty02 .flexImg { background: url("../img/common/safe02.jpg") right center no-repeat; background-size: cover; }

@media screen and (max-width: 899px) {
	.guideLine h3 { cursor: pointer; }
	.guideLine h3:before { content: "\f35b"; font-family: "Font Awesome 5 Free"; font-weight: 900; }
	.guideLine h3.active:before { content: "\f358"; font-family: "Font Awesome 5 Free"; font-weight: 900; }
}
@media screen and (min-width: 900px) {
	.guideLine h3 { cursor: pointer; }
	.guideLine h3:before { content: "\f35b"; font-family: "Font Awesome 5 Free"; font-weight: 900; }
	.guideLine h3.active:before { content: "\f358"; font-family: "Font Awesome 5 Free"; font-weight: 900; }
	
}

@media screen and (max-width: 599px) {
	h4.sp-toggle { background: #fff; height: 40px; line-height: 40px; position: relative; padding-left: 80px; font-size: 1.0rem; font-weight: bold; cursor: pointer; }
	h4.sp-toggle span.roboto { background: #19c2cb; color: #fff; min-width: 70px; position: absolute; left: 0; top: 0; text-align: center; font-size: 0.7rem; }
	h4.sp-toggle:after { position: absolute; top: 50%; transform: translateY(-50%); right: 2%; content: "\f078"; font-family: "Font Awesome 5 Free"; font-weight: 900; opacity: 0.5; }
	h4.sp-toggle.active:after { position: absolute; top: 50%; transform: translateY(-50%); right: 2%; content: "\f077"; font-family: "Font Awesome 5 Free"; font-weight: 900; opacity: 0.5; }
	h4.sp-toggle .free { position: absolute; top: -20px; left: -20px; background:#ed0000; color: #fff; width: 40px; height: 40px; border-radius: 30px; text-align: center; line-height: 40px; font-size: 0.8rem;}

	.top-esg { background: #fff8ec; padding: 6%; }
	.esgList.flexThird li div { width: 50%; margin: 0 auto 20px; }
	.esgList.flexThird li h4 { font-size: 1.2rem;}
	
	.top-voice { padding: 6%; }
	.swiper-voice li {
		padding: 4%;
		background-image:linear-gradient(#fff 0 100%),repeating-linear-gradient(135deg, #88d1c7 0 8px, transparent 5px 10px);
		background-repeat: no-repeat;
		background-position: center;
		background-size: calc(100% - 10px) calc(100% - 10px), 100%;
	}
	.swiper-voice li h4 { font-weight: bold; font-size: 1.1rem; }
}
@media screen and (min-width: 600px) {
	.flowList { display: flex; justify-content: space-between; padding: 20px; background: #fff; }
	.flowList li { width: 15%; background: #fff; padding: 10px; border-right: 1px dotted #ccc; position: relative;}
	.flowList li:last-child { border-right: none; }
	.flowList li:after { position: absolute; top: 50%; right: -10px; transform: translateY(-50%); content: ""; width: 0px; height: 0px; border-style: solid; border-width: 25px 0 25px 10px; border-color: transparent transparent transparent #ccc; transform: rotate(0deg); z-index:1;}
	.flowList li:last-child:after { display: none; }
	.contactFlex.sp { display: none; }
	.flowList li h4 { text-align: center; position: relative; }
	.flowList li h4 span.roboto { display: block; font-size: 14px; }
	.flowList li h4 span.free { position: absolute; top: -30px; left: -30px; background:#ed0000; color: #fff; width: 50px; height: 50px; border-radius: 30px; text-align: center; line-height: 50px;}
	.flowList li .tcFlex { display: flex; flex-direction:column; padding-top: 20px; }
	.tcFlexR { order: 1; width: 100%; margin-bottom: 10px; }
	.tcFlexL { order: 2; width: 100%; }
	.flowList li p { font-size: 0.9rem; margin-bottom: 0px; }
	
	.top-esg { background: #fff8ec; padding: 40px 0; }
	.esgList.flexThird li div { width: 50%; margin: 0 auto 20px; } 
	.esgList.flexThird li h4 { font-size: 1.5rem;}
	
	.top-voice { padding: 40px 0; }
	.swiper-voice li { 
		padding: 20px; 
		background-image:linear-gradient(#fff 0 100%),repeating-linear-gradient(135deg, #88d1c7 0 8px, transparent 5px 10px);
		background-repeat: no-repeat;
		background-position: center;
		background-size: calc(100% - 10px) calc(100% - 10px), 100%;
	}
	.swiper-voice li h4 { font-weight: bold; font-size: 1.1rem; }
}
@media screen and (min-width: 600px) and (max-width: 1079px) {
	.flowList { display: flex; justify-content: space-between; flex-wrap: wrap; }
	.flowList li { width: 30%; }
}