@import url("menu.css");
@import url("jssor.css");
@import url("layout.css");
@import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

.inner96 {
    width: 96%;
    margin: 2%;
	overflow:hidden;
}
.mv-img {
    margin:0;
	
}
.mv-img img {
    vertical-align: middle;
    max-width: 100%;
}
#sec-h1 {
    padding: 300px 0 300px;
   background:url(../images/topbg.png);
   background-size:cover;
}

.banner{
	padding:200px 0;
	background:url(../images/topbg.png) no-repeat center;
    background-size:cover;
}
.toptext{
	width:1000px;
	height:auto;
	margin:0 auto;
}
.toptext h1{
	font-size:4.375rem;
	font-weight:500;
	line-height:1.5;
	color:#333;
	text-align:center;
}
.toptext p{
	font-size: 1.5rem;
	font-weight:400;
	line-height:1.5;
	color:#333;
	
	text-align:center;
}
.line{
	width:1px;
	height:80px;
	background:#000;
	margin:30px auto;
}


.innerW {
    max-width: 1600px;
    width: 90%;
    margin: 0 auto;
}
.flex-h1 {
    align-items: flex-end;
    justify-content: space-between;
}
.flexBox {
    display: flex;
    justify-content: space-between;
}
.h1-catch {
    width: 90%;
}
#sec-h1 h1 {
    font-size: 70px;
    line-height: 1;   
}
.enS {
   
}
.s1_left{
	width:50%;
	float:left;
	padding:5%;

}
.s1_left img{
	border-radius:20px;
	box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 80px -20px, rgba(0, 0, 0, 0.3) 0px 20px 50px -20px;
}
.s1_right{
	width:50%;
	float:right;
	padding:5%;
}
.s1_right h2{
	font-size: 3rem;
	font-weight:600;
	letter-spacing:2px;
	padding:40px 0;
}
.s1_right p{
	font-size:1.375rem;
	font-weight:400;
	letter-spacing:3px;
	line-height:1.6;
	color:#333;
	padding:20px 0;
}
.s1_right p span{
	background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(0%, #7ecef4));
    background: -webkit-linear-gradient(transparent 70%, #7ecef4 0%);
    background: linear-gradient(transparent 70%, #7ecef4 0%);
}
.gradient{
    background: linear-gradient(to right, #1c6bad, #45a3e0, #72c5ef);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
.blue-line {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(0%, #7ecef4));
    background: -webkit-linear-gradient(transparent 70%, #7ecef4 0%);
    background: linear-gradient(transparent 70%, #7ecef4 0%);
}
.title{
	font-size: 3rem;
	font-weight:600;
	padding:20px 0; 
}
.subtitle{
	font-size: 1.625rem;
	font-weight:500;
	color:#1c6bad;
	padding:20px 0; 
}
.text{
	font-size: 1.375rem;
	font-weight:300;
	line-height:1.6;
	color:#333;
	letter-spacing:2px;
	padding:0 0 10px 0;
}
.caption{
	font-size: 1.625rem;
	font-weight:500;
	padding:20px 0; 
}
.s2{
	overflow:hidden;
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
	margin:2% 0;
}
.s2 li:nth-child(1){
	width:48%;
	float:left;
}
.s2 li:nth-child(2){
	width:48%;
	float:right;
}
.s2 li{
	background:#f5f5f5;
	padding:30px;
	border-radius:20px;
}
.s2 li h5{
	font-size: 1.5rem;
	font-weight:500;
	text-align:center;
	padding:20px 0;
}
.s2 li h6{
	font-size: 1.25rem;
	font-weight:300;
	line-height:1.6;
	color:#333;
	letter-spacing:2px;
	position: relative;
    padding: 0 0 10px 20px;
    display: flex;
}
.s2 li h6::before{
	position: absolute;
  content: '';
  left: 0;
  top:12px;
  width: 10px;
  height: 10px;
  background-color: #008cd4;/*四角を作って*/
  transform: rotate(45deg);/*45度回転*/
}
.s2 li p{
	font-size: 1.25rem;
	font-weight:300;
	line-height:1.6;
	color:#333;
	letter-spacing:2px;
}
.s21{
	overflow:hidden;
	display: flex;   
    flex-wrap: wrap;
	padding:4% 10px;
}
.s21 li{
	float:left;
	width:32%;
	margin:0 2% 2% 0;
	background:#fff;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	padding:20px;
	border-radius:5px;
}
.s21 li:nth-child(3n+3){
	margin:0 0 2% 0;
}
.s21 li h6{
	font-size: 1.4375rem;
	font-weight:500;
	line-height:1.6;
	color:#333;
	padding:10px 0;
}
.s21 li p{
	font-size: 1.125rem;
	font-weight:300;
	line-height:1.6;
	color:#333;
	
}
.advice{
	font-size:2rem;
	font-weight:500;
	text-align:center;
	line-height:1.6;
	padding:50px;
}
.p2{
	overflow:hidden;
	display: flex;   
    flex-wrap: wrap;
}

.p2 li {
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 6px;
	float:left;
	width:46%;
	margin:2%;
	padding:15px;	
}
.p2 li h2{
	font-size:1.375rem;
	font-weight:400;
	text-align:center;
	color:#018bd4;
	padding:15px 0;
}
.p2 li p{
	font-size: 1.125rem;
	font-weight:400;
	line-height:1.6;
	color:#333;
	text-align:center;
}
.star{
	width:50px;
	height:50px;
	background:#018bd4;
	border-radius:50px;
	padding:12px;
	margin:20px auto;
}
.star img{
	width:100%;
}


/*========= テキストを滑らかに出現させるためのCSS ===============*/
span.smoothText {
  overflow: hidden;
  display: block;
}

/* アニメーションで傾斜がついている文字列を水平に戻す*/

span.smoothTextTrigger.st02{
  transition: .8s ease-in-out;
  transform: translate3d(0,100%,0) skewY(12deg);
  transition-delay: 3s;
  transform-origin: left;
  display: block;
}
span.smoothTextTrigger{
  transition: .8s ease-in-out;
  transform: translate3d(0,100%,0) skewY(12deg);
  transition-delay: 2.5s;
  transform-origin: left;
  display: block;
   font-family: "Syncopate", sans-serif;
    font-weight: 400;
}
span.smoothTextTrigger.smoothTextAppear{
    transform: translate3d(0,0,0) skewY(0);
}

#sec-h1 h2 {
    font-size: 21px;
}
a.scroll {
    display: inline-block;
    position: relative;
    z-index: 2;
    padding: 0 0 110px;
    overflow: hidden;
    color: #212121;
    font-size: 10px;
    font-family: 'Outfit', sans-serif;
    line-height: 1;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-decoration: none;
    writing-mode: vertical-lr;
}
a.scroll::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 100px;
    background: #bcbcbc;
}
a.scroll::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 100px;
    background: #222222;
    animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}


.table-wrap{
	width:100%;
	border:1px solid #799dc1;
	border-radius:8px;
	overflow:hidden;
	overflow-x: auto;
	margin:20px 0;
}
.table{
	width:100%;
	background:#e2ecf6;
	font-size:1.125rem;
	line-height:1.8;
	text-align:center;
	border-collapse: collapse;
	border-spacing: 0;
	
	/*border-collapse: separate;
	border:1px solid #025949;
	border-radius:10px;
	overflow:hidden;*/
}
.table thead{
	background:#4f81b4;
	color:#fff;
}
.table thead tr:first-child{
	border-bottom:2px solid #799dc1;
}
.table tbody{
}
.table tbody tr:nth-child(odd){
	background:#fff;
	border-bottom:1px solid #aaa;
	border-top:1px solid #aaa;
}
.table tbody tr:nth-child(even){
}
.table tbody tr:last-child{
}
.table th, .table td{
	padding: 0.6rem 0.6rem;
}

.p3{
	overflow:hidden;
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
	margin:2% 0;
	background:#fff;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.p3 li{
	width:25%;
	float:left;
	padding:24px;
	border-left: 1px solid #f1f5ff;
	text-align:center;
}
.p3 li:nth-child(1){
	border-left: 0px solid #f1f5ff;
}
.p3 li h3{
	font-size:3rem;
	font-weight:500;
	color:#306fab;
	font-family: "Playfair Display", serif;
	padding:30px 0;
}
.p3 li h4{
	font-size:1.5rem;
	font-weight:500;
	color:#306fab;
}
.p3 li h5{
	font-size:1.1255rem;
	font-weight:300;
	line-height:1.6;
	padding:20px 0;
}
.p3box{
	overflow:hidden;
}
.p3left{
	width:50%;
	float:left;
}
.p3right{
	width:50%;
	float:left;
}
.p3left h6{
	font-size:1.5rem;
	font-weight:500;
	padding:15px 0;
}
.p3left ul li{
	display:block;
	font-size:1.25rem;
	font-weight:400;
	padding:10px 0;
	letter-spacing:1px;
}
.img3{
	width:650px;
	margin:0 auto;
}
.p3title{
	font-size: 2.5rem;
	font-weight:600;
	padding:40px 0;
    text-align:center;	
}
.p3title span{

}
.t-center{
	text-align:center;	
}
.sec4{
	padding:5% 0;
	background-image: linear-gradient(-36deg, #cad8f7 30%, #ecf1f9 60%, white 100%);
}


.p4{
	overflow:hidden;
	display: flex;   
    flex-wrap: wrap;
	margin:4% 0 0 0;
}
.p4 li{
	float:left;
	width:33.3333%;
	margin:0 0 2% 0;
	
	padding:20px;
	border-radius:5px;
	text-align:center;
}
.p4 li:nth-child(3n+3){
	margin:0 0 2% 0;
}
.p4 li h4{
	font-size:3rem;
	font-weight:600;
	color:#028ad4;
	font-family: "Playfair Display", serif;
	padding:30px 0;
	
}
.p4 li h5{
	font-size:1.75rem;
	font-weight:500;
	
}
.p4 li p{
	font-size:1.1875rem;
	font-weight:400;
	padding:20px 0;
	line-height:1.6;
	letter-spacing:2px;
}


.sec5{
	padding:5% 0;
	background:url(../images/p6.png);
}
.p5box{
    overflow:hidden;
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
	margin:3% auto 0 auto;
	width:100%;
}
.p5box li{
	width:50%;
	float:left;
	padding:20px;
}

.p5box li:nth-child(5){
	width:100%;
}
.p5box li h4{
	font-size:2rem;
	font-weight:500;
	text-align:center;
	color:#028ad6;
	padding-bottom: 14px;
	position: relative;
	margin:0 0 20px 0;
}
.p5box li h4::after{
	content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
	width: 40px;
    height: 2px;
	background-color: #028ad6;
}
.p5box li p{
	font-size:1.1875rem;
	font-weight:400;
	padding:10px 0;
}
.sec6{
	background: #f1f6fd;
	padding:5% 0;
}
.btn{
	width:240px;
	height:60px;
	font-size:1.25rem;
	line-height:60px;
	font-weight:400;
	text-align:center;
	margin:10px 0;
}
.btn a{
	display:block;
	background:#fff;
	border:1px solid #333;
	color:#333;
	border-radius:10px;
}
.btn a:hover{
	background:#333;
	color:#fff;
}


@media (max-width: 1440px) {

}


@media (max-width: 1366px) {

}

@media (max-width: 1024px) {
.banner {
    padding: 100px 0;
}

.toptext{
	width:90%;
}
.toptext h1{
	font-size:3rem;
}
.p3 li{
	width:50%;
}
.title{
	font-size:2rem;
}
}

@media (max-width: 768px) {

.s2 li:nth-child(1){
	width:100%;
	float:none;
	margin:0 0 10px 0;
}
.s1_left{
	width:100%;
	float:none;
	padding:10%;
}
.s1_right{
	width:100%;
	float:none;
}
.s2 li:nth-child(2){
	width:100%;
	float:none;
}
.s21 li{
	float:left;
	width:48%;
	margin:0 2% 2% 0;
}
.s21 li:nth-child(3n+3){
	margin:0 2% 2% 0;
}
.p4 li{
	float:left;
	width:50%;
}
.p5box li{
	width:100%;
}
}

@media (max-width: 640px) {
.img3{
	width:100%;
}
}

@media (max-width: 480px) {

}