@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;800;900&display=swap');
* {
	margin: 0;
	padding: 0;
}

body{
	margin: 0;
	padding: 0;
	width: 100%;
	color: #000000;
	font-family: 'Noto Sans JP', "游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
	font-weight: 500;
	font-size: 15px;
	text-align: left;
	line-height: 140%;
	letter-spacing: 1px;
	font-feature-settings: "palt";
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html{ height:100%; }
body{ height:100%; } 
p, ul, li, dl, dd, dt, th, td{
	font-size:12px;
}
textarea,input {
	padding:2px;
}
img {
	border: 0px;
	vertical-align: bottom;
}
ul {
	list-style-type: none;
	padding:0;
	margin:0;
}
li {
	list-style-position: outside;
     	line-height:170%;
}
form {
	margin:0;
	padding:0;
}
div{
	display:block;
}
object,
embed {
	vertical-align: top;
}

a:link ,
a:visited { 
	color:#1f4b91;
	text-decoration: none;
	transition: .3s;
}
a:active ,
a:hover {
 opacity:0.5;
	text-decoration: none;	
}

div#wrap {
 margin: 0;
 padding: 0;
 width: 100%;
 text-align: center;
 zoom: 1;
}
body > div#wrap{     height:auto; }





/* PC */
.spOnly {
		display: none;
}
div#wrap {
	padding: 0;
}
/* header 
---------------------------------------------------------*/
header{
 width: 100%;
 height: 80px;
 background-color: #fff;
 text-align: left;
}
header h1{
 float: left;
 margin: 16px 0 0 26px;
 width: 398px;
}
header h1 img{
 width: 100%;
 height: auto;
}
header h2{
 float: left;
 margin: 20px 0 0 20px;
 padding: 6px 16px 9px;
 font-size: 24px;
 line-height: 100%;
 text-align: center;
 font-weight: 500;
 color: #fff;
 display: inline-block;
 background-color: #087fd5;
}


#main{
 width: 100%;
 position: relative;
 overflow-y: hidden;
}
#main video{
 width: 100%;
 height: auto;
 position: relative;
}
#main .main{
 width: 100%;
 height: auto;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 2;
}
#main .mainT{
 margin: auto;
 width: 674px;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 z-index: 3;
 display: flex;
  justify-content: center;
  align-items: center;
}
#main .mainT img{
 width: 100%;
 height: auto;
}

h3{
 padding: 85px 0 0;
 font-size: 32px;
 line-height: 180%;
 text-align: center;
 color: #087fd5;
 font-weight: 600;
}
.txt{
 padding: 35px 0 73px;
 font-size: 16px;
 line-height: 36px;
 text-align: center;
 font-weight: 600;
}

#case{
 width: 100%;
}
#case .box{
 width: 100%;
 background-color: #ebf7ff;
}
#case .box .inner{
 margin: 0 auto;
 width: 1200px;
 position: relative;
}
#case .box .inner .caseP{
 width: 500px;
 position: absolute;
 top: -22px;
 left: 0;
}
#case .box .inner .caseP img{
 width: 100%;
 height: auto;
}
#case .box .inner .caseR{
 float: right;
 padding: 30px 0 25px;
 width: 660px;
}
#case .box .inner .caseR .dx{
 float: left;
 margin: 12px 0 0;
 padding: 13px 0 16px;
 width: 160px;
 font-size: 18px;
 line-height: 100%;
 text-align: center;
 font-weight: 500;
 color: #fff;
 border-radius: 30px;
 background-color: #087fd5;
}
#case .box .inner .caseR .dxT{
 float: left;
 padding: 0 0 0 30px;
 font-size: 32px;
 line-height: 100%;
 text-align: left;
 font-weight: 500;
}
#case .box .inner .caseR .dxT span{
 font-size: 18px;
 text-align: left;
 font-weight: 500;
}
#case .box .inner .caseR .caseRT{
 padding: 18px 0 0;
 font-size: 32px;
 line-height: 48px;
 text-align: left;
 font-weight: 500;
 color: #087fd5;
}
#case .case{
 margin: 85px auto 0;
 padding: 0 0 95px;
 width: 1000px;
}
#case .case .caseT{
 margin: 0 0 17px;
 padding: 12px 0 13px 31px;
 width: 100%;
 font-size: 22px;
 line-height: 100%;
 text-align: left;
 font-weight: 500;
 color: #fff;
 background-color: #087fd5;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
#case .case .cBox{
 padding: 0 0 50px;
 width: 100%;
}
#case .case .cBox img{
 float: left;
 width: 500px;
 height: auto;
}
#case .case .cBox .mov {
 float: left;
  width: 500px;
  aspect-ratio: 100 / 56;
}
#case .case .cBox .mov iframe {
  width: 100%;
  height: 100%;
}
#case .case .cBox .cBoxR{
 float: right;
 padding: 25px 0 0;
 width: 458px;
}
#case .case .cBox .cBoxR .cBoxRT{
 padding: 0 0 20px;
 font-size: 32px;
 line-height: 48px;
 text-align: left;
 font-weight: 600;
 color: #087fd5;
}
#case .case .cBox .cBoxR p{
 padding: 0 0 37px;
 font-size: 16px;
 line-height: 180%;
 text-align: left;
 font-weight: 500;
}
#case .case .cBox .cBoxR .btn{
 padding: 0;
 width: 350px;
}
#case .case .cBox .cBoxR .btn a{
 margin: 0;
 padding: 16px 0 16px;
 width: 100%;
 font-size: 18px;
 line-height: 100%;
 text-align: center;
 font-weight: 600;
 color: #fff;
 border-radius: 30px;
 background-color: #4c95cc;
 display: block;
}

/* フッター 
---------------------------------------------------------*/
footer{
 margin: 0;
 padding: 79px 0 0;
 width: 100%;
 background-color: #ebf7ff;
}
footer .fIn{
 width: 100%;
 height: 30px;
 background-color: #087fd5;
 border-top: 5px solid #fff;
}







@media screen and (max-width: 1200px){
/* header 
---------------------------------------------------------*/
header{
 width: 100%;
 height: 6.7vw;
}
header h1{
 margin: 1.3vw 0 0 2.2vw;
 width: 33%;
}
header h2{
 float: left;
 margin: 1.6vw 0 0 1.6vw;
 padding: 0.5vw 1.2vw 0.8vw;
 font-size: 2vw;
}

#main .mainT{
 width: 56%;
}

h3{
 padding: 7vw 0 0;
 font-size: 2.68vw;
 line-height: 180%;
}
.txt{
 padding: 3vw 0 6.4vw;
 font-size: 1.34vw;
 line-height: 220%;
}

#case .box .inner{
 width: 100%;
}
#case .box .inner .caseP{
 width: 41.6%;
 top: -1.9vw;
}
#case .box .inner .caseR{
 padding: 2.5vw 0 2.1vw;
 width: 55%;
}
#case .box .inner .caseR .dx{
 margin: 1vw 0 0;
 padding: 1.1vw 0 1.3vw;
 width: 24.5%;
 font-size: 1.5vw;
}
#case .box .inner .caseR .dxT{
 padding: 0 0 0 4.5%;
 font-size: 2.66vw;
}
#case .box .inner .caseR .dxT span{
 font-size: 1.5vw;
}
#case .box .inner .caseR .caseRT{
 padding: 1.4vw 0 0;
 font-size: 2.68vw;
 line-height: 150%;
}
#case .case{
 margin: 7vw auto 0;
 padding: 0 0 8vw;
 width: 83.3%;
}
#case .case .caseT{
 margin: 0 0 1.4vw;
 padding: 1vw 0 1.15vw 3%;
 width: 100%;
 font-size: 1.85vw;
 line-height: 100%;
}
#case .case .cBox{
 padding: 0 0 4vw;
 width: 100%;
}
#case .case .cBox img{
 width: 50%;
}
#case .case .cBox .mov {
  width: 50%;
  aspect-ratio: 100 / 56;
}
#case .case .cBox .cBoxR{
 padding: 2vw 0 0;
 width: 45.8%;
}
#case .case .cBox .cBoxR .cBoxRT{
 padding: 0 0 1.75vw;
 font-size: 2.66vw;
 line-height: 150%;
}
#case .case .cBox .cBoxR p{
 padding: 0 0 3.2vw;
 font-size: 1.33vw;
 line-height: 180%;
}
#case .case .cBox .cBoxR .btn{
 padding: 0;
 width: 76%;
}
#case .case .cBox .cBoxR .btn a{
 margin: 0;
 padding: 1.3vw 0 1.3vw;
 width: 100%;
 font-size: 1.5vw;
 line-height: 100%;
}

/* フッター 
---------------------------------------------------------*/
footer{
 margin: 0;
 padding: 6.5vw 0 0;
}
footer .fIn{
 width: 100%;
 height: 2.5vw;
}



}



@media screen and (max-width: 780px){
/* SP */
.pcOnly {
		display: none;
}
.spOnly {
		display: block;
}
div#wrap {
	padding: 0;
}
/* header 
---------------------------------------------------------*/
header{
 width: 100%;
 height: 9.8vw;
 background-color: #fff;
 text-align: left;
}
header h1{
 float: left;
 margin: 1.4vw 0 0 2%;
 width: 50%;
}
header h1 img{
 width: 100%;
 height: auto;
}
header h2{
 float: left;
 margin: 1.6vw 0 0 2%;
 padding: 0.9vw 2% 1.2vw;
 font-size: 3.2vw;
 line-height: 100%;
 text-align: center;
 font-weight: 500;
 color: #fff;
 display: inline-block;
 background-color: #087fd5;
}


#main{
 width: 100%;
 position: relative;
 overflow-y: hidden;
}
#main video{
 width: 100%;
 height: auto;
 position: relative;
}
#main .non{
 display: none;
}
#main .main{
 width: auto;
 height: 100%;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 z-index: 2;
}
#main .mainT{
 margin: auto;
 width: 90%;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 z-index: 3;
 display: flex;
  justify-content: center;
  align-items: center;
}
#main .mainT img{
 width: 100%;
 height: auto;
}

h3{
 padding: 9vw 0 0;
 font-size: 5.6vw;
 line-height: 180%;
 text-align: center;
 color: #087fd5;
 font-weight: 600;
}
.txt{
 padding: 4vw 0 14vw;
 font-size: 3.3vw;
 line-height: 200%;
 text-align: center;
 font-weight: 600;
}

#case{
 width: 100%;
}
#case .box{
 padding: 6vw 0 3vw;
 width: 100%;
 background-color: #ebf7ff;
}
#case .box .inner{
 margin: 0 auto;
 width: 90%;
 position: relative;
}
#case .box .inner .caseP{
 width: 100%;
 position: static;
 top: 0;
 left: 0;
}
#case .box .inner .caseP img{
 width: 100%;
 height: auto;
}
#case .box .inner .caseR{
 float: none;
 padding: 4vw 0 3vw;
 width: 100%;
}
#case .box .inner .caseR .dx{
 float: left;
 margin: 2vw 0 0;
 padding: 2vw 0 2.2vw;
 width: 27%;
 font-size: 3.4vw;
 line-height: 100%;
 text-align: center;
 font-weight: 500;
 color: #fff;
 border-radius: 30px;
 background-color: #087fd5;
}
#case .box .inner .caseR .dxT{
 float: left;
 padding: 0 0 0 5%;
 font-size: 5.5vw;
 line-height: 100%;
 text-align: left;
 font-weight: 500;
}
#case .box .inner .caseR .dxT span{
 font-size: 3.2vw;
 text-align: left;
 font-weight: 500;
}
#case .box .inner .caseR .caseRT{
 padding: 3vw 0 0;
 font-size: 5.6vw;
 line-height: 150%;
 text-align: left;
 font-weight: 500;
 color: #087fd5;
}
#case .case{
 margin: 8vw auto 0;
 padding: 0 0 10vw;
 width: 100%;
}
#case .case .caseT{
 margin: 0 0 4vw;
 padding: 3vw 0 3vw 2%;
 width: 100%;
 font-size: 3.8vw;
 line-height: 100%;
 text-align: left;
 font-weight: 500;
 color: #fff;
 background-color: #087fd5;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
#case .case .cBox{
 margin: 0 auto;
 padding: 0 0 5vw;
 width: 90%;
}
#case .case .cBox img{
 float: none;
 width: 100%;
 height: auto;
}
#case .case .cBox .mov {
 float: none;
 width: 100%;
 aspect-ratio: 100 / 56;
}
#case .case .cBox .mov iframe {
  width: 100%;
  height: 100%;
}
#case .case .cBox .cBoxR{
 float: none;
 padding: 3vw 0 0;
 width: 100%;
}
#case .case .cBox .cBoxR .cBoxRT{
 padding: 0 0 3vw;
 font-size: 6vw;
 line-height: 150%;
 text-align: left;
 font-weight: 600;
 color: #087fd5;
}
#case .case .cBox .cBoxR p{
 padding: 0 0 4vw;
 font-size: 3.4vw;
 line-height: 180%;
 text-align: left;
 font-weight: 500;
}
#case .case .cBox .cBoxR .btn{
 padding: 0;
 width: 70%;
}
#case .case .cBox .cBoxR .btn a{
 margin: 0 0 6vw;
 padding: 2.8vw 0 3vw;
 width: 100%;
 font-size: 3.6vw;
 line-height: 100%;
 text-align: center;
 font-weight: 600;
 color: #fff;
 border-radius: 30px;
 background-color: #4c95cc;
 display: block;
}

/* フッター 
---------------------------------------------------------*/
footer{
 margin: 0;
 padding: 11vw 0 0;
 width: 100%;
 background-color: #ebf7ff;
}
footer .fIn{
 width: 100%;
 height: 4vw;
 background-color: #087fd5;
 border-top: 5px solid #fff;
}





}



@media screen and (max-width: 763px) and (orientation: landscape) {
   /* 横向きの場合のスタイル */


}





/* other
---------------------------------------------------------*/
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */