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

#pageWrap {
	background-color: #fff;
	padding: 0;
}
#sec01 {
	background-image: url("../img/shikichi.jpg"),url("../img/bg01.jpg");
	background-position: right top,left bottom;
	background-size: 50%,50%;
	background-repeat: no-repeat,no-repeat;
}
#sec01 .sikichiBox {
	width: 52%;
	margin-left: 48%;
	position: relative;
}
#sec01 .sikichiBox .houi {
	position: absolute;
	width: 28%;
	right: 7%;
	bottom: 5%;
}
#sec01 .sikichiBox .caption {
	position: absolute;
	left: 10%;
	bottom: 5%;
}
#sec01 .boxWidth {
	position: absolute;
	width: 96%;
	max-width: 1200px;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
#sec01 .leftBox {
	width: 50%;
}
#sec01 .leftBox .h3Box {}
#sec01 .leftBox .h3Box h3 {
	font-size: 2vw;
	font-size: clamp(18px, 2vw, 29px);
	padding: 3% 0;
	letter-spacing: 0.1em;
	text-align: center;
	line-height: 2;
}
#sec01 .leftBox .h3Box p {
	font-size: 1vw;
	font-size: clamp(12px, 1vw, 15px);
	line-height: 2.4;
	padding: 2% 0;
	text-align: center;
}
#sec01 .leftBox .itemBox {
	margin-top: 5%;
	background-color: #fff;
	box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
	padding: 20px 40px;
	align-items: flex-start;
}
#sec01 .leftBox .itemBox dl {
	width: 57%;
}
#sec01 .leftBox .itemBox .imgBox{
	width: 40%;
	
}
#sec01 .leftBox .itemBox dt {
	color: #004060;
	font-size: 2vw;
	font-size: clamp(15px, 2vw, 29px);
	text-align: center;
	border-bottom: #004060 solid 1px;
	padding-bottom: 0.3em;
}
#sec01 .leftBox .itemBox dt img {
	width: 60%;
}
#sec01 .leftBox .itemBox dd {
	font-size: 1vw;
	font-size: clamp(10px, 1vw, 13px);
	padding-top: 0.6em;
	line-height: 1.3;
}
#sec01 .leftBox .itemBox dd .caption {
	font-size: 10px;
}

#sec02 {
	background: #00394E;
background: linear-gradient(90deg, rgba(0, 57, 78, 1) 0%, rgba(0, 11, 31, 1) 100%);
	color: #fff;
	padding: 3% 0;
}
#sec02 h3 {
	font-size: 28px;
	text-align: center;
	padding: 1em 0;
}
#sec02 .flex {}
#sec02 .flex .leftBox,
#sec02 .flex .rightBox {
	width: 46%;
}
#sec02 .flex .lineBox {
	width: 1px;
	border-left: #777 dotted 1px;
}
#sec02 .flex .itemBox:nth-child(2),#sec02 .flex .itemBox:nth-child(5) {
	margin: 5% 0;
}
#sec02 .flex .imgBox {
	width: 47%;
	max-width: 254px;
}
#sec02 .flex dl {
	width: 50%;
}
#sec02 .flex dt {
	font-size: 21px;
	position: relative;
	padding-left: 2em;
}
#sec02 .flex dt::before {
	content: "";
	position: absolute;
	width: 1.6em;
	height: 1.6em;
	left: 0;
	top: 0;
	background-image: url("../img/a.svg");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100%;
}
#sec02 .flex .item02 dt::before {
	background-image: url("../img/b.svg");
}
#sec02 .flex .item03 dt::before {
	background-image: url("../img/c.svg");
}
#sec02 .flex .item04 dt::before {
	background-image: url("../img/d.svg");
}
#sec02 .flex .item05 dt::before {
	background-image: url("../img/e.svg");
}
#sec02 .flex .item06 dt::before {
	background-image: url("../img/f.svg");
}
#sec02 .flex dd {}

.parse {
	position: relative;
}
.parse .txtBox {
	position: absolute;
	color: #fff;

}
.parse .txtBox h4 {
	font-size: 28px;
	text-align: center;
}
.parse .txtBox p {
	font-size: 16px;
	line-height: 2.4;
	text-align: center;
	padding: 1em 0;
}
.parse .desc {
	position: absolute;
	color: #fff;
	font-size: 20px;
	bottom: 0.5em;
	left: 1em;
}

#sec03 .txtBox {
	left: 6%;
	top:10%;
}
#sec04 .txtBox {
	right: 7%;
	top:50%;
	transform: translateY(-50%);
}
#sec05 .txtBox {
	left: 7%;
	top:50%;
	transform: translateY(-50%);
}
#sec05 .desc {
	left: auto;
	right: 1em;
}
.parse.f-In {
	transform: translateY(0);
	filter: brightness(0%) grayscale(100%);
	opacity: 1;
	transform: scale(1.1);
	transition: filter 2s, opacity 2s,transform 5s;
}
.parse.f-In.active {
	transform: translateY(0);
	filter: brightness(100%) grayscale(0%);
	transform: scale(1);
}

@media screen and (max-width: 959px) {
	#sec01 {
		padding-bottom: 6%;
	}
	#sec01 .sikichiBox {
		width: 100%;
		margin-left: 0%;
		position: relative;
	}
	#sec01 .sikichiBox .houi {
		position: absolute;
		width: 28%;
		right: 7%;
		bottom: 5%;
	}
	#sec01 .sikichiBox .caption {
		position: absolute;
		left: 10%;
		bottom: 5%;
		font-size: 10px;
	}
	#sec01 .boxWidth {
		position: static;
		width: 96%;
		max-width: 1200px;
		left: 50%;
		top: 50%;
		transform: translate(0%,0%);
	}
	#sec01 .leftBox {
		width: 100%;
		max-width: 500px;
		margin: 0 auto;
	}
	#sec01 .leftBox .itemBox {
    padding: 20px 20px;
	}
	#sec01 .leftBox .itemBox dt {
		font-size: 18px;
	}
	#sec01 .leftBox .itemBox dt img {
		width: 60%;
	}
	#sec01 .leftBox .itemBox dd {
		font-size: 13px;
	}
	#sec02 {
		padding: 5% 0;
	}
	#sec02 h3 {
    font-size: 21px;
	}
	#sec02 .flex {
		max-width: 600px;
	}
	#sec02 .flex .imgBox {
		width: 100%;
		max-width: 254px;
		margin: 10px auto;
	}
	#sec02 .flex dl {
		width: 100%;
	}
	#sec02 .flex dt {
    font-size: 16px;
	}
	#sec02 .flex dd {
    font-size: 13px;
	}
	.parse .txtBox,#sec04 .txtBox,#sec05 .txtBox {
		position: static;
		background-color: #000;
		transform: translateY(0%);
		padding: 5% 0;

	}
	.parse .txtBox h4 {
		font-size: 18px;
		text-align: center;
	}
	.parse .txtBox p {
		font-size: 13px;
		line-height: 2;
		text-align: center;
		padding: 1em 0;
	}
	.parse .desc {
		position: absolute;
		color: #fff;
		font-size: 20px;
		bottom: 0.5em;
		left: 1em;
	}
	
}
@media screen and (max-width: 599px) {
	#sec01 .leftBox .h3Box h3 {
		font-size: clamp(15px, 4.3vw, 17px);
		line-height: 1.6;
		letter-spacing: 0em;
	}
	#sec01 .leftBox .h3Box p {
		max-width: 300px;
		margin: 0 auto;
		font-size: clamp(12px, 3.5vw, 14px);
		line-height: 2;
		padding: 2% 0;
		text-align: center;
	}
	#sec01 .leftBox .itemBox {
		width: 90%;
		max-width: 340px;
		margin: 20px auto;
    padding: 20px 20px;
  }
	#sec01 .leftBox .itemBox dl {
		width: 100%;
	}
	#sec01 .leftBox .itemBox .imgBox{
		width: 70%;
		margin: 10px auto 0;
	}
	#sec02 {
		padding: 6% 0 10%;
	}
	#sec02 h3 {
    font-size: clamp(15px, 4.3vw, 17px);
  }
	#sec02 .flex .leftBox, #sec02 .flex .rightBox {
    width: 80%;
		max-width: 320px;
		margin: 0 auto;
	}
	#sec02 .flex .lineBox {
		display: none;
	}
	    .parse .desc {
        position: absolute;
        color: #fff;
        font-size: 16px;
        bottom: 0.1em;
        left: 0.6em;
    }
	.parse .txtBox, #sec04 .txtBox, #sec05 .txtBox {
    position: static;
    background-color: #000;
    transform: translateY(0%);
    padding: 7% 5% 5%;
 }
	.parse .txtBox h4 {
    font-size: clamp(15px, 4.3vw, 17px);
  }
	.parse .txtBox p {
    font-size: 13px;
		line-height: 1.6;
		text-align: justify;
		padding: 1em;
  }
	.parse .txtBox p br {
		display: none;
	}
	
}