@charset "UTF-8";
/* CSS Document */

.f-In {
	opacity: 0;
	transform: translateY(30px);
}
.f-In.active {
	transition: 1s;
	opacity: 1;
	transform: translateY(0px);
}
.notes-area {
   margin: 0;
}
#pageWrap {
	padding: 0;
	text-align: left;
	padding-bottom: 0%;
}

#mainWrap {
	background-image: url("../images/bg-01.jpg");
	background-size: cover;
}

#mainWrap .titBox {
	padding: 5% 0;
	position: relative;
}
#mainWrap .titBox > div {
	width: 29%;
	border-radius: 999px;
	overflow: hidden;
	position: relative;
	opacity: 0;
	transition: transform 1.5s ease-out, opacity 1.5s 0.5s ;
}
#mainWrap .titBox .img01 {
	transform: translateX(100%);
	
}
#mainWrap .titBox .img03 {
	transform: translateX(-100%);
}
.start #mainWrap .titBox .img01 {
	transform: translateX(0%);
	opacity: 1;
}
.start #mainWrap .titBox .img02 {
	opacity: 1;
}
.start #mainWrap .titBox .img03 {
	transform: translateX(0%);
	opacity: 1;
}

#mainWrap .titBox > div::after {
	content: "images";
	color: #fff;
	font-size: 10px;
	position: absolute;
	bottom: 0.3em;
	left: 50%;
	transform: translateX(-50%);
}
#mainWrap .titBox h1 {
	position: absolute;
	width: 72%;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	 filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 1)) drop-shadow(0px 0px 3px rgba(255, 255, 255, 1)) drop-shadow(0px 0px 5px rgba(255, 255, 255, 1)) drop-shadow(0px 0px 7px rgba(255, 255, 255, 1));
	opacity: 0;
	transition: 1s 1.5s;
}
.start #mainWrap .titBox h1 {
	opacity: 1;
}

#sec01 {
	background: #D2D2D3;
background: linear-gradient(136deg, rgba(210, 210, 211, 1) 0%, rgba(238, 238, 239, 1) 49%, rgba(210, 210, 211, 1) 100%);
	padding: 5% 0;
	position: relative;
}
#sec01::before {
	position: absolute;
	content: "";
	width: 50vw;
	height: 50vw;
	left: 0;
	top: 0;
	background-image: url("../images/bg02-1.png");
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 100%;
	
}
#sec01::after {
	position: absolute;
	content: "";
	width: 50vw;
	height: 50vw;
	right: 0;
	bottom: 0;
	background-image: url("../images/bg02-2.png");
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: 100%;
	
}
#sec01 .h2Box,
#sec01 .h3Box {
	max-width: 780px;
	container-type: inline-size;
}
#sec01 .h2Box {
	transition-delay: 1.5s;
}
#sec01 .h3Box {
	transition-delay: 2s;
}
#sec01 .h2Box .bottom {
	transform: scaleY(-1);
}
#sec01 .h2Box h2 {
	text-align: center;
	font-size: 3.6cqw;
	padding: 1em 0;
}
#sec01 .h3Box {
	
}
#sec01 .h3Box h3 {
	text-align: center;
	font-size: 5cqw;
	padding: 1em 0 0.3em;;
	letter-spacing: 0.2em;
	padding-left: 0.2em;
	font-style: italic;
}
#sec01 .h3Box p {
	text-align: center;
	font-size: clamp(13px, 2.5cqw, 16px);
}
#sec01 .itemsWrap {
	padding-top: 2%;
	position: relative;
	z-index: 1;
} 
#sec01 .items a {
	display: block;
	width: 32%;
	background-image: url("../images/bg-voice.png");
	background-position: left top;
	background-size: 100%;
	background-repeat: no-repeat;
	margin-bottom: 20px;
	transition: 0.3s;
}
#sec01 .items a:hover {
	transform: scale(1.05);
	transform: translateY(-5px);
	box-shadow: 0px 10px 10px rgba(0,0,0,0.3);
	opacity: 1;
}
#sec01 .items a.empBox {
	height: 0;
	margin: 0;
}
#sec01 .chu {
	text-align: center;
	padding: 1em 0;
}

#sec02 {
	padding: 5% 0;
}
#sec02 .titBox {
	container-type: inline-size;
	margin-bottom: 2%;
	text-align: center;
}
#sec02 .titBox h3 {
	display: inline-block;
	margin: 0 auto;
	font-size: 2.4cqw;
	text-align: center;
	line-height: 1.3;
	position: relative;
	
}
#sec02 .titBox h3::before,
#sec02 .titBox h3::after {
position: absolute;
	content: "";
	width: 20%;
	height: 100%;
	right: 100%;
	bottom: 0;
	background-image: url("../images/kakko.png");
	background-position: center bottom;
	background-size: 60%;
	background-repeat: no-repeat;
	
}
#sec02 .titBox h3::after {
	right: auto;
	left: 100%;
	transform: scaleX(-1);
}
#sec02 .titBox h3 span {
	font-size: 120%;
	color: #b50005;
}
#sec02 .titBox h3 span i {
	font-size: 75%;
	font-style: normal;
}

#popUps {}
.voiceBox {
/*display: none;*/
}
.voiceBox a {
	display: block;
	width: 80%;
	max-width: 600px;

	background-image:url("../images/bg-voice.png");
	background-size: 100%;
	margin: 0 auto;
	position: relative;
	
}
.voiceBox a .close {
	position: absolute;
	font-size: 40px;
	color: #fff;
	left: 102%;
	bottom: 102%;
}
.voiceBox a::after {
	content: "";
	position: absolute;
	width: 25%;
	height: 30%;
	right: 10%;
	bottom: 27%;
	background-image: url("../images/bt-click.svg");
	background-repeat: no-repeat;
	background-position: right bottom;
}
.dly02 {
	transition-delay: 0.2s!important;
}
.dly03 {
	transition-delay: 0.4s!important;
}



/* オーバーレイ 初期状態 */
.mfp-fade.mfp-bg {
  opacity: 0;

  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
/* オーバーレイ 表示アニメーション */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: .8;
}
/* オーバーレイ 非表示アニメーション */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* コンテンツ 初期状態 */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;

  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
/* コンテンツ 表示アニメーション */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
/* コンテンツ 非表示アニメーション */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

@media screen and (max-width: 959px) {
	
}

@media screen and (max-width: 599px) {
	#mainWrap .titBox h1 {
		position: static;
		width: 85%;
		transform: translate(0%,0%);
		margin: 0 auto;
		padding-top: 30px;
	}
	#sec01 .h2Box h2 {
		font-size: 4.6cqw;
	}

	#sec01 .h3Box h3 {
		font-size: 6cqw;
	}
	#sec01 .items a {
    width: 49%;
	}
	#sec02 .titBox h3 {
		font-size: 4cqw;
	}
	#sec02 .titBox h3::before,
#sec02 .titBox h3::after {

	width: 24%;
	height: 100%;
	right: 98%;
	bottom: 30%;

	
}
#sec02 .titBox h3::after {
	left: 98%;
}


}