@charset "UTF-8";


.fadein_fv {
    transition-delay: 0.3s;
}


@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);
  }
}


iframe{
	vertical-align:bottom;
}

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



	#main {
	}

	.mainimgArea {
		position: relative;
	}
		.deco {
			position: absolute;
		}
		.mainimgArea .deco#deco01 {
			bottom: -20px;
			left: 0;
			width: 0;
			overflow: hidden;
			transition-delay: 500ms;
			transition-duration: 1000ms;
			animation-duration: 10s;
			animation-timing-function: linear;
			animation-delay: 1s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
			animation-fill-mode: forwards;
			animation-play-state: running;
			animation-name: deco_rl;
			z-index: 2;
		}
		.mainimgArea.on .deco#deco01 {
			width: 200px;
		}
			.mainimgArea .deco#deco01 img {
				width: 208px;
				max-width: none;
			}
		.mainimgArea .deco#deco02 {
			bottom: 15%;
			right: 250px;
			width: 0;
			overflow: hidden;
			transition-delay: 500ms;
			transition-duration: 1000ms;
			animation-duration: 6s;
			animation-timing-function: linear;
			animation-delay: 1s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
			animation-fill-mode: forwards;
			animation-play-state: running;
			animation-name: deco_ls;
			z-index: 2;
		}
		.mainimgArea.on .deco#deco02 {
			width: 86px;
		}
			.mainimgArea .deco#deco02 img {
				width: 86px;
				max-width: none;
			}
		.mainimgArea .secArea {
			background-image: url("../img/message/mainimg.jpg");
			background-size: cover;
			background-position: center;
			min-height: 592px;
			position: relative;
		}
			.mainimg_txt {
				position: absolute;
				top: 50%;
				right: 0;
				margin: auto;
				width: 450px;
			}
				.mainimg_txt dt {
					position: relative;
					z-index: 2;
					display: inline-block;
				}
					.mainimg_txt dt div {
						width: 66px;
					}
				.mainimg_txt dd {
					margin-top: 10px;
				}
					.mainimg_txt dd h1 {
						font-size: 34px;
						font-weight: bold;
						letter-spacing: 4px;
						font-style: italic;
						position: relative;
						z-index: 1;
						color: #fff;
					}
					.mainimgArea .mainimg_txt dd h1::before {
						position: absolute;
						content: "";
						background-color: rgba(40,169,184,.8);
						top: -16px;
						right: -40px;
						width: 0;
						height: 54px;
						z-index: -1;
						transition-delay: 900ms;
						transition-duration: 500ms;
					}
					.mainimgArea.on .mainimg_txt dd h1::before {
						width: 505px;
					}

	
	section {
		position: relative;
	}
	#sec01 {
		margin-top: 160px;
	}
		section > div:nth-child(n+2){
			margin-top: 100px;
		}
		section .cntnr .ttl{
			display: flex;
			flex-wrap: wrap;
			color: #28A9B8;
			align-items: center;
			margin-bottom: 40px;
		}
			section .cntnr .ttl p{
				font-size: 36px;
				font-weight: 600;
				border-right: 1px solid #ddd;
				width: 70px;
				box-sizing: border-box;
				/* height: 60px; */
			}
			section .cntnr .ttl h2{
				box-sizing: border-box;
				font-size: 26px;
				font-weight: 600;
				width: calc(100% - 70px);
				padding-left: 30px;
			}
		section .cntnr .cntnt{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
			section .cntnr .cntnt .pht{
				width: 40%;
			}
			section .cntnr .cntnt .txt-area{
				width: 55%;
			}
				section .cntnr .cntnt .txt-area .box{
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
				}
				section .cntnr .cntnt .txt-area .box:nth-child(n+2){
					margin-top: 40px;
				}
					section .cntnr .cntnt .txt-area .box .icon{
						width: 80px;
						text-align: center;
					}
						section .cntnr .cntnt .txt-area .box .icon img{
							border-radius: 50vh;
						}
						section .cntnr .cntnt .txt-area .box .icon p{
							margin: -20px auto 0;
							position: relative;
							border-radius: 50vh;
							width: 70%;
							background: #28A9B8;
							color: #fff;
						}
					section .cntnr .cntnt .txt-area .box > p{
						width: calc(100% - 100px);
						line-height: 2.0;
					}
		section .pht-area{
			margin: 100px 40px 0 40px;
			img{
				max-height: 600px;
				width: 100%;
				height: 100%;
				object-fit: cover;
				display: block;
			}
		}
}




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

	#main {
	}

	.mainimgArea {
		position: relative;
	}
		.deco {
			position: absolute;
		}
		.mainimgArea .deco#deco01 {
			top: 2%;
			right: 20px;
			width: 0;
			overflow: hidden;
			transition-delay: 500ms;
			transition-duration: 1000ms;
			animation:10s linear 1s infinite alternate forwards running deco_ls;
			z-index: 2;
		}
		.mainimgArea.on .deco#deco01 {
			width: 100px;
		}
			.mainimgArea .deco#deco01 img {
				width: 100px;
				max-width: none;
			}
		.mainimgArea .deco#deco02 {
			bottom: 15%;
			right: 50px;
			width: 0;
			overflow: hidden;
			transition-delay: 500ms;
			transition-duration: 1000ms;
			animation:6s linear 1s infinite alternate forwards running deco_ls;
			z-index: 2;
		}
		.mainimgArea.on .deco#deco02 {
			width: 43px;
		}
			.mainimgArea .deco#deco02 img {
				width: 43px;
				max-width: none;
			}
		.mainimgArea .secArea {
			background-image: url("../img/message/mainimg_sp.jpg");
			background-size: cover;
			background-position: center;
			min-height: 400px;
			position: relative;
		}
			.mainimg_txt {
				position: absolute;
				bottom: 18.5%;
				right: 80px;
				margin: auto;
			}
				.mainimg_txt dt {
					position: relative;
					z-index: 2;
					display: inline-block;
				}
					.mainimg_txt dt div {
						width: 66px;
					}
				.mainimg_txt dd {
					margin-top: 10px;
				}
					.mainimg_txt dd h1 {
						font-size: 22px;
						font-weight: bold;
						letter-spacing: 4px;
						font-style: italic;
						position: relative;
						z-index: 1;
						color: #fff;
					}
					.mainimgArea .mainimg_txt dd h1::before {
						position: absolute;
						content: "";
						background-color: rgba(40,169,184,.8);
						top: -19px;
						right: -80px;
						width: 0;
						height: 44px;
						z-index: -1;
						transition-delay: 900ms;
						transition-duration: 500ms;
					}
					.mainimgArea.on .mainimg_txt dd h1::before {
						width: 250px;
					}

	
	section {
		position: relative;
	}
	#sec01 {
		margin-top: 80px;
	}
		section > div{
			width: 90%;
			margin: auto;
		}
		section > div:nth-child(n+2){
			margin-top: 60px;
		}
		section .cntnr .ttl{
			display: flex;
			flex-wrap: wrap;
			color: #28A9B8;
			align-items: center;
			margin-bottom: 30px;
		}
			section .cntnr .ttl p{
				font-size: 24px;
				font-weight: 600;
				border-right: none;
				border-bottom: 1px solid #ddd;
				width: 100%;
				box-sizing: border-box;
				line-height: 1.0;
				padding-bottom: 5px;
				margin-bottom: 5px;
			}
			section .cntnr .ttl h2{
				box-sizing: border-box;
				font-size: 20px;
				font-weight: 600;
				width: 100%;
				/* padding-left: 20px; */
				line-height: 1.4;
				white-space: nowrap;
			}
		section .cntnr .cntnt{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
			section .cntnr .cntnt .pht{
				width: 100%;
				margin-top: 30px;
				height: 200px;
				order: 2;
			}
				section .cntnr .cntnt .pht img{
					object-fit: cover;
					height: 100%;
					width: 100%;
				}
				section .cntnr:nth-child(2) .cntnt .pht img{
					object-position: 0 -10px;
				}
				section .cntnr:nth-child(4) .cntnt .pht img{
					object-position: 0 -10px;
				}
			section .cntnr .cntnt .txt-area{
				width: 100%;
				order: 1;
			}
				section .cntnr .cntnt .txt-area .box{
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
				}
				section .cntnr .cntnt .txt-area .box:nth-child(n+2){
					margin-top: 30px;
				}
					section .cntnr .cntnt .txt-area .box .icon{
						width: 60px;
						text-align: center;
					}
						section .cntnr .cntnt .txt-area .box .icon img{
							border-radius: 50vh;
						}
						section .cntnr .cntnt .txt-area .box .icon p{
							margin: -10px auto 0;
							position: relative;
							border-radius: 50vh;
							width: 80%;
							background: #28A9B8;
							color: #fff;
							font-size: 14px;
						}
						section .cntnr .cntnt .txt-area .box > p{
							width: calc(100% - 80px);
							line-height: 1.8;
							font-size: 14px;
						}
		section .pht-area{
			margin: 100px 0 0;
			width: 100%;
			height: 200px;
			img{
				max-height: 600px;
				width: 100%;
				height: 100%;
				object-fit: cover;
				display: block;
			}
		}
	
}