@charset "UTF-8";


@keyframes deco_ls{
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(-50px);
  }
}
@keyframes deco_ll{
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(-100px);
  }
}
@keyframes deco_rs{
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(50px);
  }
}
@keyframes deco_rl{
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(100px);
  }
}


.fadein_fv {
    transition-delay: 1s;
}


/* ++++++++++++++++++++++++++++++++++++++++++++++    PC    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* 801px ~ */
@media screen and (min-width: 801px), print {


	
	.mainimg {
		position: relative;
	}
		.deco {
			position: absolute;
		}
		.mainimg .mainimg_img {
			width: 70%;
			margin: 0 0 0 auto;
		}
			.mainimg .mainimg_img img {
				max-width: none;
				width: 100%;
			}
		.mainimg .mainimg_txt {
			position: absolute;
			left: 0;
			top: 10%;
			font-weight: bold;
		}
			.mainimg .mainimg_txt dl {
			}
				.mainimg .mainimg_txt dl dt {
					position: relative;
					z-index: 2;
				}
					.mainimg .mainimg_txt dl dt div {
						width: 110px;
						margin-bottom: 10px;
					}
					.mainimg .mainimg_txt dl h1 {
						font-size: 34px;
						font-weight: bold;
						letter-spacing: 4px;
						font-style: italic;
						position: relative;
						z-index: 1;
						color: #000;
					}
					.mainimg .mainimg_txt dl h1::before {
						position: absolute;
						content: "";
						background-color: rgba(40,169,184,.8);
						top: -20px;
						left: -40px;
						width: 0;
						height: 54px;
						z-index: -1;
						transition-delay: 1500ms;
						transition-duration: 500ms;
					}
					.mainimg.on .mainimg_txt dl h1::before {
						width: 480px;
					}
					.mainimg .mainimg_txt dl p {
						margin-top: 40px;
						font-size: 30px;
						line-height: 2;
						/* letter-spacing: 4px; */
					}
						.mainimg .mainimg_txt dl p span {
							color: #28A9B8;
						}
				.mainimg .mainimg_txt dl dd {
					margin-top: 40px;
				}
					.mainimg .mainimg_txt dl dd div {
						font-size: 14px;
						font-weight: 500;
						margin-top: 20px;
					}
					.mainimg .mainimg_txt dl dd h2 {
						font-size: 24px;
						letter-spacing: 4px;
						color: #28A9B8;
						line-height: 1.0;
					}
					.mainimg .mainimg_txt dl dd p {
						font-size: 12px;
						margin-top: 10px;
						font-weight: 500;
					}

	section {
		position: relative;
	}
		section .sec_inn {
		}
			section .sec_inn li {
				position: relative;
			}
				section .sec_inn li {
					position: relative;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
				}
				section .sec_inn li:nth-child(n+2){
					margin-top: 120px;
				}
				section .sec_inn li .pht{
					width: 40%;
				}
				section .sec_inn li .txt{
					width: 55%;
				}
					section .sec_inn li .txt div{
						border: 1px solid #28A9B8;
						background: #28A9B8;
						color: #fff;
						font-size: 33px;
						font-weight: 600;
						display: inline-block;
						padding: 8px 10px;
						line-height: 1.0;
					}
					section .sec_inn li .txt h2{
						font-size: 24px;
						font-weight: 600;
						margin-top: 30px;
						margin-bottom: 30px;
					}
					section .sec_inn li .txt p{
						font-size: 16px;
					}
					section .sec_inn li .txt p:nth-child(n+4){
						margin-top: 20px;
					}
				section .sec_inn li:nth-child(even) {
				}
					section .sec_inn li:nth-child(even) .pht {
						order: 2;
					}
					section .sec_inn li:nth-child(even) .txt {
						order: 1;
					}

	#sec01 {
		margin-top: 160px;
	}

	
	
}




/* ++++++++++++++++++++++++++++++++++++++++++++++    sp    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* ~ 800px */
@media only screen and (max-width: 800px) {


	.mainimg {
		position: relative;
	}
		.deco {
			position: absolute;
		}
		.mainimg .mainimg_img {
		}
			.mainimg .mainimg_img img {
				max-width: none;
				width: 100%;
			}
		.mainimg .mainimg_txt {
			margin: -26% 0 0 5%;
			font-weight: bold;
		}
			.mainimg .mainimg_txt dl {
			}
				.mainimg .mainimg_txt dl dt {
					position: relative;
					z-index: 2;
				}
					.mainimg .mainimg_txt dl dt div {
						width: 110px;
						margin-bottom: 10px;
					}
					.mainimg .mainimg_txt dl dt h1 {
						font-size: 30px;
						font-weight: bold;
						letter-spacing: 4px;
						font-style: italic;
						position: relative;
						z-index: 1;
						color: #000;
						line-height: 1.0;
					}
					.mainimg .mainimg_txt dl h1::before {
						position: absolute;
						content: "";
						background-color: rgba(40,169,184,.8);
						top: -20px;
						left: -40px;
						width: 0;
						height: 45px;
						z-index: -1;
						transition-delay: 1500ms;
						transition-duration: 500ms;
					}
					.mainimg.on .mainimg_txt dl h1::before {
						width: 320px;
					}
						.mainimg .mainimg_txt dl dt h1 span {
							transform: translateX(-100%);
							transition-duration: 500ms;
							transition-timing-function: ease-out;
							transition-delay: 300ms;
							display: inline-block;
						}
						.mainimg.on .mainimg_txt dl dt h1 span {
							transform: translateX(0)
						}
					.mainimg .mainimg_txt dl  p {
						margin-top: 30px;
						font-size: 24px;
						line-height: 1.4;
						/* letter-spacing: 4px; */
					}
						.mainimg .mainimg_txt dl  p span {
							color: #42cad0;
						}
				.mainimg .mainimg_txt dl dd {
					margin-top: 30px;
					line-height: 1.6;
				}
					.mainimg .mainimg_txt dl dd div {
						font-size: 14px;
						font-weight: 500;
						margin-top: 20px;
					}
					.mainimg .mainimg_txt dl dd h2 {
						font-size: 20px;
						letter-spacing: 4px;
						color: #28A9B8;
						line-height: 1.0;
					}
					.mainimg .mainimg_txt dl dd p {
						font-size: 12px;
						margin-top: 10px;
						font-weight: 500;
					}

	section {
		position: relative;
		width: 90%;
		margin: auto;
	}
		section .sec_inn {
		}
			section .sec_inn li {
				position: relative;
			}
				section .sec_inn li {
					position: relative;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
				}
				section .sec_inn li:nth-child(n+2){
					margin-top: 60px;
				}
				section .sec_inn li .pht{
					width: 100%;
					order: 2;
					height: 300px;
					margin-top: 20px;
				}
					section .sec_inn li .pht img{
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				section .sec_inn li .txt{
					width: 100%;
					order: 1;
				}
					section .sec_inn li .txt div{
						border: 1px solid #28A9B8;
						background: #28A9B8;
						color: #fff;
						font-size: 22px;
						font-weight: 600;
						display: inline-block;
						padding: 5px 10px;
						line-height: 1.0;
					}
					section .sec_inn li .txt h2{
						font-size: 20px;
						font-weight: 600;
						margin-top: 12px;
						margin-bottom: 15px;
						line-height: 1.6;
					}
					section .sec_inn li .txt p{
						font-size: 14px;
					}
					section .sec_inn li .txt p:nth-child(n+4){
						margin-top: 10px;
					}

	#sec01 {
		margin-top: 80px;
	}
	
	
	
}