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

.wrap{
	width:auto;
	overflow: hidden;
	font-feature-settings : "pkna";
}
	
.main {
	position:relative;
}


.main p {
	position:absolute;
	text-align:justify;
	width:52vw;
	font-size:2.5vw;
	color:#4d4d4d;
    font-weight: 100;
	font-family:"Noto Sans JP"; 
  margin:24% 5% ;
  padding:0;
  animation-name: fadein;
    animation-duration: 1.8s;
    animation-iteration-count: 1;
}

	
.main span {
	position:absolute;
	width:37vw;
	font-size:2.8vw;
	border:solid 1px #e4e4e4;
	border-radius:2.8em;
	text-align:center;
	color:#231815;
    font-weight: 400;
	font-family:"Noto Sans JP"; 
  margin:50% 5% ;
  padding-bottom:2px;
   box-shadow:3px 3px 6px 2px rgba(0,0,0,0.5);
}

.main span:hover{
 box-shadow:1px 1px 5px rgba(0,0,0,0.3);
   transform : translateY(3px);
   opacity: 0.6;
}

.main a{
	text-decoration: none;
	color:#231815;
}
	
@keyframes fadein {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

	
.main img{
     width: 100%;	
	 vertical-align: bottom;
	}
	
	
	
.main2 {
	position:relative;
	vertical-align: bottom;
}


.main2 p {
	position:absolute;
	width:50vw;
	font-size:2.5vw;
	color:#4d4d4d;
    font-weight: 100;
	font-family:"Noto Sans JP"; 
  margin:7% 5% ;
  padding:0;
  animation-name: fadein2;
    animation-duration: 3s;
    animation-iteration-count: 1;
}

	
.main2 span {
	position:absolute;
position:absolute;
	width:37vw;
	font-size:2.8vw;
	border:solid 1px #e4e4e4;
	border-radius:2.8em;
	text-align:center;
	color:#231815;
    font-weight: 400;
	font-family:"Noto Sans JP"; 
  margin:26% 5% ;
  padding-bottom:2px;
    box-shadow:3px 3px 6px 2px rgba(0,0,0,0.5);
}

.main2 span:hover{
	 box-shadow:1px 1px 5px rgba(0,0,0,0.3);
   transform : translateY(3px);
   opacity: 0.6;

}

.main2 a{
	text-decoration: none;
	color:#231815;
}
	
@keyframes fadein2 {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

	
.main2 img{
     width: 100%;	
	 margin:0;
	 vertical-align: bottom;
	}	
	
.box{
	 width: 100%;	
	 height:auto;
	 vertical-align: bottom;
	 background-color:#598aa7;
	padding-bottom:5%;
	text-align:center;
	}

.box p{
	padding-top:2%;
	font-size:2.8vw;
	font-family:"Noto Sans JP";
	color:#ffffe6;
	text-align:center;
	letter-spacing:0.15em;
 }
 
 
 .box span {
	width:auto;
	background-color:#ffffff;
	font-size:3.2vw;
	border:none;
	border-radius:3em;
	text-align:center;
	margin-top:5%;
	color:#598aa7;
	padding:5px 80px;
    font-weight: 100;
	font-family:"Noto Sans JP"; 
    box-shadow:3px 3px 6px 2px rgba(0,0,0,0.5);
}

.box span:hover{
	 box-shadow:1px 1px 5px rgba(0,0,0,0.3);
   transform : translateY(3px);
   opacity: 0.6;

}

.box a{
	text-decoration: none;
	color:#598aa7;
}


	
	
.howto{
	text-align:center;
	margin:5%;
	width:auto;}

.howto img{
	width:100%;}

.howto img:hover{
   opacity: 0.6;

}


.footer{
	width:auto;
	height:1.5em;
	background-color:#231815;
	margin-bottom:0;
	}

.footer p{
	font-size:1vw;
	font-family:"Noto Sans JP";
	color:#ffffff;
	text-align:left;
	padding-top:0.5vw;
	margin-left:5%;
 }


.about {
	position:relative;
}


.about p {
	position:absolute;
	width:100vw;
	font-size:3.5vw;
	color:#4d4d4d;
    font-weight: 300;
	font-family:"Noto Sans JP"; 
  margin:5% 6.5% ;
  padding:0;
  animation-name: fadein;
    animation-duration: 1.8s;
    animation-iteration-count: 1;
}

	

	
@keyframes fadein {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

	
.about img{
     width: 100%;	
	 vertical-align: bottom;
	 text-align:center;
	}

.contents{
	position:relative;
	}
.contents img{
	width:90%;
	margin:5%;
	text-align:center;
}

.contents p{
	width:90%;
	text-align:justify;
	margin-top:3%;
	margin-left:5%;
	font-family:"Noto Sans JP";
	font-size:2.8vw;
	font-weight:100;
	letter-spacing:0.05em;
	font-feature-settings : "pkna";
	color:#231815;
	line-height:5vw;
	
}

.about_01{
	width:100%;
	vertical-align: bottom;
	position:relative;
	}
	
.about_01 h3{
	position:absolute;
	text-align:justify;
	margin:6% 6% 0%; 
	font-family:"Noto Sans JP";
	font-size:3vw;
	font-weight:300;
	letter-spacing:0.02em;
	color:#ffffff;

	}	

.about_01 h1{
	position:absolute;
	text-align:justify;
	margin:11% 5% 0%; 
	font-family:"Noto Sans JP";
	font-size:3.7vw;
	font-weight:500;
	letter-spacing:0.02em;
	color:#ffffff;
	border-bottom: 1.5px solid #ffffff;
	border-top: 1.5px solid #ffffff;
	}
	
.about_01 p{
	position:absolute;
	width:65vw;
	text-align:justify;
	margin:19.5% 5% 0%; 
	font-family:"Noto Sans JP";
	font-size:2.3vw;
	font-weight:100;
	letter-spacing:0.01em;
	color:#ffffff;
	line-height:3.7vw;
	}
	
.about_01 img{
	 width:100%;
	 text-align:center;
	 margin-top:4%;
	 vertical-align: bottom;
	 }
	
	
.about_02{
	width:100%;
	vertical-align: bottom;
	position:relative;
	}
	
.about_02 h3{
	position:absolute;
	text-align:justify;
	margin:4% 6%; 
	font-family:"Noto Sans JP";
	font-size:3vw;
	font-weight:300;
	letter-spacing:0.02em;
	color:#3c5664;

	}	

.about_02 h1{
	position:absolute;
	text-align:justify;
	margin:9% 5%; 
	font-family:"Noto Sans JP";
	font-size:3.7vw;
	font-weight:500;
	letter-spacing:0.02em;
	color:#3c5664;
	border-bottom: 1.5px solid #3c5664;
	border-top: 1.5px solid #3c5664;
	}
	
.about_02 p{
	position:absolute;
	width:60vw;
	text-align:justify;
	margin:17.5% 5%; 
	font-family:"Noto Sans JP";
	font-size:2.5vw;
	font-weight:100;
	letter-spacing:0.02em;
	color:#3c5664;
	line-height:3.7vw;
	}
	
.about_02 img{
	 width:100%;
	 text-align:center;
	 vertical-align: top;
	 }
	 

.about_03{
	width:100%;
	vertical-align: bottom;
	position:relative;
	}
	
.about_03 h3{
	position:absolute;
	text-align:justify;
	margin:3.5% 6%; 
	font-family:"Noto Sans JP";
	font-size:3vw;
	font-weight:300;
	letter-spacing:0.02em;
	color:#ffffff;

	}	

.about_03 h1{
	position:absolute;
	text-align:justify;
	margin:8.5% 5%; 
	font-family:"Noto Sans JP";
	font-size:3.7vw;
	font-weight:500;
	letter-spacing:0.02em;
	color:#ffffff;
	border-bottom: 1.5px solid #ffffff;
	border-top: 1.5px solid #ffffff;
	}
	
.about_03 p{
	position:absolute;
	width:58vw;
	text-align:justify;
	margin:17% 5%; 
	font-family:"Noto Sans JP";
	font-size:2.5vw;
	font-weight:100;
	letter-spacing:0.01em;
	color:#ffffff;
	line-height:3.7vw;
	}
	
.about_03 img{
	 width:100%;
	 text-align:center;
	 vertical-align: top;
	 }

.FandQ-title{
	width:90%;
	margin:8% 0% 0% 5%;
	font-family:"Noto Sans JP";
	color:#3c5664;
	font-size:3.7vm;
	font-weight:900;
	display:flex;
	align-items:center;
	}

.FandQ-title:after{
	border-top:5px solid;
	content:"";
	flex-grow: 1;
}

.FandQ-title:after{
	margin-left:1rem;
}

.FandQ{
	width:83.5%;
	margin:2% 6% 0% 5%;
	padding:3%;
	background:rgba(0,0,0,0,8);
	border:#ffffff solid thin;
	   box-shadow:3px 3px 6px 2px rgba(0,0,0,0.3);}

.FandQ h1{
	font-family:"Noto Sans JP";
	font-size:1.65em;
	font-weight:700;
	text-align:justify;
	list-style:none;
	}

.FandQ hr{
	border:solid 1px #C0C0C0;
	margin:4% 0%;

}

.FandQ p{
	text-align:justify;
	font-size:1.5em;
	font-family:"Noto Sans JP";
}

.about2 {
	position:relative;
	width:100%;
}


.about2 p {
	position:absolute;
	width:100vw;
	font-size:3.5vw;
	color:#4d4d4d;
    font-weight: 300;
	font-family:"Noto Sans JP"; 
  margin:5.5% 5% ;
  padding:0;
  animation-name: fadein3;
    animation-duration: 1.8s;
    animation-iteration-count: 1;
}

	

	
@keyframes fadein3 {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

	
.about2 img{
     width: 100%;	
	 vertical-align: bottom;
	 text-align:center;
	 margin-bottom:25px;
	}


.passkanri{
	width:100%;
	}

.passkanri h1{	margin:3% 5% 0% 5%;
	font-family:"Noto Sans JP";
	color:#3c5664;
	font-size:3.7vm;
	font-weight:900;
	display:flex;
	align-items:center;}

.passkanri h1:after{
		border-top:5px solid;
	content:"";
	flex-grow: 1;
	margin-left:1rem;
}

.passkanri p{
	margin-left:5%;
	font-family:"Noto Sans JP";
	font-size:3vw;
	font-weight:400;
	text-align:justify;}

.passkanri ul{
	margin-left:5%;
	font-family:"Noto Sans JP";
	font-size:2.6vw;
	font-weight:700;
	text-align:justify;
	font-feature-settings:pkna;}

.passkanri li{
	color:#3c5664;
	font-feature-settings:pkna;
	}
.passkanri span{
	color:#000000;}

.passkanri img{
	width:80%;
	margin-top:2%;
	text-align:center;
	margin:3% 10% 20% 10%;
}


.passkanri2{
width:100%;
	}

.passkanri2 h1{	margin:3% 5% 0% 5%;
	font-family:"Noto Sans JP";
	color:#3c5664;
	font-size:3.7vm;
	font-weight:900;
	display:flex;
	align-items:center;}

.passkanri2 h1:after{
		border-top:5px solid;
	content:"";
	flex-grow: 1;
	margin-left:1rem;
}

.passkanri2 p{
	margin-left:5%;
	font-family:"Noto Sans JP";
	font-size:3vw;
	font-weight:400;
	text-align:justify;}

.passkanri2 ul{
	margin-left:5%;
	font-family:"Noto Sans JP";
	font-size:2.6vw;
	font-weight:700;
	text-align:justify;}

.passkanri2 li{
	color:#3c5664;
	}
.passkanri2 span{
	color:#000000;}

.passkanri2 img{
	width:90%;
	margin-top:2%;
	text-align:center;
	margin:3% 10% 5% 5%;
}


.example{
	  position: relative;
	  font-family:"Noto Sans JP";
    margin: 5% 5% 10% 5%;
    padding: 1% 2%;
    border: solid 3px #3c5664;}

.example .box-title {
    position: absolute;
    display: inline-block;
	font-size:2.8vw;
    top: -5%;
    left: -3px;
    padding: 0.3% 3%;
    height: 4.2%;
    line-height: 120%;
    background: #3c5664;
    color: #ffffff;
    font-weight: bold;
    border-radius: 15px 15px 0 0;
}

.example h1{
	color:#3c5664;
	font-size:2.8vw;
	font-weight:700;
	}

.example p{
	text-align:justify;
	font-family:"Noto Sans JP";
	margin-top:1%;
}
.example .sentaku{
	border:2px solid #3c5664;
	color:#3c5664;
	font-size:2.5vw;
	padding:0.3px 5px;
	line-height:250%;
	}

.example .naiyou{
	font-size:2.4vw;
	font-family:"Noto Sans JP";
	line-height:150%;
	padding-left:5%;
	}
.example img{
	width:100%;
	margin:2% 0%;
	}